@klodd/ds 3.1.0 → 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/apps/jubb.css

@@ -14,8 +14,23 @@
   --accent-10:       var(--blue-10);
   --accent-text:     var(--blue-11);
 
-  /* Surface - Jubbs egna app-specifika bakgrund (Blue-1, varm-bla
-     ton istallet for Mauve-1). Matchar manifest.json background_color
-     sa PWA-splash och OS-statusbar harmoniserar med appens ton. */
-  --surface-page:    var(--blue-1);   /* #0d1520 */
+  /* Surface - Jubbs Blue-tonade ytor (paritet med Ekonoms Plum-tonade).
+     Tidigare arvde apparna default Mauve-skala for surface - nu far
+     bagge appar app-specifik surface-tone som matchar accent.
+
+     Blue-1 (#0d1520) ar morkast - sidans bakgrund.
+     Blue-2 (#111927) - sektioner, nav, tab-bar.
+     Blue-3 (#0d2847) - kort, paneler (raised).
+     Blue-4 (#003362) - modaler, popovers (overlay).
+     Blue-5 (#004074) - active-state. */
+  --surface-page:    var(--blue-1);
+  --surface-default: var(--blue-2);
+  --surface-raised:  var(--blue-3);
+  --surface-overlay: var(--blue-4);
+  --surface-hover:   var(--blue-4);
+  --surface-active:  var(--blue-5);
+  --surface-sunken:  var(--blue-2);
+
+  /* Text - varm vit med latt bla ton (paritet med Ekonoms #F4F2FA Plum-vit) */
+  --text-default:    #EEF4FF;
 }

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