/* ============================================================ dataviz-tokens.css — DATA colours, not UI colours. Deliberately kept out of @theme. The chart block (--dv-base … --dv-tarief-*) came from styleguide/lux-dataviz.json; the map palettes below were consolidated here by unit E1 out of the components, on the evidence of "Audit - visual state of the five screens" (E0). Hand-maintained from here on — there is no generator, despite what the old header of this file claimed. THE RULE (DESIGN.md / dataviz): colour is NEVER the only carrier. Every palette below names, in its comment, the non-colour cue that has to ride along (width, dash, radius, shape, label). A palette that ships without its companion cue is a defect, not a style choice. WHY THE MAP PALETTES MOVED HERE. The audit measured 106 data-paint literals on 61 lines, and they were only ~24 distinct colours: the load/congestion ramp existed in FIVE independent copies (MapView KNEL_COLORS, MapView CONG_COLORS, MapView read-out dots, App.svelte legend swatches, overlays.ts CONGESTION_COLORS) and FEEDER_COLORS in two (MapView + App.svelte). One definition each, here. E3-E5 wire the call sites; this file only declares. COLOUR-BLIND SAFETY. Distances below are Euclidean over sRGB after the Vienot 1999 dichromat simulation (the same simulation the E0 audit used; our re-run reproduces the audit's WCAG contrast figures to the decimal, and its CVD distances to within a few units — the audit did not record its exact normalisation, so BEFORE and AFTER here are both measured by this file's method and are therefore comparable to each other). ---- LUX-NL, 11 Aug 2026 ---- This file moved here from C:\dev\lux2\frontend\src\lux\ and styleguide/ is now its single source; lux2 pulls it back with tools/stijlbron.js. Two reasons it came over, both measured: * data\viewer\nl-netdata.html drew "Klantstation" and "Klantstation met medegebruik" in the SAME hex #9ca3af at the SAME radius 2.2 — deuteranopia distance 0.0, i.e. nobody can tell them apart. Section 5 below fixes that to 122.4. * LUX-NL's own tokens carried 2 measured contrast figures; this file carries 29 measured colour-blind distances with the method written down. That habit is the thing worth having. Two blocks were ADDED here (9 and 10) because lux-dataviz.json has them and this file did not: the BrBG diverging ramp and the five grid operators with their SYMBOL SHAPES. No longer frozen: styleguide/ is the source, so changes land here first and travel outward. ============================================================ */ .lux-root, [data-theme] { /* --------------------------------------------------------- 1. CHARTS — unchanged, from styleguide/lux-dataviz.json. Series also differ in SHAPE/width/dash, never in colour alone (see charts.ts). --------------------------------------------------------- */ --dv-base: #8b8983; /* basisbelasting */ --dv-hp: #0077bb; /* warmtepomp */ --dv-ev: #33bbee; /* ev */ --dv-pv: #fcc200; /* pv-opwek */ --dv-batt: #009988; /* batterij */ --dv-net: var(--lux-text); /* netto -> themakleur, flipt met light/dark */ --dv-cap: #cc3311; /* capaciteitsgrens: rode streepjeslijn + "x kVA"-label rechts */ /* categorisch (Tol Vibrant, kleurenblind-veilig) — vaste volgorde, niet overslaan */ --dv-cat-1: #009988; --dv-cat-2: #0077bb; --dv-cat-3: #33bbee; --dv-cat-4: #ee7733; --dv-cat-5: #cc3311; --dv-cat-6: #ee3377; --dv-cat-7: #bbbbbb; /* tariefvormen — NIET in lux-dataviz.json benoemd (afgeleid v/d categorische); TE BEVESTIGEN met Auke */ --dv-tarief-vast: #0077bb; --dv-tarief-dyn: #ee7733; --dv-tarief-cap: #009988; --dv-tarief-congestie: #cc3311; /* --------------------------------------------------------- 2. VOLTAGE CLASSES — 10 steps (MapView VCLASS). VALUES UNCHANGED. Companion cues, already shipping and to be kept: line WIDTH (1.0 -> 6.0 px, scaled with zoom) and DASH pattern (none / [2,4] / [10,4] / [16,6]). The audit measured two deuteranopia collapses inside this ramp (50 kV vs 110 kV at 27.2, 50 kV vs 380 kV at 37.8) and both are already rescued by a different width AND a different dash — that is the pattern to copy. --------------------------------------------------------- */ --dv-vclass-unknown: #9a9a94; /* onbekend/LV — width 1.0, dash [2,4] */ --dv-vclass-3kv: #33bbee; /* width 1.5, solid */ --dv-vclass-10kv: #0077bb; /* width 2.0, solid */ --dv-vclass-20kv: #009988; /* width 2.5, solid */ --dv-vclass-30kv: #009988; /* width 2.8, solid — SAME colour as 20 kV on purpose; width is the difference */ --dv-vclass-50kv: #ee7733; /* width 3.0, dash [10,4] */ --dv-vclass-110kv: #ee3377; /* width 3.5, dash [10,4] */ --dv-vclass-150kv: #cc3311; /* width 4.0, dash [10,4] */ --dv-vclass-220kv: #994455; /* width 5.0, dash [16,6] */ --dv-vclass-380kv: #ffaa00; /* width 6.0, dash [16,6] */ /* --------------------------------------------------------- 3. STATION TYPES — 7 + unknown (MapView STATION). VALUES CHANGED: the old set had two pairs a deuteranope cannot tell apart and one pair nobody can. Transportverdeel- vs Distributieverdeelstation #fbbf24/#f59e0b -> #ffaa00/#0077bb deuteranopia distance 37.7 -> 234.0 (protanopia 45.0 -> 204.3) (the E0 audit records this pair at 28.6 under its own normalisation; either way it was the worst visible-type collision in the app, and both stations share radius 4.0) Netstation vs Klantstation #34d399/#9ca3af -> #33bbee/#999999 deuteranopia distance 36.0 -> 87.2 (protanopia 58.9 -> 91.8) Klantstation vs Klantstation met medegebruik #9ca3af/#9ca3af -> #999999/#882255 deuteranopia distance 0.0 -> 123.2 — they were literally the same colour AND the same radius, i.e. identical to every viewer, colourblind or not. Worst pair over all seven: 0.0 -> 81.2 deuteranopia, 0.0 -> 66.5 protanopia. New values come from the Tol Vibrant/Muted sets, the same family the app already uses for --dv-cat-* and for the voltage ramp. ACCEPTED OVERLAP: some of these hexes also appear in palette 2. Geometry is the discriminator (a #0077bb LINE is 10 kV, a #0077bb CIRCLE is a Distributieverdeelstation) and the legend names both. There are not enough CVD-distinct hues to keep 10 voltage classes and 7 station types disjoint. COMPANION CUE, still owed by E3: radius alone does not separate these (Transport and Distributie both sit at 4.0), so the major types need distinct marker SHAPES. --------------------------------------------------------- */ --dv-station-hoofd: #ffffff; /* Hoofdstation — radius 5.0, major */ --dv-station-hv: #cc3311; /* HV-station — radius 5.5, major */ --dv-station-transport: #ffaa00; /* Transportverdeelstation — radius 4.0, major */ --dv-station-distributie: #0077bb; /* Distributieverdeelstation — radius 4.0, major */ --dv-station-net: #33bbee; /* Netstation — radius 2.6, minor */ --dv-station-klant: #999999; /* Klantstation — radius 2.2, minor */ --dv-station-klant-medegebruik: #882255; /* Klantstation met medegebruik — radius 2.2, minor */ --dv-station-unknown: #999999; /* type niet herkend — same grey as Klantstation, by design */ /* --------------------------------------------------------- 4. LOAD / CONGESTION RAMP — 4 ordered classes + unknown. ONE definition replacing FOUR copies (MapView KNEL_COLORS, MapView CONG_COLORS, MapView read-out dots, App.svelte legend swatches). CORRECTION (26 Jul): this header used to name overlays.ts CONGESTION_COLORS as a fifth copy that E1 had replaced. It had not — that array kept the pre-E1 hexes and the congestion kaartlaag kept painting them until the map-layer unit repointed the layer at these tokens; the array itself was deleted the same night. VALUES CHANGED — this was the audit's worst colour-blind defect, because the ramp is the only carrier: station radius is fixed per type, so in knelpunt-mode the fill is all a viewer has. matig (60-80%) vs hoog (80-100%) #eab308/#f59e0b -> #fee08b/#e08214 deuteranopia distance 11.6 -> 168.2 (the E0 audit records 13.2 for the before) Worst pair anywhere in the ramp, unknown-grey included: deuteranopia 11.6 -> 52.0 ; protanopia 22.3 -> 55.5 Shape of the fix: the old ramp put yellow next to amber, which are the SAME hue to a deuteranope and had near-identical lightness too. The new middle steps are a pale yellow and a dark orange — far apart in lightness, so the order survives even total colour loss, while a trichromat still reads green -> yellow -> orange -> red. COMPANION CUE, still owed by E3: an outline-weight step or a hatch per class, exactly the way overlays.ts already carries `lineWidth` alongside its ramp. --------------------------------------------------------- */ --dv-load-low: #1a9850; /* < 60 % — roomy (was #22c55e) */ --dv-load-mid: #fee08b; /* 60-80 % (was #eab308) */ --dv-load-high: #e08214; /* 80-100 % (was #f59e0b; the congestion copy had #f97316) */ --dv-load-over: #a50f15; /* >= 100 % — over (was #dc2626) */ --dv-load-unknown: #6b7280; /* no ratio known. NEVER invent "0 = lightly loaded". The congestion copy used #9ca3af here; one grey now, this one. */ /* --------------------------------------------------------- 5. OUTAGES — 3 classes (MapView storColor, Liander iStoringen PC4, rolling 12 months). VALUES UNCHANGED: the audit measured the closest pair at 79.1 (our re-run: 85.8 deuteranopia, 107.3 protanopia), so this ramp survives CVD as it stands. COMPANION CUE, still owed by E3: it has none at all today — a count label or a density hatch. --------------------------------------------------------- */ --dv-outage-low: #fde68a; /* 1-4 storingen */ --dv-outage-mid: #fb923c; /* 5-9 */ --dv-outage-high: #dc2626; /* 10+ */ --dv-outage-line: #dc2626; /* polygon outline for all three classes */ /* --------------------------------------------------------- 6. FEEDER LEVELS — LV / MS / HV service areas. ONE definition replacing TWO verbatim copies (MapView FEEDER_COLORS and App.svelte FEEDER_COLORS). VALUES UNCHANGED ON PURPOSE: LV vs MS measures 47.8 deuteranopia (audit: 35.9), which is thin, but only ONE level renders at a time and the legend spells the level out in words, so the pair is never on screen together. Changing them would be an unforced visual change; consolidating the two copies was the fix the audit actually asked for. If E3 ever renders two levels at once, this needs revisiting. --------------------------------------------------------- */ --dv-feeder-lv: #0ea5e9; /* sky */ --dv-feeder-ms: #8b5cf6; /* violet */ --dv-feeder-hv: #ec4899; /* roze */ --dv-feeder-fallback: #0ea5e9; /* unrecognised level — deliberately LV's colour */ --dv-feeder-highlight: #f8fafc; /* the clicked LV->MS->HV chain, drawn on top at width 2.6 */ /* --------------------------------------------------------- 7. BUILDING OVERLAYS — sequential (viridis) + qualitative (Okabe-Ito), from overlays.ts. VALUES UNCHANGED, deliberately: the audit calls overlays.ts the best-behaved file in the set ("move as-is; do not improve the ramps"). Viridis is perceptually uniform, CVD-safe and monotone in lightness, so the ordering survives complete colour loss. The 3-, 5- and 7-class sets are three different SAMPLINGS of viridis, not subsets of each other, so all three are written out — E3 can wire them 1:1 with zero visual change. COMPANION CUE, already shipping: OverlayBucket carries `lineWidth` (0.6 + rank * 0.55) and a numeric `rank`, and MapOverlayStrip prints rank + swatch + width bar + range label per row. --------------------------------------------------------- */ --dv-viridis3-1: #fde725; --dv-viridis3-2: #22a884; --dv-viridis3-3: #414487; --dv-viridis5-1: #fde725; --dv-viridis5-2: #7ad151; --dv-viridis5-3: #22a884; --dv-viridis5-4: #2a788e; --dv-viridis5-5: #414487; --dv-viridis7-1: #fde725; --dv-viridis7-2: #addc30; --dv-viridis7-3: #5ec962; --dv-viridis7-4: #28ae80; --dv-viridis7-5: #21918c; --dv-viridis7-6: #31688e; --dv-viridis7-7: #443983; /* Okabe-Ito qualitative (8) — the categorical grid-loop overlay. Fixed order, do not skip. */ --dv-qual-1: #e69f00; --dv-qual-2: #56b4e9; --dv-qual-3: #009e73; --dv-qual-4: #f0e442; --dv-qual-5: #0072b2; --dv-qual-6: #d55e00; --dv-qual-7: #cc79a7; --dv-qual-8: #999999; /* --------------------------------------------------------- 8. SINGLE MARKERS AND SCRIMS — the leftovers that are one colour each, not a ramp. VALUES UNCHANGED. `--dv-unknown` is one token for what was written twice (MapView OVERLAY_UNKNOWN and overlays.ts OVERLAY_UNKNOWN_COLOR — same hex, two places). --------------------------------------------------------- */ --dv-unknown: #6b7280; /* "no value for this object" — always its own legend row, never a bucket */ --dv-marker-charger: #a855f7; /* laadpunt-dot; radius grows with the number of points */ --dv-marker-charger-halo: #ffffff; /* 1.5 px stroke around it, so it reads on any basemap */ --dv-marker-attach: #9a9a94; /* aansluitbrug-lijntje — same hex as --dv-vclass-unknown, on purpose */ --dv-scrim-hatch: rgba(12, 16, 22, 0.62); /* hatch fill behind pattern-filled polygons */ --dv-scrim-station-ring: rgba(6, 10, 15, 0.85); /* dark ring that keeps station dots readable on a light basemap */ /* NOT here, on purpose: the four raster-basemap background colours in MapView.svelte (#0a0d12 dark, #dfe4ea light, #e8e5dd PDOK grijs, #c2c6b6 luchtfoto). They are matched to third-party tile imagery, not to the LUX palette; tokenising them would make the map flash the wrong colour under PDOK and aerial. Audit section 2.4: leave them literal, with a comment. */ /* --------------------------------------------------------- 9. DIVERGING RAMP — BrBG. ADDED 11 Aug 2026 (LUX-NL). It was in lux-dataviz.json all along but never had a --dv-* token, so every screen that needed a diverging ramp had to copy the seven stops by hand. Values UNCHANGED from the JSON. Companion cue: a diverging ramp needs its ZERO POINT labelled on the legend — the middle stop is near-neutral by design, so without that label the reader cannot tell which side of zero a cell is on. DESIGN.md §0.5 forbids inventing a red-green diverging ramp; this is the one that is allowed, together with viridis. --------------------------------------------------------- */ --dv-brbg-0: #8c510a; /* bruin, sterk negatief */ --dv-brbg-1: #bf812d; --dv-brbg-2: #dfc27d; --dv-brbg-3: #f5f5f4; /* het nulpunt — LABEL DIT in de legenda */ --dv-brbg-4: #80cdc1; --dv-brbg-5: #35978f; --dv-brbg-6: #01665e; /* blauwgroen, sterk positief */ /* --------------------------------------------------------- 10. GRID OPERATORS — colour AND shape. ADDED 11 Aug 2026 (LUX-NL). lux-dataviz.json assigns every operator a fixed SYMBOL as well as a fixed colour, and that shape is the whole point: on a map full of dots, shape survives greyscale and dichromacy where hue does not. This file had the colours nowhere and the shapes nowhere, so a screen could take the colours and silently drop the shapes — exactly the failure mode DESIGN.md §0.3 warns about. Both live here now, side by side, so they travel together. Values UNCHANGED from lux-dataviz.json. --------------------------------------------------------- */ --dv-dso-tennet: #cc3311; /* symbool: vierkant */ --dv-dso-liander: #0077bb; /* symbool: cirkel */ --dv-dso-enexis: #009988; /* symbool: driehoek */ --dv-dso-stedin: #ee7733; /* symbool: ruit */ --dv-dso-overig: #bbbbbb; /* symbool: cirkel-open */ }