@seed-design/rootage-artifacts 2.2.1 → 2.4.0

package/__generated__/timing-function.d.ts

@@ -0,0 +1,104 @@
+declare const artifact: {
+  "kind": "Tokens";
+  "metadata": {
+    "id": "timing-function";
+    "name": "Timing Function";
+  };
+  "data": {
+    "collection": "global";
+    "tokens": {
+      "$timing-function.linear": {
+        "values": {
+          "default": {
+            "type": "cubicBezier";
+            "value": readonly [
+              0,
+              0,
+              1,
+              1,
+            ];
+          };
+        };
+      };
+      "$timing-function.easing": {
+        "values": {
+          "default": {
+            "type": "cubicBezier";
+            "value": readonly [
+              0.35,
+              0,
+              0.35,
+              1,
+            ];
+          };
+        };
+      };
+      "$timing-function.enter": {
+        "values": {
+          "default": {
+            "type": "cubicBezier";
+            "value": readonly [
+              0,
+              0,
+              0.15,
+              1,
+            ];
+          };
+        };
+      };
+      "$timing-function.exit": {
+        "values": {
+          "default": {
+            "type": "cubicBezier";
+            "value": readonly [
+              0.35,
+              0,
+              1,
+              1,
+            ];
+          };
+        };
+      };
+      "$timing-function.enter-expressive": {
+        "values": {
+          "default": {
+            "type": "cubicBezier";
+            "value": readonly [
+              0.03,
+              0.4,
+              0.1,
+              1,
+            ];
+          };
+        };
+      };
+      "$timing-function.exit-expressive": {
+        "values": {
+          "default": {
+            "type": "cubicBezier";
+            "value": readonly [
+              0.35,
+              0,
+              0.95,
+              0.55,
+            ];
+          };
+        };
+      };
+      "$timing-function.pressed-scale": {
+        "values": {
+          "default": {
+            "type": "cubicBezier";
+            "value": readonly [
+              0,
+              0,
+              0.15,
+              1,
+            ];
+          };
+        };
+      };
+    };
+  };
+};
+export default artifact;

package/__generated__/timing-function.mjs

@@ -0,0 +1,2 @@
+import artifact from "./timing-function.json" with { type: "json" };
+export default artifact;

package/components/alert-dialog.yaml

@@ -0,0 +1,131 @@
+# yaml-language-server: $schema=./schema.json
+kind: ComponentSpec
+metadata:
+  id: alert-dialog
+  name: Alert Dialog
+data:
+  schema:
+    slots:
+      backdrop:
+        properties:
+          color:
+            type: color
+          enterDuration:
+            type: duration
+          enterTimingFunction:
+            type: cubicBezier
+          enterOpacity:
+            type: number
+          exitDuration:
+            type: duration
+          exitTimingFunction:
+            type: cubicBezier
+          exitOpacity:
+            type: number
+      content:
+        properties:
+          color:
+            type: color
+          cornerRadius:
+            type: dimension
+          marginX:
+            type: dimension
+          marginY:
+            type: dimension
+          maxWidth:
+            type: dimension
+          enterDuration:
+            type: duration
+          enterTimingFunction:
+            type: cubicBezier
+          enterOpacity:
+            type: number
+          enterScale:
+            type: number
+          exitDuration:
+            type: duration
+          exitTimingFunction:
+            type: cubicBezier
+          exitOpacity:
+            type: number
+      header:
+        properties:
+          gap:
+            type: dimension
+          paddingX:
+            type: dimension
+          paddingTop:
+            type: dimension
+      footer:
+        properties:
+          gap:
+            type: dimension
+          paddingX:
+            type: dimension
+          paddingTop:
+            type: dimension
+          paddingBottom:
+            type: dimension
+      title:
+        properties:
+          color:
+            type: color
+          fontSize:
+            type: dimension
+          lineHeight:
+            type: dimension
+          fontWeight:
+            type: number
+      description:
+        properties:
+          color:
+            type: color
+          fontSize:
+            type: dimension
+          lineHeight:
+            type: dimension
+          fontWeight:
+            type: number
+  definitions:
+    base:
+      enabled:
+        backdrop:
+          color: $color.bg.overlay
+          enterDuration: $duration.d2
+          enterTimingFunction: $timing-function.enter
+          enterOpacity: 0
+          exitDuration: $duration.d2
+          exitTimingFunction: $timing-function.exit
+          exitOpacity: 0
+        content:
+          color: $color.bg.layer-floating
+          cornerRadius: $radius.r5
+          marginX: $dimension.x8
+          marginY: $dimension.x16
+          maxWidth: 272px
+          enterDuration: $duration.d4
+          enterTimingFunction: $timing-function.enter-expressive
+          enterOpacity: 0
+          enterScale: 1.3
+          exitDuration: $duration.d2
+          exitTimingFunction: $timing-function.exit
+          exitOpacity: 0
+        header:
+          gap: $dimension.x1_5
+          paddingX: $dimension.x5
+          paddingTop: $dimension.x5
+        footer:
+          gap: $dimension.x2
+          paddingX: $dimension.x5
+          paddingTop: $dimension.x4
+          paddingBottom: $dimension.x5
+        title:
+          color: $color.fg.neutral
+          fontSize: $font-size.t7
+          lineHeight: $line-height.t7
+          fontWeight: $font-weight.bold
+        description:
+          color: $color.fg.neutral
+          fontSize: $font-size.t5
+          lineHeight: $line-height.t5
+          fontWeight: $font-weight.regular

package/components/date-picker.yaml

@@ -0,0 +1,184 @@
+# yaml-language-server: $schema=./schema.json
+kind: ComponentSpec
+metadata:
+  id: date-picker
+  name: Date Picker
+data:
+  schema:
+    slots:
+      root:
+        properties:
+          color:
+            type: color
+      header:
+        properties:
+          height:
+            type: dimension
+      headerLabel:
+        properties:
+          paddingX:
+            type: dimension
+          gap:
+            type: dimension
+          iconSize:
+            type: dimension
+          fontSize:
+            type: dimension
+          lineHeight:
+            type: dimension
+          fontWeight:
+            type: number
+          color:
+            type: color
+      months:
+        properties:
+          gap:
+            type: dimension
+      continuousScroll:
+        properties:
+          fogHeight:
+            type: dimension
+      weekday:
+        properties:
+          height:
+            type: dimension
+          fontSize:
+            type: dimension
+          lineHeight:
+            type: dimension
+          fontWeight:
+            type: number
+          color:
+            type: color
+      monthLabel:
+        properties:
+          height:
+            type: dimension
+          fontSize:
+            type: dimension
+          lineHeight:
+            type: dimension
+          fontWeight:
+            type: number
+          color:
+            type: color
+      dateCell:
+        properties:
+          minHeight:
+            type: dimension
+      dateVisual:
+        properties:
+          size:
+            type: dimension
+          cornerRadius:
+            type: dimension
+          color:
+            type: color
+      dateContent:
+        properties:
+          fontSize:
+            type: dimension
+          lineHeight:
+            type: dimension
+          fontWeight:
+            type: number
+          color:
+            type: color
+      rangeBackground:
+        properties:
+          color:
+            type: color
+      wheelSelectionIndicator:
+        properties:
+          cornerRadius:
+            type: dimension
+          color:
+            type: color
+      wheelContainer:
+        properties:
+          height:
+            type: dimension
+      wheelItem:
+        properties:
+          paddingX:
+            type: dimension
+          fontSize:
+            type: dimension
+          lineHeight:
+            type: dimension
+          fontWeight:
+            type: number
+          color:
+            type: color
+  definitions:
+    base:
+      enabled:
+        root:
+          color: $color.bg.layer-floating
+        header:
+          height: $dimension.x12
+        headerLabel:
+          paddingX: $dimension.x1
+          gap: $dimension.x1
+          iconSize: $dimension.x5
+          fontSize: $font-size.t5
+          lineHeight: $line-height.t5
+          fontWeight: $font-weight.bold
+          color: $color.fg.neutral
+        months:
+          gap: $dimension.x6
+        continuousScroll:
+          fogHeight: 96px
+        weekday:
+          height: $dimension.x12
+          fontSize: $font-size.t4
+          lineHeight: $line-height.t4
+          fontWeight: $font-weight.medium
+          color: $color.fg.neutral-subtle
+        monthLabel:
+          height: $dimension.x12
+          fontSize: $font-size.t5
+          lineHeight: $line-height.t5
+          fontWeight: $font-weight.bold
+          color: $color.fg.neutral
+        dateCell:
+          minHeight: $dimension.x12
+        dateVisual:
+          size: 42px
+          cornerRadius: $radius.full
+          color: $color.bg.transparent
+        dateContent:
+          fontSize: $font-size.t5
+          lineHeight: $line-height.t5
+          fontWeight: $font-weight.medium
+          color: $color.fg.neutral-muted
+        rangeBackground:
+          color: $color.bg.neutral-weak
+        wheelSelectionIndicator:
+          cornerRadius: $radius.r2
+          color: $color.bg.neutral-weak
+        wheelContainer:
+          # 44px × 7개 항목(308px)을 중앙 정렬하고 위아래 14px 여백을 둡니다.
+          height: 336px
+        wheelItem:
+          paddingX: $dimension.x4
+          fontSize: $font-size.t10-static
+          lineHeight: $line-height.t10-static
+          fontWeight: $font-weight.medium
+          color: $color.fg.disabled
+      pressed:
+        dateVisual:
+          color: $color.bg.transparent-pressed
+      today:
+        dateVisual:
+          color: $color.bg.neutral-weak
+      selected:
+        dateVisual:
+          color: $color.bg.neutral-inverted
+        dateContent:
+          color: $color.fg.neutral-inverted
+        wheelItem:
+          color: $color.fg.neutral
+      disabled:
+        dateContent:
+          color: $color.fg.disabled

package/components/dialog-close-button.yaml

@@ -0,0 +1,47 @@
+# yaml-language-server: $schema=./schema.json
+kind: ComponentSpec
+metadata:
+  id: dialog-close-button
+  name: Dialog Close Button
+data:
+  schema:
+    slots:
+      root:
+        properties:
+          color:
+            type: color
+          cornerRadius:
+            type: dimension
+          size:
+            type: dimension
+          colorDuration:
+            type: duration
+          colorTimingFunction:
+            type: cubicBezier
+      icon:
+        properties:
+          color:
+            type: color
+          size:
+            type: dimension
+          colorDuration:
+            type: duration
+          colorTimingFunction:
+            type: cubicBezier
+  definitions:
+    base:
+      enabled:
+        root:
+          color: $color.bg.transparent
+          cornerRadius: $radius.r3
+          size: 52px
+          colorDuration: $duration.color-transition
+          colorTimingFunction: $timing-function.easing
+        icon:
+          color: $color.fg.neutral-subtle
+          size: 22px
+          colorDuration: $duration.color-transition
+          colorTimingFunction: $timing-function.easing
+      pressed:
+        root:
+          color: $color.bg.transparent-pressed

package/components/dialog.yaml

@@ -28,12 +28,16 @@ data:
             type: color
           cornerRadius:
             type: dimension
-          marginX:
-            type: dimension
-          marginY:
-            type: dimension
           maxWidth:
             type: dimension
+          widthFraction:
+            type: number
+            description: viewport width 또는 parent width에 대한 비율입니다. viewport `md` 미만에서 적용합니다.
+          maxHeightFraction:
+            type: number
+            description: viewport height 또는 parent height에 대한 최대 비율입니다.
+          marginX:
+            type: dimension
           enterDuration:
             type: duration
           enterTimingFunction:
@@ -56,10 +60,30 @@ data:
             type: dimension
           paddingTop:
             type: dimension
-      footer:
+          paddingBottom:
+            type: dimension
+          closeButtonGap:
+            type: dimension
+            description: closeButton이 표시되는 경우 paddingRight에 추가되는 여백입니다.
+      body:
         properties:
-          gap:
+          paddingX:
+            type: dimension
+          paddingBottom:
             type: dimension
+            description: body의 하단 padding이며, 동시에 하단 scroll fog 그라데이션의 높이로도 사용됩니다. 본문이 오버플로되어 스크롤 가능한 경우에만 적용됩니다.
+          strokeWidth:
+            type: dimension
+            description: 본문이 스크롤된(scrolled) 상태에서 body 상단에 나타나는 divider의 두께입니다.
+          strokeColor:
+            type: color
+            description: 본문이 스크롤된(scrolled) 상태에서 body 상단에 나타나는 divider의 색상입니다.
+          strokeDuration:
+            type: duration
+          strokeTimingFunction:
+            type: cubicBezier
+      footer:
+        properties:
           paddingX:
             type: dimension
           paddingTop:
@@ -86,6 +110,12 @@ data:
             type: dimension
           fontWeight:
             type: number
+      closeButton:
+        properties:
+          fromTop:
+            type: dimension
+          fromRight:
+            type: dimension
   definitions:
     base:
       enabled:
@@ -100,9 +130,9 @@ data:
         content:
           color: $color.bg.layer-floating
           cornerRadius: $radius.r5
-          marginX: $dimension.x8
-          marginY: $dimension.x16
-          maxWidth: 272px
+          widthFraction: 0.9
+          maxHeightFraction: 0.8
+          marginX: $dimension.x5
           enterDuration: $duration.d4
           enterTimingFunction: $timing-function.enter-expressive
           enterOpacity: 0
@@ -112,20 +142,41 @@ data:
           exitOpacity: 0
         header:
           gap: $dimension.x1_5
-          paddingX: $dimension.x5
-          paddingTop: $dimension.x5
+          paddingX: $dimension.x6
+          paddingTop: $dimension.x6
+          paddingBottom: $dimension.x4
+          closeButtonGap: $dimension.x1_5
+        body:
+          paddingX: $dimension.x6
+          paddingBottom: $dimension.x12
+          strokeDuration: $duration.color-transition
+          strokeTimingFunction: $timing-function.easing
         footer:
-          gap: $dimension.x2
-          paddingX: $dimension.x5
+          paddingX: $dimension.x6
           paddingTop: $dimension.x4
-          paddingBottom: $dimension.x5
+          paddingBottom: $dimension.x6
         title:
           color: $color.fg.neutral
-          fontSize: $font-size.t7
-          lineHeight: $line-height.t7
+          fontSize: $font-size.t8
+          lineHeight: $line-height.t8
           fontWeight: $font-weight.bold
         description:
-          color: $color.fg.neutral
+          color: $color.fg.neutral-muted
           fontSize: $font-size.t5
           lineHeight: $line-height.t5
           fontWeight: $font-weight.regular
+        closeButton:
+          fromTop: $dimension.x7
+          fromRight: $dimension.x6
+      scrolled:
+        body:
+          strokeColor: $color.stroke.neutral-muted
+          strokeWidth: 1px
+    size=medium:
+      enabled:
+        content:
+          maxWidth: 480px
+    size=large:
+      enabled:
+        content:
+          maxWidth: 800px

package/components/quantity-picker-button.yaml

@@ -0,0 +1,93 @@
+# yaml-language-server: $schema=./schema.json
+kind: ComponentSpec
+metadata:
+  id: quantity-picker-button
+  name: Quantity Picker Button
+data:
+  schema:
+    slots:
+      root:
+        properties:
+          size:
+            type: dimension
+          cornerRadius:
+            type: dimension
+          color:
+            type: color
+          colorDuration:
+            type: duration
+          colorTimingFunction:
+            type: cubicBezier
+      icon:
+        properties:
+          size:
+            type: dimension
+          color:
+            type: color
+      progressCircle:
+        properties:
+          trackColor:
+            type: color
+          rangeColor:
+            type: color
+          size:
+            type: dimension
+          thickness:
+            type: dimension
+    variants:
+      size:
+        values:
+          small: {}
+          medium: {}
+          large: {}
+  definitions:
+    base:
+      enabled:
+        root:
+          color: $color.bg.transparent
+          colorDuration: $duration.color-transition
+          colorTimingFunction: $timing-function.easing
+        icon:
+          color: $color.fg.neutral
+        progressCircle:
+          trackColor: $color.palette.gray-500
+          rangeColor: $color.fg.neutral
+      pressed:
+        root:
+          color: $color.bg.transparent-pressed
+      disabled:
+        icon:
+          color: $color.fg.disabled
+      loading:
+        root:
+          color: $color.bg.transparent-pressed
+    size=small:
+      enabled:
+        root:
+          size: $dimension.x9
+          cornerRadius: $radius.r2
+        icon:
+          size: 16px
+        progressCircle:
+          size: 16px
+          thickness: 2px
+    size=medium:
+      enabled:
+        root:
+          size: $dimension.x10
+          cornerRadius: $radius.r2
+        icon:
+          size: 18px
+        progressCircle:
+          size: 18px
+          thickness: 2px
+    size=large:
+      enabled:
+        root:
+          size: $dimension.x13
+          cornerRadius: $radius.r3
+        icon:
+          size: 22px
+        progressCircle:
+          size: 22px
+          thickness: 2px