@deriv-ds/design-intelligence-layer 0.1.0

package/src/styles.css

@@ -0,0 +1,442 @@
+/*
+ * 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");
+
+
+/* ── Tailwind theme bridge — maps CSS vars to utility classes ── */
+@theme inline {
+  --color-prominent: var(--prominent);
+  --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-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);
+  --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);
+  /* ── 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);
+}
+
+/* ══════════════════════════════════════════════════════════════
+   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 */
+
+  /* ── 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: 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;
+  --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 {
+  --prominent: 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);
+
+  --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);
+  --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 */
+}
+
+/* ══════════════════════════════════════════════════════════════
+   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);
+}
+
+@layer base {
+  * {
+    border-color: var(--color-border-subtle);
+    outline-color: color-mix(in oklch, var(--color-ring) 50%, transparent);
+  }
+
+  body {
+    @apply bg-prominent 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;
+}