Skip to content

Commit 2b30ef4

Browse files
tayseataysea
authored
Modify color namespace and update transformations to Figma and style system outputs (#4654)
* Modify token_export and token_import scripts to manage Github/Figma translation * Add grommet style-dictionary output * Modify CSS outputs to remove REST, DEFAULT * Update esm, cjs output values to be css variables * Remove DEFAULT, REST from grommet output references * Adjust jsonToNestedValue to remove DEFAULT, REST in esm, cjs, grommet outputs * Add transform for docs name to remove DEFAULT, REST * Dimension tokens to use same CSS transform group as other CSS outputs * Remove special characters to align with CSS spec * Uncomment sync_tokens_to_figma * Update design-tokens/src/token_import.ts * Add grommet export and update theme to accommodate new color structure * Create rare-needles-kiss.md
1 parent c01e44a commit 2b30ef4

23 files changed

+2672
-1796
lines changed

‎.changeset/rare-needles-kiss.md

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
---
2+
"hpe-design-tokens": minor
3+
---
4+
5+
- Added new export `hpe-design-tokens/grommet`.
6+
- Changed ESM/CommonJS exports to resolve to CSS variables rather than raw values.
7+
- Changed structure of "color" exports to flatten color name after the category (e.g., `hpe.color.background.selected.weak` --> `hpe.color.background['selected-weak']`).

‎design-tokens/package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@
1111
"import": "./dist/esm/index.js",
1212
"require": "./dist/cjs/index.cjs"
1313
},
14+
"./grommet": "./dist/grommet/index.js",
1415
"./docs": "./dist/docs/index.js",
1516
"./dist/css/*.css": {
1617
"import": "./dist/css/*.css",

‎design-tokens/src/HPEStyleDictionary.ts

Lines changed: 17 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,22 @@
11
import { StyleDictionary } from 'style-dictionary-utils';
22
import {
33
commonJs,
4-
commonJsGrommetRefs,
54
cssColorModes,
65
cssBreakpoints,
76
esmGrommetRefs,
87
javascriptEsm,
98
jsonFlat,
109
} from './formats/index.js';
1110
import {
11+
colorNameJs,
1212
cssW3c,
13+
javascriptCss,
1314
javascriptW3c,
1415
linearGradientCss,
16+
nameCSS,
1517
numberToDimension,
1618
shadowCSS,
19+
valueToCssVar,
1720
} from './transforms/index.js';
1821

1922
export const HPEStyleDictionary = new StyleDictionary({
@@ -42,14 +45,16 @@ HPEStyleDictionary.registerFormat({
4245
name: `esmGrommetRefs`,
4346
format: esmGrommetRefs,
4447
});
45-
HPEStyleDictionary.registerFormat({
46-
name: `commonJsGrommetRefs`,
47-
format: commonJsGrommetRefs,
48-
});
4948
HPEStyleDictionary.registerFormat({
5049
name: `jsonFlat`,
5150
format: jsonFlat,
5251
});
52+
HPEStyleDictionary.registerTransform({
53+
...colorNameJs,
54+
});
55+
HPEStyleDictionary.registerTransform({
56+
...nameCSS,
57+
});
5358
HPEStyleDictionary.registerTransform({
5459
...numberToDimension,
5560
});
@@ -66,6 +71,13 @@ HPEStyleDictionary.registerTransform({
6671
HPEStyleDictionary.registerTransform({
6772
...linearGradientCss,
6873
});
74+
HPEStyleDictionary.registerTransform({
75+
...valueToCssVar,
76+
});
77+
HPEStyleDictionary.registerTransformGroup({
78+
name: 'js/css',
79+
transforms: javascriptCss,
80+
});
6981
HPEStyleDictionary.registerTransformGroup({
7082
name: 'js/w3c',
7183
transforms: javascriptW3c,

‎design-tokens/src/formats/commonJsGrommetRefs.ts

Lines changed: 0 additions & 31 deletions
This file was deleted.

‎design-tokens/src/formats/index.ts

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
export { commonJs } from './commonJs.js';
2-
export { commonJsGrommetRefs } from './commonJsGrommetRefs.js';
32
export { cssColorModes } from './cssColorModes.js';
43
export { cssBreakpoints } from './cssBreakpoints.js';
54
export { esmGrommetRefs } from './esmGrommetRefs.js';

‎design-tokens/src/formats/utils/getGrommetValue.ts

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,11 @@
11
import { usesReferences, getReferences } from 'style-dictionary/utils';
2-
import { isReference } from '../../utils.js';
2+
import { excludedNameParts, isReference } from '../../utils.js';
33

44
const tokenToGrommetRef = (value: string): string => {
5-
const temp: string[] = value.slice(1, -1).split('.');
5+
const temp: string[] = value
6+
.slice(1, -1)
7+
.split('.')
8+
.filter(part => !excludedNameParts.includes(part));
69
temp.shift();
710
return temp.join('-');
811
};

‎design-tokens/src/formats/utils/jsonToNestedValue.ts

Lines changed: 25 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,34 @@
1+
import { excludedNameParts } from '../../utils.js';
2+
13
export const jsonToNestedValue = (
24
token: string | { [key: string]: any } | undefined,
3-
) => {
5+
keyPath: string[] = [],
6+
): any => {
47
if (!token || typeof token !== 'object') return token;
58
if ('$value' in token) return token.$value;
69
const nextObj: { [key: string]: any } = {};
710
Object.entries(token).forEach(([key, value]) => {
8-
nextObj[key] = jsonToNestedValue(value);
11+
if (keyPath.length > 2 && keyPath.includes('color')) {
12+
if (typeof value === 'object' && value !== null) {
13+
const result = jsonToNestedValue(value, [...keyPath, key]);
14+
if (typeof result === 'string') {
15+
nextObj[keyPath.concat(key).join('-')] = result;
16+
} else {
17+
Object.entries(result).forEach(([nestedKey, nestedValue]) => {
18+
nextObj[nestedKey] = nestedValue;
19+
});
20+
}
21+
} else {
22+
const flatName = keyPath
23+
.concat(key)
24+
.slice(3) // TO DO make dynamic (removing hpe, color, category (background, text, icon, ...))
25+
.filter(part => !excludedNameParts.includes(part))
26+
.join('-');
27+
nextObj[flatName] = value;
28+
}
29+
} else {
30+
nextObj[key] = jsonToNestedValue(value, [...keyPath, key]);
31+
}
932
});
1033

1134
return nextObj;

‎design-tokens/src/scripts/build-style-dictionary.js

Lines changed: 98 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import { getThemeAndMode, numberToPixel } from '../utils.ts';
55

66
const TOKENS_DIR = 'tokens';
77
const ESM_DIR = 'dist/esm/';
8+
const GROMMET_DIR = 'dist/grommet/';
89
const CJS_DIR = 'dist/cjs/';
910
const CSS_DIR = 'dist/css/';
1011
const DOCS_DIR = 'dist/docs/';
@@ -21,8 +22,19 @@ try {
2122
extendedDictionary = await HPEStyleDictionary.extend({
2223
source: [`${TOKENS_DIR}/primitive/primitives.base.json`],
2324
platforms: {
24-
js: {
25+
grommet: {
2526
transformGroup: 'js/w3c',
27+
buildPath: GROMMET_DIR,
28+
prefix: PREFIX,
29+
files: [
30+
{
31+
destination: 'base.js',
32+
format: 'javascript/esm',
33+
},
34+
],
35+
},
36+
js: {
37+
transformGroup: 'js/css',
2638
buildPath: ESM_DIR,
2739
prefix: PREFIX,
2840
files: [
@@ -33,7 +45,7 @@ try {
3345
],
3446
},
3547
'js/cjs': {
36-
transformGroup: 'js/w3c',
48+
transformGroup: 'js/css',
3749
buildPath: CJS_DIR,
3850
prefix: PREFIX,
3951
files: [
@@ -81,8 +93,21 @@ try {
8193
`${TOKENS_DIR}/semantic/global.default.json`,
8294
],
8395
platforms: {
84-
js: {
96+
grommet: {
8597
transformGroup: 'js/w3c',
98+
buildPath: GROMMET_DIR,
99+
prefix: PREFIX,
100+
files: [
101+
{
102+
destination: 'global.js',
103+
format: 'esmGrommetRefs',
104+
filter: token =>
105+
token.filePath === `${TOKENS_DIR}/semantic/global.default.json`,
106+
},
107+
],
108+
},
109+
js: {
110+
transformGroup: 'js/css',
86111
buildPath: ESM_DIR,
87112
prefix: PREFIX,
88113
files: [
@@ -95,13 +120,13 @@ try {
95120
],
96121
},
97122
'js/cjs': {
98-
transformGroup: 'js/w3c',
123+
transformGroup: 'js/css',
99124
buildPath: CJS_DIR,
100125
prefix: PREFIX,
101126
files: [
102127
{
103128
destination: 'global.cjs',
104-
format: 'commonJsGrommetRefs',
129+
format: 'javascript/commonJs',
105130
filter: token =>
106131
token.filePath === `${TOKENS_DIR}/semantic/global.default.json`,
107132
},
@@ -163,8 +188,22 @@ try {
163188
extendedDictionary = await HPEStyleDictionary.extend({
164189
source: [`${TOKENS_DIR}/primitive/primitives.base.json`, file],
165190
platforms: {
166-
js: {
191+
grommet: {
167192
transformGroup: 'js/w3c',
193+
buildPath: GROMMET_DIR,
194+
prefix: PREFIX,
195+
files: [
196+
{
197+
destination: `color.${
198+
theme ? `${theme}-${mode}` : `${mode || ''}`
199+
}.js`,
200+
format: 'javascript/esm',
201+
filter: token => token.filePath === file,
202+
},
203+
],
204+
},
205+
js: {
206+
transformGroup: 'js/css',
168207
buildPath: ESM_DIR,
169208
prefix: PREFIX,
170209
files: [
@@ -178,7 +217,7 @@ try {
178217
],
179218
},
180219
'js/cjs': {
181-
transformGroup: 'js/w3c',
220+
transformGroup: 'js/css',
182221
buildPath: CJS_DIR,
183222
prefix: PREFIX,
184223
files: [
@@ -255,8 +294,20 @@ try {
255294
file,
256295
],
257296
platforms: {
258-
js: {
297+
grommet: {
259298
transformGroup: 'js/w3c',
299+
buildPath: GROMMET_DIR,
300+
prefix: PREFIX,
301+
files: [
302+
{
303+
destination: `dimension.${mode}.js`,
304+
format: 'javascript/esm',
305+
filter: token => token.filePath === file,
306+
},
307+
],
308+
},
309+
js: {
310+
transformGroup: 'js/css',
260311
buildPath: ESM_DIR,
261312
prefix: PREFIX,
262313
files: [
@@ -268,7 +319,7 @@ try {
268319
],
269320
},
270321
'js/cjs': {
271-
transformGroup: 'js/w3c',
322+
transformGroup: 'js/css',
272323
buildPath: CJS_DIR,
273324
prefix: PREFIX,
274325
files: [
@@ -280,7 +331,7 @@ try {
280331
],
281332
},
282333
css: {
283-
transformGroup: 'css',
334+
transformGroup: 'css/w3c',
284335
buildPath: CSS_DIR,
285336
prefix: PREFIX,
286337
files: [
@@ -335,8 +386,21 @@ try {
335386
`${TOKENS_DIR}/component/component.default.json`,
336387
],
337388
platforms: {
338-
js: {
389+
grommet: {
339390
transformGroup: 'js/w3c',
391+
buildPath: GROMMET_DIR,
392+
prefix: PREFIX,
393+
files: [
394+
{
395+
destination: 'components.default.js',
396+
filter: token =>
397+
token.filePath.includes(`${TOKENS_DIR}/component/`),
398+
format: 'esmGrommetRefs',
399+
},
400+
],
401+
},
402+
js: {
403+
transformGroup: 'js/css',
340404
buildPath: ESM_DIR,
341405
prefix: PREFIX,
342406
files: [
@@ -349,15 +413,15 @@ try {
349413
],
350414
},
351415
'js/cjs': {
352-
transformGroup: 'js/w3c',
416+
transformGroup: 'js/css',
353417
buildPath: CJS_DIR,
354418
prefix: PREFIX,
355419
files: [
356420
{
357421
destination: 'components.default.cjs',
358422
filter: token =>
359423
token.filePath.includes(`${TOKENS_DIR}/component/`),
360-
format: 'commonJsGrommetRefs',
424+
format: 'javascript/commonJs',
361425
},
362426
],
363427
},
@@ -445,6 +509,27 @@ fs.readdirSync(ESM_DIR)
445509
}
446510
});
447511

512+
/** -----------------------------------
513+
* Create Grommet index.js
514+
* ----------------------------------- */
515+
const grommetCollections = [];
516+
fs.readdirSync(GROMMET_DIR)
517+
.filter(file => file !== 'index.js')
518+
.forEach(file => {
519+
if (file.toLowerCase().endsWith('.js')) {
520+
const filename = file.replace('.js', '');
521+
const parts = filename.split('.');
522+
let mode = parts[1];
523+
// special case for base.js and components
524+
if (mode === 'default' || !mode) [mode] = parts;
525+
fs.appendFileSync(
526+
`${GROMMET_DIR}index.js`,
527+
`export { default as ${mode} } from './${filename}.js';\n`,
528+
);
529+
grommetCollections.push(mode);
530+
}
531+
});
532+
448533
/** -----------------------------------
449534
* Create docs index.js
450535
* ----------------------------------- */

0 commit comments

Comments
 (0)