@snack-uikit/chips 0.14.12 → 0.14.13-preview-665bb1e8.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/dist/components/ChipAssist/styles.module.css +19 -19
  2. package/dist/components/ChipChoice/components/ChipChoiceBase/styles.module.css +42 -42
  3. package/dist/components/ChipChoice/styles.module.css +21 -21
  4. package/dist/components/ChipToggle/styles.module.css +27 -27
  5. package/dist/helperComponents/ButtonClearValue/styles.module.css +5 -5
  6. package/package.json +3 -3
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, #656771);
19
- background-color:var(--sys-neutral-background1-level, #fdfdff);
20
- border-color:var(--sys-neutral-decor-default, #dfe2ec);
18
+ color:var(--sys-neutral-text-support, #6d707f);
19
+ background-color:var(--sys-neutral-background1-level, #fdfdfd);
20
+ border-color:var(--sys-neutral-decor-default, #dde0ea);
21
21
  }
22
22
  .assistChip .spinner{
23
23
  display:inline-flex;
@@ -45,7 +45,7 @@
45
45
  font-weight:var(--sans-label-s-font-weight, Semibold);
46
46
  line-height:var(--sans-label-s-line-height, 14px);
47
47
  font-size:var(--sans-label-s-font-size, 11px);
48
- letter-spacing:var(--sans-label-s-letter-spacing, -0.1px);
48
+ letter-spacing:var(--sans-label-s-letter-spacing, 0px);
49
49
  paragraph-spacing:var(--sans-label-s-paragraph-spacing, 6.05px);
50
50
  }
51
51
  .assistChip[data-size=xs] .labelLayout{
@@ -64,7 +64,7 @@
64
64
  font-weight:var(--sans-label-m-font-weight, Semibold);
65
65
  line-height:var(--sans-label-m-line-height, 16px);
66
66
  font-size:var(--sans-label-m-font-size, 12px);
67
- letter-spacing:var(--sans-label-m-letter-spacing, -0.1px);
67
+ letter-spacing:var(--sans-label-m-letter-spacing, 0px);
68
68
  paragraph-spacing:var(--sans-label-m-paragraph-spacing, 6.6px);
69
69
  }
70
70
  .assistChip[data-size=s] .labelLayout{
@@ -83,7 +83,7 @@
83
83
  font-weight:var(--sans-label-l-font-weight, Semibold);
84
84
  line-height:var(--sans-label-l-line-height, 20px);
85
85
  font-size:var(--sans-label-l-font-size, 14px);
86
- letter-spacing:var(--sans-label-l-letter-spacing, -0.1px);
86
+ letter-spacing:var(--sans-label-l-letter-spacing, 0px);
87
87
  paragraph-spacing:var(--sans-label-l-paragraph-spacing, 7.7px);
88
88
  }
89
89
  .assistChip[data-size=m] .labelLayout{
@@ -102,7 +102,7 @@
102
102
  font-weight:var(--sans-label-l-font-weight, Semibold);
103
103
  line-height:var(--sans-label-l-line-height, 20px);
104
104
  font-size:var(--sans-label-l-font-size, 14px);
105
- letter-spacing:var(--sans-label-l-letter-spacing, -0.1px);
105
+ letter-spacing:var(--sans-label-l-letter-spacing, 0px);
106
106
  paragraph-spacing:var(--sans-label-l-paragraph-spacing, 7.7px);
107
107
  }
108
108
  .assistChip[data-size=l] .labelLayout{
@@ -110,10 +110,10 @@
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, #868892);
113
+ color:var(--sys-neutral-text-light, #8b8e9b);
114
114
  }
115
115
  .assistChip:hover{
116
- color:var(--sys-neutral-text-main, #33333b);
116
+ color:var(--sys-neutral-text-main, #33343f);
117
117
  background-color:var(--sys-neutral-background2-level, #ffffff);
118
118
  border-color:var(--sys-neutral-decor-hovered, #cfd2dc);
119
119
  }
@@ -121,28 +121,28 @@
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, #141415);
124
+ outline-color:var(--sys-available-complementary, #15151b);
125
125
  outline-offset:var(--spacing-state-focus-offset, 2px);
126
- color:var(--sys-neutral-text-main, #33333b);
126
+ color:var(--sys-neutral-text-main, #33343f);
127
127
  background-color:var(--sys-neutral-background2-level, #ffffff);
128
128
  border-color:var(--sys-neutral-decor-hovered, #cfd2dc);
129
129
  }
130
130
  .assistChip:active{
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);
131
+ color:var(--sys-neutral-text-main, #33343f);
132
+ background-color:var(--sys-neutral-background, #eeeff3);
133
+ border-color:var(--sys-neutral-decor-activated, #bec2cf);
134
134
  }
135
135
  .assistChip:disabled{
136
136
  cursor:not-allowed;
137
- color:var(--sys-neutral-text-light, #868892);
138
- background-color:var(--sys-neutral-background, #f1f2f6);
137
+ color:var(--sys-neutral-text-light, #8b8e9b);
138
+ background-color:var(--sys-neutral-background, #eeeff3);
139
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, #33333b);
144
- background-color:var(--sys-neutral-background, #f1f2f6);
145
- border-color:var(--sys-neutral-decor-activated, #bfc2cc);
143
+ color:var(--sys-neutral-text-main, #33343f);
144
+ background-color:var(--sys-neutral-background, #eeeff3);
145
+ border-color:var(--sys-neutral-decor-activated, #bec2cf);
146
146
  }
147
147
  .assistChip[data-loading][data-variant=label-only] .label{
148
148
  opacity:var(--opacity-a0, 0);
package/dist/components/ChipChoice/components/ChipChoiceBase/styles.module.css CHANGED
@@ -21,8 +21,8 @@
21
21
  border-style:solid;
22
22
  outline:0;
23
23
  outline-offset:0;
24
- background-color:var(--sys-neutral-background1-level, #fdfdff);
25
- border-color:var(--sys-neutral-decor-default, #dfe2ec);
24
+ background-color:var(--sys-neutral-background1-level, #fdfdfd);
25
+ border-color:var(--sys-neutral-decor-default, #dde0ea);
26
26
  }
27
27
  .choiceChip .spinner{
28
28
  display:inline-flex;
@@ -50,7 +50,7 @@
50
50
  font-weight:var(--light-label-s-font-weight, Regular);
51
51
  line-height:var(--light-label-s-line-height, 14px);
52
52
  font-size:var(--light-label-s-font-size, 11px);
53
- letter-spacing:var(--light-label-s-letter-spacing, -0.1px);
53
+ letter-spacing:var(--light-label-s-letter-spacing, 0px);
54
54
  paragraph-spacing:var(--light-label-s-paragraph-spacing, 6.05px);
55
55
  }
56
56
  .choiceChip[data-size=xs] .labelLayout{
@@ -70,7 +70,7 @@
70
70
  font-weight:var(--light-label-m-font-weight, Regular);
71
71
  line-height:var(--light-label-m-line-height, 16px);
72
72
  font-size:var(--light-label-m-font-size, 12px);
73
- letter-spacing:var(--light-label-m-letter-spacing, -0.1px);
73
+ letter-spacing:var(--light-label-m-letter-spacing, 0px);
74
74
  paragraph-spacing:var(--light-label-m-paragraph-spacing, 6.6px);
75
75
  }
76
76
  .choiceChip[data-size=s] .labelLayout{
@@ -90,7 +90,7 @@
90
90
  font-weight:var(--sans-label-l-font-weight, Semibold);
91
91
  line-height:var(--sans-label-l-line-height, 20px);
92
92
  font-size:var(--sans-label-l-font-size, 14px);
93
- letter-spacing:var(--sans-label-l-letter-spacing, -0.1px);
93
+ letter-spacing:var(--sans-label-l-letter-spacing, 0px);
94
94
  paragraph-spacing:var(--sans-label-l-paragraph-spacing, 7.7px);
95
95
  }
96
96
  .choiceChip[data-size=m] .labelLayout{
@@ -110,7 +110,7 @@
110
110
  font-weight:var(--light-label-l-font-weight, Regular);
111
111
  line-height:var(--light-label-l-line-height, 20px);
112
112
  font-size:var(--light-label-l-font-size, 14px);
113
- letter-spacing:var(--light-label-l-letter-spacing, -0.1px);
113
+ letter-spacing:var(--light-label-l-letter-spacing, 0px);
114
114
  paragraph-spacing:var(--light-label-l-paragraph-spacing, 7.7px);
115
115
  }
116
116
  .choiceChip[data-size=l] .labelLayout{
@@ -120,17 +120,17 @@
120
120
  }
121
121
  .choiceChip .label,
122
122
  .choiceChip .value{
123
- color:var(--sys-neutral-text-support, #656771);
123
+ color:var(--sys-neutral-text-support, #6d707f);
124
124
  }
125
125
  .choiceChip .icon{
126
- color:var(--sys-neutral-text-light, #868892);
126
+ color:var(--sys-neutral-text-light, #8b8e9b);
127
127
  }
128
128
  .choiceChip[data-size=xs] .value{
129
129
  font-family:var(--sans-label-s-font-family, SB Sans Interface);
130
130
  font-weight:var(--sans-label-s-font-weight, Semibold);
131
131
  line-height:var(--sans-label-s-line-height, 14px);
132
132
  font-size:var(--sans-label-s-font-size, 11px);
133
- letter-spacing:var(--sans-label-s-letter-spacing, -0.1px);
133
+ letter-spacing:var(--sans-label-s-letter-spacing, 0px);
134
134
  paragraph-spacing:var(--sans-label-s-paragraph-spacing, 6.05px);
135
135
  }
136
136
  .choiceChip[data-size=s] .value{
@@ -138,7 +138,7 @@
138
138
  font-weight:var(--sans-label-m-font-weight, Semibold);
139
139
  line-height:var(--sans-label-m-line-height, 16px);
140
140
  font-size:var(--sans-label-m-font-size, 12px);
141
- letter-spacing:var(--sans-label-m-letter-spacing, -0.1px);
141
+ letter-spacing:var(--sans-label-m-letter-spacing, 0px);
142
142
  paragraph-spacing:var(--sans-label-m-paragraph-spacing, 6.6px);
143
143
  }
144
144
  .choiceChip[data-size=m] .value{
@@ -146,7 +146,7 @@
146
146
  font-weight:var(--sans-label-l-font-weight, Semibold);
147
147
  line-height:var(--sans-label-l-line-height, 20px);
148
148
  font-size:var(--sans-label-l-font-size, 14px);
149
- letter-spacing:var(--sans-label-l-letter-spacing, -0.1px);
149
+ letter-spacing:var(--sans-label-l-letter-spacing, 0px);
150
150
  paragraph-spacing:var(--sans-label-l-paragraph-spacing, 7.7px);
151
151
  }
152
152
  .choiceChip[data-size=l] .value{
@@ -154,7 +154,7 @@
154
154
  font-weight:var(--sans-label-l-font-weight, Semibold);
155
155
  line-height:var(--sans-label-l-line-height, 20px);
156
156
  font-size:var(--sans-label-l-font-size, 14px);
157
- letter-spacing:var(--sans-label-l-letter-spacing, -0.1px);
157
+ letter-spacing:var(--sans-label-l-letter-spacing, 0px);
158
158
  paragraph-spacing:var(--sans-label-l-paragraph-spacing, 7.7px);
159
159
  }
160
160
  .choiceChip:hover, .choiceChip:active, .choiceChip:focus-visible{
@@ -162,31 +162,31 @@
162
162
  border-color:var(--sys-neutral-decor-hovered, #cfd2dc);
163
163
  }
164
164
  .choiceChip:hover .label, .choiceChip:active .label, .choiceChip:focus-visible .label{
165
- color:var(--sys-neutral-text-support, #656771);
165
+ color:var(--sys-neutral-text-support, #6d707f);
166
166
  }
167
167
  .choiceChip:hover .value, .choiceChip:active .value, .choiceChip:focus-visible .value{
168
- color:var(--sys-neutral-text-main, #33333b);
168
+ color:var(--sys-neutral-text-main, #33343f);
169
169
  }
170
170
  .choiceChip:focus-visible{
171
171
  outline-width:var(--border-state-focus-s-border-width, 2px);
172
172
  outline-style:var(--border-state-focus-s-border-style, solid);
173
173
  outline-color:var(--border-state-focus-s-border-color, );
174
- outline-color:var(--sys-available-complementary, #141415);
174
+ outline-color:var(--sys-available-complementary, #15151b);
175
175
  outline-offset:var(--spacing-state-focus-offset, 2px);
176
176
  }
177
177
  .choiceChip[data-disabled]{
178
178
  cursor:not-allowed;
179
- background-color:var(--sys-neutral-background, #f1f2f6);
180
- border-color:var(--sys-neutral-decor-disabled, #e8eaf1);
179
+ background-color:var(--sys-neutral-background, #eeeff3);
180
+ border-color:var(--sys-neutral-decor-disabled, #e6e8ef);
181
181
  }
182
182
  .choiceChip[data-disabled] .label,
183
183
  .choiceChip[data-disabled] .value{
184
- color:var(--sys-neutral-text-light, #868892);
184
+ color:var(--sys-neutral-text-light, #8b8e9b);
185
185
  }
186
186
  .choiceChip[data-loading]{
187
187
  cursor:progress;
188
- background-color:var(--sys-neutral-background, #f1f2f6);
189
- border-color:var(--sys-neutral-decor-activated, #bfc2cc);
188
+ background-color:var(--sys-neutral-background, #eeeff3);
189
+ border-color:var(--sys-neutral-decor-activated, #bec2cf);
190
190
  }
191
191
  .choiceChip[data-loading] true .spinner{
192
192
  display:flex;
@@ -195,7 +195,7 @@
195
195
  }
196
196
  .choiceChip[data-loading] .label,
197
197
  .choiceChip[data-loading] .value{
198
- color:var(--sys-neutral-text-support, #656771);
198
+ color:var(--sys-neutral-text-support, #6d707f);
199
199
  }
200
200
 
201
201
  .triggerClassName{
@@ -225,8 +225,8 @@
225
225
  border-style:solid;
226
226
  outline:0;
227
227
  outline-offset:0;
228
- background-color:var(--sys-neutral-background1-level, #fdfdff);
229
- border-color:var(--sys-neutral-decor-default, #dfe2ec);
228
+ background-color:var(--sys-neutral-background1-level, #fdfdfd);
229
+ border-color:var(--sys-neutral-decor-default, #dde0ea);
230
230
  }
231
231
  .choiceChip .spinner{
232
232
  display:inline-flex;
@@ -254,7 +254,7 @@
254
254
  font-weight:var(--light-label-s-font-weight, Regular);
255
255
  line-height:var(--light-label-s-line-height, 14px);
256
256
  font-size:var(--light-label-s-font-size, 11px);
257
- letter-spacing:var(--light-label-s-letter-spacing, -0.1px);
257
+ letter-spacing:var(--light-label-s-letter-spacing, 0px);
258
258
  paragraph-spacing:var(--light-label-s-paragraph-spacing, 6.05px);
259
259
  }
260
260
  .choiceChip[data-size=xs] .labelLayout{
@@ -274,7 +274,7 @@
274
274
  font-weight:var(--light-label-m-font-weight, Regular);
275
275
  line-height:var(--light-label-m-line-height, 16px);
276
276
  font-size:var(--light-label-m-font-size, 12px);
277
- letter-spacing:var(--light-label-m-letter-spacing, -0.1px);
277
+ letter-spacing:var(--light-label-m-letter-spacing, 0px);
278
278
  paragraph-spacing:var(--light-label-m-paragraph-spacing, 6.6px);
279
279
  }
280
280
  .choiceChip[data-size=s] .labelLayout{
@@ -294,7 +294,7 @@
294
294
  font-weight:var(--light-label-m-font-weight, Regular);
295
295
  line-height:var(--light-label-m-line-height, 16px);
296
296
  font-size:var(--light-label-m-font-size, 12px);
297
- letter-spacing:var(--light-label-m-letter-spacing, -0.1px);
297
+ letter-spacing:var(--light-label-m-letter-spacing, 0px);
298
298
  paragraph-spacing:var(--light-label-m-paragraph-spacing, 6.6px);
299
299
  }
300
300
  .choiceChip[data-size=m] .labelLayout{
@@ -314,7 +314,7 @@
314
314
  font-weight:var(--light-label-l-font-weight, Regular);
315
315
  line-height:var(--light-label-l-line-height, 20px);
316
316
  font-size:var(--light-label-l-font-size, 14px);
317
- letter-spacing:var(--light-label-l-letter-spacing, -0.1px);
317
+ letter-spacing:var(--light-label-l-letter-spacing, 0px);
318
318
  paragraph-spacing:var(--light-label-l-paragraph-spacing, 7.7px);
319
319
  }
320
320
  .choiceChip[data-size=l] .labelLayout{
@@ -324,17 +324,17 @@
324
324
  }
325
325
  .choiceChip .label,
326
326
  .choiceChip .value{
327
- color:var(--sys-neutral-text-support, #656771);
327
+ color:var(--sys-neutral-text-support, #6d707f);
328
328
  }
329
329
  .choiceChip .icon{
330
- color:var(--sys-neutral-text-light, #868892);
330
+ color:var(--sys-neutral-text-light, #8b8e9b);
331
331
  }
332
332
  .choiceChip[data-size=xs] .value{
333
333
  font-family:var(--sans-label-s-font-family, SB Sans Interface);
334
334
  font-weight:var(--sans-label-s-font-weight, Semibold);
335
335
  line-height:var(--sans-label-s-line-height, 14px);
336
336
  font-size:var(--sans-label-s-font-size, 11px);
337
- letter-spacing:var(--sans-label-s-letter-spacing, -0.1px);
337
+ letter-spacing:var(--sans-label-s-letter-spacing, 0px);
338
338
  paragraph-spacing:var(--sans-label-s-paragraph-spacing, 6.05px);
339
339
  }
340
340
  .choiceChip[data-size=s] .value{
@@ -342,7 +342,7 @@
342
342
  font-weight:var(--sans-label-m-font-weight, Semibold);
343
343
  line-height:var(--sans-label-m-line-height, 16px);
344
344
  font-size:var(--sans-label-m-font-size, 12px);
345
- letter-spacing:var(--sans-label-m-letter-spacing, -0.1px);
345
+ letter-spacing:var(--sans-label-m-letter-spacing, 0px);
346
346
  paragraph-spacing:var(--sans-label-m-paragraph-spacing, 6.6px);
347
347
  }
348
348
  .choiceChip[data-size=m] .value{
@@ -350,7 +350,7 @@
350
350
  font-weight:var(--sans-label-l-font-weight, Semibold);
351
351
  line-height:var(--sans-label-l-line-height, 20px);
352
352
  font-size:var(--sans-label-l-font-size, 14px);
353
- letter-spacing:var(--sans-label-l-letter-spacing, -0.1px);
353
+ letter-spacing:var(--sans-label-l-letter-spacing, 0px);
354
354
  paragraph-spacing:var(--sans-label-l-paragraph-spacing, 7.7px);
355
355
  }
356
356
  .choiceChip[data-size=l] .value{
@@ -358,7 +358,7 @@
358
358
  font-weight:var(--sans-label-l-font-weight, Semibold);
359
359
  line-height:var(--sans-label-l-line-height, 20px);
360
360
  font-size:var(--sans-label-l-font-size, 14px);
361
- letter-spacing:var(--sans-label-l-letter-spacing, -0.1px);
361
+ letter-spacing:var(--sans-label-l-letter-spacing, 0px);
362
362
  paragraph-spacing:var(--sans-label-l-paragraph-spacing, 7.7px);
363
363
  }
364
364
  .choiceChip:hover, .choiceChip:active, .choiceChip:focus-visible{
@@ -366,31 +366,31 @@
366
366
  border-color:var(--sys-neutral-decor-hovered, #cfd2dc);
367
367
  }
368
368
  .choiceChip:hover .label, .choiceChip:active .label, .choiceChip:focus-visible .label{
369
- color:var(--sys-neutral-text-support, #656771);
369
+ color:var(--sys-neutral-text-support, #6d707f);
370
370
  }
371
371
  .choiceChip:hover .value, .choiceChip:active .value, .choiceChip:focus-visible .value{
372
- color:var(--sys-neutral-text-main, #33333b);
372
+ color:var(--sys-neutral-text-main, #33343f);
373
373
  }
374
374
  .choiceChip:focus-visible{
375
375
  outline-width:var(--border-state-focus-s-border-width, 2px);
376
376
  outline-style:var(--border-state-focus-s-border-style, solid);
377
377
  outline-color:var(--border-state-focus-s-border-color, );
378
- outline-color:var(--sys-available-complementary, #141415);
378
+ outline-color:var(--sys-available-complementary, #15151b);
379
379
  outline-offset:var(--spacing-state-focus-offset, 2px);
380
380
  }
381
381
  .choiceChip[data-disabled]{
382
382
  cursor:not-allowed;
383
- background-color:var(--sys-neutral-background, #f1f2f6);
384
- border-color:var(--sys-neutral-decor-disabled, #e8eaf1);
383
+ background-color:var(--sys-neutral-background, #eeeff3);
384
+ border-color:var(--sys-neutral-decor-disabled, #e6e8ef);
385
385
  }
386
386
  .choiceChip[data-disabled] .label,
387
387
  .choiceChip[data-disabled] .value{
388
- color:var(--sys-neutral-text-light, #868892);
388
+ color:var(--sys-neutral-text-light, #8b8e9b);
389
389
  }
390
390
  .choiceChip[data-loading]{
391
391
  cursor:progress;
392
- background-color:var(--sys-neutral-background, #f1f2f6);
393
- border-color:var(--sys-neutral-decor-activated, #bfc2cc);
392
+ background-color:var(--sys-neutral-background, #eeeff3);
393
+ border-color:var(--sys-neutral-decor-activated, #bec2cf);
394
394
  }
395
395
  .choiceChip[data-loading]:not([data-label]) .value{
396
396
  opacity:var(--opacity-a0, 0);
@@ -402,7 +402,7 @@
402
402
  }
403
403
  .choiceChip[data-loading] .label,
404
404
  .choiceChip[data-loading] .value{
405
- color:var(--sys-neutral-text-support, #656771);
405
+ color:var(--sys-neutral-text-support, #6d707f);
406
406
  }
407
407
 
408
408
  .triggerClassName{
package/dist/components/ChipChoice/styles.module.css CHANGED
@@ -21,8 +21,8 @@
21
21
  border-style:solid;
22
22
  outline:0;
23
23
  outline-offset:0;
24
- background-color:var(--sys-neutral-background1-level, #fdfdff);
25
- border-color:var(--sys-neutral-decor-default, #dfe2ec);
24
+ background-color:var(--sys-neutral-background1-level, #fdfdfd);
25
+ border-color:var(--sys-neutral-decor-default, #dde0ea);
26
26
  }
27
27
  .choiceChip .spinner{
28
28
  display:inline-flex;
@@ -50,7 +50,7 @@
50
50
  font-weight:var(--light-label-s-font-weight, Regular);
51
51
  line-height:var(--light-label-s-line-height, 14px);
52
52
  font-size:var(--light-label-s-font-size, 11px);
53
- letter-spacing:var(--light-label-s-letter-spacing, -0.1px);
53
+ letter-spacing:var(--light-label-s-letter-spacing, 0px);
54
54
  paragraph-spacing:var(--light-label-s-paragraph-spacing, 6.05px);
55
55
  }
56
56
  .choiceChip[data-size=xs] .labelLayout{
@@ -70,7 +70,7 @@
70
70
  font-weight:var(--light-label-m-font-weight, Regular);
71
71
  line-height:var(--light-label-m-line-height, 16px);
72
72
  font-size:var(--light-label-m-font-size, 12px);
73
- letter-spacing:var(--light-label-m-letter-spacing, -0.1px);
73
+ letter-spacing:var(--light-label-m-letter-spacing, 0px);
74
74
  paragraph-spacing:var(--light-label-m-paragraph-spacing, 6.6px);
75
75
  }
76
76
  .choiceChip[data-size=s] .labelLayout{
@@ -90,7 +90,7 @@
90
90
  font-weight:var(--sans-label-l-font-weight, Semibold);
91
91
  line-height:var(--sans-label-l-line-height, 20px);
92
92
  font-size:var(--sans-label-l-font-size, 14px);
93
- letter-spacing:var(--sans-label-l-letter-spacing, -0.1px);
93
+ letter-spacing:var(--sans-label-l-letter-spacing, 0px);
94
94
  paragraph-spacing:var(--sans-label-l-paragraph-spacing, 7.7px);
95
95
  }
96
96
  .choiceChip[data-size=m] .labelLayout{
@@ -110,7 +110,7 @@
110
110
  font-weight:var(--light-label-l-font-weight, Regular);
111
111
  line-height:var(--light-label-l-line-height, 20px);
112
112
  font-size:var(--light-label-l-font-size, 14px);
113
- letter-spacing:var(--light-label-l-letter-spacing, -0.1px);
113
+ letter-spacing:var(--light-label-l-letter-spacing, 0px);
114
114
  paragraph-spacing:var(--light-label-l-paragraph-spacing, 7.7px);
115
115
  }
116
116
  .choiceChip[data-size=l] .labelLayout{
@@ -120,17 +120,17 @@
120
120
  }
121
121
  .choiceChip .label,
122
122
  .choiceChip .value{
123
- color:var(--sys-neutral-text-support, #656771);
123
+ color:var(--sys-neutral-text-support, #6d707f);
124
124
  }
125
125
  .choiceChip .icon{
126
- color:var(--sys-neutral-text-light, #868892);
126
+ color:var(--sys-neutral-text-light, #8b8e9b);
127
127
  }
128
128
  .choiceChip[data-size=xs] .value{
129
129
  font-family:var(--sans-label-s-font-family, SB Sans Interface);
130
130
  font-weight:var(--sans-label-s-font-weight, Semibold);
131
131
  line-height:var(--sans-label-s-line-height, 14px);
132
132
  font-size:var(--sans-label-s-font-size, 11px);
133
- letter-spacing:var(--sans-label-s-letter-spacing, -0.1px);
133
+ letter-spacing:var(--sans-label-s-letter-spacing, 0px);
134
134
  paragraph-spacing:var(--sans-label-s-paragraph-spacing, 6.05px);
135
135
  }
136
136
  .choiceChip[data-size=s] .value{
@@ -138,7 +138,7 @@
138
138
  font-weight:var(--sans-label-m-font-weight, Semibold);
139
139
  line-height:var(--sans-label-m-line-height, 16px);
140
140
  font-size:var(--sans-label-m-font-size, 12px);
141
- letter-spacing:var(--sans-label-m-letter-spacing, -0.1px);
141
+ letter-spacing:var(--sans-label-m-letter-spacing, 0px);
142
142
  paragraph-spacing:var(--sans-label-m-paragraph-spacing, 6.6px);
143
143
  }
144
144
  .choiceChip[data-size=m] .value{
@@ -146,7 +146,7 @@
146
146
  font-weight:var(--sans-label-l-font-weight, Semibold);
147
147
  line-height:var(--sans-label-l-line-height, 20px);
148
148
  font-size:var(--sans-label-l-font-size, 14px);
149
- letter-spacing:var(--sans-label-l-letter-spacing, -0.1px);
149
+ letter-spacing:var(--sans-label-l-letter-spacing, 0px);
150
150
  paragraph-spacing:var(--sans-label-l-paragraph-spacing, 7.7px);
151
151
  }
152
152
  .choiceChip[data-size=l] .value{
@@ -154,7 +154,7 @@
154
154
  font-weight:var(--sans-label-l-font-weight, Semibold);
155
155
  line-height:var(--sans-label-l-line-height, 20px);
156
156
  font-size:var(--sans-label-l-font-size, 14px);
157
- letter-spacing:var(--sans-label-l-letter-spacing, -0.1px);
157
+ letter-spacing:var(--sans-label-l-letter-spacing, 0px);
158
158
  paragraph-spacing:var(--sans-label-l-paragraph-spacing, 7.7px);
159
159
  }
160
160
  .choiceChip:hover, .choiceChip:active, .choiceChip:focus-visible{
@@ -162,31 +162,31 @@
162
162
  border-color:var(--sys-neutral-decor-hovered, #cfd2dc);
163
163
  }
164
164
  .choiceChip:hover .label, .choiceChip:active .label, .choiceChip:focus-visible .label{
165
- color:var(--sys-neutral-text-support, #656771);
165
+ color:var(--sys-neutral-text-support, #6d707f);
166
166
  }
167
167
  .choiceChip:hover .value, .choiceChip:active .value, .choiceChip:focus-visible .value{
168
- color:var(--sys-neutral-text-main, #33333b);
168
+ color:var(--sys-neutral-text-main, #33343f);
169
169
  }
170
170
  .choiceChip:focus-visible{
171
171
  outline-width:var(--border-state-focus-s-border-width, 2px);
172
172
  outline-style:var(--border-state-focus-s-border-style, solid);
173
173
  outline-color:var(--border-state-focus-s-border-color, );
174
- outline-color:var(--sys-available-complementary, #141415);
174
+ outline-color:var(--sys-available-complementary, #15151b);
175
175
  outline-offset:var(--spacing-state-focus-offset, 2px);
176
176
  }
177
177
  .choiceChip[data-disabled]{
178
178
  cursor:not-allowed;
179
- background-color:var(--sys-neutral-background, #f1f2f6);
180
- border-color:var(--sys-neutral-decor-disabled, #e8eaf1);
179
+ background-color:var(--sys-neutral-background, #eeeff3);
180
+ border-color:var(--sys-neutral-decor-disabled, #e6e8ef);
181
181
  }
182
182
  .choiceChip[data-disabled] .label,
183
183
  .choiceChip[data-disabled] .value{
184
- color:var(--sys-neutral-text-light, #868892);
184
+ color:var(--sys-neutral-text-light, #8b8e9b);
185
185
  }
186
186
  .choiceChip[data-loading]{
187
187
  cursor:progress;
188
- background-color:var(--sys-neutral-background, #f1f2f6);
189
- border-color:var(--sys-neutral-decor-activated, #bfc2cc);
188
+ background-color:var(--sys-neutral-background, #eeeff3);
189
+ border-color:var(--sys-neutral-decor-activated, #bec2cf);
190
190
  }
191
191
  .choiceChip[data-loading] true .spinner{
192
192
  display:flex;
@@ -195,7 +195,7 @@
195
195
  }
196
196
  .choiceChip[data-loading] .label,
197
197
  .choiceChip[data-loading] .value{
198
- color:var(--sys-neutral-text-support, #656771);
198
+ color:var(--sys-neutral-text-support, #6d707f);
199
199
  }
200
200
 
201
201
  .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, #656771);
19
- background-color:var(--sys-neutral-background1-level, #fdfdff);
20
- border-color:var(--sys-neutral-decor-default, #dfe2ec);
18
+ color:var(--sys-neutral-text-support, #6d707f);
19
+ background-color:var(--sys-neutral-background1-level, #fdfdfd);
20
+ border-color:var(--sys-neutral-decor-default, #dde0ea);
21
21
  }
22
22
  .toggleChipContent .spinner{
23
23
  display:inline-flex;
@@ -36,9 +36,9 @@
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, #141415);
39
+ outline-color:var(--sys-available-complementary, #15151b);
40
40
  outline-offset:var(--spacing-state-focus-offset, 2px);
41
- color:var(--sys-neutral-text-main, #33333b);
41
+ color:var(--sys-neutral-text-main, #33343f);
42
42
  background-color:var(--sys-neutral-background2-level, #ffffff);
43
43
  border-color:var(--sys-neutral-decor-hovered, #cfd2dc);
44
44
  }
@@ -67,7 +67,7 @@
67
67
  font-weight:var(--sans-label-s-font-weight, Semibold);
68
68
  line-height:var(--sans-label-s-line-height, 14px);
69
69
  font-size:var(--sans-label-s-font-size, 11px);
70
- letter-spacing:var(--sans-label-s-letter-spacing, -0.1px);
70
+ letter-spacing:var(--sans-label-s-letter-spacing, 0px);
71
71
  paragraph-spacing:var(--sans-label-s-paragraph-spacing, 6.05px);
72
72
  }
73
73
  .toggleChip[data-size=xs] .labelLayout{
@@ -86,7 +86,7 @@
86
86
  font-weight:var(--sans-label-m-font-weight, Semibold);
87
87
  line-height:var(--sans-label-m-line-height, 16px);
88
88
  font-size:var(--sans-label-m-font-size, 12px);
89
- letter-spacing:var(--sans-label-m-letter-spacing, -0.1px);
89
+ letter-spacing:var(--sans-label-m-letter-spacing, 0px);
90
90
  paragraph-spacing:var(--sans-label-m-paragraph-spacing, 6.6px);
91
91
  }
92
92
  .toggleChip[data-size=s] .labelLayout{
@@ -105,7 +105,7 @@
105
105
  font-weight:var(--sans-label-l-font-weight, Semibold);
106
106
  line-height:var(--sans-label-l-line-height, 20px);
107
107
  font-size:var(--sans-label-l-font-size, 14px);
108
- letter-spacing:var(--sans-label-l-letter-spacing, -0.1px);
108
+ letter-spacing:var(--sans-label-l-letter-spacing, 0px);
109
109
  paragraph-spacing:var(--sans-label-l-paragraph-spacing, 7.7px);
110
110
  }
111
111
  .toggleChip[data-size=m] .labelLayout{
@@ -124,7 +124,7 @@
124
124
  font-weight:var(--sans-label-l-font-weight, Semibold);
125
125
  line-height:var(--sans-label-l-line-height, 20px);
126
126
  font-size:var(--sans-label-l-font-size, 14px);
127
- letter-spacing:var(--sans-label-l-letter-spacing, -0.1px);
127
+ letter-spacing:var(--sans-label-l-letter-spacing, 0px);
128
128
  paragraph-spacing:var(--sans-label-l-paragraph-spacing, 7.7px);
129
129
  }
130
130
  .toggleChip[data-size=l] .labelLayout{
@@ -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, #656771);
142
+ color:var(--sys-neutral-text-support, #6d707f);
143
143
  }
144
144
  .toggleChip:hover .toggleChipContent{
145
- color:var(--sys-neutral-text-main, #33333b);
145
+ color:var(--sys-neutral-text-main, #33343f);
146
146
  background-color:var(--sys-neutral-background2-level, #ffffff);
147
147
  border-color:var(--sys-neutral-decor-hovered, #cfd2dc);
148
148
  }
149
149
  .toggleChip:active .toggleChipContent{
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);
150
+ color:var(--sys-neutral-text-main, #33343f);
151
+ background-color:var(--sys-neutral-background, #eeeff3);
152
+ border-color:var(--sys-neutral-decor-activated, #bec2cf);
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, #33333b);
172
- background-color:var(--sys-neutral-background, #f1f2f6);
173
- border-color:var(--sys-neutral-decor-activated, #bfc2cc);
171
+ color:var(--sys-neutral-text-main, #33343f);
172
+ background-color:var(--sys-neutral-background, #eeeff3);
173
+ border-color:var(--sys-neutral-decor-activated, #bec2cf);
174
174
  }
175
175
  .toggleChip[data-disabled] .toggleChipContent{
176
176
  cursor:not-allowed;
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);
177
+ color:var(--sys-neutral-text-light, #8b8e9b);
178
+ background-color:var(--sys-neutral-background, #eeeff3);
179
+ border-color:var(--sys-neutral-decor-disabled, #e6e8ef);
180
180
  }
181
181
  .toggleChip[data-disabled] .icon{
182
- color:var(--sys-neutral-text-light, #868892);
182
+ color:var(--sys-neutral-text-light, #8b8e9b);
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, #33333b);
209
- background-color:var(--sys-neutral-background, #f1f2f6);
210
- border-color:var(--sys-neutral-decor-activated, #bfc2cc);
208
+ color:var(--sys-neutral-text-main, #33343f);
209
+ background-color:var(--sys-neutral-background, #eeeff3);
210
+ border-color:var(--sys-neutral-decor-activated, #bec2cf);
211
211
  }
212
212
  .toggleChip[data-checked][data-disabled] .toggleChipInput + .toggleChipContent{
213
- color:var(--sys-neutral-text-light, #868892);
214
- background-color:var(--sys-neutral-decor-disabled, #e8eaf1);
213
+ color:var(--sys-neutral-text-light, #8b8e9b);
214
+ background-color:var(--sys-neutral-decor-disabled, #e6e8ef);
215
215
  border-color:transparent;
216
216
  }
217
217
  .toggleChip[data-checked][data-disabled] .icon{
218
- color:var(--sys-neutral-text-light, #868892);
218
+ color:var(--sys-neutral-text-light, #8b8e9b);
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, #868892);
7
+ color:var(--sys-neutral-text-light, #8b8e9b);
8
8
  background-color:transparent;
9
9
  border:none;
10
10
  }
@@ -28,16 +28,16 @@
28
28
  }
29
29
  .buttonClearValue:hover{
30
30
  cursor:pointer;
31
- color:var(--sys-neutral-text-support, #656771);
31
+ color:var(--sys-neutral-text-support, #6d707f);
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, #656771);
38
- outline-color:var(--sys-available-complementary, #141415);
37
+ color:var(--sys-neutral-text-support, #6d707f);
38
+ outline-color:var(--sys-available-complementary, #15151b);
39
39
  outline-offset:var(--spacing-state-focus-offset, 2px);
40
40
  }
41
41
  .buttonClearValue:active{
42
- color:var(--sys-neutral-text-main, #33333b);
42
+ color:var(--sys-neutral-text-main, #33343f);
43
43
  }
package/package.json CHANGED
@@ -4,7 +4,7 @@
4
4
  "access": "public"
5
5
  },
6
6
  "title": "Chips",
7
- "version": "0.14.12",
7
+ "version": "0.14.13-preview-665bb1e8.0",
8
8
  "sideEffects": [
9
9
  "*.css",
10
10
  "*.woff",
@@ -36,7 +36,7 @@
36
36
  "@snack-uikit/calendar": "0.7.9",
37
37
  "@snack-uikit/dropdown": "0.2.4",
38
38
  "@snack-uikit/icons": "0.21.0",
39
- "@snack-uikit/list": "0.13.10",
39
+ "@snack-uikit/list": "0.13.11-preview-665bb1e8.0",
40
40
  "@snack-uikit/loaders": "0.5.2",
41
41
  "@snack-uikit/utils": "3.3.0",
42
42
  "classnames": "2.3.2",
@@ -50,5 +50,5 @@
50
50
  "peerDependencies": {
51
51
  "@snack-uikit/locale": "*"
52
52
  },
53
- "gitHead": "0c81fa6b2657f51768401ba7ce5015fe8d293805"
53
+ "gitHead": "3c194191d70f95ea7984691acc64c46a5472aa4c"
54
54
  }