@klodd/ds 5.14.1 → 5.15.1
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/10-semantic.css +7 -2
- package/css/apps/ekonom.css +27 -6
- package/css/apps/jubb.css +27 -6
- package/css/components/setting-row.css +14 -0
- package/package.json +1 -1
package/css/10-semantic.css
CHANGED
|
@@ -88,8 +88,13 @@
|
|
|
88
88
|
|
|
89
89
|
/* Text pa solid accent-bakgrund (knapp, badge, score-pill).
|
|
90
90
|
Anvand for: text inuti --accent-9-bakgrunder.
|
|
91
|
-
INTE for: text pa neutral bakgrund.
|
|
92
|
-
|
|
91
|
+
INTE for: text pa neutral bakgrund.
|
|
92
|
+
|
|
93
|
+
Dark mode: gray-1 (Mauve Dark step 1, #121113) - mörk text på
|
|
94
|
+
bright accent. Vit (oklch 0.98) gav bara 3.13:1 mot blue-9
|
|
95
|
+
(under WCAG AA 4.5:1). gray-1 ger 5.80:1 mot blue-9 och 4.07:1
|
|
96
|
+
mot plum-9. Light-blocket overridar med gray-light-12. */
|
|
97
|
+
--text-on-accent: var(--gray-1);
|
|
93
98
|
|
|
94
99
|
/* Text pa status-bakgrunder (success, warning, danger solid).
|
|
95
100
|
Anvand for: text inuti --bg-success/warning/danger.
|
package/css/apps/ekonom.css
CHANGED
|
@@ -66,7 +66,12 @@
|
|
|
66
66
|
|
|
67
67
|
|
|
68
68
|
/* Light mode-override per app - Plum Light-rampen + Plum-tonad page.
|
|
69
|
-
Konsumeras när <html data-app="ekonom" data-theme="light">. Se ADR 0028.
|
|
69
|
+
Konsumeras när <html data-app="ekonom" data-theme="light">. Se ADR 0028.
|
|
70
|
+
|
|
71
|
+
(0,2,0) specificity - vinner garanterat över både [data-app]-block
|
|
72
|
+
och [data-theme]-block var för sig. Alla tokens som [data-app="ekonom"]
|
|
73
|
+
sätter måste även sättas här för light mode - annars vinner app-base
|
|
74
|
+
över semantic [data-theme="light"]-overriden via load-order. */
|
|
70
75
|
[data-app="ekonom"][data-theme="light"] {
|
|
71
76
|
/* Accent: Plum Light-rampen */
|
|
72
77
|
--accent-soft: var(--plum-light-3);
|
|
@@ -82,11 +87,27 @@
|
|
|
82
87
|
--accent-a10: var(--plum-light-a10);
|
|
83
88
|
--accent-a12: var(--plum-light-a12);
|
|
84
89
|
|
|
85
|
-
/* Surface: Plum Light
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
--surface-
|
|
90
|
+
/* Surface: Plum Light-toningar för alla 8 nivåer. Måste sättas här -
|
|
91
|
+
app-base sätter plum-N (dark-rampen) och vinner annars över
|
|
92
|
+
[data-theme="light"]-overriden i 10-semantic.css. */
|
|
93
|
+
--surface-page: var(--plum-light-1);
|
|
94
|
+
--surface-default: var(--plum-light-2);
|
|
95
|
+
--surface-raised: var(--plum-light-3);
|
|
96
|
+
--surface-elevated: var(--plum-light-4);
|
|
97
|
+
--surface-overlay: var(--plum-light-5);
|
|
98
|
+
--surface-hover: var(--plum-light-4);
|
|
99
|
+
--surface-active: var(--plum-light-5);
|
|
100
|
+
--surface-sunken: var(--plum-light-1);
|
|
101
|
+
|
|
102
|
+
/* Text-default: mörk i light. App-base sätter Ekonoms varma plum-vit
|
|
103
|
+
#F4F2FA som vinner annars över [data-theme="light"]. */
|
|
104
|
+
--text-default: var(--gray-light-12);
|
|
105
|
+
|
|
106
|
+
/* Glass-bg: neutral grå-tint mot ljus page (iOS UIBlurEffect-konvention).
|
|
107
|
+
App-base sätter surface-raised 65% som vinner annars över
|
|
108
|
+
[data-theme="light"]. */
|
|
109
|
+
--glass-bg: color-mix(in oklch, var(--gray-light-6) 55%, transparent);
|
|
89
110
|
|
|
90
111
|
/* Border-focus: Plum accent */
|
|
91
|
-
--border-focus:
|
|
112
|
+
--border-focus: var(--plum-light-8);
|
|
92
113
|
}
|
package/css/apps/jubb.css
CHANGED
|
@@ -54,7 +54,12 @@
|
|
|
54
54
|
|
|
55
55
|
|
|
56
56
|
/* Light mode-override per app - Blue Light-rampen + Blue-tonad page.
|
|
57
|
-
Konsumeras när <html data-app="jubb" data-theme="light">. Se ADR 0028.
|
|
57
|
+
Konsumeras när <html data-app="jubb" data-theme="light">. Se ADR 0028.
|
|
58
|
+
|
|
59
|
+
(0,2,0) specificity - vinner garanterat över både [data-app]-block
|
|
60
|
+
och [data-theme]-block var för sig. Alla tokens som [data-app="jubb"]
|
|
61
|
+
sätter måste även sättas här för light mode - annars vinner app-base
|
|
62
|
+
över semantic [data-theme="light"]-overriden via load-order. */
|
|
58
63
|
[data-app="jubb"][data-theme="light"] {
|
|
59
64
|
/* Accent: Blue Light-rampen */
|
|
60
65
|
--accent-soft: var(--blue-light-3);
|
|
@@ -70,11 +75,27 @@
|
|
|
70
75
|
--accent-a10: var(--blue-light-a10);
|
|
71
76
|
--accent-a12: var(--blue-light-a12);
|
|
72
77
|
|
|
73
|
-
/* Surface: Blue Light
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
--surface-
|
|
78
|
+
/* Surface: Blue Light-toningar för alla 8 nivåer. Måste sättas här -
|
|
79
|
+
app-base sätter blue-N (dark-rampen) och vinner annars över
|
|
80
|
+
[data-theme="light"]-overriden i 10-semantic.css. */
|
|
81
|
+
--surface-page: var(--blue-light-1);
|
|
82
|
+
--surface-default: var(--blue-light-2);
|
|
83
|
+
--surface-raised: var(--blue-light-3);
|
|
84
|
+
--surface-elevated: var(--blue-light-4);
|
|
85
|
+
--surface-overlay: var(--blue-light-5);
|
|
86
|
+
--surface-hover: var(--blue-light-4);
|
|
87
|
+
--surface-active: var(--blue-light-5);
|
|
88
|
+
--surface-sunken: var(--blue-light-1);
|
|
89
|
+
|
|
90
|
+
/* Text-default: mörk i light. App-base sätter Jubbs varma vit
|
|
91
|
+
#EEF4FF som vinner annars över [data-theme="light"]. */
|
|
92
|
+
--text-default: var(--gray-light-12);
|
|
93
|
+
|
|
94
|
+
/* Glass-bg: neutral grå-tint mot ljus page (iOS UIBlurEffect-konvention).
|
|
95
|
+
App-base sätter surface-raised 65% som vinner annars över
|
|
96
|
+
[data-theme="light"]. */
|
|
97
|
+
--glass-bg: color-mix(in oklch, var(--gray-light-6) 55%, transparent);
|
|
77
98
|
|
|
78
99
|
/* Border-focus: Blue accent */
|
|
79
|
-
--border-focus:
|
|
100
|
+
--border-focus: var(--blue-light-8);
|
|
80
101
|
}
|
|
@@ -203,3 +203,17 @@
|
|
|
203
203
|
outline: 2px solid var(--border-focus);
|
|
204
204
|
outline-offset: 2px;
|
|
205
205
|
}
|
|
206
|
+
|
|
207
|
+
/* ARIA-switch-pattern: [role="switch"][aria-checked="true"] ger
|
|
208
|
+
samma thumb-position som input:checked-varianten.
|
|
209
|
+
Konsumeras av theme-toggle setting-row i Jubb/Ekonom. */
|
|
210
|
+
.setting-toggle[aria-checked="true"] .setting-toggle__track {
|
|
211
|
+
background: var(--accent-9);
|
|
212
|
+
}
|
|
213
|
+
.setting-toggle[aria-checked="true"] .setting-toggle__track .setting-toggle__thumb {
|
|
214
|
+
transform: translateX(18px);
|
|
215
|
+
}
|
|
216
|
+
.setting-toggle[role="switch"]:focus-visible .setting-toggle__track {
|
|
217
|
+
outline: 2px solid var(--border-focus);
|
|
218
|
+
outline-offset: 2px;
|
|
219
|
+
}
|