@seed-design/rootage-artifacts 2.6.0 → 2.8.0

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:
@@ -87,6 +89,9 @@ data:
             type: dimension
           marginTop:
             type: dimension
+          scaleScope:
+            type: enum
+            values: [self, content]
   definitions:
     base:
       enabled:
@@ -96,6 +101,7 @@ data:
           paddingX: $dimension.x3
           paddingY: $dimension.x2_5
           gap: $dimension.x1
+          maxWidth: 280px
           enterScale: 0.9
           enterOpacity: 0
           enterDuration: $duration.d4
@@ -129,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:

package/components/page-banner-close-button.yaml

@@ -0,0 +1,102 @@
+# yaml-language-server: $schema=./schema.json
+kind: ComponentSpec
+metadata:
+  id: page-banner-close-button
+  name: Page Banner Close Button
+data:
+  schema:
+    slots:
+      root:
+        properties:
+          color:
+            type: color
+          cornerRadius:
+            type: dimension
+          size:
+            type: dimension
+          marginLeft:
+            type: dimension
+          colorDuration:
+            type: duration
+          colorTimingFunction:
+            type: cubicBezier
+          scaleScope:
+            type: enum
+            values: [self, content]
+      icon:
+        properties:
+          color:
+            type: color
+          size:
+            type: dimension
+    variants:
+      variant:
+        values:
+          weak:
+            description: 배경색이 연한 스타일입니다.
+          solid:
+            description: 배경색이 진한 스타일입니다.
+      tone:
+        values:
+          magic:
+            description: AI 기능을 나타냅니다. variant=solid와 조합하여 사용하지 않습니다.
+  definitions:
+    base:
+      enabled:
+        root:
+          color: $color.bg.transparent
+          cornerRadius: $radius.r2
+          size: $dimension.x10
+          marginLeft: $dimension.x2
+          colorDuration: $duration.color-transition
+          colorTimingFunction: $timing-function.easing
+        icon:
+          size: $dimension.x4
+      pressed:
+        root:
+          color: $color.bg.transparent-pressed
+          scaleScope: self
+    tone=neutral, variant=weak:
+      enabled:
+        icon:
+          color: $color.fg.neutral
+    tone=neutral, variant=solid:
+      enabled:
+        icon:
+          color: $color.fg.neutral-inverted
+    tone=positive, variant=weak:
+      enabled:
+        icon:
+          color: $color.fg.positive-contrast
+    tone=positive, variant=solid:
+      enabled:
+        icon:
+          color: $color.palette.static-white
+    tone=informative, variant=weak:
+      enabled:
+        icon:
+          color: $color.fg.informative-contrast
+    tone=informative, variant=solid:
+      enabled:
+        icon:
+          color: $color.palette.static-white
+    tone=warning, variant=weak:
+      enabled:
+        icon:
+          color: $color.fg.warning-contrast
+    tone=warning, variant=solid:
+      enabled:
+        icon:
+          color: $color.palette.static-black-alpha-900
+    tone=critical, variant=weak:
+      enabled:
+        icon:
+          color: $color.fg.critical-contrast
+    tone=critical, variant=solid:
+      enabled:
+        icon:
+          color: $color.palette.static-white
+    tone=magic, variant=weak:
+      enabled:
+        icon:
+          color: $color.fg.neutral

package/components/page-banner.yaml

@@ -18,6 +18,9 @@ data:
             type: color
           gradient:
             type: gradient
+          scaleScope:
+            type: enum
+            values: [self, content]
       prefixIcon:
         description: 아이콘은 Fill 타입 사용을 권장합니다.
         properties:
@@ -63,12 +66,13 @@ data:
             type: number
           color:
             type: color
+          scaleScope:
+            type: enum
+            values: [self, content]
       suffixIcon:
         properties:
           size:
             type: dimension
-          targetSize:
-            type: dimension
           marginLeft:
             type: dimension
           color:
@@ -111,8 +115,12 @@ data:
           fontWeight: $font-weight.bold
         suffixIcon:
           size: $dimension.x4
-          targetSize: $dimension.x10
           marginLeft: $dimension.x2
+      pressed:
+        root:
+          scaleScope: content
+        button:
+          scaleScope: self
     tone=neutral, variant=weak:
       enabled:
         root:

package/components/pagination-button.yaml

@@ -0,0 +1,55 @@
+# yaml-language-server: $schema=./schema.json
+kind: ComponentSpec
+metadata:
+  id: pagination-button
+  name: Pagination Button
+data:
+  schema:
+    slots:
+      root:
+        properties:
+          color:
+            type: color
+          colorDuration:
+            type: duration
+          colorTimingFunction:
+            type: cubicBezier
+          scale:
+            type: number
+          scaleDuration:
+            type: duration
+          scaleTimingFunction:
+            type: cubicBezier
+          size:
+            type: dimension
+          cornerRadius:
+            type: dimension
+      icon:
+        properties:
+          color:
+            type: color
+          size:
+            type: dimension
+  definitions:
+    base:
+      enabled:
+        root:
+          color: $color.bg.transparent
+          colorDuration: $duration.color-transition
+          colorTimingFunction: $timing-function.easing
+          scaleDuration: $duration.pressed-scale
+          scaleTimingFunction: $timing-function.pressed-scale
+          size: $dimension.x10
+          cornerRadius: $radius.r2
+        icon:
+          color: $color.fg.neutral
+          size: $dimension.x4
+      pressed:
+        root:
+          color: $color.bg.transparent-pressed
+          scale: $scale.s97
+      disabled:
+        root:
+          color: $color.bg.transparent
+        icon:
+          color: $color.fg.disabled

package/components/pagination-page-item.yaml

@@ -0,0 +1,68 @@
+# yaml-language-server: $schema=./schema.json
+kind: ComponentSpec
+metadata:
+  id: pagination-page-item
+  name: Pagination Page Item
+data:
+  schema:
+    slots:
+      root:
+        properties:
+          color:
+            type: color
+          scale:
+            type: number
+          scaleDuration:
+            type: duration
+          scaleTimingFunction:
+            type: cubicBezier
+          size:
+            type: dimension
+          cornerRadius:
+            type: dimension
+      label:
+        properties:
+          color:
+            type: color
+          fontSize:
+            type: dimension
+          lineHeight:
+            type: dimension
+          fontWeight:
+            type: number
+  definitions:
+    base:
+      enabled:
+        root:
+          color: $color.bg.transparent
+          scaleDuration: $duration.pressed-scale
+          scaleTimingFunction: $timing-function.pressed-scale
+          size: $dimension.x10
+          cornerRadius: $radius.r2
+        label:
+          color: $color.fg.neutral
+          fontSize: $font-size.t4
+          lineHeight: $line-height.t4
+          fontWeight: $font-weight.bold
+      pressed:
+        root:
+          color: $color.bg.transparent-pressed
+          scale: $scale.s97
+      selected:
+        root:
+          color: $color.bg.neutral-inverted
+        label:
+          color: $color.fg.neutral-inverted
+      selected, pressed:
+        root:
+          color: $color.bg.neutral-inverted-pressed
+      disabled:
+        root:
+          color: $color.bg.transparent
+        label:
+          color: $color.fg.disabled
+      selected, disabled:
+        root:
+          color: $color.bg.disabled
+        label:
+          color: $color.fg.disabled

package/components/quantity-picker-button.yaml

@@ -18,6 +18,9 @@ data:
             type: duration
           colorTimingFunction:
             type: cubicBezier
+          scaleScope:
+            type: enum
+            values: [self, content]
       icon:
         properties:
           size:
@@ -55,6 +58,7 @@ data:
       pressed:
         root:
           color: $color.bg.transparent-pressed
+          scaleScope: self
       disabled:
         icon:
           color: $color.fg.disabled

package/components/radio.yaml

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