@klodd/ds 1.1.0 → 1.2.0

package/css/00-primitives.css

@@ -47,6 +47,28 @@
 }
 
 
+/* ================================================================
+   ==== COLORS - GRAY ALPHA (Radix Mauve Dark Alpha)
+   Pre-kalibrerade alpha-varianter for subtila tints over komplexa
+   bakgrunder (gradients, bilder, semi-transparenta overlays).
+   Officiella Radix-varden - perceptuellt korrekt over olika ytor.
+   ================================================================ */
+:root {
+  --gray-a1:  #00000000;
+  --gray-a2:  #f5f4f609;
+  --gray-a3:  #ebeaf814;
+  --gray-a4:  #eee5f81d;
+  --gray-a5:  #efe6fe25;
+  --gray-a6:  #f1e6fd30;
+  --gray-a7:  #eee9ff40;
+  --gray-a8:  #eee7ff5d;
+  --gray-a9:  #eae6fd6e;
+  --gray-a10: #ece9fd7c;
+  --gray-a11: #f5f1ffb7;
+  --gray-a12: #fdfdffef;
+}
+
+
 /* ================================================================
    ==== COLORS - BLUE (Radix Blue Dark - Jubb accent)
    Officiella Radix-varden. Step 9 = "Brand-blue" sky-tonad,
@@ -68,6 +90,26 @@
 }
 
 
+/* ================================================================
+   ==== COLORS - BLUE ALPHA (Radix Blue Dark Alpha)
+   Officiella Radix-varden. Anvands av Jubbs accent-alpha-tokens.
+   ================================================================ */
+:root {
+  --blue-a1:  #004df211;
+  --blue-a2:  #1166fb18;
+  --blue-a3:  #0077ff3a;
+  --blue-a4:  #0075ff57;
+  --blue-a5:  #0081fd6b;
+  --blue-a6:  #0f89fd7f;
+  --blue-a7:  #2a91fe98;
+  --blue-a8:  #3094feb9;
+  --blue-a9:  #0090ff;
+  --blue-a10: #3b9eff;
+  --blue-a11: #70b8ff;
+  --blue-a12: #c2e6ff;
+}
+
+
 /* ================================================================
    ==== COLORS - PURPLE (Radix Violet Dark)
    Officiella Radix-varden. Behalls i shared-system for framtida
@@ -110,6 +152,26 @@
 }
 
 
+/* ================================================================
+   ==== COLORS - PLUM ALPHA (Radix Plum Dark Alpha)
+   Officiella Radix-varden. Anvands av Ekonoms accent-alpha-tokens.
+   ================================================================ */
+:root {
+  --plum-a1:  #f112f108;
+  --plum-a2:  #f22ff211;
+  --plum-a3:  #fd4cfd27;
+  --plum-a4:  #f646ff3a;
+  --plum-a5:  #f455ff48;
+  --plum-a6:  #f66dff56;
+  --plum-a7:  #f07cfd70;
+  --plum-a8:  #ee84ff95;
+  --plum-a9:  #e961feb6;
+  --plum-a10: #ed70ffc0;
+  --plum-a11: #f19cfef3;
+  --plum-a12: #feddfef4;
+}
+
+
 /* ================================================================
    ==== COLORS - STATUS (Radix dark-skalor, step 9)
    Officiella Radix-varden. Text-on-status hardkodad i semantic.

package/css/10-semantic.css

@@ -149,10 +149,19 @@
      INTE for: text pa --accent-9-bakgrund (anvand --text-on-accent). */
   --accent-text:     var(--blue-11);
 
-  /* Alpha-varianter via color-mix() - inga hardkodade rgba. */
-  --accent-a10: color-mix(in oklch, var(--accent-9) 10%, transparent);
-  --accent-a20: color-mix(in oklch, var(--accent-9) 20%, transparent);
-  --accent-a40: color-mix(in oklch, var(--accent-9) 40%, transparent);
+  /* Accent alpha-skalan (Radix-konvention).
+     Pre-kalibrerade transparent-tints over komplexa bakgrunder.
+     Step-mappning samma som solid-skalan: a1-2 app-bg, a3 vila,
+     a4-5 hover/active, a6 subtil border, a7-8 stark border, a9-10
+     solid (saknar mening som alpha), a11-12 text.
+     Genereras fran accent-fargens alpha-variant - overrides per app. */
+  --accent-a1:  var(--blue-a1);
+  --accent-a2:  var(--blue-a2);
+  --accent-a3:  var(--blue-a3);
+  --accent-a6:  var(--blue-a6);
+  --accent-a8:  var(--blue-a8);
+  --accent-a10: var(--blue-a10);
+  --accent-a12: var(--blue-a12);
 
 
   /* ================================================================
@@ -306,34 +315,83 @@
 }
 
 
+/* ================================================================
+   ==== HIGH CONTRAST MODE (prefers-contrast: more)
+   Stärker borders och text-muted/-subtle for anvandare som har
+   high-contrast pa OS-niva. Paverkar inte farger - bara gransvarden
+   sa svaga subtila element blir mer urskiljbara.
+
+   Anvandning kraver inget komponentkod-arbete - alla komponenter
+   refererar redan dessa semantic tokens, sa overrides slar genom
+   automatiskt.
+   ================================================================ */
+@media (prefers-contrast: more) {
+  :root {
+    --border-subtle:  var(--gray-7);
+    --border-default: var(--gray-8);
+    --border-strong:  var(--gray-9);
+    --text-muted:     var(--gray-10);
+    --text-subtle:    var(--gray-11);
+  }
+}
+
+
 /* ================================================================
    ==== LIGHT MODE (data-theme="light")
-   Overrider ytor, text och borders. Accent justeras ett steg ljusare
+   Overrider ytor, text och borders. Accent justeras ett steg morkare
    for batter kontrast pa ljus bakgrund. Komponenter behover inga
    andringar - alla refererar bara semantic tokens.
+
+   STATUS: forberedd, inte aktivt produktion-verifierad. Dokumenterad
+   som "Punkt J" i AUDIT.md. Tokens som inte overrides her arver
+   default-blocket (dark-values) - kanda begransningar:
+   - alpha-tokens (--accent-a*) anvander dark-Radix-alpha-skalor;
+     bor importera light-skalor for full paritet
+   - --shadow-float ar kalibrerad for dark-mode (synlig pa ljus bg
+     men kan behova mindre opacity)
+   - --hero-glow gradient anvander accent som ar morkare i light;
+     eventuellt for mattat
    ================================================================ */
 [data-theme="light"] {
+  /* Surfaces - Material-/Aksel-stil dar morkare = upphojt.
+     I dark var det tvartom (ljusare = upphojt). I light fungerar det
+     sa har eftersom skuggor ar mer subtila pa ljus bakgrund. */
   --surface-page:    oklch(0.99 0.002 250);
   --surface-default: oklch(0.96 0.003 250);
-  --surface-raised:  oklch(0.99 0.002 250);
-  --surface-overlay: oklch(0.93 0.004 250);
+  --surface-raised:  oklch(1.00 0.002 250);   /* nastan vit kort over light bg */
+  --surface-overlay: oklch(0.99 0.002 250);   /* morkare i z-stack via shadow */
   --surface-hover:   oklch(0.93 0.004 250);
   --surface-active:  oklch(0.88 0.005 250);
   --surface-sunken:  oklch(0.94 0.003 250);
 
+  /* Text - inverterad mauve-skala. */
   --text-default:   var(--gray-1);
   --text-subtle:    var(--gray-3);
   --text-muted:     var(--gray-6);
   --text-disabled:  var(--gray-8);
 
+  /* Text-on-* - i light har vi morkare accent (blue-8) men ljusare
+     status-bg som kan behova morkare text. Behaller vit eftersom
+     accent-8 + status-9 fortfarande ar tillrackligt morka. */
+  --text-on-accent:  oklch(0.98 0 0);
+  --text-on-status:  oklch(0.98 0 0);
+
+  /* Borders - inverterad mauve-skala. */
   --border-subtle:  var(--gray-9);
   --border-default: var(--gray-8);
   --border-strong:  var(--gray-7);
 
-  /* Accent justeras ett steg for batter kontrast i light. */
-  --accent-9:    var(--blue-8);
-  --accent-10:   var(--blue-9);
-  --accent-text: var(--blue-9);
+  /* Accent - ett steg morkare for batter kontrast pa ljus bg.
+     Plus accent-soft/moderate som ger korrekt subtil tint. */
+  --accent-soft:     var(--blue-2);
+  --accent-moderate: var(--blue-3);
+  --accent-9:        var(--blue-8);
+  --accent-10:       var(--blue-9);
+  --accent-text:     var(--blue-9);
+
+  /* Status solid - behaller dark-step-9 eftersom dessa farger ar
+     val-kalibrerade och fungerar pa bade ljus och mork bakgrund. */
+  /* --bg-success, --bg-warning, --bg-danger arvs fran default. */
 }
 
 
@@ -366,27 +424,30 @@
   --text-tertiary:  var(--text-muted);
   --text-faint:     var(--text-disabled);
 
-  /* Accent - gamla --accent (singular) mappas mot nya --accent-9. */
+  /* Accent - gamla --accent (singular) mappas mot nya --accent-9.
+     --accent-dim/-border foljde gamla 20%/40%-konventionen, mappas
+     nu mot Radix-skalans steg 3 (subtil) och 6 (border-emphasis). */
   --accent:           var(--accent-9);
   --accent-hover:     var(--accent-10);
   --accent-strong:    var(--accent-9);
   --accent-secondary: var(--accent-9);
-  --accent-dim:       var(--accent-a20);
-  --accent-border:    var(--accent-a40);
+  --accent-dim:       var(--accent-a3);
+  --accent-border:    var(--accent-a6);
 
-  /* Accent-link - gamla cirkelknapps-tokens. Mappas mot accent-systemet. */
+  /* Accent-link - gamla cirkelknapps-tokens. Mappas mot accent-systemet.
+     Gamla 10/20/40%-stegen mappas mot nya Radix-stegen 2/3/6. */
   --accent-link:              var(--accent-text);
-  --accent-link-bg:           var(--accent-a10);
-  --accent-link-bg-hover:     var(--accent-a20);
-  --accent-link-border:       var(--accent-a20);
-  --accent-link-border-hover: var(--accent-a40);
+  --accent-link-bg:           var(--accent-a2);
+  --accent-link-bg-hover:     var(--accent-a3);
+  --accent-link-border:       var(--accent-a3);
+  --accent-link-border-hover: var(--accent-a6);
 
   /* Audit-aliaser fran 2026-05-07 - ofta refererade utan att vara definierade. */
   --text:        var(--text-default);
   --border:      var(--border-default);
   --surface-2:   var(--surface-default);
   --surface-3:   var(--surface-raised);
-  --accent-rgba: var(--accent-a20);
+  --accent-rgba: var(--accent-a3);
 
   /* Radius - gamla t-shirt-namn mappas mot nya pixel-numeriska. */
   --radius-xs:   var(--radius-2);

package/css/apps/ekonom.css

@@ -35,4 +35,13 @@
   /* Text - Ekonoms varma vit (lite lila-tonad) istallet for Mauve-12.
      Bevarar den karaktaren som Ekonom haft sedan tidigt. */
   --text-default: #F4F2FA;
+
+  /* Accent alpha - Radix Plum Dark Alpha. Override pa default-Blue. */
+  --accent-a1:  var(--plum-a1);
+  --accent-a2:  var(--plum-a2);
+  --accent-a3:  var(--plum-a3);
+  --accent-a6:  var(--plum-a6);
+  --accent-a8:  var(--plum-a8);
+  --accent-a10: var(--plum-a10);
+  --accent-a12: var(--plum-a12);
 }

package/css/components/badge.css

@@ -53,8 +53,8 @@
 
 .badge--accent {
   color: var(--accent-text);
-  background: var(--accent-a10);
-  border-color: var(--accent-a40);
+  background: var(--accent-a2);
+  border-color: var(--accent-a6);
 }
 
 

package/css/components/divider.css

@@ -0,0 +1,25 @@
+/* ================================================================
+   components/divider.css
+   Horisontell eller vertikal separator. Anvands mellan sektioner,
+   list-grupper, eller inom sheets/cards. Tva styrkor (subtle/strong).
+
+   Default ar horisontell. Modifier --vertical for sidled. Modifier
+   --strong for hogre kontrast (anvand sparsamt - subtle ar default).
+   ================================================================ */
+.divider {
+  border: none;
+  border-top: 1px solid var(--border-subtle);
+  margin: var(--space-16) 0;
+}
+
+.divider--vertical {
+  border-top: none;
+  border-left: 1px solid var(--border-subtle);
+  height: 100%;
+  margin: 0 var(--space-16);
+  align-self: stretch;
+}
+
+.divider--strong {
+  border-color: var(--border-default);
+}

package/css/components/dropdown.css

@@ -0,0 +1,88 @@
+/* ================================================================
+   components/dropdown.css
+   Kontextuell meny. Wrapper med trigger + .dropdown-menu som
+   visas via .is-open-toggling fran JS.
+
+   Markup-pattern:
+     <div class="dropdown" data-dropdown>
+       <button class="btn btn--icon" data-dropdown-trigger>...</button>
+       <div class="dropdown-menu" role="menu">
+         <button class="dropdown-item" role="menuitem">Item 1</button>
+         <hr class="dropdown-divider">
+         <button class="dropdown-item dropdown-item--danger">Ta bort</button>
+       </div>
+     </div>
+
+   JS togglar .is-open pa .dropdown-element. Inga inline-styles
+   (CSP-safe). Stang via klick utanfor / Escape via JS-helper.
+   ================================================================ */
+.dropdown {
+  position: relative;
+  display: inline-flex;
+}
+
+.dropdown-menu {
+  position: absolute;
+  top: calc(100% + var(--space-4));
+  left: 0;
+  min-width: 160px;
+  background: var(--surface-overlay);
+  border: 1px solid var(--border-default);
+  border-radius: var(--radius-10);
+  padding: var(--space-4) 0;
+  box-shadow: 0 4px 16px color-mix(in oklch, black 40%, transparent);
+  z-index: var(--z-dropdown, 100);
+  display: none;
+}
+
+.dropdown.is-open .dropdown-menu {
+  display: block;
+}
+
+.dropdown-item {
+  display: flex;
+  align-items: center;
+  gap: var(--space-8);
+  width: 100%;
+  padding: var(--space-8) var(--space-12);
+  font-family: inherit;
+  font-size: var(--fs-14);
+  color: var(--text-default);
+  background: transparent;
+  border: 0;
+  text-align: left;
+  cursor: pointer;
+  transition: background var(--dur-fast) var(--ease-out);
+}
+
+@media (hover: hover) and (pointer: fine) {
+  .dropdown-item:hover {
+    background: var(--surface-hover);
+  }
+}
+
+.dropdown-item:active {
+  background: var(--surface-active);
+}
+
+.dropdown-item:focus-visible {
+  outline: 2px solid var(--border-focus);
+  outline-offset: -2px;
+}
+
+.dropdown-item[disabled],
+.dropdown-item:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.dropdown-item--danger {
+  color: var(--bg-danger);
+}
+
+.dropdown-divider {
+  border: none;
+  border-top: 1px solid var(--border-subtle);
+  margin: var(--space-4) 0;
+}

package/css/components/feedback.css

@@ -53,6 +53,12 @@
   100% { opacity: 1; transform: translateY(0) scale(1); }
 }
 
+@media (prefers-reduced-motion: reduce) {
+  .toast {
+    animation: none;
+  }
+}
+
 
 /* ================================================================
    ==== EMPTY-STATE

package/css/components/input.css

@@ -65,7 +65,7 @@
 .textarea:focus,
 .select:focus {
   border-color: var(--accent-9);
-  box-shadow: 0 0 0 3px var(--accent-a20);
+  box-shadow: 0 0 0 3px var(--accent-a3);
   background: var(--surface-default);
 }
 

package/css/components/overlay.css

@@ -21,6 +21,9 @@ dialog.sheet::backdrop {
   background: color-mix(in oklch, var(--surface-page) 60%, transparent);
   -webkit-backdrop-filter: blur(4px);
   backdrop-filter: blur(4px);
+  /* Klickbar yta - JS lyssnar pa backdrop-klick for stang-action.
+     Signalerar interaktivitet visuellt via cursor. */
+  cursor: pointer;
 }
 
 

package/css/components/progress.css

@@ -0,0 +1,39 @@
+/* ================================================================
+   components/progress.css
+   Linjar progress-indikator. Anvands for budget-burndown, upload-
+   status, multi-step-flows. Modifiers for status-fargning.
+
+   .progress ar wrappern (track), .progress-bar ar fyllnaden.
+   Sätt width via inline style eller data-attribut + JS (CSP-safe).
+
+   Brief-pattern fran Ekonom:
+     <div class="progress">
+       <div class="progress-bar progress-bar--warning"
+            data-bar-width="73%"></div>
+     </div>
+   bar-styles.js applicerar style.width fran data-bar-width.
+   ================================================================ */
+.progress {
+  width: 100%;
+  height: var(--space-6);
+  background: var(--surface-raised);
+  border-radius: var(--radius-full);
+  overflow: hidden;
+}
+
+.progress-bar {
+  height: 100%;
+  background: var(--accent-9);
+  border-radius: var(--radius-full);
+  transition: width var(--dur-base) var(--ease-out);
+}
+
+.progress-bar--success { background: var(--bg-success); }
+.progress-bar--warning { background: var(--bg-warning); }
+.progress-bar--danger  { background: var(--bg-danger); }
+
+@media (prefers-reduced-motion: reduce) {
+  .progress-bar {
+    transition: none;
+  }
+}

package/css/components/tooltip.css

@@ -0,0 +1,50 @@
+/* ================================================================
+   components/tooltip.css
+   Kortfattad hjalptext vid hover/focus. Pure CSS - ingen JS.
+
+   Markup-pattern:
+     <span class="tooltip-wrapper">
+       <button class="btn btn--icon">...</button>
+       <span class="tooltip" role="tooltip">Hjalptext har</span>
+     </span>
+
+   Tooltip visas vid hover OCH focus-within sa tangentbordsanvandare
+   far samma feedback som musanvandare. Pointer-events:none pa
+   tooltip-elementet sa det inte snor klick fran wrappern.
+
+   prefers-reduced-motion respekteras (opacity-fade tas bort).
+   ================================================================ */
+.tooltip-wrapper {
+  position: relative;
+  display: inline-flex;
+}
+
+.tooltip {
+  position: absolute;
+  bottom: calc(100% + var(--space-6));
+  left: 50%;
+  transform: translateX(-50%);
+  background: var(--surface-overlay);
+  color: var(--text-default);
+  font-size: var(--fs-12);
+  line-height: var(--lh-snug);
+  padding: var(--space-4) var(--space-8);
+  border-radius: var(--radius-6);
+  border: 1px solid var(--border-default);
+  white-space: nowrap;
+  pointer-events: none;
+  opacity: 0;
+  transition: opacity var(--dur-fast) var(--ease-out);
+  z-index: var(--z-tooltip, 50);
+}
+
+.tooltip-wrapper:hover .tooltip,
+.tooltip-wrapper:focus-within .tooltip {
+  opacity: 1;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .tooltip {
+    transition: none;
+  }
+}

package/css/index.css

@@ -26,3 +26,7 @@
 @import './components/overlay.css';
 @import './components/icon.css';
 @import './components/hero-roll.css';
+@import './components/divider.css';
+@import './components/progress.css';
+@import './components/tooltip.css';
+@import './components/dropdown.css';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@klodd/ds",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "description": "Klodd Design System - shared tokens, typography, and components for Jubb, Ekonom, and future apps",
   "main": "css/index.css",
   "files": [