@taiga-ui/styles 5.0.0-canary.b157acb → 5.0.0-canary.dc2eca0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (20) hide show
  1. package/components/avatar.less +18 -14
  2. package/components/badge.less +3 -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/label.less +3 -3
  8. package/components/message.less +1 -1
  9. package/components/notification.less +10 -13
  10. package/components/pin.less +3 -3
  11. package/components/textfield.less +5 -5
  12. package/components/title.less +8 -8
  13. package/components/toast.less +1 -1
  14. package/mixins/date-picker.less +1 -1
  15. package/mixins/picker.less +1 -1
  16. package/mixins/picker.scss +1 -1
  17. package/mixins/slider.less +1 -1
  18. package/mixins/slider.scss +1 -1
  19. package/package.json +1 -1
  20. package/theme/variables.less +31 -17
package/components/avatar.less CHANGED
@@ -41,10 +41,14 @@
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
 
48
+ .interactive({
49
+ cursor: pointer;
50
+ });
51
+
48
52
  &::before {
49
53
  inline-size: auto;
50
54
  block-size: auto;
@@ -60,11 +64,11 @@
60
64
  --t-size: var(--tui-height-xs);
61
65
  --t-radius: 0.5rem;
62
66
 
63
- font: var(--tui-font-ui-2xs);
67
+ font: var(--tui-typography-ui-2xs);
64
68
  font-size: 0.5625rem;
65
69
 
66
70
  &._initials::before {
67
- font: var(--tui-font-ui-2xs);
71
+ font: var(--tui-typography-ui-2xs);
68
72
  font-weight: bold;
69
73
  }
70
74
  }
@@ -73,11 +77,11 @@
73
77
  --t-size: var(--tui-height-s);
74
78
  --t-radius: 0.5rem;
75
79
 
76
- font: var(--tui-font-ui-2xs);
80
+ font: var(--tui-typography-ui-2xs);
77
81
  font-weight: bold;
78
82
 
79
83
  &._initials::before {
80
- font: var(--tui-font-body-s);
84
+ font: var(--tui-typography-body-s);
81
85
  font-weight: bold;
82
86
  }
83
87
  }
@@ -86,11 +90,11 @@
86
90
  --t-size: calc(var(--tui-height-m) - 0.25rem);
87
91
  --t-radius: 0.75rem;
88
92
 
89
- font: var(--tui-font-ui-m);
93
+ font: var(--tui-typography-ui-m);
90
94
  font-weight: bold;
91
95
 
92
96
  &._initials::before {
93
- font: var(--tui-font-body-m);
97
+ font: var(--tui-typography-body-m);
94
98
  font-weight: bold;
95
99
  }
96
100
  }
@@ -99,10 +103,10 @@
99
103
  --t-size: 5rem;
100
104
  --t-radius: 0.75rem;
101
105
 
102
- font: var(--tui-font-heading-h4);
106
+ font: var(--tui-typography-heading-h4);
103
107
 
104
108
  &._initials::before {
105
- font: var(--tui-font-heading-h3);
109
+ font: var(--tui-typography-heading-h3);
106
110
  }
107
111
  }
108
112
 
@@ -110,10 +114,10 @@
110
114
  --t-size: 6rem;
111
115
  --t-radius: 1rem;
112
116
 
113
- font: var(--tui-font-heading-h3);
117
+ font: var(--tui-typography-heading-h3);
114
118
 
115
119
  &._initials::before {
116
- font: var(--tui-font-heading-h3);
120
+ font: var(--tui-typography-heading-h3);
117
121
  }
118
122
  }
119
123
 
@@ -121,10 +125,10 @@
121
125
  --t-size: 8rem;
122
126
  --t-radius: 1.25rem;
123
127
 
124
- font: var(--tui-font-heading-h3);
128
+ font: var(--tui-typography-heading-h3);
125
129
 
126
130
  &._initials::before {
127
- font: var(--tui-font-heading-h2);
131
+ font: var(--tui-typography-heading-h2);
128
132
  }
129
133
  }
130
134
 
@@ -137,7 +141,7 @@
137
141
  content: attr(data-icon-start);
138
142
  mask: none;
139
143
  background: none;
140
- font: var(--tui-font-heading-h6);
144
+ font: var(--tui-typography-heading-h6);
141
145
  }
142
146
  }
143
147
 
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,7 @@
74
74
  --t-icon-size: 0.625rem;
75
75
  --t-margin: -0.125rem;
76
76
 
77
- font: var(--tui-font-ui-2xs);
77
+ font: var(--tui-typography-ui-2xs);
78
78
  line-height: 0.875rem;
79
79
 
80
80
  &[tuiStatus]::before {
@@ -96,7 +96,7 @@
96
96
  --t-padding: 0 0.75rem;
97
97
  --t-size: var(--tui-height-s);
98
98
 
99
- font: var(--tui-font-body-m);
99
+ font: var(--tui-typography-body-m);
100
100
 
101
101
  &[tuiStatus]::before {
102
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-2xs);
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/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,8 +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);
33
- line-height: 1.5rem;
32
+ font: var(--tui-typography-body-m);
34
33
  border-radius: var(--tui-radius-l);
35
34
  box-sizing: border-box;
36
35
  text-align: start;
@@ -71,8 +70,7 @@
71
70
 
72
71
  &[data-size='s'] {
73
72
  padding: 0.375rem 0.625rem;
74
- font: var(--tui-font-body-s);
75
- line-height: 1.25rem;
73
+ font: var(--tui-typography-body-s);
76
74
  border-radius: var(--tui-radius-m);
77
75
 
78
76
  &[data-icon-start] {
@@ -94,12 +92,12 @@
94
92
  }
95
93
 
96
94
  [tuiTitle] {
97
- font: var(--tui-font-body-s);
95
+ font: var(--tui-typography-body-s);
98
96
  font-weight: bold;
99
97
  }
100
98
 
101
99
  [tuiSubtitle] {
102
- font: var(--tui-font-body-s);
100
+ font: var(--tui-typography-body-s);
103
101
  }
104
102
 
105
103
  [tuiSubtitle] + * {
@@ -115,8 +113,7 @@
115
113
 
116
114
  &[data-size='m'] {
117
115
  padding: 0.75rem;
118
- font: var(--tui-font-body-s);
119
- line-height: 1.25rem;
116
+ font: var(--tui-typography-body-s);
120
117
  border-radius: var(--tui-radius-m);
121
118
 
122
119
  &[data-icon-start] {
@@ -137,12 +134,12 @@
137
134
  }
138
135
 
139
136
  [tuiTitle] {
140
- font: var(--tui-font-ui-m);
137
+ font: var(--tui-typography-ui-m);
141
138
  font-weight: bold;
142
139
  }
143
140
 
144
141
  [tuiSubtitle] {
145
- font: var(--tui-font-body-s);
142
+ font: var(--tui-typography-body-s);
146
143
  }
147
144
 
148
145
  [tuiSubtitle] + * {
@@ -158,19 +155,19 @@
158
155
 
159
156
  [tuiTitle] {
160
157
  gap: 0.125rem;
161
- font: var(--tui-font-ui-l);
158
+ font: var(--tui-typography-ui-l);
162
159
  font-weight: bold;
163
160
  }
164
161
 
165
162
  [tuiSubtitle] {
166
- font: var(--tui-font-body-m);
163
+ font: var(--tui-typography-body-m);
167
164
 
168
165
  + * {
169
166
  display: flex;
170
167
  align-items: center;
171
168
  gap: 1.25rem;
172
169
  margin-block-start: 0.625rem;
173
- font: var(--tui-font-body-s);
170
+ font: var(--tui-typography-body-s);
174
171
  }
175
172
  }
176
173
 
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,6 +1,6 @@
1
1
  {
2
2
  "name": "@taiga-ui/styles",
3
- "version": "5.0.0-canary.b157acb",
3
+ "version": "5.0.0-canary.dc2eca0",
4
4
  "description": "Framework-agnostic package with styles for Taiga UI",
5
5
  "license": "Apache-2.0",
6
6
  "exports": {
package/theme/variables.less CHANGED
@@ -4,27 +4,41 @@
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;
7
+ --tui-typography-family-text: 'Manrope', system-ui, sans-serif;
8
+ --tui-typography-family-display: 'Manrope', system-ui, sans-serif;
9
9
  --tui-font-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-font-offset) + 3.125rem) / calc(50 / 56)
12
+ var(--tui-typography-family-display);
13
+ --tui-typography-heading-h2: bold calc(var(--tui-font-offset) + 2.75rem) / calc(48 / 44)
14
+ var(--tui-typography-family-display);
15
+ --tui-typography-heading-h3: bold calc(var(--tui-font-offset) + 2.25rem) / calc(40 / 36)
16
+ var(--tui-typography-family-display);
17
+ --tui-typography-heading-h4: bold calc(var(--tui-font-offset) + 1.75rem) / calc(32 / 28)
18
+ var(--tui-typography-family-display);
19
+ --tui-typography-heading-h5: bold calc(var(--tui-font-offset) + 1.5rem) / calc(28 / 24)
20
+ var(--tui-typography-family-display);
21
+ --tui-typography-heading-h6: bold calc(var(--tui-font-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-font-offset) + 1.0625rem) / calc(28 / 17)
25
+ var(--tui-typography-family-text);
26
+ --tui-typography-body-m: normal calc(var(--tui-font-offset) + 1rem) / calc(24 / 16)
27
+ var(--tui-typography-family-text);
28
+ --tui-typography-body-s: normal calc(var(--tui-font-offset) + 0.875rem) / calc(20 / 14)
29
+ var(--tui-typography-family-text);
30
+ --tui-typography-body-xs: normal calc(var(--tui-font-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.75rem) / calc(15 / 12) var(--tui-font-family-text);
27
- --tui-font-ui-2xs: 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-font-offset) + 1.0625rem) / calc(24 / 17)
34
+ var(--tui-typography-family-text);
35
+ --tui-typography-ui-m: normal calc(var(--tui-font-offset) + 1rem) / calc(20 / 16) var(--tui-typography-family-text);
36
+ --tui-typography-ui-s: normal calc(var(--tui-font-offset) + 0.875rem) / calc(16 / 14)
37
+ var(--tui-typography-family-text);
38
+ --tui-typography-ui-xs: normal calc(var(--tui-font-offset) + 0.75rem) / calc(15 / 12)
39
+ var(--tui-typography-family-text);
40
+ --tui-typography-ui-2xs: normal calc(var(--tui-font-offset) + 0.6875rem) / calc(13 / 11)
41
+ var(--tui-typography-family-text);
28
42
  // Radii
29
43
  --tui-radius-xs: 0.25rem;
30
44
  --tui-radius-s: 0.5rem;