@seed-design/lynx-css 0.2.0 → 0.3.0

package/vars/component/attachment-input-item-remove-button.d.ts

@@ -0,0 +1,28 @@
+export declare const vars: {
+  "base": {
+    "enabled": {
+      "root": {
+        "size": "var(--seed-dimension-x5)",
+        "cornerRadius": "var(--seed-radius-full)",
+        "color": "var(--seed-color-bg-layer-default)",
+        "strokeWidth": "1px",
+        "strokeColor": "var(--seed-color-stroke-neutral-weak)",
+        "offset": "var(--seed-dimension-x1)"
+      },
+      "icon": {
+        "size": "var(--seed-dimension-x2_5)",
+        "color": "var(--seed-color-fg-neutral)"
+      }
+    },
+    "pressed": {
+      "root": {
+        "color": "var(--seed-color-bg-layer-default-pressed)"
+      }
+    },
+    "disabled": {
+      "icon": {
+        "color": "var(--seed-color-fg-disabled)"
+      }
+    }
+  }
+}

package/vars/component/attachment-input-item-remove-button.mjs

@@ -0,0 +1,28 @@
+export const vars = {
+  "base": {
+    "enabled": {
+      "root": {
+        "size": "var(--seed-dimension-x5)",
+        "cornerRadius": "var(--seed-radius-full)",
+        "color": "var(--seed-color-bg-layer-default)",
+        "strokeWidth": "1px",
+        "strokeColor": "var(--seed-color-stroke-neutral-weak)",
+        "offset": "var(--seed-dimension-x1)"
+      },
+      "icon": {
+        "size": "var(--seed-dimension-x2_5)",
+        "color": "var(--seed-color-fg-neutral)"
+      }
+    },
+    "pressed": {
+      "root": {
+        "color": "var(--seed-color-bg-layer-default-pressed)"
+      }
+    },
+    "disabled": {
+      "icon": {
+        "color": "var(--seed-color-fg-disabled)"
+      }
+    }
+  }
+}

package/vars/component/attachment-input-item.d.ts

@@ -0,0 +1,103 @@
+export declare const vars: {
+  "base": {
+    "enabled": {
+      "root": {
+        "height": "80px",
+        "color": "var(--seed-color-bg-transparent)",
+        "cornerRadius": "var(--seed-radius-r3)",
+        "strokeWidth": "1px",
+        "gap": "var(--seed-dimension-x2_5)"
+      },
+      "thumbnail": {
+        "color": "var(--seed-color-bg-neutral-weak)",
+        "size": "var(--seed-dimension-x12)",
+        "cornerRadius": "var(--seed-radius-r2)"
+      },
+      "thumbnailIcon": {
+        "color": "var(--seed-color-fg-neutral-subtle)",
+        "size": "var(--seed-dimension-x6)"
+      },
+      "name": {
+        "color": "var(--seed-color-fg-neutral)",
+        "fontSize": "var(--seed-font-size-t2)",
+        "lineHeight": "var(--seed-line-height-t2)",
+        "fontWeight": "var(--seed-font-weight-medium)"
+      },
+      "size": {
+        "color": "var(--seed-color-fg-neutral-subtle)",
+        "fontSize": "var(--seed-font-size-t1)",
+        "lineHeight": "var(--seed-line-height-t1)",
+        "fontWeight": "var(--seed-font-weight-regular)"
+      },
+      /** dragging 상태에서는 표시되지 않습니다. */
+      "removeButtonMask": {
+        "offset": "var(--seed-dimension-x1_5)",
+        "size": "var(--seed-dimension-x6)"
+      }
+    }
+  },
+  "typeFile": {
+    "enabled": {
+      "root": {
+        "width": "160px",
+        "strokeColor": "var(--seed-color-stroke-neutral-weak)",
+        "paddingX": "var(--seed-dimension-x4)"
+      }
+    },
+    "readonly": {
+      "thumbnailIcon": {
+        "color": "var(--seed-color-fg-disabled)"
+      },
+      "name": {
+        "color": "var(--seed-color-fg-disabled)"
+      },
+      "size": {
+        "color": "var(--seed-color-fg-disabled)"
+      }
+    },
+    "dragging": {
+      "thumbnailIcon": {
+        "color": "var(--seed-color-fg-disabled)"
+      },
+      "name": {
+        "color": "var(--seed-color-fg-disabled)"
+      },
+      "size": {
+        "color": "var(--seed-color-fg-disabled)"
+      }
+    }
+  },
+  "typeImage": {
+    "enabled": {
+      "root": {
+        "width": "80px",
+        "strokeColor": "var(--seed-color-stroke-neutral-subtle)"
+      },
+      "backdrop": {
+        "color": "var(--seed-color-bg-overlay)"
+      },
+      "badge": {
+        "color": "var(--seed-color-bg-overlay)",
+        "height": "var(--seed-dimension-x6)",
+        "cornerRadius": "var(--seed-radius-r3)",
+        "paddingX": "var(--seed-dimension-x1)"
+      },
+      "badgeLabel": {
+        "color": "var(--seed-color-palette-static-white)",
+        "fontSize": "var(--seed-font-size-t2)",
+        "lineHeight": "var(--seed-line-height-t2)",
+        "fontWeight": "var(--seed-font-weight-medium)"
+      }
+    },
+    "readonly": {
+      "root": {
+        "opacity": "0.5"
+      }
+    },
+    "dragging": {
+      "root": {
+        "opacity": "0.5"
+      }
+    }
+  }
+}

package/vars/component/attachment-input-item.mjs

@@ -0,0 +1,102 @@
+export const vars = {
+  "base": {
+    "enabled": {
+      "root": {
+        "height": "80px",
+        "color": "var(--seed-color-bg-transparent)",
+        "cornerRadius": "var(--seed-radius-r3)",
+        "strokeWidth": "1px",
+        "gap": "var(--seed-dimension-x2_5)"
+      },
+      "thumbnail": {
+        "color": "var(--seed-color-bg-neutral-weak)",
+        "size": "var(--seed-dimension-x12)",
+        "cornerRadius": "var(--seed-radius-r2)"
+      },
+      "thumbnailIcon": {
+        "color": "var(--seed-color-fg-neutral-subtle)",
+        "size": "var(--seed-dimension-x6)"
+      },
+      "name": {
+        "color": "var(--seed-color-fg-neutral)",
+        "fontSize": "var(--seed-font-size-t2)",
+        "lineHeight": "var(--seed-line-height-t2)",
+        "fontWeight": "var(--seed-font-weight-medium)"
+      },
+      "size": {
+        "color": "var(--seed-color-fg-neutral-subtle)",
+        "fontSize": "var(--seed-font-size-t1)",
+        "lineHeight": "var(--seed-line-height-t1)",
+        "fontWeight": "var(--seed-font-weight-regular)"
+      },
+      "removeButtonMask": {
+        "offset": "var(--seed-dimension-x1_5)",
+        "size": "var(--seed-dimension-x6)"
+      }
+    }
+  },
+  "typeFile": {
+    "enabled": {
+      "root": {
+        "width": "160px",
+        "strokeColor": "var(--seed-color-stroke-neutral-weak)",
+        "paddingX": "var(--seed-dimension-x4)"
+      }
+    },
+    "readonly": {
+      "thumbnailIcon": {
+        "color": "var(--seed-color-fg-disabled)"
+      },
+      "name": {
+        "color": "var(--seed-color-fg-disabled)"
+      },
+      "size": {
+        "color": "var(--seed-color-fg-disabled)"
+      }
+    },
+    "dragging": {
+      "thumbnailIcon": {
+        "color": "var(--seed-color-fg-disabled)"
+      },
+      "name": {
+        "color": "var(--seed-color-fg-disabled)"
+      },
+      "size": {
+        "color": "var(--seed-color-fg-disabled)"
+      }
+    }
+  },
+  "typeImage": {
+    "enabled": {
+      "root": {
+        "width": "80px",
+        "strokeColor": "var(--seed-color-stroke-neutral-subtle)"
+      },
+      "backdrop": {
+        "color": "var(--seed-color-bg-overlay)"
+      },
+      "badge": {
+        "color": "var(--seed-color-bg-overlay)",
+        "height": "var(--seed-dimension-x6)",
+        "cornerRadius": "var(--seed-radius-r3)",
+        "paddingX": "var(--seed-dimension-x1)"
+      },
+      "badgeLabel": {
+        "color": "var(--seed-color-palette-static-white)",
+        "fontSize": "var(--seed-font-size-t2)",
+        "lineHeight": "var(--seed-line-height-t2)",
+        "fontWeight": "var(--seed-font-weight-medium)"
+      }
+    },
+    "readonly": {
+      "root": {
+        "opacity": "0.5"
+      }
+    },
+    "dragging": {
+      "root": {
+        "opacity": "0.5"
+      }
+    }
+  }
+}

package/vars/component/attachment-input-trigger.d.ts

@@ -0,0 +1,46 @@
+export declare const vars: {
+  "base": {
+    "enabled": {
+      "root": {
+        "size": "80px",
+        "gap": "var(--seed-dimension-x1)",
+        "color": "var(--seed-color-bg-transparent)",
+        "cornerRadius": "var(--seed-radius-r3)",
+        "strokeWidth": "1px",
+        "strokeColor": "var(--seed-color-stroke-neutral-weak)"
+      },
+      "icon": {
+        "size": "var(--seed-dimension-x6)",
+        "color": "var(--seed-color-fg-neutral-subtle)"
+      },
+      "itemCount": {
+        "color": "var(--seed-color-fg-neutral)",
+        "fontWeight": "var(--seed-font-weight-regular)",
+        "fontSize": "var(--seed-font-size-t2)",
+        "lineHeight": "var(--seed-line-height-t2)"
+      },
+      "maxItemCount": {
+        "color": "var(--seed-color-fg-neutral-subtle)",
+        "fontWeight": "var(--seed-font-weight-regular)",
+        "fontSize": "var(--seed-font-size-t2)",
+        "lineHeight": "var(--seed-line-height-t2)"
+      }
+    },
+    "pressed": {
+      "root": {
+        "color": "var(--seed-color-bg-transparent-pressed)"
+      }
+    },
+    "disabled": {
+      "icon": {
+        "color": "var(--seed-color-fg-disabled)"
+      },
+      "itemCount": {
+        "color": "var(--seed-color-fg-disabled)"
+      },
+      "maxItemCount": {
+        "color": "var(--seed-color-fg-disabled)"
+      }
+    }
+  }
+}

package/vars/component/attachment-input-trigger.mjs

@@ -0,0 +1,46 @@
+export const vars = {
+  "base": {
+    "enabled": {
+      "root": {
+        "size": "80px",
+        "gap": "var(--seed-dimension-x1)",
+        "color": "var(--seed-color-bg-transparent)",
+        "cornerRadius": "var(--seed-radius-r3)",
+        "strokeWidth": "1px",
+        "strokeColor": "var(--seed-color-stroke-neutral-weak)"
+      },
+      "icon": {
+        "size": "var(--seed-dimension-x6)",
+        "color": "var(--seed-color-fg-neutral-subtle)"
+      },
+      "itemCount": {
+        "color": "var(--seed-color-fg-neutral)",
+        "fontWeight": "var(--seed-font-weight-regular)",
+        "fontSize": "var(--seed-font-size-t2)",
+        "lineHeight": "var(--seed-line-height-t2)"
+      },
+      "maxItemCount": {
+        "color": "var(--seed-color-fg-neutral-subtle)",
+        "fontWeight": "var(--seed-font-weight-regular)",
+        "fontSize": "var(--seed-font-size-t2)",
+        "lineHeight": "var(--seed-line-height-t2)"
+      }
+    },
+    "pressed": {
+      "root": {
+        "color": "var(--seed-color-bg-transparent-pressed)"
+      }
+    },
+    "disabled": {
+      "icon": {
+        "color": "var(--seed-color-fg-disabled)"
+      },
+      "itemCount": {
+        "color": "var(--seed-color-fg-disabled)"
+      },
+      "maxItemCount": {
+        "color": "var(--seed-color-fg-disabled)"
+      }
+    }
+  }
+}

package/vars/component/attachment-input.d.ts

@@ -0,0 +1,14 @@
+export declare const vars: {
+  "base": {
+    "enabled": {
+      /** Attachment Input Dropzone과 Items를 감싸는 컨테이너입니다. */
+      "root": {
+        "gap": "var(--seed-dimension-x2)"
+      },
+      /** Attachment Input Trigger 및 Attachment Input Items를 감싸는 컨테이너입니다. */
+      "items": {
+        "gap": "var(--seed-dimension-x2)"
+      }
+    }
+  }
+}

package/vars/component/attachment-input.mjs

@@ -0,0 +1,12 @@
+export const vars = {
+  "base": {
+    "enabled": {
+      "root": {
+        "gap": "var(--seed-dimension-x2)"
+      },
+      "items": {
+        "gap": "var(--seed-dimension-x2)"
+      }
+    }
+  }
+}

package/vars/component/chip-tab.d.ts

@@ -117,46 +117,5 @@ export declare const vars: {
         "color": "var(--seed-color-fg-disabled)"
       }
     }
-  },
-  "variantBrandSolid": {
-    "enabled": {
-      "root": {
-        "color": "var(--seed-color-bg-neutral-weak)"
-      },
-      "label": {
-        "color": "var(--seed-color-fg-neutral-muted)"
-      }
-    },
-    "enabledPressed": {
-      "root": {
-        "color": "var(--seed-color-bg-neutral-weak-pressed)"
-      }
-    },
-    "selected": {
-      "root": {
-        "color": "var(--seed-color-bg-brand-solid)"
-      },
-      "label": {
-        "color": "var(--seed-color-palette-static-white)"
-      }
-    },
-    "selectedPressed": {
-      "root": {
-        "color": "var(--seed-color-bg-brand-solid-pressed)"
-      }
-    },
-    "disabled": {
-      "root": {
-        "color": "var(--seed-color-bg-disabled)"
-      },
-      "label": {
-        "color": "var(--seed-color-fg-disabled)"
-      }
-    },
-    "selectedDisabled": {
-      "root": {
-        "color": "var(--seed-color-bg-disabled)"
-      }
-    }
   }
 }

package/vars/component/chip-tab.mjs

@@ -117,46 +117,5 @@ export const vars = {
         "color": "var(--seed-color-fg-disabled)"
       }
     }
-  },
-  "variantBrandSolid": {
-    "enabled": {
-      "root": {
-        "color": "var(--seed-color-bg-neutral-weak)"
-      },
-      "label": {
-        "color": "var(--seed-color-fg-neutral-muted)"
-      }
-    },
-    "enabledPressed": {
-      "root": {
-        "color": "var(--seed-color-bg-neutral-weak-pressed)"
-      }
-    },
-    "selected": {
-      "root": {
-        "color": "var(--seed-color-bg-brand-solid)"
-      },
-      "label": {
-        "color": "var(--seed-color-palette-static-white)"
-      }
-    },
-    "selectedPressed": {
-      "root": {
-        "color": "var(--seed-color-bg-brand-solid-pressed)"
-      }
-    },
-    "disabled": {
-      "root": {
-        "color": "var(--seed-color-bg-disabled)"
-      },
-      "label": {
-        "color": "var(--seed-color-fg-disabled)"
-      }
-    },
-    "selectedDisabled": {
-      "root": {
-        "color": "var(--seed-color-bg-disabled)"
-      }
-    }
   }
 }

package/vars/component/chip-tablist.d.ts

@@ -20,12 +20,5 @@ export declare const vars: {
         "gap": "8px"
       }
     }
-  },
-  "variantBrandSolid": {
-    "enabled": {
-      "root": {
-        "gap": "8px"
-      }
-    }
   }
 }

package/vars/component/chip-tablist.mjs

@@ -20,12 +20,5 @@ export const vars = {
         "gap": "8px"
       }
     }
-  },
-  "variantBrandSolid": {
-    "enabled": {
-      "root": {
-        "gap": "8px"
-      }
-    }
   }
 }

package/vars/component/image-frame.d.ts

@@ -23,26 +23,5 @@ export declare const vars: {
   /**
    * 테두리를 표시하지 않습니다.
    */
-  "strokeFalse": {},
-  /**
-   * 모서리를 둥글게 처리합니다.
-@deprecated `rounded` 옵션은 @seed-design/react@1.3.0에서 제거될 예정입니다. `borderRadius="r2"`를 사용하세요.
-Reason: 모서리 스타일은 `borderRadius` prop으로 통일합니다.
-
-   */
-  "roundedTrue": {
-    "enabled": {
-      "root": {
-        /** 이 값은 기본값이며 변경할 수 있습니다. */
-        "cornerRadius": "var(--seed-radius-r2)"
-      }
-    }
-  },
-  /**
-   * 모서리를 둥글게 처리하지 않습니다.
-@deprecated `rounded` 옵션은 @seed-design/react@1.3.0에서 제거될 예정입니다. `borderRadius="r2"`를 사용하세요.
-Reason: 모서리 스타일은 `borderRadius` prop으로 통일합니다.
-
-   */
-  "roundedFalse": {}
+  "strokeFalse": {}
 }

package/vars/component/image-frame.mjs

@@ -14,13 +14,5 @@ export const vars = {
       }
     }
   },
-  "strokeFalse": {},
-  "roundedTrue": {
-    "enabled": {
-      "root": {
-        "cornerRadius": "var(--seed-radius-r2)"
-      }
-    }
-  },
-  "roundedFalse": {}
+  "strokeFalse": {}
 }

package/vars/component/index.d.ts

@@ -1,8 +1,16 @@
+export { vars as accordionItem } from "./accordion-item";
+export { vars as accordion } from "./accordion";
 export { vars as actionButton } from "./action-button";
 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 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";
+export { vars as attachmentInputItem } from "./attachment-input-item";
+export { vars as attachmentInputTrigger } from "./attachment-input-trigger";
+export { vars as attachmentInput } from "./attachment-input";
 export { vars as avatarStack } from "./avatar-stack";
 export { vars as avatar } from "./avatar";
 export { vars as badge } from "./badge";
@@ -13,7 +21,6 @@ export { vars as callout } from "./callout";
 export { vars as checkboxGroup } from "./checkbox-group";
 export { vars as checkbox } from "./checkbox";
 export { vars as checkmark } from "./checkmark";
-export { vars as chipTab } from "./chip-tab";
 export { vars as chipTablist } from "./chip-tablist";
 export { vars as chip } from "./chip";
 export { vars as contentPlaceholder } from "./content-placeholder";
@@ -42,9 +49,11 @@ export { vars as listHeader } from "./list-header";
 export { vars as listItem } from "./list-item";
 export { vars as mannerTempBadge } from "./manner-temp-badge";
 export { vars as mannerTemp } from "./manner-temp";
+export { vars as menuItem } from "./menu-item";
 export { vars as menuSheetCloseButton } from "./menu-sheet-close-button";
 export { vars as menuSheetItem } from "./menu-sheet-item";
 export { vars as menuSheet } from "./menu-sheet";
+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";
@@ -59,6 +68,8 @@ 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 sidePanelCloseButton } from "./side-panel-close-button";
+export { vars as sidePanel } from "./side-panel";
 export { vars as skeleton } from "./skeleton";
 export { vars as sliderThumb } from "./slider-thumb";
 export { vars as sliderTick } from "./slider-tick";

package/vars/component/index.mjs

@@ -1,8 +1,16 @@
+export { vars as accordionItem } from "./accordion-item.mjs";
+export { vars as accordion } from "./accordion.mjs";
 export { vars as actionButton } from "./action-button.mjs";
 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 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";
+export { vars as attachmentInputItem } from "./attachment-input-item.mjs";
+export { vars as attachmentInputTrigger } from "./attachment-input-trigger.mjs";
+export { vars as attachmentInput } from "./attachment-input.mjs";
 export { vars as avatarStack } from "./avatar-stack.mjs";
 export { vars as avatar } from "./avatar.mjs";
 export { vars as badge } from "./badge.mjs";
@@ -13,7 +21,6 @@ export { vars as callout } from "./callout.mjs";
 export { vars as checkboxGroup } from "./checkbox-group.mjs";
 export { vars as checkbox } from "./checkbox.mjs";
 export { vars as checkmark } from "./checkmark.mjs";
-export { vars as chipTab } from "./chip-tab.mjs";
 export { vars as chipTablist } from "./chip-tablist.mjs";
 export { vars as chip } from "./chip.mjs";
 export { vars as contentPlaceholder } from "./content-placeholder.mjs";
@@ -42,9 +49,11 @@ export { vars as listHeader } from "./list-header.mjs";
 export { vars as listItem } from "./list-item.mjs";
 export { vars as mannerTempBadge } from "./manner-temp-badge.mjs";
 export { vars as mannerTemp } from "./manner-temp.mjs";
+export { vars as menuItem } from "./menu-item.mjs";
 export { vars as menuSheetCloseButton } from "./menu-sheet-close-button.mjs";
 export { vars as menuSheetItem } from "./menu-sheet-item.mjs";
 export { vars as menuSheet } from "./menu-sheet.mjs";
+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";
@@ -59,6 +68,8 @@ 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 sidePanelCloseButton } from "./side-panel-close-button.mjs";
+export { vars as sidePanel } from "./side-panel.mjs";
 export { vars as skeleton } from "./skeleton.mjs";
 export { vars as sliderThumb } from "./slider-thumb.mjs";
 export { vars as sliderTick } from "./slider-tick.mjs";