Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
@twind/preset-typography
Advanced tools
@twind/preset-typography - npm Package Compare versions
Comparing version 1.0.5-next-20221220021500 to 1.0.5-next-20221220080151
| # @twind/preset-typography | ||
| ## 1.0.5-next-20221220021500 | ||
| ## 1.0.5-next-20221220080151 | ||
@@ -12,3 +12,3 @@ ### Patch Changes | ||
| - Updated dependencies [[`02ea227a`](https://github.com/tw-in-js/twind/commit/02ea227afffe474cde5e843c3519f0836ee18f8a), [`6521e678`](https://github.com/tw-in-js/twind/commit/6521e678821f05de8cd3a87b0176083efee43405), [`c832b338`](https://github.com/tw-in-js/twind/commit/c832b33849690545e7a4dffbdada2f5b97f6aa08)]: | ||
| - @twind/core@1.1.1-next-20221220021500 | ||
| - @twind/core@1.1.1-next-20221220080151 | ||
@@ -15,0 +15,0 @@ ## 1.0.4 |
| { | ||
| "name": "@twind/preset-typography", | ||
| "version": "1.0.5-next-20221220021500", | ||
| "version": "1.0.5-next-20221220080151", | ||
| "description": "A twind preset that provides a set of `prose` classes you can use to add beautiful typographic defaults to any vanilla HTML you don't control, like HTML rendered from Markdown, or pulled from a CMS.", | ||
@@ -79,3 +79,3 @@ "type": "module", | ||
| "peerDependencies": { | ||
| "@twind/core": "1.1.1-next-20221220021500", | ||
| "@twind/core": "1.1.1-next-20221220080151", | ||
| "typescript": "^4.8.4" | ||
@@ -82,0 +82,0 @@ }, |
@@ -1,632 +0,1 @@ | ||
| import { withAutocomplete, toColorValue } from '@twind/core'; | ||
| /** | ||
| * Twind Preset for Typography | ||
| * | ||
| * ```js | ||
| * // twind.config.js | ||
| * import { defineConfig } from '@twind/core' | ||
| * import presetTypography from '@twind/preset-typography' | ||
| * | ||
| * export default defineConfig({ | ||
| * presets: [ | ||
| * presetTypography(), | ||
| * ], | ||
| * }) | ||
| * ``` | ||
| * | ||
| * @returns typography preset | ||
| */ function presetTypography({ className ='prose' , defaultColor ='gray' , extend ={} , colors ={} } = {}) { | ||
| colors = { | ||
| body: '700', | ||
| headings: '900', | ||
| lead: '600', | ||
| links: '900', | ||
| bold: '900', | ||
| counters: '500', | ||
| bullets: '300', | ||
| hr: '200', | ||
| quotes: '900', | ||
| 'quote-borders': '200', | ||
| captions: '500', | ||
| code: '900', | ||
| 'pre-code': '200', | ||
| 'pre-bg': '800', | ||
| 'th-borders': '300', | ||
| 'td-borders': '200', | ||
| ...colors, | ||
| // invert colors (dark mode) | ||
| dark: null === colors.dark ? null : { | ||
| body: '300', | ||
| headings: '#fff', | ||
| lead: '400', | ||
| links: '#fff', | ||
| bold: '#fff', | ||
| counters: '400', | ||
| bullets: '600', | ||
| hr: '700', | ||
| quotes: '100', | ||
| 'quote-borders': '700', | ||
| captions: '400', | ||
| code: '#fff', | ||
| 'pre-code': '300', | ||
| 'pre-bg': 'rgb(0 0 0 / 50%)', | ||
| 'th-borders': '600', | ||
| 'td-borders': '700', | ||
| ...colors.dark | ||
| } | ||
| }; | ||
| return { | ||
| // for element modifiers: prose-img:rounded-xl, prose-headings | ||
| // & :is() | ||
| // & :is(:where(code):not(:where([class~="not-prose"] *))) | ||
| variants: [ | ||
| [ | ||
| 'headings', | ||
| 'h1,h2,h3,h4,h5,h6,th' | ||
| ], | ||
| [ | ||
| 'h1' | ||
| ], | ||
| [ | ||
| 'h2' | ||
| ], | ||
| [ | ||
| 'h3' | ||
| ], | ||
| [ | ||
| 'h4' | ||
| ], | ||
| [ | ||
| 'h5' | ||
| ], | ||
| [ | ||
| 'h6' | ||
| ], | ||
| [ | ||
| 'p' | ||
| ], | ||
| [ | ||
| 'a' | ||
| ], | ||
| [ | ||
| 'blockquote' | ||
| ], | ||
| [ | ||
| 'figure' | ||
| ], | ||
| [ | ||
| 'figcaption' | ||
| ], | ||
| [ | ||
| 'strong' | ||
| ], | ||
| [ | ||
| 'em' | ||
| ], | ||
| [ | ||
| 'code' | ||
| ], | ||
| [ | ||
| 'pre' | ||
| ], | ||
| [ | ||
| 'ol' | ||
| ], | ||
| [ | ||
| 'ul' | ||
| ], | ||
| [ | ||
| 'li' | ||
| ], | ||
| [ | ||
| 'table' | ||
| ], | ||
| [ | ||
| 'thead' | ||
| ], | ||
| [ | ||
| 'tr' | ||
| ], | ||
| [ | ||
| 'th' | ||
| ], | ||
| [ | ||
| 'td' | ||
| ], | ||
| [ | ||
| 'img' | ||
| ], | ||
| [ | ||
| 'video' | ||
| ], | ||
| [ | ||
| 'hr' | ||
| ], | ||
| [ | ||
| 'lead', | ||
| '.lead' | ||
| ] | ||
| ].map(([name, selector = name])=>[ | ||
| `${className}-${name}`, | ||
| (_, context)=>adjustSelector(className, '.' == selector[0] ? '.' + context.e(context.h(selector.slice(1))) : selector, context, (selector)=>`& :is(${selector.trim()})`) | ||
| ]), | ||
| rules: [ | ||
| // marker classes lead and not-prose | ||
| [ | ||
| `(lead|not-${className})`, | ||
| ({ 1: $1 }, { h })=>[ | ||
| { | ||
| c: h($1) | ||
| } | ||
| ] | ||
| ], | ||
| [ | ||
| `${className}-invert`, | ||
| { | ||
| '@layer defaults': { | ||
| '--tw-prose-body': 'var(--tw-prose-invert-body)', | ||
| '--tw-prose-headings': 'var(--tw-prose-invert-headings)', | ||
| '--tw-prose-lead': 'var(--tw-prose-invert-lead)', | ||
| '--tw-prose-links': 'var(--tw-prose-invert-links)', | ||
| '--tw-prose-bold': 'var(--tw-prose-invert-bold)', | ||
| '--tw-prose-counters': 'var(--tw-prose-invert-counters)', | ||
| '--tw-prose-bullets': 'var(--tw-prose-invert-bullets)', | ||
| '--tw-prose-hr': 'var(--tw-prose-invert-hr)', | ||
| '--tw-prose-quotes': 'var(--tw-prose-invert-quotes)', | ||
| '--tw-prose-quote-borders': 'var(--tw-prose-invert-quote-borders)', | ||
| '--tw-prose-captions': 'var(--tw-prose-invert-captions)', | ||
| '--tw-prose-code': 'var(--tw-prose-invert-code)', | ||
| '--tw-prose-pre-code': 'var(--tw-prose-invert-pre-code)', | ||
| '--tw-prose-pre-bg': 'var(--tw-prose-invert-pre-bg)', | ||
| '--tw-prose-th-borders': 'var(--tw-prose-invert-th-borders)', | ||
| '--tw-prose-td-borders': 'var(--tw-prose-invert-td-borders)' | ||
| } | ||
| } | ||
| ], | ||
| // for type scale: prose-xl | ||
| [ | ||
| className + '-', | ||
| /** | ||
| * The class name to use the typographic utilities. | ||
| * To undo the styles to the elements, use it like | ||
| * `not-${className}` which is by default `not-prose`. | ||
| * | ||
| * Note: `not` utility is only available in class. | ||
| * | ||
| * @defaultValue `prose` | ||
| */ /** | ||
| * Default color to use. | ||
| * | ||
| * @defaultValue 'gray' | ||
| */ /** | ||
| * @defaultValue '700' | ||
| */ /** | ||
| * @defaultValue '900' | ||
| */ /** | ||
| * @defaultValue '600' | ||
| */ /** | ||
| * @defaultValue '900' | ||
| */ /** | ||
| * @defaultValue '900' | ||
| */ /** | ||
| * @defaultValue '500' | ||
| */ /** | ||
| * @defaultValue '300' | ||
| */ /** | ||
| * @defaultValue '200' | ||
| */ /** | ||
| * @defaultValue '900' | ||
| */ /** | ||
| * @defaultValue '200' | ||
| */ /** | ||
| * @defaultValue '500' | ||
| */ /** | ||
| * @defaultValue '900' | ||
| */ /** | ||
| * @defaultValue '200' | ||
| */ /** | ||
| * @defaultValue '800' | ||
| */ /** | ||
| * @defaultValue '300' | ||
| */ /** | ||
| * @defaultValue '200' | ||
| */ // invert colors (dark mode) | ||
| /** | ||
| * @defaultValue '300' | ||
| */ /** | ||
| * @defaultValue '#fff' | ||
| */ /** | ||
| * @defaultValue '400' | ||
| */ /** | ||
| * @defaultValue '#fff' | ||
| */ /** | ||
| * @defaultValue '#fff' | ||
| */ /** | ||
| * @defaultValue '400' | ||
| */ /** | ||
| * @defaultValue '600' | ||
| */ /** | ||
| * @defaultValue '700' | ||
| */ /** | ||
| * @defaultValue '100' | ||
| */ /** | ||
| * @defaultValue '700' | ||
| */ /** | ||
| * @defaultValue '400' | ||
| */ /** | ||
| * @defaultValue '#fff' | ||
| */ /** | ||
| * @defaultValue '300' | ||
| */ /** | ||
| * @defaultValue 'rgb(0 0 0 / 50%)' | ||
| */ /** | ||
| * @defaultValue '600' | ||
| */ /** | ||
| * @defaultValue '700' | ||
| */ /** | ||
| * Extend or override CSS selectors with CSS declaration block. | ||
| * | ||
| * @defaultValue undefined | ||
| */ // indirection wrapper to remove autocomplete functions from production bundles | ||
| withAutocomplete(({ $$ }, context)=>{ | ||
| let css = getFontSize(context.theme('fontSize', $$)); | ||
| return css && { | ||
| '@layer components': css | ||
| }; | ||
| }, (_, { theme })=>Object.keys(theme('fontSize'))) | ||
| ], | ||
| // for colors: prose-sky | ||
| [ | ||
| className + '-', | ||
| withAutocomplete(({ $$ }, context)=>getColors($$, context), (_, { theme })=>Object.keys(theme('colors')).filter((key)=>key && 'DEFAULT' != key && !/[.-]/.test(key))) | ||
| ], | ||
| // prose | ||
| [ | ||
| className, | ||
| (_, context)=>({ | ||
| // layer defaults | ||
| ...getColors(defaultColor, context), | ||
| '@layer base': [ | ||
| adjustSelectors(className, context, { | ||
| a: { | ||
| color: 'var(--tw-prose-links)', | ||
| textDecorationLine: 'underline', | ||
| fontWeight: '500' | ||
| }, | ||
| strong: { | ||
| color: 'var(--tw-prose-bold)', | ||
| fontWeight: '600' | ||
| }, | ||
| 'a strong,blockquote strong,thead th strong': { | ||
| color: 'inherit' | ||
| }, | ||
| ul: { | ||
| listStyleType: 'disc' | ||
| }, | ||
| ol: { | ||
| listStyleType: 'decimal' | ||
| }, | ||
| 'ol[type="A"]': { | ||
| listStyleType: 'upper-alpha' | ||
| }, | ||
| 'ol[type="a"]': { | ||
| listStyleType: 'lower-alpha' | ||
| }, | ||
| 'ol[type="A" s]': { | ||
| listStyleType: 'upper-alpha' | ||
| }, | ||
| 'ol[type="a" s]': { | ||
| listStyleType: 'lower-alpha' | ||
| }, | ||
| 'ol[type="I"]': { | ||
| listStyleType: 'upper-roman' | ||
| }, | ||
| 'ol[type="i"]': { | ||
| listStyleType: 'lower-roman' | ||
| }, | ||
| 'ol[type="I" s]': { | ||
| listStyleType: 'upper-roman' | ||
| }, | ||
| 'ol[type="i" s]': { | ||
| listStyleType: 'lower-roman' | ||
| }, | ||
| 'ol[type="1"]': { | ||
| listStyleType: 'decimal' | ||
| }, | ||
| 'ol,ul': { | ||
| marginTop: em(20, 16), | ||
| marginBottom: em(20, 16), | ||
| paddingLeft: em(26, 16) | ||
| }, | ||
| li: { | ||
| marginTop: em(8, 16), | ||
| marginBottom: em(8, 16) | ||
| }, | ||
| 'ol>li,ul>li': { | ||
| paddingLeft: em(6, 16) | ||
| }, | ||
| '>ul>li p': { | ||
| marginTop: em(12, 16), | ||
| marginBottom: em(12, 16) | ||
| }, | ||
| '>ul>li>*:first-child,>ol>li>*:last-child': { | ||
| marginTop: em(20, 16) | ||
| }, | ||
| '>ul>li>*:last-child,>ol>li>*:last-child': { | ||
| marginBottom: em(20, 16) | ||
| }, | ||
| 'ol>li::marker': { | ||
| fontWeight: '400', | ||
| color: 'var(--tw-prose-counters)' | ||
| }, | ||
| 'ul>li::marker': { | ||
| color: 'var(--tw-prose-bullets)' | ||
| }, | ||
| 'ul ul,ul ol,ol ul,ol ol': { | ||
| marginTop: em(12, 16), | ||
| marginBottom: em(12, 16) | ||
| }, | ||
| hr: { | ||
| borderColor: 'var(--tw-prose-hr)', | ||
| borderTopWidth: '1', | ||
| marginTop: em(48, 16), | ||
| marginBottom: em(48, 16) | ||
| }, | ||
| blockquote: { | ||
| marginTop: em(32, 20), | ||
| marginBottom: em(32, 20), | ||
| paddingLeft: em(20, 20), | ||
| fontWeight: '500', | ||
| fontStyle: 'italic', | ||
| color: 'var(--tw-prose-quotes)', | ||
| borderLeftWidth: '0.25rem', | ||
| borderLeftColor: 'var(--tw-prose-quote-borders)', | ||
| quotes: '"\\201C""\\201D""\\2018""\\2019"' | ||
| }, | ||
| 'blockquote p:first-of-type::before': { | ||
| content: 'open-quote' | ||
| }, | ||
| 'blockquote p:last-of-type::after': { | ||
| content: 'close-quote' | ||
| }, | ||
| p: { | ||
| marginTop: em(20, 16), | ||
| marginBottom: em(20, 16) | ||
| }, | ||
| h1: { | ||
| color: 'var(--tw-prose-headings)', | ||
| fontWeight: '800', | ||
| fontSize: em(36, 16), | ||
| marginTop: '0', | ||
| marginBottom: em(32, 36), | ||
| lineHeight: 1.15 | ||
| }, | ||
| 'h1 strong': { | ||
| fontWeight: '900', | ||
| color: 'inherit' | ||
| }, | ||
| h2: { | ||
| color: 'var(--tw-prose-headings)', | ||
| fontWeight: '700', | ||
| fontSize: em(24, 16), | ||
| marginTop: em(48, 24), | ||
| marginBottom: em(24, 24), | ||
| lineHeight: '1.35' | ||
| }, | ||
| 'h2 strong': { | ||
| fontWeight: '800', | ||
| color: 'inherit' | ||
| }, | ||
| h3: { | ||
| color: 'var(--tw-prose-headings)', | ||
| fontWeight: '600', | ||
| fontSize: em(20, 16), | ||
| marginTop: em(32, 20), | ||
| marginBottom: em(12, 20), | ||
| lineHeight: '1.6' | ||
| }, | ||
| 'h3 strong': { | ||
| fontWeight: '700', | ||
| color: 'inherit' | ||
| }, | ||
| h4: { | ||
| color: 'var(--tw-prose-headings)', | ||
| fontWeight: '600', | ||
| marginTop: em(24, 16), | ||
| marginBottom: em(8, 16), | ||
| lineHeight: '1.5' | ||
| }, | ||
| 'h4 strong': { | ||
| fontWeight: '700', | ||
| color: 'inherit' | ||
| }, | ||
| 'hr+*,h2+*,h3+*,h4+*': { | ||
| marginTop: '0' | ||
| }, | ||
| 'img,video,figure': { | ||
| marginTop: em(32, 16), | ||
| marginBottom: em(32, 16) | ||
| }, | ||
| 'figure>*': { | ||
| marginTop: '0', | ||
| marginBottom: '0' | ||
| }, | ||
| figcaption: { | ||
| color: 'var(--tw-prose-captions)', | ||
| fontSize: em(14, 16), | ||
| lineHeight: '1.4', | ||
| marginTop: em(12, 14) | ||
| }, | ||
| code: { | ||
| color: 'var(--tw-prose-code)', | ||
| fontWeight: '600', | ||
| fontSize: em(14, 16) | ||
| }, | ||
| 'code::before,code::after': { | ||
| content: '"`"' | ||
| }, | ||
| 'h2 code': { | ||
| fontSize: em(21, 24) | ||
| }, | ||
| 'h3 code': { | ||
| fontSize: em(18, 20) | ||
| }, | ||
| 'a code,h1 code,h2 code,h3 code,h4 code,blockquote code,thead th code': { | ||
| color: 'inherit' | ||
| }, | ||
| pre: { | ||
| color: 'var(--tw-prose-pre-code)', | ||
| backgroundColor: 'var(--tw-prose-pre-bg)', | ||
| overflowX: 'auto', | ||
| fontWeight: '400', | ||
| fontSize: em(14, 16), | ||
| lineHeight: '1.7', | ||
| marginTop: em(24, 14), | ||
| marginBottom: em(24, 14), | ||
| borderRadius: '0.375rem', | ||
| paddingTop: em(12, 14), | ||
| paddingRight: em(16, 14), | ||
| paddingBottom: em(12, 14), | ||
| paddingLeft: em(16, 14) | ||
| }, | ||
| 'pre code': { | ||
| backgroundColor: 'transparent', | ||
| borderWidth: '0', | ||
| borderRadius: '0', | ||
| padding: '0', | ||
| fontWeight: 'inherit', | ||
| color: 'inherit', | ||
| fontSize: 'inherit', | ||
| fontFamily: 'inherit', | ||
| lineHeight: 'inherit' | ||
| }, | ||
| 'pre code::before': { | ||
| content: 'none' | ||
| }, | ||
| 'pre code::after': { | ||
| content: 'none' | ||
| }, | ||
| table: { | ||
| width: '100%', | ||
| tableLayout: 'auto', | ||
| textAlign: 'left', | ||
| marginTop: em(32, 16), | ||
| marginBottom: em(32, 16), | ||
| fontSize: em(14, 16), | ||
| lineHeight: '1.7' | ||
| }, | ||
| thead: { | ||
| borderBottomWidth: '1px', | ||
| borderBottomColor: 'var(--tw-prose-th-borders)' | ||
| }, | ||
| 'thead th': { | ||
| color: 'var(--tw-prose-headings)', | ||
| fontWeight: '600', | ||
| verticalAlign: 'bottom', | ||
| paddingRight: em(8, 14), | ||
| paddingBottom: em(8, 14), | ||
| paddingLeft: em(8, 14) | ||
| }, | ||
| 'thead th:first-child': { | ||
| paddingLeft: '0' | ||
| }, | ||
| 'thead th:last-child': { | ||
| paddingRight: '0' | ||
| }, | ||
| 'tbody tr': { | ||
| borderBottomWidth: '1px', | ||
| borderBottomColor: 'var(--tw-prose-td-borders)' | ||
| }, | ||
| 'tbody tr:last-child': { | ||
| borderBottomWidth: '0' | ||
| }, | ||
| 'tbody td,tfoot td': { | ||
| verticalAlign: 'baseline', | ||
| paddingTop: em(8, 14), | ||
| paddingRight: em(8, 14), | ||
| paddingBottom: em(8, 14), | ||
| paddingLeft: em(8, 14) | ||
| }, | ||
| 'tbody td:first-child,tfoot td:first-child': { | ||
| paddingLeft: '0' | ||
| }, | ||
| 'tbody td:last-child,tfoot td:last-child': { | ||
| paddingRight: '0' | ||
| }, | ||
| [`.${context.e(context.h('lead'))}`]: { | ||
| color: 'var(--tw-prose-lead)', | ||
| fontSize: em(20, 16), | ||
| lineHeight: '1.6', | ||
| marginTop: em(24, 20), | ||
| marginBottom: em(24, 20) | ||
| }, | ||
| '>:first-child': { | ||
| marginTop: '0' | ||
| }, | ||
| '>:last-child': { | ||
| marginBottom: '0' | ||
| } | ||
| }), | ||
| adjustSelectors(className, context, extend) | ||
| ], | ||
| '@layer components': { | ||
| ...getFontSize(context.theme('fontSize', 'base')), | ||
| color: 'var(--tw-prose-body)', | ||
| maxWidth: 'theme(max-w.prose, 65ch)' | ||
| } | ||
| }) | ||
| ] | ||
| ] | ||
| }; | ||
| function getColors(colorName, context) { | ||
| let properties = {}, darkProperties = {}, set = (key, shade, target)=>{ | ||
| let color = context.theme(`colors.${colorName}.${shade}`, shade); | ||
| target['--tw-prose-' + key] = toColorValue(color); | ||
| // support auto dark colors | ||
| let darkColor = target != darkProperties && context.d('colors', `${colorName}-${shade}`, color); | ||
| darkColor && (darkProperties['--tw-prose-' + key] = toColorValue(darkColor)); | ||
| }; | ||
| for(let key in colors){ | ||
| let shade = colors[key]; | ||
| 'dark' != key && shade && set(key, shade, properties); | ||
| } | ||
| for(let key1 in colors.dark || {}){ | ||
| let shade1 = colors.dark[key1]; | ||
| shade1 && (colors.dark ? // explicit dark colors - need to use `dark:prose-invert` | ||
| set('invert-' + key1, shade1, properties) : // auto dark colors | ||
| set(key1, shade1, darkProperties)); | ||
| } | ||
| return Object.keys(properties).length ? { | ||
| '@layer defaults': { | ||
| '&': properties, | ||
| [context.v('dark')]: darkProperties | ||
| } | ||
| } : void 0; | ||
| } | ||
| } | ||
| function adjustSelectors(className, context, css) { | ||
| let result = {}; | ||
| for(let selector in css)result[adjustSelector(className, selector, context, (selector)=>`.${context.e(context.h(className))}${selector}`)] = css[selector]; | ||
| return result; | ||
| } | ||
| function adjustSelector(className, selector, { e , h }, replace) { | ||
| // pseudo elements can't be matched | ||
| return selector.replace(// 1. if there no pseudo use whole selector | ||
| // 2. if there are pseudo replace prefix | ||
| /^[^>:]+$|(>)?((?:[^:,]+(?::[\w-]+)?)|:[\w-]+)(::[\w-]+)?/g, (_, prefix = ' ', selector = _, pseudoElement = '')=>replace(`${prefix}:where(${selector}):not(:where(.${e(h('not-' + className))} *))${pseudoElement}`)); | ||
| } | ||
| function getFontSize(_) { | ||
| return _ ? 'string' == typeof _ ? { | ||
| fontSize: _ | ||
| } : { | ||
| fontSize: _[0], | ||
| ...'string' == typeof _[1] ? { | ||
| lineHeight: _[1] | ||
| } : _[1] | ||
| } : void 0; | ||
| } | ||
| function em(px, base) { | ||
| return `${(px / base).toFixed(3).replace(/^0|\.?0+$/g, '')}em`; | ||
| } | ||
| export { presetTypography as default }; | ||
| //# sourceMappingURL=preset-typography.deno.dev.js.map | ||
| export { default } from "./preset-typography.dev.js"; |
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Worsened metrics
- Total package byte prevSize
- decreased by-14.88%
334925
- Number of package files
- decreased by-3.45%
28
- Lines of code
- decreased by-18.42%
2799
No dependency changes