feat: update init script to support latest design-tokens

.changeset/gorgeous-readers-burn.md

@@ -0,0 +1,5 @@
+---
+'@digdir/designsystemet': minor
+---
+
+feat: Update init script to new design-tokens format

.github/workflows/conventional-pr.yml

@@ -19,4 +19,4 @@ jobs:
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
         with:
-          commitlintRulesPath: './commitlint.rules.cjs'
+          commitlintRulesPath: './commitlint.rules.js'

package.json

@@ -22,6 +22,7 @@
     "build:react": "yarn workspace @digdir/designsystemet-react build",
     "build:tokens": "yarn workspace @digdir/designsystemet build:tokens",
     "build:css": "yarn workspace @digdir/designsystemet-css build",
+    "build:cli": "yarn workspace @digdir/designsystemet build",
     "build:storybook": "yarn workspace @designsystemet/storybook build",
     "build:storefront": "yarn workspace storefront build",
     "build:devsite": "yarn workspace dev build",

packages/cli/src/init/createTokensPackage.ts

@@ -217,23 +217,55 @@ Will now create the following:
     // Directory creation failed, probably because the directory already exists
   }
 
+  try {
+    await fs.mkdir(path.join(TOKENS_TARGET_DIR, 'themes'));
+  } catch {
+    // Directory creation failed, probably because the directory already exists
+  }
+
+  try {
+    await fs.mkdir(path.join(TOKENS_TARGET_DIR, 'primitives/modes/typography/primary'), { recursive: true });
+    await fs.mkdir(path.join(TOKENS_TARGET_DIR, 'primitives/modes/typography/secondary'), { recursive: true });
+  } catch {
+    // Directory creation failed, probably because the directory already exists
+  }
+
   for (const theme of themes.map(normalizeTokenSetName)) {
     for (const mode of modes.map(normalizeTokenSetName)) {
       // Copy the global file for the color mode
       await fs.cp(
-        path.join(TOKEN_TEMPLATE_FILES_PATH, `primitives/colors/${mode}/global.json`),
-        path.join(TOKENS_TARGET_DIR, `primitives/colors/${mode}/global.json`),
+        path.join(TOKEN_TEMPLATE_FILES_PATH, `primitives/modes/colors/${mode}/global.json`),
+        path.join(TOKENS_TARGET_DIR, `primitives/modes/colors/${mode}/global.json`),
         { recursive: true },
       );
 
       // Create theme primitives for the color mode
       const template = await fs.readFile(
-        path.join(TOKEN_TEMPLATE_FILES_PATH, `primitives/colors/${mode}/theme-template.json`),
+        path.join(TOKEN_TEMPLATE_FILES_PATH, `primitives/modes/colors/${mode}/theme-template.json`),
       );
       await fs.writeFile(
-        path.join(TOKENS_TARGET_DIR, `primitives/colors/${mode}/${theme}.json`),
+        path.join(TOKENS_TARGET_DIR, `primitives/modes/colors/${mode}/${theme}.json`),
         template.toString('utf-8').replaceAll('<theme>', theme),
       );
+
+      // Create theme primitives for primary typography
+      const templatePrimaryTypo = await fs.readFile(
+        path.join(TOKEN_TEMPLATE_FILES_PATH, `primitives/modes/typography/primary/theme-template.json`),
+      );
+      await fs.writeFile(
+        path.join(TOKENS_TARGET_DIR, `primitives/modes/typography/primary/${theme}.json`),
+        templatePrimaryTypo.toString('utf-8').replaceAll('<theme>', theme),
+      );
+
+      // Create theme primitives for secondary typography
+      const templateSecondaryTypo = await fs.readFile(
+        path.join(TOKEN_TEMPLATE_FILES_PATH, `primitives/modes/typography/secondary/theme-template.json`),
+      );
+
+      await fs.writeFile(
+        path.join(TOKENS_TARGET_DIR, `primitives/modes/typography/secondary/${theme}.json`),
+        templateSecondaryTypo.toString('utf-8').replaceAll('<theme>', theme),
+      );
     }
 
     // Create main theme token set

packages/cli/src/init/generateMetadataJson.ts

@@ -7,11 +7,13 @@ interface Metadata {
 export default function generateMetadataJson(modes: Array<'Light' | 'Dark' | 'Contrast'>, themes: string[]): Metadata {
   return {
     tokenSetOrder: [
-      'primitives/globals',
-      'primitives/typography/default',
+      'primitives/modes/globals',
+      'primitives/modes/typography/default',
       ...modes.flatMap((mode) => [
-        `primitives/colors/${normalizeTokenSetName(mode)}/global`,
-        ...themes.map((theme) => `primitives/colors/${normalizeTokenSetName(mode)}/${normalizeTokenSetName(theme)}`),
+        `primitives/modes/colors/${normalizeTokenSetName(mode)}/global`,
+        ...themes.map(
+          (theme) => `primitives/modes/colors/${normalizeTokenSetName(mode)}/${normalizeTokenSetName(theme)}`,
+        ),
       ]),
       ...themes.map((theme) => `themes/${normalizeTokenSetName(theme)}`),
       'semantic/color',

packages/cli/src/init/generateThemesJson.ts

@@ -2,13 +2,41 @@ import { randomUUID } from 'node:crypto';
 
 import { type ThemeObject, TokenSetStatus } from '@tokens-studio/types';
 
+import { Theme } from '@adobe/leonardo-contrast-colors';
 import { normalizeTokenSetName } from './utils.js';
 
 export default function generateThemesJson(
   modes: Array<'Light' | 'Dark' | 'Contrast'>,
   themes: string[],
 ): ThemeObject[] {
-  return [...generateModesGroup(modes, themes), ...generateThemesGroup(themes), generateSemanticGroup()];
+  return [
+    ...generateSizeGroup(),
+    ...generateThemesGroup(themes),
+    ...generateTypographyGroup(themes),
+    ...generateModesGroup(modes, themes),
+    generateSemanticGroup(),
+  ];
+}
+
+function generateSizeGroup(): ThemeObject[] {
+  return [
+    {
+      id: randomUUID(),
+      name: 'default',
+      selectedTokenSets: {
+        'primitives/size/default': TokenSetStatus.ENABLED,
+      },
+      group: 'Size',
+    },
+    {
+      id: randomUUID(),
+      name: 'compact',
+      selectedTokenSets: {
+        'primitives/size/compact': TokenSetStatus.ENABLED,
+      },
+      group: 'Size',
+    },
+  ];
 }
 
 function generateModesGroup(modes: Array<'Light' | 'Dark' | 'Contrast'>, themes: string[]): ThemeObject[] {
@@ -17,11 +45,11 @@ function generateModesGroup(modes: Array<'Light' | 'Dark' | 'Contrast'>, themes:
       id: randomUUID(),
       name: mode,
       selectedTokenSets: Object.fromEntries([
-        [`primitives/colors/${normalizeTokenSetName(mode)}/global`, TokenSetStatus.ENABLED],
+        [`primitives/modes/colors/${normalizeTokenSetName(mode)}/global`, TokenSetStatus.ENABLED],
         ...themes.map(
           (theme) =>
             [
-              `primitives/colors/${normalizeTokenSetName(mode)}/${normalizeTokenSetName(theme)}`,
+              `primitives/modes/colors/${normalizeTokenSetName(mode)}/${normalizeTokenSetName(theme)}`,
               TokenSetStatus.ENABLED,
             ] as const,
         ),
@@ -52,8 +80,34 @@ function generateSemanticGroup(): ThemeObject {
       'semantic/style': TokenSetStatus.ENABLED,
       'semantic/color': TokenSetStatus.ENABLED,
       'primitives/globals': TokenSetStatus.SOURCE,
-      'primitives/typography/default': TokenSetStatus.SOURCE,
     },
     group: 'Semantic',
   };
 }
+
+function generateTypographyGroup(themes: string[]): ThemeObject[] {
+  return [
+    {
+      id: randomUUID(),
+      name: 'primary',
+      selectedTokenSets: Object.fromEntries(
+        themes.map((theme) => [
+          `primitives/modes/typography/primary/${normalizeTokenSetName(theme)}`,
+          TokenSetStatus.ENABLED,
+        ]),
+      ),
+      group: 'Typography',
+    },
+    {
+      id: randomUUID(),
+      name: 'secondary',
+      selectedTokenSets: Object.fromEntries(
+        themes.map((theme) => [
+          `primitives/modes/typography/secondary/${normalizeTokenSetName(theme)}`,
+          TokenSetStatus.ENABLED,
+        ]),
+      ),
+      group: 'Typography',
+    },
+  ];
+}

packages/cli/src/init/nextStepsMarkdown.ts

@@ -26,8 +26,8 @@ export function nextStepsMarkdown(themes: string[], modes: Mode[], tokensTargetD
 1. Go to https://theme.designsystemet.no and set up a color theme
 2. Press "Kopier tema"
 3. Under "Json til Figma", copy the contents under ${modes.join(' / ')} to
-   the corresponding file under \`${tokensTargetDir}\`:  
-${themeModeCombinations.map(([theme, mode]) => `     **${theme}, ${mode}**: \`primitives/colors/${normalizeTokenSetName(mode)}/${normalizeTokenSetName(theme)}.json\`  `).join('\n')}
+   the corresponding file under \`${tokensTargetDir}\`:
+${themeModeCombinations.map(([theme, mode]) => `     **${theme}, ${mode}**: \`primitives/modes/colors/${normalizeTokenSetName(mode)}/${normalizeTokenSetName(theme)}.json\`  `).join('\n')}
    This can also be done in Tokens Studio for Figma.
 4. **IMPORTANT!** In the JSON data you copied, replace \`theme\` on line 2
    with the correct theme identifier, depending on the theme you're customizing.