Skip to main content

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
Copy

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

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.