@conduction/theme 1.1.61 → 1.1.62

package/.claude/skills/nlds-new/SKILL.md

@@ -0,0 +1,48 @@
+---
+name: nlds-new
+description: Create a new NL Design System token set for an organisation — extracts branding from website/huisstijlhandboek via Playwright
+---
+
+Create a new NL Design System token set for: $ARGUMENTS
+
+## Instructions
+
+### Gather required information
+
+If `$ARGUMENTS` is empty or does not contain an organisation name, ask:
+
+1. **"What is the name of the organisation?"** (required — do not proceed until answered)
+
+Once you have the name, ask:
+
+2. **"Should I extract the design from the organisation's website, a huisstijlhandboek (style guide), or both?"**
+
+If the user says **website** or **both**, look up the most likely website URL (e.g. `https://www.<name>.nl/`) and ask:
+
+3. **"Is this the correct website: `<url>`? (or provide the right one)"**
+
+If the user says **huisstijlhandboek**, ask:
+
+4. **"What is the URL of the huisstijlhandboek?"**
+
+If `$ARGUMENTS` already contains a name and URL, confirm both with the user before proceeding.
+
+### Derive identifiers
+
+From the organisation name:
+
+- **slug**: lowercase, spaces replaced with hyphens (e.g. "den-haag", "vng-realisatie")
+- **prefix**: same as slug
+- **fullName**: the proper name (e.g. "Den Haag", "VNG Realisatie")
+- **packageName**: `@nl-design-system-unstable/<slug>-design-tokens`
+- **folderName**: `municipalities/<slug>-design-tokens`
+
+### Execute
+
+Read the shared reference at `conduction-theme/.claude/commands/nlds-reference.md` and follow it from the top:
+
+1. **Extract** — follow the extraction procedure (website and/or huisstijlhandboek as the user requested)
+2. **Create all files** — follow the file creation procedure to create the full token set from scratch
+3. **Update component tokens** — follow the component update mapping to apply extracted values
+4. **Build and test** — follow the build procedure, fix any errors
+5. **Summary** — output the summary as described in the reference

package/.claude/skills/nlds-update/SKILL.md

@@ -0,0 +1,53 @@
+---
+name: nlds-update
+description: Update an existing NL Design System token set — re-extracts branding from website/huisstijlhandboek and applies changes
+---
+
+Update an existing NL Design System token set for: $ARGUMENTS
+
+## Instructions
+
+### Gather required information
+
+If `$ARGUMENTS` is empty or does not contain an organisation name, ask:
+
+1. **"What is the name of the organisation to update?"** (required — do not proceed until answered)
+
+Once you have the name, verify the token set exists at `municipalities/<slug>-design-tokens/`. If it does not exist, tell the user and suggest using `/nlds:new` instead.
+
+Then ask:
+
+2. **"Should I re-extract the design from the organisation's website, a huisstijlhandboek (style guide), or both?"**
+
+If the user says **website** or **both**, look up the website URL from the existing `package.json` (the `"website"` field) and ask:
+
+3. **"Is this still the correct website: `<url>`? (or provide the right one)"**
+
+If the user says **huisstijlhandboek**, ask:
+
+4. **"What is the URL of the huisstijlhandboek?"**
+
+### Derive identifiers
+
+From the existing token set, read `src/config.json` to get:
+
+- **slug**: the `prefix` field
+- **fullName**: the `fullName` field
+- **prefix**: same as slug
+- **packageName**: from `package.json` `name` field
+- **folderName**: `municipalities/<slug>-design-tokens`
+
+### Execute
+
+Read the shared reference at `conduction-theme/.claude/commands/nlds-reference.md` and follow it, **skipping Part B** (file creation):
+
+1. **Extract** (Part A) — follow the extraction procedure (website and/or huisstijlhandboek as the user requested)
+2. **Skip Part B** — files already exist, do not recreate them
+3. **Update component tokens** (Part C) — read existing token files, compare with new extraction data, update only values that changed
+4. **Update brand tokens** — if the extraction reveals new/changed colors or fonts:
+   - Update `color.tokens.json` with any new palette entries
+   - Update `typography.tokens.json` if the font changed
+   - Update `font-size.tokens.json` if sizes changed
+   - Download any new font files to `src/font/` and update `font.scss`
+5. **Build and test** (Part D) — follow the build procedure, fix any errors
+6. **Summary** (Part E) — output the summary, highlighting what changed vs the previous version

package/.gitattributes

@@ -0,0 +1,64 @@
+# Auto detect text files and perform LF normalization
+* text=auto
+
+# Source code - always use LF
+*.js text eol=lf
+*.jsx text eol=lf
+*.ts text eol=lf
+*.tsx text eol=lf
+*.mjs text eol=lf
+*.cjs text eol=lf
+
+# Configuration files - always use LF
+*.json text eol=lf
+*.yml text eol=lf
+*.yaml text eol=lf
+*.toml text eol=lf
+*.xml text eol=lf
+
+# Styles - always use LF
+*.css text eol=lf
+*.scss text eol=lf
+*.sass text eol=lf
+*.less text eol=lf
+
+# HTML and templates - always use LF
+*.html text eol=lf
+*.htm text eol=lf
+*.svg text eol=lf
+
+# Documentation - always use LF
+*.md text eol=lf
+*.txt text eol=lf
+*.rtf text eol=lf
+
+# Docker and shell scripts - always use LF
+Dockerfile text eol=lf
+*.dockerfile text eol=lf
+*.sh text eol=lf
+
+# Git files - always use LF
+.gitattributes text eol=lf
+.gitignore text eol=lf
+.gitmodules text eol=lf
+
+# Windows script files - use CRLF
+*.bat text eol=crlf
+*.cmd text eol=crlf
+*.ps1 text eol=crlf
+
+# Binary files - do not modify
+*.png binary
+*.jpg binary
+*.jpeg binary
+*.gif binary
+*.ico binary
+*.webp binary
+*.pdf binary
+*.woff binary
+*.woff2 binary
+*.ttf binary
+*.eot binary
+*.zip binary
+*.gz binary
+*.tar binary

package/README.md

@@ -6,6 +6,7 @@ Conduction's design tokens theme
 
 - **Version 1.1 (breaking changes from 1.0.x)**
 
+  - 1.1.62: Added Vaals theme.
   - 1.1.61: Updated footer tokens in Almere theme.
   - 1.1.60: Updated Almere theme.
     - Updated font size tokens.

package/conduction-design-tokens/src/component/utrecht/extra-tokens/link.tokens.json

@@ -3,7 +3,8 @@
     "link": {
       "hover": {
         "font-weight": {},
-        "text-decoration-color": {}
+        "text-decoration-color": {},
+        "text-decoration-skip-ink": { "value": "auto" }
       }
     }
   }

package/municipalities/vaals-design-tokens/LICENSE.md

@@ -0,0 +1,17 @@
+# Auteursrecht Gemeente Vaals
+
+Copyright (c) 2026 Gemeente Vaals
+
+## Logo en huisstijl
+
+Op het huisstijl en logo zijn auteursrechten van toepassing. Het gebruik van logo en huisstijl is alleen toegestaan voor gebruik door Gemeente Vaals.
+
+Wanneer je een bewerking van de software wilt gebruiken voor andere doeleinden, mag je niet het logo van Gemeente Vaals gebruiken en je ontwerpt een eigen huisstijl.
+
+## Lettertype
+
+Lettertypes die worden gebruikt voor de huisstijl zijn niet allemaal gratis en open source. Let op dat bij gebruik van die bijgeleverde lettertypes je een (betaalde) licentie regelt. Pas anders de configuratie aan om minder of andere lettertypes te gebruiken.
+
+## Toestemming
+
+Wanneer je het logo of de huisstijl wilt gebruiken kun je voor toestemming contact opnemen met Gemeente Vaals.

package/municipalities/vaals-design-tokens/README.md

@@ -0,0 +1,23 @@
+# Vaals Design Tokens
+
+NL Design System design tokens for Vaals.
+
+## Usage
+
+Install the package:
+
+```sh
+npm install @nl-design-system-unstable/vaals-design-tokens
+```
+
+Apply the theme class to your root element:
+
+```html
+<html class="vaals-theme">
+```
+
+## Building
+
+```sh
+npm run build
+```

package/municipalities/vaals-design-tokens/documentation/color.stories.mdx

@@ -0,0 +1,17 @@
+import { Meta, ColorPalette, ColorItem } from "@storybook/addon-docs";
+import tokens from "../dist/tokens.json";
+import { ColorSearch } from "@nl-design-system-unstable/theme-toolkit/src/ColorSearch";
+import { ColorTable } from "@nl-design-system-unstable/theme-toolkit/src/ColorTable";
+import config from "../src/config.json";
+
+<Meta title={`${config.name}/Color`} />
+
+# Color
+
+## Find a color
+
+<ColorSearch tokens={tokens[config.prefix]["color"]}></ColorSearch>
+
+## Color palette
+
+<ColorTable tokens={tokens[config.prefix]["color"]}></ColorTable>

package/municipalities/vaals-design-tokens/documentation/components.stories.mdx

@@ -0,0 +1,11 @@
+import { Meta, Story } from "@storybook/addon-docs";
+import { ComponentStories } from "@nl-design-system-unstable/theme-toolkit/src/ComponentStories";
+import config from "../src/config.json";
+
+<Meta title={`${config.name}`} />
+
+# Components
+
+<Story name="Components">
+  <ComponentStories config={config} />
+</Story>

package/municipalities/vaals-design-tokens/documentation/design-tokens.stories.mdx

@@ -0,0 +1,14 @@
+import { Meta, ColorPalette, ColorItem } from "@storybook/addon-docs";
+import { DesignTokensTable } from "@nl-design-system-unstable/theme-toolkit/src/DesignTokensTable";
+import tokens from "../dist/index.json";
+import config from "../src/config.json";
+
+<Meta title={`${config.name}/Design Tokens`} />
+
+# Design Tokens
+
+<DesignTokensTable tokens={tokens.filter((token) => token.path[0] !== config.prefix)}></DesignTokensTable>
+
+## Proprietary Design Tokens
+
+<DesignTokensTable tokens={tokens.filter((token) => token.path[0] === config.prefix)}></DesignTokensTable>

package/municipalities/vaals-design-tokens/documentation/readme.stories.mdx

@@ -0,0 +1,7 @@
+import { Meta, Description } from "@storybook/addon-docs";
+import markdown from "../README.md";
+import config from "../src/config.json";
+
+<Meta title={`${config.name}/README`} />
+
+<Description>{markdown}</Description>

package/municipalities/vaals-design-tokens/package.json

@@ -0,0 +1,37 @@
+{
+  "version": "1.0.0-alpha.1",
+  "author": "Community for NL Design System",
+  "description": "NL Design System design tokens for Vaals",
+  "website": "https://www.vaals.nl/",
+  "keywords": ["nl-design-system", "conduction"],
+  "license": "SEE LICENSE IN LICENSE.md",
+  "name": "@nl-design-system-unstable/vaals-design-tokens",
+  "private": false,
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git+ssh",
+    "url": "git@github.com:nl-design-system/themes.git"
+  },
+  "scripts": {
+    "clean": "rimraf -rf dist/",
+    "prebuild": "npm run clean",
+    "watch": "npm-run-all watch:**",
+    "watch:style-dictionary": "chokidar --follow-symlinks --command 'npm run --ignore-scripts build' 'src/**/*.tokens.json'",
+    "build": "npm-run-all build:**",
+    "build:scss": "sass --no-source-map src/:dist/",
+    "build:style-dictionary": "style-dictionary build --config ./style-dictionary.config.js"
+  },
+  "devDependencies": {
+    "@nl-design-system-unstable/theme-toolkit": "workspace:*",
+    "chokidar-cli": "3.0.0",
+    "npm-run-all": "4.1.5",
+    "rimraf": "3.0.2",
+    "style-dictionary": "3.8.0"
+  },
+  "bugs": {
+    "url": "https://github.com/ConductionNL/conduction-theme/issues"
+  },
+  "homepage": "https://github.com/ConductionNL/conduction-theme#readme"
+}

package/municipalities/vaals-design-tokens/src/brand/vaals/color.tokens.json

@@ -0,0 +1,129 @@
+{
+  "vaals": {
+    "color": {
+      "primary": { "value": "{vaals.color.red.46}" },
+      "primary-hover": { "value": "{vaals.color.red.36}" },
+      "error": { "value": "#dc3545" },
+      "alert-error": { "value": "#721c24" },
+      "alert-error-background": { "value": "#f8d7da" },
+      "warning": { "value": "#ffc107" },
+      "alert-warning": { "value": "#856404" },
+      "alert-warning-background": { "value": "#fff3cd" },
+      "succes": { "value": "#28a745" },
+      "alert-succes": { "value": "#155724" },
+      "alert-succes-background": { "value": "#d4edda" },
+      "info": { "value": "{vaals.color.primary}" },
+      "alert-info": { "value": "#004085" },
+      "alert-info-background": { "value": "#cce5ff" },
+      "red": {
+        "36": {
+          "value": "#b00812",
+          "comment": "Primary red hover / dark"
+        },
+        "46": {
+          "value": "#e10a17",
+          "comment": "Primary red"
+        }
+      },
+      "green": {
+        "41": {
+          "value": "#558052",
+          "comment": "Accent green"
+        }
+      },
+      "grey": {
+        "20": {
+          "value": "#333333"
+        },
+        "27": {
+          "value": "#444444"
+        },
+        "29": {
+          "value": "#4a4a4a"
+        },
+        "31": {
+          "value": "#4f4f4f"
+        },
+        "40": {
+          "value": "#666666"
+        },
+        "44": {
+          "value": "#677077"
+        },
+        "46": {
+          "value": "#767676"
+        },
+        "48": {
+          "value": "#7a7a7a"
+        },
+        "50": {
+          "value": "#808080",
+          "comment": "Base/Grey"
+        },
+        "70": {
+          "value": "#b3b3b3"
+        },
+        "82": {
+          "value": "#d1d1d1"
+        },
+        "84": {
+          "value": "#dbdbd3"
+        },
+        "87": {
+          "value": "#dddddd"
+        },
+        "90": {
+          "value": "#e6e6e6"
+        },
+        "94": {
+          "value": "#f2f3ee"
+        },
+        "95": {
+          "value": "#f2f2f2"
+        },
+        "97": {
+          "value": "#f7f7f7"
+        }
+      },
+      "lightgrey": {
+        "96": {
+          "value": "#f5f5f5",
+          "comment": "Base/LightGrey"
+        }
+      },
+      "white": {
+        "98": {
+          "value": "#fafafa"
+        },
+        "100": {
+          "value": "#ffffff",
+          "comment": "Base/White"
+        }
+      },
+      "black": {
+        "0": {
+          "value": "#000000",
+          "comment": "Base/Black"
+        },
+        "0-10t": {
+          "value": "#0000001a",
+          "comment": "Black with 10% transparency"
+        },
+        "0-60t": {
+          "value": "#00000099",
+          "comment": "Black with 60% transparency"
+        },
+        "0-75t": {
+          "value": "#000000bf",
+          "comment": "Black with 75% transparency"
+        },
+        "11": {
+          "value": "#1b1b1b"
+        },
+        "30": {
+          "value": "#4d4d4d"
+        }
+      }
+    }
+  }
+}

package/municipalities/vaals-design-tokens/src/brand/vaals/font-size.tokens.json

@@ -0,0 +1,54 @@
+{
+  "vaals": {
+    "font-size": {
+      "4xs": {
+        "value": "0.625rem",
+        "comment": "10px"
+      },
+      "3xs": {
+        "value": "0.75rem",
+        "comment": "12px"
+      },
+      "2xs": {
+        "value": "0.875rem",
+        "comment": "14px"
+      },
+      "xs": {
+        "value": "1rem",
+        "comment": "16px"
+      },
+      "sm": {
+        "value": "1.125rem",
+        "comment": "18px"
+      },
+      "md": {
+        "value": "1.375rem",
+        "comment": "22px"
+      },
+      "lg": {
+        "value": "1.5rem",
+        "comment": "24px"
+      },
+      "xl": {
+        "value": "1.75rem",
+        "comment": "28px"
+      },
+      "2xl": {
+        "value": "3rem",
+        "comment": "48px"
+      },
+      "3xl": {
+        "value": "4.5rem",
+        "comment": "72px"
+      },
+      "4xl": {
+        "value": "5rem",
+        "comment": "80px"
+      },
+      "5xl": {
+        "value": "5.625rem",
+        "comment": "90px"
+      }
+    }
+  }
+}

package/municipalities/vaals-design-tokens/src/brand/vaals/size.tokens.json

@@ -0,0 +1,17 @@
+{
+  "vaals": {
+    "size": {
+      "4xs": { "value": "1px" },
+      "3xs": { "value": "2px" },
+      "2xs": { "value": "4px" },
+      "xs": { "value": "8px" },
+      "sm": { "value": "14px" },
+      "md": { "value": "18px" },
+      "lg": { "value": "24px" },
+      "xl": { "value": "32px" },
+      "2xl": { "value": "48px" },
+      "3xl": { "value": "72px" },
+      "4xl": { "value": "96px" }
+    }
+  }
+}

package/municipalities/vaals-design-tokens/src/brand/vaals/typography.tokens.json

@@ -0,0 +1,40 @@
+{
+  "vaals": {
+    "typography": {
+      "gt-walsheim": {
+        "font-family": {
+          "value": "\"GT Walsheim\", Helvetica, Arial, sans-serif"
+        }
+      },
+      "sans-serif": {
+        "font-family": {
+          "value": "\"GT Walsheim\", Helvetica, Arial, sans-serif"
+        }
+      },
+      "monospace": {
+        "font-family": {
+          "value": "Monospace, \"Lucida Console\""
+        }
+      },
+      "font-weight": {
+        "bold": { "value": "600" },
+        "semibold": { "value": "500" },
+        "normal": { "value": "400" },
+        "light": { "value": "300" }
+      },
+      "scale": {
+        "4xs": { "value": "{vaals.font-size.4xs}" },
+        "3xs": { "value": "{vaals.font-size.3xs}" },
+        "2xs": { "value": "{vaals.font-size.2xs}" },
+        "xs": { "value": "{vaals.font-size.xs}" },
+        "sm": { "value": "{vaals.font-size.sm}" },
+        "md": { "value": "{vaals.font-size.md}" },
+        "lg": { "value": "{vaals.font-size.lg}" },
+        "xl": { "value": "{vaals.font-size.xl}" },
+        "2xl": { "value": "{vaals.font-size.2xl}" },
+        "3xl": { "value": "{vaals.font-size.3xl}" },
+        "4xl": { "value": "{vaals.font-size.4xl}" }
+      }
+    }
+  }
+}

package/municipalities/vaals-design-tokens/src/common/utrecht/action.tokens.json

@@ -0,0 +1,9 @@
+{
+  "utrecht": {
+    "action": {
+      "busy": { "cursor": { "value": "wait" } },
+      "disabled": { "cursor": { "value": "not-allowed" } },
+      "submit": { "cursor": { "value": "pointer" } }
+    }
+  }
+}

package/municipalities/vaals-design-tokens/src/common/utrecht/space.tokens.json

@@ -0,0 +1,28 @@
+{
+  "utrecht": {
+    "space": {
+      "block": {
+        "3xs": { "value": "{vaals.size.3xs}" },
+        "2xs": { "value": "{vaals.size.2xs}" },
+        "xs": { "value": "{vaals.size.xs}" },
+        "sm": { "value": "{vaals.size.sm}" },
+        "md": { "value": "{vaals.size.md}" },
+        "lg": { "value": "{vaals.size.lg}" },
+        "xl": { "value": "{vaals.size.xl}" },
+        "2xl": { "value": "{vaals.size.2xl}" },
+        "3xl": { "value": "{vaals.size.3xl}" }
+      },
+      "inline": {
+        "3xs": { "value": "{vaals.size.3xs}" },
+        "2xs": { "value": "{vaals.size.2xs}" },
+        "xs": { "value": "{vaals.size.xs}" },
+        "sm": { "value": "{vaals.size.sm}" },
+        "md": { "value": "{vaals.size.md}" },
+        "lg": { "value": "{vaals.size.lg}" },
+        "xl": { "value": "{vaals.size.xl}" },
+        "2xl": { "value": "{vaals.size.2xl}" },
+        "3xl": { "value": "{vaals.size.3xl}" }
+      }
+    }
+  }
+}

package/municipalities/vaals-design-tokens/src/component/conduction/card-header.tokens.json

@@ -0,0 +1,34 @@
+{
+  "conduction": {
+    "card-header": {
+      "background-color": {},
+      "border-bottom-width": {},
+      "border-bottom-style": {},
+      "border-bottom-color": {},
+      "color": { "value": "{utrecht.document.color}" },
+      "hover": {
+        "background-color": {},
+        "border-bottom-width": {},
+        "border-bottom-style": {},
+        "border-bottom-color": {}
+      },
+      "title": {
+        "color": { "value": "{vaals.color.primary}" },
+        "text-decoration": { "value": "underline" },
+        "text-underline-offset": {},
+        "hover": {
+          "color": { "value": "{vaals.color.primary}" },
+          "text-decoration": { "value": "underline" },
+          "text-underline-offset": {}
+        }
+      },
+      "date": {
+        "color": { "value": "{vaals.color.black.0}" },
+        "font-size": { "value": "{vaals.font-size.2xs}" },
+        "font-weight": { "value": "{vaals.typography.font-weight.light}" },
+        "font-style": {},
+        "margin-block-end": { "value": "{vaals.size.xs}" }
+      }
+    }
+  }
+}

package/municipalities/vaals-design-tokens/src/component/conduction/card-wrapper.tokens.json

@@ -0,0 +1,33 @@
+{
+  "conduction": {
+    "card-wrapper": {
+      "background-color": { "value": "{vaals.color.white.100}" },
+      "border-color": {},
+      "border-style": {},
+      "border-width": {},
+      "border-bottom-color": {},
+      "border-bottom-style": {},
+      "border-bottom-width": {},
+      "border-radius": { "value": "0px" },
+      "transition": {},
+      "box-shadow": {},
+      "color": { "value": "{vaals.color.black.0}" },
+      "hover": {
+        "background-color": { "value": "{vaals.color.black.0-10t}" },
+        "color": {},
+        "border-color": {},
+        "border-style": {},
+        "border-width": {},
+        "border-bottom-color": {},
+        "border-bottom-style": {},
+        "border-bottom-width": {},
+        "border-radius": {},
+        "box-shadow": {}
+      },
+      "padding-inline-end": { "value": "11px" },
+      "padding-inline-start": { "value": "11px" },
+      "padding-block-end": { "value": "11px" },
+      "padding-block-start": { "value": "11px" }
+    }
+  }
+}