@tedi-design-system/core 2.0.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.
Files changed (51) hide show
  1. package/README.md +14 -0
  2. package/_base.scss +93 -0
  3. package/_fonts.scss +253 -0
  4. package/_helpers.scss +43 -0
  5. package/_icons.scss +51 -0
  6. package/_mixins.scss +108 -0
  7. package/_print.scss +35 -0
  8. package/_typography.scss +220 -0
  9. package/bootstrap-utility/_breakpoints.scss +136 -0
  10. package/bootstrap-utility/_grid.scss +167 -0
  11. package/bootstrap-utility/_mixin-utilities.scss +95 -0
  12. package/bootstrap-utility/_utilities-api.scss +23 -0
  13. package/bootstrap-utility/_utilities.scss +104 -0
  14. package/fonts/README.md +34 -0
  15. package/fonts/material-symbols-outlined.woff2 +0 -0
  16. package/fonts/material-symbols-rounded.woff2 +0 -0
  17. package/fonts/material-symbols-sharp.woff2 +0 -0
  18. package/fonts/roboto-v30-cyrillic-300-italic.woff2 +0 -0
  19. package/fonts/roboto-v30-cyrillic-300.woff2 +0 -0
  20. package/fonts/roboto-v30-cyrillic-400-italic.woff2 +0 -0
  21. package/fonts/roboto-v30-cyrillic-400.woff2 +0 -0
  22. package/fonts/roboto-v30-cyrillic-700-italic.woff2 +0 -0
  23. package/fonts/roboto-v30-cyrillic-700.woff2 +0 -0
  24. package/fonts/roboto-v30-cyrillic-ext-300-italic.woff2 +0 -0
  25. package/fonts/roboto-v30-cyrillic-ext-300.woff2 +0 -0
  26. package/fonts/roboto-v30-cyrillic-ext-400-italic.woff2 +0 -0
  27. package/fonts/roboto-v30-cyrillic-ext-400.woff2 +0 -0
  28. package/fonts/roboto-v30-cyrillic-ext-700-italic.woff2 +0 -0
  29. package/fonts/roboto-v30-cyrillic-ext-700.woff2 +0 -0
  30. package/fonts/roboto-v30-latin-300-italic.woff2 +0 -0
  31. package/fonts/roboto-v30-latin-300.woff2 +0 -0
  32. package/fonts/roboto-v30-latin-400-italic.woff2 +0 -0
  33. package/fonts/roboto-v30-latin-400.woff2 +0 -0
  34. package/fonts/roboto-v30-latin-700-italic.woff2 +0 -0
  35. package/fonts/roboto-v30-latin-700.woff2 +0 -0
  36. package/fonts/roboto-v30-latin-ext-300-italic.woff2 +0 -0
  37. package/fonts/roboto-v30-latin-ext-300.woff2 +0 -0
  38. package/fonts/roboto-v30-latin-ext-400-italic.woff2 +0 -0
  39. package/fonts/roboto-v30-latin-ext-400.woff2 +0 -0
  40. package/fonts/roboto-v30-latin-ext-700-italic.woff2 +0 -0
  41. package/fonts/roboto-v30-latin-ext-700.woff2 +0 -0
  42. package/index.css +1 -0
  43. package/index.scss +17 -0
  44. package/package.json +63 -0
  45. package/tedi-storybook-styles.scss +172 -0
  46. package/variables/_base-variables.scss +168 -0
  47. package/variables/_bootstrap-variables.scss +30 -0
  48. package/variables/_color-variables.scss +1113 -0
  49. package/variables/_dimensional-variables.scss +1236 -0
  50. package/variables/_font-variables.scss +77 -0
  51. package/variables/_utility-variables.scss +11 -0
package/variables/_color-variables.scss ADDED
@@ -0,0 +1,1113 @@
1
+ :root {
2
+ --alert-default-background-danger: var(--general-status-danger-background-primary);
3
+ --alert-default-background-info: var(--general-status-info-background-light);
4
+ --alert-default-background-success: var(--general-status-success-background-primary);
5
+ --alert-default-background-warning: var(--general-status-warning-background-light);
6
+ --alert-default-border-danger: var(--general-status-danger-border);
7
+ --alert-default-border-info: var(--general-status-info-border);
8
+ --alert-default-border-success: var(--general-status-success-border);
9
+ --alert-default-border-warning: var(--general-status-warning-border);
10
+ --alert-default-text-danger: var(--general-text-primary);
11
+ --alert-default-text-info: var(--general-text-primary);
12
+ --alert-default-text-success: var(--general-text-primary);
13
+ --alert-default-text-warning: var(--general-text-primary);
14
+ --alert-toast-background-danger: var(--alert-default-background-danger);
15
+ --alert-toast-background-info: var(--alert-default-background-info);
16
+ --alert-toast-background-success: var(--alert-default-background-success);
17
+ --alert-toast-background-warning: var(--alert-default-background-warning);
18
+ --alert-toast-border-danger: var(--alert-default-border-danger);
19
+ --alert-toast-border-info: var(--alert-default-border-info);
20
+ --alert-toast-border-success: var(--alert-default-border-success);
21
+ --alert-toast-border-warning: var(--alert-default-border-warning);
22
+ --alert-toast-text-danger: var(--alert-default-text-danger);
23
+ --alert-toast-text-info: var(--alert-default-text-info);
24
+ --alert-toast-text-success: var(--alert-default-text-success);
25
+ --alert-toast-text-warning: var(--alert-default-text-warning);
26
+ --avatar-background-default: var(--general-status-neutral-background-light);
27
+ --brand-logo: var(--primary-600);
28
+ --button-card-active-background: var(--general-surface-brand-tertiary);
29
+ --button-card-active-border: var(--primary-400);
30
+ --button-card-active-icon-background: var(--general-surface-brand-primary);
31
+ --button-card-hover-background: var(--button-main-secondary-background-hover);
32
+ --button-card-hover-border: var(--primary-300);
33
+ --button-card-hover-icon-background: var(--general-surface-brand-primary);
34
+ --button-close-background-active: var(--alpha-20);
35
+ --button-close-background-default: var(--alpha-01);
36
+ --button-close-background-focus: var(--alpha-01);
37
+ --button-close-background-hover: var(--alpha-10);
38
+ --button-close-text-active: var(--general-text-primary);
39
+ --button-close-text-default: var(--general-text-tertiary);
40
+ --button-close-text-focus: var(--general-text-primary);
41
+ --button-close-text-hover: var(--general-text-primary);
42
+ --button-floating-primary-background-active: var(--button-main-primary-background-active);
43
+ --button-floating-primary-background-default: var(--button-main-primary-background-default);
44
+ --button-floating-primary-background-focus: var(--button-main-primary-background-focus);
45
+ --button-floating-primary-background-hover: var(--button-main-primary-background-hover);
46
+ --button-floating-primary-border-active: var(--button-main-primary-background-active);
47
+ --button-floating-primary-border-default: var(--button-main-primary-border-default);
48
+ --button-floating-primary-border-focus: var(--button-main-primary-border-focus);
49
+ --button-floating-primary-border-hover: var(--button-main-primary-border-hover);
50
+ --button-floating-primary-text-default: var(--button-main-primary-text-default);
51
+ --button-floating-secondary-background-active: var(--button-main-primary-inverted-background-active);
52
+ --button-floating-secondary-background-default: var(--button-main-primary-inverted-background-default);
53
+ --button-floating-secondary-background-focus: var(--button-main-primary-inverted-background-focus);
54
+ --button-floating-secondary-background-hover: var(--button-main-primary-inverted-background-hover);
55
+ --button-floating-secondary-border-active: var(--button-main-primary-inverted-border-active);
56
+ --button-floating-secondary-border-default: var(--button-main-primary-inverted-border-default);
57
+ --button-floating-secondary-border-focus: var(--button-main-primary-inverted-border-focus);
58
+ --button-floating-secondary-border-hover: var(--button-main-primary-inverted-border-hover);
59
+ --button-floating-secondary-text-active: var(--button-main-primary-inverted-text-active);
60
+ --button-floating-secondary-text-default: var(--button-main-primary-inverted-text-default);
61
+ --button-floating-secondary-text-hover: var(--button-main-primary-inverted-text-hover);
62
+ --button-group-primary-disabled-background: var(--button-main-disabled-general-background);
63
+ --button-group-primary-disabled-border: var(--button-group-primary-inactive-border);
64
+ --button-group-primary-disabled-text: var(--button-main-disabled-general-text);
65
+ --button-group-primary-hover-background: var(--form-checkbox-radio-card-primary-hover-background);
66
+ --button-group-primary-hover-border: var(--form-checkbox-radio-card-primary-hover-border);
67
+ --button-group-primary-hover-text: var(--form-checkbox-radio-card-primary-hover-text);
68
+ --button-group-primary-inactive-background: var(--form-checkbox-radio-card-primary-inactive-background);
69
+ --button-group-primary-inactive-border: var(--form-checkbox-radio-card-primary-inactive-border-group);
70
+ --button-group-primary-inactive-text: var(--form-checkbox-radio-card-primary-inactive-text);
71
+ --button-group-primary-selected-background: var(--form-checkbox-radio-card-primary-active-background);
72
+ --button-group-primary-selected-border: var(--form-checkbox-radio-card-primary-active-border-group);
73
+ --button-group-primary-selected-text: var(--form-checkbox-radio-card-primary-active-text);
74
+ --button-group-secondary-disabled-background: var(--alpha-01);
75
+ --button-group-secondary-disabled-border: var(--button-main-disabled-general-border);
76
+ --button-group-secondary-disabled-text: var(--button-main-disabled-general-text);
77
+ --button-group-secondary-hover-background: var(--form-checkbox-radio-card-secondary-hover-background);
78
+ --button-group-secondary-hover-border: var(--form-checkbox-radio-card-secondary-hover-border);
79
+ --button-group-secondary-hover-text: var(--form-checkbox-radio-card-secondary-hover-text);
80
+ --button-group-secondary-inactive-background: var(--form-checkbox-radio-card-secondary-inactive-background);
81
+ --button-group-secondary-inactive-border: var(--form-checkbox-radio-card-secondary-inactive-border);
82
+ --button-group-secondary-inactive-text: var(--form-checkbox-radio-card-secondary-inactive-text);
83
+ --button-group-secondary-selected-background: var(--form-checkbox-radio-card-secondary-active-background);
84
+ --button-group-secondary-selected-border: var(--form-checkbox-radio-card-secondary-active-border);
85
+ --button-group-secondary-selected-text: var(--form-checkbox-radio-card-secondary-active-text);
86
+ --button-main-danger-neutral-background-active: var(--alpha-01);
87
+ --button-main-danger-neutral-background-default: var(--alpha-01);
88
+ --button-main-danger-neutral-background-focus: var(--alpha-01);
89
+ --button-main-danger-neutral-background-hover: var(--alpha-01);
90
+ --button-main-danger-neutral-border-active: var(--alpha-01);
91
+ --button-main-danger-neutral-border-default: var(--alpha-01);
92
+ --button-main-danger-neutral-border-focus: var(--neutral-100);
93
+ --button-main-danger-neutral-border-hover: var(--alpha-01);
94
+ --button-main-danger-neutral-icon-only-background-active: var(--red-200);
95
+ --button-main-danger-neutral-icon-only-background-default: var(--button-main-danger-neutral-background-default);
96
+ --button-main-danger-neutral-icon-only-background-focus: var(--button-main-danger-neutral-background-focus);
97
+ --button-main-danger-neutral-icon-only-background-hover: var(--red-100);
98
+ --button-main-danger-neutral-text-active: var(--red-800);
99
+ --button-main-danger-neutral-text-default: var(--red-600);
100
+ --button-main-danger-neutral-text-focus: var(--red-600);
101
+ --button-main-danger-neutral-text-hover: var(--red-700);
102
+ --button-main-danger-background-active: var(--red-800);
103
+ --button-main-danger-background-default: var(--red-600);
104
+ --button-main-danger-background-focus: var(--red-600);
105
+ --button-main-danger-background-hover: var(--red-700);
106
+ --button-main-danger-border-active: var(--button-main-danger-background-active);
107
+ --button-main-danger-border-default: var(--button-main-danger-background-default);
108
+ --button-main-danger-border-focus: var(--button-main-danger-background-focus);
109
+ --button-main-danger-border-hover: var(--button-main-danger-background-hover);
110
+ --button-main-danger-text-default: var(--general-text-white);
111
+ --button-main-disabled-general-background: var(--general-surface-disabled);
112
+ --button-main-disabled-general-border: var(--button-main-disabled-general-background);
113
+ --button-main-disabled-general-text: var(--general-text-disabled);
114
+ --button-main-disabled-neutral-background: var(--button-main-neutral-background-default);
115
+ --button-main-disabled-neutral-border: var(--button-main-neutral-border-default);
116
+ --button-main-neutral-inverted-background-active: var(--alpha-01);
117
+ --button-main-neutral-inverted-background-default: var(--alpha-01);
118
+ --button-main-neutral-inverted-background-focus: var(--alpha-01);
119
+ --button-main-neutral-inverted-background-hover: var(--alpha-01);
120
+ --button-main-neutral-inverted-border-active: var(--alpha-01);
121
+ --button-main-neutral-inverted-border-default: var(--alpha-01);
122
+ --button-main-neutral-inverted-border-focus: var(--neutral-100);
123
+ --button-main-neutral-inverted-border-hover: var(--alpha-01);
124
+ --button-main-neutral-inverted-icon-only-background-active: var(--button-main-secondary-inverted-background-active);
125
+ --button-main-neutral-inverted-icon-only-background-default: var(--button-main-secondary-inverted-background-default);
126
+ --button-main-neutral-inverted-icon-only-background-focus: var(--button-main-secondary-inverted-background-focus);
127
+ --button-main-neutral-inverted-icon-only-background-hover: var(--button-main-secondary-inverted-background-hover);
128
+ --button-main-neutral-inverted-text-active: var(--neutral-100);
129
+ --button-main-neutral-inverted-text-default: var(--neutral-100);
130
+ --button-main-neutral-inverted-text-focus: var(--neutral-100);
131
+ --button-main-neutral-inverted-text-hover: var(--primary-200);
132
+ --button-main-neutral-background-active: var(--alpha-01);
133
+ --button-main-neutral-background-default: var(--alpha-01);
134
+ --button-main-neutral-background-focus: var(--alpha-01);
135
+ --button-main-neutral-background-hover: var(--alpha-01);
136
+ --button-main-neutral-border-active: var(--alpha-01);
137
+ --button-main-neutral-border-default: var(--alpha-01);
138
+ --button-main-neutral-border-focus: var(--neutral-100);
139
+ --button-main-neutral-border-hover: var(--alpha-01);
140
+ --button-main-neutral-icon-only-background-active: var(--button-main-secondary-background-active);
141
+ --button-main-neutral-icon-only-background-default: var(--alpha-01);
142
+ --button-main-neutral-icon-only-background-focus: var(--button-main-neutral-icon-only-background-default);
143
+ --button-main-neutral-icon-only-background-hover: var(--button-main-secondary-background-hover);
144
+ --button-main-neutral-text-active: var(--primary-800);
145
+ --button-main-neutral-text-default: var(--primary-600);
146
+ --button-main-neutral-text-focus: var(--primary-800);
147
+ --button-main-neutral-text-hover: var(--primary-700);
148
+ --button-main-primary-inverted-background-active: var(--primary-300);
149
+ --button-main-primary-inverted-background-default: var(--primary-200);
150
+ --button-main-primary-inverted-background-focus: var(--button-main-primary-inverted-background-default);
151
+ --button-main-primary-inverted-background-hover: var(--primary-300);
152
+ --button-main-primary-inverted-border-active: var(--button-main-primary-inverted-background-active);
153
+ --button-main-primary-inverted-border-default: var(--button-main-primary-inverted-background-default);
154
+ --button-main-primary-inverted-border-focus: var(--button-main-primary-inverted-background-focus);
155
+ --button-main-primary-inverted-border-hover: var(--button-main-primary-inverted-background-hover);
156
+ --button-main-primary-inverted-text-active: var(--primary-800);
157
+ --button-main-primary-inverted-text-default: var(--primary-600);
158
+ --button-main-primary-inverted-text-hover: var(--primary-700);
159
+ --button-main-primary-background-active: var(--primary-800);
160
+ --button-main-primary-background-default: var(--primary-600);
161
+ --button-main-primary-background-focus: var(--primary-600);
162
+ --button-main-primary-background-hover: var(--primary-700);
163
+ --button-main-primary-border-active: var(--button-main-primary-background-active);
164
+ --button-main-primary-border-default: var(--button-main-primary-background-default);
165
+ --button-main-primary-border-focus: var(--button-main-primary-background-focus);
166
+ --button-main-primary-border-hover: var(--button-main-primary-background-hover);
167
+ --button-main-primary-text-default: var(--general-text-white);
168
+ --button-main-secondary-inverted-background-active: var(--alpha-white-10);
169
+ --button-main-secondary-inverted-background-default: var(--alpha-01);
170
+ --button-main-secondary-inverted-background-focus: var(--alpha-01);
171
+ --button-main-secondary-inverted-background-hover: var(--alpha-white-10);
172
+ --button-main-secondary-inverted-border-active: var(--neutral-100);
173
+ --button-main-secondary-inverted-border-default: var(--alpha-white-50);
174
+ --button-main-secondary-inverted-border-focus: var(--neutral-100);
175
+ --button-main-secondary-inverted-border-hover: var(--neutral-100);
176
+ --button-main-secondary-inverted-text-default: var(--general-text-white);
177
+ --button-main-secondary-background-active: var(--general-surface-brand-tertiary);
178
+ --button-main-secondary-background-default: var(--neutral-100);
179
+ --button-main-secondary-background-focus: var(--neutral-100);
180
+ --button-main-secondary-background-hover: var(--general-surface-hover);
181
+ --button-main-secondary-border-active: var(--primary-700);
182
+ --button-main-secondary-border-default: var(--general-border-secondary);
183
+ --button-main-secondary-border-focus: var(--primary-600);
184
+ --button-main-secondary-border-hover: var(--primary-600);
185
+ --button-main-secondary-text-default: var(--primary-600);
186
+ --button-main-success-background-active: var(--green-800);
187
+ --button-main-success-background-default: var(--green-600);
188
+ --button-main-success-background-focus: var(--green-600);
189
+ --button-main-success-background-hover: var(--green-700);
190
+ --button-main-success-border-active: var(--button-main-success-background-active);
191
+ --button-main-success-border-default: var(--button-main-success-background-default);
192
+ --button-main-success-border-focus: var(--button-main-success-background-focus);
193
+ --button-main-success-border-hover: var(--button-main-success-background-hover);
194
+ --button-main-success-text-default: var(--general-text-white);
195
+ --card-background-accent: var(--general-surface-accent);
196
+ --card-background-brand-primary: var(--general-surface-brand-primary);
197
+ --card-background-brand-quaternary: var(--general-surface-brand-quaternary);
198
+ --card-background-brand-secondary: var(--general-surface-brand-secondary);
199
+ --card-background-brand-tertiary: var(--general-surface-brand-tertiary);
200
+ --card-background-primary: var(--general-surface-primary);
201
+ --card-background-secondary: var(--general-surface-secondary);
202
+ --card-background-success: var(--general-surface-success);
203
+ --card-background-tertiary: var(--general-surface-tertiary);
204
+ --card-border-primary: var(--general-border-primary);
205
+ --card-border-selected: var(--general-border-brand);
206
+ --empty-state-border: var(--card-border-primary);
207
+ --empty-state-background-primary: var(--general-surface-primary);
208
+ --empty-state-background-secondary: var(--general-surface-secondary);
209
+ --empty-state-background-tertiary: var(--general-surface-tertiary);
210
+ --empty-state-icon-primary: var(--general-icon-brand);
211
+ --empty-state-icon-secondary: var(--general-icon-tertiary);
212
+ --filter-primary-active-background: var(--form-checkbox-radio-card-primary-active-background);
213
+ --filter-primary-active-border: var(--form-checkbox-radio-card-primary-active-border-group);
214
+ --filter-primary-active-text: var(--form-checkbox-radio-card-primary-active-text);
215
+ --filter-primary-hover-background: var(--form-checkbox-radio-card-primary-hover-background);
216
+ --filter-primary-hover-border: var(--form-checkbox-radio-card-primary-hover-border);
217
+ --filter-primary-hover-text: var(--form-checkbox-radio-card-primary-hover-text);
218
+ --filter-primary-inactive-background: var(--form-checkbox-radio-card-primary-inactive-background);
219
+ --filter-primary-inactive-border: var(--form-checkbox-radio-card-primary-inactive-border-separate);
220
+ --filter-primary-inactive-text: var(--form-checkbox-radio-card-primary-inactive-text);
221
+ --filter-secondary-active-background: var(--form-checkbox-radio-card-secondary-active-background);
222
+ --filter-secondary-active-border: var(--form-checkbox-radio-card-secondary-active-border);
223
+ --filter-secondary-active-text: var(--form-checkbox-radio-card-secondary-active-text);
224
+ --filter-secondary-hover-background: var(--form-checkbox-radio-card-secondary-hover-background);
225
+ --filter-secondary-hover-border: var(--form-checkbox-radio-card-secondary-hover-border);
226
+ --filter-secondary-hover-text: var(--form-checkbox-radio-card-secondary-hover-text);
227
+ --filter-secondary-inactive-background: var(--form-checkbox-radio-card-secondary-inactive-background);
228
+ --filter-secondary-inactive-border: var(--form-checkbox-radio-card-secondary-inactive-border);
229
+ --filter-secondary-inactive-text: var(--form-checkbox-radio-card-secondary-inactive-text);
230
+ --footer-background: var(--general-surface-inverted-secondary);
231
+ --footer-bottom-background: var(--general-surface-inverted-tertiary);
232
+ --footer-icon-background: var(--alpha-white-20);
233
+ --form-checkbox-radio-card-primary-active-background: var(--button-main-primary-background-default);
234
+ --form-checkbox-radio-card-primary-active-border-group: var(--button-main-primary-border-active);
235
+ --form-checkbox-radio-card-primary-active-border-separate: var(--form-checkbox-radio-card-primary-active-background);
236
+ --form-checkbox-radio-card-primary-active-text: var(--button-main-primary-text-default);
237
+ --form-checkbox-radio-card-primary-hover-background: var(--button-main-primary-background-hover);
238
+ --form-checkbox-radio-card-primary-hover-border: var(--button-main-primary-border-hover);
239
+ --form-checkbox-radio-card-primary-hover-text: var(--button-main-primary-text-default);
240
+ --form-checkbox-radio-card-primary-inactive-background: var(--general-surface-tertiary);
241
+ --form-checkbox-radio-card-primary-inactive-border-group: var(--button-main-secondary-border-default);
242
+ --form-checkbox-radio-card-primary-inactive-border-separate: var(
243
+ --form-checkbox-radio-card-primary-inactive-background
244
+ );
245
+ --form-checkbox-radio-card-primary-inactive-text: var(--general-text-secondary);
246
+ --form-checkbox-radio-card-secondary-active-background: var(--button-main-secondary-background-default);
247
+ --form-checkbox-radio-card-secondary-active-border: var(--general-border-brand);
248
+ --form-checkbox-radio-card-secondary-active-text: var(--general-text-brand);
249
+ --form-checkbox-radio-card-secondary-hover-background: var(--button-main-secondary-background-hover);
250
+ --form-checkbox-radio-card-secondary-hover-border: var(--button-main-secondary-border-hover);
251
+ --form-checkbox-radio-card-secondary-hover-text: var(--button-main-secondary-text-default);
252
+ --form-checkbox-radio-card-secondary-inactive-background: var(--button-main-secondary-background-default);
253
+ --form-checkbox-radio-card-secondary-inactive-border: var(--form-checkbox-radio-card-primary-inactive-border-group);
254
+ --form-checkbox-radio-card-secondary-inactive-text: var(--form-checkbox-radio-card-primary-inactive-text);
255
+ --form-checkbox-radio-default-background-active: var(--primary-700);
256
+ --form-checkbox-radio-default-background-default: var(--neutral-100);
257
+ --form-checkbox-radio-default-background-error: var(--neutral-100);
258
+ --form-checkbox-radio-default-background-focus: var(--neutral-100);
259
+ --form-checkbox-radio-default-background-hover: var(--neutral-100);
260
+ --form-checkbox-radio-default-background-inverted: var(--primary-600);
261
+ --form-checkbox-radio-default-background-selected: var(--primary-600);
262
+ --form-checkbox-radio-default-background-selected-disabled: var(--primary-300);
263
+ --form-checkbox-radio-default-background-selected-inverted: var(--neutral-100);
264
+ --form-checkbox-radio-default-border-active: var(--primary-700);
265
+ --form-checkbox-radio-default-border-default: var(--form-general-border-default);
266
+ --form-checkbox-radio-default-border-focus: var(--form-general-border-default);
267
+ --form-checkbox-radio-default-border-hover: var(--primary-600);
268
+ --form-checkbox-radio-default-border-inverted: var(--neutral-100);
269
+ --form-checkbox-radio-default-border-selected: var(--primary-600);
270
+ --form-checkbox-radio-default-border-selected-disabled: var(--primary-300);
271
+ --form-checkbox-radio-default-border-selected-inverted: var(--neutral-100);
272
+ --form-checkbox-radio-default-check-indicator-active: var(--neutral-100);
273
+ --form-checkbox-radio-default-check-indicator-default: var(--neutral-100);
274
+ --form-datepicker-date-active: var(--button-main-secondary-background-active);
275
+ --form-datepicker-date-default: var(--button-main-secondary-background-default);
276
+ --form-datepicker-date-hover: var(--button-main-secondary-background-hover);
277
+ --form-datepicker-date-selected: var(--primary-600);
278
+ --form-datepicker-date-today: var(--neutral-600);
279
+ --form-datepicker-date-text-muted: var(--general-text-disabled);
280
+ --form-datepicker-date-text-selected: var(--general-text-white);
281
+ --form-general-background-action-background: var(--general-surface-secondary);
282
+ --form-general-background-default: var(--general-surface-primary);
283
+ --form-general-background-disabled: var(--neutral-300);
284
+ --form-general-border-default: var(--neutral-500);
285
+ --form-general-border-disabled: var(--neutral-350);
286
+ --form-general-feedback-error-border: var(--red-700);
287
+ --form-general-feedback-error-text: var(--general-status-danger-text);
288
+ --form-general-feedback-success-border: var(--green-600);
289
+ --form-general-feedback-success-text: var(--general-status-success-text);
290
+ --form-hidden-default: var(--alpha-01);
291
+ --form-hidden-hover: var(--general-surface-tertiary);
292
+ --form-input-background-default: var(--form-general-background-default);
293
+ --form-input-background-disabled: var(--form-general-background-disabled);
294
+ --form-input-border-active: var(--primary-600);
295
+ --form-input-border-default: var(--form-general-border-default);
296
+ --form-input-border-disabled: var(--form-general-border-disabled);
297
+ --form-input-border-focus: var(--neutral-700);
298
+ --form-input-border-hover: var(--primary-600);
299
+ --form-input-text-disabled: var(--general-text-secondary);
300
+ --form-input-text-filled: var(--general-text-primary);
301
+ --form-input-text-placeholder: var(--neutral-550);
302
+ --form-select-item-active-background: var(--general-surface-brand-tertiary);
303
+ --form-select-item-active-text: var(--primary-700);
304
+ --form-select-item-default-background: var(--general-surface-primary);
305
+ --form-select-item-default-text: var(--general-text-primary);
306
+ --form-select-item-disabled-background: var(--general-surface-disabled);
307
+ --form-select-item-disabled-text: var(--general-text-disabled);
308
+ --form-select-item-hover-background: var(--general-surface-hover);
309
+ --form-select-item-hover-text: var(--primary-700);
310
+ --form-toggl-outlined-background: var(--alpha-01);
311
+ --form-toggl-colored-active-active: var(--button-main-success-background-active);
312
+ --form-toggl-colored-active-default: var(--button-main-success-background-default);
313
+ --form-toggl-colored-active-hover: var(--button-main-success-background-hover);
314
+ --form-toggl-colored-active-icon: var(--general-icon-success);
315
+ --form-toggl-colored-active-icon-outlined: var(--general-icon-white);
316
+ --form-toggl-colored-active-indicator: var(--neutral-100);
317
+ --form-toggl-colored-inactive-active: var(--button-main-danger-background-active);
318
+ --form-toggl-colored-inactive-default: var(--button-main-danger-background-default);
319
+ --form-toggl-colored-inactive-hover: var(--button-main-danger-background-hover);
320
+ --form-toggl-colored-inactive-icon: var(--general-icon-danger);
321
+ --form-toggl-colored-inactive-icon-outlined: var(--general-icon-white);
322
+ --form-toggl-colored-inactive-indicator: var(--neutral-100);
323
+ --form-toggl-primary-active-active: var(--button-main-primary-background-active);
324
+ --form-toggl-primary-active-default: var(--button-main-primary-background-default);
325
+ --form-toggl-primary-active-hover: var(--button-main-primary-background-hover);
326
+ --form-toggl-primary-active-icon: var(--general-icon-brand);
327
+ --form-toggl-primary-active-icon-outlined: var(--general-icon-white);
328
+ --form-toggl-primary-active-indicator: var(--neutral-100);
329
+ --form-toggl-primary-inactive-active: var(--neutral-550);
330
+ --form-toggl-primary-inactive-default: var(--neutral-450);
331
+ --form-toggl-primary-inactive-hover: var(--neutral-500);
332
+ --form-toggl-primary-inactive-icon: var(--general-icon-tertiary);
333
+ --form-toggl-primary-inactive-icon-outlined: var(--general-icon-white);
334
+ --form-toggl-primary-inactive-indicator: var(--neutral-100);
335
+ --general-border-accent: var(--accent-600);
336
+ --general-border-brand: var(--primary-600);
337
+ --general-border-primary: var(--neutral-350);
338
+ --general-border-secondary: var(--neutral-450);
339
+ --general-border-white: var(--neutral-100);
340
+ --general-icon-accent: var(--orange-700);
341
+ --general-icon-brand: var(--primary-600);
342
+ --general-icon-brand-dark: var(--primary-700);
343
+ --general-icon-danger: var(--red-700);
344
+ --general-icon-primary: var(--neutral-850);
345
+ --general-icon-secondary: var(--neutral-700);
346
+ --general-icon-success: var(--green-700);
347
+ --general-icon-tertiary: var(--neutral-450);
348
+ --general-icon-warning: var(--yellow-700);
349
+ --general-icon-warning-dark: var(--yellow-800);
350
+ --general-icon-white: var(--neutral-100);
351
+ --general-icon-background-brand-primary: var(--general-surface-brand-primary);
352
+ --general-icon-background-brand-secondary: var(--general-surface-brand-tertiary);
353
+ --general-icon-background-primary: var(--neutral-100);
354
+ --general-icon-background-secondary: var(--alpha-white-30);
355
+ --general-status-danger-border: var(--red-500);
356
+ --general-status-danger-text: var(--red-700);
357
+ --general-status-danger-background-primary: var(--red-100);
358
+ --general-status-danger-background-secondary: var(--red-600);
359
+ --general-status-danger-background-tertiary: var(--red-700);
360
+ --general-status-info-border: var(--blue-500);
361
+ --general-status-info-text: var(--blue-700);
362
+ --general-status-info-background-dark: var(--blue-600);
363
+ --general-status-info-background-light: var(--blue-200);
364
+ --general-status-neutral-border: var(--neutral-450);
365
+ --general-status-neutral-text: var(--general-text-primary);
366
+ --general-status-neutral-background-dark: var(--neutral-450);
367
+ --general-status-neutral-background-light: var(--neutral-300);
368
+ --general-status-success-border: var(--green-500);
369
+ --general-status-success-text: var(--green-700);
370
+ --general-status-success-background-primary: var(--green-100);
371
+ --general-status-success-background-secondary: var(--green-600);
372
+ --general-status-success-background-tertiary: var(--green-700);
373
+ --general-status-warning-border: var(--yellow-600);
374
+ --general-status-warning-text: var(--yellow-800);
375
+ --general-status-warning-background-dark: var(--yellow-600);
376
+ --general-status-warning-background-light: var(--yellow-200);
377
+ --general-surface-accent: var(--accent-200);
378
+ --general-surface-active: var(--general-surface-brand-secondary);
379
+ --general-surface-brand-primary: var(--primary-600);
380
+ --general-surface-brand-quaternary: var(--primary-100);
381
+ --general-surface-brand-secondary: var(--primary-700);
382
+ --general-surface-brand-tertiary: var(--primary-200);
383
+ --general-surface-disabled: var(--neutral-400);
384
+ --general-surface-hover: var(--general-surface-brand-quaternary);
385
+ --general-surface-inverted-primary: var(--neutral-600);
386
+ --general-surface-inverted-secondary: var(--neutral-750);
387
+ --general-surface-inverted-tertiary: var(--neutral-800);
388
+ --general-surface-overlay: var(--alpha-40);
389
+ --general-surface-primary: var(--neutral-100);
390
+ --general-surface-secondary: var(--neutral-200);
391
+ --general-surface-selected: var(--general-surface-brand-primary);
392
+ --general-surface-success: var(--green-100);
393
+ --general-surface-tertiary: var(--neutral-300);
394
+ --general-text-brand: var(--primary-600);
395
+ --general-text-dark: var(--neutral-850);
396
+ --general-text-disabled: var(--neutral-450);
397
+ --general-text-primary: var(--neutral-850);
398
+ --general-text-secondary: var(--neutral-700);
399
+ --general-text-tertiary: var(--neutral-600);
400
+ --general-text-white: var(--neutral-100);
401
+ --header-background: var(--general-surface-primary);
402
+ --header-bottom-border: var(--neutral-100);
403
+ --header-modal-item-active-background: var(--dropdown-item-active-background);
404
+ --header-modal-item-active-text: var(--dropdown-item-active-text);
405
+ --header-modal-item-default-background: var(--dropdown-item-default-background);
406
+ --header-modal-item-default-text: var(--general-text-brand);
407
+ --header-modal-item-disabled-background: var(--dropdown-item-disabled-background);
408
+ --header-modal-item-disabled-text: var(--dropdown-item-disabled-text);
409
+ --header-modal-item-hover-background: var(--dropdown-item-hover-background);
410
+ --header-modal-item-hover-text: var(--dropdown-item-hover-text);
411
+ --header-popover-border-top: var(--primary-400);
412
+ --header-popover-item-active: var(--general-surface-active);
413
+ --header-popover-item-hover: var(--general-surface-hover);
414
+ --header-popover-item-selected: var(--general-surface-selected);
415
+ --link-inverted-active: var(--general-text-white);
416
+ --link-inverted-default: var(--general-text-white);
417
+ --link-inverted-focus: var(--general-text-white);
418
+ --link-inverted-hover: var(--general-text-white);
419
+ --link-primary-active: var(--primary-800);
420
+ --link-primary-default: var(--primary-600);
421
+ --link-primary-focus: var(--primary-600);
422
+ --link-primary-hover: var(--primary-700);
423
+ --list-icon: var(--primary-600);
424
+ --loader-skeleton-color: #9293a433;
425
+ --loader-spinner-color-primary: var(--neutral-450);
426
+ --loader-spinner-color-secondary: var(--alpha-white-80);
427
+ --modal-background: var(--general-surface-primary);
428
+ --modal-border: var(--general-border-primary);
429
+ --modal-footer-border-top: var(--general-border-primary);
430
+ --modal-header-border-bottom: var(--general-border-primary);
431
+ --popover-background: var(--general-surface-primary);
432
+ --popover-border: var(--general-border-white);
433
+ --popover-text: var(--general-text-primary);
434
+ --side-navigation-background: var(--side-navigation-item-background-default);
435
+ --side-navigation-group-title-text: var(--primary-200);
436
+ --side-navigation-item-border: var(--primary-800);
437
+ --side-navigation-item-text: var(--general-text-white);
438
+ --side-navigation-item-background-active: var(--primary-800);
439
+ --side-navigation-item-background-arrow-button-active: var(--button-main-primary-background-active);
440
+ --side-navigation-item-background-arrow-button-hover: var(--button-main-primary-background-active);
441
+ --side-navigation-item-background-default: var(--primary-600);
442
+ --side-navigation-item-background-focus: var(--primary-600);
443
+ --side-navigation-item-background-hover: var(--primary-700);
444
+ --side-navigation-tree-brand-active: var(--primary-500);
445
+ --side-navigation-tree-brand-default: var(--primary-400);
446
+ --side-navigation-tree-brand-hover: var(--primary-500);
447
+ --side-navigation-tree-neutral-active: var(--neutral-450);
448
+ --side-navigation-tree-neutral-default: var(--neutral-350);
449
+ --side-navigation-tree-neutral-hover: var(--neutral-400);
450
+ --status-badge-background-accent: var(--orange-200);
451
+ --status-badge-background-brand: var(--general-status-info-background-light);
452
+ --status-badge-background-danger: var(--general-status-danger-background-primary);
453
+ --status-badge-background-neutral: var(--general-status-neutral-background-light);
454
+ --status-badge-background-success: var(--general-status-success-background-primary);
455
+ --status-badge-background-transparent: var(--alpha-01);
456
+ --status-badge-background-warning: var(--general-status-warning-background-light);
457
+ --status-badge-border-accent: var(--orange-600);
458
+ --status-badge-border-brand: var(--general-status-info-border);
459
+ --status-badge-border-danger: var(--general-status-danger-border);
460
+ --status-badge-border-neutral: var(--general-status-neutral-border);
461
+ --status-badge-border-success: var(--general-status-success-border);
462
+ --status-badge-border-warning: var(--general-status-warning-border);
463
+ --status-badge-icon-accent: var(--general-icon-accent);
464
+ --status-badge-icon-brand: var(--general-icon-brand-dark);
465
+ --status-badge-icon-danger: var(--general-icon-danger);
466
+ --status-badge-icon-neutral: var(--general-icon-primary);
467
+ --status-badge-icon-success: var(--general-icon-success);
468
+ --status-badge-icon-warning: var(--general-icon-warning-dark);
469
+ --status-badge-indicator-border: var(--general-surface-primary);
470
+ --status-badge-indicator-danger: var(--general-status-danger-background-secondary);
471
+ --status-badge-indicator-inactive: var(--general-status-neutral-background-dark);
472
+ --status-badge-indicator-success: var(--general-status-success-background-secondary);
473
+ --status-badge-indicator-warning: var(--general-status-warning-background-dark);
474
+ --status-badge-text-accent: var(--orange-700);
475
+ --status-badge-text-brand: var(--general-status-info-text);
476
+ --status-badge-text-danger: var(--general-status-danger-text);
477
+ --status-badge-text-neutral: var(--general-status-neutral-text);
478
+ --status-badge-text-success: var(--general-status-success-text);
479
+ --status-badge-text-warning: var(--general-status-warning-text);
480
+ --stepper-item-horizontal-text-completed-default: var(--green-700);
481
+ --stepper-item-horizontal-text-completed-hover: var(--green-800);
482
+ --stepper-item-horizontal-text-danger-default: var(--red-700);
483
+ --stepper-item-horizontal-text-danger-hover: var(--red-800);
484
+ --stepper-item-horizontal-text-default: var(--general-text-secondary);
485
+ --stepper-item-horizontal-text-hover: var(--primary-700);
486
+ --stepper-item-horizontal-text-selected: var(--general-text-white);
487
+ --stepper-item-horizontal-type-completed-bg-active: var(--green-300);
488
+ --stepper-item-horizontal-type-completed-bg-default: var(--general-status-success-background-primary);
489
+ --stepper-item-horizontal-type-completed-bg-hover: var(--green-200);
490
+ --stepper-item-horizontal-type-danger-bg-active: var(--red-300);
491
+ --stepper-item-horizontal-type-danger-bg-default: var(--general-status-danger-background-primary);
492
+ --stepper-item-horizontal-type-danger-bg-hover: var(--red-200);
493
+ --stepper-item-horizontal-type-default-bg-active: var(--general-surface-brand-tertiary);
494
+ --stepper-item-horizontal-type-default-bg-default: var(--general-surface-tertiary);
495
+ --stepper-item-horizontal-type-default-bg-hover: var(--general-surface-tertiary);
496
+ --stepper-item-horizontal-type-selected-bg-default: var(--general-border-brand);
497
+ --stepper-item-vertical-line: var(--neutral-400);
498
+ --stepper-item-vertical-text-default: var(--general-text-primary);
499
+ --stepper-item-vertical-text-disabled: var(--general-text-disabled);
500
+ --stepper-item-vertical-text-hover: var(--link-primary-hover);
501
+ --stepper-item-vertical-text-selected: var(--link-primary-hover);
502
+ --stepper-item-vertical-type-completed-bg: var(--general-status-success-background-tertiary);
503
+ --stepper-item-vertical-type-completed-bg-hover: var(--green-800);
504
+ --stepper-item-vertical-type-danger-bg: var(--general-status-danger-background-tertiary);
505
+ --stepper-item-vertical-type-danger-bg-hover: var(--red-800);
506
+ --stepper-item-vertical-type-default-bg: var(--general-surface-primary);
507
+ --stepper-item-vertical-type-default-border: var(--neutral-400);
508
+ --stepper-item-vertical-type-default-border-hover: var(--general-border-brand);
509
+ --stepper-item-vertical-type-disabled-bg: var(--general-surface-disabled);
510
+ --stepper-item-vertical-type-disabled-border: var(--general-border-primary);
511
+ --stepper-item-vertical-type-selected-bg: var(--general-surface-primary);
512
+ --stepper-item-vertical-type-selected-border: var(--general-surface-active);
513
+ --stepper-item-vertical-type-selected-border-hover: var(--primary-800);
514
+ --tab-background: var(--general-surface-secondary);
515
+ --tab-item-active-background: var(--general-surface-brand-tertiary);
516
+ --tab-item-active-text: var(--primary-700);
517
+ --tab-item-default-background: var(--alpha-01);
518
+ --tab-item-default-text: var(--general-text-primary);
519
+ --tab-item-hover-background: var(--general-surface-hover);
520
+ --tab-item-hover-text: var(--primary-700);
521
+ --tab-item-selected-background: var(--general-surface-primary);
522
+ --tab-item-selected-border: var(--general-surface-selected);
523
+ --tab-item-selected-text: var(--primary-600);
524
+ --table-border: var(--general-border-primary);
525
+ --table-border-th: var(--general-border-secondary);
526
+ --table-default: var(--general-surface-primary);
527
+ --table-hover: var(--general-surface-hover);
528
+ --table-striped: var(--general-surface-tertiary);
529
+ --tag-danger-background: var(--general-status-danger-background-primary);
530
+ --tag-danger-border: var(--red-300);
531
+ --tag-primary-background: var(--primary-100);
532
+ --tag-primary-border: var(--primary-200);
533
+ --tag-secondary-background: var(--neutral-300);
534
+ --tag-secondary-border: var(--neutral-300);
535
+ --tooltip-background: var(--general-surface-inverted-primary);
536
+ --tooltip-text: var(--general-text-white);
537
+ --file-dropzone-background-default: var(--form-input-background-default);
538
+ --file-dropzone-background-disabled: var(--form-general-background-disabled);
539
+ --file-dropzone-background-drop-over: var(--general-surface-brand-quaternary);
540
+ --file-dropzone-background-hover: var(--general-surface-hover);
541
+ --file-dropzone-border-active: var(--general-surface-active);
542
+ --file-dropzone-border-default: var(--form-input-border-default);
543
+ --file-dropzone-border-disabled: var(--form-general-border-disabled);
544
+ --file-dropzone-border-drop-over: var(--form-input-border-active);
545
+ --file-dropzone-border-focus: var(--form-input-border-focus);
546
+ --file-dropzone-border-hover: var(--form-input-border-hover);
547
+ --file-dropzone-text-default: var(--general-text-brand);
548
+ --file-dropzone-text-drop-over: var(--general-text-tertiary);
549
+ --dropdown-item-active-background: var(--general-surface-active);
550
+ --dropdown-item-active-text: var(--general-text-white);
551
+ --dropdown-item-default-background: var(--general-surface-primary);
552
+ --dropdown-item-default-text: var(--general-text-primary);
553
+ --dropdown-item-disabled-background: var(--general-surface-disabled);
554
+ --dropdown-item-disabled-text: var(--general-text-disabled);
555
+ --dropdown-item-hover-background: var(--general-surface-hover);
556
+ --dropdown-item-hover-text: var(--primary-700);
557
+ }
558
+
559
+ :root.dark-mode {
560
+ --alert-default-background-danger: var(--general-status-danger-background-primary);
561
+ --alert-default-background-info: var(--general-status-info-background-light);
562
+ --alert-default-background-success: var(--general-status-success-background-primary);
563
+ --alert-default-background-warning: var(--general-status-warning-background-light);
564
+ --alert-default-border-danger: var(--general-status-danger-border);
565
+ --alert-default-border-info: var(--general-status-info-border);
566
+ --alert-default-border-success: var(--general-status-success-border);
567
+ --alert-default-border-warning: var(--general-status-warning-border);
568
+ --alert-default-text-danger: var(--general-text-primary);
569
+ --alert-default-text-info: var(--general-text-primary);
570
+ --alert-default-text-success: var(--general-text-primary);
571
+ --alert-default-text-warning: var(--general-text-primary);
572
+ --alert-toast-background-danger: var(--alert-default-background-danger);
573
+ --alert-toast-background-info: var(--alert-default-background-info);
574
+ --alert-toast-background-success: var(--alert-default-background-success);
575
+ --alert-toast-background-warning: var(--alert-default-background-warning);
576
+ --alert-toast-border-danger: var(--alert-default-border-danger);
577
+ --alert-toast-border-info: var(--alert-default-border-info);
578
+ --alert-toast-border-success: var(--alert-default-border-success);
579
+ --alert-toast-border-warning: var(--alert-default-border-warning);
580
+ --alert-toast-text-danger: var(--alert-default-text-danger);
581
+ --alert-toast-text-info: var(--alert-default-text-info);
582
+ --alert-toast-text-success: var(--alert-default-text-success);
583
+ --alert-toast-text-warning: var(--alert-default-text-warning);
584
+ --avatar-background-default: var(--general-status-neutral-background-light);
585
+ --brand-logo: var(--neutral-100);
586
+ --button-card-active-background: var(--general-surface-brand-tertiary);
587
+ --button-card-active-border: var(--primary-500);
588
+ --button-card-active-icon-background: var(--general-surface-brand-primary);
589
+ --button-card-hover-background: var(--button-main-secondary-background-hover);
590
+ --button-card-hover-border: var(--primary-600);
591
+ --button-card-hover-icon-background: var(--general-surface-brand-primary);
592
+ --button-close-background-active: var(--alpha-20);
593
+ --button-close-background-default: var(--alpha-01);
594
+ --button-close-background-focus: var(--alpha-01);
595
+ --button-close-background-hover: var(--alpha-10);
596
+ --button-close-text-active: var(--general-text-primary);
597
+ --button-close-text-default: var(--alpha-white-80);
598
+ --button-close-text-focus: var(--general-text-primary);
599
+ --button-close-text-hover: var(--general-text-primary);
600
+ --button-floating-primary-background-active: var(--button-main-primary-background-active);
601
+ --button-floating-primary-background-default: var(--button-main-primary-background-default);
602
+ --button-floating-primary-background-focus: var(--button-main-primary-background-focus);
603
+ --button-floating-primary-background-hover: var(--button-main-primary-background-hover);
604
+ --button-floating-primary-border-active: var(--button-main-primary-border-active);
605
+ --button-floating-primary-border-default: var(--button-main-primary-border-default);
606
+ --button-floating-primary-border-focus: var(--button-main-primary-border-focus);
607
+ --button-floating-primary-border-hover: var(--button-main-primary-border-hover);
608
+ --button-floating-primary-text-default: var(--button-main-primary-text-default);
609
+ --button-floating-secondary-background-active: var(--button-main-primary-inverted-background-active);
610
+ --button-floating-secondary-background-default: var(--button-main-primary-inverted-background-default);
611
+ --button-floating-secondary-background-focus: var(--button-main-primary-inverted-background-focus);
612
+ --button-floating-secondary-background-hover: var(--button-main-primary-inverted-background-hover);
613
+ --button-floating-secondary-border-active: var(--button-main-primary-inverted-border-active);
614
+ --button-floating-secondary-border-default: var(--button-main-primary-inverted-border-default);
615
+ --button-floating-secondary-border-focus: var(--button-main-primary-inverted-border-focus);
616
+ --button-floating-secondary-border-hover: var(--button-main-primary-inverted-border-hover);
617
+ --button-floating-secondary-text-active: var(--button-main-primary-inverted-text-active);
618
+ --button-floating-secondary-text-default: var(--button-main-primary-inverted-text-default);
619
+ --button-floating-secondary-text-hover: var(--button-main-primary-inverted-text-hover);
620
+ --button-group-primary-disabled-background: var(--button-main-disabled-general-background);
621
+ --button-group-primary-disabled-border: var(--button-group-primary-inactive-border);
622
+ --button-group-primary-disabled-text: var(--button-main-disabled-general-text);
623
+ --button-group-primary-hover-background: var(--form-checkbox-radio-card-primary-hover-background);
624
+ --button-group-primary-hover-border: var(--form-checkbox-radio-card-primary-hover-border);
625
+ --button-group-primary-hover-text: var(--form-checkbox-radio-card-primary-hover-text);
626
+ --button-group-primary-inactive-background: var(--form-checkbox-radio-card-primary-inactive-background);
627
+ --button-group-primary-inactive-border: var(--form-checkbox-radio-card-primary-inactive-border-group);
628
+ --button-group-primary-inactive-text: var(--form-checkbox-radio-card-primary-inactive-text);
629
+ --button-group-primary-selected-background: var(--form-checkbox-radio-card-primary-active-background);
630
+ --button-group-primary-selected-border: var(--form-checkbox-radio-card-primary-active-border-group);
631
+ --button-group-primary-selected-text: var(--form-checkbox-radio-card-primary-hover-text);
632
+ --button-group-secondary-disabled-background: var(--alpha-01);
633
+ --button-group-secondary-disabled-border: var(--button-group-secondary-inactive-border);
634
+ --button-group-secondary-disabled-text: var(--button-main-disabled-general-text);
635
+ --button-group-secondary-hover-background: var(--form-checkbox-radio-card-secondary-hover-background);
636
+ --button-group-secondary-hover-border: var(--form-checkbox-radio-card-secondary-hover-border);
637
+ --button-group-secondary-hover-text: var(--form-checkbox-radio-card-secondary-hover-text);
638
+ --button-group-secondary-inactive-background: var(--form-checkbox-radio-card-secondary-inactive-background);
639
+ --button-group-secondary-inactive-border: var(--form-checkbox-radio-card-secondary-inactive-border);
640
+ --button-group-secondary-inactive-text: var(--form-checkbox-radio-card-secondary-inactive-text);
641
+ --button-group-secondary-selected-background: var(--form-checkbox-radio-card-secondary-active-background);
642
+ --button-group-secondary-selected-border: var(--form-checkbox-radio-card-secondary-active-border);
643
+ --button-group-secondary-selected-text: var(--form-checkbox-radio-card-secondary-active-text);
644
+ --button-main-danger-neutral-background-active: var(--alpha-01);
645
+ --button-main-danger-neutral-background-default: var(--alpha-01);
646
+ --button-main-danger-neutral-background-focus: var(--alpha-01);
647
+ --button-main-danger-neutral-background-hover: var(--alpha-01);
648
+ --button-main-danger-neutral-border-active: var(--alpha-01);
649
+ --button-main-danger-neutral-border-default: var(--alpha-01);
650
+ --button-main-danger-neutral-border-focus: var(--general-surface-primary);
651
+ --button-main-danger-neutral-border-hover: var(--alpha-01);
652
+ --button-main-danger-neutral-icon-only-background-active: var(--red-800);
653
+ --button-main-danger-neutral-icon-only-background-default: var(--button-main-danger-neutral-background-default);
654
+ --button-main-danger-neutral-icon-only-background-focus: var(--button-main-danger-neutral-background-focus);
655
+ --button-main-danger-neutral-icon-only-background-hover: var(--red-700);
656
+ --button-main-danger-neutral-text-active: var(--red-100);
657
+ --button-main-danger-neutral-text-default: var(--red-300);
658
+ --button-main-danger-neutral-text-focus: var(--red-300);
659
+ --button-main-danger-neutral-text-hover: var(--red-200);
660
+ --button-main-danger-background-active: var(--red-500);
661
+ --button-main-danger-background-default: var(--red-300);
662
+ --button-main-danger-background-focus: var(--red-300);
663
+ --button-main-danger-background-hover: var(--red-400);
664
+ --button-main-danger-border-active: var(--button-main-danger-background-active);
665
+ --button-main-danger-border-default: var(--button-main-danger-background-default);
666
+ --button-main-danger-border-focus: var(--button-main-danger-background-focus);
667
+ --button-main-danger-border-hover: var(--button-main-danger-background-hover);
668
+ --button-main-danger-text-default: var(--neutral-900);
669
+ --button-main-disabled-general-background: var(--general-surface-disabled);
670
+ --button-main-disabled-general-border: var(--general-surface-disabled);
671
+ --button-main-disabled-general-text: var(--general-text-disabled);
672
+ --button-main-disabled-neutral-background: var(--button-main-neutral-background-default);
673
+ --button-main-disabled-neutral-border: var(--button-main-neutral-border-default);
674
+ --button-main-neutral-inverted-background-active: var(--alpha-01);
675
+ --button-main-neutral-inverted-background-default: var(--alpha-01);
676
+ --button-main-neutral-inverted-background-focus: var(--alpha-01);
677
+ --button-main-neutral-inverted-background-hover: var(--alpha-01);
678
+ --button-main-neutral-inverted-border-active: var(--alpha-01);
679
+ --button-main-neutral-inverted-border-default: var(--alpha-01);
680
+ --button-main-neutral-inverted-border-focus: var(--general-surface-primary);
681
+ --button-main-neutral-inverted-border-hover: var(--alpha-01);
682
+ --button-main-neutral-inverted-icon-only-background-active: var(--button-main-secondary-inverted-background-active);
683
+ --button-main-neutral-inverted-icon-only-background-default: var(--button-main-secondary-inverted-background-default);
684
+ --button-main-neutral-inverted-icon-only-background-focus: var(--button-main-secondary-inverted-background-focus);
685
+ --button-main-neutral-inverted-icon-only-background-hover: var(--button-main-secondary-inverted-background-hover);
686
+ --button-main-neutral-inverted-text-active: var(--primary-400);
687
+ --button-main-neutral-inverted-text-default: var(--neutral-100);
688
+ --button-main-neutral-inverted-text-focus: var(--neutral-100);
689
+ --button-main-neutral-inverted-text-hover: var(--primary-200);
690
+ --button-main-neutral-background-active: var(--alpha-01);
691
+ --button-main-neutral-background-default: var(--alpha-01);
692
+ --button-main-neutral-background-focus: var(--alpha-01);
693
+ --button-main-neutral-background-hover: var(--alpha-01);
694
+ --button-main-neutral-border-active: var(--alpha-01);
695
+ --button-main-neutral-border-default: var(--alpha-01);
696
+ --button-main-neutral-border-focus: var(--general-surface-primary);
697
+ --button-main-neutral-border-hover: var(--alpha-01);
698
+ --button-main-neutral-icon-only-background-active: var(--button-main-secondary-background-active);
699
+ --button-main-neutral-icon-only-background-default: var(--alpha-01);
700
+ --button-main-neutral-icon-only-background-focus: var(--button-main-neutral-icon-only-background-default);
701
+ --button-main-neutral-icon-only-background-hover: var(--button-main-secondary-background-hover);
702
+ --button-main-neutral-text-active: var(--primary-300);
703
+ --button-main-neutral-text-default: var(--neutral-100);
704
+ --button-main-neutral-text-focus: var(--neutral-100);
705
+ --button-main-neutral-text-hover: var(--primary-200);
706
+ --button-main-primary-inverted-background-active: var(--primary-300);
707
+ --button-main-primary-inverted-background-default: var(--primary-200);
708
+ --button-main-primary-inverted-background-focus: var(--button-main-primary-inverted-background-default);
709
+ --button-main-primary-inverted-background-hover: var(--primary-300);
710
+ --button-main-primary-inverted-border-active: var(--button-main-primary-inverted-background-active);
711
+ --button-main-primary-inverted-border-default: var(--button-main-primary-inverted-background-default);
712
+ --button-main-primary-inverted-border-focus: var(--button-main-primary-inverted-background-focus);
713
+ --button-main-primary-inverted-border-hover: var(--button-main-primary-inverted-background-hover);
714
+ --button-main-primary-inverted-text-active: var(--primary-800);
715
+ --button-main-primary-inverted-text-default: var(--primary-700);
716
+ --button-main-primary-inverted-text-hover: var(--primary-700);
717
+ --button-main-primary-background-active: var(--primary-200);
718
+ --button-main-primary-background-default: var(--neutral-100);
719
+ --button-main-primary-background-focus: var(--primary-100);
720
+ --button-main-primary-background-hover: var(--primary-100);
721
+ --button-main-primary-border-active: var(--button-main-primary-background-active);
722
+ --button-main-primary-border-default: var(--button-main-primary-background-default);
723
+ --button-main-primary-border-focus: var(--button-main-primary-background-focus);
724
+ --button-main-primary-border-hover: var(--button-main-primary-background-hover);
725
+ --button-main-primary-text-default: var(--primary-600);
726
+ --button-main-secondary-inverted-background-active: var(--alpha-white-10);
727
+ --button-main-secondary-inverted-background-default: var(--alpha-01);
728
+ --button-main-secondary-inverted-background-focus: var(--alpha-01);
729
+ --button-main-secondary-inverted-background-hover: var(--alpha-white-10);
730
+ --button-main-secondary-inverted-border-active: var(--neutral-100);
731
+ --button-main-secondary-inverted-border-default: var(--alpha-white-50);
732
+ --button-main-secondary-inverted-border-focus: var(--neutral-100);
733
+ --button-main-secondary-inverted-border-hover: var(--neutral-100);
734
+ --button-main-secondary-inverted-text-default: var(--general-text-white);
735
+ --button-main-secondary-background-active: var(--general-surface-brand-tertiary);
736
+ --button-main-secondary-background-default: var(--neutral-850);
737
+ --button-main-secondary-background-focus: var(--neutral-850);
738
+ --button-main-secondary-background-hover: var(--general-surface-hover);
739
+ --button-main-secondary-border-active: var(--primary-200);
740
+ --button-main-secondary-border-default: var(--neutral-300);
741
+ --button-main-secondary-border-focus: var(--primary-100);
742
+ --button-main-secondary-border-hover: var(--primary-100);
743
+ --button-main-secondary-text-default: var(--neutral-100);
744
+ --button-main-success-background-active: var(--green-500);
745
+ --button-main-success-background-default: var(--green-300);
746
+ --button-main-success-background-focus: var(--green-300);
747
+ --button-main-success-background-hover: var(--green-400);
748
+ --button-main-success-border-active: var(--button-main-success-background-active);
749
+ --button-main-success-border-default: var(--button-main-success-background-default);
750
+ --button-main-success-border-focus: var(--button-main-success-background-focus);
751
+ --button-main-success-border-hover: var(--button-main-success-background-hover);
752
+ --button-main-success-text-default: var(--neutral-900);
753
+ --card-background-accent: var(--general-surface-accent);
754
+ --card-background-brand-primary: var(--general-surface-brand-primary);
755
+ --card-background-brand-quaternary: var(--general-surface-brand-quaternary);
756
+ --card-background-brand-secondary: var(--general-surface-brand-secondary);
757
+ --card-background-brand-tertiary: var(--general-surface-brand-tertiary);
758
+ --card-background-primary: var(--general-surface-primary);
759
+ --card-background-secondary: var(--general-surface-secondary);
760
+ --card-background-success: var(--general-surface-success);
761
+ --card-background-tertiary: var(--general-surface-tertiary);
762
+ --card-border-primary: var(--general-border-primary);
763
+ --card-border-selected: var(--general-border-brand);
764
+ --empty-state-border: var(--card-border-primary);
765
+ --empty-state-background-primary: var(--general-surface-primary);
766
+ --empty-state-background-secondary: var(--general-surface-secondary);
767
+ --empty-state-background-tertiary: var(--general-surface-tertiary);
768
+ --empty-state-icon-primary: var(--general-icon-brand);
769
+ --empty-state-icon-secondary: var(--general-icon-tertiary);
770
+ --filter-primary-active-background: var(--form-checkbox-radio-card-primary-active-background);
771
+ --filter-primary-active-border: var(--form-checkbox-radio-card-primary-active-border-group);
772
+ --filter-primary-active-text: var(--form-checkbox-radio-card-primary-active-text);
773
+ --filter-primary-hover-background: var(--form-checkbox-radio-card-primary-hover-background);
774
+ --filter-primary-hover-border: var(--form-checkbox-radio-card-primary-hover-border);
775
+ --filter-primary-hover-text: var(--form-checkbox-radio-card-primary-hover-text);
776
+ --filter-primary-inactive-background: var(--form-checkbox-radio-card-primary-inactive-background);
777
+ --filter-primary-inactive-border: var(--form-checkbox-radio-card-primary-inactive-border-separate);
778
+ --filter-primary-inactive-text: var(--form-checkbox-radio-card-primary-inactive-text);
779
+ --filter-secondary-active-background: var(--form-checkbox-radio-card-secondary-active-background);
780
+ --filter-secondary-active-border: var(--form-checkbox-radio-card-secondary-active-border);
781
+ --filter-secondary-active-text: var(--form-checkbox-radio-card-secondary-active-text);
782
+ --filter-secondary-hover-background: var(--form-checkbox-radio-card-secondary-hover-background);
783
+ --filter-secondary-hover-border: var(--form-checkbox-radio-card-secondary-hover-border);
784
+ --filter-secondary-hover-text: var(--form-checkbox-radio-card-secondary-hover-text);
785
+ --filter-secondary-inactive-background: var(--form-checkbox-radio-card-secondary-inactive-background);
786
+ --filter-secondary-inactive-border: var(--form-checkbox-radio-card-secondary-inactive-border);
787
+ --filter-secondary-inactive-text: var(--form-checkbox-radio-card-secondary-inactive-text);
788
+ --footer-background: var(--neutral-750);
789
+ --footer-bottom-background: var(--neutral-800);
790
+ --footer-icon-background: var(--alpha-white-20);
791
+ --form-checkbox-radio-card-primary-active-background: var(--button-main-primary-background-default);
792
+ --form-checkbox-radio-card-primary-active-border-group: var(--button-main-primary-border-active);
793
+ --form-checkbox-radio-card-primary-active-border-separate: var(--form-checkbox-radio-card-primary-active-background);
794
+ --form-checkbox-radio-card-primary-active-text: var(--button-main-primary-text-default);
795
+ --form-checkbox-radio-card-primary-hover-background: var(--button-main-primary-background-hover);
796
+ --form-checkbox-radio-card-primary-hover-border: var(--button-main-primary-border-hover);
797
+ --form-checkbox-radio-card-primary-hover-text: var(--button-main-primary-text-default);
798
+ --form-checkbox-radio-card-primary-inactive-background: var(--general-surface-primary);
799
+ --form-checkbox-radio-card-primary-inactive-border-group: var(--neutral-500);
800
+ --form-checkbox-radio-card-primary-inactive-border-separate: var(--neutral-500);
801
+ --form-checkbox-radio-card-primary-inactive-text: var(--general-text-secondary);
802
+ --form-checkbox-radio-card-secondary-active-background: var(--button-main-secondary-background-default);
803
+ --form-checkbox-radio-card-secondary-active-border: var(--primary-300);
804
+ --form-checkbox-radio-card-secondary-active-text: var(--general-text-brand);
805
+ --form-checkbox-radio-card-secondary-hover-background: var(--button-main-secondary-background-hover);
806
+ --form-checkbox-radio-card-secondary-hover-border: var(--button-main-secondary-border-hover);
807
+ --form-checkbox-radio-card-secondary-hover-text: var(--button-main-secondary-border-hover);
808
+ --form-checkbox-radio-card-secondary-inactive-background: var(--button-main-secondary-background-default);
809
+ --form-checkbox-radio-card-secondary-inactive-border: var(--form-checkbox-radio-card-primary-inactive-border-group);
810
+ --form-checkbox-radio-card-secondary-inactive-text: var(--form-checkbox-radio-card-primary-inactive-text);
811
+ --form-checkbox-radio-default-background-active: var(--primary-300);
812
+ --form-checkbox-radio-default-background-default: var(--neutral-850);
813
+ --form-checkbox-radio-default-background-error: var(--neutral-850);
814
+ --form-checkbox-radio-default-background-focus: var(--neutral-850);
815
+ --form-checkbox-radio-default-background-hover: var(--neutral-850);
816
+ --form-checkbox-radio-default-background-inverted: var(--primary-500);
817
+ --form-checkbox-radio-default-background-selected: var(--primary-200);
818
+ --form-checkbox-radio-default-background-selected-disabled: var(--primary-700);
819
+ --form-checkbox-radio-default-background-selected-inverted: var(--neutral-100);
820
+ --form-checkbox-radio-default-border-active: var(--primary-400);
821
+ --form-checkbox-radio-default-border-default: var(--form-general-border-default);
822
+ --form-checkbox-radio-default-border-focus: var(--form-general-border-default);
823
+ --form-checkbox-radio-default-border-hover: var(--primary-100);
824
+ --form-checkbox-radio-default-border-inverted: var(--primary-300);
825
+ --form-checkbox-radio-default-border-selected: var(--primary-400);
826
+ --form-checkbox-radio-default-border-selected-disabled: var(--primary-700);
827
+ --form-checkbox-radio-default-border-selected-inverted: var(--neutral-100);
828
+ --form-checkbox-radio-default-check-indicator-active: var(--primary-700);
829
+ --form-checkbox-radio-default-check-indicator-default: var(--primary-600);
830
+ --form-datepicker-date-active: var(--button-main-secondary-background-active);
831
+ --form-datepicker-date-default: var(--button-main-secondary-background-default);
832
+ --form-datepicker-date-hover: var(--button-main-secondary-background-hover);
833
+ --form-datepicker-date-selected: var(--primary-400);
834
+ --form-datepicker-date-today: var(--neutral-350);
835
+ --form-datepicker-date-text-muted: var(--general-text-disabled);
836
+ --form-datepicker-date-text-selected: var(--general-text-white);
837
+ --form-general-background-action-background: var(--general-surface-secondary);
838
+ --form-general-background-default: var(--general-surface-primary);
839
+ --form-general-background-disabled: var(--neutral-850);
840
+ --form-general-border-default: var(--neutral-400);
841
+ --form-general-border-disabled: var(--neutral-700);
842
+ --form-general-feedback-error-border: var(--red-400);
843
+ --form-general-feedback-error-text: var(--red-300);
844
+ --form-general-feedback-success-border: var(--green-400);
845
+ --form-general-feedback-success-text: var(--green-300);
846
+ --form-hidden-default: var(--alpha-01);
847
+ --form-hidden-hover: var(--general-surface-tertiary);
848
+ --form-input-background-default: var(--form-general-background-default);
849
+ --form-input-background-disabled: var(--form-general-background-disabled);
850
+ --form-input-border-active: var(--primary-300);
851
+ --form-input-border-default: var(--form-general-border-default);
852
+ --form-input-border-disabled: var(--form-general-border-disabled);
853
+ --form-input-border-focus: var(--neutral-700);
854
+ --form-input-border-hover: var(--primary-300);
855
+ --form-input-text-disabled: var(--general-text-secondary);
856
+ --form-input-text-filled: var(--general-text-primary);
857
+ --form-input-text-placeholder: var(--neutral-450);
858
+ --form-select-item-active-background: var(--primary-600);
859
+ --form-select-item-active-text: var(--primary-100);
860
+ --form-select-item-default-background: var(--general-surface-primary);
861
+ --form-select-item-default-text: var(--general-text-primary);
862
+ --form-select-item-disabled-background: var(--general-surface-disabled);
863
+ --form-select-item-disabled-text: var(--general-text-disabled);
864
+ --form-select-item-hover-background: var(--primary-700);
865
+ --form-select-item-hover-text: var(--primary-100);
866
+ --form-toggl-outlined-background: var(--alpha-01);
867
+ --form-toggl-colored-active-active: var(--green-600);
868
+ --form-toggl-colored-active-default: var(--green-500);
869
+ --form-toggl-colored-active-hover: var(--green-600);
870
+ --form-toggl-colored-active-icon: var(--green-500);
871
+ --form-toggl-colored-active-icon-outlined: var(--general-icon-white);
872
+ --form-toggl-colored-active-indicator: var(--neutral-100);
873
+ --form-toggl-colored-inactive-active: var(--red-600);
874
+ --form-toggl-colored-inactive-default: var(--red-500);
875
+ --form-toggl-colored-inactive-hover: var(--red-600);
876
+ --form-toggl-colored-inactive-icon: var(--red-600);
877
+ --form-toggl-colored-inactive-icon-outlined: var(--general-icon-white);
878
+ --form-toggl-colored-inactive-indicator: var(--neutral-100);
879
+ --form-toggl-primary-active-active: var(--primary-500);
880
+ --form-toggl-primary-active-default: var(--primary-400);
881
+ --form-toggl-primary-active-hover: var(--primary-500);
882
+ --form-toggl-primary-active-icon: var(--primary-400);
883
+ --form-toggl-primary-active-icon-outlined: var(--general-icon-white);
884
+ --form-toggl-primary-active-indicator: var(--neutral-100);
885
+ --form-toggl-primary-inactive-active: var(--neutral-550);
886
+ --form-toggl-primary-inactive-default: var(--neutral-450);
887
+ --form-toggl-primary-inactive-hover: var(--neutral-500);
888
+ --form-toggl-primary-inactive-icon: var(--neutral-450);
889
+ --form-toggl-primary-inactive-icon-outlined: var(--general-icon-white);
890
+ --form-toggl-primary-inactive-indicator: var(--neutral-100);
891
+ --general-border-accent: var(--accent-600);
892
+ --general-border-brand: var(--primary-600);
893
+ --general-border-primary: var(--neutral-750);
894
+ --general-border-secondary: var(--neutral-600);
895
+ --general-border-white: var(--neutral-100);
896
+ --general-icon-accent: var(--orange-300);
897
+ --general-icon-brand: var(--primary-300);
898
+ --general-icon-brand-dark: var(--primary-400);
899
+ --general-icon-danger: var(--red-300);
900
+ --general-icon-primary: var(--neutral-100);
901
+ --general-icon-secondary: var(--neutral-450);
902
+ --general-icon-success: var(--green-300);
903
+ --general-icon-tertiary: var(--neutral-400);
904
+ --general-icon-warning: var(--yellow-200);
905
+ --general-icon-warning-dark: var(--yellow-300);
906
+ --general-icon-white: var(--neutral-100);
907
+ --general-icon-background-brand-primary: var(--general-surface-brand-primary);
908
+ --general-icon-background-brand-secondary: var(--general-surface-brand-tertiary);
909
+ --general-icon-background-primary: var(--alpha-40);
910
+ --general-icon-background-secondary: var(--alpha-white-30);
911
+ --general-status-danger-border: var(--red-500);
912
+ --general-status-danger-text: var(--general-text-primary);
913
+ --general-status-danger-background-primary: var(--red-700);
914
+ --general-status-danger-background-secondary: var(--red-700);
915
+ --general-status-danger-background-tertiary: var(--red-600);
916
+ --general-status-info-border: var(--blue-400);
917
+ --general-status-info-text: var(--general-text-primary);
918
+ --general-status-info-background-dark: var(--blue-400);
919
+ --general-status-info-background-light: var(--blue-700);
920
+ --general-status-neutral-border: var(--neutral-400);
921
+ --general-status-neutral-text: var(--general-text-primary);
922
+ --general-status-neutral-background-dark: var(--neutral-350);
923
+ --general-status-neutral-background-light: var(--neutral-800);
924
+ --general-status-success-border: var(--green-500);
925
+ --general-status-success-text: var(--general-text-primary);
926
+ --general-status-success-background-primary: var(--green-700);
927
+ --general-status-success-background-secondary: var(--green-700);
928
+ --general-status-success-background-tertiary: var(--green-600);
929
+ --general-status-warning-border: var(--yellow-600);
930
+ --general-status-warning-text: var(--general-text-primary);
931
+ --general-status-warning-background-dark: var(--yellow-400);
932
+ --general-status-warning-background-light: var(--yellow-700);
933
+ --general-surface-accent: var(--accent-700);
934
+ --general-surface-active: var(--general-surface-brand-secondary);
935
+ --general-surface-brand-primary: var(--primary-600);
936
+ --general-surface-brand-quaternary: var(--primary-800);
937
+ --general-surface-brand-secondary: var(--primary-500);
938
+ --general-surface-brand-tertiary: var(--primary-700);
939
+ --general-surface-disabled: var(--neutral-850);
940
+ --general-surface-hover: var(--general-surface-brand-quaternary);
941
+ --general-surface-inverted-primary: var(--neutral-350);
942
+ --general-surface-inverted-secondary: var(--neutral-300);
943
+ --general-surface-inverted-tertiary: var(--neutral-400);
944
+ --general-surface-overlay: var(--alpha-80);
945
+ --general-surface-primary: var(--neutral-850);
946
+ --general-surface-secondary: var(--neutral-800);
947
+ --general-surface-selected: var(--general-surface-brand-secondary);
948
+ --general-surface-success: var(--green-800);
949
+ --general-surface-tertiary: var(--neutral-750);
950
+ --general-text-brand: var(--primary-200);
951
+ --general-text-dark: var(--neutral-850);
952
+ --general-text-disabled: var(--neutral-600);
953
+ --general-text-primary: var(--neutral-100);
954
+ --general-text-secondary: var(--neutral-300);
955
+ --general-text-tertiary: var(--neutral-400);
956
+ --general-text-white: var(--neutral-100);
957
+ --header-background: var(--general-surface-primary);
958
+ --header-bottom-border: var(--neutral-900);
959
+ --header-modal-item-active-background: var(--dropdown-item-active-background);
960
+ --header-modal-item-active-text: var(--dropdown-item-active-text);
961
+ --header-modal-item-default-background: var(--dropdown-item-default-background);
962
+ --header-modal-item-default-text: var(--general-text-brand);
963
+ --header-modal-item-disabled-background: var(--dropdown-item-disabled-background);
964
+ --header-modal-item-disabled-text: var(--dropdown-item-disabled-text);
965
+ --header-modal-item-hover-background: var(--dropdown-item-hover-background);
966
+ --header-modal-item-hover-text: var(--dropdown-item-hover-text);
967
+ --header-popover-border-top: var(--primary-500);
968
+ --header-popover-item-active: var(--general-surface-active);
969
+ --header-popover-item-hover: var(--general-surface-hover);
970
+ --header-popover-item-selected: var(--general-surface-selected);
971
+ --link-inverted-active: var(--general-text-white);
972
+ --link-inverted-default: var(--general-text-white);
973
+ --link-inverted-focus: var(--general-text-white);
974
+ --link-inverted-hover: var(--general-text-white);
975
+ --link-primary-active: var(--primary-100);
976
+ --link-primary-default: var(--primary-400);
977
+ --link-primary-focus: var(--primary-200);
978
+ --link-primary-hover: var(--primary-400);
979
+ --list-icon: var(--primary-400);
980
+ --loader-skeleton-color: #9293a433;
981
+ --loader-spinner-color-primary: var(--alpha-white-80);
982
+ --loader-spinner-color-secondary: var(--alpha-white-80);
983
+ --modal-background: var(--general-surface-primary);
984
+ --modal-border: var(--general-border-primary);
985
+ --modal-footer-border-top: var(--general-border-primary);
986
+ --modal-header-border-bottom: var(--general-border-primary);
987
+ --popover-background: var(--general-surface-primary);
988
+ --popover-border: var(--general-border-secondary);
989
+ --popover-text: var(--general-text-primary);
990
+ --side-navigation-background: var(--side-navigation-item-background-default);
991
+ --side-navigation-group-title-text: var(--neutral-450);
992
+ --side-navigation-item-border: var(--neutral-800);
993
+ --side-navigation-item-text: var(--general-text-white);
994
+ --side-navigation-item-background-active: var(--neutral-800);
995
+ --side-navigation-item-background-arrow-button-active: var(--neutral-850);
996
+ --side-navigation-item-background-arrow-button-hover: var(--neutral-800);
997
+ --side-navigation-item-background-default: var(--neutral-900);
998
+ --side-navigation-item-background-focus: var(--neutral-900);
999
+ --side-navigation-item-background-hover: var(--neutral-850);
1000
+ --side-navigation-tree-brand-active: var(--neutral-700);
1001
+ --side-navigation-tree-brand-default: var(--neutral-550);
1002
+ --side-navigation-tree-brand-hover: var(--neutral-600);
1003
+ --side-navigation-tree-neutral-active: var(--neutral-700);
1004
+ --side-navigation-tree-neutral-default: var(--neutral-550);
1005
+ --side-navigation-tree-neutral-hover: var(--neutral-600);
1006
+ --status-badge-background-accent: var(--orange-700);
1007
+ --status-badge-background-brand: var(--general-status-info-background-light);
1008
+ --status-badge-background-danger: var(--general-status-danger-background-primary);
1009
+ --status-badge-background-neutral: var(--general-status-neutral-background-light);
1010
+ --status-badge-background-success: var(--general-status-success-background-primary);
1011
+ --status-badge-background-transparent: var(--alpha-01);
1012
+ --status-badge-background-warning: var(--general-status-warning-background-light);
1013
+ --status-badge-border-accent: var(--orange-400);
1014
+ --status-badge-border-brand: var(--general-status-info-border);
1015
+ --status-badge-border-danger: var(--general-status-danger-border);
1016
+ --status-badge-border-neutral: var(--general-status-neutral-border);
1017
+ --status-badge-border-success: var(--general-status-success-border);
1018
+ --status-badge-border-warning: var(--general-status-warning-border);
1019
+ --status-badge-icon-accent: var(--neutral-100);
1020
+ --status-badge-icon-brand: var(--neutral-100);
1021
+ --status-badge-icon-danger: var(--neutral-100);
1022
+ --status-badge-icon-neutral: var(--neutral-100);
1023
+ --status-badge-icon-success: var(--neutral-100);
1024
+ --status-badge-icon-warning: var(--neutral-100);
1025
+ --status-badge-indicator-border: var(--general-surface-primary);
1026
+ --status-badge-indicator-danger: var(--general-status-danger-background-secondary);
1027
+ --status-badge-indicator-inactive: var(--general-status-neutral-background-dark);
1028
+ --status-badge-indicator-success: var(--general-status-success-background-secondary);
1029
+ --status-badge-indicator-warning: var(--general-status-warning-background-dark);
1030
+ --status-badge-text-accent: var(--general-text-white);
1031
+ --status-badge-text-brand: var(--general-status-info-text);
1032
+ --status-badge-text-danger: var(--general-status-danger-text);
1033
+ --status-badge-text-neutral: var(--general-status-neutral-text);
1034
+ --status-badge-text-success: var(--general-status-success-text);
1035
+ --status-badge-text-warning: var(--general-status-warning-text);
1036
+ --stepper-item-horizontal-text-completed-default: var(--green-200);
1037
+ --stepper-item-horizontal-text-completed-hover: var(--green-300);
1038
+ --stepper-item-horizontal-text-danger-default: var(--red-200);
1039
+ --stepper-item-horizontal-text-danger-hover: var(--red-300);
1040
+ --stepper-item-horizontal-text-default: var(--general-text-secondary);
1041
+ --stepper-item-horizontal-text-hover: var(--primary-500);
1042
+ --stepper-item-horizontal-text-selected: var(--general-text-white);
1043
+ --stepper-item-horizontal-type-completed-bg-active: var(--green-600);
1044
+ --stepper-item-horizontal-type-completed-bg-default: var(--general-status-success-background-primary);
1045
+ --stepper-item-horizontal-type-completed-bg-hover: var(--green-700);
1046
+ --stepper-item-horizontal-type-danger-bg-active: var(--red-500);
1047
+ --stepper-item-horizontal-type-danger-bg-default: var(--general-status-danger-background-primary);
1048
+ --stepper-item-horizontal-type-danger-bg-hover: var(--red-600);
1049
+ --stepper-item-horizontal-type-default-bg-active: var(--general-surface-brand-tertiary);
1050
+ --stepper-item-horizontal-type-default-bg-default: var(--general-surface-tertiary);
1051
+ --stepper-item-horizontal-type-default-bg-hover: var(--general-surface-inverted-tertiary);
1052
+ --stepper-item-horizontal-type-selected-bg-default: var(--general-border-brand);
1053
+ --stepper-item-vertical-line: var(--general-border-primary);
1054
+ --stepper-item-vertical-text-default: var(--general-text-primary);
1055
+ --stepper-item-vertical-text-disabled: var(--general-text-disabled);
1056
+ --stepper-item-vertical-text-hover: var(--link-primary-hover);
1057
+ --stepper-item-vertical-text-selected: var(--link-primary-hover);
1058
+ --stepper-item-vertical-type-completed-bg: var(--general-status-success-background-tertiary);
1059
+ --stepper-item-vertical-type-completed-bg-hover: var(--green-700);
1060
+ --stepper-item-vertical-type-danger-bg: var(--general-status-danger-background-tertiary);
1061
+ --stepper-item-vertical-type-danger-bg-hover: var(--red-700);
1062
+ --stepper-item-vertical-type-default-bg: var(--general-surface-primary);
1063
+ --stepper-item-vertical-type-default-border: var(--general-border-primary);
1064
+ --stepper-item-vertical-type-default-border-hover: var(--general-border-brand);
1065
+ --stepper-item-vertical-type-disabled-bg: var(--general-surface-disabled);
1066
+ --stepper-item-vertical-type-disabled-border: var(--general-border-primary);
1067
+ --stepper-item-vertical-type-selected-bg: var(--general-surface-primary);
1068
+ --stepper-item-vertical-type-selected-border: var(--general-surface-active);
1069
+ --stepper-item-vertical-type-selected-border-hover: var(--primary-600);
1070
+ --tab-background: var(--general-surface-secondary);
1071
+ --tab-item-active-background: var(--general-surface-brand-tertiary);
1072
+ --tab-item-active-text: var(--primary-200);
1073
+ --tab-item-default-background: var(--alpha-01);
1074
+ --tab-item-default-text: var(--general-text-primary);
1075
+ --tab-item-hover-background: var(--general-surface-hover);
1076
+ --tab-item-hover-text: var(--primary-200);
1077
+ --tab-item-selected-background: var(--general-surface-primary);
1078
+ --tab-item-selected-border: var(--general-surface-selected);
1079
+ --tab-item-selected-text: var(--primary-100);
1080
+ --table-border: var(--general-border-primary);
1081
+ --table-border-th: var(--general-border-secondary);
1082
+ --table-default: var(--general-surface-primary);
1083
+ --table-hover: var(--general-surface-hover);
1084
+ --table-striped: var(--general-surface-tertiary);
1085
+ --tag-danger-background: var(--general-status-danger-background-primary);
1086
+ --tag-danger-border: var(--red-600);
1087
+ --tag-primary-background: var(--primary-800);
1088
+ --tag-primary-border: var(--primary-600);
1089
+ --tag-secondary-background: var(--neutral-800);
1090
+ --tag-secondary-border: var(--neutral-800);
1091
+ --tooltip-background: var(--general-surface-inverted-primary);
1092
+ --tooltip-text: var(--general-text-dark);
1093
+ --file-dropzone-background-default: var(--form-input-background-default);
1094
+ --file-dropzone-background-disabled: var(--form-general-background-disabled);
1095
+ --file-dropzone-background-drop-over: var(--general-surface-brand-quaternary);
1096
+ --file-dropzone-background-hover: var(--general-surface-hover);
1097
+ --file-dropzone-border-active: var(--general-surface-active);
1098
+ --file-dropzone-border-default: var(--form-input-border-default);
1099
+ --file-dropzone-border-disabled: var(--form-general-border-disabled);
1100
+ --file-dropzone-border-drop-over: var(--form-input-border-active);
1101
+ --file-dropzone-border-focus: var(--form-input-border-focus);
1102
+ --file-dropzone-border-hover: var(--form-input-border-hover);
1103
+ --file-dropzone-text-default: var(--general-text-brand);
1104
+ --file-dropzone-text-drop-over: var(--general-text-tertiary);
1105
+ --dropdown-item-active-background: var(--general-surface-active);
1106
+ --dropdown-item-active-text: var(--general-text-white);
1107
+ --dropdown-item-default-background: var(--general-surface-primary);
1108
+ --dropdown-item-default-text: var(--general-text-primary);
1109
+ --dropdown-item-disabled-background: var(--general-surface-disabled);
1110
+ --dropdown-item-disabled-text: var(--general-text-disabled);
1111
+ --dropdown-item-hover-background: var(--general-surface-hover);
1112
+ --dropdown-item-hover-text: var(--general-text-white);
1113
+ }