@klodd/ds 3.0.3 → 3.1.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/css/apps/jubb.css +6 -0
- package/css/components/colored-bar.css +44 -0
- package/css/components/colored-row.css +29 -0
- package/css/index.css +4 -0
- package/package.json +1 -1
package/css/apps/jubb.css
CHANGED
|
@@ -7,9 +7,15 @@
|
|
|
7
7
|
aldrig om appen ar Jubb eller Ekonom.
|
|
8
8
|
================================================================ */
|
|
9
9
|
[data-app="jubb"] {
|
|
10
|
+
/* Accent - Radix Blue Dark */
|
|
10
11
|
--accent-soft: var(--blue-3);
|
|
11
12
|
--accent-moderate: var(--blue-5);
|
|
12
13
|
--accent-9: var(--blue-9);
|
|
13
14
|
--accent-10: var(--blue-10);
|
|
14
15
|
--accent-text: var(--blue-11);
|
|
16
|
+
|
|
17
|
+
/* Surface - Jubbs egna app-specifika bakgrund (Blue-1, varm-bla
|
|
18
|
+
ton istallet for Mauve-1). Matchar manifest.json background_color
|
|
19
|
+
sa PWA-splash och OS-statusbar harmoniserar med appens ton. */
|
|
20
|
+
--surface-page: var(--blue-1); /* #0d1520 */
|
|
15
21
|
}
|
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
/* ================================================================
|
|
2
|
+
components/colored-bar.css
|
|
3
|
+
Generic horisontell stapel med accentfarg.
|
|
4
|
+
|
|
5
|
+
Anvand for: budget-staplar, kategori-staplar, progress med
|
|
6
|
+
semantisk farg
|
|
7
|
+
Inte for: generisk progress utan kategori (anvand progress.css)
|
|
8
|
+
|
|
9
|
+
Mont: app satter --bar-accent pa elementet eller via en
|
|
10
|
+
wrapper-klass i app-domain-CSS:
|
|
11
|
+
|
|
12
|
+
.my-category { --bar-accent: var(--my-token); }
|
|
13
|
+
|
|
14
|
+
<div class="hbar__track">
|
|
15
|
+
<div class="colored-bar my-category"></div>
|
|
16
|
+
</div>
|
|
17
|
+
|
|
18
|
+
Kombineras med .hbar__track for container-struktur. Paketet vet
|
|
19
|
+
ingenting om kategorier - appen agar datan + bindningen.
|
|
20
|
+
Se references/02-components.md "Kategori-monstret".
|
|
21
|
+
================================================================ */
|
|
22
|
+
.colored-bar {
|
|
23
|
+
background: var(--bar-accent, var(--accent-9));
|
|
24
|
+
height: 100%;
|
|
25
|
+
border-radius: var(--radius-full);
|
|
26
|
+
transition: width var(--dur-base) var(--ease-out);
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
/* Storlekar */
|
|
30
|
+
.colored-bar--sm { height: var(--space-6); }
|
|
31
|
+
.colored-bar--md { height: var(--space-8); }
|
|
32
|
+
.colored-bar--lg { height: var(--space-12); }
|
|
33
|
+
|
|
34
|
+
/* Vertikal variant - used i charts/dashboards */
|
|
35
|
+
.colored-bar--vertical {
|
|
36
|
+
width: 100%;
|
|
37
|
+
height: var(--bar-accent-height, 100%);
|
|
38
|
+
border-radius: var(--radius-full);
|
|
39
|
+
transition: height var(--dur-base) var(--ease-out);
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
@media (prefers-reduced-motion: reduce) {
|
|
43
|
+
.colored-bar { transition: none; }
|
|
44
|
+
}
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
/* ================================================================
|
|
2
|
+
components/colored-row.css
|
|
3
|
+
Generic list-rad med accentfargad vansterkant.
|
|
4
|
+
|
|
5
|
+
Anvand for: kategoriserade rader, fargkodade listor, statusrader
|
|
6
|
+
Inte for: rader utan fargkodning (anvand list-row istallet)
|
|
7
|
+
|
|
8
|
+
Mont: app satter --row-accent pa elementet eller via en
|
|
9
|
+
wrapper-klass i app-domain-CSS:
|
|
10
|
+
|
|
11
|
+
.my-category { --row-accent: var(--my-token); }
|
|
12
|
+
|
|
13
|
+
<div class="colored-row my-category">...</div>
|
|
14
|
+
|
|
15
|
+
Paketet vet ingenting om kategorier - appen agar datan + bindningen.
|
|
16
|
+
Se references/02-components.md "Kategori-monstret".
|
|
17
|
+
================================================================ */
|
|
18
|
+
.colored-row {
|
|
19
|
+
border-left: 3px solid var(--row-accent, var(--border-subtle));
|
|
20
|
+
padding-left: var(--space-12);
|
|
21
|
+
transition: border-color var(--dur-fast) var(--ease-out);
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
.colored-row--sm { border-left-width: 2px; }
|
|
25
|
+
.colored-row--lg { border-left-width: 4px; }
|
|
26
|
+
|
|
27
|
+
@media (prefers-reduced-motion: reduce) {
|
|
28
|
+
.colored-row { transition: none; }
|
|
29
|
+
}
|
package/css/index.css
CHANGED
|
@@ -58,3 +58,7 @@
|
|
|
58
58
|
@import './components/inline-edit.css';
|
|
59
59
|
@import './components/upload-spinner.css';
|
|
60
60
|
@import './components/tab-bar.css';
|
|
61
|
+
|
|
62
|
+
/* v3.1.0 - generic kategori-monster (token-binding via app-domain-CSS) */
|
|
63
|
+
@import './components/colored-row.css';
|
|
64
|
+
@import './components/colored-bar.css';
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@klodd/ds",
|
|
3
|
-
"version": "3.0
|
|
3
|
+
"version": "3.1.0",
|
|
4
4
|
"description": "Klodd Design System - shared tokens, typography, components and JS for Jubb, Ekonom, and future apps. v2.0 inkluderar all komponentkod och delad JS - app-repona haller bara data och affarslogik.",
|
|
5
5
|
"main": "css/index.css",
|
|
6
6
|
"files": [
|