@klodd/ds 5.4.3 → 5.6.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.
- package/README.md +1 -2
- package/css/00-primitives.css +1 -22
- package/css/10-semantic.css +22 -100
- package/css/base/interactions.css +241 -0
- package/css/base/pwa.css +14 -4
- package/css/components/avatar.css +6 -6
- package/css/components/badge.css +2 -2
- package/css/components/button.css +1 -2
- package/css/components/chip.css +2 -2
- package/css/components/feedback.css +4 -4
- package/css/components/hero.css +3 -3
- package/css/components/hub-card.css +2 -2
- package/css/components/inline-edit.css +2 -2
- package/css/components/list-row.css +2 -2
- package/css/components/pwa-avatar.css +2 -2
- package/css/components/swipe-stack.css +2 -2
- package/css/components/upload-spinner.css +2 -2
- package/css/index.css +1 -9
- package/package.json +3 -2
- package/references/04-locked-decisions/0010-collapsible-block-rename.md +1 -1
- package/references/05-open-decisions/0017-async-progress-pipeline-gaps.md +3 -3
- package/css/components/expandable-row.css +0 -176
- package/css/components/icon-circle.css +0 -46
- package/css/components/item-stack.css +0 -43
- package/css/components/kvp-arrow.css +0 -22
- package/css/components/matched-row.css +0 -51
- package/css/components/review-banner.css +0 -70
- package/css/components/status-icon.css +0 -32
- package/css/components/tag-inline.css +0 -21
- package/js/index.js +0 -95
package/README.md
CHANGED
|
@@ -49,7 +49,7 @@ Tre lager med strikt inkapsling. Komponenter laser ALDRIG primitives
|
|
|
49
49
|
direkt - bara semantic-lagret eller app-tokens.
|
|
50
50
|
|
|
51
51
|
```
|
|
52
|
-
00-primitives.css raa varden (gray/blue/plum
|
|
52
|
+
00-primitives.css raa varden (gray/blue/plum OKLCH ramps,
|
|
53
53
|
pixel-numerisk space/fs/radius, motion, layout)
|
|
54
54
|
10-semantic.css komponenter laser hardefran (surface/text/border/
|
|
55
55
|
accent + status + effects + transitions)
|
|
@@ -64,7 +64,6 @@ Officiella **Radix Colors** dark-skalor:
|
|
|
64
64
|
- **Mauve Dark** (neutral) - lila-tonad gra som kompletterar Blue och Plum
|
|
65
65
|
- **Blue Dark** (Jubb accent) - sky-blue (#0090ff)
|
|
66
66
|
- **Plum Dark** (Ekonom accent) - varm magenta-lila (#ab4aba)
|
|
67
|
-
- **Violet Dark** - definierad men oanvänd
|
|
68
67
|
- **Green/Amber/Red Dark** - status (success/warning/danger)
|
|
69
68
|
|
|
70
69
|
Status-tokens har bade solid-bakgrund (`--bg-success/warning/danger`)
|
package/css/00-primitives.css
CHANGED
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
(apps/<app>.css). Detta lager byts bara nar appens fundamentala
|
|
6
6
|
palett, spacing eller typografi-skala andras pa systemniva.
|
|
7
7
|
|
|
8
|
-
Radix 12-stegs rollkarta (anvands av --gray, --blue
|
|
8
|
+
Radix 12-stegs rollkarta (anvands av --gray, --blue):
|
|
9
9
|
1-2 App-bakgrunder
|
|
10
10
|
3 Komponentbakgrund (vila)
|
|
11
11
|
4 Komponentbakgrund (hover)
|
|
@@ -110,27 +110,6 @@
|
|
|
110
110
|
}
|
|
111
111
|
|
|
112
112
|
|
|
113
|
-
/* ================================================================
|
|
114
|
-
==== COLORS - PURPLE (Radix Violet Dark)
|
|
115
|
-
Officiella Radix-varden. Behalls i shared-system for framtida
|
|
116
|
-
anvandning - inte aktivt for nagon app just nu.
|
|
117
|
-
================================================================ */
|
|
118
|
-
:root {
|
|
119
|
-
--purple-1: #14121f;
|
|
120
|
-
--purple-2: #1b1525;
|
|
121
|
-
--purple-3: #291f43;
|
|
122
|
-
--purple-4: #33255b;
|
|
123
|
-
--purple-5: #3c2e69;
|
|
124
|
-
--purple-6: #473876;
|
|
125
|
-
--purple-7: #56468b;
|
|
126
|
-
--purple-8: #6958ad;
|
|
127
|
-
--purple-9: #6e56cf;
|
|
128
|
-
--purple-10: #7d66d9;
|
|
129
|
-
--purple-11: #baa7ff;
|
|
130
|
-
--purple-12: #e2ddfe;
|
|
131
|
-
}
|
|
132
|
-
|
|
133
|
-
|
|
134
113
|
/* ================================================================
|
|
135
114
|
==== COLORS - PLUM (Radix Plum Dark - Ekonom accent)
|
|
136
115
|
Varm magenta-lila. Tydligt annorlunda fran Blue (Jubb) utan att
|
package/css/10-semantic.css
CHANGED
|
@@ -1,13 +1,10 @@
|
|
|
1
1
|
/* ================================================================
|
|
2
2
|
10-SEMANTIC
|
|
3
|
-
Det enda lagret komponenter far referera. Aldrig --gray-N, --blue-N
|
|
4
|
-
|
|
3
|
+
Det enda lagret komponenter far referera. Aldrig --gray-N, --blue-N
|
|
4
|
+
eller andra primitives direkt i komponentfiler.
|
|
5
5
|
|
|
6
|
-
Dark-first. Default-blocket galler om data-theme saknas eller ar
|
|
7
|
-
"dark". [data-theme="light"] overrider ytor + text + borders.
|
|
8
6
|
App-byte sker via [data-app="X"] som overrider --accent-* (se
|
|
9
|
-
apps/<app>.css). Komponenter las bara --accent-*, aldrig --blue
|
|
10
|
-
eller --purple-*.
|
|
7
|
+
apps/<app>.css). Komponenter las bara --accent-*, aldrig --blue-*.
|
|
11
8
|
|
|
12
9
|
Konvention pa kommentarer: varje token har "Anvand for: ..." och
|
|
13
10
|
"INTE for: ...". Det ar LLM-instruktionen inbyggd i systemet.
|
|
@@ -18,12 +15,6 @@
|
|
|
18
15
|
==== SURFACES (NAV Aksel lagermodell)
|
|
19
16
|
Ljusare = hogre i z-stacken. Inga skuggor i dark mode - bara
|
|
20
17
|
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.
|
|
27
18
|
================================================================ */
|
|
28
19
|
:root {
|
|
29
20
|
color-scheme: dark; /* default dark for alla Klodd-appar */
|
|
@@ -31,44 +22,44 @@
|
|
|
31
22
|
/* Sidans yttersta bakgrund. Morkast av alla ytor.
|
|
32
23
|
Anvand for: <html>, <body>, page-background.
|
|
33
24
|
INTE for: kort, paneler, modaler. */
|
|
34
|
-
--surface-page:
|
|
25
|
+
--surface-page: var(--gray-1);
|
|
35
26
|
|
|
36
27
|
/* Standard innehallsyta. Sektioner, list-rows.
|
|
37
28
|
Anvand for: sektionsbakgrunder, tab-innehall, formulargrupper.
|
|
38
29
|
INTE for: sidans yttersta bakgrund eller upphojda kort. */
|
|
39
|
-
--surface-default:
|
|
30
|
+
--surface-default: var(--gray-2);
|
|
40
31
|
|
|
41
32
|
/* Upphojd yta - ett steg framfor default.
|
|
42
33
|
Anvand for: kort, paneler, sidopaneler, jobbkort.
|
|
43
34
|
INTE for: modaler och popovers (anvand --surface-overlay). */
|
|
44
|
-
--surface-raised:
|
|
35
|
+
--surface-raised: var(--gray-3);
|
|
45
36
|
|
|
46
37
|
/* Forhoejt kort - mellansteg mellan raised och overlay. Anvands for
|
|
47
38
|
kort som behover mer visuell prominens an --surface-raised men
|
|
48
39
|
inte ar overlays/modaler. Mappas till color-3 i app-overrides
|
|
49
40
|
(vs raised color-2). v3.21.3 - infort efter audit av Jubb's
|
|
50
41
|
job-card som behovde mer kontrast mot main-bakgrunden. */
|
|
51
|
-
--surface-elevated:
|
|
42
|
+
--surface-elevated: var(--gray-3);
|
|
52
43
|
|
|
53
44
|
/* Svavande yta - modaler, popovers, dropdowns.
|
|
54
45
|
Anvand for: dialog-bakgrund, tooltip, context-menu, sheets.
|
|
55
46
|
INTE for: inbaddade kort (anvand --surface-raised). */
|
|
56
|
-
--surface-overlay:
|
|
47
|
+
--surface-overlay: var(--gray-4);
|
|
57
48
|
|
|
58
49
|
/* Hover-state pa interaktiva ytor.
|
|
59
50
|
Anvand for: :hover-bakgrund pa knappar, rader, kort.
|
|
60
51
|
INTE for: statiska ytor eller fokus-states. */
|
|
61
|
-
--surface-hover:
|
|
52
|
+
--surface-hover: var(--gray-4);
|
|
62
53
|
|
|
63
54
|
/* Active/pressed-state.
|
|
64
55
|
Anvand for: :active-bakgrund, .bottom-nav__item--active.
|
|
65
56
|
INTE for: hover (anvand --surface-hover). */
|
|
66
|
-
--surface-active:
|
|
57
|
+
--surface-active: var(--gray-5);
|
|
67
58
|
|
|
68
59
|
/* Nedsankt yta - inputs, textarea, kod-block.
|
|
69
60
|
Anvand for: input-bakgrund, code-block, hbar-track.
|
|
70
61
|
INTE for: interaktiva ytor som hover/active. */
|
|
71
|
-
--surface-sunken:
|
|
62
|
+
--surface-sunken: var(--gray-2);
|
|
72
63
|
|
|
73
64
|
|
|
74
65
|
/* ================================================================
|
|
@@ -78,22 +69,22 @@
|
|
|
78
69
|
/* Primar text. Rubriker, etiketter, viktig information.
|
|
79
70
|
Anvand for: alla rubriker, knapptext, viktig metadata.
|
|
80
71
|
INTE for: hjalptext, datum, placeholder. */
|
|
81
|
-
--text-default:
|
|
72
|
+
--text-default: var(--gray-12);
|
|
82
73
|
|
|
83
74
|
/* Sekundar text. Datum, meta-info, subtexter.
|
|
84
75
|
Anvand for: metadata, datum, kompletterande information.
|
|
85
76
|
INTE for: rubriker eller primar information. */
|
|
86
|
-
--text-subtle:
|
|
77
|
+
--text-subtle: var(--gray-11);
|
|
87
78
|
|
|
88
79
|
/* Muted text. Platshallare, hint-text, ts-stamps.
|
|
89
80
|
Anvand for: placeholder, hint, micro-labels.
|
|
90
81
|
INTE for: lasbar information med hog prioritet. */
|
|
91
|
-
--text-muted:
|
|
82
|
+
--text-muted: var(--gray-9);
|
|
92
83
|
|
|
93
84
|
/* Disabled text. Inaktiva element, fade-out.
|
|
94
85
|
Anvand for: disabled-state pa knappar/inputs, tx-meta-faint.
|
|
95
86
|
INTE for: aktiva element. */
|
|
96
|
-
--text-disabled:
|
|
87
|
+
--text-disabled: var(--gray-7);
|
|
97
88
|
|
|
98
89
|
/* Text pa solid accent-bakgrund (knapp, badge, score-pill).
|
|
99
90
|
Anvand for: text inuti --accent-9-bakgrunder.
|
|
@@ -113,17 +104,17 @@
|
|
|
113
104
|
/* Subtil border. Separatorer, dividers, list-row-borders.
|
|
114
105
|
Anvand for: tunna dividers mellan sektioner, table-row-borders.
|
|
115
106
|
INTE for: interaktiva element eller fokus. */
|
|
116
|
-
--border-subtle:
|
|
107
|
+
--border-subtle: var(--gray-5);
|
|
117
108
|
|
|
118
109
|
/* Standard border. Kort, inputs i vila.
|
|
119
110
|
Anvand for: kortkanter, input-borders, btn-borders.
|
|
120
111
|
INTE for: fokus-states (anvand --border-focus). */
|
|
121
|
-
--border-default:
|
|
112
|
+
--border-default: var(--gray-6);
|
|
122
113
|
|
|
123
114
|
/* Stark border. Emphasis, hover pa border.
|
|
124
115
|
Anvand for: hover-state pa inputs, emphasis-borders.
|
|
125
116
|
INTE for: vila-state (anvand --border-default). */
|
|
126
|
-
--border-strong:
|
|
117
|
+
--border-strong: var(--gray-7);
|
|
127
118
|
|
|
128
119
|
/* Fokusring. Alltid synlig vid keyboard-navigation.
|
|
129
120
|
Anvand for: :focus-visible outline.
|
|
@@ -136,7 +127,7 @@
|
|
|
136
127
|
DEN ENDA TOKEN-GRUPPEN SOM BYTS PER APP.
|
|
137
128
|
[data-app="jubb"] -> bla
|
|
138
129
|
[data-app="ekonom"] -> lila
|
|
139
|
-
Komponenter refererar bara --accent-*, aldrig --blue
|
|
130
|
+
Komponenter refererar bara --accent-*, aldrig --blue-*.
|
|
140
131
|
================================================================ */
|
|
141
132
|
|
|
142
133
|
/* Subtil accent-bakgrund. Markta rader, valda items.
|
|
@@ -330,47 +321,9 @@
|
|
|
330
321
|
far referera dessa eftersom de ar avledda fran semantic.
|
|
331
322
|
================================================================ */
|
|
332
323
|
:root {
|
|
333
|
-
/*
|
|
334
|
-
--
|
|
335
|
-
--
|
|
336
|
-
--card-border-color: var(--border-subtle);
|
|
337
|
-
/* 2026-05-13: --card-radius borttaget. Var --radius-20 (legacy) men
|
|
338
|
-
ingen komponent konsumerade tokenet. Kort-komponenter anvander
|
|
339
|
-
var(--radius-14) direkt enligt BR-skalan. */
|
|
340
|
-
--card-padding-x: var(--space-18);
|
|
341
|
-
--card-padding-y: var(--space-16);
|
|
342
|
-
--card-margin-bottom: var(--space-14);
|
|
343
|
-
|
|
344
|
-
/* Buttons */
|
|
345
|
-
--btn-radius: var(--radius-full);
|
|
346
|
-
--btn-padding-x: var(--space-20);
|
|
347
|
-
--btn-padding-y: 13px; /* exakt 13px ger 44px min-height */
|
|
348
|
-
--btn-min-height: var(--touch-min);
|
|
349
|
-
--btn-padding-x-sm: var(--space-14);
|
|
350
|
-
--btn-padding-y-sm: var(--space-8);
|
|
351
|
-
--btn-min-height-sm: 36px;
|
|
352
|
-
--btn-icon-size: var(--touch-min);
|
|
353
|
-
--btn-icon-size-sm: 36px;
|
|
354
|
-
|
|
355
|
-
/* Input */
|
|
356
|
-
--input-radius: var(--radius-14);
|
|
357
|
-
--input-padding-x: var(--space-16);
|
|
358
|
-
--input-padding-y: var(--space-14);
|
|
359
|
-
|
|
360
|
-
/* Avatar */
|
|
361
|
-
--avatar-size: 36px;
|
|
362
|
-
--avatar-size-sm: 28px;
|
|
363
|
-
--avatar-size-lg: 56px;
|
|
364
|
-
|
|
365
|
-
/* Tx-row */
|
|
366
|
-
--tx-icon-size: 36px;
|
|
367
|
-
|
|
368
|
-
/* Hero amount sizes (kontextuellt overriden i media queries).
|
|
369
|
-
2026-05-13: --hero-amount-fz: fs-80 → fs-100 (25% storre).
|
|
370
|
-
--hero-amount-fluid: clamp ovre tak 80 → 100 for matchning. */
|
|
371
|
-
--hero-amount-fz: var(--fs-100);
|
|
372
|
-
--hero-amount-card-fz: var(--fs-40);
|
|
373
|
-
--hero-amount-fluid: clamp(40px, 14vw, 100px);
|
|
324
|
+
--circle-size: 36px; /* default -- kvadratiska/cirkulära 36px-element */
|
|
325
|
+
--circle-size-sm: 28px; /* compact -- 28px-element */
|
|
326
|
+
--circle-size-lg: 56px; /* display -- 56px-element */
|
|
374
327
|
}
|
|
375
328
|
|
|
376
329
|
|
|
@@ -395,37 +348,6 @@
|
|
|
395
348
|
}
|
|
396
349
|
|
|
397
350
|
|
|
398
|
-
/* ================================================================
|
|
399
|
-
==== EXPLICITA THEME-OVERRIDES (manuell toggle)
|
|
400
|
-
light-dark() i :root hanterar surface/text/border-tokens automatiskt
|
|
401
|
-
baserat pa color-scheme. Dessa overrides satter color-scheme explicit
|
|
402
|
-
sa app kan tvinga light eller dark oavsett system-preferens.
|
|
403
|
-
|
|
404
|
-
light-dark() hanterar INTE accent-tokens (de ar app-specifika via
|
|
405
|
-
apps/<X>.css). For light-mode kan accent behova justeras ett steg
|
|
406
|
-
morkare for kontrast pa ljus bg - dessa overrides lever har.
|
|
407
|
-
|
|
408
|
-
STATUS: Ekonom ar dark-only. light-mode-stod ar forberedt for
|
|
409
|
-
framtida sprintar i Jubb eller framtida apps.
|
|
410
|
-
================================================================ */
|
|
411
|
-
|
|
412
|
-
[data-theme="dark"] {
|
|
413
|
-
color-scheme: dark;
|
|
414
|
-
}
|
|
415
|
-
|
|
416
|
-
[data-theme="light"] {
|
|
417
|
-
color-scheme: light;
|
|
418
|
-
|
|
419
|
-
/* Accent - ett steg morkare for batter kontrast pa ljus bg.
|
|
420
|
-
light-dark() i :root hanterar inte accent-tokens (app-specifika). */
|
|
421
|
-
--accent-soft: var(--blue-2);
|
|
422
|
-
--accent-moderate: var(--blue-3);
|
|
423
|
-
--accent-9: var(--blue-8);
|
|
424
|
-
--accent-10: var(--blue-9);
|
|
425
|
-
--accent-text: var(--blue-9);
|
|
426
|
-
}
|
|
427
|
-
|
|
428
|
-
|
|
429
351
|
/* ================================================================
|
|
430
352
|
==== OVERLAY TINTS
|
|
431
353
|
Transparenta tints för drag-overlays, hover-states på dark surfaces
|
|
@@ -0,0 +1,241 @@
|
|
|
1
|
+
/* ================================================================
|
|
2
|
+
base/interactions.css
|
|
3
|
+
Delade interaktions- och beteendelager, lyfta från appernas
|
|
4
|
+
byte-identiska ds/base.css i Sprint 3:
|
|
5
|
+
- Reset + html/body
|
|
6
|
+
- Touch-cleanup (eliminera webb-tells: tap-callout, 300ms-delay)
|
|
7
|
+
- Hero-glow (radial gradient, opt-in via .with-hero-glow)
|
|
8
|
+
- First-load entry animation (hero/stat-cards/bottom-nav)
|
|
9
|
+
- Press-feedback (asymmetri 80ms in / 160ms out, iOS-feel)
|
|
10
|
+
- Pull-to-refresh indicator
|
|
11
|
+
- View transitions (same-document, 160ms snappy)
|
|
12
|
+
Laddas efter base/pwa.css, typography.css, layout.css.
|
|
13
|
+
================================================================ */
|
|
14
|
+
|
|
15
|
+
|
|
16
|
+
/* ================================================================
|
|
17
|
+
==== RESET
|
|
18
|
+
================================================================ */
|
|
19
|
+
*, *::before, *::after {
|
|
20
|
+
box-sizing: border-box;
|
|
21
|
+
margin: 0;
|
|
22
|
+
padding: 0;
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
html {
|
|
26
|
+
/* Sprint A4: Touch-cleanup. Eliminera webb-tells. */
|
|
27
|
+
-webkit-tap-highlight-color: transparent;
|
|
28
|
+
-webkit-text-size-adjust: 100%;
|
|
29
|
+
text-size-adjust: 100%;
|
|
30
|
+
/* Sprint E4: smooth scroll for hash-anchors. Reduced-motion-safe. */
|
|
31
|
+
scroll-behavior: smooth;
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
html, body {
|
|
35
|
+
min-height: 100vh; /* fallback */
|
|
36
|
+
min-height: 100dvh; /* dynamisk viewport, tar hansyn till iOS-toolbar */
|
|
37
|
+
background: var(--surface-page);
|
|
38
|
+
color: var(--text-default);
|
|
39
|
+
font-family: var(--font-sans);
|
|
40
|
+
font-size: var(--fs-14);
|
|
41
|
+
font-weight: var(--fw-regular);
|
|
42
|
+
line-height: var(--lh-base);
|
|
43
|
+
letter-spacing: var(--ls-base);
|
|
44
|
+
-webkit-font-smoothing: antialiased;
|
|
45
|
+
-moz-osx-font-smoothing: grayscale;
|
|
46
|
+
overscroll-behavior: none;
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
/* Sprint G2: reservera utrymme i botten sa sista content inte goms
|
|
50
|
+
bakom fixed bottom-nav. */
|
|
51
|
+
body {
|
|
52
|
+
padding-bottom: var(--bottom-nav-clearance);
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
a {
|
|
56
|
+
color: var(--accent-9);
|
|
57
|
+
text-decoration: none;
|
|
58
|
+
}
|
|
59
|
+
@media (hover: hover) and (pointer: fine) {
|
|
60
|
+
a:hover { text-decoration: underline; }
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
button { font-family: inherit; }
|
|
64
|
+
|
|
65
|
+
/* Tabular numerals dar siffror jamfors visuellt. */
|
|
66
|
+
.num,
|
|
67
|
+
.num-display,
|
|
68
|
+
.num-value,
|
|
69
|
+
.num-inline,
|
|
70
|
+
.stat-card__value,
|
|
71
|
+
.list-row__amount,
|
|
72
|
+
.hero__amount,
|
|
73
|
+
.hero__amount--card {
|
|
74
|
+
font-variant-numeric: tabular-nums;
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
|
|
78
|
+
/* ================================================================
|
|
79
|
+
==== TOUCH-CLEANUP (Sprint A4)
|
|
80
|
+
Eliminera webb-tells: ingen tap-callout, ingen 300ms-delay,
|
|
81
|
+
ingen text-selektion pa chrome. Text-content forblir markerbart.
|
|
82
|
+
================================================================ */
|
|
83
|
+
button, a, [role="button"],
|
|
84
|
+
.bottom-nav__item,
|
|
85
|
+
.month-pill,
|
|
86
|
+
.btn, .btn--secondary, .btn--primary,
|
|
87
|
+
.btn--ghost, .btn--danger, .btn--positive, .btn--icon,
|
|
88
|
+
.list-row, .stat-card[onclick] {
|
|
89
|
+
touch-action: manipulation;
|
|
90
|
+
-webkit-touch-callout: none;
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
/* UI-chrome far inte text-selectas (kanns som webb-tell). */
|
|
94
|
+
.bottom-nav, .topbar, .bottom-nav__item, .month-pill,
|
|
95
|
+
.sheet__handle,
|
|
96
|
+
.btn, .btn--secondary, .btn--primary,
|
|
97
|
+
.btn--ghost, .btn--danger, .btn--positive, .btn--icon {
|
|
98
|
+
user-select: none;
|
|
99
|
+
-webkit-user-select: none;
|
|
100
|
+
}
|
|
101
|
+
|
|
102
|
+
/* Text-content forblir markerbart (over no-select-containrar). */
|
|
103
|
+
.list-row .list-row__desc, .list-row .list-row__amount,
|
|
104
|
+
.stat-card__value, .hero__amount, .hero__amount--card,
|
|
105
|
+
.panel p, .panel span,
|
|
106
|
+
.collapsible-body p, .collapsible-body span {
|
|
107
|
+
user-select: text;
|
|
108
|
+
-webkit-user-select: text;
|
|
109
|
+
}
|
|
110
|
+
|
|
111
|
+
|
|
112
|
+
/* ================================================================
|
|
113
|
+
==== HERO-GLOW (radial bakgrund pa entry-skarmar)
|
|
114
|
+
Opt-in via .with-hero-glow pa <main class="main-content">.
|
|
115
|
+
Visas pa Ekonoms /avstamning och Halsomentorns /dashboard etc.
|
|
116
|
+
================================================================ */
|
|
117
|
+
.with-hero-glow::before {
|
|
118
|
+
content: '';
|
|
119
|
+
position: absolute;
|
|
120
|
+
top: 0;
|
|
121
|
+
left: 0;
|
|
122
|
+
right: 0;
|
|
123
|
+
height: 420px;
|
|
124
|
+
background: var(--hero-glow);
|
|
125
|
+
pointer-events: none;
|
|
126
|
+
z-index: 0;
|
|
127
|
+
}
|
|
128
|
+
.with-hero-glow > * { position: relative; z-index: 1; }
|
|
129
|
+
|
|
130
|
+
|
|
131
|
+
/* ================================================================
|
|
132
|
+
==== FIRST-LOAD ENTRY ANIMATION (Sprint D3)
|
|
133
|
+
Hero glider in, stat-cards spring-up sekventiellt, bottom-nav
|
|
134
|
+
hoppar in nerifran. Triggas via data-first-load pa body, vilket
|
|
135
|
+
FastAPI middleware satter vid forsta browser-besoket.
|
|
136
|
+
================================================================ */
|
|
137
|
+
body[data-first-load="true"] .hero {
|
|
138
|
+
animation: hero-arrive 480ms var(--ease-spring-bounce);
|
|
139
|
+
}
|
|
140
|
+
|
|
141
|
+
body[data-first-load="true"] .stat-card {
|
|
142
|
+
animation: card-arrive 320ms var(--ease-spring-bounce);
|
|
143
|
+
animation-fill-mode: backwards;
|
|
144
|
+
}
|
|
145
|
+
body[data-first-load="true"] .stat-card:nth-child(1) { animation-delay: 200ms; }
|
|
146
|
+
body[data-first-load="true"] .stat-card:nth-child(2) { animation-delay: 280ms; }
|
|
147
|
+
body[data-first-load="true"] .stat-card:nth-child(3) { animation-delay: 360ms; }
|
|
148
|
+
body[data-first-load="true"] .stat-card:nth-child(4) { animation-delay: 440ms; }
|
|
149
|
+
|
|
150
|
+
body[data-first-load="true"] .bottom-nav {
|
|
151
|
+
animation: nav-arrive 400ms var(--ease-spring-snappy);
|
|
152
|
+
animation-delay: 100ms;
|
|
153
|
+
animation-fill-mode: backwards;
|
|
154
|
+
}
|
|
155
|
+
|
|
156
|
+
@keyframes hero-arrive {
|
|
157
|
+
0% { opacity: 0; transform: translateY(-8px); }
|
|
158
|
+
100% { opacity: 1; transform: translateY(0); }
|
|
159
|
+
}
|
|
160
|
+
@keyframes card-arrive {
|
|
161
|
+
0% { opacity: 0; transform: translateY(12px) scale(0.96); }
|
|
162
|
+
100% { opacity: 1; transform: translateY(0) scale(1); }
|
|
163
|
+
}
|
|
164
|
+
@keyframes nav-arrive {
|
|
165
|
+
0% { opacity: 0; transform: translateY(60px); }
|
|
166
|
+
100% { opacity: 1; transform: translateY(0); }
|
|
167
|
+
}
|
|
168
|
+
|
|
169
|
+
|
|
170
|
+
/* ================================================================
|
|
171
|
+
==== PRESS-FEEDBACK (Sprint A3, native iOS-feel)
|
|
172
|
+
Asymmetri: press in 80ms snappy, release 160ms med spring-bounce.
|
|
173
|
+
color/border/opacity-transitions tappas medvetet for dessa
|
|
174
|
+
interaktiva element. Hover-bg-overrides far press-out-timing
|
|
175
|
+
(kanns smidigt pa desktop ocksa).
|
|
176
|
+
================================================================ */
|
|
177
|
+
.btn,
|
|
178
|
+
.bottom-nav__item,
|
|
179
|
+
.month-pill a {
|
|
180
|
+
transition:
|
|
181
|
+
transform var(--press-out-duration) var(--press-out-easing),
|
|
182
|
+
background var(--press-out-duration) var(--press-out-easing);
|
|
183
|
+
}
|
|
184
|
+
|
|
185
|
+
.btn:active,
|
|
186
|
+
.bottom-nav__item:active,
|
|
187
|
+
.month-pill a:active {
|
|
188
|
+
transform: scale(0.97);
|
|
189
|
+
transition:
|
|
190
|
+
transform var(--press-in-duration) var(--press-in-easing),
|
|
191
|
+
background var(--press-in-duration) var(--press-in-easing);
|
|
192
|
+
}
|
|
193
|
+
|
|
194
|
+
|
|
195
|
+
/* ================================================================
|
|
196
|
+
==== PULL-TO-REFRESH (Sprint E1)
|
|
197
|
+
Indikator visas centrerat ovanfor viewport. Pull-progress styr
|
|
198
|
+
transform och opacity (sats inline av pull-to-refresh.js).
|
|
199
|
+
================================================================ */
|
|
200
|
+
.ptr-indicator {
|
|
201
|
+
position: fixed;
|
|
202
|
+
top: calc(var(--safe-top) + 8px);
|
|
203
|
+
left: 50%;
|
|
204
|
+
transform: translate(-50%, -40px);
|
|
205
|
+
z-index: var(--z-overlay);
|
|
206
|
+
pointer-events: none;
|
|
207
|
+
width: 36px;
|
|
208
|
+
height: 36px;
|
|
209
|
+
border-radius: 50%;
|
|
210
|
+
background: var(--surface-strong);
|
|
211
|
+
display: flex;
|
|
212
|
+
align-items: center;
|
|
213
|
+
justify-content: center;
|
|
214
|
+
opacity: 0;
|
|
215
|
+
}
|
|
216
|
+
|
|
217
|
+
.ptr-spinner {
|
|
218
|
+
width: 18px;
|
|
219
|
+
height: 18px;
|
|
220
|
+
border: 2px solid var(--text-muted);
|
|
221
|
+
border-top-color: var(--accent-9);
|
|
222
|
+
border-radius: 50%;
|
|
223
|
+
}
|
|
224
|
+
|
|
225
|
+
.ptr-indicator--triggered .ptr-spinner {
|
|
226
|
+
animation: ptr-spin 600ms linear infinite;
|
|
227
|
+
}
|
|
228
|
+
@keyframes ptr-spin { to { transform: rotate(360deg); } }
|
|
229
|
+
|
|
230
|
+
|
|
231
|
+
/* ================================================================
|
|
232
|
+
==== VIEW TRANSITIONS (Sprint B + I)
|
|
233
|
+
Same-document VT via document.startViewTransition i turbo-nav.js.
|
|
234
|
+
Cross-document VT borttagen pga iOS Safari snapshot-bug pa fixed-
|
|
235
|
+
position-element + dvh-instabilitet.
|
|
236
|
+
================================================================ */
|
|
237
|
+
::view-transition-old(root),
|
|
238
|
+
::view-transition-new(root) {
|
|
239
|
+
animation-duration: 160ms;
|
|
240
|
+
animation-timing-function: var(--ease-spring-snappy);
|
|
241
|
+
}
|
package/css/base/pwa.css
CHANGED
|
@@ -9,8 +9,9 @@
|
|
|
9
9
|
- Globala fokusringar (:focus-visible)
|
|
10
10
|
- Reduced-motion respekt
|
|
11
11
|
|
|
12
|
-
|
|
13
|
-
pull-to-refresh, hero-glow) ligger i
|
|
12
|
+
Det fullare interaktionslagret (animations, view transitions,
|
|
13
|
+
pull-to-refresh, hero-glow, press-feedback) ligger i
|
|
14
|
+
base/interactions.css som laddas darefter.
|
|
14
15
|
================================================================ */
|
|
15
16
|
|
|
16
17
|
*, *::before, *::after {
|
|
@@ -33,7 +34,7 @@ html {
|
|
|
33
34
|
body {
|
|
34
35
|
margin: 0;
|
|
35
36
|
min-height: 100dvh; /* dynamic viewport - hanterar mobil-browser chrome */
|
|
36
|
-
overscroll-behavior:
|
|
37
|
+
overscroll-behavior: none; /* stoppar pull-to-refresh-konflikter */
|
|
37
38
|
}
|
|
38
39
|
|
|
39
40
|
/* iOS PWA cold-start safe-area-fix. .kds-scroll-buffer ar ett block-
|
|
@@ -75,8 +76,17 @@ body {
|
|
|
75
76
|
|
|
76
77
|
/* Globala fokusringar - alltid synliga vid keyboard-navigation, aldrig vid tap. */
|
|
77
78
|
:focus-visible {
|
|
78
|
-
outline: 2px solid var(--
|
|
79
|
+
outline: 2px solid var(--accent-9);
|
|
79
80
|
outline-offset: 2px;
|
|
81
|
+
border-radius: var(--radius-4);
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
/* <main> undantas fran focus-outline: turbo-nav anropar main.focus()
|
|
85
|
+
for screen-reader-access efter varje swap, och pa iOS Safari triggar
|
|
86
|
+
programmatisk focus :focus-visible - vilket gav en synlig outline. */
|
|
87
|
+
#main:focus,
|
|
88
|
+
#main:focus-visible {
|
|
89
|
+
outline: none;
|
|
80
90
|
}
|
|
81
91
|
|
|
82
92
|
/* Respektera OS-installningen "Tillganglighet -> Reducera rorelse". */
|
|
@@ -3,8 +3,8 @@
|
|
|
3
3
|
Cirkular initial-avatar. Modifier --lg pa profil-vyer.
|
|
4
4
|
================================================================ */
|
|
5
5
|
.avatar {
|
|
6
|
-
width:
|
|
7
|
-
height:
|
|
6
|
+
width: var(--circle-size);
|
|
7
|
+
height: var(--circle-size);
|
|
8
8
|
border-radius: var(--radius-full);
|
|
9
9
|
background: linear-gradient(135deg, var(--accent-9) 0%, var(--accent-10) 100%);
|
|
10
10
|
display: inline-flex;
|
|
@@ -19,13 +19,13 @@
|
|
|
19
19
|
}
|
|
20
20
|
|
|
21
21
|
.avatar--sm {
|
|
22
|
-
width:
|
|
23
|
-
height:
|
|
22
|
+
width: var(--circle-size-sm);
|
|
23
|
+
height: var(--circle-size-sm);
|
|
24
24
|
font-size: var(--fs-12);
|
|
25
25
|
}
|
|
26
26
|
|
|
27
27
|
.avatar--lg {
|
|
28
|
-
width:
|
|
29
|
-
height:
|
|
28
|
+
width: var(--circle-size-lg);
|
|
29
|
+
height: var(--circle-size-lg);
|
|
30
30
|
font-size: var(--fs-24);
|
|
31
31
|
}
|
package/css/components/badge.css
CHANGED
|
@@ -152,8 +152,8 @@
|
|
|
152
152
|
align-items: center;
|
|
153
153
|
justify-content: center;
|
|
154
154
|
flex-shrink: 0;
|
|
155
|
-
width:
|
|
156
|
-
height:
|
|
155
|
+
width: var(--circle-size);
|
|
156
|
+
height: var(--circle-size);
|
|
157
157
|
font-size: var(--fs-13);
|
|
158
158
|
font-weight: var(--fw-medium);
|
|
159
159
|
font-variant-numeric: tabular-nums;
|
|
@@ -185,8 +185,7 @@
|
|
|
185
185
|
height: var(--touch-min);
|
|
186
186
|
padding: 0;
|
|
187
187
|
}
|
|
188
|
-
.btn--icon.btn--sm { width:
|
|
189
|
-
.btn--icon.btn--lg { width: 52px; height: 52px; }
|
|
188
|
+
.btn--icon.btn--sm { width: var(--circle-size); height: var(--circle-size); }
|
|
190
189
|
|
|
191
190
|
.btn--circle {
|
|
192
191
|
border-radius: var(--radius-full);
|
package/css/components/chip.css
CHANGED
|
@@ -213,8 +213,8 @@
|
|
|
213
213
|
display: inline-flex;
|
|
214
214
|
align-items: center;
|
|
215
215
|
justify-content: center;
|
|
216
|
-
width:
|
|
217
|
-
height:
|
|
216
|
+
width: var(--circle-size-sm);
|
|
217
|
+
height: var(--circle-size-sm);
|
|
218
218
|
border-radius: var(--radius-full);
|
|
219
219
|
color: var(--text-subtle);
|
|
220
220
|
background: transparent;
|
|
@@ -102,8 +102,8 @@
|
|
|
102
102
|
display: inline-flex;
|
|
103
103
|
align-items: center;
|
|
104
104
|
justify-content: center;
|
|
105
|
-
width:
|
|
106
|
-
height:
|
|
105
|
+
width: var(--circle-size-lg);
|
|
106
|
+
height: var(--circle-size-lg);
|
|
107
107
|
background: var(--surface-default);
|
|
108
108
|
color: var(--text-muted);
|
|
109
109
|
border-radius: var(--radius-full);
|
|
@@ -152,8 +152,8 @@
|
|
|
152
152
|
}
|
|
153
153
|
|
|
154
154
|
.skeleton--circle {
|
|
155
|
-
width:
|
|
156
|
-
height:
|
|
155
|
+
width: var(--circle-size);
|
|
156
|
+
height: var(--circle-size);
|
|
157
157
|
border-radius: var(--radius-full);
|
|
158
158
|
}
|
|
159
159
|
|
package/css/components/hero.css
CHANGED
|
@@ -62,9 +62,9 @@
|
|
|
62
62
|
|
|
63
63
|
.hero__amount {
|
|
64
64
|
/* 2026-05-13: fs-80 → fs-100 (25% storre) for mer display-tyngd.
|
|
65
|
-
2026-05-
|
|
66
|
-
|
|
67
|
-
font-size: var(--
|
|
65
|
+
Sprint 2 (2026-05-21): --hero-amount-fz-token raderad, font-size
|
|
66
|
+
läser --fs-100 direkt. */
|
|
67
|
+
font-size: var(--fs-100);
|
|
68
68
|
/* Undantag fran 400/500-policy (regel 5): display-siffra, inte
|
|
69
69
|
UI-text. 600 ger nodvandig visuell tyngd pa hero-storlekar.
|
|
70
70
|
Per ADR 0019 garlder weight 600 alla hero__amount-instances
|
|
@@ -63,8 +63,8 @@
|
|
|
63
63
|
display: inline-flex;
|
|
64
64
|
align-items: center;
|
|
65
65
|
justify-content: center;
|
|
66
|
-
width:
|
|
67
|
-
height:
|
|
66
|
+
width: var(--circle-size);
|
|
67
|
+
height: var(--circle-size);
|
|
68
68
|
background: var(--surface-default);
|
|
69
69
|
color: var(--accent-text);
|
|
70
70
|
border-radius: var(--radius-14);
|