@rijkshuisstijl-community/design-tokens 10.0.0 → 11.0.0

package/CHANGELOG.md

@@ -1,5 +1,31 @@
 # @rijkshuisstijl-community/design-tokens
 
+## 11.0.0
+
+### Major Changes
+
+- 378973a: Added licenses to Blockquote source code
+- 13de6a7: Voor de Navigation List component zijn de design tokens gewijzigd en verwerkt in de CSS:
+  - `rhc.navigation-list.icon.background-color` hernoemd naar `rhc.navigation-list.item.icon-start.background-color`.
+  - `rhc.navigation-list.icon.border-radius` hernoemd naar `rhc.navigation-list.item.icon-start.border-radius`.
+  - `rhc.navigation-list.icon.color` hernoemd naar `rhc.navigation-list.item.icon-start.color`.
+  - `rhc.navigation-list.item.content.font-size` hernoemd naar `rhc.navigation-list.item.description.font-size`.
+  - `rhc.navigation-list.item.heading.color` hernoemd naar `rhc.navigation-list.item.label.color`.
+  - `rhc.navigation-list.item.icon.padding-block` hernoemd naar `rhc.navigation-list.item.icon-start.padding-block`.
+  - `rhc.navigation-list.item.icon.padding-inline` hernoemd naar `rhc.navigation-list.item.icon-start.padding-inline`.
+  - `rhc.navigation-list.item.icon.size` hernoemd naar `rhc.navigation-list.item.icon-start.size`.
+  - `rhc.navigation-list.item.color` is verwijderd en `rhc.navigation-list.item.description.color` is toegevoegd zodat de color netjes op de description word ingesteld en niet elders overschreven word.
+  - `rhc.navigation-list.item.description.line-height` is toegevoegd omdat we over het algemeen line-height instelbaar maken waar font-size instelbaar is.
+  - `rhc.navigation-list.item.icon-end.color` is toegevoegd zodat icon color van end-icon niet meer via common token is gezet.
+
+## 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 Tue, 30 Dec 2025 09:35:37 GMT
 
 $rhc-border-radius-round: 999px;
 $rhc-border-radius-none: 0px;
@@ -493,21 +494,22 @@ $rhc-nav-bar-link-padding-inline-end: $rhc-space-150;
 $rhc-nav-bar-link-padding-inline-start: $rhc-space-150;
 $rhc-nav-bar-link-column-gap: $rhc-space-100;
 $rhc-nav-bar-background-color: $rhc-color-wit;
-$rhc-navigation-list-icon-border-radius: $rhc-border-radius-round;
-$rhc-navigation-list-item-icon-padding-inline: $rhc-space-100;
-$rhc-navigation-list-item-icon-padding-block: $rhc-space-100;
-$rhc-navigation-list-item-icon-size: $rhc-size-icon-md;
-$rhc-navigation-list-item-content-column-gap: $rhc-space-100;
-$rhc-navigation-list-item-content-row-gap: $rhc-space-50;
-$rhc-navigation-list-item-label-line-height: $rhc-text-line-height-md;
-$rhc-navigation-list-item-active-background-color: $rhc-color-cool-grey-100;
-$rhc-navigation-list-item-hover-background-color: $rhc-color-cool-grey-50;
-$rhc-navigation-list-item-border-width: $rhc-border-width-sm;
 $rhc-navigation-list-item-border-color: $rhc-color-cool-grey-300;
+$rhc-navigation-list-item-border-width: $rhc-border-width-sm;
 $rhc-navigation-list-item-column-gap: $rhc-space-200;
 $rhc-navigation-list-item-min-height: $rhc-size-pointer-target;
 $rhc-navigation-list-item-padding-block: $rhc-space-150;
 $rhc-navigation-list-item-padding-inline: $rhc-space-200;
+$rhc-navigation-list-item-active-background-color: $rhc-color-cool-grey-100;
+$rhc-navigation-list-item-hover-background-color: $rhc-color-cool-grey-50;
+$rhc-navigation-list-item-content-column-gap: $rhc-space-100; // [code-only]
+$rhc-navigation-list-item-content-row-gap: $rhc-space-50; // [code-only]
+$rhc-navigation-list-item-description-line-height: $rhc-text-line-height-md;
+$rhc-navigation-list-item-icon-start-border-radius: $rhc-border-radius-round;
+$rhc-navigation-list-item-icon-start-padding-block: $rhc-space-100;
+$rhc-navigation-list-item-icon-start-padding-inline: $rhc-space-100;
+$rhc-navigation-list-item-icon-start-size: $rhc-size-icon-md;
+$rhc-navigation-list-item-label-line-height: $rhc-text-line-height-md;
 $rhc-radio-group-padding-block-end: $rhc-space-100;
 $rhc-radio-group-padding-block-start: $rhc-space-100;
 $rhc-radio-group-row-gap: $rhc-space-200;
@@ -1052,16 +1054,17 @@ $rhc-nav-bar-link-font-size: $rhc-text-font-size-md;
 $rhc-nav-bar-heading-font-weight: $rhc-text-font-weight-strong;
 $rhc-nav-bar-color: $rhc-color-primary-500;
 $rhc-nav-bar-border-color: $rhc-color-primary-400;
-$rhc-navigation-list-icon-background-color: $rhc-color-foreground-default;
-$rhc-navigation-list-icon-color: $rhc-color-foreground-on-dark-color;
-$rhc-navigation-list-item-content-font-size: $rhc-text-font-size-md;
+$rhc-navigation-list-item-background-color: $rhc-color-bg-document;
+$rhc-navigation-list-item-focus-background-color: $rhc-color-primary-50;
+$rhc-navigation-list-item-description-color: $rhc-color-foreground-subtle;
+$rhc-navigation-list-item-description-font-size: $rhc-text-font-size-md;
+$rhc-navigation-list-item-icon-end-color: $rhc-color-foreground-subtle;
+$rhc-navigation-list-item-icon-start-background-color: $rhc-color-foreground-default;
+$rhc-navigation-list-item-icon-start-color: $rhc-color-foreground-on-dark-color;
+$rhc-navigation-list-item-label-color: $rhc-color-foreground-default;
 $rhc-navigation-list-item-label-font-family: $rhc-text-font-family-default;
 $rhc-navigation-list-item-label-font-size: $rhc-text-font-size-xl;
 $rhc-navigation-list-item-label-font-weight: $rhc-text-font-weight-strong;
-$rhc-navigation-list-item-focus-background-color: $rhc-color-primary-50;
-$rhc-navigation-list-item-background-color: $rhc-color-bg-document;
-$rhc-navigation-list-item-color: $rhc-color-foreground-subtle;
-$rhc-navigation-list-item-heading-color: $rhc-color-foreground-default;
 $rhc-sidenav-link-font-size: $rhc-text-font-size-md;
 $rhc-sidenav-link-font-family: $rhc-text-font-family-default;
 $rhc-sidenav-link-font-weight: $rhc-text-font-weight-default;

package/dist/index.css

@@ -1,5 +1,6 @@
 /**
  * Do not edit directly, this file was auto-generated.
+ * Generated on Tue, 30 Dec 2025 09:35:37 GMT
  */
 
 .rhc-theme {
@@ -495,21 +496,22 @@
   --rhc-nav-bar-link-padding-inline-start: var(--rhc-space-150);
   --rhc-nav-bar-link-column-gap: var(--rhc-space-100);
   --rhc-nav-bar-background-color: var(--rhc-color-wit);
-  --rhc-navigation-list-icon-border-radius: var(--rhc-border-radius-round);
-  --rhc-navigation-list-item-icon-padding-inline: var(--rhc-space-100);
-  --rhc-navigation-list-item-icon-padding-block: var(--rhc-space-100);
-  --rhc-navigation-list-item-icon-size: var(--rhc-size-icon-md);
-  --rhc-navigation-list-item-content-column-gap: var(--rhc-space-100);
-  --rhc-navigation-list-item-content-row-gap: var(--rhc-space-50);
-  --rhc-navigation-list-item-label-line-height: var(--rhc-text-line-height-md);
-  --rhc-navigation-list-item-active-background-color: var(--rhc-color-cool-grey-100);
-  --rhc-navigation-list-item-hover-background-color: var(--rhc-color-cool-grey-50);
-  --rhc-navigation-list-item-border-width: var(--rhc-border-width-sm);
   --rhc-navigation-list-item-border-color: var(--rhc-color-cool-grey-300);
+  --rhc-navigation-list-item-border-width: var(--rhc-border-width-sm);
   --rhc-navigation-list-item-column-gap: var(--rhc-space-200);
   --rhc-navigation-list-item-min-height: var(--rhc-size-pointer-target);
   --rhc-navigation-list-item-padding-block: var(--rhc-space-150);
   --rhc-navigation-list-item-padding-inline: var(--rhc-space-200);
+  --rhc-navigation-list-item-active-background-color: var(--rhc-color-cool-grey-100);
+  --rhc-navigation-list-item-hover-background-color: var(--rhc-color-cool-grey-50);
+  --rhc-navigation-list-item-content-column-gap: var(--rhc-space-100); /** [code-only] */
+  --rhc-navigation-list-item-content-row-gap: var(--rhc-space-50); /** [code-only] */
+  --rhc-navigation-list-item-description-line-height: var(--rhc-text-line-height-md);
+  --rhc-navigation-list-item-icon-start-border-radius: var(--rhc-border-radius-round);
+  --rhc-navigation-list-item-icon-start-padding-block: var(--rhc-space-100);
+  --rhc-navigation-list-item-icon-start-padding-inline: var(--rhc-space-100);
+  --rhc-navigation-list-item-icon-start-size: var(--rhc-size-icon-md);
+  --rhc-navigation-list-item-label-line-height: var(--rhc-text-line-height-md);
   --rhc-radio-group-padding-block-end: var(--rhc-space-100);
   --rhc-radio-group-padding-block-start: var(--rhc-space-100);
   --rhc-radio-group-row-gap: var(--rhc-space-200);
@@ -1054,16 +1056,17 @@
   --rhc-nav-bar-heading-font-weight: var(--rhc-text-font-weight-strong);
   --rhc-nav-bar-color: var(--rhc-color-primary-500);
   --rhc-nav-bar-border-color: var(--rhc-color-primary-400);
-  --rhc-navigation-list-icon-background-color: var(--rhc-color-foreground-default);
-  --rhc-navigation-list-icon-color: var(--rhc-color-foreground-on-dark-color);
-  --rhc-navigation-list-item-content-font-size: var(--rhc-text-font-size-md);
+  --rhc-navigation-list-item-background-color: var(--rhc-color-bg-document);
+  --rhc-navigation-list-item-focus-background-color: var(--rhc-color-primary-50);
+  --rhc-navigation-list-item-description-color: var(--rhc-color-foreground-subtle);
+  --rhc-navigation-list-item-description-font-size: var(--rhc-text-font-size-md);
+  --rhc-navigation-list-item-icon-end-color: var(--rhc-color-foreground-subtle);
+  --rhc-navigation-list-item-icon-start-background-color: var(--rhc-color-foreground-default);
+  --rhc-navigation-list-item-icon-start-color: var(--rhc-color-foreground-on-dark-color);
+  --rhc-navigation-list-item-label-color: var(--rhc-color-foreground-default);
   --rhc-navigation-list-item-label-font-family: var(--rhc-text-font-family-default);
   --rhc-navigation-list-item-label-font-size: var(--rhc-text-font-size-xl);
   --rhc-navigation-list-item-label-font-weight: var(--rhc-text-font-weight-strong);
-  --rhc-navigation-list-item-focus-background-color: var(--rhc-color-primary-50);
-  --rhc-navigation-list-item-background-color: var(--rhc-color-bg-document);
-  --rhc-navigation-list-item-color: var(--rhc-color-foreground-subtle);
-  --rhc-navigation-list-item-heading-color: var(--rhc-color-foreground-default);
   --rhc-sidenav-link-font-size: var(--rhc-text-font-size-md);
   --rhc-sidenav-link-font-family: var(--rhc-text-font-family-default);
   --rhc-sidenav-link-font-weight: var(--rhc-text-font-weight-default);

package/dist/index.d.ts

@@ -1,5 +1,6 @@
 /**
  * Do not edit directly, this file was auto-generated.
+ * Generated on Tue, 30 Dec 2025 09:35:37 GMT
  */
 
 export const rhcBorderRadiusRound: string;
@@ -434,31 +435,35 @@ export const rhcNavBarHeadingFontWeight: string;
 export const rhcNavBarBackgroundColor: string;
 export const rhcNavBarColor: string;
 export const rhcNavBarBorderColor: string;
-export const rhcNavigationListIconBackgroundColor: string;
-export const rhcNavigationListIconBorderRadius: string;
-export const rhcNavigationListIconColor: string;
-export const rhcNavigationListItemIconPaddingInline: string;
-export const rhcNavigationListItemIconPaddingBlock: string;
-export const rhcNavigationListItemIconSize: string;
-export const rhcNavigationListItemContentFontSize: string;
-export const rhcNavigationListItemContentColumnGap: string;
-export const rhcNavigationListItemContentRowGap: string;
-export const rhcNavigationListItemLabelFontFamily: string;
-export const rhcNavigationListItemLabelFontSize: string;
-export const rhcNavigationListItemLabelFontWeight: string;
-export const rhcNavigationListItemLabelLineHeight: string;
-export const rhcNavigationListItemActiveBackgroundColor: string;
-export const rhcNavigationListItemHoverBackgroundColor: string;
-export const rhcNavigationListItemFocusBackgroundColor: string;
 export const rhcNavigationListItemBackgroundColor: string;
-export const rhcNavigationListItemColor: string;
-export const rhcNavigationListItemBorderWidth: string;
 export const rhcNavigationListItemBorderColor: string;
-export const rhcNavigationListItemHeadingColor: string;
+export const rhcNavigationListItemBorderWidth: string;
 export const rhcNavigationListItemColumnGap: string;
 export const rhcNavigationListItemMinHeight: string;
 export const rhcNavigationListItemPaddingBlock: string;
 export const rhcNavigationListItemPaddingInline: string;
+export const rhcNavigationListItemActiveBackgroundColor: string;
+export const rhcNavigationListItemHoverBackgroundColor: string;
+export const rhcNavigationListItemFocusBackgroundColor: string;
+/** [code-only] */
+export const rhcNavigationListItemContentColumnGap: string;
+/** [code-only] */
+export const rhcNavigationListItemContentRowGap: string;
+export const rhcNavigationListItemDescriptionColor: string;
+export const rhcNavigationListItemDescriptionFontSize: string;
+export const rhcNavigationListItemDescriptionLineHeight: string;
+export const rhcNavigationListItemIconEndColor: string;
+export const rhcNavigationListItemIconStartBackgroundColor: string;
+export const rhcNavigationListItemIconStartBorderRadius: string;
+export const rhcNavigationListItemIconStartColor: string;
+export const rhcNavigationListItemIconStartPaddingBlock: string;
+export const rhcNavigationListItemIconStartPaddingInline: string;
+export const rhcNavigationListItemIconStartSize: string;
+export const rhcNavigationListItemLabelColor: string;
+export const rhcNavigationListItemLabelFontFamily: string;
+export const rhcNavigationListItemLabelFontSize: string;
+export const rhcNavigationListItemLabelFontWeight: string;
+export const rhcNavigationListItemLabelLineHeight: string;
 export const rhcRadioGroupPaddingBlockEnd: string;
 export const rhcRadioGroupPaddingBlockStart: string;
 export const rhcRadioGroupRowGap: string;

package/dist/index.js

@@ -1,5 +1,6 @@
 /**
  * Do not edit directly, this file was auto-generated.
+ * Generated on Tue, 30 Dec 2025 09:35:37 GMT
  */
 
 export const rhcBorderRadiusRound = "999px";
@@ -435,32 +436,34 @@ export const rhcNavBarHeadingFontWeight = "700";
 export const rhcNavBarBackgroundColor = "#ffffff";
 export const rhcNavBarColor = "#154273";
 export const rhcNavBarBorderColor = "#4f7196";
-export const rhcNavigationListIconBackgroundColor = "#0f172a";
-export const rhcNavigationListIconBorderRadius = "999px";
-export const rhcNavigationListIconColor = "#ffffff";
-export const rhcNavigationListItemIconPaddingInline = "0.5rem";
-export const rhcNavigationListItemIconPaddingBlock = "0.5rem";
-export const rhcNavigationListItemIconSize = "24px";
-export const rhcNavigationListItemContentFontSize = "1.25rem";
-export const rhcNavigationListItemContentColumnGap = "0.5rem";
-export const rhcNavigationListItemContentRowGap = "0.25rem";
-export const rhcNavigationListItemLabelFontFamily =
-  "'Fira Sans', Arial, Verdana, sans-serif";
-export const rhcNavigationListItemLabelFontSize = "1.875rem";
-export const rhcNavigationListItemLabelFontWeight = "700";
-export const rhcNavigationListItemLabelLineHeight = "150%";
-export const rhcNavigationListItemActiveBackgroundColor = "#f1f5f9";
-export const rhcNavigationListItemHoverBackgroundColor = "#f8fafc";
-export const rhcNavigationListItemFocusBackgroundColor = "#dce3ea";
 export const rhcNavigationListItemBackgroundColor = "#ffffff";
-export const rhcNavigationListItemColor = "#334155";
-export const rhcNavigationListItemBorderWidth = "1px";
 export const rhcNavigationListItemBorderColor = "#cbd5e1";
-export const rhcNavigationListItemHeadingColor = "#0f172a";
+export const rhcNavigationListItemBorderWidth = "1px";
 export const rhcNavigationListItemColumnGap = "1rem";
 export const rhcNavigationListItemMinHeight = "48px";
 export const rhcNavigationListItemPaddingBlock = "0.75rem";
 export const rhcNavigationListItemPaddingInline = "1rem";
+export const rhcNavigationListItemActiveBackgroundColor = "#f1f5f9";
+export const rhcNavigationListItemHoverBackgroundColor = "#f8fafc";
+export const rhcNavigationListItemFocusBackgroundColor = "#dce3ea";
+export const rhcNavigationListItemContentColumnGap = "0.5rem"; // [code-only]
+export const rhcNavigationListItemContentRowGap = "0.25rem"; // [code-only]
+export const rhcNavigationListItemDescriptionColor = "#334155";
+export const rhcNavigationListItemDescriptionFontSize = "1.25rem";
+export const rhcNavigationListItemDescriptionLineHeight = "150%";
+export const rhcNavigationListItemIconEndColor = "#334155";
+export const rhcNavigationListItemIconStartBackgroundColor = "#0f172a";
+export const rhcNavigationListItemIconStartBorderRadius = "999px";
+export const rhcNavigationListItemIconStartColor = "#ffffff";
+export const rhcNavigationListItemIconStartPaddingBlock = "0.5rem";
+export const rhcNavigationListItemIconStartPaddingInline = "0.5rem";
+export const rhcNavigationListItemIconStartSize = "24px";
+export const rhcNavigationListItemLabelColor = "#0f172a";
+export const rhcNavigationListItemLabelFontFamily =
+  "'Fira Sans', Arial, Verdana, sans-serif";
+export const rhcNavigationListItemLabelFontSize = "1.875rem";
+export const rhcNavigationListItemLabelFontWeight = "700";
+export const rhcNavigationListItemLabelLineHeight = "150%";
 export const rhcRadioGroupPaddingBlockEnd = "0.5rem";
 export const rhcRadioGroupPaddingBlockStart = "0.5rem";
 export const rhcRadioGroupRowGap = "1rem";