tyrell-components 1.0.0-RC11 → 1.0.0-RC12

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,11 @@
    * --------------------------------------------------------------*/
 
   --ty-brand-hue: 230;
-  --ty-brand-chroma: 0.13;
+  --ty-brand-chroma: 0.12; /* restrained EU default; the loud 0.2 read as "bollywood" */
+
+  /* Surface tint. 0 = monochrome surfaces (default, no brand leak).
+   * 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,6 +190,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 +225,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 +246,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 */
 }
 
 /* =====================================================================
@@ -504,9 +553,9 @@ html[data-theme="dark"] {
   --ty-border-faint: var(--ty-color-neutral-faint);
 
   /* ----------------------------------------------------------------
-   * Surfaces — canvas tinted slightly toward brand for warmth.
+   * Surfaces — monochrome by default; --ty-surface-chroma warms them.
    * --------------------------------------------------------------*/
-  --ty-surface-canvas: oklch(0.985 0.005 var(--ty-brand-hue));
+  --ty-surface-canvas: oklch(0.985 var(--ty-surface-chroma) var(--ty-brand-hue));
   --ty-surface-content: oklch(1 0 0);
   --ty-surface-elevated: oklch(1 0 0);
   --ty-surface-floating: oklch(1 0 0);
@@ -517,8 +566,8 @@ 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-soft);
-  --ty-input-border-hover: var(--ty-color-neutral-bold);
+  --ty-input-border: var(--ty-color-neutral-faint);
+  --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);
@@ -529,48 +578,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
   );
 }
 
@@ -845,18 +983,18 @@ html[data-theme="dark"] {
   --ty-border-soft: var(--ty-color-neutral-faint);
   --ty-border-faint: var(--ty-color-neutral-faint);
 
-  /* Surfaces — flip dark with a hint of brand chroma. */
-  --ty-surface-canvas: oklch(0.12 0.012 var(--ty-brand-hue));
-  --ty-surface-content: oklch(0.16 0.012 var(--ty-brand-hue));
-  --ty-surface-elevated: oklch(0.19 0.013 var(--ty-brand-hue));
-  --ty-surface-floating: oklch(0.22 0.015 var(--ty-brand-hue));
-  --ty-surface-input: oklch(0.18 0.012 var(--ty-brand-hue));
+  /* Surfaces — monochrome by default; --ty-surface-chroma warms them. */
+  --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));
 
   /* Inputs — re-declared at html.dark specificity. */
   --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 +1006,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.css

@@ -176,7 +176,6 @@ Simplified from 7 variants to 5 practical variants:
   --ty-color-neutral-soft: #374151;
   --ty-color-neutral-faint: #9ca3af;
 
-  /* Accent - brand highlights, focus rings, selection states */
 
   /* =================================================================
 BACKGROUND COLORS
@@ -226,7 +225,6 @@ BACKGROUND COLORS
   --ty-bg-neutral-bold: #cecece;
   --ty-bg-neutral-soft: #ededed;
 
-  /* Accent backgrounds */
 
   /* =================================================================
 BORDER COLORS
@@ -336,8 +334,8 @@ COMPONENT TOKENS
   /* Input component tokens */
   --ty-input-bg: #ffffff;
   --ty-input-color: #111827;
-  --ty-input-border: #d1d5db;
-  --ty-input-border-hover: #9ca3af;
+  --ty-input-border: #e5e7eb;
+  --ty-input-border-hover: #d1d5db;
   --ty-input-border-focus: var(--ty-color-primary);
   --ty-input-shadow-focus: rgba(59, 130, 246, 0.1);
   --ty-input-placeholder: #9ca3af;
@@ -352,50 +350,58 @@ COMPONENT TOKENS
   --ty-input-warning-border: var(--ty-color-warning);
 
   /* =================================================================
-  SOLID BUTTON FILLS — saturated brand backgrounds for appearance="solid"
-  Each flavor defines:
-    --ty-solid-{flavor}        base saturated fill
-    --ty-solid-{flavor}-strong stronger fill (for solid+ tone)
-    --ty-solid-{flavor}-soft   softer fill   (for solid- tone)
-    --ty-solid-{flavor}-fg     paired text color (default white)
-  Strong/soft default to var(--ty-color-{flavor}-strong/-soft) so they
-  inherit from the existing color hierarchy. Override per flavor if needed.
+  SOLID BUTTON FILLS — plain default values (the contract). The smart
+  per-state derivation (hover/active/tone via OKLCH) lives in the theme
+  engines (tyrell-brand.css / tyrell-simple.css), not here. hover/active
+  alias to -strong as a simple default; a theme overrides them.
   ================================================================= */
 
   /* Primary */
   --ty-solid-primary: #4076b9;
   --ty-solid-primary-strong: var(--ty-color-primary-bold);
   --ty-solid-primary-soft: #7ea7d9;
+  --ty-solid-primary-hover: var(--ty-solid-primary-strong);
+  --ty-solid-primary-active: var(--ty-solid-primary-strong);
   --ty-solid-primary-fg: white;
 
   /* Secondary */
   --ty-solid-secondary: #7e67b4;
   --ty-solid-secondary-strong: #7d58d1;
   --ty-solid-secondary-soft: #9f8ec5;
+  --ty-solid-secondary-hover: var(--ty-solid-secondary-strong);
+  --ty-solid-secondary-active: var(--ty-solid-secondary-strong);
   --ty-solid-secondary-fg: white;
 
   /* Success */
   --ty-solid-success: #3bb68d;
   --ty-solid-success-strong: #27956e;
   --ty-solid-success-soft: #69b99e;
+  --ty-solid-success-hover: var(--ty-solid-success-strong);
+  --ty-solid-success-active: var(--ty-solid-success-strong);
   --ty-solid-success-fg: white;
 
   /* Danger */
   --ty-solid-danger: #df5b5b;
   --ty-solid-danger-strong: #cc3e3e;
   --ty-solid-danger-soft: #d57a7a;
+  --ty-solid-danger-hover: var(--ty-solid-danger-strong);
+  --ty-solid-danger-active: var(--ty-solid-danger-strong);
   --ty-solid-danger-fg: white;
 
   /* Warning */
   --ty-solid-warning: #e1a644;
   --ty-solid-warning-strong: #f59e0b;
   --ty-solid-warning-soft: #fbc56d;
+  --ty-solid-warning-hover: var(--ty-solid-warning-strong);
+  --ty-solid-warning-active: var(--ty-solid-warning-strong);
   --ty-solid-warning-fg: white;
 
   /* Neutral */
   --ty-solid-neutral: #414141;
   --ty-solid-neutral-strong: #000000;
   --ty-solid-neutral-soft: #6e6e6e;
+  --ty-solid-neutral-hover: var(--ty-solid-neutral-strong);
+  --ty-solid-neutral-active: var(--ty-solid-neutral-strong);
   --ty-solid-neutral-fg: white;
 
   /* =================================================================
@@ -613,7 +619,6 @@ Emphasis logic inverts: lighter = more emphasis
   --ty-color-neutral-soft: #696969;
   --ty-color-neutral-faint: #474747;
 
-  /* Accent - dark mode (emphasis inverted) */
 
   /* Backgrounds for dark mode */
   --ty-bg-faint: #0f1419;
@@ -650,7 +655,6 @@ Emphasis logic inverts: lighter = more emphasis
   --ty-bg-neutral: #323232;
   --ty-bg-neutral-soft: #242424;
 
-  /* Accent backgrounds - dark mode */
 
   /* Borders for dark mode */
   --ty-border-strong: #8c8c8c;
@@ -660,11 +664,11 @@ Emphasis logic inverts: lighter = more emphasis
   --ty-border-faint: #030712;
 
   /* Scrollbar - dark mode */
-  --ty-scrollbar-thumb: rgba(255, 255, 255, 0.22);
-  --ty-scrollbar-thumb-hover: rgba(255, 255, 255, 0.38);
-  --ty-scrollbar-thumb-active: rgba(255, 255, 255, 0.48);
+  --ty-scrollbar-thumb: rgba(255, 255, 255, 0.13);
+  --ty-scrollbar-thumb-hover: rgba(255, 255, 255, 0.22);
+  --ty-scrollbar-thumb-active: rgba(255, 255, 255, 0.3);
   --ty-scrollbar-track: transparent;
-  --ty-scrollbar-track-hover: rgba(255, 255, 255, 0.06);
+  --ty-scrollbar-track-hover: rgba(255, 255, 255, 0.04);
 
   --ty-surface-canvas: black;
   --ty-surface-content: #1a1a1a;
@@ -695,49 +699,55 @@ Emphasis logic inverts: lighter = more emphasis
     0 20px 25px -5px rgba(0, 0, 0, 0.3), 0 8px 10px -6px rgba(0, 0, 0, 0.3);
   --ty-shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
 
-  /* Solid button fills for dark mode — strong/soft/fg chain through automatically.
-     Note: --ty-color-{flavor}-strong is light-toned in dark mode (emphasis
-     inverts), so solid+ buttons will have a light bg with white text — low
-     contrast for some flavors. Override per flavor via --ty-solid-{flavor}-fg
-     if a specific brand needs darker text. */
+  /* Solid button fills — plain dark defaults. hover/active alias -strong;
+     theme engines override with smart per-state derivation. */
   --ty-solid-primary: #3e536c;
   --ty-solid-primary-strong: #426084;
   --ty-solid-primary-soft: #343f4c;
+  --ty-solid-primary-hover: var(--ty-solid-primary-strong);
+  --ty-solid-primary-active: var(--ty-solid-primary-strong);
   --ty-solid-primary-fg: white;
 
   --ty-solid-secondary: #7e67b4;
   --ty-solid-secondary-strong: #8269bc;
   --ty-solid-secondary-soft: #52466a;
+  --ty-solid-secondary-hover: var(--ty-solid-secondary-strong);
+  --ty-solid-secondary-active: var(--ty-solid-secondary-strong);
   --ty-solid-secondary-fg: white;
 
-  /* Success */
   --ty-solid-success: #3bb68d;
   --ty-solid-success-strong: #459679;
   --ty-solid-success-soft: #285748;
+  --ty-solid-success-hover: var(--ty-solid-success-strong);
+  --ty-solid-success-active: var(--ty-solid-success-strong);
   --ty-solid-success-fg: white;
 
-  /* Danger */
   --ty-solid-danger: #df5b5b;
   --ty-solid-danger-strong: #cc3e3e;
   --ty-solid-danger-soft: #875656;
+  --ty-solid-danger-hover: var(--ty-solid-danger-strong);
+  --ty-solid-danger-active: var(--ty-solid-danger-strong);
   --ty-solid-danger-fg: white;
 
-  /* Warning */
   --ty-solid-warning: #e1a644;
   --ty-solid-warning-strong: #f59e0b;
   --ty-solid-warning-soft: #8b6334;
+  --ty-solid-warning-hover: var(--ty-solid-warning-strong);
+  --ty-solid-warning-active: var(--ty-solid-warning-strong);
   --ty-solid-warning-fg: white;
 
   --ty-solid-neutral: #414141;
   --ty-solid-neutral-strong: #4c4c4c;
   --ty-solid-neutral-soft: #2a2a2a;
+  --ty-solid-neutral-hover: var(--ty-solid-neutral-strong);
+  --ty-solid-neutral-active: var(--ty-solid-neutral-strong);
   --ty-solid-neutral-fg: white;
 
   /* Input component tokens - dark mode */
   --ty-input-bg: #1b1b1b;
   --ty-input-color: #f9fafb;
-  --ty-input-border: #505050;
-  --ty-input-border-hover: #7f7f7f;
+  --ty-input-border: #3a3a3a;
+  --ty-input-border-hover: #505050;
   --ty-input-border-focus: var(--ty-color-primary);
   --ty-input-shadow-focus: rgba(96, 165, 250, 0.1);
   --ty-input-placeholder: #717171;
@@ -1084,7 +1094,6 @@ SEMANTIC BACKGROUND UTILITIES
   background-color: var(--ty-bg-neutral-soft);
 }
 
-/* Accent backgrounds */
 /* =================================================================
 TEXT HIERARCHY UTILITIES
 ================================================================= */
@@ -1240,7 +1249,6 @@ SEMANTIC TEXT COLORS - 5-VARIANT SYSTEM
   color: var(--ty-color-neutral-faint) !important;
 }
 
-/* Accent text colors */
 /* =================================================================
 BORDER UTILITIES
 ================================================================= */
@@ -1536,7 +1544,6 @@ INTERACTIVE STATES
   color: var(--ty-color-neutral-faint) !important;
 }
 
-/* Accent text hover states */
 /* Hover states for borders */
 /* Base border hover states */
 .hover\:ty-border\+\+:hover {