@klodd/ds 5.4.3 → 5.5.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/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 +1 -1
- 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 +0 -9
- package/package.json +1 -1
- 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
|
|
@@ -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
|
@@ -64,7 +64,7 @@
|
|
|
64
64
|
/* 2026-05-13: fs-80 → fs-100 (25% storre) for mer display-tyngd.
|
|
65
65
|
2026-05-14 (ADR 0019): font-size konsumerar --hero-amount-fz-token
|
|
66
66
|
for app-override-mojlighet. */
|
|
67
|
-
font-size: var(--
|
|
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);
|
|
@@ -6,8 +6,8 @@
|
|
|
6
6
|
- Hard-refresh-trigger via klick (se hard-refresh.js)
|
|
7
7
|
- Subtle accent-soft-bg + accent-text istallet for accent-9-gradient
|
|
8
8
|
|
|
9
|
-
Storlek
|
|
10
|
-
|
|
9
|
+
Storlek 44x44 (--touch-min) for WCAG-godkänd tap-area, höjd från
|
|
10
|
+
36x36 i Sprint 1 Del C.
|
|
11
11
|
|
|
12
12
|
Blocks:
|
|
13
13
|
.pwa-avatar - klickbar app-brand-avatar (button-element)
|
|
@@ -176,8 +176,8 @@
|
|
|
176
176
|
display: inline-flex;
|
|
177
177
|
align-items: center;
|
|
178
178
|
justify-content: center;
|
|
179
|
-
width:
|
|
180
|
-
height:
|
|
179
|
+
width: var(--circle-size-lg);
|
|
180
|
+
height: var(--circle-size-lg);
|
|
181
181
|
background: var(--surface-raised);
|
|
182
182
|
border: 1px solid var(--border-default);
|
|
183
183
|
border-radius: var(--radius-full);
|
|
@@ -39,8 +39,8 @@
|
|
|
39
39
|
.upload-spinner-overlay.is-visible { display: flex; }
|
|
40
40
|
|
|
41
41
|
.upload-spinner {
|
|
42
|
-
width:
|
|
43
|
-
height:
|
|
42
|
+
width: var(--circle-size-lg);
|
|
43
|
+
height: var(--circle-size-lg);
|
|
44
44
|
border: 3px solid var(--accent-a3);
|
|
45
45
|
border-top-color: var(--accent-9);
|
|
46
46
|
border-radius: var(--radius-full);
|
package/css/index.css
CHANGED
|
@@ -78,15 +78,6 @@
|
|
|
78
78
|
@import './components/kv-list.css';
|
|
79
79
|
@import './components/offline.css';
|
|
80
80
|
|
|
81
|
-
/* v4.4.0 - lyft fran Ekonom-domain (ADR 0020 - domain-to-package) */
|
|
82
|
-
@import './components/review-banner.css';
|
|
83
|
-
@import './components/matched-row.css';
|
|
84
|
-
@import './components/status-icon.css';
|
|
85
|
-
@import './components/tag-inline.css';
|
|
86
|
-
@import './components/kvp-arrow.css';
|
|
87
|
-
@import './components/icon-circle.css';
|
|
88
|
-
@import './components/expandable-row.css';
|
|
89
|
-
@import './components/item-stack.css';
|
|
90
81
|
/* column-bar.css + dual-bar.css RADERADE v5.0.0 (ADR 0022) -
|
|
91
82
|
amorterings-historik visas som kv-list (siffror) istallet for
|
|
92
83
|
vertikala staplar; equity-split visas som tva .progress med
|
package/package.json
CHANGED
|
@@ -1,176 +0,0 @@
|
|
|
1
|
-
/* ================================================================
|
|
2
|
-
components/expandable-row.css
|
|
3
|
-
Klickbar collapsible-summary-rad. Header visar label + total-amount
|
|
4
|
-
+ chevron. Body visas nar expanderad (via JS data-expanded + CSS
|
|
5
|
-
:has-style eller class-toggling).
|
|
6
|
-
|
|
7
|
-
Anvands for kategori-rollups (Mat 1234 kr expanderar till listing
|
|
8
|
-
av transaktioner), sektion-totaler, drill-down-aggregat.
|
|
9
|
-
|
|
10
|
-
Lyft fran Ekonom v4.4.0 (var .cat-row + .cat-list-row, ADR 0020).
|
|
11
|
-
|
|
12
|
-
Blocks:
|
|
13
|
-
.expandable-row - block med header + collapsible body
|
|
14
|
-
.expandable-list - <ul>-wrapper for flera expandable-rows
|
|
15
|
-
.expandable-row__item - BEM-element: nested item inom expanderad
|
|
16
|
-
body (anvands utan att vara child av
|
|
17
|
-
.expandable-row i CSS, lever via JS-
|
|
18
|
-
expansion)
|
|
19
|
-
|
|
20
|
-
Element:
|
|
21
|
-
.expandable-row__header - klickbar header-rad
|
|
22
|
-
.expandable-row__label - vansterstalld text
|
|
23
|
-
.expandable-row__amount - hoger-stalld tabular-amount
|
|
24
|
-
.expandable-row__chev - chevron-svg, roterar 180deg vid expanded
|
|
25
|
-
.expandable-row__total - footer-rad med summa nar body expanderad
|
|
26
|
-
|
|
27
|
-
Item-element:
|
|
28
|
-
.expandable-row__item-list - <ul>-wrapper for items inom body
|
|
29
|
-
.expandable-row__item-body - container for item-rad
|
|
30
|
-
.expandable-row__item-desc - description-text (ellipsis-truncerad)
|
|
31
|
-
.expandable-row__item-date - micro-date-text
|
|
32
|
-
.expandable-row__item-amount - tabular-amount
|
|
33
|
-
|
|
34
|
-
Item-modifiers:
|
|
35
|
-
.expandable-row__item--excluded - strikethrough + muted
|
|
36
|
-
.expandable-row__item--pending - subtle-color amount
|
|
37
|
-
.expandable-row__item--clickable - hover/focus-feedback
|
|
38
|
-
.expandable-row__item--credit - positive-fargad amount
|
|
39
|
-
================================================================ */
|
|
40
|
-
|
|
41
|
-
.expandable-list {
|
|
42
|
-
list-style: none;
|
|
43
|
-
padding: 0;
|
|
44
|
-
margin: 0;
|
|
45
|
-
}
|
|
46
|
-
|
|
47
|
-
.expandable-row {
|
|
48
|
-
border-top: var(--border-hairline-subtle);
|
|
49
|
-
}
|
|
50
|
-
|
|
51
|
-
.expandable-row:first-child {
|
|
52
|
-
border-top: 0;
|
|
53
|
-
}
|
|
54
|
-
|
|
55
|
-
.expandable-row__header {
|
|
56
|
-
display: flex;
|
|
57
|
-
align-items: center;
|
|
58
|
-
gap: var(--space-10);
|
|
59
|
-
padding: var(--space-10) 0;
|
|
60
|
-
cursor: pointer;
|
|
61
|
-
font-size: var(--fs-14);
|
|
62
|
-
color: var(--text-default);
|
|
63
|
-
}
|
|
64
|
-
|
|
65
|
-
.expandable-row__header:focus-visible {
|
|
66
|
-
outline: 2px solid var(--accent-9);
|
|
67
|
-
outline-offset: -2px;
|
|
68
|
-
border-radius: var(--radius-4);
|
|
69
|
-
}
|
|
70
|
-
|
|
71
|
-
.expandable-row[data-expanded] .expandable-row__chev {
|
|
72
|
-
transform: rotate(180deg);
|
|
73
|
-
}
|
|
74
|
-
|
|
75
|
-
.expandable-row__label { flex: 1; min-width: 0; }
|
|
76
|
-
.expandable-row__amount { font-variant-numeric: tabular-nums; color: var(--text-default); }
|
|
77
|
-
|
|
78
|
-
.expandable-row__chev {
|
|
79
|
-
color: var(--text-muted);
|
|
80
|
-
transition: var(--tr-transform-medium);
|
|
81
|
-
flex-shrink: 0;
|
|
82
|
-
}
|
|
83
|
-
|
|
84
|
-
.expandable-row__total {
|
|
85
|
-
display: flex;
|
|
86
|
-
gap: var(--space-10);
|
|
87
|
-
padding: var(--space-12) 0 var(--space-4);
|
|
88
|
-
font-weight: var(--fw-medium);
|
|
89
|
-
border-top: var(--border-hairline-default);
|
|
90
|
-
}
|
|
91
|
-
|
|
92
|
-
.expandable-row__total .expandable-row__amount { font-weight: var(--fw-medium); }
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
/* ================================================================
|
|
96
|
-
==== ITEMS (inom expanderad body)
|
|
97
|
-
================================================================ */
|
|
98
|
-
|
|
99
|
-
.expandable-row__item-list {
|
|
100
|
-
list-style: none;
|
|
101
|
-
padding: var(--space-4) 0 var(--space-12) var(--space-12);
|
|
102
|
-
margin: 0;
|
|
103
|
-
border-left: var(--bw-medium) solid var(--border-subtle);
|
|
104
|
-
}
|
|
105
|
-
|
|
106
|
-
.expandable-row__item {
|
|
107
|
-
display: flex;
|
|
108
|
-
align-items: center;
|
|
109
|
-
gap: var(--space-10);
|
|
110
|
-
padding: var(--space-6) 0;
|
|
111
|
-
font-size: var(--fs-13);
|
|
112
|
-
}
|
|
113
|
-
|
|
114
|
-
.expandable-row__item-body {
|
|
115
|
-
flex: 1;
|
|
116
|
-
min-width: 0;
|
|
117
|
-
display: flex;
|
|
118
|
-
flex-direction: column;
|
|
119
|
-
gap: var(--space-2);
|
|
120
|
-
}
|
|
121
|
-
|
|
122
|
-
.expandable-row__item-desc {
|
|
123
|
-
color: var(--text-subtle);
|
|
124
|
-
white-space: nowrap;
|
|
125
|
-
overflow: hidden;
|
|
126
|
-
text-overflow: ellipsis;
|
|
127
|
-
}
|
|
128
|
-
|
|
129
|
-
.expandable-row__item-date {
|
|
130
|
-
font-size: var(--fs-11);
|
|
131
|
-
color: var(--text-muted);
|
|
132
|
-
}
|
|
133
|
-
|
|
134
|
-
.expandable-row__item-amount {
|
|
135
|
-
color: var(--text-subtle);
|
|
136
|
-
font-variant-numeric: tabular-nums;
|
|
137
|
-
flex-shrink: 0;
|
|
138
|
-
}
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
/* ================================================================
|
|
142
|
-
==== ITEM MODIFIERS
|
|
143
|
-
================================================================ */
|
|
144
|
-
|
|
145
|
-
.expandable-row__item--clickable {
|
|
146
|
-
cursor: pointer;
|
|
147
|
-
transition: var(--tr-bg-fast);
|
|
148
|
-
}
|
|
149
|
-
|
|
150
|
-
@media (hover: hover) and (pointer: fine) {
|
|
151
|
-
.expandable-row__item--clickable:hover { background: var(--surface-subtle); }
|
|
152
|
-
}
|
|
153
|
-
|
|
154
|
-
.expandable-row__item--clickable:focus-visible {
|
|
155
|
-
outline: 2px solid var(--accent-9);
|
|
156
|
-
outline-offset: -2px;
|
|
157
|
-
border-radius: var(--radius-4);
|
|
158
|
-
}
|
|
159
|
-
|
|
160
|
-
.expandable-row__item--excluded .expandable-row__item-desc,
|
|
161
|
-
.expandable-row__item--excluded .expandable-row__item-amount {
|
|
162
|
-
color: var(--text-muted);
|
|
163
|
-
}
|
|
164
|
-
|
|
165
|
-
.expandable-row__item--excluded .expandable-row__item-amount {
|
|
166
|
-
text-decoration: line-through;
|
|
167
|
-
text-decoration-thickness: 1px;
|
|
168
|
-
}
|
|
169
|
-
|
|
170
|
-
.expandable-row__item--pending .expandable-row__item-amount {
|
|
171
|
-
color: var(--text-subtle);
|
|
172
|
-
}
|
|
173
|
-
|
|
174
|
-
.expandable-row__item--credit .expandable-row__item-amount {
|
|
175
|
-
color: var(--positive);
|
|
176
|
-
}
|
|
@@ -1,46 +0,0 @@
|
|
|
1
|
-
/* ================================================================
|
|
2
|
-
components/icon-circle.css
|
|
3
|
-
Rund icon-container med tonad bakgrund. Anvands for status-
|
|
4
|
-
indikatorer i list-rader (bank-koppling kompletterad, level-up
|
|
5
|
-
uppnatt, notis-dot etc).
|
|
6
|
-
|
|
7
|
-
Storlek 28x28 default - tatare an .avatar (36x36) for in-line
|
|
8
|
-
placement bredvid text-rader.
|
|
9
|
-
|
|
10
|
-
Lyft fran Ekonom v4.4.0 (var .bank-row-icon, ADR 0020).
|
|
11
|
-
|
|
12
|
-
Blocks:
|
|
13
|
-
.icon-circle - 28x28 round icon-container
|
|
14
|
-
|
|
15
|
-
Modifiers:
|
|
16
|
-
.icon-circle--positive - gron tonad bg + gron icon-color (check etc)
|
|
17
|
-
.icon-circle--warning - warning-tonad bg + warning-color
|
|
18
|
-
.icon-circle--negative - danger-tonad bg + danger-color
|
|
19
|
-
================================================================ */
|
|
20
|
-
.icon-circle {
|
|
21
|
-
display: inline-flex;
|
|
22
|
-
align-items: center;
|
|
23
|
-
justify-content: center;
|
|
24
|
-
width: var(--space-28);
|
|
25
|
-
height: var(--space-28);
|
|
26
|
-
margin-right: var(--space-12);
|
|
27
|
-
border-radius: 50%;
|
|
28
|
-
flex-shrink: 0;
|
|
29
|
-
background: var(--surface-default);
|
|
30
|
-
color: var(--text-subtle);
|
|
31
|
-
}
|
|
32
|
-
|
|
33
|
-
.icon-circle--positive {
|
|
34
|
-
background: var(--positive-dim);
|
|
35
|
-
color: var(--positive);
|
|
36
|
-
}
|
|
37
|
-
|
|
38
|
-
.icon-circle--warning {
|
|
39
|
-
background: var(--warning-dim);
|
|
40
|
-
color: var(--warning);
|
|
41
|
-
}
|
|
42
|
-
|
|
43
|
-
.icon-circle--negative {
|
|
44
|
-
background: var(--negative-dim, var(--bg-danger));
|
|
45
|
-
color: var(--negative, var(--accent-danger));
|
|
46
|
-
}
|
|
@@ -1,43 +0,0 @@
|
|
|
1
|
-
/* ================================================================
|
|
2
|
-
components/item-stack.css
|
|
3
|
-
Grupp av identiska items som collapsible-staplade en presentation.
|
|
4
|
-
Header visar "X st" + summa, body expanderar till N individuella rader.
|
|
5
|
-
|
|
6
|
-
Typisk anvandning: identiska transaktioner (samma description, samma
|
|
7
|
-
merchant) som grupperas under en wrapper med expand-toggle - sa user
|
|
8
|
-
ser inte "Netflix 139 kr" sex ganger utan en stack "Netflix (6 st)"
|
|
9
|
-
som kan expanderas.
|
|
10
|
-
|
|
11
|
-
Lyft fran Ekonom v4.4.0 (var .cat-tx-stack, ADR 0020).
|
|
12
|
-
|
|
13
|
-
Blocks:
|
|
14
|
-
.item-stack - block med collapsible header + body
|
|
15
|
-
|
|
16
|
-
Element:
|
|
17
|
-
.item-stack__icon - file-stack-ikon till vanster (accent nar
|
|
18
|
-
expanded, muted default)
|
|
19
|
-
.item-stack__header - klickbar header-rad ("Netflix (6 st)" + summa)
|
|
20
|
-
.item-stack__body - <ul> med individuella items
|
|
21
|
-
================================================================ */
|
|
22
|
-
.item-stack {
|
|
23
|
-
list-style: none;
|
|
24
|
-
}
|
|
25
|
-
|
|
26
|
-
.item-stack__icon {
|
|
27
|
-
color: var(--text-muted);
|
|
28
|
-
flex-shrink: 0;
|
|
29
|
-
}
|
|
30
|
-
|
|
31
|
-
.item-stack__header {
|
|
32
|
-
cursor: pointer;
|
|
33
|
-
}
|
|
34
|
-
|
|
35
|
-
.item-stack[data-expanded] .item-stack__icon {
|
|
36
|
-
color: var(--accent-9);
|
|
37
|
-
}
|
|
38
|
-
|
|
39
|
-
.item-stack__body {
|
|
40
|
-
list-style: none;
|
|
41
|
-
margin: 0;
|
|
42
|
-
padding: 0 0 0 var(--space-22);
|
|
43
|
-
}
|
|
@@ -1,22 +0,0 @@
|
|
|
1
|
-
/* ================================================================
|
|
2
|
-
components/kvp-arrow.css
|
|
3
|
-
Key-value-pair-arrow + target. Visualiserar mapping fran ett
|
|
4
|
-
keyword/key till en kategori/target. Typisk anvandning: rule-
|
|
5
|
-
editors dar man visar "ICA -> Mat" eller "STANDARD -> Premium".
|
|
6
|
-
|
|
7
|
-
Lyft fran Ekonom v4.4.0 (var .rule-arrow + .rule-cat, ADR 0020).
|
|
8
|
-
|
|
9
|
-
Blocks:
|
|
10
|
-
.kvp-arrow - disabled-fargad arrow-text ("->")
|
|
11
|
-
.kvp-target - accent-fargad target-text (vad keyword:et mappar till)
|
|
12
|
-
================================================================ */
|
|
13
|
-
.kvp-arrow {
|
|
14
|
-
color: var(--text-disabled);
|
|
15
|
-
margin: 0 var(--space-4);
|
|
16
|
-
font-weight: var(--fw-regular);
|
|
17
|
-
}
|
|
18
|
-
|
|
19
|
-
.kvp-target {
|
|
20
|
-
color: var(--accent-9);
|
|
21
|
-
font-weight: var(--fw-medium);
|
|
22
|
-
}
|
|
@@ -1,51 +0,0 @@
|
|
|
1
|
-
/* ================================================================
|
|
2
|
-
components/matched-row.css
|
|
3
|
-
Rad-pattern for items som har match/pending-status. Klickbar rad
|
|
4
|
-
med status-icon till vanster. State-modifiers styr visual feedback.
|
|
5
|
-
|
|
6
|
-
Typisk anvandning: lista av forvantade items dar varje rad far
|
|
7
|
-
visual indicator om den matchats mot en faktisk handelse
|
|
8
|
-
(subscription-placeholders matchade mot bank-tx, kalender-events
|
|
9
|
-
matchade mot kalkyl etc).
|
|
10
|
-
|
|
11
|
-
Lyft fran Ekonom v4.4.0 (var .sub-row, ADR 0020). Lever ofta inom
|
|
12
|
-
.expandable-row__item men kan vara standalone.
|
|
13
|
-
|
|
14
|
-
Blocks:
|
|
15
|
-
.matched-row - klickbar rad med match-status
|
|
16
|
-
|
|
17
|
-
Element:
|
|
18
|
-
.matched-row__status-icon - 18px width-slot for SVG-icon till vanster
|
|
19
|
-
|
|
20
|
-
Modifiers:
|
|
21
|
-
.matched-row--matched - positive-state (gron icon, default-text)
|
|
22
|
-
.matched-row--pending - awaiting-state (gra icon, italic, 72% opacity)
|
|
23
|
-
================================================================ */
|
|
24
|
-
.matched-row {
|
|
25
|
-
cursor: pointer;
|
|
26
|
-
transition: var(--tr-bg-fast);
|
|
27
|
-
padding-left: var(--space-4);
|
|
28
|
-
}
|
|
29
|
-
|
|
30
|
-
@media (hover: hover) and (pointer: fine) {
|
|
31
|
-
.matched-row:hover { background: var(--surface-subtle); }
|
|
32
|
-
}
|
|
33
|
-
|
|
34
|
-
.matched-row:focus-visible {
|
|
35
|
-
outline: 2px solid var(--accent-9);
|
|
36
|
-
outline-offset: -2px;
|
|
37
|
-
border-radius: var(--radius-4);
|
|
38
|
-
}
|
|
39
|
-
|
|
40
|
-
.matched-row__status-icon {
|
|
41
|
-
display: inline-flex;
|
|
42
|
-
align-items: center;
|
|
43
|
-
justify-content: center;
|
|
44
|
-
width: 18px;
|
|
45
|
-
flex-shrink: 0;
|
|
46
|
-
color: var(--text-muted);
|
|
47
|
-
}
|
|
48
|
-
|
|
49
|
-
.matched-row--matched .matched-row__status-icon { color: var(--positive); }
|
|
50
|
-
.matched-row--pending { opacity: 0.72; }
|
|
51
|
-
.matched-row--pending .matched-row__status-icon { color: var(--text-muted); }
|
|
@@ -1,70 +0,0 @@
|
|
|
1
|
-
/* ================================================================
|
|
2
|
-
components/review-banner.css
|
|
3
|
-
Generic warning-CTA-banner: titel + meta + chevron i pill-form.
|
|
4
|
-
Anvands for "X att granska/atgarda"-rader som lankar till en
|
|
5
|
-
review-vy. Warning-toned bakgrund.
|
|
6
|
-
|
|
7
|
-
Lyft fran Ekonom v4.4.0 (ADR 0020). Konsumeras av alla appar som
|
|
8
|
-
har en granskning/atgards-flow.
|
|
9
|
-
|
|
10
|
-
Blocks:
|
|
11
|
-
.review-banner - klickbar warning-CTA-banner
|
|
12
|
-
|
|
13
|
-
Element:
|
|
14
|
-
.review-banner__title - rubrik-text (fs-14 medium)
|
|
15
|
-
.review-banner__meta - underrubrik (fs-12 subtle)
|
|
16
|
-
.review-banner__chev - chevron-svg, hoger-stalld
|
|
17
|
-
|
|
18
|
-
HTML:
|
|
19
|
-
<a href="/granskning" class="review-banner">
|
|
20
|
-
<div>
|
|
21
|
-
<p class="review-banner__title">X att granska</p>
|
|
22
|
-
<p class="review-banner__meta">Mojliga utgifter</p>
|
|
23
|
-
</div>
|
|
24
|
-
<svg class="review-banner__chev"...></svg>
|
|
25
|
-
</a>
|
|
26
|
-
================================================================ */
|
|
27
|
-
.review-banner {
|
|
28
|
-
display: flex;
|
|
29
|
-
align-items: center;
|
|
30
|
-
justify-content: space-between;
|
|
31
|
-
gap: var(--space-12);
|
|
32
|
-
background: var(--warning-dim);
|
|
33
|
-
border: var(--bw-hairline) solid var(--warning-border);
|
|
34
|
-
border-radius: var(--radius-14);
|
|
35
|
-
padding: var(--space-14) var(--space-16);
|
|
36
|
-
margin-bottom: var(--space-14);
|
|
37
|
-
color: var(--text-default);
|
|
38
|
-
text-decoration: none;
|
|
39
|
-
transition: var(--tr-bg-base);
|
|
40
|
-
}
|
|
41
|
-
|
|
42
|
-
@media (hover: hover) and (pointer: fine) {
|
|
43
|
-
.review-banner:hover {
|
|
44
|
-
text-decoration: none;
|
|
45
|
-
background: var(--warning-hover, var(--warning-dim));
|
|
46
|
-
}
|
|
47
|
-
}
|
|
48
|
-
|
|
49
|
-
.review-banner:focus-visible {
|
|
50
|
-
outline: 2px solid var(--accent-9);
|
|
51
|
-
outline-offset: 2px;
|
|
52
|
-
}
|
|
53
|
-
|
|
54
|
-
.review-banner__title {
|
|
55
|
-
font-size: var(--fs-14);
|
|
56
|
-
font-weight: var(--fw-medium);
|
|
57
|
-
color: var(--text-default);
|
|
58
|
-
margin: 0;
|
|
59
|
-
}
|
|
60
|
-
|
|
61
|
-
.review-banner__meta {
|
|
62
|
-
font-size: var(--fs-12);
|
|
63
|
-
color: var(--text-subtle);
|
|
64
|
-
margin: var(--space-2) 0 0;
|
|
65
|
-
}
|
|
66
|
-
|
|
67
|
-
.review-banner__chev {
|
|
68
|
-
opacity: 0.7;
|
|
69
|
-
flex-shrink: 0;
|
|
70
|
-
}
|
|
@@ -1,32 +0,0 @@
|
|
|
1
|
-
/* ================================================================
|
|
2
|
-
components/status-icon.css
|
|
3
|
-
Inline status-icon i text-flow (clock, alert, check). Tightare
|
|
4
|
-
pa baseline + flex-shrink:0 sa den inte staucher i smala containers.
|
|
5
|
-
|
|
6
|
-
Anvands typiskt efter en description-text for att signalera tillstand:
|
|
7
|
-
pending, stale, success, warning.
|
|
8
|
-
|
|
9
|
-
Lyft fran Ekonom v4.4.0 (var .tx-pending-icon, ADR 0020).
|
|
10
|
-
|
|
11
|
-
Blocks:
|
|
12
|
-
.status-icon - inline-flex SVG-wrapper for status-indicator
|
|
13
|
-
|
|
14
|
-
Modifiers:
|
|
15
|
-
.status-icon--pending - default muted-color (clock-icon)
|
|
16
|
-
.status-icon--stale - warning-color (clock som blivit gammal)
|
|
17
|
-
.status-icon--success - positive-color (check)
|
|
18
|
-
.status-icon--warning - warning-color (alert)
|
|
19
|
-
================================================================ */
|
|
20
|
-
.status-icon {
|
|
21
|
-
display: inline-flex;
|
|
22
|
-
align-items: center;
|
|
23
|
-
margin-left: var(--space-6);
|
|
24
|
-
color: var(--text-muted);
|
|
25
|
-
vertical-align: -2px;
|
|
26
|
-
flex-shrink: 0;
|
|
27
|
-
}
|
|
28
|
-
|
|
29
|
-
.status-icon--pending { color: var(--text-muted); }
|
|
30
|
-
.status-icon--stale { color: var(--warning); }
|
|
31
|
-
.status-icon--success { color: var(--positive); }
|
|
32
|
-
.status-icon--warning { color: var(--warning); }
|
|
@@ -1,21 +0,0 @@
|
|
|
1
|
-
/* ================================================================
|
|
2
|
-
components/tag-inline.css
|
|
3
|
-
Diskret inline-tag som markerar metadata in-line med brodtext.
|
|
4
|
-
Mindre an .chip - har ingen pill-bakgrund. Bara avvikande font-
|
|
5
|
-
storlek + muted color + slight tracking.
|
|
6
|
-
|
|
7
|
-
Anvands typiskt for inline-status (estimat, beta, deprecated) som
|
|
8
|
-
ska synas men inte dominera surrounding text.
|
|
9
|
-
|
|
10
|
-
Lyft fran Ekonom v4.4.0 (var .estimat-tag, ADR 0020).
|
|
11
|
-
|
|
12
|
-
Blocks:
|
|
13
|
-
.tag-inline - inline-tag i muted text-stil
|
|
14
|
-
================================================================ */
|
|
15
|
-
.tag-inline {
|
|
16
|
-
font-style: normal;
|
|
17
|
-
font-size: var(--fs-11);
|
|
18
|
-
color: var(--text-muted);
|
|
19
|
-
font-weight: var(--fw-regular);
|
|
20
|
-
letter-spacing: var(--ls-tracker, 0.02em);
|
|
21
|
-
}
|
package/js/index.js
DELETED
|
@@ -1,95 +0,0 @@
|
|
|
1
|
-
/* @klodd/ds - JavaScript entry point.
|
|
2
|
-
*
|
|
3
|
-
* Convenience-aggregator som kor enskilda init-funktioner. Default
|
|
4
|
-
* fungerar utan konfiguration (LLM-vanligt). Konfig-objektet kan
|
|
5
|
-
* over-rida vad som ska aktiveras.
|
|
6
|
-
*
|
|
7
|
-
* Anvandning:
|
|
8
|
-
*
|
|
9
|
-
* <script src="https://unpkg.com/@klodd/ds/js/index.js" defer></script>
|
|
10
|
-
* <script>
|
|
11
|
-
* window.addEventListener('DOMContentLoaded', () => {
|
|
12
|
-
* KloddDS.init();
|
|
13
|
-
* });
|
|
14
|
-
* </script>
|
|
15
|
-
*
|
|
16
|
-
* Eller med konfig:
|
|
17
|
-
*
|
|
18
|
-
* KloddDS.init({
|
|
19
|
-
* swPath: '/service-worker.js',
|
|
20
|
-
* lucide: true,
|
|
21
|
-
* barStyles: true,
|
|
22
|
-
* heroRoll: true,
|
|
23
|
-
* pullToRefresh: false,
|
|
24
|
-
* turboNav: false,
|
|
25
|
-
* navOptimistic: true,
|
|
26
|
-
* sheetDrag: true,
|
|
27
|
-
* pwaRegister: false, // satt true + swPath for SW + install-prompts
|
|
28
|
-
* });
|
|
29
|
-
*
|
|
30
|
-
* Individuella moduler kan ocksa importeras separat fran js/-mappen.
|
|
31
|
-
* KloddDS.init() ar bara en convenience-wrapper - den inkluderar inte
|
|
32
|
-
* filerna sjalv, dvs varje modul-fil maste laddas via <script>-tag.
|
|
33
|
-
*
|
|
34
|
-
* Defaults ar konservativa: heavy beteenden (PtR, Turbo Drive, PWA
|
|
35
|
-
* register) ar OFF default. App-mantainern aktiverar opt-in.
|
|
36
|
-
*/
|
|
37
|
-
'use strict';
|
|
38
|
-
|
|
39
|
-
(function (root) {
|
|
40
|
-
const defaults = {
|
|
41
|
-
lucide: true,
|
|
42
|
-
barStyles: true,
|
|
43
|
-
heroRoll: true,
|
|
44
|
-
navOptimistic: true,
|
|
45
|
-
sheetDrag: true,
|
|
46
|
-
pullToRefresh: false,
|
|
47
|
-
turboNav: false,
|
|
48
|
-
pwaRegister: false,
|
|
49
|
-
swPath: '/static/sw.js',
|
|
50
|
-
};
|
|
51
|
-
|
|
52
|
-
const KloddDS = {
|
|
53
|
-
init(config) {
|
|
54
|
-
const cfg = Object.assign({}, defaults, config || {});
|
|
55
|
-
|
|
56
|
-
if (cfg.lucide && typeof root.initLucide === 'function') {
|
|
57
|
-
root.initLucide();
|
|
58
|
-
} else if (cfg.lucide && root.lucide && typeof root.lucide.createIcons === 'function') {
|
|
59
|
-
root.lucide.createIcons();
|
|
60
|
-
}
|
|
61
|
-
|
|
62
|
-
if (cfg.barStyles && typeof root.initBarStyles === 'function') {
|
|
63
|
-
root.initBarStyles();
|
|
64
|
-
}
|
|
65
|
-
|
|
66
|
-
if (cfg.heroRoll && typeof root.initHeroRoll === 'function') {
|
|
67
|
-
root.initHeroRoll();
|
|
68
|
-
}
|
|
69
|
-
|
|
70
|
-
if (cfg.navOptimistic && typeof root.initNavOptimistic === 'function') {
|
|
71
|
-
root.initNavOptimistic();
|
|
72
|
-
}
|
|
73
|
-
|
|
74
|
-
if (cfg.sheetDrag && typeof root.initSheetDrag === 'function') {
|
|
75
|
-
root.initSheetDrag();
|
|
76
|
-
}
|
|
77
|
-
|
|
78
|
-
if (cfg.pullToRefresh && typeof root.initPullToRefresh === 'function') {
|
|
79
|
-
root.initPullToRefresh();
|
|
80
|
-
}
|
|
81
|
-
|
|
82
|
-
if (cfg.turboNav && typeof root.initTurboNav === 'function') {
|
|
83
|
-
root.initTurboNav();
|
|
84
|
-
}
|
|
85
|
-
|
|
86
|
-
if (cfg.pwaRegister && typeof root.initPwaRegister === 'function') {
|
|
87
|
-
root.initPwaRegister({ swPath: cfg.swPath });
|
|
88
|
-
}
|
|
89
|
-
},
|
|
90
|
-
|
|
91
|
-
version: '2.0.0',
|
|
92
|
-
};
|
|
93
|
-
|
|
94
|
-
root.KloddDS = KloddDS;
|
|
95
|
-
})(typeof window !== 'undefined' ? window : globalThis);
|