/* * The LSBS design tokens — the SINGLE definition of the palette, the spacing, * type, radius, elevation and motion scales, and the font stack. Two faces of * the product read this file: * * - the SPA, which @imports it from styles.css; * - the pre-auth login page, which is served by Mason/PSGI (nginx gates * /spa/ behind auth_request, so login CANNOT be the React app) and links * the very same file statically as /data/css/tokens.css. * * debian/rules copies THIS file to /usr/share/lsbs/www/css/tokens.css. Never * hand-maintain a second copy: the login page and the dashboard looking like * two different products is exactly the drift this file exists to prevent. * EBox/t/Login.t fails if styles.css starts redeclaring these itself. * * THEMES (Brief 61). The product was dark-only by decree. It now follows the * operator's OS preference and accepts an explicit override, stamped onto * . * * BOTH faces carry the control (2026-07-22). The SPA stamps the attribute from * the box preference; the login page has no session to read that from, so it * keeps its own choice in the lsbs_theme cookie and the SERVER stamps the * attribute before the first byte — no flash of the wrong colours. The SPA * mirrors the box preference into that same cookie, so after any authenticated * visit the login screen of that browser matches the box. * * CONTRAST IS A GATE, NOT A TASTE. Every foreground/background pair below is * checked against WCAG AA in BOTH themes by tools/check-contrast, which fails * the build. If you change a colour, run it. */ :root { color-scheme: light dark; /* ---- Scales. Theme-independent: these do not change between light and dark. Everything in styles.css resolves to a step on one of them, so spacing stops being re-invented per component. ---- */ /* Spacing — a 4px base, geometric. */ --space-0: 0; --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-7: 3rem; --space-8: 4rem; /* Type — size paired with the line-height it is meant to be set at. Derived from what the components already do, not an invented ladder. */ --font-size-xs: 0.72rem; --font-size-sm: 0.82rem; --font-size-md: 0.95rem; --font-size-lg: 1.05rem; --font-size-xl: 1.35rem; --font-size-2xl: 1.9rem; --line-height-tight: 1.2; --line-height-normal: 1.5; --line-height-loose: 1.65; --font-weight-normal: 400; --font-weight-medium: 500; --font-weight-bold: 650; --letter-spacing-eyebrow: 0.08em; /* Radius */ --radius-1: 6px; --radius-2: 10px; --radius-3: 14px; --radius-4: 18px; --radius-round: 999px; /* Elevation — the three steps the product actually uses: a resting card, a raised panel, and a modal above everything. */ --elevation-1: 0 1px 2px #0000001a; --elevation-2: 0 18px 45px #00000026; --elevation-3: 0 30px 70px #00000040; /* Motion. Honoured only when the operator has not asked for less of it — see the prefers-reduced-motion block at the end of this file. */ --duration-fast: 90ms; --duration-medium: 180ms; --duration-slow: 320ms; --ease-standard: cubic-bezier(0.2, 0, 0.2, 1); --ease-out: cubic-bezier(0, 0, 0.2, 1); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; /* ---- Palette: LIGHT is the base declaration. ---- */ --bg: #f4f6fa; --surface: #ffffff; --surface-raised: #eaeff7; --line: #76859f; --text: #10182a; --muted: #4d5871; --accent: #0a6c46; --accent-strong: #075030; --warning: #7a4b00; --danger: #a3121f; --glow: 10 108 70; --focus: #075030; /* Semantic surfaces. styles.css used to hard-code 81 dark-tuned colours for these; they are the reason light mode could not simply be "added". Each status has a surface, a border and the text colour that must be legible on it -- all three checked by tools/check-contrast in both themes. */ --on-accent: #ffffff; --inset: #e2e8f2; --ok-surface: #e2f4ea; --ok-border: #5f9e80; --warning-surface: #fbf0da; --warning-border: #9c7529; --danger-surface: #fce9eb; --danger-border: #c07a82; --info: #0a4f96; --info-surface: #e5eff9; --info-border: #5d8cbb; --on-danger: #ffffff; --hero-tint: #dfe7f4; --overlay: #10182ae6; --switch-off: #78788052; --switch-edge: #3c3c432e; --switch-on: #34c759; --switch-knob: #ffffff; --switch-shadow: #00000040; background: var(--bg); color: var(--text); } /* ---- Palette: DARK, when the operator's OS asks for it. ---- */ @media (prefers-color-scheme: dark) { :root { --bg: #0b101b; --surface: #121a2a; --surface-raised: #182338; --line: #5a6d8f; --text: #f4f7fb; --muted: #a9b8cd; --accent: #64d8a4; --accent-strong: #8fe6be; --warning: #ffcc66; --danger: #ff97a1; --glow: 100 216 164; --focus: #8be8bd; --on-accent: #07140e; --inset: #0b1220; --ok-surface: #26301f; --ok-border: #6d8a52; --warning-surface: #322a17; --warning-border: #a4823a; --danger-surface: #48222b; --danger-border: #b45f6d; --info: #9ecbff; --info-surface: #14263c; --info-border: #4a72a0; --on-danger: #240a0f; --hero-tint: #17243a; --overlay: #0b101bf2; --on-danger: #240a0f; --hero-tint: #17243a; --overlay: #0b101bf2; --switch-off: #787880; --switch-edge: #ffffff1f; --switch-on: #30d158; --switch-knob: #ffffff; --switch-shadow: #00000066; } } /* ---- Explicit override. The SPA stamps data-theme on ; these must win over the media query in BOTH directions, which is why each theme is spelled out in full rather than only the deltas. ---- */ :root[data-theme="light"] { --bg: #f4f6fa; --surface: #ffffff; --surface-raised: #eaeff7; --line: #76859f; --text: #10182a; --muted: #4d5871; --accent: #0a6c46; --accent-strong: #075030; --warning: #7a4b00; --danger: #a3121f; --glow: 10 108 70; --focus: #075030; /* Semantic surfaces. styles.css used to hard-code 81 dark-tuned colours for these; they are the reason light mode could not simply be "added". Each status has a surface, a border and the text colour that must be legible on it -- all three checked by tools/check-contrast in both themes. */ --on-accent: #ffffff; --inset: #e2e8f2; --ok-surface: #e2f4ea; --ok-border: #5f9e80; --warning-surface: #fbf0da; --warning-border: #9c7529; --danger-surface: #fce9eb; --danger-border: #c07a82; --info: #0a4f96; --info-surface: #e5eff9; --info-border: #5d8cbb; --on-danger: #ffffff; --hero-tint: #dfe7f4; --overlay: #10182ae6; --switch-off: #78788052; --switch-edge: #3c3c432e; --switch-on: #34c759; --switch-knob: #ffffff; --switch-shadow: #00000040; color-scheme: light; } :root[data-theme="dark"] { --bg: #0b101b; --surface: #121a2a; --surface-raised: #182338; --line: #5a6d8f; --text: #f4f7fb; --muted: #a9b8cd; --accent: #64d8a4; --accent-strong: #8fe6be; --warning: #ffcc66; --danger: #ff97a1; --glow: 100 216 164; --focus: #8be8bd; --on-accent: #07140e; --inset: #0b1220; --ok-surface: #26301f; --ok-border: #6d8a52; --warning-surface: #322a17; --warning-border: #a4823a; --danger-surface: #48222b; --danger-border: #b45f6d; --info: #9ecbff; --info-surface: #14263c; --info-border: #4a72a0; --on-danger: #240a0f; --hero-tint: #17243a; --overlay: #0b101bf2; --switch-off: #787880; --switch-edge: #ffffff1f; --switch-on: #30d158; --switch-knob: #ffffff; --switch-shadow: #00000066; color-scheme: dark; } /* An operator who has asked for less motion gets none of it. This is the one place it needs saying: every transition in the product is expressed with the duration tokens above. */ @media (prefers-reduced-motion: reduce) { :root { --duration-fast: 0ms; --duration-medium: 0ms; --duration-slow: 0ms; } }