@seed-design/css 1.2.5 → 1.2.6

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@seed-design/css",
-  "version": "1.2.5",
+  "version": "1.2.6",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/daangn/seed-design.git",
     "directory": "packages/css"
   },
   "scripts": {
-    "generate": "bun rootage:generate && qvism:generate",
+    "generate": "bun rootage:generate && bun qvism:generate",
     "rootage:generate": "bun rootage token-ts ./vars --prefix seed && rootage component-spec ./vars/component --prefix seed",
     "qvism:generate": "bun qvism ./ ./recipes",
     "lint:publish": "bun publint"

package/recipes/content-placeholder.css

@@ -0,0 +1,24 @@
+.seed-content-placeholder__root {
+    box-sizing: border-box;
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    vertical-align: top;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    background-color: var(--seed-color-palette-gray-200)
+}
+.seed-content-placeholder__asset {
+    display: block;
+    height: calc(0.5 * 100%);
+    min-width: var(--seed-dimension-x4);
+    max-width: 64px;
+    width: auto;
+    aspect-ratio: 1 / 1;
+    color: var(--seed-color-palette-gray-400);
+    fill: currentColor;
+    stroke: currentColor;
+    object-fit: contain
+}

package/recipes/content-placeholder.d.ts

@@ -0,0 +1,24 @@
+declare interface ContentPlaceholderVariant {
+  /**
+  * @default "default"
+  */
+  type: "default" | "buySell" | "car" | "commerce" | "coupon" | "food" | "group" | "image" | "jobs" | "business" | "post" | "realty";
+}
+
+declare type ContentPlaceholderVariantMap = {
+  [key in keyof ContentPlaceholderVariant]: Array<ContentPlaceholderVariant[key]>;
+};
+
+export declare type ContentPlaceholderVariantProps = Partial<ContentPlaceholderVariant>;
+
+export declare type ContentPlaceholderSlotName = "root" | "asset";
+
+export declare const contentPlaceholderVariantMap: ContentPlaceholderVariantMap;
+
+export declare const contentPlaceholder: ((
+  props?: ContentPlaceholderVariantProps,
+) => Record<ContentPlaceholderSlotName, string>) & {
+  splitVariantProps: <T extends ContentPlaceholderVariantProps>(
+    props: T,
+  ) => [ContentPlaceholderVariantProps, Omit<T, keyof ContentPlaceholderVariantProps>];
+}

package/recipes/content-placeholder.layered.css

@@ -0,0 +1,27 @@
+@layer seed-components {
+  .seed-content-placeholder__root {
+    box-sizing: border-box;
+    vertical-align: top;
+    background-color: var(--seed-color-palette-gray-200);
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    height: 100%;
+    display: inline-flex;
+    position: relative;
+    overflow: hidden;
+  }
+
+  .seed-content-placeholder__asset {
+    height: 50%;
+    min-width: var(--seed-dimension-x4);
+    aspect-ratio: 1;
+    width: auto;
+    max-width: 64px;
+    color: var(--seed-color-palette-gray-400);
+    fill: currentColor;
+    stroke: currentColor;
+    object-fit: contain;
+    display: block;
+  }
+}

package/recipes/content-placeholder.layered.mjs

@@ -0,0 +1,53 @@
+import './content-placeholder.layered.css';
+import { createClassName, mergeVariants, splitVariantProps } from "./shared.mjs";
+
+const contentPlaceholderSlotNames = [
+  [
+    "root",
+    "seed-content-placeholder__root"
+  ],
+  [
+    "asset",
+    "seed-content-placeholder__asset"
+  ]
+];
+
+const defaultVariant = {
+  "type": "default"
+};
+
+const compoundVariants = [];
+
+export const contentPlaceholderVariantMap = {
+  "type": [
+    "default",
+    "buySell",
+    "car",
+    "commerce",
+    "coupon",
+    "food",
+    "group",
+    "image",
+    "jobs",
+    "business",
+    "post",
+    "realty"
+  ]
+};
+
+export const contentPlaceholderVariantKeys = Object.keys(contentPlaceholderVariantMap);
+
+export function contentPlaceholder(props) {
+  return Object.fromEntries(
+    contentPlaceholderSlotNames.map(([slot, className]) => {
+      return [
+        slot,
+        createClassName(className, mergeVariants(defaultVariant, props), compoundVariants),
+      ];
+    }),
+  );
+}
+
+Object.assign(contentPlaceholder, { splitVariantProps: (props) => splitVariantProps(props, contentPlaceholderVariantMap) });
+
+// @recipe(seed): content-placeholder

package/recipes/content-placeholder.mjs

@@ -0,0 +1,53 @@
+import './content-placeholder.css';
+import { createClassName, mergeVariants, splitVariantProps } from "./shared.mjs";
+
+const contentPlaceholderSlotNames = [
+  [
+    "root",
+    "seed-content-placeholder__root"
+  ],
+  [
+    "asset",
+    "seed-content-placeholder__asset"
+  ]
+];
+
+const defaultVariant = {
+  "type": "default"
+};
+
+const compoundVariants = [];
+
+export const contentPlaceholderVariantMap = {
+  "type": [
+    "default",
+    "buySell",
+    "car",
+    "commerce",
+    "coupon",
+    "food",
+    "group",
+    "image",
+    "jobs",
+    "business",
+    "post",
+    "realty"
+  ]
+};
+
+export const contentPlaceholderVariantKeys = Object.keys(contentPlaceholderVariantMap);
+
+export function contentPlaceholder(props) {
+  return Object.fromEntries(
+    contentPlaceholderSlotNames.map(([slot, className]) => {
+      return [
+        slot,
+        createClassName(className, mergeVariants(defaultVariant, props), compoundVariants),
+      ];
+    }),
+  );
+}
+
+Object.assign(contentPlaceholder, { splitVariantProps: (props) => splitVariantProps(props, contentPlaceholderVariantMap) });
+
+// @recipe(seed): content-placeholder

package/recipes/help-bubble.css

@@ -77,6 +77,7 @@
     margin-left: calc(var(--seed-dimension-x1) - ((38px - var(--seed-dimension-x3_5)) / 2));
     margin-right: calc(-1 * ((38px - var(--seed-dimension-x3_5)) / 2));
     margin-top: calc(-1 * ((38px - var(--seed-dimension-x3_5)) / 2) + var(--seed-dimension-x0_5));
+    margin-bottom: calc(-1 * ((38px - var(--seed-dimension-x3_5)) / 2) + var(--seed-dimension-x0_5));
     color: var(--seed-color-fg-neutral-inverted);
     --seed-icon-size: var(--seed-dimension-x3_5);
     --seed-icon-color: var(--seed-color-fg-neutral-inverted);

package/recipes/help-bubble.layered.css

@@ -83,6 +83,7 @@
     margin-left: calc(var(--seed-dimension-x1)  - ((38px - var(--seed-dimension-x3_5)) / 2));
     margin-right: calc(-1 * ((38px - var(--seed-dimension-x3_5)) / 2));
     margin-top: calc(-1 * ((38px - var(--seed-dimension-x3_5)) / 2)  + var(--seed-dimension-x0_5));
+    margin-bottom: calc(-1 * ((38px - var(--seed-dimension-x3_5)) / 2)  + var(--seed-dimension-x0_5));
     color: var(--seed-color-fg-neutral-inverted);
     --seed-icon-size: var(--seed-dimension-x3_5);
     --seed-icon-color: var(--seed-color-fg-neutral-inverted);

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";