({ theme }: PluginUtils)
| 1 | import { type PluginUtils } from 'tailwindcss/types/config' |
| 2 | |
| 3 | export default function typographyStyles({ theme }: PluginUtils) { |
| 4 | return { |
| 5 | DEFAULT: { |
| 6 | css: { |
| 7 | // Light mode |
| 8 | '--tw-prose-body': theme('colors.zinc.700'), |
| 9 | '--tw-prose-headings': theme('colors.zinc.900'), |
| 10 | '--tw-prose-links': '', |
| 11 | '--tw-prose-links-hover': 'hsl(46.38 70.61% 48.04%)', |
| 12 | '--tw-prose-links-underline': 'hsl(46.38 70.61% 48.04%)', |
| 13 | '--tw-prose-bold': theme('colors.zinc.900'), |
| 14 | '--tw-prose-counters': theme('colors.zinc.500'), |
| 15 | '--tw-prose-bullets': theme('colors.zinc.300'), |
| 16 | '--tw-prose-hr': theme('colors.zinc.900 / 0.05'), |
| 17 | '--tw-prose-quotes': theme('colors.zinc.900'), |
| 18 | '--tw-prose-quote-borders': theme('colors.zinc.200'), |
| 19 | '--tw-prose-captions': theme('colors.zinc.500'), |
| 20 | '--tw-prose-code': theme('colors.zinc.900'), |
| 21 | '--tw-prose-code-bg': theme('colors.zinc.100'), |
| 22 | '--tw-prose-code-ring': theme('colors.zinc.300'), |
| 23 | '--tw-prose-th-borders': theme('colors.zinc.300'), |
| 24 | '--tw-prose-td-borders': theme('colors.zinc.200'), |
| 25 | // Dark mode |
| 26 | '--tw-prose-invert-body': theme('colors.zinc.400'), |
| 27 | '--tw-prose-invert-headings': theme('colors.white'), |
| 28 | '--tw-prose-invert-links': 'hsl(243 55% 66%)', |
| 29 | '--tw-prose-invert-links-hover': 'hsl(46.38 70.61% 48.04%)', |
| 30 | '--tw-prose-invert-links-underline': 'hsl(46.38 70.61% 48.04%)', |
| 31 | '--tw-prose-invert-bold': theme('colors.white'), |
| 32 | '--tw-prose-invert-counters': theme('colors.zinc.400'), |
| 33 | '--tw-prose-invert-bullets': theme('colors.zinc.600'), |
| 34 | '--tw-prose-invert-hr': theme('colors.white / 0.05'), |
| 35 | '--tw-prose-invert-quotes': theme('colors.zinc.100'), |
| 36 | '--tw-prose-invert-quote-borders': theme('colors.zinc.700'), |
| 37 | '--tw-prose-invert-captions': theme('colors.zinc.400'), |
| 38 | '--tw-prose-invert-code': theme('colors.white'), |
| 39 | '--tw-prose-invert-code-bg': theme('colors.zinc.700 / 0.15'), |
| 40 | '--tw-prose-invert-code-ring': theme('colors.white / 0.1'), |
| 41 | '--tw-prose-invert-th-borders': theme('colors.zinc.600'), |
| 42 | '--tw-prose-invert-td-borders': theme('colors.zinc.700'), |
| 43 | |
| 44 | // Base |
| 45 | color: 'var(--tw-prose-body)', |
| 46 | fontSize: theme('fontSize.sm')[0], |
| 47 | lineHeight: theme('lineHeight.7'), |
| 48 | |
| 49 | // Text |
| 50 | p: { |
| 51 | fontSize: theme('fontSize.base')[0], |
| 52 | marginTop: theme('spacing.6'), |
| 53 | marginBottom: theme('spacing.6'), |
| 54 | ...theme('fontSize.base')[1], |
| 55 | }, |
| 56 | '[class~="lead"]': { |
| 57 | fontSize: theme('fontSize.base')[0], |
| 58 | ...theme('fontSize.base')[1], |
| 59 | }, |
| 60 |
nothing calls this directly
no outgoing calls
no test coverage detected