@klodd/ds 4.4.0 → 4.5.0

package/css/10-semantic.css

@@ -438,3 +438,29 @@
   --surface-medium: color-mix(in oklch, white 8%, transparent);
   --surface-strong: color-mix(in oklch, white 12%, transparent);
 }
+
+
+/* ================================================================
+   ==== BAR-FAMILJEN (v4.5.0, ADR 0021)
+   Shared tokens som alla bar-komponenter (progress, hbar, split-bar,
+   colored-bar, column-bar, dual-bar) lasr istallet for att duplicera
+   bg-/radius-/color-varden. Andra en token, andras overallt.
+
+   Komponenter som har medvetet annorlunda track-bg (column-bar,
+   dual-bar = sunken; progress = raised) override:ar --bar-track-color
+   pa block-roten. Steg 1 (no visual change). Steg 2 senare: harmonisera
+   till EN default om Calle vill.
+
+   Komponenter med specifika fill-tjocklekar (4/6/8/12px / vertical-flex)
+   behaller dessa lokalt - tjocklek ar designval per komponent-typ.
+   ================================================================ */
+:root {
+  --bar-track-color:           var(--surface-active);
+  --bar-track-radius:          var(--radius-full);
+  --bar-fill-radius:           var(--radius-full);
+  --bar-fill-color:            var(--accent-9);
+  --bar-fill-color-positive:   var(--positive);
+  --bar-fill-color-warning:    var(--warning);
+  --bar-fill-color-negative:   var(--negative);
+  --bar-fill-transition:       width var(--dur-medium) var(--ease-spring-snappy);
+}

package/css/components/colored-bar.css

@@ -20,9 +20,11 @@
    Se references/02-components.md "Kategori-monstret".
    ================================================================ */
 .colored-bar {
-  background: var(--bar-accent, var(--accent-9));
+  /* v4.5.0 (ADR 0021): konsumerar shared --bar-fill-color istallet for
+     direkt --accent-9. --bar-accent-binding bevaras for app-domain-tokens. */
+  background: var(--bar-accent, var(--bar-fill-color));
   height: 100%;
-  border-radius: var(--radius-full);
+  border-radius: var(--bar-fill-radius);
   transition: width var(--dur-base) var(--ease-out);
 }
 

package/css/components/column-bar.css

@@ -46,10 +46,15 @@
 }
 
 .column-bar__track {
+  /* v4.5.0 (ADR 0021): per-komponent override av --bar-track-color
+     (sunken vs default-active) och --bar-track-radius (4px vs full) -
+     vertikal stapel skulle bli oval med radius-full. */
+  --bar-track-color: var(--surface-sunken);
+  --bar-track-radius: var(--radius-4);
   width: 100%;
   flex: 1;
-  background: var(--surface-sunken);
-  border-radius: var(--radius-4);
+  background: var(--bar-track-color);
+  border-radius: var(--bar-track-radius);
   overflow: hidden;
   display: flex;
   align-items: flex-end;
@@ -58,7 +63,7 @@
 
 .column-bar__fill {
   width: 100%;
-  background: var(--positive);
+  background: var(--bar-fill-color-positive);
   border-radius: var(--radius-4);
   transition: var(--tr-height-slower);
 }

package/css/components/dual-bar.css

@@ -31,22 +31,25 @@
 }
 
 .dual-bar__track {
+  /* v4.5.0 (ADR 0021): per-komponent override av --bar-track-color
+     (sunken vs default-active). */
+  --bar-track-color: var(--surface-sunken);
   flex: 1;
   height: 12px;
-  background: var(--surface-sunken);
-  border-radius: var(--radius-full);
+  background: var(--bar-track-color);
+  border-radius: var(--bar-track-radius);
   overflow: hidden;
 }
 
 .dual-bar__fill {
   height: 100%;
-  border-radius: var(--radius-full);
-  background: var(--positive);
+  border-radius: var(--bar-fill-radius);
+  background: var(--bar-fill-color-positive);
   transition: var(--tr-width-slower);
 }
 
-.dual-bar__fill--amort  { background: var(--positive); }
-.dual-bar__fill--apprec { background: var(--accent-9); }
+.dual-bar__fill--amort  { background: var(--bar-fill-color-positive); }
+.dual-bar__fill--apprec { background: var(--bar-fill-color); }
 
 .dual-bar__meta {
   display: flex;

package/css/components/hbar.css

@@ -43,24 +43,26 @@
 .hbar__track {
   width: 100%;
   height: var(--space-6);
-  background: var(--surface-active);
-  border-radius: var(--radius-full);
+  background: var(--bar-track-color);
+  border-radius: var(--bar-track-radius);
   overflow: hidden;
 }
 
 .hbar__fill {
   height: 100%;
   /* v4.4.0 (ADR 0020): --bar-accent-binding for app-domain-kategorier.
-     Default --accent-9 om bindning saknas. App-domain CSS satter
-     --bar-accent via wrapper-klass: <div class="hbar__fill cat-mat">. */
-  background: var(--bar-accent, var(--accent-9));
-  border-radius: var(--radius-full);
-  transition: width var(--dur-medium) var(--ease-spring-snappy);
+     Default --bar-fill-color (=--accent-9) om bindning saknas. App-domain
+     CSS satter --bar-accent via wrapper-klass: <div class="hbar__fill cat-mat">.
+     v4.5.0 (ADR 0021): konsumerar shared --bar-fill-color istallet for
+     direkt --accent-9. */
+  background: var(--bar-accent, var(--bar-fill-color));
+  border-radius: var(--bar-fill-radius);
+  transition: var(--bar-fill-transition);
 }
 
-.hbar__fill--positive { background: var(--positive); }
-.hbar__fill--warning  { background: var(--warning); }
-.hbar__fill--negative { background: var(--negative); }
+.hbar__fill--positive { background: var(--bar-fill-color-positive); }
+.hbar__fill--warning  { background: var(--bar-fill-color-warning); }
+.hbar__fill--negative { background: var(--bar-fill-color-negative); }
 
 @media (prefers-reduced-motion: reduce) {
   .hbar__fill { transition: none; }

package/css/components/progress.css

@@ -25,20 +25,26 @@
    Respekterar prefers-reduced-motion (transition tas bort).
    ================================================================ */
 .progress {
+  /* v4.5.0 (ADR 0021): per-komponent override av --bar-track-color
+     for att behalla raised-bg (var-skillnad mot active default). */
+  --bar-track-color: var(--surface-raised);
   width: 100%;
   height: var(--space-6);
-  background: var(--surface-raised);
-  border-radius: var(--radius-full);
+  background: var(--bar-track-color);
+  border-radius: var(--bar-track-radius);
   overflow: hidden;
 }
 
 .progress__bar {
   height: 100%;
-  background: var(--accent-9);
-  border-radius: var(--radius-full);
+  background: var(--bar-fill-color);
+  border-radius: var(--bar-fill-radius);
   transition: width var(--dur-base) var(--ease-out);
 }
 
+/* Progress-specifika status-modifiers behaller --bg-X (solid status-bg-
+   tema istallet for --positive/--warning/--negative som ar text-color-
+   varianter). Medvetet annorlunda fran hbar/split-bar/dual-bar. */
 .progress__bar--success { background: var(--bg-success); }
 .progress__bar--warning { background: var(--bg-warning); }
 .progress__bar--danger  { background: var(--bg-danger); }

package/css/components/split-bar.css

@@ -10,22 +10,24 @@
 .split-bar {
   display: flex;
   height: 8px;
-  border-radius: var(--radius-full);
+  border-radius: var(--bar-track-radius);
   overflow: hidden;
-  background: var(--surface-active);
+  background: var(--bar-track-color);
   margin: var(--space-8) 0 var(--space-12);
 }
 
 .split-bar__segment {
   height: 100%;
-  transition: width var(--dur-medium) var(--ease-spring-snappy);
+  transition: var(--bar-fill-transition);
 }
 
-.split-bar__segment--primary    { background: var(--accent-9); }
+/* v4.5.0 (ADR 0021): segments konsumerar shared --bar-fill-color-X.
+   --secondary anvander --text-disabled (gray-out-look, inte stadard-color). */
+.split-bar__segment--primary    { background: var(--bar-fill-color); }
 .split-bar__segment--secondary  { background: var(--text-disabled); flex: 1; }
-.split-bar__segment--positive   { background: var(--positive); }
-.split-bar__segment--negative   { background: var(--negative); }
-.split-bar__segment--warning    { background: var(--warning); }
+.split-bar__segment--positive   { background: var(--bar-fill-color-positive); }
+.split-bar__segment--negative   { background: var(--bar-fill-color-negative); }
+.split-bar__segment--warning    { background: var(--bar-fill-color-warning); }
 
 .split-bar__label {
   font-size: var(--fs-13);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@klodd/ds",
-  "version": "4.4.0",
+  "version": "4.5.0",
   "description": "Klodd shared design system - tokens, components, JS",
   "main": "css/index.css",
   "bin": {

package/references/04-locked-decisions/0021-bar-shared-tokens.md

@@ -0,0 +1,133 @@
+# 0021 - Bar-familjen: gemensamma tokens (Steg 1)
+
+## Status
+Locked. Minor version-bump (4.5.0) - additive, no visual change.
+
+## Context
+
+Audit 2026-05-14 (sen kvall, fas 3) raknade 6 bar-komponenter i
+paketet (progress, colored-bar, hbar, split-bar, column-bar,
+dual-bar) plus 2 Ekonom-domain-wrappers. Calle's observation:
+"manga bars - finns det dubbletter?".
+
+Konkreta dubletter i nuvarande bar-CSS:
+
+**Track-bg-varierar:**
+| Komponent | Track-bg |
+|---|---|
+| progress | `--surface-raised` |
+| hbar | `--surface-active` |
+| split-bar | `--surface-active` |
+| column-bar | `--surface-sunken` |
+| dual-bar | `--surface-sunken` |
+
+Tre olika value:r utan dokumenterad rationale. Inkonsekvens.
+
+**Fill-color-default varierar:**
+| Komponent | Fill-default |
+|---|---|
+| progress | `--accent-9` |
+| hbar | `--bar-accent || --accent-9` |
+| colored-bar | `--bar-accent || --accent-9` |
+| split-bar (primary) | `--accent-9` |
+| column-bar | `--positive` |
+| dual-bar | `--positive` |
+
+**Status-modifier-color varierar:**
+| Komponent | Positive | Warning | Negative |
+|---|---|---|---|
+| progress | `--bg-success` | `--bg-warning` | `--bg-danger` |
+| hbar | `--positive` | `--warning` | `--negative` |
+| split-bar | `--positive` | `--warning` | `--negative` |
+
+Tva olika status-tema (solid bg-X vs text-color-X) utan klar rationale.
+
+Per Calle 2026-05-14 (sen kvall): "Jag hade kunnat se att man har
+en stor bar-samling, dar storlek, farg etc bestams med olika tokens."
+
+Calles intuition stamde - shared tokens ar standard i moderna design-
+system. Men full one-class-many-modifiers-konsolidering ar breaking
+MAJOR-bump. Steg 1 levererar SHARED TOKENS utan att andra struktur
+eller visual.
+
+## Decision
+
+**Steg 1 (denna ADR, v4.5.0):** Lyfta 8 shared tokens till
+`:root` i `10-semantic.css`. Refaktorera alla 6 bar-komponenter att
+lasa dem. Komponenter med medvetet annorlunda varden override:ar
+pa block-roten (`--bar-track-color: var(--surface-sunken)` etc).
+
+```css
+:root {
+  --bar-track-color:           var(--surface-active);
+  --bar-track-radius:          var(--radius-full);
+  --bar-fill-radius:           var(--radius-full);
+  --bar-fill-color:            var(--accent-9);
+  --bar-fill-color-positive:   var(--positive);
+  --bar-fill-color-warning:    var(--warning);
+  --bar-fill-color-negative:   var(--negative);
+  --bar-fill-transition:       width var(--dur-medium) var(--ease-spring-snappy);
+}
+```
+
+### Per-komponent-changes
+
+| Komponent | Track-color | Fill-default | Status-modifier |
+|---|---|---|---|
+| progress | OVERRIDE: `--bar-track-color: var(--surface-raised)` | `--bar-fill-color` | Behaller `--bg-success/-warning/-danger` (solid status-bg-tema, medvetet annorlunda fran text-color-tema) |
+| hbar | DEFAULT (active) | `--bar-fill-color` med `--bar-accent`-binding | `--bar-fill-color-positive/-warning/-negative` |
+| split-bar | DEFAULT (active) | `--bar-fill-color` (primary) | `--bar-fill-color-positive/-negative/-warning` |
+| colored-bar | n/a (no track) | `--bar-fill-color` med `--bar-accent`-binding | n/a |
+| column-bar | OVERRIDE: `--bar-track-color: var(--surface-sunken)` + `--bar-track-radius: var(--radius-4)` | `--bar-fill-color-positive` | n/a |
+| dual-bar | OVERRIDE: `--bar-track-color: var(--surface-sunken)` | `--bar-fill-color-positive` (default + --amort), `--bar-fill-color` (--apprec) | n/a |
+
+### Future steps (NOT in scope for v4.5.0)
+
+**Steg 2:** Konsolidera till 1 `.bar`-namespace med modifiers
+`--vertical/-multi-segment/-with-meta/-with-label`. Breaking MAJOR-bump.
+Konsumeras vid framtida sprint nar Calle vill exekvera.
+
+**Steg 3:** Eliminera duplikat-komponenter (colored-bar = hbar__fill
+standalone). Mindre breaking. Optional cleanup.
+
+## Konsekvenser
+
+**Bra:**
+- Endpoint-shape uppfyller Calle's intuition - tokens styr utseende.
+- Konsekvens via en token-andring framover (andra
+  --bar-fill-color-positive pa root - andras pa hbar/split-bar/
+  column-bar/dual-bar samtidigt).
+- Inga visuella andringar (komponenter override:ar default per behov).
+- Backwards-compat - app-domain CSS som anvander direkta tokens
+  (Ekonoms `--bar-accent`-bindings) fortsatter funka.
+- Future Steg 2/3 kan byggas pa shared-token-foundation.
+
+**Trade-offs:**
+- 6 komponenter har fortfarande egen file/namespace - inte unifierat.
+- Per-komponent-override (--bar-track-color: var(--surface-X)) tilltager
+  CSS-storlek marginellt jamfort med hardkodad value.
+- Override-pattern kraver discipline - om someone andra `.column-bar`
+  utan att inse override:n kan bryta sunken-bg.
+
+## Migration
+
+**Klodd-ds v4.4.0 -> v4.5.0:** additive token-tillagg + per-komponent-
+refaktor. Inga template-andringar i appar. Inga visual changes.
+
+**Apparna:** bumpa till 4.5.0, build:ds, verify - ingen template-
+migration.
+
+## Verifiering
+
+- 0 visual changes per Calle's krav (Steg 1 = "no visual change").
+- Stylelint-plugin: 0 errors (alla tokens lagliga).
+- Manuell visual QA pa /design (alla 6 bar-sektioner ser identiska
+  ut pre/post-bump).
+
+## References
+
+- ADR 0020 (domain-to-package-lift) - inforde --bar-accent-binding
+- DESIGN-LANGUAGE.md sektion 4 (padding-rytm) - liknande shared-token-
+  approach for spacing
+- Calle's beslut 2026-05-14 (sen kvall): "Det later bra" pa Steg 1-
+  forslag