@taiga-ui/styles 5.0.0-rc.3 → 5.0.0-rc.5

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 (42) hide show
  1. package/components/appearance.less +1 -1
  2. package/components/avatar.less +24 -19
  3. package/components/badge.less +4 -9
  4. package/components/block.less +5 -5
  5. package/components/button.less +13 -8
  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/appearance.scss +2 -2
  25. package/mixins/date-picker.less +3 -3
  26. package/mixins/date-picker.scss +152 -0
  27. package/mixins/hitbox.less +17 -0
  28. package/mixins/hitbox.scss +17 -0
  29. package/mixins/miscellaneous.less +9 -8
  30. package/mixins/miscellaneous.scss +21 -18
  31. package/mixins/slider.less +1 -1
  32. package/mixins/slider.scss +1 -1
  33. package/package.json +20 -2
  34. package/taiga-ui-fonts.less +1 -3
  35. package/theme/appearance/table.less +0 -1
  36. package/theme/appearance.less +0 -1
  37. package/theme/variables.less +31 -17
  38. package/utils.less +1 -1
  39. package/utils.scss +7 -6
  40. package/mixins/picker.less +0 -200
  41. package/mixins/picker.scss +0 -199
  42. package/theme/appearance/glass.less +0 -30
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;
@@ -46,12 +46,10 @@
46
46
  font-size: var(--t-icon-size) !important;
47
47
  }
48
48
 
49
- &[data-appearance='error'], /* TODO @deprecated remove in v5 */
50
49
  &[data-appearance='negative'] {
51
50
  --t-status: var(--tui-status-negative);
52
51
  }
53
52
 
54
- &[data-appearance='success'], /* TODO @deprecated remove in v5 */
55
53
  &[data-appearance='positive'] {
56
54
  --t-status: var(--tui-status-positive);
57
55
  }
@@ -74,8 +72,7 @@
74
72
  --t-icon-size: 0.625rem;
75
73
  --t-margin: -0.125rem;
76
74
 
77
- font: var(--tui-font-ui-2xs);
78
- line-height: 0.875rem;
75
+ font: var(--tui-typography-ui-2xs);
79
76
 
80
77
  &[tuiStatus]::before {
81
78
  inline-size: 0.25rem;
@@ -96,7 +93,7 @@
96
93
  --t-padding: 0 0.75rem;
97
94
  --t-size: var(--tui-height-s);
98
95
 
99
- font: var(--tui-font-body-m);
96
+ font: var(--tui-typography-body-m);
100
97
 
101
98
  &[tuiStatus]::before {
102
99
  inline-size: 0.5rem;
@@ -105,8 +102,6 @@
105
102
  }
106
103
  }
107
104
 
108
- &[tuiAppearance][data-appearance='error'], /* TODO @deprecated remove in v5 */
109
- &[tuiAppearance][data-appearance='success'], /* TODO @deprecated remove in v5 */
110
105
  &[tuiAppearance][data-appearance='negative'],
111
106
  &[tuiAppearance][data-appearance='positive'],
112
107
  &[tuiAppearance][data-appearance='warning'],
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,11 +66,11 @@
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
- &:not([tuiIconButton][data-appearance='icon'], [tuiIconButton][data-appearance^='action-'])::before,
73
- &:not([tuiIconButton][data-appearance='icon'], [tuiIconButton][data-appearance^='action-'])::after {
72
+ &:not([tuiIconButton][data-appearance='icon'], [tuiIconButton][data-appearance^='action'])::before,
73
+ &:not([tuiIconButton][data-appearance='icon'], [tuiIconButton][data-appearance^='action'])::after {
74
74
  font-size: 1rem;
75
75
  }
76
76
  }
@@ -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