@snack-uikit/tag 0.7.3 → 0.7.4

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 +11 -0
  2. package/dist/components/Tag/styles.module.css +56 -56
  3. package/dist/helperComponents/TagMore/styles.module.css +3 -3
  4. package/package.json +2 -2
  5. package/src/components/Tag/styles.module.scss +0 -2
  6. package/src/helperComponents/TagMore/styles.module.scss +0 -1
package/CHANGELOG.md CHANGED
@@ -3,6 +3,17 @@
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.7.4 (2024-02-20)
7
+
8
+
9
+ ### Bug Fixes
10
+
11
+ * **FF-4297:** apply system-layer tokens ([7c8fd4b](https://github.com/cloud-ru-tech/snack-uikit/commit/7c8fd4b5334360b2fc31da92973b6835ffa287af))
12
+
13
+
14
+
15
+
16
+
6
17
  ## 0.7.3 (2024-02-09)
7
18
 
8
19
  ### Only dependencies have been changed
package/dist/components/Tag/styles.module.css CHANGED
@@ -80,25 +80,25 @@
80
80
  width:var(--size-tag-s, 32px);
81
81
  }
82
82
  .tag[data-appearance=neutral]{
83
- background-color:var(--sys-neutral-decor-default, #dedede);
83
+ background-color:var(--sys-neutral-decor-default, #dfe2ec);
84
84
  }
85
85
  .tag[data-appearance=neutral][data-removable=false]{
86
- background-color:var(--sys-neutral-decor-disabled, #e7e7e7);
86
+ background-color:var(--sys-neutral-decor-disabled, #e8eaf1);
87
87
  }
88
88
  .tag[data-appearance=neutral] .label{
89
- color:var(--sys-neutral-text-support, #565656);
89
+ color:var(--sys-neutral-text-support, #656771);
90
90
  }
91
91
  .tag[data-appearance=neutral] .tagButton{
92
- color:var(--sys-neutral-text-light, #898989);
92
+ color:var(--sys-neutral-text-light, #868892);
93
93
  }
94
94
  .tag[data-appearance=neutral] .tagButton:focus, .tag[data-appearance=neutral] .tagButton:hover, .tag[data-appearance=neutral] .tagButton:active{
95
- color:var(--sys-neutral-text-main, #333333);
95
+ color:var(--sys-neutral-text-main, #33333b);
96
96
  }
97
97
  .tag[data-appearance=neutral] .tagButton:focus, .tag[data-appearance=neutral] .tagButton:hover{
98
- background-color:var(--sys-neutral-decor-hovered, #d2d2d2);
98
+ background-color:var(--sys-neutral-decor-hovered, #cfd2dc);
99
99
  }
100
100
  .tag[data-appearance=neutral] .tagButton:active{
101
- background-color:var(--sys-neutral-decor-activated, #b8b8b8);
101
+ background-color:var(--sys-neutral-decor-activated, #bfc2cc);
102
102
  }
103
103
  .tag[data-appearance=primary]{
104
104
  background-color:var(--sys-primary-decor-default, #ebdefd);
@@ -122,149 +122,149 @@
122
122
  background-color:var(--sys-primary-decor-activated, #c5b2f1);
123
123
  }
124
124
  .tag[data-appearance=red]{
125
- background-color:var(--sys-red-decor-default, #ffd8d0);
125
+ background-color:var(--sys-red-decor-default, #fdd6cd);
126
126
  }
127
127
  .tag[data-appearance=red][data-removable=false]{
128
- background-color:var(--sys-red-decor-disabled, #fee4de);
128
+ background-color:var(--sys-red-decor-disabled, #fce2dc);
129
129
  }
130
130
  .tag[data-appearance=red] .label{
131
- color:var(--sys-red-text-support, #a93936);
131
+ color:var(--sys-red-text-support, #ab423e);
132
132
  }
133
133
  .tag[data-appearance=red] .tagButton{
134
- color:var(--sys-red-text-light, #ec7465);
134
+ color:var(--sys-red-text-light, #ea6658);
135
135
  }
136
136
  .tag[data-appearance=red] .tagButton:focus, .tag[data-appearance=red] .tagButton:hover, .tag[data-appearance=red] .tagButton:active{
137
- color:var(--sys-red-text-main, #621c1e);
137
+ color:var(--sys-red-text-main, #621c1b);
138
138
  }
139
139
  .tag[data-appearance=red] .tagButton:focus, .tag[data-appearance=red] .tagButton:hover{
140
- background-color:var(--sys-red-decor-hovered, #fcc4b6);
140
+ background-color:var(--sys-red-decor-hovered, #fac1b3);
141
141
  }
142
142
  .tag[data-appearance=red] .tagButton:active{
143
- background-color:var(--sys-red-decor-activated, #ffa491);
143
+ background-color:var(--sys-red-decor-activated, #fbab99);
144
144
  }
145
145
  .tag[data-appearance=orange]{
146
- background-color:var(--sys-orange-decor-default, #fedeaf);
146
+ background-color:var(--sys-orange-decor-default, #fed8b8);
147
147
  }
148
148
  .tag[data-appearance=orange][data-removable=false]{
149
- background-color:var(--sys-orange-decor-disabled, #fde8c4);
149
+ background-color:var(--sys-orange-decor-disabled, #ffe4c8);
150
150
  }
151
151
  .tag[data-appearance=orange] .label{
152
- color:var(--sys-orange-text-support, #a2532f);
152
+ color:var(--sys-orange-text-support, #c06735);
153
153
  }
154
154
  .tag[data-appearance=orange] .tagButton{
155
- color:var(--sys-orange-text-light, #d98135);
155
+ color:var(--sys-orange-text-light, #ea873a);
156
156
  }
157
157
  .tag[data-appearance=orange] .tagButton:focus, .tag[data-appearance=orange] .tagButton:hover, .tag[data-appearance=orange] .tagButton:active{
158
- color:var(--sys-orange-text-main, #572212);
158
+ color:var(--sys-orange-text-main, #643117);
159
159
  }
160
160
  .tag[data-appearance=orange] .tagButton:focus, .tag[data-appearance=orange] .tagButton:hover{
161
- background-color:var(--sys-orange-decor-hovered, #f6ce98);
161
+ background-color:var(--sys-orange-decor-hovered, #f8c699);
162
162
  }
163
163
  .tag[data-appearance=orange] .tagButton:active{
164
- background-color:var(--sys-orange-decor-activated, #f6bd75);
164
+ background-color:var(--sys-orange-decor-activated, #f5b27b);
165
165
  }
166
166
  .tag[data-appearance=yellow]{
167
- background-color:var(--sys-yellow-decor-default, #f9e5ad);
167
+ background-color:var(--sys-yellow-decor-default, #f0dfb1);
168
168
  }
169
169
  .tag[data-appearance=yellow][data-removable=false]{
170
- background-color:var(--sys-yellow-decor-disabled, #f7ecc0);
170
+ background-color:var(--sys-yellow-decor-disabled, #f7ebc7);
171
171
  }
172
172
  .tag[data-appearance=yellow] .label{
173
- color:var(--sys-yellow-text-support, #80461b);
173
+ color:var(--sys-yellow-text-support, #a57b0e);
174
174
  }
175
175
  .tag[data-appearance=yellow] .tagButton{
176
- color:var(--sys-yellow-text-light, #be7d3c);
176
+ color:var(--sys-yellow-text-light, #ddb035);
177
177
  }
178
178
  .tag[data-appearance=yellow] .tagButton:focus, .tag[data-appearance=yellow] .tagButton:hover, .tag[data-appearance=yellow] .tagButton:active{
179
- color:var(--sys-yellow-text-main, #54290f);
179
+ color:var(--sys-yellow-text-main, #5e3d06);
180
180
  }
181
181
  .tag[data-appearance=yellow] .tagButton:focus, .tag[data-appearance=yellow] .tagButton:hover{
182
- background-color:var(--sys-yellow-decor-hovered, #f6d997);
182
+ background-color:var(--sys-yellow-decor-hovered, #ead49a);
183
183
  }
184
184
  .tag[data-appearance=yellow] .tagButton:active{
185
- background-color:var(--sys-yellow-decor-activated, #f3cd81);
185
+ background-color:var(--sys-yellow-decor-activated, #e5c878);
186
186
  }
187
187
  .tag[data-appearance=green]{
188
- background-color:var(--sys-green-decor-default, #cdebe3);
188
+ background-color:var(--sys-green-decor-default, #d2ead0);
189
189
  }
190
190
  .tag[data-appearance=green][data-removable=false]{
191
- background-color:var(--sys-green-decor-disabled, #dbefe9);
191
+ background-color:var(--sys-green-decor-disabled, #e0f0de);
192
192
  }
193
193
  .tag[data-appearance=green] .label{
194
- color:var(--sys-green-text-support, #335747);
194
+ color:var(--sys-green-text-support, #568a56);
195
195
  }
196
196
  .tag[data-appearance=green] .tagButton{
197
- color:var(--sys-green-text-light, #4d9e80);
197
+ color:var(--sys-green-text-light, #67ba6e);
198
198
  }
199
199
  .tag[data-appearance=green] .tagButton:focus, .tag[data-appearance=green] .tagButton:hover, .tag[data-appearance=green] .tagButton:active{
200
- color:var(--sys-green-text-main, #1f392a);
200
+ color:var(--sys-green-text-main, #323f27);
201
201
  }
202
202
  .tag[data-appearance=green] .tagButton:focus, .tag[data-appearance=green] .tagButton:hover{
203
- background-color:var(--sys-green-decor-hovered, #b6e1d5);
203
+ background-color:var(--sys-green-decor-hovered, #c0e1ba);
204
204
  }
205
205
  .tag[data-appearance=green] .tagButton:active{
206
- background-color:var(--sys-green-decor-activated, #9fd7c4);
206
+ background-color:var(--sys-green-decor-activated, #a8d1a2);
207
207
  }
208
208
  .tag[data-appearance=blue]{
209
- background-color:var(--sys-blue-decor-default, #d5e7f6);
209
+ background-color:var(--sys-blue-decor-default, #d6e2f4);
210
210
  }
211
211
  .tag[data-appearance=blue][data-removable=false]{
212
- background-color:var(--sys-blue-decor-disabled, #e0eef8);
212
+ background-color:var(--sys-blue-decor-disabled, #e3edfa);
213
213
  }
214
214
  .tag[data-appearance=blue] .label{
215
- color:var(--sys-blue-text-support, #4265ab);
215
+ color:var(--sys-blue-text-support, #4975a9);
216
216
  }
217
217
  .tag[data-appearance=blue] .tagButton{
218
- color:var(--sys-blue-text-light, #6b9fe3);
218
+ color:var(--sys-blue-text-light, #729edd);
219
219
  }
220
220
  .tag[data-appearance=blue] .tagButton:focus, .tag[data-appearance=blue] .tagButton:hover, .tag[data-appearance=blue] .tagButton:active{
221
- color:var(--sys-blue-text-main, #1f3361);
221
+ color:var(--sys-blue-text-main, #153a61);
222
222
  }
223
223
  .tag[data-appearance=blue] .tagButton:focus, .tag[data-appearance=blue] .tagButton:hover{
224
- background-color:var(--sys-blue-decor-hovered, #c4ddf9);
224
+ background-color:var(--sys-blue-decor-hovered, #c5d9f6);
225
225
  }
226
226
  .tag[data-appearance=blue] .tagButton:active{
227
- background-color:var(--sys-blue-decor-activated, #abcdf4);
227
+ background-color:var(--sys-blue-decor-activated, #aac4ea);
228
228
  }
229
229
  .tag[data-appearance=violet]{
230
- background-color:var(--sys-violet-decor-default, #f8dffc);
230
+ background-color:var(--sys-violet-decor-default, #efd9ef);
231
231
  }
232
232
  .tag[data-appearance=violet][data-removable=false]{
233
- background-color:var(--sys-violet-decor-disabled, #f8e8fb);
233
+ background-color:var(--sys-violet-decor-disabled, #f8e6f7);
234
234
  }
235
235
  .tag[data-appearance=violet] .label{
236
- color:var(--sys-violet-text-support, #864b8e);
236
+ color:var(--sys-violet-text-support, #8c5d93);
237
237
  }
238
238
  .tag[data-appearance=violet] .tagButton{
239
- color:var(--sys-violet-text-light, #c982d1);
239
+ color:var(--sys-violet-text-light, #c886c9);
240
240
  }
241
241
  .tag[data-appearance=violet] .tagButton:focus, .tag[data-appearance=violet] .tagButton:hover, .tag[data-appearance=violet] .tagButton:active{
242
- color:var(--sys-violet-text-main, #51255f);
242
+ color:var(--sys-violet-text-main, #502e56);
243
243
  }
244
244
  .tag[data-appearance=violet] .tagButton:focus, .tag[data-appearance=violet] .tagButton:hover{
245
- background-color:var(--sys-violet-decor-hovered, #f2d3f8);
245
+ background-color:var(--sys-violet-decor-hovered, #edcded);
246
246
  }
247
247
  .tag[data-appearance=violet] .tagButton:active{
248
- background-color:var(--sys-violet-decor-activated, #eabfee);
248
+ background-color:var(--sys-violet-decor-activated, #dbb3db);
249
249
  }
250
250
  .tag[data-appearance=pink]{
251
- background-color:var(--sys-pink-decor-default, #fddde7);
251
+ background-color:var(--sys-pink-decor-default, #f5d9e1);
252
252
  }
253
253
  .tag[data-appearance=pink][data-removable=false]{
254
- background-color:var(--sys-pink-decor-disabled, #fde8ee);
254
+ background-color:var(--sys-pink-decor-disabled, #fbe6ec);
255
255
  }
256
256
  .tag[data-appearance=pink] .label{
257
- color:var(--sys-pink-text-support, #a23f69);
257
+ color:var(--sys-pink-text-support, #aa597d);
258
258
  }
259
259
  .tag[data-appearance=pink] .tagButton{
260
- color:var(--sys-pink-text-light, #e988ad);
260
+ color:var(--sys-pink-text-light, #e68baa);
261
261
  }
262
262
  .tag[data-appearance=pink] .tagButton:focus, .tag[data-appearance=pink] .tagButton:hover, .tag[data-appearance=pink] .tagButton:active{
263
- color:var(--sys-pink-text-main, #5e1937);
263
+ color:var(--sys-pink-text-main, #5e2540);
264
264
  }
265
265
  .tag[data-appearance=pink] .tagButton:focus, .tag[data-appearance=pink] .tagButton:hover{
266
- background-color:var(--sys-pink-decor-hovered, #fdd1de);
266
+ background-color:var(--sys-pink-decor-hovered, #f5c9d6);
267
267
  }
268
268
  .tag[data-appearance=pink] .tagButton:active{
269
- background-color:var(--sys-pink-decor-activated, #f7bcd0);
269
+ background-color:var(--sys-pink-decor-activated, #e8b1c1);
270
270
  }
package/dist/helperComponents/TagMore/styles.module.css CHANGED
@@ -3,10 +3,10 @@
3
3
  display:inline-flex;
4
4
  align-items:center;
5
5
  box-sizing:border-box;
6
- color:var(--sys-neutral-text-support, #565656);
6
+ color:var(--sys-neutral-text-support, #656771);
7
7
  white-space:nowrap;
8
8
  background:none;
9
- border-color:var(--sys-neutral-decor-disabled, #e7e7e7);
9
+ border-color:var(--sys-neutral-decor-disabled, #e8eaf1);
10
10
  border-style:solid;
11
11
  font-family:var(--sans-label-s-font-family, SB Sans Interface);
12
12
  font-weight:var(--sans-label-s-font-weight, Semibold);
@@ -25,7 +25,7 @@
25
25
  outline-width:var(--border-state-focus-s-border-width, 2px);
26
26
  outline-style:var(--border-state-focus-s-border-style, solid);
27
27
  outline-color:var(--border-state-focus-s-border-color, );
28
- outline-color:var(--sys-available-complementary, #131313);
28
+ outline-color:var(--sys-available-complementary, #141415);
29
29
  }
30
30
  .button[data-size=xs]{
31
31
  padding-left:var(--space-tag-more-xs-from-label, 4px);
package/package.json CHANGED
@@ -4,7 +4,7 @@
4
4
  "access": "public"
5
5
  },
6
6
  "title": "Tag",
7
- "version": "0.7.3",
7
+ "version": "0.7.4",
8
8
  "sideEffects": [
9
9
  "*.css",
10
10
  "*.woff",
@@ -38,5 +38,5 @@
38
38
  "@snack-uikit/utils": "3.2.0",
39
39
  "classnames": "2.3.2"
40
40
  },
41
- "gitHead": "3da1fb6b1253a73f4e2d7afb5494b64bbfdd6508"
41
+ "gitHead": "fd079dd3acbfe935d0b88d9efd863047f25e5824"
42
42
  }
package/src/components/Tag/styles.module.scss CHANGED
@@ -2,12 +2,10 @@
2
2
  @import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-element';
3
3
 
4
4
  $sizes: 'xs', 's';
5
-
6
5
  $label-typography: (
7
6
  'xs': $sans-label-s,
8
7
  's': $sans-label-m
9
8
  );
10
-
11
9
  $appearances: (
12
10
  'neutral': (
13
11
  'container': $sys-neutral-decor-default,
package/src/helperComponents/TagMore/styles.module.scss CHANGED
@@ -2,7 +2,6 @@
2
2
  @import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-element';
3
3
 
4
4
  $sizes: 'xs', 's';
5
-
6
5
  $label-typography: (
7
6
  'xs': $sans-label-s,
8
7
  's': $sans-label-m