@col/brand-tokens

Versie: 1.1.0 Toegevoegd: 2026-08-03

Herkomst

Vertrekpunt is bestaand materiaal in C:\HPProjects\designsystem — een onafgemaakte poging uit april 2026 die al goede tokens voor COLORIGINZ bevatte: packages/tokens/src/brands/coloriginz.json (cyan #009CDE als primary, plus rood, groen en paars als secundaire kleuren, elk met een schaal 50–900) en packages/ui/src/coloriginz.css (106 regels --col-* custom properties).

Vervangt de hardcoded badgeClass: 'bg-indigo-100 text-indigo-800'-achtige waarden in supplier-onboarding-vercel/src/lib/label-config.ts door echte tokens die per merk wisselen via een data-label-attribuut.

Waarvoor

Merkkleuren als CSS-variabelen (--brand-50 t/m --brand-900, --brand-contrast), geschakeld op basis van een data-label-attribuut op <html>. Een consumer zet dat attribuut zelf op basis van zijn eigen domeinlogica; het item bevat alleen de labelnamen en de kleurwaarden, geen routing- of hostname-logica.

Gebruik het als de app meerdere merken/labels bedient en de kleur van UI-elementen (badges, accenten, knoppen) per merk moet variëren. Gebruik het niet als alternatief voor de gewone shadcn-thematokens (--primary, --accent, etc.) — brand-* is bedoeld voor merkidentiteit binnen een verder neutrale UI, niet als vervanging van het hele kleursysteem.

Wat je app moet leveren

brandLabels / BrandLabel / isBrandLabel

Uit brand-tokens.ts:

De kleuren zelf zijn geen export — die leven als CSS-variabelen in globals.css (via cssVars in registry.json) en als [data-label='...'] blokken die de consumer zelf toevoegt (zie hieronder). Je app moet zelf ergens <html data-label={label}> zetten; dit item bepaalt niet hóe je aan dat label komt.

emailAccents / EmailAccent

Uit email-colors.ts (sinds 1.1.0). Hexwaarden, geen oklch() — e-mailclients kennen oklch() niet en Outlook valt dan terug op zwart. Omgerekend uit dezelfde oklch-bron als brand-tokens.css; komen er huisstijldocumenten, dan worden beide bestanden in één keer bijgewerkt.

Bedoeld voor EmailBrand uit @col/email-shell: emailAccents[label].accent → EmailBrand.accent, enzovoort. Zie waarom accent brand-700 is en niet brand-500 onder Bewuste keuzes.

De merkblokken

registry/col/brand-tokens/brand-tokens.css reist niet mee als registry-bestand (registry-items kunnen geen CSS-bestand naast cssVars uitrollen naar een custom selector). Kopieer de inhoud handmatig naar je globals.css, onder de :root-blokken:

[data-label='PFC'] {
  --brand-50: oklch(0.968 0.023 92.4);
  --brand-100: oklch(0.925 0.056 92.4);
  --brand-500: oklch(0.706 0.121 92.4);   /* ~#C0982B, schatting */
  --brand-700: oklch(0.534 0.092 92.4);
  --brand-900: oklch(0.351 0.060 92.4);
  --brand-contrast: oklch(0.145 0 0);      /* ~#3A3A3A antraciet */
}

[data-label='FFS'] {
  --brand-50: oklch(0.958 0.026 28.3);
  --brand-100: oklch(0.903 0.062 28.3);
  --brand-500: oklch(0.601 0.208 28.3);   /* ~#E63B26, schatting */
  --brand-700: oklch(0.455 0.158 28.3);
  --brand-900: oklch(0.298 0.104 28.3);
  --brand-contrast: oklch(0.443 0.113 158.6); /* ~#177A46 bosgroen */
}

[data-label='MPO'] {
  --brand-50: oklch(0.967 0.021 356.4);
  --brand-100: oklch(0.916 0.049 356.4);
  --brand-500: oklch(0.588 0.223 356.4);  /* ~#E11D6B, thematisch (pioenroos) */
  --brand-700: oklch(0.446 0.169 356.4);
  --brand-900: oklch(0.292 0.111 356.4);
  --brand-contrast: oklch(0.145 0 0);      /* logo is monochroom zwart */
}

COLORIGINZ heeft geen [data-label]-blok nodig — dat zijn de light-waarden die het item al via cssVars in :root zet (cyan #009CDE omgezet naar oklch).

Kleurentabel: herkomst en waardering

De geschatte waarden komen uit de logobestanden, niet uit de bestaande badgeClass-waarden in label-config.ts — die bleken grotendeels los te staan van de merken:

Geschatte primaire/secundaire waarden (voor het aflezen van de oklch-getallen hierboven):

De merkkleuren voor PFC, FFS en MPO zijn op 3 augustus 2026 met het oog afgeleid uit de logobestanden. Het zijn benaderingen, geen officiële huisstijlwaarden. Zodra die er zijn, worden ze vervangen en gaan de apps in "Gebruikt door" mee.

Bestanden

Geen upstream shadcn-afhankelijkheden. Tokens: zes --brand-* variabelen, meegeleverd via cssVars (alleen light, zie hieronder).

Gebruikt door

Bewuste keuzes

• Geen dark-blok. De merkkleuren zijn ontworpen voor een lichte ondergrond en er is geen huisstijlmateriaal voor donkere varianten. Klakkeloos donkerder maken zou een merkbeslissing zijn die niet aan het design system is. De app heeft op dit moment ook geen dark mode actief (next-themes is geïnstalleerd, maar er staat geen provider in de root layout). Zodra een consumer dark mode activeert, hoort een expliciete dark-tabel hierbij — geen automatische afleiding.
• De merkblokken reizen niet mee als registry-bestand. cssVars in registry.json kan alleen :root/.dark-achtige blokken uitdrukken, geen custom attribuutselector zoals [data-label='PFC']. Vandaar dat brand-tokens.css bewust buiten files staat en de consumer het handmatig overneemt — gedocumenteerd hier en in de previewpagina, in plaats van stilzwijgend onvolledig geleverd.
• Kleuren als export weglaten uit brand-tokens.ts. De waarden horen in CSS, niet in JS — anders ontstaan twee bronnen van waarheid zodra iemand de CSS aanpast zonder de TS-export te vinden (of andersom). email-colors.ts is hier bewust de uitzondering: e-mail-HTML kan geen CSS-variabelen lezen, dus moeten de hexwaarden daar wél als export bestaan.
• emailAccents[label].accent is brand-700, niet brand-500. Gemeten contrast van witte tekst op brand-500: COLORIGINZ 3,2 — PFC 2,6 — FFS 4,3 — MPO 4,7. Drie van de vier merken halen de 4,5:1 van WCAG AA niet, en knoptekst van 15px vet telt niet als "grote tekst" onder die norm. Met brand-700 wordt dat 6,2 — 5,2 — 7,9 — 8,4, en dan kan accentContrast voor elk merk gewoon wit blijven. Prijs: het PFC-goud wordt in de knop donkerder (#806b24) dan in het logo — een bewuste ruil van merkgetrouwheid tegen leesbaarheid. Het streepje bovenaan (rule) draagt geen tekst en houdt daarom wél brand-500. Zie ook docs/items/email-shell.md, dat deze kleuren consumeert.

Bekende beperkingen

• De schattingen voor PFC, FFS en MPO zijn niet geverifieerd tegen officiële huisstijldocumenten; zie de kleurentabel hierboven voor de herkomst per waarde.
• Geen dark-variant — zie "Bewuste keuzes".
• Het item zet zelf niets op <html>; het data-label-attribuut is aan de consumer.