Skip to content

Update SCSS breakpoint vars to use values from design tokens #6882

@mcoker

Description

@mcoker

Here are the current scss vars, we just need to make sure they match the token values

// Grid breakpoints
// Note that these duplicate and should match breakpoint tokens
$pf-v6-global--breakpoint--xs: 0 !default;
$pf-v6-global--breakpoint--sm: 576px !default;
$pf-v6-global--breakpoint--md: 768px !default;
$pf-v6-global--breakpoint--lg: 992px !default;
$pf-v6-global--breakpoint--xl: 1200px !default;
$pf-v6-global--breakpoint--2xl: 1450px !default;
// Height breakpoints
$pf-v6-global--height-breakpoint--sm: 0 !default;
$pf-v6-global--height-breakpoint--md: 40rem !default; // 640px
$pf-v6-global--height-breakpoint--lg: 48rem !default; // 768px
$pf-v6-global--height-breakpoint--xl: 60rem !default; // 960px
$pf-v6-global--height-breakpoint--2xl: 80rem !default; // 1280px

And here are the tokens

--pf-t--global--breakpoint--100: 0rem;
--pf-t--global--breakpoint--200: 36rem;
--pf-t--global--breakpoint--250: 40rem;
--pf-t--global--breakpoint--300: 48rem;
--pf-t--global--breakpoint--350: 60rem;
--pf-t--global--breakpoint--400: 62rem;
--pf-t--global--breakpoint--500: 75rem;
--pf-t--global--breakpoint--550: 80rem;
--pf-t--global--breakpoint--600: 90.625rem;

--pf-t--global--breakpoint--2xl: var(--pf-t--global--breakpoint--600);
--pf-t--global--breakpoint--height--2xl: var(--pf-t--global--breakpoint--550);
--pf-t--global--breakpoint--height--lg: var(--pf-t--global--breakpoint--300);
--pf-t--global--breakpoint--height--md: var(--pf-t--global--breakpoint--250);
--pf-t--global--breakpoint--height--sm: var(--pf-t--global--breakpoint--100);
--pf-t--global--breakpoint--height--xl: var(--pf-t--global--breakpoint--350);
--pf-t--global--breakpoint--lg: var(--pf-t--global--breakpoint--400);
--pf-t--global--breakpoint--md: var(--pf-t--global--breakpoint--300);
--pf-t--global--breakpoint--sm: var(--pf-t--global--breakpoint--200);
--pf-t--global--breakpoint--xl: var(--pf-t--global--breakpoint--500);
--pf-t--global--breakpoint--xs: var(--pf-t--global--breakpoint--100);

Metadata

Metadata

Assignees

Labels

No labels
No labels

Type

No type
No fields configured for issues without a type.

Projects

Status
Done

Relationships

None yet

Development

No branches or pull requests

Issue actions