@seed-design/rootage-artifacts 1.2.12 → 2.1.0

package/components/menu.yaml

@@ -0,0 +1,124 @@
+# yaml-language-server: $schema=./schema.json
+kind: ComponentSpec
+metadata:
+  id: menu
+  name: Menu
+data:
+  schema:
+    slots:
+      root:
+        properties:
+          cornerRadius:
+            type: dimension
+          color:
+            type: color
+          shadow:
+            type: shadow
+          paddingY:
+            type: dimension
+          gap:
+            type: dimension
+          enterDuration:
+            type: duration
+          enterTimingFunction:
+            type: cubicBezier
+          enterScale:
+            type: number
+          enterOpacity:
+            type: number
+          exitDuration:
+            type: duration
+          exitTimingFunction:
+            type: cubicBezier
+          exitScale:
+            type: number
+          exitOpacity:
+            type: number
+          gutter:
+            type: dimension
+            description: 트리거와 메뉴 사이의 간격을 정의합니다.
+          overflowPadding:
+            type: dimension
+            description: 메뉴와 뷰포트 경계 사이의 최소 간격을 정의합니다.
+          maxHeight:
+            type: dimension
+          width:
+            type: dimension
+      group:
+        properties: {}
+      groupLabel:
+        properties:
+          color:
+            type: color
+          paddingX:
+            type: dimension
+          paddingY:
+            type: dimension
+          fontSize:
+            type: dimension
+          lineHeight:
+            type: dimension
+          fontWeight:
+            type: number
+      divider:
+        properties:
+          marginX:
+            type: dimension
+          height:
+            type: dimension
+          color:
+            type: color
+    variants:
+      size:
+        values:
+          medium:
+            description: 뷰포트 너비와 관계없이 사용할 수 있습니다.
+          small:
+            description: Breakpoint `lg` 이상(데스크톱)에서만 사용하고, 모바일에서는 사용하지 않습니다. 정밀한 선택이 가능한 마우스 입력 환경에서 사이즈를 더 작게 만들고자 할 때 사용합니다.
+
+  definitions:
+    base:
+      enabled:
+        root:
+          cornerRadius: $radius.r5
+          color: $color.bg.layer-floating
+          shadow: $shadow.s3
+          enterDuration: $duration.d3
+          enterTimingFunction: $timing-function.enter
+          enterScale: 0.95
+          enterOpacity: 0
+          exitDuration: $duration.d2
+          exitTimingFunction: $timing-function.exit
+          exitScale: 0.95
+          exitOpacity: 0
+          paddingY: $dimension.x2
+          gap: $dimension.x2
+          gutter: $dimension.x2
+          overflowPadding: $dimension.x2
+          maxHeight: 480px
+        groupLabel:
+          color: $color.fg.neutral-subtle
+        divider:
+          marginX: $dimension.x4
+          height: 1px
+          color: $color.stroke.neutral-muted
+    size=medium:
+      enabled:
+        root:
+          width: 240px
+        groupLabel:
+          paddingY: $dimension.x2_5
+          paddingX: $dimension.x4
+          fontSize: $font-size.t4
+          lineHeight: $line-height.t4
+          fontWeight: $font-weight.medium
+    size=small:
+      enabled:
+        root:
+          width: 200px
+        groupLabel:
+          paddingY: $dimension.x2
+          paddingX: $dimension.x4
+          fontSize: $font-size.t3
+          lineHeight: $line-height.t3
+          fontWeight: $font-weight.regular

package/components/side-panel-close-button.yaml

@@ -0,0 +1,44 @@
+# yaml-language-server: $schema=./schema.json
+kind: ComponentSpec
+metadata:
+  id: side-panel-close-button
+  name: Side Panel Close Button
+data:
+  schema:
+    slots:
+      root:
+        properties:
+          color:
+            type: color
+          cornerRadius:
+            type: dimension
+          targetSize:
+            type: dimension
+          size:
+            type: dimension
+      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
+          targetSize: 52px
+          size: 22px
+        icon:
+          color: $color.fg.neutral-subtle
+          size: 22px
+          colorDuration: $duration.color-transition
+          colorTimingFunction: $timing-function.easing
+      pressed:
+        icon:
+          color: $color.fg.neutral

package/components/side-panel.yaml

@@ -0,0 +1,170 @@
+# yaml-language-server: $schema=./schema.json
+kind: ComponentSpec
+metadata:
+  id: side-panel
+  name: Side Panel
+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
+          width:
+            type: dimension
+          widthFraction:
+            type: number
+            description: viewport 또는 parent width에 대한 mobile content width 비율입니다.
+          enterDuration:
+            type: duration
+          enterTimingFunction:
+            type: cubicBezier
+          exitDuration:
+            type: duration
+          exitTimingFunction:
+            type: cubicBezier
+        description: 하단 safe-area inset을 content의 하단 패딩으로 적용합니다.
+      header:
+        properties:
+          gap:
+            type: dimension
+          minHeight:
+            type: dimension
+          paddingX:
+            type: dimension
+          paddingTop:
+            type: dimension
+            description: 이 값은 상단 safe-area inset과 합산하여 적용합니다.
+          paddingBottom:
+            type: dimension
+      body:
+        properties:
+          paddingX:
+            type: dimension
+          paddingBottom:
+            type: dimension
+            description: body의 하단 padding이며, 동시에 하단 scroll fog 그라데이션의 높이로도 사용됩니다.
+          stroke:
+            type: color
+            description: 본문이 스크롤된(scrolled) 상태에서 body 상단에 나타나는 divider의 색상입니다.
+          transitionDuration:
+            type: duration
+          transitionTimingFunction:
+            type: cubicBezier
+      footer:
+        properties:
+          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
+      closeButton:
+        properties:
+          fromTop:
+            type: dimension
+          fromRight:
+            type: dimension
+    variants:
+      size:
+        values:
+          small: {}
+          medium: {}
+          large: {}
+  definitions:
+    base:
+      enabled:
+        backdrop:
+          color: $color.bg.overlay
+          enterDuration: $duration.d6
+          enterTimingFunction: $timing-function.enter
+          enterOpacity: 0
+          exitDuration: $duration.d6
+          exitTimingFunction: $timing-function.exit
+          exitOpacity: 0
+        content:
+          color: $color.bg.layer-floating
+          widthFraction: 0.8
+          enterDuration: $duration.d6
+          enterTimingFunction: $timing-function.enter-expressive
+          exitDuration: $duration.d6
+          exitTimingFunction: $timing-function.exit-expressive
+        header:
+          gap: $dimension.x1_5
+          minHeight: 70px
+          paddingX: $dimension.x6
+          paddingTop: $dimension.x6
+          paddingBottom: $dimension.x4
+        body:
+          paddingX: $dimension.x6
+          paddingBottom: $dimension.x12
+          transitionDuration: $duration.color-transition
+          transitionTimingFunction: $timing-function.easing
+        footer:
+          paddingX: $dimension.x6
+          paddingTop: $dimension.x4
+          paddingBottom: $dimension.x6
+        title:
+          color: $color.fg.neutral
+          fontSize: $font-size.t8
+          lineHeight: $line-height.t8
+          fontWeight: $font-weight.bold
+        description:
+          color: $color.fg.neutral-muted
+          fontSize: $font-size.t5
+          lineHeight: $line-height.t5
+          fontWeight: $font-weight.regular
+        closeButton:
+          fromTop: 28px
+          fromRight: 24px
+      scrolled:
+        body:
+          stroke: $color.stroke.neutral-muted
+    size=small:
+      enabled:
+        content:
+          width: 480px
+    size=medium:
+      enabled:
+        content:
+          width: 720px
+    size=large:
+      enabled:
+        content:
+          width: 960px

package/components/text-input.yaml

@@ -28,7 +28,8 @@ data:
             type: color
           strokeDuration:
             type: duration
-            description: enabled 상태의 stroke 위에 focused/invalid 상태의 stroke가 fade in/out 되는 데에 걸리는 시간입니다. stroke 두께나 색상 자체를 transition하지 않습니다.
+            description: enabled 상태의 stroke 위에 focused/invalid 상태의 stroke가 fade in/out 되는 데에
+              걸리는 시간입니다. stroke 두께나 색상 자체를 transition하지 않습니다.
           strokeTimingFunction:
             type: cubicBezier
       value:
@@ -90,6 +91,12 @@ data:
             description: 기본 스타일입니다.
           underline:
             description: 화면에 하나의 Input만 있는 경우 사용을 권장합니다.
+      size:
+        values:
+          large:
+            description: 뷰포트 너비와 관계없이 사용할 수 있습니다.
+          medium:
+            description: Breakpoint `lg` 이상(데스크톱)에서만 사용하고, 모바일에서는 사용하지 않습니다. 정밀한 선택이 가능한 마우스 입력 환경에서 사이즈를 더 작게 만들고자 할 때 사용합니다.
   definitions:
     base:
       enabled:
@@ -104,12 +111,12 @@ data:
           color: $color.fg.placeholder
           fontWeight: $font-weight.regular
         prefixText:
-          color: $color.fg.neutral-muted
+          color: $color.fg.neutral-subtle
           fontWeight: $font-weight.regular
         prefixIcon:
           color: $color.fg.neutral-muted
         suffixText:
-          color: $color.fg.neutral-muted
+          color: $color.fg.neutral-subtle
           fontWeight: $font-weight.regular
         suffixIcon:
           color: $color.fg.neutral-muted
@@ -127,11 +134,17 @@ data:
           color: $color.fg.disabled
         placeholder:
           color: $color.fg.disabled
+        prefixText:
+          color: $color.fg.disabled
+        prefixIcon:
+          color: $color.fg.disabled
+        suffixText:
+          color: $color.fg.disabled
+        suffixIcon:
+          color: $color.fg.disabled
     variant=outline:
       enabled:
         root:
-          cornerRadius: $radius.r3
-          paddingX: $dimension.x4
           strokeWidth: 1px
       focused:
         root:
@@ -150,6 +163,8 @@ data:
         root:
           gap: $dimension.x2_5
           minHeight: $dimension.x13
+          cornerRadius: $radius.r3
+          paddingX: $dimension.x4
         value:
           fontSize: $font-size.t5
           lineHeight: $line-height.t5
@@ -169,8 +184,10 @@ data:
     variant=outline,size=medium:
       enabled:
         root:
-          gap: $dimension.x1_5
+          gap: $dimension.x2
           minHeight: $dimension.x10
+          cornerRadius: $radius.r2
+          paddingX: $dimension.x3_5
         value:
           fontSize: $font-size.t4
           lineHeight: $line-height.t4
@@ -189,11 +206,26 @@ data:
           size: $dimension.x4
 
     variant=underline:
+      enabled:
+        root:
+          strokeBottomWidth: 1px
+      focused:
+        root:
+          strokeBottomWidth: 2px
+      invalid:
+        root:
+          strokeBottomWidth: 2px
+      readonly:
+        value:
+          color: $color.fg.neutral-muted
+        placeholder:
+          color: $color.fg.neutral-muted
+    variant=underline,size=large:
       enabled:
         root:
           gap: $dimension.x2_5
           minHeight: $dimension.x10
-          strokeBottomWidth: 1px
+          paddingY: $dimension.x2
         value:
           fontSize: $font-size.t6
           lineHeight: $line-height.t6
@@ -210,25 +242,36 @@ data:
           lineHeight: $line-height.t6
         suffixIcon:
           size: $dimension.x6
-      focused:
-        root:
-          strokeBottomWidth: 2px
-      invalid:
+    variant=underline,size=medium:
+      enabled:
         root:
-          strokeBottomWidth: 2px
-      readonly:
+          gap: $dimension.x2
+          minHeight: 34px
+          paddingY: $dimension.x1_5
         value:
-          color: $color.fg.neutral-muted
+          fontSize: $font-size.t5
+          lineHeight: $line-height.t5
         placeholder:
-          color: $color.fg.neutral-muted
+          fontSize: $font-size.t5
+          lineHeight: $line-height.t5
+        prefixText:
+          fontSize: $font-size.t5
+          lineHeight: $line-height.t5
+        prefixIcon:
+          size: $dimension.x5
+        suffixText:
+          fontSize: $font-size.t5
+          lineHeight: $line-height.t5
+        suffixIcon:
+          size: $dimension.x5
     type=singleline: {}
     type=multiline,size=large:
       enabled:
         root:
-          minHeight: 95px
+          minHeight: 94px
           paddingY: $dimension.x3_5
     type=multiline,size=medium:
       enabled:
         root:
-          minHeight: 90px
-          paddingY: 11px
+          minHeight: 82px
+          paddingY: $dimension.x3