@seed-design/rootage-artifacts 1.1.6 → 1.1.8

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/bottom-sheet-handle.yaml

@@ -21,7 +21,7 @@ data:
           colorDuration:
             type: duration
           colorTimingFunction:
-            type: timing-function
+            type: cubicBezier
       touchArea:
         properties:
           width:

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
@@ -29,6 +28,21 @@ data:
             type: color
           size:
             type: dimension
+          colorDuration:
+            type: duration
+          colorTimingFunction:
+            type: cubicBezier
+    variants:
+      variant:
+        values:
+          square:
+            description: 필수 선택 항목이고 사용자가 해당 내용을 인지해야 하는 경우 사용합니다.
+          ghost:
+            description: 필수 선택 항목이 아니고, 3개 이하 항목으로 구성되는 경우 사용하는 것을 권장합니다.
+      tone:
+        values:
+          brand:
+            description: "[deprecated] 주요 버튼 등의 핵심 액션과 시각적으로 충돌하기에 더 이상 사용하지 않습니다."
   definitions:
     base:
       enabled:
@@ -80,6 +94,9 @@ data:
       enabled:
         icon:
           color: $color.fg.placeholder
+          colorDuration: $duration.color-transition
+          colorTimingFunction: $timing-function.easing
+
       pressed:
         root:
           color: $color.bg.transparent-pressed
@@ -100,7 +117,7 @@ data:
     variant=ghost,tone=neutral:
       enabled,selected:
         icon:
-          color: $color.fg.neutral-muted
+          color: $color.fg.neutral
       pressed,selected:
         root:
           color: $color.palette.gray-200

package/components/chip-tab.yaml

@@ -22,6 +22,8 @@ data:
             type: dimension
           color:
             type: color
+          stroke:
+            type: color
       label:
         properties:
           fontSize:
@@ -57,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/control-chip.yaml

@@ -88,7 +88,7 @@ data:
           color: $color.bg.layer-default-pressed
       selected:
         root:
-          strokeWidth: 0
+          strokeWidth: 0px
           color: $color.bg.neutral-solid-muted
         label:
           color: $color.palette.static-white

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/list-item.yaml

@@ -22,6 +22,14 @@ data:
             type: dimension
           cornerRadius:
             type: dimension
+          marginDuration:
+            type: duration
+          marginTimingFunction:
+            type: cubicBezier
+          borderRadiusDuration:
+            type: duration
+          borderRadiusTimingFunction:
+            type: cubicBezier
       content:
         properties:
           color:

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/slider-thumb.yaml

@@ -10,7 +10,20 @@ data:
         properties:
           size:
             type: dimension
-          # TODO: fill in
+          cornerRadius:
+            type: dimension
+          color:
+            type: color
+          scaleDuration:
+            type: duration
+          scaleTimingFunction:
+            type: cubicBezier
+          translateDuration:
+            type: duration
+          translateTimingFunction:
+            type: cubicBezier
+          scale:
+            type: number
   definitions:
     base:
       enabled:

package/components/slider-tick.yaml

@@ -10,6 +10,8 @@ data:
         properties:
           width:
             type: dimension
+          color:
+            type: color
   definitions:
     base:
       enabled:

package/components/slider.yaml

@@ -10,7 +10,98 @@ data:
         properties:
           gap:
             type: dimension
-            # TODO: fill in
+      control:
+        properties:
+          height:
+            type: dimension
+      track:
+        properties:
+          height:
+            type: dimension
+          cornerRadius:
+            type: dimension
+          color:
+            type: color
+      range:
+        properties:
+          cornerRadius:
+            type: dimension
+          color:
+            type: color
+          widthDuration:
+            type: duration
+          widthTimingFunction:
+            type: cubicBezier
+      thumb:
+        properties:
+          size:
+            type: dimension
+          cornerRadius:
+            type: dimension
+          color:
+            type: color
+      valueIndicatorRoot:
+        properties:
+          color:
+            type: color
+          cornerRadius:
+            type: dimension
+          paddingX:
+            type: dimension
+          paddingY:
+            type: dimension
+          offsetY:
+            type: dimension
+          enterScale:
+            type: number
+          enterOpacity:
+            type: number
+          enterDuration:
+            type: duration
+          enterTimingFunction:
+            type: cubicBezier
+          exitScale:
+            type: number
+          exitOpacity:
+            type: number
+          exitDuration:
+            type: duration
+          exitTimingFunction:
+            type: cubicBezier
+      valueIndicatorArrow:
+        properties:
+          color:
+            type: color
+          width:
+            type: dimension
+          height:
+            type: dimension
+          cornerRadius:
+            type: dimension
+          gutter:
+            type: dimension
+          padding:
+            type: dimension
+      valueIndicatorLabel:
+        properties:
+          color:
+            type: color
+          fontSize:
+            type: dimension
+          lineHeight:
+            type: dimension
+          fontWeight:
+            type: number
+      marker:
+        properties:
+          color:
+            type: color
+          fontWeight:
+            type: number
+          fontSize:
+            type: dimension
+          lineHeight:
+            type: dimension
   definitions:
     base:
       enabled: