Tokens

Token name	Current value	Figma usage	Description
--p-breakpoints-xs	0rem	—	Commonly used for sizing containers (e.g. max-width). See below for media query usage.
--p-breakpoints-sm	30.625rem	Set frame width to 490+ pixels	Commonly used for sizing containers (e.g. max-width). See below for media query usage.
--p-breakpoints-md	48rem	Set frame width to 768+ pixels	Commonly used for sizing containers (e.g. max-width). See below for media query usage.
--p-breakpoints-lg	65rem	Set frame width to 1040+ pixels	Commonly used for sizing containers (e.g. max-width). See below for media query usage.
--p-breakpoints-xl	90rem	Set frame width to 1440+ pixels	Commonly used for sizing containers (e.g. max-width). See below for media query usage.

Usage in Media Queries

Sass variables

A transform takes the above values and generates Sass variables (which can be used in media conditions) for each breakpoint in up, down, and only directions. While we currently support down media conditions, we encourage developers to adopt a mobile first strategy and use up wherever possible.

Example of generated output for breakpoints-md:

Example
@media #{$p-breakpoints-md-up} {/*...*/}
@media #{$p-breakpoints-md-down} {/*...*/}
@media #{$p-breakpoints-md-only} {/*...*/}

To use these Sass variables you will need to import the media-queries.scss file from @shopify/polaris-tokens in your project:

Example
@import 'path/to/node_modules/@shopify/polaris-tokens/dist/scss/media-queries';

Media query variables

A collection of all Sass variables for applying responsive styles at a given breakpoint alias.

Example
$p-breakpoints-xs-up: '(min-width: 0em)';
$p-breakpoints-xs-down: '(max-width: -0.0025em)';
$p-breakpoints-xs-only: '(min-width: 0em) and (max-width: 30.6225em)';

$p-breakpoints-sm-up: '(min-width: 30.625em)';
$p-breakpoints-sm-down: '(max-width: 30.6225em)';
$p-breakpoints-sm-only: '(min-width: 30.625em) and (max-width: 47.9975em)';

$p-breakpoints-md-up: '(min-width: 48em)';
$p-breakpoints-md-down: '(max-width: 47.9975em)';
$p-breakpoints-md-only: '(min-width: 48em) and (max-width: 64.9975em)';

$p-breakpoints-lg-up: '(min-width: 65em)';
$p-breakpoints-lg-down: '(max-width: 64.9975em)';
$p-breakpoints-lg-only: '(min-width: 65em) and (max-width: 89.9975em)';

$p-breakpoints-xl-up: '(min-width: 90em)';
$p-breakpoints-xl-down: '(max-width: 89.9975em)';
$p-breakpoints-xl-only: '(min-width: 90em)';