@infonomic/uikit 5.17.0 → 5.19.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 (28) hide show
  1. package/dist/components/badge/badge.module.css +14 -13
  2. package/dist/components/badge/badge_module.css +7 -7
  3. package/dist/components/button/button.module.css +103 -119
  4. package/dist/components/button/button_module.css +72 -71
  5. package/dist/components/chips/chip.d.ts.map +1 -1
  6. package/dist/components/chips/chip.js +3 -6
  7. package/dist/components/chips/chip.module.css +82 -96
  8. package/dist/components/chips/chip.module.js +2 -3
  9. package/dist/components/chips/chip_module.css +63 -65
  10. package/dist/components/pager/pagination.module.css +9 -8
  11. package/dist/components/pager/pagination_module.css +2 -2
  12. package/dist/icons/check-icon.d.ts.map +1 -1
  13. package/dist/icons/check-icon.js +0 -1
  14. package/dist/react.d.ts +1 -0
  15. package/dist/react.d.ts.map +1 -1
  16. package/dist/react.js +2 -0
  17. package/dist/styles/components-vanilla.css +1 -1
  18. package/dist/styles/styles.css +1 -1
  19. package/package.json +11 -11
  20. package/src/components/badge/badge.module.css +14 -13
  21. package/src/components/button/button.module.css +103 -119
  22. package/src/components/chips/chip.module.css +82 -96
  23. package/src/components/chips/chip.tsx +4 -6
  24. package/src/components/pager/pagination.module.css +9 -8
  25. package/src/icons/check-icon.tsx +0 -1
  26. package/src/react.ts +4 -0
  27. package/src/styles/base/colors.css +18 -17
  28. package/src/styles/functional/colors.css +613 -180
package/dist/components/chips/chip.module.css CHANGED
@@ -1,11 +1,12 @@
1
1
  @layer infonomic-base,
2
- infonomic-functional,
3
- infonomic-utilities,
4
- infonomic-theme,
5
- infonomic-typography,
6
- infonomic-components;
2
+ infonomic-functional,
3
+ infonomic-utilities,
4
+ infonomic-theme,
5
+ infonomic-typography,
6
+ infonomic-components;
7
7
 
8
8
  @layer infonomic-components {
9
+
9
10
  .chip,
10
11
  :global(.chip) {
11
12
  --chip-font-size: 0.9rem;
@@ -13,13 +14,13 @@
13
14
  --chip-padding-y: 0.35rem;
14
15
  --chip-padding-x: 0.4rem;
15
16
  --chip-icon-size: 1rem;
16
-
17
+ --chip-gap: var(--gap-1);
17
18
  appearance: none;
18
19
  outline: 2px solid transparent;
19
20
  outline-offset: 2px;
20
21
  display: inline-flex;
21
22
  align-items: center;
22
- gap: var(--gap-1);
23
+ gap: var(--chip-gap);
23
24
  border-radius: var(--border-radius-sm);
24
25
  cursor: pointer;
25
26
  line-height: 1.1;
@@ -61,10 +62,6 @@
61
62
  height: var(--chip-icon-size);
62
63
  }
63
64
 
64
- .end-icon {
65
- margin-left: 0.3rem;
66
- }
67
-
68
65
  .iconWrapper {
69
66
  display: inline-flex;
70
67
  align-items: center;
@@ -72,10 +69,9 @@
72
69
  line-height: 0;
73
70
  }
74
71
 
75
- .remove {
76
- width: calc(var(--chip-icon-size) * 0.85);
77
- height: calc(var(--chip-icon-size) * 0.85);
78
- min-height: calc(var(--chip-icon-size) * 0.85);
72
+ .close-icon {
73
+ width: calc(var(--chip-icon-size) * 0.9);
74
+ height: calc(var(--chip-icon-size) * 0.9);
79
75
  }
80
76
 
81
77
  /* Sizes ----------------------------------------------------------- */
@@ -93,7 +89,7 @@
93
89
  :global(.chip-sm) {
94
90
  --chip-height: 28px;
95
91
  --chip-padding-y: 0.2rem;
96
- --chip-padding-x: 0.4rem;
92
+ --chip-padding-x: 0.3rem;
97
93
  --chip-font-size: 0.82rem;
98
94
  --chip-icon-size: 1.2rem;
99
95
  }
@@ -102,25 +98,27 @@
102
98
  :global(.chip-md) {
103
99
  --chip-height: 32px;
104
100
  --chip-padding-y: 0.25rem;
105
- --chip-padding-x: 0.5rem;
101
+ --chip-padding-x: 0.3rem;
106
102
  --chip-font-size: 0.9rem;
107
103
  --chip-icon-size: 1.3rem;
108
104
  }
109
105
 
110
106
  .lg,
111
107
  :global(.chip-lg) {
108
+ --chip-gap: var(--gap-2);
112
109
  --chip-height: 36px;
113
110
  --chip-padding-y: 0.3rem;
114
- --chip-padding-x: 0.6rem;
111
+ --chip-padding-x: 0.4rem;
115
112
  --chip-font-size: 0.98rem;
116
113
  --chip-icon-size: 1.35rem;
117
114
  }
118
115
 
119
116
  .xl,
120
117
  :global(.chip-xl) {
118
+ --chip-gap: var(--gap-2);
121
119
  --chip-height: 40px;
122
120
  --chip-padding-y: 0.3rem;
123
- --chip-padding-x: 0.7rem;
121
+ --chip-padding-x: 0.5rem;
124
122
  --chip-font-size: 1rem;
125
123
  --chip-icon-size: 1.4rem;
126
124
  }
@@ -149,14 +147,10 @@
149
147
  .filled[disabled],
150
148
  :global(.chip-filled):disabled,
151
149
  :global(.chip-filled)[disabled] {
152
- background-color: var(
153
- --chip-variant-filled-disabled,
154
- oklch(from var(--chip-variant-filled) calc(l * 1.1) calc(c * 0.85) h)
155
- );
156
- color: var(
157
- --chip-variant-filled-foreground-disabled,
158
- oklch(from var(--chip-variant-filled-foreground) calc(l * 0.9) calc(c * 0.85) h)
159
- );
150
+ background-color: var(--chip-variant-filled-disabled,
151
+ oklch(from var(--chip-variant-filled) calc(l * 1.1) calc(c * 0.85) h));
152
+ color: var(--chip-variant-filled-foreground-disabled,
153
+ oklch(from var(--chip-variant-filled-foreground) calc(l * 0.9) calc(c * 0.85) h));
160
154
  }
161
155
 
162
156
  /* -------------------------------------------------------- */
@@ -184,14 +178,10 @@
184
178
  .filled-weak[disabled],
185
179
  :global(.chip-filled-weak):disabled,
186
180
  :global(.chip-filled-weak)[disabled] {
187
- background-color: var(
188
- --chip-variant-filled-weak-disabled,
189
- oklch(from var(--chip-variant-filled-weak) calc(l * 1.1) calc(c * 0.85) h)
190
- );
191
- color: var(
192
- --chip-variant-filled-weak-foreground-disabled,
193
- oklch(from var(--chip-variant-filled-weak-foreground) calc(l * 0.9) calc(c * 0.85) h)
194
- );
181
+ background-color: var(--chip-variant-filled-weak-disabled,
182
+ oklch(from var(--chip-variant-filled-weak) calc(l * 1.1) calc(c * 0.85) h));
183
+ color: var(--chip-variant-filled-weak-foreground-disabled,
184
+ oklch(from var(--chip-variant-filled-weak-foreground) calc(l * 0.9) calc(c * 0.85) h));
195
185
  }
196
186
 
197
187
  /* -------------------------------------------------------- */
@@ -208,14 +198,10 @@
208
198
  .outlined[disabled],
209
199
  :global(.chip-outlined):disabled,
210
200
  :global(.chip-outlined)[disabled] {
211
- border-color: var(
212
- --chip-variant-outlined-border-disabled,
213
- oklch(from var(--chip-variant-outlined-border) calc(l * 1.5) calc(c * 0.8) h)
214
- );
215
- color: var(
216
- --chip-variant-outlined-foreground-disabled,
217
- oklch(from var(--chip-variant-outlined-foreground) calc(l * 1.1) calc(c * 0.7) h)
218
- );
201
+ border-color: var(--chip-variant-outlined-border-disabled,
202
+ oklch(from var(--chip-variant-outlined-border) calc(l * 1.5) calc(c * 0.8) h));
203
+ color: var(--chip-variant-outlined-foreground-disabled,
204
+ oklch(from var(--chip-variant-outlined-foreground) calc(l * 1.1) calc(c * 0.7) h));
219
205
  }
220
206
 
221
207
  .outlined:hover,
@@ -262,25 +248,25 @@
262
248
 
263
249
  /* Filled */
264
250
  --chip-variant-filled: var(--fill-primary-strong);
265
- --chip-variant-filled-foreground: var(--text-on-primary);
266
251
  --chip-variant-filled-hover: var(--fill-primary-strong-hover);
267
252
  --chip-variant-filled-disabled: var(--fill-primary-strong-disabled);
268
- --chip-variant-filled-foreground-disabled: var(--text-on-primary-disabled);
253
+ --chip-variant-filled-foreground: var(--text-on-primary-strong);
254
+ --chip-variant-filled-foreground-disabled: var(--text-on-primary-strong-disabled);
269
255
 
270
256
  /* Filled Weak */
271
257
  --chip-variant-filled-weak: var(--fill-primary-weak);
272
- --chip-variant-filled-weak-foreground: var(--text-on-primary);
273
258
  --chip-variant-filled-weak-hover: var(--fill-primary-weak-hover);
274
259
  --chip-variant-filled-weak-disabled: var(--fill-primary-weak-disabled);
275
- --chip-variant-filled-weak-foreground-disabled: var(--text-on-primary-disabled);
260
+ --chip-variant-filled-weak-foreground: var(--text-on-primary-weak);
261
+ --chip-variant-filled-weak-foreground-disabled: var(--text-on-primary-weak-disabled);
276
262
 
277
263
  /* Outlined */
278
- --chip-variant-outlined: transparent;
279
- --chip-variant-outlined-foreground: var(--text-primary-strong);
280
- --chip-variant-outlined-hover: var(--fill-primary-weak);
264
+ --chip-variant-outlined: var(--fill-primary-outlined);
265
+ --chip-variant-outlined-hover: var(--fill-primary-outlined-hover);
281
266
  --chip-variant-outlined-border: var(--stroke-primary);
282
267
  --chip-variant-outlined-border-disabled: var(--stroke-primary-disabled);
283
- --chip-variant-outlined-foreground-disabled: var(--text-primary-disabled);
268
+ --chip-variant-outlined-foreground: var(--text-on-primary-outlined);
269
+ --chip-variant-outlined-foreground-disabled: var(--text-on-primary-outlined-disabled);
284
270
  }
285
271
 
286
272
  .secondary,
@@ -289,10 +275,10 @@
289
275
 
290
276
  /* Filled */
291
277
  --chip-variant-filled: var(--fill-secondary-strong);
292
- --chip-variant-filled-foreground: var(--text-on-secondary);
293
278
  --chip-variant-filled-hover: var(--fill-secondary-strong-hover);
294
279
  --chip-variant-filled-disabled: var(--fill-secondary-strong-disabled);
295
- --chip-variant-filled-foreground-disabled: var(--text-on-secondary-disabled);
280
+ --chip-variant-filled-foreground: var(--text-on-secondary-strong);
281
+ --chip-variant-filled-foreground-disabled: var(--text-on-secondary-strong-disabled);
296
282
 
297
283
  /* Filled Weak */
298
284
  --chip-variant-filled-weak: var(--fill-secondary-weak);
@@ -302,12 +288,12 @@
302
288
  --chip-variant-filled-weak-foreground-disabled: var(--text-on-secondary-disabled);
303
289
 
304
290
  /* Outlined */
305
- --chip-variant-outlined: transparent;
306
- --chip-variant-outlined-foreground: var(--text-secondary-strong);
307
- --chip-variant-outlined-hover: var(--fill-secondary-weak);
291
+ --chip-variant-outlined: var(--fill-secondary-outlined);
292
+ --chip-variant-outlined-hover: var(--fill-secondary-outlined-hover);
308
293
  --chip-variant-outlined-border: var(--stroke-secondary);
309
294
  --chip-variant-outlined-border-disabled: var(--stroke-secondary-disabled);
310
- --chip-variant-outlined-foreground-disabled: var(--text-secondary-disabled);
295
+ --chip-variant-outlined-foreground: var(--text-on-secondary-outlined);
296
+ --chip-variant-outlined-foreground-disabled: var(--text-on-secondary-outlined-disabled);
311
297
  }
312
298
 
313
299
  .noeffect,
@@ -316,25 +302,25 @@
316
302
 
317
303
  /* Filled */
318
304
  --chip-variant-filled: var(--fill-noeffect-strong);
319
- --chip-variant-filled-foreground: var(--text-on-noeffect);
320
305
  --chip-variant-filled-hover: var(--fill-noeffect-strong-hover);
321
306
  --chip-variant-filled-disabled: var(--fill-noeffect-strong-disabled);
322
- --chip-variant-filled-foreground-disabled: var(--text-on-noeffect-disabled);
307
+ --chip-variant-filled-foreground: var(--text-on-noeffect-strong);
308
+ --chip-variant-filled-foreground-disabled: var(--text-on-noeffect-strong-disabled);
323
309
 
324
310
  /* Filled Weak */
325
311
  --chip-variant-filled-weak: var(--fill-noeffect-weak);
326
- --chip-variant-filled-weak-foreground: var(--text-on-noeffect);
327
312
  --chip-variant-filled-weak-hover: var(--fill-noeffect-weak-hover);
328
313
  --chip-variant-filled-weak-disabled: var(--fill-noeffect-weak-disabled);
329
- --chip-variant-filled-weak-foreground-disabled: var(--text-on-noeffect-disabled);
314
+ --chip-variant-filled-weak-foreground: var(--text-on-noeffect-weak);
315
+ --chip-variant-filled-weak-foreground-disabled: var(--text-on-noeffect-weak-disabled);
330
316
 
331
317
  /* Outlined */
332
- --chip-variant-outlined: transparent;
333
- --chip-variant-outlined-foreground: var(--text-noeffect-strong);
334
- --chip-variant-outlined-hover: var(--fill-noeffect-weak);
318
+ --chip-variant-outlined: var(--fill-noeffect-outlined);
319
+ --chip-variant-outlined-hover: var(--fill-noeffect-outlined-hover);
335
320
  --chip-variant-outlined-border: var(--stroke-noeffect);
336
321
  --chip-variant-outlined-border-disabled: var(--stroke-noeffect-disabled);
337
- --chip-variant-outlined-foreground-disabled: var(--text-noeffect-disabled);
322
+ --chip-variant-outlined-foreground: var(--text-on-noeffect-outlined);
323
+ --chip-variant-outlined-foreground-disabled: var(--text-on-noeffect-outlined-disabled);
338
324
  }
339
325
 
340
326
  .success,
@@ -343,25 +329,25 @@
343
329
 
344
330
  /* Filled */
345
331
  --chip-variant-filled: var(--fill-success-strong);
346
- --chip-variant-filled-foreground: var(--text-on-success);
347
332
  --chip-variant-filled-hover: var(--fill-success-strong-hover);
348
333
  --chip-variant-filled-disabled: var(--fill-success-strong-disabled);
349
- --chip-variant-filled-foreground-disabled: var(--text-on-success-disabled);
334
+ --chip-variant-filled-foreground: var(--text-on-success-strong);
335
+ --chip-variant-filled-foreground-disabled: var(--text-on-success-strong-disabled);
350
336
 
351
337
  /* Filled Weak */
352
338
  --chip-variant-filled-weak: var(--fill-success-weak);
353
- --chip-variant-filled-weak-foreground: var(--text-on-success);
354
339
  --chip-variant-filled-weak-hover: var(--fill-success-weak-hover);
355
340
  --chip-variant-filled-weak-disabled: var(--fill-success-weak-disabled);
356
- --chip-variant-filled-weak-foreground-disabled: var(--text-on-success-disabled);
341
+ --chip-variant-filled-weak-foreground: var(--text-on-success-weak);
342
+ --chip-variant-filled-weak-foreground-disabled: var(--text-on-success-weak-disabled);
357
343
 
358
344
  /* Outlined */
359
- --chip-variant-outlined: transparent;
360
- --chip-variant-outlined-foreground: var(--text-success-strong);
361
- --chip-variant-outlined-hover: var(--fill-success-weak);
345
+ --chip-variant-outlined: var(--fill-success-outlined);
346
+ --chip-variant-outlined-hover: var(--fill-success-outlined-hover);
362
347
  --chip-variant-outlined-border: var(--stroke-success);
363
348
  --chip-variant-outlined-border-disabled: var(--stroke-success-disabled);
364
- --chip-variant-outlined-foreground-disabled: var(--text-success-disabled);
349
+ --chip-variant-outlined-foreground: var(--text-on-success-outlined);
350
+ --chip-variant-outlined-foreground-disabled: var(--text-on-success-outlined-disabled);
365
351
  }
366
352
 
367
353
  .info,
@@ -370,25 +356,25 @@
370
356
 
371
357
  /* Filled */
372
358
  --chip-variant-filled: var(--fill-info-strong);
373
- --chip-variant-filled-foreground: var(--text-on-info);
374
359
  --chip-variant-filled-hover: var(--fill-info-strong-hover);
375
360
  --chip-variant-filled-disabled: var(--fill-info-strong-disabled);
376
- --chip-variant-filled-foreground-disabled: var(--text-on-info-disabled);
361
+ --chip-variant-filled-foreground: var(--text-on-info-strong);
362
+ --chip-variant-filled-foreground-disabled: var(--text-on-info-strong-disabled);
377
363
 
378
364
  /* Filled Weak */
379
365
  --chip-variant-filled-weak: var(--fill-info-weak);
380
- --chip-variant-filled-weak-foreground: var(--text-on-info);
381
366
  --chip-variant-filled-weak-hover: var(--fill-info-weak-hover);
382
367
  --chip-variant-filled-weak-disabled: var(--fill-info-weak-disabled);
383
- --chip-variant-filled-weak-foreground-disabled: var(--text-on-info-disabled);
368
+ --chip-variant-filled-weak-foreground: var(--text-on-info-weak);
369
+ --chip-variant-filled-weak-foreground-disabled: var(--text-on-info-weak-disabled);
384
370
 
385
371
  /* Outlined */
386
- --chip-variant-outlined: transparent;
387
- --chip-variant-outlined-foreground: var(--text-info-strong);
388
- --chip-variant-outlined-hover: var(--fill-info-weak);
372
+ --chip-variant-outlined: var(--fill-info-outlined);
373
+ --chip-variant-outlined-hover: var(--fill-info-outlined-hover);
389
374
  --chip-variant-outlined-border: var(--stroke-info);
390
375
  --chip-variant-outlined-border-disabled: var(--stroke-info-disabled);
391
- --chip-variant-outlined-foreground-disabled: var(--text-info-disabled);
376
+ --chip-variant-outlined-foreground: var(--text-on-info-outlined);
377
+ --chip-variant-outlined-foreground-disabled: var(--text-on-info-outlined-disabled);
392
378
  }
393
379
 
394
380
  .warning,
@@ -397,25 +383,25 @@
397
383
 
398
384
  /* Filled */
399
385
  --chip-variant-filled: var(--fill-warning-strong);
400
- --chip-variant-filled-foreground: var(--text-on-warning);
401
386
  --chip-variant-filled-hover: var(--fill-warning-strong-hover);
402
387
  --chip-variant-filled-disabled: var(--fill-warning-strong-disabled);
403
- --chip-variant-filled-foreground-disabled: var(--text-on-warning-disabled);
388
+ --chip-variant-filled-foreground: var(--text-on-warning-strong);
389
+ --chip-variant-filled-foreground-disabled: var(--text-on-warning-strong-disabled);
404
390
 
405
391
  /* Filled Weak */
406
392
  --chip-variant-filled-weak: var(--fill-warning-weak);
407
- --chip-variant-filled-weak-foreground: var(--text-on-warning);
408
393
  --chip-variant-filled-weak-hover: var(--fill-warning-weak-hover);
409
394
  --chip-variant-filled-weak-disabled: var(--fill-warning-weak-disabled);
410
- --chip-variant-filled-weak-foreground-disabled: var(--text-on-warning-disabled);
395
+ --chip-variant-filled-weak-foreground: var(--text-on-warning-weak);
396
+ --chip-variant-filled-weak-foreground-disabled: var(--text-on-warning-weak-disabled);
411
397
 
412
398
  /* Outlined */
413
- --chip-variant-outlined: transparent;
414
- --chip-variant-outlined-foreground: var(--text-warning-strong);
415
- --chip-variant-outlined-hover: var(--fill-warning-weak);
399
+ --chip-variant-outlined: var(--fill-warning-outlined);
400
+ --chip-variant-outlined-hover: var(--fill-warning-outlined-hover);
416
401
  --chip-variant-outlined-border: var(--stroke-warning);
417
402
  --chip-variant-outlined-border-disabled: var(--stroke-warning-disabled);
418
- --chip-variant-outlined-foreground-disabled: var(--text-warning-disabled);
403
+ --chip-variant-outlined-foreground: var(--text-on-warning-outlined);
404
+ --chip-variant-outlined-foreground-disabled: var(--text-on-warning-outlined-disabled);
419
405
  }
420
406
 
421
407
  .danger,
@@ -424,24 +410,24 @@
424
410
 
425
411
  /* Filled */
426
412
  --chip-variant-filled: var(--fill-danger-strong);
427
- --chip-variant-filled-foreground: var(--text-on-danger);
428
413
  --chip-variant-filled-hover: var(--fill-danger-strong-hover);
429
414
  --chip-variant-filled-disabled: var(--fill-danger-strong-disabled);
430
- --chip-variant-filled-foreground-disabled: var(--text-on-danger-disabled);
415
+ --chip-variant-filled-foreground: var(--text-on-danger-strong);
416
+ --chip-variant-filled-foreground-disabled: var(--text-on-danger-strong-disabled);
431
417
 
432
418
  /* Filled Weak */
433
419
  --chip-variant-filled-weak: var(--fill-danger-weak);
434
- --chip-variant-filled-weak-foreground: var(--text-on-danger);
435
420
  --chip-variant-filled-weak-hover: var(--fill-danger-weak-hover);
436
421
  --chip-variant-filled-weak-disabled: var(--fill-danger-weak-disabled);
437
- --chip-variant-filled-weak-foreground-disabled: var(--text-on-danger-disabled);
422
+ --chip-variant-filled-weak-foreground: var(--text-on-danger-weak);
423
+ --chip-variant-filled-weak-foreground-disabled: var(--text-on-danger-weak-disabled);
438
424
 
439
425
  /* Outlined */
440
426
  --chip-variant-outlined: transparent;
441
- --chip-variant-outlined-foreground: var(--text-danger-strong);
442
427
  --chip-variant-outlined-hover: var(--fill-danger-weak);
443
428
  --chip-variant-outlined-border: var(--stroke-danger);
444
429
  --chip-variant-outlined-border-disabled: var(--stroke-danger-disabled);
445
- --chip-variant-outlined-foreground-disabled: var(--text-danger-disabled);
430
+ --chip-variant-outlined-foreground: var(--text-on-danger-outlined);
431
+ --chip-variant-outlined-foreground-disabled: var(--text-on-danger-outlined-disabled);
446
432
  }
447
- }
433
+ }
package/dist/components/chips/chip.module.js CHANGED
@@ -3,10 +3,9 @@ const chip_module = {
3
3
  chip: "chip-AhhT7N",
4
4
  label: "label-gboVZj",
5
5
  icon: "icon-Kyxxoz",
6
- "end-icon": "end-icon-HThd0U",
7
- endIcon: "end-icon-HThd0U",
8
6
  iconWrapper: "iconWrapper-vJCUgN",
9
- remove: "remove-lw7BYl",
7
+ "close-icon": "close-icon-dsclyW",
8
+ closeIcon: "close-icon-dsclyW",
10
9
  xs: "xs-APyCes",
11
10
  sm: "sm-J7CErO",
12
11
  md: "md-Dqq6Vk",
package/dist/components/chips/chip_module.css CHANGED
@@ -7,10 +7,11 @@
7
7
  --chip-padding-y: .35rem;
8
8
  --chip-padding-x: .4rem;
9
9
  --chip-icon-size: 1rem;
10
+ --chip-gap: var(--gap-1);
10
11
  appearance: none;
11
12
  outline-offset: 2px;
12
13
  align-items: center;
13
- gap: var(--gap-1);
14
+ gap: var(--chip-gap);
14
15
  border-radius: var(--border-radius-sm);
15
16
  cursor: pointer;
16
17
  min-height: var(--chip-height);
@@ -46,10 +47,6 @@
46
47
  height: var(--chip-icon-size);
47
48
  }
48
49
 
49
- .end-icon-HThd0U {
50
- margin-left: .3rem;
51
- }
52
-
53
50
  .iconWrapper-vJCUgN {
54
51
  justify-content: center;
55
52
  align-items: center;
@@ -57,10 +54,9 @@
57
54
  display: inline-flex;
58
55
  }
59
56
 
60
- .remove-lw7BYl {
61
- width: calc(var(--chip-icon-size) * .85);
62
- height: calc(var(--chip-icon-size) * .85);
63
- min-height: calc(var(--chip-icon-size) * .85);
57
+ .close-icon-dsclyW {
58
+ width: calc(var(--chip-icon-size) * .9);
59
+ height: calc(var(--chip-icon-size) * .9);
64
60
  }
65
61
 
66
62
  :is(.xs-APyCes, .chip-xs) {
@@ -75,7 +71,7 @@
75
71
  :is(.sm-J7CErO, .chip-sm) {
76
72
  --chip-height: 28px;
77
73
  --chip-padding-y: .2rem;
78
- --chip-padding-x: .4rem;
74
+ --chip-padding-x: .3rem;
79
75
  --chip-font-size: .82rem;
80
76
  --chip-icon-size: 1.2rem;
81
77
  }
@@ -83,23 +79,25 @@
83
79
  :is(.md-Dqq6Vk, .chip-md) {
84
80
  --chip-height: 32px;
85
81
  --chip-padding-y: .25rem;
86
- --chip-padding-x: .5rem;
82
+ --chip-padding-x: .3rem;
87
83
  --chip-font-size: .9rem;
88
84
  --chip-icon-size: 1.3rem;
89
85
  }
90
86
 
91
87
  :is(.lg-V_RSlk, .chip-lg) {
88
+ --chip-gap: var(--gap-2);
92
89
  --chip-height: 36px;
93
90
  --chip-padding-y: .3rem;
94
- --chip-padding-x: .6rem;
91
+ --chip-padding-x: .4rem;
95
92
  --chip-font-size: .98rem;
96
93
  --chip-icon-size: 1.35rem;
97
94
  }
98
95
 
99
96
  :is(.xl-XTZIz8, .chip-xl) {
97
+ --chip-gap: var(--gap-2);
100
98
  --chip-height: 40px;
101
99
  --chip-padding-y: .3rem;
102
- --chip-padding-x: .7rem;
100
+ --chip-padding-x: .5rem;
103
101
  --chip-font-size: 1rem;
104
102
  --chip-icon-size: 1.4rem;
105
103
  }
@@ -179,141 +177,141 @@
179
177
  :is(.primary-Dknrel, .chip-primary) {
180
178
  --chip-ring-color: var(--ring-primary);
181
179
  --chip-variant-filled: var(--fill-primary-strong);
182
- --chip-variant-filled-foreground: var(--text-on-primary);
183
180
  --chip-variant-filled-hover: var(--fill-primary-strong-hover);
184
181
  --chip-variant-filled-disabled: var(--fill-primary-strong-disabled);
185
- --chip-variant-filled-foreground-disabled: var(--text-on-primary-disabled);
182
+ --chip-variant-filled-foreground: var(--text-on-primary-strong);
183
+ --chip-variant-filled-foreground-disabled: var(--text-on-primary-strong-disabled);
186
184
  --chip-variant-filled-weak: var(--fill-primary-weak);
187
- --chip-variant-filled-weak-foreground: var(--text-on-primary);
188
185
  --chip-variant-filled-weak-hover: var(--fill-primary-weak-hover);
189
186
  --chip-variant-filled-weak-disabled: var(--fill-primary-weak-disabled);
190
- --chip-variant-filled-weak-foreground-disabled: var(--text-on-primary-disabled);
191
- --chip-variant-outlined: transparent;
192
- --chip-variant-outlined-foreground: var(--text-primary-strong);
193
- --chip-variant-outlined-hover: var(--fill-primary-weak);
187
+ --chip-variant-filled-weak-foreground: var(--text-on-primary-weak);
188
+ --chip-variant-filled-weak-foreground-disabled: var(--text-on-primary-weak-disabled);
189
+ --chip-variant-outlined: var(--fill-primary-outlined);
190
+ --chip-variant-outlined-hover: var(--fill-primary-outlined-hover);
194
191
  --chip-variant-outlined-border: var(--stroke-primary);
195
192
  --chip-variant-outlined-border-disabled: var(--stroke-primary-disabled);
196
- --chip-variant-outlined-foreground-disabled: var(--text-primary-disabled);
193
+ --chip-variant-outlined-foreground: var(--text-on-primary-outlined);
194
+ --chip-variant-outlined-foreground-disabled: var(--text-on-primary-outlined-disabled);
197
195
  }
198
196
 
199
197
  :is(.secondary-Oeq6j4, .chip-secondary) {
200
198
  --chip-ring-color: var(--ring-secondary);
201
199
  --chip-variant-filled: var(--fill-secondary-strong);
202
- --chip-variant-filled-foreground: var(--text-on-secondary);
203
200
  --chip-variant-filled-hover: var(--fill-secondary-strong-hover);
204
201
  --chip-variant-filled-disabled: var(--fill-secondary-strong-disabled);
205
- --chip-variant-filled-foreground-disabled: var(--text-on-secondary-disabled);
202
+ --chip-variant-filled-foreground: var(--text-on-secondary-strong);
203
+ --chip-variant-filled-foreground-disabled: var(--text-on-secondary-strong-disabled);
206
204
  --chip-variant-filled-weak: var(--fill-secondary-weak);
207
205
  --chip-variant-filled-weak-foreground: var(--text-on-secondary);
208
206
  --chip-variant-filled-weak-hover: var(--fill-secondary-weak-hover);
209
207
  --chip-variant-filled-weak-disabled: var(--fill-secondary-weak-disabled);
210
208
  --chip-variant-filled-weak-foreground-disabled: var(--text-on-secondary-disabled);
211
- --chip-variant-outlined: transparent;
212
- --chip-variant-outlined-foreground: var(--text-secondary-strong);
213
- --chip-variant-outlined-hover: var(--fill-secondary-weak);
209
+ --chip-variant-outlined: var(--fill-secondary-outlined);
210
+ --chip-variant-outlined-hover: var(--fill-secondary-outlined-hover);
214
211
  --chip-variant-outlined-border: var(--stroke-secondary);
215
212
  --chip-variant-outlined-border-disabled: var(--stroke-secondary-disabled);
216
- --chip-variant-outlined-foreground-disabled: var(--text-secondary-disabled);
213
+ --chip-variant-outlined-foreground: var(--text-on-secondary-outlined);
214
+ --chip-variant-outlined-foreground-disabled: var(--text-on-secondary-outlined-disabled);
217
215
  }
218
216
 
219
217
  :is(.noeffect-DIkyR0, .chip-noeffect) {
220
218
  --chip-ring-color: var(--ring-noeffect);
221
219
  --chip-variant-filled: var(--fill-noeffect-strong);
222
- --chip-variant-filled-foreground: var(--text-on-noeffect);
223
220
  --chip-variant-filled-hover: var(--fill-noeffect-strong-hover);
224
221
  --chip-variant-filled-disabled: var(--fill-noeffect-strong-disabled);
225
- --chip-variant-filled-foreground-disabled: var(--text-on-noeffect-disabled);
222
+ --chip-variant-filled-foreground: var(--text-on-noeffect-strong);
223
+ --chip-variant-filled-foreground-disabled: var(--text-on-noeffect-strong-disabled);
226
224
  --chip-variant-filled-weak: var(--fill-noeffect-weak);
227
- --chip-variant-filled-weak-foreground: var(--text-on-noeffect);
228
225
  --chip-variant-filled-weak-hover: var(--fill-noeffect-weak-hover);
229
226
  --chip-variant-filled-weak-disabled: var(--fill-noeffect-weak-disabled);
230
- --chip-variant-filled-weak-foreground-disabled: var(--text-on-noeffect-disabled);
231
- --chip-variant-outlined: transparent;
232
- --chip-variant-outlined-foreground: var(--text-noeffect-strong);
233
- --chip-variant-outlined-hover: var(--fill-noeffect-weak);
227
+ --chip-variant-filled-weak-foreground: var(--text-on-noeffect-weak);
228
+ --chip-variant-filled-weak-foreground-disabled: var(--text-on-noeffect-weak-disabled);
229
+ --chip-variant-outlined: var(--fill-noeffect-outlined);
230
+ --chip-variant-outlined-hover: var(--fill-noeffect-outlined-hover);
234
231
  --chip-variant-outlined-border: var(--stroke-noeffect);
235
232
  --chip-variant-outlined-border-disabled: var(--stroke-noeffect-disabled);
236
- --chip-variant-outlined-foreground-disabled: var(--text-noeffect-disabled);
233
+ --chip-variant-outlined-foreground: var(--text-on-noeffect-outlined);
234
+ --chip-variant-outlined-foreground-disabled: var(--text-on-noeffect-outlined-disabled);
237
235
  }
238
236
 
239
237
  :is(.success-Qciyio, .chip-success) {
240
238
  --chip-ring-color: var(--ring-success);
241
239
  --chip-variant-filled: var(--fill-success-strong);
242
- --chip-variant-filled-foreground: var(--text-on-success);
243
240
  --chip-variant-filled-hover: var(--fill-success-strong-hover);
244
241
  --chip-variant-filled-disabled: var(--fill-success-strong-disabled);
245
- --chip-variant-filled-foreground-disabled: var(--text-on-success-disabled);
242
+ --chip-variant-filled-foreground: var(--text-on-success-strong);
243
+ --chip-variant-filled-foreground-disabled: var(--text-on-success-strong-disabled);
246
244
  --chip-variant-filled-weak: var(--fill-success-weak);
247
- --chip-variant-filled-weak-foreground: var(--text-on-success);
248
245
  --chip-variant-filled-weak-hover: var(--fill-success-weak-hover);
249
246
  --chip-variant-filled-weak-disabled: var(--fill-success-weak-disabled);
250
- --chip-variant-filled-weak-foreground-disabled: var(--text-on-success-disabled);
251
- --chip-variant-outlined: transparent;
252
- --chip-variant-outlined-foreground: var(--text-success-strong);
253
- --chip-variant-outlined-hover: var(--fill-success-weak);
247
+ --chip-variant-filled-weak-foreground: var(--text-on-success-weak);
248
+ --chip-variant-filled-weak-foreground-disabled: var(--text-on-success-weak-disabled);
249
+ --chip-variant-outlined: var(--fill-success-outlined);
250
+ --chip-variant-outlined-hover: var(--fill-success-outlined-hover);
254
251
  --chip-variant-outlined-border: var(--stroke-success);
255
252
  --chip-variant-outlined-border-disabled: var(--stroke-success-disabled);
256
- --chip-variant-outlined-foreground-disabled: var(--text-success-disabled);
253
+ --chip-variant-outlined-foreground: var(--text-on-success-outlined);
254
+ --chip-variant-outlined-foreground-disabled: var(--text-on-success-outlined-disabled);
257
255
  }
258
256
 
259
257
  :is(.info-Ddpo4H, .chip-info) {
260
258
  --chip-ring-color: var(--ring-info);
261
259
  --chip-variant-filled: var(--fill-info-strong);
262
- --chip-variant-filled-foreground: var(--text-on-info);
263
260
  --chip-variant-filled-hover: var(--fill-info-strong-hover);
264
261
  --chip-variant-filled-disabled: var(--fill-info-strong-disabled);
265
- --chip-variant-filled-foreground-disabled: var(--text-on-info-disabled);
262
+ --chip-variant-filled-foreground: var(--text-on-info-strong);
263
+ --chip-variant-filled-foreground-disabled: var(--text-on-info-strong-disabled);
266
264
  --chip-variant-filled-weak: var(--fill-info-weak);
267
- --chip-variant-filled-weak-foreground: var(--text-on-info);
268
265
  --chip-variant-filled-weak-hover: var(--fill-info-weak-hover);
269
266
  --chip-variant-filled-weak-disabled: var(--fill-info-weak-disabled);
270
- --chip-variant-filled-weak-foreground-disabled: var(--text-on-info-disabled);
271
- --chip-variant-outlined: transparent;
272
- --chip-variant-outlined-foreground: var(--text-info-strong);
273
- --chip-variant-outlined-hover: var(--fill-info-weak);
267
+ --chip-variant-filled-weak-foreground: var(--text-on-info-weak);
268
+ --chip-variant-filled-weak-foreground-disabled: var(--text-on-info-weak-disabled);
269
+ --chip-variant-outlined: var(--fill-info-outlined);
270
+ --chip-variant-outlined-hover: var(--fill-info-outlined-hover);
274
271
  --chip-variant-outlined-border: var(--stroke-info);
275
272
  --chip-variant-outlined-border-disabled: var(--stroke-info-disabled);
276
- --chip-variant-outlined-foreground-disabled: var(--text-info-disabled);
273
+ --chip-variant-outlined-foreground: var(--text-on-info-outlined);
274
+ --chip-variant-outlined-foreground-disabled: var(--text-on-info-outlined-disabled);
277
275
  }
278
276
 
279
277
  :is(.warning-ua4NGH, .chip-warning) {
280
278
  --chip-ring-color: var(--ring-warning);
281
279
  --chip-variant-filled: var(--fill-warning-strong);
282
- --chip-variant-filled-foreground: var(--text-on-warning);
283
280
  --chip-variant-filled-hover: var(--fill-warning-strong-hover);
284
281
  --chip-variant-filled-disabled: var(--fill-warning-strong-disabled);
285
- --chip-variant-filled-foreground-disabled: var(--text-on-warning-disabled);
282
+ --chip-variant-filled-foreground: var(--text-on-warning-strong);
283
+ --chip-variant-filled-foreground-disabled: var(--text-on-warning-strong-disabled);
286
284
  --chip-variant-filled-weak: var(--fill-warning-weak);
287
- --chip-variant-filled-weak-foreground: var(--text-on-warning);
288
285
  --chip-variant-filled-weak-hover: var(--fill-warning-weak-hover);
289
286
  --chip-variant-filled-weak-disabled: var(--fill-warning-weak-disabled);
290
- --chip-variant-filled-weak-foreground-disabled: var(--text-on-warning-disabled);
291
- --chip-variant-outlined: transparent;
292
- --chip-variant-outlined-foreground: var(--text-warning-strong);
293
- --chip-variant-outlined-hover: var(--fill-warning-weak);
287
+ --chip-variant-filled-weak-foreground: var(--text-on-warning-weak);
288
+ --chip-variant-filled-weak-foreground-disabled: var(--text-on-warning-weak-disabled);
289
+ --chip-variant-outlined: var(--fill-warning-outlined);
290
+ --chip-variant-outlined-hover: var(--fill-warning-outlined-hover);
294
291
  --chip-variant-outlined-border: var(--stroke-warning);
295
292
  --chip-variant-outlined-border-disabled: var(--stroke-warning-disabled);
296
- --chip-variant-outlined-foreground-disabled: var(--text-warning-disabled);
293
+ --chip-variant-outlined-foreground: var(--text-on-warning-outlined);
294
+ --chip-variant-outlined-foreground-disabled: var(--text-on-warning-outlined-disabled);
297
295
  }
298
296
 
299
297
  :is(.danger-ftQS7Y, .chip-danger) {
300
298
  --chip-ring-color: var(--ring-danger);
301
299
  --chip-variant-filled: var(--fill-danger-strong);
302
- --chip-variant-filled-foreground: var(--text-on-danger);
303
300
  --chip-variant-filled-hover: var(--fill-danger-strong-hover);
304
301
  --chip-variant-filled-disabled: var(--fill-danger-strong-disabled);
305
- --chip-variant-filled-foreground-disabled: var(--text-on-danger-disabled);
302
+ --chip-variant-filled-foreground: var(--text-on-danger-strong);
303
+ --chip-variant-filled-foreground-disabled: var(--text-on-danger-strong-disabled);
306
304
  --chip-variant-filled-weak: var(--fill-danger-weak);
307
- --chip-variant-filled-weak-foreground: var(--text-on-danger);
308
305
  --chip-variant-filled-weak-hover: var(--fill-danger-weak-hover);
309
306
  --chip-variant-filled-weak-disabled: var(--fill-danger-weak-disabled);
310
- --chip-variant-filled-weak-foreground-disabled: var(--text-on-danger-disabled);
307
+ --chip-variant-filled-weak-foreground: var(--text-on-danger-weak);
308
+ --chip-variant-filled-weak-foreground-disabled: var(--text-on-danger-weak-disabled);
311
309
  --chip-variant-outlined: transparent;
312
- --chip-variant-outlined-foreground: var(--text-danger-strong);
313
310
  --chip-variant-outlined-hover: var(--fill-danger-weak);
314
311
  --chip-variant-outlined-border: var(--stroke-danger);
315
312
  --chip-variant-outlined-border-disabled: var(--stroke-danger-disabled);
316
- --chip-variant-outlined-foreground-disabled: var(--text-danger-disabled);
313
+ --chip-variant-outlined-foreground: var(--text-on-danger-outlined);
314
+ --chip-variant-outlined-foreground-disabled: var(--text-on-danger-outlined-disabled);
317
315
  }
318
316
  }
319
317