@seed-design/rootage-artifacts 2.6.0 → 2.7.0

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

package/components/radiomark.yaml

@@ -22,6 +22,10 @@ data:
             type: color
           cornerRadius:
             type: dimension
+          scaleScope:
+            type: enum
+            values: [self, content]
+            description: 감싸는 컴포넌트가 자체 pressed 피드백을 주는 경우(List Item, Select Box 등)에는 이 값이 적용되지 않습니다.
       icon:
         properties:
           size:
@@ -48,6 +52,9 @@ data:
         root:
           strokeWidth: 0px
           strokeColor: "#00000000"
+      pressed:
+        root:
+          scaleScope: self
 
     tone=brand:
       enabled,selected:

package/components/reaction-button.yaml

@@ -28,6 +28,9 @@ data:
             type: dimension
           paddingY:
             type: dimension
+          scaleScope:
+            type: enum
+            values: [self, content]
       label:
         properties:
           color:
@@ -87,6 +90,7 @@ data:
       pressed:
         root:
           color: $color.bg.transparent-pressed
+          scaleScope: self
       selected:
         root:
           color: $color.bg.transparent

package/components/segmented-control-item.yaml

@@ -30,6 +30,9 @@ data:
             type: dimension
           strokeColor:
             type: color
+          scaleScope:
+            type: enum
+            values: [self, content]
       label:
         properties:
           fontSize:
@@ -68,6 +71,7 @@ data:
           color: $color.bg.neutral-weak-pressed
           strokeWidth: 1px
           strokeColor: $color.stroke.neutral-muted
+          scaleScope: content
       selected:
         label:
           color: $color.fg.neutral

package/components/select-box.yaml

@@ -25,6 +25,9 @@ data:
             description: enabled 상태의 stroke 위에 selected 상태의 stroke가 fade in/out 되는 데에 걸리는 시간입니다. stroke 두께나 색상 자체를 transition하지 않습니다.
           strokeTimingFunction:
             type: cubicBezier
+          scaleScope:
+            type: enum
+            values: [self, content]
       trigger:
         properties:
           gap:
@@ -103,7 +106,7 @@ data:
         root:
           cornerRadius: $radius.r3
           color: $color.bg.transparent
-          strokeColor: $color.stroke.neutral-muted
+          strokeColor: $color.stroke.neutral-weak
           strokeWidth: 1px
           colorDuration: $duration.color-transition
           colorTimingFunction: $timing-function.easing
@@ -146,7 +149,7 @@ data:
           strokeColor: $color.stroke.neutral-contrast
       disabled:
         root:
-          strokeColor: $color.stroke.neutral-muted
+          strokeColor: $color.stroke.neutral-weak
         prefixIcon:
           color: $color.fg.disabled
         label:
@@ -157,6 +160,9 @@ data:
       enabled,pressed:
         root:
           color: $color.bg.transparent-pressed
+      pressed:
+        root:
+          scaleScope: content
 
     layout=horizontal:
       enabled:

package/components/select-item.yaml

@@ -28,6 +28,9 @@ data:
             type: dimension
           gap:
             type: dimension
+          scaleScope:
+            type: enum
+            values: [self, content]
       prefixIcon:
         properties:
           size:
@@ -99,6 +102,7 @@ data:
         root:
           color: $color.bg.transparent-pressed
           marginX: $dimension.x2
+          scaleScope: content
 
       disabled:
         prefixIcon:

package/components/select-trigger.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:
@@ -114,6 +117,7 @@ data:
       pressed:
         root:
           color: $color.bg.transparent-pressed
+          scaleScope: content
 
       invalid:
         root:

package/components/side-panel-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/snackbar.yaml

@@ -84,6 +84,9 @@ data:
             type: dimension
           fontWeight:
             type: number
+          scaleScope:
+            type: enum
+            values: [self, content]
   definitions:
     base:
       enabled:
@@ -97,7 +100,7 @@ data:
           color: $color.bg.neutral-inverted
           cornerRadius: $radius.r2
           minHeight: 44px
-          maxWidth: 560px
+          maxWidth: 464px
           paddingX: $dimension.x2_5
           paddingY: $dimension.x2_5
           enterOpacity: 0
@@ -126,6 +129,9 @@ data:
           fontSize: $font-size.t4
           lineHeight: $line-height.t4
           fontWeight: $font-weight.bold
+      pressed:
+        actionButton:
+          scaleScope: self
     variant=default: {}
     variant=positive:
       enabled:

package/components/switch.yaml

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

package/components/switchmark.yaml

@@ -34,6 +34,10 @@ data:
             type: dimension
           paddingY:
             type: dimension
+          scaleScope:
+            type: enum
+            values: [self, content]
+            description: 감싸는 컴포넌트가 자체 pressed 피드백을 주는 경우(List Item 등)에는 이 값이 적용되지 않습니다.
       thumb:
         properties:
           color:
@@ -52,6 +56,7 @@ data:
             type: dimension
           scale:
             type: number
+            description: selected 여부에 따른 thumb 크기입니다. pressed 축소는 root에 적용되므로 이 값과 무관합니다.
           scaleDuration:
             type: duration
           scaleTimingFunction:
@@ -88,6 +93,9 @@ data:
       selected:
         thumb:
           scale: 1.0
+      pressed:
+        root:
+          scaleScope: self
 
     tone=brand:
       enabled:

package/components/tab.yaml

@@ -14,6 +14,9 @@ data:
             type: dimension
           paddingY:
             type: dimension
+          scaleScope:
+            type: enum
+            values: [self, content]
       label:
         properties:
           color:
@@ -35,6 +38,9 @@ data:
       disabled:
         label:
           color: $color.fg.disabled
+      pressed:
+        root:
+          scaleScope: self
     size=medium:
       enabled:
         root:

package/components/toggle-button.yaml

@@ -24,6 +24,9 @@ data:
             type: dimension
           paddingY:
             type: dimension
+          scaleScope:
+            type: enum
+            values: [self, content]
       label:
         properties:
           color:
@@ -71,6 +74,9 @@ data:
           colorTimingFunction: $timing-function.easing
         label:
           fontWeight: $font-weight.bold
+      pressed:
+        root:
+          scaleScope: self
     variant=brandSolid:
       enabled:
         root:

package/components/wheel-picker.yaml

@@ -0,0 +1,98 @@
+# yaml-language-server: $schema=./schema.json
+kind: ComponentSpec
+metadata:
+  id: wheel-picker
+  name: Wheel Picker
+data:
+  schema:
+    slots:
+      root:
+        properties:
+          height:
+            type: dimension
+          color:
+            type: color
+      selectionIndicator:
+        properties:
+          height:
+            type: dimension
+          insetX:
+            type: dimension
+          cornerRadius:
+            type: dimension
+          color:
+            type: color
+      scrollFog:
+        properties:
+          maxHeight:
+            type: dimension
+          maxHeightFraction:
+            type: number
+      item:
+        properties:
+          height:
+            type: dimension
+      itemLabel:
+        properties:
+          paddingX:
+            type: dimension
+          fontSize:
+            type: dimension
+          lineHeight:
+            type: dimension
+          fontWeight:
+            type: number
+          color:
+            type: color
+    variants:
+      size:
+        values:
+          small: {}
+          medium: {}
+  definitions:
+    base:
+      enabled:
+        root:
+          color: $color.bg.layer-floating
+        selectionIndicator:
+          insetX: $dimension.x4
+          cornerRadius: $radius.r2
+          color: $color.bg.neutral-weak
+        scrollFog:
+          maxHeightFraction: 0.4
+        itemLabel:
+          paddingX: $dimension.x4
+          fontWeight: $font-weight.medium
+          color: $color.fg.disabled
+      selected:
+        itemLabel:
+          color: $color.fg.neutral
+      disabled:
+        itemLabel:
+          color: $color.fg.disabled
+    size=small:
+      enabled:
+        root:
+          height: 180px
+        selectionIndicator:
+          height: 36px
+        scrollFog:
+          maxHeight: 108px
+        item:
+          height: 36px
+        itemLabel:
+          fontSize: $font-size.t7-static
+          lineHeight: $line-height.t7-static
+    size=medium:
+      enabled:
+        root:
+          height: 220px
+        selectionIndicator:
+          height: 44px
+        scrollFog:
+          maxHeight: 132px
+        item:
+          height: 44px
+        itemLabel:
+          fontSize: $font-size.t10-static
+          lineHeight: $line-height.t10-static

package/duration.yaml

@@ -27,6 +27,8 @@ data:
     $duration.color-transition:
       values:
         default: $duration.d3
+    # TODO: consider renaming to match the scale feedback naming. Held back because the token is
+    # already released as --seed-duration-pressed-scale.
     $duration.pressed-scale:
       values:
         default: $duration.d3

package/package.json

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

package/scale.yaml

@@ -5,6 +5,8 @@ metadata:
 data:
   collection: motion
   tokens:
+    # TODO: remove all three — superseded by the dynamic scale that scale feedback derives at runtime,
+    # and no component spec references them.
     $scale.s95:
       values:
         preferred: 0.95

package/timing-function.yaml

@@ -35,6 +35,8 @@ data:
         default:
           type: cubicBezier
           value: [0.35, 0, 0.95, 0.55]
+    # TODO: consider renaming to match the scale feedback naming. Held back because the token is
+    # already released as --seed-timing-function-pressed-scale.
     $timing-function.pressed-scale:
       values:
         default: