@taiga-ui/styles 5.5.0 → 5.6.0-canary.6156b6e

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/components/avatar.less +2 -2
  2. package/components/block.less +14 -0
  3. package/components/comment.less +11 -4
  4. package/components/group.less +3 -3
  5. package/components/icon.less +9 -2
  6. package/components/icons.less +12 -13
  7. package/components/pin.less +2 -2
  8. package/components/textfield.less +7 -4
  9. package/mixins/date-picker.less +10 -6
  10. package/mixins/date-picker.scss +10 -6
  11. package/mixins/miscellaneous.less +2 -2
  12. package/mixins/miscellaneous.scss +2 -2
  13. package/package.json +2 -2
package/components/avatar.less CHANGED
@@ -139,14 +139,14 @@
139
139
  &._initials {
140
140
  &::before {
141
141
  content: attr(data-icon-start);
142
- mask: none;
142
+ mask-image: none;
143
143
  background: none;
144
144
  font: var(--tui-typography-heading-h6);
145
145
  }
146
146
  }
147
147
 
148
148
  &._badge {
149
- mask: radial-gradient(
149
+ mask-image: radial-gradient(
150
150
  circle at ~'calc(max(var(--tui-inline), 0) * 100% - var(--tui-inline) * var(--t-corner-offset))'
151
151
  calc(100% - var(--t-corner-offset)),
152
152
  black 0.23rem,
package/components/block.less CHANGED
@@ -45,6 +45,11 @@
45
45
  --t-height: var(--tui-height-s);
46
46
  --t-radius: var(--tui-radius-m);
47
47
 
48
+ &::before,
49
+ &::after {
50
+ font-size: 1rem;
51
+ }
52
+
48
53
  [tuiSubtitle] {
49
54
  font: var(--tui-typography-ui-2xs);
50
55
  }
@@ -62,6 +67,11 @@
62
67
  --t-height: var(--tui-height-m);
63
68
  --t-radius: var(--tui-radius-m);
64
69
 
70
+ &::before,
71
+ &::after {
72
+ margin: -0.125rem;
73
+ }
74
+
65
75
  input:not([tuiBlock]) {
66
76
  margin: 0.125rem;
67
77
  }
@@ -92,6 +102,10 @@
92
102
  pointer-events: none;
93
103
  border-radius: inherit;
94
104
  padding: 0;
105
+
106
+ &[type='file'] {
107
+ opacity: 0;
108
+ }
95
109
  }
96
110
 
97
111
  [tuiAvatar] {
package/components/comment.less CHANGED
@@ -34,8 +34,7 @@
34
34
  block-size: 0.5625rem;
35
35
  background: inherit;
36
36
  transform: translate(calc(-50% * var(--tui-inline)));
37
- mask: url("data:image/svg+xml,%3Csvg width='25' height='9' viewBox='0 0 25 9' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.23309 6.67813L7.56191 3.83178C9.4546 1.5185 10.4009 0.361853 11.5998 0.10488C12.0834 0.00123882 12.5834 0.00123882 13.0669 0.10488C14.2658 0.361853 15.2121 1.5185 17.1048 3.83178L19.4337 6.67813C20.636 8.14771 22.4346 9 24.3334 9H0.333374C2.23217 9 4.0307 8.14772 5.23309 6.67813Z' fill='black'/%3E%3C/svg%3E%0A")
38
- no-repeat;
37
+ mask-image: url("data:image/svg+xml,%3Csvg width='25' height='9' viewBox='0 0 25 9' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.23309 6.67813L7.56191 3.83178C9.4546 1.5185 10.4009 0.361853 11.5998 0.10488C12.0834 0.00123882 12.5834 0.00123882 13.0669 0.10488C14.2658 0.361853 15.2121 1.5185 17.1048 3.83178L19.4337 6.67813C20.636 8.14771 22.4346 9 24.3334 9H0.333374C2.23217 9 4.0307 8.14772 5.23309 6.67813Z' fill='black'/%3E%3C/svg%3E%0A");
39
38
  }
40
39
 
41
40
  &[data-direction='bottom'] {
@@ -46,18 +45,26 @@
46
45
  }
47
46
 
48
47
  &[data-direction='start'] {
48
+ border-start-start-radius: 1rem min(1rem, 31%);
49
+ border-end-start-radius: 1rem min(1rem, 31%);
50
+
49
51
  &::before {
50
52
  inset-block: 50% 100%;
51
53
  inset-inline: auto 100%;
52
- transform: translate(calc(0.785rem * var(--tui-inline)), -50%) rotate(calc(-90deg * var(--tui-inline)));
54
+ transform: translate(calc(0.625rem * var(--tui-inline)), -50%) rotate(calc(-90deg * var(--tui-inline)));
55
+ clip-path: inset(0 0 0.125rem 0);
53
56
  }
54
57
  }
55
58
 
56
59
  &[data-direction='end'] {
60
+ border-start-end-radius: 1rem min(1rem, 31%);
61
+ border-end-end-radius: 1rem min(1rem, 31%);
62
+
57
63
  &::before {
58
64
  inset-block: 50% 100%;
59
65
  inset-inline: 100% auto;
60
- transform: translate(calc(-0.785rem * var(--tui-inline)), -50%) rotate(calc(90deg * var(--tui-inline)));
66
+ transform: translate(calc(-0.625rem * var(--tui-inline)), -50%) rotate(calc(90deg * var(--tui-inline)));
67
+ clip-path: inset(0 0 0.125rem 0);
61
68
  }
62
69
  }
63
70
  }
package/components/group.less CHANGED
@@ -34,7 +34,7 @@
34
34
  z-index: 1;
35
35
  flex: 1 1 0;
36
36
  min-inline-size: 0;
37
- mask: var(--t-group-mask);
37
+ mask-image: var(--t-group-mask);
38
38
  mask-clip: no-clip;
39
39
 
40
40
  &:disabled,
@@ -113,7 +113,7 @@
113
113
 
114
114
  &:only-child {
115
115
  border-radius: var(--t-group-radius);
116
- mask: none;
116
+ mask-image: none;
117
117
  }
118
118
  }
119
119
 
@@ -130,7 +130,7 @@
130
130
 
131
131
  &:only-child {
132
132
  border-radius: var(--t-group-radius);
133
- mask: none;
133
+ mask-image: none;
134
134
  }
135
135
  }
136
136
 
package/components/icon.less CHANGED
@@ -30,7 +30,10 @@ tui-icon:where(*&) {
30
30
  border: 0 solid transparent;
31
31
  vertical-align: middle;
32
32
  box-sizing: border-box;
33
- mask: var(--t-icon-bg) no-repeat center / calc(100% + 10 * var(--tui-stroke-width)) 100%;
33
+ mask-image: var(--t-icon-bg);
34
+ mask-repeat: no-repeat;
35
+ mask-position: center;
36
+ mask-size: calc(100% + 10 * var(--tui-stroke-width)) 100%;
34
37
  zoom: ~'calc(100% * (clamp(0px, var(--tui-font-offset) - 10px, 1px) / 0.8px))';
35
38
 
36
39
  @media @tui-mouse {
@@ -55,7 +58,11 @@ tui-icon:where(*&) {
55
58
  &[data-icon-start='img'],
56
59
  &[data-icon-start='font'] {
57
60
  &::before {
58
- mask: radial-gradient(circle at bottom 0.1em right 0.1em, transparent calc(0.4em - 0.5px), #000 0.4em);
61
+ mask-image: radial-gradient(
62
+ circle at bottom 0.1em right 0.1em,
63
+ transparent calc(0.4em - 0.5px),
64
+ #000 0.4em
65
+ );
59
66
  }
60
67
  }
61
68
 
package/components/icons.less CHANGED
@@ -25,6 +25,7 @@
25
25
  &::before,
26
26
  &::after {
27
27
  content: '';
28
+ display: var(--t-icon-start);
28
29
  inline-size: 1em;
29
30
  block-size: 1em;
30
31
  line-height: 1em;
@@ -33,36 +34,34 @@
33
34
  box-sizing: content-box;
34
35
  background: currentColor;
35
36
  zoom: calc(100% + 25% * var(--t-zoom));
36
- }
37
-
38
- &::before {
39
- display: var(--t-icon-start);
40
- mask:
41
- var(--t-icon-start) no-repeat center / calc(~'min(1em, 100%)' + 10 * var(--tui-stroke-width))
42
- ~'min(1em, 100%)',
43
- 100% padding-box;
37
+ mask-image: var(--t-icon-start);
38
+ mask-repeat: no-repeat;
39
+ mask-position: center;
40
+ mask-size:
41
+ calc(~'min(1em, 100%)' + 10 * var(--tui-stroke-width)) ~'min(1em, 100%)',
42
+ 100%;
43
+ mask-clip: padding-box;
44
44
  }
45
45
 
46
46
  &::after {
47
47
  display: var(--t-icon-end);
48
- mask: var(--t-icon-end) no-repeat center / calc(~'min(1em, 100%)' + 10 * var(--tui-stroke-width))
49
- ~'min(1em, 100%)' padding-box;
48
+ mask-image: var(--t-icon-end);
50
49
  }
51
50
 
52
51
  &:where([data-icon-start='img'])::before {
53
- mask: none;
52
+ mask-image: none;
54
53
  background: var(--t-icon-start) no-repeat center / 1em padding-box;
55
54
  }
56
55
 
57
56
  &:where([data-icon-end='img'])::after {
58
- mask: none;
57
+ mask-image: none;
59
58
  background: var(--t-icon-end) no-repeat center / 1em padding-box;
60
59
  }
61
60
 
62
61
  &:where([data-icon-start='font'])::before,
63
62
  &:where([data-icon-end='font'])::after {
64
63
  display: grid;
65
- mask: none;
64
+ mask-image: none;
66
65
  background: none;
67
66
  font: 1.5em / 1 var(--tui-font-icon, inherit);
68
67
  text-align: center;
package/components/pin.less CHANGED
@@ -144,8 +144,8 @@
144
144
  transform: scale(0.57) @bubble-shift;
145
145
  transform-origin: top var(--tui-inline-start);
146
146
  pointer-events: none;
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>')
148
- no-repeat;
147
+ mask-image: 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>');
148
+ mask-repeat: no-repeat;
149
149
  }
150
150
 
151
151
  &::after {
package/components/textfield.less CHANGED
@@ -51,8 +51,6 @@ tui-textfield:where(*&) {
51
51
  &[tuiIcons] {
52
52
  &::before {
53
53
  z-index: 1;
54
- block-size: var(--t-height);
55
- block-size: calc(var(--t-height) * (1 - 0.2 * var(--t-zoom)));
56
54
  inline-size: 1.5rem;
57
55
  margin-inline-end: 1rem;
58
56
  pointer-events: none;
@@ -60,13 +58,18 @@ tui-textfield:where(*&) {
60
58
 
61
59
  &::after {
62
60
  position: relative;
63
- block-size: var(--t-height);
64
- block-size: calc(var(--t-height) * (1 - 0.2 * var(--t-zoom)));
65
61
  inline-size: calc(1.5rem + 2 * var(--t-padding));
66
62
  cursor: pointer;
67
63
  margin-inline-start: calc(0.25rem - var(--t-padding));
68
64
  margin-inline-end: calc(-1 * var(--t-padding));
69
65
  }
66
+
67
+ &::before,
68
+ &::after {
69
+ block-size: var(--t-height);
70
+ // Compensating zoomed icons at high font-scaling
71
+ max-block-size: calc(var(--t-height) * (1 - 0.2 * var(--t-zoom)));
72
+ }
70
73
  }
71
74
 
72
75
  &::-webkit-resizer {
package/mixins/date-picker.less CHANGED
@@ -26,7 +26,7 @@
26
26
  overflow: hidden;
27
27
  border: 0.125rem solid transparent;
28
28
  box-sizing: border-box;
29
- mask: linear-gradient(
29
+ mask-image: linear-gradient(
30
30
  transparent calc(50% - 1rem),
31
31
  #000 calc(50% - 1rem),
32
32
  #000 calc(50% + 1rem),
@@ -51,10 +51,14 @@
51
51
  }
52
52
 
53
53
  &::after {
54
- mask:
55
- url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 32"><path d="M0.2856 0L0.6763 0C2.9265 0 4.9876 1.259 6.0147 3.2611L10.2442 11.5048C11.5301 14.0113 11.5683 16.9754 10.3472 19.5141L5.9766 28.6007C4.9772 30.6786 2.8754 32 0.5696 32H0.285645V0Z"></path></svg>')
56
- right/0.75rem 100% no-repeat,
57
- linear-gradient(#000, #000) left/calc(100% - 0.7rem) 100% no-repeat;
54
+ mask-image:
55
+ url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 32"><path d="M0.2856 0L0.6763 0C2.9265 0 4.9876 1.259 6.0147 3.2611L10.2442 11.5048C11.5301 14.0113 11.5683 16.9754 10.3472 19.5141L5.9766 28.6007C4.9772 30.6786 2.8754 32 0.5696 32H0.285645V0Z"></path></svg>'),
56
+ linear-gradient(#000, #000);
57
+ mask-position: right, left;
58
+ mask-size:
59
+ 0.75rem 100%,
60
+ calc(100% - 0.7rem) 100%;
61
+ mask-repeat: no-repeat;
58
62
  }
59
63
 
60
64
  &[data-range]::before {
@@ -123,7 +127,7 @@
123
127
 
124
128
  &::after {
125
129
  background: var(--tui-background-accent-1);
126
- mask: none;
130
+ mask-image: none;
127
131
  }
128
132
  }
129
133
 
package/mixins/date-picker.scss CHANGED
@@ -26,7 +26,7 @@
26
26
  overflow: hidden;
27
27
  border: 0.125rem solid transparent;
28
28
  box-sizing: border-box;
29
- mask: linear-gradient(
29
+ mask-image: linear-gradient(
30
30
  transparent calc(50% - 1rem),
31
31
  #000 calc(50% - 1rem),
32
32
  #000 calc(50% + 1rem),
@@ -51,10 +51,14 @@
51
51
  }
52
52
 
53
53
  &::after {
54
- mask:
55
- url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 32"><path d="M0.2856 0L0.6763 0C2.9265 0 4.9876 1.259 6.0147 3.2611L10.2442 11.5048C11.5301 14.0113 11.5683 16.9754 10.3472 19.5141L5.9766 28.6007C4.9772 30.6786 2.8754 32 0.5696 32H0.285645V0Z"></path></svg>')
56
- right/0.75rem 100% no-repeat,
57
- linear-gradient(#000, #000) left/calc(100% - 0.7rem) 100% no-repeat;
54
+ mask-image:
55
+ url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 32"><path d="M0.2856 0L0.6763 0C2.9265 0 4.9876 1.259 6.0147 3.2611L10.2442 11.5048C11.5301 14.0113 11.5683 16.9754 10.3472 19.5141L5.9766 28.6007C4.9772 30.6786 2.8754 32 0.5696 32H0.285645V0Z"></path></svg>'),
56
+ linear-gradient(#000, #000);
57
+ mask-repeat: no-repeat;
58
+ mask-position: right, left;
59
+ mask-size:
60
+ 0.75rem 100%,
61
+ calc(100% - 0.7rem) 100%;
58
62
  }
59
63
 
60
64
  &[data-range]::before {
@@ -123,7 +127,7 @@
123
127
 
124
128
  &::after {
125
129
  background: var(--tui-background-accent-1);
126
- mask: none;
130
+ mask-image: none;
127
131
  }
128
132
  }
129
133
 
package/mixins/miscellaneous.less CHANGED
@@ -157,7 +157,7 @@
157
157
 
158
158
  .tui-line-clamp(@count: 3) {
159
159
  display: -webkit-box;
160
- -webkit-box-orient: block-axis;
160
+ -webkit-box-orient: vertical;
161
161
  -webkit-line-clamp: @count;
162
162
  line-clamp: @count;
163
163
  overflow: hidden;
@@ -165,5 +165,5 @@
165
165
  }
166
166
 
167
167
  .tui-mask(@x, @y, @r) {
168
- mask: radial-gradient(circle at @x @y, transparent @r, black @r);
168
+ mask-image: radial-gradient(circle at @x @y, transparent @r, black @r);
169
169
  }
package/mixins/miscellaneous.scss CHANGED
@@ -152,7 +152,7 @@
152
152
 
153
153
  @mixin tui-line-clamp($count: 3) {
154
154
  display: -webkit-box;
155
- -webkit-box-orient: block-axis;
155
+ -webkit-box-orient: vertical;
156
156
  -webkit-line-clamp: $count;
157
157
  line-clamp: $count;
158
158
  overflow: hidden;
@@ -160,5 +160,5 @@
160
160
  }
161
161
 
162
162
  @mixin tui-mask($x, $y, $r) {
163
- mask: radial-gradient(circle at $x $y, transparent $r, black $r);
163
+ mask-image: radial-gradient(circle at $x $y, transparent $r, black $r);
164
164
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@taiga-ui/styles",
3
- "version": "5.5.0",
3
+ "version": "5.6.0-canary.6156b6e",
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.299.0"
28
+ "@taiga-ui/design-tokens": "~0.301.0"
29
29
  }
30
30
  }