@klodd/ds 3.1.1 → 3.2.1

package/css/00-primitives.css

@@ -149,6 +149,10 @@
   --plum-10: #b658c4;   /* Solid hover */
   --plum-11: #e796f3;   /* Accent text pa neutral */
   --plum-12: #f4d4f4;
+
+  /* Plum mellanniva - mellan plum-2 och plum-3, anvands av Ekonoms
+     surface-raised. Tidigare hardkodat #2a1a2e i apps/ekonom.css. */
+  --plum-2-5: oklch(0.24 0.048 295);
 }
 
 
@@ -257,14 +261,24 @@
   --ls-tracker-lg:  0.1em;
   --ls-tracker-xl:  0.12em;
 
-  /* Font-stack - Apple system-font (iOS-likt aven pa Win/Linux). */
+  /* Font-stack - Linear-stacken (Inter primar + SF Pro Display + system).
+     Inter laddas via Google Fonts ENBART om appen valjer att importera
+     base/typography.css. Jubb gor det. Ekonom valjer medvetet att INTE
+     importera den (Sprint D2-beslut: render-blocking-prestanda).
+
+     Stacken faller tillbaka till SF Pro Display pa iOS och system-ui pa
+     ovriga plattformar nar Inter inte ar tillganglig. */
   --font-sans:
-    -apple-system, BlinkMacSystemFont,
-    "SF Pro Display", "SF Pro Text",
-    "Instrument Sans", "Segoe UI", system-ui, sans-serif;
+    "Inter", "SF Pro Display", -apple-system,
+    system-ui, "Segoe UI", Roboto, "Helvetica Neue",
+    Arial, sans-serif;
   --font-numeric: var(--font-sans);
   --font-mono:
-    ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
+    "SF Mono", "Geist Mono", ui-monospace,
+    SFMono-Regular, Menlo, Monaco, "Cascadia Code",
+    "Roboto Mono", "Oxygen Mono", "Ubuntu Monospace",
+    "Source Code Pro", "Fira Code", "Droid Sans Mono",
+    "Courier New", monospace;
 }
 
 
@@ -379,8 +393,9 @@
 
   --touch-min: 44px;
 
-  --bottom-nav-height: 80px;
-  --bottom-nav-clearance: calc(var(--bottom-nav-height) + var(--space-12) + var(--safe-bottom) + var(--space-12));
+  /* Bottom-nav-tokens lever i 10-semantic.css som calc-baserade
+     (--touch-min + space). Tidigare hardkodade 80px har raderats
+     2026-05-07 - en kalla av sanning, inga magic-numbers. */
 }
 
 

package/css/10-semantic.css

@@ -212,8 +212,23 @@
      Skuggor + glass-bakgrunder for nav. Backdrop for sheets/spinner.
      ================================================================ */
 
-  /* Float-skugga for installation-chip, sheet-overlays. */
-  --shadow-float:     0 8px 24px rgba(0, 0, 0, 0.35);
+  /* SKUGGA - en enda tillaten skugga i hela systemet.
+     Kalla: DNB Eufemia "arlig materialitet". Aldrig starka drop-shadows,
+     aldrig fake gradients.
+     Anvand for: kort, modaler, popovers.
+     Inte for: knappar, inputs, inline-element. */
+  --shadow-card:  0 8px 16px rgba(51, 51, 51, 0.08);
+
+  /* Bakat-kompat: --shadow-float ar nu alias till --shadow-card.
+     Befintliga komponenter (chip.install-chip, overlay.dialog/sheet,
+     feedback.toast) fortsatter funka utan andring. Migration till
+     --shadow-card per komponent kan ske gradvis. */
+  --shadow-float: var(--shadow-card);
+
+  /* Focus-ring tokens - shadcn/ui-konventionen.
+     Anvands av :focus-visible-states pa interaktiva element. */
+  --ring:        var(--border-focus);
+  --ring-offset: var(--surface-page);
 
   /* Sheet-backdrop bakom <dialog class="sheet">. */
   --backdrop-sheet:   color-mix(in srgb, var(--surface-page) 60%, transparent);
@@ -225,6 +240,16 @@
   --glass-bg:          color-mix(in oklch, var(--surface-overlay) 85%, transparent);
   --glass-bg-fallback: color-mix(in oklch, var(--surface-overlay) 96%, transparent);
 
+  /* Grafpalett - for diagram och visualiseringar.
+     Fem distinkta farger med god kontrast mot dark-bakgrund.
+     Anvand i ordning: chart-1 primar, chart-2 sekundar, osv.
+     shadcn/ui --chart-1..5-konventionen. */
+  --chart-1: var(--accent-9);          /* app-accent (Blue/Plum per app) */
+  --chart-2: var(--green-9);           /* success-gron */
+  --chart-3: var(--amber-9);           /* varning-gul */
+  --chart-4: oklch(0.65 0.18 300);     /* lila-ton */
+  --chart-5: oklch(0.68 0.16 200);     /* teal-ton */
+
   /* Hero-glow (radial gradient pa main.with-hero-glow).
      Apply via .with-hero-glow pa <main>. */
   --hero-glow:
@@ -264,7 +289,17 @@
   /* ================================================================
      ==== LAYOUT - app-niva-konstanter
      ================================================================ */
-  --bottom-nav-height-semantic: calc(var(--touch-min) + var(--space-12));
+
+  /* Bottom-nav-hojd: enda kalla av sanning (konsoliderad 2026-05-07
+     fran tidigare dubbel-definition i 00-primitives.css). Calc-baserad
+     pa --touch-min + space sa den foljer designsystem-andringar
+     automatiskt. */
+  --bottom-nav-height: calc(var(--touch-min) + var(--space-12));
+
+  /* Bottom-nav-clearance: utrymme under nav for fixed-positioning +
+     safe-area pa iPhone notch-modeller. Anvands som body padding-bottom
+     i app-CSS sa scroll-content inte hamnar under nav. */
+  --bottom-nav-clearance: calc(var(--bottom-nav-height) + var(--space-12) + var(--safe-bottom) + var(--space-12));
 }
 
 
@@ -338,16 +373,18 @@
 
 /* ================================================================
    ==== LIGHT MODE (data-theme="light")
-   Overrider ytor, text och borders. Accent justeras ett steg morkare
-   for batter kontrast pa ljus bakgrund. Komponenter behover inga
-   andringar - alla refererar bara semantic tokens.
+   Forberedda tokens - aktiveras INTE av Ekonom (dark-only).
+   Tillgangliga for framtida light-mode-sprint i Jubb eller framtida apps.
+
+   App valjer aktivering genom att satta `data-theme="light"` pa <html>.
+   Standardtillstand ar dark (utan attribut eller med data-theme="dark").
+
+   Komponenter behover inga andringar - alla refererar bara semantic tokens.
 
-   STATUS: forberedd, inte aktivt produktion-verifierad. Dokumenterad
-   som "Punkt J" i AUDIT.md. Tokens som inte overrides her arver
-   default-blocket (dark-values) - kanda begransningar:
+   Kanda begransningar (kvar att harmonisera vid eventuell aktivering):
    - alpha-tokens (--accent-a*) anvander dark-Radix-alpha-skalor;
      bor importera light-skalor for full paritet
-   - --shadow-float ar kalibrerad for dark-mode (synlig pa ljus bg
+   - --shadow-card ar kalibrerad for dark-mode (synlig pa ljus bg
      men kan behova mindre opacity)
    - --hero-glow gradient anvander accent som ar morkare i light;
      eventuellt for mattat

package/css/apps/ekonom.css

@@ -26,7 +26,7 @@
      for synlig kort-elevation utan att vara for ljus. */
   --surface-page:    var(--plum-1);   /* #181118 */
   --surface-default: var(--plum-2);   /* #201320 */
-  --surface-raised:  #2a1a2e;          /* mellanting plum-2 och plum-3 */
+  --surface-raised:  var(--plum-2-5); /* mellanniva plum-2/plum-3 */
   --surface-overlay: var(--plum-3);   /* #351a35 */
   --surface-hover:   var(--plum-3);
   --surface-active:  var(--plum-4);

package/css/base/typography.css

@@ -1,3 +1,10 @@
+/* Inter font (Linear-stack) - laddas fran Google Fonts om enheten
+   saknar den. CSP-kraven i app-repona inkluderar redan
+   fonts.googleapis.com (style-src) och fonts.gstatic.com (font-src).
+   400 = --fw-regular, 500 = --fw-medium per font-weight-policy. */
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500&display=swap');
+
+
 /* ================================================================
    base/typography.css
    Namngivna stilklasser - bundlar size + weight + line-height +

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@klodd/ds",
-  "version": "3.1.1",
+  "version": "3.2.1",
   "description": "Klodd Design System - shared tokens, typography, components and JS for Jubb, Ekonom, and future apps. v2.0 inkluderar all komponentkod och delad JS - app-repona haller bara data och affarslogik.",
   "main": "css/index.css",
   "files": [