/* ============================================================================= * design-tokens.css — enige bron van waarheid voor kleur, typografie en ruimte * ============================================================================= * * Overgenomen uit het Claude Design-ontwerp voor de nieuwe interface. De waarden * hieronder zijn GEMETEN uit het ontwerpbestand (op frequentie), niet bedacht. * * Opbouw in twee lagen: * 1. PALET — de ruwe kleuren uit het ontwerp, neutraal benoemd. * 2. ROLLEN — semantische tokens (tekst, oppervlak, rand, ...). Componenten * gebruiken UITSLUITEND rollen, nooit het palet direct. Zo kan * een kleur van betekenis veranderen zonder alle CSS te raken. * * Twee plekken waar bewust van het ontwerp is afgeweken; beide staan hieronder * met een REGULARISATIE- of CONTRAST-noot erbij gedocumenteerd. * ---------------------------------------------------------------------------- */ :root { /* == 1. PALET ============================================================ */ /* Merk */ --p-teal-900: #005645; /* primair; icoonbalk, koppen, links (59x in ontwerp) */ --p-teal-700: #1D3017; --p-lime-500: #A7C142; /* accent (75x) - NOOIT als tekstkleur, zie contrast */ --p-lime-700: #5F7A1F; /* accent donker, wel tekstveilig (48x) */ --p-lime-800: #6E8C1E; --p-lime-900: #3D5310; /* Inkt en grijzen (grijs-groen getint, niet neutraal) */ --p-ink-900: #22302B; /* (182x) */ --p-ink-700: #4C5A54; /* (77x) */ --p-ink-500: #6B7873; /* (73x) */ --p-ink-400: #8A968F; /* (292x) - decoratief; als TEKST te licht, zie contrast */ --p-ink-base: 30, 42, 38; /* #1E2A26 als RGB-triplet voor rgba()-randen */ /* Oppervlakken */ --p-cream-100: #EDEAE1; /* paginagrond */ --p-cream-50: #F6F4EE; /* appoppervlak */ --p-cream-75: #F0EEE7; --p-cream-150: #EAE7DE; --p-white: #FFFFFF; /* kaart (115x) */ /* Data en signaal */ --p-blue-500: #3395AA; /* datareeks (41x) */ --p-warm-500: #867859; /* verlies / vloeibaar (52x) */ --p-warm-300: #BFB093; --p-gold-500: #E8C86A; /* licht (PAR) */ --p-warm-100: #F7EDD3; --p-red-600: #B94728; /* bestaand OCAP-rood, behouden voor fouten */ /* Groentinten voor vullingen en grafieken */ --p-green-50: #F4F7EC; --p-green-100: #EEF4E2; --p-green-200: #E4E7D2; --p-green-300: #D9E5BE; --p-green-400: #CFE0A4; --p-green-500: #C9DA93; /* == 2. ROLLEN =========================================================== */ /* -- Oppervlak -- */ --surface-ground: var(--p-cream-100); /* achtergrond van de pagina */ --surface-app: var(--p-cream-50); /* werkgebied binnen de shell */ --surface-card: var(--p-white); --surface-sunken: var(--p-cream-150); --surface-rail: var(--p-teal-900); /* 64px icoonbalk */ /* -- Tekst -- * CONTRAST: de tekstrollen zijn getoetst op WCAG 2.1 AA (4.5:1 voor normale * tekst) tegen ZOWEL --surface-ground als --surface-card. Dat is hier geen * formaliteit: het ontwerp zet labels op 9,5px en die dichtheid houden we. * * Het ontwerp gebruikt drie grijstrappen (#4C5A54 / #6B7873 / #8A968F). De * lichtste haalt 2,55:1 op de crèmegrond en valt dus af als tekstkleur - * terwijl het de meest gebruikte kleur in het ontwerp is (292x). Zodra alle * drie AA moeten halen op de crèmegrond vallen trap 2 en 3 vrijwel samen * (#616D68 en #636C67), dus de schaal is teruggebracht tot DRIE rollen * waarvan de lichtste op #636C67 ligt: dezelfde bedoeling (wegvallend grijs) * op een waarde die leesbaar is. * * Wil je exact het ontwerp, inclusief de te lichte trap: zet * --text-subtle terug op var(--p-ink-400). Eén regel, en de rest volgt. */ --text-strong: var(--p-ink-900); /* 11,4:1 grond - koppen, cijfers */ --text-default: var(--p-ink-700); /* 6,0:1 grond - broodtekst */ --text-subtle: #636C67; /* 4,5:1 grond - labels, eenheden */ --text-on-dark: var(--p-white); /* 8,7:1 op de icoonbalk */ --text-on-accent: var(--p-ink-900); /* 6,8:1 - NIET wit, zie contrast */ --text-link: var(--p-teal-900); /* 8,7:1 kaart */ --text-link-hover: var(--p-lime-700); /* -- Rand -- randen zijn één inktkleur op wisselende alpha, geen grijstinten */ --border-hair: rgba(var(--p-ink-base), .07); --border-subtle: rgba(var(--p-ink-base), .10); --border-default: rgba(var(--p-ink-base), .12); --border-strong: rgba(var(--p-ink-base), .16); --border-on-dark: rgba(255, 255, 255, .16); /* -- Merk en interactie -- */ --brand-primary: var(--p-teal-900); --brand-primary-hover: var(--p-teal-700); --brand-accent: var(--p-lime-500); --brand-accent-text: var(--p-lime-700); /* accent waar het tekst moet zijn */ --brand-accent-wash: rgba(167, 193, 66, .14); /* hover-vlak, actieve rij */ /* -- Data (grafiekreeksen; hier is contrast een lijnkleur, geen tekst) -- */ --data-advice: var(--p-teal-900); --data-realised: var(--p-lime-500); /* Licht is GOUD en niet zandkleurig. In P1 wees --data-light naar warm-300 (#BFB093), maar dat is in het ontwerp de kleur van "nog in de lucht"; licht staat er overal als #E8C86A. Gevolg was een PAR-reeks die op het dashboard nauwelijks van de achtergrond te onderscheiden was, en een groeiklok waarvan de buitenring wegviel tegen zijn eigen spoor. */ --data-light: var(--p-gold-500); /* "Nog in de lucht": de restpost van de CO2-balans. Dit is waar warm-300 wel voor bedoeld was. */ --data-buffer: var(--p-warm-300); --data-secondary: var(--p-blue-500); --data-loss: var(--p-warm-500); /* -- Signaal -- */ --state-good: var(--p-lime-700); --state-good-wash: var(--p-green-100); --state-warn: var(--p-warm-500); --state-warn-wash: var(--p-warm-100); --state-error: var(--p-red-600); --state-error-wash: rgba(185, 71, 40, .12); /* == 3. TYPOGRAFIE ======================================================= * De huisstijl kent twee letters, en ze hebben elk hun eigen rol: * * --font-display Comfortaa. Rond en geometrisch; herkenbaar, maar met * zijn grote rondingen en losse ritme alleen leesbaar * BOVEN ~16px. Daarom uitsluitend koppen, kaarttitels en * het merk - niet de broodtekst, niet de tabellen. * --font-sans Maven Pro. Het werkpaard: alinea's, knoppen, labels, * formulieren, tabelcellen. * --font-mono óók Maven Pro. De naam klopt niet meer en blijft toch * staan: hij wordt op ~50 plaatsen en in de * grafiekcode gebruikt, en de ROL is ongewijzigd - * cijfers, eenheden, codes en de kapitaalse labels. Die * rol leunt op uitlijning, niet op vaste letterbreedte; * .oc-body zet daarvoor font-variant-numeric: * tabular-nums, zodat cijferkolommen recht blijven. * De monospace-fallbacks blijven erin staan: valt het * webfont weg, dan is uitlijning belangrijker dan vorm. * * Eerder stonden hier Public Sans en IBM Plex Mono uit het ontwerpbestand. * Die zijn vervangen door de huisstijlletters; hun woff2-bestanden zijn uit * wwwroot/fonts verwijderd. */ --font-display: 'Comfortaa', 'Maven Pro', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-sans: 'Maven Pro', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-mono: 'Maven Pro', ui-monospace, 'Cascadia Mono', Consolas, monospace; /* REGULARISATIE: het ontwerp gebruikt acht formaten tussen 9,5 en 13px * (9,5 / 10 / 10,5 / 11 / 11,5 / 12 / 12,5 / 13), alle acht veelvuldig. Dat * is geen schaal maar drift in het ontwerpbestand. Teruggebracht tot vijf * rollen binnen hetzelfde bereik, zodat de dichtheid behouden blijft maar de * schaal onderhoudbaar is. --fs-micro is de ondergrens; ga daar niet onder. * * LEESBAARHEID: de schaal is één stap omhoog gezet ten opzichte van het * ontwerpbestand. Het ontwerp is getekend op een artboard van 1440px breed * en op ware grootte beoordeeld; op een echt scherm van 1920px of breder * staat diezelfde 12,5px-broodtekst verder weg en leest hij niet meer. De * verhoudingen tussen de rollen zijn ongewijzigd - alleen het nulpunt is * verschoven, zodat de dichtheid van het ontwerp intact blijft. */ --fs-micro: 11px; /* eenheden, aslabels */ --fs-label: 12px; /* kolomkoppen, mono-labels */ --fs-caption: 13px; /* toelichting onder een kaart */ --fs-body: 14px; /* werkpaard (94x) */ --fs-body-lg: 15px; /* leesbare alinea's */ --fs-h4: 16.5px; --fs-h3: 19px; --fs-h2: 22.5px; --fs-h1: 27px; --fs-metric: 32px; /* het grote getal op een kaart */ --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; /* dominant in het ontwerp (244x) */ --fw-bold: 700; --lh-tight: 1.15; /* cijfers, koppen */ --lh-snug: 1.3; --lh-normal: 1.5; /* broodtekst */ --tracking-tight: -.014em; /* koppen */ --tracking-label: .09em; /* mono-labels in kapitalen */ /* == 4. RADII ============================================================ * REGULARISATIE: ontwerp gebruikt 2,3,4,6,7,8,9,10,11,12,14,20px. De vier * dominante waarden (3, 8, 11, 14) zijn de schaal; de rest is afgerond. */ --r-xs: 3px; --r-sm: 8px; --r-md: 11px; --r-lg: 14px; --r-pill: 20px; /* == 5. RUIMTE =========================================================== * REGULARISATIE: het ontwerp gebruikt vrijwel elke gap tussen 2 en 16px * (2,3,5,6,7,8,9,10,11,12,14,16) - opnieuw drift, geen schaal. Hieronder een * schaal die hetzelfde dichte bereik dekt. Gebruik gap/grid, geen marges. */ --sp-1: 2px; --sp-2: 4px; --sp-3: 6px; --sp-4: 8px; --sp-5: 12px; --sp-6: 16px; --sp-7: 20px; --sp-8: 24px; --sp-9: 32px; --sp-10: 44px; /* == 6. SCHADUW EN FOCUS ================================================= */ --shadow-card: 0 1px 2px rgba(var(--p-ink-base), .10); --shadow-raised: 0 1px 3px rgba(var(--p-ink-base), .07), 0 6px 16px rgba(var(--p-ink-base), .08); --shadow-overlay: 0 24px 64px rgba(22, 42, 36, .34); /* Het ontwerp heeft een expliciete focusring in het accent - overnemen, want * dit is de enige zichtbare toetsenbordstatus in het hele ontwerp. */ --focus-ring: 0 0 0 3px rgba(167, 193, 66, .28); --focus-outline: 2px solid var(--p-lime-700); /* == 7. LAYOUT =========================================================== */ --rail-width: 64px; /* icoonbalk uit artboard 2a */ /* Op een telefoon wordt diezelfde balk een onderbalk; 56px laat een tikdoel van 44px staan met lucht eromheen. Zie de mediaquery in components.css. */ --rail-height-mobile: 56px; /* BOVENGRENS, GEEN ONTWERPBREEDTE. Stond op 1440px - de breedte van het * artboard - waardoor de pagina op elk breder scherm links bleef plakken met * een lege strook rechts: op 1920px is dat 400px niets, bijna een kwart van * het scherm, terwijl de kaarten en grafieken ernaast in de knel zaten. * * De schermen zijn opgebouwd uit fr-kolommen, dus ze verdelen de ruimte die * ze krijgen; ze hebben die 1440 nergens voor nodig. De grens staat nu waar * hij hoort: ver genoeg weg om een normaal scherm (1920, 2560) volledig te * vullen, en pas op een ultrabreed scherm actief, zodat een tekstregel daar * niet eindeloos wordt. Wat er dan overblijft wordt links en rechts gelijk * verdeeld (margin-inline: auto bij elke .??-page), niet rechts gedumpt. */ --content-max: 2400px; --rail-icon-size: 44px; --rail-icon-radius: var(--r-md); /* == 8. LEGACY PALET - OMGEZET IN P9 ===================================== * De oude OCAP-tokens wijzen nu naar de nieuwe rollen. Hiermee spreken de * ruim honderd nog niet herbouwde schermen dezelfde kleurtaal als de acht * die wel om zijn. * * P1 stelde dit bewust uit: zolang er geen nieuw scherm stond zou een nieuw * palet op oude layouts alleen maar een half-nieuwe applicatie opleveren. Die * voorwaarde is vervuld - dashboard, analyse, rapport, Auto Pilot, koers, * afdeling, gewas en de dagcheck staan er. * * WAT DIT REPAREERT. Twee contrastfouten die er al zaten: * h1/h2/h5 stonden op #78B928 = 2,39:1 op wit, ruim onder AA. Nu * --brand-primary op 8,7:1. En .btn-default zette wit op datzelfde * #78B928 (2,4:1); ook dat wordt teal. * * Bewust NIET naar het limoenaccent: dat haalt 2,03:1 met wit erop en zou de * fout alleen verplaatsen. * * Elk token hieronder wordt daadwerkelijk gebruikt, alle in Site.css. De * twaalf ongebruikte legacy-tokens zijn weg: die stonden er alleen nog om * per ongeluk opnieuw gebruikt te worden. * * Alle achtergrondgebruiken hiervan zetten in Site.css zelf `color: white`, * dus de omzetting naar donkere rollen houdt die combinaties leesbaar. Dat * is nagelopen, niet aangenomen. */ --OcapGroen: var(--brand-primary); --OcapGroen2: var(--brand-accent-text); --DonkerGrijs: var(--text-default); --ash-gray: var(--p-ink-400); --cal-poly-green: var(--brand-primary); --fern-green: var(--p-lime-700); /* Kaartachtergrond in het oude gewasscherm; blijft een lichte, warme grond. Had in P1 geen doelrol omdat er geen rol voor bestond. */ --silver: var(--p-warm-300); }