From f7befa84b48ab8877ea93de21f82f45de66ff973 Mon Sep 17 00:00:00 2001 From: taysea Date: Wed, 15 Jan 2025 15:07:31 -0800 Subject: [PATCH 01/13] Pull in updated color names --- .../tokens/component/component.default.json | 56 ++++---- design-tokens/tokens/semantic/color.dark.json | 126 ++++++++---------- .../tokens/semantic/color.light.json | 126 ++++++++---------- 3 files changed, 146 insertions(+), 162 deletions(-) diff --git a/design-tokens/tokens/component/component.default.json b/design-tokens/tokens/component/component.default.json index 85fc9c2c2..0ffe1fc2c 100644 --- a/design-tokens/tokens/component/component.default.json +++ b/design-tokens/tokens/component/component.default.json @@ -12,7 +12,7 @@ "position": 0 }, { - "color": "{color.background.primary.default.REST}", + "color": "{color.background.primary.strong.REST}", "position": 0.35 }, { @@ -20,7 +20,7 @@ "position": 0.7 }, { - "color": "{color.background.primary.default.REST}", + "color": "{color.background.primary.strong.REST}", "position": 1 } ] @@ -48,7 +48,7 @@ }, "textColor": { "$type": "color", - "$value": "{color.text.onPrimary.DEFAULT.REST}", + "$value": "{color.text.onPrimaryStrong.DEFAULT.REST}", "$description": "", "$extensions": { "com.figma": { @@ -60,7 +60,7 @@ }, "iconColor": { "$type": "color", - "$value": "{color.icon.onPrimary.DEFAULT.REST}", + "$value": "{color.icon.onPrimaryStrong.DEFAULT.REST}", "$description": "", "$extensions": { "com.figma": { @@ -84,7 +84,7 @@ }, "backgroundColor": { "$type": "color", - "$value": "{color.background.primary.default.REST}", + "$value": "{color.background.primary.strong.REST}", "$description": "", "$extensions": { "com.figma": { @@ -186,7 +186,7 @@ }, "textColor": { "$type": "color", - "$value": "{color.text.onPrimary.DEFAULT.REST}", + "$value": "{color.text.onPrimaryStrong.DEFAULT.REST}", "$description": "", "$extensions": { "com.figma": { @@ -198,7 +198,7 @@ }, "iconColor": { "$type": "color", - "$value": "{color.icon.onPrimary.DEFAULT.REST}", + "$value": "{color.icon.onPrimaryStrong.DEFAULT.REST}", "$description": "", "$extensions": { "com.figma": { @@ -1404,7 +1404,7 @@ }, "borderColor": { "$type": "color", - "$value": "{color.background.primary.default.REST}", + "$value": "{color.background.primary.strong.REST}", "$description": "", "$extensions": { "com.figma": { @@ -6206,7 +6206,7 @@ "rest": { "background": { "$type": "color", - "$value": "{color.background.selected.weak.enabled.DEFAULT.REST}", + "$value": "{color.background.selected.primary.weak.REST}", "$description": "", "$extensions": { "com.figma": { @@ -6230,7 +6230,7 @@ }, "textColor": { "$type": "color", - "$value": "{color.text.onSelected.DEFAULT.REST}", + "$value": "{color.text.onSelectedPrimary.DEFAULT.REST}", "$description": "", "$extensions": { "com.figma": { @@ -6256,7 +6256,7 @@ "hover": { "background": { "$type": "color", - "$value": "{color.background.selected.weak.hover}", + "$value": "{color.background.selected.primary.weak.hover}", "$description": "", "$extensions": { "com.figma": { @@ -6280,7 +6280,7 @@ }, "textColor": { "$type": "color", - "$value": "{color.text.onSelected.DEFAULT.REST}", + "$value": "{color.text.onSelectedPrimary.DEFAULT.REST}", "$description": "", "$extensions": { "com.figma": { @@ -6404,7 +6404,7 @@ "rest": { "background": { "$type": "color", - "$value": "{color.background.selected.strong.enabled.DEFAULT.REST}", + "$value": "{color.background.selected.primary.strong.REST}", "$description": "", "$extensions": { "com.figma": { @@ -6428,7 +6428,7 @@ }, "iconColor": { "$type": "color", - "$value": "{color.icon.onSelectedStrong.DEFAULT.REST}", + "$value": "{color.icon.onSelectedPrimaryStrong.DEFAULT.REST}", "$description": "", "$extensions": { "com.figma": { @@ -6442,7 +6442,7 @@ "hover": { "background": { "$type": "color", - "$value": "{color.background.selected.strong.enabled.DEFAULT.REST}", + "$value": "{color.background.selected.primary.strong.REST}", "$description": "", "$extensions": { "com.figma": { @@ -6466,7 +6466,7 @@ }, "iconColor": { "$type": "color", - "$value": "{color.icon.onSelectedStrong.DEFAULT.REST}", + "$value": "{color.icon.onSelectedPrimaryStrong.DEFAULT.REST}", "$description": "", "$extensions": { "com.figma": { @@ -6482,7 +6482,7 @@ "rest": { "background": { "$type": "color", - "$value": "{color.background.selected.strong.enabled.DEFAULT.REST}", + "$value": "{color.background.selected.primary.strong.REST}", "$description": "", "$extensions": { "com.figma": { @@ -6506,7 +6506,7 @@ }, "iconColor": { "$type": "color", - "$value": "{color.icon.onPrimary.DEFAULT.REST}", + "$value": "{color.icon.onPrimaryStrong.DEFAULT.REST}", "$description": "", "$extensions": { "com.figma": { @@ -6520,7 +6520,7 @@ "hover": { "background": { "$type": "color", - "$value": "{color.background.selected.strong.enabled.DEFAULT.REST}", + "$value": "{color.background.selected.primary.strong.REST}", "$description": "", "$extensions": { "com.figma": { @@ -6544,7 +6544,7 @@ }, "iconColor": { "$type": "color", - "$value": "{color.icon.onPrimary.DEFAULT.REST}", + "$value": "{color.icon.onPrimaryStrong.DEFAULT.REST}", "$description": "", "$extensions": { "com.figma": { @@ -6793,7 +6793,7 @@ "rest": { "background": { "$type": "color", - "$value": "{color.background.selected.strong.enabled.DEFAULT.REST}", + "$value": "{color.background.selected.primary.strong.REST}", "$description": "", "$extensions": { "com.figma": { @@ -6819,7 +6819,7 @@ "hover": { "background": { "$type": "color", - "$value": "{color.background.selected.strong.enabled.DEFAULT.REST}", + "$value": "{color.background.selected.primary.strong.REST}", "$description": "", "$extensions": { "com.figma": { @@ -7435,7 +7435,7 @@ "rest": { "textColor": { "$type": "color", - "$value": "{color.text.onSelected.DEFAULT.REST}", + "$value": "{color.text.onSelectedPrimary.DEFAULT.REST}", "$description": "", "$extensions": { "com.figma": { @@ -7447,7 +7447,7 @@ }, "iconColor": { "$type": "color", - "$value": "{color.icon.onSelected.DEFAULT.REST}", + "$value": "{color.icon.onSelectedPrimary.DEFAULT.REST}", "$description": "", "$extensions": { "com.figma": { @@ -7471,7 +7471,7 @@ }, "background": { "$type": "color", - "$value": "{color.background.selected.weak.enabled.DEFAULT.REST}", + "$value": "{color.background.selected.primary.weak.REST}", "$description": "", "$extensions": { "com.figma": { @@ -7485,7 +7485,7 @@ "hover": { "textColor": { "$type": "color", - "$value": "{color.text.onSelected.DEFAULT.REST}", + "$value": "{color.text.onSelectedPrimary.DEFAULT.REST}", "$description": "", "$extensions": { "com.figma": { @@ -7497,7 +7497,7 @@ }, "iconColor": { "$type": "color", - "$value": "{color.icon.onSelected.DEFAULT.REST}", + "$value": "{color.icon.onSelectedPrimary.DEFAULT.REST}", "$description": "", "$extensions": { "com.figma": { @@ -7521,7 +7521,7 @@ }, "background": { "$type": "color", - "$value": "{color.background.selected.weak.hover}", + "$value": "{color.background.selected.primary.weak.hover}", "$description": "", "$extensions": { "com.figma": { diff --git a/design-tokens/tokens/semantic/color.dark.json b/design-tokens/tokens/semantic/color.dark.json index 8f341cfae..b55d480c5 100644 --- a/design-tokens/tokens/semantic/color.dark.json +++ b/design-tokens/tokens/semantic/color.dark.json @@ -218,7 +218,7 @@ } }, "primary": { - "default": { + "strong": { "REST": { "$type": "color", "$value": "{base.color.green.600}", @@ -230,9 +230,7 @@ "codeSyntax": {} } } - } - }, - "DEFAULT": { + }, "hover": { "$type": "color", "$value": "{base.color.green.600}", @@ -248,62 +246,56 @@ } }, "selected": { - "strong": { - "enabled": { - "DEFAULT": { - "REST": { - "$type": "color", - "$value": "{base.color.brand}", - "$description": "Selected (or checked) color. Used for ‘selected’ state. Examples include, checked checkboxes, checked radios, on toggle, active tabs.", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["FRAME_FILL", "SHAPE_FILL"], - "codeSyntax": {} - } + "primary": { + "strong": { + "REST": { + "$type": "color", + "$value": "{base.color.brand}", + "$description": "Selected (or checked) color. Used for ‘selected’ state. Examples include, checked checkboxes, checked radios, on toggle, active tabs.", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["FRAME_FILL", "SHAPE_FILL"], + "codeSyntax": {} } } - } - }, - "hover": { - "$type": "color", - "$value": "{base.color.brand}", - "$description": "Selected (or checked) color. Used for ‘selected’ state. Examples include, checked checkboxes, checked radios, on toggle, active tabs.", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["FRAME_FILL", "SHAPE_FILL"], - "codeSyntax": {} - } - } - } - }, - "weak": { - "enabled": { - "DEFAULT": { - "REST": { - "$type": "color", - "$value": "{base.color.green.1000}", - "$description": "Lower emphasis variant of background-selected-strong.", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["FRAME_FILL", "SHAPE_FILL"], - "codeSyntax": {} - } + }, + "hover": { + "$type": "color", + "$value": "{base.color.brand}", + "$description": "Selected (or checked) color. Used for ‘selected’ state. Examples include, checked checkboxes, checked radios, on toggle, active tabs.", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["FRAME_FILL", "SHAPE_FILL"], + "codeSyntax": {} } } } }, - "hover": { - "$type": "color", - "$value": "{base.color.green.900}", - "$description": "Hover variant of background-selected-weak.", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["FRAME_FILL", "SHAPE_FILL"], - "codeSyntax": {} + "weak": { + "REST": { + "$type": "color", + "$value": "{base.color.green.1000}", + "$description": "Lower emphasis variant of background-selected-strong.", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["FRAME_FILL", "SHAPE_FILL"], + "codeSyntax": {} + } + } + }, + "hover": { + "$type": "color", + "$value": "{base.color.green.900}", + "$description": "Hover variant of background-selected-weak.", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["FRAME_FILL", "SHAPE_FILL"], + "codeSyntax": {} + } } } } @@ -557,7 +549,7 @@ } } }, - "onPrimary": { + "onPrimaryStrong": { "DEFAULT": { "REST": { "$type": "color", @@ -670,7 +662,7 @@ } }, "heading": { - "default": { + "DEFAULT": { "REST": { "$type": "color", "$value": "{color.text.strong.REST}", @@ -685,7 +677,7 @@ } } }, - "onSelectedStrong": { + "onSelectedPrimaryStrong": { "DEFAULT": { "REST": { "$type": "color", @@ -701,7 +693,7 @@ } } }, - "onSelected": { + "onSelectedPrimary": { "DEFAULT": { "REST": { "$type": "color", @@ -718,7 +710,7 @@ } }, "onStrong": { - "default": { + "DEFAULT": { "REST": { "$type": "color", "$value": "{base.color.grey.1200}", @@ -748,7 +740,7 @@ } } }, - "default": { + "DEFAULT": { "REST": { "$type": "color", "$value": "{color.text.default.REST}", @@ -778,7 +770,7 @@ } } }, - "default": { + "DEFAULT": { "REST": { "$type": "color", "$value": "{color.text.default.REST}", @@ -808,7 +800,7 @@ } } }, - "default": { + "DEFAULT": { "REST": { "$type": "color", "$value": "{color.text.default.REST}", @@ -838,7 +830,7 @@ } } }, - "default": { + "DEFAULT": { "REST": { "$type": "color", "$value": "{color.text.default.REST}", @@ -868,7 +860,7 @@ } } }, - "default": { + "DEFAULT": { "REST": { "$type": "color", "$value": "{color.text.default.REST}", @@ -1039,7 +1031,7 @@ } } }, - "onPrimary": { + "onPrimaryStrong": { "DEFAULT": { "REST": { "$type": "color", @@ -1055,7 +1047,7 @@ } } }, - "onSelectedStrong": { + "onSelectedPrimaryStrong": { "DEFAULT": { "REST": { "$type": "color", @@ -1071,7 +1063,7 @@ } } }, - "onSelected": { + "onSelectedPrimary": { "DEFAULT": { "REST": { "$type": "color", diff --git a/design-tokens/tokens/semantic/color.light.json b/design-tokens/tokens/semantic/color.light.json index ad16bb1d0..46602018f 100644 --- a/design-tokens/tokens/semantic/color.light.json +++ b/design-tokens/tokens/semantic/color.light.json @@ -218,7 +218,7 @@ } }, "primary": { - "default": { + "strong": { "REST": { "$type": "color", "$value": "{base.color.green.600}", @@ -230,9 +230,7 @@ "codeSyntax": {} } } - } - }, - "DEFAULT": { + }, "hover": { "$type": "color", "$value": "{base.color.green.600}", @@ -248,62 +246,56 @@ } }, "selected": { - "strong": { - "enabled": { - "DEFAULT": { - "REST": { - "$type": "color", - "$value": "{base.color.brand}", - "$description": "Selected (or checked) color. Used for ‘selected’ state. Examples include, checked checkboxes, checked radios, on toggle, active tabs.", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["FRAME_FILL", "SHAPE_FILL"], - "codeSyntax": {} - } + "primary": { + "strong": { + "REST": { + "$type": "color", + "$value": "{base.color.brand}", + "$description": "Selected (or checked) color. Used for ‘selected’ state. Examples include, checked checkboxes, checked radios, on toggle, active tabs.", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["FRAME_FILL", "SHAPE_FILL"], + "codeSyntax": {} } } - } - }, - "hover": { - "$type": "color", - "$value": "{base.color.brand}", - "$description": "Selected (or checked) color. Used for ‘selected’ state. Examples include, checked checkboxes, checked radios, on toggle, active tabs.", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["FRAME_FILL", "SHAPE_FILL"], - "codeSyntax": {} - } - } - } - }, - "weak": { - "enabled": { - "DEFAULT": { - "REST": { - "$type": "color", - "$value": "{base.color.green.100}", - "$description": "Lower emphasis variant of background-selected-strong.", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["FRAME_FILL", "SHAPE_FILL"], - "codeSyntax": {} - } + }, + "hover": { + "$type": "color", + "$value": "{base.color.brand}", + "$description": "Selected (or checked) color. Used for ‘selected’ state. Examples include, checked checkboxes, checked radios, on toggle, active tabs.", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["FRAME_FILL", "SHAPE_FILL"], + "codeSyntax": {} } } } }, - "hover": { - "$type": "color", - "$value": "{base.color.green.125}", - "$description": "Hover variant of background-selected-weak.", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["FRAME_FILL", "SHAPE_FILL"], - "codeSyntax": {} + "weak": { + "REST": { + "$type": "color", + "$value": "{base.color.green.100}", + "$description": "Lower emphasis variant of background-selected-strong.", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["FRAME_FILL", "SHAPE_FILL"], + "codeSyntax": {} + } + } + }, + "hover": { + "$type": "color", + "$value": "{base.color.green.125}", + "$description": "Hover variant of background-selected-weak.", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["FRAME_FILL", "SHAPE_FILL"], + "codeSyntax": {} + } } } } @@ -557,7 +549,7 @@ } } }, - "onPrimary": { + "onPrimaryStrong": { "DEFAULT": { "REST": { "$type": "color", @@ -670,7 +662,7 @@ } }, "heading": { - "default": { + "DEFAULT": { "REST": { "$type": "color", "$value": "{color.text.strong.REST}", @@ -685,7 +677,7 @@ } } }, - "onSelectedStrong": { + "onSelectedPrimaryStrong": { "DEFAULT": { "REST": { "$type": "color", @@ -701,7 +693,7 @@ } } }, - "onSelected": { + "onSelectedPrimary": { "DEFAULT": { "REST": { "$type": "color", @@ -718,7 +710,7 @@ } }, "onStrong": { - "default": { + "DEFAULT": { "REST": { "$type": "color", "$value": "{base.color.white.100}", @@ -748,7 +740,7 @@ } } }, - "default": { + "DEFAULT": { "REST": { "$type": "color", "$value": "{color.text.default.REST}", @@ -778,7 +770,7 @@ } } }, - "default": { + "DEFAULT": { "REST": { "$type": "color", "$value": "{color.text.default.REST}", @@ -808,7 +800,7 @@ } } }, - "default": { + "DEFAULT": { "REST": { "$type": "color", "$value": "{color.text.default.REST}", @@ -838,7 +830,7 @@ } } }, - "default": { + "DEFAULT": { "REST": { "$type": "color", "$value": "{color.text.default.REST}", @@ -868,7 +860,7 @@ } } }, - "default": { + "DEFAULT": { "REST": { "$type": "color", "$value": "{color.text.default.REST}", @@ -1039,7 +1031,7 @@ } } }, - "onPrimary": { + "onPrimaryStrong": { "DEFAULT": { "REST": { "$type": "color", @@ -1055,7 +1047,7 @@ } } }, - "onSelectedStrong": { + "onSelectedPrimaryStrong": { "DEFAULT": { "REST": { "$type": "color", @@ -1071,7 +1063,7 @@ } } }, - "onSelected": { + "onSelectedPrimary": { "DEFAULT": { "REST": { "$type": "color", From 5cc62ce5f01c352ecdd990cf62dc3065445d4403 Mon Sep 17 00:00:00 2001 From: Taylor Seamans Date: Thu, 16 Jan 2025 10:19:45 -0800 Subject: [PATCH 02/13] Create good-gorillas-suffer.md --- .changeset/good-gorillas-suffer.md | 22 ++++++++++++++++++++++ 1 file changed, 22 insertions(+) create mode 100644 .changeset/good-gorillas-suffer.md diff --git a/.changeset/good-gorillas-suffer.md b/.changeset/good-gorillas-suffer.md new file mode 100644 index 000000000..1c87675c9 --- /dev/null +++ b/.changeset/good-gorillas-suffer.md @@ -0,0 +1,22 @@ +--- +"hpe-design-tokens": minor +--- + +- Renamed `color.background.primary.default` --> `color.background.primary.strong` +- Renamed `color.background.selected.strong.enabled` --> `color.background.selected.primary.strong` +- Renamed `color.background.selected.strong.hover` --> `color.background.selected.primary.strong.hover` +- Renamed `color.background.selected.weak.enabled` --> `color.background.selected.primary.weak` +- Renamed `color.background.selected.weak.hover` --> `color.background.selected.primary.weak.hover` +- Renamed `color.text.onPrimary` --> `color.text.onPrimaryStrong` +- Renamed `color.text.heading.default` --> `color.text.heading` +- Renamed `color.text.onSelectedStrong` --> `color.text.onSelectedPrimaryStrong` +- Renamed `color.text.onSelected` --> `color.text.onSelectedPrimary` +- Renamed `color.text.onStrong.default` --> `color.text.onStrong` +- Renamed `color.text.onCritical.default` --> `color.text.onCritical` +- Renamed `color.text.onWarning.default` --> `color.text.onWarning` +- Renamed `color.text.onOk.default` --> `color.text.onOk` +- Renamed `color.text.onInfo.default` --> `color.text.onInfo` +- Renamed `color.text.onUnknown.default` --> `color.text.onUnknown` +- Renamed `color.icon.onPrimary` --> `color.icon.onPrimaryStrong` +- Renamed `color.icon.onSelectedStrong` --> `color.icon.onSelectedPrimaryStrong` +- Renamed `color.icon.onSelected` --> `color.icon.onSelectedPrimary` From 658423268a6343ce71725391366bb4c65ec425c0 Mon Sep 17 00:00:00 2001 From: taysea Date: Thu, 16 Jan 2025 11:15:05 -0800 Subject: [PATCH 03/13] Rename primitive mode from base to default, update file exports from base to primitives --- .../pages/design-tokens/all-design-tokens.js | 4 +- .../src/scripts/build-style-dictionary.js | 20 +++++----- ...ives.base.json => primitives.default.json} | 0 design-tokens/tokens/semantic/color.dark.json | 38 +++++++++++++------ .../tokens/semantic/color.light.json | 38 +++++++++++++------ 5 files changed, 64 insertions(+), 36 deletions(-) rename design-tokens/tokens/primitive/{primitives.base.json => primitives.default.json} (100%) 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..67714eb1b 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', @@ -288,7 +288,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, @@ -378,7 +378,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 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..56d572631 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, @@ -243,6 +243,20 @@ } } } + }, + "xstrong": { + "REST": { + "$type": "color", + "$value": "{base.color.green.1000}", + "$description": "Hover variant of background-primary.", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["FRAME_FILL", "SHAPE_FILL"], + "codeSyntax": {} + } + } + } } }, "selected": { diff --git a/design-tokens/tokens/semantic/color.light.json b/design-tokens/tokens/semantic/color.light.json index 46602018f..a98f5d318 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, @@ -243,6 +243,20 @@ } } } + }, + "xstrong": { + "REST": { + "$type": "color", + "$value": "{base.color.green.1000}", + "$description": "Hover variant of background-primary.", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["FRAME_FILL", "SHAPE_FILL"], + "codeSyntax": {} + } + } + } } }, "selected": { From 933c718e50ee06a5b64a56c3f3c6c673bd26f76c Mon Sep 17 00:00:00 2001 From: taysea Date: Thu, 16 Jan 2025 11:17:58 -0800 Subject: [PATCH 04/13] Remove default from component file export names --- design-tokens/src/scripts/build-style-dictionary.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/design-tokens/src/scripts/build-style-dictionary.js b/design-tokens/src/scripts/build-style-dictionary.js index 67714eb1b..3ea501f11 100644 --- a/design-tokens/src/scripts/build-style-dictionary.js +++ b/design-tokens/src/scripts/build-style-dictionary.js @@ -392,7 +392,7 @@ try { prefix: PREFIX, files: [ { - destination: 'components.default.js', + destination: 'components.js', filter: token => token.filePath.includes(`${TOKENS_DIR}/component/`), format: 'esmGrommetRefs', @@ -405,7 +405,7 @@ try { prefix: PREFIX, files: [ { - destination: 'components.default.js', + destination: 'components.js', filter: token => token.filePath.includes(`${TOKENS_DIR}/component/`), format: 'esmGrommetRefs', @@ -418,7 +418,7 @@ try { prefix: PREFIX, files: [ { - destination: 'components.default.cjs', + destination: 'components.cjs', filter: token => token.filePath.includes(`${TOKENS_DIR}/component/`), format: 'javascript/commonJs', From 110bbd368f0414192ec123ea33231b515d522bdd Mon Sep 17 00:00:00 2001 From: taysea Date: Thu, 16 Jan 2025 11:22:49 -0800 Subject: [PATCH 05/13] Remove unneeded modes for color and dimension ESM/CommonJS exports --- design-tokens/src/scripts/build-style-dictionary.js | 12 ++++-------- 1 file changed, 4 insertions(+), 8 deletions(-) diff --git a/design-tokens/src/scripts/build-style-dictionary.js b/design-tokens/src/scripts/build-style-dictionary.js index 3ea501f11..ed2fc70ec 100644 --- a/design-tokens/src/scripts/build-style-dictionary.js +++ b/design-tokens/src/scripts/build-style-dictionary.js @@ -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, }, @@ -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, }, From a9dcb587a97eb76a9b0b9fa75e7bee8e56c48c25 Mon Sep 17 00:00:00 2001 From: Taylor Seamans Date: Thu, 16 Jan 2025 11:35:35 -0800 Subject: [PATCH 06/13] Create cuddly-elephants-happen.md --- .changeset/cuddly-elephants-happen.md | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 .changeset/cuddly-elephants-happen.md 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"). From 5026f56995c6b09a56f1308bf2b91a6d29310ca0 Mon Sep 17 00:00:00 2001 From: taysea Date: Thu, 16 Jan 2025 15:15:43 -0800 Subject: [PATCH 07/13] Update spacing and container tokens --- .../tokens/component/component.default.json | 22 +- .../tokens/component/element.default.json | 30 +-- .../tokens/primitive/primitives.default.json | 198 ++++++++++++++++-- design-tokens/tokens/semantic/color.dark.json | 20 +- .../tokens/semantic/color.light.json | 20 +- .../tokens/semantic/dimension.medium.json | 112 ++++++++-- .../tokens/semantic/dimension.small.json | 122 +++++++++-- sandbox/grommet-app/src/themes/theme.jsx | 58 ++--- 8 files changed, 476 insertions(+), 106 deletions(-) diff --git a/design-tokens/tokens/component/component.default.json b/design-tokens/tokens/component/component.default.json index 0ffe1fc2c..ce42ee90b 100644 --- a/design-tokens/tokens/component/component.default.json +++ b/design-tokens/tokens/component/component.default.json @@ -4973,7 +4973,7 @@ }, "borderRadius": { "$type": "number", - "$value": "{static.spacing.xsmall}", + "$value": "{static.spacing.3xsmall}", "$description": "", "$extensions": { "com.figma": { @@ -5599,7 +5599,7 @@ }, "margin": { "$type": "number", - "$value": "{static.spacing.xsmall}", + "$value": "{static.spacing.3xsmall}", "$description": "", "$extensions": { "com.figma": { @@ -5932,7 +5932,7 @@ "container": { "paddingY": { "$type": "number", - "$value": "{static.spacing.xsmall}", + "$value": "{static.spacing.3xsmall}", "$description": "", "$extensions": { "com.figma": { @@ -6606,7 +6606,7 @@ "medium": { "gapX": { "$type": "number", - "$value": "{static.spacing.small}", + "$value": "{static.spacing.xsmall}", "$description": "Space between checkbox control and value (label)", "$extensions": { "com.figma": { @@ -7030,7 +7030,7 @@ "medium": { "gapX": { "$type": "number", - "$value": "{static.spacing.small}", + "$value": "{static.spacing.xsmall}", "$description": "", "$extensions": { "com.figma": { @@ -7185,7 +7185,7 @@ "dataCell": { "paddingX": { "$type": "number", - "$value": "{static.spacing.small}", + "$value": "{static.spacing.xsmall}", "$description": "", "$extensions": { "com.figma": { @@ -7245,7 +7245,7 @@ }, "paddingTop": { "$type": "number", - "$value": "{static.spacing.xsmall}", + "$value": "{static.spacing.3xsmall}", "$description": "", "$extensions": { "com.figma": { @@ -8223,7 +8223,7 @@ "item": { "paddingX": { "$type": "number", - "$value": "{static.spacing.small}", + "$value": "{static.spacing.xsmall}", "$description": "", "$extensions": { "com.figma": { @@ -8321,7 +8321,7 @@ }, "paddingY": { "$type": "number", - "$value": "{static.spacing.xsmall}", + "$value": "{static.spacing.3xsmall}", "$description": "", "$extensions": { "com.figma": { @@ -8360,7 +8360,7 @@ "container": { "paddingX": { "$type": "number", - "$value": "{static.spacing.small}", + "$value": "{static.spacing.xsmall}", "$description": "", "$extensions": { "com.figma": { @@ -10344,7 +10344,7 @@ "medium": { "gapX": { "$type": "number", - "$value": "{static.spacing.small}", + "$value": "{static.spacing.xsmall}", "$description": "Space between checkbox control and value (label)", "$extensions": { "com.figma": { diff --git a/design-tokens/tokens/component/element.default.json b/design-tokens/tokens/component/element.default.json index b5a46a84c..fe417ce1a 100644 --- a/design-tokens/tokens/component/element.default.json +++ b/design-tokens/tokens/component/element.default.json @@ -15,7 +15,7 @@ }, "textToElementX": { "$type": "number", - "$value": "{static.spacing.xxsmall}", + "$value": "{static.spacing.5xsmall}", "$description": "", "$extensions": { "com.figma": { @@ -27,7 +27,7 @@ }, "textToIconX": { "$type": "number", - "$value": "{static.spacing.xxsmall}", + "$value": "{static.spacing.5xsmall}", "$description": "", "$extensions": { "com.figma": { @@ -88,7 +88,7 @@ "paddingX": { "narrow": { "$type": "number", - "$value": "{static.spacing.xxsmall}", + "$value": "{static.spacing.5xsmall}", "$description": "", "$extensions": { "com.figma": { @@ -100,7 +100,7 @@ }, "default": { "$type": "number", - "$value": "{static.spacing.xsmall}", + "$value": "{static.spacing.3xsmall}", "$description": "", "$extensions": { "com.figma": { @@ -249,7 +249,7 @@ }, "textToElementX": { "$type": "number", - "$value": "{static.spacing.small}", + "$value": "{static.spacing.xsmall}", "$description": "", "$extensions": { "com.figma": { @@ -261,7 +261,7 @@ }, "textToIconX": { "$type": "number", - "$value": "{static.spacing.xsmall}", + "$value": "{static.spacing.3xsmall}", "$description": "", "$extensions": { "com.figma": { @@ -274,7 +274,7 @@ "paddingX": { "narrow": { "$type": "number", - "$value": "{static.spacing.xxsmall}", + "$value": "{static.spacing.5xsmall}", "$description": "", "$extensions": { "com.figma": { @@ -286,7 +286,7 @@ }, "default": { "$type": "number", - "$value": "{static.spacing.xsmall}", + "$value": "{static.spacing.3xsmall}", "$description": "", "$extensions": { "com.figma": { @@ -298,7 +298,7 @@ }, "wide": { "$type": "number", - "$value": "{static.spacing.small}", + "$value": "{static.spacing.xsmall}", "$description": "", "$extensions": { "com.figma": { @@ -387,7 +387,7 @@ }, "textToElementX": { "$type": "number", - "$value": "{static.spacing.small}", + "$value": "{static.spacing.xsmall}", "$description": "", "$extensions": { "com.figma": { @@ -399,7 +399,7 @@ }, "textToIconX": { "$type": "number", - "$value": "{static.spacing.xsmall}", + "$value": "{static.spacing.3xsmall}", "$description": "", "$extensions": { "com.figma": { @@ -549,7 +549,7 @@ }, "textToElementX": { "$type": "number", - "$value": "{static.spacing.small}", + "$value": "{static.spacing.xsmall}", "$description": "", "$extensions": { "com.figma": { @@ -561,7 +561,7 @@ }, "textToIconX": { "$type": "number", - "$value": "{static.spacing.xsmall}", + "$value": "{static.spacing.3xsmall}", "$description": "", "$extensions": { "com.figma": { @@ -711,7 +711,7 @@ }, "textToElementX": { "$type": "number", - "$value": "{static.spacing.small}", + "$value": "{static.spacing.xsmall}", "$description": "", "$extensions": { "com.figma": { @@ -723,7 +723,7 @@ }, "textToIconX": { "$type": "number", - "$value": "{static.spacing.xsmall}", + "$value": "{static.spacing.3xsmall}", "$description": "", "$extensions": { "com.figma": { diff --git a/design-tokens/tokens/primitive/primitives.default.json b/design-tokens/tokens/primitive/primitives.default.json index 5d5e781d1..e955520bd 100644 --- a/design-tokens/tokens/primitive/primitives.default.json +++ b/design-tokens/tokens/primitive/primitives.default.json @@ -241,6 +241,18 @@ } } }, + "800": { + "$type": "number", + "$value": 32, + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": [], + "codeSyntax": {} + } + } + }, "900": { "$type": "number", "$value": 36, @@ -265,6 +277,18 @@ } } }, + "1600": { + "$type": "number", + "$value": 64, + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": [], + "codeSyntax": {} + } + } + }, "1800": { "$type": "number", "$value": 72, @@ -289,6 +313,18 @@ } } }, + "3200": { + "$type": "number", + "$value": 128, + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": [], + "codeSyntax": {} + } + } + }, "4800": { "$type": "number", "$value": 192, @@ -301,6 +337,18 @@ } } }, + "6400": { + "$type": "number", + "$value": 256, + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": [], + "codeSyntax": {} + } + } + }, "7200": { "$type": "number", "$value": 288, @@ -325,6 +373,18 @@ } } }, + "12800": { + "$type": "number", + "$value": 512, + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": [], + "codeSyntax": {} + } + } + }, "14400": { "$type": "number", "$value": 576, @@ -349,6 +409,18 @@ } } }, + "25600": { + "$type": "number", + "$value": 1024, + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": [], + "codeSyntax": {} + } + } + }, "38400": { "$type": "number", "$value": 1152, @@ -1943,7 +2015,7 @@ } } }, - "xxsmall": { + "5xsmall": { "$type": "number", "$value": "{base.dimension.75}", "$description": "", @@ -1955,7 +2027,19 @@ } } }, - "xsmall": { + "4xsmall": { + "$type": "number", + "$value": "{base.dimension.100}", + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["ALL_SCOPES"], + "codeSyntax": {} + } + } + }, + "3xsmall": { "$type": "number", "$value": "{base.dimension.150}", "$description": "", @@ -1967,7 +2051,19 @@ } } }, - "small": { + "xxsmall": { + "$type": "number", + "$value": "{base.dimension.200}", + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["ALL_SCOPES"], + "codeSyntax": {} + } + } + }, + "xsmall": { "$type": "number", "$value": "{base.dimension.300}", "$description": "", @@ -1979,6 +2075,18 @@ } } }, + "small": { + "$type": "number", + "$value": "{base.dimension.400}", + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["ALL_SCOPES"], + "codeSyntax": {} + } + } + }, "medium": { "$type": "number", "$value": "{base.dimension.600}", @@ -1992,6 +2100,18 @@ } }, "large": { + "$type": "number", + "$value": "{base.dimension.800}", + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["ALL_SCOPES"], + "codeSyntax": {} + } + } + }, + "xlarge": { "$type": "number", "$value": "{base.dimension.1200}", "$description": "", @@ -2003,7 +2123,19 @@ } } }, - "xlarge": { + "xxlarge": { + "$type": "number", + "$value": "{base.dimension.1600}", + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["ALL_SCOPES"], + "codeSyntax": {} + } + } + }, + "3xlarge": { "$type": "number", "$value": "{base.dimension.2400}", "$description": "", @@ -2014,6 +2146,18 @@ "codeSyntax": {} } } + }, + "4xlarge": { + "$type": "number", + "$value": "{base.dimension.3200}", + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["ALL_SCOPES"], + "codeSyntax": {} + } + } } }, "radius": { @@ -2213,7 +2357,7 @@ } }, "container": { - "xxsmall": { + "5xsmall": { "$type": "number", "$value": "{base.dimension.1200}", "$description": "", @@ -2225,7 +2369,19 @@ } } }, - "xsmall": { + "4xsmall": { + "$type": "number", + "$value": "{base.dimension.1600}", + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["ALL_SCOPES"], + "codeSyntax": {} + } + } + }, + "3xsmall": { "$type": "number", "$value": "{base.dimension.2400}", "$description": "", @@ -2237,7 +2393,19 @@ } } }, - "small": { + "xxsmall": { + "$type": "number", + "$value": "{base.dimension.3200}", + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["ALL_SCOPES"], + "codeSyntax": {} + } + } + }, + "xsmall": { "$type": "number", "$value": "{base.dimension.4800}", "$description": "", @@ -2249,9 +2417,9 @@ } } }, - "smallPlus": { + "small": { "$type": "number", - "$value": "{base.dimension.7200}", + "$value": "{base.dimension.6400}", "$description": "", "$extensions": { "com.figma": { @@ -2273,9 +2441,9 @@ } } }, - "mediumPlus": { + "large": { "$type": "number", - "$value": "{base.dimension.14400}", + "$value": "{base.dimension.12800}", "$description": "", "$extensions": { "com.figma": { @@ -2285,7 +2453,7 @@ } } }, - "large": { + "xlarge": { "$type": "number", "$value": "{base.dimension.19200}", "$description": "", @@ -2297,9 +2465,9 @@ } } }, - "xlarge": { + "xxlarge": { "$type": "number", - "$value": "{base.dimension.38400}", + "$value": "{base.dimension.25600}", "$description": "", "$extensions": { "com.figma": { @@ -2309,7 +2477,7 @@ } } }, - "xxlarge": { + "3xlarge": { "$type": "number", "$value": "{base.dimension.76800}", "$description": "", diff --git a/design-tokens/tokens/semantic/color.dark.json b/design-tokens/tokens/semantic/color.dark.json index 382633872..70b6872ee 100644 --- a/design-tokens/tokens/semantic/color.dark.json +++ b/design-tokens/tokens/semantic/color.dark.json @@ -243,6 +243,20 @@ } } } + }, + "xstrong": { + "REST": { + "$type": "color", + "$value": "{base.color.green.1000}", + "$description": "Hover variant of background-primary.", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["FRAME_FILL", "SHAPE_FILL"], + "codeSyntax": {} + } + } + } } }, "selected": { @@ -1571,8 +1585,8 @@ "$value": [ { "offsetX": "{static.spacing.none}", - "offsetY": "{static.spacing.xsmall}", - "blur": "{static.spacing.small}", + "offsetY": "{static.spacing.3xsmall}", + "blur": "{static.spacing.xsmall}", "spread": "{static.spacing.none}", "color": "{base.color.black.opacity36}" } @@ -1591,7 +1605,7 @@ "$value": [ { "offsetX": "{static.spacing.none}", - "offsetY": "{static.spacing.small}", + "offsetY": "{static.spacing.xsmall}", "blur": "{static.spacing.medium}", "spread": "{static.spacing.none}", "color": "{base.color.black.opacity36}" diff --git a/design-tokens/tokens/semantic/color.light.json b/design-tokens/tokens/semantic/color.light.json index a17e25f17..26691f0d3 100644 --- a/design-tokens/tokens/semantic/color.light.json +++ b/design-tokens/tokens/semantic/color.light.json @@ -243,6 +243,20 @@ } } } + }, + "xstrong": { + "REST": { + "$type": "color", + "$value": "{base.color.green.1000}", + "$description": "Hover variant of background-primary.", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["FRAME_FILL", "SHAPE_FILL"], + "codeSyntax": {} + } + } + } } }, "selected": { @@ -1571,8 +1585,8 @@ "$value": [ { "offsetX": "{static.spacing.none}", - "offsetY": "{static.spacing.xsmall}", - "blur": "{static.spacing.small}", + "offsetY": "{static.spacing.3xsmall}", + "blur": "{static.spacing.xsmall}", "spread": "{static.spacing.none}", "color": "{base.color.black.opacity12}" } @@ -1591,7 +1605,7 @@ "$value": [ { "offsetX": "{static.spacing.none}", - "offsetY": "{static.spacing.small}", + "offsetY": "{static.spacing.xsmall}", "blur": "{static.spacing.medium}", "spread": "{static.spacing.none}", "color": "{base.color.black.opacity24}" diff --git a/design-tokens/tokens/semantic/dimension.medium.json b/design-tokens/tokens/semantic/dimension.medium.json index 58225b3ad..5d690a5c8 100644 --- a/design-tokens/tokens/semantic/dimension.medium.json +++ b/design-tokens/tokens/semantic/dimension.medium.json @@ -24,6 +24,42 @@ } } }, + "5xsmall": { + "$type": "number", + "$value": "{static.spacing.5xsmall}", + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["GAP"], + "codeSyntax": {} + } + } + }, + "4xsmall": { + "$type": "number", + "$value": "{static.spacing.4xsmall}", + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["GAP"], + "codeSyntax": {} + } + } + }, + "3xsmall": { + "$type": "number", + "$value": "{static.spacing.3xsmall}", + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["GAP"], + "codeSyntax": {} + } + } + }, "xxsmall": { "$type": "number", "$value": "{static.spacing.xxsmall}", @@ -95,6 +131,30 @@ "codeSyntax": {} } } + }, + "xxlarge": { + "$type": "number", + "$value": "{static.spacing.xxlarge}", + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["GAP"], + "codeSyntax": {} + } + } + }, + "3xlarge": { + "$type": "number", + "$value": "{static.spacing.3xlarge}", + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["GAP"], + "codeSyntax": {} + } + } } }, "radius": { @@ -295,9 +355,9 @@ }, "size": { "container": { - "xxsmall": { + "5xsmall": { "$type": "number", - "$value": "{static.container.xxsmall}", + "$value": "{static.container.5xsmall}", "$description": "Use to define the minimum/maximum width and height of containers or layout elements. For example, box, card and grids.", "$extensions": { "com.figma": { @@ -307,10 +367,10 @@ } } }, - "xsmall": { + "4xsmall": { "$type": "number", - "$value": "{static.container.xsmall}", - "$description": "Use to define the minimum/maximum width and height of containers or layout elements. For example, box, card and grids.", + "$value": "{static.container.4xsmall}", + "$description": "", "$extensions": { "com.figma": { "hiddenFromPublishing": false, @@ -319,9 +379,9 @@ } } }, - "small": { + "3xsmall": { "$type": "number", - "$value": "{static.container.small}", + "$value": "{static.container.3xsmall}", "$description": "Use to define the minimum/maximum width and height of containers or layout elements. For example, box, card and grids.", "$extensions": { "com.figma": { @@ -331,9 +391,9 @@ } } }, - "smallPlus": { + "xxsmall": { "$type": "number", - "$value": "{static.container.smallPlus}", + "$value": "{static.container.xxsmall}", "$description": "", "$extensions": { "com.figma": { @@ -343,9 +403,9 @@ } } }, - "medium": { + "xsmall": { "$type": "number", - "$value": "{static.container.medium}", + "$value": "{static.container.xsmall}", "$description": "Use to define the minimum/maximum width and height of containers or layout elements. For example, box, card and grids.", "$extensions": { "com.figma": { @@ -355,9 +415,9 @@ } } }, - "mediumPlus": { + "small": { "$type": "number", - "$value": "{static.container.mediumPlus}", + "$value": "{static.container.small}", "$description": "", "$extensions": { "com.figma": { @@ -367,10 +427,22 @@ } } }, + "medium": { + "$type": "number", + "$value": "{static.container.medium}", + "$description": "Use to define the minimum/maximum width and height of containers or layout elements. For example, box, card and grids.", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["WIDTH_HEIGHT"], + "codeSyntax": {} + } + } + }, "large": { "$type": "number", "$value": "{static.container.large}", - "$description": "Use to define the minimum/maximum width and height of containers or layout elements. For example, box, card and grids.", + "$description": "", "$extensions": { "com.figma": { "hiddenFromPublishing": false, @@ -402,6 +474,18 @@ "codeSyntax": {} } } + }, + "3xlarge": { + "$type": "number", + "$value": "{static.container.3xlarge}", + "$description": "Use to define the minimum/maximum width and height of containers or layout elements. For example, box, card and grids.", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["WIDTH_HEIGHT"], + "codeSyntax": {} + } + } } }, "icon": { diff --git a/design-tokens/tokens/semantic/dimension.small.json b/design-tokens/tokens/semantic/dimension.small.json index c39ed591b..68dafd3b7 100644 --- a/design-tokens/tokens/semantic/dimension.small.json +++ b/design-tokens/tokens/semantic/dimension.small.json @@ -24,9 +24,45 @@ } } }, + "5xsmall": { + "$type": "number", + "$value": "{static.spacing.5xsmall}", + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["GAP"], + "codeSyntax": {} + } + } + }, + "4xsmall": { + "$type": "number", + "$value": "{static.spacing.5xsmall}", + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["GAP"], + "codeSyntax": {} + } + } + }, + "3xsmall": { + "$type": "number", + "$value": "{static.spacing.5xsmall}", + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["GAP"], + "codeSyntax": {} + } + } + }, "xxsmall": { "$type": "number", - "$value": "{static.spacing.xxsmall}", + "$value": "{static.spacing.4xsmall}", "$description": "", "$extensions": { "com.figma": { @@ -38,7 +74,7 @@ }, "xsmall": { "$type": "number", - "$value": "{static.spacing.xxsmall}", + "$value": "{static.spacing.3xsmall}", "$description": "", "$extensions": { "com.figma": { @@ -50,7 +86,7 @@ }, "small": { "$type": "number", - "$value": "{static.spacing.xsmall}", + "$value": "{static.spacing.xxsmall}", "$description": "", "$extensions": { "com.figma": { @@ -62,7 +98,7 @@ }, "medium": { "$type": "number", - "$value": "{static.spacing.small}", + "$value": "{static.spacing.xsmall}", "$description": "", "$extensions": { "com.figma": { @@ -74,7 +110,7 @@ }, "large": { "$type": "number", - "$value": "{static.spacing.medium}", + "$value": "{static.spacing.small}", "$description": "", "$extensions": { "com.figma": { @@ -85,6 +121,18 @@ } }, "xlarge": { + "$type": "number", + "$value": "{static.spacing.medium}", + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["GAP"], + "codeSyntax": {} + } + } + }, + "xxlarge": { "$type": "number", "$value": "{static.spacing.large}", "$description": "", @@ -95,6 +143,18 @@ "codeSyntax": {} } } + }, + "3xlarge": { + "$type": "number", + "$value": "{static.spacing.xlarge}", + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["GAP"], + "codeSyntax": {} + } + } } }, "radius": { @@ -295,9 +355,9 @@ }, "size": { "container": { - "xxsmall": { + "5xsmall": { "$type": "number", - "$value": "{static.container.xxsmall}", + "$value": "{static.container.5xsmall}", "$description": "Use to define the minimum/maximum width and height of containers or layout elements. For example, box, card and grids.", "$extensions": { "com.figma": { @@ -307,9 +367,21 @@ } } }, - "xsmall": { + "4xsmall": { "$type": "number", - "$value": "{static.container.xxsmall}", + "$value": "{static.container.5xsmall}", + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["WIDTH_HEIGHT"], + "codeSyntax": {} + } + } + }, + "3xsmall": { + "$type": "number", + "$value": "{static.container.5xsmall}", "$description": "Use to define the minimum/maximum width and height of containers or layout elements. For example, box, card and grids.", "$extensions": { "com.figma": { @@ -319,9 +391,21 @@ } } }, - "small": { + "xxsmall": { "$type": "number", - "$value": "{static.container.xsmall}", + "$value": "{static.container.4xsmall}", + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["WIDTH_HEIGHT"], + "codeSyntax": {} + } + } + }, + "xsmall": { + "$type": "number", + "$value": "{static.container.3xsmall}", "$description": "Use to define the minimum/maximum width and height of containers or layout elements. For example, box, card and grids.", "$extensions": { "com.figma": { @@ -331,9 +415,9 @@ } } }, - "smallPlus": { + "small": { "$type": "number", - "$value": "{static.container.small}", + "$value": "{static.container.xxsmall}", "$description": "", "$extensions": { "com.figma": { @@ -345,7 +429,7 @@ }, "medium": { "$type": "number", - "$value": "{static.container.small}", + "$value": "{static.container.xsmall}", "$description": "Use to define the minimum/maximum width and height of containers or layout elements. For example, box, card and grids.", "$extensions": { "com.figma": { @@ -355,9 +439,9 @@ } } }, - "mediumPlus": { + "large": { "$type": "number", - "$value": "{static.container.medium}", + "$value": "{static.container.small}", "$description": "", "$extensions": { "com.figma": { @@ -367,7 +451,7 @@ } } }, - "large": { + "xlarge": { "$type": "number", "$value": "{static.container.medium}", "$description": "Use to define the minimum/maximum width and height of containers or layout elements. For example, box, card and grids.", @@ -379,7 +463,7 @@ } } }, - "xlarge": { + "xxlarge": { "$type": "number", "$value": "{static.container.large}", "$description": "Use to define the minimum/maximum width and height of containers or layout elements. For example, box, card and grids.", @@ -391,7 +475,7 @@ } } }, - "xxlarge": { + "3xlarge": { "$type": "number", "$value": "{static.container.xlarge}", "$description": "Use to define the minimum/maximum width and height of containers or layout elements. For example, box, card and grids.", diff --git a/sandbox/grommet-app/src/themes/theme.jsx b/sandbox/grommet-app/src/themes/theme.jsx index e6e87d846..fb7ec362b 100644 --- a/sandbox/grommet-app/src/themes/theme.jsx +++ b/sandbox/grommet-app/src/themes/theme.jsx @@ -388,31 +388,35 @@ const buildTheme = tokens => { }; const containerTokens = 'container' in large.hpe.size; + // For grommet-theme-hpe v6.0.0, maintain backwards compatibility + // with old t-shirt sizes const size = breakpoint => ({ xxsmall: containerTokens - ? breakpoint.hpe.size.container.xxsmall + ? breakpoint.hpe.size.container['5xsmall'] : breakpoint.hpe.size.content.xxsmall, xsmall: containerTokens - ? breakpoint.hpe.size.container.xsmall + ? breakpoint.hpe.size.container['3xsmall'] : breakpoint.hpe.size.content.xsmall, small: containerTokens - ? breakpoint.hpe.size.container.small + ? breakpoint.hpe.size.container.xsmall : breakpoint.hpe.size.content.small, medium: containerTokens ? breakpoint.hpe.size.container.medium : breakpoint.hpe.size.content.medium, large: containerTokens - ? breakpoint.hpe.size.container.large + ? breakpoint.hpe.size.container.xlarge : breakpoint.hpe.size.content.large, xlarge: containerTokens - ? breakpoint.hpe.size.container.xlarge + ? breakpoint.hpe.size.container['3xlarge'] : breakpoint.hpe.size.content.xlarge, xxlarge: containerTokens - ? breakpoint.hpe.size.container.xxlarge + ? breakpoint.hpe.size.container['4xlarge'] : breakpoint.hpe.size.content.xxlarge, full: '100%', }); + // For grommet-theme-hpe v6.0.0, maintain backwards compatibility + // with old t-shirt sizes const dimensions = { borderSize: { xsmall: large.hpe.borderWidth.xsmall, @@ -425,12 +429,12 @@ const buildTheme = tokens => { edgeSize: { none: large.hpe.spacing.none, hair: large.hpe.spacing.hair, - xxsmall: large.hpe.spacing.xxsmall, - xsmall: large.hpe.spacing.xsmall, - small: large.hpe.spacing.small, + xxsmall: large.hpe.spacing['5xsmall'], + xsmall: large.hpe.spacing['3xsmall'], + small: large.hpe.spacing['xsmall'], medium: large.hpe.spacing.medium, - large: large.hpe.spacing.large, - xlarge: large.hpe.spacing.xlarge, + large: large.hpe.spacing.xlarge, + xlarge: large.hpe.spacing['3xlarge'], responsiveBreakpoint: 'small', }, size: size(large), @@ -531,7 +535,8 @@ const buildTheme = tokens => { }; const anchorSizeTheme = {}; - textSizes.forEach(size => { + textSizes.forEach(sizeArg => { + const size = sizeArg === '6xl' ? '5xl' : sizeArg; anchorSizeTheme[size] = { color: components.hpe.anchor.default.rest.textColor, textDecoration: components.hpe.anchor.default.rest.textDecoration, @@ -541,7 +546,8 @@ const buildTheme = tokens => { const paragraphTheme = {}; const textTheme = {}; - textSizes.forEach(size => { + textSizes.forEach(sizeArg => { + const size = sizeArg === '6xl' ? '5xl' : sizeArg; paragraphTheme[size] = { size: large.hpe.text?.[size]?.fontSize, height: large.hpe.text?.[size]?.lineHeight, @@ -1012,19 +1018,19 @@ const buildTheme = tokens => { color: 'text-strong', }, selected: { - background: 'background-selected-strong-enabled', - color: 'text-onSelectedStrong', + background: 'background-selected-primary-strong', + color: 'text-onSelectedPrimaryStrong', hover: { - background: 'background-selected-strong-hover', + background: 'background-selected-primary-strong-hover', }, font: { weight: global.hpe.fontWeight.bold, }, }, inRange: { - color: 'text-onSelected', + color: 'text-onSelectedPrimary', hover: { - background: 'background-selected-weak-hover', + background: 'background-selected-primary-weak-hover', }, font: { weight: global.hpe.fontWeight.medium, @@ -1033,7 +1039,7 @@ const buildTheme = tokens => { extend: '', }, range: { - background: 'background-selected-weak-enabled', + background: 'background-selected-primary-weak', }, icons: { // next: Next, @@ -1992,7 +1998,7 @@ const buildTheme = tokens => { wide: { width: { min: '336px', // 336 + 24 (margin) + 24 (margin) = 384 (e.g. 'medium') - max: 'xxlarge', + max: 'xlarge', }, xsmall: { pad: { horizontal: 'large' }, @@ -2295,8 +2301,8 @@ const buildTheme = tokens => { }, spinner: { container: { - pad: 'none', // Should we have universal token here for none? - color: 'background-primary-default', // Is this the right token for here? + pad: 'none', + color: 'foreground-primary', // tokens? border: [ { color: 'border-weak', side: 'all', size: 'medium' }, @@ -2307,14 +2313,14 @@ const buildTheme = tokens => { }, size: { xsmall: components.hpe.element?.xsmall.minHeight, - small: components.hpe.element?.small.minHeight, // TO DO should these align? this was before we standardized on component sizes + small: components.hpe.element?.small.minHeight, medium: components.hpe.element?.medium.minHeight, large: components.hpe.element?.large.minHeight, xlarge: components.hpe.element?.xlarge.minHeight, }, }, starRating: { - color: 'background-selected-strong-enabled', + color: 'background-selected-primary-strong', }, tab: { color: 'text', @@ -2544,10 +2550,10 @@ const buildTheme = tokens => { }, thumbsRating: { like: { - color: 'background-selected-strong-enabled', + color: 'background-selected-primary-strong', }, dislike: { - color: 'background-selected-strong-enabled', + color: 'background-selected-primary-strong', }, }, toggleGroup: { From 261b8ed8e684fe3a31eb637095655e1c8ea980ed Mon Sep 17 00:00:00 2001 From: taysea Date: Thu, 16 Jan 2025 15:40:05 -0800 Subject: [PATCH 08/13] Pull in demo/theme-next theme file to align adjustments --- sandbox/grommet-app/src/themes/theme.jsx | 313 ++++++++++++++--------- 1 file changed, 192 insertions(+), 121 deletions(-) diff --git a/sandbox/grommet-app/src/themes/theme.jsx b/sandbox/grommet-app/src/themes/theme.jsx index fb7ec362b..e0416878d 100644 --- a/sandbox/grommet-app/src/themes/theme.jsx +++ b/sandbox/grommet-app/src/themes/theme.jsx @@ -1,5 +1,8 @@ import { css } from 'styled-components'; -import { deepFreeze } from 'grommet/utils'; +import { + deepFreeze, + // deepMerge +} from 'grommet/utils'; import { dark as localDark, light as localLight, @@ -8,26 +11,6 @@ import { global as localGlobal, components as localComponents, } from 'hpe-design-tokens/grommet'; -// import { -// dark as oldDark, -// light as oldLight, -// large as oldLarge, -// small as oldSmall, -// global as oldGlobal, -// components as oldComponents, -// elevationdark as oldElevationDark, -// elevationlight as oldElevationLight, -// } from 'hpe-design-tokens-old-theme'; -// import { -// dark as refreshDark, -// light as refreshLight, -// large as refreshLarge, -// small as refreshSmall, -// global as refreshGlobal, -// components as refreshComponents, -// elevationdark as refreshElevationDark, -// elevationlight as refreshElevationLight, -// } from 'hpe-design-tokens-brand-refresh'; import { Down, Blank, @@ -39,11 +22,7 @@ import { Descending, Unsorted, } from 'grommet-icons'; - -const MISSING = { - color: 'red', - weight: 700, -}; +import { hpe } from 'grommet-theme-hpe'; // TO DO should these be added as tokens? const backgrounds = { @@ -169,7 +148,7 @@ const access = (path, object) => { const componentSizes = ['xsmall', 'small', 'medium', 'large', 'xlarge']; const buttonKinds = ['default', 'secondary', 'primary', 'toolbar']; -const buttonStates = ['active', 'hover', 'disabled']; +const buttonStates = ['hover', 'active', 'disabled']; const textSizes = [ 'xsmall', @@ -232,16 +211,18 @@ const buildTheme = tokens => { 'status-error': undefined, // ---- TO DO: Tokens do not exist, should they? ---- // - brand: MISSING.color, - control: MISSING.color, - 'active-text': MISSING.color, - 'disabled-text': MISSING.color, // deprecated, use text-weak instead + control: 'background-primary-strong', + 'active-text': 'text-strong', 'text-primary-button': components.hpe.button.primary.rest.textColor, - 'background-cta-alternate': MISSING.color, + 'background-cta-alternate': 'background-contrast', // ----------- These ones we need to map manually for backwards compatibility ----------- // ----------- with current color namespace --------------- + brand: { + dark: dark.hpe.color.decorative.brand, + light: light.hpe.color.decorative.brand, + }, 'background-layer-overlay': { dark: dark.hpe.color.background.screenOverlay, light: light.hpe.color.background.screenOverlay, @@ -380,15 +361,15 @@ const buildTheme = tokens => { dark: dark.hpe.color.icon.default, }, 'selected-background': 'background-selected-strong-enabled', - 'selected-text': 'text-onSelectedStrong', + 'selected-text': 'text-onSelectedPrimaryStrong', placeholder: { light: light.hpe.color.text.placeholder, dark: dark.hpe.color.text.placeholder, }, + 'disabled-text': 'text-disabled', // deprecate }; - const containerTokens = 'container' in large.hpe.size; - // For grommet-theme-hpe v6.0.0, maintain backwards compatibility + const containerTokens = 'container' in large.hpe.size; // For grommet-theme-hpe v6.0.0, maintain backwards compatibility // with old t-shirt sizes const size = breakpoint => ({ xxsmall: containerTokens @@ -604,6 +585,25 @@ const buildTheme = tokens => { components.hpe.button?.[kind]?.[adjustedState].rest.fontWeight, }, }; + if (!('active' in buttonStatesTheme.hover)) + buttonStatesTheme.hover.active = {}; + buttonStatesTheme.hover[state][kind] = { + background: { + color: + components.hpe.button?.[kind]?.[adjustedState]?.hover?.background, + }, + border: { + color: + components.hpe.button?.[kind]?.[adjustedState]?.hover + ?.borderColor, + }, + color: + components.hpe.button?.[kind]?.[adjustedState]?.hover?.textColor, + font: { + weight: + components.hpe.button?.[kind]?.[adjustedState]?.hover?.fontWeight, + }, + }; } else if (kind === 'option') { if (state === 'active') adjustedState = 'selected'; buttonStatesTheme[state][kind] = { @@ -835,6 +835,7 @@ const buildTheme = tokens => { large: elevationlight ? elevationlight.hpe.elevation.large : light.hpe.shadow.large, + 'inset-selected': `inset 3px 0 ${light.hpe.color.border.selected}`, }, dark: { small: elevationdark @@ -846,15 +847,16 @@ const buildTheme = tokens => { large: elevationdark ? elevationdark.hpe.elevation.large : dark.hpe.shadow.large, + 'inset-selected': `inset 3px 0 ${dark.hpe.color.border.selected}`, }, }, hover: { background: 'background-hover', - color: MISSING.color, // TO DO + color: 'text-default', }, selected: { - background: 'background-selected-strong-enabled', - color: 'text-onSelectedStrong', + background: 'background-selected-primary-strong', + color: 'text-onSelectedPrimaryStrong', }, }, accordion: { @@ -965,6 +967,7 @@ const buildTheme = tokens => { font: { weight: components.hpe.select.option.selected.rest.fontWeight, }, + elevation: 'inset-selected', }, }, hover: { @@ -974,20 +977,41 @@ const buildTheme = tokens => { extend: '', // TO DO can remove when merging, temp to override extend }, ...buttonStatesTheme.hover, + option: { + extend: props => + props['aria-selected'] && + ` + background: ${ + props.theme.global.colors[ + components.hpe.select.option.selected.hover.background + ][props.theme.dark ? 'dark' : 'light'] + }; + box-shadow: ${ + props.theme.global.elevation[props.theme.dark ? 'dark' : 'light'][ + 'inset-selected' + ] + }; + &:focus:not(:focus-visible) { + box-shadow: ${ + props.theme.global.elevation[props.theme.dark ? 'dark' : 'light'][ + 'inset-selected' + ] + }; + } + `, + }, }, size: { - xsmall: { - border: { - radius: '2em', - }, - iconOnly: { + ...buttonSizesTheme, + medium: { + ...buttonSizesTheme.medium, + option: { pad: { - vertical: '3px', - horizontal: '3px', + horizontal: components.hpe.select.medium.option.paddingX, + vertical: components.hpe.select.medium.option.paddingY, }, }, }, - ...buttonSizesTheme, }, extend: ({ active, kind, sizeProp, theme }) => { let style = ''; @@ -1052,8 +1076,8 @@ const buildTheme = tokens => { daySize: '27.43px', title: { size: 'medium', - weight: MISSING.weight, - color: MISSING.color, + weight: global.hpe.fontWeight.medium, + color: 'text-strong', }, }, medium: { @@ -1082,19 +1106,16 @@ const buildTheme = tokens => { daySize: '109.71px', title: { size: 'xlarge', - weight: MISSING.weight, - color: MISSING.color, + weight: global.hpe.fontWeight.medium, + color: 'text-strong', }, }, }, card: { container: { background: 'background-front', - elevation: 'medium', // v5 - // elevation: 'none', // Brand refresh change - // Q should this have a token? - // A yes, but we haven't filled in "motion" tokens yet - extend: 'transition: all 0.3s ease-in-out;', + elevation: 'medium', + extend: 'transition: all 0.3s ease-in-out;', // TO DO motion tokens }, body: { pad: 'medium', @@ -1107,7 +1128,7 @@ const buildTheme = tokens => { }, hover: { container: { - elevation: 'large', // v5 + elevation: 'large', }, }, }, @@ -1145,16 +1166,18 @@ const buildTheme = tokens => { check: { radius: components.hpe.checkbox.medium.control.borderRadius, thickness: components.hpe.checkbox.control.hover.borderWidth, - extend: ({ theme, checked, indeterminate }) => ` + extend: ({ theme, checked, indeterminate, disabled }) => ` margin-block: ${ dimensions.borderSize[ components.hpe.checkbox.medium.control.marginY ] || components.hpe.checkbox.medium.control.marginY }px; background: ${ - theme.global.colors[ - components.hpe.checkbox.control.rest.background - ]?.[theme.dark ? 'dark' : 'light'] + theme.global.colors[components.hpe.checkbox.control.rest.background] + ? theme.global.colors[ + components.hpe.checkbox.control.rest.background + ]?.[theme.dark ? 'dark' : 'light'] + : components.hpe.checkbox.control.rest.background }; background-color: ${ checked || indeterminate @@ -1164,6 +1187,18 @@ const buildTheme = tokens => { : '' }; &:hover { + ${ + !disabled && + ` + background: ${ + theme.global.colors[ + components.hpe.checkbox.control.hover.background + ] + ? theme.global.colors[ + components.hpe.checkbox.control.hover.background + ]?.[theme.dark ? 'dark' : 'light'] + : components.hpe.checkbox.control.hover.background + }; background: ${ checked || indeterminate ? theme.global.colors[ @@ -1173,6 +1208,9 @@ const buildTheme = tokens => { components.hpe.checkbox.control.hover.background ]?.[theme.dark ? 'dark' : 'light'] }; + ` + } + } ${(checked || indeterminate) && 'border: none;'} `, @@ -1185,10 +1223,7 @@ const buildTheme = tokens => { ]?.[theme.dark ? 'dark' : 'light'] }`, }, - // Q make sure this is 12px is small gap: components.hpe.checkbox.medium.gapX, - // Q do we need a token here? - // A good question, not sure if this a grommet-ism? label: { align: 'start', }, @@ -1205,7 +1240,7 @@ const buildTheme = tokens => { size: components.hpe.switch.medium.control.track.width, // TO DO need token for handle elevation knob: { - extend: ({ theme }) => ` + extend: ({ theme, checked }) => ` box-shadow: ${ theme.global.elevation[theme.dark ? 'dark' : 'light'].small }; @@ -1220,6 +1255,8 @@ const buildTheme = tokens => { }; width: ${components.hpe.switch.medium.control.handle.width}; height: ${components.hpe.switch.medium.control.handle.height}; + // top: 1px; // TO DO token? + // ${!checked ? 'left: 1px;' : ''} // TO DO token? `, }, extend: ({ checked, theme }) => ` @@ -1420,7 +1457,7 @@ const buildTheme = tokens => { }, }, dragOver: { - background: MISSING.color, + background: 'background-hover', border: 'none', }, hover: { @@ -1538,12 +1575,12 @@ const buildTheme = tokens => { label: { margin: { bottom: 'none' }, size: 'medium', - weight: MISSING.weight, + weight: 500, }, }, }, heading: { - color: 'heading', + color: 'text-heading', weight: large.hpe.heading.xlarge.fontWeight, // Q: not sure what token to point to here level: { 1: { @@ -1708,7 +1745,7 @@ const buildTheme = tokens => { }, icon: { disableScaleDown: true, - matchSize: true, // NOTE: Disabled this since concept didn't exist in v3 + matchSize: true, size: { xsmall: large.hpe.size.icon.xsmall, small: large.hpe.size.icon.small, @@ -1834,7 +1871,7 @@ const buildTheme = tokens => { critical: { background: 'background-critical', message: { - color: 'text-onCritical-default', + color: 'text-onCritical', }, title: { color: 'text-onCritical-strong', @@ -1842,7 +1879,7 @@ const buildTheme = tokens => { global: { background: 'background-critical', message: { - color: 'text-onCritical-default', + color: 'text-onCritical', }, title: { color: 'text-onCritical-strong', @@ -1861,7 +1898,7 @@ const buildTheme = tokens => { warning: { background: 'background-warning', message: { - color: 'text-onWarning-default', + color: 'text-onWarning', }, title: { color: 'text-onWarning-strong', @@ -1869,7 +1906,7 @@ const buildTheme = tokens => { global: { background: 'background-warning', message: { - color: 'text-onWarning-default', + color: 'text-onWarning', }, title: { color: 'text-onWarning-strong', @@ -1888,7 +1925,7 @@ const buildTheme = tokens => { normal: { background: 'background-ok', message: { - color: 'text-onOk-default', + color: 'text-onOk', }, title: { color: 'text-onOk-strong', @@ -1896,7 +1933,7 @@ const buildTheme = tokens => { global: { background: 'background-ok', message: { - color: 'text-onOk-default', + color: 'text-onOk', }, title: { color: 'text-onOk-strong', @@ -1915,7 +1952,7 @@ const buildTheme = tokens => { unknown: { background: 'background-unknown', message: { - color: 'text-onUnknown-default', + color: 'text-onUnknown', }, title: { color: 'text-onUnknown-strong', @@ -1923,7 +1960,7 @@ const buildTheme = tokens => { global: { background: 'background-unknown', message: { - color: 'text-onUnknown-default', + color: 'text-onUnknown', }, title: { color: 'text-onUnknown-strong', @@ -1969,7 +2006,7 @@ const buildTheme = tokens => { undefined: { background: 'background-unknown', message: { - color: 'text-onUnknown-default', + color: 'text-onUnknown', }, title: { color: 'text-onUnknown-strong', @@ -1977,7 +2014,7 @@ const buildTheme = tokens => { global: { background: 'background-ok', message: { - color: 'text-onUnknown-default', + color: 'text-onUnknown', }, title: { color: 'text-onUnknown-strong', @@ -2147,7 +2184,7 @@ const buildTheme = tokens => { ? components.hpe.button.medium.default.borderWidth : components.hpe.button.default.medium.borderWidth ] || oldTheme - ? components.hpe.button.medium.default.borderWidth + ? components.hpe.button.medium?.default.borderWidth : components.hpe.button.default.medium.borderWidth, }, pad: { @@ -2172,7 +2209,7 @@ const buildTheme = tokens => { ? components.hpe.button.large.default.borderWidth : components.hpe.button.default.large.borderWidth ] || oldTheme - ? components.hpe.button.large.default.borderWidth + ? components.hpe.button.large?.default.borderWidth : components.hpe.button.default.large.borderWidth, }, pad: { @@ -2217,8 +2254,8 @@ const buildTheme = tokens => { `, }, extend: () => ` - padding-block: ${components.hpe.formField.medium.input.group.item.paddingY}; - `, + padding-block: ${components.hpe.formField.medium.input.group.item.paddingY}; + `, gap: components.hpe.radioButton.medium.gapX, hover: { background: { @@ -2253,12 +2290,12 @@ const buildTheme = tokens => { }, rangeInput: { thumb: { - color: 'background-primary-default', // Should this instead be "control"? + color: 'background-primary-strong', // Should this instead be "control"? }, track: { lower: { // TO DO is this the right token for here? - color: 'background-primary-default', + color: 'background-primary-strong', }, upper: { color: 'border', @@ -2348,7 +2385,7 @@ const buildTheme = tokens => { }, }, disabled: { - color: 'text-xweak', + color: 'text-disabled', }, pad: { // top and bottom pad need to be defined individually, specifying @@ -2420,7 +2457,7 @@ const buildTheme = tokens => { }, footer: { extend: ` - font-weight: ${MISSING.weight}; + font-weight: ${components.hpe.footerCell.fontWeight}; `, }, }, @@ -2441,9 +2478,6 @@ const buildTheme = tokens => { kind: 'default', }, value: { - // Q should this be a token? - // A: Good question..similar to other areas, we might want a weight.emphasis or something - // weight: MISSING.weight, // TO DO weight: global.hpe.fontWeight.medium, }, round: 'large', @@ -2600,40 +2634,77 @@ export const current = buildTheme({ components: localComponents, }); -export const warm = buildTheme({ - light: localLight, - dark: localDark, - small: localSmall, - large: localMedium, - global: localGlobal, - components: localComponents, -}); - -// export const old = buildTheme({ -// light: oldLight, -// dark: oldDark, -// small: oldSmall, -// large: oldLarge, -// elevationlight: oldElevationLight, -// elevationdark: oldElevationDark, -// global: oldGlobal, -// components: oldComponents, -// }); +// need to extend hpe with new token namespace to "fill gaps" for sake of demo +// when toggling between themes +// const newColors = { +// 'background-floating': 'background-front', +// 'background-screenOverlay': 'background-layer-overlay', +// 'background-unknown': 'background-contrast', +// 'background-info': 'background-contrast', +// 'background-critical': 'validation-critical', +// 'background-warning': 'validation-warning', +// 'background-ok': 'validation-ok', +// 'background-primary-strong': 'brand', +// 'background-primary-strong-hover': 'brand', +// 'background-selected-strong-enabled': 'background-primary-strong', +// 'background-selected-strong-hover': 'background-primary-strong-hover', +// 'background-neutral-xstrong': {}, +// 'border-disabled': 'text-disabled', +// 'border-selected': 'brand', +// 'border-critical': 'border', +// 'border-warning': 'border', +// 'border-ok': 'border', +// 'border-info': 'border', +// 'border-unknown': 'border', +// 'text-placeholder': 'placeholder', +// 'text-onPrimary': 'text-primary-button', +// 'text-critical': 'text', +// 'text-warning': 'text', +// 'text-ok': 'text', +// 'text-info': 'text', +// 'text-unknown': 'text', +// 'text-onSelectedPrimaryStrong': 'text-primary-button', +// 'text-onSelectedPrimary': 'text', +// 'text-heading': 'text-strong', +// 'text-onStrong': 'text-primary-button', +// 'text-onCritical': 'text', +// 'text-onCritical-strong': 'text-strong', +// 'text-onWarning': 'text', +// 'text-onWarning-strong': 'text-strong', +// 'text-onOk': 'text', +// 'text-onOk-strong': 'text-strong', +// 'text-onInfo': 'text', +// 'text-Info-strong': 'text-strong', +// 'text-onUnknown': 'text', +// 'text-onUnknown-strong': 'text-strong', +// 'text-primary': {}, +// 'icon-primary': 'brand', +// 'icon-default': 'text', +// 'icon-critical': 'status-critical', +// 'icon-warning': 'status-warning', +// 'icon-ok': 'status-ok', +// 'icon-info': 'text', +// 'icon-unknown': 'status-unknown', +// 'icon-onPrimaryStrong': 'text-primary-button', +// 'icon-onSelectedPrimaryStrong': 'text-primary-button', +// 'icon-onSelectedPrimary': 'icon-default', +// 'foreground-primary': 'brand', +// 'foreground-critical': 'status-critical', +// 'foreground-warning': 'status-warning', +// 'foreground-unknown': 'status-unknown', +// 'graph-5': 'graph-0', +// 'graph-6': 'graph-1', +// }; -// export const refresh = buildTheme({ -// light: refreshLight, -// dark: refreshDark, -// small: refreshSmall, -// large: refreshLarge, -// elevationlight: refreshElevationLight, -// elevationdark: refreshElevationDark, -// global: refreshGlobal, -// components: refreshComponents, -// refresh: true, +// const v5 = deepMerge(hpe, { +// global: { +// colors: { +// ...newColors, +// }, +// }, // }); export const themes = { - local: current, - // v3: old, - // refresh, + // next: current, + current: current, }; From 9522b057973e4f0c879a52fea5548c2a995e147d Mon Sep 17 00:00:00 2001 From: Taylor Seamans Date: Fri, 17 Jan 2025 14:11:33 -0800 Subject: [PATCH 09/13] Create selfish-carrots-leave.md --- .changeset/selfish-carrots-leave.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/selfish-carrots-leave.md diff --git a/.changeset/selfish-carrots-leave.md b/.changeset/selfish-carrots-leave.md new file mode 100644 index 000000000..c41fc28e4 --- /dev/null +++ b/.changeset/selfish-carrots-leave.md @@ -0,0 +1,5 @@ +--- +"hpe-design-tokens": minor +--- + +- Updated t-shirt scales and values for `spacing` and `container` tokens. From 90ae7daecb4ab57a68d64784b13691a84c9130d4 Mon Sep 17 00:00:00 2001 From: taysea Date: Fri, 17 Jan 2025 14:21:33 -0800 Subject: [PATCH 10/13] Fix backwards compatibility of xxlarge --- sandbox/grommet-app/src/themes/theme.jsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/sandbox/grommet-app/src/themes/theme.jsx b/sandbox/grommet-app/src/themes/theme.jsx index 95487ab3b..22371e21f 100644 --- a/sandbox/grommet-app/src/themes/theme.jsx +++ b/sandbox/grommet-app/src/themes/theme.jsx @@ -388,10 +388,10 @@ const buildTheme = tokens => { ? breakpoint.hpe.size.container.xlarge : breakpoint.hpe.size.content.large, xlarge: containerTokens - ? breakpoint.hpe.size.container['3xlarge'] + ? breakpoint.hpe.size.container.xxlarge : breakpoint.hpe.size.content.xlarge, xxlarge: containerTokens - ? breakpoint.hpe.size.container['4xlarge'] + ? breakpoint.hpe.size.container['3xlarge'] : breakpoint.hpe.size.content.xxlarge, full: '100%', }); @@ -2065,7 +2065,7 @@ const buildTheme = tokens => { wide: { width: { min: '336px', // 336 + 24 (margin) + 24 (margin) = 384 (e.g. 'medium') - max: 'xlarge', + max: 'xxlarge', }, xsmall: { pad: { horizontal: 'large' }, From 3fca846bcf88931153c10b5f9448cf719971625e Mon Sep 17 00:00:00 2001 From: taysea Date: Fri, 17 Jan 2025 15:42:56 -0800 Subject: [PATCH 11/13] Add buildTheme feature flag --- sandbox/grommet-app/src/themes/theme.jsx | 92 +++++++++++++++--------- 1 file changed, 60 insertions(+), 32 deletions(-) diff --git a/sandbox/grommet-app/src/themes/theme.jsx b/sandbox/grommet-app/src/themes/theme.jsx index 22371e21f..04f40814d 100644 --- a/sandbox/grommet-app/src/themes/theme.jsx +++ b/sandbox/grommet-app/src/themes/theme.jsx @@ -163,7 +163,7 @@ const textSizes = [ '6xl', ]; -const buildTheme = tokens => { +const buildTheme = (tokens, flags) => { const { light, dark, @@ -369,35 +369,31 @@ const buildTheme = tokens => { 'disabled-text': 'text-disabled', // deprecate }; - const containerTokens = 'container' in large.hpe.size; // For grommet-theme-hpe v6.0.0, maintain backwards compatibility - // with old t-shirt sizes const size = breakpoint => ({ - xxsmall: containerTokens + xxsmall: flags['v6-backwards-compatibility'] ? breakpoint.hpe.size.container['5xsmall'] - : breakpoint.hpe.size.content.xxsmall, - xsmall: containerTokens + : breakpoint.hpe.size.container.xxsmall, + xsmall: flags['v6-backwards-compatibility'] ? breakpoint.hpe.size.container['3xsmall'] - : breakpoint.hpe.size.content.xsmall, - small: containerTokens + : breakpoint.hpe.size.container.xsmall, + small: flags['v6-backwards-compatibility'] ? breakpoint.hpe.size.container.xsmall - : breakpoint.hpe.size.content.small, - medium: containerTokens + : breakpoint.hpe.size.container.small, + medium: flags['v6-backwards-compatibility'] ? breakpoint.hpe.size.container.medium - : breakpoint.hpe.size.content.medium, - large: containerTokens + : breakpoint.hpe.size.container.medium, + large: flags['v6-backwards-compatibility'] ? breakpoint.hpe.size.container.xlarge - : breakpoint.hpe.size.content.large, - xlarge: containerTokens + : breakpoint.hpe.size.container.large, + xlarge: flags['v6-backwards-compatibility'] ? breakpoint.hpe.size.container.xxlarge - : breakpoint.hpe.size.content.xlarge, - xxlarge: containerTokens + : breakpoint.hpe.size.container.xlarge, + xxlarge: flags['v6-backwards-compatibility'] ? breakpoint.hpe.size.container['3xlarge'] - : breakpoint.hpe.size.content.xxlarge, + : breakpoint.hpe.size.container.xxlarge, full: '100%', }); - // For grommet-theme-hpe v6.0.0, maintain backwards compatibility - // with old t-shirt sizes const dimensions = { borderSize: { xsmall: large.hpe.borderWidth.xsmall, @@ -410,12 +406,37 @@ const buildTheme = tokens => { edgeSize: { none: large.hpe.spacing.none, hair: large.hpe.spacing.hair, - xxsmall: large.hpe.spacing['5xsmall'], - xsmall: large.hpe.spacing['3xsmall'], - small: large.hpe.spacing['xsmall'], + '5xsmall': flags['v6-backwards-compatibility'] + ? undefined + : large.hpe.spacing['5xsmall'], + '4xsmall': flags['v6-backwards-compatibility'] + ? undefined + : large.hpe.spacing['4xsmall'], + '3xsmall': flags['v6-backwards-compatibility'] + ? undefined + : large.hpe.spacing['3xsmall'], + xxsmall: flags['v6-backwards-compatibility'] + ? large.hpe.spacing['5xsmall'] + : large.hpe.spacing.xxsmall, + xsmall: flags['v6-backwards-compatibility'] + ? large.hpe.spacing['3xsmall'] + : large.hpe.spacing.xsmall, + small: flags['v6-backwards-compatibility'] + ? large.hpe.spacing['xsmall'] + : large.hpe.spacing.small, medium: large.hpe.spacing.medium, - large: large.hpe.spacing.xlarge, - xlarge: large.hpe.spacing['3xlarge'], + large: flags['v6-backwards-compatibility'] + ? large.hpe.spacing.xlarge + : large.hpe.spacing.large, + xlarge: flags['v6-backwards-compatibility'] + ? large.hpe.spacing['3xlarge'] + : large.hpe.spacing.xlarge, + xxlarge: flags['v6-backwards-compatibility'] + ? undefined + : large.hpe.spacing.xxlarge, + '3xlarge': flags['v6-backwards-compatibility'] + ? undefined + : large.hpe.spacing['3xlarge'], responsiveBreakpoint: 'small', }, size: size(large), @@ -2655,14 +2676,21 @@ const buildTheme = tokens => { }); }; -export const current = buildTheme({ - light: localLight, - dark: localDark, - small: localSmall, - large: localMedium, - global: localGlobal, - components: localComponents, -}); +export const current = buildTheme( + { + light: localLight, + dark: localDark, + small: localSmall, + large: localMedium, + global: localGlobal, + components: localComponents, + }, + { + // For grommet-theme-hpe v6.0.0, maintain backwards compatibility + // with old t-shirt sizes + 'v6-backwards-compatibility': true, + }, +); // need to extend hpe with new token namespace to "fill gaps" for sake of demo // when toggling between themes From 78fc2071e035db3e80a3075f11f625f7812a0232 Mon Sep 17 00:00:00 2001 From: taysea Date: Fri, 17 Jan 2025 15:44:37 -0800 Subject: [PATCH 12/13] Hardcode 1152px value --- sandbox/grommet-app/src/themes/theme.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/sandbox/grommet-app/src/themes/theme.jsx b/sandbox/grommet-app/src/themes/theme.jsx index 04f40814d..96b1d8eb8 100644 --- a/sandbox/grommet-app/src/themes/theme.jsx +++ b/sandbox/grommet-app/src/themes/theme.jsx @@ -386,7 +386,7 @@ const buildTheme = (tokens, flags) => { ? breakpoint.hpe.size.container.xlarge : breakpoint.hpe.size.container.large, xlarge: flags['v6-backwards-compatibility'] - ? breakpoint.hpe.size.container.xxlarge + ? '1152px' : breakpoint.hpe.size.container.xlarge, xxlarge: flags['v6-backwards-compatibility'] ? breakpoint.hpe.size.container['3xlarge'] From 5e46c19e86c85c26b78ccabe34e947b0a21ace0a Mon Sep 17 00:00:00 2001 From: taysea Date: Tue, 21 Jan 2025 10:05:38 -0800 Subject: [PATCH 13/13] Fix primitive values --- .../tokens/primitive/primitives.default.json | 14 +------------- 1 file changed, 1 insertion(+), 13 deletions(-) diff --git a/design-tokens/tokens/primitive/primitives.default.json b/design-tokens/tokens/primitive/primitives.default.json index e955520bd..9d99c1f2a 100644 --- a/design-tokens/tokens/primitive/primitives.default.json +++ b/design-tokens/tokens/primitive/primitives.default.json @@ -422,18 +422,6 @@ } }, "38400": { - "$type": "number", - "$value": 1152, - "$description": "", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": [], - "codeSyntax": {} - } - } - }, - "76800": { "$type": "number", "$value": 1536, "$description": "", @@ -2479,7 +2467,7 @@ }, "3xlarge": { "$type": "number", - "$value": "{base.dimension.76800}", + "$value": "{base.dimension.38400}", "$description": "", "$extensions": { "com.figma": {