@taiga-ui/styles 5.4.0 → 5.5.0-canary.7bbb40c

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 (6) hide show
  1. package/components/group.less +2 -14
  2. package/components/icons.less +9 -8
  3. package/components/textfield.less +2 -0
  4. package/package.json +2 -2
  5. package/theme/appearance/floating.less +2 -2
  6. package/theme/variables.less +14 -28
package/components/group.less CHANGED
@@ -26,13 +26,7 @@
26
26
 
27
27
  --t-group-radius: var(--tui-radius-l);
28
28
  --t-group-margin: -1px;
29
- --t-group-mask: linear-gradient(
30
- to right,
31
- rgba(0, 0, 0, 0.5) 1px,
32
- #000 2px,
33
- #000 calc(100% - 2px),
34
- rgba(0, 0, 0, 0.5)
35
- );
29
+ --t-group-mask: linear-gradient(to right, rgba(0, 0, 0, 0.5) 1px, #000 2px, #000 calc(100% - 2px), rgba(0, 0, 0, 0.5));
36
30
  --t-group-mask-end: linear-gradient(to right, rgba(0, 0, 0, 0.5) 1px, #000 2px);
37
31
  --t-group-mask-start: linear-gradient(to right, #000 calc(100% - 2px), rgba(0, 0, 0, 0.5) calc(100% - 1px));
38
32
 
@@ -149,13 +143,7 @@
149
143
  display: inline-flex;
150
144
  flex-direction: column;
151
145
 
152
- --t-group-mask: linear-gradient(
153
- to bottom,
154
- rgba(0, 0, 0, 0.5) 1px,
155
- #000 2px,
156
- #000 calc(100% - 2px),
157
- rgba(0, 0, 0, 0.5)
158
- );
146
+ --t-group-mask: linear-gradient(to bottom, rgba(0, 0, 0, 0.5) 1px, #000 2px, #000 calc(100% - 2px), rgba(0, 0, 0, 0.5));
159
147
  --t-group-mask-start: linear-gradient(to bottom, #000 calc(100% - 2px), rgba(0, 0, 0, 0.5) calc(100% - 1px));
160
148
  --t-group-mask-end: linear-gradient(to bottom, rgba(0, 0, 0, 0.5) 1px, #000 2px);
161
149
 
package/components/icons.less CHANGED
@@ -17,9 +17,10 @@
17
17
  * @see-also
18
18
  * Button, Icon, Link
19
19
  */
20
- [tuiIcons]:where(*&) {
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
24
 
24
25
  &::before,
25
26
  &::after {
@@ -31,7 +32,7 @@
31
32
  flex-shrink: 0;
32
33
  box-sizing: content-box;
33
34
  background: currentColor;
34
- zoom: ~'calc(100% * (clamp(0px, var(--tui-font-offset) - 10px, 1px) / 0.8px))';
35
+ zoom: calc(100% + 25% * var(--t-zoom));
35
36
  }
36
37
 
37
38
  &::before {
@@ -48,18 +49,18 @@
48
49
  ~'min(1em, 100%)' padding-box;
49
50
  }
50
51
 
51
- &[data-icon-start='img']::before {
52
+ &:where([data-icon-start='img'])::before {
52
53
  mask: none;
53
54
  background: var(--t-icon-start) no-repeat center / 1em padding-box;
54
55
  }
55
56
 
56
- &[data-icon-end='img']::after {
57
+ &:where([data-icon-end='img'])::after {
57
58
  mask: none;
58
59
  background: var(--t-icon-end) no-repeat center / 1em padding-box;
59
60
  }
60
61
 
61
- &[data-icon-start='font']::before,
62
- &[data-icon-end='font']::after {
62
+ &:where([data-icon-start='font'])::before,
63
+ &:where([data-icon-end='font'])::after {
63
64
  display: grid;
64
65
  mask: none;
65
66
  background: none;
@@ -69,11 +70,11 @@
69
70
  text-transform: none;
70
71
  }
71
72
 
72
- &[data-icon-start='font']::before {
73
+ &:where([data-icon-start='font'])::before {
73
74
  content: var(--t-icon-start);
74
75
  }
75
76
 
76
- &[data-icon-end='font']::after {
77
+ &:where([data-icon-end='font'])::after {
77
78
  content: var(--t-icon-end);
78
79
  }
79
80
  }
package/components/textfield.less CHANGED
@@ -52,6 +52,7 @@ tui-textfield:where(*&) {
52
52
  &::before {
53
53
  z-index: 1;
54
54
  block-size: var(--t-height);
55
+ block-size: calc(var(--t-height) * (1 - 0.2 * var(--t-zoom)));
55
56
  inline-size: 1.5rem;
56
57
  margin-inline-end: 1rem;
57
58
  pointer-events: none;
@@ -60,6 +61,7 @@ tui-textfield:where(*&) {
60
61
  &::after {
61
62
  position: relative;
62
63
  block-size: var(--t-height);
64
+ block-size: calc(var(--t-height) * (1 - 0.2 * var(--t-zoom)));
63
65
  inline-size: calc(1.5rem + 2 * var(--t-padding));
64
66
  cursor: pointer;
65
67
  margin-inline-start: calc(0.25rem - var(--t-padding));
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@taiga-ui/styles",
3
- "version": "5.4.0",
3
+ "version": "5.5.0-canary.7bbb40c",
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.293.0"
28
+ "@taiga-ui/design-tokens": "~0.301.0"
29
29
  }
30
30
  }
package/theme/appearance/floating.less CHANGED
@@ -1,7 +1,7 @@
1
1
  @import '../../utils.less';
2
2
 
3
3
  [tuiAppearance][data-appearance='floating'] {
4
- background: var(--tui-background-elevation-2);
4
+ background-color: var(--tui-background-elevation-2);
5
5
  color: var(--tui-text-primary);
6
6
  box-shadow: var(--tui-shadow-small);
7
7
 
@@ -15,7 +15,7 @@
15
15
  });
16
16
 
17
17
  .appearance-active({
18
- background: var(--tui-background-base-alt);
18
+ background-color: var(--tui-background-base-alt);
19
19
  box-shadow: var(--tui-shadow-small);
20
20
  });
21
21
  }
package/theme/variables.less CHANGED
@@ -8,37 +8,23 @@
8
8
  --tui-typography-family-display: 'Manrope', system-ui, sans-serif;
9
9
  --tui-font-offset: ~'0rem';
10
10
  // Heading
11
- --tui-typography-heading-h1: bold calc(var(--tui-font-offset) + 3.125rem) / calc(56 / 50)
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);
11
+ --tui-typography-heading-h1: bold calc(var(--tui-font-offset) + 3.125rem) / calc(56 / 50) var(--tui-typography-family-display);
12
+ --tui-typography-heading-h2: bold calc(var(--tui-font-offset) + 2.75rem) / calc(48 / 44) var(--tui-typography-family-display);
13
+ --tui-typography-heading-h3: bold calc(var(--tui-font-offset) + 2.25rem) / calc(40 / 36) var(--tui-typography-family-display);
14
+ --tui-typography-heading-h4: bold calc(var(--tui-font-offset) + 1.75rem) / calc(32 / 28) var(--tui-typography-family-display);
15
+ --tui-typography-heading-h5: bold calc(var(--tui-font-offset) + 1.5rem) / calc(28 / 24) var(--tui-typography-family-display);
16
+ --tui-typography-heading-h6: bold calc(var(--tui-font-offset) + 1.25rem) / calc(24 / 20) var(--tui-typography-family-display);
23
17
  // Body
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.75rem) / calc(16 / 12)
31
- var(--tui-typography-family-text);
18
+ --tui-typography-body-l: normal calc(var(--tui-font-offset) + 1.0625rem) / calc(28 / 17) var(--tui-typography-family-text);
19
+ --tui-typography-body-m: normal calc(var(--tui-font-offset) + 1rem) / calc(24 / 16) var(--tui-typography-family-text);
20
+ --tui-typography-body-s: normal calc(var(--tui-font-offset) + 0.875rem) / calc(20 / 14) var(--tui-typography-family-text);
21
+ --tui-typography-body-xs: normal calc(var(--tui-font-offset) + 0.75rem) / calc(16 / 12) var(--tui-typography-family-text);
32
22
  // Reduced
33
- --tui-typography-ui-l: normal calc(var(--tui-font-offset) + 1.0625rem) / calc(24 / 17)
34
- var(--tui-typography-family-text);
23
+ --tui-typography-ui-l: normal calc(var(--tui-font-offset) + 1.0625rem) / calc(24 / 17) var(--tui-typography-family-text);
35
24
  --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);
25
+ --tui-typography-ui-s: normal calc(var(--tui-font-offset) + 0.875rem) / calc(16 / 14) var(--tui-typography-family-text);
26
+ --tui-typography-ui-xs: normal calc(var(--tui-font-offset) + 0.75rem) / calc(15 / 12) var(--tui-typography-family-text);
27
+ --tui-typography-ui-2xs: normal calc(var(--tui-font-offset) + 0.6875rem) / calc(12 / 11) var(--tui-typography-family-text);
42
28
  // Radii
43
29
  --tui-radius-xs: 0.25rem;
44
30
  --tui-radius-s: 0.5rem;