@seed-design/lynx-css 0.12.1 → 0.14.0

package/recipes/checkmark.css

@@ -78,28 +78,28 @@
     --seed-checkmark-pressed-color: var(--seed-color-bg-brand-solid-pressed)
 }
 .seed-checkmark__icon--variant_square-tone_brand-checked_true-disabled_false {
-    color: var(--seed-color-palette-static-white)
+    color: var(--seed-color-fg-on-brand-solid)
 }
 .seed-checkmark__root--variant_square-tone_neutral-checked_true-disabled_false {
-    background-color: var(--seed-color-bg-neutral-inverted);
-    --seed-checkmark-pressed-color: var(--seed-color-bg-neutral-inverted-pressed)
+    background-color: var(--seed-color-bg-neutral-solid);
+    --seed-checkmark-pressed-color: var(--seed-color-bg-neutral-solid-pressed)
 }
 .seed-checkmark__icon--variant_square-tone_neutral-checked_true-disabled_false {
-    color: var(--seed-color-fg-neutral-inverted)
+    color: var(--seed-color-fg-on-neutral-solid)
 }
 .seed-checkmark__root--variant_square-tone_brand-indeterminate_true-disabled_false {
     background-color: var(--seed-color-bg-brand-solid);
     --seed-checkmark-pressed-color: var(--seed-color-bg-brand-solid-pressed)
 }
 .seed-checkmark__icon--variant_square-tone_brand-indeterminate_true-disabled_false {
-    color: var(--seed-color-palette-static-white)
+    color: var(--seed-color-fg-on-brand-solid)
 }
 .seed-checkmark__root--variant_square-tone_neutral-indeterminate_true-disabled_false {
-    background-color: var(--seed-color-bg-neutral-inverted);
-    --seed-checkmark-pressed-color: var(--seed-color-bg-neutral-inverted-pressed)
+    background-color: var(--seed-color-bg-neutral-solid);
+    --seed-checkmark-pressed-color: var(--seed-color-bg-neutral-solid-pressed)
 }
 .seed-checkmark__icon--variant_square-tone_neutral-indeterminate_true-disabled_false {
-    color: var(--seed-color-fg-neutral-inverted)
+    color: var(--seed-color-fg-on-neutral-solid)
 }
 .seed-checkmark__root--variant_square-disabled_true {
     background-color: var(--seed-color-bg-disabled);
@@ -157,11 +157,11 @@
     background-color: var(--seed-color-bg-brand-solid-pressed)
 }
 .seed-checkmark__root--variant_square-tone_neutral-pressed_true-checked_true-disabled_false {
-    background-color: var(--seed-color-bg-neutral-inverted-pressed)
+    background-color: var(--seed-color-bg-neutral-solid-pressed)
 }
 .seed-checkmark__root--variant_square-tone_brand-pressed_true-indeterminate_true-disabled_false {
     background-color: var(--seed-color-bg-brand-solid-pressed)
 }
 .seed-checkmark__root--variant_square-tone_neutral-pressed_true-indeterminate_true-disabled_false {
-    background-color: var(--seed-color-bg-neutral-inverted-pressed)
+    background-color: var(--seed-color-bg-neutral-solid-pressed)
 }

package/recipes/chip-tabs.css

@@ -101,17 +101,17 @@
     display: none
 }
 .seed-chip-tabs__trigger--variant_neutralSolid-selected_true {
-    background-color: var(--seed-color-bg-neutral-inverted)
+    background-color: var(--seed-color-bg-neutral-solid)
 }
 .seed-chip-tabs__triggerLabel--variant_neutralSolid-selected_true {
-    color: var(--seed-color-fg-neutral-inverted)
+    color: var(--seed-color-fg-on-neutral-solid)
 }
 .seed-chip-tabs__trigger--variant_neutralOutline-selected_true {
-    background-color: var(--seed-color-bg-neutral-inverted);
+    background-color: var(--seed-color-bg-neutral-solid);
     box-shadow: inset 0 0 0 1px transparent
 }
 .seed-chip-tabs__triggerLabel--variant_neutralOutline-selected_true {
-    color: var(--seed-color-fg-neutral-inverted)
+    color: var(--seed-color-fg-on-neutral-solid)
 }
 .seed-chip-tabs__trigger--variant_neutralSolid-selected_false-pressed_true-disabled_false {
     background-color: var(--seed-color-bg-neutral-weak-alpha-pressed)
@@ -120,10 +120,10 @@
     background-color: var(--seed-color-bg-transparent-pressed)
 }
 .seed-chip-tabs__trigger--variant_neutralSolid-selected_true-pressed_true-disabled_false {
-    background-color: var(--seed-color-bg-neutral-inverted-pressed)
+    background-color: var(--seed-color-bg-neutral-solid-pressed)
 }
 .seed-chip-tabs__trigger--variant_neutralOutline-selected_true-pressed_true-disabled_false {
-    background-color: var(--seed-color-bg-neutral-inverted-pressed)
+    background-color: var(--seed-color-bg-neutral-solid-pressed)
 }
 .seed-chip-tabs__trigger--variant_neutralSolid-disabled_true {
     opacity: 0.5

package/recipes/chip.css

@@ -185,34 +185,34 @@
     min-width: var(--seed-dimension-x10)
 }
 .seed-chip__root--variant_solid-selected_true {
-    background: var(--seed-color-bg-neutral-inverted)
+    background: var(--seed-color-bg-neutral-solid)
 }
 .seed-chip__label--variant_solid-selected_true {
-    color: var(--seed-color-fg-neutral-inverted)
+    color: var(--seed-color-fg-on-neutral-solid)
 }
 .seed-chip__prefixIcon--variant_solid-selected_true {
-    color: var(--seed-color-fg-neutral-inverted)
+    color: var(--seed-color-fg-on-neutral-solid)
 }
 .seed-chip__suffixIcon--variant_solid-selected_true {
-    color: var(--seed-color-fg-neutral-inverted)
+    color: var(--seed-color-fg-on-neutral-solid)
 }
 .seed-chip__icon--variant_solid-selected_true {
-    color: var(--seed-color-fg-neutral-inverted)
+    color: var(--seed-color-fg-on-neutral-solid)
 }
 .seed-chip__root--variant_outlineStrong-selected_true {
-    background: var(--seed-color-bg-neutral-inverted)
+    background: var(--seed-color-bg-neutral-solid)
 }
 .seed-chip__label--variant_outlineStrong-selected_true {
-    color: var(--seed-color-fg-neutral-inverted)
+    color: var(--seed-color-fg-on-neutral-solid)
 }
 .seed-chip__prefixIcon--variant_outlineStrong-selected_true {
-    color: var(--seed-color-fg-neutral-inverted)
+    color: var(--seed-color-fg-on-neutral-solid)
 }
 .seed-chip__suffixIcon--variant_outlineStrong-selected_true {
-    color: var(--seed-color-fg-neutral-inverted)
+    color: var(--seed-color-fg-on-neutral-solid)
 }
 .seed-chip__icon--variant_outlineStrong-selected_true {
-    color: var(--seed-color-fg-neutral-inverted)
+    color: var(--seed-color-fg-on-neutral-solid)
 }
 .seed-chip__root--variant_outlineWeak-selected_true {
     background: var(--seed-color-bg-neutral-weak);
@@ -237,16 +237,16 @@
     background: var(--seed-color-bg-transparent-pressed)
 }
 .seed-chip__root--variant_solid-selected_true-pressed_true {
-    background: var(--seed-color-bg-neutral-inverted-pressed)
+    background: var(--seed-color-bg-neutral-solid-pressed)
 }
 .seed-chip__root--variant_solid-selected_true-disabled_false:active {
-    background: var(--seed-color-bg-neutral-inverted-pressed)
+    background: var(--seed-color-bg-neutral-solid-pressed)
 }
 .seed-chip__root--variant_outlineStrong-selected_true-pressed_true {
-    background: var(--seed-color-bg-neutral-inverted-pressed)
+    background: var(--seed-color-bg-neutral-solid-pressed)
 }
 .seed-chip__root--variant_outlineStrong-selected_true-disabled_false:active {
-    background: var(--seed-color-bg-neutral-inverted-pressed)
+    background: var(--seed-color-bg-neutral-solid-pressed)
 }
 .seed-chip__root--variant_outlineWeak-selected_true-pressed_true {
     background: var(--seed-color-bg-neutral-weak-pressed)

package/recipes/contextual-floating-button.css

@@ -36,18 +36,18 @@
     left: 0
 }
 .seed-contextual-floating-button__root--variant_solid {
-    background: var(--seed-color-bg-neutral-inverted);
+    background: var(--seed-color-bg-neutral-solid);
     --track-color: var(--seed-color-palette-gray-700);
-    --range-color: var(--seed-color-fg-neutral-inverted)
+    --range-color: var(--seed-color-fg-on-neutral-solid)
 }
 .seed-contextual-floating-button__text--variant_solid {
-    color: var(--seed-color-fg-neutral-inverted)
+    color: var(--seed-color-fg-on-neutral-solid)
 }
 .seed-contextual-floating-button__prefixIcon--variant_solid {
-    color: var(--seed-color-fg-neutral-inverted)
+    color: var(--seed-color-fg-on-neutral-solid)
 }
 .seed-contextual-floating-button__icon--variant_solid {
-    color: var(--seed-color-fg-neutral-inverted)
+    color: var(--seed-color-fg-on-neutral-solid)
 }
 .seed-contextual-floating-button__root--variant_layer {
     background: var(--seed-color-bg-layer-floating);
@@ -94,7 +94,7 @@
     opacity: 0
 }
 .seed-contextual-floating-button__root--variant_solid-pressed_true {
-    background: var(--seed-color-bg-neutral-inverted-pressed)
+    background: var(--seed-color-bg-neutral-solid-pressed)
 }
 .seed-contextual-floating-button__root--variant_layer-pressed_true {
     background: var(--seed-color-bg-layer-floating-pressed)
@@ -124,7 +124,7 @@
     color: var(--seed-color-fg-disabled)
 }
 .seed-contextual-floating-button__root--variant_solid-loading_true {
-    background: var(--seed-color-bg-neutral-inverted-pressed)
+    background: var(--seed-color-bg-neutral-solid-pressed)
 }
 .seed-contextual-floating-button__root--variant_layer-loading_true {
     background: var(--seed-color-bg-layer-floating-pressed)

package/recipes/floating-action-button.css

@@ -14,13 +14,13 @@
 }
 .seed-floating-action-button__icon {
     flex-shrink: 0;
-    color: var(--seed-color-palette-static-white);
+    color: var(--seed-color-fg-on-brand-solid);
     transition: width var(--seed-duration-d4) var(--seed-timing-function-easing), height var(--seed-duration-d4) var(--seed-timing-function-easing)
 }
 .seed-floating-action-button__label {
     width: max-content;
     flex-shrink: 0;
-    color: var(--seed-color-palette-static-white);
+    color: var(--seed-color-fg-on-brand-solid);
     font-size: var(--seed-font-size-t5);
     line-height: var(--seed-line-height-t5);
     font-weight: var(--seed-font-weight-bold)

package/recipes/help-bubble.css

@@ -20,7 +20,7 @@
     flex-direction: row;
     align-items: flex-start;
     overflow: visible;
-    background-color: var(--seed-color-bg-neutral-inverted);
+    background-color: var(--seed-color-bg-neutral-solid);
     padding-top: var(--seed-dimension-x2_5);
     padding-right: var(--seed-dimension-x3);
     padding-bottom: var(--seed-dimension-x2_5);
@@ -38,7 +38,7 @@
 .seed-help-bubble__arrowTip {
     width: 12px;
     height: calc(8px + 1px);
-    background-color: var(--seed-color-bg-neutral-inverted);
+    background-color: var(--seed-color-bg-neutral-solid);
     clip-path: path("M0 0 H12 V1 L8 7 Q6 9 4 7 L0 1 Z");
     transform: translateY(-1px)
 }
@@ -52,13 +52,13 @@
     gap: var(--seed-dimension-x0_5)
 }
 .seed-help-bubble__title {
-    color: var(--seed-color-fg-neutral-inverted);
+    color: var(--seed-color-fg-on-neutral-solid);
     font-size: var(--seed-font-size-t3);
     font-weight: var(--seed-font-weight-bold);
     line-height: var(--seed-line-height-t3)
 }
 .seed-help-bubble__description {
-    color: var(--seed-color-fg-neutral-inverted);
+    color: var(--seed-color-fg-on-neutral-solid);
     font-size: var(--seed-font-size-t3);
     font-weight: var(--seed-font-weight-regular);
     line-height: var(--seed-line-height-t3)
@@ -77,7 +77,7 @@
     margin-top: calc(-1 * ((38px - var(--seed-dimension-x3_5)) / 2) + var(--seed-dimension-x0_5));
     margin-bottom: calc(-1 * ((38px - var(--seed-dimension-x3_5)) / 2) + var(--seed-dimension-x0_5));
     border-radius: var(--seed-radius-r3);
-    color: var(--seed-color-fg-neutral-inverted);
+    color: var(--seed-color-fg-on-neutral-solid);
     transform: scale(1);
     transition: transform var(--seed-duration-pressed-scale) var(--seed-timing-function-pressed-scale)
 }

package/recipes/notification-badge.css

@@ -7,7 +7,7 @@
 }
 .seed-notification-badge__label {
     text-align: center;
-    color: var(--seed-color-palette-static-white);
+    color: var(--seed-color-fg-on-brand-solid);
     white-space: nowrap;
     flex-shrink: 0
 }

package/recipes/page-banner.css

@@ -107,7 +107,7 @@
     background-color: var(--seed-color-bg-neutral-weak-pressed);
 }
 .seed-page-banner__root--tone_neutral-variant_solid-interactive_true:active {
-    background-color: var(--seed-color-bg-neutral-inverted-pressed);
+    background-color: var(--seed-color-bg-neutral-solid-pressed);
 }
 .seed-page-banner__root--tone_informative-variant_weak-interactive_true:active {
     background-color: var(--seed-color-bg-informative-weak-pressed);
@@ -158,25 +158,25 @@
     color: var(--seed-color-fg-neutral);
 }
 .seed-page-banner__root--tone_neutral-variant_solid {
-    background-color: var(--seed-color-bg-neutral-inverted);
+    background-color: var(--seed-color-bg-neutral-solid);
 }
 .seed-page-banner__title--tone_neutral-variant_solid {
-    color: var(--seed-color-fg-neutral-inverted);
+    color: var(--seed-color-fg-on-neutral-solid);
 }
 .seed-page-banner__description--tone_neutral-variant_solid {
-    color: var(--seed-color-fg-neutral-inverted);
+    color: var(--seed-color-fg-on-neutral-solid);
 }
 .seed-page-banner__button--tone_neutral-variant_solid {
-    color: var(--seed-color-fg-neutral-inverted);
+    color: var(--seed-color-fg-on-neutral-solid);
 }
 .seed-page-banner__prefixIcon--tone_neutral-variant_solid {
-    color: var(--seed-color-fg-neutral-inverted);
+    color: var(--seed-color-fg-on-neutral-solid);
 }
 .seed-page-banner__suffixIcon--tone_neutral-variant_solid {
-    color: var(--seed-color-fg-neutral-inverted);
+    color: var(--seed-color-fg-on-neutral-solid);
 }
 .seed-page-banner__closeButtonIcon--tone_neutral-variant_solid {
-    color: var(--seed-color-fg-neutral-inverted);
+    color: var(--seed-color-fg-on-neutral-solid);
 }
 .seed-page-banner__root--tone_informative-variant_weak {
     background-color: var(--seed-color-bg-informative-weak);
@@ -203,19 +203,19 @@
     background-color: var(--seed-color-bg-informative-solid);
 }
 .seed-page-banner__title--tone_informative-variant_solid {
-    color: var(--seed-color-palette-static-white);
+    color: var(--seed-color-fg-on-informative-solid);
 }
 .seed-page-banner__description--tone_informative-variant_solid {
-    color: var(--seed-color-palette-static-white);
+    color: var(--seed-color-fg-on-informative-solid);
 }
 .seed-page-banner__button--tone_informative-variant_solid {
-    color: var(--seed-color-palette-static-white);
+    color: var(--seed-color-fg-on-informative-solid);
 }
 .seed-page-banner__prefixIcon--tone_informative-variant_solid {
-    color: var(--seed-color-palette-static-white);
+    color: var(--seed-color-fg-on-informative-solid);
 }
 .seed-page-banner__suffixIcon--tone_informative-variant_solid {
-    color: var(--seed-color-palette-static-white);
+    color: var(--seed-color-fg-on-informative-solid);
 }
 .seed-page-banner__closeButtonIcon--tone_informative-variant_solid {
     color: var(--seed-color-palette-static-white);
@@ -245,19 +245,19 @@
     background-color: var(--seed-color-bg-positive-solid);
 }
 .seed-page-banner__title--tone_positive-variant_solid {
-    color: var(--seed-color-palette-static-white);
+    color: var(--seed-color-fg-on-positive-solid);
 }
 .seed-page-banner__description--tone_positive-variant_solid {
-    color: var(--seed-color-palette-static-white);
+    color: var(--seed-color-fg-on-positive-solid);
 }
 .seed-page-banner__button--tone_positive-variant_solid {
-    color: var(--seed-color-palette-static-white);
+    color: var(--seed-color-fg-on-positive-solid);
 }
 .seed-page-banner__prefixIcon--tone_positive-variant_solid {
-    color: var(--seed-color-palette-static-white);
+    color: var(--seed-color-fg-on-positive-solid);
 }
 .seed-page-banner__suffixIcon--tone_positive-variant_solid {
-    color: var(--seed-color-palette-static-white);
+    color: var(--seed-color-fg-on-positive-solid);
 }
 .seed-page-banner__closeButtonIcon--tone_positive-variant_solid {
     color: var(--seed-color-palette-static-white);
@@ -287,19 +287,19 @@
     background-color: var(--seed-color-bg-warning-solid);
 }
 .seed-page-banner__title--tone_warning-variant_solid {
-    color: var(--seed-color-palette-static-black-alpha-900);
+    color: var(--seed-color-fg-on-warning-solid);
 }
 .seed-page-banner__description--tone_warning-variant_solid {
-    color: var(--seed-color-palette-static-black-alpha-900);
+    color: var(--seed-color-fg-on-warning-solid);
 }
 .seed-page-banner__button--tone_warning-variant_solid {
-    color: var(--seed-color-palette-static-black-alpha-900);
+    color: var(--seed-color-fg-on-warning-solid);
 }
 .seed-page-banner__prefixIcon--tone_warning-variant_solid {
-    color: var(--seed-color-palette-static-black-alpha-900);
+    color: var(--seed-color-fg-on-warning-solid);
 }
 .seed-page-banner__suffixIcon--tone_warning-variant_solid {
-    color: var(--seed-color-palette-static-black-alpha-900);
+    color: var(--seed-color-fg-on-warning-solid);
 }
 .seed-page-banner__closeButtonIcon--tone_warning-variant_solid {
     color: var(--seed-color-palette-static-black-alpha-900);
@@ -329,19 +329,19 @@
     background-color: var(--seed-color-bg-critical-solid);
 }
 .seed-page-banner__title--tone_critical-variant_solid {
-    color: var(--seed-color-palette-static-white);
+    color: var(--seed-color-fg-on-critical-solid);
 }
 .seed-page-banner__description--tone_critical-variant_solid {
-    color: var(--seed-color-palette-static-white);
+    color: var(--seed-color-fg-on-critical-solid);
 }
 .seed-page-banner__button--tone_critical-variant_solid {
-    color: var(--seed-color-palette-static-white);
+    color: var(--seed-color-fg-on-critical-solid);
 }
 .seed-page-banner__prefixIcon--tone_critical-variant_solid {
-    color: var(--seed-color-palette-static-white);
+    color: var(--seed-color-fg-on-critical-solid);
 }
 .seed-page-banner__suffixIcon--tone_critical-variant_solid {
-    color: var(--seed-color-palette-static-white);
+    color: var(--seed-color-fg-on-critical-solid);
 }
 .seed-page-banner__closeButtonIcon--tone_critical-variant_solid {
     color: var(--seed-color-palette-static-white);
@@ -371,7 +371,7 @@
     background-color: var(--seed-color-bg-neutral-weak-pressed);
 }
 .seed-page-banner__root--tone_neutral-variant_solid-pressed_true {
-    background-color: var(--seed-color-bg-neutral-inverted-pressed);
+    background-color: var(--seed-color-bg-neutral-solid-pressed);
 }
 .seed-page-banner__root--tone_informative-variant_weak-pressed_true {
     background-color: var(--seed-color-bg-informative-weak-pressed);

package/recipes/radiomark.css

@@ -40,18 +40,18 @@
     border-color: #00000000
 }
 .seed-radiomark__icon--tone_brand-checked_true-disabled_false {
-    color: var(--seed-color-palette-static-white);
-    background-color: var(--seed-color-palette-static-white)
+    color: var(--seed-color-fg-on-brand-solid);
+    background-color: var(--seed-color-fg-on-brand-solid)
 }
 .seed-radiomark__root--tone_neutral-checked_true-disabled_false {
-    background-color: var(--seed-color-bg-neutral-inverted);
-    --seed-radiomark-pressed-color: var(--seed-color-bg-neutral-inverted-pressed);
+    background-color: var(--seed-color-bg-neutral-solid);
+    --seed-radiomark-pressed-color: var(--seed-color-bg-neutral-solid-pressed);
     border-width: 0px;
     border-color: #00000000
 }
 .seed-radiomark__icon--tone_neutral-checked_true-disabled_false {
-    color: var(--seed-color-fg-neutral-inverted);
-    background-color: var(--seed-color-fg-neutral-inverted)
+    color: var(--seed-color-fg-on-neutral-solid);
+    background-color: var(--seed-color-fg-on-neutral-solid)
 }
 .seed-radiomark__root--tone_brand-checked_false-disabled_true {
     background-color: var(--seed-color-palette-gray-300)
@@ -92,5 +92,5 @@
     background-color: var(--seed-color-bg-brand-solid-pressed)
 }
 .seed-radiomark__root--tone_neutral-pressed_true-checked_true-disabled_false {
-    background-color: var(--seed-color-bg-neutral-inverted-pressed)
+    background-color: var(--seed-color-bg-neutral-solid-pressed)
 }

package/recipes/slider-tick.css

@@ -3,7 +3,7 @@
     top: 50%;
     height: 100%;
     left: calc(var(--slider-tick-left, 0%) + var(--slider-tick-offset, 0px));
-    background-color: var(--seed-color-fg-neutral-inverted);
+    background-color: var(--seed-color-fg-on-neutral-solid);
     transform: translate(-50%, -50%)
 }
 .seed-slider-tick--weight_thin {

package/recipes/slider.css

@@ -35,7 +35,7 @@
     left: calc(var(--slider-thumb-left, 0%) + var(--slider-thumb-offset, 0px));
     width: var(--seed-dimension-x5);
     height: var(--seed-dimension-x5);
-    background-color: var(--seed-color-bg-neutral-inverted);
+    background-color: var(--seed-color-bg-neutral-solid);
     border-radius: var(--seed-radius-full);
     transform: translate(-50%, -50%);
     transition: left var(--seed-duration-d3) var(--seed-timing-function-easing), transform var(--seed-duration-d3) var(--seed-timing-function-easing)
@@ -64,7 +64,7 @@
     flex-direction: column;
     align-items: center;
     position: relative;
-    background: var(--seed-color-bg-neutral-inverted);
+    background: var(--seed-color-bg-neutral-solid);
     padding-top: var(--seed-dimension-x1);
     padding-right: var(--seed-dimension-x2);
     padding-bottom: var(--seed-dimension-x1);
@@ -89,12 +89,12 @@
 .seed-slider__valueIndicatorArrowTip {
     width: var(--seed-dimension-x2);
     height: calc(var(--seed-dimension-x1_5) + 1px);
-    background-color: var(--seed-color-bg-neutral-inverted);
+    background-color: var(--seed-color-bg-neutral-solid);
     clip-path: path("M0 0 H8 V1 L6 5 Q4 7 2 5 L0 1 Z");
     transform: translateY(-1px)
 }
 .seed-slider__valueIndicatorLabel {
-    color: var(--seed-color-fg-neutral-inverted);
+    color: var(--seed-color-fg-on-neutral-solid);
     font-size: var(--seed-font-size-t3);
     line-height: var(--seed-line-height-t3);
     font-weight: var(--seed-font-weight-medium);

package/recipes/switchmark.css

@@ -11,7 +11,7 @@
     transform: scale(0.8)
 }
 .seed-switchmark__thumb--tone_neutral {
-    background-color: var(--seed-color-fg-neutral-inverted)
+    background-color: var(--seed-color-fg-on-neutral-solid)
 }
 .seed-switchmark__thumb--tone_brand {
     background-color: var(--seed-color-palette-static-white)
@@ -56,7 +56,7 @@
     background-color: var(--seed-color-bg-brand-solid)
 }
 .seed-switchmark__root--tone_neutral-checked_true-disabled_false {
-    background-color: var(--seed-color-bg-neutral-inverted)
+    background-color: var(--seed-color-bg-neutral-solid)
 }
 .seed-switchmark__root--tone_neutral-checked_true-disabled_true {
     background-color: var(--seed-color-palette-gray-600)

package/vars/color/bg.d.ts

@@ -29,23 +29,27 @@ export declare const layerBasement = "var(--seed-color-bg-layer-basement)";
 export declare const layerDefault = "var(--seed-color-bg-layer-default)";
 /** basement 바로 위에 놓이는 기본 표면입니다. 대부분의 스크린 콘텐츠(List, TextField 등)가 이 레이어 위에서 표현됩니다. (pressed) */
 export declare const layerDefaultPressed = "var(--seed-color-bg-layer-default-pressed)";
-/** @deprecated @seed-design/css@3.0.0에서 새 이름 토큰으로 대체·제거될 예정입니다. */
-export declare const layerFill = "var(--seed-color-bg-layer-fill)";
 /** 화면의 모든 콘텐츠 위를 덮으며(floating) 나타나는 임시 레이어입니다. 사용자의 상호작용을 필요로 하는 모달(Modal)성 요소들이 여기에 속합니다. */
 export declare const layerFloating = "var(--seed-color-bg-layer-floating)";
 /** 화면의 모든 콘텐츠 위를 덮으며(floating) 나타나는 임시 레이어입니다. 사용자의 상호작용을 필요로 하는 모달(Modal)성 요소들이 여기에 속합니다. (pressed) */
 export declare const layerFloatingPressed = "var(--seed-color-bg-layer-floating-pressed)";
 export declare const magicWeak = "var(--seed-color-bg-magic-weak)";
-/** 일반적인 콘텐츠에 사용되는 기본 색상입니다. (inverted) */
+/** @deprecated `$color.bg.neutral-solid`을 사용하세요. 이 토큰은 @seed-design/css@4.0.0과 이에 대응하는 @seed-design/lynx-css 버전에서 제거될 예정입니다. 일반적인 콘텐츠에 사용되는 반전 배경색입니다. */
 export declare const neutralInverted = "var(--seed-color-bg-neutral-inverted)";
-/** 일반적인 콘텐츠에 사용되는 기본 색상입니다. (inverted-pressed) */
+/** @deprecated `$color.bg.neutral-solid-pressed`을 사용하세요. 이 토큰은 @seed-design/css@4.0.0과 이에 대응하는 @seed-design/lynx-css 버전에서 제거될 예정입니다. 일반적인 콘텐츠에 사용되는 기본 색상입니다. (inverted-pressed) */
 export declare const neutralInvertedPressed = "var(--seed-color-bg-neutral-inverted-pressed)";
+/** `$color.bg.layer-default` 위에서 영역이나 섹션을 구분하는 표면 색상입니다. (muted) */
+export declare const neutralMuted = "var(--seed-color-bg-neutral-muted)";
 /** 일반적인 콘텐츠에 사용되는 기본 색상입니다. (solid) */
 export declare const neutralSolid = "var(--seed-color-bg-neutral-solid)";
+/** 일반적인 콘텐츠에 사용되는 기본 색상입니다. (solid-pressed) */
+export declare const neutralSolidPressed = "var(--seed-color-bg-neutral-solid-pressed)";
 /** 일반적인 콘텐츠에 사용되는 기본 색상입니다. (solid-muted) */
 export declare const neutralSolidMuted = "var(--seed-color-bg-neutral-solid-muted)";
 /** 일반적인 콘텐츠에 사용되는 기본 색상입니다. (solid-muted-pressed) */
 export declare const neutralSolidMutedPressed = "var(--seed-color-bg-neutral-solid-muted-pressed)";
+/** 표면과 같은 색상입니다. 회색 표면 위에서 주변과 구분되는 영역에 사용됩니다. (subtle) */
+export declare const neutralSubtle = "var(--seed-color-bg-neutral-subtle)";
 /** 일반적인 콘텐츠에 사용되는 기본 색상입니다. (weak) */
 export declare const neutralWeak = "var(--seed-color-bg-neutral-weak)";
 /** 일반적인 콘텐츠에 사용되는 기본 색상입니다. (weak-alpha) `$color.layer.basement` 위에서 컴포넌트의 가시성을 보장하기 위해 사용됩니다. */

package/vars/color/bg.mjs

@@ -14,15 +14,17 @@ export const informativeWeakPressed = "var(--seed-color-bg-informative-weak-pres
 export const layerBasement = "var(--seed-color-bg-layer-basement)";
 export const layerDefault = "var(--seed-color-bg-layer-default)";
 export const layerDefaultPressed = "var(--seed-color-bg-layer-default-pressed)";
-export const layerFill = "var(--seed-color-bg-layer-fill)";
 export const layerFloating = "var(--seed-color-bg-layer-floating)";
 export const layerFloatingPressed = "var(--seed-color-bg-layer-floating-pressed)";
 export const magicWeak = "var(--seed-color-bg-magic-weak)";
 export const neutralInverted = "var(--seed-color-bg-neutral-inverted)";
 export const neutralInvertedPressed = "var(--seed-color-bg-neutral-inverted-pressed)";
+export const neutralMuted = "var(--seed-color-bg-neutral-muted)";
 export const neutralSolid = "var(--seed-color-bg-neutral-solid)";
+export const neutralSolidPressed = "var(--seed-color-bg-neutral-solid-pressed)";
 export const neutralSolidMuted = "var(--seed-color-bg-neutral-solid-muted)";
 export const neutralSolidMutedPressed = "var(--seed-color-bg-neutral-solid-muted-pressed)";
+export const neutralSubtle = "var(--seed-color-bg-neutral-subtle)";
 export const neutralWeak = "var(--seed-color-bg-neutral-weak)";
 export const neutralWeakAlpha = "var(--seed-color-bg-neutral-weak-alpha)";
 export const neutralWeakAlphaPressed = "var(--seed-color-bg-neutral-weak-alpha-pressed)";

package/vars/color/fg.d.ts

@@ -13,12 +13,24 @@ export declare const informative = "var(--seed-color-fg-informative)";
 export declare const informativeContrast = "var(--seed-color-fg-informative-contrast)";
 /** 일반적인 콘텐츠에 사용되는 기본 색상입니다. */
 export declare const neutral = "var(--seed-color-fg-neutral)";
-/** 일반적인 콘텐츠에 사용되는 기본 색상입니다. (inverted) */
+/** @deprecated `$color.fg.on-neutral-solid`을 사용하세요. 이 토큰은 @seed-design/css@4.0.0과 이에 대응하는 @seed-design/lynx-css 버전에서 제거될 예정입니다. 일반적인 콘텐츠에 사용되는 반전 전경색입니다. */
 export declare const neutralInverted = "var(--seed-color-fg-neutral-inverted)";
 /** 일반적인 콘텐츠에 사용되는 기본 색상입니다. (muted) */
 export declare const neutralMuted = "var(--seed-color-fg-neutral-muted)";
 /** 일반적인 콘텐츠에 사용되는 기본 색상입니다. (subtle) */
 export declare const neutralSubtle = "var(--seed-color-fg-neutral-subtle)";
+/** 브랜드 Solid 배경 위의 전경 요소에 사용됩니다. */
+export declare const onBrandSolid = "var(--seed-color-fg-on-brand-solid)";
+/** Critical Solid 배경 위의 전경 요소에 사용됩니다. */
+export declare const onCriticalSolid = "var(--seed-color-fg-on-critical-solid)";
+/** Informative Solid 배경 위의 전경 요소에 사용됩니다. */
+export declare const onInformativeSolid = "var(--seed-color-fg-on-informative-solid)";
+/** Neutral Solid 배경 위의 전경 요소에 사용됩니다. */
+export declare const onNeutralSolid = "var(--seed-color-fg-on-neutral-solid)";
+/** Positive Solid 배경 위의 전경 요소에 사용됩니다. */
+export declare const onPositiveSolid = "var(--seed-color-fg-on-positive-solid)";
+/** Warning Solid 배경 위의 전경 요소에 사용됩니다. */
+export declare const onWarningSolid = "var(--seed-color-fg-on-warning-solid)";
 export declare const placeholder = "var(--seed-color-fg-placeholder)";
 /** 성공적인 작업, 확인, 또는 긍정적인 상태를 나타내는 데 사용됩니다. */
 export declare const positive = "var(--seed-color-fg-positive)";

package/vars/color/fg.mjs

@@ -9,6 +9,12 @@ export const neutral = "var(--seed-color-fg-neutral)";
 export const neutralInverted = "var(--seed-color-fg-neutral-inverted)";
 export const neutralMuted = "var(--seed-color-fg-neutral-muted)";
 export const neutralSubtle = "var(--seed-color-fg-neutral-subtle)";
+export const onBrandSolid = "var(--seed-color-fg-on-brand-solid)";
+export const onCriticalSolid = "var(--seed-color-fg-on-critical-solid)";
+export const onInformativeSolid = "var(--seed-color-fg-on-informative-solid)";
+export const onNeutralSolid = "var(--seed-color-fg-on-neutral-solid)";
+export const onPositiveSolid = "var(--seed-color-fg-on-positive-solid)";
+export const onWarningSolid = "var(--seed-color-fg-on-warning-solid)";
 export const placeholder = "var(--seed-color-fg-placeholder)";
 export const positive = "var(--seed-color-fg-positive)";
 export const positiveContrast = "var(--seed-color-fg-positive-contrast)";