@klodd/ds 5.16.1 → 5.17.0

package/css/00-primitives.css

@@ -519,6 +519,34 @@
 }
 
 
+/* ================================================================
+   ==== KLÖDD VARM LIGHT (delat ljust standardtema)
+   Klödd.io-inspirerad varm neutral + indigo brand-accent. Detta är
+   det enda ljusa temat och delas av alla appar (ADR 0028-amendering).
+   Custom varma värden, inte Radix Mauve Light (se ADR 0006-not):
+   cream-sida med ljusare kort och mörkare input, bläck-text, taupe-ram.
+   ================================================================ */
+:root {
+  --warm-overlay:  #fbfaf5;  /* ljusast - modaler/sheets */
+  --warm-card:     #f6f3ec;  /* kort/paneler, lyfter över sidan */
+  --warm-section:  #efebe2;  /* sektioner strax över sida */
+  --warm-page:     #ede9df;  /* sida (cream, klodd.io theme-color) */
+  --warm-hover:    #e9e4d8;  /* hover-yta */
+  --warm-sunken:   #e4dfd2;  /* input/sänkt */
+  --warm-active:   #e0dacb;  /* active-yta */
+
+  --ink:           #1a1a18;  /* bläck - primär text (~13:1 mot cream) */
+  --ink-subtle:    #57534a;  /* subtil text (~6:1 mot cream) */
+  --ink-muted:     #807b6e;  /* dämpad text / hint */
+
+  --taupe:         #a8a498;  /* stark ram / disabled (ej text - faller WCAG) */
+  --taupe-subtle:  #ded9cc;  /* subtil ram / divider */
+
+  --accent-brand:       #433caf;  /* indigo (klodd.io) - används mycket sparsamt */
+  --accent-brand-hover: #393295;  /* hover/active på indigo */
+}
+
+
 /* ================================================================
    ==== BLUE LIGHT (Jubb accent)
    ================================================================ */

package/css/10-semantic.css

@@ -343,15 +343,16 @@
 [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);
+  /* SURFACES - varm cream-ramp (klodd.io). Sida = cream (mitten i z-stacken),
+     kort ljusare (lyfter), input mörkare (sänkt). Delat ljust standardtema. */
+  --surface-page:     var(--warm-page);
+  --surface-default:  var(--warm-section);
+  --surface-raised:   var(--warm-card);
+  --surface-elevated: var(--warm-card);
+  --surface-overlay:  var(--warm-overlay);
+  --surface-hover:    var(--warm-hover);
+  --surface-active:   var(--warm-active);
+  --surface-sunken:   var(--warm-sunken);
 
   /* Surface tints - svart istället för vit (white-tint osynlig på ljus bg) */
   --surface-faint:    color-mix(in oklch, black 2%, transparent);
@@ -359,30 +360,47 @@
   --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);
+  /* TEXT - varm bläck-ramp (taupe är för ljust för text, blir ram/disabled) */
+  --text-default:  var(--ink);
+  --text-subtle:   var(--ink-subtle);
+  --text-muted:    var(--ink-muted);
+  --text-disabled: var(--taupe);
+
+  /* BORDERS - taupe-toningar, fokus = brand-indigo */
+  --border-subtle:         var(--taupe-subtle);
+  --border-default:        var(--taupe);
+  --border-strong:         var(--ink-muted);
+  --border-focus:          var(--accent-brand);
   --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);
+  /* ACCENT - delad indigo för ALLA appar i ljusläge (ADR 0028-amendering).
+     Mycket sparsam: länkar, nyckelknappar, selected-rader. Per-app-accenter
+     (Jubb blå, Ekonom plum) gäller inte i ljus - ett enda ljust tema.
+     OBS: app-base sätter accent i [data-app=X] (olagrat) som vinner över
+     detta lagrade block - därför sätter varje apps light-block också brand. */
+  --accent-soft:     color-mix(in oklch, var(--accent-brand) 10%, transparent);
+  --accent-moderate: color-mix(in oklch, var(--accent-brand) 16%, transparent);
+  --accent-9:        var(--accent-brand);
+  --accent-10:       var(--accent-brand-hover);
+  --accent-text:     var(--accent-brand);
+  --accent-a1:  color-mix(in oklch, var(--accent-brand) 3%, transparent);
+  --accent-a2:  color-mix(in oklch, var(--accent-brand) 5%, transparent);
+  --accent-a3:  color-mix(in oklch, var(--accent-brand) 10%, transparent);
+  --accent-a6:  color-mix(in oklch, var(--accent-brand) 20%, transparent);
+  --accent-a8:  color-mix(in oklch, var(--accent-brand) 35%, transparent);
+  --accent-a10: color-mix(in oklch, var(--accent-brand) 60%, transparent);
+  --accent-a12: color-mix(in oklch, var(--accent-brand) 90%, transparent);
+
+  /* SHADOW-DOKTRIN LIGHT (ADR 0013 light-tillägg) - ink-baserad */
+  --shadow-card:  0 1px 3px color-mix(in oklch, var(--ink) 12%, transparent),
+                  0 1px 2px color-mix(in oklch, var(--ink) 8%, transparent);
+  --shadow-float: 0 4px 12px color-mix(in oklch, var(--ink) 16%, transparent),
+                  0 2px 4px color-mix(in oklch, var(--ink) 10%, transparent);
+
+  /* GLASS - taupe vid 55% över cream (svagt mörkare tint, iOS UIBlurEffect-
+     konvention för ljus bakgrund). Se ADR 0028. */
+  --glass-bg:          color-mix(in oklch, var(--taupe) 55%, transparent);
+  --glass-bg-fallback: color-mix(in oklch, var(--warm-sunken) 92%, transparent);
 
   /* STATUS - Light step 11 för text, step 9 för bg */
   --positive:        var(--green-light-11);
@@ -406,11 +424,9 @@
      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);
+  /* --text-on-accent: ljus, eftersom den delade brand-accenten är mörk
+     indigo (#433CAF). Varm vit ger ~8:1 mot indigon (WCAG AAA). */
+  --text-on-accent:  var(--warm-overlay);
 
   /* Danger-action - dim/border följer via accent-danger-recursion */
   --accent-danger:   var(--red-light-9);

package/css/apps/ekonom.css

@@ -65,49 +65,37 @@
 }
 
 
-/* Light mode-override per app - Plum Light-rampen + Plum-tonad page.
-   Konsumeras när <html data-app="ekonom" data-theme="light">. Se ADR 0028.
-
-   (0,2,0) specificity - vinner garanterat över både [data-app]-block
-   och [data-theme]-block var för sig. Alla tokens som [data-app="ekonom"]
-   sätter måste även sättas här för light mode - annars vinner app-base
-   över semantic [data-theme="light"]-overriden via load-order. */
+/* Light mode - delat ljust standardtema (cream + indigo). Se ADR 0028.
+   Ekonom har ingen egen ljus-identitet längre: detta block pekar om allt
+   [data-app="ekonom"] sätter i mörkt (accent, ytor, text, glas) till de
+   delade brand/warm-värdena. (0,2,0, olagrat) vinner över både app-base
+   och det lagrade [data-theme="light"]-blocket. Resten (ramar, status)
+   ärvs från [data-theme="light"] i 10-semantic.css. */
 [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-toningar för alla 8 nivåer. Måste sättas här -
-     app-base sätter plum-N (dark-rampen) och vinner annars över
-     [data-theme="light"]-overriden i 10-semantic.css. */
-  --surface-page:     var(--plum-light-1);
-  --surface-default:  var(--plum-light-2);
-  --surface-raised:   var(--plum-light-3);
-  --surface-elevated: var(--plum-light-4);
-  --surface-overlay:  var(--plum-light-5);
-  --surface-hover:    var(--plum-light-4);
-  --surface-active:   var(--plum-light-5);
-  --surface-sunken:   var(--plum-light-1);
-
-  /* Text-default: mörk i light. App-base sätter Ekonoms varma plum-vit
-     #F4F2FA som vinner annars över [data-theme="light"]. */
-  --text-default:     var(--gray-light-12);
+  --accent-soft:     color-mix(in oklch, var(--accent-brand) 10%, transparent);
+  --accent-moderate: color-mix(in oklch, var(--accent-brand) 16%, transparent);
+  --accent-9:        var(--accent-brand);
+  --accent-10:       var(--accent-brand-hover);
+  --accent-text:     var(--accent-brand);
+  --accent-a1:  color-mix(in oklch, var(--accent-brand) 3%, transparent);
+  --accent-a2:  color-mix(in oklch, var(--accent-brand) 5%, transparent);
+  --accent-a3:  color-mix(in oklch, var(--accent-brand) 10%, transparent);
+  --accent-a6:  color-mix(in oklch, var(--accent-brand) 20%, transparent);
+  --accent-a8:  color-mix(in oklch, var(--accent-brand) 35%, transparent);
+  --accent-a10: color-mix(in oklch, var(--accent-brand) 60%, transparent);
+  --accent-a12: color-mix(in oklch, var(--accent-brand) 90%, transparent);
 
-  /* Glass-bg: neutral grå-tint mot ljus page (iOS UIBlurEffect-konvention).
-     App-base sätter surface-raised 65% som vinner annars över
-     [data-theme="light"]. */
-  --glass-bg:         color-mix(in oklch, var(--gray-light-6) 55%, transparent);
+  --surface-page:     var(--warm-page);
+  --surface-default:  var(--warm-section);
+  --surface-raised:   var(--warm-card);
+  --surface-elevated: var(--warm-card);
+  --surface-overlay:  var(--warm-overlay);
+  --surface-hover:    var(--warm-hover);
+  --surface-active:   var(--warm-active);
+  --surface-sunken:   var(--warm-sunken);
 
-  /* Border-focus: Plum accent */
-  --border-focus:     var(--plum-light-8);
+  --text-default:   var(--ink);
+  --text-on-accent: var(--warm-overlay);
+  --glass-bg:       color-mix(in oklch, var(--taupe) 55%, transparent);
+  --border-focus:   var(--accent-brand);
 }

package/css/apps/jubb.css

@@ -53,49 +53,36 @@
 }
 
 
-/* Light mode-override per app - Blue Light-rampen + Blue-tonad page.
-   Konsumeras när <html data-app="jubb" data-theme="light">. Se ADR 0028.
-
-   (0,2,0) specificity - vinner garanterat över både [data-app]-block
-   och [data-theme]-block var för sig. Alla tokens som [data-app="jubb"]
-   sätter måste även sättas här för light mode - annars vinner app-base
-   över semantic [data-theme="light"]-overriden via load-order. */
+/* Light mode - delat ljust standardtema (cream + indigo). Se ADR 0028.
+   Jubb har ingen egen ljus-identitet längre: detta block pekar om allt
+   [data-app="jubb"] sätter i mörkt (accent, ytor, text, glas) till de
+   delade brand/warm-värdena. (0,2,0, olagrat) vinner. Resten ärvs från
+   [data-theme="light"] i 10-semantic.css. */
 [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-toningar för alla 8 nivåer. Måste sättas här -
-     app-base sätter blue-N (dark-rampen) och vinner annars över
-     [data-theme="light"]-overriden i 10-semantic.css. */
-  --surface-page:     var(--blue-light-1);
-  --surface-default:  var(--blue-light-2);
-  --surface-raised:   var(--blue-light-3);
-  --surface-elevated: var(--blue-light-4);
-  --surface-overlay:  var(--blue-light-5);
-  --surface-hover:    var(--blue-light-4);
-  --surface-active:   var(--blue-light-5);
-  --surface-sunken:   var(--blue-light-1);
-
-  /* Text-default: mörk i light. App-base sätter Jubbs varma vit
-     #EEF4FF som vinner annars över [data-theme="light"]. */
-  --text-default:     var(--gray-light-12);
+  --accent-soft:     color-mix(in oklch, var(--accent-brand) 10%, transparent);
+  --accent-moderate: color-mix(in oklch, var(--accent-brand) 16%, transparent);
+  --accent-9:        var(--accent-brand);
+  --accent-10:       var(--accent-brand-hover);
+  --accent-text:     var(--accent-brand);
+  --accent-a1:  color-mix(in oklch, var(--accent-brand) 3%, transparent);
+  --accent-a2:  color-mix(in oklch, var(--accent-brand) 5%, transparent);
+  --accent-a3:  color-mix(in oklch, var(--accent-brand) 10%, transparent);
+  --accent-a6:  color-mix(in oklch, var(--accent-brand) 20%, transparent);
+  --accent-a8:  color-mix(in oklch, var(--accent-brand) 35%, transparent);
+  --accent-a10: color-mix(in oklch, var(--accent-brand) 60%, transparent);
+  --accent-a12: color-mix(in oklch, var(--accent-brand) 90%, transparent);
 
-  /* Glass-bg: neutral grå-tint mot ljus page (iOS UIBlurEffect-konvention).
-     App-base sätter surface-raised 65% som vinner annars över
-     [data-theme="light"]. */
-  --glass-bg:         color-mix(in oklch, var(--gray-light-6) 55%, transparent);
+  --surface-page:     var(--warm-page);
+  --surface-default:  var(--warm-section);
+  --surface-raised:   var(--warm-card);
+  --surface-elevated: var(--warm-card);
+  --surface-overlay:  var(--warm-overlay);
+  --surface-hover:    var(--warm-hover);
+  --surface-active:   var(--warm-active);
+  --surface-sunken:   var(--warm-sunken);
 
-  /* Border-focus: Blue accent */
-  --border-focus:     var(--blue-light-8);
+  --text-default:   var(--ink);
+  --text-on-accent: var(--warm-overlay);
+  --glass-bg:       color-mix(in oklch, var(--taupe) 55%, transparent);
+  --border-focus:   var(--accent-brand);
 }

package/css/apps/klodd.css

@@ -35,3 +35,27 @@
   --accent-a10: var(--indigo-a10);
   --accent-a12: var(--indigo-a12);
 }
+
+
+/* Light mode - delat ljust standardtema (cream + indigo). Klödd är
+   referensappen. Re-deklarerar allt [data-app="klodd"] sätter ovan med
+   brand-värden (0,2,0 vinner, olagrat -> slår token-lagret). Ytor/text/
+   ramar ärvs från [data-theme="light"] i 10-semantic.css. Se ADR 0028. */
+[data-app="klodd"][data-theme="light"] {
+  --accent-soft:     color-mix(in oklch, var(--accent-brand) 10%, transparent);
+  --accent-moderate: color-mix(in oklch, var(--accent-brand) 16%, transparent);
+  --accent-9:        var(--accent-brand);
+  --accent-10:       var(--accent-brand-hover);
+  --accent-text:     var(--accent-brand);
+  --accent-a1:  color-mix(in oklch, var(--accent-brand) 3%, transparent);
+  --accent-a2:  color-mix(in oklch, var(--accent-brand) 5%, transparent);
+  --accent-a3:  color-mix(in oklch, var(--accent-brand) 10%, transparent);
+  --accent-a6:  color-mix(in oklch, var(--accent-brand) 20%, transparent);
+  --accent-a8:  color-mix(in oklch, var(--accent-brand) 35%, transparent);
+  --accent-a10: color-mix(in oklch, var(--accent-brand) 60%, transparent);
+  --accent-a12: color-mix(in oklch, var(--accent-brand) 90%, transparent);
+
+  --surface-raised: var(--warm-card);
+  --text-on-accent: var(--warm-overlay);
+  --border-focus:   var(--accent-brand);
+}

package/js/turbo-nav.js

@@ -66,6 +66,15 @@
 	let currentController = null;
 	let inFlightSwap = null; // Promise som resolvar nar pagaende VT/swap ar klar.
 
+	/*--------------------------------------------------------------
+	 Track senaste pathname+search sa popstate-handlern kan skilja
+	 mellan riktig back/forward-nav (path/search andras) och hash-
+	 only-nav (browser default scroll-to-anchor + hashchange). Vid
+	 hash-only ska turbo INTE fetch+swap - det skulle overrida
+	 browser-default-scrollen med scrollTo(0, cachedScroll=0).
+	--------------------------------------------------------------*/
+	let lastPathSearch = window.location.pathname + window.location.search;
+
 	/*--------------------------------------------------------------
 	 Lank-eligibility: ska denna <a> hanteras av Turbo eller browsern?
 	--------------------------------------------------------------*/
@@ -316,6 +325,13 @@
 				history.pushState( mergeState( { scrollY: 0 } ), '', finalUrl );
 			}
 
+			// Spara nya path+search sa popstate-handlern kan upptacka
+			// hash-only-navigations (path/search aterstaller, bara hash byter).
+			try {
+				const parsed = new URL( finalUrl );
+				lastPathSearch = parsed.pathname + parsed.search;
+			} catch ( _ ) { /* ignore */ }
+
 			// Notify subscribers (nav-optimistic.js, hero-roll.js, future modules).
 			document.dispatchEvent( new CustomEvent( 'turbo:navigated', {
 				detail: { url: finalUrl, fromUrl: fromUrl, popstate: !! options.popstate },
@@ -357,8 +373,26 @@
 	 turbo: true via mergeState sa popstate-handling vet att vi ar
 	 i turbo-modell hela vagen. Browser-internals (scroll-cache,
 	 etc.) bevaras eftersom vi merge:ar istallet for replace:ar.
+
+	 Chrome firar popstate aven for hash-only-navs pa samma
+	 dokument (a href="#x"-klick laggs som history-entry + ev.
+	 popstate beroende pa browser-version). Vi vill INTE turbo-
+	 fetch+swap i de fallen - browser default-scroll till anchor
+	 + hashchange-event hanterar det helt natively. Att fetch+swap
+	 trots det leder till scrollTo(0, 0) i swap-callbacken (state
+	 null fran browser-skapad entry), vilket overrider anchor-
+	 scrollen och blir "scrollade tillbaka till toppen"-bugg.
+
+	 Detektion: jamfor nuvarande pathname+search mot lastPathSearch
+	 (updateras vid varje lyckad navigateTo). Identiska = hash-only.
 	--------------------------------------------------------------*/
 	window.addEventListener( 'popstate', function () {
+		const currentPathSearch = window.location.pathname + window.location.search;
+		if ( currentPathSearch === lastPathSearch ) {
+			// Hash-only-nav pa samma dokument - browser default + hashchange
+			// gor jobbet. Inget att swappa.
+			return;
+		}
 		navigateTo( window.location.href, { popstate: true } );
 	} );
 

package/package.json

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

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

@@ -35,3 +35,26 @@ Primitives-grund: 78 Radix Light-variabler i 00-primitives.css
 - 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
+
+## Amendering 2026-07-01 - ett delat ljust standardtema
+
+Ljusläget är inte längre per-app. Det finns ETT ljust tema, delat av alla
+appar: ett klodd.io-inspirerat varmt cream-tema med indigo brand-accent
+(#433CAF) använd mycket sparsamt. Ingen sekundärfärg.
+
+- Neutralerna är custom varma värden (`--warm-*`, `--ink*`, `--taupe*` i
+  00-primitives.css), INTE Radix Mauve Light - avsteg från ADR 0006/0003
+  enbart i ljusläge. Dark mode behåller Mauve/Radix oförändrat.
+- Accenten är delad indigo (`--accent-brand`) för alla appar i ljus.
+  Per-app-accenterna (Jubb blå, Ekonom plum) gäller bara i dark.
+- Cascade: app-base `[data-app=X]` (olagrat i konsument-appen) vinner över
+  det lagrade `[data-theme="light"]`-blocket, så varje apps
+  `[data-app=X][data-theme="light"]` pekar om sina dark-overrides (accent,
+  ytor, text, glas) till de delade warm/brand-värdena. Tre block, identiska
+  värden -> ett tema. Det shared `[data-theme="light"]`-blocket bär ramar,
+  status, shadow och är fallback.
+- `text-on-accent` är ljus (varm vit) eftersom brand-accenten är mörk indigo,
+  till skillnad från de tidigare ljusa per-app-accenterna.
+
+Status: live i Kommers (`data-app="klodd" data-theme="light"`) från
+2026-07-01. Jubb/Ekonom ärver temat vid nästa build:ds (ljus ej aktivt där).