@seed-design/lynx-css 0.12.1 → 0.14.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 (84) hide show
  1. package/all.css +170 -80
  2. package/all.min.css +1 -1
  3. package/base.css +20 -4
  4. package/base.min.css +1 -1
  5. package/package.json +4 -3
  6. package/recipes/action-button.css +19 -19
  7. package/recipes/app-bar.css +3 -3
  8. package/recipes/badge.css +95 -31
  9. package/recipes/badge.d.ts +5 -1
  10. package/recipes/badge.mjs +22 -1
  11. package/recipes/checkmark.css +10 -10
  12. package/recipes/chip-tabs.css +6 -6
  13. package/recipes/chip.css +14 -14
  14. package/recipes/contextual-floating-button.css +7 -7
  15. package/recipes/floating-action-button.css +2 -2
  16. package/recipes/help-bubble.css +5 -5
  17. package/recipes/notification-badge.css +1 -1
  18. package/recipes/page-banner.css +29 -29
  19. package/recipes/radiomark.css +7 -7
  20. package/recipes/slider-tick.css +1 -1
  21. package/recipes/slider.css +4 -4
  22. package/recipes/switchmark.css +2 -2
  23. package/vars/color/bg.d.ts +8 -4
  24. package/vars/color/bg.mjs +3 -1
  25. package/vars/color/fg.d.ts +13 -1
  26. package/vars/color/fg.mjs +6 -0
  27. package/vars/component/action-button.d.ts +18 -18
  28. package/vars/component/action-button.mjs +18 -18
  29. package/vars/component/badge.d.ts +22 -12
  30. package/vars/component/badge.mjs +22 -10
  31. package/vars/component/checkmark.d.ts +4 -4
  32. package/vars/component/checkmark.mjs +4 -4
  33. package/vars/component/chip.d.ts +12 -12
  34. package/vars/component/chip.mjs +12 -12
  35. package/vars/component/contextual-floating-button.d.ts +7 -7
  36. package/vars/component/contextual-floating-button.mjs +7 -7
  37. package/vars/component/date-picker.d.ts +8 -6
  38. package/vars/component/date-picker.mjs +8 -6
  39. package/vars/component/dialog-close-button.d.ts +1 -3
  40. package/vars/component/dialog-close-button.mjs +1 -3
  41. package/vars/component/extended-fab.d.ts +4 -4
  42. package/vars/component/extended-fab.mjs +4 -4
  43. package/vars/component/floating-action-button.d.ts +2 -2
  44. package/vars/component/floating-action-button.mjs +2 -2
  45. package/vars/component/help-bubble.d.ts +5 -5
  46. package/vars/component/help-bubble.mjs +5 -5
  47. package/vars/component/index.d.ts +2 -2
  48. package/vars/component/index.mjs +2 -2
  49. package/vars/component/notification-badge.d.ts +1 -1
  50. package/vars/component/notification-badge.mjs +1 -1
  51. package/vars/component/page-banner-close-button.d.ts +1 -1
  52. package/vars/component/page-banner-close-button.mjs +1 -1
  53. package/vars/component/page-banner.d.ts +27 -27
  54. package/vars/component/page-banner.mjs +27 -27
  55. package/vars/component/pagination-page-item.d.ts +3 -3
  56. package/vars/component/pagination-page-item.mjs +3 -3
  57. package/vars/component/popover-close-button.d.ts +22 -0
  58. package/vars/component/popover-close-button.mjs +22 -0
  59. package/vars/component/popover.d.ts +74 -0
  60. package/vars/component/popover.mjs +64 -0
  61. package/vars/component/radiomark.d.ts +4 -4
  62. package/vars/component/radiomark.mjs +4 -4
  63. package/vars/component/side-panel-close-button.d.ts +1 -3
  64. package/vars/component/side-panel-close-button.mjs +1 -3
  65. package/vars/component/slider-thumb.d.ts +1 -1
  66. package/vars/component/slider-thumb.mjs +1 -1
  67. package/vars/component/slider-tick.d.ts +1 -1
  68. package/vars/component/slider-tick.mjs +1 -1
  69. package/vars/component/slider.d.ts +4 -4
  70. package/vars/component/slider.mjs +4 -4
  71. package/vars/component/snackbar.d.ts +2 -2
  72. package/vars/component/snackbar.mjs +2 -2
  73. package/vars/component/switchmark.d.ts +5 -2
  74. package/vars/component/switchmark.mjs +5 -2
  75. package/vars/component/toggle-button.d.ts +4 -4
  76. package/vars/component/toggle-button.mjs +4 -4
  77. package/vars/component/top-navigation.d.ts +1 -4
  78. package/vars/component/top-navigation.mjs +1 -4
  79. package/vars/component/chip-tab.d.ts +0 -121
  80. package/vars/component/chip-tab.mjs +0 -121
  81. package/vars/component/control-chip.d.ts +0 -158
  82. package/vars/component/control-chip.mjs +0 -158
  83. package/vars/component/inline-banner.d.ts +0 -191
  84. package/vars/component/inline-banner.mjs +0 -191
package/all.css CHANGED
@@ -262,6 +262,12 @@ text {
262
262
  --seed-color-fg-neutral-inverted: #fff;
263
263
  --seed-color-fg-neutral-muted: #555d6d;
264
264
  --seed-color-fg-neutral-subtle: #868b94;
265
+ --seed-color-fg-on-brand-solid: #fff;
266
+ --seed-color-fg-on-critical-solid: #fff;
267
+ --seed-color-fg-on-informative-solid: #fff;
268
+ --seed-color-fg-on-neutral-solid: #fff;
269
+ --seed-color-fg-on-positive-solid: #fff;
270
+ --seed-color-fg-on-warning-solid: #000000d0;
265
271
  --seed-color-fg-placeholder: #b0b3ba;
266
272
  --seed-color-fg-positive: #079171;
267
273
  --seed-color-fg-positive-contrast: #075445;
@@ -283,15 +289,17 @@ text {
283
289
  --seed-color-bg-layer-basement: #f3f4f5;
284
290
  --seed-color-bg-layer-default: #fff;
285
291
  --seed-color-bg-layer-default-pressed: #f7f8f9;
286
- --seed-color-bg-layer-fill: #f7f8f9;
287
292
  --seed-color-bg-layer-floating: #fff;
288
293
  --seed-color-bg-layer-floating-pressed: #f7f8f9;
289
294
  --seed-color-bg-magic-weak: #f9f2ee;
290
295
  --seed-color-bg-neutral-inverted: #2a3038;
291
296
  --seed-color-bg-neutral-inverted-pressed: #555d6d;
292
- --seed-color-bg-neutral-solid: #1a1c20;
297
+ --seed-color-bg-neutral-muted: #f7f8f9;
298
+ --seed-color-bg-neutral-solid: #2a3038;
299
+ --seed-color-bg-neutral-solid-pressed: #555d6d;
293
300
  --seed-color-bg-neutral-solid-muted: #555d6d;
294
301
  --seed-color-bg-neutral-solid-muted-pressed: #2a3038;
302
+ --seed-color-bg-neutral-subtle: #fff;
295
303
  --seed-color-bg-neutral-weak: #f3f4f5;
296
304
  --seed-color-bg-neutral-weak-alpha: #0000000c;
297
305
  --seed-color-bg-neutral-weak-alpha-pressed: #00000010;
@@ -474,6 +482,12 @@ text {
474
482
  --seed-color-fg-neutral-inverted: #16171b;
475
483
  --seed-color-fg-neutral-muted: #dcdee3;
476
484
  --seed-color-fg-neutral-subtle: #b0b3ba;
485
+ --seed-color-fg-on-brand-solid: #fff;
486
+ --seed-color-fg-on-critical-solid: #fff;
487
+ --seed-color-fg-on-informative-solid: #fff;
488
+ --seed-color-fg-on-neutral-solid: #16171b;
489
+ --seed-color-fg-on-positive-solid: #fff;
490
+ --seed-color-fg-on-warning-solid: #000000d0;
477
491
  --seed-color-fg-placeholder: #868b94;
478
492
  --seed-color-fg-positive: #22b27f;
479
493
  --seed-color-fg-positive-contrast: #93e5c0;
@@ -495,15 +509,17 @@ text {
495
509
  --seed-color-bg-layer-basement: #000;
496
510
  --seed-color-bg-layer-default: #16171b;
497
511
  --seed-color-bg-layer-default-pressed: #2b2e35;
498
- --seed-color-bg-layer-fill: #1d2025;
499
512
  --seed-color-bg-layer-floating: #1d2025;
500
513
  --seed-color-bg-layer-floating-pressed: #2b2e35;
501
514
  --seed-color-bg-magic-weak: #201f1f;
502
515
  --seed-color-bg-neutral-inverted: #f3f4f5;
503
516
  --seed-color-bg-neutral-inverted-pressed: #dcdee3;
504
- --seed-color-bg-neutral-solid: #2b2e35;
517
+ --seed-color-bg-neutral-muted: #1d2025;
518
+ --seed-color-bg-neutral-solid: #f3f4f5;
519
+ --seed-color-bg-neutral-solid-pressed: #dcdee3;
505
520
  --seed-color-bg-neutral-solid-muted: #393d46;
506
521
  --seed-color-bg-neutral-solid-muted-pressed: #5b606a;
522
+ --seed-color-bg-neutral-subtle: #16171b;
507
523
  --seed-color-bg-neutral-weak: #2b2e35;
508
524
  --seed-color-bg-neutral-weak-alpha: #ffffff20;
509
525
  --seed-color-bg-neutral-weak-alpha-pressed: #ffffff2e;
@@ -849,21 +865,21 @@ text {
849
865
  .seed-action-button__root--variant_brandSolid {
850
866
  background: var(--seed-color-bg-brand-solid);
851
867
  --track-color: var(--seed-color-palette-static-white-alpha-300);
852
- --range-color: var(--seed-color-palette-static-white);
868
+ --range-color: var(--seed-color-fg-on-brand-solid);
853
869
  }
854
870
 
855
871
  .seed-action-button__text--variant_brandSolid, .seed-action-button__prefixIcon--variant_brandSolid, .seed-action-button__suffixIcon--variant_brandSolid, .seed-action-button__icon--variant_brandSolid {
856
- color: var(--seed-color-palette-static-white);
872
+ color: var(--seed-color-fg-on-brand-solid);
857
873
  }
858
874
 
859
875
  .seed-action-button__root--variant_neutralSolid {
860
- background: var(--seed-color-bg-neutral-inverted);
876
+ background: var(--seed-color-bg-neutral-solid);
861
877
  --track-color: var(--seed-color-palette-static-white-alpha-300);
862
- --range-color: var(--seed-color-palette-static-white);
878
+ --range-color: var(--seed-color-fg-on-neutral-solid);
863
879
  }
864
880
 
865
881
  .seed-action-button__text--variant_neutralSolid, .seed-action-button__prefixIcon--variant_neutralSolid, .seed-action-button__suffixIcon--variant_neutralSolid, .seed-action-button__icon--variant_neutralSolid {
866
- color: var(--seed-color-fg-neutral-inverted);
882
+ color: var(--seed-color-fg-on-neutral-solid);
867
883
  }
868
884
 
869
885
  .seed-action-button__root--variant_neutralWeak {
@@ -879,11 +895,11 @@ text {
879
895
  .seed-action-button__root--variant_criticalSolid {
880
896
  background: var(--seed-color-bg-critical-solid);
881
897
  --track-color: var(--seed-color-palette-static-white-alpha-300);
882
- --range-color: var(--seed-color-palette-static-white);
898
+ --range-color: var(--seed-color-fg-on-critical-solid);
883
899
  }
884
900
 
885
901
  .seed-action-button__text--variant_criticalSolid, .seed-action-button__prefixIcon--variant_criticalSolid, .seed-action-button__suffixIcon--variant_criticalSolid, .seed-action-button__icon--variant_criticalSolid {
886
- color: var(--seed-color-palette-static-white);
902
+ color: var(--seed-color-fg-on-critical-solid);
887
903
  }
888
904
 
889
905
  .seed-action-button__root--variant_brandOutline {
@@ -1095,7 +1111,7 @@ text {
1095
1111
  }
1096
1112
 
1097
1113
  .seed-action-button__root--variant_neutralSolid-pressed_true, .seed-action-button__root--variant_neutralSolid-disabled_false-loading_false:active {
1098
- background: var(--seed-color-bg-neutral-inverted-pressed);
1114
+ background: var(--seed-color-bg-neutral-solid-pressed);
1099
1115
  }
1100
1116
 
1101
1117
  .seed-action-button__root--variant_neutralWeak-pressed_true, .seed-action-button__root--variant_neutralWeak-disabled_false-loading_false:active {
@@ -1173,7 +1189,7 @@ text {
1173
1189
  }
1174
1190
 
1175
1191
  .seed-action-button__root--variant_neutralSolid-loading_true {
1176
- background: var(--seed-color-bg-neutral-inverted-pressed);
1192
+ background: var(--seed-color-bg-neutral-solid-pressed);
1177
1193
  }
1178
1194
 
1179
1195
  .seed-action-button__root--variant_neutralWeak-loading_true {
@@ -1379,14 +1395,14 @@ text {
1379
1395
  }
1380
1396
 
1381
1397
  .seed-app-bar__root--theme_cupertino {
1382
- height: calc(44px + var(--seed-safe-area-top));
1398
+ height: calc(56px + var(--seed-safe-area-top));
1383
1399
  padding-left: var(--seed-dimension-x4);
1384
1400
  padding-right: var(--seed-dimension-x4);
1385
1401
  padding-top: var(--seed-safe-area-top);
1386
1402
  }
1387
1403
 
1388
1404
  .seed-app-bar__left--theme_cupertino, .seed-app-bar__right--theme_cupertino {
1389
- height: 44px;
1405
+ height: 56px;
1390
1406
  }
1391
1407
 
1392
1408
  .seed-app-bar__iconButton--theme_cupertino {
@@ -1506,9 +1522,11 @@ text {
1506
1522
 
1507
1523
  .seed-badge__root {
1508
1524
  flex-direction: row;
1509
- flex-shrink: 0;
1525
+ flex-shrink: 1;
1510
1526
  align-items: center;
1527
+ min-width: 0;
1511
1528
  display: flex;
1529
+ overflow: hidden;
1512
1530
  }
1513
1531
 
1514
1532
  .seed-badge__root:dir(ltr) {
@@ -1519,22 +1537,46 @@ text {
1519
1537
  text-align: right;
1520
1538
  }
1521
1539
 
1540
+ .seed-badge__prefix {
1541
+ color: inherit;
1542
+ --seed-icon-size: 100%;
1543
+ --seed-icon-color: currentColor;
1544
+ flex-direction: row;
1545
+ flex-shrink: 0;
1546
+ justify-content: center;
1547
+ align-items: center;
1548
+ display: flex;
1549
+ }
1550
+
1522
1551
  .seed-badge__label {
1523
1552
  text-overflow: ellipsis;
1524
1553
  white-space: nowrap;
1525
1554
  flex-shrink: 1;
1526
- max-width: 100%;
1555
+ min-width: 0;
1527
1556
  overflow: hidden;
1528
1557
  }
1529
1558
 
1559
+ .seed-badge__action {
1560
+ color: inherit;
1561
+ --seed-icon-size: 100%;
1562
+ --seed-icon-color: currentColor;
1563
+ transition: transform var(--seed-duration-pressed-scale) var(--seed-timing-function-pressed-scale);
1564
+ flex-direction: row;
1565
+ flex-shrink: 0;
1566
+ justify-content: center;
1567
+ align-items: center;
1568
+ display: flex;
1569
+ transform: scale(1);
1570
+ }
1571
+
1530
1572
  .seed-badge__root--size_medium {
1531
- max-width: 7.5rem;
1532
1573
  min-height: var(--seed-dimension-x5);
1533
1574
  padding-left: var(--seed-dimension-x1_5);
1534
1575
  padding-right: var(--seed-dimension-x1_5);
1535
1576
  padding-top: var(--seed-dimension-x0_5);
1536
1577
  padding-bottom: var(--seed-dimension-x0_5);
1537
1578
  border-radius: var(--seed-radius-r1);
1579
+ gap: var(--seed-dimension-x0_5);
1538
1580
  }
1539
1581
 
1540
1582
  .seed-badge__label--size_medium {
@@ -1542,14 +1584,19 @@ text {
1542
1584
  line-height: var(--seed-line-height-t1);
1543
1585
  }
1544
1586
 
1587
+ .seed-badge__prefix--size_medium, .seed-badge__action--size_medium {
1588
+ width: var(--seed-dimension-x3);
1589
+ height: var(--seed-dimension-x3);
1590
+ }
1591
+
1545
1592
  .seed-badge__root--size_large {
1546
- max-width: 6.75rem;
1547
1593
  min-height: var(--seed-dimension-x6);
1548
1594
  padding-left: var(--seed-dimension-x2);
1549
1595
  padding-right: var(--seed-dimension-x2);
1550
1596
  padding-top: var(--seed-dimension-x1);
1551
1597
  padding-bottom: var(--seed-dimension-x1);
1552
1598
  border-radius: var(--seed-radius-r1_5);
1599
+ gap: var(--seed-dimension-x0_5);
1553
1600
  }
1554
1601
 
1555
1602
  .seed-badge__label--size_large {
@@ -1557,6 +1604,11 @@ text {
1557
1604
  line-height: var(--seed-line-height-t2);
1558
1605
  }
1559
1606
 
1607
+ .seed-badge__prefix--size_large, .seed-badge__action--size_large {
1608
+ width: var(--seed-dimension-x3_5);
1609
+ height: var(--seed-dimension-x3_5);
1610
+ }
1611
+
1560
1612
  .seed-badge__label--variant_weak {
1561
1613
  font-weight: var(--seed-font-weight-medium);
1562
1614
  }
@@ -1567,6 +1619,7 @@ text {
1567
1619
 
1568
1620
  .seed-badge__root--tone_neutral-variant_weak {
1569
1621
  background-color: var(--seed-color-bg-neutral-weak);
1622
+ color: var(--seed-color-fg-neutral-muted);
1570
1623
  }
1571
1624
 
1572
1625
  .seed-badge__label--tone_neutral-variant_weak {
@@ -1575,14 +1628,16 @@ text {
1575
1628
 
1576
1629
  .seed-badge__root--tone_neutral-variant_solid {
1577
1630
  background-color: var(--seed-color-palette-gray-800);
1631
+ color: var(--seed-color-fg-on-neutral-solid);
1578
1632
  }
1579
1633
 
1580
1634
  .seed-badge__label--tone_neutral-variant_solid {
1581
- color: var(--seed-color-fg-neutral-inverted);
1635
+ color: var(--seed-color-fg-on-neutral-solid);
1582
1636
  }
1583
1637
 
1584
1638
  .seed-badge__root--tone_neutral-variant_outline {
1585
1639
  box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-muted);
1640
+ color: var(--seed-color-fg-neutral-muted);
1586
1641
  }
1587
1642
 
1588
1643
  .seed-badge__label--tone_neutral-variant_outline {
@@ -1591,6 +1646,7 @@ text {
1591
1646
 
1592
1647
  .seed-badge__root--tone_brand-variant_weak {
1593
1648
  background-color: var(--seed-color-bg-brand-weak);
1649
+ color: var(--seed-color-fg-brand-contrast);
1594
1650
  }
1595
1651
 
1596
1652
  .seed-badge__label--tone_brand-variant_weak {
@@ -1599,14 +1655,16 @@ text {
1599
1655
 
1600
1656
  .seed-badge__root--tone_brand-variant_solid {
1601
1657
  background-color: var(--seed-color-bg-brand-solid);
1658
+ color: var(--seed-color-fg-on-brand-solid);
1602
1659
  }
1603
1660
 
1604
1661
  .seed-badge__label--tone_brand-variant_solid {
1605
- color: var(--seed-color-palette-static-white);
1662
+ color: var(--seed-color-fg-on-brand-solid);
1606
1663
  }
1607
1664
 
1608
1665
  .seed-badge__root--tone_brand-variant_outline {
1609
1666
  box-shadow: inset 0 0 0 1px var(--seed-color-stroke-brand-weak);
1667
+ color: var(--seed-color-fg-brand);
1610
1668
  }
1611
1669
 
1612
1670
  .seed-badge__label--tone_brand-variant_outline {
@@ -1615,6 +1673,7 @@ text {
1615
1673
 
1616
1674
  .seed-badge__root--tone_informative-variant_weak {
1617
1675
  background-color: var(--seed-color-bg-informative-weak);
1676
+ color: var(--seed-color-fg-informative-contrast);
1618
1677
  }
1619
1678
 
1620
1679
  .seed-badge__label--tone_informative-variant_weak {
@@ -1623,14 +1682,16 @@ text {
1623
1682
 
1624
1683
  .seed-badge__root--tone_informative-variant_solid {
1625
1684
  background-color: var(--seed-color-bg-informative-solid);
1685
+ color: var(--seed-color-fg-on-informative-solid);
1626
1686
  }
1627
1687
 
1628
1688
  .seed-badge__label--tone_informative-variant_solid {
1629
- color: var(--seed-color-palette-static-white);
1689
+ color: var(--seed-color-fg-on-informative-solid);
1630
1690
  }
1631
1691
 
1632
1692
  .seed-badge__root--tone_informative-variant_outline {
1633
1693
  box-shadow: inset 0 0 0 1px var(--seed-color-stroke-informative-weak);
1694
+ color: var(--seed-color-fg-informative);
1634
1695
  }
1635
1696
 
1636
1697
  .seed-badge__label--tone_informative-variant_outline {
@@ -1639,6 +1700,7 @@ text {
1639
1700
 
1640
1701
  .seed-badge__root--tone_positive-variant_weak {
1641
1702
  background-color: var(--seed-color-bg-positive-weak);
1703
+ color: var(--seed-color-fg-positive-contrast);
1642
1704
  }
1643
1705
 
1644
1706
  .seed-badge__label--tone_positive-variant_weak {
@@ -1647,14 +1709,16 @@ text {
1647
1709
 
1648
1710
  .seed-badge__root--tone_positive-variant_solid {
1649
1711
  background-color: var(--seed-color-bg-positive-solid);
1712
+ color: var(--seed-color-fg-on-positive-solid);
1650
1713
  }
1651
1714
 
1652
1715
  .seed-badge__label--tone_positive-variant_solid {
1653
- color: var(--seed-color-palette-static-white);
1716
+ color: var(--seed-color-fg-on-positive-solid);
1654
1717
  }
1655
1718
 
1656
1719
  .seed-badge__root--tone_positive-variant_outline {
1657
1720
  box-shadow: inset 0 0 0 1px var(--seed-color-stroke-positive-weak);
1721
+ color: var(--seed-color-fg-positive);
1658
1722
  }
1659
1723
 
1660
1724
  .seed-badge__label--tone_positive-variant_outline {
@@ -1663,6 +1727,7 @@ text {
1663
1727
 
1664
1728
  .seed-badge__root--tone_warning-variant_weak {
1665
1729
  background-color: var(--seed-color-bg-warning-weak);
1730
+ color: var(--seed-color-fg-warning-contrast);
1666
1731
  }
1667
1732
 
1668
1733
  .seed-badge__label--tone_warning-variant_weak {
@@ -1671,14 +1736,16 @@ text {
1671
1736
 
1672
1737
  .seed-badge__root--tone_warning-variant_solid {
1673
1738
  background-color: var(--seed-color-bg-warning-solid);
1739
+ color: var(--seed-color-fg-on-warning-solid);
1674
1740
  }
1675
1741
 
1676
1742
  .seed-badge__label--tone_warning-variant_solid {
1677
- color: var(--seed-color-palette-static-black-alpha-900);
1743
+ color: var(--seed-color-fg-on-warning-solid);
1678
1744
  }
1679
1745
 
1680
1746
  .seed-badge__root--tone_warning-variant_outline {
1681
1747
  box-shadow: inset 0 0 0 1px var(--seed-color-stroke-warning-weak);
1748
+ color: var(--seed-color-fg-warning);
1682
1749
  }
1683
1750
 
1684
1751
  .seed-badge__label--tone_warning-variant_outline {
@@ -1687,6 +1754,7 @@ text {
1687
1754
 
1688
1755
  .seed-badge__root--tone_critical-variant_weak {
1689
1756
  background-color: var(--seed-color-bg-critical-weak);
1757
+ color: var(--seed-color-fg-critical-contrast);
1690
1758
  }
1691
1759
 
1692
1760
  .seed-badge__label--tone_critical-variant_weak {
@@ -1695,20 +1763,26 @@ text {
1695
1763
 
1696
1764
  .seed-badge__root--tone_critical-variant_solid {
1697
1765
  background-color: var(--seed-color-bg-critical-solid);
1766
+ color: var(--seed-color-fg-on-critical-solid);
1698
1767
  }
1699
1768
 
1700
1769
  .seed-badge__label--tone_critical-variant_solid {
1701
- color: var(--seed-color-palette-static-white);
1770
+ color: var(--seed-color-fg-on-critical-solid);
1702
1771
  }
1703
1772
 
1704
1773
  .seed-badge__root--tone_critical-variant_outline {
1705
1774
  box-shadow: inset 0 0 0 1px var(--seed-color-stroke-critical-weak);
1775
+ color: var(--seed-color-fg-critical);
1706
1776
  }
1707
1777
 
1708
1778
  .seed-badge__label--tone_critical-variant_outline {
1709
1779
  color: var(--seed-color-fg-critical);
1710
1780
  }
1711
1781
 
1782
+ .seed-badge__action--size_medium-pressed_true, .seed-badge__action--size_large-pressed_true {
1783
+ transform: scale(var(--seed-scale-s95));
1784
+ }
1785
+
1712
1786
  .seed-bottom-sheet__positioner {
1713
1787
  --sheet-z-index: 20;
1714
1788
  z-index: calc(var(--sheet-z-index) + var(--layer-index, 0));
@@ -2381,7 +2455,7 @@ text {
2381
2455
  }
2382
2456
 
2383
2457
  .seed-help-bubble__content {
2384
- background-color: var(--seed-color-bg-neutral-inverted);
2458
+ background-color: var(--seed-color-bg-neutral-solid);
2385
2459
  padding-top: var(--seed-dimension-x2_5);
2386
2460
  padding-right: var(--seed-dimension-x3);
2387
2461
  padding-bottom: var(--seed-dimension-x2_5);
@@ -2404,7 +2478,7 @@ text {
2404
2478
  }
2405
2479
 
2406
2480
  .seed-help-bubble__arrowTip {
2407
- background-color: var(--seed-color-bg-neutral-inverted);
2481
+ background-color: var(--seed-color-bg-neutral-solid);
2408
2482
  width: 12px;
2409
2483
  height: 9px;
2410
2484
  clip-path: path("M0 0 H12 V1 L8 7 Q6 9 4 7 L0 1 Z");
@@ -2422,14 +2496,14 @@ text {
2422
2496
  }
2423
2497
 
2424
2498
  .seed-help-bubble__title {
2425
- color: var(--seed-color-fg-neutral-inverted);
2499
+ color: var(--seed-color-fg-on-neutral-solid);
2426
2500
  font-size: var(--seed-font-size-t3);
2427
2501
  font-weight: var(--seed-font-weight-bold);
2428
2502
  line-height: var(--seed-line-height-t3);
2429
2503
  }
2430
2504
 
2431
2505
  .seed-help-bubble__description {
2432
- color: var(--seed-color-fg-neutral-inverted);
2506
+ color: var(--seed-color-fg-on-neutral-solid);
2433
2507
  font-size: var(--seed-font-size-t3);
2434
2508
  font-weight: var(--seed-font-weight-regular);
2435
2509
  line-height: var(--seed-line-height-t3);
@@ -2445,7 +2519,7 @@ text {
2445
2519
  margin-top: calc(-1 * ((38px - var(--seed-dimension-x3_5)) / 2) + var(--seed-dimension-x0_5));
2446
2520
  margin-bottom: calc(-1 * ((38px - var(--seed-dimension-x3_5)) / 2) + var(--seed-dimension-x0_5));
2447
2521
  border-radius: var(--seed-radius-r3);
2448
- color: var(--seed-color-fg-neutral-inverted);
2522
+ color: var(--seed-color-fg-on-neutral-solid);
2449
2523
  transition: transform var(--seed-duration-pressed-scale) var(--seed-timing-function-pressed-scale);
2450
2524
  flex-shrink: 0;
2451
2525
  justify-content: center;
@@ -2644,16 +2718,16 @@ text {
2644
2718
  }
2645
2719
 
2646
2720
  .seed-checkmark__icon--variant_square-tone_brand-checked_true-disabled_false {
2647
- color: var(--seed-color-palette-static-white);
2721
+ color: var(--seed-color-fg-on-brand-solid);
2648
2722
  }
2649
2723
 
2650
2724
  .seed-checkmark__root--variant_square-tone_neutral-checked_true-disabled_false {
2651
- background-color: var(--seed-color-bg-neutral-inverted);
2652
- --seed-checkmark-pressed-color: var(--seed-color-bg-neutral-inverted-pressed);
2725
+ background-color: var(--seed-color-bg-neutral-solid);
2726
+ --seed-checkmark-pressed-color: var(--seed-color-bg-neutral-solid-pressed);
2653
2727
  }
2654
2728
 
2655
2729
  .seed-checkmark__icon--variant_square-tone_neutral-checked_true-disabled_false {
2656
- color: var(--seed-color-fg-neutral-inverted);
2730
+ color: var(--seed-color-fg-on-neutral-solid);
2657
2731
  }
2658
2732
 
2659
2733
  .seed-checkmark__root--variant_square-tone_brand-indeterminate_true-disabled_false {
@@ -2662,16 +2736,16 @@ text {
2662
2736
  }
2663
2737
 
2664
2738
  .seed-checkmark__icon--variant_square-tone_brand-indeterminate_true-disabled_false {
2665
- color: var(--seed-color-palette-static-white);
2739
+ color: var(--seed-color-fg-on-brand-solid);
2666
2740
  }
2667
2741
 
2668
2742
  .seed-checkmark__root--variant_square-tone_neutral-indeterminate_true-disabled_false {
2669
- background-color: var(--seed-color-bg-neutral-inverted);
2670
- --seed-checkmark-pressed-color: var(--seed-color-bg-neutral-inverted-pressed);
2743
+ background-color: var(--seed-color-bg-neutral-solid);
2744
+ --seed-checkmark-pressed-color: var(--seed-color-bg-neutral-solid-pressed);
2671
2745
  }
2672
2746
 
2673
2747
  .seed-checkmark__icon--variant_square-tone_neutral-indeterminate_true-disabled_false {
2674
- color: var(--seed-color-fg-neutral-inverted);
2748
+ color: var(--seed-color-fg-on-neutral-solid);
2675
2749
  }
2676
2750
 
2677
2751
  .seed-checkmark__root--variant_square-disabled_true {
@@ -2732,7 +2806,7 @@ text {
2732
2806
  }
2733
2807
 
2734
2808
  .seed-checkmark__root--variant_square-tone_neutral-pressed_true-checked_true-disabled_false {
2735
- background-color: var(--seed-color-bg-neutral-inverted-pressed);
2809
+ background-color: var(--seed-color-bg-neutral-solid-pressed);
2736
2810
  }
2737
2811
 
2738
2812
  .seed-checkmark__root--variant_square-tone_brand-pressed_true-indeterminate_true-disabled_false {
@@ -2740,7 +2814,7 @@ text {
2740
2814
  }
2741
2815
 
2742
2816
  .seed-checkmark__root--variant_square-tone_neutral-pressed_true-indeterminate_true-disabled_false {
2743
- background-color: var(--seed-color-bg-neutral-inverted-pressed);
2817
+ background-color: var(--seed-color-bg-neutral-solid-pressed);
2744
2818
  }
2745
2819
 
2746
2820
  .seed-chip__root {
@@ -2930,19 +3004,19 @@ text {
2930
3004
  }
2931
3005
 
2932
3006
  .seed-chip__root--variant_solid-selected_true {
2933
- background: var(--seed-color-bg-neutral-inverted);
3007
+ background: var(--seed-color-bg-neutral-solid);
2934
3008
  }
2935
3009
 
2936
3010
  .seed-chip__label--variant_solid-selected_true, .seed-chip__prefixIcon--variant_solid-selected_true, .seed-chip__suffixIcon--variant_solid-selected_true, .seed-chip__icon--variant_solid-selected_true {
2937
- color: var(--seed-color-fg-neutral-inverted);
3011
+ color: var(--seed-color-fg-on-neutral-solid);
2938
3012
  }
2939
3013
 
2940
3014
  .seed-chip__root--variant_outlineStrong-selected_true {
2941
- background: var(--seed-color-bg-neutral-inverted);
3015
+ background: var(--seed-color-bg-neutral-solid);
2942
3016
  }
2943
3017
 
2944
3018
  .seed-chip__label--variant_outlineStrong-selected_true, .seed-chip__prefixIcon--variant_outlineStrong-selected_true, .seed-chip__suffixIcon--variant_outlineStrong-selected_true, .seed-chip__icon--variant_outlineStrong-selected_true {
2945
- color: var(--seed-color-fg-neutral-inverted);
3019
+ color: var(--seed-color-fg-on-neutral-solid);
2946
3020
  }
2947
3021
 
2948
3022
  .seed-chip__root--variant_outlineWeak-selected_true {
@@ -2959,7 +3033,7 @@ text {
2959
3033
  }
2960
3034
 
2961
3035
  .seed-chip__root--variant_solid-selected_true-pressed_true, .seed-chip__root--variant_solid-selected_true-disabled_false:active, .seed-chip__root--variant_outlineStrong-selected_true-pressed_true, .seed-chip__root--variant_outlineStrong-selected_true-disabled_false:active {
2962
- background: var(--seed-color-bg-neutral-inverted-pressed);
3036
+ background: var(--seed-color-bg-neutral-solid-pressed);
2963
3037
  }
2964
3038
 
2965
3039
  .seed-chip__root--variant_outlineWeak-selected_true-pressed_true, .seed-chip__root--variant_outlineWeak-selected_true-disabled_false:active {
@@ -3086,20 +3160,20 @@ text {
3086
3160
  }
3087
3161
 
3088
3162
  .seed-chip-tabs__trigger--variant_neutralSolid-selected_true {
3089
- background-color: var(--seed-color-bg-neutral-inverted);
3163
+ background-color: var(--seed-color-bg-neutral-solid);
3090
3164
  }
3091
3165
 
3092
3166
  .seed-chip-tabs__triggerLabel--variant_neutralSolid-selected_true {
3093
- color: var(--seed-color-fg-neutral-inverted);
3167
+ color: var(--seed-color-fg-on-neutral-solid);
3094
3168
  }
3095
3169
 
3096
3170
  .seed-chip-tabs__trigger--variant_neutralOutline-selected_true {
3097
- background-color: var(--seed-color-bg-neutral-inverted);
3171
+ background-color: var(--seed-color-bg-neutral-solid);
3098
3172
  box-shadow: inset 0 0 0 1px #0000;
3099
3173
  }
3100
3174
 
3101
3175
  .seed-chip-tabs__triggerLabel--variant_neutralOutline-selected_true {
3102
- color: var(--seed-color-fg-neutral-inverted);
3176
+ color: var(--seed-color-fg-on-neutral-solid);
3103
3177
  }
3104
3178
 
3105
3179
  .seed-chip-tabs__trigger--variant_neutralSolid-selected_false-pressed_true-disabled_false {
@@ -3111,7 +3185,7 @@ text {
3111
3185
  }
3112
3186
 
3113
3187
  .seed-chip-tabs__trigger--variant_neutralSolid-selected_true-pressed_true-disabled_false, .seed-chip-tabs__trigger--variant_neutralOutline-selected_true-pressed_true-disabled_false {
3114
- background-color: var(--seed-color-bg-neutral-inverted-pressed);
3188
+ background-color: var(--seed-color-bg-neutral-solid-pressed);
3115
3189
  }
3116
3190
 
3117
3191
  .seed-chip-tabs__trigger--variant_neutralSolid-disabled_true, .seed-chip-tabs__trigger--variant_neutralOutline-disabled_true {
@@ -3161,13 +3235,13 @@ text {
3161
3235
  }
3162
3236
 
3163
3237
  .seed-contextual-floating-button__root--variant_solid {
3164
- background: var(--seed-color-bg-neutral-inverted);
3238
+ background: var(--seed-color-bg-neutral-solid);
3165
3239
  --track-color: var(--seed-color-palette-gray-700);
3166
- --range-color: var(--seed-color-fg-neutral-inverted);
3240
+ --range-color: var(--seed-color-fg-on-neutral-solid);
3167
3241
  }
3168
3242
 
3169
3243
  .seed-contextual-floating-button__text--variant_solid, .seed-contextual-floating-button__prefixIcon--variant_solid, .seed-contextual-floating-button__icon--variant_solid {
3170
- color: var(--seed-color-fg-neutral-inverted);
3244
+ color: var(--seed-color-fg-on-neutral-solid);
3171
3245
  }
3172
3246
 
3173
3247
  .seed-contextual-floating-button__root--variant_layer {
@@ -3218,7 +3292,7 @@ text {
3218
3292
  }
3219
3293
 
3220
3294
  .seed-contextual-floating-button__root--variant_solid-pressed_true {
3221
- background: var(--seed-color-bg-neutral-inverted-pressed);
3295
+ background: var(--seed-color-bg-neutral-solid-pressed);
3222
3296
  }
3223
3297
 
3224
3298
  .seed-contextual-floating-button__root--variant_layer-pressed_true {
@@ -3242,7 +3316,7 @@ text {
3242
3316
  }
3243
3317
 
3244
3318
  .seed-contextual-floating-button__root--variant_solid-loading_true {
3245
- background: var(--seed-color-bg-neutral-inverted-pressed);
3319
+ background: var(--seed-color-bg-neutral-solid-pressed);
3246
3320
  }
3247
3321
 
3248
3322
  .seed-contextual-floating-button__root--variant_layer-loading_true {
@@ -3501,14 +3575,14 @@ text {
3501
3575
  }
3502
3576
 
3503
3577
  .seed-floating-action-button__icon {
3504
- color: var(--seed-color-palette-static-white);
3578
+ color: var(--seed-color-fg-on-brand-solid);
3505
3579
  transition: width var(--seed-duration-d4) var(--seed-timing-function-easing), height var(--seed-duration-d4) var(--seed-timing-function-easing);
3506
3580
  flex-shrink: 0;
3507
3581
  }
3508
3582
 
3509
3583
  .seed-floating-action-button__label {
3510
3584
  width: max-content;
3511
- color: var(--seed-color-palette-static-white);
3585
+ color: var(--seed-color-fg-on-brand-solid);
3512
3586
  font-size: var(--seed-font-size-t5);
3513
3587
  line-height: var(--seed-line-height-t5);
3514
3588
  font-weight: var(--seed-font-weight-bold);
@@ -4542,7 +4616,7 @@ text {
4542
4616
  }
4543
4617
 
4544
4618
  .seed-page-banner__root--tone_neutral-variant_solid-interactive_true:active {
4545
- background-color: var(--seed-color-bg-neutral-inverted-pressed);
4619
+ background-color: var(--seed-color-bg-neutral-solid-pressed);
4546
4620
  }
4547
4621
 
4548
4622
  .seed-page-banner__root--tone_informative-variant_weak-interactive_true:active {
@@ -4590,11 +4664,11 @@ text {
4590
4664
  }
4591
4665
 
4592
4666
  .seed-page-banner__root--tone_neutral-variant_solid {
4593
- background-color: var(--seed-color-bg-neutral-inverted);
4667
+ background-color: var(--seed-color-bg-neutral-solid);
4594
4668
  }
4595
4669
 
4596
4670
  .seed-page-banner__title--tone_neutral-variant_solid, .seed-page-banner__description--tone_neutral-variant_solid, .seed-page-banner__button--tone_neutral-variant_solid, .seed-page-banner__prefixIcon--tone_neutral-variant_solid, .seed-page-banner__suffixIcon--tone_neutral-variant_solid, .seed-page-banner__closeButtonIcon--tone_neutral-variant_solid {
4597
- color: var(--seed-color-fg-neutral-inverted);
4671
+ color: var(--seed-color-fg-on-neutral-solid);
4598
4672
  }
4599
4673
 
4600
4674
  .seed-page-banner__root--tone_informative-variant_weak {
@@ -4609,7 +4683,11 @@ text {
4609
4683
  background-color: var(--seed-color-bg-informative-solid);
4610
4684
  }
4611
4685
 
4612
- .seed-page-banner__title--tone_informative-variant_solid, .seed-page-banner__description--tone_informative-variant_solid, .seed-page-banner__button--tone_informative-variant_solid, .seed-page-banner__prefixIcon--tone_informative-variant_solid, .seed-page-banner__suffixIcon--tone_informative-variant_solid, .seed-page-banner__closeButtonIcon--tone_informative-variant_solid {
4686
+ .seed-page-banner__title--tone_informative-variant_solid, .seed-page-banner__description--tone_informative-variant_solid, .seed-page-banner__button--tone_informative-variant_solid, .seed-page-banner__prefixIcon--tone_informative-variant_solid, .seed-page-banner__suffixIcon--tone_informative-variant_solid {
4687
+ color: var(--seed-color-fg-on-informative-solid);
4688
+ }
4689
+
4690
+ .seed-page-banner__closeButtonIcon--tone_informative-variant_solid {
4613
4691
  color: var(--seed-color-palette-static-white);
4614
4692
  }
4615
4693
 
@@ -4625,7 +4703,11 @@ text {
4625
4703
  background-color: var(--seed-color-bg-positive-solid);
4626
4704
  }
4627
4705
 
4628
- .seed-page-banner__title--tone_positive-variant_solid, .seed-page-banner__description--tone_positive-variant_solid, .seed-page-banner__button--tone_positive-variant_solid, .seed-page-banner__prefixIcon--tone_positive-variant_solid, .seed-page-banner__suffixIcon--tone_positive-variant_solid, .seed-page-banner__closeButtonIcon--tone_positive-variant_solid {
4706
+ .seed-page-banner__title--tone_positive-variant_solid, .seed-page-banner__description--tone_positive-variant_solid, .seed-page-banner__button--tone_positive-variant_solid, .seed-page-banner__prefixIcon--tone_positive-variant_solid, .seed-page-banner__suffixIcon--tone_positive-variant_solid {
4707
+ color: var(--seed-color-fg-on-positive-solid);
4708
+ }
4709
+
4710
+ .seed-page-banner__closeButtonIcon--tone_positive-variant_solid {
4629
4711
  color: var(--seed-color-palette-static-white);
4630
4712
  }
4631
4713
 
@@ -4641,7 +4723,11 @@ text {
4641
4723
  background-color: var(--seed-color-bg-warning-solid);
4642
4724
  }
4643
4725
 
4644
- .seed-page-banner__title--tone_warning-variant_solid, .seed-page-banner__description--tone_warning-variant_solid, .seed-page-banner__button--tone_warning-variant_solid, .seed-page-banner__prefixIcon--tone_warning-variant_solid, .seed-page-banner__suffixIcon--tone_warning-variant_solid, .seed-page-banner__closeButtonIcon--tone_warning-variant_solid {
4726
+ .seed-page-banner__title--tone_warning-variant_solid, .seed-page-banner__description--tone_warning-variant_solid, .seed-page-banner__button--tone_warning-variant_solid, .seed-page-banner__prefixIcon--tone_warning-variant_solid, .seed-page-banner__suffixIcon--tone_warning-variant_solid {
4727
+ color: var(--seed-color-fg-on-warning-solid);
4728
+ }
4729
+
4730
+ .seed-page-banner__closeButtonIcon--tone_warning-variant_solid {
4645
4731
  color: var(--seed-color-palette-static-black-alpha-900);
4646
4732
  }
4647
4733
 
@@ -4657,7 +4743,11 @@ text {
4657
4743
  background-color: var(--seed-color-bg-critical-solid);
4658
4744
  }
4659
4745
 
4660
- .seed-page-banner__title--tone_critical-variant_solid, .seed-page-banner__description--tone_critical-variant_solid, .seed-page-banner__button--tone_critical-variant_solid, .seed-page-banner__prefixIcon--tone_critical-variant_solid, .seed-page-banner__suffixIcon--tone_critical-variant_solid, .seed-page-banner__closeButtonIcon--tone_critical-variant_solid {
4746
+ .seed-page-banner__title--tone_critical-variant_solid, .seed-page-banner__description--tone_critical-variant_solid, .seed-page-banner__button--tone_critical-variant_solid, .seed-page-banner__prefixIcon--tone_critical-variant_solid, .seed-page-banner__suffixIcon--tone_critical-variant_solid {
4747
+ color: var(--seed-color-fg-on-critical-solid);
4748
+ }
4749
+
4750
+ .seed-page-banner__closeButtonIcon--tone_critical-variant_solid {
4661
4751
  color: var(--seed-color-palette-static-white);
4662
4752
  }
4663
4753
 
@@ -4674,7 +4764,7 @@ text {
4674
4764
  }
4675
4765
 
4676
4766
  .seed-page-banner__root--tone_neutral-variant_solid-pressed_true {
4677
- background-color: var(--seed-color-bg-neutral-inverted-pressed);
4767
+ background-color: var(--seed-color-bg-neutral-solid-pressed);
4678
4768
  }
4679
4769
 
4680
4770
  .seed-page-banner__root--tone_informative-variant_weak-pressed_true {
@@ -5201,20 +5291,20 @@ text {
5201
5291
  }
5202
5292
 
5203
5293
  .seed-radiomark__icon--tone_brand-checked_true-disabled_false {
5204
- color: var(--seed-color-palette-static-white);
5205
- background-color: var(--seed-color-palette-static-white);
5294
+ color: var(--seed-color-fg-on-brand-solid);
5295
+ background-color: var(--seed-color-fg-on-brand-solid);
5206
5296
  }
5207
5297
 
5208
5298
  .seed-radiomark__root--tone_neutral-checked_true-disabled_false {
5209
- background-color: var(--seed-color-bg-neutral-inverted);
5210
- --seed-radiomark-pressed-color: var(--seed-color-bg-neutral-inverted-pressed);
5299
+ background-color: var(--seed-color-bg-neutral-solid);
5300
+ --seed-radiomark-pressed-color: var(--seed-color-bg-neutral-solid-pressed);
5211
5301
  border-width: 0;
5212
5302
  border-color: #0000;
5213
5303
  }
5214
5304
 
5215
5305
  .seed-radiomark__icon--tone_neutral-checked_true-disabled_false {
5216
- color: var(--seed-color-fg-neutral-inverted);
5217
- background-color: var(--seed-color-fg-neutral-inverted);
5306
+ color: var(--seed-color-fg-on-neutral-solid);
5307
+ background-color: var(--seed-color-fg-on-neutral-solid);
5218
5308
  }
5219
5309
 
5220
5310
  .seed-radiomark__root--tone_brand-checked_false-disabled_true, .seed-radiomark__root--tone_neutral-checked_false-disabled_true {
@@ -5262,7 +5352,7 @@ text {
5262
5352
  }
5263
5353
 
5264
5354
  .seed-radiomark__root--tone_neutral-pressed_true-checked_true-disabled_false {
5265
- background-color: var(--seed-color-bg-neutral-inverted-pressed);
5355
+ background-color: var(--seed-color-bg-neutral-solid-pressed);
5266
5356
  }
5267
5357
 
5268
5358
  .seed-reaction-button__root {
@@ -5457,7 +5547,7 @@ text {
5457
5547
 
5458
5548
  .seed-notification-badge__label {
5459
5549
  text-align: center;
5460
- color: var(--seed-color-palette-static-white);
5550
+ color: var(--seed-color-fg-on-brand-solid);
5461
5551
  white-space: nowrap;
5462
5552
  flex-shrink: 0;
5463
5553
  }
@@ -6022,7 +6112,7 @@ text {
6022
6112
  left: calc(var(--slider-thumb-left, 0%) + var(--slider-thumb-offset, 0px));
6023
6113
  width: var(--seed-dimension-x5);
6024
6114
  height: var(--seed-dimension-x5);
6025
- background-color: var(--seed-color-bg-neutral-inverted);
6115
+ background-color: var(--seed-color-bg-neutral-solid);
6026
6116
  border-radius: var(--seed-radius-full);
6027
6117
  transition: left var(--seed-duration-d3) var(--seed-timing-function-easing), transform var(--seed-duration-d3) var(--seed-timing-function-easing);
6028
6118
  position: absolute;
@@ -6048,7 +6138,7 @@ text {
6048
6138
  }
6049
6139
 
6050
6140
  .seed-slider__valueIndicatorRoot {
6051
- background: var(--seed-color-bg-neutral-inverted);
6141
+ background: var(--seed-color-bg-neutral-solid);
6052
6142
  padding-top: var(--seed-dimension-x1);
6053
6143
  padding-right: var(--seed-dimension-x2);
6054
6144
  padding-bottom: var(--seed-dimension-x1);
@@ -6079,13 +6169,13 @@ text {
6079
6169
  .seed-slider__valueIndicatorArrowTip {
6080
6170
  width: var(--seed-dimension-x2);
6081
6171
  height: calc(var(--seed-dimension-x1_5) + 1px);
6082
- background-color: var(--seed-color-bg-neutral-inverted);
6172
+ background-color: var(--seed-color-bg-neutral-solid);
6083
6173
  clip-path: path("M0 0 H8 V1 L6 5 Q4 7 2 5 L0 1 Z");
6084
6174
  transform: translateY(-1px);
6085
6175
  }
6086
6176
 
6087
6177
  .seed-slider__valueIndicatorLabel {
6088
- color: var(--seed-color-fg-neutral-inverted);
6178
+ color: var(--seed-color-fg-on-neutral-solid);
6089
6179
  font-size: var(--seed-font-size-t3);
6090
6180
  line-height: var(--seed-line-height-t3);
6091
6181
  font-weight: var(--seed-font-weight-medium);
@@ -6174,7 +6264,7 @@ text {
6174
6264
  height: 100%;
6175
6265
  top: 50%;
6176
6266
  left: calc(var(--slider-tick-left, 0%) + var(--slider-tick-offset, 0px));
6177
- background-color: var(--seed-color-fg-neutral-inverted);
6267
+ background-color: var(--seed-color-fg-on-neutral-solid);
6178
6268
  position: absolute;
6179
6269
  transform: translate(-50%, -50%);
6180
6270
  }
@@ -6526,7 +6616,7 @@ text {
6526
6616
  }
6527
6617
 
6528
6618
  .seed-switchmark__thumb--tone_neutral {
6529
- background-color: var(--seed-color-fg-neutral-inverted);
6619
+ background-color: var(--seed-color-fg-on-neutral-solid);
6530
6620
  }
6531
6621
 
6532
6622
  .seed-switchmark__thumb--tone_brand {
@@ -6581,7 +6671,7 @@ text {
6581
6671
  }
6582
6672
 
6583
6673
  .seed-switchmark__root--tone_neutral-checked_true-disabled_false {
6584
- background-color: var(--seed-color-bg-neutral-inverted);
6674
+ background-color: var(--seed-color-bg-neutral-solid);
6585
6675
  }
6586
6676
 
6587
6677
  .seed-switchmark__root--tone_neutral-checked_true-disabled_true {