@snack-uikit/chips 0.11.6 → 0.11.7-preview-993a9cfb.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 (7) hide show
  1. package/dist/components/ChipAssist/styles.module.css +22 -22
  2. package/dist/components/ChipChoice/components/ChipChoiceCustom/styles.module.css +34 -34
  3. package/dist/components/ChipChoice/styles.module.css +17 -17
  4. package/dist/components/ChipToggle/styles.module.css +29 -29
  5. package/dist/helperComponents/ButtonClearValue/styles.module.css +9 -9
  6. package/package.json +6 -6
  7. package/src/styles.module.scss +11 -11
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-preview-993a9cfb.0",
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-preview-993a9cfb.0",
36
+ "@snack-uikit/calendar": "0.7.6-preview-993a9cfb.0",
37
+ "@snack-uikit/droplist": "0.13.5-preview-993a9cfb.0",
38
38
  "@snack-uikit/icons": "0.20.1",
39
- "@snack-uikit/loaders": "0.5.0",
39
+ "@snack-uikit/loaders": "0.5.1-preview-993a9cfb.0",
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": "a421965dc78af63a8c292e595b3f0a8ff1be86f9"
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} {