@seed-design/css 0.1.15 → 0.2.1

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 (90) hide show
  1. package/all.css +95 -96
  2. package/all.min.css +1 -1
  3. package/base.css +36 -28
  4. package/base.min.css +1 -1
  5. package/package.json +1 -1
  6. package/recipes/action-button.css +4 -4
  7. package/recipes/action-button.d.ts +3 -3
  8. package/recipes/action-chip.d.ts +2 -2
  9. package/recipes/action-sheet-item.css +1 -1
  10. package/recipes/action-sheet-item.d.ts +1 -1
  11. package/recipes/action-sheet.css +1 -1
  12. package/recipes/app-bar-main.d.ts +4 -4
  13. package/recipes/app-bar.css +1 -1
  14. package/recipes/app-bar.d.ts +3 -3
  15. package/recipes/app-screen.d.ts +4 -4
  16. package/recipes/avatar.css +1 -1
  17. package/recipes/avatar.d.ts +1 -1
  18. package/recipes/badge.css +6 -6
  19. package/recipes/badge.d.ts +3 -3
  20. package/recipes/bottom-sheet.d.ts +1 -1
  21. package/recipes/callout.d.ts +1 -1
  22. package/recipes/checkbox.css +2 -2
  23. package/recipes/checkbox.d.ts +3 -3
  24. package/recipes/chip-tabs.d.ts +2 -2
  25. package/recipes/chip.css +36 -36
  26. package/recipes/chip.d.ts +3 -3
  27. package/recipes/contextual-floating-button.d.ts +2 -2
  28. package/recipes/control-chip.css +1 -1
  29. package/recipes/control-chip.d.ts +2 -2
  30. package/recipes/extended-action-sheet-item.css +1 -1
  31. package/recipes/extended-action-sheet-item.d.ts +1 -1
  32. package/recipes/extended-fab.d.ts +2 -2
  33. package/recipes/identity-placeholder.d.ts +1 -1
  34. package/recipes/inline-banner.d.ts +1 -1
  35. package/recipes/link-content.d.ts +2 -2
  36. package/recipes/manner-temp-badge.d.ts +1 -1
  37. package/recipes/manner-temp.d.ts +1 -1
  38. package/recipes/menu-sheet-item.css +1 -1
  39. package/recipes/menu-sheet-item.d.ts +2 -2
  40. package/recipes/notification-badge-positioner.d.ts +2 -2
  41. package/recipes/notification-badge.d.ts +1 -1
  42. package/recipes/page-banner.d.ts +2 -2
  43. package/recipes/progress-circle.d.ts +1 -1
  44. package/recipes/radio.css +1 -1
  45. package/recipes/radio.d.ts +1 -1
  46. package/recipes/reaction-button.css +3 -3
  47. package/recipes/reaction-button.d.ts +1 -1
  48. package/recipes/select-box.css +4 -4
  49. package/recipes/skeleton.d.ts +1 -1
  50. package/recipes/snackbar.d.ts +1 -1
  51. package/recipes/tabs.css +1 -1
  52. package/recipes/tabs.d.ts +3 -3
  53. package/recipes/text-field.css +3 -3
  54. package/recipes/text-field.d.ts +1 -1
  55. package/recipes/text.d.ts +3 -3
  56. package/recipes/toggle-button.d.ts +2 -2
  57. package/vars/color/fg.d.ts +3 -3
  58. package/vars/color/fg.mjs +3 -3
  59. package/vars/color/stroke.d.ts +14 -10
  60. package/vars/color/stroke.mjs +14 -10
  61. package/vars/component/action-button.d.ts +4 -4
  62. package/vars/component/action-button.mjs +4 -4
  63. package/vars/component/action-sheet.d.ts +1 -1
  64. package/vars/component/action-sheet.mjs +1 -1
  65. package/vars/component/avatar.d.ts +1 -1
  66. package/vars/component/avatar.mjs +1 -1
  67. package/vars/component/badge.d.ts +6 -6
  68. package/vars/component/badge.mjs +6 -6
  69. package/vars/component/checkbox.d.ts +2 -2
  70. package/vars/component/checkbox.mjs +2 -2
  71. package/vars/component/chip.d.ts +3 -94
  72. package/vars/component/chip.mjs +3 -94
  73. package/vars/component/control-chip.d.ts +1 -1
  74. package/vars/component/control-chip.mjs +1 -1
  75. package/vars/component/extended-action-sheet.d.ts +1 -1
  76. package/vars/component/extended-action-sheet.mjs +1 -1
  77. package/vars/component/menu-sheet.d.ts +1 -1
  78. package/vars/component/menu-sheet.mjs +1 -1
  79. package/vars/component/radio.d.ts +1 -1
  80. package/vars/component/radio.mjs +1 -1
  81. package/vars/component/reaction-button.d.ts +1 -1
  82. package/vars/component/reaction-button.mjs +1 -1
  83. package/vars/component/select-box.d.ts +4 -4
  84. package/vars/component/select-box.mjs +4 -4
  85. package/vars/component/tablist.d.ts +1 -1
  86. package/vars/component/tablist.mjs +1 -1
  87. package/vars/component/text-field.d.ts +4 -4
  88. package/vars/component/text-field.mjs +4 -4
  89. package/vars/component/top-navigation.d.ts +1 -1
  90. package/vars/component/top-navigation.mjs +1 -1
package/all.css CHANGED
@@ -405,13 +405,13 @@
405
405
  --seed-color-palette-yellow-900: #4f3e1f;
406
406
  --seed-color-palette-yellow-1000: #2c2512;
407
407
  --seed-color-fg-neutral: var(--seed-color-palette-gray-1000);
408
+ --seed-color-fg-placeholder: var(--seed-color-palette-gray-600);
409
+ --seed-color-fg-disabled: var(--seed-color-palette-gray-500);
408
410
  --seed-color-fg-brand: var(--seed-color-palette-carrot-600);
411
+ --seed-color-fg-informative: var(--seed-color-palette-blue-700);
409
412
  --seed-color-fg-critical: var(--seed-color-palette-red-700);
410
413
  --seed-color-fg-positive: var(--seed-color-palette-green-700);
411
414
  --seed-color-fg-warning: var(--seed-color-palette-yellow-700);
412
- --seed-color-fg-informative: var(--seed-color-palette-blue-700);
413
- --seed-color-fg-placeholder: var(--seed-color-palette-gray-600);
414
- --seed-color-fg-disabled: var(--seed-color-palette-gray-500);
415
415
  --seed-color-fg-brand-contrast: var(--seed-color-palette-carrot-700);
416
416
  --seed-color-fg-critical-contrast: var(--seed-color-palette-red-900);
417
417
  --seed-color-fg-informative-contrast: var(--seed-color-palette-blue-900);
@@ -457,17 +457,21 @@
457
457
  --seed-color-bg-warning-solid: var(--seed-color-palette-yellow-300);
458
458
  --seed-color-bg-warning-solid-pressed: var(--seed-color-palette-yellow-400);
459
459
  --seed-color-bg-warning-weak-pressed: var(--seed-color-palette-yellow-200);
460
- --seed-color-stroke-neutral: var(--seed-color-palette-static-black-alpha-300);
461
- --seed-color-stroke-brand: var(--seed-color-palette-carrot-300);
462
- --seed-color-stroke-positive: var(--seed-color-palette-green-300);
463
- --seed-color-stroke-informative: var(--seed-color-palette-blue-300);
464
- --seed-color-stroke-warning: var(--seed-color-palette-yellow-300);
465
- --seed-color-stroke-critical: var(--seed-color-palette-red-300);
466
- --seed-color-stroke-field: var(--seed-color-palette-gray-400);
467
- --seed-color-stroke-control: var(--seed-color-palette-gray-400);
468
- --seed-color-stroke-field-focused: var(--seed-color-palette-gray-800);
469
- --seed-color-stroke-neutral-muted: var(--seed-color-palette-static-black-alpha-200);
470
- --seed-color-stroke-on-image: var(--seed-color-palette-static-black-alpha-200);
460
+ --seed-color-stroke-brand-weak: var(--seed-color-palette-carrot-300);
461
+ --seed-color-stroke-brand-solid: var(--seed-color-palette-carrot-700);
462
+ --seed-color-stroke-critical-weak: var(--seed-color-palette-red-300);
463
+ --seed-color-stroke-critical-solid: var(--seed-color-palette-red-700);
464
+ --seed-color-stroke-informative-weak: var(--seed-color-palette-blue-300);
465
+ --seed-color-stroke-informative-solid: var(--seed-color-palette-blue-700);
466
+ --seed-color-stroke-neutral-contrast: var(--seed-color-palette-gray-1000);
467
+ --seed-color-stroke-neutral-solid: var(--seed-color-palette-gray-800);
468
+ --seed-color-stroke-neutral-weak: var(--seed-color-palette-gray-400);
469
+ --seed-color-stroke-neutral-muted: var(--seed-color-palette-static-black-alpha-300);
470
+ --seed-color-stroke-neutral-subtle: var(--seed-color-palette-static-black-alpha-200);
471
+ --seed-color-stroke-positive-weak: var(--seed-color-palette-green-300);
472
+ --seed-color-stroke-positive-solid: var(--seed-color-palette-green-700);
473
+ --seed-color-stroke-warning-weak: var(--seed-color-palette-yellow-300);
474
+ --seed-color-stroke-warning-solid: var(--seed-color-palette-yellow-700);
471
475
  --seed-color-manner-temp-l1-text: #62666a;
472
476
  --seed-color-manner-temp-l2-text: #2592f7;
473
477
  --seed-color-manner-temp-l3-text: #0099c8;
@@ -586,13 +590,13 @@
586
590
  --seed-color-palette-yellow-900: #e5d49b;
587
591
  --seed-color-palette-yellow-1000: #f7f0cd;
588
592
  --seed-color-fg-neutral: var(--seed-color-palette-gray-1000);
593
+ --seed-color-fg-placeholder: var(--seed-color-palette-gray-600);
594
+ --seed-color-fg-disabled: var(--seed-color-palette-gray-500);
589
595
  --seed-color-fg-brand: var(--seed-color-palette-carrot-700);
596
+ --seed-color-fg-informative: var(--seed-color-palette-blue-700);
590
597
  --seed-color-fg-critical: var(--seed-color-palette-red-700);
591
598
  --seed-color-fg-positive: var(--seed-color-palette-green-700);
592
599
  --seed-color-fg-warning: var(--seed-color-palette-yellow-700);
593
- --seed-color-fg-informative: var(--seed-color-palette-blue-700);
594
- --seed-color-fg-placeholder: var(--seed-color-palette-gray-600);
595
- --seed-color-fg-disabled: var(--seed-color-palette-gray-500);
596
600
  --seed-color-fg-brand-contrast: var(--seed-color-palette-carrot-700);
597
601
  --seed-color-fg-critical-contrast: var(--seed-color-palette-red-900);
598
602
  --seed-color-fg-informative-contrast: var(--seed-color-palette-blue-900);
@@ -638,17 +642,21 @@
638
642
  --seed-color-bg-warning-solid: var(--seed-color-palette-yellow-600);
639
643
  --seed-color-bg-warning-solid-pressed: var(--seed-color-palette-yellow-700);
640
644
  --seed-color-bg-warning-weak-pressed: var(--seed-color-palette-yellow-200);
641
- --seed-color-stroke-neutral: var(--seed-color-palette-static-white-alpha-100);
642
- --seed-color-stroke-brand: var(--seed-color-palette-carrot-300);
643
- --seed-color-stroke-positive: var(--seed-color-palette-green-300);
644
- --seed-color-stroke-informative: var(--seed-color-palette-blue-300);
645
- --seed-color-stroke-warning: var(--seed-color-palette-yellow-300);
646
- --seed-color-stroke-critical: var(--seed-color-palette-red-300);
647
- --seed-color-stroke-field: var(--seed-color-palette-gray-400);
648
- --seed-color-stroke-control: var(--seed-color-palette-gray-400);
649
- --seed-color-stroke-field-focused: var(--seed-color-palette-gray-800);
650
- --seed-color-stroke-neutral-muted: var(--seed-color-palette-static-white-alpha-50);
651
- --seed-color-stroke-on-image: var(--seed-color-palette-static-white-alpha-50);
645
+ --seed-color-stroke-brand-weak: var(--seed-color-palette-carrot-300);
646
+ --seed-color-stroke-brand-solid: var(--seed-color-palette-carrot-700);
647
+ --seed-color-stroke-critical-weak: var(--seed-color-palette-red-300);
648
+ --seed-color-stroke-critical-solid: var(--seed-color-palette-red-700);
649
+ --seed-color-stroke-informative-weak: var(--seed-color-palette-blue-300);
650
+ --seed-color-stroke-informative-solid: var(--seed-color-palette-blue-700);
651
+ --seed-color-stroke-neutral-contrast: var(--seed-color-palette-gray-1000);
652
+ --seed-color-stroke-neutral-solid: var(--seed-color-palette-gray-800);
653
+ --seed-color-stroke-neutral-weak: var(--seed-color-palette-gray-400);
654
+ --seed-color-stroke-neutral-muted: var(--seed-color-palette-static-white-alpha-100);
655
+ --seed-color-stroke-neutral-subtle: var(--seed-color-palette-static-white-alpha-50);
656
+ --seed-color-stroke-positive-weak: var(--seed-color-palette-green-300);
657
+ --seed-color-stroke-positive-solid: var(--seed-color-palette-green-700);
658
+ --seed-color-stroke-warning-weak: var(--seed-color-palette-yellow-300);
659
+ --seed-color-stroke-warning-solid: var(--seed-color-palette-yellow-700);
652
660
  --seed-color-manner-temp-l1-text: #b1b5b9;
653
661
  --seed-color-manner-temp-l2-text: #7cbaf4;
654
662
  --seed-color-manner-temp-l3-text: #47c3eb;
@@ -830,7 +838,7 @@
830
838
  background: var(--seed-color-bg-layer-default);
831
839
  border-style: solid;
832
840
  border-width: 1px;
833
- border-color: var(--seed-color-stroke-neutral);
841
+ border-color: var(--seed-color-stroke-neutral-muted);
834
842
  color: var(--seed-color-fg-brand);
835
843
  --seed-prefix-icon-color: var(--seed-color-fg-brand);
836
844
  --seed-suffix-icon-color: var(--seed-color-fg-brand);
@@ -845,7 +853,7 @@
845
853
 
846
854
  .seed-action-button--variant_brandOutline:is(:disabled, [disabled], [data-disabled]) {
847
855
  background: var(--seed-color-bg-layer-default);
848
- border-color: var(--seed-color-stroke-neutral);
856
+ border-color: var(--seed-color-stroke-neutral-muted);
849
857
  color: var(--seed-color-fg-disabled);
850
858
  --seed-prefix-icon-color: var(--seed-color-fg-disabled);
851
859
  --seed-suffix-icon-color: var(--seed-color-fg-disabled);
@@ -860,7 +868,7 @@
860
868
  background: var(--seed-color-bg-layer-default);
861
869
  border-style: solid;
862
870
  border-width: 1px;
863
- border-color: var(--seed-color-stroke-neutral);
871
+ border-color: var(--seed-color-stroke-neutral-muted);
864
872
  color: var(--seed-color-fg-neutral);
865
873
  --seed-prefix-icon-color: var(--seed-color-fg-neutral);
866
874
  --seed-suffix-icon-color: var(--seed-color-fg-neutral);
@@ -875,7 +883,7 @@
875
883
 
876
884
  .seed-action-button--variant_neutralOutline:is(:disabled, [disabled], [data-disabled]) {
877
885
  background: var(--seed-color-bg-layer-default);
878
- border-color: var(--seed-color-stroke-neutral);
886
+ border-color: var(--seed-color-stroke-neutral-muted);
879
887
  color: var(--seed-color-fg-disabled);
880
888
  --seed-prefix-icon-color: var(--seed-color-fg-disabled);
881
889
  --seed-suffix-icon-color: var(--seed-color-fg-disabled);
@@ -1196,7 +1204,7 @@
1196
1204
  content: "";
1197
1205
  left: var(--seed-dimension-spacing-x-global-gutter);
1198
1206
  right: var(--seed-dimension-spacing-x-global-gutter);
1199
- background: var(--seed-color-stroke-neutral);
1207
+ background: var(--seed-color-stroke-neutral-muted);
1200
1208
  height: 1px;
1201
1209
  display: block;
1202
1210
  position: absolute;
@@ -1263,7 +1271,7 @@
1263
1271
  content: "";
1264
1272
  left: var(--seed-dimension-spacing-x-global-gutter);
1265
1273
  right: var(--seed-dimension-spacing-x-global-gutter);
1266
- background: var(--seed-color-stroke-neutral);
1274
+ background: var(--seed-color-stroke-neutral-muted);
1267
1275
  height: 1px;
1268
1276
  display: block;
1269
1277
  position: absolute;
@@ -1500,7 +1508,7 @@
1500
1508
  }
1501
1509
 
1502
1510
  .seed-app-bar__root--divider_true:before {
1503
- box-shadow: inset 0px calc(-1 * 1px) 0 var(--seed-color-stroke-neutral-muted);
1511
+ box-shadow: inset 0px calc(-1 * 1px) 0 var(--seed-color-stroke-neutral-subtle);
1504
1512
  }
1505
1513
 
1506
1514
  .seed-app-bar-main__root {
@@ -1890,7 +1898,7 @@
1890
1898
  content: "";
1891
1899
  pointer-events: none;
1892
1900
  border-radius: var(--seed-radius-full);
1893
- box-shadow: inset 0 0 0 var(--avatar-stroke-width) var(--seed-color-stroke-on-image);
1901
+ box-shadow: inset 0 0 0 var(--avatar-stroke-width) var(--seed-color-stroke-neutral-subtle);
1894
1902
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><circle cx=\"16\" cy=\"16\" r=\"16\" fill=\"white\"/></svg>"), var(--svg-mask-uri);
1895
1903
  -webkit-mask-size: 100% 100%, var(--badge-mask-size) var(--badge-mask-size);
1896
1904
  -webkit-mask-position: 0 0, var(--badge-mask-offset) var(--badge-mask-offset);
@@ -2241,7 +2249,7 @@
2241
2249
  }
2242
2250
 
2243
2251
  .seed-badge__root--tone_neutral-variant_outline {
2244
- box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral);
2252
+ box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-muted);
2245
2253
  color: var(--seed-color-fg-neutral-muted);
2246
2254
  }
2247
2255
 
@@ -2256,7 +2264,7 @@
2256
2264
  }
2257
2265
 
2258
2266
  .seed-badge__root--tone_brand-variant_outline {
2259
- box-shadow: inset 0 0 0 1px var(--seed-color-stroke-brand);
2267
+ box-shadow: inset 0 0 0 1px var(--seed-color-stroke-brand-weak);
2260
2268
  color: var(--seed-color-fg-brand);
2261
2269
  }
2262
2270
 
@@ -2271,7 +2279,7 @@
2271
2279
  }
2272
2280
 
2273
2281
  .seed-badge__root--tone_informative-variant_outline {
2274
- box-shadow: inset 0 0 0 1px var(--seed-color-stroke-informative);
2282
+ box-shadow: inset 0 0 0 1px var(--seed-color-stroke-informative-weak);
2275
2283
  color: var(--seed-color-fg-informative);
2276
2284
  }
2277
2285
 
@@ -2286,7 +2294,7 @@
2286
2294
  }
2287
2295
 
2288
2296
  .seed-badge__root--tone_positive-variant_outline {
2289
- box-shadow: inset 0 0 0 1px var(--seed-color-stroke-positive);
2297
+ box-shadow: inset 0 0 0 1px var(--seed-color-stroke-positive-weak);
2290
2298
  color: var(--seed-color-fg-positive);
2291
2299
  }
2292
2300
 
@@ -2301,7 +2309,7 @@
2301
2309
  }
2302
2310
 
2303
2311
  .seed-badge__root--tone_warning-variant_outline {
2304
- box-shadow: inset 0 0 0 1px var(--seed-color-stroke-warning);
2312
+ box-shadow: inset 0 0 0 1px var(--seed-color-stroke-warning-weak);
2305
2313
  color: var(--seed-color-fg-warning);
2306
2314
  }
2307
2315
 
@@ -2316,7 +2324,7 @@
2316
2324
  }
2317
2325
 
2318
2326
  .seed-badge__root--tone_critical-variant_outline {
2319
- box-shadow: inset 0 0 0 1px var(--seed-color-stroke-critical);
2327
+ box-shadow: inset 0 0 0 1px var(--seed-color-stroke-critical-weak);
2320
2328
  color: var(--seed-color-fg-critical);
2321
2329
  }
2322
2330
 
@@ -2671,7 +2679,7 @@
2671
2679
  .seed-checkbox__control--variant_square {
2672
2680
  border-style: solid;
2673
2681
  border-width: 1px;
2674
- border-color: var(--seed-color-stroke-control);
2682
+ border-color: var(--seed-color-stroke-neutral-weak);
2675
2683
  }
2676
2684
 
2677
2685
  .seed-checkbox__control--variant_square:is(:checked, :indeterminate, [data-checked], [data-indeterminate]) {
@@ -2689,7 +2697,7 @@
2689
2697
 
2690
2698
  .seed-checkbox__control--variant_square:is(:disabled, [disabled], [data-disabled]) {
2691
2699
  background: var(--seed-color-bg-disabled);
2692
- border-color: var(--seed-color-stroke-neutral);
2700
+ border-color: var(--seed-color-stroke-neutral-muted);
2693
2701
  }
2694
2702
 
2695
2703
  .seed-checkbox__control--variant_square:is(:disabled, [disabled], [data-disabled]):is(:active, [data-active]) {
@@ -2823,14 +2831,9 @@
2823
2831
  cursor: not-allowed;
2824
2832
  }
2825
2833
 
2826
- .seed-chip__root {
2827
- --seed-icon-color: inherit;
2828
- }
2829
-
2830
2834
  .seed-chip__label {
2831
2835
  font-weight: var(--seed-font-weight-medium);
2832
2836
  padding-inline: var(--seed-dimension-x1_5);
2833
- color: inherit;
2834
2837
  justify-content: center;
2835
2838
  align-items: center;
2836
2839
  display: inline-flex;
@@ -2838,7 +2841,6 @@
2838
2841
 
2839
2842
  .seed-chip__prefixIcon {
2840
2843
  padding-left: var(--seed-dimension-x1_5);
2841
- --seed-icon-color: inherit;
2842
2844
  flex-shrink: 0;
2843
2845
  align-items: center;
2844
2846
  display: inline-flex;
@@ -2852,7 +2854,6 @@
2852
2854
 
2853
2855
  .seed-chip__suffixIcon {
2854
2856
  padding-right: var(--seed-dimension-x1_5);
2855
- --seed-icon-color: inherit;
2856
2857
  flex-shrink: 0;
2857
2858
  align-items: center;
2858
2859
  display: inline-flex;
@@ -2860,101 +2861,99 @@
2860
2861
 
2861
2862
  .seed-chip__root--variant_solid {
2862
2863
  background: var(--seed-color-bg-neutral-weak);
2863
- color: var(--seed-color-fg-neutral);
2864
+ --seed-icon-color: var(--seed-color-fg-neutral);
2864
2865
  }
2865
2866
 
2866
2867
  .seed-chip__root--variant_solid:is(:checked, [data-checked]) {
2867
2868
  box-shadow: none;
2868
2869
  background: var(--seed-color-bg-neutral-inverted);
2869
- color: var(--seed-color-fg-neutral-inverted);
2870
2870
  --seed-icon-color: var(--seed-color-fg-neutral-inverted);
2871
2871
  }
2872
2872
 
2873
2873
  .seed-chip__root--variant_solid:is(:active, [data-active]):not(:is(:disabled, [disabled], [data-disabled])) {
2874
2874
  background: var(--seed-color-bg-neutral-weak-pressed);
2875
- color: var(--seed-color-fg-neutral);
2876
- --seed-icon-color: var(--seed-color-fg-neutral);
2877
2875
  }
2878
2876
 
2879
2877
  .seed-chip__root--variant_solid:is(:checked, [data-checked]):is(:active, [data-active]):not(:is(:disabled, [disabled], [data-disabled])) {
2880
2878
  background: var(--seed-color-bg-neutral-inverted-pressed);
2881
- color: var(--seed-color-fg-neutral-inverted);
2882
- --seed-icon-color: var(--seed-color-fg-neutral-inverted);
2883
2879
  }
2884
2880
 
2885
2881
  .seed-chip__root--variant_solid:is(:disabled, [disabled], [data-disabled]) {
2886
2882
  opacity: .5;
2887
2883
  }
2888
2884
 
2889
- .seed-chip__root--variant_solid {
2890
- --seed-icon-color: var(--seed-color-fg-neutral);
2885
+ .seed-chip__label--variant_solid {
2886
+ color: var(--seed-color-fg-neutral);
2887
+ }
2888
+
2889
+ .seed-chip__label--variant_solid:is(:checked, [data-checked]) {
2890
+ color: var(--seed-color-fg-neutral-inverted);
2891
+ }
2892
+
2893
+ .seed-chip__prefixIcon--variant_solid, .seed-chip__suffixIcon--variant_solid {
2894
+ color: var(--seed-color-fg-neutral);
2891
2895
  }
2892
2896
 
2893
2897
  .seed-chip__root--variant_outlineStrong {
2894
2898
  background: var(--seed-color-bg-layer-default);
2895
- box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral);
2896
- color: var(--seed-color-fg-neutral);
2899
+ box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-muted);
2900
+ --seed-icon-color: var(--seed-color-fg-neutral);
2897
2901
  }
2898
2902
 
2899
2903
  .seed-chip__root--variant_outlineStrong:is(:active, [data-active]):not(:is(:disabled, [disabled], [data-disabled])) {
2900
2904
  background: var(--seed-color-bg-layer-default-pressed);
2901
- color: var(--seed-color-fg-neutral);
2902
- --seed-icon-color: var(--seed-color-fg-neutral);
2903
2905
  }
2904
2906
 
2905
2907
  .seed-chip__root--variant_outlineStrong:is(:checked, [data-checked]) {
2906
2908
  background: var(--seed-color-bg-neutral-inverted);
2907
- color: var(--seed-color-fg-neutral-inverted);
2908
2909
  --seed-icon-color: var(--seed-color-fg-neutral-inverted);
2909
2910
  }
2910
2911
 
2911
2912
  .seed-chip__root--variant_outlineStrong:is(:checked, [data-checked]):is(:active, [data-active]):not(:is(:disabled, [disabled], [data-disabled])) {
2912
2913
  background: var(--seed-color-bg-neutral-inverted-pressed);
2913
- color: var(--seed-color-fg-neutral-inverted);
2914
- --seed-icon-color: var(--seed-color-fg-neutral-inverted);
2915
2914
  }
2916
2915
 
2917
2916
  .seed-chip__root--variant_outlineStrong:is(:disabled, [disabled], [data-disabled]) {
2918
2917
  opacity: .5;
2919
2918
  }
2920
2919
 
2921
- .seed-chip__root--variant_outlineStrong {
2922
- --seed-icon-color: var(--seed-color-fg-neutral);
2920
+ .seed-chip__label--variant_outlineStrong {
2921
+ color: var(--seed-color-fg-neutral);
2922
+ }
2923
+
2924
+ .seed-chip__label--variant_outlineStrong:is(:checked, [data-checked]) {
2925
+ color: var(--seed-color-fg-neutral-inverted);
2926
+ }
2927
+
2928
+ .seed-chip__prefixIcon--variant_outlineStrong, .seed-chip__suffixIcon--variant_outlineStrong {
2929
+ color: var(--seed-color-fg-neutral);
2923
2930
  }
2924
2931
 
2925
2932
  .seed-chip__root--variant_outlineWeak {
2926
2933
  background: var(--seed-color-bg-layer-default);
2927
- box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral);
2928
- color: var(--seed-color-fg-neutral);
2934
+ box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-muted);
2935
+ --seed-icon-color: var(--seed-color-fg-neutral);
2929
2936
  }
2930
2937
 
2931
2938
  .seed-chip__root--variant_outlineWeak:is(:active, [data-active]):not(:is(:disabled, [disabled], [data-disabled])) {
2932
2939
  background: var(--seed-color-bg-layer-default-pressed);
2933
- box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral);
2934
- color: var(--seed-color-fg-neutral);
2935
- --seed-icon-color: var(--seed-color-fg-neutral);
2936
2940
  }
2937
2941
 
2938
2942
  .seed-chip__root--variant_outlineWeak:is(:checked, [data-checked]) {
2939
2943
  background: var(--seed-color-bg-neutral-weak);
2940
- box-shadow: inset 0 0 0 1px var(--seed-color-stroke-field-focused);
2941
- color: var(--seed-color-fg-neutral);
2942
- --seed-icon-color: var(--seed-color-fg-neutral);
2944
+ box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-contrast);
2943
2945
  }
2944
2946
 
2945
2947
  .seed-chip__root--variant_outlineWeak:is(:checked, [data-checked]):is(:active, [data-active]):not(:is(:disabled, [disabled], [data-disabled])) {
2946
2948
  background: var(--seed-color-bg-neutral-weak-pressed);
2947
- box-shadow: inset 0 0 0 1px var(--seed-color-stroke-field-focused);
2948
- color: var(--seed-color-fg-neutral);
2949
- --seed-icon-color: var(--seed-color-fg-neutral);
2950
2949
  }
2951
2950
 
2952
2951
  .seed-chip__root--variant_outlineWeak:is(:disabled, [disabled], [data-disabled]) {
2953
2952
  opacity: .5;
2954
2953
  }
2955
2954
 
2956
- .seed-chip__root--variant_outlineWeak {
2957
- --seed-icon-color: var(--seed-color-fg-neutral);
2955
+ .seed-chip__label--variant_outlineWeak, .seed-chip__prefixIcon--variant_outlineWeak, .seed-chip__suffixIcon--variant_outlineWeak {
2956
+ color: var(--seed-color-fg-neutral);
2958
2957
  }
2959
2958
 
2960
2959
  .seed-chip__root--size_large {
@@ -3292,7 +3291,7 @@
3292
3291
  -webkit-font-smoothing: antialiased;
3293
3292
  -moz-osx-font-smoothing: grayscale;
3294
3293
  border-radius: var(--seed-radius-full);
3295
- box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral);
3294
+ box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-muted);
3296
3295
  color: var(--seed-color-fg-neutral);
3297
3296
  line-height: 1;
3298
3297
  font-weight: var(--seed-font-weight-medium);
@@ -3628,7 +3627,7 @@
3628
3627
  justify-content: flex-start;
3629
3628
  align-items: center;
3630
3629
  gap: var(--seed-dimension-x3_5);
3631
- box-shadow: inset 0 calc(-1 * 1px) 0 var(--seed-color-stroke-neutral);
3630
+ box-shadow: inset 0 calc(-1 * 1px) 0 var(--seed-color-stroke-neutral-muted);
3632
3631
  font-size: var(--seed-font-size-t5);
3633
3632
  line-height: var(--seed-line-height-t5);
3634
3633
  font-weight: var(--seed-font-weight-regular);
@@ -4388,7 +4387,7 @@
4388
4387
  padding-block: var(--seed-dimension-x3_5);
4389
4388
  align-items: center;
4390
4389
  gap: var(--seed-dimension-x3_5);
4391
- box-shadow: inset 0 calc(-1 * 1px) 0 var(--seed-color-stroke-neutral);
4390
+ box-shadow: inset 0 calc(-1 * 1px) 0 var(--seed-color-stroke-neutral-muted);
4392
4391
  font-size: var(--seed-font-size-t5);
4393
4392
  line-height: var(--seed-line-height-t5);
4394
4393
  font-weight: var(--seed-font-weight-regular);
@@ -4787,7 +4786,7 @@
4787
4786
  background-color: var(--seed-color-bg-layer-default);
4788
4787
  border-style: solid;
4789
4788
  border-width: 1px;
4790
- border-color: var(--seed-color-stroke-control);
4789
+ border-color: var(--seed-color-stroke-neutral-weak);
4791
4790
  border-radius: var(--seed-radius-full);
4792
4791
  flex: none;
4793
4792
  justify-content: center;
@@ -4901,7 +4900,7 @@
4901
4900
  .seed-reaction-button:is([aria-pressed="true"], [data-pressed]) {
4902
4901
  background: var(--seed-color-bg-layer-default);
4903
4902
  color: var(--seed-color-fg-brand);
4904
- box-shadow: inset 0 0 0 1px var(--seed-color-stroke-brand);
4903
+ box-shadow: inset 0 0 0 1px var(--seed-color-stroke-brand-weak);
4905
4904
  --seed-prefix-icon-color: var(--seed-color-fg-brand);
4906
4905
  --seed-count-color: var(--seed-color-fg-brand);
4907
4906
  }
@@ -4914,7 +4913,7 @@
4914
4913
  cursor: not-allowed;
4915
4914
  background: var(--seed-color-bg-disabled);
4916
4915
  color: var(--seed-color-fg-disabled);
4917
- box-shadow: inset 0 0 0 0px var(--seed-color-stroke-brand);
4916
+ box-shadow: inset 0 0 0 0px var(--seed-color-stroke-brand-weak);
4918
4917
  --seed-prefix-icon-color: var(--seed-color-fg-disabled);
4919
4918
  --seed-count-color: var(--seed-color-fg-disabled);
4920
4919
  }
@@ -4925,7 +4924,7 @@
4925
4924
 
4926
4925
  .seed-reaction-button:is([aria-pressed="true"], [data-pressed])[data-loading] {
4927
4926
  background: var(--seed-color-bg-layer-default-pressed);
4928
- box-shadow: inset 0 0 0 1px var(--seed-color-stroke-brand);
4927
+ box-shadow: inset 0 0 0 1px var(--seed-color-stroke-brand-weak);
4929
4928
  --track-color: var(--seed-color-palette-carrot-200);
4930
4929
  --range-color: var(--seed-color-fg-brand);
4931
4930
  }
@@ -5030,7 +5029,7 @@
5030
5029
  padding-inline: var(--seed-dimension-x4);
5031
5030
  padding-block: var(--seed-dimension-x5);
5032
5031
  border-radius: var(--seed-radius-r3);
5033
- box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral);
5032
+ box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-muted);
5034
5033
  display: flex;
5035
5034
  }
5036
5035
 
@@ -5040,7 +5039,7 @@
5040
5039
 
5041
5040
  .seed-select-box__root:is(:checked, [data-checked]) {
5042
5041
  background-color: var(--seed-color-bg-neutral-weak);
5043
- box-shadow: inset 0 0 0 1px var(--seed-color-stroke-control);
5042
+ box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-weak);
5044
5043
  }
5045
5044
 
5046
5045
  .seed-select-box__root:is(:checked, [data-checked]):is(:active, [data-active]) {
@@ -5061,7 +5060,7 @@
5061
5060
  background-color: var(--seed-color-bg-layer-default);
5062
5061
  border-style: solid;
5063
5062
  border-width: 1px;
5064
- border-color: var(--seed-color-stroke-control);
5063
+ border-color: var(--seed-color-stroke-neutral-weak);
5065
5064
  border-radius: var(--seed-radius-r1);
5066
5065
  flex: none;
5067
5066
  justify-content: center;
@@ -5100,7 +5099,7 @@
5100
5099
  background-color: var(--seed-color-bg-layer-default);
5101
5100
  border-style: solid;
5102
5101
  border-width: 1px;
5103
- border-color: var(--seed-color-stroke-control);
5102
+ border-color: var(--seed-color-stroke-neutral-weak);
5104
5103
  border-radius: var(--seed-radius-full);
5105
5104
  flex: none;
5106
5105
  justify-content: center;
@@ -5468,7 +5467,7 @@
5468
5467
 
5469
5468
  .seed-tabs__list {
5470
5469
  background: var(--seed-color-bg-layer-default);
5471
- box-shadow: inset 0 -1px var(--seed-color-stroke-neutral);
5470
+ box-shadow: inset 0 -1px var(--seed-color-stroke-neutral-muted);
5472
5471
  }
5473
5472
 
5474
5473
  .seed-tabs__carousel {
@@ -5865,19 +5864,19 @@
5865
5864
  background-color: var(--seed-color-bg-layer-default);
5866
5865
  border-style: solid;
5867
5866
  border-width: 1px;
5868
- border-color: var(--seed-color-stroke-field);
5867
+ border-color: var(--seed-color-stroke-neutral-weak);
5869
5868
  align-items: center;
5870
5869
  display: flex;
5871
5870
  overflow: hidden;
5872
5871
  }
5873
5872
 
5874
5873
  .seed-text-field__field:not([data-readonly]):is(:focus, [data-focus]) {
5875
- border-color: var(--seed-color-stroke-field-focused);
5874
+ border-color: var(--seed-color-stroke-neutral-contrast);
5876
5875
  }
5877
5876
 
5878
5877
  .seed-text-field__field:is(:invalid, [data-invalid]) {
5879
5878
  background-color: var(--seed-color-bg-critical-weak);
5880
- border-color: var(--seed-color-stroke-critical);
5879
+ border-color: var(--seed-color-stroke-critical-weak);
5881
5880
  }
5882
5881
 
5883
5882
  .seed-text-field__field:is(:invalid, [data-invalid]):is(:focus, [data-focus]) {