clampography 2.0.0 → 2.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (15) hide show
  1. package/README.md +10 -1
  2. package/css/base.css +5 -0
  3. package/css/base.min.css +1 -1
  4. package/css/clampography.css +38 -19
  5. package/css/clampography.min.css +1 -1
  6. package/css/forms.css +33 -19
  7. package/css/forms.min.css +1 -1
  8. package/package.json +1 -1
  9. package/src/base.js +5 -0
  10. package/src/forms.js +33 -19
  11. package/src/highlights.js +82 -0
  12. package/src/index.js +8 -3
  13. package/src/scrollbar.js +19 -0
  14. package/src/types/index.d.ts +4 -0
  15. package/src/types/vars.d.ts +2 -0
package/README.md CHANGED
@@ -2,7 +2,7 @@
2
2
 
3
3
  **Clampography** is a typography and theming plugin for [Tailwind CSS v4](https://tailwindcss.com/).
4
4
 
5
- When you use Tailwind CSS, the [Preflight](https://tailwindcss.com/docs/preflight) reset removes all browser defaults. You get a completely blank slate, which is great for UI, but terrible for blog articles or documentation pages because all your `<h1>`, `<p>`, `<ul>`, and other tags lose their styling.
5
+ When you use Tailwind CSS, the [Preflight](https://tailwindcss.com/docs/preflight) reset removes all browser defaults. You get a completely unstyled baseline, which is great for UI, but terrible for blog articles or documentation pages because all your `<h1>`, `<p>`, `<ul>`, and other tags lose their styling.
6
6
 
7
7
  **Clampography solves this.** It restores typography defaults and makes them mathematically perfect. It automatically generates a fluid type scale using [CSS clamp() functions](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/clamp). Your text and spacing will scale smoothly between mobile and 4K displays - without writing a single media query.
8
8
 
@@ -18,6 +18,8 @@ When you use Tailwind CSS, the [Preflight](https://tailwindcss.com/docs/prefligh
18
18
  - 💬 **TypeScript Ready:** Auto-generated [TypeScript](https://www.typescriptlang.org/) types for all CSS variables.
19
19
  - 🌍 **RTL Ready:** Works correctly in right-to-left languages out of the box.
20
20
  - 🎨 **Figma Design Tokens:** Theme values exported as `figma-tokens.json` (W3C Design Tokens).
21
+ - 🖱️ **Micro-interactions:** Themed text selections, `<mark>` highlights, and `:target` animations.
22
+ - 📜 **Themed Scrollbars:** Automatically colorize browser scrollbars to match your active theme.
21
23
  - 🖨️ **Print & A11y Optimization:** Removes decorations and forces readable black text.
22
24
 
23
25
  ## 📦 Install
@@ -78,6 +80,8 @@ Clampography is highly modular. You can configure it directly in your CSS:
78
80
  forms: true | false; /* (default: false) */
79
81
  kbd: true | false; /* (default: false) */
80
82
  print: true | false; /* (default: false) */
83
+ scrollbar: true | false; /* (default: false) */
84
+ highlights: true | false; /* (default: false) */
81
85
 
82
86
  /* Advanced Settings */
83
87
  typography: "global" | ".your-class"; /* Scope isolation */
@@ -91,6 +95,11 @@ Clampography is highly modular. You can configure it directly in your CSS:
91
95
  - 🔄 **[Configuration Flow Diagram](docs/configuration-flow.md)**
92
96
  - 🤝 **[Contributing](docs/contributing.md)**
93
97
 
98
+ ## 🌐 Browser Support
99
+ Clampography targets modern browsers to keep the CSS output clean, small, and mathematically precise without relying on heavy polyfills or fallbacks.
100
+ - **Basic (Typography Only):** ~97% global support (requires [clamp()](https://caniuse.com/css-math-functions)).
101
+ - **Optimal (Themes & Forms):** ~93% global support (requires [oklch()](https://caniuse.com/css-color-functions) and [color-mix()](https://caniuse.com/wf-color-mix)).
102
+
94
103
  ## 🙏 Inspirations
95
104
  - [daisyUI](https://daisyui.com/) created by [Pouya Saadeghi](https://saadeghi.com/)
96
105
  - The official **Typography** plugin for Tailwind CSS: [tailwindcss-typography](https://github.com/tailwindlabs/tailwindcss-typography)
package/css/base.css CHANGED
@@ -8,6 +8,8 @@
8
8
  --clampography-spacing-xl: clamp(1rem, 0.3333rem + 3.3333vw, 3rem);
9
9
  --clampography-list-indent: clamp(1.5rem, 1.3333rem + 0.8333vw, 2rem);
10
10
  --clampography-scroll-offset: 5rem;
11
+ --clampography-radius: 0.4em;
12
+ --clampography-border-width: 1px;
11
13
  --clampography-font-base: Inter, system-ui, -apple-system, 'Segoe UI Variable Display', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
12
14
  --clampography-font-mono: ui-monospace, 'Cascadia Code', 'Cascadia Mono', 'Segoe UI Mono', 'Ubuntu Mono', SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
13
15
  --clampography-fluid-min: 20;
@@ -58,6 +60,7 @@
58
60
  -webkit-font-smoothing: antialiased;
59
61
  -moz-osx-font-smoothing: grayscale;
60
62
  text-wrap: pretty;
63
+ font-size-adjust: from-font;
61
64
  }
62
65
 
63
66
  :root :where(h1, h2, h3, h4, h5, h6) {
@@ -116,6 +119,7 @@
116
119
  :root a {
117
120
  text-decoration-line: underline;
118
121
  cursor: pointer;
122
+ overflow-wrap: break-word;
119
123
  }
120
124
 
121
125
  :root :where(h1, h2, h3, h4, h5, h6) a {
@@ -176,6 +180,7 @@
176
180
  font-size: 0.875em;
177
181
  -webkit-font-smoothing: auto;
178
182
  -moz-osx-font-smoothing: auto;
183
+ overflow-wrap: break-word;
179
184
  }
180
185
 
181
186
  :root kbd {
package/css/base.min.css CHANGED
@@ -1 +1 @@
1
- @layer base{:where(:root){--clampography-spacing-xs:clamp(0.25rem, 0.0833rem + 0.8333vw, 0.75rem);--clampography-spacing-sm:clamp(0.375rem, 0.0833rem + 1.4583vw, 1.25rem);--clampography-spacing-md:clamp(0.5rem, 0.1667rem + 1.6667vw, 1.5rem);--clampography-spacing-lg:clamp(0.75rem, 0.1667rem + 2.9167vw, 2.5rem);--clampography-spacing-xl:clamp(1rem, 0.3333rem + 3.3333vw, 3rem);--clampography-list-indent:clamp(1.5rem, 1.3333rem + 0.8333vw, 2rem);--clampography-scroll-offset:5rem;--clampography-font-base:Inter, system-ui, -apple-system, 'Segoe UI Variable Display', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;--clampography-font-mono:ui-monospace, 'Cascadia Code', 'Cascadia Mono', 'Segoe UI Mono', 'Ubuntu Mono', SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;--clampography-fluid-min:20;--clampography-fluid-max:80;--clampography-h1-min:1.875;--clampography-h1-max:4;--clampography-h1-slope:calc((var(--clampography-h1-max) - var(--clampography-h1-min)) / (var(--clampography-fluid-max) - var(--clampography-fluid-min)));--clampography-h1-base:calc(var(--clampography-h1-min) - var(--clampography-h1-slope) * var(--clampography-fluid-min));--clampography-h1-size:clamp(calc(var(--clampography-h1-min) * 1rem), calc(var(--clampography-h1-base) * 1rem + var(--clampography-h1-slope) * 100vw), calc(var(--clampography-h1-max) * 1rem));--clampography-h2-min:1.25;--clampography-h2-max:3;--clampography-h2-slope:calc((var(--clampography-h2-max) - var(--clampography-h2-min)) / (var(--clampography-fluid-max) - var(--clampography-fluid-min)));--clampography-h2-base:calc(var(--clampography-h2-min) - var(--clampography-h2-slope) * var(--clampography-fluid-min));--clampography-h2-size:clamp(calc(var(--clampography-h2-min) * 1rem), calc(var(--clampography-h2-base) * 1rem + var(--clampography-h2-slope) * 100vw), calc(var(--clampography-h2-max) * 1rem));--clampography-h3-min:1.125;--clampography-h3-max:2.25;--clampography-h3-slope:calc((var(--clampography-h3-max) - var(--clampography-h3-min)) / (var(--clampography-fluid-max) - var(--clampography-fluid-min)));--clampography-h3-base:calc(var(--clampography-h3-min) - var(--clampography-h3-slope) * var(--clampography-fluid-min));--clampography-h3-size:clamp(calc(var(--clampography-h3-min) * 1rem), calc(var(--clampography-h3-base) * 1rem + var(--clampography-h3-slope) * 100vw), calc(var(--clampography-h3-max) * 1rem));--clampography-h4-min:1;--clampography-h4-max:1.5;--clampography-h4-slope:calc((var(--clampography-h4-max) - var(--clampography-h4-min)) / (var(--clampography-fluid-max) - var(--clampography-fluid-min)));--clampography-h4-base:calc(var(--clampography-h4-min) - var(--clampography-h4-slope) * var(--clampography-fluid-min));--clampography-h4-size:clamp(calc(var(--clampography-h4-min) * 1rem), calc(var(--clampography-h4-base) * 1rem + var(--clampography-h4-slope) * 100vw), calc(var(--clampography-h4-max) * 1rem));--clampography-h5-min:1;--clampography-h5-max:1;--clampography-h5-slope:calc((var(--clampography-h5-max) - var(--clampography-h5-min)) / (var(--clampography-fluid-max) - var(--clampography-fluid-min)));--clampography-h5-base:calc(var(--clampography-h5-min) - var(--clampography-h5-slope) * var(--clampography-fluid-min));--clampography-h5-size:clamp(calc(var(--clampography-h5-min) * 1rem), calc(var(--clampography-h5-base) * 1rem + var(--clampography-h5-slope) * 100vw), calc(var(--clampography-h5-max) * 1rem));--clampography-h6-min:0.875;--clampography-h6-max:0.875;--clampography-h6-slope:calc((var(--clampography-h6-max) - var(--clampography-h6-min)) / (var(--clampography-fluid-max) - var(--clampography-fluid-min)));--clampography-h6-base:calc(var(--clampography-h6-min) - var(--clampography-h6-slope) * var(--clampography-fluid-min));--clampography-h6-size:clamp(calc(var(--clampography-h6-min) * 1rem), calc(var(--clampography-h6-base) * 1rem + var(--clampography-h6-slope) * 100vw), calc(var(--clampography-h6-max) * 1rem));--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(--clampography-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(--clampography-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(--clampography-spacing-xl);margin-bottom:var(--clampography-spacing-md)}:root h3{font-size:calc(var(--clampography-h3-size) * var(--clampography-h3-scale));line-height:1.5;margin-top:var(--clampography-spacing-lg);margin-bottom:var(--clampography-spacing-sm)}:root h4{font-size:calc(var(--clampography-h4-size) * var(--clampography-h4-scale));line-height:1.5;margin-top:var(--clampography-spacing-lg);margin-bottom:var(--clampography-spacing-sm)}:root h5{font-size:calc(var(--clampography-h5-size) * var(--clampography-h5-scale));line-height:1.5;margin-top:var(--clampography-spacing-md);margin-bottom:var(--clampography-spacing-xs)}:root h6{font-size:calc(var(--clampography-h6-size) * var(--clampography-h6-scale));line-height:1.5;margin-top:var(--clampography-spacing-md);margin-bottom:var(--clampography-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(--clampography-spacing-md);padding-inline-start:0}:root menu > li::before{display:none}:root hgroup{margin-bottom:var(--clampography-spacing-lg)}:root hgroup :where(h1, h2, h3, h4, h5, h6){margin-bottom:var(--clampography-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(--clampography-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(--clampography-font-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(--clampography-spacing-md);margin-bottom:var(--clampography-spacing-md)}:root time{font-style:normal;font-variant-numeric:tabular-nums}:root blockquote{margin-top:var(--clampography-spacing-lg);margin-bottom:var(--clampography-spacing-lg);padding-inline-start:var(--clampography-spacing-md)}:root blockquote blockquote{margin-top:var(--clampography-spacing-sm);margin-bottom:var(--clampography-spacing-sm);padding-inline-start:var(--clampography-spacing-sm)}:root q{font-style:inherit}:root :where(ul, ol){list-style:none;margin-bottom:var(--clampography-spacing-md);padding-inline-start:var(--clampography-list-indent)}:root li{position:relative}:root li + li{margin-top:var(--clampography-spacing-xs)}:root li > :where(p, dl, figure, table, pre){margin-top:0;margin-bottom:0}:root li > blockquote{margin-top:var(--clampography-spacing-sm);margin-bottom:var(--clampography-spacing-sm)}:root li > :where(ul, ol){margin-top:var(--clampography-spacing-xs);margin-bottom:0}:root ul > li::before{content:'';position:absolute;inset-inline-end:100%;margin-inline-end: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;inset-inline-end:100%;margin-inline-end:0.5em;font-weight:600;font-variant-numeric:tabular-nums;text-align:end;color:currentColor}:root dl{margin-top:var(--clampography-spacing-md);margin-bottom:var(--clampography-spacing-md)}:root dt{font-weight:600;margin-top:var(--clampography-spacing-sm)}:root dt:first-child{margin-top:0}:root dd{margin-inline-start:var(--clampography-spacing-md)}:root dt + dd{margin-top:var(--clampography-spacing-xs)}:root dd + dd{margin-top:var(--clampography-spacing-xs)}:root dd:last-child{margin-bottom:0}:root pre{margin-top:var(--clampography-spacing-md);margin-bottom:var(--clampography-spacing-md);font-family:var(--clampography-font-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(--clampography-spacing-md);margin-bottom:var(--clampography-spacing-md);padding:var(--clampography-spacing-sm)}:root legend{font-weight:600;padding:0 var(--clampography-spacing-xs)}:root label{display:inline-block;font-weight:600;margin-bottom:var(--clampography-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(--clampography-spacing-lg);margin-bottom:var(--clampography-spacing-lg)}:root figcaption{margin-top:0.375rem;font-size:0.875em;line-height:1.5}:root table{width:100%;margin-top:var(--clampography-spacing-md);margin-bottom:var(--clampography-spacing-md);border-collapse:collapse;font-size:1em;line-height:1.6}:root caption{margin-bottom:var(--clampography-spacing-xs);font-size:0.875em;font-weight:600;text-align:start}:root th, :root td{padding:var(--clampography-spacing-xs) var(--clampography-spacing-sm);text-align:start}: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(--clampography-spacing-xl);margin-bottom:var(--clampography-spacing-xl);border:0;border-top:1px solid}:root :where(:focus, :focus-visible){outline-offset:2px}:root details{margin-top:var(--clampography-spacing-md);margin-bottom:var(--clampography-spacing-md)}:root summary{cursor:pointer;font-weight:600}:root details[open] > summary{margin-bottom:var(--clampography-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){--clampography-spacing-xs:clamp(0.25rem, 0.0833rem + 0.8333vw, 0.75rem);--clampography-spacing-sm:clamp(0.375rem, 0.0833rem + 1.4583vw, 1.25rem);--clampography-spacing-md:clamp(0.5rem, 0.1667rem + 1.6667vw, 1.5rem);--clampography-spacing-lg:clamp(0.75rem, 0.1667rem + 2.9167vw, 2.5rem);--clampography-spacing-xl:clamp(1rem, 0.3333rem + 3.3333vw, 3rem);--clampography-list-indent:clamp(1.5rem, 1.3333rem + 0.8333vw, 2rem);--clampography-scroll-offset:5rem;--clampography-radius:0.4em;--clampography-border-width:1px;--clampography-font-base:Inter, system-ui, -apple-system, 'Segoe UI Variable Display', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;--clampography-font-mono:ui-monospace, 'Cascadia Code', 'Cascadia Mono', 'Segoe UI Mono', 'Ubuntu Mono', SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;--clampography-fluid-min:20;--clampography-fluid-max:80;--clampography-h1-min:1.875;--clampography-h1-max:4;--clampography-h1-slope:calc((var(--clampography-h1-max) - var(--clampography-h1-min)) / (var(--clampography-fluid-max) - var(--clampography-fluid-min)));--clampography-h1-base:calc(var(--clampography-h1-min) - var(--clampography-h1-slope) * var(--clampography-fluid-min));--clampography-h1-size:clamp(calc(var(--clampography-h1-min) * 1rem), calc(var(--clampography-h1-base) * 1rem + var(--clampography-h1-slope) * 100vw), calc(var(--clampography-h1-max) * 1rem));--clampography-h2-min:1.25;--clampography-h2-max:3;--clampography-h2-slope:calc((var(--clampography-h2-max) - var(--clampography-h2-min)) / (var(--clampography-fluid-max) - var(--clampography-fluid-min)));--clampography-h2-base:calc(var(--clampography-h2-min) - var(--clampography-h2-slope) * var(--clampography-fluid-min));--clampography-h2-size:clamp(calc(var(--clampography-h2-min) * 1rem), calc(var(--clampography-h2-base) * 1rem + var(--clampography-h2-slope) * 100vw), calc(var(--clampography-h2-max) * 1rem));--clampography-h3-min:1.125;--clampography-h3-max:2.25;--clampography-h3-slope:calc((var(--clampography-h3-max) - var(--clampography-h3-min)) / (var(--clampography-fluid-max) - var(--clampography-fluid-min)));--clampography-h3-base:calc(var(--clampography-h3-min) - var(--clampography-h3-slope) * var(--clampography-fluid-min));--clampography-h3-size:clamp(calc(var(--clampography-h3-min) * 1rem), calc(var(--clampography-h3-base) * 1rem + var(--clampography-h3-slope) * 100vw), calc(var(--clampography-h3-max) * 1rem));--clampography-h4-min:1;--clampography-h4-max:1.5;--clampography-h4-slope:calc((var(--clampography-h4-max) - var(--clampography-h4-min)) / (var(--clampography-fluid-max) - var(--clampography-fluid-min)));--clampography-h4-base:calc(var(--clampography-h4-min) - var(--clampography-h4-slope) * var(--clampography-fluid-min));--clampography-h4-size:clamp(calc(var(--clampography-h4-min) * 1rem), calc(var(--clampography-h4-base) * 1rem + var(--clampography-h4-slope) * 100vw), calc(var(--clampography-h4-max) * 1rem));--clampography-h5-min:1;--clampography-h5-max:1;--clampography-h5-slope:calc((var(--clampography-h5-max) - var(--clampography-h5-min)) / (var(--clampography-fluid-max) - var(--clampography-fluid-min)));--clampography-h5-base:calc(var(--clampography-h5-min) - var(--clampography-h5-slope) * var(--clampography-fluid-min));--clampography-h5-size:clamp(calc(var(--clampography-h5-min) * 1rem), calc(var(--clampography-h5-base) * 1rem + var(--clampography-h5-slope) * 100vw), calc(var(--clampography-h5-max) * 1rem));--clampography-h6-min:0.875;--clampography-h6-max:0.875;--clampography-h6-slope:calc((var(--clampography-h6-max) - var(--clampography-h6-min)) / (var(--clampography-fluid-max) - var(--clampography-fluid-min)));--clampography-h6-base:calc(var(--clampography-h6-min) - var(--clampography-h6-slope) * var(--clampography-fluid-min));--clampography-h6-size:clamp(calc(var(--clampography-h6-min) * 1rem), calc(var(--clampography-h6-base) * 1rem + var(--clampography-h6-slope) * 100vw), calc(var(--clampography-h6-max) * 1rem));--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;font-size-adjust:from-font}:root :where(h1, h2, h3, h4, h5, h6){font-weight:600;scroll-margin-top:var(--clampography-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(--clampography-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(--clampography-spacing-xl);margin-bottom:var(--clampography-spacing-md)}:root h3{font-size:calc(var(--clampography-h3-size) * var(--clampography-h3-scale));line-height:1.5;margin-top:var(--clampography-spacing-lg);margin-bottom:var(--clampography-spacing-sm)}:root h4{font-size:calc(var(--clampography-h4-size) * var(--clampography-h4-scale));line-height:1.5;margin-top:var(--clampography-spacing-lg);margin-bottom:var(--clampography-spacing-sm)}:root h5{font-size:calc(var(--clampography-h5-size) * var(--clampography-h5-scale));line-height:1.5;margin-top:var(--clampography-spacing-md);margin-bottom:var(--clampography-spacing-xs)}:root h6{font-size:calc(var(--clampography-h6-size) * var(--clampography-h6-scale));line-height:1.5;margin-top:var(--clampography-spacing-md);margin-bottom:var(--clampography-spacing-xs)}:root :is(h1, h2, h3, h4, h5, h6):first-child{margin-top:0}:root a{text-decoration-line:underline;cursor:pointer;overflow-wrap:break-word}:root :where(h1, h2, h3, h4, h5, h6) a{text-decoration:none}:root menu{list-style:none;margin-bottom:var(--clampography-spacing-md);padding-inline-start:0}:root menu > li::before{display:none}:root hgroup{margin-bottom:var(--clampography-spacing-lg)}:root hgroup :where(h1, h2, h3, h4, h5, h6){margin-bottom:var(--clampography-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(--clampography-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(--clampography-font-mono);font-size:0.875em;-webkit-font-smoothing:auto;-moz-osx-font-smoothing:auto;overflow-wrap:break-word}: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(--clampography-spacing-md);margin-bottom:var(--clampography-spacing-md)}:root time{font-style:normal;font-variant-numeric:tabular-nums}:root blockquote{margin-top:var(--clampography-spacing-lg);margin-bottom:var(--clampography-spacing-lg);padding-inline-start:var(--clampography-spacing-md)}:root blockquote blockquote{margin-top:var(--clampography-spacing-sm);margin-bottom:var(--clampography-spacing-sm);padding-inline-start:var(--clampography-spacing-sm)}:root q{font-style:inherit}:root :where(ul, ol){list-style:none;margin-bottom:var(--clampography-spacing-md);padding-inline-start:var(--clampography-list-indent)}:root li{position:relative}:root li + li{margin-top:var(--clampography-spacing-xs)}:root li > :where(p, dl, figure, table, pre){margin-top:0;margin-bottom:0}:root li > blockquote{margin-top:var(--clampography-spacing-sm);margin-bottom:var(--clampography-spacing-sm)}:root li > :where(ul, ol){margin-top:var(--clampography-spacing-xs);margin-bottom:0}:root ul > li::before{content:'';position:absolute;inset-inline-end:100%;margin-inline-end: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;inset-inline-end:100%;margin-inline-end:0.5em;font-weight:600;font-variant-numeric:tabular-nums;text-align:end;color:currentColor}:root dl{margin-top:var(--clampography-spacing-md);margin-bottom:var(--clampography-spacing-md)}:root dt{font-weight:600;margin-top:var(--clampography-spacing-sm)}:root dt:first-child{margin-top:0}:root dd{margin-inline-start:var(--clampography-spacing-md)}:root dt + dd{margin-top:var(--clampography-spacing-xs)}:root dd + dd{margin-top:var(--clampography-spacing-xs)}:root dd:last-child{margin-bottom:0}:root pre{margin-top:var(--clampography-spacing-md);margin-bottom:var(--clampography-spacing-md);font-family:var(--clampography-font-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(--clampography-spacing-md);margin-bottom:var(--clampography-spacing-md);padding:var(--clampography-spacing-sm)}:root legend{font-weight:600;padding:0 var(--clampography-spacing-xs)}:root label{display:inline-block;font-weight:600;margin-bottom:var(--clampography-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(--clampography-spacing-lg);margin-bottom:var(--clampography-spacing-lg)}:root figcaption{margin-top:0.375rem;font-size:0.875em;line-height:1.5}:root table{width:100%;margin-top:var(--clampography-spacing-md);margin-bottom:var(--clampography-spacing-md);border-collapse:collapse;font-size:1em;line-height:1.6}:root caption{margin-bottom:var(--clampography-spacing-xs);font-size:0.875em;font-weight:600;text-align:start}:root th, :root td{padding:var(--clampography-spacing-xs) var(--clampography-spacing-sm);text-align:start}: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(--clampography-spacing-xl);margin-bottom:var(--clampography-spacing-xl);border:0;border-top:1px solid}:root :where(:focus, :focus-visible){outline-offset:2px}:root details{margin-top:var(--clampography-spacing-md);margin-bottom:var(--clampography-spacing-md)}:root summary{cursor:pointer;font-weight:600}:root details[open] > summary{margin-bottom:var(--clampography-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
@@ -14,6 +14,8 @@
14
14
  --clampography-spacing-xl: clamp(1rem, 0.3333rem + 3.3333vw, 3rem);
15
15
  --clampography-list-indent: clamp(1.5rem, 1.3333rem + 0.8333vw, 2rem);
16
16
  --clampography-scroll-offset: 5rem;
17
+ --clampography-radius: 0.4em;
18
+ --clampography-border-width: 1px;
17
19
  --clampography-font-base: Inter, system-ui, -apple-system, 'Segoe UI Variable Display', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
18
20
  --clampography-font-mono: ui-monospace, 'Cascadia Code', 'Cascadia Mono', 'Segoe UI Mono', 'Ubuntu Mono', SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
19
21
  --clampography-fluid-min: 20;
@@ -64,6 +66,7 @@
64
66
  -webkit-font-smoothing: antialiased;
65
67
  -moz-osx-font-smoothing: grayscale;
66
68
  text-wrap: pretty;
69
+ font-size-adjust: from-font;
67
70
  }
68
71
 
69
72
  :root :where(h1, h2, h3, h4, h5, h6) {
@@ -122,6 +125,7 @@
122
125
  :root a {
123
126
  text-decoration-line: underline;
124
127
  cursor: pointer;
128
+ overflow-wrap: break-word;
125
129
  }
126
130
 
127
131
  :root :where(h1, h2, h3, h4, h5, h6) a {
@@ -182,6 +186,7 @@
182
186
  font-size: 0.875em;
183
187
  -webkit-font-smoothing: auto;
184
188
  -moz-osx-font-smoothing: auto;
189
+ overflow-wrap: break-word;
185
190
  }
186
191
 
187
192
  :root kbd {
@@ -779,12 +784,12 @@
779
784
  display: inline-flex;
780
785
  align-items: center;
781
786
  justify-content: center;
782
- gap: 0.375em;
787
+ gap: var(--clampography-spacing-xs);
783
788
  padding: var(--clampography-spacing-xs) var(--clampography-spacing-sm);
784
789
  background-color: var(--clampography-surface);
785
790
  color: var(--clampography-text);
786
- border: 1px solid var(--clampography-border);
787
- border-radius: 0.375rem;
791
+ border: var(--clampography-border-width) solid var(--clampography-border);
792
+ border-radius: var(--clampography-radius);
788
793
  font-weight: 500;
789
794
  white-space: nowrap;
790
795
  transition-property: background-color, border-color, color, box-shadow;
@@ -806,19 +811,19 @@
806
811
  filter: brightness(1.1);
807
812
  }
808
813
 
809
- :root :where(input:not([type='checkbox'], [type='radio'], [type='range'], [type='color']), textarea, select) {
814
+ :root :where(input:not([type='checkbox'], [type='radio'], [type='range'], [type='color'], [type='file'], [type='hidden'], [type='submit'], [type='reset'], [type='button'], [type='image']), textarea, select) {
810
815
  display: block;
811
816
  width: 100%;
812
817
  padding: var(--clampography-spacing-xs) var(--clampography-spacing-sm);
813
818
  background-color: var(--clampography-background);
814
819
  color: var(--clampography-text);
815
- border: 1px solid var(--clampography-border);
816
- border-radius: 0.375rem;
820
+ border: var(--clampography-border-width) solid var(--clampography-border);
821
+ border-radius: var(--clampography-radius);
817
822
  transition-property: border-color, box-shadow;
818
823
  transition-duration: 150ms;
819
824
  }
820
825
 
821
- :root :where(input:not([type='checkbox'], [type='radio'], [type='range'], [type='color']), textarea, select):focus {
826
+ :root :where(input:not([type='checkbox'], [type='radio'], [type='range'], [type='color'], [type='file'], [type='hidden'], [type='submit'], [type='reset'], [type='button'], [type='image']), textarea, select):focus-visible {
822
827
  outline: none;
823
828
  border-color: var(--clampography-primary);
824
829
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--clampography-primary) 20%, transparent);
@@ -834,11 +839,11 @@
834
839
  cursor: default;
835
840
  }
836
841
 
837
- :root :where(input, textarea, select):user-invalid {
842
+ :root :where(input, textarea, select):where(:user-invalid, [aria-invalid='true']) {
838
843
  border-color: var(--clampography-error);
839
844
  }
840
845
 
841
- :root :where(input, textarea, select):user-invalid:focus {
846
+ :root :where(input, textarea, select):where(:user-invalid, [aria-invalid='true']):focus-visible {
842
847
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--clampography-error) 20%, transparent);
843
848
  }
844
849
 
@@ -855,15 +860,20 @@
855
860
  color: var(--clampography-muted);
856
861
  }
857
862
 
858
- :root select {
863
+ :root select:not([multiple]):not([size]) {
859
864
  appearance: none;
860
- 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");
861
- background-position: inline-end 0.5rem center;
865
+ background-image: linear-gradient(45deg, transparent 50%, var(--clampography-text) 50%), linear-gradient(135deg, var(--clampography-text) 50%, transparent 50%);
866
+ background-position: calc(100% - 1.25rem - 5px) center, calc(100% - 1.25rem) center;
867
+ background-size: 5px 5px, 5px 5px;
862
868
  background-repeat: no-repeat;
863
- background-size: 1.5em 1.5em;
864
869
  padding-inline-end: 2.5rem;
865
870
  }
866
871
 
872
+ :root select[multiple], :root select[size] {
873
+ appearance: auto;
874
+ padding: var(--clampography-spacing-xs) var(--clampography-spacing-sm);
875
+ }
876
+
867
877
  :root [type='file'] {
868
878
  padding: 0;
869
879
  background-color: transparent;
@@ -878,8 +888,8 @@
878
888
  margin-inline-end: var(--clampography-spacing-sm);
879
889
  background-color: var(--clampography-surface);
880
890
  color: var(--clampography-text);
881
- border: 1px solid var(--clampography-border);
882
- border-radius: 0.375rem;
891
+ border: var(--clampography-border-width) solid var(--clampography-border);
892
+ border-radius: var(--clampography-radius);
883
893
  font-family: inherit;
884
894
  font-size: inherit;
885
895
  cursor: pointer;
@@ -915,15 +925,24 @@
915
925
  padding: 0.125rem;
916
926
  width: 2.5rem;
917
927
  height: 2.5rem;
918
- border: 1px solid var(--clampography-border);
919
- border-radius: 0.375rem;
928
+ border: var(--clampography-border-width) solid var(--clampography-border);
929
+ border-radius: var(--clampography-radius);
920
930
  background-color: var(--clampography-background);
921
931
  cursor: pointer;
922
932
  }
923
933
 
934
+ :root [type='color']::-webkit-color-swatch-wrapper {
935
+ padding: 0;
936
+ }
937
+
938
+ :root [type='color']::-webkit-color-swatch {
939
+ border: none;
940
+ border-radius: max(0px, calc(var(--clampography-radius) - 0.125rem));
941
+ }
942
+
924
943
  :root fieldset {
925
- border: 1px solid var(--clampography-border);
926
- border-radius: 0.5rem;
944
+ border: var(--clampography-border-width) solid var(--clampography-border);
945
+ border-radius: calc(var(--clampography-radius) * 1.5);
927
946
  background-color: var(--clampography-surface);
928
947
  }
929
948
 
package/css/clampography.min.css CHANGED
@@ -1 +1 @@
1
- @layer base{:where(:root){--clampography-spacing-xs:clamp(0.25rem, 0.0833rem + 0.8333vw, 0.75rem);--clampography-spacing-sm:clamp(0.375rem, 0.0833rem + 1.4583vw, 1.25rem);--clampography-spacing-md:clamp(0.5rem, 0.1667rem + 1.6667vw, 1.5rem);--clampography-spacing-lg:clamp(0.75rem, 0.1667rem + 2.9167vw, 2.5rem);--clampography-spacing-xl:clamp(1rem, 0.3333rem + 3.3333vw, 3rem);--clampography-list-indent:clamp(1.5rem, 1.3333rem + 0.8333vw, 2rem);--clampography-scroll-offset:5rem;--clampography-font-base:Inter, system-ui, -apple-system, 'Segoe UI Variable Display', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;--clampography-font-mono:ui-monospace, 'Cascadia Code', 'Cascadia Mono', 'Segoe UI Mono', 'Ubuntu Mono', SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;--clampography-fluid-min:20;--clampography-fluid-max:80;--clampography-h1-min:1.875;--clampography-h1-max:4;--clampography-h1-slope:calc((var(--clampography-h1-max) - var(--clampography-h1-min)) / (var(--clampography-fluid-max) - var(--clampography-fluid-min)));--clampography-h1-base:calc(var(--clampography-h1-min) - var(--clampography-h1-slope) * var(--clampography-fluid-min));--clampography-h1-size:clamp(calc(var(--clampography-h1-min) * 1rem), calc(var(--clampography-h1-base) * 1rem + var(--clampography-h1-slope) * 100vw), calc(var(--clampography-h1-max) * 1rem));--clampography-h2-min:1.25;--clampography-h2-max:3;--clampography-h2-slope:calc((var(--clampography-h2-max) - var(--clampography-h2-min)) / (var(--clampography-fluid-max) - var(--clampography-fluid-min)));--clampography-h2-base:calc(var(--clampography-h2-min) - var(--clampography-h2-slope) * var(--clampography-fluid-min));--clampography-h2-size:clamp(calc(var(--clampography-h2-min) * 1rem), calc(var(--clampography-h2-base) * 1rem + var(--clampography-h2-slope) * 100vw), calc(var(--clampography-h2-max) * 1rem));--clampography-h3-min:1.125;--clampography-h3-max:2.25;--clampography-h3-slope:calc((var(--clampography-h3-max) - var(--clampography-h3-min)) / (var(--clampography-fluid-max) - var(--clampography-fluid-min)));--clampography-h3-base:calc(var(--clampography-h3-min) - var(--clampography-h3-slope) * var(--clampography-fluid-min));--clampography-h3-size:clamp(calc(var(--clampography-h3-min) * 1rem), calc(var(--clampography-h3-base) * 1rem + var(--clampography-h3-slope) * 100vw), calc(var(--clampography-h3-max) * 1rem));--clampography-h4-min:1;--clampography-h4-max:1.5;--clampography-h4-slope:calc((var(--clampography-h4-max) - var(--clampography-h4-min)) / (var(--clampography-fluid-max) - var(--clampography-fluid-min)));--clampography-h4-base:calc(var(--clampography-h4-min) - var(--clampography-h4-slope) * var(--clampography-fluid-min));--clampography-h4-size:clamp(calc(var(--clampography-h4-min) * 1rem), calc(var(--clampography-h4-base) * 1rem + var(--clampography-h4-slope) * 100vw), calc(var(--clampography-h4-max) * 1rem));--clampography-h5-min:1;--clampography-h5-max:1;--clampography-h5-slope:calc((var(--clampography-h5-max) - var(--clampography-h5-min)) / (var(--clampography-fluid-max) - var(--clampography-fluid-min)));--clampography-h5-base:calc(var(--clampography-h5-min) - var(--clampography-h5-slope) * var(--clampography-fluid-min));--clampography-h5-size:clamp(calc(var(--clampography-h5-min) * 1rem), calc(var(--clampography-h5-base) * 1rem + var(--clampography-h5-slope) * 100vw), calc(var(--clampography-h5-max) * 1rem));--clampography-h6-min:0.875;--clampography-h6-max:0.875;--clampography-h6-slope:calc((var(--clampography-h6-max) - var(--clampography-h6-min)) / (var(--clampography-fluid-max) - var(--clampography-fluid-min)));--clampography-h6-base:calc(var(--clampography-h6-min) - var(--clampography-h6-slope) * var(--clampography-fluid-min));--clampography-h6-size:clamp(calc(var(--clampography-h6-min) * 1rem), calc(var(--clampography-h6-base) * 1rem + var(--clampography-h6-slope) * 100vw), calc(var(--clampography-h6-max) * 1rem));--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(--clampography-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(--clampography-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(--clampography-spacing-xl);margin-bottom:var(--clampography-spacing-md)}:root h3{font-size:calc(var(--clampography-h3-size) * var(--clampography-h3-scale));line-height:1.5;margin-top:var(--clampography-spacing-lg);margin-bottom:var(--clampography-spacing-sm)}:root h4{font-size:calc(var(--clampography-h4-size) * var(--clampography-h4-scale));line-height:1.5;margin-top:var(--clampography-spacing-lg);margin-bottom:var(--clampography-spacing-sm)}:root h5{font-size:calc(var(--clampography-h5-size) * var(--clampography-h5-scale));line-height:1.5;margin-top:var(--clampography-spacing-md);margin-bottom:var(--clampography-spacing-xs)}:root h6{font-size:calc(var(--clampography-h6-size) * var(--clampography-h6-scale));line-height:1.5;margin-top:var(--clampography-spacing-md);margin-bottom:var(--clampography-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(--clampography-spacing-md);padding-inline-start:0}:root menu > li::before{display:none}:root hgroup{margin-bottom:var(--clampography-spacing-lg)}:root hgroup :where(h1, h2, h3, h4, h5, h6){margin-bottom:var(--clampography-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(--clampography-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(--clampography-font-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(--clampography-spacing-md);margin-bottom:var(--clampography-spacing-md)}:root time{font-style:normal;font-variant-numeric:tabular-nums}:root blockquote{margin-top:var(--clampography-spacing-lg);margin-bottom:var(--clampography-spacing-lg);padding-inline-start:var(--clampography-spacing-md)}:root blockquote blockquote{margin-top:var(--clampography-spacing-sm);margin-bottom:var(--clampography-spacing-sm);padding-inline-start:var(--clampography-spacing-sm)}:root q{font-style:inherit}:root :where(ul, ol){list-style:none;margin-bottom:var(--clampography-spacing-md);padding-inline-start:var(--clampography-list-indent)}:root li{position:relative}:root li + li{margin-top:var(--clampography-spacing-xs)}:root li > :where(p, dl, figure, table, pre){margin-top:0;margin-bottom:0}:root li > blockquote{margin-top:var(--clampography-spacing-sm);margin-bottom:var(--clampography-spacing-sm)}:root li > :where(ul, ol){margin-top:var(--clampography-spacing-xs);margin-bottom:0}:root ul > li::before{content:'';position:absolute;inset-inline-end:100%;margin-inline-end: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;inset-inline-end:100%;margin-inline-end:0.5em;font-weight:600;font-variant-numeric:tabular-nums;text-align:end;color:currentColor}:root dl{margin-top:var(--clampography-spacing-md);margin-bottom:var(--clampography-spacing-md)}:root dt{font-weight:600;margin-top:var(--clampography-spacing-sm)}:root dt:first-child{margin-top:0}:root dd{margin-inline-start:var(--clampography-spacing-md)}:root dt + dd{margin-top:var(--clampography-spacing-xs)}:root dd + dd{margin-top:var(--clampography-spacing-xs)}:root dd:last-child{margin-bottom:0}:root pre{margin-top:var(--clampography-spacing-md);margin-bottom:var(--clampography-spacing-md);font-family:var(--clampography-font-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(--clampography-spacing-md);margin-bottom:var(--clampography-spacing-md);padding:var(--clampography-spacing-sm)}:root legend{font-weight:600;padding:0 var(--clampography-spacing-xs)}:root label{display:inline-block;font-weight:600;margin-bottom:var(--clampography-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(--clampography-spacing-lg);margin-bottom:var(--clampography-spacing-lg)}:root figcaption{margin-top:0.375rem;font-size:0.875em;line-height:1.5}:root table{width:100%;margin-top:var(--clampography-spacing-md);margin-bottom:var(--clampography-spacing-md);border-collapse:collapse;font-size:1em;line-height:1.6}:root caption{margin-bottom:var(--clampography-spacing-xs);font-size:0.875em;font-weight:600;text-align:start}:root th, :root td{padding:var(--clampography-spacing-xs) var(--clampography-spacing-sm);text-align:start}: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(--clampography-spacing-xl);margin-bottom:var(--clampography-spacing-xl);border:0;border-top:1px solid}:root :where(:focus, :focus-visible){outline-offset:2px}:root details{margin-top:var(--clampography-spacing-md);margin-bottom:var(--clampography-spacing-md)}:root summary{cursor:pointer;font-weight:600}:root details[open] > summary{margin-bottom:var(--clampography-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){color-scheme:light;--clampography-background:oklch(100.0% 0.000 89.9);--clampography-border:oklch(94.6% 0.000 89.9);--clampography-error:oklch(65.4% 0.229 27.0);--clampography-heading:oklch(15.0% 0.021 264.3);--clampography-info:oklch(68.3% 0.166 259.7);--clampography-link:oklch(60.3% 0.216 259.8);--clampography-muted:oklch(51.9% 0.014 259.8);--clampography-primary:oklch(60.3% 0.216 259.8);--clampography-secondary:oklch(54.9% 0.280 300.0);--clampography-success:oklch(75.8% 0.166 161.7);--clampography-surface:oklch(98.5% 0.000 89.9);--clampography-text:oklch(31.1% 0.020 257.3);--clampography-warning:oklch(79.9% 0.136 72.2)}@media (prefers-color-scheme: dark){:root{color-scheme:dark;--clampography-background:oklch(13.3% 0.016 284.0);--clampography-border:oklch(43.4% 0.006 258.3);--clampography-error:oklch(62.9% 0.220 27.0);--clampography-heading:oklch(94.6% 0.000 89.9);--clampography-info:oklch(71.2% 0.155 251.4);--clampography-link:oklch(75.3% 0.133 248.6);--clampography-muted:oklch(68.9% 0.006 264.5);--clampography-primary:oklch(75.3% 0.133 248.6);--clampography-secondary:oklch(62.6% 0.243 301.2);--clampography-success:oklch(66.3% 0.148 160.6);--clampography-surface:oklch(21.2% 0.009 255.6);--clampography-text:oklch(88.8% 0.007 268.5);--clampography-warning:oklch(72.1% 0.164 63.1)}}[data-theme="dark"]{color-scheme:dark;--clampography-background:oklch(13.3% 0.016 284.0);--clampography-border:oklch(43.4% 0.006 258.3);--clampography-error:oklch(62.9% 0.220 27.0);--clampography-heading:oklch(94.6% 0.000 89.9);--clampography-info:oklch(71.2% 0.155 251.4);--clampography-link:oklch(75.3% 0.133 248.6);--clampography-muted:oklch(68.9% 0.006 264.5);--clampography-primary:oklch(75.3% 0.133 248.6);--clampography-secondary:oklch(62.6% 0.243 301.2);--clampography-success:oklch(66.3% 0.148 160.6);--clampography-surface:oklch(21.2% 0.009 255.6);--clampography-text:oklch(88.8% 0.007 268.5);--clampography-warning:oklch(72.1% 0.164 63.1)}[data-theme="light"]{color-scheme:light;--clampography-background:oklch(100.0% 0.000 89.9);--clampography-border:oklch(94.6% 0.000 89.9);--clampography-error:oklch(65.4% 0.229 27.0);--clampography-heading:oklch(15.0% 0.021 264.3);--clampography-info:oklch(68.3% 0.166 259.7);--clampography-link:oklch(60.3% 0.216 259.8);--clampography-muted:oklch(51.9% 0.014 259.8);--clampography-primary:oklch(60.3% 0.216 259.8);--clampography-secondary:oklch(54.9% 0.280 300.0);--clampography-success:oklch(75.8% 0.166 161.7);--clampography-surface:oklch(98.5% 0.000 89.9);--clampography-text:oklch(31.1% 0.020 257.3);--clampography-warning:oklch(79.9% 0.136 72.2)}}@layer base{:where(:root){--clampography-transition-duration:200ms}body{background-color:var(--clampography-background);color:var(--clampography-text);font-family:var(--font-sans, var(--clampography-font-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(--clampography-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(--clampography-spacing-md)}:root table{padding:var(--clampography-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(--clampography-spacing-xl);margin-bottom:var(--clampography-spacing-xl);background-color:var(--clampography-border)}:root blockquote{border-inline-start-width:4px;border-inline-start-color:var(--clampography-primary);background-color:var(--clampography-surface);padding:var(--clampography-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(--clampography-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(--clampography-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(--clampography-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-inline-start-color:black;border-inline-start-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(--clampography-spacing-xs) var(--clampography-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(--clampography-spacing-xs) var(--clampography-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:inline-end 0.5rem center;background-repeat:no-repeat;background-size:1.5em 1.5em;padding-inline-end: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(--clampography-spacing-xs) var(--clampography-spacing-sm);margin-inline-end:var(--clampography-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){--clampography-spacing-xs:clamp(0.25rem, 0.0833rem + 0.8333vw, 0.75rem);--clampography-spacing-sm:clamp(0.375rem, 0.0833rem + 1.4583vw, 1.25rem);--clampography-spacing-md:clamp(0.5rem, 0.1667rem + 1.6667vw, 1.5rem);--clampography-spacing-lg:clamp(0.75rem, 0.1667rem + 2.9167vw, 2.5rem);--clampography-spacing-xl:clamp(1rem, 0.3333rem + 3.3333vw, 3rem);--clampography-list-indent:clamp(1.5rem, 1.3333rem + 0.8333vw, 2rem);--clampography-scroll-offset:5rem;--clampography-radius:0.4em;--clampography-border-width:1px;--clampography-font-base:Inter, system-ui, -apple-system, 'Segoe UI Variable Display', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;--clampography-font-mono:ui-monospace, 'Cascadia Code', 'Cascadia Mono', 'Segoe UI Mono', 'Ubuntu Mono', SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;--clampography-fluid-min:20;--clampography-fluid-max:80;--clampography-h1-min:1.875;--clampography-h1-max:4;--clampography-h1-slope:calc((var(--clampography-h1-max) - var(--clampography-h1-min)) / (var(--clampography-fluid-max) - var(--clampography-fluid-min)));--clampography-h1-base:calc(var(--clampography-h1-min) - var(--clampography-h1-slope) * var(--clampography-fluid-min));--clampography-h1-size:clamp(calc(var(--clampography-h1-min) * 1rem), calc(var(--clampography-h1-base) * 1rem + var(--clampography-h1-slope) * 100vw), calc(var(--clampography-h1-max) * 1rem));--clampography-h2-min:1.25;--clampography-h2-max:3;--clampography-h2-slope:calc((var(--clampography-h2-max) - var(--clampography-h2-min)) / (var(--clampography-fluid-max) - var(--clampography-fluid-min)));--clampography-h2-base:calc(var(--clampography-h2-min) - var(--clampography-h2-slope) * var(--clampography-fluid-min));--clampography-h2-size:clamp(calc(var(--clampography-h2-min) * 1rem), calc(var(--clampography-h2-base) * 1rem + var(--clampography-h2-slope) * 100vw), calc(var(--clampography-h2-max) * 1rem));--clampography-h3-min:1.125;--clampography-h3-max:2.25;--clampography-h3-slope:calc((var(--clampography-h3-max) - var(--clampography-h3-min)) / (var(--clampography-fluid-max) - var(--clampography-fluid-min)));--clampography-h3-base:calc(var(--clampography-h3-min) - var(--clampography-h3-slope) * var(--clampography-fluid-min));--clampography-h3-size:clamp(calc(var(--clampography-h3-min) * 1rem), calc(var(--clampography-h3-base) * 1rem + var(--clampography-h3-slope) * 100vw), calc(var(--clampography-h3-max) * 1rem));--clampography-h4-min:1;--clampography-h4-max:1.5;--clampography-h4-slope:calc((var(--clampography-h4-max) - var(--clampography-h4-min)) / (var(--clampography-fluid-max) - var(--clampography-fluid-min)));--clampography-h4-base:calc(var(--clampography-h4-min) - var(--clampography-h4-slope) * var(--clampography-fluid-min));--clampography-h4-size:clamp(calc(var(--clampography-h4-min) * 1rem), calc(var(--clampography-h4-base) * 1rem + var(--clampography-h4-slope) * 100vw), calc(var(--clampography-h4-max) * 1rem));--clampography-h5-min:1;--clampography-h5-max:1;--clampography-h5-slope:calc((var(--clampography-h5-max) - var(--clampography-h5-min)) / (var(--clampography-fluid-max) - var(--clampography-fluid-min)));--clampography-h5-base:calc(var(--clampography-h5-min) - var(--clampography-h5-slope) * var(--clampography-fluid-min));--clampography-h5-size:clamp(calc(var(--clampography-h5-min) * 1rem), calc(var(--clampography-h5-base) * 1rem + var(--clampography-h5-slope) * 100vw), calc(var(--clampography-h5-max) * 1rem));--clampography-h6-min:0.875;--clampography-h6-max:0.875;--clampography-h6-slope:calc((var(--clampography-h6-max) - var(--clampography-h6-min)) / (var(--clampography-fluid-max) - var(--clampography-fluid-min)));--clampography-h6-base:calc(var(--clampography-h6-min) - var(--clampography-h6-slope) * var(--clampography-fluid-min));--clampography-h6-size:clamp(calc(var(--clampography-h6-min) * 1rem), calc(var(--clampography-h6-base) * 1rem + var(--clampography-h6-slope) * 100vw), calc(var(--clampography-h6-max) * 1rem));--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;font-size-adjust:from-font}:root :where(h1, h2, h3, h4, h5, h6){font-weight:600;scroll-margin-top:var(--clampography-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(--clampography-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(--clampography-spacing-xl);margin-bottom:var(--clampography-spacing-md)}:root h3{font-size:calc(var(--clampography-h3-size) * var(--clampography-h3-scale));line-height:1.5;margin-top:var(--clampography-spacing-lg);margin-bottom:var(--clampography-spacing-sm)}:root h4{font-size:calc(var(--clampography-h4-size) * var(--clampography-h4-scale));line-height:1.5;margin-top:var(--clampography-spacing-lg);margin-bottom:var(--clampography-spacing-sm)}:root h5{font-size:calc(var(--clampography-h5-size) * var(--clampography-h5-scale));line-height:1.5;margin-top:var(--clampography-spacing-md);margin-bottom:var(--clampography-spacing-xs)}:root h6{font-size:calc(var(--clampography-h6-size) * var(--clampography-h6-scale));line-height:1.5;margin-top:var(--clampography-spacing-md);margin-bottom:var(--clampography-spacing-xs)}:root :is(h1, h2, h3, h4, h5, h6):first-child{margin-top:0}:root a{text-decoration-line:underline;cursor:pointer;overflow-wrap:break-word}:root :where(h1, h2, h3, h4, h5, h6) a{text-decoration:none}:root menu{list-style:none;margin-bottom:var(--clampography-spacing-md);padding-inline-start:0}:root menu > li::before{display:none}:root hgroup{margin-bottom:var(--clampography-spacing-lg)}:root hgroup :where(h1, h2, h3, h4, h5, h6){margin-bottom:var(--clampography-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(--clampography-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(--clampography-font-mono);font-size:0.875em;-webkit-font-smoothing:auto;-moz-osx-font-smoothing:auto;overflow-wrap:break-word}: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(--clampography-spacing-md);margin-bottom:var(--clampography-spacing-md)}:root time{font-style:normal;font-variant-numeric:tabular-nums}:root blockquote{margin-top:var(--clampography-spacing-lg);margin-bottom:var(--clampography-spacing-lg);padding-inline-start:var(--clampography-spacing-md)}:root blockquote blockquote{margin-top:var(--clampography-spacing-sm);margin-bottom:var(--clampography-spacing-sm);padding-inline-start:var(--clampography-spacing-sm)}:root q{font-style:inherit}:root :where(ul, ol){list-style:none;margin-bottom:var(--clampography-spacing-md);padding-inline-start:var(--clampography-list-indent)}:root li{position:relative}:root li + li{margin-top:var(--clampography-spacing-xs)}:root li > :where(p, dl, figure, table, pre){margin-top:0;margin-bottom:0}:root li > blockquote{margin-top:var(--clampography-spacing-sm);margin-bottom:var(--clampography-spacing-sm)}:root li > :where(ul, ol){margin-top:var(--clampography-spacing-xs);margin-bottom:0}:root ul > li::before{content:'';position:absolute;inset-inline-end:100%;margin-inline-end: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;inset-inline-end:100%;margin-inline-end:0.5em;font-weight:600;font-variant-numeric:tabular-nums;text-align:end;color:currentColor}:root dl{margin-top:var(--clampography-spacing-md);margin-bottom:var(--clampography-spacing-md)}:root dt{font-weight:600;margin-top:var(--clampography-spacing-sm)}:root dt:first-child{margin-top:0}:root dd{margin-inline-start:var(--clampography-spacing-md)}:root dt + dd{margin-top:var(--clampography-spacing-xs)}:root dd + dd{margin-top:var(--clampography-spacing-xs)}:root dd:last-child{margin-bottom:0}:root pre{margin-top:var(--clampography-spacing-md);margin-bottom:var(--clampography-spacing-md);font-family:var(--clampography-font-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(--clampography-spacing-md);margin-bottom:var(--clampography-spacing-md);padding:var(--clampography-spacing-sm)}:root legend{font-weight:600;padding:0 var(--clampography-spacing-xs)}:root label{display:inline-block;font-weight:600;margin-bottom:var(--clampography-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(--clampography-spacing-lg);margin-bottom:var(--clampography-spacing-lg)}:root figcaption{margin-top:0.375rem;font-size:0.875em;line-height:1.5}:root table{width:100%;margin-top:var(--clampography-spacing-md);margin-bottom:var(--clampography-spacing-md);border-collapse:collapse;font-size:1em;line-height:1.6}:root caption{margin-bottom:var(--clampography-spacing-xs);font-size:0.875em;font-weight:600;text-align:start}:root th, :root td{padding:var(--clampography-spacing-xs) var(--clampography-spacing-sm);text-align:start}: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(--clampography-spacing-xl);margin-bottom:var(--clampography-spacing-xl);border:0;border-top:1px solid}:root :where(:focus, :focus-visible){outline-offset:2px}:root details{margin-top:var(--clampography-spacing-md);margin-bottom:var(--clampography-spacing-md)}:root summary{cursor:pointer;font-weight:600}:root details[open] > summary{margin-bottom:var(--clampography-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){color-scheme:light;--clampography-background:oklch(100.0% 0.000 89.9);--clampography-border:oklch(94.6% 0.000 89.9);--clampography-error:oklch(65.4% 0.229 27.0);--clampography-heading:oklch(15.0% 0.021 264.3);--clampography-info:oklch(68.3% 0.166 259.7);--clampography-link:oklch(60.3% 0.216 259.8);--clampography-muted:oklch(51.9% 0.014 259.8);--clampography-primary:oklch(60.3% 0.216 259.8);--clampography-secondary:oklch(54.9% 0.280 300.0);--clampography-success:oklch(75.8% 0.166 161.7);--clampography-surface:oklch(98.5% 0.000 89.9);--clampography-text:oklch(31.1% 0.020 257.3);--clampography-warning:oklch(79.9% 0.136 72.2)}@media (prefers-color-scheme: dark){:root{color-scheme:dark;--clampography-background:oklch(13.3% 0.016 284.0);--clampography-border:oklch(43.4% 0.006 258.3);--clampography-error:oklch(62.9% 0.220 27.0);--clampography-heading:oklch(94.6% 0.000 89.9);--clampography-info:oklch(71.2% 0.155 251.4);--clampography-link:oklch(75.3% 0.133 248.6);--clampography-muted:oklch(68.9% 0.006 264.5);--clampography-primary:oklch(75.3% 0.133 248.6);--clampography-secondary:oklch(62.6% 0.243 301.2);--clampography-success:oklch(66.3% 0.148 160.6);--clampography-surface:oklch(21.2% 0.009 255.6);--clampography-text:oklch(88.8% 0.007 268.5);--clampography-warning:oklch(72.1% 0.164 63.1)}}[data-theme="dark"]{color-scheme:dark;--clampography-background:oklch(13.3% 0.016 284.0);--clampography-border:oklch(43.4% 0.006 258.3);--clampography-error:oklch(62.9% 0.220 27.0);--clampography-heading:oklch(94.6% 0.000 89.9);--clampography-info:oklch(71.2% 0.155 251.4);--clampography-link:oklch(75.3% 0.133 248.6);--clampography-muted:oklch(68.9% 0.006 264.5);--clampography-primary:oklch(75.3% 0.133 248.6);--clampography-secondary:oklch(62.6% 0.243 301.2);--clampography-success:oklch(66.3% 0.148 160.6);--clampography-surface:oklch(21.2% 0.009 255.6);--clampography-text:oklch(88.8% 0.007 268.5);--clampography-warning:oklch(72.1% 0.164 63.1)}[data-theme="light"]{color-scheme:light;--clampography-background:oklch(100.0% 0.000 89.9);--clampography-border:oklch(94.6% 0.000 89.9);--clampography-error:oklch(65.4% 0.229 27.0);--clampography-heading:oklch(15.0% 0.021 264.3);--clampography-info:oklch(68.3% 0.166 259.7);--clampography-link:oklch(60.3% 0.216 259.8);--clampography-muted:oklch(51.9% 0.014 259.8);--clampography-primary:oklch(60.3% 0.216 259.8);--clampography-secondary:oklch(54.9% 0.280 300.0);--clampography-success:oklch(75.8% 0.166 161.7);--clampography-surface:oklch(98.5% 0.000 89.9);--clampography-text:oklch(31.1% 0.020 257.3);--clampography-warning:oklch(79.9% 0.136 72.2)}}@layer base{:where(:root){--clampography-transition-duration:200ms}body{background-color:var(--clampography-background);color:var(--clampography-text);font-family:var(--font-sans, var(--clampography-font-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(--clampography-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(--clampography-spacing-md)}:root table{padding:var(--clampography-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(--clampography-spacing-xl);margin-bottom:var(--clampography-spacing-xl);background-color:var(--clampography-border)}:root blockquote{border-inline-start-width:4px;border-inline-start-color:var(--clampography-primary);background-color:var(--clampography-surface);padding:var(--clampography-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(--clampography-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(--clampography-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(--clampography-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-inline-start-color:black;border-inline-start-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:var(--clampography-spacing-xs);padding:var(--clampography-spacing-xs) var(--clampography-spacing-sm);background-color:var(--clampography-surface);color:var(--clampography-text);border:var(--clampography-border-width) solid var(--clampography-border);border-radius:var(--clampography-radius);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'], [type='file'], [type='hidden'], [type='submit'], [type='reset'], [type='button'], [type='image']), textarea, select){display:block;width:100%;padding:var(--clampography-spacing-xs) var(--clampography-spacing-sm);background-color:var(--clampography-background);color:var(--clampography-text);border:var(--clampography-border-width) solid var(--clampography-border);border-radius:var(--clampography-radius);transition-property:border-color, box-shadow;transition-duration:150ms}:root :where(input:not([type='checkbox'], [type='radio'], [type='range'], [type='color'], [type='file'], [type='hidden'], [type='submit'], [type='reset'], [type='button'], [type='image']), textarea, select):focus-visible{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):where(:user-invalid, [aria-invalid='true']){border-color:var(--clampography-error)}:root :where(input, textarea, select):where(:user-invalid, [aria-invalid='true']):focus-visible{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:not([multiple]):not([size]){appearance:none;background-image:linear-gradient(45deg, transparent 50%, var(--clampography-text) 50%), linear-gradient(135deg, var(--clampography-text) 50%, transparent 50%);background-position:calc(100% - 1.25rem - 5px) center, calc(100% - 1.25rem) center;background-size:5px 5px, 5px 5px;background-repeat:no-repeat;padding-inline-end:2.5rem}:root select[multiple], :root select[size]{appearance:auto;padding:var(--clampography-spacing-xs) var(--clampography-spacing-sm)}: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(--clampography-spacing-xs) var(--clampography-spacing-sm);margin-inline-end:var(--clampography-spacing-sm);background-color:var(--clampography-surface);color:var(--clampography-text);border:var(--clampography-border-width) solid var(--clampography-border);border-radius:var(--clampography-radius);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:var(--clampography-border-width) solid var(--clampography-border);border-radius:var(--clampography-radius);background-color:var(--clampography-background);cursor:pointer}:root [type='color']::-webkit-color-swatch-wrapper{padding:0}:root [type='color']::-webkit-color-swatch{border:none;border-radius:max(0px, calc(var(--clampography-radius) - 0.125rem))}:root fieldset{border:var(--clampography-border-width) solid var(--clampography-border);border-radius:calc(var(--clampography-radius) * 1.5);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/forms.css CHANGED
@@ -4,12 +4,12 @@
4
4
  display: inline-flex;
5
5
  align-items: center;
6
6
  justify-content: center;
7
- gap: 0.375em;
7
+ gap: var(--clampography-spacing-xs);
8
8
  padding: var(--clampography-spacing-xs) var(--clampography-spacing-sm);
9
9
  background-color: var(--clampography-surface);
10
10
  color: var(--clampography-text);
11
- border: 1px solid var(--clampography-border);
12
- border-radius: 0.375rem;
11
+ border: var(--clampography-border-width) solid var(--clampography-border);
12
+ border-radius: var(--clampography-radius);
13
13
  font-weight: 500;
14
14
  white-space: nowrap;
15
15
  transition-property: background-color, border-color, color, box-shadow;
@@ -31,19 +31,19 @@
31
31
  filter: brightness(1.1);
32
32
  }
33
33
 
34
- :root :where(input:not([type='checkbox'], [type='radio'], [type='range'], [type='color']), textarea, select) {
34
+ :root :where(input:not([type='checkbox'], [type='radio'], [type='range'], [type='color'], [type='file'], [type='hidden'], [type='submit'], [type='reset'], [type='button'], [type='image']), textarea, select) {
35
35
  display: block;
36
36
  width: 100%;
37
37
  padding: var(--clampography-spacing-xs) var(--clampography-spacing-sm);
38
38
  background-color: var(--clampography-background);
39
39
  color: var(--clampography-text);
40
- border: 1px solid var(--clampography-border);
41
- border-radius: 0.375rem;
40
+ border: var(--clampography-border-width) solid var(--clampography-border);
41
+ border-radius: var(--clampography-radius);
42
42
  transition-property: border-color, box-shadow;
43
43
  transition-duration: 150ms;
44
44
  }
45
45
 
46
- :root :where(input:not([type='checkbox'], [type='radio'], [type='range'], [type='color']), textarea, select):focus {
46
+ :root :where(input:not([type='checkbox'], [type='radio'], [type='range'], [type='color'], [type='file'], [type='hidden'], [type='submit'], [type='reset'], [type='button'], [type='image']), textarea, select):focus-visible {
47
47
  outline: none;
48
48
  border-color: var(--clampography-primary);
49
49
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--clampography-primary) 20%, transparent);
@@ -59,11 +59,11 @@
59
59
  cursor: default;
60
60
  }
61
61
 
62
- :root :where(input, textarea, select):user-invalid {
62
+ :root :where(input, textarea, select):where(:user-invalid, [aria-invalid='true']) {
63
63
  border-color: var(--clampography-error);
64
64
  }
65
65
 
66
- :root :where(input, textarea, select):user-invalid:focus {
66
+ :root :where(input, textarea, select):where(:user-invalid, [aria-invalid='true']):focus-visible {
67
67
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--clampography-error) 20%, transparent);
68
68
  }
69
69
 
@@ -80,15 +80,20 @@
80
80
  color: var(--clampography-muted);
81
81
  }
82
82
 
83
- :root select {
83
+ :root select:not([multiple]):not([size]) {
84
84
  appearance: none;
85
- 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");
86
- background-position: inline-end 0.5rem center;
85
+ background-image: linear-gradient(45deg, transparent 50%, var(--clampography-text) 50%), linear-gradient(135deg, var(--clampography-text) 50%, transparent 50%);
86
+ background-position: calc(100% - 1.25rem - 5px) center, calc(100% - 1.25rem) center;
87
+ background-size: 5px 5px, 5px 5px;
87
88
  background-repeat: no-repeat;
88
- background-size: 1.5em 1.5em;
89
89
  padding-inline-end: 2.5rem;
90
90
  }
91
91
 
92
+ :root select[multiple], :root select[size] {
93
+ appearance: auto;
94
+ padding: var(--clampography-spacing-xs) var(--clampography-spacing-sm);
95
+ }
96
+
92
97
  :root [type='file'] {
93
98
  padding: 0;
94
99
  background-color: transparent;
@@ -103,8 +108,8 @@
103
108
  margin-inline-end: var(--clampography-spacing-sm);
104
109
  background-color: var(--clampography-surface);
105
110
  color: var(--clampography-text);
106
- border: 1px solid var(--clampography-border);
107
- border-radius: 0.375rem;
111
+ border: var(--clampography-border-width) solid var(--clampography-border);
112
+ border-radius: var(--clampography-radius);
108
113
  font-family: inherit;
109
114
  font-size: inherit;
110
115
  cursor: pointer;
@@ -140,15 +145,24 @@
140
145
  padding: 0.125rem;
141
146
  width: 2.5rem;
142
147
  height: 2.5rem;
143
- border: 1px solid var(--clampography-border);
144
- border-radius: 0.375rem;
148
+ border: var(--clampography-border-width) solid var(--clampography-border);
149
+ border-radius: var(--clampography-radius);
145
150
  background-color: var(--clampography-background);
146
151
  cursor: pointer;
147
152
  }
148
153
 
154
+ :root [type='color']::-webkit-color-swatch-wrapper {
155
+ padding: 0;
156
+ }
157
+
158
+ :root [type='color']::-webkit-color-swatch {
159
+ border: none;
160
+ border-radius: max(0px, calc(var(--clampography-radius) - 0.125rem));
161
+ }
162
+
149
163
  :root fieldset {
150
- border: 1px solid var(--clampography-border);
151
- border-radius: 0.5rem;
164
+ border: var(--clampography-border-width) solid var(--clampography-border);
165
+ border-radius: calc(var(--clampography-radius) * 1.5);
152
166
  background-color: var(--clampography-surface);
153
167
  }
154
168
 
package/css/forms.min.css CHANGED
@@ -1 +1 @@
1
- @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(--clampography-spacing-xs) var(--clampography-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(--clampography-spacing-xs) var(--clampography-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:inline-end 0.5rem center;background-repeat:no-repeat;background-size:1.5em 1.5em;padding-inline-end: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(--clampography-spacing-xs) var(--clampography-spacing-sm);margin-inline-end:var(--clampography-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)}}
1
+ @layer base{:root :where(button, [type='button'], [type='reset'], [type='submit']){display:inline-flex;align-items:center;justify-content:center;gap:var(--clampography-spacing-xs);padding:var(--clampography-spacing-xs) var(--clampography-spacing-sm);background-color:var(--clampography-surface);color:var(--clampography-text);border:var(--clampography-border-width) solid var(--clampography-border);border-radius:var(--clampography-radius);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'], [type='file'], [type='hidden'], [type='submit'], [type='reset'], [type='button'], [type='image']), textarea, select){display:block;width:100%;padding:var(--clampography-spacing-xs) var(--clampography-spacing-sm);background-color:var(--clampography-background);color:var(--clampography-text);border:var(--clampography-border-width) solid var(--clampography-border);border-radius:var(--clampography-radius);transition-property:border-color, box-shadow;transition-duration:150ms}:root :where(input:not([type='checkbox'], [type='radio'], [type='range'], [type='color'], [type='file'], [type='hidden'], [type='submit'], [type='reset'], [type='button'], [type='image']), textarea, select):focus-visible{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):where(:user-invalid, [aria-invalid='true']){border-color:var(--clampography-error)}:root :where(input, textarea, select):where(:user-invalid, [aria-invalid='true']):focus-visible{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:not([multiple]):not([size]){appearance:none;background-image:linear-gradient(45deg, transparent 50%, var(--clampography-text) 50%), linear-gradient(135deg, var(--clampography-text) 50%, transparent 50%);background-position:calc(100% - 1.25rem - 5px) center, calc(100% - 1.25rem) center;background-size:5px 5px, 5px 5px;background-repeat:no-repeat;padding-inline-end:2.5rem}:root select[multiple], :root select[size]{appearance:auto;padding:var(--clampography-spacing-xs) var(--clampography-spacing-sm)}: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(--clampography-spacing-xs) var(--clampography-spacing-sm);margin-inline-end:var(--clampography-spacing-sm);background-color:var(--clampography-surface);color:var(--clampography-text);border:var(--clampography-border-width) solid var(--clampography-border);border-radius:var(--clampography-radius);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:var(--clampography-border-width) solid var(--clampography-border);border-radius:var(--clampography-radius);background-color:var(--clampography-background);cursor:pointer}:root [type='color']::-webkit-color-swatch-wrapper{padding:0}:root [type='color']::-webkit-color-swatch{border:none;border-radius:max(0px, calc(var(--clampography-radius) - 0.125rem))}:root fieldset{border:var(--clampography-border-width) solid var(--clampography-border);border-radius:calc(var(--clampography-radius) * 1.5);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)}}
package/package.json CHANGED
@@ -66,5 +66,5 @@
66
66
  "sideEffects": false,
67
67
  "type": "module",
68
68
  "unpkg": "css/clampography.min.css",
69
- "version": "2.0.0"
69
+ "version": "2.1.0"
70
70
  }
package/src/base.js CHANGED
@@ -73,6 +73,8 @@ export default (options = {}) => {
73
73
  "--clampography-spacing-xl": makeFluid(1, 3),
74
74
  "--clampography-list-indent": makeFluid(1.5, 2),
75
75
  "--clampography-scroll-offset": "5rem",
76
+ "--clampography-radius": "0.4em",
77
+ "--clampography-border-width": "1px",
76
78
  "--clampography-font-base":
77
79
  "Inter, system-ui, -apple-system, 'Segoe UI Variable Display', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif",
78
80
  "--clampography-font-mono":
@@ -167,6 +169,7 @@ export default (options = {}) => {
167
169
  "-webkit-font-smoothing": "antialiased",
168
170
  "-moz-osx-font-smoothing": "grayscale",
169
171
  "text-wrap": "pretty",
172
+ "font-size-adjust": "from-font",
170
173
  },
171
174
 
172
175
  // HEADINGS (H1-H6)
@@ -227,6 +230,7 @@ export default (options = {}) => {
227
230
  [scope("a")]: {
228
231
  "text-decoration-line": "underline",
229
232
  cursor: "pointer",
233
+ "overflow-wrap": "break-word",
230
234
  },
231
235
 
232
236
  [scope(":where(h1, h2, h3, h4, h5, h6) a")]: {
@@ -290,6 +294,7 @@ export default (options = {}) => {
290
294
  "font-size": "0.875em",
291
295
  "-webkit-font-smoothing": "auto",
292
296
  "-moz-osx-font-smoothing": "auto",
297
+ "overflow-wrap": "break-word",
293
298
  },
294
299
 
295
300
  [scope("kbd")]: {
package/src/forms.js CHANGED
@@ -35,12 +35,12 @@ export default (options = {}) => {
35
35
  "display": "inline-flex",
36
36
  "align-items": "center",
37
37
  "justify-content": "center",
38
- "gap": "0.375em",
38
+ "gap": "var(--clampography-spacing-xs)",
39
39
  "padding": "var(--clampography-spacing-xs) var(--clampography-spacing-sm)",
40
40
  "background-color": "var(--clampography-surface)",
41
41
  "color": "var(--clampography-text)",
42
- "border": "1px solid var(--clampography-border)",
43
- "border-radius": "0.375rem",
42
+ "border": "var(--clampography-border-width) solid var(--clampography-border)",
43
+ "border-radius": "var(--clampography-radius)",
44
44
  "font-weight": "500",
45
45
  "white-space": "nowrap",
46
46
  "transition-property": "background-color, border-color, color, box-shadow",
@@ -63,19 +63,19 @@ export default (options = {}) => {
63
63
  },
64
64
 
65
65
  // ── Text Inputs & Textarea ────────────────────────────────────────────────
66
- [scope(":where(input:not([type='checkbox'], [type='radio'], [type='range'], [type='color']), textarea, select)")]: {
66
+ [scope(":where(input:not([type='checkbox'], [type='radio'], [type='range'], [type='color'], [type='file'], [type='hidden'], [type='submit'], [type='reset'], [type='button'], [type='image']), textarea, select)")]: {
67
67
  "display": "block",
68
68
  "width": "100%",
69
69
  "padding": "var(--clampography-spacing-xs) var(--clampography-spacing-sm)",
70
70
  "background-color": "var(--clampography-background)",
71
71
  "color": "var(--clampography-text)",
72
- "border": "1px solid var(--clampography-border)",
73
- "border-radius": "0.375rem",
72
+ "border": "var(--clampography-border-width) solid var(--clampography-border)",
73
+ "border-radius": "var(--clampography-radius)",
74
74
  "transition-property": "border-color, box-shadow",
75
75
  "transition-duration": "150ms",
76
76
  },
77
77
 
78
- [scope(":where(input:not([type='checkbox'], [type='radio'], [type='range'], [type='color']), textarea, select):focus")]: {
78
+ [scope(":where(input:not([type='checkbox'], [type='radio'], [type='range'], [type='color'], [type='file'], [type='hidden'], [type='submit'], [type='reset'], [type='button'], [type='image']), textarea, select):focus-visible")]: {
79
79
  "outline": "none",
80
80
  "border-color": "var(--clampography-primary)",
81
81
  "box-shadow": "0 0 0 3px color-mix(in oklab, var(--clampography-primary) 20%, transparent)",
@@ -91,11 +91,11 @@ export default (options = {}) => {
91
91
  "cursor": "default",
92
92
  },
93
93
 
94
- [scope(":where(input, textarea, select):user-invalid")]: {
94
+ [scope(":where(input, textarea, select):where(:user-invalid, [aria-invalid='true'])")]: {
95
95
  "border-color": "var(--clampography-error)",
96
96
  },
97
97
 
98
- [scope(":where(input, textarea, select):user-invalid:focus")]: {
98
+ [scope(":where(input, textarea, select):where(:user-invalid, [aria-invalid='true']):focus-visible")]: {
99
99
  "box-shadow": "0 0 0 3px color-mix(in oklab, var(--clampography-error) 20%, transparent)",
100
100
  },
101
101
 
@@ -113,15 +113,20 @@ export default (options = {}) => {
113
113
  },
114
114
 
115
115
  // ── Select ────────────────────────────────────────────────────────────────
116
- [scope("select")]: {
116
+ [scope("select:not([multiple]):not([size])")]: {
117
117
  "appearance": "none",
118
- "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")`,
119
- "background-position": "inline-end 0.5rem center",
118
+ "background-image": "linear-gradient(45deg, transparent 50%, var(--clampography-text) 50%), linear-gradient(135deg, var(--clampography-text) 50%, transparent 50%)",
119
+ "background-position": "calc(100% - 1.25rem - 5px) center, calc(100% - 1.25rem) center",
120
+ "background-size": "5px 5px, 5px 5px",
120
121
  "background-repeat": "no-repeat",
121
- "background-size": "1.5em 1.5em",
122
122
  "padding-inline-end": "2.5rem",
123
123
  },
124
124
 
125
+ [scope("select[multiple], select[size]")]: {
126
+ "appearance": "auto",
127
+ "padding": "var(--clampography-spacing-xs) var(--clampography-spacing-sm)",
128
+ },
129
+
125
130
  // ── File Input ────────────────────────────────────────────────────────────
126
131
  [scope("[type='file']")]: {
127
132
  "padding": "0",
@@ -137,8 +142,8 @@ export default (options = {}) => {
137
142
  "margin-inline-end": "var(--clampography-spacing-sm)",
138
143
  "background-color": "var(--clampography-surface)",
139
144
  "color": "var(--clampography-text)",
140
- "border": "1px solid var(--clampography-border)",
141
- "border-radius": "0.375rem",
145
+ "border": "var(--clampography-border-width) solid var(--clampography-border)",
146
+ "border-radius": "var(--clampography-radius)",
142
147
  "font-family": "inherit",
143
148
  "font-size": "inherit",
144
149
  "cursor": "pointer",
@@ -177,16 +182,25 @@ export default (options = {}) => {
177
182
  "padding": "0.125rem",
178
183
  "width": "2.5rem",
179
184
  "height": "2.5rem",
180
- "border": "1px solid var(--clampography-border)",
181
- "border-radius": "0.375rem",
185
+ "border": "var(--clampography-border-width) solid var(--clampography-border)",
186
+ "border-radius": "var(--clampography-radius)",
182
187
  "background-color": "var(--clampography-background)",
183
188
  "cursor": "pointer",
184
189
  },
185
190
 
191
+ [scope("[type='color']::-webkit-color-swatch-wrapper")]: {
192
+ "padding": "0",
193
+ },
194
+
195
+ [scope("[type='color']::-webkit-color-swatch")]: {
196
+ "border": "none",
197
+ "border-radius": "max(0px, calc(var(--clampography-radius) - 0.125rem))",
198
+ },
199
+
186
200
  // ── Fieldset & Legend ────────────────────────────────────────────────────
187
201
  [scope("fieldset")]: {
188
- "border": "1px solid var(--clampography-border)",
189
- "border-radius": "0.5rem",
202
+ "border": "var(--clampography-border-width) solid var(--clampography-border)",
203
+ "border-radius": "calc(var(--clampography-radius) * 1.5)",
190
204
  "background-color": "var(--clampography-surface)",
191
205
  },
192
206
 
package/src/highlights.js ADDED
@@ -0,0 +1,82 @@
1
+ export default (options = {}) => {
2
+ const root = options.root || ":root";
3
+
4
+ // Helper to scope selectors safely (same as base.js)
5
+ const scope = (selector) => {
6
+ const typographyPrefix = options.typography && options.typography !== "global" ? ` ${options.typography}` : "";
7
+
8
+ // Global pseudo-elements like ::selection
9
+ if (selector.startsWith("::selection")) {
10
+ if (root === ":root" || root === "body") {
11
+ return typographyPrefix ? `${typographyPrefix} ${selector}, ${typographyPrefix}${selector}` : selector;
12
+ } else {
13
+ return `${root} ${selector}, ${root}${selector}`;
14
+ }
15
+ }
16
+
17
+ const parts = [];
18
+ let current = "";
19
+ let depth = 0;
20
+
21
+ for (let i = 0; i < selector.length; i++) {
22
+ const char = selector[i];
23
+ if (char === "(") depth++;
24
+ if (char === ")") depth--;
25
+
26
+ if (char === "," && depth === 0) {
27
+ parts.push(current.trim());
28
+ current = "";
29
+ } else {
30
+ current += char;
31
+ }
32
+ }
33
+ parts.push(current.trim());
34
+
35
+ return parts
36
+ .filter(Boolean)
37
+ .map((part) => {
38
+ if (part === ":root" || part === "body") return root;
39
+ if (typographyPrefix) {
40
+ return `${root}${typographyPrefix} ${part}`;
41
+ }
42
+ return `${root} ${part}`;
43
+ })
44
+ .join(", ");
45
+ };
46
+
47
+ return {
48
+ // 1. Text Selection
49
+ [scope("::selection")]: {
50
+ "background-color": "color-mix(in oklch, var(--clampography-primary) 20%, transparent)",
51
+ "color": "inherit",
52
+ },
53
+
54
+ // 2. <mark> Element (Highlighted text)
55
+ [scope("mark")]: {
56
+ "background-color": "color-mix(in oklch, var(--clampography-warning) 30%, transparent)",
57
+ "color": "inherit",
58
+ "padding": "0 0.1em",
59
+ "border-radius": "2px",
60
+ },
61
+
62
+ // 3. Target Highlight (When navigating via #hash URL)
63
+ [scope(":target")]: {
64
+ "scroll-margin-top": "var(--clampography-scroll-offset, 5rem)",
65
+ "animation": "clampography-target-fade 2s ease-out",
66
+ },
67
+
68
+ // 4. Target Animation Keyframes
69
+ "@keyframes clampography-target-fade": {
70
+ "0%": {
71
+ "background-color": "color-mix(in oklch, var(--clampography-primary) 20%, transparent)",
72
+ "box-shadow": "0 0 0 4px color-mix(in oklch, var(--clampography-primary) 20%, transparent)",
73
+ "border-radius": "4px",
74
+ },
75
+ "100%": {
76
+ "background-color": "transparent",
77
+ "box-shadow": "0 0 0 4px transparent",
78
+ "border-radius": "4px",
79
+ }
80
+ }
81
+ };
82
+ };
package/src/index.js CHANGED
@@ -5,9 +5,10 @@ import extraStyles from "./extra.js";
5
5
  import formsStyles from "./forms.js";
6
6
  import kbdStyles from "./kbd.js";
7
7
  import printStyles from "./print.js";
8
+ import scrollbarStyles from "./scrollbar.js";
9
+ import highlightsStyles from "./highlights.js";
10
+
8
11
 
9
- // Import version from package.json
10
- import { version } from "../package.json" with { type: "json" };
11
12
 
12
13
  /**
13
14
  * Helper to resolve boolean options from CSS configuration.
@@ -35,7 +36,7 @@ export default plugin.withOptions(
35
36
 
36
37
  // Show startup log only once
37
38
  if (showLogs && firstRun) {
38
- console.log(`🍀 Clampography v${version} loaded successfully`);
39
+ console.log(`🍀 Clampography loaded successfully`);
39
40
  firstRun = false;
40
41
  }
41
42
 
@@ -46,6 +47,8 @@ export default plugin.withOptions(
46
47
  const includeForms = resolveBool(options.forms, false); // Default: false
47
48
  const includeKbd = resolveBool(options.kbd, false); // Default: false
48
49
  const includePrint = resolveBool(options.print, false); // Default: false
50
+ const includeScrollbar = resolveBool(options.scrollbar, false); // Default: false
51
+ const includeHighlights = resolveBool(options.highlights, false); // Default: false
49
52
 
50
53
  // Extract fluid bounds for clampography math engine
51
54
  const fluidMin = parseInt(options["fluid-min"] || options.fluidMin || "320");
@@ -63,6 +66,8 @@ export default plugin.withOptions(
63
66
  includeForms && addBase(formsStyles({ ...options, typography }));
64
67
  includeKbd && addBase(kbdStyles({ ...options, typography }));
65
68
  includePrint && addBase(printStyles({ ...options, typography }));
69
+ includeScrollbar && addBase(scrollbarStyles({ ...options, typography }));
70
+ includeHighlights && addBase(highlightsStyles({ ...options, typography }));
66
71
 
67
72
  // 2. Parse themes configuration
68
73
  let configThemes = options.themes;
package/src/scrollbar.js ADDED
@@ -0,0 +1,19 @@
1
+ export default (options = {}) => {
2
+ const root = options.root || ":root";
3
+
4
+ // Apply scrollbar-color to the scrolling container.
5
+ // For :root, this means html. For a custom root (e.g. #app), apply to that element.
6
+ const typographyPrefix = options.typography && options.typography !== "global" ? ` ${options.typography}` : "";
7
+ const baseSelector = root === ":root" ? "html" : root;
8
+ const containerSelector = typographyPrefix ? `${baseSelector}${typographyPrefix}` : baseSelector;
9
+
10
+ return {
11
+ // CSS Scrollbars (W3C standard — Chrome 121+, Firefox 64+, Edge 121+, Safari 17.2+)
12
+ // Only colors are modified. The browser preserves its own OS-native scrollbar thickness.
13
+ // Older browsers silently ignore these properties — no custom scrollbar, no broken layout.
14
+ [containerSelector]: {
15
+ "scrollbar-color": "var(--clampography-border) var(--clampography-background)",
16
+ "scrollbar-width": "auto",
17
+ },
18
+ };
19
+ };
package/src/types/index.d.ts CHANGED
@@ -11,6 +11,10 @@ interface ClampographyOptions {
11
11
  fluidMin?: string | number;
12
12
  "fluid-max"?: string | number;
13
13
  fluidMax?: string | number;
14
+ scrollbar?: boolean;
15
+ highlights?: boolean;
16
+ "scale-mode"?: "viewport" | "container" | string;
17
+ scaleMode?: "viewport" | "container" | string;
14
18
  typography?: string;
15
19
  root?: string;
16
20
  prefix?: string | boolean;
package/src/types/vars.d.ts CHANGED
@@ -6,6 +6,7 @@
6
6
  export type ClampographyVars =
7
7
  | "--clampography-background"
8
8
  | "--clampography-border"
9
+ | "--clampography-border-width"
9
10
  | "--clampography-error"
10
11
  | "--clampography-fluid-max"
11
12
  | "--clampography-fluid-min"
@@ -54,6 +55,7 @@ export type ClampographyVars =
54
55
  | "--clampography-list-indent"
55
56
  | "--clampography-muted"
56
57
  | "--clampography-primary"
58
+ | "--clampography-radius"
57
59
  | "--clampography-scroll-offset"
58
60
  | "--clampography-secondary"
59
61
  | "--clampography-spacing-lg"