@seed-design/css 2.9.0 → 3.0.0

package/vars/component/date-picker.mjs

@@ -1,103 +0,0 @@
-export const vars = {
-  "base": {
-    "enabled": {
-      "root": {
-        "color": "var(--seed-color-bg-layer-floating)"
-      },
-      "header": {
-        "height": "var(--seed-dimension-x12)"
-      },
-      "headerLabel": {
-        "paddingX": "var(--seed-dimension-x1)",
-        "gap": "var(--seed-dimension-x1)",
-        "iconSize": "var(--seed-dimension-x5)",
-        "fontSize": "var(--seed-font-size-t5)",
-        "lineHeight": "var(--seed-line-height-t5)",
-        "fontWeight": "var(--seed-font-weight-bold)",
-        "color": "var(--seed-color-fg-neutral)"
-      },
-      "months": {
-        "gap": "var(--seed-dimension-x6)"
-      },
-      "continuousScroll": {
-        "fogHeight": "96px"
-      },
-      "weekday": {
-        "height": "var(--seed-dimension-x12)",
-        "fontSize": "var(--seed-font-size-t4)",
-        "lineHeight": "var(--seed-line-height-t4)",
-        "fontWeight": "var(--seed-font-weight-medium)",
-        "color": "var(--seed-color-fg-neutral-subtle)"
-      },
-      "monthLabel": {
-        "height": "var(--seed-dimension-x12)",
-        "fontSize": "var(--seed-font-size-t5)",
-        "lineHeight": "var(--seed-line-height-t5)",
-        "fontWeight": "var(--seed-font-weight-bold)",
-        "color": "var(--seed-color-fg-neutral)"
-      },
-      "dateCell": {
-        "minHeight": "var(--seed-dimension-x12)"
-      },
-      "dateVisual": {
-        "size": "42px",
-        "cornerRadius": "var(--seed-radius-full)",
-        "color": "var(--seed-color-bg-transparent)"
-      },
-      "dateContent": {
-        "fontSize": "var(--seed-font-size-t5)",
-        "lineHeight": "var(--seed-line-height-t5)",
-        "fontWeight": "var(--seed-font-weight-medium)",
-        "color": "var(--seed-color-fg-neutral-muted)"
-      },
-      "rangeBackground": {
-        "color": "var(--seed-color-bg-neutral-weak)"
-      },
-      "wheelSelectionIndicator": {
-        "cornerRadius": "var(--seed-radius-r2)",
-        "color": "var(--seed-color-bg-neutral-weak)"
-      },
-      "wheelContainer": {
-        "height": "336px"
-      },
-      "wheelItem": {
-        "paddingX": "var(--seed-dimension-x4)",
-        "fontSize": "var(--seed-font-size-t10-static)",
-        "lineHeight": "var(--seed-line-height-t10-static)",
-        "fontWeight": "var(--seed-font-weight-medium)",
-        "color": "var(--seed-color-fg-disabled)"
-      }
-    },
-    "pressed": {
-      "dateVisual": {
-        "color": "var(--seed-color-bg-transparent-pressed)"
-      }
-    },
-    "today": {
-      "dateVisual": {
-        "color": "var(--seed-color-bg-neutral-weak)"
-      }
-    },
-    "selected": {
-      "dateVisual": {
-        "color": "var(--seed-color-bg-neutral-inverted)"
-      },
-      "dateContent": {
-        "color": "var(--seed-color-fg-neutral-inverted)"
-      },
-      "wheelItem": {
-        "color": "var(--seed-color-fg-neutral)"
-      }
-    },
-    "readOnly": {
-      "dateVisual": {
-        "color": "var(--seed-color-palette-gray-600)"
-      }
-    },
-    "disabled": {
-      "dateContent": {
-        "color": "var(--seed-color-fg-disabled)"
-      }
-    }
-  }
-}

package/vars/component/dialog-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/dialog-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/dialog.d.ts

@@ -1,91 +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)",
-        "cornerRadius": "var(--seed-radius-r5)",
-        /** viewport width 또는 parent width에 대한 비율입니다. viewport `md` 미만에서 적용합니다. */
-        "widthFraction": "0.9",
-        /** viewport height 또는 parent height에 대한 최대 비율입니다. */
-        "maxHeightFraction": "0.8",
-        "marginX": "var(--seed-dimension-x5)",
-        "enterDuration": "var(--seed-duration-d4)",
-        "enterTimingFunction": "var(--seed-timing-function-enter-expressive)",
-        "enterOpacity": "0",
-        "enterScale": "1.3",
-        "exitDuration": "var(--seed-duration-d2)",
-        "exitTimingFunction": "var(--seed-timing-function-exit)",
-        "exitOpacity": "0"
-      },
-      "header": {
-        "gap": "var(--seed-dimension-x1_5)",
-        "paddingX": "var(--seed-dimension-x6)",
-        "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)",
-        "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": "var(--seed-dimension-x7)",
-        "fromRight": "var(--seed-dimension-x6)"
-      }
-    },
-    "scrolled": {
-      "body": {
-        /** 본문이 스크롤된(scrolled) 상태에서 body 상단에 나타나는 divider의 색상입니다. */
-        "strokeColor": "var(--seed-color-stroke-neutral-muted)",
-        /** 본문이 스크롤된(scrolled) 상태에서 body 상단에 나타나는 divider의 두께입니다. */
-        "strokeWidth": "1px"
-      }
-    }
-  },
-  "sizeMedium": {
-    "enabled": {
-      "content": {
-        "maxWidth": "480px"
-      }
-    }
-  },
-  "sizeLarge": {
-    "enabled": {
-      "content": {
-        "maxWidth": "800px"
-      }
-    }
-  }
-}

package/vars/component/dialog.mjs

@@ -1,83 +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)",
-        "cornerRadius": "var(--seed-radius-r5)",
-        "widthFraction": "0.9",
-        "maxHeightFraction": "0.8",
-        "marginX": "var(--seed-dimension-x5)",
-        "enterDuration": "var(--seed-duration-d4)",
-        "enterTimingFunction": "var(--seed-timing-function-enter-expressive)",
-        "enterOpacity": "0",
-        "enterScale": "1.3",
-        "exitDuration": "var(--seed-duration-d2)",
-        "exitTimingFunction": "var(--seed-timing-function-exit)",
-        "exitOpacity": "0"
-      },
-      "header": {
-        "gap": "var(--seed-dimension-x1_5)",
-        "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": "var(--seed-dimension-x7)",
-        "fromRight": "var(--seed-dimension-x6)"
-      }
-    },
-    "scrolled": {
-      "body": {
-        "strokeColor": "var(--seed-color-stroke-neutral-muted)",
-        "strokeWidth": "1px"
-      }
-    }
-  },
-  "sizeMedium": {
-    "enabled": {
-      "content": {
-        "maxWidth": "480px"
-      }
-    }
-  },
-  "sizeLarge": {
-    "enabled": {
-      "content": {
-        "maxWidth": "800px"
-      }
-    }
-  }
-}

package/vars/component/divider.d.ts

@@ -1,9 +0,0 @@
-export declare const vars: {
-  "base": {
-    "enabled": {
-      "root": {
-        "thickness": "1px"
-      }
-    }
-  }
-}

package/vars/component/divider.mjs

@@ -1,9 +0,0 @@
-export const vars = {
-  "base": {
-    "enabled": {
-      "root": {
-        "thickness": "1px"
-      }
-    }
-  }
-}

package/vars/component/extended-action-sheet-close-button.d.ts

@@ -1,24 +0,0 @@
-export declare const vars: {
-  "base": {
-    "enabled": {
-      "root": {
-        "color": "var(--seed-color-bg-neutral-weak)",
-        "minHeight": "52px",
-        "cornerRadius": "var(--seed-radius-r3)",
-        "paddingX": "var(--seed-dimension-x5)",
-        "paddingY": "var(--seed-dimension-x3_5)"
-      },
-      "label": {
-        "color": "var(--seed-color-fg-neutral)",
-        "fontSize": "var(--seed-font-size-t5)",
-        "lineHeight": "var(--seed-line-height-t5)",
-        "fontWeight": "var(--seed-font-weight-medium)"
-      }
-    },
-    "pressed": {
-      "root": {
-        "color": "var(--seed-color-bg-neutral-weak-pressed)"
-      }
-    }
-  }
-}

package/vars/component/extended-action-sheet-close-button.mjs

@@ -1,24 +0,0 @@
-export const vars = {
-  "base": {
-    "enabled": {
-      "root": {
-        "color": "var(--seed-color-bg-neutral-weak)",
-        "minHeight": "52px",
-        "cornerRadius": "var(--seed-radius-r3)",
-        "paddingX": "var(--seed-dimension-x5)",
-        "paddingY": "var(--seed-dimension-x3_5)"
-      },
-      "label": {
-        "color": "var(--seed-color-fg-neutral)",
-        "fontSize": "var(--seed-font-size-t5)",
-        "lineHeight": "var(--seed-line-height-t5)",
-        "fontWeight": "var(--seed-font-weight-medium)"
-      }
-    },
-    "pressed": {
-      "root": {
-        "color": "var(--seed-color-bg-neutral-weak-pressed)"
-      }
-    }
-  }
-}

package/vars/component/extended-action-sheet-item.d.ts

@@ -1,46 +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"
-      },
-      "label": {
-        "fontSize": "var(--seed-font-size-t5)",
-        "lineHeight": "var(--seed-line-height-t5)",
-        "fontWeight": "var(--seed-font-weight-regular)"
-      }
-    },
-    "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)"
-      }
-    }
-  }
-}

package/vars/component/extended-action-sheet-item.mjs

@@ -1,46 +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"
-      },
-      "label": {
-        "fontSize": "var(--seed-font-size-t5)",
-        "lineHeight": "var(--seed-line-height-t5)",
-        "fontWeight": "var(--seed-font-weight-regular)"
-      }
-    },
-    "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)"
-      }
-    }
-  }
-}

package/vars/component/extended-action-sheet.d.ts

@@ -1,55 +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)",
-        "paddingY": "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/extended-action-sheet.mjs

@@ -1,55 +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)",
-        "paddingY": "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)"
-      }
-    }
-  }
-}