@seed-design/css 1.1.17 → 1.2.0

package/vars/component/image-frame-indicator.mjs

@@ -0,0 +1,18 @@
+export const vars = {
+  "base": {
+    "enabled": {
+      "root": {
+        "color": "var(--seed-color-palette-static-black-alpha-800)",
+        "cornerRadius": "var(--seed-radius-full)",
+        "paddingX": "var(--seed-dimension-x1_5)",
+        "paddingY": "var(--seed-dimension-x0_5)"
+      },
+      "label": {
+        "color": "var(--seed-color-palette-static-white)",
+        "fontSize": "var(--seed-font-size-t1)",
+        "lineHeight": "var(--seed-line-height-t1)",
+        "fontWeight": "var(--seed-font-weight-medium)"
+      }
+    }
+  }
+}

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

@@ -0,0 +1,30 @@
+export declare const vars: {
+  "base": {
+    "enabled": {
+      /** 하트 아이콘 토글 버튼입니다. 이미지 위에서 좋아요 기능에 사용됩니다. */
+      "root": {
+        /** 버튼 배경색입니다. */
+        "color": "var(--seed-color-palette-static-black-alpha-200)",
+        "cornerRadius": "var(--seed-radius-full)",
+        /** 보이는 버튼 크기입니다. */
+        "size": "var(--seed-dimension-x6)",
+        /** 터치 영역 크기입니다. */
+        "targetSize": "var(--seed-dimension-x10)"
+      },
+      /** 하트 아이콘입니다. 기본 상태에서는 IconHeartLine, 선택 상태에서는 IconHeartFill을 사용합니다. */
+      "icon": {
+        /** 버튼 배경색입니다. */
+        "color": "var(--seed-color-fg-neutral-inverted)",
+        /** 보이는 버튼 크기입니다. */
+        "size": "var(--seed-dimension-x6)"
+      }
+    },
+    "selected": {
+      /** 하트 아이콘입니다. 기본 상태에서는 IconHeartLine, 선택 상태에서는 IconHeartFill을 사용합니다. */
+      "icon": {
+        /** 버튼 배경색입니다. */
+        "color": "var(--seed-color-fg-brand)"
+      }
+    }
+  }
+}

package/vars/component/image-frame-reaction-button.mjs

@@ -0,0 +1,21 @@
+export const vars = {
+  "base": {
+    "enabled": {
+      "root": {
+        "color": "var(--seed-color-palette-static-black-alpha-200)",
+        "cornerRadius": "var(--seed-radius-full)",
+        "size": "var(--seed-dimension-x6)",
+        "targetSize": "var(--seed-dimension-x10)"
+      },
+      "icon": {
+        "color": "var(--seed-color-fg-neutral-inverted)",
+        "size": "var(--seed-dimension-x6)"
+      }
+    },
+    "selected": {
+      "icon": {
+        "color": "var(--seed-color-fg-brand)"
+      }
+    }
+  }
+}

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

@@ -0,0 +1,48 @@
+export declare const vars: {
+  /**
+   * 모서리에 라운드 스타일을 적용합니다.
+   */
+  "roundedTrue": {
+    "enabled": {
+      "root": {
+        /** rounded 옵션 사용 시 적용되는 모서리 반경입니다. */
+        "cornerRadius": "var(--seed-radius-r2)"
+      }
+    }
+  },
+  /**
+   * 모서리를 직각으로 유지합니다.
+   */
+  "roundedFalse": {
+    "enabled": {
+      "root": {
+        /** rounded 옵션 사용 시 적용되는 모서리 반경입니다. */
+        "cornerRadius": "0px"
+      }
+    }
+  },
+  /**
+   * 이미지 테두리에 스트로크를 표시합니다.
+   */
+  "strokeTrue": {
+    "enabled": {
+      "root": {
+        /** stroke 옵션 사용 시 적용되는 테두리 색상입니다. */
+        "strokeColor": "var(--seed-color-stroke-neutral-subtle)",
+        /** stroke 옵션 사용 시 적용되는 테두리 두께입니다. */
+        "strokeWidth": "1px"
+      }
+    }
+  },
+  /**
+   * 테두리를 표시하지 않습니다.
+   */
+  "strokeFalse": {
+    "enabled": {
+      "root": {
+        /** stroke 옵션 사용 시 적용되는 테두리 두께입니다. */
+        "strokeWidth": "0px"
+      }
+    }
+  }
+}

package/vars/component/image-frame.mjs

@@ -0,0 +1,31 @@
+export const vars = {
+  "roundedTrue": {
+    "enabled": {
+      "root": {
+        "cornerRadius": "var(--seed-radius-r2)"
+      }
+    }
+  },
+  "roundedFalse": {
+    "enabled": {
+      "root": {
+        "cornerRadius": "0px"
+      }
+    }
+  },
+  "strokeTrue": {
+    "enabled": {
+      "root": {
+        "strokeColor": "var(--seed-color-stroke-neutral-subtle)",
+        "strokeWidth": "1px"
+      }
+    }
+  },
+  "strokeFalse": {
+    "enabled": {
+      "root": {
+        "strokeWidth": "0px"
+      }
+    }
+  }
+}

package/vars/component/index.d.ts

@@ -10,6 +10,7 @@ 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 callout } from "./callout";
+export { vars as checkboxGroup } from "./checkbox-group";
 export { vars as checkbox } from "./checkbox";
 export { vars as checkmark } from "./checkmark";
 export { vars as chipTab } from "./chip-tab";
@@ -29,6 +30,10 @@ export { vars as field } from "./field";
 export { vars as floatingActionButton } from "./floating-action-button";
 export { vars as helpBubble } from "./help-bubble";
 export { vars as identityPlaceholder } from "./identity-placeholder";
+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";
@@ -42,20 +47,23 @@ export { vars as menuSheet } from "./menu-sheet";
 export { vars as notificationBadge } from "./notification-badge";
 export { vars as pageBanner } from "./page-banner";
 export { vars as progressCircle } from "./progress-circle";
+export { vars as radioGroup } from "./radio-group";
 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 segmentedControlItem } from "./segmented-control-item";
 export { vars as segmentedControl } from "./segmented-control";
+export { vars as selectBoxCheckmark } from "./select-box-checkmark";
+export { vars as selectBoxGroup } from "./select-box-group";
 export { vars as selectBox } from "./select-box";
 export { vars as skeleton } from "./skeleton";
 export { vars as sliderThumb } from "./slider-thumb";
 export { vars as sliderTick } from "./slider-tick";
 export { vars as slider } from "./slider";
 export { vars as snackbar } from "./snackbar";
-export { vars as switchMark } from "./switch-mark";
 export { vars as switch } from "./switch";
+export { vars as switchmark } from "./switchmark";
 export { vars as tab } from "./tab";
 export { vars as tablist } from "./tablist";
 export { vars as tagGroupItem } from "./tag-group-item";

package/vars/component/index.mjs

@@ -10,6 +10,7 @@ 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 callout } from "./callout.mjs";
+export { vars as checkboxGroup } from "./checkbox-group.mjs";
 export { vars as checkbox } from "./checkbox.mjs";
 export { vars as checkmark } from "./checkmark.mjs";
 export { vars as chipTab } from "./chip-tab.mjs";
@@ -29,6 +30,10 @@ export { vars as field } from "./field.mjs";
 export { vars as floatingActionButton } from "./floating-action-button.mjs";
 export { vars as helpBubble } from "./help-bubble.mjs";
 export { vars as identityPlaceholder } from "./identity-placeholder.mjs";
+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";
@@ -42,20 +47,23 @@ export { vars as menuSheet } from "./menu-sheet.mjs";
 export { vars as notificationBadge } from "./notification-badge.mjs";
 export { vars as pageBanner } from "./page-banner.mjs";
 export { vars as progressCircle } from "./progress-circle.mjs";
+export { vars as radioGroup } from "./radio-group.mjs";
 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 segmentedControlItem } from "./segmented-control-item.mjs";
 export { vars as segmentedControl } from "./segmented-control.mjs";
+export { vars as selectBoxCheckmark } from "./select-box-checkmark.mjs";
+export { vars as selectBoxGroup } from "./select-box-group.mjs";
 export { vars as selectBox } from "./select-box.mjs";
 export { vars as skeleton } from "./skeleton.mjs";
 export { vars as sliderThumb } from "./slider-thumb.mjs";
 export { vars as sliderTick } from "./slider-tick.mjs";
 export { vars as slider } from "./slider.mjs";
 export { vars as snackbar } from "./snackbar.mjs";
-export { vars as switchMark } from "./switch-mark.mjs";
 export { vars as switch } from "./switch.mjs";
+export { vars as switchmark } from "./switchmark.mjs";
 export { vars as tab } from "./tab.mjs";
 export { vars as tablist } from "./tablist.mjs";
 export { vars as tagGroupItem } from "./tag-group-item.mjs";

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

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

package/vars/component/input-button.mjs

@@ -11,10 +11,8 @@ export const vars = {
         "color": "var(--seed-color-bg-transparent)",
         "colorDuration": "var(--seed-duration-color-transition)",
         "colorTimingFunction": "var(--seed-timing-function-easing)",
-        "strokeColorDuration": "var(--seed-duration-color-transition)",
-        "strokeColorTimingFunction": "var(--seed-timing-function-easing)",
-        "strokeWidthDuration": "var(--seed-duration-color-transition)",
-        "strokeWidthTimingFunction": "var(--seed-timing-function-easing)"
+        "strokeDuration": "0.1s",
+        "strokeTimingFunction": "var(--seed-timing-function-easing)"
       },
       "value": {
         "fontSize": "var(--seed-font-size-t5)",

package/vars/component/radio-group.d.ts

@@ -0,0 +1,9 @@
+export declare const vars: {
+  "base": {
+    "enabled": {
+      "root": {
+        "gapY": "var(--seed-dimension-x1)"
+      }
+    }
+  }
+}

package/vars/component/radio-group.mjs

@@ -0,0 +1,9 @@
+export const vars = {
+  "base": {
+    "enabled": {
+      "root": {
+        "gapY": "var(--seed-dimension-x1)"
+      }
+    }
+  }
+}

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

@@ -0,0 +1,40 @@
+export declare const vars: {
+  "base": {
+    "enabled": {
+      "root": {
+        "size": "var(--seed-dimension-x5)"
+      },
+      "icon": {
+        "size": "15px",
+        "color": "var(--seed-color-fg-placeholder)",
+        "colorDuration": "var(--seed-duration-color-transition)",
+        "colorTimingFunction": "var(--seed-timing-function-easing)"
+      }
+    },
+    "pressed": {
+      "icon": {
+        "color": "var(--seed-color-fg-neutral-subtle)"
+      }
+    },
+    "enabledSelected": {
+      "icon": {
+        "color": "var(--seed-color-fg-neutral)"
+      }
+    },
+    "enabledSelectedPressed": {
+      "icon": {
+        "color": "var(--seed-color-fg-neutral)"
+      }
+    },
+    "disabled": {
+      "icon": {
+        "color": "var(--seed-color-fg-disabled)"
+      }
+    },
+    "disabledSelected": {
+      "icon": {
+        "color": "var(--seed-color-fg-disabled)"
+      }
+    }
+  }
+}

package/vars/component/select-box-checkmark.mjs

@@ -0,0 +1,40 @@
+export const vars = {
+  "base": {
+    "enabled": {
+      "root": {
+        "size": "var(--seed-dimension-x5)"
+      },
+      "icon": {
+        "size": "15px",
+        "color": "var(--seed-color-fg-placeholder)",
+        "colorDuration": "var(--seed-duration-color-transition)",
+        "colorTimingFunction": "var(--seed-timing-function-easing)"
+      }
+    },
+    "pressed": {
+      "icon": {
+        "color": "var(--seed-color-fg-neutral-subtle)"
+      }
+    },
+    "enabledSelected": {
+      "icon": {
+        "color": "var(--seed-color-fg-neutral)"
+      }
+    },
+    "enabledSelectedPressed": {
+      "icon": {
+        "color": "var(--seed-color-fg-neutral)"
+      }
+    },
+    "disabled": {
+      "icon": {
+        "color": "var(--seed-color-fg-disabled)"
+      }
+    },
+    "disabledSelected": {
+      "icon": {
+        "color": "var(--seed-color-fg-disabled)"
+      }
+    }
+  }
+}

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

@@ -0,0 +1,10 @@
+export declare const vars: {
+  "base": {
+    "enabled": {
+      "root": {
+        "gapX": "var(--seed-dimension-x3)",
+        "gapY": "var(--seed-dimension-spacing-y-component-default)"
+      }
+    }
+  }
+}

package/vars/component/select-box-group.mjs

@@ -0,0 +1,10 @@
+export const vars = {
+  "base": {
+    "enabled": {
+      "root": {
+        "gapX": "var(--seed-dimension-x3)",
+        "gapY": "var(--seed-dimension-spacing-y-component-default)"
+      }
+    }
+  }
+}

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

@@ -2,46 +2,105 @@ export declare const vars: {
   "base": {
     "enabled": {
       "root": {
-        "colorTransitionDuration": "var(--seed-duration-color-transition)",
-        "colorTransitionTimingFunction": "var(--seed-timing-function-easing)",
-        "paddingX": "var(--seed-dimension-x4)",
-        "paddingY": "var(--seed-dimension-x5)",
-        "gap": "var(--seed-dimension-x2_5)",
-        "strokeWidth": "1px",
-        "strokeColor": "var(--seed-color-stroke-neutral-muted)",
         "cornerRadius": "var(--seed-radius-r3)",
-        "color": "var(--seed-color-bg-transparent)"
+        "color": "var(--seed-color-bg-transparent)",
+        "strokeColor": "var(--seed-color-stroke-neutral-muted)",
+        "strokeWidth": "1px",
+        "colorDuration": "var(--seed-duration-color-transition)",
+        "colorTimingFunction": "var(--seed-timing-function-easing)",
+        /** 1px stroke 위에 2px stroke가 fade in/out 되는 데에 걸리는 시간입니다. stroke 두께나 색상 자체를 transition하지 않습니다. */
+        "strokeDuration": "0.1s",
+        "strokeTimingFunction": "var(--seed-timing-function-easing)"
       },
-      "content": {
-        "gap": "var(--seed-dimension-x0_5)"
+      "trigger": {
+        "gap": "var(--seed-dimension-x1_5)"
+      },
+      "prefixIcon": {
+        "color": "var(--seed-color-fg-neutral)",
+        "size": "22px"
+      },
+      "body": {
+        "gap": "var(--seed-dimension-x0_5)",
+        "paddingRight": "var(--seed-dimension-x1)"
       },
       "label": {
+        "gap": "var(--seed-dimension-x1)",
         "color": "var(--seed-color-fg-neutral)",
-        "fontWeight": "var(--seed-font-weight-bold)",
         "fontSize": "var(--seed-font-size-t5)",
-        "lineHeight": "var(--seed-line-height-t5)"
+        "lineHeight": "var(--seed-line-height-t5)",
+        "fontWeight": "var(--seed-font-weight-medium)"
       },
       "description": {
         "color": "var(--seed-color-fg-neutral-muted)",
-        "fontWeight": "var(--seed-font-weight-regular)",
-        "fontSize": "var(--seed-font-size-t4)",
-        "lineHeight": "var(--seed-line-height-t4)"
+        "fontSize": "var(--seed-font-size-t3)",
+        "lineHeight": "var(--seed-line-height-t3)",
+        "fontWeight": "var(--seed-font-weight-regular)"
+      },
+      "footer": {
+        /** 열릴 때는 천천히 펼쳐지고 빠르게 fade in됩니다. */
+        "expandHeightDuration": "400ms",
+        "expandHeightTimingFunction": "var(--seed-timing-function-easing)",
+        /** 열릴 때는 천천히 펼쳐지고 빠르게 fade in됩니다. */
+        "expandOpacityDuration": "var(--seed-duration-d6)",
+        "expandOpacityTimingFunction": "var(--seed-timing-function-easing)",
+        /** 닫힐 때는 빠르게 접히고 천천히 fade out됩니다. */
+        "collapseHeightDuration": "var(--seed-duration-d6)",
+        "collapseHeightTimingFunction": "var(--seed-timing-function-easing)",
+        /** 닫힐 때는 빠르게 접히고 천천히 fade out됩니다. */
+        "collapseOpacityDuration": "400ms",
+        "collapseOpacityTimingFunction": "var(--seed-timing-function-easing)"
       }
     },
-    "enabledPressed": {
+    "selected": {
       "root": {
-        "color": "var(--seed-color-bg-transparent-pressed)"
+        "strokeWidth": "2px"
       }
     },
     "enabledSelected": {
       "root": {
-        "color": "var(--seed-color-bg-neutral-weak)",
-        "strokeColor": "var(--seed-color-stroke-neutral-weak)"
+        "strokeColor": "var(--seed-color-stroke-neutral-contrast)"
       }
     },
-    "enabledSelectedPressed": {
+    "disabled": {
       "root": {
-        "color": "var(--seed-color-bg-neutral-weak-pressed)"
+        "strokeColor": "var(--seed-color-stroke-neutral-muted)"
+      },
+      "prefixIcon": {
+        "color": "var(--seed-color-fg-disabled)"
+      },
+      "label": {
+        "color": "var(--seed-color-fg-disabled)"
+      },
+      "description": {
+        "color": "var(--seed-color-fg-disabled)"
+      }
+    },
+    "enabledPressed": {
+      "root": {
+        "color": "var(--seed-color-bg-transparent-pressed)"
+      }
+    }
+  },
+  "layoutHorizontal": {
+    "enabled": {
+      "trigger": {
+        "paddingLeft": "var(--seed-dimension-x5)",
+        "paddingRight": "var(--seed-dimension-x4)",
+        "paddingY": "var(--seed-dimension-x4)"
+      },
+      "content": {
+        "gap": "var(--seed-dimension-x3)"
+      }
+    }
+  },
+  "layoutVertical": {
+    "enabled": {
+      "trigger": {
+        "paddingX": "var(--seed-dimension-x4)",
+        "paddingY": "var(--seed-dimension-x5)"
+      },
+      "content": {
+        "gap": "var(--seed-dimension-x2_5)"
       }
     }
   }

package/vars/component/select-box.mjs

@@ -2,46 +2,100 @@ export const vars = {
   "base": {
     "enabled": {
       "root": {
-        "colorTransitionDuration": "var(--seed-duration-color-transition)",
-        "colorTransitionTimingFunction": "var(--seed-timing-function-easing)",
-        "paddingX": "var(--seed-dimension-x4)",
-        "paddingY": "var(--seed-dimension-x5)",
-        "gap": "var(--seed-dimension-x2_5)",
-        "strokeWidth": "1px",
-        "strokeColor": "var(--seed-color-stroke-neutral-muted)",
         "cornerRadius": "var(--seed-radius-r3)",
-        "color": "var(--seed-color-bg-transparent)"
+        "color": "var(--seed-color-bg-transparent)",
+        "strokeColor": "var(--seed-color-stroke-neutral-muted)",
+        "strokeWidth": "1px",
+        "colorDuration": "var(--seed-duration-color-transition)",
+        "colorTimingFunction": "var(--seed-timing-function-easing)",
+        "strokeDuration": "0.1s",
+        "strokeTimingFunction": "var(--seed-timing-function-easing)"
       },
-      "content": {
-        "gap": "var(--seed-dimension-x0_5)"
+      "trigger": {
+        "gap": "var(--seed-dimension-x1_5)"
+      },
+      "prefixIcon": {
+        "color": "var(--seed-color-fg-neutral)",
+        "size": "22px"
+      },
+      "body": {
+        "gap": "var(--seed-dimension-x0_5)",
+        "paddingRight": "var(--seed-dimension-x1)"
       },
       "label": {
+        "gap": "var(--seed-dimension-x1)",
         "color": "var(--seed-color-fg-neutral)",
-        "fontWeight": "var(--seed-font-weight-bold)",
         "fontSize": "var(--seed-font-size-t5)",
-        "lineHeight": "var(--seed-line-height-t5)"
+        "lineHeight": "var(--seed-line-height-t5)",
+        "fontWeight": "var(--seed-font-weight-medium)"
       },
       "description": {
         "color": "var(--seed-color-fg-neutral-muted)",
-        "fontWeight": "var(--seed-font-weight-regular)",
-        "fontSize": "var(--seed-font-size-t4)",
-        "lineHeight": "var(--seed-line-height-t4)"
+        "fontSize": "var(--seed-font-size-t3)",
+        "lineHeight": "var(--seed-line-height-t3)",
+        "fontWeight": "var(--seed-font-weight-regular)"
+      },
+      "footer": {
+        "expandHeightDuration": "400ms",
+        "expandHeightTimingFunction": "var(--seed-timing-function-easing)",
+        "expandOpacityDuration": "var(--seed-duration-d6)",
+        "expandOpacityTimingFunction": "var(--seed-timing-function-easing)",
+        "collapseHeightDuration": "var(--seed-duration-d6)",
+        "collapseHeightTimingFunction": "var(--seed-timing-function-easing)",
+        "collapseOpacityDuration": "400ms",
+        "collapseOpacityTimingFunction": "var(--seed-timing-function-easing)"
       }
     },
-    "enabledPressed": {
+    "selected": {
       "root": {
-        "color": "var(--seed-color-bg-transparent-pressed)"
+        "strokeWidth": "2px"
       }
     },
     "enabledSelected": {
       "root": {
-        "color": "var(--seed-color-bg-neutral-weak)",
-        "strokeColor": "var(--seed-color-stroke-neutral-weak)"
+        "strokeColor": "var(--seed-color-stroke-neutral-contrast)"
       }
     },
-    "enabledSelectedPressed": {
+    "disabled": {
       "root": {
-        "color": "var(--seed-color-bg-neutral-weak-pressed)"
+        "strokeColor": "var(--seed-color-stroke-neutral-muted)"
+      },
+      "prefixIcon": {
+        "color": "var(--seed-color-fg-disabled)"
+      },
+      "label": {
+        "color": "var(--seed-color-fg-disabled)"
+      },
+      "description": {
+        "color": "var(--seed-color-fg-disabled)"
+      }
+    },
+    "enabledPressed": {
+      "root": {
+        "color": "var(--seed-color-bg-transparent-pressed)"
+      }
+    }
+  },
+  "layoutHorizontal": {
+    "enabled": {
+      "trigger": {
+        "paddingLeft": "var(--seed-dimension-x5)",
+        "paddingRight": "var(--seed-dimension-x4)",
+        "paddingY": "var(--seed-dimension-x4)"
+      },
+      "content": {
+        "gap": "var(--seed-dimension-x3)"
+      }
+    }
+  },
+  "layoutVertical": {
+    "enabled": {
+      "trigger": {
+        "paddingX": "var(--seed-dimension-x4)",
+        "paddingY": "var(--seed-dimension-x5)"
+      },
+      "content": {
+        "gap": "var(--seed-dimension-x2_5)"
       }
     }
   }

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

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