@seed-design/css 2.2.2 → 2.3.0

package/recipes/select.layered.css

@@ -0,0 +1,108 @@
+@layer seed-components {
+  .seed-select__positioner {
+    --select-z-index: 99999;
+    z-index: calc(var(--select-z-index) + var(--z-index-offset, 0));
+    outline: none;
+  }
+
+  .seed-select__content {
+    width: var(--seed-select-reference-width);
+    border-radius: var(--seed-radius-r5);
+    background: var(--seed-color-bg-layer-floating);
+    box-shadow: var(--seed-shadow-s3);
+    transform-origin: var(--seed-select-transform-origin);
+    overflow: hidden;
+  }
+
+  .seed-select__content:is([data-state="open"], [data-open]) {
+    animation: seed-enter;
+    animation-timing-function: var(--seed-timing-function-enter);
+    animation-duration: var(--seed-duration-d3);
+    --seed-enter-translate-x: 0;
+    --seed-enter-translate-y: 0;
+    --seed-enter-opacity: 0;
+    --seed-enter-scale: .95;
+  }
+
+  .seed-select__content:not(:is([data-state="open"], [data-open])) {
+    animation: seed-exit;
+    animation-timing-function: var(--seed-timing-function-exit);
+    animation-duration: var(--seed-duration-d2);
+    --seed-exit-translate-x: 0;
+    --seed-exit-translate-y: 0;
+    --seed-exit-opacity: 0;
+    --seed-exit-scale: .95;
+    animation-fill-mode: forwards;
+  }
+
+  .seed-select__content:is([hidden], [data-hidden]) {
+    display: none !important;
+  }
+
+  .seed-select__content:is(:focus, [data-focus]) {
+    outline: none;
+  }
+
+  .seed-select__scrollArea {
+    max-height: min(480px, var(--seed-select-available-height, 480px));
+    box-sizing: border-box;
+    padding-block: var(--seed-dimension-x2);
+    gap: var(--seed-dimension-x2);
+    flex-direction: column;
+    display: flex;
+    overflow-y: auto;
+  }
+
+  .seed-select__group {
+    flex-direction: column;
+    display: flex;
+  }
+
+  .seed-select__group + .seed-select__group:before {
+    content: "";
+    margin-inline: var(--seed-dimension-x4);
+    margin-bottom: var(--seed-dimension-x2);
+    background-color: var(--seed-color-stroke-neutral-muted);
+    flex-shrink: 0;
+    height: 1px;
+    display: block;
+  }
+
+  .seed-select__groupLabel {
+    color: var(--seed-color-fg-neutral-subtle);
+  }
+
+  .seed-select__groupLabel--size_large {
+    padding-block: var(--seed-dimension-x2_5);
+    padding-inline: var(--seed-dimension-x4);
+    font-size: var(--seed-font-size-t4);
+    line-height: var(--seed-line-height-t4);
+    font-weight: var(--seed-font-weight-medium);
+  }
+
+  .seed-select__groupLabel--size_medium {
+    padding-block: var(--seed-dimension-x2);
+    padding-inline: var(--seed-dimension-x4);
+    font-size: var(--seed-font-size-t3);
+    line-height: var(--seed-line-height-t3);
+    font-weight: var(--seed-font-weight-regular);
+  }
+
+  .seed-select__groupLabel--size_responsive {
+    padding-block: var(--seed-dimension-x2_5);
+    padding-inline: var(--seed-dimension-x4);
+    font-size: var(--seed-font-size-t4);
+    line-height: var(--seed-line-height-t4);
+    font-weight: var(--seed-font-weight-medium);
+  }
+
+  @media (width >= 1280px) {
+    .seed-select__groupLabel--size_responsive {
+      padding-block: var(--seed-dimension-x2);
+      padding-inline: var(--seed-dimension-x4);
+      font-size: var(--seed-font-size-t3);
+      line-height: var(--seed-line-height-t3);
+      font-weight: var(--seed-font-weight-regular);
+    }
+  }
+}

package/recipes/select.layered.mjs

@@ -0,0 +1,56 @@
+import './select.layered.css';
+import { createClassName, mergeVariants, splitVariantProps } from "./shared.mjs";
+
+const selectSlotNames = [
+  [
+    "positioner",
+    "seed-select__positioner"
+  ],
+  [
+    "content",
+    "seed-select__content"
+  ],
+  [
+    "scrollArea",
+    "seed-select__scrollArea"
+  ],
+  [
+    "group",
+    "seed-select__group"
+  ],
+  [
+    "groupLabel",
+    "seed-select__groupLabel"
+  ]
+];
+
+const defaultVariant = {
+  "size": "large"
+};
+
+const compoundVariants = [];
+
+export const selectVariantMap = {
+  "size": [
+    "large",
+    "medium",
+    "responsive"
+  ]
+};
+
+export const selectVariantKeys = Object.keys(selectVariantMap);
+
+export function select(props) {
+  return Object.fromEntries(
+    selectSlotNames.map(([slot, className]) => {
+      return [
+        slot,
+        createClassName(className, mergeVariants(defaultVariant, props), compoundVariants),
+      ];
+    }),
+  );
+}
+
+Object.assign(select, { splitVariantProps: (props) => splitVariantProps(props, selectVariantMap) });
+
+// @recipe(seed): select

package/recipes/select.mjs

@@ -0,0 +1,56 @@
+import './select.css';
+import { createClassName, mergeVariants, splitVariantProps } from "./shared.mjs";
+
+const selectSlotNames = [
+  [
+    "positioner",
+    "seed-select__positioner"
+  ],
+  [
+    "content",
+    "seed-select__content"
+  ],
+  [
+    "scrollArea",
+    "seed-select__scrollArea"
+  ],
+  [
+    "group",
+    "seed-select__group"
+  ],
+  [
+    "groupLabel",
+    "seed-select__groupLabel"
+  ]
+];
+
+const defaultVariant = {
+  "size": "large"
+};
+
+const compoundVariants = [];
+
+export const selectVariantMap = {
+  "size": [
+    "large",
+    "medium",
+    "responsive"
+  ]
+};
+
+export const selectVariantKeys = Object.keys(selectVariantMap);
+
+export function select(props) {
+  return Object.fromEntries(
+    selectSlotNames.map(([slot, className]) => {
+      return [
+        slot,
+        createClassName(className, mergeVariants(defaultVariant, props), compoundVariants),
+      ];
+    }),
+  );
+}
+
+Object.assign(select, { splitVariantProps: (props) => splitVariantProps(props, selectVariantMap) });
+
+// @recipe(seed): select

package/vars/component/alert-dialog.d.ts

@@ -0,0 +1,52 @@
+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)",
+        "marginX": "var(--seed-dimension-x8)",
+        "marginY": "var(--seed-dimension-x16)",
+        "maxWidth": "272px",
+        "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-x5)",
+        "paddingTop": "var(--seed-dimension-x5)"
+      },
+      "footer": {
+        "gap": "var(--seed-dimension-x2)",
+        "paddingX": "var(--seed-dimension-x5)",
+        "paddingTop": "var(--seed-dimension-x4)",
+        "paddingBottom": "var(--seed-dimension-x5)"
+      },
+      "title": {
+        "color": "var(--seed-color-fg-neutral)",
+        "fontSize": "var(--seed-font-size-t7)",
+        "lineHeight": "var(--seed-line-height-t7)",
+        "fontWeight": "var(--seed-font-weight-bold)"
+      },
+      "description": {
+        "color": "var(--seed-color-fg-neutral)",
+        "fontSize": "var(--seed-font-size-t5)",
+        "lineHeight": "var(--seed-line-height-t5)",
+        "fontWeight": "var(--seed-font-weight-regular)"
+      }
+    }
+  }
+}

package/vars/component/alert-dialog.mjs

@@ -0,0 +1,52 @@
+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)",
+        "marginX": "var(--seed-dimension-x8)",
+        "marginY": "var(--seed-dimension-x16)",
+        "maxWidth": "272px",
+        "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-x5)",
+        "paddingTop": "var(--seed-dimension-x5)"
+      },
+      "footer": {
+        "gap": "var(--seed-dimension-x2)",
+        "paddingX": "var(--seed-dimension-x5)",
+        "paddingTop": "var(--seed-dimension-x4)",
+        "paddingBottom": "var(--seed-dimension-x5)"
+      },
+      "title": {
+        "color": "var(--seed-color-fg-neutral)",
+        "fontSize": "var(--seed-font-size-t7)",
+        "lineHeight": "var(--seed-line-height-t7)",
+        "fontWeight": "var(--seed-font-weight-bold)"
+      },
+      "description": {
+        "color": "var(--seed-color-fg-neutral)",
+        "fontSize": "var(--seed-font-size-t5)",
+        "lineHeight": "var(--seed-line-height-t5)",
+        "fontWeight": "var(--seed-font-weight-regular)"
+      }
+    }
+  }
+}

package/vars/component/dialog-close-button.d.ts

@@ -0,0 +1,24 @@
+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

@@ -0,0 +1,24 @@
+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

@@ -13,9 +13,11 @@ export declare const vars: {
       "content": {
         "color": "var(--seed-color-bg-layer-floating)",
         "cornerRadius": "var(--seed-radius-r5)",
-        "marginX": "var(--seed-dimension-x8)",
-        "marginY": "var(--seed-dimension-x16)",
-        "maxWidth": "272px",
+        /** 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",
@@ -26,26 +28,63 @@ export declare const vars: {
       },
       "header": {
         "gap": "var(--seed-dimension-x1_5)",
-        "paddingX": "var(--seed-dimension-x5)",
-        "paddingTop": "var(--seed-dimension-x5)"
+        "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": {
-        "gap": "var(--seed-dimension-x2)",
-        "paddingX": "var(--seed-dimension-x5)",
+        "paddingX": "var(--seed-dimension-x6)",
         "paddingTop": "var(--seed-dimension-x4)",
-        "paddingBottom": "var(--seed-dimension-x5)"
+        /** body의 하단 padding이며, 동시에 하단 scroll fog 그라데이션의 높이로도 사용됩니다. 본문이 오버플로되어 스크롤 가능한 경우에만 적용됩니다. */
+        "paddingBottom": "var(--seed-dimension-x6)"
       },
       "title": {
         "color": "var(--seed-color-fg-neutral)",
-        "fontSize": "var(--seed-font-size-t7)",
-        "lineHeight": "var(--seed-line-height-t7)",
+        "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)",
+        "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

@@ -13,9 +13,9 @@ export const vars = {
       "content": {
         "color": "var(--seed-color-bg-layer-floating)",
         "cornerRadius": "var(--seed-radius-r5)",
-        "marginX": "var(--seed-dimension-x8)",
-        "marginY": "var(--seed-dimension-x16)",
-        "maxWidth": "272px",
+        "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",
@@ -26,26 +26,57 @@ export const vars = {
       },
       "header": {
         "gap": "var(--seed-dimension-x1_5)",
-        "paddingX": "var(--seed-dimension-x5)",
-        "paddingTop": "var(--seed-dimension-x5)"
+        "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": {
-        "gap": "var(--seed-dimension-x2)",
-        "paddingX": "var(--seed-dimension-x5)",
+        "paddingX": "var(--seed-dimension-x6)",
         "paddingTop": "var(--seed-dimension-x4)",
-        "paddingBottom": "var(--seed-dimension-x5)"
+        "paddingBottom": "var(--seed-dimension-x6)"
       },
       "title": {
         "color": "var(--seed-color-fg-neutral)",
-        "fontSize": "var(--seed-font-size-t7)",
-        "lineHeight": "var(--seed-line-height-t7)",
+        "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)",
+        "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/index.d.ts

@@ -5,6 +5,7 @@ export { vars as actionChip } from "./action-chip";
 export { vars as actionSheetCloseButton } from "./action-sheet-close-button";
 export { vars as actionSheetItem } from "./action-sheet-item";
 export { vars as actionSheet } from "./action-sheet";
+export { vars as alertDialog } from "./alert-dialog";
 export { vars as attachmentInputDropzone } from "./attachment-input-dropzone";
 export { vars as attachmentInputItemActionButton } from "./attachment-input-item-action-button";
 export { vars as attachmentInputItemRemoveButton } from "./attachment-input-item-remove-button";
@@ -26,6 +27,7 @@ export { vars as chip } from "./chip";
 export { vars as contentPlaceholder } from "./content-placeholder";
 export { vars as contextualFloatingButton } from "./contextual-floating-button";
 export { vars as controlChip } from "./control-chip";
+export { vars as dialogCloseButton } from "./dialog-close-button";
 export { vars as dialog } from "./dialog";
 export { vars as divider } from "./divider";
 export { vars as extendedActionSheetCloseButton } from "./extended-action-sheet-close-button";
@@ -57,6 +59,8 @@ export { vars as menu } from "./menu";
 export { vars as notificationBadge } from "./notification-badge";
 export { vars as pageBanner } from "./page-banner";
 export { vars as progressCircle } from "./progress-circle";
+export { vars as quantityPickerButton } from "./quantity-picker-button";
+export { vars as quantityPicker } from "./quantity-picker";
 export { vars as radioGroup } from "./radio-group";
 export { vars as radio } from "./radio";
 export { vars as radiomark } from "./radiomark";
@@ -68,6 +72,9 @@ export { vars as segmentedControl } from "./segmented-control";
 export { vars as selectBoxCheckmark } from "./select-box-checkmark";
 export { vars as selectBoxGroup } from "./select-box-group";
 export { vars as selectBox } from "./select-box";
+export { vars as selectItem } from "./select-item";
+export { vars as selectTrigger } from "./select-trigger";
+export { vars as select } from "./select";
 export { vars as sidePanelCloseButton } from "./side-panel-close-button";
 export { vars as sidePanel } from "./side-panel";
 export { vars as skeleton } from "./skeleton";

package/vars/component/index.mjs

@@ -5,6 +5,7 @@ export { vars as actionChip } from "./action-chip.mjs";
 export { vars as actionSheetCloseButton } from "./action-sheet-close-button.mjs";
 export { vars as actionSheetItem } from "./action-sheet-item.mjs";
 export { vars as actionSheet } from "./action-sheet.mjs";
+export { vars as alertDialog } from "./alert-dialog.mjs";
 export { vars as attachmentInputDropzone } from "./attachment-input-dropzone.mjs";
 export { vars as attachmentInputItemActionButton } from "./attachment-input-item-action-button.mjs";
 export { vars as attachmentInputItemRemoveButton } from "./attachment-input-item-remove-button.mjs";
@@ -26,6 +27,7 @@ export { vars as chip } from "./chip.mjs";
 export { vars as contentPlaceholder } from "./content-placeholder.mjs";
 export { vars as contextualFloatingButton } from "./contextual-floating-button.mjs";
 export { vars as controlChip } from "./control-chip.mjs";
+export { vars as dialogCloseButton } from "./dialog-close-button.mjs";
 export { vars as dialog } from "./dialog.mjs";
 export { vars as divider } from "./divider.mjs";
 export { vars as extendedActionSheetCloseButton } from "./extended-action-sheet-close-button.mjs";
@@ -57,6 +59,8 @@ export { vars as menu } from "./menu.mjs";
 export { vars as notificationBadge } from "./notification-badge.mjs";
 export { vars as pageBanner } from "./page-banner.mjs";
 export { vars as progressCircle } from "./progress-circle.mjs";
+export { vars as quantityPickerButton } from "./quantity-picker-button.mjs";
+export { vars as quantityPicker } from "./quantity-picker.mjs";
 export { vars as radioGroup } from "./radio-group.mjs";
 export { vars as radio } from "./radio.mjs";
 export { vars as radiomark } from "./radiomark.mjs";
@@ -68,6 +72,9 @@ export { vars as segmentedControl } from "./segmented-control.mjs";
 export { vars as selectBoxCheckmark } from "./select-box-checkmark.mjs";
 export { vars as selectBoxGroup } from "./select-box-group.mjs";
 export { vars as selectBox } from "./select-box.mjs";
+export { vars as selectItem } from "./select-item.mjs";
+export { vars as selectTrigger } from "./select-trigger.mjs";
+export { vars as select } from "./select.mjs";
 export { vars as sidePanelCloseButton } from "./side-panel-close-button.mjs";
 export { vars as sidePanel } from "./side-panel.mjs";
 export { vars as skeleton } from "./skeleton.mjs";