/* tokens.css — global design tokens for OpsDB * Load this BEFORE dashboards.css in dashboardBase.html. * Do NOT duplicate these :root blocks in dashboards.css. * * Widget-scoped :root blocks in composableRenderer.css * and formulaEditor.css are intentionally * left in place; those tokens are private to those widgets. */ :root { /* --- Color: backgrounds --- */ --bg-primary: #f4f6f9; --bg-secondary: #ffffff; --bg-tertiary: #f8f9fa; --bg-hover: #f0f4ff; /* --- Color: text --- */ --text-primary: #1a1a2e; --text-secondary: #333333; --text-muted: #888888; --text-faint: #999999; /* --- Color: borders & shadows --- */ --border-color: #e4e4e4; --border-light: #e8e8e8; --shadow-sm: rgba(0,0,0,0.08); --shadow-md: rgba(0,0,0,0.15); /* --- Color: chrome --- */ --header-bg: #1a1a2e; --header-text: #ffffff; --footer-bg: #ffffff; /* --- Color: links / accent --- */ --link-color: #4a6cf7; --link-hover: #2d4fd6; /* --accent-color is referenced as a fallback in 7 CSS files but was never defined; define it here as an alias of --link-color so those var(--accent-color, ) fallbacks resolve to the palette. */ --accent-color: var(--link-color); /* --- Color: inputs --- */ --input-bg: #fafbfc; --input-border: #d1d5db; --dropdown-bg: #ffffff; /* --- Color: buttons --- */ --btn-danger-bg: #E74C3C; --btn-success-bg: #27AE60; --btn-success-text: #d1fae5; --warning-text: #E67E22; /* --- Color: status --- */ --color-success: #27AE60; --color-warning: #E67E22; --color-danger: #E74C3C; --color-info: #4a6cf7; /* [#602 convergence] error/accent tokens used by the schedule pages. */ --error-color: #dc2626; /* [D2 stat-tile] semantic traffic-light tier consumed by .stat-tile modifiers */ --status-ok: #27AE60; --status-warn: #E67E22; --status-alert: #E74C3C; --status-ok-bg: rgba(39,174,96,0.12); --status-warn-bg: rgba(230,126,34,0.12); --status-alert-bg: rgba(231,76,60,0.12); /* --- Color: semantic status tier (C1) --- * --status-ok/warn/alert : foreground text/icon colors * --status-*-bg : 15% tinted background for pills/badges * Canonical traffic-light: green=#27AE60, yellow=#E67E22, red=#E74C3C * Replace all per-page hex variants with these vars. */ --status-ok: #27AE60; --status-warn: #E67E22; --status-alert: #E74C3C; --status-muted: #888888; --status-info: #6366f1; --status-ok-bg: rgba(39, 174, 96, 0.15); --status-warn-bg: rgba(230, 126, 34, 0.15); --status-alert-bg: rgba(231, 76, 60, 0.15); --status-muted-bg: rgba(136, 136, 136, 0.15); --status-info-bg: rgba(99, 102, 241, 0.12); --status-ok-border: rgba(39, 174, 96, 0.30); --status-warn-border: rgba(230, 126, 34, 0.30); --status-alert-border: rgba(231, 76, 60, 0.30); --status-muted-border: rgba(136, 136, 136, 0.30); --status-info-border: rgba(99, 102, 241, 0.30); /* --- Color: match badges --- */ --match-abom-bg: #FFF8E1; --match-abom-border: #FFD54F; --match-kss-bg: #E3F2FD; --match-kss-border: #64B5F6; --match-confirmed-bg: #f0faf4; --match-confirmed-border: #27AE60; /* --- Spacing scale --- */ --space-xs: 4px; --space-sm: 8px; --space-md: 16px; --space-lg: 24px; /* --- Border-radius scale --- */ --radius-sm: 4px; --radius-md: 6px; --radius-lg: 8px; --radius-xl: 10px; /* --- Z-index scale --- */ --z-dropdown: 100; --z-sticky: 200; --z-overlay: 900; --z-modal: 1000; --z-toast: 10000; } [data-theme="dark"] { /* --- Color: backgrounds --- */ --bg-primary: #121218; --bg-secondary: #1e1e2a; --bg-tertiary: #252535; --bg-hover: #2a2a3e; /* --- Color: text --- */ --text-primary: #e0e0e8; --text-secondary: #c0c0cc; --text-muted: #888899; --text-faint: #666677; /* --- Color: borders & shadows --- */ --border-color: #333345; --border-light: #2a2a3c; --shadow-sm: rgba(0,0,0,0.3); --shadow-md: rgba(0,0,0,0.5); /* --- Color: chrome --- */ --header-bg: #0d0d16; --header-text: #e0e0e8; --footer-bg: #1a1a24; /* --- Color: links / accent --- */ --link-color: #7b9cff; --link-hover: #a0b8ff; /* --accent-color inherits from :root via cascade; dark override not needed because var(--link-color) resolves after dark overrides --link-color. */ /* --- Color: inputs --- */ --input-bg: #1e1e2a; --input-border: #444458; --dropdown-bg: #1e1e2a; /* --- Color: buttons --- */ --btn-danger-bg: #c0392b; --btn-success-bg: #229954; --btn-success-text: #d1fae5; --warning-text: #e0943a; /* --- Color: status --- */ --color-success: #229954; --color-warning: #e0943a; --color-danger: #c0392b; --color-info: #7b9cff; /* [#602 convergence] error token (dark) used by the schedule pages. */ --error-color: #f87171; /* [D2 stat-tile] semantic traffic-light tier (dark overrides) */ --status-ok: #2ecc71; --status-warn: #e0943a; --status-alert: #e74c3c; --status-ok-bg: rgba(46,204,113,0.15); --status-warn-bg: rgba(224,148,58,0.15); --status-alert-bg: rgba(231,76,60,0.15); /* --- Color: semantic status tier (C1 — dark overrides) --- */ --status-ok: #2ecc71; --status-warn: #e0943a; --status-alert: #e74c3c; --status-muted: #888899; --status-info: #818cf8; --status-ok-bg: rgba(46, 204, 113, 0.18); --status-warn-bg: rgba(224, 148, 58, 0.18); --status-alert-bg: rgba(231, 76, 60, 0.18); --status-muted-bg: rgba(136, 136, 153, 0.18); --status-info-bg: rgba(129, 140, 248, 0.15); --status-ok-border: rgba(46, 204, 113, 0.35); --status-warn-border: rgba(224, 148, 58, 0.35); --status-alert-border: rgba(231, 76, 60, 0.35); --status-muted-border: rgba(136, 136, 153, 0.35); --status-info-border: rgba(129, 140, 248, 0.35); /* --- Color: match badges --- */ --match-abom-bg: #3a3520; --match-abom-border: #8a7530; --match-kss-bg: #1e2a3a; --match-kss-border: #3a6a9a; --match-confirmed-bg: #1e3028; --match-confirmed-border: #229954; /* spacing / radius / z-index are theme-neutral; no dark overrides needed */ }