@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.
Files changed (18) hide show
  1. package/README.md +120 -0
  2. package/css/00-primitives.css +337 -0
  3. package/css/10-semantic.css +432 -0
  4. package/css/apps/ekonom.css +17 -0
  5. package/css/apps/jubb.css +15 -0
  6. package/css/base/pwa.css +53 -0
  7. package/css/base/typography.css +122 -0
  8. package/css/components/badge.css +98 -0
  9. package/css/components/button.css +200 -0
  10. package/css/components/card.css +86 -0
  11. package/css/components/feedback.css +187 -0
  12. package/css/components/hero-roll.css +129 -0
  13. package/css/components/icon.css +60 -0
  14. package/css/components/input.css +144 -0
  15. package/css/components/nav.css +192 -0
  16. package/css/components/overlay.css +128 -0
  17. package/css/index.css +28 -0
  18. package/package.json +23 -0
package/README.md ADDED
@@ -0,0 +1,120 @@
1
+ # @klodd/ds
2
+
3
+ Klodd Design System - delade tokens, typografi och komponenter for
4
+ Klodds appar (Jubb, Ekonom och framtida).
5
+
6
+ Dark-mode-first PWA-designsystem byggt pa Radix Colors. OKLCH-baserade
7
+ fargramper, pixel-numerisk spacing-konvention och tre-lagers token-
8
+ arkitektur som inte krocker mellan apps.
9
+
10
+
11
+ ## Installation
12
+
13
+ ```bash
14
+ npm install @klodd/ds
15
+ ```
16
+
17
+
18
+ ## Anvandning
19
+
20
+ Importera hela designsystemet plus en app-specifik tema-fil:
21
+
22
+ ```html
23
+ <link rel="stylesheet" href="node_modules/@klodd/ds/css/index.css">
24
+ <link rel="stylesheet" href="node_modules/@klodd/ds/css/apps/jubb.css">
25
+ ```
26
+
27
+ Eller via CSS `@import`:
28
+
29
+ ```css
30
+ @import '@klodd/ds/css/index.css';
31
+ @import '@klodd/ds/css/apps/jubb.css';
32
+ ```
33
+
34
+ Aktivera tema pa `<html>`:
35
+
36
+ ```html
37
+ <html lang="sv" data-app="jubb" data-theme="dark">
38
+ ```
39
+
40
+ `data-app` valjer accent-tema (jubb = blue, ekonom = plum).
41
+ `data-theme` valjer light/dark mode (light forberedd, dark default).
42
+
43
+
44
+ ## Token-arkitektur
45
+
46
+ Tre lager med strikt inkapsling. Komponenter laser ALDRIG primitives
47
+ direkt - bara semantic-lagret eller app-tokens.
48
+
49
+ ```
50
+ 00-primitives.css raa varden (gray/blue/plum/violet OKLCH ramps,
51
+ pixel-numerisk space/fs/radius, motion, layout)
52
+ 10-semantic.css komponenter laser hardefran (surface/text/border/
53
+ accent + status + effects + transitions)
54
+ apps/<app>.css per-app accent + surface-overrides (5-15 rader)
55
+ ```
56
+
57
+
58
+ ## Fargsystem
59
+
60
+ Officiella **Radix Colors** dark-skalor:
61
+
62
+ - **Mauve Dark** (neutral) - lila-tonad gra som kompletterar Blue och Plum
63
+ - **Blue Dark** (Jubb accent) - sky-blue (#0090ff)
64
+ - **Plum Dark** (Ekonom accent) - varm magenta-lila (#ab4aba)
65
+ - **Violet Dark** - bevarad for framtida appar
66
+ - **Green/Amber/Red Dark** - status (success/warning/danger)
67
+
68
+ Status-tokens har bade solid-bakgrund (`--bg-success/warning/danger`)
69
+ och tonad/border-varianter (`--positive/-dim/-border`, `--negative`,
70
+ `--warning`).
71
+
72
+
73
+ ## Lagg till en ny app
74
+
75
+ 1. Lagg till accent-ramp i `css/00-primitives.css` om appen ska ha
76
+ eget farg-spektrum (12 stegs Radix-skala, hue valt for app-identitet).
77
+
78
+ 2. Skapa `css/apps/<appname>.css` med fem accent-overrides:
79
+
80
+ ```css
81
+ [data-app="<appname>"] {
82
+ --accent-soft: var(--<color>-3);
83
+ --accent-moderate: var(--<color>-5);
84
+ --accent-9: var(--<color>-9);
85
+ --accent-10: var(--<color>-10);
86
+ --accent-text: var(--<color>-11);
87
+ }
88
+ ```
89
+
90
+ 3. Satt `data-app="<appname>"` i HTML-templaten (eller `<html>`-tag).
91
+
92
+ 4. Klart - inga komponentandringar behovs. Komponenter laser bara
93
+ `--accent-*` och far automatiskt nya farger.
94
+
95
+
96
+ ## Komponenter
97
+
98
+ | Komponent | Klass-prefix | Anvandning |
99
+ |---|---|---|
100
+ | Knappar | `.btn`, `.btn--primary/secondary/ghost/danger` | Aktioner |
101
+ | Inputs | `.input`, `.textarea`, `.select` | Formularsfalt |
102
+ | Badges | `.badge`, `.badge--success/warning/danger`, `.score-pill` | Status-pills |
103
+ | Kort | `.card`, `.card--interactive/flush` | Innehallspaneler |
104
+ | Nav | `.bottom-nav`, `.topbar`, `.tab-bar` | Navigation |
105
+ | Feedback | `.toast`, `.empty-state`, `.skeleton`, `.spinner` | Loading + errors |
106
+ | Overlay | `.dialog`, `.sheet` | Modaler + bottom sheets |
107
+ | Icon | `.icon`, `.icon--xs/sm/md/lg/xl` | Lucide + custom SVG |
108
+ | Hero-roll | `.hero-amount[data-animate-roll]` | Display-siffer-animation |
109
+
110
+
111
+ ## Komplett dokumentation
112
+
113
+ For detaljerad token-referens (vad varje token ska anvandas for/inte
114
+ anvandas for), komponent-CSS-konventioner och exempel - se
115
+ [DESIGN_TOKENS_GUIDE.md i Jubb-repot](https://github.com/drawn124578/Jubb/blob/main/DESIGN_TOKENS_GUIDE.md).
116
+
117
+
118
+ ## License
119
+
120
+ MIT (c) 2026 Carl-Eric Persson
package/css/00-primitives.css ADDED
@@ -0,0 +1,337 @@
1
+ /* ================================================================
2
+ 00-PRIMITIVES
3
+ Raa varden. Aldrig referera direkt fran komponenter.
4
+ Komponenter las semantic tokens (10-semantic.css) eller app-tokens
5
+ (apps/<app>.css). Detta lager byts bara nar appens fundamentala
6
+ palett, spacing eller typografi-skala andras pa systemniva.
7
+
8
+ Radix 12-stegs rollkarta (anvands av --gray, --blue, --purple):
9
+ 1-2 App-bakgrunder
10
+ 3 Komponentbakgrund (vila)
11
+ 4 Komponentbakgrund (hover)
12
+ 5 Komponentbakgrund (active/selected)
13
+ 6 Subtil border / separator
14
+ 7 Interaktiv border
15
+ 8 Stark border / fokusring
16
+ 9 Solid bakgrund (knappar, badges) - purest brand color
17
+ 10 Solid bakgrund (hover pa 9)
18
+ 11 Low-contrast text pa neutral bakgrund
19
+ 12 High-contrast text
20
+
21
+ Konventioner:
22
+ - Farger: OKLCH (perceptuellt jamn, kompositionsvanlig).
23
+ - Spacing/typografi/radius: pixel-numerisk. --space-12 = 12px.
24
+ Ingen mental aritmetik, inga ordinala namn.
25
+ ================================================================ */
26
+
27
+
28
+ /* ================================================================
29
+ ==== COLORS - GRAY (Radix Mauve Dark)
30
+ Mauve ar Radix rekommenderade grå-komplement till blue och violet -
31
+ subtle lila-tonad neutral som sitter snyggt med bagge app-accenterna.
32
+ WCAG-kalibrerade officiella varden, inte hand-tunade.
33
+ ================================================================ */
34
+ :root {
35
+ --gray-1: #121113; /* App bg (morkast) */
36
+ --gray-2: #1a191b; /* App bg sekundar / sektioner */
37
+ --gray-3: #232225; /* Komponent bg (vila) */
38
+ --gray-4: #2b292d; /* Komponent bg (hover) */
39
+ --gray-5: #323035; /* Komponent bg (active) */
40
+ --gray-6: #3c393f; /* Subtil border */
41
+ --gray-7: #49474e; /* Interaktiv border */
42
+ --gray-8: #625f69; /* Stark border / fokusring */
43
+ --gray-9: #6f6d78; /* Solid muted (badge, chip) */
44
+ --gray-10: #7c7a85; /* Solid muted hover */
45
+ --gray-11: #b5b2bc; /* Low-contrast text */
46
+ --gray-12: #eeeef0; /* High-contrast text */
47
+ }
48
+
49
+
50
+ /* ================================================================
51
+ ==== COLORS - BLUE (Radix Blue Dark - Jubb accent)
52
+ Officiella Radix-varden. Step 9 = "Brand-blue" sky-tonad,
53
+ step 11 = accent-text pa neutral bg.
54
+ ================================================================ */
55
+ :root {
56
+ --blue-1: #0d1520;
57
+ --blue-2: #111927;
58
+ --blue-3: #0d2847;
59
+ --blue-4: #003362;
60
+ --blue-5: #004074;
61
+ --blue-6: #104d87;
62
+ --blue-7: #205d9e;
63
+ --blue-8: #2870bd;
64
+ --blue-9: #0090ff; /* Solid - knappar, badges */
65
+ --blue-10: #3b9eff; /* Solid hover */
66
+ --blue-11: #70b8ff; /* Accent text pa neutral */
67
+ --blue-12: #c2e6ff;
68
+ }
69
+
70
+
71
+ /* ================================================================
72
+ ==== COLORS - PURPLE (Radix Violet Dark)
73
+ Officiella Radix-varden. Behalls i shared-system for framtida
74
+ anvandning - inte aktivt for nagon app just nu.
75
+ ================================================================ */
76
+ :root {
77
+ --purple-1: #14121f;
78
+ --purple-2: #1b1525;
79
+ --purple-3: #291f43;
80
+ --purple-4: #33255b;
81
+ --purple-5: #3c2e69;
82
+ --purple-6: #473876;
83
+ --purple-7: #56468b;
84
+ --purple-8: #6958ad;
85
+ --purple-9: #6e56cf;
86
+ --purple-10: #7d66d9;
87
+ --purple-11: #baa7ff;
88
+ --purple-12: #e2ddfe;
89
+ }
90
+
91
+
92
+ /* ================================================================
93
+ ==== COLORS - PLUM (Radix Plum Dark - Ekonom accent)
94
+ Varm magenta-lila. Tydligt annorlunda fran Blue (Jubb) utan att
95
+ krocka. Officiella Radix-varden.
96
+ ================================================================ */
97
+ :root {
98
+ --plum-1: #181118;
99
+ --plum-2: #201320;
100
+ --plum-3: #351a35;
101
+ --plum-4: #451d47;
102
+ --plum-5: #512454;
103
+ --plum-6: #5e3061;
104
+ --plum-7: #734079;
105
+ --plum-8: #92549c;
106
+ --plum-9: #ab4aba; /* Solid - knappar, badges */
107
+ --plum-10: #b658c4; /* Solid hover */
108
+ --plum-11: #e796f3; /* Accent text pa neutral */
109
+ --plum-12: #f4d4f4;
110
+ }
111
+
112
+
113
+ /* ================================================================
114
+ ==== COLORS - STATUS (Radix dark-skalor, step 9)
115
+ Officiella Radix-varden. Text-on-status hardkodad i semantic.
116
+ ================================================================ */
117
+ :root {
118
+ --green-9: #30a46c; /* Radix Green Dark 9 - Success */
119
+ --amber-9: #ffc53d; /* Radix Amber Dark 9 - Warning */
120
+ --red-9: #e5484d; /* Radix Red Dark 9 - Danger */
121
+ }
122
+
123
+
124
+ /* ================================================================
125
+ ==== SPACING - pixel-numerisk, AUKTORITATIV konvention
126
+ --space-N dar N = exakt antal pixlar. Ingen aritmetik.
127
+ ================================================================ */
128
+ :root {
129
+ --space-2: 2px;
130
+ --space-4: 4px;
131
+ --space-6: 6px;
132
+ --space-8: 8px;
133
+ --space-10: 10px;
134
+ --space-12: 12px;
135
+ --space-14: 14px;
136
+ --space-16: 16px;
137
+ --space-18: 18px;
138
+ --space-20: 20px;
139
+ --space-22: 22px;
140
+ --space-24: 24px;
141
+ --space-28: 28px;
142
+ --space-32: 32px;
143
+ --space-40: 40px;
144
+ --space-48: 48px;
145
+ --space-56: 56px;
146
+ --space-64: 64px;
147
+ --space-80: 80px;
148
+ }
149
+
150
+
151
+ /* ================================================================
152
+ ==== TYPOGRAPHY - pixel-numerisk
153
+ --fs-N dar N = exakt antal pixlar.
154
+ 16px ar minimum pa input-element (anti iOS auto-zoom).
155
+ ================================================================ */
156
+ :root {
157
+ --fs-10: 10px;
158
+ --fs-11: 11px;
159
+ --fs-12: 12px;
160
+ --fs-13: 13px;
161
+ --fs-14: 14px;
162
+ --fs-15: 15px;
163
+ --fs-17: 17px;
164
+ --fs-18: 18px;
165
+ --fs-20: 20px;
166
+ --fs-22: 22px;
167
+ --fs-24: 24px;
168
+ --fs-32: 32px;
169
+ --fs-40: 40px;
170
+ --fs-64: 64px;
171
+ --fs-80: 80px;
172
+
173
+ /* Font-weight - bara 400 och 500. Ingen 600 eller 700. */
174
+ --fw-regular: 400;
175
+ --fw-medium: 500;
176
+
177
+ /* Line-height - kalibrerade for hero-amounts och rubriker.
178
+ Andra inte utan visuell verifiering. */
179
+ --lh-tight: 1.0; /* hero-amount, display-numerik */
180
+ --lh-snug: 1.05; /* hero-amount-card, headings */
181
+ --lh-relaxed: 1.2; /* triage-why, sheet-body */
182
+ --lh-base: 1.55; /* brodtext */
183
+
184
+ /* Letter-spacing - negativa for stora siffror, positiva for caps. */
185
+ --ls-tightest: -0.04em;
186
+ --ls-tighter: -0.035em;
187
+ --ls-tight: -0.02em;
188
+ --ls-snug: -0.015em;
189
+ --ls-base: -0.005em;
190
+ --ls-normal: 0;
191
+ --ls-wide: 0.01em;
192
+ --ls-wider: 0.04em;
193
+ --ls-widest: 0.06em;
194
+ --ls-tracker: 0.08em;
195
+ --ls-tracker-lg: 0.1em;
196
+ --ls-tracker-xl: 0.12em;
197
+
198
+ /* Font-stack - Apple system-font (iOS-likt aven pa Win/Linux). */
199
+ --font-sans:
200
+ -apple-system, BlinkMacSystemFont,
201
+ "SF Pro Display", "SF Pro Text",
202
+ "Instrument Sans", "Segoe UI", system-ui, sans-serif;
203
+ --font-numeric: var(--font-sans);
204
+ --font-mono:
205
+ ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
206
+ }
207
+
208
+
209
+ /* ================================================================
210
+ ==== RADIUS - pixel-numerisk
211
+ --radius-N dar N = exakt antal pixlar.
212
+ --radius-full = 9999px (pill-form OCH cirkel for kvadratiska element).
213
+ ================================================================ */
214
+ :root {
215
+ --radius-2: 2px; /* mikro-staplar (cat-bar, hour-bar) */
216
+ --radius-4: 4px; /* small bars, info-block-corners */
217
+ --radius-6: 6px; /* equity-bars, focus-outlines */
218
+ --radius-8: 8px; /* mellan-radius, sub-pills */
219
+ --radius-10: 10px; /* mode-toggles */
220
+ --radius-12: 12px; /* tx-icon, btn-md, sheet-pattern */
221
+ --radius-14: 14px; /* input, btn, avi-image */
222
+ --radius-16: 16px; /* banners */
223
+ --radius-20: 20px; /* panels, cards */
224
+ --radius-24: 24px; /* sheet top */
225
+ --radius-full: 9999px; /* chips, knappar, nav, avatars */
226
+ }
227
+
228
+
229
+ /* ================================================================
230
+ ==== BORDER WIDTHS
231
+ ================================================================ */
232
+ :root {
233
+ --bw-hairline: 0.5px; /* default for hela appen */
234
+ --bw-thin: 1px; /* btn-secondary, tunna cards */
235
+ --bw-medium: 2px; /* focus-rings, indents */
236
+ --bw-thick: 3px; /* warning info-panel, spinner */
237
+ }
238
+
239
+
240
+ /* ================================================================
241
+ ==== MOTION
242
+ Kalibrerade for iOS-feel. Spring-bounce raffinerad pa Safari 17+
243
+ via @supports nedanfor.
244
+ ================================================================ */
245
+ :root {
246
+ --dur-fast: 0.12s;
247
+ --dur-base: 0.15s;
248
+ --dur-medium: 0.2s;
249
+ --dur-slow: 0.3s;
250
+ --dur-slower: 0.4s;
251
+ --dur-slowest: 0.9s;
252
+
253
+ --ease-default: ease;
254
+ --ease-out: ease-out;
255
+ --ease-linear: linear;
256
+ --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
257
+
258
+ /* iOS spring-approximationer (Sprint A, native iOS-feel).
259
+ spring-soft: default for de flesta saker.
260
+ spring-snappy: navigation, sheets.
261
+ spring-bounce: press-release med subtle overshoot. */
262
+ --ease-spring-soft: cubic-bezier(0.32, 0.72, 0, 1);
263
+ --ease-spring-snappy: cubic-bezier(0.4, 0, 0.2, 1);
264
+ --ease-spring-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
265
+
266
+ /* Press-respons (asymmetri). In: snabbt + aggressivt.
267
+ Out: langsammare med spring-back. */
268
+ --press-in-duration: 80ms;
269
+ --press-in-easing: cubic-bezier(0.4, 0, 1, 1);
270
+ --press-out-duration: 160ms;
271
+ --press-out-easing: var(--ease-spring-bounce);
272
+ }
273
+
274
+
275
+ /* ================================================================
276
+ ==== Z-INDEX
277
+ ================================================================ */
278
+ :root {
279
+ --z-nav: 100;
280
+ --z-overlay: 200;
281
+ --z-spinner: 9999;
282
+ }
283
+
284
+
285
+ /* ================================================================
286
+ ==== LAYOUT - max-widths och responsiv hjalp
287
+ Anvands inte direkt i media queries (CSS custom-property-begransning),
288
+ bara som referensvarden i komponenter.
289
+ ================================================================ */
290
+ :root {
291
+ --bp-tablet: 768px;
292
+ --bp-desktop: 1024px;
293
+
294
+ --max-w-mobile: 600px;
295
+ --max-w-tablet: 680px;
296
+ --max-w-desktop: 1280px;
297
+ --max-w-form: 560px;
298
+ --max-w-bottom-nav: 572px;
299
+ --max-w-nav-desktop: 720px;
300
+ --max-w-install-chip: 580px;
301
+ --max-w-install-chip-desktop: 380px;
302
+
303
+ --content-max-width: 640px;
304
+ }
305
+
306
+
307
+ /* ================================================================
308
+ ==== PWA / SAFE AREA
309
+ env(safe-area-inset-*) anvands for iOS-notch/home-indicator.
310
+ Touch-min 44px ar Apples HIG-rekommendation.
311
+ ================================================================ */
312
+ :root {
313
+ --safe-top: env(safe-area-inset-top, 0px);
314
+ --safe-bottom: env(safe-area-inset-bottom, 0px);
315
+ --safe-left: env(safe-area-inset-left, 0px);
316
+ --safe-right: env(safe-area-inset-right, 0px);
317
+
318
+ --touch-min: 44px;
319
+
320
+ --bottom-nav-height: 80px;
321
+ --bottom-nav-clearance: calc(var(--bottom-nav-height) + var(--space-12) + var(--safe-bottom) + var(--space-12));
322
+ }
323
+
324
+
325
+ /* ================================================================
326
+ ==== SAFARI 17+ refinements
327
+ Spring-bounce med linear()-keyframes for mer raffinerad iOS-spring.
328
+ Aldre browsers fortsatter pa cubic-bezier-fallback ovan.
329
+ ================================================================ */
330
+ @supports (transition-timing-function: linear(0, 1)) {
331
+ :root {
332
+ --ease-spring-bounce: linear(
333
+ 0, 0.39 9.7%, 0.69 16.3%, 0.92 22.8%, 1.05 28.4%, 1.09 32.6%,
334
+ 1.10 36.8%, 1.08 41.0%, 1.04 47.4%, 1.00 56.0%, 0.99 65.0%, 1.00
335
+ );
336
+ }
337
+ }