/* ============================================================================= Relite Logistics — Design System : THEME PRESETS (P1 Wave 1) ============================================================================= Per-panel colour schemes, selected in the Admin panel and applied by the layout as . One preset recolours EVERY panel, because all five load tokens.css + components.css. WHY NOT ANGLE'S FILES: the Angle theme (Content/site-theme-member) ships these palettes as 8 standalone stylesheets that recolour Angle's own chrome only — they do nothing for Admin (Inspinia), the guest home (Sigma) or DirectUser (plain Bootstrap). The palettes below are the SAME COLOURS, lifted verbatim from theme-a..theme-h, but expressed as token overrides so they apply everywhere and stay maintainable. Angle mapping: azure=a/e emerald=b/f violet=c/g crimson=d/h The "-deep" variants are Angle's dark-sidebar set (e-h); Member currently renders crimson-deep (theme-h). Each preset overrides SEMANTIC ALIASES ONLY, never ramp steps — same rule as components.css. That is what lets a preset compose with the light/dark data-theme switch instead of fighting it. GENERATED from the Angle sources; tints are computed, not eyeballed. ============================================================================= */ /* midnight — DirectUser's own navy + red identity, captured verbatim from the du-* shell it shipped with (navy #1A237E, CTA #C62828). It exists so putting that panel on tokens does NOT restyle it: DirectUser defaults to midnight and looks exactly as before, but becomes themeable like every other panel. Note this preset uses BOTH brand slots, which is why the shell distinguishes them: --ds-text-brand is the navy "primary" (headings, titles, primary buttons) and --ds-accent is the red call-to-action (active nav, new-shipment button, avatars). In the Angle-derived presets the two are just shades of one hue, so the same markup still reads correctly. */ [data-ds-theme="midnight"] { --ds-accent: #c62828; --ds-accent-hover: #a81f1f; --ds-accent-active: #8e0000; --ds-accent-subtle: #fee2e2; --ds-text-brand: #1a237e; --ds-border-brand: #1a237e; --ds-focus-ring: 0 0 0 3px rgba(198, 40, 40, 0.35); --ds-sidebar-bg: linear-gradient(180deg, #0c1660 0%, #1a237e 45%, #1f2c9b 100%); --ds-sidebar-fg: rgba(255, 255, 255, 0.62); --ds-sidebar-fg-active: #ffffff; --ds-sidebar-active-bg: rgba(255, 255, 255, 0.08); --ds-sidebar-heading: rgba(255, 255, 255, 0.28); --ds-topbar-bg: #ffffff; --ds-topbar-border: #eaecf0; --ds-topbar-from: #1a237e; --ds-topbar-to: #283593; --ds-accent-rgb: 198, 40, 40; --ds-brand-rgb: 26, 35, 126; } /* relite — the product default: Inspinia's brand green. Values match tokens.css, restated here so "Relite (default)" is a real, selectable option in the Admin picker rather than a magic empty string. */ [data-ds-theme="relite"] { --ds-accent: #1ab394; --ds-accent-hover: #109078; --ds-accent-active: #0e7361; --ds-accent-subtle: #eefbf6; --ds-text-brand: #109078; --ds-border-brand: #1ab394; --ds-focus-ring: 0 0 0 3px rgba(26, 179, 148, 0.35); --ds-sidebar-bg: #0f172a; --ds-sidebar-fg: #cbd5e1; --ds-topbar-from: #109078; --ds-topbar-to: #1ab394; --ds-accent-rgb: 26, 179, 148; --ds-brand-rgb: 16, 144, 120; } /* azure — Blue, light sidebar (Angle a) */ [data-ds-theme="azure"] { --ds-accent: #23b7e5; --ds-accent-hover: #19a5d1; --ds-accent-active: #1381a3; --ds-accent-subtle: #e5f6fc; --ds-text-brand: #19a5d1; --ds-border-brand: #23b7e5; --ds-focus-ring: 0 0 0 3px rgba(35, 183, 229, 0.35); --ds-sidebar-bg: #ffffff; --ds-sidebar-fg: #515253; --ds-topbar-from: #23b7e5; --ds-topbar-to: #51c6ea; --ds-accent-rgb: 35, 183, 229; --ds-brand-rgb: 25, 165, 209; /* #919DA8 is what every Angle theme-a..h uses for .sidebar .nav-heading, on both the light and dark sidebar. Without this the token default (neutral-500) leaked through. */ --ds-sidebar-heading: #919da8; } /* azure-deep — Blue, dark sidebar (Angle e) */ [data-ds-theme="azure-deep"] { --ds-accent: #23b7e5; --ds-accent-hover: #19a5d1; --ds-accent-active: #1381a3; --ds-accent-subtle: #e5f6fc; --ds-text-brand: #19a5d1; --ds-border-brand: #23b7e5; --ds-focus-ring: 0 0 0 3px rgba(35, 183, 229, 0.35); --ds-sidebar-bg: #3a3f51; --ds-sidebar-fg: #e1e2e3; --ds-topbar-from: #1797be; --ds-topbar-to: #23b7e5; --ds-accent-rgb: 35, 183, 229; --ds-brand-rgb: 25, 165, 209; /* #919DA8 is what every Angle theme-a..h uses for .sidebar .nav-heading, on both the light and dark sidebar. Without this the token default (neutral-500) leaked through. */ --ds-sidebar-heading: #919da8; } /* emerald — Green, light sidebar (Angle b) */ [data-ds-theme="emerald"] { --ds-accent: #37bc9b; --ds-accent-hover: #30a487; --ds-accent-active: #257d67; --ds-accent-subtle: #e7f7f3; --ds-text-brand: #30a487; --ds-border-brand: #37bc9b; --ds-focus-ring: 0 0 0 3px rgba(55, 188, 155, 0.35); --ds-sidebar-bg: #ffffff; --ds-sidebar-fg: #515253; --ds-topbar-from: #37bc9b; --ds-topbar-to: #58ceb1; --ds-accent-rgb: 55, 188, 155; --ds-brand-rgb: 48, 164, 135; /* #919DA8 is what every Angle theme-a..h uses for .sidebar .nav-heading, on both the light and dark sidebar. Without this the token default (neutral-500) leaked through. */ --ds-sidebar-heading: #919da8; } /* emerald-deep — Green, dark sidebar (Angle f) */ [data-ds-theme="emerald-deep"] { --ds-accent: #37bc9b; --ds-accent-hover: #30a487; --ds-accent-active: #257d67; --ds-accent-subtle: #e7f7f3; --ds-text-brand: #30a487; --ds-border-brand: #37bc9b; --ds-focus-ring: 0 0 0 3px rgba(55, 188, 155, 0.35); --ds-sidebar-bg: #3a3f51; --ds-sidebar-fg: #e1e2e3; --ds-topbar-from: #2b957a; --ds-topbar-to: #37bc9b; --ds-accent-rgb: 55, 188, 155; --ds-brand-rgb: 48, 164, 135; /* #919DA8 is what every Angle theme-a..h uses for .sidebar .nav-heading, on both the light and dark sidebar. Without this the token default (neutral-500) leaked through. */ --ds-sidebar-heading: #919da8; } /* violet — Purple, light sidebar (Angle c) */ [data-ds-theme="violet"] { --ds-accent: #7266ba; --ds-accent-hover: #5f51b0; --ds-accent-active: #4b408e; --ds-accent-subtle: #eeedf7; --ds-text-brand: #5f51b0; --ds-border-brand: #7266ba; --ds-focus-ring: 0 0 0 3px rgba(114, 102, 186, 0.35); --ds-sidebar-bg: #ffffff; --ds-sidebar-fg: #515253; --ds-topbar-from: #7266ba; --ds-topbar-to: #9289ca; --ds-accent-rgb: 114, 102, 186; --ds-brand-rgb: 95, 81, 176; /* #919DA8 is what every Angle theme-a..h uses for .sidebar .nav-heading, on both the light and dark sidebar. Without this the token default (neutral-500) leaked through. */ --ds-sidebar-heading: #919da8; } /* violet-deep — Purple, dark sidebar (Angle g) */ [data-ds-theme="violet-deep"] { --ds-accent: #7266ba; --ds-accent-hover: #5f51b0; --ds-accent-active: #4b408e; --ds-accent-subtle: #eeedf7; --ds-text-brand: #5f51b0; --ds-border-brand: #7266ba; --ds-focus-ring: 0 0 0 3px rgba(114, 102, 186, 0.35); --ds-sidebar-bg: #3a3f51; --ds-sidebar-fg: #e1e2e3; --ds-topbar-from: #564aa3; --ds-topbar-to: #7266ba; --ds-accent-rgb: 114, 102, 186; --ds-brand-rgb: 95, 81, 176; /* #919DA8 is what every Angle theme-a..h uses for .sidebar .nav-heading, on both the light and dark sidebar. Without this the token default (neutral-500) leaked through. */ --ds-sidebar-heading: #919da8; } /* crimson — Red, light sidebar (Angle d) */ /* scarlet — the GUEST site's own identity, captured verbatim from the Sigma theme's :root block (Content/site-theme/style.css:4-14). Guest defaults to this, so putting the public site on tokens does NOT restyle it: every value below is what --thm-* already held, and panel-sigma.css just re-points Sigma's variables at these. --thm-base #de1e07 -> --ds-accent --thm-base-hover #a21c0c -> --ds-accent-hover / -active --thm-base-hue #ffecea -> --ds-accent-subtle --thm-base-rgb 222,30,7 -> --ds-accent-rgb Not reusing crimson: that is Angle's #f05050, a different red. Mapping the guest site to it would have quietly rebranded the public pages. */ [data-ds-theme="scarlet"] { --ds-accent: #de1e07; --ds-accent-hover: #a21c0c; --ds-accent-active: #a21c0c; --ds-accent-subtle: #ffecea; --ds-text-brand: #de1e07; --ds-border-brand: #de1e07; --ds-focus-ring: 0 0 0 3px rgba(222, 30, 7, 0.35); /* The guest site has no sidebar; these exist only so the token contract is complete and a stray .sidebar rule can never resolve to nothing. */ --ds-sidebar-bg: #232230; --ds-sidebar-fg: #e1e1e1; --ds-topbar-from: #de1e07; --ds-topbar-to: #a21c0c; --ds-accent-rgb: 222, 30, 7; --ds-brand-rgb: 222, 30, 7; --ds-sidebar-heading: #919da8; } [data-ds-theme="crimson"] { --ds-accent: #f05050; --ds-accent-hover: #ee3434; --ds-accent-active: #dc1313; --ds-accent-subtle: #fdeaea; --ds-text-brand: #ee3434; --ds-border-brand: #f05050; --ds-focus-ring: 0 0 0 3px rgba(240, 80, 80, 0.35); --ds-sidebar-bg: #ffffff; --ds-sidebar-fg: #515253; --ds-topbar-from: #f05050; --ds-topbar-to: #f47f7f; --ds-accent-rgb: 240, 80, 80; --ds-brand-rgb: 238, 52, 52; /* #919DA8 is what every Angle theme-a..h uses for .sidebar .nav-heading, on both the light and dark sidebar. Without this the token default (neutral-500) leaked through. */ --ds-sidebar-heading: #919da8; } /* crimson-deep — Red, dark sidebar (Angle h) */ [data-ds-theme="crimson-deep"] { --ds-accent: #f05050; --ds-accent-hover: #ee3434; --ds-accent-active: #dc1313; --ds-accent-subtle: #fdeaea; --ds-text-brand: #ee3434; --ds-border-brand: #f05050; --ds-focus-ring: 0 0 0 3px rgba(240, 80, 80, 0.35); --ds-sidebar-bg: #3a3f51; --ds-sidebar-fg: #e1e2e3; --ds-topbar-from: #ec2121; --ds-topbar-to: #f05050; --ds-accent-rgb: 240, 80, 80; --ds-brand-rgb: 238, 52, 52; /* #919DA8 is what every Angle theme-a..h uses for .sidebar .nav-heading, on both the light and dark sidebar. Without this the token default (neutral-500) leaked through. */ --ds-sidebar-heading: #919da8; }