actual-css 0.1.0 → 0.3.0

package/src/css/reset.css

@@ -24,16 +24,6 @@ select {
   display: none !important;
 }
 
-/* Legacy dialog fallback only. Modern dialogs keep the browser's native closed
-   state so display/overlay transitions are not flattened by the reset.
-   The presentation for the dialog-fallback.js shim lives in the separate
-   dialog-fallback.css, so it can be dropped from custom bundles. */
-@supports not (selector(dialog:modal)) {
-  dialog:not([open]) {
-    display: none;
-  }
-}
-
 :where(img, svg, video) {
   max-inline-size: 100%;
   block-size: auto;

package/src/css/theme.css

@@ -1,3 +1,14 @@
+/*
+ * Theme tokens — the palette, surfaces, text, borders, radius and shadow
+ * color. Named themes (themes/*.css) override this file; authors can set the
+ * same tokens on :root or on [data-theme="…"] islands.
+ *
+ * Public: Intent colors, Surfaces, Text, Lines and focus, Radius scale,
+ * Shadow color, Focus ring derivation.
+ * Derived: "Theme-derived aliases", Tone subsystem, Backdrop fill — reference
+ * other tokens; hard-coded overrides on a custom theme will break the intent.
+ * Internal: --hgroup-gap.
+ */
 :root {
   color-scheme: light dark;
 }
@@ -61,11 +72,10 @@
 
   /* Lines and focus */
   --border: hsl(260 15% 88%);
-  --focus: var(--primary);
+  --focus: var(--neutral);
   /* Pre-color-mix fallback only — superseded below by a derivation from
-     --focus so overriding --primary/--focus never leaves a stale ring. */
-  --focus-ring: hsl(268 32% 33% / 0.22);
-  --focus-ring-shadow: 0 0 0 3px var(--focus-ring);
+     --focus so overriding --neutral/--focus never leaves a stale ring. */
+  --focus-ring: hsl(258 7% 43% / 0.3);
   --hover-overlay: hsl(260 20% 10% / 0.04);
 
   /* Radius scale — themes may override the whole scale (e.g. [data-theme="square"]) */
@@ -76,13 +86,19 @@
   /* Shadow color — consumed by --shadow / --shadow-popout in tokens.css */
   --shadow-color: hsl(260 25% 10%);
 
-  /* Heading and selection — derived from theme color tokens */
+  /* hgroup internal gap */
+  --hgroup-gap: 0.25em;
+}
+
+/* Theme-derived aliases — re-declared on every theme boundary (see tokens.css
+   for the custom-property resolution rationale): islands recompute these from
+   their own tokens instead of inheriting :root's resolved values. */
+:root,
+[data-theme] {
   --heading: var(--text);
   --selection-bg: var(--primary);
   --selection-fg: var(--primary-fg);
-
-  /* hgroup internal gap */
-  --hgroup-gap: 0.25em;
+  --focus-ring-shadow: 0 0 0 var(--focus-ring-width) var(--focus-ring);
 }
 
 /* Tone subsystem — fixed-backdrop foreground for components placed over media
@@ -106,7 +122,7 @@
   :root,
   [data-theme="light"],
   [data-theme="dark"] {
-    --focus-ring: color-mix(in oklch, var(--focus) 22%, transparent);
+    --focus-ring: color-mix(in oklch, var(--focus) 30%, transparent);
   }
 }
 
@@ -146,7 +162,7 @@
     --text-subtle: light-dark(hsl(258 7% 57%), hsl(258 7% 54%));
 
     --border: light-dark(hsl(260 15% 88%), hsl(262 12% 24%));
-    --focus-ring: light-dark(hsl(268 32% 33% / 0.22), hsl(268 42% 76% / 0.28));
+    --focus-ring: light-dark(hsl(258 7% 43% / 0.3), hsl(258 10% 72% / 0.28));
     --hover-overlay: light-dark(hsl(260 20% 10% / 0.04), hsl(0 0% 100% / 0.06));
     --shadow-color: light-dark(hsl(260 25% 10%), hsl(262 40% 2%));
   }
@@ -156,7 +172,7 @@
   :root,
   [data-theme="light"] {
     --focus-ring: light-dark(
-      color-mix(in oklch, var(--focus) 22%, transparent),
+      color-mix(in oklch, var(--focus) 30%, transparent),
       color-mix(in oklch, var(--focus) 28%, transparent)
     );
   }
@@ -166,7 +182,7 @@
   :root,
   [data-theme="light"],
   [data-theme="dark"] {
-    --focus-outline: calc(var(--border-width) * 2) solid Highlight;
+    --focus-outline-color: Highlight;
     --focus-ring-shadow: none;
 
     --backdrop-fill: Canvas;
@@ -179,7 +195,7 @@
   [data-theme="dark"] {
     --border-width: 2px;
     --focus-outline-offset: 3px;
-    --focus-ring-shadow: 0 0 0 4px var(--focus-ring);
+    --focus-ring-width: 4px;
     --text-muted: var(--text);
     --text-subtle: var(--text);
   }

package/src/css/themes/cyberpunk.css

@@ -1,5 +1,5 @@
 /* Cyberpunk — light-only stress-test theme (single block, color-scheme: light,
- * same shape as dark.css). Illustrative rather than production: it exists to
+ * same shape as indigo.css). Illustrative rather than production: it exists to
  * prove the token contract survives an extreme spec — a saturated yellow
  * canvas, near-black text and borders, dark-on-bright intent pairs, zero
  * radius, 2px strokes, and hard offset shadows — without touching a single

package/src/css/themes/dim.css

@@ -1,7 +1,7 @@
 /* Dim — a dark theme variant that lifts the surface tones up a few percentage
- * points. Same shape as dark.css (dark-only, single block) so authors can drop
- * it in when the canonical dark is too dense. Demonstrates how a theme can
- * recolor the same token set without changing structure. */
+ * points. Same shape as indigo.css (dark-only, single block) so authors can
+ * drop it in when the canonical dark is too dense. Demonstrates how a theme
+ * can recolor the same token set without changing structure. */
 [data-theme="dim"] {
   color-scheme: dark;
 

package/src/css/themes/edge.css

@@ -3,9 +3,9 @@
  * intent-colored lower edge (.solid remains available when an action needs a
  * filled treatment), text controls (input/textarea/select) pick up the same
  * lower-edge accent via --control-border-block-end-*, alerts get an
- * intent-colored leading flag via --alert-border-inline-start-*, and text
- * controls and buttons both get a thinner, tighter focus outline than the
- * shared recipe. */
+ * intent-colored leading flag via --alert-border-inline-start-*. The focus
+ * ring keeps the shared width — edge only drops the border-color flip so the
+ * intent-colored lower edge stays dominant. */
 [data-theme="edge"] {
   color-scheme: light dark;
 
@@ -61,13 +61,11 @@
   --ui-hover-bg: var(--surface-raised);
 }
 
-@media (hover: hover) {
-  [data-theme="edge"]
-    .btn:not(
-      :where(:disabled, [aria-disabled="true"], .solid, .soft, .outline, .ghost, .link)
-    ):hover {
-    box-shadow: none;
-  }
+[data-theme="edge"]
+  .btn:not(
+    :where(:disabled, [aria-disabled="true"], .solid, .soft, .outline, .ghost, .link)
+  ):hover {
+  box-shadow: none;
 }
 
 /* Intent-dependent alert token, same reasoning as the button rule above:
@@ -79,38 +77,14 @@
 }
 
 /* Focus recipe override — the base recipe (control.css) flips --control-border
-   to --focus on top of the outline + ring, which triples up with the lower-edge
-   accent already visible here. Edge drops the border-color flip and thickens
-   the accent edge instead; the ring stays untouched. */
+   to --focus and draws a box-shadow ring. Edge drops the border-color flip and
+   thickens the accent edge instead so the intent-coloured lower edge stays
+   dominant; the focus ring and its 3px width remain the same as the default. */
 [data-theme="edge"] :is(.input, .textarea, .select):focus-visible {
   --control-border: var(--border);
   --control-border-block-end-width: 3px;
 }
 
-/* The shared 2px-solid/2px-offset outline reads as a second ring on top of
-   the accent edge (inputs) or the box-shadow ring (buttons). Edge thins both
-   to the border width and tightens the offset so the outline hugs the
-   control instead of floating a second halo around it. Gated outside
-   forced-colors so that mode's Highlight-colored --focus-outline (theme.css)
-   stays in charge for inputs — a direct property on the element would
-   otherwise out-specificity that fallback regardless of the media condition
-   it was declared under. Buttons don't consume --focus-outline (they compute
-   their own outline so it can use --btn-focus-color's intent awareness), so
-   they get their own local width token, --btn-focus-outline-width. */
-@media not (forced-colors: active) {
-  [data-theme="edge"] :is(.input, .textarea, .select, .btn) {
-    --focus-outline-offset: 1px;
-  }
-
-  [data-theme="edge"] :is(.input, .textarea, .select) {
-    --focus-outline: var(--border-width) solid var(--focus);
-  }
-
-  [data-theme="edge"] .btn {
-    --btn-focus-outline-width: var(--border-width);
-  }
-}
-
 @supports (color: light-dark(red, blue)) {
   [data-theme="edge"] {
     --primary: light-dark(hsl(224 72% 42%), hsl(220 80% 76%));

package/src/css/themes/index.css

@@ -5,7 +5,7 @@
  * The themes are illustrative: each one demonstrates a different set of knobs
  * the token contract exposes, beyond recoloring.
  *
- *   dark       — canonical dark (single block, color-scheme: dark only)
+ *   indigo     — deep blue/violet dark palette (single block)
  *   dim        — dark variant with lifted surface tones
  *   corporate  — reference paired light/dark recolor via light-dark()
  *   forest     — paired recolor + scaled-up radius tokens
@@ -24,9 +24,9 @@
  *   gradient   — paired recolor + Bootstrap 4 style gradient on solid buttons
  *                via component-local button tokens
  *
- * Single-block themes (dark, dim, cyberpunk, neon) pin one color-scheme and
+ * Single-block themes (indigo, dim, cyberpunk, neon) pin one color-scheme and
  * cannot adapt to prefers-color-scheme; the paired ones follow the OS. */
-@import "./dark.css";
+@import "./indigo.css";
 @import "./dim.css";
 @import "./corporate.css";
 @import "./forest.css";

package/src/css/themes/{dark.css → indigo.css}

@@ -1,7 +1,8 @@
-/* Canonical dark theme. Single-block shape (color-scheme: dark only) — it
- * does not adapt to prefers-color-scheme; opt in via [data-theme="dark"].
- * dim.css is a darker variant with lifted surface tones. */
-[data-theme="dark"] {
+/* Indigo — deep blue/violet palette, dark-only. Single-block shape
+ * (color-scheme: dark only) — it does not adapt to prefers-color-scheme;
+ * opt in via [data-theme="indigo"]. dim.css is a darker variant with
+ * lifted surface tones. */
+[data-theme="indigo"] {
   color-scheme: dark;
 
   --primary: hsl(220 90% 66%);

package/src/css/themes/neon.css

@@ -1,9 +1,9 @@
 /* Neon — dark-only theme (single block, color-scheme: dark, same shape as
- * dark.css) that demonstrates wide-gamut progressive enhancement. The baseline
- * block uses sRGB-safe hsl() and works everywhere dark.css works; on P3
- * displays with oklch() support the intents are re-declared with chroma beyond
- * sRGB. This is the pattern for shipping colors sRGB cannot express without
- * breaking older screens or browsers. Also demonstrates the soft-variant
+ * indigo.css) that demonstrates wide-gamut progressive enhancement. The
+ * baseline block uses sRGB-safe hsl() and works everywhere indigo.css works;
+ * on P3 displays with oklch() support the intents are re-declared with chroma
+ * beyond sRGB. This is the pattern for shipping colors sRGB cannot express
+ * without breaking older screens or browsers. Also demonstrates the soft-variant
  * tuning knobs and glow shadows on popovers. */
 [data-theme="neon"] {
   color-scheme: dark;

package/src/css/themes/square.css

@@ -34,9 +34,6 @@
 }
 
 @supports (color: light-dark(red, blue)) {
-  /* Square — paired light/dark theme that demonstrates overriding the full
- * --radius scale to 0 for sharp-cornered applications. The recolor is close to
- * the default blue palette; the radius override is the point. */
   [data-theme="square"] {
     --primary: light-dark(hsl(220 90% 56%), hsl(220 75% 80%));
     --primary-fg: light-dark(white, hsl(220 30% 12%));

package/src/css/tokens.css

@@ -1,4 +1,21 @@
 :root {
+  /*
+   * Global framework tokens.
+   *
+   * Public: properties in the named groups below are public API (typography,
+   * spacing, shape, motion, focus, controls, viewport, z-index, icons) unless
+   * a group is explicitly marked Internal or Derived.
+   *
+   * Derived: "Theme-derived aliases" and "State tokens" reference intent and
+   * surface tokens and follow the theme; do not hard-code values into them.
+   * Internal: indicator offsets, --bar-height, --disabled-opacity and the
+   * like are consumed by components, not authored.
+   *
+   * Component-local hooks and internal state relays live with their
+   * components. See docs/pages/foundations/tokens.md for the public/internal
+   * token contract.
+   */
+
   /* Typography */
   --font-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
   --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
@@ -16,20 +33,23 @@
   --font-size-md: 1rem;
   --font-size-lg: 1.125rem;
 
-  /* Spacing */
+  /* Spacing — official steps are named in tens so the scale stays open for
+     application themes to intercalate intermediate values (--space-15,
+     --space-45…) without colliding with future framework steps. */
   --gap: 0.75rem;
-  --variant-space: var(--space-4);
-  --space-1: 0.25rem;
-  --space-2: 0.5rem;
-  --space-3: 0.75rem;
-  --space-4: 1rem;
-  --space-5: 1.5rem;
-  --space-6: 2rem;
+  --density-space: var(--space-40);
+  --density-compact-size: 1.5rem;
+  --space-10: 0.25rem;
+  --space-20: 0.5rem;
+  --space-30: 0.75rem;
+  --space-40: 1rem;
+  --space-50: 1.5rem;
+  --space-60: 2rem;
 
   /* Shape */
   --border-width: 1px;
   --radius-full: 9999px;
-  --shadow: 0 0.5rem 1.5rem rgb(0 0 0 / 0.08);
+  --shadow: 0 1px 3px rgb(0 0 0 / 0.05), 0 4px 12px rgb(0 0 0 / 0.04);
   --shadow-popout: 0 0.25rem 0.75rem rgb(0 0 0 / 0.15);
 
   /* Motion — see reset.css for the prefers-reduced-motion hard reset.
@@ -43,14 +63,15 @@
   --ease: ease;
 
   /* Focus ring — shared by every interactive component's :focus-visible */
-  --focus-outline: calc(var(--border-width) * 2) solid var(--focus);
+  --focus-outline-color: currentColor;
+  --focus-outline: calc(var(--border-width) * 2) solid var(--focus-outline-color);
   --focus-outline-offset: 2px;
+  --focus-ring-width: 3px;
 
   /* Status dot positioning — used by .avatar > .badge:empty. The offset is
      the circle-aware inset (1 - 1/√2) / 2 ≈ 14.65%; the ring surrounds the
      dot with the parent surface color. */
   --indicator-offset: 14.65%;
-  --indicator-ring: var(--surface);
 
   /* Shared backdrop — consumed by modal, drawer, and mobile flyout sheets. */
   --backdrop-color: rgb(0 0 0);
@@ -61,7 +82,8 @@
   --bar-height: 0.65rem;
 
   /* Controls — inputs and buttons share --control-size so heights always match.
-     .sm/.lg (variants.css) switch --control-size and --control-font-size. */
+     .sm/.lg (variants.css) switch --control-size; --control-font-size stays
+     at its baseline because density does not change typography. */
   --control-size-sm: 2rem;
   --control-size-md: 2.375rem;
   --control-size-lg: 2.75rem;
@@ -69,19 +91,38 @@
   --control-pad-x: 1em;
   --control-font-size: var(--font-size-md);
   --disabled-opacity: 0.65;
+}
+
+/* Theme-derived aliases. These reference intent/surface tokens, so they must
+   be re-declared on every theme boundary: a custom property resolves its
+   var() references at computed-value time on the element that declares it,
+   so an alias declared only on :root is inherited as an already-resolved
+   value and would not follow a [data-theme] island's overridden tokens.
+   Themes that want a distinct alias override it explicitly afterwards. */
+:root,
+[data-theme] {
+  /* State tokens — semantic colors for selected/pressed/current and disabled.
+     Components consume these instead of hard-wiring --primary/--text-subtle
+     so forced-colors can override them in one place. */
+  --state-selected: var(--primary);
+  --state-selected-fg: var(--primary-fg);
+  --state-disabled: var(--text-subtle);
+
+  /* Status dot ring — follows the island's surface. */
+  --indicator-ring: var(--surface);
+}
 
+:root {
   /* Variant tuning — themes may adjust generated soft surfaces without
      replacing the component rules. */
   --soft-bg-mix: 88%;
   --soft-border-mix: 65%;
   --soft-hover-alpha: 12%;
 
-  /* Shared icons */
-  --icon-chevron-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
-  --icon-check-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
-  /* Native select uses background-image, which cannot inherit currentColor.
-     The stroke matches the default theme's text-subtle (hue 258 neutral). */
-  --icon-chevron-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%238a8594' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
+  /* Shared icon assets. Override these URLs when a strict CSP disallows data:. */
+  --icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%238a8594' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
+  --icon-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
+  --icon-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3C/svg%3E");
 
   /* Viewport size tokens — fallback vh/vw with dvh/vi enhancement.
      Consumed by full-viewport components (app-shell, drawer, modal, flyout).
@@ -90,13 +131,24 @@
   --viewport-block: 100vh;
   --viewport-inline: 100vw;
 
-  /* Layering */
+  /* Z-index scale — used ONLY by non-dialog overlays (see the layering
+     note below for the full model). Actual CSS reserves multiples of 10 for
+     framework layers; applications may use intermediate values for local
+     layering. */
   --z-sticky: 10;
   --z-menu: 20;
   --z-tooltip: 50;
   --z-status: 60;
 }
 
+@media (forced-colors: active) {
+  :root {
+    --state-selected: Highlight;
+    --state-selected-fg: HighlightText;
+    --state-disabled: GrayText;
+  }
+}
+
 @supports (block-size: 100dvh) {
   :root {
     --viewport-block: 100dvh;
@@ -110,9 +162,17 @@
 }
 
 @supports (color: color-mix(in oklch, red, white)) {
-  :root {
-    --shadow: 0 0.5rem 1.5rem color-mix(in oklch, var(--shadow-color) 8%, transparent);
+  :root,
+  [data-theme] {
+    /* Shadows derive from --shadow-color (theme.css) — re-declared on every
+       theme boundary so islands follow their own shadow-color. */
+    --shadow:
+      0 1px 3px color-mix(in oklch, var(--shadow-color) 5%, transparent),
+      0 4px 12px color-mix(in oklch, var(--shadow-color) 4%, transparent);
     --shadow-popout: 0 0.25rem 0.75rem color-mix(in oklch, var(--shadow-color) 15%, transparent);
+  }
+
+  :root {
     --backdrop-fill: color-mix(
       in oklch,
       var(--backdrop-color) calc(var(--backdrop-opacity) * 100%),

package/src/css/utilities.css

@@ -30,7 +30,7 @@
   min-inline-size: 0;
 }
 
-.nowrap {
+.text-nowrap {
   white-space: nowrap;
 }
 
@@ -125,15 +125,13 @@
   text-decoration: none;
 }
 
-@media (hover: hover) {
-  .link-muted:hover {
-    color: var(--text);
-  }
+.link-muted:hover {
+  color: var(--text);
 }
 
 /* Spacing step helpers — semantic scale (sm / default / lg).
    Names map to logical properties for writing-direction safety. The default
-   step uses --space-4, which matches the framework's built-in padding on
+   step uses --space-40, which matches the framework's built-in padding on
    cards, dialogs, and form-actions. */
 
 /* Gap */
@@ -143,20 +141,20 @@
 
 /* Padding — block (vertical) */
 .py {
-  padding-block: var(--variant-space);
+  padding-block: var(--density-space);
 }
 
 /* Padding — inline (horizontal) */
 .px {
-  padding-inline: var(--variant-space);
+  padding-inline: var(--density-space);
 }
 
 /* Margin — block-start */
 .mbs {
-  margin-block-start: var(--variant-space);
+  margin-block-start: var(--density-space);
 }
 
 /* Margin — block-end */
 .mbe {
-  margin-block-end: var(--variant-space);
+  margin-block-end: var(--density-space);
 }

package/src/css/variants.css

@@ -2,15 +2,20 @@
  * Cross-cutting variant token mapping.
  *
  * Variant scope: .solid/.soft/.outline set --ui-* for components that opt into
- * shared variants. Component-specific defaults (.btn solid-by-default, .badge
- * solid-by-default, .alert soft-by-default) live with their components:
+ * shared variants. .inverted is a surface modifier, not a variant: it also
+ * paints the element directly (background/color/border-color) so it works on
+ * any block, competing with component surface treatments (.card.subtle).
+ * Component-specific defaults (.btn solid-by-default, .badge
+ * soft-by-default, .alert soft-by-default) live with their components:
  *   components/button.css — .btn default solid + .btn.ghost + .btn.link
- *   components/badge.css   — .badge default solid
- *   components/alert.css   — .alert default + .alert.solid/.alert.outline
+ *   components/badge.css   — .badge default soft
+ *   components/alert.css   — .alert default soft (consumes --ui-* directly)
  *
- * .sm/.lg set shared size tokens. Controls consume --control-*; non-control
- * components may consume --variant-* when the variant should affect their
- * local density. Compact components may consume --variant-compact-*.
+ * .sm/.lg set shared density tokens: spacing rhythm and geometry only.
+ * Density never changes typography — controls keep their font-size and
+ * content components keep theirs. Controls consume --control-size; non-control
+ * components may consume --density-* when the density context should affect
+ * their local rhythm. Compact components may consume --density-compact-size.
  * Components with bespoke sizing (spinner, avatar) define local .sm/.lg;
  * applying .sm/.lg to card, dialog, accordion, navbar, table is
  * a no-op.
@@ -36,27 +41,34 @@
   --ui-border: var(--intent, var(--border));
 }
 
+/* Inverse surface treatment. Components (e.g. .card) compose through --ui-*;
+   the direct background/color/border-color also make .inverted useful on a
+   generic element. --heading is set so global headings (var(--heading, inherit))
+   do not inherit an outside heading color onto the dark surface. */
+.inverted {
+  --ui-bg: var(--surface-solid);
+  --ui-fg: var(--surface);
+  --ui-border: transparent;
+
+  --heading: var(--surface);
+  --busy-overlay-bg: var(--surface-solid);
+
+  background: var(--ui-bg);
+  color: var(--ui-fg);
+  border-color: var(--ui-border);
+}
+
 .sm {
-  --gap: var(--space-2);
-  --variant-space: var(--space-2);
+  --gap: var(--space-20);
+  --density-space: var(--space-20);
   --control-size: var(--control-size-sm);
-  --control-font-size: var(--font-size-sm);
-  --variant-font-size: var(--font-size-sm);
-  --variant-icon-size: 1rem;
-  --variant-pad-block: var(--space-3);
-  --variant-compact-size: 1.25rem;
-  --variant-compact-font-size: 0.75rem;
+  --density-compact-size: 1.25rem;
 }
 .lg {
-  --gap: var(--space-5);
-  --variant-space: var(--space-5);
+  --gap: var(--space-50);
+  --density-space: var(--space-50);
   --control-size: var(--control-size-lg);
-  --control-font-size: var(--font-size-lg);
-  --variant-font-size: var(--font-size-lg);
-  --variant-icon-size: 1.5rem;
-  --variant-pad-block: var(--space-5);
-  --variant-compact-size: 1.875rem;
-  --variant-compact-font-size: var(--font-size-sm);
+  --density-compact-size: 1.875rem;
 }
 
 /* Modern color enhancement. Baseline variant values above remain usable
@@ -74,45 +86,5 @@
   }
 }
 
-/* Interactive hover recipe shared by .btn and .badge. Declared outside :hover
-   on purpose: --ui-hover-bg is only consumed inside their @media (hover: hover)
-   rules, so these values are inert until hovered. :is() carries real
-   specificity so the components' :where() intent boundaries
-   (--ui-hover-bg: initial) cannot override the recipe. The solid/soft overlay
-   darkening lives in the consuming components. */
-:is(.btn, a.badge, button.badge):is(.outline, .ghost) {
-  --ui-hover-bg: var(--surface-subtle);
-}
-
-@supports (color: color-mix(in oklch, red, white)) {
-  /* Solid has no literal class requirement: bare .btn/.badge default to solid,
-     so this must match anything that isn't one of the other variants rather
-     than an explicit .solid class. Stacks with the box-shadow overlay the
-     consuming components apply on top for extra depth. */
-  :is(.btn, a.badge, button.badge):not(:where(.soft, .outline, .ghost, .link)) {
-    --ui-hover-bg: color-mix(in oklch, var(--intent, var(--neutral)) 88%, black);
-  }
-
-  /* Same recipe as the resting .soft bg with the surface share reduced by
-     --soft-hover-alpha: stays opaque, so it reads on any backdrop instead of
-     letting the container show through on hover. */
-  :is(.btn, a.badge, button.badge):is(.soft) {
-    --ui-hover-bg: color-mix(
-      in oklch,
-      var(--surface) calc(var(--soft-bg-mix) - var(--soft-hover-alpha)),
-      var(--intent, var(--neutral))
-    );
-  }
-
-  /* Mixed against the opaque --surface-subtle rather than transparent: a
-     transparent-based tint reads clean on light surfaces but goes muddy and
-     low-contrast on dark ones, since the same low alpha lands very
-     differently over a light vs. a near-black backdrop. */
-  :is(.btn, a.badge, button.badge):is(.outline) {
-    --ui-hover-bg: color-mix(in oklch, var(--surface-subtle) 92%, var(--intent, var(--neutral)));
-  }
-
-  :is(.btn, a.badge, button.badge):is(.ghost) {
-    --ui-hover-bg: color-mix(in oklch, var(--intent, var(--text)) 8%, transparent);
-  }
-}
+/* Interactive hover recipes live in the components that consume them:
+     components/button.css and components/badge.css. */

package/src/js/command.js

@@ -25,9 +25,7 @@ function commandNames(commands, caller) {
 // Native command keywords are ASCII case-insensitive. Custom commands keep
 // their exact spelling, as required by the command invoker contract.
 function commandKey(command) {
-  return command.startsWith("--")
-    ? command
-    : command.replace(/[A-Z]/g, (character) => character.toLowerCase());
+  return command.startsWith("--") ? command : command.toLowerCase();
 }
 
 /**