diff --git a/.changeset/cuddly-elephants-happen.md b/.changeset/cuddly-elephants-happen.md new file mode 100644 index 000000000..126c1500d --- /dev/null +++ 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 index 81fd412b9..cd0261c41 100644 --- 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 index 3102eb9e1..ed2fc70ec 100644 --- a/design-tokens/src/scripts/build-style-dictionary.js +++ b/design-tokens/src/scripts/build-style-dictionary.js @@ -20,7 +20,7 @@ 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', @@ -28,7 +28,7 @@ try { 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/design-tokens/tokens/primitive/primitives.base.json b/design-tokens/tokens/primitive/primitives.default.json similarity index 100% rename from design-tokens/tokens/primitive/primitives.base.json rename to design-tokens/tokens/primitive/primitives.default.json diff --git a/design-tokens/tokens/semantic/color.dark.json b/design-tokens/tokens/semantic/color.dark.json index b55d480c5..382633872 100644 --- 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 index 46602018f..a17e25f17 100644 --- 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,