@taiga-ui/styles 5.0.0-canary.0dd40e8 → 5.0.0-canary.2b8a055

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 (38) hide show
  1. package/components/appearance.less +1 -1
  2. package/components/avatar.less +24 -19
  3. package/components/badge.less +4 -5
  4. package/components/block.less +5 -5
  5. package/components/button.less +11 -6
  6. package/components/checkbox.less +1 -1
  7. package/components/chip.less +4 -4
  8. package/components/comment.less +2 -3
  9. package/components/compass.less +3 -3
  10. package/components/icon.less +7 -7
  11. package/components/icons.less +1 -1
  12. package/components/label.less +4 -4
  13. package/components/like.less +1 -1
  14. package/components/link.less +1 -1
  15. package/components/message.less +2 -2
  16. package/components/notification.less +14 -17
  17. package/components/pin.less +24 -22
  18. package/components/progress-bar.less +1 -1
  19. package/components/radio.less +1 -1
  20. package/components/switch.less +10 -9
  21. package/components/textfield.less +23 -23
  22. package/components/title.less +8 -8
  23. package/components/toast.less +5 -3
  24. package/mixins/date-picker.less +3 -3
  25. package/mixins/date-picker.scss +152 -0
  26. package/mixins/hitbox.less +17 -0
  27. package/mixins/hitbox.scss +17 -0
  28. package/mixins/miscellaneous.less +9 -6
  29. package/mixins/miscellaneous.scss +18 -15
  30. package/mixins/slider.less +1 -1
  31. package/mixins/slider.scss +1 -1
  32. package/package.json +2 -2
  33. package/theme/appearance/table.less +0 -1
  34. package/theme/variables.less +31 -17
  35. package/utils.less +1 -1
  36. package/utils.scss +2 -1
  37. package/mixins/picker.less +0 -200
  38. package/mixins/picker.scss +0 -199
package/components/appearance.less CHANGED
@@ -1,4 +1,4 @@
1
- @import '@taiga-ui/styles/utils.less';
1
+ @import '../utils.less';
2
2
 
3
3
  /**
4
4
  * @name Appearance
package/components/avatar.less CHANGED
@@ -1,4 +1,4 @@
1
- @import '@taiga-ui/styles/utils.less';
1
+ @import '../utils.less';
2
2
 
3
3
  /**
4
4
  * @name Avatar
@@ -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,13 +141,14 @@
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
 
144
148
  &._badge {
145
149
  mask: radial-gradient(
146
- circle at calc(100% - var(--t-corner-offset)) calc(100% - var(--t-corner-offset)),
150
+ circle at ~'calc(max(var(--tui-inline), 0) * 100% - var(--tui-inline) * var(--t-corner-offset))'
151
+ calc(100% - var(--t-corner-offset)),
147
152
  black 0.23rem,
148
153
  transparent 0.25rem,
149
154
  transparent 0.375rem,
@@ -154,14 +159,14 @@
154
159
  &::after {
155
160
  content: '';
156
161
  position: absolute;
157
- top: calc(100% - var(--t-corner-offset));
158
- left: calc(100% - var(--t-corner-offset));
159
162
  display: block;
163
+ inset-block-start: calc(100% - var(--t-corner-offset));
164
+ inset-inline-start: calc(100% - var(--t-corner-offset));
160
165
  inline-size: 0.55rem;
161
166
  block-size: 0.55rem;
162
167
  border-radius: 100%;
163
168
  background: var(--t-badge);
164
- transform: translate3d(-50%, -50%, 0);
169
+ transform: translate3d(calc(var(--tui-inline) * -50%), -50%, 0);
165
170
  }
166
171
  }
167
172
 
package/components/badge.less CHANGED
@@ -1,4 +1,4 @@
1
- @import '@taiga-ui/styles/utils.less';
1
+ @import '../utils.less';
2
2
 
3
3
  /**
4
4
  * @name Badge
@@ -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,8 +74,7 @@
74
74
  --t-icon-size: 0.625rem;
75
75
  --t-margin: -0.125rem;
76
76
 
77
- font: var(--tui-font-ui-2xs);
78
- line-height: 0.875rem;
77
+ font: var(--tui-typography-ui-2xs);
79
78
 
80
79
  &[tuiStatus]::before {
81
80
  inline-size: 0.25rem;
@@ -96,7 +95,7 @@
96
95
  --t-padding: 0 0.75rem;
97
96
  --t-size: var(--tui-height-s);
98
97
 
99
- font: var(--tui-font-body-m);
98
+ font: var(--tui-typography-body-m);
100
99
 
101
100
  &[tuiStatus]::before {
102
101
  inline-size: 0.5rem;
package/components/block.less CHANGED
@@ -1,4 +1,4 @@
1
- @import '@taiga-ui/styles/utils.less';
1
+ @import '../utils.less';
2
2
 
3
3
  /**
4
4
  * @name Block
@@ -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
@@ -1,4 +1,4 @@
1
- @import '@taiga-ui/styles/utils.less';
1
+ @import '../utils.less';
2
2
 
3
3
  /**
4
4
  * @name Button
@@ -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,12 +114,17 @@
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);
121
121
  }
122
122
  }
123
+
124
+ &:is(a):not([href]) {
125
+ opacity: var(--tui-disabled-opacity);
126
+ pointer-events: none;
127
+ }
123
128
  }
124
129
 
125
130
  [tuiIconButton]:where(*&) {
package/components/checkbox.less CHANGED
@@ -1,4 +1,4 @@
1
- @import '@taiga-ui/styles/utils.less';
1
+ @import '../utils.less';
2
2
 
3
3
  /**
4
4
  * @name Checkbox
package/components/chip.less CHANGED
@@ -1,4 +1,4 @@
1
- @import '@taiga-ui/styles/utils.less';
1
+ @import '../utils.less';
2
2
 
3
3
  /**
4
4
  * @name Chip
@@ -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
@@ -1,4 +1,4 @@
1
- @import '@taiga-ui/styles/utils.less';
1
+ @import '../utils.less';
2
2
 
3
3
  /**
4
4
  * @name Comment
@@ -16,12 +16,11 @@
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-ui-m);
20
20
  color: #fff;
21
21
  padding: 0.5rem 0.75rem;
22
22
  min-inline-size: 2.5rem;
23
23
  border-radius: 1rem;
24
- line-height: 1.125rem;
25
24
  background: var(--tui-background-accent-2);
26
25
  align-items: center;
27
26
  justify-content: center;
package/components/compass.less CHANGED
@@ -1,4 +1,4 @@
1
- @import '@taiga-ui/styles/utils.less';
1
+ @import '../utils.less';
2
2
 
3
3
  /**
4
4
  * @name Compass
@@ -30,8 +30,8 @@ tui-compass:where(*&) {
30
30
  &::before {
31
31
  content: '';
32
32
  position: absolute;
33
- top: 0;
34
- left: 0.125rem;
33
+ inset-block-start: 0;
34
+ inset-inline-start: 0.125rem;
35
35
  mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg"><path d="M0 8.99993C4 8 8 8 12 8.99993C9.91509 5.73239 8.5 3 6 0C3.5 3 2 5.5 0 8.99993Z"/></svg>');
36
36
  transform: rotate(var(--t-degrees)) translateY(-0.625rem) translateZ(-1rem);
37
37
  inline-size: 0.75rem;
package/components/icon.less CHANGED
@@ -1,4 +1,4 @@
1
- @import '@taiga-ui/styles/utils.less';
1
+ @import '../utils.less';
2
2
 
3
3
  /**
4
4
  * @name Icon
@@ -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% * (clamp(0px, var(--tui-font-offset) - 10px, 1px) / 0.8px))';
35
35
 
36
36
  @media @tui-mouse {
37
37
  &[data-appearance='icon']:hover {
@@ -39,6 +39,11 @@ tui-icon:where(*&) {
39
39
  }
40
40
  }
41
41
 
42
+ &[tuiIcons]::before,
43
+ &[tuiIcons]::after {
44
+ zoom: 1;
45
+ }
46
+
42
47
  &[data-icon-end] {
43
48
  &::before {
44
49
  mask-image:
@@ -71,11 +76,6 @@ tui-icon:where(*&) {
71
76
  }
72
77
  }
73
78
 
74
- &[data-icon-start='img']::before,
75
- &[data-icon-end='img']::after {
76
- zoom: 1;
77
- }
78
-
79
79
  &[data-icon-start='font']::before,
80
80
  &[data-icon-end='font']::after {
81
81
  zoom: 0.667;
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% * (clamp(0px, var(--tui-font-offset) - 10px, 1px) / 0.8px))';
35
35
  }
36
36
 
37
37
  &::before {
package/components/label.less CHANGED
@@ -1,4 +1,4 @@
1
- @import '@taiga-ui/styles/utils.less';
1
+ @import '../utils.less';
2
2
 
3
3
  /**
4
4
  * @name Label
@@ -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/like.less CHANGED
@@ -1,4 +1,4 @@
1
- @import '@taiga-ui/styles/utils.less';
1
+ @import '../utils.less';
2
2
 
3
3
  /**
4
4
  * @name Like
package/components/link.less CHANGED
@@ -1,4 +1,4 @@
1
- @import '@taiga-ui/styles/utils.less';
1
+ @import '../utils.less';
2
2
 
3
3
  /**
4
4
  * @name Link
package/components/message.less CHANGED
@@ -1,4 +1,4 @@
1
- @import '@taiga-ui/styles/utils.less';
1
+ @import '../utils.less';
2
2
 
3
3
  /**
4
4
  * @name Message
@@ -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
@@ -1,4 +1,4 @@
1
- @import '@taiga-ui/styles/utils.less';
1
+ @import '../utils.less';
2
2
 
3
3
  /**
4
4
  * @name Notification
@@ -28,9 +28,8 @@
28
28
  display: flow-root;
29
29
  max-block-size: 100%;
30
30
  color: var(--tui-text-primary);
31
- padding: 1rem;
32
- font: var(--tui-font-body-m);
33
- line-height: 1.5rem;
31
+ padding: var(--tui-padding-l);
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;
@@ -70,9 +69,8 @@
70
69
  }
71
70
 
72
71
  &[data-size='s'] {
73
- padding: 0.375rem 0.625rem;
74
- font: var(--tui-font-body-s);
75
- line-height: 1.25rem;
72
+ padding: 0.375rem var(--tui-padding-s);
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] + * {
@@ -114,9 +112,8 @@
114
112
  }
115
113
 
116
114
  &[data-size='m'] {
117
- padding: 0.75rem;
118
- font: var(--tui-font-body-s);
119
- line-height: 1.25rem;
115
+ padding: var(--tui-padding-m);
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
@@ -1,4 +1,4 @@
1
- @import '@taiga-ui/styles/utils.less';
1
+ @import '../utils.less';
2
2
 
3
3
  /**
4
4
  * @name Pin
@@ -16,7 +16,11 @@
16
16
  [tuiPin]:where(*&) {
17
17
  --t-size: 2rem;
18
18
 
19
- .transition(~'width, height, border, margin');
19
+ @bubble-width: 1.875rem;
20
+ @bubble-shift: translate(calc(var(--tui-inline) * -@bubble-width), -@bubble-width);
21
+ @ground-shift: translate(calc(var(--tui-inline) * -50%), -50%);
22
+
23
+ .transition(~'inline-size, block-size, border, margin');
20
24
  .button-clear();
21
25
 
22
26
  position: relative;
@@ -28,14 +32,14 @@
28
32
  justify-content: center;
29
33
  text-align: center;
30
34
  border-radius: 100%;
31
- font: var(--tui-font-body-s);
35
+ font: var(--tui-typography-body-s);
32
36
  font-weight: bold;
33
37
  box-sizing: border-box;
34
38
  color: var(--tui-text-primary-on-accent-2);
35
39
  background: var(--tui-background-accent-2);
36
40
  box-shadow: 0 0 0 0.125rem var(--tui-background-elevation-2);
37
41
  border: 0 solid var(--tui-background-accent-2);
38
- transform: translate(-50%, -50%);
42
+ transform: @ground-shift;
39
43
 
40
44
  .interactive({
41
45
  cursor: pointer;
@@ -64,7 +68,7 @@
64
68
  }
65
69
 
66
70
  > tui-icon {
67
- .transition(~'width, height');
71
+ .transition(~'inline-size, block-size');
68
72
 
69
73
  font-size: 1.25rem;
70
74
  align-self: center;
@@ -73,7 +77,7 @@
73
77
  &:has(:checked) {
74
78
  --t-size: 3.5rem;
75
79
 
76
- font: var(--tui-font-body-m);
80
+ font: var(--tui-typography-body-m);
77
81
  font-weight: bold;
78
82
  border-width: 0;
79
83
  margin-block-start: -2.75rem;
@@ -87,12 +91,12 @@
87
91
  }
88
92
 
89
93
  &::before {
90
- transform: scale(0.99) translate(-1.875rem, -1.875rem);
94
+ transform: scale(0.99) @bubble-shift;
91
95
  opacity: 1;
92
96
  }
93
97
 
94
98
  &::after {
95
- top: 4.5rem;
99
+ inset-block-start: 4.5rem;
96
100
  opacity: 1;
97
101
  }
98
102
  }
@@ -101,7 +105,7 @@
101
105
  &._open {
102
106
  --t-size: 3.5rem;
103
107
 
104
- font: var(--tui-font-body-m);
108
+ font: var(--tui-typography-body-m);
105
109
  font-weight: bold;
106
110
  border-width: 0;
107
111
  margin-block-start: -2.75rem;
@@ -115,12 +119,12 @@
115
119
  }
116
120
 
117
121
  &::before {
118
- transform: scale(0.99) translate(-1.875rem, -1.875rem);
122
+ transform: scale(0.99) @bubble-shift;
119
123
  opacity: 1;
120
124
  }
121
125
 
122
126
  &::after {
123
- top: 4.5rem;
127
+ inset-block-start: 4.5rem;
124
128
  opacity: 1;
125
129
  }
126
130
  }
@@ -130,35 +134,33 @@
130
134
 
131
135
  content: '';
132
136
  position: absolute;
133
- top: 50%;
134
- left: 50%;
135
- right: -0.25rem;
136
- bottom: -0.625rem;
137
+ inset-block: 50% -0.625rem;
138
+ inset-inline: 50% -0.25rem;
137
139
  box-sizing: border-box;
138
- border-width: 2.2rem 2rem;
140
+ border-width: 2.2rem @bubble-width;
139
141
  border-style: solid;
140
142
  border-color: inherit;
141
143
  opacity: 0;
142
- transform: scale(0.57) translate(-1.875rem, -1.875rem);
143
- transform-origin: top left;
144
+ transform: scale(0.57) @bubble-shift;
145
+ transform-origin: top var(--tui-inline-start);
144
146
  pointer-events: none;
145
147
  mask: url('data:image/svg+xml,<svg width="60" height="66" viewBox="0 0 60 66" xmlns="http://www.w3.org/2000/svg"><path d="M0 30.0917C0 13.4726 13.4313 0 30.0002 0C46.5687 0 60 13.4726 60 30.0917C60 44.2105 50.4927 56.0529 37.4162 59.2986C32.5552 60.5551 31.0408 65.275 31.0408 65.275C30.8892 65.697 30.4909 66 30.0183 66C29.5453 66 29.147 65.697 28.9938 65.275C28.9938 65.275 27.481 60.5551 22.6199 59.2986C9.46433 56.0206 0 43.5901 0 30.0917ZM30 57.75C45.3259 57.75 57.75 45.3259 57.75 30C57.75 14.6741 45.3259 2.25 30 2.25C14.6741 2.25 2.25 14.6741 2.25 30C2.25 45.3259 14.6741 57.75 30 57.75Z" /></svg>')
146
148
  no-repeat;
147
149
  }
148
150
 
149
151
  &::after {
150
- .transition(~'top, opacity');
152
+ .transition(~'inset-block-start, opacity');
151
153
 
152
154
  content: '';
153
155
  position: absolute;
154
- top: 50%;
155
- left: 50%;
156
+ inset-block-start: 50%;
157
+ inset-inline-start: 50%;
156
158
  border: 0.1875rem solid currentColor;
157
159
  border-color: inherit;
158
160
  border-radius: 100%;
159
161
  box-sizing: border-box;
160
162
  box-shadow: inherit;
161
- transform: translate(-50%, -50%);
163
+ transform: @ground-shift;
162
164
  opacity: 0;
163
165
  }
164
166
  }