@snack-uikit/tag 0.9.12-preview-ba12ca94.0 → 0.11.0

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 +31 -2
  2. package/package.json +6 -6
  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,28 @@
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.0 (2024-10-28)
7
+
8
+
9
+ ### Features
10
+
11
+ * **FF-5782:** sass use/forward approach ([3e53869](https://github.com/cloud-ru-tech/snack-uikit/commit/3e53869ace864a7718e434b7f410c15dbd911cd5))
12
+
13
+
14
+
15
+
16
+
17
+ # 0.10.0 (2024-10-28)
18
+
19
+
20
+ ### Features
21
+
22
+ * **FF-5502:** add cjs build ([ffada28](https://github.com/cloud-ru-tech/snack-uikit/commit/ffada28bfdc37ea760eb1c8759342e680bdf8dd6))
23
+
24
+
25
+
26
+
27
+
6
28
  ## 0.9.11 (2024-09-26)
7
29
 
8
30
  ### Only dependencies have been changed
@@ -53,7 +75,11 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
53
75
 
54
76
  ## 0.9.6 (2024-07-09)
55
77
 
56
- **Note:** Version bump only for package @snack-uikit/tag
78
+ ### Only dependencies have been changed
79
+ * [@snack-uikit/dropdown@0.3.0](https://github.com/cloud-ru-tech/snack-uikit/blob/master/packages/dropdown/CHANGELOG.md)
80
+ * [@snack-uikit/icons@0.23.0](https://github.com/cloud-ru-tech/snack-uikit/blob/master/packages/icons/CHANGELOG.md)
81
+ * [@snack-uikit/scroll@0.7.0](https://github.com/cloud-ru-tech/snack-uikit/blob/master/packages/scroll/CHANGELOG.md)
82
+ * [@snack-uikit/utils@3.5.0](https://github.com/cloud-ru-tech/snack-uikit/blob/master/packages/utils/CHANGELOG.md)
57
83
 
58
84
 
59
85
 
@@ -128,7 +154,10 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
128
154
 
129
155
  ## 0.8.1 (2024-02-27)
130
156
 
131
- **Note:** Version bump only for package @snack-uikit/tag
157
+ ### Only dependencies have been changed
158
+ * [@snack-uikit/dropdown@0.4.0](https://github.com/cloud-ru-tech/snack-uikit/blob/master/packages/dropdown/CHANGELOG.md)
159
+ * [@snack-uikit/icons@0.24.0](https://github.com/cloud-ru-tech/snack-uikit/blob/master/packages/icons/CHANGELOG.md)
160
+ * [@snack-uikit/scroll@0.8.0](https://github.com/cloud-ru-tech/snack-uikit/blob/master/packages/scroll/CHANGELOG.md)
132
161
 
133
162
 
134
163
 
package/package.json CHANGED
@@ -4,7 +4,7 @@
4
4
  "access": "public"
5
5
  },
6
6
  "title": "Tag",
7
- "version": "0.9.12-preview-ba12ca94.0",
7
+ "version": "0.11.0",
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.2.8-preview-ba12ca94.0",
40
- "@snack-uikit/icons": "0.22.2-preview-ba12ca94.0",
41
- "@snack-uikit/scroll": "0.6.3-preview-ba12ca94.0",
42
- "@snack-uikit/utils": "3.4.1-preview-ba12ca94.0",
39
+ "@snack-uikit/dropdown": "0.4.0",
40
+ "@snack-uikit/icons": "0.24.0",
41
+ "@snack-uikit/scroll": "0.8.0",
42
+ "@snack-uikit/utils": "3.5.0",
43
43
  "classnames": "2.3.2"
44
44
  },
45
- "gitHead": "9ac0a3e5e530c09fa4dc050f9bc08d1849962129"
45
+ "gitHead": "8499829efa0c118b704de17411ae2328a024adb5"
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
  }