@rijkshuisstijl-community/design-tokens 10.0.0 → 10.0.1

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @rijkshuisstijl-community/design-tokens
 
+## 10.0.1
+
+### Patch Changes
+
+- f5942a6: Parent key is verwijderd uit figma.tokens.json. Deze key is nooit in gebruik geweest, dit heeft geen impact.
+- e7b3d60: Add section about adding new token sets in documentation
+- 5f77bfa: Added transformations on CSS-tokens to allow for calculations with references, power (^) and sanitize any `roundTo` in tokens
+
 ## 10.0.0
 
 ### Major Changes

package/README.md

@@ -44,7 +44,7 @@ Hieronder vind je instructies hoe je de standaard Rijkshuisstijl-community token
 
 ## Nieuw thema toevoegen
 
-Er zijn al verschillende bedrijfsthema's in de @rijkshuisstijl-community/design-tokens package waarvoor (gedeeltelijke) support is vanuit de Rijkshuisstijl-community. Hieronder volgt een uitleg hoe nog meer thema's kunnen worden toegevoegd
+Er zijn al verschillende bedrijfsthema's in de @rijkshuisstijl-community/design-tokens package waarvoor (gedeeltelijke) support is vanuit de Rijkshuisstijl-community. Hieronder volgt een uitleg hoe nog meer thema's kunnen worden toegevoegd.
 
 ## Nieuwe thema tokens
 
@@ -166,3 +166,48 @@ Er zijn al verschillende bedrijfsthema's in de @rijkshuisstijl-community/design-
    };
    export default preview;
    ```
+
+## Nieuwe token set toevoegen
+
+Als je tokensets toevoegt vanuit de code in `figma.tokens.json`, zitten daar regels aan vast.
+Voor elke nieuwe tokenset, zoals bijvoorbeeld `components/pagination/ams`:
+
+```json
+  "components/pagination/ams": {
+    "ams": {
+      "pagination": {
+        "font-family": {
+          "keys...": "values..."
+        }
+      }
+    }
+  }
+```
+
+is ook een entry nodig in `.$metadata.tokenSetOrder`: (op alfabetische volgorde aub)
+
+```json
+  "$metadata": {
+    "tokenSetOrder": [
+      "brand/color",
+      "components/pagination/ams",
+      "etc..."
+    ]
+  }
+```
+
+én in _elk_ thema `.$themes[x].selectedTokenSets`: (op alfabetische volgorde aub)
+
+```json
+  "$themes": [
+    {
+      "id": "05865788a086eeac7ffc4514736ccd777f1ff95c",
+      "name": "wetgevend",
+      "$figmaStyleReferences": {},
+      "selectedTokenSets": {
+        "components/pagination/ams": "enabled",
+        "other/groups...": "enabled"
+      }
+    }
+  ]
+```

package/build.mjs

@@ -1,10 +1,11 @@
 import { existsSync, mkdirSync } from 'fs';
 import { readFile, writeFile } from 'node:fs/promises';
-import path from 'path';
+import { posix } from 'path';
 import StyleDictionary from 'style-dictionary';
-
 import { register } from '@tokens-studio/sd-transforms';
 
+import { fixCSSFile } from './cssFixers.mjs';
+
 // Will take the theme name and remove all spaces and make it lowercase
 const normalizeThemeName = (name) => {
   return name.toLowerCase().replace(/\s+/g, '');
@@ -22,6 +23,30 @@ const removeUnitlessLineHeightTransform = () => {
   }
 };
 
+StyleDictionary.registerAction({
+  name: 'fixCSSTokens',
+  do: async function (_dictionary, config) {
+    const buildPath = config.buildPath || 'dist/';
+    const files = config.files || [];
+    // TS allows roundTo(), exponentiation (^) and basic calculations (without `calc()`) in their values, but these are not valid CSS.
+    for (const file of files) {
+      const filePath = posix.join(buildPath, file.destination);
+      console.log('🔧 fixing css:', filePath);
+      await fixCSSFile(filePath);
+    }
+  },
+  // No undo action available - files are deleted during cleanup.
+  undo: function () {},
+});
+
+// Custom header to add generation date
+StyleDictionary.registerFileHeader({
+  name: 'nlds-rhc-header',
+  fileHeader: function (defaultMessage) {
+    return [...defaultMessage, `Generated on ${new Date().toUTCString()}`];
+  },
+});
+
 const excludes = [
   'components/avatar',
   'components/form-field-option-label',
@@ -43,6 +68,9 @@ const getPlatformsConfig = (buildPath, themeName) => {
       transforms: ['name/camel'],
       buildPath,
       excludes,
+      options: {
+        fileHeader: 'nlds-rhc-header',
+      },
       files: [
         {
           format: 'typescript/es6-declarations',
@@ -75,28 +103,26 @@ const getPlatformsConfig = (buildPath, themeName) => {
       transforms: ['name/kebab'],
       buildPath,
       excludes,
+      actions: ['fixCSSTokens'],
+      options: {
+        fileHeader: 'nlds-rhc-header',
+        outputReferences: true,
+      },
       files: [
         {
           destination: 'root.css',
           format: 'css/variables',
-          options: {
-            outputReferences: true,
-          },
         },
         {
           destination: 'index.css',
           format: 'css/variables',
           options: {
             selector: `.${themeName}`,
-            outputReferences: true,
           },
         },
         {
           destination: '_variables.scss',
           format: 'scss/variables',
-          options: {
-            outputReferences: true,
-          },
         },
       ],
     },
@@ -136,7 +162,7 @@ async function buildThemes() {
     }
 
     // Write individual theme tokens
-    await writeFile(path.join(themesDir, `tokens.json`), JSON.stringify(themeData.tokens, null, 2));
+    await writeFile(posix.join(themesDir, `tokens.json`), JSON.stringify(themeData.tokens, null, 2));
 
     const config = getPlatformsConfig(`dist/${themeName}/`, themeName);
     // Create a separate Style Dictionary instance for each theme

package/cssFixers.mjs

@@ -0,0 +1,89 @@
+import { readFile, writeFile } from 'fs/promises';
+
+// When using `outputReferences: true` in Style Dictionary (see `build.mjs`), any calculations/transforms are overwritten by the css-var-names.
+// So you'll end up with invalid CSS like:
+// `--my-var: var(--my-length) + 20px;` - see: https://github.com/style-dictionary/style-dictionary/issues/1055
+// We will need to fix any invalid stuff from Tokens Studio (TS) here as a post-build step.
+// This applies to both .css and .scss files.
+
+const varRegex = /(?<prefix>^\s*--[^:]+:\s*)(?<value>[^;]+?)(?<suffix>\s*;)/gm;
+
+export async function fixCSSFile(filePath) {
+  let content = await readFile(filePath, 'utf-8');
+
+  content = await fixRoundTo(content);
+  content = await fixExponentiation(content);
+  content = await fixCalc(content);
+
+  await writeFile(filePath, content);
+}
+
+// This will wrap any calculations in `calc()`.
+export function fixCalc(content) {
+  const operatorRegex = /(?:\s\+\s|\s-\s|\/|\*)/;
+
+  return content.replace(varRegex, (match, prefix, value, suffix) => {
+    if (!value.match(operatorRegex)) {
+      return match;
+    }
+
+    return `${prefix}calc(${value})${suffix}`;
+  });
+}
+
+// Exponentiation (^) is not supported in CSS, so we need to convert it to pow(base, exponent)
+export function fixExponentiation(content) {
+  const exponentiationRegex =
+    /([0-9]*\.?[0-9]+(?:[a-z%]+)?|var\([^)]+\))\s*\^\s*([0-9]*\.?[0-9]+(?:[a-z%]+)?|var\([^)]+\))/g;
+
+  return content.replace(varRegex, (match, prefix, value, suffix) => {
+    if (!value.includes('^')) {
+      return match;
+    }
+
+    const fixedValue = value.replace(exponentiationRegex, (_match, base, exponent) => {
+      return `pow(${base}, ${exponent})`;
+    });
+
+    return `${prefix}${fixedValue}${suffix}`;
+  });
+}
+
+// This will strip out any roundTo() calls, as CSS doesn't support it.
+// It does allow round(), but that needs a rounding interval, which is unknown at this point.
+// See https://developer.mozilla.org/en-US/docs/Web/CSS/round
+export function fixRoundTo(content) {
+  return content.replace(varRegex, (match, prefix, value, suffix) => {
+    if (!value.includes('roundTo(')) {
+      return match;
+    }
+
+    // Handle nested parentheses by processing the string character by character
+    let fixedValue = value;
+    let result = '';
+    let i = 0;
+
+    while (i < fixedValue.length) {
+      if (fixedValue.slice(i, i + 8) === 'roundTo(') {
+        // Found roundTo(, now find the matching closing parenthesis
+        i += 8; // Skip "roundTo("
+        let parenCount = 1;
+        let start = i;
+
+        while (i < fixedValue.length && parenCount > 0) {
+          if (fixedValue[i] === '(') parenCount++;
+          if (fixedValue[i] === ')') parenCount--;
+          i++;
+        }
+
+        // Extract the content between parentheses and add to result
+        result += fixedValue.slice(start, i - 1);
+      } else {
+        result += fixedValue[i];
+        i++;
+      }
+    }
+
+    return `${prefix}${result}${suffix}`;
+  });
+}

package/cssFixers.spec.mjs

@@ -0,0 +1,98 @@
+import { describe, expect, test } from 'vitest';
+import { fixCalc, fixExponentiation, fixRoundTo } from './cssFixers.mjs';
+
+describe('css fixers', () => {
+  describe('fixCalc', () => {
+    test('should wrap adding calculations in calc()', async () => {
+      const input = '--some-var: 100px + 50%;';
+      const output = '--some-var: calc(100px + 50%);';
+      expect(fixCalc(input)).toBe(output);
+    });
+    test('should wrap calculations with variables in calc()', async () => {
+      const input = '--some-var: 100px + var(--some-other-var);';
+      const output = '--some-var: calc(100px + var(--some-other-var));';
+      expect(fixCalc(input)).toBe(output);
+    });
+    test('should wrap calculations with variables in calc()', async () => {
+      const input = '--some-var: var(--some-other-var) + 100px;';
+      const output = '--some-var: calc(var(--some-other-var) + 100px);';
+      expect(fixCalc(input)).toBe(output);
+    });
+    test('should wrap subtraction calculations in calc()', async () => {
+      const input = '--some-var: 100px - 50px;';
+      const output = '--some-var: calc(100px - 50px);';
+      expect(fixCalc(input)).toBe(output);
+    });
+    test('should wrap multiplication calculations in calc()', async () => {
+      const input = '--some-var: 10px * 2;';
+      const output = '--some-var: calc(10px * 2);';
+      expect(fixCalc(input)).toBe(output);
+    });
+    test('should wrap division calculations in calc()', async () => {
+      const input = '--some-var: 100px / 2;';
+      const output = '--some-var: calc(100px / 2);';
+      expect(fixCalc(input)).toBe(output);
+    });
+    test('should wrap mixed calculations in calc()', async () => {
+      const input = '--some-var: var(--base) * 2 - 10px;';
+      const output = '--some-var: calc(var(--base) * 2 - 10px);';
+      expect(fixCalc(input)).toBe(output);
+    });
+    test('should not wrap single variables in calc()', async () => {
+      const input = '--some-var: var(--other-var);';
+      const output = '--some-var: var(--other-var);';
+      expect(fixCalc(input)).toBe(output);
+    });
+    test('should not wrap simple values in calc()', async () => {
+      const input = '--some-var: 10px;';
+      const output = '--some-var: 10px;';
+      expect(fixCalc(input)).toBe(output);
+    });
+  });
+
+  describe('fixExponentiation', () => {
+    test('should convert ^ to pow()', async () => {
+      const input = '--some-var: 2^3;';
+      const output = '--some-var: pow(2, 3);';
+      expect(fixExponentiation(input)).toBe(output);
+    });
+    test('should convert ^ to pow() with variable as base', async () => {
+      const input = '--some-var: var(--base)^3;';
+      const output = '--some-var: pow(var(--base), 3);';
+      expect(fixExponentiation(input)).toBe(output);
+    });
+    test('should convert ^ to pow() with variable as exponent', async () => {
+      const input = '--some-var: 2^var(--exponent);';
+      const output = '--some-var: pow(2, var(--exponent));';
+      expect(fixExponentiation(input)).toBe(output);
+    });
+    test('should convert ^ to pow() with variables as both base and exponent', async () => {
+      const input = '--some-var: var(--base)^var(--exponent);';
+      const output = '--some-var: pow(var(--base), var(--exponent));';
+      expect(fixExponentiation(input)).toBe(output);
+    });
+  });
+
+  describe('fixRoundTo', () => {
+    test('should remove roundTo()', async () => {
+      const input = '--some-var: roundTo(10px);';
+      const output = '--some-var: 10px;';
+      expect(fixRoundTo(input)).toBe(output);
+    });
+    test('should remove roundTo() with variable', async () => {
+      const input = '--some-var: roundTo(var(--base-size));';
+      const output = '--some-var: var(--base-size);';
+      expect(fixRoundTo(input)).toBe(output);
+    });
+    test('should remove roundTo() with calc function', async () => {
+      const input = '--some-var: roundTo(calc(10px + 5px));';
+      const output = '--some-var: calc(10px + 5px);';
+      expect(fixRoundTo(input)).toBe(output);
+    });
+    test('should remove roundTo() with calc function containing variables', async () => {
+      const input = '--some-var: roundTo(calc(var(--base) * 2));';
+      const output = '--some-var: calc(var(--base) * 2);';
+      expect(fixRoundTo(input)).toBe(output);
+    });
+  });
+});

package/dist/_variables.scss

@@ -1,5 +1,6 @@
 
 // Do not edit directly, this file was auto-generated.
+// Generated on Mon, 15 Dec 2025 18:39:45 GMT
 
 $rhc-border-radius-round: 999px;
 $rhc-border-radius-none: 0px;

package/dist/index.css

@@ -1,5 +1,6 @@
 /**
  * Do not edit directly, this file was auto-generated.
+ * Generated on Mon, 15 Dec 2025 18:39:45 GMT
  */
 
 .rhc-theme {

package/dist/index.d.ts

@@ -1,5 +1,6 @@
 /**
  * Do not edit directly, this file was auto-generated.
+ * Generated on Mon, 15 Dec 2025 18:39:45 GMT
  */
 
 export const rhcBorderRadiusRound: string;

package/dist/index.js

@@ -1,5 +1,6 @@
 /**
  * Do not edit directly, this file was auto-generated.
+ * Generated on Mon, 15 Dec 2025 18:39:45 GMT
  */
 
 export const rhcBorderRadiusRound = "999px";

package/dist/kern-lintblauw/_variables.scss

@@ -1,5 +1,6 @@
 
 // Do not edit directly, this file was auto-generated.
+// Generated on Mon, 15 Dec 2025 18:39:48 GMT
 
 $rhc-border-radius-round: 999px;
 $rhc-border-radius-none: 0px;

package/dist/kern-lintblauw/index.css

@@ -1,5 +1,6 @@
 /**
  * Do not edit directly, this file was auto-generated.
+ * Generated on Mon, 15 Dec 2025 18:39:48 GMT
  */
 
 .kern-lintblauw {

package/dist/kern-lintblauw/index.d.ts

@@ -1,5 +1,6 @@
 /**
  * Do not edit directly, this file was auto-generated.
+ * Generated on Mon, 15 Dec 2025 18:39:48 GMT
  */
 
 export const rhcBorderRadiusRound: string;

package/dist/kern-lintblauw/index.js

@@ -1,5 +1,6 @@
 /**
  * Do not edit directly, this file was auto-generated.
+ * Generated on Mon, 15 Dec 2025 18:39:48 GMT
  */
 
 export const rhcBorderRadiusRound = "999px";

package/dist/kern-lintblauw/root.css

@@ -1,5 +1,6 @@
 /**
  * Do not edit directly, this file was auto-generated.
+ * Generated on Mon, 15 Dec 2025 18:39:48 GMT
  */
 
 :root {

package/dist/kern-lintblauw/tokens.d.ts

@@ -1,5 +1,6 @@
 /**
  * Do not edit directly, this file was auto-generated.
+ * Generated on Mon, 15 Dec 2025 18:39:48 GMT
  */
 
 export default tokens;