@snack-uikit/tag 0.10.0 → 0.11.1

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/CHANGELOG.md +24 -1
  2. package/package.json +5 -5
  3. package/src/components/Tag/styles.module.scss +78 -78
  4. package/src/helperComponents/TagMore/styles.module.scss +12 -12
  5. package/src/helperComponents/TagRowSimple/styles.module.scss +2 -2
  6. package/src/helperComponents/TagRowTruncated/styles.module.scss +4 -5
package/CHANGELOG.md CHANGED
@@ -3,6 +3,26 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ ## 0.11.1 (2024-10-31)
7
+
8
+ ### Only dependencies have been changed
9
+ * [@snack-uikit/scroll@0.9.0](https://github.com/cloud-ru-tech/snack-uikit/blob/master/packages/scroll/CHANGELOG.md)
10
+
11
+
12
+
13
+
14
+
15
+ # 0.11.0 (2024-10-28)
16
+
17
+
18
+ ### Features
19
+
20
+ * **FF-5782:** sass use/forward approach ([3e53869](https://github.com/cloud-ru-tech/snack-uikit/commit/3e53869ace864a7718e434b7f410c15dbd911cd5))
21
+
22
+
23
+
24
+
25
+
6
26
  # 0.10.0 (2024-10-28)
7
27
 
8
28
 
@@ -143,7 +163,10 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
143
163
 
144
164
  ## 0.8.1 (2024-02-27)
145
165
 
146
- **Note:** Version bump only for package @snack-uikit/tag
166
+ ### Only dependencies have been changed
167
+ * [@snack-uikit/dropdown@0.4.0](https://github.com/cloud-ru-tech/snack-uikit/blob/master/packages/dropdown/CHANGELOG.md)
168
+ * [@snack-uikit/icons@0.24.0](https://github.com/cloud-ru-tech/snack-uikit/blob/master/packages/icons/CHANGELOG.md)
169
+ * [@snack-uikit/scroll@0.8.0](https://github.com/cloud-ru-tech/snack-uikit/blob/master/packages/scroll/CHANGELOG.md)
147
170
 
148
171
 
149
172
 
package/package.json CHANGED
@@ -4,7 +4,7 @@
4
4
  "access": "public"
5
5
  },
6
6
  "title": "Tag",
7
- "version": "0.10.0",
7
+ "version": "0.11.1",
8
8
  "sideEffects": [
9
9
  "*.css",
10
10
  "*.woff",
@@ -36,11 +36,11 @@
36
36
  "license": "Apache-2.0",
37
37
  "scripts": {},
38
38
  "dependencies": {
39
- "@snack-uikit/dropdown": "0.3.0",
40
- "@snack-uikit/icons": "0.23.0",
41
- "@snack-uikit/scroll": "0.7.0",
39
+ "@snack-uikit/dropdown": "0.4.0",
40
+ "@snack-uikit/icons": "0.24.0",
41
+ "@snack-uikit/scroll": "0.9.0",
42
42
  "@snack-uikit/utils": "3.5.0",
43
43
  "classnames": "2.3.2"
44
44
  },
45
- "gitHead": "62cc21d8606a61a78f80e3a7455b20d6f38474fa"
45
+ "gitHead": "b7163c6f939105eb34cabec64c9e983ac7958c26"
46
46
  }
package/src/components/Tag/styles.module.scss CHANGED
@@ -1,92 +1,92 @@
1
- @import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-tag';
2
- @import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-element';
1
+ @use '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-tag';
2
+ @use '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-element';
3
3
 
4
4
  $sizes: 'xs', 's';
5
5
  $label-typography: (
6
- 'xs': $sans-label-s,
7
- 's': $sans-label-m,
6
+ 'xs': styles-tokens-tag.$sans-label-s,
7
+ 's': styles-tokens-tag.$sans-label-m,
8
8
  );
9
9
  $appearances: (
10
10
  'neutral': (
11
- 'container': $sys-neutral-decor-default,
12
- 'container-disabled': $sys-neutral-decor-disabled,
13
- 'label': $sys-neutral-text-support,
14
- 'icon': $sys-neutral-text-light,
15
- 'icon-active': $sys-neutral-text-main,
16
- 'button-hovered': $sys-neutral-decor-hovered,
17
- 'button-active': $sys-neutral-decor-activated,
11
+ 'container': styles-tokens-tag.$sys-neutral-decor-default,
12
+ 'container-disabled': styles-tokens-tag.$sys-neutral-decor-disabled,
13
+ 'label': styles-tokens-tag.$sys-neutral-text-support,
14
+ 'icon': styles-tokens-tag.$sys-neutral-text-light,
15
+ 'icon-active': styles-tokens-tag.$sys-neutral-text-main,
16
+ 'button-hovered': styles-tokens-tag.$sys-neutral-decor-hovered,
17
+ 'button-active': styles-tokens-tag.$sys-neutral-decor-activated,
18
18
  ),
19
19
  'primary': (
20
- 'container': $sys-primary-decor-default,
21
- 'container-disabled': $sys-primary-decor-disabled,
22
- 'label': $sys-primary-text-support,
23
- 'icon': $sys-primary-text-light,
24
- 'icon-active': $sys-primary-text-main,
25
- 'button-hovered': $sys-primary-decor-hovered,
26
- 'button-active': $sys-primary-decor-activated,
20
+ 'container': styles-tokens-tag.$sys-primary-decor-default,
21
+ 'container-disabled': styles-tokens-tag.$sys-primary-decor-disabled,
22
+ 'label': styles-tokens-tag.$sys-primary-text-support,
23
+ 'icon': styles-tokens-tag.$sys-primary-text-light,
24
+ 'icon-active': styles-tokens-tag.$sys-primary-text-main,
25
+ 'button-hovered': styles-tokens-tag.$sys-primary-decor-hovered,
26
+ 'button-active': styles-tokens-tag.$sys-primary-decor-activated,
27
27
  ),
28
28
  'red': (
29
- 'container': $sys-red-decor-default,
30
- 'container-disabled': $sys-red-decor-disabled,
31
- 'label': $sys-red-text-support,
32
- 'icon': $sys-red-text-light,
33
- 'icon-active': $sys-red-text-main,
34
- 'button-hovered': $sys-red-decor-hovered,
35
- 'button-active': $sys-red-decor-activated,
29
+ 'container': styles-tokens-tag.$sys-red-decor-default,
30
+ 'container-disabled': styles-tokens-tag.$sys-red-decor-disabled,
31
+ 'label': styles-tokens-tag.$sys-red-text-support,
32
+ 'icon': styles-tokens-tag.$sys-red-text-light,
33
+ 'icon-active': styles-tokens-tag.$sys-red-text-main,
34
+ 'button-hovered': styles-tokens-tag.$sys-red-decor-hovered,
35
+ 'button-active': styles-tokens-tag.$sys-red-decor-activated,
36
36
  ),
37
37
  'orange': (
38
- 'container': $sys-orange-decor-default,
39
- 'container-disabled': $sys-orange-decor-disabled,
40
- 'label': $sys-orange-text-support,
41
- 'icon': $sys-orange-text-light,
42
- 'icon-active': $sys-orange-text-main,
43
- 'button-hovered': $sys-orange-decor-hovered,
44
- 'button-active': $sys-orange-decor-activated,
38
+ 'container': styles-tokens-tag.$sys-orange-decor-default,
39
+ 'container-disabled': styles-tokens-tag.$sys-orange-decor-disabled,
40
+ 'label': styles-tokens-tag.$sys-orange-text-support,
41
+ 'icon': styles-tokens-tag.$sys-orange-text-light,
42
+ 'icon-active': styles-tokens-tag.$sys-orange-text-main,
43
+ 'button-hovered': styles-tokens-tag.$sys-orange-decor-hovered,
44
+ 'button-active': styles-tokens-tag.$sys-orange-decor-activated,
45
45
  ),
46
46
  'yellow': (
47
- 'container': $sys-yellow-decor-default,
48
- 'container-disabled': $sys-yellow-decor-disabled,
49
- 'label': $sys-yellow-text-support,
50
- 'icon': $sys-yellow-text-light,
51
- 'icon-active': $sys-yellow-text-main,
52
- 'button-hovered': $sys-yellow-decor-hovered,
53
- 'button-active': $sys-yellow-decor-activated,
47
+ 'container': styles-tokens-tag.$sys-yellow-decor-default,
48
+ 'container-disabled': styles-tokens-tag.$sys-yellow-decor-disabled,
49
+ 'label': styles-tokens-tag.$sys-yellow-text-support,
50
+ 'icon': styles-tokens-tag.$sys-yellow-text-light,
51
+ 'icon-active': styles-tokens-tag.$sys-yellow-text-main,
52
+ 'button-hovered': styles-tokens-tag.$sys-yellow-decor-hovered,
53
+ 'button-active': styles-tokens-tag.$sys-yellow-decor-activated,
54
54
  ),
55
55
  'green': (
56
- 'container': $sys-green-decor-default,
57
- 'container-disabled': $sys-green-decor-disabled,
58
- 'label': $sys-green-text-support,
59
- 'icon': $sys-green-text-light,
60
- 'icon-active': $sys-green-text-main,
61
- 'button-hovered': $sys-green-decor-hovered,
62
- 'button-active': $sys-green-decor-activated,
56
+ 'container': styles-tokens-tag.$sys-green-decor-default,
57
+ 'container-disabled': styles-tokens-tag.$sys-green-decor-disabled,
58
+ 'label': styles-tokens-tag.$sys-green-text-support,
59
+ 'icon': styles-tokens-tag.$sys-green-text-light,
60
+ 'icon-active': styles-tokens-tag.$sys-green-text-main,
61
+ 'button-hovered': styles-tokens-tag.$sys-green-decor-hovered,
62
+ 'button-active': styles-tokens-tag.$sys-green-decor-activated,
63
63
  ),
64
64
  'blue': (
65
- 'container': $sys-blue-decor-default,
66
- 'container-disabled': $sys-blue-decor-disabled,
67
- 'label': $sys-blue-text-support,
68
- 'icon': $sys-blue-text-light,
69
- 'icon-active': $sys-blue-text-main,
70
- 'button-hovered': $sys-blue-decor-hovered,
71
- 'button-active': $sys-blue-decor-activated,
65
+ 'container': styles-tokens-tag.$sys-blue-decor-default,
66
+ 'container-disabled': styles-tokens-tag.$sys-blue-decor-disabled,
67
+ 'label': styles-tokens-tag.$sys-blue-text-support,
68
+ 'icon': styles-tokens-tag.$sys-blue-text-light,
69
+ 'icon-active': styles-tokens-tag.$sys-blue-text-main,
70
+ 'button-hovered': styles-tokens-tag.$sys-blue-decor-hovered,
71
+ 'button-active': styles-tokens-tag.$sys-blue-decor-activated,
72
72
  ),
73
73
  'violet': (
74
- 'container': $sys-violet-decor-default,
75
- 'container-disabled': $sys-violet-decor-disabled,
76
- 'label': $sys-violet-text-support,
77
- 'icon': $sys-violet-text-light,
78
- 'icon-active': $sys-violet-text-main,
79
- 'button-hovered': $sys-violet-decor-hovered,
80
- 'button-active': $sys-violet-decor-activated,
74
+ 'container': styles-tokens-tag.$sys-violet-decor-default,
75
+ 'container-disabled': styles-tokens-tag.$sys-violet-decor-disabled,
76
+ 'label': styles-tokens-tag.$sys-violet-text-support,
77
+ 'icon': styles-tokens-tag.$sys-violet-text-light,
78
+ 'icon-active': styles-tokens-tag.$sys-violet-text-main,
79
+ 'button-hovered': styles-tokens-tag.$sys-violet-decor-hovered,
80
+ 'button-active': styles-tokens-tag.$sys-violet-decor-activated,
81
81
  ),
82
82
  'pink': (
83
- 'container': $sys-pink-decor-default,
84
- 'container-disabled': $sys-pink-decor-disabled,
85
- 'label': $sys-pink-text-support,
86
- 'icon': $sys-pink-text-light,
87
- 'icon-active': $sys-pink-text-main,
88
- 'button-hovered': $sys-pink-decor-hovered,
89
- 'button-active': $sys-pink-decor-activated,
83
+ 'container': styles-tokens-tag.$sys-pink-decor-default,
84
+ 'container-disabled': styles-tokens-tag.$sys-pink-decor-disabled,
85
+ 'label': styles-tokens-tag.$sys-pink-text-support,
86
+ 'icon': styles-tokens-tag.$sys-pink-text-light,
87
+ 'icon-active': styles-tokens-tag.$sys-pink-text-main,
88
+ 'button-hovered': styles-tokens-tag.$sys-pink-decor-hovered,
89
+ 'button-active': styles-tokens-tag.$sys-pink-decor-activated,
90
90
  ),
91
91
  );
92
92
 
@@ -109,7 +109,7 @@ $appearances: (
109
109
  border: none;
110
110
 
111
111
  &:focus {
112
- @include outline-inside-var($container-focused-s);
112
+ @include styles-tokens-tag.outline-inside-var(styles-tokens-element.$container-focused-s);
113
113
  }
114
114
 
115
115
  &:active {
@@ -126,49 +126,49 @@ $appearances: (
126
126
 
127
127
  @each $size in $sizes {
128
128
  &[data-size='#{$size}'] {
129
- @include composite-var($tag, 'container', $size, 'label-only');
129
+ @include styles-tokens-tag.composite-var(styles-tokens-tag.$tag, 'container', $size, 'label-only');
130
130
 
131
131
  &[data-removable='true'] {
132
- @include composite-var($tag, 'container', $size, 'button-after');
132
+ @include styles-tokens-tag.composite-var(styles-tokens-tag.$tag, 'container', $size, 'button-after');
133
133
  }
134
134
 
135
135
  .label {
136
- @include composite-var($label-typography, $size);
136
+ @include styles-tokens-tag.composite-var($label-typography, $size);
137
137
  }
138
138
 
139
139
  .tagButton {
140
- @include composite-var($tag-button, 'container', $size, 'icon-only');
140
+ @include styles-tokens-tag.composite-var(styles-tokens-tag.$tag-button, 'container', $size, 'icon-only');
141
141
  }
142
142
  }
143
143
  }
144
144
 
145
145
  @each $appearanceKey, $appearance in $appearances {
146
146
  &[data-appearance='#{$appearanceKey}'] {
147
- background-color: simple-var($appearance, 'container');
147
+ background-color: styles-tokens-tag.simple-var($appearance, 'container');
148
148
 
149
149
  .label {
150
150
  overflow: hidden;
151
- color: simple-var($appearance, 'label');
151
+ color: styles-tokens-tag.simple-var($appearance, 'label');
152
152
  text-overflow: ellipsis;
153
153
  white-space: nowrap;
154
154
  }
155
155
 
156
156
  .tagButton {
157
- color: simple-var($appearance, 'icon');
157
+ color: styles-tokens-tag.simple-var($appearance, 'icon');
158
158
 
159
159
  &:focus,
160
160
  &:hover,
161
161
  &:active {
162
- color: simple-var($appearance, 'icon-active');
162
+ color: styles-tokens-tag.simple-var($appearance, 'icon-active');
163
163
  }
164
164
 
165
165
  &:focus,
166
166
  &:hover {
167
- background-color: simple-var($appearance, 'button-hovered');
167
+ background-color: styles-tokens-tag.simple-var($appearance, 'button-hovered');
168
168
  }
169
169
 
170
170
  &:active {
171
- background-color: simple-var($appearance, 'button-active');
171
+ background-color: styles-tokens-tag.simple-var($appearance, 'button-active');
172
172
  }
173
173
  }
174
174
  }
package/src/helperComponents/TagMore/styles.module.scss CHANGED
@@ -1,10 +1,10 @@
1
- @import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-tag';
2
- @import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-element';
1
+ @use '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-tag';
2
+ @use '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-element';
3
3
 
4
4
  $sizes: 'xs', 's';
5
5
  $label-typography: (
6
- 'xs': $sans-label-s,
7
- 's': $sans-label-m
6
+ 'xs': styles-tokens-tag.$sans-label-s,
7
+ 's': styles-tokens-tag.$sans-label-m
8
8
  );
9
9
 
10
10
  .button {
@@ -15,24 +15,24 @@ $label-typography: (
15
15
 
16
16
  box-sizing: border-box;
17
17
 
18
- color: $sys-neutral-text-support;
18
+ color: styles-tokens-tag.$sys-neutral-text-support;
19
19
  white-space: nowrap;
20
20
 
21
21
  background: none;
22
- border-color: $sys-neutral-decor-disabled;
22
+ border-color: styles-tokens-tag.$sys-neutral-decor-disabled;
23
23
  border-style: solid;
24
24
 
25
25
  &:focus-visible {
26
- @include outline-var($container-focused-s);
26
+ @include styles-tokens-tag.outline-var(styles-tokens-element.$container-focused-s);
27
27
 
28
- outline-color: $sys-available-complementary;
28
+ outline-color: styles-tokens-tag.$sys-available-complementary;
29
29
  }
30
30
 
31
31
  @each $size in $sizes {
32
- @include composite-var($label-typography, $size);
32
+ @include styles-tokens-tag.composite-var($label-typography, $size);
33
33
 
34
34
  &[data-size=#{$size}] {
35
- @include composite-var($tag-more, 'container', $size, 'label-only');
35
+ @include styles-tokens-tag.composite-var(styles-tokens-tag.$tag-more, 'container', $size, 'label-only');
36
36
  }
37
37
  }
38
38
  }
@@ -40,7 +40,7 @@ $label-typography: (
40
40
  .tagRowDroplistContainer {
41
41
  @each $size in $sizes {
42
42
  &[data-size=#{$size}] {
43
- @include composite-var($tag-list, $size);
43
+ @include styles-tokens-tag.composite-var(styles-tokens-tag.$tag-list, $size);
44
44
  }
45
45
  }
46
46
  }
@@ -50,5 +50,5 @@ $label-typography: (
50
50
  }
51
51
 
52
52
  .triggerClassName {
53
- --offset: #{$space-drop-list-drop-offset};
53
+ --offset: #{styles-tokens-tag.$space-drop-list-drop-offset};
54
54
  }
package/src/helperComponents/TagRowSimple/styles.module.scss CHANGED
@@ -1,4 +1,4 @@
1
- @import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-tag';
1
+ @use '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-tag';
2
2
 
3
3
  $sizes: 'xs', 's';
4
4
 
@@ -8,7 +8,7 @@ $sizes: 'xs', 's';
8
8
 
9
9
  @each $size in $sizes {
10
10
  &[data-size=#{$size}] {
11
- @include composite-var($tag-row, $size);
11
+ @include styles-tokens-tag.composite-var(styles-tokens-tag.$tag-row, $size);
12
12
  }
13
13
  }
14
14
  }
package/src/helperComponents/TagRowTruncated/styles.module.scss CHANGED
@@ -1,5 +1,4 @@
1
- @import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-tag';
2
- @import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-dropList';
1
+ @use '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-tag';
3
2
 
4
3
  $sizes: 'xs', 's';
5
4
 
@@ -15,7 +14,7 @@ $sizes: 'xs', 's';
15
14
 
16
15
  @each $size in $sizes {
17
16
  &[data-size=#{$size}] {
18
- @include composite-var($tag-row, $size);
17
+ @include styles-tokens-tag.composite-var(styles-tokens-tag.$tag-row, $size);
19
18
  }
20
19
  }
21
20
  }
@@ -27,7 +26,7 @@ $sizes: 'xs', 's';
27
26
 
28
27
  @each $size in $sizes {
29
28
  &[data-size=#{$size}] {
30
- @include composite-var($tag-row, $size);
29
+ @include styles-tokens-tag.composite-var(styles-tokens-tag.$tag-row, $size);
31
30
  }
32
31
  }
33
32
  }
@@ -46,7 +45,7 @@ $sizes: 'xs', 's';
46
45
 
47
46
  @each $size in $sizes {
48
47
  &[data-size=#{$size}] {
49
- @include composite-var($tag-row, $size);
48
+ @include styles-tokens-tag.composite-var(styles-tokens-tag.$tag-row, $size);
50
49
  }
51
50
  }
52
51
  }