/* * Colour-blind-friendly palette overlay. * * This layer is orthogonal to the light/dark theme. It is activated by a * `data-cb` attribute on (set from the `colourBlindMode` localStorage * key in js/Dashboard/ServiceCentre.js) and redeclares Bootstrap's semantic * custom properties plus the wallboard status variables. * * Because both the base theme CSS (theme_light.css / theme_dark.css) and this * file are always loaded, this file MUST be linked AFTER the theme files in * index.html so its overrides win the cascade regardless of light/dark. * * Palette basis: Okabe-Ito qualitative colour-blind-safe set. * bluish green #009E73, vermilion #D55E00, orange #E69F00, * sky blue #56B4E9, blue #0072B2, reddish purple #CC79A7, yellow #F0E442. * * Modes: * data-cb="deutan" -> red-green safe (Deuteranopia/Protanopia). Requested user. * data-cb="tritan" -> blue-yellow safe (Tritanopia). */ /* ------------------------------------------------------------------ */ /* Red-green safe (Deutan / Protan) */ /* ------------------------------------------------------------------ */ [data-cb="deutan"] { /* success: bluish green instead of pure green */ --bs-success: #009e73; --bs-success-rgb: 0, 158, 115; --bs-success-text-emphasis: #006b4e; --bs-success-bg-subtle: #cceee4; --bs-success-border-subtle: #99ddc9; /* Stop-sign ordering (green -> amber -> red) is preserved. Amber and vermilion both sit in the orange band that deutan/protan vision compresses, so busy (warning) and unavailable (danger) are separated by a strong LUMINANCE gap instead of hue: warning is a bright high-luminance gold, danger is a deep low-luminance red. */ /* danger: deep red, kept dark so it reads clearly below the bright warning */ --bs-danger: #c43c00; --bs-danger-rgb: 196, 60, 0; --bs-danger-text-emphasis: #822800; --bs-danger-bg-subtle: #f4d4c6; --bs-danger-border-subtle: #e9aa93; /* warning: bright gold, high luminance to stand apart from the dark danger */ --bs-warning: #f5c542; --bs-warning-rgb: 245, 197, 66; --bs-warning-text-emphasis: #8a6d00; --bs-warning-bg-subtle: #fdf3d3; --bs-warning-border-subtle: #fbe8a7; /* info: sky blue */ --bs-info: #56b4e9; --bs-info-rgb: 86, 180, 233; --bs-info-text-emphasis: #24607f; --bs-info-bg-subtle: #ddf0fb; --bs-info-border-subtle: #bbe1f6; /* primary: strong blue */ --bs-primary: #0072b2; --bs-primary-rgb: 0, 114, 178; --bs-primary-text-emphasis: #004d78; --bs-primary-bg-subtle: #cce3f0; --bs-primary-border-subtle: #99c7e0; /* Wallboard status colours (see css/wallboard.css) */ --wallboard-success: #009e73; --wallboard-warning: #f5c542; --wallboard-danger: #c43c00; --wallboard-info: #56b4e9; --wallboard-accent: #0072b2; } /* * Bootstrap's contextual .table-* classes hardcode their own --bs-table-* * values (e.g. .table-success sets --bs-table-bg: #d1e7dd) and do NOT read * --bs-success, so they must be overridden explicitly. This is what drives * the agent table row states (RoutableWeight 1/2/3 in AgentTable.js). */ [data-cb="deutan"] .table-success { --bs-table-bg: #cceee4; --bs-table-border-color: #99ddc9; --bs-table-striped-bg: #c2e2d8; --bs-table-active-bg: #b8d6cd; --bs-table-hover-bg: #bddcd2; } [data-cb="deutan"] .table-warning { --bs-table-bg: #fdf3d3; --bs-table-border-color: #fbe8a7; --bs-table-striped-bg: #f0e7c9; --bs-table-active-bg: #e4dbbe; --bs-table-hover-bg: #eae1c3; } [data-cb="deutan"] .table-danger { --bs-table-bg: #f4d4c6; --bs-table-border-color: #e9aa93; --bs-table-striped-bg: #e8cabd; --bs-table-active-bg: #dbbfb2; --bs-table-hover-bg: #e1c4b8; } /* Dark base tends to wash out mid-tones: lift luminance slightly. */ [data-bs-theme="dark"][data-cb="deutan"] { --bs-success: #14b88a; --bs-success-rgb: 20, 184, 138; /* Keep the luminance gap in dark mode: bright gold warning, deeper red danger. Danger is lifted enough to be visible on dark, but stays clearly darker/redder than the gold warning. */ --bs-danger: #e04a1a; --bs-danger-rgb: 224, 74, 26; --bs-warning: #f7cf5c; --bs-warning-rgb: 247, 207, 92; --wallboard-success: #14b88a; --wallboard-danger: #e04a1a; --wallboard-warning: #f7cf5c; } /* ------------------------------------------------------------------ */ /* Blue-yellow safe (Tritan) */ /* ------------------------------------------------------------------ */ [data-cb="tritan"] { /* success: keep a green that is separable from blue for tritan viewers */ --bs-success: #009e73; --bs-success-rgb: 0, 158, 115; --bs-success-text-emphasis: #006b4e; --bs-success-bg-subtle: #cceee4; --bs-success-border-subtle: #99ddc9; /* danger: red (tritan viewers distinguish red well) */ --bs-danger: #d81b60; --bs-danger-rgb: 216, 27, 96; --bs-danger-text-emphasis: #901240; --bs-danger-bg-subtle: #f7d1df; --bs-danger-border-subtle: #efa4bf; /* warning: reddish purple instead of amber (yellow is hard for tritan) */ --bs-warning: #cc79a7; --bs-warning-rgb: 204, 121, 167; --bs-warning-text-emphasis: #885070; --bs-warning-bg-subtle: #f5e4ed; --bs-warning-border-subtle: #ebc9db; /* info: sky blue, distinct from success green */ --bs-info: #56b4e9; --bs-info-rgb: 86, 180, 233; --bs-info-text-emphasis: #24607f; --bs-info-bg-subtle: #ddf0fb; --bs-info-border-subtle: #bbe1f6; /* primary: strong blue */ --bs-primary: #0072b2; --bs-primary-rgb: 0, 114, 178; --bs-primary-text-emphasis: #004d78; --bs-primary-bg-subtle: #cce3f0; --bs-primary-border-subtle: #99c7e0; /* Wallboard status colours */ --wallboard-success: #009e73; --wallboard-warning: #cc79a7; --wallboard-danger: #d81b60; --wallboard-info: #56b4e9; --wallboard-accent: #0072b2; } /* Contextual table row states (see deutan note above). */ [data-cb="tritan"] .table-success { --bs-table-bg: #cceee4; --bs-table-border-color: #99ddc9; --bs-table-striped-bg: #c2e2d8; --bs-table-active-bg: #b8d6cd; --bs-table-hover-bg: #bddcd2; } [data-cb="tritan"] .table-warning { --bs-table-bg: #f5e4ed; --bs-table-border-color: #ebc9db; --bs-table-striped-bg: #e9d8e1; --bs-table-active-bg: #ddccd5; --bs-table-hover-bg: #e3d2db; } [data-cb="tritan"] .table-danger { --bs-table-bg: #f7d1df; --bs-table-border-color: #efa4bf; --bs-table-striped-bg: #ebc6d3; --bs-table-active-bg: #debbc8; --bs-table-hover-bg: #e5c0cd; } [data-bs-theme="dark"][data-cb="tritan"] { --bs-success: #14b88a; --bs-success-rgb: 20, 184, 138; --bs-danger: #ec4079; --bs-danger-rgb: 236, 64, 121; --bs-warning: #d98bb8; --bs-warning-rgb: 217, 139, 184; --wallboard-success: #14b88a; --wallboard-danger: #ec4079; --wallboard-warning: #d98bb8; }