feat: support themes in community design tokens package (#609)

# Contents

Builds .css files for (at the moment) `bwbapp` and `expertuser` themes.

## Checklist

- [x] ~~New features/components and bugfixes are covered by tests~~
- [x] Changesets are created

Author: cascassette

.changeset/long-toys-cheer.md

@@ -0,0 +1,5 @@
+---
+"@lux-design-system/lux-community-design-tokens": major
+---
+
+Now exports themes in css and scss formats

.gitignore

@@ -62,7 +62,11 @@ package-lock.json
 # Ignore generated files from Stencil
 components.d.ts
 
-# Do not ignore our build scripts 
+# Do not ignore our build scripts
 # (This leaves other build/ folders ignored, see line #9)
 !/proprietary/design-tokens/build
 !/proprietary/icons/build
+
+# Ignore most generated json files for lux-community-design-tokens
+/proprietary/lux-community-design-tokens/merged
+!/proprietary/lux-community-design-tokens/merged/figma.tokens.json

proprietary/lux-community-design-tokens/build.mjs

@@ -1,6 +1,14 @@
 import { register } from '@tokens-studio/sd-transforms';
+import { existsSync, mkdirSync } from 'fs';
+import { readFile, writeFile } from 'node:fs/promises';
+import { posix } from 'path';
 import StyleDictionary from 'style-dictionary';
 
+// Will take the theme name and remove all spaces and make it lowercase
+const normalizeThemeName = (name) => {
+  return name.toLowerCase().replace(/\s+/g, '');
+};
+
 // Custom header to add generation date
 StyleDictionary.registerFileHeader({
   name: 'nlds-rhc-header',
@@ -12,31 +20,29 @@ StyleDictionary.registerFileHeader({
 register(StyleDictionary, { excludeParentKeys: true });
 
 // Get the platforms config
-const getPlatformsConfig = (buildPath) => {
-  return {
-    web: {
-      transformGroup: 'tokens-studio',
-      transforms: ['name/kebab'],
-      buildPath,
-      options: {
-        fileHeader: 'nlds-rhc-header',
-        outputReferences: true,
-      },
-      files: [
-        {
-          destination: 'root.css',
-          format: 'css/variables',
-        },
-        {
-          destination: '_variables.scss',
-          format: 'scss/variables',
-        },
-      ],
+const getPlatformsConfig = (buildPath) => ({
+  web: {
+    transformGroup: 'tokens-studio',
+    transforms: ['name/kebab'],
+    buildPath,
+    options: {
+      fileHeader: 'nlds-rhc-header',
+      outputReferences: true,
     },
-  };
-};
+    files: [
+      {
+        destination: 'variables.css',
+        format: 'css/variables',
+      },
+      {
+        destination: 'variables.scss',
+        format: 'scss/variables',
+      },
+    ],
+  },
+});
 
-// This will build the tokens
+// This will build the base tokens
 async function buildBaseTokens() {
   const config = getPlatformsConfig('dist/');
   const StyleDictionaryBase = new StyleDictionary({
@@ -53,9 +59,46 @@ async function buildBaseTokens() {
   await StyleDictionaryBase.buildAllPlatforms();
 }
 
+// This will build the themes
+async function buildThemes() {
+  const themesJson = await readFile('./merged/themes.json', 'utf-8');
+  const themes = JSON.parse(themesJson);
+
+  // Process each theme separately
+  for (const [theme, themeData] of Object.entries(themes)) {
+    const themeName = normalizeThemeName(theme);
+    const themesDir = `./merged/${themeName}`;
+
+    // Create the theme directory if it doesn't exist
+    if (!existsSync(themesDir)) {
+      mkdirSync(themesDir, { recursive: true });
+    }
+
+    // Write individual theme tokens
+    await writeFile(posix.join(themesDir, `tokens.json`), JSON.stringify(themeData.tokens, null, 2));
+
+    const config = getPlatformsConfig(`dist/${themeName}/`, themeName);
+    // Create a separate Style Dictionary instance for each theme
+    const StyleDictionaryTheme = new StyleDictionary({
+      log: { verbosity: 'verbose' },
+      source: [`./merged/${themeName}/tokens.json`],
+      preprocessors: ['tokens-studio'],
+      platforms: {
+        ...config,
+      },
+    });
+    await StyleDictionaryTheme.hasInitialized;
+
+    // Build this specific theme
+    await StyleDictionaryTheme.cleanAllPlatforms();
+    await StyleDictionaryTheme.buildAllPlatforms();
+  }
+}
+
 async function build() {
   try {
     await buildBaseTokens();
+    await buildThemes();
   } catch (error) {
     console.error(error);
   }

proprietary/lux-community-design-tokens/merge-token-sets.mjs

@@ -36,7 +36,9 @@ export const mergeFigmaTokenFiles = async () => {
   // Write the merged tokens to a file
   await writeJsonFile(outputPath, mergedTokens);
 
-  console.log(`Merged Figma tokens generated successfully at ${outputPath}.`);
+  console.log(`Merged Figma tokens generated ${collisions.length === 0 ? 'successfully ' : ''}at ${outputPath}.`);
+
+  processThemes(outputPath);
 
   if (collisions.length > 0) {
     console.error('Token set collisions found, exiting with error');
@@ -56,12 +58,43 @@ export const mergeTokenSets = (original, addition) => {
     else if (key !== '$themes') collisions.push(key);
   }
 
-  // Concatenate $themes array of both
-  merged.$themes = merged.$themes.concat(addition.$themes);
+  // No need to re-publish the themes available in RHC here
+  merged.$themes = addition.$themes;
 
   return [merged, collisions];
 };
 
+// Process themes to add the enabled components
+const processThemes = async (file) => {
+  // Read the raw JSON file directly
+  const json = await fs.readFile(file, 'utf-8');
+  const tokens = JSON.parse(json);
+
+  const processedThemes = {};
+
+  (tokens.$themes || []).forEach((theme) => {
+    const themeTokens = {};
+
+    Object.entries(theme.selectedTokenSets).forEach(([tokenSet, status]) => {
+      if (status === 'enabled' && !tokenSet.endsWith('[figma-only]')) {
+        if (tokens[tokenSet]) {
+          themeTokens[tokenSet] = tokens[tokenSet];
+        }
+      }
+    });
+    // Add default type scale here, because Figma does not understand `clamp(...)`
+    themeTokens['overrides/type-scale/default [code-only]'] = tokens['overrides/type-scale/default [code-only]'];
+
+    processedThemes[theme.name] = {
+      id: theme.id,
+      tokens: themeTokens,
+      group: theme.group,
+    };
+  });
+
+  writeJsonFile(path.resolve(__dirname, './merged/themes.json'), processedThemes);
+};
+
 // Run the generator if this script is executed directly
 if (import.meta.url === `file://${process.argv[1]}`) {
   mergeFigmaTokenFiles().catch(console.error);

proprietary/lux-community-design-tokens/merge-token-sets.spec.ts

@@ -22,13 +22,13 @@ describe('mergeTokenSets', () => {
     expect(collisions).toStrictEqual(['a']);
   });
 
-  it('should merge themes by concatenation', () => {
+  it('should not merge themes, but only use the local ones', () => {
     const orig = { $themes: [{ id: 'some' }] };
     const add = { $themes: [{ id: 'stuff' }] };
 
     const [merged] = mergeTokenSets(orig, add);
 
-    expect(merged.$themes).toStrictEqual([{ id: 'some' }, { id: 'stuff' }]);
+    expect(merged.$themes).toStrictEqual([{ id: 'stuff' }]);
   });
 
   it('should not suffer from shallow copy residue', () => {