@seed-design/rootage-artifacts 1.1.7 → 1.1.8

package/color.yaml

@@ -2,7 +2,7 @@ kind: Tokens
 metadata:
   id: color
   name: Color
-  lastUpdated: 26-01-06
+  lastUpdated: 26-01-15
 data:
   collection: color
   tokens:
@@ -383,18 +383,22 @@ data:
         theme-light: "#fffffff4"
         theme-dark: "#fffffff4"
     $color.fg.brand:
+      description: 브랜드와 관련된 요소들이 즉각적으로 인식될 수 있도록 돕습니다.
       values:
         theme-light: $color.palette.carrot-600
         theme-dark: $color.palette.carrot-700
     $color.fg.brand-contrast:
+      description: 브랜드와 관련된 요소들이 즉각적으로 인식될 수 있도록 돕습니다. (contrast)
       values:
         theme-light: $color.palette.carrot-700
         theme-dark: $color.palette.carrot-700
     $color.fg.critical:
+      description: 오류, 경고 또는 중요한 문제를 나타내는 데 사용됩니다.
       values:
         theme-light: $color.palette.red-700
         theme-dark: $color.palette.red-700
     $color.fg.critical-contrast:
+      description: 오류, 경고 또는 중요한 문제를 나타내는 데 사용됩니다. (contrast)
       values:
         theme-light: $color.palette.red-900
         theme-dark: $color.palette.red-900
@@ -403,26 +407,32 @@ data:
         theme-light: $color.palette.gray-500
         theme-dark: $color.palette.gray-500
     $color.fg.informative:
+      description: 사용자에게 유용한 정보를 제공하거나 상태를 설명할 때 사용됩니다.
       values:
         theme-light: $color.palette.blue-700
         theme-dark: $color.palette.blue-700
     $color.fg.informative-contrast:
+      description: 사용자에게 유용한 정보를 제공하거나 상태를 설명할 때 사용됩니다. (contrast)
       values:
         theme-light: $color.palette.blue-900
         theme-dark: $color.palette.blue-900
     $color.fg.neutral:
+      description: 일반적인 콘텐츠에 사용되는 기본 색상입니다.
       values:
         theme-light: $color.palette.gray-1000
         theme-dark: $color.palette.gray-1000
     $color.fg.neutral-inverted:
+      description: 일반적인 콘텐츠에 사용되는 기본 색상입니다. (inverted)
       values:
         theme-light: $color.palette.gray-00
         theme-dark: $color.palette.gray-100
     $color.fg.neutral-muted:
+      description: 일반적인 콘텐츠에 사용되는 기본 색상입니다. (muted)
       values:
         theme-light: $color.palette.gray-800
         theme-dark: $color.palette.gray-800
     $color.fg.neutral-subtle:
+      description: 일반적인 콘텐츠에 사용되는 기본 색상입니다. (subtle)
       values:
         theme-light: $color.palette.gray-700
         theme-dark: $color.palette.gray-700
@@ -431,50 +441,62 @@ data:
         theme-light: $color.palette.gray-600
         theme-dark: $color.palette.gray-600
     $color.fg.positive:
+      description: 성공적인 작업, 확인, 또는 긍정적인 상태를 나타내는 데 사용됩니다.
       values:
         theme-light: $color.palette.green-700
         theme-dark: $color.palette.green-700
     $color.fg.positive-contrast:
+      description: 성공적인 작업, 확인, 또는 긍정적인 상태를 나타내는 데 사용됩니다. (contrast)
       values:
         theme-light: $color.palette.green-900
         theme-dark: $color.palette.green-900
     $color.fg.warning:
+      description: 사용자의 주의가 필요한 경고 메시지나 안내 사항을 전달하는 데 사용됩니다.
       values:
         theme-light: $color.palette.yellow-700
         theme-dark: $color.palette.yellow-700
     $color.fg.warning-contrast:
+      description: 사용자의 주의가 필요한 경고 메시지나 안내 사항을 전달하는 데 사용됩니다. (contrast)
       values:
         theme-light: $color.palette.yellow-900
         theme-dark: $color.palette.yellow-900
     $color.bg.brand-solid:
+      description: 브랜드와 관련된 요소들이 즉각적으로 인식될 수 있도록 돕습니다. 화면에서 가장 중요한 액션을 강조하는데 사용할 수 있습니다. (solid)
       values:
         theme-light: $color.palette.carrot-600
         theme-dark: $color.palette.carrot-700
     $color.bg.brand-solid-pressed:
+      description: 브랜드와 관련된 요소들이 즉각적으로 인식될 수 있도록 돕습니다. 화면에서 가장 중요한 액션을 강조하는데 사용할 수 있습니다. (solid-pressed)
       values:
         theme-light: $color.palette.carrot-700
         theme-dark: $color.palette.carrot-800
     $color.bg.brand-weak:
+      description: 브랜드와 관련된 요소들이 즉각적으로 인식될 수 있도록 돕습니다. 화면에서 가장 중요한 액션을 강조하는데 사용할 수 있습니다. (weak)
       values:
         theme-light: $color.palette.carrot-100
         theme-dark: $color.palette.carrot-100
     $color.bg.brand-weak-pressed:
+      description: 브랜드와 관련된 요소들이 즉각적으로 인식될 수 있도록 돕습니다. 화면에서 가장 중요한 액션을 강조하는데 사용할 수 있습니다. (weak-pressed)
       values:
         theme-light: $color.palette.carrot-200
         theme-dark: $color.palette.carrot-200
     $color.bg.critical-solid:
+      description: 오류, 경고 또는 중요한 문제를 나타내는 데 사용됩니다. (solid)
       values:
         theme-light: $color.palette.red-700
         theme-dark: $color.palette.red-600
     $color.bg.critical-solid-pressed:
+      description: 오류, 경고 또는 중요한 문제를 나타내는 데 사용됩니다. (solid-pressed)
       values:
         theme-light: $color.palette.red-800
         theme-dark: $color.palette.red-700
     $color.bg.critical-weak:
+      description: 오류, 경고 또는 중요한 문제를 나타내는 데 사용됩니다. (weak)
       values:
         theme-light: $color.palette.red-100
         theme-dark: $color.palette.red-100
     $color.bg.critical-weak-pressed:
+      description: 오류, 경고 또는 중요한 문제를 나타내는 데 사용됩니다. (weak-pressed)
       values:
         theme-light: $color.palette.red-200
         theme-dark: $color.palette.red-200
@@ -483,42 +505,52 @@ data:
         theme-light: $color.palette.gray-200
         theme-dark: $color.palette.gray-300
     $color.bg.informative-solid:
+      description: 사용자에게 유용한 정보를 제공하거나 상태를 설명할 때 사용됩니다. (solid)
       values:
         theme-light: $color.palette.blue-700
         theme-dark: $color.palette.blue-600
     $color.bg.informative-solid-pressed:
+      description: 사용자에게 유용한 정보를 제공하거나 상태를 설명할 때 사용됩니다. (solid-pressed)
       values:
         theme-light: $color.palette.blue-800
         theme-dark: $color.palette.blue-700
     $color.bg.informative-weak:
+      description: 사용자에게 유용한 정보를 제공하거나 상태를 설명할 때 사용됩니다. (weak)
       values:
         theme-light: $color.palette.blue-100
         theme-dark: $color.palette.blue-100
     $color.bg.informative-weak-pressed:
+      description: 사용자에게 유용한 정보를 제공하거나 상태를 설명할 때 사용됩니다. (weak-pressed)
       values:
         theme-light: $color.palette.blue-200
         theme-dark: $color.palette.blue-200
     $color.bg.layer-basement:
+      description: 가장 낮은 0단계의 '대지'입니다. 앱의 가장 깊은 곳에 위치하는 전체 배경색입니다.
       values:
         theme-light: $color.palette.gray-200
         theme-dark: $color.palette.gray-00
     $color.bg.layer-default:
+      description: basement 바로 위에 놓이는 기본 표면입니다. 대부분의 스크린 콘텐츠가 이 레이어 위에서 표현됩니다.
       values:
         theme-light: $color.palette.gray-00
         theme-dark: $color.palette.gray-100
     $color.bg.layer-default-pressed:
+      description: basement 바로 위에 놓이는 기본 표면입니다. 대부분의 스크린 콘텐츠가 이 레이어 위에서 표현됩니다. (pressed)
       values:
         theme-light: $color.palette.gray-100
         theme-dark: $color.palette.gray-300
     $color.bg.layer-fill:
+      description: "@deprecated `@seed-design/css@1.3.0`에서 제거될 예정입니다."
       values:
         theme-light: $color.palette.gray-100
         theme-dark: $color.palette.gray-200
     $color.bg.layer-floating:
+      description: 앱의 모든 콘텐츠 위를 덮으며(floating) 나타나는 임시 레이어입니다. 모달성 요소들이 여기에 속합니다.
       values:
         theme-light: $color.palette.gray-00
         theme-dark: $color.palette.gray-200
     $color.bg.layer-floating-pressed:
+      description: 앱의 모든 콘텐츠 위를 덮으며(floating) 나타나는 임시 레이어입니다. 모달성 요소들이 여기에 속합니다. (pressed)
       values:
         theme-light: $color.palette.gray-100
         theme-dark: $color.palette.gray-300
@@ -527,30 +559,47 @@ data:
         theme-light: "#f9f2ee"
         theme-dark: "#201f1f"
     $color.bg.neutral-inverted:
+      description: 일반적인 콘텐츠에 사용되는 기본 색상입니다. (inverted)
       values:
         theme-light: $color.palette.gray-900
         theme-dark: $color.palette.gray-1000
     $color.bg.neutral-inverted-pressed:
+      description: 일반적인 콘텐츠에 사용되는 기본 색상입니다. (inverted-pressed)
       values:
         theme-light: $color.palette.gray-800
         theme-dark: $color.palette.gray-800
     $color.bg.neutral-solid:
+      description: 일반적인 콘텐츠에 사용되는 기본 색상입니다. (solid)
       values:
         theme-light: $color.palette.gray-1000
         theme-dark: $color.palette.gray-300
     $color.bg.neutral-solid-muted:
+      description: 일반적인 콘텐츠에 사용되는 기본 색상입니다. (solid-muted)
       values:
         theme-light: $color.palette.gray-800
         theme-dark: $color.palette.gray-400
     $color.bg.neutral-solid-muted-pressed:
+      description: 일반적인 콘텐츠에 사용되는 기본 색상입니다. (solid-muted-pressed)
       values:
         theme-light: $color.palette.gray-900
         theme-dark: $color.palette.gray-500
     $color.bg.neutral-weak:
+      description: 일반적인 콘텐츠에 사용되는 기본 색상입니다. (weak)
       values:
         theme-light: $color.palette.gray-200
         theme-dark: $color.palette.gray-300
+    $color.bg.neutral-weak-alpha:
+      description: 일반적인 콘텐츠에 사용되는 기본 색상입니다. (weak-alpha) `$color.layer.basement` 위에서 컴포넌트의 가시성을 보장하기 위해 사용됩니다.
+      values:
+        theme-light: $color.palette.static-black-alpha-200
+        theme-dark: $color.palette.static-white-alpha-200
+    $color.bg.neutral-weak-alpha-pressed:
+      description: 일반적인 콘텐츠에 사용되는 기본 색상입니다. (weak-alpha-pressed) `$color.layer.basement` 위에서 컴포넌트의 가시성을 보장하기 위해 사용됩니다.
+      values:
+        theme-light: $color.palette.static-black-alpha-300
+        theme-dark: $color.palette.static-white-alpha-300
     $color.bg.neutral-weak-pressed:
+      description: 일반적인 콘텐츠에 사용되는 기본 색상입니다. (weak-pressed)
       values:
         theme-light: $color.palette.gray-300
         theme-dark: $color.palette.gray-400
@@ -563,18 +612,22 @@ data:
         theme-light: $color.palette.static-black-alpha-500
         theme-dark: $color.palette.static-black-alpha-500
     $color.bg.positive-solid:
+      description: 성공적인 작업, 확인, 또는 긍정적인 상태를 나타내는 데 사용됩니다. (solid)
       values:
         theme-light: $color.palette.green-700
         theme-dark: $color.palette.green-500
     $color.bg.positive-solid-pressed:
+      description: 성공적인 작업, 확인, 또는 긍정적인 상태를 나타내는 데 사용됩니다. (solid-pressed)
       values:
         theme-light: $color.palette.green-800
         theme-dark: $color.palette.green-600
     $color.bg.positive-weak:
+      description: 성공적인 작업, 확인, 또는 긍정적인 상태를 나타내는 데 사용됩니다. (weak)
       values:
         theme-light: $color.palette.green-100
         theme-dark: $color.palette.green-100
     $color.bg.positive-weak-pressed:
+      description: 성공적인 작업, 확인, 또는 긍정적인 상태를 나타내는 데 사용됩니다. (weak-pressed)
       values:
         theme-light: $color.palette.green-200
         theme-dark: $color.palette.green-200
@@ -587,78 +640,97 @@ data:
         theme-light: $color.palette.static-black-alpha-100
         theme-dark: $color.palette.static-white-alpha-50
     $color.bg.warning-solid:
+      description: 사용자의 주의가 필요한 경고 메시지나 안내 사항을 전달하는 데 사용됩니다. (solid)
       values:
         theme-light: $color.palette.yellow-300
         theme-dark: $color.palette.yellow-800
     $color.bg.warning-solid-pressed:
+      description: 사용자의 주의가 필요한 경고 메시지나 안내 사항을 전달하는 데 사용됩니다. (solid-pressed)
       values:
         theme-light: $color.palette.yellow-400
         theme-dark: $color.palette.yellow-900
     $color.bg.warning-weak:
+      description: 사용자의 주의가 필요한 경고 메시지나 안내 사항을 전달하는 데 사용됩니다. (weak)
       values:
         theme-light: $color.palette.yellow-100
         theme-dark: $color.palette.yellow-100
     $color.bg.warning-weak-pressed:
+      description: 사용자의 주의가 필요한 경고 메시지나 안내 사항을 전달하는 데 사용됩니다. (weak-pressed)
       values:
         theme-light: $color.palette.yellow-200
         theme-dark: $color.palette.yellow-200
     $color.stroke.brand-solid:
+      description: 브랜드와 관련된 요소들이 즉각적으로 인식될 수 있도록 돕습니다. 화면에서 가장 중요한 액션을 강조하는데 사용할 수 있습니다. (solid)
       values:
         theme-light: $color.palette.carrot-700
         theme-dark: $color.palette.carrot-700
     $color.stroke.brand-weak:
+      description: 브랜드와 관련된 요소들이 즉각적으로 인식될 수 있도록 돕습니다. 화면에서 가장 중요한 액션을 강조하는데 사용할 수 있습니다. (weak)
       values:
         theme-light: $color.palette.carrot-300
         theme-dark: $color.palette.carrot-300
     $color.stroke.critical-solid:
+      description: 오류, 경고 또는 중요한 문제를 나타내는 데 사용됩니다. (solid)
       values:
         theme-light: $color.palette.red-700
         theme-dark: $color.palette.red-700
     $color.stroke.critical-weak:
+      description: 오류, 경고 또는 중요한 문제를 나타내는 데 사용됩니다. (weak)
       values:
         theme-light: $color.palette.red-300
         theme-dark: $color.palette.red-300
     $color.stroke.informative-solid:
+      description: 사용자에게 유용한 정보를 제공하거나 상태를 설명할 때 사용됩니다. (solid)
       values:
         theme-light: $color.palette.blue-700
         theme-dark: $color.palette.blue-700
     $color.stroke.informative-weak:
+      description: 사용자에게 유용한 정보를 제공하거나 상태를 설명할 때 사용됩니다. (weak)
       values:
         theme-light: $color.palette.blue-300
         theme-dark: $color.palette.blue-300
     $color.stroke.neutral-contrast:
+      description: 일반적인 콘텐츠에 사용되는 기본 색상입니다. (contrast)
       values:
         theme-light: $color.palette.gray-1000
         theme-dark: $color.palette.gray-1000
     $color.stroke.neutral-muted:
+      description: 일반적인 콘텐츠에 사용되는 기본 색상입니다. (muted)
       values:
         theme-light: $color.palette.static-black-alpha-300
         theme-dark: $color.palette.static-white-alpha-100
     $color.stroke.neutral-solid:
+      description: 일반적인 콘텐츠에 사용되는 기본 색상입니다. (solid)
       values:
         theme-light: $color.palette.gray-800
         theme-dark: $color.palette.gray-800
     $color.stroke.neutral-subtle:
+      description: 일반적인 콘텐츠에 사용되는 기본 색상입니다. (subtle)
       values:
         theme-light: $color.palette.static-black-alpha-200
         theme-dark: $color.palette.static-white-alpha-50
     $color.stroke.neutral-weak:
+      description: 일반적인 콘텐츠에 사용되는 기본 색상입니다. (weak)
       values:
         theme-light: $color.palette.gray-400
         theme-dark: $color.palette.gray-400
     $color.stroke.positive-solid:
+      description: 성공적인 작업, 확인, 또는 긍정적인 상태를 나타내는 데 사용됩니다. (solid)
       values:
         theme-light: $color.palette.green-700
         theme-dark: $color.palette.green-700
     $color.stroke.positive-weak:
+      description: 성공적인 작업, 확인, 또는 긍정적인 상태를 나타내는 데 사용됩니다. (weak)
       values:
         theme-light: $color.palette.green-300
         theme-dark: $color.palette.green-300
     $color.stroke.warning-solid:
+      description: 사용자의 주의가 필요한 경고 메시지나 안내 사항을 전달하는 데 사용됩니다. (solid)
       values:
         theme-light: $color.palette.yellow-700
         theme-dark: $color.palette.yellow-700
     $color.stroke.warning-weak:
+      description: 사용자의 주의가 필요한 경고 메시지나 안내 사항을 전달하는 데 사용됩니다. (weak)
       values:
         theme-light: $color.palette.yellow-300
         theme-dark: $color.palette.yellow-300

package/components/action-button.yaml

@@ -48,12 +48,14 @@ data:
           size:
             type: dimension
       prefixIcon:
+        description: 주로 액션의 의미를 보조합니다.
         properties:
           color:
             type: color
           size:
             type: dimension
       suffixIcon:
+        description: Chevron처럼 동작을 보조하는 역할입니다.
         properties:
           color:
             type: color
@@ -69,6 +71,39 @@ data:
             type: dimension
           thickness:
             type: dimension
+    variants:
+      variant:
+        values:
+          brandSolid:
+            description: 브랜드의 핵심 가치를 전달하며, 사용자 간 연결이 일어나는 서비스의 주요 기능에 사용합니다. 한 화면에 하나만 사용하는 것을 권장합니다.
+          neutralSolid:
+            description: 대부분의 화면에서 CTA로 사용합니다. 한 화면에 하나만 사용하는 것을 권장합니다.
+          neutralWeak:
+            description: CTA를 제외한 대부분의 액션에 사용됩니다.
+          criticalSolid:
+            description: 삭제나 초기화처럼 되돌릴 수 없는 중요한 작업에 사용합니다.
+          neutralOutline:
+            description: Solid 타입과 함께 사용할 수 없으며, Brand Outline과 조합하여 사용하는 것을 권장합니다.
+          brandOutline:
+            description: Solid 타입과 함께 사용할 수 없으며, Neutral Outline과 조합하여 사용하는 것을 권장합니다.
+          ghost:
+            description: 배경 없이 텍스트와 아이콘만 표시됩니다.
+      size:
+        values:
+          xsmall:
+            description: 작은 공간에서 효율적으로 사용할 수 있는 Pill 형태로 제공됩니다.
+          small:
+            description: 화면 중앙에서 범용적으로 사용됩니다.
+          medium:
+            description: 화면 중앙에서 범용적으로 사용됩니다.
+          large:
+            description: 주로 CTA 역할로 사용됩니다.
+      layout:
+        values:
+          withText:
+            description: 텍스트와 함께 아이콘을 표시할 수 있습니다.
+          iconOnly:
+            description: 아이콘만으로 의미를 전달하기 때문에 접근성이 떨어집니다. 꼭 필요한 경우에만 사용하는 것을 권장합니다.
   definitions:
     base:
       enabled:

package/components/avatar.yaml

@@ -17,12 +17,14 @@ data:
           strokeWidth:
             type: dimension
       badgeMask:
+        description: size=20에서는 지원되지 않습니다.
         properties:
           offset:
             type: dimension
           size:
             type: dimension
       badge:
+        description: size=20에서는 지원되지 않습니다.
         properties:
           offset:
             type: dimension
@@ -39,7 +41,6 @@ data:
         root:
           size: 20px
           strokeWidth: 1px
-        # we don't use badge for size 20
     size=24:
       enabled:
         root:

package/components/badge.yaml

@@ -10,6 +10,7 @@ data:
         properties:
           maxWidth:
             type: dimension
+            description: 10글자 이상의 텍스트를 말줄임 처리하기 위해 설정된 최대 너비입니다.
           minHeight:
             type: dimension
           paddingX:
@@ -34,6 +35,27 @@ data:
             type: number
           color:
             type: color
+    variants:
+      variant:
+        values:
+          solid:
+            description: 배경이 복잡하거나 이미지 위에 Badge가 겹치는 경우 사용합니다.
+          outline:
+            description: 중간 정도의 주목도가 필요한 본문 또는 상세 화면에서 사용합니다.
+          weak:
+            description: 반복적인 구조를 가진 환경에서 사용합니다. 배경색이 있는 경우에는 권장하지 않습니다.
+      tone:
+        values:
+          neutral:
+            description: 상태가 특별히 없거나, 상태값이 명확하지 않은 초기 상태
+          informative:
+            description: 베타 기능 안내, 사용자 권한 제한, 정보 기반 메시지
+          positive:
+            description: 완료, 적용됨, 승인됨, 발행됨, 저장 성공, 검토 통과
+          warning:
+            description: 만료 임박, 제출 누락, 필수 정보 부족 등 잠재적 문제 상태
+          critical:
+            description: 검수 거절, 제재 상태, 편집 불가, 유효성 검증 실패
   definitions:
     size=large:
       enabled:

package/components/callout.yaml

@@ -23,6 +23,7 @@ data:
           gradient:
             type: gradient
       prefixIcon:
+        description: 아이콘은 Fill 타입 사용을 권장합니다.
         properties:
           size:
             type: dimension
@@ -49,6 +50,7 @@ data:
           color:
             type: color
       link:
+        description: Container가 모두 클릭 영역인 Actionable Callout에서는 표시를 권장하지 않습니다.
         properties:
           fontSize:
             type: dimension
@@ -66,6 +68,21 @@ data:
             type: dimension
           color:
             type: color
+    variants:
+      tone:
+        values:
+          neutral:
+            description: 일반적인 정보를 전달합니다.
+          informative:
+            description: 유용한 정보를 제공합니다.
+          positive:
+            description: 긍정적인 상태를 나타냅니다.
+          warning:
+            description: 주의가 필요한 상태를 나타냅니다.
+          critical:
+            description: 중요한 문제를 나타냅니다.
+          magic:
+            description: AI 기능을 나타냅니다.
   definitions:
     base:
       enabled:

package/components/checkbox.yaml

@@ -1,5 +1,4 @@
 # yaml-language-server: $schema=./schema.json
-# parts: root, label, control, icon
 kind: ComponentSpec
 metadata:
   id: checkbox

package/components/checkmark.yaml

@@ -1,5 +1,4 @@
 # yaml-language-server: $schema=./schema.json
-# parts: root, icon
 kind: ComponentSpec
 metadata:
   id: checkmark
@@ -33,6 +32,17 @@ data:
             type: duration
           colorTimingFunction:
             type: cubicBezier
+    variants:
+      variant:
+        values:
+          square:
+            description: 필수 선택 항목이고 사용자가 해당 내용을 인지해야 하는 경우 사용합니다.
+          ghost:
+            description: 필수 선택 항목이 아니고, 3개 이하 항목으로 구성되는 경우 사용하는 것을 권장합니다.
+      tone:
+        values:
+          brand:
+            description: "[deprecated] 주요 버튼 등의 핵심 액션과 시각적으로 충돌하기에 더 이상 사용하지 않습니다."
   definitions:
     base:
       enabled:

package/components/chip-tab.yaml

@@ -59,12 +59,12 @@ data:
     variant=neutralSolid:
       enabled:
         root:
-          color: $color.bg.neutral-weak
+          color: $color.bg.neutral-weak-alpha
         label:
           color: $color.fg.neutral
       enabled,pressed:
         root:
-          color: $color.bg.transparent-pressed
+          color: $color.bg.neutral-weak-alpha-pressed
       selected:
         root:
           color: $color.bg.neutral-inverted

package/components/chip.yaml

@@ -42,6 +42,7 @@ data:
           paddingX:
             type: dimension
       prefixIcon:
+        description: Icon, Avatar, Image를 넣을 수 있습니다. 들어오는 요소에 따라 좌측 여백이 달라집니다.
         properties:
           color:
             type: color
@@ -67,6 +68,15 @@ data:
             type: color
           size:
             type: dimension
+    variants:
+      variant:
+        values:
+          solid:
+            description: 기본 스타일입니다.
+          outlineStrong:
+            description: 명확한 구분이 필요한 경우 사용합니다.
+          outlineWeak:
+            description: Selection 사용 시 주목도가 낮은 스타일로 권장됩니다.
   definitions:
     base:
       enabled:
@@ -89,7 +99,7 @@ data:
     variant=solid:
       enabled:
         root:
-          color: $color.bg.neutral-weak
+          color: $color.bg.neutral-weak-alpha
         label:
           color: $color.fg.neutral
         prefixIcon:
@@ -100,7 +110,7 @@ data:
           color: $color.fg.neutral
       pressed:
         root:
-          color: $color.bg.neutral-weak-pressed
+          color: $color.bg.neutral-weak-alpha-pressed
       disabled:
         root:
           opacity: 0.5
@@ -241,6 +251,8 @@ data:
         icon:
           size: $dimension.x4
 
+    layout=withText: {}
+
     size=small,layout=iconOnly:
       enabled:
         root:

package/components/contextual-floating-button.yaml

@@ -60,6 +60,19 @@ data:
             type: color
           size:
             type: dimension
+    variants:
+      variant:
+        values:
+          solid:
+            description: 배경과 대비되는 강조된 보조 액션으로 중요도 높은 행동 유도 시 적합합니다.
+          layer:
+            description: 시각적 부담 없이 부드럽게 액션을 유도합니다.
+      layout:
+        values:
+          withText:
+            description: 라벨과 아이콘을 함께 표시합니다.
+          iconOnly:
+            description: 아이콘만 표시합니다. 접근성을 위해 aria-label을 제공해야 합니다.
   definitions:
     base:
       enabled:

package/components/extended-fab.yaml

@@ -39,6 +39,13 @@ data:
             type: color
           size:
             type: dimension
+    variants:
+      variant:
+        values:
+          neutralSolid:
+            description: 기본 FAB 스타일입니다.
+          layerFloating:
+            description: 플로팅 레이어 위에 사용하는 스타일입니다.
   definitions:
     base:
       enabled:

package/components/field.yaml

@@ -17,6 +17,7 @@ data:
           gap:
             type: dimension
       indicatorIcon:
+        description: 필수 입력 필드임을 나타내는 아이콘입니다. indicatorText 및 Field Label과의 조화를 위해 폰트 스케일링에 반응합니다.
         properties:
           color:
             type: color
@@ -34,6 +35,7 @@ data:
             type: dimension
           lineHeight:
             type: dimension
+            description: Field Label과의 조화를 위해 Field Label의 lineHeight와 동일한 값을 갖습니다.
           fontWeight:
             type: number
           paddingLeft:

package/components/floating-action-button.yaml

@@ -52,6 +52,13 @@ data:
             type: dimension
           fontWeight:
             type: number
+    variants:
+      extended:
+        values:
+          "true":
+            description: 라벨이 포함된 확장 형태로, 버튼의 역할을 명확히 전달합니다.
+          "false":
+            description: 아이콘만 표시되는 기본 형태입니다.
   definitions:
     base:
       enabled:

package/components/menu-sheet-item.yaml

@@ -48,6 +48,19 @@ data:
             type: dimension
           fontWeight:
             type: number
+    variants:
+      tone:
+        values:
+          neutral:
+            description: 일반적인 작업을 수행하는 기본 아이템입니다.
+          critical:
+            description: 데이터 삭제와 같이 되돌릴 수 없는 작업을 수행하는 아이템입니다.
+      labelAlign:
+        values:
+          left:
+            description: 라벨을 왼쪽 정렬합니다.
+          center:
+            description: 라벨을 중앙 정렬합니다.
   definitions:
     base:
       enabled:

package/components/notification-badge.yaml

@@ -36,6 +36,13 @@ data:
             type: dimension
           fontWeight:
             type: number
+    variants:
+      size:
+        values:
+          large:
+            description: 라벨을 포함해 구체적인 알림 수나 상태 정보를 제공합니다.
+          small:
+            description: 간결한 도트 형태로, 텍스트 없이 상태 변화만 표시합니다.
   definitions:
     base:
       enabled:

package/components/page-banner.yaml

@@ -19,6 +19,7 @@ data:
           gradient:
             type: gradient
       prefixIcon:
+        description: 아이콘은 Fill 타입 사용을 권장합니다.
         properties:
           size:
             type: dimension
@@ -74,6 +75,17 @@ data:
             type: dimension
           color:
             type: color
+    variants:
+      variant:
+        values:
+          weak:
+            description: 배경색이 연한 스타일입니다.
+          solid:
+            description: 배경색이 진한 스타일입니다.
+      tone:
+        values:
+          magic:
+            description: AI 기능을 나타냅니다. variant=solid와 조합하여 사용하지 않습니다.
   definitions:
     base:
       enabled:

package/components/progress-circle.yaml

@@ -32,6 +32,27 @@ data:
             type: cubicBezier
           rotateTimingFunction:
             type: cubicBezier
+    variants:
+      size:
+        values:
+          "24":
+            description: 특정 요소 안에서 사용하는 경우 사용합니다.
+          "40":
+            description: 주로 전체 페이지 로딩에 사용합니다.
+      tone:
+        values:
+          neutral:
+            description: 가장 보편적으로 사용되며 스타일보다는 로딩 상태의 인식이 더 중요한 경우 사용합니다.
+          brand:
+            description: 사용자 경험의 초기 단계에서 브랜드 컬러를 통해 주요 전환점을 강조할 때 사용합니다.
+          staticWhite:
+            description: 화면 전체를 어둡게 덮는 오버레이(Overlay) 위에 로딩 상태를 표시할 때 사용합니다.
+      indeterminate:
+        values:
+          "true":
+            description: 대기 시간이 얼마나 남은지 모르는 상황일 때 사용합니다. 계속해서 회전하는 동작을 합니다.
+          "false":
+            description: 대기 시간이 얼마나 남은지 아는 상황일 때 사용합니다. 진행 상황에 맞춰서 원을 채웁니다.
   definitions:
     size=40:
       enabled:

package/components/radio.yaml

@@ -1,5 +1,4 @@
 # yaml-language-server: $schema=./schema.json
-# parts: root, label
 kind: ComponentSpec
 metadata:
   id: radio

package/components/radiomark.yaml

@@ -1,5 +1,4 @@
 # yaml-language-server: $schema=./schema.json
-# parts: root, icon
 kind: ComponentSpec
 metadata:
   id: radiomark
@@ -31,6 +30,11 @@ data:
             type: color
           cornerRadius:
             type: dimension
+    variants:
+      tone:
+        values:
+          brand:
+            description: "[deprecated] 주요 버튼 등의 핵심 액션과 시각적으로 충돌하기에 더 이상 사용하지 않습니다."
   definitions:
     base:
       enabled:

package/components/scroll-fog.yaml

@@ -1,5 +1,4 @@
 # yaml-language-server: $schema=./schema.json
-# parts: root
 kind: ComponentSpec
 metadata:
   id: scroll-fog

package/components/segmented-control-item.yaml

@@ -1,5 +1,4 @@
 # yaml-language-server: $schema=./schema.json
-# parts: root, segment, indicator
 kind: ComponentSpec
 metadata:
   id: segmented-control-item

package/components/segmented-control.yaml

@@ -1,5 +1,4 @@
 # yaml-language-server: $schema=./schema.json
-# parts: root, segment, indicator
 kind: ComponentSpec
 metadata:
   id: segmented-control
@@ -35,7 +34,7 @@ data:
         root:
           padding: $dimension.x1
           cornerRadius: $radius.full
-          color: $color.bg.neutral-weak
+          color: $color.bg.neutral-weak-alpha
         indicator:
           color: $color.palette.gray-00
           cornerRadius: $radius.full

package/components/skeleton.yaml

@@ -20,6 +20,23 @@ data:
             type: cubicBezier
           gradient:
             type: gradient
+    variants:
+      tone:
+        values:
+          neutral:
+            description: 데이터를 불러오는 일반적인 로딩 경험에 사용합니다.
+          magic:
+            description: AI 기능이 활성화되었을 때 사용합니다.
+      radius:
+        values:
+          "0":
+            description: 기본값입니다.
+          "8":
+            description: 텍스트 콘텐츠에 사용합니다.
+          "16":
+            description: 카드 및 썸네일에 사용합니다.
+          full:
+            description: Avatar(원형) 콘텐츠에 사용합니다.
   definitions:
     base:
       enabled:

package/components/switch-mark.yaml

@@ -1,5 +1,4 @@
 # yaml-language-server: $schema=./schema.json
-# parts: root, thumb
 kind: ComponentSpec
 metadata:
   id: switch-mark
@@ -59,6 +58,11 @@ data:
             type: duration
           translateTimingFunction:
             type: cubicBezier
+    variants:
+      tone:
+        values:
+          brand:
+            description: "[deprecated] 주요 버튼 등의 핵심 액션과 시각적으로 충돌하기에 더 이상 사용하지 않습니다."
   definitions:
     base:
       enabled:

package/components/switch.yaml

@@ -1,5 +1,4 @@
 # yaml-language-server: $schema=./schema.json
-# parts: root, label
 kind: ComponentSpec
 metadata:
   id: switch

package/components/text-input.yaml

@@ -86,6 +86,13 @@ data:
             type: color
           size:
             type: dimension
+    variants:
+      variant:
+        values:
+          outline:
+            description: 기본 스타일입니다.
+          underline:
+            description: 화면에 하나의 Input만 있는 경우 사용을 권장합니다.
   definitions:
     base:
       enabled:

package/components/toggle-button.yaml

@@ -58,6 +58,13 @@ data:
             type: dimension
           thickness:
             type: dimension
+    variants:
+      variant:
+        values:
+          brandSolid:
+            description: 브랜드 컬러로 강조된 스타일입니다.
+          neutralWeak:
+            description: 기본적인 토글 스타일입니다.
   definitions:
     base:
       enabled:

package/components/top-navigation.yaml

@@ -1,5 +1,4 @@
 # yaml-language-server: $schema=./schema.json
-# slot=
 kind: ComponentSpec
 metadata:
   id: top-navigation

package/components/typography.yaml

@@ -14,6 +14,63 @@ data:
             type: dimension
           fontWeight:
             type: number
+    variants:
+      textStyle:
+        values:
+          screenTitle:
+            description: 화면에 크게 표시되는 주요 제목이나 타이틀에 사용합니다.
+          articleBody:
+            description: 게시물이나 콘텐츠 중심 섹션의 본문 텍스트에 사용합니다.
+          articleNote:
+            description: 주석, 참고 사항 및 상세 리스트 등 부가 정보에 사용하며, 일반 본문 텍스트에는 사용하지 않습니다.
+          t1StaticRegular:
+            description: 폰트 스케일링에 반응하지 않도록 static text size와 static line height 토큰을 사용합니다.
+          t1StaticMedium:
+            description: 폰트 스케일링에 반응하지 않도록 static text size와 static line height 토큰을 사용합니다.
+          t1StaticBold:
+            description: 폰트 스케일링에 반응하지 않도록 static text size와 static line height 토큰을 사용합니다.
+          t2StaticRegular:
+            description: 폰트 스케일링에 반응하지 않도록 static text size와 static line height 토큰을 사용합니다.
+          t2StaticMedium:
+            description: 폰트 스케일링에 반응하지 않도록 static text size와 static line height 토큰을 사용합니다.
+          t2StaticBold:
+            description: 폰트 스케일링에 반응하지 않도록 static text size와 static line height 토큰을 사용합니다.
+          t3StaticRegular:
+            description: 폰트 스케일링에 반응하지 않도록 static text size와 static line height 토큰을 사용합니다.
+          t3StaticMedium:
+            description: 폰트 스케일링에 반응하지 않도록 static text size와 static line height 토큰을 사용합니다.
+          t3StaticBold:
+            description: 폰트 스케일링에 반응하지 않도록 static text size와 static line height 토큰을 사용합니다.
+          t4StaticRegular:
+            description: 폰트 스케일링에 반응하지 않도록 static text size와 static line height 토큰을 사용합니다.
+          t4StaticMedium:
+            description: 폰트 스케일링에 반응하지 않도록 static text size와 static line height 토큰을 사용합니다.
+          t4StaticBold:
+            description: 폰트 스케일링에 반응하지 않도록 static text size와 static line height 토큰을 사용합니다.
+          t5StaticRegular:
+            description: 폰트 스케일링에 반응하지 않도록 static text size와 static line height 토큰을 사용합니다.
+          t5StaticMedium:
+            description: 폰트 스케일링에 반응하지 않도록 static text size와 static line height 토큰을 사용합니다.
+          t5StaticBold:
+            description: 폰트 스케일링에 반응하지 않도록 static text size와 static line height 토큰을 사용합니다.
+          t6StaticRegular:
+            description: 폰트 스케일링에 반응하지 않도록 static text size와 static line height 토큰을 사용합니다.
+          t6StaticMedium:
+            description: 폰트 스케일링에 반응하지 않도록 static text size와 static line height 토큰을 사용합니다.
+          t6StaticBold:
+            description: 폰트 스케일링에 반응하지 않도록 static text size와 static line height 토큰을 사용합니다.
+          t7StaticRegular:
+            description: 폰트 스케일링에 반응하지 않도록 static text size와 static line height 토큰을 사용합니다.
+          t7StaticMedium:
+            description: 폰트 스케일링에 반응하지 않도록 static text size와 static line height 토큰을 사용합니다.
+          t7StaticBold:
+            description: 폰트 스케일링에 반응하지 않도록 static text size와 static line height 토큰을 사용합니다.
+          t8StaticBold:
+            description: 폰트 스케일링에 반응하지 않도록 static text size와 static line height 토큰을 사용합니다.
+          t9StaticBold:
+            description: 폰트 스케일링에 반응하지 않도록 static text size와 static line height 토큰을 사용합니다.
+          t10StaticBold:
+            description: 폰트 스케일링에 반응하지 않도록 static text size와 static line height 토큰을 사용합니다.
   definitions:
     textStyle=screenTitle:
       enabled:
@@ -27,6 +84,12 @@ data:
           fontSize: $font-size.t5
           lineHeight: $line-height.t6
           fontWeight: $font-weight.regular
+    textStyle=articleNote:
+      enabled:
+        root:
+          fontSize: $font-size.t4
+          lineHeight: $line-height.t5
+          fontWeight: $font-weight.regular
     textStyle=t1Regular:
       enabled:
         root:

package/font-size.yaml

@@ -36,32 +36,42 @@ data:
       values:
         default: 1.625rem # 26px ÷ 16
     $font-size.t1-static:
+      description: 폰트 스케일링에 반응하지 않도록 px로 정의되었습니다.
       values:
         default: 11px
     $font-size.t2-static:
+      description: 폰트 스케일링에 반응하지 않도록 px로 정의되었습니다.
       values:
         default: 12px
     $font-size.t3-static:
+      description: 폰트 스케일링에 반응하지 않도록 px로 정의되었습니다.
       values:
         default: 13px
     $font-size.t4-static:
+      description: 폰트 스케일링에 반응하지 않도록 px로 정의되었습니다.
       values:
         default: 14px
     $font-size.t5-static:
+      description: 폰트 스케일링에 반응하지 않도록 px로 정의되었습니다.
       values:
         default: 16px
     $font-size.t6-static:
+      description: 폰트 스케일링에 반응하지 않도록 px로 정의되었습니다.
       values:
         default: 18px
     $font-size.t7-static:
+      description: 폰트 스케일링에 반응하지 않도록 px로 정의되었습니다.
       values:
         default: 20px
     $font-size.t8-static:
+      description: 폰트 스케일링에 반응하지 않도록 px로 정의되었습니다.
       values:
         default: 22px
     $font-size.t9-static:
+      description: 폰트 스케일링에 반응하지 않도록 px로 정의되었습니다.
       values:
         default: 24px
     $font-size.t10-static:
+      description: 폰트 스케일링에 반응하지 않도록 px로 정의되었습니다.
       values:
         default: 26px

package/gradient.yaml

@@ -2,12 +2,14 @@ kind: Tokens
 metadata:
   id: gradient
   name: Gradient
-  lastUpdated: 26-01-06
+  lastUpdated: 26-01-14
 data:
   collection: color
   tokens:
     $gradient.fade-layer-floating:
-      description: 스크롤이 가능하도록 그라디언트로 특정 영역을 덮는 요소로 사용해요.
+      description: |
+        스크롤이 가능하도록 그라디언트로 특정 영역을 덮는 요소로 사용해요.
+        @deprecated `@seed-design/css@1.3.0`에서 제거될 예정입니다.
       values:
         theme-light:
           type: gradient
@@ -24,7 +26,9 @@ data:
             - color: "#000000"
               position: 1
     $gradient.fade-layer-default:
-      description: 스크롤이 가능하도록 그라디언트로 특정 영역을 덮는 요소로 사용해요.
+      description: |
+        스크롤이 가능하도록 그라디언트로 특정 영역을 덮는 요소로 사용해요.
+        @deprecated `@seed-design/css@1.3.0`에서 제거될 예정입니다.
       values:
         theme-light:
           type: gradient
@@ -124,9 +128,9 @@ data:
           value:
             - color: "#fff9f500"
               position: 0
-            - color: "#fff9f58a"
+            - color: "#fff9f5cc"
               position: 0.46
-            - color: "#fff9f58a"
+            - color: "#fff9f5cc"
               position: 0.54
             - color: "#fff9f500"
               position: 1
@@ -149,9 +153,9 @@ data:
           value:
             - color: "#ffffff00"
               position: 0
-            - color: "#ffffff66"
+            - color: "#ffffffab"
               position: 0.46
-            - color: "#ffffff66"
+            - color: "#ffffffab"
               position: 0.54
             - color: "#ffffff00"
               position: 1

package/line-height.yaml

@@ -36,32 +36,42 @@ data:
       values:
         default: 2.1875rem # 35px ÷ 16
     $line-height.t1-static:
+      description: 폰트 스케일링에 반응하지 않도록 px로 정의되었습니다.
       values:
         default: 15px
     $line-height.t2-static:
+      description: 폰트 스케일링에 반응하지 않도록 px로 정의되었습니다.
       values:
         default: 16px
     $line-height.t3-static:
+      description: 폰트 스케일링에 반응하지 않도록 px로 정의되었습니다.
       values:
         default: 18px
     $line-height.t4-static:
+      description: 폰트 스케일링에 반응하지 않도록 px로 정의되었습니다.
       values:
         default: 19px
     $line-height.t5-static:
+      description: 폰트 스케일링에 반응하지 않도록 px로 정의되었습니다.
       values:
         default: 22px
     $line-height.t6-static:
+      description: 폰트 스케일링에 반응하지 않도록 px로 정의되었습니다.
       values:
         default: 24px
     $line-height.t7-static:
+      description: 폰트 스케일링에 반응하지 않도록 px로 정의되었습니다.
       values:
         default: 27px
     $line-height.t8-static:
+      description: 폰트 스케일링에 반응하지 않도록 px로 정의되었습니다.
       values:
         default: 30px
     $line-height.t9-static:
+      description: 폰트 스케일링에 반응하지 않도록 px로 정의되었습니다.
       values:
         default: 32px
     $line-height.t10-static:
+      description: 폰트 스케일링에 반응하지 않도록 px로 정의되었습니다.
       values:
         default: 35px

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seed-design/rootage-artifacts",
-  "version": "1.1.7",
+  "version": "1.1.8",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/daangn/seed-design.git",