@snack-uikit/chips 0.11.6 → 0.11.7

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 (8) hide show
  1. package/CHANGELOG.md +11 -0
  2. package/dist/components/ChipAssist/styles.module.css +22 -22
  3. package/dist/components/ChipChoice/components/ChipChoiceCustom/styles.module.css +34 -34
  4. package/dist/components/ChipChoice/styles.module.css +17 -17
  5. package/dist/components/ChipToggle/styles.module.css +29 -29
  6. package/dist/helperComponents/ButtonClearValue/styles.module.css +9 -9
  7. package/package.json +6 -6
  8. package/src/styles.module.scss +11 -11
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.11.7 (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.11.6 (2024-02-12)
7
18
 
8
19
 
package/dist/components/ChipAssist/styles.module.css CHANGED
@@ -15,9 +15,9 @@
15
15
  border-style:solid;
16
16
  outline:0;
17
17
  outline-offset:0;
18
- color:var(--sys-neutral-text-support, #565656);
19
- background-color:var(--sys-neutral-background1-level, #f9f9f9);
20
- border-color:var(--sys-neutral-decor-default, #dedede);
18
+ color:var(--sys-neutral-text-support, #656771);
19
+ background-color:var(--sys-neutral-background1-level, #fafafc);
20
+ border-color:var(--sys-neutral-decor-default, #dfe2ec);
21
21
  }
22
22
  .assistChip .spinner{
23
23
  display:inline-flex;
@@ -26,8 +26,8 @@
26
26
  display:inline-flex;
27
27
  }
28
28
  .assistChip .icon svg{
29
- width:var(--dimension-3m, 24px) !important;
30
- height:var(--dimension-3m, 24px) !important;
29
+ width:var(--size-icon-container-s, 24px) !important;
30
+ height:var(--size-icon-container-s, 24px) !important;
31
31
  }
32
32
  .assistChip .labelLayout{
33
33
  display:inline-flex;
@@ -110,39 +110,39 @@
110
110
  padding-right:var(--space-chips-label-layout-padding-l, 12px);
111
111
  }
112
112
  .assistChip .icon{
113
- color:var(--sys-neutral-text-light, #898989);
113
+ color:var(--sys-neutral-text-light, #868892);
114
114
  }
115
115
  .assistChip:hover{
116
- color:var(--sys-neutral-text-main, #333333);
117
- background-color:var(--sys-neutral-background2-level, #fdfdfd);
118
- border-color:var(--sys-neutral-decor-hovered, #d2d2d2);
116
+ color:var(--sys-neutral-text-main, #33333b);
117
+ background-color:var(--sys-neutral-background2-level, #ffffff);
118
+ border-color:var(--sys-neutral-decor-hovered, #cfd2dc);
119
119
  }
120
120
  .assistChip:focus-visible{
121
121
  outline-width:var(--border-state-focus-s-border-width, 2px);
122
122
  outline-style:var(--border-state-focus-s-border-style, solid);
123
123
  outline-color:var(--border-state-focus-s-border-color, );
124
- outline-color:var(--sys-available-complementary, #131313);
124
+ outline-color:var(--sys-available-complementary, #141415);
125
125
  outline-offset:var(--spacing-state-focus-offset, 2px);
126
- color:var(--sys-neutral-text-main, #333333);
127
- background-color:var(--sys-neutral-background2-level, #fdfdfd);
128
- border-color:var(--sys-neutral-decor-hovered, #d2d2d2);
126
+ color:var(--sys-neutral-text-main, #33333b);
127
+ background-color:var(--sys-neutral-background2-level, #ffffff);
128
+ border-color:var(--sys-neutral-decor-hovered, #cfd2dc);
129
129
  }
130
130
  .assistChip:active{
131
- color:var(--sys-neutral-text-main, #333333);
132
- background-color:var(--sys-neutral-background, #f0f0f0);
133
- border-color:var(--sys-neutral-decor-activated, #b8b8b8);
131
+ color:var(--sys-neutral-text-main, #33333b);
132
+ background-color:var(--sys-neutral-background, #f1f2f6);
133
+ border-color:var(--sys-neutral-decor-activated, #bfc2cc);
134
134
  }
135
135
  .assistChip:disabled{
136
136
  cursor:not-allowed;
137
- color:var(--sys-neutral-text-light, #898989);
138
- background-color:var(--sys-neutral-background, #f0f0f0);
139
- border-color:var(--sys-neutral-decor-hovered, #d2d2d2);
137
+ color:var(--sys-neutral-text-light, #868892);
138
+ background-color:var(--sys-neutral-background, #f1f2f6);
139
+ border-color:var(--sys-neutral-decor-hovered, #cfd2dc);
140
140
  }
141
141
  .assistChip[data-loading]{
142
142
  cursor:progress;
143
- color:var(--sys-neutral-text-main, #333333);
144
- background-color:var(--sys-neutral-background, #f0f0f0);
145
- border-color:var(--sys-neutral-decor-activated, #b8b8b8);
143
+ color:var(--sys-neutral-text-main, #33333b);
144
+ background-color:var(--sys-neutral-background, #f1f2f6);
145
+ border-color:var(--sys-neutral-decor-activated, #bfc2cc);
146
146
  }
147
147
  .assistChip[data-loading][data-variant=label-only] .label{
148
148
  opacity:var(--opacity-a0, 0);
package/dist/components/ChipChoice/components/ChipChoiceCustom/styles.module.css CHANGED
@@ -20,8 +20,8 @@
20
20
  border-style:solid;
21
21
  outline:0;
22
22
  outline-offset:0;
23
- background-color:var(--sys-neutral-background1-level, #f9f9f9);
24
- border-color:var(--sys-neutral-decor-default, #dedede);
23
+ background-color:var(--sys-neutral-background1-level, #fafafc);
24
+ border-color:var(--sys-neutral-decor-default, #dfe2ec);
25
25
  }
26
26
  .choiceChip .spinner{
27
27
  display:inline-flex;
@@ -30,8 +30,8 @@
30
30
  display:inline-flex;
31
31
  }
32
32
  .choiceChip .icon svg{
33
- width:var(--dimension-3m, 24px) !important;
34
- height:var(--dimension-3m, 24px) !important;
33
+ width:var(--size-icon-container-s, 24px) !important;
34
+ height:var(--size-icon-container-s, 24px) !important;
35
35
  }
36
36
  .choiceChip .labelLayout{
37
37
  display:inline-flex;
@@ -118,10 +118,10 @@
118
118
  gap:var(--space-chips-label-layout-gap, 2px);
119
119
  }
120
120
  .choiceChip .label, .choiceChip .value{
121
- color:var(--sys-neutral-text-support, #565656);
121
+ color:var(--sys-neutral-text-support, #656771);
122
122
  }
123
123
  .choiceChip .icon{
124
- color:var(--sys-neutral-text-light, #898989);
124
+ color:var(--sys-neutral-text-light, #868892);
125
125
  }
126
126
  .choiceChip[data-size=xs] .value{
127
127
  font-family:var(--sans-label-s-font-family, SB Sans Interface);
@@ -156,34 +156,34 @@
156
156
  paragraph-spacing:var(--sans-label-l-paragraph-spacing, 7.7px);
157
157
  }
158
158
  .choiceChip:hover, .choiceChip:active, .choiceChip:focus-visible{
159
- background-color:var(--sys-neutral-background2-level, #fdfdfd);
160
- border-color:var(--sys-neutral-decor-hovered, #d2d2d2);
159
+ background-color:var(--sys-neutral-background2-level, #ffffff);
160
+ border-color:var(--sys-neutral-decor-hovered, #cfd2dc);
161
161
  }
162
162
  .choiceChip:hover .label, .choiceChip:active .label, .choiceChip:focus-visible .label{
163
- color:var(--sys-neutral-text-support, #565656);
163
+ color:var(--sys-neutral-text-support, #656771);
164
164
  }
165
165
  .choiceChip:hover .value, .choiceChip:active .value, .choiceChip:focus-visible .value{
166
- color:var(--sys-neutral-text-main, #333333);
166
+ color:var(--sys-neutral-text-main, #33333b);
167
167
  }
168
168
  .choiceChip:focus-visible{
169
169
  outline-width:var(--border-state-focus-s-border-width, 2px);
170
170
  outline-style:var(--border-state-focus-s-border-style, solid);
171
171
  outline-color:var(--border-state-focus-s-border-color, );
172
- outline-color:var(--sys-available-complementary, #131313);
172
+ outline-color:var(--sys-available-complementary, #141415);
173
173
  outline-offset:var(--spacing-state-focus-offset, 2px);
174
174
  }
175
175
  .choiceChip[data-disabled]{
176
176
  cursor:not-allowed;
177
- background-color:var(--sys-neutral-background, #f0f0f0);
178
- border-color:var(--sys-neutral-decor-disabled, #e7e7e7);
177
+ background-color:var(--sys-neutral-background, #f1f2f6);
178
+ border-color:var(--sys-neutral-decor-disabled, #e8eaf1);
179
179
  }
180
180
  .choiceChip[data-disabled] .label, .choiceChip[data-disabled] .value{
181
- color:var(--sys-neutral-text-light, #898989);
181
+ color:var(--sys-neutral-text-light, #868892);
182
182
  }
183
183
  .choiceChip[data-loading]{
184
184
  cursor:progress;
185
- background-color:var(--sys-neutral-background, #f0f0f0);
186
- border-color:var(--sys-neutral-decor-activated, #b8b8b8);
185
+ background-color:var(--sys-neutral-background, #f1f2f6);
186
+ border-color:var(--sys-neutral-decor-activated, #bfc2cc);
187
187
  }
188
188
  .choiceChip[data-loading] true .spinner{
189
189
  display:flex;
@@ -191,7 +191,7 @@
191
191
  justify-content:center;
192
192
  }
193
193
  .choiceChip[data-loading] .label, .choiceChip[data-loading] .value{
194
- color:var(--sys-neutral-text-support, #565656);
194
+ color:var(--sys-neutral-text-support, #656771);
195
195
  }
196
196
 
197
197
  .triggerClassName{
@@ -220,8 +220,8 @@
220
220
  border-style:solid;
221
221
  outline:0;
222
222
  outline-offset:0;
223
- background-color:var(--sys-neutral-background1-level, #f9f9f9);
224
- border-color:var(--sys-neutral-decor-default, #dedede);
223
+ background-color:var(--sys-neutral-background1-level, #fafafc);
224
+ border-color:var(--sys-neutral-decor-default, #dfe2ec);
225
225
  }
226
226
  .choiceChip .spinner{
227
227
  display:inline-flex;
@@ -230,8 +230,8 @@
230
230
  display:inline-flex;
231
231
  }
232
232
  .choiceChip .icon svg{
233
- width:var(--dimension-3m, 24px) !important;
234
- height:var(--dimension-3m, 24px) !important;
233
+ width:var(--size-icon-container-s, 24px) !important;
234
+ height:var(--size-icon-container-s, 24px) !important;
235
235
  }
236
236
  .choiceChip .labelLayout{
237
237
  display:inline-flex;
@@ -318,10 +318,10 @@
318
318
  gap:var(--space-chips-label-layout-gap, 2px);
319
319
  }
320
320
  .choiceChip .label, .choiceChip .value{
321
- color:var(--sys-neutral-text-support, #565656);
321
+ color:var(--sys-neutral-text-support, #656771);
322
322
  }
323
323
  .choiceChip .icon{
324
- color:var(--sys-neutral-text-light, #898989);
324
+ color:var(--sys-neutral-text-light, #868892);
325
325
  }
326
326
  .choiceChip[data-size=xs] .value{
327
327
  font-family:var(--sans-label-s-font-family, SB Sans Interface);
@@ -356,34 +356,34 @@
356
356
  paragraph-spacing:var(--sans-label-l-paragraph-spacing, 7.7px);
357
357
  }
358
358
  .choiceChip:hover, .choiceChip:active, .choiceChip:focus-visible{
359
- background-color:var(--sys-neutral-background2-level, #fdfdfd);
360
- border-color:var(--sys-neutral-decor-hovered, #d2d2d2);
359
+ background-color:var(--sys-neutral-background2-level, #ffffff);
360
+ border-color:var(--sys-neutral-decor-hovered, #cfd2dc);
361
361
  }
362
362
  .choiceChip:hover .label, .choiceChip:active .label, .choiceChip:focus-visible .label{
363
- color:var(--sys-neutral-text-support, #565656);
363
+ color:var(--sys-neutral-text-support, #656771);
364
364
  }
365
365
  .choiceChip:hover .value, .choiceChip:active .value, .choiceChip:focus-visible .value{
366
- color:var(--sys-neutral-text-main, #333333);
366
+ color:var(--sys-neutral-text-main, #33333b);
367
367
  }
368
368
  .choiceChip:focus-visible{
369
369
  outline-width:var(--border-state-focus-s-border-width, 2px);
370
370
  outline-style:var(--border-state-focus-s-border-style, solid);
371
371
  outline-color:var(--border-state-focus-s-border-color, );
372
- outline-color:var(--sys-available-complementary, #131313);
372
+ outline-color:var(--sys-available-complementary, #141415);
373
373
  outline-offset:var(--spacing-state-focus-offset, 2px);
374
374
  }
375
375
  .choiceChip[data-disabled]{
376
376
  cursor:not-allowed;
377
- background-color:var(--sys-neutral-background, #f0f0f0);
378
- border-color:var(--sys-neutral-decor-disabled, #e7e7e7);
377
+ background-color:var(--sys-neutral-background, #f1f2f6);
378
+ border-color:var(--sys-neutral-decor-disabled, #e8eaf1);
379
379
  }
380
380
  .choiceChip[data-disabled] .label, .choiceChip[data-disabled] .value{
381
- color:var(--sys-neutral-text-light, #898989);
381
+ color:var(--sys-neutral-text-light, #868892);
382
382
  }
383
383
  .choiceChip[data-loading]{
384
384
  cursor:progress;
385
- background-color:var(--sys-neutral-background, #f0f0f0);
386
- border-color:var(--sys-neutral-decor-activated, #b8b8b8);
385
+ background-color:var(--sys-neutral-background, #f1f2f6);
386
+ border-color:var(--sys-neutral-decor-activated, #bfc2cc);
387
387
  }
388
388
  .choiceChip[data-loading]:not([data-label]) .value{
389
389
  opacity:var(--opacity-a0, 0);
@@ -394,7 +394,7 @@
394
394
  justify-content:center;
395
395
  }
396
396
  .choiceChip[data-loading] .label, .choiceChip[data-loading] .value{
397
- color:var(--sys-neutral-text-support, #565656);
397
+ color:var(--sys-neutral-text-support, #656771);
398
398
  }
399
399
 
400
400
  .triggerClassName{
package/dist/components/ChipChoice/styles.module.css CHANGED
@@ -20,8 +20,8 @@
20
20
  border-style:solid;
21
21
  outline:0;
22
22
  outline-offset:0;
23
- background-color:var(--sys-neutral-background1-level, #f9f9f9);
24
- border-color:var(--sys-neutral-decor-default, #dedede);
23
+ background-color:var(--sys-neutral-background1-level, #fafafc);
24
+ border-color:var(--sys-neutral-decor-default, #dfe2ec);
25
25
  }
26
26
  .choiceChip .spinner{
27
27
  display:inline-flex;
@@ -30,8 +30,8 @@
30
30
  display:inline-flex;
31
31
  }
32
32
  .choiceChip .icon svg{
33
- width:var(--dimension-3m, 24px) !important;
34
- height:var(--dimension-3m, 24px) !important;
33
+ width:var(--size-icon-container-s, 24px) !important;
34
+ height:var(--size-icon-container-s, 24px) !important;
35
35
  }
36
36
  .choiceChip .labelLayout{
37
37
  display:inline-flex;
@@ -118,10 +118,10 @@
118
118
  gap:var(--space-chips-label-layout-gap, 2px);
119
119
  }
120
120
  .choiceChip .label, .choiceChip .value{
121
- color:var(--sys-neutral-text-support, #565656);
121
+ color:var(--sys-neutral-text-support, #656771);
122
122
  }
123
123
  .choiceChip .icon{
124
- color:var(--sys-neutral-text-light, #898989);
124
+ color:var(--sys-neutral-text-light, #868892);
125
125
  }
126
126
  .choiceChip[data-size=xs] .value{
127
127
  font-family:var(--sans-label-s-font-family, SB Sans Interface);
@@ -156,34 +156,34 @@
156
156
  paragraph-spacing:var(--sans-label-l-paragraph-spacing, 7.7px);
157
157
  }
158
158
  .choiceChip:hover, .choiceChip:active, .choiceChip:focus-visible{
159
- background-color:var(--sys-neutral-background2-level, #fdfdfd);
160
- border-color:var(--sys-neutral-decor-hovered, #d2d2d2);
159
+ background-color:var(--sys-neutral-background2-level, #ffffff);
160
+ border-color:var(--sys-neutral-decor-hovered, #cfd2dc);
161
161
  }
162
162
  .choiceChip:hover .label, .choiceChip:active .label, .choiceChip:focus-visible .label{
163
- color:var(--sys-neutral-text-support, #565656);
163
+ color:var(--sys-neutral-text-support, #656771);
164
164
  }
165
165
  .choiceChip:hover .value, .choiceChip:active .value, .choiceChip:focus-visible .value{
166
- color:var(--sys-neutral-text-main, #333333);
166
+ color:var(--sys-neutral-text-main, #33333b);
167
167
  }
168
168
  .choiceChip:focus-visible{
169
169
  outline-width:var(--border-state-focus-s-border-width, 2px);
170
170
  outline-style:var(--border-state-focus-s-border-style, solid);
171
171
  outline-color:var(--border-state-focus-s-border-color, );
172
- outline-color:var(--sys-available-complementary, #131313);
172
+ outline-color:var(--sys-available-complementary, #141415);
173
173
  outline-offset:var(--spacing-state-focus-offset, 2px);
174
174
  }
175
175
  .choiceChip[data-disabled]{
176
176
  cursor:not-allowed;
177
- background-color:var(--sys-neutral-background, #f0f0f0);
178
- border-color:var(--sys-neutral-decor-disabled, #e7e7e7);
177
+ background-color:var(--sys-neutral-background, #f1f2f6);
178
+ border-color:var(--sys-neutral-decor-disabled, #e8eaf1);
179
179
  }
180
180
  .choiceChip[data-disabled] .label, .choiceChip[data-disabled] .value{
181
- color:var(--sys-neutral-text-light, #898989);
181
+ color:var(--sys-neutral-text-light, #868892);
182
182
  }
183
183
  .choiceChip[data-loading]{
184
184
  cursor:progress;
185
- background-color:var(--sys-neutral-background, #f0f0f0);
186
- border-color:var(--sys-neutral-decor-activated, #b8b8b8);
185
+ background-color:var(--sys-neutral-background, #f1f2f6);
186
+ border-color:var(--sys-neutral-decor-activated, #bfc2cc);
187
187
  }
188
188
  .choiceChip[data-loading] true .spinner{
189
189
  display:flex;
@@ -191,7 +191,7 @@
191
191
  justify-content:center;
192
192
  }
193
193
  .choiceChip[data-loading] .label, .choiceChip[data-loading] .value{
194
- color:var(--sys-neutral-text-support, #565656);
194
+ color:var(--sys-neutral-text-support, #656771);
195
195
  }
196
196
 
197
197
  .triggerClassName{
package/dist/components/ChipToggle/styles.module.css CHANGED
@@ -15,9 +15,9 @@
15
15
  border-style:solid;
16
16
  outline:0;
17
17
  outline-offset:0;
18
- color:var(--sys-neutral-text-support, #565656);
19
- background-color:var(--sys-neutral-background1-level, #f9f9f9);
20
- border-color:var(--sys-neutral-decor-default, #dedede);
18
+ color:var(--sys-neutral-text-support, #656771);
19
+ background-color:var(--sys-neutral-background1-level, #fafafc);
20
+ border-color:var(--sys-neutral-decor-default, #dfe2ec);
21
21
  }
22
22
  .toggleChipContent .spinner{
23
23
  display:inline-flex;
@@ -36,11 +36,11 @@
36
36
  outline-width:var(--border-state-focus-s-border-width, 2px);
37
37
  outline-style:var(--border-state-focus-s-border-style, solid);
38
38
  outline-color:var(--border-state-focus-s-border-color, );
39
- outline-color:var(--sys-available-complementary, #131313);
39
+ outline-color:var(--sys-available-complementary, #141415);
40
40
  outline-offset:var(--spacing-state-focus-offset, 2px);
41
- color:var(--sys-neutral-text-main, #333333);
42
- background-color:var(--sys-neutral-background2-level, #fdfdfd);
43
- border-color:var(--sys-neutral-decor-hovered, #d2d2d2);
41
+ color:var(--sys-neutral-text-main, #33333b);
42
+ background-color:var(--sys-neutral-background2-level, #ffffff);
43
+ border-color:var(--sys-neutral-decor-hovered, #cfd2dc);
44
44
  }
45
45
 
46
46
  .toggleChip{
@@ -55,8 +55,8 @@
55
55
  display:inline-flex;
56
56
  }
57
57
  .toggleChip .icon svg{
58
- width:var(--dimension-3m, 24px) !important;
59
- height:var(--dimension-3m, 24px) !important;
58
+ width:var(--size-icon-container-s, 24px) !important;
59
+ height:var(--size-icon-container-s, 24px) !important;
60
60
  }
61
61
  .toggleChip .labelLayout{
62
62
  display:inline-flex;
@@ -139,17 +139,17 @@
139
139
  border-width:var(--border-width-chips-single, 1px);
140
140
  }
141
141
  .toggleChip .icon{
142
- color:var(--sys-neutral-text-support, #565656);
142
+ color:var(--sys-neutral-text-support, #656771);
143
143
  }
144
144
  .toggleChip:hover .toggleChipContent{
145
- color:var(--sys-neutral-text-main, #333333);
146
- background-color:var(--sys-neutral-background2-level, #fdfdfd);
147
- border-color:var(--sys-neutral-decor-hovered, #d2d2d2);
145
+ color:var(--sys-neutral-text-main, #33333b);
146
+ background-color:var(--sys-neutral-background2-level, #ffffff);
147
+ border-color:var(--sys-neutral-decor-hovered, #cfd2dc);
148
148
  }
149
149
  .toggleChip:active .toggleChipContent{
150
- color:var(--sys-neutral-text-main, #333333);
151
- background-color:var(--sys-neutral-background, #f0f0f0);
152
- border-color:var(--sys-neutral-decor-activated, #b8b8b8);
150
+ color:var(--sys-neutral-text-main, #33333b);
151
+ background-color:var(--sys-neutral-background, #f1f2f6);
152
+ border-color:var(--sys-neutral-decor-activated, #bfc2cc);
153
153
  }
154
154
  .toggleChip[data-loading] .toggleChipContent{
155
155
  cursor:progress;
@@ -168,18 +168,18 @@
168
168
  justify-content:center;
169
169
  }
170
170
  .toggleChip[data-loading] .toggleChipContent{
171
- color:var(--sys-neutral-text-main, #333333);
172
- background-color:var(--sys-neutral-background, #f0f0f0);
173
- border-color:var(--sys-neutral-decor-activated, #b8b8b8);
171
+ color:var(--sys-neutral-text-main, #33333b);
172
+ background-color:var(--sys-neutral-background, #f1f2f6);
173
+ border-color:var(--sys-neutral-decor-activated, #bfc2cc);
174
174
  }
175
175
  .toggleChip[data-disabled] .toggleChipContent{
176
176
  cursor:not-allowed;
177
- color:var(--sys-neutral-text-light, #898989);
178
- background-color:var(--sys-neutral-background, #f0f0f0);
179
- border-color:var(--sys-neutral-decor-disabled, #e7e7e7);
177
+ color:var(--sys-neutral-text-light, #868892);
178
+ background-color:var(--sys-neutral-background, #f1f2f6);
179
+ border-color:var(--sys-neutral-decor-disabled, #e8eaf1);
180
180
  }
181
181
  .toggleChip[data-disabled] .icon{
182
- color:var(--sys-neutral-text-light, #898989);
182
+ color:var(--sys-neutral-text-light, #868892);
183
183
  }
184
184
  .toggleChip[data-checked] .icon{
185
185
  color:var(--sys-primary-text-support, #5b4796);
@@ -205,15 +205,15 @@
205
205
  border-color:transparent;
206
206
  }
207
207
  .toggleChip[data-checked][data-loading] .toggleChipInput + .toggleChipContent{
208
- color:var(--sys-neutral-text-main, #333333);
209
- background-color:var(--sys-neutral-background, #f0f0f0);
210
- border-color:var(--sys-neutral-decor-activated, #b8b8b8);
208
+ color:var(--sys-neutral-text-main, #33333b);
209
+ background-color:var(--sys-neutral-background, #f1f2f6);
210
+ border-color:var(--sys-neutral-decor-activated, #bfc2cc);
211
211
  }
212
212
  .toggleChip[data-checked][data-disabled] .toggleChipInput + .toggleChipContent{
213
- color:var(--sys-neutral-text-light, #898989);
214
- background-color:var(--sys-neutral-decor-disabled, #e7e7e7);
213
+ color:var(--sys-neutral-text-light, #868892);
214
+ background-color:var(--sys-neutral-decor-disabled, #e8eaf1);
215
215
  border-color:transparent;
216
216
  }
217
217
  .toggleChip[data-checked][data-disabled] .icon{
218
- color:var(--sys-neutral-text-light, #898989);
218
+ color:var(--sys-neutral-text-light, #868892);
219
219
  }
package/dist/helperComponents/ButtonClearValue/styles.module.css CHANGED
@@ -4,7 +4,7 @@
4
4
  justify-content:center;
5
5
  margin:0;
6
6
  padding:0;
7
- color:var(--sys-neutral-text-light, #898989);
7
+ color:var(--sys-neutral-text-light, #868892);
8
8
  background-color:transparent;
9
9
  border:none;
10
10
  }
@@ -14,8 +14,8 @@
14
14
  border-radius:var(--radius-chip-choice-button-clear-value-xxs, 16px);
15
15
  }
16
16
  .buttonClearValue[data-size=xxs] svg{
17
- width:var(--dimension-2m, 16px) !important;
18
- height:var(--dimension-2m, 16px) !important;
17
+ width:var(--size-icon-container-xs, 16px) !important;
18
+ height:var(--size-icon-container-xs, 16px) !important;
19
19
  }
20
20
  .buttonClearValue[data-size=xs]{
21
21
  width:var(--size-chip-choice-button-clear-value-xs, 24px);
@@ -23,21 +23,21 @@
23
23
  border-radius:var(--radius-chip-choice-button-clear-value-xs, 24px);
24
24
  }
25
25
  .buttonClearValue[data-size=xs] svg{
26
- width:var(--dimension-3m, 24px) !important;
27
- height:var(--dimension-3m, 24px) !important;
26
+ width:var(--size-icon-container-s, 24px) !important;
27
+ height:var(--size-icon-container-s, 24px) !important;
28
28
  }
29
29
  .buttonClearValue:hover{
30
30
  cursor:pointer;
31
- color:var(--sys-neutral-text-support, #565656);
31
+ color:var(--sys-neutral-text-support, #656771);
32
32
  }
33
33
  .buttonClearValue:focus-visible{
34
34
  outline-width:var(--border-state-focus-s-border-width, 2px);
35
35
  outline-style:var(--border-state-focus-s-border-style, solid);
36
36
  outline-color:var(--border-state-focus-s-border-color, );
37
- color:var(--sys-neutral-text-support, #565656);
38
- outline-color:var(--sys-available-complementary, #131313);
37
+ color:var(--sys-neutral-text-support, #656771);
38
+ outline-color:var(--sys-available-complementary, #141415);
39
39
  outline-offset:var(--spacing-state-focus-offset, 2px);
40
40
  }
41
41
  .buttonClearValue:active{
42
- color:var(--sys-neutral-text-main, #333333);
42
+ color:var(--sys-neutral-text-main, #33333b);
43
43
  }
package/package.json CHANGED
@@ -4,7 +4,7 @@
4
4
  "access": "public"
5
5
  },
6
6
  "title": "Chips",
7
- "version": "0.11.6",
7
+ "version": "0.11.7",
8
8
  "sideEffects": [
9
9
  "*.css",
10
10
  "*.woff",
@@ -32,11 +32,11 @@
32
32
  "license": "Apache-2.0",
33
33
  "scripts": {},
34
34
  "dependencies": {
35
- "@snack-uikit/button": "0.16.0",
36
- "@snack-uikit/calendar": "0.7.5",
37
- "@snack-uikit/droplist": "0.13.4",
35
+ "@snack-uikit/button": "0.16.1",
36
+ "@snack-uikit/calendar": "0.7.6",
37
+ "@snack-uikit/droplist": "0.13.5",
38
38
  "@snack-uikit/icons": "0.20.1",
39
- "@snack-uikit/loaders": "0.5.0",
39
+ "@snack-uikit/loaders": "0.5.1",
40
40
  "@snack-uikit/utils": "3.2.0",
41
41
  "classnames": "2.3.2",
42
42
  "uncontrollable": "8.0.2"
@@ -44,5 +44,5 @@
44
44
  "peerDependencies": {
45
45
  "@snack-uikit/locale": "*"
46
46
  },
47
- "gitHead": "5e7b0b6d34f40c4266070bf918e9cdf127ac882c"
47
+ "gitHead": "fd079dd3acbfe935d0b88d9efd863047f25e5824"
48
48
  }
package/src/styles.module.scss CHANGED
@@ -26,17 +26,6 @@
26
26
  }
27
27
  }
28
28
 
29
- @mixin icon-size {
30
- .icon {
31
- display: inline-flex;
32
-
33
- svg {
34
- width: $icon-s !important; /* stylelint-disable-line declaration-no-important */
35
- height: $icon-s !important; /* stylelint-disable-line declaration-no-important */
36
- }
37
- }
38
- }
39
-
40
29
  @mixin chip-anatomy-styles($chip-theme, $sizes, $typography, $contentClassName: null) {
41
30
  @include icon-size;
42
31
 
@@ -69,6 +58,17 @@
69
58
  }
70
59
  }
71
60
 
61
+ @mixin icon-size {
62
+ .icon {
63
+ display: inline-flex;
64
+
65
+ svg {
66
+ width: $icon-s !important; /* stylelint-disable-line declaration-no-important */
67
+ height: $icon-s !important; /* stylelint-disable-line declaration-no-important */
68
+ }
69
+ }
70
+ }
71
+
72
72
  @mixin chip-loading-state($chip-theme, $condition, $classNamesToHide, $contentClassName: null, $relativeSpinner: null) {
73
73
  @if ($contentClassName) {
74
74
  .#{$contentClassName} {