Skip to content

Commit

Permalink
fix(tokens): #1168 move typotokens into sym (#1169)
Browse files Browse the repository at this point in the history 
* fix semantic typo

* fix: use sys tokens in component tokens

* fix: moves elevations to sys

* fixing inverse colors
  • Loading branch information
@larserbach @ChristianHoffmannS2
larserbach authored and ChristianHoffmannS2 committed Jan 13, 2025
1 parent 0c6f8e1 commit 48cd942
Show file tree
Hide file tree
Showing 12 changed files with 1,535 additions and 1,550 deletions.
7 changes: 7 additions & 0 deletions packages/figma-design-tokens/config/style-dictionary.config.mjs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -137,6 +137,13 @@ async function run() {
],
},
},
log: {
warnings: 'warn', // 'warn' | 'error' | 'disabled'
verbosity: 'verbose', // 'default' | 'silent' | 'verbose'
errors: {
brokenReferences: 'throw', // 'throw' | 'console'
},
},
};
});

Expand Down
3 changes: 2 additions & 1 deletion packages/figma-design-tokens/input/tokens/$metadata.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,10 +6,11 @@
"sys/light",
"sys/dark",
"sys/sizes",
"sys/shadows",
"sys/typography",
"sem/colors",
"sem/sizes",
"sem/borders",
"sem/shadows",
"sem/typography",
"sem/sizeVariants",
"cmp/color",
Expand Down
2,233 changes: 1,084 additions & 1,149 deletions packages/figma-design-tokens/input/tokens/$themes.json
View file

Large diffs are not rendered by default.

128 changes: 58 additions & 70 deletions packages/figma-design-tokens/input/tokens/cmp/color.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -112,22 +112,22 @@
"inactive": {
"rest": {
"$type": "color",
"$value": "{sys.bordercolor.inverse.rest}",
"$value": "{sys.bordercolor.inverse.primary.rest}",
"$description": "also applies to indeterminate"
},
"hover": {
"$type": "color",
"$value": "{sys.bordercolor.inverse.hover}",
"$value": "{sys.bordercolor.inverse.primary.hover}",
"$description": "also applies to indeterminate"
},
"pressed": {
"$type": "color",
"$value": "{sys.bordercolor.inverse.pressed}",
"$value": "{sys.bordercolor.inverse.primary.pressed}",
"$description": "also applies to indeterminate"
},
"focus": {
"$type": "color",
"$value": "{sys.bordercolor.inverse.rest}",
"$value": "{sys.bordercolor.inverse.primary.rest}",
"$description": "also applies to indeterminate"
},
"disabled": {
Expand All @@ -137,7 +137,7 @@
},
"error": {
"$type": "color",
"$value": "{sys.bgcolor.bold.danger.rest}",
"$value": "{sys.bordercolor.inverse.error.rest}",
"$description": "also applies to indeterminate"
}
}
Expand Down Expand Up @@ -180,32 +180,32 @@
"inactive": {
"rest": {
"$type": "color",
"$value": "{sys.content.inverse.transparent}",
"$value": "{sys.content.transparent}",
"$description": "also applies to indeterminate"
},
"hover": {
"$type": "color",
"$value": "{sys.content.inverse.transparent}",
"$value": "{sys.content.transparent}",
"$description": "also applies to indeterminate"
},
"pressed": {
"$type": "color",
"$value": "{sys.content.inverse.transparent}",
"$value": "{sys.content.transparent}",
"$description": "also applies to indeterminate"
},
"focus": {
"$type": "color",
"$value": "{sys.content.inverse.transparent}",
"$value": "{sys.content.transparent}",
"$description": "also applies to indeterminate"
},
"disabled": {
"$type": "color",
"$value": "{sys.content.inverse.transparent}",
"$value": "{sys.content.transparent}",
"$description": "also applies to indeterminate"
},
"error": {
"$type": "color",
"$value": "{sys.content.inverse.transparent}",
"$value": "{sys.content.transparent}",
"$description": "also applies to indeterminate"
}
}
Expand Down Expand Up @@ -686,126 +686,114 @@
"inactive": {
"rest": {
"$type": "color",
"$value": "{sys.bgcolor.bold.primary.rest}",
"$description": "forms.radio.control.background.unselected.fill.rest"
"$value": "{sys.bordercolor.inverse.primary.rest}"
},
"hover": {
"$type": "color",
"$value": "{sys.bgcolor.bold.primary.hover}",
"$description": "forms.radio.control.background.unselected.fill.hover"
"$value": "{sys.bordercolor.inverse.primary.hover}"
},
"pressed": {
"$type": "color",
"$value": "{sys.bgcolor.bold.primary.pressed}",
"$description": "forms.radio.control.background.unselected.fill.pressed"
"$value": "{sys.bordercolor.inverse.primary.pressed}"
},
"focus": {
"$type": "color",
"$value": "{sys.bgcolor.bold.primary.rest}",
"$description": "forms.radio.control.background.unselected.fill.focus"
"$value": "{sys.bordercolor.inverse.primary.rest}"
},
"disabled": {
"$type": "color",
"$value": "{sys.bgcolor.bold.disabled}",
"$description": "forms.radio.control.background.unselected.fill.disabled"
"$value": "{sys.bordercolor.inverse.disabled}"
},
"error": {
"$type": "color",
"$value": "{sys.bgcolor.bold.danger.rest}",
"$description": "forms.radio.control.background.unselected.fill.error"
"$value": "{sys.bordercolor.inverse.error.rest}"
}
},
"active": {
"rest": {
"$type": "color",
"$value": "{sys.bgcolor.bold.primary.rest}",
"$description": "forms.radio.control.background.selected.fill.rest"
"$value": "{sys.bgcolor.bold.primary.rest}"
},
"hover": {
"$type": "color",
"$value": "{sys.bgcolor.bold.primary.hover}",
"$description": "forms.radio.control.background.selected.fill.hover"
"$value": "{sys.bgcolor.bold.primary.hover}"
},
"pressed": {
"$type": "color",
"$value": "{sys.bgcolor.bold.primary.pressed}",
"$description": "forms.radio.control.background.selected.fill.pressed"
"$value": "{sys.bgcolor.bold.primary.pressed}"
},
"focus": {
"$type": "color",
"$value": "{sys.bgcolor.bold.primary.rest}",
"$description": "forms.radio.control.background.selected.fill.focus"
"$value": "{sys.bordercolor.inverse.primary.rest}"
},
"disabled": {
"$type": "color",
"$value": "{sys.bgcolor.bold.disabled}",
"$description": "forms.radio.control.background.selected.fill.disabled"
"$value": "{sys.bordercolor.inverse.disabled}"
},
"error": {
"$type": "color",
"$value": "{sys.bgcolor.bold.danger.rest}",
"$description": "forms.radio.control.background.unselected.fill.error"
"$value": "{sys.bordercolor.inverse.error.rest}"
}
}
},
"bordercolor": {
"inactive": {
"active": {
"rest": {
"$type": "color",
"$value": "{sys.bgcolor.bold.primary.rest}",
"$description": "forms.radio.control.background.unselected.fill.rest"
"$description": "forms.radio.control.background.selected.fill.rest"
},
"hover": {
"$type": "color",
"$value": "{sys.bgcolor.bold.primary.hover}",
"$description": "forms.radio.control.background.unselected.fill.hover"
"$description": "forms.radio.control.background.selected.fill.hover"
},
"pressed": {
"$type": "color",
"$value": "{sys.bgcolor.bold.primary.pressed}",
"$description": "forms.radio.control.background.unselected.fill.pressed"
"$description": "forms.radio.control.background.selected.fill.pressed"
},
"focus": {
"$type": "color",
"$value": "{sys.bgcolor.bold.primary.rest}",
"$description": "forms.radio.control.background.unselected.fill.focus"
"$description": "forms.radio.control.background.selected.fill.focus"
},
"disabled": {
"$type": "color",
"$value": "{sys.bgcolor.bold.disabled}",
"$description": "forms.radio.control.background.unselected.fill.disabled"
"$description": "forms.radio.control.background.selected.fill.disabled"
},
"error": {
"$type": "color",
"$value": "{sys.bgcolor.bold.danger.rest}",
"$value": "{sys.bordercolor.inverse.error.rest}",
"$description": "forms.radio.control.background.unselected.fill.error"
}
},
"active": {
"inactive": {
"rest": {
"$type": "color",
"$value": "{sys.bgcolor.bold.primary.rest}",
"$description": "forms.radio.control.background.selected.fill.rest"
"$value": "{sys.bordercolor.inverse.primary.rest}",
"$description": "forms.radio.control.background.unselected.fill.rest"
},
"hover": {
"$type": "color",
"$value": "{sys.bgcolor.bold.primary.hover}",
"$description": "forms.radio.control.background.selected.fill.hover"
"$value": "{sys.bordercolor.inverse.primary.hover}",
"$description": "forms.radio.control.background.unselected.fill.hover"
},
"pressed": {
"$type": "color",
"$value": "{sys.bgcolor.bold.primary.pressed}",
"$description": "forms.radio.control.background.selected.fill.pressed"
"$value": "{sys.bordercolor.inverse.primary.pressed}",
"$description": "forms.radio.control.background.unselected.fill.pressed"
},
"focus": {
"$type": "color",
"$value": "{sys.bgcolor.bold.primary.rest}",
"$description": "forms.radio.control.background.selected.fill.focus"
"$value": "{sys.bordercolor.inverse.primary.rest}",
"$description": "forms.radio.control.background.unselected.fill.focus"
},
"disabled": {
"$type": "color",
"$value": "{sys.bgcolor.bold.disabled}",
"$description": "forms.radio.control.background.selected.fill.disabled"
"$value": "{sys.bordercolor.inverse.disabled}",
"$description": "forms.radio.control.background.unselected.fill.disabled"
},
"error": {
"$type": "color",
Expand All @@ -820,64 +808,64 @@
"inactive": {
"rest": {
"$type": "color",
"$value": "{sys.content.bold.primary.regular}",
"$value": "{sys.bgcolor.inverse.rest}",
"$description": "forms.radio.control.foreground.unselected.fill.rest"
},
"hover": {
"$type": "color",
"$value": "{sys.content.bold.primary.regular}",
"$value": "{sys.bgcolor.inverse.hover}",
"$description": "forms.radio.control.foreground.unselected.fill.hover"
},
"pressed": {
"$type": "color",
"$value": "{sys.content.bold.primary.regular}",
"$value": "{sys.bgcolor.inverse.pressed}",
"$description": "forms.radio.control.foreground.unselected.fill.pressed"
},
"focus": {
"$type": "color",
"$value": "{sys.content.bold.primary.regular}",
"$value": "{sys.bgcolor.inverse.rest}",
"$description": "forms.radio.control.foreground.unselected.fill.focus"
},
"disabled": {
"$type": "color",
"$value": "{sys.content.bold.disabled.regular}",
"$value": "{sys.bgcolor.inverse.disabled}",
"$description": "forms.radio.control.foreground.unselected.fill.disabled"
},
"error": {
"$type": "color",
"$value": "{sys.content.bold.primary.regular}",
"$value": "{sys.bgcolor.inverse.rest}",
"$description": "forms.radio.control.foreground.unselected.fill.error"
}
},
"active": {
"rest": {
"$type": "color",
"$value": "{sys.content.bold.primary.regular}",
"$description": "forms.radio.control.foreground.selected.fill.rest"
"$value": "{sys.bgcolor.inverse.rest}",
"$description": "forms.radio.control.foreground.unselected.fill.rest"
},
"hover": {
"$type": "color",
"$value": "{sys.content.bold.primary.regular}",
"$description": "forms.radio.control.foreground.selected.fill.hover"
"$value": "{sys.bgcolor.inverse.hover}",
"$description": "forms.radio.control.foreground.unselected.fill.hover"
},
"pressed": {
"$type": "color",
"$value": "{sys.content.bold.primary.regular}",
"$description": "forms.radio.control.foreground.selected.fill.pressed"
"$value": "{sys.bgcolor.inverse.pressed}",
"$description": "forms.radio.control.foreground.unselected.fill.pressed"
},
"focus": {
"$type": "color",
"$value": "{sys.content.bold.primary.regular}",
"$description": "forms.radio.control.foreground.selected.fill.focus"
"$value": "{sys.bgcolor.inverse.rest}",
"$description": "forms.radio.control.foreground.unselected.fill.focus"
},
"disabled": {
"$type": "color",
"$value": "{sys.content.bold.disabled.regular}",
"$description": "forms.radio.control.foreground.selected.fill.disabled"
"$value": "{sys.bgcolor.inverse.disabled}",
"$description": "forms.radio.control.foreground.unselected.fill.disabled"
},
"error": {
"$type": "color",
"$value": "{sys.content.bold.primary.regular}",
"$value": "{sys.bgcolor.inverse.rest}",
"$description": "forms.radio.control.foreground.unselected.fill.error"
}
}
Expand Down
10 changes: 9 additions & 1 deletion packages/figma-design-tokens/input/tokens/cmp/shadows.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,10 +5,18 @@
"elevation": {
"elevated": {
"$type": "boxShadow",
"$value": "{sem.elevation.lvl_1}"
"$value": "{sys.elevation.lvl_1}"
}
}
}
},
"menu": {
"container": {
"elevation": {
"$type": "boxShadow",
"$value": "{sys.elevation.lvl_1}"
}
}
}
}
}
Loading

0 comments on commit 48cd942

Please sign in to comment.