@tedi-design-system/core 2.1.0 → 2.3.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 (13) hide show
  1. package/_base.scss +3 -4
  2. package/_mixins.scss +4 -25
  3. package/_typography.scss +28 -29
  4. package/index.css +1 -1
  5. package/index.scss +1 -0
  6. package/package.json +5 -5
  7. package/variables/_dimensional-variables-legacy.scss +1236 -0
  8. package/variables/_dimensional-variables.scss +1092 -1234
  9. package/variables/themes/default/color-variables__dark.scss +2 -3
  10. package/variables/themes/default/color-variables__default.scss +2 -3
  11. package/variables/themes/default/font-variables__default.scss +93 -89
  12. package/variables/themes/rit/color-variables__rit.scss +2 -3
  13. package/variables/themes/rit/font-variables__rit.scss +2 -2
package/variables/themes/default/color-variables__dark.scss CHANGED
@@ -488,9 +488,8 @@
488
488
  --loader-spinner-color-primary: var(--tedi-alpha-white-80);
489
489
  --loader-spinner-color-secondary: var(--tedi-alpha-white-80);
490
490
  --modal-background: var(--general-surface-primary);
491
- --modal-border: var(--general-border-primary);
492
- --modal-footer-border-top: var(--general-border-primary);
493
- --modal-header-border-bottom: var(--general-border-primary);
491
+ --modal-border-outer: var(--general-border-primary);
492
+ --modal-border-inner: var(--general-border-primary);
494
493
  --popover-background: var(--general-surface-primary);
495
494
  --popover-border: var(--general-border-secondary);
496
495
  --popover-text: var(--general-text-primary);
package/variables/themes/default/color-variables__default.scss CHANGED
@@ -494,9 +494,8 @@
494
494
  --loader-spinner-color-primary: var(--tedi-neutral-450);
495
495
  --loader-spinner-color-secondary: var(--tedi-alpha-white-80);
496
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);
497
+ --modal-border-outer: var(--general-border-primary);
498
+ --modal-border-inner: var(--general-border-primary);
500
499
  --popover-background: var(--general-surface-primary);
501
500
  --popover-border: var(--general-border-white);
502
501
  --popover-text: var(--general-text-primary);
package/variables/themes/default/font-variables__default.scss CHANGED
@@ -1,90 +1,94 @@
1
- .tedi-theme--default {
2
- --heading-h1-weight-desktop: var(--tedi-weight-01);
3
- --heading-h1-weight-mobile: var(--tedi-weight-01);
4
- --heading-h1-size-desktop: var(--tedi-size-09);
5
- --heading-h1-size-mobile: var(--tedi-size-06);
6
- --heading-h1-line-height-desktop: var(--tedi-line-height-10);
7
- --heading-h1-line-height-mobile: var(--tedi-line-height-07)
8
- --heading-h2-weight-desktop: var(--tedi-weight-02);
9
- --heading-h2-weight-mobile: var(--tedi-weight-02);
10
- --heading-h2-size-desktop: var(--tedi-size-07);
11
- --heading-h2-size-mobile: var(--tedi-size-05);
12
- --heading-h2-line-height-desktop: var(--tedi-line-height-08);
13
- --heading-h2-line-height-mobile: var(--tedi-line-height-05);
14
- --heading-h3-weight-desktop: var(--tedi-weight-02);
15
- --heading-h3-weight-mobile: var(--tedi-weight-02);
16
- --heading-h3-size-desktop: var(--tedi-size-06);
17
- --heading-h3-size-mobile: var(--tedi-size-04);
18
- --heading-h3-line-height-desktop: var(--tedi-line-height-07);
19
- --heading-h3-line-height-mobile: var(--tedi-line-height-04);
20
- --heading-h4-weight-desktop: var(--tedi-weight-02);
21
- --heading-h4-weight-mobile: var(--tedi-weight-02);
22
- --heading-h4-size-desktop: var(--tedi-size-04);
23
- --heading-h4-size-mobile: var(--tedi-size-03);
24
- --heading-h4-line-height-desktop: var(--tedi-line-height-04);
25
- --heading-h4-line-height-mobile: var(--tedi-line-height-03);
26
- --heading-h5-weight-desktop: var(--tedi-weight-02);
27
- --heading-h5-weight-mobile: var(--tedi-weight-03);
28
- --heading-h5-size-desktop: var(--tedi-size-03);
29
- --heading-h5-size-mobile: var(--tedi-size-02);
30
- --heading-h5-line-height-desktop: var(--tedi-line-height-03);
31
- --heading-h5-line-height-mobile: var(--tedi-line-height-03);
32
- --heading-h6-weight-desktop: var(--tedi-weight-03);
33
- --heading-h6-weight-mobile: var(--tedi-weight-03);
34
- --heading-h6-size-desktop: var(--tedi-size-02);
35
- --heading-h6-size-mobile: var(--tedi-size-02);
36
- --heading-h6-line-height-desktop: var(--tedi-line-height-03);
37
- --heading-h6-line-height-mobile: var(--tedi-line-height-03);
38
- --body-regular-weight-desktop: var(--tedi-weight-02);
39
- --body-regular-weight-mobile: var(--tedi-weight-02);
40
- --body-regular-size-desktop: var(--tedi-size-02);
41
- --body-regular-size-mobile: var(--tedi-size-02);
42
- --body-regular-line-height-desktop: var(--tedi-line-height-03);
43
- --body-regular-line-height-mobile: var(--tedi-line-height-03);
44
- --family-primary-desktop: var(--tedi-family-roboto);
45
- --family-primary-mobile: var(--tedi-family-roboto);
46
- --body-bold-weight-desktop: var(--tedi-weight-03);
47
- --body-bold-weight-mobile: var(--tedi-weight-03);
48
- --body-bold-size-desktop: var(--tedi-size-02);
49
- --body-bold-size-tedi-mobile: var(--tedi-size-02);
50
- --body-bold-line-height-desktop: var(--tedi-line-height-03);
51
- --body-bold-line-height-mobile: var(--tedi-line-height-03);
52
- --body-small-regular-weight-desktop: var(--tedi-weight-02);
53
- --body-small-regular-weight-mobile: var(--tedi-weight-02);
54
- --body-small-regular-size-desktop: var(--tedi-size-01);
55
- --body-small-regular-size-mobile: var(--tedi-size-01);
56
- --body-small-regular-line-height-desktop: var(--tedi-line-height-01);
57
- --body-small-regular-line-height-mobile: var(--tedi-line-height-01);
58
- --body-small-bold-weight-desktop: var(--tedi-weight-03);
59
- --body-small-bold-weight-mobile: var(--tedi-weight-03);
60
- --body-small-bold-size-desktop: var(--tedi-size-01);
61
- --body-small-bold-size-mobile: var(--tedi-size-01);
62
- --body-small-bold-line-height-desktop: var(--tedi-line-height-01);
63
- --body-small-bold-line-height-mobile: var(--tedi-line-height-01);
64
- --heading-subtitle-regular-weight-desktop: var(--tedi-weight-03);
65
- --heading-subtitle-regular-weight-mobile: var(--tedi-weight-03);
66
- --heading-subtitle-regular-size-desktop: var(--tedi-size-02);
67
- --heading-subtitle-regular-size-mobile: var(--tedi-size-02);
68
- --heading-subtitle-regular-line-height-desktop: var(--tedi-line-height-03);
69
- --heading-subtitle-regular-line-height-mobile: var(--tedi-line-height-03);
70
- --heading-subtitle-small-weight-desktop: var(--tedi-weight-02);
71
- --heading-subtitle-small-weight-mobile: var(--tedi-weight-02);
72
- --heading-subtitle-small-size-desktop: var(--tedi-size-01);
73
- --heading-subtitle-small-size-mobile: var(--tedi-size-01);
74
- --heading-subtitle-small-line-height-desktop: var(--tedi-line-height-01);
75
- --heading-subtitle-small-line-height-mobile: var(--tedi-line-height-01);
76
- --body-extra-small-bold-size-desktop: var(--tedi-size-00);
77
- --body-extra-small-bold-size-mobile: var(--tedi-size-00);
78
- --body-extra-small-bold-weight-desktop: var(--tedi-weight-03);
79
- --body-extra-small-bold-weight-mobile: var(--tedi-weight-03);
80
- --body-extra-small-bold-line-height-desktop: var(--tedi-line-height-00);
81
- --body-extra-small-bold-line-height-mobile: var(--tedi-line-height-00);
82
- --body-extra-small-size-desktop: var(--tedi-size-00);
83
- --body-extra-small-size-mobile: var(--tedi-size-00);
84
- --body-extra-small-weight-desktop: var(--tedi-weight-02);
85
- --body-extra-small-weight-mobile: var(--tedi-weight-02);
86
- --body-extra-small-line-height-desktop: var(--tedi-line-height-00);
87
- --body-extra-small-line-height-mobile: var(--tedi-line-height-00);
88
- --family-heading-desktop: var(--tedi-family-roboto);
89
- --family-heading-mobile: var(--tedi-family-roboto);
1
+ .tedi-theme--default,
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);
12
+ --body-regular-size: var(--tedi-size-02);
13
+ --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);
23
+ --heading-h1-weight: var(--tedi-weight-01);
24
+ --heading-h2-size: var(--tedi-size-07);
25
+ --heading-h2-line-height: var(--tedi-line-height-08);
26
+ --heading-h2-weight: var(--tedi-weight-02);
27
+ --heading-h3-size: var(--tedi-size-06);
28
+ --heading-h3-line-height: var(--tedi-line-height-07);
29
+ --heading-h3-weight: var(--tedi-weight-02);
30
+ --heading-h4-size: var(--tedi-size-04);
31
+ --heading-h4-line-height: var(--tedi-line-height-04);
32
+ --heading-h4-weight: var(--tedi-weight-02);
33
+ --heading-h5-size: var(--tedi-size-03);
34
+ --heading-h5-line-height: var(--tedi-line-height-03);
35
+ --heading-h5-weight: var(--tedi-weight-02);
36
+ --heading-h6-size: var(--tedi-size-02);
37
+ --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);
42
+ --heading-subtitle-small-size: var(--tedi-size-01);
43
+ --heading-subtitle-small-line-height: var(--tedi-line-height-01);
44
+ --heading-subtitle-small-weight: var(--tedi-weight-02);
45
+ --family-default: var(--tedi-family-roboto);
46
+ --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
+ }
90
94
  }
package/variables/themes/rit/color-variables__rit.scss CHANGED
@@ -494,9 +494,8 @@
494
494
  --loader-spinner-color-primary: var(--tedi-neutral-450);
495
495
  --loader-spinner-color-secondary: var(--tedi-alpha-white-80);
496
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);
497
+ --modal-border-outer: var(--general-border-primary);
498
+ --modal-border-inner: var(--general-border-primary);
500
499
  --popover-background: var(--general-surface-primary);
501
500
  --popover-border: var(--general-border-white);
502
501
  --popover-text: var(--general-text-primary);
package/variables/themes/rit/font-variables__rit.scss CHANGED
@@ -83,8 +83,8 @@
83
83
  --heading-subtitle-small-line-height-mobile: var(--tedi-line-height-01);
84
84
  --heading-subtitle-small-weight-desktop: var(--tedi-weight-02);
85
85
  --heading-subtitle-small-weight-mobile: var(--tedi-weight-02);
86
- --family-primary-desktop: var(--rit-family-roboto);
87
- --family-primary-mobile: var(--rit-family-roboto);
86
+ --family-default-desktop: var(--rit-family-roboto);
87
+ --family-default-mobile: var(--rit-family-roboto);
88
88
  --family-heading-desktop: var(--rit-family-space-grotesk);
89
89
  --family-heading-mobile: var(--rit-family-space-grotesk);
90
90
  }