/* * DERKS VELD, CENTRALE STIJL-TOKENS * ================================= * Dit is de ENIGE plek waar kleur, typografie, spacing en vorm worden bepaald. * Schermen en componenten gebruiken uitsluitend deze variabelen, nooit een losse * hex-waarde. Zo verandert de hele app mee als de huisstijl wijzigt. * * Huisstijl (canoniek, zie ../_shared/derks-stijl.css). Dit bestand wordt NA * derks-stijl.css geladen en erft de canonieke waarden (--derks-yellow, * --derks-ink, --derks-paper) met een terugval, zodat er 1 bron blijft: * antraciet #1F2123, Derks geel #FFC30E, warm wit #F5F4EF / wit #FFFFFF. * Geel is het accent; op geel altijd donkere tekst. * * :root hieronder is het DONKERE cabine-thema (standaard). Het lichte thema * staat onder [data-theme="light"], zelfde schermen, zelfde componenten. * De app zet data-theme op en onthoudt de keuze (Meer > Weergave). * * Status-kleuren zijn GEEN huisstijl maar functionele signalen * (rood = stil/urgent, geel = actie nodig, groen = gereed). Niet vervangen * door merkkleuren. * * HARDE REGEL: geen em-dashes. */ :root { color-scheme: dark; /* ---- Merk ---- */ --brand-accent: var(--derks-yellow, #FFC30E); /* Derks geel, primaire actie en actieve tab */ --brand-accent-hover: #FFD24A; --brand-on-accent: var(--derks-ink, #1F2123); /* donkere tekst/icoon op geel */ /* ---- Oppervlakken (donker, cabine) ---- */ --bg: #141618; /* schermachtergrond */ --surface: var(--derks-ink, #1F2123); /* kaart, secundaire knop, antraciet uit de huisstijl */ --surface-2: #282B2D; /* invoervelden */ --inset: #282B2D; /* rustig vlak binnen een kaart: chip, teller, ghost-knop */ --surface-muted: #191B1D; /* afgehandelde of inactieve kaart */ --border: rgba(255,255,255,.10); --border-strong: rgba(255,255,255,.20); --overlay: rgba(0,0,0,.62); /* dialoog-achtergrond */ /* Vaste balken en werkvlakken. De topbalk blijft in beide thema's antraciet met de gele accentlijn: dat is het herkenningspunt van de huisstijl. */ --topbar-bg: var(--derks-ink, #1F2123); --topbar-fg: #FFFFFF; --tabbar-bg: var(--derks-ink, #1F2123); --canvas-bg: #2A2D2F; /* achtergrond onder een tekening of foto */ --doc-bg: #2A2D2F; /* achtergrond van een documentweergave */ /* ---- Tekst ---- */ --text: #FFFFFF; --text-2: rgba(255,255,255,.58); /* metadata */ --text-3: rgba(255,255,255,.48); /* labels, inactieve tab */ --link: #7FC4E8; /* secundair blauw, leesbaar op donker */ /* ---- Functionele status (geen huisstijl) ---- */ --status-stop: #E4573D; /* werk stil, urgent, hoog (streep) */ --status-stop-fg: #FF9280; /* status-tekst op donker */ --status-stop-bg: rgba(228,87,61,.16); --status-decide: #FFC30E; /* besluit nodig, in behandeling */ --status-decide-fg: #FFD463; --status-decide-bg: rgba(255,195,14,.14); --status-done: #3E9C6C; /* gereed, afgehandeld */ --status-done-fg: #79D6A4; --status-done-bg: rgba(62,156,108,.16); --status-neutral: rgba(255,255,255,.22); /* ---- Lagen op de tekening (vaste betekenis, niet decoratief) ---- */ --pin-foto: #4FA3E3; --pin-taak: #3E9C6C; --pin-melding: #E4573D; --pin-revisie: #FFC30E; --pin-me: #4FA3E3; /* ---- Typografie ---- UI-font blijft de systeemstack (huisstijl, laadt overal en ook offline). Mono is voor codes, tijden, hoeveelheden en coordinaten: die lijnen dan netjes onder elkaar uit in lijsten. */ --font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --font-mono: ui-monospace, "SF Mono", "Segoe UI Mono", "Roboto Mono", Menlo, Consolas, monospace; --fs-eyebrow: 10px; /* mono, uppercase, letter-spacing .12em */ --fs-meta: 12.5px; --fs-body: 14.5px; --fs-card: 16px; /* kaarttitel, gewicht 600 */ --fs-title: 20px; /* schermtitel */ /* ---- Spacing ---- */ --pad-screen: 16px; --gap-list: 10px; --gap-section: 16px; /* ---- Vorm ---- */ --radius: 12px; /* alias, kaarten */ --radius-card: 12px; --radius-hero: 14px; --radius-control: 10px; --radius-chip: 20px; --radius-tile: 8px; --status-stripe: 4px; /* border-left op een kaart */ --tap-min: 54px; /* minimale hoogte primaire knop */ --shadow: 0 2px 10px rgba(0,0,0,.34); --shadow-lift: 0 16px 40px rgba(0,0,0,.5); /* ---- Aliassen voor bestaande componentnamen (niet uitbreiden) ---- */ --blue: var(--surface); --blue-2: var(--link); --orange: var(--brand-accent); --ink: var(--brand-on-accent); --card: var(--surface); --line: var(--border); --muted: var(--text-2); } /* Licht thema, zelfde schermen en componenten */ [data-theme="light"] { color-scheme: light; --bg: var(--derks-paper, #F5F4EF); --surface: var(--derks-surface, #FFFFFF); --surface-2: var(--derks-surface, #FFFFFF); --inset: var(--derks-paper, #F5F4EF); --surface-muted: var(--derks-paper, #F5F4EF); --border: var(--derks-line, #D9D8D2); --border-strong: #B9B8B2; --overlay: rgba(31,33,35,.45); --text: #1B1D1E; --text-2: #5B6066; --text-3: #5F6461; /* fix 44: 5.5:1 op --bg (was #6E736F, 4.4:1) */ --link: #276A8F; /* fix 44: status-tekst donkerder zodat elke -fg minimaal 4.5:1 haalt op zijn -bg (stop 5.1:1, decide 5.8:1, done 5.5:1). Streep-kleuren (--status-*) ongewijzigd. */ --status-stop: #B84535; --status-stop-fg: #A63D2E; --status-stop-bg: #FBE0DE; --status-decide: #C2820D; --status-decide-fg: #805507; --status-decide-bg: #FDF0D2; --status-done: #2F7D55; --status-done-fg: #256A47; --status-done-bg: #DFF1E4; --status-neutral: rgba(0,0,0,.18); --pin-foto: #1A73E8; --pin-taak: #2F7D55; --pin-melding: #B84535; --pin-revisie: #C2820D; --pin-me: #1A73E8; --shadow: 0 2px 10px rgba(31,33,35,.10); --shadow-lift: 0 20px 60px rgba(31,33,35,.25); /* Aliassen: in het lichte thema is antraciet weer de donkere UI-kleur */ --blue: #1F2123; --card: var(--surface); } /* * GEBRUIK, kort: * .card { background:var(--surface); border:1px solid var(--border); * border-radius:var(--radius-card); } * .code { font-family:var(--font-mono); color:var(--text-3); } * .btn.primary { min-height:var(--tap-min); background:var(--brand-accent); * color:var(--brand-on-accent); } * Een nieuw scherm combineert bestaande componenten en tokens. Zodra een scherm * zelf een kleur, font of radius vastlegt, breekt de garantie dat alles meebeweegt. */