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

Preview Give feedback

1. Breakpoints documentation page in Storybook & Storefront
2. Breakpoints tokens
3. Update storefront to use breakpoints
4. Storefront shoud use compact sizes for small viewports #2105
   ♿️ accessibility 🐛 bug 🖥️ storefront +3
   
5. Minimum screen width support #2573
   documentation/guidelines +1

[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

[Camulos]

Seem like there is a lot of users that use resolutions close to the minimums mentioned in WCAG (320px width). There is also something strange about the stats and most likely there is some pollution in the source-data used in Statcounter. I think the smallest size need to work from minimum 320 px, but we do not need to test for usability at smaller screens than 320.
https://gs.statcounter.com/screen-resolution-stats/all/norway

Would be interesting to see comparable results from some public service websites.

At BR we do not track viewport at the moment as this is not gathered on the server-side statistics that we get (in Kibana). However, I have asked for operation system and browser stats.