@taiga-ui/styles 5.0.0-canary.47548da → 5.0.0-canary.690ebfb

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 (22) hide show
  1. package/components/avatar.less +14 -14
  2. package/components/badge.less +4 -3
  3. package/components/block.less +4 -4
  4. package/components/button.less +5 -5
  5. package/components/chip.less +3 -3
  6. package/components/comment.less +1 -1
  7. package/components/icon.less +1 -1
  8. package/components/icons.less +2 -2
  9. package/components/label.less +3 -3
  10. package/components/message.less +1 -1
  11. package/components/notification.less +10 -10
  12. package/components/pin.less +3 -3
  13. package/components/textfield.less +5 -5
  14. package/components/title.less +8 -8
  15. package/components/toast.less +1 -1
  16. package/mixins/date-picker.less +1 -1
  17. package/mixins/picker.less +1 -1
  18. package/mixins/picker.scss +1 -1
  19. package/mixins/slider.less +1 -1
  20. package/mixins/slider.scss +1 -1
  21. package/package.json +2 -2
  22. package/theme/variables.less +33 -17
package/components/avatar.less CHANGED
@@ -41,7 +41,7 @@
41
41
  vertical-align: middle;
42
42
  box-sizing: border-box;
43
43
  padding: 0.25rem;
44
- font: var(--tui-font-body-l);
44
+ font: var(--tui-typography-body-l);
45
45
  font-weight: bold;
46
46
  opacity: 0.999; // Kick in hardware rendering layer to avoid artifacts on the edges
47
47
 
@@ -60,11 +60,11 @@
60
60
  --t-size: var(--tui-height-xs);
61
61
  --t-radius: 0.5rem;
62
62
 
63
- font: var(--tui-font-ui-xs);
63
+ font: var(--tui-typography-ui-2xs);
64
64
  font-size: 0.5625rem;
65
65
 
66
66
  &._initials::before {
67
- font: var(--tui-font-ui-xs);
67
+ font: var(--tui-typography-ui-2xs);
68
68
  font-weight: bold;
69
69
  }
70
70
  }
@@ -73,11 +73,11 @@
73
73
  --t-size: var(--tui-height-s);
74
74
  --t-radius: 0.5rem;
75
75
 
76
- font: var(--tui-font-ui-xs);
76
+ font: var(--tui-typography-ui-2xs);
77
77
  font-weight: bold;
78
78
 
79
79
  &._initials::before {
80
- font: var(--tui-font-body-s);
80
+ font: var(--tui-typography-body-s);
81
81
  font-weight: bold;
82
82
  }
83
83
  }
@@ -86,11 +86,11 @@
86
86
  --t-size: calc(var(--tui-height-m) - 0.25rem);
87
87
  --t-radius: 0.75rem;
88
88
 
89
- font: var(--tui-font-ui-m);
89
+ font: var(--tui-typography-ui-m);
90
90
  font-weight: bold;
91
91
 
92
92
  &._initials::before {
93
- font: var(--tui-font-body-m);
93
+ font: var(--tui-typography-body-m);
94
94
  font-weight: bold;
95
95
  }
96
96
  }
@@ -99,10 +99,10 @@
99
99
  --t-size: 5rem;
100
100
  --t-radius: 0.75rem;
101
101
 
102
- font: var(--tui-font-heading-h4);
102
+ font: var(--tui-typography-heading-h4);
103
103
 
104
104
  &._initials::before {
105
- font: var(--tui-font-heading-h3);
105
+ font: var(--tui-typography-heading-h3);
106
106
  }
107
107
  }
108
108
 
@@ -110,10 +110,10 @@
110
110
  --t-size: 6rem;
111
111
  --t-radius: 1rem;
112
112
 
113
- font: var(--tui-font-heading-h3);
113
+ font: var(--tui-typography-heading-h3);
114
114
 
115
115
  &._initials::before {
116
- font: var(--tui-font-heading-h3);
116
+ font: var(--tui-typography-heading-h3);
117
117
  }
118
118
  }
119
119
 
@@ -121,10 +121,10 @@
121
121
  --t-size: 8rem;
122
122
  --t-radius: 1.25rem;
123
123
 
124
- font: var(--tui-font-heading-h3);
124
+ font: var(--tui-typography-heading-h3);
125
125
 
126
126
  &._initials::before {
127
- font: var(--tui-font-heading-h2);
127
+ font: var(--tui-typography-heading-h2);
128
128
  }
129
129
  }
130
130
 
@@ -137,7 +137,7 @@
137
137
  content: attr(data-icon-start);
138
138
  mask: none;
139
139
  background: none;
140
- font: var(--tui-font-heading-h6);
140
+ font: var(--tui-typography-heading-h6);
141
141
  }
142
142
  }
143
143
 
package/components/badge.less CHANGED
@@ -32,7 +32,7 @@
32
32
  block-size: var(--t-size);
33
33
  min-inline-size: var(--t-size);
34
34
  inline-size: fit-content;
35
- font: var(--tui-font-body-s);
35
+ font: var(--tui-typography-body-s);
36
36
 
37
37
  &[tuiStatus]::before {
38
38
  inline-size: 0.375rem;
@@ -74,7 +74,8 @@
74
74
  --t-icon-size: 0.625rem;
75
75
  --t-margin: -0.125rem;
76
76
 
77
- font: var(--tui-font-body-xs);
77
+ font: var(--tui-typography-ui-2xs);
78
+ line-height: 0.875rem;
78
79
 
79
80
  &[tuiStatus]::before {
80
81
  inline-size: 0.25rem;
@@ -95,7 +96,7 @@
95
96
  --t-padding: 0 0.75rem;
96
97
  --t-size: var(--tui-height-s);
97
98
 
98
- font: var(--tui-font-body-m);
99
+ font: var(--tui-typography-body-m);
99
100
 
100
101
  &[tuiStatus]::before {
101
102
  inline-size: 0.5rem;
package/components/block.less CHANGED
@@ -33,20 +33,20 @@
33
33
  box-sizing: border-box;
34
34
  cursor: pointer;
35
35
  overflow: hidden;
36
- font: var(--tui-font-body-m);
36
+ font: var(--tui-typography-body-m);
37
37
  padding: var(--tui-padding-l);
38
38
  isolation: isolate;
39
39
 
40
40
  &[data-size='s'] {
41
41
  gap: 0.5rem;
42
- font: var(--tui-font-ui-s);
42
+ font: var(--tui-typography-ui-s);
43
43
  padding: 0.5rem;
44
44
 
45
45
  --t-height: var(--tui-height-s);
46
46
  --t-radius: var(--tui-radius-m);
47
47
 
48
48
  [tuiSubtitle] {
49
- font: var(--tui-font-ui-xs);
49
+ font: var(--tui-typography-ui-2xs);
50
50
  }
51
51
 
52
52
  [tuiTooltip] {
@@ -56,7 +56,7 @@
56
56
 
57
57
  &[data-size='m'] {
58
58
  gap: 0.625rem;
59
- font: var(--tui-font-ui-m);
59
+ font: var(--tui-typography-ui-m);
60
60
  padding: var(--tui-padding-m);
61
61
 
62
62
  --t-height: var(--tui-height-m);
package/components/button.less CHANGED
@@ -32,7 +32,7 @@
32
32
  padding: var(--t-padding);
33
33
  user-select: none;
34
34
  cursor: pointer;
35
- font: var(--tui-font-body-m);
35
+ font: var(--tui-typography-body-m);
36
36
  font-weight: bold;
37
37
 
38
38
  > .t-loader {
@@ -50,7 +50,7 @@
50
50
  --t-padding: 0 0.375rem;
51
51
  --t-margin: -0.125rem;
52
52
 
53
- font: var(--tui-font-body-s);
53
+ font: var(--tui-typography-body-s);
54
54
 
55
55
  tui-icon,
56
56
  &::before,
@@ -66,7 +66,7 @@
66
66
  --t-padding: 0 0.625rem;
67
67
  --t-margin: -0.125rem;
68
68
 
69
- font: var(--tui-font-body-s);
69
+ font: var(--tui-typography-body-s);
70
70
 
71
71
  tui-icon,
72
72
  &:not([tuiIconButton][data-appearance='icon'], [tuiIconButton][data-appearance^='action-'])::before,
@@ -82,7 +82,7 @@
82
82
  --t-padding: 0 1rem;
83
83
  --t-margin: -0.375rem;
84
84
 
85
- font: var(--tui-font-body-m);
85
+ font: var(--tui-typography-body-m);
86
86
  font-weight: bold;
87
87
  }
88
88
 
@@ -114,7 +114,7 @@
114
114
  gap: 0.375rem;
115
115
  min-inline-size: 5rem;
116
116
  white-space: pre-line;
117
- font: var(--tui-font-ui-s);
117
+ font: var(--tui-typography-ui-s);
118
118
 
119
119
  & > * {
120
120
  max-block-size: calc(var(--t-line-height) * 2);
package/components/chip.less CHANGED
@@ -25,7 +25,7 @@
25
25
 
26
26
  .button-base();
27
27
 
28
- font: var(--tui-font-body-s);
28
+ font: var(--tui-typography-body-s);
29
29
  border-radius: var(--tui-radius-m);
30
30
  padding: var(--t-padding);
31
31
  block-size: var(--t-size);
@@ -58,7 +58,7 @@
58
58
  --t-size: 1rem;
59
59
  --t-icon-size: 0.75rem;
60
60
 
61
- font: var(--tui-font-body-xs);
61
+ font: var(--tui-typography-body-xs);
62
62
  border-radius: var(--tui-radius-xs);
63
63
 
64
64
  & > [tuiIconButton] {
@@ -84,7 +84,7 @@
84
84
  --t-padding: 0 1rem;
85
85
  --t-size: var(--tui-height-m);
86
86
 
87
- font: var(--tui-font-body-m);
87
+ font: var(--tui-typography-body-m);
88
88
 
89
89
  & > [tuiIconButton] {
90
90
  margin: -0.75rem;
package/components/comment.less CHANGED
@@ -16,7 +16,7 @@
16
16
  [tuiComment]:where(*&) {
17
17
  position: relative;
18
18
  display: inline-flex;
19
- font: var(--tui-font-body-m);
19
+ font: var(--tui-typography-body-m);
20
20
  color: #fff;
21
21
  padding: 0.5rem 0.75rem;
22
22
  min-inline-size: 2.5rem;
package/components/icon.less CHANGED
@@ -31,7 +31,7 @@ tui-icon:where(*&) {
31
31
  vertical-align: middle;
32
32
  box-sizing: border-box;
33
33
  mask: var(--t-icon-bg) no-repeat center / calc(100% + 10 * var(--tui-stroke-width)) 100%;
34
- zoom: ~'calc(100% * (min(max(var(--tui-font-offset) - 10px, 0px), 1px) / 0.8px))';
34
+ zoom: ~'calc(100% * (min(max(var(--tui-typography-offset) - 10px, 0px), 1px) / 0.8px))';
35
35
 
36
36
  @media @tui-mouse {
37
37
  &[data-appearance='icon']:hover {
package/components/icons.less CHANGED
@@ -31,7 +31,7 @@
31
31
  flex-shrink: 0;
32
32
  box-sizing: content-box;
33
33
  background: currentColor;
34
- zoom: ~'calc(100% * (min(max(var(--tui-font-offset) - 10px, 0px), 1px) / 0.8px))';
34
+ zoom: ~'calc(100% * (min(max(var(--tui-typography-offset) - 10px, 0px), 1px) / 0.8px))';
35
35
  }
36
36
 
37
37
  &::before {
@@ -63,7 +63,7 @@
63
63
  display: grid;
64
64
  mask: none;
65
65
  background: none;
66
- font: 1.5em / 1 var(--tui-font-icon, inherit);
66
+ font: 1.5em / 1 var(--tui-typography-icon, inherit);
67
67
  text-align: center;
68
68
  place-content: center;
69
69
  text-transform: none;
package/components/label.less CHANGED
@@ -18,13 +18,13 @@
18
18
  display: flex;
19
19
  gap: 0.25rem;
20
20
  flex-direction: column;
21
- font: var(--tui-font-body-s);
21
+ font: var(--tui-typography-body-s);
22
22
  color: var(--tui-text-primary);
23
23
 
24
24
  &:not([data-orientation='vertical']) {
25
25
  flex-direction: row;
26
26
  inline-size: fit-content;
27
- font: var(--tui-font-body-m);
27
+ font: var(--tui-typography-body-m);
28
28
  }
29
29
 
30
30
  input[type='checkbox'],
@@ -38,7 +38,7 @@
38
38
  }
39
39
 
40
40
  small {
41
- font: var(--tui-font-body-s);
41
+ font: var(--tui-typography-body-s);
42
42
  }
43
43
 
44
44
  [tuiTitle] {
package/components/message.less CHANGED
@@ -23,7 +23,7 @@
23
23
  isolation: isolate;
24
24
  white-space: nowrap;
25
25
  text-align: start;
26
- font: var(--tui-font-ui-m);
26
+ font: var(--tui-typography-ui-m);
27
27
  border-radius: var(--tui-radius-l);
28
28
 
29
29
  > [tuiLink] {
package/components/notification.less CHANGED
@@ -29,7 +29,7 @@
29
29
  max-block-size: 100%;
30
30
  color: var(--tui-text-primary);
31
31
  padding: 1rem;
32
- font: var(--tui-font-body-m);
32
+ font: var(--tui-typography-body-m);
33
33
  line-height: 1.5rem;
34
34
  border-radius: var(--tui-radius-l);
35
35
  box-sizing: border-box;
@@ -71,7 +71,7 @@
71
71
 
72
72
  &[data-size='s'] {
73
73
  padding: 0.375rem 0.625rem;
74
- font: var(--tui-font-body-s);
74
+ font: var(--tui-typography-body-s);
75
75
  line-height: 1.25rem;
76
76
  border-radius: var(--tui-radius-m);
77
77
 
@@ -94,12 +94,12 @@
94
94
  }
95
95
 
96
96
  [tuiTitle] {
97
- font: var(--tui-font-body-s);
97
+ font: var(--tui-typography-body-s);
98
98
  font-weight: bold;
99
99
  }
100
100
 
101
101
  [tuiSubtitle] {
102
- font: var(--tui-font-body-s);
102
+ font: var(--tui-typography-body-s);
103
103
  }
104
104
 
105
105
  [tuiSubtitle] + * {
@@ -115,7 +115,7 @@
115
115
 
116
116
  &[data-size='m'] {
117
117
  padding: 0.75rem;
118
- font: var(--tui-font-body-s);
118
+ font: var(--tui-typography-body-s);
119
119
  line-height: 1.25rem;
120
120
  border-radius: var(--tui-radius-m);
121
121
 
@@ -137,12 +137,12 @@
137
137
  }
138
138
 
139
139
  [tuiTitle] {
140
- font: var(--tui-font-ui-m);
140
+ font: var(--tui-typography-ui-m);
141
141
  font-weight: bold;
142
142
  }
143
143
 
144
144
  [tuiSubtitle] {
145
- font: var(--tui-font-body-s);
145
+ font: var(--tui-typography-body-s);
146
146
  }
147
147
 
148
148
  [tuiSubtitle] + * {
@@ -158,19 +158,19 @@
158
158
 
159
159
  [tuiTitle] {
160
160
  gap: 0.125rem;
161
- font: var(--tui-font-ui-l);
161
+ font: var(--tui-typography-ui-l);
162
162
  font-weight: bold;
163
163
  }
164
164
 
165
165
  [tuiSubtitle] {
166
- font: var(--tui-font-body-m);
166
+ font: var(--tui-typography-body-m);
167
167
 
168
168
  + * {
169
169
  display: flex;
170
170
  align-items: center;
171
171
  gap: 1.25rem;
172
172
  margin-block-start: 0.625rem;
173
- font: var(--tui-font-body-s);
173
+ font: var(--tui-typography-body-s);
174
174
  }
175
175
  }
176
176
 
package/components/pin.less CHANGED
@@ -28,7 +28,7 @@
28
28
  justify-content: center;
29
29
  text-align: center;
30
30
  border-radius: 100%;
31
- font: var(--tui-font-body-s);
31
+ font: var(--tui-typography-body-s);
32
32
  font-weight: bold;
33
33
  box-sizing: border-box;
34
34
  color: var(--tui-text-primary-on-accent-2);
@@ -73,7 +73,7 @@
73
73
  &:has(:checked) {
74
74
  --t-size: 3.5rem;
75
75
 
76
- font: var(--tui-font-body-m);
76
+ font: var(--tui-typography-body-m);
77
77
  font-weight: bold;
78
78
  border-width: 0;
79
79
  margin-block-start: -2.75rem;
@@ -101,7 +101,7 @@
101
101
  &._open {
102
102
  --t-size: 3.5rem;
103
103
 
104
- font: var(--tui-font-body-m);
104
+ font: var(--tui-typography-body-m);
105
105
  font-weight: bold;
106
106
  border-width: 0;
107
107
  margin-block-start: -2.75rem;
package/components/textfield.less CHANGED
@@ -7,7 +7,7 @@ tui-textfield:where(*&) {
7
7
  --t-height: var(--tui-height-l);
8
8
  --t-padding: var(--tui-padding-l);
9
9
  --t-label-y: -0.75rem;
10
- --t-label-font: var(--tui-font-body-s);
10
+ --t-label-font: var(--tui-typography-body-s);
11
11
  --t-end: ~'0px';
12
12
  --t-start: ~'0px';
13
13
  --t-side: ~'0px';
@@ -21,7 +21,7 @@ tui-textfield:where(*&) {
21
21
  min-block-size: var(--t-height);
22
22
  padding: 0 var(--t-padding);
23
23
  border-radius: var(--tui-radius-l);
24
- font: var(--tui-font-ui-m);
24
+ font: var(--tui-typography-ui-m);
25
25
  line-height: 1.25rem;
26
26
  box-sizing: border-box;
27
27
  isolation: isolate;
@@ -100,7 +100,7 @@ tui-textfield:where(*&) {
100
100
  --t-max: ~'0px';
101
101
 
102
102
  border-radius: var(--tui-radius-m);
103
- font: var(--tui-font-ui-s);
103
+ font: var(--tui-typography-ui-s);
104
104
  line-height: 1rem;
105
105
 
106
106
  &[data-icon-start] {
@@ -134,12 +134,12 @@ tui-textfield:where(*&) {
134
134
  &[data-size='m'] {
135
135
  --t-height: var(--tui-height-m);
136
136
  --t-padding: var(--tui-padding-m);
137
- --t-label-font: var(--tui-font-body-xs);
137
+ --t-label-font: var(--tui-typography-body-xs);
138
138
  --t-label-y: -0.5625rem;
139
139
  --t-max: 0.125rem;
140
140
 
141
141
  border-radius: var(--tui-radius-m);
142
- font: var(--tui-font-ui-s);
142
+ font: var(--tui-typography-ui-s);
143
143
  line-height: 1rem;
144
144
 
145
145
  &[data-icon-start] {
package/components/title.less CHANGED
@@ -26,32 +26,32 @@
26
26
  text-align: start;
27
27
  gap: 0.25rem;
28
28
  margin: 0;
29
- font: var(--tui-font-ui-m);
29
+ font: var(--tui-typography-ui-m);
30
30
 
31
31
  &[data-size='s'] {
32
32
  gap: 0.125rem;
33
- font: var(--tui-font-body-s);
33
+ font: var(--tui-typography-body-s);
34
34
 
35
35
  [tuiSubtitle] {
36
- font: var(--tui-font-body-xs);
36
+ font: var(--tui-typography-body-xs);
37
37
  }
38
38
  }
39
39
 
40
40
  &[data-size='m'] {
41
41
  gap: 0.125rem;
42
- font: var(--tui-font-heading-h5);
42
+ font: var(--tui-typography-heading-h5);
43
43
 
44
44
  [tuiSubtitle] {
45
- font: var(--tui-font-body-m);
45
+ font: var(--tui-typography-body-m);
46
46
  }
47
47
  }
48
48
 
49
49
  &[data-size='l'] {
50
50
  gap: 0.5rem;
51
- font: var(--tui-font-heading-h3);
51
+ font: var(--tui-typography-heading-h3);
52
52
 
53
53
  [tuiSubtitle] {
54
- font: var(--tui-font-body-m);
54
+ font: var(--tui-typography-body-m);
55
55
  }
56
56
  }
57
57
 
@@ -66,7 +66,7 @@
66
66
  }
67
67
 
68
68
  [tuiSubtitle] {
69
- font: var(--tui-font-ui-s);
69
+ font: var(--tui-typography-ui-s);
70
70
  margin: 0;
71
71
  }
72
72
  }
package/components/toast.less CHANGED
@@ -16,7 +16,7 @@
16
16
  align-items: center;
17
17
  justify-content: center;
18
18
  inline-size: max-content;
19
- font: var(--tui-font-ui-s);
19
+ font: var(--tui-typography-ui-s);
20
20
  max-inline-size: ~'min(calc(100vw - 2rem), 25rem)';
21
21
  border: inherit;
22
22
  text-decoration: none;
package/mixins/date-picker.less CHANGED
@@ -4,7 +4,7 @@
4
4
  .t-row {
5
5
  display: flex;
6
6
  justify-content: flex-start;
7
- font: var(--tui-font-body-m);
7
+ font: var(--tui-typography-body-m);
8
8
 
9
9
  &:first-child {
10
10
  justify-content: flex-end;
package/mixins/picker.less CHANGED
@@ -4,7 +4,7 @@
4
4
  .picker(@itemSize) {
5
5
  :host {
6
6
  display: block;
7
- font: var(--tui-font-body-m);
7
+ font: var(--tui-typography-body-m);
8
8
  }
9
9
 
10
10
  .t-row {
package/mixins/picker.scss CHANGED
@@ -4,7 +4,7 @@
4
4
  @mixin picker($itemSize) {
5
5
  :host {
6
6
  display: block;
7
- font: var(--tui-font-body-m);
7
+ font: var(--tui-typography-body-m);
8
8
  }
9
9
 
10
10
  .t-row {
package/mixins/slider.less CHANGED
@@ -12,7 +12,7 @@
12
12
  --t-offset: @thumb-radius;
13
13
 
14
14
  display: flex;
15
- font: var(--tui-font-body-s);
15
+ font: var(--tui-typography-body-s);
16
16
  color: var(--tui-text-secondary);
17
17
  margin: 0.25rem var(--t-offset) 0;
18
18
 
package/mixins/slider.scss CHANGED
@@ -12,7 +12,7 @@ $track-thickness: max(calc($thumb-radius - 0.25rem), 0.125rem);
12
12
  --t-offset: $thumb-radius;
13
13
 
14
14
  display: flex;
15
- font: var(--tui-font-body-s);
15
+ font: var(--tui-typography-body-s);
16
16
  color: var(--tui-text-secondary);
17
17
  margin: 0.25rem var(--t-offset) 0;
18
18
 
package/package.json CHANGED
@@ -1,12 +1,12 @@
1
1
  {
2
2
  "name": "@taiga-ui/styles",
3
- "version": "5.0.0-canary.47548da",
3
+ "version": "5.0.0-canary.690ebfb",
4
4
  "description": "Framework-agnostic package with styles for Taiga UI",
5
5
  "license": "Apache-2.0",
6
6
  "exports": {
7
7
  "./*": "./*"
8
8
  },
9
9
  "peerDependencies": {
10
- "@taiga-ui/design-tokens": "~0.277.0"
10
+ "@taiga-ui/design-tokens": "~0.280.0"
11
11
  }
12
12
  }
package/theme/variables.less CHANGED
@@ -4,26 +4,42 @@
4
4
  &:root,
5
5
  &:host {
6
6
  // Fonts
7
- --tui-font-family-text: 'Manrope', system-ui, sans-serif;
8
- --tui-font-family-display: 'Manrope', system-ui, sans-serif;
9
- --tui-font-offset: ~'0rem';
7
+ --tui-typography-family-text: 'Manrope', system-ui, sans-serif;
8
+ --tui-typography-family-display: 'Manrope', system-ui, sans-serif;
9
+ --tui-typography-offset: ~'0rem';
10
10
  // Heading
11
- --tui-font-heading-h1: bold calc(var(--tui-font-offset) + 3.125rem) / calc(50 / 56) var(--tui-font-family-display);
12
- --tui-font-heading-h2: bold calc(var(--tui-font-offset) + 2.75rem) / calc(48 / 44) var(--tui-font-family-display);
13
- --tui-font-heading-h3: bold calc(var(--tui-font-offset) + 2.25rem) / calc(40 / 36) var(--tui-font-family-display);
14
- --tui-font-heading-h4: bold calc(var(--tui-font-offset) + 1.75rem) / calc(32 / 28) var(--tui-font-family-display);
15
- --tui-font-heading-h5: bold calc(var(--tui-font-offset) + 1.5rem) / calc(28 / 24) var(--tui-font-family-display);
16
- --tui-font-heading-h6: bold calc(var(--tui-font-offset) + 1.25rem) / calc(24 / 20) var(--tui-font-family-display);
11
+ --tui-typography-heading-h1: bold calc(var(--tui-typography-offset) + 3.125rem) / calc(50 / 56)
12
+ var(--tui-typography-family-display);
13
+ --tui-typography-heading-h2: bold calc(var(--tui-typography-offset) + 2.75rem) / calc(48 / 44)
14
+ var(--tui-typography-family-display);
15
+ --tui-typography-heading-h3: bold calc(var(--tui-typography-offset) + 2.25rem) / calc(40 / 36)
16
+ var(--tui-typography-family-display);
17
+ --tui-typography-heading-h4: bold calc(var(--tui-typography-offset) + 1.75rem) / calc(32 / 28)
18
+ var(--tui-typography-family-display);
19
+ --tui-typography-heading-h5: bold calc(var(--tui-typography-offset) + 1.5rem) / calc(28 / 24)
20
+ var(--tui-typography-family-display);
21
+ --tui-typography-heading-h6: bold calc(var(--tui-typography-offset) + 1.25rem) / calc(24 / 20)
22
+ var(--tui-typography-family-display);
17
23
  // Body
18
- --tui-font-body-l: normal calc(var(--tui-font-offset) + 1.0625rem) / calc(28 / 17) var(--tui-font-family-text);
19
- --tui-font-body-m: normal calc(var(--tui-font-offset) + 1rem) / calc(24 / 16) var(--tui-font-family-text);
20
- --tui-font-body-s: normal calc(var(--tui-font-offset) + 0.875rem) / calc(20 / 14) var(--tui-font-family-text);
21
- --tui-font-body-xs: normal calc(var(--tui-font-offset) + 0.6875rem) / calc(16 / 11) var(--tui-font-family-text);
24
+ --tui-typography-body-l: normal calc(var(--tui-typography-offset) + 1.0625rem) / calc(28 / 17)
25
+ var(--tui-typography-family-text);
26
+ --tui-typography-body-m: normal calc(var(--tui-typography-offset) + 1rem) / calc(24 / 16)
27
+ var(--tui-typography-family-text);
28
+ --tui-typography-body-s: normal calc(var(--tui-typography-offset) + 0.875rem) / calc(20 / 14)
29
+ var(--tui-typography-family-text);
30
+ --tui-typography-body-xs: normal calc(var(--tui-typography-offset) + 0.6875rem) / calc(16 / 11)
31
+ var(--tui-typography-family-text);
22
32
  // Reduced
23
- --tui-font-ui-l: normal calc(var(--tui-font-offset) + 1.0625rem) / calc(24 / 17) var(--tui-font-family-text);
24
- --tui-font-ui-m: normal calc(var(--tui-font-offset) + 1rem) / calc(20 / 16) var(--tui-font-family-text);
25
- --tui-font-ui-s: normal calc(var(--tui-font-offset) + 0.875rem) / calc(16 / 14) var(--tui-font-family-text);
26
- --tui-font-ui-xs: normal calc(var(--tui-font-offset) + 0.6875rem) / calc(13 / 11) var(--tui-font-family-text);
33
+ --tui-typography-ui-l: normal calc(var(--tui-typography-offset) + 1.0625rem) / calc(24 / 17)
34
+ var(--tui-typography-family-text);
35
+ --tui-typography-ui-m: normal calc(var(--tui-typography-offset) + 1rem) / calc(20 / 16)
36
+ var(--tui-typography-family-text);
37
+ --tui-typography-ui-s: normal calc(var(--tui-typography-offset) + 0.875rem) / calc(16 / 14)
38
+ var(--tui-typography-family-text);
39
+ --tui-typography-ui-xs: normal calc(var(--tui-typography-offset) + 0.75rem) / calc(15 / 12)
40
+ var(--tui-typography-family-text);
41
+ --tui-typography-ui-2xs: normal calc(var(--tui-typography-offset) + 0.6875rem) / calc(13 / 11)
42
+ var(--tui-typography-family-text);
27
43
  // Radii
28
44
  --tui-radius-xs: 0.25rem;
29
45
  --tui-radius-s: 0.5rem;