triafly-ui-kit 1.0.76 → 1.0.78

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 (14) hide show
  1. package/README.md +93 -93
  2. package/dist/assets/src/components/Ui/Tooltip/Tooltip.stories.module.css +1 -1
  3. package/dist/components/Ui/Icons/Icons.js +9 -0
  4. package/dist/components/Ui/Icons/index.js +54 -52
  5. package/dist/main.d.ts +14 -0
  6. package/dist/main.js +76 -74
  7. package/dist/src/components/Ui/Tooltip/Tooltip.stories.module.css.js +1 -1
  8. package/package.json +112 -112
  9. package/src/styles/_mixins.scss +21 -21
  10. package/src/styles/fix.scss +3 -3
  11. package/src/styles/main.scss +26 -26
  12. package/src/styles/reset.scss +105 -105
  13. package/src/styles/typography.scss +106 -106
  14. package/src/styles/variables.scss +342 -342
package/src/styles/variables.scss CHANGED
@@ -1,342 +1,342 @@
1
- :root {
2
- /* Font */
3
- --3afly-fonts-body: 'Manrope', sans-serif;
4
- --3afly-fonts-heading: 'Roboto Slab', sans-serif;
5
-
6
- /* Primitives - Neutral */
7
- --light-neutral-0: #FFFFFF;
8
- --light-neutral-20: #F6F7F8;
9
- --light-neutral-50: #F1F2F4;
10
- --light-neutral-100: #D2D5DA;
11
- --light-neutral-200: #A5A8AC;
12
- --light-neutral-300: #121212;
13
-
14
- --dark-neutral-0: #121212;
15
- --dark-neutral-20: #212121;
16
- --dark-neutral-50: #323232;
17
- --dark-neutral-100: #4D4D4D;
18
- --dark-neutral-200: #6E6E6E;
19
- --dark-neutral-300: #FFFFFF;
20
-
21
- /* Primitives - Brand */
22
- --light-brand-20: #EEF2FF;
23
- --light-brand-50: #C2D0FF;
24
- --light-brand-100: #2454FF;
25
- --light-brand-200: #1A3AB2;
26
- --light-brand-300: #0E2266;
27
-
28
- --dark-brand-20: #153398;
29
- --dark-brand-50: #1E46CD;
30
- --dark-brand-100: #5076FF;
31
- --dark-brand-200: #7C98FF;
32
- --dark-brand-300: #A7BBFF;
33
-
34
- /* Primitives - Status */
35
- --light-red-50: #FFEBE7;
36
- --light-red-100: #F75C46;
37
- --light-red-200: #9E0000;
38
- --light-green-50: #CEF8E0;
39
- --light-green-100: #15A46E;
40
- --light-green-200: #06603B;
41
- --light-orange-50: #FFECCC;
42
- --light-orange-100: #E46F00;
43
- --light-orange-200: #9E3900;
44
-
45
- --dark-red-50: #7B0000;
46
- --dark-red-100: #F65843;
47
- --dark-red-200: #FFEBE7;
48
- --dark-green-50: #044329;
49
- --dark-green-100: #12A26C;
50
- --dark-green-200: #CEF8E0;
51
- --dark-orange-50: #662500;
52
- --dark-orange-100: #E16D00;
53
- --dark-orange-200: #FFECCC;
54
-
55
- /* Primitives - Accent */
56
- --light-purple-50: #F0E5FE;
57
- --light-purple-100: #9747FF;
58
- --light-purple-200: #5002B5;
59
-
60
- --dark-purple-50: #5002B5;
61
- --dark-purple-100: #A966FF;
62
- --dark-purple-200: #F0E5FE;
63
-
64
- /* Primitives - Base */
65
- --base-dark: #121212;
66
- --base-light: #FFFFFF;
67
-
68
- /* Fader */
69
- --color-fader-20: #12121220;
70
- --color-fader-80: #12121280;
71
-
72
- /* Other */
73
- --sticky_note: #FFD966;
74
-
75
- /* Ple */
76
- --crimson_flame: #E63946;
77
- --amber_gold: #F4A261;
78
- --sunflower_yellow: #E9C46A;
79
- --emerald_green: #2A9D8F;
80
- --sky_blue: #00B4D8;
81
- --ocean_wave: #0077B6;
82
- --electric_violet: #9B5DE5;
83
- --magenta_pop: #E5388C;
84
- --coral_pink: #FF6B6B;
85
- --mint_frost: #6FFFE9;
86
- --lime_punch: #A8E63B;
87
- --bronze_dust: #B08968;
88
- --arctic_ice: #BDE0FE;
89
- --graphite_gray: #8D99AE;
90
- --peach_echo: #FFB385;
91
- --flamingo_rose: #FF85A1;
92
- }
93
-
94
- html[data-client="test"] {
95
- /* Primitives - Test Client */
96
- --light-brand-20: #F3E8FF;
97
- --light-brand-50: #D8B4FE;
98
- --light-brand-100: #A855F7;
99
- --light-brand-200: #7E22CE;
100
- --light-brand-300: #4C1D95;
101
-
102
- --dark-brand-20: #5B21B6;
103
- --dark-brand-50: #7C3AED;
104
- --dark-brand-100: #A78BFA;
105
- --dark-brand-200: #C4B5FD;
106
- --dark-brand-300: #DDD6FE;
107
- }
108
-
109
- html[data-theme="light"] {
110
- /* Light Theme */
111
- --default-font-color: var(--base-dark);
112
-
113
- /* Light Theme - Background */
114
- --color-bg-page-primary-default: var(--light-neutral-50);
115
- --color-bg-page-secondary-default: var(--light-neutral-0);
116
- --color-bg-neutral-basic-default: var(--light-neutral-0);
117
- --color-bg-neutral-basic-inversed: var(--light-neutral-300);
118
- --color-bg-neutral-dark-default: var(--light-neutral-200);
119
- --color-bg-neutral-medium-default: var(--light-neutral-100);
120
- --color-bg-neutral-light-default: var(--light-neutral-50);
121
- --color-bg-neutral-lightest-default: var(--light-neutral-20);
122
- --color-bg-brand-default: var(--light-brand-100);
123
- --color-bg-brand-hover: var(--light-brand-200);
124
- --color-bg-brand-selected: var(--light-brand-300);
125
- --color-bg-brand_light-default: var(--light-brand-50);
126
- --color-bg-brand_lightest-default: var(--light-brand-20);
127
- --color-bg-error-default: var(--light-red-100);
128
- --color-bg-error-hover: var(--light-red-200);
129
- --color-bg-success-default: var(--light-green-100);
130
- --color-bg-success-hover: var(--light-green-200);
131
-
132
- /* Light Theme - Text */
133
- --color-text-primary-default: var(--light-neutral-300);
134
- --color-text-primary-inversed: var(--light-neutral-0);
135
- --color-text-brand-default: var(--light-brand-100);
136
- --color-text-brand-hover: var(--light-brand-200);
137
- --color-text-secondary-default: var(--light-neutral-200);
138
- --color-text-tertiary-default: var(--light-neutral-100);
139
- --color-text-error-default: var(--light-red-100);
140
- --color-text-success-default: var(--light-green-100);
141
- --color-text-warning-default: var(--light-orange-100);
142
-
143
- /* Light Theme - Icon */
144
- --color-icon-primary-default: var(--light-neutral-300);
145
- --color-icon-primary-inversed: var(--light-neutral-0);
146
- --color-icon-secondary-default: var(--light-neutral-200);
147
- --color-icon-secondary-hover: var(--light-neutral-300);
148
- --color-icon-brand-default: var(--light-brand-100);
149
- --color-icon-brand-hover: var(--light-brand-200);
150
- --color-icon-error-default: var(--light-red-100);
151
- --color-icon-error-hover: var(--light-red-200);
152
- --color-icon-success-default: var(--light-green-100);
153
- --color-icon-warning-default: var(--light-orange-100);
154
- --color-icon-accebt_purple_default: var(--light-purple-100);
155
-
156
- /* Light Theme - Border */
157
- --color-border-primary-default: var(--light-neutral-100);
158
- --color-border-primary-hover: var(--light-neutral-300);
159
- --color-border-secondary-default: var(--light-neutral-200);
160
- --color-border-secondary-hover: var(--light-neutral-300);
161
- --color-border-tertiary-default: var(--light-neutral-300);
162
- --color-border-tertiary-inverted: var(--light-neutral-0);
163
- --color-border-error-default: var(--light-red-100);
164
- --color-border-success-default: var(--light-green-100);
165
- --color-border-brand-default: var(--light-brand-100);
166
-
167
- /* Light Theme - Static */
168
- --light-color-static: var(--light-neutral-0);
169
- --dark-color-static: var(--light-neutral-300);
170
- --light-color-static-brand: var(--light-brand-100);
171
- --dark-color-static-brand: var(--dark-brand-100);
172
- --color-static-brand-light: var(--light-brand-50);
173
- --light-color-static-error: var(--light-red-100);
174
-
175
- /* Light Theme - Status */
176
- --color-status-success-background: var(--light-green-50);
177
- --color-status-success-foreground: var(--light-green-100);
178
- --color-status-error-background: var(--light-red-50);
179
- --color-status-error-foreground: var(--light-red-100);
180
- --color-status-warning-background: var(--light-orange-50);
181
- --color-status-warning-foreground: var(--light-orange-100);
182
-
183
- /* Light Theme - Chart */
184
- --color-chart-critical: var(--light-red-100);
185
- --color-chart-medium: var(--light-orange-100);
186
- --color-chart-low: var(--light-green-100);
187
- --color-chart-brand: var(--light-brand-100);
188
- --color-chart-accent_purple: var(--light-purple-100);
189
-
190
- /* Light Theme - Effects */
191
- --effect-shadow-L: #12121208;
192
- --effect-shadow-XL: #12121215;
193
-
194
- /* Light Theme - SideMenu */
195
- --color-sidemenu-bg-default: var(--light-neutral-0);
196
- --color-sidemenu-bg-hover: var(--light-neutral-50);
197
- --color-sidemenu-bg-selected: var(--light-brand-100);
198
- --color-sidemenu-icon-default: var(--light-neutral-300);
199
- --color-sidemenu-icon-selected: var(--light-color-static);
200
- --color-sidemenu-text-default: var(--light-neutral-300);
201
- --color-sidemenu-text-selected: var(--light-color-static);
202
-
203
- /* Light Theme just colors */
204
- --color-jc-pale-red: #FBD6D6;
205
- --color-jc-rich-red: #FF4D4D;
206
- --color-jc-pale-orange: #FBE7D6;
207
- --color-jc-rich-orange: #FF8000;
208
- --color-jc-pale-yellow: #FBF7D6;
209
- --color-jc-rich-yellow: #FFD700;
210
- --color-jc-pale-green: #D6FBD6;
211
- --color-jc-rich-green: #00C200;
212
- --color-jc-pale-cyan: #D6FBFB;
213
- --color-jc-rich-cyan: #00CACA;
214
- --color-jc-pale-blue: #D6EAFB;
215
- --color-jc-rich-blue: #008CFF;
216
- --color-jc-pale-purple: #E7D6FB;
217
- --color-jc-rich-purple: #9D00FF;
218
-
219
- /* Light Theme - Buttons */
220
- --color-button-brandlight-filled-text: var(--light-brand-100);
221
- --color-button-brandlight-filled-bg: var(--light-brand-20);
222
- --color-button-brandlight-filled-hover: var(--light-brand-50);
223
- --color-button-brandlight-filled-icon: var(--light-brand-100);
224
- }
225
-
226
- html[data-theme="dark"] {
227
- /* Dark Theme */
228
- --default-font-color: var(--base-light);
229
-
230
- /* Dark Theme - Background */
231
- --color-bg-page-primary-default: var(--dark-neutral-0);
232
- --color-bg-page-secondary-default: var(--dark-neutral-0);
233
- --color-bg-neutral-basic-default: var(--dark-neutral-20);
234
- --color-bg-neutral-basic-inversed: var(--dark-neutral-300);
235
- --color-bg-neutral-dark-default: var(--light-neutral-200);
236
- --color-bg-neutral-medium-default: var(--light-neutral-100);
237
- --color-bg-neutral-light-default: var(--dark-neutral-50);
238
- --color-bg-neutral-lightest-default: var(--dark-neutral-50);
239
- --color-bg-brand-default: var(--dark-brand-100);
240
- --color-bg-brand-hover: var(--dark-brand-200);
241
- --color-bg-brand-selected: var(--dark-brand-300);
242
- --color-bg-brand_light-default: var(--dark-brand-200);
243
- --color-bg-brand_lightest-default: var(--dark-brand-20);
244
- --color-bg-error-default: var(--dark-red-100);
245
- --color-bg-error-hover: var(--dark-red-50);
246
- --color-bg-success-default: var(--dark-green-100);
247
- --color-bg-success-hover: var(--dark-green-50);
248
-
249
- /* Dark Theme - Text */
250
- --color-text-primary-default: var(--dark-neutral-300);
251
- --color-text-primary-inversed: var(--dark-neutral-0);
252
- --color-text-brand-default: var(--dark-brand-100);
253
- --color-text-brand-hover: var(--dark-brand-200);
254
- --color-text-secondary-default: var(--dark-neutral-200);
255
- --color-text-tertiary-default: var(--dark-neutral-100);
256
- --color-text-error-default: var(--dark-red-100);
257
- --color-text-success-default: var(--dark-green-100);
258
- --color-text-warning-default: var(--dark-orange-100);
259
-
260
- /* Dark Theme - Icon */
261
- --color-icon-primary-default: var(--dark-neutral-300);
262
- --color-icon-primary-inversed: var(--dark-neutral-0);
263
- --color-icon-secondary-default: var(--dark-neutral-200);
264
- --color-icon-secondary-hover: var(--dark-neutral-300);
265
- --color-icon-brand-default: var(--dark-brand-100);
266
- --color-icon-brand-hover: var(--dark-brand-200);
267
- --color-icon-error-default: var(--dark-red-100);
268
- --color-icon-error-hover: var(--dark-red-200);
269
- --color-icon-success-default: var(--dark-green-100);
270
- --color-icon-warning-default: var(--dark-orange-100);
271
- --color-icon-accebt_purple_default: var(--dark-purple-100);
272
-
273
- /* Dark Theme - Border */
274
- --color-border-primary-default: var(--dark-neutral-100);
275
- --color-border-primary-hover: var(--dark-neutral-300);
276
- --color-border-secondary-default: var(--dark-neutral-200);
277
- --color-border-secondary-hover: var(--dark-neutral-300);
278
- --color-border-tertiary-default: var(--dark-neutral-300);
279
- --color-border-tertiary-inverted: var(--dark-neutral-0);
280
- --color-border-error-default: var(--dark-red-100);
281
- --color-border-success-default: var(--dark-green-100);
282
- --color-border-brand-default: var(--dark-brand-100);
283
-
284
- /* Dark Theme - Static */
285
- --light-color-static: var(--light-neutral-0);
286
- --dark-color-static: var(--light-neutral-300);
287
- --light-color-static-brand: var(--light-brand-100);
288
- --dark-color-static-brand: var(--dark-brand-100);
289
- --color-static-brand-light: var(--light-brand-50);
290
- --light-color-static-error: var(--light-red-100);
291
-
292
- /* Dark Theme - Status */
293
- --color-status-success-background: var(--dark-green-50);
294
- --color-status-success-foreground: var(--dark-green-100);
295
- --color-status-error-background: var(--dark-red-50);
296
- --color-status-error-foreground: var(--dark-red-100);
297
- --color-status-warning-background: var(--dark-orange-50);
298
- --color-status-warning-foreground: var(--dark-orange-100);
299
-
300
- /* Dark Theme - Chart */
301
- --color-chart-critical: var(--dark-red-100);
302
- --color-chart-medium: var(--dark-orange-100);
303
- --color-chart-low: var(--dark-green-100);
304
- --color-chart-brand: var(--dark-brand-100);
305
- --color-chart-accent_purple: var(--dark-purple-100);
306
-
307
- /* Dark Theme - Effects */
308
- --effect-shadow-L: #00000080;
309
- --effect-shadow-XL: #000000;
310
-
311
- /* Dark Theme - SideMenu */
312
- --color-sidemenu-bg-default: var(--dark-neutral-20);
313
- --color-sidemenu-bg-hover: var(--dark-neutral-50);
314
- --color-sidemenu-bg-selected: var(--dark-brand-100);
315
- --color-sidemenu-icon-default: var(--dark-neutral-300);
316
- --color-sidemenu-icon-selected: var(--light-color-static);
317
- --color-sidemenu-text-default: var(--dark-neutral-300);
318
- --color-sidemenu-text-selected: var(--light-color-static);
319
-
320
- /* Dark Theme just colors */
321
- --color-jc-pale-red: #732626;
322
- --color-jc-rich-red: #FF4D4D;
323
- --color-jc-pale-orange: #734626;
324
- --color-jc-rich-orange: #FF8000;
325
- --color-jc-pale-yellow: #737326;
326
- --color-jc-rich-yellow: #FFD700;
327
- --color-jc-pale-green: #267326;
328
- --color-jc-rich-green: #00C200;
329
- --color-jc-pale-cyan: #267373;
330
- --color-jc-rich-cyan: #00CACA;
331
- --color-jc-pale-blue: #264673;
332
- --color-jc-rich-blue: #008CFF;
333
- --color-jc-pale-purple: #462673;
334
- --color-jc-rich-purple: #9D00FF;
335
-
336
- /* Dark Theme - Buttons */
337
- --color-button-brandlight-filled-text: var(--dark-brand-300);
338
- --color-button-brandlight-filled-bg: var(--dark-brand-20);
339
- --color-button-brandlight-filled-hover: var(--dark-brand-50);
340
- --color-button-brandlight-filled-icon: var(--dark-brand-300);
341
- }
342
-
1
+ :root {
2
+ /* Font */
3
+ --3afly-fonts-body: 'Manrope', sans-serif;
4
+ --3afly-fonts-heading: 'Roboto Slab', sans-serif;
5
+
6
+ /* Primitives - Neutral */
7
+ --light-neutral-0: #FFFFFF;
8
+ --light-neutral-20: #F6F7F8;
9
+ --light-neutral-50: #F1F2F4;
10
+ --light-neutral-100: #D2D5DA;
11
+ --light-neutral-200: #A5A8AC;
12
+ --light-neutral-300: #121212;
13
+
14
+ --dark-neutral-0: #121212;
15
+ --dark-neutral-20: #212121;
16
+ --dark-neutral-50: #323232;
17
+ --dark-neutral-100: #4D4D4D;
18
+ --dark-neutral-200: #6E6E6E;
19
+ --dark-neutral-300: #FFFFFF;
20
+
21
+ /* Primitives - Brand */
22
+ --light-brand-20: #EEF2FF;
23
+ --light-brand-50: #C2D0FF;
24
+ --light-brand-100: #2454FF;
25
+ --light-brand-200: #1A3AB2;
26
+ --light-brand-300: #0E2266;
27
+
28
+ --dark-brand-20: #153398;
29
+ --dark-brand-50: #1E46CD;
30
+ --dark-brand-100: #5076FF;
31
+ --dark-brand-200: #7C98FF;
32
+ --dark-brand-300: #A7BBFF;
33
+
34
+ /* Primitives - Status */
35
+ --light-red-50: #FFEBE7;
36
+ --light-red-100: #F75C46;
37
+ --light-red-200: #9E0000;
38
+ --light-green-50: #CEF8E0;
39
+ --light-green-100: #15A46E;
40
+ --light-green-200: #06603B;
41
+ --light-orange-50: #FFECCC;
42
+ --light-orange-100: #E46F00;
43
+ --light-orange-200: #9E3900;
44
+
45
+ --dark-red-50: #7B0000;
46
+ --dark-red-100: #F65843;
47
+ --dark-red-200: #FFEBE7;
48
+ --dark-green-50: #044329;
49
+ --dark-green-100: #12A26C;
50
+ --dark-green-200: #CEF8E0;
51
+ --dark-orange-50: #662500;
52
+ --dark-orange-100: #E16D00;
53
+ --dark-orange-200: #FFECCC;
54
+
55
+ /* Primitives - Accent */
56
+ --light-purple-50: #F0E5FE;
57
+ --light-purple-100: #9747FF;
58
+ --light-purple-200: #5002B5;
59
+
60
+ --dark-purple-50: #5002B5;
61
+ --dark-purple-100: #A966FF;
62
+ --dark-purple-200: #F0E5FE;
63
+
64
+ /* Primitives - Base */
65
+ --base-dark: #121212;
66
+ --base-light: #FFFFFF;
67
+
68
+ /* Fader */
69
+ --color-fader-20: #12121220;
70
+ --color-fader-80: #12121280;
71
+
72
+ /* Other */
73
+ --sticky_note: #FFD966;
74
+
75
+ /* Ple */
76
+ --crimson_flame: #E63946;
77
+ --amber_gold: #F4A261;
78
+ --sunflower_yellow: #E9C46A;
79
+ --emerald_green: #2A9D8F;
80
+ --sky_blue: #00B4D8;
81
+ --ocean_wave: #0077B6;
82
+ --electric_violet: #9B5DE5;
83
+ --magenta_pop: #E5388C;
84
+ --coral_pink: #FF6B6B;
85
+ --mint_frost: #6FFFE9;
86
+ --lime_punch: #A8E63B;
87
+ --bronze_dust: #B08968;
88
+ --arctic_ice: #BDE0FE;
89
+ --graphite_gray: #8D99AE;
90
+ --peach_echo: #FFB385;
91
+ --flamingo_rose: #FF85A1;
92
+ }
93
+
94
+ html[data-client="test"] {
95
+ /* Primitives - Test Client */
96
+ --light-brand-20: #F3E8FF;
97
+ --light-brand-50: #D8B4FE;
98
+ --light-brand-100: #A855F7;
99
+ --light-brand-200: #7E22CE;
100
+ --light-brand-300: #4C1D95;
101
+
102
+ --dark-brand-20: #5B21B6;
103
+ --dark-brand-50: #7C3AED;
104
+ --dark-brand-100: #A78BFA;
105
+ --dark-brand-200: #C4B5FD;
106
+ --dark-brand-300: #DDD6FE;
107
+ }
108
+
109
+ html[data-theme="light"] {
110
+ /* Light Theme */
111
+ --default-font-color: var(--base-dark);
112
+
113
+ /* Light Theme - Background */
114
+ --color-bg-page-primary-default: var(--light-neutral-50);
115
+ --color-bg-page-secondary-default: var(--light-neutral-0);
116
+ --color-bg-neutral-basic-default: var(--light-neutral-0);
117
+ --color-bg-neutral-basic-inversed: var(--light-neutral-300);
118
+ --color-bg-neutral-dark-default: var(--light-neutral-200);
119
+ --color-bg-neutral-medium-default: var(--light-neutral-100);
120
+ --color-bg-neutral-light-default: var(--light-neutral-50);
121
+ --color-bg-neutral-lightest-default: var(--light-neutral-20);
122
+ --color-bg-brand-default: var(--light-brand-100);
123
+ --color-bg-brand-hover: var(--light-brand-200);
124
+ --color-bg-brand-selected: var(--light-brand-300);
125
+ --color-bg-brand_light-default: var(--light-brand-50);
126
+ --color-bg-brand_lightest-default: var(--light-brand-20);
127
+ --color-bg-error-default: var(--light-red-100);
128
+ --color-bg-error-hover: var(--light-red-200);
129
+ --color-bg-success-default: var(--light-green-100);
130
+ --color-bg-success-hover: var(--light-green-200);
131
+
132
+ /* Light Theme - Text */
133
+ --color-text-primary-default: var(--light-neutral-300);
134
+ --color-text-primary-inversed: var(--light-neutral-0);
135
+ --color-text-brand-default: var(--light-brand-100);
136
+ --color-text-brand-hover: var(--light-brand-200);
137
+ --color-text-secondary-default: var(--light-neutral-200);
138
+ --color-text-tertiary-default: var(--light-neutral-100);
139
+ --color-text-error-default: var(--light-red-100);
140
+ --color-text-success-default: var(--light-green-100);
141
+ --color-text-warning-default: var(--light-orange-100);
142
+
143
+ /* Light Theme - Icon */
144
+ --color-icon-primary-default: var(--light-neutral-300);
145
+ --color-icon-primary-inversed: var(--light-neutral-0);
146
+ --color-icon-secondary-default: var(--light-neutral-200);
147
+ --color-icon-secondary-hover: var(--light-neutral-300);
148
+ --color-icon-brand-default: var(--light-brand-100);
149
+ --color-icon-brand-hover: var(--light-brand-200);
150
+ --color-icon-error-default: var(--light-red-100);
151
+ --color-icon-error-hover: var(--light-red-200);
152
+ --color-icon-success-default: var(--light-green-100);
153
+ --color-icon-warning-default: var(--light-orange-100);
154
+ --color-icon-accebt_purple_default: var(--light-purple-100);
155
+
156
+ /* Light Theme - Border */
157
+ --color-border-primary-default: var(--light-neutral-100);
158
+ --color-border-primary-hover: var(--light-neutral-300);
159
+ --color-border-secondary-default: var(--light-neutral-200);
160
+ --color-border-secondary-hover: var(--light-neutral-300);
161
+ --color-border-tertiary-default: var(--light-neutral-300);
162
+ --color-border-tertiary-inverted: var(--light-neutral-0);
163
+ --color-border-error-default: var(--light-red-100);
164
+ --color-border-success-default: var(--light-green-100);
165
+ --color-border-brand-default: var(--light-brand-100);
166
+
167
+ /* Light Theme - Static */
168
+ --light-color-static: var(--light-neutral-0);
169
+ --dark-color-static: var(--light-neutral-300);
170
+ --light-color-static-brand: var(--light-brand-100);
171
+ --dark-color-static-brand: var(--dark-brand-100);
172
+ --color-static-brand-light: var(--light-brand-50);
173
+ --light-color-static-error: var(--light-red-100);
174
+
175
+ /* Light Theme - Status */
176
+ --color-status-success-background: var(--light-green-50);
177
+ --color-status-success-foreground: var(--light-green-100);
178
+ --color-status-error-background: var(--light-red-50);
179
+ --color-status-error-foreground: var(--light-red-100);
180
+ --color-status-warning-background: var(--light-orange-50);
181
+ --color-status-warning-foreground: var(--light-orange-100);
182
+
183
+ /* Light Theme - Chart */
184
+ --color-chart-critical: var(--light-red-100);
185
+ --color-chart-medium: var(--light-orange-100);
186
+ --color-chart-low: var(--light-green-100);
187
+ --color-chart-brand: var(--light-brand-100);
188
+ --color-chart-accent_purple: var(--light-purple-100);
189
+
190
+ /* Light Theme - Effects */
191
+ --effect-shadow-L: #12121208;
192
+ --effect-shadow-XL: #12121215;
193
+
194
+ /* Light Theme - SideMenu */
195
+ --color-sidemenu-bg-default: var(--light-neutral-0);
196
+ --color-sidemenu-bg-hover: var(--light-neutral-50);
197
+ --color-sidemenu-bg-selected: var(--light-brand-100);
198
+ --color-sidemenu-icon-default: var(--light-neutral-300);
199
+ --color-sidemenu-icon-selected: var(--light-color-static);
200
+ --color-sidemenu-text-default: var(--light-neutral-300);
201
+ --color-sidemenu-text-selected: var(--light-color-static);
202
+
203
+ /* Light Theme just colors */
204
+ --color-jc-pale-red: #FBD6D6;
205
+ --color-jc-rich-red: #FF4D4D;
206
+ --color-jc-pale-orange: #FBE7D6;
207
+ --color-jc-rich-orange: #FF8000;
208
+ --color-jc-pale-yellow: #FBF7D6;
209
+ --color-jc-rich-yellow: #FFD700;
210
+ --color-jc-pale-green: #D6FBD6;
211
+ --color-jc-rich-green: #00C200;
212
+ --color-jc-pale-cyan: #D6FBFB;
213
+ --color-jc-rich-cyan: #00CACA;
214
+ --color-jc-pale-blue: #D6EAFB;
215
+ --color-jc-rich-blue: #008CFF;
216
+ --color-jc-pale-purple: #E7D6FB;
217
+ --color-jc-rich-purple: #9D00FF;
218
+
219
+ /* Light Theme - Buttons */
220
+ --color-button-brandlight-filled-text: var(--light-brand-100);
221
+ --color-button-brandlight-filled-bg: var(--light-brand-20);
222
+ --color-button-brandlight-filled-hover: var(--light-brand-50);
223
+ --color-button-brandlight-filled-icon: var(--light-brand-100);
224
+ }
225
+
226
+ html[data-theme="dark"] {
227
+ /* Dark Theme */
228
+ --default-font-color: var(--base-light);
229
+
230
+ /* Dark Theme - Background */
231
+ --color-bg-page-primary-default: var(--dark-neutral-0);
232
+ --color-bg-page-secondary-default: var(--dark-neutral-0);
233
+ --color-bg-neutral-basic-default: var(--dark-neutral-20);
234
+ --color-bg-neutral-basic-inversed: var(--dark-neutral-300);
235
+ --color-bg-neutral-dark-default: var(--light-neutral-200);
236
+ --color-bg-neutral-medium-default: var(--light-neutral-100);
237
+ --color-bg-neutral-light-default: var(--dark-neutral-50);
238
+ --color-bg-neutral-lightest-default: var(--dark-neutral-50);
239
+ --color-bg-brand-default: var(--dark-brand-100);
240
+ --color-bg-brand-hover: var(--dark-brand-200);
241
+ --color-bg-brand-selected: var(--dark-brand-300);
242
+ --color-bg-brand_light-default: var(--dark-brand-200);
243
+ --color-bg-brand_lightest-default: var(--dark-brand-20);
244
+ --color-bg-error-default: var(--dark-red-100);
245
+ --color-bg-error-hover: var(--dark-red-50);
246
+ --color-bg-success-default: var(--dark-green-100);
247
+ --color-bg-success-hover: var(--dark-green-50);
248
+
249
+ /* Dark Theme - Text */
250
+ --color-text-primary-default: var(--dark-neutral-300);
251
+ --color-text-primary-inversed: var(--dark-neutral-0);
252
+ --color-text-brand-default: var(--dark-brand-100);
253
+ --color-text-brand-hover: var(--dark-brand-200);
254
+ --color-text-secondary-default: var(--dark-neutral-200);
255
+ --color-text-tertiary-default: var(--dark-neutral-100);
256
+ --color-text-error-default: var(--dark-red-100);
257
+ --color-text-success-default: var(--dark-green-100);
258
+ --color-text-warning-default: var(--dark-orange-100);
259
+
260
+ /* Dark Theme - Icon */
261
+ --color-icon-primary-default: var(--dark-neutral-300);
262
+ --color-icon-primary-inversed: var(--dark-neutral-0);
263
+ --color-icon-secondary-default: var(--dark-neutral-200);
264
+ --color-icon-secondary-hover: var(--dark-neutral-300);
265
+ --color-icon-brand-default: var(--dark-brand-100);
266
+ --color-icon-brand-hover: var(--dark-brand-200);
267
+ --color-icon-error-default: var(--dark-red-100);
268
+ --color-icon-error-hover: var(--dark-red-200);
269
+ --color-icon-success-default: var(--dark-green-100);
270
+ --color-icon-warning-default: var(--dark-orange-100);
271
+ --color-icon-accebt_purple_default: var(--dark-purple-100);
272
+
273
+ /* Dark Theme - Border */
274
+ --color-border-primary-default: var(--dark-neutral-100);
275
+ --color-border-primary-hover: var(--dark-neutral-300);
276
+ --color-border-secondary-default: var(--dark-neutral-200);
277
+ --color-border-secondary-hover: var(--dark-neutral-300);
278
+ --color-border-tertiary-default: var(--dark-neutral-300);
279
+ --color-border-tertiary-inverted: var(--dark-neutral-0);
280
+ --color-border-error-default: var(--dark-red-100);
281
+ --color-border-success-default: var(--dark-green-100);
282
+ --color-border-brand-default: var(--dark-brand-100);
283
+
284
+ /* Dark Theme - Static */
285
+ --light-color-static: var(--light-neutral-0);
286
+ --dark-color-static: var(--light-neutral-300);
287
+ --light-color-static-brand: var(--light-brand-100);
288
+ --dark-color-static-brand: var(--dark-brand-100);
289
+ --color-static-brand-light: var(--light-brand-50);
290
+ --light-color-static-error: var(--light-red-100);
291
+
292
+ /* Dark Theme - Status */
293
+ --color-status-success-background: var(--dark-green-50);
294
+ --color-status-success-foreground: var(--dark-green-100);
295
+ --color-status-error-background: var(--dark-red-50);
296
+ --color-status-error-foreground: var(--dark-red-100);
297
+ --color-status-warning-background: var(--dark-orange-50);
298
+ --color-status-warning-foreground: var(--dark-orange-100);
299
+
300
+ /* Dark Theme - Chart */
301
+ --color-chart-critical: var(--dark-red-100);
302
+ --color-chart-medium: var(--dark-orange-100);
303
+ --color-chart-low: var(--dark-green-100);
304
+ --color-chart-brand: var(--dark-brand-100);
305
+ --color-chart-accent_purple: var(--dark-purple-100);
306
+
307
+ /* Dark Theme - Effects */
308
+ --effect-shadow-L: #00000080;
309
+ --effect-shadow-XL: #000000;
310
+
311
+ /* Dark Theme - SideMenu */
312
+ --color-sidemenu-bg-default: var(--dark-neutral-20);
313
+ --color-sidemenu-bg-hover: var(--dark-neutral-50);
314
+ --color-sidemenu-bg-selected: var(--dark-brand-100);
315
+ --color-sidemenu-icon-default: var(--dark-neutral-300);
316
+ --color-sidemenu-icon-selected: var(--light-color-static);
317
+ --color-sidemenu-text-default: var(--dark-neutral-300);
318
+ --color-sidemenu-text-selected: var(--light-color-static);
319
+
320
+ /* Dark Theme just colors */
321
+ --color-jc-pale-red: #732626;
322
+ --color-jc-rich-red: #FF4D4D;
323
+ --color-jc-pale-orange: #734626;
324
+ --color-jc-rich-orange: #FF8000;
325
+ --color-jc-pale-yellow: #737326;
326
+ --color-jc-rich-yellow: #FFD700;
327
+ --color-jc-pale-green: #267326;
328
+ --color-jc-rich-green: #00C200;
329
+ --color-jc-pale-cyan: #267373;
330
+ --color-jc-rich-cyan: #00CACA;
331
+ --color-jc-pale-blue: #264673;
332
+ --color-jc-rich-blue: #008CFF;
333
+ --color-jc-pale-purple: #462673;
334
+ --color-jc-rich-purple: #9D00FF;
335
+
336
+ /* Dark Theme - Buttons */
337
+ --color-button-brandlight-filled-text: var(--dark-brand-300);
338
+ --color-button-brandlight-filled-bg: var(--dark-brand-20);
339
+ --color-button-brandlight-filled-hover: var(--dark-brand-50);
340
+ --color-button-brandlight-filled-icon: var(--dark-brand-300);
341
+ }
342
+