tyrell-components 1.0.0-TC23 → 1.0.0-TC25

package/css/tyrell-brand.css

@@ -54,15 +54,19 @@
  * FILE LAYOUT
  * =====================================================================
  *
- *   SECTION 1 — KNOBS  (~lines 80–225)
- *     The variables you might want to override. Five tiers from drop-in
- *     rebrand (Tier 1) to surgical per-flavor tweak (Tier 5).
+ *   SECTION 1 — KNOBS
+ *     The variables you might want to override. Six tiers from drop-in
+ *     rebrand (Tier 1) to surgical per-flavor tweak (Tier 5) plus solid
+ *     buttons (Tier 6).
  *
  *   SECTION 2 — IMPLEMENTATION
  *     The oklch() expressions that wire the knobs through to the actual
  *     color tokens. Rarely needs editing — Section 1 is the contract.
  *
- * Browser support: OKLCH is in every evergreen browser since mid-2023.
+ * Browser support: oklch() is in every evergreen browser since mid-2023.
+ * Tier 6 (solid) additionally uses OKLCH relative color — oklch(from …) —
+ * which lands later: Chrome 119, Safari 16.4, Firefox 128 (mid-2024).
+ * Solid fills have no fallback below those versions.
  *
  * ===================================================================== */
 
@@ -81,6 +85,8 @@
  *   Tier 5 — PER-FLAVOR L-FACTOR   per-flavor lightness multiplier — push
  *                                  one flavor up or down without touching
  *                                  the others. Default 1.
+ *   Tier 6 — SOLID FILLS           solid-button system: hover/active/tone
+ *                                  L offsets + per-theme dim/desaturate.
  * ===================================================================== */
 
 :root {
@@ -91,7 +97,7 @@
    * --------------------------------------------------------------*/
 
   --ty-brand-hue: 230;
-  --ty-brand-chroma: 0.13;
+  --ty-brand-chroma: 0.2;
 
   /* Secondary rotates from brand by an exposed offset. Default +60°
    * (sibling accent). Try 30° for a close sibling, 120° for triadic,
@@ -180,6 +186,33 @@
   --ty-warning-l-factor: 1.15;
   --ty-danger-l-factor: 1;
   --ty-neutral-l-factor: 1;
+
+  /* ----------------------------------------------------------------
+   * Tier 6 — SOLID FILLS
+   * Solid buttons are their OWN system, not the emphasis ramp. Each
+   * flavor's fill defaults to --ty-color-{flavor}; the knobs below
+   * derive its hover / active / tone+ / tone- and per-theme adjust.
+   * Math lives in SECTION 2 (search "Tier 6 — SOLID"); these are the
+   * dials.
+   *
+   * Axis A — interaction & tone, OKLCH L offsets on the fill.
+   * Axis B — per-theme adjust applied to the base fill (dim/desaturate).
+   *
+   * NOTE: like Tier 5, the emphasis curve flips for dark, so these L
+   * offsets are sign-flipped in `html.dark` below (darken in light =
+   * lighten in dark). Keep the two blocks in sync.
+   * --------------------------------------------------------------*/
+
+  /* Axis A — interaction (light: darken on press, so offsets are negative) */
+  --ty-solid-hover-l: -0.04; /* :hover */
+  --ty-solid-active-l: -0.08; /* :active */
+  --ty-solid-strong-l: -0.06; /* tone+ */
+  --ty-solid-soft-l: 0.1; /* tone- */
+
+  /* Axis B — per-theme adjust (light reads fine → identity) */
+  --ty-solid-l: 0; /* lightness offset — negative dims */
+  --ty-solid-c: 1; /* chroma multiplier — <1 desaturates */
+  --ty-solid-h: 0; /* hue offset (deg) */
 }
 
 /* Dark mode overrides for the L-curve and saturation curve. Tier 1 + 2
@@ -188,8 +221,8 @@ html.dark,
 html[data-theme="dark"] {
   /* Tier 3 dark — inverted curve. Higher L = lighter text = more
    * emphasis on a dark background. */
-  --ty-l-strong: 0.86;
-  --ty-l-bold: 0.74;
+  --ty-l-strong: 0.72;
+  --ty-l-bold: 0.66;
   --ty-l-base: 0.62;
   --ty-l-soft: 0.46;
   --ty-l-faint: 0.3;
@@ -209,6 +242,18 @@ html[data-theme="dark"] {
   --ty-c-bg-base-mult: 0.38;
   --ty-c-bg-bold-mult: 0.54;
   --ty-c-bg-soft-mult: 0.23;
+
+  /* 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.) */
+  --ty-solid-hover-l: 0.04; /* :hover */
+  --ty-solid-active-l: 0.08; /* :active */
+  --ty-solid-strong-l: 0.06; /* tone+ */
+  --ty-solid-soft-l: -0.1; /* tone- */
+
+  --ty-solid-l: -0.25; /* dim against dark canvas */
+  --ty-solid-c: 0.65; /* desaturate against dark canvas */
+  --ty-solid-h: 0; /* hue offset */
 }
 
 /* =====================================================================
@@ -529,48 +574,137 @@ html[data-theme="dark"] {
     var(--ty-color-primary) 5%,
     transparent
   );
+}
 
-  /* ----------------------------------------------------------------
-   * Solid buttons — re-route through --ty-color-*.
-   * --------------------------------------------------------------*/
-  --ty-solid-primary: var(--ty-color-primary);
-  --ty-solid-primary-strong: var(--ty-color-primary-bold);
-  --ty-solid-primary-soft: var(--ty-color-primary-soft);
-  --ty-solid-primary-fg: white;
+/* ----------------------------------------------------------------
+ * Tier 6 — SOLID (implementation)
+ * Solid is its OWN system, NOT the text/emphasis ramp. The dials
+ * (--ty-solid-hover-l / -active-l / -strong-l / -soft-l and
+ * --ty-solid-l / -c / -h) live in SECTION 1, Tier 6. Below is the
+ * derivation only: base fill bakes in the per-theme adjust (Axis B);
+ * hover/active/strong/soft offset the base by Axis A. Override any
+ * single --ty-solid-{flavor}-{state} to recolor just that segment.
+ *
+ * Declared at `html:root` (specificity 0,1,1) — NOT plain `:root` (0,1,0) —
+ * on purpose: it must out-rank tyrell.css's hardcoded dark solids at
+ * `html.dark` (0,1,1). It wins light by specificity over base's `html{}`,
+ * and wins dark by source order over base's `html.dark` (brand loads after).
+ * That's what lets dark solids re-tint with --ty-brand-hue. Declared ONCE —
+ * the oklch(from var(--ty-color-*)) formulas resolve per-mode automatically,
+ * so no dark duplicate is needed.
+ * --------------------------------------------------------------*/
+html:root {
+  /* 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))
+  );
+  --ty-solid-danger: oklch(
+    from var(--ty-color-danger) calc(l + var(--ty-solid-l))
+      calc(c * var(--ty-solid-c)) calc(h + var(--ty-solid-h))
+  );
+  --ty-solid-warning: oklch(
+    from var(--ty-color-warning) calc(l + var(--ty-solid-l))
+      calc(c * var(--ty-solid-c)) calc(h + var(--ty-solid-h))
+  );
+  /* 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)
+  );
 
-  --ty-solid-secondary: var(--ty-color-secondary);
-  --ty-solid-secondary-strong: var(--ty-color-secondary-bold);
-  --ty-solid-secondary-soft: var(--ty-color-secondary-soft);
+  --ty-solid-primary-fg: white;
   --ty-solid-secondary-fg: white;
-
-  --ty-solid-success: var(--ty-color-success);
-  --ty-solid-success-strong: var(--ty-color-success-bold);
-  --ty-solid-success-soft: var(--ty-color-success-soft);
   --ty-solid-success-fg: white;
-
-  --ty-solid-danger: var(--ty-color-danger);
-  --ty-solid-danger-strong: var(--ty-color-danger-bold);
-  --ty-solid-danger-soft: var(--ty-color-danger-soft);
   --ty-solid-danger-fg: white;
-
-  --ty-solid-warning: var(--ty-color-warning);
-  --ty-solid-warning-strong: var(--ty-color-warning-bold);
-  --ty-solid-warning-soft: var(--ty-color-warning-soft);
   --ty-solid-warning-fg: white;
+  --ty-solid-neutral-fg: white;
 
-  /* Solid neutral routes to a darker shade than neutral-base. The "soft"
-   * solid-neutral softens to a mid-grey for inactive states. */
-  --ty-solid-neutral-soft: oklch(
-    0.6 calc(var(--ty-neutral-chroma) * var(--ty-c-strong-mult))
-      var(--ty-neutral-hue)
+  /* derived states — axis 2 offsets on each base fill */
+  --ty-solid-primary-hover: oklch(
+    from var(--ty-solid-primary) calc(l + var(--ty-solid-hover-l)) c h
   );
-  --ty-solid-neutral: oklch(
-    0.4 calc(var(--ty-neutral-chroma) * var(--ty-c-strong-mult))
-      var(--ty-neutral-hue)
+  --ty-solid-primary-active: oklch(
+    from var(--ty-solid-primary) calc(l + var(--ty-solid-active-l)) c h
+  );
+  --ty-solid-primary-strong: oklch(
+    from var(--ty-solid-primary) calc(l + var(--ty-solid-strong-l)) c h
+  );
+  --ty-solid-primary-soft: oklch(
+    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
+  );
+  --ty-solid-success-active: oklch(
+    from var(--ty-solid-success) calc(l + var(--ty-solid-active-l)) c h
+  );
+  --ty-solid-success-strong: oklch(
+    from var(--ty-solid-success) calc(l + var(--ty-solid-strong-l)) c h
+  );
+  --ty-solid-success-soft: oklch(
+    from var(--ty-solid-success) calc(l + var(--ty-solid-soft-l)) c h
+  );
+
+  --ty-solid-danger-hover: oklch(
+    from var(--ty-solid-danger) calc(l + var(--ty-solid-hover-l)) c h
+  );
+  --ty-solid-danger-active: oklch(
+    from var(--ty-solid-danger) calc(l + var(--ty-solid-active-l)) c h
+  );
+  --ty-solid-danger-strong: oklch(
+    from var(--ty-solid-danger) calc(l + var(--ty-solid-strong-l)) c h
+  );
+  --ty-solid-danger-soft: oklch(
+    from var(--ty-solid-danger) calc(l + var(--ty-solid-soft-l)) c h
+  );
+
+  --ty-solid-warning-hover: oklch(
+    from var(--ty-solid-warning) calc(l + var(--ty-solid-hover-l)) c h
+  );
+  --ty-solid-warning-active: oklch(
+    from var(--ty-solid-warning) calc(l + var(--ty-solid-active-l)) c h
+  );
+  --ty-solid-warning-strong: oklch(
+    from var(--ty-solid-warning) calc(l + var(--ty-solid-strong-l)) c h
+  );
+  --ty-solid-warning-soft: oklch(
+    from var(--ty-solid-warning) calc(l + var(--ty-solid-soft-l)) c h
+  );
+
+  --ty-solid-neutral-hover: oklch(
+    from var(--ty-solid-neutral) calc(l + var(--ty-solid-hover-l)) c h
+  );
+  --ty-solid-neutral-active: oklch(
+    from var(--ty-solid-neutral) calc(l + var(--ty-solid-active-l)) c h
   );
   --ty-solid-neutral-strong: oklch(
-    0.2 calc(var(--ty-neutral-chroma) * var(--ty-c-strong-mult))
-      var(--ty-neutral-hue)
+    from var(--ty-solid-neutral) calc(l + var(--ty-solid-strong-l)) c h
+  );
+  --ty-solid-neutral-soft: oklch(
+    from var(--ty-solid-neutral) calc(l + var(--ty-solid-soft-l)) c h
   );
 }
 
@@ -856,7 +990,7 @@ html[data-theme="dark"] {
   --ty-input-bg: var(--ty-surface-input);
   --ty-input-color: var(--ty-color-neutral-strong);
   --ty-input-border: var(--ty-color-neutral-faint);
-  --ty-input-border-hover: var(--ty-color-neutral-bold);
+  --ty-input-border-hover: var(--ty-color-neutral-soft);
   --ty-input-border-focus: var(--ty-color-primary);
   --ty-input-placeholder: var(--ty-color-neutral-soft);
   --ty-input-disabled-bg: var(--ty-color-neutral-faint);
@@ -868,46 +1002,10 @@ html[data-theme="dark"] {
     transparent
   );
 
-  /* Solid buttons */
-  --ty-solid-primary: var(--ty-color-primary);
-  --ty-solid-primary-strong: var(--ty-color-primary-bold);
-  --ty-solid-primary-soft: var(--ty-color-primary-soft);
-  --ty-solid-primary-fg: white;
-
-  --ty-solid-secondary: var(--ty-color-secondary);
-  --ty-solid-secondary-strong: var(--ty-color-secondary-bold);
-  --ty-solid-secondary-soft: var(--ty-color-secondary-soft);
-  --ty-solid-secondary-fg: white;
-
-  --ty-solid-success: var(--ty-color-success);
-  --ty-solid-success-strong: var(--ty-color-success-bold);
-  --ty-solid-success-soft: var(--ty-color-success-soft);
-  --ty-solid-success-fg: white;
-
-  --ty-solid-danger: var(--ty-color-danger);
-  --ty-solid-danger-strong: var(--ty-color-danger-bold);
-  --ty-solid-danger-soft: var(--ty-color-danger-soft);
-  --ty-solid-danger-fg: white;
-
-  --ty-solid-warning: var(--ty-color-warning);
-  --ty-solid-warning-strong: var(--ty-color-warning-bold);
-  --ty-solid-warning-soft: var(--ty-color-warning-soft);
-  --ty-solid-warning-fg: white;
-
-  /* Solid neutral — in dark mode, "dark grey" lives at the other end
-   * of the ramp. Both modes get a shade darker than the page surface
-   * for a punchy default action. */
-  --ty-solid-neutral-soft: oklch(
-    0.2 calc(var(--ty-neutral-chroma) * var(--ty-c-strong-mult))
-      var(--ty-neutral-hue)
-  );
+  /* Tier 6 dark — solid dials live in SECTION 1's html.dark block.
+   * neutral is hand-pinned (it ignores Axis B); dim it per theme here. */
   --ty-solid-neutral: oklch(
     0.3 calc(var(--ty-neutral-chroma) * var(--ty-c-strong-mult))
       var(--ty-neutral-hue)
   );
-  --ty-solid-neutral-strong: oklch(
-    0.4 calc(var(--ty-neutral-chroma) * var(--ty-c-strong-mult))
-      var(--ty-neutral-hue)
-  );
-  --ty-solid-neutral-fg: white;
 }

package/css/tyrell-simple.css

@@ -0,0 +1,257 @@
+/* =====================================================================
+ * tyrell-simple.css — the lightweight color-mix theme engine for Tyrell
+ * =====================================================================
+ *
+ * EXPERIMENTAL, opt-in. The SIMPLE counterpart to tyrell-brand.css (the
+ * complex OKLCH engine). Same job — fill the color-token contract — with
+ * far fewer moving parts. Load it INSTEAD of tyrell-brand.css:
+ *
+ *   <link rel="stylesheet" href=".../tyrell.css">         <!-- structure + default colors -->
+ *   <link rel="stylesheet" href=".../tyrell-simple.css">  <!-- overrides colors -->
+ *
+ * THE WHOLE MODEL
+ * ---------------
+ * Every color is one expression:
+ *     color-mix(in oklch, <ink>, var(--ty-bg) STOP%)
+ *   - --ty-bg          the page/background pole
+ *   - --ty-ink-{role}  the saturated emphasis pole for each role
+ *   - STOP             how far toward the background (shared, see below)
+ *
+ * Inputs are ~7 anchors per theme (page bg + 6 inks). Everything else is
+ * derived ONCE in :root. Dark mode only re-points those anchors — the
+ * whole palette falls out. No second curve, no sign-flips, no duplication.
+ *
+ * Rebrand: change the 6 inks. Retune contrast: change the STOP percentages.
+ *
+ * Needs oklch() + color-mix() + relative color (oklch(from …)) for solids:
+ * Chrome 119 / Safari 16.4 / Firefox 128 (mid-2024).
+ * ===================================================================== */
+
+:root {
+  /* ---- shared emphasis stops (% toward --ty-bg). One curve, both themes. ---- */
+  --ty-s-strong: 0%;
+  --ty-s-bold: 16%;
+  --ty-s-base: 32%;
+  --ty-s-soft: 56%;
+  --ty-s-faint: 78%;
+  /* background tints: mostly bg, a breath of ink */
+  --ty-bgs-bold: 82%;
+  --ty-bgs-base: 88%;
+  --ty-bgs-soft: 94%;
+
+  /* ====================== ANCHORS (light) ====================== */
+  --ty-bg: oklch(0.99 0.003 250); /* page pole */
+  --ty-ink-primary: oklch(0.55 0.15 250);
+  --ty-ink-secondary: oklch(0.55 0.16 300);
+  --ty-ink-success: oklch(0.55 0.13 150);
+  --ty-ink-danger: oklch(0.55 0.17 25);
+  --ty-ink-warning: oklch(0.68 0.15 75);
+  --ty-ink-neutral: oklch(0.30 0.012 250);
+
+  /* ====================== DERIVED — everything below references anchors ===== */
+
+  /* ---- flavor color ramps ---- */
+  --ty-color-primary-strong: color-mix(in oklch, var(--ty-ink-primary), var(--ty-bg) var(--ty-s-strong));
+  --ty-color-primary-bold:   color-mix(in oklch, var(--ty-ink-primary), var(--ty-bg) var(--ty-s-bold));
+  --ty-color-primary:        color-mix(in oklch, var(--ty-ink-primary), var(--ty-bg) var(--ty-s-base));
+  --ty-color-primary-soft:   color-mix(in oklch, var(--ty-ink-primary), var(--ty-bg) var(--ty-s-soft));
+  --ty-color-primary-faint:  color-mix(in oklch, var(--ty-ink-primary), var(--ty-bg) var(--ty-s-faint));
+
+  --ty-color-secondary-strong: color-mix(in oklch, var(--ty-ink-secondary), var(--ty-bg) var(--ty-s-strong));
+  --ty-color-secondary-bold:   color-mix(in oklch, var(--ty-ink-secondary), var(--ty-bg) var(--ty-s-bold));
+  --ty-color-secondary:        color-mix(in oklch, var(--ty-ink-secondary), var(--ty-bg) var(--ty-s-base));
+  --ty-color-secondary-soft:   color-mix(in oklch, var(--ty-ink-secondary), var(--ty-bg) var(--ty-s-soft));
+  --ty-color-secondary-faint:  color-mix(in oklch, var(--ty-ink-secondary), var(--ty-bg) var(--ty-s-faint));
+
+  --ty-color-success-strong: color-mix(in oklch, var(--ty-ink-success), var(--ty-bg) var(--ty-s-strong));
+  --ty-color-success-bold:   color-mix(in oklch, var(--ty-ink-success), var(--ty-bg) var(--ty-s-bold));
+  --ty-color-success:        color-mix(in oklch, var(--ty-ink-success), var(--ty-bg) var(--ty-s-base));
+  --ty-color-success-soft:   color-mix(in oklch, var(--ty-ink-success), var(--ty-bg) var(--ty-s-soft));
+  --ty-color-success-faint:  color-mix(in oklch, var(--ty-ink-success), var(--ty-bg) var(--ty-s-faint));
+
+  --ty-color-danger-strong: color-mix(in oklch, var(--ty-ink-danger), var(--ty-bg) var(--ty-s-strong));
+  --ty-color-danger-bold:   color-mix(in oklch, var(--ty-ink-danger), var(--ty-bg) var(--ty-s-bold));
+  --ty-color-danger:        color-mix(in oklch, var(--ty-ink-danger), var(--ty-bg) var(--ty-s-base));
+  --ty-color-danger-soft:   color-mix(in oklch, var(--ty-ink-danger), var(--ty-bg) var(--ty-s-soft));
+  --ty-color-danger-faint:  color-mix(in oklch, var(--ty-ink-danger), var(--ty-bg) var(--ty-s-faint));
+
+  --ty-color-warning-strong: color-mix(in oklch, var(--ty-ink-warning), var(--ty-bg) var(--ty-s-strong));
+  --ty-color-warning-bold:   color-mix(in oklch, var(--ty-ink-warning), var(--ty-bg) var(--ty-s-bold));
+  --ty-color-warning:        color-mix(in oklch, var(--ty-ink-warning), var(--ty-bg) var(--ty-s-base));
+  --ty-color-warning-soft:   color-mix(in oklch, var(--ty-ink-warning), var(--ty-bg) var(--ty-s-soft));
+  --ty-color-warning-faint:  color-mix(in oklch, var(--ty-ink-warning), var(--ty-bg) var(--ty-s-faint));
+
+  --ty-color-neutral-strong: var(--ty-ink-neutral);
+  --ty-color-neutral-bold:   color-mix(in oklch, var(--ty-ink-neutral), var(--ty-bg) 8%);
+  --ty-color-neutral:        color-mix(in oklch, var(--ty-ink-neutral), var(--ty-bg) 18%);
+  --ty-color-neutral-soft:   color-mix(in oklch, var(--ty-ink-neutral), var(--ty-bg) 45%);
+  --ty-color-neutral-faint:  color-mix(in oklch, var(--ty-ink-neutral), var(--ty-bg) 70%);
+
+  /* ---- text hierarchy (neutral ink → bg) ---- */
+  --ty-text-strong: var(--ty-ink-neutral);
+  --ty-text-bold:   color-mix(in oklch, var(--ty-ink-neutral), var(--ty-bg) 8%);
+  --ty-text:        color-mix(in oklch, var(--ty-ink-neutral), var(--ty-bg) 16%);
+  --ty-text-soft:   color-mix(in oklch, var(--ty-ink-neutral), var(--ty-bg) 40%);
+  --ty-text-faint:  color-mix(in oklch, var(--ty-ink-neutral), var(--ty-bg) 60%);
+
+  /* ---- soft background tints per flavor ---- */
+  --ty-bg-primary-bold: color-mix(in oklch, var(--ty-ink-primary), var(--ty-bg) var(--ty-bgs-bold));
+  --ty-bg-primary:      color-mix(in oklch, var(--ty-ink-primary), var(--ty-bg) var(--ty-bgs-base));
+  --ty-bg-primary-soft: color-mix(in oklch, var(--ty-ink-primary), var(--ty-bg) var(--ty-bgs-soft));
+
+  --ty-bg-secondary-bold: color-mix(in oklch, var(--ty-ink-secondary), var(--ty-bg) var(--ty-bgs-bold));
+  --ty-bg-secondary:      color-mix(in oklch, var(--ty-ink-secondary), var(--ty-bg) var(--ty-bgs-base));
+  --ty-bg-secondary-soft: color-mix(in oklch, var(--ty-ink-secondary), var(--ty-bg) var(--ty-bgs-soft));
+
+  --ty-bg-success-bold: color-mix(in oklch, var(--ty-ink-success), var(--ty-bg) var(--ty-bgs-bold));
+  --ty-bg-success:      color-mix(in oklch, var(--ty-ink-success), var(--ty-bg) var(--ty-bgs-base));
+  --ty-bg-success-soft: color-mix(in oklch, var(--ty-ink-success), var(--ty-bg) var(--ty-bgs-soft));
+
+  --ty-bg-danger-bold: color-mix(in oklch, var(--ty-ink-danger), var(--ty-bg) var(--ty-bgs-bold));
+  --ty-bg-danger:      color-mix(in oklch, var(--ty-ink-danger), var(--ty-bg) var(--ty-bgs-base));
+  --ty-bg-danger-soft: color-mix(in oklch, var(--ty-ink-danger), var(--ty-bg) var(--ty-bgs-soft));
+
+  --ty-bg-warning-bold: color-mix(in oklch, var(--ty-ink-warning), var(--ty-bg) var(--ty-bgs-bold));
+  --ty-bg-warning:      color-mix(in oklch, var(--ty-ink-warning), var(--ty-bg) var(--ty-bgs-base));
+  --ty-bg-warning-soft: color-mix(in oklch, var(--ty-ink-warning), var(--ty-bg) var(--ty-bgs-soft));
+
+  --ty-bg-neutral-bold: color-mix(in oklch, var(--ty-ink-neutral), var(--ty-bg) var(--ty-bgs-bold));
+  --ty-bg-neutral:      color-mix(in oklch, var(--ty-ink-neutral), var(--ty-bg) var(--ty-bgs-base));
+  --ty-bg-neutral-soft: color-mix(in oklch, var(--ty-ink-neutral), var(--ty-bg) var(--ty-bgs-soft));
+
+  /* ---- generic bg / elevation ---- */
+  --ty-bg-faint:  var(--ty-bg);
+  --ty-bg-soft:   color-mix(in oklch, var(--ty-bg), var(--ty-ink-neutral) 4%);
+  --ty-bg-bold:   color-mix(in oklch, var(--ty-bg), var(--ty-ink-neutral) 8%);
+  --ty-bg-strong: color-mix(in oklch, var(--ty-bg), var(--ty-ink-neutral) 16%);
+  --ty-focus-ring-gap: var(--ty-bg);
+
+  /* ---- surfaces (elevate toward white in both themes) ---- */
+  --ty-surface-canvas:   var(--ty-bg);
+  --ty-surface-content:  color-mix(in oklab, var(--ty-bg), white 25%);
+  --ty-surface-elevated: color-mix(in oklab, var(--ty-bg), white 45%);
+  --ty-surface-floating: color-mix(in oklab, var(--ty-bg), white 60%);
+  --ty-surface-input:    color-mix(in oklab, var(--ty-bg), white 30%);
+
+  /* ---- borders ---- */
+  --ty-border-strong: color-mix(in oklch, var(--ty-bg), var(--ty-ink-neutral) 40%);
+  --ty-border-bold:   color-mix(in oklch, var(--ty-bg), var(--ty-ink-neutral) 22%);
+  --ty-border:        color-mix(in oklch, var(--ty-bg), var(--ty-ink-neutral) 14%);
+  --ty-border-soft:   color-mix(in oklch, var(--ty-bg), var(--ty-ink-neutral) 8%);
+  --ty-border-faint:  color-mix(in oklch, var(--ty-bg), var(--ty-ink-neutral) 4%);
+
+  --ty-border-primary:   var(--ty-color-primary-soft);
+  --ty-border-secondary: var(--ty-color-secondary-soft);
+  --ty-border-success:   var(--ty-color-success-soft);
+  --ty-border-danger:    var(--ty-color-danger-soft);
+  --ty-border-warning:   var(--ty-color-warning-soft);
+  --ty-border-neutral:   var(--ty-color-neutral);
+
+  --ty-elevated-border: var(--ty-border);
+  --ty-floating-border: var(--ty-border);
+  --ty-content-border:  var(--ty-border);
+  --ty-canvas-border:   transparent;
+
+  /* ---- scrollbar (neutral ink → transparent; auto-flips) ---- */
+  --ty-scrollbar-thumb:        color-mix(in srgb, var(--ty-ink-neutral) 35%, transparent);
+  --ty-scrollbar-thumb-hover:  color-mix(in srgb, var(--ty-ink-neutral) 50%, transparent);
+  --ty-scrollbar-thumb-active: color-mix(in srgb, var(--ty-ink-neutral) 60%, transparent);
+  --ty-scrollbar-track:        transparent;
+  --ty-scrollbar-track-hover:  color-mix(in srgb, var(--ty-ink-neutral) 8%, transparent);
+
+  /* ---- modal ---- */
+  --ty-modal-bg:       var(--ty-surface-floating);
+  --ty-modal-color:    var(--ty-text);
+  --ty-modal-border:   var(--ty-border);
+  --ty-modal-backdrop: color-mix(in oklab, black 50%, transparent);
+  --ty-modal-shadow:   var(--ty-shadow-xl);
+
+  /* ---- inputs ---- */
+  --ty-input-bg:            var(--ty-surface-input);
+  --ty-input-color:         var(--ty-text);
+  --ty-input-border:        var(--ty-border-bold);
+  --ty-input-border-hover:  var(--ty-border-strong);
+  --ty-input-border-focus:  var(--ty-color-primary);
+  --ty-input-shadow-focus:  color-mix(in srgb, var(--ty-color-primary) 12%, transparent);
+  --ty-input-placeholder:   var(--ty-text-faint);
+  --ty-input-disabled-bg:   var(--ty-bg-soft);
+  --ty-input-disabled-border: var(--ty-border);
+  --ty-input-disabled-color: var(--ty-text-faint);
+  --ty-label-color:         var(--ty-text-soft);
+  --ty-input-success-border: var(--ty-color-success);
+  --ty-input-danger-border:  var(--ty-color-danger);
+  --ty-input-warning-border: var(--ty-color-warning);
+
+  /* ====================== SOLID ====================== */
+  /* base fill = flavor ink; states via OKLCH L offsets (same axes as the
+     other engines). theme dim/desaturate via the dark block re-points ink. */
+  --ty-solid-hover-l: -0.04;
+  --ty-solid-active-l: -0.08;
+  --ty-solid-strong-l: -0.06;
+  --ty-solid-soft-l: 0.1;
+  /* solid fill lightness — PINNED, not the text ink (which flips light on dark).
+     Keeps fills a saturated mid so white fg stays legible in both themes. */
+  --ty-solid-base-l: 0.55;
+
+  --ty-solid-primary:   oklch(from var(--ty-ink-primary)   var(--ty-solid-base-l) c h);
+  --ty-solid-secondary: oklch(from var(--ty-ink-secondary) var(--ty-solid-base-l) c h);
+  --ty-solid-success:   oklch(from var(--ty-ink-success)   var(--ty-solid-base-l) c h);
+  --ty-solid-danger:    oklch(from var(--ty-ink-danger)    var(--ty-solid-base-l) c h);
+  --ty-solid-warning:   oklch(from var(--ty-ink-warning)   var(--ty-solid-base-l) c h);
+  --ty-solid-neutral:   oklch(from var(--ty-ink-neutral)   0.4 c h);
+
+  --ty-solid-primary-fg: white;
+  --ty-solid-secondary-fg: white;
+  --ty-solid-success-fg: white;
+  --ty-solid-danger-fg: white;
+  --ty-solid-warning-fg: white;
+  --ty-solid-neutral-fg: white;
+
+  --ty-solid-primary-hover:  oklch(from var(--ty-solid-primary) calc(l + var(--ty-solid-hover-l)) c h);
+  --ty-solid-primary-active: oklch(from var(--ty-solid-primary) calc(l + var(--ty-solid-active-l)) c h);
+  --ty-solid-primary-strong: oklch(from var(--ty-solid-primary) calc(l + var(--ty-solid-strong-l)) c h);
+  --ty-solid-primary-soft:   oklch(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);
+  --ty-solid-success-active: oklch(from var(--ty-solid-success) calc(l + var(--ty-solid-active-l)) c h);
+  --ty-solid-success-strong: oklch(from var(--ty-solid-success) calc(l + var(--ty-solid-strong-l)) c h);
+  --ty-solid-success-soft:   oklch(from var(--ty-solid-success) calc(l + var(--ty-solid-soft-l)) c h);
+
+  --ty-solid-danger-hover:  oklch(from var(--ty-solid-danger) calc(l + var(--ty-solid-hover-l)) c h);
+  --ty-solid-danger-active: oklch(from var(--ty-solid-danger) calc(l + var(--ty-solid-active-l)) c h);
+  --ty-solid-danger-strong: oklch(from var(--ty-solid-danger) calc(l + var(--ty-solid-strong-l)) c h);
+  --ty-solid-danger-soft:   oklch(from var(--ty-solid-danger) calc(l + var(--ty-solid-soft-l)) c h);
+
+  --ty-solid-warning-hover:  oklch(from var(--ty-solid-warning) calc(l + var(--ty-solid-hover-l)) c h);
+  --ty-solid-warning-active: oklch(from var(--ty-solid-warning) calc(l + var(--ty-solid-active-l)) c h);
+  --ty-solid-warning-strong: oklch(from var(--ty-solid-warning) calc(l + var(--ty-solid-strong-l)) c h);
+  --ty-solid-warning-soft:   oklch(from var(--ty-solid-warning) calc(l + var(--ty-solid-soft-l)) c h);
+
+  --ty-solid-neutral-hover:  oklch(from var(--ty-solid-neutral) calc(l + var(--ty-solid-hover-l)) c h);
+  --ty-solid-neutral-active: oklch(from var(--ty-solid-neutral) calc(l + var(--ty-solid-active-l)) c h);
+  --ty-solid-neutral-strong: oklch(from var(--ty-solid-neutral) calc(l + var(--ty-solid-strong-l)) c h);
+  --ty-solid-neutral-soft:   oklch(from var(--ty-solid-neutral) calc(l + var(--ty-solid-soft-l)) c h);
+}
+
+/* =====================================================================
+ * DARK — re-point the anchors ONLY. The whole palette above re-derives.
+ * Inks go lighter (emphasis inverts); page goes dark.
+ * ===================================================================== */
+html.dark,
+html[data-theme="dark"] {
+  --ty-bg: oklch(0.16 0.012 250);
+  --ty-ink-primary: oklch(0.80 0.12 250);
+  --ty-ink-secondary: oklch(0.80 0.13 300);
+  --ty-ink-success: oklch(0.80 0.11 150);
+  --ty-ink-danger: oklch(0.78 0.14 25);
+  --ty-ink-warning: oklch(0.84 0.13 75);
+  --ty-ink-neutral: oklch(0.88 0.008 250);
+
+  /* solids: dim the pinned fill slightly against the dark canvas */
+  --ty-solid-base-l: 0.50;
+}