@seed-design/rootage-artifacts 1.2.9 → 1.2.11

package/components/chip.yaml

@@ -251,7 +251,18 @@ data:
         icon:
           size: $dimension.x4
 
-    layout=withText: {}
+    size=small,layout=withText:
+      enabled:
+        root:
+          minWidth: 44px
+    size=medium,layout=withText:
+      enabled:
+        root:
+          minWidth: $dimension.x12
+    size=large,layout=withText:
+      enabled:
+        root:
+          minWidth: $dimension.x13
 
     size=small,layout=iconOnly:
       enabled:

package/components/list-item.yaml

@@ -20,6 +20,7 @@ data:
             type: color
           marginX:
             type: dimension
+            description: pressed 시 배경 레이어는 좌우 폭이 marginX만큼 줄어들고, 배경 레이어 위 요소들이 위치하는 레이아웃 레이어는 scale로 인해 전체적으로 줄어드는 형태로 두 레이어가 별개로 작동합니다. 이 값은 OS 동작 줄이기 설정의 영향을 받지 않습니다.
           cornerRadius:
             type: dimension
           marginDuration:
@@ -30,7 +31,14 @@ data:
             type: duration
           borderRadiusTimingFunction:
             type: cubicBezier
-      content:
+          contentScale:
+            type: number
+            description: pressed 시 배경 레이어는 좌우 폭이 marginX만큼 줄어들고, 배경 레이어 위 요소들이 위치하는 레이아웃 레이어는 scale로 인해 전체적으로 줄어드는 형태로 두 레이어가 별개로 작동합니다. OS 동작 줄이기 등의 설정이 켜진 경우 이 값을 1로 변경하여 사용합니다.
+          contentScaleDuration:
+            type: duration
+          contentScaleTimingFunction:
+            type: cubicBezier
+      body:
         properties:
           gap:
             type: dimension
@@ -99,7 +107,9 @@ data:
           marginTimingFunction: $timing-function.easing
           borderRadiusDuration: $duration.d3
           borderRadiusTimingFunction: $timing-function.easing
-        content:
+          contentScaleDuration: $duration.pressed-scale
+          contentScaleTimingFunction: $timing-function.pressed-scale
+        body:
           gap: $dimension.x0_5
           paddingRight: $dimension.x2_5
         title:
@@ -132,6 +142,7 @@ data:
           color: $color.bg.transparent-pressed
           marginX: $dimension.x1_5
           cornerRadius: $dimension.x2_5
+          contentScale: 0.97
       highlighted:
         root:
           color: $color.bg.brand-weak

package/components/top-navigation-text-button.yaml

@@ -8,6 +8,10 @@ data:
     slots:
       root:
         properties:
+          maxWidth:
+            type: dimension
+            description: 버튼 레이블이 길어졌을 때 ellipsis 말줄임을 시작할 최대 너비입니다. Top Navigation main
+              slot이 충분한 공간을 차지할 수 있도록 하기 위해 폰트 스케일링의 영향을 받지 않는 px 값을 사용합니다.
           height:
             type: dimension
           paddingX:
@@ -58,3 +62,8 @@ data:
       disabled:
         label:
           color: $color.fg.disabled
+    theme=ios:
+      enabled:
+        root:
+          maxWidth: 96px
+    theme=android: {}

package/components/top-navigation.yaml

@@ -14,10 +14,11 @@ data:
             type: dimension
           color:
             type: color
-          strokeColor:
-            type: color
-          strokeWidth:
+          gradient:
+            type: gradient
+          bleedBottom:
             type: dimension
+            description: gradient가 표시될 때 하단 아래로 gradient가 확장되는 길이입니다.
       left:
         properties: {}
         description: 왼쪽 영역입니다. 일반적으로 뒤로가기/닫기 Top Navigation Icon Button이 위치합니다.
@@ -28,7 +29,8 @@ data:
         description: title과 subtitle을 포함하는 영역입니다.
       right:
         properties: {}
-        description: 오른쪽 영역입니다. 일반적으로 Top Navigation Icon Button 또는 Top Navigation Text
+        description:
+          오른쪽 영역입니다. 일반적으로 Top Navigation Icon Button 또는 Top Navigation Text
           Button이 위치합니다.
       title:
         properties:
@@ -66,8 +68,21 @@ data:
             type: number
           minLineHeightScale:
             type: number
+    variants:
+      tone:
+        values:
+          layer:
+            description: color를 $color.bg.layer-basement 등으로 변경하여 사용할 수 있습니다.
+      gradient:
+        description: tone=transparent일 때만 동작합니다.
+        values:
+          "false":
+            description:
+              false로 사용하는 것을 권장하지 않습니다. gradient 없이 사용하면 Top Navigation의 콘텐츠 가독성을
+              직접 확보해야 합니다. 스크린 배경 색상이 Top Navigation에 보이기를 원하는 경우 tone=layer를
+              사용하세요.
   definitions:
-    theme=cupertino:
+    theme=ios:
       enabled:
         root:
           height: 44px
@@ -91,17 +106,25 @@ data:
           color: $color.fg.neutral-muted
     tone=transparent:
       enabled:
-        root:
-          color: "#00000000"
         title:
           color: $color.palette.static-white
         subtitle:
           color: $color.palette.static-white
-    divider=true:
+    tone=transparent,gradient=false:
+      enabled:
+        root:
+          color: "#00000000"
+    tone=transparent,gradient=true:
       enabled:
         root:
-          strokeColor: $color.stroke.neutral-subtle
-          strokeWidth: 1px
+          gradient:
+            type: gradient
+            value:
+              - color: "#00000059" # 35%
+                position: 0
+              - color: "#00000000"
+                position: 1
+          bleedBottom: $dimension.x5
     titleLayout=titleOnly:
       enabled:
         title:

package/duration.yaml

@@ -27,3 +27,6 @@ data:
     $duration.color-transition:
       values:
         default: $duration.d3
+    $duration.pressed-scale:
+      values:
+        default: $duration.d3

package/package.json

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

package/timing-function.yaml

@@ -35,3 +35,8 @@ data:
         default:
           type: cubicBezier
           value: [0.35, 0, 0.95, 0.55]
+    $timing-function.pressed-scale:
+      values:
+        default:
+          type: cubicBezier
+          value: [0, 0, 0.15, 1]