@klodd/ds 3.4.0 → 3.4.2

package/SKILL.md

@@ -27,9 +27,15 @@ Denna Skill fångar både reglerna ("vad") och resonemanget ("varför").
 </locked_rules>
 
 ## Apps och theming
-- `data-app="jubb"` → Blue accent (Radix Blue Dark), Mauve neutral
+- `data-app="jubb"` → Blue accent (Radix Blue Dark), Blue-tonad bakgrund
 - `data-app="ekonom"` → Plum accent (Radix Plum Dark), Plum-tonad bakgrund
-- Ny app: lägg till ramp i 00-primitives.css + 5-raders apps/foo.css
+- Ny app: lägg till ramp i 00-primitives.css + apps/foo.css med accent-
+  overrides (obligatoriskt, 5 rader) + valfria surface/text-overrides
+  (15-40 rader totalt om appen ska ha distinkt bakgrundston)
+- **Surface-raised-konvention**: alla Klodd-appar sätter
+  `--surface-raised: var(--<color>-2)` - kort och paneler ligger på
+  samma yta som default-sektioner men distinkt mot page-bakgrunden
+  (color-1). Gäller alla nuvarande och framtida appar.
 
 ## Besluts-records
 - `references/04-locked-decisions/` — låsta beslut. Förklara, ändra inte.
@@ -49,8 +55,25 @@ cd ~/dev/Jubb && npm install @klodd/ds@latest && npm run build:ds
 cd ~/dev/Ekonom && npm install @klodd/ds@latest && npm run build:ds
 ```
 
+## CLI-kommandon
+
+```bash
+# Synka paketets CSS och JS till app-repot
+npm run build:ds        # kör npx @klodd/ds sync internt
+
+# Verifiera att committade filer matchar paketet (kör i CI)
+npx @klodd/ds verify
+
+# Generera startlista för SW PRECACHE_URLS
+npx @klodd/ds precache
+```
+
+Kör verify efter varje build:ds för att bekräfta att ingen drift uppstått.
+GitHub Action `Design System Verify` i båda app-repos kör detta automatiskt
+på push och PR.
+
 ## När du är osäker
 Läs relevant ADR. Täcks frågan inte av något ADR — flagga det explicit:
 "Jag ser inget beslut på detta — ska vi skapa ett i references/05-open-decisions/?"
 
-Updated: 2026-05-07 (matchar @klodd/ds 3.2.0)
+Updated: 2026-05-08 (matchar @klodd/ds 3.4.1)

package/css/apps/ekonom.css

@@ -22,11 +22,16 @@
 
   /* Surface - varm plum-tonad bakgrund istallet for Mauve-neutral.
      Plum-1 (#181118) ar nastan lika mork som Mauve-1 men med plum-
-     ton. --surface-raised har en mellanton mellan plum-2 och plum-3
-     for synlig kort-elevation utan att vara for ljus. */
+     ton.
+
+     Konvention: --surface-raised = appens <color>-2. Galler alla
+     Klodd-appar (Jubb -> blue-2, Ekonom -> plum-2). Korten ligger
+     subtilt over page-bakgrunden utan att bli for ljus. Tidigare
+     anvande Ekonom --plum-2-5 (mellanvarde) - nu linjerat med
+     samma regel som Jubb. */
   --surface-page:    var(--plum-1);   /* #181118 */
   --surface-default: var(--plum-2);   /* #201320 */
-  --surface-raised:  var(--plum-2-5); /* mellanniva plum-2/plum-3 */
+  --surface-raised:  var(--plum-2);   /* #201320 - kort, paneler */
   --surface-overlay: var(--plum-3);   /* #351a35 */
   --surface-hover:   var(--plum-3);
   --surface-active:  var(--plum-4);

package/css/apps/jubb.css

@@ -18,14 +18,20 @@
      Tidigare arvde apparna default Mauve-skala for surface - nu far
      bagge appar app-specifik surface-tone som matchar accent.
 
+     Konvention: --surface-raised = appens <color>-2. Galler alla
+     Klodd-appar (Jubb -> blue-2, Ekonom -> plum-2). Denna lagger
+     korten subtilt over page-bakgrunden (color-1) utan att bli
+     for ljus.
+
      Blue-1 (#0d1520) ar morkast - sidans bakgrund.
-     Blue-2 (#111927) - sektioner, nav, tab-bar.
-     Blue-3 (#0d2847) - kort, paneler (raised).
+     Blue-2 (#111927) - sektioner, nav, tab-bar OCH kort (raised).
+     Blue-3 (#0d2847) - inte langre raised, frigjord for ev. framtida
+     niva mellan raised och overlay.
      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-raised:  var(--blue-2);
   --surface-overlay: var(--blue-4);
   --surface-hover:   var(--blue-4);
   --surface-active:  var(--blue-5);

package/css/base/typography.css

@@ -1,8 +1,6 @@
-/* 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');
+/* Inter laddas INTE via Google Fonts (render-blocking, medvetet borttaget).
+ * Stacken faller tillbaka pa SF Pro Display pa iOS och system-ui pa ovriga.
+ * Se --font-sans i 00-primitives.css. */
 
 
 /* ================================================================

package/js/hero-roll.js

@@ -17,7 +17,8 @@
     marker. Animation kor vid forsta page-load efter att PWA/tab
     stangts helt. Sprint D3:s `body[data-first-load]` (cookie-baserad)
     fungerar bara for helt nya anvandare; J.5-trigger fungerar for
-    return-anvandare som har `ekonom_seen`-cookie satt sedan tidigare.
+    return-anvandare som har appens first-load-cookie (satts av servern)
+    sedan tidigare.
  2. Manadsbyte via < / > i manads-pillen pa /avstamning
 
  Sprint J.4 (CE-rapport: 000 kr syns lite val lange + hela processen
@@ -58,10 +59,9 @@
 	// Sprint J.5: sessionStorage-marker for fresh-session-detektering.
 	// sessionStorage rensas vid PWA-stangning/tab-close, persisterar
 	// mellan reloads/nav inom samma session.
-	// Delad sessionStorage-key for hero-roll. Bytt fran ekonom_hero_session
-	// 2026-05-08 nar komponenten porterades tillbaka till Ekonom som shared-
-	// system. Befintliga session-markers fran gamla nyckeln tappar persist
-	// engang per anvandare - ny markering satts vid nasta kallstart.
+	// Nyckel: ds_hero_session (app-agnostisk). Delad mellan alla appar
+	// som anvander @klodd/ds sa samma session-marker fungerar oavsett
+	// vilken app som kor.
 	const SESSION_KEY = 'ds_hero_session';
 
 	let hasRunInitial = false;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@klodd/ds",
-  "version": "3.4.0",
-  "description": "Klodd Design System - shared tokens, typography, components and JS for Jubb, Ekonom, and future apps. v3.4 inkluderar sync/verify/precache CLI sa app-repona inte langre handhaller egna build-script.",
+  "version": "3.4.2",
+  "description": "Klodd Design System - shared tokens, typography, components and JS for Jubb, Ekonom, and future apps. v3.4 inkluderar sync/verify/precache CLI sa app-repona inte langre handhaller egna build-script. v3.4.1 tar bort Google Fonts @import + gor hero-roll-kommentarer app-agnostiska. v3.4.2 etablerar surface-raised = <color>-2-konvention for kort/paneler i alla appar.",
   "main": "css/index.css",
   "bin": {
     "klodd-ds": "./bin/klodd-ds.js"

package/references/05-open-decisions/{0004-halsomentorn-legacy-css.md → 0004-halsomentorn-legacy-css-CLOSED.md}

@@ -1,7 +1,8 @@
 # 0004 - Halsomentorn legacy-CSS i Ekonom
 
 ## Status
-Pending. Lag prioritet.
+Closed - Halsomentorn arkiverat. `ds/halsomentorn.css` behalls i Ekonom
+tills Halsomentorn-projektet eventuellt ateruptas. Ingen action kravs.
 
 ## Context
 Ekonoms `app/static/css/ds/halsomentorn.css` ar 1783 rader CSS som

package/references/05-open-decisions/0008-legacy-token-migration.md

@@ -0,0 +1,73 @@
+# 0008 - Legacy token-migration och `ds/components.css`-radering - v4.0.0
+
+## Status
+Pending. Trigger: innan tredje app borjar anvanda `@klodd/ds`.
+
+## Context
+`10-semantic.css` har en LEGACY ALIASES-sektion (rad 412-506) som
+holds gamla token-namn vid liv sedan migrationen pabarjades:
+`--accent`, `--accent-dim`, `--accent-link*`, `--bg-base`, `--bg-surface`,
+`--card-bg-elevated`, `--surface-medium`, `--surface-subtle`,
+`--negative-dim`, `--positive-dim`, `--shadow-float`, samt 9 radius-
+aliaser. Sektionen ar 100 rader och har funnits over ett halvar.
+
+Parallellt korr `ds/components.css` (flat-format, ~60 KB) sida vid
+sida med `ds/components/<X>.css` (BEM, paket-konvention). Bagge
+laddas i bagge appars main.css. DESIGN_TOKENS_GUIDE.md sektion 7
+dokumenterar konflikten och saver "migration sker per sida" - men
+ingen migration har skett pa manader.
+
+Audit 2026-05-08 bekraftade att Jubb-domain CSS (`jubb-theme.css`,
+`triage-v2.css`, `ds/base.css`) hanger fast i legacy-tokens, och
+samma migrations-skuld finns i Ekonom (tx-row, kategori-tokens,
+profile-edit). Det ar ingen lokal Jubb-fraga - det ar paketets
+kostnad.
+
+### Konsekvens av att leva i halv-tillstand
+
+- Varje ny komponent maste valja: gamla namnet eller nya namnet?
+  Folk valjer fel halften av gangerna.
+- Ny utvecklare (eller LLM) maste lara sig bagge systemen for att
+  lasa koden. Cognitive overhead vid varje touch.
+- Specen i DESIGN_TOKENS_GUIDE.md saver "5-raders apps/jubb.css" men
+  paketet har 36 rader. Specen ar inte sanning.
+- Migrations-skulden vaxer linjart med antal call-sites och antal
+  appar.
+
+## Decision
+Gor en fullstandig **lock-sprint** innan tredje app laggs till:
+
+1. Migrera ALLA call-sites till nya semantic token-namn
+   (`--accent` -> `--accent-9` eller `--accent-text`, `--bg-base`
+   -> `--surface-page`, `--surface-medium` -> `--surface-default`,
+   `--card-bg-elevated` -> `--surface-raised` etc).
+2. Radera LEGACY ALIASES-sektionen ur `10-semantic.css`.
+3. Migrera ALLA flat-komponenter (`.btn`, `.card`, `.panel`, `.tx-row`
+   etc) till BEM (`.btn`, `.btn--primary`, `.card`, `.card--interactive`).
+4. Radera `ds/components.css` (flat-versionen) ur bagge app-repos.
+5. Bumpa till `@klodd/ds@4.0.0` (breaking).
+
+## Consequences
+- **+** Slut pa dubbla mentala modeller. En standard.
+- **+** Spec stammer med implementationen.
+- **+** Tredje app:s onboarding gar mot ett moget system.
+- **+** `npx @klodd/ds verify` (3.4.0+) detekterar drift mekaniskt.
+- **-** Stor sprint - kraver dedikerad bandbredd (uppskattning: 2-3
+  arbetsdagar plus visuell QA per app).
+- **-** Risk for visuell regression vid migration. Kraver `/design`-
+  styleguide-jamforelse fore/efter pa bagge appar.
+
+## Pending decision criteria
+- Tidpunkt: omedelbart innan tredje app (Margevo eller annan)
+  borjar anvanda paketet. Att vanta langre forharder skulden;
+  att hasta forskuggar appar som redan ar i prod.
+- Vem kor sprinten: Calle ensam eller med assistent CC?
+- Om CC: ska den ha access till bagge app-repos under sprinten?
+
+## Notes
+- Audit 2026-05-08 (av CC) identifierade root-causes och rekommenderade
+  steg 1-3 (CLI-konsolidering) NU och steg 4 (denna migration) "nar
+  bandbredd finns".
+- Steg 1-3 ar implementerade i v3.4.0 (sync/verify/precache CLI).
+- v3.4.0 ar lokalt locked - drift detekteras av CI-job i bagge appar.
+  Det ar plattformen som later denna lock-sprint hallas i kontroll.