Skip to content

Commit 66ca9da

Browse files
tayseataysea
authored
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
1 parent 041b2ae commit 66ca9da

File tree

6 files changed

+50
-47
lines changed

6 files changed

+50
-47
lines changed

‎.changeset/cuddly-elephants-happen.md

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
---
2+
"hpe-design-tokens": minor
3+
---
4+
5+
- Renamed exports from "base" to "primitives" (e.g., "base.css" --> "primitives.css").
6+
- Removed "default" from CJS/ESM component token exports (e.g., "components.default.cjs" --> "components.js"). No effect on import.
7+
- 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").

‎aries-site/src/pages/design-tokens/all-design-tokens.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -32,14 +32,14 @@ const structuredTokens = {
3232
};
3333

3434
Object.keys(tokens).forEach(mode => {
35-
// base, component, light, dark, etc.
35+
// primitives, component, light, dark, etc.
3636
Object.keys(tokens[mode]).forEach(token => {
3737
const currentToken = tokens[mode][token];
3838

3939
const parts = token.split('.');
4040
const category = parts[1];
4141
let level;
42-
if (mode === 'base') level = 'primitive';
42+
if (mode === 'primitives') level = 'primitive';
4343
else if (mode === 'components') level = 'component';
4444
else level = 'semantic';
4545

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

+17-21
Original file line numberDiff line numberDiff line change
@@ -20,15 +20,15 @@ let extendedDictionary = HPEStyleDictionary;
2020
* ----------------------------------- */
2121
try {
2222
extendedDictionary = await HPEStyleDictionary.extend({
23-
source: [`${TOKENS_DIR}/primitive/primitives.base.json`],
23+
source: [`${TOKENS_DIR}/primitive/primitives.default.json`],
2424
platforms: {
2525
grommet: {
2626
transformGroup: 'js/w3c',
2727
buildPath: GROMMET_DIR,
2828
prefix: PREFIX,
2929
files: [
3030
{
31-
destination: 'base.js',
31+
destination: 'primitives.js',
3232
format: 'javascript/esm',
3333
},
3434
],
@@ -39,7 +39,7 @@ try {
3939
prefix: PREFIX,
4040
files: [
4141
{
42-
destination: 'base.js',
42+
destination: 'primitives.js',
4343
format: 'javascript/esm',
4444
},
4545
],
@@ -50,7 +50,7 @@ try {
5050
prefix: PREFIX,
5151
files: [
5252
{
53-
destination: 'base.cjs',
53+
destination: 'primitives.cjs',
5454
format: 'javascript/commonJs',
5555
},
5656
],
@@ -61,7 +61,7 @@ try {
6161
prefix: PREFIX,
6262
files: [
6363
{
64-
destination: 'base.css',
64+
destination: 'primitives.css',
6565
format: 'css/variables',
6666
options: {
6767
outputReferences: true,
@@ -73,7 +73,7 @@ try {
7373
transformGroup: 'js/w3c',
7474
buildPath: DOCS_DIR,
7575
prefix: PREFIX,
76-
files: [{ destination: 'base.js', format: 'jsonFlat' }],
76+
files: [{ destination: 'primitives.js', format: 'jsonFlat' }],
7777
},
7878
},
7979
});
@@ -88,7 +88,7 @@ try {
8888
try {
8989
extendedDictionary = await HPEStyleDictionary.extend({
9090
source: [
91-
`${TOKENS_DIR}/primitive/primitives.base.json`,
91+
`${TOKENS_DIR}/primitive/primitives.default.json`,
9292
`${TOKENS_DIR}/semantic/color.light.json`, // using light mode to have a reference name available
9393
`${TOKENS_DIR}/semantic/global.default.json`,
9494
],
@@ -186,7 +186,7 @@ try {
186186
colorModeFiles.forEach(async file => {
187187
const [theme, mode] = getThemeAndMode(file);
188188
extendedDictionary = await HPEStyleDictionary.extend({
189-
source: [`${TOKENS_DIR}/primitive/primitives.base.json`, file],
189+
source: [`${TOKENS_DIR}/primitive/primitives.default.json`, file],
190190
platforms: {
191191
grommet: {
192192
transformGroup: 'js/w3c',
@@ -208,9 +208,7 @@ try {
208208
prefix: PREFIX,
209209
files: [
210210
{
211-
destination: `color.${
212-
theme ? `${theme}-${mode}` : `${mode || ''}`
213-
}.js`,
211+
destination: 'color.js',
214212
format: 'javascript/esm',
215213
filter: token => token.filePath === file,
216214
},
@@ -222,9 +220,7 @@ try {
222220
prefix: PREFIX,
223221
files: [
224222
{
225-
destination: `color.${
226-
theme ? `${theme}-${mode}` : `${mode || ''}`
227-
}.cjs`,
223+
destination: 'color.cjs',
228224
format: 'javascript/commonJs',
229225
filter: token => token.filePath === file,
230226
},
@@ -288,7 +284,7 @@ try {
288284
const mode = res[1];
289285
extendedDictionary = await HPEStyleDictionary.extend({
290286
source: [
291-
`${TOKENS_DIR}/primitive/primitives.base.json`,
287+
`${TOKENS_DIR}/primitive/primitives.default.json`,
292288
`${TOKENS_DIR}/semantic/color.light.json`,
293289
`${TOKENS_DIR}/semantic/global.default.json`,
294290
file,
@@ -312,7 +308,7 @@ try {
312308
prefix: PREFIX,
313309
files: [
314310
{
315-
destination: `dimension.${mode}.js`,
311+
destination: 'dimension.js',
316312
format: 'javascript/esm',
317313
filter: token => token.filePath === file,
318314
},
@@ -324,7 +320,7 @@ try {
324320
prefix: PREFIX,
325321
files: [
326322
{
327-
destination: `dimension.${mode}.cjs`,
323+
destination: 'dimension.cjs',
328324
format: 'javascript/commonJs',
329325
filter: token => token.filePath === file,
330326
},
@@ -378,7 +374,7 @@ try {
378374
try {
379375
extendedDictionary = await HPEStyleDictionary.extend({
380376
source: [
381-
`${TOKENS_DIR}/primitive/primitives.base.json`,
377+
`${TOKENS_DIR}/primitive/primitives.default.json`,
382378
`${TOKENS_DIR}/semantic/global.default.json`,
383379
`${TOKENS_DIR}/semantic/color.light.json`, // using light mode to have a reference name available
384380
`${TOKENS_DIR}/semantic/dimension.medium.json`, // using medium mode to have a reference name available
@@ -392,7 +388,7 @@ try {
392388
prefix: PREFIX,
393389
files: [
394390
{
395-
destination: 'components.default.js',
391+
destination: 'components.js',
396392
filter: token =>
397393
token.filePath.includes(`${TOKENS_DIR}/component/`),
398394
format: 'esmGrommetRefs',
@@ -405,7 +401,7 @@ try {
405401
prefix: PREFIX,
406402
files: [
407403
{
408-
destination: 'components.default.js',
404+
destination: 'components.js',
409405
filter: token =>
410406
token.filePath.includes(`${TOKENS_DIR}/component/`),
411407
format: 'esmGrommetRefs',
@@ -418,7 +414,7 @@ try {
418414
prefix: PREFIX,
419415
files: [
420416
{
421-
destination: 'components.default.cjs',
417+
destination: 'components.cjs',
422418
filter: token =>
423419
token.filePath.includes(`${TOKENS_DIR}/component/`),
424420
format: 'javascript/commonJs',

‎design-tokens/tokens/primitive/primitives.base.json renamed to ‎design-tokens/tokens/primitive/primitives.default.json

File renamed without changes.

‎design-tokens/tokens/semantic/color.dark.json

+12-12
Original file line numberDiff line numberDiff line change
@@ -137,12 +137,12 @@
137137
}
138138
}
139139
},
140-
"ok": {
140+
"info": {
141141
"DEFAULT": {
142142
"REST": {
143143
"$type": "color",
144-
"$value": "{base.color.green.500-Opacity30}",
145-
"$description": "Use for backgrounds communicating success.",
144+
"$value": "{base.color.blue.400-Opacity12}",
145+
"$description": "Use for backgrounds communicating neutral information.",
146146
"$extensions": {
147147
"com.figma": {
148148
"hiddenFromPublishing": false,
@@ -153,12 +153,12 @@
153153
}
154154
}
155155
},
156-
"critical": {
156+
"unknown": {
157157
"DEFAULT": {
158158
"REST": {
159159
"$type": "color",
160-
"$value": "{base.color.red.800-Opacity30}",
161-
"$description": "Use for backgrounds communicating errors or danger.",
160+
"$value": "{base.color.white.opacity6}",
161+
"$description": "Use for backgrounds communicating an unknown status.",
162162
"$extensions": {
163163
"com.figma": {
164164
"hiddenFromPublishing": false,
@@ -169,12 +169,12 @@
169169
}
170170
}
171171
},
172-
"unknown": {
172+
"critical": {
173173
"DEFAULT": {
174174
"REST": {
175175
"$type": "color",
176-
"$value": "{base.color.white.opacity6}",
177-
"$description": "Use for backgrounds communicating an unknown status.",
176+
"$value": "{base.color.red.800-Opacity30}",
177+
"$description": "Use for backgrounds communicating errors or danger.",
178178
"$extensions": {
179179
"com.figma": {
180180
"hiddenFromPublishing": false,
@@ -185,12 +185,12 @@
185185
}
186186
}
187187
},
188-
"info": {
188+
"ok": {
189189
"DEFAULT": {
190190
"REST": {
191191
"$type": "color",
192-
"$value": "{base.color.blue.400-Opacity12}",
193-
"$description": "Use for backgrounds communicating neutral information.",
192+
"$value": "{base.color.green.500-Opacity30}",
193+
"$description": "Use for backgrounds communicating success.",
194194
"$extensions": {
195195
"com.figma": {
196196
"hiddenFromPublishing": false,

‎design-tokens/tokens/semantic/color.light.json

+12-12
Original file line numberDiff line numberDiff line change
@@ -137,12 +137,12 @@
137137
}
138138
}
139139
},
140-
"ok": {
140+
"info": {
141141
"DEFAULT": {
142142
"REST": {
143143
"$type": "color",
144-
"$value": "{base.color.green.400-Opacity24}",
145-
"$description": "Use for backgrounds communicating success.",
144+
"$value": "{base.color.blue.400-Opacity24}",
145+
"$description": "Use for backgrounds communicating neutral information.",
146146
"$extensions": {
147147
"com.figma": {
148148
"hiddenFromPublishing": false,
@@ -153,12 +153,12 @@
153153
}
154154
}
155155
},
156-
"critical": {
156+
"unknown": {
157157
"DEFAULT": {
158158
"REST": {
159159
"$type": "color",
160-
"$value": "{base.color.red.500-Opacity24}",
161-
"$description": "Use for backgrounds communicating errors or danger.",
160+
"$value": "{base.color.black.opacity4}",
161+
"$description": "Use for backgrounds communicating an unknown status.",
162162
"$extensions": {
163163
"com.figma": {
164164
"hiddenFromPublishing": false,
@@ -169,12 +169,12 @@
169169
}
170170
}
171171
},
172-
"unknown": {
172+
"critical": {
173173
"DEFAULT": {
174174
"REST": {
175175
"$type": "color",
176-
"$value": "{base.color.black.opacity4}",
177-
"$description": "Use for backgrounds communicating an unknown status.",
176+
"$value": "{base.color.red.500-Opacity24}",
177+
"$description": "Use for backgrounds communicating errors or danger.",
178178
"$extensions": {
179179
"com.figma": {
180180
"hiddenFromPublishing": false,
@@ -185,12 +185,12 @@
185185
}
186186
}
187187
},
188-
"info": {
188+
"ok": {
189189
"DEFAULT": {
190190
"REST": {
191191
"$type": "color",
192-
"$value": "{base.color.blue.400-Opacity24}",
193-
"$description": "Use for backgrounds communicating neutral information.",
192+
"$value": "{base.color.green.400-Opacity24}",
193+
"$description": "Use for backgrounds communicating success.",
194194
"$extensions": {
195195
"com.figma": {
196196
"hiddenFromPublishing": false,

0 commit comments

Comments
 (0)