clampography 2.0.0-beta.27 → 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 +11 -11
  2. package/css/base.min.css +1 -1
  3. package/css/clampography.css +74 -12
  4. package/css/clampography.min.css +1 -1
  5. package/css/extra.css +63 -1
  6. package/css/extra.min.css +1 -1
  7. package/css/figma-tokens.json +112 -0
  8. package/package.json +2 -3
  9. package/src/base.js +44 -13
  10. package/src/export-figma.js +43 -0
  11. package/src/extra.js +85 -2
  12. package/src/index.js +14 -4
  13. package/src/print.js +92 -0
  14. package/src/themes.js +10 -1551
package/css/base.css CHANGED
@@ -1,19 +1,19 @@
1
1
  @layer base {
2
2
 
3
3
  :where(: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);
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
11
  --font-family-base: Inter, system-ui, -apple-system, 'Segoe UI Variable Display', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
12
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.375rem + 2.5vw, 3.375rem);
14
- --clampography-h2-size: clamp(1.375rem, 1.2rem + 0.85vw, 1.875rem);
15
- --clampography-h3-size: clamp(1.125rem, 1rem + 0.625vw, 1.5rem);
16
- --clampography-h4-size: clamp(1rem, 0.917rem + 0.42vw, 1.25rem);
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
17
  --clampography-h5-size: 1rem;
18
18
  --clampography-h6-size: 0.875rem;
19
19
  --clampography-heading-scale: 1;
@@ -26,7 +26,7 @@
26
26
  }
27
27
 
28
28
  body {
29
- font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
29
+ font-size: clamp(0.875rem, 0.7917rem + 0.4167vw, 1.125rem);
30
30
  line-height: 1.75;
31
31
  text-rendering: optimizeLegibility;
32
32
  -webkit-font-smoothing: antialiased;
package/css/base.min.css CHANGED
@@ -1 +1 @@
1
- @layer base{:where(: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: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.375rem + 2.5vw, 3.375rem);--clampography-h2-size:clamp(1.375rem, 1.2rem + 0.85vw, 1.875rem);--clampography-h3-size:clamp(1.125rem, 1rem + 0.625vw, 1.5rem);--clampography-h4-size:clamp(1rem, 0.917rem + 0.42vw, 1.25rem);--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(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: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}}
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
@@ -7,19 +7,19 @@
7
7
  @layer base {
8
8
 
9
9
  :where(: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);
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
17
  --font-family-base: Inter, system-ui, -apple-system, 'Segoe UI Variable Display', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
18
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.375rem + 2.5vw, 3.375rem);
20
- --clampography-h2-size: clamp(1.375rem, 1.2rem + 0.85vw, 1.875rem);
21
- --clampography-h3-size: clamp(1.125rem, 1rem + 0.625vw, 1.5rem);
22
- --clampography-h4-size: clamp(1rem, 0.917rem + 0.42vw, 1.25rem);
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
23
  --clampography-h5-size: 1rem;
24
24
  --clampography-h6-size: 0.875rem;
25
25
  --clampography-heading-scale: 1;
@@ -32,7 +32,7 @@
32
32
  }
33
33
 
34
34
  body {
35
- font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
35
+ font-size: clamp(0.875rem, 0.7917rem + 0.4167vw, 1.125rem);
36
36
  line-height: 1.75;
37
37
  text-rendering: optimizeLegibility;
38
38
  -webkit-font-smoothing: antialiased;
@@ -575,10 +575,17 @@ body {
575
575
  /* --- extra.js --- */
576
576
  @layer base {
577
577
 
578
+ :where(:root) {
579
+ --clampography-transition-duration: 200ms;
580
+ }
581
+
578
582
  body {
579
583
  background-color: var(--clampography-background);
580
584
  color: var(--clampography-text);
581
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;
582
589
  }
583
590
 
584
591
  :root :where(h1, h2, h3, h4, h5, h6) {
@@ -680,7 +687,7 @@ body {
680
687
  }
681
688
 
682
689
  :root del {
683
- text-decoration-color: var(--clampography-secondary);
690
+ text-decoration-color: var(--clampography-error);
684
691
  text-decoration-thickness: 2px;
685
692
  }
686
693
 
@@ -699,6 +706,61 @@ body {
699
706
  border-bottom-width: 1px;
700
707
  padding-bottom: var(--spacing-sm);
701
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
+ }
702
764
  }
703
765
 
704
766
  /* --- forms.js --- */
package/css/clampography.min.css CHANGED
@@ -1 +1 @@
1
- @layer base{:where(: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: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.375rem + 2.5vw, 3.375rem);--clampography-h2-size:clamp(1.375rem, 1.2rem + 0.85vw, 1.875rem);--clampography-h3-size:clamp(1.125rem, 1rem + 0.625vw, 1.5rem);--clampography-h4-size:clamp(1rem, 0.917rem + 0.42vw, 1.25rem);--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(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: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{body{background-color:var(--clampography-background);color:var(--clampography-text);font-family:var(--font-sans, var(--font-family-base))}: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,9 +1,16 @@
1
1
  @layer base {
2
2
 
3
+ :where(:root) {
4
+ --clampography-transition-duration: 200ms;
5
+ }
6
+
3
7
  body {
4
8
  background-color: var(--clampography-background);
5
9
  color: var(--clampography-text);
6
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;
7
14
  }
8
15
 
9
16
  :root :where(h1, h2, h3, h4, h5, h6) {
@@ -105,7 +112,7 @@ body {
105
112
  }
106
113
 
107
114
  :root del {
108
- text-decoration-color: var(--clampography-secondary);
115
+ text-decoration-color: var(--clampography-error);
109
116
  text-decoration-thickness: 2px;
110
117
  }
111
118
 
@@ -124,4 +131,59 @@ body {
124
131
  border-bottom-width: 1px;
125
132
  padding-bottom: var(--spacing-sm);
126
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
+ }
127
189
  }
package/css/extra.min.css CHANGED
@@ -1 +1 @@
1
- @layer base{body{background-color:var(--clampography-background);color:var(--clampography-text);font-family:var(--font-sans, var(--font-family-base))}: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
+ }
package/package.json CHANGED
@@ -60,13 +60,12 @@
60
60
  "url": "git+https://github.com/Avaray/clampography.git"
61
61
  },
62
62
  "scripts": {
63
- "build": "bun src/convert.js",
63
+ "build": "bun src/convert.js && bun src/export-figma.js",
64
64
  "dev": "bun run dev/server.js",
65
- "dev:server": "bun run dev/server.js",
66
65
  "test": "bun test"
67
66
  },
68
67
  "sideEffects": false,
69
68
  "type": "module",
70
69
  "unpkg": "css/clampography.min.css",
71
- "version": "2.0.0-beta.27"
70
+ "version": "2.0.0-beta.28"
72
71
  }
package/src/base.js CHANGED
@@ -21,38 +21,65 @@ export default (options = {}) => {
21
21
  }
22
22
  parts.push(current.trim());
23
23
 
24
+ const typographyPrefix = options.typography && options.typography !== "global" ? ` ${options.typography}` : "";
25
+
24
26
  return parts
25
27
  .filter(Boolean) // Remove empty strings
26
28
  .map((part) => {
27
29
  if (part === ":root" || part === "body") return root;
30
+
31
+ // Apply typography scope isolation if configured
32
+ if (typographyPrefix) {
33
+ return `${root}${typographyPrefix} ${part}`;
34
+ }
35
+
28
36
  // Avoid double spacing
29
37
  return `${root} ${part}`;
30
38
  })
31
39
  .join(", ");
32
40
  };
33
41
 
42
+ // Fluid math engine: Generates mathematically perfect clamp() strings
43
+ // dynamically based on the configured min and max screen sizes.
44
+ const minScreenRem = (options.fluidMin || 320) / 16;
45
+ const maxScreenRem = (options.fluidMax || 1280) / 16;
46
+
47
+ const makeFluid = (minRem, maxRem) => {
48
+ // If min and max are the same, or if we have invalid screens, just return the static value
49
+ if (minRem === maxRem || minScreenRem >= maxScreenRem) return `${minRem}rem`;
50
+
51
+ const slope = (maxRem - minRem) / (maxScreenRem - minScreenRem);
52
+ const intersection = minRem - slope * minScreenRem;
53
+
54
+ const format = (num) => parseFloat(num.toFixed(4));
55
+
56
+ return `clamp(${minRem}rem, ${format(intersection)}rem + ${format(slope * 100)}vw, ${maxRem}rem)`;
57
+ };
58
+
34
59
  return {
35
60
  // ROOT CONFIGURATION (CSS variables)
36
61
  // Uses :where() for zero specificity so user overrides always win regardless of layer/source order
37
62
  [`:where(${root})`]: {
38
- "--spacing-xs": "clamp(0.25rem, 1.25vw, 0.75rem)",
39
- "--spacing-sm": "clamp(0.375rem, -0.0625rem + 2.1875vw, 1.25rem)",
40
- "--spacing-md": "clamp(0.5rem, 2.5vw, 1.5rem)",
41
- "--spacing-lg": "clamp(0.75rem, -0.125rem + 4.375vw, 2.5rem)",
42
- "--spacing-xl": "clamp(1rem, 5vw, 3rem)",
43
- "--list-indent": "clamp(1.5rem, 1.25rem + 1.25vw, 2rem)",
63
+ // FLUID SPACING SYSTEM
64
+ "--spacing-xs": makeFluid(0.25, 0.75),
65
+ "--spacing-sm": makeFluid(0.375, 1.25),
66
+ "--spacing-md": makeFluid(0.5, 1.5),
67
+ "--spacing-lg": makeFluid(0.75, 2.5),
68
+ "--spacing-xl": makeFluid(1, 3),
69
+ "--list-indent": makeFluid(1.5, 2),
44
70
  "--scroll-offset": "5rem",
45
71
  "--font-family-base":
46
72
  "Inter, system-ui, -apple-system, 'Segoe UI Variable Display', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif",
47
73
  "--font-family-mono":
48
74
  "ui-monospace, 'Cascadia Code', 'Cascadia Mono', 'Segoe UI Mono', 'Ubuntu Mono', SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace",
49
75
 
50
- // Heading size tokens (30→54px, 22→30px, 18→24px, 16→20px, static)
76
+ // HEADINGS FLUID TYPOGRAPHY
77
+ // Matches Tailwind CSS sizes: sm (min) to 2xl (max)
51
78
  // Override any of these in :root to customize individual headings.
52
- "--clampography-h1-size": "clamp(1.875rem, 1.375rem + 2.5vw, 3.375rem)",
53
- "--clampography-h2-size": "clamp(1.375rem, 1.2rem + 0.85vw, 1.875rem)",
54
- "--clampography-h3-size": "clamp(1.125rem, 1rem + 0.625vw, 1.5rem)",
55
- "--clampography-h4-size": "clamp(1rem, 0.917rem + 0.42vw, 1.25rem)",
79
+ "--clampography-h1-size": makeFluid(1.875, 4),
80
+ "--clampography-h2-size": makeFluid(1.25, 3),
81
+ "--clampography-h3-size": makeFluid(1.125, 2.25),
82
+ "--clampography-h4-size": makeFluid(1, 1.5),
56
83
  "--clampography-h5-size": "1rem",
57
84
  "--clampography-h6-size": "0.875rem",
58
85
 
@@ -73,8 +100,12 @@ export default (options = {}) => {
73
100
  // BODY STYLES (Typography baseline)
74
101
  // Note: font-family is intentionally NOT set here.
75
102
  // It is applied in extra.js with user-font priority via --font-sans.
76
- [root === ":root" ? "body" : root]: {
77
- "font-size": "clamp(1rem, 0.95rem + 0.25vw, 1.125rem)",
103
+ [(() => {
104
+ const typographyPrefix = options.typography && options.typography !== "global" ? ` ${options.typography}` : "";
105
+ const bodyBase = root === ":root" ? "body" : root;
106
+ return typographyPrefix ? `${bodyBase}${typographyPrefix}` : bodyBase;
107
+ })()]: {
108
+ "font-size": makeFluid(0.875, 1.125),
78
109
  "line-height": "1.75",
79
110
  "text-rendering": "optimizeLegibility",
80
111
  "-webkit-font-smoothing": "antialiased",