@seed-design/lynx-css 0.14.1 → 1.0.0

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

@@ -43,7 +43,7 @@ export const vars = {
   "tonePositiveVariantSolid": {
     "enabled": {
       "icon": {
-        "color": "var(--seed-color-palette-static-white)"
+        "color": "var(--seed-color-fg-on-positive-solid)"
       }
     }
   },
@@ -57,7 +57,7 @@ export const vars = {
   "toneInformativeVariantSolid": {
     "enabled": {
       "icon": {
-        "color": "var(--seed-color-palette-static-white)"
+        "color": "var(--seed-color-fg-on-informative-solid)"
       }
     }
   },
@@ -71,7 +71,7 @@ export const vars = {
   "toneWarningVariantSolid": {
     "enabled": {
       "icon": {
-        "color": "var(--seed-color-palette-static-black-alpha-900)"
+        "color": "var(--seed-color-fg-on-warning-solid)"
       }
     }
   },
@@ -85,7 +85,7 @@ export const vars = {
   "toneCriticalVariantSolid": {
     "enabled": {
       "icon": {
-        "color": "var(--seed-color-palette-static-white)"
+        "color": "var(--seed-color-fg-on-critical-solid)"
       }
     }
   },

package/vars/component/popover.d.ts

@@ -5,15 +5,15 @@ export declare const vars: {
         "color": "var(--seed-color-bg-layer-floating)",
         "cornerRadius": "var(--seed-radius-r5)",
         "shadow": "var(--seed-shadow-s3)",
-        /** viewport가 이보다 작으면 overflowPadding을 뺀 가용 너비로 축소됩니다. */
+        /** 가용 너비(overflowPadding 참고)가 이보다 작으면 가용 너비로 축소됩니다. */
         "minWidth": "320px",
-        /** viewport가 이보다 작으면 overflowPadding을 뺀 가용 너비로 축소됩니다. */
+        /** 가용 너비(overflowPadding 참고)가 이보다 작으면 가용 너비로 축소됩니다. */
         "maxWidth": "480px",
-        /** viewport가 이보다 작으면 overflowPadding과 safe-area를 뺀 가용 높이로 축소됩니다. */
+        /** 가용 높이(overflowPadding 참고)가 이보다 작으면 가용 높이로 축소됩니다. */
         "maxHeight": "600px",
         /** 트리거와 popover 사이의 간격을 정의합니다. */
         "gutter": "var(--seed-dimension-x2)",
-        /** popover와 뷰포트 경계 사이의 최소 간격을 정의합니다. 위아래에 safe-area가 있으면 그 안쪽으로 배치됩니다. */
+        /** popover와 안전 영역 경계 사이의 최소 간격을 정의합니다. popover는 화면 끝에서 inset + overflowPadding만큼 안쪽에 배치되며, 가용 너비와 높이도 같은 기준으로 계산합니다. */
         "overflowPadding": "var(--seed-dimension-x4)",
         "enterDuration": "var(--seed-duration-d3)",
         "enterTimingFunction": "var(--seed-timing-function-enter)",

package/vars/component/select.d.ts

@@ -17,8 +17,9 @@ export declare const vars: {
         "gap": "var(--seed-dimension-x2)",
         /** 트리거와 목록 사이의 간격을 정의합니다. */
         "gutter": "var(--seed-dimension-x2)",
-        /** 목록과 뷰포트 경계 사이의 최소 간격을 정의합니다. */
+        /** 목록과 안전 영역 경계 사이의 최소 간격을 정의합니다. 목록은 화면 끝에서 inset + overflowPadding만큼 안쪽에 배치되며, 가용 높이도 같은 기준으로 계산합니다. */
         "overflowPadding": "var(--seed-dimension-x2)",
+        /** 가용 높이(overflowPadding 참고)가 이보다 작으면 가용 높이로 축소됩니다. */
         "maxHeight": "480px"
       },
       "groupLabel": {

package/vars/component/side-panel.d.ts

@@ -10,10 +10,10 @@ export declare const vars: {
         "exitTimingFunction": "var(--seed-timing-function-exit)",
         "exitOpacity": "0"
       },
-      /** 하단 safe-area inset을 content의 하단 패딩으로 적용합니다. */
+      /** 하단 inset을 content의 하단 패딩으로 적용합니다. */
       "content": {
         "color": "var(--seed-color-bg-layer-floating)",
-        /** viewport 또는 parent width에 대한 mobile content width 비율입니다. */
+        /** 좌우 inset을 뺀 viewport width 또는 parent width에 대한 mobile content width 비율입니다. content의 최대 너비도 같은 기준 너비에 이 비율을 곱해 정합니다. */
         "widthFraction": "0.8",
         "enterDuration": "var(--seed-duration-d6)",
         "enterTimingFunction": "var(--seed-timing-function-enter-expressive)",
@@ -24,7 +24,7 @@ export declare const vars: {
         "gap": "var(--seed-dimension-x1_5)",
         "minHeight": "70px",
         "paddingX": "var(--seed-dimension-x6)",
-        /** 이 값은 상단 safe-area inset과 합산하여 적용합니다. */
+        /** 이 값은 상단 inset과 합산하여 적용합니다. */
         "paddingTop": "var(--seed-dimension-x6)",
         /** body의 하단 padding이며, 동시에 하단 scroll fog 그라데이션의 높이로도 사용됩니다. */
         "paddingBottom": "var(--seed-dimension-x4)",
@@ -40,7 +40,7 @@ export declare const vars: {
       },
       "footer": {
         "paddingX": "var(--seed-dimension-x6)",
-        /** 이 값은 상단 safe-area inset과 합산하여 적용합니다. */
+        /** 이 값은 상단 inset과 합산하여 적용합니다. */
         "paddingTop": "var(--seed-dimension-x4)",
         /** body의 하단 padding이며, 동시에 하단 scroll fog 그라데이션의 높이로도 사용됩니다. */
         "paddingBottom": "var(--seed-dimension-x6)"
@@ -72,24 +72,27 @@ export declare const vars: {
   },
   "sizeSmall": {
     "enabled": {
-      /** 하단 safe-area inset을 content의 하단 패딩으로 적용합니다. */
+      /** 하단 inset을 content의 하단 패딩으로 적용합니다. */
       "content": {
+        /** content 영역의 너비입니다. 패널은 붙는 쪽의 inset만큼 더 넓어지고, 늘어난 영역까지 배경으로 채워 화면 끝에 닿습니다. 소비자가 지정한 너비도 같은 방식으로 적용합니다. */
         "width": "480px"
       }
     }
   },
   "sizeMedium": {
     "enabled": {
-      /** 하단 safe-area inset을 content의 하단 패딩으로 적용합니다. */
+      /** 하단 inset을 content의 하단 패딩으로 적용합니다. */
       "content": {
+        /** content 영역의 너비입니다. 패널은 붙는 쪽의 inset만큼 더 넓어지고, 늘어난 영역까지 배경으로 채워 화면 끝에 닿습니다. 소비자가 지정한 너비도 같은 방식으로 적용합니다. */
         "width": "720px"
       }
     }
   },
   "sizeLarge": {
     "enabled": {
-      /** 하단 safe-area inset을 content의 하단 패딩으로 적용합니다. */
+      /** 하단 inset을 content의 하단 패딩으로 적용합니다. */
       "content": {
+        /** content 영역의 너비입니다. 패널은 붙는 쪽의 inset만큼 더 넓어지고, 늘어난 영역까지 배경으로 채워 화면 끝에 닿습니다. 소비자가 지정한 너비도 같은 방식으로 적용합니다. */
         "width": "960px"
       }
     }

package/vars/component/snackbar.d.ts

@@ -1,6 +1,7 @@
 export declare const vars: {
   "base": {
     "enabled": {
+      /** region은 좌우와 하단 안전 영역 경계 안쪽에 배치되므로, paddingX와 하단 쪽 paddingY는 안전 영역 경계부터 잽니다. */
       "region": {
         "paddingX": "var(--seed-dimension-x2)",
         "paddingY": "var(--seed-dimension-x2)",

package/recipes/input-button.d.ts

@@ -1,40 +0,0 @@
-declare interface InputButtonVariant {
-  /**
-  * @default "large"
-  */
-  size: "large" | "medium";
-/**
-  * @default false
-  */
-  pressed: boolean;
-/**
-  * @default false
-  */
-  invalid: boolean;
-/**
-  * @default false
-  */
-  disabled: boolean;
-/**
-  * @default false
-  */
-  readOnly: boolean;
-}
-
-declare type InputButtonVariantMap = {
-  [key in keyof InputButtonVariant]: Array<InputButtonVariant[key]>;
-};
-
-export declare type InputButtonVariantProps = Partial<InputButtonVariant>;
-
-export declare type InputButtonSlotName = "root" | "button" | "content" | "baseStroke" | "stroke" | "value" | "placeholder" | "prefixText" | "prefixIcon" | "suffixText" | "suffixIcon" | "clearButton";
-
-export declare const inputButtonVariantMap: InputButtonVariantMap;
-
-export declare const inputButton: ((
-  props?: InputButtonVariantProps,
-) => Record<InputButtonSlotName, string>) & {
-  splitVariantProps: <T extends InputButtonVariantProps>(
-    props: T,
-  ) => [InputButtonVariantProps, Omit<T, keyof InputButtonVariantProps>];
-}