@klodd/ds 5.14.1 → 5.15.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/ekonom.css +27 -6
- package/css/apps/jubb.css +27 -6
- package/package.json +1 -1
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
|
}
|