@seed-design/rootage-artifacts 0.0.0-alpha-20260414104312

package/components/reaction-button.yaml

@@ -0,0 +1,161 @@
+# yaml-language-server: $schema=./schema.json
+kind: ComponentSpec
+metadata:
+  id: reaction-button
+  name: Reaction Button
+data:
+  schema:
+    slots:
+      root:
+        properties:
+          color:
+            type: color
+          colorDuration:
+            type: duration
+          colorTimingFunction:
+            type: cubicBezier
+          strokeColor:
+            type: color
+          strokeWidth:
+            type: dimension
+          minHeight:
+            type: dimension
+          cornerRadius:
+            type: dimension
+          gap:
+            type: dimension
+          paddingX:
+            type: dimension
+          paddingY:
+            type: dimension
+      label:
+        properties:
+          color:
+            type: color
+          fontWeight:
+            type: number
+          fontSize:
+            type: dimension
+          lineHeight:
+            type: dimension
+      count:
+        properties:
+          color:
+            type: color
+          fontWeight:
+            type: number
+          fontSize:
+            type: dimension
+          lineHeight:
+            type: dimension
+      prefixIcon:
+        properties:
+          color:
+            type: color
+          size:
+            type: dimension
+      progressCircle:
+        properties:
+          trackColor:
+            type: color
+          rangeColor:
+            type: color
+          size:
+            type: dimension
+          thickness:
+            type: dimension
+  definitions:
+    base:
+      enabled:
+        root:
+          strokeColor: $color.stroke.neutral-muted
+          strokeWidth: 1px
+          color: $color.bg.transparent
+          colorDuration: $duration.color-transition
+          colorTimingFunction: $timing-function.easing
+        label:
+          color: $color.fg.neutral
+          fontWeight: $font-weight.medium
+        count:
+          color: $color.fg.neutral
+          fontWeight: $font-weight.bold
+        prefixIcon:
+          color: $color.fg.neutral
+        progressCircle:
+          trackColor: $color.palette.gray-500
+          rangeColor: $color.fg.neutral
+      pressed:
+        root:
+          color: $color.bg.transparent-pressed
+      selected:
+        root:
+          color: $color.bg.transparent
+          strokeColor: $color.stroke.brand-weak
+          strokeWidth: 1px
+        label:
+          color: $color.fg.brand
+        count:
+          color: $color.fg.brand
+        prefixIcon:
+          color: $color.fg.brand
+        progressCircle:
+          trackColor: $color.palette.carrot-200
+          rangeColor: $color.fg.brand
+      selected,pressed:
+        root:
+          color: $color.bg.transparent-pressed
+      disabled:
+        root:
+          color: $color.bg.disabled
+          strokeWidth: 0px
+        label:
+          color: $color.fg.disabled
+        count:
+          color: $color.fg.disabled
+        prefixIcon:
+          color: $color.fg.disabled
+      loading:
+        root:
+          color: $color.bg.neutral-weak-pressed
+      selected,loading:
+        root:
+          color: $color.bg.transparent-pressed
+          strokeWidth: 1px
+    size=xsmall:
+      enabled:
+        root:
+          minHeight: $dimension.x8
+          cornerRadius: $radius.full
+          gap: $dimension.x1
+          paddingX: $dimension.x3
+          paddingY: $dimension.x1_5
+        prefixIcon:
+          size: 18px
+        label:
+          fontSize: $font-size.t3
+          lineHeight: $line-height.t3
+        count:
+          fontSize: $font-size.t3
+          lineHeight: $line-height.t3
+        progressCircle:
+          size: 14px
+          thickness: 2px
+    size=small:
+      enabled:
+        root:
+          minHeight: $dimension.x9
+          cornerRadius: $radius.full
+          gap: $dimension.x1
+          paddingX: $dimension.x3_5
+          paddingY: $dimension.x2
+        prefixIcon:
+          size: 18px
+        label:
+          fontSize: $font-size.t3
+          lineHeight: $line-height.t3
+        count:
+          fontSize: $font-size.t3
+          lineHeight: $line-height.t3
+        progressCircle:
+          size: 14px
+          thickness: 2px

package/components/scroll-fog.yaml

@@ -0,0 +1,23 @@
+# yaml-language-server: $schema=./schema.json
+kind: ComponentSpec
+metadata:
+  id: scroll-fog
+  name: Scroll Fog
+data:
+  schema:
+    slots:
+      root:
+        properties:
+          fromColor:
+            type: color
+          toColor:
+            type: color
+          size:
+            type: dimension
+  definitions:
+    base:
+      enabled:
+        root:
+          fromColor: "#00000000"
+          toColor: "#000000ff"
+          size: 20px

package/components/segmented-control-indicator.yaml

@@ -0,0 +1,38 @@
+# yaml-language-server: $schema=./schema.json
+kind: ComponentSpec
+metadata:
+  id: segmented-control-indicator
+  name: Segmented Control Indicator
+data:
+  schema:
+    slots:
+      root:
+        properties:
+          color:
+            type: color
+          cornerRadius:
+            type: dimension
+          strokeWidth:
+            type: dimension
+          strokeColor:
+            type: color
+          transformDuration:
+            type: duration
+          transformTimingFunction:
+            type: cubicBezier
+  definitions:
+    base:
+      enabled:
+        root:
+          color: $color.palette.gray-00
+          strokeColor: $color.stroke.neutral-muted
+          strokeWidth: 1px
+          cornerRadius: $radius.full
+          transformDuration: $duration.d4
+          transformTimingFunction: $timing-function.easing
+      pressed:
+        root:
+          color: $color.palette.gray-100
+      disabled:
+        root:
+          color: $color.bg.disabled

package/components/segmented-control-item.yaml

@@ -0,0 +1,76 @@
+# yaml-language-server: $schema=./schema.json
+kind: ComponentSpec
+metadata:
+  id: segmented-control-item
+  name: Segmented Control Item
+data:
+  schema:
+    slots:
+      root:
+        properties:
+          minWidth:
+            type: dimension
+          minHeight:
+            type: dimension
+          cornerRadius:
+            type: dimension
+          paddingX:
+            type: dimension
+          paddingY:
+            type: dimension
+          gap:
+            type: dimension
+          color:
+            type: color
+          colorDuration:
+            type: duration
+          colorTimingFunction:
+            type: cubicBezier
+          strokeWidth:
+            type: dimension
+          strokeColor:
+            type: color
+      label:
+        properties:
+          fontSize:
+            type: dimension
+          lineHeight:
+            type: dimension
+          fontWeight:
+            type: number
+          color:
+            type: color
+          colorDuration:
+            type: duration
+          colorTimingFunction:
+            type: cubicBezier
+  definitions:
+    base:
+      enabled:
+        root:
+          minWidth: 86px
+          minHeight: 34px
+          paddingX: $dimension.x6
+          paddingY: $dimension.x1_5
+          cornerRadius: $radius.full
+          gap: $dimension.x1_5
+          colorDuration: $duration.color-transition
+          colorTimingFunction: $timing-function.easing
+        label:
+          fontSize: $font-size.t5
+          lineHeight: $line-height.t5
+          fontWeight: $font-weight.bold
+          color: $color.fg.neutral-subtle
+          colorDuration: $duration.color-transition
+          colorTimingFunction: $timing-function.easing
+      pressed:
+        root:
+          color: $color.bg.neutral-weak-pressed
+          strokeWidth: 1px
+          strokeColor: $color.stroke.neutral-muted
+      selected:
+        label:
+          color: $color.fg.neutral
+      disabled:
+        label:
+          color: $color.fg.disabled

package/components/segmented-control.yaml

@@ -0,0 +1,23 @@
+# yaml-language-server: $schema=./schema.json
+kind: ComponentSpec
+metadata:
+  id: segmented-control
+  name: Segmented Control
+data:
+  schema:
+    slots:
+      root:
+        properties:
+          padding:
+            type: dimension
+          cornerRadius:
+            type: dimension
+          color:
+            type: color
+  definitions:
+    base:
+      enabled:
+        root:
+          padding: $dimension.x1
+          cornerRadius: $radius.full
+          color: $color.bg.neutral-weak-alpha

package/components/select-box-checkmark.yaml

@@ -0,0 +1,52 @@
+# yaml-language-server: $schema=./schema.json
+kind: ComponentSpec
+metadata:
+  id: select-box-checkmark
+  name: Select Box Checkmark
+data:
+  schema:
+    slots:
+      root:
+        properties:
+          size:
+            type: dimension
+      icon:
+        properties:
+          size:
+            type: dimension
+          color:
+            type: color
+          colorDuration:
+            type: duration
+          colorTimingFunction:
+            type: cubicBezier
+  definitions:
+    base:
+      enabled:
+        root:
+          size: $dimension.x5
+        icon:
+          size: 15px
+          color: $color.fg.placeholder
+          colorDuration: $duration.color-transition
+          colorTimingFunction: $timing-function.easing
+
+      pressed:
+        icon:
+          color: $color.fg.neutral-subtle
+
+      enabled,selected:
+        icon:
+          color: $color.fg.neutral
+
+      enabled,selected,pressed:
+        icon:
+          color: $color.fg.neutral # being obvious
+
+      disabled:
+        icon:
+          color: $color.fg.disabled
+
+      disabled,selected:
+        icon:
+          color: $color.fg.disabled # being obvious

package/components/select-box-group.yaml

@@ -0,0 +1,20 @@
+# yaml-language-server: $schema=./schema.json
+kind: ComponentSpec
+metadata:
+  id: select-box-group
+  name: Select Box Group
+data:
+  schema:
+    slots:
+      root:
+        properties:
+          gapX:
+            type: dimension
+          gapY:
+            type: dimension
+  definitions:
+    base:
+      enabled:
+        root:
+          gapX: $dimension.x3
+          gapY: $dimension.spacing-y.component-default

package/components/select-box.yaml

@@ -0,0 +1,176 @@
+# yaml-language-server: $schema=./schema.json
+kind: ComponentSpec
+metadata:
+  id: select-box
+  name: Select Box
+data:
+  schema:
+    slots:
+      root:
+        properties:
+          cornerRadius:
+            type: dimension
+          strokeWidth:
+            type: dimension
+          strokeColor:
+            type: color
+          color:
+            type: color
+          colorDuration:
+            type: duration
+          colorTimingFunction:
+            type: cubicBezier
+          strokeDuration:
+            type: duration
+            description: enabled 상태의 stroke 위에 selected 상태의 stroke가 fade in/out 되는 데에 걸리는 시간입니다. stroke 두께나 색상 자체를 transition하지 않습니다.
+          strokeTimingFunction:
+            type: cubicBezier
+      trigger:
+        properties:
+          gap:
+            type: dimension
+          paddingLeft:
+            type: dimension
+          paddingRight:
+            type: dimension
+          paddingX:
+            type: dimension
+          paddingY:
+            type: dimension
+      content:
+        properties:
+          gap:
+            type: dimension
+      prefixIcon:
+        properties:
+          color:
+            type: color
+          size:
+            type: dimension
+      body:
+        properties:
+          gap:
+            type: dimension
+          paddingRight:
+            type: dimension
+      label:
+        properties:
+          gap:
+            type: dimension
+          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
+      footer:
+        properties:
+          expandHeightDuration:
+            type: duration
+            description: 열릴 때는 천천히 펼쳐지고 빠르게 fade in됩니다.
+          expandHeightTimingFunction:
+            type: cubicBezier
+          expandOpacityDuration:
+            type: duration
+            description: 열릴 때는 천천히 펼쳐지고 빠르게 fade in됩니다.
+          expandOpacityTimingFunction:
+            type: cubicBezier
+          collapseHeightDuration:
+            type: duration
+            description: 닫힐 때는 빠르게 접히고 천천히 fade out됩니다.
+          collapseHeightTimingFunction:
+            type: cubicBezier
+          collapseOpacityDuration:
+            type: duration
+            description: 닫힐 때는 빠르게 접히고 천천히 fade out됩니다.
+          collapseOpacityTimingFunction:
+            type: cubicBezier
+  definitions:
+    base:
+      enabled:
+        root:
+          cornerRadius: $radius.r3
+          color: $color.bg.transparent
+          strokeColor: $color.stroke.neutral-muted
+          strokeWidth: 1px
+          colorDuration: $duration.color-transition
+          colorTimingFunction: $timing-function.easing
+          strokeDuration: 0.1s
+          strokeTimingFunction: $timing-function.easing
+        trigger:
+          gap: $dimension.x1_5
+        prefixIcon:
+          color: $color.fg.neutral
+          size: 22px
+        body:
+          gap: $dimension.x0_5
+          paddingRight: $dimension.x1
+        label:
+          gap: $dimension.x1 # might have prefix/suffix
+          color: $color.fg.neutral
+          fontSize: $font-size.t5
+          lineHeight: $line-height.t5
+          fontWeight: $font-weight.medium
+        description:
+          color: $color.fg.neutral-muted
+          fontSize: $font-size.t3
+          lineHeight: $line-height.t3
+          fontWeight: $font-weight.regular
+        footer:
+          expandHeightDuration: 400ms
+          expandHeightTimingFunction: $timing-function.easing
+          expandOpacityDuration: $duration.d6
+          expandOpacityTimingFunction: $timing-function.easing
+          collapseHeightDuration: $duration.d6
+          collapseHeightTimingFunction: $timing-function.easing
+          collapseOpacityDuration: 400ms
+          collapseOpacityTimingFunction: $timing-function.easing
+
+      selected:
+        root:
+          strokeWidth: 2px
+      enabled,selected:
+        root:
+          strokeColor: $color.stroke.neutral-contrast
+      disabled:
+        root:
+          strokeColor: $color.stroke.neutral-muted
+        prefixIcon:
+          color: $color.fg.disabled
+        label:
+          color: $color.fg.disabled
+        description:
+          color: $color.fg.disabled
+
+      enabled,pressed:
+        root:
+          color: $color.bg.transparent-pressed
+
+    layout=horizontal:
+      enabled:
+        trigger:
+          paddingLeft: $dimension.x5
+          paddingRight: $dimension.x4
+          paddingY: $dimension.x4
+        content: # aligns horizontally
+          gap: $dimension.x3
+
+    layout=vertical:
+      enabled:
+        trigger:
+          paddingX: $dimension.x4
+          paddingY: $dimension.x5
+        content: # aligns vertically
+          gap: $dimension.x2_5

package/components/skeleton.yaml

@@ -0,0 +1,73 @@
+# yaml-language-server: $schema=./schema.json
+kind: ComponentSpec
+metadata:
+  id: skeleton
+  name: Skeleton
+data:
+  schema:
+    slots:
+      root:
+        properties:
+          color:
+            type: color
+          cornerRadius:
+            type: dimension
+      shimmer:
+        properties:
+          duration:
+            type: duration
+          timingFunction:
+            type: cubicBezier
+          gradient:
+            type: gradient
+    variants:
+      tone:
+        values:
+          neutral:
+            description: 데이터를 불러오는 일반적인 로딩 경험에 사용합니다.
+          magic:
+            description: AI 기능이 활성화되었을 때 사용합니다.
+      radius:
+        values:
+          "0":
+            description: 기본값입니다.
+          "8":
+            description: 텍스트 콘텐츠에 사용합니다.
+          "16":
+            description: 카드 및 썸네일에 사용합니다.
+          full:
+            description: Avatar(원형) 콘텐츠에 사용합니다.
+  definitions:
+    base:
+      enabled:
+        shimmer:
+          duration: 1.5s
+          timingFunction: $timing-function.easing
+    radius=0:
+      enabled:
+        root:
+          cornerRadius: 0px
+    radius=8:
+      enabled:
+        root:
+          cornerRadius: 8px
+    radius=16:
+      enabled:
+        root:
+          cornerRadius: 16px
+    radius=full:
+      enabled:
+        root:
+          cornerRadius: $radius.full
+    tone=neutral:
+      enabled:
+        root:
+          color: $color.palette.gray-200
+        shimmer:
+          gradient: $gradient.shimmer-neutral
+    tone=magic:
+      enabled:
+        root:
+          color: $color.bg.magic-weak
+        shimmer:
+          gradient: $gradient.shimmer-magic

package/components/slider-thumb.yaml

@@ -0,0 +1,45 @@
+# yaml-language-server: $schema=./schema.json
+kind: ComponentSpec
+metadata:
+  id: slider-thumb
+  name: Slider Thumb
+data:
+  schema:
+    slots:
+      root:
+        properties:
+          size:
+            type: dimension
+          cornerRadius:
+            type: dimension
+          color:
+            type: color
+          scaleDuration:
+            type: duration
+          scaleTimingFunction:
+            type: cubicBezier
+          translateDuration:
+            type: duration
+          translateTimingFunction:
+            type: cubicBezier
+          scale:
+            type: number
+  definitions:
+    base:
+      enabled:
+        root:
+          size: $dimension.x5
+          cornerRadius: $radius.full
+          color: $color.bg.neutral-inverted
+
+          scaleDuration: $duration.d3
+          scaleTimingFunction: $timing-function.easing
+
+          translateDuration: $duration.d3
+          translateTimingFunction: $timing-function.easing
+      disabled:
+        root:
+          color: $color.fg.disabled # fg 토큰인데 적절할까?
+      pressed:
+        root:
+          scale: 1.2