/* * Ontwerptokens van het portaal (kaart #7, aangescherpt in kaart #72 op de Ontwerprichtlijn in * UX.md): kleur, typografie, ruimte, maten, radius, schaduw en focusring. Schermen gebruiken alleen * deze variabelen via de componenten in componenten.css, nooit eigen CSS. Donkere modus is niet in * deze kaart. * * Statuskleuren volgen de aanlevering van de FF-ontwerper: per status een tekstkleur, een vlak, * een rand en een bol, bewust los van de accentkleur. Kleur is nooit de enige drager: elke status * heeft een tekstlabel en een vorm (bol, vinkje, kruis) naast de kleur. Afwijkingen van de * FF-aanlevering staan in UX.md onder Ontwerpsysteem. * * Contrast (WCAG 2.1 AA: 4,5:1 voor tekst, 3:1 voor niet-tekst), gemeten tegen de achtergrond * waarop de kleur staat. test/unit/portal/design.test.ts rekent elke regel hieronder na. * --kleur-tekst #1b2430 op #ffffff 15,65:1 * --kleur-tekst #1b2430 op #f4f6f9 14,46:1 * --kleur-tekst #1b2430 op #eef1f5 13,82:1 * --kleur-tekst-zacht #4a5565 op #ffffff 7,56:1 * --kleur-tekst-zacht #4a5565 op #f4f6f9 6,98:1 * --kleur-tekst-zacht #4a5565 op #eef1f5 6,67:1 * --kleur-primair als tekst #0b4f8a op #ffffff 8,40:1 * --kleur-primair als tekst #0b4f8a op #f4f6f9 7,76:1 * --kleur-primair als tekst #0b4f8a op #e6eff8 7,23:1 * --kleur-op-primair #ffffff op #0b4f8a 8,40:1 * --kleur-op-primair #ffffff op #083c69 11,29:1 * --kleur-op-gevaar #ffffff op #a31f1f 7,57:1 * --kleur-op-gevaar #ffffff op #7d1616 10,51:1 * --kleur-gevaar als tekst #a31f1f op #ffffff 7,57:1 * --kleur-fout-tekst #8f1d1d op #fbeaea 7,65:1 * --kleur-fout-tekst #8f1d1d op #ffffff 8,89:1 * --kleur-succes-tekst #1d5e2c op #e8f4ea 6,90:1 * --kleur-waarschuwing-tekst #6b4500 op #fdf3dc 7,68:1 * --kleur-info-tekst #0b4f8a op #e6eff8 7,23:1 * --kleur-neutraal-tekst #4a5565 op #eceff3 6,55:1 * --kleur-focus #b35c00 op #ffffff 4,72:1 niet-tekst (ring van 3px) * --kleur-focus #b35c00 op #f4f6f9 4,36:1 niet-tekst * --kleur-rand-sterk #8a96a6 op #ffffff 3,00:1 niet-tekst (invoerrand) * --kleur-status-wacht-bol #9a6a08 op #fdf3dc 4,29:1 niet-tekst * --kleur-status-loopt-bol #0b4f8a op #e6eff8 7,23:1 niet-tekst * --kleur-status-mislukt-bol #c22f2f op #fbeaea 4,83:1 niet-tekst * --kleur-status-voltooid-bol #1a8a4f op #e8f4ea 3,87:1 niet-tekst * --kleur-status-neutraal-bol #6f7b8c op #eceff3 3,73:1 niet-tekst */ :root { /* Kleur: basis */ --kleur-achtergrond: #f4f6f9; --kleur-vlak: #ffffff; --kleur-vlak-2: #eef1f5; --kleur-rand: #c9d1dc; --kleur-rand-zacht: #e3e8ee; --kleur-rand-sterk: #8a96a6; /* Kleur: tekst */ --kleur-tekst: #1b2430; --kleur-tekst-zacht: #4a5565; --kleur-op-donker: #ffffff; /* Kleur: accent (één primaire actie per scherm) en gevaar (onomkeerbaar, met bevestiging) */ --kleur-primair: #0b4f8a; --kleur-primair-actief: #083c69; --kleur-primair-vlak: #e6eff8; --kleur-op-primair: #ffffff; --kleur-gevaar: #a31f1f; --kleur-gevaar-actief: #7d1616; --kleur-op-gevaar: #ffffff; /* Kleur: meldingen */ --kleur-fout-tekst: #8f1d1d; --kleur-fout-vlak: #fbeaea; --kleur-fout-rand: #d99a9a; --kleur-succes-tekst: #1d5e2c; --kleur-succes-vlak: #e8f4ea; --kleur-succes-rand: #9ccaa6; --kleur-waarschuwing-tekst: #6b4500; --kleur-waarschuwing-vlak: #fdf3dc; --kleur-waarschuwing-rand: #e2c27a; --kleur-info-tekst: #0b4f8a; --kleur-info-vlak: #e6eff8; --kleur-info-rand: #9dbbd9; --kleur-neutraal-tekst: #4a5565; --kleur-neutraal-vlak: #eceff3; --kleur-neutraal-rand: #c9d1dc; /* Kleur: status (tekst, vlak, rand, bol). wacht = wacht op een mens of besluit; loopt = de motor is bezig; mislukt; voltooid; geen-rechten; neutraal = nog niet aan de beurt, overgeslagen, gestopt, uit. */ --kleur-status-wacht-tekst: var(--kleur-waarschuwing-tekst); --kleur-status-wacht-vlak: var(--kleur-waarschuwing-vlak); --kleur-status-wacht-rand: var(--kleur-waarschuwing-rand); --kleur-status-wacht-bol: #9a6a08; --kleur-status-loopt-tekst: var(--kleur-info-tekst); --kleur-status-loopt-vlak: var(--kleur-info-vlak); --kleur-status-loopt-rand: var(--kleur-info-rand); --kleur-status-loopt-bol: #0b4f8a; --kleur-status-mislukt-tekst: var(--kleur-fout-tekst); --kleur-status-mislukt-vlak: var(--kleur-fout-vlak); --kleur-status-mislukt-rand: var(--kleur-fout-rand); --kleur-status-mislukt-bol: #c22f2f; --kleur-status-voltooid-tekst: var(--kleur-succes-tekst); --kleur-status-voltooid-vlak: var(--kleur-succes-vlak); --kleur-status-voltooid-rand: var(--kleur-succes-rand); --kleur-status-voltooid-bol: #1a8a4f; --kleur-status-neutraal-tekst: var(--kleur-neutraal-tekst); --kleur-status-neutraal-vlak: var(--kleur-neutraal-vlak); --kleur-status-neutraal-rand: var(--kleur-neutraal-rand); --kleur-status-neutraal-bol: #6f7b8c; --kleur-status-geen-rechten-tekst: var(--kleur-neutraal-tekst); --kleur-status-geen-rechten-vlak: var(--kleur-neutraal-vlak); --kleur-status-geen-rechten-rand: var(--kleur-rand-sterk); --kleur-status-geen-rechten-bol: #6f7b8c; /* Kleur: focus */ --kleur-focus: #b35c00; /* Typografie: één systeemfont-stack, zes maten met elk een eigen regelhoogte (UX.md, Ontwerprichtlijn, Typografische schaal). mini = metadata en dichte tabelcellen; klein = hint, tabelcel, status; basis = lopende tekst, velden, knoppen; kop3 = kop van een paneel in een kolom; kop2 = kop van een kaart; kop1 = titel van het scherm (op een smal scherm één stap kleiner). */ --font-basis: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-grootte-mini: 0.8125rem; --font-grootte-klein: 0.875rem; --font-grootte-basis: 1rem; --font-grootte-kop3: 1.125rem; --font-grootte-kop2: 1.25rem; --font-grootte-kop1: 1.625rem; --regelhoogte: 1.5; --regelhoogte-dicht: 1.4; --regelhoogte-kop: 1.25; --regelhoogte-kop1: 1.2; --gewicht-normaal: 400; --gewicht-vet: 600; --cijfers: tabular-nums; --letterafstand-kop: 0.01em; /* Ruimte: schaal van 4 (UX.md, Ontwerprichtlijn, Spacing-schaal: 1 en 2 binnen een element, 3 en 4 binnen een component, 5 en 6 tussen componenten en als paneelpadding, 8 tussen secties, 10 en 12 rond een pagina of een grote lege staat). */ --ruimte-1: 0.25rem; --ruimte-2: 0.5rem; --ruimte-3: 0.75rem; --ruimte-4: 1rem; --ruimte-5: 1.25rem; --ruimte-6: 1.5rem; --ruimte-8: 2rem; --ruimte-10: 2.5rem; --ruimte-12: 3rem; /* Padding van een paneel (kaart, besluitpaneel, afmeldpaneel, bevestiging); op een smal scherm één stap kleiner (zie onderaan). De tabelhouder gebruikt dezelfde waarde als negatieve marge. */ --ruimte-paneel: var(--ruimte-6); --ruimte-sectie: var(--ruimte-8); /* Maten */ --breedte-inhoud: 80rem; --breedte-smal: 28rem; --breedte-tekst: 70ch; --breedte-knop-min: 6.5rem; --breedte-tijd: 7.5rem; --hoogte-klik: 2.75rem; --hoogte-klik-klein: 2.25rem; --hoogte-rij: 2.75rem; --hoogte-rij-dicht: 2.25rem; --hoogte-status: 1.5rem; /* Radius */ --hoek-klein: 4px; --hoek: 6px; --hoek-groot: 10px; --hoek-rond: 999px; /* Schaduw: alleen op zwevende of uitgelichte vlakken */ --schaduw-1: 0 1px 2px rgba(27, 36, 48, 0.06), 0 1px 4px rgba(27, 36, 48, 0.04); --schaduw-2: 0 4px 16px rgba(27, 36, 48, 0.12); /* Focusring: altijd zichtbaar, nooit alleen kleur van de rand */ --focusring: 0 0 0 3px var(--kleur-focus); --focusring-binnen: inset 0 0 0 3px var(--kleur-focus); } /* Smal scherm (390 px): titel één stap kleiner, paneelpadding één stap kleiner. De componenten lezen deze tokens; zo blijft het responsieve gedrag op één plek. */ @media (max-width: 47.9375rem) { :root { --font-grootte-kop1: 1.5rem; --ruimte-paneel: var(--ruimte-4); --ruimte-sectie: var(--ruimte-6); } }