@klodd/ds 3.1.1 → 3.2.0

package/css/00-primitives.css

@@ -257,14 +257,21 @@
   --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 i base/typography.css om enheten saknar
+     den. iOS-anvandare med Inter installerad far lokal kopia; ovriga far
+     Google Fonts woff2 (kachas av PWA-SW). System-ui ar universell fallback. */
   --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;
 }
 
 

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:

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.0",
   "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": [