@taiga-ui/styles 5.0.0-canary.b157acb → 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 (27) hide show
  1. package/components/avatar.less +18 -14
  2. package/components/badge.less +3 -4
  3. package/components/block.less +4 -4
  4. package/components/button.less +5 -5
  5. package/components/chip.less +3 -3
  6. package/components/comment.less +1 -2
  7. package/components/icon.less +6 -6
  8. package/components/icons.less +1 -1
  9. package/components/label.less +3 -3
  10. package/components/message.less +1 -1
  11. package/components/notification.less +10 -13
  12. package/components/pin.less +3 -3
  13. package/components/switch.less +1 -0
  14. package/components/textfield.less +5 -5
  15. package/components/title.less +8 -8
  16. package/components/toast.less +1 -1
  17. package/mixins/date-picker.less +1 -1
  18. package/mixins/date-picker.scss +152 -0
  19. package/mixins/miscellaneous.scss +2 -1
  20. package/mixins/slider.less +1 -1
  21. package/mixins/slider.scss +1 -1
  22. package/package.json +2 -2
  23. package/theme/variables.less +31 -17
  24. package/utils.less +0 -1
  25. package/utils.scss +1 -1
  26. package/mixins/picker.less +0 -200
  27. package/mixins/picker.scss +0 -199
package/components/avatar.less CHANGED
@@ -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,7 +141,7 @@
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
 
package/components/badge.less CHANGED
@@ -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
@@ -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
@@ -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,7 +114,7 @@
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);
package/components/chip.less CHANGED
@@ -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
@@ -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/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/label.less CHANGED
@@ -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/message.less CHANGED
@@ -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
@@ -29,8 +29,7 @@
29
29
  max-block-size: 100%;
30
30
  color: var(--tui-text-primary);
31
31
  padding: 1rem;
32
- font: var(--tui-font-body-m);
33
- line-height: 1.5rem;
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;
@@ -71,8 +70,7 @@
71
70
 
72
71
  &[data-size='s'] {
73
72
  padding: 0.375rem 0.625rem;
74
- font: var(--tui-font-body-s);
75
- line-height: 1.25rem;
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] + * {
@@ -115,8 +113,7 @@
115
113
 
116
114
  &[data-size='m'] {
117
115
  padding: 0.75rem;
118
- font: var(--tui-font-body-s);
119
- line-height: 1.25rem;
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
@@ -28,7 +28,7 @@
28
28
  justify-content: center;
29
29
  text-align: center;
30
30
  border-radius: 100%;
31
- font: var(--tui-font-body-s);
31
+ font: var(--tui-typography-body-s);
32
32
  font-weight: bold;
33
33
  box-sizing: border-box;
34
34
  color: var(--tui-text-primary-on-accent-2);
@@ -73,7 +73,7 @@
73
73
  &:has(:checked) {
74
74
  --t-size: 3.5rem;
75
75
 
76
- font: var(--tui-font-body-m);
76
+ font: var(--tui-typography-body-m);
77
77
  font-weight: bold;
78
78
  border-width: 0;
79
79
  margin-block-start: -2.75rem;
@@ -101,7 +101,7 @@
101
101
  &._open {
102
102
  --t-size: 3.5rem;
103
103
 
104
- font: var(--tui-font-body-m);
104
+ font: var(--tui-typography-body-m);
105
105
  font-weight: bold;
106
106
  border-width: 0;
107
107
  margin-block-start: -2.75rem;
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/components/textfield.less CHANGED
@@ -7,7 +7,7 @@ tui-textfield:where(*&) {
7
7
  --t-height: var(--tui-height-l);
8
8
  --t-padding: var(--tui-padding-l);
9
9
  --t-label-y: -0.75rem;
10
- --t-label-font: var(--tui-font-body-s);
10
+ --t-label-font: var(--tui-typography-body-s);
11
11
  --t-end: ~'0px';
12
12
  --t-start: ~'0px';
13
13
  --t-side: ~'0px';
@@ -21,7 +21,7 @@ tui-textfield:where(*&) {
21
21
  min-block-size: var(--t-height);
22
22
  padding: 0 var(--t-padding);
23
23
  border-radius: var(--tui-radius-l);
24
- font: var(--tui-font-ui-m);
24
+ font: var(--tui-typography-ui-m);
25
25
  line-height: 1.25rem;
26
26
  box-sizing: border-box;
27
27
  isolation: isolate;
@@ -100,7 +100,7 @@ tui-textfield:where(*&) {
100
100
  --t-max: ~'0px';
101
101
 
102
102
  border-radius: var(--tui-radius-m);
103
- font: var(--tui-font-ui-s);
103
+ font: var(--tui-typography-ui-s);
104
104
  line-height: 1rem;
105
105
 
106
106
  &[data-icon-start] {
@@ -134,12 +134,12 @@ tui-textfield:where(*&) {
134
134
  &[data-size='m'] {
135
135
  --t-height: var(--tui-height-m);
136
136
  --t-padding: var(--tui-padding-m);
137
- --t-label-font: var(--tui-font-body-xs);
137
+ --t-label-font: var(--tui-typography-body-xs);
138
138
  --t-label-y: -0.5625rem;
139
139
  --t-max: 0.125rem;
140
140
 
141
141
  border-radius: var(--tui-radius-m);
142
- font: var(--tui-font-ui-s);
142
+ font: var(--tui-typography-ui-s);
143
143
  line-height: 1rem;
144
144
 
145
145
  &[data-icon-start] {
package/components/title.less CHANGED
@@ -26,32 +26,32 @@
26
26
  text-align: start;
27
27
  gap: 0.25rem;
28
28
  margin: 0;
29
- font: var(--tui-font-ui-m);
29
+ font: var(--tui-typography-ui-m);
30
30
 
31
31
  &[data-size='s'] {
32
32
  gap: 0.125rem;
33
- font: var(--tui-font-body-s);
33
+ font: var(--tui-typography-body-s);
34
34
 
35
35
  [tuiSubtitle] {
36
- font: var(--tui-font-body-xs);
36
+ font: var(--tui-typography-body-xs);
37
37
  }
38
38
  }
39
39
 
40
40
  &[data-size='m'] {
41
41
  gap: 0.125rem;
42
- font: var(--tui-font-heading-h5);
42
+ font: var(--tui-typography-heading-h5);
43
43
 
44
44
  [tuiSubtitle] {
45
- font: var(--tui-font-body-m);
45
+ font: var(--tui-typography-body-m);
46
46
  }
47
47
  }
48
48
 
49
49
  &[data-size='l'] {
50
50
  gap: 0.5rem;
51
- font: var(--tui-font-heading-h3);
51
+ font: var(--tui-typography-heading-h3);
52
52
 
53
53
  [tuiSubtitle] {
54
- font: var(--tui-font-body-m);
54
+ font: var(--tui-typography-body-m);
55
55
  }
56
56
  }
57
57
 
@@ -66,7 +66,7 @@
66
66
  }
67
67
 
68
68
  [tuiSubtitle] {
69
- font: var(--tui-font-ui-s);
69
+ font: var(--tui-typography-ui-s);
70
70
  margin: 0;
71
71
  }
72
72
  }
package/components/toast.less CHANGED
@@ -16,7 +16,7 @@
16
16
  align-items: center;
17
17
  justify-content: center;
18
18
  inline-size: max-content;
19
- font: var(--tui-font-ui-s);
19
+ font: var(--tui-typography-ui-s);
20
20
  max-inline-size: ~'min(calc(100vw - 2rem), 25rem)';
21
21
  border: inherit;
22
22
  text-decoration: none;
package/mixins/date-picker.less CHANGED
@@ -4,7 +4,7 @@
4
4
  .t-row {
5
5
  display: flex;
6
6
  justify-content: flex-start;
7
- font: var(--tui-font-body-m);
7
+ font: var(--tui-typography-body-m);
8
8
 
9
9
  &:first-child {
10
10
  justify-content: flex-end;
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/mixins/slider.less CHANGED
@@ -12,7 +12,7 @@
12
12
  --t-offset: @thumb-radius;
13
13
 
14
14
  display: flex;
15
- font: var(--tui-font-body-s);
15
+ font: var(--tui-typography-body-s);
16
16
  color: var(--tui-text-secondary);
17
17
  margin: 0.25rem var(--t-offset) 0;
18
18
 
package/mixins/slider.scss CHANGED
@@ -12,7 +12,7 @@ $track-thickness: max(calc($thumb-radius - 0.25rem), 0.125rem);
12
12
  --t-offset: $thumb-radius;
13
13
 
14
14
  display: flex;
15
- font: var(--tui-font-body-s);
15
+ font: var(--tui-typography-body-s);
16
16
  color: var(--tui-text-secondary);
17
17
  margin: 0.25rem var(--t-offset) 0;
18
18
 
package/package.json CHANGED
@@ -1,12 +1,12 @@
1
1
  {
2
2
  "name": "@taiga-ui/styles",
3
- "version": "5.0.0-canary.b157acb",
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
@@ -4,27 +4,41 @@
4
4
  &:root,
5
5
  &:host {
6
6
  // Fonts
7
- --tui-font-family-text: 'Manrope', system-ui, sans-serif;
8
- --tui-font-family-display: 'Manrope', system-ui, sans-serif;
7
+ --tui-typography-family-text: 'Manrope', system-ui, sans-serif;
8
+ --tui-typography-family-display: 'Manrope', system-ui, sans-serif;
9
9
  --tui-font-offset: ~'0rem';
10
10
  // Heading
11
- --tui-font-heading-h1: bold calc(var(--tui-font-offset) + 3.125rem) / calc(50 / 56) var(--tui-font-family-display);
12
- --tui-font-heading-h2: bold calc(var(--tui-font-offset) + 2.75rem) / calc(48 / 44) var(--tui-font-family-display);
13
- --tui-font-heading-h3: bold calc(var(--tui-font-offset) + 2.25rem) / calc(40 / 36) var(--tui-font-family-display);
14
- --tui-font-heading-h4: bold calc(var(--tui-font-offset) + 1.75rem) / calc(32 / 28) var(--tui-font-family-display);
15
- --tui-font-heading-h5: bold calc(var(--tui-font-offset) + 1.5rem) / calc(28 / 24) var(--tui-font-family-display);
16
- --tui-font-heading-h6: bold calc(var(--tui-font-offset) + 1.25rem) / calc(24 / 20) var(--tui-font-family-display);
11
+ --tui-typography-heading-h1: bold calc(var(--tui-font-offset) + 3.125rem) / calc(50 / 56)
12
+ var(--tui-typography-family-display);
13
+ --tui-typography-heading-h2: bold calc(var(--tui-font-offset) + 2.75rem) / calc(48 / 44)
14
+ var(--tui-typography-family-display);
15
+ --tui-typography-heading-h3: bold calc(var(--tui-font-offset) + 2.25rem) / calc(40 / 36)
16
+ var(--tui-typography-family-display);
17
+ --tui-typography-heading-h4: bold calc(var(--tui-font-offset) + 1.75rem) / calc(32 / 28)
18
+ var(--tui-typography-family-display);
19
+ --tui-typography-heading-h5: bold calc(var(--tui-font-offset) + 1.5rem) / calc(28 / 24)
20
+ var(--tui-typography-family-display);
21
+ --tui-typography-heading-h6: bold calc(var(--tui-font-offset) + 1.25rem) / calc(24 / 20)
22
+ var(--tui-typography-family-display);
17
23
  // Body
18
- --tui-font-body-l: normal calc(var(--tui-font-offset) + 1.0625rem) / calc(28 / 17) var(--tui-font-family-text);
19
- --tui-font-body-m: normal calc(var(--tui-font-offset) + 1rem) / calc(24 / 16) var(--tui-font-family-text);
20
- --tui-font-body-s: normal calc(var(--tui-font-offset) + 0.875rem) / calc(20 / 14) var(--tui-font-family-text);
21
- --tui-font-body-xs: normal calc(var(--tui-font-offset) + 0.6875rem) / calc(16 / 11) var(--tui-font-family-text);
24
+ --tui-typography-body-l: normal calc(var(--tui-font-offset) + 1.0625rem) / calc(28 / 17)
25
+ var(--tui-typography-family-text);
26
+ --tui-typography-body-m: normal calc(var(--tui-font-offset) + 1rem) / calc(24 / 16)
27
+ var(--tui-typography-family-text);
28
+ --tui-typography-body-s: normal calc(var(--tui-font-offset) + 0.875rem) / calc(20 / 14)
29
+ var(--tui-typography-family-text);
30
+ --tui-typography-body-xs: normal calc(var(--tui-font-offset) + 0.6875rem) / calc(16 / 11)
31
+ var(--tui-typography-family-text);
22
32
  // Reduced
23
- --tui-font-ui-l: normal calc(var(--tui-font-offset) + 1.0625rem) / calc(24 / 17) var(--tui-font-family-text);
24
- --tui-font-ui-m: normal calc(var(--tui-font-offset) + 1rem) / calc(20 / 16) var(--tui-font-family-text);
25
- --tui-font-ui-s: normal calc(var(--tui-font-offset) + 0.875rem) / calc(16 / 14) var(--tui-font-family-text);
26
- --tui-font-ui-xs: normal calc(var(--tui-font-offset) + 0.75rem) / calc(15 / 12) var(--tui-font-family-text);
27
- --tui-font-ui-2xs: normal calc(var(--tui-font-offset) + 0.6875rem) / calc(13 / 11) var(--tui-font-family-text);
33
+ --tui-typography-ui-l: normal calc(var(--tui-font-offset) + 1.0625rem) / calc(24 / 17)
34
+ var(--tui-typography-family-text);
35
+ --tui-typography-ui-m: normal calc(var(--tui-font-offset) + 1rem) / calc(20 / 16) var(--tui-typography-family-text);
36
+ --tui-typography-ui-s: normal calc(var(--tui-font-offset) + 0.875rem) / calc(16 / 14)
37
+ var(--tui-typography-family-text);
38
+ --tui-typography-ui-xs: normal calc(var(--tui-font-offset) + 0.75rem) / calc(15 / 12)
39
+ var(--tui-typography-family-text);
40
+ --tui-typography-ui-2xs: normal calc(var(--tui-font-offset) + 0.6875rem) / calc(12 / 11)
41
+ var(--tui-typography-family-text);
28
42
  // Radii
29
43
  --tui-radius-xs: 0.25rem;
30
44
  --tui-radius-s: 0.5rem;
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-font-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-font-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
- }