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

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/badge.less +0 -1
  2. package/components/comment.less +1 -2
  3. package/components/icon.less +6 -6
  4. package/components/icons.less +1 -1
  5. package/components/switch.less +1 -0
  6. package/mixins/date-picker.scss +152 -0
  7. package/mixins/miscellaneous.scss +2 -1
  8. package/package.json +2 -2
  9. package/theme/variables.less +1 -1
  10. package/utils.less +0 -1
  11. package/utils.scss +1 -1
  12. package/mixins/picker.less +0 -200
  13. package/mixins/picker.scss +0 -199
package/components/badge.less CHANGED
@@ -75,7 +75,6 @@
75
75
  --t-margin: -0.125rem;
76
76
 
77
77
  font: var(--tui-typography-ui-2xs);
78
- line-height: 0.875rem;
79
78
 
80
79
  &[tuiStatus]::before {
81
80
  inline-size: 0.25rem;
package/components/comment.less CHANGED
@@ -16,12 +16,11 @@
16
16
  [tuiComment]:where(*&) {
17
17
  position: relative;
18
18
  display: inline-flex;
19
- font: var(--tui-typography-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/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% * (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/switch.less CHANGED
@@ -74,6 +74,7 @@
74
74
  block-size: 100%;
75
75
  inline-size: 1.5rem;
76
76
  transition-property: transform;
77
+ zoom: 1;
77
78
  }
78
79
 
79
80
  &::before {
package/mixins/date-picker.scss ADDED
@@ -0,0 +1,152 @@
1
+ @import 'miscellaneous';
2
+
3
+ @mixin date-picker {
4
+ .t-row {
5
+ display: flex;
6
+ justify-content: flex-start;
7
+ font: var(--tui-typography-body-m);
8
+
9
+ &:first-child {
10
+ justify-content: flex-end;
11
+ }
12
+
13
+ &:last-child {
14
+ justify-content: flex-start;
15
+ }
16
+ }
17
+
18
+ .t-cell {
19
+ position: relative;
20
+ display: flex;
21
+ align-items: center;
22
+ justify-content: center;
23
+ line-height: 2rem;
24
+ isolation: isolate;
25
+ cursor: pointer;
26
+ overflow: hidden;
27
+ border: 0.125rem solid transparent;
28
+ box-sizing: border-box;
29
+ mask: linear-gradient(
30
+ transparent calc(50% - 1rem),
31
+ #000 calc(50% - 1rem),
32
+ #000 calc(50% + 1rem),
33
+ transparent calc(50% + 1rem)
34
+ );
35
+
36
+ &:first-child {
37
+ border-inline-start-color: transparent !important;
38
+ }
39
+
40
+ &:last-child {
41
+ border-inline-end-color: transparent !important;
42
+ }
43
+
44
+ &::before,
45
+ &::after {
46
+ @include fullsize(absolute, inset);
47
+
48
+ content: '';
49
+ z-index: -1;
50
+ border-radius: var(--tui-radius-m);
51
+ }
52
+
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;
58
+ }
59
+
60
+ &[data-range]::before {
61
+ background: var(--tui-background-neutral-1);
62
+ }
63
+
64
+ :host._picking &[data-range]::before {
65
+ background: var(--tui-background-neutral-1-hover);
66
+ }
67
+
68
+ &[data-range='middle'] {
69
+ border-color: var(--tui-background-neutral-1);
70
+
71
+ :host._picking & {
72
+ border-color: var(--tui-background-neutral-1-hover);
73
+ }
74
+
75
+ &:not(:first-child)::before {
76
+ border-top-left-radius: 0;
77
+ border-bottom-left-radius: 0;
78
+ }
79
+
80
+ &:not(:last-child)::before {
81
+ border-top-right-radius: 0;
82
+ border-bottom-right-radius: 0;
83
+ }
84
+ }
85
+
86
+ &[data-range='start'] {
87
+ border-inline-end-color: var(--tui-background-neutral-1);
88
+ color: var(--tui-text-primary-on-accent-1);
89
+
90
+ :host._picking & {
91
+ border-inline-end-color: var(--tui-background-neutral-1-hover);
92
+ }
93
+
94
+ &:not(:last-child)::before {
95
+ right: -1rem;
96
+ }
97
+
98
+ &::after {
99
+ background: var(--tui-background-accent-1);
100
+ }
101
+ }
102
+
103
+ &[data-range='end'] {
104
+ border-inline-start-color: var(--tui-background-neutral-1);
105
+ color: var(--tui-text-primary-on-accent-1);
106
+
107
+ :host._picking & {
108
+ border-inline-start-color: var(--tui-background-neutral-1-hover);
109
+ }
110
+
111
+ &:not(:first-child)::before {
112
+ left: -1rem;
113
+ }
114
+
115
+ &::after {
116
+ background: var(--tui-background-accent-1);
117
+ transform: scale(-1, 1);
118
+ }
119
+ }
120
+
121
+ &[data-range='active'] {
122
+ color: var(--tui-text-primary-on-accent-1);
123
+
124
+ &::after {
125
+ background: var(--tui-background-accent-1);
126
+ mask: none;
127
+ }
128
+ }
129
+
130
+ &_disabled {
131
+ opacity: var(--tui-disabled-opacity);
132
+ pointer-events: none;
133
+ }
134
+
135
+ &_today {
136
+ text-decoration: underline;
137
+ text-underline-offset: 0.25rem;
138
+ }
139
+
140
+ @media ($tui-mouse) {
141
+ &:hover:not([data-range='start']):not([data-range='end'])::before {
142
+ background: var(--tui-background-neutral-1-hover);
143
+ }
144
+
145
+ &[data-range='start']:hover::after,
146
+ &[data-range='end']:hover::after,
147
+ &[data-range='active']:hover::after {
148
+ background: var(--tui-background-accent-1-hover);
149
+ }
150
+ }
151
+ }
152
+ }
package/mixins/miscellaneous.scss CHANGED
@@ -48,8 +48,9 @@
48
48
  padding: 0;
49
49
  border: 0;
50
50
  background: none;
51
- font-size: inherit;
51
+ font: inherit;
52
52
  line-height: inherit;
53
+ text-decoration: none;
53
54
  }
54
55
 
55
56
  @mixin button-base() {
package/package.json CHANGED
@@ -1,12 +1,12 @@
1
1
  {
2
2
  "name": "@taiga-ui/styles",
3
- "version": "5.0.0-canary.dc2eca0",
3
+ "version": "5.0.0-canary.df52b8a",
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.280.0"
10
+ "@taiga-ui/design-tokens": "~0.282.0"
11
11
  }
12
12
  }
package/theme/variables.less CHANGED
@@ -37,7 +37,7 @@
37
37
  var(--tui-typography-family-text);
38
38
  --tui-typography-ui-xs: normal calc(var(--tui-font-offset) + 0.75rem) / calc(15 / 12)
39
39
  var(--tui-typography-family-text);
40
- --tui-typography-ui-2xs: normal calc(var(--tui-font-offset) + 0.6875rem) / calc(13 / 11)
40
+ --tui-typography-ui-2xs: normal calc(var(--tui-font-offset) + 0.6875rem) / calc(12 / 11)
41
41
  var(--tui-typography-family-text);
42
42
  // Radii
43
43
  --tui-radius-xs: 0.25rem;
package/utils.less CHANGED
@@ -1,7 +1,6 @@
1
1
  @import 'mixins/browsers.less';
2
2
  @import 'mixins/date-picker.less';
3
3
  @import 'mixins/miscellaneous.less';
4
- @import 'mixins/picker.less';
5
4
  @import 'mixins/slider.less';
6
5
  @import 'mixins/appearance.less';
7
6
  @import 'variables/media.less';
package/utils.scss CHANGED
@@ -1,6 +1,6 @@
1
1
  @import 'mixins/browsers';
2
+ @import 'mixins/date-picker';
2
3
  @import 'mixins/miscellaneous';
3
- @import 'mixins/picker';
4
4
  @import 'mixins/slider';
5
5
  @import 'mixins/appearance';
6
6
  @import 'variables/media';
package/mixins/picker.less DELETED
@@ -1,200 +0,0 @@
1
- @import 'miscellaneous.less';
2
-
3
- // @deprecated
4
- .picker(@itemSize) {
5
- :host {
6
- display: block;
7
- font: var(--tui-typography-body-m);
8
- }
9
-
10
- .t-row {
11
- position: relative;
12
- display: flex;
13
- justify-content: space-between;
14
- block-size: 2.25rem;
15
- isolation: isolate;
16
- }
17
-
18
- .t-item {
19
- position: relative;
20
- flex: 1;
21
- line-height: 2rem;
22
- border-radius: var(--tui-radius-m);
23
-
24
- &::before,
25
- &::after {
26
- .fullsize(absolute, inset);
27
-
28
- content: '';
29
- z-index: -1;
30
- border-radius: var(--tui-radius-m);
31
- }
32
-
33
- &::after {
34
- border-radius: 0.5rem;
35
- }
36
- }
37
-
38
- .t-cell {
39
- position: relative;
40
- display: flex;
41
- align-items: center;
42
- justify-content: center;
43
- inline-size: @itemSize;
44
- text-align: center;
45
- outline: none;
46
- cursor: pointer;
47
- background-clip: content-box;
48
- box-sizing: border-box;
49
- border: 0.125rem solid transparent;
50
-
51
- &::before {
52
- content: '';
53
- position: absolute;
54
- top: 0;
55
- left: 0;
56
- right: 0;
57
- bottom: 0;
58
- z-index: -1;
59
- border-radius: var(--tui-radius-m);
60
- }
61
-
62
- &_today::after {
63
- .center-left();
64
-
65
- content: '';
66
- bottom: 0.3125rem;
67
- block-size: 0.125rem;
68
- inline-size: 0.75rem;
69
- border-radius: 0.375rem;
70
- background: var(--tui-text-primary);
71
- }
72
-
73
- &_interval {
74
- &::before {
75
- background: var(--tui-background-base-alt);
76
-
77
- :host._single & {
78
- background: var(--tui-background-neutral-1-hover);
79
- }
80
- }
81
-
82
- &:not(:last-child)::before {
83
- right: -0.1875rem;
84
- border-top-right-radius: 0;
85
- border-bottom-right-radius: 0;
86
- }
87
-
88
- &:not([data-range='start']):not(:first-child)::before {
89
- border-top-left-radius: 0;
90
- border-bottom-left-radius: 0;
91
- }
92
-
93
- &:last-child:first-child::before {
94
- right: 0;
95
- }
96
-
97
- &:first-child > .t-item {
98
- border-top-left-radius: var(--tui-radius-m);
99
- border-bottom-left-radius: var(--tui-radius-m);
100
- }
101
-
102
- &:last-child > .t-item {
103
- border-top-right-radius: var(--tui-radius-m);
104
- border-bottom-right-radius: var(--tui-radius-m);
105
- }
106
-
107
- & > .t-item {
108
- border-radius: 0;
109
- }
110
- }
111
-
112
- &[data-range] {
113
- &::after {
114
- background: var(--tui-text-primary-on-accent-1);
115
- }
116
-
117
- & > .t-item {
118
- color: var(--tui-text-primary-on-accent-1);
119
-
120
- &::before,
121
- &::after {
122
- background: var(--tui-background-accent-1);
123
- }
124
- }
125
-
126
- &:hover > .t-item::before,
127
- &:hover > .t-item::after {
128
- background: var(--tui-background-accent-1-hover);
129
- }
130
-
131
- &:active > .t-item::before,
132
- &:active > .t-item::after {
133
- background: var(--tui-background-accent-1-pressed);
134
- }
135
- }
136
-
137
- &[data-range='end'] {
138
- &::before {
139
- background: var(--tui-background-base-alt);
140
-
141
- :host._single & {
142
- background: var(--tui-background-neutral-1-hover);
143
- }
144
- }
145
-
146
- &:not(:first-child)::before {
147
- border-top-left-radius: 0;
148
- border-bottom-left-radius: 0;
149
- }
150
- }
151
-
152
- &[data-range='end'] > .t-item {
153
- &::before {
154
- left: 0.625rem;
155
- border-top-left-radius: 0;
156
- border-bottom-left-radius: 0;
157
- }
158
-
159
- &::after {
160
- left: -2rem;
161
- right: 100%;
162
- transform: translateX(1.6rem) scaleY(0.83) scaleX(0.5) rotate(45deg);
163
- }
164
- }
165
-
166
- &[data-range='start'] > .t-item {
167
- &::before {
168
- right: 0.625rem;
169
- border-top-right-radius: 0;
170
- border-bottom-right-radius: 0;
171
- }
172
-
173
- &::after {
174
- left: 100%;
175
- right: -2rem;
176
- transform: translateX(-1.6rem) scaleY(0.83) scaleX(0.5) rotate(45deg);
177
- }
178
- }
179
-
180
- &[data-range='single'] > .t-item::after {
181
- display: none;
182
- }
183
-
184
- &_disabled {
185
- pointer-events: none;
186
-
187
- & > .t-item {
188
- opacity: 0.36;
189
- }
190
- }
191
-
192
- &:hover:not([data-range]) > .t-item {
193
- background: var(--tui-background-neutral-1-hover);
194
- }
195
-
196
- &:active:not([data-range]) > .t-item {
197
- background: var(--tui-background-neutral-1-pressed);
198
- }
199
- }
200
- }
package/mixins/picker.scss DELETED
@@ -1,199 +0,0 @@
1
- @import 'miscellaneous';
2
-
3
- // @deprecated
4
- @mixin picker($itemSize) {
5
- :host {
6
- display: block;
7
- font: var(--tui-typography-body-m);
8
- }
9
-
10
- .t-row {
11
- position: relative;
12
- display: flex;
13
- justify-content: space-between;
14
- height: 2.25rem;
15
- isolation: isolate;
16
- }
17
-
18
- .t-item {
19
- position: relative;
20
- flex: 1;
21
- line-height: 2rem;
22
- border-radius: var(--tui-radius-m);
23
-
24
- &:before,
25
- &:after {
26
- @include fullsize(absolute, inset);
27
-
28
- content: '';
29
- z-index: -1;
30
- border-radius: var(--tui-radius-m);
31
- }
32
-
33
- &:after {
34
- border-radius: 0.5rem;
35
- }
36
- }
37
-
38
- .t-cell {
39
- position: relative;
40
- display: flex;
41
- align-items: center;
42
- justify-content: center;
43
- width: $itemSize;
44
- text-align: center;
45
- outline: none;
46
- cursor: pointer;
47
- background-clip: content-box;
48
- box-sizing: border-box;
49
- border: 0.125rem solid transparent;
50
-
51
- &:before {
52
- content: '';
53
- position: absolute;
54
- top: 0;
55
- left: 0;
56
- right: 0;
57
- bottom: 0;
58
- z-index: -1;
59
- border-radius: var(--tui-radius-m);
60
- }
61
-
62
- &_today:after {
63
- @include center-left();
64
- content: '';
65
- bottom: 0.3125rem;
66
- height: 0.125rem;
67
- width: 0.75rem;
68
- border-radius: 0.375rem;
69
- background: var(--tui-text-primary);
70
- }
71
-
72
- &_interval {
73
- &:before {
74
- background: var(--tui-background-base-alt);
75
-
76
- :host._single & {
77
- background: var(--tui-background-neutral-1-hover);
78
- }
79
- }
80
-
81
- &:not(:last-child):before {
82
- right: -0.1875rem;
83
- border-top-right-radius: 0;
84
- border-bottom-right-radius: 0;
85
- }
86
-
87
- &:not([data-range='start']):not(:first-child):before {
88
- border-top-left-radius: 0;
89
- border-bottom-left-radius: 0;
90
- }
91
-
92
- &:last-child:first-child:before {
93
- right: 0;
94
- }
95
-
96
- &:first-child > .t-item {
97
- border-top-left-radius: var(--tui-radius-m);
98
- border-bottom-left-radius: var(--tui-radius-m);
99
- }
100
-
101
- &:last-child > .t-item {
102
- border-top-right-radius: var(--tui-radius-m);
103
- border-bottom-right-radius: var(--tui-radius-m);
104
- }
105
-
106
- & > .t-item {
107
- border-radius: 0;
108
- }
109
- }
110
-
111
- &[data-range] {
112
- &:after {
113
- background: var(--tui-text-primary-on-accent-1);
114
- }
115
-
116
- & > .t-item {
117
- color: var(--tui-text-primary-on-accent-1);
118
-
119
- &:before,
120
- &:after {
121
- background: var(--tui-background-accent-1);
122
- }
123
- }
124
-
125
- &:hover > .t-item:before,
126
- &:hover > .t-item:after {
127
- background: var(--tui-background-accent-1-hover);
128
- }
129
-
130
- &:active > .t-item:before,
131
- &:active > .t-item:after {
132
- background: var(--tui-background-accent-1-pressed);
133
- }
134
- }
135
-
136
- &[data-range='end'] {
137
- &:before {
138
- background: var(--tui-background-base-alt);
139
-
140
- :host._single & {
141
- background: var(--tui-background-neutral-1-hover);
142
- }
143
- }
144
-
145
- &:not(:first-child):before {
146
- border-top-left-radius: 0;
147
- border-bottom-left-radius: 0;
148
- }
149
- }
150
-
151
- &[data-range='end'] > .t-item {
152
- &:before {
153
- left: 0.625rem;
154
- border-top-left-radius: 0;
155
- border-bottom-left-radius: 0;
156
- }
157
-
158
- &:after {
159
- left: -2rem;
160
- right: 100%;
161
- transform: translateX(1.6rem) scaleY(0.83) scaleX(0.5) rotate(45deg);
162
- }
163
- }
164
-
165
- &[data-range='start'] > .t-item {
166
- &:before {
167
- right: 0.625rem;
168
- border-top-right-radius: 0;
169
- border-bottom-right-radius: 0;
170
- }
171
-
172
- &:after {
173
- left: 100%;
174
- right: -2rem;
175
- transform: translateX(-1.6rem) scaleY(0.83) scaleX(0.5) rotate(45deg);
176
- }
177
- }
178
-
179
- &[data-range='single'] > .t-item:after {
180
- display: none;
181
- }
182
-
183
- &_disabled {
184
- pointer-events: none;
185
-
186
- & > .t-item {
187
- opacity: 0.36;
188
- }
189
- }
190
-
191
- &:hover:not([data-range]) > .t-item {
192
- background: var(--tui-background-neutral-1-hover);
193
- }
194
-
195
- &:active:not([data-range]) > .t-item {
196
- background: var(--tui-background-neutral-1-pressed);
197
- }
198
- }
199
- }