triafly-ui-kit 1.0.25 → 1.0.27

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