fix(all): #1153 switch to DTCG token format & migrate to latest styledictionary and ts-transform

packages/figma-design-tokens/config/generate-index-files.mjs

@@ -1,6 +1,6 @@
 import fs from 'fs';
 import chalk from 'chalk';
-import themes from './themes.cjs';
+import themes from './themes_generated.cjs';
 
 const files = fs.readdirSync(`../ui-library/src/foundation/_tokens-generated`);
 
@@ -11,6 +11,8 @@ const convertToCamelCase = (item) => {
     .replace('.js', '')
     .replace('__', '')
     .replace(/-([a-z])/g, (match, letter) => letter.toUpperCase());
+
+  console.log(convertedString);
   return convertedString;
 };
 
@@ -31,16 +33,16 @@ themes.array.map((theme) => {
   const filteredJsFiles = files.filter((item) => item.endsWith(theme + '.generated.mjs') && item.startsWith('__'));
 
   const importsPart = filteredJsFiles.map(
-    (item) => `import {${convertToCamelCase(item.split('.')[0])}} from './${item}'`
+    (item) => `import {${convertToCamelCase(item.split('.')[0])}} from './${item}'`,
   );
   const constsPart = filteredJsFiles.map(
     (item) =>
       `const ${convertToCamelCase(item.split('.')[0])}Wrapped = wrapValuesWithCss(${convertToCamelCase(
-        item.split('.')[0]
-      )})`
+        item.split('.')[0],
+      )})`,
   );
   const exportsPart = filteredJsFiles.map(
-    (item) => `export {${convertToCamelCase(item.split('.')[0])}Wrapped as ${convertToCamelCase(item.split('.')[0])}}`
+    (item) => `export {${convertToCamelCase(item.split('.')[0])}Wrapped as ${convertToCamelCase(item.split('.')[0])}}`,
   );
 
   const fileOutPut = `import {wrapValuesWithCss} from '../../utils/wrap-values-with-css.js';
@@ -55,6 +57,6 @@ themes.array.map((theme) => {
 });
 
 const themeFile = `export const Themes = [ "${themes.array.join(
-  '", "'
+  '", "',
 )}" ] as const; export type ThemeType = (typeof Themes)[number];`;
 fs.writeFileSync(`../ui-library/src/foundation/_tokens-generated/index.themes.ts`, themeFile, 'utf-8');

packages/figma-design-tokens/config/generate-json-structure.mjs

@@ -1,15 +1,15 @@
 import fs from 'fs';
 
-import { componentTokens } from '../../ui-library/src/foundation/_tokens-generated/__component-tokens.Light.generated.mjs';
-import { semanticTokens } from '../../ui-library/src/foundation/_tokens-generated/__semantic-tokens.Light.generated.mjs';
+import { componentTokens } from '../../ui-library/src/foundation/_tokens-generated/__component-tokens.Light_value.generated.mjs';
+import { semanticTokens } from '../../ui-library/src/foundation/_tokens-generated/__semantic-tokens.Light_value.generated.mjs';
 
 const componentFileOutput = JSON.stringify(componentTokens);
 const semanticFileOutput = JSON.stringify(semanticTokens);
 
 fs.writeFileSync(
   `../ui-library/src/foundation/_tokens-generated/component.generated.json`,
   componentFileOutput,
-  'utf-8'
+  'utf-8',
 );
 
 fs.writeFileSync(`../ui-library/src/foundation/_tokens-generated/semantic.generated.json`, semanticFileOutput, 'utf-8');

packages/figma-design-tokens/config/style-dictionary.config.mjs

@@ -0,0 +1,153 @@
+// get an themes array not needed anymore if we derive themes from $themes.json
+// import * as hardCodedThemes from './themes.cjs';
+// console.log(hardCodedThemes.array);
+
+import { register, permutateThemes, expandTypesMap, excludeParentKeys } from '@tokens-studio/sd-transforms';
+import StyleDictionary from 'style-dictionary';
+import { fileHeader, minifyDictionary } from 'style-dictionary/utils';
+import * as fs from 'fs';
+import { Buffer } from 'node:buffer';
+
+register(StyleDictionary, {
+  /* options here if needed */
+});
+
+//-- registered formats
+StyleDictionary.registerFormat({
+  name: 'custom/format/semanticTokens',
+  format: async ({ dictionary, file }) => {
+    const tokenObj = dictionary.tokens;
+    return (
+      (await fileHeader({ file })) + `export const semanticTokens = ` + JSON.stringify(minifyDictionary(tokenObj, true))
+    );
+  },
+});
+
+StyleDictionary.registerFormat({
+  name: 'custom/format/componentTokens',
+  format: async ({ dictionary, file }) => {
+    const tokenObj = dictionary.tokens;
+    return (
+      (await fileHeader({ file })) +
+      `export const componentTokens = ` +
+      JSON.stringify(minifyDictionary(tokenObj, true))
+    );
+  },
+});
+
+StyleDictionary.registerFormat({
+  name: 'custom/format/componentConfig',
+  format: async ({ dictionary, file }) => {
+    const tokenObj = dictionary.tokens;
+    return (
+      (await fileHeader({ file })) +
+      `export const componentConfig = ` +
+      JSON.stringify(minifyDictionary(tokenObj, true))
+    );
+  },
+});
+
+//registered custom transforms
+StyleDictionary.registerTransform({
+  type: `value`,
+  name: `custom/strReplace`,
+  transitive: true,
+  filter: (token) => typeof token.value === 'string',
+  transform: (token) => token.value.replace('pxpx', 'px'),
+});
+
+// directory where our tokens live
+const tokenDir = './input/tokens/';
+
+// generate themes file
+function writeThemesFile(themesObj) {
+  console.log('themes:');
+  console.log(themesObj);
+  const themes = JSON.stringify(Object.keys(themesObj));
+
+  console.log(`Themes: ${themes}`);
+
+  const data = new Uint8Array(Buffer.from(`const themes = ${themes} \nexports.array = themes;`));
+  fs.writeFile('./config/themes_generated.cjs', data, (err) => {
+    if (err) throw err;
+    console.log(`\nThe file 'themes_generated.cjs' has been saved!`);
+  });
+}
+
+// # # # # # # # # # #
+// main process
+// # # # # # # # # # #
+
+async function run() {
+  const $themes = JSON.parse(fs.readFileSync(`${tokenDir}$themes.json`, 'utf-8'));
+
+  const themes = permutateThemes($themes, { separator: '_' });
+  writeThemesFile(themes);
+
+  // This is an interim solution. We should switch to using permutatedThemes everywhere
+  // const translateThemesToHardCoded = {
+  //   Light_value: 'Light',
+  //   Dark_value: 'Dark',
+  // };
+
+  const config = Object.entries(themes).map(([name, tokensets]) => {
+    // const src = tokensets.map((tokenset) => `${tokenset}.json`);
+    // console.log(src);
+    return {
+      source: tokensets.map((tokenset) => `${tokenDir}${tokenset}.json`),
+      preprocessors: ['tokens-studio'], // <-- since 0.16.0 this must be explicit
+      expand: {
+        typesMap: expandTypesMap,
+      },
+      platforms: {
+        js: {
+          transforms: [
+            'attribute/cti',
+            'name/pascal',
+            'ts/resolveMath',
+            'ts/size/px',
+            'ts/typography/fontWeight',
+            'custom/strReplace',
+          ],
+          buildPath: '../ui-library/src/foundation/_tokens-generated/',
+          files: [
+            {
+              format: 'custom/format/semanticTokens',
+              destination: `__semantic-tokens.${name}.generated.mjs`,
+              // destination: `__semantic-tokens.${translateThemesToHardCoded[name]}.generated.mjs`,
+              filter: (token) => {
+                return token.attributes.category === 'sem';
+              },
+            },
+            {
+              format: 'custom/format/componentTokens',
+              destination: `__component-tokens.${name}.generated.mjs`,
+              // destination: `__component-tokens.${translateThemesToHardCoded[name]}.generated.mjs`,
+              filter: (token) => {
+                return token.attributes.category === 'cmp' && token.$type !== 'componentConfig';
+              },
+            },
+            {
+              format: 'custom/format/componentConfig',
+              destination: 'config-tokens/__component-config.generated.mjs',
+              filter: (token) => {
+                return token.$type === 'componentConfig';
+              },
+            },
+          ],
+        },
+      },
+    };
+  });
+
+  async function cleanAndBuild(cfg) {
+    // console.log(cfg);
+    const sd = new StyleDictionary(cfg);
+    await sd.cleanAllPlatforms(); // optionally, cleanup files first..
+    await sd.buildAllPlatforms();
+  }
+
+  await Promise.all(config.map(cleanAndBuild));
+}
+
+run();

packages/figma-design-tokens/config/themes_generated.cjs

@@ -0,0 +1,2 @@
+const themes = ["Light_value","Dark_value"] 
+exports.array = themes;