triafly-ui-kit 1.0.32 → 1.0.34

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 (26) hide show
  1. package/README.md +93 -93
  2. package/dist/assets/src/components/Ui/Skeleton/Skeleton.module.css +1 -1
  3. package/dist/assets/src/components/Ui/Table/TableSkeletonRow/TableSkeletonRow.css +1 -0
  4. package/dist/assets/src/components/Ui/Tooltip/Tooltip.stories.module.css +1 -1
  5. package/dist/components/Ui/ButtonsArray/ButtonsArray.js +23 -17
  6. package/dist/components/Ui/Icons/Icons.js +32 -24
  7. package/dist/components/Ui/Icons/index.js +69 -67
  8. package/dist/components/Ui/Table/Table.js +85 -80
  9. package/dist/components/Ui/Table/TableSkeletonRow/TableSkeletonRow.js +11 -0
  10. package/dist/main.d.ts +23 -3
  11. package/dist/main.js +105 -103
  12. package/dist/src/components/Ui/Skeleton/Skeleton.module.scss.js +5 -5
  13. package/dist/src/components/Ui/Tooltip/Tooltip.stories.module.css.js +1 -1
  14. package/dist/styles/_mixins.scss +21 -21
  15. package/dist/styles/fix.scss +3 -3
  16. package/dist/styles/main.scss +26 -26
  17. package/dist/styles/reset.scss +105 -105
  18. package/dist/styles/typography.scss +106 -106
  19. package/dist/styles/variables.scss +277 -277
  20. package/package.json +112 -112
  21. package/src/styles/_mixins.scss +21 -21
  22. package/src/styles/fix.scss +3 -3
  23. package/src/styles/main.scss +26 -26
  24. package/src/styles/reset.scss +105 -105
  25. package/src/styles/typography.scss +106 -106
  26. package/src/styles/variables.scss +277 -277
package/src/styles/variables.scss CHANGED
@@ -1,277 +1,277 @@
1
- :root {
2
- /* Font */
3
- --3afly-fonts-body: 'Manrope', sans-serif;
4
- --3afly-fonts-heading: 'Roboto Slab', sans-serif;
5
-
6
- //temp
7
- --light-brand-50: #C2D0FF;
8
- --dark-brand-50: #C2D0FF;
9
-
10
- /* Primitives */
11
- --dark-brand-20: #153398;
12
- --dark-brand-50: #1E46CD;
13
- --dark-brand-100: #5076FF;
14
- --dark-brand-200: #7C98FF;
15
- --dark-brand-300: #A7BBFF;
16
-
17
- --light-brand-20: #EEF2FF;
18
- --light-brand-50: #C2D0FF;
19
- --light-brand-100: #2454FF;
20
- --light-brand-200: #1A3AB2;
21
- --light-brand-300: #0E2266;
22
-
23
- /* Primitives - Base */
24
- --base-dark: #121212;
25
- --base-light: #FFFFFF;
26
-
27
- /* Primitives - Neutral */
28
- --dark-neutral-0: #121212;
29
- --dark-neutral-20: #292929;
30
- --dark-neutral-50: #333333;
31
- --dark-neutral-100: #4D4D4D;
32
- --dark-neutral-200: #6E6E6E;
33
- --dark-neutral-300: #FFFFFF;
34
-
35
- --light-neutral-0: #FFFFFF;
36
- --light-neutral-20: #F6F7F8;
37
- --light-neutral-50: #F1F2F4;
38
- --light-neutral-100: #D2D5DA;
39
- --light-neutral-200: #A5A8AC;
40
- --light-neutral-300: #121212;
41
-
42
- /* Primitives - Status */
43
- --dark-green-50: #044329;
44
- --dark-green-100: #12A26C;
45
- --dark-green-200: #CEF8E0;
46
- --dark-orange-50: #662500;
47
- --dark-orange-100: #E16D00;
48
- --dark-orange-200: #FFECCC;
49
- --dark-red-50: #7B0000;
50
- --dark-red-100: #F65843;
51
- --dark-red-200: #FFEBE7;
52
-
53
- --light-green-50: #CEF8E0;
54
- --light-green-100: #15A46E;
55
- --light-green-200: #06603B;
56
- --light-orange-50: #FFECCC;
57
- --light-orange-100: #E46F00;
58
- --light-orange-200: #9E3900;
59
- --light-red-50: #FFEBE7;
60
- --light-red-100: #F75C46;
61
- --light-red-200: #9E0000;
62
-
63
- /* Shadows & Effects */
64
- --color-fader: #12121220;
65
- }
66
-
67
- /* Primitives - Test Client */
68
- html[data-client="test"] {
69
- --light-brand-20: #F3E8FF;
70
- --light-brand-50: #D8B4FE;
71
- --light-brand-100: #A855F7;
72
- --light-brand-200: #7E22CE;
73
- --light-brand-300: #4C1D95;
74
-
75
- --dark-brand-20: #5B21B6;
76
- --dark-brand-50: #7C3AED;
77
- --dark-brand-100: #A78BFA;
78
- --dark-brand-200: #C4B5FD;
79
- --dark-brand-300: #DDD6FE;
80
- }
81
-
82
- html[data-theme="light"] {
83
- /* Light Theme */
84
-
85
- --default-font-color: var(--base-dark);
86
-
87
- /* Light Theme - Background */
88
- --color-bg-brand-default: var(--light-brand-100);
89
- --color-bg-brand-hover: var(--light-brand-200);
90
- --color-bg-brand-selected: var(--light-brand-300);
91
- --color-bg-brand-lightest-default: var(--light-brand-20);
92
- --color-bg-brand-light-default: var(--light-brand-50);
93
- --color-bg-error-default: var(--light-red-100);
94
- --color-bg-error-hover: var(--light-red-200);
95
- --color-bg-innerisland-default: var(--light-neutral-20);
96
- --color-bg-island-default: var(--base-light);
97
- --color-bg-island-disabled: var(--light-neutral-50);
98
- --color-bg-island-inversed: var(--base-dark);
99
- --color-bg-island-selected: var(--light-neutral-50);
100
- --color-bg-page-primary-default: var(--light-neutral-50);
101
- --color-bg-page-secondary-default: var(--light-neutral-0);
102
- --color-bg-neutral-basic-default: var(--light-neutral-0);
103
- --color-bg-neutral-lightest-default: var(--light-neutral-20);
104
- --color-bg-neutral-light-default: var(--light-neutral-50);
105
- --color-bg-neutral-medium-default: var(--light-neutral-100);
106
- --color-bg-neutral-basic-inversed: var(--light-neutral-300);
107
-
108
- /* Light Theme - Border */
109
- --color-border-brand-default: var(--light-brand-100);
110
- --color-border-error-default: var(--light-red-100);
111
- --color-border-primary-default: var(--light-neutral-100);
112
- --color-border-primary-hover: var(--base-dark);
113
- --color-border-secondary-default: var(--light-neutral-200);
114
- --color-border-secondary-hover: var(--base-dark);
115
- --color-border-success-default: var(--light-green-100);
116
-
117
- /* Light Theme - Chart */
118
- --color-chart-critical: var(--light-red-100);
119
- --color-chart-low: var(--light-green-100);
120
- --color-chart-medium: var(--light-orange-100);
121
-
122
- /* Light Theme - Effects */
123
- --effect-shadow-drop: #12121214;
124
- --effect-shadow-L: #12121208;
125
- --effect-shadow-XL: #12121215;
126
-
127
- /* Light Theme - Icon */
128
- --color-icon-brand-default: var(--light-brand-100);
129
- --color-icon-brand-hover: var(--light-brand-200);
130
- --color-icon-error-default: var(--light-red-100);
131
- --color-icon-error-hover: var(--light-red-200);
132
- --color-icon-primary-default: var(--base-dark);
133
- --color-icon-primary-inversed: var(--base-light);
134
- --color-icon-secondary-default: var(--light-neutral-200);
135
- --color-icon-secondary-hover: var(--base-dark);
136
- --color-icon-success-default: var(--light-green-100);
137
-
138
- /* Light Theme - SideMenu */
139
- --color-sidemenu-bg-default: var(--base-light);
140
- --color-sidemenu-bg-hover: var(--light-neutral-50);
141
- --color-sidemenu-bg-selected: var(--light-brand-100);
142
- --color-sidemenu-icon-default: var(--base-dark);
143
- --color-sidemenu-icon-selected: var(--light-color-static);
144
- --color-sidemenu-plus_button_bg-selected-hover: var(--light-brand-200);
145
- --color-sidemenu-plus_button_bg-unselected-hover: var(--base-dark);
146
- --color-sidemenu-plus_button_icon-selected-default: var(--light-color-static);
147
- --color-sidemenu-plus_button_icon-selected-hover: var(--light-color-static);
148
- --color-sidemenu-plus_button_icon-unselected-default: var(--base-dark);
149
- --color-sidemenu-plus_button_icon-unselected-hover: var(--base-light);
150
- --color-sidemenu-text-default: var(--base-dark);
151
- --color-sidemenu-text-selected: var(--light-color-static);
152
-
153
- /* Light Theme - Static */
154
- --dark-color-static: var(--base-dark);
155
- --dark-color-static-brand: var(--dark-brand-100);
156
- --light-color-static: var(--base-light);
157
- --light-color-static-brand: var(--light-brand-100);
158
-
159
- /* Light Theme - Status */
160
- --color-status-error-background: var(--light-red-50);
161
- --color-status-error-foreground: var(--light-red-100);
162
- --color-status-success-background: var(--light-green-50);
163
- --color-status-success-foreground: var(--light-green-100);
164
- --color-status-warning-background: var(--light-orange-50);
165
- --color-status-warning-foreground: var(--light-orange-100);
166
-
167
- /* Light Theme - Text */
168
- --color-text-brand-default: var(--light-brand-100);
169
- --color-text-brand-hover: var(--light-brand-200);
170
- --color-text-error-default: var(--light-red-100);
171
- --color-text-primary-default: var(--base-dark);
172
- --color-text-primary-inversed: var(--light-neutral-0);
173
- --color-text-secondary-default: var(--light-neutral-200);
174
- --color-text-success-default: var(--light-green-100);
175
- --color-text-tertiary-default: var(--light-neutral-100);
176
-
177
- /* Light Theme - Buttons */
178
- --color-button-brandlight-filled-hover: var(--light-brand-50);
179
- }
180
-
181
- html[data-theme="dark"] {
182
- /* Dark Theme */
183
-
184
- --default-font-color: var(--base-light);
185
-
186
- /* Dark Theme - Background */
187
- --color-bg-brand-default: var(--dark-brand-100);
188
- --color-bg-brand-hover: var(--dark-brand-200);
189
- --color-bg-brand-selected: var(--dark-brand-300);
190
- --color-bg-brand-light-default: var(--dark-brand-50);
191
- --color-bg-error-default: var(--dark-red-100);
192
- --color-bg-error-hover: var(--dark-red-50);
193
- --color-bg-innerisland-default: var(--dark-neutral-20);
194
- --color-bg-island-default: var(--base-dark);
195
- --color-bg-island-disabled: var(--dark-neutral-50);
196
- --color-bg-island-inversed: var(--base-light);
197
- --color-bg-island-selected: var(--dark-neutral-50);
198
- --color-bg-page-default: var(--dark-neutral-50);
199
- --color-bg-page-secondary-default: var(--dark-neutral-0);
200
- --color-bg-page-secondary-default: var(--dark-neutral-0);
201
- --color-bg-neutral-basic-default: var(--dark-neutral-20);
202
- --color-bg-neutral-lightest-default: var(--dark-neutral-20);
203
- --color-bg-neutral-light-default: var(--dark-neutral-50);
204
- --color-bg-neutral-medium-default: var(--dark-neutral-100);
205
- --color-bg-neutral-basic-inversed: var(--dark-neutral-300);
206
-
207
- /* Dark Theme - Border */
208
- --color-border-brand-default: var(--dark-brand-100);
209
- --color-border-error-default: var(--dark-red-100);
210
- --color-border-primary-default: var(--dark-neutral-100);
211
- --color-border-primary-hover: var(--base-light);
212
- --color-border-secondary-default: var(--dark-neutral-200);
213
- --color-border-secondary-hover: var(--base-light);
214
- --color-border-success-default: var(--dark-green-100);
215
-
216
- /* Dark Theme - Chart */
217
- --color-chart-critical: var(--dark-red-100);
218
- --color-chart-low: var(--dark-green-100);
219
- --color-chart-medium: var(--dark-orange-100);
220
-
221
- /* Dark Theme - Effects */
222
- --effect-shadow-drop: #12121299;
223
-
224
- /* Dark Theme - Icon */
225
- --color-icon-brand-default: var(--dark-brand-100);
226
- --color-icon-brand-hover: var(--dark-brand-200);
227
- --color-icon-error-default: var(--dark-red-100);
228
- --color-icon-error-hover: var(--dark-red-200);
229
- --color-icon-primary-default: var(--base-light);
230
- --color-icon-primary-inversed: var(--base-dark);
231
- --color-icon-secondary-default: var(--dark-neutral-200);
232
- --color-icon-secondary-hover: var(--base-light);
233
- --color-icon-success-default: var(--dark-green-100);
234
-
235
- /* Dark Theme - SideMenu */
236
- --color-sidemenu-bg-default: var(--base-dark);
237
- --color-sidemenu-bg-hover: var(--dark-neutral-50);
238
- --color-sidemenu-bg-selected: var(--dark-brand-100);
239
- --color-sidemenu-icon-default: var(--base-light);
240
- --color-sidemenu-icon-selected: var(--light-color-static);
241
- --color-sidemenu-plus_button_bg-selected-hover: var(--dark-brand-200);
242
- --color-sidemenu-plus_button_bg-unselected-hover: var(--base-light);
243
- --color-sidemenu-plus_button_icon-selected-default: var(--light-color-static);
244
- --color-sidemenu-plus_button_icon-selected-hover: var(--light-color-static);
245
- --color-sidemenu-plus_button_icon-unselected-default: var(--base-light);
246
- --color-sidemenu-plus_button_icon-unselected-hover: var(--base-dark);
247
- --color-sidemenu-text-default: var(--base-light);
248
- --color-sidemenu-text-selected: var(--light-color-static);
249
-
250
- /* Dark Theme - Static */
251
- --dark-color-static: var(--base-dark);
252
- --dark-color-static-brand: var(--dark-brand-100);
253
- --light-color-static: var(--base-light);
254
- --light-color-static-brand: var(--light-brand-100);
255
-
256
- /* Dark Theme - Status */
257
- --color-status-error-background: var(--dark-red-50);
258
- --color-status-error-foreground: var(--dark-red-100);
259
- --color-status-success-background: var(--dark-green-50);
260
- --color-status-success-foreground: var(--dark-green-100);
261
- --color-status-warning-background: var(--dark-orange-50);
262
- --color-status-warning-foreground: var(--dark-orange-100);
263
-
264
- /* Dark Theme - Text */
265
- --color-text-brand-default: var(--dark-brand-100);
266
- --color-text-brand-hover: var(--dark-brand-200);
267
- --color-text-error-default: var(--dark-red-100);
268
- --color-text-primary-default: var(--base-light);
269
- --color-text-primary-inversed: var(--dark-neutral-0);
270
- --color-text-secondary-default: var(--dark-neutral-200);
271
- --color-text-success-default: var(--dark-green-100);
272
- --color-text-tertiary-default: var(--dark-neutral-100);
273
-
274
- /* Dark Theme - Buttons */
275
- --color-button-brandlight-filled-hover: var(--dark-brand-50);
276
- }
277
-
1
+ :root {
2
+ /* Font */
3
+ --3afly-fonts-body: 'Manrope', sans-serif;
4
+ --3afly-fonts-heading: 'Roboto Slab', sans-serif;
5
+
6
+ //temp
7
+ --light-brand-50: #C2D0FF;
8
+ --dark-brand-50: #C2D0FF;
9
+
10
+ /* Primitives */
11
+ --dark-brand-20: #153398;
12
+ --dark-brand-50: #1E46CD;
13
+ --dark-brand-100: #5076FF;
14
+ --dark-brand-200: #7C98FF;
15
+ --dark-brand-300: #A7BBFF;
16
+
17
+ --light-brand-20: #EEF2FF;
18
+ --light-brand-50: #C2D0FF;
19
+ --light-brand-100: #2454FF;
20
+ --light-brand-200: #1A3AB2;
21
+ --light-brand-300: #0E2266;
22
+
23
+ /* Primitives - Base */
24
+ --base-dark: #121212;
25
+ --base-light: #FFFFFF;
26
+
27
+ /* Primitives - Neutral */
28
+ --dark-neutral-0: #121212;
29
+ --dark-neutral-20: #292929;
30
+ --dark-neutral-50: #333333;
31
+ --dark-neutral-100: #4D4D4D;
32
+ --dark-neutral-200: #6E6E6E;
33
+ --dark-neutral-300: #FFFFFF;
34
+
35
+ --light-neutral-0: #FFFFFF;
36
+ --light-neutral-20: #F6F7F8;
37
+ --light-neutral-50: #F1F2F4;
38
+ --light-neutral-100: #D2D5DA;
39
+ --light-neutral-200: #A5A8AC;
40
+ --light-neutral-300: #121212;
41
+
42
+ /* Primitives - Status */
43
+ --dark-green-50: #044329;
44
+ --dark-green-100: #12A26C;
45
+ --dark-green-200: #CEF8E0;
46
+ --dark-orange-50: #662500;
47
+ --dark-orange-100: #E16D00;
48
+ --dark-orange-200: #FFECCC;
49
+ --dark-red-50: #7B0000;
50
+ --dark-red-100: #F65843;
51
+ --dark-red-200: #FFEBE7;
52
+
53
+ --light-green-50: #CEF8E0;
54
+ --light-green-100: #15A46E;
55
+ --light-green-200: #06603B;
56
+ --light-orange-50: #FFECCC;
57
+ --light-orange-100: #E46F00;
58
+ --light-orange-200: #9E3900;
59
+ --light-red-50: #FFEBE7;
60
+ --light-red-100: #F75C46;
61
+ --light-red-200: #9E0000;
62
+
63
+ /* Shadows & Effects */
64
+ --color-fader: #12121220;
65
+ }
66
+
67
+ /* Primitives - Test Client */
68
+ html[data-client="test"] {
69
+ --light-brand-20: #F3E8FF;
70
+ --light-brand-50: #D8B4FE;
71
+ --light-brand-100: #A855F7;
72
+ --light-brand-200: #7E22CE;
73
+ --light-brand-300: #4C1D95;
74
+
75
+ --dark-brand-20: #5B21B6;
76
+ --dark-brand-50: #7C3AED;
77
+ --dark-brand-100: #A78BFA;
78
+ --dark-brand-200: #C4B5FD;
79
+ --dark-brand-300: #DDD6FE;
80
+ }
81
+
82
+ html[data-theme="light"] {
83
+ /* Light Theme */
84
+
85
+ --default-font-color: var(--base-dark);
86
+
87
+ /* Light Theme - Background */
88
+ --color-bg-brand-default: var(--light-brand-100);
89
+ --color-bg-brand-hover: var(--light-brand-200);
90
+ --color-bg-brand-selected: var(--light-brand-300);
91
+ --color-bg-brand-lightest-default: var(--light-brand-20);
92
+ --color-bg-brand-light-default: var(--light-brand-50);
93
+ --color-bg-error-default: var(--light-red-100);
94
+ --color-bg-error-hover: var(--light-red-200);
95
+ --color-bg-innerisland-default: var(--light-neutral-20);
96
+ --color-bg-island-default: var(--base-light);
97
+ --color-bg-island-disabled: var(--light-neutral-50);
98
+ --color-bg-island-inversed: var(--base-dark);
99
+ --color-bg-island-selected: var(--light-neutral-50);
100
+ --color-bg-page-primary-default: var(--light-neutral-50);
101
+ --color-bg-page-secondary-default: var(--light-neutral-0);
102
+ --color-bg-neutral-basic-default: var(--light-neutral-0);
103
+ --color-bg-neutral-lightest-default: var(--light-neutral-20);
104
+ --color-bg-neutral-light-default: var(--light-neutral-50);
105
+ --color-bg-neutral-medium-default: var(--light-neutral-100);
106
+ --color-bg-neutral-basic-inversed: var(--light-neutral-300);
107
+
108
+ /* Light Theme - Border */
109
+ --color-border-brand-default: var(--light-brand-100);
110
+ --color-border-error-default: var(--light-red-100);
111
+ --color-border-primary-default: var(--light-neutral-100);
112
+ --color-border-primary-hover: var(--base-dark);
113
+ --color-border-secondary-default: var(--light-neutral-200);
114
+ --color-border-secondary-hover: var(--base-dark);
115
+ --color-border-success-default: var(--light-green-100);
116
+
117
+ /* Light Theme - Chart */
118
+ --color-chart-critical: var(--light-red-100);
119
+ --color-chart-low: var(--light-green-100);
120
+ --color-chart-medium: var(--light-orange-100);
121
+
122
+ /* Light Theme - Effects */
123
+ --effect-shadow-drop: #12121214;
124
+ --effect-shadow-L: #12121208;
125
+ --effect-shadow-XL: #12121215;
126
+
127
+ /* Light Theme - Icon */
128
+ --color-icon-brand-default: var(--light-brand-100);
129
+ --color-icon-brand-hover: var(--light-brand-200);
130
+ --color-icon-error-default: var(--light-red-100);
131
+ --color-icon-error-hover: var(--light-red-200);
132
+ --color-icon-primary-default: var(--base-dark);
133
+ --color-icon-primary-inversed: var(--base-light);
134
+ --color-icon-secondary-default: var(--light-neutral-200);
135
+ --color-icon-secondary-hover: var(--base-dark);
136
+ --color-icon-success-default: var(--light-green-100);
137
+
138
+ /* Light Theme - SideMenu */
139
+ --color-sidemenu-bg-default: var(--base-light);
140
+ --color-sidemenu-bg-hover: var(--light-neutral-50);
141
+ --color-sidemenu-bg-selected: var(--light-brand-100);
142
+ --color-sidemenu-icon-default: var(--base-dark);
143
+ --color-sidemenu-icon-selected: var(--light-color-static);
144
+ --color-sidemenu-plus_button_bg-selected-hover: var(--light-brand-200);
145
+ --color-sidemenu-plus_button_bg-unselected-hover: var(--base-dark);
146
+ --color-sidemenu-plus_button_icon-selected-default: var(--light-color-static);
147
+ --color-sidemenu-plus_button_icon-selected-hover: var(--light-color-static);
148
+ --color-sidemenu-plus_button_icon-unselected-default: var(--base-dark);
149
+ --color-sidemenu-plus_button_icon-unselected-hover: var(--base-light);
150
+ --color-sidemenu-text-default: var(--base-dark);
151
+ --color-sidemenu-text-selected: var(--light-color-static);
152
+
153
+ /* Light Theme - Static */
154
+ --dark-color-static: var(--base-dark);
155
+ --dark-color-static-brand: var(--dark-brand-100);
156
+ --light-color-static: var(--base-light);
157
+ --light-color-static-brand: var(--light-brand-100);
158
+
159
+ /* Light Theme - Status */
160
+ --color-status-error-background: var(--light-red-50);
161
+ --color-status-error-foreground: var(--light-red-100);
162
+ --color-status-success-background: var(--light-green-50);
163
+ --color-status-success-foreground: var(--light-green-100);
164
+ --color-status-warning-background: var(--light-orange-50);
165
+ --color-status-warning-foreground: var(--light-orange-100);
166
+
167
+ /* Light Theme - Text */
168
+ --color-text-brand-default: var(--light-brand-100);
169
+ --color-text-brand-hover: var(--light-brand-200);
170
+ --color-text-error-default: var(--light-red-100);
171
+ --color-text-primary-default: var(--base-dark);
172
+ --color-text-primary-inversed: var(--light-neutral-0);
173
+ --color-text-secondary-default: var(--light-neutral-200);
174
+ --color-text-success-default: var(--light-green-100);
175
+ --color-text-tertiary-default: var(--light-neutral-100);
176
+
177
+ /* Light Theme - Buttons */
178
+ --color-button-brandlight-filled-hover: var(--light-brand-50);
179
+ }
180
+
181
+ html[data-theme="dark"] {
182
+ /* Dark Theme */
183
+
184
+ --default-font-color: var(--base-light);
185
+
186
+ /* Dark Theme - Background */
187
+ --color-bg-brand-default: var(--dark-brand-100);
188
+ --color-bg-brand-hover: var(--dark-brand-200);
189
+ --color-bg-brand-selected: var(--dark-brand-300);
190
+ --color-bg-brand-light-default: var(--dark-brand-50);
191
+ --color-bg-error-default: var(--dark-red-100);
192
+ --color-bg-error-hover: var(--dark-red-50);
193
+ --color-bg-innerisland-default: var(--dark-neutral-20);
194
+ --color-bg-island-default: var(--base-dark);
195
+ --color-bg-island-disabled: var(--dark-neutral-50);
196
+ --color-bg-island-inversed: var(--base-light);
197
+ --color-bg-island-selected: var(--dark-neutral-50);
198
+ --color-bg-page-default: var(--dark-neutral-50);
199
+ --color-bg-page-secondary-default: var(--dark-neutral-0);
200
+ --color-bg-page-secondary-default: var(--dark-neutral-0);
201
+ --color-bg-neutral-basic-default: var(--dark-neutral-20);
202
+ --color-bg-neutral-lightest-default: var(--dark-neutral-20);
203
+ --color-bg-neutral-light-default: var(--dark-neutral-50);
204
+ --color-bg-neutral-medium-default: var(--dark-neutral-100);
205
+ --color-bg-neutral-basic-inversed: var(--dark-neutral-300);
206
+
207
+ /* Dark Theme - Border */
208
+ --color-border-brand-default: var(--dark-brand-100);
209
+ --color-border-error-default: var(--dark-red-100);
210
+ --color-border-primary-default: var(--dark-neutral-100);
211
+ --color-border-primary-hover: var(--base-light);
212
+ --color-border-secondary-default: var(--dark-neutral-200);
213
+ --color-border-secondary-hover: var(--base-light);
214
+ --color-border-success-default: var(--dark-green-100);
215
+
216
+ /* Dark Theme - Chart */
217
+ --color-chart-critical: var(--dark-red-100);
218
+ --color-chart-low: var(--dark-green-100);
219
+ --color-chart-medium: var(--dark-orange-100);
220
+
221
+ /* Dark Theme - Effects */
222
+ --effect-shadow-drop: #12121299;
223
+
224
+ /* Dark Theme - Icon */
225
+ --color-icon-brand-default: var(--dark-brand-100);
226
+ --color-icon-brand-hover: var(--dark-brand-200);
227
+ --color-icon-error-default: var(--dark-red-100);
228
+ --color-icon-error-hover: var(--dark-red-200);
229
+ --color-icon-primary-default: var(--base-light);
230
+ --color-icon-primary-inversed: var(--base-dark);
231
+ --color-icon-secondary-default: var(--dark-neutral-200);
232
+ --color-icon-secondary-hover: var(--base-light);
233
+ --color-icon-success-default: var(--dark-green-100);
234
+
235
+ /* Dark Theme - SideMenu */
236
+ --color-sidemenu-bg-default: var(--base-dark);
237
+ --color-sidemenu-bg-hover: var(--dark-neutral-50);
238
+ --color-sidemenu-bg-selected: var(--dark-brand-100);
239
+ --color-sidemenu-icon-default: var(--base-light);
240
+ --color-sidemenu-icon-selected: var(--light-color-static);
241
+ --color-sidemenu-plus_button_bg-selected-hover: var(--dark-brand-200);
242
+ --color-sidemenu-plus_button_bg-unselected-hover: var(--base-light);
243
+ --color-sidemenu-plus_button_icon-selected-default: var(--light-color-static);
244
+ --color-sidemenu-plus_button_icon-selected-hover: var(--light-color-static);
245
+ --color-sidemenu-plus_button_icon-unselected-default: var(--base-light);
246
+ --color-sidemenu-plus_button_icon-unselected-hover: var(--base-dark);
247
+ --color-sidemenu-text-default: var(--base-light);
248
+ --color-sidemenu-text-selected: var(--light-color-static);
249
+
250
+ /* Dark Theme - Static */
251
+ --dark-color-static: var(--base-dark);
252
+ --dark-color-static-brand: var(--dark-brand-100);
253
+ --light-color-static: var(--base-light);
254
+ --light-color-static-brand: var(--light-brand-100);
255
+
256
+ /* Dark Theme - Status */
257
+ --color-status-error-background: var(--dark-red-50);
258
+ --color-status-error-foreground: var(--dark-red-100);
259
+ --color-status-success-background: var(--dark-green-50);
260
+ --color-status-success-foreground: var(--dark-green-100);
261
+ --color-status-warning-background: var(--dark-orange-50);
262
+ --color-status-warning-foreground: var(--dark-orange-100);
263
+
264
+ /* Dark Theme - Text */
265
+ --color-text-brand-default: var(--dark-brand-100);
266
+ --color-text-brand-hover: var(--dark-brand-200);
267
+ --color-text-error-default: var(--dark-red-100);
268
+ --color-text-primary-default: var(--base-light);
269
+ --color-text-primary-inversed: var(--dark-neutral-0);
270
+ --color-text-secondary-default: var(--dark-neutral-200);
271
+ --color-text-success-default: var(--dark-green-100);
272
+ --color-text-tertiary-default: var(--dark-neutral-100);
273
+
274
+ /* Dark Theme - Buttons */
275
+ --color-button-brandlight-filled-hover: var(--dark-brand-50);
276
+ }
277
+