@seed-design/rootage-artifacts 2.6.0 → 2.8.0

package/__generated__/gradient.d.ts

@@ -8,6 +8,149 @@ declare const artifact: {
   "data": {
     "collection": "color";
     "tokens": {
+      "$gradient.fade-mask": {
+        "values": {
+          "theme-light": {
+            "type": "gradient";
+            "value": readonly [
+              {
+                "color": "#00000000";
+                "position": 0;
+              },
+              {
+                "color": "#00000003";
+                "position": 0.08;
+              },
+              {
+                "color": "#00000005";
+                "position": 0.16;
+              },
+              {
+                "color": "#0000000d";
+                "position": 0.22;
+              },
+              {
+                "color": "#00000014";
+                "position": 0.29;
+              },
+              {
+                "color": "#00000021";
+                "position": 0.35;
+              },
+              {
+                "color": "#0000002e";
+                "position": 0.41;
+              },
+              {
+                "color": "#00000040";
+                "position": 0.47;
+              },
+              {
+                "color": "#00000052";
+                "position": 0.53;
+              },
+              {
+                "color": "#00000066";
+                "position": 0.59;
+              },
+              {
+                "color": "#0000007a";
+                "position": 0.65;
+              },
+              {
+                "color": "#00000094";
+                "position": 0.71;
+              },
+              {
+                "color": "#000000ab";
+                "position": 0.78;
+              },
+              {
+                "color": "#000000c7";
+                "position": 0.84;
+              },
+              {
+                "color": "#000000e3";
+                "position": 0.92;
+              },
+              {
+                "color": "#000000ff";
+                "position": 1;
+              },
+            ];
+          };
+          "theme-dark": {
+            "type": "gradient";
+            "value": readonly [
+              {
+                "color": "#00000000";
+                "position": 0;
+              },
+              {
+                "color": "#00000003";
+                "position": 0.08;
+              },
+              {
+                "color": "#00000005";
+                "position": 0.16;
+              },
+              {
+                "color": "#0000000d";
+                "position": 0.22;
+              },
+              {
+                "color": "#00000014";
+                "position": 0.29;
+              },
+              {
+                "color": "#00000021";
+                "position": 0.35;
+              },
+              {
+                "color": "#0000002e";
+                "position": 0.41;
+              },
+              {
+                "color": "#00000040";
+                "position": 0.47;
+              },
+              {
+                "color": "#00000052";
+                "position": 0.53;
+              },
+              {
+                "color": "#00000066";
+                "position": 0.59;
+              },
+              {
+                "color": "#0000007a";
+                "position": 0.65;
+              },
+              {
+                "color": "#00000094";
+                "position": 0.71;
+              },
+              {
+                "color": "#000000ab";
+                "position": 0.78;
+              },
+              {
+                "color": "#000000c7";
+                "position": 0.84;
+              },
+              {
+                "color": "#000000e3";
+                "position": 0.92;
+              },
+              {
+                "color": "#000000ff";
+                "position": 1;
+              },
+            ];
+          };
+        };
+        "description": "콘텐츠를 부드럽게 가리는 마스크용 불투명도(alpha) easing 곡선입니다. Figma에 없는 개발 전용 토큰입니다.";
+      };
       "$gradient.glow-magic": {
         "values": {
           "theme-light": {

package/__generated__/gradient.json

@@ -8,6 +8,149 @@
   "data": {
     "collection": "color",
     "tokens": {
+      "$gradient.fade-mask": {
+        "values": {
+          "theme-light": {
+            "type": "gradient",
+            "value": [
+              {
+                "color": "#00000000",
+                "position": 0
+              },
+              {
+                "color": "#00000003",
+                "position": 0.08
+              },
+              {
+                "color": "#00000005",
+                "position": 0.16
+              },
+              {
+                "color": "#0000000d",
+                "position": 0.22
+              },
+              {
+                "color": "#00000014",
+                "position": 0.29
+              },
+              {
+                "color": "#00000021",
+                "position": 0.35
+              },
+              {
+                "color": "#0000002e",
+                "position": 0.41
+              },
+              {
+                "color": "#00000040",
+                "position": 0.47
+              },
+              {
+                "color": "#00000052",
+                "position": 0.53
+              },
+              {
+                "color": "#00000066",
+                "position": 0.59
+              },
+              {
+                "color": "#0000007a",
+                "position": 0.65
+              },
+              {
+                "color": "#00000094",
+                "position": 0.71
+              },
+              {
+                "color": "#000000ab",
+                "position": 0.78
+              },
+              {
+                "color": "#000000c7",
+                "position": 0.84
+              },
+              {
+                "color": "#000000e3",
+                "position": 0.92
+              },
+              {
+                "color": "#000000ff",
+                "position": 1
+              }
+            ]
+          },
+          "theme-dark": {
+            "type": "gradient",
+            "value": [
+              {
+                "color": "#00000000",
+                "position": 0
+              },
+              {
+                "color": "#00000003",
+                "position": 0.08
+              },
+              {
+                "color": "#00000005",
+                "position": 0.16
+              },
+              {
+                "color": "#0000000d",
+                "position": 0.22
+              },
+              {
+                "color": "#00000014",
+                "position": 0.29
+              },
+              {
+                "color": "#00000021",
+                "position": 0.35
+              },
+              {
+                "color": "#0000002e",
+                "position": 0.41
+              },
+              {
+                "color": "#00000040",
+                "position": 0.47
+              },
+              {
+                "color": "#00000052",
+                "position": 0.53
+              },
+              {
+                "color": "#00000066",
+                "position": 0.59
+              },
+              {
+                "color": "#0000007a",
+                "position": 0.65
+              },
+              {
+                "color": "#00000094",
+                "position": 0.71
+              },
+              {
+                "color": "#000000ab",
+                "position": 0.78
+              },
+              {
+                "color": "#000000c7",
+                "position": 0.84
+              },
+              {
+                "color": "#000000e3",
+                "position": 0.92
+              },
+              {
+                "color": "#000000ff",
+                "position": 1
+              }
+            ]
+          }
+        },
+        "description": "콘텐츠를 부드럽게 가리는 마스크용 불투명도(alpha) easing 곡선입니다. Figma에 없는 개발 전용 토큰입니다."
+      },
       "$gradient.glow-magic": {
         "values": {
           "theme-light": {

package/__generated__/index.d.ts

@@ -1,6 +1,6 @@
 declare const artifact: {
   "name": "Rootage";
-  "version": "2.6.0";
+  "version": "2.8.0";
   "resources": readonly [
     {
       "path": "/collections.json";
@@ -68,6 +68,9 @@ declare const artifact: {
     {
       "path": "/components/bottom-sheet.json";
     },
+    {
+      "path": "/components/callout-close-button.json";
+    },
     {
       "path": "/components/callout.json";
     },
@@ -188,9 +191,18 @@ declare const artifact: {
     {
       "path": "/components/notification-badge.json";
     },
+    {
+      "path": "/components/page-banner-close-button.json";
+    },
     {
       "path": "/components/page-banner.json";
     },
+    {
+      "path": "/components/pagination-button.json";
+    },
+    {
+      "path": "/components/pagination-page-item.json";
+    },
     {
       "path": "/components/progress-circle.json";
     },
@@ -305,6 +317,9 @@ declare const artifact: {
     {
       "path": "/components/typography.json";
     },
+    {
+      "path": "/components/wheel-picker.json";
+    },
     {
       "path": "/dimension.json";
     },

package/__generated__/index.json

@@ -1,6 +1,6 @@
 {
   "name": "Rootage",
-  "version": "2.6.0",
+  "version": "2.8.0",
   "resources": [
     {
       "path": "/collections.json"
@@ -68,6 +68,9 @@
     {
       "path": "/components/bottom-sheet.json"
     },
+    {
+      "path": "/components/callout-close-button.json"
+    },
     {
       "path": "/components/callout.json"
     },
@@ -188,9 +191,18 @@
     {
       "path": "/components/notification-badge.json"
     },
+    {
+      "path": "/components/page-banner-close-button.json"
+    },
     {
       "path": "/components/page-banner.json"
     },
+    {
+      "path": "/components/pagination-button.json"
+    },
+    {
+      "path": "/components/pagination-page-item.json"
+    },
     {
       "path": "/components/progress-circle.json"
     },
@@ -305,6 +317,9 @@
     {
       "path": "/components/typography.json"
     },
+    {
+      "path": "/components/wheel-picker.json"
+    },
     {
       "path": "/dimension.json"
     },

package/color.yaml

@@ -709,7 +709,7 @@ data:
         theme-light: $color.palette.gray-1000
         theme-dark: $color.palette.gray-1000
     $color.stroke.neutral-muted:
-      description: 일반적인 콘텐츠에 사용되는 기본 색상입니다. (muted)
+      description: 의미 단위가 바뀌는 경계를 나누는 선입니다. 섹션과 섹션 사이, 콘텐츠와 액션 영역 사이, 헤더와 본문 경계처럼 한 화면에 한두 번만 등장하는 구분에 사용됩니다. (muted)
       values:
         theme-light: $color.palette.static-black-alpha-300
         theme-dark: $color.palette.static-white-alpha-100
@@ -719,12 +719,12 @@ data:
         theme-light: $color.palette.gray-800
         theme-dark: $color.palette.gray-800
     $color.stroke.neutral-subtle:
-      description: 일반적인 콘텐츠에 사용되는 기본 색상입니다. (subtle)
+      description: 반복되는 동일한 성격의 항목 사이를 나누는 선입니다. 리스트 아이템, 테이블 row, 설정 메뉴 항목처럼 한 화면에 여러 번 등장하는 구분에 사용됩니다. (subtle)
       values:
         theme-light: $color.palette.static-black-alpha-200
         theme-dark: $color.palette.static-white-alpha-50
     $color.stroke.neutral-weak:
-      description: 일반적인 콘텐츠에 사용되는 기본 색상입니다. (weak)
+      description: 요소의 외곽을 그려 형태를 만드는 선입니다. 카드, 인풋 필드, 아웃라인 버튼처럼 선 자체가 요소의 경계를 정의할 때 사용됩니다. (weak)
       values:
         theme-light: $color.palette.gray-400
         theme-dark: $color.palette.gray-400

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