@klodd/ds 3.10.5 → 3.11.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/00-primitives.css
CHANGED
|
@@ -172,6 +172,48 @@
|
|
|
172
172
|
}
|
|
173
173
|
|
|
174
174
|
|
|
175
|
+
/* ================================================================
|
|
176
|
+
==== COLORS - INDIGO (Radix Indigo Dark - Klödd accent)
|
|
177
|
+
Indigo-blå. Step 9 (#3e63dd) ligger närmast klodd.io:s varumärkes-
|
|
178
|
+
blått (#433CAF) av Radix officiella ramper - 12° hue-skift och
|
|
179
|
+
ett ljushetssteg upp. Officiella Radix-värden.
|
|
180
|
+
================================================================ */
|
|
181
|
+
:root {
|
|
182
|
+
--indigo-1: #11131f;
|
|
183
|
+
--indigo-2: #141726;
|
|
184
|
+
--indigo-3: #182449;
|
|
185
|
+
--indigo-4: #1d2e62;
|
|
186
|
+
--indigo-5: #253974;
|
|
187
|
+
--indigo-6: #304384;
|
|
188
|
+
--indigo-7: #3a4f97;
|
|
189
|
+
--indigo-8: #435db1;
|
|
190
|
+
--indigo-9: #3e63dd; /* Solid - knappar, badges */
|
|
191
|
+
--indigo-10: #5472e4; /* Solid hover */
|
|
192
|
+
--indigo-11: #9eb1ff; /* Accent text på neutral */
|
|
193
|
+
--indigo-12: #d6e1ff;
|
|
194
|
+
}
|
|
195
|
+
|
|
196
|
+
|
|
197
|
+
/* ================================================================
|
|
198
|
+
==== COLORS - INDIGO ALPHA (Radix Indigo Dark Alpha)
|
|
199
|
+
Officiella Radix-värden. Används av Klödds accent-alpha-tokens.
|
|
200
|
+
================================================================ */
|
|
201
|
+
:root {
|
|
202
|
+
--indigo-a1: #1133ff0f;
|
|
203
|
+
--indigo-a2: #3354fa17;
|
|
204
|
+
--indigo-a3: #2f62ff3c;
|
|
205
|
+
--indigo-a4: #3566ff57;
|
|
206
|
+
--indigo-a5: #4171fd6b;
|
|
207
|
+
--indigo-a6: #5178fd7c;
|
|
208
|
+
--indigo-a7: #5a7fff90;
|
|
209
|
+
--indigo-a8: #5b81feac;
|
|
210
|
+
--indigo-a9: #4671ffdb;
|
|
211
|
+
--indigo-a10: #5c7efee3;
|
|
212
|
+
--indigo-a11: #9eb1ff;
|
|
213
|
+
--indigo-a12: #d6e1ff;
|
|
214
|
+
}
|
|
215
|
+
|
|
216
|
+
|
|
175
217
|
/* ================================================================
|
|
176
218
|
==== COLORS - STATUS (Radix dark-skalor, step 9)
|
|
177
219
|
Officiella Radix-varden. Text-on-status hardkodad i semantic.
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
/* ================================================================
|
|
2
|
+
apps/klodd.css - Klödd (neutral utvecklingstema) overrides
|
|
3
|
+
Sätt data-app="klodd" på <html>. Refererar bara primitives, inte
|
|
4
|
+
semantic - eftersom semantic-lagret läser dessa.
|
|
5
|
+
|
|
6
|
+
Klödd har:
|
|
7
|
+
1. Indigo accent (Radix Indigo Dark - närmast klodd.io:s #433CAF
|
|
8
|
+
varumärkes-blått av Radix officiella ramper)
|
|
9
|
+
2. Mauve neutral surface (default --gray-N, ingen surface-tonad
|
|
10
|
+
override som Jubb/Ekonom gör - det är Klödd-temats neutrala
|
|
11
|
+
karaktär, för komponentutveckling utan app-specifik bakgrund)
|
|
12
|
+
3. surface-raised = --gray-2 per Klodd-surface-konvention (alla
|
|
13
|
+
appar sätter raised till color-2, inte default --gray-3)
|
|
14
|
+
|
|
15
|
+
Komponenter läser bara semantic tokens via 10-semantic.css. De vet
|
|
16
|
+
aldrig om appen är Jubb (Blue), Ekonom (Plum) eller Klödd (Indigo).
|
|
17
|
+
================================================================ */
|
|
18
|
+
[data-app="klodd"] {
|
|
19
|
+
/* Accent - Radix Indigo Dark */
|
|
20
|
+
--accent-soft: var(--indigo-3);
|
|
21
|
+
--accent-moderate: var(--indigo-5);
|
|
22
|
+
--accent-9: var(--indigo-9);
|
|
23
|
+
--accent-10: var(--indigo-10);
|
|
24
|
+
--accent-text: var(--indigo-11);
|
|
25
|
+
|
|
26
|
+
/* Surface-raised per Klodd-konvention (color-2 istället för default --gray-3) */
|
|
27
|
+
--surface-raised: var(--gray-2);
|
|
28
|
+
|
|
29
|
+
/* Accent alpha - Radix Indigo Dark Alpha. Override på default-Blue-alpha. */
|
|
30
|
+
--accent-a1: var(--indigo-a1);
|
|
31
|
+
--accent-a2: var(--indigo-a2);
|
|
32
|
+
--accent-a3: var(--indigo-a3);
|
|
33
|
+
--accent-a6: var(--indigo-a6);
|
|
34
|
+
--accent-a8: var(--indigo-a8);
|
|
35
|
+
--accent-a10: var(--indigo-a10);
|
|
36
|
+
--accent-a12: var(--indigo-a12);
|
|
37
|
+
}
|
package/css/index.css
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
/* ================================================================
|
|
2
2
|
@klodd/ds - convenience-import
|
|
3
3
|
Importerar hela designsystemet i kanonisk ordning. App-specifika
|
|
4
|
-
tema-filer (apps/jubb.css, apps/ekonom.css)
|
|
5
|
-
eftersom bara en ar aktiv per pageload.
|
|
4
|
+
tema-filer (apps/jubb.css, apps/ekonom.css, apps/klodd.css)
|
|
5
|
+
importeras separat eftersom bara en ar aktiv per pageload.
|
|
6
6
|
|
|
7
7
|
Anvandning:
|
|
8
8
|
<link rel="stylesheet" href="@klodd/ds/css/index.css">
|
package/package.json
CHANGED
|
@@ -1,7 +1,17 @@
|
|
|
1
1
|
# 0014 - Ekonom colored-row/colored-bar migration
|
|
2
2
|
|
|
3
3
|
## Status
|
|
4
|
-
|
|
4
|
+
Closed 2026-05-10.
|
|
5
|
+
|
|
6
|
+
## Decision
|
|
7
|
+
Option B: minimal cleanup.
|
|
8
|
+
|
|
9
|
+
Ekonom uses .cat-list-row without border-left as a deliberate visual
|
|
10
|
+
choice. border-left on categorized rows is unwanted in current apps.
|
|
11
|
+
.colored-row remains in the package for future apps that may want
|
|
12
|
+
the pattern.
|
|
13
|
+
|
|
14
|
+
Dead --row-accent bindings removed from ekonom-domain.css.
|
|
5
15
|
|
|
6
16
|
## Context
|
|
7
17
|
Paketet har .colored-row och .colored-bar med --row-accent/--bar-accent
|