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

package/components/tag-group-item.yaml

@@ -0,0 +1,119 @@
+# yaml-language-server: $schema=./schema.json
+kind: ComponentSpec
+metadata:
+  id: tag-group-item
+  name: Tag Group Item
+data:
+  schema:
+    slots:
+      root:
+        properties:
+          gap:
+            type: dimension
+      label:
+        properties:
+          fontSize:
+            type: dimension
+          lineHeight:
+            type: dimension
+          fontWeight:
+            type: number
+          color:
+            type: color
+      icon:
+        properties:
+          size:
+            type: dimension
+          color:
+            type: color
+      prefixIcon:
+        properties:
+          size:
+            type: dimension
+          color:
+            type: color
+      suffixIcon:
+        properties:
+          size:
+            type: dimension
+          color:
+            type: color
+  definitions:
+    base:
+      enabled:
+        root:
+          gap: $dimension.x0_5
+
+    size=t2:
+      enabled:
+        label:
+          fontSize: $font-size.t2
+          lineHeight: $line-height.t2
+        icon:
+          size: $dimension.x3 # might change to rem later
+        prefixIcon:
+          size: $dimension.x3 # might change to rem later
+        suffixIcon:
+          size: $dimension.x3 # might change to rem later
+    size=t3:
+      enabled:
+        label:
+          fontSize: $font-size.t3
+          lineHeight: $line-height.t3 
+        icon:
+          size: 13px # might change to rem later
+        prefixIcon:
+          size: 13px # might change to rem later
+        suffixIcon:
+          size: 13px # might change to rem later
+    size=t4:
+      enabled:
+        label:
+          fontSize: $font-size.t4
+          lineHeight: $line-height.t4
+        icon:
+          size: $dimension.x3_5 # might change to rem later
+        prefixIcon:
+          size: $dimension.x3_5 # might change to rem later
+        suffixIcon:
+          size: $dimension.x3_5 # might change to rem later
+
+    weight=regular:
+      enabled:
+        label:
+          fontWeight: $font-weight.regular
+    weight=bold:
+      enabled:
+        label:
+          fontWeight: $font-weight.bold
+
+    tone=neutralSubtle:
+      enabled:
+        label:
+          color: $color.fg.neutral-subtle
+        icon:
+          color: $color.fg.neutral-subtle
+        prefixIcon:
+          color: $color.fg.neutral-subtle
+        suffixIcon:
+          color: $color.fg.neutral-subtle
+    tone=neutral:
+      enabled:
+        label:
+          color: $color.fg.neutral
+        icon:
+          color: $color.fg.neutral
+        prefixIcon:
+          color: $color.fg.neutral
+        suffixIcon:
+          color: $color.fg.neutral
+    tone=brand:
+      enabled:
+        label:
+          color: $color.fg.brand
+        icon:
+          color: $color.fg.brand
+        prefixIcon:
+          color: $color.fg.brand
+        suffixIcon:
+          color: $color.fg.brand

package/components/tag-group.yaml

@@ -0,0 +1,40 @@
+# yaml-language-server: $schema=./schema.json
+kind: ComponentSpec
+metadata:
+  id: tag-group
+  name: Tag Group
+data:
+  schema:
+    slots:
+      separator:
+        properties:
+          color:
+            type: color
+          fontSize:
+            type: dimension
+          lineHeight:
+            type: dimension
+          fontWeight:
+            type: number
+  definitions:
+    base:
+      enabled:
+        separator:
+          color: $color.palette.gray-600
+          fontWeight: $font-weight.regular
+
+    size=t2:
+      enabled:
+        separator:
+          fontSize: $font-size.t2
+          lineHeight: $line-height.t2
+    size=t3:
+      enabled:
+        separator:
+          fontSize: $font-size.t3
+          lineHeight: $line-height.t3
+    size=t4:
+      enabled:
+        separator:
+          fontSize: $font-size.t4
+          lineHeight: $line-height.t4

package/components/text-button.yaml

@@ -0,0 +1,46 @@
+# yaml-language-server: $schema=./schema.json
+kind: ComponentSpec
+metadata:
+  id: text-button
+  name: Text Button
+data:
+  schema:
+    slots:
+      root:
+        properties:
+          color:
+            type: color
+          minHeight:
+            type: dimension
+          cornerRadius:
+            type: dimension
+          paddingX:
+            type: dimension
+          paddingY:
+            type: dimension
+      label:
+        properties:
+          color:
+            type: color
+          fontWeight:
+            type: number
+          fontSize:
+            type: dimension
+          lineHeight:
+            type: dimension
+  definitions:
+    base:
+      enabled:
+        root:
+          minHeight: $dimension.x9
+          paddingX: $dimension.x3_5
+          paddingY: $dimension.x2
+          cornerRadius: $radius.r2
+        label:
+          color: $color.fg.neutral-muted
+          fontSize: $font-size.t4
+          lineHeight: $line-height.t4
+          fontWeight: $font-weight.bold
+      pressed:
+        root:
+          color: $color.bg.layer-default-pressed

package/components/text-input.yaml

@@ -0,0 +1,234 @@
+# yaml-language-server: $schema=./schema.json
+kind: ComponentSpec
+metadata:
+  id: text-input
+  name: Text Input
+data:
+  schema:
+    slots:
+      root:
+        properties:
+          gap:
+            type: dimension
+          minHeight:
+            type: dimension
+          cornerRadius:
+            type: dimension
+          paddingX:
+            type: dimension
+          paddingY:
+            type: dimension
+          strokeWidth:
+            type: dimension
+          strokeBottomWidth:
+            type: dimension
+          strokeColor:
+            type: color
+          color:
+            type: color
+          strokeDuration:
+            type: duration
+            description: enabled 상태의 stroke 위에 focused/invalid 상태의 stroke가 fade in/out 되는 데에 걸리는 시간입니다. stroke 두께나 색상 자체를 transition하지 않습니다.
+          strokeTimingFunction:
+            type: cubicBezier
+      value:
+        properties:
+          color:
+            type: color
+          fontWeight:
+            type: number
+          fontSize:
+            type: dimension
+          lineHeight:
+            type: dimension
+      placeholder:
+        properties:
+          color:
+            type: color
+          fontWeight:
+            type: number
+          fontSize:
+            type: dimension
+          lineHeight:
+            type: dimension
+      prefixText:
+        properties:
+          color:
+            type: color
+          fontWeight:
+            type: number
+          fontSize:
+            type: dimension
+          lineHeight:
+            type: dimension
+      prefixIcon:
+        properties:
+          color:
+            type: color
+          size:
+            type: dimension
+      suffixText:
+        properties:
+          color:
+            type: color
+          fontWeight:
+            type: number
+          fontSize:
+            type: dimension
+          lineHeight:
+            type: dimension
+      suffixIcon:
+        properties:
+          color:
+            type: color
+          size:
+            type: dimension
+    variants:
+      variant:
+        values:
+          outline:
+            description: 기본 스타일입니다.
+          underline:
+            description: 화면에 하나의 Input만 있는 경우 사용을 권장합니다.
+  definitions:
+    base:
+      enabled:
+        root:
+          strokeColor: $color.stroke.neutral-weak
+          strokeDuration: 0.1s
+          strokeTimingFunction: $timing-function.easing
+        value:
+          color: $color.fg.neutral
+          fontWeight: $font-weight.regular
+        placeholder:
+          color: $color.fg.placeholder
+          fontWeight: $font-weight.regular
+        prefixText:
+          color: $color.fg.neutral-muted
+          fontWeight: $font-weight.regular
+        prefixIcon:
+          color: $color.fg.neutral-muted
+        suffixText:
+          color: $color.fg.neutral-muted
+          fontWeight: $font-weight.regular
+        suffixIcon:
+          color: $color.fg.neutral-muted
+      focused:
+        root:
+          strokeColor: $color.stroke.neutral-contrast
+      invalid:
+        root:
+          strokeColor: $color.stroke.critical-solid
+      invalid,focused:
+        root:
+          strokeColor: $color.stroke.critical-solid # being obvious
+      disabled:
+        value:
+          color: $color.fg.disabled
+        placeholder:
+          color: $color.fg.disabled
+    variant=outline:
+      enabled:
+        root:
+          cornerRadius: $radius.r3
+          paddingX: $dimension.x4
+          strokeWidth: 1px
+      focused:
+        root:
+          strokeWidth: 2px
+      invalid:
+        root:
+          strokeWidth: 2px
+      readonly:
+        root:
+          color: $color.bg.disabled
+      disabled:
+        root:
+          color: $color.bg.disabled
+    variant=outline,size=large:
+      enabled:
+        root:
+          gap: $dimension.x2_5
+          minHeight: $dimension.x13
+        value:
+          fontSize: $font-size.t5
+          lineHeight: $line-height.t5
+        placeholder:
+          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
+    variant=outline,size=medium:
+      enabled:
+        root:
+          gap: $dimension.x1_5
+          minHeight: $dimension.x10
+        value:
+          fontSize: $font-size.t4
+          lineHeight: $line-height.t4
+        placeholder:
+          fontSize: $font-size.t4
+          lineHeight: $line-height.t4
+        prefixText:
+          fontSize: $font-size.t4
+          lineHeight: $line-height.t4
+        prefixIcon:
+          size: $dimension.x4
+        suffixText:
+          fontSize: $font-size.t4
+          lineHeight: $line-height.t4
+        suffixIcon:
+          size: $dimension.x4
+
+    variant=underline:
+      enabled:
+        root:
+          gap: $dimension.x2_5
+          minHeight: $dimension.x10
+          strokeBottomWidth: 1px
+        value:
+          fontSize: $font-size.t6
+          lineHeight: $line-height.t6
+        placeholder:
+          fontSize: $font-size.t6
+          lineHeight: $line-height.t6
+        prefixText:
+          fontSize: $font-size.t6
+          lineHeight: $line-height.t6
+        prefixIcon:
+          size: $dimension.x6
+        suffixText:
+          fontSize: $font-size.t6
+          lineHeight: $line-height.t6
+        suffixIcon:
+          size: $dimension.x6
+      focused:
+        root:
+          strokeBottomWidth: 2px
+      invalid:
+        root:
+          strokeBottomWidth: 2px
+      readonly:
+        value:
+          color: $color.fg.neutral-muted
+        placeholder:
+          color: $color.fg.neutral-muted
+    type=singleline: {}
+    type=multiline,size=large:
+      enabled:
+        root:
+          minHeight: 95px
+          paddingY: $dimension.x3_5
+    type=multiline,size=medium:
+      enabled:
+        root:
+          minHeight: 90px
+          paddingY: 11px

package/components/toggle-button.yaml

@@ -0,0 +1,201 @@
+# yaml-language-server: $schema=./schema.json
+kind: ComponentSpec
+metadata:
+  id: toggle-button
+  name: Toggle Button
+data:
+  schema:
+    slots:
+      root:
+        properties:
+          colorDuration:
+            type: duration
+          colorTimingFunction:
+            type: cubicBezier
+          color:
+            type: color
+          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
+      prefixIcon:
+        properties:
+          color:
+            type: color
+          size:
+            type: dimension
+      suffixIcon:
+        properties:
+          color:
+            type: color
+          size:
+            type: dimension
+      progressCircle:
+        properties:
+          trackColor:
+            type: color
+          rangeColor:
+            type: color
+          size:
+            type: dimension
+          thickness:
+            type: dimension
+    variants:
+      variant:
+        values:
+          brandSolid:
+            description: 브랜드 컬러로 강조된 스타일입니다.
+          neutralWeak:
+            description: 기본적인 토글 스타일입니다.
+  definitions:
+    base:
+      enabled:
+        root:
+          colorDuration: $duration.color-transition
+          colorTimingFunction: $timing-function.easing
+        label:
+          fontWeight: $font-weight.bold
+    variant=brandSolid:
+      enabled:
+        root:
+          color: $color.bg.brand-solid
+        label:
+          color: $color.palette.static-white
+        prefixIcon:
+          color: $color.palette.static-white
+        suffixIcon:
+          color: $color.palette.static-white
+        progressCircle:
+          trackColor: $color.palette.static-white-alpha-300
+          rangeColor: $color.palette.static-white
+      pressed:
+        root:
+          color: $color.bg.brand-solid-pressed
+      selected:
+        root:
+          color: $color.bg.neutral-weak
+        label:
+          color: $color.fg.neutral
+        prefixIcon:
+          color: $color.fg.neutral
+        suffixIcon:
+          color: $color.fg.neutral
+        progressCircle:
+          trackColor: $color.palette.gray-500
+          rangeColor: $color.fg.neutral
+      selected,pressed:
+        root:
+          color: $color.bg.neutral-weak-pressed
+      disabled:
+        root:
+          color: $color.bg.disabled
+        label:
+          color: $color.fg.disabled
+        prefixIcon:
+          color: $color.fg.disabled
+        suffixIcon:
+          color: $color.fg.disabled
+      loading:
+        root:
+          color: $color.bg.brand-solid-pressed
+      selected,loading:
+        root:
+          color: $color.bg.neutral-weak-pressed
+    variant=neutralWeak:
+      enabled:
+        root:
+          color: $color.bg.neutral-weak
+        label:
+          color: $color.fg.neutral
+        prefixIcon:
+          color: $color.fg.neutral
+        suffixIcon:
+          color: $color.fg.neutral
+        progressCircle:
+          trackColor: $color.palette.gray-500
+          rangeColor: $color.fg.neutral
+      pressed:
+        root:
+          color: $color.bg.neutral-weak-pressed
+      selected:
+        root:
+          color: $color.bg.neutral-weak
+        label:
+          color: $color.fg.neutral
+        prefixIcon:
+          color: $color.fg.neutral
+        suffixIcon:
+          color: $color.fg.neutral
+        progressCircle:
+          trackColor: $color.palette.gray-500
+          rangeColor: $color.fg.neutral
+      selected,pressed:
+        root:
+          color: $color.bg.neutral-weak-pressed
+      disabled:
+        root:
+          color: $color.bg.disabled
+        label:
+          color: $color.fg.disabled
+        prefixIcon:
+          color: $color.fg.disabled
+        suffixIcon:
+          color: $color.fg.disabled
+      loading:
+        root:
+          color: $color.bg.neutral-weak-pressed
+      selected,loading:
+        root:
+          color: $color.bg.neutral-weak-pressed
+    size=xsmall:
+      enabled:
+        root:
+          minHeight: $dimension.x8
+          cornerRadius: $radius.full
+          gap: $dimension.x1
+          paddingX: $dimension.x3_5
+          paddingY: $dimension.x1_5
+        prefixIcon:
+          size: $dimension.x3_5
+        suffixIcon:
+          size: $dimension.x3_5
+        label:
+          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.x4
+          paddingY: $dimension.x2
+        prefixIcon:
+          size: $dimension.x3_5
+        suffixIcon:
+          size: $dimension.x3_5
+        label:
+          fontSize: $font-size.t4
+          lineHeight: $line-height.t4
+        progressCircle:
+          size: 14px
+          thickness: 2px