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
grommet · Jan 15, 2025 · 2b30ef4 · 2b30ef4
1 parent c01e44a
commit 2b30ef4
Show file tree

Hide file tree

Showing 23 changed files with 2,672 additions and 1,796 deletions.
diff --git a/.changeset/rare-needles-kiss.md b/.changeset/rare-needles-kiss.md
@@ -0,0 +1,7 @@
+---
+"hpe-design-tokens": minor
+---
+
+- Added new export `hpe-design-tokens/grommet`.
+- Changed ESM/CommonJS exports to resolve to CSS variables rather than raw values.
+- Changed structure of "color" exports to flatten color name after the category (e.g., `hpe.color.background.selected.weak` --> `hpe.color.background['selected-weak']`).
diff --git a/design-tokens/package.json b/design-tokens/package.json
@@ -11,6 +11,7 @@
       "import": "./dist/esm/index.js",
       "require": "./dist/cjs/index.cjs"
     },
+    "./grommet": "./dist/grommet/index.js",
     "./docs": "./dist/docs/index.js",
     "./dist/css/*.css": {
       "import": "./dist/css/*.css",

diff --git a/design-tokens/src/HPEStyleDictionary.ts b/design-tokens/src/HPEStyleDictionary.ts
@@ -1,19 +1,22 @@
 import { StyleDictionary } from 'style-dictionary-utils';
 import {
   commonJs,
-  commonJsGrommetRefs,
   cssColorModes,
   cssBreakpoints,
   esmGrommetRefs,
   javascriptEsm,
   jsonFlat,
 } from './formats/index.js';
 import {
+  colorNameJs,
   cssW3c,
+  javascriptCss,
   javascriptW3c,
   linearGradientCss,
+  nameCSS,
   numberToDimension,
   shadowCSS,
+  valueToCssVar,
 } from './transforms/index.js';
 
 export const HPEStyleDictionary = new StyleDictionary({
@@ -42,14 +45,16 @@ HPEStyleDictionary.registerFormat({
   name: `esmGrommetRefs`,
   format: esmGrommetRefs,
 });
-HPEStyleDictionary.registerFormat({
-  name: `commonJsGrommetRefs`,
-  format: commonJsGrommetRefs,
-});
 HPEStyleDictionary.registerFormat({
   name: `jsonFlat`,
   format: jsonFlat,
 });
+HPEStyleDictionary.registerTransform({
+  ...colorNameJs,
+});
+HPEStyleDictionary.registerTransform({
+  ...nameCSS,
+});
 HPEStyleDictionary.registerTransform({
   ...numberToDimension,
 });
@@ -66,6 +71,13 @@ HPEStyleDictionary.registerTransform({
 HPEStyleDictionary.registerTransform({
   ...linearGradientCss,
 });
+HPEStyleDictionary.registerTransform({
+  ...valueToCssVar,
+});
+HPEStyleDictionary.registerTransformGroup({
+  name: 'js/css',
+  transforms: javascriptCss,
+});
 HPEStyleDictionary.registerTransformGroup({
   name: 'js/w3c',
   transforms: javascriptW3c,

diff --git a/design-tokens/src/formats/commonJsGrommetRefs.ts b/design-tokens/src/formats/commonJsGrommetRefs.ts
diff --git a/design-tokens/src/formats/index.ts b/design-tokens/src/formats/index.ts
@@ -1,5 +1,4 @@
 export { commonJs } from './commonJs.js';
-export { commonJsGrommetRefs } from './commonJsGrommetRefs.js';
 export { cssColorModes } from './cssColorModes.js';
 export { cssBreakpoints } from './cssBreakpoints.js';
 export { esmGrommetRefs } from './esmGrommetRefs.js';

diff --git a/design-tokens/src/formats/utils/getGrommetValue.ts b/design-tokens/src/formats/utils/getGrommetValue.ts
@@ -1,8 +1,11 @@
 import { usesReferences, getReferences } from 'style-dictionary/utils';
-import { isReference } from '../../utils.js';
+import { excludedNameParts, isReference } from '../../utils.js';
 
 const tokenToGrommetRef = (value: string): string => {
-  const temp: string[] = value.slice(1, -1).split('.');
+  const temp: string[] = value
+    .slice(1, -1)
+    .split('.')
+    .filter(part => !excludedNameParts.includes(part));
   temp.shift();
   return temp.join('-');
 };

diff --git a/design-tokens/src/formats/utils/jsonToNestedValue.ts b/design-tokens/src/formats/utils/jsonToNestedValue.ts
@@ -1,11 +1,34 @@
+import { excludedNameParts } from '../../utils.js';
+
 export const jsonToNestedValue = (
   token: string | { [key: string]: any } | undefined,
-) => {
+  keyPath: string[] = [],
+): any => {
   if (!token || typeof token !== 'object') return token;
   if ('$value' in token) return token.$value;
   const nextObj: { [key: string]: any } = {};
   Object.entries(token).forEach(([key, value]) => {
-    nextObj[key] = jsonToNestedValue(value);
+    if (keyPath.length > 2 && keyPath.includes('color')) {
+      if (typeof value === 'object' && value !== null) {
+        const result = jsonToNestedValue(value, [...keyPath, key]);
+        if (typeof result === 'string') {
+          nextObj[keyPath.concat(key).join('-')] = result;
+        } else {
+          Object.entries(result).forEach(([nestedKey, nestedValue]) => {
+            nextObj[nestedKey] = nestedValue;
+          });
+        }
+      } else {
+        const flatName = keyPath
+          .concat(key)
+          .slice(3) // TO DO make dynamic (removing hpe, color, category (background, text, icon, ...))
+          .filter(part => !excludedNameParts.includes(part))
+          .join('-');
+        nextObj[flatName] = value;
+      }
+    } else {
+      nextObj[key] = jsonToNestedValue(value, [...keyPath, key]);
+    }
   });
 
   return nextObj;

diff --git a/design-tokens/src/scripts/build-style-dictionary.js b/design-tokens/src/scripts/build-style-dictionary.js
@@ -5,6 +5,7 @@ import { getThemeAndMode, numberToPixel } from '../utils.ts';
 
 const TOKENS_DIR = 'tokens';
 const ESM_DIR = 'dist/esm/';
+const GROMMET_DIR = 'dist/grommet/';
 const CJS_DIR = 'dist/cjs/';
 const CSS_DIR = 'dist/css/';
 const DOCS_DIR = 'dist/docs/';
@@ -21,8 +22,19 @@ try {
   extendedDictionary = await HPEStyleDictionary.extend({
     source: [`${TOKENS_DIR}/primitive/primitives.base.json`],
     platforms: {
-      js: {
+      grommet: {
         transformGroup: 'js/w3c',
+        buildPath: GROMMET_DIR,
+        prefix: PREFIX,
+        files: [
+          {
+            destination: 'base.js',
+            format: 'javascript/esm',
+          },
+        ],
+      },
+      js: {
+        transformGroup: 'js/css',
         buildPath: ESM_DIR,
         prefix: PREFIX,
         files: [
@@ -33,7 +45,7 @@ try {
         ],
       },
       'js/cjs': {
-        transformGroup: 'js/w3c',
+        transformGroup: 'js/css',
         buildPath: CJS_DIR,
         prefix: PREFIX,
         files: [
@@ -81,8 +93,21 @@ try {
       `${TOKENS_DIR}/semantic/global.default.json`,
     ],
     platforms: {
-      js: {
+      grommet: {
         transformGroup: 'js/w3c',
+        buildPath: GROMMET_DIR,
+        prefix: PREFIX,
+        files: [
+          {
+            destination: 'global.js',
+            format: 'esmGrommetRefs',
+            filter: token =>
+              token.filePath === `${TOKENS_DIR}/semantic/global.default.json`,
+          },
+        ],
+      },
+      js: {
+        transformGroup: 'js/css',
         buildPath: ESM_DIR,
         prefix: PREFIX,
         files: [
@@ -95,13 +120,13 @@ try {
         ],
       },
       'js/cjs': {
-        transformGroup: 'js/w3c',
+        transformGroup: 'js/css',
         buildPath: CJS_DIR,
         prefix: PREFIX,
         files: [
           {
             destination: 'global.cjs',
-            format: 'commonJsGrommetRefs',
+            format: 'javascript/commonJs',
             filter: token =>
               token.filePath === `${TOKENS_DIR}/semantic/global.default.json`,
           },
@@ -163,8 +188,22 @@ try {
     extendedDictionary = await HPEStyleDictionary.extend({
       source: [`${TOKENS_DIR}/primitive/primitives.base.json`, file],
       platforms: {
-        js: {
+        grommet: {
           transformGroup: 'js/w3c',
+          buildPath: GROMMET_DIR,
+          prefix: PREFIX,
+          files: [
+            {
+              destination: `color.${
+                theme ? `${theme}-${mode}` : `${mode || ''}`
+              }.js`,
+              format: 'javascript/esm',
+              filter: token => token.filePath === file,
+            },
+          ],
+        },
+        js: {
+          transformGroup: 'js/css',
           buildPath: ESM_DIR,
           prefix: PREFIX,
           files: [
@@ -178,7 +217,7 @@ try {
           ],
         },
         'js/cjs': {
-          transformGroup: 'js/w3c',
+          transformGroup: 'js/css',
           buildPath: CJS_DIR,
           prefix: PREFIX,
           files: [
@@ -255,8 +294,20 @@ try {
         file,
       ],
       platforms: {
-        js: {
+        grommet: {
           transformGroup: 'js/w3c',
+          buildPath: GROMMET_DIR,
+          prefix: PREFIX,
+          files: [
+            {
+              destination: `dimension.${mode}.js`,
+              format: 'javascript/esm',
+              filter: token => token.filePath === file,
+            },
+          ],
+        },
+        js: {
+          transformGroup: 'js/css',
           buildPath: ESM_DIR,
           prefix: PREFIX,
           files: [
@@ -268,7 +319,7 @@ try {
           ],
         },
         'js/cjs': {
-          transformGroup: 'js/w3c',
+          transformGroup: 'js/css',
           buildPath: CJS_DIR,
           prefix: PREFIX,
           files: [
@@ -280,7 +331,7 @@ try {
           ],
         },
         css: {
-          transformGroup: 'css',
+          transformGroup: 'css/w3c',
           buildPath: CSS_DIR,
           prefix: PREFIX,
           files: [
@@ -335,8 +386,21 @@ try {
       `${TOKENS_DIR}/component/component.default.json`,
     ],
     platforms: {
-      js: {
+      grommet: {
         transformGroup: 'js/w3c',
+        buildPath: GROMMET_DIR,
+        prefix: PREFIX,
+        files: [
+          {
+            destination: 'components.default.js',
+            filter: token =>
+              token.filePath.includes(`${TOKENS_DIR}/component/`),
+            format: 'esmGrommetRefs',
+          },
+        ],
+      },
+      js: {
+        transformGroup: 'js/css',
         buildPath: ESM_DIR,
         prefix: PREFIX,
         files: [
@@ -349,15 +413,15 @@ try {
         ],
       },
       'js/cjs': {
-        transformGroup: 'js/w3c',
+        transformGroup: 'js/css',
         buildPath: CJS_DIR,
         prefix: PREFIX,
         files: [
           {
             destination: 'components.default.cjs',
             filter: token =>
               token.filePath.includes(`${TOKENS_DIR}/component/`),
-            format: 'commonJsGrommetRefs',
+            format: 'javascript/commonJs',
           },
         ],
       },
@@ -445,6 +509,27 @@ fs.readdirSync(ESM_DIR)
     }
   });
 
+/** -----------------------------------
+ * Create Grommet index.js
+ * ----------------------------------- */
+const grommetCollections = [];
+fs.readdirSync(GROMMET_DIR)
+  .filter(file => file !== 'index.js')
+  .forEach(file => {
+    if (file.toLowerCase().endsWith('.js')) {
+      const filename = file.replace('.js', '');
+      const parts = filename.split('.');
+      let mode = parts[1];
+      // special case for base.js and components
+      if (mode === 'default' || !mode) [mode] = parts;
+      fs.appendFileSync(
+        `${GROMMET_DIR}index.js`,
+        `export { default as ${mode} } from './${filename}.js';\n`,
+      );
+      grommetCollections.push(mode);
+    }
+  });
+
 /** -----------------------------------
  * Create docs index.js
  * ----------------------------------- */