/* Theme of the operator admin. It overrides Lumo custom properties, it does not bring a framework of its own. Gallery and studio are unaffected - they are a separate SPA (ADR-0006). Comments are English per CLAUDE.md; the German ones this file used to carry were translated when the colour layer was added. */ /* palette.css is not checked in here: maven-resources-plugin copies it out of brand/palette.css at generate-resources, so the nine brand values exist exactly once in the repository. A vaadin theme can only import from inside its own folder, which is why the file has to travel. */ @import url("palette.css"); /* Lumo defaults to touch sizing and is too generous for a desktop admin. The values below are the density step from @vaadin/vaadin-lumo-styles/presets/compact.css (Apache 2.0), deliberately written out instead of imported: every value stays individually adjustable and the frontend build does not depend on a bare-module resolution. The stronger selector is needed because Lumo itself uses :where(). */ :root, :host { --lumo-size-xl: 3rem; --lumo-size-l: 2.5rem; --lumo-size-m: 2rem; --lumo-size-s: 1.75rem; --lumo-size-xs: 1.5rem; --lumo-font-size: 1rem; --lumo-font-size-xxxl: 1.75rem; --lumo-font-size-xxl: 1.375rem; --lumo-font-size-xl: 1.125rem; --lumo-font-size-l: 1rem; --lumo-font-size-m: 0.875rem; --lumo-font-size-s: 0.8125rem; --lumo-font-size-xs: 0.75rem; --lumo-font-size-xxs: 0.6875rem; --lumo-line-height-m: 1.4; --lumo-line-height-s: 1.2; --lumo-line-height-xs: 1.1; --lumo-space-xl: 1.875rem; --lumo-space-l: 1.25rem; --lumo-space-m: 0.625rem; --lumo-space-s: 0.3125rem; --lumo-space-xs: 0.1875rem; } html { --lumo-font-family: system-ui, -apple-system, "Segoe UI", sans-serif; --lumo-border-radius-m: 4px; --lumo-border-radius-l: 6px; } /* ─── Colour ─────────────────────────────────────────────────────────────────────────────── The app runs on @Theme(variant = Lumo.DARK), so carries theme="dark". Two facts about Lumo 25 decide the selector below, both read out of @vaadin/vaadin-lumo-styles rather than remembered: - the light values live in :where(:root) (props/color.css) - specificity 0-0-0, any :root override beats them; - the dark values live in [theme~='dark'] (global/color-scheme.css) and re-declare EVERY colour flat. That selector has specificity 0-1-0, exactly as much as :root, so a :root override would win only by source order. html[theme~='dark'] is 0-1-1 and wins regardless of the order the theme files end up in. Only the base, the tint ramp and the accents are re-pointed. The shade ramp, the error red and the geometry stay Lumo's - a dark admin gets its depth from black, and a red that is not red is not a warning. */ html[theme~="dark"] { /* the page: navy instead of Vaadin's blue-grey */ --lumo-base-color: var(--brand-navy); /* Every surface, border and muted text in Lumo is a tint of the base. Re-mixing the ramp from cream instead of Vaadin's light blue is what actually carries the brand - setting --lumo-base-color alone would leave every panel and hairline cold. The steps keep Lumo's own alpha curve. */ --lumo-tint-5pct: color-mix(in srgb, var(--brand-cream) 6%, transparent); --lumo-tint-10pct: color-mix(in srgb, var(--brand-cream) 14%, transparent); --lumo-tint-20pct: color-mix(in srgb, var(--brand-cream) 23%, transparent); --lumo-tint-30pct: color-mix(in srgb, var(--brand-cream) 32%, transparent); --lumo-tint-40pct: color-mix(in srgb, var(--brand-cream) 41%, transparent); --lumo-tint-50pct: color-mix(in srgb, var(--brand-sage) 50%, transparent); --lumo-tint-60pct: color-mix(in srgb, var(--brand-sage) 62%, transparent); --lumo-tint-70pct: color-mix(in srgb, var(--brand-sage) 78%, transparent); --lumo-tint-80pct: color-mix(in srgb, var(--brand-cream) 82%, transparent); --lumo-tint-90pct: color-mix(in srgb, var(--brand-cream) 91%, transparent); --lumo-tint: var(--brand-cream); /* Primary is gold, not green: green on navy is 2.4:1 and unusable, gold is 8.2:1 - and what writes on a gold fill is navy, never white. --lumo-primary-text-color is the link and icon colour ON the page, so it takes the lighter gold. */ --lumo-primary-color: var(--brand-gold); --lumo-primary-color-50pct: color-mix(in srgb, var(--brand-gold) 50%, transparent); --lumo-primary-color-10pct: color-mix(in srgb, var(--brand-gold) 14%, transparent); --lumo-primary-text-color: var(--brand-gold-soft); --lumo-primary-contrast-color: var(--brand-navy); /* Warning has to move out of the way: Lumo's dark warning is hsl(43 100% 48%), which is the gold almost exactly - and the job monitor paints WorkerHealth.STALE with it right next to primary buttons. Pulled towards orange so the two read apart. The collision is not fatal either way: WorkerHealth.java carries a plain word next to every colour on purpose, because a colour-blind operator still has to read the table. */ --lumo-warning-color: color-mix(in srgb, var(--brand-gold) 55%, var(--lumo-error-color)); --lumo-warning-color-10pct: color-mix(in srgb, var(--brand-gold) 12%, transparent); --lumo-warning-text-color: color-mix(in srgb, var(--lumo-warning-color) 62%, var(--brand-cream)); --lumo-warning-contrast-color: var(--brand-navy); /* Success keeps a green that survives on navy - the brand green does not (2.4:1), so this one is lifted towards sage rather than taken from the palette. */ --lumo-success-color: color-mix(in srgb, var(--brand-green) 55%, var(--brand-sage)); --lumo-success-text-color: color-mix(in srgb, var(--brand-green) 25%, var(--brand-sage)); --lumo-success-contrast-color: var(--brand-navy); }