@seed-design/rootage-artifacts 1.2.2 → 1.2.4

package/color.yaml

@@ -734,6 +734,10 @@ data:
       values:
         theme-light: $color.palette.yellow-300
         theme-dark: $color.palette.yellow-300
+    $color.stroke.focus-ring:
+      values:
+        theme-light: $color.palette.blue-600
+        theme-dark: $color.palette.blue-600
     $color.manner-temp.l1.bg:
       values:
         theme-light: "#f1f2f3"

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

@@ -137,7 +137,7 @@ data:
     headerAlignment=left,closeButton=true:
       enabled:
         title:
-          paddingRight: 50px
+          paddingRight: 56px
           paddingLeft: $dimension.spacing-x.global-gutter
     headerAlignment=left,closeButton=false:
       enabled:
@@ -147,8 +147,8 @@ data:
     headerAlignment=center,closeButton=true:
       enabled:
         title:
-          paddingLeft: 60px
-          paddingRight: 60px
+          paddingLeft: 56px
+          paddingRight: 56px
     headerAlignment=center,closeButton=false:
       enabled:
         title:

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/identity-placeholder.yaml

@@ -18,6 +18,6 @@ data:
     base:
       enabled:
         root:
-          color: $color.palette.gray-400
+          color: $color.palette.gray-500
         image:
-          color: "#f7f8fa"
+          color: $color.palette.static-white-alpha-800

package/components/image-frame-floater.yaml

@@ -10,7 +10,7 @@ data:
         properties:
           offset:
             type: dimension
-            description: 오버레이가 이미지 프레임 가장자리에서 떨어진 거리입니다.
+            description: image-frame root slot의 padding property로 대체되었습니다.
   definitions:
     base:
       enabled:

package/components/image-frame.yaml

@@ -16,7 +16,10 @@ data:
             description: stroke 옵션 사용 시 적용되는 테두리 두께입니다.
           cornerRadius:
             type: dimension
-            description: rounded 옵션 사용 시 적용되는 모서리 반경입니다.
+            description: 이 값은 기본값이며 변경할 수 있습니다.
+          padding:
+            type: dimension
+            description: 내부에 오버레이 요소가 존재하는 경우 이미지 모서리와 오버레이 요소 사이의 간격입니다. 이 값은 기본값이며 변경할 수 있습니다.
     variants:
       stroke:
         values:
@@ -37,20 +40,18 @@ data:
               @deprecated `rounded` 옵션은 @seed-design/react@1.3.0에서 제거될 예정입니다. `borderRadius="r2"`를 사용하세요.
               Reason: 모서리 스타일은 `borderRadius` prop으로 통일합니다.
   definitions:
+    base:
+      enabled:
+        root:
+          padding: $dimension.x1_5
     stroke=true:
       enabled:
         root:
           strokeColor: $color.stroke.neutral-subtle
           strokeWidth: 1px
-    stroke=false:
-      enabled:
-        root:
-          strokeWidth: 0px
+    stroke=false: {}
     rounded=true:
       enabled:
         root:
           cornerRadius: $radius.r2
-    rounded=false:
-      enabled:
-        root:
-          cornerRadius: 0px
+    rounded=false: {}

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

@@ -108,7 +108,7 @@ data:
           color: $color.fg.neutral
           fontSize: $font-size.t5
           lineHeight: $line-height.t5
-          fontWeight: $font-weight.medium
+          fontWeight: $font-weight.regular
         detail:
           color: $color.fg.neutral-subtle
           fontSize: $font-size.t3

package/components/segmented-control-indicator.yaml

@@ -0,0 +1,38 @@
+# yaml-language-server: $schema=./schema.json
+kind: ComponentSpec
+metadata:
+  id: segmented-control-indicator
+  name: Segmented Control Indicator
+data:
+  schema:
+    slots:
+      root:
+        properties:
+          color:
+            type: color
+          cornerRadius:
+            type: dimension
+          strokeWidth:
+            type: dimension
+          strokeColor:
+            type: color
+          transformDuration:
+            type: duration
+          transformTimingFunction:
+            type: cubicBezier
+  definitions:
+    base:
+      enabled:
+        root:
+          color: $color.palette.gray-00
+          strokeColor: $color.stroke.neutral-muted
+          strokeWidth: 1px
+          cornerRadius: $radius.full
+          transformDuration: $duration.d4
+          transformTimingFunction: $timing-function.easing
+      pressed:
+        root:
+          color: $color.palette.gray-100
+      disabled:
+        root:
+          color: $color.bg.disabled

package/components/segmented-control-item.yaml

@@ -26,6 +26,10 @@ data:
             type: duration
           colorTimingFunction:
             type: cubicBezier
+          strokeWidth:
+            type: dimension
+          strokeColor:
+            type: color
       label:
         properties:
           fontSize:
@@ -62,15 +66,11 @@ data:
       pressed:
         root:
           color: $color.bg.neutral-weak-pressed
+          strokeWidth: 1px
+          strokeColor: $color.stroke.neutral-muted
       selected:
         label:
           color: $color.fg.neutral
-      selected,pressed:
-        root:
-          color: $color.palette.gray-100
       disabled:
         label:
           color: $color.fg.disabled
-      disabled,selected:
-        root:
-          color: $color.bg.disabled

package/components/segmented-control.yaml

@@ -14,20 +14,6 @@ data:
             type: dimension
           color:
             type: color
-      indicator:
-        properties:
-          color:
-            type: color
-          cornerRadius:
-            type: dimension
-          strokeWidth:
-            type: dimension
-          strokeColor:
-            type: color
-          transformDuration:
-            type: duration
-          transformTimingFunction:
-            type: cubicBezier
   definitions:
     base:
       enabled:
@@ -35,10 +21,3 @@ data:
           padding: $dimension.x1
           cornerRadius: $radius.full
           color: $color.bg.neutral-weak-alpha
-        indicator:
-          color: $color.palette.gray-00
-          cornerRadius: $radius.full
-          strokeWidth: 1px
-          strokeColor: $color.stroke.neutral-muted
-          transformDuration: $duration.d4
-          transformTimingFunction: $timing-function.easing

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:
@@ -68,6 +70,10 @@ data:
             type: duration
           exitTimingFunction:
             type: cubicBezier
+          translateDuration:
+            type: duration
+          translateTimingFunction:
+            type: cubicBezier
       valueIndicatorArrow:
         properties:
           color:
@@ -80,8 +86,7 @@ data:
             type: dimension
           gutter:
             type: dimension
-          padding:
-            type: dimension
+            description: arrow와 thumb 사이의 거리를 정의합니다.
       valueIndicatorLabel:
         properties:
           color:
@@ -125,9 +130,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
@@ -137,17 +142,18 @@ data:
           exitOpacity: 0
           exitDuration: $duration.d4
           exitTimingFunction: $timing-function.easing
+          translateDuration: $duration.d3
+          translateTimingFunction: $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.2",
+  "version": "1.2.4",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/daangn/seed-design.git",