From a887171f8161b0648420a2c859f5d4e8f427543b Mon Sep 17 00:00:00 2001
From: Robbert Broersma <git@robbertbroersma.nl>
Date: Fri, 4 Oct 2024 15:39:45 +0200
Subject: [PATCH] feat: make first steps work with Amsterdam theme

---
 .../ThemeBuilderAmsterdam.stories.tsx         | 20 +++++++++-------
 .../storybook/src/theme-builder/steps.tsx     | 24 +++++++++----------
 2 files changed, 24 insertions(+), 20 deletions(-)

diff --git a/packages/storybook/src/theme-builder/ThemeBuilderAmsterdam.stories.tsx b/packages/storybook/src/theme-builder/ThemeBuilderAmsterdam.stories.tsx
index 1fd0ed09e..8b411c064 100644
--- 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
index fd60262aa..65930755c 100644
--- 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: () => (