@klodd/ds 3.2.1 → 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 (2) hide show
  1. package/css/10-semantic.css +40 -64
  2. package/package.json +1 -1
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.
@@ -372,63 +378,33 @@
372
378
 
373
379
 
374
380
  /* ================================================================
375
- ==== LIGHT MODE (data-theme="light")
376
- Forberedda tokens - aktiveras INTE av Ekonom (dark-only).
377
- Tillgangliga for framtida light-mode-sprint i Jubb eller framtida apps.
378
-
379
- App valjer aktivering genom att satta `data-theme="light"` pa <html>.
380
- Standardtillstand ar dark (utan attribut eller med data-theme="dark").
381
-
382
- Komponenter behover inga andringar - alla refererar bara semantic tokens.
383
-
384
- Kanda begransningar (kvar att harmonisera vid eventuell aktivering):
385
- - alpha-tokens (--accent-a*) anvander dark-Radix-alpha-skalor;
386
- bor importera light-skalor for full paritet
387
- - --shadow-card ar kalibrerad for dark-mode (synlig pa ljus bg
388
- men kan behova mindre opacity)
389
- - --hero-glow gradient anvander accent som ar morkare i light;
390
- 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.
391
392
  ================================================================ */
392
- [data-theme="light"] {
393
- /* Surfaces - Material-/Aksel-stil dar morkare = upphojt.
394
- I dark var det tvartom (ljusare = upphojt). I light fungerar det
395
- sa har eftersom skuggor ar mer subtila pa ljus bakgrund. */
396
- --surface-page: oklch(0.99 0.002 250);
397
- --surface-default: oklch(0.96 0.003 250);
398
- --surface-raised: oklch(1.00 0.002 250); /* nastan vit kort over light bg */
399
- --surface-overlay: oklch(0.99 0.002 250); /* morkare i z-stack via shadow */
400
- --surface-hover: oklch(0.93 0.004 250);
401
- --surface-active: oklch(0.88 0.005 250);
402
- --surface-sunken: oklch(0.94 0.003 250);
403
-
404
- /* Text - inverterad mauve-skala. */
405
- --text-default: var(--gray-1);
406
- --text-subtle: var(--gray-3);
407
- --text-muted: var(--gray-6);
408
- --text-disabled: var(--gray-8);
409
-
410
- /* Text-on-* - i light har vi morkare accent (blue-8) men ljusare
411
- status-bg som kan behova morkare text. Behaller vit eftersom
412
- accent-8 + status-9 fortfarande ar tillrackligt morka. */
413
- --text-on-accent: oklch(0.98 0 0);
414
- --text-on-status: oklch(0.98 0 0);
415
393
 
416
- /* Borders - inverterad mauve-skala. */
417
- --border-subtle: var(--gray-9);
418
- --border-default: var(--gray-8);
419
- --border-strong: var(--gray-7);
394
+ [data-theme="dark"] {
395
+ color-scheme: dark;
396
+ }
397
+
398
+ [data-theme="light"] {
399
+ color-scheme: light;
420
400
 
421
401
  /* Accent - ett steg morkare for batter kontrast pa ljus bg.
422
- Plus accent-soft/moderate som ger korrekt subtil tint. */
402
+ light-dark() i :root hanterar inte accent-tokens (app-specifika). */
423
403
  --accent-soft: var(--blue-2);
424
404
  --accent-moderate: var(--blue-3);
425
405
  --accent-9: var(--blue-8);
426
406
  --accent-10: var(--blue-9);
427
407
  --accent-text: var(--blue-9);
428
-
429
- /* Status solid - behaller dark-step-9 eftersom dessa farger ar
430
- val-kalibrerade och fungerar pa bade ljus och mork bakgrund. */
431
- /* --bg-success, --bg-warning, --bg-danger arvs fran default. */
432
408
  }
433
409
 
434
410
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@klodd/ds",
3
- "version": "3.2.1",
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": [