@seed-design/rootage-artifacts 1.2.1 → 1.2.3

package/components/action-button.yaml

@@ -41,21 +41,21 @@ data:
           lineHeight:
             type: dimension
       icon:
-        description: Icon Only 레이아웃에서 사용되는 아이콘 슬롯입니다.
+        description: layout=iconOnly에서 사용되는 아이콘 슬롯입니다.
         properties:
           color:
             type: color
           size:
             type: dimension
       prefixIcon:
-        description: 주로 액션의 의미를 보조합니다.
+        description: 주로 액션의 의미를 보조합니다. suffixIcon과 함께 사용할 수 없습니다.
         properties:
           color:
             type: color
           size:
             type: dimension
       suffixIcon:
-        description: Chevron처럼 동작을 보조하는 역할입니다.
+        description: Chevron처럼 동작을 보조하는 역할입니다. prefixIcon과 함께 사용할 수 없습니다.
         properties:
           color:
             type: color
@@ -83,11 +83,11 @@ data:
           criticalSolid:
             description: 삭제나 초기화처럼 되돌릴 수 없는 중요한 작업에 사용합니다.
           neutralOutline:
-            description: Solid 타입과 함께 사용할 수 없으며, Brand Outline과 조합하여 사용하는 것을 권장합니다.
+            description: variant=brandSolid, neutralSolid, criticalSolid와 함께 사용할 수 없으며, variant=brandOutline과 조합하여 사용하는 것을 권장합니다.
           brandOutline:
-            description: Solid 타입과 함께 사용할 수 없으며, Neutral Outline과 조합하여 사용하는 것을 권장합니다.
+            description: variant=brandSolid, neutralSolid, criticalSolid와 함께 사용할 수 없으며, variant=neutralOutline과 조합하여 사용하는 것을 권장합니다.
           ghost:
-            description: 배경 없이 텍스트와 아이콘만 표시됩니다.
+            description: 배경 없이 텍스트와 아이콘만 표시됩니다. 모두 동일한 색상을 사용하는 조건에서 icon, prefix icon, suffix icon, label에 정의된 color를 변경할 수 있으며, label의 fontWeight를 `$font-weight.regular` 또는 `$font-weight.medium`으로 변경하여 주목도를 조절할 수 있습니다.
       size:
         values:
           xsmall:
@@ -103,7 +103,7 @@ data:
           withText:
             description: 텍스트와 함께 아이콘을 표시할 수 있습니다.
           iconOnly:
-            description: 아이콘만으로 의미를 전달하기 때문에 접근성이 떨어집니다. 꼭 필요한 경우에만 사용하는 것을 권장합니다.
+            description: 아이콘만으로 의미를 전달하기 때문에 접근성이 떨어집니다. 꼭 필요한 경우에만 접근성 레이블과 함께 사용하는 것을 권장합니다.
   definitions:
     base:
       enabled:

package/components/bottom-sheet.yaml

@@ -42,10 +42,6 @@ data:
         properties:
           gap:
             type: dimension
-          paddingLeft:
-            type: dimension
-          paddingRight:
-            type: dimension
           paddingTop:
             type: dimension
           paddingBottom:
@@ -72,6 +68,10 @@ data:
             type: dimension
           fontWeight:
             type: number
+          paddingLeft:
+            type: dimension
+          paddingRight:
+            type: dimension
       description:
         properties:
           color:
@@ -82,6 +82,8 @@ data:
             type: dimension
           fontWeight:
             type: number
+          paddingX:
+            type: dimension
       closeButton:
         properties:
           fromTop:
@@ -128,16 +130,27 @@ data:
           fontSize: $font-size.t5
           lineHeight: $line-height.t5
           fontWeight: $font-weight.regular
+          paddingX: $dimension.spacing-x.global-gutter
         closeButton:
-          fromTop: $dimension.x5
-          fromRight: $dimension.x5
-    headerAlignment=left:
+          fromTop: $dimension.x6
+          fromRight: $dimension.x4
+    headerAlignment=left,closeButton=true:
       enabled:
-        header:
+        title:
+          paddingRight: 56px
           paddingLeft: $dimension.spacing-x.global-gutter
-          paddingRight: 50px
-    headerAlignment=center:
+    headerAlignment=left,closeButton=false:
       enabled:
-        header:
-          paddingLeft: 50px
-          paddingRight: 50px
+        title:
+          paddingLeft: $dimension.spacing-x.global-gutter
+          paddingRight: $dimension.spacing-x.global-gutter
+    headerAlignment=center,closeButton=true:
+      enabled:
+        title:
+          paddingLeft: 56px
+          paddingRight: 56px
+    headerAlignment=center,closeButton=false:
+      enabled:
+        title:
+          paddingLeft: $dimension.spacing-x.global-gutter
+          paddingRight: $dimension.spacing-x.global-gutter

package/components/callout.yaml

@@ -50,7 +50,7 @@ data:
           color:
             type: color
       link:
-        description: Container가 모두 클릭 영역인 Actionable Callout에서는 표시를 권장하지 않습니다.
+        description: root가 클릭 영역인 Actionable Callout에서는 표시를 권장하지 않습니다.
         properties:
           fontSize:
             type: dimension

package/components/chip-tab.yaml

@@ -22,8 +22,10 @@ data:
             type: dimension
           color:
             type: color
-          stroke:
+          strokeColor:
             type: color
+          strokeWidth:
+            type: dimension
       label:
         properties:
           fontSize:
@@ -85,7 +87,8 @@ data:
       enabled:
         root:
           color: $color.bg.transparent
-          stroke: $color.stroke.neutral-muted
+          strokeColor: $color.stroke.neutral-muted
+          strokeWidth: 1px
         label:
           color: $color.fg.neutral
       enabled,pressed:

package/components/contextual-floating-button.yaml

@@ -70,9 +70,9 @@ data:
       layout:
         values:
           withText:
-            description: 라벨과 아이콘을 함께 표시합니다.
+            description: label과 prefixIcon을 함께 표시합니다.
           iconOnly:
-            description: 아이콘만 표시합니다. 접근성을 위해 aria-label을 제공해야 합니다.
+            description: icon만 표시합니다. 아이콘만으로 의미를 전달하기 때문에 접근성 레이블과 함께 사용해야 합니다.
   definitions:
     base:
       enabled:

package/components/image-frame.yaml

@@ -8,37 +8,35 @@ data:
     slots:
       root:
         properties:
-          cornerRadius:
-            type: dimension
-            description: rounded 옵션 사용 시 적용되는 모서리 반경입니다.
           strokeColor:
             type: color
             description: stroke 옵션 사용 시 적용되는 테두리 색상입니다.
           strokeWidth:
             type: dimension
             description: stroke 옵션 사용 시 적용되는 테두리 두께입니다.
+          cornerRadius:
+            type: dimension
+            description: rounded 옵션 사용 시 적용되는 모서리 반경입니다.
     variants:
-      rounded:
-        values:
-          "true":
-            description: 모서리에 라운드 스타일을 적용합니다.
-          "false":
-            description: 모서리를 직각으로 유지합니다.
       stroke:
         values:
           "true":
             description: 이미지 테두리에 스트로크를 표시합니다.
           "false":
             description: 테두리를 표시하지 않습니다.
+      rounded:
+        values:
+          "true":
+            description: |
+              모서리를 둥글게 처리합니다.
+              @deprecated `rounded` 옵션은 @seed-design/react@1.3.0에서 제거될 예정입니다. `borderRadius="r2"`를 사용하세요.
+              Reason: 모서리 스타일은 `borderRadius` prop으로 통일합니다.
+          "false":
+            description: |
+              모서리를 둥글게 처리하지 않습니다.
+              @deprecated `rounded` 옵션은 @seed-design/react@1.3.0에서 제거될 예정입니다. `borderRadius="r2"`를 사용하세요.
+              Reason: 모서리 스타일은 `borderRadius` prop으로 통일합니다.
   definitions:
-    rounded=true:
-      enabled:
-        root:
-          cornerRadius: $radius.r2
-    rounded=false:
-      enabled:
-        root:
-          cornerRadius: 0px
     stroke=true:
       enabled:
         root:
@@ -48,3 +46,11 @@ data:
       enabled:
         root:
           strokeWidth: 0px
+    rounded=true:
+      enabled:
+        root:
+          cornerRadius: $radius.r2
+    rounded=false:
+      enabled:
+        root:
+          cornerRadius: 0px

package/components/input-button.yaml

@@ -28,7 +28,7 @@ data:
             type: cubicBezier
           strokeDuration:
             type: duration
-            description: 1px stroke 위에 2px stroke가 fade in/out 되는 데에 걸리는 시간입니다. stroke 두께나 색상 자체를 transition하지 않습니다.
+            description: enabled 상태의 stroke 위에 invalid 상태의 stroke가 fade in/out 되는 데에 걸리는 시간입니다. stroke 두께나 색상 자체를 transition하지 않습니다.
           strokeTimingFunction:
             type: cubicBezier
       value:

package/components/select-box.yaml

@@ -22,7 +22,7 @@ data:
             type: cubicBezier
           strokeDuration:
             type: duration
-            description: 1px stroke 위에 2px stroke가 fade in/out 되는 데에 걸리는 시간입니다. stroke 두께나 색상 자체를 transition하지 않습니다.
+            description: enabled 상태의 stroke 위에 selected 상태의 stroke가 fade in/out 되는 데에 걸리는 시간입니다. stroke 두께나 색상 자체를 transition하지 않습니다.
           strokeTimingFunction:
             type: cubicBezier
       trigger:

package/components/slider.yaml

@@ -41,6 +41,7 @@ data:
           color:
             type: color
       valueIndicatorRoot:
+        description: arrow width + (valueIndicatorRoot paddingX * 2)만큼의 최소 너비를 가집니다.
         properties:
           color:
             type: color
@@ -48,6 +49,7 @@ data:
             type: dimension
           paddingX:
             type: dimension
+            description: value indicator 내부 좌우 여백입니다. arrow와 valueIndicatorRoot 경계 사이의 최소 간격에도 동일한 값이 적용됩니다.
           paddingY:
             type: dimension
           offsetY:
@@ -80,8 +82,7 @@ data:
             type: dimension
           gutter:
             type: dimension
-          padding:
-            type: dimension
+            description: arrow와 thumb 사이의 거리를 정의합니다.
       valueIndicatorLabel:
         properties:
           color:
@@ -125,9 +126,9 @@ data:
           color: $color.bg.neutral-inverted
         valueIndicatorRoot:
           color: $color.bg.neutral-inverted
-          cornerRadius: $radius.r1
-          paddingX: $dimension.x1_5
-          paddingY: $dimension.x0_5
+          cornerRadius: $radius.r1_5
+          paddingX: $dimension.x2
+          paddingY: $dimension.x1
           offsetY: $dimension.x3
           enterScale: 0.9
           enterOpacity: 0
@@ -139,15 +140,14 @@ data:
           exitTimingFunction: $timing-function.easing
         valueIndicatorArrow:
           color: $color.bg.neutral-inverted
-          width: $dimension.x2_5
-          height: 7px
+          width: $dimension.x2
+          height: $dimension.x1_5
           cornerRadius: $radius.r0_5
           gutter: $dimension.x0_5
-          padding: $dimension.x0_5
         valueIndicatorLabel:
           color: $color.fg.neutral-inverted
-          fontSize: $font-size.t1
-          lineHeight: $line-height.t1
+          fontSize: $font-size.t3
+          lineHeight: $line-height.t3
           fontWeight: $font-weight.medium
         marker:
           color: $color.fg.neutral-muted

package/components/text-input.yaml

@@ -28,7 +28,7 @@ data:
             type: color
           strokeDuration:
             type: duration
-            description: 1px stroke 위에 2px stroke가 fade in/out 되는 데에 걸리는 시간입니다. stroke 두께나 색상 자체를 transition하지 않습니다.
+            description: enabled 상태의 stroke 위에 focused/invalid 상태의 stroke가 fade in/out 되는 데에 걸리는 시간입니다. stroke 두께나 색상 자체를 transition하지 않습니다.
           strokeTimingFunction:
             type: cubicBezier
       value:

package/package.json

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