⚗️ Spike: how to implement tokens in react components

[oddvernes]

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]

Related issue in roadmap: equinor/design-system-roadmap#23