updated design tokens pipeline to generate a themed-tokens.json file for documentation, including all the tokens for all the themes

(it will be used in the showcase, and potentially the website)

Author: didoo

packages/tokens/scripts/build-parts/generateExtraThemingFiles.ts renamed to packages/tokens/scripts/build-parts/generateExtraThemingCssFiles.ts

@@ -9,7 +9,7 @@ import prettier from 'prettier';
 import type { Dictionary, PlatformConfig }  from 'style-dictionary';
 import { fileHeader } from 'style-dictionary/utils';
 
-export async function generateExtraThemingFiles(_dictionary: Dictionary, config: PlatformConfig ): Promise<void> {
+export async function generateExtraThemingCssFiles(_dictionary: Dictionary, config: PlatformConfig): Promise<void> {
 
   const commonSource = await getSourceFromFileWithRootSelector(config, 'hds', 'common-tokens.css');
   const hdsThemedSource = await getSourceFromFileWithRootSelector(config, 'hds', 'themed-tokens.css');
@@ -101,4 +101,4 @@ async function getSourceFromFileWithRootSelector(config: PlatformConfig, theme:
   const rawSource = await fs.readFile(`${config.buildPath}themed-tokens/with-root-selector/${theme}/${path}`, 'utf8');
   const header = await fileHeader({});
   return rawSource.replace(header, '');
-}
+}

packages/tokens/scripts/build-parts/generateExtraThemingDocsFiles.ts

@@ -0,0 +1,40 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+import fs from 'fs-extra';
+
+import type { Dictionary, PlatformConfig }  from 'style-dictionary';
+import type { DesignToken } from 'style-dictionary/types';
+
+export async function generateExtraThemingDocsFiles(_dictionary: Dictionary, config: PlatformConfig): Promise<void> {
+
+  const hdsThemedTokens = await getJsonThemedObjectFromFile(config, 'hds');
+  const cds0ThemedTokens = await getJsonThemedObjectFromFile(config, 'cds-g0');
+  const cds10ThemedTokens = await getJsonThemedObjectFromFile(config, 'cds-g10');
+  const cds90ThemedTokens = await getJsonThemedObjectFromFile(config, 'cds-g90');
+  const cds100ThemedTokens = await getJsonThemedObjectFromFile(config, 'cds-g100');
+
+  const allThemedTokens = {
+    'hds': hdsThemedTokens,
+    'cds-g0': cds0ThemedTokens,
+    'cds-g10': cds10ThemedTokens,
+    'cds-g90': cds90ThemedTokens,
+    'cds-g100': cds100ThemedTokens,
+  };
+
+  const outputFolder = `${config.buildPath}`;
+  await fs.ensureDir(outputFolder);
+  await fs.writeFile(`${outputFolder}themed-tokens.json`, JSON.stringify(allThemedTokens, null, 2));
+}
+
+async function getJsonThemedObjectFromFile(config: PlatformConfig, theme: string): Promise<Record<string, DesignToken>> {
+  const jsonSource = await fs.readFile(`${config.buildPath}themed-tokens/${theme}.json`, 'utf8');
+  const jsonTokensArray = JSON.parse(jsonSource);
+  const jsonTokensObject = jsonTokensArray.reduce((acc: Record<string, any>, token: any) => {
+    acc[token.name] = token;
+    return acc;
+  }, {});
+  return jsonTokensObject;
+}

packages/tokens/scripts/build-parts/getStyleDictionaryConfig.ts

@@ -102,6 +102,21 @@ export function getStyleDictionaryConfig({ target, mode }: { target: Target, mod
             ],
             // this has been registered in the `build` file
             preprocessors: [`replace-value-for-mode-${mode}`],
+          },
+          [`docs/themed-json--mode-${mode}`]: {
+            buildPath: 'dist/docs/products/',
+            transformGroup: 'products/web',
+            prefix: 'token',
+            basePxFontSize: 16,
+            files: [
+              {
+                destination: `themed-tokens/${mode}.json`,
+                format: 'docs/json',
+                filter: excludePrivateTokens,
+              }
+            ],
+            // this has been registered in the `build` file
+            preprocessors: [`replace-value-for-mode-${mode}`],
           }
         }
       };
@@ -132,9 +147,7 @@ export function getStyleDictionaryConfig({ target, mode }: { target: Target, mod
                 filter: excludePrivateTokens,
               }
             ],
-            // TODO! do we need this? how do we manage CSS helpers for themed tokens?
-            // actions: ['generate-css-helpers'],
-            actions: ['generate-css-helpers', 'generate-extra-theming-files'],
+            actions: ['generate-css-helpers', 'generate-extra-theming-css-files'],
           },
           'docs/json': {
             buildPath: 'dist/docs/products/',
@@ -147,7 +160,8 @@ export function getStyleDictionaryConfig({ target, mode }: { target: Target, mod
                 format: 'docs/json',
                 filter: excludePrivateTokens,
               }
-            ]
+            ],
+            actions: ['generate-extra-theming-docs-files'],
           }
         }
       };

packages/tokens/scripts/build.ts

@@ -17,7 +17,8 @@ import { cloneDeep } from 'lodash-es';
 
 import { targets, modes, getStyleDictionaryConfig } from './build-parts/getStyleDictionaryConfig.ts';
 import { generateCssHelpers } from './build-parts/generateCssHelpers.ts';
-import { generateExtraThemingFiles } from './build-parts/generateExtraThemingFiles.ts';
+import { generateExtraThemingCssFiles } from './build-parts/generateExtraThemingCssFiles.ts';
+import { generateExtraThemingDocsFiles } from './build-parts/generateExtraThemingDocsFiles.ts';
 
 // SCRIPT CONFIG
 
@@ -293,8 +294,14 @@ StyleDictionary.registerAction({
 });
 
 StyleDictionary.registerAction({
-    name: 'generate-extra-theming-files',
-    do: generateExtraThemingFiles,
+    name: 'generate-extra-theming-css-files',
+    do: generateExtraThemingCssFiles,
+    undo: () => {}
+});
+
+StyleDictionary.registerAction({
+    name: 'generate-extra-theming-docs-files',
+    do: generateExtraThemingDocsFiles,
     undo: () => {}
 });