/* ============================================================================ SVS HRM — weergave 2 ("Kantoorlicht") — ontwerptokens Dit is de enige plek met kleurwaarden, maten en letters voor de nieuwe weergave. Alles in v2/*.css verwijst hiernaar. Wie een waarde nodig heeft die hier niet staat, mist een token — dan komt er een token bij, geen losse waarde in een regel. ## De uitgangspunten 1. **Inkt handelt, groen markeert.** De primaire knop is petrol (het donkere blauw uit het logo): 11,7:1 met wit, rustig, en hij staat niet in de weg. Het merkgroen doet wat een merkkleur hoort te doen: de actieve plek in de navigatie, de focus, een geslaagde handeling. Groen als knopkleur haalde met wit 3,8:1 en maakte elke pagina een groene pagina. 2. **Hoge dichtheid, weinig ruis.** Kleine stappen in de typografische schaal (1,125), één lijngewicht, geen schaduw op wat niet zweeft. Ruimte doet het werk van randen. 3. **Eén regelaar voor dichtheid.** `data-tekst` op (compact · normaal · groot) zet in één keer de letters, de regelhoogte, de hoogte van velden en knoppen, de rijhoogte én de ruimte. Zo blijft de verhouding overal gelijk. 4. **Elke tekstkleur haalt 4,5:1** op wit én op de grond. Gemeten; de uitkomst staat erbij. De oude tokennamen (--surface, --border, --svs-green-700 …) blijven bestaan en wijzen naar de nieuwe waarden. De schermspecifieke opmaak die uit de eerste weergave is overgenomen, blijft daardoor kloppen zonder dat elke regel om hoeft. ========================================================================= */ :root { /* ---- Dichtheid ------------------------------------------------------ */ --dichtheid: 1; /* ---- Merk ------------------------------------------------------------ */ --inkt-950: #16232E; /* 16,0:1 op wit */ --inkt-900: #203C47; /* 11,7:1 — primaire knop, koppen, actieve filter */ --inkt-800: #2A4A58; --inkt-700: #3B5D6D; /* 6,3:1 — links, iconen met nadruk */ --inkt-100: #E3EAEE; /* zachte inktvlakken */ --inkt-50: #F1F4F6; --groen-800: #356A11; /* hoverstand van de groene knop */ --groen-700: #3F7A16; /* 5,2:1 op wit — groene tekst, actieve navigatie */ --groen-600: #4D9329; /* vulling van een positieve knop (wit erop: 3,8) */ --groen-500: #63B32F; /* de logokleur; alleen als vlak en merkteken */ --groen-100: #E4F2D8; --groen-50: #F1F8EA; /* ---- Vlakken --------------------------------------------------------- */ --grond: #F4F6F8; /* het werkblad */ --vlak: #FFFFFF; /* kaarten, zijbalk, dialogen */ --vlak-zacht: #F9FAFB; /* tabelkop, hover van een regel */ --vlak-diep: #EDF1F4; /* ingedrukt, spoor van een balk, uitgeschakeld */ --vlak-diep-2:#E2E8ED; /* ---- Lijnen ---------------------------------------------------------- */ --rand: #E4E9ED; /* kaartrand, rijscheiding */ --rand-sterk: #D0D8DF; /* nadrukkelijke scheiding, secundaire knop */ --rand-invoer: #B8C4CE; /* invoervelden en vinkjes: 3,0:1 (WCAG 1.4.11) */ /* ---- Tekst ----------------------------------------------------------- */ --tekst: #1B2B37; /* 14,5:1 */ --tekst-2: #4B5A68; /* 7,1:1 — ondertitels, uitleg */ --tekst-3: #5F6E7C; /* 5,3:1 op wit, 4,9:1 op de grond — labels, meta */ --tekst-op-donker: #FFFFFF; --tekst-op-donker-2: #B7C4CE; /* ---- Status ---------------------------------------------------------- */ --succes: #2D7A2F; --succes-bg: #E8F5E9; --succes-rand: #BFE3C0; --letop: #9A5B00; --letop-bg: #FFF4E0; --letop-rand: #F2D9A6; --letop-vlak: #E08A1E; --gevaar: #B42323; --gevaar-bg: #FDECEC; --gevaar-rand: #F3C1C1; --gevaar-vlak: #C62828; --gevaar-hover: #9E1C1C; --info: #1F5F8A; --info-bg: #E8F1F8; --info-rand: #BFD6E6; --neutraal: #5B6875; --neutraal-bg: #EEF1F4; --neutraal-rand: #DCE2E8; /* Status op een donker vlak (de toast). */ --succes-op-donker: #A7D48F; --gevaar-op-donker: #F0A0A0; --letop-op-donker: #F0C38A; /* ---- Lagen ----------------------------------------------------------- */ --sluier: rgba(22, 35, 46, .42); --sluier-zacht: rgba(22, 35, 46, .32); --schaduw-1: 0 1px 2px rgba(22, 35, 46, .06); --schaduw-2: 0 6px 20px rgba(22, 35, 46, .12), 0 2px 6px rgba(22, 35, 46, .06); --schaduw-3: 0 24px 60px rgba(22, 35, 46, .22), 0 8px 20px rgba(22, 35, 46, .10); --schaduw-inlog: var(--schaduw-3); /* ---- Vorm ------------------------------------------------------------ */ --radius-1: 6px; /* badges, kleine knoppen */ --radius-2: 8px; /* velden, knoppen, navigatie-items */ --radius-3: 10px; /* kaarten, panelen */ --radius-4: 14px; /* dialogen */ --radius-pil: 999px; /* ---- Letter ---------------------------------------------------------- */ --letter: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --letter-vast: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --regelhoogte: 1.45; --regelhoogte-kop: 1.25; --label-spatie: .02em; --label-gewicht: 600; /* ---- Beweging -------------------------------------------------------- */ --duur-snel: 120ms; --duur-normaal: 160ms; --duur-traag: 220ms; --soepel: cubic-bezier(.2, 0, 0, 1); --uitloop: cubic-bezier(.16, 1, .3, 1); /* ---- Maatvoering ----------------------------------------------------- */ --zijbalk: 248px; --zijbalk-smal: 64px; --topbalk: 56px; --zijnav: 220px; --content-max: 1360px; --raakvlak: 44px; /* op aanraakschermen; zie basis.css */ --focusring: 2px; --focus-gloed: 0 0 0 3px var(--groen-100); --lijn-zone: 1px; --lijn-regel: 1px; --lamp: 8px; /* ---- Ruimte ---------------------------------------------------------- */ --eenheid: calc(4px * var(--dichtheid)); --ruimte-1: calc(var(--eenheid) * 1); --ruimte-2: calc(var(--eenheid) * 2); --ruimte-3: calc(var(--eenheid) * 3); --ruimte-4: calc(var(--eenheid) * 4); --ruimte-5: calc(var(--eenheid) * 6); --ruimte-6: calc(var(--eenheid) * 8); --ruimte-7: calc(var(--eenheid) * 10); --ruimte-8: calc(var(--eenheid) * 12); --ruimte-9: calc(var(--eenheid) * 16); --inspring: var(--ruimte-4); --blad-x: var(--ruimte-6); /* horizontale marge van het werkblad */ --blad-y: var(--ruimte-5); /* ---- Typografische schaal (× dichtheid) ------------------------------ 11 · 12 · 13 · 14 · 16 · 18 · 22 · 28. Stap ≈ 1,125: klein genoeg voor een gereedschap met veel tekstsoorten naast elkaar. */ --tekst-xs: calc(11px * var(--dichtheid)); --tekst-s: calc(12px * var(--dichtheid)); --tekst-m: calc(13px * var(--dichtheid)); --tekst-l: calc(14px * var(--dichtheid)); --tekst-xl: calc(16px * var(--dichtheid)); --tekst-kaart: calc(14.5px * var(--dichtheid)); --tekst-sectie: calc(18px * var(--dichtheid)); --tekst-pagina: calc(22px * var(--dichtheid)); --tekst-groot: calc(28px * var(--dichtheid)); --tekst-kpi: calc(24px * var(--dichtheid)); /* ---- Controls en rijen (× dichtheid) --------------------------------- */ --knop-hoogte: calc(36px * var(--dichtheid)); --knop-hoogte-klein: calc(30px * var(--dichtheid)); --veld-hoogte: calc(36px * var(--dichtheid)); --rij-hoogte: calc(44px * var(--dichtheid)); --regel-lucht: var(--ruimte-3); --regel-lucht-boven: var(--ruimte-4); /* ---- Proefletters in de tekstgroottekiezer -------------------------- */ --monster-compact: 12.5px; --monster-normaal: 14px; --monster-groot: 16px; /* ====================================================================== Oude namen → nieuwe waarden. Bewust volledig, zodat elke overgenomen regel uit de eerste weergave zonder aanpassing op dit palet landt. ====================================================================== */ --svs-ink-950: var(--inkt-950); --svs-ink-900: var(--inkt-900); --svs-ink-700: var(--inkt-700); --svs-secundair: var(--inkt-900); --svs-secundair-licht: var(--inkt-700); --svs-primair: var(--groen-500); --svs-primair-donker: var(--groen-600); --svs-primair-tekst: var(--groen-700); --svs-primair-zacht: var(--groen-50); --svs-primair-rand: var(--groen-100); --svs-primair-vorm: var(--groen-700); --svs-green-500: var(--groen-500); --svs-green-600: var(--groen-600); --svs-green-700: var(--groen-700); --svs-green-800: var(--groen-700); --svs-green-100: var(--groen-100); --svs-green-50: var(--groen-50); --accent: var(--inkt-900); --accent-hover: var(--inkt-800); --accent-zacht: var(--groen-50); --accent-rand: var(--groen-100); --accent-tekst: var(--groen-700); --accent-vorm: var(--groen-700); --tekst-op-accent: #FFFFFF; --canvas: var(--grond); --veld: var(--grond); --veld-diep: var(--vlak-diep); --venster: var(--vlak); --venster-rustig: var(--vlak-zacht); --frame: var(--vlak); --frame-licht: var(--vlak-zacht); --surface: var(--vlak); --surface-subtle: var(--vlak-zacht); --surface-sunken: var(--vlak-diep); --surface-diep: var(--vlak-diep); --border: var(--rand); --border-strong: var(--rand-sterk); --border-interactive: var(--rand-invoer); --text-primary: var(--tekst); --text-secondary: var(--tekst-2); --text-muted: var(--tekst-3); --text-on-dark: var(--tekst-op-donker); --text-on-dark-muted: var(--tekst-op-donker-2); --danger: var(--gevaar); --danger-bg: var(--gevaar-bg); --danger-border: var(--gevaar-rand); --danger-hover: var(--gevaar-hover); --danger-vlak: var(--gevaar-vlak); --danger-lijn: var(--gevaar); --warning: var(--letop); --warning-bg: var(--letop-bg); --warning-border: var(--letop-rand); --warning-vlak: var(--letop-vlak); --information: var(--info); --information-bg: var(--info-bg); --information-border: var(--info-rand); --information-vlak: var(--inkt-700); --success: var(--succes); --success-bg: var(--succes-bg); --success-border: var(--succes-rand); --success-vlak: var(--groen-600); --neutral: var(--neutraal); --neutral-bg: var(--neutraal-bg); --neutral-border: var(--neutraal-rand); } /* ---- De drie dichtheden ---------------------------------------------------- Eén regelaar. Compact zet alles op 90 %, groot op 115 %: letters, velden, knoppen, rijen én de ruimte eromheen. Zo houdt een tabel zijn verhoudingen en wordt "groot" niet "grote letters in dezelfde krappe vakjes". */ :root, :root[data-tekst="normaal"] { --dichtheid: 1; } :root[data-tekst="compact"] { --dichtheid: .9; --regelhoogte: 1.4; } :root[data-tekst="groot"] { --dichtheid: 1.15; --regelhoogte: 1.5; } /* Op een aanraakscherm is 44 px de ondergrens voor alles wat je met een vinger raakt — een gebruikseis (monteurs, handschoenen), geen formaliteit. */ @media (hover: none) and (pointer: coarse) { :root { --knop-hoogte: max(44px, calc(36px * var(--dichtheid))); --veld-hoogte: max(44px, calc(36px * var(--dichtheid))); /* Ook de kleine knop haalt 44. Hij heet klein omdat hij visueel minder gewicht hoort te hebben dan de hoofdknop naast zich, niet omdat hij moeilijker te raken mag zijn — en "Bevestigen" en "Intrekken" zijn kleine knoppen. */ --knop-hoogte-klein: max(44px, calc(30px * var(--dichtheid))); } }