@seed-design/css 2.9.0 → 3.0.0

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

@@ -1,107 +0,0 @@
-export declare const vars: {
-  "base": {
-    "enabled": {
-      "root": {
-        "cornerRadius": "var(--seed-radius-r3)",
-        "color": "var(--seed-color-bg-transparent)",
-        "strokeColor": "var(--seed-color-stroke-neutral-weak)",
-        "strokeWidth": "1px",
-        "colorDuration": "var(--seed-duration-color-transition)",
-        "colorTimingFunction": "var(--seed-timing-function-easing)",
-        /** enabled 상태의 stroke 위에 selected 상태의 stroke가 fade in/out 되는 데에 걸리는 시간입니다. stroke 두께나 색상 자체를 transition하지 않습니다. */
-        "strokeDuration": "0.1s",
-        "strokeTimingFunction": "var(--seed-timing-function-easing)"
-      },
-      "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)",
-        "fontSize": "var(--seed-font-size-t5)",
-        "lineHeight": "var(--seed-line-height-t5)",
-        "fontWeight": "var(--seed-font-weight-medium)"
-      },
-      "description": {
-        "color": "var(--seed-color-fg-neutral-muted)",
-        "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)"
-      }
-    },
-    "selected": {
-      "root": {
-        "strokeWidth": "2px"
-      }
-    },
-    "enabledSelected": {
-      "root": {
-        "strokeColor": "var(--seed-color-stroke-neutral-contrast)"
-      }
-    },
-    "disabled": {
-      "root": {
-        "strokeColor": "var(--seed-color-stroke-neutral-weak)"
-      },
-      "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

@@ -1,102 +0,0 @@
-export const vars = {
-  "base": {
-    "enabled": {
-      "root": {
-        "cornerRadius": "var(--seed-radius-r3)",
-        "color": "var(--seed-color-bg-transparent)",
-        "strokeColor": "var(--seed-color-stroke-neutral-weak)",
-        "strokeWidth": "1px",
-        "colorDuration": "var(--seed-duration-color-transition)",
-        "colorTimingFunction": "var(--seed-timing-function-easing)",
-        "strokeDuration": "0.1s",
-        "strokeTimingFunction": "var(--seed-timing-function-easing)"
-      },
-      "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)",
-        "fontSize": "var(--seed-font-size-t5)",
-        "lineHeight": "var(--seed-line-height-t5)",
-        "fontWeight": "var(--seed-font-weight-medium)"
-      },
-      "description": {
-        "color": "var(--seed-color-fg-neutral-muted)",
-        "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)"
-      }
-    },
-    "selected": {
-      "root": {
-        "strokeWidth": "2px"
-      }
-    },
-    "enabledSelected": {
-      "root": {
-        "strokeColor": "var(--seed-color-stroke-neutral-contrast)"
-      }
-    },
-    "disabled": {
-      "root": {
-        "strokeColor": "var(--seed-color-stroke-neutral-weak)"
-      },
-      "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-item.d.ts

@@ -1,101 +0,0 @@
-export declare const vars: {
-  "base": {
-    "enabled": {
-      "root": {
-        "paddingX": "var(--seed-dimension-x4)",
-        "cornerRadius": "var(--seed-radius-r3)",
-        "colorDuration": "var(--seed-duration-color-transition)",
-        "colorTimingFunction": "var(--seed-timing-function-easing)",
-        "marginDuration": "var(--seed-duration-d3)",
-        "marginTimingFunction": "var(--seed-timing-function-easing)"
-      },
-      "prefixIcon": {
-        "color": "var(--seed-color-fg-neutral)"
-      },
-      "body": {
-        "gap": "var(--seed-dimension-x0_5)"
-      },
-      "label": {
-        "fontWeight": "var(--seed-font-weight-regular)",
-        "color": "var(--seed-color-fg-neutral)"
-      },
-      "description": {
-        "fontWeight": "var(--seed-font-weight-regular)",
-        "color": "var(--seed-color-fg-neutral-subtle)"
-      },
-      "indicator": {
-        "color": "var(--seed-color-fg-neutral)"
-      }
-    },
-    "pressed": {
-      "root": {
-        "color": "var(--seed-color-bg-transparent-pressed)",
-        "marginX": "var(--seed-dimension-x2)"
-      }
-    },
-    "disabled": {
-      "prefixIcon": {
-        "color": "var(--seed-color-fg-disabled)"
-      },
-      "label": {
-        "color": "var(--seed-color-fg-disabled)"
-      },
-      "description": {
-        "color": "var(--seed-color-fg-disabled)"
-      },
-      "indicator": {
-        "color": "var(--seed-color-fg-disabled)"
-      }
-    }
-  },
-  /**
-   * 뷰포트 너비와 관계없이 사용할 수 있습니다.
-   */
-  "sizeLarge": {
-    "enabled": {
-      "root": {
-        "paddingY": "var(--seed-dimension-x3)",
-        "gap": "var(--seed-dimension-x3)"
-      },
-      "prefixIcon": {
-        "size": "22px"
-      },
-      "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)"
-      },
-      "indicator": {
-        "size": "var(--seed-dimension-x3_5)"
-      }
-    }
-  },
-  /**
-   * Breakpoint `lg` 이상(데스크톱)에서만 사용하고, 모바일에서는 사용하지 않습니다. 정밀한 선택이 가능한 마우스 입력 환경에서 사이즈를 더 작게 만들고자 할 때 사용합니다.
-   */
-  "sizeMedium": {
-    "enabled": {
-      "root": {
-        "paddingY": "var(--seed-dimension-x2_5)",
-        "gap": "var(--seed-dimension-x2)"
-      },
-      "prefixIcon": {
-        "size": "var(--seed-dimension-x4_5)"
-      },
-      "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)"
-      },
-      "indicator": {
-        "size": "var(--seed-dimension-x3)"
-      }
-    }
-  }
-}

package/vars/component/select-item.mjs

@@ -1,95 +0,0 @@
-export const vars = {
-  "base": {
-    "enabled": {
-      "root": {
-        "paddingX": "var(--seed-dimension-x4)",
-        "cornerRadius": "var(--seed-radius-r3)",
-        "colorDuration": "var(--seed-duration-color-transition)",
-        "colorTimingFunction": "var(--seed-timing-function-easing)",
-        "marginDuration": "var(--seed-duration-d3)",
-        "marginTimingFunction": "var(--seed-timing-function-easing)"
-      },
-      "prefixIcon": {
-        "color": "var(--seed-color-fg-neutral)"
-      },
-      "body": {
-        "gap": "var(--seed-dimension-x0_5)"
-      },
-      "label": {
-        "fontWeight": "var(--seed-font-weight-regular)",
-        "color": "var(--seed-color-fg-neutral)"
-      },
-      "description": {
-        "fontWeight": "var(--seed-font-weight-regular)",
-        "color": "var(--seed-color-fg-neutral-subtle)"
-      },
-      "indicator": {
-        "color": "var(--seed-color-fg-neutral)"
-      }
-    },
-    "pressed": {
-      "root": {
-        "color": "var(--seed-color-bg-transparent-pressed)",
-        "marginX": "var(--seed-dimension-x2)"
-      }
-    },
-    "disabled": {
-      "prefixIcon": {
-        "color": "var(--seed-color-fg-disabled)"
-      },
-      "label": {
-        "color": "var(--seed-color-fg-disabled)"
-      },
-      "description": {
-        "color": "var(--seed-color-fg-disabled)"
-      },
-      "indicator": {
-        "color": "var(--seed-color-fg-disabled)"
-      }
-    }
-  },
-  "sizeLarge": {
-    "enabled": {
-      "root": {
-        "paddingY": "var(--seed-dimension-x3)",
-        "gap": "var(--seed-dimension-x3)"
-      },
-      "prefixIcon": {
-        "size": "22px"
-      },
-      "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)"
-      },
-      "indicator": {
-        "size": "var(--seed-dimension-x3_5)"
-      }
-    }
-  },
-  "sizeMedium": {
-    "enabled": {
-      "root": {
-        "paddingY": "var(--seed-dimension-x2_5)",
-        "gap": "var(--seed-dimension-x2)"
-      },
-      "prefixIcon": {
-        "size": "var(--seed-dimension-x4_5)"
-      },
-      "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)"
-      },
-      "indicator": {
-        "size": "var(--seed-dimension-x3)"
-      }
-    }
-  }
-}

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

@@ -1,127 +0,0 @@
-export declare const vars: {
-  "base": {
-    "enabled": {
-      "root": {
-        "strokeWidth": "1px",
-        "strokeColor": "var(--seed-color-stroke-neutral-weak)",
-        "color": "var(--seed-color-bg-transparent)",
-        "colorDuration": "var(--seed-duration-color-transition)",
-        "colorTimingFunction": "var(--seed-timing-function-easing)",
-        /** enabled 상태의 stroke 위에 invalid 상태의 stroke가 fade in/out 되는 데에 걸리는 시간입니다. stroke 두께나 색상 자체를 transition하지 않습니다. */
-        "strokeDuration": "0.1s",
-        "strokeTimingFunction": "var(--seed-timing-function-easing)"
-      },
-      "value": {
-        "fontWeight": "var(--seed-font-weight-regular)",
-        "color": "var(--seed-color-fg-neutral)"
-      },
-      "placeholder": {
-        "fontWeight": "var(--seed-font-weight-regular)",
-        "color": "var(--seed-color-fg-placeholder)"
-      },
-      "prefixIcon": {
-        "color": "var(--seed-color-fg-neutral-muted)"
-      },
-      "suffixIcon": {
-        "color": "var(--seed-color-fg-neutral-muted)",
-        "openRotateDuration": "var(--seed-duration-d3)",
-        "openRotateTimingFunction": "var(--seed-timing-function-easing)",
-        "closeRotateDuration": "var(--seed-duration-d2)",
-        "closeRotateTimingFunction": "var(--seed-timing-function-easing)"
-      }
-    },
-    "pressed": {
-      "root": {
-        "color": "var(--seed-color-bg-transparent-pressed)"
-      }
-    },
-    "invalid": {
-      "root": {
-        "strokeWidth": "2px",
-        "strokeColor": "var(--seed-color-stroke-critical-solid)"
-      }
-    },
-    "disabled": {
-      "root": {
-        "color": "var(--seed-color-bg-disabled)"
-      },
-      "value": {
-        "color": "var(--seed-color-fg-disabled)"
-      },
-      "placeholder": {
-        "color": "var(--seed-color-fg-disabled)"
-      },
-      "prefixIcon": {
-        "color": "var(--seed-color-fg-disabled)"
-      },
-      "suffixIcon": {
-        "color": "var(--seed-color-fg-disabled)"
-      }
-    },
-    "readonly": {
-      "root": {
-        "color": "var(--seed-color-bg-disabled)"
-      },
-      "value": {
-        "color": "var(--seed-color-fg-neutral)"
-      },
-      "placeholder": {
-        "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)"
-      },
-      "prefixIcon": {
-        "size": "var(--seed-dimension-x5)"
-      },
-      "suffixIcon": {
-        "size": "var(--seed-dimension-x5)"
-      }
-    }
-  },
-  /**
-   * Breakpoint `lg` 이상(데스크톱)에서만 사용하고, 모바일에서는 사용하지 않습니다. 정밀한 선택이 가능한 마우스 입력 환경에서 사이즈를 더 작게 만들고자 할 때 사용합니다.
-   */
-  "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)"
-      },
-      "prefixIcon": {
-        "size": "var(--seed-dimension-x4)"
-      },
-      "suffixIcon": {
-        "size": "var(--seed-dimension-x4)"
-      }
-    }
-  }
-}

package/vars/component/select-trigger.mjs

@@ -1,120 +0,0 @@
-export const vars = {
-  "base": {
-    "enabled": {
-      "root": {
-        "strokeWidth": "1px",
-        "strokeColor": "var(--seed-color-stroke-neutral-weak)",
-        "color": "var(--seed-color-bg-transparent)",
-        "colorDuration": "var(--seed-duration-color-transition)",
-        "colorTimingFunction": "var(--seed-timing-function-easing)",
-        "strokeDuration": "0.1s",
-        "strokeTimingFunction": "var(--seed-timing-function-easing)"
-      },
-      "value": {
-        "fontWeight": "var(--seed-font-weight-regular)",
-        "color": "var(--seed-color-fg-neutral)"
-      },
-      "placeholder": {
-        "fontWeight": "var(--seed-font-weight-regular)",
-        "color": "var(--seed-color-fg-placeholder)"
-      },
-      "prefixIcon": {
-        "color": "var(--seed-color-fg-neutral-muted)"
-      },
-      "suffixIcon": {
-        "color": "var(--seed-color-fg-neutral-muted)",
-        "openRotateDuration": "var(--seed-duration-d3)",
-        "openRotateTimingFunction": "var(--seed-timing-function-easing)",
-        "closeRotateDuration": "var(--seed-duration-d2)",
-        "closeRotateTimingFunction": "var(--seed-timing-function-easing)"
-      }
-    },
-    "pressed": {
-      "root": {
-        "color": "var(--seed-color-bg-transparent-pressed)"
-      }
-    },
-    "invalid": {
-      "root": {
-        "strokeWidth": "2px",
-        "strokeColor": "var(--seed-color-stroke-critical-solid)"
-      }
-    },
-    "disabled": {
-      "root": {
-        "color": "var(--seed-color-bg-disabled)"
-      },
-      "value": {
-        "color": "var(--seed-color-fg-disabled)"
-      },
-      "placeholder": {
-        "color": "var(--seed-color-fg-disabled)"
-      },
-      "prefixIcon": {
-        "color": "var(--seed-color-fg-disabled)"
-      },
-      "suffixIcon": {
-        "color": "var(--seed-color-fg-disabled)"
-      }
-    },
-    "readonly": {
-      "root": {
-        "color": "var(--seed-color-bg-disabled)"
-      },
-      "value": {
-        "color": "var(--seed-color-fg-neutral)"
-      },
-      "placeholder": {
-        "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)"
-      },
-      "prefixIcon": {
-        "size": "var(--seed-dimension-x5)"
-      },
-      "suffixIcon": {
-        "size": "var(--seed-dimension-x5)"
-      }
-    }
-  },
-  "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)"
-      },
-      "prefixIcon": {
-        "size": "var(--seed-dimension-x4)"
-      },
-      "suffixIcon": {
-        "size": "var(--seed-dimension-x4)"
-      }
-    }
-  }
-}