docs/typography.ts at main · nitrictech/docs · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
import { type PluginUtils } from 'tailwindcss/types/config'

export default function typographyStyles({ theme }: PluginUtils) {
  return {
    DEFAULT: {
      css: {
        '--tw-prose-body': theme('colors.zinc.900'),
        '--tw-prose-headings': theme('colors.zinc.900'),
        '--tw-prose-links': theme('colors.purple.500'),
        '--tw-prose-links-hover': theme('colors.purple.600'),
        '--tw-prose-links-underline': theme('colors.purple.500 / 0.3'),
        '--tw-prose-bold': theme('colors.zinc.900'),
        '--tw-prose-counters': theme('colors.zinc.500'),
        '--tw-prose-bullets': theme('colors.zinc.300'),
        '--tw-prose-hr': theme('colors.zinc.900 / 0.05'),
        '--tw-prose-quotes': theme('colors.zinc.900'),
        '--tw-prose-quote-borders': theme('colors.zinc.200'),
        '--tw-prose-captions': theme('colors.zinc.500'),
        '--tw-prose-code': theme('colors.zinc.900'),
        '--tw-prose-code-bg': theme('colors.zinc.100'),
        '--tw-prose-code-ring': theme('colors.zinc.300'),
        '--tw-prose-th-borders': theme('colors.zinc.300'),
        '--tw-prose-td-borders': theme('colors.zinc.200'),

        '--tw-prose-invert-body': theme('colors.zinc.300'),
        '--tw-prose-invert-headings': theme('colors.white'),
        '--tw-prose-invert-links': theme('colors.purple.300'),
        '--tw-prose-invert-links-hover': theme('colors.purple.300'),
        '--tw-prose-invert-links-underline': theme('colors.purple.500 / 0.5'),
        '--tw-prose-invert-links-underline-hover': theme('colors.purple.500'),
        '--tw-prose-invert-bold': theme('colors.white'),
        '--tw-prose-invert-counters': theme('colors.zinc.400'),
        '--tw-prose-invert-bullets': theme('colors.zinc.600'),
        '--tw-prose-invert-hr': theme('colors.white / 0.05'),
        '--tw-prose-invert-quotes': theme('colors.zinc.100'),
        '--tw-prose-invert-quote-borders': theme('colors.zinc.700'),
        '--tw-prose-invert-captions': theme('colors.zinc.400'),
        '--tw-prose-invert-code': theme('colors.white'),
        '--tw-prose-invert-code-bg': theme('colors.zinc.700 / 0.15'),
        '--tw-prose-invert-code-ring': theme('colors.white / 0.1'),
        '--tw-prose-invert-th-borders': theme('colors.zinc.600'),
        '--tw-prose-invert-td-borders': theme('colors.zinc.700'),

        // Base
        color: 'var(--tw-prose-body)',
        fontSize: theme('fontSize.base')[0],
        lineHeight: theme('lineHeight.7'),

        // Text
        p: {
          marginTop: theme('spacing.6'),
          marginBottom: theme('spacing.6'),
        },
        '[class~="lead"]': {
          fontSize: theme('fontSize.base')[0],
          ...theme('fontSize.base')[1],
        },

        // Lists
        ol: {
          listStyleType: 'decimal',
          marginTop: theme('spacing.5'),
          marginBottom: theme('spacing.5'),
          paddingLeft: '1.625rem',
        },
        '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',
          marginTop: theme('spacing.5'),
          marginBottom: theme('spacing.5'),
          paddingLeft: '1.625rem',
        },
        li: {
          marginTop: theme('spacing.2'),
          marginBottom: theme('spacing.2'),
        },
        ':is(ol, ul) > li': {
          paddingLeft: theme('spacing[1.5]'),
        },
        'ol > li::marker': {
          fontWeight: '400',
          color: 'var(--tw-prose-counters)',
        },
        'ul > li::marker': {
          color: 'var(--tw-prose-bullets)',
        },
        '> ul > li p': {
          marginTop: theme('spacing.3'),
          marginBottom: theme('spacing.3'),
        },
        '> ul > li > *:first-child': {
          marginTop: theme('spacing.5'),
        },
        '> ul > li > *:last-child': {
          marginBottom: theme('spacing.5'),
        },
        '> ol > li > *:first-child': {
          marginTop: theme('spacing.5'),
        },
        '> ol > li > *:last-child': {
          marginBottom: theme('spacing.5'),
        },
        'ul ul, ul ol, ol ul, ol ol': {
          marginTop: theme('spacing.3'),
          marginBottom: theme('spacing.3'),
        },

        // Horizontal rules
        hr: {
          borderColor: 'var(--tw-prose-hr)',
          borderTopWidth: 1,
          marginTop: theme('spacing.8'),
          marginBottom: theme('spacing.8'),
          maxWidth: 'none',
          marginLeft: `calc(-1 * ${theme('spacing.4')})`,
          marginRight: `calc(-1 * ${theme('spacing.4')})`,
          '@screen sm': {
            marginLeft: `calc(-1 * ${theme('spacing.6')})`,
            marginRight: `calc(-1 * ${theme('spacing.6')})`,
          },
          '@screen lg': {
            marginLeft: `calc(-1 * ${theme('spacing.8')})`,
            marginRight: `calc(-1 * ${theme('spacing.8')})`,
          },
        },

        // Quotes
        blockquote: {
          fontWeight: '500',
          fontStyle: 'italic',
          color: 'var(--tw-prose-quotes)',
          borderLeftWidth: '0.25rem',
          borderLeftColor: 'var(--tw-prose-quote-borders)',
          quotes: '"\\201C""\\201D""\\2018""\\2019"',
          marginTop: theme('spacing.8'),
          marginBottom: theme('spacing.8'),
          paddingLeft: theme('spacing.5'),
        },
        'blockquote p:first-of-type::before': {
          content: 'open-quote',
        },
        'blockquote p:last-of-type::after': {
          content: 'close-quote',
        },

        // Headings
        h1: {
          color: 'var(--tw-prose-headings)',
          fontWeight: '700',
          fontSize: theme('fontSize.2xl')[0],
          fontFamily: theme('fontFamily.display'),
          ...theme('fontSize.2xl')[1],
          marginBottom: theme('spacing.2'),
        },
        h2: {
          color: 'var(--tw-prose-headings)',
          fontWeight: '600',
          fontSize: theme('fontSize.xl')[0],
          fontFamily: theme('fontFamily.display'),
          ...theme('fontSize.lg')[1],
          marginTop: theme('spacing.16'),
          marginBottom: theme('spacing.2'),
        },
        h3: {
          color: 'var(--tw-prose-headings)',
          fontFamily: theme('fontFamily.display'),
          fontSize: theme('fontSize.lg')[0],
          ...theme('fontSize.base')[1],
          fontWeight: '600',
          marginTop: theme('spacing.10'),
          marginBottom: theme('spacing.2'),
        },
        h4: {
          fontFamily: theme('fontFamily.display'),
        },

        // Media
        'img, video, figure': {
          marginTop: theme('spacing.8'),
          marginBottom: theme('spacing.8'),
        },
        'figure > *': {
          marginTop: '0',
          marginBottom: '0',
        },
        figcaption: {
          color: 'var(--tw-prose-captions)',
          fontSize: theme('fontSize.xs')[0],
          ...theme('fontSize.xs')[1],
          marginTop: theme('spacing.2'),
        },

        // Tables
        table: {
          marginTop: theme('spacing.8'),
          marginBottom: theme('spacing.8'),
          lineHeight: theme('lineHeight.6'),
        },

        // Inline elements
        a: {
          color: 'var(--tw-prose-links)',
          textDecoration: 'underline',
          fontWeight: '500',
          transitionProperty: 'color, text-decoration-color',
          textDecorationColor: 'var(--tw-prose-links-underline)',
          transitionDuration: theme('transitionDuration.DEFAULT'),
          transitionTimingFunction: theme('transitionTimingFunction.DEFAULT'),
          '&:hover': {
            color: 'var(--tw-prose-links-hover)',
            textDecorationColor: 'var(--tw-prose-links-underline-hover)',
          },
        },
        ':is(h1, h2, h3) a': {
          fontWeight: 'inherit',
        },
        strong: {
          color: 'var(--tw-prose-bold)',
          fontWeight: '600',
        },
        ':is(a, blockquote, thead th) strong': {
          color: 'inherit',
        },
        code: {
          color: 'var(--tw-prose-code)',
          borderRadius: theme('borderRadius.lg'),
          paddingTop: theme('padding.1'),
          paddingRight: theme('padding[1.5]'),
          paddingBottom: theme('padding.1'),
          paddingLeft: theme('padding[1.5]'),
          boxShadow: 'inset 0 0 0 1px var(--tw-prose-code-ring)',
          backgroundColor: 'var(--tw-prose-code-bg)',
          fontSize: theme('fontSize.2xs'),
        },
        ':is(a, h1, h2, h3, blockquote, thead th) code': {
          color: 'inherit',
        },
        'h2 code': {
          fontSize: theme('fontSize.base')[0],
          fontWeight: 'inherit',
        },
        'h3 code': {
          fontSize: theme('fontSize.sm')[0],
          fontWeight: 'inherit',
        },

        // Overrides
        ':is(h1, h2, h3) + *': {
          marginTop: '0',
        },
        '> :first-child': {
          marginTop: '0 !important',
        },
        '> :last-child': {
          marginBottom: '0 !important',
        },
      },
    },
    invert: {
      css: {
        '--tw-prose-body': 'var(--tw-prose-invert-body)',
        '--tw-prose-headings': 'var(--tw-prose-invert-headings)',
        '--tw-prose-links': 'var(--tw-prose-invert-links)',
        '--tw-prose-links-hover': 'var(--tw-prose-invert-links-hover)',
        '--tw-prose-links-underline': 'var(--tw-prose-invert-links-underline)',
        '--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-code-bg': 'var(--tw-prose-invert-code-bg)',
        '--tw-prose-code-ring': 'var(--tw-prose-invert-code-ring)',
        '--tw-prose-th-borders': 'var(--tw-prose-invert-th-borders)',
        '--tw-prose-td-borders': 'var(--tw-prose-invert-td-borders)',
      },
    },
  }
}