Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
oddvernes opened this issue Mar 22, 2024 · 1 comment · May be fixed by #3361
Open

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

oddvernes opened this issue Mar 22, 2024 · 1 comment · May be fixed by #3361
Assignees

Comments

@oddvernes
Copy link
Collaborator

oddvernes commented Mar 22, 2024

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.

@oddvernes oddvernes self-assigned this Mar 22, 2024
@oddvernes oddvernes linked a pull request Mar 22, 2024 that will close this issue
@oddvernes oddvernes changed the title ⚗️ Spike: how to impelement tokens in react components ⚗️ Spike: how to implement tokens in react components Apr 29, 2024
@torleifhalseth
Copy link
Collaborator

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants