@klodd/ds 3.2.1 → 3.3.1
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.
- package/css/00-primitives.css +0 -1
- package/css/10-semantic.css +43 -67
- package/package.json +1 -1
package/css/00-primitives.css
CHANGED
|
@@ -272,7 +272,6 @@
|
|
|
272
272
|
"Inter", "SF Pro Display", -apple-system,
|
|
273
273
|
system-ui, "Segoe UI", Roboto, "Helvetica Neue",
|
|
274
274
|
Arial, sans-serif;
|
|
275
|
-
--font-numeric: var(--font-sans);
|
|
276
275
|
--font-mono:
|
|
277
276
|
"SF Mono", "Geist Mono", ui-monospace,
|
|
278
277
|
SFMono-Regular, Menlo, Monaco, "Cascadia Code",
|
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
|
-
|
|
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.
|
|
@@ -202,7 +208,7 @@
|
|
|
202
208
|
/* Danger (rod, separat fran negative). Anvand for: delete-knappar,
|
|
203
209
|
destructive bekraftelser. Skiljer sig fran --negative for att markera
|
|
204
210
|
IRREVERSIBEL aktion vs faktiskt negativt belopp. */
|
|
205
|
-
--accent-danger:
|
|
211
|
+
--accent-danger: var(--red-9);
|
|
206
212
|
--accent-danger-dim: color-mix(in oklch, var(--accent-danger) 8%, transparent);
|
|
207
213
|
--accent-danger-border: color-mix(in oklch, var(--accent-danger) 35%, transparent);
|
|
208
214
|
|
|
@@ -372,63 +378,33 @@
|
|
|
372
378
|
|
|
373
379
|
|
|
374
380
|
/* ================================================================
|
|
375
|
-
====
|
|
376
|
-
|
|
377
|
-
|
|
378
|
-
|
|
379
|
-
|
|
380
|
-
|
|
381
|
-
|
|
382
|
-
|
|
383
|
-
|
|
384
|
-
|
|
385
|
-
|
|
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
|
-
|
|
417
|
-
|
|
418
|
-
|
|
419
|
-
|
|
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
|
-
|
|
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
|
|
|
@@ -497,8 +473,8 @@
|
|
|
497
473
|
--radius-4xl: var(--radius-24);
|
|
498
474
|
--radius-pill: var(--radius-full);
|
|
499
475
|
|
|
500
|
-
/* Font-weight
|
|
501
|
-
|
|
476
|
+
/* Font-weight: --fw-semibold borttagen 2026-05-07 per 400/500-policy.
|
|
477
|
+
Aktiva call-sites bytte till var(--fw-medium) explicit. Se DECISIONS.md. */
|
|
502
478
|
|
|
503
479
|
/* Kategori-paletter (Ekonom-only). Behalls for shared-tokens-paritet
|
|
504
480
|
med Ekonom-repot, oanvanda i Jubb. */
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@klodd/ds",
|
|
3
|
-
"version": "3.
|
|
3
|
+
"version": "3.3.1",
|
|
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": [
|