Breakpoint Tokens

Tokens

Usage

Design Tokens can not be used directly in a Media Query.

Don’t do this 

@media (min-width: var(--ods-sys-breakpoint-md)) {
    .container {
        max-width: 1024px;
    }
}

Do this instead

You could define your Media Queries using the values above as a reference. 

@media (min-width: 1024px) {
    .container {
        ...
    }
}

Use a CSS pre-processor like SASS to generate Media Queries using our Breakpoints. 

@media (min-width: $ods-sys-breakpoint-md) {
    .container {
        ...
    }
}


/* compiled output: */
@media (min-width: 1024px) {
     .container {
        ...
    }
}

Search