@trading-game/design-intelligence-layer 1.0.2 → 1.0.4

package/src/styles.css

@@ -23,6 +23,7 @@
   --color-background-primary-canvas: var(--background-primary-canvas);
   --color-background-primary-surface: var(--background-primary-surface);
   --color-background-secondary-surface: var(--background-secondary-surface);
+  --color-background-disabled-default: var(--background-disabled-default);
   --color-background-hover-default: var(--background-hover-default);
   --color-background-pressed-default: var(--background-pressed-default);
   --color-background-brand-default: var(--background-brand-default);
@@ -53,6 +54,8 @@
   --color-border-default-default: var(--border-default-default);
   --color-border-prominent-default: var(--border-prominent-default);
   --color-border-neutral-default: var(--border-neutral-default);
+  --color-border-control-default: var(--border-control-default);
+  --color-border-disabled-default: var(--border-disabled-default);
   --color-border-success-default: var(--border-success-default);
   --color-border-error-default: var(--border-error-default);
   --color-border-warning-default: var(--border-warning-default);
@@ -62,7 +65,10 @@
   --color-text-disabled-default: var(--text-disabled-default);
   --color-text-prominent-inverse: var(--text-prominent-inverse);
   --color-text-subtle-inverse: var(--text-subtle-inverse);
+  --color-text-disabled-inverse: var(--text-disabled-inverse);
   --color-text-on-brand-static: var(--text-on-brand-static);
+  --color-text-on-brand-subtle-static: var(--text-on-brand-subtle-static);
+  --color-text-on-brand-disabled-default: var(--text-on-brand-disabled-default);
   --color-text-brand-container-static: var(--text-brand-container-static);
   --color-text-success-default: var(--text-success-default);
   --color-text-error-default: var(--text-error-default);
@@ -75,6 +81,7 @@
   --color-icon-error-default: var(--icon-error-default);
   --color-icon-warning-default: var(--icon-warning-default);
   --color-icon-information-default: var(--icon-information-default);
+  --color-icon-on-brand-static: var(--icon-on-brand-static);
   --color-ring-focus-default: var(--ring-focus-default);
   --color-ring-focus-strong: var(--ring-focus-strong);
   --color-ring-focus-soft: var(--ring-focus-soft);
@@ -538,6 +545,15 @@
   --background-primary-canvas: var(--primitive-blue-25);
   --background-primary-surface: var(--primitive-mono-50);
   --background-secondary-surface: var(--primitive-mono-100);
+  /* The disabled glaze — an alpha layer laid OVER whatever fill the control
+     already has, so every variant keeps its own identity while draining.
+     Consume it on background-image, never background-color, or it replaces
+     the fill instead of washing it.
+     Polarity is the inverse of hover: hover advances (black in light, white
+     in dark), disabled recedes (white in light, black in dark). The strengths
+     differ because the ground does — white moves fast against a near-white
+     page, black moves slowly against a near-black canvas. */
+  --background-disabled-default: var(--primitive-white-alpha-24);
   --background-hover-default: var(--primitive-black-alpha-4);
   --background-pressed-default: var(--primitive-black-alpha-8);
   --background-brand-default: var(--primitive-blue-600);
@@ -623,6 +639,17 @@
   /* Border */
   --border-default-default: var(--primitive-mono-200);
   --border-prominent-default: var(--primitive-mono-1100);
+  /* The outline edge on a bordered control. One step firmer than the
+     shared hairline, because a control's edge has to hold its own label:
+     Button secondary's fill barely separates from the canvas (1.06:1), so
+     the border does the containing. Deliberately NOT border-default-default
+     (that hairline is shared with Card, Input, Table, Chip) and NOT
+     border-neutral-default (Steps connectors own that). */
+  --border-control-default: var(--primitive-mono-400);
+  /* A disabled control keeps its edge so the shape still reads, one step
+     quieter than the enabled hairline. The glaze washes the fill; the border
+     is a separate colour, so it needs its own rung. */
+  --border-disabled-default: var(--primitive-mono-300);
 
   /* Status borders — solid status-600 outline, same in both themes */
   --border-neutral-default: var(--primitive-mono-500);
@@ -634,13 +661,30 @@
 
   /* Text */
   --text-prominent-default: var(--primitive-mono-1100);
-  --text-subtle-default: var(--primitive-mono-900);
-  --text-disabled-default: var(--primitive-mono-500);
+  /* One step lighter than mono-900 so the drop off prominent widens from
+     2.3x to 3.5x. Clears AA on surface (4.9:1) and canvas (4.6:1); 4.3:1 on
+     secondary-surface is a marginal miss, accepted because mono-900 collapses
+     the drop back. Dark keeps its own value — this is not a mirrored pair. */
+  --text-subtle-default: var(--primitive-mono-800);
+  --text-disabled-default: var(--primitive-mono-400);
+  /* Inverse is not its own palette — it is the *opposite theme's* page ladder,
+     because that is literally what the inverse surface is. So these three
+     mirror prominent/subtle/disabled from the other side: light inverse ==
+     dark page (mono 50 · 600 · 900), dark inverse == light page. Replaces the
+     old color-mix for subtle, which landed on #CDCDCD — not a ramp step, and
+     brighter than the dark page's own subtle. */
   --text-prominent-inverse: var(--primitive-mono-50);
-  --text-subtle-inverse: color-mix(in srgb, var(--text-prominent-inverse) 78%, var(--background-inverse-surface));
-  /* supporting copy on the inverse surface (Toast description) — a real
-     mixed ink, not an opacity hack; the ingredients flip per theme. */
+  --text-subtle-inverse: var(--primitive-mono-600);
+  --text-disabled-inverse: var(--primitive-mono-900);
   --text-on-brand-static: var(--primitive-mono-50);
+  /* On a brand fill the ladder inverts: it descends from white through the
+     alpha rungs rather than climbing the mono ramp. Static, like the rest of
+     the on-brand family — the fill is a fixed colour. */
+  --text-on-brand-subtle-static: var(--primitive-white-alpha-64);
+  /* Disabled on brand is NOT static: the fill flips blue-600 → blue-400, and
+     blue-400 caps white at 4.3:1, so the rung has to come down with it.
+     32 over blue-600 = 1.8:1, 24 over blue-400 = 1.5:1 — matched perception. */
+  --text-on-brand-disabled-default: var(--primitive-white-alpha-32);
   --text-brand-container-static: var(--primitive-blue-600);
   --text-success-default: var(--primitive-green-600);
   --text-error-default: var(--primitive-red-600);
@@ -656,6 +700,9 @@
   --icon-error-default: var(--text-error-default);
   --icon-warning-default: var(--text-warning-default);
   --icon-information-default: var(--text-information-default);
+  /* The namespace's on-brand member — an icon on a brand fill had no token,
+     so components reached for text-on-brand-static or a raw alpha primitive. */
+  --icon-on-brand-static: var(--text-on-brand-static);
 
   /* Ring */
   --ring-focus-default: var(--primitive-blue-600);
@@ -765,6 +812,7 @@
   --background-primary-canvas: var(--primitive-blue-1000);
   --background-primary-surface: color-mix(in srgb, white 6%, var(--primitive-blue-1000));
   --background-secondary-surface: color-mix(in srgb, white 12%, var(--primitive-blue-1000));
+  --background-disabled-default: var(--primitive-black-alpha-50);
   /* solid #1F1F3A — one glaze step above the card (6%) */
   /* solid #0F0F2C — base + white glaze, flattened */
   --background-hover-default: var(--primitive-white-alpha-12);
@@ -784,13 +832,21 @@
   /* Border */
   --border-default-default: var(--primitive-white-alpha-12);
   --border-prominent-default: var(--primitive-mono-50);
+  /* Matched to light's perceived weight: 1.83:1 here vs 1.71:1 there. */
+  --border-control-default: var(--primitive-white-alpha-20);
+  --border-disabled-default: var(--primitive-white-alpha-8);
   --border-neutral-default: var(--primitive-white-alpha-24);
 
   /* Text */
   --text-prominent-default: var(--primitive-mono-50);
   --text-subtle-default: var(--primitive-mono-600);
-  --text-disabled-default: var(--primitive-mono-800);
+  --text-disabled-default: var(--primitive-mono-900);
+  --text-on-brand-disabled-default: var(--primitive-white-alpha-24);
+  /* Inverse mirrors the light page ladder here — see the note in the light
+     block. mono 1100 · 800 · 400, same values light's PAGE row carries. */
   --text-prominent-inverse: var(--primitive-mono-1100);
+  --text-subtle-inverse: var(--primitive-mono-800);
+  --text-disabled-inverse: var(--primitive-mono-400);
   /* status + on-brand + brand-container are static — no overrides */
 
   /* Ring */
@@ -1019,6 +1075,22 @@
   --input-otp-font-size: var(--primitive-font-size-20);
   --input-otp-font-weight: var(--primitive-font-weight-semibold);
   --input-otp-line-height: var(--primitive-line-height-28);
+
+  /* ── Result Snackbar — component type tokens (private) ──
+     The figure is the whole point of the surface, so the amount keeps the
+     Refined spec's bold 700 — the one sanctioned exception to the semibold
+     ceiling, documented on the Typography foundation page. Sizes are the
+     named steps (18 / 14 / 12); the shipped Rise/Fall values were 17/13/11
+     and sat off the scale. */
+  --result-snackbar-amount-font-size: var(--primitive-font-size-18);
+  --result-snackbar-amount-font-weight: var(--primitive-font-weight-bold);
+  --result-snackbar-amount-line-height: var(--primitive-line-height-24);
+  --result-snackbar-currency-font-size: var(--primitive-font-size-14);
+  --result-snackbar-currency-font-weight: var(--primitive-font-weight-semibold);
+  --result-snackbar-currency-line-height: var(--primitive-line-height-20);
+  --result-snackbar-terms-font-size: var(--primitive-font-size-12);
+  --result-snackbar-terms-font-weight: var(--primitive-font-weight-semibold);
+  --result-snackbar-terms-line-height: var(--primitive-line-height-16);
   /* ── Native Select — component type tokens (private) ──
      Same ladder as Input (12/14/16, regular). */
   --native-select-font-size-sm: var(--primitive-font-size-12);
@@ -1676,6 +1748,25 @@
   font-weight: var(--input-otp-font-weight);
 }
 
+.type-result-snackbar-amount {
+  font-size: var(--result-snackbar-amount-font-size);
+  line-height: var(--result-snackbar-amount-line-height);
+  font-weight: var(--result-snackbar-amount-font-weight);
+  font-variant-numeric: tabular-nums;
+}
+
+.type-result-snackbar-currency {
+  font-size: var(--result-snackbar-currency-font-size);
+  line-height: var(--result-snackbar-currency-line-height);
+  font-weight: var(--result-snackbar-currency-font-weight);
+}
+
+.type-result-snackbar-terms {
+  font-size: var(--result-snackbar-terms-font-size);
+  line-height: var(--result-snackbar-terms-line-height);
+  font-weight: var(--result-snackbar-terms-font-weight);
+}
+
 .type-native-select-sm {
   font-size: var(--native-select-font-size-sm);
   line-height: var(--native-select-line-height-sm);
@@ -2079,4 +2170,49 @@
 }
 @media (prefers-reduced-motion: reduce) {
   [data-results-motion] { animation: none !important; }
-}
+}
+
+/* Result Snackbar — enters from beyond its own height with a slight
+   overshoot, and reverses to leave. Reduced motion swaps both for a fade
+   (handled in the component, so the card never travels). */
+@keyframes result-snackbar-in-top {
+  from { transform: translateY(-130%); }
+  60%  { transform: translateY(6%); }
+  to   { transform: translateY(0); }
+}
+@keyframes result-snackbar-out-top {
+  from { transform: translateY(0); }
+  to   { transform: translateY(-130%); }
+}
+@keyframes result-snackbar-in-bottom {
+  from { transform: translateY(130%); }
+  60%  { transform: translateY(-6%); }
+  to   { transform: translateY(0); }
+}
+@keyframes result-snackbar-out-bottom {
+  from { transform: translateY(0); }
+  to   { transform: translateY(130%); }
+}
+/* The illustration pops in after the card lands, untwisting in the
+   direction of its outcome. */
+@keyframes result-snackbar-icon-win {
+  from { transform: scale(0) rotate(-18deg); }
+  60%  { transform: scale(1.18) rotate(4deg); }
+  to   { transform: scale(1) rotate(0); }
+}
+@keyframes result-snackbar-icon-loss {
+  from { transform: scale(0) rotate(18deg); }
+  60%  { transform: scale(1.18) rotate(-4deg); }
+  to   { transform: scale(1) rotate(0); }
+}
+/* Drain — the dwell made legible, so the dismissal reads as a timer
+   expiring rather than the message being lost. */
+@keyframes result-snackbar-drain {
+  from { transform: scaleX(1); }
+  to   { transform: scaleX(0); }
+}
+/* Reduced motion: the card fades instead of travelling. */
+@keyframes result-snackbar-fade {
+  from { opacity: 0; }
+  to   { opacity: 1; }
+}