[Tokens] Breakpoint-tokens

[KenAJoh]

• Oppdatere bruk av breakpoints på aksel.nav.no, bruker nå egen config (gjelder bare sm)

Down-variant er ment for bruk i "desktop-first" løsninger, eks max-width: 1279px eller løsninger der man ønsker et spesifikt brekkpunkt min-width: 1024px and max-width: 1279px.

Har valgt å gå for px verdier for enklere implementasjon vs rem, em da sistnevnte har problemer med browser-støtte (spesielt safari).

--a-breakpoint-xl-down: 1279px;
--a-breakpoint-xl: 1280px;
--a-breakpoint-lg-down: 1023px;
--a-breakpoint-lg: 1024px;
--a-breakpoint-md-down: 767px;
--a-breakpoint-md: 768px;
--a-breakpoint-sm-down: 479px;
--a-breakpoint-sm: 480px;
--a-breakpoint-xs: 0;

Tailwind-config

Med unntak av sm er alle tokens de samme som tailwind tilbyr som default. I NAV er det 3 prosjekt som bruker sm i koden sin og vår tailwind pakke, noe som vil være en breaking change. Men de er ikke på v2 enda, så legger bare til dokumentasjon om breaking change og noe i migreringsguiden slik at det ikke blir et problem

"screen": {
  "sm": "480px",
  "md": "768px",
  "lg": "1024px",
  "xl": "1280px"
},

[changeset-bot]

🦋 Changeset detected

Latest commit: 52334e5

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 8 packages

Name	Type
@navikt/ds-tailwind	Minor
@navikt/ds-tokens	Minor
@navikt/ds-css	Minor
@navikt/ds-react	Minor
@navikt/ds-icons	Minor
@navikt/ds-css-internal	Minor
@navikt/ds-react-internal	Minor
@navikt/ds-codemod	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[github-actions]

Endringer til review: 1

81acf0b3d | 45 komponenter | 250 stories