@syncupsuite/themes 0.3.0 → 0.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@syncupsuite/themes",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "description": "Pre-built, culturally-grounded design themes — ready to use",
   "license": "MIT",
   "repository": {
@@ -53,8 +53,8 @@
     "tsup": "^8.3.0",
     "typescript": "^5.7.0",
     "vitest": "^4.0.18",
-    "@syncupsuite/foundations": "0.2.0",
-    "@syncupsuite/transformers": "0.2.0"
+    "@syncupsuite/transformers": "0.2.1",
+    "@syncupsuite/foundations": "0.2.0"
   },
   "scripts": {
     "build": "tsup",

package/src/art-deco/tailwind.css

@@ -215,6 +215,28 @@
 
 }
 
+/* === Semantic Color API — theme-aware Tailwind utilities === */
+@theme {
+  --color-canvas: var(--background-canvas);
+  --color-surface: var(--background-surface);
+  --color-muted: var(--background-muted);
+  --color-foreground: var(--text-primary);
+  --color-foreground-secondary: var(--text-secondary);
+  --color-foreground-muted: var(--text-muted);
+  --color-foreground-inverse: var(--text-inverse);
+  --color-primary: var(--interactive-primary);
+  --color-primary-hover: var(--interactive-primary-hover);
+  --color-primary-active: var(--interactive-primary-active);
+  --color-border: var(--border-default);
+  --color-border-strong: var(--border-strong);
+  --color-error: var(--status-error);
+  --color-success: var(--status-success);
+  --color-warning: var(--status-warning);
+  --color-info: var(--status-info);
+  --color-ring: var(--focus-ring);
+  --color-focus-visible: var(--accessibility-focus-visible);
+}
+
 /* Primitive aliases + light mode semantic tokens */
 :root {
   /* --primitive-color-* aliases → @theme --color-* (for semantic var() resolution) */

package/src/art-deco/tokens.css

@@ -1,5 +1,19 @@
-/* art-deco — Design Tokens */
-/* Generated by @syncupsuite/transformers */
+/* ═══════════════════════════════════════════════════════════════
+ * art-deco — Design Tokens
+ * Generated by @syncupsuite/transformers
+ *
+ * CONSUMER API — Use these semantic tokens in your styles:
+ *
+ * Backgrounds:  var(--background-canvas | surface | muted)
+ * Text:         var(--text-primary | secondary | muted | inverse)
+ * Interactive:  var(--interactive-primary | primary-hover | primary-active)
+ * Borders:      var(--border-default | strong)
+ * Status:       var(--status-error | success | warning | info)
+ * Focus:        var(--focus-ring)
+ *
+ * Dark mode:    Add [data-theme="dark"] to a parent element.
+ * Primitives:   --primitive-color-*, --primitive-spacing-*, etc.
+ * ═══════════════════════════════════════════════════════════════ */
 
 :root {
   /* --- Primitive Colors --- */

package/src/de-stijl/meta.json

@@ -0,0 +1,50 @@
+{
+  "id": "de-stijl",
+  "name": "De Stijl",
+  "description": "De Stijl — Dutch Neo-Plasticism, founded Leiden 1917. Mondrian's primary colors and Rietveld's spatial geometry reduced to irreducible elements.",
+  "foundation": {
+    "story": "Piet Mondrian and Theo van Doesburg reduced painting to its irreducible elements: the primary colors, the horizontal and vertical line. Gerrit Rietveld built a chair from this philosophy. The result is not minimal — it is maximal through constraint. Every decision becomes visible because there are so few of them.",
+    "philosophy": "Absolute abstraction, universal harmony — beauty through the elimination of everything that is not essential",
+    "era": "Early Modernist — De Stijl to International Style, 1917–1931",
+    "harmonyMode": "triadic",
+    "radiusTendency": "none",
+    "typographyCategory": "neo-grotesque"
+  },
+  "seedColors": [
+    {
+      "hex": "#0D3B8C",
+      "name": "Blue (Mondriaan Blauw)",
+      "tradition": "Mondrian primary blue — the exact blue of Composition with Red, Blue and Yellow (1930). The structural anchor.",
+      "source": "Piet Mondrian: Life and Work, M. Seuphor"
+    },
+    {
+      "hex": "#D42B2B",
+      "name": "Red (Rietveld Rood)",
+      "tradition": "Mondrian primary red — vermilion of the Rietveld Red Blue Chair (1917). Warmth within the grid.",
+      "source": "De Stijl 1917–1931: The Dutch Contribution to Modern Art, H. Jaffé"
+    },
+    {
+      "hex": "#F5D800",
+      "name": "Yellow (Cadmium Geel)",
+      "tradition": "Mondrian primary yellow — cadmium yellow of Neo-Plasticism theory. The light source in the composition.",
+      "source": "Mondrian: The Art of Destruction, C. Blotkamp"
+    },
+    {
+      "hex": "#1A1A1A",
+      "name": "Black (Raster Zwart)",
+      "tradition": "De Stijl grid lines — the black bars that define spatial relationships in Mondrian's grids. Structure made visible.",
+      "source": "Theo van Doesburg: A New Expression of Life, Art, and Technology, J. Baljeu"
+    },
+    {
+      "hex": "#F7F7F5",
+      "name": "White (Doek Wit)",
+      "tradition": "Canvas ground — the neutral field that makes all relationships visible. Not empty but active.",
+      "source": "The New Art — The New Life: Collected Writings of Piet Mondrian"
+    }
+  ],
+  "validation": {
+    "schema": true,
+    "contrast": false,
+    "completeness": true
+  }
+}

package/src/de-stijl/tailwind.css

@@ -0,0 +1,391 @@
+@import "tailwindcss";
+
+@theme {
+  /* --- Colors --- */
+  /* Blue (Mondriaan Blauw) 50 */
+  --color-blue-mondriaan-blauw-50: #E8F6FF;
+  /* Blue (Mondriaan Blauw) 100 */
+  --color-blue-mondriaan-blauw-100: #B9CFF5;
+  /* Blue (Mondriaan Blauw) 200 */
+  --color-blue-mondriaan-blauw-200: #8DA9DB;
+  /* Blue (Mondriaan Blauw) 300 */
+  --color-blue-mondriaan-blauw-300: #6284C1;
+  /* Blue (Mondriaan Blauw) 400 */
+  --color-blue-mondriaan-blauw-400: #3860A7;
+  /* Blue (Mondriaan Blauw) 500 */
+  --color-blue-mondriaan-blauw-500: #0D3B8C;
+  /* Blue (Mondriaan Blauw) 600 */
+  --color-blue-mondriaan-blauw-600: #032A71;
+  /* Blue (Mondriaan Blauw) 700 */
+  --color-blue-mondriaan-blauw-700: #001A57;
+  /* Blue (Mondriaan Blauw) 800 */
+  --color-blue-mondriaan-blauw-800: #000A3E;
+  /* Blue (Mondriaan Blauw) 900 */
+  --color-blue-mondriaan-blauw-900: #000026;
+  /* Red (Rietveld Rood) 50 */
+  --color-red-rietveld-rood-50: #FFE9E3;
+  /* Red (Rietveld Rood) 100 */
+  --color-red-rietveld-rood-100: #FFC6BE;
+  /* Red (Rietveld Rood) 200 */
+  --color-red-rietveld-rood-200: #FFA499;
+  /* Red (Rietveld Rood) 300 */
+  --color-red-rietveld-rood-300: #F48075;
+  /* Red (Rietveld Rood) 400 */
+  --color-red-rietveld-rood-400: #E55B52;
+  /* Red (Rietveld Rood) 500 */
+  --color-red-rietveld-rood-500: #D42B2B;
+  /* Red (Rietveld Rood) 600 */
+  --color-red-rietveld-rood-600: #A50311;
+  /* Red (Rietveld Rood) 700 */
+  --color-red-rietveld-rood-700: #780000;
+  /* Red (Rietveld Rood) 800 */
+  --color-red-rietveld-rood-800: #4D0000;
+  /* Red (Rietveld Rood) 900 */
+  --color-red-rietveld-rood-900: #250000;
+  /* Yellow (Cadmium Geel) 50 */
+  --color-yellow-cadmium-geel-50: #FCF6D4;
+  /* Yellow (Cadmium Geel) 100 */
+  --color-yellow-cadmium-geel-100: #FBF1B8;
+  /* Yellow (Cadmium Geel) 200 */
+  --color-yellow-cadmium-geel-200: #F9EB9C;
+  /* Yellow (Cadmium Geel) 300 */
+  --color-yellow-cadmium-geel-300: #F8E57C;
+  /* Yellow (Cadmium Geel) 400 */
+  --color-yellow-cadmium-geel-400: #F6DF55;
+  /* Yellow (Cadmium Geel) 500 */
+  --color-yellow-cadmium-geel-500: #F5D800;
+  /* Yellow (Cadmium Geel) 600 */
+  --color-yellow-cadmium-geel-600: #B59B00;
+  /* Yellow (Cadmium Geel) 700 */
+  --color-yellow-cadmium-geel-700: #786200;
+  /* Yellow (Cadmium Geel) 800 */
+  --color-yellow-cadmium-geel-800: #412E00;
+  /* Yellow (Cadmium Geel) 900 */
+  --color-yellow-cadmium-geel-900: #100300;
+  /* Black (Raster Zwart) 50 */
+  --color-black-raster-zwart-50: #F5F5F5;
+  /* Black (Raster Zwart) 100 */
+  --color-black-raster-zwart-100: #C4C4C4;
+  /* Black (Raster Zwart) 200 */
+  --color-black-raster-zwart-200: #959595;
+  /* Black (Raster Zwart) 300 */
+  --color-black-raster-zwart-300: #686868;
+  /* Black (Raster Zwart) 400 */
+  --color-black-raster-zwart-400: #3F3F3F;
+  /* Black (Raster Zwart) 500 */
+  --color-black-raster-zwart-500: #1A1A1A;
+  /* Black (Raster Zwart) 600 */
+  --color-black-raster-zwart-600: #141414;
+  /* Black (Raster Zwart) 700 */
+  --color-black-raster-zwart-700: #0F0F0F;
+  /* Black (Raster Zwart) 800 */
+  --color-black-raster-zwart-800: #0A0A0A;
+  /* Black (Raster Zwart) 900 */
+  --color-black-raster-zwart-900: #060606;
+  /* White (Doek Wit) 50 */
+  --color-white-doek-wit-50: #F5F5F4;
+  /* White (Doek Wit) 100 */
+  --color-white-doek-wit-100: #F5F5F5;
+  /* White (Doek Wit) 200 */
+  --color-white-doek-wit-200: #F6F6F5;
+  /* White (Doek Wit) 300 */
+  --color-white-doek-wit-300: #F6F6F5;
+  /* White (Doek Wit) 400 */
+  --color-white-doek-wit-400: #F7F7F5;
+  /* White (Doek Wit) 500 */
+  --color-white-doek-wit-500: #F7F7F5;
+  /* White (Doek Wit) 600 */
+  --color-white-doek-wit-600: #B2B2B0;
+  /* White (Doek Wit) 700 */
+  --color-white-doek-wit-700: #717170;
+  /* White (Doek Wit) 800 */
+  --color-white-doek-wit-800: #363635;
+  /* White (Doek Wit) 900 */
+  --color-white-doek-wit-900: #060605;
+  /* Neutral 50 */
+  --color-neutral-50: #F4F9FF;
+  /* Neutral 100 */
+  --color-neutral-100: #EAEFF6;
+  /* Neutral 200 */
+  --color-neutral-200: #DADEE6;
+  /* Neutral 300 */
+  --color-neutral-300: #C0C4CC;
+  /* Neutral 400 */
+  --color-neutral-400: #9498A0;
+  /* Neutral 500 */
+  --color-neutral-500: #6B6F76;
+  /* Neutral 600 */
+  --color-neutral-600: #4A4D54;
+  /* Neutral 700 */
+  --color-neutral-700: #303339;
+  /* Neutral 800 */
+  --color-neutral-800: #181B20;
+  /* Neutral 900 */
+  --color-neutral-900: #05070C;
+  /* Accent 50 */
+  --color-accent-50: #FFEBF0;
+  /* Accent 100 */
+  --color-accent-100: #F7C0C9;
+  /* Accent 200 */
+  --color-accent-200: #DE96A3;
+  /* Accent 300 */
+  --color-accent-300: #C46D7F;
+  /* Accent 400 */
+  --color-accent-400: #A9435D;
+  /* Accent 500 */
+  --color-accent-500: #8C0D3C;
+  /* Accent 600 */
+  --color-accent-600: #6E002B;
+  /* Accent 700 */
+  --color-accent-700: #52001A;
+  /* Accent 800 */
+  --color-accent-800: #37000B;
+  /* Accent 900 */
+  --color-accent-900: #1D0002;
+
+  /* --- Spacing (8px grid) --- */
+  /* Spacing 0 (0px) */
+  --spacing-0: 0px;
+  /* Spacing 1 (4px) */
+  --spacing-1: 4px;
+  /* Spacing 2 (8px) */
+  --spacing-2: 8px;
+  /* Spacing 3 (12px) */
+  --spacing-3: 12px;
+  /* Spacing 4 (16px) */
+  --spacing-4: 16px;
+  /* Spacing 5 (20px) */
+  --spacing-5: 20px;
+  /* Spacing 6 (24px) */
+  --spacing-6: 24px;
+  /* Spacing 8 (32px) */
+  --spacing-8: 32px;
+  /* Spacing 10 (40px) */
+  --spacing-10: 40px;
+  /* Spacing 12 (48px) */
+  --spacing-12: 48px;
+  /* Spacing 16 (64px) */
+  --spacing-16: 64px;
+  /* Spacing 20 (80px) */
+  --spacing-20: 80px;
+  /* Spacing 0.5 (2px) */
+  --spacing-0-5: 2px;
+  /* Spacing 1.5 (6px) */
+  --spacing-1-5: 6px;
+
+  /* --- Font Families --- */
+  /* Heading font family */
+  --font-heading: "Inter", "Helvetica Neue", "Arial", sans-serif;
+  /* Body font family */
+  --font-body: "Inter", "Helvetica Neue", "Arial", sans-serif;
+  /* Monospace font family */
+  --font-mono: "JetBrains Mono", "SF Mono", monospace;
+
+  /* --- Font Sizes --- */
+  /* Font size xs */
+  --text-xs: 0.75rem;
+  /* Font size sm */
+  --text-sm: 0.875rem;
+  /* Font size base */
+  --text-base: 1rem;
+  /* Font size lg */
+  --text-lg: 1.125rem;
+  /* Font size xl */
+  --text-xl: 1.25rem;
+  /* Font size 2xl */
+  --text-2xl: 1.5rem;
+  /* Font size 3xl */
+  --text-3xl: 1.875rem;
+  /* Font size 4xl */
+  --text-4xl: 2.25rem;
+
+  /* --- Border Radius --- */
+  /* Border radius none */
+  --radius-none: 0px;
+  /* Border radius sm */
+  --radius-sm: 0px;
+  /* Border radius md */
+  --radius-md: 0px;
+  /* Border radius lg */
+  --radius-lg: 0px;
+  /* Border radius xl */
+  --radius-xl: 0px;
+  /* Border radius full */
+  --radius-full: 9999px;
+
+}
+
+/* === Semantic Color API — theme-aware Tailwind utilities === */
+@theme {
+  --color-canvas: var(--background-canvas);
+  --color-surface: var(--background-surface);
+  --color-muted: var(--background-muted);
+  --color-foreground: var(--text-primary);
+  --color-foreground-secondary: var(--text-secondary);
+  --color-foreground-muted: var(--text-muted);
+  --color-foreground-inverse: var(--text-inverse);
+  --color-primary: var(--interactive-primary);
+  --color-primary-hover: var(--interactive-primary-hover);
+  --color-primary-active: var(--interactive-primary-active);
+  --color-border: var(--border-default);
+  --color-border-strong: var(--border-strong);
+  --color-error: var(--status-error);
+  --color-success: var(--status-success);
+  --color-warning: var(--status-warning);
+  --color-info: var(--status-info);
+  --color-ring: var(--focus-ring);
+  --color-focus-visible: var(--accessibility-focus-visible);
+}
+
+/* Primitive aliases + light mode semantic tokens */
+:root {
+  /* --primitive-color-* aliases → @theme --color-* (for semantic var() resolution) */
+  --primitive-color-blue-mondriaan-blauw-50: var(--color-blue-mondriaan-blauw-50);
+  --primitive-color-blue-mondriaan-blauw-100: var(--color-blue-mondriaan-blauw-100);
+  --primitive-color-blue-mondriaan-blauw-200: var(--color-blue-mondriaan-blauw-200);
+  --primitive-color-blue-mondriaan-blauw-300: var(--color-blue-mondriaan-blauw-300);
+  --primitive-color-blue-mondriaan-blauw-400: var(--color-blue-mondriaan-blauw-400);
+  --primitive-color-blue-mondriaan-blauw-500: var(--color-blue-mondriaan-blauw-500);
+  --primitive-color-blue-mondriaan-blauw-600: var(--color-blue-mondriaan-blauw-600);
+  --primitive-color-blue-mondriaan-blauw-700: var(--color-blue-mondriaan-blauw-700);
+  --primitive-color-blue-mondriaan-blauw-800: var(--color-blue-mondriaan-blauw-800);
+  --primitive-color-blue-mondriaan-blauw-900: var(--color-blue-mondriaan-blauw-900);
+  --primitive-color-red-rietveld-rood-50: var(--color-red-rietveld-rood-50);
+  --primitive-color-red-rietveld-rood-100: var(--color-red-rietveld-rood-100);
+  --primitive-color-red-rietveld-rood-200: var(--color-red-rietveld-rood-200);
+  --primitive-color-red-rietveld-rood-300: var(--color-red-rietveld-rood-300);
+  --primitive-color-red-rietveld-rood-400: var(--color-red-rietveld-rood-400);
+  --primitive-color-red-rietveld-rood-500: var(--color-red-rietveld-rood-500);
+  --primitive-color-red-rietveld-rood-600: var(--color-red-rietveld-rood-600);
+  --primitive-color-red-rietveld-rood-700: var(--color-red-rietveld-rood-700);
+  --primitive-color-red-rietveld-rood-800: var(--color-red-rietveld-rood-800);
+  --primitive-color-red-rietveld-rood-900: var(--color-red-rietveld-rood-900);
+  --primitive-color-yellow-cadmium-geel-50: var(--color-yellow-cadmium-geel-50);
+  --primitive-color-yellow-cadmium-geel-100: var(--color-yellow-cadmium-geel-100);
+  --primitive-color-yellow-cadmium-geel-200: var(--color-yellow-cadmium-geel-200);
+  --primitive-color-yellow-cadmium-geel-300: var(--color-yellow-cadmium-geel-300);
+  --primitive-color-yellow-cadmium-geel-400: var(--color-yellow-cadmium-geel-400);
+  --primitive-color-yellow-cadmium-geel-500: var(--color-yellow-cadmium-geel-500);
+  --primitive-color-yellow-cadmium-geel-600: var(--color-yellow-cadmium-geel-600);
+  --primitive-color-yellow-cadmium-geel-700: var(--color-yellow-cadmium-geel-700);
+  --primitive-color-yellow-cadmium-geel-800: var(--color-yellow-cadmium-geel-800);
+  --primitive-color-yellow-cadmium-geel-900: var(--color-yellow-cadmium-geel-900);
+  --primitive-color-black-raster-zwart-50: var(--color-black-raster-zwart-50);
+  --primitive-color-black-raster-zwart-100: var(--color-black-raster-zwart-100);
+  --primitive-color-black-raster-zwart-200: var(--color-black-raster-zwart-200);
+  --primitive-color-black-raster-zwart-300: var(--color-black-raster-zwart-300);
+  --primitive-color-black-raster-zwart-400: var(--color-black-raster-zwart-400);
+  --primitive-color-black-raster-zwart-500: var(--color-black-raster-zwart-500);
+  --primitive-color-black-raster-zwart-600: var(--color-black-raster-zwart-600);
+  --primitive-color-black-raster-zwart-700: var(--color-black-raster-zwart-700);
+  --primitive-color-black-raster-zwart-800: var(--color-black-raster-zwart-800);
+  --primitive-color-black-raster-zwart-900: var(--color-black-raster-zwart-900);
+  --primitive-color-white-doek-wit-50: var(--color-white-doek-wit-50);
+  --primitive-color-white-doek-wit-100: var(--color-white-doek-wit-100);
+  --primitive-color-white-doek-wit-200: var(--color-white-doek-wit-200);
+  --primitive-color-white-doek-wit-300: var(--color-white-doek-wit-300);
+  --primitive-color-white-doek-wit-400: var(--color-white-doek-wit-400);
+  --primitive-color-white-doek-wit-500: var(--color-white-doek-wit-500);
+  --primitive-color-white-doek-wit-600: var(--color-white-doek-wit-600);
+  --primitive-color-white-doek-wit-700: var(--color-white-doek-wit-700);
+  --primitive-color-white-doek-wit-800: var(--color-white-doek-wit-800);
+  --primitive-color-white-doek-wit-900: var(--color-white-doek-wit-900);
+  --primitive-color-neutral-50: var(--color-neutral-50);
+  --primitive-color-neutral-100: var(--color-neutral-100);
+  --primitive-color-neutral-200: var(--color-neutral-200);
+  --primitive-color-neutral-300: var(--color-neutral-300);
+  --primitive-color-neutral-400: var(--color-neutral-400);
+  --primitive-color-neutral-500: var(--color-neutral-500);
+  --primitive-color-neutral-600: var(--color-neutral-600);
+  --primitive-color-neutral-700: var(--color-neutral-700);
+  --primitive-color-neutral-800: var(--color-neutral-800);
+  --primitive-color-neutral-900: var(--color-neutral-900);
+  --primitive-color-accent-50: var(--color-accent-50);
+  --primitive-color-accent-100: var(--color-accent-100);
+  --primitive-color-accent-200: var(--color-accent-200);
+  --primitive-color-accent-300: var(--color-accent-300);
+  --primitive-color-accent-400: var(--color-accent-400);
+  --primitive-color-accent-500: var(--color-accent-500);
+  --primitive-color-accent-600: var(--color-accent-600);
+  --primitive-color-accent-700: var(--color-accent-700);
+  --primitive-color-accent-800: var(--color-accent-800);
+  --primitive-color-accent-900: var(--color-accent-900);
+
+  /* Semantic tokens */
+  /* Page background */
+  --background-canvas: var(--primitive-color-neutral-50);
+  /* Card/surface background */
+  --background-surface: #FFFFFF;
+  /* Muted background */
+  --background-muted: var(--primitive-color-neutral-100);
+  /* Primary text */
+  --text-primary: var(--primitive-color-neutral-900);
+  /* Secondary text */
+  --text-secondary: var(--primitive-color-neutral-600);
+  /* Muted/disabled text */
+  --text-muted: var(--primitive-color-neutral-500);
+  /* Text on dark backgrounds */
+  --text-inverse: var(--primitive-color-neutral-50);
+  /* Primary interactive (buttons, links) */
+  --interactive-primary: var(--primitive-color-blue-mondriaan-blauw-500);
+  /* Primary interactive hover */
+  --interactive-primary-hover: var(--primitive-color-blue-mondriaan-blauw-600);
+  /* Primary interactive active */
+  --interactive-primary-active: var(--primitive-color-blue-mondriaan-blauw-700);
+  /* Default border */
+  --border-default: var(--primitive-color-neutral-200);
+  /* Strong border */
+  --border-strong: var(--primitive-color-neutral-400);
+  /* Error — WCAG-compliant red */
+  --status-error: #DC2626;
+  /* Success — WCAG-compliant green */
+  --status-success: #16A34A;
+  /* Warning — WCAG AA amber (4.5:1+ on white) */
+  --status-warning: #A16207;
+  /* Info status */
+  --status-info: var(--primitive-color-blue-mondriaan-blauw-500);
+  /* Focus ring color */
+  --focus-ring: var(--primitive-color-blue-mondriaan-blauw-500);
+  /* Keyboard focus indicator */
+  --accessibility-focus-visible: var(--primitive-color-blue-mondriaan-blauw-500);
+}
+
+/* Dark mode semantic tokens */
+[data-theme="dark"] {
+  /* Page background — dark */
+  --background-canvas: var(--primitive-color-neutral-900);
+  /* Card/surface — dark */
+  --background-surface: var(--primitive-color-neutral-800);
+  /* Muted background — dark */
+  --background-muted: var(--primitive-color-neutral-700);
+  /* Primary text — dark */
+  --text-primary: var(--primitive-color-neutral-50);
+  /* Secondary text — dark */
+  --text-secondary: var(--primitive-color-neutral-300);
+  /* Muted text — dark */
+  --text-muted: var(--primitive-color-neutral-500);
+  /* Text on light backgrounds — dark */
+  --text-inverse: var(--primitive-color-neutral-900);
+  /* Primary interactive — dark */
+  --interactive-primary: var(--primitive-color-blue-mondriaan-blauw-400);
+  /* Primary hover — dark */
+  --interactive-primary-hover: var(--primitive-color-blue-mondriaan-blauw-300);
+  /* Primary active — dark */
+  --interactive-primary-active: var(--primitive-color-blue-mondriaan-blauw-200);
+  /* Default border — dark */
+  --border-default: var(--primitive-color-neutral-700);
+  /* Strong border — dark */
+  --border-strong: var(--primitive-color-neutral-500);
+  /* Error — WCAG-compliant red (dark) */
+  --status-error: #EF4444;
+  /* Success — WCAG-compliant green (dark) */
+  --status-success: #22C55E;
+  /* Warning — WCAG-compliant amber (dark) */
+  --status-warning: #EAB308;
+  /* Info — dark */
+  --status-info: var(--primitive-color-blue-mondriaan-blauw-400);
+  /* Focus ring — dark */
+  --focus-ring: var(--primitive-color-blue-mondriaan-blauw-400);
+  /* Keyboard focus — dark */
+  --accessibility-focus-visible: var(--primitive-color-blue-mondriaan-blauw-400);
+}