Responsive tokens

Responsive tokens are a specific kind of tokens that takes the reponsive styling the other way around:

• Do not define how the responsive of a token should behave inside a component styling
• Define how the token should behave at which breakpoint from the tokens configuration

Let's create a responsive token that use a light color in dark mode and a dark color in light mode:

A Responsive token is recognized by defining a token value as an object that includes initial and another key from your media queries.

initial key refers to the default value, free of any media query.

Responsive tokens supports:

• All your media queries in media key of your tokens.config
• dark and light native keys
• Tokens references
• Both native and class color scheme modes