diff --git a/.changeset/hardcode-spacing-scale.md b/.changeset/hardcode-spacing-scale.md
new file mode 100644
index 0000000..7c137a2
--- /dev/null
+++ b/.changeset/hardcode-spacing-scale.md
@@ -0,0 +1,5 @@
+---
+"@sb1/indeks-css": minor
+---
+
+Spacing-skalaen bruker nå faste px-verdier i stedet for en fluid formel. Desktop-skalaen gjelder fra 768px (tablet og oppover). `data-density="comfortable"` er fjernet; `compact` gjelder nå kun tablet og oppover. T-skjortenavn (2xs–4xl) er uendret, men enkelte konkrete px-verdier har endret seg. Ny `none`-verdi i skalaen + nye `ix-*-none` utility-klasser (gamle `ix-*-0` beholdes som alias).
diff --git a/indeks-docs/docs/grunnleggende/tokens/spacing.md b/indeks-docs/docs/grunnleggende/tokens/spacing.md
index 6d2d7d9..6205a33 100644
--- a/indeks-docs/docs/grunnleggende/tokens/spacing.md
+++ b/indeks-docs/docs/grunnleggende/tokens/spacing.md
@@ -1,26 +1,23 @@
# Spacing
-Spacing-systemet i Indeks sikrer konsistente avstander mellom elementer på tvers av flater. Systemet er bygget på en skalerbar grunnverdi og kan justeres for ulike skjermstørrelser og behov for mer eller mindre kompakt visning.
+Spacing-systemet i Indeks sikrer konsistente avstander mellom elementer på tvers av flater. Skalaen har faste verdier som tilpasser seg skjermstørrelse og behov for mer kompakt visning.
-## Grunnverdier
+## Skjermstørrelse
-Spacing-systemet bruker følgende grunnverdier:
+Spacing-verdiene har to nivåer basert på skjermstørrelse:
-- **Mobil**: 16px (1rem)
-- **Tablet**: 17px (1.063rem)
-- **Desktop**: 18px (1.125)
+- **Telefon** (under 768px): Litt tettere verdier som passer små skjermer.
+- **Tablet og oppover** (768px og bredere): Litt romsligere verdier.
-Det betyr at størrelsen `md` fungerer som et referansepunkt i skalaen, og at øvrige størrelser beregnes relativt til denne. Typografi bruker `rem`, mens spacing er definert i `px`, men begge følger den samme underliggende skalaen for å sikre konsistente proporsjoner på tvers av systemet.
+Størrelsen `md` er ankeret i skalaen: 16px på telefon og 20px på tablet og oppover. De øvrige størrelsene følger samme mønster. Byttet skjer automatisk ved 768px.
## Density-moduser
-Spacing-systemet i Indeks kan justeres basert på hvor kompakt eller romslig (desinsity) en flate skal være. Dette gjør det mulig å vise mer eller mindre innhold på samme flate, uten å gå på bekostning av lesbarhet. Indeks støtter tre ulike moduser som påvirker alle spacing-verdier.
+Spacing-systemet kan justeres basert på hvor kompakt en flate skal være. Indeks støtter to moduser:
- **Default**: Standard visning med balanserte spacing-verdier som gir god lesbarhet og tydelig struktur. Dette er anbefalt valg for de fleste flater og brukstilfeller.
-- **Compact**: Kompakt visning med reduserte spacing-verdier. Er godt egnet for flater med behov for høy informasjonstetthet, som for eksempel rådgiverflater og andre interne systemer. Et kompakt område kan settes ved bruk av attributtet `data-density="compact"`.
-
-- **Comfortable**: Komfortabel visning med økte spacing-verdier som gir et mer romslig uttrykk. Egner seg godt for åpne nettsider, salgskanaler og kampanjer, der innholdet skal få mer luft og oppmerksomhet. Et komfortabelt område kan settes ved bruk av attributtet `data-density="comfortable"`.
+- **Compact**: Kompakt visning med reduserte spacing-verdier. Er godt egnet for flater med behov for høy informasjonstetthet, som for eksempel rådgiverflater og andre interne systemer. Settes med attributtet `data-density="compact"`. Compact gjelder kun fra tablet og oppover (768px); på telefon brukes alltid standard-skalaen.
```html
@@ -28,30 +25,26 @@ Spacing-systemet i Indeks kan justeres basert på hvor kompakt eller romslig (de
...
-
-
-
...
```
## Spacing-skala
-Spacing-tokens følger en konsistent, skalerbar skala fra `2xs` til `4xl`. Skalaen er bygget for å dekke både små justeringer og større avstander, og brukes konsekvent på tvers av komponenter og flater.
-
-| Token | Beskrivelse | Default | Compact | Comfortable |
-| ----- | -------------- | ------- | ------- | ----------- |
-| `2xs` | Ekstra liten | 4px | 2px | 6px |
-| `xs` | Liten | 7px | 4px | 9px |
-| `sm` | Small | 11px | 9px | 14px |
-| `md` | Medium | 16px | 13px | 20px |
-| `lg` | Large | 23px | 18px | 29px |
-| `xl` | Extra large | 32px | 26px | 41px |
-| `2xl` | 2x extra large | 46px | 36px | 58px |
-| `3xl` | 3x extra large | 66px | 52px | 83px |
-| `4xl` | 4x extra large | 106px | 83px | 133px |
+Spacing-tokens følger en konsistent skala fra `none` til `4xl`. Skalaen dekker både små justeringer og større avstander, og brukes konsekvent på tvers av komponenter og flater.
-_Verdiene over er for mobil. På tablet og desktop økes alle verdier proporsjonalt._
+| Token | Beskrivelse | Telefon | Tablet og oppover | Compact (tablet+) |
+| ------ | -------------- | ------- | ----------------- | ----------------- |
+| `none` | Ingen | 0px | 0px | 0px |
+| `2xs` | Ekstra liten | 4px | 4px | 2px |
+| `xs` | Liten | 8px | 8px | 4px |
+| `sm` | Small | 12px | 16px | 6px |
+| `md` | Medium | 16px | 20px | 8px |
+| `lg` | Large | 24px | 32px | 12px |
+| `xl` | Extra large | 32px | 40px | 16px |
+| `2xl` | 2x extra large | 48px | 56px | 24px |
+| `3xl` | 3x extra large | 64px | 80px | 32px |
+| `4xl` | 4x extra large | 96px | 120px | 48px |
-Bak kulissene er spacing-verdiene basert på en beregnet skala som strekker seg fra –13 til 19, med baseverdiene som utgangspunkt. De ulike density-modusene justerer verdiene ved å flytte seg opp eller ned i skalaen, noe som gjør det mulig å endre spacing konsekvent uten å definere nye verdier.
+Verdiene er faste px-verdier. På telefon brukes alltid telefon-kolonnen uavhengig av density.
## Bruk
@@ -76,20 +69,19 @@ Spacing finnes også i variabler: `--ix-spacing-{size}`. Variablene skiller ikke
Indeks sine verdier på spacing-variabler justerer seg etter skjermstørrelse og [density-modus](#density-moduser).
-| FFE-token | Indeks-tokens | FFE verdi | Indeks verdi mobil | Indeks verdi desktop |
-| ----------------- | ---------------- | --------- | ------------------ | -------------------- |
-| `ffe-spacing-2xs` | `ix-spacing-2xs` | 4px | 4px | 4px |
-| `ffe-spacing-xs` | `ix-spacing-xs` | 8px | 7px | 8px |
-| | `ix-spacing-sm` | | 11px | 13px |
-| `ffe-spacing-sm` | `ix-spacing-md` | 16px | 16px | 18px |
-| `ffe-spacing-md` | `ix-spacing-lg` | 24px | 23px | 26px |
-| `ffe-spacing-lg` | `ix-spacing-xl` | 32px | 32px | 36px |
-| `ffe-spacing-xl` | `ix-spacing-xl` | 40px | 32px | 36px |
-| `ffe-spacing-2xl` | `ix-spacing-2xl` | 48px | 46px | 52px |
-| `ffe-spacing-3xl` | | 64px | | |
-| `ffe-spacing-4xl` | `ix-spacing-3xl` | 80px | 66px | 74px |
-| | `ix-spacing-4xl` | | 105px | 118px |
-| `ffe-spacing-5xl` | | 160px | | |
+| FFE-token | Indeks-tokens | FFE verdi | Indeks telefon | Indeks tablet+ |
+| ----------------- | ---------------- | --------- | -------------- | -------------- |
+| `ffe-spacing-2xs` | `ix-spacing-2xs` | 4px | 4px | 4px |
+| `ffe-spacing-xs` | `ix-spacing-xs` | 8px | 8px | 8px |
+| | `ix-spacing-sm` | | 12px | 16px |
+| `ffe-spacing-sm` | `ix-spacing-md` | 16px | 16px | 20px |
+| `ffe-spacing-md` | `ix-spacing-lg` | 24px | 24px | 32px |
+| `ffe-spacing-lg` | `ix-spacing-xl` | 32px | 32px | 40px |
+| `ffe-spacing-xl` | `ix-spacing-xl` | 40px | 32px | 40px |
+| `ffe-spacing-2xl` | `ix-spacing-2xl` | 48px | 48px | 56px |
+| `ffe-spacing-3xl` | `ix-spacing-3xl` | 64px | 64px | 80px |
+| `ffe-spacing-4xl` | `ix-spacing-4xl` | 80px | 96px | 120px |
+| `ffe-spacing-5xl` | | 160px | | |
Det er mulig å migrere til disse spacing-variablene ved bruk av search-replace-all, men det er viktig å dobbeltsjekke endringen (også på flere skjermstørrelser), da oversettelsen ikke er direkte for alle variablene.
@@ -118,58 +110,55 @@ Kan du ta utgangspunkt i disse tabellene:
Verdiene er de samme for `pt`, `pb`, `pl` og `pr`. Se [responsiv spacing](/docs/utility-klasser/oversikt#responsiv-spacing) for padding på forskjellige skjermstørrelser.
-| Tailwind-token | Indeks Util-klasse | FFE/Tailwind verdi | Indeks verdi mobil | Indeks desktop |
-| -------------- | ------------------ | ------------------ | ------------------ | -------------- |
-| `p-0` | `ix-p-0` | 0px | 0px | 0px |
-| `p-0.5` | `ix-p-2xs` | 4px | 4px | 4px |
-| `p-1` | `ix-p-xs` | 8px | 7px | 8px |
-| | `ix-p-sm` | | 11px | 13px |
-| `p-2` | `ix-p-md` | 16px | 16px | 18px |
-| `p-3` | `ix-p-lg` | 24px | 23px | 26px |
-| `p-4` | `ix-p-xl` | 32px | 32px | 36px |
-| `p-5` | `ix-p-xl` | 40px | 32px | 36px |
-| `p-6` | `ix-p-2xl` | 48px | 46px | 52px |
-| `p-8` | | 64px | | |
-| `p-10` | `ix-p-3xl` | 80px | 66px | 74px |
-| | `ix-p-4xl` | | 105px | 118px |
-| `p-20` | | 160px | | |
+| Tailwind-token | Indeks Util-klasse | FFE/Tailwind verdi | Indeks telefon | Indeks tablet+ |
+| -------------- | ------------------ | ------------------ | -------------- | -------------- |
+| `p-0` | `ix-p-0` | 0px | 0px | 0px |
+| `p-0.5` | `ix-p-2xs` | 4px | 4px | 4px |
+| `p-1` | `ix-p-xs` | 8px | 8px | 8px |
+| | `ix-p-sm` | | 12px | 16px |
+| `p-2` | `ix-p-md` | 16px | 16px | 20px |
+| `p-3` | `ix-p-lg` | 24px | 24px | 32px |
+| `p-4` | `ix-p-xl` | 32px | 32px | 40px |
+| `p-5` | `ix-p-xl` | 40px | 32px | 40px |
+| `p-6` | `ix-p-2xl` | 48px | 48px | 56px |
+| `p-8` | `ix-p-3xl` | 64px | 64px | 80px |
+| `p-10` | `ix-p-4xl` | 80px | 96px | 120px |
+| `p-20` | | 160px | | |
### Margin
Verdiene er de samme for `mt`, `mb`, `ml` og `mr`. Se [responsiv spacing](/docs/utility-klasser/oversikt#responsiv-spacing) for margin på forskjellige skjermstørrelser.
-| Tailwind-token | Indeks Util-klasse | FFE/Tailwind verdi | Indeks verdi mobil | Indeks desktop |
-| -------------- | ------------------ | ------------------ | ------------------ | -------------- |
-| `m-0` | `ix-m-0` | 0px | 0px | 0px |
-| `m-0.5` | `ix-m-2xs` | 4px | 4px | 4px |
-| `m-1` | `ix-m-xs` | 8px | 7px | 8px |
-| | `ix-m-sm` | | 11px | 13px |
-| `m-2` | `ix-m-md` | 16px | 16px | 18px |
-| `m-3` | `ix-m-lg` | 24px | 23px | 26px |
-| `m-4` | `ix-m-xl` | 32px | 32px | 36px |
-| `m-5` | `ix-m-xl` | 40px | 32px | 36px |
-| `m-6` | `ix-m-2xl` | 48px | 46px | 52px |
-| `m-8` | | 64px | | |
-| `m-10` | `ix-m-3xl` | 80px | 66px | 74px |
-| | `ix-m-4xl` | | 105px | 118px |
-| `m-20` | | 160px | | |
+| Tailwind-token | Indeks Util-klasse | FFE/Tailwind verdi | Indeks telefon | Indeks tablet+ |
+| -------------- | ------------------ | ------------------ | -------------- | -------------- |
+| `m-0` | `ix-m-0` | 0px | 0px | 0px |
+| `m-0.5` | `ix-m-2xs` | 4px | 4px | 4px |
+| `m-1` | `ix-m-xs` | 8px | 8px | 8px |
+| | `ix-m-sm` | | 12px | 16px |
+| `m-2` | `ix-m-md` | 16px | 16px | 20px |
+| `m-3` | `ix-m-lg` | 24px | 24px | 32px |
+| `m-4` | `ix-m-xl` | 32px | 32px | 40px |
+| `m-5` | `ix-m-xl` | 40px | 32px | 40px |
+| `m-6` | `ix-m-2xl` | 48px | 48px | 56px |
+| `m-8` | `ix-m-3xl` | 64px | 64px | 80px |
+| `m-10` | `ix-m-4xl` | 80px | 96px | 120px |
+| `m-20` | | 160px | | |
### Gap
-| Tailwind-token | Indeks Util-klasse | FFE/Tailwind verdi | Indeks verdi mobil | Indeks desktop |
-| -------------- | ------------------ | ------------------ | ------------------ | -------------- |
-| `gap-0` | `ix-gap-0` | 0px | 0px | 0px |
-| `gap-0.5` | `ix-gap-2xs` | 4px | 4px | 4px |
-| `gap-1` | `ix-gap-xs` | 8px | 7px | 8px |
-| | `ix-gap-sm` | | 11px | 13px |
-| `gap-2` | `ix-gap-md` | 16px | 16px | 18px |
-| `gap-3` | `ix-gap-lg` | 24px | 23px | 26px |
-| `gap-4` | `ix-gap-xl` | 32px | 32px | 36px |
-| `gap-5` | `ix-gap-xl` | 40px | 32px | 36px |
-| `gap-6` | `ix-gap-2xl` | 48px | 46px | 52px |
-| `gap-8` | | 64px | | |
-| `gap-10` | `ix-gap-3xl` | 80px | 66px | 74px |
-| | `ix-gap-4xl` | | 105px | 118px |
-| `gap-20` | | 160px | | |
+| Tailwind-token | Indeks Util-klasse | FFE/Tailwind verdi | Indeks telefon | Indeks tablet+ |
+| -------------- | ------------------ | ------------------ | -------------- | -------------- |
+| `gap-0` | `ix-gap-0` | 0px | 0px | 0px |
+| `gap-0.5` | `ix-gap-2xs` | 4px | 4px | 4px |
+| `gap-1` | `ix-gap-xs` | 8px | 8px | 8px |
+| | `ix-gap-sm` | | 12px | 16px |
+| `gap-2` | `ix-gap-md` | 16px | 16px | 20px |
+| `gap-3` | `ix-gap-lg` | 24px | 24px | 32px |
+| `gap-4` | `ix-gap-xl` | 32px | 32px | 40px |
+| `gap-5` | `ix-gap-xl` | 40px | 32px | 40px |
+| `gap-6` | `ix-gap-2xl` | 48px | 48px | 56px |
+| `gap-8` | `ix-gap-3xl` | 64px | 64px | 80px |
+| `gap-10` | `ix-gap-4xl` | 80px | 96px | 120px |
+| `gap-20` | | 160px | | |
Ta gjerne kontakt med oss om du har andre behov enn det Indeks tilbyr.
diff --git a/indeks-docs/docs/monstre-og-maler/layout.mdx b/indeks-docs/docs/monstre-og-maler/layout.mdx
index 2180154..2baec22 100644
--- a/indeks-docs/docs/monstre-og-maler/layout.mdx
+++ b/indeks-docs/docs/monstre-og-maler/layout.mdx
@@ -70,10 +70,9 @@ Komponentene bruker Flex under panseret og wrapper `display: flex` og `flex-dire
## Density
-Spacing-systemet i Indeks er basert på en density-modus som settes som et data-attributt på container-elementer. Dette attributtet påvirker alle spacing-verdier og bestemmer tettheten i layouten. Standard density er `data-density="default"`. For å endre tetthet, kan du bruke en av verdiene nedenfor:
+Spacing-systemet i Indeks har en density-modus som settes som et data-attributt på container-elementer. Dette attributtet påvirker alle spacing-verdier og bestemmer tettheten i layouten. Standard density er `data-density="default"`. For en tettere layout kan du bruke:
-- `data-density="comfortable"`: Gir en mer romslig layout med større avstander mellom og inni elementer
-- `data-density="compact"`: Gir en tettere layout med mindre avstander mellom og inni elementer
+- `data-density="compact"`: Gir en tettere layout med mindre avstander mellom og inni elementer (gjelder kun tablet og oppover)
[Mer informasjon om density](../grunnleggende/tokens/spacing#density-moduser)
diff --git a/indeks-docs/docs/utility-klasser/oversikt.mdx b/indeks-docs/docs/utility-klasser/oversikt.mdx
index ecfbe96..594c7eb 100644
--- a/indeks-docs/docs/utility-klasser/oversikt.mdx
+++ b/indeks-docs/docs/utility-klasser/oversikt.mdx
@@ -23,10 +23,12 @@ Eksempler på egenskaper som kan legges til med utility-klasser er spacing (marg
## Spacing
-Spacing i Indeks er basert på en skala med verdier regnet ut fra en baseverdi. Baseverdien er responsiv og varierer mellom 16px og 18px basert på skjermstørrelse. Alle spacing-verdier beregnes som multipler av baseverdien, og kan overstyres av `density`-modifierne.
+Spacing i Indeks er basert på en skala med faste verdier fra `none` til `4xl`. Verdiene tilpasser seg skjermstørrelse (telefon vs. tablet og oppover) og `density`-modifieren. Se [spacing-tokens](/docs/grunnleggende/tokens/spacing) for de konkrete verdiene.
`margin`, `padding` og `gap` bruker variablene fra skalaen, og har tilsvarende klassenavn. For eksempel gir klassen `.ix-p-2xs` padding lik verdien av `--ix-spacing-2xs`.
+Klassene for ingen spacing heter `.ix-*-0` (f.eks. `.ix-p-0`). `.ix-*-none` finnes også som alias.
+
### Padding
| CSS-klasse | Verdi |
@@ -391,11 +393,10 @@ Responsiv padding og gap følger samme mønster som responsiv margin.
## Density modifiers
-| Attributt | Beskrivelse |
-| ------------------------------ | ----------------------------------------------------------------- |
-| `data-density="default"` | Standard density |
-| `data-density="compact"` | Kompakt density (verdiene i spacing-skalaen er 1 steg lavere) |
-| `data-density="comfortable"` | Komfortabel density (verdiene i spacing-skalaen er 1 steg høyere) |
+| Attributt | Beskrivelse |
+| ------------------------ | ---------------------------------------------------------------------------- |
+| `data-density="default"` | Standard density |
+| `data-density="compact"` | Kompakt density med reduserte spacing-verdier (gjelder kun tablet og oppover) |
## Flex
diff --git a/indeks-eksempel/src/components/BodyWrapper.tsx b/indeks-eksempel/src/components/BodyWrapper.tsx
index 25df144..2637020 100644
--- a/indeks-eksempel/src/components/BodyWrapper.tsx
+++ b/indeks-eksempel/src/components/BodyWrapper.tsx
@@ -7,6 +7,7 @@ const BodyContent: React.FC = () => {
const { updateSpacing } = useSpacing();
const [fontSize, setFontSize] = React.useState(16);
const [nativeMode, setNativeMode] = React.useState(false);
+ const [density, setDensity] = React.useState('default');
useEffect(() => {
if (nativeMode) {
@@ -26,6 +27,7 @@ const BodyContent: React.FC = () => {
const handleDensityChange = (event: React.ChangeEvent) => {
const bodyDiv = document.getElementsByClassName('ix-body')[0];
const selectedDensity = event.target.value;
+ setDensity(selectedDensity);
if (selectedDensity) {
(bodyDiv as HTMLElement)?.setAttribute('data-density', selectedDensity);
} else {
@@ -52,6 +54,7 @@ const BodyContent: React.FC = () => {
onFontSizeChange={handleFontSizeChange}
onThemeChange={handleThemeChange}
onNativeChange={setNativeMode}
+ density={density}
fontSize={fontSize}
nativeMode={nativeMode}
/>
diff --git a/indeks-eksempel/src/components/SettingsPopover.tsx b/indeks-eksempel/src/components/SettingsPopover.tsx
index ba10eb1..19d33ae 100644
--- a/indeks-eksempel/src/components/SettingsPopover.tsx
+++ b/indeks-eksempel/src/components/SettingsPopover.tsx
@@ -6,6 +6,7 @@ interface SettingsPopoverProps {
onFontSizeChange: (event: React.ChangeEvent) => void;
onThemeChange: (event: React.ChangeEvent) => void;
onNativeChange: (enabled: boolean) => void;
+ density: string;
fontSize: number;
nativeMode: boolean;
}
@@ -15,6 +16,7 @@ export const SettingsPopover: React.FC = ({
onFontSizeChange,
onThemeChange,
onNativeChange,
+ density,
fontSize,
nativeMode,
}) => {
@@ -51,12 +53,11 @@ export const SettingsPopover: React.FC = ({
diff --git a/indeks-storybook/.storybook/preview-body.html b/indeks-storybook/.storybook/preview-body.html
index d3242d1..c20578f 100644
--- a/indeks-storybook/.storybook/preview-body.html
+++ b/indeks-storybook/.storybook/preview-body.html
@@ -10,7 +10,6 @@
diff --git a/indeks-storybook/stories/components/tag/Tag.mdx b/indeks-storybook/stories/components/tag/Tag.mdx
index f38865f..0384cea 100644
--- a/indeks-storybook/stories/components/tag/Tag.mdx
+++ b/indeks-storybook/stories/components/tag/Tag.mdx
@@ -21,10 +21,5 @@ Eksempel på tag med forskjellige størrelser og moduser.
-
-
-
-
-
diff --git a/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Components-Button-Danger-1-desktop-chromium-linux.png b/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Components-Button-Danger-1-desktop-chromium-linux.png
index 85121b4..b114168 100644
Binary files a/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Components-Button-Danger-1-desktop-chromium-linux.png and b/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Components-Button-Danger-1-desktop-chromium-linux.png differ
diff --git a/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Components-Button-Deaktivert-1-desktop-chromium-linux.png b/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Components-Button-Deaktivert-1-desktop-chromium-linux.png
index b77c45c..6f34132 100644
Binary files a/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Components-Button-Deaktivert-1-desktop-chromium-linux.png and b/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Components-Button-Deaktivert-1-desktop-chromium-linux.png differ
diff --git a/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Components-Button-Full-bredde-1-desktop-firefox-linux.png b/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Components-Button-Full-bredde-1-desktop-firefox-linux.png
index 3510c64..872dfd1 100644
Binary files a/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Components-Button-Full-bredde-1-desktop-firefox-linux.png and b/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Components-Button-Full-bredde-1-desktop-firefox-linux.png differ
diff --git a/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Components-Button-Ikonknapp-1-mobile-webkit-linux.png b/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Components-Button-Ikonknapp-1-mobile-webkit-linux.png
index 96b33da..f75d627 100644
Binary files a/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Components-Button-Ikonknapp-1-mobile-webkit-linux.png and b/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Components-Button-Ikonknapp-1-mobile-webkit-linux.png differ
diff --git a/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Components-Button-Laster-1-desktop-chromium-linux.png b/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Components-Button-Laster-1-desktop-chromium-linux.png
index e3f88d1..9abbc1a 100644
Binary files a/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Components-Button-Laster-1-desktop-chromium-linux.png and b/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Components-Button-Laster-1-desktop-chromium-linux.png differ
diff --git a/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Components-Button-Laster-alle-varianter-1-mobile-chromium-linux.png b/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Components-Button-Laster-alle-varianter-1-mobile-chromium-linux.png
index b56d573..b0c539c 100644
Binary files a/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Components-Button-Laster-alle-varianter-1-mobile-chromium-linux.png and b/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Components-Button-Laster-alle-varianter-1-mobile-chromium-linux.png differ
diff --git a/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Components-Button-Med-ikon-1-desktop-firefox-linux.png b/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Components-Button-Med-ikon-1-desktop-firefox-linux.png
index c2bf0ae..eac2f01 100644
Binary files a/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Components-Button-Med-ikon-1-desktop-firefox-linux.png and b/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Components-Button-Med-ikon-1-desktop-firefox-linux.png differ
diff --git a/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Components-Button-Secondary-1-desktop-firefox-linux.png b/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Components-Button-Secondary-1-desktop-firefox-linux.png
index ae37ee6..4e3122e 100644
Binary files a/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Components-Button-Secondary-1-desktop-firefox-linux.png and b/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Components-Button-Secondary-1-desktop-firefox-linux.png differ
diff --git a/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Components-Button-Standard-1-mobile-chromium-linux.png b/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Components-Button-Standard-1-mobile-chromium-linux.png
index 4de8107..c5eb492 100644
Binary files a/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Components-Button-Standard-1-mobile-chromium-linux.png and b/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Components-Button-Standard-1-mobile-chromium-linux.png differ
diff --git a/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Components-Button-Tertiary-1-desktop-firefox-linux.png b/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Components-Button-Tertiary-1-desktop-firefox-linux.png
index 55f882f..6fec60e 100644
Binary files a/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Components-Button-Tertiary-1-desktop-firefox-linux.png and b/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Components-Button-Tertiary-1-desktop-firefox-linux.png differ
diff --git "a/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Components-Button-Terti\303\246r-med-ikon-1-mobile-webkit-linux.png" "b/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Components-Button-Terti\303\246r-med-ikon-1-mobile-webkit-linux.png"
index 25bd5bb..0a0285f 100644
Binary files "a/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Components-Button-Terti\303\246r-med-ikon-1-mobile-webkit-linux.png" and "b/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Components-Button-Terti\303\246r-med-ikon-1-mobile-webkit-linux.png" differ
diff --git a/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Components-Spinner-Med-Tekst-1-desktop-firefox-linux.png b/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Components-Spinner-Med-Tekst-1-desktop-firefox-linux.png
index e922d86..6116d29 100644
Binary files a/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Components-Spinner-Med-Tekst-1-desktop-firefox-linux.png and b/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Components-Spinner-Med-Tekst-1-desktop-firefox-linux.png differ
diff --git a/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Form-Checkbox-Avkrysset-1-desktop-webkit-linux.png b/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Form-Checkbox-Avkrysset-1-desktop-webkit-linux.png
index 47b2af1..f7c6a14 100644
Binary files a/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Form-Checkbox-Avkrysset-1-desktop-webkit-linux.png and b/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Form-Checkbox-Avkrysset-1-desktop-webkit-linux.png differ
diff --git a/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Form-Checkbox-Deaktivert-1-desktop-firefox-linux.png b/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Form-Checkbox-Deaktivert-1-desktop-firefox-linux.png
index 714ffcf..a3bc899 100644
Binary files a/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Form-Checkbox-Deaktivert-1-desktop-firefox-linux.png and b/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Form-Checkbox-Deaktivert-1-desktop-firefox-linux.png differ
diff --git a/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Form-Checkbox-Deaktivert-Avkrysset-1-mobile-chromium-linux.png b/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Form-Checkbox-Deaktivert-Avkrysset-1-mobile-chromium-linux.png
index 0d33930..8a42744 100644
Binary files a/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Form-Checkbox-Deaktivert-Avkrysset-1-mobile-chromium-linux.png and b/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Form-Checkbox-Deaktivert-Avkrysset-1-mobile-chromium-linux.png differ
diff --git a/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Form-Checkbox-HTML-1-desktop-chromium-linux.png b/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Form-Checkbox-HTML-1-desktop-chromium-linux.png
index c3c70b4..0f6113d 100644
Binary files a/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Form-Checkbox-HTML-1-desktop-chromium-linux.png and b/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Form-Checkbox-HTML-1-desktop-chromium-linux.png differ
diff --git a/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Form-Checkbox-Indeterminate-1-mobile-webkit-linux.png b/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Form-Checkbox-Indeterminate-1-mobile-webkit-linux.png
index 8982d8d..b44f23c 100644
Binary files a/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Form-Checkbox-Indeterminate-1-mobile-webkit-linux.png and b/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Form-Checkbox-Indeterminate-1-mobile-webkit-linux.png differ
diff --git a/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Form-Checkbox-Med-Beskrivelse-1-desktop-webkit-linux.png b/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Form-Checkbox-Med-Beskrivelse-1-desktop-webkit-linux.png
deleted file mode 100644
index b63866a..0000000
Binary files a/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Form-Checkbox-Med-Beskrivelse-1-desktop-webkit-linux.png and /dev/null differ
diff --git a/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Form-Checkbox-Med-Beskrivelse-1-mobile-chromium-linux.png b/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Form-Checkbox-Med-Beskrivelse-1-mobile-chromium-linux.png
index 193ef08..9fe25d3 100644
Binary files a/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Form-Checkbox-Med-Beskrivelse-1-mobile-chromium-linux.png and b/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Form-Checkbox-Med-Beskrivelse-1-mobile-chromium-linux.png differ
diff --git a/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Form-Checkbox-Med-Feilmelding-1-desktop-firefox-linux.png b/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Form-Checkbox-Med-Feilmelding-1-desktop-firefox-linux.png
index 8cb6877..c9cb1f4 100644
Binary files a/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Form-Checkbox-Med-Feilmelding-1-desktop-firefox-linux.png and b/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Form-Checkbox-Med-Feilmelding-1-desktop-firefox-linux.png differ
diff --git a/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Form-Checkbox-Med-Tooltip-1-desktop-chromium-linux.png b/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Form-Checkbox-Med-Tooltip-1-desktop-chromium-linux.png
index 327f591..884f713 100644
Binary files a/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Form-Checkbox-Med-Tooltip-1-desktop-chromium-linux.png and b/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Form-Checkbox-Med-Tooltip-1-desktop-chromium-linux.png differ
diff --git "a/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Form-Checkbox-P\303\245krevd-1-mobile-chromium-linux.png" "b/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Form-Checkbox-P\303\245krevd-1-mobile-chromium-linux.png"
index 80f793f..3dd28c0 100644
Binary files "a/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Form-Checkbox-P\303\245krevd-1-mobile-chromium-linux.png" and "b/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Form-Checkbox-P\303\245krevd-1-mobile-chromium-linux.png" differ
diff --git a/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Form-Checkbox-Standard-1-desktop-webkit-linux.png b/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Form-Checkbox-Standard-1-desktop-webkit-linux.png
index a6f3625..985e926 100644
Binary files a/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Form-Checkbox-Standard-1-desktop-webkit-linux.png and b/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Form-Checkbox-Standard-1-desktop-webkit-linux.png differ
diff --git a/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Form-RadioGroup-Disabled-1-mobile-webkit-linux.png b/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Form-RadioGroup-Disabled-1-mobile-webkit-linux.png
index 2704b78..9c41f47 100644
Binary files a/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Form-RadioGroup-Disabled-1-mobile-webkit-linux.png and b/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Form-RadioGroup-Disabled-1-mobile-webkit-linux.png differ
diff --git a/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Form-RadioGroup-Error-1-desktop-chromium-linux.png b/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Form-RadioGroup-Error-1-desktop-chromium-linux.png
index b9fd694..fe2cb43 100644
Binary files a/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Form-RadioGroup-Error-1-desktop-chromium-linux.png and b/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Form-RadioGroup-Error-1-desktop-chromium-linux.png differ
diff --git a/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Form-RadioGroup-HTML-1-desktop-firefox-linux.png b/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Form-RadioGroup-HTML-1-desktop-firefox-linux.png
index 54960dc..a9eaf0a 100644
Binary files a/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Form-RadioGroup-HTML-1-desktop-firefox-linux.png and b/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Form-RadioGroup-HTML-1-desktop-firefox-linux.png differ
diff --git a/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Form-RadioGroup-Hide-Legend-1-desktop-chromium-linux.png b/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Form-RadioGroup-Hide-Legend-1-desktop-chromium-linux.png
index e7745a0..7bca1ff 100644
Binary files a/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Form-RadioGroup-Hide-Legend-1-desktop-chromium-linux.png and b/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Form-RadioGroup-Hide-Legend-1-desktop-chromium-linux.png differ
diff --git a/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Form-RadioGroup-Horisontal-1-mobile-chromium-linux.png b/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Form-RadioGroup-Horisontal-1-mobile-chromium-linux.png
index d32aed3..f12acf7 100644
Binary files a/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Form-RadioGroup-Horisontal-1-mobile-chromium-linux.png and b/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Form-RadioGroup-Horisontal-1-mobile-chromium-linux.png differ
diff --git a/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Form-RadioGroup-Med-Description-1-desktop-firefox-linux.png b/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Form-RadioGroup-Med-Description-1-desktop-firefox-linux.png
index e57b184..c142f1e 100644
Binary files a/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Form-RadioGroup-Med-Description-1-desktop-firefox-linux.png and b/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Form-RadioGroup-Med-Description-1-desktop-firefox-linux.png differ
diff --git a/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Form-RadioGroup-Med-Options-1-desktop-firefox-linux.png b/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Form-RadioGroup-Med-Options-1-desktop-firefox-linux.png
index d711a38..145dd84 100644
Binary files a/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Form-RadioGroup-Med-Options-1-desktop-firefox-linux.png and b/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Form-RadioGroup-Med-Options-1-desktop-firefox-linux.png differ
diff --git a/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Form-RadioGroup-Read-Only-1-mobile-chromium-linux.png b/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Form-RadioGroup-Read-Only-1-mobile-chromium-linux.png
index 5426a29..256e0c9 100644
Binary files a/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Form-RadioGroup-Read-Only-1-mobile-chromium-linux.png and b/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Form-RadioGroup-Read-Only-1-mobile-chromium-linux.png differ
diff --git a/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Form-RadioGroup-Sjekket-1-desktop-webkit-linux.png b/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Form-RadioGroup-Sjekket-1-desktop-webkit-linux.png
index e0fca81..7994222 100644
Binary files a/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Form-RadioGroup-Sjekket-1-desktop-webkit-linux.png and b/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Form-RadioGroup-Sjekket-1-desktop-webkit-linux.png differ
diff --git a/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Form-RadioGroup-Standard-1-desktop-webkit-linux.png b/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Form-RadioGroup-Standard-1-desktop-webkit-linux.png
index d1eac40..4aec088 100644
Binary files a/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Form-RadioGroup-Standard-1-desktop-webkit-linux.png and b/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Form-RadioGroup-Standard-1-desktop-webkit-linux.png differ
diff --git a/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Form-Select-Deaktivert-1-desktop-webkit-linux.png b/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Form-Select-Deaktivert-1-desktop-webkit-linux.png
index 09198d7..4965772 100644
Binary files a/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Form-Select-Deaktivert-1-desktop-webkit-linux.png and b/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Form-Select-Deaktivert-1-desktop-webkit-linux.png differ
diff --git a/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Form-Select-HTML-1-desktop-webkit-linux.png b/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Form-Select-HTML-1-desktop-webkit-linux.png
index cf80d7b..5235d68 100644
Binary files a/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Form-Select-HTML-1-desktop-webkit-linux.png and b/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Form-Select-HTML-1-desktop-webkit-linux.png differ
diff --git a/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Form-Select-Med-Beskrivelse-1-desktop-webkit-linux.png b/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Form-Select-Med-Beskrivelse-1-desktop-webkit-linux.png
index 914acd8..c92cf3a 100644
Binary files a/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Form-Select-Med-Beskrivelse-1-desktop-webkit-linux.png and b/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Form-Select-Med-Beskrivelse-1-desktop-webkit-linux.png differ
diff --git a/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Form-Select-Med-Deaktivert-Alternativ-1-mobile-webkit-linux.png b/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Form-Select-Med-Deaktivert-Alternativ-1-mobile-webkit-linux.png
index 14aca31..c4a83cd 100644
Binary files a/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Form-Select-Med-Deaktivert-Alternativ-1-mobile-webkit-linux.png and b/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Form-Select-Med-Deaktivert-Alternativ-1-mobile-webkit-linux.png differ
diff --git a/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Form-Select-Med-Feilmelding-1-desktop-firefox-linux.png b/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Form-Select-Med-Feilmelding-1-desktop-firefox-linux.png
index 9653107..14c4991 100644
Binary files a/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Form-Select-Med-Feilmelding-1-desktop-firefox-linux.png and b/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Form-Select-Med-Feilmelding-1-desktop-firefox-linux.png differ
diff --git a/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Form-Select-Med-Grupper-1-mobile-webkit-linux.png b/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Form-Select-Med-Grupper-1-mobile-webkit-linux.png
index 57cd82b..278e033 100644
Binary files a/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Form-Select-Med-Grupper-1-mobile-webkit-linux.png and b/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Form-Select-Med-Grupper-1-mobile-webkit-linux.png differ
diff --git a/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Form-Select-Med-Placeholder-1-desktop-webkit-linux.png b/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Form-Select-Med-Placeholder-1-desktop-webkit-linux.png
index 91d4462..d0842d1 100644
Binary files a/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Form-Select-Med-Placeholder-1-desktop-webkit-linux.png and b/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Form-Select-Med-Placeholder-1-desktop-webkit-linux.png differ
diff --git a/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Form-Select-Med-Tooltip-1-desktop-webkit-linux.png b/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Form-Select-Med-Tooltip-1-desktop-webkit-linux.png
index da6b1ee..32c7bf9 100644
Binary files a/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Form-Select-Med-Tooltip-1-desktop-webkit-linux.png and b/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Form-Select-Med-Tooltip-1-desktop-webkit-linux.png differ
diff --git "a/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Form-Select-P\303\245krevd-1-mobile-webkit-linux.png" "b/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Form-Select-P\303\245krevd-1-mobile-webkit-linux.png"
index 14aca31..c4a83cd 100644
Binary files "a/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Form-Select-P\303\245krevd-1-mobile-webkit-linux.png" and "b/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Form-Select-P\303\245krevd-1-mobile-webkit-linux.png" differ
diff --git a/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Form-Select-Standard-1-mobile-chromium-linux.png b/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Form-Select-Standard-1-mobile-chromium-linux.png
index 5eb34a5..c130d39 100644
Binary files a/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Form-Select-Standard-1-mobile-chromium-linux.png and b/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Form-Select-Standard-1-mobile-chromium-linux.png differ
diff --git a/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Form-TextArea-Description-1-mobile-webkit-linux.png b/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Form-TextArea-Description-1-mobile-webkit-linux.png
index 6e879b8..c5aab9f 100644
Binary files a/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Form-TextArea-Description-1-mobile-webkit-linux.png and b/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Form-TextArea-Description-1-mobile-webkit-linux.png differ
diff --git a/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Form-TextArea-Disabled-1-mobile-chromium-linux.png b/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Form-TextArea-Disabled-1-mobile-chromium-linux.png
index 852009b..67f33b8 100644
Binary files a/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Form-TextArea-Disabled-1-mobile-chromium-linux.png and b/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Form-TextArea-Disabled-1-mobile-chromium-linux.png differ
diff --git a/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Form-TextArea-HTML-1-mobile-chromium-linux.png b/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Form-TextArea-HTML-1-mobile-chromium-linux.png
index a9bb73e..ca50196 100644
Binary files a/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Form-TextArea-HTML-1-mobile-chromium-linux.png and b/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Form-TextArea-HTML-1-mobile-chromium-linux.png differ
diff --git a/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Form-TextArea-Invalid-1-desktop-webkit-linux.png b/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Form-TextArea-Invalid-1-desktop-webkit-linux.png
index 4baab9c..e517f5b 100644
Binary files a/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Form-TextArea-Invalid-1-desktop-webkit-linux.png and b/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Form-TextArea-Invalid-1-desktop-webkit-linux.png differ
diff --git a/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Form-TextArea-Med-Tooltip-1-mobile-chromium-linux.png b/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Form-TextArea-Med-Tooltip-1-mobile-chromium-linux.png
index 000c7e1..ec2e0b6 100644
Binary files a/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Form-TextArea-Med-Tooltip-1-mobile-chromium-linux.png and b/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Form-TextArea-Med-Tooltip-1-mobile-chromium-linux.png differ
diff --git a/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Form-TextArea-Min-Max-Length-1-mobile-chromium-linux.png b/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Form-TextArea-Min-Max-Length-1-mobile-chromium-linux.png
index ce47604..8739175 100644
Binary files a/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Form-TextArea-Min-Max-Length-1-mobile-chromium-linux.png and b/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Form-TextArea-Min-Max-Length-1-mobile-chromium-linux.png differ
diff --git a/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Form-TextArea-Read-Only-1-mobile-webkit-linux.png b/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Form-TextArea-Read-Only-1-mobile-webkit-linux.png
index bd6854c..7a1f756 100644
Binary files a/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Form-TextArea-Read-Only-1-mobile-webkit-linux.png and b/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Form-TextArea-Read-Only-1-mobile-webkit-linux.png differ
diff --git a/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Form-TextArea-Required-1-desktop-webkit-linux.png b/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Form-TextArea-Required-1-desktop-webkit-linux.png
index f60b153..82b55b2 100644
Binary files a/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Form-TextArea-Required-1-desktop-webkit-linux.png and b/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Form-TextArea-Required-1-desktop-webkit-linux.png differ
diff --git a/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Form-TextArea-Standard-1-desktop-chromium-linux.png b/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Form-TextArea-Standard-1-desktop-chromium-linux.png
index 18f48a0..9923c40 100644
Binary files a/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Form-TextArea-Standard-1-desktop-chromium-linux.png and b/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Form-TextArea-Standard-1-desktop-chromium-linux.png differ
diff --git a/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Form-TextField-Affix-1-mobile-chromium-linux.png b/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Form-TextField-Affix-1-mobile-chromium-linux.png
index 37f3b2a..234b47d 100644
Binary files a/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Form-TextField-Affix-1-mobile-chromium-linux.png and b/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Form-TextField-Affix-1-mobile-chromium-linux.png differ
diff --git a/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Form-TextField-Description-1-mobile-chromium-linux.png b/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Form-TextField-Description-1-mobile-chromium-linux.png
index 420aa88..8ae8e03 100644
Binary files a/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Form-TextField-Description-1-mobile-chromium-linux.png and b/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Form-TextField-Description-1-mobile-chromium-linux.png differ
diff --git a/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Form-TextField-Disabled-1-desktop-chromium-linux.png b/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Form-TextField-Disabled-1-desktop-chromium-linux.png
index c9f6658..8f4871b 100644
Binary files a/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Form-TextField-Disabled-1-desktop-chromium-linux.png and b/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Form-TextField-Disabled-1-desktop-chromium-linux.png differ
diff --git a/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Form-TextField-HTML-1-mobile-webkit-linux.png b/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Form-TextField-HTML-1-mobile-webkit-linux.png
index 377529c..753c5dc 100644
Binary files a/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Form-TextField-HTML-1-mobile-webkit-linux.png and b/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Form-TextField-HTML-1-mobile-webkit-linux.png differ
diff --git a/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Form-TextField-Invalid-1-desktop-webkit-linux.png b/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Form-TextField-Invalid-1-desktop-webkit-linux.png
index c6bf4de..33b4f3d 100644
Binary files a/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Form-TextField-Invalid-1-desktop-webkit-linux.png and b/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Form-TextField-Invalid-1-desktop-webkit-linux.png differ
diff --git a/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Form-TextField-Med-Tooltip-1-desktop-firefox-linux.png b/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Form-TextField-Med-Tooltip-1-desktop-firefox-linux.png
index 26e385e..176d200 100644
Binary files a/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Form-TextField-Med-Tooltip-1-desktop-firefox-linux.png and b/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Form-TextField-Med-Tooltip-1-desktop-firefox-linux.png differ
diff --git a/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Form-TextField-Min-Max-1-desktop-firefox-linux.png b/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Form-TextField-Min-Max-1-desktop-firefox-linux.png
index 72f6790..8df4526 100644
Binary files a/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Form-TextField-Min-Max-1-desktop-firefox-linux.png and b/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Form-TextField-Min-Max-1-desktop-firefox-linux.png differ
diff --git a/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Form-TextField-Min-Max-Length-1-desktop-chromium-linux.png b/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Form-TextField-Min-Max-Length-1-desktop-chromium-linux.png
index 7ec743d..47c21ec 100644
Binary files a/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Form-TextField-Min-Max-Length-1-desktop-chromium-linux.png and b/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Form-TextField-Min-Max-Length-1-desktop-chromium-linux.png differ
diff --git a/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Form-TextField-Read-Only-1-desktop-chromium-linux.png b/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Form-TextField-Read-Only-1-desktop-chromium-linux.png
index 6d086f7..e1ff54b 100644
Binary files a/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Form-TextField-Read-Only-1-desktop-chromium-linux.png and b/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Form-TextField-Read-Only-1-desktop-chromium-linux.png differ
diff --git a/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Form-TextField-Required-1-desktop-firefox-linux.png b/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Form-TextField-Required-1-desktop-firefox-linux.png
index f2f98f6..613bafa 100644
Binary files a/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Form-TextField-Required-1-desktop-firefox-linux.png and b/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Form-TextField-Required-1-desktop-firefox-linux.png differ
diff --git a/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Form-TextField-Standard-1-desktop-chromium-linux.png b/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Form-TextField-Standard-1-desktop-chromium-linux.png
index e77f79b..dba032e 100644
Binary files a/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Form-TextField-Standard-1-desktop-chromium-linux.png and b/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Form-TextField-Standard-1-desktop-chromium-linux.png differ
diff --git a/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Form-TextField-Tooltip-Plassering-1-mobile-chromium-linux.png b/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Form-TextField-Tooltip-Plassering-1-mobile-chromium-linux.png
index f8fab8e..7ca65ae 100644
Binary files a/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Form-TextField-Tooltip-Plassering-1-mobile-chromium-linux.png and b/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Form-TextField-Tooltip-Plassering-1-mobile-chromium-linux.png differ
diff --git a/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Layout-HStack-Align-End-1-desktop-chromium-linux.png b/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Layout-HStack-Align-End-1-desktop-chromium-linux.png
index 65aec30..58ff3e7 100644
Binary files a/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Layout-HStack-Align-End-1-desktop-chromium-linux.png and b/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Layout-HStack-Align-End-1-desktop-chromium-linux.png differ
diff --git a/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Layout-HStack-Align-Start-1-mobile-webkit-linux.png b/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Layout-HStack-Align-Start-1-mobile-webkit-linux.png
index 9b05b4a..eee6edd 100644
Binary files a/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Layout-HStack-Align-Start-1-mobile-webkit-linux.png and b/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Layout-HStack-Align-Start-1-mobile-webkit-linux.png differ
diff --git a/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Layout-HStack-HTML-1-desktop-firefox-linux.png b/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Layout-HStack-HTML-1-desktop-firefox-linux.png
index 8a89c3a..be66931 100644
Binary files a/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Layout-HStack-HTML-1-desktop-firefox-linux.png and b/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Layout-HStack-HTML-1-desktop-firefox-linux.png differ
diff --git a/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Layout-HStack-Standard-1-desktop-chromium-linux.png b/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Layout-HStack-Standard-1-desktop-chromium-linux.png
index fce1c40..1f9cb14 100644
Binary files a/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Layout-HStack-Standard-1-desktop-chromium-linux.png and b/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Layout-HStack-Standard-1-desktop-chromium-linux.png differ
diff --git a/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Layout-VStack-Align-Center-1-desktop-firefox-linux.png b/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Layout-VStack-Align-Center-1-desktop-firefox-linux.png
index d71a741..45d9ce1 100644
Binary files a/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Layout-VStack-Align-Center-1-desktop-firefox-linux.png and b/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Layout-VStack-Align-Center-1-desktop-firefox-linux.png differ
diff --git a/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Layout-VStack-Align-End-1-mobile-chromium-linux.png b/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Layout-VStack-Align-End-1-mobile-chromium-linux.png
index 1fea696..75f153e 100644
Binary files a/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Layout-VStack-Align-End-1-mobile-chromium-linux.png and b/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Layout-VStack-Align-End-1-mobile-chromium-linux.png differ
diff --git a/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Layout-VStack-HTML-1-desktop-chromium-linux.png b/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Layout-VStack-HTML-1-desktop-chromium-linux.png
index d0fddf3..118b957 100644
Binary files a/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Layout-VStack-HTML-1-desktop-chromium-linux.png and b/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Layout-VStack-HTML-1-desktop-chromium-linux.png differ
diff --git a/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Layout-VStack-Standard-1-mobile-webkit-linux.png b/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Layout-VStack-Standard-1-mobile-webkit-linux.png
index 98081ea..a5f5a88 100644
Binary files a/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Layout-VStack-Standard-1-mobile-webkit-linux.png and b/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Layout-VStack-Standard-1-mobile-webkit-linux.png differ
diff --git a/indeks-tokens/package.json b/indeks-tokens/package.json
index ef26f62..d536c4a 100644
--- a/indeks-tokens/package.json
+++ b/indeks-tokens/package.json
@@ -39,7 +39,6 @@
"dev": "echo not implemented",
"build": "rm -rf ./dist ./.build && pnpm run build:tokens:css && pnpm run build:colors:web && pnpm run build:colors:figma && pnpm run build:bundle",
"prepublishOnly": "pnpm run build",
- "build:spacing": "node ./scripts/build-spacing-tokens.cjs",
"sync-tokens": "tsx scripts/figma-api/sync_figma_to_tokens.ts",
"test": "vitest buildThemeColors.test.ts",
"build:colors:web": "tsx ./scripts/build-colors/index platform=web path=./.build/css",
diff --git a/indeks-tokens/tokens/spacing.json b/indeks-tokens/tokens/spacing.json
deleted file mode 100644
index 5952853..0000000
--- a/indeks-tokens/tokens/spacing.json
+++ /dev/null
@@ -1,184 +0,0 @@
-{
- "spacing": {
- "base": {
- "size": {
- "value": "clamp(16px, 16px + (100vw - 375px) * (18 - 16) / (1024 - 375), 18px)",
- "description": "Grunnverdi for spacing.",
- "internal": true
- },
- "scale": {
- "value": "1.125",
- "description": "Skaleringsfaktor for spacing.",
- "internal": true
- },
- "stretch-multiplier": {
- "value": "1.5",
- "description": "Multiplier for stretch spacing.",
- "internal": true
- }
- },
- "size": {
- "-13": {
- "value": "calc(var(--ii-spacing-base-size) * pow(var(--ii-spacing-base-scale), -22))",
- "description": "Ekstremt liten spacing, -13.",
- "internal": true
- },
- "-12": {
- "value": "calc(var(--ii-spacing-base-size) * pow(var(--ii-spacing-base-scale), -17))",
- "description": "Ekstra liten spacing, -12.",
- "internal": true
- },
- "-11": {
- "value": "calc(var(--ii-spacing-base-size) * pow(var(--ii-spacing-base-scale), -15))",
- "description": "Ekstra liten spacing, -11.",
- "internal": true
- },
- "-10": {
- "value": "calc(var(--ii-spacing-base-size) * pow(var(--ii-spacing-base-scale), -12))",
- "description": "Ekstra liten spacing, -10.",
- "internal": true
- },
- "-9": {
- "value": "calc(var(--ii-spacing-base-size) * pow(var(--ii-spacing-base-scale), -11))",
- "description": "Ekstra liten spacing, -9.",
- "internal": true
- },
- "-8": {
- "value": "calc(var(--ii-spacing-base-size) * pow(var(--ii-spacing-base-scale), -9))",
- "description": "Ekstra liten spacing, -8.",
- "internal": true
- },
- "-7": {
- "value": "calc(var(--ii-spacing-base-size) * pow(var(--ii-spacing-base-scale), -7))",
- "description": "Ekstra liten spacing, -7.",
- "internal": true
- },
- "-6": {
- "value": "calc(var(--ii-spacing-base-size) * pow(var(--ii-spacing-base-scale), -6))",
- "description": "Ekstra liten spacing, -6.",
- "internal": true
- },
- "-5": {
- "value": "calc(var(--ii-spacing-base-size) * pow(var(--ii-spacing-base-scale), -5))",
- "description": "Ekstra liten spacing, -5.",
- "internal": true
- },
- "-4": {
- "value": "calc(var(--ii-spacing-base-size) * pow(var(--ii-spacing-base-scale), -4))",
- "description": "Ekstra liten spacing, -4.",
- "internal": true
- },
- "-3": {
- "value": "calc(var(--ii-spacing-base-size) * pow(var(--ii-spacing-base-scale), -3))",
- "description": "Ekstra liten spacing, -3.",
- "internal": true
- },
- "-2": {
- "value": "calc(var(--ii-spacing-base-size) * pow(var(--ii-spacing-base-scale), -2))",
- "description": "Ekstra liten spacing, -2.",
- "internal": true
- },
- "-1": {
- "value": "calc(var(--ii-spacing-base-size) * pow(var(--ii-spacing-base-scale), -1))",
- "description": "Ekstra liten spacing, -1.",
- "internal": true
- },
- "0": { "value": "var(--ii-spacing-base-size)", "description": "Base spacing, 0.", "internal": true },
- "1": {
- "value": "calc(var(--ii-spacing-base-size) * pow(var(--ii-spacing-base-scale), 1))",
- "description": "Liten spacing, 1.",
- "internal": true
- },
- "2": {
- "value": "calc(var(--ii-spacing-base-size) * pow(var(--ii-spacing-base-scale), 2))",
- "description": "Liten spacing, 2.",
- "internal": true
- },
- "3": {
- "value": "calc(var(--ii-spacing-base-size) * pow(var(--ii-spacing-base-scale), 3))",
- "description": "Liten spacing, 3.",
- "internal": true
- },
- "4": {
- "value": "calc(var(--ii-spacing-base-size) * pow(var(--ii-spacing-base-scale), 4))",
- "description": "Liten spacing, 4.",
- "internal": true
- },
- "5": {
- "value": "calc(var(--ii-spacing-base-size) * pow(var(--ii-spacing-base-scale), 5))",
- "description": "Liten spacing, 5.",
- "internal": true
- },
- "6": {
- "value": "calc(var(--ii-spacing-base-size) * pow(var(--ii-spacing-base-scale), 6))",
- "description": "Liten spacing, 6.",
- "internal": true
- },
- "7": {
- "value": "calc(var(--ii-spacing-base-size) * pow(var(--ii-spacing-base-scale), 7))",
- "description": "Liten spacing, 7.",
- "internal": true
- },
- "8": {
- "value": "calc(var(--ii-spacing-base-size) * pow(var(--ii-spacing-base-scale), 8))",
- "description": "Liten spacing, 8.",
- "internal": true
- },
- "9": {
- "value": "calc(var(--ii-spacing-base-size) * pow(var(--ii-spacing-base-scale), 9))",
- "description": "Liten spacing, 9.",
- "internal": true
- },
- "10": {
- "value": "calc(var(--ii-spacing-base-size) * pow(var(--ii-spacing-base-scale), 10))",
- "description": "Liten spacing, 10.",
- "internal": true
- },
- "11": {
- "value": "calc(var(--ii-spacing-base-size) * pow(var(--ii-spacing-base-scale), 11))",
- "description": "Liten spacing, 11.",
- "internal": true
- },
- "12": {
- "value": "calc(var(--ii-spacing-base-size) * pow(var(--ii-spacing-base-scale), 12))",
- "description": "Liten spacing, 12.",
- "internal": true
- },
- "13": {
- "value": "calc(var(--ii-spacing-base-size) * pow(var(--ii-spacing-base-scale), 13))",
- "description": "Liten spacing, 13.",
- "internal": true
- },
- "14": {
- "value": "calc(var(--ii-spacing-base-size) * pow(var(--ii-spacing-base-scale), 14))",
- "description": "Liten spacing, 14.",
- "internal": true
- },
- "15": {
- "value": "calc(var(--ii-spacing-base-size) * pow(var(--ii-spacing-base-scale), 15))",
- "description": "Liten spacing, 15.",
- "internal": true
- },
- "16": {
- "value": "calc(var(--ii-spacing-base-size) * pow(var(--ii-spacing-base-scale), 16))",
- "description": "Liten spacing, 16.",
- "internal": true
- },
- "17": {
- "value": "calc(var(--ii-spacing-base-size) * pow(var(--ii-spacing-base-scale), 17))",
- "description": "Liten spacing, 17.",
- "internal": true
- },
- "18": {
- "value": "calc(var(--ii-spacing-base-size) * pow(var(--ii-spacing-base-scale), 18))",
- "description": "Liten spacing, 18.",
- "internal": true
- },
- "19": {
- "value": "calc(var(--ii-spacing-base-size) * pow(var(--ii-spacing-base-scale), 19))",
- "description": "Liten spacing, 19.",
- "internal": true
- }
- }
- }
-}
diff --git a/indeks-utils/css/gap.css b/indeks-utils/css/gap.css
index 5412f34..7abc400 100644
--- a/indeks-utils/css/gap.css
+++ b/indeks-utils/css/gap.css
@@ -1,5 +1,6 @@
/* Gap Utilities */
+.ix-gap-none,
.ix-gap-0 {
gap: 0;
}
@@ -40,6 +41,7 @@
gap: var(--ix-spacing-4xl);
}
+.ix-col-gap-none,
.ix-col-gap-0 {
column-gap: 0;
}
@@ -80,6 +82,7 @@
column-gap: var(--ix-spacing-4xl);
}
+.ix-row-gap-none,
.ix-row-gap-0 {
row-gap: 0;
}
@@ -121,6 +124,7 @@
}
@media (min-width: 768px) {
+ .ix-sm-gap-none,
.ix-sm-gap-0 {
gap: 0;
}
@@ -161,6 +165,7 @@
gap: var(--ix-spacing-4xl);
}
+ .ix-sm-col-gap-none,
.ix-sm-col-gap-0 {
column-gap: 0;
}
@@ -201,6 +206,7 @@
column-gap: var(--ix-spacing-4xl);
}
+ .ix-sm-row-gap-none,
.ix-sm-row-gap-0 {
row-gap: 0;
}
@@ -243,6 +249,7 @@
}
@media (min-width: 1024px) {
+ .ix-md-gap-none,
.ix-md-gap-0 {
gap: 0;
}
@@ -283,6 +290,7 @@
gap: var(--ix-spacing-4xl);
}
+ .ix-md-col-gap-none,
.ix-md-col-gap-0 {
column-gap: 0;
}
@@ -323,6 +331,7 @@
column-gap: var(--ix-spacing-4xl);
}
+ .ix-md-row-gap-none,
.ix-md-row-gap-0 {
row-gap: 0;
}
@@ -365,6 +374,7 @@
}
@media (min-width: 1280px) {
+ .ix-lg-gap-none,
.ix-lg-gap-0 {
gap: 0;
}
@@ -405,6 +415,7 @@
gap: var(--ix-spacing-4xl);
}
+ .ix-lg-col-gap-none,
.ix-lg-col-gap-0 {
column-gap: 0;
}
@@ -445,6 +456,7 @@
column-gap: var(--ix-spacing-4xl);
}
+ .ix-lg-row-gap-none,
.ix-lg-row-gap-0 {
row-gap: 0;
}
@@ -487,6 +499,7 @@
}
@media (min-width: 1600px) {
+ .ix-xl-gap-none,
.ix-xl-gap-0 {
gap: 0;
}
@@ -527,6 +540,7 @@
gap: var(--ix-spacing-4xl);
}
+ .ix-xl-col-gap-none,
.ix-xl-col-gap-0 {
column-gap: 0;
}
@@ -567,6 +581,7 @@
column-gap: var(--ix-spacing-4xl);
}
+ .ix-xl-row-gap-none,
.ix-xl-row-gap-0 {
row-gap: 0;
}
diff --git a/indeks-utils/css/margin.css b/indeks-utils/css/margin.css
index 4273f55..abad0b8 100644
--- a/indeks-utils/css/margin.css
+++ b/indeks-utils/css/margin.css
@@ -1,5 +1,6 @@
/* Margin Utilities */
+.ix-m-none,
.ix-m-0 {
margin: 0;
}
@@ -46,6 +47,7 @@
/* Margin top */
+.ix-mt-none,
.ix-mt-0 {
margin-top: 0;
}
@@ -88,6 +90,7 @@
/* Margin right */
+.ix-mr-none,
.ix-mr-0 {
margin-right: 0;
}
@@ -130,6 +133,7 @@
/* Margin bottom */
+.ix-mb-none,
.ix-mb-0 {
margin-bottom: 0;
}
@@ -172,6 +176,7 @@
/* Margin left */
+.ix-ml-none,
.ix-ml-0 {
margin-left: 0;
}
@@ -252,6 +257,7 @@
/* Margin inline */
+.ix-mx-none,
.ix-mx-0 {
margin-inline: 0;
}
@@ -297,6 +303,7 @@
}
@media (min-width: 768px) {
+ .ix-sm-m-none,
.ix-sm-m-0 {
margin: 0;
}
@@ -343,6 +350,7 @@
/* Margin top */
+ .ix-sm-mt-none,
.ix-sm-mt-0 {
margin-top: 0;
}
@@ -385,6 +393,7 @@
/* Margin right */
+ .ix-sm-mr-none,
.ix-sm-mr-0 {
margin-right: 0;
}
@@ -427,6 +436,7 @@
/* Margin bottom */
+ .ix-sm-mb-none,
.ix-sm-mb-0 {
margin-bottom: 0;
}
@@ -469,6 +479,7 @@
/* Margin left */
+ .ix-sm-ml-none,
.ix-sm-ml-0 {
margin-left: 0;
}
@@ -549,6 +560,7 @@
/* Margin inline */
+ .ix-sm-mx-none,
.ix-sm-mx-0 {
margin-inline: 0;
}
@@ -595,6 +607,7 @@
}
@media (min-width: 1024px) {
+ .ix-md-m-none,
.ix-md-m-0 {
margin: 0;
}
@@ -641,6 +654,7 @@
/* Margin top */
+ .ix-md-mt-none,
.ix-md-mt-0 {
margin-top: 0;
}
@@ -683,6 +697,7 @@
/* Margin right */
+ .ix-md-mr-none,
.ix-md-mr-0 {
margin-right: 0;
}
@@ -725,6 +740,7 @@
/* Margin bottom */
+ .ix-md-mb-none,
.ix-md-mb-0 {
margin-bottom: 0;
}
@@ -767,6 +783,7 @@
/* Margin left */
+ .ix-md-ml-none,
.ix-md-ml-0 {
margin-left: 0;
}
@@ -847,6 +864,7 @@
/* Margin inline */
+ .ix-md-mx-none,
.ix-md-mx-0 {
margin-inline: 0;
}
@@ -893,6 +911,7 @@
}
@media (min-width: 1280px) {
+ .ix-lg-m-none,
.ix-lg-m-0 {
margin: 0;
}
@@ -939,6 +958,7 @@
/* Margin top */
+ .ix-lg-mt-none,
.ix-lg-mt-0 {
margin-top: 0;
}
@@ -981,6 +1001,7 @@
/* Margin right */
+ .ix-lg-mr-none,
.ix-lg-mr-0 {
margin-right: 0;
}
@@ -1023,6 +1044,7 @@
/* Margin bottom */
+ .ix-lg-mb-none,
.ix-lg-mb-0 {
margin-bottom: 0;
}
@@ -1064,6 +1086,7 @@
}
/* Margin left utility classes */
+ .ix-lg-ml-none,
.ix-lg-ml-0 {
margin-left: 0;
}
@@ -1144,6 +1167,7 @@
/* Margin inline */
+ .ix-lg-mx-none,
.ix-lg-mx-0 {
margin-inline: 0;
}
@@ -1190,6 +1214,7 @@
}
@media (min-width: 1600px) {
+ .ix-xl-m-none,
.ix-xl-m-0 {
margin: 0;
}
@@ -1236,6 +1261,7 @@
/* Margin top */
+ .ix-xl-mt-none,
.ix-xl-mt-0 {
margin-top: 0;
}
@@ -1278,6 +1304,7 @@
/* Margin right */
+ .ix-xl-mr-none,
.ix-xl-mr-0 {
margin-right: 0;
}
@@ -1320,6 +1347,7 @@
/* Margin bottom */
+ .ix-xl-mb-none,
.ix-xl-mb-0 {
margin-bottom: 0;
}
@@ -1362,6 +1390,7 @@
/* Margin left */
+ .ix-xl-ml-none,
.ix-xl-ml-0 {
margin-left: 0;
}
@@ -1442,6 +1471,7 @@
/* Margin inline */
+ .ix-xl-mx-none,
.ix-xl-mx-0 {
margin-inline: 0;
}
diff --git a/indeks-utils/css/padding.css b/indeks-utils/css/padding.css
index b900ad1..db74e31 100644
--- a/indeks-utils/css/padding.css
+++ b/indeks-utils/css/padding.css
@@ -1,5 +1,6 @@
/* Padding Utilities */
+.ix-p-none,
.ix-p-0 {
padding: 0;
}
@@ -42,6 +43,7 @@
/* Padding top */
+.ix-pt-none,
.ix-pt-0 {
padding-top: 0;
}
@@ -84,6 +86,7 @@
/* Padding bottom */
+.ix-pb-none,
.ix-pb-0 {
padding-bottom: 0;
}
@@ -126,6 +129,7 @@
/* Padding right */
+.ix-pr-none,
.ix-pr-0 {
padding-right: 0;
}
@@ -168,6 +172,7 @@
/* Padding left */
+.ix-pl-none,
.ix-pl-0 {
padding-left: 0;
}
@@ -210,6 +215,7 @@
/* Padding horizontal */
+.ix-px-none,
.ix-px-0 {
padding-inline: 0;
}
@@ -252,6 +258,7 @@
/* Padding vertical */
+.ix-py-none,
.ix-py-0 {
padding-block: 0;
}
@@ -293,6 +300,7 @@
}
@media (min-width: 768px) {
+ .ix-sm-p-none,
.ix-sm-p-0 {
padding: 0;
}
@@ -335,6 +343,7 @@
/* Padding top */
+ .ix-sm-pt-none,
.ix-sm-pt-0 {
padding-top: 0;
}
@@ -377,6 +386,7 @@
/* Padding bottom */
+ .ix-sm-pb-none,
.ix-sm-pb-0 {
padding-bottom: 0;
}
@@ -419,6 +429,7 @@
/* Padding right */
+ .ix-sm-pr-none,
.ix-sm-pr-0 {
padding-right: 0;
}
@@ -461,6 +472,7 @@
/* Padding left */
+ .ix-sm-pl-none,
.ix-sm-pl-0 {
padding-left: 0;
}
@@ -503,6 +515,7 @@
/* Padding horizontal */
+ .ix-sm-px-none,
.ix-sm-px-0 {
padding-inline: 0;
}
@@ -545,6 +558,7 @@
/* Padding vertical */
+ .ix-sm-py-none,
.ix-sm-py-0 {
padding-block: 0;
}
@@ -587,6 +601,7 @@
}
@media (min-width: 1024px) {
+ .ix-md-p-none,
.ix-md-p-0 {
padding: 0;
}
@@ -629,6 +644,7 @@
/* Padding top */
+ .ix-md-pt-none,
.ix-md-pt-0 {
padding-top: 0;
}
@@ -671,6 +687,7 @@
/* Padding bottom */
+ .ix-md-pb-none,
.ix-md-pb-0 {
padding-bottom: 0;
}
@@ -713,6 +730,7 @@
/* Padding right */
+ .ix-md-pr-none,
.ix-md-pr-0 {
padding-right: 0;
}
@@ -755,6 +773,7 @@
/* Padding left */
+ .ix-md-pl-none,
.ix-md-pl-0 {
padding-left: 0;
}
@@ -797,6 +816,7 @@
/* Padding horizontal */
+ .ix-md-px-none,
.ix-md-px-0 {
padding-inline: 0;
}
@@ -839,6 +859,7 @@
/* Padding vertical */
+ .ix-md-py-none,
.ix-md-py-0 {
padding-block: 0;
}
@@ -881,6 +902,7 @@
}
@media (min-width: 1280px) {
+ .ix-lg-p-none,
.ix-lg-p-0 {
padding: 0;
}
@@ -923,6 +945,7 @@
/* Padding top */
+ .ix-lg-pt-none,
.ix-lg-pt-0 {
padding-top: 0;
}
@@ -965,6 +988,7 @@
/* Padding bottom */
+ .ix-lg-pb-none,
.ix-lg-pb-0 {
padding-bottom: 0;
}
@@ -1007,6 +1031,7 @@
/* Padding right */
+ .ix-lg-pr-none,
.ix-lg-pr-0 {
padding-right: 0;
}
@@ -1049,6 +1074,7 @@
/* Padding left */
+ .ix-lg-pl-none,
.ix-lg-pl-0 {
padding-left: 0;
}
@@ -1091,6 +1117,7 @@
/* Padding horizontal */
+ .ix-lg-px-none,
.ix-lg-px-0 {
padding-inline: 0;
}
@@ -1133,6 +1160,7 @@
/* Padding vertical */
+ .ix-lg-py-none,
.ix-lg-py-0 {
padding-block: 0;
}
@@ -1175,6 +1203,7 @@
}
@media (min-width: 1600px) {
+ .ix-xl-p-none,
.ix-xl-p-0 {
padding: 0;
}
@@ -1217,6 +1246,7 @@
/* Padding top */
+ .ix-xl-pt-none,
.ix-xl-pt-0 {
padding-top: 0;
}
@@ -1259,6 +1289,7 @@
/* Padding bottom */
+ .ix-xl-pb-none,
.ix-xl-pb-0 {
padding-bottom: 0;
}
@@ -1301,6 +1332,7 @@
/* Padding right */
+ .ix-xl-pr-none,
.ix-xl-pr-0 {
padding-right: 0;
}
@@ -1343,6 +1375,7 @@
/* Padding left */
+ .ix-xl-pl-none,
.ix-xl-pl-0 {
padding-left: 0;
}
@@ -1385,6 +1418,7 @@
/* Padding horizontal */
+ .ix-xl-px-none,
.ix-xl-px-0 {
padding-inline: 0;
}
@@ -1427,6 +1461,7 @@
/* Padding vertical */
+ .ix-xl-py-none,
.ix-xl-py-0 {
padding-block: 0;
}
diff --git a/indeks-utils/css/spacing.css b/indeks-utils/css/spacing.css
index 2a0752d..2419b1b 100644
--- a/indeks-utils/css/spacing.css
+++ b/indeks-utils/css/spacing.css
@@ -1,35 +1,40 @@
-:where(:root, .ix-body, [data-density="default"]) {
- --ix-spacing-2xs: var(--ii-spacing-size--10);
- --ix-spacing-xs: var(--ii-spacing-size--7);
- --ix-spacing-sm: var(--ii-spacing-size--3);
- --ix-spacing-md: var(--ii-spacing-size-0);
- --ix-spacing-lg: var(--ii-spacing-size-3);
- --ix-spacing-xl: var(--ii-spacing-size-6);
- --ix-spacing-2xl: var(--ii-spacing-size-9);
- --ix-spacing-3xl: var(--ii-spacing-size-12);
- --ix-spacing-4xl: var(--ii-spacing-size-16);
+/* Telefon (default — gjelder fra 0px). Compact ignoreres på telefon. */
+:where(:root, .ix-body, [data-density="default"], [data-density="compact"]) {
+ --ix-spacing-none: 0;
+ --ix-spacing-2xs: 4px;
+ --ix-spacing-xs: 8px;
+ --ix-spacing-sm: 12px;
+ --ix-spacing-md: 16px;
+ --ix-spacing-lg: 24px;
+ --ix-spacing-xl: 32px;
+ --ix-spacing-2xl: 48px;
+ --ix-spacing-3xl: 64px;
+ --ix-spacing-4xl: 96px;
}
-:where([data-density="compact"]) {
- --ix-spacing-2xs: var(--ii-spacing-size--12);
- --ix-spacing-xs: var(--ii-spacing-size--9);
- --ix-spacing-sm: var(--ii-spacing-size--5);
- --ix-spacing-md: var(--ii-spacing-size--2);
- --ix-spacing-lg: var(--ii-spacing-size-1);
- --ix-spacing-xl: var(--ii-spacing-size-4);
- --ix-spacing-2xl: var(--ii-spacing-size-7);
- --ix-spacing-3xl: var(--ii-spacing-size-10);
- --ix-spacing-4xl: var(--ii-spacing-size-14);
-}
+@media (min-width: 768px) {
+ /* Tablet og oppover — default */
+ :where(:root, .ix-body, [data-density="default"]) {
+ --ix-spacing-sm: 16px;
+ --ix-spacing-md: 20px;
+ --ix-spacing-lg: 32px;
+ --ix-spacing-xl: 40px;
+ --ix-spacing-2xl: 56px;
+ --ix-spacing-3xl: 80px;
+ --ix-spacing-4xl: 120px;
+ /* none, 2xs, xs uendret fra telefon */
+ }
-:where([data-density="comfortable"]) {
- --ix-spacing-2xs: var(--ii-spacing-size--8);
- --ix-spacing-xs: var(--ii-spacing-size--5);
- --ix-spacing-sm: var(--ii-spacing-size--1);
- --ix-spacing-md: var(--ii-spacing-size-2);
- --ix-spacing-lg: var(--ii-spacing-size-5);
- --ix-spacing-xl: var(--ii-spacing-size-8);
- --ix-spacing-2xl: var(--ii-spacing-size-11);
- --ix-spacing-3xl: var(--ii-spacing-size-14);
- --ix-spacing-4xl: var(--ii-spacing-size-18);
+ /* Tablet og oppover — compact */
+ :where([data-density="compact"]) {
+ --ix-spacing-2xs: 2px;
+ --ix-spacing-xs: 4px;
+ --ix-spacing-sm: 6px;
+ --ix-spacing-md: 8px;
+ --ix-spacing-lg: 12px;
+ --ix-spacing-xl: 16px;
+ --ix-spacing-2xl: 24px;
+ --ix-spacing-3xl: 32px;
+ --ix-spacing-4xl: 48px;
+ }
}