/* ============================================================================ Currents Design System → Material 3 bridge Loads AFTER theme.css and remaps the generated M3 role variables onto the design system's tokens. app.css already consumes the M3 roles, so the whole app re-skins without touching a single template. Source of truth: design_system/tokens/ (served at /static/ds/tokens/). Do not hardcode colour values here — reference the design system's tokens so a refresh flows straight through. The only exceptions are the motion tokens and the Beer reclaim below, both called out where they appear. Currents ships BOTH a light and a dark palette (the old TubeTrends system shipped light only, which is why this file used to carry a hand-derived dark block). The design system re-declares the same token names under `.dark`, and base.html puts .light/.dark on and — so every mapping below is written once and picks up the right mode automatically through var(). To roll back: remove the to this file in base.html. ============================================================================ */ /* fonts.css is intentionally NOT imported — base.html loads the families in a direct so they fetch in parallel instead of behind two @imports. base.css is intentionally NOT imported either: it styles bare body/a/h1-h6/*, which would fight Beer CSS and app.css at element-selector specificity. This bridge takes tokens only. For the same reason, never link the design system's styles.css here — it @imports base.css. */ @import url("../../ds/tokens/colors.ad9c07d7293b.css"); @import url("../../ds/tokens/typography.37b4493b2854.css"); @import url("../../ds/tokens/geometry.97277df4b606.css"); /* ── Beer CSS reclaim ────────────────────────────────────────────────────── Two names genuinely collide between the design system and Beer/M3: --shadow Beer treats this as a shadow *colour* (#000000) and composes its own elevations from it; the design system ships it as a complete box-shadow *value*. Letting the DS value through corrupts every Beer elevation, so pin it back. --secondary The DS uses it for a near-white surface tint; M3/Beer use it as a filled control colour needing contrast against --on-secondary. Remapped below. Nothing else in this file may reference var(--secondary) — it would resolve to the value set here, not the design system's. Use var(--muted) where the DS tint is wanted. */ :root, html.light, body.light, html.dark, body.dark { --shadow: #000000; } /* ── --tt-* compatibility layer ──────────────────────────────────────────── app.css reaches past the M3 roles and consumes 24 --tt-* tokens directly (the sidebar chrome, app radii/shadows, insight label hues). That is a leak in the original bridge design, but shimming the names here re-skins those call sites for free rather than editing ~30 lines of app.css. Retire this block by migrating app.css onto the roles/DS tokens directly. */ :root, html.light, body.light, html.dark, body.dark { --tt-accent: var(--primary); /* Mixing toward --foreground darkens in light mode and lightens in dark — the correct hover direction in both. */ --tt-accent-hover: color-mix(in oklab, var(--primary) 88%, var(--foreground)); --tt-accent-light: color-mix(in oklab, var(--primary) 8%, transparent); --tt-error: var(--destructive); --tt-trend-up: var(--rise); /* The brand's rationed "live data" accent is now --breakout (amber), which replaces the old signal orange. */ --tt-signal-soft: color-mix(in oklab, var(--breakout) 12%, var(--background)); --tt-signal-deep: color-mix(in oklab, var(--breakout) 80%, var(--foreground)); --tt-label-creator: var(--breakout); --tt-label-pattern: var(--chart-1); /* The sidebar now follows the theme instead of being permanently navy: the design system ships --sidebar near-white in light and deep navy in dark. Foreground and fills are derived from --sidebar-foreground so the pairing stays legible in whichever mode is active. */ --tt-sidebar-bg: var(--sidebar); --tt-sidebar-border: var(--sidebar-border); --tt-sidebar-text: color-mix(in oklab, var(--sidebar-foreground) 70%, var(--sidebar)); --tt-sidebar-text-active: var(--sidebar-foreground); --tt-sidebar-item-hover: color-mix(in oklab, var(--sidebar-foreground) 6%, transparent); --tt-sidebar-item-active: var(--sidebar-accent); /* The DS radius scale lands on the same 6/8/12px the app was already using. */ --tt-r-app-sm: var(--radius-md); --tt-r-app-md: var(--radius-lg); --tt-r-app-lg: var(--radius-xl); --tt-shadow-sm: var(--shadow-sm); --tt-shadow-lg: var(--shadow-lg); --tt-shadow-card-hover: var(--shadow-xl); --tt-font-label: var(--font-sans); /* Motion: the design system ships no motion tokens, so these stay as the app's own values. */ --tt-t-fast: 150ms ease; --tt-ease: cubic-bezier(0.16, 1, 0.3, 1); } /* ── M3 colour roles ────────────────────────────────────────────────────── theme.css declares its roles on html.light/body.light — specificity (0,1,1), which outranks the design system's bare :root (0,1,0) no matter what order they load in. So every block in this file carries the same selector list; coming later, it wins the tie. --primary can't be sourced from itself (the DS declares it under that exact name, so `--primary: var(--primary)` is a cycle and computes to nothing). Currents ships --ring with a value identical to --primary in both light and dark, and theme.css never declares --ring, so it's a cycle-free source. --background is deliberately left to theme.css: nothing in app.css consumes it, Beer's near-white (#fefbff) is indistinguishable in practice from the DS's pure white, and every alias the DS offers (--surface-page) resolves back through --background and would cycle. */ :root, html.light, body.light, html.dark, body.dark { --primary: var(--ring); --on-primary: var(--primary-foreground); --primary-container: var(--accent); --on-primary-container: var(--accent-foreground); --secondary: var(--muted-foreground); --on-secondary: var(--background); --secondary-container: var(--muted); --on-secondary-container: var(--foreground); /* Tertiary carries the breakout marker. M3 uses tertiary sparingly, which is exactly the rationing the brand asks for — live-data moments only. */ --tertiary: var(--breakout); --on-tertiary: var(--breakout-foreground); --tertiary-container: color-mix(in oklab, var(--breakout) 16%, var(--background)); --on-tertiary-container: color-mix(in oklab, var(--breakout) 80%, var(--foreground)); /* The DS ships --destructive alone, with no foreground or container variants, so those two are derived. --primary-foreground is pure white in both modes, which is the correct ink on --destructive. */ --error: var(--destructive); --on-error: var(--primary-foreground); --error-container: color-mix(in oklab, var(--destructive) 16%, var(--background)); --on-error-container: color-mix(in oklab, var(--destructive) 80%, var(--foreground)); --on-background: var(--foreground); --surface: var(--card); --on-surface: var(--card-foreground); --surface-variant: var(--muted); --on-surface-variant: var(--muted-foreground); --outline: var(--muted-foreground); --outline-variant: var(--border); --inverse-surface: var(--foreground); --inverse-on-surface: var(--background); --inverse-primary: color-mix(in oklab, var(--primary) 55%, var(--background)); /* Surface ladder — steps up from the page background toward the card. */ --surface-dim: var(--muted); --surface-bright: var(--card); --surface-container-lowest: var(--card); --surface-container-low: var(--background); --surface-container: var(--muted); --surface-container-high: color-mix(in oklab, var(--muted) 60%, var(--border)); --surface-container-highest: var(--border); } /* ── Data-viz semantics ──────────────────────────────────────────────────── theme.css defines rising/falling/warning for the trend charts. Currents ships --rise and --breakout specifically for this, chosen for contrast and colour-vision-deficiency separation, so they replace the old emerald/amber. */ :root, html.light, body.light, html.dark, body.dark { --rising: var(--rise); --rising-container: color-mix(in oklab, var(--rise) 16%, var(--background)); --on-rising-container: color-mix(in oklab, var(--rise) 80%, var(--foreground)); --falling: var(--destructive); --falling-container: color-mix(in oklab, var(--destructive) 16%, var(--background)); --on-falling-container: color-mix(in oklab, var(--destructive) 80%, var(--foreground)); --warning: var(--breakout); --warning-container: color-mix(in oklab, var(--breakout) 16%, var(--background)); --on-warning-container: color-mix(in oklab, var(--breakout) 80%, var(--foreground)); } /* ── Type, shape, elevation ─────────────────────────────────────────────── Currents is a single-family system: Google Sans for UI and display, Google Sans Code for data. Motion tokens stay on the M3 defaults. */ :root, html.light, body.light, html.dark, body.dark { --md-ref-typeface-plain: var(--font-sans); --md-ref-typeface-brand: var(--font-display); --md-shape-corner-extra-small: var(--radius-xs); --md-shape-corner-small: var(--radius-sm); --md-shape-corner-medium: var(--radius-md); --md-shape-corner-large: var(--radius-lg); --md-shape-corner-extra-large: var(--radius-xl); --md-elevation-1: var(--shadow-sm); --md-elevation-2: var(--shadow-md); --md-elevation-3: var(--shadow-lg); --md-elevation-4: var(--shadow-xl); --md-elevation-5: var(--shadow-2xl); }