Design Tokens: Breakpoints

Feature Requests
1

I’d like to be able to override design tokens like fontSize based on the breakpoint.

2

Hello,

It’s possible to do this using responsive CSS styling. Here’s an example using very different font sizes

// in App.css
@media (max-width: 768px) {
  :root {
    --font-size: 200px; 
  }
}

@media (min-width: 1024px) {
  :root {
    --font-size: 5px; 
  }
}

// in App.js, where I'm registering the design token
{ name: 'Responsive Font Size', value: 'var(--font-size)' }

Now I can select Responsive Font Size from my design tokens and the styling will apply:

image
image2878×916 160 KB

image
image2880×1144 193 KB