EDS 2.0 tokens in EDS 1.0 code components

[vnys]

We need a strategy that encourages early adaptation of EDS 2.0. In order to do that we need EDS 1.0 components to use the EDS 2.0 tokens when they’re present. One way to do that is to insert CSS hooks in the token files with a fallback to the 1.0 tokens, so that if the application does not use the EDS 2.0 themes nothing happens, but if it does then the EDS 2.0 themes take precedence. I suggest focusing on colours and typography first and foremost. For the density modes we can consider saving that purely for EDS 2.0 apps.

[oddvernes]

If the new typography components are to fetch their tokens from the new css tokens, and those components are to be used inside existing react components (especially the UIText to be used inside tabs etc), then this idea falls apart. The alternatives are to

• release the new typography components but not use them ourselves in our components,
• or hardcode the typography tokens inside react (like @torleifhalseth did in his pr)
• or to make the new tokens a requirement from the moment we start using it

[torleifhalseth]

The last option makes sense to me, but I would hope that we could adjust the styling of our components to use this CSS setup (@vnys idea):

color: var(--eds-override-color, var(--eds-token-v2, --eds-tokens-v1))

This way we use the current v1 token if both the override variable and v2 token are undefined. This makes it optional for the application to start using/adding the new tokens. Do you think this makes sense or am I forgetting something?

[oddvernes]

If eds literally breaks without the v2 tokens (it becomes a requirement from the start), then the above fallback is meaningless waste of time since there would be no condition where v1 would be used

[torleifhalseth]

I get your point if we make v2 tokens a requirement and implement these tokens for all components, but I guess we want to do this gradually?

How would components break without the v2 tokens if we use the fallback @oddvernes?

I think we should separate the discussion regarding typography components and components using color tokens.