@trading-game/design-intelligence-layer 0.8.5

package/src/styles.css

@@ -0,0 +1,398 @@
+/*
+ * Trading Game Design System — Design Tokens
+ *
+ * Usage in consumer apps:
+ *   import "@trading-game/design-intelligence-layer/styles"
+ *
+ * Requires Tailwind CSS v4 in your project.
+ * Add `@import "@trading-game/design-intelligence-layer/styles"` in your CSS
+ * or import it in your JS entry point.
+ */
+
+/* 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 {
+  --color-background: var(--background);
+  --color-on-prominent: var(--on-prominent);
+  --color-on-prominent-static-inverse: var(--on-prominent-static-inverse);
+  --font-sans: var(--font-plus-jakarta-sans);
+  --font-body: var(--font-plus-jakarta-sans);
+  --font-display: var(--font-plus-jakarta-sans);
+  --color-sidebar-ring: var(--sidebar-ring);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar: var(--sidebar);
+  --color-ring: var(--ring);
+  --color-input: var(--input);
+  --color-border: var(--border);
+  /* @deprecated — use border-border-subtle or border-border-prominent */
+  --color-border-subtle: var(--border-subtle);
+  --color-border-prominent: var(--border-prominent);
+  --color-secondary-hover: var(--secondary-hover);
+  --color-on-subtle: var(--on-subtle);
+  --color-subtle: var(--subtle);
+  --color-primary: var(--primary);
+  --color-primary-hover: var(--primary-hover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-popover: var(--popover);
+  --color-card-foreground: var(--card-foreground);
+  --color-card: var(--card);
+  --color-semantic-win: var(--semantic-win);
+  --color-semantic-loss: var(--semantic-loss);
+  --color-semantic-warning: var(--semantic-warning);
+  --color-alert-info-text: var(--alert-info-text);
+  --color-alert-info-border: var(--alert-info-border);
+  --color-alert-error-text: var(--alert-error-text);
+  --color-alert-error-border: var(--alert-error-border);
+  --color-on-muted: var(--on-muted);
+  --color-overlay: var(--overlay);
+  --color-slider-range: var(--slider-range);
+  --color-semantic-info: var(--semantic-info);
+  --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);
+  --max-width-layout-diagram-small: var(--semantic-layout-diagram-max-small);
+  --max-width-layout-diagram-medium: var(--semantic-layout-diagram-max-medium);
+  --radius-2xs: calc(var(--radius) - 8px);
+  --radius-xs: calc(var(--radius) - 6px);
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --radius-2xl: calc(var(--radius) + 8px);
+  --radius-3xl: calc(var(--radius) + 12px);
+  --radius-4xl: calc(var(--radius) + 16px);
+}
+
+/* ══════════════════════════════════════════════════════════════
+   LAYER 1 — PRIMITIVES
+   Raw palette values only. Never reference directly in components.
+   ══════════════════════════════════════════════════════════════ */
+:root {
+  --font-plus-jakarta-sans: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
+  --radius: 0.625rem;
+
+  /* ── Blue scale ── */
+  --primitive-blue-50: oklch(0.93 0.05 267);
+  /* #E6E6FF */
+  --primitive-blue-100: oklch(0.77 0.14 267);
+  /* #B8B8FF */
+  --primitive-blue-200: oklch(0.66 0.21 267);
+  /* #8A8AFF */
+  --primitive-blue-300: oklch(0.57 0.26 267);
+  /* #5C5CFF */
+  --primitive-blue-400: oklch(0.51 0.285 267);
+  /* #3939FF */
+  --primitive-blue-500: oklch(0.476 0.297 267.4);
+  /* #2323FF — brand blue */
+  --primitive-blue-600: oklch(0.40 0.27 265);
+  /* #0B0BD2 */
+  --primitive-blue-700: oklch(0.31 0.21 264);
+  /* #0000A5 */
+  --primitive-blue-800: oklch(0.23 0.16 264);
+  /* #000078 */
+  --primitive-blue-900: oklch(0.15 0.10 264);
+  /* #00004C */
+  --primitive-blue-1000: oklch(0.07 0.05 264);
+  /* #00001F */
+
+  /* ── Monochrome scale ── */
+  --primitive-mono-50: oklch(1 0 0);
+  /* #FFFFFF */
+  --primitive-mono-100: oklch(0.95 0 0);
+  /* #EEEEEE */
+  --primitive-mono-200: oklch(0.90 0 0);
+  /* #EEEEEE */
+  --primitive-mono-300: oklch(0.84 0 0);
+  /* #CCCCCC */
+  --primitive-mono-400: oklch(0.79 0 0);
+  /* #BBBBBB */
+  --primitive-mono-500: oklch(0.74 0 0);
+  /* #AAAAAA */
+  --primitive-mono-600: oklch(0.63 0 0);
+  /* #888888 */
+  --primitive-mono-700: oklch(0.51 0 0);
+  /* #666666 */
+  --primitive-mono-800: oklch(0.39 0 0);
+  /* #444444 */
+  --primitive-mono-900: oklch(0.25 0 0);
+  /* #222222 */
+  --primitive-mono-1000: oklch(0 0 0);
+  /* #000000 */
+
+  /* ── Green ── */
+  --primitive-green-400: oklch(0.492 0.162 144);
+  /* #008832 */
+
+  /* ── Sky ── */
+  --primitive-sky-600: #3DAAFF;
+  /* #3DAAFF */
+
+  /* ── Red ── */
+  --primitive-red-600: #F92E26;
+  /* #F92E26 */
+  --primitive-red-500: oklch(0.653 0.234 18.5);
+  /* #FF3355 */
+
+  /* ── Orange ── */
+  --primitive-orange-600: oklch(0.52 0.168 38);
+  /* #D45200 */
+  --primitive-orange-500: oklch(0.62 0.185 38);
+  /* #FF6600 */
+  --primitive-orange-400: oklch(0.751 0.179 58.3);
+  /* #FF8C00 */
+
+  /* ── Violet ── */
+  --primitive-violet-500: oklch(0.601 0.263 301.6);
+  /* #A040FF */
+
+  /* ── Overlay ── */
+  --primitive-black-50: oklch(0 0 0 / 50%);
+
+  /* ── Layout — Standard responsive grid (gutter / margin) ── */
+  --primitive-layout-gutter-none: 0px;
+  --primitive-layout-gutter-sm: 16px;
+  --primitive-layout-gutter-md: 36px;
+  --primitive-layout-margin-sm: 16px;
+  --primitive-layout-margin-md: 36px;
+  --primitive-layout-margin-lg: 64px;
+  --primitive-layout-diagram-max-default: 319px;
+  --primitive-layout-diagram-max-small: 599px;
+  --primitive-layout-diagram-max-medium: 1135px;
+}
+
+/* ══════════════════════════════════════════════════════════════
+   LAYER 2 — SEMANTICS
+   UI role and meaning. References primitives only.
+   ══════════════════════════════════════════════════════════════ */
+:root {
+  --background: var(--primitive-mono-50);
+  --on-prominent: var(--primitive-mono-1000);
+  --on-prominent-static-inverse: var(--primitive-mono-50);
+  /* #FFFFFF — always white, never changes between themes */
+  --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-info: var(--primitive-sky-600);
+  --semantic-error: var(--primitive-red-600);
+  --semantic-warning: var(--primitive-orange-500);
+  --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);
+}
+
+/* ══════════════════════════════════════════════════════════════
+   RESPONSIVE LAYOUT — Standard grid (columns / gutter / margin)
+   ══════════════════════════════════════════════════════════════ */
+:root {
+  --semantic-layout-grid-columns: 1;
+  --semantic-layout-gutter: var(--primitive-layout-gutter-none);
+  --semantic-layout-margin-inline: var(--primitive-layout-margin-sm);
+}
+
+@media (min-width: 320px) {
+  :root {
+    --semantic-layout-grid-columns: 4;
+    --semantic-layout-gutter: var(--primitive-layout-gutter-sm);
+    --semantic-layout-margin-inline: var(--primitive-layout-margin-sm);
+  }
+}
+
+@media (min-width: 600px) {
+  :root {
+    --semantic-layout-grid-columns: 8;
+    --semantic-layout-gutter: var(--primitive-layout-gutter-md);
+    --semantic-layout-margin-inline: var(--primitive-layout-margin-md);
+  }
+}
+
+@media (min-width: 1136px) {
+  :root {
+    --semantic-layout-grid-columns: 12;
+    --semantic-layout-gutter: var(--primitive-layout-gutter-md);
+    --semantic-layout-margin-inline: var(--primitive-layout-margin-lg);
+  }
+}
+
+/* ══════════════════════════════════════════════════════════════
+   LAYER 3 — COMPONENTS
+   Component-specific tokens. References semantics or primitives.
+   ══════════════════════════════════════════════════════════════ */
+:root {
+  --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);
+  --alert-info-text: var(--semantic-info);
+  --alert-info-border: var(--semantic-info);
+  --alert-error-text: var(--semantic-error);
+  --alert-error-border: var(--semantic-error);
+  --slider-range: oklch(0.476 0.297 267.4 / 40%);
+  --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);
+}
+
+/* ══════════════════════════════════════════════════════════════
+   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);
+    outline-color: color-mix(in oklch, var(--color-ring) 50%, transparent);
+  }
+
+  body {
+    @apply bg-background text-on-prominent font-sans antialiased;
+  }
+}
+
+/* Spinner — pill-style activity indicator */
+@keyframes spinner-fade {
+  0% {
+    opacity: 1;
+  }
+
+  100% {
+    opacity: 0.2;
+  }
+}
+
+/* Typography — Heading scale (Plus Jakarta Sans · Semibold 600 · LS 1.5px) */
+.heading-h1 {
+  font-family: var(--font-plus-jakarta-sans);
+  font-weight: 600;
+  font-size: 72px;
+  line-height: 72px;
+  letter-spacing: 1.5px;
+  text-transform: uppercase;
+}
+
+.heading-h2 {
+  font-family: var(--font-plus-jakarta-sans);
+  font-weight: 600;
+  font-size: 64px;
+  line-height: 64px;
+  letter-spacing: 1.5px;
+  text-transform: uppercase;
+}
+
+.heading-h3 {
+  font-family: var(--font-plus-jakarta-sans);
+  font-weight: 600;
+  font-size: 48px;
+  line-height: 48px;
+  letter-spacing: 1.5px;
+  text-transform: uppercase;
+}
+
+.heading-h4 {
+  font-family: var(--font-plus-jakarta-sans);
+  font-weight: 600;
+  font-size: 40px;
+  line-height: 40px;
+  letter-spacing: 1.5px;
+  text-transform: uppercase;
+}
+
+.heading-xs {
+  font-family: var(--font-plus-jakarta-sans);
+  font-weight: 600;
+  font-size: 24px;
+  line-height: 24px;
+  letter-spacing: 1.5px;
+  text-transform: uppercase;
+}
+
+/* Typography — Body scale (Plus Jakarta Sans · Semibold 600) */
+.body-lg {
+  font-family: var(--font-plus-jakarta-sans);
+  font-weight: 600;
+  font-size: 18px;
+  line-height: 28px;
+}
+
+.body-md {
+  font-family: var(--font-plus-jakarta-sans);
+  font-weight: 600;
+  font-size: 16px;
+  line-height: 24px;
+}
+
+.body-sm {
+  font-family: var(--font-plus-jakarta-sans);
+  font-weight: 600;
+  font-size: 12px;
+  line-height: 16px;
+}
+
+.body-xs {
+  font-family: var(--font-plus-jakarta-sans);
+  font-weight: 600;
+  font-size: 8px;
+  line-height: 12px;
+}