refactor(utilities): use system tokens - #2477
Conversation
Replaces the semantic tokens with the system tokens without adjusting any class names.
9f21737 to
8c2cbe0
Compare
|
The utilities do not match the names of the tokens (e.g. WDYT? @spike-rabbit @dr-itz @timowolf |
kfenner
added
the
core-team-discussion
|
Leave them as they are and introduce a bunch of new utilities called |
| 'base-critical': semantic-tokens.$element-base-critical, | ||
| 'primary': system-tokens.$si-sys-background-accent, | ||
| 'secondary': system-tokens.$si-sys-text-secondary, | ||
| 'tertiary': system-tokens.$si-sys-text-disabled, |
There was a problem hiding this comment.
I assume these are wrong and should map to background colors
timowolf
left a comment
timowolf
left a comment
There was a problem hiding this comment.
Changes are needed and the new tokens need to be made available. I would prefer to remove old tokens and or generate the utility on token level.
| 'danger': system-tokens.$si-sys-text-danger, | ||
| 'inverse': system-tokens.$si-sys-text-inverse, | ||
| 'muted': system-tokens.$si-sys-text-disabled | ||
| ) !default; |
There was a problem hiding this comment.
While these mappings looks good, we should also add the new token names as utility and make those deprecated.
Doing so will result in conflicts as some names are redundant. Bootstrap primary is our accent, I think this should be a breaking change and we should map those.
So, make all new token names available, keep old names that are not existent anymore and mark as breaking change
| 'secondary': system-tokens.$si-sys-text-secondary, | ||
| 'tertiary': system-tokens.$si-sys-text-disabled, |
There was a problem hiding this comment.
Same, these bg colors do not exist. We should remove them.
| 'base-success': system-tokens.$si-sys-background-success-subtle, | ||
| 'base-info': system-tokens.$si-sys-background-information-subtle, | ||
| 'base-caution': system-tokens.$si-sys-background-caution-subtle, | ||
| 'base-warning': system-tokens.$si-sys-background-warning-subtle, | ||
| 'base-danger': system-tokens.$si-sys-background-danger-subtle, | ||
| 'base-critical': system-tokens.$si-sys-background-critical-subtle, |
There was a problem hiding this comment.
Does not make sense, I would map them to the background status colors and add the subtle as its own token.
| 'success': system-tokens.$si-sys-background-success, | ||
| 'info': system-tokens.$si-sys-background-information, | ||
| 'caution': system-tokens.$si-sys-background-caution, | ||
| 'warning': system-tokens.$si-sys-background-warning, | ||
| 'danger': system-tokens.$si-sys-background-danger, | ||
| 'critical': system-tokens.$si-sys-background-critical, | ||
| 'neutral': system-tokens.$si-sys-border-4, | ||
| 'success-contrast': system-tokens.$si-sys-text-on-success, | ||
| 'info-contrast': system-tokens.$si-sys-text-on-information, | ||
| 'caution-contrast': system-tokens.$si-sys-text-on-caution, | ||
| 'warning-contrast': system-tokens.$si-sys-text-on-warning, | ||
| 'danger-contrast': system-tokens.$si-sys-text-on-danger, | ||
| 'critical-contrast': system-tokens.$si-sys-text-on-critical |
There was a problem hiding this comment.
I think this should be the text colors, let us sync on this one.
kfenner
removed
the
core-team-discussion
3 participants
Replaces the semantic tokens with the system tokens without adjusting any class names.
Documentation.
Examples.
Dashboards Demo.
Playwright report.
Coverage Reports: