Standardize package file name exports (#4700)

* Pull in updated color names * Create good-gorillas-suffer.md * Rename primitive mode from base to default, update file exports from base to primitives * Remove default from component file export names * Remove unneeded modes for color and dimension ESM/CommonJS exports * Create cuddly-elephants-happen.md
grommet · Jan 17, 2025 · 66ca9da · 66ca9da
1 parent 041b2ae
commit 66ca9da
Show file tree

Hide file tree

Showing 6 changed files with 50 additions and 47 deletions.
diff --git a/.changeset/cuddly-elephants-happen.md b/.changeset/cuddly-elephants-happen.md
@@ -0,0 +1,7 @@
+---
+"hpe-design-tokens": minor
+---
+
+- Renamed exports from "base" to "primitives" (e.g., "base.css" --> "primitives.css").
+- Removed "default" from CJS/ESM component token exports (e.g., "components.default.cjs" --> "components.js"). No effect on import.
+- Removed light/dark, medium/small modes from ESM/CommonJS exports. Because these now return CSS variable refs, we don't need separate mode exports. (e.g., "color.light.js" --> "color.js").
diff --git a/aries-site/src/pages/design-tokens/all-design-tokens.js b/aries-site/src/pages/design-tokens/all-design-tokens.js
@@ -32,14 +32,14 @@ const structuredTokens = {
 };
 
 Object.keys(tokens).forEach(mode => {
-  // base, component, light, dark, etc.
+  // primitives, component, light, dark, etc.
   Object.keys(tokens[mode]).forEach(token => {
     const currentToken = tokens[mode][token];
 
     const parts = token.split('.');
     const category = parts[1];
     let level;
-    if (mode === 'base') level = 'primitive';
+    if (mode === 'primitives') level = 'primitive';
     else if (mode === 'components') level = 'component';
     else level = 'semantic';
 

diff --git a/design-tokens/src/scripts/build-style-dictionary.js b/design-tokens/src/scripts/build-style-dictionary.js
@@ -20,15 +20,15 @@ let extendedDictionary = HPEStyleDictionary;
  * ----------------------------------- */
 try {
   extendedDictionary = await HPEStyleDictionary.extend({
-    source: [`${TOKENS_DIR}/primitive/primitives.base.json`],
+    source: [`${TOKENS_DIR}/primitive/primitives.default.json`],
     platforms: {
       grommet: {
         transformGroup: 'js/w3c',
         buildPath: GROMMET_DIR,
         prefix: PREFIX,
         files: [
           {
-            destination: 'base.js',
+            destination: 'primitives.js',
             format: 'javascript/esm',
           },
         ],
@@ -39,7 +39,7 @@ try {
         prefix: PREFIX,
         files: [
           {
-            destination: 'base.js',
+            destination: 'primitives.js',
             format: 'javascript/esm',
           },
         ],
@@ -50,7 +50,7 @@ try {
         prefix: PREFIX,
         files: [
           {
-            destination: 'base.cjs',
+            destination: 'primitives.cjs',
             format: 'javascript/commonJs',
           },
         ],
@@ -61,7 +61,7 @@ try {
         prefix: PREFIX,
         files: [
           {
-            destination: 'base.css',
+            destination: 'primitives.css',
             format: 'css/variables',
             options: {
               outputReferences: true,
@@ -73,7 +73,7 @@ try {
         transformGroup: 'js/w3c',
         buildPath: DOCS_DIR,
         prefix: PREFIX,
-        files: [{ destination: 'base.js', format: 'jsonFlat' }],
+        files: [{ destination: 'primitives.js', format: 'jsonFlat' }],
       },
     },
   });
@@ -88,7 +88,7 @@ try {
 try {
   extendedDictionary = await HPEStyleDictionary.extend({
     source: [
-      `${TOKENS_DIR}/primitive/primitives.base.json`,
+      `${TOKENS_DIR}/primitive/primitives.default.json`,
       `${TOKENS_DIR}/semantic/color.light.json`, // using light mode to have a reference name available
       `${TOKENS_DIR}/semantic/global.default.json`,
     ],
@@ -186,7 +186,7 @@ try {
   colorModeFiles.forEach(async file => {
     const [theme, mode] = getThemeAndMode(file);
     extendedDictionary = await HPEStyleDictionary.extend({
-      source: [`${TOKENS_DIR}/primitive/primitives.base.json`, file],
+      source: [`${TOKENS_DIR}/primitive/primitives.default.json`, file],
       platforms: {
         grommet: {
           transformGroup: 'js/w3c',
@@ -208,9 +208,7 @@ try {
           prefix: PREFIX,
           files: [
             {
-              destination: `color.${
-                theme ? `${theme}-${mode}` : `${mode || ''}`
-              }.js`,
+              destination: 'color.js',
               format: 'javascript/esm',
               filter: token => token.filePath === file,
             },
@@ -222,9 +220,7 @@ try {
           prefix: PREFIX,
           files: [
             {
-              destination: `color.${
-                theme ? `${theme}-${mode}` : `${mode || ''}`
-              }.cjs`,
+              destination: 'color.cjs',
               format: 'javascript/commonJs',
               filter: token => token.filePath === file,
             },
@@ -288,7 +284,7 @@ try {
     const mode = res[1];
     extendedDictionary = await HPEStyleDictionary.extend({
       source: [
-        `${TOKENS_DIR}/primitive/primitives.base.json`,
+        `${TOKENS_DIR}/primitive/primitives.default.json`,
         `${TOKENS_DIR}/semantic/color.light.json`,
         `${TOKENS_DIR}/semantic/global.default.json`,
         file,
@@ -312,7 +308,7 @@ try {
           prefix: PREFIX,
           files: [
             {
-              destination: `dimension.${mode}.js`,
+              destination: 'dimension.js',
               format: 'javascript/esm',
               filter: token => token.filePath === file,
             },
@@ -324,7 +320,7 @@ try {
           prefix: PREFIX,
           files: [
             {
-              destination: `dimension.${mode}.cjs`,
+              destination: 'dimension.cjs',
               format: 'javascript/commonJs',
               filter: token => token.filePath === file,
             },
@@ -378,7 +374,7 @@ try {
 try {
   extendedDictionary = await HPEStyleDictionary.extend({
     source: [
-      `${TOKENS_DIR}/primitive/primitives.base.json`,
+      `${TOKENS_DIR}/primitive/primitives.default.json`,
       `${TOKENS_DIR}/semantic/global.default.json`,
       `${TOKENS_DIR}/semantic/color.light.json`, // using light mode to have a reference name available
       `${TOKENS_DIR}/semantic/dimension.medium.json`, // using medium mode to have a reference name available
@@ -392,7 +388,7 @@ try {
         prefix: PREFIX,
         files: [
           {
-            destination: 'components.default.js',
+            destination: 'components.js',
             filter: token =>
               token.filePath.includes(`${TOKENS_DIR}/component/`),
             format: 'esmGrommetRefs',
@@ -405,7 +401,7 @@ try {
         prefix: PREFIX,
         files: [
           {
-            destination: 'components.default.js',
+            destination: 'components.js',
             filter: token =>
               token.filePath.includes(`${TOKENS_DIR}/component/`),
             format: 'esmGrommetRefs',
@@ -418,7 +414,7 @@ try {
         prefix: PREFIX,
         files: [
           {
-            destination: 'components.default.cjs',
+            destination: 'components.cjs',
             filter: token =>
               token.filePath.includes(`${TOKENS_DIR}/component/`),
             format: 'javascript/commonJs',

diff --git a/...ens/tokens/primitive/primitives.base.json → .../tokens/primitive/primitives.default.json b/...ens/tokens/primitive/primitives.base.json → .../tokens/primitive/primitives.default.json
diff --git a/design-tokens/tokens/semantic/color.dark.json b/design-tokens/tokens/semantic/color.dark.json
@@ -137,12 +137,12 @@
           }
         }
       },
-      "ok": {
+      "info": {
         "DEFAULT": {
           "REST": {
             "$type": "color",
-            "$value": "{base.color.green.500-Opacity30}",
-            "$description": "Use for backgrounds communicating success.",
+            "$value": "{base.color.blue.400-Opacity12}",
+            "$description": "Use for backgrounds communicating neutral information.",
             "$extensions": {
               "com.figma": {
                 "hiddenFromPublishing": false,
@@ -153,12 +153,12 @@
           }
         }
       },
-      "critical": {
+      "unknown": {
         "DEFAULT": {
           "REST": {
             "$type": "color",
-            "$value": "{base.color.red.800-Opacity30}",
-            "$description": "Use for backgrounds communicating errors or danger.",
+            "$value": "{base.color.white.opacity6}",
+            "$description": "Use for backgrounds communicating an unknown status.",
             "$extensions": {
               "com.figma": {
                 "hiddenFromPublishing": false,
@@ -169,12 +169,12 @@
           }
         }
       },
-      "unknown": {
+      "critical": {
         "DEFAULT": {
           "REST": {
             "$type": "color",
-            "$value": "{base.color.white.opacity6}",
-            "$description": "Use for backgrounds communicating an unknown status.",
+            "$value": "{base.color.red.800-Opacity30}",
+            "$description": "Use for backgrounds communicating errors or danger.",
             "$extensions": {
               "com.figma": {
                 "hiddenFromPublishing": false,
@@ -185,12 +185,12 @@
           }
         }
       },
-      "info": {
+      "ok": {
         "DEFAULT": {
           "REST": {
             "$type": "color",
-            "$value": "{base.color.blue.400-Opacity12}",
-            "$description": "Use for backgrounds communicating neutral information.",
+            "$value": "{base.color.green.500-Opacity30}",
+            "$description": "Use for backgrounds communicating success.",
             "$extensions": {
               "com.figma": {
                 "hiddenFromPublishing": false,

diff --git a/design-tokens/tokens/semantic/color.light.json b/design-tokens/tokens/semantic/color.light.json
@@ -137,12 +137,12 @@
           }
         }
       },
-      "ok": {
+      "info": {
         "DEFAULT": {
           "REST": {
             "$type": "color",
-            "$value": "{base.color.green.400-Opacity24}",
-            "$description": "Use for backgrounds communicating success.",
+            "$value": "{base.color.blue.400-Opacity24}",
+            "$description": "Use for backgrounds communicating neutral information.",
             "$extensions": {
               "com.figma": {
                 "hiddenFromPublishing": false,
@@ -153,12 +153,12 @@
           }
         }
       },
-      "critical": {
+      "unknown": {
         "DEFAULT": {
           "REST": {
             "$type": "color",
-            "$value": "{base.color.red.500-Opacity24}",
-            "$description": "Use for backgrounds communicating errors or danger.",
+            "$value": "{base.color.black.opacity4}",
+            "$description": "Use for backgrounds communicating an unknown status.",
             "$extensions": {
               "com.figma": {
                 "hiddenFromPublishing": false,
@@ -169,12 +169,12 @@
           }
         }
       },
-      "unknown": {
+      "critical": {
         "DEFAULT": {
           "REST": {
             "$type": "color",
-            "$value": "{base.color.black.opacity4}",
-            "$description": "Use for backgrounds communicating an unknown status.",
+            "$value": "{base.color.red.500-Opacity24}",
+            "$description": "Use for backgrounds communicating errors or danger.",
             "$extensions": {
               "com.figma": {
                 "hiddenFromPublishing": false,
@@ -185,12 +185,12 @@
           }
         }
       },
-      "info": {
+      "ok": {
         "DEFAULT": {
           "REST": {
             "$type": "color",
-            "$value": "{base.color.blue.400-Opacity24}",
-            "$description": "Use for backgrounds communicating neutral information.",
+            "$value": "{base.color.green.400-Opacity24}",
+            "$description": "Use for backgrounds communicating success.",
             "$extensions": {
               "com.figma": {
                 "hiddenFromPublishing": false,