@taiga-ui/styles 5.8.0 → 5.9.0-canary.b71a5c1

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 (7) hide show
  1. package/components/avatar.less +2 -1
  2. package/components/icons.less +1 -1
  3. package/components/textfield.less +4 -4
  4. package/mixins/miscellaneous.less +4 -2
  5. package/mixins/miscellaneous.scss +3 -1
  6. package/package.json +2 -2
  7. package/theme/variables.less +2 -1
package/components/avatar.less CHANGED
@@ -43,6 +43,7 @@
43
43
  padding: 0.25rem;
44
44
  font: var(--tui-typography-body-l);
45
45
  font-weight: bold;
46
+ aspect-ratio: 1;
46
47
  opacity: 0.999; // Kick in hardware rendering layer to avoid artifacts on the edges
47
48
 
48
49
  .interactive({
@@ -133,7 +134,7 @@
133
134
  }
134
135
 
135
136
  &:not([data-shape='square']) {
136
- --t-radius: calc(var(--t-size) / 2);
137
+ --t-radius: calc(var(--t-size) / 2) !important;
137
138
  }
138
139
 
139
140
  &._initials {
package/components/icons.less CHANGED
@@ -20,7 +20,7 @@
20
20
  :where([tuiIcons]&) {
21
21
  --t-icon-start: none;
22
22
  --t-icon-end: none;
23
- --t-zoom: ~'calc(clamp(0px, var(--tui-font-offset) - 10px, 1px) / 1px)';
23
+ --t-zoom: ~'calc(clamp(0, var(--t-font-offset, 0) - 10, 1))';
24
24
 
25
25
  &::before,
26
26
  &::after {
package/components/textfield.less CHANGED
@@ -41,7 +41,7 @@ tui-textfield:where(*&) {
41
41
  }
42
42
 
43
43
  &[data-icon-start] {
44
- --t-start: 2.5rem;
44
+ --t-start: calc(2.5rem * (1 + 0.25 * var(--t-zoom)));
45
45
  }
46
46
 
47
47
  &[data-icon-end] {
@@ -55,8 +55,8 @@ tui-textfield:where(*&) {
55
55
  inline-size: 1.5rem;
56
56
  margin-inline-end: 1rem;
57
57
  pointer-events: none;
58
- // Cancelling zoom so it does not shift label
59
- zoom: 1;
58
+ // Compensating zoomed icons at high font-scaling
59
+ max-block-size: calc(var(--t-height) * (1 - 0.2 * var(--t-zoom)));
60
60
  }
61
61
 
62
62
  &::after {
@@ -145,7 +145,7 @@ tui-textfield:where(*&) {
145
145
  font: var(--tui-typography-ui-s);
146
146
 
147
147
  &[data-icon-start] {
148
- --t-start: 2.125rem;
148
+ --t-start: calc(2.125rem * (1 + 0.25 * var(--t-zoom)));
149
149
  }
150
150
 
151
151
  &[data-icon-end] {
package/mixins/miscellaneous.less CHANGED
@@ -116,7 +116,9 @@
116
116
  }
117
117
  }
118
118
 
119
- // hide an element visually without hiding it from screen readers
119
+ /**
120
+ * @deprecated remove in v6
121
+ */
120
122
  .sr-only() {
121
123
  position: absolute;
122
124
  clip: rect(1px, 1px, 1px, 1px);
@@ -165,5 +167,5 @@
165
167
  }
166
168
 
167
169
  .tui-mask(@x, @y, @r) {
168
- mask-image: radial-gradient(circle at @x @y, transparent @r, black @r);
170
+ mask-image: radial-gradient(circle at @x @y, transparent calc(@r - 0.5px), black @r);
169
171
  }
package/mixins/miscellaneous.scss CHANGED
@@ -113,7 +113,9 @@
113
113
  }
114
114
  }
115
115
 
116
- // hide an element visually without hiding it from screen readers
116
+ /**
117
+ * @deprecated remove in v6
118
+ */
117
119
  @mixin sr-only() {
118
120
  position: absolute;
119
121
  clip: rect(1px, 1px, 1px, 1px);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@taiga-ui/styles",
3
- "version": "5.8.0",
3
+ "version": "5.9.0-canary.b71a5c1",
4
4
  "description": "Framework-agnostic package with styles for Taiga UI",
5
5
  "repository": {
6
6
  "type": "git",
@@ -25,6 +25,6 @@
25
25
  "./*": "./*"
26
26
  },
27
27
  "peerDependencies": {
28
- "@taiga-ui/design-tokens": "~0.301.0"
28
+ "@taiga-ui/design-tokens": "~0.302.0"
29
29
  }
30
30
  }
package/theme/variables.less CHANGED
@@ -6,7 +6,8 @@
6
6
  // Fonts
7
7
  --tui-typography-family-text: 'Manrope', system-ui, sans-serif;
8
8
  --tui-typography-family-display: 'Manrope', system-ui, sans-serif;
9
- --tui-font-offset: ~'0rem';
9
+ --tui-font-offset: calc(var(--t-font-offset, 0) * 1px);
10
+ --tui-font-scale: calc((22 + var(--t-font-offset, 0)) / 22);
10
11
  // Heading
11
12
  --tui-typography-heading-h1: bold calc(var(--tui-font-offset) + 3.125rem) / calc(56 / 50) var(--tui-typography-family-display);
12
13
  --tui-typography-heading-h2: bold calc(var(--tui-font-offset) + 2.75rem) / calc(48 / 44) var(--tui-typography-family-display);