Skip to content

Commit

Permalink
fix(ui-library): #971 align casing of tokens (part 1) (#1111)
Browse files Browse the repository at this point in the history
* init

* renames blanket and captionGroup

* renames captioncomponent -> formcaption

* replaces underscrore with hyphens @ formacaption

* replace hyphens with underscore

* refactor style-dictionary config

* fix form-caption index.css

* fixes uppercase leftovers

* all checbox tokens lower case

* fix borderWidth tokenns at checkbox

* renames sys sizing tokens to lower case

* lowercase Checkbox and formlabel

* checkbox size variant to lower case

* fix checkbox indes.css

* fix form caption group

* fix toggle switch and radio

* fix forms

* fix checkbox size variants in index.ts

* refactor sorting json

* counter tokens to lower case

* counter tokens to lower case

* counter tokens to lower case

* fix counter index css
larserbach authored Jun 4, 2024
1 parent 97f0922 commit 3a96182
Showing 17 changed files with 1,282 additions and 1,345 deletions.
71 changes: 2 additions & 69 deletions packages/figma-design-tokens/config/style-dictionary.config.cjs
Original file line number Diff line number Diff line change
@@ -9,36 +9,6 @@ const themes = require('./themes.cjs');
const { registerTransforms } = sdTransforms;
registerTransforms(StyleDictionaryPackage);

const semanticTypes = ['buttons', 'selectables', 'forms', 'global', 'ui'];

const componentTypes = [
'ButtonGroup',
'ButtonText',
'ButtonIcon',
'CaptionComponent',
'CaptionGroup',
'Checkbox',
'Counter',
'Divider',
'FormLabel',
'Icon',
'IconDropdown',
'InputIcon',
'InputFieldNumber',
'InputFieldText',
'Loader',
'RadioGroup',
'Select',
'Slider',
'StepperButton',
'StepperCombo',
'Radio',
'TabBar',
'TextArea',
'ToggleSwitch',
'Tooltip',
];

StyleDictionaryPackage.registerFormat({
name: 'custom/format/semanticTokens',
formatter: ({ dictionary, file }) => {
@@ -73,41 +43,6 @@ const getStyleDictionaryConfig = (theme) => {
'input/tokens/cmp/*.json',
],
platforms: {
/*
scss: {
transforms: [
'attribute/cti',
'name/cti/kebab',
'transform/resolveMath',
'transform/size/px',
'transform/font-to-rem',
],
prefix: 'blr',
buildPath: '../ui-library/src/foundation/_tokens-generated/',
files: [
...types.map((type) => ({
format: 'css/variables',
destination: `_${kebabCase(type)}.generated.scss`,
filter: (token) => token.attributes.category === 'core' && token.attributes.type === type,
})),
{
format: 'css/variables',
destination: `_color.generated.scss`,
filter: (token) => {
const isCore = token.attributes.category === 'core';
const isColor = token.attributes.type === 'color';
// We want to filter out some base color values that the final colors are made of.
// We don't need them as css variables.
const isLgt = token.attributes.item === 'LGT';
const isSat = ['HUE', 'SAT'].includes(token.attributes.subitem);
return isCore && isColor && !isSat && !isLgt;
},
},
],
},
*/
js: {
transforms: [
'attribute/cti',
@@ -123,16 +58,14 @@ const getStyleDictionaryConfig = (theme) => {
format: 'custom/format/semanticTokens',
destination: `__semantic-tokens.${theme}.generated.mjs`,
filter: (token) => {
const typeToFilter = semanticTypes;
return typeToFilter.includes(token.attributes.type);
return token.attributes.category === 'sem';
},
},
{
format: 'custom/format/componentTokens',
destination: `__component-tokens.${theme}.generated.mjs`,
filter: (token) => {
const typeToFilter = componentTypes;
return typeToFilter.includes(token.attributes.type) && token.type !== 'componentConfig';
return token.attributes.category === 'cmp' && token.type !== 'componentConfig';
},
},
{
659 changes: 331 additions & 328 deletions packages/figma-design-tokens/input/tokens/$themes.json

Large diffs are not rendered by default.

Loading

0 comments on commit 3a96182

Please sign in to comment.