@seed-design/css 1.1.16 → 1.1.19

package/vars/component/action-button.d.ts

@@ -10,6 +10,9 @@ export declare const vars: {
       }
     }
   },
+  /**
+   * 브랜드의 핵심 가치를 전달하며, 사용자 간 연결이 일어나는 서비스의 주요 기능에 사용합니다. 한 화면에 하나만 사용하는 것을 권장합니다.
+   */
   "variantBrandSolid": {
     "enabled": {
       "root": {
@@ -22,9 +25,11 @@ export declare const vars: {
       "icon": {
         "color": "var(--seed-color-palette-static-white)"
       },
+      /** 주로 액션의 의미를 보조합니다. */
       "prefixIcon": {
         "color": "var(--seed-color-palette-static-white)"
       },
+      /** Chevron처럼 동작을 보조하는 역할입니다. */
       "suffixIcon": {
         "color": "var(--seed-color-palette-static-white)"
       },
@@ -49,9 +54,11 @@ export declare const vars: {
       "icon": {
         "color": "var(--seed-color-fg-disabled)"
       },
+      /** 주로 액션의 의미를 보조합니다. */
       "prefixIcon": {
         "color": "var(--seed-color-fg-disabled)"
       },
+      /** Chevron처럼 동작을 보조하는 역할입니다. */
       "suffixIcon": {
         "color": "var(--seed-color-fg-disabled)"
       }
@@ -62,6 +69,9 @@ export declare const vars: {
       }
     }
   },
+  /**
+   * 대부분의 화면에서 CTA로 사용합니다. 한 화면에 하나만 사용하는 것을 권장합니다.
+   */
   "variantNeutralSolid": {
     "enabled": {
       "root": {
@@ -74,9 +84,11 @@ export declare const vars: {
       "icon": {
         "color": "var(--seed-color-fg-neutral-inverted)"
       },
+      /** 주로 액션의 의미를 보조합니다. */
       "prefixIcon": {
         "color": "var(--seed-color-fg-neutral-inverted)"
       },
+      /** Chevron처럼 동작을 보조하는 역할입니다. */
       "suffixIcon": {
         "color": "var(--seed-color-fg-neutral-inverted)"
       },
@@ -101,9 +113,11 @@ export declare const vars: {
       "icon": {
         "color": "var(--seed-color-fg-disabled)"
       },
+      /** 주로 액션의 의미를 보조합니다. */
       "prefixIcon": {
         "color": "var(--seed-color-fg-disabled)"
       },
+      /** Chevron처럼 동작을 보조하는 역할입니다. */
       "suffixIcon": {
         "color": "var(--seed-color-fg-disabled)"
       }
@@ -114,6 +128,9 @@ export declare const vars: {
       }
     }
   },
+  /**
+   * CTA를 제외한 대부분의 액션에 사용됩니다.
+   */
   "variantNeutralWeak": {
     "enabled": {
       "root": {
@@ -126,9 +143,11 @@ export declare const vars: {
       "icon": {
         "color": "var(--seed-color-fg-neutral)"
       },
+      /** 주로 액션의 의미를 보조합니다. */
       "prefixIcon": {
         "color": "var(--seed-color-fg-neutral)"
       },
+      /** Chevron처럼 동작을 보조하는 역할입니다. */
       "suffixIcon": {
         "color": "var(--seed-color-fg-neutral)"
       },
@@ -153,9 +172,11 @@ export declare const vars: {
       "icon": {
         "color": "var(--seed-color-fg-disabled)"
       },
+      /** 주로 액션의 의미를 보조합니다. */
       "prefixIcon": {
         "color": "var(--seed-color-fg-disabled)"
       },
+      /** Chevron처럼 동작을 보조하는 역할입니다. */
       "suffixIcon": {
         "color": "var(--seed-color-fg-disabled)"
       }
@@ -166,6 +187,9 @@ export declare const vars: {
       }
     }
   },
+  /**
+   * 삭제나 초기화처럼 되돌릴 수 없는 중요한 작업에 사용합니다.
+   */
   "variantCriticalSolid": {
     "enabled": {
       "root": {
@@ -178,9 +202,11 @@ export declare const vars: {
       "icon": {
         "color": "var(--seed-color-palette-static-white)"
       },
+      /** 주로 액션의 의미를 보조합니다. */
       "prefixIcon": {
         "color": "var(--seed-color-palette-static-white)"
       },
+      /** Chevron처럼 동작을 보조하는 역할입니다. */
       "suffixIcon": {
         "color": "var(--seed-color-palette-static-white)"
       },
@@ -205,9 +231,11 @@ export declare const vars: {
       "icon": {
         "color": "var(--seed-color-fg-disabled)"
       },
+      /** 주로 액션의 의미를 보조합니다. */
       "prefixIcon": {
         "color": "var(--seed-color-fg-disabled)"
       },
+      /** Chevron처럼 동작을 보조하는 역할입니다. */
       "suffixIcon": {
         "color": "var(--seed-color-fg-disabled)"
       }
@@ -218,6 +246,9 @@ export declare const vars: {
       }
     }
   },
+  /**
+   * Solid 타입과 함께 사용할 수 없으며, Brand Outline과 조합하여 사용하는 것을 권장합니다.
+   */
   "variantNeutralOutline": {
     "enabled": {
       "root": {
@@ -232,9 +263,11 @@ export declare const vars: {
       "icon": {
         "color": "var(--seed-color-fg-neutral)"
       },
+      /** 주로 액션의 의미를 보조합니다. */
       "prefixIcon": {
         "color": "var(--seed-color-fg-neutral)"
       },
+      /** Chevron처럼 동작을 보조하는 역할입니다. */
       "suffixIcon": {
         "color": "var(--seed-color-fg-neutral)"
       },
@@ -260,9 +293,11 @@ export declare const vars: {
       "icon": {
         "color": "var(--seed-color-fg-disabled)"
       },
+      /** 주로 액션의 의미를 보조합니다. */
       "prefixIcon": {
         "color": "var(--seed-color-fg-disabled)"
       },
+      /** Chevron처럼 동작을 보조하는 역할입니다. */
       "suffixIcon": {
         "color": "var(--seed-color-fg-disabled)"
       }
@@ -273,6 +308,9 @@ export declare const vars: {
       }
     }
   },
+  /**
+   * Solid 타입과 함께 사용할 수 없으며, Neutral Outline과 조합하여 사용하는 것을 권장합니다.
+   */
   "variantBrandOutline": {
     "enabled": {
       "root": {
@@ -287,9 +325,11 @@ export declare const vars: {
       "icon": {
         "color": "var(--seed-color-fg-brand)"
       },
+      /** 주로 액션의 의미를 보조합니다. */
       "prefixIcon": {
         "color": "var(--seed-color-fg-brand)"
       },
+      /** Chevron처럼 동작을 보조하는 역할입니다. */
       "suffixIcon": {
         "color": "var(--seed-color-fg-brand)"
       },
@@ -315,9 +355,11 @@ export declare const vars: {
       "icon": {
         "color": "var(--seed-color-fg-disabled)"
       },
+      /** 주로 액션의 의미를 보조합니다. */
       "prefixIcon": {
         "color": "var(--seed-color-fg-disabled)"
       },
+      /** Chevron처럼 동작을 보조하는 역할입니다. */
       "suffixIcon": {
         "color": "var(--seed-color-fg-disabled)"
       }
@@ -328,6 +370,9 @@ export declare const vars: {
       }
     }
   },
+  /**
+   * 배경 없이 텍스트와 아이콘만 표시됩니다.
+   */
   "variantGhost": {
     "enabled": {
       "root": {
@@ -340,9 +385,11 @@ export declare const vars: {
       "icon": {
         "color": "var(--seed-color-fg-neutral)"
       },
+      /** 주로 액션의 의미를 보조합니다. */
       "prefixIcon": {
         "color": "var(--seed-color-fg-neutral)"
       },
+      /** Chevron처럼 동작을 보조하는 역할입니다. */
       "suffixIcon": {
         "color": "var(--seed-color-fg-neutral)"
       },
@@ -367,9 +414,11 @@ export declare const vars: {
       "icon": {
         "color": "var(--seed-color-fg-disabled)"
       },
+      /** 주로 액션의 의미를 보조합니다. */
       "prefixIcon": {
         "color": "var(--seed-color-fg-disabled)"
       },
+      /** Chevron처럼 동작을 보조하는 역할입니다. */
       "suffixIcon": {
         "color": "var(--seed-color-fg-disabled)"
       }
@@ -380,6 +429,9 @@ export declare const vars: {
       }
     }
   },
+  /**
+   * 작은 공간에서 효율적으로 사용할 수 있는 Pill 형태로 제공됩니다.
+   */
   "sizeXsmall": {
     "enabled": {
       "root": {
@@ -392,6 +444,10 @@ export declare const vars: {
       }
     }
   },
+  /**
+   * - `size=xsmall`: 작은 공간에서 효율적으로 사용할 수 있는 Pill 형태로 제공됩니다.
+   * - `layout=withText`: 텍스트와 함께 아이콘을 표시할 수 있습니다.
+   */
   "sizeXsmallLayoutWithText": {
     "enabled": {
       "root": {
@@ -399,9 +455,11 @@ export declare const vars: {
         "paddingX": "var(--seed-dimension-x3_5)",
         "paddingY": "var(--seed-dimension-x1_5)"
       },
+      /** 주로 액션의 의미를 보조합니다. */
       "prefixIcon": {
         "size": "var(--seed-dimension-x3_5)"
       },
+      /** Chevron처럼 동작을 보조하는 역할입니다. */
       "suffixIcon": {
         "size": "var(--seed-dimension-x3_5)"
       },
@@ -411,6 +469,10 @@ export declare const vars: {
       }
     }
   },
+  /**
+   * - `size=xsmall`: 작은 공간에서 효율적으로 사용할 수 있는 Pill 형태로 제공됩니다.
+   * - `layout=iconOnly`: 아이콘만으로 의미를 전달하기 때문에 접근성이 떨어집니다. 꼭 필요한 경우에만 사용하는 것을 권장합니다.
+   */
   "sizeXsmallLayoutIconOnly": {
     "enabled": {
       "root": {
@@ -424,6 +486,9 @@ export declare const vars: {
       }
     }
   },
+  /**
+   * 화면 중앙에서 범용적으로 사용됩니다.
+   */
   "sizeSmall": {
     "enabled": {
       "root": {
@@ -436,6 +501,10 @@ export declare const vars: {
       }
     }
   },
+  /**
+   * - `size=small`: 화면 중앙에서 범용적으로 사용됩니다.
+   * - `layout=withText`: 텍스트와 함께 아이콘을 표시할 수 있습니다.
+   */
   "sizeSmallLayoutWithText": {
     "enabled": {
       "root": {
@@ -443,9 +512,11 @@ export declare const vars: {
         "paddingX": "var(--seed-dimension-x3_5)",
         "paddingY": "var(--seed-dimension-x2)"
       },
+      /** 주로 액션의 의미를 보조합니다. */
       "prefixIcon": {
         "size": "var(--seed-dimension-x3_5)"
       },
+      /** Chevron처럼 동작을 보조하는 역할입니다. */
       "suffixIcon": {
         "size": "var(--seed-dimension-x3_5)"
       },
@@ -455,6 +526,10 @@ export declare const vars: {
       }
     }
   },
+  /**
+   * - `size=small`: 화면 중앙에서 범용적으로 사용됩니다.
+   * - `layout=iconOnly`: 아이콘만으로 의미를 전달하기 때문에 접근성이 떨어집니다. 꼭 필요한 경우에만 사용하는 것을 권장합니다.
+   */
   "sizeSmallLayoutIconOnly": {
     "enabled": {
       "root": {
@@ -468,6 +543,9 @@ export declare const vars: {
       }
     }
   },
+  /**
+   * 화면 중앙에서 범용적으로 사용됩니다.
+   */
   "sizeMedium": {
     "enabled": {
       "root": {
@@ -480,6 +558,10 @@ export declare const vars: {
       }
     }
   },
+  /**
+   * - `size=medium`: 화면 중앙에서 범용적으로 사용됩니다.
+   * - `layout=withText`: 텍스트와 함께 아이콘을 표시할 수 있습니다.
+   */
   "sizeMediumLayoutWithText": {
     "enabled": {
       "root": {
@@ -487,9 +569,11 @@ export declare const vars: {
         "paddingX": "var(--seed-dimension-x4)",
         "paddingY": "var(--seed-dimension-x2_5)"
       },
+      /** 주로 액션의 의미를 보조합니다. */
       "prefixIcon": {
         "size": "var(--seed-dimension-x4)"
       },
+      /** Chevron처럼 동작을 보조하는 역할입니다. */
       "suffixIcon": {
         "size": "var(--seed-dimension-x4)"
       },
@@ -499,6 +583,10 @@ export declare const vars: {
       }
     }
   },
+  /**
+   * - `size=medium`: 화면 중앙에서 범용적으로 사용됩니다.
+   * - `layout=iconOnly`: 아이콘만으로 의미를 전달하기 때문에 접근성이 떨어집니다. 꼭 필요한 경우에만 사용하는 것을 권장합니다.
+   */
   "sizeMediumLayoutIconOnly": {
     "enabled": {
       "root": {
@@ -512,6 +600,9 @@ export declare const vars: {
       }
     }
   },
+  /**
+   * 주로 CTA 역할로 사용됩니다.
+   */
   "sizeLarge": {
     "enabled": {
       "root": {
@@ -524,6 +615,10 @@ export declare const vars: {
       }
     }
   },
+  /**
+   * - `size=large`: 주로 CTA 역할로 사용됩니다.
+   * - `layout=withText`: 텍스트와 함께 아이콘을 표시할 수 있습니다.
+   */
   "sizeLargeLayoutWithText": {
     "enabled": {
       "root": {
@@ -531,9 +626,11 @@ export declare const vars: {
         "paddingX": "var(--seed-dimension-x5)",
         "paddingY": "var(--seed-dimension-x3_5)"
       },
+      /** 주로 액션의 의미를 보조합니다. */
       "prefixIcon": {
         "size": "22px"
       },
+      /** Chevron처럼 동작을 보조하는 역할입니다. */
       "suffixIcon": {
         "size": "22px"
       },
@@ -543,6 +640,10 @@ export declare const vars: {
       }
     }
   },
+  /**
+   * - `size=large`: 주로 CTA 역할로 사용됩니다.
+   * - `layout=iconOnly`: 아이콘만으로 의미를 전달하기 때문에 접근성이 떨어집니다. 꼭 필요한 경우에만 사용하는 것을 권장합니다.
+   */
   "sizeLargeLayoutIconOnly": {
     "enabled": {
       "root": {

package/vars/component/avatar.d.ts

@@ -21,10 +21,12 @@ export declare const vars: {
         "size": "24px",
         "strokeWidth": "1px"
       },
+      /** size=20에서는 지원되지 않습니다. */
       "badgeMask": {
         "offset": "14px",
         "size": "12px"
       },
+      /** size=20에서는 지원되지 않습니다. */
       "badge": {
         "offset": "15px",
         "size": "10px"
@@ -37,10 +39,12 @@ export declare const vars: {
         "size": "36px",
         "strokeWidth": "1px"
       },
+      /** size=20에서는 지원되지 않습니다. */
       "badgeMask": {
         "offset": "20px",
         "size": "18px"
       },
+      /** size=20에서는 지원되지 않습니다. */
       "badge": {
         "offset": "22px",
         "size": "14px"
@@ -53,10 +57,12 @@ export declare const vars: {
         "size": "42px",
         "strokeWidth": "1px"
       },
+      /** size=20에서는 지원되지 않습니다. */
       "badgeMask": {
         "offset": "24px",
         "size": "20px"
       },
+      /** size=20에서는 지원되지 않습니다. */
       "badge": {
         "offset": "26px",
         "size": "16px"
@@ -69,10 +75,12 @@ export declare const vars: {
         "size": "48px",
         "strokeWidth": "1px"
       },
+      /** size=20에서는 지원되지 않습니다. */
       "badgeMask": {
         "offset": "28px",
         "size": "22px"
       },
+      /** size=20에서는 지원되지 않습니다. */
       "badge": {
         "offset": "30px",
         "size": "18px"
@@ -85,10 +93,12 @@ export declare const vars: {
         "size": "64px",
         "strokeWidth": "1px"
       },
+      /** size=20에서는 지원되지 않습니다. */
       "badgeMask": {
         "offset": "40px",
         "size": "26px"
       },
+      /** size=20에서는 지원되지 않습니다. */
       "badge": {
         "offset": "42px",
         "size": "22px"
@@ -101,10 +111,12 @@ export declare const vars: {
         "size": "80px",
         "strokeWidth": "1px"
       },
+      /** size=20에서는 지원되지 않습니다. */
       "badgeMask": {
         "offset": "52px",
         "size": "32px"
       },
+      /** size=20에서는 지원되지 않습니다. */
       "badge": {
         "offset": "54px",
         "size": "28px"
@@ -117,10 +129,12 @@ export declare const vars: {
         "size": "96px",
         "strokeWidth": "1px"
       },
+      /** size=20에서는 지원되지 않습니다. */
       "badgeMask": {
         "offset": "62px",
         "size": "38px"
       },
+      /** size=20에서는 지원되지 않습니다. */
       "badge": {
         "offset": "65px",
         "size": "32px"
@@ -133,10 +147,12 @@ export declare const vars: {
         "size": "108px",
         "strokeWidth": "1px"
       },
+      /** size=20에서는 지원되지 않습니다. */
       "badgeMask": {
         "offset": "70px",
         "size": "44px"
       },
+      /** size=20에서는 지원되지 않습니다. */
       "badge": {
         "offset": "74px",
         "size": "36px"