@seed-design/css 2.8.3 → 3.0.0

package/vars/component/select.d.ts

@@ -1,62 +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)"
-      }
-    }
-  },
-  /**
-   * 뷰포트 너비와 관계없이 사용할 수 있습니다.
-   */
-  "sizeLarge": {
-    "enabled": {
-      "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` 이상(데스크톱)에서만 사용하고, 모바일에서는 사용하지 않습니다. 정밀한 선택이 가능한 마우스 입력 환경에서 사이즈를 더 작게 만들고자 할 때 사용합니다.
-   */
-  "sizeMedium": {
-    "enabled": {
-      "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/select.mjs

@@ -1,54 +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)"
-      }
-    }
-  },
-  "sizeLarge": {
-    "enabled": {
-      "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)"
-      }
-    }
-  },
-  "sizeMedium": {
-    "enabled": {
-      "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

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

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

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

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

@@ -1,97 +0,0 @@
-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)",
-        /** closeButton이 표시되는 경우 paddingRight에 추가되는 여백입니다. */
-        "closeButtonGap": "var(--seed-dimension-x1_5)"
-      },
-      "body": {
-        "paddingX": "var(--seed-dimension-x6)",
-        /** body의 하단 padding이며, 동시에 하단 scroll fog 그라데이션의 높이로도 사용됩니다. */
-        "paddingBottom": "var(--seed-dimension-x12)",
-        "strokeDuration": "var(--seed-duration-color-transition)",
-        "strokeTimingFunction": "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": {
-        "strokeWidth": "1px",
-        /** 본문이 스크롤된(scrolled) 상태에서 body 상단에 나타나는 divider의 색상입니다. */
-        "strokeColor": "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"
-      }
-    }
-  }
-}

package/vars/component/side-panel.mjs

@@ -1,85 +0,0 @@
-export 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"
-      },
-      "content": {
-        "color": "var(--seed-color-bg-layer-floating)",
-        "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)",
-        "paddingTop": "var(--seed-dimension-x6)",
-        "paddingBottom": "var(--seed-dimension-x4)",
-        "closeButtonGap": "var(--seed-dimension-x1_5)"
-      },
-      "body": {
-        "paddingX": "var(--seed-dimension-x6)",
-        "paddingBottom": "var(--seed-dimension-x12)",
-        "strokeDuration": "var(--seed-duration-color-transition)",
-        "strokeTimingFunction": "var(--seed-timing-function-easing)"
-      },
-      "footer": {
-        "paddingX": "var(--seed-dimension-x6)",
-        "paddingTop": "var(--seed-dimension-x4)",
-        "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": {
-        "strokeWidth": "1px",
-        "strokeColor": "var(--seed-color-stroke-neutral-muted)"
-      }
-    }
-  },
-  "sizeSmall": {
-    "enabled": {
-      "content": {
-        "width": "480px"
-      }
-    }
-  },
-  "sizeMedium": {
-    "enabled": {
-      "content": {
-        "width": "720px"
-      }
-    }
-  },
-  "sizeLarge": {
-    "enabled": {
-      "content": {
-        "width": "960px"
-      }
-    }
-  }
-}

package/vars/component/skeleton.d.ts

@@ -1,80 +0,0 @@
-export declare const vars: {
-  "base": {
-    "enabled": {
-      "shimmer": {
-        "duration": "1.5s",
-        "timingFunction": "var(--seed-timing-function-easing)"
-      }
-    }
-  },
-  /**
-   * 기본값입니다.
-   */
-  "radius0": {
-    "enabled": {
-      "root": {
-        "cornerRadius": "0px"
-      }
-    }
-  },
-  /**
-   * 텍스트 콘텐츠에 사용합니다.
-   */
-  "radius8": {
-    "enabled": {
-      "root": {
-        "cornerRadius": "8px"
-      }
-    }
-  },
-  /**
-   * 카드 및 썸네일에 사용합니다.
-   */
-  "radius16": {
-    "enabled": {
-      "root": {
-        "cornerRadius": "16px"
-      }
-    }
-  },
-  /**
-   * Avatar(원형) 콘텐츠에 사용합니다.
-   */
-  "radiusFull": {
-    "enabled": {
-      "root": {
-        "cornerRadius": "var(--seed-radius-full)"
-      }
-    }
-  },
-  /**
-   * 데이터를 불러오는 일반적인 로딩 경험에 사용합니다.
-   */
-  "toneNeutral": {
-    "enabled": {
-      "root": {
-        "color": "var(--seed-color-palette-gray-200)"
-      },
-      "shimmer": {
-        "gradient": {
-          "serialized": "var(--seed-gradient-shimmer-neutral)"
-        }
-      }
-    }
-  },
-  /**
-   * AI 기능이 활성화되었을 때 사용합니다.
-   */
-  "toneMagic": {
-    "enabled": {
-      "root": {
-        "color": "var(--seed-color-bg-magic-weak)"
-      },
-      "shimmer": {
-        "gradient": {
-          "serialized": "var(--seed-gradient-shimmer-magic)"
-        }
-      }
-    }
-  }
-}

package/vars/component/skeleton.mjs

@@ -1,62 +0,0 @@
-export const vars = {
-  "base": {
-    "enabled": {
-      "shimmer": {
-        "duration": "1.5s",
-        "timingFunction": "var(--seed-timing-function-easing)"
-      }
-    }
-  },
-  "radius0": {
-    "enabled": {
-      "root": {
-        "cornerRadius": "0px"
-      }
-    }
-  },
-  "radius8": {
-    "enabled": {
-      "root": {
-        "cornerRadius": "8px"
-      }
-    }
-  },
-  "radius16": {
-    "enabled": {
-      "root": {
-        "cornerRadius": "16px"
-      }
-    }
-  },
-  "radiusFull": {
-    "enabled": {
-      "root": {
-        "cornerRadius": "var(--seed-radius-full)"
-      }
-    }
-  },
-  "toneNeutral": {
-    "enabled": {
-      "root": {
-        "color": "var(--seed-color-palette-gray-200)"
-      },
-      "shimmer": {
-        "gradient": {
-          "serialized": "var(--seed-gradient-shimmer-neutral)"
-        }
-      }
-    }
-  },
-  "toneMagic": {
-    "enabled": {
-      "root": {
-        "color": "var(--seed-color-bg-magic-weak)"
-      },
-      "shimmer": {
-        "gradient": {
-          "serialized": "var(--seed-gradient-shimmer-magic)"
-        }
-      }
-    }
-  }
-}

package/vars/component/slider-thumb.d.ts

@@ -1,25 +0,0 @@
-export declare const vars: {
-  "base": {
-    "enabled": {
-      "root": {
-        "size": "var(--seed-dimension-x5)",
-        "cornerRadius": "var(--seed-radius-full)",
-        "color": "var(--seed-color-bg-neutral-inverted)",
-        "scaleDuration": "var(--seed-duration-d3)",
-        "scaleTimingFunction": "var(--seed-timing-function-easing)",
-        "translateDuration": "var(--seed-duration-d3)",
-        "translateTimingFunction": "var(--seed-timing-function-easing)"
-      }
-    },
-    "disabled": {
-      "root": {
-        "color": "var(--seed-color-fg-disabled)"
-      }
-    },
-    "pressed": {
-      "root": {
-        "scale": "1.2"
-      }
-    }
-  }
-}

package/vars/component/slider-thumb.mjs

@@ -1,25 +0,0 @@
-export const vars = {
-  "base": {
-    "enabled": {
-      "root": {
-        "size": "var(--seed-dimension-x5)",
-        "cornerRadius": "var(--seed-radius-full)",
-        "color": "var(--seed-color-bg-neutral-inverted)",
-        "scaleDuration": "var(--seed-duration-d3)",
-        "scaleTimingFunction": "var(--seed-timing-function-easing)",
-        "translateDuration": "var(--seed-duration-d3)",
-        "translateTimingFunction": "var(--seed-timing-function-easing)"
-      }
-    },
-    "disabled": {
-      "root": {
-        "color": "var(--seed-color-fg-disabled)"
-      }
-    },
-    "pressed": {
-      "root": {
-        "scale": "1.2"
-      }
-    }
-  }
-}

package/vars/component/slider-tick.d.ts

@@ -1,23 +0,0 @@
-export declare const vars: {
-  "base": {
-    "enabled": {
-      "root": {
-        "color": "var(--seed-color-fg-neutral-inverted)"
-      }
-    }
-  },
-  "weightThin": {
-    "enabled": {
-      "root": {
-        "width": "1px"
-      }
-    }
-  },
-  "weightThick": {
-    "enabled": {
-      "root": {
-        "width": "var(--seed-dimension-x1)"
-      }
-    }
-  }
-}

package/vars/component/slider-tick.mjs

@@ -1,23 +0,0 @@
-export const vars = {
-  "base": {
-    "enabled": {
-      "root": {
-        "color": "var(--seed-color-fg-neutral-inverted)"
-      }
-    }
-  },
-  "weightThin": {
-    "enabled": {
-      "root": {
-        "width": "1px"
-      }
-    }
-  },
-  "weightThick": {
-    "enabled": {
-      "root": {
-        "width": "var(--seed-dimension-x1)"
-      }
-    }
-  }
-}

package/vars/component/slider.d.ts

@@ -1,81 +0,0 @@
-export declare const vars: {
-  "base": {
-    "enabled": {
-      "root": {
-        "gap": "var(--seed-dimension-x0_5)"
-      },
-      "control": {
-        "height": "26px"
-      },
-      "track": {
-        "height": "var(--seed-dimension-x1)",
-        "cornerRadius": "var(--seed-radius-full)",
-        "color": "var(--seed-color-palette-gray-400)"
-      },
-      "range": {
-        "cornerRadius": "var(--seed-radius-full)",
-        "color": "var(--seed-color-fg-neutral)",
-        "widthDuration": "var(--seed-duration-d3)",
-        "widthTimingFunction": "var(--seed-timing-function-easing)"
-      },
-      "thumb": {
-        "size": "var(--seed-dimension-x5)",
-        "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_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",
-        "enterDuration": "var(--seed-duration-d4)",
-        "enterTimingFunction": "var(--seed-timing-function-enter)",
-        "exitScale": "1",
-        "exitOpacity": "0",
-        "exitDuration": "var(--seed-duration-d4)",
-        "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)",
-        "height": "var(--seed-dimension-x1_5)",
-        "cornerRadius": "var(--seed-radius-r0_5)",
-        /** arrow와 thumb 사이의 거리를 정의합니다. */
-        "gutter": "var(--seed-dimension-x0_5)"
-      },
-      "valueIndicatorLabel": {
-        "color": "var(--seed-color-fg-neutral-inverted)",
-        "fontSize": "var(--seed-font-size-t3)",
-        "lineHeight": "var(--seed-line-height-t3)",
-        "fontWeight": "var(--seed-font-weight-medium)"
-      },
-      "marker": {
-        "color": "var(--seed-color-fg-neutral-muted)",
-        "fontWeight": "var(--seed-font-weight-regular)",
-        "fontSize": "var(--seed-font-size-t3)",
-        "lineHeight": "var(--seed-line-height-t3)"
-      }
-    },
-    "disabled": {
-      "track": {
-        "color": "var(--seed-color-bg-disabled)"
-      },
-      "range": {
-        "color": "var(--seed-color-fg-disabled)"
-      },
-      "thumb": {
-        "color": "var(--seed-color-fg-disabled)"
-      },
-      "marker": {
-        "color": "var(--seed-color-fg-disabled)"
-      }
-    }
-  }
-}