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:

export default defineTheme({
    primary: {
      initial: '{color.blue.900}',
      dark: '{color.blue.50}'
    },
    blue: {
      50: '#C5CDE8',
      100: '#B6C1E2',
      200: '#99A8D7',
      300: '#7B8FCB',
      400: '#5E77C0',
      500: '#4560B0',
      600: '#354A88',
      700: '#25345F',
      800: '#161E37',
      900: '#06080F',
    },
})

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.

This convention also works for Variants and Computed Styles.

Responsive tokens supports:

Edit this page on GitHub