@trading-game/design-intelligence-layer 0.8.5 → 0.8.8

package/src/styles.css

@@ -12,7 +12,6 @@
 /* Fonts — Plus Jakarta Sans (all) */
 @import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap");
 
-@custom-variant dark (&:is(.dark *));
 
 /* ── Tailwind theme bridge — maps CSS vars to utility classes ── */
 @theme inline {
@@ -56,6 +55,8 @@
   --color-overlay: var(--overlay);
   --color-slider-range: var(--slider-range);
   --color-semantic-info: var(--semantic-info);
+  --color-tabs: var(--tabs);
+  --color-tabs-active: var(--tabs-active);
   --spacing-layout-gutter: var(--semantic-layout-gutter);
   --spacing-layout-margin-inline: var(--semantic-layout-margin-inline);
   --max-width-layout-diagram-default: var(--semantic-layout-diagram-max-default);
@@ -70,6 +71,18 @@
   --radius-2xl: calc(var(--radius) + 8px);
   --radius-3xl: calc(var(--radius) + 12px);
   --radius-4xl: calc(var(--radius) + 16px);
+  /* ── Transitions — duration ── */
+  --duration-instant: var(--primitive-duration-instant);
+  --duration-fast: var(--primitive-duration-fast);
+  --duration-base: var(--primitive-duration-base);
+  --duration-slow: var(--primitive-duration-slow);
+  --duration-open: var(--primitive-duration-open);
+  --duration-blink: var(--primitive-duration-blink);
+  /* ── Transitions — easing ── */
+  --ease-standard: var(--primitive-ease-standard);
+  --ease-enter: var(--primitive-ease-enter);
+  --ease-exit: var(--primitive-ease-exit);
+  --ease-linear: var(--primitive-ease-linear);
 }
 
 /* ══════════════════════════════════════════════════════════════
@@ -154,8 +167,55 @@
   --primitive-violet-500: oklch(0.601 0.263 301.6);
   /* #A040FF */
 
+  /* ── Mono alpha scale ── */
+  --primitive-mono-alpha-4:  oklch(0 0 0 / 4%);
+  --primitive-mono-alpha-8:  oklch(0 0 0 / 8%);
+  --primitive-mono-alpha-16: oklch(0 0 0 / 16%);
+  --primitive-mono-alpha-24: oklch(0 0 0 / 24%);
+  --primitive-mono-alpha-32: oklch(0 0 0 / 32%);
+  --primitive-mono-alpha-40: oklch(0 0 0 / 40%);
+  --primitive-mono-alpha-50: oklch(0 0 0 / 50%);
+  --primitive-mono-alpha-64: oklch(0 0 0 / 64%);
+  --primitive-mono-alpha-80: oklch(0 0 0 / 80%);
+
+  /* ── Blue alpha scale ── */
+  --primitive-blue-alpha-4:  oklch(0.476 0.297 267.4 / 4%);
+  --primitive-blue-alpha-8:  oklch(0.476 0.297 267.4 / 8%);
+  --primitive-blue-alpha-16: oklch(0.476 0.297 267.4 / 16%);
+  --primitive-blue-alpha-24: oklch(0.476 0.297 267.4 / 24%);
+  --primitive-blue-alpha-32: oklch(0.476 0.297 267.4 / 32%);
+  --primitive-blue-alpha-40: oklch(0.476 0.297 267.4 / 40%);
+  --primitive-blue-alpha-50: oklch(0.476 0.297 267.4 / 50%);
+  --primitive-blue-alpha-64: oklch(0.476 0.297 267.4 / 64%);
+  --primitive-blue-alpha-80: oklch(0.476 0.297 267.4 / 80%);
+
   /* ── Overlay ── */
-  --primitive-black-50: oklch(0 0 0 / 50%);
+  --primitive-black-50: var(--primitive-mono-alpha-50);
+  /* @deprecated — use --primitive-mono-alpha-50 */
+
+  /* ── Transitions — Duration scale ── */
+  --primitive-duration-instant:  50ms;
+  /* snap: focus rings, hover colour tints */
+  --primitive-duration-fast:    100ms;
+  /* micro: buttons, badges, inputs, checkboxes */
+  --primitive-duration-base:    200ms;
+  /* surface: dropdowns, tooltips, popovers, accordions */
+  --primitive-duration-slow:    300ms;
+  /* overlay close: sheets, drawers, dialogs closing */
+  --primitive-duration-open:    500ms;
+  /* overlay open: sheets, drawers entering */
+  --primitive-duration-blink:  1000ms;
+  /* special: OTP caret blink animation */
+
+  /* ── Transitions — Easing scale ── */
+  --primitive-ease-standard:  cubic-bezier(0.2, 0, 0, 1);
+  /* general UI — most interactive elements */
+  --primitive-ease-enter:     cubic-bezier(0, 0, 0.2, 1);
+  /* decelerates — elements entering the screen */
+  --primitive-ease-exit:      cubic-bezier(0.4, 0, 1, 1);
+  /* accelerates — elements leaving the screen */
+  --primitive-ease-linear:    linear;
+  /* constant speed — sidebar width, progress bar */
 
   /* ── Layout — Standard responsive grid (gutter / margin) ── */
   --primitive-layout-gutter-none: 0px;
@@ -197,9 +257,33 @@
   --semantic-info: var(--primitive-sky-600);
   --semantic-error: var(--primitive-red-600);
   --semantic-warning: var(--primitive-orange-500);
+  --tabs: var(--primitive-mono-alpha-4);
+  --tabs-active: var(--primitive-mono-50);
   --semantic-layout-diagram-max-default: var(--primitive-layout-diagram-max-default);
   --semantic-layout-diagram-max-small: var(--primitive-layout-diagram-max-small);
   --semantic-layout-diagram-max-medium: var(--primitive-layout-diagram-max-medium);
+
+  /* ── Transitions — Semantic duration ── */
+  --transition-duration-interactive: var(--primitive-duration-fast);
+  /* buttons, inputs, badges, checkboxes, toggles, tabs hover */
+  --transition-duration-surface:     var(--primitive-duration-base);
+  /* dropdowns, popovers, tooltips, accordions, navigation menus */
+  --transition-duration-overlay-close: var(--primitive-duration-slow);
+  /* dialogs, sheets, drawers, alert-dialogs closing */
+  --transition-duration-overlay-open:  var(--primitive-duration-open);
+  /* sheets, drawers entering */
+  --transition-duration-structural:  var(--primitive-duration-base);
+  /* sidebar collapse, progress fill, layout changes */
+
+  /* ── Transitions — Semantic easing ── */
+  --transition-ease-interactive: var(--primitive-ease-standard);
+  /* buttons, inputs — bidirectional state changes */
+  --transition-ease-enter:       var(--primitive-ease-enter);
+  /* overlays / surfaces entering */
+  --transition-ease-exit:        var(--primitive-ease-exit);
+  /* overlays / surfaces leaving */
+  --transition-ease-structural:  var(--primitive-ease-linear);
+  /* sidebar, progress — constant-speed structural changes */
 }
 
 /* ══════════════════════════════════════════════════════════════
@@ -260,46 +344,6 @@
   --sidebar-ring: var(--ring);
 }
 
-/* ══════════════════════════════════════════════════════════════
-   DARK THEME — mirrors light for now
-   TODO: replace with proper dark values when new branding is ready
-   ══════════════════════════════════════════════════════════════ */
-.dark {
-  --background: var(--primitive-mono-50);
-  --on-prominent: var(--primitive-mono-1000);
-  --on-prominent-static-inverse: var(--primitive-mono-50);
-  --primary: var(--primitive-blue-500);
-  --primary-hover: oklch(0.403 0.251 267.5);
-  --subtle: oklch(0.96 0 0);
-  --on-subtle: oklch(0.52 0 0);
-  --on-muted: oklch(0.38 0 0);
-  --border-subtle: oklch(0.92 0 0);
-  --border: var(--border-subtle);
-  /* @deprecated alias — use --border-subtle or --border-prominent */
-  --border-prominent: var(--primitive-mono-1000);
-  /* #000000 */
-  --secondary-hover: var(--primitive-mono-100);
-  /* #EEEEEE */
-  --ring: var(--primitive-blue-500);
-  --overlay: var(--primitive-black-50);
-  --semantic-win: var(--primitive-green-400);
-  --semantic-loss: var(--primitive-red-500);
-  --semantic-warning: var(--primitive-orange-500);
-  --card: var(--primitive-mono-50);
-  --card-foreground: oklch(0.07 0.012 165);
-  --popover: var(--primitive-mono-50);
-  --popover-foreground: oklch(0.07 0.012 165);
-  --input: var(--border-subtle);
-  --sidebar: var(--primitive-mono-50);
-  --sidebar-foreground: oklch(0.07 0.012 165);
-  --sidebar-primary: var(--primary);
-  --sidebar-primary-foreground: var(--primitive-mono-50);
-  --sidebar-accent: oklch(0.96 0 0);
-  --sidebar-accent-foreground: oklch(0.12 0.015 160);
-  --sidebar-border: oklch(0.92 0 0);
-  --sidebar-ring: var(--ring);
-}
-
 @layer base {
   * {
     border-color: var(--color-border-subtle);