@klodd/ds 5.14.0 → 5.14.1

package/css/00-primitives.css

@@ -470,3 +470,130 @@
     );
   }
 }
+
+
+/* ================================================================
+   ==== LIGHT MODE PRIMITIVES
+   Radix Light-skalor. Konsumeras BARA av [data-theme="light"]-blocket
+   i 10-semantic.css och app-filer. Aldrig direkt i komponenter.
+
+   Hex-värden hämtade från @radix-ui/colors v3.0.0 via unpkg
+   (2026-05-26). P3-varianter finns i Radix-paketet men ingår inte
+   här - klodd-ds håller sRGB-hex för portabilitet, matchande
+   dark-rampernas format ovan.
+
+   Naming: <ramp>-light-<step> för solid, <ramp>-light-a<step> för
+   alpha. Dark-skalorna ovan saknar suffix (de är default).
+   ================================================================ */
+
+
+/* ================================================================
+   ==== MAUVE LIGHT (neutral, --gray-N i light mode)
+   ================================================================ */
+:root {
+  --gray-light-1:  #fdfcfd;
+  --gray-light-2:  #faf9fb;
+  --gray-light-3:  #f2eff3;
+  --gray-light-4:  #eae7ec;
+  --gray-light-5:  #e3dfe6;
+  --gray-light-6:  #dbd8e0;
+  --gray-light-7:  #d0cdd7;
+  --gray-light-8:  #bcbac7;
+  --gray-light-9:  #8e8c99;
+  --gray-light-10: #84828e;
+  --gray-light-11: #65636d;
+  --gray-light-12: #211f26;
+
+  --gray-light-a1:  #55005503;
+  --gray-light-a2:  #2b005506;
+  --gray-light-a3:  #30004010;
+  --gray-light-a4:  #20003618;
+  --gray-light-a5:  #20003820;
+  --gray-light-a6:  #14003527;
+  --gray-light-a7:  #10003332;
+  --gray-light-a8:  #08003145;
+  --gray-light-a9:  #05001d73;
+  --gray-light-a10: #0500197d;
+  --gray-light-a11: #0400119c;
+  --gray-light-a12: #020008e0;
+}
+
+
+/* ================================================================
+   ==== BLUE LIGHT (Jubb accent)
+   ================================================================ */
+:root {
+  --blue-light-1:  #fbfdff;
+  --blue-light-2:  #f4faff;
+  --blue-light-3:  #e6f4fe;
+  --blue-light-4:  #d5efff;
+  --blue-light-5:  #c2e5ff;
+  --blue-light-6:  #acd8fc;
+  --blue-light-7:  #8ec8f6;
+  --blue-light-8:  #5eb1ef;
+  --blue-light-9:  #0090ff;
+  --blue-light-10: #0588f0;
+  --blue-light-11: #0d74ce;
+  --blue-light-12: #113264;
+
+  --blue-light-a1:  #0080ff04;
+  --blue-light-a2:  #008cff0b;
+  --blue-light-a3:  #008ff519;
+  --blue-light-a4:  #009eff2a;
+  --blue-light-a5:  #0093ff3d;
+  --blue-light-a6:  #0088f653;
+  --blue-light-a7:  #0083eb71;
+  --blue-light-a8:  #0084e6a1;
+  --blue-light-a9:  #0090ff;
+  --blue-light-a10: #0086f0fa;
+  --blue-light-a11: #006dcbf2;
+  --blue-light-a12: #002359ee;
+}
+
+
+/* ================================================================
+   ==== PLUM LIGHT (Ekonom accent)
+   ================================================================ */
+:root {
+  --plum-light-1:  #fefcff;
+  --plum-light-2:  #fdf7fd;
+  --plum-light-3:  #fbebfb;
+  --plum-light-4:  #f7def8;
+  --plum-light-5:  #f2d1f3;
+  --plum-light-6:  #e9c2ec;
+  --plum-light-7:  #deade3;
+  --plum-light-8:  #cf91d8;
+  --plum-light-9:  #ab4aba;
+  --plum-light-10: #a144af;
+  --plum-light-11: #953ea3;
+  --plum-light-12: #53195d;
+
+  --plum-light-a1:  #aa00ff03;
+  --plum-light-a2:  #c000c008;
+  --plum-light-a3:  #cc00cc14;
+  --plum-light-a4:  #c200c921;
+  --plum-light-a5:  #b700bd2e;
+  --plum-light-a6:  #a400b03d;
+  --plum-light-a7:  #9900a852;
+  --plum-light-a8:  #9000a56e;
+  --plum-light-a9:  #89009eb5;
+  --plum-light-a10: #7f0092bb;
+  --plum-light-a11: #730086c1;
+  --plum-light-a12: #40004be6;
+}
+
+
+/* ================================================================
+   ==== STATUS LIGHT
+   Bara step 9 (solid bg) och 11 (text-on-light) - det är de steg
+   som konsumeras av --bg-success/warning/danger respektive
+   --positive/-negative/-warning i 10-semantic.css.
+   ================================================================ */
+:root {
+  --green-light-9:  #30a46c;
+  --green-light-11: #218358;
+  --amber-light-9:  #ffc53d;
+  --amber-light-11: #ab6400;
+  --red-light-9:    #e5484d;
+  --red-light-11:   #ce2c31;
+}

package/css/10-semantic.css

@@ -321,6 +321,101 @@
 }
 
 
+/* ================================================================
+   ==== LIGHT MODE OVERRIDES
+   Aktiveras via [data-theme="light"] på <html>-elementet.
+   Overridar bara tokens som faktiskt skiljer sig från dark default -
+   strukturella tokens (--touch-min, --z-*, --fw-*, spacing, radius)
+   delas mellan lägen.
+
+   App-specifika accenter overridas i
+   [data-app="X"][data-theme="light"] i respektive apps/X.css.
+
+   Shadow-doktrin: dark mode "ingen shadow, luminans skapar djup" -
+   light mode återställer shadow eftersom luminans-kontrast är svag.
+   Se ADR 0013 light mode-tillägg + ADR 0028 light mode-arkitektur.
+   ================================================================ */
+[data-theme="light"] {
+  color-scheme: light;
+
+  /* SURFACES - Mauve Light, spegelvänt från dark-stegen */
+  --surface-page:     var(--gray-light-1);
+  --surface-default:  var(--gray-light-2);
+  --surface-raised:   var(--gray-light-3);
+  --surface-elevated: var(--gray-light-4);
+  --surface-overlay:  var(--gray-light-5);
+  --surface-hover:    var(--gray-light-4);
+  --surface-active:   var(--gray-light-5);
+  --surface-sunken:   var(--gray-light-2);
+
+  /* Surface tints - svart istället för vit (white-tint osynlig på ljus bg) */
+  --surface-faint:    color-mix(in oklch, black 2%, transparent);
+  --surface-subtle:   color-mix(in oklch, black 4%, transparent);
+  --surface-medium:   color-mix(in oklch, black 8%, transparent);
+  --surface-strong:   color-mix(in oklch, black 12%, transparent);
+
+  /* TEXT - Mauve Light, höga steg = mörk text mot ljus bakgrund */
+  --text-default:  var(--gray-light-12);
+  --text-subtle:   var(--gray-light-11);
+  --text-muted:    var(--gray-light-10);
+  --text-disabled: var(--gray-light-8);
+
+  /* BORDERS */
+  --border-subtle:         var(--gray-light-5);
+  --border-default:        var(--gray-light-7);
+  --border-strong:         var(--gray-light-8);
+  --border-focus:          var(--gray-light-9);
+  --border-hairline-faint: var(--bw-hairline) solid color-mix(in oklch, black 4%, transparent);
+
+  /* SHADOW-DOKTRIN LIGHT (ADR 0013 light-tillägg) */
+  --shadow-card:  0 1px 3px color-mix(in oklch, var(--gray-12) 12%, transparent),
+                  0 1px 2px color-mix(in oklch, var(--gray-12) 8%, transparent);
+  --shadow-float: 0 4px 12px color-mix(in oklch, var(--gray-12) 16%, transparent),
+                  0 2px 4px color-mix(in oklch, var(--gray-12) 10%, transparent);
+
+  /* GLASS - --gray-light-6 vid 55% (inte --surface-raised) - följer
+     iOS UIBlurEffect-konventionen att ge en svagt mörkare tint över
+     ljus page-bakgrund. Se ADR 0028. */
+  --glass-bg:          color-mix(in oklch, var(--gray-light-6) 55%, transparent);
+  --glass-bg-fallback: color-mix(in oklch, var(--gray-light-6) 90%, transparent);
+
+  /* STATUS - Light step 11 för text, step 9 för bg */
+  --positive:        var(--green-light-11);
+  --positive-dim:    color-mix(in oklch, var(--green-light-9) 12%, transparent);
+  --positive-border: color-mix(in oklch, var(--green-light-9) 30%, transparent);
+  --negative:        var(--red-light-11);
+  --negative-dim:    color-mix(in oklch, var(--red-light-9) 12%, transparent);
+  --negative-border: color-mix(in oklch, var(--red-light-9) 30%, transparent);
+  --warning:         var(--amber-light-11);
+  --warning-dim:     color-mix(in oklch, var(--amber-light-9) 12%, transparent);
+  --warning-hover:   color-mix(in oklch, var(--amber-light-9) 18%, transparent);
+  --warning-border:  color-mix(in oklch, var(--amber-light-9) 30%, transparent);
+
+  /* Solid status-bakgrunder */
+  --bg-success:      var(--green-light-9);
+  --bg-warning:      var(--amber-light-9);
+  --bg-danger:       var(--red-light-9);
+
+  /* Text-on-status: mörk i light mode. Vit oklch(0.98 0 0) ger
+     1.58:1 mot amber-light-9 (WCAG-fail) - gray-light-12 ger 10.3:1
+     mot amber, 5.76:1 mot green-light-9, 5.52:1 mot red-light-9. */
+  --text-on-status:  var(--gray-light-12);
+
+  /* --text-on-accent: mörk i light mode.
+     Vit oklch(0.98 0 0) ger ~3.29:1 mot blue-light-9 och ~2.8:1 mot
+     plum-light-9 - båda under WCAG AA 4.5:1.
+     gray-light-12 ger godkänd kontrast mot alla app-accenter. */
+  --text-on-accent:  var(--gray-light-12);
+
+  /* Danger-action - dim/border följer via accent-danger-recursion */
+  --accent-danger:   var(--red-light-9);
+
+  /* Chart-palette - re-pointe status step 9 till light-version */
+  --chart-2:         var(--green-light-9);
+  --chart-3:         var(--amber-light-9);
+}
+
+
 /* ================================================================
    ==== COMPONENT TOKENS
    Atervaning av samma kombination i 3+ komponenter blir token.

package/css/apps/ekonom.css

@@ -63,3 +63,30 @@
 [data-app="ekonom"] {
   --glass-bg: color-mix(in oklch, var(--surface-raised) 65%, transparent);
 }
+
+
+/* Light mode-override per app - Plum Light-rampen + Plum-tonad page.
+   Konsumeras när <html data-app="ekonom" data-theme="light">. Se ADR 0028. */
+[data-app="ekonom"][data-theme="light"] {
+  /* Accent: Plum Light-rampen */
+  --accent-soft:     var(--plum-light-3);
+  --accent-moderate: var(--plum-light-4);
+  --accent-9:        var(--plum-light-9);
+  --accent-10:       var(--plum-light-10);
+  --accent-text:     var(--plum-light-11);
+  --accent-a1:       var(--plum-light-a1);
+  --accent-a2:       var(--plum-light-a2);
+  --accent-a3:       var(--plum-light-a3);
+  --accent-a6:       var(--plum-light-a6);
+  --accent-a8:       var(--plum-light-a8);
+  --accent-a10:      var(--plum-light-a10);
+  --accent-a12:      var(--plum-light-a12);
+
+  /* Surface: Plum Light page-toningar */
+  --surface-page:    var(--plum-light-1);
+  --surface-default: var(--plum-light-2);
+  --surface-raised:  var(--plum-light-3);
+
+  /* Border-focus: Plum accent */
+  --border-focus:    var(--plum-light-8);
+}

package/css/apps/jubb.css

@@ -51,3 +51,30 @@
 [data-app="jubb"] {
   --glass-bg: color-mix(in oklch, var(--surface-raised) 65%, transparent);
 }
+
+
+/* Light mode-override per app - Blue Light-rampen + Blue-tonad page.
+   Konsumeras när <html data-app="jubb" data-theme="light">. Se ADR 0028. */
+[data-app="jubb"][data-theme="light"] {
+  /* Accent: Blue Light-rampen */
+  --accent-soft:     var(--blue-light-3);
+  --accent-moderate: var(--blue-light-4);
+  --accent-9:        var(--blue-light-9);
+  --accent-10:       var(--blue-light-10);
+  --accent-text:     var(--blue-light-11);
+  --accent-a1:       var(--blue-light-a1);
+  --accent-a2:       var(--blue-light-a2);
+  --accent-a3:       var(--blue-light-a3);
+  --accent-a6:       var(--blue-light-a6);
+  --accent-a8:       var(--blue-light-a8);
+  --accent-a10:      var(--blue-light-a10);
+  --accent-a12:      var(--blue-light-a12);
+
+  /* Surface: Blue Light page-toningar (de mest synliga ytorna) */
+  --surface-page:    var(--blue-light-1);
+  --surface-default: var(--blue-light-2);
+  --surface-raised:  var(--blue-light-3);
+
+  /* Border-focus: Blue accent */
+  --border-focus:    var(--blue-light-8);
+}

package/package.json

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

package/references/04-locked-decisions/0013-visual-coherence-doctrine.md

@@ -116,6 +116,36 @@ Commit: Jubb dffb7eb
    "när-använda-vilken-kombination"-tabeller (t.ex. card vs panel
    för list-items, hub-card vs setting-row för settings).
 
+## Light mode-tillägg (2026-05-26)
+
+Dark mode-doktrinen (ingen box-shadow, luminans skapar djup) gäller
+bara dark mode. I light mode gäller spegellogiken:
+
+- box-shadow är förväntad och nödvändig på raised-ytor
+- --shadow-card och --shadow-float definieras om i
+  [data-theme="light"]-blocket med synliga värden
+- Luminans-hierarkin finns kvar men är svagare i light
+  (ljusa ytor mot vit bakgrund ger liten kontrast utan skugga)
+
+Konkreta värden för light mode:
+
+```css
+--shadow-card:  0 1px 3px color-mix(in oklch, var(--gray-12) 12%, transparent),
+                0 1px 2px color-mix(in oklch, var(--gray-12) 8%, transparent);
+--shadow-float: 0 4px 12px color-mix(in oklch, var(--gray-12) 16%, transparent),
+                0 2px 4px color-mix(in oklch, var(--gray-12) 10%, transparent);
+```
+
+I light mode är --gray-12 mörk (Mauve Light steg 12, #211f26 ≈ mörk
+text), så color-mix ger synlig skugga. Token-systemet löser
+korrekthet automatiskt när --gray-N mappas till light-rampen via
+`[data-theme="light"]`-overriden.
+
+Light-primitives (Mauve/Blue/Plum/Status Light) lagda i
+00-primitives.css 2026-05-26 som förberedelse - 78 nya variabler
+med `-light-`-suffix. Konsumeras i nästa fas när
+[data-theme="light"]-blocket adderas till 10-semantic.css.
+
 ## References
 
 - `references/DESIGN-LANGUAGE.md` (locked doktrin)

package/references/04-locked-decisions/0028-light-mode-architecture.md

@@ -0,0 +1,37 @@
+# 0028 - Light mode-arkitektur
+
+## Status
+Locked. Implementerat 2026-05-26.
+
+## Decision
+
+Light mode aktiveras via `data-theme="light"` på `<html>`-elementet.
+System-default från `prefers-color-scheme`, manuell override via
+LocalStorage (implementeras per app i Fas 3).
+
+Token-override-strategi: `[data-theme="light"]`-block i
+10-semantic.css overridar surface/text/border/shadow/glass.
+App-specifika accenter overridas i
+`[data-app="X"][data-theme="light"]` i respektive apps/X.css.
+
+Komponentskiktet rörs inte - det är 100% token-baserat och följer
+automatiskt.
+
+Shadow-doktrin light mode: se ADR 0013 light mode-tillägg.
+
+Glass light mode: `--gray-light-6` 55% transparent (istället för
+surface-raised 65%). Motiverat av iOS UIBlurEffect-konventionen
+för light backgrounds där en svagt mörkare tint över ljus bakgrund
+ger glaseffekten - omvänt mot dark mode.
+
+Primitives-grund: 78 Radix Light-variabler i 00-primitives.css
+(Mauve/Blue/Plum/Status Light, hex-värden hämtade från
+`@radix-ui/colors` v3.0.0 via unpkg 2026-05-26).
+
+## Consequences
+
+- Persistens är per enhet (LocalStorage), inte server-side - avsiktligt
+  för att stödja olika teman på olika enheter från samma konto
+- Fas 3 (toggle-JS + visuell QA per app) genomförs separat per app
+- Token-systemet löser komponent-korrekthet automatiskt - inga
+  komponent-CSS-edits krävs i light mode