Skip to content

Commit

Permalink
Fix condensing boxShadow tokens
Browse files Browse the repository at this point in the history
  • Loading branch information
@taysea
taysea committed Sep 5, 2024
1 parent 485e28e commit 290da67
Show file tree
Hide file tree
Showing 3 changed files with 104 additions and 185 deletions.
50 changes: 49 additions & 1 deletion design-tokens/src/token_export.ts
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import { rgbToHex } from './color.js';
import { ApiGetLocalVariablesResponse, Variable } from './figma_api.js';
import { Token, TokensFile } from './token_types.js';
import { access } from './utils.js';

function tokenTypeFromVariable(variable: Variable) {
if (variable.resolvedType === 'STRING' && variable.name.includes('fontStack'))
Expand Down Expand Up @@ -66,7 +67,54 @@ export function tokenFilesFromLocalVariables(

let obj: any = tokenFiles[fileName];

if (variable.name.includes('elevation')) {
if (variable.name.includes('boxShadow')) {
const parts = variable.name.split('/');
const keyPath = parts.slice(0, parts.indexOf('boxShadow') + 1);
const property = parts[parts.length - 1];

keyPath.forEach(groupName => {
obj[groupName] = obj[groupName] || {};
obj = obj[groupName];
});

const token = {
$type: 'shadow',
$value: [
{
[property]: tokenValueFromVariable(
variable,
mode.modeId,
localVariables,
),
},
],
$description: '',
$extensions: {
'com.figma': {
hiddenFromPublishing: false,
scopes: ['ALL_SCOPES'],
codeSyntax: {},
},
},
};

// if there isn't anything in the shadow yet, create the initial value array
const boxShadow = access(keyPath.join('.'), tokenFiles[fileName]);
if (Object.keys(boxShadow).length === 0) {
Object.assign(obj, token);
} else {
const index =
parseInt(parts[parts.length - 3], 10) >= 0
? parseInt(parts[parts.length - 3], 10)
: 0;
const partialShadow = boxShadow.$value[index];
partialShadow[property] = tokenValueFromVariable(
variable,
mode.modeId,
localVariables,
);
}
} else if (variable.name.includes('elevation')) {
const parts = variable.name.split('/');
const shadow = parts.slice(1, 2).join('');
const property = parts[parts.length - 1];
Expand Down
231 changes: 51 additions & 180 deletions design-tokens/tokens/component/component.default.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2407,66 +2407,23 @@
},
"hover": {
"boxShadow": {
"1": {
"offsetX": {
"$type": "number",
"$value": "{base.static.spacing.none}",
"$description": "",
"$extensions": {
"com.figma": {
"hiddenFromPublishing": false,
"scopes": ["EFFECT_FLOAT"],
"codeSyntax": {}
}
}
},
"offsetY": {
"$type": "number",
"$value": "{base.static.spacing.none}",
"$description": "",
"$extensions": {
"com.figma": {
"hiddenFromPublishing": false,
"scopes": ["EFFECT_FLOAT"],
"codeSyntax": {}
}
}
},
"blur": {
"$type": "number",
"$value": "{base.static.spacing.none}",
"$description": "",
"$extensions": {
"com.figma": {
"hiddenFromPublishing": false,
"scopes": ["EFFECT_FLOAT"],
"codeSyntax": {}
}
}
},
"spread": {
"$type": "number",
"$value": "{base.dimension.25}",
"$description": "",
"$extensions": {
"com.figma": {
"hiddenFromPublishing": false,
"scopes": ["EFFECT_FLOAT"],
"codeSyntax": {}
}
}
},
"color": {
"$type": "color",
"$value": "{button.secondary.hover.borderColor}",
"$description": "",
"$extensions": {
"com.figma": {
"hiddenFromPublishing": false,
"scopes": ["EFFECT_COLOR"],
"codeSyntax": {}
}
}
"$type": "shadow",
"$value": [
{
"offsetX": "{base.static.spacing.none}",
"offsetY": "{base.static.spacing.none}",
"blur": "{base.static.spacing.none}",
"spread": "{base.dimension.25}",
"color": "{button.secondary.hover.borderColor}",
"inset": true
}
],
"$description": "",
"$extensions": {
"com.figma": {
"hiddenFromPublishing": false,
"scopes": ["ALL_SCOPES"],
"codeSyntax": {}
}
}
}
Expand Down Expand Up @@ -3259,66 +3216,23 @@
},
"hover": {
"boxShadow": {
"1": {
"offsetX": {
"$type": "number",
"$value": "{base.static.spacing.none}",
"$description": "",
"$extensions": {
"com.figma": {
"hiddenFromPublishing": false,
"scopes": ["EFFECT_FLOAT"],
"codeSyntax": {}
}
}
},
"offsetY": {
"$type": "number",
"$value": "{base.static.spacing.none}",
"$description": "",
"$extensions": {
"com.figma": {
"hiddenFromPublishing": false,
"scopes": ["EFFECT_FLOAT"],
"codeSyntax": {}
}
}
},
"blur": {
"$type": "number",
"$value": "{base.static.spacing.none}",
"$description": "",
"$extensions": {
"com.figma": {
"hiddenFromPublishing": false,
"scopes": ["EFFECT_FLOAT"],
"codeSyntax": {}
}
}
},
"spread": {
"$type": "number",
"$value": "{base.dimension.25}",
"$description": "",
"$extensions": {
"com.figma": {
"hiddenFromPublishing": false,
"scopes": ["EFFECT_FLOAT"],
"codeSyntax": {}
}
}
},
"color": {
"$type": "color",
"$value": "{button.secondary.hover.borderColor}",
"$description": "",
"$extensions": {
"com.figma": {
"hiddenFromPublishing": false,
"scopes": ["EFFECT_COLOR"],
"codeSyntax": {}
}
}
"$type": "shadow",
"$value": [
{
"offsetX": "{base.static.spacing.none}",
"offsetY": "{base.static.spacing.none}",
"blur": "{base.static.spacing.none}",
"spread": "{base.dimension.25}",
"color": "{button.secondary.hover.borderColor}",
"inset": true
}
],
"$description": "",
"$extensions": {
"com.figma": {
"hiddenFromPublishing": false,
"scopes": ["ALL_SCOPES"],
"codeSyntax": {}
}
}
}
Expand Down Expand Up @@ -4111,66 +4025,23 @@
},
"hover": {
"boxShadow": {
"1": {
"offsetX": {
"$type": "number",
"$value": "{base.static.spacing.none}",
"$description": "",
"$extensions": {
"com.figma": {
"hiddenFromPublishing": false,
"scopes": ["EFFECT_FLOAT"],
"codeSyntax": {}
}
}
},
"offsetY": {
"$type": "number",
"$value": "{base.static.spacing.none}",
"$description": "",
"$extensions": {
"com.figma": {
"hiddenFromPublishing": false,
"scopes": ["EFFECT_FLOAT"],
"codeSyntax": {}
}
}
},
"blur": {
"$type": "number",
"$value": "{base.static.spacing.none}",
"$description": "",
"$extensions": {
"com.figma": {
"hiddenFromPublishing": false,
"scopes": ["EFFECT_FLOAT"],
"codeSyntax": {}
}
}
},
"spread": {
"$type": "number",
"$value": "{base.dimension.25}",
"$description": "",
"$extensions": {
"com.figma": {
"hiddenFromPublishing": false,
"scopes": ["EFFECT_FLOAT"],
"codeSyntax": {}
}
}
},
"color": {
"$type": "color",
"$value": "{button.secondary.hover.borderColor}",
"$description": "",
"$extensions": {
"com.figma": {
"hiddenFromPublishing": false,
"scopes": ["EFFECT_COLOR"],
"codeSyntax": {}
}
}
"$type": "shadow",
"$value": [
{
"offsetX": "{base.static.spacing.none}",
"offsetY": "{base.static.spacing.none}",
"blur": "{base.static.spacing.none}",
"spread": "{base.dimension.25}",
"color": "{button.secondary.hover.borderColor}",
"inset": true
}
],
"$description": "",
"$extensions": {
"com.figma": {
"hiddenFromPublishing": false,
"scopes": ["ALL_SCOPES"],
"codeSyntax": {}
}
}
}
Expand Down
8 changes: 4 additions & 4 deletions yarn.lock
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5506,9 +5506,9 @@ eslint-import-resolver-node@^0.3.9:
resolve "^1.22.4"

eslint-module-utils@^2.9.0:
version "2.9.0"
resolved "https://registry.yarnpkg.com/eslint-module-utils/-/eslint-module-utils-2.9.0.tgz#95d4ac038a68cd3f63482659dffe0883900eb342"
integrity sha512-McVbYmwA3NEKwRQY5g4aWMdcZE5xZxV8i8l7CqJSrameuGSQJtSWaL/LxTEzSKKaCcOhlpDR8XEfYXWPrdo/ZQ==
version "2.10.0"
resolved "https://registry.yarnpkg.com/eslint-module-utils/-/eslint-module-utils-2.10.0.tgz#27fa5a565b2836bf4d666e89c27918fa652d0f3f"
integrity sha512-/AXiipjFyfLIUj3E4FR5NEGWoGDZHDfcGzWZkwobRc8fwqUAcy9owTk2LIKwNmtYL8Ad9/XfjSXbGHZ9AJWDEg==
dependencies:
debug "^3.2.7"

Expand Down Expand Up @@ -6672,7 +6672,7 @@ hpack.js@^2.1.6:

"hpe-design-tokens-alpha@https://github.com/grommet/hpe-design-system/tarball/design-tokens-alpha-stable":
version "0.1.0"
resolved "https://github.com/grommet/hpe-design-system/tarball/design-tokens-alpha-stable#2c764348f12573c6c0a8282dfd6449a1bcf67962"
resolved "https://github.com/grommet/hpe-design-system/tarball/design-tokens-alpha-stable#1506108616ea3ae59c03ad6ed086d5efd680b6f8"
dependencies:
axios "^1.6.0"
dotenv "^16.3.1"
Expand Down

0 comments on commit 290da67

Please sign in to comment.