@tedi-design-system/core 3.0.1 → 3.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 (10) hide show
  1. package/index.css +1 -1
  2. package/package.json +6 -6
  3. package/variables/_dimensional-variables.scss +119 -59
  4. package/variables/themes/default/color-variables__dark.scss +16 -12
  5. package/variables/themes/default/color-variables__default.scss +16 -12
  6. package/variables/themes/default/font-variables__default.scss +8 -0
  7. package/variables/themes/muis/color-variables__muis.scss +16 -12
  8. package/variables/themes/muis/font-variables__muis.scss +4 -0
  9. package/variables/themes/rit/color-variables__rit.scss +16 -12
  10. package/variables/themes/rit/font-variables__rit.scss +4 -0
package/package.json CHANGED
@@ -1,9 +1,9 @@
1
1
  {
2
2
  "name": "@tedi-design-system/core",
3
- "version": "3.0.1",
3
+ "version": "3.2.0",
4
4
  "main": "src/index.scss",
5
5
  "scripts": {
6
- "prepare": "husky",
6
+ "prepare": "husky || true",
7
7
  "build": "rm -rf dist && mkdir dist && cp -a src/* dist/ && sass src/index.scss dist/index.css --style=compressed --no-source-map && replace-in-file //fonts//g \"./fonts/\" dist/index.css --isRegex && mkdir dist/fonts && cp -a public/fonts/* dist/fonts/ && cp README.md dist/ && cp package.json dist/",
8
8
  "release": "npx semantic-release",
9
9
  "lint": "npx stylelint \"src/**/*.scss\" --fix",
@@ -14,7 +14,7 @@
14
14
  },
15
15
  "repository": {
16
16
  "type": "git",
17
- "url": "https://github.com/TEDI-Design-System/core.git"
17
+ "url": "git+https://github.com/TEDI-Design-System/core.git"
18
18
  },
19
19
  "engines": {
20
20
  "npm": ">=8.0.0",
@@ -22,7 +22,7 @@
22
22
  },
23
23
  "devDependencies": {
24
24
  "@commitlint/cli": "^20.3.0",
25
- "@commitlint/config-conventional": "^20.3.0",
25
+ "@commitlint/config-conventional": "^20.4.0",
26
26
  "@semantic-release/changelog": "^6.0.3",
27
27
  "@semantic-release/commit-analyzer": "^13.0.0",
28
28
  "@semantic-release/git": "^10.0.1",
@@ -31,12 +31,12 @@
31
31
  "husky": "^9.0.11",
32
32
  "lint-staged": "^16.2.7",
33
33
  "node-fetch": "^3.3.2",
34
- "prettier": "^3.7.4",
34
+ "prettier": "^3.8.1",
35
35
  "replace-in-file": "^8.4.0",
36
36
  "sass": "^1.97.1",
37
37
  "semantic-release": "^24.2.7",
38
38
  "stylelint": "^16.26.1",
39
- "stylelint-config-recess-order": "^7.4.0",
39
+ "stylelint-config-recess-order": "^7.6.0",
40
40
  "stylelint-config-standard-scss": "^16.0.0",
41
41
  "stylelint-declaration-strict-value": "^1.9.2",
42
42
  "ts-node": "^10.9.2",
package/variables/_dimensional-variables.scss CHANGED
@@ -93,17 +93,21 @@
93
93
  --empty-state-padding: var(--dimensions-13);
94
94
  --empty-state-padding-sm: var(--dimensions-10);
95
95
  --empty-state-radius: var(--radius-02-default);
96
+ --feedback-max-content: 564px;
97
+ --feedback-number-indicator-container: var(--dimensions-19);
98
+ --feedback-star-inner-spacing: var(--layout-grid-gutters-02);
99
+ --feedback-star-size: var(--icon-05);
96
100
  --file-dropzone-padding-x: var(--dimensions-13);
97
101
  --file-dropzone-padding-y: var(--dimensions-13);
98
102
  --filter-default-inner-spacing: var(--dimensions-02);
99
103
  --filter-default-padding-x: var(--dimensions-04);
100
104
  --filter-default-padding-y: var(--dimensions-03);
101
- --filter-sm-inner-spacing: var(--dimensions-02);
102
- --filter-sm-padding-x: var(--dimensions-03);
103
- --filter-sm-padding-y: var(--dimensions-02);
105
+ --filter-lg-inner-spacing: var(--form-checkbox-radio-card-inner-spacing);
106
+ --filter-lg-padding-x: var(--form-checkbox-radio-card-checkbox-padding-x);
107
+ --filter-lg-padding-y: var(--form-checkbox-radio-card-checkbox-padding-y);
104
108
  --form-calendar-date-width: 40px;
105
109
  --form-checkbox-radio-card-checkbox-icon-padding-y: var(--dimensions-04);
106
- --form-checkbox-radio-card-checkbox-indicator-padding-y: var(--dimensions-07);
110
+ --form-checkbox-radio-card-checkbox-indicator-padding-y: 11px;
107
111
  --form-checkbox-radio-card-checkbox-padding-x: var(--form-checkbox-radio-card-checkbox-padding-y);
108
112
  --form-checkbox-radio-card-checkbox-padding-y: var(--dimensions-05);
109
113
  --form-checkbox-radio-card-gutter: var(--button-gutter-x-sm);
@@ -211,22 +215,39 @@
211
215
  --layout-grid-gutters-24: var(--dimensions-13);
212
216
  --layout-grid-gutters-32: var(--dimensions-14);
213
217
  --layout-grid-gutters-48: var(--dimensions-18);
218
+ --layout-header-desktop-and-tablet-only: true;
219
+ --layout-header-desktop-only: true;
220
+ --layout-header-height: 84px;
214
221
  --layout-header-height: 84px;
215
222
  --layout-header-items-center-gutter-x: var(--dimensions-18);
223
+ --layout-header-items-menu-item-padding: var(--dimensions-05);
216
224
  --layout-header-items-right-gutter-x: var(--dimensions-13);
217
- --layout-header-min-height: 84px;
218
- --layout-header-mobile-button-size: var(--dimensions-19);
225
+ --layout-header-logo-font-size: 0.8125rem;
226
+ --layout-header-logo-inner-spacing: 11px;
227
+ --layout-header-logo-line-height: 14px;
228
+ --layout-header-logo-size: 51px;
229
+ --layout-header-mobile-and-tablet-only: 0;
230
+ --layout-header-mobile-button-min-size: var(--dimensions-19);
231
+ --layout-header-mobile-button-size: var(--dimensions-20);
232
+ --layout-header-mobile-only: 0;
219
233
  --layout-header-modal-item-padding: var(--dimensions-10);
220
234
  --layout-header-padding-left: var(--dimensions-13);
221
235
  --layout-header-padding-right: var(--dimensions-13);
222
236
  --layout-header-padding-y: var(--dimensions-10);
223
237
  --layout-header-padding-y-sm: var(--dimensions-07);
224
238
  --layout-header-profile-icon: var(--icon-06);
239
+ --layout-header-separator-padding-y: 0;
240
+ --layout-header-tablet-only: 0;
241
+ --layout-header-top-header-padding-x: var(--dimensions-13);
242
+ --layout-header-top-header-padding-y: var(--dimensions-00);
225
243
  --layout-page-spacing-top: var(--dimensions-13);
226
244
  --layout-page-spacing-x: 40px;
227
245
  --layout-to-be-deleted-outer-container: 1520px;
228
- --link-icon-padding-top: var(--dimensions-02);
229
- --link-icon-padding-y: var(--dimensions-03);
246
+ --link-icon-default: var(--icon-03);
247
+ --link-icon-padding-y: 3px;
248
+ --link-icon-padding-y-sm: var(--dimensions-03);
249
+ --link-icon-responsive: var(--icon-02);
250
+ --link-icon-small: var(--icon-02);
230
251
  --link-inner-spacing-x: var(--dimensions-03);
231
252
  --link-link-sm-height: var(--body-regular-line-height);
232
253
  --list-definitions-gutter-y: var(--dimensions-03);
@@ -306,10 +327,10 @@
306
327
  --progress-bar-height: var(--form-slider-height);
307
328
  --progress-bar-height-sm: var(--dimensions-03);
308
329
  --progress-bar-radius: var(--form-slider-radius);
309
- --separator-dotted-dot-lg: 15px;
310
- --separator-dotted-dot-md: 9px;
311
- --separator-dotted-dot-sm: var(--dimensions-03);
312
- --separator-dotted-dot-xs: var(--dimensions-02);
330
+ --separator-dot-size-lg: 15px;
331
+ --separator-dot-size-md: 9px;
332
+ --separator-dot-size-sm: var(--dimensions-03);
333
+ --separator-dot-size-xs: var(--dimensions-02);
313
334
  --separator-dotted-line-width: var(--dimensions-01);
314
335
  --separator-spacing-x-01: var(--dimensions-04);
315
336
  --separator-spacing-x-02: var(--dimensions-07);
@@ -318,12 +339,11 @@
318
339
  --separator-spacing-y-02: var(--dimensions-05);
319
340
  --separator-spacing-y-03: var(--dimensions-10);
320
341
  --separator-spacing-y-04: var(--dimensions-13);
321
- --separator-top-spacing-large-dot-lg: 21px;
322
- --separator-top-spacing-large-dot-md: 15.5px;
323
- --separator-top-spacing-large-dot-sm: var(--dimensions-03);
324
- --separator-top-spacing-small-dot-lg: var(--dimensions-13);
325
- --separator-top-spacing-small-dot-md: var(--dimensions-06);
326
- --separator-top-spacing-small-dot-sm: var(--dimensions-05);
342
+ --separator-thickness-lg: var(--dimensions-02);
343
+ --separator-thickness-md: var(--dimensions-01);
344
+ --separator-thickness-sm: 0.5px;
345
+ --separator-thickness-xs: 0.25px;
346
+ --separator-top-spacing-large-dot-sm: 4px;
327
347
  --status-indicator-inner-spacing: var(--dimensions-05);
328
348
  --status-indicator-lg: var(--dimensions-07);
329
349
  --status-indicator-sm: var(--dimensions-05);
@@ -345,7 +365,7 @@
345
365
  --stepper-item-vertical-padding-y-sm: 2px;
346
366
  --stepper-item-vertical-step-size-lg: 24px;
347
367
  --stepper-item-vertical-step-size-md: 16px;
348
- --stepper-item-vertical-step-size-sm: var(--separator-dotted-dot-md);
368
+ --stepper-item-vertical-step-size-sm: var(--separator-dot-size-md);
349
369
  --stepper-item-vertical-sub-line-bottom: 9px;
350
370
  --stepper-item-vertical-sub-line-top: 9.5px;
351
371
  --tab-icon: 18px;
@@ -491,17 +511,21 @@
491
511
  --empty-state-padding: var(--dimensions-13);
492
512
  --empty-state-padding-sm: var(--dimensions-10);
493
513
  --empty-state-radius: var(--radius-02-default);
514
+ --feedback-max-content: 564px;
515
+ --feedback-number-indicator-container: var(--dimensions-19);
516
+ --feedback-star-inner-spacing: var(--layout-grid-gutters-02);
517
+ --feedback-star-size: var(--icon-06);
494
518
  --file-dropzone-padding-x: var(--dimensions-13);
495
519
  --file-dropzone-padding-y: var(--dimensions-13);
496
520
  --filter-default-inner-spacing: var(--dimensions-02);
497
521
  --filter-default-padding-x: var(--dimensions-04);
498
522
  --filter-default-padding-y: var(--dimensions-03);
499
- --filter-sm-inner-spacing: var(--dimensions-02);
500
- --filter-sm-padding-x: var(--dimensions-03);
501
- --filter-sm-padding-y: var(--dimensions-02);
523
+ --filter-lg-inner-spacing: var(--form-checkbox-radio-card-inner-spacing);
524
+ --filter-lg-padding-x: var(--form-checkbox-radio-card-checkbox-padding-x);
525
+ --filter-lg-padding-y: var(--form-checkbox-radio-card-checkbox-padding-y);
502
526
  --form-calendar-date-width: 40px;
503
527
  --form-checkbox-radio-card-checkbox-icon-padding-y: var(--dimensions-04);
504
- --form-checkbox-radio-card-checkbox-indicator-padding-y: var(--dimensions-07);
528
+ --form-checkbox-radio-card-checkbox-indicator-padding-y: 11px;
505
529
  --form-checkbox-radio-card-checkbox-padding-x: var(--form-checkbox-radio-card-checkbox-padding-y);
506
530
  --form-checkbox-radio-card-checkbox-padding-y: var(--dimensions-05);
507
531
  --form-checkbox-radio-card-gutter: var(--button-gutter-x-sm);
@@ -609,22 +633,39 @@
609
633
  --layout-grid-gutters-24: var(--dimensions-13);
610
634
  --layout-grid-gutters-32: var(--dimensions-14);
611
635
  --layout-grid-gutters-48: var(--dimensions-18);
636
+ --layout-header-desktop-and-tablet-only: true;
637
+ --layout-header-desktop-only: 0;
638
+ --layout-header-height: 56px;
612
639
  --layout-header-height: 56px;
613
640
  --layout-header-items-center-gutter-x: var(--dimensions-13);
641
+ --layout-header-items-menu-item-padding: var(--dimensions-05);
614
642
  --layout-header-items-right-gutter-x: var(--dimensions-10);
615
- --layout-header-min-height: 56px;
616
- --layout-header-mobile-button-size: var(--dimensions-19);
643
+ --layout-header-logo-font-size: 0.5rem;
644
+ --layout-header-logo-inner-spacing: 6.9px;
645
+ --layout-header-logo-line-height: 8.8px;
646
+ --layout-header-logo-size: 32px;
647
+ --layout-header-mobile-and-tablet-only: true;
648
+ --layout-header-mobile-button-min-size: var(--dimensions-19);
649
+ --layout-header-mobile-button-size: var(--dimensions-20);
650
+ --layout-header-mobile-only: 0;
617
651
  --layout-header-modal-item-padding: var(--dimensions-10);
618
- --layout-header-padding-left: var(--dimensions-13);
619
- --layout-header-padding-right: var(--dimensions-13);
620
- --layout-header-padding-y: var(--dimensions-10);
652
+ --layout-header-padding-left: var(--dimensions-10);
653
+ --layout-header-padding-right: var(--dimensions-10);
654
+ --layout-header-padding-y: 0;
621
655
  --layout-header-padding-y-sm: var(--dimensions-07);
622
656
  --layout-header-profile-icon: var(--icon-06);
657
+ --layout-header-separator-padding-y: var(--dimensions-03);
658
+ --layout-header-tablet-only: true;
659
+ --layout-header-top-header-padding-x: var(--dimensions-10);
660
+ --layout-header-top-header-padding-y: var(--dimensions-00);
623
661
  --layout-page-spacing-top: var(--dimensions-13);
624
662
  --layout-page-spacing-x: 24px;
625
663
  --layout-to-be-deleted-outer-container: 1520px;
626
- --link-icon-padding-top: var(--dimensions-02);
627
- --link-icon-padding-y: var(--dimensions-03);
664
+ --link-icon-default: var(--icon-03);
665
+ --link-icon-padding-y: 3px;
666
+ --link-icon-padding-y-sm: var(--dimensions-03);
667
+ --link-icon-responsive: var(--icon-03);
668
+ --link-icon-small: var(--icon-02);
628
669
  --link-inner-spacing-x: var(--dimensions-03);
629
670
  --link-link-sm-height: var(--body-regular-line-height);
630
671
  --list-definitions-gutter-y: var(--dimensions-03);
@@ -704,10 +745,10 @@
704
745
  --progress-bar-height: var(--form-slider-height);
705
746
  --progress-bar-height-sm: var(--dimensions-03);
706
747
  --progress-bar-radius: var(--form-slider-radius);
707
- --separator-dotted-dot-lg: 15px;
708
- --separator-dotted-dot-md: 9px;
709
- --separator-dotted-dot-sm: var(--dimensions-03);
710
- --separator-dotted-dot-xs: var(--dimensions-02);
748
+ --separator-dot-size-lg: 15px;
749
+ --separator-dot-size-md: 9px;
750
+ --separator-dot-size-sm: var(--dimensions-03);
751
+ --separator-dot-size-xs: var(--dimensions-02);
711
752
  --separator-dotted-line-width: var(--dimensions-01);
712
753
  --separator-spacing-x-01: var(--dimensions-04);
713
754
  --separator-spacing-x-02: var(--dimensions-07);
@@ -716,12 +757,11 @@
716
757
  --separator-spacing-y-02: var(--dimensions-05);
717
758
  --separator-spacing-y-03: var(--dimensions-10);
718
759
  --separator-spacing-y-04: var(--dimensions-13);
719
- --separator-top-spacing-large-dot-lg: 21px;
720
- --separator-top-spacing-large-dot-md: 15.5px;
760
+ --separator-thickness-lg: var(--dimensions-02);
761
+ --separator-thickness-md: var(--dimensions-01);
762
+ --separator-thickness-sm: 0.5px;
763
+ --separator-thickness-xs: 0.25px;
721
764
  --separator-top-spacing-large-dot-sm: var(--dimensions-03);
722
- --separator-top-spacing-small-dot-lg: var(--dimensions-13);
723
- --separator-top-spacing-small-dot-md: var(--dimensions-06);
724
- --separator-top-spacing-small-dot-sm: var(--dimensions-05);
725
765
  --status-indicator-inner-spacing: var(--dimensions-05);
726
766
  --status-indicator-lg: var(--dimensions-07);
727
767
  --status-indicator-sm: var(--dimensions-05);
@@ -743,7 +783,7 @@
743
783
  --stepper-item-vertical-padding-y-sm: 2px;
744
784
  --stepper-item-vertical-step-size-lg: 24px;
745
785
  --stepper-item-vertical-step-size-md: 16px;
746
- --stepper-item-vertical-step-size-sm: var(--separator-dotted-dot-md);
786
+ --stepper-item-vertical-step-size-sm: var(--separator-dot-size-md);
747
787
  --stepper-item-vertical-sub-line-bottom: 9px;
748
788
  --stepper-item-vertical-sub-line-top: 9.5px;
749
789
  --tab-icon: 18px;
@@ -890,17 +930,21 @@
890
930
  --empty-state-padding: var(--dimensions-10);
891
931
  --empty-state-padding-sm: var(--dimensions-10);
892
932
  --empty-state-radius: var(--radius-02-default);
933
+ --feedback-max-content: 564px;
934
+ --feedback-number-indicator-container: var(--dimensions-19);
935
+ --feedback-star-inner-spacing: var(--layout-grid-gutters-04);
936
+ --feedback-star-size: var(--icon-06);
893
937
  --file-dropzone-padding-x: var(--dimensions-10);
894
938
  --file-dropzone-padding-y: var(--dimensions-13);
895
939
  --filter-default-inner-spacing: var(--dimensions-02);
896
940
  --filter-default-padding-x: var(--dimensions-04);
897
941
  --filter-default-padding-y: var(--dimensions-03);
898
- --filter-sm-inner-spacing: var(--dimensions-02);
899
- --filter-sm-padding-x: var(--dimensions-03);
900
- --filter-sm-padding-y: var(--dimensions-02);
942
+ --filter-lg-inner-spacing: var(--form-checkbox-radio-card-inner-spacing);
943
+ --filter-lg-padding-x: var(--form-checkbox-radio-card-checkbox-padding-x);
944
+ --filter-lg-padding-y: var(--form-checkbox-radio-card-checkbox-padding-y);
901
945
  --form-calendar-date-width: 40px;
902
946
  --form-checkbox-radio-card-checkbox-icon-padding-y: var(--dimensions-04);
903
- --form-checkbox-radio-card-checkbox-indicator-padding-y: var(--dimensions-07);
947
+ --form-checkbox-radio-card-checkbox-indicator-padding-y: 11px;
904
948
  --form-checkbox-radio-card-checkbox-padding-x: var(--form-checkbox-radio-card-checkbox-padding-y);
905
949
  --form-checkbox-radio-card-checkbox-padding-y: var(--dimensions-05);
906
950
  --form-checkbox-radio-card-gutter: var(--button-gutter-x-sm);
@@ -1008,22 +1052,39 @@
1008
1052
  --layout-grid-gutters-24: var(--dimensions-13);
1009
1053
  --layout-grid-gutters-32: var(--dimensions-14);
1010
1054
  --layout-grid-gutters-48: var(--dimensions-18);
1055
+ --layout-header-desktop-and-tablet-only: 0;
1056
+ --layout-header-desktop-only: 0;
1057
+ --layout-header-height: 56px;
1011
1058
  --layout-header-height: 56px;
1012
1059
  --layout-header-items-center-gutter-x: var(--dimensions-07);
1013
- --layout-header-items-right-gutter-x: var(--dimensions-07);
1014
- --layout-header-min-height: 56px;
1015
- --layout-header-mobile-button-size: var(--dimensions-19);
1060
+ --layout-header-items-menu-item-padding: var(--dimensions-05);
1061
+ --layout-header-items-right-gutter-x: 0;
1062
+ --layout-header-logo-font-size: 0.5rem;
1063
+ --layout-header-logo-inner-spacing: 6.9px;
1064
+ --layout-header-logo-line-height: 8.8px;
1065
+ --layout-header-logo-size: 32px;
1066
+ --layout-header-mobile-and-tablet-only: true;
1067
+ --layout-header-mobile-button-min-size: var(--dimensions-19);
1068
+ --layout-header-mobile-button-size: var(--dimensions-20);
1069
+ --layout-header-mobile-only: true;
1016
1070
  --layout-header-modal-item-padding: var(--dimensions-10);
1017
1071
  --layout-header-padding-left: var(--dimensions-06);
1018
1072
  --layout-header-padding-right: 0;
1019
1073
  --layout-header-padding-y: 0;
1020
1074
  --layout-header-padding-y-sm: 0;
1021
1075
  --layout-header-profile-icon: var(--icon-05);
1076
+ --layout-header-separator-padding-y: 0;
1077
+ --layout-header-tablet-only: 0;
1078
+ --layout-header-top-header-padding-x: var(--dimensions-06);
1079
+ --layout-header-top-header-padding-y: var(--dimensions-03);
1022
1080
  --layout-page-spacing-top: var(--dimensions-13);
1023
1081
  --layout-page-spacing-x: 8px;
1024
1082
  --layout-to-be-deleted-outer-container: 1520px;
1025
- --link-icon-padding-top: var(--dimensions-02);
1026
- --link-icon-padding-y: var(--dimensions-03);
1083
+ --link-icon-default: var(--icon-03);
1084
+ --link-icon-padding-y: 3px;
1085
+ --link-icon-padding-y-sm: 3px;
1086
+ --link-icon-responsive: var(--icon-03);
1087
+ --link-icon-small: var(--icon-02);
1027
1088
  --link-inner-spacing-x: var(--dimensions-03);
1028
1089
  --link-link-sm-height: var(--body-regular-line-height);
1029
1090
  --list-definitions-gutter-y: var(--dimensions-03);
@@ -1103,10 +1164,10 @@
1103
1164
  --progress-bar-height: var(--form-slider-height);
1104
1165
  --progress-bar-height-sm: var(--dimensions-03);
1105
1166
  --progress-bar-radius: var(--form-slider-radius);
1106
- --separator-dotted-dot-lg: 15px;
1107
- --separator-dotted-dot-md: 9px;
1108
- --separator-dotted-dot-sm: var(--dimensions-03);
1109
- --separator-dotted-dot-xs: var(--dimensions-02);
1167
+ --separator-dot-size-lg: 15px;
1168
+ --separator-dot-size-md: 9px;
1169
+ --separator-dot-size-sm: var(--dimensions-03);
1170
+ --separator-dot-size-xs: var(--dimensions-02);
1110
1171
  --separator-dotted-line-width: var(--dimensions-01);
1111
1172
  --separator-spacing-x-01: var(--dimensions-04);
1112
1173
  --separator-spacing-x-02: var(--dimensions-07);
@@ -1115,12 +1176,11 @@
1115
1176
  --separator-spacing-y-02: var(--dimensions-05);
1116
1177
  --separator-spacing-y-03: var(--dimensions-10);
1117
1178
  --separator-spacing-y-04: var(--dimensions-13);
1118
- --separator-top-spacing-large-dot-lg: 21px;
1119
- --separator-top-spacing-large-dot-md: 15.5px;
1179
+ --separator-thickness-lg: var(--dimensions-02);
1180
+ --separator-thickness-md: var(--dimensions-01);
1181
+ --separator-thickness-sm: 0.5px;
1182
+ --separator-thickness-xs: 0.25px;
1120
1183
  --separator-top-spacing-large-dot-sm: var(--dimensions-03);
1121
- --separator-top-spacing-small-dot-lg: var(--dimensions-13);
1122
- --separator-top-spacing-small-dot-md: var(--dimensions-06);
1123
- --separator-top-spacing-small-dot-sm: var(--dimensions-05);
1124
1184
  --status-indicator-inner-spacing: var(--dimensions-05);
1125
1185
  --status-indicator-lg: var(--dimensions-07);
1126
1186
  --status-indicator-sm: var(--dimensions-05);
@@ -1142,7 +1202,7 @@
1142
1202
  --stepper-item-vertical-padding-y-sm: 2px;
1143
1203
  --stepper-item-vertical-step-size-lg: 24px;
1144
1204
  --stepper-item-vertical-step-size-md: 16px;
1145
- --stepper-item-vertical-step-size-sm: var(--separator-dotted-dot-md);
1205
+ --stepper-item-vertical-step-size-sm: var(--separator-dot-size-md);
1146
1206
  --stepper-item-vertical-sub-line-bottom: 9px;
1147
1207
  --stepper-item-vertical-sub-line-top: 9.5px;
1148
1208
  --tab-icon: 18px;
package/variables/themes/default/color-variables__dark.scss CHANGED
@@ -1,4 +1,5 @@
1
1
  .tedi-theme--dark {
2
+ --accordion-action-color: var(--general-icon-white);
2
3
  --alert-default-background-danger: var(--general-status-danger-background-primary);
3
4
  --alert-default-background-info: var(--general-status-info-background-light);
4
5
  --alert-default-background-success: var(--general-status-success-background-primary);
@@ -242,6 +243,7 @@
242
243
  --empty-state-border: var(--card-border-primary);
243
244
  --empty-state-icon-primary: var(--general-icon-brand);
244
245
  --empty-state-icon-secondary: var(--general-icon-tertiary);
246
+ --feedback-indicator: var(--button-main-primary-inverted-background-default);
245
247
  --file-dropzone-background-default: var(--form-input-background-default);
246
248
  --file-dropzone-background-disabled: var(--form-general-background-disabled);
247
249
  --file-dropzone-background-drop-over: var(--general-surface-brand-quaternary);
@@ -254,24 +256,24 @@
254
256
  --file-dropzone-border-hover: var(--form-input-border-hover);
255
257
  --file-dropzone-text-default: var(--general-text-brand);
256
258
  --file-dropzone-text-drop-over: var(--general-text-tertiary);
257
- --filter-primary-active-background: var(--form-checkbox-radio-card-primary-selected-background);
258
- --filter-primary-active-border: var(--form-checkbox-radio-card-primary-selected-border-group);
259
- --filter-primary-active-text: var(--form-checkbox-radio-card-primary-selected-text);
259
+ --filter-primary-default-background: var(--form-checkbox-radio-card-primary-default-background);
260
+ --filter-primary-default-border: var(--form-checkbox-radio-card-primary-default-border-separate);
261
+ --filter-primary-default-text: var(--form-checkbox-radio-card-primary-default-text);
260
262
  --filter-primary-hover-background: var(--form-checkbox-radio-card-primary-hover-background);
261
263
  --filter-primary-hover-border: var(--form-checkbox-radio-card-primary-hover-border);
262
264
  --filter-primary-hover-text: var(--form-checkbox-radio-card-primary-hover-text);
263
- --filter-primary-inactive-background: var(--form-checkbox-radio-card-primary-default-background);
264
- --filter-primary-inactive-border: var(--form-checkbox-radio-card-primary-default-border-separate);
265
- --filter-primary-inactive-text: var(--form-checkbox-radio-card-primary-default-text);
266
- --filter-secondary-active-background: var(--form-checkbox-radio-card-secondary-selected-background);
267
- --filter-secondary-active-border: var(--form-checkbox-radio-card-secondary-selected-border);
268
- --filter-secondary-active-text: var(--form-checkbox-radio-card-secondary-selected-text);
265
+ --filter-primary-selected-background: var(--form-checkbox-radio-card-primary-selected-background);
266
+ --filter-primary-selected-border: var(--form-checkbox-radio-card-primary-selected-border-group);
267
+ --filter-primary-selected-text: var(--form-checkbox-radio-card-primary-selected-text);
268
+ --filter-secondary-default-background: var(--form-checkbox-radio-card-secondary-default-background);
269
+ --filter-secondary-default-border: var(--form-checkbox-radio-card-secondary-default-border);
270
+ --filter-secondary-default-text: var(--form-checkbox-radio-card-secondary-default-text);
269
271
  --filter-secondary-hover-background: var(--form-checkbox-radio-card-secondary-hover-background);
270
272
  --filter-secondary-hover-border: var(--form-checkbox-radio-card-secondary-hover-border);
271
273
  --filter-secondary-hover-text: var(--form-checkbox-radio-card-secondary-hover-text);
272
- --filter-secondary-inactive-background: var(--form-checkbox-radio-card-secondary-default-background);
273
- --filter-secondary-inactive-border: var(--form-checkbox-radio-card-secondary-default-border);
274
- --filter-secondary-inactive-text: var(--form-checkbox-radio-card-secondary-default-text);
274
+ --filter-secondary-selected-background: var(--form-checkbox-radio-card-secondary-selected-background);
275
+ --filter-secondary-selected-border: var(--form-checkbox-radio-card-secondary-selected-border);
276
+ --filter-secondary-selected-text: var(--form-checkbox-radio-card-secondary-selected-text);
275
277
  --footer-background: var(--tedi-neutral-750);
276
278
  --footer-bottom-background: var(--tedi-neutral-800);
277
279
  --footer-icon-background: var(--tedi-alpha-white-20);
@@ -405,6 +407,7 @@
405
407
  --general-border-brand: var(--tedi-primary-600);
406
408
  --general-border-primary: var(--tedi-neutral-750);
407
409
  --general-border-secondary: var(--tedi-neutral-500);
410
+ --general-border-transparent-white: var(--tedi-alpha-white-30);
408
411
  --general-border-white: var(--tedi-neutral-100);
409
412
  --general-icon-accent: var(--tedi-orange-300);
410
413
  --general-icon-background-brand-primary: var(--general-surface-brand-primary);
@@ -485,6 +488,7 @@
485
488
  --header-popover-item-active: var(--general-surface-active);
486
489
  --header-popover-item-hover: var(--general-surface-hover);
487
490
  --header-popover-item-selected: var(--general-surface-selected);
491
+ --header-top-header-border-bottom: var(--general-border-primary);
488
492
  --link-inverted-active: var(--general-text-white);
489
493
  --link-inverted-default: var(--general-text-white);
490
494
  --link-inverted-focus: var(--general-text-white);
package/variables/themes/default/color-variables__default.scss CHANGED
@@ -1,4 +1,5 @@
1
1
  .tedi-theme--default {
2
+ --accordion-action-color: var(--general-icon-brand);
2
3
  --alert-default-background-danger: var(--general-status-danger-background-primary);
3
4
  --alert-default-background-info: var(--general-status-info-background-light);
4
5
  --alert-default-background-success: var(--general-status-success-background-primary);
@@ -242,6 +243,7 @@
242
243
  --empty-state-border: var(--card-border-primary);
243
244
  --empty-state-icon-primary: var(--general-icon-brand);
244
245
  --empty-state-icon-secondary: var(--general-icon-tertiary);
246
+ --feedback-indicator: var(--general-icon-background-brand-primary);
245
247
  --file-dropzone-background-default: var(--form-input-background-default);
246
248
  --file-dropzone-background-disabled: var(--form-general-background-disabled);
247
249
  --file-dropzone-background-drop-over: var(--general-surface-brand-quaternary);
@@ -254,24 +256,24 @@
254
256
  --file-dropzone-border-hover: var(--form-input-border-hover);
255
257
  --file-dropzone-text-default: var(--general-text-brand);
256
258
  --file-dropzone-text-drop-over: var(--general-text-tertiary);
257
- --filter-primary-active-background: var(--form-checkbox-radio-card-primary-selected-background);
258
- --filter-primary-active-border: var(--form-checkbox-radio-card-primary-selected-border-group);
259
- --filter-primary-active-text: var(--form-checkbox-radio-card-primary-selected-text);
259
+ --filter-primary-default-background: var(--form-checkbox-radio-card-primary-default-background);
260
+ --filter-primary-default-border: var(--form-checkbox-radio-card-primary-default-border-separate);
261
+ --filter-primary-default-text: var(--form-checkbox-radio-card-primary-default-text);
260
262
  --filter-primary-hover-background: var(--form-checkbox-radio-card-primary-hover-background);
261
263
  --filter-primary-hover-border: var(--form-checkbox-radio-card-primary-hover-border);
262
264
  --filter-primary-hover-text: var(--form-checkbox-radio-card-primary-hover-text);
263
- --filter-primary-inactive-background: var(--form-checkbox-radio-card-primary-default-background);
264
- --filter-primary-inactive-border: var(--form-checkbox-radio-card-primary-default-border-separate);
265
- --filter-primary-inactive-text: var(--form-checkbox-radio-card-primary-default-text);
266
- --filter-secondary-active-background: var(--form-checkbox-radio-card-secondary-selected-background);
267
- --filter-secondary-active-border: var(--form-checkbox-radio-card-secondary-selected-border);
268
- --filter-secondary-active-text: var(--form-checkbox-radio-card-secondary-selected-text);
265
+ --filter-primary-selected-background: var(--form-checkbox-radio-card-primary-selected-background);
266
+ --filter-primary-selected-border: var(--form-checkbox-radio-card-primary-selected-border-group);
267
+ --filter-primary-selected-text: var(--form-checkbox-radio-card-primary-selected-text);
268
+ --filter-secondary-default-background: var(--form-checkbox-radio-card-secondary-default-background);
269
+ --filter-secondary-default-border: var(--form-checkbox-radio-card-secondary-default-border);
270
+ --filter-secondary-default-text: var(--form-checkbox-radio-card-secondary-default-text);
269
271
  --filter-secondary-hover-background: var(--form-checkbox-radio-card-secondary-hover-background);
270
272
  --filter-secondary-hover-border: var(--form-checkbox-radio-card-secondary-hover-border);
271
273
  --filter-secondary-hover-text: var(--form-checkbox-radio-card-secondary-hover-text);
272
- --filter-secondary-inactive-background: var(--form-checkbox-radio-card-secondary-default-background);
273
- --filter-secondary-inactive-border: var(--form-checkbox-radio-card-secondary-default-border);
274
- --filter-secondary-inactive-text: var(--form-checkbox-radio-card-secondary-default-text);
274
+ --filter-secondary-selected-background: var(--form-checkbox-radio-card-secondary-selected-background);
275
+ --filter-secondary-selected-border: var(--form-checkbox-radio-card-secondary-selected-border);
276
+ --filter-secondary-selected-text: var(--form-checkbox-radio-card-secondary-selected-text);
275
277
  --footer-background: var(--general-surface-inverted-secondary);
276
278
  --footer-bottom-background: var(--general-surface-inverted-tertiary);
277
279
  --footer-icon-background: var(--tedi-alpha-white-20);
@@ -405,6 +407,7 @@
405
407
  --general-border-brand: var(--tedi-primary-600);
406
408
  --general-border-primary: var(--tedi-neutral-350);
407
409
  --general-border-secondary: var(--tedi-neutral-450);
410
+ --general-border-transparent-white: var(--tedi-alpha-white-30);
408
411
  --general-border-white: var(--tedi-neutral-100);
409
412
  --general-icon-accent: var(--tedi-orange-700);
410
413
  --general-icon-background-brand-primary: var(--general-surface-brand-primary);
@@ -485,6 +488,7 @@
485
488
  --header-popover-item-active: var(--general-surface-active);
486
489
  --header-popover-item-hover: var(--general-surface-hover);
487
490
  --header-popover-item-selected: var(--general-surface-selected);
491
+ --header-top-header-border-bottom: var(--general-border-primary);
488
492
  --link-inverted-active: var(--general-text-white);
489
493
  --link-inverted-default: var(--general-text-white);
490
494
  --link-inverted-focus: var(--general-text-white);
package/variables/themes/default/font-variables__default.scss CHANGED
@@ -44,6 +44,10 @@
44
44
  --body-extra-small-size: var(--tedi-size-00);
45
45
  --body-extra-small-weight: var(--tedi-weight-02);
46
46
  --body-extra-small-line-height: var(--tedi-line-height-00);
47
+ --body-link-line-height: var(--body-regular-line-height);
48
+ --body-link-size-small: var(--body-small-regular-size);
49
+ --body-link-size-regular: var(--body-regular-size);
50
+ --body-link-size-responsive: var(--body-small-regular-size);
47
51
 
48
52
  @media (width <= 48rem) {
49
53
  --family-default: var(--tedi-family-roboto);
@@ -90,5 +94,9 @@
90
94
  --body-extra-small-size: var(--tedi-size-00);
91
95
  --body-extra-small-weight: var(--tedi-weight-02);
92
96
  --body-extra-small-line-height: var(--tedi-line-height-00);
97
+ --body-link-line-height: var(--body-regular-line-height);
98
+ --body-link-size-small: var(--body-small-regular-size);
99
+ --body-link-size-regular: var(--body-regular-size);
100
+ --body-link-size-responsive: var(--body-regular-size);
93
101
  }
94
102
  }
package/variables/themes/muis/color-variables__muis.scss CHANGED
@@ -1,4 +1,5 @@
1
1
  .tedi-theme--muis {
2
+ --accordion-action-color: var(--general-icon-brand);
2
3
  --alert-default-background-danger: var(--general-status-danger-background-primary);
3
4
  --alert-default-background-info: var(--general-status-info-background-light);
4
5
  --alert-default-background-success: var(--general-status-success-background-primary);
@@ -242,6 +243,7 @@
242
243
  --empty-state-border: var(--card-border-primary);
243
244
  --empty-state-icon-primary: var(--general-icon-brand);
244
245
  --empty-state-icon-secondary: var(--general-icon-tertiary);
246
+ --feedback-indicator: var(--general-icon-background-brand-primary);
245
247
  --file-dropzone-background-default: var(--form-input-background-default);
246
248
  --file-dropzone-background-disabled: var(--form-general-background-disabled);
247
249
  --file-dropzone-background-drop-over: var(--general-surface-brand-quaternary);
@@ -254,24 +256,24 @@
254
256
  --file-dropzone-border-hover: var(--form-input-border-hover);
255
257
  --file-dropzone-text-default: var(--general-text-brand);
256
258
  --file-dropzone-text-drop-over: var(--general-text-tertiary);
257
- --filter-primary-active-background: var(--form-checkbox-radio-card-primary-selected-background);
258
- --filter-primary-active-border: var(--form-checkbox-radio-card-primary-selected-border-group);
259
- --filter-primary-active-text: var(--form-checkbox-radio-card-primary-selected-text);
259
+ --filter-primary-default-background: var(--form-checkbox-radio-card-primary-default-background);
260
+ --filter-primary-default-border: var(--form-checkbox-radio-card-primary-default-border-separate);
261
+ --filter-primary-default-text: var(--form-checkbox-radio-card-primary-default-text);
260
262
  --filter-primary-hover-background: var(--form-checkbox-radio-card-primary-hover-background);
261
263
  --filter-primary-hover-border: var(--form-checkbox-radio-card-primary-hover-border);
262
264
  --filter-primary-hover-text: var(--form-checkbox-radio-card-primary-hover-text);
263
- --filter-primary-inactive-background: var(--form-checkbox-radio-card-primary-default-background);
264
- --filter-primary-inactive-border: var(--form-checkbox-radio-card-primary-default-border-separate);
265
- --filter-primary-inactive-text: var(--form-checkbox-radio-card-primary-default-text);
266
- --filter-secondary-active-background: var(--form-checkbox-radio-card-secondary-selected-background);
267
- --filter-secondary-active-border: var(--form-checkbox-radio-card-secondary-selected-border);
268
- --filter-secondary-active-text: var(--form-checkbox-radio-card-secondary-selected-text);
265
+ --filter-primary-selected-background: var(--form-checkbox-radio-card-primary-selected-background);
266
+ --filter-primary-selected-border: var(--form-checkbox-radio-card-primary-selected-border-group);
267
+ --filter-primary-selected-text: var(--form-checkbox-radio-card-primary-selected-text);
268
+ --filter-secondary-default-background: var(--form-checkbox-radio-card-secondary-default-background);
269
+ --filter-secondary-default-border: var(--form-checkbox-radio-card-secondary-default-border);
270
+ --filter-secondary-default-text: var(--form-checkbox-radio-card-secondary-default-text);
269
271
  --filter-secondary-hover-background: var(--form-checkbox-radio-card-secondary-hover-background);
270
272
  --filter-secondary-hover-border: var(--form-checkbox-radio-card-secondary-hover-border);
271
273
  --filter-secondary-hover-text: var(--form-checkbox-radio-card-secondary-hover-text);
272
- --filter-secondary-inactive-background: var(--form-checkbox-radio-card-secondary-default-background);
273
- --filter-secondary-inactive-border: var(--form-checkbox-radio-card-secondary-default-border);
274
- --filter-secondary-inactive-text: var(--form-checkbox-radio-card-secondary-default-text);
274
+ --filter-secondary-selected-background: var(--form-checkbox-radio-card-secondary-selected-background);
275
+ --filter-secondary-selected-border: var(--form-checkbox-radio-card-secondary-selected-border);
276
+ --filter-secondary-selected-text: var(--form-checkbox-radio-card-secondary-selected-text);
275
277
  --footer-background: var(--general-surface-inverted-secondary);
276
278
  --footer-bottom-background: var(--general-surface-inverted-tertiary);
277
279
  --footer-icon-background: var(--tedi-alpha-white-20);
@@ -405,6 +407,7 @@
405
407
  --general-border-brand: var(--muis-primary-400);
406
408
  --general-border-primary: var(--muis-neutral-650);
407
409
  --general-border-secondary: var(--tedi-neutral-450);
410
+ --general-border-transparent-white: var(--muis-alpha-white-30);
408
411
  --general-border-white: var(--muis-neutral-100);
409
412
  --general-icon-accent: var(--tedi-orange-700);
410
413
  --general-icon-background-brand-primary: var(--general-surface-brand-primary);
@@ -485,6 +488,7 @@
485
488
  --header-popover-item-active: var(--general-surface-active);
486
489
  --header-popover-item-hover: var(--general-surface-hover);
487
490
  --header-popover-item-selected: var(--general-surface-selected);
491
+ --header-top-header-border-bottom: var(--general-border-primary);
488
492
  --link-inverted-active: var(--general-text-white);
489
493
  --link-inverted-default: var(--general-text-white);
490
494
  --link-inverted-focus: var(--general-text-white);
package/variables/themes/muis/font-variables__muis.scss CHANGED
@@ -8,6 +8,10 @@
8
8
  --body-extra-small-line-height: var(--tedi-line-height-00);
9
9
  --body-extra-small-size: var(--tedi-size-00);
10
10
  --body-extra-small-weight: var(--tedi-weight-02);
11
+ --body-link-line-height: var(--body-regular-line-height);
12
+ --body-link-size-regular: var(--body-regular-size);
13
+ --body-link-size-responsive: var(--body-small-regular-size);
14
+ --body-link-size-small: var(--body-small-regular-size);
11
15
  --body-regular-line-height: var(--tedi-line-height-03);
12
16
  --body-regular-size: var(--tedi-size-02);
13
17
  --body-regular-weight: var(--tedi-weight-02);