search

equinor / design-system

The Equinor design system
MIT License
118 stars 64 forks source link

⚗️ Spike: how to implement tokens in react components #3360

Open oddvernes opened 7 months ago

oddvernes commented 7 months ago

related: https://github.com/equinor/design-system-tokens/issues/155 Finding so far: There are some challenges here, such as if we need to still use 1.0 tokens as fallbacks when the 2.0 tokens are not 1:1. For example chips have more variants in 2.0.

Trying to implement button tokens by implementing them in the local token files i am running into an issue with the bordersTemplate and typographyTemplate setting border-color and color which interfers with how i want to set up local variables. Example how it can be done otherwise: In contained.ts primary (the local token for default button): background: var(--eds-color-surface-button-primary-filled, ${primaryColor}), in button.tsx styled.button: --_button-color-background: var(--eds-button-color-background, ${theme.background}); background-color: var(--_button-color-background);

here --eds-button-color-background would be undefined and serve as the public api to overwite custom background

A different approach could be to do more like in the workshop repo css implementation (just using conditional css blocks with styled components) and extract the 1.0 token fallbacks in the component instead of the local token file.

torleifhalseth commented 5 months ago

Related issue in roadmap: https://github.com/equinor/design-system-roadmap/issues/23