tyrell-components 1.0.0-TC36 → 1.0.0-TC38

package/css/{tyrell-brand.css → tyrell-theme.css}

@@ -1,11 +1,16 @@
 /* =====================================================================
- * tyrell-brand.css — OKLCH-based brand layer for Tyrell Components
+ * tyrell-theme.css — the OKLCH theme engine for Tyrell Components
  * =====================================================================
  *
- * Opt-in. Load AFTER `tyrell.css`. Override a few variables to rebrand.
+ * Opt-in. Load AFTER `tyrell.css`. Override a few variables to rebrand —
+ * or seed a color directly, declare a named theme, scope one to a
+ * subtree. `tyrell.css` alone is correct and accessible without this
+ * file; this is what turns it into a theming ENGINE rather than a fixed
+ * palette: auto-contrast text, seed ingestion, named/scoped themes,
+ * animated theme transitions. See CSS_GUIDE.md → Color Customization.
  *
  *   <link rel="stylesheet" href=".../tyrell.css">
- *   <link rel="stylesheet" href=".../tyrell-brand.css">
+ *   <link rel="stylesheet" href=".../tyrell-theme.css">
  *
  *   :root {
  *     --ty-brand-hue: 200;        // teal. Try 260 indigo, 30 orange, 145 emerald.
@@ -24,7 +29,7 @@
  *       H = flavor-hue                                  ← Tier 2
  *     )
  *
- * Pick a flavor (primary / secondary / success / warning / danger /
+ * Pick a flavor (primary / success / warning / danger /
  * neutral). Pick a shade (strong / bold / base / soft / faint). That's
  * the cell; the formula gives you its color.
  *
@@ -103,11 +108,6 @@
    * Bump to ~0.005 (light) / ~0.012 (dark) to warm surfaces toward brand. */
   --ty-surface-chroma: 0;
 
-  /* Secondary rotates from brand by an exposed offset. Default +60°
-   * (sibling accent). Try 30° for a close sibling, 120° for triadic,
-   * 180° for complement. Set --ty-secondary-hue to a literal number
-   * to detach completely. */
-  --ty-secondary-offset: 60;
 
   /* ----------------------------------------------------------------
    * Tier 2 — PER-FLAVOR ANCHORS
@@ -118,8 +118,6 @@
    *   --ty-warning-chroma: 0.2;  (more vivid)
    * --------------------------------------------------------------*/
 
-  --ty-secondary-hue: calc(var(--ty-brand-hue) + var(--ty-secondary-offset));
-  --ty-secondary-chroma: var(--ty-brand-chroma);
 
   --ty-success-hue: 145;
   --ty-success-chroma: calc(var(--ty-brand-chroma) * 1.08);
@@ -182,6 +180,24 @@
   --ty-l-border-soft: 0.88; /* was color-neutral-faint */
   --ty-l-border-faint: 0.92;
 
+  /* Surface ladder + remaining per-mode absolutes, as L dials. These were
+   * whole oklch() declarations swapped per mode; as numeric dials they are
+   * (a) consistent with every other family and (b) interpolable — which is
+   * what lets theme/mode switches ANIMATE (see THEME TRANSITIONS at the
+   * end of this file). */
+  --ty-l-surface-canvas: 0.985;
+  --ty-l-surface-content: 1;
+  --ty-l-surface-elevated: 1;
+  --ty-l-surface-floating: 1;
+  --ty-l-surface-input: 1;
+
+  --ty-l-solid-neutral: 0.4; /* the neutral "ink" fill — dark in BOTH modes */
+  --ty-l-bg-neutral-strong: 0.25; /* opposes the mode: dark bg on light page */
+  --ty-l-bg-neutral-faint: 0.99; /* follows the mode */
+  --ty-c-bg-neutral-faint-mult: 0.4;
+
+  --ty-focus-ring-alpha: 5%; /* focus ring mix strength (dark needs more) */
+
   /* ----------------------------------------------------------------
    * Tier 4 — SATURATION CURVE
    * Per-shade chroma multipliers. Each shade's chroma =
@@ -217,7 +233,6 @@
    * --------------------------------------------------------------*/
 
   --ty-primary-l-factor: 1;
-  --ty-secondary-l-factor: 1;
   --ty-success-l-factor: 1;
   --ty-warning-l-factor: 1.15;
   --ty-danger-l-factor: 1;
@@ -254,7 +269,9 @@
 /* Dark mode overrides for the L-curve and saturation curve. Tier 1 + 2
  * seeds and Tier 5 L-factors carry through unchanged from :root. */
 html.dark,
-html[data-theme="dark"] {
+html[data-theme="dark"],
+[data-ty-theme].dark,
+[data-ty-theme][data-theme="dark"] {
   /* Tier 3 dark — inverted curve. Higher L = lighter text = more
    * emphasis on a dark background. */
   --ty-l-strong: 0.72;
@@ -286,6 +303,23 @@ html[data-theme="dark"] {
   --ty-l-border-soft: 0.3;
   --ty-l-border-faint: 0.3;
 
+  /* Surface ladder + absolutes dark — hand-tuned values, now as dials. */
+  --ty-l-surface-canvas: 0.12;
+  --ty-l-surface-content: 0.16;
+  --ty-l-surface-elevated: 0.19;
+  --ty-l-surface-floating: 0.22;
+  --ty-l-surface-input: 0.18;
+
+  --ty-l-solid-neutral: 0.23;
+  --ty-l-bg-neutral-strong: 0.95;
+  --ty-l-bg-neutral-faint: 0.15;
+  --ty-c-bg-neutral-faint-mult: 2;
+
+  /* Tier 5 dark — neutral inks pulled down a notch against dark surfaces. */
+  --ty-neutral-l-factor: 0.8;
+
+  --ty-focus-ring-alpha: 20%;
+
   /* Tier 4 dark — dim shades hold more chroma so they don't grey out;
    * strong shades trim chroma so bright tones don't over-pop. */
   --ty-c-strong-mult: 0.77;
@@ -300,7 +334,7 @@ html[data-theme="dark"] {
 
   /* Tier 6 dark — interaction offsets flip sign (press LIGHTENS on dark),
    * and the per-theme adjust dims + desaturates the fills against the
-   * dark canvas. (Computed solid tokens live in SECTION 2 DARK.) */
+   * dark canvas. (Computed solid tokens are declared once at html:root.) */
   --ty-solid-hover-l: 0.04; /* :hover */
   --ty-solid-active-l: 0.08; /* :active */
   --ty-solid-strong-l: 0.06; /* tone+ */
@@ -338,264 +372,269 @@ html[data-theme="dark"] {
  * it there unless its VALUE is mode-specific.
  * ===================================================================== */
 
-html:root {
+html:root,
+[data-ty-theme] {
   /* ----------------------------------------------------------------
    * Flavor color ramps (fg + bg + border)
+   *
+   * SEED INGESTION — every flavor resolves ONE seed color, and every
+   * ramp formula reads that seed's c + h channels via relative color
+   * syntax; L always comes from the mode-flipped curve. Two ways in:
+   *
+   *   numbers (default) — the Tier 1/2 hue+chroma dials construct the
+   *   seed:      --ty-brand-hue: 200; --ty-brand-chroma: 0.13;
+   *
+   *   a color   — set the seed directly and the dials are bypassed:
+   *              --ty-primary-seed: #76467c;
+   *              --ty-danger-seed: crimson;
+   *
+   * The seed's LIGHTNESS is discarded by design: a color's identity
+   * here is hue + chroma; where each shade sits per mode is the
+   * L-curve's job. That is what makes dark mode, tones and contrast
+   * correct for ANY seed — light or dark. (Your exact pixel may
+   * appear nowhere; pin --ty-solid-X etc. if you need it literally.)
    * --------------------------------------------------------------*/
+  --ty-primary-seed-resolved: var(
+    --ty-primary-seed,
+    oklch(0.5 var(--ty-brand-chroma) var(--ty-brand-hue))
+  );
+  --ty-success-seed-resolved: var(
+    --ty-success-seed,
+    oklch(0.5 var(--ty-success-chroma) var(--ty-success-hue))
+  );
+  --ty-warning-seed-resolved: var(
+    --ty-warning-seed,
+    oklch(0.5 var(--ty-warning-chroma) var(--ty-warning-hue))
+  );
+  --ty-danger-seed-resolved: var(
+    --ty-danger-seed,
+    oklch(0.5 var(--ty-danger-chroma) var(--ty-danger-hue))
+  );
+  --ty-neutral-seed-resolved: var(
+    --ty-neutral-seed,
+    oklch(0.5 var(--ty-neutral-chroma) var(--ty-neutral-hue))
+  );
 
   /* Primary */
   --ty-color-primary-strong: oklch(
-    calc(var(--ty-l-strong) * var(--ty-primary-l-factor))
-      calc(var(--ty-brand-chroma) * var(--ty-c-strong-mult)) var(--ty-brand-hue)
+    from var(--ty-primary-seed-resolved)
+      calc(var(--ty-l-strong) * var(--ty-primary-l-factor))
+      calc(c * var(--ty-c-strong-mult)) h
   );
   --ty-color-primary-bold: oklch(
-    calc(var(--ty-l-bold) * var(--ty-primary-l-factor))
-      calc(var(--ty-brand-chroma) * var(--ty-c-bold-mult)) var(--ty-brand-hue)
+    from var(--ty-primary-seed-resolved)
+      calc(var(--ty-l-bold) * var(--ty-primary-l-factor))
+      calc(c * var(--ty-c-bold-mult)) h
   );
   --ty-color-primary: oklch(
-    calc(var(--ty-l-base) * var(--ty-primary-l-factor))
-      calc(var(--ty-brand-chroma) * var(--ty-c-base-mult)) var(--ty-brand-hue)
+    from var(--ty-primary-seed-resolved)
+      calc(var(--ty-l-base) * var(--ty-primary-l-factor))
+      calc(c * var(--ty-c-base-mult)) h
   );
   --ty-color-primary-soft: oklch(
-    calc(var(--ty-l-soft) * var(--ty-primary-l-factor))
-      calc(var(--ty-brand-chroma) * var(--ty-c-soft-mult)) var(--ty-brand-hue)
+    from var(--ty-primary-seed-resolved)
+      calc(var(--ty-l-soft) * var(--ty-primary-l-factor))
+      calc(c * var(--ty-c-soft-mult)) h
   );
   --ty-color-primary-faint: oklch(
-    calc(var(--ty-l-faint) * var(--ty-primary-l-factor))
-      calc(var(--ty-brand-chroma) * var(--ty-c-faint-mult)) var(--ty-brand-hue)
+    from var(--ty-primary-seed-resolved)
+      calc(var(--ty-l-faint) * var(--ty-primary-l-factor))
+      calc(c * var(--ty-c-faint-mult)) h
   );
   --ty-bg-primary: oklch(
-    calc(var(--ty-l-bg-base) * var(--ty-primary-l-factor))
-      calc(var(--ty-brand-chroma) * var(--ty-c-bg-base-mult))
-      var(--ty-brand-hue)
+    from var(--ty-primary-seed-resolved)
+      calc(var(--ty-l-bg-base) * var(--ty-primary-l-factor))
+      calc(c * var(--ty-c-bg-base-mult)) h
   );
   --ty-bg-primary-bold: oklch(
-    calc(var(--ty-l-bg-bold) * var(--ty-primary-l-factor))
-      calc(var(--ty-brand-chroma) * var(--ty-c-bg-bold-mult))
-      var(--ty-brand-hue)
+    from var(--ty-primary-seed-resolved)
+      calc(var(--ty-l-bg-bold) * var(--ty-primary-l-factor))
+      calc(c * var(--ty-c-bg-bold-mult)) h
   );
   --ty-bg-primary-soft: oklch(
-    calc(var(--ty-l-bg-soft) * var(--ty-primary-l-factor))
-      calc(var(--ty-brand-chroma) * var(--ty-c-bg-soft-mult))
-      var(--ty-brand-hue)
+    from var(--ty-primary-seed-resolved)
+      calc(var(--ty-l-bg-soft) * var(--ty-primary-l-factor))
+      calc(c * var(--ty-c-bg-soft-mult)) h
   );
   --ty-border-primary: var(--ty-color-primary-soft);
 
-  /* Secondary */
-  --ty-color-secondary-strong: oklch(
-    calc(var(--ty-l-strong) * var(--ty-secondary-l-factor))
-      calc(var(--ty-secondary-chroma) * var(--ty-c-strong-mult))
-      var(--ty-secondary-hue)
-  );
-  --ty-color-secondary-bold: oklch(
-    calc(var(--ty-l-bold) * var(--ty-secondary-l-factor))
-      calc(var(--ty-secondary-chroma) * var(--ty-c-bold-mult))
-      var(--ty-secondary-hue)
-  );
-  --ty-color-secondary: oklch(
-    calc(var(--ty-l-base) * var(--ty-secondary-l-factor))
-      calc(var(--ty-secondary-chroma) * var(--ty-c-base-mult))
-      var(--ty-secondary-hue)
-  );
-  --ty-color-secondary-soft: oklch(
-    calc(var(--ty-l-soft) * var(--ty-secondary-l-factor))
-      calc(var(--ty-secondary-chroma) * var(--ty-c-soft-mult))
-      var(--ty-secondary-hue)
-  );
-  --ty-color-secondary-faint: oklch(
-    calc(var(--ty-l-faint) * var(--ty-secondary-l-factor))
-      calc(var(--ty-secondary-chroma) * var(--ty-c-faint-mult))
-      var(--ty-secondary-hue)
-  );
-  --ty-bg-secondary: oklch(
-    calc(var(--ty-l-bg-base) * var(--ty-secondary-l-factor))
-      calc(var(--ty-secondary-chroma) * var(--ty-c-bg-base-mult))
-      var(--ty-secondary-hue)
-  );
-  --ty-bg-secondary-bold: oklch(
-    calc(var(--ty-l-bg-bold) * var(--ty-secondary-l-factor))
-      calc(var(--ty-secondary-chroma) * var(--ty-c-bg-bold-mult))
-      var(--ty-secondary-hue)
-  );
-  --ty-bg-secondary-soft: oklch(
-    calc(var(--ty-l-bg-soft) * var(--ty-secondary-l-factor))
-      calc(var(--ty-secondary-chroma) * var(--ty-c-bg-soft-mult))
-      var(--ty-secondary-hue)
-  );
-  --ty-border-secondary: var(--ty-color-secondary-soft);
-
   /* Success */
   --ty-color-success-strong: oklch(
-    calc(var(--ty-l-strong) * var(--ty-success-l-factor))
-      calc(var(--ty-success-chroma) * var(--ty-c-strong-mult))
-      var(--ty-success-hue)
+    from var(--ty-success-seed-resolved)
+      calc(var(--ty-l-strong) * var(--ty-success-l-factor))
+      calc(c * var(--ty-c-strong-mult)) h
   );
   --ty-color-success-bold: oklch(
-    calc(var(--ty-l-bold) * var(--ty-success-l-factor))
-      calc(var(--ty-success-chroma) * var(--ty-c-bold-mult))
-      var(--ty-success-hue)
+    from var(--ty-success-seed-resolved)
+      calc(var(--ty-l-bold) * var(--ty-success-l-factor))
+      calc(c * var(--ty-c-bold-mult)) h
   );
   --ty-color-success: oklch(
-    calc(var(--ty-l-base) * var(--ty-success-l-factor))
-      calc(var(--ty-success-chroma) * var(--ty-c-base-mult))
-      var(--ty-success-hue)
+    from var(--ty-success-seed-resolved)
+      calc(var(--ty-l-base) * var(--ty-success-l-factor))
+      calc(c * var(--ty-c-base-mult)) h
   );
   --ty-color-success-soft: oklch(
-    calc(var(--ty-l-soft) * var(--ty-success-l-factor))
-      calc(var(--ty-success-chroma) * var(--ty-c-soft-mult))
-      var(--ty-success-hue)
+    from var(--ty-success-seed-resolved)
+      calc(var(--ty-l-soft) * var(--ty-success-l-factor))
+      calc(c * var(--ty-c-soft-mult)) h
   );
   --ty-color-success-faint: oklch(
-    calc(var(--ty-l-faint) * var(--ty-success-l-factor))
-      calc(var(--ty-success-chroma) * var(--ty-c-faint-mult))
-      var(--ty-success-hue)
+    from var(--ty-success-seed-resolved)
+      calc(var(--ty-l-faint) * var(--ty-success-l-factor))
+      calc(c * var(--ty-c-faint-mult)) h
   );
   --ty-bg-success: oklch(
-    calc(var(--ty-l-bg-base) * var(--ty-success-l-factor))
-      calc(var(--ty-success-chroma) * var(--ty-c-bg-base-mult))
-      var(--ty-success-hue)
+    from var(--ty-success-seed-resolved)
+      calc(var(--ty-l-bg-base) * var(--ty-success-l-factor))
+      calc(c * var(--ty-c-bg-base-mult)) h
   );
   --ty-bg-success-bold: oklch(
-    calc(var(--ty-l-bg-bold) * var(--ty-success-l-factor))
-      calc(var(--ty-success-chroma) * var(--ty-c-bg-bold-mult))
-      var(--ty-success-hue)
+    from var(--ty-success-seed-resolved)
+      calc(var(--ty-l-bg-bold) * var(--ty-success-l-factor))
+      calc(c * var(--ty-c-bg-bold-mult)) h
   );
   --ty-bg-success-soft: oklch(
-    calc(var(--ty-l-bg-soft) * var(--ty-success-l-factor))
-      calc(var(--ty-success-chroma) * var(--ty-c-bg-soft-mult))
-      var(--ty-success-hue)
+    from var(--ty-success-seed-resolved)
+      calc(var(--ty-l-bg-soft) * var(--ty-success-l-factor))
+      calc(c * var(--ty-c-bg-soft-mult)) h
   );
   --ty-border-success: var(--ty-color-success-soft);
 
   /* Danger */
   --ty-color-danger-strong: oklch(
-    calc(var(--ty-l-strong) * var(--ty-danger-l-factor))
-      calc(var(--ty-danger-chroma) * var(--ty-c-strong-mult))
-      var(--ty-danger-hue)
+    from var(--ty-danger-seed-resolved)
+      calc(var(--ty-l-strong) * var(--ty-danger-l-factor))
+      calc(c * var(--ty-c-strong-mult)) h
   );
   --ty-color-danger-bold: oklch(
-    calc(var(--ty-l-bold) * var(--ty-danger-l-factor))
-      calc(var(--ty-danger-chroma) * var(--ty-c-bold-mult)) var(--ty-danger-hue)
+    from var(--ty-danger-seed-resolved)
+      calc(var(--ty-l-bold) * var(--ty-danger-l-factor))
+      calc(c * var(--ty-c-bold-mult)) h
   );
   --ty-color-danger: oklch(
-    calc(var(--ty-l-base) * var(--ty-danger-l-factor))
-      calc(var(--ty-danger-chroma) * var(--ty-c-base-mult)) var(--ty-danger-hue)
+    from var(--ty-danger-seed-resolved)
+      calc(var(--ty-l-base) * var(--ty-danger-l-factor))
+      calc(c * var(--ty-c-base-mult)) h
   );
   --ty-color-danger-soft: oklch(
-    calc(var(--ty-l-soft) * var(--ty-danger-l-factor))
-      calc(var(--ty-danger-chroma) * var(--ty-c-soft-mult)) var(--ty-danger-hue)
+    from var(--ty-danger-seed-resolved)
+      calc(var(--ty-l-soft) * var(--ty-danger-l-factor))
+      calc(c * var(--ty-c-soft-mult)) h
   );
   --ty-color-danger-faint: oklch(
-    calc(var(--ty-l-faint) * var(--ty-danger-l-factor))
-      calc(var(--ty-danger-chroma) * var(--ty-c-faint-mult))
-      var(--ty-danger-hue)
+    from var(--ty-danger-seed-resolved)
+      calc(var(--ty-l-faint) * var(--ty-danger-l-factor))
+      calc(c * var(--ty-c-faint-mult)) h
   );
   --ty-bg-danger: oklch(
-    calc(var(--ty-l-bg-base) * var(--ty-danger-l-factor))
-      calc(var(--ty-danger-chroma) * var(--ty-c-bg-base-mult))
-      var(--ty-danger-hue)
+    from var(--ty-danger-seed-resolved)
+      calc(var(--ty-l-bg-base) * var(--ty-danger-l-factor))
+      calc(c * var(--ty-c-bg-base-mult)) h
   );
   --ty-bg-danger-bold: oklch(
-    calc(var(--ty-l-bg-bold) * var(--ty-danger-l-factor))
-      calc(var(--ty-danger-chroma) * var(--ty-c-bg-bold-mult))
-      var(--ty-danger-hue)
+    from var(--ty-danger-seed-resolved)
+      calc(var(--ty-l-bg-bold) * var(--ty-danger-l-factor))
+      calc(c * var(--ty-c-bg-bold-mult)) h
   );
   --ty-bg-danger-soft: oklch(
-    calc(var(--ty-l-bg-soft) * var(--ty-danger-l-factor))
-      calc(var(--ty-danger-chroma) * var(--ty-c-bg-soft-mult))
-      var(--ty-danger-hue)
+    from var(--ty-danger-seed-resolved)
+      calc(var(--ty-l-bg-soft) * var(--ty-danger-l-factor))
+      calc(c * var(--ty-c-bg-soft-mult)) h
   );
   --ty-border-danger: var(--ty-color-danger-soft);
 
   /* Warning */
   --ty-color-warning-strong: oklch(
-    calc(var(--ty-l-strong) * var(--ty-warning-l-factor))
-      calc(var(--ty-warning-chroma) * var(--ty-c-strong-mult))
-      var(--ty-warning-hue)
+    from var(--ty-warning-seed-resolved)
+      calc(var(--ty-l-strong) * var(--ty-warning-l-factor))
+      calc(c * var(--ty-c-strong-mult)) h
   );
   --ty-color-warning-bold: oklch(
-    calc(var(--ty-l-bold) * var(--ty-warning-l-factor))
-      calc(var(--ty-warning-chroma) * var(--ty-c-bold-mult))
-      var(--ty-warning-hue)
+    from var(--ty-warning-seed-resolved)
+      calc(var(--ty-l-bold) * var(--ty-warning-l-factor))
+      calc(c * var(--ty-c-bold-mult)) h
   );
   --ty-color-warning: oklch(
-    calc(var(--ty-l-base) * var(--ty-warning-l-factor))
-      calc(var(--ty-warning-chroma) * var(--ty-c-base-mult))
-      var(--ty-warning-hue)
+    from var(--ty-warning-seed-resolved)
+      calc(var(--ty-l-base) * var(--ty-warning-l-factor))
+      calc(c * var(--ty-c-base-mult)) h
   );
   --ty-color-warning-soft: oklch(
-    calc(var(--ty-l-soft) * var(--ty-warning-l-factor))
-      calc(var(--ty-warning-chroma) * var(--ty-c-soft-mult))
-      var(--ty-warning-hue)
+    from var(--ty-warning-seed-resolved)
+      calc(var(--ty-l-soft) * var(--ty-warning-l-factor))
+      calc(c * var(--ty-c-soft-mult)) h
   );
   --ty-color-warning-faint: oklch(
-    calc(var(--ty-l-faint) * var(--ty-warning-l-factor))
-      calc(var(--ty-warning-chroma) * var(--ty-c-faint-mult))
-      var(--ty-warning-hue)
+    from var(--ty-warning-seed-resolved)
+      calc(var(--ty-l-faint) * var(--ty-warning-l-factor))
+      calc(c * var(--ty-c-faint-mult)) h
   );
   --ty-bg-warning: oklch(
-    calc(var(--ty-l-bg-base) * var(--ty-warning-l-factor))
-      calc(var(--ty-warning-chroma) * var(--ty-c-bg-base-mult))
-      var(--ty-warning-hue)
+    from var(--ty-warning-seed-resolved)
+      calc(var(--ty-l-bg-base) * var(--ty-warning-l-factor))
+      calc(c * var(--ty-c-bg-base-mult)) h
   );
   --ty-bg-warning-bold: oklch(
-    calc(var(--ty-l-bg-bold) * var(--ty-warning-l-factor))
-      calc(var(--ty-warning-chroma) * var(--ty-c-bg-bold-mult))
-      var(--ty-warning-hue)
+    from var(--ty-warning-seed-resolved)
+      calc(var(--ty-l-bg-bold) * var(--ty-warning-l-factor))
+      calc(c * var(--ty-c-bg-bold-mult)) h
   );
   --ty-bg-warning-soft: oklch(
-    calc(var(--ty-l-bg-soft) * var(--ty-warning-l-factor))
-      calc(var(--ty-warning-chroma) * var(--ty-c-bg-soft-mult))
-      var(--ty-warning-hue)
+    from var(--ty-warning-seed-resolved)
+      calc(var(--ty-l-bg-soft) * var(--ty-warning-l-factor))
+      calc(c * var(--ty-c-bg-soft-mult)) h
   );
   --ty-border-warning: var(--ty-color-warning-soft);
 
   /* Neutral — same L curve, near-zero chroma so the grey scale stays grey. */
   --ty-color-neutral-strong: oklch(
-    calc(var(--ty-l-strong) * var(--ty-neutral-l-factor))
-      calc(var(--ty-neutral-chroma) * var(--ty-c-strong-mult))
-      var(--ty-neutral-hue)
+    from var(--ty-neutral-seed-resolved)
+      calc(var(--ty-l-strong) * var(--ty-neutral-l-factor))
+      calc(c * var(--ty-c-strong-mult)) h
   );
   --ty-color-neutral-bold: oklch(
-    calc(var(--ty-l-bold) * var(--ty-neutral-l-factor))
-      calc(var(--ty-neutral-chroma) * var(--ty-c-bold-mult))
-      var(--ty-neutral-hue)
+    from var(--ty-neutral-seed-resolved)
+      calc(var(--ty-l-bold) * var(--ty-neutral-l-factor))
+      calc(c * var(--ty-c-bold-mult)) h
   );
   --ty-color-neutral: oklch(
-    calc(var(--ty-l-base) * var(--ty-neutral-l-factor))
-      calc(var(--ty-neutral-chroma) * var(--ty-c-base-mult))
-      var(--ty-neutral-hue)
+    from var(--ty-neutral-seed-resolved)
+      calc(var(--ty-l-base) * var(--ty-neutral-l-factor))
+      calc(c * var(--ty-c-base-mult)) h
   );
   --ty-color-neutral-soft: oklch(
-    calc(var(--ty-l-soft) * var(--ty-neutral-l-factor))
-      calc(var(--ty-neutral-chroma) * var(--ty-c-soft-mult))
-      var(--ty-neutral-hue)
+    from var(--ty-neutral-seed-resolved)
+      calc(var(--ty-l-soft) * var(--ty-neutral-l-factor))
+      calc(c * var(--ty-c-soft-mult)) h
   );
   --ty-color-neutral-faint: oklch(
-    calc(var(--ty-l-faint) * var(--ty-neutral-l-factor))
-      calc(var(--ty-neutral-chroma) * var(--ty-c-faint-mult))
-      var(--ty-neutral-hue)
+    from var(--ty-neutral-seed-resolved)
+      calc(var(--ty-l-faint) * var(--ty-neutral-l-factor))
+      calc(c * var(--ty-c-faint-mult)) h
   );
   --ty-bg-neutral: oklch(
-    calc(var(--ty-l-bg-base) * var(--ty-neutral-l-factor))
-      calc(var(--ty-neutral-chroma) * var(--ty-c-bg-base-mult))
-      var(--ty-neutral-hue)
+    from var(--ty-neutral-seed-resolved)
+      calc(var(--ty-l-bg-base) * var(--ty-neutral-l-factor))
+      calc(c * var(--ty-c-bg-base-mult)) h
   );
   --ty-bg-neutral-bold: oklch(
-    calc(var(--ty-l-bg-bold) * var(--ty-neutral-l-factor))
-      calc(var(--ty-neutral-chroma) * var(--ty-c-bg-bold-mult))
-      var(--ty-neutral-hue)
+    from var(--ty-neutral-seed-resolved)
+      calc(var(--ty-l-bg-bold) * var(--ty-neutral-l-factor))
+      calc(c * var(--ty-c-bg-bold-mult)) h
   );
   --ty-bg-neutral-soft: oklch(
-    calc(var(--ty-l-bg-soft) * var(--ty-neutral-l-factor))
-      calc(var(--ty-neutral-chroma) * var(--ty-c-bg-soft-mult))
-      var(--ty-neutral-hue)
+    from var(--ty-neutral-seed-resolved)
+      calc(var(--ty-l-bg-soft) * var(--ty-neutral-l-factor))
+      calc(c * var(--ty-c-bg-soft-mult)) h
   );
   --ty-bg-neutral-strong: oklch(
-    0.25 calc(var(--ty-neutral-chroma) * 2) var(--ty-neutral-hue)
+    from var(--ty-neutral-seed-resolved) var(--ty-l-bg-neutral-strong)
+      calc(c * 2) h
   );
   --ty-bg-neutral-faint: oklch(
-    0.99 calc(var(--ty-neutral-chroma) * 0.4) var(--ty-neutral-hue)
+    from var(--ty-neutral-seed-resolved) var(--ty-l-bg-neutral-faint)
+      calc(c * var(--ty-c-bg-neutral-faint-mult)) h
   );
 
   /* ----------------------------------------------------------------
@@ -606,19 +645,19 @@ html:root {
    * border SHOULD track its flavor's ink.
    * --------------------------------------------------------------*/
   --ty-border-strong: oklch(
-    var(--ty-l-border-strong) var(--ty-neutral-chroma) var(--ty-neutral-hue)
+    from var(--ty-neutral-seed-resolved) var(--ty-l-border-strong) c h
   );
   --ty-border: oklch(
-    var(--ty-l-border) var(--ty-neutral-chroma) var(--ty-neutral-hue)
+    from var(--ty-neutral-seed-resolved) var(--ty-l-border) c h
   );
   --ty-border-bold: oklch(
-    var(--ty-l-border-bold) var(--ty-neutral-chroma) var(--ty-neutral-hue)
+    from var(--ty-neutral-seed-resolved) var(--ty-l-border-bold) c h
   );
   --ty-border-soft: oklch(
-    var(--ty-l-border-soft) var(--ty-neutral-chroma) var(--ty-neutral-hue)
+    from var(--ty-neutral-seed-resolved) var(--ty-l-border-soft) c h
   );
   --ty-border-faint: oklch(
-    var(--ty-l-border-faint) var(--ty-neutral-chroma) var(--ty-neutral-hue)
+    from var(--ty-neutral-seed-resolved) var(--ty-l-border-faint) c h
   );
 
   /* ----------------------------------------------------------------
@@ -628,41 +667,54 @@ html:root {
    * other token here does; a rebrand now reaches body text too.
    * --------------------------------------------------------------*/
   --ty-text-strong: oklch(
-    var(--ty-l-text-strong) var(--ty-neutral-chroma) var(--ty-neutral-hue)
+    from var(--ty-neutral-seed-resolved) var(--ty-l-text-strong) c h
   );
   --ty-text-bold: oklch(
-    var(--ty-l-text-bold) var(--ty-neutral-chroma) var(--ty-neutral-hue)
+    from var(--ty-neutral-seed-resolved) var(--ty-l-text-bold) c h
   );
   --ty-text: oklch(
-    var(--ty-l-text-base) var(--ty-neutral-chroma) var(--ty-neutral-hue)
+    from var(--ty-neutral-seed-resolved) var(--ty-l-text-base) c h
   );
   --ty-text-soft: oklch(
-    var(--ty-l-text-soft) var(--ty-neutral-chroma) var(--ty-neutral-hue)
+    from var(--ty-neutral-seed-resolved) var(--ty-l-text-soft) c h
   );
   --ty-text-faint: oklch(
-    var(--ty-l-text-faint) var(--ty-neutral-chroma) var(--ty-neutral-hue)
+    from var(--ty-neutral-seed-resolved) var(--ty-l-text-faint) c h
   );
 
   --ty-content-border: oklch(
-    var(--ty-l-border-content) var(--ty-neutral-chroma) var(--ty-neutral-hue)
+    from var(--ty-neutral-seed-resolved) var(--ty-l-border-content) c h
   );
   --ty-elevated-border: oklch(
-    var(--ty-l-border-elevated) var(--ty-neutral-chroma) var(--ty-neutral-hue)
+    from var(--ty-neutral-seed-resolved) var(--ty-l-border-elevated) c h
   );
   --ty-floating-border: oklch(
-    var(--ty-l-border-floating) var(--ty-neutral-chroma) var(--ty-neutral-hue)
+    from var(--ty-neutral-seed-resolved) var(--ty-l-border-floating) c h
   );
 
   /* ----------------------------------------------------------------
    * Surfaces — monochrome by default; --ty-surface-chroma warms them.
    * --------------------------------------------------------------*/
   --ty-surface-canvas: oklch(
-    0.985 var(--ty-surface-chroma) var(--ty-brand-hue)
+    from var(--ty-primary-seed-resolved) var(--ty-l-surface-canvas)
+      var(--ty-surface-chroma) h
+  );
+  --ty-surface-content: oklch(
+    from var(--ty-primary-seed-resolved) var(--ty-l-surface-content)
+      var(--ty-surface-chroma) h
+  );
+  --ty-surface-elevated: oklch(
+    from var(--ty-primary-seed-resolved) var(--ty-l-surface-elevated)
+      var(--ty-surface-chroma) h
+  );
+  --ty-surface-floating: oklch(
+    from var(--ty-primary-seed-resolved) var(--ty-l-surface-floating)
+      var(--ty-surface-chroma) h
+  );
+  --ty-surface-input: oklch(
+    from var(--ty-primary-seed-resolved) var(--ty-l-surface-input)
+      var(--ty-surface-chroma) h
   );
-  --ty-surface-content: oklch(1 0 0);
-  --ty-surface-elevated: oklch(1 0 0);
-  --ty-surface-floating: oklch(1 0 0);
-  --ty-surface-input: oklch(1 0 0);
 
   /* ----------------------------------------------------------------
    * Inputs — tied to neutral ramp so form controls retint with brand.
@@ -678,7 +730,7 @@ html:root {
   --ty-input-disabled-color: var(--ty-color-neutral-bold);
   --ty-input-shadow-focus: color-mix(
     in oklab,
-    var(--ty-color-primary) 5%,
+    var(--ty-color-primary) var(--ty-focus-ring-alpha),
     transparent
   );
 }
@@ -700,16 +752,13 @@ html:root {
  * the oklch(from var(--ty-color-*)) formulas resolve per-mode automatically,
  * so no dark duplicate is needed.
  * --------------------------------------------------------------*/
-html:root {
+html:root,
+[data-ty-theme] {
   /* base fill per flavor (= flavor color, theme-adjusted by Axis B) */
   --ty-solid-primary: oklch(
     from var(--ty-color-primary) calc(l + var(--ty-solid-l))
       calc(c * var(--ty-solid-c)) calc(h + var(--ty-solid-h))
   );
-  --ty-solid-secondary: oklch(
-    from var(--ty-color-secondary) calc(l + var(--ty-solid-l))
-      calc(c * var(--ty-solid-c)) calc(h + var(--ty-solid-h))
-  );
   --ty-solid-success: oklch(
     from var(--ty-color-success) calc(l + var(--ty-solid-l))
       calc(c * var(--ty-solid-c)) calc(h + var(--ty-solid-h))
@@ -724,8 +773,8 @@ html:root {
   );
   /* neutral is a deliberate dark grey fill, not the neutral text color */
   --ty-solid-neutral: oklch(
-    0.4 calc(var(--ty-neutral-chroma) * var(--ty-c-strong-mult))
-      var(--ty-neutral-hue)
+    from var(--ty-neutral-seed-resolved) var(--ty-l-solid-neutral)
+      calc(c * var(--ty-c-strong-mult)) h
   );
 
   /* ----------------------------------------------------------------
@@ -765,18 +814,6 @@ html:root {
       clamp(0, (var(--ty-solid-fg-threshold) - l) * 1000, 1) 0 0
   );
 
-  --ty-solid-secondary-fg: oklch(
-    from var(--ty-solid-secondary)
-      clamp(0, (var(--ty-solid-fg-threshold) - l) * 1000, 1) 0 0
-  );
-  --ty-solid-secondary-soft-fg: oklch(
-    from var(--ty-solid-secondary-soft)
-      clamp(0, (var(--ty-solid-fg-threshold) - l) * 1000, 1) 0 0
-  );
-  --ty-solid-secondary-strong-fg: oklch(
-    from var(--ty-solid-secondary-strong)
-      clamp(0, (var(--ty-solid-fg-threshold) - l) * 1000, 1) 0 0
-  );
 
   --ty-solid-success-fg: oklch(
     from var(--ty-solid-success)
@@ -844,18 +881,6 @@ html:root {
     from var(--ty-solid-primary) calc(l + var(--ty-solid-soft-l)) c h
   );
 
-  --ty-solid-secondary-hover: oklch(
-    from var(--ty-solid-secondary) calc(l + var(--ty-solid-hover-l)) c h
-  );
-  --ty-solid-secondary-active: oklch(
-    from var(--ty-solid-secondary) calc(l + var(--ty-solid-active-l)) c h
-  );
-  --ty-solid-secondary-strong: oklch(
-    from var(--ty-solid-secondary) calc(l + var(--ty-solid-strong-l)) c h
-  );
-  --ty-solid-secondary-soft: oklch(
-    from var(--ty-solid-secondary) calc(l + var(--ty-solid-soft-l)) c h
-  );
 
   --ty-solid-success-hover: oklch(
     from var(--ty-solid-success) calc(l + var(--ty-solid-hover-l)) c h
@@ -910,53 +935,439 @@ html:root {
   );
 }
 
+
 /* =====================================================================
- * SECTION 2 DARK — PER-MODE DATA ONLY
+ * SECTION 3 — THEME TRANSITIONS
  * =====================================================================
- * No formulas here. Every computed token is declared once at html:root
- * above and resolves per-mode through its dial inputs (SECTION 1 flips
- * those at html.dark). This block holds only values that ARE the dark
- * design data — hand-tuned absolutes with no light-mode derivation.
+ *
+ * Every dial above is a plain number (or percentage) — and every color
+ * in the system is a pure function of those dials. Registering the
+ * dials as typed custom properties makes them INTERPOLABLE, so a theme
+ * or mode switch (html.dark, html.love, a [data-ty-theme] pack) does
+ * not snap: the dials animate, and every derived color — buttons,
+ * borders, surfaces, text, focus rings — crossfades through OKLCH
+ * space frame by frame. No JS, no repaint tricks; it falls out of the
+ * dials-not-colors architecture.
+ *
+ * Opt out (or retune) per app:
+ *   :root { --ty-theme-transition: 0s; }      no animation
+ *   :root { --ty-theme-transition: 1.2s; }    slower crossfade
+ * Reduced-motion users never get the animation.
+ *
+ * Browsers without @property simply skip registration — themes still
+ * work, switches just snap (the pre-TC37 behavior).
  * ===================================================================== */
 
-html.dark,
-html[data-theme="dark"] {
-  /* Surface ladder — hand-tuned; nothing to derive from light (which
-   * is 0.985 canvas + pure white everywhere else). */
-  --ty-surface-canvas: oklch(0.12 var(--ty-surface-chroma) var(--ty-brand-hue));
-  --ty-surface-content: oklch(
-    0.16 var(--ty-surface-chroma) var(--ty-brand-hue)
-  );
-  --ty-surface-elevated: oklch(
-    0.19 var(--ty-surface-chroma) var(--ty-brand-hue)
-  );
-  --ty-surface-floating: oklch(
-    0.22 var(--ty-surface-chroma) var(--ty-brand-hue)
-  );
-  --ty-surface-input: oklch(0.18 var(--ty-surface-chroma) var(--ty-brand-hue));
-
-  /* Focus ring needs more alpha against dark surfaces (light: 5%). */
-  --ty-input-shadow-focus: color-mix(
-    in oklab,
-    var(--ty-color-primary) 20%,
-    transparent
-  );
-
-  /* Hand-pinned bg extremes — these OPPOSE the mode (strong bg is dark
-   * in light mode, light in dark mode) so they can't ride the bg ramp. */
-  --ty-bg-neutral-strong: oklch(
-    0.95 calc(var(--ty-neutral-chroma) * 2) var(--ty-neutral-hue)
-  );
-  --ty-bg-neutral-faint: oklch(
-    0.15 calc(var(--ty-neutral-chroma) * 2) var(--ty-neutral-hue)
-  );
+@property --ty-brand-hue {
+  syntax: "<number>";
+  inherits: true;
+  initial-value: 45;
+}
+@property --ty-brand-chroma {
+  syntax: "<number>";
+  inherits: true;
+  initial-value: 0.125;
+}
+@property --ty-surface-chroma {
+  syntax: "<number>";
+  inherits: true;
+  initial-value: 0;
+}
+@property --ty-success-hue {
+  syntax: "<number>";
+  inherits: true;
+  initial-value: 145;
+}
+@property --ty-success-chroma {
+  syntax: "<number>";
+  inherits: true;
+  initial-value: 0.135;
+}
+@property --ty-warning-hue {
+  syntax: "<number>";
+  inherits: true;
+  initial-value: 75;
+}
+@property --ty-warning-chroma {
+  syntax: "<number>";
+  inherits: true;
+  initial-value: 0.25;
+}
+@property --ty-danger-hue {
+  syntax: "<number>";
+  inherits: true;
+  initial-value: 25;
+}
+@property --ty-danger-chroma {
+  syntax: "<number>";
+  inherits: true;
+  initial-value: 0.164;
+}
+@property --ty-neutral-hue {
+  syntax: "<number>";
+  inherits: true;
+  initial-value: 0;
+}
+@property --ty-neutral-chroma {
+  syntax: "<number>";
+  inherits: true;
+  initial-value: 0;
+}
+@property --ty-l-strong {
+  syntax: "<number>";
+  inherits: true;
+  initial-value: 0.38;
+}
+@property --ty-l-bold {
+  syntax: "<number>";
+  inherits: true;
+  initial-value: 0.46;
+}
+@property --ty-l-base {
+  syntax: "<number>";
+  inherits: true;
+  initial-value: 0.54;
+}
+@property --ty-l-soft {
+  syntax: "<number>";
+  inherits: true;
+  initial-value: 0.72;
+}
+@property --ty-l-faint {
+  syntax: "<number>";
+  inherits: true;
+  initial-value: 0.88;
+}
+@property --ty-l-bg-base {
+  syntax: "<number>";
+  inherits: true;
+  initial-value: 0.96;
+}
+@property --ty-l-bg-bold {
+  syntax: "<number>";
+  inherits: true;
+  initial-value: 0.92;
+}
+@property --ty-l-bg-soft {
+  syntax: "<number>";
+  inherits: true;
+  initial-value: 0.98;
+}
+@property --ty-l-text-strong {
+  syntax: "<number>";
+  inherits: true;
+  initial-value: 0;
+}
+@property --ty-l-text-bold {
+  syntax: "<number>";
+  inherits: true;
+  initial-value: 0;
+}
+@property --ty-l-text-base {
+  syntax: "<number>";
+  inherits: true;
+  initial-value: 0.21;
+}
+@property --ty-l-text-soft {
+  syntax: "<number>";
+  inherits: true;
+  initial-value: 0.37;
+}
+@property --ty-l-text-faint {
+  syntax: "<number>";
+  inherits: true;
+  initial-value: 0.71;
+}
+@property --ty-l-border-content {
+  syntax: "<number>";
+  inherits: true;
+  initial-value: 0.93;
+}
+@property --ty-l-border-elevated {
+  syntax: "<number>";
+  inherits: true;
+  initial-value: 0.93;
+}
+@property --ty-l-border-floating {
+  syntax: "<number>";
+  inherits: true;
+  initial-value: 0.93;
+}
+@property --ty-l-border-strong {
+  syntax: "<number>";
+  inherits: true;
+  initial-value: 0.46;
+}
+@property --ty-l-border-bold {
+  syntax: "<number>";
+  inherits: true;
+  initial-value: 0.64;
+}
+@property --ty-l-border {
+  syntax: "<number>";
+  inherits: true;
+  initial-value: 0.76;
+}
+@property --ty-l-border-soft {
+  syntax: "<number>";
+  inherits: true;
+  initial-value: 0.88;
+}
+@property --ty-l-border-faint {
+  syntax: "<number>";
+  inherits: true;
+  initial-value: 0.92;
+}
+@property --ty-l-surface-canvas {
+  syntax: "<number>";
+  inherits: true;
+  initial-value: 0.985;
+}
+@property --ty-l-surface-content {
+  syntax: "<number>";
+  inherits: true;
+  initial-value: 1;
+}
+@property --ty-l-surface-elevated {
+  syntax: "<number>";
+  inherits: true;
+  initial-value: 1;
+}
+@property --ty-l-surface-floating {
+  syntax: "<number>";
+  inherits: true;
+  initial-value: 1;
+}
+@property --ty-l-surface-input {
+  syntax: "<number>";
+  inherits: true;
+  initial-value: 1;
+}
+@property --ty-l-solid-neutral {
+  syntax: "<number>";
+  inherits: true;
+  initial-value: 0.4;
+}
+@property --ty-l-bg-neutral-strong {
+  syntax: "<number>";
+  inherits: true;
+  initial-value: 0.25;
+}
+@property --ty-l-bg-neutral-faint {
+  syntax: "<number>";
+  inherits: true;
+  initial-value: 0.99;
+}
+@property --ty-c-bg-neutral-faint-mult {
+  syntax: "<number>";
+  inherits: true;
+  initial-value: 0.4;
+}
+@property --ty-c-strong-mult {
+  syntax: "<number>";
+  inherits: true;
+  initial-value: 0.77;
+}
+@property --ty-c-bold-mult {
+  syntax: "<number>";
+  inherits: true;
+  initial-value: 1;
+}
+@property --ty-c-base-mult {
+  syntax: "<number>";
+  inherits: true;
+  initial-value: 0.92;
+}
+@property --ty-c-soft-mult {
+  syntax: "<number>";
+  inherits: true;
+  initial-value: 0.77;
+}
+@property --ty-c-faint-mult {
+  syntax: "<number>";
+  inherits: true;
+  initial-value: 0.46;
+}
+@property --ty-c-bg-base-mult {
+  syntax: "<number>";
+  inherits: true;
+  initial-value: 0.15;
+}
+@property --ty-c-bg-bold-mult {
+  syntax: "<number>";
+  inherits: true;
+  initial-value: 0.38;
+}
+@property --ty-c-bg-soft-mult {
+  syntax: "<number>";
+  inherits: true;
+  initial-value: 0.08;
+}
+@property --ty-primary-l-factor {
+  syntax: "<number>";
+  inherits: true;
+  initial-value: 1;
+}
+@property --ty-success-l-factor {
+  syntax: "<number>";
+  inherits: true;
+  initial-value: 1;
+}
+@property --ty-warning-l-factor {
+  syntax: "<number>";
+  inherits: true;
+  initial-value: 1.15;
+}
+@property --ty-danger-l-factor {
+  syntax: "<number>";
+  inherits: true;
+  initial-value: 1;
+}
+@property --ty-neutral-l-factor {
+  syntax: "<number>";
+  inherits: true;
+  initial-value: 1;
+}
+@property --ty-solid-hover-l {
+  syntax: "<number>";
+  inherits: true;
+  initial-value: -0.04;
+}
+@property --ty-solid-active-l {
+  syntax: "<number>";
+  inherits: true;
+  initial-value: -0.08;
+}
+@property --ty-solid-strong-l {
+  syntax: "<number>";
+  inherits: true;
+  initial-value: -0.06;
+}
+@property --ty-solid-soft-l {
+  syntax: "<number>";
+  inherits: true;
+  initial-value: 0.1;
+}
+@property --ty-solid-l {
+  syntax: "<number>";
+  inherits: true;
+  initial-value: 0;
+}
+@property --ty-solid-c {
+  syntax: "<number>";
+  inherits: true;
+  initial-value: 1;
+}
+@property --ty-solid-h {
+  syntax: "<number>";
+  inherits: true;
+  initial-value: 0;
+}
+@property --ty-solid-fg-threshold {
+  syntax: "<number>";
+  inherits: true;
+  initial-value: 0.62;
+}
+@property --ty-focus-ring-alpha {
+  syntax: "<percentage>";
+  inherits: true;
+  initial-value: 5%;
+}
 
-  /* Neutral solid fill is an "ink" — dark grey in BOTH modes (0.4 light),
-   * dimmed a notch here. It ignores the emphasis curve and Axis B. */
-  --ty-solid-neutral: oklch(
-    0.23 calc(var(--ty-neutral-chroma) * var(--ty-c-strong-mult))
-      var(--ty-neutral-hue)
-  );
+@property --ty-primary-seed-resolved {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: #808080;
+}
+@property --ty-success-seed-resolved {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: #808080;
+}
+@property --ty-warning-seed-resolved {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: #808080;
+}
+@property --ty-danger-seed-resolved {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: #808080;
+}
+@property --ty-neutral-seed-resolved {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: #808080;
+}
 
-  --ty-neutral-l-factor: 0.8;
+@media (prefers-reduced-motion: no-preference) {
+  html,
+  [data-ty-theme] {
+    transition-property:
+    --ty-brand-hue,
+    --ty-brand-chroma,
+    --ty-surface-chroma,
+    --ty-success-hue,
+    --ty-success-chroma,
+    --ty-warning-hue,
+    --ty-warning-chroma,
+    --ty-danger-hue,
+    --ty-danger-chroma,
+    --ty-neutral-hue,
+    --ty-neutral-chroma,
+    --ty-l-strong,
+    --ty-l-bold,
+    --ty-l-base,
+    --ty-l-soft,
+    --ty-l-faint,
+    --ty-l-bg-base,
+    --ty-l-bg-bold,
+    --ty-l-bg-soft,
+    --ty-l-text-strong,
+    --ty-l-text-bold,
+    --ty-l-text-base,
+    --ty-l-text-soft,
+    --ty-l-text-faint,
+    --ty-l-border-content,
+    --ty-l-border-elevated,
+    --ty-l-border-floating,
+    --ty-l-border-strong,
+    --ty-l-border-bold,
+    --ty-l-border,
+    --ty-l-border-soft,
+    --ty-l-border-faint,
+    --ty-l-surface-canvas,
+    --ty-l-surface-content,
+    --ty-l-surface-elevated,
+    --ty-l-surface-floating,
+    --ty-l-surface-input,
+    --ty-l-solid-neutral,
+    --ty-l-bg-neutral-strong,
+    --ty-l-bg-neutral-faint,
+    --ty-c-bg-neutral-faint-mult,
+    --ty-c-strong-mult,
+    --ty-c-bold-mult,
+    --ty-c-base-mult,
+    --ty-c-soft-mult,
+    --ty-c-faint-mult,
+    --ty-c-bg-base-mult,
+    --ty-c-bg-bold-mult,
+    --ty-c-bg-soft-mult,
+    --ty-primary-l-factor,
+    --ty-success-l-factor,
+    --ty-warning-l-factor,
+    --ty-danger-l-factor,
+    --ty-neutral-l-factor,
+    --ty-solid-hover-l,
+    --ty-solid-active-l,
+    --ty-solid-strong-l,
+    --ty-solid-soft-l,
+    --ty-solid-l,
+    --ty-solid-c,
+    --ty-solid-h,
+    --ty-solid-fg-threshold,
+    --ty-focus-ring-alpha;
+    transition-duration: var(--ty-theme-transition, 0.45s);
+    transition-timing-function: ease;
+  }
 }