@seed-design/rootage-artifacts 2.5.0 → 2.7.0

package/components/accordion-item.yaml

@@ -34,6 +34,9 @@ data:
             type: dimension
           cornerRadius:
             type: dimension
+          scaleScope:
+            type: enum
+            values: [self, content]
       prefix:
         properties:
           paddingRight:
@@ -142,6 +145,7 @@ data:
           color: $color.bg.transparent-pressed
           marginX: $dimension.x1_5
           cornerRadius: $dimension.x2_5
+          scaleScope: content
 
     size=medium:
       enabled:
@@ -188,6 +192,6 @@ data:
     variant=separated:
       enabled:
         root:
-          strokeColor: $color.stroke.neutral-muted
+          strokeColor: $color.stroke.neutral-weak
           strokeWidth: 1px
           cornerRadius: $radius.r3

package/components/action-button.yaml

@@ -12,12 +12,6 @@ data:
             type: duration
           colorTimingFunction:
             type: cubicBezier
-          scale:
-            type: number
-          scaleDuration:
-            type: duration
-          scaleTimingFunction:
-            type: cubicBezier
           color:
             type: color
           strokeColor:
@@ -36,6 +30,9 @@ data:
             type: dimension
           paddingY:
             type: dimension
+          scaleScope:
+            type: enum
+            values: [self, content]
       label:
         properties:
           color:
@@ -116,10 +113,11 @@ data:
         root:
           colorDuration: $duration.color-transition
           colorTimingFunction: $timing-function.easing
-          scaleDuration: $duration.pressed-scale
-          scaleTimingFunction: $timing-function.pressed-scale
         label:
           fontWeight: $font-weight.bold
+      pressed:
+        root:
+          scaleScope: self
     variant=brandSolid:
       enabled:
         root:
@@ -358,9 +356,6 @@ data:
         progressCircle:
           size: 14px
           thickness: 2px
-      pressed:
-        root:
-          scale: $scale.s95
     size=xsmall, layout=withText:
       enabled:
         root:
@@ -390,9 +385,6 @@ data:
         progressCircle:
           size: 14px
           thickness: 2px
-      pressed:
-        root:
-          scale: $scale.s97
     size=small, layout=withText:
       enabled:
         root:
@@ -422,9 +414,6 @@ data:
         progressCircle:
           size: 16px
           thickness: 2px
-      pressed:
-        root:
-          scale: $scale.s97
     size=medium, layout=withText:
       enabled:
         root:
@@ -454,9 +443,6 @@ data:
         progressCircle:
           size: 18px
           thickness: 2px
-      pressed:
-        root:
-          scale: $scale.s98
     size=large, layout=withText:
       enabled:
         root:

package/components/attachment-input-item-action-button.yaml

@@ -10,6 +10,9 @@ data:
         properties:
           gap:
             type: dimension
+          scaleScope:
+            type: enum
+            values: [self, content]
       icon:
         properties:
           color:
@@ -37,6 +40,9 @@ data:
           fontSize: $font-size.t2
           lineHeight: $line-height.t2
           fontWeight: $font-weight.medium
+      pressed:
+        root:
+          scaleScope: self
 
     type=file:
       enabled:

package/components/attachment-input-item-remove-button.yaml

@@ -20,6 +20,9 @@ data:
             type: color
           offset:
             type: dimension
+          scaleScope:
+            type: enum
+            values: [self, content]
       icon:
         properties:
           size:
@@ -43,6 +46,7 @@ data:
       pressed:
         root:
           color: $color.bg.layer-default-pressed
+          scaleScope: self
       disabled:
         icon:
           color: $color.fg.disabled

package/components/attachment-input-item.yaml

@@ -26,6 +26,9 @@ data:
             type: color
           opacity:
             type: number
+          scaleScope:
+            type: enum
+            values: [self, content]
       thumbnail:
         properties:
           color:
@@ -121,6 +124,9 @@ data:
         removeButtonMask:
           offset: $dimension.x1_5
           size: $dimension.x6
+      pressed:
+        root:
+          scaleScope: self
 
     type=file:
       enabled:

package/components/attachment-input-trigger.yaml

@@ -20,6 +20,9 @@ data:
             type: dimension
           strokeColor:
             type: color
+          scaleScope:
+            type: enum
+            values: [self, content]
       icon:
         properties:
           size:
@@ -72,6 +75,7 @@ data:
       pressed:
         root:
           color: $color.bg.transparent-pressed
+          scaleScope: self
       disabled:
         icon:
           color: $color.fg.disabled

package/components/bottom-sheet-close-button.yaml

@@ -16,6 +16,9 @@ data:
             type: dimension
           size:
             type: dimension
+          scaleScope:
+            type: enum
+            values: [self, content]
       icon:
         properties:
           color:
@@ -36,3 +39,4 @@ data:
       pressed:
         root:
           color: $color.bg.neutral-weak-pressed
+          scaleScope: self

package/components/bottom-sheet.yaml

@@ -103,7 +103,7 @@ data:
           exitOpacity: 0
         content:
           color: $color.bg.layer-floating
-          maxWidth: 640px
+          maxWidth: 480px
           topCornerRadius: $radius.r6
           enterDuration: $duration.d6
           enterTimingFunction: $timing-function.enter-expressive

package/components/callout-close-button.yaml

@@ -0,0 +1,83 @@
+# yaml-language-server: $schema=./schema.json
+kind: ComponentSpec
+metadata:
+  id: callout-close-button
+  name: Callout Close Button
+data:
+  schema:
+    slots:
+      root:
+        properties:
+          color:
+            type: color
+          cornerRadius:
+            type: dimension
+          size:
+            type: dimension
+          colorDuration:
+            type: duration
+          colorTimingFunction:
+            type: cubicBezier
+          scaleScope:
+            type: enum
+            values: [self, content]
+      icon:
+        properties:
+          color:
+            type: color
+          size:
+            type: dimension
+    variants:
+      tone:
+        values:
+          neutral:
+            description: 일반적인 정보를 전달합니다.
+          informative:
+            description: 유용한 정보를 제공합니다.
+          positive:
+            description: 긍정적인 상태를 나타냅니다.
+          warning:
+            description: 주의가 필요한 상태를 나타냅니다.
+          critical:
+            description: 중요한 문제를 나타냅니다.
+          magic:
+            description: AI 기능을 나타냅니다.
+  definitions:
+    base:
+      enabled:
+        root:
+          color: $color.bg.transparent
+          cornerRadius: $radius.r2
+          size: $dimension.x10
+          colorDuration: $duration.color-transition
+          colorTimingFunction: $timing-function.easing
+        icon:
+          size: $dimension.x4
+      pressed:
+        root:
+          color: $color.bg.transparent-pressed
+          scaleScope: self
+    tone=neutral:
+      enabled:
+        icon:
+          color: $color.fg.neutral
+    tone=informative:
+      enabled:
+        icon:
+          color: $color.fg.informative-contrast
+    tone=positive:
+      enabled:
+        icon:
+          color: $color.fg.positive-contrast
+    tone=warning:
+      enabled:
+        icon:
+          color: $color.fg.warning-contrast
+    tone=critical:
+      enabled:
+        icon:
+          color: $color.fg.critical-contrast
+    tone=magic:
+      enabled:
+        icon:
+          color: $color.fg.neutral

package/components/callout.yaml

@@ -22,6 +22,9 @@ data:
             type: color
           gradient:
             type: gradient
+          scaleScope:
+            type: enum
+            values: [self, content]
       prefixIcon:
         description: 아이콘은 Fill 타입 사용을 권장합니다.
         properties:
@@ -64,8 +67,6 @@ data:
         properties:
           size:
             type: dimension
-          targetSize:
-            type: dimension
           color:
             type: color
     variants:
@@ -108,7 +109,9 @@ data:
           fontWeight: $font-weight.regular
         suffixIcon:
           size: $dimension.x4
-          targetSize: $dimension.x10
+      pressed:
+        root:
+          scaleScope: self
     tone=neutral:
       enabled:
         root:

package/components/checkbox.yaml

@@ -7,6 +7,7 @@ data:
   schema:
     slots:
       root:
+        description: root 전체가 누르는 영역이며, pressed 피드백은 Checkmark의 축소로 표현됩니다.
         properties:
           gap:
             type: dimension

package/components/checkmark.yaml

@@ -22,6 +22,10 @@ data:
             type: dimension
           cornerRadius:
             type: dimension
+          scaleScope:
+            type: enum
+            values: [self, content]
+            description: 감싸는 컴포넌트가 자체 pressed 피드백을 주는 경우(List Item 등)에는 이 값이 적용되지 않습니다.
       icon:
         properties:
           color:
@@ -45,6 +49,9 @@ data:
         root:
           colorDuration: $duration.color-transition
           colorTimingFunction: $timing-function.easing
+      pressed:
+        root:
+          scaleScope: self
     variant=square:
       enabled:
         root:

package/components/chip.yaml

@@ -29,6 +29,9 @@ data:
             type: cubicBezier
           opacity:
             type: number
+          scaleScope:
+            type: enum
+            values: [self, content]
       label:
         properties:
           color:
@@ -95,6 +98,9 @@ data:
           paddingX: $dimension.x1_5
         icon:
           color: $color.fg.neutral
+      pressed:
+        root:
+          scaleScope: self
 
     variant=solid:
       enabled:

package/components/contextual-floating-button.yaml

@@ -28,6 +28,9 @@ data:
             type: dimension
           size:
             type: dimension
+          scaleScope:
+            type: enum
+            values: [self, content]
       progressCircle:
         properties:
           size:
@@ -84,6 +87,9 @@ data:
         progressCircle:
           size: 16px
           thickness: 2px
+      pressed:
+        root:
+          scaleScope: self
     variant=solid:
       enabled:
         root:

package/components/dialog-close-button.yaml

@@ -18,6 +18,9 @@ data:
             type: duration
           colorTimingFunction:
             type: cubicBezier
+          scaleScope:
+            type: enum
+            values: [self, content]
       icon:
         properties:
           color:
@@ -45,3 +48,4 @@ data:
       pressed:
         root:
           color: $color.bg.transparent-pressed
+          scaleScope: self

package/components/floating-action-button.yaml

@@ -32,6 +32,9 @@ data:
             type: dimension
           size:
             type: dimension
+          scaleScope:
+            type: enum
+            values: [self, content]
       icon:
         properties:
           color:
@@ -77,6 +80,7 @@ data:
       pressed:
         root:
           color: $color.bg.brand-solid-pressed
+          scaleScope: self
     extended=true:
       enabled:
         root:

package/components/help-bubble.yaml

@@ -18,6 +18,8 @@ data:
             type: dimension
           gap:
             type: dimension
+          maxWidth:
+            type: dimension
           enterScale:
             type: number
           enterOpacity:
@@ -34,6 +36,9 @@ data:
             type: duration
           exitTimingFunction:
             type: cubicBezier
+          overflowPadding:
+            type: dimension
+            description: 말풍선과 뷰포트 경계 사이의 최소 간격을 정의합니다.
       arrow:
         properties:
           color:
@@ -84,6 +89,9 @@ data:
             type: dimension
           marginTop:
             type: dimension
+          scaleScope:
+            type: enum
+            values: [self, content]
   definitions:
     base:
       enabled:
@@ -93,6 +101,7 @@ data:
           paddingX: $dimension.x3
           paddingY: $dimension.x2_5
           gap: $dimension.x1
+          maxWidth: 280px
           enterScale: 0.9
           enterOpacity: 0
           enterDuration: $duration.d4
@@ -101,6 +110,7 @@ data:
           exitOpacity: 0
           exitDuration: $duration.d4
           exitTimingFunction: $timing-function.easing
+          overflowPadding: $dimension.x4
         arrow:
           color: $color.bg.neutral-inverted
           width: 12px
@@ -125,3 +135,6 @@ data:
           size: $dimension.x3_5
           targetSize: 38px
           marginTop: $dimension.x0_5
+      pressed:
+        closeButton:
+          scaleScope: self

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

@@ -15,6 +15,9 @@ data:
           targetSize:
             type: dimension
             description: 터치 영역 크기입니다.
+          scaleScope:
+            type: enum
+            values: [self, content]
       fillIcon:
         description: lineIcon 아래에 내려가는 하트 아이콘입니다.
         properties:
@@ -68,3 +71,6 @@ data:
                 position: 1
         lineIcon:
           color: $color.bg.transparent
+      pressed:
+        root:
+          scaleScope: self

package/components/input-button.yaml

@@ -31,6 +31,9 @@ data:
             description: enabled 상태의 stroke 위에 invalid 상태의 stroke가 fade in/out 되는 데에 걸리는 시간입니다. stroke 두께나 색상 자체를 transition하지 않습니다.
           strokeTimingFunction:
             type: cubicBezier
+          scaleScope:
+            type: enum
+            values: [self, content]
       value:
         properties:
           fontSize:
@@ -89,6 +92,9 @@ data:
             type: dimension
           color:
             type: color
+          scaleScope:
+            type: enum
+            values: [self, content]
     variants:
       size:
         values:
@@ -137,6 +143,9 @@ data:
       pressed:
         root:
           color: $color.bg.transparent-pressed
+          scaleScope: content
+        clearButton:
+          scaleScope: self
 
       invalid:
         root:

package/components/list-item.yaml

@@ -31,13 +31,9 @@ data:
             type: duration
           borderRadiusTimingFunction:
             type: cubicBezier
-          contentScale:
-            type: number
-            description: pressed 시 배경 레이어는 좌우 폭이 marginX만큼 줄어들고, 배경 레이어 위 요소들이 위치하는 레이아웃 레이어는 scale로 인해 전체적으로 줄어드는 형태로 두 레이어가 별개로 작동합니다.
-          contentScaleDuration:
-            type: duration
-          contentScaleTimingFunction:
-            type: cubicBezier
+          scaleScope:
+            type: enum
+            values: [self, content]
       body:
         properties:
           gap:
@@ -107,8 +103,6 @@ data:
           marginTimingFunction: $timing-function.easing
           borderRadiusDuration: $duration.d3
           borderRadiusTimingFunction: $timing-function.easing
-          contentScaleDuration: $duration.pressed-scale
-          contentScaleTimingFunction: $timing-function.pressed-scale
         body:
           gap: $dimension.x0_5
           paddingRight: $dimension.x2_5
@@ -142,7 +136,7 @@ data:
           color: $color.bg.transparent-pressed
           marginX: $dimension.x1_5
           cornerRadius: $dimension.x2_5
-          contentScale: $scale.s97
+          scaleScope: content
       highlighted:
         root:
           color: $color.bg.brand-weak

package/components/menu-item.yaml

@@ -32,6 +32,9 @@ data:
             type: dimension
           gap:
             type: dimension
+          scaleScope:
+            type: enum
+            values: [self, content]
       prefixIcon:
         properties:
           size:
@@ -103,6 +106,7 @@ data:
           color: $color.bg.transparent-pressed
           marginX: $dimension.x2
           cornerRadius: $radius.r3
+          scaleScope: content
       disabled:
         prefixIcon:
           color: $color.fg.disabled

package/components/menu-sheet-close-button.yaml

@@ -18,6 +18,9 @@ data:
             type: dimension
           paddingY:
             type: dimension
+          scaleScope:
+            type: enum
+            values: [self, content]
       label:
         properties:
           color:
@@ -45,3 +48,4 @@ data:
       pressed:
         root:
           color: $color.bg.neutral-weak-pressed
+          scaleScope: self

package/components/menu-sheet-item.yaml

@@ -18,6 +18,9 @@ data:
             type: dimension
           gap:
             type: dimension
+          scaleScope:
+            type: enum
+            values: [self, content]
       prefixIcon:
         properties:
           size:
@@ -86,6 +89,7 @@ data:
       pressed:
         root:
           color: $color.bg.neutral-weak-pressed
+          scaleScope: content
     tone=neutral:
       enabled:
         prefixIcon: