@seed-design/css 1.2.16 → 2.1.0

package/recipes/side-panel.layered.mjs

@@ -0,0 +1,72 @@
+import './side-panel.layered.css';
+import { createClassName, mergeVariants, splitVariantProps } from "./shared.mjs";
+
+const sidePanelSlotNames = [
+  [
+    "positioner",
+    "seed-side-panel__positioner"
+  ],
+  [
+    "backdrop",
+    "seed-side-panel__backdrop"
+  ],
+  [
+    "content",
+    "seed-side-panel__content"
+  ],
+  [
+    "header",
+    "seed-side-panel__header"
+  ],
+  [
+    "body",
+    "seed-side-panel__body"
+  ],
+  [
+    "footer",
+    "seed-side-panel__footer"
+  ],
+  [
+    "title",
+    "seed-side-panel__title"
+  ],
+  [
+    "description",
+    "seed-side-panel__description"
+  ],
+  [
+    "closeButton",
+    "seed-side-panel__closeButton"
+  ]
+];
+
+const defaultVariant = {
+  "size": "medium"
+};
+
+const compoundVariants = [];
+
+export const sidePanelVariantMap = {
+  "size": [
+    "small",
+    "medium",
+    "large"
+  ]
+};
+
+export const sidePanelVariantKeys = Object.keys(sidePanelVariantMap);
+
+export function sidePanel(props) {
+  return Object.fromEntries(
+    sidePanelSlotNames.map(([slot, className]) => {
+      return [
+        slot,
+        createClassName(className, mergeVariants(defaultVariant, props), compoundVariants),
+      ];
+    }),
+  );
+}
+
+Object.assign(sidePanel, { splitVariantProps: (props) => splitVariantProps(props, sidePanelVariantMap) });
+
+// @recipe(seed): side-panel

package/recipes/side-panel.mjs

@@ -0,0 +1,72 @@
+import './side-panel.css';
+import { createClassName, mergeVariants, splitVariantProps } from "./shared.mjs";
+
+const sidePanelSlotNames = [
+  [
+    "positioner",
+    "seed-side-panel__positioner"
+  ],
+  [
+    "backdrop",
+    "seed-side-panel__backdrop"
+  ],
+  [
+    "content",
+    "seed-side-panel__content"
+  ],
+  [
+    "header",
+    "seed-side-panel__header"
+  ],
+  [
+    "body",
+    "seed-side-panel__body"
+  ],
+  [
+    "footer",
+    "seed-side-panel__footer"
+  ],
+  [
+    "title",
+    "seed-side-panel__title"
+  ],
+  [
+    "description",
+    "seed-side-panel__description"
+  ],
+  [
+    "closeButton",
+    "seed-side-panel__closeButton"
+  ]
+];
+
+const defaultVariant = {
+  "size": "medium"
+};
+
+const compoundVariants = [];
+
+export const sidePanelVariantMap = {
+  "size": [
+    "small",
+    "medium",
+    "large"
+  ]
+};
+
+export const sidePanelVariantKeys = Object.keys(sidePanelVariantMap);
+
+export function sidePanel(props) {
+  return Object.fromEntries(
+    sidePanelSlotNames.map(([slot, className]) => {
+      return [
+        slot,
+        createClassName(className, mergeVariants(defaultVariant, props), compoundVariants),
+      ];
+    }),
+  );
+}
+
+Object.assign(sidePanel, { splitVariantProps: (props) => splitVariantProps(props, sidePanelVariantMap) });
+
+// @recipe(seed): side-panel

package/recipes/skeleton.css

@@ -2,8 +2,18 @@
     display: inline-block;
     box-sizing: border-box;
     overflow: hidden;
-    --seed-box-width: initial;
-    --seed-box-height: initial;
+    --seed-box-width-base: initial;
+    --seed-box-width-sm: var(--seed-box-width-base);
+    --seed-box-width-md: var(--seed-box-width-sm);
+    --seed-box-width-lg: var(--seed-box-width-md);
+    --seed-box-width-xl: var(--seed-box-width-lg);
+    --seed-box-width: var(--seed-box-width-base);
+    --seed-box-height-base: initial;
+    --seed-box-height-sm: var(--seed-box-height-base);
+    --seed-box-height-md: var(--seed-box-height-sm);
+    --seed-box-height-lg: var(--seed-box-height-md);
+    --seed-box-height-xl: var(--seed-box-height-lg);
+    --seed-box-height: var(--seed-box-height-base);
     width: var(--seed-box-width);
     height: var(--seed-box-height);
 }
@@ -42,4 +52,28 @@
 }
 .seed-skeleton--tone_magic::after {
     background-image: linear-gradient(90deg, var(--seed-gradient-shimmer-magic));
+}
+@media (min-width: 480px) {
+    .seed-skeleton {
+        --seed-box-width: var(--seed-box-width-sm);
+        --seed-box-height: var(--seed-box-height-sm);
+    }
+}
+@media (min-width: 768px) {
+    .seed-skeleton {
+        --seed-box-width: var(--seed-box-width-md);
+        --seed-box-height: var(--seed-box-height-md);
+    }
+}
+@media (min-width: 1280px) {
+    .seed-skeleton {
+        --seed-box-width: var(--seed-box-width-lg);
+        --seed-box-height: var(--seed-box-height-lg);
+    }
+}
+@media (min-width: 1440px) {
+    .seed-skeleton {
+        --seed-box-width: var(--seed-box-width-xl);
+        --seed-box-height: var(--seed-box-height-xl);
+    }
 }

package/recipes/skeleton.d.ts

@@ -1,9 +1,17 @@
 declare interface SkeletonVariant {
   /**
+  * - `0`: 기본값입니다.
+  * - `8`: 텍스트 콘텐츠에 사용합니다.
+  * - `16`: 카드 및 썸네일에 사용합니다.
+  * - `full`: Avatar(원형) 콘텐츠에 사용합니다.
+  *
   * @default 8
   */
   radius: "0" | "8" | "16" | "full";
 /**
+  * - `neutral`: 데이터를 불러오는 일반적인 로딩 경험에 사용합니다.
+  * - `magic`: AI 기능이 활성화되었을 때 사용합니다.
+  *
   * @default "neutral"
   */
   tone: "neutral" | "magic";

package/recipes/skeleton.layered.css

@@ -1,8 +1,18 @@
 @layer seed-components {
   .seed-skeleton {
     box-sizing: border-box;
-    --seed-box-width: initial;
-    --seed-box-height: initial;
+    --seed-box-width-base: initial;
+    --seed-box-width-sm: var(--seed-box-width-base);
+    --seed-box-width-md: var(--seed-box-width-sm);
+    --seed-box-width-lg: var(--seed-box-width-md);
+    --seed-box-width-xl: var(--seed-box-width-lg);
+    --seed-box-width: var(--seed-box-width-base);
+    --seed-box-height-base: initial;
+    --seed-box-height-sm: var(--seed-box-height-base);
+    --seed-box-height-md: var(--seed-box-height-sm);
+    --seed-box-height-lg: var(--seed-box-height-md);
+    --seed-box-height-xl: var(--seed-box-height-lg);
+    --seed-box-height: var(--seed-box-height-base);
     width: var(--seed-box-width);
     height: var(--seed-box-height);
     display: inline-block;
@@ -53,4 +63,32 @@
   .seed-skeleton--tone_magic:after {
     background-image: linear-gradient(90deg, var(--seed-gradient-shimmer-magic));
   }
+
+  @media (width >= 480px) {
+    .seed-skeleton {
+      --seed-box-width: var(--seed-box-width-sm);
+      --seed-box-height: var(--seed-box-height-sm);
+    }
+  }
+
+  @media (width >= 768px) {
+    .seed-skeleton {
+      --seed-box-width: var(--seed-box-width-md);
+      --seed-box-height: var(--seed-box-height-md);
+    }
+  }
+
+  @media (width >= 1280px) {
+    .seed-skeleton {
+      --seed-box-width: var(--seed-box-width-lg);
+      --seed-box-height: var(--seed-box-height-lg);
+    }
+  }
+
+  @media (width >= 1440px) {
+    .seed-skeleton {
+      --seed-box-width: var(--seed-box-width-xl);
+      --seed-box-height: var(--seed-box-height-xl);
+    }
+  }
 }