Spaces:
Sleeping
Sleeping
| const colors = require('tailwindcss/colors') | |
| const round = (num) => | |
| num | |
| .toFixed(7) | |
| .replace(/(\.[0-9]+?)0+$/, '$1') | |
| .replace(/\.0$/, '') | |
| const rem = (px) => `${round(px / 16)}rem` | |
| const em = (px, base) => `${round(px / base)}em` | |
| const hexToRgb = (hex) => { | |
| hex = hex.replace('#', '') | |
| hex = hex.length === 3 ? hex.replace(/./g, '$&$&') : hex | |
| const r = parseInt(hex.substring(0, 2), 16) | |
| const g = parseInt(hex.substring(2, 4), 16) | |
| const b = parseInt(hex.substring(4, 6), 16) | |
| return `${r} ${g} ${b}` | |
| } | |
| let defaultModifiers = { | |
| sm: { | |
| css: [ | |
| { | |
| fontSize: rem(14), | |
| lineHeight: round(24 / 14), | |
| p: { | |
| marginTop: em(16, 14), | |
| marginBottom: em(16, 14), | |
| }, | |
| '[class~="lead"]': { | |
| fontSize: em(18, 14), | |
| lineHeight: round(28 / 18), | |
| marginTop: em(16, 18), | |
| marginBottom: em(16, 18), | |
| }, | |
| blockquote: { | |
| marginTop: em(24, 18), | |
| marginBottom: em(24, 18), | |
| paddingInlineStart: em(20, 18), | |
| }, | |
| h1: { | |
| fontSize: em(30, 14), | |
| marginTop: '0', | |
| marginBottom: em(24, 30), | |
| lineHeight: round(36 / 30), | |
| }, | |
| h2: { | |
| fontSize: em(20, 14), | |
| marginTop: em(32, 20), | |
| marginBottom: em(16, 20), | |
| lineHeight: round(28 / 20), | |
| }, | |
| h3: { | |
| fontSize: em(18, 14), | |
| marginTop: em(28, 18), | |
| marginBottom: em(8, 18), | |
| lineHeight: round(28 / 18), | |
| }, | |
| h4: { | |
| marginTop: em(20, 14), | |
| marginBottom: em(8, 14), | |
| lineHeight: round(20 / 14), | |
| }, | |
| img: { | |
| marginTop: em(24, 14), | |
| marginBottom: em(24, 14), | |
| }, | |
| picture: { | |
| marginTop: em(24, 14), | |
| marginBottom: em(24, 14), | |
| }, | |
| 'picture > img': { | |
| marginTop: '0', | |
| marginBottom: '0', | |
| }, | |
| video: { | |
| marginTop: em(24, 14), | |
| marginBottom: em(24, 14), | |
| }, | |
| kbd: { | |
| fontSize: em(12, 14), | |
| borderRadius: rem(5), | |
| paddingTop: em(2, 14), | |
| paddingInlineEnd: em(5, 14), | |
| paddingBottom: em(2, 14), | |
| paddingInlineStart: em(5, 14), | |
| }, | |
| code: { | |
| fontSize: em(12, 14), | |
| }, | |
| 'h2 code': { | |
| fontSize: em(18, 20), | |
| }, | |
| 'h3 code': { | |
| fontSize: em(16, 18), | |
| }, | |
| pre: { | |
| fontSize: em(12, 14), | |
| lineHeight: round(20 / 12), | |
| marginTop: em(20, 12), | |
| marginBottom: em(20, 12), | |
| borderRadius: rem(4), | |
| paddingTop: em(8, 12), | |
| paddingInlineEnd: em(12, 12), | |
| paddingBottom: em(8, 12), | |
| paddingInlineStart: em(12, 12), | |
| }, | |
| ol: { | |
| marginTop: em(16, 14), | |
| marginBottom: em(16, 14), | |
| paddingInlineStart: em(22, 14), | |
| }, | |
| ul: { | |
| marginTop: em(16, 14), | |
| marginBottom: em(16, 14), | |
| paddingInlineStart: em(22, 14), | |
| }, | |
| li: { | |
| marginTop: em(4, 14), | |
| marginBottom: em(4, 14), | |
| }, | |
| 'ol > li': { | |
| paddingInlineStart: em(6, 14), | |
| }, | |
| 'ul > li': { | |
| paddingInlineStart: em(6, 14), | |
| }, | |
| '> ul > li p': { | |
| marginTop: em(8, 14), | |
| marginBottom: em(8, 14), | |
| }, | |
| '> ul > li > p:first-child': { | |
| marginTop: em(16, 14), | |
| }, | |
| '> ul > li > p:last-child': { | |
| marginBottom: em(16, 14), | |
| }, | |
| '> ol > li > p:first-child': { | |
| marginTop: em(16, 14), | |
| }, | |
| '> ol > li > p:last-child': { | |
| marginBottom: em(16, 14), | |
| }, | |
| 'ul ul, ul ol, ol ul, ol ol': { | |
| marginTop: em(8, 14), | |
| marginBottom: em(8, 14), | |
| }, | |
| dl: { | |
| marginTop: em(16, 14), | |
| marginBottom: em(16, 14), | |
| }, | |
| dt: { | |
| marginTop: em(16, 14), | |
| }, | |
| dd: { | |
| marginTop: em(4, 14), | |
| paddingInlineStart: em(22, 14), | |
| }, | |
| hr: { | |
| marginTop: em(40, 14), | |
| marginBottom: em(40, 14), | |
| }, | |
| 'hr + *': { | |
| marginTop: '0', | |
| }, | |
| 'h2 + *': { | |
| marginTop: '0', | |
| }, | |
| 'h3 + *': { | |
| marginTop: '0', | |
| }, | |
| 'h4 + *': { | |
| marginTop: '0', | |
| }, | |
| table: { | |
| fontSize: em(12, 14), | |
| lineHeight: round(18 / 12), | |
| }, | |
| 'thead th': { | |
| paddingInlineEnd: em(12, 12), | |
| paddingBottom: em(8, 12), | |
| paddingInlineStart: em(12, 12), | |
| }, | |
| 'thead th:first-child': { | |
| paddingInlineStart: '0', | |
| }, | |
| 'thead th:last-child': { | |
| paddingInlineEnd: '0', | |
| }, | |
| 'tbody td, tfoot td': { | |
| paddingTop: em(8, 12), | |
| paddingInlineEnd: em(12, 12), | |
| paddingBottom: em(8, 12), | |
| paddingInlineStart: em(12, 12), | |
| }, | |
| 'tbody td:first-child, tfoot td:first-child': { | |
| paddingInlineStart: '0', | |
| }, | |
| 'tbody td:last-child, tfoot td:last-child': { | |
| paddingInlineEnd: '0', | |
| }, | |
| figure: { | |
| marginTop: em(24, 14), | |
| marginBottom: em(24, 14), | |
| }, | |
| 'figure > *': { | |
| marginTop: '0', | |
| marginBottom: '0', | |
| }, | |
| figcaption: { | |
| fontSize: em(12, 14), | |
| lineHeight: round(16 / 12), | |
| marginTop: em(8, 12), | |
| }, | |
| }, | |
| { | |
| '> :first-child': { | |
| marginTop: '0', | |
| }, | |
| '> :last-child': { | |
| marginBottom: '0', | |
| }, | |
| }, | |
| ], | |
| }, | |
| base: { | |
| css: [ | |
| { | |
| fontSize: rem(16), | |
| lineHeight: round(28 / 16), | |
| p: { | |
| marginTop: em(20, 16), | |
| marginBottom: em(20, 16), | |
| }, | |
| '[class~="lead"]': { | |
| fontSize: em(20, 16), | |
| lineHeight: round(32 / 20), | |
| marginTop: em(24, 20), | |
| marginBottom: em(24, 20), | |
| }, | |
| blockquote: { | |
| marginTop: em(32, 20), | |
| marginBottom: em(32, 20), | |
| paddingInlineStart: em(20, 20), | |
| }, | |
| h1: { | |
| fontSize: em(36, 16), | |
| marginTop: '0', | |
| marginBottom: em(32, 36), | |
| lineHeight: round(40 / 36), | |
| }, | |
| h2: { | |
| fontSize: em(24, 16), | |
| marginTop: em(48, 24), | |
| marginBottom: em(24, 24), | |
| lineHeight: round(32 / 24), | |
| }, | |
| h3: { | |
| fontSize: em(20, 16), | |
| marginTop: em(32, 20), | |
| marginBottom: em(12, 20), | |
| lineHeight: round(32 / 20), | |
| }, | |
| h4: { | |
| marginTop: em(24, 16), | |
| marginBottom: em(8, 16), | |
| lineHeight: round(24 / 16), | |
| }, | |
| img: { | |
| marginTop: em(32, 16), | |
| marginBottom: em(32, 16), | |
| }, | |
| picture: { | |
| marginTop: em(32, 16), | |
| marginBottom: em(32, 16), | |
| }, | |
| 'picture > img': { | |
| marginTop: '0', | |
| marginBottom: '0', | |
| }, | |
| video: { | |
| marginTop: em(32, 16), | |
| marginBottom: em(32, 16), | |
| }, | |
| kbd: { | |
| fontSize: em(14, 16), | |
| borderRadius: rem(5), | |
| paddingTop: em(3, 16), | |
| paddingInlineEnd: em(6, 16), | |
| paddingBottom: em(3, 16), | |
| paddingInlineStart: em(6, 16), | |
| }, | |
| code: { | |
| fontSize: em(14, 16), | |
| }, | |
| 'h2 code': { | |
| fontSize: em(21, 24), | |
| }, | |
| 'h3 code': { | |
| fontSize: em(18, 20), | |
| }, | |
| pre: { | |
| fontSize: em(14, 16), | |
| lineHeight: round(24 / 14), | |
| marginTop: em(24, 14), | |
| marginBottom: em(24, 14), | |
| borderRadius: rem(6), | |
| paddingTop: em(12, 14), | |
| paddingInlineEnd: em(16, 14), | |
| paddingBottom: em(12, 14), | |
| paddingInlineStart: em(16, 14), | |
| }, | |
| ol: { | |
| marginTop: em(20, 16), | |
| marginBottom: em(20, 16), | |
| paddingInlineStart: em(26, 16), | |
| }, | |
| ul: { | |
| marginTop: em(20, 16), | |
| marginBottom: em(20, 16), | |
| paddingInlineStart: em(26, 16), | |
| }, | |
| li: { | |
| marginTop: em(8, 16), | |
| marginBottom: em(8, 16), | |
| }, | |
| 'ol > li': { | |
| paddingInlineStart: em(6, 16), | |
| }, | |
| 'ul > li': { | |
| paddingInlineStart: em(6, 16), | |
| }, | |
| '> ul > li p': { | |
| marginTop: em(12, 16), | |
| marginBottom: em(12, 16), | |
| }, | |
| '> ul > li > p:first-child': { | |
| marginTop: em(20, 16), | |
| }, | |
| '> ul > li > p:last-child': { | |
| marginBottom: em(20, 16), | |
| }, | |
| '> ol > li > p:first-child': { | |
| marginTop: em(20, 16), | |
| }, | |
| '> ol > li > p:last-child': { | |
| marginBottom: em(20, 16), | |
| }, | |
| 'ul ul, ul ol, ol ul, ol ol': { | |
| marginTop: em(12, 16), | |
| marginBottom: em(12, 16), | |
| }, | |
| dl: { | |
| marginTop: em(20, 16), | |
| marginBottom: em(20, 16), | |
| }, | |
| dt: { | |
| marginTop: em(20, 16), | |
| }, | |
| dd: { | |
| marginTop: em(8, 16), | |
| paddingInlineStart: em(26, 16), | |
| }, | |
| hr: { | |
| marginTop: em(48, 16), | |
| marginBottom: em(48, 16), | |
| }, | |
| 'hr + *': { | |
| marginTop: '0', | |
| }, | |
| 'h2 + *': { | |
| marginTop: '0', | |
| }, | |
| 'h3 + *': { | |
| marginTop: '0', | |
| }, | |
| 'h4 + *': { | |
| marginTop: '0', | |
| }, | |
| table: { | |
| fontSize: em(14, 16), | |
| lineHeight: round(24 / 14), | |
| }, | |
| 'thead th': { | |
| paddingInlineEnd: em(8, 14), | |
| paddingBottom: em(8, 14), | |
| paddingInlineStart: em(8, 14), | |
| }, | |
| 'thead th:first-child': { | |
| paddingInlineStart: '0', | |
| }, | |
| 'thead th:last-child': { | |
| paddingInlineEnd: '0', | |
| }, | |
| 'tbody td, tfoot td': { | |
| paddingTop: em(8, 14), | |
| paddingInlineEnd: em(8, 14), | |
| paddingBottom: em(8, 14), | |
| paddingInlineStart: em(8, 14), | |
| }, | |
| 'tbody td:first-child, tfoot td:first-child': { | |
| paddingInlineStart: '0', | |
| }, | |
| 'tbody td:last-child, tfoot td:last-child': { | |
| paddingInlineEnd: '0', | |
| }, | |
| figure: { | |
| marginTop: em(32, 16), | |
| marginBottom: em(32, 16), | |
| }, | |
| 'figure > *': { | |
| marginTop: '0', | |
| marginBottom: '0', | |
| }, | |
| figcaption: { | |
| fontSize: em(14, 16), | |
| lineHeight: round(20 / 14), | |
| marginTop: em(12, 14), | |
| }, | |
| }, | |
| { | |
| '> :first-child': { | |
| marginTop: '0', | |
| }, | |
| '> :last-child': { | |
| marginBottom: '0', | |
| }, | |
| }, | |
| ], | |
| }, | |
| lg: { | |
| css: [ | |
| { | |
| fontSize: rem(18), | |
| lineHeight: round(32 / 18), | |
| p: { | |
| marginTop: em(24, 18), | |
| marginBottom: em(24, 18), | |
| }, | |
| '[class~="lead"]': { | |
| fontSize: em(22, 18), | |
| lineHeight: round(32 / 22), | |
| marginTop: em(24, 22), | |
| marginBottom: em(24, 22), | |
| }, | |
| blockquote: { | |
| marginTop: em(40, 24), | |
| marginBottom: em(40, 24), | |
| paddingInlineStart: em(24, 24), | |
| }, | |
| h1: { | |
| fontSize: em(48, 18), | |
| marginTop: '0', | |
| marginBottom: em(40, 48), | |
| lineHeight: round(48 / 48), | |
| }, | |
| h2: { | |
| fontSize: em(30, 18), | |
| marginTop: em(56, 30), | |
| marginBottom: em(32, 30), | |
| lineHeight: round(40 / 30), | |
| }, | |
| h3: { | |
| fontSize: em(24, 18), | |
| marginTop: em(40, 24), | |
| marginBottom: em(16, 24), | |
| lineHeight: round(36 / 24), | |
| }, | |
| h4: { | |
| marginTop: em(32, 18), | |
| marginBottom: em(8, 18), | |
| lineHeight: round(28 / 18), | |
| }, | |
| img: { | |
| marginTop: em(32, 18), | |
| marginBottom: em(32, 18), | |
| }, | |
| picture: { | |
| marginTop: em(32, 18), | |
| marginBottom: em(32, 18), | |
| }, | |
| 'picture > img': { | |
| marginTop: '0', | |
| marginBottom: '0', | |
| }, | |
| video: { | |
| marginTop: em(32, 18), | |
| marginBottom: em(32, 18), | |
| }, | |
| kbd: { | |
| fontSize: em(16, 18), | |
| borderRadius: rem(5), | |
| paddingTop: em(4, 18), | |
| paddingInlineEnd: em(8, 18), | |
| paddingBottom: em(4, 18), | |
| paddingInlineStart: em(8, 18), | |
| }, | |
| code: { | |
| fontSize: em(16, 18), | |
| }, | |
| 'h2 code': { | |
| fontSize: em(26, 30), | |
| }, | |
| 'h3 code': { | |
| fontSize: em(21, 24), | |
| }, | |
| pre: { | |
| fontSize: em(16, 18), | |
| lineHeight: round(28 / 16), | |
| marginTop: em(32, 16), | |
| marginBottom: em(32, 16), | |
| borderRadius: rem(6), | |
| paddingTop: em(16, 16), | |
| paddingInlineEnd: em(24, 16), | |
| paddingBottom: em(16, 16), | |
| paddingInlineStart: em(24, 16), | |
| }, | |
| ol: { | |
| marginTop: em(24, 18), | |
| marginBottom: em(24, 18), | |
| paddingInlineStart: em(28, 18), | |
| }, | |
| ul: { | |
| marginTop: em(24, 18), | |
| marginBottom: em(24, 18), | |
| paddingInlineStart: em(28, 18), | |
| }, | |
| li: { | |
| marginTop: em(12, 18), | |
| marginBottom: em(12, 18), | |
| }, | |
| 'ol > li': { | |
| paddingInlineStart: em(8, 18), | |
| }, | |
| 'ul > li': { | |
| paddingInlineStart: em(8, 18), | |
| }, | |
| '> ul > li p': { | |
| marginTop: em(16, 18), | |
| marginBottom: em(16, 18), | |
| }, | |
| '> ul > li > p:first-child': { | |
| marginTop: em(24, 18), | |
| }, | |
| '> ul > li > p:last-child': { | |
| marginBottom: em(24, 18), | |
| }, | |
| '> ol > li > p:first-child': { | |
| marginTop: em(24, 18), | |
| }, | |
| '> ol > li > p:last-child': { | |
| marginBottom: em(24, 18), | |
| }, | |
| 'ul ul, ul ol, ol ul, ol ol': { | |
| marginTop: em(16, 18), | |
| marginBottom: em(16, 18), | |
| }, | |
| dl: { | |
| marginTop: em(24, 18), | |
| marginBottom: em(24, 18), | |
| }, | |
| dt: { | |
| marginTop: em(24, 18), | |
| }, | |
| dd: { | |
| marginTop: em(12, 18), | |
| paddingInlineStart: em(28, 18), | |
| }, | |
| hr: { | |
| marginTop: em(56, 18), | |
| marginBottom: em(56, 18), | |
| }, | |
| 'hr + *': { | |
| marginTop: '0', | |
| }, | |
| 'h2 + *': { | |
| marginTop: '0', | |
| }, | |
| 'h3 + *': { | |
| marginTop: '0', | |
| }, | |
| 'h4 + *': { | |
| marginTop: '0', | |
| }, | |
| table: { | |
| fontSize: em(16, 18), | |
| lineHeight: round(24 / 16), | |
| }, | |
| 'thead th': { | |
| paddingInlineEnd: em(12, 16), | |
| paddingBottom: em(12, 16), | |
| paddingInlineStart: em(12, 16), | |
| }, | |
| 'thead th:first-child': { | |
| paddingInlineStart: '0', | |
| }, | |
| 'thead th:last-child': { | |
| paddingInlineEnd: '0', | |
| }, | |
| 'tbody td, tfoot td': { | |
| paddingTop: em(12, 16), | |
| paddingInlineEnd: em(12, 16), | |
| paddingBottom: em(12, 16), | |
| paddingInlineStart: em(12, 16), | |
| }, | |
| 'tbody td:first-child, tfoot td:first-child': { | |
| paddingInlineStart: '0', | |
| }, | |
| 'tbody td:last-child, tfoot td:last-child': { | |
| paddingInlineEnd: '0', | |
| }, | |
| figure: { | |
| marginTop: em(32, 18), | |
| marginBottom: em(32, 18), | |
| }, | |
| 'figure > *': { | |
| marginTop: '0', | |
| marginBottom: '0', | |
| }, | |
| figcaption: { | |
| fontSize: em(16, 18), | |
| lineHeight: round(24 / 16), | |
| marginTop: em(16, 16), | |
| }, | |
| }, | |
| { | |
| '> :first-child': { | |
| marginTop: '0', | |
| }, | |
| '> :last-child': { | |
| marginBottom: '0', | |
| }, | |
| }, | |
| ], | |
| }, | |
| xl: { | |
| css: [ | |
| { | |
| fontSize: rem(20), | |
| lineHeight: round(36 / 20), | |
| p: { | |
| marginTop: em(24, 20), | |
| marginBottom: em(24, 20), | |
| }, | |
| '[class~="lead"]': { | |
| fontSize: em(24, 20), | |
| lineHeight: round(36 / 24), | |
| marginTop: em(24, 24), | |
| marginBottom: em(24, 24), | |
| }, | |
| blockquote: { | |
| marginTop: em(48, 30), | |
| marginBottom: em(48, 30), | |
| paddingInlineStart: em(32, 30), | |
| }, | |
| h1: { | |
| fontSize: em(56, 20), | |
| marginTop: '0', | |
| marginBottom: em(48, 56), | |
| lineHeight: round(56 / 56), | |
| }, | |
| h2: { | |
| fontSize: em(36, 20), | |
| marginTop: em(56, 36), | |
| marginBottom: em(32, 36), | |
| lineHeight: round(40 / 36), | |
| }, | |
| h3: { | |
| fontSize: em(30, 20), | |
| marginTop: em(48, 30), | |
| marginBottom: em(20, 30), | |
| lineHeight: round(40 / 30), | |
| }, | |
| h4: { | |
| marginTop: em(36, 20), | |
| marginBottom: em(12, 20), | |
| lineHeight: round(32 / 20), | |
| }, | |
| img: { | |
| marginTop: em(40, 20), | |
| marginBottom: em(40, 20), | |
| }, | |
| picture: { | |
| marginTop: em(40, 20), | |
| marginBottom: em(40, 20), | |
| }, | |
| 'picture > img': { | |
| marginTop: '0', | |
| marginBottom: '0', | |
| }, | |
| video: { | |
| marginTop: em(40, 20), | |
| marginBottom: em(40, 20), | |
| }, | |
| kbd: { | |
| fontSize: em(18, 20), | |
| borderRadius: rem(5), | |
| paddingTop: em(5, 20), | |
| paddingInlineEnd: em(8, 20), | |
| paddingBottom: em(5, 20), | |
| paddingInlineStart: em(8, 20), | |
| }, | |
| code: { | |
| fontSize: em(18, 20), | |
| }, | |
| 'h2 code': { | |
| fontSize: em(31, 36), | |
| }, | |
| 'h3 code': { | |
| fontSize: em(27, 30), | |
| }, | |
| pre: { | |
| fontSize: em(18, 20), | |
| lineHeight: round(32 / 18), | |
| marginTop: em(36, 18), | |
| marginBottom: em(36, 18), | |
| borderRadius: rem(8), | |
| paddingTop: em(20, 18), | |
| paddingInlineEnd: em(24, 18), | |
| paddingBottom: em(20, 18), | |
| paddingInlineStart: em(24, 18), | |
| }, | |
| ol: { | |
| marginTop: em(24, 20), | |
| marginBottom: em(24, 20), | |
| paddingInlineStart: em(32, 20), | |
| }, | |
| ul: { | |
| marginTop: em(24, 20), | |
| marginBottom: em(24, 20), | |
| paddingInlineStart: em(32, 20), | |
| }, | |
| li: { | |
| marginTop: em(12, 20), | |
| marginBottom: em(12, 20), | |
| }, | |
| 'ol > li': { | |
| paddingInlineStart: em(8, 20), | |
| }, | |
| 'ul > li': { | |
| paddingInlineStart: em(8, 20), | |
| }, | |
| '> ul > li p': { | |
| marginTop: em(16, 20), | |
| marginBottom: em(16, 20), | |
| }, | |
| '> ul > li > p:first-child': { | |
| marginTop: em(24, 20), | |
| }, | |
| '> ul > li > p:last-child': { | |
| marginBottom: em(24, 20), | |
| }, | |
| '> ol > li > p:first-child': { | |
| marginTop: em(24, 20), | |
| }, | |
| '> ol > li > p:last-child': { | |
| marginBottom: em(24, 20), | |
| }, | |
| 'ul ul, ul ol, ol ul, ol ol': { | |
| marginTop: em(16, 20), | |
| marginBottom: em(16, 20), | |
| }, | |
| dl: { | |
| marginTop: em(24, 20), | |
| marginBottom: em(24, 20), | |
| }, | |
| dt: { | |
| marginTop: em(24, 20), | |
| }, | |
| dd: { | |
| marginTop: em(12, 20), | |
| paddingInlineStart: em(32, 20), | |
| }, | |
| hr: { | |
| marginTop: em(56, 20), | |
| marginBottom: em(56, 20), | |
| }, | |
| 'hr + *': { | |
| marginTop: '0', | |
| }, | |
| 'h2 + *': { | |
| marginTop: '0', | |
| }, | |
| 'h3 + *': { | |
| marginTop: '0', | |
| }, | |
| 'h4 + *': { | |
| marginTop: '0', | |
| }, | |
| table: { | |
| fontSize: em(18, 20), | |
| lineHeight: round(28 / 18), | |
| }, | |
| 'thead th': { | |
| paddingInlineEnd: em(12, 18), | |
| paddingBottom: em(16, 18), | |
| paddingInlineStart: em(12, 18), | |
| }, | |
| 'thead th:first-child': { | |
| paddingInlineStart: '0', | |
| }, | |
| 'thead th:last-child': { | |
| paddingInlineEnd: '0', | |
| }, | |
| 'tbody td, tfoot td': { | |
| paddingTop: em(16, 18), | |
| paddingInlineEnd: em(12, 18), | |
| paddingBottom: em(16, 18), | |
| paddingInlineStart: em(12, 18), | |
| }, | |
| 'tbody td:first-child, tfoot td:first-child': { | |
| paddingInlineStart: '0', | |
| }, | |
| 'tbody td:last-child, tfoot td:last-child': { | |
| paddingInlineEnd: '0', | |
| }, | |
| figure: { | |
| marginTop: em(40, 20), | |
| marginBottom: em(40, 20), | |
| }, | |
| 'figure > *': { | |
| marginTop: '0', | |
| marginBottom: '0', | |
| }, | |
| figcaption: { | |
| fontSize: em(18, 20), | |
| lineHeight: round(28 / 18), | |
| marginTop: em(18, 18), | |
| }, | |
| }, | |
| { | |
| '> :first-child': { | |
| marginTop: '0', | |
| }, | |
| '> :last-child': { | |
| marginBottom: '0', | |
| }, | |
| }, | |
| ], | |
| }, | |
| '2xl': { | |
| css: [ | |
| { | |
| fontSize: rem(24), | |
| lineHeight: round(40 / 24), | |
| p: { | |
| marginTop: em(32, 24), | |
| marginBottom: em(32, 24), | |
| }, | |
| '[class~="lead"]': { | |
| fontSize: em(30, 24), | |
| lineHeight: round(44 / 30), | |
| marginTop: em(32, 30), | |
| marginBottom: em(32, 30), | |
| }, | |
| blockquote: { | |
| marginTop: em(64, 36), | |
| marginBottom: em(64, 36), | |
| paddingInlineStart: em(40, 36), | |
| }, | |
| h1: { | |
| fontSize: em(64, 24), | |
| marginTop: '0', | |
| marginBottom: em(56, 64), | |
| lineHeight: round(64 / 64), | |
| }, | |
| h2: { | |
| fontSize: em(48, 24), | |
| marginTop: em(72, 48), | |
| marginBottom: em(40, 48), | |
| lineHeight: round(52 / 48), | |
| }, | |
| h3: { | |
| fontSize: em(36, 24), | |
| marginTop: em(56, 36), | |
| marginBottom: em(24, 36), | |
| lineHeight: round(44 / 36), | |
| }, | |
| h4: { | |
| marginTop: em(40, 24), | |
| marginBottom: em(16, 24), | |
| lineHeight: round(36 / 24), | |
| }, | |
| img: { | |
| marginTop: em(48, 24), | |
| marginBottom: em(48, 24), | |
| }, | |
| picture: { | |
| marginTop: em(48, 24), | |
| marginBottom: em(48, 24), | |
| }, | |
| 'picture > img': { | |
| marginTop: '0', | |
| marginBottom: '0', | |
| }, | |
| video: { | |
| marginTop: em(48, 24), | |
| marginBottom: em(48, 24), | |
| }, | |
| kbd: { | |
| fontSize: em(20, 24), | |
| borderRadius: rem(6), | |
| paddingTop: em(6, 24), | |
| paddingInlineEnd: em(8, 24), | |
| paddingBottom: em(6, 24), | |
| paddingInlineStart: em(8, 24), | |
| }, | |
| code: { | |
| fontSize: em(20, 24), | |
| }, | |
| 'h2 code': { | |
| fontSize: em(42, 48), | |
| }, | |
| 'h3 code': { | |
| fontSize: em(32, 36), | |
| }, | |
| pre: { | |
| fontSize: em(20, 24), | |
| lineHeight: round(36 / 20), | |
| marginTop: em(40, 20), | |
| marginBottom: em(40, 20), | |
| borderRadius: rem(8), | |
| paddingTop: em(24, 20), | |
| paddingInlineEnd: em(32, 20), | |
| paddingBottom: em(24, 20), | |
| paddingInlineStart: em(32, 20), | |
| }, | |
| ol: { | |
| marginTop: em(32, 24), | |
| marginBottom: em(32, 24), | |
| paddingInlineStart: em(38, 24), | |
| }, | |
| ul: { | |
| marginTop: em(32, 24), | |
| marginBottom: em(32, 24), | |
| paddingInlineStart: em(38, 24), | |
| }, | |
| li: { | |
| marginTop: em(12, 24), | |
| marginBottom: em(12, 24), | |
| }, | |
| 'ol > li': { | |
| paddingInlineStart: em(10, 24), | |
| }, | |
| 'ul > li': { | |
| paddingInlineStart: em(10, 24), | |
| }, | |
| '> ul > li p': { | |
| marginTop: em(20, 24), | |
| marginBottom: em(20, 24), | |
| }, | |
| '> ul > li > p:first-child': { | |
| marginTop: em(32, 24), | |
| }, | |
| '> ul > li > p:last-child': { | |
| marginBottom: em(32, 24), | |
| }, | |
| '> ol > li > p:first-child': { | |
| marginTop: em(32, 24), | |
| }, | |
| '> ol > li > p:last-child': { | |
| marginBottom: em(32, 24), | |
| }, | |
| 'ul ul, ul ol, ol ul, ol ol': { | |
| marginTop: em(16, 24), | |
| marginBottom: em(16, 24), | |
| }, | |
| dl: { | |
| marginTop: em(32, 24), | |
| marginBottom: em(32, 24), | |
| }, | |
| dt: { | |
| marginTop: em(32, 24), | |
| }, | |
| dd: { | |
| marginTop: em(12, 24), | |
| paddingInlineStart: em(38, 24), | |
| }, | |
| hr: { | |
| marginTop: em(72, 24), | |
| marginBottom: em(72, 24), | |
| }, | |
| 'hr + *': { | |
| marginTop: '0', | |
| }, | |
| 'h2 + *': { | |
| marginTop: '0', | |
| }, | |
| 'h3 + *': { | |
| marginTop: '0', | |
| }, | |
| 'h4 + *': { | |
| marginTop: '0', | |
| }, | |
| table: { | |
| fontSize: em(20, 24), | |
| lineHeight: round(28 / 20), | |
| }, | |
| 'thead th': { | |
| paddingInlineEnd: em(12, 20), | |
| paddingBottom: em(16, 20), | |
| paddingInlineStart: em(12, 20), | |
| }, | |
| 'thead th:first-child': { | |
| paddingInlineStart: '0', | |
| }, | |
| 'thead th:last-child': { | |
| paddingInlineEnd: '0', | |
| }, | |
| 'tbody td, tfoot td': { | |
| paddingTop: em(16, 20), | |
| paddingInlineEnd: em(12, 20), | |
| paddingBottom: em(16, 20), | |
| paddingInlineStart: em(12, 20), | |
| }, | |
| 'tbody td:first-child, tfoot td:first-child': { | |
| paddingInlineStart: '0', | |
| }, | |
| 'tbody td:last-child, tfoot td:last-child': { | |
| paddingInlineEnd: '0', | |
| }, | |
| figure: { | |
| marginTop: em(48, 24), | |
| marginBottom: em(48, 24), | |
| }, | |
| 'figure > *': { | |
| marginTop: '0', | |
| marginBottom: '0', | |
| }, | |
| figcaption: { | |
| fontSize: em(20, 24), | |
| lineHeight: round(32 / 20), | |
| marginTop: em(20, 20), | |
| }, | |
| }, | |
| { | |
| '> :first-child': { | |
| marginTop: '0', | |
| }, | |
| '> :last-child': { | |
| marginBottom: '0', | |
| }, | |
| }, | |
| ], | |
| }, | |
| // Gray color themes | |
| slate: { | |
| css: { | |
| '--tw-prose-body': colors.slate[700], | |
| '--tw-prose-headings': colors.slate[900], | |
| '--tw-prose-lead': colors.slate[600], | |
| '--tw-prose-links': colors.slate[900], | |
| '--tw-prose-bold': colors.slate[900], | |
| '--tw-prose-counters': colors.slate[500], | |
| '--tw-prose-bullets': colors.slate[300], | |
| '--tw-prose-hr': colors.slate[200], | |
| '--tw-prose-quotes': colors.slate[900], | |
| '--tw-prose-quote-borders': colors.slate[200], | |
| '--tw-prose-captions': colors.slate[500], | |
| '--tw-prose-kbd': colors.slate[900], | |
| '--tw-prose-kbd-shadows': hexToRgb(colors.slate[900]), | |
| '--tw-prose-code': colors.slate[900], | |
| '--tw-prose-pre-code': colors.slate[200], | |
| '--tw-prose-pre-bg': colors.slate[800], | |
| '--tw-prose-th-borders': colors.slate[300], | |
| '--tw-prose-td-borders': colors.slate[200], | |
| '--tw-prose-invert-body': colors.slate[300], | |
| '--tw-prose-invert-headings': colors.white, | |
| '--tw-prose-invert-lead': colors.slate[400], | |
| '--tw-prose-invert-links': colors.white, | |
| '--tw-prose-invert-bold': colors.white, | |
| '--tw-prose-invert-counters': colors.slate[400], | |
| '--tw-prose-invert-bullets': colors.slate[600], | |
| '--tw-prose-invert-hr': colors.slate[700], | |
| '--tw-prose-invert-quotes': colors.slate[100], | |
| '--tw-prose-invert-quote-borders': colors.slate[700], | |
| '--tw-prose-invert-captions': colors.slate[400], | |
| '--tw-prose-invert-kbd': colors.white, | |
| '--tw-prose-invert-kbd-shadows': hexToRgb(colors.white), | |
| '--tw-prose-invert-code': colors.white, | |
| '--tw-prose-invert-pre-code': colors.slate[300], | |
| '--tw-prose-invert-pre-bg': 'rgb(0 0 0 / 50%)', | |
| '--tw-prose-invert-th-borders': colors.slate[600], | |
| '--tw-prose-invert-td-borders': colors.slate[700], | |
| }, | |
| }, | |
| gray: { | |
| css: { | |
| '--tw-prose-body': colors.gray[700], | |
| '--tw-prose-headings': colors.gray[900], | |
| '--tw-prose-lead': colors.gray[600], | |
| '--tw-prose-links': colors.gray[900], | |
| '--tw-prose-bold': colors.gray[900], | |
| '--tw-prose-counters': colors.gray[500], | |
| '--tw-prose-bullets': colors.gray[300], | |
| '--tw-prose-hr': colors.gray[200], | |
| '--tw-prose-quotes': colors.gray[900], | |
| '--tw-prose-quote-borders': colors.gray[200], | |
| '--tw-prose-captions': colors.gray[500], | |
| '--tw-prose-kbd': colors.gray[900], | |
| '--tw-prose-kbd-shadows': hexToRgb(colors.gray[900]), | |
| '--tw-prose-code': colors.gray[900], | |
| '--tw-prose-pre-code': colors.gray[200], | |
| '--tw-prose-pre-bg': colors.gray[800], | |
| '--tw-prose-th-borders': colors.gray[300], | |
| '--tw-prose-td-borders': colors.gray[200], | |
| '--tw-prose-invert-body': colors.gray[300], | |
| '--tw-prose-invert-headings': colors.white, | |
| '--tw-prose-invert-lead': colors.gray[400], | |
| '--tw-prose-invert-links': colors.white, | |
| '--tw-prose-invert-bold': colors.white, | |
| '--tw-prose-invert-counters': colors.gray[400], | |
| '--tw-prose-invert-bullets': colors.gray[600], | |
| '--tw-prose-invert-hr': colors.gray[700], | |
| '--tw-prose-invert-quotes': colors.gray[100], | |
| '--tw-prose-invert-quote-borders': colors.gray[700], | |
| '--tw-prose-invert-captions': colors.gray[400], | |
| '--tw-prose-invert-kbd': colors.white, | |
| '--tw-prose-invert-kbd-shadows': hexToRgb(colors.white), | |
| '--tw-prose-invert-code': colors.white, | |
| '--tw-prose-invert-pre-code': colors.gray[300], | |
| '--tw-prose-invert-pre-bg': 'rgb(0 0 0 / 50%)', | |
| '--tw-prose-invert-th-borders': colors.gray[600], | |
| '--tw-prose-invert-td-borders': colors.gray[700], | |
| }, | |
| }, | |
| zinc: { | |
| css: { | |
| '--tw-prose-body': colors.zinc[700], | |
| '--tw-prose-headings': colors.zinc[900], | |
| '--tw-prose-lead': colors.zinc[600], | |
| '--tw-prose-links': colors.zinc[900], | |
| '--tw-prose-bold': colors.zinc[900], | |
| '--tw-prose-counters': colors.zinc[500], | |
| '--tw-prose-bullets': colors.zinc[300], | |
| '--tw-prose-hr': colors.zinc[200], | |
| '--tw-prose-quotes': colors.zinc[900], | |
| '--tw-prose-quote-borders': colors.zinc[200], | |
| '--tw-prose-captions': colors.zinc[500], | |
| '--tw-prose-kbd': colors.zinc[900], | |
| '--tw-prose-kbd-shadows': hexToRgb(colors.zinc[900]), | |
| '--tw-prose-code': colors.zinc[900], | |
| '--tw-prose-pre-code': colors.zinc[200], | |
| '--tw-prose-pre-bg': colors.zinc[800], | |
| '--tw-prose-th-borders': colors.zinc[300], | |
| '--tw-prose-td-borders': colors.zinc[200], | |
| '--tw-prose-invert-body': colors.zinc[300], | |
| '--tw-prose-invert-headings': colors.white, | |
| '--tw-prose-invert-lead': colors.zinc[400], | |
| '--tw-prose-invert-links': colors.white, | |
| '--tw-prose-invert-bold': colors.white, | |
| '--tw-prose-invert-counters': colors.zinc[400], | |
| '--tw-prose-invert-bullets': colors.zinc[600], | |
| '--tw-prose-invert-hr': colors.zinc[700], | |
| '--tw-prose-invert-quotes': colors.zinc[100], | |
| '--tw-prose-invert-quote-borders': colors.zinc[700], | |
| '--tw-prose-invert-captions': colors.zinc[400], | |
| '--tw-prose-invert-kbd': colors.white, | |
| '--tw-prose-invert-kbd-shadows': hexToRgb(colors.white), | |
| '--tw-prose-invert-code': colors.white, | |
| '--tw-prose-invert-pre-code': colors.zinc[300], | |
| '--tw-prose-invert-pre-bg': 'rgb(0 0 0 / 50%)', | |
| '--tw-prose-invert-th-borders': colors.zinc[600], | |
| '--tw-prose-invert-td-borders': colors.zinc[700], | |
| }, | |
| }, | |
| neutral: { | |
| css: { | |
| '--tw-prose-body': colors.neutral[700], | |
| '--tw-prose-headings': colors.neutral[900], | |
| '--tw-prose-lead': colors.neutral[600], | |
| '--tw-prose-links': colors.neutral[900], | |
| '--tw-prose-bold': colors.neutral[900], | |
| '--tw-prose-counters': colors.neutral[500], | |
| '--tw-prose-bullets': colors.neutral[300], | |
| '--tw-prose-hr': colors.neutral[200], | |
| '--tw-prose-quotes': colors.neutral[900], | |
| '--tw-prose-quote-borders': colors.neutral[200], | |
| '--tw-prose-captions': colors.neutral[500], | |
| '--tw-prose-kbd': colors.neutral[900], | |
| '--tw-prose-kbd-shadows': hexToRgb(colors.neutral[900]), | |
| '--tw-prose-code': colors.neutral[900], | |
| '--tw-prose-pre-code': colors.neutral[200], | |
| '--tw-prose-pre-bg': colors.neutral[800], | |
| '--tw-prose-th-borders': colors.neutral[300], | |
| '--tw-prose-td-borders': colors.neutral[200], | |
| '--tw-prose-invert-body': colors.neutral[300], | |
| '--tw-prose-invert-headings': colors.white, | |
| '--tw-prose-invert-lead': colors.neutral[400], | |
| '--tw-prose-invert-links': colors.white, | |
| '--tw-prose-invert-bold': colors.white, | |
| '--tw-prose-invert-counters': colors.neutral[400], | |
| '--tw-prose-invert-bullets': colors.neutral[600], | |
| '--tw-prose-invert-hr': colors.neutral[700], | |
| '--tw-prose-invert-quotes': colors.neutral[100], | |
| '--tw-prose-invert-quote-borders': colors.neutral[700], | |
| '--tw-prose-invert-captions': colors.neutral[400], | |
| '--tw-prose-invert-kbd': colors.white, | |
| '--tw-prose-invert-kbd-shadows': hexToRgb(colors.white), | |
| '--tw-prose-invert-code': colors.white, | |
| '--tw-prose-invert-pre-code': colors.neutral[300], | |
| '--tw-prose-invert-pre-bg': 'rgb(0 0 0 / 50%)', | |
| '--tw-prose-invert-th-borders': colors.neutral[600], | |
| '--tw-prose-invert-td-borders': colors.neutral[700], | |
| }, | |
| }, | |
| stone: { | |
| css: { | |
| '--tw-prose-body': colors.stone[700], | |
| '--tw-prose-headings': colors.stone[900], | |
| '--tw-prose-lead': colors.stone[600], | |
| '--tw-prose-links': colors.stone[900], | |
| '--tw-prose-bold': colors.stone[900], | |
| '--tw-prose-counters': colors.stone[500], | |
| '--tw-prose-bullets': colors.stone[300], | |
| '--tw-prose-hr': colors.stone[200], | |
| '--tw-prose-quotes': colors.stone[900], | |
| '--tw-prose-quote-borders': colors.stone[200], | |
| '--tw-prose-captions': colors.stone[500], | |
| '--tw-prose-kbd': colors.stone[900], | |
| '--tw-prose-kbd-shadows': hexToRgb(colors.stone[900]), | |
| '--tw-prose-code': colors.stone[900], | |
| '--tw-prose-pre-code': colors.stone[200], | |
| '--tw-prose-pre-bg': colors.stone[800], | |
| '--tw-prose-th-borders': colors.stone[300], | |
| '--tw-prose-td-borders': colors.stone[200], | |
| '--tw-prose-invert-body': colors.stone[300], | |
| '--tw-prose-invert-headings': colors.white, | |
| '--tw-prose-invert-lead': colors.stone[400], | |
| '--tw-prose-invert-links': colors.white, | |
| '--tw-prose-invert-bold': colors.white, | |
| '--tw-prose-invert-counters': colors.stone[400], | |
| '--tw-prose-invert-bullets': colors.stone[600], | |
| '--tw-prose-invert-hr': colors.stone[700], | |
| '--tw-prose-invert-quotes': colors.stone[100], | |
| '--tw-prose-invert-quote-borders': colors.stone[700], | |
| '--tw-prose-invert-captions': colors.stone[400], | |
| '--tw-prose-invert-kbd': colors.white, | |
| '--tw-prose-invert-kbd-shadows': hexToRgb(colors.white), | |
| '--tw-prose-invert-code': colors.white, | |
| '--tw-prose-invert-pre-code': colors.stone[300], | |
| '--tw-prose-invert-pre-bg': 'rgb(0 0 0 / 50%)', | |
| '--tw-prose-invert-th-borders': colors.stone[600], | |
| '--tw-prose-invert-td-borders': colors.stone[700], | |
| }, | |
| }, | |
| // Link-only themes (for backward compatibility) | |
| red: { | |
| css: { | |
| '--tw-prose-links': colors.red[600], | |
| '--tw-prose-invert-links': colors.red[500], | |
| }, | |
| }, | |
| orange: { | |
| css: { | |
| '--tw-prose-links': colors.orange[600], | |
| '--tw-prose-invert-links': colors.orange[500], | |
| }, | |
| }, | |
| amber: { | |
| css: { | |
| '--tw-prose-links': colors.amber[600], | |
| '--tw-prose-invert-links': colors.amber[500], | |
| }, | |
| }, | |
| yellow: { | |
| css: { | |
| '--tw-prose-links': colors.yellow[600], | |
| '--tw-prose-invert-links': colors.yellow[500], | |
| }, | |
| }, | |
| lime: { | |
| css: { | |
| '--tw-prose-links': colors.lime[600], | |
| '--tw-prose-invert-links': colors.lime[500], | |
| }, | |
| }, | |
| green: { | |
| css: { | |
| '--tw-prose-links': colors.green[600], | |
| '--tw-prose-invert-links': colors.green[500], | |
| }, | |
| }, | |
| emerald: { | |
| css: { | |
| '--tw-prose-links': colors.emerald[600], | |
| '--tw-prose-invert-links': colors.emerald[500], | |
| }, | |
| }, | |
| teal: { | |
| css: { | |
| '--tw-prose-links': colors.teal[600], | |
| '--tw-prose-invert-links': colors.teal[500], | |
| }, | |
| }, | |
| cyan: { | |
| css: { | |
| '--tw-prose-links': colors.cyan[600], | |
| '--tw-prose-invert-links': colors.cyan[500], | |
| }, | |
| }, | |
| sky: { | |
| css: { | |
| '--tw-prose-links': colors.sky[600], | |
| '--tw-prose-invert-links': colors.sky[500], | |
| }, | |
| }, | |
| blue: { | |
| css: { | |
| '--tw-prose-links': colors.blue[600], | |
| '--tw-prose-invert-links': colors.blue[500], | |
| }, | |
| }, | |
| indigo: { | |
| css: { | |
| '--tw-prose-links': colors.indigo[600], | |
| '--tw-prose-invert-links': colors.indigo[500], | |
| }, | |
| }, | |
| violet: { | |
| css: { | |
| '--tw-prose-links': colors.violet[600], | |
| '--tw-prose-invert-links': colors.violet[500], | |
| }, | |
| }, | |
| purple: { | |
| css: { | |
| '--tw-prose-links': colors.purple[600], | |
| '--tw-prose-invert-links': colors.purple[500], | |
| }, | |
| }, | |
| fuchsia: { | |
| css: { | |
| '--tw-prose-links': colors.fuchsia[600], | |
| '--tw-prose-invert-links': colors.fuchsia[500], | |
| }, | |
| }, | |
| pink: { | |
| css: { | |
| '--tw-prose-links': colors.pink[600], | |
| '--tw-prose-invert-links': colors.pink[500], | |
| }, | |
| }, | |
| rose: { | |
| css: { | |
| '--tw-prose-links': colors.rose[600], | |
| '--tw-prose-invert-links': colors.rose[500], | |
| }, | |
| }, | |
| // Invert (for dark mode) | |
| invert: { | |
| css: { | |
| '--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-kbd': 'var(--tw-prose-invert-kbd)', | |
| '--tw-prose-kbd-shadows': 'var(--tw-prose-invert-kbd-shadows)', | |
| '--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)', | |
| }, | |
| }, | |
| } | |
| module.exports = { | |
| DEFAULT: { | |
| css: [ | |
| { | |
| color: 'var(--tw-prose-body)', | |
| maxWidth: '65ch', | |
| p: {}, // Required to maintain correct order when merging | |
| '[class~="lead"]': { | |
| color: 'var(--tw-prose-lead)', | |
| }, | |
| a: { | |
| color: 'var(--tw-prose-links)', | |
| textDecoration: 'underline', | |
| fontWeight: '500', | |
| }, | |
| strong: { | |
| color: 'var(--tw-prose-bold)', | |
| fontWeight: '600', | |
| }, | |
| 'a strong': { | |
| color: 'inherit', | |
| }, | |
| 'blockquote strong': { | |
| color: 'inherit', | |
| }, | |
| 'thead th strong': { | |
| color: 'inherit', | |
| }, | |
| 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', | |
| }, | |
| ul: { | |
| listStyleType: 'disc', | |
| }, | |
| 'ol > li::marker': { | |
| fontWeight: '400', | |
| color: 'var(--tw-prose-counters)', | |
| }, | |
| 'ul > li::marker': { | |
| color: 'var(--tw-prose-bullets)', | |
| }, | |
| dt: { | |
| color: 'var(--tw-prose-headings)', | |
| fontWeight: '600', | |
| }, | |
| hr: { | |
| borderColor: 'var(--tw-prose-hr)', | |
| borderTopWidth: 1, | |
| }, | |
| blockquote: { | |
| fontWeight: '500', | |
| fontStyle: 'italic', | |
| color: 'var(--tw-prose-quotes)', | |
| borderInlineStartWidth: '0.25rem', | |
| borderInlineStartColor: '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', | |
| }, | |
| h1: { | |
| color: 'var(--tw-prose-headings)', | |
| fontWeight: '800', | |
| }, | |
| 'h1 strong': { | |
| fontWeight: '900', | |
| color: 'inherit', | |
| }, | |
| h2: { | |
| color: 'var(--tw-prose-headings)', | |
| fontWeight: '700', | |
| }, | |
| 'h2 strong': { | |
| fontWeight: '800', | |
| color: 'inherit', | |
| }, | |
| h3: { | |
| color: 'var(--tw-prose-headings)', | |
| fontWeight: '600', | |
| }, | |
| 'h3 strong': { | |
| fontWeight: '700', | |
| color: 'inherit', | |
| }, | |
| h4: { | |
| color: 'var(--tw-prose-headings)', | |
| fontWeight: '600', | |
| }, | |
| 'h4 strong': { | |
| fontWeight: '700', | |
| color: 'inherit', | |
| }, | |
| img: {}, // Required to maintain correct order when merging | |
| picture: { | |
| display: 'block', | |
| }, | |
| video: {}, // Required to maintain correct order when merging | |
| kbd: { | |
| fontWeight: '500', | |
| fontFamily: 'inherit', | |
| color: 'var(--tw-prose-kbd)', | |
| boxShadow: | |
| '0 0 0 1px rgb(var(--tw-prose-kbd-shadows) / 10%), 0 3px 0 rgb(var(--tw-prose-kbd-shadows) / 10%)', | |
| }, | |
| code: { | |
| color: 'var(--tw-prose-code)', | |
| fontWeight: '600', | |
| }, | |
| 'code::before': { | |
| content: '"`"', | |
| }, | |
| 'code::after': { | |
| content: '"`"', | |
| }, | |
| 'a code': { | |
| color: 'inherit', | |
| }, | |
| 'h1 code': { | |
| color: 'inherit', | |
| }, | |
| 'h2 code': { | |
| color: 'inherit', | |
| }, | |
| 'h3 code': { | |
| color: 'inherit', | |
| }, | |
| 'h4 code': { | |
| color: 'inherit', | |
| }, | |
| 'blockquote code': { | |
| color: 'inherit', | |
| }, | |
| 'thead th code': { | |
| color: 'inherit', | |
| }, | |
| pre: { | |
| color: 'var(--tw-prose-pre-code)', | |
| backgroundColor: 'var(--tw-prose-pre-bg)', | |
| overflowX: 'auto', | |
| fontWeight: '400', | |
| }, | |
| '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', | |
| marginTop: em(32, 16), | |
| marginBottom: em(32, 16), | |
| }, | |
| thead: { | |
| borderBottomWidth: '1px', | |
| borderBottomColor: 'var(--tw-prose-th-borders)', | |
| }, | |
| 'thead th': { | |
| color: 'var(--tw-prose-headings)', | |
| fontWeight: '600', | |
| verticalAlign: 'bottom', | |
| }, | |
| 'tbody tr': { | |
| borderBottomWidth: '1px', | |
| borderBottomColor: 'var(--tw-prose-td-borders)', | |
| }, | |
| 'tbody tr:last-child': { | |
| borderBottomWidth: '0', | |
| }, | |
| 'tbody td': { | |
| verticalAlign: 'baseline', | |
| }, | |
| tfoot: { | |
| borderTopWidth: '1px', | |
| borderTopColor: 'var(--tw-prose-th-borders)', | |
| }, | |
| 'tfoot td': { | |
| verticalAlign: 'top', | |
| }, | |
| 'th, td': { | |
| textAlign: 'start', | |
| }, | |
| 'figure > *': {}, // Required to maintain correct order when merging | |
| figcaption: { | |
| color: 'var(--tw-prose-captions)', | |
| }, | |
| }, | |
| defaultModifiers.gray.css, | |
| ...defaultModifiers.base.css, | |
| ], | |
| }, | |
| ...defaultModifiers, | |
| } | |