feat: theme builder dag

packages/storybook/package.json

@@ -68,6 +68,7 @@
     "@nl-design-system-unstable/zevenaar-design-tokens": "workspace:*",
     "@nl-design-system-unstable/zwolle-design-tokens": "workspace:*",
     "@open-formulieren/design-tokens": "0.52.1",
+    "@rijkshuisstijl-community/design-tokens": "1.0.0-alpha.24",
     "@storybook/addon-a11y": "8.2.7",
     "@storybook/addon-actions": "8.2.7",
     "@storybook/addon-backgrounds": "8.2.7",

packages/storybook/src/theme-builder/ThemeBuilder.tsx

@@ -5,6 +5,8 @@ import { useState, useEffect } from 'react';
 import { ThemeBuilderStepObject } from './steps';
 import { DesignTokenTree } from '@nl-design-system-unstable/theme-toolkit/dist/design-tokens';
 import { treeToArray } from '@nl-design-system-unstable/theme-toolkit/dist/ExampleTokensCSS';
+import { CustomStory } from '@nl-design-system-unstable/theme-toolkit/dist/CustomStory';
+import { merge } from 'lodash';
 import './ThemeBuilder.css';
 import './property.css';
 
@@ -76,6 +78,7 @@ export interface ThemeBuilderProps {
   step: number;
   steps: ThemeBuilderStepObject[];
   theme: DesignTokenTree;
+  themeExtension?: DesignTokenTree;
   basis: DesignTokenTree;
   example?: () => ReactNode;
   allTokens?: boolean;
@@ -84,6 +87,7 @@ export interface ThemeBuilderProps {
 export const ThemeBuilder = ({
   steps,
   theme,
+  themeExtension,
   basis,
   step,
   example,
@@ -94,6 +98,12 @@ export const ThemeBuilder = ({
   const Example = example || stepData?.example;
   const Description = stepData?.description;
 
+  const currentStepTokens = [...(stepData?.tokens || []), ...(stepData?.commonTokens || [])];
+
+  let previousTokens = steps
+    .slice(0, step)
+    .reduce((arr, step) => [...arr, ...step.tokens, ...(step.commonTokens || [])], []);
+
   let relevantTokens = steps
     .slice(0, step + 1)
     .reduce((arr, step) => [...arr, ...step.tokens, ...(step.commonTokens || [])], []);
@@ -121,34 +131,59 @@ export const ThemeBuilder = ({
         ['voorbeeld', 'groningen', 'rods'].includes(token.path[0]) ||
         (token.path[0] === 'utrecht' && (token.path[1] === 'color' || token.path[1] === 'typography')) ||
         (token.path[0] === 'denhaag' &&
-          (token.path[1] === 'color' || token.path[1] === 'typography' || token.path[1] === 'size'))
+          (token.path[1] === 'color' || token.path[1] === 'typography' || token.path[1] === 'size')) ||
+        (token.path[0] === 'ams' && ['border', 'color', 'proportion', 'space', 'text'].includes(token.path[1])) ||
+        (token.path[0] === 'rhc' &&
+          [
+            'border-width',
+            'color',
+            'font-family',
+            'font-weight',
+            'space',
+            'size',
+            'line-height',
+            'font-size',
+            'border-radius',
+          ].includes(token.path[1]))
       );
     }).then(({ css }) => {
       setBrandCss(css);
     }, console.error);
   }, [theme]);
 
   useEffect(() => {
-    styleDictionaryConversion(theme, '.step-theme', (token) => {
+    styleDictionaryConversion(merge(theme, themeExtension), '.step-theme', (token) => {
       return relevantTokenSet.has((token.path || []).join('.'));
     }).then(({ css, json }) => {
       console.log(json);
       setCustomThemeCss(css);
     }, console.error);
-  }, [step, theme]);
+  }, [step, theme, themeExtension]);
 
   return (
     <div className="theme-builder">
-      <div className="theme-builder__example basis-theme brand-tokens step-theme">{Example && <Example />}</div>
+      <CustomStory>
+        <div className="theme-builder__example basis-theme brand-tokens step-theme">{Example && <Example />}</div>
+      </CustomStory>
       <h2>{stepData?.name || `Stap ${step}`}</h2>
       {Description && <Description />}
       <style dangerouslySetInnerHTML={{ __html: basisThemeCss }}></style>
       <style dangerouslySetInnerHTML={{ __html: brandCss }}></style>
       <style dangerouslySetInnerHTML={{ __html: customThemeCss }}></style>
       <details>
-        <summary>{relevantTokens.length} tokens up until this step</summary>
+        <summary>{currentStepTokens.length} tokens for this step</summary>
+        <ul>
+          {currentStepTokens.map((token, index) => (
+            <li key={index}>
+              <code>{token}</code>
+            </li>
+          ))}
+        </ul>
+      </details>
+      <details>
+        <summary>{previousTokens.length} tokens before this step</summary>
         <ul>
-          {relevantTokens.map((token, index) => (
+          {previousTokens.map((token, index) => (
             <li key={index}>
               <code>{token}</code>
             </li>

packages/storybook/src/theme-builder/ThemeBuilderAmsterdam.stories.tsx

@@ -0,0 +1,226 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { steps } from './steps';
+import basisTheme from '@nl-design-system-unstable/basis-design-tokens/dist/tokens.json';
+import voorbeeldTheme from '@nl-design-system-unstable/voorbeeld-design-tokens/dist/tokens.json';
+import groningenTheme from '@nl-design-system-unstable/groningen-design-tokens/dist/tokens.json';
+import utrechtTheme from '@utrecht/design-tokens/dist/tokens.cjs';
+import denhaagTheme from '@gemeente-denhaag/design-tokens-components/dist/index.json';
+import rijkshuisstijlCommunityTheme from '@rijkshuisstijl-community/design-tokens/dist/tokens.js';
+import rotterdamTheme from '@gemeente-rotterdam/design-tokens/dist/tokens.cjs';
+import { ThemeBuilder } from './ThemeBuilder';
+import { examples } from './examples';
+import amsterdamValueTree from '@amsterdam/design-system-tokens/dist/index.json';
+import {
+  convertValueTreeToDesignTokenTree,
+  DesignTokenTree,
+} from '@nl-design-system-unstable/theme-toolkit/dist/design-tokens';
+import { addPath } from '@nl-design-system-unstable/theme-toolkit/dist/ExampleTokensCSS';
+
+export const amsterdamTheme = addPath(convertValueTreeToDesignTokenTree(amsterdamValueTree)) as DesignTokenTree;
+
+const meta = {
+  title: 'Theme Builder/Amsterdam',
+  id: 'theme-builder-ams',
+  component: ThemeBuilder,
+  args: {
+    step: 0,
+    steps,
+    basis: basisTheme,
+    theme: amsterdamTheme,
+    themeExtension: {
+      basis: {
+        typography: {
+          'font-family': {
+            default: { value: '{ams.text.font-family}' },
+          },
+          'font-size': {
+            small: { value: '{ams.text.level.6.font-size}' },
+            medium: { value: '{ams.text.level.5.font-size}' },
+            large: { value: '{ams.text.level.4.font-size}' },
+            'x-large': { value: '{ams.text.level.3.font-size}' },
+            'xx-large': { value: '{ams.text.level.2.font-size}' },
+            'xxx-large': { value: '{ams.text.level.1.font-size}' },
+          },
+        },
+      },
+    },
+  },
+  argTypes: {
+    example: {
+      control: 'select',
+      options: Object.keys(examples),
+    },
+    theme: {
+      control: 'select',
+      options: ['voorbeeld', 'groningen', 'denhaag', 'rotterdam', 'utrecht', 'rijkshuisstijl-community'],
+      mapping: {
+        voorbeeld: voorbeeldTheme,
+        groningen: groningenTheme,
+        rotterdam: rotterdamTheme,
+        utrecht: utrechtTheme,
+        denhaag: denhaagTheme,
+        rijkshuisstijlCommunity: rijkshuisstijlCommunityTheme,
+      },
+    },
+  },
+} satisfies Meta<typeof ThemeBuilder>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Step0: Story = {
+  args: {
+    step: 0,
+  },
+};
+
+export const Step1: Story = {
+  args: {
+    step: 1,
+  },
+};
+
+export const Step2: Story = {
+  args: {
+    step: 2,
+  },
+};
+
+export const Step3: Story = {
+  args: {
+    step: 3,
+  },
+};
+
+export const Step4: Story = {
+  args: {
+    step: 4,
+  },
+};
+
+export const Step5: Story = {
+  args: {
+    step: 5,
+  },
+};
+
+export const Step6: Story = {
+  args: {
+    step: 6,
+  },
+};
+
+export const Step7: Story = {
+  args: {
+    step: 7,
+  },
+};
+
+export const Step8: Story = {
+  args: {
+    step: 8,
+  },
+};
+
+export const Step9: Story = {
+  args: {
+    step: 9,
+  },
+};
+
+export const Step10: Story = {
+  args: {
+    step: 10,
+  },
+};
+
+export const Step11: Story = {
+  args: {
+    step: 11,
+  },
+};
+
+export const Step12: Story = {
+  args: {
+    step: 12,
+  },
+};
+
+export const Step13: Story = {
+  args: {
+    step: 13,
+  },
+};
+
+export const Step14: Story = {
+  args: {
+    step: 14,
+  },
+};
+
+export const Step15: Story = {
+  args: {
+    step: 15,
+  },
+};
+
+export const Step16: Story = {
+  args: {
+    step: 16,
+  },
+};
+
+export const Step17: Story = {
+  args: {
+    step: 17,
+  },
+};
+
+export const Step18: Story = {
+  args: {
+    step: 18,
+  },
+};
+
+export const Step19: Story = {
+  args: {
+    step: 19,
+  },
+};
+
+export const Step20: Story = {
+  args: {
+    step: 20,
+  },
+};
+
+export const Step21: Story = {
+  args: {
+    step: 21,
+  },
+};
+
+export const Step22: Story = {
+  args: {
+    step: 22,
+  },
+};
+
+export const Step23: Story = {
+  args: {
+    step: 23,
+  },
+};
+
+export const Step24: Story = {
+  args: {
+    step: 24,
+  },
+};
+
+export const Step25: Story = {
+  args: {
+    step: 25,
+  },
+};