@seed-design/css 1.2.5 → 1.2.7

package/recipes/image-frame-reaction-button.layered.css

@@ -1,11 +1,9 @@
 @layer seed-components {
-  .seed-image-frame-reaction-button {
+  .seed-image-frame-reaction-button__root {
     box-sizing: border-box;
     cursor: pointer;
     width: var(--seed-dimension-x6);
     height: var(--seed-dimension-x6);
-    --seed-icon-size: var(--seed-dimension-x6);
-    --seed-icon-color: var(--seed-color-palette-static-white);
     background: none;
     border: none;
     justify-content: center;
@@ -15,7 +13,7 @@
     position: relative;
   }
 
-  .seed-image-frame-reaction-button:before {
+  .seed-image-frame-reaction-button__root:before {
     content: "";
     top: calc((var(--seed-dimension-x10)  - var(--seed-dimension-x6)) / 2 * -1);
     right: calc((var(--seed-dimension-x10)  - var(--seed-dimension-x6)) / 2 * -1);
@@ -27,17 +25,36 @@
     position: absolute;
   }
 
-  .seed-image-frame-reaction-button:is(:focus, [data-focus]) {
+  .seed-image-frame-reaction-button__root:is(:focus, [data-focus]) {
     outline: none;
   }
 
-  .seed-image-frame-reaction-button:is(:focus-visible, [data-focus-visible]):before {
+  .seed-image-frame-reaction-button__root:is(:focus-visible, [data-focus-visible]):before {
     border-radius: var(--seed-radius-r1);
     outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
     outline-offset: calc(var(--seed-dimension-x0_5) * -1);
   }
 
-  .seed-image-frame-reaction-button:is([aria-pressed="true"], [data-pressed]) {
-    --seed-icon-color: var(--seed-color-bg-transparent);
+  .seed-image-frame-reaction-button__fillIcon {
+    width: var(--seed-dimension-x6);
+    height: var(--seed-dimension-x6);
+    pointer-events: none;
+    margin: auto;
+    position: absolute;
+    inset: 0;
+  }
+
+  .seed-image-frame-reaction-button__lineIcon {
+    width: var(--seed-dimension-x6);
+    height: var(--seed-dimension-x6);
+    color: var(--seed-color-palette-static-white);
+    pointer-events: none;
+    margin: auto;
+    position: absolute;
+    inset: 0;
+  }
+
+  .seed-image-frame-reaction-button__lineIcon:is([aria-pressed="true"], [data-pressed]) {
+    color: var(--seed-color-bg-transparent);
   }
 }

package/recipes/image-frame-reaction-button.layered.mjs

@@ -1,6 +1,21 @@
 import './image-frame-reaction-button.layered.css';
 import { createClassName, mergeVariants, splitVariantProps } from "./shared.mjs";
 
+const imageFrameReactionButtonSlotNames = [
+  [
+    "root",
+    "seed-image-frame-reaction-button__root"
+  ],
+  [
+    "fillIcon",
+    "seed-image-frame-reaction-button__fillIcon"
+  ],
+  [
+    "lineIcon",
+    "seed-image-frame-reaction-button__lineIcon"
+  ]
+];
+
 const defaultVariant = {};
 
 const compoundVariants = [];
@@ -10,10 +25,13 @@ export const imageFrameReactionButtonVariantMap = {};
 export const imageFrameReactionButtonVariantKeys = Object.keys(imageFrameReactionButtonVariantMap);
 
 export function imageFrameReactionButton(props) {
-  return createClassName(
-    "seed-image-frame-reaction-button",
-    mergeVariants(defaultVariant, props),
-    compoundVariants,
+  return Object.fromEntries(
+    imageFrameReactionButtonSlotNames.map(([slot, className]) => {
+      return [
+        slot,
+        createClassName(className, mergeVariants(defaultVariant, props), compoundVariants),
+      ];
+    }),
   );
 }
 

package/recipes/image-frame-reaction-button.mjs

@@ -1,6 +1,21 @@
 import './image-frame-reaction-button.css';
 import { createClassName, mergeVariants, splitVariantProps } from "./shared.mjs";
 
+const imageFrameReactionButtonSlotNames = [
+  [
+    "root",
+    "seed-image-frame-reaction-button__root"
+  ],
+  [
+    "fillIcon",
+    "seed-image-frame-reaction-button__fillIcon"
+  ],
+  [
+    "lineIcon",
+    "seed-image-frame-reaction-button__lineIcon"
+  ]
+];
+
 const defaultVariant = {};
 
 const compoundVariants = [];
@@ -10,10 +25,13 @@ export const imageFrameReactionButtonVariantMap = {};
 export const imageFrameReactionButtonVariantKeys = Object.keys(imageFrameReactionButtonVariantMap);
 
 export function imageFrameReactionButton(props) {
-  return createClassName(
-    "seed-image-frame-reaction-button",
-    mergeVariants(defaultVariant, props),
-    compoundVariants,
+  return Object.fromEntries(
+    imageFrameReactionButtonSlotNames.map(([slot, className]) => {
+      return [
+        slot,
+        createClassName(className, mergeVariants(defaultVariant, props), compoundVariants),
+      ];
+    }),
   );
 }
 

package/recipes/image-frame.css

@@ -1,16 +1,20 @@
-.seed-image-frame {
+.seed-image-frame__root {
     position: relative;
     overflow: hidden;
-    border-radius: inherit;
+    border-radius: inherit
 }
-.seed-image-frame > img, .seed-image-frame > video {
+.seed-image-frame__content {
     display: block;
     width: 100%;
     height: 100%;
     object-fit: cover;
-    border-radius: inherit;
+    border-radius: inherit
 }
-.seed-image-frame--stroke_true::after {
+.seed-image-frame__fallback {
+    width: 100%;
+    height: 100%
+}
+.seed-image-frame__root--stroke_true::after {
     content: '';
     position: absolute;
     top: 0;
@@ -19,10 +23,8 @@
     bottom: 0;
     pointer-events: none;
     border-radius: inherit;
-    box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-subtle);
-}
-.seed-image-frame--stroke_false {}
-.seed-image-frame--rounded_true {
-    border-radius: var(--seed-radius-r2);
+    box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-subtle)
 }
-.seed-image-frame--rounded_false {}
+.seed-image-frame__root--rounded_true {
+    border-radius: var(--seed-radius-r2)
+}

package/recipes/image-frame.d.ts

@@ -15,11 +15,13 @@ declare type ImageFrameVariantMap = {
 
 export declare type ImageFrameVariantProps = Partial<ImageFrameVariant>;
 
+export declare type ImageFrameSlotName = "root" | "content" | "fallback";
+
 export declare const imageFrameVariantMap: ImageFrameVariantMap;
 
 export declare const imageFrame: ((
   props?: ImageFrameVariantProps,
-) => string) & {
+) => Record<ImageFrameSlotName, string>) & {
   splitVariantProps: <T extends ImageFrameVariantProps>(
     props: T,
   ) => [ImageFrameVariantProps, Omit<T, keyof ImageFrameVariantProps>];

package/recipes/image-frame.layered.css

@@ -1,11 +1,11 @@
 @layer seed-components {
-  .seed-image-frame {
+  .seed-image-frame__root {
     border-radius: inherit;
     position: relative;
     overflow: hidden;
   }
 
-  .seed-image-frame > img, .seed-image-frame > video {
+  .seed-image-frame__content {
     object-fit: cover;
     border-radius: inherit;
     width: 100%;
@@ -13,7 +13,12 @@
     display: block;
   }
 
-  .seed-image-frame--stroke_true:after {
+  .seed-image-frame__fallback {
+    width: 100%;
+    height: 100%;
+  }
+
+  .seed-image-frame__root--stroke_true:after {
     content: "";
     pointer-events: none;
     border-radius: inherit;
@@ -22,7 +27,7 @@
     inset: 0;
   }
 
-  .seed-image-frame--rounded_true {
+  .seed-image-frame__root--rounded_true {
     border-radius: var(--seed-radius-r2);
   }
 }

package/recipes/image-frame.layered.mjs

@@ -1,6 +1,21 @@
 import './image-frame.layered.css';
 import { createClassName, mergeVariants, splitVariantProps } from "./shared.mjs";
 
+const imageFrameSlotNames = [
+  [
+    "root",
+    "seed-image-frame__root"
+  ],
+  [
+    "content",
+    "seed-image-frame__content"
+  ],
+  [
+    "fallback",
+    "seed-image-frame__fallback"
+  ]
+];
+
 const defaultVariant = {
   "stroke": false,
   "rounded": false
@@ -22,10 +37,13 @@ export const imageFrameVariantMap = {
 export const imageFrameVariantKeys = Object.keys(imageFrameVariantMap);
 
 export function imageFrame(props) {
-  return createClassName(
-    "seed-image-frame",
-    mergeVariants(defaultVariant, props),
-    compoundVariants,
+  return Object.fromEntries(
+    imageFrameSlotNames.map(([slot, className]) => {
+      return [
+        slot,
+        createClassName(className, mergeVariants(defaultVariant, props), compoundVariants),
+      ];
+    }),
   );
 }
 

package/recipes/image-frame.mjs

@@ -1,6 +1,21 @@
 import './image-frame.css';
 import { createClassName, mergeVariants, splitVariantProps } from "./shared.mjs";
 
+const imageFrameSlotNames = [
+  [
+    "root",
+    "seed-image-frame__root"
+  ],
+  [
+    "content",
+    "seed-image-frame__content"
+  ],
+  [
+    "fallback",
+    "seed-image-frame__fallback"
+  ]
+];
+
 const defaultVariant = {
   "stroke": false,
   "rounded": false
@@ -22,10 +37,13 @@ export const imageFrameVariantMap = {
 export const imageFrameVariantKeys = Object.keys(imageFrameVariantMap);
 
 export function imageFrame(props) {
-  return createClassName(
-    "seed-image-frame",
-    mergeVariants(defaultVariant, props),
-    compoundVariants,
+  return Object.fromEntries(
+    imageFrameSlotNames.map(([slot, className]) => {
+      return [
+        slot,
+        createClassName(className, mergeVariants(defaultVariant, props), compoundVariants),
+      ];
+    }),
   );
 }
 

package/vars/color/bg.d.ts

@@ -23,17 +23,17 @@ export declare const informativeSolidPressed = "var(--seed-color-bg-informative-
 export declare const informativeWeak = "var(--seed-color-bg-informative-weak)";
 /** 사용자에게 유용한 정보를 제공하거나 상태를 설명할 때 사용됩니다. (weak-pressed) */
 export declare const informativeWeakPressed = "var(--seed-color-bg-informative-weak-pressed)";
-/** 가장 낮은 0단계의 '대지'입니다. 앱의 가장 깊은 곳에 위치하는 전체 배경색입니다. */
+/** 가장 낮은 0단계의 '대지'입니다. 화면 가장 깊은 곳에 위치하는 전체 배경색입니다. */
 export declare const layerBasement = "var(--seed-color-bg-layer-basement)";
-/** basement 바로 위에 놓이는 기본 표면입니다. 대부분의 스크린 콘텐츠가 이 레이어 위에서 표현됩니다. */
+/** basement 바로 위에 놓이는 기본 표면입니다. 대부분의 스크린 콘텐츠(List, TextField 등)가 이 레이어 위에서 표현됩니다. */
 export declare const layerDefault = "var(--seed-color-bg-layer-default)";
-/** basement 바로 위에 놓이는 기본 표면입니다. 대부분의 스크린 콘텐츠가 이 레이어 위에서 표현됩니다. (pressed) */
+/** basement 바로 위에 놓이는 기본 표면입니다. 대부분의 스크린 콘텐츠(List, TextField 등)가 이 레이어 위에서 표현됩니다. (pressed) */
 export declare const layerDefaultPressed = "var(--seed-color-bg-layer-default-pressed)";
 /** @deprecated `@seed-design/css@1.3.0`에서 제거될 예정입니다. */
 export declare const layerFill = "var(--seed-color-bg-layer-fill)";
-/** 앱의 모든 콘텐츠 위를 덮으며(floating) 나타나는 임시 레이어입니다. 모달성 요소들이 여기에 속합니다. */
+/** 화면의 모든 콘텐츠 위를 덮으며(floating) 나타나는 임시 레이어입니다. 사용자의 상호작용을 필요로 하는 모달(Modal)성 요소들이 여기에 속합니다. */
 export declare const layerFloating = "var(--seed-color-bg-layer-floating)";
-/** 앱의 모든 콘텐츠 위를 덮으며(floating) 나타나는 임시 레이어입니다. 모달성 요소들이 여기에 속합니다. (pressed) */
+/** 화면의 모든 콘텐츠 위를 덮으며(floating) 나타나는 임시 레이어입니다. 사용자의 상호작용을 필요로 하는 모달(Modal)성 요소들이 여기에 속합니다. (pressed) */
 export declare const layerFloatingPressed = "var(--seed-color-bg-layer-floating-pressed)";
 export declare const magicWeak = "var(--seed-color-bg-magic-weak)";
 /** 일반적인 콘텐츠에 사용되는 기본 색상입니다. (inverted) */

package/vars/component/avatar-stack.d.ts

@@ -57,6 +57,16 @@ export declare const vars: {
       }
     }
   },
+  "size56": {
+    "enabled": {
+      "root": {
+        "gap": "-13px"
+      },
+      "item": {
+        "strokeWidth": "3px"
+      }
+    }
+  },
   "size64": {
     "enabled": {
       "root": {

package/vars/component/avatar-stack.mjs

@@ -57,6 +57,16 @@ export const vars = {
       }
     }
   },
+  "size56": {
+    "enabled": {
+      "root": {
+        "gap": "-13px"
+      },
+      "item": {
+        "strokeWidth": "3px"
+      }
+    }
+  },
   "size64": {
     "enabled": {
       "root": {

package/vars/component/avatar.d.ts

@@ -7,6 +7,9 @@ export declare const vars: {
       }
     }
   },
+  /**
+   * 대표 사용처: 댓글을 남긴 사용자
+   */
   "size20": {
     "enabled": {
       "root": {
@@ -15,6 +18,9 @@ export declare const vars: {
       }
     }
   },
+  /**
+   * 대표 사용처: 답글 프로필
+   */
   "size24": {
     "enabled": {
       "root": {
@@ -33,6 +39,9 @@ export declare const vars: {
       }
     }
   },
+  /**
+   * 대표 사용처: 댓글 프로필
+   */
   "size36": {
     "enabled": {
       "root": {
@@ -51,6 +60,9 @@ export declare const vars: {
       }
     }
   },
+  /**
+   * 대표 사용처: 게시글 상세 내 프로필
+   */
   "size42": {
     "enabled": {
       "root": {
@@ -69,6 +81,9 @@ export declare const vars: {
       }
     }
   },
+  /**
+   * 대표 사용처: 작은 리스트
+   */
   "size48": {
     "enabled": {
       "root": {
@@ -87,6 +102,30 @@ export declare const vars: {
       }
     }
   },
+  /**
+   * 대표 사용처: 큰 리스트
+   */
+  "size56": {
+    "enabled": {
+      "root": {
+        "size": "56px",
+        "strokeWidth": "1px"
+      },
+      /** size=20에서는 지원되지 않습니다. */
+      "badgeMask": {
+        "offset": "34px",
+        "size": "24px"
+      },
+      /** size=20에서는 지원되지 않습니다. */
+      "badge": {
+        "offset": "36px",
+        "size": "20px"
+      }
+    }
+  },
+  /**
+   * 대표 사용처: 프로필 상세, 캐러셀
+   */
   "size64": {
     "enabled": {
       "root": {
@@ -141,6 +180,9 @@ export declare const vars: {
       }
     }
   },
+  /**
+   * 대표 사용처: 프로필 수정
+   */
   "size108": {
     "enabled": {
       "root": {

package/vars/component/avatar.mjs

@@ -79,6 +79,22 @@ export const vars = {
       }
     }
   },
+  "size56": {
+    "enabled": {
+      "root": {
+        "size": "56px",
+        "strokeWidth": "1px"
+      },
+      "badgeMask": {
+        "offset": "34px",
+        "size": "24px"
+      },
+      "badge": {
+        "offset": "36px",
+        "size": "20px"
+      }
+    }
+  },
   "size64": {
     "enabled": {
       "root": {

package/vars/component/content-placeholder.d.ts

@@ -0,0 +1,28 @@
+export declare const vars: {
+  "base": {
+    "enabled": {
+      "root": {
+        "color": "var(--seed-color-palette-gray-200)"
+      },
+      "asset": {
+        "minWidth": "var(--seed-dimension-x4)",
+        "maxWidth": "64px",
+        /** root slot 대한 asset slot의 높이 비율입니다. */
+        "heightFraction": "0.5",
+        "color": "var(--seed-color-palette-gray-400)"
+      }
+    }
+  },
+  "typeDefault": {},
+  "typeBuySell": {},
+  "typeCar": {},
+  "typeCommerce": {},
+  "typeCoupon": {},
+  "typeFood": {},
+  "typeGroup": {},
+  "typeImage": {},
+  "typeJobs": {},
+  "typeBusiness": {},
+  "typePost": {},
+  "typeRealty": {}
+}

package/vars/component/content-placeholder.mjs

@@ -0,0 +1,27 @@
+export const vars = {
+  "base": {
+    "enabled": {
+      "root": {
+        "color": "var(--seed-color-palette-gray-200)"
+      },
+      "asset": {
+        "minWidth": "var(--seed-dimension-x4)",
+        "maxWidth": "64px",
+        "heightFraction": "0.5",
+        "color": "var(--seed-color-palette-gray-400)"
+      }
+    }
+  },
+  "typeDefault": {},
+  "typeBuySell": {},
+  "typeCar": {},
+  "typeCommerce": {},
+  "typeCoupon": {},
+  "typeFood": {},
+  "typeGroup": {},
+  "typeImage": {},
+  "typeJobs": {},
+  "typeBusiness": {},
+  "typePost": {},
+  "typeRealty": {}
+}

package/vars/component/index.d.ts

@@ -16,6 +16,7 @@ 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";
 export { vars as contextualFloatingButton } from "./contextual-floating-button";
 export { vars as controlChip } from "./control-chip";
 export { vars as dialog } from "./dialog";

package/vars/component/index.mjs

@@ -16,6 +16,7 @@ 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";
 export { vars as contextualFloatingButton } from "./contextual-floating-button.mjs";
 export { vars as controlChip } from "./control-chip.mjs";
 export { vars as dialog } from "./dialog.mjs";

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

@@ -204,6 +204,7 @@ export declare const vars: {
       }
     }
   },
+  "typeSingleline": {},
   "typeMultilineSizeLarge": {
     "enabled": {
       "root": {

package/vars/component/text-input.mjs

@@ -191,6 +191,7 @@ export const vars = {
       }
     }
   },
+  "typeSingleline": {},
   "typeMultilineSizeLarge": {
     "enabled": {
       "root": {

package/recipes/tag-group-tag.css

@@ -1,44 +0,0 @@
-.seed-tag-group-tag {
-    display: flex;
-    align-items: center;
-    gap: var(--seed-dimension-x0_5)
-}
-.seed-tag-group-tag--size_t2 {
-    font-size: var(--seed-font-size-t2);
-    line-height: var(--seed-line-height-t2);
-    --seed-prefix-icon-size: var(--seed-dimension-x3);
-    --seed-suffix-icon-size: var(--seed-dimension-x3)
-}
-.seed-tag-group-tag--size_t3 {
-    font-size: var(--seed-font-size-t3);
-    line-height: var(--seed-line-height-t3);
-    --seed-prefix-icon-size: 13px;
-    --seed-suffix-icon-size: 13px
-}
-.seed-tag-group-tag--size_t4 {
-    font-size: var(--seed-font-size-t4);
-    line-height: var(--seed-line-height-t4);
-    --seed-prefix-icon-size: var(--seed-dimension-x3_5);
-    --seed-suffix-icon-size: var(--seed-dimension-x3_5)
-}
-.seed-tag-group-tag--weight_regular {
-    font-weight: var(--seed-font-weight-regular)
-}
-.seed-tag-group-tag--weight_bold {
-    font-weight: var(--seed-font-weight-bold)
-}
-.seed-tag-group-tag--tone_neutralSubtle {
-    color: var(--seed-color-fg-neutral-subtle);
-    --seed-prefix-icon-color: var(--seed-color-fg-neutral-subtle);
-    --seed-suffix-icon-color: var(--seed-color-fg-neutral-subtle)
-}
-.seed-tag-group-tag--tone_neutral {
-    color: var(--seed-color-fg-neutral);
-    --seed-prefix-icon-color: var(--seed-color-fg-neutral);
-    --seed-suffix-icon-color: var(--seed-color-fg-neutral)
-}
-.seed-tag-group-tag--tone_brand {
-    color: var(--seed-color-fg-brand);
-    --seed-prefix-icon-color: var(--seed-color-fg-brand);
-    --seed-suffix-icon-color: var(--seed-color-fg-brand)
-}

package/recipes/tag-group-tag.d.ts

@@ -1,30 +0,0 @@
-declare interface TagGroupTagVariant {
-  /**
-  * @default "t2"
-  */
-  size: "t2" | "t3" | "t4";
-/**
-  * @default "regular"
-  */
-  weight: "regular" | "bold";
-/**
-  * @default "neutralSubtle"
-  */
-  tone: "neutralSubtle" | "neutral" | "brand";
-}
-
-declare type TagGroupTagVariantMap = {
-  [key in keyof TagGroupTagVariant]: Array<TagGroupTagVariant[key]>;
-};
-
-export declare type TagGroupTagVariantProps = Partial<TagGroupTagVariant>;
-
-export declare const tagGroupTagVariantMap: TagGroupTagVariantMap;
-
-export declare const tagGroupTag: ((
-  props?: TagGroupTagVariantProps,
-) => string) & {
-  splitVariantProps: <T extends TagGroupTagVariantProps>(
-    props: T,
-  ) => [TagGroupTagVariantProps, Omit<T, keyof TagGroupTagVariantProps>];
-}