chore(tokens): ♻️ New token export

Creating a separate stack on #1849 for new tokens export

design-tokens/$themes.json

@@ -1387,4 +1387,4 @@
       "colors.brand3.contrast-2": "1996d517bbcfa74cc3110ce915465d9356390c88"
     }
   }
-]
+]

design-tokens/core/modes/dark.json

@@ -370,6 +370,14 @@
           "value": "#f6fafd",
           "type": "color"
         },
+        "contrast-2": {
+          "value": "#ddeaf6",
+          "type": "color"
+        },
+        "contrast-1": {
+          "value": "#f6fafd",
+          "type": "color"
+        },
         "contrast-2": {
           "value": "#ddeaf6",
           "type": "color"
@@ -1561,4 +1569,4 @@
       }
     }
   }
-}
+}

design-tokens/themes/theme1.json

@@ -311,4 +311,4 @@
       }
     }
   }
-}
+}

packages/cli/package.json

@@ -13,7 +13,7 @@
   },
   "scripts": {
     "designsystemet": "esno ./bin/designsystemet.ts",
-    "build": "yarn clean && yarn designsystemet tokens -t ../../design-tokens -b Digdir Tilsynet Altinn Brreg",
+    "build": "yarn clean && yarn designsystemet tokens -t ../../design-tokens -b theme1 theme2 theme3 theme4",
     "prepublish": "tsc",
     "clean": "yarn workspace @digdir/designsystemet-theme clean",
     "css-light-dark-codemod": "esno ./bin/designsystemet.ts migrate tokens-rename-light-dark"

packages/cli/src/tokens/build.ts

@@ -1,6 +1,11 @@
 import path from 'path';
+import fs from 'fs';
 
-import { registerTransforms } from '@tokens-studio/sd-transforms';
+import {
+  registerTransforms,
+  permutateThemes,
+} from '@tokens-studio/sd-transforms';
+import type { ThemeObject } from '@tokens-studio/types';
 import StyleDictionary from 'style-dictionary';
 import type { Config, TransformedToken } from 'style-dictionary/types';
 
@@ -42,17 +47,17 @@ StyleDictionary.registerTransformGroup({
 
 const baseConfig = (brand: Brand, tokensPath: string): Partial<Config> => {
   return {
-    log: { verbosity: 'silent' },
+    log: { verbosity: 'verbose' },
     include: [
-      `${tokensPath}/Brand/${brand}.json`,
-      `${tokensPath}/Base/Semantic.json`,
+      `${tokensPath}/themes/${brand}.json`,
+      `${tokensPath}/semantic/**/*.json`,
     ],
-    source: [`${tokensPath}/Base/Core.json`],
+    source: [`${tokensPath}/core/**/*.json`],
   };
 };
 
 const excludeSource = (token: TransformedToken) => {
-  if (token.filePath.includes('Core.json')) return false;
+  if (token.filePath.includes('core/**/*.json')) return false;
 
   if (token.path[0] === 'viewport' && ['color'].includes(token.type as string))
     return false;
@@ -63,29 +68,30 @@ const excludeSource = (token: TransformedToken) => {
 const getCSSTokensConfig = (
   brand: Brand,
   targetFolder = '',
-  tokensPath: string,
+  tokensets: string[],
 ): Config => {
-  const destinationPath = `${targetFolder}/${brand.toLowerCase()}`;
+  const destinationPath = `${targetFolder}/${brand.toLowerCase()}/`;
 
   return {
-    ...baseConfig(brand, tokensPath),
+    log: { verbosity: 'verbose' },
+    source: tokensets,
     platforms: {
       css: {
         prefix,
         basePxFontSize,
         transformGroup: 'fds/css',
+        buildPath: destinationPath,
         files: [
           {
-            destination: `${destinationPath}/tokens.css`,
+            destination: `tokens.css`,
             format: scopedReferenceVariables.name,
             filter: excludeSource,
           },
         ],
         options: {
           fileHeader,
           includeReferences: (token: TransformedToken) =>
-            ['color'].includes(token.type as string) &&
-            !(token.value as string).startsWith('rgba'),
+            ['color'].includes(token.type as string),
         },
       },
     },
@@ -129,11 +135,29 @@ type Options = {
 };
 
 export async function run(options: Options): Promise<void> {
-  const brands = options.brands;
+  const tokensPath = options.tokens;
+
+  const $themes = JSON.parse(
+    fs.readFileSync(path.resolve(`${tokensPath}/$themes.json`), 'utf-8'),
+  ) as ThemeObject[];
 
-  const storefrontTokensPath = path.resolve('../../apps/storefront/tokens');
+  const themes = permutateThemes($themes, {
+    separator: '_',
+  }) as Record<string, string[]>;
+
+  const brands = Object.entries(themes).map(([name]) => name);
+
+  // const storefrontTokensPath = path.resolve('../../apps/storefront/tokens');
   const packageTokensPath = path.resolve('../../packages/theme/brand');
-  const tokensPath = options.tokens;
+
+  const configs = Object.entries(themes).map(([name, tokensets]) => {
+    const updatedSets = tokensets.map((x) =>
+      path.resolve(`${tokensPath}/${x}.json`),
+    );
+
+    console.log({ name, updatedSets });
+    return getCSSTokensConfig(name, packageTokensPath, updatedSets);
+  });
 
   if (brands.length > 0) {
     console.log('🍱 Staring token builder');
@@ -142,31 +166,33 @@ export async function run(options: Options): Promise<void> {
 
     console.log('\n🏗️  Start building CSS tokens');
     await Promise.all(
-      brands.map(async (brand) => {
-        console.log(`👷 Processing ${brand}`);
+      configs.map(async (config) => {
+        console.log(
+          `👷 Processing ${config?.platforms?.css?.files?.[0]?.destination}`,
+        );
+
+        console.log('config:', config);
 
         const sd = new StyleDictionary();
-        const tokensPackageSD = await sd.extend(
-          getCSSTokensConfig(brand, packageTokensPath, tokensPath),
-        );
+        const tokensPackageSD = await sd.extend(config);
 
         return tokensPackageSD.buildAllPlatforms();
       }),
     );
     console.log('🏁 Finished building package tokens!');
 
-    console.log('\n🏗️  Started building storefront tokens…');
-    await Promise.all(
-      brands.map(async (brand) => {
-        console.log(`👷 Processing ${brand}`);
+    // console.log('\n🏗️  Started building storefront tokens…');
+    // await Promise.all(
+    //   brands.map(async (brand) => {
+    //     console.log(`👷 Processing ${brand}`);
 
-        const storefrontSD = new StyleDictionary(
-          getStorefrontConfig(brand, storefrontTokensPath, tokensPath),
-        );
+    //     const storefrontSD = new StyleDictionary(
+    //       getStorefrontConfig(brand, storefrontTokensPath, tokensPath),
+    //     );
 
-        return storefrontSD.buildAllPlatforms();
-      }),
-    );
-    console.log('🏁 Finished building storefront tokens!');
+    //     return storefrontSD.buildAllPlatforms();
+    //   }),
+    // );
+    // console.log('🏁 Finished building storefront tokens!');
   }
 }