Breakpoints

Breakpoint tokens are only needed internally. They are used to generate scales of font sizes and spacing for different screen sizes.

Only one CSS custom property is created, which is read via JavaScript and used to inform components about a breakpoint change.

breakpoints.json

tokens.css

{
  "ks": {
    "breakpoint": {
      "phone": {
        "value": "36em",
        "private": true
      },
      "tablet": {
        "value": "48em",
        "private": true
      },
      "laptop": {
        "value": "62em",
        "private": true
      },
      "desktop": {
        "value": "75em",
        "private": true
      }
    }
  }
}

CSS custom properties don't work in media query declarations. So if you write custom styles, you have to write the media query declaration manually.