Text Sizing Control

I just wanted to verify that this is the way to set text sizing for various devices. I want the smallest device size (I believe xs) at sm size and base device at base size & above:

{
  "title": "Text Size:",
  "id": "textsize",
  "themeTextStyle": {
    "default": {
      "xs": {"name": "sm"},
      "base": {"name": "base"}
    }
  }
}

Which generates this class: text-base

the syntax is correct, however the keys for the default object are incorrect.

  • an xs screen size does not exist.
  • base is from 0px and upwards (so anything below the sm screen).

The following should do what you’re asking for:

{
  "title": "Text Size:",
  "id": "textsize",
  "themeTextStyle": {
    "default": {
      "base": { "name": "sm"},
      "sm": {"name": "base"}
    }
  }
}

Check the screens are in the Theme Studio and you’ll see the available screen sizes.

On the screen sizes could you please label Mobile as Base or put base in parenthesis as it’s confusing when using the screens window for reference.