/* ========================================================================== Rekenzicht — designtokens De uitvoerbare waarheid bij DESIGNTAAL.md. Wijkt de code hiervan af, dan heeft dit bestand gelijk. Wijkt DESIGNTAAL.md hiervan af, dan is dat een bug in de documentatie. Alle contrastwaarden in commentaar zijn gemeten tegen --paper (#FBFBFD) volgens WCAG 2.1, tenzij anders vermeld. ========================================================================== */ :root { /* --- Fundament: ongewijzigd geërfd van Cijferwijzer --------------------- Deze waarden maken het familielid herkenbaar. Niet aanpassen zonder dat Cijferwijzer meebeweegt. */ --ink: #191A2C; /* 16.58:1 AAA primaire tekst */ --ink-soft: #565A73; /* 6.54:1 AA secundaire tekst */ --paper: #FBFBFD; /* paginaondergrond */ --card: #FFFFFF; /* verhoogd vlak */ --sunk: #F2F3F8; /* verdiept vlak */ --rule: #E3E5EE; /* 1.22:1 decoratieve scheidingslijn */ /* Tweede gerepareerd erfstuk: --rule haalt 1.22:1 en voldoet daarmee niet aan WCAG 1.4.11 (3:1) zodra een lijn de begrenzing van een bedienbaar element is. Zie DESIGNTAAL.md §5.4 voor wanneer je welke gebruikt. */ --rule-strong: #828AB3; /* 3.26:1 papier · 3.37 kaart · 3.04 sunk rand van invoervelden en bedienbare vlakken */ /* Gerepareerd erfstuk: Cijferwijzers #8A8FA6 haalt 2.89:1 op --sunk en zakt daarmee door AA. Zie DESIGNTAAL.md §4.2 voor de gebruiksregel. */ --ink-faint: #6E738C; /* 4.52:1 AA meta-tekst, nooit op --sunk */ /* --- Ruggengraat: eigen aan Rekenzicht --------------------------------- */ --peil: #14657E; /* 6.36:1 AA primaire actie, accent */ --peil-strong: #0E4B5E; /* 9.29:1 AAA hover, actieve staat */ --peil-wash: #E8F1F5; /* vlakvulling, selectie */ --peil-on: #FFFFFF; /* 6.58:1 AA tekst óp --peil */ /* --- Drempel: het semantische hart ------------------------------------ Elke drempelkleur bestaat in twee varianten. Een -fill als tekstkleur gebruiken is een fout, geen smaakkwestie. Zie DESIGNTAAL.md §6.3. */ --boven-fill: #2E9E6B; /* 3.27:1 balken, blokken, stippen */ --boven-text: #176B45; /* 6.30:1 labels, tabelcellen, badges */ --boven-wash: #E9F5EF; /* rijmarkering */ --onder-fill: #D2662F; /* 3.58:1 balken, blokken, stippen */ --onder-text: #A34618; /* 5.90:1 labels, tabelcellen, badges */ --onder-wash: #FBEFE8; /* rijmarkering */ --drempel-lijn: #191A2C; /* de drempellijn zelf: inkt, nooit een drempelkleur */ /* --- Domeinkleuren ----------------------------------------------------- De acht rekendomeinen van Cijferwijzer. Vier zijn identiek; vier zijn minimaal verdonkerd omdat het origineel onder 3:1 zakt en in een dashboard met dunne balken onleesbaar wordt. Uitsluitend non-text: stippen, balken, randen. Nooit tekstkleur. Zie DESIGNTAAL.md §7.2. */ --dom-optellen: #0A84FF; /* 3.53:1 identiek aan Cijferwijzer */ --dom-keer: #AF52DE; /* 4.00:1 identiek aan Cijferwijzer */ --dom-breuken: #5856D6; /* 5.47:1 identiek aan Cijferwijzer */ --dom-grafieken: #FF2D55; /* 3.53:1 identiek aan Cijferwijzer */ --dom-geld: #2CA64A; /* 3.05:1 was #34C759 (2.15:1) */ --dom-klok: #D37C00; /* 3.05:1 was #FF9500 (2.13:1) */ --dom-meten: #2B9EB3; /* 3.06:1 was #30B0C7 (2.49:1) */ --dom-meetkunde: #00A29B; /* 3.06:1 was #00C7BE (2.05:1) */ /* --- Functioneel ------------------------------------------------------- */ --gevaar: #B3261E; /* 6.32:1 verwijderen, onomkeerbaar */ --gevaar-wash: #FBEBEA; --focus: var(--peil); --focus-offset: 2px; --focus-breedte: 3px; /* --- Typografie -------------------------------------------------------- Geërfd van Cijferwijzer. Rekenzicht voegt gewicht 700 aan Source Sans toe voor tabelkoppen in de zichtmodus. */ --font-display: "Nunito", "SF Pro Rounded", -apple-system, "Segoe UI", sans-serif; --font-body: "Source Sans 3", -apple-system, "Segoe UI", Roboto, sans-serif; --tracking-display: -0.02em; /* Nunito 800 loopt los op grote maten */ --tracking-caps: 0.08em; /* bovenschriftlabels in kapitaal */ /* --- Ruimte ------------------------------------------------------------ 4px-basis, 8px-ritme. Elke marge is een veelvoud hiervan. */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; /* --- Elevatie ---------------------------------------------------------- Geërfd. In de zichtmodus zweven datatabellen niet: die gebruiken --rule in plaats van schaduw. Zie DESIGNTAAL.md §5.3. */ --shadow-card: 0 1px 2px rgba(25, 26, 44, .04), 0 8px 24px rgba(25, 26, 44, .06); --shadow-lift: 0 2px 4px rgba(25, 26, 44, .05), 0 18px 48px rgba(25, 26, 44, .12); /* --- Print ------------------------------------------------------------- Rapportage op papier is een primaire uitvoer, geen bijzaak. --paper kost inkt en levert op papier niets op, dus print heeft eigen ondergronden. Zie DESIGNTAAL.md §13. */ --print-paper: #FFFFFF; --print-ink: #000000; /* 21:1 op --print-paper */ --print-rule: #000000; --duur-snel: 120ms; --duur-normaal: 200ms; --easing: cubic-bezier(.2, .7, .3, 1); } /* ========================================================================== Modi Componenten gebruiken uitsluitend de generieke tokens (--radius, --text-base). De moduswrapper vult ze in. Zo bestaat elk component één keer en gedraagt het zich correct in beide werelden. of ========================================================================== */ [data-modus="zicht"] { /* Docent. Strak, dicht, informatiedragend. */ --radius-sm: 6px; --radius: 10px; --radius-lg: 14px; --text-xs: 12px; --lh-xs: 16px; --text-sm: 13px; --lh-sm: 18px; --text-base: 15px; --lh-base: 22px; --text-lg: 17px; --lh-lg: 24px; --text-xl: 20px; --lh-xl: 28px; --text-2xl: 26px; --lh-2xl: 32px; --text-3xl: 34px; --lh-3xl: 40px; } [data-modus="toets"] { /* Kind. Warm, ruim, één ding tegelijk. */ --radius-sm: 12px; --radius: 16px; --radius-lg: 24px; --text-xs: 14px; --lh-xs: 20px; --text-sm: 16px; --lh-sm: 24px; --text-base: 18px; --lh-base: 28px; --text-lg: 22px; --lh-lg: 30px; --text-xl: 28px; --lh-xl: 36px; --text-2xl: 40px; --lh-2xl: 48px; --text-3xl: 56px; --lh-3xl: 64px; } /* ========================================================================== Basisregels die geen component mag overtreden ========================================================================== */ body { background: var(--paper); color: var(--ink); font-family: var(--font-body); font-size: var(--text-base); line-height: var(--lh-base); } /* Elk getal dat in een kolom onder een ander getal kan staan, is tabulair. Zonder dit leest een docent een klaskolom verkeerd. */ .rz-cijfer, [data-modus="zicht"] td, [data-modus="zicht"] th { font-variant-numeric: tabular-nums lining; font-feature-settings: "tnum" 1, "lnum" 1; } /* Toetsbrede sommen staan in de displayfont, tabulair, zodat 111 en 999 even breed zijn en het antwoordveld niet verspringt. */ .rz-som { font-family: var(--font-display); font-weight: 800; font-size: var(--text-3xl); line-height: var(--lh-3xl); letter-spacing: var(--tracking-display); font-variant-numeric: tabular-nums lining; } :focus-visible { outline: var(--focus-breedte) solid var(--focus); outline-offset: var(--focus-offset); border-radius: var(--radius-sm); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }