tyrell-components 1.0.0-TC40 → 1.0.0-TC42

package/css/tyrell-theme.css

@@ -108,7 +108,6 @@
    * Bump to ~0.005 (light) / ~0.012 (dark) to warm surfaces toward brand. */
   --ty-surface-chroma: 0;
 
-
   /* ----------------------------------------------------------------
    * Tier 2 — PER-FLAVOR ANCHORS
    * Semantic colors (success/warning/danger/neutral) have their own
@@ -118,7 +117,6 @@
    *   --ty-warning-chroma: 0.2;  (more vivid)
    * --------------------------------------------------------------*/
 
-
   --ty-success-hue: 145;
   --ty-success-chroma: calc(var(--ty-brand-chroma) * 1.08);
 
@@ -192,6 +190,11 @@
   --ty-l-surface-input: 1;
 
   --ty-l-solid-neutral: 0.4; /* the neutral "ink" fill — dark in BOTH modes */
+  /* neutral+ is FULL-CONTRAST ink — near-black on light, near-white on dark
+     (mode block below) — not "anchor + shared offset" like other tones: the
+     max-emphasis monochrome button is an absolute, not a nudge. Matches the
+     static tyrell.css light value (#000) that predates this dial. */
+  --ty-l-solid-neutral-strong: 0.15;
   --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;
@@ -264,6 +267,17 @@
   --ty-solid-l: 0; /* lightness offset — negative dims */
   --ty-solid-c: 1; /* chroma multiplier — <1 desaturates */
   --ty-solid-h: 0; /* hue offset (deg) */
+
+  /* Axis C — per-flavor solid anchor lift (added to the base fill's L,
+   * tones/hover/active then derive from the lifted anchor). The solid
+   * ladder's "darker = stronger" is FALSE for the yellow family: darkened
+   * hue-75 is brown, so warning's whole ladder shifts UP instead — soft
+   * 0.82 pale amber, base 0.72 vivid orange, strong 0.66 deep orange, all
+   * 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-danger-solid-l: 0;
 }
 
 /* Dark mode overrides for the L-curve and saturation curve. Tier 1 + 2
@@ -310,7 +324,8 @@ html[data-theme="dark"],
   --ty-l-surface-floating: 0.22;
   --ty-l-surface-input: 0.18;
 
-  --ty-l-solid-neutral: 0.23;
+  --ty-l-solid-neutral: 0.18;
+  --ty-l-solid-neutral-strong: 0.88; /* inverted ink: white button, black text */
   --ty-l-bg-neutral-strong: 0.95;
   --ty-l-bg-neutral-faint: 0.15;
   --ty-c-bg-neutral-faint-mult: 2;
@@ -335,14 +350,21 @@ 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 are declared once at html:root.) */
-  --ty-solid-hover-l: 0.04; /* :hover */
-  --ty-solid-active-l: 0.08; /* :active */
+  /* Bigger than light mode's 0.04/0.08: small L deltas at the dark end of
+   * an emissive screen read much weaker than the same delta mid-scale, so
+   * dark hover needs more push to be felt at all. */
+  --ty-solid-hover-l: 0.07; /* :hover */
+  --ty-solid-active-l: 0.11; /* :active */
   --ty-solid-strong-l: 0.06; /* tone+ */
   --ty-solid-soft-l: -0.1; /* tone- */
 
   --ty-solid-l: -0.2; /* dim against dark canvas */
   --ty-solid-c: 0.7; /* desaturate against dark canvas */
   --ty-solid-h: 0; /* hue offset */
+
+  /* Axis C — dark warning fills are already dim enough not to brown out
+   * (and browns read intentional on dark); no lift needed. */
+  --ty-warning-solid-l: 0;
 }
 
 /* =====================================================================
@@ -756,19 +778,23 @@ 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))
+    from var(--ty-color-primary)
+      calc(l + var(--ty-solid-l) + var(--ty-primary-solid-l, 0))
       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))
+    from var(--ty-color-success)
+      calc(l + var(--ty-solid-l) + var(--ty-success-solid-l, 0))
       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))
+    from var(--ty-color-danger)
+      calc(l + var(--ty-solid-l) + var(--ty-danger-solid-l, 0))
       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))
+    from var(--ty-color-warning)
+      calc(l + var(--ty-solid-l) + var(--ty-warning-solid-l, 0))
       calc(c * var(--ty-solid-c)) calc(h + var(--ty-solid-h))
   );
   /* neutral is a deliberate dark grey fill, not the neutral text color */
@@ -814,7 +840,6 @@ html:root,
       clamp(0, (var(--ty-solid-fg-threshold) - l) * 1000, 1) 0 0
   );
 
-
   --ty-solid-success-fg: oklch(
     from var(--ty-solid-success)
       clamp(0, (var(--ty-solid-fg-threshold) - l) * 1000, 1) 0 0
@@ -881,7 +906,6 @@ html:root,
     from var(--ty-solid-primary) 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
   );
@@ -927,15 +951,17 @@ html:root,
   --ty-solid-neutral-active: oklch(
     from var(--ty-solid-neutral) calc(l + var(--ty-solid-active-l)) c h
   );
+  /* neutral+ reads its own absolute L dial, not anchor + shared offset —
+     it's the full-contrast ink endpoint (see --ty-l-solid-neutral-strong). */
   --ty-solid-neutral-strong: oklch(
-    from var(--ty-solid-neutral) calc(l + var(--ty-solid-strong-l)) c h
+    from var(--ty-neutral-seed-resolved) var(--ty-l-solid-neutral-strong)
+      calc(c * var(--ty-c-strong-mult)) h
   );
   --ty-solid-neutral-soft: oklch(
     from var(--ty-solid-neutral) calc(l + var(--ty-solid-soft-l)) c h
   );
 }
 
-
 /* =====================================================================
  * SECTION 3 — THEME TRANSITIONS
  * =====================================================================
@@ -1148,6 +1174,11 @@ html:root,
   inherits: true;
   initial-value: 0.4;
 }
+@property --ty-l-solid-neutral-strong {
+  syntax: "<number>";
+  inherits: true;
+  initial-value: 0.15;
+}
 @property --ty-l-bg-neutral-strong {
   syntax: "<number>";
   inherits: true;
@@ -1228,6 +1259,55 @@ html:root,
   inherits: true;
   initial-value: 1;
 }
+/* Typography + button-depth dials (defined in tyrell.css, mode-flipped
+   there). Registered here so they interpolate on theme switch: with a
+   variable font, text weight crossfades along with the colors, and the
+   solid-button depth chrome (border offset) glides rather than snaps. */
+@property --ty-weight-action {
+  syntax: "<number>";
+  inherits: true;
+  initial-value: 510;
+}
+@property --ty-weight-label {
+  syntax: "<number>";
+  inherits: true;
+  initial-value: 440;
+}
+@property --ty-button-depth {
+  syntax: "<number>";
+  inherits: true;
+  initial-value: 0.35;
+}
+@property --ty-button-border-l {
+  syntax: "<number>";
+  inherits: true;
+  initial-value: -0.08;
+}
+@property --ty-button-border-l-neutral {
+  syntax: "<number>";
+  inherits: true;
+  initial-value: -0.25;
+}
+@property --ty-primary-solid-l {
+  syntax: "<number>";
+  inherits: true;
+  initial-value: 0;
+}
+@property --ty-success-solid-l {
+  syntax: "<number>";
+  inherits: true;
+  initial-value: 0;
+}
+@property --ty-warning-solid-l {
+  syntax: "<number>";
+  inherits: true;
+  initial-value: 0.1;
+}
+@property --ty-danger-solid-l {
+  syntax: "<number>";
+  inherits: true;
+  initial-value: 0;
+}
 @property --ty-solid-hover-l {
   syntax: "<number>";
   inherits: true;
@@ -1304,69 +1384,29 @@ html:root,
   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;
+      --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-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,
+      --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, --ty-weight-action,
+      --ty-weight-label, --ty-button-depth, --ty-button-border-l,
+      --ty-button-border-l-neutral;
     transition-duration: var(--ty-theme-transition, 0.45s);
     transition-timing-function: ease;
   }
@@ -1393,7 +1433,20 @@ html:root,
  *              parseFloat(getComputedStyle(root)
  *                .getPropertyValue('--ty-theme-transition')) * 1000 || 450);
  *
- * Purely additive — nothing here runs unless you add the class yourself. */
+ * Two mechanisms, because Shadow DOM blocks the first from reaching the
+ * second: the `*` rule below only matches LIGHT-DOM elements (your own
+ * markup, Tailwind-transitioned nav items, etc.) — it cannot reach inside
+ * any ty-* component's shadow root, style encapsulation blocks a document
+ * stylesheet's universal selector from crossing that boundary. Every ty-*
+ * component's OWN local transition is instead wired to the inheriting
+ * custom property `--ty-local-transition` (unset by default; components
+ * fall back to their normal value) — custom properties DO inherit through
+ * shadow boundaries, so setting it once here reaches every component's
+ * internal styles for free. Purely additive — nothing here runs unless you
+ * add the class yourself. */
+.ty-theme-switching {
+  --ty-local-transition: none;
+}
 .ty-theme-switching *,
 .ty-theme-switching *::before,
 .ty-theme-switching *::after {

package/css/tyrell.css

@@ -499,6 +499,39 @@ DESIGN SYSTEM TOKENS
   --ty-font-bold: 680;
   --ty-font-extrabold: 800;
 
+  /* Semantic weight dials — MODE-FLIPPED (see the html.dark block).
+     Light text on dark surfaces optically blooms (halation), so dark mode
+     wants genuinely lighter weights than light mode; a single fixed weight
+     can't be right in both. Components consume these instead of the raw
+     scale above:
+       --ty-weight-action  buttons, interactive chrome
+       --ty-weight-label   tags, chips, badges
+     Theme these like any other token — per :root, html.dark, a named theme
+     pack, or one element. The theme layer registers them as typed numbers,
+     so with a variable font, weight crossfades during theme transitions
+     along with the colors. */
+  --ty-weight-action: var(--ty-font-medium);
+  --ty-weight-label: 440;
+
+  /* Solid-button depth chrome (consumed in button.ts):
+       --ty-button-depth     master intensity 0–1. 0 = pixel-flat (the old
+                             look), 1 = full tactile gloss. Scales the
+                             derived border offset, top sheen and drop
+                             shadow together. Themable per mode / theme
+                             pack / element like any other dial.
+       --ty-button-border-l  L-offset of the fill-derived 1px border,
+                             mode-flipped below: dark mode needs a LIGHTER-
+                             than-fill hairline (solids wash out against
+                             dark surfaces without a lit edge), light mode
+                             a slightly darker one. */
+  --ty-button-depth: 0.35;
+  --ty-button-border-l: -0.08;
+  /* Neutral (ink) gets its own, stronger edge: it has no hue separating it
+     from the canvas, so the same offset that reads fine on colored fills
+     nearly vanishes on it — especially in dark mode, where the ink fill
+     sits close to the page. */
+  --ty-button-border-l-neutral: -0.25;
+
   --ty-line-height-none: 1;
   --ty-line-height-tight: 1.25;
   --ty-line-height-snug: 1.375;
@@ -506,14 +539,19 @@ DESIGN SYSTEM TOKENS
   --ty-line-height-relaxed: 1.625;
   --ty-line-height-loose: 2;
 
-  /* Transitions */
+  /* Transitions. Each routes through --ty-local-transition first — unset by
+     default (falls through to the real value below), but the theme engine's
+     .ty-theme-switching sets it to `none` for the duration of a theme swap,
+     so components using these tokens don't run their own hover/focus
+     transition at the same time as the coordinated theme crossfade. See
+     tyrell-theme.css SECTION 3 — THEME TRANSITIONS. */
   --ty-transition-none: none;
-  --ty-transition-all: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
-  --ty-transition-colors:
+  --ty-transition-all: var(--ty-local-transition, all 150ms cubic-bezier(0.4, 0, 0.2, 1));
+  --ty-transition-colors: var(--ty-local-transition,
     bg-color, border-color, color, fill,
-    stroke 150ms cubic-bezier(0.4, 0, 0.2, 1);
-  --ty-transition-shadow: box-shadow 150ms cubic-bezier(0.4, 0, 0.2, 1);
-  --ty-transition-transform: transform 150ms cubic-bezier(0.4, 0, 0.2, 1);
+    stroke 150ms cubic-bezier(0.4, 0, 0.2, 1));
+  --ty-transition-shadow: var(--ty-local-transition, box-shadow 150ms cubic-bezier(0.4, 0, 0.2, 1));
+  --ty-transition-transform: var(--ty-local-transition, transform 150ms cubic-bezier(0.4, 0, 0.2, 1));
 
   /* Component Sizes — single source of truth for FIELD heights.
      Fields (ty-input, ty-select, ty-date-picker) come in exactly three
@@ -603,6 +641,21 @@ html[data-theme="dark"] {
 Emphasis logic inverts: lighter = more emphasis
 ================================================================= */
 
+  /* Weight dials flip with the mode — light-on-dark text blooms, so dark
+     mode runs genuinely lighter. See the :root definitions. */
+  --ty-weight-action: var(--ty-font-normal);
+  --ty-weight-label: var(--ty-font-normal);
+
+  /* Colored solid buttons: no border in dark mode — border color equals
+     the fill exactly, so it's geometrically present (depth 0 keeps
+     geometry stable) but invisible. Neutral keeps its own separate,
+     stronger dial (below) since its dark ink fill needs the lit edge to
+     read as a shape at all against a near-black canvas; colored fills
+     don't have that problem (their own hue/saturation already separates
+     them from the page), so no border reads as cleaner. */
+  --ty-button-border-l: 0;
+  --ty-button-border-l-neutral: 0.5;
+
   /* Primary */
   --ty-color-primary-strong: #9cbde5;
   --ty-color-primary-bold: #6c9bd5;
@@ -758,12 +811,17 @@ Emphasis logic inverts: lighter = more emphasis
   --ty-solid-warning-soft-fg: white;
 
   --ty-solid-neutral: #414141;
-  --ty-solid-neutral-strong: #4c4c4c;
+  /* neutral+ = inverted ink (white button, black text) — the dark-mode
+     mirror of light's #000. Max-emphasis monochrome CTA (Geist-style).
+     hover/active are pinned to the OLD strong literal, not the alias:
+     aliasing var(--ty-solid-neutral-strong) would flash the BASE button
+     white on hover. */
+  --ty-solid-neutral-strong: #f5f5f5;
   --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-hover: #4c4c4c;
+  --ty-solid-neutral-active: #4c4c4c;
   --ty-solid-neutral-fg: white;
-  --ty-solid-neutral-strong-fg: white;
+  --ty-solid-neutral-strong-fg: black;
   --ty-solid-neutral-soft-fg: white;
 
   /* Input component tokens - dark mode */