@seed-design/css 0.0.0-alpha-20260324091316

package/vars/component/chip-tablist.mjs

@@ -0,0 +1,31 @@
+export const vars = {
+  "base": {
+    "enabled": {
+      "root": {
+        "paddingX": "var(--seed-dimension-x4)",
+        "gap": "8px"
+      }
+    }
+  },
+  "variantNeutralSolid": {
+    "enabled": {
+      "root": {
+        "gap": "8px"
+      }
+    }
+  },
+  "variantNeutralOutline": {
+    "enabled": {
+      "root": {
+        "gap": "8px"
+      }
+    }
+  },
+  "variantBrandSolid": {
+    "enabled": {
+      "root": {
+        "gap": "8px"
+      }
+    }
+  }
+}

package/vars/component/chip.d.ts

@@ -0,0 +1,301 @@
+export declare const vars: {
+  "base": {
+    "enabled": {
+      "root": {
+        "colorDuration": "var(--seed-duration-color-transition)",
+        "colorTimingFunction": "var(--seed-timing-function-easing)",
+        "cornerRadius": "var(--seed-radius-full)"
+      },
+      /** Icon, Avatar, Image를 넣을 수 있습니다. 들어오는 요소에 따라 좌측 여백이 달라집니다. */
+      "prefixIcon": {
+        "paddingLeft": "var(--seed-dimension-x1_5)"
+      },
+      "prefixAvatar": {
+        "size": "var(--seed-dimension-x6)"
+      },
+      "suffixIcon": {
+        "paddingRight": "var(--seed-dimension-x1_5)"
+      },
+      "label": {
+        "fontWeight": "var(--seed-font-weight-medium)",
+        "paddingX": "var(--seed-dimension-x1_5)"
+      },
+      "icon": {
+        "color": "var(--seed-color-fg-neutral)"
+      }
+    }
+  },
+  /**
+   * 기본 스타일입니다.
+   */
+  "variantSolid": {
+    "enabled": {
+      "root": {
+        "color": "var(--seed-color-bg-neutral-weak-alpha)"
+      },
+      "label": {
+        "color": "var(--seed-color-fg-neutral)"
+      },
+      /** Icon, Avatar, Image를 넣을 수 있습니다. 들어오는 요소에 따라 좌측 여백이 달라집니다. */
+      "prefixIcon": {
+        "color": "var(--seed-color-fg-neutral)"
+      },
+      "suffixIcon": {
+        "color": "var(--seed-color-fg-neutral)"
+      },
+      "icon": {
+        "color": "var(--seed-color-fg-neutral)"
+      }
+    },
+    "pressed": {
+      "root": {
+        "color": "var(--seed-color-bg-neutral-weak-alpha-pressed)"
+      }
+    },
+    "disabled": {
+      "root": {
+        "opacity": "0.5"
+      }
+    },
+    "selected": {
+      "root": {
+        "color": "var(--seed-color-bg-neutral-inverted)"
+      },
+      "label": {
+        "color": "var(--seed-color-fg-neutral-inverted)"
+      },
+      /** Icon, Avatar, Image를 넣을 수 있습니다. 들어오는 요소에 따라 좌측 여백이 달라집니다. */
+      "prefixIcon": {
+        "color": "var(--seed-color-fg-neutral-inverted)"
+      },
+      "suffixIcon": {
+        "color": "var(--seed-color-fg-neutral-inverted)"
+      },
+      "icon": {
+        "color": "var(--seed-color-fg-neutral-inverted)"
+      }
+    },
+    "selectedPressed": {
+      "root": {
+        "color": "var(--seed-color-bg-neutral-inverted-pressed)"
+      }
+    },
+    "selectedDisabled": {
+      "root": {
+        "opacity": "0.5"
+      }
+    }
+  },
+  /**
+   * 명확한 구분이 필요한 경우 사용합니다.
+   */
+  "variantOutlineStrong": {
+    "enabled": {
+      "root": {
+        "color": "var(--seed-color-bg-transparent)",
+        "strokeColor": "var(--seed-color-stroke-neutral-muted)",
+        "strokeWidth": "1px"
+      },
+      "label": {
+        "color": "var(--seed-color-fg-neutral)"
+      },
+      /** Icon, Avatar, Image를 넣을 수 있습니다. 들어오는 요소에 따라 좌측 여백이 달라집니다. */
+      "prefixIcon": {
+        "color": "var(--seed-color-fg-neutral)"
+      },
+      "suffixIcon": {
+        "color": "var(--seed-color-fg-neutral)"
+      },
+      "icon": {
+        "color": "var(--seed-color-fg-neutral)"
+      }
+    },
+    "pressed": {
+      "root": {
+        "color": "var(--seed-color-bg-transparent-pressed)"
+      }
+    },
+    "disabled": {
+      "root": {
+        "opacity": "0.5"
+      }
+    },
+    "selected": {
+      "root": {
+        "color": "var(--seed-color-bg-neutral-inverted)"
+      },
+      "label": {
+        "color": "var(--seed-color-fg-neutral-inverted)"
+      },
+      /** Icon, Avatar, Image를 넣을 수 있습니다. 들어오는 요소에 따라 좌측 여백이 달라집니다. */
+      "prefixIcon": {
+        "color": "var(--seed-color-fg-neutral-inverted)"
+      },
+      "suffixIcon": {
+        "color": "var(--seed-color-fg-neutral-inverted)"
+      },
+      "icon": {
+        "color": "var(--seed-color-fg-neutral-inverted)"
+      }
+    },
+    "selectedPressed": {
+      "root": {
+        "color": "var(--seed-color-bg-neutral-inverted-pressed)"
+      }
+    },
+    "selectedDisabled": {
+      "root": {
+        "opacity": "0.5"
+      }
+    }
+  },
+  /**
+   * Selection 사용 시 주목도가 낮은 스타일로 권장됩니다.
+   */
+  "variantOutlineWeak": {
+    "enabled": {
+      "root": {
+        "color": "var(--seed-color-bg-transparent)",
+        "strokeColor": "var(--seed-color-stroke-neutral-muted)",
+        "strokeWidth": "1px"
+      },
+      "label": {
+        "color": "var(--seed-color-fg-neutral)"
+      },
+      /** Icon, Avatar, Image를 넣을 수 있습니다. 들어오는 요소에 따라 좌측 여백이 달라집니다. */
+      "prefixIcon": {
+        "color": "var(--seed-color-fg-neutral)"
+      },
+      "suffixIcon": {
+        "color": "var(--seed-color-fg-neutral)"
+      },
+      "icon": {
+        "color": "var(--seed-color-fg-neutral)"
+      }
+    },
+    "pressed": {
+      "root": {
+        "color": "var(--seed-color-bg-transparent-pressed)"
+      }
+    },
+    "disabled": {
+      "root": {
+        "opacity": "0.5"
+      }
+    },
+    "selected": {
+      "root": {
+        "strokeColor": "var(--seed-color-stroke-neutral-contrast)",
+        "color": "var(--seed-color-bg-neutral-weak)"
+      }
+    },
+    "selectedPressed": {
+      "root": {
+        "color": "var(--seed-color-bg-neutral-weak-pressed)"
+      }
+    },
+    "selectedDisabled": {
+      "root": {
+        "opacity": "0.5"
+      }
+    }
+  },
+  "sizeSmall": {
+    "enabled": {
+      "root": {
+        "height": "32px",
+        "paddingX": "var(--seed-dimension-x1_5)"
+      },
+      "label": {
+        "fontSize": "var(--seed-font-size-t4)",
+        "lineHeight": "var(--seed-line-height-t4)"
+      },
+      /** Icon, Avatar, Image를 넣을 수 있습니다. 들어오는 요소에 따라 좌측 여백이 달라집니다. */
+      "prefixIcon": {
+        "size": "var(--seed-dimension-x3_5)"
+      },
+      "suffixIcon": {
+        "size": "var(--seed-dimension-x3_5)"
+      },
+      "prefixAvatar": {
+        "size": "var(--seed-dimension-x5)"
+      },
+      "icon": {
+        "size": "var(--seed-dimension-x3_5)"
+      }
+    }
+  },
+  "sizeMedium": {
+    "enabled": {
+      "root": {
+        "height": "36px",
+        "paddingX": "var(--seed-dimension-x2)"
+      },
+      "label": {
+        "fontSize": "var(--seed-font-size-t4)",
+        "lineHeight": "var(--seed-line-height-t4)"
+      },
+      /** Icon, Avatar, Image를 넣을 수 있습니다. 들어오는 요소에 따라 좌측 여백이 달라집니다. */
+      "prefixIcon": {
+        "size": "var(--seed-dimension-x4)"
+      },
+      "suffixIcon": {
+        "size": "var(--seed-dimension-x3_5)"
+      },
+      "prefixAvatar": {
+        "size": "var(--seed-dimension-x6)"
+      },
+      "icon": {
+        "size": "var(--seed-dimension-x4)"
+      }
+    }
+  },
+  "sizeLarge": {
+    "enabled": {
+      "root": {
+        "height": "40px",
+        "paddingX": "var(--seed-dimension-x2_5)"
+      },
+      "label": {
+        "fontSize": "var(--seed-font-size-t4)",
+        "lineHeight": "var(--seed-line-height-t4)"
+      },
+      /** Icon, Avatar, Image를 넣을 수 있습니다. 들어오는 요소에 따라 좌측 여백이 달라집니다. */
+      "prefixIcon": {
+        "size": "var(--seed-dimension-x4)",
+        "paddingLeft": "var(--seed-dimension-x1_5)"
+      },
+      "suffixIcon": {
+        "size": "var(--seed-dimension-x4)"
+      },
+      "prefixAvatar": {
+        "size": "var(--seed-dimension-x7)"
+      },
+      "icon": {
+        "size": "var(--seed-dimension-x4)"
+      }
+    }
+  },
+  "layoutWithText": {},
+  "sizeSmallLayoutIconOnly": {
+    "enabled": {
+      "root": {
+        "minWidth": "var(--seed-dimension-x8)"
+      }
+    }
+  },
+  "sizeMediumLayoutIconOnly": {
+    "enabled": {
+      "root": {
+        "minWidth": "var(--seed-dimension-x9)"
+      }
+    }
+  },
+  "sizeLargeLayoutIconOnly": {
+    "enabled": {
+      "root": {
+        "minWidth": "var(--seed-dimension-x10)"
+      }
+    }
+  }
+}

package/vars/component/chip.mjs

@@ -0,0 +1,283 @@
+export const vars = {
+  "base": {
+    "enabled": {
+      "root": {
+        "colorDuration": "var(--seed-duration-color-transition)",
+        "colorTimingFunction": "var(--seed-timing-function-easing)",
+        "cornerRadius": "var(--seed-radius-full)"
+      },
+      "prefixIcon": {
+        "paddingLeft": "var(--seed-dimension-x1_5)"
+      },
+      "prefixAvatar": {
+        "size": "var(--seed-dimension-x6)"
+      },
+      "suffixIcon": {
+        "paddingRight": "var(--seed-dimension-x1_5)"
+      },
+      "label": {
+        "fontWeight": "var(--seed-font-weight-medium)",
+        "paddingX": "var(--seed-dimension-x1_5)"
+      },
+      "icon": {
+        "color": "var(--seed-color-fg-neutral)"
+      }
+    }
+  },
+  "variantSolid": {
+    "enabled": {
+      "root": {
+        "color": "var(--seed-color-bg-neutral-weak-alpha)"
+      },
+      "label": {
+        "color": "var(--seed-color-fg-neutral)"
+      },
+      "prefixIcon": {
+        "color": "var(--seed-color-fg-neutral)"
+      },
+      "suffixIcon": {
+        "color": "var(--seed-color-fg-neutral)"
+      },
+      "icon": {
+        "color": "var(--seed-color-fg-neutral)"
+      }
+    },
+    "pressed": {
+      "root": {
+        "color": "var(--seed-color-bg-neutral-weak-alpha-pressed)"
+      }
+    },
+    "disabled": {
+      "root": {
+        "opacity": "0.5"
+      }
+    },
+    "selected": {
+      "root": {
+        "color": "var(--seed-color-bg-neutral-inverted)"
+      },
+      "label": {
+        "color": "var(--seed-color-fg-neutral-inverted)"
+      },
+      "prefixIcon": {
+        "color": "var(--seed-color-fg-neutral-inverted)"
+      },
+      "suffixIcon": {
+        "color": "var(--seed-color-fg-neutral-inverted)"
+      },
+      "icon": {
+        "color": "var(--seed-color-fg-neutral-inverted)"
+      }
+    },
+    "selectedPressed": {
+      "root": {
+        "color": "var(--seed-color-bg-neutral-inverted-pressed)"
+      }
+    },
+    "selectedDisabled": {
+      "root": {
+        "opacity": "0.5"
+      }
+    }
+  },
+  "variantOutlineStrong": {
+    "enabled": {
+      "root": {
+        "color": "var(--seed-color-bg-transparent)",
+        "strokeColor": "var(--seed-color-stroke-neutral-muted)",
+        "strokeWidth": "1px"
+      },
+      "label": {
+        "color": "var(--seed-color-fg-neutral)"
+      },
+      "prefixIcon": {
+        "color": "var(--seed-color-fg-neutral)"
+      },
+      "suffixIcon": {
+        "color": "var(--seed-color-fg-neutral)"
+      },
+      "icon": {
+        "color": "var(--seed-color-fg-neutral)"
+      }
+    },
+    "pressed": {
+      "root": {
+        "color": "var(--seed-color-bg-transparent-pressed)"
+      }
+    },
+    "disabled": {
+      "root": {
+        "opacity": "0.5"
+      }
+    },
+    "selected": {
+      "root": {
+        "color": "var(--seed-color-bg-neutral-inverted)"
+      },
+      "label": {
+        "color": "var(--seed-color-fg-neutral-inverted)"
+      },
+      "prefixIcon": {
+        "color": "var(--seed-color-fg-neutral-inverted)"
+      },
+      "suffixIcon": {
+        "color": "var(--seed-color-fg-neutral-inverted)"
+      },
+      "icon": {
+        "color": "var(--seed-color-fg-neutral-inverted)"
+      }
+    },
+    "selectedPressed": {
+      "root": {
+        "color": "var(--seed-color-bg-neutral-inverted-pressed)"
+      }
+    },
+    "selectedDisabled": {
+      "root": {
+        "opacity": "0.5"
+      }
+    }
+  },
+  "variantOutlineWeak": {
+    "enabled": {
+      "root": {
+        "color": "var(--seed-color-bg-transparent)",
+        "strokeColor": "var(--seed-color-stroke-neutral-muted)",
+        "strokeWidth": "1px"
+      },
+      "label": {
+        "color": "var(--seed-color-fg-neutral)"
+      },
+      "prefixIcon": {
+        "color": "var(--seed-color-fg-neutral)"
+      },
+      "suffixIcon": {
+        "color": "var(--seed-color-fg-neutral)"
+      },
+      "icon": {
+        "color": "var(--seed-color-fg-neutral)"
+      }
+    },
+    "pressed": {
+      "root": {
+        "color": "var(--seed-color-bg-transparent-pressed)"
+      }
+    },
+    "disabled": {
+      "root": {
+        "opacity": "0.5"
+      }
+    },
+    "selected": {
+      "root": {
+        "strokeColor": "var(--seed-color-stroke-neutral-contrast)",
+        "color": "var(--seed-color-bg-neutral-weak)"
+      }
+    },
+    "selectedPressed": {
+      "root": {
+        "color": "var(--seed-color-bg-neutral-weak-pressed)"
+      }
+    },
+    "selectedDisabled": {
+      "root": {
+        "opacity": "0.5"
+      }
+    }
+  },
+  "sizeSmall": {
+    "enabled": {
+      "root": {
+        "height": "32px",
+        "paddingX": "var(--seed-dimension-x1_5)"
+      },
+      "label": {
+        "fontSize": "var(--seed-font-size-t4)",
+        "lineHeight": "var(--seed-line-height-t4)"
+      },
+      "prefixIcon": {
+        "size": "var(--seed-dimension-x3_5)"
+      },
+      "suffixIcon": {
+        "size": "var(--seed-dimension-x3_5)"
+      },
+      "prefixAvatar": {
+        "size": "var(--seed-dimension-x5)"
+      },
+      "icon": {
+        "size": "var(--seed-dimension-x3_5)"
+      }
+    }
+  },
+  "sizeMedium": {
+    "enabled": {
+      "root": {
+        "height": "36px",
+        "paddingX": "var(--seed-dimension-x2)"
+      },
+      "label": {
+        "fontSize": "var(--seed-font-size-t4)",
+        "lineHeight": "var(--seed-line-height-t4)"
+      },
+      "prefixIcon": {
+        "size": "var(--seed-dimension-x4)"
+      },
+      "suffixIcon": {
+        "size": "var(--seed-dimension-x3_5)"
+      },
+      "prefixAvatar": {
+        "size": "var(--seed-dimension-x6)"
+      },
+      "icon": {
+        "size": "var(--seed-dimension-x4)"
+      }
+    }
+  },
+  "sizeLarge": {
+    "enabled": {
+      "root": {
+        "height": "40px",
+        "paddingX": "var(--seed-dimension-x2_5)"
+      },
+      "label": {
+        "fontSize": "var(--seed-font-size-t4)",
+        "lineHeight": "var(--seed-line-height-t4)"
+      },
+      "prefixIcon": {
+        "size": "var(--seed-dimension-x4)",
+        "paddingLeft": "var(--seed-dimension-x1_5)"
+      },
+      "suffixIcon": {
+        "size": "var(--seed-dimension-x4)"
+      },
+      "prefixAvatar": {
+        "size": "var(--seed-dimension-x7)"
+      },
+      "icon": {
+        "size": "var(--seed-dimension-x4)"
+      }
+    }
+  },
+  "layoutWithText": {},
+  "sizeSmallLayoutIconOnly": {
+    "enabled": {
+      "root": {
+        "minWidth": "var(--seed-dimension-x8)"
+      }
+    }
+  },
+  "sizeMediumLayoutIconOnly": {
+    "enabled": {
+      "root": {
+        "minWidth": "var(--seed-dimension-x9)"
+      }
+    }
+  },
+  "sizeLargeLayoutIconOnly": {
+    "enabled": {
+      "root": {
+        "minWidth": "var(--seed-dimension-x10)"
+      }
+    }
+  }
+}

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": {}
+}