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

package/components/page-banner.yaml

@@ -0,0 +1,302 @@
+# yaml-language-server: $schema=./schema.json
+kind: ComponentSpec
+metadata:
+  id: page-banner
+  name: Page Banner
+data:
+  schema:
+    slots:
+      root:
+        properties:
+          paddingX:
+            type: dimension
+          paddingY:
+            type: dimension
+          minHeight:
+            type: dimension
+          color:
+            type: color
+          gradient:
+            type: gradient
+      prefixIcon:
+        description: 아이콘은 Fill 타입 사용을 권장합니다.
+        properties:
+          size:
+            type: dimension
+          marginRight:
+            type: dimension
+          color:
+            type: color
+      content:
+        properties:
+          gap:
+            type: dimension
+      title:
+        properties:
+          fontSize:
+            type: dimension
+          lineHeight:
+            type: dimension
+          fontWeight:
+            type: number
+          color:
+            type: color
+      description:
+        properties:
+          fontSize:
+            type: dimension
+          lineHeight:
+            type: dimension
+          fontWeight:
+            type: number
+          color:
+            type: color
+      button:
+        properties:
+          targetHeight:
+            type: dimension
+          fontSize:
+            type: dimension
+          lineHeight:
+            type: dimension
+          fontWeight:
+            type: number
+          color:
+            type: color
+      suffixIcon:
+        properties:
+          size:
+            type: dimension
+          targetSize:
+            type: dimension
+          marginLeft:
+            type: dimension
+          color:
+            type: color
+    variants:
+      variant:
+        values:
+          weak:
+            description: 배경색이 연한 스타일입니다.
+          solid:
+            description: 배경색이 진한 스타일입니다.
+      tone:
+        values:
+          magic:
+            description: AI 기능을 나타냅니다. variant=solid와 조합하여 사용하지 않습니다.
+  definitions:
+    base:
+      enabled:
+        root:
+          paddingX: $dimension.x4
+          paddingY: $dimension.x2_5
+          minHeight: $dimension.x10
+        prefixIcon:
+          size: $dimension.x4
+          marginRight: $dimension.x2
+        content:
+          gap: $dimension.x1_5
+        title:
+          fontSize: $font-size.t4
+          lineHeight: $line-height.t4
+          fontWeight: $font-weight.bold
+        description:
+          fontSize: $font-size.t4
+          lineHeight: $line-height.t4
+          fontWeight: $font-weight.medium
+        button:
+          targetHeight: $dimension.x10
+          fontSize: $font-size.t3
+          lineHeight: $line-height.t3
+          fontWeight: $font-weight.bold
+        suffixIcon:
+          size: $dimension.x4
+          targetSize: $dimension.x10
+          marginLeft: $dimension.x2
+    tone=neutral, variant=weak:
+      enabled:
+        root:
+          color: $color.bg.neutral-weak
+        prefixIcon:
+          color: $color.fg.neutral
+        title:
+          color: $color.fg.neutral
+        description:
+          color: $color.fg.neutral
+        button:
+          color: $color.fg.neutral
+        suffixIcon:
+          color: $color.fg.neutral
+      pressed:
+        root:
+          color: $color.bg.neutral-weak-pressed
+    tone=neutral, variant=solid:
+      enabled:
+        root:
+          color: $color.bg.neutral-inverted
+        prefixIcon:
+          color: $color.fg.neutral-inverted
+        title:
+          color: $color.fg.neutral-inverted
+        description:
+          color: $color.fg.neutral-inverted
+        button:
+          color: $color.fg.neutral-inverted
+        suffixIcon:
+          color: $color.fg.neutral-inverted
+      pressed:
+        root:
+          color: $color.bg.neutral-inverted-pressed
+    tone=positive, variant=weak:
+      enabled:
+        root:
+          color: $color.bg.positive-weak
+        prefixIcon:
+          color: $color.fg.positive-contrast
+        title:
+          color: $color.fg.positive-contrast
+        description:
+          color: $color.fg.positive-contrast
+        button:
+          color: $color.fg.positive-contrast
+        suffixIcon:
+          color: $color.fg.positive-contrast
+      pressed:
+        root:
+          color: $color.bg.positive-weak-pressed
+    tone=positive, variant=solid:
+      enabled:
+        root:
+          color: $color.bg.positive-solid
+        prefixIcon:
+          color: $color.palette.static-white
+        title:
+          color: $color.palette.static-white
+        description:
+          color: $color.palette.static-white
+        button:
+          color: $color.palette.static-white
+        suffixIcon:
+          color: $color.palette.static-white
+      pressed:
+        root:
+          color: $color.bg.positive-solid-pressed
+    tone=informative, variant=weak:
+      enabled:
+        root:
+          color: $color.bg.informative-weak
+        prefixIcon:
+          color: $color.fg.informative-contrast
+        title:
+          color: $color.fg.informative-contrast
+        description:
+          color: $color.fg.informative-contrast
+        button:
+          color: $color.fg.informative-contrast
+        suffixIcon:
+          color: $color.fg.informative-contrast
+      pressed:
+        root:
+          color: $color.bg.informative-weak-pressed
+    tone=informative, variant=solid:
+      enabled:
+        root:
+          color: $color.bg.informative-solid
+        prefixIcon:
+          color: $color.palette.static-white
+        title:
+          color: $color.palette.static-white
+        description:
+          color: $color.palette.static-white
+        button:
+          color: $color.palette.static-white
+        suffixIcon:
+          color: $color.palette.static-white
+      pressed:
+        root:
+          color: $color.bg.informative-solid-pressed
+    tone=warning, variant=weak:
+      enabled:
+        root:
+          color: $color.bg.warning-weak
+        prefixIcon:
+          color: $color.fg.warning-contrast
+        title:
+          color: $color.fg.warning-contrast
+        description:
+          color: $color.fg.warning-contrast
+        button:
+          color: $color.fg.warning-contrast
+        suffixIcon:
+          color: $color.fg.warning-contrast
+      pressed:
+        root:
+          color: $color.bg.warning-weak-pressed
+    tone=warning, variant=solid:
+      enabled:
+        root:
+          color: $color.bg.warning-solid
+        prefixIcon:
+          color: $color.palette.static-black-alpha-900
+        title:
+          color: $color.palette.static-black-alpha-900
+        description:
+          color: $color.palette.static-black-alpha-900
+        button:
+          color: $color.palette.static-black-alpha-900
+        suffixIcon:
+          color: $color.palette.static-black-alpha-900
+      pressed:
+        root:
+          color: $color.bg.warning-solid-pressed
+    tone=critical, variant=weak:
+      enabled:
+        root:
+          color: $color.bg.critical-weak
+        prefixIcon:
+          color: $color.fg.critical-contrast
+        title:
+          color: $color.fg.critical-contrast
+        description:
+          color: $color.fg.critical-contrast
+        button:
+          color: $color.fg.critical-contrast
+        suffixIcon:
+          color: $color.fg.critical-contrast
+      pressed:
+        root:
+          color: $color.bg.critical-weak-pressed
+    tone=critical, variant=solid:
+      enabled:
+        root:
+          color: $color.bg.critical-solid
+        prefixIcon:
+          color: $color.palette.static-white
+        title:
+          color: $color.palette.static-white
+        description:
+          color: $color.palette.static-white
+        button:
+          color: $color.palette.static-white
+        suffixIcon:
+          color: $color.palette.static-white
+      pressed:
+        root:
+          color: $color.bg.critical-solid-pressed
+    tone=magic, variant=weak:
+      enabled:
+        root:
+          gradient: $gradient.glow-magic
+        prefixIcon:
+          color: $color.fg.neutral
+        title:
+          color: $color.fg.neutral
+        description:
+          color: $color.fg.neutral
+        button:
+          color: $color.fg.neutral
+        suffixIcon:
+          color: $color.fg.neutral
+      pressed:
+        root:
+          gradient: $gradient.glow-magic-pressed

package/components/progress-circle.yaml

@@ -0,0 +1,105 @@
+# yaml-language-server: $schema=./schema.json
+kind: ComponentSpec
+metadata:
+  id: progress-circle
+  name: Progress Circle
+data:
+  schema:
+    slots:
+      root:
+        properties:
+          size:
+            type: dimension
+          thickness:
+            type: dimension
+      track:
+        properties:
+          color:
+            type: color
+      range:
+        properties:
+          color:
+            type: color
+          lengthDuration:
+            type: duration
+          lengthTimingFunction:
+            type: cubicBezier
+          rotateDuration:
+            type: duration
+          headTimingFunction:
+            type: cubicBezier
+          tailTimingFunction:
+            type: cubicBezier
+          rotateTimingFunction:
+            type: cubicBezier
+    variants:
+      size:
+        values:
+          "24":
+            description: 특정 요소 안에서 사용하는 경우 사용합니다.
+          "40":
+            description: 주로 전체 페이지 로딩에 사용합니다.
+      tone:
+        values:
+          neutral:
+            description: 가장 보편적으로 사용되며 스타일보다는 로딩 상태의 인식이 더 중요한 경우 사용합니다.
+          brand:
+            description: 사용자 경험의 초기 단계에서 브랜드 컬러를 통해 주요 전환점을 강조할 때 사용합니다.
+          staticWhite:
+            description: 화면 전체를 어둡게 덮는 오버레이(Overlay) 위에 로딩 상태를 표시할 때 사용합니다.
+      indeterminate:
+        values:
+          "true":
+            description: 대기 시간이 얼마나 남은지 모르는 상황일 때 사용합니다. 계속해서 회전하는 동작을 합니다.
+          "false":
+            description: 대기 시간이 얼마나 남은지 아는 상황일 때 사용합니다. 진행 상황에 맞춰서 원을 채웁니다.
+  definitions:
+    size=40:
+      enabled:
+        root:
+          size: $dimension.x10
+          thickness: 5px
+    size=24:
+      enabled:
+        root:
+          size: $dimension.x6
+          thickness: 3px
+    indeterminate=false:
+      enabled:
+        range:
+          lengthDuration: 300ms
+          lengthTimingFunction:
+            type: cubicBezier
+            value: [0, 0, 0.15, 1]
+    indeterminate=true:
+      enabled:
+        range:
+          lengthDuration: 1.2s
+          rotateDuration: 1.2s
+          headTimingFunction:
+            type: cubicBezier
+            value: [0.35, 0, 0.65, 1]
+          tailTimingFunction:
+            type: cubicBezier
+            value: [0.35, 0, 0.65, 0.6]
+          rotateTimingFunction:
+            type: cubicBezier
+            value: [0.35, 0.25, 0.65, 0.75]
+    tone=neutral:
+      enabled:
+        track:
+          color: $color.palette.gray-200
+        range:
+          color: $color.palette.gray-500
+    tone=brand:
+      enabled:
+        track:
+          color: $color.palette.carrot-200
+        range:
+          color: $color.bg.brand-solid
+    tone=staticWhite:
+      enabled:
+        track:
+          color: $color.palette.static-white-alpha-300
+        range:
+          color: $color.palette.static-white

package/components/radio-group.yaml

@@ -0,0 +1,17 @@
+# yaml-language-server: $schema=./schema.json
+kind: ComponentSpec
+metadata:
+  id: radio-group
+  name: Radio Group
+data:
+  schema:
+    slots:
+      root:
+        properties:
+          gapY:
+            type: dimension
+  definitions:
+    base:
+      enabled:
+        root:
+          gapY: $dimension.x1

package/components/radio.yaml

@@ -0,0 +1,59 @@
+# yaml-language-server: $schema=./schema.json
+kind: ComponentSpec
+metadata:
+  id: radio
+  name: Radio
+data:
+  schema:
+    slots:
+      root:
+        properties:
+          gap:
+            type: dimension
+          minHeight:
+            type: dimension
+      label:
+        properties:
+          color:
+            type: color
+          fontWeight:
+            type: number
+          fontSize:
+            type: dimension
+          lineHeight:
+            type: dimension
+  definitions:
+    base:
+      enabled:
+        label:
+          color: $color.fg.neutral
+        root:
+          gap: $dimension.x2
+      disabled:
+        label:
+          color: $color.fg.disabled
+
+    weight=regular:
+      enabled:
+        label:
+          fontWeight: $font-weight.regular
+    weight=bold:
+      enabled:
+        label:
+          fontWeight: $font-weight.bold
+
+    size=medium:
+      enabled:
+        root:
+          minHeight: $dimension.x8
+        label:
+          fontSize: $font-size.t4
+          lineHeight: $line-height.t4
+
+    size=large:
+      enabled:
+        root:
+          minHeight: $dimension.x9
+        label:
+          fontSize: $font-size.t5
+          lineHeight: $line-height.t5

package/components/radiomark.yaml

@@ -0,0 +1,113 @@
+# yaml-language-server: $schema=./schema.json
+kind: ComponentSpec
+metadata:
+  id: radiomark
+  name: Radiomark
+data:
+  schema:
+    slots:
+      root:
+        properties:
+          colorDuration:
+            type: duration
+          colorTimingFunction:
+            type: cubicBezier
+          size:
+            type: dimension
+          color:
+            type: color
+          strokeWidth:
+            type: dimension
+          strokeColor:
+            type: color
+          cornerRadius:
+            type: dimension
+      icon:
+        properties:
+          size:
+            type: dimension
+          color:
+            type: color
+          cornerRadius:
+            type: dimension
+    variants:
+      tone:
+        values:
+          brand:
+            description: "[deprecated] 주요 버튼 등의 핵심 액션과 시각적으로 충돌하기에 더 이상 사용하지 않습니다."
+  definitions:
+    base:
+      enabled:
+        root:
+          colorDuration: $duration.color-transition
+          colorTimingFunction: $timing-function.easing
+          strokeWidth: 1px
+          strokeColor: $color.stroke.neutral-weak
+          cornerRadius: $radius.full
+        icon:
+          cornerRadius: $radius.full
+      enabled,pressed:
+        root:
+          color: $color.bg.transparent-pressed
+      enabled,selected:
+        root:
+          strokeWidth: 0px
+          strokeColor: "#00000000"
+
+    tone=brand:
+      enabled,selected:
+        root:
+          color: $color.bg.brand-solid
+        icon:
+          color: $color.palette.static-white
+      enabled,selected,pressed:
+        root:
+          color: $color.bg.brand-solid-pressed
+      disabled:
+        root:
+          color: $color.palette.gray-300
+      disabled,selected:
+        root:
+          color: $color.bg.transparent
+          strokeWidth: 1px
+          strokeColor: $color.palette.gray-300
+        icon:
+          color: $color.palette.gray-300
+    tone=neutral:
+      enabled,selected:
+        root:
+          color: $color.bg.neutral-inverted
+        icon:
+          color: $color.fg.neutral-inverted
+      enabled,selected,pressed:
+        root:
+          color: $color.bg.neutral-inverted-pressed
+      disabled:
+        root:
+          color: $color.palette.gray-300
+      disabled,selected:
+        root:
+          color: $color.bg.transparent
+          strokeWidth: 1px
+          strokeColor: $color.palette.gray-300
+        icon:
+          color: $color.palette.gray-300
+
+    size=medium:
+      enabled:
+        root:
+          size: $dimension.x5
+        icon:
+          size: $dimension.x2
+      disabled:
+        icon:
+          size: $dimension.x2_5
+    size=large:
+      enabled:
+        root:
+          size: $dimension.x6
+        icon:
+          size: $dimension.x2_5
+      disabled:
+        icon:
+          size: $dimension.x3