Skip to content

Commit 980383a

Browse files
committed
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)
1 parent 2d7deb2 commit 980383a

File tree

4 files changed

+70
-9
lines changed

4 files changed

+70
-9
lines changed

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ import prettier from 'prettier';
99
import type { Dictionary, PlatformConfig } from 'style-dictionary';
1010
import { fileHeader } from 'style-dictionary/utils';
1111

12-
export async function generateExtraThemingFiles(_dictionary: Dictionary, config: PlatformConfig ): Promise<void> {
12+
export async function generateExtraThemingCssFiles(_dictionary: Dictionary, config: PlatformConfig): Promise<void> {
1313

1414
const commonSource = await getSourceFromFileWithRootSelector(config, 'hds', 'common-tokens.css');
1515
const hdsThemedSource = await getSourceFromFileWithRootSelector(config, 'hds', 'themed-tokens.css');
@@ -101,4 +101,4 @@ async function getSourceFromFileWithRootSelector(config: PlatformConfig, theme:
101101
const rawSource = await fs.readFile(`${config.buildPath}themed-tokens/with-root-selector/${theme}/${path}`, 'utf8');
102102
const header = await fileHeader({});
103103
return rawSource.replace(header, '');
104-
}
104+
}
Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
/**
2+
* Copyright (c) HashiCorp, Inc.
3+
* SPDX-License-Identifier: MPL-2.0
4+
*/
5+
6+
import fs from 'fs-extra';
7+
8+
import type { Dictionary, PlatformConfig } from 'style-dictionary';
9+
import type { DesignToken } from 'style-dictionary/types';
10+
11+
export async function generateExtraThemingDocsFiles(_dictionary: Dictionary, config: PlatformConfig): Promise<void> {
12+
13+
const hdsThemedTokens = await getJsonThemedObjectFromFile(config, 'hds');
14+
const cds0ThemedTokens = await getJsonThemedObjectFromFile(config, 'cds-g0');
15+
const cds10ThemedTokens = await getJsonThemedObjectFromFile(config, 'cds-g10');
16+
const cds90ThemedTokens = await getJsonThemedObjectFromFile(config, 'cds-g90');
17+
const cds100ThemedTokens = await getJsonThemedObjectFromFile(config, 'cds-g100');
18+
19+
const allThemedTokens = {
20+
'hds': hdsThemedTokens,
21+
'cds-g0': cds0ThemedTokens,
22+
'cds-g10': cds10ThemedTokens,
23+
'cds-g90': cds90ThemedTokens,
24+
'cds-g100': cds100ThemedTokens,
25+
};
26+
27+
const outputFolder = `${config.buildPath}`;
28+
await fs.ensureDir(outputFolder);
29+
await fs.writeFile(`${outputFolder}themed-tokens.json`, JSON.stringify(allThemedTokens, null, 2));
30+
}
31+
32+
async function getJsonThemedObjectFromFile(config: PlatformConfig, theme: string): Promise<Record<string, DesignToken>> {
33+
const jsonSource = await fs.readFile(`${config.buildPath}themed-tokens/${theme}.json`, 'utf8');
34+
const jsonTokensArray = JSON.parse(jsonSource);
35+
const jsonTokensObject = jsonTokensArray.reduce((acc: Record<string, any>, token: any) => {
36+
acc[token.name] = token;
37+
return acc;
38+
}, {});
39+
return jsonTokensObject;
40+
}

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

Lines changed: 18 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -102,6 +102,21 @@ export function getStyleDictionaryConfig({ target, mode }: { target: Target, mod
102102
],
103103
// this has been registered in the `build` file
104104
preprocessors: [`replace-value-for-mode-${mode}`],
105+
},
106+
[`docs/themed-json--mode-${mode}`]: {
107+
buildPath: 'dist/docs/products/',
108+
transformGroup: 'products/web',
109+
prefix: 'token',
110+
basePxFontSize: 16,
111+
files: [
112+
{
113+
destination: `themed-tokens/${mode}.json`,
114+
format: 'docs/json',
115+
filter: excludePrivateTokens,
116+
}
117+
],
118+
// this has been registered in the `build` file
119+
preprocessors: [`replace-value-for-mode-${mode}`],
105120
}
106121
}
107122
};
@@ -132,9 +147,7 @@ export function getStyleDictionaryConfig({ target, mode }: { target: Target, mod
132147
filter: excludePrivateTokens,
133148
}
134149
],
135-
// TODO! do we need this? how do we manage CSS helpers for themed tokens?
136-
// actions: ['generate-css-helpers'],
137-
actions: ['generate-css-helpers', 'generate-extra-theming-files'],
150+
actions: ['generate-css-helpers', 'generate-extra-theming-css-files'],
138151
},
139152
'docs/json': {
140153
buildPath: 'dist/docs/products/',
@@ -147,7 +160,8 @@ export function getStyleDictionaryConfig({ target, mode }: { target: Target, mod
147160
format: 'docs/json',
148161
filter: excludePrivateTokens,
149162
}
150-
]
163+
],
164+
actions: ['generate-extra-theming-docs-files'],
151165
}
152166
}
153167
};

packages/tokens/scripts/build.ts

Lines changed: 10 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,8 @@ import { cloneDeep } from 'lodash-es';
1717

1818
import { targets, modes, getStyleDictionaryConfig } from './build-parts/getStyleDictionaryConfig.ts';
1919
import { generateCssHelpers } from './build-parts/generateCssHelpers.ts';
20-
import { generateExtraThemingFiles } from './build-parts/generateExtraThemingFiles.ts';
20+
import { generateExtraThemingCssFiles } from './build-parts/generateExtraThemingCssFiles.ts';
21+
import { generateExtraThemingDocsFiles } from './build-parts/generateExtraThemingDocsFiles.ts';
2122

2223
// SCRIPT CONFIG
2324

@@ -293,8 +294,14 @@ StyleDictionary.registerAction({
293294
});
294295

295296
StyleDictionary.registerAction({
296-
name: 'generate-extra-theming-files',
297-
do: generateExtraThemingFiles,
297+
name: 'generate-extra-theming-css-files',
298+
do: generateExtraThemingCssFiles,
299+
undo: () => {}
300+
});
301+
302+
StyleDictionary.registerAction({
303+
name: 'generate-extra-theming-docs-files',
304+
do: generateExtraThemingDocsFiles,
298305
undo: () => {}
299306
});
300307

0 commit comments

Comments
 (0)