@seed-design/css 1.2.16 → 2.0.0

package/vars/component/input-button.mjs

@@ -2,10 +2,6 @@ export const vars = {
   "base": {
     "enabled": {
       "root": {
-        "height": "var(--seed-dimension-x13)",
-        "cornerRadius": "var(--seed-radius-r3)",
-        "gap": "var(--seed-dimension-x2_5)",
-        "paddingX": "var(--seed-dimension-x4)",
         "strokeWidth": "1px",
         "strokeColor": "var(--seed-color-stroke-neutral-weak)",
         "color": "var(--seed-color-bg-transparent)",
@@ -15,39 +11,28 @@ export const vars = {
         "strokeTimingFunction": "var(--seed-timing-function-easing)"
       },
       "value": {
-        "fontSize": "var(--seed-font-size-t5)",
-        "lineHeight": "var(--seed-line-height-t5)",
         "fontWeight": "var(--seed-font-weight-regular)",
         "color": "var(--seed-color-fg-neutral)"
       },
       "placeholder": {
-        "fontSize": "var(--seed-font-size-t5)",
-        "lineHeight": "var(--seed-line-height-t5)",
         "fontWeight": "var(--seed-font-weight-regular)",
         "color": "var(--seed-color-fg-placeholder)"
       },
       "prefixText": {
-        "fontSize": "var(--seed-font-size-t5)",
-        "lineHeight": "var(--seed-line-height-t5)",
         "fontWeight": "var(--seed-font-weight-regular)",
-        "color": "var(--seed-color-fg-neutral-muted)"
+        "color": "var(--seed-color-fg-neutral-subtle)"
       },
       "prefixIcon": {
-        "size": "var(--seed-dimension-x5)",
         "color": "var(--seed-color-fg-neutral-muted)"
       },
       "suffixText": {
-        "fontSize": "var(--seed-font-size-t5)",
-        "lineHeight": "var(--seed-line-height-t5)",
         "fontWeight": "var(--seed-font-weight-regular)",
-        "color": "var(--seed-color-fg-neutral-muted)"
+        "color": "var(--seed-color-fg-neutral-subtle)"
       },
       "suffixIcon": {
-        "size": "var(--seed-dimension-x5)",
         "color": "var(--seed-color-fg-neutral-muted)"
       },
       "clearButton": {
-        "size": "22px",
         "color": "var(--seed-color-fg-neutral-subtle)"
       }
     },
@@ -71,6 +56,18 @@ export const vars = {
       },
       "placeholder": {
         "color": "var(--seed-color-fg-disabled)"
+      },
+      "prefixText": {
+        "color": "var(--seed-color-fg-disabled)"
+      },
+      "prefixIcon": {
+        "color": "var(--seed-color-fg-disabled)"
+      },
+      "suffixText": {
+        "color": "var(--seed-color-fg-disabled)"
+      },
+      "suffixIcon": {
+        "color": "var(--seed-color-fg-disabled)"
       }
     },
     "readonly": {
@@ -84,5 +81,75 @@ export const vars = {
         "color": "var(--seed-color-fg-placeholder)"
       }
     }
+  },
+  "sizeLarge": {
+    "enabled": {
+      "root": {
+        "height": "var(--seed-dimension-x13)",
+        "gap": "var(--seed-dimension-x2_5)",
+        "cornerRadius": "var(--seed-radius-r3)",
+        "paddingX": "var(--seed-dimension-x4)"
+      },
+      "value": {
+        "fontSize": "var(--seed-font-size-t5)",
+        "lineHeight": "var(--seed-line-height-t5)"
+      },
+      "placeholder": {
+        "fontSize": "var(--seed-font-size-t5)",
+        "lineHeight": "var(--seed-line-height-t5)"
+      },
+      "prefixText": {
+        "fontSize": "var(--seed-font-size-t5)",
+        "lineHeight": "var(--seed-line-height-t5)"
+      },
+      "prefixIcon": {
+        "size": "var(--seed-dimension-x5)"
+      },
+      "suffixText": {
+        "fontSize": "var(--seed-font-size-t5)",
+        "lineHeight": "var(--seed-line-height-t5)"
+      },
+      "suffixIcon": {
+        "size": "var(--seed-dimension-x5)"
+      },
+      "clearButton": {
+        "size": "22px"
+      }
+    }
+  },
+  "sizeMedium": {
+    "enabled": {
+      "root": {
+        "height": "var(--seed-dimension-x10)",
+        "gap": "var(--seed-dimension-x2)",
+        "cornerRadius": "var(--seed-radius-r2)",
+        "paddingX": "var(--seed-dimension-x3_5)"
+      },
+      "value": {
+        "fontSize": "var(--seed-font-size-t4)",
+        "lineHeight": "var(--seed-line-height-t4)"
+      },
+      "placeholder": {
+        "fontSize": "var(--seed-font-size-t4)",
+        "lineHeight": "var(--seed-line-height-t4)"
+      },
+      "prefixText": {
+        "fontSize": "var(--seed-font-size-t4)",
+        "lineHeight": "var(--seed-line-height-t4)"
+      },
+      "prefixIcon": {
+        "size": "var(--seed-dimension-x4)"
+      },
+      "suffixText": {
+        "fontSize": "var(--seed-font-size-t4)",
+        "lineHeight": "var(--seed-line-height-t4)"
+      },
+      "suffixIcon": {
+        "size": "var(--seed-dimension-x4)"
+      },
+      "clearButton": {
+        "size": "var(--seed-dimension-x4_5)"
+      }
+    }
   }
 }

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

@@ -0,0 +1,129 @@
+export declare const vars: {
+  "base": {
+    "enabled": {
+      "root": {
+        "colorDuration": "var(--seed-duration-color-transition)",
+        "colorTimingFunction": "var(--seed-timing-function-easing)",
+        "marginDuration": "var(--seed-duration-d3)",
+        "marginTimingFunction": "var(--seed-timing-function-easing)",
+        "borderRadiusDuration": "var(--seed-duration-d3)",
+        "borderRadiusTimingFunction": "var(--seed-timing-function-easing)"
+      },
+      "body": {
+        "gap": "var(--seed-dimension-x0_5)"
+      },
+      "label": {
+        "fontWeight": "var(--seed-font-weight-regular)"
+      },
+      "description": {
+        "fontWeight": "var(--seed-font-weight-regular)",
+        "color": "var(--seed-color-fg-neutral-subtle)"
+      }
+    },
+    "pressed": {
+      "root": {
+        "color": "var(--seed-color-bg-transparent-pressed)",
+        "marginX": "var(--seed-dimension-x2)",
+        "cornerRadius": "var(--seed-radius-r3)"
+      }
+    },
+    "disabled": {
+      "prefixIcon": {
+        "color": "var(--seed-color-fg-disabled)"
+      },
+      "suffixIcon": {
+        "color": "var(--seed-color-fg-disabled)"
+      },
+      "label": {
+        "color": "var(--seed-color-fg-disabled)"
+      },
+      "description": {
+        "color": "var(--seed-color-fg-disabled)"
+      }
+    }
+  },
+  /**
+   * 뷰포트 너비와 관계없이 사용할 수 있습니다.
+   */
+  "sizeMedium": {
+    "enabled": {
+      "root": {
+        "paddingX": "var(--seed-dimension-x4)",
+        "paddingY": "var(--seed-dimension-x3)",
+        "gap": "var(--seed-dimension-x3)"
+      },
+      "prefixIcon": {
+        "size": "22px"
+      },
+      "suffixIcon": {
+        "size": "18px"
+      },
+      "label": {
+        "fontSize": "var(--seed-font-size-t5)",
+        "lineHeight": "var(--seed-line-height-t5)"
+      },
+      "description": {
+        "fontSize": "var(--seed-font-size-t3)",
+        "lineHeight": "var(--seed-line-height-t3)"
+      }
+    }
+  },
+  /**
+   * Breakpoint `lg` 이상(데스크톱)에서만 사용하고, 모바일에서는 사용하지 않습니다. 정밀한 선택이 가능한 마우스 입력 환경에서 사이즈를 더 작게 만들고자 할 때 사용합니다.
+   */
+  "sizeSmall": {
+    "enabled": {
+      "root": {
+        "paddingX": "var(--seed-dimension-x4)",
+        "paddingY": "var(--seed-dimension-x2_5)",
+        "gap": "var(--seed-dimension-x2)"
+      },
+      "prefixIcon": {
+        "size": "18px"
+      },
+      "suffixIcon": {
+        "size": "16px"
+      },
+      "label": {
+        "fontSize": "var(--seed-font-size-t4)",
+        "lineHeight": "var(--seed-line-height-t4)"
+      },
+      "description": {
+        "fontSize": "var(--seed-font-size-t2)",
+        "lineHeight": "var(--seed-line-height-t2)"
+      }
+    }
+  },
+  /**
+   * 일반적인 작업을 수행하는 기본 아이템입니다.
+   */
+  "toneNeutral": {
+    "enabled": {
+      "prefixIcon": {
+        "color": "var(--seed-color-fg-neutral)"
+      },
+      "suffixIcon": {
+        "color": "var(--seed-color-fg-neutral)"
+      },
+      "label": {
+        "color": "var(--seed-color-fg-neutral)"
+      }
+    }
+  },
+  /**
+   * 데이터 삭제와 같이 되돌릴 수 없는 작업을 수행하는 아이템입니다.
+   */
+  "toneCritical": {
+    "enabled": {
+      "prefixIcon": {
+        "color": "var(--seed-color-fg-critical)"
+      },
+      "suffixIcon": {
+        "color": "var(--seed-color-fg-critical)"
+      },
+      "label": {
+        "color": "var(--seed-color-fg-critical)"
+      }
+    }
+  }
+}

package/vars/component/menu-item.mjs

@@ -0,0 +1,117 @@
+export const vars = {
+  "base": {
+    "enabled": {
+      "root": {
+        "colorDuration": "var(--seed-duration-color-transition)",
+        "colorTimingFunction": "var(--seed-timing-function-easing)",
+        "marginDuration": "var(--seed-duration-d3)",
+        "marginTimingFunction": "var(--seed-timing-function-easing)",
+        "borderRadiusDuration": "var(--seed-duration-d3)",
+        "borderRadiusTimingFunction": "var(--seed-timing-function-easing)"
+      },
+      "body": {
+        "gap": "var(--seed-dimension-x0_5)"
+      },
+      "label": {
+        "fontWeight": "var(--seed-font-weight-regular)"
+      },
+      "description": {
+        "fontWeight": "var(--seed-font-weight-regular)",
+        "color": "var(--seed-color-fg-neutral-subtle)"
+      }
+    },
+    "pressed": {
+      "root": {
+        "color": "var(--seed-color-bg-transparent-pressed)",
+        "marginX": "var(--seed-dimension-x2)",
+        "cornerRadius": "var(--seed-radius-r3)"
+      }
+    },
+    "disabled": {
+      "prefixIcon": {
+        "color": "var(--seed-color-fg-disabled)"
+      },
+      "suffixIcon": {
+        "color": "var(--seed-color-fg-disabled)"
+      },
+      "label": {
+        "color": "var(--seed-color-fg-disabled)"
+      },
+      "description": {
+        "color": "var(--seed-color-fg-disabled)"
+      }
+    }
+  },
+  "sizeMedium": {
+    "enabled": {
+      "root": {
+        "paddingX": "var(--seed-dimension-x4)",
+        "paddingY": "var(--seed-dimension-x3)",
+        "gap": "var(--seed-dimension-x3)"
+      },
+      "prefixIcon": {
+        "size": "22px"
+      },
+      "suffixIcon": {
+        "size": "18px"
+      },
+      "label": {
+        "fontSize": "var(--seed-font-size-t5)",
+        "lineHeight": "var(--seed-line-height-t5)"
+      },
+      "description": {
+        "fontSize": "var(--seed-font-size-t3)",
+        "lineHeight": "var(--seed-line-height-t3)"
+      }
+    }
+  },
+  "sizeSmall": {
+    "enabled": {
+      "root": {
+        "paddingX": "var(--seed-dimension-x4)",
+        "paddingY": "var(--seed-dimension-x2_5)",
+        "gap": "var(--seed-dimension-x2)"
+      },
+      "prefixIcon": {
+        "size": "18px"
+      },
+      "suffixIcon": {
+        "size": "16px"
+      },
+      "label": {
+        "fontSize": "var(--seed-font-size-t4)",
+        "lineHeight": "var(--seed-line-height-t4)"
+      },
+      "description": {
+        "fontSize": "var(--seed-font-size-t2)",
+        "lineHeight": "var(--seed-line-height-t2)"
+      }
+    }
+  },
+  "toneNeutral": {
+    "enabled": {
+      "prefixIcon": {
+        "color": "var(--seed-color-fg-neutral)"
+      },
+      "suffixIcon": {
+        "color": "var(--seed-color-fg-neutral)"
+      },
+      "label": {
+        "color": "var(--seed-color-fg-neutral)"
+      }
+    }
+  },
+  "toneCritical": {
+    "enabled": {
+      "prefixIcon": {
+        "color": "var(--seed-color-fg-critical)"
+      },
+      "suffixIcon": {
+        "color": "var(--seed-color-fg-critical)"
+      },
+      "label": {
+        "color": "var(--seed-color-fg-critical)"
+      }
+    }
+  }
+}

package/vars/component/menu.d.ts

@@ -0,0 +1,68 @@
+export declare const vars: {
+  "base": {
+    "enabled": {
+      "root": {
+        "cornerRadius": "var(--seed-radius-r5)",
+        "color": "var(--seed-color-bg-layer-floating)",
+        "shadow": "var(--seed-shadow-s3)",
+        "enterDuration": "var(--seed-duration-d3)",
+        "enterTimingFunction": "var(--seed-timing-function-enter)",
+        "enterScale": "0.95",
+        "enterOpacity": "0",
+        "exitDuration": "var(--seed-duration-d2)",
+        "exitTimingFunction": "var(--seed-timing-function-exit)",
+        "exitScale": "0.95",
+        "exitOpacity": "0",
+        "paddingY": "var(--seed-dimension-x2)",
+        "gap": "var(--seed-dimension-x2)",
+        /** 트리거와 메뉴 사이의 간격을 정의합니다. */
+        "gutter": "var(--seed-dimension-x2)",
+        /** 메뉴와 뷰포트 경계 사이의 최소 간격을 정의합니다. */
+        "overflowPadding": "var(--seed-dimension-x2)",
+        "maxHeight": "480px"
+      },
+      "groupLabel": {
+        "color": "var(--seed-color-fg-neutral-subtle)"
+      },
+      "divider": {
+        "marginX": "var(--seed-dimension-x4)",
+        "height": "1px",
+        "color": "var(--seed-color-stroke-neutral-muted)"
+      }
+    }
+  },
+  /**
+   * 뷰포트 너비와 관계없이 사용할 수 있습니다.
+   */
+  "sizeMedium": {
+    "enabled": {
+      "root": {
+        "width": "240px"
+      },
+      "groupLabel": {
+        "paddingY": "var(--seed-dimension-x2_5)",
+        "paddingX": "var(--seed-dimension-x4)",
+        "fontSize": "var(--seed-font-size-t4)",
+        "lineHeight": "var(--seed-line-height-t4)",
+        "fontWeight": "var(--seed-font-weight-medium)"
+      }
+    }
+  },
+  /**
+   * Breakpoint `lg` 이상(데스크톱)에서만 사용하고, 모바일에서는 사용하지 않습니다. 정밀한 선택이 가능한 마우스 입력 환경에서 사이즈를 더 작게 만들고자 할 때 사용합니다.
+   */
+  "sizeSmall": {
+    "enabled": {
+      "root": {
+        "width": "200px"
+      },
+      "groupLabel": {
+        "paddingY": "var(--seed-dimension-x2)",
+        "paddingX": "var(--seed-dimension-x4)",
+        "fontSize": "var(--seed-font-size-t3)",
+        "lineHeight": "var(--seed-line-height-t3)",
+        "fontWeight": "var(--seed-font-weight-regular)"
+      }
+    }
+  }
+}

package/vars/component/menu.mjs

@@ -0,0 +1,60 @@
+export const vars = {
+  "base": {
+    "enabled": {
+      "root": {
+        "cornerRadius": "var(--seed-radius-r5)",
+        "color": "var(--seed-color-bg-layer-floating)",
+        "shadow": "var(--seed-shadow-s3)",
+        "enterDuration": "var(--seed-duration-d3)",
+        "enterTimingFunction": "var(--seed-timing-function-enter)",
+        "enterScale": "0.95",
+        "enterOpacity": "0",
+        "exitDuration": "var(--seed-duration-d2)",
+        "exitTimingFunction": "var(--seed-timing-function-exit)",
+        "exitScale": "0.95",
+        "exitOpacity": "0",
+        "paddingY": "var(--seed-dimension-x2)",
+        "gap": "var(--seed-dimension-x2)",
+        "gutter": "var(--seed-dimension-x2)",
+        "overflowPadding": "var(--seed-dimension-x2)",
+        "maxHeight": "480px"
+      },
+      "groupLabel": {
+        "color": "var(--seed-color-fg-neutral-subtle)"
+      },
+      "divider": {
+        "marginX": "var(--seed-dimension-x4)",
+        "height": "1px",
+        "color": "var(--seed-color-stroke-neutral-muted)"
+      }
+    }
+  },
+  "sizeMedium": {
+    "enabled": {
+      "root": {
+        "width": "240px"
+      },
+      "groupLabel": {
+        "paddingY": "var(--seed-dimension-x2_5)",
+        "paddingX": "var(--seed-dimension-x4)",
+        "fontSize": "var(--seed-font-size-t4)",
+        "lineHeight": "var(--seed-line-height-t4)",
+        "fontWeight": "var(--seed-font-weight-medium)"
+      }
+    }
+  },
+  "sizeSmall": {
+    "enabled": {
+      "root": {
+        "width": "200px"
+      },
+      "groupLabel": {
+        "paddingY": "var(--seed-dimension-x2)",
+        "paddingX": "var(--seed-dimension-x4)",
+        "fontSize": "var(--seed-font-size-t3)",
+        "lineHeight": "var(--seed-line-height-t3)",
+        "fontWeight": "var(--seed-font-weight-regular)"
+      }
+    }
+  }
+}

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

@@ -0,0 +1,23 @@
+export declare const vars: {
+  "base": {
+    "enabled": {
+      "root": {
+        "color": "var(--seed-color-bg-transparent)",
+        "cornerRadius": "var(--seed-radius-r3)",
+        "targetSize": "52px",
+        "size": "22px"
+      },
+      "icon": {
+        "color": "var(--seed-color-fg-neutral-subtle)",
+        "size": "22px",
+        "colorDuration": "var(--seed-duration-color-transition)",
+        "colorTimingFunction": "var(--seed-timing-function-easing)"
+      }
+    },
+    "pressed": {
+      "icon": {
+        "color": "var(--seed-color-fg-neutral)"
+      }
+    }
+  }
+}

package/vars/component/side-panel-close-button.mjs

@@ -0,0 +1,23 @@
+export const vars = {
+  "base": {
+    "enabled": {
+      "root": {
+        "color": "var(--seed-color-bg-transparent)",
+        "cornerRadius": "var(--seed-radius-r3)",
+        "targetSize": "52px",
+        "size": "22px"
+      },
+      "icon": {
+        "color": "var(--seed-color-fg-neutral-subtle)",
+        "size": "22px",
+        "colorDuration": "var(--seed-duration-color-transition)",
+        "colorTimingFunction": "var(--seed-timing-function-easing)"
+      }
+    },
+    "pressed": {
+      "icon": {
+        "color": "var(--seed-color-fg-neutral)"
+      }
+    }
+  }
+}

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

@@ -0,0 +1,94 @@
+export declare const vars: {
+  "base": {
+    "enabled": {
+      "backdrop": {
+        "color": "var(--seed-color-bg-overlay)",
+        "enterDuration": "var(--seed-duration-d6)",
+        "enterTimingFunction": "var(--seed-timing-function-enter)",
+        "enterOpacity": "0",
+        "exitDuration": "var(--seed-duration-d6)",
+        "exitTimingFunction": "var(--seed-timing-function-exit)",
+        "exitOpacity": "0"
+      },
+      /** 하단 safe-area inset을 content의 하단 패딩으로 적용합니다. */
+      "content": {
+        "color": "var(--seed-color-bg-layer-floating)",
+        /** viewport 또는 parent width에 대한 mobile content width 비율입니다. */
+        "widthFraction": "0.8",
+        "enterDuration": "var(--seed-duration-d6)",
+        "enterTimingFunction": "var(--seed-timing-function-enter-expressive)",
+        "exitDuration": "var(--seed-duration-d6)",
+        "exitTimingFunction": "var(--seed-timing-function-exit-expressive)"
+      },
+      "header": {
+        "gap": "var(--seed-dimension-x1_5)",
+        "minHeight": "70px",
+        "paddingX": "var(--seed-dimension-x6)",
+        /** 이 값은 상단 safe-area inset과 합산하여 적용합니다. */
+        "paddingTop": "var(--seed-dimension-x6)",
+        /** body의 하단 padding이며, 동시에 하단 scroll fog 그라데이션의 높이로도 사용됩니다. */
+        "paddingBottom": "var(--seed-dimension-x4)"
+      },
+      "body": {
+        "paddingX": "var(--seed-dimension-x6)",
+        /** body의 하단 padding이며, 동시에 하단 scroll fog 그라데이션의 높이로도 사용됩니다. */
+        "paddingBottom": "var(--seed-dimension-x12)",
+        "transitionDuration": "var(--seed-duration-color-transition)",
+        "transitionTimingFunction": "var(--seed-timing-function-easing)"
+      },
+      "footer": {
+        "paddingX": "var(--seed-dimension-x6)",
+        /** 이 값은 상단 safe-area inset과 합산하여 적용합니다. */
+        "paddingTop": "var(--seed-dimension-x4)",
+        /** body의 하단 padding이며, 동시에 하단 scroll fog 그라데이션의 높이로도 사용됩니다. */
+        "paddingBottom": "var(--seed-dimension-x6)"
+      },
+      "title": {
+        "color": "var(--seed-color-fg-neutral)",
+        "fontSize": "var(--seed-font-size-t8)",
+        "lineHeight": "var(--seed-line-height-t8)",
+        "fontWeight": "var(--seed-font-weight-bold)"
+      },
+      "description": {
+        "color": "var(--seed-color-fg-neutral-muted)",
+        "fontSize": "var(--seed-font-size-t5)",
+        "lineHeight": "var(--seed-line-height-t5)",
+        "fontWeight": "var(--seed-font-weight-regular)"
+      },
+      "closeButton": {
+        "fromTop": "28px",
+        "fromRight": "24px"
+      }
+    },
+    "scrolled": {
+      "body": {
+        /** 본문이 스크롤된(scrolled) 상태에서 body 상단에 나타나는 divider의 색상입니다. */
+        "stroke": "var(--seed-color-stroke-neutral-muted)"
+      }
+    }
+  },
+  "sizeSmall": {
+    "enabled": {
+      /** 하단 safe-area inset을 content의 하단 패딩으로 적용합니다. */
+      "content": {
+        "width": "480px"
+      }
+    }
+  },
+  "sizeMedium": {
+    "enabled": {
+      /** 하단 safe-area inset을 content의 하단 패딩으로 적용합니다. */
+      "content": {
+        "width": "720px"
+      }
+    }
+  },
+  "sizeLarge": {
+    "enabled": {
+      /** 하단 safe-area inset을 content의 하단 패딩으로 적용합니다. */
+      "content": {
+        "width": "960px"
+      }
+    }
+  }
+}