@seed-design/css 2.8.3 → 3.0.0

package/vars/component/page-banner.mjs

@@ -1,339 +0,0 @@
-export const vars = {
-  "base": {
-    "enabled": {
-      "root": {
-        "paddingX": "var(--seed-dimension-x4)",
-        "paddingY": "var(--seed-dimension-x2_5)",
-        "minHeight": "var(--seed-dimension-x10)"
-      },
-      "prefixIcon": {
-        "size": "var(--seed-dimension-x4)",
-        "marginRight": "var(--seed-dimension-x2)"
-      },
-      "content": {
-        "gap": "var(--seed-dimension-x1_5)"
-      },
-      "title": {
-        "fontSize": "var(--seed-font-size-t4)",
-        "lineHeight": "var(--seed-line-height-t4)",
-        "fontWeight": "var(--seed-font-weight-bold)"
-      },
-      "description": {
-        "fontSize": "var(--seed-font-size-t4)",
-        "lineHeight": "var(--seed-line-height-t4)",
-        "fontWeight": "var(--seed-font-weight-medium)"
-      },
-      "button": {
-        "targetHeight": "var(--seed-dimension-x10)",
-        "fontSize": "var(--seed-font-size-t3)",
-        "lineHeight": "var(--seed-line-height-t3)",
-        "fontWeight": "var(--seed-font-weight-bold)"
-      },
-      "suffixIcon": {
-        "size": "var(--seed-dimension-x4)",
-        "marginLeft": "var(--seed-dimension-x2)"
-      }
-    }
-  },
-  "toneNeutralVariantWeak": {
-    "enabled": {
-      "root": {
-        "color": "var(--seed-color-bg-neutral-weak)"
-      },
-      "prefixIcon": {
-        "color": "var(--seed-color-fg-neutral)"
-      },
-      "title": {
-        "color": "var(--seed-color-fg-neutral)"
-      },
-      "description": {
-        "color": "var(--seed-color-fg-neutral)"
-      },
-      "button": {
-        "color": "var(--seed-color-fg-neutral)"
-      },
-      "suffixIcon": {
-        "color": "var(--seed-color-fg-neutral)"
-      }
-    },
-    "pressed": {
-      "root": {
-        "color": "var(--seed-color-bg-neutral-weak-pressed)"
-      }
-    }
-  },
-  "toneNeutralVariantSolid": {
-    "enabled": {
-      "root": {
-        "color": "var(--seed-color-bg-neutral-inverted)"
-      },
-      "prefixIcon": {
-        "color": "var(--seed-color-fg-neutral-inverted)"
-      },
-      "title": {
-        "color": "var(--seed-color-fg-neutral-inverted)"
-      },
-      "description": {
-        "color": "var(--seed-color-fg-neutral-inverted)"
-      },
-      "button": {
-        "color": "var(--seed-color-fg-neutral-inverted)"
-      },
-      "suffixIcon": {
-        "color": "var(--seed-color-fg-neutral-inverted)"
-      }
-    },
-    "pressed": {
-      "root": {
-        "color": "var(--seed-color-bg-neutral-inverted-pressed)"
-      }
-    }
-  },
-  "tonePositiveVariantWeak": {
-    "enabled": {
-      "root": {
-        "color": "var(--seed-color-bg-positive-weak)"
-      },
-      "prefixIcon": {
-        "color": "var(--seed-color-fg-positive-contrast)"
-      },
-      "title": {
-        "color": "var(--seed-color-fg-positive-contrast)"
-      },
-      "description": {
-        "color": "var(--seed-color-fg-positive-contrast)"
-      },
-      "button": {
-        "color": "var(--seed-color-fg-positive-contrast)"
-      },
-      "suffixIcon": {
-        "color": "var(--seed-color-fg-positive-contrast)"
-      }
-    },
-    "pressed": {
-      "root": {
-        "color": "var(--seed-color-bg-positive-weak-pressed)"
-      }
-    }
-  },
-  "tonePositiveVariantSolid": {
-    "enabled": {
-      "root": {
-        "color": "var(--seed-color-bg-positive-solid)"
-      },
-      "prefixIcon": {
-        "color": "var(--seed-color-palette-static-white)"
-      },
-      "title": {
-        "color": "var(--seed-color-palette-static-white)"
-      },
-      "description": {
-        "color": "var(--seed-color-palette-static-white)"
-      },
-      "button": {
-        "color": "var(--seed-color-palette-static-white)"
-      },
-      "suffixIcon": {
-        "color": "var(--seed-color-palette-static-white)"
-      }
-    },
-    "pressed": {
-      "root": {
-        "color": "var(--seed-color-bg-positive-solid-pressed)"
-      }
-    }
-  },
-  "toneInformativeVariantWeak": {
-    "enabled": {
-      "root": {
-        "color": "var(--seed-color-bg-informative-weak)"
-      },
-      "prefixIcon": {
-        "color": "var(--seed-color-fg-informative-contrast)"
-      },
-      "title": {
-        "color": "var(--seed-color-fg-informative-contrast)"
-      },
-      "description": {
-        "color": "var(--seed-color-fg-informative-contrast)"
-      },
-      "button": {
-        "color": "var(--seed-color-fg-informative-contrast)"
-      },
-      "suffixIcon": {
-        "color": "var(--seed-color-fg-informative-contrast)"
-      }
-    },
-    "pressed": {
-      "root": {
-        "color": "var(--seed-color-bg-informative-weak-pressed)"
-      }
-    }
-  },
-  "toneInformativeVariantSolid": {
-    "enabled": {
-      "root": {
-        "color": "var(--seed-color-bg-informative-solid)"
-      },
-      "prefixIcon": {
-        "color": "var(--seed-color-palette-static-white)"
-      },
-      "title": {
-        "color": "var(--seed-color-palette-static-white)"
-      },
-      "description": {
-        "color": "var(--seed-color-palette-static-white)"
-      },
-      "button": {
-        "color": "var(--seed-color-palette-static-white)"
-      },
-      "suffixIcon": {
-        "color": "var(--seed-color-palette-static-white)"
-      }
-    },
-    "pressed": {
-      "root": {
-        "color": "var(--seed-color-bg-informative-solid-pressed)"
-      }
-    }
-  },
-  "toneWarningVariantWeak": {
-    "enabled": {
-      "root": {
-        "color": "var(--seed-color-bg-warning-weak)"
-      },
-      "prefixIcon": {
-        "color": "var(--seed-color-fg-warning-contrast)"
-      },
-      "title": {
-        "color": "var(--seed-color-fg-warning-contrast)"
-      },
-      "description": {
-        "color": "var(--seed-color-fg-warning-contrast)"
-      },
-      "button": {
-        "color": "var(--seed-color-fg-warning-contrast)"
-      },
-      "suffixIcon": {
-        "color": "var(--seed-color-fg-warning-contrast)"
-      }
-    },
-    "pressed": {
-      "root": {
-        "color": "var(--seed-color-bg-warning-weak-pressed)"
-      }
-    }
-  },
-  "toneWarningVariantSolid": {
-    "enabled": {
-      "root": {
-        "color": "var(--seed-color-bg-warning-solid)"
-      },
-      "prefixIcon": {
-        "color": "var(--seed-color-palette-static-black-alpha-900)"
-      },
-      "title": {
-        "color": "var(--seed-color-palette-static-black-alpha-900)"
-      },
-      "description": {
-        "color": "var(--seed-color-palette-static-black-alpha-900)"
-      },
-      "button": {
-        "color": "var(--seed-color-palette-static-black-alpha-900)"
-      },
-      "suffixIcon": {
-        "color": "var(--seed-color-palette-static-black-alpha-900)"
-      }
-    },
-    "pressed": {
-      "root": {
-        "color": "var(--seed-color-bg-warning-solid-pressed)"
-      }
-    }
-  },
-  "toneCriticalVariantWeak": {
-    "enabled": {
-      "root": {
-        "color": "var(--seed-color-bg-critical-weak)"
-      },
-      "prefixIcon": {
-        "color": "var(--seed-color-fg-critical-contrast)"
-      },
-      "title": {
-        "color": "var(--seed-color-fg-critical-contrast)"
-      },
-      "description": {
-        "color": "var(--seed-color-fg-critical-contrast)"
-      },
-      "button": {
-        "color": "var(--seed-color-fg-critical-contrast)"
-      },
-      "suffixIcon": {
-        "color": "var(--seed-color-fg-critical-contrast)"
-      }
-    },
-    "pressed": {
-      "root": {
-        "color": "var(--seed-color-bg-critical-weak-pressed)"
-      }
-    }
-  },
-  "toneCriticalVariantSolid": {
-    "enabled": {
-      "root": {
-        "color": "var(--seed-color-bg-critical-solid)"
-      },
-      "prefixIcon": {
-        "color": "var(--seed-color-palette-static-white)"
-      },
-      "title": {
-        "color": "var(--seed-color-palette-static-white)"
-      },
-      "description": {
-        "color": "var(--seed-color-palette-static-white)"
-      },
-      "button": {
-        "color": "var(--seed-color-palette-static-white)"
-      },
-      "suffixIcon": {
-        "color": "var(--seed-color-palette-static-white)"
-      }
-    },
-    "pressed": {
-      "root": {
-        "color": "var(--seed-color-bg-critical-solid-pressed)"
-      }
-    }
-  },
-  "toneMagicVariantWeak": {
-    "enabled": {
-      "root": {
-        "gradient": {
-          "serialized": "var(--seed-gradient-glow-magic)"
-        }
-      },
-      "prefixIcon": {
-        "color": "var(--seed-color-fg-neutral)"
-      },
-      "title": {
-        "color": "var(--seed-color-fg-neutral)"
-      },
-      "description": {
-        "color": "var(--seed-color-fg-neutral)"
-      },
-      "button": {
-        "color": "var(--seed-color-fg-neutral)"
-      },
-      "suffixIcon": {
-        "color": "var(--seed-color-fg-neutral)"
-      }
-    },
-    "pressed": {
-      "root": {
-        "gradient": {
-          "serialized": "var(--seed-gradient-glow-magic-pressed)"
-        }
-      }
-    }
-  }
-}

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

@@ -1,33 +0,0 @@
-export declare const vars: {
-  "base": {
-    "enabled": {
-      "root": {
-        "color": "var(--seed-color-bg-transparent)",
-        "colorDuration": "var(--seed-duration-color-transition)",
-        "colorTimingFunction": "var(--seed-timing-function-easing)",
-        "scaleDuration": "var(--seed-duration-pressed-scale)",
-        "scaleTimingFunction": "var(--seed-timing-function-pressed-scale)",
-        "size": "var(--seed-dimension-x10)",
-        "cornerRadius": "var(--seed-radius-r2)"
-      },
-      "icon": {
-        "color": "var(--seed-color-fg-neutral)",
-        "size": "var(--seed-dimension-x4)"
-      }
-    },
-    "pressed": {
-      "root": {
-        "color": "var(--seed-color-bg-transparent-pressed)",
-        "scale": "var(--seed-scale-s97)"
-      }
-    },
-    "disabled": {
-      "root": {
-        "color": "var(--seed-color-bg-transparent)"
-      },
-      "icon": {
-        "color": "var(--seed-color-fg-disabled)"
-      }
-    }
-  }
-}

package/vars/component/pagination-button.mjs

@@ -1,33 +0,0 @@
-export const vars = {
-  "base": {
-    "enabled": {
-      "root": {
-        "color": "var(--seed-color-bg-transparent)",
-        "colorDuration": "var(--seed-duration-color-transition)",
-        "colorTimingFunction": "var(--seed-timing-function-easing)",
-        "scaleDuration": "var(--seed-duration-pressed-scale)",
-        "scaleTimingFunction": "var(--seed-timing-function-pressed-scale)",
-        "size": "var(--seed-dimension-x10)",
-        "cornerRadius": "var(--seed-radius-r2)"
-      },
-      "icon": {
-        "color": "var(--seed-color-fg-neutral)",
-        "size": "var(--seed-dimension-x4)"
-      }
-    },
-    "pressed": {
-      "root": {
-        "color": "var(--seed-color-bg-transparent-pressed)",
-        "scale": "var(--seed-scale-s97)"
-      }
-    },
-    "disabled": {
-      "root": {
-        "color": "var(--seed-color-bg-transparent)"
-      },
-      "icon": {
-        "color": "var(--seed-color-fg-disabled)"
-      }
-    }
-  }
-}

package/vars/component/pagination-page-item.d.ts

@@ -1,54 +0,0 @@
-export declare const vars: {
-  "base": {
-    "enabled": {
-      "root": {
-        "color": "var(--seed-color-bg-transparent)",
-        "scaleDuration": "var(--seed-duration-pressed-scale)",
-        "scaleTimingFunction": "var(--seed-timing-function-pressed-scale)",
-        "size": "var(--seed-dimension-x10)",
-        "cornerRadius": "var(--seed-radius-r2)"
-      },
-      "label": {
-        "color": "var(--seed-color-fg-neutral)",
-        "fontSize": "var(--seed-font-size-t4)",
-        "lineHeight": "var(--seed-line-height-t4)",
-        "fontWeight": "var(--seed-font-weight-bold)"
-      }
-    },
-    "pressed": {
-      "root": {
-        "color": "var(--seed-color-bg-transparent-pressed)",
-        "scale": "var(--seed-scale-s97)"
-      }
-    },
-    "selected": {
-      "root": {
-        "color": "var(--seed-color-bg-neutral-inverted)"
-      },
-      "label": {
-        "color": "var(--seed-color-fg-neutral-inverted)"
-      }
-    },
-    "selectedPressed": {
-      "root": {
-        "color": "var(--seed-color-bg-neutral-inverted-pressed)"
-      }
-    },
-    "disabled": {
-      "root": {
-        "color": "var(--seed-color-bg-transparent)"
-      },
-      "label": {
-        "color": "var(--seed-color-fg-disabled)"
-      }
-    },
-    "selectedDisabled": {
-      "root": {
-        "color": "var(--seed-color-bg-disabled)"
-      },
-      "label": {
-        "color": "var(--seed-color-fg-disabled)"
-      }
-    }
-  }
-}

package/vars/component/pagination-page-item.mjs

@@ -1,54 +0,0 @@
-export const vars = {
-  "base": {
-    "enabled": {
-      "root": {
-        "color": "var(--seed-color-bg-transparent)",
-        "scaleDuration": "var(--seed-duration-pressed-scale)",
-        "scaleTimingFunction": "var(--seed-timing-function-pressed-scale)",
-        "size": "var(--seed-dimension-x10)",
-        "cornerRadius": "var(--seed-radius-r2)"
-      },
-      "label": {
-        "color": "var(--seed-color-fg-neutral)",
-        "fontSize": "var(--seed-font-size-t4)",
-        "lineHeight": "var(--seed-line-height-t4)",
-        "fontWeight": "var(--seed-font-weight-bold)"
-      }
-    },
-    "pressed": {
-      "root": {
-        "color": "var(--seed-color-bg-transparent-pressed)",
-        "scale": "var(--seed-scale-s97)"
-      }
-    },
-    "selected": {
-      "root": {
-        "color": "var(--seed-color-bg-neutral-inverted)"
-      },
-      "label": {
-        "color": "var(--seed-color-fg-neutral-inverted)"
-      }
-    },
-    "selectedPressed": {
-      "root": {
-        "color": "var(--seed-color-bg-neutral-inverted-pressed)"
-      }
-    },
-    "disabled": {
-      "root": {
-        "color": "var(--seed-color-bg-transparent)"
-      },
-      "label": {
-        "color": "var(--seed-color-fg-disabled)"
-      }
-    },
-    "selectedDisabled": {
-      "root": {
-        "color": "var(--seed-color-bg-disabled)"
-      },
-      "label": {
-        "color": "var(--seed-color-fg-disabled)"
-      }
-    }
-  }
-}

package/vars/component/progress-circle.d.ts

@@ -1,88 +0,0 @@
-export declare const vars: {
-  /**
-   * 주로 전체 페이지 로딩에 사용합니다.
-   */
-  "size40": {
-    "enabled": {
-      "root": {
-        "size": "var(--seed-dimension-x10)",
-        "thickness": "5px"
-      }
-    }
-  },
-  /**
-   * 특정 요소 안에서 사용하는 경우 사용합니다.
-   */
-  "size24": {
-    "enabled": {
-      "root": {
-        "size": "var(--seed-dimension-x6)",
-        "thickness": "3px"
-      }
-    }
-  },
-  /**
-   * 대기 시간이 얼마나 남은지 아는 상황일 때 사용합니다. 진행 상황에 맞춰서 원을 채웁니다.
-   */
-  "indeterminateFalse": {
-    "enabled": {
-      "range": {
-        "lengthDuration": "300ms",
-        "lengthTimingFunction": "cubic-bezier(0, 0, 0.15, 1)"
-      }
-    }
-  },
-  /**
-   * 대기 시간이 얼마나 남은지 모르는 상황일 때 사용합니다. 계속해서 회전하는 동작을 합니다.
-   */
-  "indeterminateTrue": {
-    "enabled": {
-      "range": {
-        "lengthDuration": "1.2s",
-        "rotateDuration": "1.2s",
-        "headTimingFunction": "cubic-bezier(0.35, 0, 0.65, 1)",
-        "tailTimingFunction": "cubic-bezier(0.35, 0, 0.65, 0.6)",
-        "rotateTimingFunction": "cubic-bezier(0.35, 0.25, 0.65, 0.75)"
-      }
-    }
-  },
-  /**
-   * 가장 보편적으로 사용되며 스타일보다는 로딩 상태의 인식이 더 중요한 경우 사용합니다.
-   */
-  "toneNeutral": {
-    "enabled": {
-      "track": {
-        "color": "var(--seed-color-palette-gray-200)"
-      },
-      "range": {
-        "color": "var(--seed-color-palette-gray-500)"
-      }
-    }
-  },
-  /**
-   * 사용자 경험의 초기 단계에서 브랜드 컬러를 통해 주요 전환점을 강조할 때 사용합니다.
-   */
-  "toneBrand": {
-    "enabled": {
-      "track": {
-        "color": "var(--seed-color-palette-carrot-200)"
-      },
-      "range": {
-        "color": "var(--seed-color-bg-brand-solid)"
-      }
-    }
-  },
-  /**
-   * 화면 전체를 어둡게 덮는 오버레이(Overlay) 위에 로딩 상태를 표시할 때 사용합니다.
-   */
-  "toneStaticWhite": {
-    "enabled": {
-      "track": {
-        "color": "var(--seed-color-palette-static-white-alpha-300)"
-      },
-      "range": {
-        "color": "var(--seed-color-palette-static-white)"
-      }
-    }
-  }
-}

package/vars/component/progress-circle.mjs

@@ -1,67 +0,0 @@
-export const vars = {
-  "size40": {
-    "enabled": {
-      "root": {
-        "size": "var(--seed-dimension-x10)",
-        "thickness": "5px"
-      }
-    }
-  },
-  "size24": {
-    "enabled": {
-      "root": {
-        "size": "var(--seed-dimension-x6)",
-        "thickness": "3px"
-      }
-    }
-  },
-  "indeterminateFalse": {
-    "enabled": {
-      "range": {
-        "lengthDuration": "300ms",
-        "lengthTimingFunction": "cubic-bezier(0, 0, 0.15, 1)"
-      }
-    }
-  },
-  "indeterminateTrue": {
-    "enabled": {
-      "range": {
-        "lengthDuration": "1.2s",
-        "rotateDuration": "1.2s",
-        "headTimingFunction": "cubic-bezier(0.35, 0, 0.65, 1)",
-        "tailTimingFunction": "cubic-bezier(0.35, 0, 0.65, 0.6)",
-        "rotateTimingFunction": "cubic-bezier(0.35, 0.25, 0.65, 0.75)"
-      }
-    }
-  },
-  "toneNeutral": {
-    "enabled": {
-      "track": {
-        "color": "var(--seed-color-palette-gray-200)"
-      },
-      "range": {
-        "color": "var(--seed-color-palette-gray-500)"
-      }
-    }
-  },
-  "toneBrand": {
-    "enabled": {
-      "track": {
-        "color": "var(--seed-color-palette-carrot-200)"
-      },
-      "range": {
-        "color": "var(--seed-color-bg-brand-solid)"
-      }
-    }
-  },
-  "toneStaticWhite": {
-    "enabled": {
-      "track": {
-        "color": "var(--seed-color-palette-static-white-alpha-300)"
-      },
-      "range": {
-        "color": "var(--seed-color-palette-static-white)"
-      }
-    }
-  }
-}