/* ============================================================================ @timeslider/styles - tokens.css ---------------------------------------------------------------------------- Layer 1 of three (tokens -> base -> components). The ORDER is the point: primitives are raw values that no component may name directly, the semantic layer is the only thing components are allowed to reference. Dark mode is therefore ONE block that re-binds the semantic names. No component rule knows that dark mode exists - which is what keeps a theme switch from turning into a hunt through component stylesheets. Custom properties pierce shadow DOM, so this works for Angular components with ViewEncapsulation.ShadowDom as well. data-theme belongs on and is set by the inline script in the (see Views/Shared/_Theme.cshtml) BEFORE CSS applies - otherwise the light theme flashes up while loading. ============================================================================ */ /* ---------------------------------------------------------------------------- 1 - PRIMITIVES (raw values, never referenced from a component) ---------------------------------------------------------------------------- */ :root { --ts-coral-50: #FDEDEC; --ts-coral-300: #FF8B85; --ts-coral-500: #F0625B; --ts-coral-600: #D64C45; --ts-amber-500: #F5B301; --ts-green-300: #4BBE8A; --ts-green-500: #2E9E6B; --ts-red-400: #EC6E66; --ts-red-600: #C4362F; --ts-gray-0: #FFFFFF; --ts-gray-25: #FAFAFC; --ts-gray-50: #F4F4F7; --ts-gray-100: #EFEFF3; --ts-gray-150: #E4E4E9; --ts-gray-400: #8B8B96; --ts-gray-600: #5C5C66; --ts-gray-900: #2B2B2F; --ts-dark-900: #17181C; --ts-dark-800: #1E1F24; --ts-dark-700: #24252B; --ts-dark-600: #2B2C33; --ts-dark-500: #33343C; --ts-dark-400: #83838F; --ts-dark-200: #B4B4BE; --ts-dark-50: #E8E8EC; --r-sm: 6px; --r: 8px; --r-lg: 12px; --font: "Segoe UI", -apple-system, BlinkMacSystemFont, "Inter", Roboto, sans-serif; } /* ---------------------------------------------------------------------------- 2 - SEMANTIC LAYER (the only layer components may use) ---------------------------------------------------------------------------- */ :root, :root[data-theme="light"] { --bg: var(--ts-gray-50); --surface: var(--ts-gray-0); --surface-2: var(--ts-gray-25); --surface-3: var(--ts-gray-100); --surface-sunken: #F7F7FA; --border: var(--ts-gray-150); --border-soft: #EFEFF3; --text: var(--ts-gray-900); --text-2: var(--ts-gray-600); --text-3: var(--ts-gray-400); --accent: var(--ts-coral-500); --accent-hover: var(--ts-coral-600); --accent-soft: var(--ts-coral-50); --accent-text: var(--ts-coral-600); --on-accent: #FFFFFF; --ok: var(--ts-green-500); --ok-soft: #E8F6EF; --warn: #B4741C; --warn-soft: #FDF3E3; --danger: var(--ts-red-600); --danger-soft: #FCEEED; --danger-border: #EDD4D2; --host-bg: #F5F5F9; --host-border: #E1E1E8; --host-text: #484650; --host-pill-bg: #EAEAF6; --host-pill-text: #6264A7; --shadow: 0 1px 2px rgba(20, 20, 30, .05), 0 8px 24px rgba(20, 20, 30, .06); --shadow-lg: 0 20px 60px rgba(20, 20, 30, .28); --scrim: rgba(24, 24, 32, .45); --focus: rgba(240, 98, 91, .28); --chevron: %238B8B96; } :root[data-theme="dark"], :root[data-theme="contrast"] { --bg: var(--ts-dark-900); --surface: var(--ts-dark-800); --surface-2: var(--ts-dark-700); --surface-3: var(--ts-dark-600); --surface-sunken: #202127; --border: var(--ts-dark-500); --border-soft: #2A2B32; --text: var(--ts-dark-50); --text-2: var(--ts-dark-200); --text-3: var(--ts-dark-400); --accent: var(--ts-coral-500); --accent-hover: var(--ts-coral-300); --accent-soft: rgba(240, 98, 91, .16); --accent-text: var(--ts-coral-300); --on-accent: #1A0F0E; --ok: var(--ts-green-300); --ok-soft: rgba(75, 190, 138, .15); --warn: #E0A64B; --warn-soft: rgba(224, 166, 75, .15); --danger: var(--ts-red-400); --danger-soft: rgba(236, 110, 102, .14); --danger-border: #4A2E2C; --host-bg: #1C1D22; --host-border: #2E2F37; --host-text: #C4C4CE; --host-pill-bg: #2C2D3D; --host-pill-text: #A6A8DE; --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .34); --shadow-lg: 0 20px 60px rgba(0, 0, 0, .55); --scrim: rgba(6, 6, 10, .6); --focus: rgba(240, 98, 91, .4); --chevron: %2383838F; color-scheme: dark; } /* MS Teams "contrast" is folded into dark above - the host theme has three values, the design system has two. ThemeService already maps contrast to dark before setting the attribute; the selector is listed alongside dark so a host that sets data-theme="contrast" itself still gets a complete palette rather than a half-themed page. */