@klodd/ds 1.0.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 +120 -0
- package/css/00-primitives.css +337 -0
- package/css/10-semantic.css +432 -0
- package/css/apps/ekonom.css +17 -0
- package/css/apps/jubb.css +15 -0
- package/css/base/pwa.css +53 -0
- package/css/base/typography.css +122 -0
- package/css/components/badge.css +98 -0
- package/css/components/button.css +200 -0
- package/css/components/card.css +86 -0
- package/css/components/feedback.css +187 -0
- package/css/components/hero-roll.css +129 -0
- package/css/components/icon.css +60 -0
- package/css/components/input.css +144 -0
- package/css/components/nav.css +192 -0
- package/css/components/overlay.css +128 -0
- package/css/index.css +28 -0
- package/package.json +23 -0
|
@@ -0,0 +1,432 @@
|
|
|
1
|
+
/* ================================================================
|
|
2
|
+
10-SEMANTIC
|
|
3
|
+
Det enda lagret komponenter far referera. Aldrig --gray-N, --blue-N,
|
|
4
|
+
--purple-N eller andra primitives direkt i komponentfiler.
|
|
5
|
+
|
|
6
|
+
Dark-first. Default-blocket galler om data-theme saknas eller ar
|
|
7
|
+
"dark". [data-theme="light"] overrider ytor + text + borders.
|
|
8
|
+
App-byte sker via [data-app="X"] som overrider --accent-* (se
|
|
9
|
+
apps/<app>.css). Komponenter las bara --accent-*, aldrig --blue-*
|
|
10
|
+
eller --purple-*.
|
|
11
|
+
|
|
12
|
+
Konvention pa kommentarer: varje token har "Anvand for: ..." och
|
|
13
|
+
"INTE for: ...". Det ar LLM-instruktionen inbyggd i systemet.
|
|
14
|
+
================================================================ */
|
|
15
|
+
|
|
16
|
+
|
|
17
|
+
/* ================================================================
|
|
18
|
+
==== SURFACES (NAV Aksel lagermodell)
|
|
19
|
+
Ljusare = hogre i z-stacken. Inga skuggor i dark mode - bara
|
|
20
|
+
luminanshierarki (iOS/Linear-modell, ej tonal Material Design).
|
|
21
|
+
================================================================ */
|
|
22
|
+
:root,
|
|
23
|
+
[data-theme="dark"] {
|
|
24
|
+
|
|
25
|
+
/* Sidans yttersta bakgrund. Morkast av alla ytor.
|
|
26
|
+
Anvand for: <html>, <body>, page-background.
|
|
27
|
+
INTE for: kort, paneler, modaler. */
|
|
28
|
+
--surface-page: var(--gray-1);
|
|
29
|
+
|
|
30
|
+
/* Standard innehallsyta. Sektioner, list-rows.
|
|
31
|
+
Anvand for: sektionsbakgrunder, tab-innehall, formulargrupper.
|
|
32
|
+
INTE for: sidans yttersta bakgrund eller upphojda kort. */
|
|
33
|
+
--surface-default: var(--gray-2);
|
|
34
|
+
|
|
35
|
+
/* Upphojd yta - ett steg framfor default.
|
|
36
|
+
Anvand for: kort, paneler, sidopaneler, jobbkort.
|
|
37
|
+
INTE for: modaler och popovers (anvand --surface-overlay). */
|
|
38
|
+
--surface-raised: var(--gray-3);
|
|
39
|
+
|
|
40
|
+
/* Svavande yta - modaler, popovers, dropdowns.
|
|
41
|
+
Anvand for: dialog-bakgrund, tooltip, context-menu, sheets.
|
|
42
|
+
INTE for: inbaddade kort (anvand --surface-raised). */
|
|
43
|
+
--surface-overlay: var(--gray-4);
|
|
44
|
+
|
|
45
|
+
/* Hover-state pa interaktiva ytor.
|
|
46
|
+
Anvand for: :hover-bakgrund pa knappar, rader, kort.
|
|
47
|
+
INTE for: statiska ytor eller fokus-states. */
|
|
48
|
+
--surface-hover: var(--gray-4);
|
|
49
|
+
|
|
50
|
+
/* Active/pressed-state.
|
|
51
|
+
Anvand for: :active-bakgrund, .nav-pod.active.
|
|
52
|
+
INTE for: hover (anvand --surface-hover). */
|
|
53
|
+
--surface-active: var(--gray-5);
|
|
54
|
+
|
|
55
|
+
/* Nedsankt yta - inputs, textarea, kod-block.
|
|
56
|
+
Anvand for: input-bakgrund, code-block, hbar-track.
|
|
57
|
+
INTE for: interaktiva ytor som hover/active. */
|
|
58
|
+
--surface-sunken: var(--gray-2);
|
|
59
|
+
|
|
60
|
+
|
|
61
|
+
/* ================================================================
|
|
62
|
+
==== TEXT
|
|
63
|
+
================================================================ */
|
|
64
|
+
|
|
65
|
+
/* Primar text. Rubriker, etiketter, viktig information.
|
|
66
|
+
Anvand for: alla rubriker, knapptext, viktig metadata.
|
|
67
|
+
INTE for: hjalptext, datum, placeholder. */
|
|
68
|
+
--text-default: var(--gray-12);
|
|
69
|
+
|
|
70
|
+
/* Sekundar text. Datum, meta-info, subtexter.
|
|
71
|
+
Anvand for: metadata, datum, kompletterande information.
|
|
72
|
+
INTE for: rubriker eller primar information. */
|
|
73
|
+
--text-subtle: var(--gray-11);
|
|
74
|
+
|
|
75
|
+
/* Muted text. Platshallare, hint-text, ts-stamps.
|
|
76
|
+
Anvand for: placeholder, hint, micro-labels.
|
|
77
|
+
INTE for: lasbar information med hog prioritet. */
|
|
78
|
+
--text-muted: var(--gray-9);
|
|
79
|
+
|
|
80
|
+
/* Disabled text. Inaktiva element, fade-out.
|
|
81
|
+
Anvand for: disabled-state pa knappar/inputs, tx-meta-faint.
|
|
82
|
+
INTE for: aktiva element. */
|
|
83
|
+
--text-disabled: var(--gray-7);
|
|
84
|
+
|
|
85
|
+
/* Text pa solid accent-bakgrund (knapp, badge, score-pill).
|
|
86
|
+
Anvand for: text inuti --accent-9-bakgrunder.
|
|
87
|
+
INTE for: text pa neutral bakgrund. */
|
|
88
|
+
--text-on-accent: oklch(0.98 0 0);
|
|
89
|
+
|
|
90
|
+
/* Text pa status-bakgrunder (success, warning, danger solid).
|
|
91
|
+
Anvand for: text inuti --bg-success/warning/danger.
|
|
92
|
+
INTE for: text pa neutral bakgrund. */
|
|
93
|
+
--text-on-status: oklch(0.98 0 0);
|
|
94
|
+
|
|
95
|
+
|
|
96
|
+
/* ================================================================
|
|
97
|
+
==== BORDERS
|
|
98
|
+
================================================================ */
|
|
99
|
+
|
|
100
|
+
/* Subtil border. Separatorer, dividers, list-row-borders.
|
|
101
|
+
Anvand for: tunna dividers mellan sektioner, table-row-borders.
|
|
102
|
+
INTE for: interaktiva element eller fokus. */
|
|
103
|
+
--border-subtle: var(--gray-5);
|
|
104
|
+
|
|
105
|
+
/* Standard border. Kort, inputs i vila.
|
|
106
|
+
Anvand for: kortkanter, input-borders, btn-borders.
|
|
107
|
+
INTE for: fokus-states (anvand --border-focus). */
|
|
108
|
+
--border-default: var(--gray-6);
|
|
109
|
+
|
|
110
|
+
/* Stark border. Emphasis, hover pa border.
|
|
111
|
+
Anvand for: hover-state pa inputs, emphasis-borders.
|
|
112
|
+
INTE for: vila-state (anvand --border-default). */
|
|
113
|
+
--border-strong: var(--gray-7);
|
|
114
|
+
|
|
115
|
+
/* Fokusring. Alltid synlig vid keyboard-navigation.
|
|
116
|
+
Anvand for: :focus-visible outline.
|
|
117
|
+
INTE for: hover eller statiska borders. */
|
|
118
|
+
--border-focus: color-mix(in oklch, var(--accent-9) 70%, transparent);
|
|
119
|
+
|
|
120
|
+
|
|
121
|
+
/* ================================================================
|
|
122
|
+
==== ACCENT
|
|
123
|
+
DEN ENDA TOKEN-GRUPPEN SOM BYTS PER APP.
|
|
124
|
+
[data-app="jubb"] -> bla
|
|
125
|
+
[data-app="ekonom"] -> lila
|
|
126
|
+
Komponenter refererar bara --accent-*, aldrig --blue-* eller --purple-*.
|
|
127
|
+
================================================================ */
|
|
128
|
+
|
|
129
|
+
/* Subtil accent-bakgrund. Markta rader, valda items.
|
|
130
|
+
Anvand for: selected-state bakgrunder, highlight-rader.
|
|
131
|
+
INTE for: knappar (anvand --accent-9). */
|
|
132
|
+
--accent-soft: var(--blue-3);
|
|
133
|
+
|
|
134
|
+
/* Mattlig accent. Hover pa accent-bakgrunder.
|
|
135
|
+
Anvand for: hover-state pa --accent-soft-ytor. */
|
|
136
|
+
--accent-moderate: var(--blue-5);
|
|
137
|
+
|
|
138
|
+
/* Primar solid accent. Knappar, badges, score-chips.
|
|
139
|
+
Anvand for: primary button-bakgrund, badges, .accent-bar.
|
|
140
|
+
INTE for: subtila bakgrunder (anvand --accent-soft). */
|
|
141
|
+
--accent-9: var(--blue-9);
|
|
142
|
+
|
|
143
|
+
/* Hover pa solid accent.
|
|
144
|
+
Anvand for: :hover pa --accent-9-knappar. */
|
|
145
|
+
--accent-10: var(--blue-10);
|
|
146
|
+
|
|
147
|
+
/* Accentfargad text pa neutral bakgrund.
|
|
148
|
+
Anvand for: lankar, accentfargade etiketter, .text-accent.
|
|
149
|
+
INTE for: text pa --accent-9-bakgrund (anvand --text-on-accent). */
|
|
150
|
+
--accent-text: var(--blue-11);
|
|
151
|
+
|
|
152
|
+
/* Alpha-varianter via color-mix() - inga hardkodade rgba. */
|
|
153
|
+
--accent-a10: color-mix(in oklch, var(--accent-9) 10%, transparent);
|
|
154
|
+
--accent-a20: color-mix(in oklch, var(--accent-9) 20%, transparent);
|
|
155
|
+
--accent-a40: color-mix(in oklch, var(--accent-9) 40%, transparent);
|
|
156
|
+
|
|
157
|
+
|
|
158
|
+
/* ================================================================
|
|
159
|
+
==== STATUS - solid bakgrunder
|
|
160
|
+
For solid-fyllda badges/banners. Komplettera med --text-on-status.
|
|
161
|
+
================================================================ */
|
|
162
|
+
--bg-success: var(--green-9);
|
|
163
|
+
--bg-warning: var(--amber-9);
|
|
164
|
+
--bg-danger: var(--red-9);
|
|
165
|
+
|
|
166
|
+
|
|
167
|
+
/* ================================================================
|
|
168
|
+
==== STATUS - semantic colors (text + tinted bg + borders)
|
|
169
|
+
Befintlig svensk konvention. Anvand for status-fargad text och
|
|
170
|
+
tonade bakgrundsbanners. Step 9 = bas-fargen, dim/border via
|
|
171
|
+
color-mix.
|
|
172
|
+
================================================================ */
|
|
173
|
+
|
|
174
|
+
/* Positive (gron). Anvand for: gain-belopp, success-chip, .text-positive.
|
|
175
|
+
INTE for: aktion-knappar (anvand --accent-9). */
|
|
176
|
+
--positive: var(--green-9);
|
|
177
|
+
--positive-dim: color-mix(in oklch, var(--green-9) 12%, transparent);
|
|
178
|
+
--positive-border: color-mix(in oklch, var(--green-9) 30%, transparent);
|
|
179
|
+
|
|
180
|
+
/* Negative (rod). Anvand for: loss-belopp, .text-negative.
|
|
181
|
+
INTE for: destruktiva aktioner (anvand --accent-danger). */
|
|
182
|
+
--negative: var(--red-9);
|
|
183
|
+
--negative-dim: color-mix(in oklch, var(--red-9) 12%, transparent);
|
|
184
|
+
--negative-border: color-mix(in oklch, var(--red-9) 30%, transparent);
|
|
185
|
+
|
|
186
|
+
/* Warning (amber). Anvand for: warning-banner, .text-warning, score-pill-medium.
|
|
187
|
+
INTE for: errors (anvand --negative). */
|
|
188
|
+
--warning: var(--amber-9);
|
|
189
|
+
--warning-dim: color-mix(in oklch, var(--amber-9) 12%, transparent);
|
|
190
|
+
--warning-hover: color-mix(in oklch, var(--amber-9) 18%, transparent);
|
|
191
|
+
--warning-border: color-mix(in oklch, var(--amber-9) 30%, transparent);
|
|
192
|
+
|
|
193
|
+
/* Danger (rod, separat fran negative). Anvand for: delete-knappar,
|
|
194
|
+
destructive bekraftelser. Skiljer sig fran --negative for att markera
|
|
195
|
+
IRREVERSIBEL aktion vs faktiskt negativt belopp. */
|
|
196
|
+
--accent-danger: oklch(0.62 0.215 25);
|
|
197
|
+
--accent-danger-dim: color-mix(in oklch, var(--accent-danger) 8%, transparent);
|
|
198
|
+
--accent-danger-border: color-mix(in oklch, var(--accent-danger) 35%, transparent);
|
|
199
|
+
|
|
200
|
+
|
|
201
|
+
/* ================================================================
|
|
202
|
+
==== EFFEKTER
|
|
203
|
+
Skuggor + glass-bakgrunder for nav. Backdrop for sheets/spinner.
|
|
204
|
+
================================================================ */
|
|
205
|
+
|
|
206
|
+
/* Float-skugga for installation-chip, sheet-overlays. */
|
|
207
|
+
--shadow-float: 0 8px 24px rgba(0, 0, 0, 0.35);
|
|
208
|
+
|
|
209
|
+
/* Sheet-backdrop bakom <dialog class="sheet">. */
|
|
210
|
+
--backdrop-sheet: color-mix(in srgb, var(--surface-page) 60%, transparent);
|
|
211
|
+
|
|
212
|
+
/* Spinner-backdrop bakom upload-spinner-overlay. */
|
|
213
|
+
--backdrop-spinner: color-mix(in srgb, var(--surface-page) 88%, transparent);
|
|
214
|
+
|
|
215
|
+
/* Glass-bg for backdrop-blur navigationer (bottom-nav, top-nav). */
|
|
216
|
+
--glass-bg: color-mix(in oklch, var(--surface-overlay) 85%, transparent);
|
|
217
|
+
--glass-bg-fallback: color-mix(in oklch, var(--surface-overlay) 96%, transparent);
|
|
218
|
+
|
|
219
|
+
/* Hero-glow (radial gradient pa main.with-hero-glow).
|
|
220
|
+
Apply via .with-hero-glow pa <main>. */
|
|
221
|
+
--hero-glow:
|
|
222
|
+
radial-gradient(ellipse 90% 100% at 50% 0%,
|
|
223
|
+
color-mix(in oklch, var(--accent-9) 35%, transparent) 0%,
|
|
224
|
+
color-mix(in oklch, var(--accent-9) 12%, transparent) 40%,
|
|
225
|
+
transparent 75%);
|
|
226
|
+
|
|
227
|
+
|
|
228
|
+
/* ================================================================
|
|
229
|
+
==== BORDER-SHORTHANDS
|
|
230
|
+
Atervaning av "Npx solid var(--border-X)" som token.
|
|
231
|
+
================================================================ */
|
|
232
|
+
--border-hairline-faint: var(--bw-hairline) solid color-mix(in oklch, white 4%, transparent);
|
|
233
|
+
--border-hairline-subtle: var(--bw-hairline) solid var(--border-subtle);
|
|
234
|
+
--border-hairline-default: var(--bw-hairline) solid var(--border-default);
|
|
235
|
+
--border-hairline-strong: var(--bw-hairline) solid var(--border-strong);
|
|
236
|
+
|
|
237
|
+
|
|
238
|
+
/* ================================================================
|
|
239
|
+
==== TRANSITIONS - paketerade for atervaning
|
|
240
|
+
================================================================ */
|
|
241
|
+
--tr-color-fast: color var(--dur-fast);
|
|
242
|
+
--tr-color-base: color var(--dur-base);
|
|
243
|
+
--tr-bg-fast: background var(--dur-fast);
|
|
244
|
+
--tr-bg-base: background var(--dur-base);
|
|
245
|
+
--tr-border-base: border-color var(--dur-base);
|
|
246
|
+
--tr-transform-medium: transform var(--dur-medium) var(--ease-default);
|
|
247
|
+
--tr-width-medium: width var(--dur-medium) var(--ease-default);
|
|
248
|
+
--tr-width-slow: width var(--dur-slow) var(--ease-default);
|
|
249
|
+
--tr-width-slower: width var(--dur-slower) var(--ease-default);
|
|
250
|
+
--tr-height-slower: height var(--dur-slower) var(--ease-default);
|
|
251
|
+
--tr-button: background var(--dur-base), color var(--dur-base),
|
|
252
|
+
border-color var(--dur-base), opacity var(--dur-base);
|
|
253
|
+
|
|
254
|
+
|
|
255
|
+
/* ================================================================
|
|
256
|
+
==== LAYOUT - app-niva-konstanter
|
|
257
|
+
================================================================ */
|
|
258
|
+
--bottom-nav-height-semantic: calc(var(--touch-min) + var(--space-12));
|
|
259
|
+
}
|
|
260
|
+
|
|
261
|
+
|
|
262
|
+
/* ================================================================
|
|
263
|
+
==== COMPONENT TOKENS
|
|
264
|
+
Atervaning av samma kombination i 3+ komponenter blir token.
|
|
265
|
+
Annars stannar varden direkt i komponentens regel. Komponenter
|
|
266
|
+
far referera dessa eftersom de ar avledda fran semantic.
|
|
267
|
+
================================================================ */
|
|
268
|
+
:root {
|
|
269
|
+
/* Card / panel */
|
|
270
|
+
--card-bg: var(--surface-default);
|
|
271
|
+
--card-bg-elevated: var(--surface-raised);
|
|
272
|
+
--card-border-color: var(--border-subtle);
|
|
273
|
+
--card-radius: var(--radius-20);
|
|
274
|
+
--card-padding-x: var(--space-18);
|
|
275
|
+
--card-padding-y: var(--space-16);
|
|
276
|
+
--card-margin-bottom: var(--space-14);
|
|
277
|
+
|
|
278
|
+
/* Buttons */
|
|
279
|
+
--btn-radius: var(--radius-full);
|
|
280
|
+
--btn-padding-x: var(--space-20);
|
|
281
|
+
--btn-padding-y: 13px; /* exakt 13px ger 44px min-height */
|
|
282
|
+
--btn-min-height: var(--touch-min);
|
|
283
|
+
--btn-padding-x-sm: var(--space-14);
|
|
284
|
+
--btn-padding-y-sm: var(--space-8);
|
|
285
|
+
--btn-min-height-sm: 36px;
|
|
286
|
+
--btn-icon-size: var(--touch-min);
|
|
287
|
+
--btn-icon-size-sm: 36px;
|
|
288
|
+
|
|
289
|
+
/* Input */
|
|
290
|
+
--input-radius: var(--radius-14);
|
|
291
|
+
--input-padding-x: var(--space-16);
|
|
292
|
+
--input-padding-y: var(--space-14);
|
|
293
|
+
|
|
294
|
+
/* Avatar */
|
|
295
|
+
--avatar-size: 36px;
|
|
296
|
+
--avatar-size-sm: 28px;
|
|
297
|
+
--avatar-size-lg: 56px;
|
|
298
|
+
|
|
299
|
+
/* Tx-row */
|
|
300
|
+
--tx-icon-size: 36px;
|
|
301
|
+
|
|
302
|
+
/* Hero amount sizes (kontextuellt overriden i media queries). */
|
|
303
|
+
--hero-amount-fz: var(--fs-80);
|
|
304
|
+
--hero-amount-card-fz: var(--fs-40);
|
|
305
|
+
--hero-amount-fluid: clamp(40px, 12vw, 80px);
|
|
306
|
+
}
|
|
307
|
+
|
|
308
|
+
|
|
309
|
+
/* ================================================================
|
|
310
|
+
==== LIGHT MODE (data-theme="light")
|
|
311
|
+
Overrider ytor, text och borders. Accent justeras ett steg ljusare
|
|
312
|
+
for batter kontrast pa ljus bakgrund. Komponenter behover inga
|
|
313
|
+
andringar - alla refererar bara semantic tokens.
|
|
314
|
+
================================================================ */
|
|
315
|
+
[data-theme="light"] {
|
|
316
|
+
--surface-page: oklch(0.99 0.002 250);
|
|
317
|
+
--surface-default: oklch(0.96 0.003 250);
|
|
318
|
+
--surface-raised: oklch(0.99 0.002 250);
|
|
319
|
+
--surface-overlay: oklch(0.93 0.004 250);
|
|
320
|
+
--surface-hover: oklch(0.93 0.004 250);
|
|
321
|
+
--surface-active: oklch(0.88 0.005 250);
|
|
322
|
+
--surface-sunken: oklch(0.94 0.003 250);
|
|
323
|
+
|
|
324
|
+
--text-default: var(--gray-1);
|
|
325
|
+
--text-subtle: var(--gray-3);
|
|
326
|
+
--text-muted: var(--gray-6);
|
|
327
|
+
--text-disabled: var(--gray-8);
|
|
328
|
+
|
|
329
|
+
--border-subtle: var(--gray-9);
|
|
330
|
+
--border-default: var(--gray-8);
|
|
331
|
+
--border-strong: var(--gray-7);
|
|
332
|
+
|
|
333
|
+
/* Accent justeras ett steg for batter kontrast i light. */
|
|
334
|
+
--accent-9: var(--blue-8);
|
|
335
|
+
--accent-10: var(--blue-9);
|
|
336
|
+
--accent-text: var(--blue-9);
|
|
337
|
+
}
|
|
338
|
+
|
|
339
|
+
|
|
340
|
+
/* ================================================================
|
|
341
|
+
==== LEGACY ALIASES
|
|
342
|
+
Bakatkompat-skikt sa befintliga komponenter inte krasar under
|
|
343
|
+
migration. Mappar gamla namn mot nya semantic tokens.
|
|
344
|
+
|
|
345
|
+
Migration sker gradvis: nar en komponent rors, byt fran legacy-namn
|
|
346
|
+
till nytt semantic-namn. Behall denna sektion tills alla call-sites
|
|
347
|
+
ar migrerade. Da kan den raderas och DECISIONS.md uppdateras.
|
|
348
|
+
================================================================ */
|
|
349
|
+
:root {
|
|
350
|
+
/* Surfaces (gamla overlay-skala) -> mappa mot nya neutral-stegen. */
|
|
351
|
+
--surface-faint: color-mix(in oklch, white 2%, transparent);
|
|
352
|
+
--surface-subtle: color-mix(in oklch, white 4%, transparent);
|
|
353
|
+
--surface-medium: color-mix(in oklch, white 8%, transparent);
|
|
354
|
+
--surface-strong: color-mix(in oklch, white 12%, transparent);
|
|
355
|
+
|
|
356
|
+
/* Bakgrunder - gamla bg-* mappas till nya surface-*. */
|
|
357
|
+
--bg-sunken: var(--surface-sunken);
|
|
358
|
+
--bg-base: var(--surface-page);
|
|
359
|
+
--bg-surface: var(--surface-raised);
|
|
360
|
+
--bg-raised: var(--surface-raised);
|
|
361
|
+
--bg-hover: var(--surface-hover);
|
|
362
|
+
|
|
363
|
+
/* Text - gamla text-primary/secondary/tertiary/faint. */
|
|
364
|
+
--text-primary: var(--text-default);
|
|
365
|
+
--text-secondary: var(--text-subtle);
|
|
366
|
+
--text-tertiary: var(--text-muted);
|
|
367
|
+
--text-faint: var(--text-disabled);
|
|
368
|
+
|
|
369
|
+
/* Accent - gamla --accent (singular) mappas mot nya --accent-9. */
|
|
370
|
+
--accent: var(--accent-9);
|
|
371
|
+
--accent-hover: var(--accent-10);
|
|
372
|
+
--accent-strong: var(--accent-9);
|
|
373
|
+
--accent-secondary: var(--accent-9);
|
|
374
|
+
--accent-dim: var(--accent-a20);
|
|
375
|
+
--accent-border: var(--accent-a40);
|
|
376
|
+
|
|
377
|
+
/* Accent-link - gamla cirkelknapps-tokens. Mappas mot accent-systemet. */
|
|
378
|
+
--accent-link: var(--accent-text);
|
|
379
|
+
--accent-link-bg: var(--accent-a10);
|
|
380
|
+
--accent-link-bg-hover: var(--accent-a20);
|
|
381
|
+
--accent-link-border: var(--accent-a20);
|
|
382
|
+
--accent-link-border-hover: var(--accent-a40);
|
|
383
|
+
|
|
384
|
+
/* Audit-aliaser fran 2026-05-07 - ofta refererade utan att vara definierade. */
|
|
385
|
+
--text: var(--text-default);
|
|
386
|
+
--border: var(--border-default);
|
|
387
|
+
--surface-2: var(--surface-default);
|
|
388
|
+
--surface-3: var(--surface-raised);
|
|
389
|
+
--accent-rgba: var(--accent-a20);
|
|
390
|
+
|
|
391
|
+
/* Radius - gamla t-shirt-namn mappas mot nya pixel-numeriska. */
|
|
392
|
+
--radius-xs: var(--radius-2);
|
|
393
|
+
--radius-sm: var(--radius-4);
|
|
394
|
+
--radius-md: var(--radius-6);
|
|
395
|
+
--radius-lg: var(--radius-12);
|
|
396
|
+
--radius-xl: var(--radius-14);
|
|
397
|
+
--radius-2xl: var(--radius-16);
|
|
398
|
+
--radius-3xl: var(--radius-20);
|
|
399
|
+
--radius-4xl: var(--radius-24);
|
|
400
|
+
--radius-pill: var(--radius-full);
|
|
401
|
+
|
|
402
|
+
/* Font-weight - --fw-semibold mappas till --fw-medium per 400/500-policy. */
|
|
403
|
+
--fw-semibold: var(--fw-medium);
|
|
404
|
+
|
|
405
|
+
/* Kategori-paletter (Ekonom-only). Behalls for shared-tokens-paritet
|
|
406
|
+
med Ekonom-repot, oanvanda i Jubb. */
|
|
407
|
+
--primitive-cat-mat: color-mix(in oklch, var(--purple-9) 60%, transparent);
|
|
408
|
+
--primitive-cat-el: oklch(0.72 0.135 245);
|
|
409
|
+
--primitive-cat-vatten: oklch(0.78 0.110 200);
|
|
410
|
+
--primitive-cat-avgift: var(--green-9);
|
|
411
|
+
--primitive-cat-noje: oklch(0.72 0.150 350);
|
|
412
|
+
--primitive-cat-amort: oklch(0.72 0.135 160);
|
|
413
|
+
--primitive-cat-ranta: oklch(0.72 0.150 50);
|
|
414
|
+
--primitive-cat-privat: var(--gray-9);
|
|
415
|
+
|
|
416
|
+
--cat-mat: color-mix(in oklch, var(--purple-9) 15%, transparent);
|
|
417
|
+
--cat-mat-icon: var(--primitive-cat-mat);
|
|
418
|
+
--cat-el: color-mix(in oklch, var(--blue-9) 15%, transparent);
|
|
419
|
+
--cat-el-icon: var(--primitive-cat-el);
|
|
420
|
+
--cat-vatten: color-mix(in oklch, oklch(0.78 0.110 200) 15%, transparent);
|
|
421
|
+
--cat-vatten-icon: var(--primitive-cat-vatten);
|
|
422
|
+
--cat-avgift: color-mix(in oklch, var(--green-9) 15%, transparent);
|
|
423
|
+
--cat-avgift-icon: var(--primitive-cat-avgift);
|
|
424
|
+
--cat-noje: color-mix(in oklch, oklch(0.72 0.150 350) 15%, transparent);
|
|
425
|
+
--cat-noje-icon: var(--primitive-cat-noje);
|
|
426
|
+
--cat-amortering: color-mix(in oklch, oklch(0.72 0.135 160) 15%, transparent);
|
|
427
|
+
--cat-amort-icon: var(--primitive-cat-amort);
|
|
428
|
+
--cat-ranta: color-mix(in oklch, oklch(0.72 0.150 50) 15%, transparent);
|
|
429
|
+
--cat-ranta-icon: var(--primitive-cat-ranta);
|
|
430
|
+
--cat-privat: color-mix(in oklch, var(--gray-9) 12%, transparent);
|
|
431
|
+
--cat-privat-icon: var(--primitive-cat-privat);
|
|
432
|
+
}
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
/* ================================================================
|
|
2
|
+
apps/ekonom.css - Ekonom (hushallsekonomi) accent-override
|
|
3
|
+
Sätt data-app="ekonom" pa <html>. Refererar bara primitives, inte
|
|
4
|
+
semantic - eftersom semantic-lagret laser dessa.
|
|
5
|
+
|
|
6
|
+
Ekonom anvander Radix Plum Dark (varm magenta-lila) - tydligt
|
|
7
|
+
annorlunda fran Jubbs Blue utan att krocka. Komponenter laser bara
|
|
8
|
+
--accent-* via 10-semantic.css. De vet aldrig om appen ar Jubb,
|
|
9
|
+
Ekonom eller framtida app.
|
|
10
|
+
================================================================ */
|
|
11
|
+
[data-app="ekonom"] {
|
|
12
|
+
--accent-soft: var(--plum-3);
|
|
13
|
+
--accent-moderate: var(--plum-5);
|
|
14
|
+
--accent-9: var(--plum-9);
|
|
15
|
+
--accent-10: var(--plum-10);
|
|
16
|
+
--accent-text: var(--plum-11);
|
|
17
|
+
}
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
/* ================================================================
|
|
2
|
+
apps/jubb.css - Jubb (jobbradar) accent-override
|
|
3
|
+
Sätt data-app="jubb" pa <html>. Refererar bara primitives, inte
|
|
4
|
+
semantic - eftersom semantic-lagret laser dessa.
|
|
5
|
+
|
|
6
|
+
Komponenter laser bara --accent-* via 10-semantic.css. De vet
|
|
7
|
+
aldrig om appen ar Jubb eller Ekonom.
|
|
8
|
+
================================================================ */
|
|
9
|
+
[data-app="jubb"] {
|
|
10
|
+
--accent-soft: var(--blue-3);
|
|
11
|
+
--accent-moderate: var(--blue-5);
|
|
12
|
+
--accent-9: var(--blue-9);
|
|
13
|
+
--accent-10: var(--blue-10);
|
|
14
|
+
--accent-text: var(--blue-11);
|
|
15
|
+
}
|
package/css/base/pwa.css
ADDED
|
@@ -0,0 +1,53 @@
|
|
|
1
|
+
/* ================================================================
|
|
2
|
+
base/pwa.css
|
|
3
|
+
Minimal grundreset + PWA-essentials. Las efter primitives, semantic,
|
|
4
|
+
apps - sa default-styling refererar nya semantic tokens.
|
|
5
|
+
|
|
6
|
+
Detta lager satter:
|
|
7
|
+
- box-sizing-reset
|
|
8
|
+
- html/body bas-styling med safe-area och dvh
|
|
9
|
+
- Globala fokusringar (:focus-visible)
|
|
10
|
+
- Reduced-motion respekt
|
|
11
|
+
|
|
12
|
+
Mer omfattande Jubb-experience (animations, toasts, view transitions,
|
|
13
|
+
pull-to-refresh, hero-glow) ligger i ds/base.css som laddas darefter.
|
|
14
|
+
================================================================ */
|
|
15
|
+
|
|
16
|
+
*, *::before, *::after {
|
|
17
|
+
box-sizing: border-box;
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
html {
|
|
21
|
+
background: var(--surface-page);
|
|
22
|
+
color: var(--text-default);
|
|
23
|
+
font-family: var(--font-sans);
|
|
24
|
+
font-size: var(--fs-14);
|
|
25
|
+
line-height: var(--lh-base);
|
|
26
|
+
-webkit-font-smoothing: antialiased;
|
|
27
|
+
-moz-osx-font-smoothing: grayscale;
|
|
28
|
+
-webkit-tap-highlight-color: transparent;
|
|
29
|
+
-webkit-text-size-adjust: 100%;
|
|
30
|
+
text-size-adjust: 100%;
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
body {
|
|
34
|
+
margin: 0;
|
|
35
|
+
min-height: 100dvh; /* dynamic viewport - hanterar mobil-browser chrome */
|
|
36
|
+
overscroll-behavior: contain; /* stoppar pull-to-refresh-konflikter */
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
/* Globala fokusringar - alltid synliga vid keyboard-navigation, aldrig vid tap. */
|
|
40
|
+
:focus-visible {
|
|
41
|
+
outline: 2px solid var(--border-focus);
|
|
42
|
+
outline-offset: 2px;
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
/* Respektera OS-installningen "Tillganglighet -> Reducera rorelse". */
|
|
46
|
+
@media (prefers-reduced-motion: reduce) {
|
|
47
|
+
*, *::before, *::after {
|
|
48
|
+
animation-duration: 0.01ms !important;
|
|
49
|
+
animation-iteration-count: 1 !important;
|
|
50
|
+
transition-duration: 0.01ms !important;
|
|
51
|
+
scroll-behavior: auto !important;
|
|
52
|
+
}
|
|
53
|
+
}
|
|
@@ -0,0 +1,122 @@
|
|
|
1
|
+
/* ================================================================
|
|
2
|
+
base/typography.css
|
|
3
|
+
Namngivna stilklasser - bundlar size + weight + line-height +
|
|
4
|
+
letter-spacing + color i en klass per stil.
|
|
5
|
+
|
|
6
|
+
Konvention:
|
|
7
|
+
- Semantiska klasser for rubriker: .heading-1 till .heading-4
|
|
8
|
+
- Storleksbaserade klasser for ovrig text: .text-lg/-base/-sm/-xs
|
|
9
|
+
- Specialstilar: .text-label, .text-meta, .text-mono, .text-on-accent
|
|
10
|
+
|
|
11
|
+
Komponenter satter ALDRIG font-size/weight/line-height direkt -
|
|
12
|
+
anvand dessa klasser eller (i komponentens CSS) primitive-tokens
|
|
13
|
+
med kommentar om varfor en bundlad klass inte rackte.
|
|
14
|
+
|
|
15
|
+
Undantag: .hero-amount (display-siffra, fw 600) - dokumenterat
|
|
16
|
+
undantag i components/hero-roll.css.
|
|
17
|
+
================================================================ */
|
|
18
|
+
|
|
19
|
+
|
|
20
|
+
/* ================================================================
|
|
21
|
+
==== RUBRIKER (semantiska, bundlade stilar)
|
|
22
|
+
1: hero/page-titel - 22px medium, tight
|
|
23
|
+
2: section-titel - 18px medium, tight
|
|
24
|
+
3: card-titel - 15px medium, snug
|
|
25
|
+
4: micro-tracker - 13px medium uppercase, low-emphasis
|
|
26
|
+
================================================================ */
|
|
27
|
+
.heading-1 {
|
|
28
|
+
font-size: var(--fs-22);
|
|
29
|
+
font-weight: var(--fw-medium);
|
|
30
|
+
line-height: var(--lh-tight);
|
|
31
|
+
letter-spacing: -0.02em;
|
|
32
|
+
color: var(--text-default);
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
.heading-2 {
|
|
36
|
+
font-size: var(--fs-18);
|
|
37
|
+
font-weight: var(--fw-medium);
|
|
38
|
+
line-height: var(--lh-tight);
|
|
39
|
+
letter-spacing: -0.01em;
|
|
40
|
+
color: var(--text-default);
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
.heading-3 {
|
|
44
|
+
font-size: var(--fs-15);
|
|
45
|
+
font-weight: var(--fw-medium);
|
|
46
|
+
line-height: var(--lh-snug);
|
|
47
|
+
letter-spacing: 0;
|
|
48
|
+
color: var(--text-default);
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
.heading-4 {
|
|
52
|
+
font-size: var(--fs-13);
|
|
53
|
+
font-weight: var(--fw-medium);
|
|
54
|
+
line-height: var(--lh-snug);
|
|
55
|
+
letter-spacing: 0.01em;
|
|
56
|
+
color: var(--text-subtle);
|
|
57
|
+
text-transform: uppercase;
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
|
|
61
|
+
/* ================================================================
|
|
62
|
+
==== BRODTEXT (storleksbaserad)
|
|
63
|
+
Anvands for paragraph-text, beskrivningar, hjalptext.
|
|
64
|
+
Forga ar default - lagg till .text-on-accent eller en color-klass
|
|
65
|
+
for andra farger.
|
|
66
|
+
================================================================ */
|
|
67
|
+
.text-lg {
|
|
68
|
+
font-size: var(--fs-17);
|
|
69
|
+
line-height: var(--lh-base);
|
|
70
|
+
color: var(--text-default);
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
.text-base {
|
|
74
|
+
font-size: var(--fs-14);
|
|
75
|
+
line-height: var(--lh-base);
|
|
76
|
+
color: var(--text-default);
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
.text-sm {
|
|
80
|
+
font-size: var(--fs-12);
|
|
81
|
+
line-height: var(--lh-base);
|
|
82
|
+
color: var(--text-subtle);
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
.text-xs {
|
|
86
|
+
font-size: var(--fs-11);
|
|
87
|
+
line-height: var(--lh-base);
|
|
88
|
+
color: var(--text-muted);
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
|
|
92
|
+
/* ================================================================
|
|
93
|
+
==== SPECIALSTILAR
|
|
94
|
+
.text-label - mikro-etikett, lh 1 for tight justering bredvid input/badge
|
|
95
|
+
.text-meta - metadata-tex (datum, badge-text)
|
|
96
|
+
.text-mono - monospace for hash, JSON, kod
|
|
97
|
+
.text-on-accent - text inuti --accent-9-bakgrunder
|
|
98
|
+
================================================================ */
|
|
99
|
+
.text-label {
|
|
100
|
+
font-size: var(--fs-12);
|
|
101
|
+
font-weight: var(--fw-medium);
|
|
102
|
+
line-height: 1;
|
|
103
|
+
letter-spacing: 0.02em;
|
|
104
|
+
color: var(--text-default);
|
|
105
|
+
}
|
|
106
|
+
|
|
107
|
+
.text-meta {
|
|
108
|
+
font-size: var(--fs-11);
|
|
109
|
+
line-height: var(--lh-base);
|
|
110
|
+
color: var(--text-muted);
|
|
111
|
+
}
|
|
112
|
+
|
|
113
|
+
.text-mono {
|
|
114
|
+
font-family: var(--font-mono);
|
|
115
|
+
font-size: var(--fs-12);
|
|
116
|
+
line-height: var(--lh-base);
|
|
117
|
+
color: var(--text-subtle);
|
|
118
|
+
}
|
|
119
|
+
|
|
120
|
+
.text-on-accent {
|
|
121
|
+
color: var(--text-on-accent);
|
|
122
|
+
}
|