Forenkle spacing kraftig

.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).

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)
 

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
 

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<HTMLSelectElement>) => {
         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}
             />

indeks-eksempel/src/components/SettingsPopover.tsx

@@ -6,6 +6,7 @@ interface SettingsPopoverProps {
     onFontSizeChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
     onThemeChange: (event: React.ChangeEvent<HTMLSelectElement>) => void;
     onNativeChange: (enabled: boolean) => void;
+    density: string;
     fontSize: number;
     nativeMode: boolean;
 }
@@ -15,6 +16,7 @@ export const SettingsPopover: React.FC<SettingsPopoverProps> = ({
     onFontSizeChange,
     onThemeChange,
     onNativeChange,
+    density,
     fontSize,
     nativeMode,
 }) => {
@@ -51,12 +53,11 @@ export const SettingsPopover: React.FC<SettingsPopoverProps> = ({
                             <select
                                 id="sizeDropdown"
                                 className="ix-border-default"
-                                defaultValue="default"
+                                value={density}
                                 onChange={onDensityChange}
                             >
                                 <option value="compact">Compact</option>
                                 <option value="default">Default</option>
-                                <option value="comfortable">Comfortable</option>
                             </select>
                         </label>
 

indeks-storybook/.storybook/preview-body.html

@@ -10,7 +10,6 @@
         <select id="sizeDropdown" class="size-dropdown">
             <option value="compact">Compact</option>
             <option selected value="default">Default</option>
-            <option value="comfortable">Comfortable</option>
         </select>
     </div>
 </div>

indeks-storybook/stories/components/tag/Tag.mdx

@@ -21,10 +21,5 @@ Eksempel på tag med forskjellige størrelser og moduser.
       <Tag size="md" data-density="default" variant="info" type="subtle" children="Default / md" />
       <Tag size="lg" data-density="default" variant="info" type="subtle" children="Default / lg" />
     </VStack>
-    <VStack>
-      <Tag size="sm" data-density="comfortable" variant="info" type="subtle" children="Comfortable / sm" />
-      <Tag size="md" data-density="comfortable" variant="info" type="subtle" children="Comfortable / md" />
-      <Tag size="lg" data-density="comfortable" variant="info" type="subtle" children="Comfortable / lg" />
-    </VStack>
   </HStack>
 </div>

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",