/* ═══════════════════════════════════════════════════════════════════ * Descendant data-theme override * * m3e/tokens.css targets `:root[data-theme="dark"]` — which only works * when the attribute sits on . For artboards / preview tiles that * want to flip a local subtree dark, this file adds the same rules but * scoped to any descendant element with data-theme="dark". * * Load this AFTER m3e/tokens.css (and after colors_and_type.css is fine * too — aliases reference tokens, so overriding the tokens here cascades). * Mirrors block 2a of tokens.css exactly (standard contrast, dark). * ═══════════════════════════════════════════════════════════════════ */ /* Re-declare aliases inside themed subtrees so children resolve them against the LOCAL overrides. CSS custom properties resolve at the element where they were defined — if --fg1 is defined only on :root, a descendant :root[data-theme] override of --md-sys-color-on-surface never reaches it. Redeclaring here fixes that. */ [data-theme="dark"], [data-theme="light"] { --brand: var(--md-sys-color-primary); --brand-on: var(--md-sys-color-on-primary); --brand-container: var(--md-sys-color-primary-container); --brand-on-container: var(--md-sys-color-on-primary-container); --accent: var(--md-sys-color-tertiary); --accent-on: var(--md-sys-color-on-tertiary); --accent-container: var(--md-sys-color-tertiary-container); --accent-on-container: var(--md-sys-color-on-tertiary-container); --secondary: var(--md-sys-color-secondary); --secondary-container: var(--md-sys-color-secondary-container); --secondary-on-container: var(--md-sys-color-on-secondary-container); --bg: var(--md-sys-color-background); --surface-0: var(--md-sys-color-surface-container-lowest); --surface-1: var(--md-sys-color-surface-container-low); --surface-2: var(--md-sys-color-surface-container); --surface-3: var(--md-sys-color-surface-container-high); --surface-4: var(--md-sys-color-surface-container-highest); --fg1: var(--md-sys-color-on-surface); --fg2: var(--md-sys-color-on-surface-variant); --fg-on-brand: var(--md-sys-color-on-primary); --border: var(--md-sys-color-outline-variant); --border-bold: var(--md-sys-color-outline); --success: var(--md-sys-color-tertiary); --success-container: var(--md-sys-color-tertiary-container); --warning-container: var(--md-sys-color-tertiary-container); --warning-on-container: var(--md-sys-color-on-tertiary-container); --danger: var(--md-sys-color-error); --danger-on: var(--md-sys-color-on-error); --danger-container: var(--md-sys-color-error-container); --danger-on-container: var(--md-sys-color-on-error-container); /* Gradients — also need redeclaring so the var() inside resolves against the subtree's current MD tokens, not :root's. */ --gradient-hero: linear-gradient( 135deg, var(--md-sys-color-primary-container) 0%, color-mix(in srgb, var(--md-sys-color-primary-container) 70%, var(--md-sys-color-tertiary-container) 30%) 100% ); --gradient-mark: linear-gradient( 135deg, var(--md-sys-color-primary) 0%, var(--md-sys-color-tertiary) 100% ); --gradient-loading: linear-gradient( to right, var(--md-sys-color-primary), var(--md-sys-color-tertiary) ); } [data-theme="dark"] { --md-sys-color-primary: rgb(170 199 255); --md-sys-color-surface-tint: rgb(170 199 255); --md-sys-color-on-primary: rgb(10 48 95); --md-sys-color-primary-container: rgb(40 71 119); --md-sys-color-on-primary-container: rgb(214 227 255); --md-sys-color-secondary: rgb(190 198 220); --md-sys-color-on-secondary: rgb(40 49 65); --md-sys-color-secondary-container: rgb(62 71 89); --md-sys-color-on-secondary-container: rgb(218 226 249); --md-sys-color-tertiary: rgb(158 207 203); --md-sys-color-on-tertiary: rgb(0 56 55); --md-sys-color-tertiary-container: rgb(31 85 84); --md-sys-color-on-tertiary-container: rgb(186 235 230); --md-sys-color-error: rgb(255 181 164); --md-sys-color-on-error: rgb(89 18 7); --md-sys-color-error-container: rgb(129 29 14); --md-sys-color-on-error-container: rgb(255 219 209); --md-sys-color-background: rgb(17 19 24); --md-sys-color-on-background: rgb(226 226 233); --md-sys-color-surface: rgb(17 19 24); --md-sys-color-on-surface: rgb(226 226 233); --md-sys-color-surface-variant: rgb(68 71 78); --md-sys-color-on-surface-variant: rgb(196 198 208); --md-sys-color-outline: rgb(142 144 153); --md-sys-color-outline-variant: rgb(68 71 78); --md-sys-color-shadow: rgb(0 0 0); --md-sys-color-scrim: rgb(0 0 0); --md-sys-color-inverse-surface: rgb(226 226 233); --md-sys-color-inverse-on-surface: rgb(46 48 54); --md-sys-color-inverse-primary: rgb(65 95 145); --md-sys-color-primary-fixed: rgb(214 227 255); --md-sys-color-on-primary-fixed: rgb(0 27 62); --md-sys-color-primary-fixed-dim: rgb(170 199 255); --md-sys-color-on-primary-fixed-variant: rgb(40 71 119); --md-sys-color-secondary-fixed: rgb(218 226 249); --md-sys-color-on-secondary-fixed: rgb(19 28 43); --md-sys-color-secondary-fixed-dim: rgb(190 198 220); --md-sys-color-on-secondary-fixed-variant: rgb(62 71 89); --md-sys-color-tertiary-fixed: rgb(186 235 230); --md-sys-color-on-tertiary-fixed: rgb(0 32 31); --md-sys-color-tertiary-fixed-dim: rgb(158 207 203); --md-sys-color-on-tertiary-fixed-variant: rgb(31 85 84); --md-sys-color-surface-dim: rgb(17 19 24); --md-sys-color-surface-bright: rgb(55 57 62); --md-sys-color-surface-container-lowest: rgb(12 14 19); --md-sys-color-surface-container-low: rgb(25 28 32); --md-sys-color-surface-container: rgb(29 32 36); --md-sys-color-surface-container-high: rgb(40 42 47); --md-sys-color-surface-container-highest: rgb(51 53 58); } [data-theme="light"] { /* Force light even if ancestor or OS is dark — mirrors block 1 of tokens.css. */ --md-sys-color-primary: rgb(65 95 145); --md-sys-color-surface-tint: rgb(65 95 145); --md-sys-color-on-primary: rgb(255 255 255); --md-sys-color-primary-container: rgb(214 227 255); --md-sys-color-on-primary-container: rgb(40 71 119); --md-sys-color-secondary: rgb(86 95 113); --md-sys-color-on-secondary: rgb(255 255 255); --md-sys-color-secondary-container: rgb(218 226 249); --md-sys-color-on-secondary-container: rgb(62 71 89); --md-sys-color-tertiary: rgb(55 110 108); --md-sys-color-on-tertiary: rgb(255 255 255); --md-sys-color-tertiary-container: rgb(186 235 230); --md-sys-color-on-tertiary-container: rgb(31 85 84); --md-sys-color-error: rgb(176 56 38); --md-sys-color-on-error: rgb(255 255 255); --md-sys-color-error-container: rgb(255 219 209); --md-sys-color-on-error-container: rgb(129 29 14); --md-sys-color-background: rgb(249 249 255); --md-sys-color-on-background: rgb(25 28 32); --md-sys-color-surface: rgb(249 249 255); --md-sys-color-on-surface: rgb(25 28 32); --md-sys-color-surface-variant: rgb(224 226 236); --md-sys-color-on-surface-variant: rgb(68 71 78); --md-sys-color-outline: rgb(116 119 127); --md-sys-color-outline-variant: rgb(196 198 208); --md-sys-color-inverse-surface: rgb(46 48 54); --md-sys-color-inverse-on-surface: rgb(240 240 247); --md-sys-color-inverse-primary: rgb(170 199 255); --md-sys-color-surface-dim: rgb(217 217 224); --md-sys-color-surface-bright: rgb(249 249 255); --md-sys-color-surface-container-lowest: rgb(255 255 255); --md-sys-color-surface-container-low: rgb(243 243 250); --md-sys-color-surface-container: rgb(237 237 244); --md-sys-color-surface-container-high: rgb(231 232 238); --md-sys-color-surface-container-highest: rgb(226 226 233); }