clampography 2.0.0-beta.26 → 2.0.0-beta.28

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 (14) hide show
  1. package/css/base.css +36 -17
  2. package/css/base.min.css +1 -1
  3. package/css/clampography.css +101 -19
  4. package/css/clampography.min.css +1 -1
  5. package/css/extra.css +65 -2
  6. package/css/extra.min.css +1 -1
  7. package/css/figma-tokens.json +112 -0
  8. package/package.json +7 -8
  9. package/src/base.js +81 -20
  10. package/src/export-figma.js +43 -0
  11. package/src/extra.js +89 -3
  12. package/src/index.js +14 -4
  13. package/src/print.js +92 -0
  14. package/src/themes.js +44 -1409
package/css/base.css CHANGED
@@ -1,17 +1,32 @@
1
1
  @layer base {
2
2
 
3
- :root {
4
- --spacing-xs: clamp(0.25rem, 1.25vw, 0.75rem);
5
- --spacing-sm: clamp(0.375rem, -0.0625rem + 2.1875vw, 1.25rem);
6
- --spacing-md: clamp(0.5rem, 2.5vw, 1.5rem);
7
- --spacing-lg: clamp(0.75rem, -0.125rem + 4.375vw, 2.5rem);
8
- --spacing-xl: clamp(1rem, 5vw, 3rem);
9
- --list-indent: clamp(1.5rem, 1.25rem + 1.25vw, 2rem);
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
10
  --scroll-offset: 5rem;
11
- --font-family-base: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
12
- --font-family-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
13
- font-family: var(--font-family-base);
14
- font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
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-h1-size: clamp(1.875rem, 1.1667rem + 3.5417vw, 4rem);
14
+ --clampography-h2-size: clamp(1.25rem, 0.6667rem + 2.9167vw, 3rem);
15
+ --clampography-h3-size: clamp(1.125rem, 0.75rem + 1.875vw, 2.25rem);
16
+ --clampography-h4-size: clamp(1rem, 0.8333rem + 0.8333vw, 1.5rem);
17
+ --clampography-h5-size: 1rem;
18
+ --clampography-h6-size: 0.875rem;
19
+ --clampography-heading-scale: 1;
20
+ --clampography-h1-scale: var(--clampography-heading-scale);
21
+ --clampography-h2-scale: var(--clampography-heading-scale);
22
+ --clampography-h3-scale: var(--clampography-heading-scale);
23
+ --clampography-h4-scale: var(--clampography-heading-scale);
24
+ --clampography-h5-scale: var(--clampography-heading-scale);
25
+ --clampography-h6-scale: var(--clampography-heading-scale);
26
+ }
27
+
28
+ body {
29
+ font-size: clamp(0.875rem, 0.7917rem + 0.4167vw, 1.125rem);
15
30
  line-height: 1.75;
16
31
  text-rendering: optimizeLegibility;
17
32
  -webkit-font-smoothing: antialiased;
@@ -25,7 +40,7 @@
25
40
  }
26
41
 
27
42
  :root h1 {
28
- font-size: clamp(2.25rem, 1.95rem + 1.5vw, 3rem);
43
+ font-size: calc(var(--clampography-h1-size) * var(--clampography-h1-scale));
29
44
  line-height: 1.1111;
30
45
  font-weight: 800;
31
46
  margin-top: 0;
@@ -33,7 +48,7 @@
33
48
  }
34
49
 
35
50
  :root h2 {
36
- font-size: clamp(1.5rem, 1.35rem + 0.75vw, 1.875rem);
51
+ font-size: calc(var(--clampography-h2-size) * var(--clampography-h2-scale));
37
52
  line-height: 1.3333;
38
53
  font-weight: 700;
39
54
  margin-top: var(--spacing-xl);
@@ -41,28 +56,28 @@
41
56
  }
42
57
 
43
58
  :root h3 {
44
- font-size: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
59
+ font-size: calc(var(--clampography-h3-size) * var(--clampography-h3-scale));
45
60
  line-height: 1.5;
46
61
  margin-top: var(--spacing-lg);
47
62
  margin-bottom: var(--spacing-sm);
48
63
  }
49
64
 
50
65
  :root h4 {
51
- font-size: clamp(1rem, 0.975rem + 0.125vw, 1.125rem);
66
+ font-size: calc(var(--clampography-h4-size) * var(--clampography-h4-scale));
52
67
  line-height: 1.5;
53
68
  margin-top: var(--spacing-lg);
54
69
  margin-bottom: var(--spacing-sm);
55
70
  }
56
71
 
57
72
  :root h5 {
58
- font-size: 1rem;
73
+ font-size: calc(var(--clampography-h5-size) * var(--clampography-h5-scale));
59
74
  line-height: 1.5;
60
75
  margin-top: var(--spacing-md);
61
76
  margin-bottom: var(--spacing-xs);
62
77
  }
63
78
 
64
79
  :root h6 {
65
- font-size: 0.875rem;
80
+ font-size: calc(var(--clampography-h6-size) * var(--clampography-h6-scale));
66
81
  line-height: 1.5;
67
82
  margin-top: var(--spacing-md);
68
83
  margin-bottom: var(--spacing-xs);
@@ -133,6 +148,8 @@
133
148
  :root :where(code, kbd, samp) {
134
149
  font-family: var(--font-family-mono);
135
150
  font-size: 0.875em;
151
+ -webkit-font-smoothing: auto;
152
+ -moz-osx-font-smoothing: auto;
136
153
  }
137
154
 
138
155
  :root kbd {
@@ -308,6 +325,8 @@
308
325
  font-family: var(--font-family-mono);
309
326
  line-height: 1.6;
310
327
  overflow-x: auto;
328
+ -webkit-font-smoothing: auto;
329
+ -moz-osx-font-smoothing: auto;
311
330
  }
312
331
 
313
332
  :root pre code {
package/css/base.min.css CHANGED
@@ -1 +1 @@
1
- @layer base{:root{--spacing-xs:clamp(0.25rem, 1.25vw, 0.75rem);--spacing-sm:clamp(0.375rem, -0.0625rem + 2.1875vw, 1.25rem);--spacing-md:clamp(0.5rem, 2.5vw, 1.5rem);--spacing-lg:clamp(0.75rem, -0.125rem + 4.375vw, 2.5rem);--spacing-xl:clamp(1rem, 5vw, 3rem);--list-indent:clamp(1.5rem, 1.25rem + 1.25vw, 2rem);--scroll-offset:5rem;--font-family-base:system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;--font-family-mono:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;font-family:var(--font-family-base);font-size:clamp(1rem, 0.95rem + 0.25vw, 1.125rem);line-height:1.75;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-wrap:pretty}:root :where(h1, h2, h3, h4, h5, h6){font-weight:600;scroll-margin-top:var(--scroll-offset)}:root h1{font-size:clamp(2.25rem, 1.95rem + 1.5vw, 3rem);line-height:1.1111;font-weight:800;margin-top:0;margin-bottom:var(--spacing-xl)}:root h2{font-size:clamp(1.5rem, 1.35rem + 0.75vw, 1.875rem);line-height:1.3333;font-weight:700;margin-top:var(--spacing-xl);margin-bottom:var(--spacing-md)}:root h3{font-size:clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);line-height:1.5;margin-top:var(--spacing-lg);margin-bottom:var(--spacing-sm)}:root h4{font-size:clamp(1rem, 0.975rem + 0.125vw, 1.125rem);line-height:1.5;margin-top:var(--spacing-lg);margin-bottom:var(--spacing-sm)}:root h5{font-size:1rem;line-height:1.5;margin-top:var(--spacing-md);margin-bottom:var(--spacing-xs)}:root h6{font-size:0.875rem;line-height:1.5;margin-top:var(--spacing-md);margin-bottom:var(--spacing-xs)}:root :is(h1, h2, h3, h4, h5, h6):first-child{margin-top:0}:root a{text-decoration-line:underline;cursor:pointer}:root :where(h1, h2, h3, h4, h5, h6) a{text-decoration:none}:root menu{list-style:none;margin-bottom:var(--spacing-md);padding-left:0}:root menu > li::before{display:none}:root hgroup{margin-bottom:var(--spacing-lg)}:root hgroup :where(h1, h2, h3, h4, h5, h6){margin-bottom:var(--spacing-xs)}:root hgroup :where(p){margin-top:0;margin-bottom:0;font-size:0.875em;font-weight:400;line-height:1.5}:root p{line-height:1.75;margin-bottom:var(--spacing-md)}:root :where(strong, b){font-weight:700}:root :where(em, i, cite, var){font-style:italic}:root dfn{font-style:italic;font-weight:600}:root small{font-size:0.875em;line-height:1.5}:root :where(code, kbd, samp){font-family:var(--font-family-mono);font-size:0.875em}:root kbd{font-weight:600}:root data{font-variant-numeric:tabular-nums}:root :where(sub, sup){font-size:0.75em;line-height:0;position:relative;vertical-align:baseline}:root sup{top:-0.5em}:root sub{bottom:-0.25em}:root abbr[title]{text-decoration:underline dotted;text-underline-offset:4px;cursor:help}:root del{text-decoration:line-through}:root ins{text-decoration:underline}:root s{text-decoration:line-through}:root u{text-decoration:underline}:root mark{font-style:normal;font-weight:inherit}:root address{font-style:italic;margin-top:var(--spacing-md);margin-bottom:var(--spacing-md)}:root time{font-style:normal;font-variant-numeric:tabular-nums}:root blockquote{margin-top:var(--spacing-lg);margin-bottom:var(--spacing-lg);padding-left:var(--spacing-md)}:root blockquote blockquote{margin-top:var(--spacing-sm);margin-bottom:var(--spacing-sm);padding-left:var(--spacing-sm)}:root q{font-style:inherit}:root :where(ul, ol){list-style:none;margin-bottom:var(--spacing-md);padding-left:var(--list-indent)}:root li{position:relative}:root li + li{margin-top:var(--spacing-xs)}:root li > :where(p, dl, figure, table, pre){margin-top:0;margin-bottom:0}:root li > blockquote{margin-top:var(--spacing-sm);margin-bottom:var(--spacing-sm)}:root li > :where(ul, ol){margin-top:var(--spacing-xs);margin-bottom:0}:root ul > li::before{content:'';position:absolute;right:100%;margin-right:0.75em;top:0.65em;width:0.375em;height:0.375em;background-color:currentColor;border-radius:50%}:root ol{counter-reset:list-counter}:root ol > li{counter-increment:list-counter}:root ol > li::before{content:counter(list-counter) '.';position:absolute;right:100%;margin-right:0.5em;font-weight:600;font-variant-numeric:tabular-nums;text-align:right;color:currentColor}:root dl{margin-top:var(--spacing-md);margin-bottom:var(--spacing-md)}:root dt{font-weight:600;margin-top:var(--spacing-sm)}:root dt:first-child{margin-top:0}:root dd{margin-left:var(--spacing-md)}:root dt + dd{margin-top:var(--spacing-xs)}:root dd + dd{margin-top:var(--spacing-xs)}:root dd:last-child{margin-bottom:0}:root pre{margin-top:var(--spacing-md);margin-bottom:var(--spacing-md);font-family:var(--font-family-mono);line-height:1.6;overflow-x:auto}:root pre code{font-size:inherit;padding:0;background:none;border-radius:0}:root input, :root button, :root textarea, :root select, :root optgroup{font-family:inherit;font-size:100%;line-height:inherit}:root textarea{line-height:1.5}:root button, :root [type='button'], :root [type='reset'], :root [type='submit']{cursor:pointer}:root fieldset{margin-top:var(--spacing-md);margin-bottom:var(--spacing-md);padding:var(--spacing-sm)}:root legend{font-weight:600;padding:0 var(--spacing-xs)}:root label{display:inline-block;font-weight:600;margin-bottom:var(--spacing-xs)}:root output{display:inline-block;font-variant-numeric:tabular-nums}:root :where(meter, progress){display:inline-block;vertical-align:middle}:root :where(img, video, canvas, audio, iframe, svg){max-width:100%;height:auto;vertical-align:middle}:root figure{margin-top:var(--spacing-lg);margin-bottom:var(--spacing-lg)}:root figcaption{margin-top:0.375rem;font-size:0.875em;line-height:1.5}:root table{width:100%;margin-top:var(--spacing-md);margin-bottom:var(--spacing-md);border-collapse:collapse;font-size:1em;line-height:1.6}:root caption{margin-bottom:var(--spacing-xs);font-size:0.875em;font-weight:600;text-align:left}:root th, :root td{padding:var(--spacing-xs) var(--spacing-sm);text-align:left}:root th{font-weight:600}:root thead th{vertical-align:bottom}:root tbody th, :root tbody td{vertical-align:top}:root tfoot th, :root tfoot td{vertical-align:top}:root tbody + tbody{border-top-width:2px}:root hr{margin-top:var(--spacing-xl);margin-bottom:var(--spacing-xl);border:0;border-top:1px solid}:root :where(:focus, :focus-visible){outline-offset:2px}:root details{margin-top:var(--spacing-md);margin-bottom:var(--spacing-md)}:root summary{cursor:pointer;font-weight:600}:root details[open] > summary{margin-bottom:var(--spacing-xs)}:root dialog{font-size:inherit;line-height:inherit}: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{margin-top:0}:root :where(p, ul, ol, dl, blockquote, figure, table, pre):last-child{margin-bottom:0}}
1
+ @layer base{:where(:root){--spacing-xs:clamp(0.25rem, 0.0833rem + 0.8333vw, 0.75rem);--spacing-sm:clamp(0.375rem, 0.0833rem + 1.4583vw, 1.25rem);--spacing-md:clamp(0.5rem, 0.1667rem + 1.6667vw, 1.5rem);--spacing-lg:clamp(0.75rem, 0.1667rem + 2.9167vw, 2.5rem);--spacing-xl:clamp(1rem, 0.3333rem + 3.3333vw, 3rem);--list-indent:clamp(1.5rem, 1.3333rem + 0.8333vw, 2rem);--scroll-offset:5rem;--font-family-base:Inter, system-ui, -apple-system, 'Segoe UI Variable Display', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;--font-family-mono:ui-monospace, 'Cascadia Code', 'Cascadia Mono', 'Segoe UI Mono', 'Ubuntu Mono', SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;--clampography-h1-size:clamp(1.875rem, 1.1667rem + 3.5417vw, 4rem);--clampography-h2-size:clamp(1.25rem, 0.6667rem + 2.9167vw, 3rem);--clampography-h3-size:clamp(1.125rem, 0.75rem + 1.875vw, 2.25rem);--clampography-h4-size:clamp(1rem, 0.8333rem + 0.8333vw, 1.5rem);--clampography-h5-size:1rem;--clampography-h6-size:0.875rem;--clampography-heading-scale:1;--clampography-h1-scale:var(--clampography-heading-scale);--clampography-h2-scale:var(--clampography-heading-scale);--clampography-h3-scale:var(--clampography-heading-scale);--clampography-h4-scale:var(--clampography-heading-scale);--clampography-h5-scale:var(--clampography-heading-scale);--clampography-h6-scale:var(--clampography-heading-scale)}body{font-size:clamp(0.875rem, 0.7917rem + 0.4167vw, 1.125rem);line-height:1.75;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-wrap:pretty}:root :where(h1, h2, h3, h4, h5, h6){font-weight:600;scroll-margin-top:var(--scroll-offset)}:root h1{font-size:calc(var(--clampography-h1-size) * var(--clampography-h1-scale));line-height:1.1111;font-weight:800;margin-top:0;margin-bottom:var(--spacing-xl)}:root h2{font-size:calc(var(--clampography-h2-size) * var(--clampography-h2-scale));line-height:1.3333;font-weight:700;margin-top:var(--spacing-xl);margin-bottom:var(--spacing-md)}:root h3{font-size:calc(var(--clampography-h3-size) * var(--clampography-h3-scale));line-height:1.5;margin-top:var(--spacing-lg);margin-bottom:var(--spacing-sm)}:root h4{font-size:calc(var(--clampography-h4-size) * var(--clampography-h4-scale));line-height:1.5;margin-top:var(--spacing-lg);margin-bottom:var(--spacing-sm)}:root h5{font-size:calc(var(--clampography-h5-size) * var(--clampography-h5-scale));line-height:1.5;margin-top:var(--spacing-md);margin-bottom:var(--spacing-xs)}:root h6{font-size:calc(var(--clampography-h6-size) * var(--clampography-h6-scale));line-height:1.5;margin-top:var(--spacing-md);margin-bottom:var(--spacing-xs)}:root :is(h1, h2, h3, h4, h5, h6):first-child{margin-top:0}:root a{text-decoration-line:underline;cursor:pointer}:root :where(h1, h2, h3, h4, h5, h6) a{text-decoration:none}:root menu{list-style:none;margin-bottom:var(--spacing-md);padding-left:0}:root menu > li::before{display:none}:root hgroup{margin-bottom:var(--spacing-lg)}:root hgroup :where(h1, h2, h3, h4, h5, h6){margin-bottom:var(--spacing-xs)}:root hgroup :where(p){margin-top:0;margin-bottom:0;font-size:0.875em;font-weight:400;line-height:1.5}:root p{line-height:1.75;margin-bottom:var(--spacing-md)}:root :where(strong, b){font-weight:700}:root :where(em, i, cite, var){font-style:italic}:root dfn{font-style:italic;font-weight:600}:root small{font-size:0.875em;line-height:1.5}:root :where(code, kbd, samp){font-family:var(--font-family-mono);font-size:0.875em;-webkit-font-smoothing:auto;-moz-osx-font-smoothing:auto}:root kbd{font-weight:600}:root data{font-variant-numeric:tabular-nums}:root :where(sub, sup){font-size:0.75em;line-height:0;position:relative;vertical-align:baseline}:root sup{top:-0.5em}:root sub{bottom:-0.25em}:root abbr[title]{text-decoration:underline dotted;text-underline-offset:4px;cursor:help}:root del{text-decoration:line-through}:root ins{text-decoration:underline}:root s{text-decoration:line-through}:root u{text-decoration:underline}:root mark{font-style:normal;font-weight:inherit}:root address{font-style:italic;margin-top:var(--spacing-md);margin-bottom:var(--spacing-md)}:root time{font-style:normal;font-variant-numeric:tabular-nums}:root blockquote{margin-top:var(--spacing-lg);margin-bottom:var(--spacing-lg);padding-left:var(--spacing-md)}:root blockquote blockquote{margin-top:var(--spacing-sm);margin-bottom:var(--spacing-sm);padding-left:var(--spacing-sm)}:root q{font-style:inherit}:root :where(ul, ol){list-style:none;margin-bottom:var(--spacing-md);padding-left:var(--list-indent)}:root li{position:relative}:root li + li{margin-top:var(--spacing-xs)}:root li > :where(p, dl, figure, table, pre){margin-top:0;margin-bottom:0}:root li > blockquote{margin-top:var(--spacing-sm);margin-bottom:var(--spacing-sm)}:root li > :where(ul, ol){margin-top:var(--spacing-xs);margin-bottom:0}:root ul > li::before{content:'';position:absolute;right:100%;margin-right:0.75em;top:0.65em;width:0.375em;height:0.375em;background-color:currentColor;border-radius:50%}:root ol{counter-reset:list-counter}:root ol > li{counter-increment:list-counter}:root ol > li::before{content:counter(list-counter) '.';position:absolute;right:100%;margin-right:0.5em;font-weight:600;font-variant-numeric:tabular-nums;text-align:right;color:currentColor}:root dl{margin-top:var(--spacing-md);margin-bottom:var(--spacing-md)}:root dt{font-weight:600;margin-top:var(--spacing-sm)}:root dt:first-child{margin-top:0}:root dd{margin-left:var(--spacing-md)}:root dt + dd{margin-top:var(--spacing-xs)}:root dd + dd{margin-top:var(--spacing-xs)}:root dd:last-child{margin-bottom:0}:root pre{margin-top:var(--spacing-md);margin-bottom:var(--spacing-md);font-family:var(--font-family-mono);line-height:1.6;overflow-x:auto;-webkit-font-smoothing:auto;-moz-osx-font-smoothing:auto}:root pre code{font-size:inherit;padding:0;background:none;border-radius:0}:root input, :root button, :root textarea, :root select, :root optgroup{font-family:inherit;font-size:100%;line-height:inherit}:root textarea{line-height:1.5}:root button, :root [type='button'], :root [type='reset'], :root [type='submit']{cursor:pointer}:root fieldset{margin-top:var(--spacing-md);margin-bottom:var(--spacing-md);padding:var(--spacing-sm)}:root legend{font-weight:600;padding:0 var(--spacing-xs)}:root label{display:inline-block;font-weight:600;margin-bottom:var(--spacing-xs)}:root output{display:inline-block;font-variant-numeric:tabular-nums}:root :where(meter, progress){display:inline-block;vertical-align:middle}:root :where(img, video, canvas, audio, iframe, svg){max-width:100%;height:auto;vertical-align:middle}:root figure{margin-top:var(--spacing-lg);margin-bottom:var(--spacing-lg)}:root figcaption{margin-top:0.375rem;font-size:0.875em;line-height:1.5}:root table{width:100%;margin-top:var(--spacing-md);margin-bottom:var(--spacing-md);border-collapse:collapse;font-size:1em;line-height:1.6}:root caption{margin-bottom:var(--spacing-xs);font-size:0.875em;font-weight:600;text-align:left}:root th, :root td{padding:var(--spacing-xs) var(--spacing-sm);text-align:left}:root th{font-weight:600}:root thead th{vertical-align:bottom}:root tbody th, :root tbody td{vertical-align:top}:root tfoot th, :root tfoot td{vertical-align:top}:root tbody + tbody{border-top-width:2px}:root hr{margin-top:var(--spacing-xl);margin-bottom:var(--spacing-xl);border:0;border-top:1px solid}:root :where(:focus, :focus-visible){outline-offset:2px}:root details{margin-top:var(--spacing-md);margin-bottom:var(--spacing-md)}:root summary{cursor:pointer;font-weight:600}:root details[open] > summary{margin-bottom:var(--spacing-xs)}:root dialog{font-size:inherit;line-height:inherit}: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{margin-top:0}:root :where(p, ul, ol, dl, blockquote, figure, table, pre):last-child{margin-bottom:0}}
package/css/clampography.css CHANGED
@@ -6,18 +6,33 @@
6
6
  /* --- base.js --- */
7
7
  @layer base {
8
8
 
9
- :root {
10
- --spacing-xs: clamp(0.25rem, 1.25vw, 0.75rem);
11
- --spacing-sm: clamp(0.375rem, -0.0625rem + 2.1875vw, 1.25rem);
12
- --spacing-md: clamp(0.5rem, 2.5vw, 1.5rem);
13
- --spacing-lg: clamp(0.75rem, -0.125rem + 4.375vw, 2.5rem);
14
- --spacing-xl: clamp(1rem, 5vw, 3rem);
15
- --list-indent: clamp(1.5rem, 1.25rem + 1.25vw, 2rem);
9
+ :where(:root) {
10
+ --spacing-xs: clamp(0.25rem, 0.0833rem + 0.8333vw, 0.75rem);
11
+ --spacing-sm: clamp(0.375rem, 0.0833rem + 1.4583vw, 1.25rem);
12
+ --spacing-md: clamp(0.5rem, 0.1667rem + 1.6667vw, 1.5rem);
13
+ --spacing-lg: clamp(0.75rem, 0.1667rem + 2.9167vw, 2.5rem);
14
+ --spacing-xl: clamp(1rem, 0.3333rem + 3.3333vw, 3rem);
15
+ --list-indent: clamp(1.5rem, 1.3333rem + 0.8333vw, 2rem);
16
16
  --scroll-offset: 5rem;
17
- --font-family-base: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
18
- --font-family-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
19
- font-family: var(--font-family-base);
20
- font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
17
+ --font-family-base: Inter, system-ui, -apple-system, 'Segoe UI Variable Display', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
18
+ --font-family-mono: ui-monospace, 'Cascadia Code', 'Cascadia Mono', 'Segoe UI Mono', 'Ubuntu Mono', SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
19
+ --clampography-h1-size: clamp(1.875rem, 1.1667rem + 3.5417vw, 4rem);
20
+ --clampography-h2-size: clamp(1.25rem, 0.6667rem + 2.9167vw, 3rem);
21
+ --clampography-h3-size: clamp(1.125rem, 0.75rem + 1.875vw, 2.25rem);
22
+ --clampography-h4-size: clamp(1rem, 0.8333rem + 0.8333vw, 1.5rem);
23
+ --clampography-h5-size: 1rem;
24
+ --clampography-h6-size: 0.875rem;
25
+ --clampography-heading-scale: 1;
26
+ --clampography-h1-scale: var(--clampography-heading-scale);
27
+ --clampography-h2-scale: var(--clampography-heading-scale);
28
+ --clampography-h3-scale: var(--clampography-heading-scale);
29
+ --clampography-h4-scale: var(--clampography-heading-scale);
30
+ --clampography-h5-scale: var(--clampography-heading-scale);
31
+ --clampography-h6-scale: var(--clampography-heading-scale);
32
+ }
33
+
34
+ body {
35
+ font-size: clamp(0.875rem, 0.7917rem + 0.4167vw, 1.125rem);
21
36
  line-height: 1.75;
22
37
  text-rendering: optimizeLegibility;
23
38
  -webkit-font-smoothing: antialiased;
@@ -31,7 +46,7 @@
31
46
  }
32
47
 
33
48
  :root h1 {
34
- font-size: clamp(2.25rem, 1.95rem + 1.5vw, 3rem);
49
+ font-size: calc(var(--clampography-h1-size) * var(--clampography-h1-scale));
35
50
  line-height: 1.1111;
36
51
  font-weight: 800;
37
52
  margin-top: 0;
@@ -39,7 +54,7 @@
39
54
  }
40
55
 
41
56
  :root h2 {
42
- font-size: clamp(1.5rem, 1.35rem + 0.75vw, 1.875rem);
57
+ font-size: calc(var(--clampography-h2-size) * var(--clampography-h2-scale));
43
58
  line-height: 1.3333;
44
59
  font-weight: 700;
45
60
  margin-top: var(--spacing-xl);
@@ -47,28 +62,28 @@
47
62
  }
48
63
 
49
64
  :root h3 {
50
- font-size: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
65
+ font-size: calc(var(--clampography-h3-size) * var(--clampography-h3-scale));
51
66
  line-height: 1.5;
52
67
  margin-top: var(--spacing-lg);
53
68
  margin-bottom: var(--spacing-sm);
54
69
  }
55
70
 
56
71
  :root h4 {
57
- font-size: clamp(1rem, 0.975rem + 0.125vw, 1.125rem);
72
+ font-size: calc(var(--clampography-h4-size) * var(--clampography-h4-scale));
58
73
  line-height: 1.5;
59
74
  margin-top: var(--spacing-lg);
60
75
  margin-bottom: var(--spacing-sm);
61
76
  }
62
77
 
63
78
  :root h5 {
64
- font-size: 1rem;
79
+ font-size: calc(var(--clampography-h5-size) * var(--clampography-h5-scale));
65
80
  line-height: 1.5;
66
81
  margin-top: var(--spacing-md);
67
82
  margin-bottom: var(--spacing-xs);
68
83
  }
69
84
 
70
85
  :root h6 {
71
- font-size: 0.875rem;
86
+ font-size: calc(var(--clampography-h6-size) * var(--clampography-h6-scale));
72
87
  line-height: 1.5;
73
88
  margin-top: var(--spacing-md);
74
89
  margin-bottom: var(--spacing-xs);
@@ -139,6 +154,8 @@
139
154
  :root :where(code, kbd, samp) {
140
155
  font-family: var(--font-family-mono);
141
156
  font-size: 0.875em;
157
+ -webkit-font-smoothing: auto;
158
+ -moz-osx-font-smoothing: auto;
142
159
  }
143
160
 
144
161
  :root kbd {
@@ -314,6 +331,8 @@
314
331
  font-family: var(--font-family-mono);
315
332
  line-height: 1.6;
316
333
  overflow-x: auto;
334
+ -webkit-font-smoothing: auto;
335
+ -moz-osx-font-smoothing: auto;
317
336
  }
318
337
 
319
338
  :root pre code {
@@ -556,9 +575,17 @@
556
575
  /* --- extra.js --- */
557
576
  @layer base {
558
577
 
559
- :root {
578
+ :where(:root) {
579
+ --clampography-transition-duration: 200ms;
580
+ }
581
+
582
+ body {
560
583
  background-color: var(--clampography-background);
561
584
  color: var(--clampography-text);
585
+ font-family: var(--font-sans, var(--font-family-base));
586
+ transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
587
+ transition-duration: var(--clampography-transition-duration, 200ms);
588
+ transition-timing-function: ease;
562
589
  }
563
590
 
564
591
  :root :where(h1, h2, h3, h4, h5, h6) {
@@ -660,7 +687,7 @@
660
687
  }
661
688
 
662
689
  :root del {
663
- text-decoration-color: var(--clampography-secondary);
690
+ text-decoration-color: var(--clampography-error);
664
691
  text-decoration-thickness: 2px;
665
692
  }
666
693
 
@@ -679,6 +706,61 @@
679
706
  border-bottom-width: 1px;
680
707
  padding-bottom: var(--spacing-sm);
681
708
  }
709
+
710
+ @media (prefers-reduced-motion: reduce) {
711
+
712
+ body {
713
+ transition: none;
714
+ --clampography-transition-duration: 0ms;
715
+ }
716
+ }
717
+
718
+ @media (prefers-contrast: more) {
719
+
720
+ body {
721
+ background-color: white;
722
+ color: black;
723
+ }
724
+
725
+ :root :where(h1, h2, h3, h4, h5, h6) {
726
+ color: black;
727
+ }
728
+
729
+ :root a {
730
+ color: black;
731
+ text-decoration: underline;
732
+ text-decoration-thickness: 2px;
733
+ font-weight: 700;
734
+ }
735
+
736
+ :root :where(code:not(pre code), kbd, samp) {
737
+ background-color: #f0f0f0;
738
+ color: black;
739
+ border: 2px solid black;
740
+ }
741
+
742
+ :root pre {
743
+ background-color: #f0f0f0;
744
+ color: black;
745
+ border: 2px solid black;
746
+ }
747
+
748
+ :root blockquote {
749
+ background-color: #f0f0f0;
750
+ border-left-color: black;
751
+ border-left-width: 6px;
752
+ color: black;
753
+ }
754
+
755
+ :root th, :root td {
756
+ border: 2px solid black;
757
+ }
758
+
759
+ :root hr {
760
+ background-color: black;
761
+ height: 2px;
762
+ }
763
+ }
682
764
  }
683
765
 
684
766
  /* --- forms.js --- */
package/css/clampography.min.css CHANGED
@@ -1 +1 @@
1
- @layer base{:root{--spacing-xs:clamp(0.25rem, 1.25vw, 0.75rem);--spacing-sm:clamp(0.375rem, -0.0625rem + 2.1875vw, 1.25rem);--spacing-md:clamp(0.5rem, 2.5vw, 1.5rem);--spacing-lg:clamp(0.75rem, -0.125rem + 4.375vw, 2.5rem);--spacing-xl:clamp(1rem, 5vw, 3rem);--list-indent:clamp(1.5rem, 1.25rem + 1.25vw, 2rem);--scroll-offset:5rem;--font-family-base:system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;--font-family-mono:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;font-family:var(--font-family-base);font-size:clamp(1rem, 0.95rem + 0.25vw, 1.125rem);line-height:1.75;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-wrap:pretty}:root :where(h1, h2, h3, h4, h5, h6){font-weight:600;scroll-margin-top:var(--scroll-offset)}:root h1{font-size:clamp(2.25rem, 1.95rem + 1.5vw, 3rem);line-height:1.1111;font-weight:800;margin-top:0;margin-bottom:var(--spacing-xl)}:root h2{font-size:clamp(1.5rem, 1.35rem + 0.75vw, 1.875rem);line-height:1.3333;font-weight:700;margin-top:var(--spacing-xl);margin-bottom:var(--spacing-md)}:root h3{font-size:clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);line-height:1.5;margin-top:var(--spacing-lg);margin-bottom:var(--spacing-sm)}:root h4{font-size:clamp(1rem, 0.975rem + 0.125vw, 1.125rem);line-height:1.5;margin-top:var(--spacing-lg);margin-bottom:var(--spacing-sm)}:root h5{font-size:1rem;line-height:1.5;margin-top:var(--spacing-md);margin-bottom:var(--spacing-xs)}:root h6{font-size:0.875rem;line-height:1.5;margin-top:var(--spacing-md);margin-bottom:var(--spacing-xs)}:root :is(h1, h2, h3, h4, h5, h6):first-child{margin-top:0}:root a{text-decoration-line:underline;cursor:pointer}:root :where(h1, h2, h3, h4, h5, h6) a{text-decoration:none}:root menu{list-style:none;margin-bottom:var(--spacing-md);padding-left:0}:root menu > li::before{display:none}:root hgroup{margin-bottom:var(--spacing-lg)}:root hgroup :where(h1, h2, h3, h4, h5, h6){margin-bottom:var(--spacing-xs)}:root hgroup :where(p){margin-top:0;margin-bottom:0;font-size:0.875em;font-weight:400;line-height:1.5}:root p{line-height:1.75;margin-bottom:var(--spacing-md)}:root :where(strong, b){font-weight:700}:root :where(em, i, cite, var){font-style:italic}:root dfn{font-style:italic;font-weight:600}:root small{font-size:0.875em;line-height:1.5}:root :where(code, kbd, samp){font-family:var(--font-family-mono);font-size:0.875em}:root kbd{font-weight:600}:root data{font-variant-numeric:tabular-nums}:root :where(sub, sup){font-size:0.75em;line-height:0;position:relative;vertical-align:baseline}:root sup{top:-0.5em}:root sub{bottom:-0.25em}:root abbr[title]{text-decoration:underline dotted;text-underline-offset:4px;cursor:help}:root del{text-decoration:line-through}:root ins{text-decoration:underline}:root s{text-decoration:line-through}:root u{text-decoration:underline}:root mark{font-style:normal;font-weight:inherit}:root address{font-style:italic;margin-top:var(--spacing-md);margin-bottom:var(--spacing-md)}:root time{font-style:normal;font-variant-numeric:tabular-nums}:root blockquote{margin-top:var(--spacing-lg);margin-bottom:var(--spacing-lg);padding-left:var(--spacing-md)}:root blockquote blockquote{margin-top:var(--spacing-sm);margin-bottom:var(--spacing-sm);padding-left:var(--spacing-sm)}:root q{font-style:inherit}:root :where(ul, ol){list-style:none;margin-bottom:var(--spacing-md);padding-left:var(--list-indent)}:root li{position:relative}:root li + li{margin-top:var(--spacing-xs)}:root li > :where(p, dl, figure, table, pre){margin-top:0;margin-bottom:0}:root li > blockquote{margin-top:var(--spacing-sm);margin-bottom:var(--spacing-sm)}:root li > :where(ul, ol){margin-top:var(--spacing-xs);margin-bottom:0}:root ul > li::before{content:'';position:absolute;right:100%;margin-right:0.75em;top:0.65em;width:0.375em;height:0.375em;background-color:currentColor;border-radius:50%}:root ol{counter-reset:list-counter}:root ol > li{counter-increment:list-counter}:root ol > li::before{content:counter(list-counter) '.';position:absolute;right:100%;margin-right:0.5em;font-weight:600;font-variant-numeric:tabular-nums;text-align:right;color:currentColor}:root dl{margin-top:var(--spacing-md);margin-bottom:var(--spacing-md)}:root dt{font-weight:600;margin-top:var(--spacing-sm)}:root dt:first-child{margin-top:0}:root dd{margin-left:var(--spacing-md)}:root dt + dd{margin-top:var(--spacing-xs)}:root dd + dd{margin-top:var(--spacing-xs)}:root dd:last-child{margin-bottom:0}:root pre{margin-top:var(--spacing-md);margin-bottom:var(--spacing-md);font-family:var(--font-family-mono);line-height:1.6;overflow-x:auto}:root pre code{font-size:inherit;padding:0;background:none;border-radius:0}:root input, :root button, :root textarea, :root select, :root optgroup{font-family:inherit;font-size:100%;line-height:inherit}:root textarea{line-height:1.5}:root button, :root [type='button'], :root [type='reset'], :root [type='submit']{cursor:pointer}:root fieldset{margin-top:var(--spacing-md);margin-bottom:var(--spacing-md);padding:var(--spacing-sm)}:root legend{font-weight:600;padding:0 var(--spacing-xs)}:root label{display:inline-block;font-weight:600;margin-bottom:var(--spacing-xs)}:root output{display:inline-block;font-variant-numeric:tabular-nums}:root :where(meter, progress){display:inline-block;vertical-align:middle}:root :where(img, video, canvas, audio, iframe, svg){max-width:100%;height:auto;vertical-align:middle}:root figure{margin-top:var(--spacing-lg);margin-bottom:var(--spacing-lg)}:root figcaption{margin-top:0.375rem;font-size:0.875em;line-height:1.5}:root table{width:100%;margin-top:var(--spacing-md);margin-bottom:var(--spacing-md);border-collapse:collapse;font-size:1em;line-height:1.6}:root caption{margin-bottom:var(--spacing-xs);font-size:0.875em;font-weight:600;text-align:left}:root th, :root td{padding:var(--spacing-xs) var(--spacing-sm);text-align:left}:root th{font-weight:600}:root thead th{vertical-align:bottom}:root tbody th, :root tbody td{vertical-align:top}:root tfoot th, :root tfoot td{vertical-align:top}:root tbody + tbody{border-top-width:2px}:root hr{margin-top:var(--spacing-xl);margin-bottom:var(--spacing-xl);border:0;border-top:1px solid}:root :where(:focus, :focus-visible){outline-offset:2px}:root details{margin-top:var(--spacing-md);margin-bottom:var(--spacing-md)}:root summary{cursor:pointer;font-weight:600}:root details[open] > summary{margin-bottom:var(--spacing-xs)}:root dialog{font-size:inherit;line-height:inherit}: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{margin-top:0}:root :where(p, ul, ol, dl, blockquote, figure, table, pre):last-child{margin-bottom:0}}@layer base{:where(:root), [data-theme="light"]{color-scheme:light;--clampography-background:oklch(100% 0 0);--clampography-border:oklch(92% 0.003 264);--clampography-error:oklch(63% 0.22 27);--clampography-heading:oklch(15% 0.02 264);--clampography-info:oklch(63% 0.258 262);--clampography-link:oklch(43% 0.19 264);--clampography-muted:oklch(52% 0.014 258);--clampography-primary:oklch(63% 0.258 262);--clampography-secondary:oklch(55% 0.28 300);--clampography-success:oklch(65% 0.17 165);--clampography-surface:oklch(96% 0.003 264);--clampography-text:oklch(31% 0.02 257);--clampography-warning:oklch(72% 0.17 65)}@media (prefers-color-scheme: dark){:root{color-scheme:dark;--clampography-background:oklch(10% 0 0);--clampography-border:oklch(31% 0.03 254);--clampography-error:oklch(63% 0.22 27);--clampography-heading:oklch(98% 0.003 264);--clampography-info:oklch(72% 0.17 254);--clampography-link:oklch(72% 0.17 254);--clampography-muted:oklch(68% 0.024 254);--clampography-primary:oklch(63% 0.258 262);--clampography-secondary:oklch(63% 0.25 300);--clampography-success:oklch(65% 0.17 165);--clampography-surface:oklch(12% 0 0);--clampography-text:oklch(95% 0 0);--clampography-warning:oklch(72% 0.17 65)}[data-theme="dark"]{color-scheme:dark;--clampography-background:oklch(10% 0 0);--clampography-border:oklch(31% 0.03 254);--clampography-error:oklch(63% 0.22 27);--clampography-heading:oklch(98% 0.003 264);--clampography-info:oklch(72% 0.17 254);--clampography-link:oklch(72% 0.17 254);--clampography-muted:oklch(68% 0.024 254);--clampography-primary:oklch(63% 0.258 262);--clampography-secondary:oklch(63% 0.25 300);--clampography-success:oklch(65% 0.17 165);--clampography-surface:oklch(12% 0 0);--clampography-text:oklch(95% 0 0);--clampography-warning:oklch(72% 0.17 65)}[data-theme="light"]{color-scheme:light;--clampography-background:oklch(100% 0 0);--clampography-border:oklch(92% 0.003 264);--clampography-error:oklch(63% 0.22 27);--clampography-heading:oklch(15% 0.02 264);--clampography-info:oklch(63% 0.258 262);--clampography-link:oklch(43% 0.19 264);--clampography-muted:oklch(52% 0.014 258);--clampography-primary:oklch(63% 0.258 262);--clampography-secondary:oklch(55% 0.28 300);--clampography-success:oklch(65% 0.17 165);--clampography-surface:oklch(96% 0.003 264);--clampography-text:oklch(31% 0.02 257);--clampography-warning:oklch(72% 0.17 65)}}[data-theme="dark"]{color-scheme:dark;--clampography-background:oklch(10% 0 0);--clampography-border:oklch(31% 0.03 254);--clampography-error:oklch(63% 0.22 27);--clampography-heading:oklch(98% 0.003 264);--clampography-info:oklch(72% 0.17 254);--clampography-link:oklch(72% 0.17 254);--clampography-muted:oklch(68% 0.024 254);--clampography-primary:oklch(63% 0.258 262);--clampography-secondary:oklch(63% 0.25 300);--clampography-success:oklch(65% 0.17 165);--clampography-surface:oklch(12% 0 0);--clampography-text:oklch(95% 0 0);--clampography-warning:oklch(72% 0.17 65)}}@layer base{:root{background-color:var(--clampography-background);color:var(--clampography-text)}:root :where(h1, h2, h3, h4, h5, h6){color:var(--clampography-heading)}:root a{color:var(--clampography-link);font-weight:600;letter-spacing:0.025em;text-decoration-line:underline;text-decoration-thickness:2px;text-underline-offset:4px;text-decoration-color:color-mix(in oklab, var(--clampography-link) 30%, transparent);transition-property:color, text-decoration-color;transition-duration:150ms}:root a:hover{text-decoration-color:var(--clampography-link)}:root ul > li::before{background-color:var(--clampography-primary)}:root ol > li::before{color:var(--clampography-primary)}:root :where(code:not(pre code), kbd, samp){background-color:var(--clampography-surface);color:var(--clampography-heading);border:1px solid var(--clampography-border);border-radius:0.25rem;padding:0.125rem var(--spacing-xs);white-space:nowrap}:root kbd{transform:translateY(-0.15em)}:root pre{background-color:var(--clampography-surface);border:1px solid var(--clampography-border);border-radius:0.375rem;padding:var(--spacing-md)}:root table{padding:var(--spacing-sm);border:1px solid var(--clampography-border)}:root th{color:var(--clampography-heading)}:root th, :root td{border:1px solid var(--clampography-border)}:root thead th{border-bottom-width:2px}:root tbody tr:nth-child(even){background-color:var(--clampography-surface)}:root caption, :root figcaption, :root .muted{color:var(--clampography-muted)}:root hr{height:1px;border-width:0;margin-top:var(--spacing-xl);margin-bottom:var(--spacing-xl);background-color:var(--clampography-border)}:root blockquote{border-left-width:4px;border-left-color:var(--clampography-primary);background-color:var(--clampography-surface);padding:var(--spacing-md);border-radius:0.25rem;font-style:italic;color:var(--clampography-heading)}:root mark{background-color:var(--clampography-primary);color:var(--clampography-background);padding:0.125rem var(--spacing-xs);border-radius:0.25rem}:root del{text-decoration-color:var(--clampography-secondary);text-decoration-thickness:2px}:root details{border:1px solid var(--clampography-border);border-radius:0.375rem;padding:var(--spacing-sm)}:root summary{color:var(--clampography-heading);border-bottom:0px solid var(--clampography-border)}:root details[open] > summary{border-bottom-width:1px;padding-bottom:var(--spacing-sm)}}@layer base{:root :where(button, [type='button'], [type='reset'], [type='submit']){display:inline-flex;align-items:center;justify-content:center;gap:0.375em;padding:var(--spacing-xs) var(--spacing-sm);background-color:var(--clampography-surface);color:var(--clampography-text);border:1px solid var(--clampography-border);border-radius:0.375rem;font-weight:500;white-space:nowrap;transition-property:background-color, border-color, color, box-shadow;transition-duration:150ms}:root :where(button, [type='button'], [type='reset'], [type='submit']):hover{background-color:var(--clampography-background);border-color:var(--clampography-primary)}:root :where(button, [type='button'], [type='submit']).primary, :root [type='submit']{background-color:var(--clampography-primary);color:var(--clampography-background);border-color:var(--clampography-primary)}:root :where(button, [type='button'], [type='submit']).primary:hover, :root [type='submit']:hover{filter:brightness(1.1)}:root :where(input:not([type='checkbox'], [type='radio'], [type='range'], [type='color']), textarea, select){display:block;width:100%;padding:var(--spacing-xs) var(--spacing-sm);background-color:var(--clampography-background);color:var(--clampography-text);border:1px solid var(--clampography-border);border-radius:0.375rem;transition-property:border-color, box-shadow;transition-duration:150ms}:root :where(input:not([type='checkbox'], [type='radio'], [type='range'], [type='color']), textarea, select):focus{outline:none;border-color:var(--clampography-primary);box-shadow:0 0 0 3px color-mix(in oklab, var(--clampography-primary) 20%, transparent)}:root :where(input, textarea, select):disabled{opacity:0.5;cursor:not-allowed}:root :where(input, textarea, select)[readonly]{background-color:color-mix(in oklab, var(--clampography-surface) 50%, transparent);cursor:default}:root :where(input, textarea, select):user-invalid{border-color:var(--clampography-error)}:root :where(input, textarea, select):user-invalid:focus{box-shadow:0 0 0 3px color-mix(in oklab, var(--clampography-error) 20%, transparent)}:root [type='search']::-webkit-search-cancel-button, :root [type='search']::-webkit-search-decoration{-webkit-appearance:none;appearance:none}:root [type='number']::-webkit-inner-spin-button, :root [type='number']::-webkit-outer-spin-button{height:auto}:root :where(input, textarea, select)::placeholder{color:var(--clampography-muted)}:root select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3E%3C/svg%3E");background-position:right 0.5rem center;background-repeat:no-repeat;background-size:1.5em 1.5em;padding-right:2.5rem}:root [type='file']{padding:0;background-color:transparent;border:none;cursor:pointer}:root [type='file']::file-selector-button{display:inline-flex;align-items:center;padding:var(--spacing-xs) var(--spacing-sm);margin-right:var(--spacing-sm);background-color:var(--clampography-surface);color:var(--clampography-text);border:1px solid var(--clampography-border);border-radius:0.375rem;font-family:inherit;font-size:inherit;cursor:pointer;transition-property:background-color, border-color;transition-duration:150ms}:root [type='file']:hover::file-selector-button{background-color:var(--clampography-background);border-color:var(--clampography-primary)}:root [type='checkbox'], :root [type='radio']{width:1em;height:1em;accent-color:var(--clampography-primary);vertical-align:middle;cursor:pointer}:root [type='checkbox']:focus-visible, :root [type='radio']:focus-visible{outline:2px solid var(--clampography-primary);outline-offset:2px}:root [type='range']{accent-color:var(--clampography-primary);width:100%;cursor:pointer}:root [type='color']{padding:0.125rem;width:2.5rem;height:2.5rem;border:1px solid var(--clampography-border);border-radius:0.375rem;background-color:var(--clampography-background);cursor:pointer}:root fieldset{border:1px solid var(--clampography-border);border-radius:0.5rem;background-color:var(--clampography-surface)}:root legend{color:var(--clampography-heading)}:root label{color:var(--clampography-text)}:root output{color:var(--clampography-primary);font-weight:600}:root progress{-webkit-appearance:none;appearance:none;width:100%;height:1em;background:transparent}:root progress::-webkit-progress-bar{background:color-mix(in oklab, var(--clampography-text) 20%, transparent)}:root progress::-webkit-progress-value{background:var(--clampography-success)}:root progress::-moz-progress-bar{background:var(--clampography-success)}:root meter{-webkit-appearance:none;appearance:none;width:100%;height:1em;background:transparent}@supports (-moz-appearance: none){:root progress{background:color-mix(in oklab, var(--clampography-text) 20%, transparent)}:root meter{background:color-mix(in oklab, var(--clampography-text) 20%, transparent)}}:root meter::-webkit-meter-inner-element{display:flex;align-items:stretch;height:1em}:root meter::-webkit-meter-bar{background:color-mix(in oklab, var(--clampography-text) 20%, transparent);height:100%}:root meter::-webkit-meter-optimum-value{background:var(--clampography-success);height:100%}:root meter:-moz-meter-optimum::-moz-meter-bar{background:var(--clampography-success)}:root meter::-webkit-meter-suboptimum-value{background:var(--clampography-warning);height:100%}:root meter:-moz-meter-sub-optimum::-moz-meter-bar{background:var(--clampography-warning)}:root meter::-webkit-meter-even-less-good-value{background:var(--clampography-error);height:100%}:root meter:-moz-meter-sub-sub-optimum::-moz-meter-bar{background:var(--clampography-error)}}@layer base{:root kbd{display:inline-block;padding:0.1em 0.45em;min-width:2em;text-align:center;font-size:0.8em;font-weight:700;line-height:1.5;white-space:nowrap;vertical-align:0.1em;cursor:default;user-select:none;background-color:var(--clampography-surface, oklch(94% 0.004 264));color:var(--clampography-text, oklch(18% 0.015 264));border:1px solid var(--clampography-border, oklch(76% 0.008 264));border-radius:4px;box-shadow:0 2px 0 color-mix(in oklab, var(--clampography-border, oklch(60% 0.008 264)) 100%, black 18%), 0 3px 2px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.5);transition-property:box-shadow, transform, border-bottom-width;transition-duration:80ms}:root kbd:active{transform:translateY(2px);box-shadow:0 0 0 color-mix(in oklab, var(--clampography-border, oklch(60% 0.008 264)) 100%, black 18%), 0 1px 1px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.3)}}
1
+ @layer base{:where(:root){--spacing-xs:clamp(0.25rem, 0.0833rem + 0.8333vw, 0.75rem);--spacing-sm:clamp(0.375rem, 0.0833rem + 1.4583vw, 1.25rem);--spacing-md:clamp(0.5rem, 0.1667rem + 1.6667vw, 1.5rem);--spacing-lg:clamp(0.75rem, 0.1667rem + 2.9167vw, 2.5rem);--spacing-xl:clamp(1rem, 0.3333rem + 3.3333vw, 3rem);--list-indent:clamp(1.5rem, 1.3333rem + 0.8333vw, 2rem);--scroll-offset:5rem;--font-family-base:Inter, system-ui, -apple-system, 'Segoe UI Variable Display', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;--font-family-mono:ui-monospace, 'Cascadia Code', 'Cascadia Mono', 'Segoe UI Mono', 'Ubuntu Mono', SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;--clampography-h1-size:clamp(1.875rem, 1.1667rem + 3.5417vw, 4rem);--clampography-h2-size:clamp(1.25rem, 0.6667rem + 2.9167vw, 3rem);--clampography-h3-size:clamp(1.125rem, 0.75rem + 1.875vw, 2.25rem);--clampography-h4-size:clamp(1rem, 0.8333rem + 0.8333vw, 1.5rem);--clampography-h5-size:1rem;--clampography-h6-size:0.875rem;--clampography-heading-scale:1;--clampography-h1-scale:var(--clampography-heading-scale);--clampography-h2-scale:var(--clampography-heading-scale);--clampography-h3-scale:var(--clampography-heading-scale);--clampography-h4-scale:var(--clampography-heading-scale);--clampography-h5-scale:var(--clampography-heading-scale);--clampography-h6-scale:var(--clampography-heading-scale)}body{font-size:clamp(0.875rem, 0.7917rem + 0.4167vw, 1.125rem);line-height:1.75;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-wrap:pretty}:root :where(h1, h2, h3, h4, h5, h6){font-weight:600;scroll-margin-top:var(--scroll-offset)}:root h1{font-size:calc(var(--clampography-h1-size) * var(--clampography-h1-scale));line-height:1.1111;font-weight:800;margin-top:0;margin-bottom:var(--spacing-xl)}:root h2{font-size:calc(var(--clampography-h2-size) * var(--clampography-h2-scale));line-height:1.3333;font-weight:700;margin-top:var(--spacing-xl);margin-bottom:var(--spacing-md)}:root h3{font-size:calc(var(--clampography-h3-size) * var(--clampography-h3-scale));line-height:1.5;margin-top:var(--spacing-lg);margin-bottom:var(--spacing-sm)}:root h4{font-size:calc(var(--clampography-h4-size) * var(--clampography-h4-scale));line-height:1.5;margin-top:var(--spacing-lg);margin-bottom:var(--spacing-sm)}:root h5{font-size:calc(var(--clampography-h5-size) * var(--clampography-h5-scale));line-height:1.5;margin-top:var(--spacing-md);margin-bottom:var(--spacing-xs)}:root h6{font-size:calc(var(--clampography-h6-size) * var(--clampography-h6-scale));line-height:1.5;margin-top:var(--spacing-md);margin-bottom:var(--spacing-xs)}:root :is(h1, h2, h3, h4, h5, h6):first-child{margin-top:0}:root a{text-decoration-line:underline;cursor:pointer}:root :where(h1, h2, h3, h4, h5, h6) a{text-decoration:none}:root menu{list-style:none;margin-bottom:var(--spacing-md);padding-left:0}:root menu > li::before{display:none}:root hgroup{margin-bottom:var(--spacing-lg)}:root hgroup :where(h1, h2, h3, h4, h5, h6){margin-bottom:var(--spacing-xs)}:root hgroup :where(p){margin-top:0;margin-bottom:0;font-size:0.875em;font-weight:400;line-height:1.5}:root p{line-height:1.75;margin-bottom:var(--spacing-md)}:root :where(strong, b){font-weight:700}:root :where(em, i, cite, var){font-style:italic}:root dfn{font-style:italic;font-weight:600}:root small{font-size:0.875em;line-height:1.5}:root :where(code, kbd, samp){font-family:var(--font-family-mono);font-size:0.875em;-webkit-font-smoothing:auto;-moz-osx-font-smoothing:auto}:root kbd{font-weight:600}:root data{font-variant-numeric:tabular-nums}:root :where(sub, sup){font-size:0.75em;line-height:0;position:relative;vertical-align:baseline}:root sup{top:-0.5em}:root sub{bottom:-0.25em}:root abbr[title]{text-decoration:underline dotted;text-underline-offset:4px;cursor:help}:root del{text-decoration:line-through}:root ins{text-decoration:underline}:root s{text-decoration:line-through}:root u{text-decoration:underline}:root mark{font-style:normal;font-weight:inherit}:root address{font-style:italic;margin-top:var(--spacing-md);margin-bottom:var(--spacing-md)}:root time{font-style:normal;font-variant-numeric:tabular-nums}:root blockquote{margin-top:var(--spacing-lg);margin-bottom:var(--spacing-lg);padding-left:var(--spacing-md)}:root blockquote blockquote{margin-top:var(--spacing-sm);margin-bottom:var(--spacing-sm);padding-left:var(--spacing-sm)}:root q{font-style:inherit}:root :where(ul, ol){list-style:none;margin-bottom:var(--spacing-md);padding-left:var(--list-indent)}:root li{position:relative}:root li + li{margin-top:var(--spacing-xs)}:root li > :where(p, dl, figure, table, pre){margin-top:0;margin-bottom:0}:root li > blockquote{margin-top:var(--spacing-sm);margin-bottom:var(--spacing-sm)}:root li > :where(ul, ol){margin-top:var(--spacing-xs);margin-bottom:0}:root ul > li::before{content:'';position:absolute;right:100%;margin-right:0.75em;top:0.65em;width:0.375em;height:0.375em;background-color:currentColor;border-radius:50%}:root ol{counter-reset:list-counter}:root ol > li{counter-increment:list-counter}:root ol > li::before{content:counter(list-counter) '.';position:absolute;right:100%;margin-right:0.5em;font-weight:600;font-variant-numeric:tabular-nums;text-align:right;color:currentColor}:root dl{margin-top:var(--spacing-md);margin-bottom:var(--spacing-md)}:root dt{font-weight:600;margin-top:var(--spacing-sm)}:root dt:first-child{margin-top:0}:root dd{margin-left:var(--spacing-md)}:root dt + dd{margin-top:var(--spacing-xs)}:root dd + dd{margin-top:var(--spacing-xs)}:root dd:last-child{margin-bottom:0}:root pre{margin-top:var(--spacing-md);margin-bottom:var(--spacing-md);font-family:var(--font-family-mono);line-height:1.6;overflow-x:auto;-webkit-font-smoothing:auto;-moz-osx-font-smoothing:auto}:root pre code{font-size:inherit;padding:0;background:none;border-radius:0}:root input, :root button, :root textarea, :root select, :root optgroup{font-family:inherit;font-size:100%;line-height:inherit}:root textarea{line-height:1.5}:root button, :root [type='button'], :root [type='reset'], :root [type='submit']{cursor:pointer}:root fieldset{margin-top:var(--spacing-md);margin-bottom:var(--spacing-md);padding:var(--spacing-sm)}:root legend{font-weight:600;padding:0 var(--spacing-xs)}:root label{display:inline-block;font-weight:600;margin-bottom:var(--spacing-xs)}:root output{display:inline-block;font-variant-numeric:tabular-nums}:root :where(meter, progress){display:inline-block;vertical-align:middle}:root :where(img, video, canvas, audio, iframe, svg){max-width:100%;height:auto;vertical-align:middle}:root figure{margin-top:var(--spacing-lg);margin-bottom:var(--spacing-lg)}:root figcaption{margin-top:0.375rem;font-size:0.875em;line-height:1.5}:root table{width:100%;margin-top:var(--spacing-md);margin-bottom:var(--spacing-md);border-collapse:collapse;font-size:1em;line-height:1.6}:root caption{margin-bottom:var(--spacing-xs);font-size:0.875em;font-weight:600;text-align:left}:root th, :root td{padding:var(--spacing-xs) var(--spacing-sm);text-align:left}:root th{font-weight:600}:root thead th{vertical-align:bottom}:root tbody th, :root tbody td{vertical-align:top}:root tfoot th, :root tfoot td{vertical-align:top}:root tbody + tbody{border-top-width:2px}:root hr{margin-top:var(--spacing-xl);margin-bottom:var(--spacing-xl);border:0;border-top:1px solid}:root :where(:focus, :focus-visible){outline-offset:2px}:root details{margin-top:var(--spacing-md);margin-bottom:var(--spacing-md)}:root summary{cursor:pointer;font-weight:600}:root details[open] > summary{margin-bottom:var(--spacing-xs)}:root dialog{font-size:inherit;line-height:inherit}: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{margin-top:0}:root :where(p, ul, ol, dl, blockquote, figure, table, pre):last-child{margin-bottom:0}}@layer base{:where(:root), [data-theme="light"]{color-scheme:light;--clampography-background:oklch(100% 0 0);--clampography-border:oklch(92% 0.003 264);--clampography-error:oklch(63% 0.22 27);--clampography-heading:oklch(15% 0.02 264);--clampography-info:oklch(63% 0.258 262);--clampography-link:oklch(43% 0.19 264);--clampography-muted:oklch(52% 0.014 258);--clampography-primary:oklch(63% 0.258 262);--clampography-secondary:oklch(55% 0.28 300);--clampography-success:oklch(65% 0.17 165);--clampography-surface:oklch(96% 0.003 264);--clampography-text:oklch(31% 0.02 257);--clampography-warning:oklch(72% 0.17 65)}@media (prefers-color-scheme: dark){:root{color-scheme:dark;--clampography-background:oklch(10% 0 0);--clampography-border:oklch(31% 0.03 254);--clampography-error:oklch(63% 0.22 27);--clampography-heading:oklch(98% 0.003 264);--clampography-info:oklch(72% 0.17 254);--clampography-link:oklch(72% 0.17 254);--clampography-muted:oklch(68% 0.024 254);--clampography-primary:oklch(63% 0.258 262);--clampography-secondary:oklch(63% 0.25 300);--clampography-success:oklch(65% 0.17 165);--clampography-surface:oklch(12% 0 0);--clampography-text:oklch(95% 0 0);--clampography-warning:oklch(72% 0.17 65)}[data-theme="dark"]{color-scheme:dark;--clampography-background:oklch(10% 0 0);--clampography-border:oklch(31% 0.03 254);--clampography-error:oklch(63% 0.22 27);--clampography-heading:oklch(98% 0.003 264);--clampography-info:oklch(72% 0.17 254);--clampography-link:oklch(72% 0.17 254);--clampography-muted:oklch(68% 0.024 254);--clampography-primary:oklch(63% 0.258 262);--clampography-secondary:oklch(63% 0.25 300);--clampography-success:oklch(65% 0.17 165);--clampography-surface:oklch(12% 0 0);--clampography-text:oklch(95% 0 0);--clampography-warning:oklch(72% 0.17 65)}[data-theme="light"]{color-scheme:light;--clampography-background:oklch(100% 0 0);--clampography-border:oklch(92% 0.003 264);--clampography-error:oklch(63% 0.22 27);--clampography-heading:oklch(15% 0.02 264);--clampography-info:oklch(63% 0.258 262);--clampography-link:oklch(43% 0.19 264);--clampography-muted:oklch(52% 0.014 258);--clampography-primary:oklch(63% 0.258 262);--clampography-secondary:oklch(55% 0.28 300);--clampography-success:oklch(65% 0.17 165);--clampography-surface:oklch(96% 0.003 264);--clampography-text:oklch(31% 0.02 257);--clampography-warning:oklch(72% 0.17 65)}}[data-theme="dark"]{color-scheme:dark;--clampography-background:oklch(10% 0 0);--clampography-border:oklch(31% 0.03 254);--clampography-error:oklch(63% 0.22 27);--clampography-heading:oklch(98% 0.003 264);--clampography-info:oklch(72% 0.17 254);--clampography-link:oklch(72% 0.17 254);--clampography-muted:oklch(68% 0.024 254);--clampography-primary:oklch(63% 0.258 262);--clampography-secondary:oklch(63% 0.25 300);--clampography-success:oklch(65% 0.17 165);--clampography-surface:oklch(12% 0 0);--clampography-text:oklch(95% 0 0);--clampography-warning:oklch(72% 0.17 65)}}@layer base{:where(:root){--clampography-transition-duration:200ms}body{background-color:var(--clampography-background);color:var(--clampography-text);font-family:var(--font-sans, var(--font-family-base));transition-property:color, background-color, border-color, text-decoration-color, fill, stroke;transition-duration:var(--clampography-transition-duration, 200ms);transition-timing-function:ease}:root :where(h1, h2, h3, h4, h5, h6){color:var(--clampography-heading)}:root a{color:var(--clampography-link);font-weight:600;letter-spacing:0.025em;text-decoration-line:underline;text-decoration-thickness:2px;text-underline-offset:4px;text-decoration-color:color-mix(in oklab, var(--clampography-link) 30%, transparent);transition-property:color, text-decoration-color;transition-duration:150ms}:root a:hover{text-decoration-color:var(--clampography-link)}:root ul > li::before{background-color:var(--clampography-primary)}:root ol > li::before{color:var(--clampography-primary)}:root :where(code:not(pre code), kbd, samp){background-color:var(--clampography-surface);color:var(--clampography-heading);border:1px solid var(--clampography-border);border-radius:0.25rem;padding:0.125rem var(--spacing-xs);white-space:nowrap}:root kbd{transform:translateY(-0.15em)}:root pre{background-color:var(--clampography-surface);border:1px solid var(--clampography-border);border-radius:0.375rem;padding:var(--spacing-md)}:root table{padding:var(--spacing-sm);border:1px solid var(--clampography-border)}:root th{color:var(--clampography-heading)}:root th, :root td{border:1px solid var(--clampography-border)}:root thead th{border-bottom-width:2px}:root tbody tr:nth-child(even){background-color:var(--clampography-surface)}:root caption, :root figcaption, :root .muted{color:var(--clampography-muted)}:root hr{height:1px;border-width:0;margin-top:var(--spacing-xl);margin-bottom:var(--spacing-xl);background-color:var(--clampography-border)}:root blockquote{border-left-width:4px;border-left-color:var(--clampography-primary);background-color:var(--clampography-surface);padding:var(--spacing-md);border-radius:0.25rem;font-style:italic;color:var(--clampography-heading)}:root mark{background-color:var(--clampography-primary);color:var(--clampography-background);padding:0.125rem var(--spacing-xs);border-radius:0.25rem}:root del{text-decoration-color:var(--clampography-error);text-decoration-thickness:2px}:root details{border:1px solid var(--clampography-border);border-radius:0.375rem;padding:var(--spacing-sm)}:root summary{color:var(--clampography-heading);border-bottom:0px solid var(--clampography-border)}:root details[open] > summary{border-bottom-width:1px;padding-bottom:var(--spacing-sm)}@media (prefers-reduced-motion: reduce){body{transition:none;--clampography-transition-duration:0ms}}@media (prefers-contrast: more){body{background-color:white;color:black}:root :where(h1, h2, h3, h4, h5, h6){color:black}:root a{color:black;text-decoration:underline;text-decoration-thickness:2px;font-weight:700}:root :where(code:not(pre code), kbd, samp){background-color:#f0f0f0;color:black;border:2px solid black}:root pre{background-color:#f0f0f0;color:black;border:2px solid black}:root blockquote{background-color:#f0f0f0;border-left-color:black;border-left-width:6px;color:black}:root th, :root td{border:2px solid black}:root hr{background-color:black;height:2px}}}@layer base{:root :where(button, [type='button'], [type='reset'], [type='submit']){display:inline-flex;align-items:center;justify-content:center;gap:0.375em;padding:var(--spacing-xs) var(--spacing-sm);background-color:var(--clampography-surface);color:var(--clampography-text);border:1px solid var(--clampography-border);border-radius:0.375rem;font-weight:500;white-space:nowrap;transition-property:background-color, border-color, color, box-shadow;transition-duration:150ms}:root :where(button, [type='button'], [type='reset'], [type='submit']):hover{background-color:var(--clampography-background);border-color:var(--clampography-primary)}:root :where(button, [type='button'], [type='submit']).primary, :root [type='submit']{background-color:var(--clampography-primary);color:var(--clampography-background);border-color:var(--clampography-primary)}:root :where(button, [type='button'], [type='submit']).primary:hover, :root [type='submit']:hover{filter:brightness(1.1)}:root :where(input:not([type='checkbox'], [type='radio'], [type='range'], [type='color']), textarea, select){display:block;width:100%;padding:var(--spacing-xs) var(--spacing-sm);background-color:var(--clampography-background);color:var(--clampography-text);border:1px solid var(--clampography-border);border-radius:0.375rem;transition-property:border-color, box-shadow;transition-duration:150ms}:root :where(input:not([type='checkbox'], [type='radio'], [type='range'], [type='color']), textarea, select):focus{outline:none;border-color:var(--clampography-primary);box-shadow:0 0 0 3px color-mix(in oklab, var(--clampography-primary) 20%, transparent)}:root :where(input, textarea, select):disabled{opacity:0.5;cursor:not-allowed}:root :where(input, textarea, select)[readonly]{background-color:color-mix(in oklab, var(--clampography-surface) 50%, transparent);cursor:default}:root :where(input, textarea, select):user-invalid{border-color:var(--clampography-error)}:root :where(input, textarea, select):user-invalid:focus{box-shadow:0 0 0 3px color-mix(in oklab, var(--clampography-error) 20%, transparent)}:root [type='search']::-webkit-search-cancel-button, :root [type='search']::-webkit-search-decoration{-webkit-appearance:none;appearance:none}:root [type='number']::-webkit-inner-spin-button, :root [type='number']::-webkit-outer-spin-button{height:auto}:root :where(input, textarea, select)::placeholder{color:var(--clampography-muted)}:root select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3E%3C/svg%3E");background-position:right 0.5rem center;background-repeat:no-repeat;background-size:1.5em 1.5em;padding-right:2.5rem}:root [type='file']{padding:0;background-color:transparent;border:none;cursor:pointer}:root [type='file']::file-selector-button{display:inline-flex;align-items:center;padding:var(--spacing-xs) var(--spacing-sm);margin-right:var(--spacing-sm);background-color:var(--clampography-surface);color:var(--clampography-text);border:1px solid var(--clampography-border);border-radius:0.375rem;font-family:inherit;font-size:inherit;cursor:pointer;transition-property:background-color, border-color;transition-duration:150ms}:root [type='file']:hover::file-selector-button{background-color:var(--clampography-background);border-color:var(--clampography-primary)}:root [type='checkbox'], :root [type='radio']{width:1em;height:1em;accent-color:var(--clampography-primary);vertical-align:middle;cursor:pointer}:root [type='checkbox']:focus-visible, :root [type='radio']:focus-visible{outline:2px solid var(--clampography-primary);outline-offset:2px}:root [type='range']{accent-color:var(--clampography-primary);width:100%;cursor:pointer}:root [type='color']{padding:0.125rem;width:2.5rem;height:2.5rem;border:1px solid var(--clampography-border);border-radius:0.375rem;background-color:var(--clampography-background);cursor:pointer}:root fieldset{border:1px solid var(--clampography-border);border-radius:0.5rem;background-color:var(--clampography-surface)}:root legend{color:var(--clampography-heading)}:root label{color:var(--clampography-text)}:root output{color:var(--clampography-primary);font-weight:600}:root progress{-webkit-appearance:none;appearance:none;width:100%;height:1em;background:transparent}:root progress::-webkit-progress-bar{background:color-mix(in oklab, var(--clampography-text) 20%, transparent)}:root progress::-webkit-progress-value{background:var(--clampography-success)}:root progress::-moz-progress-bar{background:var(--clampography-success)}:root meter{-webkit-appearance:none;appearance:none;width:100%;height:1em;background:transparent}@supports (-moz-appearance: none){:root progress{background:color-mix(in oklab, var(--clampography-text) 20%, transparent)}:root meter{background:color-mix(in oklab, var(--clampography-text) 20%, transparent)}}:root meter::-webkit-meter-inner-element{display:flex;align-items:stretch;height:1em}:root meter::-webkit-meter-bar{background:color-mix(in oklab, var(--clampography-text) 20%, transparent);height:100%}:root meter::-webkit-meter-optimum-value{background:var(--clampography-success);height:100%}:root meter:-moz-meter-optimum::-moz-meter-bar{background:var(--clampography-success)}:root meter::-webkit-meter-suboptimum-value{background:var(--clampography-warning);height:100%}:root meter:-moz-meter-sub-optimum::-moz-meter-bar{background:var(--clampography-warning)}:root meter::-webkit-meter-even-less-good-value{background:var(--clampography-error);height:100%}:root meter:-moz-meter-sub-sub-optimum::-moz-meter-bar{background:var(--clampography-error)}}@layer base{:root kbd{display:inline-block;padding:0.1em 0.45em;min-width:2em;text-align:center;font-size:0.8em;font-weight:700;line-height:1.5;white-space:nowrap;vertical-align:0.1em;cursor:default;user-select:none;background-color:var(--clampography-surface, oklch(94% 0.004 264));color:var(--clampography-text, oklch(18% 0.015 264));border:1px solid var(--clampography-border, oklch(76% 0.008 264));border-radius:4px;box-shadow:0 2px 0 color-mix(in oklab, var(--clampography-border, oklch(60% 0.008 264)) 100%, black 18%), 0 3px 2px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.5);transition-property:box-shadow, transform, border-bottom-width;transition-duration:80ms}:root kbd:active{transform:translateY(2px);box-shadow:0 0 0 color-mix(in oklab, var(--clampography-border, oklch(60% 0.008 264)) 100%, black 18%), 0 1px 1px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.3)}}
package/css/extra.css CHANGED
@@ -1,8 +1,16 @@
1
1
  @layer base {
2
2
 
3
- :root {
3
+ :where(:root) {
4
+ --clampography-transition-duration: 200ms;
5
+ }
6
+
7
+ body {
4
8
  background-color: var(--clampography-background);
5
9
  color: var(--clampography-text);
10
+ font-family: var(--font-sans, var(--font-family-base));
11
+ transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
12
+ transition-duration: var(--clampography-transition-duration, 200ms);
13
+ transition-timing-function: ease;
6
14
  }
7
15
 
8
16
  :root :where(h1, h2, h3, h4, h5, h6) {
@@ -104,7 +112,7 @@
104
112
  }
105
113
 
106
114
  :root del {
107
- text-decoration-color: var(--clampography-secondary);
115
+ text-decoration-color: var(--clampography-error);
108
116
  text-decoration-thickness: 2px;
109
117
  }
110
118
 
@@ -123,4 +131,59 @@
123
131
  border-bottom-width: 1px;
124
132
  padding-bottom: var(--spacing-sm);
125
133
  }
134
+
135
+ @media (prefers-reduced-motion: reduce) {
136
+
137
+ body {
138
+ transition: none;
139
+ --clampography-transition-duration: 0ms;
140
+ }
141
+ }
142
+
143
+ @media (prefers-contrast: more) {
144
+
145
+ body {
146
+ background-color: white;
147
+ color: black;
148
+ }
149
+
150
+ :root :where(h1, h2, h3, h4, h5, h6) {
151
+ color: black;
152
+ }
153
+
154
+ :root a {
155
+ color: black;
156
+ text-decoration: underline;
157
+ text-decoration-thickness: 2px;
158
+ font-weight: 700;
159
+ }
160
+
161
+ :root :where(code:not(pre code), kbd, samp) {
162
+ background-color: #f0f0f0;
163
+ color: black;
164
+ border: 2px solid black;
165
+ }
166
+
167
+ :root pre {
168
+ background-color: #f0f0f0;
169
+ color: black;
170
+ border: 2px solid black;
171
+ }
172
+
173
+ :root blockquote {
174
+ background-color: #f0f0f0;
175
+ border-left-color: black;
176
+ border-left-width: 6px;
177
+ color: black;
178
+ }
179
+
180
+ :root th, :root td {
181
+ border: 2px solid black;
182
+ }
183
+
184
+ :root hr {
185
+ background-color: black;
186
+ height: 2px;
187
+ }
188
+ }
126
189
  }
package/css/extra.min.css CHANGED
@@ -1 +1 @@
1
- @layer base{:root{background-color:var(--clampography-background);color:var(--clampography-text)}:root :where(h1, h2, h3, h4, h5, h6){color:var(--clampography-heading)}:root a{color:var(--clampography-link);font-weight:600;letter-spacing:0.025em;text-decoration-line:underline;text-decoration-thickness:2px;text-underline-offset:4px;text-decoration-color:color-mix(in oklab, var(--clampography-link) 30%, transparent);transition-property:color, text-decoration-color;transition-duration:150ms}:root a:hover{text-decoration-color:var(--clampography-link)}:root ul > li::before{background-color:var(--clampography-primary)}:root ol > li::before{color:var(--clampography-primary)}:root :where(code:not(pre code), kbd, samp){background-color:var(--clampography-surface);color:var(--clampography-heading);border:1px solid var(--clampography-border);border-radius:0.25rem;padding:0.125rem var(--spacing-xs);white-space:nowrap}:root kbd{transform:translateY(-0.15em)}:root pre{background-color:var(--clampography-surface);border:1px solid var(--clampography-border);border-radius:0.375rem;padding:var(--spacing-md)}:root table{padding:var(--spacing-sm);border:1px solid var(--clampography-border)}:root th{color:var(--clampography-heading)}:root th, :root td{border:1px solid var(--clampography-border)}:root thead th{border-bottom-width:2px}:root tbody tr:nth-child(even){background-color:var(--clampography-surface)}:root caption, :root figcaption, :root .muted{color:var(--clampography-muted)}:root hr{height:1px;border-width:0;margin-top:var(--spacing-xl);margin-bottom:var(--spacing-xl);background-color:var(--clampography-border)}:root blockquote{border-left-width:4px;border-left-color:var(--clampography-primary);background-color:var(--clampography-surface);padding:var(--spacing-md);border-radius:0.25rem;font-style:italic;color:var(--clampography-heading)}:root mark{background-color:var(--clampography-primary);color:var(--clampography-background);padding:0.125rem var(--spacing-xs);border-radius:0.25rem}:root del{text-decoration-color:var(--clampography-secondary);text-decoration-thickness:2px}:root details{border:1px solid var(--clampography-border);border-radius:0.375rem;padding:var(--spacing-sm)}:root summary{color:var(--clampography-heading);border-bottom:0px solid var(--clampography-border)}:root details[open] > summary{border-bottom-width:1px;padding-bottom:var(--spacing-sm)}}
1
+ @layer base{:where(:root){--clampography-transition-duration:200ms}body{background-color:var(--clampography-background);color:var(--clampography-text);font-family:var(--font-sans, var(--font-family-base));transition-property:color, background-color, border-color, text-decoration-color, fill, stroke;transition-duration:var(--clampography-transition-duration, 200ms);transition-timing-function:ease}:root :where(h1, h2, h3, h4, h5, h6){color:var(--clampography-heading)}:root a{color:var(--clampography-link);font-weight:600;letter-spacing:0.025em;text-decoration-line:underline;text-decoration-thickness:2px;text-underline-offset:4px;text-decoration-color:color-mix(in oklab, var(--clampography-link) 30%, transparent);transition-property:color, text-decoration-color;transition-duration:150ms}:root a:hover{text-decoration-color:var(--clampography-link)}:root ul > li::before{background-color:var(--clampography-primary)}:root ol > li::before{color:var(--clampography-primary)}:root :where(code:not(pre code), kbd, samp){background-color:var(--clampography-surface);color:var(--clampography-heading);border:1px solid var(--clampography-border);border-radius:0.25rem;padding:0.125rem var(--spacing-xs);white-space:nowrap}:root kbd{transform:translateY(-0.15em)}:root pre{background-color:var(--clampography-surface);border:1px solid var(--clampography-border);border-radius:0.375rem;padding:var(--spacing-md)}:root table{padding:var(--spacing-sm);border:1px solid var(--clampography-border)}:root th{color:var(--clampography-heading)}:root th, :root td{border:1px solid var(--clampography-border)}:root thead th{border-bottom-width:2px}:root tbody tr:nth-child(even){background-color:var(--clampography-surface)}:root caption, :root figcaption, :root .muted{color:var(--clampography-muted)}:root hr{height:1px;border-width:0;margin-top:var(--spacing-xl);margin-bottom:var(--spacing-xl);background-color:var(--clampography-border)}:root blockquote{border-left-width:4px;border-left-color:var(--clampography-primary);background-color:var(--clampography-surface);padding:var(--spacing-md);border-radius:0.25rem;font-style:italic;color:var(--clampography-heading)}:root mark{background-color:var(--clampography-primary);color:var(--clampography-background);padding:0.125rem var(--spacing-xs);border-radius:0.25rem}:root del{text-decoration-color:var(--clampography-error);text-decoration-thickness:2px}:root details{border:1px solid var(--clampography-border);border-radius:0.375rem;padding:var(--spacing-sm)}:root summary{color:var(--clampography-heading);border-bottom:0px solid var(--clampography-border)}:root details[open] > summary{border-bottom-width:1px;padding-bottom:var(--spacing-sm)}@media (prefers-reduced-motion: reduce){body{transition:none;--clampography-transition-duration:0ms}}@media (prefers-contrast: more){body{background-color:white;color:black}:root :where(h1, h2, h3, h4, h5, h6){color:black}:root a{color:black;text-decoration:underline;text-decoration-thickness:2px;font-weight:700}:root :where(code:not(pre code), kbd, samp){background-color:#f0f0f0;color:black;border:2px solid black}:root pre{background-color:#f0f0f0;color:black;border:2px solid black}:root blockquote{background-color:#f0f0f0;border-left-color:black;border-left-width:6px;color:black}:root th, :root td{border:2px solid black}:root hr{background-color:black;height:2px}}}
package/css/figma-tokens.json ADDED
@@ -0,0 +1,112 @@
1
+ {
2
+ "dark": {
3
+ "background": {
4
+ "value": "oklch(10% 0 0)",
5
+ "type": "color"
6
+ },
7
+ "border": {
8
+ "value": "oklch(31% 0.03 254)",
9
+ "type": "color"
10
+ },
11
+ "error": {
12
+ "value": "oklch(63% 0.22 27)",
13
+ "type": "color"
14
+ },
15
+ "heading": {
16
+ "value": "oklch(98% 0.003 264)",
17
+ "type": "color"
18
+ },
19
+ "info": {
20
+ "value": "oklch(72% 0.17 254)",
21
+ "type": "color"
22
+ },
23
+ "link": {
24
+ "value": "oklch(72% 0.17 254)",
25
+ "type": "color"
26
+ },
27
+ "muted": {
28
+ "value": "oklch(68% 0.024 254)",
29
+ "type": "color"
30
+ },
31
+ "primary": {
32
+ "value": "oklch(63% 0.258 262)",
33
+ "type": "color"
34
+ },
35
+ "secondary": {
36
+ "value": "oklch(63% 0.25 300)",
37
+ "type": "color"
38
+ },
39
+ "success": {
40
+ "value": "oklch(65% 0.17 165)",
41
+ "type": "color"
42
+ },
43
+ "surface": {
44
+ "value": "oklch(12% 0 0)",
45
+ "type": "color"
46
+ },
47
+ "text": {
48
+ "value": "oklch(95% 0 0)",
49
+ "type": "color"
50
+ },
51
+ "warning": {
52
+ "value": "oklch(72% 0.17 65)",
53
+ "type": "color"
54
+ }
55
+ },
56
+ "light": {
57
+ "background": {
58
+ "value": "oklch(100% 0 0)",
59
+ "type": "color"
60
+ },
61
+ "border": {
62
+ "value": "oklch(92% 0.003 264)",
63
+ "type": "color"
64
+ },
65
+ "error": {
66
+ "value": "oklch(63% 0.22 27)",
67
+ "type": "color"
68
+ },
69
+ "heading": {
70
+ "value": "oklch(15% 0.02 264)",
71
+ "type": "color"
72
+ },
73
+ "info": {
74
+ "value": "oklch(63% 0.258 262)",
75
+ "type": "color"
76
+ },
77
+ "link": {
78
+ "value": "oklch(43% 0.19 264)",
79
+ "type": "color"
80
+ },
81
+ "muted": {
82
+ "value": "oklch(52% 0.014 258)",
83
+ "type": "color"
84
+ },
85
+ "primary": {
86
+ "value": "oklch(63% 0.258 262)",
87
+ "type": "color"
88
+ },
89
+ "secondary": {
90
+ "value": "oklch(55% 0.28 300)",
91
+ "type": "color"
92
+ },
93
+ "success": {
94
+ "value": "oklch(65% 0.17 165)",
95
+ "type": "color"
96
+ },
97
+ "surface": {
98
+ "value": "oklch(96% 0.003 264)",
99
+ "type": "color"
100
+ },
101
+ "text": {
102
+ "value": "oklch(31% 0.02 257)",
103
+ "type": "color"
104
+ },
105
+ "warning": {
106
+ "value": "oklch(72% 0.17 65)",
107
+ "type": "color"
108
+ }
109
+ },
110
+ "themes": {},
111
+ "themesList": {}
112
+ }