/* ============================================================================ LS Suite — design tokens ---------------------------------------------------------------------------- Eén bron voor het uiterlijk van alle modules: Platform, Grid, Scope, DocGen, MAT en Voice. Wie een kleur, maat of lettergrootte nodig heeft, pakt hem hier. REGELS 1. Nieuwe CSS gebruikt var(--lss-*). Schrijf geen losse hexwaarde meer. 2. Verandert de huisstijl, dan verandert dit bestand — verder niets. 3. Betekeniskleuren (goed/waarschuwing/fout/indicatief) zijn GEEN huisstijl. Ze dragen informatie en veranderen niet mee met het accent van een tenant. 4. Modules mogen --lss-accent per tenant overschrijven (white-label). Alles wat daarvan afgeleid is, volgt dan vanzelf. Laad dit bestand VÓÓR de eigen stylesheet van de module. ========================================================================== */ :root { /* --- Letter --------------------------------------------------------------- Inter staat vooraan maar wordt nergens als webfont geladen; in de praktijk rendert alles op het systeemfont. Dat is bewust: geen externe fontbron, geen flits bij laden, en op elk platform de best leesbare UI-letter. Zetten we Inter later wel als bestand in, dan hoeft alleen dit blok mee. */ --lss-font: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --lss-font-mono: ui-monospace, SFMono-Regular, Menlo, "Courier New", monospace; --lss-fs-xs: 11px; /* eyebrow, legenda */ --lss-fs-sm: 12px; /* tabelkop, badge */ --lss-fs-base: 13px; /* tabelcel, formulier */ --lss-fs-md: 14px; /* lopende tekst, knop */ --lss-fs-lg: 16px; /* paneelkop */ --lss-fs-xl: 20px; /* paginakop */ --lss-fs-2xl: 28px; /* kengetal */ --lss-lh-krap: 1.25; --lss-lh-basis: 1.55; --lss-lh-ruim: 1.8; --lss-tracking-kop: -.02em; /* koppen mogen strakker */ --lss-tracking-label: .09em; /* uppercase labels ademen */ /* --- Kleur: grond en inkt ------------------------------------------------- Het grijs helt licht naar het accent; een neutraal grijs oogt onbedoeld. */ --lss-bg: #ffffff; /* de pagina */ --lss-bg-soft: #f5f6f8; /* rustvlak achter panelen */ --lss-surface: #ffffff; /* paneel, kaart, tabel */ --lss-surface-alt: #fafbfc; /* tabelkop, ingesprongen rij */ --lss-border: #e3e5ea; /* zichtbare scheiding */ --lss-border-soft: #eff0f3; /* nauwelijks zichtbaar */ --lss-border-mid: #c9ced8; /* invoerveld, actieve rand */ --lss-text: #1a1f2e; /* lopende tekst */ --lss-muted: #5a6070; /* bijschrift, tweede regel */ --lss-faint: #9198a8; /* label, lege waarde */ /* --- Kleur: accent -------------------------------------------------------- Eén blauw. Per tenant te overschrijven; de rest volgt. */ --lss-accent: #3b6cb3; --lss-accent-hover: #2f5a9a; --lss-accent-light: #eef2fb; /* wash achter accent-tekst */ /* --- Kleur: betekenis ----------------------------------------------------- Deze vier zeggen iets over de INHOUD, niet over de merkstijl. Ze blijven staan als een tenant een eigen accent kiest — anders leest een gebruiker "goed" als "merkkleur". */ --lss-ok: #1a5c2a; --lss-ok-bg: #f0f7f2; --lss-warn: #8a5a1f; --lss-warn-bg: #fdf1dc; /* Aparte tint voor rand-accenten (3px-balken, linkerranden van kaarten). --lss-warn is gedempt oker: als tekst leest dat rustig, maar als balk oogt het bruinig — niet als "let op" maar als vuil. Een rand heeft meer verzadiging nodig dan letters. Gebruik --lss-warn voor tekst, --lss-warn-rand voor randen. */ --lss-warn-rand: #c8791a; --lss-crit: #8c2f2f; --lss-crit-bg: #fdf0f0; --lss-indicatief: #1668a8; --lss-indicatief-bg: #e4f0fa; /* --- Maatvoering ---------------------------------------------------------- Eén schaal, geen tussenmaten. Ruimte komt uit gap, niet uit margin. */ --lss-sp-1: 4px; --lss-sp-2: 8px; --lss-sp-3: 12px; --lss-sp-4: 16px; --lss-sp-5: 24px; --lss-sp-6: 32px; --lss-sp-7: 48px; --lss-r-sm: 4px; /* badge, invoerveld */ --lss-r-md: 6px; /* knop, paneel */ --lss-r-lg: 14px; /* kaart op de etalage */ --lss-rij: 34px; /* hoogte van een tabelrij — dicht genoeg om te scannen */ /* --- Diepte --------------------------------------------------------------- Spaarzaam. Een paneel ligt op de pagina, niet erboven te zweven. */ --lss-schaduw: 0 1px 2px rgba(26,31,46,.05), 0 1px 3px rgba(26,31,46,.04); --lss-schaduw-menu: 0 4px 16px rgba(26,31,46,.12); --lss-schaduw-modal: 0 8px 32px rgba(26,31,46,.18); --lss-focus: 0 0 0 3px rgba(59,108,179,.28); /* toetsenbordfocus, altijd zichtbaar */ --lss-overgang: .15s ease; } /* --------------------------------------------------------------------------- Donkere weergave Drie standen: expliciet donker, expliciet licht, en "systeem" (niets gezet). Daarom zowel de mediaquery als de stempel, allebei via dezelfde tokens. Nog niet uitgerold in de modules; het blok staat er zodat de eerste module die het aanzet niet zelf een palet hoeft te verzinnen. ------------------------------------------------------------------------- */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --lss-bg: #14171f; --lss-bg-soft: #1a1e27; --lss-surface: #1c2029; --lss-surface-alt: #22262f; --lss-border: #2c313c; --lss-border-soft: #24282f; --lss-border-mid: #3d4350; --lss-text: #e8eaef; --lss-muted: #a3a9b8; --lss-faint: #737a8a; --lss-accent: #6d9bdd; --lss-accent-hover: #85addf; --lss-accent-light: #1e2937; --lss-ok: #6fc98a; --lss-ok-bg: #16281c; --lss-warn: #e0aa5e; --lss-warn-bg: #2b2113; --lss-warn-rand: #d9913c; --lss-crit: #e08585; --lss-crit-bg: #2b1717; --lss-indicatief: #6fb4e8; --lss-indicatief-bg: #142433; --lss-schaduw: 0 1px 2px rgba(0,0,0,.35), 0 1px 3px rgba(0,0,0,.25); --lss-schaduw-menu: 0 4px 16px rgba(0,0,0,.45); --lss-schaduw-modal: 0 8px 32px rgba(0,0,0,.55); --lss-focus: 0 0 0 3px rgba(109,155,221,.35); } } :root[data-theme="dark"] { --lss-bg: #14171f; --lss-bg-soft: #1a1e27; --lss-surface: #1c2029; --lss-surface-alt: #22262f; --lss-border: #2c313c; --lss-border-soft: #24282f; --lss-border-mid: #3d4350; --lss-text: #e8eaef; --lss-muted: #a3a9b8; --lss-faint: #737a8a; --lss-accent: #6d9bdd; --lss-accent-hover: #85addf; --lss-accent-light: #1e2937; --lss-ok: #6fc98a; --lss-ok-bg: #16281c; --lss-warn: #e0aa5e; --lss-warn-bg: #2b2113; --lss-warn-rand: #d9913c; --lss-crit: #e08585; --lss-crit-bg: #2b1717; --lss-indicatief: #6fb4e8; --lss-indicatief-bg: #142433; --lss-schaduw: 0 1px 2px rgba(0,0,0,.35), 0 1px 3px rgba(0,0,0,.25); --lss-schaduw-menu: 0 4px 16px rgba(0,0,0,.45); --lss-schaduw-modal: 0 8px 32px rgba(0,0,0,.55); --lss-focus: 0 0 0 3px rgba(109,155,221,.35); } /* --------------------------------------------------------------------------- Overgangslaag De modules gebruiken vandaag eigen namen. Die wijzen we hier naar de tokens toe, zodat het uiterlijk in één keer gelijkgetrokken is zonder dat er in de modules iets hoeft te veranderen. Per module opruimen mag daarna rustig; zolang een regel hier staat, blijft de oude naam werken. ------------------------------------------------------------------------- */ :root { /* Platform (public/assets/css/app.css) */ --accent: var(--lss-accent); --accent-hover: var(--lss-accent-hover); --accent-light: var(--lss-accent-light); --bg: var(--lss-bg); --bg-soft: var(--lss-bg-soft); --panel: var(--lss-surface); --border: var(--lss-border); --border-soft: var(--lss-border-soft); --text: var(--lss-text); --text-sec: var(--lss-muted); --text-faint: var(--lss-faint); --shadow-card: var(--lss-schaduw); --shadow-hover: var(--lss-schaduw-menu); /* Deze vier stonden in app.css alleen als fallback binnen var(...) en waren nergens gedefinieerd; de fallbackwaarden kwamen van buiten het palet. */ --warn: var(--lss-warn); --warn-text: var(--lss-warn); --warn-bg: var(--lss-warn-bg); --warn-border: var(--lss-border); --danger: var(--lss-crit); --danger-light: var(--lss-crit-bg); --vlak: var(--lss-surface-alt); /* Grid (assets/app.css) Grid gebruikte --bg voor het rustvlak achter de kaarten, terwijl het platform daarmee "de pagina is wit" bedoelt. Eén naam, twee betekenissen — daarom verwijst Grid nu rechtstreeks naar --lss-bg-soft. */ --surface: var(--lss-surface); --border-mid: var(--lss-border-mid); --text-mid: var(--lss-muted); --text-dim: var(--lss-faint); --pos: var(--lss-ok); --pos-bg: var(--lss-ok-bg); --neg: var(--lss-crit); --neg-bg: var(--lss-crit-bg); --radius: var(--lss-r-sm); --mono: var(--lss-font-mono); --sans: var(--lss-font); /* Grid matrix (assets/matrix2.css) */ --m2-accent: var(--lss-accent); --m2-accent-zacht: var(--lss-accent-light); --m2-accent-hover: var(--lss-accent-hover); --m2-goed: var(--lss-ok); --m2-goed-bg: var(--lss-ok-bg); --m2-slecht: var(--lss-crit); --m2-slecht-bg: var(--lss-crit-bg); --m2-waarschuw: var(--lss-warn); --m2-waarschuw-bg: var(--lss-warn-bg); --m2-indicatief: var(--lss-indicatief); --m2-indicatief-bg: var(--lss-indicatief-bg); --m2-schaduw: var(--lss-schaduw); --m2-schaduw-groot: var(--lss-schaduw-modal); --waarschuw: var(--lss-warn); --indicatief: var(--lss-indicatief); --m2-waarsch: var(--lss-warn); /* schrijffout in matrix2.css:956 */ /* Website / etalage (lssuite.css) */ --lss-accent-light-compat: var(--lss-accent-light); --lss-border-light: var(--lss-border-soft); } /* --------------------------------------------------------------------------- Bewaking tests/toets_tokens.py — modules zetten geen eigen tokens, geen zwevende var(), geen kleurfallbacks, elke lichte kleur heeft een donkere tegenhanger, betekeniskleuren ≠ accent ../ls-grid/tests/toets_tokens.php — de kopie in Grid is gelijk aan dit bestand Beide toetsen zijn gecontroleerd door ze te saboteren: een weggehaald token, een betekeniskleur gelijk aan het accent, een ontbrekende donkere waarde, een herstelde fallback en een gewijzigde kopie werden allemaal gepakt. ------------------------------------------------------------------------- */