/* ========================================================================== Dashboard Akari Displays, design tokens (laptopbrowser, muis) Ontwerpvoorstel 11 oktober 2026, stijl minimaal donker. Zie ONTWERP.md. 12 oktober 2026: ook een licht thema, [data-thema="licht"] onderaan; zie ONTWERP.md, hoofdstuk 16. Donker is de basis in :root. Afgeleid van de kit-tokens (akari-kiosk-kit/assets/tokens.css) en van het merkblok "minimaal" in stijlen.css, maar met maten voor een laptop: dit is geen touchscherm. Zelfde namen als in de kit waar dat kan (--bg, --ink, --brand, --line, --ok, --warn, --err), zodat een developer die de displays kent niets hoeft op te zoeken. Het idee in één zin: alles wat op het scherm komt heeft licht en kleur, alles wat beheer is, is mat en grijs. Daarom: drie grijzen, witte tekst, één accent (Akari-blauw) op de primaire actie en op "er gebeurt iets", één radius, geen schaduwen, geen verlopen. Contrast gemeten met de WCAG-formule (ONTWERP.md, hoofdstuk tokens): tekst op --bg 18,0:1, gedempt 7,6:1, meta 5,4:1 (op een vlak 4,9:1, onder de muis 4,7:1); wit op het blauw 4,6:1; blauwe tekst op --bg 8,9:1; rood 6,5:1. ========================================================================== */ :root, [data-thema="donker"] { color-scheme: dark; /* scrollbalken, datumkiezer en select volgen het thema */ /* --- KLEUR: oppervlakken ------------------------------------------------ */ --bg: #0B0D10; /* de basis; het hele beheer staat hierop */ --bg-raised: #15181E; /* vlakken: kaarten, velden, actieve navigatie, donkere tegels */ --bg-hover: #1A1E25; /* een vlak waar de muis op staat */ --bg-sunken: #06080A; /* inzetten: de banner, een code-veld, de voorvertoning */ --bg-rij: #111418; /* even rijen in een tabel, de rij onder de muis */ --line: #262B33; /* haarlijn als scheiding: tabelrijen, de rand van de zijbalk (decoratief) */ --line-sterk: #5B6573; /* rand van een ghost-knop of veld: 3,0:1 op een vlak, zichtbaar als rand */ --haarlijn: rgba(255, 255, 255, 0.08); /* lijn op een foto of in een donkere tegel */ --glas: rgba(6, 8, 10, 0.62); /* chip op een miniatuur: volgnummer, speelduur, seconden; wit erop 5,8:1, ook op een witte foto */ /* Sinds het lichte thema (12 oktober): wat in donker gewoon een vlak was, heeft in licht een eigen waarde nodig. In donker veranderen ze niets. */ --paneel: #15181E; /* dialoog, detailpaneel, melding: in donker het vlak, in licht wit */ --veld-in-paneel: #0B0D10; /* een veld in een dialoog of paneel: in donker de basis */ --segment-aan: #1A1E25; /* het gekozen deel van een segmentknop */ --sluier: rgba(3, 4, 6, 0.72); /* achter een dialoog */ --staal-rand: rgba(255, 255, 255, 0.18); /* rand om een kleurstaal, zodat donker op donker zichtbaar blijft */ --qr-rand: transparent; /* de QR-kaart staat wit op donker en heeft geen rand nodig */ --err-knop: #D43D3D; /* de rode knop bij verwijderen: wit erop 4,6:1 (--err zelf haalt met wit maar 3,0:1) */ --warn-op-blauw: #FFB020; /* het puntje op Publiceren: de knop is in beide thema's hetzelfde blauw */ /* De zijbalk (12 oktober, avond): een stap donkerder dan de inhoud. */ --zb-bg: #050608; /* de zijbalk; de inhoud staat op --bg */ --zb-hover: #121519; /* een item onder de muis */ --zb-actief: #1A1E25; /* het item waar je bent */ --zb-actief-rand: transparent; /* --- KLEUR: tekst ------------------------------------------------------- */ --ink: #F4F6F8; /* tekst: 18,0:1 op --bg, 16,4:1 op een vlak */ --ink-muted: #9AA3AE; /* secundair, labels, statusregels: 7,6:1 */ --ink-faint: #7E8894; /* meta, hulptekst, placeholder in een veld: 5,4:1 (4,9:1 op een vlak, 4,7:1 op --bg-hover); niet onder 12 px */ /* --- KLEUR: het ene accent ---------------------------------------------- */ --brand: #1F6BFF; /* Akari-blauw: Publiceren, de gevulde primaire knop; wit erop 4,6:1 */ --brand-ink: #FFFFFF; /* tekst op het blauw */ --brand-druk: #1A5FE6; /* de primaire knop onder de muis en ingedrukt; wit erop 5,5:1 */ --brand-tekst: #7FB0FF; /* blauw als tekst of lijn: links, de voortgangsbalk, "wordt omgezet": 8,9:1 */ /* --- KLEUR: status, altijd klein (een stip, een woord), nooit een vlak -- */ --ok: #3DDC97; /* online, klaar, opgeslagen: 11,0:1 */ --warn: #FFB020; /* niet-gepubliceerde wijzigingen, het puntje op Publiceren: 10,6:1 */ --err: #FF5D5D; /* offline, mislukt, een fout in een veld: 6,5:1 (5,9:1 op een vlak) */ /* --- TYPOGRAFIE --------------------------------------------------------- */ /* Inter lokaal (fonts/inter.css), dezelfde vier gewichten als de displays. Groot strak, klein ruim. Vijf maten; wie een zesde nodig heeft, heeft waarschijnlijk een hiërarchieprobleem. */ --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --t-groot: 40px; --lh-groot: 44px; /* het ene getal per pagina (Akari-overzicht, leads per dag), 600, tabulair */ --t-titel: 26px; --lh-titel: 32px; /* de naam van het scherm, de paginatitel: 600, -0.02em */ --t-kop: 17px; --lh-kop: 24px; /* sectiekop, de naam van een scherm in de lijst: 600, -0.01em */ --t-body: 14px; --lh-body: 20px; /* lopende tekst, knoppen, velden, tabelcellen: 400 */ --t-klein: 13px; --lh-klein: 18px; /* statusregels, meta in een kaart, tabelkop */ --t-label: 12px; --lh-label: 16px; /* veldlabels, chips op een miniatuur, hulptekst: 500 */ --tr-tight: -0.02em; /* titels en grote getallen */ --tr-kop: -0.01em; /* sectiekoppen */ --tr-normal: 0; /* alles van 14 px en kleiner */ /* --- RUIMTE (basis 4) --------------------------------------------------- */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; /* --- VORM: één radius --------------------------------------------------- */ --r: 10px; /* tegels, kaarten, knoppen, velden, chips, de sleepzone: allemaal dezelfde */ --rand: 1px solid var(--line); --rand-sterk: 1px solid var(--line-sterk); /* --- MATEN -------------------------------------------------------------- */ --zijbalk-w: 232px; /* de vaste linkerkolom */ --kop-h: 72px; /* de kopbalk met naam, status, Voorvertoning en Publiceren */ --inhoud-max: 1200px; /* breder wordt een leadtabel niet leesbaarder */ --inhoud-pad: 32px; /* zijmarge van de inhoud */ --tegel-w: 180px; /* een carrousel-tegel: de echte 9:16 */ --tegel-h: 320px; --tegel-gap: 20px; /* vijf tegels op 1280 breed: 5 x 180 + 4 x 20 = 980 */ --mini-w: 108px; /* de miniatuur in de schermenlijst, ook 9:16 */ --mini-h: 192px; --knop-h: 36px; /* alle knoppen: primair, ghost, stepper */ --knop-h-klein: 28px; /* in een tegel of een tabelrij */ --veld-h: 36px; /* invoervelden */ --paneel-w: 420px; /* het detailpaneel bij een lead, van rechts */ --sleepzone-h: 88px; /* de sleepzone boven het raster */ --balk-h: 4px; /* voortgang in een tegel en de opslagteller */ /* --- BEWEGING ----------------------------------------------------------- */ /* Alleen transform en opacity, zoals op de displays. Niets glijdt binnen, niets pulseert. De enige lus is de onbepaalde balk tijdens het omzetten. */ --dur-druk: 80ms; /* een knop onder de muisknop */ --dur-hover: 120ms; /* kleur onder de muis, de prullenbak die verschijnt */ --dur-fade: 120ms; /* het wisselen van onderdeel: oud weg, nieuw op, alleen opacity */ --dur-sleep: 160ms; /* een tegel die optilt bij het slepen, en het gat dat opschuift */ --dur-paneel: 200ms; /* het leadpaneel dat opent (opacity, en 12 px van rechts) */ --ease: cubic-bezier(0.2, 0, 0, 1); --ease-aankomen: cubic-bezier(0.23, 1, 0.32, 1); /* --- LAGEN -------------------------------------------------------------- */ --z-kop: 10; --z-paneel: 40; --z-sleep: 50; --z-dialoog: 100; --z-toast: 110; } /* ========================================================================== Licht thema (12 oktober 2026). Geen omgedraaid donker: een koel gebroken wit als basis zodat een laptop in daglicht niet verblindt, vlakken één stap grijzer, panelen en dialogen wit erbovenop. Dezelfde drie tekstniveaus, hetzelfde blauw op de knop; status en blauw als tekst donkerder, zodat ze op licht 4,5:1 halen. Het display (de voorvertoning, de stijlminiaturen) verandert niet mee: dat heeft zijn eigen uiterlijk. Contrast, gemeten met de WCAG-formule (ONTWERP.md, hoofdstuk 16): tekst 17,8:1 op --bg; gedempt 7,1:1; meta 5,6:1 (4,8:1 op een vlak onder de muis); blauwe tekst 5,6:1; groen 5,9:1; amber 6,0:1; rood 5,5:1; wit op het blauw 4,6:1; rand van een veld 3,3:1 op een vlak. ========================================================================== */ [data-thema="licht"] { color-scheme: light; --bg: #F7F8FA; /* koel gebroken wit; niet #FFF, dat schittert op een laptop in daglicht */ --bg-raised: #ECEEF2; /* vlakken: actieve navigatie, velden, de balk */ --bg-hover: #E3E6EB; /* een vlak onder de muis */ --bg-sunken: #F0F2F5; /* het adresveld, een lege miniatuur */ --bg-rij: #F1F3F6; /* even rijen in een tabel */ --line: #E0E3E8; /* haarlijn als scheiding (decoratief) */ --line-sterk: #7A828E; /* rand van een ghost-knop of veld: 3,3:1 op een vlak */ --haarlijn: rgba(14, 17, 22, 0.08); --ink: #0E1116; /* 17,8:1 op --bg, 16,3:1 op een vlak */ --ink-muted: #4D5562; /* 7,1:1 / 6,5:1 */ --ink-faint: #5B6471; /* 5,6:1 / 5,2:1, 4,8:1 op een vlak onder de muis */ --brand: #1F6BFF; /* hetzelfde Akari-blauw; wit erop 4,6:1, de knop zelf 4,3:1 tegen --bg */ --brand-ink: #FFFFFF; --brand-druk: #1A5FE6; --brand-tekst: #1A5BD6; /* blauw als tekst of lijn: 5,6:1 (op licht donkerder dan in donker) */ --ok: #0B6E47; /* 5,9:1; wit erop (de schakelaar) 6,3:1 */ --warn: #8A5200; /* 6,0:1; amber dat op wit nog amber is en geen bruin wordt naast het groen */ --err: #BF2A2A; /* 5,5:1 */ --paneel: #FFFFFF; /* dialogen en het detailpaneel liggen wit op de grijzere basis */ --veld-in-paneel: #EFF1F4; /* een veld in een wit paneel: 16,7:1 voor de tekst erin */ --segment-aan: #FFFFFF; /* zoals een segmentknop op de Mac: het gekozen deel is wit */ --sluier: rgba(14, 17, 22, 0.32); --staal-rand: rgba(14, 17, 22, 0.14); --qr-rand: #E0E3E8; /* wit op bijna wit: een haarlijn houdt de QR-kaart bij elkaar */ --err-knop: #BF2A2A; /* wit erop 5,6:1 */ /* Zijbalk lichtgrijs naast de gebroken witte inhoud; het item waar je bent is wit met een haarlijn, zoals een gekozen segment. */ --zb-bg: #ECEEF1; --zb-hover: #E1E4E8; --zb-actief: #FFFFFF; --zb-actief-rand: #D5D9DF; }