jouw-stem__design-system 0.1.0 → 0.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/dist/css/theme-dark.css +78 -78
  2. package/dist/css/theme-light.css +888 -888
  3. package/dist/manifest.json +2 -2
  4. package/dist/scss/_tokens.scss +48 -48
  5. package/dist/token-refs.json +67 -67
  6. package/package.json +1 -1
  7. package/src/components/ButtonPrimary/ButtonPrimary.tokens.theme-light.json +8 -8
  8. package/tokens/themes/theme-dark/color.json +9 -9
  9. package/tokens/themes/theme-light/color.json +52 -52
package/dist/manifest.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
- "version": "0.1.0",
3
- "generatedAt": "2026-07-01T09:55:46.524Z",
2
+ "version": "0.2.0",
3
+ "generatedAt": "2026-08-09T08:29:36.107Z",
4
4
  "components": [
5
5
  {
6
6
  "name": "Accordion",
package/dist/scss/_tokens.scss CHANGED
@@ -2,73 +2,73 @@
2
2
  // These SCSS variables reference CSS custom properties for runtime theming
3
3
 
4
4
  // Surface
5
- $surface-canvas: var(--surface-canvas); // Main page background — nu.nl pure white
6
- $surface-panel: var(--surface-panel); // Card/panel background — light grey, derived above the #eeeeee hairline
5
+ $surface-canvas: var(--surface-canvas); // Main page background — warm off-white, the dominant fill across all six mockups
6
+ $surface-panel: var(--surface-panel); // Card/panel background — pure white cards sitting on the warm canvas (pricing cards, form fields)
7
7
  $surface-elevated: var(--surface-elevated); // Elevated surface (modals, dropdowns)
8
- $surface-overlay: var(--surface-overlay); // Modal overlay backdrop
9
- $surface-muted: var(--surface-muted); // Subtle/recessed background — slightly navy-tinted neutral
10
- $surface-inverse: var(--surface-inverse); // Dark surface for contrast (tooltips, banners) — nu.nl navy
11
- $surface-highlight: var(--surface-highlight); // Warm accent surface — light tint of breaking-news red
12
- $surface-gradient-start: var(--surface-gradient-start); // Gradient background start — flattened to solid (no nu.nl gradient)
13
- $surface-gradient-end: var(--surface-gradient-end); // Gradient background end — flattened to solid (no nu.nl gradient)
8
+ $surface-overlay: var(--surface-overlay); // Modal overlay backdrop — deep petrol wash rather than neutral black
9
+ $surface-muted: var(--surface-muted); // Subtle/recessed background — cool grey-green band (quote block, 'eerste les gratis' strip)
10
+ $surface-inverse: var(--surface-inverse); // Dark surface for contrast (footer, CTA bands) — deep petrol, measured flat fill
11
+ $surface-highlight: var(--surface-highlight); // Accent surface — light teal tint (selected/'meest gekozen' card wash)
12
+ $surface-gradient-start: var(--surface-gradient-start); // Gradient background start — flattened to solid (design uses no surface gradients)
13
+ $surface-gradient-end: var(--surface-gradient-end); // Gradient background end — flattened to solid (design uses no surface gradients)
14
14
 
15
15
  // Text
16
- $text-default: var(--text-default); // Primary text — nu.nl navy rgb(31,37,68)
16
+ $text-default: var(--text-default); // Primary body text — petrol slate, 11.2:1 on canvas
17
17
  $text-primary: var(--text-primary); // Primary text (alias)
18
- $text-secondary: var(--text-secondary); // Secondary text — slightly lifted navy
19
- $text-muted: var(--text-muted); // Helper/secondary text
20
- $text-subtle: var(--text-subtle); // Placeholder text
21
- $text-inverse: var(--text-inverse); // Text on dark backgrounds
22
- $text-link: var(--text-link); // Link text — nu.nl link blue rgb(0,108,222)
23
- $text-linkHover: var(--text-linkHover); // Link hover — darker blue
24
- $text-linkVisited: var(--text-linkVisited); // Visited link
25
- $text-heading: var(--text-heading); // Heading text — nu.nl navy
18
+ $text-secondary: var(--text-secondary); // Secondary text — lifted petrol slate, 8.0:1 on canvas
19
+ $text-muted: var(--text-muted); // Helper/secondary text — 4.8:1 on canvas, holds AA
20
+ $text-subtle: var(--text-subtle); // Placeholder text — 3.2:1 on canvas (AA-large / non-text minimum)
21
+ $text-inverse: var(--text-inverse); // Text on dark surfaces — warm off-white, 16.8:1 on the petrol inverse
22
+ $text-link: var(--text-link); // Link text — teal ramp step 700, 5.2:1 on canvas
23
+ $text-linkHover: var(--text-linkHover); // Link hover — one ramp step deeper, 7.2:1 on canvas
24
+ $text-linkVisited: var(--text-linkVisited); // Visited link — muted slate-blue, kept distinguishable from the teal link
25
+ $text-heading: var(--text-heading); // Heading text — near-black petrol ink, 17.6:1 on canvas (darkest measured stroke plateau)
26
26
 
27
27
  // Border
28
- $border-subtle: var(--border-subtle); // Subtle borders — nu.nl hairline rgb(238,238,238)
29
- $border-default: var(--border-default); // Default borders
30
- $border-strong: var(--border-strong); // Emphasised borders — navy rule (nu.nl uses navy under nav, headings)
31
- $border-focus: var(--border-focus); // Focus ring colour — nu.nl link blue
32
- $border-vibrant-start: var(--border-vibrant-start); // Vibrant gradient border start — flattened to solid navy
33
- $border-vibrant-end: var(--border-vibrant-end); // Vibrant gradient border end — flattened to solid navy
28
+ $border-subtle: var(--border-subtle); // Subtle borders — warm hairline measured on the pricing-card outlines
29
+ $border-default: var(--border-default); // Default borders — cool hairline matching the recessed band
30
+ $border-strong: var(--border-strong); // Emphasised borders — petrol ink rule (used under headings in the mockups)
31
+ $border-focus: var(--border-focus); // Focus ring colour — teal ramp step 700
32
+ $border-vibrant-start: var(--border-vibrant-start); // Vibrant gradient border start — flattened to solid teal
33
+ $border-vibrant-end: var(--border-vibrant-end); // Vibrant gradient border end — flattened to solid teal
34
34
 
35
35
  // Feedback
36
- $feedback-success: var(--feedback-success); // Success state
36
+ $feedback-success: var(--feedback-success); // Success state — teal-leaning green, harmonised with the palette (5.0:1 on canvas)
37
37
  $feedback-successSubtle: var(--feedback-successSubtle); // Success background
38
38
  $feedback-successEmphasis: var(--feedback-successEmphasis); // Success text
39
- $feedback-warning: var(--feedback-warning); // Warning state
39
+ $feedback-warning: var(--feedback-warning); // Warning state — warm ochre tuned to the warm canvas (3.8:1)
40
40
  $feedback-warningSubtle: var(--feedback-warningSubtle); // Warning background
41
- $feedback-warningEmphasis: var(--feedback-warningEmphasis); // Warning text
42
- $feedback-error: var(--feedback-error); // Error state — nu.nl breaking-news red rgb(224,6,19)
41
+ $feedback-warningEmphasis: var(--feedback-warningEmphasis); // Warning text — 5.9:1 on canvas
42
+ $feedback-error: var(--feedback-error); // Error state — muted brick red, desaturated to sit beside the teal (5.6:1)
43
43
  $feedback-errorSubtle: var(--feedback-errorSubtle); // Error background
44
- $feedback-errorEmphasis: var(--feedback-errorEmphasis); // Error text — nu.nl deeper promo red rgb(196,0,0)
45
- $feedback-info: var(--feedback-info); // Info state — nu.nl link blue
44
+ $feedback-errorEmphasis: var(--feedback-errorEmphasis); // Error text — 8.0:1 on canvas
45
+ $feedback-info: var(--feedback-info); // Info state — teal (the design carries no separate informational blue)
46
46
  $feedback-infoSubtle: var(--feedback-infoSubtle); // Info background
47
- $feedback-infoEmphasis: var(--feedback-infoEmphasis); // Info text
47
+ $feedback-infoEmphasis: var(--feedback-infoEmphasis); // Info text — one ramp step deeper
48
48
 
49
49
  // Accent
50
- $accent-gradient-start: var(--accent-gradient-start); // Accent gradient start — flattened to solid navy (nu.nl uses solid)
51
- $accent-gradient-end: var(--accent-gradient-end); // Accent gradient end — flattened to solid navy
52
- $accent-gradient-hoverStart: var(--accent-gradient-hoverStart); // Accent hover start — flattened to lifted navy
53
- $accent-gradient-hoverEnd: var(--accent-gradient-hoverEnd); // Accent hover end — flattened to lifted navy
50
+ $accent-gradient-start: var(--accent-gradient-start); // Accent gradient start — flattened to solid teal (design uses solid fills)
51
+ $accent-gradient-end: var(--accent-gradient-end); // Accent gradient end — flattened to solid teal
52
+ $accent-gradient-hoverStart: var(--accent-gradient-hoverStart); // Accent hover start — flattened to one ramp step deeper
53
+ $accent-gradient-hoverEnd: var(--accent-gradient-hoverEnd); // Accent hover end — flattened to one ramp step deeper
54
54
 
55
55
  // Intent
56
- $intent-action-default: var(--intent-action-default); // Primary CTA colour — nu.nl navy
57
- $intent-action-hover: var(--intent-action-hover); // Primary CTA hover
58
- $intent-action-active: var(--intent-action-active); // Primary CTA pressed
56
+ $intent-action-default: var(--intent-action-default); // Primary CTA colour — teal.700 #0f766e, within 2% of the measured button fill #097878; 5.5:1 against a white label
57
+ $intent-action-hover: var(--intent-action-hover); // Primary CTA hover — one ramp step deeper, 7.6:1 against white
58
+ $intent-action-active: var(--intent-action-active); // Primary CTA pressed — two ramp steps deeper, 9.5:1 against white
59
59
  $intent-action-disabled: var(--intent-action-disabled); // Disabled state
60
60
  $intent-secondary-default: var(--intent-secondary-default); // Secondary action bg
61
- $intent-secondary-hover: var(--intent-secondary-hover); // Secondary action hover
62
- $intent-secondary-border: var(--intent-secondary-border); // Secondary action border — navy outline (nu.nl button pattern)
61
+ $intent-secondary-hover: var(--intent-secondary-hover); // Secondary action hover — recessed band tint
62
+ $intent-secondary-border: var(--intent-secondary-border); // Secondary action border — teal outline (matches the 'Meer over mij' ghost buttons)
63
63
 
64
64
  // Focus
65
- $focus-ring: var(--focus-ring); // Focus ring colour — nu.nl link blue
65
+ $focus-ring: var(--focus-ring); // Focus ring colour — teal.700, 5.2:1 on canvas
66
66
 
67
67
  // Brand
68
- $brand-primary: var(--brand-primary); // Primary brand colour — nu.nl navy rgb(31,37,68)
69
- $brand-secondary: var(--brand-secondary); // Secondary brand colour (CTA / link) — nu.nl blue rgb(0,108,222)
70
- $brand-accent: var(--brand-accent); // Accent brand colour — nu.nl breaking red rgb(224,6,19)
71
- $brand-subtle: var(--brand-subtle); // Subtle brand background
68
+ $brand-primary: var(--brand-primary); // Primary brand colour — the 'Jouw Stem' teal, carried by every CTA and the logo waveform
69
+ $brand-secondary: var(--brand-secondary); // Secondary brand colour — mid teal used for the decorative connector lines and icon strokes
70
+ $brand-accent: var(--brand-accent); // Accent brand colour — light teal for on-dark use (footer section labels, 9.6:1 on the petrol inverse)
71
+ $brand-subtle: var(--brand-subtle); // Subtle brand background — light teal wash
72
72
 
73
73
  // Container
74
74
  $container-max-width-narrow: var(--container-max-width-narrow); // Long-form reading / forms / articles (~65ch comfortable line length)
@@ -391,11 +391,11 @@ $button-outlined-border-active: var(--button-outlined-border-active); // Outline
391
391
  $button-outlined-border-disabled: var(--button-outlined-border-disabled); // Outlined button disabled border
392
392
 
393
393
  // Button-primary
394
- $button-primary-background-default: var(--button-primary-background-default); // Primary button background — navy.700, palette-step rest
395
- $button-primary-background-hover: var(--button-primary-background-hover); // Primary button hover — navy.800, one ramp step darker
396
- $button-primary-background-active: var(--button-primary-background-active); // Primary button pressed — navy.900, two steps darker
394
+ $button-primary-background-default: var(--button-primary-background-default); // Primary button background — teal action fill from the Jouw Stem mockups. Repointed from {primary.700} on 2026-08-09: the brand chain still resolves primary=navy, which no longer matches the extracted identity (mirrors the theme-high-contrast-solarized-dark pattern)
395
+ $button-primary-background-hover: var(--button-primary-background-hover); // Primary button hover — one step deeper teal
396
+ $button-primary-background-active: var(--button-primary-background-active); // Primary button pressed — two steps deeper teal
397
397
  $button-primary-background-disabled: var(--button-primary-background-disabled); // Primary button disabled background (state-exempt from rules)
398
- $button-primary-text-default: var(--button-primary-text-default); // Primary button label — white on dark fill
398
+ $button-primary-text-default: var(--button-primary-text-default); // Primary button label — white on the teal fill, 5.3:1
399
399
  $button-primary-text-disabled: var(--button-primary-text-disabled); // Primary button disabled label
400
400
  $button-primary-border-default: var(--button-primary-border-default); // Primary button border — matches fill
401
401
  $button-primary-border-hover: var(--button-primary-border-hover); // Primary button hover border
package/dist/token-refs.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
- "generatedAt": "2026-07-01T09:55:46.545Z",
2
+ "generatedAt": "2026-08-09T08:29:36.143Z",
3
3
  "themes": {
4
4
  "dark": {
5
5
  "neutral-0": "#ffffff",
@@ -263,19 +263,19 @@
263
263
  "border-subtle": "{primary.700}",
264
264
  "border-default": "{primary.600}",
265
265
  "border-strong": "{primary.500}",
266
- "border-focus": "#006cde",
267
- "border-vibrant-start": "#1f2544",
268
- "border-vibrant-end": "#1f2544",
269
- "feedback-success": "#2a8a3a",
266
+ "border-focus": "{teal.700}",
267
+ "border-vibrant-start": "{teal.700}",
268
+ "border-vibrant-end": "{teal.700}",
269
+ "feedback-success": "#1f7a55",
270
270
  "feedback-successSubtle": "{success.100}",
271
271
  "feedback-successEmphasis": "{success.400}",
272
- "feedback-warning": "#d97706",
272
+ "feedback-warning": "#b3701a",
273
273
  "feedback-warningSubtle": "{warning.100}",
274
274
  "feedback-warningEmphasis": "{warning.400}",
275
- "feedback-error": "#e00613",
275
+ "feedback-error": "#b8342c",
276
276
  "feedback-errorSubtle": "{danger.100}",
277
277
  "feedback-errorEmphasis": "{danger.400}",
278
- "feedback-info": "#006cde",
278
+ "feedback-info": "{teal.700}",
279
279
  "feedback-infoSubtle": "{info.100}",
280
280
  "feedback-infoEmphasis": "{info.400}",
281
281
  "intent-action-default": "{secondary.500}",
@@ -285,9 +285,9 @@
285
285
  "intent-secondary-default": "transparent",
286
286
  "intent-secondary-hover": "{primary.700}",
287
287
  "intent-secondary-border": "{primary.500}",
288
- "focus-ring": "#006cde",
288
+ "focus-ring": "{teal.700}",
289
289
  "brand-primary": "{primary.300}",
290
- "brand-secondary": "#006cde",
290
+ "brand-secondary": "{teal.600}",
291
291
  "brand-accent": "{accent.400}",
292
292
  "brand-subtle": "{primary.700}",
293
293
  "container-max-width-narrow": "720px",
@@ -8458,10 +8458,10 @@
8458
8458
  "accent-800": "{amber.800}",
8459
8459
  "accent-900": "{amber.900}",
8460
8460
  "accent-950": "{amber.900}",
8461
- "accent-gradient-start": "#1f2544",
8462
- "accent-gradient-end": "#1f2544",
8463
- "accent-gradient-hoverStart": "#3d4467",
8464
- "accent-gradient-hoverEnd": "#3d4467",
8461
+ "accent-gradient-start": "{teal.700}",
8462
+ "accent-gradient-end": "{teal.700}",
8463
+ "accent-gradient-hoverStart": "{teal.800}",
8464
+ "accent-gradient-hoverEnd": "{teal.800}",
8465
8465
  "success-0": "{green.50}",
8466
8466
  "success-50": "{green.50}",
8467
8467
  "success-100": "{green.100}",
@@ -8513,55 +8513,55 @@
8513
8513
  "font-sans": "system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif",
8514
8514
  "font-display": "system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif",
8515
8515
  "font-mono": "ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace",
8516
- "surface-canvas": "#ffffff",
8517
- "surface-panel": "#f5f5f5",
8516
+ "surface-canvas": "#faf8f5",
8517
+ "surface-panel": "#ffffff",
8518
8518
  "surface-elevated": "#ffffff",
8519
- "surface-overlay": "rgba(0, 0, 0, 0.5)",
8520
- "surface-muted": "#f0f1f4",
8521
- "surface-inverse": "#1f2544",
8522
- "surface-highlight": "#fde8ea",
8523
- "surface-gradient-start": "#ffffff",
8524
- "surface-gradient-end": "#ffffff",
8525
- "text-default": "#1f2544",
8526
- "text-primary": "#1f2544",
8527
- "text-secondary": "#3d4467",
8528
- "text-muted": "#5e6481",
8529
- "text-subtle": "#8e93a8",
8530
- "text-inverse": "#ffffff",
8531
- "text-link": "#006cde",
8532
- "text-linkHover": "#0050a8",
8533
- "text-linkVisited": "#5d3da8",
8534
- "text-heading": "#1f2544",
8535
- "border-subtle": "#eeeeee",
8536
- "border-default": "#d9dadf",
8537
- "border-strong": "#1f2544",
8538
- "border-focus": "#006cde",
8539
- "border-vibrant-start": "#1f2544",
8540
- "border-vibrant-end": "#1f2544",
8541
- "feedback-success": "#2a8a3a",
8542
- "feedback-successSubtle": "#e6f4e9",
8543
- "feedback-successEmphasis": "#1d6429",
8544
- "feedback-warning": "#d97706",
8545
- "feedback-warningSubtle": "#fef3e6",
8546
- "feedback-warningEmphasis": "#a8590e",
8547
- "feedback-error": "#e00613",
8548
- "feedback-errorSubtle": "#fde8ea",
8549
- "feedback-errorEmphasis": "#c40000",
8550
- "feedback-info": "#006cde",
8551
- "feedback-infoSubtle": "#e0eef9",
8552
- "feedback-infoEmphasis": "#0050a8",
8553
- "intent-action-default": "#1f2544",
8554
- "intent-action-hover": "#3d4467",
8555
- "intent-action-active": "#0f1422",
8556
- "intent-action-disabled": "#d9dadf",
8519
+ "surface-overlay": "rgba(4, 26, 38, 0.55)",
8520
+ "surface-muted": "#eceeec",
8521
+ "surface-inverse": "#041a26",
8522
+ "surface-highlight": "#e2efec",
8523
+ "surface-gradient-start": "#faf8f5",
8524
+ "surface-gradient-end": "#faf8f5",
8525
+ "text-default": "#253a43",
8526
+ "text-primary": "#253a43",
8527
+ "text-secondary": "#3d5058",
8528
+ "text-muted": "#5f7178",
8529
+ "text-subtle": "#7d8f95",
8530
+ "text-inverse": "#faf8f5",
8531
+ "text-link": "{teal.700}",
8532
+ "text-linkHover": "{teal.800}",
8533
+ "text-linkVisited": "#4a5f74",
8534
+ "text-heading": "#04141f",
8535
+ "border-subtle": "#e6e2dd",
8536
+ "border-default": "#d5d8d4",
8537
+ "border-strong": "#04141f",
8538
+ "border-focus": "{teal.700}",
8539
+ "border-vibrant-start": "{teal.700}",
8540
+ "border-vibrant-end": "{teal.700}",
8541
+ "feedback-success": "#1f7a55",
8542
+ "feedback-successSubtle": "#e4f2ec",
8543
+ "feedback-successEmphasis": "#145c3f",
8544
+ "feedback-warning": "#b3701a",
8545
+ "feedback-warningSubtle": "#f7eddf",
8546
+ "feedback-warningEmphasis": "#8a5410",
8547
+ "feedback-error": "#b8342c",
8548
+ "feedback-errorSubtle": "#f7e6e4",
8549
+ "feedback-errorEmphasis": "#8f2620",
8550
+ "feedback-info": "{teal.700}",
8551
+ "feedback-infoSubtle": "#e2efee",
8552
+ "feedback-infoEmphasis": "{teal.800}",
8553
+ "intent-action-default": "{teal.700}",
8554
+ "intent-action-hover": "{teal.800}",
8555
+ "intent-action-active": "{teal.900}",
8556
+ "intent-action-disabled": "#d5d8d4",
8557
8557
  "intent-secondary-default": "transparent",
8558
- "intent-secondary-hover": "#f0f1f4",
8559
- "intent-secondary-border": "#1f2544",
8560
- "focus-ring": "#006cde",
8561
- "brand-primary": "#1f2544",
8562
- "brand-secondary": "#006cde",
8563
- "brand-accent": "#e00613",
8564
- "brand-subtle": "#f0f1f4",
8558
+ "intent-secondary-hover": "#eceeec",
8559
+ "intent-secondary-border": "{teal.700}",
8560
+ "focus-ring": "{teal.700}",
8561
+ "brand-primary": "{teal.700}",
8562
+ "brand-secondary": "{teal.600}",
8563
+ "brand-accent": "{teal.400}",
8564
+ "brand-subtle": "#e2efec",
8565
8565
  "container-max-width-narrow": "720px",
8566
8566
  "container-max-width-default": "1200px",
8567
8567
  "container-max-width-wide": "1600px",
@@ -8837,15 +8837,15 @@
8837
8837
  "button-outlined-border-hover": "{brand.primary}",
8838
8838
  "button-outlined-border-active": "{brand.primary}",
8839
8839
  "button-outlined-border-disabled": "{neutral.300}",
8840
- "button-primary-background-default": "{primary.700}",
8841
- "button-primary-background-hover": "{primary.800}",
8842
- "button-primary-background-active": "{primary.900}",
8840
+ "button-primary-background-default": "{intent.action.default}",
8841
+ "button-primary-background-hover": "{intent.action.hover}",
8842
+ "button-primary-background-active": "{intent.action.active}",
8843
8843
  "button-primary-background-disabled": "{neutral.200}",
8844
8844
  "button-primary-text-default": "{neutral.0}",
8845
8845
  "button-primary-text-disabled": "{neutral.500}",
8846
- "button-primary-border-default": "{primary.700}",
8847
- "button-primary-border-hover": "{primary.800}",
8848
- "button-primary-border-active": "{primary.900}",
8846
+ "button-primary-border-default": "{intent.action.default}",
8847
+ "button-primary-border-hover": "{intent.action.hover}",
8848
+ "button-primary-border-active": "{intent.action.active}",
8849
8849
  "button-primary-border-disabled": "{neutral.200}",
8850
8850
  "button-secondary-background-default": "{surface.muted}",
8851
8851
  "button-secondary-background-hover": "{intent.secondary.hover}",
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "jouw-stem__design-system",
3
3
  "private": false,
4
- "version": "0.1.0",
4
+ "version": "0.2.0",
5
5
  "type": "module",
6
6
  "description": "White-label design system template — clone, edit tokens/brand.json, rebuild.",
7
7
  "author": "Your Org",
package/src/components/ButtonPrimary/ButtonPrimary.tokens.theme-light.json CHANGED
@@ -1,20 +1,20 @@
1
1
  {
2
2
  "button-primary": {
3
3
  "background": {
4
- "default": { "value": "{primary.700}", "type": "color", "description": "Primary button background — navy.700, palette-step rest" },
5
- "hover": { "value": "{primary.800}", "type": "color", "description": "Primary button hover — navy.800, one ramp step darker" },
6
- "active": { "value": "{primary.900}", "type": "color", "description": "Primary button pressed — navy.900, two steps darker" },
4
+ "default": { "value": "{intent.action.default}", "type": "color", "description": "Primary button background — teal action fill from the Jouw Stem mockups. Repointed from {primary.700} on 2026-08-09: the brand chain still resolves primary=navy, which no longer matches the extracted identity (mirrors the theme-high-contrast-solarized-dark pattern)" },
5
+ "hover": { "value": "{intent.action.hover}", "type": "color", "description": "Primary button hover — one step deeper teal" },
6
+ "active": { "value": "{intent.action.active}", "type": "color", "description": "Primary button pressed — two steps deeper teal" },
7
7
  "disabled": { "value": "{neutral.200}", "type": "color", "description": "Primary button disabled background (state-exempt from rules)" }
8
8
  },
9
9
  "text": {
10
- "default": { "value": "{neutral.0}", "type": "color", "description": "Primary button label — white on dark fill" },
10
+ "default": { "value": "{neutral.0}", "type": "color", "description": "Primary button label — white on the teal fill, 5.3:1" },
11
11
  "disabled": { "value": "{neutral.500}", "type": "color", "description": "Primary button disabled label" }
12
12
  },
13
13
  "border": {
14
- "default": { "value": "{primary.700}", "type": "color", "description": "Primary button border — matches fill" },
15
- "hover": { "value": "{primary.800}", "type": "color", "description": "Primary button hover border" },
16
- "active": { "value": "{primary.900}", "type": "color", "description": "Primary button active border" },
17
- "disabled": { "value": "{neutral.200}", "type": "color", "description": "Primary button disabled border" }
14
+ "default": { "value": "{intent.action.default}", "type": "color", "description": "Primary button border — matches fill" },
15
+ "hover": { "value": "{intent.action.hover}", "type": "color", "description": "Primary button hover border" },
16
+ "active": { "value": "{intent.action.active}", "type": "color", "description": "Primary button active border" },
17
+ "disabled": { "value": "{neutral.200}", "type": "color", "description": "Primary button disabled border" }
18
18
  }
19
19
  }
20
20
  }
package/tokens/themes/theme-dark/color.json CHANGED
@@ -32,24 +32,24 @@
32
32
  "subtle": { "value": "{primary.700}", "type": "color", "description": "Subtle borders" },
33
33
  "default": { "value": "{primary.600}", "type": "color", "description": "Default borders" },
34
34
  "strong": { "value": "{primary.500}", "type": "color", "description": "Emphasized borders" },
35
- "focus": { "value": "#006cde","type": "color", "description": "Focus ring color — re-synced from light (nu.nl link blue)" },
35
+ "focus": { "value": "{teal.700}","type": "color", "description": "Focus ring color — re-synced from light (teal.700, 3.5:1 on the dark canvas)" },
36
36
  "vibrant": {
37
- "start": { "value": "#1f2544", "type": "color", "description": "Vibrant border start — flattened, re-synced from light (navy)" },
38
- "end": { "value": "#1f2544", "type": "color", "description": "Vibrant border end — flattened, re-synced from light (navy)" }
37
+ "start": { "value": "{teal.700}", "type": "color", "description": "Vibrant border start — flattened, re-synced from light (teal.700)" },
38
+ "end": { "value": "{teal.700}", "type": "color", "description": "Vibrant border end — flattened, re-synced from light (teal.700)" }
39
39
  }
40
40
  },
41
41
 
42
42
  "feedback": {
43
- "success": { "value": "#2a8a3a", "type": "color", "description": "Success state — re-synced from light" },
43
+ "success": { "value": "#1f7a55", "type": "color", "description": "Success state — re-synced from light (3.6:1 on the dark canvas)" },
44
44
  "successSubtle": { "value": "{success.100}", "type": "color", "description": "Success background" },
45
45
  "successEmphasis": { "value": "{success.400}", "type": "color", "description": "Success text" },
46
- "warning": { "value": "#d97706", "type": "color", "description": "Warning state — re-synced from light" },
46
+ "warning": { "value": "#b3701a", "type": "color", "description": "Warning state — re-synced from light (4.8:1 on the dark canvas)" },
47
47
  "warningSubtle": { "value": "{warning.100}", "type": "color", "description": "Warning background" },
48
48
  "warningEmphasis": { "value": "{warning.400}", "type": "color", "description": "Warning text" },
49
- "error": { "value": "#e00613", "type": "color", "description": "Error state — re-synced from light (nu.nl breaking red)" },
49
+ "error": { "value": "#b8342c", "type": "color", "description": "Error state — re-synced from light (muted brick red, 3.3:1 on the dark canvas)" },
50
50
  "errorSubtle": { "value": "{danger.100}", "type": "color", "description": "Error background" },
51
51
  "errorEmphasis": { "value": "{danger.400}", "type": "color", "description": "Error text" },
52
- "info": { "value": "#006cde", "type": "color", "description": "Info state — re-synced from light (nu.nl link blue)" },
52
+ "info": { "value": "{teal.700}", "type": "color", "description": "Info state — re-synced from light (teal.700; the design carries no separate informational blue)" },
53
53
  "infoSubtle": { "value": "{info.100}", "type": "color", "description": "Info background" },
54
54
  "infoEmphasis": { "value": "{info.400}", "type": "color", "description": "Info text" }
55
55
  },
@@ -78,12 +78,12 @@
78
78
  },
79
79
 
80
80
  "focus": {
81
- "ring": { "value": "#006cde", "type": "color", "description": "Focus ring color — re-synced from light (nu.nl link blue)" }
81
+ "ring": { "value": "{teal.700}", "type": "color", "description": "Focus ring color — re-synced from light (teal.700)" }
82
82
  },
83
83
 
84
84
  "brand": {
85
85
  "primary": { "value": "{primary.300}", "type": "color", "description": "Primary brand color" },
86
- "secondary": { "value": "#006cde", "type": "color", "description": "Secondary brand color (CTA) — re-synced from light (nu.nl link blue)" },
86
+ "secondary": { "value": "{teal.600}", "type": "color", "description": "Secondary brand color (CTA) — re-synced from light; teal.600, 5.1:1 against the dark canvas" },
87
87
  "accent": { "value": "{accent.400}", "type": "color", "description": "Accent brand color" },
88
88
  "subtle": { "value": "{primary.700}", "type": "color", "description": "Subtle brand background" }
89
89
  }