tyrell-components 1.0.0-TC41 → 1.0.0-TC42

package/dist/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;
@@ -608,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;
@@ -763,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 */