From 00c4336c5010a1854f534a106cc020b56fa34b26 Mon Sep 17 00:00:00 2001 From: taysea Date: Thu, 31 Oct 2024 15:26:37 -0700 Subject: [PATCH] Rename elevation tokens to shadow and update scripts --- design-tokens/src/token_export.ts | 8 +-- design-tokens/src/utils.ts | 2 +- design-tokens/tokens/semantic/color.dark.json | 54 +++++++++---------- .../tokens/semantic/color.light.json | 54 +++++++++---------- sandbox/grommet-app/src/theme.jsx | 12 ++--- 5 files changed, 65 insertions(+), 65 deletions(-) diff --git a/design-tokens/src/token_export.ts b/design-tokens/src/token_export.ts index 69aff1982..32e453e07 100644 --- a/design-tokens/src/token_export.ts +++ b/design-tokens/src/token_export.ts @@ -49,8 +49,8 @@ export function tokenFilesFromLocalVariables( localVariablesResponse.meta.variableCollections; const localVariables = localVariablesResponse.meta.variables; const shadows: { [key: string]: any } = {}; - shadows.elevation = {}; - const root = shadows.elevation; // TO DO this hard codes the concept of "elevation" in shadow naming + shadows.shadow = {}; + const root = shadows.shadow; // TO DO this hard codes the concept of "shadow" in shadow naming Object.values(localVariables).forEach(variable => { // Skip remote variables because we only want to generate tokens for local variables @@ -153,7 +153,7 @@ export function tokenFilesFromLocalVariables( localVariables, ); } - } else if (variable.name.includes('elevation')) { + } else if (/^shadow/.test(variable.name)) { const parts = variable.name.split('/'); const shadow = parts.slice(1, 2).join(''); const property = parts[parts.length - 1]; @@ -179,7 +179,7 @@ export function tokenFilesFromLocalVariables( }, }; else { - // elevation/small/2/offsetY --> need index 1 + // shadow/small/2/offsetY --> need index 1 const index = parseInt(parts[parts.length - 3], 10) >= 0 ? parseInt(parts[parts.length - 3], 10) diff --git a/design-tokens/src/utils.ts b/design-tokens/src/utils.ts index ead432393..6b5fd6035 100644 --- a/design-tokens/src/utils.ts +++ b/design-tokens/src/utils.ts @@ -40,7 +40,7 @@ export const nonComponentTokens: string[] = [ 'heading', 'display', 'paragraph', - 'elevation', + 'shadow', 'size', 'fontStack', 'breakpoint', diff --git a/design-tokens/tokens/semantic/color.dark.json b/design-tokens/tokens/semantic/color.dark.json index 3c534018d..29e390555 100644 --- a/design-tokens/tokens/semantic/color.dark.json +++ b/design-tokens/tokens/semantic/color.dark.json @@ -109,6 +109,32 @@ } } }, + "primary": { + "default": { + "$type": "color", + "$value": "{base.color.green.600}", + "$description": "The default primary color of components at a rest/ enabled state. The term ‘primary’ denoting hierarchy - the most important thing. Use to style components prominently and give greater visual hierarchy.", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["FRAME_FILL", "SHAPE_FILL"], + "codeSyntax": {} + } + } + }, + "hover": { + "$type": "color", + "$value": "{TBD}", + "$description": "Hover color variant of the primary color.", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["FRAME_FILL", "SHAPE_FILL"], + "codeSyntax": {} + } + } + } + }, "unknown": { "$type": "color", "$value": "{base.color.white.opacity6}", @@ -199,32 +225,6 @@ } } }, - "primary": { - "default": { - "$type": "color", - "$value": "{base.color.green.600}", - "$description": "The default primary color of components at a rest/ enabled state. The term ‘primary’ denoting hierarchy - the most important thing. Use to style components prominently and give greater visual hierarchy.", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["FRAME_FILL", "SHAPE_FILL"], - "codeSyntax": {} - } - } - }, - "hover": { - "$type": "color", - "$value": "{TBD}", - "$description": "Hover color variant of the primary color.", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["FRAME_FILL", "SHAPE_FILL"], - "codeSyntax": {} - } - } - } - }, "ok": { "$type": "color", "$value": "{base.color.green.500-Opacity30}", @@ -1147,7 +1147,7 @@ } } }, - "elevation": { + "shadow": { "small": { "$type": "shadow", "$value": [ diff --git a/design-tokens/tokens/semantic/color.light.json b/design-tokens/tokens/semantic/color.light.json index d9716a25b..c07e36440 100644 --- a/design-tokens/tokens/semantic/color.light.json +++ b/design-tokens/tokens/semantic/color.light.json @@ -109,6 +109,32 @@ } } }, + "primary": { + "default": { + "$type": "color", + "$value": "{base.color.green.600}", + "$description": "The default primary color of components at a rest/ enabled state. The term ‘primary’ denoting hierarchy - the most important thing. Use to style components prominently and give greater visual hierarchy.", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["FRAME_FILL", "SHAPE_FILL"], + "codeSyntax": {} + } + } + }, + "hover": { + "$type": "color", + "$value": "{TBD}", + "$description": "Hover color variant of the primary color.", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["FRAME_FILL", "SHAPE_FILL"], + "codeSyntax": {} + } + } + } + }, "unknown": { "$type": "color", "$value": "{base.color.black.opacity4}", @@ -199,32 +225,6 @@ } } }, - "primary": { - "default": { - "$type": "color", - "$value": "{base.color.green.600}", - "$description": "The default primary color of components at a rest/ enabled state. The term ‘primary’ denoting hierarchy - the most important thing. Use to style components prominently and give greater visual hierarchy.", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["FRAME_FILL", "SHAPE_FILL"], - "codeSyntax": {} - } - } - }, - "hover": { - "$type": "color", - "$value": "{TBD}", - "$description": "Hover color variant of the primary color.", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["FRAME_FILL", "SHAPE_FILL"], - "codeSyntax": {} - } - } - } - }, "ok": { "$type": "color", "$value": "{base.color.green.400-Opacity24}", @@ -1147,7 +1147,7 @@ } } }, - "elevation": { + "shadow": { "small": { "$type": "shadow", "$value": [ diff --git a/sandbox/grommet-app/src/theme.jsx b/sandbox/grommet-app/src/theme.jsx index 1a0808d92..47892ad11 100644 --- a/sandbox/grommet-app/src/theme.jsx +++ b/sandbox/grommet-app/src/theme.jsx @@ -758,24 +758,24 @@ const buildTheme = tokens => { light: { small: elevationlight ? elevationlight.hpe.elevation.small - : light.hpe.elevation.small, + : light.hpe.shadow.small, medium: elevationlight ? elevationlight.hpe.elevation.medium - : light.hpe.elevation.medium, + : light.hpe.shadow.medium, large: elevationlight ? elevationlight.hpe.elevation.large - : light.hpe.elevation.large, + : light.hpe.shadow.large, }, dark: { small: elevationdark ? elevationdark.hpe.elevation.small - : dark.hpe.elevation.small, + : dark.hpe.shadow.small, medium: elevationdark ? elevationdark.hpe.elevation.medium - : dark.hpe.elevation.medium, + : dark.hpe.shadow.medium, large: elevationdark ? elevationdark.hpe.elevation.large - : dark.hpe.elevation.large, + : dark.hpe.shadow.large, }, }, hover: {