@seed-design/css 1.2.2 → 1.2.4

package/vars/component/bottom-sheet.mjs

@@ -54,7 +54,7 @@ export const vars = {
   "headerAlignmentLeftCloseButtonTrue": {
     "enabled": {
       "title": {
-        "paddingRight": "50px",
+        "paddingRight": "56px",
         "paddingLeft": "var(--seed-dimension-spacing-x-global-gutter)"
       }
     }
@@ -70,8 +70,8 @@ export const vars = {
   "headerAlignmentCenterCloseButtonTrue": {
     "enabled": {
       "title": {
-        "paddingLeft": "60px",
-        "paddingRight": "60px"
+        "paddingLeft": "56px",
+        "paddingRight": "56px"
       }
     }
   },

package/vars/component/callout.d.ts

@@ -22,7 +22,7 @@ export declare const vars: {
         "lineHeight": "var(--seed-line-height-t4)",
         "fontWeight": "var(--seed-font-weight-regular)"
       },
-      /** Container가 모두 클릭 영역인 Actionable Callout에서는 표시를 권장하지 않습니다. */
+      /** root가 클릭 영역인 Actionable Callout에서는 표시를 권장하지 않습니다. */
       "link": {
         "fontSize": "var(--seed-font-size-t4)",
         "lineHeight": "var(--seed-line-height-t4)",
@@ -52,7 +52,7 @@ export declare const vars: {
       "description": {
         "color": "var(--seed-color-fg-neutral)"
       },
-      /** Container가 모두 클릭 영역인 Actionable Callout에서는 표시를 권장하지 않습니다. */
+      /** root가 클릭 영역인 Actionable Callout에서는 표시를 권장하지 않습니다. */
       "link": {
         "color": "var(--seed-color-fg-neutral)"
       },
@@ -84,7 +84,7 @@ export declare const vars: {
       "description": {
         "color": "var(--seed-color-fg-informative-contrast)"
       },
-      /** Container가 모두 클릭 영역인 Actionable Callout에서는 표시를 권장하지 않습니다. */
+      /** root가 클릭 영역인 Actionable Callout에서는 표시를 권장하지 않습니다. */
       "link": {
         "color": "var(--seed-color-fg-informative-contrast)"
       },
@@ -116,7 +116,7 @@ export declare const vars: {
       "description": {
         "color": "var(--seed-color-fg-positive-contrast)"
       },
-      /** Container가 모두 클릭 영역인 Actionable Callout에서는 표시를 권장하지 않습니다. */
+      /** root가 클릭 영역인 Actionable Callout에서는 표시를 권장하지 않습니다. */
       "link": {
         "color": "var(--seed-color-fg-positive-contrast)"
       },
@@ -148,7 +148,7 @@ export declare const vars: {
       "description": {
         "color": "var(--seed-color-fg-warning-contrast)"
       },
-      /** Container가 모두 클릭 영역인 Actionable Callout에서는 표시를 권장하지 않습니다. */
+      /** root가 클릭 영역인 Actionable Callout에서는 표시를 권장하지 않습니다. */
       "link": {
         "color": "var(--seed-color-fg-warning-contrast)"
       },
@@ -180,7 +180,7 @@ export declare const vars: {
       "description": {
         "color": "var(--seed-color-fg-critical-contrast)"
       },
-      /** Container가 모두 클릭 영역인 Actionable Callout에서는 표시를 권장하지 않습니다. */
+      /** root가 클릭 영역인 Actionable Callout에서는 표시를 권장하지 않습니다. */
       "link": {
         "color": "var(--seed-color-fg-critical-contrast)"
       },
@@ -212,7 +212,7 @@ export declare const vars: {
       "description": {
         "color": "var(--seed-color-fg-neutral)"
       },
-      /** Container가 모두 클릭 영역인 Actionable Callout에서는 표시를 권장하지 않습니다. */
+      /** root가 클릭 영역인 Actionable Callout에서는 표시를 권장하지 않습니다. */
       "link": {
         "color": "var(--seed-color-fg-neutral)"
       },

package/vars/component/chip-tab.d.ts

@@ -79,7 +79,8 @@ export declare const vars: {
     "enabled": {
       "root": {
         "color": "var(--seed-color-bg-transparent)",
-        "stroke": "var(--seed-color-stroke-neutral-muted)"
+        "strokeColor": "var(--seed-color-stroke-neutral-muted)",
+        "strokeWidth": "1px"
       },
       "label": {
         "color": "var(--seed-color-fg-neutral)"

package/vars/component/chip-tab.mjs

@@ -79,7 +79,8 @@ export const vars = {
     "enabled": {
       "root": {
         "color": "var(--seed-color-bg-transparent)",
-        "stroke": "var(--seed-color-stroke-neutral-muted)"
+        "strokeColor": "var(--seed-color-stroke-neutral-muted)",
+        "strokeWidth": "1px"
       },
       "label": {
         "color": "var(--seed-color-fg-neutral)"

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

@@ -108,7 +108,7 @@ export declare const vars: {
     }
   },
   /**
-   * 라벨과 아이콘을 함께 표시합니다.
+   * label과 prefixIcon을 함께 표시합니다.
    */
   "layoutWithText": {
     "enabled": {
@@ -129,7 +129,7 @@ export declare const vars: {
     }
   },
   /**
-   * 아이콘만 표시합니다. 접근성을 위해 aria-label을 제공해야 합니다.
+   * icon만 표시합니다. 아이콘만으로 의미를 전달하기 때문에 접근성 레이블과 함께 사용해야 합니다.
    */
   "layoutIconOnly": {
     "enabled": {

package/vars/component/identity-placeholder.d.ts

@@ -2,10 +2,10 @@ export declare const vars: {
   "base": {
     "enabled": {
       "root": {
-        "color": "var(--seed-color-palette-gray-400)"
+        "color": "var(--seed-color-palette-gray-500)"
       },
       "image": {
-        "color": "#f7f8fa"
+        "color": "var(--seed-color-palette-static-white-alpha-800)"
       }
     }
   }

package/vars/component/identity-placeholder.mjs

@@ -2,10 +2,10 @@ export const vars = {
   "base": {
     "enabled": {
       "root": {
-        "color": "var(--seed-color-palette-gray-400)"
+        "color": "var(--seed-color-palette-gray-500)"
       },
       "image": {
-        "color": "#f7f8fa"
+        "color": "var(--seed-color-palette-static-white-alpha-800)"
       }
     }
   }

package/vars/component/image-frame-floater.d.ts

@@ -2,7 +2,7 @@ export declare const vars: {
   "base": {
     "enabled": {
       "root": {
-        /** 오버레이가 이미지 프레임 가장자리에서 떨어진 거리입니다. */
+        /** image-frame root slot의 padding property로 대체되었습니다. */
         "offset": "6px"
       }
     }

package/vars/component/image-frame.d.ts

@@ -1,4 +1,12 @@
 export declare const vars: {
+  "base": {
+    "enabled": {
+      "root": {
+        /** 내부에 오버레이 요소가 존재하는 경우 이미지 모서리와 오버레이 요소 사이의 간격입니다. 이 값은 기본값이며 변경할 수 있습니다. */
+        "padding": "var(--seed-dimension-x1_5)"
+      }
+    }
+  },
   /**
    * 이미지 테두리에 스트로크를 표시합니다.
    */
@@ -15,14 +23,7 @@ export declare const vars: {
   /**
    * 테두리를 표시하지 않습니다.
    */
-  "strokeFalse": {
-    "enabled": {
-      "root": {
-        /** stroke 옵션 사용 시 적용되는 테두리 두께입니다. */
-        "strokeWidth": "0px"
-      }
-    }
-  },
+  "strokeFalse": {},
   /**
    * 모서리를 둥글게 처리합니다.
 @deprecated `rounded` 옵션은 @seed-design/react@1.3.0에서 제거될 예정입니다. `borderRadius="r2"`를 사용하세요.
@@ -32,7 +33,7 @@ Reason: 모서리 스타일은 `borderRadius` prop으로 통일합니다.
   "roundedTrue": {
     "enabled": {
       "root": {
-        /** rounded 옵션 사용 시 적용되는 모서리 반경입니다. */
+        /** 이 값은 기본값이며 변경할 수 있습니다. */
         "cornerRadius": "var(--seed-radius-r2)"
       }
     }
@@ -43,12 +44,5 @@ Reason: 모서리 스타일은 `borderRadius` prop으로 통일합니다.
 Reason: 모서리 스타일은 `borderRadius` prop으로 통일합니다.
 
    */
-  "roundedFalse": {
-    "enabled": {
-      "root": {
-        /** rounded 옵션 사용 시 적용되는 모서리 반경입니다. */
-        "cornerRadius": "0px"
-      }
-    }
-  }
+  "roundedFalse": {}
 }

package/vars/component/image-frame.mjs

@@ -1,19 +1,20 @@
 export const vars = {
-  "strokeTrue": {
+  "base": {
     "enabled": {
       "root": {
-        "strokeColor": "var(--seed-color-stroke-neutral-subtle)",
-        "strokeWidth": "1px"
+        "padding": "var(--seed-dimension-x1_5)"
       }
     }
   },
-  "strokeFalse": {
+  "strokeTrue": {
     "enabled": {
       "root": {
-        "strokeWidth": "0px"
+        "strokeColor": "var(--seed-color-stroke-neutral-subtle)",
+        "strokeWidth": "1px"
       }
     }
   },
+  "strokeFalse": {},
   "roundedTrue": {
     "enabled": {
       "root": {
@@ -21,11 +22,5 @@ export const vars = {
       }
     }
   },
-  "roundedFalse": {
-    "enabled": {
-      "root": {
-        "cornerRadius": "0px"
-      }
-    }
-  }
+  "roundedFalse": {}
 }

package/vars/component/index.d.ts

@@ -52,6 +52,7 @@ export { vars as radio } from "./radio";
 export { vars as radiomark } from "./radiomark";
 export { vars as reactionButton } from "./reaction-button";
 export { vars as scrollFog } from "./scroll-fog";
+export { vars as segmentedControlIndicator } from "./segmented-control-indicator";
 export { vars as segmentedControlItem } from "./segmented-control-item";
 export { vars as segmentedControl } from "./segmented-control";
 export { vars as selectBoxCheckmark } from "./select-box-checkmark";

package/vars/component/index.mjs

@@ -52,6 +52,7 @@ export { vars as radio } from "./radio.mjs";
 export { vars as radiomark } from "./radiomark.mjs";
 export { vars as reactionButton } from "./reaction-button.mjs";
 export { vars as scrollFog } from "./scroll-fog.mjs";
+export { vars as segmentedControlIndicator } from "./segmented-control-indicator.mjs";
 export { vars as segmentedControlItem } from "./segmented-control-item.mjs";
 export { vars as segmentedControl } from "./segmented-control.mjs";
 export { vars as selectBoxCheckmark } from "./select-box-checkmark.mjs";

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

@@ -11,7 +11,7 @@ export declare const vars: {
         "color": "var(--seed-color-bg-transparent)",
         "colorDuration": "var(--seed-duration-color-transition)",
         "colorTimingFunction": "var(--seed-timing-function-easing)",
-        /** 1px stroke 위에 2px stroke가 fade in/out 되는 데에 걸리는 시간입니다. stroke 두께나 색상 자체를 transition하지 않습니다. */
+        /** enabled 상태의 stroke 위에 invalid 상태의 stroke가 fade in/out 되는 데에 걸리는 시간입니다. stroke 두께나 색상 자체를 transition하지 않습니다. */
         "strokeDuration": "0.1s",
         "strokeTimingFunction": "var(--seed-timing-function-easing)"
       },

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

@@ -20,7 +20,7 @@ export declare const vars: {
         "color": "var(--seed-color-fg-neutral)",
         "fontSize": "var(--seed-font-size-t5)",
         "lineHeight": "var(--seed-line-height-t5)",
-        "fontWeight": "var(--seed-font-weight-medium)"
+        "fontWeight": "var(--seed-font-weight-regular)"
       },
       "detail": {
         "color": "var(--seed-color-fg-neutral-subtle)",

package/vars/component/list-item.mjs

@@ -20,7 +20,7 @@ export const vars = {
         "color": "var(--seed-color-fg-neutral)",
         "fontSize": "var(--seed-font-size-t5)",
         "lineHeight": "var(--seed-line-height-t5)",
-        "fontWeight": "var(--seed-font-weight-medium)"
+        "fontWeight": "var(--seed-font-weight-regular)"
       },
       "detail": {
         "color": "var(--seed-color-fg-neutral-subtle)",

package/vars/component/segmented-control-indicator.d.ts

@@ -0,0 +1,24 @@
+export declare const vars: {
+  "base": {
+    "enabled": {
+      "root": {
+        "color": "var(--seed-color-palette-gray-00)",
+        "strokeColor": "var(--seed-color-stroke-neutral-muted)",
+        "strokeWidth": "1px",
+        "cornerRadius": "var(--seed-radius-full)",
+        "transformDuration": "var(--seed-duration-d4)",
+        "transformTimingFunction": "var(--seed-timing-function-easing)"
+      }
+    },
+    "pressed": {
+      "root": {
+        "color": "var(--seed-color-palette-gray-100)"
+      }
+    },
+    "disabled": {
+      "root": {
+        "color": "var(--seed-color-bg-disabled)"
+      }
+    }
+  }
+}

package/vars/component/segmented-control-indicator.mjs

@@ -0,0 +1,24 @@
+export const vars = {
+  "base": {
+    "enabled": {
+      "root": {
+        "color": "var(--seed-color-palette-gray-00)",
+        "strokeColor": "var(--seed-color-stroke-neutral-muted)",
+        "strokeWidth": "1px",
+        "cornerRadius": "var(--seed-radius-full)",
+        "transformDuration": "var(--seed-duration-d4)",
+        "transformTimingFunction": "var(--seed-timing-function-easing)"
+      }
+    },
+    "pressed": {
+      "root": {
+        "color": "var(--seed-color-palette-gray-100)"
+      }
+    },
+    "disabled": {
+      "root": {
+        "color": "var(--seed-color-bg-disabled)"
+      }
+    }
+  }
+}

package/vars/component/segmented-control-item.d.ts

@@ -22,7 +22,9 @@ export declare const vars: {
     },
     "pressed": {
       "root": {
-        "color": "var(--seed-color-bg-neutral-weak-pressed)"
+        "color": "var(--seed-color-bg-neutral-weak-pressed)",
+        "strokeWidth": "1px",
+        "strokeColor": "var(--seed-color-stroke-neutral-muted)"
       }
     },
     "selected": {
@@ -30,20 +32,10 @@ export declare const vars: {
         "color": "var(--seed-color-fg-neutral)"
       }
     },
-    "selectedPressed": {
-      "root": {
-        "color": "var(--seed-color-palette-gray-100)"
-      }
-    },
     "disabled": {
       "label": {
         "color": "var(--seed-color-fg-disabled)"
       }
-    },
-    "disabledSelected": {
-      "root": {
-        "color": "var(--seed-color-bg-disabled)"
-      }
     }
   }
 }

package/vars/component/segmented-control-item.mjs

@@ -22,7 +22,9 @@ export const vars = {
     },
     "pressed": {
       "root": {
-        "color": "var(--seed-color-bg-neutral-weak-pressed)"
+        "color": "var(--seed-color-bg-neutral-weak-pressed)",
+        "strokeWidth": "1px",
+        "strokeColor": "var(--seed-color-stroke-neutral-muted)"
       }
     },
     "selected": {
@@ -30,20 +32,10 @@ export const vars = {
         "color": "var(--seed-color-fg-neutral)"
       }
     },
-    "selectedPressed": {
-      "root": {
-        "color": "var(--seed-color-palette-gray-100)"
-      }
-    },
     "disabled": {
       "label": {
         "color": "var(--seed-color-fg-disabled)"
       }
-    },
-    "disabledSelected": {
-      "root": {
-        "color": "var(--seed-color-bg-disabled)"
-      }
     }
   }
 }

package/vars/component/segmented-control.d.ts

@@ -5,14 +5,6 @@ export declare const vars: {
         "padding": "var(--seed-dimension-x1)",
         "cornerRadius": "var(--seed-radius-full)",
         "color": "var(--seed-color-bg-neutral-weak-alpha)"
-      },
-      "indicator": {
-        "color": "var(--seed-color-palette-gray-00)",
-        "cornerRadius": "var(--seed-radius-full)",
-        "strokeWidth": "1px",
-        "strokeColor": "var(--seed-color-stroke-neutral-muted)",
-        "transformDuration": "var(--seed-duration-d4)",
-        "transformTimingFunction": "var(--seed-timing-function-easing)"
       }
     }
   }

package/vars/component/segmented-control.mjs

@@ -5,14 +5,6 @@ export const vars = {
         "padding": "var(--seed-dimension-x1)",
         "cornerRadius": "var(--seed-radius-full)",
         "color": "var(--seed-color-bg-neutral-weak-alpha)"
-      },
-      "indicator": {
-        "color": "var(--seed-color-palette-gray-00)",
-        "cornerRadius": "var(--seed-radius-full)",
-        "strokeWidth": "1px",
-        "strokeColor": "var(--seed-color-stroke-neutral-muted)",
-        "transformDuration": "var(--seed-duration-d4)",
-        "transformTimingFunction": "var(--seed-timing-function-easing)"
       }
     }
   }

package/vars/component/select-box.d.ts

@@ -8,7 +8,7 @@ export declare const vars: {
         "strokeWidth": "1px",
         "colorDuration": "var(--seed-duration-color-transition)",
         "colorTimingFunction": "var(--seed-timing-function-easing)",
-        /** 1px stroke 위에 2px stroke가 fade in/out 되는 데에 걸리는 시간입니다. stroke 두께나 색상 자체를 transition하지 않습니다. */
+        /** enabled 상태의 stroke 위에 selected 상태의 stroke가 fade in/out 되는 데에 걸리는 시간입니다. stroke 두께나 색상 자체를 transition하지 않습니다. */
         "strokeDuration": "0.1s",
         "strokeTimingFunction": "var(--seed-timing-function-easing)"
       },

package/vars/component/slider.d.ts

@@ -23,11 +23,13 @@ export declare const vars: {
         "cornerRadius": "var(--seed-radius-full)",
         "color": "var(--seed-color-bg-neutral-inverted)"
       },
+      /** arrow width + (valueIndicatorRoot paddingX * 2)만큼의 최소 너비를 가집니다. */
       "valueIndicatorRoot": {
         "color": "var(--seed-color-bg-neutral-inverted)",
-        "cornerRadius": "var(--seed-radius-r1)",
-        "paddingX": "var(--seed-dimension-x1_5)",
-        "paddingY": "var(--seed-dimension-x0_5)",
+        "cornerRadius": "var(--seed-radius-r1_5)",
+        /** value indicator 내부 좌우 여백입니다. arrow와 valueIndicatorRoot 경계 사이의 최소 간격에도 동일한 값이 적용됩니다. */
+        "paddingX": "var(--seed-dimension-x2)",
+        "paddingY": "var(--seed-dimension-x1)",
         "offsetY": "var(--seed-dimension-x3)",
         "enterScale": "0.9",
         "enterOpacity": "0",
@@ -36,20 +38,22 @@ 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)",
+        "translateDuration": "var(--seed-duration-d3)",
+        "translateTimingFunction": "var(--seed-timing-function-easing)"
       },
       "valueIndicatorArrow": {
         "color": "var(--seed-color-bg-neutral-inverted)",
-        "width": "var(--seed-dimension-x2_5)",
-        "height": "7px",
+        "width": "var(--seed-dimension-x2)",
+        "height": "var(--seed-dimension-x1_5)",
         "cornerRadius": "var(--seed-radius-r0_5)",
-        "gutter": "var(--seed-dimension-x0_5)",
-        "padding": "var(--seed-dimension-x0_5)"
+        /** arrow와 thumb 사이의 거리를 정의합니다. */
+        "gutter": "var(--seed-dimension-x0_5)"
       },
       "valueIndicatorLabel": {
         "color": "var(--seed-color-fg-neutral-inverted)",
-        "fontSize": "var(--seed-font-size-t1)",
-        "lineHeight": "var(--seed-line-height-t1)",
+        "fontSize": "var(--seed-font-size-t3)",
+        "lineHeight": "var(--seed-line-height-t3)",
         "fontWeight": "var(--seed-font-weight-medium)"
       },
       "marker": {

package/vars/component/slider.mjs

@@ -25,9 +25,9 @@ export const vars = {
       },
       "valueIndicatorRoot": {
         "color": "var(--seed-color-bg-neutral-inverted)",
-        "cornerRadius": "var(--seed-radius-r1)",
-        "paddingX": "var(--seed-dimension-x1_5)",
-        "paddingY": "var(--seed-dimension-x0_5)",
+        "cornerRadius": "var(--seed-radius-r1_5)",
+        "paddingX": "var(--seed-dimension-x2)",
+        "paddingY": "var(--seed-dimension-x1)",
         "offsetY": "var(--seed-dimension-x3)",
         "enterScale": "0.9",
         "enterOpacity": "0",
@@ -36,20 +36,21 @@ export const vars = {
         "exitScale": "1",
         "exitOpacity": "0",
         "exitDuration": "var(--seed-duration-d4)",
-        "exitTimingFunction": "var(--seed-timing-function-easing)"
+        "exitTimingFunction": "var(--seed-timing-function-easing)",
+        "translateDuration": "var(--seed-duration-d3)",
+        "translateTimingFunction": "var(--seed-timing-function-easing)"
       },
       "valueIndicatorArrow": {
         "color": "var(--seed-color-bg-neutral-inverted)",
-        "width": "var(--seed-dimension-x2_5)",
-        "height": "7px",
+        "width": "var(--seed-dimension-x2)",
+        "height": "var(--seed-dimension-x1_5)",
         "cornerRadius": "var(--seed-radius-r0_5)",
-        "gutter": "var(--seed-dimension-x0_5)",
-        "padding": "var(--seed-dimension-x0_5)"
+        "gutter": "var(--seed-dimension-x0_5)"
       },
       "valueIndicatorLabel": {
         "color": "var(--seed-color-fg-neutral-inverted)",
-        "fontSize": "var(--seed-font-size-t1)",
-        "lineHeight": "var(--seed-line-height-t1)",
+        "fontSize": "var(--seed-font-size-t3)",
+        "lineHeight": "var(--seed-line-height-t3)",
         "fontWeight": "var(--seed-font-weight-medium)"
       },
       "marker": {

package/vars/component/text-input.d.ts

@@ -3,7 +3,7 @@ export declare const vars: {
     "enabled": {
       "root": {
         "strokeColor": "var(--seed-color-stroke-neutral-weak)",
-        /** 1px stroke 위에 2px stroke가 fade in/out 되는 데에 걸리는 시간입니다. stroke 두께나 색상 자체를 transition하지 않습니다. */
+        /** enabled 상태의 stroke 위에 focused/invalid 상태의 stroke가 fade in/out 되는 데에 걸리는 시간입니다. stroke 두께나 색상 자체를 transition하지 않습니다. */
         "strokeDuration": "0.1s",
         "strokeTimingFunction": "var(--seed-timing-function-easing)"
       },