@seed-design/css 1.2.4 → 1.2.6

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

@@ -1,4 +1,4 @@
-.seed-image-frame-reaction-button {
+.seed-image-frame-reaction-button__root {
     display: inline-flex;
     align-items: center;
     justify-content: center;
@@ -10,10 +10,8 @@
     width: var(--seed-dimension-x6);
     height: var(--seed-dimension-x6);
     background: transparent;
-    --seed-icon-size: var(--seed-dimension-x6);
-    --seed-icon-color: var(--seed-color-palette-static-white);
 }
-.seed-image-frame-reaction-button::before {
+.seed-image-frame-reaction-button__root::before {
     content: '';
     position: absolute;
     top: calc((var(--seed-dimension-x10) - var(--seed-dimension-x6)) / 2 * -1);
@@ -24,14 +22,31 @@
     outline-offset: calc(var(--seed-dimension-x0_5) * -1);
     transition: outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
 }
-.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 {
+    position: absolute;
+    inset: 0;
+    margin: auto;
+    width: var(--seed-dimension-x6);
+    height: var(--seed-dimension-x6);
+    pointer-events: none;
+}
+.seed-image-frame-reaction-button__lineIcon {
+    position: absolute;
+    inset: 0;
+    margin: auto;
+    width: var(--seed-dimension-x6);
+    height: var(--seed-dimension-x6);
+    color: var(--seed-color-palette-static-white);
+    pointer-events: none;
+}
+.seed-image-frame-reaction-button__lineIcon:is([aria-pressed=true], [data-pressed]) {
+    color: var(--seed-color-bg-transparent);
 }

package/recipes/image-frame-reaction-button.d.ts

@@ -8,11 +8,13 @@ declare type ImageFrameReactionButtonVariantMap = {
 
 export declare type ImageFrameReactionButtonVariantProps = Partial<ImageFrameReactionButtonVariant>;
 
+export declare type ImageFrameReactionButtonSlotName = "root" | "fillIcon" | "lineIcon";
+
 export declare const imageFrameReactionButtonVariantMap: ImageFrameReactionButtonVariantMap;
 
 export declare const imageFrameReactionButton: ((
   props?: ImageFrameReactionButtonVariantProps,
-) => string) & {
+) => Record<ImageFrameReactionButtonSlotName, string>) & {
   splitVariantProps: <T extends ImageFrameReactionButtonVariantProps>(
     props: T,
   ) => [ImageFrameReactionButtonVariantProps, Omit<T, keyof ImageFrameReactionButtonVariantProps>];

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/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>];
-}

package/recipes/tag-group-tag.mjs

@@ -1,41 +0,0 @@
-import './tag-group-tag.css';
-import { createClassName, mergeVariants, splitVariantProps } from "./shared.mjs";
-
-const defaultVariant = {
-  "size": "t2",
-  "weight": "regular",
-  "tone": "neutralSubtle"
-};
-
-const compoundVariants = [];
-
-export const tagGroupTagVariantMap = {
-  "size": [
-    "t2",
-    "t3",
-    "t4"
-  ],
-  "weight": [
-    "regular",
-    "bold"
-  ],
-  "tone": [
-    "neutralSubtle",
-    "neutral",
-    "brand"
-  ]
-};
-
-export const tagGroupTagVariantKeys = Object.keys(tagGroupTagVariantMap);
-
-export function tagGroupTag(props) {
-  return createClassName(
-    "seed-tag-group-tag",
-    mergeVariants(defaultVariant, props),
-    compoundVariants,
-  );
-}
-
-Object.assign(tagGroupTag, { splitVariantProps: (props) => splitVariantProps(props, tagGroupTagVariantMap) });
-
-// @recipe(seed): tag-group-tag