/* ============================================================================ SVS HRM — design tokens "Quiet premium HR operations" Eén bron voor kleur, ruimte, vorm, typografie en beweging. Kleurwaarden staan hier en in `merk.css`; nergens anders. Wie er toch een nodig heeft, mist een token. ## De bron is het werkbonnenportaal Elke kleur hieronder komt uit `Werkbonnen/frontend/src/index.css`. Wijkt een waarde hier daarvan af, dan is dat een fout in dít systeem — niet een afweging. `merk.css` laadt hierna en zet de laatste tokens die dit bestand niet kent. ⚠ **Niet elk paar haalt WCAG 2.2 AA, en dat is bewust.** Wit op het merkgroen haalt 2,68:1, `--text-muted` op de grond 4,21:1, het rood op wit 4,38:1. Die drie staan zo in het werkbonnenportaal, en de opdrachtgever heeft op 5 september 2026 met die getallen op tafel gekozen om gelijk te zijn aan dat portaal. Wie het wil rechttrekken doet dat in béide systemen tegelijk. Hier stond eerder dat élk paar de norm haalde en dat een paar dat zakt "geen ontwerpkeuze maar een fout" is. Die regel klopte niet meer met de code, en heeft ertoe geleid dat vier waarden stilletjes van het portaal wegdreven. ========================================================================= */ :root { /* ---- Merk: ink ------------------------------------------------------ */ --svs-ink-950: #1B2B37; /* 14,99:1 op wit */ --svs-ink-900: #243746; /* 11,67:1 — primaire knop, navigatie, koppen */ --svs-ink-700: #34506A; /* 6,75:1 */ /* ---- Merk: groen ---------------------------------------------------- Twee groenen, twee rollen — dezelfde splitsing als in het werkbonnenportaal: `--groen` vult vlakken, `--groen-donker` draagt tekst en vorm. Meer standen zijn er niet. Groen betekent handeling, geen versiering: gevulde knoppen, actieve navigatie, links, geselecteerde regels. Grote vlakken blijven wit of grond. */ --accent: #5FB133; /* = --groen. Vult. Wit erop haalt 2,68:1 — bewust */ --accent-hover: #4D9329; /* = --groen-donker */ --accent-zacht: #EEF6E8; /* achtergrond van een actief navigatie-item */ --accent-rand: #CFE7BF; --tekst-op-accent: #FFFFFF; /* = --op-primair in het werkbonnenportaal */ --svs-green-500: #5FB133; /* de logokleur; vult */ --svs-green-600: #4D9329; /* de drie 600/700/800 zijn nu dezelfde kleur: */ --svs-green-700: #4D9329; /* het werkbonnenportaal kent maar één donkergroen. */ --svs-green-800: #4D9329; /* 3,80:1 op wit — tekst, links, randen */ --svs-green-100: #EEF6E8; --svs-green-50: #F6FBF2; /* ---- Vlakken --------------------------------------------------------- Witte kaarten op een koel getinte grond, precies als in het werkbonnenportaal (`--bg` #f4f6f9, `--kaart` #ffffff). ⚠ De namen `--veld`, `--venster` en `--frame` hieronder komen uit een poging in 0.17.0 om hier een donker "schakelpaneel" van te maken — gelakt front, uitgespaarde vensters, donkere omkasting. Dat is teruggedraaid omdat de opdracht "het moet licht zijn" was. Ze staan er alleen nog als alias zodat bestaande regels niet stilvallen; bouw er niets nieuws mee. Zie `docs/HISTORIE-ONTWERP.md`. */ --grond: #F4F6F9; /* de lichte grond waarop kaarten staan */ --vlak: #FFFFFF; /* kaart, zijbalk, dialoog */ --vlak-zacht: #FAFBFD; /* kopband van een kaart, gestreepte rij */ --vlak-diep: #EEF1F5; /* ingedrukt vlak, spoor, balkachtergrond */ /* Namen uit de vorige ronde blijven werken zodat niets stilvalt. */ --veld: var(--grond); --veld-diep: var(--vlak-diep); --venster: var(--vlak); --venster-rustig: var(--vlak-zacht); --frame: var(--vlak); --frame-licht: var(--vlak-zacht); /* De oude namen blijven bestaan zodat niets stilvalt, maar wijzen naar de nieuwe rollen. */ --canvas: var(--veld); --surface: var(--venster); --surface-subtle: var(--venster-rustig); --surface-sunken: var(--veld-diep); /* ---- Randen --------------------------------------------------------- Twee soorten, want ze hebben verschillende eisen. Een scheidingslijn is decoratie en mag licht zijn. De rand van een invoerveld of keuzevakje draagt betekenis — die valt onder WCAG 1.4.11 en moet 3:1 halen. */ /* Alle drie uit het werkbonnenportaal: `--rand` #e3e8ee en `--rand-kaart` #d7dde6. Dat portaal kent geen aparte rand voor invoervelden — die staan daar ook op `--rand`. Hier bestaat `--border-interactive` nog als apart token; het staat op #C3CCD8, tussen de twee in. */ --border: #E3E8EE; /* = --rand: kaartrand en rijscheiding */ --border-strong: #D7DDE6; /* = --rand-kaart: nadrukkelijker scheiding */ --border-interactive: #C3CCD8; /* invoer en keuzevakjes */ /* ---- Tekst ---------------------------------------------------------- Het werkbonnenportaal zet `color: var(--blauw)` op de body — alle lopende tekst is daar marineblauw, niet zwart. Dat is het meest herkenbare kenmerk van die interface. Secundair en zacht zijn allebei `--grijs`. ⚠ #6B7785 haalt 4,56:1 op wit maar 4,21:1 op de grond. Het HRM zette ze eerder een stap donkerder om overal boven 4,5 te blijven; dat is op verzoek teruggedraaid ten gunste van gelijkheid met het portaal. */ --text-primary: #243746; /* = --blauw: 11,7:1 op wit */ --text-secondary: #6B7785; /* = --grijs: 4,56:1 op wit · 4,21:1 op de grond */ --text-muted: #6B7785; /* = --grijs, zelfde waarde */ --text-on-dark: #FFFFFF; --text-on-dark-muted: #B9C6D2; /* ---- Status --------------------------------------------------------- Rood en oranje zijn `--rood` #d64545 en `--oranje` #e08a1e uit het werkbonnenportaal, zowel als vlak als als tekst. Het HRM zette ze eerder donkerder (#B93330 / #8A5200) om 4,5:1 te halen; teruggedraaid, zie de kop. */ --danger: #D64545; --danger-bg: #FDECEC; --danger-border: #F5CFCF; --warning: #E08A1E; --warning-bg: #FDF3E3; --warning-border: #F2DFBC; --information: #2C6B8C; --information-bg: #EAF3F8; --information-border: #C8DEEB; --success: #4D9329; --success-bg: #EEF6E8; --success-border: #CFE7BF; --neutral: #5C6874; --neutral-bg: #EEF1F5; --neutral-border: #DDE3EA; /* ---- Ruimte: 8-punts ------------------------------------------------ */ --ruimte-1: 4px; --ruimte-2: 8px; --ruimte-3: 12px; --ruimte-4: 16px; --ruimte-5: 24px; --ruimte-6: 32px; --ruimte-7: 40px; --ruimte-8: 48px; --ruimte-9: 64px; /* ---- Inspringing ----------------------------------------------------- Eén maat voor de horizontale inspringing van álles wat inhoud draagt: de kop van een kaart, het lijf, de voet, een regel, een tabelcel. Hier stonden veertien verschillende waarden door elkaar, waarvan zes rauwe pixels (3, 4, 6, 7, 10, 12). Het gevolg was op elk scherm te meten: dertien tot vijfendertig verschillende linkerranden, met clusters als 292 · 300 · 309 · 314 · 316 die allemaal hetzelfde hadden moeten zijn. Dat leest als slordig omdat het slordig ís — het oog ziet die verspringing wel, ook als je niet kunt benoemen wat er mis is. Wat híérbinnen zit, springt niet nóg een keer in. Eén stap, en dat is de rand van de kaart. */ --inspring: 16px; /* ---- Vorm ----------------------------------------------------------- */ /* 10 / 12 / 16 uit het werkbonnenportaal (`--radius-sm` / `--radius` / `--radius-lg`). --radius-2 stond hier op 8px terwijl merk.css hem op 10 zette; dat is nu gelijk. --radius-1 kent het portaal niet en is van dit systeem. */ --radius-1: 6px; /* badges, kleine merktekens */ --radius-2: 10px; /* = --radius-sm: invoer, knoppen, navigatie-items */ --radius-3: 12px; /* = --radius: kaarten */ --radius-4: 16px; /* = --radius-lg: dialogen */ --radius-pil: 999px; /* ---- Diepte --------------------------------------------------------- Randen dragen de scheiding; schaduw alleen waar iets écht zweeft. */ --schaduw-1: 0 1px 3px rgba(36, 55, 70, .08), 0 1px 2px rgba(36, 55, 70, .06); --schaduw-2: 0 4px 14px rgba(36, 55, 70, .10), 0 2px 4px rgba(36, 55, 70, .06); --schaduw-3: 0 18px 48px rgba(36, 55, 70, .20); /* ---- Typografie ------------------------------------------------------ De maten staan verderop per tekstgrootte. Hier alleen wat niet meeschaalt. */ /* De systeemletter, letterlijk de stack uit `Werkbonnen/frontend/src/index.css`. Dat portaal laadt geen enkel lettertypebestand; de tekst staat er in de letter van het apparaat. Het HRM laadde Inter en zag er daardoor anders uit — dat is eruit. Scheelt ook een woff2 van 90 KB en een preload onder de strikte CSP. */ --letter: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --regelhoogte: 1.5; --regelhoogte-kop: 1.25; /* Zonelabels op een paneel zijn gegraveerd: klein, gespatieerd, kapitaal. */ --label-spatie: .04em; --label-gewicht: 620; /* ---- Beweging ------------------------------------------------------- 120–220 ms. Alles wat langer duurt voelt als wachten, niet als vloeiend. */ --duur-snel: 120ms; --duur-normaal: 180ms; --duur-traag: 220ms; --soepel: cubic-bezier(.2, 0, 0, 1); --uitloop: cubic-bezier(.16, 1, .3, 1); /* ---- Maatvoering ----------------------------------------------------- */ --zijbalk: 244px; --zijbalk-smal: 64px; --content-max: 1440px; --raakvlak: 44px; --focusring: 3px; /* ---- Breekpunten ----------------------------------------------------- Drie, en niet meer. Ze staan hier als documentatie: een mediaquery kan geen custom property lezen, dus de waarden staan in de regels zelf. Wijk je af, dan pakt de ene component anders uit dan de andere en is er niemand meer die weet waarom. 767px telefoon — één kolom, onderbalk, dialoog schermvullend 899px smalle rij — de regel vouwt om, sleufvolgorde blijft 1023px tablet — zijbalk weg, werkblad over de volle breedte */ /* ---- Status op een donker vlak --------------------------------------- De statuskleuren hierboven zijn gemeten op wit. Op de donkere toast halen ze het niet: daar is een lichtere waarde nodig. Dat zijn geen nieuwe kleuren maar dezelfde betekenissen op een andere ondergrond, en ze hoorden een naam te hebben in plaats van als losse hexcode in een component te staan. */ --succes-op-donker: #A7D48F; /* 8,9:1 op ink-950 */ --gevaar-op-donker: #E89999; /* 7,4:1 op ink-950 */ --letop-op-donker: #EEBF83; /* 9,6:1 op ink-950 */ /* ---- Tweede letterfamilie --------------------------------------------- Alleen voor iets wat teken voor teken gelezen moet worden: een wachtwoord, een sleutel, een IMEI. Daar helpt een vaste breedte, want dan zie je het verschil tussen 0 en O en tussen 1 en l. */ --letter-vast: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; /* ---- Proefmonster tekstgrootte --------------------------------------- De drie letters in de tekstgroottekiezer tonen de verhouding tussen de standen. Ze schalen bewust NIET mee met de gekozen stand: dan zouden ze alledrie meegroeien en valt er niets te vergelijken. De waarden zijn de leesmaten (--tekst-l) van compact, normaal en groot. */ --monster-compact: 13px; --monster-normaal: 14.5px; --monster-groot: 16.5px; /* ---- Paneelgrammatica ------------------------------------------------ Een schakelpaneel scheidt met lijnen, niet met dozen. Twee lijngewichten: de zonegrens die je moet zien, en de regelscheiding die alleen ordent. */ --lijn-zone: 1px; --lijn-regel: 1px; --lamp: 8px; /* de vaste diameter van een statuslampje */ --graveerdiepte: 2px; /* de inzet van een actief zonemerkteken */ } /* ======================================================================== Tekstgrootte — compact · normaal · groot Eén regelaar, geen twee. De verleiding is om tekstgrootte en informatie- dichtheid apart instelbaar te maken; dat levert vier combinaties op waarvan een gebruiker die hier een paar keer per week komt de uitkomst niet kan voorspellen. Elke stap verzet daarom beide tegelijk: letters én de ruimte eromheen. Wie groter zet, krijgt ook meer lucht — precies wat hij bedoelde. Normaal is bewust aan de compacte kant. Dit is gereedschap, geen brochure. ===================================================================== */ :root, :root[data-tekst="normaal"] { --tekst-xs: 11.5px; --tekst-s: 12.5px; --tekst-m: 13px; --tekst-l: 14px; --tekst-xl: 16px; /* 16 voorkomt inzoomen op iOS */ --tekst-kaart: 15px; --tekst-sectie: 18px; --tekst-pagina: 24px; --rij-hoogte: 44px; --veld-hoogte: 38px; --regel-lucht-boven: var(--ruimte-4); --regel-lucht: var(--ruimte-3); } :root[data-tekst="compact"] { --tekst-xs: 11px; --tekst-s: 11.5px; --tekst-m: 12.5px; --tekst-l: 13px; --tekst-xl: 16px; --tekst-kaart: 14.5px; --tekst-sectie: 17px; --tekst-pagina: 22px; --rij-hoogte: 38px; --veld-hoogte: 34px; --regel-lucht-boven: var(--ruimte-3); --regel-lucht: var(--ruimte-2); } :root[data-tekst="groot"] { --tekst-xs: 13px; --tekst-s: 14px; --tekst-m: 15.5px; --tekst-l: 16.5px; --tekst-xl: 18px; --tekst-kaart: 18.5px; --tekst-sectie: 23px; --tekst-pagina: 30px; --rij-hoogte: 54px; --veld-hoogte: 46px; --regel-lucht-boven: var(--ruimte-5); --regel-lucht: var(--ruimte-4); } /* Donkere modus is bewust nog niet gebouwd. De tokens staan hierboven zo opgezet dat één override-blok volstaat: alle componenten verwijzen naar semantische namen (--surface, --text-primary) en nergens naar een merkkleur rechtstreeks. Een halfwerkende donkere modus is erger dan geen. */