@seed-design/lynx-css 0.13.0 → 0.14.0

package/vars/component/date-picker.d.ts

@@ -60,11 +60,13 @@ export declare const vars: {
       "wheelContainer": {
         "height": "336px"
       },
+      "wheelPopover": {
+        "width": "240px",
+        "cornerRadius": "var(--seed-radius-r3)",
+        "color": "var(--seed-color-bg-layer-floating)",
+        "shadow": "var(--seed-shadow-s3)"
+      },
       "wheelItem": {
-        "paddingX": "var(--seed-dimension-x4)",
-        "fontSize": "var(--seed-font-size-t10-static)",
-        "lineHeight": "var(--seed-line-height-t10-static)",
-        "fontWeight": "var(--seed-font-weight-medium)",
         "color": "var(--seed-color-fg-disabled)"
       }
     },
@@ -80,10 +82,10 @@ export declare const vars: {
     },
     "selected": {
       "dateVisual": {
-        "color": "var(--seed-color-bg-neutral-inverted)"
+        "color": "var(--seed-color-bg-neutral-solid)"
       },
       "dateContent": {
-        "color": "var(--seed-color-fg-neutral-inverted)"
+        "color": "var(--seed-color-fg-on-neutral-solid)"
       },
       "wheelItem": {
         "color": "var(--seed-color-fg-neutral)"

package/vars/component/date-picker.mjs

@@ -60,11 +60,13 @@ export const vars = {
       "wheelContainer": {
         "height": "336px"
       },
+      "wheelPopover": {
+        "width": "240px",
+        "cornerRadius": "var(--seed-radius-r3)",
+        "color": "var(--seed-color-bg-layer-floating)",
+        "shadow": "var(--seed-shadow-s3)"
+      },
       "wheelItem": {
-        "paddingX": "var(--seed-dimension-x4)",
-        "fontSize": "var(--seed-font-size-t10-static)",
-        "lineHeight": "var(--seed-line-height-t10-static)",
-        "fontWeight": "var(--seed-font-weight-medium)",
         "color": "var(--seed-color-fg-disabled)"
       }
     },
@@ -80,10 +82,10 @@ export const vars = {
     },
     "selected": {
       "dateVisual": {
-        "color": "var(--seed-color-bg-neutral-inverted)"
+        "color": "var(--seed-color-bg-neutral-solid)"
       },
       "dateContent": {
-        "color": "var(--seed-color-fg-neutral-inverted)"
+        "color": "var(--seed-color-fg-on-neutral-solid)"
       },
       "wheelItem": {
         "color": "var(--seed-color-fg-neutral)"

package/vars/component/dialog-close-button.d.ts

@@ -10,9 +10,7 @@ export declare const vars: {
       },
       "icon": {
         "color": "var(--seed-color-fg-neutral-subtle)",
-        "size": "22px",
-        "colorDuration": "var(--seed-duration-color-transition)",
-        "colorTimingFunction": "var(--seed-timing-function-easing)"
+        "size": "22px"
       }
     },
     "pressed": {

package/vars/component/dialog-close-button.mjs

@@ -10,9 +10,7 @@ export const vars = {
       },
       "icon": {
         "color": "var(--seed-color-fg-neutral-subtle)",
-        "size": "22px",
-        "colorDuration": "var(--seed-duration-color-transition)",
-        "colorTimingFunction": "var(--seed-timing-function-easing)"
+        "size": "22px"
       }
     },
     "pressed": {

package/vars/component/extended-fab.d.ts

@@ -13,18 +13,18 @@ export declare const vars: {
   "variantNeutralSolid": {
     "enabled": {
       "root": {
-        "color": "var(--seed-color-bg-neutral-inverted)"
+        "color": "var(--seed-color-bg-neutral-solid)"
       },
       "label": {
-        "color": "var(--seed-color-fg-neutral-inverted)"
+        "color": "var(--seed-color-fg-on-neutral-solid)"
       },
       "prefixIcon": {
-        "color": "var(--seed-color-fg-neutral-inverted)"
+        "color": "var(--seed-color-fg-on-neutral-solid)"
       }
     },
     "pressed": {
       "root": {
-        "color": "var(--seed-color-bg-neutral-inverted-pressed)"
+        "color": "var(--seed-color-bg-neutral-solid-pressed)"
       }
     }
   },

package/vars/component/extended-fab.mjs

@@ -10,18 +10,18 @@ export const vars = {
   "variantNeutralSolid": {
     "enabled": {
       "root": {
-        "color": "var(--seed-color-bg-neutral-inverted)"
+        "color": "var(--seed-color-bg-neutral-solid)"
       },
       "label": {
-        "color": "var(--seed-color-fg-neutral-inverted)"
+        "color": "var(--seed-color-fg-on-neutral-solid)"
       },
       "prefixIcon": {
-        "color": "var(--seed-color-fg-neutral-inverted)"
+        "color": "var(--seed-color-fg-on-neutral-solid)"
       }
     },
     "pressed": {
       "root": {
-        "color": "var(--seed-color-bg-neutral-inverted-pressed)"
+        "color": "var(--seed-color-bg-neutral-solid-pressed)"
       }
     }
   },

package/vars/component/floating-action-button.d.ts

@@ -11,7 +11,7 @@ export declare const vars: {
         "layoutTimingFunction": "var(--seed-timing-function-easing)"
       },
       "icon": {
-        "color": "var(--seed-color-palette-static-white)",
+        "color": "var(--seed-color-fg-on-brand-solid)",
         "sizeDuration": "var(--seed-duration-d4)",
         "sizeTimingFunction": "var(--seed-timing-function-easing)"
       }
@@ -37,7 +37,7 @@ export declare const vars: {
         "size": "var(--seed-dimension-x4)"
       },
       "label": {
-        "color": "var(--seed-color-palette-static-white)",
+        "color": "var(--seed-color-fg-on-brand-solid)",
         "fontSize": "var(--seed-font-size-t5)",
         "lineHeight": "var(--seed-line-height-t5)",
         "fontWeight": "var(--seed-font-weight-bold)"

package/vars/component/floating-action-button.mjs

@@ -11,7 +11,7 @@ export const vars = {
         "layoutTimingFunction": "var(--seed-timing-function-easing)"
       },
       "icon": {
-        "color": "var(--seed-color-palette-static-white)",
+        "color": "var(--seed-color-fg-on-brand-solid)",
         "sizeDuration": "var(--seed-duration-d4)",
         "sizeTimingFunction": "var(--seed-timing-function-easing)"
       }
@@ -34,7 +34,7 @@ export const vars = {
         "size": "var(--seed-dimension-x4)"
       },
       "label": {
-        "color": "var(--seed-color-palette-static-white)",
+        "color": "var(--seed-color-fg-on-brand-solid)",
         "fontSize": "var(--seed-font-size-t5)",
         "lineHeight": "var(--seed-line-height-t5)",
         "fontWeight": "var(--seed-font-weight-bold)"

package/vars/component/help-bubble.d.ts

@@ -2,7 +2,7 @@ export declare const vars: {
   "base": {
     "enabled": {
       "root": {
-        "color": "var(--seed-color-bg-neutral-inverted)",
+        "color": "var(--seed-color-bg-neutral-solid)",
         "cornerRadius": "var(--seed-radius-r3)",
         "paddingX": "var(--seed-dimension-x3)",
         "paddingY": "var(--seed-dimension-x2_5)",
@@ -20,7 +20,7 @@ export declare const vars: {
         "overflowPadding": "var(--seed-dimension-x4)"
       },
       "arrow": {
-        "color": "var(--seed-color-bg-neutral-inverted)",
+        "color": "var(--seed-color-bg-neutral-solid)",
         "width": "12px",
         "height": "8px",
         "cornerRadius": "2px",
@@ -33,19 +33,19 @@ export declare const vars: {
         "gap": "var(--seed-dimension-x0_5)"
       },
       "title": {
-        "color": "var(--seed-color-fg-neutral-inverted)",
+        "color": "var(--seed-color-fg-on-neutral-solid)",
         "fontSize": "var(--seed-font-size-t3)",
         "fontWeight": "var(--seed-font-weight-bold)",
         "lineHeight": "var(--seed-line-height-t3)"
       },
       "description": {
-        "color": "var(--seed-color-fg-neutral-inverted)",
+        "color": "var(--seed-color-fg-on-neutral-solid)",
         "fontSize": "var(--seed-font-size-t3)",
         "fontWeight": "var(--seed-font-weight-regular)",
         "lineHeight": "var(--seed-line-height-t3)"
       },
       "closeButton": {
-        "color": "var(--seed-color-fg-neutral-inverted)",
+        "color": "var(--seed-color-fg-on-neutral-solid)",
         "size": "var(--seed-dimension-x3_5)",
         "targetSize": "38px",
         "marginTop": "var(--seed-dimension-x0_5)"

package/vars/component/help-bubble.mjs

@@ -2,7 +2,7 @@ export const vars = {
   "base": {
     "enabled": {
       "root": {
-        "color": "var(--seed-color-bg-neutral-inverted)",
+        "color": "var(--seed-color-bg-neutral-solid)",
         "cornerRadius": "var(--seed-radius-r3)",
         "paddingX": "var(--seed-dimension-x3)",
         "paddingY": "var(--seed-dimension-x2_5)",
@@ -19,7 +19,7 @@ export const vars = {
         "overflowPadding": "var(--seed-dimension-x4)"
       },
       "arrow": {
-        "color": "var(--seed-color-bg-neutral-inverted)",
+        "color": "var(--seed-color-bg-neutral-solid)",
         "width": "12px",
         "height": "8px",
         "cornerRadius": "2px",
@@ -30,19 +30,19 @@ export const vars = {
         "gap": "var(--seed-dimension-x0_5)"
       },
       "title": {
-        "color": "var(--seed-color-fg-neutral-inverted)",
+        "color": "var(--seed-color-fg-on-neutral-solid)",
         "fontSize": "var(--seed-font-size-t3)",
         "fontWeight": "var(--seed-font-weight-bold)",
         "lineHeight": "var(--seed-line-height-t3)"
       },
       "description": {
-        "color": "var(--seed-color-fg-neutral-inverted)",
+        "color": "var(--seed-color-fg-on-neutral-solid)",
         "fontSize": "var(--seed-font-size-t3)",
         "fontWeight": "var(--seed-font-weight-regular)",
         "lineHeight": "var(--seed-line-height-t3)"
       },
       "closeButton": {
-        "color": "var(--seed-color-fg-neutral-inverted)",
+        "color": "var(--seed-color-fg-on-neutral-solid)",
         "size": "var(--seed-dimension-x3_5)",
         "targetSize": "38px",
         "marginTop": "var(--seed-dimension-x0_5)"

package/vars/component/index.d.ts

@@ -27,7 +27,6 @@ export { vars as chipTablist } from "./chip-tablist";
 export { vars as chip } from "./chip";
 export { vars as contentPlaceholder } from "./content-placeholder";
 export { vars as contextualFloatingButton } from "./contextual-floating-button";
-export { vars as controlChip } from "./control-chip";
 export { vars as datePicker } from "./date-picker";
 export { vars as dialogCloseButton } from "./dialog-close-button";
 export { vars as dialog } from "./dialog";
@@ -46,7 +45,6 @@ export { vars as imageFrameFloater } from "./image-frame-floater";
 export { vars as imageFrameIndicator } from "./image-frame-indicator";
 export { vars as imageFrameReactionButton } from "./image-frame-reaction-button";
 export { vars as imageFrame } from "./image-frame";
-export { vars as inlineBanner } from "./inline-banner";
 export { vars as inputButton } from "./input-button";
 export { vars as linkContent } from "./link-content";
 export { vars as listHeader } from "./list-header";
@@ -63,6 +61,8 @@ export { vars as pageBannerCloseButton } from "./page-banner-close-button";
 export { vars as pageBanner } from "./page-banner";
 export { vars as paginationButton } from "./pagination-button";
 export { vars as paginationPageItem } from "./pagination-page-item";
+export { vars as popoverCloseButton } from "./popover-close-button";
+export { vars as popover } from "./popover";
 export { vars as progressCircle } from "./progress-circle";
 export { vars as quantityPickerButton } from "./quantity-picker-button";
 export { vars as quantityPicker } from "./quantity-picker";

package/vars/component/index.mjs

@@ -27,7 +27,6 @@ export { vars as chipTablist } from "./chip-tablist.mjs";
 export { vars as chip } from "./chip.mjs";
 export { vars as contentPlaceholder } from "./content-placeholder.mjs";
 export { vars as contextualFloatingButton } from "./contextual-floating-button.mjs";
-export { vars as controlChip } from "./control-chip.mjs";
 export { vars as datePicker } from "./date-picker.mjs";
 export { vars as dialogCloseButton } from "./dialog-close-button.mjs";
 export { vars as dialog } from "./dialog.mjs";
@@ -46,7 +45,6 @@ export { vars as imageFrameFloater } from "./image-frame-floater.mjs";
 export { vars as imageFrameIndicator } from "./image-frame-indicator.mjs";
 export { vars as imageFrameReactionButton } from "./image-frame-reaction-button.mjs";
 export { vars as imageFrame } from "./image-frame.mjs";
-export { vars as inlineBanner } from "./inline-banner.mjs";
 export { vars as inputButton } from "./input-button.mjs";
 export { vars as linkContent } from "./link-content.mjs";
 export { vars as listHeader } from "./list-header.mjs";
@@ -63,6 +61,8 @@ export { vars as pageBannerCloseButton } from "./page-banner-close-button.mjs";
 export { vars as pageBanner } from "./page-banner.mjs";
 export { vars as paginationButton } from "./pagination-button.mjs";
 export { vars as paginationPageItem } from "./pagination-page-item.mjs";
+export { vars as popoverCloseButton } from "./popover-close-button.mjs";
+export { vars as popover } from "./popover.mjs";
 export { vars as progressCircle } from "./progress-circle.mjs";
 export { vars as quantityPickerButton } from "./quantity-picker-button.mjs";
 export { vars as quantityPicker } from "./quantity-picker.mjs";

package/vars/component/notification-badge.d.ts

@@ -5,7 +5,7 @@ export declare const vars: {
         "color": "var(--seed-color-bg-brand-solid)"
       },
       "label": {
-        "color": "var(--seed-color-palette-static-white)"
+        "color": "var(--seed-color-fg-on-brand-solid)"
       }
     }
   },

package/vars/component/notification-badge.mjs

@@ -5,7 +5,7 @@ export const vars = {
         "color": "var(--seed-color-bg-brand-solid)"
       },
       "label": {
-        "color": "var(--seed-color-palette-static-white)"
+        "color": "var(--seed-color-fg-on-brand-solid)"
       }
     }
   },

package/vars/component/page-banner-close-button.d.ts

@@ -35,7 +35,7 @@ export declare const vars: {
   "toneNeutralVariantSolid": {
     "enabled": {
       "icon": {
-        "color": "var(--seed-color-fg-neutral-inverted)"
+        "color": "var(--seed-color-fg-on-neutral-solid)"
       }
     }
   },

package/vars/component/page-banner-close-button.mjs

@@ -29,7 +29,7 @@ export const vars = {
   "toneNeutralVariantSolid": {
     "enabled": {
       "icon": {
-        "color": "var(--seed-color-fg-neutral-inverted)"
+        "color": "var(--seed-color-fg-on-neutral-solid)"
       }
     }
   },

package/vars/component/page-banner.d.ts

@@ -73,28 +73,28 @@ export declare const vars: {
   "toneNeutralVariantSolid": {
     "enabled": {
       "root": {
-        "color": "var(--seed-color-bg-neutral-inverted)"
+        "color": "var(--seed-color-bg-neutral-solid)"
       },
       /** 아이콘은 Fill 타입 사용을 권장합니다. */
       "prefixIcon": {
-        "color": "var(--seed-color-fg-neutral-inverted)"
+        "color": "var(--seed-color-fg-on-neutral-solid)"
       },
       "title": {
-        "color": "var(--seed-color-fg-neutral-inverted)"
+        "color": "var(--seed-color-fg-on-neutral-solid)"
       },
       "description": {
-        "color": "var(--seed-color-fg-neutral-inverted)"
+        "color": "var(--seed-color-fg-on-neutral-solid)"
       },
       "button": {
-        "color": "var(--seed-color-fg-neutral-inverted)"
+        "color": "var(--seed-color-fg-on-neutral-solid)"
       },
       "suffixIcon": {
-        "color": "var(--seed-color-fg-neutral-inverted)"
+        "color": "var(--seed-color-fg-on-neutral-solid)"
       }
     },
     "pressed": {
       "root": {
-        "color": "var(--seed-color-bg-neutral-inverted-pressed)"
+        "color": "var(--seed-color-bg-neutral-solid-pressed)"
       }
     }
   },
@@ -139,19 +139,19 @@ export declare const vars: {
       },
       /** 아이콘은 Fill 타입 사용을 권장합니다. */
       "prefixIcon": {
-        "color": "var(--seed-color-palette-static-white)"
+        "color": "var(--seed-color-fg-on-positive-solid)"
       },
       "title": {
-        "color": "var(--seed-color-palette-static-white)"
+        "color": "var(--seed-color-fg-on-positive-solid)"
       },
       "description": {
-        "color": "var(--seed-color-palette-static-white)"
+        "color": "var(--seed-color-fg-on-positive-solid)"
       },
       "button": {
-        "color": "var(--seed-color-palette-static-white)"
+        "color": "var(--seed-color-fg-on-positive-solid)"
       },
       "suffixIcon": {
-        "color": "var(--seed-color-palette-static-white)"
+        "color": "var(--seed-color-fg-on-positive-solid)"
       }
     },
     "pressed": {
@@ -201,19 +201,19 @@ export declare const vars: {
       },
       /** 아이콘은 Fill 타입 사용을 권장합니다. */
       "prefixIcon": {
-        "color": "var(--seed-color-palette-static-white)"
+        "color": "var(--seed-color-fg-on-informative-solid)"
       },
       "title": {
-        "color": "var(--seed-color-palette-static-white)"
+        "color": "var(--seed-color-fg-on-informative-solid)"
       },
       "description": {
-        "color": "var(--seed-color-palette-static-white)"
+        "color": "var(--seed-color-fg-on-informative-solid)"
       },
       "button": {
-        "color": "var(--seed-color-palette-static-white)"
+        "color": "var(--seed-color-fg-on-informative-solid)"
       },
       "suffixIcon": {
-        "color": "var(--seed-color-palette-static-white)"
+        "color": "var(--seed-color-fg-on-informative-solid)"
       }
     },
     "pressed": {
@@ -263,19 +263,19 @@ export declare const vars: {
       },
       /** 아이콘은 Fill 타입 사용을 권장합니다. */
       "prefixIcon": {
-        "color": "var(--seed-color-palette-static-black-alpha-900)"
+        "color": "var(--seed-color-fg-on-warning-solid)"
       },
       "title": {
-        "color": "var(--seed-color-palette-static-black-alpha-900)"
+        "color": "var(--seed-color-fg-on-warning-solid)"
       },
       "description": {
-        "color": "var(--seed-color-palette-static-black-alpha-900)"
+        "color": "var(--seed-color-fg-on-warning-solid)"
       },
       "button": {
-        "color": "var(--seed-color-palette-static-black-alpha-900)"
+        "color": "var(--seed-color-fg-on-warning-solid)"
       },
       "suffixIcon": {
-        "color": "var(--seed-color-palette-static-black-alpha-900)"
+        "color": "var(--seed-color-fg-on-warning-solid)"
       }
     },
     "pressed": {
@@ -325,19 +325,19 @@ export declare const vars: {
       },
       /** 아이콘은 Fill 타입 사용을 권장합니다. */
       "prefixIcon": {
-        "color": "var(--seed-color-palette-static-white)"
+        "color": "var(--seed-color-fg-on-critical-solid)"
       },
       "title": {
-        "color": "var(--seed-color-palette-static-white)"
+        "color": "var(--seed-color-fg-on-critical-solid)"
       },
       "description": {
-        "color": "var(--seed-color-palette-static-white)"
+        "color": "var(--seed-color-fg-on-critical-solid)"
       },
       "button": {
-        "color": "var(--seed-color-palette-static-white)"
+        "color": "var(--seed-color-fg-on-critical-solid)"
       },
       "suffixIcon": {
-        "color": "var(--seed-color-palette-static-white)"
+        "color": "var(--seed-color-fg-on-critical-solid)"
       }
     },
     "pressed": {

package/vars/component/page-banner.mjs

@@ -65,27 +65,27 @@ export const vars = {
   "toneNeutralVariantSolid": {
     "enabled": {
       "root": {
-        "color": "var(--seed-color-bg-neutral-inverted)"
+        "color": "var(--seed-color-bg-neutral-solid)"
       },
       "prefixIcon": {
-        "color": "var(--seed-color-fg-neutral-inverted)"
+        "color": "var(--seed-color-fg-on-neutral-solid)"
       },
       "title": {
-        "color": "var(--seed-color-fg-neutral-inverted)"
+        "color": "var(--seed-color-fg-on-neutral-solid)"
       },
       "description": {
-        "color": "var(--seed-color-fg-neutral-inverted)"
+        "color": "var(--seed-color-fg-on-neutral-solid)"
       },
       "button": {
-        "color": "var(--seed-color-fg-neutral-inverted)"
+        "color": "var(--seed-color-fg-on-neutral-solid)"
       },
       "suffixIcon": {
-        "color": "var(--seed-color-fg-neutral-inverted)"
+        "color": "var(--seed-color-fg-on-neutral-solid)"
       }
     },
     "pressed": {
       "root": {
-        "color": "var(--seed-color-bg-neutral-inverted-pressed)"
+        "color": "var(--seed-color-bg-neutral-solid-pressed)"
       }
     }
   },
@@ -122,19 +122,19 @@ export const vars = {
         "color": "var(--seed-color-bg-positive-solid)"
       },
       "prefixIcon": {
-        "color": "var(--seed-color-palette-static-white)"
+        "color": "var(--seed-color-fg-on-positive-solid)"
       },
       "title": {
-        "color": "var(--seed-color-palette-static-white)"
+        "color": "var(--seed-color-fg-on-positive-solid)"
       },
       "description": {
-        "color": "var(--seed-color-palette-static-white)"
+        "color": "var(--seed-color-fg-on-positive-solid)"
       },
       "button": {
-        "color": "var(--seed-color-palette-static-white)"
+        "color": "var(--seed-color-fg-on-positive-solid)"
       },
       "suffixIcon": {
-        "color": "var(--seed-color-palette-static-white)"
+        "color": "var(--seed-color-fg-on-positive-solid)"
       }
     },
     "pressed": {
@@ -176,19 +176,19 @@ export const vars = {
         "color": "var(--seed-color-bg-informative-solid)"
       },
       "prefixIcon": {
-        "color": "var(--seed-color-palette-static-white)"
+        "color": "var(--seed-color-fg-on-informative-solid)"
       },
       "title": {
-        "color": "var(--seed-color-palette-static-white)"
+        "color": "var(--seed-color-fg-on-informative-solid)"
       },
       "description": {
-        "color": "var(--seed-color-palette-static-white)"
+        "color": "var(--seed-color-fg-on-informative-solid)"
       },
       "button": {
-        "color": "var(--seed-color-palette-static-white)"
+        "color": "var(--seed-color-fg-on-informative-solid)"
       },
       "suffixIcon": {
-        "color": "var(--seed-color-palette-static-white)"
+        "color": "var(--seed-color-fg-on-informative-solid)"
       }
     },
     "pressed": {
@@ -230,19 +230,19 @@ export const vars = {
         "color": "var(--seed-color-bg-warning-solid)"
       },
       "prefixIcon": {
-        "color": "var(--seed-color-palette-static-black-alpha-900)"
+        "color": "var(--seed-color-fg-on-warning-solid)"
       },
       "title": {
-        "color": "var(--seed-color-palette-static-black-alpha-900)"
+        "color": "var(--seed-color-fg-on-warning-solid)"
       },
       "description": {
-        "color": "var(--seed-color-palette-static-black-alpha-900)"
+        "color": "var(--seed-color-fg-on-warning-solid)"
       },
       "button": {
-        "color": "var(--seed-color-palette-static-black-alpha-900)"
+        "color": "var(--seed-color-fg-on-warning-solid)"
       },
       "suffixIcon": {
-        "color": "var(--seed-color-palette-static-black-alpha-900)"
+        "color": "var(--seed-color-fg-on-warning-solid)"
       }
     },
     "pressed": {
@@ -284,19 +284,19 @@ export const vars = {
         "color": "var(--seed-color-bg-critical-solid)"
       },
       "prefixIcon": {
-        "color": "var(--seed-color-palette-static-white)"
+        "color": "var(--seed-color-fg-on-critical-solid)"
       },
       "title": {
-        "color": "var(--seed-color-palette-static-white)"
+        "color": "var(--seed-color-fg-on-critical-solid)"
       },
       "description": {
-        "color": "var(--seed-color-palette-static-white)"
+        "color": "var(--seed-color-fg-on-critical-solid)"
       },
       "button": {
-        "color": "var(--seed-color-palette-static-white)"
+        "color": "var(--seed-color-fg-on-critical-solid)"
       },
       "suffixIcon": {
-        "color": "var(--seed-color-palette-static-white)"
+        "color": "var(--seed-color-fg-on-critical-solid)"
       }
     },
     "pressed": {

package/vars/component/pagination-page-item.d.ts

@@ -23,15 +23,15 @@ export declare const vars: {
     },
     "selected": {
       "root": {
-        "color": "var(--seed-color-bg-neutral-inverted)"
+        "color": "var(--seed-color-bg-neutral-solid)"
       },
       "label": {
-        "color": "var(--seed-color-fg-neutral-inverted)"
+        "color": "var(--seed-color-fg-on-neutral-solid)"
       }
     },
     "selectedPressed": {
       "root": {
-        "color": "var(--seed-color-bg-neutral-inverted-pressed)"
+        "color": "var(--seed-color-bg-neutral-solid-pressed)"
       }
     },
     "disabled": {