Breakpoints

[mimarz]

We need to define what our breakpoints are and define them as tokens so we can export them as css variables (even if media queries doens't support it yet) and make a page documententing usage.

Suggest keep using the same name we have for sizes to keep consistency.

Old breakpoint tokens: https://github.com/digdir/designsystemet/tree/main/design-tokens/Viewport

Notes:

• https://tailwindcss.com/docs/responsive-design
• https://mantine.dev/styles/responsive/
• https://react-spectrum.adobe.com/react-spectrum/Provider.html#breakpoints
• https://aksel.nav.no/grunnleggende/styling/brekkpunkter
• https://v2.chakra-ui.com/docs/styled-system/theme#breakpoints

  
  ### Tasks

• [ ] Breakpoints documentation page in Storybook & Storefront
• [ ] Breakpoints tokens
• [ ] Update storefront to use breakpoints
• [ ] https://github.com/digdir/designsystemet/issues/2105

[mimarz]

Decided to try these breakpoints

Size	em	px
xs	40em	640px
s	48em	768px
m	64em	1024px
l	80em	1280px
xl	96em	1536px

Suggested naming

--ds-breakpoint-xs
--ds-breakpoint-s
--ds-breakpoint-m
--ds-breakpoint-l
--ds-breakpoint-xl