clampography 2.0.0-beta.24 → 2.0.0-beta.26

package/css/forms.min.css

@@ -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(--spacing-xs) var(--spacing-sm);background-color:var(--clampography-surface);color:var(--clampography-text);border:1px solid var(--clampography-border);border-radius:0.375rem;font-weight:500;white-space:nowrap;transition-property:background-color, border-color, color, box-shadow;transition-duration:150ms}:root :where(button, [type='button'], [type='reset'], [type='submit']):hover{background-color:var(--clampography-background);border-color:var(--clampography-primary)}:root :where(button, [type='button'], [type='submit']).primary, :root [type='submit']{background-color:var(--clampography-primary);color:var(--clampography-background);border-color:var(--clampography-primary)}:root :where(button, [type='button'], [type='submit']).primary:hover, :root [type='submit']:hover{filter:brightness(1.1)}:root :where(input:not([type='checkbox'], [type='radio'], [type='range'], [type='color']), textarea, select){display:block;width:100%;padding:var(--spacing-xs) var(--spacing-sm);background-color:var(--clampography-background);color:var(--clampography-text);border:1px solid var(--clampography-border);border-radius:0.375rem;transition-property:border-color, box-shadow;transition-duration:150ms}:root :where(input:not([type='checkbox'], [type='radio'], [type='range'], [type='color']), textarea, select):focus{outline:none;border-color:var(--clampography-primary);box-shadow:0 0 0 3px color-mix(in oklab, var(--clampography-primary) 20%, transparent)}:root :where(input, textarea, select):disabled{opacity:0.5;cursor:not-allowed}:root :where(input, textarea, select)[readonly]{background-color:color-mix(in oklab, var(--clampography-surface) 50%, transparent);cursor:default}:root :where(input, textarea, select):user-invalid{border-color:var(--clampography-error)}:root :where(input, textarea, select):user-invalid:focus{box-shadow:0 0 0 3px color-mix(in oklab, var(--clampography-error) 20%, transparent)}:root [type='search']::-webkit-search-cancel-button, :root [type='search']::-webkit-search-decoration{-webkit-appearance:none;appearance:none}:root [type='number']::-webkit-inner-spin-button, :root [type='number']::-webkit-outer-spin-button{height:auto}:root :where(input, textarea, select)::placeholder{color:var(--clampography-muted)}:root select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3E%3C/svg%3E");background-position:right 0.5rem center;background-repeat:no-repeat;background-size:1.5em 1.5em;padding-right:2.5rem}:root [type='file']{padding:0;background-color:transparent;border:none;cursor:pointer}:root [type='file']::file-selector-button{display:inline-flex;align-items:center;padding:var(--spacing-xs) var(--spacing-sm);margin-right:var(--spacing-sm);background-color:var(--clampography-surface);color:var(--clampography-text);border:1px solid var(--clampography-border);border-radius:0.375rem;font-family:inherit;font-size:inherit;cursor:pointer;transition-property:background-color, border-color;transition-duration:150ms}:root [type='file']:hover::file-selector-button{background-color:var(--clampography-background);border-color:var(--clampography-primary)}:root [type='checkbox'], :root [type='radio']{width:1em;height:1em;accent-color:var(--clampography-primary);vertical-align:middle;cursor:pointer}:root [type='checkbox']:focus-visible, :root [type='radio']:focus-visible{outline:2px solid var(--clampography-primary);outline-offset:2px}:root [type='range']{accent-color:var(--clampography-primary);width:100%;cursor:pointer}:root [type='color']{padding:0.125rem;width:2.5rem;height:2.5rem;border:1px solid var(--clampography-border);border-radius:0.375rem;background-color:var(--clampography-background);cursor:pointer}:root fieldset{border:1px solid var(--clampography-border);border-radius:0.5rem;background-color:var(--clampography-surface)}:root legend{color:var(--clampography-heading)}:root label{color:var(--clampography-text)}:root output{color:var(--clampography-primary);font-weight:600}:root :where(meter, progress){accent-color:var(--clampography-primary);width:100%}}
+@layer base{:root :where(button, [type='button'], [type='reset'], [type='submit']){display:inline-flex;align-items:center;justify-content:center;gap:0.375em;padding:var(--spacing-xs) var(--spacing-sm);background-color:var(--clampography-surface);color:var(--clampography-text);border:1px solid var(--clampography-border);border-radius:0.375rem;font-weight:500;white-space:nowrap;transition-property:background-color, border-color, color, box-shadow;transition-duration:150ms}:root :where(button, [type='button'], [type='reset'], [type='submit']):hover{background-color:var(--clampography-background);border-color:var(--clampography-primary)}:root :where(button, [type='button'], [type='submit']).primary, :root [type='submit']{background-color:var(--clampography-primary);color:var(--clampography-background);border-color:var(--clampography-primary)}:root :where(button, [type='button'], [type='submit']).primary:hover, :root [type='submit']:hover{filter:brightness(1.1)}:root :where(input:not([type='checkbox'], [type='radio'], [type='range'], [type='color']), textarea, select){display:block;width:100%;padding:var(--spacing-xs) var(--spacing-sm);background-color:var(--clampography-background);color:var(--clampography-text);border:1px solid var(--clampography-border);border-radius:0.375rem;transition-property:border-color, box-shadow;transition-duration:150ms}:root :where(input:not([type='checkbox'], [type='radio'], [type='range'], [type='color']), textarea, select):focus{outline:none;border-color:var(--clampography-primary);box-shadow:0 0 0 3px color-mix(in oklab, var(--clampography-primary) 20%, transparent)}:root :where(input, textarea, select):disabled{opacity:0.5;cursor:not-allowed}:root :where(input, textarea, select)[readonly]{background-color:color-mix(in oklab, var(--clampography-surface) 50%, transparent);cursor:default}:root :where(input, textarea, select):user-invalid{border-color:var(--clampography-error)}:root :where(input, textarea, select):user-invalid:focus{box-shadow:0 0 0 3px color-mix(in oklab, var(--clampography-error) 20%, transparent)}:root [type='search']::-webkit-search-cancel-button, :root [type='search']::-webkit-search-decoration{-webkit-appearance:none;appearance:none}:root [type='number']::-webkit-inner-spin-button, :root [type='number']::-webkit-outer-spin-button{height:auto}:root :where(input, textarea, select)::placeholder{color:var(--clampography-muted)}:root select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3E%3C/svg%3E");background-position:right 0.5rem center;background-repeat:no-repeat;background-size:1.5em 1.5em;padding-right:2.5rem}:root [type='file']{padding:0;background-color:transparent;border:none;cursor:pointer}:root [type='file']::file-selector-button{display:inline-flex;align-items:center;padding:var(--spacing-xs) var(--spacing-sm);margin-right:var(--spacing-sm);background-color:var(--clampography-surface);color:var(--clampography-text);border:1px solid var(--clampography-border);border-radius:0.375rem;font-family:inherit;font-size:inherit;cursor:pointer;transition-property:background-color, border-color;transition-duration:150ms}:root [type='file']:hover::file-selector-button{background-color:var(--clampography-background);border-color:var(--clampography-primary)}:root [type='checkbox'], :root [type='radio']{width:1em;height:1em;accent-color:var(--clampography-primary);vertical-align:middle;cursor:pointer}:root [type='checkbox']:focus-visible, :root [type='radio']:focus-visible{outline:2px solid var(--clampography-primary);outline-offset:2px}:root [type='range']{accent-color:var(--clampography-primary);width:100%;cursor:pointer}:root [type='color']{padding:0.125rem;width:2.5rem;height:2.5rem;border:1px solid var(--clampography-border);border-radius:0.375rem;background-color:var(--clampography-background);cursor:pointer}:root fieldset{border:1px solid var(--clampography-border);border-radius:0.5rem;background-color:var(--clampography-surface)}:root legend{color:var(--clampography-heading)}:root label{color:var(--clampography-text)}:root output{color:var(--clampography-primary);font-weight:600}:root progress{-webkit-appearance:none;appearance:none;width:100%;height:1em;background:transparent}:root progress::-webkit-progress-bar{background:color-mix(in oklab, var(--clampography-text) 20%, transparent)}:root progress::-webkit-progress-value{background:var(--clampography-success)}:root progress::-moz-progress-bar{background:var(--clampography-success)}:root meter{-webkit-appearance:none;appearance:none;width:100%;height:1em;background:transparent}@supports (-moz-appearance: none){:root progress{background:color-mix(in oklab, var(--clampography-text) 20%, transparent)}:root meter{background:color-mix(in oklab, var(--clampography-text) 20%, transparent)}}:root meter::-webkit-meter-inner-element{display:flex;align-items:stretch;height:1em}:root meter::-webkit-meter-bar{background:color-mix(in oklab, var(--clampography-text) 20%, transparent);height:100%}:root meter::-webkit-meter-optimum-value{background:var(--clampography-success);height:100%}:root meter:-moz-meter-optimum::-moz-meter-bar{background:var(--clampography-success)}:root meter::-webkit-meter-suboptimum-value{background:var(--clampography-warning);height:100%}:root meter:-moz-meter-sub-optimum::-moz-meter-bar{background:var(--clampography-warning)}:root meter::-webkit-meter-even-less-good-value{background:var(--clampography-error);height:100%}:root meter:-moz-meter-sub-sub-optimum::-moz-meter-bar{background:var(--clampography-error)}}

package/css/kbd.css

@@ -3,7 +3,7 @@
 :root kbd {
   display: inline-block;
   padding: 0.1em 0.45em;
-  min-width: 1.6em;
+  min-width: 2em;
   text-align: center;
   font-size: 0.8em;
   font-weight: 700;

package/css/kbd.min.css

@@ -1 +1 @@
-@layer base{:root kbd{display:inline-block;padding:0.1em 0.45em;min-width:1.6em;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)}}
+@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/theme.css

@@ -0,0 +1,90 @@
+@layer base {
+
+:where(:root), [data-theme="light"] {
+  color-scheme: light;
+  --clampography-background: oklch(100% 0 0);
+  --clampography-border: oklch(92% 0.003 264);
+  --clampography-error: oklch(63% 0.22 27);
+  --clampography-heading: oklch(15% 0.02 264);
+  --clampography-info: oklch(63% 0.258 262);
+  --clampography-link: oklch(43% 0.19 264);
+  --clampography-muted: oklch(52% 0.014 258);
+  --clampography-primary: oklch(63% 0.258 262);
+  --clampography-secondary: oklch(55% 0.28 300);
+  --clampography-success: oklch(65% 0.17 165);
+  --clampography-surface: oklch(96% 0.003 264);
+  --clampography-text: oklch(31% 0.02 257);
+  --clampography-warning: oklch(72% 0.17 65);
+}
+
+@media (prefers-color-scheme: dark) {
+
+ :root {
+   color-scheme: dark;
+   --clampography-background: oklch(10% 0 0);
+   --clampography-border: oklch(31% 0.03 254);
+   --clampography-error: oklch(63% 0.22 27);
+   --clampography-heading: oklch(98% 0.003 264);
+   --clampography-info: oklch(72% 0.17 254);
+   --clampography-link: oklch(72% 0.17 254);
+   --clampography-muted: oklch(68% 0.024 254);
+   --clampography-primary: oklch(63% 0.258 262);
+   --clampography-secondary: oklch(63% 0.25 300);
+   --clampography-success: oklch(65% 0.17 165);
+   --clampography-surface: oklch(12% 0 0);
+   --clampography-text: oklch(95% 0 0);
+   --clampography-warning: oklch(72% 0.17 65);
+ }
+
+ [data-theme="dark"] {
+   color-scheme: dark;
+   --clampography-background: oklch(10% 0 0);
+   --clampography-border: oklch(31% 0.03 254);
+   --clampography-error: oklch(63% 0.22 27);
+   --clampography-heading: oklch(98% 0.003 264);
+   --clampography-info: oklch(72% 0.17 254);
+   --clampography-link: oklch(72% 0.17 254);
+   --clampography-muted: oklch(68% 0.024 254);
+   --clampography-primary: oklch(63% 0.258 262);
+   --clampography-secondary: oklch(63% 0.25 300);
+   --clampography-success: oklch(65% 0.17 165);
+   --clampography-surface: oklch(12% 0 0);
+   --clampography-text: oklch(95% 0 0);
+   --clampography-warning: oklch(72% 0.17 65);
+ }
+
+ [data-theme="light"] {
+   color-scheme: light;
+   --clampography-background: oklch(100% 0 0);
+   --clampography-border: oklch(92% 0.003 264);
+   --clampography-error: oklch(63% 0.22 27);
+   --clampography-heading: oklch(15% 0.02 264);
+   --clampography-info: oklch(63% 0.258 262);
+   --clampography-link: oklch(43% 0.19 264);
+   --clampography-muted: oklch(52% 0.014 258);
+   --clampography-primary: oklch(63% 0.258 262);
+   --clampography-secondary: oklch(55% 0.28 300);
+   --clampography-success: oklch(65% 0.17 165);
+   --clampography-surface: oklch(96% 0.003 264);
+   --clampography-text: oklch(31% 0.02 257);
+   --clampography-warning: oklch(72% 0.17 65);
+ }
+}
+
+[data-theme="dark"] {
+  color-scheme: dark;
+  --clampography-background: oklch(10% 0 0);
+  --clampography-border: oklch(31% 0.03 254);
+  --clampography-error: oklch(63% 0.22 27);
+  --clampography-heading: oklch(98% 0.003 264);
+  --clampography-info: oklch(72% 0.17 254);
+  --clampography-link: oklch(72% 0.17 254);
+  --clampography-muted: oklch(68% 0.024 254);
+  --clampography-primary: oklch(63% 0.258 262);
+  --clampography-secondary: oklch(63% 0.25 300);
+  --clampography-success: oklch(65% 0.17 165);
+  --clampography-surface: oklch(12% 0 0);
+  --clampography-text: oklch(95% 0 0);
+  --clampography-warning: oklch(72% 0.17 65);
+}
+}

package/css/theme.min.css

@@ -0,0 +1 @@
+@layer base{:where(:root), [data-theme="light"]{color-scheme:light;--clampography-background:oklch(100% 0 0);--clampography-border:oklch(92% 0.003 264);--clampography-error:oklch(63% 0.22 27);--clampography-heading:oklch(15% 0.02 264);--clampography-info:oklch(63% 0.258 262);--clampography-link:oklch(43% 0.19 264);--clampography-muted:oklch(52% 0.014 258);--clampography-primary:oklch(63% 0.258 262);--clampography-secondary:oklch(55% 0.28 300);--clampography-success:oklch(65% 0.17 165);--clampography-surface:oklch(96% 0.003 264);--clampography-text:oklch(31% 0.02 257);--clampography-warning:oklch(72% 0.17 65)}@media (prefers-color-scheme: dark){:root{color-scheme:dark;--clampography-background:oklch(10% 0 0);--clampography-border:oklch(31% 0.03 254);--clampography-error:oklch(63% 0.22 27);--clampography-heading:oklch(98% 0.003 264);--clampography-info:oklch(72% 0.17 254);--clampography-link:oklch(72% 0.17 254);--clampography-muted:oklch(68% 0.024 254);--clampography-primary:oklch(63% 0.258 262);--clampography-secondary:oklch(63% 0.25 300);--clampography-success:oklch(65% 0.17 165);--clampography-surface:oklch(12% 0 0);--clampography-text:oklch(95% 0 0);--clampography-warning:oklch(72% 0.17 65)}[data-theme="dark"]{color-scheme:dark;--clampography-background:oklch(10% 0 0);--clampography-border:oklch(31% 0.03 254);--clampography-error:oklch(63% 0.22 27);--clampography-heading:oklch(98% 0.003 264);--clampography-info:oklch(72% 0.17 254);--clampography-link:oklch(72% 0.17 254);--clampography-muted:oklch(68% 0.024 254);--clampography-primary:oklch(63% 0.258 262);--clampography-secondary:oklch(63% 0.25 300);--clampography-success:oklch(65% 0.17 165);--clampography-surface:oklch(12% 0 0);--clampography-text:oklch(95% 0 0);--clampography-warning:oklch(72% 0.17 65)}[data-theme="light"]{color-scheme:light;--clampography-background:oklch(100% 0 0);--clampography-border:oklch(92% 0.003 264);--clampography-error:oklch(63% 0.22 27);--clampography-heading:oklch(15% 0.02 264);--clampography-info:oklch(63% 0.258 262);--clampography-link:oklch(43% 0.19 264);--clampography-muted:oklch(52% 0.014 258);--clampography-primary:oklch(63% 0.258 262);--clampography-secondary:oklch(55% 0.28 300);--clampography-success:oklch(65% 0.17 165);--clampography-surface:oklch(96% 0.003 264);--clampography-text:oklch(31% 0.02 257);--clampography-warning:oklch(72% 0.17 65)}}[data-theme="dark"]{color-scheme:dark;--clampography-background:oklch(10% 0 0);--clampography-border:oklch(31% 0.03 254);--clampography-error:oklch(63% 0.22 27);--clampography-heading:oklch(98% 0.003 264);--clampography-info:oklch(72% 0.17 254);--clampography-link:oklch(72% 0.17 254);--clampography-muted:oklch(68% 0.024 254);--clampography-primary:oklch(63% 0.258 262);--clampography-secondary:oklch(63% 0.25 300);--clampography-success:oklch(65% 0.17 165);--clampography-surface:oklch(12% 0 0);--clampography-text:oklch(95% 0 0);--clampography-warning:oklch(72% 0.17 65)}}

package/package.json

@@ -62,8 +62,11 @@
   },
   "scripts": {
     "build": "bun src/convert.js",
-    "test": "bun test"
+    "test": "bun test",
+    "dev:css": "bunx @tailwindcss/cli -i ./dev/input.css -o ./dev/output.css --watch",
+    "dev:server": "bun run dev/server.js",
+    "dev": "bun run dev/server.js"
   },
   "type": "module",
-  "version": "2.0.0-beta.24"
+  "version": "2.0.0-beta.26"
 }

package/src/base.js

@@ -34,11 +34,11 @@ export default (options = {}) => {
   return {
     // ROOT CONFIGURATION
     [root]: {
-      "--spacing-xs": "clamp(0.5rem, 0.375rem + 0.625vw, 0.75rem)",
-      "--spacing-sm": "clamp(0.75rem, 0.5625rem + 0.9375vw, 1.25rem)",
-      "--spacing-md": "clamp(1rem, 0.75rem + 1.25vw, 1.5rem)",
-      "--spacing-lg": "clamp(1.5rem, 1.125rem + 1.875vw, 2.5rem)",
-      "--spacing-xl": "clamp(2rem, 1.5rem + 2.5vw, 3rem)",
+      "--spacing-xs": "clamp(0.25rem, 1.25vw, 0.75rem)",
+      "--spacing-sm": "clamp(0.375rem, -0.0625rem + 2.1875vw, 1.25rem)",
+      "--spacing-md": "clamp(0.5rem, 2.5vw, 1.5rem)",
+      "--spacing-lg": "clamp(0.75rem, -0.125rem + 4.375vw, 2.5rem)",
+      "--spacing-xl": "clamp(1rem, 5vw, 3rem)",
       "--list-indent": "clamp(1.5rem, 1.25rem + 1.25vw, 2rem)",
       "--scroll-offset": "5rem",
       "--font-family-base":
@@ -202,6 +202,7 @@ export default (options = {}) => {
 
     [scope("abbr[title]")]: {
       "text-decoration": "underline dotted",
+      "text-underline-offset": "4px",
       cursor: "help",
     },
 
@@ -386,7 +387,7 @@ export default (options = {}) => {
     [scope("fieldset")]: {
       "margin-top": "var(--spacing-md)",
       "margin-bottom": "var(--spacing-md)",
-      padding: "var(--spacing-md)",
+      padding: "var(--spacing-sm)",
     },
 
     [scope("legend")]: {

package/src/convert.js

@@ -9,7 +9,7 @@ import { existsSync, mkdirSync, readFileSync, statSync, writeFileSync } from "fs
 import { basename, resolve } from "path";
 
 // Configuration
-const FILES_TO_CONVERT = ["base.js", "extra.js", "forms.js", "kbd.js"];
+const FILES_TO_CONVERT = ["base.js", "theme.js", "extra.js", "forms.js", "kbd.js"];
 const OUTPUT_DIR = "css";
 
 // Options passed to the JS functions (simulating plugin config)

package/src/extra.js

@@ -87,7 +87,7 @@ export default (options = {}) => {
       "background-color": "var(--clampography-surface)",
       "border": "1px solid var(--clampography-border)",
       "border-radius": "0.375rem",
-      "padding": "1rem",
+      "padding": "var(--spacing-md)",
     },
 
     // Tables
@@ -121,8 +121,8 @@ export default (options = {}) => {
     [scope("hr")]: {
       "height": "1px",
       "border-width": "0",
-      "margin-top": "3rem",
-      "margin-bottom": "3rem",
+      "margin-top": "var(--spacing-xl)",
+      "margin-bottom": "var(--spacing-xl)",
       "background-color": "var(--clampography-border)",
     },
 
@@ -131,7 +131,7 @@ export default (options = {}) => {
       "border-left-width": "4px",
       "border-left-color": "var(--clampography-primary)",
       "background-color": "var(--clampography-surface)",
-      "padding": "1rem",
+      "padding": "var(--spacing-md)",
       "border-radius": "0.25rem",
       "font-style": "italic",
       "color": "var(--clampography-heading)",
@@ -155,16 +155,17 @@ export default (options = {}) => {
     [scope("details")]: {
       "border": "1px solid var(--clampography-border)",
       "border-radius": "0.375rem",
-      "padding": "0.5rem",
+      "padding": "var(--spacing-sm)",
     },
 
     [scope("summary")]: {
       "color": "var(--clampography-heading)",
+      "border-bottom": "0px solid var(--clampography-border)",
     },
 
     [scope("details[open] > summary")]: {
-      "border-bottom": "1px solid var(--clampography-border)",
-      "padding-bottom": "0.5rem",
+      "border-bottom-width": "1px",
+      "padding-bottom": "var(--spacing-sm)",
     },
   };
 };

package/src/forms.js

@@ -205,10 +205,94 @@ export default (options = {}) => {
       "font-weight": "600",
     },
 
-    // ── Meter & Progress ──────────────────────────────────────────────────────
-    [scope(":where(meter, progress)")]: {
-      "accent-color": "var(--clampography-primary)",
+    // ── Progress ──────────────────────────────────────────────────────────────
+    [scope("progress")]: {
+      "-webkit-appearance": "none",
+      "appearance": "none",
       "width": "100%",
+      "height": "1em",
+      "background": "transparent",
     },
+
+    // WebKit progress track
+    [scope("progress::-webkit-progress-bar")]: {
+      "background": "color-mix(in oklab, var(--clampography-text) 20%, transparent)",
+    },
+
+    // WebKit progress value
+    [scope("progress::-webkit-progress-value")]: {
+      "background": "var(--clampography-success)",
+    },
+
+    // Firefox progress value
+    [scope("progress::-moz-progress-bar")]: {
+      "background": "var(--clampography-success)",
+    },
+
+    // ── Meter ─────────────────────────────────────────────────────────────────
+    // Custom styling for <meter> (accent-color does not work on meter)
+    [scope("meter")]: {
+      "-webkit-appearance": "none",
+      "appearance": "none",
+      "width": "100%",
+      "height": "1em",
+      "background": "transparent",
+    },
+
+    // Firefox track (restored via Firefox-only feature query)
+    // @supports (-moz-appearance: none) is ignored by all WebKit/Blink browsers
+    "@supports (-moz-appearance: none)": {
+      [scope("progress")]: {
+        "background": "color-mix(in oklab, var(--clampography-text) 20%, transparent)",
+      },
+      [scope("meter")]: {
+        "background": "color-mix(in oklab, var(--clampography-text) 20%, transparent)",
+      },
+    },
+
+    // Re-establish height context for WebKit shadow DOM
+    // appearance:none breaks Chrome's flex layout; inner elements can't resolve height:100%
+    // without a concrete parent height set here.
+    // display:flex + align-items:stretch forces the child bar to fill the full height
+    // without top-anchoring it the way display:block would.
+    [scope("meter::-webkit-meter-inner-element")]: {
+      "display": "flex",
+      "align-items": "stretch",
+      "height": "1em",
+    },
+
+    // WebKit inner track
+    [scope("meter::-webkit-meter-bar")]: {
+      "background": "color-mix(in oklab, var(--clampography-text) 20%, transparent)",
+      "height": "100%",
+    },
+
+    // 1. Optimum (Success)
+    [scope("meter::-webkit-meter-optimum-value")]: {
+      "background": "var(--clampography-success)",
+      "height": "100%",
+    },
+    [scope("meter:-moz-meter-optimum::-moz-meter-bar")]: {
+      "background": "var(--clampography-success)",
+    },
+
+    // 2. Sub-optimum (Warning)
+    [scope("meter::-webkit-meter-suboptimum-value")]: {
+      "background": "var(--clampography-warning)",
+      "height": "100%",
+    },
+    [scope("meter:-moz-meter-sub-optimum::-moz-meter-bar")]: {
+      "background": "var(--clampography-warning)",
+    },
+
+    // 3. Even less good (Error)
+    [scope("meter::-webkit-meter-even-less-good-value")]: {
+      "background": "var(--clampography-error)",
+      "height": "100%",
+    },
+    [scope("meter:-moz-meter-sub-sub-optimum::-moz-meter-bar")]: {
+      "background": "var(--clampography-error)",
+    },
+
   };
 };

package/src/kbd.js

@@ -44,7 +44,7 @@ export default (options = {}) => {
     [scope("kbd")]: {
       "display": "inline-block",
       "padding": "0.1em 0.45em",
-      "min-width": "1.6em",
+      "min-width": "2em",
       "text-align": "center",
       "font-size": "0.8em",
       "font-weight": "700",

package/src/theme.js

@@ -0,0 +1,34 @@
+import { themes } from "./themes.js";
+
+/**
+ * CDN Theme Generator
+ * Extracts light/dark themes from themes.js and structures them
+ * for the Vanilla CSS build process.
+ */
+export default (options = {}) => {
+  const root = options.root || ":root";
+  const themeStyles = {};
+
+  // 1. Default Theme (Light)
+  if (themes["light"]) {
+    // :where() lowers specificity so users can override it easily
+    themeStyles[`:where(${root}), [data-theme="light"]`] = themes["light"];
+  }
+
+  // 2. Dark Mode (prefers-color-scheme)
+  if (themes["dark"]) {
+    themeStyles["@media (prefers-color-scheme: dark)"] = {
+      // Default to dark if system prefers dark
+      [root]: themes["dark"],
+      // Keep data-theme="dark" inside media query for completeness
+      [`[data-theme="dark"]`]: themes["dark"],
+      // Allow overriding back to light even if system is dark
+      [`[data-theme="light"]`]: themes["light"]
+    };
+    
+    // 3. Explicit Data Theme (Dark) - works regardless of system preference
+    themeStyles[`[data-theme="dark"]`] = themes["dark"];
+  }
+
+  return themeStyles;
+};