npm - @seed-design/css - Versions diffs - 2.2.2 → 2.3.0 - Mend

@seed-design/css 2.2.2 → 2.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (48) hide show

package/all.css +1274 -198
package/all.layered.css +1274 -198
package/all.layered.min.css +1 -1
package/all.min.css +1 -1
package/package.json +1 -1
package/recipes/content-dialog.css +258 -0
package/recipes/content-dialog.d.ts +24 -0
package/recipes/content-dialog.layered.css +290 -0
package/recipes/content-dialog.layered.mjs +71 -0
package/recipes/content-dialog.mjs +71 -0
package/recipes/quantity-picker.css +230 -0
package/recipes/quantity-picker.d.ts +24 -0
package/recipes/quantity-picker.layered.css +273 -0
package/recipes/quantity-picker.layered.mjs +72 -0
package/recipes/quantity-picker.mjs +72 -0
package/recipes/select-item.css +161 -0
package/recipes/select-item.d.ts +28 -0
package/recipes/select-item.layered.css +191 -0
package/recipes/select-item.layered.mjs +60 -0
package/recipes/select-item.mjs +60 -0
package/recipes/select-trigger.css +208 -0
package/recipes/select-trigger.d.ts +28 -0
package/recipes/select-trigger.layered.css +227 -0
package/recipes/select-trigger.layered.mjs +56 -0
package/recipes/select-trigger.mjs +56 -0
package/recipes/select.css +93 -0
package/recipes/select.d.ts +28 -0
package/recipes/select.layered.css +108 -0
package/recipes/select.layered.mjs +56 -0
package/recipes/select.mjs +56 -0
package/vars/component/alert-dialog.d.ts +52 -0
package/vars/component/alert-dialog.mjs +52 -0
package/vars/component/dialog-close-button.d.ts +24 -0
package/vars/component/dialog-close-button.mjs +24 -0
package/vars/component/dialog.d.ts +50 -11
package/vars/component/dialog.mjs +42 -11
package/vars/component/index.d.ts +7 -0
package/vars/component/index.mjs +7 -0
package/vars/component/quantity-picker-button.d.ts +78 -0
package/vars/component/quantity-picker-button.mjs +78 -0
package/vars/component/quantity-picker.d.ts +80 -0
package/vars/component/quantity-picker.mjs +80 -0
package/vars/component/select-item.d.ts +101 -0
package/vars/component/select-item.mjs +95 -0
package/vars/component/select-trigger.d.ts +127 -0
package/vars/component/select-trigger.mjs +120 -0
package/vars/component/select.d.ts +62 -0
package/vars/component/select.mjs +54 -0

package/vars/component/quantity-picker-button.d.ts ADDED Viewed

@@ -0,0 +1,78 @@
+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)"
+      },
+      "icon": {
+        "color": "var(--seed-color-fg-neutral)"
+      },
+      "progressCircle": {
+        "trackColor": "var(--seed-color-palette-gray-500)",
+        "rangeColor": "var(--seed-color-fg-neutral)"
+      }
+    },
+    "pressed": {
+      "root": {
+        "color": "var(--seed-color-bg-transparent-pressed)"
+      }
+    },
+    "disabled": {
+      "icon": {
+        "color": "var(--seed-color-fg-disabled)"
+      }
+    },
+    "loading": {
+      "root": {
+        "color": "var(--seed-color-bg-transparent-pressed)"
+      }
+    }
+  },
+  "sizeSmall": {
+    "enabled": {
+      "root": {
+        "size": "var(--seed-dimension-x9)",
+        "cornerRadius": "var(--seed-radius-r2)"
+      },
+      "icon": {
+        "size": "16px"
+      },
+      "progressCircle": {
+        "size": "16px",
+        "thickness": "2px"
+      }
+    }
+  },
+  "sizeMedium": {
+    "enabled": {
+      "root": {
+        "size": "var(--seed-dimension-x10)",
+        "cornerRadius": "var(--seed-radius-r2)"
+      },
+      "icon": {
+        "size": "18px"
+      },
+      "progressCircle": {
+        "size": "18px",
+        "thickness": "2px"
+      }
+    }
+  },
+  "sizeLarge": {
+    "enabled": {
+      "root": {
+        "size": "var(--seed-dimension-x13)",
+        "cornerRadius": "var(--seed-radius-r3)"
+      },
+      "icon": {
+        "size": "22px"
+      },
+      "progressCircle": {
+        "size": "22px",
+        "thickness": "2px"
+      }
+    }
+  }
+}

package/vars/component/quantity-picker-button.mjs ADDED Viewed

@@ -0,0 +1,78 @@
+export const vars = {
+  "base": {
+    "enabled": {
+      "root": {
+        "color": "var(--seed-color-bg-transparent)",
+        "colorDuration": "var(--seed-duration-color-transition)",
+        "colorTimingFunction": "var(--seed-timing-function-easing)"
+      },
+      "icon": {
+        "color": "var(--seed-color-fg-neutral)"
+      },
+      "progressCircle": {
+        "trackColor": "var(--seed-color-palette-gray-500)",
+        "rangeColor": "var(--seed-color-fg-neutral)"
+      }
+    },
+    "pressed": {
+      "root": {
+        "color": "var(--seed-color-bg-transparent-pressed)"
+      }
+    },
+    "disabled": {
+      "icon": {
+        "color": "var(--seed-color-fg-disabled)"
+      }
+    },
+    "loading": {
+      "root": {
+        "color": "var(--seed-color-bg-transparent-pressed)"
+      }
+    }
+  },
+  "sizeSmall": {
+    "enabled": {
+      "root": {
+        "size": "var(--seed-dimension-x9)",
+        "cornerRadius": "var(--seed-radius-r2)"
+      },
+      "icon": {
+        "size": "16px"
+      },
+      "progressCircle": {
+        "size": "16px",
+        "thickness": "2px"
+      }
+    }
+  },
+  "sizeMedium": {
+    "enabled": {
+      "root": {
+        "size": "var(--seed-dimension-x10)",
+        "cornerRadius": "var(--seed-radius-r2)"
+      },
+      "icon": {
+        "size": "18px"
+      },
+      "progressCircle": {
+        "size": "18px",
+        "thickness": "2px"
+      }
+    }
+  },
+  "sizeLarge": {
+    "enabled": {
+      "root": {
+        "size": "var(--seed-dimension-x13)",
+        "cornerRadius": "var(--seed-radius-r3)"
+      },
+      "icon": {
+        "size": "22px"
+      },
+      "progressCircle": {
+        "size": "22px",
+        "thickness": "2px"
+      }
+    }
+  }
+}

package/vars/component/quantity-picker.d.ts ADDED Viewed

@@ -0,0 +1,80 @@
+export declare const vars: {
+  "base": {
+    "enabled": {
+      "root": {
+        "color": "var(--seed-color-bg-layer-default)",
+        "strokeWidth": "1px",
+        "strokeColor": "var(--seed-color-stroke-neutral-weak)"
+      },
+      "valueDisplay": {
+        "fontWeight": "var(--seed-font-weight-medium)",
+        "color": "var(--seed-color-fg-neutral)"
+      },
+      "divider": {
+        "color": "var(--seed-color-stroke-neutral-subtle)"
+      }
+    },
+    "invalid": {
+      "root": {
+        "strokeWidth": "2px",
+        "strokeColor": "var(--seed-color-stroke-critical-solid)"
+      }
+    },
+    "disabled": {
+      "valueDisplay": {
+        "color": "var(--seed-color-fg-disabled)"
+      }
+    }
+  },
+  "sizeSmall": {
+    "enabled": {
+      "root": {
+        "height": "var(--seed-dimension-x9)",
+        "cornerRadius": "var(--seed-radius-r2)"
+      },
+      "valueDisplay": {
+        "paddingX": "var(--seed-dimension-x2)",
+        "fontSize": "var(--seed-font-size-t5)",
+        "lineHeight": "var(--seed-line-height-t5)"
+      },
+      "divider": {
+        "width": "1px",
+        "height": "var(--seed-dimension-x4)"
+      }
+    }
+  },
+  "sizeMedium": {
+    "enabled": {
+      "root": {
+        "height": "var(--seed-dimension-x10)",
+        "cornerRadius": "var(--seed-radius-r2)"
+      },
+      "valueDisplay": {
+        "paddingX": "var(--seed-dimension-x2)",
+        "fontSize": "var(--seed-font-size-t5)",
+        "lineHeight": "var(--seed-line-height-t5)"
+      },
+      "divider": {
+        "width": "1px",
+        "height": "var(--seed-dimension-x4)"
+      }
+    }
+  },
+  "sizeLarge": {
+    "enabled": {
+      "root": {
+        "height": "var(--seed-dimension-x13)",
+        "cornerRadius": "var(--seed-radius-r3)"
+      },
+      "valueDisplay": {
+        "paddingX": "var(--seed-dimension-x2)",
+        "fontSize": "var(--seed-font-size-t6)",
+        "lineHeight": "var(--seed-line-height-t6)"
+      },
+      "divider": {
+        "width": "1px",
+        "height": "var(--seed-dimension-x4)"
+      }
+    }
+  }
+}

package/vars/component/quantity-picker.mjs ADDED Viewed

@@ -0,0 +1,80 @@
+export const vars = {
+  "base": {
+    "enabled": {
+      "root": {
+        "color": "var(--seed-color-bg-layer-default)",
+        "strokeWidth": "1px",
+        "strokeColor": "var(--seed-color-stroke-neutral-weak)"
+      },
+      "valueDisplay": {
+        "fontWeight": "var(--seed-font-weight-medium)",
+        "color": "var(--seed-color-fg-neutral)"
+      },
+      "divider": {
+        "color": "var(--seed-color-stroke-neutral-subtle)"
+      }
+    },
+    "invalid": {
+      "root": {
+        "strokeWidth": "2px",
+        "strokeColor": "var(--seed-color-stroke-critical-solid)"
+      }
+    },
+    "disabled": {
+      "valueDisplay": {
+        "color": "var(--seed-color-fg-disabled)"
+      }
+    }
+  },
+  "sizeSmall": {
+    "enabled": {
+      "root": {
+        "height": "var(--seed-dimension-x9)",
+        "cornerRadius": "var(--seed-radius-r2)"
+      },
+      "valueDisplay": {
+        "paddingX": "var(--seed-dimension-x2)",
+        "fontSize": "var(--seed-font-size-t5)",
+        "lineHeight": "var(--seed-line-height-t5)"
+      },
+      "divider": {
+        "width": "1px",
+        "height": "var(--seed-dimension-x4)"
+      }
+    }
+  },
+  "sizeMedium": {
+    "enabled": {
+      "root": {
+        "height": "var(--seed-dimension-x10)",
+        "cornerRadius": "var(--seed-radius-r2)"
+      },
+      "valueDisplay": {
+        "paddingX": "var(--seed-dimension-x2)",
+        "fontSize": "var(--seed-font-size-t5)",
+        "lineHeight": "var(--seed-line-height-t5)"
+      },
+      "divider": {
+        "width": "1px",
+        "height": "var(--seed-dimension-x4)"
+      }
+    }
+  },
+  "sizeLarge": {
+    "enabled": {
+      "root": {
+        "height": "var(--seed-dimension-x13)",
+        "cornerRadius": "var(--seed-radius-r3)"
+      },
+      "valueDisplay": {
+        "paddingX": "var(--seed-dimension-x2)",
+        "fontSize": "var(--seed-font-size-t6)",
+        "lineHeight": "var(--seed-line-height-t6)"
+      },
+      "divider": {
+        "width": "1px",
+        "height": "var(--seed-dimension-x4)"
+      }
+    }
+  }
+}

package/vars/component/select-item.d.ts ADDED Viewed

@@ -0,0 +1,101 @@
+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 ADDED Viewed

@@ -0,0 +1,95 @@
+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 ADDED Viewed

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