@klodd/ds 3.2.0 → 3.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/css/00-primitives.css +13 -5
  2. package/css/10-semantic.css +51 -63
  3. package/css/apps/ekonom.css +1 -1
  4. package/package.json +1 -1
package/css/00-primitives.css CHANGED
@@ -149,6 +149,10 @@
149
149
  --plum-10: #b658c4; /* Solid hover */
150
150
  --plum-11: #e796f3; /* Accent text pa neutral */
151
151
  --plum-12: #f4d4f4;
152
+
153
+ /* Plum mellanniva - mellan plum-2 och plum-3, anvands av Ekonoms
154
+ surface-raised. Tidigare hardkodat #2a1a2e i apps/ekonom.css. */
155
+ --plum-2-5: oklch(0.24 0.048 295);
152
156
  }
153
157
 
154
158
 
@@ -258,9 +262,12 @@
258
262
  --ls-tracker-xl: 0.12em;
259
263
 
260
264
  /* Font-stack - Linear-stacken (Inter primar + SF Pro Display + system).
261
- Inter laddas via Google Fonts i base/typography.css om enheten saknar
262
- den. iOS-anvandare med Inter installerad far lokal kopia; ovriga far
263
- Google Fonts woff2 (kachas av PWA-SW). System-ui ar universell fallback. */
265
+ Inter laddas via Google Fonts ENBART om appen valjer att importera
266
+ base/typography.css. Jubb gor det. Ekonom valjer medvetet att INTE
267
+ importera den (Sprint D2-beslut: render-blocking-prestanda).
268
+
269
+ Stacken faller tillbaka till SF Pro Display pa iOS och system-ui pa
270
+ ovriga plattformar nar Inter inte ar tillganglig. */
264
271
  --font-sans:
265
272
  "Inter", "SF Pro Display", -apple-system,
266
273
  system-ui, "Segoe UI", Roboto, "Helvetica Neue",
@@ -386,8 +393,9 @@
386
393
 
387
394
  --touch-min: 44px;
388
395
 
389
- --bottom-nav-height: 80px;
390
- --bottom-nav-clearance: calc(var(--bottom-nav-height) + var(--space-12) + var(--safe-bottom) + var(--space-12));
396
+ /* Bottom-nav-tokens lever i 10-semantic.css som calc-baserade
397
+ (--touch-min + space). Tidigare hardkodade 80px har raderats
398
+ 2026-05-07 - en kalla av sanning, inga magic-numbers. */
391
399
  }
392
400
 
393
401
 
package/css/10-semantic.css CHANGED
@@ -18,44 +18,50 @@
18
18
  ==== SURFACES (NAV Aksel lagermodell)
19
19
  Ljusare = hogre i z-stacken. Inga skuggor i dark mode - bara
20
20
  luminanshierarki (iOS/Linear-modell, ej tonal Material Design).
21
+
22
+ light-dark() (Equinor EDS-konventionen, sprint 2026-05-07):
23
+ light-dark(<light-value>, <dark-value>)
24
+ browsern valjer baserat pa color-scheme. Standard ar `dark` for
25
+ alla Klodd-appar - light-mode aktiveras via [data-theme="light"]-
26
+ override som satter color-scheme: light.
21
27
  ================================================================ */
22
- :root,
23
- [data-theme="dark"] {
28
+ :root {
29
+ color-scheme: dark; /* default dark for alla Klodd-appar */
24
30
 
25
31
  /* Sidans yttersta bakgrund. Morkast av alla ytor.
26
32
  Anvand for: <html>, <body>, page-background.
27
33
  INTE for: kort, paneler, modaler. */
28
- --surface-page: var(--gray-1);
34
+ --surface-page: light-dark(oklch(0.99 0.002 250), var(--gray-1));
29
35
 
30
36
  /* Standard innehallsyta. Sektioner, list-rows.
31
37
  Anvand for: sektionsbakgrunder, tab-innehall, formulargrupper.
32
38
  INTE for: sidans yttersta bakgrund eller upphojda kort. */
33
- --surface-default: var(--gray-2);
39
+ --surface-default: light-dark(oklch(0.96 0.003 250), var(--gray-2));
34
40
 
35
41
  /* Upphojd yta - ett steg framfor default.
36
42
  Anvand for: kort, paneler, sidopaneler, jobbkort.
37
43
  INTE for: modaler och popovers (anvand --surface-overlay). */
38
- --surface-raised: var(--gray-3);
44
+ --surface-raised: light-dark(oklch(0.99 0.002 250), var(--gray-3));
39
45
 
40
46
  /* Svavande yta - modaler, popovers, dropdowns.
41
47
  Anvand for: dialog-bakgrund, tooltip, context-menu, sheets.
42
48
  INTE for: inbaddade kort (anvand --surface-raised). */
43
- --surface-overlay: var(--gray-4);
49
+ --surface-overlay: light-dark(oklch(0.93 0.004 250), var(--gray-4));
44
50
 
45
51
  /* Hover-state pa interaktiva ytor.
46
52
  Anvand for: :hover-bakgrund pa knappar, rader, kort.
47
53
  INTE for: statiska ytor eller fokus-states. */
48
- --surface-hover: var(--gray-4);
54
+ --surface-hover: light-dark(oklch(0.93 0.004 250), var(--gray-4));
49
55
 
50
56
  /* Active/pressed-state.
51
57
  Anvand for: :active-bakgrund, .nav-pod.active.
52
58
  INTE for: hover (anvand --surface-hover). */
53
- --surface-active: var(--gray-5);
59
+ --surface-active: light-dark(oklch(0.88 0.005 250), var(--gray-5));
54
60
 
55
61
  /* Nedsankt yta - inputs, textarea, kod-block.
56
62
  Anvand for: input-bakgrund, code-block, hbar-track.
57
63
  INTE for: interaktiva ytor som hover/active. */
58
- --surface-sunken: var(--gray-2);
64
+ --surface-sunken: light-dark(oklch(0.94 0.003 250), var(--gray-2));
59
65
 
60
66
 
61
67
  /* ================================================================
@@ -65,22 +71,22 @@
65
71
  /* Primar text. Rubriker, etiketter, viktig information.
66
72
  Anvand for: alla rubriker, knapptext, viktig metadata.
67
73
  INTE for: hjalptext, datum, placeholder. */
68
- --text-default: var(--gray-12);
74
+ --text-default: light-dark(var(--gray-12), var(--gray-12));
69
75
 
70
76
  /* Sekundar text. Datum, meta-info, subtexter.
71
77
  Anvand for: metadata, datum, kompletterande information.
72
78
  INTE for: rubriker eller primar information. */
73
- --text-subtle: var(--gray-11);
79
+ --text-subtle: light-dark(var(--gray-10), var(--gray-11));
74
80
 
75
81
  /* Muted text. Platshallare, hint-text, ts-stamps.
76
82
  Anvand for: placeholder, hint, micro-labels.
77
83
  INTE for: lasbar information med hog prioritet. */
78
- --text-muted: var(--gray-9);
84
+ --text-muted: light-dark(var(--gray-8), var(--gray-9));
79
85
 
80
86
  /* Disabled text. Inaktiva element, fade-out.
81
87
  Anvand for: disabled-state pa knappar/inputs, tx-meta-faint.
82
88
  INTE for: aktiva element. */
83
- --text-disabled: var(--gray-7);
89
+ --text-disabled: light-dark(var(--gray-6), var(--gray-7));
84
90
 
85
91
  /* Text pa solid accent-bakgrund (knapp, badge, score-pill).
86
92
  Anvand for: text inuti --accent-9-bakgrunder.
@@ -100,17 +106,17 @@
100
106
  /* Subtil border. Separatorer, dividers, list-row-borders.
101
107
  Anvand for: tunna dividers mellan sektioner, table-row-borders.
102
108
  INTE for: interaktiva element eller fokus. */
103
- --border-subtle: var(--gray-5);
109
+ --border-subtle: light-dark(var(--gray-9), var(--gray-5));
104
110
 
105
111
  /* Standard border. Kort, inputs i vila.
106
112
  Anvand for: kortkanter, input-borders, btn-borders.
107
113
  INTE for: fokus-states (anvand --border-focus). */
108
- --border-default: var(--gray-6);
114
+ --border-default: light-dark(var(--gray-8), var(--gray-6));
109
115
 
110
116
  /* Stark border. Emphasis, hover pa border.
111
117
  Anvand for: hover-state pa inputs, emphasis-borders.
112
118
  INTE for: vila-state (anvand --border-default). */
113
- --border-strong: var(--gray-7);
119
+ --border-strong: light-dark(var(--gray-7), var(--gray-7));
114
120
 
115
121
  /* Fokusring. Alltid synlig vid keyboard-navigation.
116
122
  Anvand for: :focus-visible outline.
@@ -289,7 +295,17 @@
289
295
  /* ================================================================
290
296
  ==== LAYOUT - app-niva-konstanter
291
297
  ================================================================ */
292
- --bottom-nav-height-semantic: calc(var(--touch-min) + var(--space-12));
298
+
299
+ /* Bottom-nav-hojd: enda kalla av sanning (konsoliderad 2026-05-07
300
+ fran tidigare dubbel-definition i 00-primitives.css). Calc-baserad
301
+ pa --touch-min + space sa den foljer designsystem-andringar
302
+ automatiskt. */
303
+ --bottom-nav-height: calc(var(--touch-min) + var(--space-12));
304
+
305
+ /* Bottom-nav-clearance: utrymme under nav for fixed-positioning +
306
+ safe-area pa iPhone notch-modeller. Anvands som body padding-bottom
307
+ i app-CSS sa scroll-content inte hamnar under nav. */
308
+ --bottom-nav-clearance: calc(var(--bottom-nav-height) + var(--space-12) + var(--safe-bottom) + var(--space-12));
293
309
  }
294
310
 
295
311
 
@@ -362,61 +378,33 @@
362
378
 
363
379
 
364
380
  /* ================================================================
365
- ==== LIGHT MODE (data-theme="light")
366
- Overrider ytor, text och borders. Accent justeras ett steg morkare
367
- for batter kontrast pa ljus bakgrund. Komponenter behover inga
368
- andringar - alla refererar bara semantic tokens.
369
-
370
- STATUS: forberedd, inte aktivt produktion-verifierad. Dokumenterad
371
- som "Punkt J" i AUDIT.md. Tokens som inte overrides her arver
372
- default-blocket (dark-values) - kanda begransningar:
373
- - alpha-tokens (--accent-a*) anvander dark-Radix-alpha-skalor;
374
- bor importera light-skalor for full paritet
375
- - --shadow-float ar kalibrerad for dark-mode (synlig pa ljus bg
376
- men kan behova mindre opacity)
377
- - --hero-glow gradient anvander accent som ar morkare i light;
378
- eventuellt for mattat
381
+ ==== EXPLICITA THEME-OVERRIDES (manuell toggle)
382
+ light-dark() i :root hanterar surface/text/border-tokens automatiskt
383
+ baserat pa color-scheme. Dessa overrides satter color-scheme explicit
384
+ sa app kan tvinga light eller dark oavsett system-preferens.
385
+
386
+ light-dark() hanterar INTE accent-tokens (de ar app-specifika via
387
+ apps/<X>.css). For light-mode kan accent behova justeras ett steg
388
+ morkare for kontrast pa ljus bg - dessa overrides lever har.
389
+
390
+ STATUS: Ekonom ar dark-only. light-mode-stod ar forberedt for
391
+ framtida sprintar i Jubb eller framtida apps.
379
392
  ================================================================ */
380
- [data-theme="light"] {
381
- /* Surfaces - Material-/Aksel-stil dar morkare = upphojt.
382
- I dark var det tvartom (ljusare = upphojt). I light fungerar det
383
- sa har eftersom skuggor ar mer subtila pa ljus bakgrund. */
384
- --surface-page: oklch(0.99 0.002 250);
385
- --surface-default: oklch(0.96 0.003 250);
386
- --surface-raised: oklch(1.00 0.002 250); /* nastan vit kort over light bg */
387
- --surface-overlay: oklch(0.99 0.002 250); /* morkare i z-stack via shadow */
388
- --surface-hover: oklch(0.93 0.004 250);
389
- --surface-active: oklch(0.88 0.005 250);
390
- --surface-sunken: oklch(0.94 0.003 250);
391
-
392
- /* Text - inverterad mauve-skala. */
393
- --text-default: var(--gray-1);
394
- --text-subtle: var(--gray-3);
395
- --text-muted: var(--gray-6);
396
- --text-disabled: var(--gray-8);
397
-
398
- /* Text-on-* - i light har vi morkare accent (blue-8) men ljusare
399
- status-bg som kan behova morkare text. Behaller vit eftersom
400
- accent-8 + status-9 fortfarande ar tillrackligt morka. */
401
- --text-on-accent: oklch(0.98 0 0);
402
- --text-on-status: oklch(0.98 0 0);
403
393
 
404
- /* Borders - inverterad mauve-skala. */
405
- --border-subtle: var(--gray-9);
406
- --border-default: var(--gray-8);
407
- --border-strong: var(--gray-7);
394
+ [data-theme="dark"] {
395
+ color-scheme: dark;
396
+ }
397
+
398
+ [data-theme="light"] {
399
+ color-scheme: light;
408
400
 
409
401
  /* Accent - ett steg morkare for batter kontrast pa ljus bg.
410
- Plus accent-soft/moderate som ger korrekt subtil tint. */
402
+ light-dark() i :root hanterar inte accent-tokens (app-specifika). */
411
403
  --accent-soft: var(--blue-2);
412
404
  --accent-moderate: var(--blue-3);
413
405
  --accent-9: var(--blue-8);
414
406
  --accent-10: var(--blue-9);
415
407
  --accent-text: var(--blue-9);
416
-
417
- /* Status solid - behaller dark-step-9 eftersom dessa farger ar
418
- val-kalibrerade och fungerar pa bade ljus och mork bakgrund. */
419
- /* --bg-success, --bg-warning, --bg-danger arvs fran default. */
420
408
  }
421
409
 
422
410
 
package/css/apps/ekonom.css CHANGED
@@ -26,7 +26,7 @@
26
26
  for synlig kort-elevation utan att vara for ljus. */
27
27
  --surface-page: var(--plum-1); /* #181118 */
28
28
  --surface-default: var(--plum-2); /* #201320 */
29
- --surface-raised: #2a1a2e; /* mellanting plum-2 och plum-3 */
29
+ --surface-raised: var(--plum-2-5); /* mellanniva plum-2/plum-3 */
30
30
  --surface-overlay: var(--plum-3); /* #351a35 */
31
31
  --surface-hover: var(--plum-3);
32
32
  --surface-active: var(--plum-4);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@klodd/ds",
3
- "version": "3.2.0",
3
+ "version": "3.3.0",
4
4
  "description": "Klodd Design System - shared tokens, typography, components and JS for Jubb, Ekonom, and future apps. v2.0 inkluderar all komponentkod och delad JS - app-repona haller bara data och affarslogik.",
5
5
  "main": "css/index.css",
6
6
  "files": [