@klodd/ds 1.1.0 → 3.0.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/base/layout.css

@@ -0,0 +1,45 @@
+/* ================================================================
+   base/layout.css
+   App-niva-layout: main-content, page-header, page-title.
+   Anvands som default-skelett pa varje vy.
+   ================================================================ */
+.main-content {
+  max-width: var(--content-max-default, 600px);
+  margin: 0 auto;
+  padding: calc(var(--safe-top) + var(--space-16)) var(--space-14) var(--bottom-nav-clearance);
+  position: relative;
+  min-height: calc(100dvh - var(--bottom-nav-clearance));
+}
+
+.main-content--narrow { max-width: var(--content-max-narrow, 480px); }
+.main-content--wide   { max-width: var(--content-max-wide, 800px); }
+
+.page-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-12);
+  margin-bottom: var(--space-16);
+  flex-wrap: wrap;
+}
+
+.page-title {
+  font-size: var(--fs-22);
+  font-weight: var(--fw-medium);
+  letter-spacing: var(--ls-tight);
+  color: var(--text-default);
+  margin: 0;
+}
+
+.page-subtitle {
+  font-size: var(--fs-13);
+  color: var(--text-subtle);
+  margin-top: var(--space-2);
+}
+
+.split-grid {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: var(--space-12);
+  margin-bottom: var(--space-14);
+}

package/css/components/auth.css

@@ -0,0 +1,28 @@
+/* ================================================================
+   components/auth.css
+   Centrerad layout for inloggning + onboarding.
+   ================================================================ */
+.auth-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  min-height: 70vh;
+  gap: var(--space-8);
+  padding: var(--space-20);
+  text-align: center;
+}
+
+.auth-container__title {
+  font-size: var(--fs-22);
+  font-weight: var(--fw-medium);
+  letter-spacing: var(--ls-tight);
+  color: var(--text-default);
+  margin: 0;
+}
+
+.auth-container__subtitle {
+  color: var(--text-subtle);
+  margin: 0 0 var(--space-24);
+  font-size: var(--fs-13);
+}

package/css/components/avatar.css

@@ -0,0 +1,31 @@
+/* ================================================================
+   components/avatar.css
+   Cirkular initial-avatar. Modifier --lg pa profil-vyer.
+   ================================================================ */
+.avatar {
+  width: 36px;
+  height: 36px;
+  border-radius: var(--radius-full);
+  background: linear-gradient(135deg, var(--accent-9) 0%, var(--accent-10) 100%);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  color: var(--text-on-accent);
+  font-size: var(--fs-15);
+  font-weight: var(--fw-medium);
+  text-transform: uppercase;
+  line-height: var(--lh-tight);
+}
+
+.avatar--sm {
+  width: 28px;
+  height: 28px;
+  font-size: var(--fs-12);
+}
+
+.avatar--lg {
+  width: 56px;
+  height: 56px;
+  font-size: var(--fs-24);
+}

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/banner.css

@@ -0,0 +1,63 @@
+/* ================================================================
+   components/banner.css
+   .banner ar bred informations-rad med titel + sub + content.
+   Modifiers: --hero, --accent, --positive, --negative, --warning.
+   BEM: .banner__title, .banner__sub, .banner__content.
+   ================================================================ */
+.banner {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-14);
+  padding: var(--space-14) var(--space-16);
+  border-radius: var(--radius-16);
+  margin-bottom: var(--space-14);
+  background: var(--surface-raised);
+  border: 1px solid var(--border-subtle);
+}
+
+.banner__content {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
+  min-width: 0;
+}
+
+.banner__title {
+  font-size: var(--fs-14);
+  font-weight: var(--fw-medium);
+  color: var(--text-default);
+  margin: 0;
+}
+
+.banner__sub {
+  font-size: var(--fs-12);
+  color: var(--text-subtle);
+}
+
+.banner--accent {
+  background: var(--accent-a3);
+  border-color: var(--accent-a6);
+}
+
+.banner--positive {
+  background: var(--positive-dim);
+  border-color: var(--positive-border);
+}
+
+.banner--negative {
+  background: var(--negative-dim);
+  border-color: var(--negative-border);
+}
+
+.banner--warning {
+  background: var(--warning-dim);
+  border-color: var(--warning-border);
+  border-left-width: 3px;
+}
+
+.banner--hero {
+  flex-direction: column;
+  align-items: flex-start;
+  padding: var(--space-20);
+}

package/css/components/chip.css

@@ -0,0 +1,257 @@
+/* ================================================================
+   components/chip.css
+   Sma status-pills. .chip ar bas. Modifiers: --accent, --positive,
+   --negative, --warning, --faint.
+
+   Plus relaterade pill-mont:
+   - .brand-pill: liten pill med projekt-namn
+   - .month-pill: navigations-pill for manads-byte
+   - .install-chip: PWA install-prompt floating-pill
+   - .score-pill: ratings-pill (variants --strong/--medium/--low)
+
+   .chip-list ar wrapper for flera chips i rad (form-edit-flode).
+   ================================================================ */
+.chip {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-6);
+  font-size: var(--fs-11);
+  font-weight: var(--fw-medium);
+  padding: var(--space-4) var(--space-10);
+  border-radius: var(--radius-full);
+  background: var(--surface-default);
+  color: var(--text-subtle);
+  border: 1px solid var(--border-subtle);
+  white-space: nowrap;
+}
+
+.chip::before {
+  content: '';
+  width: 6px;
+  height: 6px;
+  border-radius: var(--radius-full);
+  background: currentColor;
+  display: inline-block;
+  opacity: 0.75;
+}
+
+.chip--accent   { color: var(--accent-text); background: var(--accent-a3);  border-color: var(--accent-a6); }
+.chip--positive { color: var(--positive);    background: var(--positive-dim); border-color: var(--positive-border); }
+.chip--negative { color: var(--negative);    background: var(--negative-dim); border-color: var(--negative-border); }
+.chip--warning  { color: var(--warning);     background: var(--warning-dim);  border-color: var(--warning-border); }
+.chip--faint    { color: var(--text-muted);  background: transparent; border-color: var(--border-subtle); }
+
+.chip-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-8);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.chip-list__item {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-6);
+  height: 32px;
+  padding: 0 var(--space-12);
+  background: var(--surface-default);
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-full);
+  color: var(--text-default);
+  font-size: var(--fs-13);
+  font-family: inherit;
+  white-space: nowrap;
+}
+
+.chip-list__delete {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 18px;
+  height: 18px;
+  padding: 0;
+  background: transparent;
+  border: 0;
+  color: var(--text-muted);
+  cursor: pointer;
+  border-radius: 50%;
+  transition: background var(--dur-fast) var(--ease-default);
+}
+
+@media (hover: hover) and (pointer: fine) {
+  .chip-list__delete:hover {
+    background: color-mix(in oklch, var(--accent-danger) 15%, transparent);
+    color: var(--accent-danger);
+  }
+}
+
+.chip-list__add {
+  background: transparent;
+  border-style: dashed;
+  color: var(--text-subtle);
+  cursor: pointer;
+  font-weight: var(--fw-medium);
+  -webkit-tap-highlight-color: transparent;
+  touch-action: manipulation;
+  transition: background var(--dur-fast) var(--ease-default);
+}
+
+@media (hover: hover) and (pointer: fine) {
+  .chip-list__add:hover {
+    background: var(--surface-hover);
+    color: var(--text-default);
+    border-color: var(--text-muted);
+  }
+}
+
+
+/* ================================================================
+   ==== BRAND-PILL
+   Liten pill med projekt-namn i topbar.
+   ================================================================ */
+.brand-pill {
+  display: inline-flex;
+  align-items: center;
+  padding: var(--space-4) var(--space-12);
+  background: var(--surface-default);
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-full);
+  font-size: var(--fs-13);
+  font-weight: var(--fw-medium);
+  letter-spacing: var(--ls-snug);
+  color: var(--text-default);
+}
+
+
+/* ================================================================
+   ==== MONTH-PILL
+   Navigations-pill med manadsbyte (anvands i topbar pa Ekonom).
+   ================================================================ */
+.month-pill {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-6);
+  height: 28px;
+  padding: 0 var(--space-12);
+  background: var(--surface-default);
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-full);
+  font-size: var(--fs-12);
+  font-weight: var(--fw-medium);
+  color: var(--text-default);
+  cursor: pointer;
+  text-decoration: none;
+  white-space: nowrap;
+}
+
+
+/* ================================================================
+   ==== SCORE-PILL
+   Tabular-nums for sifferjustering. Modifiers: --strong/--medium/--low.
+   ================================================================ */
+.score-pill {
+  flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-size: var(--fs-11);
+  font-weight: var(--fw-medium);
+  font-variant-numeric: tabular-nums;
+  letter-spacing: var(--ls-wide, 0.01em);
+  padding: var(--space-2) var(--space-8);
+  border-radius: var(--radius-full);
+  border: 1px solid transparent;
+  white-space: nowrap;
+  line-height: 1.4;
+}
+
+.score-pill--strong {
+  color: var(--positive);
+  background: var(--positive-dim);
+  border-color: var(--positive-border);
+}
+
+.score-pill--medium {
+  color: var(--warning);
+  background: var(--warning-dim);
+  border-color: var(--warning-border);
+}
+
+.score-pill--low {
+  color: var(--text-muted);
+  background: var(--surface-default);
+  border-color: var(--border-subtle);
+}
+
+
+/* ================================================================
+   ==== INSTALL-CHIP
+   PWA install-prompt som flyter ovan bottom-nav.
+   ================================================================ */
+.install-chip {
+  position: fixed;
+  bottom: calc(84px + var(--safe-bottom));
+  left: var(--space-12);
+  right: var(--space-12);
+  max-width: 480px;
+  margin: 0 auto;
+  background: var(--surface-raised);
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-full);
+  padding: var(--space-10) var(--space-10) var(--space-10) var(--space-18);
+  display: flex;
+  align-items: center;
+  gap: var(--space-10);
+  font-size: var(--fs-13);
+  color: var(--text-default);
+  z-index: var(--z-overlay, 60);
+  animation: install-chip-up 0.28s var(--ease-out);
+  box-shadow: var(--shadow-float);
+}
+
+.install-chip__text { flex: 1; min-width: 0; }
+
+.install-chip__install {
+  background: var(--accent-9);
+  color: var(--text-on-accent);
+  border: none;
+  padding: var(--space-8) var(--space-14);
+  border-radius: var(--radius-full);
+  font-size: var(--fs-12);
+  font-weight: var(--fw-medium);
+  font-family: inherit;
+  cursor: pointer;
+  white-space: nowrap;
+  transition: background var(--dur-fast) var(--ease-default);
+}
+
+@media (hover: hover) and (pointer: fine) {
+  .install-chip__install:hover { background: var(--accent-10); }
+}
+
+.install-chip__dismiss {
+  background: transparent;
+  border: none;
+  color: var(--text-subtle);
+  font-size: var(--fs-18);
+  line-height: 1;
+  padding: var(--space-6) var(--space-10);
+  cursor: pointer;
+  min-width: 36px;
+  transition: color var(--dur-fast) var(--ease-default);
+}
+
+@media (hover: hover) and (pointer: fine) {
+  .install-chip__dismiss:hover { color: var(--text-default); }
+}
+
+@keyframes install-chip-up {
+  from { transform: translateY(calc(100% + 100px)); opacity: 0; }
+  to   { transform: translateY(0); opacity: 1; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .install-chip { animation: none; }
+}