Responsive

Let's take a look at how the responsive property works for our tokens:

text: {
  items: theme.sizeScale,
  responsive: true,
  property: 'font-size',
},

By including responsive: true, in the token, Blyth will automatically generate responsive classes for you! It'll allow you to create HTML like this:

<h2 class="text-400 lg:text-900">Test</h2>

This will generate a heading that's small on mobile, but large on large devices. You have complete control over your breakpoints, too:

breakpoints: {
  md: '48em',
  lg: '68em',
},

So in theory, you could add xl: 80em, and utilise a handy little utility like xl:text-900. Super handy, huh?