@tedi-design-system/core 2.0.0 → 2.2.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 (20) hide show
  1. package/_base.scss +3 -4
  2. package/_fonts.scss +10 -0
  3. package/_mixins.scss +4 -25
  4. package/_typography.scss +28 -29
  5. package/fonts/SpaceGrotesk-Light.woff +0 -0
  6. package/fonts/SpaceGrotesk-Light.woff2 +0 -0
  7. package/index.css +1 -1
  8. package/index.scss +2 -0
  9. package/package.json +5 -5
  10. package/variables/_base-variables-legacy.scss +110 -0
  11. package/variables/_base-variables.scss +231 -110
  12. package/variables/_color-variables.scss +6 -1111
  13. package/variables/_dimensional-variables-legacy.scss +1236 -0
  14. package/variables/_dimensional-variables.scss +1092 -1234
  15. package/variables/_font-variables.scss +5 -75
  16. package/variables/themes/default/color-variables__dark.scss +611 -0
  17. package/variables/themes/default/color-variables__default.scss +617 -0
  18. package/variables/themes/default/font-variables__default.scss +94 -0
  19. package/variables/themes/rit/color-variables__rit.scss +617 -0
  20. package/variables/themes/rit/font-variables__rit.scss +90 -0
package/variables/themes/default/color-variables__default.scss ADDED
@@ -0,0 +1,617 @@
1
+ .tedi-theme--default {
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(--tedi-primary-600);
28
+ --button-card-active-background: var(--general-surface-brand-tertiary);
29
+ --button-card-active-border: var(--tedi-primary-400);
30
+ --button-card-active-icon-background: var(--general-surface-brand-primary);
31
+ --button-card-disabled-background: var(--form-general-background-disabled);
32
+ --button-card-disabled-border: var(--form-general-border-disabled);
33
+ --button-card-hover-background: var(--button-main-secondary-background-hover);
34
+ --button-card-hover-border: var(--tedi-primary-300);
35
+ --button-card-hover-icon-background: var(--general-surface-brand-primary);
36
+ --button-card-icon-default: var(--general-icon-secondary);
37
+ --button-card-icon-disabled: var(--general-text-disabled);
38
+ --button-card-icon-hover: var(--general-icon-brand);
39
+ --button-close-background-active: var(--tedi-alpha-20);
40
+ --button-close-background-default: var(--tedi-alpha-01);
41
+ --button-close-background-focus: var(--tedi-alpha-01);
42
+ --button-close-background-hover: var(--tedi-alpha-10);
43
+ --button-close-text-active: var(--general-text-primary);
44
+ --button-close-text-default: var(--general-text-tertiary);
45
+ --button-close-text-focus: var(--general-text-primary);
46
+ --button-close-text-hover: var(--general-text-primary);
47
+ --button-floating-primary-background-active: var(--button-main-primary-background-active);
48
+ --button-floating-primary-background-default: var(--button-main-primary-background-default);
49
+ --button-floating-primary-background-focus: var(--button-main-primary-background-focus);
50
+ --button-floating-primary-background-hover: var(--button-main-primary-background-hover);
51
+ --button-floating-primary-border-active: var(--button-main-primary-background-active);
52
+ --button-floating-primary-border-default: var(--button-main-primary-border-default);
53
+ --button-floating-primary-border-focus: var(--button-main-primary-border-focus);
54
+ --button-floating-primary-border-hover: var(--button-main-primary-border-hover);
55
+ --button-floating-primary-text-active: var(--button-main-primary-text-default);
56
+ --button-floating-primary-text-default: var(--button-main-primary-text-default);
57
+ --button-floating-primary-text-hover: var(--button-main-primary-text-default);
58
+ --button-floating-secondary-background-active: var(--button-main-primary-inverted-background-active);
59
+ --button-floating-secondary-background-default: var(--button-main-primary-inverted-background-default);
60
+ --button-floating-secondary-background-focus: var(--button-main-primary-inverted-background-focus);
61
+ --button-floating-secondary-background-hover: var(--button-main-primary-inverted-background-hover);
62
+ --button-floating-secondary-border-active: var(--button-main-primary-inverted-border-active);
63
+ --button-floating-secondary-border-default: var(--button-main-primary-inverted-border-default);
64
+ --button-floating-secondary-border-focus: var(--button-main-primary-inverted-border-focus);
65
+ --button-floating-secondary-border-hover: var(--button-main-primary-inverted-border-hover);
66
+ --button-floating-secondary-text-active: var(--button-main-primary-inverted-text-active);
67
+ --button-floating-secondary-text-default: var(--button-main-primary-inverted-text-default);
68
+ --button-floating-secondary-text-hover: var(--button-main-primary-inverted-text-hover);
69
+ --button-group-primary-disabled-background: var(--button-main-disabled-general-background);
70
+ --button-group-primary-disabled-border: var(--button-group-primary-inactive-border);
71
+ --button-group-primary-disabled-text: var(--button-main-disabled-general-text);
72
+ --button-group-primary-hover-background: var(--form-checkbox-radio-card-primary-hover-background);
73
+ --button-group-primary-hover-border: var(--form-checkbox-radio-card-primary-hover-border);
74
+ --button-group-primary-hover-text: var(--form-checkbox-radio-card-primary-hover-text);
75
+ --button-group-primary-inactive-background: var(--form-checkbox-radio-card-primary-default-background);
76
+ --button-group-primary-inactive-border: var(--form-checkbox-radio-card-primary-default-border-group);
77
+ --button-group-primary-inactive-text: var(--form-checkbox-radio-card-primary-default-text);
78
+ --button-group-primary-selected-background: var(--form-checkbox-radio-card-primary-selected-background);
79
+ --button-group-primary-selected-border: var(--form-checkbox-radio-card-primary-selected-border-group);
80
+ --button-group-primary-selected-text: var(--form-checkbox-radio-card-primary-selected-text);
81
+ --button-group-secondary-disabled-background: var(--tedi-alpha-01);
82
+ --button-group-secondary-disabled-border: var(--button-main-disabled-general-border);
83
+ --button-group-secondary-disabled-text: var(--button-main-disabled-general-text);
84
+ --button-group-secondary-hover-background: var(--form-checkbox-radio-card-secondary-hover-background);
85
+ --button-group-secondary-hover-border: var(--form-checkbox-radio-card-secondary-hover-border);
86
+ --button-group-secondary-hover-text: var(--form-checkbox-radio-card-secondary-hover-text);
87
+ --button-group-secondary-inactive-background: var(--form-checkbox-radio-card-secondary-default-background);
88
+ --button-group-secondary-inactive-border: var(--form-checkbox-radio-card-secondary-default-border);
89
+ --button-group-secondary-inactive-text: var(--form-checkbox-radio-card-secondary-default-text);
90
+ --button-group-secondary-selected-background: var(--form-checkbox-radio-card-secondary-selected-background);
91
+ --button-group-secondary-selected-border: var(--form-checkbox-radio-card-secondary-selected-border);
92
+ --button-group-secondary-selected-text: var(--form-checkbox-radio-card-secondary-selected-text);
93
+ --button-main-danger-neutral-background-active: var(--tedi-alpha-01);
94
+ --button-main-danger-neutral-background-default: var(--tedi-alpha-01);
95
+ --button-main-danger-neutral-background-focus: var(--tedi-alpha-01);
96
+ --button-main-danger-neutral-background-hover: var(--tedi-alpha-01);
97
+ --button-main-danger-neutral-border-active: var(--tedi-alpha-01);
98
+ --button-main-danger-neutral-border-default: var(--tedi-alpha-01);
99
+ --button-main-danger-neutral-border-focus: var(--tedi-neutral-100);
100
+ --button-main-danger-neutral-border-hover: var(--tedi-alpha-01);
101
+ --button-main-danger-neutral-icon-only-background-active: var(--tedi-red-200);
102
+ --button-main-danger-neutral-icon-only-background-default: var(--button-main-danger-neutral-background-default);
103
+ --button-main-danger-neutral-icon-only-background-focus: var(--button-main-danger-neutral-background-focus);
104
+ --button-main-danger-neutral-icon-only-background-hover: var(--tedi-red-100);
105
+ --button-main-danger-neutral-text-active: var(--tedi-red-800);
106
+ --button-main-danger-neutral-text-default: var(--tedi-red-600);
107
+ --button-main-danger-neutral-text-focus: var(--tedi-red-600);
108
+ --button-main-danger-neutral-text-hover: var(--tedi-red-700);
109
+ --button-main-danger-background-active: var(--tedi-red-800);
110
+ --button-main-danger-background-default: var(--tedi-red-600);
111
+ --button-main-danger-background-focus: var(--tedi-red-600);
112
+ --button-main-danger-background-hover: var(--tedi-red-700);
113
+ --button-main-danger-border-active: var(--button-main-danger-background-active);
114
+ --button-main-danger-border-default: var(--button-main-danger-background-default);
115
+ --button-main-danger-border-focus: var(--button-main-danger-background-focus);
116
+ --button-main-danger-border-hover: var(--button-main-danger-background-hover);
117
+ --button-main-danger-text-default: var(--general-text-white);
118
+ --button-main-disabled-general-background: var(--general-surface-disabled);
119
+ --button-main-disabled-general-border: var(--button-main-disabled-general-background);
120
+ --button-main-disabled-general-text: var(--general-text-disabled);
121
+ --button-main-disabled-neutral-background: var(--button-main-neutral-background-default);
122
+ --button-main-disabled-neutral-border: var(--button-main-neutral-border-default);
123
+ --button-main-neutral-inverted-background-active: var(--tedi-alpha-01);
124
+ --button-main-neutral-inverted-background-default: var(--tedi-alpha-01);
125
+ --button-main-neutral-inverted-background-focus: var(--tedi-alpha-01);
126
+ --button-main-neutral-inverted-background-hover: var(--tedi-alpha-01);
127
+ --button-main-neutral-inverted-border-active: var(--tedi-alpha-01);
128
+ --button-main-neutral-inverted-border-default: var(--tedi-alpha-01);
129
+ --button-main-neutral-inverted-border-focus: var(--tedi-neutral-100);
130
+ --button-main-neutral-inverted-border-hover: var(--tedi-alpha-01);
131
+ --button-main-neutral-inverted-icon-only-background-active: var(--button-main-secondary-inverted-background-active);
132
+ --button-main-neutral-inverted-icon-only-background-default: var(--button-main-secondary-inverted-background-default);
133
+ --button-main-neutral-inverted-icon-only-background-focus: var(--button-main-secondary-inverted-background-focus);
134
+ --button-main-neutral-inverted-icon-only-background-hover: var(--button-main-secondary-inverted-background-hover);
135
+ --button-main-neutral-inverted-text-active: var(--tedi-neutral-100);
136
+ --button-main-neutral-inverted-text-default: var(--tedi-neutral-100);
137
+ --button-main-neutral-inverted-text-focus: var(--tedi-neutral-100);
138
+ --button-main-neutral-inverted-text-hover: var(--tedi-primary-200);
139
+ --button-main-neutral-background-active: var(--tedi-alpha-01);
140
+ --button-main-neutral-background-default: var(--tedi-alpha-01);
141
+ --button-main-neutral-background-focus: var(--tedi-alpha-01);
142
+ --button-main-neutral-background-hover: var(--tedi-alpha-01);
143
+ --button-main-neutral-border-active: var(--tedi-alpha-01);
144
+ --button-main-neutral-border-default: var(--tedi-alpha-01);
145
+ --button-main-neutral-border-focus: var(--tedi-neutral-100);
146
+ --button-main-neutral-border-hover: var(--tedi-alpha-01);
147
+ --button-main-neutral-icon-only-background-active: var(--button-main-secondary-background-active);
148
+ --button-main-neutral-icon-only-background-default: var(--tedi-alpha-01);
149
+ --button-main-neutral-icon-only-background-focus: var(--button-main-neutral-icon-only-background-default);
150
+ --button-main-neutral-icon-only-background-hover: var(--button-main-secondary-background-hover);
151
+ --button-main-neutral-text-active: var(--tedi-primary-800);
152
+ --button-main-neutral-text-default: var(--tedi-primary-600);
153
+ --button-main-neutral-text-focus: var(--tedi-primary-600);
154
+ --button-main-neutral-text-hover: var(--tedi-primary-700);
155
+ --button-main-primary-inverted-background-active: var(--tedi-primary-300);
156
+ --button-main-primary-inverted-background-default: var(--tedi-primary-200);
157
+ --button-main-primary-inverted-background-focus: var(--button-main-primary-inverted-background-default);
158
+ --button-main-primary-inverted-background-hover: var(--tedi-primary-300);
159
+ --button-main-primary-inverted-border-active: var(--button-main-primary-inverted-background-active);
160
+ --button-main-primary-inverted-border-default: var(--button-main-primary-inverted-background-default);
161
+ --button-main-primary-inverted-border-focus: var(--button-main-primary-inverted-background-focus);
162
+ --button-main-primary-inverted-border-hover: var(--button-main-primary-inverted-background-hover);
163
+ --button-main-primary-inverted-text-active: var(--tedi-primary-800);
164
+ --button-main-primary-inverted-text-default: var(--tedi-primary-600);
165
+ --button-main-primary-inverted-text-hover: var(--tedi-primary-700);
166
+ --button-main-primary-background-active: var(--tedi-primary-800);
167
+ --button-main-primary-background-default: var(--tedi-primary-600);
168
+ --button-main-primary-background-focus: var(--tedi-primary-600);
169
+ --button-main-primary-background-hover: var(--tedi-primary-700);
170
+ --button-main-primary-border-active: var(--button-main-primary-background-active);
171
+ --button-main-primary-border-default: var(--button-main-primary-background-default);
172
+ --button-main-primary-border-focus: var(--button-main-primary-background-focus);
173
+ --button-main-primary-border-hover: var(--button-main-primary-background-hover);
174
+ --button-main-primary-text-active: var(--general-text-white);
175
+ --button-main-primary-text-default: var(--general-text-white);
176
+ --button-main-primary-text-hover: var(--general-text-white);
177
+ --button-main-secondary-inverted-background-active: var(--tedi-alpha-white-10);
178
+ --button-main-secondary-inverted-background-default: var(--tedi-alpha-01);
179
+ --button-main-secondary-inverted-background-focus: var(--tedi-alpha-01);
180
+ --button-main-secondary-inverted-background-hover: var(--tedi-alpha-white-10);
181
+ --button-main-secondary-inverted-border-active: var(--tedi-neutral-100);
182
+ --button-main-secondary-inverted-border-default: var(--tedi-alpha-white-50);
183
+ --button-main-secondary-inverted-border-focus: var(--tedi-neutral-100);
184
+ --button-main-secondary-inverted-border-hover: var(--tedi-neutral-100);
185
+ --button-main-secondary-inverted-text-default: var(--general-text-white);
186
+ --button-main-secondary-background-active: var(--general-surface-brand-tertiary);
187
+ --button-main-secondary-background-default: var(--tedi-neutral-100);
188
+ --button-main-secondary-background-focus: var(--tedi-neutral-100);
189
+ --button-main-secondary-background-hover: var(--general-surface-hover);
190
+ --button-main-secondary-border-active: var(--tedi-primary-700);
191
+ --button-main-secondary-border-default: var(--general-border-secondary);
192
+ --button-main-secondary-border-focus: var(--tedi-primary-600);
193
+ --button-main-secondary-border-hover: var(--tedi-primary-600);
194
+ --button-main-secondary-text-default: var(--tedi-primary-600);
195
+ --button-main-success-background-active: var(--tedi-green-800);
196
+ --button-main-success-background-default: var(--tedi-green-600);
197
+ --button-main-success-background-focus: var(--tedi-green-600);
198
+ --button-main-success-background-hover: var(--tedi-green-700);
199
+ --button-main-success-border-active: var(--button-main-success-background-active);
200
+ --button-main-success-border-default: var(--button-main-success-background-default);
201
+ --button-main-success-border-focus: var(--button-main-success-background-focus);
202
+ --button-main-success-border-hover: var(--button-main-success-background-hover);
203
+ --button-main-success-text-default: var(--general-text-white);
204
+ --card-background-accent: var(--general-surface-accent);
205
+ --card-background-brand-primary: var(--general-surface-brand-primary);
206
+ --card-background-brand-quaternary: var(--general-surface-brand-quaternary);
207
+ --card-background-brand-secondary: var(--general-surface-brand-secondary);
208
+ --card-background-brand-tertiary: var(--general-surface-brand-tertiary);
209
+ --card-background-danger: var(--general-status-danger-background-primary);
210
+ --card-background-primary: var(--general-surface-primary);
211
+ --card-background-secondary: var(--general-surface-secondary);
212
+ --card-background-success: var(--general-status-success-background-primary);
213
+ --card-background-tertiary: var(--general-surface-tertiary);
214
+ --card-background-warning: var(--general-status-warning-background-light);
215
+ --card-border-primary: var(--general-border-primary);
216
+ --card-border-selected: var(--general-border-brand);
217
+ --carousel-dot-background-active: var(--button-main-primary-background-active);
218
+ --carousel-dot-background-focus: var(--general-surface-primary);
219
+ --carousel-dot-background-selected: var(--button-main-primary-background-default);
220
+ --carousel-dot-border-active: var(--button-main-primary-background-active);
221
+ --carousel-dot-border-default: var(--button-main-primary-background-default);
222
+ --carousel-dot-border-focus: var(--button-main-primary-background-focus);
223
+ --carousel-dot-border-hover: var(--button-main-primary-background-hover);
224
+ --carousel-dot-border-selected: var(--button-main-primary-background-default);
225
+ --dropdown-item-active-background: var(--general-surface-selected);
226
+ --dropdown-item-active-text: var(--general-text-white);
227
+ --dropdown-item-default-background: var(--general-surface-primary);
228
+ --dropdown-item-default-text: var(--general-text-primary);
229
+ --dropdown-item-disabled-background: var(--general-surface-disabled);
230
+ --dropdown-item-disabled-text: var(--general-text-disabled);
231
+ --dropdown-item-hover-background: var(--general-surface-hover);
232
+ --dropdown-item-hover-text: var(--tedi-primary-700);
233
+ --empty-state-border: var(--card-border-primary);
234
+ --empty-state-background-primary: var(--general-surface-primary);
235
+ --empty-state-background-secondary: var(--general-surface-secondary);
236
+ --empty-state-background-tertiary: var(--general-surface-tertiary);
237
+ --empty-state-icon-primary: var(--general-icon-brand);
238
+ --empty-state-icon-secondary: var(--general-icon-tertiary);
239
+ --file-dropzone-background-default: var(--form-input-background-default);
240
+ --file-dropzone-background-disabled: var(--form-general-background-disabled);
241
+ --file-dropzone-background-drop-over: var(--general-surface-brand-quaternary);
242
+ --file-dropzone-background-hover: var(--general-surface-hover);
243
+ --file-dropzone-border-active: var(--general-surface-active);
244
+ --file-dropzone-border-default: var(--form-input-border-default);
245
+ --file-dropzone-border-disabled: var(--form-general-border-disabled);
246
+ --file-dropzone-border-drop-over: var(--form-input-border-active);
247
+ --file-dropzone-border-focus: var(--form-input-border-focus);
248
+ --file-dropzone-border-hover: var(--form-input-border-hover);
249
+ --file-dropzone-text-default: var(--general-text-brand);
250
+ --file-dropzone-text-drop-over: var(--general-text-tertiary);
251
+ --filter-primary-active-background: var(--form-checkbox-radio-card-primary-selected-background);
252
+ --filter-primary-active-border: var(--form-checkbox-radio-card-primary-selected-border-group);
253
+ --filter-primary-active-text: var(--form-checkbox-radio-card-primary-selected-text);
254
+ --filter-primary-hover-background: var(--form-checkbox-radio-card-primary-hover-background);
255
+ --filter-primary-hover-border: var(--form-checkbox-radio-card-primary-hover-border);
256
+ --filter-primary-hover-text: var(--form-checkbox-radio-card-primary-hover-text);
257
+ --filter-primary-inactive-background: var(--form-checkbox-radio-card-primary-default-background);
258
+ --filter-primary-inactive-border: var(--form-checkbox-radio-card-primary-default-border-separate);
259
+ --filter-primary-inactive-text: var(--form-checkbox-radio-card-primary-default-text);
260
+ --filter-secondary-active-background: var(--form-checkbox-radio-card-secondary-selected-background);
261
+ --filter-secondary-active-border: var(--form-checkbox-radio-card-secondary-selected-border);
262
+ --filter-secondary-active-text: var(--form-checkbox-radio-card-secondary-selected-text);
263
+ --filter-secondary-hover-background: var(--form-checkbox-radio-card-secondary-hover-background);
264
+ --filter-secondary-hover-border: var(--form-checkbox-radio-card-secondary-hover-border);
265
+ --filter-secondary-hover-text: var(--form-checkbox-radio-card-secondary-hover-text);
266
+ --filter-secondary-inactive-background: var(--form-checkbox-radio-card-secondary-default-background);
267
+ --filter-secondary-inactive-border: var(--form-checkbox-radio-card-secondary-default-border);
268
+ --filter-secondary-inactive-text: var(--form-checkbox-radio-card-secondary-default-text);
269
+ --footer-background: var(--general-surface-inverted-secondary);
270
+ --footer-bottom-background: var(--general-surface-inverted-tertiary);
271
+ --footer-icon-background: var(--tedi-alpha-white-20);
272
+ --form-checkbox-radio-card-primary-default-background: var(--general-surface-tertiary);
273
+ --form-checkbox-radio-card-primary-default-border-group: var(--button-main-secondary-border-default);
274
+ --form-checkbox-radio-card-primary-default-border-separate: var(
275
+ --form-checkbox-radio-card-primary-default-background
276
+ );
277
+ --form-checkbox-radio-card-primary-default-text: var(--general-text-secondary);
278
+ --form-checkbox-radio-card-primary-disabled-default-background: var(--form-general-background-disabled);
279
+ --form-checkbox-radio-card-primary-disabled-default-text: var(--general-text-disabled);
280
+ --form-checkbox-radio-card-primary-disabled-selected-background: var(
281
+ --form-checkbox-radio-default-background-selected-disabled
282
+ );
283
+ --form-checkbox-radio-card-primary-disabled-selected-text: var(--form-checkbox-radio-card-primary-selected-text);
284
+ --form-checkbox-radio-card-primary-hover-background: var(--button-main-primary-background-hover);
285
+ --form-checkbox-radio-card-primary-hover-border: var(--button-main-primary-border-hover);
286
+ --form-checkbox-radio-card-primary-hover-text: var(--button-main-primary-text-default);
287
+ --form-checkbox-radio-card-primary-selected-background: var(--button-main-primary-background-default);
288
+ --form-checkbox-radio-card-primary-selected-border-group: var(--button-main-primary-border-active);
289
+ --form-checkbox-radio-card-primary-selected-border-separate: var(
290
+ --form-checkbox-radio-card-primary-selected-background
291
+ );
292
+ --form-checkbox-radio-card-primary-selected-text: var(--button-main-primary-text-default);
293
+ --form-checkbox-radio-card-secondary-default-background: var(--button-main-secondary-background-default);
294
+ --form-checkbox-radio-card-secondary-default-border: var(--form-checkbox-radio-card-primary-default-border-group);
295
+ --form-checkbox-radio-card-secondary-default-text: var(--form-checkbox-radio-card-primary-default-text);
296
+ --form-checkbox-radio-card-secondary-disabled-default-background: var(--general-surface-primary);
297
+ --form-checkbox-radio-card-secondary-disabled-default-border: var(--form-input-border-disabled);
298
+ --form-checkbox-radio-card-secondary-disabled-default-text: var(--general-text-disabled);
299
+ --form-checkbox-radio-card-secondary-disabled-selected-background: var(--general-surface-primary);
300
+ --form-checkbox-radio-card-secondary-disabled-selected-border: var(
301
+ --form-checkbox-radio-default-border-selected-disabled
302
+ );
303
+ --form-checkbox-radio-card-secondary-disabled-selected-text: var(
304
+ --form-checkbox-radio-card-primary-disabled-selected-background
305
+ );
306
+ --form-checkbox-radio-card-secondary-hover-background: var(--button-main-secondary-background-hover);
307
+ --form-checkbox-radio-card-secondary-hover-border: var(--button-main-secondary-border-hover);
308
+ --form-checkbox-radio-card-secondary-hover-text: var(--button-main-secondary-text-default);
309
+ --form-checkbox-radio-card-secondary-selected-background: var(--button-main-secondary-background-default);
310
+ --form-checkbox-radio-card-secondary-selected-border: var(--general-border-brand);
311
+ --form-checkbox-radio-card-secondary-selected-text: var(--general-text-brand);
312
+ --form-checkbox-radio-default-background-active: var(--tedi-primary-700);
313
+ --form-checkbox-radio-default-background-default: var(--tedi-neutral-100);
314
+ --form-checkbox-radio-default-background-error: var(--tedi-neutral-100);
315
+ --form-checkbox-radio-default-background-focus: var(--tedi-neutral-100);
316
+ --form-checkbox-radio-default-background-hover: var(--tedi-neutral-100);
317
+ --form-checkbox-radio-default-background-inverted: var(--tedi-primary-600);
318
+ --form-checkbox-radio-default-background-selected: var(--tedi-primary-600);
319
+ --form-checkbox-radio-default-background-selected-disabled: var(--tedi-primary-300);
320
+ --form-checkbox-radio-default-background-selected-inverted: var(--tedi-neutral-100);
321
+ --form-checkbox-radio-default-border-active: var(--tedi-primary-700);
322
+ --form-checkbox-radio-default-border-default: var(--form-general-border-default);
323
+ --form-checkbox-radio-default-border-focus: var(--form-general-border-default);
324
+ --form-checkbox-radio-default-border-hover: var(--tedi-primary-600);
325
+ --form-checkbox-radio-default-border-inverted: var(--tedi-neutral-100);
326
+ --form-checkbox-radio-default-border-selected: var(--tedi-primary-600);
327
+ --form-checkbox-radio-default-border-selected-disabled: var(--tedi-primary-300);
328
+ --form-checkbox-radio-default-border-selected-inverted: var(--tedi-neutral-100);
329
+ --form-checkbox-radio-default-check-indicator-active: var(--tedi-neutral-100);
330
+ --form-checkbox-radio-default-check-indicator-default: var(--tedi-neutral-100);
331
+ --form-datepicker-date-active: var(--button-main-secondary-background-active);
332
+ --form-datepicker-date-available: var(--general-status-success-background-primary);
333
+ --form-datepicker-date-default: var(--button-main-secondary-background-default);
334
+ --form-datepicker-date-hover: var(--button-main-secondary-background-hover);
335
+ --form-datepicker-date-selected: var(--general-surface-brand-primary);
336
+ --form-datepicker-date-text-available: var(--general-status-success-text);
337
+ --form-datepicker-date-text-muted: var(--general-text-disabled);
338
+ --form-datepicker-date-text-selected: var(--general-text-white);
339
+ --form-datepicker-today-border: var(--general-border-brand);
340
+ --form-datepicker-today-border-secondary: var(--tedi-neutral-100);
341
+ --form-general-background-action-background: var(--general-surface-secondary);
342
+ --form-general-background-default: var(--general-surface-primary);
343
+ --form-general-background-disabled: var(--tedi-neutral-300);
344
+ --form-general-border-default: var(--tedi-neutral-500);
345
+ --form-general-border-disabled: var(--tedi-neutral-350);
346
+ --form-general-feedback-error-border: var(--tedi-red-700);
347
+ --form-general-feedback-error-text: var(--general-status-danger-text);
348
+ --form-general-feedback-success-border: var(--tedi-green-600);
349
+ --form-general-feedback-success-text: var(--general-status-success-text);
350
+ --form-hidden-default: var(--tedi-alpha-01);
351
+ --form-hidden-hover: var(--general-surface-tertiary);
352
+ --form-input-background-default: var(--form-general-background-default);
353
+ --form-input-background-disabled: var(--form-general-background-disabled);
354
+ --form-input-border-active: var(--form-input-border-hover);
355
+ --form-input-border-default: var(--form-general-border-default);
356
+ --form-input-border-disabled: var(--form-general-border-disabled);
357
+ --form-input-border-focus: var(--form-input-border-hover);
358
+ --form-input-border-hover: var(--tedi-primary-600);
359
+ --form-input-text-disabled: var(--general-text-secondary);
360
+ --form-input-text-filled: var(--general-text-primary);
361
+ --form-input-text-placeholder: var(--tedi-neutral-550);
362
+ --form-slider-track: var(--general-surface-primary);
363
+ --form-slider-active-background-active: var(--tedi-blue-800);
364
+ --form-slider-active-background-default: var(--tedi-blue-600);
365
+ --form-slider-active-background-disabled: var(--tedi-neutral-400);
366
+ --form-slider-active-background-focus: var(--tedi-blue-600);
367
+ --form-slider-active-background-hover: var(--tedi-blue-700);
368
+ --form-slider-border-default: var(--tedi-neutral-500);
369
+ --form-slider-passive-background-default: var(--tedi-neutral-200);
370
+ --form-slider-range-label-text: var(--general-text-tertiary);
371
+ --form-slider-thumb-background-active: var(--general-surface-brand-tertiary);
372
+ --form-slider-thumb-background-default: var(--tedi-neutral-100);
373
+ --form-slider-thumb-background-disabled: var(--tedi-neutral-100);
374
+ --form-slider-thumb-background-focus: var(--tedi-neutral-100);
375
+ --form-slider-thumb-background-hover: var(--general-surface-brand-tertiary);
376
+ --form-slider-thumb-border-active: var(--tedi-blue-800);
377
+ --form-slider-thumb-border-default: var(--tedi-blue-600);
378
+ --form-slider-thumb-border-disabled: var(--tedi-neutral-400);
379
+ --form-slider-thumb-border-focus: var(--tedi-blue-600);
380
+ --form-slider-thumb-border-hover: var(--tedi-blue-700);
381
+ --form-toggl-outlined-background: var(--tedi-alpha-01);
382
+ --form-toggl-colored-active-active: var(--button-main-success-background-active);
383
+ --form-toggl-colored-active-default: var(--button-main-success-background-default);
384
+ --form-toggl-colored-active-hover: var(--button-main-success-background-hover);
385
+ --form-toggl-colored-active-icon: var(--general-icon-success);
386
+ --form-toggl-colored-active-icon-outlined: var(--general-icon-white);
387
+ --form-toggl-colored-active-indicator: var(--tedi-neutral-100);
388
+ --form-toggl-colored-inactive-active: var(--button-main-danger-background-active);
389
+ --form-toggl-colored-inactive-default: var(--button-main-danger-background-default);
390
+ --form-toggl-colored-inactive-hover: var(--button-main-danger-background-hover);
391
+ --form-toggl-colored-inactive-icon: var(--general-icon-danger);
392
+ --form-toggl-colored-inactive-icon-outlined: var(--general-icon-white);
393
+ --form-toggl-colored-inactive-indicator: var(--tedi-neutral-100);
394
+ --form-toggl-primary-active-active: var(--button-main-primary-background-active);
395
+ --form-toggl-primary-active-default: var(--button-main-primary-background-default);
396
+ --form-toggl-primary-active-hover: var(--button-main-primary-background-hover);
397
+ --form-toggl-primary-active-icon: var(--general-icon-brand);
398
+ --form-toggl-primary-active-icon-outlined: var(--general-icon-white);
399
+ --form-toggl-primary-active-indicator: var(--tedi-neutral-100);
400
+ --form-toggl-primary-inactive-active: var(--tedi-neutral-550);
401
+ --form-toggl-primary-inactive-default: var(--tedi-neutral-450);
402
+ --form-toggl-primary-inactive-hover: var(--tedi-neutral-500);
403
+ --form-toggl-primary-inactive-icon: var(--general-icon-tertiary);
404
+ --form-toggl-primary-inactive-icon-outlined: var(--general-icon-white);
405
+ --form-toggl-primary-inactive-indicator: var(--tedi-neutral-100);
406
+ --general-border-accent: var(--tedi-accent-600);
407
+ --general-border-brand: var(--tedi-primary-600);
408
+ --general-border-primary: var(--tedi-neutral-350);
409
+ --general-border-secondary: var(--tedi-neutral-450);
410
+ --general-border-white: var(--tedi-neutral-100);
411
+ --general-icon-accent: var(--tedi-orange-700);
412
+ --general-icon-brand: var(--tedi-primary-600);
413
+ --general-icon-brand-dark: var(--tedi-primary-700);
414
+ --general-icon-danger: var(--tedi-red-700);
415
+ --general-icon-primary: var(--tedi-neutral-850);
416
+ --general-icon-secondary: var(--tedi-neutral-700);
417
+ --general-icon-success: var(--tedi-green-700);
418
+ --general-icon-tertiary: var(--tedi-neutral-450);
419
+ --general-icon-warning: var(--tedi-yellow-700);
420
+ --general-icon-warning-dark: var(--tedi-yellow-800);
421
+ --general-icon-white: var(--tedi-neutral-100);
422
+ --general-icon-background-brand-primary: var(--general-surface-brand-primary);
423
+ --general-icon-background-brand-secondary: var(--general-surface-brand-tertiary);
424
+ --general-icon-background-primary: var(--tedi-neutral-100);
425
+ --general-icon-background-secondary: var(--tedi-alpha-white-30);
426
+ --general-status-danger-border: var(--tedi-red-500);
427
+ --general-status-danger-text: var(--tedi-red-700);
428
+ --general-status-danger-background-primary: var(--tedi-red-100);
429
+ --general-status-danger-background-secondary: var(--tedi-red-600);
430
+ --general-status-danger-background-tertiary: var(--tedi-red-700);
431
+ --general-status-info-border: var(--tedi-blue-500);
432
+ --general-status-info-text: var(--tedi-blue-700);
433
+ --general-status-info-background-dark: var(--tedi-blue-600);
434
+ --general-status-info-background-light: var(--tedi-blue-200);
435
+ --general-status-neutral-border: var(--tedi-neutral-450);
436
+ --general-status-neutral-text: var(--general-text-primary);
437
+ --general-status-neutral-background-dark: var(--tedi-neutral-450);
438
+ --general-status-neutral-background-light: var(--tedi-neutral-300);
439
+ --general-status-success-border: var(--tedi-green-500);
440
+ --general-status-success-text: var(--tedi-green-700);
441
+ --general-status-success-background-primary: var(--tedi-green-100);
442
+ --general-status-success-background-secondary: var(--tedi-green-600);
443
+ --general-status-success-background-tertiary: var(--tedi-green-700);
444
+ --general-status-warning-border: var(--tedi-yellow-600);
445
+ --general-status-warning-text: var(--tedi-yellow-800);
446
+ --general-status-warning-background-dark: var(--tedi-yellow-600);
447
+ --general-status-warning-background-light: var(--tedi-yellow-200);
448
+ --general-surface-accent: var(--tedi-accent-200);
449
+ --general-surface-active: var(--general-surface-brand-secondary);
450
+ --general-surface-brand-primary: var(--tedi-primary-600);
451
+ --general-surface-brand-quaternary: var(--tedi-primary-100);
452
+ --general-surface-brand-secondary: var(--tedi-primary-700);
453
+ --general-surface-brand-tertiary: var(--tedi-primary-200);
454
+ --general-surface-disabled: var(--tedi-neutral-400);
455
+ --general-surface-hover: var(--general-surface-brand-quaternary);
456
+ --general-surface-inverted-primary: var(--tedi-neutral-600);
457
+ --general-surface-inverted-secondary: var(--tedi-neutral-750);
458
+ --general-surface-inverted-tertiary: var(--tedi-neutral-800);
459
+ --general-surface-overlay: var(--tedi-alpha-40);
460
+ --general-surface-primary: var(--tedi-neutral-100);
461
+ --general-surface-secondary: var(--tedi-neutral-200);
462
+ --general-surface-selected: var(--general-surface-brand-primary);
463
+ --general-surface-tertiary: var(--tedi-neutral-300);
464
+ --general-text-brand: var(--tedi-primary-600);
465
+ --general-text-dark: var(--tedi-neutral-850);
466
+ --general-text-disabled: var(--tedi-neutral-450);
467
+ --general-text-primary: var(--tedi-neutral-850);
468
+ --general-text-secondary: var(--tedi-neutral-700);
469
+ --general-text-tertiary: var(--tedi-neutral-600);
470
+ --general-text-white: var(--tedi-neutral-100);
471
+ --header-background: var(--general-surface-primary);
472
+ --header-bottom-border: var(--tedi-neutral-100);
473
+ --header-modal-item-active-background: var(--dropdown-item-active-background);
474
+ --header-modal-item-active-text: var(--dropdown-item-active-text);
475
+ --header-modal-item-default-background: var(--dropdown-item-default-background);
476
+ --header-modal-item-default-text: var(--general-text-brand);
477
+ --header-modal-item-disabled-background: var(--dropdown-item-disabled-background);
478
+ --header-modal-item-disabled-text: var(--dropdown-item-disabled-text);
479
+ --header-modal-item-hover-background: var(--dropdown-item-hover-background);
480
+ --header-modal-item-hover-text: var(--dropdown-item-hover-text);
481
+ --header-popover-border-top: var(--tedi-primary-400);
482
+ --header-popover-item-active: var(--general-surface-active);
483
+ --header-popover-item-hover: var(--general-surface-hover);
484
+ --header-popover-item-selected: var(--general-surface-selected);
485
+ --link-inverted-active: var(--general-text-white);
486
+ --link-inverted-default: var(--general-text-white);
487
+ --link-inverted-focus: var(--general-text-white);
488
+ --link-inverted-hover: var(--general-text-white);
489
+ --link-primary-active: var(--tedi-primary-800);
490
+ --link-primary-default: var(--tedi-primary-600);
491
+ --link-primary-focus: var(--tedi-primary-600);
492
+ --link-primary-hover: var(--tedi-primary-700);
493
+ --loader-skeleton-color: #9293a433;
494
+ --loader-spinner-color-primary: var(--tedi-neutral-450);
495
+ --loader-spinner-color-secondary: var(--tedi-alpha-white-80);
496
+ --modal-background: var(--general-surface-primary);
497
+ --modal-border: var(--general-border-primary);
498
+ --modal-footer-border-top: var(--general-border-primary);
499
+ --modal-header-border-bottom: var(--general-border-primary);
500
+ --popover-background: var(--general-surface-primary);
501
+ --popover-border: var(--general-border-white);
502
+ --popover-text: var(--general-text-primary);
503
+ --progress-bar-background-active: var(--form-slider-active-background-default);
504
+ --progress-bar-background-passive: var(--form-slider-passive-background-default);
505
+ --progress-bar-border-default: var(--form-slider-border-default);
506
+ --progress-bar-range-label-text: var(--form-slider-range-label-text);
507
+ --side-navigation-background: var(--side-navigation-item-background-default);
508
+ --side-navigation-group-title-text: var(--tedi-primary-200);
509
+ --side-navigation-item-border: var(--tedi-primary-800);
510
+ --side-navigation-item-text: var(--general-text-white);
511
+ --side-navigation-item-background-active: var(--tedi-primary-800);
512
+ --side-navigation-item-background-arrow-button-active: var(--button-main-primary-background-active);
513
+ --side-navigation-item-background-arrow-button-hover: var(--button-main-primary-background-active);
514
+ --side-navigation-item-background-default: var(--tedi-primary-600);
515
+ --side-navigation-item-background-focus: var(--tedi-primary-600);
516
+ --side-navigation-item-background-hover: var(--tedi-primary-700);
517
+ --side-navigation-tree-brand-active: var(--tedi-primary-500);
518
+ --side-navigation-tree-brand-default: var(--tedi-primary-400);
519
+ --side-navigation-tree-brand-hover: var(--tedi-primary-500);
520
+ --side-navigation-tree-neutral-active: var(--tedi-neutral-450);
521
+ --side-navigation-tree-neutral-default: var(--tedi-neutral-350);
522
+ --side-navigation-tree-neutral-hover: var(--tedi-neutral-400);
523
+ --status-badge-background-accent: var(--tedi-orange-200);
524
+ --status-badge-background-brand: var(--general-status-info-background-light);
525
+ --status-badge-background-danger: var(--general-status-danger-background-primary);
526
+ --status-badge-background-neutral: var(--general-status-neutral-background-light);
527
+ --status-badge-background-success: var(--general-status-success-background-primary);
528
+ --status-badge-background-transparent: var(--tedi-alpha-01);
529
+ --status-badge-background-warning: var(--general-status-warning-background-light);
530
+ --status-badge-border-accent: var(--tedi-orange-600);
531
+ --status-badge-border-brand: var(--general-status-info-border);
532
+ --status-badge-border-danger: var(--general-status-danger-border);
533
+ --status-badge-border-neutral: var(--general-status-neutral-border);
534
+ --status-badge-border-success: var(--general-status-success-border);
535
+ --status-badge-border-warning: var(--general-status-warning-border);
536
+ --status-badge-icon-accent: var(--general-icon-accent);
537
+ --status-badge-icon-brand: var(--general-icon-brand-dark);
538
+ --status-badge-icon-danger: var(--general-icon-danger);
539
+ --status-badge-icon-neutral: var(--general-icon-primary);
540
+ --status-badge-icon-success: var(--general-icon-success);
541
+ --status-badge-icon-warning: var(--general-icon-warning-dark);
542
+ --status-badge-indicator-border: var(--general-surface-primary);
543
+ --status-badge-indicator-danger: var(--general-status-danger-background-secondary);
544
+ --status-badge-indicator-inactive: var(--general-status-neutral-background-dark);
545
+ --status-badge-indicator-success: var(--general-status-success-background-secondary);
546
+ --status-badge-indicator-warning: var(--general-status-warning-background-dark);
547
+ --status-badge-text-accent: var(--tedi-orange-700);
548
+ --status-badge-text-brand: var(--general-status-info-text);
549
+ --status-badge-text-danger: var(--general-status-danger-text);
550
+ --status-badge-text-neutral: var(--general-status-neutral-text);
551
+ --status-badge-text-success: var(--general-status-success-text);
552
+ --status-badge-text-warning: var(--general-status-warning-text);
553
+ --stepper-background: var(--general-surface-tertiary);
554
+ --stepper-item-horizontal-text-completed-default: var(--tedi-green-700);
555
+ --stepper-item-horizontal-text-completed-hover: var(--tedi-green-800);
556
+ --stepper-item-horizontal-text-danger-default: var(--tedi-red-700);
557
+ --stepper-item-horizontal-text-danger-hover: var(--tedi-red-800);
558
+ --stepper-item-horizontal-text-default: var(--general-text-secondary);
559
+ --stepper-item-horizontal-text-hover: var(--tedi-primary-700);
560
+ --stepper-item-horizontal-text-selected: var(--general-text-white);
561
+ --stepper-item-horizontal-type-completed-bg-active: var(--tedi-green-300);
562
+ --stepper-item-horizontal-type-completed-bg-default: var(--general-status-success-background-primary);
563
+ --stepper-item-horizontal-type-completed-bg-hover: var(--tedi-green-200);
564
+ --stepper-item-horizontal-type-danger-bg-active: var(--tedi-red-300);
565
+ --stepper-item-horizontal-type-danger-bg-default: var(--tedi-red-200);
566
+ --stepper-item-horizontal-type-danger-bg-hover: var(--tedi-red-300);
567
+ --stepper-item-horizontal-type-default-bg-active: var(--general-surface-brand-tertiary);
568
+ --stepper-item-horizontal-type-default-bg-default: var(--general-surface-tertiary);
569
+ --stepper-item-horizontal-type-default-bg-hover: var(--general-surface-tertiary);
570
+ --stepper-item-horizontal-type-selected-bg-default: var(--general-border-brand);
571
+ --stepper-item-vertical-line: var(--timeline-default);
572
+ --stepper-item-vertical-mobile-progressbar-completed: var(--general-status-success-background-tertiary);
573
+ --stepper-item-vertical-mobile-progressbar-default: var(--stepper-item-vertical-line);
574
+ --stepper-item-vertical-text-default: var(--general-text-primary);
575
+ --stepper-item-vertical-text-disabled: var(--general-text-disabled);
576
+ --stepper-item-vertical-text-hover: var(--link-primary-hover);
577
+ --stepper-item-vertical-text-selected: var(--link-primary-hover);
578
+ --stepper-step-completed-bg: var(--general-status-success-background-tertiary);
579
+ --stepper-step-completed-bg-hover: var(--tedi-green-800);
580
+ --stepper-step-danger-bg: var(--general-status-danger-background-tertiary);
581
+ --stepper-step-danger-bg-hover: var(--tedi-red-800);
582
+ --stepper-step-default-bg: var(--general-surface-primary);
583
+ --stepper-step-default-bg-hover: var(--tedi-primary-800);
584
+ --stepper-step-default-border: var(--timeline-default);
585
+ --stepper-step-default-border-hover: var(--general-border-brand);
586
+ --stepper-step-disabled-bg: var(--general-surface-disabled);
587
+ --stepper-step-disabled-border: var(--timeline-default);
588
+ --stepper-step-selected-bg: var(--general-surface-primary);
589
+ --stepper-step-selected-border: var(--general-surface-active);
590
+ --stepper-step-selected-border-hover: var(--tedi-primary-800);
591
+ --tab-background: var(--general-surface-secondary);
592
+ --tab-item-active-background: var(--general-surface-brand-tertiary);
593
+ --tab-item-active-text: var(--tedi-primary-700);
594
+ --tab-item-default-background: var(--tedi-alpha-01);
595
+ --tab-item-default-text: var(--general-text-primary);
596
+ --tab-item-hover-background: var(--general-surface-hover);
597
+ --tab-item-hover-text: var(--tedi-primary-700);
598
+ --tab-item-selected-background: var(--general-surface-primary);
599
+ --tab-item-selected-border: var(--general-surface-selected);
600
+ --tab-item-selected-text: var(--tedi-primary-600);
601
+ --table-active: var(--general-surface-brand-tertiary);
602
+ --table-border: var(--general-border-primary);
603
+ --table-border-th: var(--general-border-secondary);
604
+ --table-default: var(--general-surface-primary);
605
+ --table-hover: var(--general-surface-hover);
606
+ --table-striped: var(--general-surface-tertiary);
607
+ --tag-danger-background: var(--general-status-danger-background-primary);
608
+ --tag-danger-border: var(--tedi-red-300);
609
+ --tag-primary-background: var(--tedi-primary-100);
610
+ --tag-primary-border: var(--tedi-primary-200);
611
+ --tag-secondary-background: var(--tedi-neutral-300);
612
+ --tag-secondary-border: var(--tedi-neutral-300);
613
+ --timeline-completed: var(--general-border-accent);
614
+ --timeline-default: var(--general-border-secondary);
615
+ --tooltip-background: var(--general-surface-inverted-primary);
616
+ --tooltip-text: var(--general-text-white);
617
+ }