clampography 2.0.0-beta.16 → 2.0.0-beta.18

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