clampography 2.0.0-beta.29 → 2.0.0-beta.30

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.
Files changed (20) hide show
  1. package/README.md +1 -1
  2. package/css/base.css +498 -498
  3. package/css/base.min.css +1 -1
  4. package/css/clampography.css +1020 -1020
  5. package/css/clampography.min.css +1 -1
  6. package/css/extra.css +186 -186
  7. package/css/extra.min.css +1 -1
  8. package/css/figma-tokens.json +53 -55
  9. package/css/forms.css +241 -241
  10. package/css/forms.min.css +1 -1
  11. package/css/kbd.css +24 -24
  12. package/css/theme.css +66 -66
  13. package/css/theme.min.css +1 -1
  14. package/package.json +10 -11
  15. package/src/base.js +12 -12
  16. package/src/convert.js +5 -5
  17. package/src/export-figma.js +55 -9
  18. package/src/extra.js +4 -4
  19. package/src/forms.js +3 -3
  20. package/src/themes.js +26 -26
package/css/base.css CHANGED
@@ -1,501 +1,501 @@
1
1
  @layer base {
2
2
 
3
- :where(:root) {
4
- --spacing-xs: clamp(0.25rem, 0.0833rem + 0.8333vw, 0.75rem);
5
- --spacing-sm: clamp(0.375rem, 0.0833rem + 1.4583vw, 1.25rem);
6
- --spacing-md: clamp(0.5rem, 0.1667rem + 1.6667vw, 1.5rem);
7
- --spacing-lg: clamp(0.75rem, 0.1667rem + 2.9167vw, 2.5rem);
8
- --spacing-xl: clamp(1rem, 0.3333rem + 3.3333vw, 3rem);
9
- --list-indent: clamp(1.5rem, 1.3333rem + 0.8333vw, 2rem);
10
- --scroll-offset: 5rem;
11
- --font-family-base: Inter, system-ui, -apple-system, 'Segoe UI Variable Display', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
12
- --font-family-mono: ui-monospace, 'Cascadia Code', 'Cascadia Mono', 'Segoe UI Mono', 'Ubuntu Mono', SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
13
- --clampography-v-min: 20;
14
- --clampography-v-max: 80;
15
- --clampography-h1-min: 1.875;
16
- --clampography-h1-max: 4;
17
- --clampography-h1-slope: calc((var(--clampography-h1-max) - var(--clampography-h1-min)) / (var(--clampography-v-max) - var(--clampography-v-min)));
18
- --clampography-h1-base: calc(var(--clampography-h1-min) - var(--clampography-h1-slope) * var(--clampography-v-min));
19
- --clampography-h1-size: clamp(calc(var(--clampography-h1-min) * 1rem), calc(var(--clampography-h1-base) * 1rem + var(--clampography-h1-slope) * 100vw), calc(var(--clampography-h1-max) * 1rem));
20
- --clampography-h2-min: 1.25;
21
- --clampography-h2-max: 3;
22
- --clampography-h2-slope: calc((var(--clampography-h2-max) - var(--clampography-h2-min)) / (var(--clampography-v-max) - var(--clampography-v-min)));
23
- --clampography-h2-base: calc(var(--clampography-h2-min) - var(--clampography-h2-slope) * var(--clampography-v-min));
24
- --clampography-h2-size: clamp(calc(var(--clampography-h2-min) * 1rem), calc(var(--clampography-h2-base) * 1rem + var(--clampography-h2-slope) * 100vw), calc(var(--clampography-h2-max) * 1rem));
25
- --clampography-h3-min: 1.125;
26
- --clampography-h3-max: 2.25;
27
- --clampography-h3-slope: calc((var(--clampography-h3-max) - var(--clampography-h3-min)) / (var(--clampography-v-max) - var(--clampography-v-min)));
28
- --clampography-h3-base: calc(var(--clampography-h3-min) - var(--clampography-h3-slope) * var(--clampography-v-min));
29
- --clampography-h3-size: clamp(calc(var(--clampography-h3-min) * 1rem), calc(var(--clampography-h3-base) * 1rem + var(--clampography-h3-slope) * 100vw), calc(var(--clampography-h3-max) * 1rem));
30
- --clampography-h4-min: 1;
31
- --clampography-h4-max: 1.5;
32
- --clampography-h4-slope: calc((var(--clampography-h4-max) - var(--clampography-h4-min)) / (var(--clampography-v-max) - var(--clampography-v-min)));
33
- --clampography-h4-base: calc(var(--clampography-h4-min) - var(--clampography-h4-slope) * var(--clampography-v-min));
34
- --clampography-h4-size: clamp(calc(var(--clampography-h4-min) * 1rem), calc(var(--clampography-h4-base) * 1rem + var(--clampography-h4-slope) * 100vw), calc(var(--clampography-h4-max) * 1rem));
35
- --clampography-h5-min: 1;
36
- --clampography-h5-max: 1;
37
- --clampography-h5-slope: calc((var(--clampography-h5-max) - var(--clampography-h5-min)) / (var(--clampography-v-max) - var(--clampography-v-min)));
38
- --clampography-h5-base: calc(var(--clampography-h5-min) - var(--clampography-h5-slope) * var(--clampography-v-min));
39
- --clampography-h5-size: clamp(calc(var(--clampography-h5-min) * 1rem), calc(var(--clampography-h5-base) * 1rem + var(--clampography-h5-slope) * 100vw), calc(var(--clampography-h5-max) * 1rem));
40
- --clampography-h6-min: 0.875;
41
- --clampography-h6-max: 0.875;
42
- --clampography-h6-slope: calc((var(--clampography-h6-max) - var(--clampography-h6-min)) / (var(--clampography-v-max) - var(--clampography-v-min)));
43
- --clampography-h6-base: calc(var(--clampography-h6-min) - var(--clampography-h6-slope) * var(--clampography-v-min));
44
- --clampography-h6-size: clamp(calc(var(--clampography-h6-min) * 1rem), calc(var(--clampography-h6-base) * 1rem + var(--clampography-h6-slope) * 100vw), calc(var(--clampography-h6-max) * 1rem));
45
- --clampography-heading-scale: 1;
46
- --clampography-h1-scale: var(--clampography-heading-scale);
47
- --clampography-h2-scale: var(--clampography-heading-scale);
48
- --clampography-h3-scale: var(--clampography-heading-scale);
49
- --clampography-h4-scale: var(--clampography-heading-scale);
50
- --clampography-h5-scale: var(--clampography-heading-scale);
51
- --clampography-h6-scale: var(--clampography-heading-scale);
52
- }
53
-
54
- body {
55
- font-size: clamp(0.875rem, 0.7917rem + 0.4167vw, 1.125rem);
56
- line-height: 1.75;
57
- text-rendering: optimizeLegibility;
58
- -webkit-font-smoothing: antialiased;
59
- -moz-osx-font-smoothing: grayscale;
60
- text-wrap: pretty;
61
- }
62
-
63
- :root :where(h1, h2, h3, h4, h5, h6) {
64
- font-weight: 600;
65
- scroll-margin-top: var(--scroll-offset);
66
- }
67
-
68
- :root h1 {
69
- font-size: calc(var(--clampography-h1-size) * var(--clampography-h1-scale));
70
- line-height: 1.1111;
71
- font-weight: 800;
72
- margin-top: 0;
73
- margin-bottom: var(--spacing-xl);
74
- }
75
-
76
- :root h2 {
77
- font-size: calc(var(--clampography-h2-size) * var(--clampography-h2-scale));
78
- line-height: 1.3333;
79
- font-weight: 700;
80
- margin-top: var(--spacing-xl);
81
- margin-bottom: var(--spacing-md);
82
- }
83
-
84
- :root h3 {
85
- font-size: calc(var(--clampography-h3-size) * var(--clampography-h3-scale));
86
- line-height: 1.5;
87
- margin-top: var(--spacing-lg);
88
- margin-bottom: var(--spacing-sm);
89
- }
90
-
91
- :root h4 {
92
- font-size: calc(var(--clampography-h4-size) * var(--clampography-h4-scale));
93
- line-height: 1.5;
94
- margin-top: var(--spacing-lg);
95
- margin-bottom: var(--spacing-sm);
96
- }
97
-
98
- :root h5 {
99
- font-size: calc(var(--clampography-h5-size) * var(--clampography-h5-scale));
100
- line-height: 1.5;
101
- margin-top: var(--spacing-md);
102
- margin-bottom: var(--spacing-xs);
103
- }
104
-
105
- :root h6 {
106
- font-size: calc(var(--clampography-h6-size) * var(--clampography-h6-scale));
107
- line-height: 1.5;
108
- margin-top: var(--spacing-md);
109
- margin-bottom: var(--spacing-xs);
110
- }
111
-
112
- :root :is(h1, h2, h3, h4, h5, h6):first-child {
113
- margin-top: 0;
114
- }
115
-
116
- :root a {
117
- text-decoration-line: underline;
118
- cursor: pointer;
119
- }
120
-
121
- :root :where(h1, h2, h3, h4, h5, h6) a {
122
- text-decoration: none;
123
- }
124
-
125
- :root menu {
126
- list-style: none;
127
- margin-bottom: var(--spacing-md);
128
- padding-left: 0;
129
- }
130
-
131
- :root menu > li::before {
132
- display: none;
133
- }
134
-
135
- :root hgroup {
136
- margin-bottom: var(--spacing-lg);
137
- }
138
-
139
- :root hgroup :where(h1, h2, h3, h4, h5, h6) {
140
- margin-bottom: var(--spacing-xs);
141
- }
142
-
143
- :root hgroup :where(p) {
144
- margin-top: 0;
145
- margin-bottom: 0;
146
- font-size: 0.875em;
147
- font-weight: 400;
148
- line-height: 1.5;
149
- }
150
-
151
- :root p {
152
- line-height: 1.75;
153
- margin-bottom: var(--spacing-md);
154
- }
155
-
156
- :root :where(strong, b) {
157
- font-weight: 700;
158
- }
159
-
160
- :root :where(em, i, cite, var) {
161
- font-style: italic;
162
- }
163
-
164
- :root dfn {
165
- font-style: italic;
166
- font-weight: 600;
167
- }
168
-
169
- :root small {
170
- font-size: 0.875em;
171
- line-height: 1.5;
172
- }
173
-
174
- :root :where(code, kbd, samp) {
175
- font-family: var(--font-family-mono);
176
- font-size: 0.875em;
177
- -webkit-font-smoothing: auto;
178
- -moz-osx-font-smoothing: auto;
179
- }
180
-
181
- :root kbd {
182
- font-weight: 600;
183
- }
184
-
185
- :root data {
186
- font-variant-numeric: tabular-nums;
187
- }
188
-
189
- :root :where(sub, sup) {
190
- font-size: 0.75em;
191
- line-height: 0;
192
- position: relative;
193
- vertical-align: baseline;
194
- }
195
-
196
- :root sup {
197
- top: -0.5em;
198
- }
199
-
200
- :root sub {
201
- bottom: -0.25em;
202
- }
203
-
204
- :root abbr[title] {
205
- text-decoration: underline dotted;
206
- text-underline-offset: 4px;
207
- cursor: help;
208
- }
209
-
210
- :root del {
211
- text-decoration: line-through;
212
- }
213
-
214
- :root ins {
215
- text-decoration: underline;
216
- }
217
-
218
- :root s {
219
- text-decoration: line-through;
220
- }
221
-
222
- :root u {
223
- text-decoration: underline;
224
- }
225
-
226
- :root mark {
227
- font-style: normal;
228
- font-weight: inherit;
229
- }
230
-
231
- :root address {
232
- font-style: italic;
233
- margin-top: var(--spacing-md);
234
- margin-bottom: var(--spacing-md);
235
- }
236
-
237
- :root time {
238
- font-style: normal;
239
- font-variant-numeric: tabular-nums;
240
- }
241
-
242
- :root blockquote {
243
- margin-top: var(--spacing-lg);
244
- margin-bottom: var(--spacing-lg);
245
- padding-left: var(--spacing-md);
246
- }
247
-
248
- :root blockquote blockquote {
249
- margin-top: var(--spacing-sm);
250
- margin-bottom: var(--spacing-sm);
251
- padding-left: var(--spacing-sm);
252
- }
253
-
254
- :root q {
255
- font-style: inherit;
256
- }
257
-
258
- :root :where(ul, ol) {
259
- list-style: none;
260
- margin-bottom: var(--spacing-md);
261
- padding-left: var(--list-indent);
262
- }
263
-
264
- :root li {
265
- position: relative;
266
- }
267
-
268
- :root li + li {
269
- margin-top: var(--spacing-xs);
270
- }
271
-
272
- :root li > :where(p, dl, figure, table, pre) {
273
- margin-top: 0;
274
- margin-bottom: 0;
275
- }
276
-
277
- :root li > blockquote {
278
- margin-top: var(--spacing-sm);
279
- margin-bottom: var(--spacing-sm);
280
- }
281
-
282
- :root li > :where(ul, ol) {
283
- margin-top: var(--spacing-xs);
284
- margin-bottom: 0;
285
- }
286
-
287
- :root ul > li::before {
288
- content: '';
289
- position: absolute;
290
- right: 100%;
291
- margin-right: 0.75em;
292
- top: 0.65em;
293
- width: 0.375em;
294
- height: 0.375em;
295
- background-color: currentColor;
296
- border-radius: 50%;
297
- }
298
-
299
- :root ol {
300
- counter-reset: list-counter;
301
- }
302
-
303
- :root ol > li {
304
- counter-increment: list-counter;
305
- }
306
-
307
- :root ol > li::before {
308
- content: counter(list-counter) '.';
309
- position: absolute;
310
- right: 100%;
311
- margin-right: 0.5em;
312
- font-weight: 600;
313
- font-variant-numeric: tabular-nums;
314
- text-align: right;
315
- color: currentColor;
316
- }
317
-
318
- :root dl {
319
- margin-top: var(--spacing-md);
320
- margin-bottom: var(--spacing-md);
321
- }
322
-
323
- :root dt {
324
- font-weight: 600;
325
- margin-top: var(--spacing-sm);
326
- }
327
-
328
- :root dt:first-child {
329
- margin-top: 0;
330
- }
331
-
332
- :root dd {
333
- margin-left: var(--spacing-md);
334
- }
335
-
336
- :root dt + dd {
337
- margin-top: var(--spacing-xs);
338
- }
339
-
340
- :root dd + dd {
341
- margin-top: var(--spacing-xs);
342
- }
343
-
344
- :root dd:last-child {
345
- margin-bottom: 0;
346
- }
347
-
348
- :root pre {
349
- margin-top: var(--spacing-md);
350
- margin-bottom: var(--spacing-md);
351
- font-family: var(--font-family-mono);
352
- line-height: 1.6;
353
- overflow-x: auto;
354
- -webkit-font-smoothing: auto;
355
- -moz-osx-font-smoothing: auto;
356
- }
357
-
358
- :root pre code {
359
- font-size: inherit;
360
- padding: 0;
361
- background: none;
362
- border-radius: 0;
363
- }
364
-
365
- :root input, :root button, :root textarea, :root select, :root optgroup {
366
- font-family: inherit;
367
- font-size: 100%;
368
- line-height: inherit;
369
- }
370
-
371
- :root textarea {
372
- line-height: 1.5;
373
- }
374
-
375
- :root button, :root [type='button'], :root [type='reset'], :root [type='submit'] {
376
- cursor: pointer;
377
- }
378
-
379
- :root fieldset {
380
- margin-top: var(--spacing-md);
381
- margin-bottom: var(--spacing-md);
382
- padding: var(--spacing-sm);
383
- }
384
-
385
- :root legend {
386
- font-weight: 600;
387
- padding: 0 var(--spacing-xs);
388
- }
389
-
390
- :root label {
391
- display: inline-block;
392
- font-weight: 600;
393
- margin-bottom: var(--spacing-xs);
394
- }
395
-
396
- :root output {
397
- display: inline-block;
398
- font-variant-numeric: tabular-nums;
399
- }
400
-
401
- :root :where(meter, progress) {
402
- display: inline-block;
403
- vertical-align: middle;
404
- }
405
-
406
- :root :where(img, video, canvas, audio, iframe, svg) {
407
- max-width: 100%;
408
- height: auto;
409
- vertical-align: middle;
410
- }
411
-
412
- :root figure {
413
- margin-top: var(--spacing-lg);
414
- margin-bottom: var(--spacing-lg);
415
- }
416
-
417
- :root figcaption {
418
- margin-top: 0.375rem;
419
- font-size: 0.875em;
420
- line-height: 1.5;
421
- }
422
-
423
- :root table {
424
- width: 100%;
425
- margin-top: var(--spacing-md);
426
- margin-bottom: var(--spacing-md);
427
- border-collapse: collapse;
428
- font-size: 1em;
429
- line-height: 1.6;
430
- }
431
-
432
- :root caption {
433
- margin-bottom: var(--spacing-xs);
434
- font-size: 0.875em;
435
- font-weight: 600;
436
- text-align: left;
437
- }
438
-
439
- :root th, :root td {
440
- padding: var(--spacing-xs) var(--spacing-sm);
441
- text-align: left;
442
- }
443
-
444
- :root th {
445
- font-weight: 600;
446
- }
447
-
448
- :root thead th {
449
- vertical-align: bottom;
450
- }
451
-
452
- :root tbody th, :root tbody td {
453
- vertical-align: top;
454
- }
455
-
456
- :root tfoot th, :root tfoot td {
457
- vertical-align: top;
458
- }
459
-
460
- :root tbody + tbody {
461
- border-top-width: 2px;
462
- }
463
-
464
- :root hr {
465
- margin-top: var(--spacing-xl);
466
- margin-bottom: var(--spacing-xl);
467
- border: 0;
468
- border-top: 1px solid;
469
- }
470
-
471
- :root :where(:focus, :focus-visible) {
472
- outline-offset: 2px;
473
- }
474
-
475
- :root details {
476
- margin-top: var(--spacing-md);
477
- margin-bottom: var(--spacing-md);
478
- }
479
-
480
- :root summary {
481
- cursor: pointer;
482
- font-weight: 600;
483
- }
484
-
485
- :root details[open] > summary {
486
- margin-bottom: var(--spacing-xs);
487
- }
488
-
489
- :root dialog {
490
- font-size: inherit;
491
- line-height: inherit;
492
- }
493
-
494
- :root :where(h1, h2, h3, h4, h5, h6, p, ul:not(li > ul, li > ol), ol:not(li > ul, li > ol), dl, blockquote, figure, table, pre):first-child {
495
- margin-top: 0;
496
- }
497
-
498
- :root :where(p, ul, ol, dl, blockquote, figure, table, pre):last-child {
499
- margin-bottom: 0;
500
- }
3
+ :where(:root) {
4
+ --spacing-xs: clamp(0.25rem, 0.0833rem + 0.8333vw, 0.75rem);
5
+ --spacing-sm: clamp(0.375rem, 0.0833rem + 1.4583vw, 1.25rem);
6
+ --spacing-md: clamp(0.5rem, 0.1667rem + 1.6667vw, 1.5rem);
7
+ --spacing-lg: clamp(0.75rem, 0.1667rem + 2.9167vw, 2.5rem);
8
+ --spacing-xl: clamp(1rem, 0.3333rem + 3.3333vw, 3rem);
9
+ --list-indent: clamp(1.5rem, 1.3333rem + 0.8333vw, 2rem);
10
+ --scroll-offset: 5rem;
11
+ --font-family-base: Inter, system-ui, -apple-system, 'Segoe UI Variable Display', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
12
+ --font-family-mono: ui-monospace, 'Cascadia Code', 'Cascadia Mono', 'Segoe UI Mono', 'Ubuntu Mono', SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
13
+ --clampography-v-min: 20;
14
+ --clampography-v-max: 80;
15
+ --clampography-h1-min: 1.875;
16
+ --clampography-h1-max: 4;
17
+ --clampography-h1-slope: calc((var(--clampography-h1-max) - var(--clampography-h1-min)) / (var(--clampography-v-max) - var(--clampography-v-min)));
18
+ --clampography-h1-base: calc(var(--clampography-h1-min) - var(--clampography-h1-slope) * var(--clampography-v-min));
19
+ --clampography-h1-size: clamp(calc(var(--clampography-h1-min) * 1rem), calc(var(--clampography-h1-base) * 1rem + var(--clampography-h1-slope) * 100vw), calc(var(--clampography-h1-max) * 1rem));
20
+ --clampography-h2-min: 1.25;
21
+ --clampography-h2-max: 3;
22
+ --clampography-h2-slope: calc((var(--clampography-h2-max) - var(--clampography-h2-min)) / (var(--clampography-v-max) - var(--clampography-v-min)));
23
+ --clampography-h2-base: calc(var(--clampography-h2-min) - var(--clampography-h2-slope) * var(--clampography-v-min));
24
+ --clampography-h2-size: clamp(calc(var(--clampography-h2-min) * 1rem), calc(var(--clampography-h2-base) * 1rem + var(--clampography-h2-slope) * 100vw), calc(var(--clampography-h2-max) * 1rem));
25
+ --clampography-h3-min: 1.125;
26
+ --clampography-h3-max: 2.25;
27
+ --clampography-h3-slope: calc((var(--clampography-h3-max) - var(--clampography-h3-min)) / (var(--clampography-v-max) - var(--clampography-v-min)));
28
+ --clampography-h3-base: calc(var(--clampography-h3-min) - var(--clampography-h3-slope) * var(--clampography-v-min));
29
+ --clampography-h3-size: clamp(calc(var(--clampography-h3-min) * 1rem), calc(var(--clampography-h3-base) * 1rem + var(--clampography-h3-slope) * 100vw), calc(var(--clampography-h3-max) * 1rem));
30
+ --clampography-h4-min: 1;
31
+ --clampography-h4-max: 1.5;
32
+ --clampography-h4-slope: calc((var(--clampography-h4-max) - var(--clampography-h4-min)) / (var(--clampography-v-max) - var(--clampography-v-min)));
33
+ --clampography-h4-base: calc(var(--clampography-h4-min) - var(--clampography-h4-slope) * var(--clampography-v-min));
34
+ --clampography-h4-size: clamp(calc(var(--clampography-h4-min) * 1rem), calc(var(--clampography-h4-base) * 1rem + var(--clampography-h4-slope) * 100vw), calc(var(--clampography-h4-max) * 1rem));
35
+ --clampography-h5-min: 1;
36
+ --clampography-h5-max: 1;
37
+ --clampography-h5-slope: calc((var(--clampography-h5-max) - var(--clampography-h5-min)) / (var(--clampography-v-max) - var(--clampography-v-min)));
38
+ --clampography-h5-base: calc(var(--clampography-h5-min) - var(--clampography-h5-slope) * var(--clampography-v-min));
39
+ --clampography-h5-size: clamp(calc(var(--clampography-h5-min) * 1rem), calc(var(--clampography-h5-base) * 1rem + var(--clampography-h5-slope) * 100vw), calc(var(--clampography-h5-max) * 1rem));
40
+ --clampography-h6-min: 0.875;
41
+ --clampography-h6-max: 0.875;
42
+ --clampography-h6-slope: calc((var(--clampography-h6-max) - var(--clampography-h6-min)) / (var(--clampography-v-max) - var(--clampography-v-min)));
43
+ --clampography-h6-base: calc(var(--clampography-h6-min) - var(--clampography-h6-slope) * var(--clampography-v-min));
44
+ --clampography-h6-size: clamp(calc(var(--clampography-h6-min) * 1rem), calc(var(--clampography-h6-base) * 1rem + var(--clampography-h6-slope) * 100vw), calc(var(--clampography-h6-max) * 1rem));
45
+ --clampography-heading-scale: 1;
46
+ --clampography-h1-scale: var(--clampography-heading-scale);
47
+ --clampography-h2-scale: var(--clampography-heading-scale);
48
+ --clampography-h3-scale: var(--clampography-heading-scale);
49
+ --clampography-h4-scale: var(--clampography-heading-scale);
50
+ --clampography-h5-scale: var(--clampography-heading-scale);
51
+ --clampography-h6-scale: var(--clampography-heading-scale);
52
+ }
53
+
54
+ body {
55
+ font-size: clamp(0.875rem, 0.7917rem + 0.4167vw, 1.125rem);
56
+ line-height: 1.75;
57
+ text-rendering: optimizeLegibility;
58
+ -webkit-font-smoothing: antialiased;
59
+ -moz-osx-font-smoothing: grayscale;
60
+ text-wrap: pretty;
61
+ }
62
+
63
+ :root :where(h1, h2, h3, h4, h5, h6) {
64
+ font-weight: 600;
65
+ scroll-margin-top: var(--scroll-offset);
66
+ }
67
+
68
+ :root h1 {
69
+ font-size: calc(var(--clampography-h1-size) * var(--clampography-h1-scale));
70
+ line-height: 1.1111;
71
+ font-weight: 800;
72
+ margin-top: 0;
73
+ margin-bottom: var(--spacing-xl);
74
+ }
75
+
76
+ :root h2 {
77
+ font-size: calc(var(--clampography-h2-size) * var(--clampography-h2-scale));
78
+ line-height: 1.3333;
79
+ font-weight: 700;
80
+ margin-top: var(--spacing-xl);
81
+ margin-bottom: var(--spacing-md);
82
+ }
83
+
84
+ :root h3 {
85
+ font-size: calc(var(--clampography-h3-size) * var(--clampography-h3-scale));
86
+ line-height: 1.5;
87
+ margin-top: var(--spacing-lg);
88
+ margin-bottom: var(--spacing-sm);
89
+ }
90
+
91
+ :root h4 {
92
+ font-size: calc(var(--clampography-h4-size) * var(--clampography-h4-scale));
93
+ line-height: 1.5;
94
+ margin-top: var(--spacing-lg);
95
+ margin-bottom: var(--spacing-sm);
96
+ }
97
+
98
+ :root h5 {
99
+ font-size: calc(var(--clampography-h5-size) * var(--clampography-h5-scale));
100
+ line-height: 1.5;
101
+ margin-top: var(--spacing-md);
102
+ margin-bottom: var(--spacing-xs);
103
+ }
104
+
105
+ :root h6 {
106
+ font-size: calc(var(--clampography-h6-size) * var(--clampography-h6-scale));
107
+ line-height: 1.5;
108
+ margin-top: var(--spacing-md);
109
+ margin-bottom: var(--spacing-xs);
110
+ }
111
+
112
+ :root :is(h1, h2, h3, h4, h5, h6):first-child {
113
+ margin-top: 0;
114
+ }
115
+
116
+ :root a {
117
+ text-decoration-line: underline;
118
+ cursor: pointer;
119
+ }
120
+
121
+ :root :where(h1, h2, h3, h4, h5, h6) a {
122
+ text-decoration: none;
123
+ }
124
+
125
+ :root menu {
126
+ list-style: none;
127
+ margin-bottom: var(--spacing-md);
128
+ padding-inline-start: 0;
129
+ }
130
+
131
+ :root menu > li::before {
132
+ display: none;
133
+ }
134
+
135
+ :root hgroup {
136
+ margin-bottom: var(--spacing-lg);
137
+ }
138
+
139
+ :root hgroup :where(h1, h2, h3, h4, h5, h6) {
140
+ margin-bottom: var(--spacing-xs);
141
+ }
142
+
143
+ :root hgroup :where(p) {
144
+ margin-top: 0;
145
+ margin-bottom: 0;
146
+ font-size: 0.875em;
147
+ font-weight: 400;
148
+ line-height: 1.5;
149
+ }
150
+
151
+ :root p {
152
+ line-height: 1.75;
153
+ margin-bottom: var(--spacing-md);
154
+ }
155
+
156
+ :root :where(strong, b) {
157
+ font-weight: 700;
158
+ }
159
+
160
+ :root :where(em, i, cite, var) {
161
+ font-style: italic;
162
+ }
163
+
164
+ :root dfn {
165
+ font-style: italic;
166
+ font-weight: 600;
167
+ }
168
+
169
+ :root small {
170
+ font-size: 0.875em;
171
+ line-height: 1.5;
172
+ }
173
+
174
+ :root :where(code, kbd, samp) {
175
+ font-family: var(--font-family-mono);
176
+ font-size: 0.875em;
177
+ -webkit-font-smoothing: auto;
178
+ -moz-osx-font-smoothing: auto;
179
+ }
180
+
181
+ :root kbd {
182
+ font-weight: 600;
183
+ }
184
+
185
+ :root data {
186
+ font-variant-numeric: tabular-nums;
187
+ }
188
+
189
+ :root :where(sub, sup) {
190
+ font-size: 0.75em;
191
+ line-height: 0;
192
+ position: relative;
193
+ vertical-align: baseline;
194
+ }
195
+
196
+ :root sup {
197
+ top: -0.5em;
198
+ }
199
+
200
+ :root sub {
201
+ bottom: -0.25em;
202
+ }
203
+
204
+ :root abbr[title] {
205
+ text-decoration: underline dotted;
206
+ text-underline-offset: 4px;
207
+ cursor: help;
208
+ }
209
+
210
+ :root del {
211
+ text-decoration: line-through;
212
+ }
213
+
214
+ :root ins {
215
+ text-decoration: underline;
216
+ }
217
+
218
+ :root s {
219
+ text-decoration: line-through;
220
+ }
221
+
222
+ :root u {
223
+ text-decoration: underline;
224
+ }
225
+
226
+ :root mark {
227
+ font-style: normal;
228
+ font-weight: inherit;
229
+ }
230
+
231
+ :root address {
232
+ font-style: italic;
233
+ margin-top: var(--spacing-md);
234
+ margin-bottom: var(--spacing-md);
235
+ }
236
+
237
+ :root time {
238
+ font-style: normal;
239
+ font-variant-numeric: tabular-nums;
240
+ }
241
+
242
+ :root blockquote {
243
+ margin-top: var(--spacing-lg);
244
+ margin-bottom: var(--spacing-lg);
245
+ padding-inline-start: var(--spacing-md);
246
+ }
247
+
248
+ :root blockquote blockquote {
249
+ margin-top: var(--spacing-sm);
250
+ margin-bottom: var(--spacing-sm);
251
+ padding-inline-start: var(--spacing-sm);
252
+ }
253
+
254
+ :root q {
255
+ font-style: inherit;
256
+ }
257
+
258
+ :root :where(ul, ol) {
259
+ list-style: none;
260
+ margin-bottom: var(--spacing-md);
261
+ padding-inline-start: var(--list-indent);
262
+ }
263
+
264
+ :root li {
265
+ position: relative;
266
+ }
267
+
268
+ :root li + li {
269
+ margin-top: var(--spacing-xs);
270
+ }
271
+
272
+ :root li > :where(p, dl, figure, table, pre) {
273
+ margin-top: 0;
274
+ margin-bottom: 0;
275
+ }
276
+
277
+ :root li > blockquote {
278
+ margin-top: var(--spacing-sm);
279
+ margin-bottom: var(--spacing-sm);
280
+ }
281
+
282
+ :root li > :where(ul, ol) {
283
+ margin-top: var(--spacing-xs);
284
+ margin-bottom: 0;
285
+ }
286
+
287
+ :root ul > li::before {
288
+ content: '';
289
+ position: absolute;
290
+ inset-inline-end: 100%;
291
+ margin-inline-end: 0.75em;
292
+ top: 0.65em;
293
+ width: 0.375em;
294
+ height: 0.375em;
295
+ background-color: currentColor;
296
+ border-radius: 50%;
297
+ }
298
+
299
+ :root ol {
300
+ counter-reset: list-counter;
301
+ }
302
+
303
+ :root ol > li {
304
+ counter-increment: list-counter;
305
+ }
306
+
307
+ :root ol > li::before {
308
+ content: counter(list-counter) '.';
309
+ position: absolute;
310
+ inset-inline-end: 100%;
311
+ margin-inline-end: 0.5em;
312
+ font-weight: 600;
313
+ font-variant-numeric: tabular-nums;
314
+ text-align: end;
315
+ color: currentColor;
316
+ }
317
+
318
+ :root dl {
319
+ margin-top: var(--spacing-md);
320
+ margin-bottom: var(--spacing-md);
321
+ }
322
+
323
+ :root dt {
324
+ font-weight: 600;
325
+ margin-top: var(--spacing-sm);
326
+ }
327
+
328
+ :root dt:first-child {
329
+ margin-top: 0;
330
+ }
331
+
332
+ :root dd {
333
+ margin-inline-start: var(--spacing-md);
334
+ }
335
+
336
+ :root dt + dd {
337
+ margin-top: var(--spacing-xs);
338
+ }
339
+
340
+ :root dd + dd {
341
+ margin-top: var(--spacing-xs);
342
+ }
343
+
344
+ :root dd:last-child {
345
+ margin-bottom: 0;
346
+ }
347
+
348
+ :root pre {
349
+ margin-top: var(--spacing-md);
350
+ margin-bottom: var(--spacing-md);
351
+ font-family: var(--font-family-mono);
352
+ line-height: 1.6;
353
+ overflow-x: auto;
354
+ -webkit-font-smoothing: auto;
355
+ -moz-osx-font-smoothing: auto;
356
+ }
357
+
358
+ :root pre code {
359
+ font-size: inherit;
360
+ padding: 0;
361
+ background: none;
362
+ border-radius: 0;
363
+ }
364
+
365
+ :root input, :root button, :root textarea, :root select, :root optgroup {
366
+ font-family: inherit;
367
+ font-size: 100%;
368
+ line-height: inherit;
369
+ }
370
+
371
+ :root textarea {
372
+ line-height: 1.5;
373
+ }
374
+
375
+ :root button, :root [type='button'], :root [type='reset'], :root [type='submit'] {
376
+ cursor: pointer;
377
+ }
378
+
379
+ :root fieldset {
380
+ margin-top: var(--spacing-md);
381
+ margin-bottom: var(--spacing-md);
382
+ padding: var(--spacing-sm);
383
+ }
384
+
385
+ :root legend {
386
+ font-weight: 600;
387
+ padding: 0 var(--spacing-xs);
388
+ }
389
+
390
+ :root label {
391
+ display: inline-block;
392
+ font-weight: 600;
393
+ margin-bottom: var(--spacing-xs);
394
+ }
395
+
396
+ :root output {
397
+ display: inline-block;
398
+ font-variant-numeric: tabular-nums;
399
+ }
400
+
401
+ :root :where(meter, progress) {
402
+ display: inline-block;
403
+ vertical-align: middle;
404
+ }
405
+
406
+ :root :where(img, video, canvas, audio, iframe, svg) {
407
+ max-width: 100%;
408
+ height: auto;
409
+ vertical-align: middle;
410
+ }
411
+
412
+ :root figure {
413
+ margin-top: var(--spacing-lg);
414
+ margin-bottom: var(--spacing-lg);
415
+ }
416
+
417
+ :root figcaption {
418
+ margin-top: 0.375rem;
419
+ font-size: 0.875em;
420
+ line-height: 1.5;
421
+ }
422
+
423
+ :root table {
424
+ width: 100%;
425
+ margin-top: var(--spacing-md);
426
+ margin-bottom: var(--spacing-md);
427
+ border-collapse: collapse;
428
+ font-size: 1em;
429
+ line-height: 1.6;
430
+ }
431
+
432
+ :root caption {
433
+ margin-bottom: var(--spacing-xs);
434
+ font-size: 0.875em;
435
+ font-weight: 600;
436
+ text-align: start;
437
+ }
438
+
439
+ :root th, :root td {
440
+ padding: var(--spacing-xs) var(--spacing-sm);
441
+ text-align: start;
442
+ }
443
+
444
+ :root th {
445
+ font-weight: 600;
446
+ }
447
+
448
+ :root thead th {
449
+ vertical-align: bottom;
450
+ }
451
+
452
+ :root tbody th, :root tbody td {
453
+ vertical-align: top;
454
+ }
455
+
456
+ :root tfoot th, :root tfoot td {
457
+ vertical-align: top;
458
+ }
459
+
460
+ :root tbody + tbody {
461
+ border-top-width: 2px;
462
+ }
463
+
464
+ :root hr {
465
+ margin-top: var(--spacing-xl);
466
+ margin-bottom: var(--spacing-xl);
467
+ border: 0;
468
+ border-top: 1px solid;
469
+ }
470
+
471
+ :root :where(:focus, :focus-visible) {
472
+ outline-offset: 2px;
473
+ }
474
+
475
+ :root details {
476
+ margin-top: var(--spacing-md);
477
+ margin-bottom: var(--spacing-md);
478
+ }
479
+
480
+ :root summary {
481
+ cursor: pointer;
482
+ font-weight: 600;
483
+ }
484
+
485
+ :root details[open] > summary {
486
+ margin-bottom: var(--spacing-xs);
487
+ }
488
+
489
+ :root dialog {
490
+ font-size: inherit;
491
+ line-height: inherit;
492
+ }
493
+
494
+ :root :where(h1, h2, h3, h4, h5, h6, p, ul:not(li > ul, li > ol), ol:not(li > ul, li > ol), dl, blockquote, figure, table, pre):first-child {
495
+ margin-top: 0;
496
+ }
497
+
498
+ :root :where(p, ul, ol, dl, blockquote, figure, table, pre):last-child {
499
+ margin-bottom: 0;
500
+ }
501
501
  }