@seed-design/css 2.4.2 → 2.6.0

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

@@ -0,0 +1,81 @@
+export declare const vars: {
+  "base": {
+    "enabled": {
+      "root": {
+        "color": "var(--seed-color-bg-transparent)",
+        "cornerRadius": "var(--seed-radius-r2)",
+        "size": "var(--seed-dimension-x10)",
+        "colorDuration": "var(--seed-duration-color-transition)",
+        "colorTimingFunction": "var(--seed-timing-function-easing)"
+      },
+      "icon": {
+        "size": "var(--seed-dimension-x4)"
+      }
+    },
+    "pressed": {
+      "root": {
+        "color": "var(--seed-color-bg-transparent-pressed)"
+      }
+    }
+  },
+  /**
+   * 일반적인 정보를 전달합니다.
+   */
+  "toneNeutral": {
+    "enabled": {
+      "icon": {
+        "color": "var(--seed-color-fg-neutral)"
+      }
+    }
+  },
+  /**
+   * 유용한 정보를 제공합니다.
+   */
+  "toneInformative": {
+    "enabled": {
+      "icon": {
+        "color": "var(--seed-color-fg-informative-contrast)"
+      }
+    }
+  },
+  /**
+   * 긍정적인 상태를 나타냅니다.
+   */
+  "tonePositive": {
+    "enabled": {
+      "icon": {
+        "color": "var(--seed-color-fg-positive-contrast)"
+      }
+    }
+  },
+  /**
+   * 주의가 필요한 상태를 나타냅니다.
+   */
+  "toneWarning": {
+    "enabled": {
+      "icon": {
+        "color": "var(--seed-color-fg-warning-contrast)"
+      }
+    }
+  },
+  /**
+   * 중요한 문제를 나타냅니다.
+   */
+  "toneCritical": {
+    "enabled": {
+      "icon": {
+        "color": "var(--seed-color-fg-critical-contrast)"
+      }
+    }
+  },
+  /**
+   * AI 기능을 나타냅니다.
+   */
+  "toneMagic": {
+    "enabled": {
+      "icon": {
+        "color": "var(--seed-color-fg-neutral)"
+      }
+    }
+  }
+}

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

@@ -0,0 +1,63 @@
+export const vars = {
+  "base": {
+    "enabled": {
+      "root": {
+        "color": "var(--seed-color-bg-transparent)",
+        "cornerRadius": "var(--seed-radius-r2)",
+        "size": "var(--seed-dimension-x10)",
+        "colorDuration": "var(--seed-duration-color-transition)",
+        "colorTimingFunction": "var(--seed-timing-function-easing)"
+      },
+      "icon": {
+        "size": "var(--seed-dimension-x4)"
+      }
+    },
+    "pressed": {
+      "root": {
+        "color": "var(--seed-color-bg-transparent-pressed)"
+      }
+    }
+  },
+  "toneNeutral": {
+    "enabled": {
+      "icon": {
+        "color": "var(--seed-color-fg-neutral)"
+      }
+    }
+  },
+  "toneInformative": {
+    "enabled": {
+      "icon": {
+        "color": "var(--seed-color-fg-informative-contrast)"
+      }
+    }
+  },
+  "tonePositive": {
+    "enabled": {
+      "icon": {
+        "color": "var(--seed-color-fg-positive-contrast)"
+      }
+    }
+  },
+  "toneWarning": {
+    "enabled": {
+      "icon": {
+        "color": "var(--seed-color-fg-warning-contrast)"
+      }
+    }
+  },
+  "toneCritical": {
+    "enabled": {
+      "icon": {
+        "color": "var(--seed-color-fg-critical-contrast)"
+      }
+    }
+  },
+  "toneMagic": {
+    "enabled": {
+      "icon": {
+        "color": "var(--seed-color-fg-neutral)"
+      }
+    }
+  }
+}

package/vars/component/callout.d.ts

@@ -29,8 +29,7 @@ export declare const vars: {
         "fontWeight": "var(--seed-font-weight-regular)"
       },
       "suffixIcon": {
-        "size": "var(--seed-dimension-x4)",
-        "targetSize": "var(--seed-dimension-x10)"
+        "size": "var(--seed-dimension-x4)"
       }
     }
   },

package/vars/component/callout.mjs

@@ -27,8 +27,7 @@ export const vars = {
         "fontWeight": "var(--seed-font-weight-regular)"
       },
       "suffixIcon": {
-        "size": "var(--seed-dimension-x4)",
-        "targetSize": "var(--seed-dimension-x10)"
+        "size": "var(--seed-dimension-x4)"
       }
     }
   },

package/vars/component/checkbox.d.ts

@@ -4,6 +4,7 @@ export declare const vars: {
       "label": {
         "color": "var(--seed-color-fg-neutral)"
       },
+      /** root 전체가 누르는 영역이며, pressed 피드백은 Checkmark의 축소로 표현됩니다. */
       "root": {
         "gap": "var(--seed-dimension-x2)"
       }
@@ -30,6 +31,7 @@ export declare const vars: {
   },
   "sizeMedium": {
     "enabled": {
+      /** root 전체가 누르는 영역이며, pressed 피드백은 Checkmark의 축소로 표현됩니다. */
       "root": {
         "minHeight": "var(--seed-dimension-x8)"
       },
@@ -41,6 +43,7 @@ export declare const vars: {
   },
   "sizeLarge": {
     "enabled": {
+      /** root 전체가 누르는 영역이며, pressed 피드백은 Checkmark의 축소로 표현됩니다. */
       "root": {
         "minHeight": "var(--seed-dimension-x9)"
       },

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

@@ -89,6 +89,11 @@ export declare const vars: {
         "color": "var(--seed-color-fg-neutral)"
       }
     },
+    "readOnly": {
+      "dateVisual": {
+        "color": "var(--seed-color-palette-gray-600)"
+      }
+    },
     "disabled": {
       "dateContent": {
         "color": "var(--seed-color-fg-disabled)"

package/vars/component/date-picker.mjs

@@ -89,6 +89,11 @@ export const vars = {
         "color": "var(--seed-color-fg-neutral)"
       }
     },
+    "readOnly": {
+      "dateVisual": {
+        "color": "var(--seed-color-palette-gray-600)"
+      }
+    },
     "disabled": {
       "dateContent": {
         "color": "var(--seed-color-fg-disabled)"

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

@@ -7,6 +7,7 @@ export declare const vars: {
         "paddingX": "var(--seed-dimension-x3)",
         "paddingY": "var(--seed-dimension-x2_5)",
         "gap": "var(--seed-dimension-x1)",
+        "maxWidth": "280px",
         "enterScale": "0.9",
         "enterOpacity": "0",
         "enterDuration": "var(--seed-duration-d4)",
@@ -14,7 +15,9 @@ export declare const vars: {
         "exitScale": "1",
         "exitOpacity": "0",
         "exitDuration": "var(--seed-duration-d4)",
-        "exitTimingFunction": "var(--seed-timing-function-easing)"
+        "exitTimingFunction": "var(--seed-timing-function-easing)",
+        /** 말풍선과 뷰포트 경계 사이의 최소 간격을 정의합니다. */
+        "overflowPadding": "var(--seed-dimension-x4)"
       },
       "arrow": {
         "color": "var(--seed-color-bg-neutral-inverted)",

package/vars/component/help-bubble.mjs

@@ -7,6 +7,7 @@ export const vars = {
         "paddingX": "var(--seed-dimension-x3)",
         "paddingY": "var(--seed-dimension-x2_5)",
         "gap": "var(--seed-dimension-x1)",
+        "maxWidth": "280px",
         "enterScale": "0.9",
         "enterOpacity": "0",
         "enterDuration": "var(--seed-duration-d4)",
@@ -14,7 +15,8 @@ export const vars = {
         "exitScale": "1",
         "exitOpacity": "0",
         "exitDuration": "var(--seed-duration-d4)",
-        "exitTimingFunction": "var(--seed-timing-function-easing)"
+        "exitTimingFunction": "var(--seed-timing-function-easing)",
+        "overflowPadding": "var(--seed-dimension-x4)"
       },
       "arrow": {
         "color": "var(--seed-color-bg-neutral-inverted)",

package/vars/component/index.d.ts

@@ -18,6 +18,7 @@ export { vars as badge } from "./badge";
 export { vars as bottomSheetCloseButton } from "./bottom-sheet-close-button";
 export { vars as bottomSheetHandle } from "./bottom-sheet-handle";
 export { vars as bottomSheet } from "./bottom-sheet";
+export { vars as calloutCloseButton } from "./callout-close-button";
 export { vars as callout } from "./callout";
 export { vars as checkboxGroup } from "./checkbox-group";
 export { vars as checkbox } from "./checkbox";
@@ -58,7 +59,10 @@ export { vars as menuSheetItem } from "./menu-sheet-item";
 export { vars as menuSheet } from "./menu-sheet";
 export { vars as menu } from "./menu";
 export { vars as notificationBadge } from "./notification-badge";
+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 progressCircle } from "./progress-circle";
 export { vars as quantityPickerButton } from "./quantity-picker-button";
 export { vars as quantityPicker } from "./quantity-picker";
@@ -96,4 +100,5 @@ export { vars as toggleButton } from "./toggle-button";
 export { vars as topNavigationIconButton } from "./top-navigation-icon-button";
 export { vars as topNavigationTextButton } from "./top-navigation-text-button";
 export { vars as topNavigation } from "./top-navigation";
-export { vars as typography } from "./typography";
+export { vars as typography } from "./typography";
+export { vars as wheelPicker } from "./wheel-picker";

package/vars/component/index.mjs

@@ -18,6 +18,7 @@ export { vars as badge } from "./badge.mjs";
 export { vars as bottomSheetCloseButton } from "./bottom-sheet-close-button.mjs";
 export { vars as bottomSheetHandle } from "./bottom-sheet-handle.mjs";
 export { vars as bottomSheet } from "./bottom-sheet.mjs";
+export { vars as calloutCloseButton } from "./callout-close-button.mjs";
 export { vars as callout } from "./callout.mjs";
 export { vars as checkboxGroup } from "./checkbox-group.mjs";
 export { vars as checkbox } from "./checkbox.mjs";
@@ -58,7 +59,10 @@ export { vars as menuSheetItem } from "./menu-sheet-item.mjs";
 export { vars as menuSheet } from "./menu-sheet.mjs";
 export { vars as menu } from "./menu.mjs";
 export { vars as notificationBadge } from "./notification-badge.mjs";
+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 progressCircle } from "./progress-circle.mjs";
 export { vars as quantityPickerButton } from "./quantity-picker-button.mjs";
 export { vars as quantityPicker } from "./quantity-picker.mjs";
@@ -96,4 +100,5 @@ export { vars as toggleButton } from "./toggle-button.mjs";
 export { vars as topNavigationIconButton } from "./top-navigation-icon-button.mjs";
 export { vars as topNavigationTextButton } from "./top-navigation-text-button.mjs";
 export { vars as topNavigation } from "./top-navigation.mjs";
-export { vars as typography } from "./typography.mjs";
+export { vars as typography } from "./typography.mjs";
+export { vars as wheelPicker } from "./wheel-picker.mjs";

package/vars/component/list-item.d.ts

@@ -10,9 +10,7 @@ export declare const vars: {
         "marginDuration": "var(--seed-duration-d3)",
         "marginTimingFunction": "var(--seed-timing-function-easing)",
         "borderRadiusDuration": "var(--seed-duration-d3)",
-        "borderRadiusTimingFunction": "var(--seed-timing-function-easing)",
-        "contentScaleDuration": "var(--seed-duration-pressed-scale)",
-        "contentScaleTimingFunction": "var(--seed-timing-function-pressed-scale)"
+        "borderRadiusTimingFunction": "var(--seed-timing-function-easing)"
       },
       "body": {
         "gap": "var(--seed-dimension-x0_5)",
@@ -56,9 +54,7 @@ export declare const vars: {
         "color": "var(--seed-color-bg-transparent-pressed)",
         /** pressed 시 배경 레이어는 좌우 폭이 marginX만큼 줄어들고, 배경 레이어 위 요소들이 위치하는 레이아웃 레이어는 scale로 인해 전체적으로 줄어드는 형태로 두 레이어가 별개로 작동합니다. 이 값은 OS 동작 줄이기 설정의 영향을 받지 않습니다. */
         "marginX": "var(--seed-dimension-x1_5)",
-        "cornerRadius": "var(--seed-dimension-x2_5)",
-        /** pressed 시 배경 레이어는 좌우 폭이 marginX만큼 줄어들고, 배경 레이어 위 요소들이 위치하는 레이아웃 레이어는 scale로 인해 전체적으로 줄어드는 형태로 두 레이어가 별개로 작동합니다. */
-        "contentScale": "var(--seed-scale-s97)"
+        "cornerRadius": "var(--seed-dimension-x2_5)"
       }
     },
     "highlighted": {

package/vars/component/list-item.mjs

@@ -10,9 +10,7 @@ export const vars = {
         "marginDuration": "var(--seed-duration-d3)",
         "marginTimingFunction": "var(--seed-timing-function-easing)",
         "borderRadiusDuration": "var(--seed-duration-d3)",
-        "borderRadiusTimingFunction": "var(--seed-timing-function-easing)",
-        "contentScaleDuration": "var(--seed-duration-pressed-scale)",
-        "contentScaleTimingFunction": "var(--seed-timing-function-pressed-scale)"
+        "borderRadiusTimingFunction": "var(--seed-timing-function-easing)"
       },
       "body": {
         "gap": "var(--seed-dimension-x0_5)",
@@ -55,8 +53,7 @@ export const vars = {
       "root": {
         "color": "var(--seed-color-bg-transparent-pressed)",
         "marginX": "var(--seed-dimension-x1_5)",
-        "cornerRadius": "var(--seed-dimension-x2_5)",
-        "contentScale": "var(--seed-scale-s97)"
+        "cornerRadius": "var(--seed-dimension-x2_5)"
       }
     },
     "highlighted": {

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

@@ -0,0 +1,133 @@
+export declare const vars: {
+  "base": {
+    "enabled": {
+      "root": {
+        "color": "var(--seed-color-bg-transparent)",
+        "cornerRadius": "var(--seed-radius-r2)",
+        "size": "var(--seed-dimension-x10)",
+        "marginLeft": "var(--seed-dimension-x2)",
+        "colorDuration": "var(--seed-duration-color-transition)",
+        "colorTimingFunction": "var(--seed-timing-function-easing)"
+      },
+      "icon": {
+        "size": "var(--seed-dimension-x4)"
+      }
+    },
+    "pressed": {
+      "root": {
+        "color": "var(--seed-color-bg-transparent-pressed)"
+      }
+    }
+  },
+  /**
+   * - `variant=weak`: 배경색이 연한 스타일입니다.
+   */
+  "toneNeutralVariantWeak": {
+    "enabled": {
+      "icon": {
+        "color": "var(--seed-color-fg-neutral)"
+      }
+    }
+  },
+  /**
+   * - `variant=solid`: 배경색이 진한 스타일입니다.
+   */
+  "toneNeutralVariantSolid": {
+    "enabled": {
+      "icon": {
+        "color": "var(--seed-color-fg-neutral-inverted)"
+      }
+    }
+  },
+  /**
+   * - `variant=weak`: 배경색이 연한 스타일입니다.
+   */
+  "tonePositiveVariantWeak": {
+    "enabled": {
+      "icon": {
+        "color": "var(--seed-color-fg-positive-contrast)"
+      }
+    }
+  },
+  /**
+   * - `variant=solid`: 배경색이 진한 스타일입니다.
+   */
+  "tonePositiveVariantSolid": {
+    "enabled": {
+      "icon": {
+        "color": "var(--seed-color-palette-static-white)"
+      }
+    }
+  },
+  /**
+   * - `variant=weak`: 배경색이 연한 스타일입니다.
+   */
+  "toneInformativeVariantWeak": {
+    "enabled": {
+      "icon": {
+        "color": "var(--seed-color-fg-informative-contrast)"
+      }
+    }
+  },
+  /**
+   * - `variant=solid`: 배경색이 진한 스타일입니다.
+   */
+  "toneInformativeVariantSolid": {
+    "enabled": {
+      "icon": {
+        "color": "var(--seed-color-palette-static-white)"
+      }
+    }
+  },
+  /**
+   * - `variant=weak`: 배경색이 연한 스타일입니다.
+   */
+  "toneWarningVariantWeak": {
+    "enabled": {
+      "icon": {
+        "color": "var(--seed-color-fg-warning-contrast)"
+      }
+    }
+  },
+  /**
+   * - `variant=solid`: 배경색이 진한 스타일입니다.
+   */
+  "toneWarningVariantSolid": {
+    "enabled": {
+      "icon": {
+        "color": "var(--seed-color-palette-static-black-alpha-900)"
+      }
+    }
+  },
+  /**
+   * - `variant=weak`: 배경색이 연한 스타일입니다.
+   */
+  "toneCriticalVariantWeak": {
+    "enabled": {
+      "icon": {
+        "color": "var(--seed-color-fg-critical-contrast)"
+      }
+    }
+  },
+  /**
+   * - `variant=solid`: 배경색이 진한 스타일입니다.
+   */
+  "toneCriticalVariantSolid": {
+    "enabled": {
+      "icon": {
+        "color": "var(--seed-color-palette-static-white)"
+      }
+    }
+  },
+  /**
+   * - `tone=magic`: AI 기능을 나타냅니다. variant=solid와 조합하여 사용하지 않습니다.
+   * - `variant=weak`: 배경색이 연한 스타일입니다.
+   */
+  "toneMagicVariantWeak": {
+    "enabled": {
+      "icon": {
+        "color": "var(--seed-color-fg-neutral)"
+      }
+    }
+  }
+}

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

@@ -0,0 +1,99 @@
+export const vars = {
+  "base": {
+    "enabled": {
+      "root": {
+        "color": "var(--seed-color-bg-transparent)",
+        "cornerRadius": "var(--seed-radius-r2)",
+        "size": "var(--seed-dimension-x10)",
+        "marginLeft": "var(--seed-dimension-x2)",
+        "colorDuration": "var(--seed-duration-color-transition)",
+        "colorTimingFunction": "var(--seed-timing-function-easing)"
+      },
+      "icon": {
+        "size": "var(--seed-dimension-x4)"
+      }
+    },
+    "pressed": {
+      "root": {
+        "color": "var(--seed-color-bg-transparent-pressed)"
+      }
+    }
+  },
+  "toneNeutralVariantWeak": {
+    "enabled": {
+      "icon": {
+        "color": "var(--seed-color-fg-neutral)"
+      }
+    }
+  },
+  "toneNeutralVariantSolid": {
+    "enabled": {
+      "icon": {
+        "color": "var(--seed-color-fg-neutral-inverted)"
+      }
+    }
+  },
+  "tonePositiveVariantWeak": {
+    "enabled": {
+      "icon": {
+        "color": "var(--seed-color-fg-positive-contrast)"
+      }
+    }
+  },
+  "tonePositiveVariantSolid": {
+    "enabled": {
+      "icon": {
+        "color": "var(--seed-color-palette-static-white)"
+      }
+    }
+  },
+  "toneInformativeVariantWeak": {
+    "enabled": {
+      "icon": {
+        "color": "var(--seed-color-fg-informative-contrast)"
+      }
+    }
+  },
+  "toneInformativeVariantSolid": {
+    "enabled": {
+      "icon": {
+        "color": "var(--seed-color-palette-static-white)"
+      }
+    }
+  },
+  "toneWarningVariantWeak": {
+    "enabled": {
+      "icon": {
+        "color": "var(--seed-color-fg-warning-contrast)"
+      }
+    }
+  },
+  "toneWarningVariantSolid": {
+    "enabled": {
+      "icon": {
+        "color": "var(--seed-color-palette-static-black-alpha-900)"
+      }
+    }
+  },
+  "toneCriticalVariantWeak": {
+    "enabled": {
+      "icon": {
+        "color": "var(--seed-color-fg-critical-contrast)"
+      }
+    }
+  },
+  "toneCriticalVariantSolid": {
+    "enabled": {
+      "icon": {
+        "color": "var(--seed-color-palette-static-white)"
+      }
+    }
+  },
+  "toneMagicVariantWeak": {
+    "enabled": {
+      "icon": {
+        "color": "var(--seed-color-fg-neutral)"
+      }
+    }
+  }
+}

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

@@ -32,7 +32,6 @@ export declare const vars: {
       },
       "suffixIcon": {
         "size": "var(--seed-dimension-x4)",
-        "targetSize": "var(--seed-dimension-x10)",
         "marginLeft": "var(--seed-dimension-x2)"
       }
     }

package/vars/component/page-banner.mjs

@@ -31,7 +31,6 @@ export const vars = {
       },
       "suffixIcon": {
         "size": "var(--seed-dimension-x4)",
-        "targetSize": "var(--seed-dimension-x10)",
         "marginLeft": "var(--seed-dimension-x2)"
       }
     }

package/vars/component/pagination-button.d.ts

@@ -0,0 +1,33 @@
+export declare const vars: {
+  "base": {
+    "enabled": {
+      "root": {
+        "color": "var(--seed-color-bg-transparent)",
+        "colorDuration": "var(--seed-duration-color-transition)",
+        "colorTimingFunction": "var(--seed-timing-function-easing)",
+        "scaleDuration": "var(--seed-duration-pressed-scale)",
+        "scaleTimingFunction": "var(--seed-timing-function-pressed-scale)",
+        "size": "var(--seed-dimension-x10)",
+        "cornerRadius": "var(--seed-radius-r2)"
+      },
+      "icon": {
+        "color": "var(--seed-color-fg-neutral)",
+        "size": "var(--seed-dimension-x4)"
+      }
+    },
+    "pressed": {
+      "root": {
+        "color": "var(--seed-color-bg-transparent-pressed)",
+        "scale": "var(--seed-scale-s97)"
+      }
+    },
+    "disabled": {
+      "root": {
+        "color": "var(--seed-color-bg-transparent)"
+      },
+      "icon": {
+        "color": "var(--seed-color-fg-disabled)"
+      }
+    }
+  }
+}

package/vars/component/pagination-button.mjs

@@ -0,0 +1,33 @@
+export const vars = {
+  "base": {
+    "enabled": {
+      "root": {
+        "color": "var(--seed-color-bg-transparent)",
+        "colorDuration": "var(--seed-duration-color-transition)",
+        "colorTimingFunction": "var(--seed-timing-function-easing)",
+        "scaleDuration": "var(--seed-duration-pressed-scale)",
+        "scaleTimingFunction": "var(--seed-timing-function-pressed-scale)",
+        "size": "var(--seed-dimension-x10)",
+        "cornerRadius": "var(--seed-radius-r2)"
+      },
+      "icon": {
+        "color": "var(--seed-color-fg-neutral)",
+        "size": "var(--seed-dimension-x4)"
+      }
+    },
+    "pressed": {
+      "root": {
+        "color": "var(--seed-color-bg-transparent-pressed)",
+        "scale": "var(--seed-scale-s97)"
+      }
+    },
+    "disabled": {
+      "root": {
+        "color": "var(--seed-color-bg-transparent)"
+      },
+      "icon": {
+        "color": "var(--seed-color-fg-disabled)"
+      }
+    }
+  }
+}