@klodd/ds 3.4.1 → 3.4.3

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/components/panel.css

@@ -52,11 +52,11 @@
 }
 
 .panel--info {
-  border-left: 3px solid var(--positive-border);
+  border: 1px solid var(--positive-border);
 }
 
 .panel--info-warning {
-  border-left: 3px solid var(--warning-border);
+  border: 1px solid var(--warning-border);
 }
 
 .panel--danger {

package/css/components/setting-row.css

@@ -25,7 +25,11 @@
   justify-content: space-between;
   gap: var(--space-12);
   width: 100%;
-  padding: var(--space-14) var(--space-16);
+  /* Bara vertikal padding - horisontell sajt-padding kommer fran parent
+     (panel, card, ds-demo etc). Tidigare var det dubbel-indrag - text
+     hamnade indragen fran parent-padding plus rad-padding. Nu alignar
+     setting-row med split-bar och andra edge-to-edge-element. */
+  padding: var(--space-14) 0;
   background: transparent;
   border: 0;
   border-radius: var(--radius-12);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@klodd/ds",
-  "version": "3.4.1",
-  "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.",
+  "version": "3.4.3",
+  "description": "Klodd Design System - shared tokens, typography, components and JS for Jubb, Ekonom, and future apps. v3.4.3 fixar panel-info-border-asymmetri (vanster-only -> alla sidor) + setting-row dubblad horisontell padding (nu vertikal-bara, alignad med split-bar).",
   "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