tyrell-components 1.0.0-TC45 → 1.0.0-TC47

package/README.md

@@ -62,7 +62,7 @@ import 'tyrell-components/input'
 
 ## Available Components
 
-- **ty-button** - Button with multiple flavors (primary, secondary, success, danger, warning)
+- **ty-button** - Button with multiple flavors (primary, success, danger, warning, neutral)
 - **ty-modal** - Modal dialog with backdrop, ESC key, focus trap
 - **ty-input** - Input field with validation, number formatting
 - **ty-dropdown** - Dropdown with positioning, keyboard navigation

package/css/tyrell-theme.css

@@ -101,8 +101,8 @@
    * solid buttons. One slider rebrands the page.
    * --------------------------------------------------------------*/
 
-  --ty-brand-hue: 45;
-  --ty-brand-chroma: 0.125; /* restrained default; the loud 0.2 read as "bollywood" */
+  --ty-brand-hue: 252;
+  --ty-brand-chroma: 0.08; /* restrained 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. */
@@ -120,11 +120,11 @@
   --ty-success-hue: 145;
   --ty-success-chroma: calc(var(--ty-brand-chroma) * 1.08);
 
-  --ty-warning-hue: 75;
-  --ty-warning-chroma: calc(var(--ty-brand-chroma) * 2);
+  --ty-warning-hue: 76;
+  --ty-warning-chroma: calc(var(--ty-brand-chroma) * 2.22);
 
-  --ty-danger-hue: 25;
-  --ty-danger-chroma: calc(var(--ty-brand-chroma) * 1.31);
+  --ty-danger-hue: 31;
+  --ty-danger-chroma: calc(var(--ty-brand-chroma) * 1.95);
 
   /* Neutral is ACHROMATIC by default — greys do not follow the brand.
    * Most of an interface is monochrome; a rebrand should not drift it.
@@ -147,9 +147,16 @@
   --ty-l-soft: 0.72; /* -  low emphasis */
   --ty-l-faint: 0.88; /* -- min emphasis */
 
-  --ty-l-bg-base: 0.96;
-  --ty-l-bg-bold: 0.92;
-  --ty-l-bg-soft: 0.98;
+  /* BG TRACK — the flavor's BASE color at low opacity, composited over
+   * whatever surface it sits on. No bg-specific L or chroma stops: the
+   * ink is always mid-scale (gamut-happy, l-factor-safe), and the alpha
+   * does the washing. Direction is automatic — the same token lightens
+   * a dark surface and darkens a light one — and l-factor reaches the
+   * tint only through the ink, scaled by alpha: it points, it doesn't
+   * shove. */
+  --ty-a-bg-base: 9%;
+  --ty-a-bg-bold: 17%;
+  --ty-a-bg-soft: 4%;
 
   /* Text ladder (--ty-text-*) and surface borders — historically
    * hardcoded hexes in tyrell.css that a rebrand never touched; now
@@ -214,10 +221,6 @@
   --ty-c-soft-mult: 0.77;
   --ty-c-faint-mult: 0.46;
 
-  --ty-c-bg-base-mult: 0.15;
-  --ty-c-bg-bold-mult: 0.38;
-  --ty-c-bg-soft-mult: 0.08;
-
   /* ----------------------------------------------------------------
    * Tier 5 — PER-FLAVOR L-FACTOR
    * Multiplies the L-curve values for that flavor only. Default 1 =
@@ -237,8 +240,8 @@
 
   --ty-primary-l-factor: 1;
   --ty-success-l-factor: 1;
-  --ty-warning-l-factor: 1.15;
-  --ty-danger-l-factor: 1;
+  --ty-warning-l-factor: 1.3;
+  --ty-danger-l-factor: 1.01;
   --ty-neutral-l-factor: 1;
 
   /* ----------------------------------------------------------------
@@ -276,16 +279,30 @@
    * black-text (Material treats amber the same way). Other flavors: 0. */
   --ty-primary-solid-l: 0;
   --ty-success-solid-l: 0;
-  --ty-warning-solid-l: 0.1;
+  --ty-warning-solid-l: 0;
   --ty-danger-solid-l: 0;
 }
 
-/* Dark mode overrides for the L-curve and saturation curve. Tier 1 + 2
- * seeds and Tier 5 L-factors carry through unchanged from :root. */
+/* Dark mode overrides for the L-curve and saturation curve, plus Tier 1
+ * (brand-hue/chroma), Tier 2 (per-flavor hue/chroma) and Tier 5 (l-factor)
+ * — dark ships its own distinct brand/semantic tuning here, not a
+ * carry-through of :root's light values. */
 html.dark,
 html[data-theme="dark"],
 [data-ty-theme].dark,
 [data-ty-theme][data-theme="dark"] {
+  --ty-solid-fg-threshold: 0.5 !important;
+  --ty-brand-hue: 233;
+  --ty-brand-chroma: 0.095;
+  --ty-success-hue: 129;
+  --ty-success-chroma: calc(var(--ty-brand-chroma) * 1.42);
+  --ty-success-l-factor: 1.09;
+  --ty-danger-hue: 13;
+  --ty-danger-chroma: calc(var(--ty-brand-chroma) * 1.96);
+  --ty-danger-l-factor: 1.06;
+  --ty-warning-hue: 82;
+  --ty-warning-chroma: calc(var(--ty-brand-chroma) * 3);
+  --ty-warning-l-factor: 1.5;
   /* Tier 3 dark — inverted curve. Higher L = lighter text = more
    * emphasis on a dark background. */
   --ty-l-strong: 0.72;
@@ -294,9 +311,11 @@ html[data-theme="dark"],
   --ty-l-soft: 0.46;
   --ty-l-faint: 0.3;
 
-  --ty-l-bg-base: 0.22;
-  --ty-l-bg-bold: 0.26;
-  --ty-l-bg-soft: 0.19;
+  /* BG TRACK dark — dark ink sits closer to its surface in L than
+   * light's does, so the tint needs a touch more alpha to be felt. */
+  --ty-a-bg-base: 13%;
+  --ty-a-bg-bold: 22%;
+  --ty-a-bg-soft: 7%;
 
   /* Text ladder + surface borders dark — L matched to the hexes
    * tyrell.css used to hardcode (#fff/#f9fafb/#d6d6d6/#7f8590/#555a63,
@@ -343,10 +362,6 @@ html[data-theme="dark"],
   --ty-c-soft-mult: 0.77;
   --ty-c-faint-mult: 0.5;
 
-  --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 are declared once at html:root.) */
@@ -416,6 +431,20 @@ html:root,
    * correct for ANY seed — light or dark. (Your exact pixel may
    * appear nowhere; pin --ty-solid-X etc. if you need it literally.)
    * --------------------------------------------------------------*/
+  /* BG TRACK — `--ty-bg-X` is the flavor's BASE ink at low alpha, real
+   * transparency, composited by the browser over whatever is actually
+   * underneath. Why this beats computing a tint lightness:
+   *
+   *   - The ink is MID-SCALE (L 0.38–0.88), where the gamut is widest
+   *     and `l-stop × l-factor` behaves — no near-white/near-black
+   *     endpoint math, no chroma clipping, no hue drift.
+   *   - Direction per mode is free: the same token darkens a light
+   *     surface and lightens a dark one, on ANY surface level (content,
+   *     elevated, floating), not just a nominal one.
+   *   - l-factor points rather than shoves: it moves the ink a little,
+   *     and only alpha × that movement reaches the tint.
+   *
+   * The wash amount is the --ty-a-bg-* dials (Tier 3 area). */
   --ty-primary-seed-resolved: var(
     --ty-primary-seed,
     oklch(0.5 var(--ty-brand-chroma) var(--ty-brand-hue))
@@ -464,19 +493,13 @@ html:root,
       calc(c * var(--ty-c-faint-mult)) h
   );
   --ty-bg-primary: oklch(
-    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
+    from var(--ty-color-primary) l c h / var(--ty-a-bg-base)
   );
   --ty-bg-primary-bold: oklch(
-    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
+    from var(--ty-color-primary) l c h / var(--ty-a-bg-bold)
   );
   --ty-bg-primary-soft: oklch(
-    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
+    from var(--ty-color-primary) l c h / var(--ty-a-bg-soft)
   );
   --ty-border-primary: var(--ty-color-primary-soft);
 
@@ -507,19 +530,13 @@ html:root,
       calc(c * var(--ty-c-faint-mult)) h
   );
   --ty-bg-success: oklch(
-    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
+    from var(--ty-color-success) l c h / var(--ty-a-bg-base)
   );
   --ty-bg-success-bold: oklch(
-    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
+    from var(--ty-color-success) l c h / var(--ty-a-bg-bold)
   );
   --ty-bg-success-soft: oklch(
-    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
+    from var(--ty-color-success) l c h / var(--ty-a-bg-soft)
   );
   --ty-border-success: var(--ty-color-success-soft);
 
@@ -550,19 +567,13 @@ html:root,
       calc(c * var(--ty-c-faint-mult)) h
   );
   --ty-bg-danger: oklch(
-    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
+    from var(--ty-color-danger) l c h / var(--ty-a-bg-base)
   );
   --ty-bg-danger-bold: oklch(
-    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
+    from var(--ty-color-danger) l c h / var(--ty-a-bg-bold)
   );
   --ty-bg-danger-soft: oklch(
-    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
+    from var(--ty-color-danger) l c h / var(--ty-a-bg-soft)
   );
   --ty-border-danger: var(--ty-color-danger-soft);
 
@@ -593,19 +604,13 @@ html:root,
       calc(c * var(--ty-c-faint-mult)) h
   );
   --ty-bg-warning: oklch(
-    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
+    from var(--ty-color-warning) l c h / var(--ty-a-bg-base)
   );
   --ty-bg-warning-bold: oklch(
-    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
+    from var(--ty-color-warning) l c h / var(--ty-a-bg-bold)
   );
   --ty-bg-warning-soft: oklch(
-    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
+    from var(--ty-color-warning) l c h / var(--ty-a-bg-soft)
   );
   --ty-border-warning: var(--ty-color-warning-soft);
 
@@ -636,19 +641,13 @@ html:root,
       calc(c * var(--ty-c-faint-mult)) h
   );
   --ty-bg-neutral: oklch(
-    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
+    from var(--ty-color-neutral) l c h / var(--ty-a-bg-base)
   );
   --ty-bg-neutral-bold: oklch(
-    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
+    from var(--ty-color-neutral) l c h / var(--ty-a-bg-bold)
   );
   --ty-bg-neutral-soft: oklch(
-    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
+    from var(--ty-color-neutral) l c h / var(--ty-a-bg-soft)
   );
   --ty-bg-neutral-strong: oklch(
     from var(--ty-neutral-seed-resolved) var(--ty-l-bg-neutral-strong)
@@ -823,9 +822,19 @@ html:root,
    * or set --ty-solid-fg-threshold: 1 to force white everywhere.
    * --------------------------------------------------------------*/
 
-  /* Crossover point. Fills lighter than this get black text. ~0.58-0.62
-     is the sRGB break-even; higher = prefers white, lower = prefers black. */
-  --ty-solid-fg-threshold: 0.62;
+  /* Crossover point. Fills lighter than this get black text; higher =
+     prefers white, lower = prefers black.
+
+     Measured in-browser at stock dials, not guessed: the L at which black
+     and white give EQUAL WCAG contrast is 0.553 (success) / 0.564 (neutral)
+     / 0.569 (warning) / 0.570 (primary) / 0.578 (danger) — a 0.025 spread,
+     so one global dial can serve every hue. Sweeping all 30 fills (15 ×
+     light/dark), the window where every fill gets the better of black/white
+     is (0.544, 0.588]; 0.57 sits ~mid-window. It previously read 0.62 —
+     above every flavor's break-even — which put white on `warning+` in both
+     modes: 4.23:1 light, 3.95:1 dark, each below AA and each the worse of
+     the two choices. Locked by test/solid-contrast.test.ts. */
+  --ty-solid-fg-threshold: 0.75;
 
   --ty-solid-primary-fg: oklch(
     from var(--ty-solid-primary)
@@ -1064,20 +1073,20 @@ html:root,
   inherits: true;
   initial-value: 0.88;
 }
-@property --ty-l-bg-base {
-  syntax: "<number>";
+@property --ty-a-bg-base {
+  syntax: "<percentage>";
   inherits: true;
-  initial-value: 0.96;
+  initial-value: 9%;
 }
-@property --ty-l-bg-bold {
-  syntax: "<number>";
+@property --ty-a-bg-bold {
+  syntax: "<percentage>";
   inherits: true;
-  initial-value: 0.92;
+  initial-value: 17%;
 }
-@property --ty-l-bg-soft {
-  syntax: "<number>";
+@property --ty-a-bg-soft {
+  syntax: "<percentage>";
   inherits: true;
-  initial-value: 0.98;
+  initial-value: 4%;
 }
 @property --ty-l-text-strong {
   syntax: "<number>";
@@ -1219,21 +1228,6 @@ html:root,
   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;
@@ -1346,7 +1340,7 @@ html:root,
 @property --ty-solid-fg-threshold {
   syntax: "<number>";
   inherits: true;
-  initial-value: 0.62;
+  initial-value: 0.75;
 }
 @property --ty-focus-ring-alpha {
   syntax: "<percentage>";
@@ -1388,7 +1382,7 @@ html:root,
       --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-faint, --ty-a-bg-base, --ty-a-bg-bold, --ty-a-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,
@@ -1398,7 +1392,6 @@ html:root,
       --ty-l-solid-neutral-strong, --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-primary-solid-l,
       --ty-success-solid-l, --ty-warning-solid-l, --ty-danger-solid-l,