refactor: consolideer kleurconstanten via CSS custom properties #72

New issue

Closed

opened 2026-04-12 16:10:14 +02:00 by Ghost · 1 comment

Ghost commented

2026-04-12 16:10:14 +02:00

(Migrated from codeberg.org)

Probleem

Kleurconstanten zijn verspreid:

#c07000 (highlight oranje) verschijnt in PROV_HIGHLIGHT, WATER_HIGHLIGHT, COUNTRY_HIGHLIGHT én in CSS
#58CC02 (mastered groen) staat op 5+ plekken
#1b5e20 (mastered donkergroen), #3b82f6 (default blauw) idem

Bij een redesign moet je overal zoeken.

Oplossing

CSS custom properties als enkele bron van waarheid:

:root {
  --color-highlight:        #f0a500;
  --color-highlight-border: #c07000;
  --color-mastered:         #58CC02;
  --color-mastered-border:  #1b5e20;
  --color-default:          #3b82f6;
  --color-default-border:   #2a4a8a;
}

JS-stijlconstanten lezen de waarden via getComputedStyle(document.documentElement), of definieer ze parallel als JS-constanten naast de CSS en gebruik de JS-constanten in de Leaflet-styles.

Impact

0 regels verwijderd, maar één plek voor kleurwijzigingen
Zinvol bij een toekomstig redesign of donkere modus

Risico

Laag — geen functionaliteitswijziging. Visuele regressie is het enige risico; gebruik Playwright screenshot-vergelijking als check.

Zie REFACTORING.md voorstel #8

## Probleem Kleurconstanten zijn verspreid: - `#c07000` (highlight oranje) verschijnt in `PROV_HIGHLIGHT`, `WATER_HIGHLIGHT`, `COUNTRY_HIGHLIGHT` én in CSS - `#58CC02` (mastered groen) staat op 5+ plekken - `#1b5e20` (mastered donkergroen), `#3b82f6` (default blauw) idem Bij een redesign moet je overal zoeken. ## Oplossing CSS custom properties als enkele bron van waarheid: ```css :root { --color-highlight: #f0a500; --color-highlight-border: #c07000; --color-mastered: #58CC02; --color-mastered-border: #1b5e20; --color-default: #3b82f6; --color-default-border: #2a4a8a; } ``` JS-stijlconstanten lezen de waarden via `getComputedStyle(document.documentElement)`, of definieer ze parallel als JS-constanten naast de CSS en gebruik de JS-constanten in de Leaflet-styles. ## Impact - 0 regels verwijderd, maar één plek voor kleurwijzigingen - Zinvol bij een toekomstig redesign of donkere modus ## Risico Laag — geen functionaliteitswijziging. Visuele regressie is het enige risico; gebruik Playwright screenshot-vergelijking als check. _Zie REFACTORING.md voorstel #8_

Ghost commented

2026-04-12 21:20:56 +02:00

(Migrated from codeberg.org)

Geïmplementeerd in refactor-commit 96e1a18.

Geïmplementeerd in refactor-commit 96e1a18.