From ba29d3f7bcbb3db0f89f2a5fa3674ee86318dfc1 Mon Sep 17 00:00:00 2001 From: taysea Date: Mon, 28 Oct 2024 12:41:55 -0700 Subject: [PATCH] Rename component tokens to element tokens --- .../src/scripts/build-style-dictionary.js | 13 +- .../tokens/component/component.default.json | 1018 +++-------------- .../tokens/component/element.default.json | 744 ++++++++++++ sandbox/grommet-app/src/theme.jsx | 48 +- 4 files changed, 911 insertions(+), 912 deletions(-) create mode 100644 design-tokens/tokens/component/element.default.json diff --git a/design-tokens/src/scripts/build-style-dictionary.js b/design-tokens/src/scripts/build-style-dictionary.js index 1a16d2fd8..2f7371a76 100644 --- a/design-tokens/src/scripts/build-style-dictionary.js +++ b/design-tokens/src/scripts/build-style-dictionary.js @@ -289,6 +289,7 @@ HPEStyleDictionary.extend({ `${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.large.json`, // using large mode to have a reference name available + `${TOKENS_DIR}/component/element.default.json`, `${TOKENS_DIR}/component/component.default.json`, ], platforms: { @@ -299,8 +300,7 @@ HPEStyleDictionary.extend({ files: [ { destination: 'components.default.js', - filter: token => - token.filePath === `${TOKENS_DIR}/component/component.default.json`, + filter: token => token.filePath.includes(`${TOKENS_DIR}/component/`), format: 'esmGrommetRefs', }, ], @@ -312,8 +312,7 @@ HPEStyleDictionary.extend({ files: [ { destination: 'components.default.cjs', - filter: token => - token.filePath === `${TOKENS_DIR}/component/component.default.json`, + filter: token => token.filePath.includes(`${TOKENS_DIR}/component/`), format: 'commonJsGrommetRefs', }, ], @@ -326,8 +325,7 @@ HPEStyleDictionary.extend({ { destination: 'components.css', format: 'css/variables', - filter: token => - token.filePath === `${TOKENS_DIR}/component/component.default.json`, + filter: token => token.filePath.includes(`${TOKENS_DIR}/component/`), options: { outputReferences: true, }, @@ -341,8 +339,7 @@ HPEStyleDictionary.extend({ files: [ { destination: 'components.js', - filter: token => - token.filePath === `${TOKENS_DIR}/component/component.default.json`, + filter: token => token.filePath.includes(`${TOKENS_DIR}/component/`), format: 'jsonFlat', }, ], diff --git a/design-tokens/tokens/component/component.default.json b/design-tokens/tokens/component/component.default.json index 3a1d0d126..ea6dac793 100644 --- a/design-tokens/tokens/component/component.default.json +++ b/design-tokens/tokens/component/component.default.json @@ -1495,7 +1495,7 @@ }, "borderWidth": { "$type": "number", - "$value": "{component.xsmall.borderWidth}", + "$value": "{element.xsmall.borderWidth}", "$description": "", "$extensions": { "com.figma": { @@ -1507,7 +1507,7 @@ }, "minHeight": { "$type": "number", - "$value": "{component.xsmall.minHeight}", + "$value": "{element.xsmall.minHeight}", "$description": "", "$extensions": { "com.figma": { @@ -1519,7 +1519,7 @@ }, "fontSize": { "$type": "number", - "$value": "{component.xsmall.fontSize}", + "$value": "{element.xsmall.fontSize}", "$description": "", "$extensions": { "com.figma": { @@ -1531,7 +1531,7 @@ }, "lineHeight": { "$type": "number", - "$value": "{component.xsmall.lineHeight}", + "$value": "{element.xsmall.lineHeight}", "$description": "", "$extensions": { "com.figma": { @@ -1543,7 +1543,7 @@ }, "gapX": { "$type": "number", - "$value": "{component.xsmall.textToIconX}", + "$value": "{element.xsmall.textToIconX}", "$description": "", "$extensions": { "com.figma": { @@ -1655,7 +1655,7 @@ "toolbar": { "paddingX": { "$type": "number", - "$value": "{component.xsmall.paddingX.default}", + "$value": "{element.xsmall.paddingX.default}", "$description": "", "$extensions": { "com.figma": { @@ -1703,7 +1703,7 @@ }, "minHeight": { "$type": "number", - "$value": "{component.xsmall.minHeight}", + "$value": "{element.xsmall.minHeight}", "$description": "", "$extensions": { "com.figma": { @@ -1715,7 +1715,7 @@ }, "fontSize": { "$type": "number", - "$value": "{component.xsmall.fontSize}", + "$value": "{element.xsmall.fontSize}", "$description": "", "$extensions": { "com.figma": { @@ -1727,7 +1727,7 @@ }, "lineHeight": { "$type": "number", - "$value": "{component.xsmall.lineHeight}", + "$value": "{element.xsmall.lineHeight}", "$description": "", "$extensions": { "com.figma": { @@ -1739,7 +1739,7 @@ }, "gapX": { "$type": "number", - "$value": "{component.xsmall.textToIconX}", + "$value": "{element.xsmall.textToIconX}", "$description": "", "$extensions": { "com.figma": { @@ -1853,7 +1853,7 @@ "default": { "paddingX": { "$type": "number", - "$value": "{component.small.paddingX.wide}", + "$value": "{element.small.paddingX.wide}", "$description": "", "$extensions": { "com.figma": { @@ -1865,7 +1865,7 @@ }, "paddingY": { "$type": "number", - "$value": "{component.small.paddingY}", + "$value": "{element.small.paddingY}", "$description": "", "$extensions": { "com.figma": { @@ -1901,7 +1901,7 @@ }, "minHeight": { "$type": "number", - "$value": "{component.small.minHeight}", + "$value": "{element.small.minHeight}", "$description": "", "$extensions": { "com.figma": { @@ -1913,7 +1913,7 @@ }, "fontSize": { "$type": "number", - "$value": "{component.small.fontSize}", + "$value": "{element.small.fontSize}", "$description": "", "$extensions": { "com.figma": { @@ -1925,7 +1925,7 @@ }, "lineHeight": { "$type": "number", - "$value": "{component.small.lineHeight}", + "$value": "{element.small.lineHeight}", "$description": "", "$extensions": { "com.figma": { @@ -1937,7 +1937,7 @@ }, "gapX": { "$type": "number", - "$value": "{component.small.textToIconX}", + "$value": "{element.small.textToIconX}", "$description": "", "$extensions": { "com.figma": { @@ -2500,7 +2500,7 @@ "toolbar": { "paddingX": { "$type": "number", - "$value": "{component.small.paddingX.default}", + "$value": "{element.small.paddingX.default}", "$description": "", "$extensions": { "com.figma": { @@ -2548,7 +2548,7 @@ }, "minHeight": { "$type": "number", - "$value": "{component.small.minHeight}", + "$value": "{element.small.minHeight}", "$description": "", "$extensions": { "com.figma": { @@ -2584,7 +2584,7 @@ }, "gapX": { "$type": "number", - "$value": "{component.xsmall.textToIconX}", + "$value": "{element.xsmall.textToIconX}", "$description": "", "$extensions": { "com.figma": { @@ -2710,7 +2710,7 @@ "default": { "paddingX": { "$type": "number", - "$value": "{component.medium.paddingX.wide}", + "$value": "{element.medium.paddingX.wide}", "$description": "", "$extensions": { "com.figma": { @@ -2722,7 +2722,7 @@ }, "paddingY": { "$type": "number", - "$value": "{component.medium.paddingY}", + "$value": "{element.medium.paddingY}", "$description": "", "$extensions": { "com.figma": { @@ -2758,7 +2758,7 @@ }, "minHeight": { "$type": "number", - "$value": "{component.medium.minHeight}", + "$value": "{element.medium.minHeight}", "$description": "", "$extensions": { "com.figma": { @@ -2782,7 +2782,7 @@ }, "lineHeight": { "$type": "number", - "$value": "{component.medium.lineHeight}", + "$value": "{element.medium.lineHeight}", "$description": "", "$extensions": { "com.figma": { @@ -2794,7 +2794,7 @@ }, "gapX": { "$type": "number", - "$value": "{component.medium.textToIconX}", + "$value": "{element.medium.textToIconX}", "$description": "", "$extensions": { "com.figma": { @@ -3126,7 +3126,7 @@ "secondary": { "paddingX": { "$type": "number", - "$value": "{component.medium.paddingX.wide}", + "$value": "{element.medium.paddingX.wide}", "$description": "", "$extensions": { "com.figma": { @@ -3567,7 +3567,7 @@ "default": { "paddingX": { "$type": "number", - "$value": "{component.large.paddingX.wide}", + "$value": "{element.large.paddingX.wide}", "$description": "", "$extensions": { "com.figma": { @@ -3579,7 +3579,7 @@ }, "paddingY": { "$type": "number", - "$value": "{component.large.paddingY}", + "$value": "{element.large.paddingY}", "$description": "", "$extensions": { "com.figma": { @@ -3615,7 +3615,7 @@ }, "minHeight": { "$type": "number", - "$value": "{component.large.minHeight}", + "$value": "{element.large.minHeight}", "$description": "", "$extensions": { "com.figma": { @@ -3627,7 +3627,7 @@ }, "fontSize": { "$type": "number", - "$value": "{component.large.fontSize}", + "$value": "{element.large.fontSize}", "$description": "", "$extensions": { "com.figma": { @@ -3639,7 +3639,7 @@ }, "lineHeight": { "$type": "number", - "$value": "{component.large.lineHeight}", + "$value": "{element.large.lineHeight}", "$description": "", "$extensions": { "com.figma": { @@ -3651,7 +3651,7 @@ }, "gapX": { "$type": "number", - "$value": "{component.large.textToIconX}", + "$value": "{element.large.textToIconX}", "$description": "", "$extensions": { "com.figma": { @@ -4534,7 +4534,7 @@ }, "paddingX": { "$type": "number", - "$value": "{component.xlarge.paddingX.wide}", + "$value": "{element.xlarge.paddingX.wide}", "$description": "", "$extensions": { "com.figma": { @@ -4546,7 +4546,7 @@ }, "paddingY": { "$type": "number", - "$value": "{component.xlarge.paddingY}", + "$value": "{element.xlarge.paddingY}", "$description": "", "$extensions": { "com.figma": { @@ -4582,7 +4582,7 @@ }, "minHeight": { "$type": "number", - "$value": "{component.xlarge.minHeight}", + "$value": "{element.xlarge.minHeight}", "$description": "", "$extensions": { "com.figma": { @@ -4594,7 +4594,7 @@ }, "fontSize": { "$type": "number", - "$value": "{component.xlarge.fontSize}", + "$value": "{element.xlarge.fontSize}", "$description": "", "$extensions": { "com.figma": { @@ -4606,7 +4606,7 @@ }, "lineHeight": { "$type": "number", - "$value": "{component.xlarge.lineHeight}", + "$value": "{element.xlarge.lineHeight}", "$description": "", "$extensions": { "com.figma": { @@ -4618,7 +4618,7 @@ }, "gapX": { "$type": "number", - "$value": "{component.xlarge.textToIconX}", + "$value": "{element.xlarge.textToIconX}", "$description": "", "$extensions": { "com.figma": { @@ -5621,7 +5621,7 @@ }, "gapX": { "$type": "number", - "$value": "{component.medium.textToIconX}", + "$value": "{element.medium.textToIconX}", "$description": "", "$extensions": { "com.figma": { @@ -5693,7 +5693,7 @@ }, "minHeight": { "$type": "number", - "$value": "{component.medium.minHeight}", + "$value": "{element.medium.minHeight}", "$description": "", "$extensions": { "com.figma": { @@ -6331,7 +6331,7 @@ "label": { "fontSize": { "$type": "number", - "$value": "{component.medium.fontSize}", + "$value": "{element.medium.fontSize}", "$description": "", "$extensions": { "com.figma": { @@ -6343,7 +6343,7 @@ }, "lineHeight": { "$type": "number", - "$value": "{component.medium.lineHeight}", + "$value": "{element.medium.lineHeight}", "$description": "", "$extensions": { "com.figma": { @@ -6369,7 +6369,7 @@ "control": { "height": { "$type": "number", - "$value": "{component.medium.lineHeight}", + "$value": "{element.medium.lineHeight}", "$description": "", "$extensions": { "com.figma": { @@ -6381,7 +6381,7 @@ }, "width": { "$type": "number", - "$value": "{component.medium.lineHeight}", + "$value": "{element.medium.lineHeight}", "$description": "", "$extensions": { "com.figma": { @@ -6849,7 +6849,7 @@ "label": { "fontSize": { "$type": "number", - "$value": "{component.medium.fontSize}", + "$value": "{element.medium.fontSize}", "$description": "", "$extensions": { "com.figma": { @@ -6861,7 +6861,7 @@ }, "lineHeight": { "$type": "number", - "$value": "{component.medium.fontSize}", + "$value": "{element.medium.fontSize}", "$description": "", "$extensions": { "com.figma": { @@ -6888,7 +6888,7 @@ "track": { "height": { "$type": "number", - "$value": "{component.medium.lineHeight}", + "$value": "{element.medium.lineHeight}", "$description": "", "$extensions": { "com.figma": { @@ -6938,7 +6938,7 @@ "handle": { "height": { "$type": "number", - "$value": "{component.medium.lineHeight}", + "$value": "{element.medium.lineHeight}", "$description": "", "$extensions": { "com.figma": { @@ -6950,7 +6950,7 @@ }, "width": { "$type": "number", - "$value": "{component.medium.lineHeight}", + "$value": "{element.medium.lineHeight}", "$description": "", "$extensions": { "com.figma": { @@ -7003,7 +7003,7 @@ }, "fontSize": { "$type": "number", - "$value": "{component.medium.fontSize}", + "$value": "{element.medium.fontSize}", "$description": "", "$extensions": { "com.figma": { @@ -7015,7 +7015,7 @@ }, "lineHeight": { "$type": "number", - "$value": "{component.medium.lineHeight}", + "$value": "{element.medium.lineHeight}", "$description": "", "$extensions": { "com.figma": { @@ -7075,7 +7075,7 @@ }, "minHeight": { "$type": "number", - "$value": "{component.medium.minHeight}", + "$value": "{element.medium.minHeight}", "$description": "", "$extensions": { "com.figma": { @@ -7689,7 +7689,7 @@ }, "gapX": { "$type": "number", - "$value": "{component.medium.textToIconX}", + "$value": "{element.medium.textToIconX}", "$description": "", "$extensions": { "com.figma": { @@ -7701,7 +7701,7 @@ }, "minHeight": { "$type": "number", - "$value": "{component.medium.minHeight}", + "$value": "{element.medium.minHeight}", "$description": "", "$extensions": { "com.figma": { @@ -7761,7 +7761,7 @@ }, "paddingY": { "$type": "number", - "$value": "{component.medium.paddingY}", + "$value": "{element.medium.paddingY}", "$description": "", "$extensions": { "com.figma": { @@ -7785,7 +7785,7 @@ }, "minHeight": { "$type": "number", - "$value": "{component.medium.minHeight}", + "$value": "{element.medium.minHeight}", "$description": "", "$extensions": { "com.figma": { @@ -7809,7 +7809,7 @@ }, "textToIconX": { "$type": "number", - "$value": "{component.medium.textToIconX}", + "$value": "{element.medium.textToIconX}", "$description": "", "$extensions": { "com.figma": { @@ -7821,7 +7821,7 @@ }, "textToElementX": { "$type": "number", - "$value": "{component.medium.textToElementX}", + "$value": "{element.medium.textToElementX}", "$description": "", "$extensions": { "com.figma": { @@ -7934,7 +7934,7 @@ }, "minHeight": { "$type": "number", - "$value": "{component.medium.minHeight}", + "$value": "{element.medium.minHeight}", "$description": "", "$extensions": { "com.figma": { @@ -7946,7 +7946,7 @@ }, "textToIconX": { "$type": "number", - "$value": "{component.medium.textToIconX}", + "$value": "{element.medium.textToIconX}", "$description": "", "$extensions": { "com.figma": { @@ -7958,7 +7958,7 @@ }, "textToElementX": { "$type": "number", - "$value": "{component.medium.textToElementX}", + "$value": "{element.medium.textToElementX}", "$description": "", "$extensions": { "com.figma": { @@ -8011,7 +8011,7 @@ "placeholderText": { "fontSize": { "$type": "number", - "$value": "{component.medium.fontSize}", + "$value": "{element.medium.fontSize}", "$description": "", "$extensions": { "com.figma": { @@ -8023,7 +8023,7 @@ }, "lineHeight": { "$type": "number", - "$value": "{component.medium.lineHeight}", + "$value": "{element.medium.lineHeight}", "$description": "", "$extensions": { "com.figma": { @@ -8163,7 +8163,7 @@ "valueText": { "fontSize": { "$type": "number", - "$value": "{component.medium.fontSize}", + "$value": "{element.medium.fontSize}", "$description": "", "$extensions": { "com.figma": { @@ -8175,7 +8175,7 @@ }, "lineHeight": { "$type": "number", - "$value": "{component.medium.lineHeight}", + "$value": "{element.medium.lineHeight}", "$description": "", "$extensions": { "com.figma": { @@ -9301,7 +9301,7 @@ }, "gapX": { "$type": "number", - "$value": "{component.medium.textToIconX}", + "$value": "{element.medium.textToIconX}", "$description": "", "$extensions": { "com.figma": { @@ -9313,7 +9313,7 @@ }, "minHeight": { "$type": "number", - "$value": "{component.medium.minHeight}", + "$value": "{element.medium.minHeight}", "$description": "", "$extensions": { "com.figma": { @@ -9759,7 +9759,7 @@ "label": { "fontSize": { "$type": "number", - "$value": "{component.medium.fontSize}", + "$value": "{element.medium.fontSize}", "$description": "", "$extensions": { "com.figma": { @@ -9771,7 +9771,7 @@ }, "lineHeight": { "$type": "number", - "$value": "{component.medium.lineHeight}", + "$value": "{element.medium.lineHeight}", "$description": "", "$extensions": { "com.figma": { @@ -9797,7 +9797,7 @@ "control": { "height": { "$type": "number", - "$value": "{component.medium.lineHeight}", + "$value": "{element.medium.lineHeight}", "$description": "", "$extensions": { "com.figma": { @@ -9809,7 +9809,7 @@ }, "width": { "$type": "number", - "$value": "{component.medium.lineHeight}", + "$value": "{element.medium.lineHeight}", "$description": "", "$extensions": { "com.figma": { @@ -10070,7 +10070,7 @@ "default": { "fontSize": { "$type": "number", - "$value": "{component.small.fontSize}", + "$value": "{element.small.fontSize}", "$description": "", "$extensions": { "com.figma": { @@ -10082,7 +10082,7 @@ }, "lineHeight": { "$type": "number", - "$value": "{component.small.lineHeight}", + "$value": "{element.small.lineHeight}", "$description": "", "$extensions": { "com.figma": { @@ -10094,7 +10094,7 @@ }, "gapX": { "$type": "number", - "$value": "{component.small.textToIconX}", + "$value": "{element.small.textToIconX}", "$description": "", "$extensions": { "com.figma": { @@ -10108,7 +10108,7 @@ "emphasized": { "fontSize": { "$type": "number", - "$value": "{component.small.fontSize}", + "$value": "{element.small.fontSize}", "$description": "", "$extensions": { "com.figma": { @@ -10120,7 +10120,7 @@ }, "lineHeight": { "$type": "number", - "$value": "{component.small.lineHeight}", + "$value": "{element.small.lineHeight}", "$description": "", "$extensions": { "com.figma": { @@ -10132,7 +10132,7 @@ }, "gapX": { "$type": "number", - "$value": "{component.small.textToIconX}", + "$value": "{element.small.textToIconX}", "$description": "", "$extensions": { "com.figma": { @@ -10148,7 +10148,7 @@ "default": { "fontSize": { "$type": "number", - "$value": "{component.medium.fontSize}", + "$value": "{element.medium.fontSize}", "$description": "", "$extensions": { "com.figma": { @@ -10160,7 +10160,7 @@ }, "lineHeight": { "$type": "number", - "$value": "{component.medium.lineHeight}", + "$value": "{element.medium.lineHeight}", "$description": "", "$extensions": { "com.figma": { @@ -10172,7 +10172,7 @@ }, "gapX": { "$type": "number", - "$value": "{component.medium.textToIconX}", + "$value": "{element.medium.textToIconX}", "$description": "", "$extensions": { "com.figma": { @@ -10186,7 +10186,7 @@ "emphasized": { "fontSize": { "$type": "number", - "$value": "{component.medium.fontSize}", + "$value": "{element.medium.fontSize}", "$description": "", "$extensions": { "com.figma": { @@ -10198,7 +10198,7 @@ }, "lineHeight": { "$type": "number", - "$value": "{component.medium.lineHeight}", + "$value": "{element.medium.lineHeight}", "$description": "", "$extensions": { "com.figma": { @@ -10210,7 +10210,7 @@ }, "gapX": { "$type": "number", - "$value": "{component.medium.textToIconX}", + "$value": "{element.medium.textToIconX}", "$description": "", "$extensions": { "com.figma": { @@ -10226,7 +10226,7 @@ "default": { "fontSize": { "$type": "number", - "$value": "{component.large.fontSize}", + "$value": "{element.large.fontSize}", "$description": "", "$extensions": { "com.figma": { @@ -10238,7 +10238,7 @@ }, "lineHeight": { "$type": "number", - "$value": "{component.large.lineHeight}", + "$value": "{element.large.lineHeight}", "$description": "", "$extensions": { "com.figma": { @@ -10250,7 +10250,7 @@ }, "gapX": { "$type": "number", - "$value": "{component.large.textToIconX}", + "$value": "{element.large.textToIconX}", "$description": "", "$extensions": { "com.figma": { @@ -10264,7 +10264,7 @@ "emphasized": { "fontSize": { "$type": "number", - "$value": "{component.large.fontSize}", + "$value": "{element.large.fontSize}", "$description": "", "$extensions": { "com.figma": { @@ -10276,7 +10276,7 @@ }, "lineHeight": { "$type": "number", - "$value": "{component.large.lineHeight}", + "$value": "{element.large.lineHeight}", "$description": "", "$extensions": { "com.figma": { @@ -10288,7 +10288,7 @@ }, "gapX": { "$type": "number", - "$value": "{component.large.textToIconX}", + "$value": "{element.large.textToIconX}", "$description": "", "$extensions": { "com.figma": { @@ -10304,7 +10304,7 @@ "default": { "fontSize": { "$type": "number", - "$value": "{component.xlarge.fontSize}", + "$value": "{element.xlarge.fontSize}", "$description": "", "$extensions": { "com.figma": { @@ -10316,7 +10316,7 @@ }, "lineHeight": { "$type": "number", - "$value": "{component.xlarge.lineHeight}", + "$value": "{element.xlarge.lineHeight}", "$description": "", "$extensions": { "com.figma": { @@ -10328,7 +10328,7 @@ }, "gapX": { "$type": "number", - "$value": "{component.xlarge.textToIconX}", + "$value": "{element.xlarge.textToIconX}", "$description": "", "$extensions": { "com.figma": { @@ -10342,7 +10342,7 @@ "emphasized": { "fontSize": { "$type": "number", - "$value": "{component.xlarge.fontSize}", + "$value": "{element.xlarge.fontSize}", "$description": "", "$extensions": { "com.figma": { @@ -10354,7 +10354,7 @@ }, "lineHeight": { "$type": "number", - "$value": "{component.xlarge.lineHeight}", + "$value": "{element.xlarge.lineHeight}", "$description": "", "$extensions": { "com.figma": { @@ -10366,7 +10366,7 @@ }, "gapX": { "$type": "number", - "$value": "{component.xlarge.textToIconX}", + "$value": "{element.xlarge.textToIconX}", "$description": "", "$extensions": { "com.figma": { @@ -10406,7 +10406,7 @@ }, "gapX": { "$type": "number", - "$value": "{component.xlarge.textToIconX}", + "$value": "{element.xlarge.textToIconX}", "$description": "", "$extensions": { "com.figma": { @@ -10444,7 +10444,7 @@ }, "gapX": { "$type": "number", - "$value": "{component.xlarge.textToIconX}", + "$value": "{element.xlarge.textToIconX}", "$description": "", "$extensions": { "com.figma": { @@ -10484,7 +10484,7 @@ }, "gapX": { "$type": "number", - "$value": "{component.xlarge.textToIconX}", + "$value": "{element.xlarge.textToIconX}", "$description": "", "$extensions": { "com.figma": { @@ -10522,7 +10522,7 @@ }, "gapX": { "$type": "number", - "$value": "{component.xlarge.textToIconX}", + "$value": "{element.xlarge.textToIconX}", "$description": "", "$extensions": { "com.figma": { @@ -10562,7 +10562,7 @@ }, "gapX": { "$type": "number", - "$value": "{component.xlarge.textToIconX}", + "$value": "{element.xlarge.textToIconX}", "$description": "", "$extensions": { "com.figma": { @@ -10600,7 +10600,7 @@ }, "gapX": { "$type": "number", - "$value": "{component.xlarge.textToIconX}", + "$value": "{element.xlarge.textToIconX}", "$description": "", "$extensions": { "com.figma": { @@ -10640,7 +10640,7 @@ }, "gapX": { "$type": "number", - "$value": "{component.xlarge.textToIconX}", + "$value": "{element.xlarge.textToIconX}", "$description": "", "$extensions": { "com.figma": { @@ -10678,7 +10678,7 @@ }, "gapX": { "$type": "number", - "$value": "{component.xlarge.textToIconX}", + "$value": "{element.xlarge.textToIconX}", "$description": "", "$extensions": { "com.figma": { @@ -10718,7 +10718,7 @@ }, "gapX": { "$type": "number", - "$value": "{component.xlarge.textToIconX}", + "$value": "{element.xlarge.textToIconX}", "$description": "", "$extensions": { "com.figma": { @@ -10756,7 +10756,7 @@ }, "gapX": { "$type": "number", - "$value": "{component.xlarge.textToIconX}", + "$value": "{element.xlarge.textToIconX}", "$description": "", "$extensions": { "com.figma": { @@ -10773,7 +10773,7 @@ "default": { "fontSize": { "$type": "number", - "$value": "{component.small.fontSize}", + "$value": "{element.small.fontSize}", "$description": "", "$extensions": { "com.figma": { @@ -10785,7 +10785,7 @@ }, "lineHeight": { "$type": "number", - "$value": "{component.small.lineHeight}", + "$value": "{element.small.lineHeight}", "$description": "", "$extensions": { "com.figma": { @@ -10797,7 +10797,7 @@ }, "gapX": { "$type": "number", - "$value": "{component.small.textToIconX}", + "$value": "{element.small.textToIconX}", "$description": "", "$extensions": { "com.figma": { @@ -10811,7 +10811,7 @@ "emphasized": { "fontSize": { "$type": "number", - "$value": "{component.small.fontSize}", + "$value": "{element.small.fontSize}", "$description": "", "$extensions": { "com.figma": { @@ -10823,7 +10823,7 @@ }, "lineHeight": { "$type": "number", - "$value": "{component.small.lineHeight}", + "$value": "{element.small.lineHeight}", "$description": "", "$extensions": { "com.figma": { @@ -10835,7 +10835,7 @@ }, "gapX": { "$type": "number", - "$value": "{component.small.textToIconX}", + "$value": "{element.small.textToIconX}", "$description": "", "$extensions": { "com.figma": { @@ -10851,7 +10851,7 @@ "default": { "fontSize": { "$type": "number", - "$value": "{component.medium.fontSize}", + "$value": "{element.medium.fontSize}", "$description": "", "$extensions": { "com.figma": { @@ -10863,7 +10863,7 @@ }, "lineHeight": { "$type": "number", - "$value": "{component.medium.lineHeight}", + "$value": "{element.medium.lineHeight}", "$description": "", "$extensions": { "com.figma": { @@ -10875,7 +10875,7 @@ }, "gapX": { "$type": "number", - "$value": "{component.medium.textToIconX}", + "$value": "{element.medium.textToIconX}", "$description": "", "$extensions": { "com.figma": { @@ -10889,7 +10889,7 @@ "emphasized": { "fontSize": { "$type": "number", - "$value": "{component.medium.fontSize}", + "$value": "{element.medium.fontSize}", "$description": "", "$extensions": { "com.figma": { @@ -10901,7 +10901,7 @@ }, "lineHeight": { "$type": "number", - "$value": "{component.medium.lineHeight}", + "$value": "{element.medium.lineHeight}", "$description": "", "$extensions": { "com.figma": { @@ -10913,7 +10913,7 @@ }, "gapX": { "$type": "number", - "$value": "{component.medium.textToIconX}", + "$value": "{element.medium.textToIconX}", "$description": "", "$extensions": { "com.figma": { @@ -10929,7 +10929,7 @@ "default": { "fontSize": { "$type": "number", - "$value": "{component.large.fontSize}", + "$value": "{element.large.fontSize}", "$description": "", "$extensions": { "com.figma": { @@ -10941,7 +10941,7 @@ }, "lineHeight": { "$type": "number", - "$value": "{component.large.lineHeight}", + "$value": "{element.large.lineHeight}", "$description": "", "$extensions": { "com.figma": { @@ -10953,7 +10953,7 @@ }, "gapX": { "$type": "number", - "$value": "{component.large.textToIconX}", + "$value": "{element.large.textToIconX}", "$description": "", "$extensions": { "com.figma": { @@ -10967,7 +10967,7 @@ "emphasized": { "fontSize": { "$type": "number", - "$value": "{component.large.fontSize}", + "$value": "{element.large.fontSize}", "$description": "", "$extensions": { "com.figma": { @@ -10979,7 +10979,7 @@ }, "lineHeight": { "$type": "number", - "$value": "{component.large.lineHeight}", + "$value": "{element.large.lineHeight}", "$description": "", "$extensions": { "com.figma": { @@ -10991,7 +10991,7 @@ }, "gapX": { "$type": "number", - "$value": "{component.large.textToIconX}", + "$value": "{element.large.textToIconX}", "$description": "", "$extensions": { "com.figma": { @@ -11007,7 +11007,7 @@ "default": { "fontSize": { "$type": "number", - "$value": "{component.xlarge.fontSize}", + "$value": "{element.xlarge.fontSize}", "$description": "", "$extensions": { "com.figma": { @@ -11019,7 +11019,7 @@ }, "lineHeight": { "$type": "number", - "$value": "{component.xlarge.lineHeight}", + "$value": "{element.xlarge.lineHeight}", "$description": "", "$extensions": { "com.figma": { @@ -11031,7 +11031,7 @@ }, "gapX": { "$type": "number", - "$value": "{component.xlarge.textToIconX}", + "$value": "{element.xlarge.textToIconX}", "$description": "", "$extensions": { "com.figma": { @@ -11045,7 +11045,7 @@ "emphasized": { "fontSize": { "$type": "number", - "$value": "{component.xlarge.fontSize}", + "$value": "{element.xlarge.fontSize}", "$description": "", "$extensions": { "com.figma": { @@ -11057,7 +11057,7 @@ }, "lineHeight": { "$type": "number", - "$value": "{component.xlarge.lineHeight}", + "$value": "{element.xlarge.lineHeight}", "$description": "", "$extensions": { "com.figma": { @@ -11069,7 +11069,7 @@ }, "gapX": { "$type": "number", - "$value": "{component.xlarge.textToIconX}", + "$value": "{element.xlarge.textToIconX}", "$description": "", "$extensions": { "com.figma": { @@ -11109,7 +11109,7 @@ }, "gapX": { "$type": "number", - "$value": "{component.xlarge.textToIconX}", + "$value": "{element.xlarge.textToIconX}", "$description": "", "$extensions": { "com.figma": { @@ -11147,7 +11147,7 @@ }, "gapX": { "$type": "number", - "$value": "{component.xlarge.textToIconX}", + "$value": "{element.xlarge.textToIconX}", "$description": "", "$extensions": { "com.figma": { @@ -11187,7 +11187,7 @@ }, "gapX": { "$type": "number", - "$value": "{component.xlarge.textToIconX}", + "$value": "{element.xlarge.textToIconX}", "$description": "", "$extensions": { "com.figma": { @@ -11225,7 +11225,7 @@ }, "gapX": { "$type": "number", - "$value": "{component.xlarge.textToIconX}", + "$value": "{element.xlarge.textToIconX}", "$description": "", "$extensions": { "com.figma": { @@ -11265,7 +11265,7 @@ }, "gapX": { "$type": "number", - "$value": "{component.xlarge.textToIconX}", + "$value": "{element.xlarge.textToIconX}", "$description": "", "$extensions": { "com.figma": { @@ -11303,7 +11303,7 @@ }, "gapX": { "$type": "number", - "$value": "{component.xlarge.textToIconX}", + "$value": "{element.xlarge.textToIconX}", "$description": "", "$extensions": { "com.figma": { @@ -11343,7 +11343,7 @@ }, "gapX": { "$type": "number", - "$value": "{component.xlarge.textToIconX}", + "$value": "{element.xlarge.textToIconX}", "$description": "", "$extensions": { "com.figma": { @@ -11381,7 +11381,7 @@ }, "gapX": { "$type": "number", - "$value": "{component.xlarge.textToIconX}", + "$value": "{element.xlarge.textToIconX}", "$description": "", "$extensions": { "com.figma": { @@ -11421,7 +11421,7 @@ }, "gapX": { "$type": "number", - "$value": "{component.xlarge.textToIconX}", + "$value": "{element.xlarge.textToIconX}", "$description": "", "$extensions": { "com.figma": { @@ -11459,749 +11459,7 @@ }, "gapX": { "$type": "number", - "$value": "{component.xlarge.textToIconX}", - "$description": "", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["GAP"], - "codeSyntax": {} - } - } - } - } - } - }, - "component": { - "xsmall": { - "minHeight": { - "$type": "number", - "$value": "{base.dimension.600}", - "$description": "", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["WIDTH_HEIGHT"], - "codeSyntax": {} - } - } - }, - "textToElementX": { - "$type": "number", - "$value": "{base.static.spacing.xxsmall}", - "$description": "", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["GAP"], - "codeSyntax": {} - } - } - }, - "textToIconX": { - "$type": "number", - "$value": "{base.static.spacing.xxsmall}", - "$description": "", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["GAP"], - "codeSyntax": {} - } - } - }, - "fontSize": { - "$type": "number", - "$value": "{text.xsmall.fontSize}", - "$description": "", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["FONT_SIZE"], - "codeSyntax": {} - } - } - }, - "lineHeight": { - "$type": "number", - "$value": "{text.xsmall.lineHeight}", - "$description": "", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["LINE_HEIGHT"], - "codeSyntax": {} - } - } - }, - "borderWidth": { - "$type": "number", - "$value": "{borderWidth.default}", - "$description": "", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["STROKE_FLOAT", "EFFECT_FLOAT"], - "codeSyntax": {} - } - } - }, - "paddingY": { - "$type": "number", - "$value": 3, - "$description": "", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["GAP"], - "codeSyntax": {} - } - } - }, - "paddingX": { - "narrow": { - "$type": "number", - "$value": "{base.static.spacing.xxsmall}", - "$description": "", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["GAP"], - "codeSyntax": {} - } - } - }, - "default": { - "$type": "number", - "$value": "{base.static.spacing.xsmall}", - "$description": "", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["GAP"], - "codeSyntax": {} - } - } - }, - "wide": { - "$type": "number", - "$value": "{base.dimension.225}", - "$description": "", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["GAP"], - "codeSyntax": {} - } - } - } - }, - "width": { - "$type": "number", - "$value": "{base.dimension.600}", - "$description": "", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["WIDTH_HEIGHT"], - "codeSyntax": {} - } - } - }, - "height": { - "$type": "number", - "$value": "{base.dimension.600}", - "$description": "", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["WIDTH_HEIGHT"], - "codeSyntax": {} - } - } - } - }, - "small": { - "borderWidth": { - "$type": "number", - "$value": "{base.static.borderWidth.default}", - "$description": "", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["STROKE_FLOAT", "EFFECT_FLOAT"], - "codeSyntax": {} - } - } - }, - "paddingY": { - "$type": "number", - "$value": 3, - "$description": "", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["GAP"], - "codeSyntax": {} - } - } - }, - "fontSize": { - "$type": "number", - "$value": "{text.small.fontSize}", - "$description": "", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["FONT_SIZE"], - "codeSyntax": {} - } - } - }, - "lineHeight": { - "$type": "number", - "$value": "{text.small.lineHeight}", - "$description": "", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["LINE_HEIGHT"], - "codeSyntax": {} - } - } - }, - "minHeight": { - "$type": "number", - "$value": "{base.dimension.700}", - "$description": "", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["WIDTH_HEIGHT"], - "codeSyntax": {} - } - } - }, - "width": { - "$type": "number", - "$value": "{base.dimension.700}", - "$description": "", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["WIDTH_HEIGHT"], - "codeSyntax": {} - } - } - }, - "height": { - "$type": "number", - "$value": "{base.dimension.700}", - "$description": "", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["WIDTH_HEIGHT"], - "codeSyntax": {} - } - } - }, - "textToElementX": { - "$type": "number", - "$value": "{base.static.spacing.small}", - "$description": "", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["GAP"], - "codeSyntax": {} - } - } - }, - "textToIconX": { - "$type": "number", - "$value": "{base.static.spacing.xsmall}", - "$description": "", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["GAP"], - "codeSyntax": {} - } - } - }, - "paddingX": { - "narrow": { - "$type": "number", - "$value": "{base.static.spacing.xxsmall}", - "$description": "", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["GAP"], - "codeSyntax": {} - } - } - }, - "default": { - "$type": "number", - "$value": "{base.static.spacing.xsmall}", - "$description": "", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["GAP"], - "codeSyntax": {} - } - } - }, - "wide": { - "$type": "number", - "$value": "{base.static.spacing.small}", - "$description": "", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["GAP"], - "codeSyntax": {} - } - } - } - } - }, - "medium": { - "fontSize": { - "$type": "number", - "$value": "{text.medium.fontSize}", - "$description": "", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["FONT_SIZE"], - "codeSyntax": {} - } - } - }, - "lineHeight": { - "$type": "number", - "$value": "{text.medium.lineHeight}", - "$description": "", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["LINE_HEIGHT"], - "codeSyntax": {} - } - } - }, - "minHeight": { - "$type": "number", - "$value": "{base.dimension.900}", - "$description": "", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["WIDTH_HEIGHT"], - "codeSyntax": {} - } - } - }, - "width": { - "$type": "number", - "$value": "{base.dimension.900}", - "$description": "", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["WIDTH_HEIGHT"], - "codeSyntax": {} - } - } - }, - "height": { - "$type": "number", - "$value": "{base.dimension.900}", - "$description": "", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["WIDTH_HEIGHT"], - "codeSyntax": {} - } - } - }, - "textToElementX": { - "$type": "number", - "$value": "{base.static.spacing.small}", - "$description": "", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["GAP"], - "codeSyntax": {} - } - } - }, - "textToIconX": { - "$type": "number", - "$value": "{base.static.spacing.xsmall}", - "$description": "", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["GAP"], - "codeSyntax": {} - } - } - }, - "borderWidth": { - "$type": "number", - "$value": "{borderWidth.default}", - "$description": "", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["STROKE_FLOAT", "EFFECT_FLOAT"], - "codeSyntax": {} - } - } - }, - "paddingY": { - "$type": "number", - "$value": 5, - "$description": "", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["GAP"], - "codeSyntax": {} - } - } - }, - "paddingX": { - "narrow": { - "$type": "number", - "$value": 5, - "$description": "", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["GAP"], - "codeSyntax": {} - } - } - }, - "default": { - "$type": "number", - "$value": 10, - "$description": "", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["GAP"], - "codeSyntax": {} - } - } - }, - "wide": { - "$type": "number", - "$value": "{base.dimension.450}", - "$description": "", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["GAP"], - "codeSyntax": {} - } - } - } - } - }, - "large": { - "fontSize": { - "$type": "number", - "$value": "{text.large.fontSize}", - "$description": "", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["FONT_SIZE"], - "codeSyntax": {} - } - } - }, - "lineHeight": { - "$type": "number", - "$value": "{text.xlarge.lineHeight}", - "$description": "", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["LINE_HEIGHT"], - "codeSyntax": {} - } - } - }, - "minHeight": { - "$type": "number", - "$value": "{base.dimension.1200}", - "$description": "", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["WIDTH_HEIGHT"], - "codeSyntax": {} - } - } - }, - "width": { - "$type": "number", - "$value": "{base.dimension.1200}", - "$description": "", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["WIDTH_HEIGHT"], - "codeSyntax": {} - } - } - }, - "height": { - "$type": "number", - "$value": "{base.dimension.1200}", - "$description": "", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["WIDTH_HEIGHT"], - "codeSyntax": {} - } - } - }, - "textToElementX": { - "$type": "number", - "$value": "{base.static.spacing.small}", - "$description": "", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["GAP"], - "codeSyntax": {} - } - } - }, - "textToIconX": { - "$type": "number", - "$value": "{base.static.spacing.xsmall}", - "$description": "", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["GAP"], - "codeSyntax": {} - } - } - }, - "borderWidth": { - "$type": "number", - "$value": "{borderWidth.default}", - "$description": "", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["STROKE_FLOAT", "EFFECT_FLOAT"], - "codeSyntax": {} - } - } - }, - "paddingY": { - "$type": "number", - "$value": 8, - "$description": "", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["GAP"], - "codeSyntax": {} - } - } - }, - "paddingX": { - "narrow": { - "$type": "number", - "$value": "{base.dimension.225}", - "$description": "", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["GAP"], - "codeSyntax": {} - } - } - }, - "default": { - "$type": "number", - "$value": "{base.dimension.450}", - "$description": "", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["GAP"], - "codeSyntax": {} - } - } - }, - "wide": { - "$type": "number", - "$value": "{base.dimension.600}", - "$description": "", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["GAP"], - "codeSyntax": {} - } - } - } - } - }, - "xlarge": { - "fontSize": { - "$type": "number", - "$value": "{text.xlarge.lineHeight}", - "$description": "", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["FONT_SIZE"], - "codeSyntax": {} - } - } - }, - "lineHeight": { - "$type": "number", - "$value": "{text.xlarge.lineHeight}", - "$description": "", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["LINE_HEIGHT"], - "codeSyntax": {} - } - } - }, - "minHeight": { - "$type": "number", - "$value": "{base.dimension.1800}", - "$description": "", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["WIDTH_HEIGHT"], - "codeSyntax": {} - } - } - }, - "width": { - "$type": "number", - "$value": "{base.dimension.1800}", - "$description": "", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["WIDTH_HEIGHT"], - "codeSyntax": {} - } - } - }, - "height": { - "$type": "number", - "$value": "{base.dimension.1800}", - "$description": "", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["WIDTH_HEIGHT"], - "codeSyntax": {} - } - } - }, - "textToElementX": { - "$type": "number", - "$value": "{base.static.spacing.small}", - "$description": "", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["GAP"], - "codeSyntax": {} - } - } - }, - "textToIconX": { - "$type": "number", - "$value": "{base.static.spacing.xsmall}", - "$description": "", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["GAP"], - "codeSyntax": {} - } - } - }, - "borderWidth": { - "$type": "number", - "$value": "{borderWidth.default}", - "$description": "", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["STROKE_FLOAT", "EFFECT_FLOAT"], - "codeSyntax": {} - } - } - }, - "paddingY": { - "$type": "number", - "$value": 20, - "$description": "", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["GAP"], - "codeSyntax": {} - } - } - }, - "paddingX": { - "narrow": { - "$type": "number", - "$value": "{base.dimension.500}", - "$description": "", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["GAP"], - "codeSyntax": {} - } - } - }, - "default": { - "$type": "number", - "$value": "{base.dimension.600}", - "$description": "", - "$extensions": { - "com.figma": { - "hiddenFromPublishing": false, - "scopes": ["GAP"], - "codeSyntax": {} - } - } - }, - "wide": { - "$type": "number", - "$value": 32, + "$value": "{element.xlarge.textToIconX}", "$description": "", "$extensions": { "com.figma": { diff --git a/design-tokens/tokens/component/element.default.json b/design-tokens/tokens/component/element.default.json new file mode 100644 index 000000000..d3a60eb7e --- /dev/null +++ b/design-tokens/tokens/component/element.default.json @@ -0,0 +1,744 @@ +{ + "element": { + "xsmall": { + "minHeight": { + "$type": "number", + "$value": "{base.dimension.600}", + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["WIDTH_HEIGHT"], + "codeSyntax": {} + } + } + }, + "textToElementX": { + "$type": "number", + "$value": "{base.static.spacing.xxsmall}", + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["GAP"], + "codeSyntax": {} + } + } + }, + "textToIconX": { + "$type": "number", + "$value": "{base.static.spacing.xxsmall}", + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["GAP"], + "codeSyntax": {} + } + } + }, + "fontSize": { + "$type": "number", + "$value": "{text.xsmall.fontSize}", + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["FONT_SIZE"], + "codeSyntax": {} + } + } + }, + "lineHeight": { + "$type": "number", + "$value": "{text.xsmall.lineHeight}", + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["LINE_HEIGHT"], + "codeSyntax": {} + } + } + }, + "borderWidth": { + "$type": "number", + "$value": "{borderWidth.default}", + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["STROKE_FLOAT", "EFFECT_FLOAT"], + "codeSyntax": {} + } + } + }, + "paddingY": { + "$type": "number", + "$value": 3, + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["GAP"], + "codeSyntax": {} + } + } + }, + "paddingX": { + "narrow": { + "$type": "number", + "$value": "{base.static.spacing.xxsmall}", + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["GAP"], + "codeSyntax": {} + } + } + }, + "default": { + "$type": "number", + "$value": "{base.static.spacing.xsmall}", + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["GAP"], + "codeSyntax": {} + } + } + }, + "wide": { + "$type": "number", + "$value": "{base.dimension.225}", + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["GAP"], + "codeSyntax": {} + } + } + } + }, + "width": { + "$type": "number", + "$value": "{base.dimension.600}", + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["WIDTH_HEIGHT"], + "codeSyntax": {} + } + } + }, + "height": { + "$type": "number", + "$value": "{base.dimension.600}", + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["WIDTH_HEIGHT"], + "codeSyntax": {} + } + } + } + }, + "small": { + "borderWidth": { + "$type": "number", + "$value": "{base.static.borderWidth.default}", + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["STROKE_FLOAT", "EFFECT_FLOAT"], + "codeSyntax": {} + } + } + }, + "paddingY": { + "$type": "number", + "$value": 3, + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["GAP"], + "codeSyntax": {} + } + } + }, + "fontSize": { + "$type": "number", + "$value": "{text.small.fontSize}", + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["FONT_SIZE"], + "codeSyntax": {} + } + } + }, + "lineHeight": { + "$type": "number", + "$value": "{text.small.lineHeight}", + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["LINE_HEIGHT"], + "codeSyntax": {} + } + } + }, + "minHeight": { + "$type": "number", + "$value": "{base.dimension.700}", + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["WIDTH_HEIGHT"], + "codeSyntax": {} + } + } + }, + "width": { + "$type": "number", + "$value": "{base.dimension.700}", + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["WIDTH_HEIGHT"], + "codeSyntax": {} + } + } + }, + "height": { + "$type": "number", + "$value": "{base.dimension.700}", + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["WIDTH_HEIGHT"], + "codeSyntax": {} + } + } + }, + "textToElementX": { + "$type": "number", + "$value": "{base.static.spacing.small}", + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["GAP"], + "codeSyntax": {} + } + } + }, + "textToIconX": { + "$type": "number", + "$value": "{base.static.spacing.xsmall}", + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["GAP"], + "codeSyntax": {} + } + } + }, + "paddingX": { + "narrow": { + "$type": "number", + "$value": "{base.static.spacing.xxsmall}", + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["GAP"], + "codeSyntax": {} + } + } + }, + "default": { + "$type": "number", + "$value": "{base.static.spacing.xsmall}", + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["GAP"], + "codeSyntax": {} + } + } + }, + "wide": { + "$type": "number", + "$value": "{base.static.spacing.small}", + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["GAP"], + "codeSyntax": {} + } + } + } + } + }, + "medium": { + "fontSize": { + "$type": "number", + "$value": "{text.medium.fontSize}", + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["FONT_SIZE"], + "codeSyntax": {} + } + } + }, + "lineHeight": { + "$type": "number", + "$value": "{text.medium.lineHeight}", + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["LINE_HEIGHT"], + "codeSyntax": {} + } + } + }, + "minHeight": { + "$type": "number", + "$value": "{base.dimension.900}", + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["WIDTH_HEIGHT"], + "codeSyntax": {} + } + } + }, + "width": { + "$type": "number", + "$value": "{base.dimension.900}", + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["WIDTH_HEIGHT"], + "codeSyntax": {} + } + } + }, + "height": { + "$type": "number", + "$value": "{base.dimension.900}", + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["WIDTH_HEIGHT"], + "codeSyntax": {} + } + } + }, + "textToElementX": { + "$type": "number", + "$value": "{base.static.spacing.small}", + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["GAP"], + "codeSyntax": {} + } + } + }, + "textToIconX": { + "$type": "number", + "$value": "{base.static.spacing.xsmall}", + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["GAP"], + "codeSyntax": {} + } + } + }, + "borderWidth": { + "$type": "number", + "$value": "{borderWidth.default}", + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["STROKE_FLOAT", "EFFECT_FLOAT"], + "codeSyntax": {} + } + } + }, + "paddingY": { + "$type": "number", + "$value": 5, + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["GAP"], + "codeSyntax": {} + } + } + }, + "paddingX": { + "narrow": { + "$type": "number", + "$value": 5, + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["GAP"], + "codeSyntax": {} + } + } + }, + "default": { + "$type": "number", + "$value": 10, + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["GAP"], + "codeSyntax": {} + } + } + }, + "wide": { + "$type": "number", + "$value": "{base.dimension.450}", + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["GAP"], + "codeSyntax": {} + } + } + } + } + }, + "large": { + "fontSize": { + "$type": "number", + "$value": "{text.large.fontSize}", + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["FONT_SIZE"], + "codeSyntax": {} + } + } + }, + "lineHeight": { + "$type": "number", + "$value": "{text.xlarge.lineHeight}", + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["LINE_HEIGHT"], + "codeSyntax": {} + } + } + }, + "minHeight": { + "$type": "number", + "$value": "{base.dimension.1200}", + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["WIDTH_HEIGHT"], + "codeSyntax": {} + } + } + }, + "width": { + "$type": "number", + "$value": "{base.dimension.1200}", + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["WIDTH_HEIGHT"], + "codeSyntax": {} + } + } + }, + "height": { + "$type": "number", + "$value": "{base.dimension.1200}", + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["WIDTH_HEIGHT"], + "codeSyntax": {} + } + } + }, + "textToElementX": { + "$type": "number", + "$value": "{base.static.spacing.small}", + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["GAP"], + "codeSyntax": {} + } + } + }, + "textToIconX": { + "$type": "number", + "$value": "{base.static.spacing.xsmall}", + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["GAP"], + "codeSyntax": {} + } + } + }, + "borderWidth": { + "$type": "number", + "$value": "{borderWidth.default}", + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["STROKE_FLOAT", "EFFECT_FLOAT"], + "codeSyntax": {} + } + } + }, + "paddingY": { + "$type": "number", + "$value": 8, + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["GAP"], + "codeSyntax": {} + } + } + }, + "paddingX": { + "narrow": { + "$type": "number", + "$value": "{base.dimension.225}", + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["GAP"], + "codeSyntax": {} + } + } + }, + "default": { + "$type": "number", + "$value": "{base.dimension.450}", + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["GAP"], + "codeSyntax": {} + } + } + }, + "wide": { + "$type": "number", + "$value": "{base.dimension.600}", + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["GAP"], + "codeSyntax": {} + } + } + } + } + }, + "xlarge": { + "fontSize": { + "$type": "number", + "$value": "{text.xlarge.lineHeight}", + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["FONT_SIZE"], + "codeSyntax": {} + } + } + }, + "lineHeight": { + "$type": "number", + "$value": "{text.xlarge.lineHeight}", + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["LINE_HEIGHT"], + "codeSyntax": {} + } + } + }, + "minHeight": { + "$type": "number", + "$value": "{base.dimension.1800}", + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["WIDTH_HEIGHT"], + "codeSyntax": {} + } + } + }, + "width": { + "$type": "number", + "$value": "{base.dimension.1800}", + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["WIDTH_HEIGHT"], + "codeSyntax": {} + } + } + }, + "height": { + "$type": "number", + "$value": "{base.dimension.1800}", + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["WIDTH_HEIGHT"], + "codeSyntax": {} + } + } + }, + "textToElementX": { + "$type": "number", + "$value": "{base.static.spacing.small}", + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["GAP"], + "codeSyntax": {} + } + } + }, + "textToIconX": { + "$type": "number", + "$value": "{base.static.spacing.xsmall}", + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["GAP"], + "codeSyntax": {} + } + } + }, + "borderWidth": { + "$type": "number", + "$value": "{borderWidth.default}", + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["STROKE_FLOAT", "EFFECT_FLOAT"], + "codeSyntax": {} + } + } + }, + "paddingY": { + "$type": "number", + "$value": 20, + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["GAP"], + "codeSyntax": {} + } + } + }, + "paddingX": { + "narrow": { + "$type": "number", + "$value": "{base.dimension.500}", + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["GAP"], + "codeSyntax": {} + } + } + }, + "default": { + "$type": "number", + "$value": "{base.dimension.600}", + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["GAP"], + "codeSyntax": {} + } + } + }, + "wide": { + "$type": "number", + "$value": 32, + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["GAP"], + "codeSyntax": {} + } + } + } + } + } + } +} diff --git a/sandbox/grommet-app/src/theme.jsx b/sandbox/grommet-app/src/theme.jsx index 8477aa417..7a0c2faa8 100644 --- a/sandbox/grommet-app/src/theme.jsx +++ b/sandbox/grommet-app/src/theme.jsx @@ -738,11 +738,11 @@ const buildTheme = tokens => { size: { // At this point in time we hadn't standardized on component sizes, so the sizing is off // but these feel like the right tokens - xsmall: components.hpe.component.xsmall.minHeight, - small: components.hpe.component.small.minHeight, // 24px - medium: components.hpe.component.medium.minHeight, // default 48px - large: components.hpe.component.large.minHeight, // 72px - xlarge: components.hpe.component.xlarge.minHeight, // 96px + xsmall: components.hpe.element?.xsmall.minHeight, + small: components.hpe.element?.small.minHeight, // 24px + medium: components.hpe.element?.medium.minHeight, // default 48px + large: components.hpe.element?.large.minHeight, // 72px + xlarge: components.hpe.element?.xlarge.minHeight, // 96px '2xl': `${baseSpacing * 5}px`, // TO DO no component size, is this a one off? '3xl': `${baseSpacing * 6}px`, // TO DO no component size, is this a one off? '4xl': `${baseSpacing * 7}px`, // TO DO no component size, is this a one off? @@ -752,7 +752,7 @@ const buildTheme = tokens => { size: { xsmall: 'small', // TO DO no component size, is this a one off? // At this point in time we hadn't standardized on component sizes, so the sizing is off - // TO DO this feels like it should be able to point to components.hpe.component.medium.fontSize, etc. + // TO DO this feels like it should be able to point to components.hpe.element?.medium.fontSize, etc. small: 'small', medium: 'medium', large: 'large', @@ -1377,7 +1377,7 @@ const buildTheme = tokens => { align: 'start', }, pad: { - vertical: components.hpe.component.medium.paddingY, + vertical: components.hpe.element?.medium.paddingY, horizontal: components.hpe.formField.medium.input.container.paddingX, // TO DO is this correct usage? }, size: components.hpe.checkbox.medium.control.width, // TO DO should this token be called "size" instead? @@ -2163,11 +2163,11 @@ const buildTheme = tokens => { horizontal: '4px', }, font: { - size: components.hpe.component.small.fontSize, - height: components.hpe.component.small.lineHeight, + size: components.hpe.element?.small.fontSize, + height: components.hpe.element?.small.lineHeight, }, - height: components.hpe.component.small.minHeight, - width: components.hpe.component.small.minHeight, + height: components.hpe.element?.small.minHeight, + width: components.hpe.element?.small.minHeight, }, medium: { border: { @@ -2182,11 +2182,11 @@ const buildTheme = tokens => { horizontal: `4px`, }, font: { - size: components.hpe.component.medium.fontSize, - height: components.hpe.component.medium.lineHeight, + size: components.hpe.element?.medium.fontSize, + height: components.hpe.element?.medium.lineHeight, }, - height: components.hpe.component.medium.minHeight, - width: components.hpe.component.medium.minHeight, + height: components.hpe.element?.medium.minHeight, + width: components.hpe.element?.medium.minHeight, }, large: { border: { @@ -2201,11 +2201,11 @@ const buildTheme = tokens => { horizontal: `4px`, }, font: { - size: components.hpe.component.large.fontSize, - height: components.hpe.component.large.lineHeight, + size: components.hpe.element?.large.fontSize, + height: components.hpe.element?.large.lineHeight, }, - height: components.hpe.component.large.minHeight, - width: components.hpe.component.large.minHeight, + height: components.hpe.element?.large.minHeight, + width: components.hpe.element?.large.minHeight, }, }, }, @@ -2367,10 +2367,10 @@ const buildTheme = tokens => { }, size: { xsmall: `${baseSpacing * 0.75}px`, // TO DO no "xsmall" component size - small: components.hpe.component.small.minHeight, // TO DO should these align? this was before we standardized on component sizes - medium: components.hpe.component.medium.minHeight, - large: components.hpe.component.large.minHeight, - xlarge: components.hpe.component.xlarge.minHeight, + small: components.hpe.element?.small.minHeight, // TO DO should these align? this was before we standardized on component sizes + medium: components.hpe.element?.medium.minHeight, + large: components.hpe.element?.large.minHeight, + xlarge: components.hpe.element?.xlarge.minHeight, }, }, starRating: { @@ -2494,7 +2494,7 @@ const buildTheme = tokens => { // but it does highlight a gap of something we couldn't automatically update horizontal: 'small', // Q: should this be a token? - // A: Yes, ideally this could point to "components.hpe.component.medium.paddingY" + // A: Yes, ideally this could point to "components.hpe.element?.medium.paddingY" vertical: '5px', // 5px pad + 1px border = 6px 'xsmall' }, value: {