feat: make first steps work with Amsterdam theme

nl-design-system · Oct 4, 2024 · d7ee3b6 · d7ee3b6
1 parent 7ed3967
commit d7ee3b6
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 20 deletions.
diff --git a/packages/storybook/src/theme-builder/ThemeBuilderAmsterdam.stories.tsx b/packages/storybook/src/theme-builder/ThemeBuilderAmsterdam.stories.tsx
@@ -20,7 +20,7 @@ export const amsterdamTheme = addPath(convertValueTreeToDesignTokenTree(amsterda
 
 const meta = {
   title: 'Theme Builder/Amsterdam',
-  id: 'theme-builder-amsterdam',
+  id: 'theme-builder-ams',
   component: ThemeBuilder,
   args: {
     step: 0,
@@ -29,13 +29,17 @@ const meta = {
     theme: amsterdamTheme,
     themeExtension: {
       basis: {
-        common: {
-          typography: {
-            'font-family': {
-              default: {
-                value: '{ams.text.font-family}',
-              },
-            },
+        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}' },
           },
         },
       },

diff --git a/packages/storybook/src/theme-builder/steps.tsx b/packages/storybook/src/theme-builder/steps.tsx
@@ -39,10 +39,10 @@ export const steps: ThemeBuilderStepObject[] = [
   {
     name: 'Font families',
     tokens: [
-      'basis.common.typography.font-family.default',
-      'basis.common.typography.font-family.sans-serif',
-      'basis.common.typography.font-family.serif',
-      'basis.common.typography.font-family.code',
+      'basis.typography.font-family.default',
+      'basis.typography.font-family.sans-serif',
+      'basis.typography.font-family.serif',
+      'basis.typography.font-family.code',
     ],
     example: LinkExample,
     description: () => (
@@ -59,14 +59,14 @@ export const steps: ThemeBuilderStepObject[] = [
   {
     name: 'Font size scale',
     tokens: [
-      'basis.common.typography.font-size.xx-small',
-      'basis.common.typography.font-size.x-small',
-      'basis.common.typography.font-size.small',
-      'basis.common.typography.font-size.medium',
-      'basis.common.typography.font-size.large',
-      'basis.common.typography.font-size.x-large',
-      'basis.common.typography.font-size.xx-large',
-      'basis.common.typography.font-size.xxx-large',
+      'basis.typography.font-size.xx-small',
+      'basis.typography.font-size.x-small',
+      'basis.typography.font-size.small',
+      'basis.typography.font-size.medium',
+      'basis.typography.font-size.large',
+      'basis.typography.font-size.x-large',
+      'basis.typography.font-size.xx-large',
+      'basis.typography.font-size.xxx-large',
     ],
     example: FontSizeScale,
     description: () => (