@seed-design/css 2.8.3 → 3.0.0

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

@@ -1,69 +0,0 @@
-export declare const vars: {
-  "base": {
-    "enabled": {
-      "root": {
-        "color": "var(--seed-color-bg-neutral-weak)",
-        "minHeight": "52px",
-        "paddingX": "var(--seed-dimension-x4)",
-        "paddingY": "var(--seed-dimension-x3_5)",
-        "gap": "var(--seed-dimension-x3_5)"
-      },
-      "prefixIcon": {
-        "size": "22px"
-      },
-      "content": {
-        "gap": "var(--seed-dimension-x0_5)"
-      },
-      "label": {
-        "fontSize": "var(--seed-font-size-t5)",
-        "lineHeight": "var(--seed-line-height-t5)",
-        "fontWeight": "var(--seed-font-weight-regular)"
-      },
-      "description": {
-        "fontSize": "var(--seed-font-size-t3)",
-        "lineHeight": "var(--seed-line-height-t3)",
-        "fontWeight": "var(--seed-font-weight-medium)",
-        "color": "var(--seed-color-fg-neutral-subtle)"
-      }
-    },
-    "pressed": {
-      "root": {
-        "color": "var(--seed-color-bg-neutral-weak-pressed)"
-      }
-    }
-  },
-  /**
-   * 일반적인 작업을 수행하는 기본 아이템입니다.
-   */
-  "toneNeutral": {
-    "enabled": {
-      "prefixIcon": {
-        "color": "var(--seed-color-fg-neutral)"
-      },
-      "label": {
-        "color": "var(--seed-color-fg-neutral)"
-      }
-    }
-  },
-  /**
-   * 데이터 삭제와 같이 되돌릴 수 없는 작업을 수행하는 아이템입니다.
-   */
-  "toneCritical": {
-    "enabled": {
-      "prefixIcon": {
-        "color": "var(--seed-color-fg-critical)"
-      },
-      "label": {
-        "color": "var(--seed-color-fg-critical)"
-      }
-    }
-  },
-  /**
-   * 라벨을 왼쪽 정렬합니다.
-   */
-  "labelAlignLeft": {},
-  /**
-   * 라벨을 중앙 정렬합니다.
-   */
-  "labelAlignCenter": {}
-}

package/vars/component/menu-sheet-item.mjs

@@ -1,57 +0,0 @@
-export const vars = {
-  "base": {
-    "enabled": {
-      "root": {
-        "color": "var(--seed-color-bg-neutral-weak)",
-        "minHeight": "52px",
-        "paddingX": "var(--seed-dimension-x4)",
-        "paddingY": "var(--seed-dimension-x3_5)",
-        "gap": "var(--seed-dimension-x3_5)"
-      },
-      "prefixIcon": {
-        "size": "22px"
-      },
-      "content": {
-        "gap": "var(--seed-dimension-x0_5)"
-      },
-      "label": {
-        "fontSize": "var(--seed-font-size-t5)",
-        "lineHeight": "var(--seed-line-height-t5)",
-        "fontWeight": "var(--seed-font-weight-regular)"
-      },
-      "description": {
-        "fontSize": "var(--seed-font-size-t3)",
-        "lineHeight": "var(--seed-line-height-t3)",
-        "fontWeight": "var(--seed-font-weight-medium)",
-        "color": "var(--seed-color-fg-neutral-subtle)"
-      }
-    },
-    "pressed": {
-      "root": {
-        "color": "var(--seed-color-bg-neutral-weak-pressed)"
-      }
-    }
-  },
-  "toneNeutral": {
-    "enabled": {
-      "prefixIcon": {
-        "color": "var(--seed-color-fg-neutral)"
-      },
-      "label": {
-        "color": "var(--seed-color-fg-neutral)"
-      }
-    }
-  },
-  "toneCritical": {
-    "enabled": {
-      "prefixIcon": {
-        "color": "var(--seed-color-fg-critical)"
-      },
-      "label": {
-        "color": "var(--seed-color-fg-critical)"
-      }
-    }
-  },
-  "labelAlignLeft": {},
-  "labelAlignCenter": {}
-}

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

@@ -1,56 +0,0 @@
-export declare const vars: {
-  "base": {
-    "enabled": {
-      "backdrop": {
-        "color": "var(--seed-color-bg-overlay)",
-        "enterDuration": "var(--seed-duration-d2)",
-        "enterTimingFunction": "var(--seed-timing-function-enter)",
-        "enterOpacity": "0",
-        "exitDuration": "var(--seed-duration-d2)",
-        "exitTimingFunction": "var(--seed-timing-function-exit)",
-        "exitOpacity": "0"
-      },
-      "content": {
-        "color": "var(--seed-color-bg-layer-floating)",
-        "maxWidth": "480px",
-        "paddingX": "var(--seed-dimension-spacing-x-global-gutter)",
-        "paddingTop": "var(--seed-dimension-x6)",
-        "paddingBottom": "var(--seed-dimension-x4)",
-        "topCornerRadius": "var(--seed-radius-r5)",
-        "enterDuration": "var(--seed-duration-d6)",
-        "enterTimingFunction": "var(--seed-timing-function-enter-expressive)",
-        "exitDuration": "var(--seed-duration-d4)",
-        "exitTimingFunction": "var(--seed-timing-function-exit)"
-      },
-      "header": {
-        "gap": "var(--seed-dimension-x1)",
-        "paddingBottom": "var(--seed-dimension-x4)"
-      },
-      "title": {
-        "fontSize": "var(--seed-font-size-t6)",
-        "lineHeight": "var(--seed-line-height-t6)",
-        "fontWeight": "var(--seed-font-weight-bold)",
-        "color": "var(--seed-color-fg-neutral)"
-      },
-      "description": {
-        "fontSize": "var(--seed-font-size-t4)",
-        "lineHeight": "var(--seed-line-height-t4)",
-        "fontWeight": "var(--seed-font-weight-regular)",
-        "color": "var(--seed-color-fg-neutral-muted)"
-      },
-      "list": {
-        "gap": "var(--seed-dimension-x2_5)"
-      },
-      "group": {
-        "cornerRadius": "var(--seed-radius-r4)"
-      },
-      "divider": {
-        "strokeBottomWidth": "1px",
-        "strokeColor": "var(--seed-color-stroke-neutral-muted)"
-      },
-      "footer": {
-        "paddingTop": "var(--seed-dimension-x2_5)"
-      }
-    }
-  }
-}

package/vars/component/menu-sheet.mjs

@@ -1,56 +0,0 @@
-export const vars = {
-  "base": {
-    "enabled": {
-      "backdrop": {
-        "color": "var(--seed-color-bg-overlay)",
-        "enterDuration": "var(--seed-duration-d2)",
-        "enterTimingFunction": "var(--seed-timing-function-enter)",
-        "enterOpacity": "0",
-        "exitDuration": "var(--seed-duration-d2)",
-        "exitTimingFunction": "var(--seed-timing-function-exit)",
-        "exitOpacity": "0"
-      },
-      "content": {
-        "color": "var(--seed-color-bg-layer-floating)",
-        "maxWidth": "480px",
-        "paddingX": "var(--seed-dimension-spacing-x-global-gutter)",
-        "paddingTop": "var(--seed-dimension-x6)",
-        "paddingBottom": "var(--seed-dimension-x4)",
-        "topCornerRadius": "var(--seed-radius-r5)",
-        "enterDuration": "var(--seed-duration-d6)",
-        "enterTimingFunction": "var(--seed-timing-function-enter-expressive)",
-        "exitDuration": "var(--seed-duration-d4)",
-        "exitTimingFunction": "var(--seed-timing-function-exit)"
-      },
-      "header": {
-        "gap": "var(--seed-dimension-x1)",
-        "paddingBottom": "var(--seed-dimension-x4)"
-      },
-      "title": {
-        "fontSize": "var(--seed-font-size-t6)",
-        "lineHeight": "var(--seed-line-height-t6)",
-        "fontWeight": "var(--seed-font-weight-bold)",
-        "color": "var(--seed-color-fg-neutral)"
-      },
-      "description": {
-        "fontSize": "var(--seed-font-size-t4)",
-        "lineHeight": "var(--seed-line-height-t4)",
-        "fontWeight": "var(--seed-font-weight-regular)",
-        "color": "var(--seed-color-fg-neutral-muted)"
-      },
-      "list": {
-        "gap": "var(--seed-dimension-x2_5)"
-      },
-      "group": {
-        "cornerRadius": "var(--seed-radius-r4)"
-      },
-      "divider": {
-        "strokeBottomWidth": "1px",
-        "strokeColor": "var(--seed-color-stroke-neutral-muted)"
-      },
-      "footer": {
-        "paddingTop": "var(--seed-dimension-x2_5)"
-      }
-    }
-  }
-}

package/vars/component/menu.d.ts

@@ -1,68 +0,0 @@
-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

@@ -1,60 +0,0 @@
-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/notification-badge.d.ts

@@ -1,48 +0,0 @@
-export declare const vars: {
-  "base": {
-    "enabled": {
-      "root": {
-        "color": "var(--seed-color-bg-brand-solid)"
-      },
-      "label": {
-        "color": "var(--seed-color-palette-static-white)"
-      }
-    }
-  },
-  /**
-   * 라벨을 포함해 구체적인 알림 수나 상태 정보를 제공합니다. 세부 정보가 중요하고 충분한 공간이 있을 때 사용합니다. 내부 라벨을 반드시 포함해야 합니다.
-   */
-  "sizeLarge": {
-    "enabled": {
-      "root": {
-        "minWidth": "18px",
-        "minHeight": "18px",
-        "paddingX": "var(--seed-dimension-x1)",
-        "paddingY": "0px",
-        "cornerRadius": "var(--seed-radius-full)",
-        "iconAttachedInsetEnd": "8px",
-        "iconAttachedInsetTop": "14px",
-        "textAttachedGap": "2px"
-      },
-      "label": {
-        "fontSize": "var(--seed-font-size-t1-static)",
-        "lineHeight": "var(--seed-line-height-t1-static)",
-        "fontWeight": "var(--seed-font-weight-bold)"
-      }
-    }
-  },
-  /**
-   * 간결한 도트 형태로, 텍스트 없이 상태 변화만 표시합니다. 알림의 존재 여부만 중요하거나 공간이 제한된 경우에 적합합니다. 내부 라벨은 지원하지 않습니다.
-   */
-  "sizeSmall": {
-    "enabled": {
-      "root": {
-        "size": "6px",
-        "cornerRadius": "var(--seed-radius-full)",
-        "iconAttachedInsetEnd": "7px",
-        "iconAttachedInsetTop": "7px",
-        "textAttachedGap": "2px"
-      }
-    }
-  }
-}

package/vars/component/notification-badge.mjs

@@ -1,42 +0,0 @@
-export const vars = {
-  "base": {
-    "enabled": {
-      "root": {
-        "color": "var(--seed-color-bg-brand-solid)"
-      },
-      "label": {
-        "color": "var(--seed-color-palette-static-white)"
-      }
-    }
-  },
-  "sizeLarge": {
-    "enabled": {
-      "root": {
-        "minWidth": "18px",
-        "minHeight": "18px",
-        "paddingX": "var(--seed-dimension-x1)",
-        "paddingY": "0px",
-        "cornerRadius": "var(--seed-radius-full)",
-        "iconAttachedInsetEnd": "8px",
-        "iconAttachedInsetTop": "14px",
-        "textAttachedGap": "2px"
-      },
-      "label": {
-        "fontSize": "var(--seed-font-size-t1-static)",
-        "lineHeight": "var(--seed-line-height-t1-static)",
-        "fontWeight": "var(--seed-font-weight-bold)"
-      }
-    }
-  },
-  "sizeSmall": {
-    "enabled": {
-      "root": {
-        "size": "6px",
-        "cornerRadius": "var(--seed-radius-full)",
-        "iconAttachedInsetEnd": "7px",
-        "iconAttachedInsetTop": "7px",
-        "textAttachedGap": "2px"
-      }
-    }
-  }
-}

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

@@ -1,133 +0,0 @@
-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

@@ -1,99 +0,0 @@
-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)"
-      }
-    }
-  }
-}