@seed-design/rootage-artifacts 2.2.0 → 2.3.0

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

package/components/quantity-picker.yaml

@@ -0,0 +1,101 @@
+# yaml-language-server: $schema=./schema.json
+kind: ComponentSpec
+metadata:
+  id: quantity-picker
+  name: Quantity Picker
+data:
+  schema:
+    slots:
+      root:
+        properties:
+          height:
+            type: dimension
+          cornerRadius:
+            type: dimension
+          color:
+            type: color
+          strokeWidth:
+            type: dimension
+          strokeColor:
+            type: color
+      valueDisplay:
+        properties:
+          paddingX:
+            type: dimension
+          fontSize:
+            type: dimension
+          lineHeight:
+            type: dimension
+          fontWeight:
+            type: number
+          color:
+            type: color
+      divider:
+        properties:
+          width:
+            type: dimension
+          height:
+            type: dimension
+          color:
+            type: color
+    variants:
+      size:
+        values:
+          small: {}
+          medium: {}
+          large: {}
+  definitions:
+    base:
+      enabled:
+        root:
+          color: $color.bg.layer-default
+          strokeWidth: 1px
+          strokeColor: $color.stroke.neutral-weak
+        valueDisplay:
+          fontWeight: $font-weight.medium
+          color: $color.fg.neutral
+        divider:
+          color: $color.stroke.neutral-subtle
+      invalid:
+        root:
+          strokeWidth: 2px
+          strokeColor: $color.stroke.critical-solid
+      disabled:
+        valueDisplay:
+          color: $color.fg.disabled
+    size=small:
+      enabled:
+        root:
+          height: $dimension.x9
+          cornerRadius: $radius.r2
+        valueDisplay:
+          paddingX: $dimension.x2
+          fontSize: $font-size.t5
+          lineHeight: $line-height.t5
+        divider:
+          width: 1px
+          height: $dimension.x4
+    size=medium:
+      enabled:
+        root:
+          height: $dimension.x10
+          cornerRadius: $radius.r2
+        valueDisplay:
+          paddingX: $dimension.x2
+          fontSize: $font-size.t5
+          lineHeight: $line-height.t5
+        divider:
+          width: 1px
+          height: $dimension.x4
+    size=large:
+      enabled:
+        root:
+          height: $dimension.x13
+          cornerRadius: $radius.r3
+        valueDisplay:
+          paddingX: $dimension.x2
+          fontSize: $font-size.t6
+          lineHeight: $line-height.t6
+        divider:
+          width: 1px
+          height: $dimension.x4

package/components/select-item.yaml

@@ -0,0 +1,141 @@
+# yaml-language-server: $schema=./schema.json
+kind: ComponentSpec
+metadata:
+  id: select-item
+  name: Select Item
+data:
+  schema:
+    slots:
+      root:
+        properties:
+          color:
+            type: color
+          marginX:
+            type: dimension
+          cornerRadius:
+            type: dimension
+          colorDuration:
+            type: duration
+          colorTimingFunction:
+            type: cubicBezier
+          marginDuration:
+            type: duration
+          marginTimingFunction:
+            type: cubicBezier
+          paddingX:
+            type: dimension
+          paddingY:
+            type: dimension
+          gap:
+            type: dimension
+      prefixIcon:
+        properties:
+          size:
+            type: dimension
+          color:
+            type: color
+      body:
+        properties:
+          gap:
+            type: dimension
+      label:
+        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
+      indicator:
+        properties:
+          size:
+            type: dimension
+          color:
+            type: color
+    variants:
+      size:
+        values:
+          large:
+            description: 뷰포트 너비와 관계없이 사용할 수 있습니다.
+          medium:
+            description: Breakpoint `lg` 이상(데스크톱)에서만 사용하고, 모바일에서는 사용하지 않습니다. 정밀한 선택이 가능한 마우스 입력 환경에서 사이즈를 더 작게 만들고자 할 때 사용합니다.
+
+  definitions:
+    base:
+      enabled:
+        root:
+          paddingX: $dimension.x4
+          cornerRadius: $radius.r3
+          colorDuration: $duration.color-transition
+          colorTimingFunction: $timing-function.easing
+          marginDuration: $duration.d3
+          marginTimingFunction: $timing-function.easing
+        prefixIcon:
+          color: $color.fg.neutral
+        body:
+          gap: $dimension.x0_5
+        label:
+          fontWeight: $font-weight.regular
+          color: $color.fg.neutral
+        description:
+          fontWeight: $font-weight.regular
+          color: $color.fg.neutral-subtle
+        indicator:
+          color: $color.fg.neutral
+
+      pressed:
+        root:
+          color: $color.bg.transparent-pressed
+          marginX: $dimension.x2
+
+      disabled:
+        prefixIcon:
+          color: $color.fg.disabled
+        label:
+          color: $color.fg.disabled
+        description:
+          color: $color.fg.disabled
+        indicator:
+          color: $color.fg.disabled
+    size=large:
+      enabled:
+        root:
+          paddingY: $dimension.x3
+          gap: $dimension.x3
+        prefixIcon:
+          size: 22px
+        label:
+          fontSize: $font-size.t5
+          lineHeight: $line-height.t5
+        description:
+          fontSize: $font-size.t3
+          lineHeight: $line-height.t3
+        indicator:
+          size: $dimension.x3_5
+    size=medium:
+      enabled:
+        root:
+          paddingY: $dimension.x2_5
+          gap: $dimension.x2
+        prefixIcon:
+          size: $dimension.x4_5
+        label:
+          fontSize: $font-size.t4
+          lineHeight: $line-height.t4
+        description:
+          fontSize: $font-size.t2
+          lineHeight: $line-height.t2
+        indicator:
+          size: $dimension.x3

package/components/select-trigger.yaml

@@ -0,0 +1,175 @@
+# yaml-language-server: $schema=./schema.json
+kind: ComponentSpec
+metadata:
+  id: select-trigger
+  name: Select Trigger
+data:
+  schema:
+    slots:
+      root:
+        properties:
+          height:
+            type: dimension
+          cornerRadius:
+            type: dimension
+          gap:
+            type: dimension
+          paddingX:
+            type: dimension
+          strokeWidth:
+            type: dimension
+          strokeColor:
+            type: color
+          color:
+            type: color
+          colorDuration:
+            type: duration
+          colorTimingFunction:
+            type: cubicBezier
+          strokeDuration:
+            type: duration
+            description: enabled 상태의 stroke 위에 invalid 상태의 stroke가 fade in/out 되는 데에 걸리는 시간입니다. stroke 두께나 색상 자체를 transition하지 않습니다.
+          strokeTimingFunction:
+            type: cubicBezier
+      value:
+        properties:
+          fontSize:
+            type: dimension
+          lineHeight:
+            type: dimension
+          fontWeight:
+            type: number
+          color:
+            type: color
+      placeholder:
+        properties:
+          fontSize:
+            type: dimension
+          lineHeight:
+            type: dimension
+          fontWeight:
+            type: number
+          color:
+            type: color
+      prefixIcon:
+        properties:
+          size:
+            type: dimension
+          color:
+            type: color
+      suffixIcon:
+        properties:
+          size:
+            type: dimension
+          color:
+            type: color
+          openRotateDuration:
+            type: duration
+          openRotateTimingFunction:
+            type: cubicBezier
+          closeRotateDuration:
+            type: duration
+          closeRotateTimingFunction:
+            type: cubicBezier
+    variants:
+      size:
+        values:
+          large:
+            description: 뷰포트 너비와 관계없이 사용할 수 있습니다.
+          medium:
+            description: Breakpoint `lg` 이상(데스크톱)에서만 사용하고, 모바일에서는 사용하지 않습니다. 정밀한 선택이 가능한 마우스 입력 환경에서 사이즈를 더 작게 만들고자 할 때 사용합니다.
+
+  definitions:
+    base:
+      enabled:
+        root:
+          strokeWidth: 1px
+          strokeColor: $color.stroke.neutral-weak
+
+          color: $color.bg.transparent
+          colorDuration: $duration.color-transition
+          colorTimingFunction: $timing-function.easing
+          strokeDuration: 0.1s
+          strokeTimingFunction: $timing-function.easing
+
+        value:
+          fontWeight: $font-weight.regular
+
+          color: $color.fg.neutral
+
+        placeholder:
+          fontWeight: $font-weight.regular
+          color: $color.fg.placeholder
+
+        prefixIcon:
+          color: $color.fg.neutral-muted
+
+        suffixIcon:
+          color: $color.fg.neutral-muted
+          openRotateDuration: $duration.d3
+          openRotateTimingFunction: $timing-function.easing
+          closeRotateDuration: $duration.d2
+          closeRotateTimingFunction: $timing-function.easing
+
+      pressed:
+        root:
+          color: $color.bg.transparent-pressed
+
+      invalid:
+        root:
+          strokeWidth: 2px
+          strokeColor: $color.stroke.critical-solid
+
+      disabled:
+        root:
+          color: $color.bg.disabled
+        value:
+          color: $color.fg.disabled
+        placeholder:
+          color: $color.fg.disabled
+        prefixIcon:
+          color: $color.fg.disabled
+        suffixIcon:
+          color: $color.fg.disabled
+
+      readonly:
+        root:
+          color: $color.bg.disabled
+        value:
+          color: $color.fg.neutral
+        placeholder:
+          color: $color.fg.placeholder
+    size=large:
+      enabled:
+        root:
+          height: $dimension.x13
+          gap: $dimension.x2_5
+          cornerRadius: $radius.r3
+          paddingX: $dimension.x4
+        value:
+          fontSize: $font-size.t5
+          lineHeight: $line-height.t5
+        placeholder:
+          fontSize: $font-size.t5
+          lineHeight: $line-height.t5
+        prefixIcon:
+          size: $dimension.x5
+        suffixIcon:
+          size: $dimension.x5
+    size=medium:
+      enabled:
+        root:
+          height: $dimension.x10
+          gap: $dimension.x2
+          cornerRadius: $radius.r2
+          paddingX: $dimension.x3_5
+        value:
+          fontSize: $font-size.t4
+          lineHeight: $line-height.t4
+        placeholder:
+          fontSize: $font-size.t4
+          lineHeight: $line-height.t4
+        prefixIcon:
+          size: $dimension.x4
+        suffixIcon:
+          size: $dimension.x4

package/components/select.yaml

@@ -0,0 +1,118 @@
+# yaml-language-server: $schema=./schema.json
+kind: ComponentSpec
+metadata:
+  id: select
+  name: Select
+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
+      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:
+          large:
+            description: 뷰포트 너비와 관계없이 사용할 수 있습니다.
+          medium:
+            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=large:
+      enabled:
+        groupLabel:
+          paddingY: $dimension.x2_5
+          paddingX: $dimension.x4
+          fontSize: $font-size.t4
+          lineHeight: $line-height.t4
+          fontWeight: $font-weight.medium
+    size=medium:
+      enabled:
+        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

@@ -45,5 +45,3 @@ data:
       pressed:
         root:
           color: $color.bg.transparent-pressed
-        icon:
-          color: $color.fg.neutral

package/components/slider.yaml

@@ -161,6 +161,8 @@ data:
           fontSize: $font-size.t3
           lineHeight: $line-height.t3
       disabled:
+        track:
+          color: $color.bg.disabled
         range:
           color: $color.fg.disabled
         thumb:

package/package.json

@@ -1,11 +1,12 @@
 {
   "name": "@seed-design/rootage-artifacts",
-  "version": "2.2.0",
+  "version": "2.3.0",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/daangn/seed-design.git",
     "directory": "packages/rootage"
   },
+  "license": "Apache-2.0",
   "scripts": {
     "rootage:generate": "bun rootage json-schema ./components && bun rootage json ./__generated__"
   },
@@ -13,7 +14,9 @@
   "files": [
     "*.yaml",
     "components/*.yaml",
-    "__generated__/**/*.json"
+    "__generated__/**/*.json",
+    "LICENSE",
+    "NOTICE"
   ],
   "exports": {
     ".": "./package.json",