@unocss/preset-typography 66.4.1 → 66.5.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.mjs CHANGED
@@ -1,336 +1,1456 @@
1
- import { mergeDeep, definePreset, toEscapedSelector } from '@unocss/core';
2
- import { alphaPlaceholders } from '@unocss/rule-utils';
1
+ import { clone, toArray, mergeDeep, definePreset, symbols } from '@unocss/core';
2
+ import { colorToString, alphaPlaceholders } from '@unocss/rule-utils';
3
3
 
4
- function DEFAULT(ctx) {
5
- const { theme, generator } = ctx;
6
- const hasWind4 = generator.config.presets.some((p) => p.name === "@unocss/preset-wind4");
7
- const fontKey = hasWind4 ? "font" : "fontFamily";
8
- return {
9
- "h1,h2,h3,h4,h5,h6": {
10
- "color": "var(--un-prose-headings)",
11
- "font-weight": "600",
12
- "line-height": 1.25
4
+ const modifiers = [
5
+ ["headings", "h1", "h2", "h3", "h4", "h5", "h6", "th"],
6
+ ["h1"],
7
+ ["h2"],
8
+ ["h3"],
9
+ ["h4"],
10
+ ["h5"],
11
+ ["h6"],
12
+ ["p"],
13
+ ["a"],
14
+ ["blockquote"],
15
+ ["figure"],
16
+ ["figcaption"],
17
+ ["strong"],
18
+ ["em"],
19
+ ["kbd"],
20
+ ["code"],
21
+ ["pre"],
22
+ ["ol"],
23
+ ["ul"],
24
+ ["li"],
25
+ ["table"],
26
+ ["thead"],
27
+ ["tr"],
28
+ ["th"],
29
+ ["td"],
30
+ ["img"],
31
+ ["video"],
32
+ ["hr"]
33
+ ];
34
+ const defaultColorScheme = {
35
+ "body": [700, 300],
36
+ "headings": [900, "white"],
37
+ "lead": [600, 400],
38
+ "links": [900, "white"],
39
+ "bold": [900, "white"],
40
+ "counters": [500, 400],
41
+ "bullets": [300, 600],
42
+ "hr": [200, 700],
43
+ "quotes": [900, 100],
44
+ "quote-borders": [200, 700],
45
+ "captions": [500, 400],
46
+ "kbd": [900, "white"],
47
+ "kbd-shadows": [900, "white"],
48
+ "code": [900, "white"],
49
+ "pre-code": [200, 300],
50
+ "pre-bg": [800, "rgb(0 0 0 / 50%)"],
51
+ "th-borders": [300, 600],
52
+ "td-borders": [200, 700]
53
+ };
54
+ const round = (num) => num.toFixed(7).replace(/0+$/, "").replace(/\.$/, "");
55
+ const rem = (px) => `${round(px / 16)}rem`;
56
+ const em = (px, base) => `${round(px / base)}em`;
57
+ const ProseDefaultCSSObject = {
58
+ "color": "var(--un-prose-body)",
59
+ "max-width": "65ch",
60
+ "p": {},
61
+ // Required to maintain correct order when merging
62
+ '[class~="lead"]': {
63
+ color: "var(--un-prose-lead)"
64
+ },
65
+ "a": {
66
+ "color": "var(--un-prose-links)",
67
+ "text-decoration": "underline",
68
+ "font-weight": "500"
69
+ },
70
+ "strong": {
71
+ "color": "var(--un-prose-bold)",
72
+ "font-weight": "600"
73
+ },
74
+ "a strong": {
75
+ color: "inherit"
76
+ },
77
+ "blockquote strong": {
78
+ color: "inherit"
79
+ },
80
+ "thead th strong": {
81
+ color: "inherit"
82
+ },
83
+ "ol": {
84
+ "list-style-type": "decimal"
85
+ },
86
+ 'ol[type="A"]': {
87
+ "list-style-type": "upper-alpha"
88
+ },
89
+ 'ol[type="a"]': {
90
+ "list-style-type": "lower-alpha"
91
+ },
92
+ 'ol[type="A" s]': {
93
+ "list-style-type": "upper-alpha"
94
+ },
95
+ 'ol[type="a" s]': {
96
+ "list-style-type": "lower-alpha"
97
+ },
98
+ 'ol[type="I"]': {
99
+ "list-style-type": "upper-roman"
100
+ },
101
+ 'ol[type="i"]': {
102
+ "list-style-type": "lower-roman"
103
+ },
104
+ 'ol[type="I" s]': {
105
+ "list-style-type": "upper-roman"
106
+ },
107
+ 'ol[type="i" s]': {
108
+ "list-style-type": "lower-roman"
109
+ },
110
+ 'ol[type="1"]': {
111
+ "list-style-type": "decimal"
112
+ },
113
+ "ul": {
114
+ "list-style-type": "disc"
115
+ },
116
+ "ol > li::marker": {
117
+ "font-weight": "400",
118
+ "color": "var(--un-prose-counters)"
119
+ },
120
+ "ul > li::marker": {
121
+ color: "var(--un-prose-bullets)"
122
+ },
123
+ "dt": {
124
+ "color": "var(--un-prose-headings)",
125
+ "font-weight": "600"
126
+ },
127
+ "hr": {
128
+ "border-color": "var(--un-prose-hr)",
129
+ "border-top-width": "1px"
130
+ },
131
+ "blockquote": {
132
+ "font-weight": "500",
133
+ "font-style": "italic",
134
+ "color": "var(--un-prose-quotes)",
135
+ "border-inline-start-width": "0.25rem",
136
+ "border-inline-start-color": "var(--un-prose-quote-borders)",
137
+ "quotes": '"\\201C""\\201D""\\2018""\\2019"'
138
+ },
139
+ "blockquote p:first-of-type::before": {
140
+ content: "open-quote"
141
+ },
142
+ "blockquote p:last-of-type::after": {
143
+ content: "close-quote"
144
+ },
145
+ "h1": {
146
+ "color": "var(--un-prose-headings)",
147
+ "font-weight": "800"
148
+ },
149
+ "h1 strong": {
150
+ "font-weight": "900",
151
+ "color": "inherit"
152
+ },
153
+ "h2": {
154
+ "color": "var(--un-prose-headings)",
155
+ "font-weight": "700"
156
+ },
157
+ "h2 strong": {
158
+ "font-weight": "800",
159
+ "color": "inherit"
160
+ },
161
+ "h3": {
162
+ "color": "var(--un-prose-headings)",
163
+ "font-weight": "600"
164
+ },
165
+ "h3 strong": {
166
+ "font-weight": "700",
167
+ "color": "inherit"
168
+ },
169
+ "h4": {
170
+ "color": "var(--un-prose-headings)",
171
+ "font-weight": "600"
172
+ },
173
+ "h4 strong": {
174
+ "font-weight": "700",
175
+ "color": "inherit"
176
+ },
177
+ "img": {},
178
+ // Required to maintain correct order when merging
179
+ "picture": {
180
+ display: "block"
181
+ },
182
+ "video": {},
183
+ // Required to maintain correct order when merging
184
+ "kbd": {
185
+ "font-weight": "500",
186
+ "font-family": "inherit",
187
+ "color": "var(--un-prose-kbd)",
188
+ "box-shadow": "0 0 0 1px rgb(var(--un-prose-kbd-shadows) / 10%), 0 3px 0 rgb(var(--un-prose-kbd-shadows) / 10%)"
189
+ },
190
+ "code": {
191
+ "color": "var(--un-prose-code)",
192
+ "font-weight": "600"
193
+ },
194
+ "code::before": {
195
+ content: '"`"'
196
+ },
197
+ "code::after": {
198
+ content: '"`"'
199
+ },
200
+ "a code": {
201
+ color: "inherit"
202
+ },
203
+ "h1 code": {
204
+ color: "inherit"
205
+ },
206
+ "h2 code": {
207
+ color: "inherit"
208
+ },
209
+ "h3 code": {
210
+ color: "inherit"
211
+ },
212
+ "h4 code": {
213
+ color: "inherit"
214
+ },
215
+ "blockquote code": {
216
+ color: "inherit"
217
+ },
218
+ "thead th code": {
219
+ color: "inherit"
220
+ },
221
+ "pre": {
222
+ "color": "var(--un-prose-pre-code)",
223
+ "background-color": "var(--un-prose-pre-bg)",
224
+ "overflow-x": "auto",
225
+ "font-weight": "400"
226
+ },
227
+ "pre code": {
228
+ "background-color": "transparent",
229
+ "border-width": "0",
230
+ "border-radius": "0",
231
+ "padding": "0",
232
+ "font-weight": "inherit",
233
+ "color": "inherit",
234
+ "font-size": "inherit",
235
+ "font-family": "inherit",
236
+ "line-height": "inherit"
237
+ },
238
+ "pre code::before": {
239
+ content: "none"
240
+ },
241
+ "pre code::after": {
242
+ content: "none"
243
+ },
244
+ "table": {
245
+ "width": "100%",
246
+ "table-layout": "auto",
247
+ "margin-top": em(32, 16),
248
+ "margin-bottom": em(32, 16)
249
+ },
250
+ "thead": {
251
+ "border-bottom-width": "1px",
252
+ "border-bottom-color": "var(--un-prose-th-borders)"
253
+ },
254
+ "thead th": {
255
+ "color": "var(--un-prose-headings)",
256
+ "font-weight": "600",
257
+ "vertical-align": "bottom"
258
+ },
259
+ "tbody tr": {
260
+ "border-bottom-width": "1px",
261
+ "border-bottom-color": "var(--un-prose-td-borders)"
262
+ },
263
+ "tbody tr:last-child": {
264
+ "border-bottom-width": "0"
265
+ },
266
+ "tbody td": {
267
+ "vertical-align": "baseline"
268
+ },
269
+ "tfoot": {
270
+ "border-top-width": "1px",
271
+ "border-top-color": "var(--un-prose-th-borders)"
272
+ },
273
+ "tfoot td": {
274
+ "vertical-align": "top"
275
+ },
276
+ "th, td": {
277
+ "text-align": "start"
278
+ },
279
+ "figure > *": {},
280
+ // Required to maintain correct order when merging
281
+ "figcaption": {
282
+ color: "var(--un-prose-captions)"
283
+ }
284
+ };
285
+ const ProseDefaultSize = {
286
+ "sm": {
287
+ "font-size": rem(14),
288
+ "line-height": round(24 / 14),
289
+ "p": {
290
+ "margin-top": em(16, 14),
291
+ "margin-bottom": em(16, 14)
292
+ },
293
+ '[class~="lead"]': {
294
+ "font-size": em(18, 14),
295
+ "line-height": round(28 / 18),
296
+ "margin-top": em(16, 18),
297
+ "margin-bottom": em(16, 18)
298
+ },
299
+ "blockquote": {
300
+ "margin-top": em(24, 18),
301
+ "margin-bottom": em(24, 18),
302
+ "padding-inline-start": em(20, 18)
303
+ },
304
+ "h1": {
305
+ "font-size": em(30, 14),
306
+ "margin-top": "0",
307
+ "margin-bottom": em(24, 30),
308
+ "line-height": round(36 / 30)
309
+ },
310
+ "h2": {
311
+ "font-size": em(20, 14),
312
+ "margin-top": em(32, 20),
313
+ "margin-bottom": em(16, 20),
314
+ "line-height": round(28 / 20)
315
+ },
316
+ "h3": {
317
+ "font-size": em(18, 14),
318
+ "margin-top": em(28, 18),
319
+ "margin-bottom": em(8, 18),
320
+ "line-height": round(28 / 18)
321
+ },
322
+ "h4": {
323
+ "margin-top": em(20, 14),
324
+ "margin-bottom": em(8, 14),
325
+ "line-height": round(20 / 14)
326
+ },
327
+ "img": {
328
+ "margin-top": em(24, 14),
329
+ "margin-bottom": em(24, 14)
330
+ },
331
+ "picture": {
332
+ "margin-top": em(24, 14),
333
+ "margin-bottom": em(24, 14)
13
334
  },
14
- "a": {
15
- "color": "var(--un-prose-links)",
16
- "text-decoration": "underline",
17
- "font-weight": "500"
335
+ "picture > img": {
336
+ "margin-top": "0",
337
+ "margin-bottom": "0"
18
338
  },
19
- "a code": {
20
- color: "var(--un-prose-links)"
339
+ "video": {
340
+ "margin-top": em(24, 14),
341
+ "margin-bottom": em(24, 14)
342
+ },
343
+ "kbd": {
344
+ "font-size": em(12, 14),
345
+ "border-radius": rem(5),
346
+ "padding-top": em(2, 14),
347
+ "padding-inline-end": em(5, 14),
348
+ "padding-bottom": em(2, 14),
349
+ "padding-inline-start": em(5, 14)
350
+ },
351
+ "code": {
352
+ "font-size": em(12, 14)
353
+ },
354
+ "h2 code": {
355
+ "font-size": em(18, 20)
356
+ },
357
+ "h3 code": {
358
+ "font-size": em(16, 18)
359
+ },
360
+ "pre": {
361
+ "font-size": em(12, 14),
362
+ "line-height": round(20 / 12),
363
+ "margin-top": em(20, 12),
364
+ "margin-bottom": em(20, 12),
365
+ "border-radius": rem(4),
366
+ "padding-top": em(8, 12),
367
+ "padding-inline-end": em(12, 12),
368
+ "padding-bottom": em(8, 12),
369
+ "padding-inline-start": em(12, 12)
370
+ },
371
+ "ol": {
372
+ "margin-top": em(16, 14),
373
+ "margin-bottom": em(16, 14),
374
+ "padding-inline-start": em(22, 14)
375
+ },
376
+ "ul": {
377
+ "margin-top": em(16, 14),
378
+ "margin-bottom": em(16, 14),
379
+ "padding-inline-start": em(22, 14)
380
+ },
381
+ "li": {
382
+ "margin-top": em(4, 14),
383
+ "margin-bottom": em(4, 14)
384
+ },
385
+ "ol > li": {
386
+ "padding-inline-start": em(6, 14)
387
+ },
388
+ "ul > li": {
389
+ "padding-inline-start": em(6, 14)
390
+ },
391
+ "> ul > li p": {
392
+ "margin-top": em(8, 14),
393
+ "margin-bottom": em(8, 14)
394
+ },
395
+ "> ul > li > p:first-child": {
396
+ "margin-top": em(16, 14)
397
+ },
398
+ "> ul > li > p:last-child": {
399
+ "margin-bottom": em(16, 14)
400
+ },
401
+ "> ol > li > p:first-child": {
402
+ "margin-top": em(16, 14)
403
+ },
404
+ "> ol > li > p:last-child": {
405
+ "margin-bottom": em(16, 14)
406
+ },
407
+ "ul ul, ul ol, ol ul, ol ol": {
408
+ "margin-top": em(8, 14),
409
+ "margin-bottom": em(8, 14)
410
+ },
411
+ "dl": {
412
+ "margin-top": em(16, 14),
413
+ "margin-bottom": em(16, 14)
414
+ },
415
+ "dt": {
416
+ "margin-top": em(16, 14)
417
+ },
418
+ "dd": {
419
+ "margin-top": em(4, 14),
420
+ "padding-inline-start": em(22, 14)
421
+ },
422
+ "hr": {
423
+ "margin-top": em(40, 14),
424
+ "margin-bottom": em(40, 14)
425
+ },
426
+ "hr + *": {
427
+ "margin-top": "0"
428
+ },
429
+ "h2 + *": {
430
+ "margin-top": "0"
431
+ },
432
+ "h3 + *": {
433
+ "margin-top": "0"
434
+ },
435
+ "h4 + *": {
436
+ "margin-top": "0"
437
+ },
438
+ "table": {
439
+ "font-size": em(12, 14),
440
+ "line-height": round(18 / 12)
441
+ },
442
+ "thead th": {
443
+ "padding-inline-end": em(12, 12),
444
+ "padding-bottom": em(8, 12),
445
+ "padding-inline-start": em(12, 12)
446
+ },
447
+ "thead th:first-child": {
448
+ "padding-inline-start": "0"
449
+ },
450
+ "thead th:last-child": {
451
+ "padding-inline-end": "0"
452
+ },
453
+ "tbody td, tfoot td": {
454
+ "padding-top": em(8, 12),
455
+ "padding-inline-end": em(12, 12),
456
+ "padding-bottom": em(8, 12),
457
+ "padding-inline-start": em(12, 12)
458
+ },
459
+ "tbody td:first-child, tfoot td:first-child": {
460
+ "padding-inline-start": "0"
461
+ },
462
+ "tbody td:last-child, tfoot td:last-child": {
463
+ "padding-inline-end": "0"
464
+ },
465
+ "figure": {
466
+ "margin-top": em(24, 14),
467
+ "margin-bottom": em(24, 14)
468
+ },
469
+ "figure > *": {
470
+ "margin-top": "0",
471
+ "margin-bottom": "0"
472
+ },
473
+ "figcaption": {
474
+ "font-size": em(12, 14),
475
+ "line-height": round(16 / 12),
476
+ "margin-top": em(8, 12)
477
+ },
478
+ "> :first-child": {
479
+ "margin-top": "0"
480
+ },
481
+ "> :last-child": {
482
+ "margin-bottom": "0"
483
+ }
484
+ },
485
+ "base": {
486
+ "font-size": rem(16),
487
+ "line-height": round(28 / 16),
488
+ "p": {
489
+ "margin-top": em(20, 16),
490
+ "margin-bottom": em(20, 16)
21
491
  },
22
- "p,ul,ol,pre": {
23
- "margin": "1em 0",
24
- "line-height": 1.75
492
+ '[class~="lead"]': {
493
+ "font-size": em(20, 16),
494
+ "line-height": round(32 / 20),
495
+ "margin-top": em(24, 20),
496
+ "margin-bottom": em(24, 20)
25
497
  },
26
498
  "blockquote": {
27
- "margin": "1em 0",
28
- "padding-left": "1em",
29
- "font-style": "italic",
30
- "border-left": ".25em solid var(--un-prose-borders)"
499
+ "margin-top": em(32, 20),
500
+ "margin-bottom": em(32, 20),
501
+ "padding-inline-start": em(20, 20)
31
502
  },
32
- // taking 16px as a base, we scale h1, h2, h3, and h4 like
33
- // 16 (base) > 18 (h4) > 22 (h3) > 28 (h2) > 36 (h1)
34
503
  "h1": {
35
- "margin": "1rem 0",
36
- // h1 is always at the top of the page, so only margin 1 * root font size
37
- "font-size": "2.25em"
504
+ "font-size": em(36, 16),
505
+ "margin-top": "0",
506
+ "margin-bottom": em(32, 36),
507
+ "line-height": round(40 / 36)
38
508
  },
39
509
  "h2": {
40
- "margin": "1.75em 0 .5em",
41
- "font-size": "1.75em"
510
+ "font-size": em(24, 16),
511
+ "margin-top": em(48, 24),
512
+ "margin-bottom": em(24, 24),
513
+ "line-height": round(32 / 24)
42
514
  },
43
515
  "h3": {
44
- "margin": "1.5em 0 .5em",
45
- "font-size": "1.375em"
516
+ "font-size": em(20, 16),
517
+ "margin-top": em(32, 20),
518
+ "margin-bottom": em(12, 20),
519
+ "line-height": round(32 / 20)
46
520
  },
47
521
  "h4": {
48
- "margin": "1em 0",
49
- "font-size": "1.125em"
522
+ "margin-top": em(24, 16),
523
+ "margin-bottom": em(8, 16),
524
+ "line-height": round(24 / 16)
50
525
  },
51
- "img,video": {
52
- "max-width": "100%"
526
+ "img": {
527
+ "margin-top": em(32, 16),
528
+ "margin-bottom": em(32, 16)
53
529
  },
54
- "figure,picture": {
55
- margin: "1em 0"
530
+ "picture": {
531
+ "margin-top": em(32, 16),
532
+ "margin-bottom": em(32, 16)
533
+ },
534
+ "picture > img": {
535
+ "margin-top": "0",
536
+ "margin-bottom": "0"
537
+ },
538
+ "video": {
539
+ "margin-top": em(32, 16),
540
+ "margin-bottom": em(32, 16)
541
+ },
542
+ "kbd": {
543
+ "font-size": em(14, 16),
544
+ "border-radius": rem(5),
545
+ "padding-top": em(3, 16),
546
+ "padding-inline-end": em(6, 16),
547
+ "padding-bottom": em(3, 16),
548
+ "padding-inline-start": em(6, 16)
549
+ },
550
+ "code": {
551
+ "font-size": em(14, 16)
552
+ },
553
+ "h2 code": {
554
+ "font-size": em(21, 24)
555
+ },
556
+ "h3 code": {
557
+ "font-size": em(18, 20)
558
+ },
559
+ "pre": {
560
+ "font-size": em(14, 16),
561
+ "line-height": round(24 / 14),
562
+ "margin-top": em(24, 14),
563
+ "margin-bottom": em(24, 14),
564
+ "border-radius": rem(6),
565
+ "padding-top": em(12, 14),
566
+ "padding-inline-end": em(16, 14),
567
+ "padding-bottom": em(12, 14),
568
+ "padding-inline-start": em(16, 14)
569
+ },
570
+ "ol": {
571
+ "margin-top": em(20, 16),
572
+ "margin-bottom": em(20, 16),
573
+ "padding-inline-start": em(26, 16)
574
+ },
575
+ "ul": {
576
+ "margin-top": em(20, 16),
577
+ "margin-bottom": em(20, 16),
578
+ "padding-inline-start": em(26, 16)
579
+ },
580
+ "li": {
581
+ "margin-top": em(8, 16),
582
+ "margin-bottom": em(8, 16)
583
+ },
584
+ "ol > li": {
585
+ "padding-inline-start": em(6, 16)
586
+ },
587
+ "ul > li": {
588
+ "padding-inline-start": em(6, 16)
589
+ },
590
+ "> ul > li p": {
591
+ "margin-top": em(12, 16),
592
+ "margin-bottom": em(12, 16)
593
+ },
594
+ "> ul > li > p:first-child": {
595
+ "margin-top": em(20, 16)
596
+ },
597
+ "> ul > li > p:last-child": {
598
+ "margin-bottom": em(20, 16)
599
+ },
600
+ "> ol > li > p:first-child": {
601
+ "margin-top": em(20, 16)
602
+ },
603
+ "> ol > li > p:last-child": {
604
+ "margin-bottom": em(20, 16)
605
+ },
606
+ "ul ul, ul ol, ol ul, ol ol": {
607
+ "margin-top": em(12, 16),
608
+ "margin-bottom": em(12, 16)
609
+ },
610
+ "dl": {
611
+ "margin-top": em(20, 16),
612
+ "margin-bottom": em(20, 16)
613
+ },
614
+ "dt": {
615
+ "margin-top": em(20, 16)
616
+ },
617
+ "dd": {
618
+ "margin-top": em(8, 16),
619
+ "padding-inline-start": em(26, 16)
620
+ },
621
+ "hr": {
622
+ "margin-top": em(48, 16),
623
+ "margin-bottom": em(48, 16)
624
+ },
625
+ "hr + *": {
626
+ "margin-top": "0"
627
+ },
628
+ "h2 + *": {
629
+ "margin-top": "0"
630
+ },
631
+ "h3 + *": {
632
+ "margin-top": "0"
633
+ },
634
+ "h4 + *": {
635
+ "margin-top": "0"
636
+ },
637
+ "table": {
638
+ "font-size": em(14, 16),
639
+ "line-height": round(24 / 14)
640
+ },
641
+ "thead th": {
642
+ "padding-inline-end": em(8, 14),
643
+ "padding-bottom": em(8, 14),
644
+ "padding-inline-start": em(8, 14)
645
+ },
646
+ "thead th:first-child": {
647
+ "padding-inline-start": "0"
648
+ },
649
+ "thead th:last-child": {
650
+ "padding-inline-end": "0"
651
+ },
652
+ "tbody td, tfoot td": {
653
+ "padding-top": em(8, 14),
654
+ "padding-inline-end": em(8, 14),
655
+ "padding-bottom": em(8, 14),
656
+ "padding-inline-start": em(8, 14)
657
+ },
658
+ "tbody td:first-child, tfoot td:first-child": {
659
+ "padding-inline-start": "0"
660
+ },
661
+ "tbody td:last-child, tfoot td:last-child": {
662
+ "padding-inline-end": "0"
663
+ },
664
+ "figure": {
665
+ "margin-top": em(32, 16),
666
+ "margin-bottom": em(32, 16)
667
+ },
668
+ "figure > *": {
669
+ "margin-top": "0",
670
+ "margin-bottom": "0"
56
671
  },
57
672
  "figcaption": {
58
- "color": "var(--un-prose-captions)",
59
- "font-size": ".875em"
673
+ "font-size": em(14, 16),
674
+ "line-height": round(20 / 14),
675
+ "margin-top": em(12, 14)
676
+ },
677
+ "> :first-child": {
678
+ "margin-top": "0"
679
+ },
680
+ "> :last-child": {
681
+ "margin-bottom": "0"
682
+ }
683
+ },
684
+ "lg": {
685
+ "font-size": rem(18),
686
+ "line-height": round(32 / 18),
687
+ "p": {
688
+ "margin-top": em(24, 18),
689
+ "margin-bottom": em(24, 18)
690
+ },
691
+ '[class~="lead"]': {
692
+ "font-size": em(22, 18),
693
+ "line-height": round(32 / 22),
694
+ "margin-top": em(24, 22),
695
+ "margin-bottom": em(24, 22)
696
+ },
697
+ "blockquote": {
698
+ "margin-top": em(40, 24),
699
+ "margin-bottom": em(40, 24),
700
+ "padding-inline-start": em(24, 24)
701
+ },
702
+ "h1": {
703
+ "font-size": em(48, 18),
704
+ "margin-top": "0",
705
+ "margin-bottom": em(40, 48),
706
+ "line-height": round(48 / 48)
707
+ },
708
+ "h2": {
709
+ "font-size": em(30, 18),
710
+ "margin-top": em(56, 30),
711
+ "margin-bottom": em(32, 30),
712
+ "line-height": round(40 / 30)
713
+ },
714
+ "h3": {
715
+ "font-size": em(24, 18),
716
+ "margin-top": em(40, 24),
717
+ "margin-bottom": em(16, 24),
718
+ "line-height": round(36 / 24)
719
+ },
720
+ "h4": {
721
+ "margin-top": em(32, 18),
722
+ "margin-bottom": em(8, 18),
723
+ "line-height": round(28 / 18)
724
+ },
725
+ "img": {
726
+ "margin-top": em(32, 18),
727
+ "margin-bottom": em(32, 18)
728
+ },
729
+ "picture": {
730
+ "margin-top": em(32, 18),
731
+ "margin-bottom": em(32, 18)
732
+ },
733
+ "picture > img": {
734
+ "margin-top": "0",
735
+ "margin-bottom": "0"
736
+ },
737
+ "video": {
738
+ "margin-top": em(32, 18),
739
+ "margin-bottom": em(32, 18)
740
+ },
741
+ "kbd": {
742
+ "font-size": em(16, 18),
743
+ "border-radius": rem(5),
744
+ "padding-top": em(4, 18),
745
+ "padding-inline-end": em(8, 18),
746
+ "padding-bottom": em(4, 18),
747
+ "padding-inline-start": em(8, 18)
60
748
  },
61
749
  "code": {
62
- "color": "var(--un-prose-code)",
63
- "font-size": ".875em",
64
- "font-weight": 600,
65
- "font-family": theme[fontKey]?.mono
750
+ "font-size": em(16, 18)
751
+ },
752
+ "h2 code": {
753
+ "font-size": em(26, 30)
66
754
  },
67
- ":not(pre) > code::before,:not(pre) > code::after": {
68
- content: '"`"'
755
+ "h3 code": {
756
+ "font-size": em(21, 24)
69
757
  },
70
758
  "pre": {
71
- "padding": "1.25rem 1.5rem",
72
- "overflow-x": "auto",
73
- "border-radius": ".375rem"
74
- },
75
- "pre,code": {
76
- "white-space": "pre",
77
- "word-spacing": "normal",
78
- "word-break": "normal",
79
- "word-wrap": "normal",
80
- "-moz-tab-size": 4,
81
- "-o-tab-size": 4,
82
- "tab-size": 4,
83
- "-webkit-hyphens": "none",
84
- "-moz-hyphens": "none",
85
- "hyphens": "none",
86
- "background": "transparent"
87
- },
88
- "pre code": {
89
- "font-weight": "inherit"
90
- },
91
- "ol,ul": {
92
- "padding-left": "1.25em"
759
+ "font-size": em(16, 18),
760
+ "line-height": round(28 / 16),
761
+ "margin-top": em(32, 16),
762
+ "margin-bottom": em(32, 16),
763
+ "border-radius": rem(6),
764
+ "padding-top": em(16, 16),
765
+ "padding-inline-end": em(24, 16),
766
+ "padding-bottom": em(16, 16),
767
+ "padding-inline-start": em(24, 16)
93
768
  },
94
769
  "ol": {
95
- "list-style-type": "decimal"
770
+ "margin-top": em(24, 18),
771
+ "margin-bottom": em(24, 18),
772
+ "padding-inline-start": em(28, 18)
773
+ },
774
+ "ul": {
775
+ "margin-top": em(24, 18),
776
+ "margin-bottom": em(24, 18),
777
+ "padding-inline-start": em(28, 18)
778
+ },
779
+ "li": {
780
+ "margin-top": em(12, 18),
781
+ "margin-bottom": em(12, 18)
782
+ },
783
+ "ol > li": {
784
+ "padding-inline-start": em(8, 18)
785
+ },
786
+ "ul > li": {
787
+ "padding-inline-start": em(8, 18)
788
+ },
789
+ "> ul > li p": {
790
+ "margin-top": em(16, 18),
791
+ "margin-bottom": em(16, 18)
792
+ },
793
+ "> ul > li > p:first-child": {
794
+ "margin-top": em(24, 18)
795
+ },
796
+ "> ul > li > p:last-child": {
797
+ "margin-bottom": em(24, 18)
798
+ },
799
+ "> ol > li > p:first-child": {
800
+ "margin-top": em(24, 18)
801
+ },
802
+ "> ol > li > p:last-child": {
803
+ "margin-bottom": em(24, 18)
804
+ },
805
+ "ul ul, ul ol, ol ul, ol ol": {
806
+ "margin-top": em(16, 18),
807
+ "margin-bottom": em(16, 18)
808
+ },
809
+ "dl": {
810
+ "margin-top": em(24, 18),
811
+ "margin-bottom": em(24, 18)
812
+ },
813
+ "dt": {
814
+ "margin-top": em(24, 18)
815
+ },
816
+ "dd": {
817
+ "margin-top": em(12, 18),
818
+ "padding-inline-start": em(28, 18)
819
+ },
820
+ "hr": {
821
+ "margin-top": em(56, 18),
822
+ "margin-bottom": em(56, 18)
823
+ },
824
+ "hr + *": {
825
+ "margin-top": "0"
826
+ },
827
+ "h2 + *": {
828
+ "margin-top": "0"
829
+ },
830
+ "h3 + *": {
831
+ "margin-top": "0"
832
+ },
833
+ "h4 + *": {
834
+ "margin-top": "0"
835
+ },
836
+ "table": {
837
+ "font-size": em(16, 18),
838
+ "line-height": round(24 / 16)
839
+ },
840
+ "thead th": {
841
+ "padding-inline-end": em(12, 16),
842
+ "padding-bottom": em(12, 16),
843
+ "padding-inline-start": em(12, 16)
844
+ },
845
+ "thead th:first-child": {
846
+ "padding-inline-start": "0"
847
+ },
848
+ "thead th:last-child": {
849
+ "padding-inline-end": "0"
850
+ },
851
+ "tbody td, tfoot td": {
852
+ "padding-top": em(12, 16),
853
+ "padding-inline-end": em(12, 16),
854
+ "padding-bottom": em(12, 16),
855
+ "padding-inline-start": em(12, 16)
856
+ },
857
+ "tbody td:first-child, tfoot td:first-child": {
858
+ "padding-inline-start": "0"
96
859
  },
97
- 'ol[type="A"]': {
98
- "list-style-type": "upper-alpha"
860
+ "tbody td:last-child, tfoot td:last-child": {
861
+ "padding-inline-end": "0"
99
862
  },
100
- 'ol[type="a"]': {
101
- "list-style-type": "lower-alpha"
863
+ "figure": {
864
+ "margin-top": em(32, 18),
865
+ "margin-bottom": em(32, 18)
102
866
  },
103
- 'ol[type="A" s]': {
104
- "list-style-type": "upper-alpha"
867
+ "figure > *": {
868
+ "margin-top": "0",
869
+ "margin-bottom": "0"
105
870
  },
106
- 'ol[type="a" s]': {
107
- "list-style-type": "lower-alpha"
871
+ "figcaption": {
872
+ "font-size": em(16, 18),
873
+ "line-height": round(24 / 16),
874
+ "margin-top": em(16, 16)
875
+ },
876
+ "> :first-child": {
877
+ "margin-top": "0"
878
+ },
879
+ "> :last-child": {
880
+ "margin-bottom": "0"
881
+ }
882
+ },
883
+ "xl": {
884
+ "font-size": rem(20),
885
+ "line-height": round(36 / 20),
886
+ "p": {
887
+ "margin-top": em(24, 20),
888
+ "margin-bottom": em(24, 20)
889
+ },
890
+ '[class~="lead"]': {
891
+ "font-size": em(24, 20),
892
+ "line-height": round(36 / 24),
893
+ "margin-top": em(24, 24),
894
+ "margin-bottom": em(24, 24)
895
+ },
896
+ "blockquote": {
897
+ "margin-top": em(48, 30),
898
+ "margin-bottom": em(48, 30),
899
+ "padding-inline-start": em(32, 30)
900
+ },
901
+ "h1": {
902
+ "font-size": em(56, 20),
903
+ "margin-top": "0",
904
+ "margin-bottom": em(48, 56),
905
+ "line-height": round(56 / 56)
108
906
  },
109
- 'ol[type="I"]': {
110
- "list-style-type": "upper-roman"
907
+ "h2": {
908
+ "font-size": em(36, 20),
909
+ "margin-top": em(56, 36),
910
+ "margin-bottom": em(32, 36),
911
+ "line-height": round(40 / 36)
111
912
  },
112
- 'ol[type="i"]': {
113
- "list-style-type": "lower-roman"
913
+ "h3": {
914
+ "font-size": em(30, 20),
915
+ "margin-top": em(48, 30),
916
+ "margin-bottom": em(20, 30),
917
+ "line-height": round(40 / 30)
114
918
  },
115
- 'ol[type="I" s]': {
116
- "list-style-type": "upper-roman"
919
+ "h4": {
920
+ "margin-top": em(36, 20),
921
+ "margin-bottom": em(12, 20),
922
+ "line-height": round(32 / 20)
117
923
  },
118
- 'ol[type="i" s]': {
119
- "list-style-type": "lower-roman"
924
+ "img": {
925
+ "margin-top": em(40, 20),
926
+ "margin-bottom": em(40, 20)
120
927
  },
121
- 'ol[type="1"]': {
122
- "list-style-type": "decimal"
928
+ "picture": {
929
+ "margin-top": em(40, 20),
930
+ "margin-bottom": em(40, 20)
931
+ },
932
+ "picture > img": {
933
+ "margin-top": "0",
934
+ "margin-bottom": "0"
935
+ },
936
+ "video": {
937
+ "margin-top": em(40, 20),
938
+ "margin-bottom": em(40, 20)
939
+ },
940
+ "kbd": {
941
+ "font-size": em(18, 20),
942
+ "border-radius": rem(5),
943
+ "padding-top": em(5, 20),
944
+ "padding-inline-end": em(8, 20),
945
+ "padding-bottom": em(5, 20),
946
+ "padding-inline-start": em(8, 20)
947
+ },
948
+ "code": {
949
+ "font-size": em(18, 20)
950
+ },
951
+ "h2 code": {
952
+ "font-size": em(31, 36)
953
+ },
954
+ "h3 code": {
955
+ "font-size": em(27, 30)
956
+ },
957
+ "pre": {
958
+ "font-size": em(18, 20),
959
+ "line-height": round(32 / 18),
960
+ "margin-top": em(36, 18),
961
+ "margin-bottom": em(36, 18),
962
+ "border-radius": rem(8),
963
+ "padding-top": em(20, 18),
964
+ "padding-inline-end": em(24, 18),
965
+ "padding-bottom": em(20, 18),
966
+ "padding-inline-start": em(24, 18)
967
+ },
968
+ "ol": {
969
+ "margin-top": em(24, 20),
970
+ "margin-bottom": em(24, 20),
971
+ "padding-inline-start": em(32, 20)
123
972
  },
124
973
  "ul": {
125
- "list-style-type": "disc"
974
+ "margin-top": em(24, 20),
975
+ "margin-bottom": em(24, 20),
976
+ "padding-inline-start": em(32, 20)
977
+ },
978
+ "li": {
979
+ "margin-top": em(12, 20),
980
+ "margin-bottom": em(12, 20)
981
+ },
982
+ "ol > li": {
983
+ "padding-inline-start": em(8, 20)
984
+ },
985
+ "ul > li": {
986
+ "padding-inline-start": em(8, 20)
987
+ },
988
+ "> ul > li p": {
989
+ "margin-top": em(16, 20),
990
+ "margin-bottom": em(16, 20)
991
+ },
992
+ "> ul > li > p:first-child": {
993
+ "margin-top": em(24, 20)
994
+ },
995
+ "> ul > li > p:last-child": {
996
+ "margin-bottom": em(24, 20)
997
+ },
998
+ "> ol > li > p:first-child": {
999
+ "margin-top": em(24, 20)
1000
+ },
1001
+ "> ol > li > p:last-child": {
1002
+ "margin-bottom": em(24, 20)
1003
+ },
1004
+ "ul ul, ul ol, ol ul, ol ol": {
1005
+ "margin-top": em(16, 20),
1006
+ "margin-bottom": em(16, 20)
1007
+ },
1008
+ "dl": {
1009
+ "margin-top": em(24, 20),
1010
+ "margin-bottom": em(24, 20)
126
1011
  },
127
- "ol > li::marker,ul > li::marker,summary::marker": {
128
- color: "var(--un-prose-lists)"
1012
+ "dt": {
1013
+ "margin-top": em(24, 20)
1014
+ },
1015
+ "dd": {
1016
+ "margin-top": em(12, 20),
1017
+ "padding-inline-start": em(32, 20)
129
1018
  },
130
1019
  "hr": {
131
- margin: "2em 0",
132
- border: "1px solid var(--un-prose-hr)"
1020
+ "margin-top": em(56, 20),
1021
+ "margin-bottom": em(56, 20)
1022
+ },
1023
+ "hr + *": {
1024
+ "margin-top": "0"
1025
+ },
1026
+ "h2 + *": {
1027
+ "margin-top": "0"
1028
+ },
1029
+ "h3 + *": {
1030
+ "margin-top": "0"
1031
+ },
1032
+ "h4 + *": {
1033
+ "margin-top": "0"
133
1034
  },
134
1035
  "table": {
135
- "display": "block",
136
- "margin": "1em 0",
137
- "border-collapse": "collapse",
138
- "overflow-x": "auto"
1036
+ "font-size": em(18, 20),
1037
+ "line-height": round(28 / 18)
1038
+ },
1039
+ "thead th": {
1040
+ "padding-inline-end": em(12, 18),
1041
+ "padding-bottom": em(16, 18),
1042
+ "padding-inline-start": em(12, 18)
1043
+ },
1044
+ "thead th:first-child": {
1045
+ "padding-inline-start": "0"
1046
+ },
1047
+ "thead th:last-child": {
1048
+ "padding-inline-end": "0"
1049
+ },
1050
+ "tbody td, tfoot td": {
1051
+ "padding-top": em(16, 18),
1052
+ "padding-inline-end": em(12, 18),
1053
+ "padding-bottom": em(16, 18),
1054
+ "padding-inline-start": em(12, 18)
1055
+ },
1056
+ "tbody td:first-child, tfoot td:first-child": {
1057
+ "padding-inline-start": "0"
1058
+ },
1059
+ "tbody td:last-child, tfoot td:last-child": {
1060
+ "padding-inline-end": "0"
139
1061
  },
140
- "tr:nth-child(2n)": {
141
- background: "var(--un-prose-bg-soft)"
1062
+ "figure": {
1063
+ "margin-top": em(40, 20),
1064
+ "margin-bottom": em(40, 20)
142
1065
  },
143
- "td,th": {
144
- border: "1px solid var(--un-prose-borders)",
145
- padding: ".625em 1em"
1066
+ "figure > *": {
1067
+ "margin-top": "0",
1068
+ "margin-bottom": "0"
146
1069
  },
147
- "abbr": {
148
- cursor: "help"
1070
+ "figcaption": {
1071
+ "font-size": em(18, 20),
1072
+ "line-height": round(28 / 18),
1073
+ "margin-top": em(18, 18)
1074
+ },
1075
+ "> :first-child": {
1076
+ "margin-top": "0"
1077
+ },
1078
+ "> :last-child": {
1079
+ "margin-bottom": "0"
1080
+ }
1081
+ },
1082
+ "2xl": {
1083
+ "font-size": rem(24),
1084
+ "line-height": round(40 / 24),
1085
+ "p": {
1086
+ "margin-top": em(32, 24),
1087
+ "margin-bottom": em(32, 24)
1088
+ },
1089
+ '[class~="lead"]': {
1090
+ "font-size": em(30, 24),
1091
+ "line-height": round(44 / 30),
1092
+ "margin-top": em(32, 30),
1093
+ "margin-bottom": em(32, 30)
1094
+ },
1095
+ "blockquote": {
1096
+ "margin-top": em(64, 36),
1097
+ "margin-bottom": em(64, 36),
1098
+ "padding-inline-start": em(40, 36)
1099
+ },
1100
+ "h1": {
1101
+ "font-size": em(64, 24),
1102
+ "margin-top": "0",
1103
+ "margin-bottom": em(56, 64),
1104
+ "line-height": round(64 / 64)
1105
+ },
1106
+ "h2": {
1107
+ "font-size": em(48, 24),
1108
+ "margin-top": em(72, 48),
1109
+ "margin-bottom": em(40, 48),
1110
+ "line-height": round(52 / 48)
1111
+ },
1112
+ "h3": {
1113
+ "font-size": em(36, 24),
1114
+ "margin-top": em(56, 36),
1115
+ "margin-bottom": em(24, 36),
1116
+ "line-height": round(44 / 36)
1117
+ },
1118
+ "h4": {
1119
+ "margin-top": em(40, 24),
1120
+ "margin-bottom": em(16, 24),
1121
+ "line-height": round(36 / 24)
1122
+ },
1123
+ "img": {
1124
+ "margin-top": em(48, 24),
1125
+ "margin-bottom": em(48, 24)
1126
+ },
1127
+ "picture": {
1128
+ "margin-top": em(48, 24),
1129
+ "margin-bottom": em(48, 24)
1130
+ },
1131
+ "picture > img": {
1132
+ "margin-top": "0",
1133
+ "margin-bottom": "0"
1134
+ },
1135
+ "video": {
1136
+ "margin-top": em(48, 24),
1137
+ "margin-bottom": em(48, 24)
149
1138
  },
150
1139
  "kbd": {
151
- "color": "var(--un-prose-code)",
152
- "border": "1px solid",
153
- "padding": ".25rem .5rem",
154
- "font-size": ".875em",
155
- "border-radius": ".25rem"
156
- },
157
- "details": {
158
- margin: "1em 0",
159
- padding: "1.25rem 1.5rem",
160
- background: "var(--un-prose-bg-soft)"
161
- },
162
- "summary": {
163
- "cursor": "pointer",
164
- "font-weight": "600"
1140
+ "font-size": em(20, 24),
1141
+ "border-radius": rem(6),
1142
+ "padding-top": em(6, 24),
1143
+ "padding-inline-end": em(8, 24),
1144
+ "padding-bottom": em(6, 24),
1145
+ "padding-inline-start": em(8, 24)
1146
+ },
1147
+ "code": {
1148
+ "font-size": em(20, 24)
1149
+ },
1150
+ "h2 code": {
1151
+ "font-size": em(42, 48)
1152
+ },
1153
+ "h3 code": {
1154
+ "font-size": em(32, 36)
1155
+ },
1156
+ "pre": {
1157
+ "font-size": em(20, 24),
1158
+ "line-height": round(36 / 20),
1159
+ "margin-top": em(40, 20),
1160
+ "margin-bottom": em(40, 20),
1161
+ "border-radius": rem(8),
1162
+ "padding-top": em(24, 20),
1163
+ "padding-inline-end": em(32, 20),
1164
+ "padding-bottom": em(24, 20),
1165
+ "padding-inline-start": em(32, 20)
1166
+ },
1167
+ "ol": {
1168
+ "margin-top": em(32, 24),
1169
+ "margin-bottom": em(32, 24),
1170
+ "padding-inline-start": em(38, 24)
1171
+ },
1172
+ "ul": {
1173
+ "margin-top": em(32, 24),
1174
+ "margin-bottom": em(32, 24),
1175
+ "padding-inline-start": em(38, 24)
1176
+ },
1177
+ "li": {
1178
+ "margin-top": em(12, 24),
1179
+ "margin-bottom": em(12, 24)
1180
+ },
1181
+ "ol > li": {
1182
+ "padding-inline-start": em(10, 24)
1183
+ },
1184
+ "ul > li": {
1185
+ "padding-inline-start": em(10, 24)
1186
+ },
1187
+ "> ul > li p": {
1188
+ "margin-top": em(20, 24),
1189
+ "margin-bottom": em(20, 24)
1190
+ },
1191
+ "> ul > li > p:first-child": {
1192
+ "margin-top": em(32, 24)
1193
+ },
1194
+ "> ul > li > p:last-child": {
1195
+ "margin-bottom": em(32, 24)
1196
+ },
1197
+ "> ol > li > p:first-child": {
1198
+ "margin-top": em(32, 24)
1199
+ },
1200
+ "> ol > li > p:last-child": {
1201
+ "margin-bottom": em(32, 24)
1202
+ },
1203
+ "ul ul, ul ol, ol ul, ol ol": {
1204
+ "margin-top": em(16, 24),
1205
+ "margin-bottom": em(16, 24)
1206
+ },
1207
+ "dl": {
1208
+ "margin-top": em(32, 24),
1209
+ "margin-bottom": em(32, 24)
1210
+ },
1211
+ "dt": {
1212
+ "margin-top": em(32, 24)
1213
+ },
1214
+ "dd": {
1215
+ "margin-top": em(12, 24),
1216
+ "padding-inline-start": em(38, 24)
1217
+ },
1218
+ "hr": {
1219
+ "margin-top": em(72, 24),
1220
+ "margin-bottom": em(72, 24)
1221
+ },
1222
+ "hr + *": {
1223
+ "margin-top": "0"
1224
+ },
1225
+ "h2 + *": {
1226
+ "margin-top": "0"
1227
+ },
1228
+ "h3 + *": {
1229
+ "margin-top": "0"
1230
+ },
1231
+ "h4 + *": {
1232
+ "margin-top": "0"
1233
+ },
1234
+ "table": {
1235
+ "font-size": em(20, 24),
1236
+ "line-height": round(28 / 20)
1237
+ },
1238
+ "thead th": {
1239
+ "padding-inline-end": em(12, 20),
1240
+ "padding-bottom": em(16, 20),
1241
+ "padding-inline-start": em(12, 20)
1242
+ },
1243
+ "thead th:first-child": {
1244
+ "padding-inline-start": "0"
1245
+ },
1246
+ "thead th:last-child": {
1247
+ "padding-inline-end": "0"
1248
+ },
1249
+ "tbody td, tfoot td": {
1250
+ "padding-top": em(16, 20),
1251
+ "padding-inline-end": em(12, 20),
1252
+ "padding-bottom": em(16, 20),
1253
+ "padding-inline-start": em(12, 20)
1254
+ },
1255
+ "tbody td:first-child, tfoot td:first-child": {
1256
+ "padding-inline-start": "0"
1257
+ },
1258
+ "tbody td:last-child, tfoot td:last-child": {
1259
+ "padding-inline-end": "0"
1260
+ },
1261
+ "figure": {
1262
+ "margin-top": em(48, 24),
1263
+ "margin-bottom": em(48, 24)
1264
+ },
1265
+ "figure > *": {
1266
+ "margin-top": "0",
1267
+ "margin-bottom": "0"
1268
+ },
1269
+ "figcaption": {
1270
+ "font-size": em(20, 24),
1271
+ "line-height": round(32 / 20),
1272
+ "margin-top": em(20, 20)
1273
+ },
1274
+ "> :first-child": {
1275
+ "margin-top": "0"
1276
+ },
1277
+ "> :last-child": {
1278
+ "margin-bottom": "0"
165
1279
  }
166
- };
1280
+ }
1281
+ };
1282
+
1283
+ function resolveColorScheme(userColorScheme) {
1284
+ const scheme = clone(defaultColorScheme);
1285
+ if (userColorScheme) {
1286
+ for (const key in userColorScheme) {
1287
+ const [color, invertColor] = toArray(userColorScheme[key]);
1288
+ const [defaultColor, defaultInvertColor] = scheme[key];
1289
+ scheme[key] = [color ?? defaultColor, invertColor ?? defaultInvertColor];
1290
+ }
1291
+ }
1292
+ return scheme;
167
1293
  }
168
- const modifiers = [
169
- ["headings", "h1", "h2", "h3", "h4", "h5", "h6", "th"],
170
- ["h1"],
171
- ["h2"],
172
- ["h3"],
173
- ["h4"],
174
- ["h5"],
175
- ["h6"],
176
- ["p"],
177
- ["a"],
178
- ["blockquote"],
179
- ["figure"],
180
- ["figcaption"],
181
- ["strong"],
182
- ["em"],
183
- ["kbd"],
184
- ["code"],
185
- ["pre"],
186
- ["ol"],
187
- ["ul"],
188
- ["li"],
189
- ["table"],
190
- ["thead"],
191
- ["tr"],
192
- ["th"],
193
- ["td"],
194
- ["img"],
195
- ["video"],
196
- ["hr"]
197
- ];
198
- function getElements(modifier) {
199
- for (const [name, ...selectors] of modifiers) {
200
- if (name === modifier)
201
- return selectors.length > 0 ? selectors : [name];
1294
+ function resolveSizeScheme(userSizeScheme) {
1295
+ if (userSizeScheme) {
1296
+ return mergeDeep(ProseDefaultSize, userSizeScheme);
202
1297
  }
1298
+ return ProseDefaultSize;
203
1299
  }
204
-
205
- function getCSS(options) {
1300
+ function getCSS(preflights, options) {
1301
+ const selectorName = options.selectorName || "prose";
1302
+ const notProseSelector = `:not(:where([class~="not-${selectorName}"],[class~="not-${selectorName}"] *))`;
1303
+ const important = options.important === true;
206
1304
  let css = "";
207
- const { escapedSelector, selectorName, preflights, compatibility, important } = options;
208
- const disableNotUtility = compatibility?.noColonNot || compatibility?.noColonWhere;
209
- for (const selector in preflights) {
210
- const cssDeclarationBlock = preflights[selector];
211
- const notProseSelector = `:not(:where(.not-${selectorName},.not-${selectorName} *))`;
212
- const pseudoCSSMatchArray = selector.split(",").map((s) => {
213
- const match = s.match(/:[():\-\w]+$/g);
214
- if (match) {
215
- const matchStr = match[0];
216
- s = s.replace(matchStr, "");
217
- return escapedSelector.map((e) => disableNotUtility ? `${e} ${s}${matchStr}` : `${e} :where(${s})${notProseSelector}${matchStr}`).join(",");
218
- }
219
- return null;
220
- }).filter((v) => v);
221
- if (pseudoCSSMatchArray.length) {
222
- css += pseudoCSSMatchArray.join(",");
1305
+ for (const [selectorOrKey, cssObjectOrValue] of Object.entries(preflights)) {
1306
+ if (typeof cssObjectOrValue !== "object") {
1307
+ css += `${selectorOrKey}:${cssObjectOrValue}${important ? " !important" : ""};`;
223
1308
  } else {
224
- css += escapedSelector.map((e) => disableNotUtility ? selector.split(",").map((s) => `${e} ${s}`).join(",") : `${e} :where(${selector})${notProseSelector}`).join(",");
225
- }
226
- css += "{";
227
- for (const k in cssDeclarationBlock) {
228
- const v = cssDeclarationBlock[k];
229
- css += `${k}:${v}${important ? " !important" : ""};`;
1309
+ const _selector = `:where(${selectorOrKey})${notProseSelector}`;
1310
+ css += `${_selector} {`;
1311
+ for (const [key, value] of Object.entries(cssObjectOrValue)) {
1312
+ css += `${key}:${value}${important ? " !important" : ""};`;
1313
+ }
1314
+ css += `}`;
230
1315
  }
231
- css += "}";
232
1316
  }
233
1317
  return css;
234
1318
  }
235
- function getPreflights(context, options) {
236
- const { compatibility, selectorName, important = false } = options;
237
- const cssExtend = typeof options?.cssExtend === "function" ? options.cssExtend(context.theme) : options?.cssExtend;
238
- let escapedSelector = Array.from(options.escapedSelectors);
239
- if (!escapedSelector[escapedSelector.length - 1].startsWith(".") && !compatibility?.noColonIs)
240
- escapedSelector = [`:is(${escapedSelector[escapedSelector.length - 1]},.${options.selectorName})`];
241
- if (typeof important === "string") {
242
- escapedSelector = escapedSelector.map((e) => !compatibility?.noColonIs ? `:is(${important}) ${e}` : `${important} ${e}`);
1319
+ function getElements(modifier) {
1320
+ for (const [name, ...selectors] of modifiers) {
1321
+ if (name === modifier)
1322
+ return selectors.length > 0 ? selectors : [name];
243
1323
  }
244
- if (cssExtend)
245
- return getCSS({ escapedSelector, selectorName, preflights: mergeDeep(DEFAULT(context), cssExtend), compatibility, important: important === true });
246
- return getCSS({ escapedSelector, selectorName, preflights: DEFAULT(context), compatibility, important: important === true });
247
1324
  }
248
1325
 
249
1326
  const presetTypography = definePreset((options) => {
250
- if (options?.className)
251
- console.warn('[unocss:preset-typography] "className" is deprecated. Please use "selectorName" instead.');
252
- const escapedSelectors = /* @__PURE__ */ new Set();
253
- const selectorName = options?.selectorName || options?.className || "prose";
254
- const selectorNameRE = new RegExp(`^${selectorName}$`);
255
- const colorsRE = new RegExp(`^${selectorName}-([-\\w]+)$`);
256
- const invertRE = new RegExp(`^${selectorName}-invert$`);
1327
+ const selectorName = options?.selectorName ?? "prose";
257
1328
  const disableNotUtility = options?.compatibility?.noColonNot || options?.compatibility?.noColonWhere;
1329
+ const cssVarPrefix = options?.cssVarPrefix ?? "--un-prose";
1330
+ const resolvedColorScheme = resolveColorScheme(options?.colorScheme);
1331
+ const resolvedSizeScheme = resolveSizeScheme(options?.sizeScheme);
1332
+ const extended = (entries, theme) => {
1333
+ const extend = typeof options?.cssExtend === "function" ? options?.cssExtend(theme) : options?.cssExtend;
1334
+ return mergeDeep(entries, extend ?? {});
1335
+ };
1336
+ const normalizeSelector = (s) => {
1337
+ if (typeof options?.important === "string") {
1338
+ s = `${options.important} ${s}`;
1339
+ }
1340
+ if (!options?.compatibility?.noColonIs) {
1341
+ s = `:is(${s})`;
1342
+ }
1343
+ return s;
1344
+ };
1345
+ const defaultRE = new RegExp(`^${selectorName}-default$`);
1346
+ const colorsRE = new RegExp(`^${selectorName}-([-\\w]+)$`);
1347
+ const sizeRE = new RegExp(`^${selectorName}-(${Object.keys(resolvedSizeScheme).join("|")})$`);
258
1348
  return {
259
1349
  name: "@unocss/preset-typography",
260
1350
  enforce: "post",
261
1351
  layers: { typography: -20 },
1352
+ shortcuts: [
1353
+ [
1354
+ selectorName,
1355
+ [`${selectorName}-default`, `${selectorName}-gray`],
1356
+ { layer: "typography" }
1357
+ ]
1358
+ ],
262
1359
  rules: [
263
1360
  [
264
- selectorNameRE,
265
- (_, { rawSelector }) => {
266
- escapedSelectors.add(toEscapedSelector(rawSelector));
267
- return { "color": "var(--un-prose-body)", "max-width": "65ch" };
1361
+ defaultRE,
1362
+ (_, { symbols: symbols2, theme }) => {
1363
+ const entries = extended(mergeDeep(ProseDefaultCSSObject, ProseDefaultSize.base), theme);
1364
+ const css = getCSS(entries, options ?? {});
1365
+ return {
1366
+ [symbols2.body]: css,
1367
+ [symbols2.selector]: normalizeSelector
1368
+ };
268
1369
  },
269
- { layer: "typography" }
1370
+ { layer: "typography", autocomplete: "prose", internal: true }
270
1371
  ],
1372
+ // Colors
271
1373
  [
272
1374
  colorsRE,
273
- ([, color], { theme }) => {
1375
+ ([, color], { theme, symbols: symbols2 }) => {
274
1376
  const baseColor = theme.colors?.[color];
275
- if (baseColor == null)
1377
+ if (!baseColor || typeof baseColor !== "object")
276
1378
  return;
277
- const colorObject = typeof baseColor === "object" ? baseColor : {};
278
- const TagColorMap = {
279
- "body": 700,
280
- "headings": 900,
281
- "links": 900,
282
- "lists": 400,
283
- "hr": 200,
284
- "captions": 500,
285
- "code": 900,
286
- "borders": 200,
287
- "bg-soft": 100,
288
- // invert colors (dark mode)
289
- "invert-body": 200,
290
- "invert-headings": 100,
291
- "invert-links": 100,
292
- "invert-lists": 500,
293
- "invert-hr": 700,
294
- "invert-captions": 400,
295
- "invert-code": 100,
296
- "invert-borders": 700,
297
- "invert-bg-soft": 800
298
- };
299
- const result = {};
300
- for (const key in TagColorMap) {
301
- const value = TagColorMap[key];
302
- const color2 = colorObject[value] ?? baseColor;
303
- let hasAlpha = false;
304
- for (const placeholder of alphaPlaceholders) {
305
- if (color2.includes(placeholder)) {
306
- hasAlpha = true;
307
- result[`--un-prose-${key}-opacity`] = 1;
308
- result[`--un-prose-${key}`] = color2.replace(placeholder, `var(--un-prose-${key}-opacity)`);
309
- break;
1379
+ const ACCENT_COLORS = ["red", "orange", "amber", "yellow", "lime", "green", "emerald", "teal", "cyan", "sky", "blue", "indigo", "violet", "purple", "fuchsia", "pink", "rose"];
1380
+ if (ACCENT_COLORS.includes(color)) {
1381
+ return {
1382
+ [`${cssVarPrefix}-links`]: baseColor["600"],
1383
+ [`${cssVarPrefix}-invert-links`]: baseColor["500"],
1384
+ [symbols2.selector]: normalizeSelector
1385
+ };
1386
+ } else {
1387
+ return Object.entries(resolvedColorScheme).reduce((acc, [key, value]) => {
1388
+ const [colorKey, invertKey] = value;
1389
+ const resolve = (key2) => baseColor[key2] ?? theme[key2] ?? key2;
1390
+ const color2 = resolve(colorKey);
1391
+ const invertColor = resolve(invertKey);
1392
+ const cssVarColorKey = `${cssVarPrefix}-${key}`;
1393
+ const cssVarInvertColorKey = `${cssVarPrefix}-invert-${key}`;
1394
+ acc[cssVarColorKey] = colorToString(color2, `var(${cssVarColorKey}-opacity)`);
1395
+ acc[cssVarInvertColorKey] = colorToString(invertColor, `var(${cssVarInvertColorKey}-opacity)`);
1396
+ for (const [c, k] of [[color2, `${cssVarColorKey}-opacity`], [invertColor, `${cssVarInvertColorKey}-opacity`]]) {
1397
+ if (alphaPlaceholders.some((p) => c.includes(p)))
1398
+ acc[k] = "1";
310
1399
  }
311
- }
312
- if (!hasAlpha)
313
- result[`--un-prose-${key}`] = color2;
1400
+ return acc;
1401
+ }, {
1402
+ [symbols2.selector]: normalizeSelector
1403
+ });
314
1404
  }
315
- return result;
316
1405
  },
317
- { layer: "typography" }
1406
+ { layer: "typography", autocomplete: `${selectorName}-$colors` }
318
1407
  ],
1408
+ // Size
319
1409
  [
320
- invertRE,
321
- () => {
1410
+ sizeRE,
1411
+ ([, size], { symbols: symbols2, theme }) => {
1412
+ const css = getCSS(extended(resolvedSizeScheme[size], theme), options ?? {});
322
1413
  return {
323
- "--un-prose-body": "var(--un-prose-invert-body)",
324
- "--un-prose-headings": "var(--un-prose-invert-headings)",
325
- "--un-prose-links": "var(--un-prose-invert-links)",
326
- "--un-prose-lists": "var(--un-prose-invert-lists)",
327
- "--un-prose-hr": "var(--un-prose-invert-hr)",
328
- "--un-prose-captions": "var(--un-prose-invert-captions)",
329
- "--un-prose-code": "var(--un-prose-invert-code)",
330
- "--un-prose-borders": "var(--un-prose-invert-borders)",
331
- "--un-prose-bg-soft": "var(--un-prose-invert-bg-soft)"
1414
+ [symbols2.body]: css,
1415
+ [symbols2.selector]: (selector) => {
1416
+ if (typeof options?.important === "string") {
1417
+ selector = `${options.important} ${selector}`;
1418
+ }
1419
+ if (!options?.compatibility?.noColonIs) {
1420
+ selector = `:is(${selector})`;
1421
+ }
1422
+ return selector;
1423
+ }
332
1424
  };
333
1425
  },
1426
+ { layer: "typography", autocomplete: `${selectorName}-(${Object.keys(resolvedSizeScheme).join("|")})` }
1427
+ ],
1428
+ // Invert
1429
+ [
1430
+ `${selectorName}-invert`,
1431
+ [
1432
+ {
1433
+ [`${cssVarPrefix}-body`]: `var(${cssVarPrefix}-invert-body)`,
1434
+ [`${cssVarPrefix}-headings`]: `var(${cssVarPrefix}-invert-headings)`,
1435
+ [`${cssVarPrefix}-lead`]: `var(${cssVarPrefix}-invert-lead)`,
1436
+ [`${cssVarPrefix}-links`]: `var(${cssVarPrefix}-invert-links)`,
1437
+ [`${cssVarPrefix}-bold`]: `var(${cssVarPrefix}-invert-bold)`,
1438
+ [`${cssVarPrefix}-counters`]: `var(${cssVarPrefix}-invert-counters)`,
1439
+ [`${cssVarPrefix}-bullets`]: `var(${cssVarPrefix}-invert-bullets)`,
1440
+ [`${cssVarPrefix}-hr`]: `var(${cssVarPrefix}-invert-hr)`,
1441
+ [`${cssVarPrefix}-quotes`]: `var(${cssVarPrefix}-invert-quotes)`,
1442
+ [`${cssVarPrefix}-quote-borders`]: `var(${cssVarPrefix}-invert-quote-borders)`,
1443
+ [`${cssVarPrefix}-captions`]: `var(${cssVarPrefix}-invert-captions)`,
1444
+ [`${cssVarPrefix}-kbd`]: `var(${cssVarPrefix}-invert-kbd)`,
1445
+ [`${cssVarPrefix}-kbd-shadows`]: `var(${cssVarPrefix}-invert-kbd-shadows)`,
1446
+ [`${cssVarPrefix}-code`]: `var(${cssVarPrefix}-invert-code)`,
1447
+ [`${cssVarPrefix}-pre-code`]: `var(${cssVarPrefix}-invert-pre-code)`,
1448
+ [`${cssVarPrefix}-pre-bg`]: `var(${cssVarPrefix}-invert-pre-bg)`,
1449
+ [`${cssVarPrefix}-th-borders`]: `var(${cssVarPrefix}-invert-th-borders)`,
1450
+ [`${cssVarPrefix}-td-borders`]: `var(${cssVarPrefix}-invert-td-borders)`,
1451
+ [symbols.selector]: normalizeSelector
1452
+ }
1453
+ ],
334
1454
  { layer: "typography" }
335
1455
  ]
336
1456
  ],
@@ -347,7 +1467,7 @@ const presetTypography = definePreset((options) => {
347
1467
  return {
348
1468
  matcher: matcher.slice(selectorName.length + modifier.length + 2),
349
1469
  selector: (s) => {
350
- const notProseSelector = `:not(:where(.not-${selectorName},.not-${selectorName} *))`;
1470
+ const notProseSelector = `:not(:where([class~="not-${selectorName}"],[class~="not-${selectorName}"] *))`;
351
1471
  const escapedSelector = disableNotUtility ? elements.map((e) => `${s} ${e}`).join(",") : `${s} :is(:where(${elements})${notProseSelector})`;
352
1472
  return escapedSelector;
353
1473
  }
@@ -355,17 +1475,8 @@ const presetTypography = definePreset((options) => {
355
1475
  }
356
1476
  }
357
1477
  }
358
- }
359
- }
360
- ],
361
- preflights: [
362
- {
363
- layer: "typography",
364
- getCSS: (context) => {
365
- if (escapedSelectors.size > 0) {
366
- return getPreflights(context, { escapedSelectors, ...options, selectorName });
367
- }
368
- }
1478
+ },
1479
+ autocomplete: `${selectorName}-(${modifiers.map((m) => `${m[0]}:`).join("|")})`
369
1480
  }
370
1481
  ]
371
1482
  };