/* * Aura Owner -- canonical design tokens. * Source of truth: docs/owner/ui-modernization/design-token-system.md * and docs/owner/ui-modernization/light-dark-theme-contract.md. * * Theme switch mechanism: [data-theme="dark"] on , set before * first paint (see application-shell-contract.md) to avoid a flash of * the wrong theme. No theme attribute + no system preference match * falls through to the light values below. */ :root { /* Brand */ --aura-color-brand-primary: #2D5FE0; --aura-color-brand-primary-hover: #244ECB; --aura-color-brand-primary-active: #1B3DA3; --aura-color-brand-primary-soft: #E8EEFC; --aura-color-brand-secondary: #F0A030; --aura-color-brand-accent: #8B5CF6; /* Surfaces */ --aura-color-surface-base: #F6F8FA; --aura-color-surface-raised: #FFFFFF; --aura-color-surface-overlay: #FFFFFF; --aura-color-surface-muted: #EEF1F4; /* Text */ --aura-color-text-primary: #12151C; --aura-color-text-secondary: #47505C; --aura-color-text-muted: #6B7785; /* Borders */ --aura-color-border-default: #D8DEE4; --aura-color-border-strong: #B7C0CA; /* Focus */ --aura-color-focus-ring: #2D5FE0; /* Status */ --aura-color-success: #1C6B34; --aura-color-success-soft: #DCF3E2; --aura-color-warning: #8A5C00; --aura-color-warning-soft: #FBEECB; --aura-color-danger: #B3261E; --aura-color-danger-soft: #FBDCDA; --aura-color-info: #0E7490; --aura-color-info-soft: #DCEEF3; /* Chart -- "Brand" categorical ramp (default; also applies when data-chart-palette is unset or explicitly "brand"). cat-1..4 are var()-references into already theme-aware brand/status tokens, so they repaint correctly for dark theme with no extra rule needed; cat-5..8 are new, dedicated hues (not aliases of a status color) so an 8-series chart never reads as "grey = muted" or "red = error" the way the old cat-5/cat-6 aliases did. See the palette-switcher block below (search "chart palette switcher") for the Vivid and Colorblind-safe alternatives and their dark-theme counterparts. */ --aura-chart-cat-1: var(--aura-color-brand-primary); --aura-chart-cat-2: var(--aura-color-brand-secondary); --aura-chart-cat-3: var(--aura-color-info); --aura-chart-cat-4: var(--aura-color-brand-accent); --aura-chart-cat-5: #2E9E5B; --aura-chart-cat-6: #D6488B; --aura-chart-cat-7: #8FA82E; --aura-chart-cat-8: #B8672E; /* Shadows -- light theme relies on real shadow depth */ --aura-shadow-sm: 0 1px 2px rgba(16, 24, 38, 0.06); --aura-shadow-md: 0 2px 8px rgba(16, 24, 38, 0.08); --aura-shadow-lg: 0 8px 24px rgba(16, 24, 38, 0.14); /* Typography */ --aura-font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans Arabic", "Noto Sans", sans-serif; --aura-font-mono: ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace; --aura-font-size-xs: 0.75rem; --aura-font-size-sm: 0.8125rem; --aura-font-size-base: 0.875rem; --aura-font-size-md: 1rem; --aura-font-size-lg: 1.125rem; --aura-font-size-xl: 1.375rem; --aura-font-size-2xl: 1.75rem; --aura-line-height-tight: 1.25; --aura-line-height-base: 1.5; --aura-line-height-dense: 1.35; --aura-font-weight-regular: 400; --aura-font-weight-medium: 500; --aura-font-weight-semibold: 600; --aura-font-weight-bold: 700; /* Spacing (4px grid) */ --aura-space-0: 0; --aura-space-1: 0.25rem; --aura-space-2: 0.5rem; --aura-space-3: 0.75rem; --aura-space-4: 1rem; --aura-space-5: 1.25rem; --aura-space-6: 1.5rem; --aura-space-8: 2rem; --aura-space-10: 2.5rem; --aura-space-12: 3rem; --aura-space-16: 4rem; /* Radius / borders */ --aura-radius-sm: 4px; --aura-radius-md: 8px; --aura-radius-lg: 12px; --aura-radius-full: 999px; --aura-border-width-sm: 1px; --aura-border-width-md: 2px; /* z-index layers */ --aura-z-base: 0; --aura-z-sticky: 10; --aura-z-dropdown: 100; --aura-z-overlay: 200; --aura-z-modal: 300; --aura-z-toast: 400; --aura-z-command-palette: 500; /* Motion */ --aura-motion-instant: 90ms; --aura-motion-fast: 150ms; --aura-motion-base: 200ms; --aura-motion-slow: 240ms; --aura-ease-standard: cubic-bezier(0.2, 0, 0, 1); --aura-ease-decelerate: cubic-bezier(0, 0, 0, 1); --aura-ease-accelerate: cubic-bezier(0.3, 0, 1, 1); /* Icons / targets */ --aura-icon-sm: 16px; --aura-icon-md: 20px; --aura-icon-lg: 24px; --aura-icon-xl: 32px; --aura-target-compact: 32px; --aura-target-comfortable: 40px; /* Layout */ --aura-content-max-width: 1440px; --aura-content-narrow: 720px; --aura-sidebar-expanded: 260px; --aura-sidebar-collapsed: 64px; --aura-bp-sm: 768px; --aura-bp-md: 1024px; --aura-bp-lg: 1280px; --aura-bp-xl: 1440px; --aura-bp-2xl: 1920px; /* Table / form density */ --aura-table-row-compact: 32px; --aura-table-row-comfortable: 44px; --aura-table-cell-pad-compact: 0.375rem 0.5rem; --aura-table-cell-pad-comfortable: 0.625rem 0.75rem; --aura-form-control-height: 36px; --aura-form-label-gap: 0.375rem; --aura-form-group-gap: 1.25rem; } :root[data-theme="dark"] { --aura-color-brand-primary: #5B84EE; --aura-color-brand-primary-hover: #6F94F1; --aura-color-brand-primary-active: #4A6FD1; --aura-color-brand-primary-soft: #1B2A4D; --aura-color-brand-secondary: #F5B655; --aura-color-brand-accent: #A78BFA; --aura-color-surface-base: #12151C; --aura-color-surface-raised: #1B1F29; --aura-color-surface-overlay: #232837; --aura-color-surface-muted: #171B24; --aura-color-text-primary: #F3F5F8; --aura-color-text-secondary: #B8C0CC; --aura-color-text-muted: #8891A0; --aura-color-border-default: #2A2F3B; --aura-color-border-strong: #3B4250; --aura-color-focus-ring: #6F94F1; --aura-color-success: #3FBE6C; --aura-color-success-soft: #163A22; --aura-color-warning: #F0B429; --aura-color-warning-soft: #3D2E05; --aura-color-danger: #F0645C; --aura-color-danger-soft: #3D1512; --aura-color-info: #38BDF0; --aura-color-info-soft: #0D2E36; --aura-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --aura-shadow-md: 0 2px 8px rgba(0, 0, 0, 0.45); --aura-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.55); } /* prefers-color-scheme fallback: only applies when the employee has no explicit saved preference (application-shell-contract.md's "system" option) -- the inline pre-paint script sets data-theme explicitly whenever a saved preference exists, so this rule only ever fires for the true "system" default state. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]):not([data-theme="dark"]) { --aura-color-brand-primary: #5B84EE; --aura-color-brand-primary-hover: #6F94F1; --aura-color-brand-primary-active: #4A6FD1; --aura-color-brand-primary-soft: #1B2A4D; --aura-color-brand-secondary: #F5B655; --aura-color-brand-accent: #A78BFA; --aura-color-surface-base: #12151C; --aura-color-surface-raised: #1B1F29; --aura-color-surface-overlay: #232837; --aura-color-surface-muted: #171B24; --aura-color-text-primary: #F3F5F8; --aura-color-text-secondary: #B8C0CC; --aura-color-text-muted: #8891A0; --aura-color-border-default: #2A2F3B; --aura-color-border-strong: #3B4250; --aura-color-focus-ring: #6F94F1; --aura-color-success: #3FBE6C; --aura-color-success-soft: #163A22; --aura-color-warning: #F0B429; --aura-color-warning-soft: #3D2E05; --aura-color-danger: #F0645C; --aura-color-danger-soft: #3D1512; --aura-color-info: #38BDF0; --aura-color-info-soft: #0D2E36; --aura-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --aura-shadow-md: 0 2px 8px rgba(0, 0, 0, 0.45); --aura-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.55); } } /* ========================================================================= Chart palette switcher (dashboard UI redesign) ------------------------------------------------------------------------- Three named, selectable 8-colour categorical ramps, switched via [data-chart-palette="brand|vivid|cb-safe"] on . Selection is persisted in localStorage ("aura-owner-chart-palette") and restored pre-paint by static/js/theme-preload.js -- same mechanism, same file, as data-theme and data-sidebar. Consuming CSS (charts.css, dashboard-redesign.css) reads only var(--aura-chart-cat-1..8) and never the palette name itself, so no consumer needs to know which palette is active. Every block below is deliberately scoped by [data-chart-palette="..."] rather than by [data-theme="dark"] alone: a bare `:root[data-theme= "dark"]` rule would tie in specificity with `:root[data-chart-palette= "cb-safe"]` (both are one pseudo-class + one attribute), making the winner depend on source order instead of intent. Naming the palette explicitly in every selector (three attributes deep for the dark variants) keeps each palette's colours from ever leaking into another palette's, regardless of where a rule sits in this file. Brand -- on-brand hues; also the default when no palette has been chosen yet (bare :root's cat-1..8, set above). Vivid -- bold/saturated alternative for a punchier look. cb-safe -- Okabe & Ito (2008), the standard colorblind-safe 8-colour qualitative ramp (https://jfly.uni-koeln.de/color/). Values 1-7 are the published hues, unmodified, reused for both themes on purpose (fidelity to the named standard); only slot 8 ("black" in the original) is swapped per theme -- literal #000 is invisible against this app's near-black dark-theme surfaces, so dark theme gets a near-white anchor there instead. This is the one place a palette's hue differs between light and dark, and it exists specifically to satisfy "distinguishable in both themes" for that slot. ========================================================================= */ :root[data-chart-palette="vivid"] { --aura-chart-cat-1: #0047FF; --aura-chart-cat-2: #FF6B00; --aura-chart-cat-3: #00B8A9; --aura-chart-cat-4: #A100FF; --aura-chart-cat-5: #00C853; --aura-chart-cat-6: #FF2D78; --aura-chart-cat-7: #D4B106; --aura-chart-cat-8: #00B8D4; } :root[data-chart-palette="cb-safe"] { --aura-chart-cat-1: #0072B2; --aura-chart-cat-2: #E69F00; --aura-chart-cat-3: #56B4E9; --aura-chart-cat-4: #CC79A7; --aura-chart-cat-5: #009E73; --aura-chart-cat-6: #D55E00; --aura-chart-cat-7: #F0E442; --aura-chart-cat-8: #000000; } /* Dark-theme brand ramp -- also the default for dark theme when no palette has been chosen yet. cat-1..4 need no override (they are var() references into tokens that are already redefined above for dark theme); only the four dedicated hex hues need brighter dark-theme counterparts, same "lighten for dark" convention this file already uses for --aura-color-success/warning/danger/info above. */ :root[data-theme="dark"]:not([data-chart-palette]), :root[data-theme="dark"][data-chart-palette="brand"] { --aura-chart-cat-5: #4BC98A; --aura-chart-cat-6: #E86FA8; --aura-chart-cat-7: #B4CE5C; --aura-chart-cat-8: #D68A56; } :root[data-theme="dark"][data-chart-palette="vivid"] { --aura-chart-cat-1: #4D7CFF; --aura-chart-cat-2: #FF9142; --aura-chart-cat-3: #33CFC0; --aura-chart-cat-4: #C466FF; --aura-chart-cat-5: #33E37E; --aura-chart-cat-6: #FF6FA0; --aura-chart-cat-7: #E8D24D; --aura-chart-cat-8: #33D6EE; } :root[data-theme="dark"][data-chart-palette="cb-safe"] { --aura-chart-cat-8: #F3F5F8; } /* Same three overrides again for the SYSTEM dark case (no explicit data-theme attribute, prefers-color-scheme: dark) -- mirrors this file's own existing duplication between its explicit :root[data-theme="dark"] block and this same media query above. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]):not([data-theme="dark"]):not([data-chart-palette]), :root:not([data-theme="light"]):not([data-theme="dark"])[data-chart-palette="brand"] { --aura-chart-cat-5: #4BC98A; --aura-chart-cat-6: #E86FA8; --aura-chart-cat-7: #B4CE5C; --aura-chart-cat-8: #D68A56; } :root:not([data-theme="light"]):not([data-theme="dark"])[data-chart-palette="vivid"] { --aura-chart-cat-1: #4D7CFF; --aura-chart-cat-2: #FF9142; --aura-chart-cat-3: #33CFC0; --aura-chart-cat-4: #C466FF; --aura-chart-cat-5: #33E37E; --aura-chart-cat-6: #FF6FA0; --aura-chart-cat-7: #E8D24D; --aura-chart-cat-8: #33D6EE; } :root:not([data-theme="light"]):not([data-theme="dark"])[data-chart-palette="cb-safe"] { --aura-chart-cat-8: #F3F5F8; } } @media (prefers-reduced-motion: reduce) { :root { --aura-motion-instant: 0ms; --aura-motion-fast: 0ms; --aura-motion-base: 0ms; --aura-motion-slow: 0ms; } }