@tedi-design-system/core 2.2.0 → 2.4.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 (16) hide show
  1. package/_mixins.scss +25 -4
  2. package/index.css +1 -1
  3. package/package.json +10 -5
  4. package/variables/_base-variables.scss +354 -241
  5. package/variables/_color-variables-legacy.scss +1113 -0
  6. package/variables/_color-variables.scss +2 -0
  7. package/variables/_dimensional-variables.scss +1005 -903
  8. package/variables/_font-variables-legacy.scss +77 -0
  9. package/variables/_font-variables.scss +1 -0
  10. package/variables/themes/default/color-variables__dark.scss +105 -72
  11. package/variables/themes/default/color-variables__default.scss +105 -72
  12. package/variables/themes/default/font-variables__default.scss +74 -74
  13. package/variables/themes/muis/color-variables__muis.scss +640 -0
  14. package/variables/themes/muis/font-variables__muis.scss +46 -0
  15. package/variables/themes/rit/color-variables__rit.scss +105 -72
  16. package/variables/themes/rit/font-variables__rit.scss +44 -88
package/variables/themes/default/color-variables__default.scss CHANGED
@@ -90,6 +90,14 @@
90
90
  --button-group-secondary-selected-background: var(--form-checkbox-radio-card-secondary-selected-background);
91
91
  --button-group-secondary-selected-border: var(--form-checkbox-radio-card-secondary-selected-border);
92
92
  --button-group-secondary-selected-text: var(--form-checkbox-radio-card-secondary-selected-text);
93
+ --button-main-danger-background-active: var(--tedi-red-800);
94
+ --button-main-danger-background-default: var(--tedi-red-600);
95
+ --button-main-danger-background-focus: var(--tedi-red-600);
96
+ --button-main-danger-background-hover: var(--tedi-red-700);
97
+ --button-main-danger-border-active: var(--button-main-danger-background-active);
98
+ --button-main-danger-border-default: var(--button-main-danger-background-default);
99
+ --button-main-danger-border-focus: var(--button-main-danger-background-focus);
100
+ --button-main-danger-border-hover: var(--button-main-danger-background-hover);
93
101
  --button-main-danger-neutral-background-active: var(--tedi-alpha-01);
94
102
  --button-main-danger-neutral-background-default: var(--tedi-alpha-01);
95
103
  --button-main-danger-neutral-background-focus: var(--tedi-alpha-01);
@@ -106,20 +114,24 @@
106
114
  --button-main-danger-neutral-text-default: var(--tedi-red-600);
107
115
  --button-main-danger-neutral-text-focus: var(--tedi-red-600);
108
116
  --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
117
  --button-main-danger-text-default: var(--general-text-white);
118
118
  --button-main-disabled-general-background: var(--general-surface-disabled);
119
119
  --button-main-disabled-general-border: var(--button-main-disabled-general-background);
120
120
  --button-main-disabled-general-text: var(--general-text-disabled);
121
121
  --button-main-disabled-neutral-background: var(--button-main-neutral-background-default);
122
122
  --button-main-disabled-neutral-border: var(--button-main-neutral-border-default);
123
+ --button-main-neutral-background-active: var(--tedi-alpha-01);
124
+ --button-main-neutral-background-default: var(--tedi-alpha-01);
125
+ --button-main-neutral-background-focus: var(--tedi-alpha-01);
126
+ --button-main-neutral-background-hover: var(--tedi-alpha-01);
127
+ --button-main-neutral-border-active: var(--tedi-alpha-01);
128
+ --button-main-neutral-border-default: var(--tedi-alpha-01);
129
+ --button-main-neutral-border-focus: var(--tedi-neutral-100);
130
+ --button-main-neutral-border-hover: var(--tedi-alpha-01);
131
+ --button-main-neutral-icon-only-background-active: var(--button-main-secondary-background-active);
132
+ --button-main-neutral-icon-only-background-default: var(--tedi-alpha-01);
133
+ --button-main-neutral-icon-only-background-focus: var(--button-main-neutral-icon-only-background-default);
134
+ --button-main-neutral-icon-only-background-hover: var(--button-main-secondary-background-hover);
123
135
  --button-main-neutral-inverted-background-active: var(--tedi-alpha-01);
124
136
  --button-main-neutral-inverted-background-default: var(--tedi-alpha-01);
125
137
  --button-main-neutral-inverted-background-focus: var(--tedi-alpha-01);
@@ -136,22 +148,18 @@
136
148
  --button-main-neutral-inverted-text-default: var(--tedi-neutral-100);
137
149
  --button-main-neutral-inverted-text-focus: var(--tedi-neutral-100);
138
150
  --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
151
  --button-main-neutral-text-active: var(--tedi-primary-800);
152
152
  --button-main-neutral-text-default: var(--tedi-primary-600);
153
153
  --button-main-neutral-text-focus: var(--tedi-primary-600);
154
154
  --button-main-neutral-text-hover: var(--tedi-primary-700);
155
+ --button-main-primary-background-active: var(--tedi-primary-800);
156
+ --button-main-primary-background-default: var(--tedi-primary-600);
157
+ --button-main-primary-background-focus: var(--tedi-primary-600);
158
+ --button-main-primary-background-hover: var(--tedi-primary-700);
159
+ --button-main-primary-border-active: var(--button-main-primary-background-active);
160
+ --button-main-primary-border-default: var(--button-main-primary-background-default);
161
+ --button-main-primary-border-focus: var(--button-main-primary-background-focus);
162
+ --button-main-primary-border-hover: var(--button-main-primary-background-hover);
155
163
  --button-main-primary-inverted-background-active: var(--tedi-primary-300);
156
164
  --button-main-primary-inverted-background-default: var(--tedi-primary-200);
157
165
  --button-main-primary-inverted-background-focus: var(--button-main-primary-inverted-background-default);
@@ -163,17 +171,17 @@
163
171
  --button-main-primary-inverted-text-active: var(--tedi-primary-800);
164
172
  --button-main-primary-inverted-text-default: var(--tedi-primary-600);
165
173
  --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
174
  --button-main-primary-text-active: var(--general-text-white);
175
175
  --button-main-primary-text-default: var(--general-text-white);
176
176
  --button-main-primary-text-hover: var(--general-text-white);
177
+ --button-main-secondary-background-active: var(--general-surface-brand-tertiary);
178
+ --button-main-secondary-background-default: var(--tedi-neutral-100);
179
+ --button-main-secondary-background-focus: var(--tedi-neutral-100);
180
+ --button-main-secondary-background-hover: var(--general-surface-hover);
181
+ --button-main-secondary-border-active: var(--tedi-primary-700);
182
+ --button-main-secondary-border-default: var(--general-border-secondary);
183
+ --button-main-secondary-border-focus: var(--tedi-primary-600);
184
+ --button-main-secondary-border-hover: var(--tedi-primary-600);
177
185
  --button-main-secondary-inverted-background-active: var(--tedi-alpha-white-10);
178
186
  --button-main-secondary-inverted-background-default: var(--tedi-alpha-01);
179
187
  --button-main-secondary-inverted-background-focus: var(--tedi-alpha-01);
@@ -183,14 +191,6 @@
183
191
  --button-main-secondary-inverted-border-focus: var(--tedi-neutral-100);
184
192
  --button-main-secondary-inverted-border-hover: var(--tedi-neutral-100);
185
193
  --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
194
  --button-main-secondary-text-default: var(--tedi-primary-600);
195
195
  --button-main-success-background-active: var(--tedi-green-800);
196
196
  --button-main-success-background-default: var(--tedi-green-600);
@@ -211,7 +211,12 @@
211
211
  --card-background-secondary: var(--general-surface-secondary);
212
212
  --card-background-success: var(--general-status-success-background-primary);
213
213
  --card-background-tertiary: var(--general-surface-tertiary);
214
+ --card-background-tertiary-2: var(--general-surface-tertiary);
214
215
  --card-background-warning: var(--general-status-warning-background-light);
216
+ --card-body-background-distinctive-primary: var(--general-surface-brand-primary);
217
+ --card-body-background-primary: var(--general-surface-primary);
218
+ --card-body-background-secondary: var(--general-surface-secondary);
219
+ --card-border-distinctive: var(--card-body-background-distinctive-primary);
215
220
  --card-border-primary: var(--general-border-primary);
216
221
  --card-border-selected: var(--general-border-brand);
217
222
  --carousel-dot-background-active: var(--button-main-primary-background-active);
@@ -222,6 +227,7 @@
222
227
  --carousel-dot-border-focus: var(--button-main-primary-background-focus);
223
228
  --carousel-dot-border-hover: var(--button-main-primary-background-hover);
224
229
  --carousel-dot-border-selected: var(--button-main-primary-background-default);
230
+ --choice-group-active-text: var(--tedi-primary-600);
225
231
  --dropdown-item-active-background: var(--general-surface-selected);
226
232
  --dropdown-item-active-text: var(--general-text-white);
227
233
  --dropdown-item-default-background: var(--general-surface-primary);
@@ -230,10 +236,10 @@
230
236
  --dropdown-item-disabled-text: var(--general-text-disabled);
231
237
  --dropdown-item-hover-background: var(--general-surface-hover);
232
238
  --dropdown-item-hover-text: var(--tedi-primary-700);
233
- --empty-state-border: var(--card-border-primary);
234
239
  --empty-state-background-primary: var(--general-surface-primary);
235
240
  --empty-state-background-secondary: var(--general-surface-secondary);
236
241
  --empty-state-background-tertiary: var(--general-surface-tertiary);
242
+ --empty-state-border: var(--card-border-primary);
237
243
  --empty-state-icon-primary: var(--general-icon-brand);
238
244
  --empty-state-icon-secondary: var(--general-icon-tertiary);
239
245
  --file-dropzone-background-default: var(--form-input-background-default);
@@ -269,6 +275,7 @@
269
275
  --footer-background: var(--general-surface-inverted-secondary);
270
276
  --footer-bottom-background: var(--general-surface-inverted-tertiary);
271
277
  --footer-icon-background: var(--tedi-alpha-white-20);
278
+ --form-checkbox-radio-card-disabled-text: var(--button-main-disabled-general-text);
272
279
  --form-checkbox-radio-card-primary-default-background: var(--general-surface-tertiary);
273
280
  --form-checkbox-radio-card-primary-default-border-group: var(--button-main-secondary-border-default);
274
281
  --form-checkbox-radio-card-primary-default-border-separate: var(
@@ -359,7 +366,6 @@
359
366
  --form-input-text-disabled: var(--general-text-secondary);
360
367
  --form-input-text-filled: var(--general-text-primary);
361
368
  --form-input-text-placeholder: var(--tedi-neutral-550);
362
- --form-slider-track: var(--general-surface-primary);
363
369
  --form-slider-active-background-active: var(--tedi-blue-800);
364
370
  --form-slider-active-background-default: var(--tedi-blue-600);
365
371
  --form-slider-active-background-disabled: var(--tedi-neutral-400);
@@ -378,7 +384,7 @@
378
384
  --form-slider-thumb-border-disabled: var(--tedi-neutral-400);
379
385
  --form-slider-thumb-border-focus: var(--tedi-blue-600);
380
386
  --form-slider-thumb-border-hover: var(--tedi-blue-700);
381
- --form-toggl-outlined-background: var(--tedi-alpha-01);
387
+ --form-slider-track: var(--general-surface-primary);
382
388
  --form-toggl-colored-active-active: var(--button-main-success-background-active);
383
389
  --form-toggl-colored-active-default: var(--button-main-success-background-default);
384
390
  --form-toggl-colored-active-hover: var(--button-main-success-background-hover);
@@ -391,6 +397,7 @@
391
397
  --form-toggl-colored-inactive-icon: var(--general-icon-danger);
392
398
  --form-toggl-colored-inactive-icon-outlined: var(--general-icon-white);
393
399
  --form-toggl-colored-inactive-indicator: var(--tedi-neutral-100);
400
+ --form-toggl-outlined-background: var(--tedi-alpha-01);
394
401
  --form-toggl-primary-active-active: var(--button-main-primary-background-active);
395
402
  --form-toggl-primary-active-default: var(--button-main-primary-background-default);
396
403
  --form-toggl-primary-active-hover: var(--button-main-primary-background-hover);
@@ -409,6 +416,10 @@
409
416
  --general-border-secondary: var(--tedi-neutral-450);
410
417
  --general-border-white: var(--tedi-neutral-100);
411
418
  --general-icon-accent: var(--tedi-orange-700);
419
+ --general-icon-background-brand-primary: var(--general-surface-brand-primary);
420
+ --general-icon-background-brand-secondary: var(--general-surface-brand-tertiary);
421
+ --general-icon-background-primary: var(--tedi-neutral-100);
422
+ --general-icon-background-secondary: var(--tedi-alpha-white-30);
412
423
  --general-icon-brand: var(--tedi-primary-600);
413
424
  --general-icon-brand-dark: var(--tedi-primary-700);
414
425
  --general-icon-danger: var(--tedi-red-700);
@@ -419,32 +430,31 @@
419
430
  --general-icon-warning: var(--tedi-yellow-700);
420
431
  --general-icon-warning-dark: var(--tedi-yellow-800);
421
432
  --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);
433
+ --general-separator-primary: var(--general-border-primary);
428
434
  --general-status-danger-background-primary: var(--tedi-red-100);
429
435
  --general-status-danger-background-secondary: var(--tedi-red-600);
430
436
  --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);
437
+ --general-status-danger-border: var(--tedi-red-500);
438
+ --general-status-danger-text: var(--tedi-red-700);
433
439
  --general-status-info-background-dark: var(--tedi-blue-600);
434
440
  --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);
441
+ --general-status-info-border: var(--tedi-blue-500);
442
+ --general-status-info-text: var(--tedi-blue-700);
437
443
  --general-status-neutral-background-dark: var(--tedi-neutral-450);
438
444
  --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);
445
+ --general-status-neutral-border: var(--tedi-neutral-450);
446
+ --general-status-neutral-text: var(--general-text-primary);
441
447
  --general-status-success-background-primary: var(--tedi-green-100);
448
+ --general-status-success-background-primary: var(--tedi-green-200);
442
449
  --general-status-success-background-secondary: var(--tedi-green-600);
443
450
  --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);
451
+ --general-status-success-border: var(--tedi-green-500);
452
+ --general-status-success-text: var(--tedi-green-700);
446
453
  --general-status-warning-background-dark: var(--tedi-yellow-600);
447
454
  --general-status-warning-background-light: var(--tedi-yellow-200);
455
+ --general-status-warning-background-primary: var(--tedi-yellow-100);
456
+ --general-status-warning-border: var(--tedi-yellow-600);
457
+ --general-status-warning-text: var(--tedi-yellow-800);
448
458
  --general-surface-accent: var(--tedi-accent-200);
449
459
  --general-surface-active: var(--general-surface-brand-secondary);
450
460
  --general-surface-brand-primary: var(--tedi-primary-600);
@@ -460,6 +470,7 @@
460
470
  --general-surface-primary: var(--tedi-neutral-100);
461
471
  --general-surface-secondary: var(--tedi-neutral-200);
462
472
  --general-surface-selected: var(--general-surface-brand-primary);
473
+ --general-surface-success: var(--general-status-success-background-primary);
463
474
  --general-surface-tertiary: var(--tedi-neutral-300);
464
475
  --general-text-brand: var(--tedi-primary-600);
465
476
  --general-text-dark: var(--tedi-neutral-850);
@@ -467,6 +478,7 @@
467
478
  --general-text-primary: var(--tedi-neutral-850);
468
479
  --general-text-secondary: var(--tedi-neutral-700);
469
480
  --general-text-tertiary: var(--tedi-neutral-600);
481
+ --general-text-text-inverted-tehik: var(--tedi-neutral-100);
470
482
  --general-text-white: var(--tedi-neutral-100);
471
483
  --header-background: var(--general-surface-primary);
472
484
  --header-bottom-border: var(--tedi-neutral-100);
@@ -490,13 +502,50 @@
490
502
  --link-primary-default: var(--tedi-primary-600);
491
503
  --link-primary-focus: var(--tedi-primary-600);
492
504
  --link-primary-hover: var(--tedi-primary-700);
493
- --loader-skeleton-color: #9293a433;
505
+ --loader-skeleton-color: rgb(146 147 164 / 20%);
494
506
  --loader-spinner-color-primary: var(--tedi-neutral-450);
495
507
  --loader-spinner-color-secondary: var(--tedi-alpha-white-80);
496
508
  --modal-background: var(--general-surface-primary);
497
- --modal-border: var(--general-border-primary);
509
+ --modal-border-inner: var(--general-border-primary);
510
+ --modal-border-outer: var(--general-border-primary);
498
511
  --modal-footer-border-top: var(--general-border-primary);
499
- --modal-header-border-bottom: var(--general-border-primary);
512
+ --navigation-horizontal-background: var(--navigation-vertical-background);
513
+ --navigation-horizontal-group-title-text: var(--navigation-vertical-group-title-text);
514
+ --navigation-horizontal-item-background-active: var(--navigation-vertical-item-background-active);
515
+ --navigation-horizontal-item-background-default: var(--navigation-vertical-item-background-default);
516
+ --navigation-horizontal-item-background-focus: var(--navigation-vertical-item-background-focus);
517
+ --navigation-horizontal-item-background-hover: var(--navigation-vertical-item-background-hover);
518
+ --navigation-horizontal-item-background-selected: var(--navigation-vertical-item-background-active);
519
+ --navigation-horizontal-item-border: var(--navigation-horizontal-item-background-default);
520
+ --navigation-horizontal-item-text: var(--navigation-vertical-item-text);
521
+ --navigation-horizontal-submenu-background: var(--navigation-horizontal-item-background-selected);
522
+ --navigation-horizontal-submenu-item-border: var(--navigation-horizontal-item-background-default);
523
+ --navigation-horizontal-submenu-item-border-active: var(--tedi-neutral-100);
524
+ --navigation-horizontal-submenu-item-border-default: var(--tedi-primary-200);
525
+ --navigation-horizontal-submenu-item-border-focus: var(--tedi-alpha-01);
526
+ --navigation-horizontal-submenu-item-border-hover: var(--tedi-neutral-100);
527
+ --navigation-horizontal-submenu-item-border-selected: var(--tedi-neutral-100);
528
+ --navigation-horizontal-submenu-item-text-active: var(--tedi-neutral-100);
529
+ --navigation-horizontal-submenu-item-text-default: var(--tedi-primary-200);
530
+ --navigation-horizontal-submenu-item-text-focus: var(--navigation-horizontal-submenu-item-text-default);
531
+ --navigation-horizontal-submenu-item-text-hover: var(--tedi-neutral-100);
532
+ --navigation-horizontal-submenu-item-text-selected: var(--tedi-neutral-100);
533
+ --navigation-vertical-background: var(--navigation-vertical-item-background-default);
534
+ --navigation-vertical-group-title-text: var(--tedi-primary-200);
535
+ --navigation-vertical-item-background-active: var(--tedi-primary-800);
536
+ --navigation-vertical-item-background-arrow-button-active: var(--button-main-primary-background-active);
537
+ --navigation-vertical-item-background-arrow-button-hover: var(--button-main-primary-background-active);
538
+ --navigation-vertical-item-background-default: var(--tedi-primary-600);
539
+ --navigation-vertical-item-background-focus: var(--tedi-primary-600);
540
+ --navigation-vertical-item-background-hover: var(--tedi-primary-700);
541
+ --navigation-vertical-item-border: var(--tedi-primary-800);
542
+ --navigation-vertical-item-text: var(--general-text-white);
543
+ --navigation-vertical-tree-brand-active: var(--tedi-primary-500);
544
+ --navigation-vertical-tree-brand-default: var(--tedi-primary-400);
545
+ --navigation-vertical-tree-brand-hover: var(--tedi-primary-500);
546
+ --navigation-vertical-tree-neutral-active: var(--tedi-neutral-450);
547
+ --navigation-vertical-tree-neutral-default: var(--tedi-neutral-350);
548
+ --navigation-vertical-tree-neutral-hover: var(--tedi-neutral-400);
500
549
  --popover-background: var(--general-surface-primary);
501
550
  --popover-border: var(--general-border-white);
502
551
  --popover-text: var(--general-text-primary);
@@ -504,22 +553,6 @@
504
553
  --progress-bar-background-passive: var(--form-slider-passive-background-default);
505
554
  --progress-bar-border-default: var(--form-slider-border-default);
506
555
  --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
556
  --status-badge-background-accent: var(--tedi-orange-200);
524
557
  --status-badge-background-brand: var(--general-status-info-background-light);
525
558
  --status-badge-background-danger: var(--general-status-danger-background-primary);
package/variables/themes/default/font-variables__default.scss CHANGED
@@ -1,94 +1,94 @@
1
1
  .tedi-theme--default,
2
2
  :root {
3
- --body-bold-size: var(--tedi-size-02);
4
- --body-bold-line-height: var(--tedi-line-height-03);
5
- --body-bold-weight: var(--tedi-weight-03);
6
- --body-extra-small-size: var(--tedi-size-00);
7
- --body-extra-small-line-height: var(--tedi-line-height-00);
8
- --body-extra-small-weight: var(--tedi-weight-02);
9
- --body-extra-small-bold-size: var(--tedi-size-00);
10
- --body-extra-small-bold-line-height: var(--tedi-line-height-00);
11
- --body-extra-small-bold-weight: var(--tedi-weight-03);
3
+ --family-default: var(--tedi-family-roboto);
4
+ --family-heading: var(--tedi-family-roboto);
5
+ --body-regular-weight: var(--tedi-weight-02);
12
6
  --body-regular-size: var(--tedi-size-02);
13
7
  --body-regular-line-height: var(--tedi-line-height-03);
14
- --body-regular-weight: var(--tedi-weight-02);
15
- --body-small-bold-size: var(--tedi-size-01);
16
- --body-small-bold-line-height: var(--tedi-line-height-01);
17
- --body-small-bold-weight: var(--tedi-weight-03);
18
- --body-small-regular-size: var(--tedi-size-01);
19
- --body-small-regular-line-height: var(--tedi-line-height-01);
20
- --body-small-regular-weight: var(--tedi-weight-02);
21
- --heading-h1-size: var(--tedi-size-09);
22
- --heading-h1-line-height: var(--tedi-line-height-10);
8
+ --heading-subtitle-regular-weight: var(--tedi-weight-03);
9
+ --heading-subtitle-regular-size: var(--tedi-size-02);
10
+ --heading-subtitle-regular-line-height: var(--tedi-line-height-03);
23
11
  --heading-h1-weight: var(--tedi-weight-01);
12
+ --heading-h2-weight: var(--tedi-weight-02);
24
13
  --heading-h2-size: var(--tedi-size-07);
25
14
  --heading-h2-line-height: var(--tedi-line-height-08);
26
- --heading-h2-weight: var(--tedi-weight-02);
15
+ --heading-h3-weight: var(--tedi-weight-02);
27
16
  --heading-h3-size: var(--tedi-size-06);
28
17
  --heading-h3-line-height: var(--tedi-line-height-07);
29
- --heading-h3-weight: var(--tedi-weight-02);
18
+ --heading-h4-weight: var(--tedi-weight-02);
30
19
  --heading-h4-size: var(--tedi-size-04);
31
20
  --heading-h4-line-height: var(--tedi-line-height-04);
32
- --heading-h4-weight: var(--tedi-weight-02);
21
+ --heading-h5-weight: var(--tedi-weight-02);
33
22
  --heading-h5-size: var(--tedi-size-03);
34
23
  --heading-h5-line-height: var(--tedi-line-height-03);
35
- --heading-h5-weight: var(--tedi-weight-02);
24
+ --heading-h6-weight: var(--tedi-weight-03);
36
25
  --heading-h6-size: var(--tedi-size-02);
37
26
  --heading-h6-line-height: var(--tedi-line-height-03);
38
- --heading-h6-weight: var(--tedi-weight-03);
39
- --heading-subtitle-regular-size: var(--tedi-size-02);
40
- --heading-subtitle-regular-line-height: var(--tedi-line-height-03);
41
- --heading-subtitle-regular-weight: var(--tedi-weight-03);
27
+ --heading-h1-size: var(--tedi-size-09);
28
+ --heading-h1-line-height: var(--tedi-line-height-10);
29
+ --body-bold-weight: var(--tedi-weight-03);
30
+ --body-bold-size: var(--tedi-size-02);
31
+ --body-bold-line-height: var(--tedi-line-height-03);
32
+ --body-small-regular-weight: var(--tedi-weight-02);
33
+ --body-small-regular-size: var(--tedi-size-01);
34
+ --body-small-regular-line-height: var(--tedi-line-height-01);
35
+ --body-small-bold-weight: var(--tedi-weight-03);
36
+ --body-extra-small-bold-size: var(--tedi-size-00);
37
+ --body-extra-small-bold-weight: var(--tedi-weight-03);
38
+ --body-extra-small-bold-line-height: var(--tedi-line-height-00);
39
+ --body-small-bold-size: var(--tedi-size-01);
40
+ --body-small-bold-line-height: var(--tedi-line-height-01);
41
+ --heading-subtitle-small-weight: var(--tedi-weight-02);
42
42
  --heading-subtitle-small-size: var(--tedi-size-01);
43
43
  --heading-subtitle-small-line-height: var(--tedi-line-height-01);
44
- --heading-subtitle-small-weight: var(--tedi-weight-02);
44
+ --body-extra-small-size: var(--tedi-size-00);
45
+ --body-extra-small-weight: var(--tedi-weight-02);
46
+ --body-extra-small-line-height: var(--tedi-line-height-00);
47
+
48
+ @media (width <= 48rem) {
45
49
  --family-default: var(--tedi-family-roboto);
46
50
  --family-heading: var(--tedi-family-roboto);
47
-
48
- @media (width >= 48rem) {
49
- --body-bold-size: var(--tedi-size-02);
50
- --body-bold-line-height: var(--tedi-line-height-03);
51
- --body-bold-weight: var(--tedi-weight-03);
52
- --body-extra-small-size: var(--tedi-size-00);
53
- --body-extra-small-line-height: var(--tedi-line-height-00);
54
- --body-extra-small-weight: var(--tedi-weight-02);
55
- --body-extra-small-bold-size: var(--tedi-size-00);
56
- --body-extra-small-bold-line-height: var(--tedi-line-height-00);
57
- --body-extra-small-bold-weight: var(--tedi-weight-03);
58
- --body-regular-size: var(--tedi-size-02);
59
- --body-regular-line-height: var(--tedi-line-height-03);
60
- --body-regular-weight: var(--tedi-weight-02);
61
- --body-small-bold-size: var(--tedi-size-01);
62
- --body-small-bold-line-height: var(--tedi-line-height-01);
63
- --body-small-bold-weight: var(--tedi-weight-03);
64
- --body-small-regular-size: var(--tedi-size-01);
65
- --body-small-regular-line-height: var(--tedi-line-height-01);
66
- --body-small-regular-weight: var(--tedi-weight-02);
67
- --heading-h1-size: var(--tedi-size-06);
68
- --heading-h1-line-height: var(--tedi-line-height-07);
69
- --heading-h1-weight: var(--tedi-weight-01);
70
- --heading-h2-size: var(--tedi-size-05);
71
- --heading-h2-line-height: var(--tedi-line-height-05);
72
- --heading-h2-weight: var(--tedi-weight-02);
73
- --heading-h3-size: var(--tedi-size-04);
74
- --heading-h3-line-height: var(--tedi-line-height-04);
75
- --heading-h3-weight: var(--tedi-weight-02);
76
- --heading-h4-size: var(--tedi-size-03);
77
- --heading-h4-line-height: var(--tedi-line-height-03);
78
- --heading-h4-weight: var(--tedi-weight-02);
79
- --heading-h5-size: var(--tedi-size-02);
80
- --heading-h5-line-height: var(--tedi-line-height-03);
81
- --heading-h5-weight: var(--tedi-weight-03);
82
- --heading-h6-size: var(--tedi-size-02);
83
- --heading-h6-line-height: var(--tedi-line-height-03);
84
- --heading-h6-weight: var(--tedi-weight-03);
85
- --heading-subtitle-regular-size: var(--tedi-size-02);
86
- --heading-subtitle-regular-line-height: var(--tedi-line-height-03);
87
- --heading-subtitle-regular-weight: var(--tedi-weight-03);
88
- --heading-subtitle-small-size: var(--tedi-size-01);
89
- --heading-subtitle-small-line-height: var(--tedi-line-height-01);
90
- --heading-subtitle-small-weight: var(--tedi-weight-02);
91
- --family-default: var(--tedi-family-roboto);
92
- --family-heading: var(--tedi-family-roboto);
93
- }
51
+ --body-regular-weight: var(--tedi-weight-02);
52
+ --body-regular-size: var(--tedi-size-02);
53
+ --body-regular-line-height: var(--tedi-line-height-03);
54
+ --heading-subtitle-regular-weight: var(--tedi-weight-03);
55
+ --heading-subtitle-regular-size: var(--tedi-size-02);
56
+ --heading-subtitle-regular-line-height: var(--tedi-line-height-03);
57
+ --heading-h1-weight: var(--tedi-weight-01);
58
+ --heading-h2-weight: var(--tedi-weight-02);
59
+ --heading-h2-size: var(--tedi-size-05);
60
+ --heading-h2-line-height: var(--tedi-line-height-05);
61
+ --heading-h3-weight: var(--tedi-weight-02);
62
+ --heading-h3-size: var(--tedi-size-04);
63
+ --heading-h3-line-height: var(--tedi-line-height-04);
64
+ --heading-h4-weight: var(--tedi-weight-02);
65
+ --heading-h4-size: var(--tedi-size-03);
66
+ --heading-h4-line-height: var(--tedi-line-height-03);
67
+ --heading-h5-weight: var(--tedi-weight-03);
68
+ --heading-h5-size: var(--tedi-size-02);
69
+ --heading-h5-line-height: var(--tedi-line-height-03);
70
+ --heading-h6-weight: var(--tedi-weight-03);
71
+ --heading-h6-size: var(--tedi-size-02);
72
+ --heading-h6-line-height: var(--tedi-line-height-03);
73
+ --heading-h1-size: var(--tedi-size-06);
74
+ --heading-h1-line-height: var(--tedi-line-height-07);
75
+ --body-bold-weight: var(--tedi-weight-03);
76
+ --body-bold-size: var(--tedi-size-02);
77
+ --body-bold-line-height: var(--tedi-line-height-03);
78
+ --body-small-regular-weight: var(--tedi-weight-02);
79
+ --body-small-regular-size: var(--tedi-size-01);
80
+ --body-small-regular-line-height: var(--tedi-line-height-01);
81
+ --body-small-bold-weight: var(--tedi-weight-03);
82
+ --body-extra-small-bold-size: var(--tedi-size-00);
83
+ --body-extra-small-bold-weight: var(--tedi-weight-03);
84
+ --body-extra-small-bold-line-height: var(--tedi-line-height-00);
85
+ --body-small-bold-size: var(--tedi-size-01);
86
+ --body-small-bold-line-height: var(--tedi-line-height-01);
87
+ --heading-subtitle-small-weight: var(--tedi-weight-02);
88
+ --heading-subtitle-small-size: var(--tedi-size-01);
89
+ --heading-subtitle-small-line-height: var(--tedi-line-height-01);
90
+ --body-extra-small-size: var(--tedi-size-00);
91
+ --body-extra-small-weight: var(--tedi-weight-02);
92
+ --body-extra-small-line-height: var(--tedi-line-height-00);
93
+ }
94
94
  }