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

package/components/slider-tick.yaml

@@ -0,0 +1,27 @@
+# yaml-language-server: $schema=./schema.json
+kind: ComponentSpec
+metadata:
+  id: slider-tick
+  name: Slider Tick
+data:
+  schema:
+    slots:
+      root:
+        properties:
+          width:
+            type: dimension
+          color:
+            type: color
+  definitions:
+    base:
+      enabled:
+        root:
+          color: $color.fg.neutral-inverted # fg 토큰인데 적절할까?      
+    weight=thin:
+      enabled:
+        root:
+          width: 1px
+    weight=thick:
+      enabled:
+        root:
+          width: $dimension.x1

package/components/slider.yaml

@@ -0,0 +1,169 @@
+# yaml-language-server: $schema=./schema.json
+kind: ComponentSpec
+metadata:
+  id: slider
+  name: Slider
+data:
+  schema:
+    slots:
+      root:
+        properties:
+          gap:
+            type: dimension
+      control:
+        properties:
+          height:
+            type: dimension
+      track:
+        properties:
+          height:
+            type: dimension
+          cornerRadius:
+            type: dimension
+          color:
+            type: color
+      range:
+        properties:
+          cornerRadius:
+            type: dimension
+          color:
+            type: color
+          widthDuration:
+            type: duration
+          widthTimingFunction:
+            type: cubicBezier
+      thumb:
+        properties:
+          size:
+            type: dimension
+          cornerRadius:
+            type: dimension
+          color:
+            type: color
+      valueIndicatorRoot:
+        description: arrow width + (valueIndicatorRoot paddingX * 2)만큼의 최소 너비를 가집니다.
+        properties:
+          color:
+            type: color
+          cornerRadius:
+            type: dimension
+          paddingX:
+            type: dimension
+            description: value indicator 내부 좌우 여백입니다. arrow와 valueIndicatorRoot 경계 사이의 최소 간격에도 동일한 값이 적용됩니다.
+          paddingY:
+            type: dimension
+          offsetY:
+            type: dimension
+          enterScale:
+            type: number
+          enterOpacity:
+            type: number
+          enterDuration:
+            type: duration
+          enterTimingFunction:
+            type: cubicBezier
+          exitScale:
+            type: number
+          exitOpacity:
+            type: number
+          exitDuration:
+            type: duration
+          exitTimingFunction:
+            type: cubicBezier
+          translateDuration:
+            type: duration
+          translateTimingFunction:
+            type: cubicBezier
+      valueIndicatorArrow:
+        properties:
+          color:
+            type: color
+          width:
+            type: dimension
+          height:
+            type: dimension
+          cornerRadius:
+            type: dimension
+          gutter:
+            type: dimension
+            description: arrow와 thumb 사이의 거리를 정의합니다.
+      valueIndicatorLabel:
+        properties:
+          color:
+            type: color
+          fontSize:
+            type: dimension
+          lineHeight:
+            type: dimension
+          fontWeight:
+            type: number
+      marker:
+        properties:
+          color:
+            type: color
+          fontWeight:
+            type: number
+          fontSize:
+            type: dimension
+          lineHeight:
+            type: dimension
+  definitions:
+    base:
+      enabled:
+        root:
+          gap: $dimension.x0_5
+        control:
+          height: 26px
+        track:
+          height: $dimension.x1
+          cornerRadius: $radius.full
+          color: $color.palette.gray-400
+        range:
+          cornerRadius: $radius.full
+          color: $color.fg.neutral # fg 토큰인데 적절할까?
+
+          widthDuration: $duration.d3
+          widthTimingFunction: $timing-function.easing
+        thumb:
+          size: $dimension.x5
+          cornerRadius: $radius.full
+          color: $color.bg.neutral-inverted
+        valueIndicatorRoot:
+          color: $color.bg.neutral-inverted
+          cornerRadius: $radius.r1_5
+          paddingX: $dimension.x2
+          paddingY: $dimension.x1
+          offsetY: $dimension.x3
+          enterScale: 0.9
+          enterOpacity: 0
+          enterDuration: $duration.d4
+          enterTimingFunction: $timing-function.enter
+          exitScale: 1
+          exitOpacity: 0
+          exitDuration: $duration.d4
+          exitTimingFunction: $timing-function.easing
+          translateDuration: $duration.d3
+          translateTimingFunction: $timing-function.easing
+        valueIndicatorArrow:
+          color: $color.bg.neutral-inverted
+          width: $dimension.x2
+          height: $dimension.x1_5
+          cornerRadius: $radius.r0_5
+          gutter: $dimension.x0_5
+        valueIndicatorLabel:
+          color: $color.fg.neutral-inverted
+          fontSize: $font-size.t3
+          lineHeight: $line-height.t3
+          fontWeight: $font-weight.medium
+        marker:
+          color: $color.fg.neutral-muted
+          fontWeight: $font-weight.regular
+          fontSize: $font-size.t3
+          lineHeight: $line-height.t3
+      disabled:
+        range:
+          color: $color.fg.disabled
+        thumb:
+          color: $color.fg.disabled
+        marker:
+          color: $color.fg.disabled

package/components/snackbar.yaml

@@ -0,0 +1,137 @@
+# yaml-language-server: $schema=./schema.json
+kind: ComponentSpec
+metadata:
+  id: snackbar
+  name: Snackbar
+data:
+  schema:
+    slots:
+      region:
+        properties:
+          paddingX:
+            type: dimension
+          paddingY:
+            type: dimension
+          offsetDuration:
+            type: duration
+          offsetTimingFunction:
+            type: cubicBezier
+      root:
+        properties:
+          color:
+            type: color
+          cornerRadius:
+            type: dimension
+          minHeight:
+            type: dimension
+          maxWidth:
+            type: dimension
+          paddingX:
+            type: dimension
+          paddingY:
+            type: dimension
+          enterOpacity:
+            type: number
+          enterScale:
+            type: number
+          enterDuration:
+            type: duration
+          enterTimingFunction:
+            type: cubicBezier
+          exitScale:
+            type: number
+          exitOpacity:
+            type: number
+          exitDuration:
+            type: duration
+          exitTimingFunction:
+            type: cubicBezier
+      content:
+        properties:
+          paddingX:
+            type: dimension
+          gap:
+            type: dimension
+      message:
+        properties:
+          color:
+            type: color
+          fontSize:
+            type: dimension
+          lineHeight:
+            type: dimension
+          fontWeight:
+            type: number
+      prefixIcon:
+        properties:
+          size:
+            type: dimension
+          color:
+            type: color
+          paddingRight:
+            type: dimension
+      actionButton:
+        properties:
+          targetPaddingX:
+            type: dimension
+          targetMinHeight:
+            type: dimension
+          color:
+            type: color
+          fontSize:
+            type: dimension
+          lineHeight:
+            type: dimension
+          fontWeight:
+            type: number
+  definitions:
+    base:
+      enabled:
+        # TODO: we might split region out to a separate component
+        region:
+          paddingX: $dimension.x2
+          paddingY: $dimension.x2
+          offsetDuration: $duration.d4
+          offsetTimingFunction: $timing-function.easing
+        root:
+          color: $color.bg.neutral-inverted
+          cornerRadius: $radius.r2
+          minHeight: 44px
+          maxWidth: 560px
+          paddingX: $dimension.x2_5
+          paddingY: $dimension.x2_5
+          enterOpacity: 0
+          enterScale: 0.8
+          enterDuration: $duration.d3
+          enterTimingFunction: $timing-function.enter
+          exitOpacity: 0
+          exitScale: 0.8
+          exitDuration: $duration.d2
+          exitTimingFunction: $timing-function.exit
+        content:
+          paddingX: $dimension.x1_5
+          gap: $dimension.x2_5
+        message:
+          color: $color.fg.neutral-inverted
+          fontSize: $font-size.t4
+          lineHeight: $line-height.t4
+          fontWeight: $font-weight.regular
+        prefixIcon:
+          size: 24px
+          paddingRight: $dimension.x0_5
+        actionButton:
+          targetPaddingX: $dimension.x2
+          targetMinHeight: 44px
+          color: $color.fg.brand
+          fontSize: $font-size.t4
+          lineHeight: $line-height.t4
+          fontWeight: $font-weight.bold
+    variant=default: {}
+    variant=positive:
+      enabled:
+        prefixIcon:
+          color: $color.fg.positive
+    variant=critical:
+      enabled:
+        prefixIcon:
+          color: $color.fg.critical

package/components/switch.yaml

@@ -0,0 +1,66 @@
+# yaml-language-server: $schema=./schema.json
+kind: ComponentSpec
+metadata:
+  id: switch
+  name: Switch
+data:
+  schema:
+    slots:
+      root:
+        properties:
+          height:
+            type: dimension
+          gap:
+            type: dimension
+      label:
+        properties:
+          color:
+            type: color
+          opacity:
+            type: number
+          opacityDuration:
+            type: duration
+          opacityTimingFunction:
+            type: cubicBezier
+          fontSize:
+            type: dimension
+          lineHeight:
+            type: dimension
+          fontWeight:
+            type: number
+  definitions:
+    base:
+      enabled:
+        label:
+          color: $color.fg.neutral
+          fontWeight: $font-weight.medium
+      disabled:
+        label:
+          opacity: 0.58
+          opacityDuration: $duration.d1
+          opacityTimingFunction: $timing-function.easing
+    
+    size=32:
+      enabled:
+        root:
+          height: $dimension.x8
+          gap: $dimension.x2_5
+        label:
+          fontSize: $font-size.t5
+          lineHeight: $line-height.t5
+    size=24:
+      enabled:
+        root:
+          height: $dimension.x6
+          gap: $dimension.x2
+        label:
+          fontSize: $font-size.t4
+          lineHeight: $line-height.t4
+    size=16:
+      enabled:
+        root:
+          height: $dimension.x6
+          gap: $dimension.x1_5
+        label:
+          fontSize: $font-size.t3
+          lineHeight: $line-height.t3

package/components/switchmark.yaml

@@ -0,0 +1,147 @@
+# yaml-language-server: $schema=./schema.json
+# parts: root, thumb
+kind: ComponentSpec
+metadata:
+  id: switchmark
+  name: Switchmark
+  lastUpdated: 25-12-16
+data:
+  schema:
+    slots:
+      root:
+        properties:
+          cornerRadius:
+            type: dimension
+          color:
+            type: color
+          colorDuration:
+            type: duration
+          colorTimingFunction:
+            type: cubicBezier
+          colorDelay:
+            type: duration
+          opacity:
+            type: number
+          opacityDuration:
+            type: duration
+          opacityTimingFunction:
+            type: cubicBezier
+          height:
+            type: dimension
+          width:
+            type: dimension
+          paddingX:
+            type: dimension
+          paddingY:
+            type: dimension
+      thumb:
+        properties:
+          color:
+            type: color
+          colorDuration:
+            type: duration
+          colorTimingFunction:
+            type: cubicBezier
+          colorDelay:
+            type: duration
+          cornerRadius:
+            type: dimension
+          height:
+            type: dimension
+          width:
+            type: dimension
+          scale:
+            type: number
+          scaleDuration:
+            type: duration
+          scaleTimingFunction:
+            type: cubicBezier
+          translateDuration:
+            type: duration
+          translateTimingFunction:
+            type: cubicBezier
+    variants:
+      tone:
+        values:
+          brand:
+            description: "[deprecated] 주요 버튼 등의 핵심 액션과 시각적으로 충돌하기에 더 이상 사용하지 않습니다."
+
+  definitions:
+    base:
+      enabled:
+        root:
+          cornerRadius: $radius.full
+          color: $color.palette.gray-600
+          colorDuration: $duration.d1
+          colorTimingFunction: $timing-function.easing
+          colorDelay: 20ms
+        thumb:
+          cornerRadius: $radius.full
+          scale: 0.8
+          scaleDuration: $duration.d3
+          scaleTimingFunction: $timing-function.easing
+          translateDuration: $duration.d3
+          translateTimingFunction: $timing-function.easing
+          colorDuration: $duration.d1
+          colorTimingFunction: $timing-function.easing
+          colorDelay: 20ms
+      disabled:
+        root:
+          opacity: 0.38
+          opacityDuration: $duration.d1
+          opacityTimingFunction: $timing-function.easing
+      selected:
+        thumb:
+          scale: 1.0
+
+    tone=brand:
+      enabled:
+        thumb:
+          color: $color.palette.static-white
+      enabled,selected:
+        root:
+          color: $color.bg.brand-solid
+    tone=neutral:
+      enabled:
+        thumb:
+          color: $color.fg.neutral-inverted
+      enabled,selected:
+        root:
+          color: $color.bg.neutral-inverted
+      disabled:
+        thumb:
+          color: $color.palette.static-black-alpha-700
+      disabled,selected:
+        root:
+          color: $color.palette.gray-600
+
+    size=32:
+      enabled:
+        root:
+          height: 32px
+          width: 52px
+          paddingX: 3px
+          paddingY: 3px
+        thumb:
+          height: 26px
+          width: 26px
+    size=24:
+      enabled:
+        root:
+          height: 24px
+          width: 38px
+          paddingX: 2px
+          paddingY: 2px
+        thumb:
+          height: 20px
+          width: 20px
+    size=16:
+      enabled:
+        root:
+          height: 16px
+          width: 26px
+          paddingX: 2px
+          paddingY: 2px
+        thumb:
+          height: 12px
+          width: 12px

package/components/tab.yaml

@@ -0,0 +1,57 @@
+# yaml-language-server: $schema=./schema.json
+kind: ComponentSpec
+metadata:
+  id: tab
+  name: Tab
+data:
+  schema:
+    slots:
+      root:
+        properties:
+          minHeight:
+            type: dimension
+          paddingX:
+            type: dimension
+          paddingY:
+            type: dimension
+      label:
+        properties:
+          color:
+            type: color
+          fontSize:
+            type: dimension
+          lineHeight:
+            type: dimension
+          fontWeight:
+            type: number
+  definitions:
+    base:
+      enabled:
+        label:
+          color: $color.fg.neutral-subtle
+      selected:
+        label:
+          color: $color.fg.neutral
+      disabled:
+        label:
+          color: $color.fg.disabled
+    size=medium:
+      enabled:
+        root:
+          minHeight: 44px
+          paddingX: $dimension.x2_5
+          paddingY: $dimension.x2_5
+        label:
+          fontSize: $font-size.t5
+          lineHeight: $line-height.t5
+          fontWeight: $font-weight.bold
+    size=small:
+      enabled:
+        root:
+          minHeight: 40px
+          paddingX: $dimension.x2_5
+          paddingY: $dimension.x2_5
+        label:
+          fontSize: $font-size.t4
+          lineHeight: $line-height.t4
+          fontWeight: $font-weight.bold

package/components/tablist.yaml

@@ -0,0 +1,64 @@
+# yaml-language-server: $schema=./schema.json
+kind: ComponentSpec
+metadata:
+  id: tablist
+  name: Tablist
+data:
+  schema:
+    slots:
+      root:
+        properties:
+          color:
+            type: color
+          strokeBottomWidth:
+            type: dimension
+          strokeColor:
+            type: color
+          paddingX:
+            type: dimension
+          height:
+            type: dimension
+      indicator:
+        properties:
+          height:
+            type: dimension
+          color:
+            type: color
+          transformDuration:
+            type: duration
+          transformTimingFunction:
+            type: cubicBezier
+          insetX:
+            type: dimension
+  definitions:
+    base:
+      enabled:
+        root:
+          color: $color.bg.layer-default
+          strokeBottomWidth: 1px
+          strokeColor: $color.stroke.neutral-muted
+        indicator:
+          height: 2px
+          color: $color.fg.neutral
+          transformDuration: $duration.d4
+          transformTimingFunction: $timing-function.easing
+    layout=hug:
+      enabled:
+        root:
+          paddingX: $dimension.spacing-x.global-gutter
+        indicator:
+          insetX: 0px
+    layout=fill:
+      enabled:
+        root:
+          paddingX: 0px
+        indicator:
+          insetX: $dimension.spacing-x.global-gutter
+    size=small:
+      enabled:
+        root:
+          height: 40px
+    size=medium:
+      enabled:
+        root:
+          height: 44px