@seed-design/rootage-artifacts 1.1.7 → 1.2.0

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/help-bubble.yaml

@@ -16,6 +16,8 @@ data:
             type: dimension
           paddingY:
             type: dimension
+          gap:
+            type: dimension
           enterScale:
             type: number
           enterOpacity:
@@ -48,6 +50,10 @@ data:
           padding:
             type: dimension
             description: arrow와 root의 경계 사이의 최소 간격을 정의합니다.
+      body:
+        properties:
+          gap:
+            type: dimension
       title:
         properties:
           color:
@@ -72,14 +78,12 @@ data:
         properties:
           color:
             type: color
-          fromRight:
-            type: dimension
-          fromTop:
-            type: dimension
           size:
             type: dimension
           targetSize:
             type: dimension
+          marginTop:
+            type: dimension
   definitions:
     base:
       enabled:
@@ -88,6 +92,7 @@ data:
           cornerRadius: $radius.r3
           paddingX: $dimension.x3
           paddingY: $dimension.x2_5
+          gap: $dimension.x1
           enterScale: 0.9
           enterOpacity: 0
           enterDuration: $duration.d4
@@ -103,6 +108,8 @@ data:
           cornerRadius: 2px
           gutter: 4px
           padding: 14px
+        body:
+          gap: $dimension.x0_5
         title:
           color: $color.fg.neutral-inverted
           fontSize: $font-size.t3
@@ -115,7 +122,6 @@ data:
           lineHeight: $line-height.t3
         closeButton:
           color: $color.fg.neutral-inverted
-          fromRight: 12px
-          fromTop: 12px
-          size: 14px
-          targetSize: 32px
+          size: $dimension.x3_5
+          targetSize: 38px
+          marginTop: $dimension.x0_5

package/components/image-frame-floater.yaml

@@ -0,0 +1,18 @@
+# yaml-language-server: $schema=./schema.json
+kind: ComponentSpec
+metadata:
+  id: image-frame-floater
+  name: Image Frame Floater
+data:
+  schema:
+    slots:
+      root:
+        properties:
+          offset:
+            type: dimension
+            description: 오버레이가 이미지 프레임 가장자리에서 떨어진 거리입니다.
+  definitions:
+    base:
+      enabled:
+        root:
+          offset: 6px

package/components/image-frame-indicator.yaml

@@ -0,0 +1,42 @@
+# yaml-language-server: $schema=./schema.json
+kind: ComponentSpec
+metadata:
+  id: image-frame-indicator
+  name: Image Frame Indicator
+data:
+  schema:
+    slots:
+      root:
+        properties:
+          color:
+            type: color
+            description: 인디케이터 배경색입니다.
+          cornerRadius:
+            type: dimension
+          paddingX:
+            type: dimension
+          paddingY:
+            type: dimension
+      label:
+        properties:
+          color:
+            type: color
+          fontSize:
+            type: dimension
+          lineHeight:
+            type: dimension
+          fontWeight:
+            type: number
+  definitions:
+    base:
+      enabled:
+        root:
+          color: $color.palette.static-black-alpha-800
+          cornerRadius: $radius.full
+          paddingX: $dimension.x1_5
+          paddingY: $dimension.x0_5
+        label:
+          color: $color.palette.static-white
+          fontSize: $font-size.t1
+          lineHeight: $line-height.t1
+          fontWeight: $font-weight.medium

package/components/image-frame-reaction-button.yaml

@@ -0,0 +1,43 @@
+# yaml-language-server: $schema=./schema.json
+kind: ComponentSpec
+metadata:
+  id: image-frame-reaction-button
+  name: Image Frame Reaction Button
+data:
+  schema:
+    slots:
+      root:
+        description: 하트 아이콘 토글 버튼입니다. 이미지 위에서 좋아요 기능에 사용됩니다.
+        properties:
+          color:
+            type: color
+            description: 버튼 배경색입니다.
+          cornerRadius:
+            type: dimension
+          size:
+            type: dimension
+            description: 보이는 버튼 크기입니다.
+          targetSize:
+            type: dimension
+            description: 터치 영역 크기입니다.
+      icon:
+        description: 하트 아이콘입니다. 기본 상태에서는 IconHeartLine, 선택 상태에서는 IconHeartFill을 사용합니다.
+        properties:
+          color:
+            type: color
+          size:
+            type: dimension
+  definitions:
+    base:
+      enabled:
+        root:
+          color: $color.palette.static-black-alpha-200
+          cornerRadius: $radius.full
+          size: $dimension.x6
+          targetSize: $dimension.x10
+        icon:
+          color: $color.fg.neutral-inverted
+          size: $dimension.x6
+      selected:
+        icon:
+          color: $color.fg.brand

package/components/image-frame.yaml

@@ -0,0 +1,50 @@
+# yaml-language-server: $schema=./schema.json
+kind: ComponentSpec
+metadata:
+  id: image-frame
+  name: Image Frame
+data:
+  schema:
+    slots:
+      root:
+        properties:
+          cornerRadius:
+            type: dimension
+            description: rounded 옵션 사용 시 적용되는 모서리 반경입니다.
+          strokeColor:
+            type: color
+            description: stroke 옵션 사용 시 적용되는 테두리 색상입니다.
+          strokeWidth:
+            type: dimension
+            description: stroke 옵션 사용 시 적용되는 테두리 두께입니다.
+    variants:
+      rounded:
+        values:
+          "true":
+            description: 모서리에 라운드 스타일을 적용합니다.
+          "false":
+            description: 모서리를 직각으로 유지합니다.
+      stroke:
+        values:
+          "true":
+            description: 이미지 테두리에 스트로크를 표시합니다.
+          "false":
+            description: 테두리를 표시하지 않습니다.
+  definitions:
+    rounded=true:
+      enabled:
+        root:
+          cornerRadius: $radius.r2
+    rounded=false:
+      enabled:
+        root:
+          cornerRadius: 0px
+    stroke=true:
+      enabled:
+        root:
+          strokeColor: $color.stroke.neutral-subtle
+          strokeWidth: 1px
+    stroke=false:
+      enabled:
+        root:
+          strokeWidth: 0px

package/components/input-button.yaml

@@ -26,13 +26,10 @@ data:
             type: duration
           colorTimingFunction:
             type: cubicBezier
-          strokeColorDuration:
+          strokeDuration:
             type: duration
-          strokeColorTimingFunction:
-            type: cubicBezier
-          strokeWidthDuration:
-            type: duration
-          strokeWidthTimingFunction:
+            description: 1px stroke 위에 2px stroke가 fade in/out 되는 데에 걸리는 시간입니다. stroke 두께나 색상 자체를 transition하지 않습니다.
+          strokeTimingFunction:
             type: cubicBezier
       value:
         properties:
@@ -107,10 +104,8 @@ data:
           color: $color.bg.transparent
           colorDuration: $duration.color-transition
           colorTimingFunction: $timing-function.easing
-          strokeColorDuration: $duration.color-transition
-          strokeColorTimingFunction: $timing-function.easing
-          strokeWidthDuration: $duration.color-transition
-          strokeWidthTimingFunction: $timing-function.easing
+          strokeDuration: 0.1s
+          strokeTimingFunction: $timing-function.easing
 
         value:
           fontSize: $font-size.t5

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-group.yaml

@@ -0,0 +1,17 @@
+# yaml-language-server: $schema=./schema.json
+kind: ComponentSpec
+metadata:
+  id: radio-group
+  name: Radio Group
+data:
+  schema:
+    slots:
+      root:
+        properties:
+          gapY:
+            type: dimension
+  definitions:
+    base:
+      enabled:
+        root:
+          gapY: $dimension.x1

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/select-box-checkmark.yaml

@@ -0,0 +1,52 @@
+# yaml-language-server: $schema=./schema.json
+kind: ComponentSpec
+metadata:
+  id: select-box-checkmark
+  name: Select Box Checkmark
+data:
+  schema:
+    slots:
+      root:
+        properties:
+          size:
+            type: dimension
+      icon:
+        properties:
+          size:
+            type: dimension
+          color:
+            type: color
+          colorDuration:
+            type: duration
+          colorTimingFunction:
+            type: cubicBezier
+  definitions:
+    base:
+      enabled:
+        root:
+          size: $dimension.x5
+        icon:
+          size: 15px
+          color: $color.fg.placeholder
+          colorDuration: $duration.color-transition
+          colorTimingFunction: $timing-function.easing
+
+      pressed:
+        icon:
+          color: $color.fg.neutral-subtle
+
+      enabled,selected:
+        icon:
+          color: $color.fg.neutral
+
+      enabled,selected,pressed:
+        icon:
+          color: $color.fg.neutral # being obvious
+
+      disabled:
+        icon:
+          color: $color.fg.disabled
+
+      disabled,selected:
+        icon:
+          color: $color.fg.disabled # being obvious

package/components/select-box-group.yaml

@@ -0,0 +1,20 @@
+# yaml-language-server: $schema=./schema.json
+kind: ComponentSpec
+metadata:
+  id: select-box-group
+  name: Select Box Group
+data:
+  schema:
+    slots:
+      root:
+        properties:
+          gapX:
+            type: dimension
+          gapY:
+            type: dimension
+  definitions:
+    base:
+      enabled:
+        root:
+          gapX: $dimension.x3
+          gapY: $dimension.spacing-y.component-default