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

package/components/bottom-sheet.yaml

@@ -0,0 +1,156 @@
+# yaml-language-server: $schema=./schema.json
+kind: ComponentSpec
+metadata:
+  id: bottom-sheet
+  name: Bottom Sheet
+data:
+  schema:
+    slots:
+      backdrop:
+        properties:
+          color:
+            type: color
+          enterDuration:
+            type: duration
+          enterTimingFunction:
+            type: cubicBezier
+          enterOpacity:
+            type: number
+          exitDuration:
+            type: duration
+          exitTimingFunction:
+            type: cubicBezier
+          exitOpacity:
+            type: number
+      content:
+        properties:
+          color:
+            type: color
+          maxWidth:
+            type: dimension
+          topCornerRadius:
+            type: dimension
+          enterDuration:
+            type: duration
+          enterTimingFunction:
+            type: cubicBezier
+          exitDuration:
+            type: duration
+          exitTimingFunction:
+            type: cubicBezier
+      header:
+        properties:
+          gap:
+            type: dimension
+          paddingTop:
+            type: dimension
+          paddingBottom:
+            type: dimension
+      body:
+        properties:
+          paddingX:
+            type: dimension
+      footer:
+        properties:
+          paddingX:
+            type: dimension
+          paddingTop:
+            type: dimension
+          paddingBottom:
+            type: dimension
+      title:
+        properties:
+          color:
+            type: color
+          fontSize:
+            type: dimension
+          lineHeight:
+            type: dimension
+          fontWeight:
+            type: number
+          paddingLeft:
+            type: dimension
+          paddingRight:
+            type: dimension
+      description:
+        properties:
+          color:
+            type: color
+          fontSize:
+            type: dimension
+          lineHeight:
+            type: dimension
+          fontWeight:
+            type: number
+          paddingX:
+            type: dimension
+      closeButton:
+        properties:
+          fromTop:
+            type: dimension
+          fromRight:
+            type: dimension
+  definitions:
+    base:
+      enabled:
+        backdrop:
+          color: $color.bg.overlay
+          enterDuration: $duration.d6
+          enterTimingFunction: $timing-function.enter
+          enterOpacity: 0
+          exitDuration: $duration.d4
+          exitTimingFunction: $timing-function.exit
+          exitOpacity: 0
+        content:
+          color: $color.bg.layer-floating
+          maxWidth: 640px
+          topCornerRadius: $radius.r6
+          enterDuration: $duration.d6
+          enterTimingFunction: $timing-function.enter-expressive
+          # Do we need translateY definition here?
+          exitDuration: $duration.d4
+          exitTimingFunction: $timing-function.exit
+        header:
+          gap: $dimension.x2
+          paddingTop: $dimension.x6
+          paddingBottom: $dimension.x4
+        body:
+          paddingX: $dimension.spacing-x.global-gutter
+        footer:
+          paddingX: $dimension.spacing-x.global-gutter
+          paddingTop: $dimension.x3
+          paddingBottom: $dimension.x4
+        title:
+          color: $color.fg.neutral
+          fontSize: $font-size.t8
+          lineHeight: $line-height.t8
+          fontWeight: $font-weight.bold
+        description:
+          color: $color.fg.neutral-muted
+          fontSize: $font-size.t5
+          lineHeight: $line-height.t5
+          fontWeight: $font-weight.regular
+          paddingX: $dimension.spacing-x.global-gutter
+        closeButton:
+          fromTop: $dimension.x6
+          fromRight: $dimension.x4
+    headerAlignment=left,closeButton=true:
+      enabled:
+        title:
+          paddingRight: 56px
+          paddingLeft: $dimension.spacing-x.global-gutter
+    headerAlignment=left,closeButton=false:
+      enabled:
+        title:
+          paddingLeft: $dimension.spacing-x.global-gutter
+          paddingRight: $dimension.spacing-x.global-gutter
+    headerAlignment=center,closeButton=true:
+      enabled:
+        title:
+          paddingLeft: 56px
+          paddingRight: 56px
+    headerAlignment=center,closeButton=false:
+      enabled:
+        title:
+          paddingLeft: $dimension.spacing-x.global-gutter
+          paddingRight: $dimension.spacing-x.global-gutter

package/components/callout.yaml

@@ -0,0 +1,213 @@
+# yaml-language-server: $schema=./schema.json
+kind: ComponentSpec
+metadata:
+  id: callout
+  name: Callout
+data:
+  schema:
+    slots:
+      root:
+        properties:
+          paddingX:
+            type: dimension
+          paddingY:
+            type: dimension
+          gap:
+            type: dimension
+          cornerRadius:
+            type: dimension
+          minHeight:
+            type: dimension
+          color:
+            type: color
+          gradient:
+            type: gradient
+      prefixIcon:
+        description: 아이콘은 Fill 타입 사용을 권장합니다.
+        properties:
+          size:
+            type: dimension
+          color:
+            type: color
+      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
+      link:
+        description: root가 클릭 영역인 Actionable Callout에서는 표시를 권장하지 않습니다.
+        properties:
+          fontSize:
+            type: dimension
+          lineHeight:
+            type: dimension
+          fontWeight:
+            type: number
+          color:
+            type: color
+      suffixIcon:
+        properties:
+          size:
+            type: dimension
+          targetSize:
+            type: dimension
+          color:
+            type: color
+    variants:
+      tone:
+        values:
+          neutral:
+            description: 일반적인 정보를 전달합니다.
+          informative:
+            description: 유용한 정보를 제공합니다.
+          positive:
+            description: 긍정적인 상태를 나타냅니다.
+          warning:
+            description: 주의가 필요한 상태를 나타냅니다.
+          critical:
+            description: 중요한 문제를 나타냅니다.
+          magic:
+            description: AI 기능을 나타냅니다.
+  definitions:
+    base:
+      enabled:
+        root:
+          paddingX: $dimension.x3_5
+          paddingY: $dimension.x3_5
+          gap: $dimension.x3
+          cornerRadius: $radius.r2_5
+          minHeight: 50px
+        prefixIcon:
+          size: $dimension.x4
+        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.regular
+        link:
+          fontSize: $font-size.t4
+          lineHeight: $line-height.t4
+          fontWeight: $font-weight.regular
+        suffixIcon:
+          size: $dimension.x4
+          targetSize: $dimension.x10
+    tone=neutral:
+      enabled:
+        root:
+          color: $color.bg.neutral-weak
+        prefixIcon:
+          color: $color.fg.neutral
+        title:
+          color: $color.fg.neutral
+        description:
+          color: $color.fg.neutral
+        link:
+          color: $color.fg.neutral
+        suffixIcon:
+          color: $color.fg.neutral
+      pressed:
+        root:
+          color: $color.bg.neutral-weak-pressed
+    tone=informative:
+      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
+        link:
+          color: $color.fg.informative-contrast
+        suffixIcon:
+          color: $color.fg.informative-contrast
+      pressed:
+        root:
+          color: $color.bg.informative-weak-pressed
+    tone=positive:
+      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
+        link:
+          color: $color.fg.positive-contrast
+        suffixIcon:
+          color: $color.fg.positive-contrast
+      pressed:
+        root:
+          color: $color.bg.positive-weak-pressed
+    tone=warning:
+      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
+        link:
+          color: $color.fg.warning-contrast
+        suffixIcon:
+          color: $color.fg.warning-contrast
+      pressed:
+        root:
+          color: $color.bg.warning-weak-pressed
+    tone=critical:
+      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
+        link:
+          color: $color.fg.critical-contrast
+        suffixIcon:
+          color: $color.fg.critical-contrast
+      pressed:
+        root:
+          color: $color.bg.critical-weak-pressed
+    tone=magic:
+      enabled:
+        root:
+          gradient: $gradient.glow-magic
+        prefixIcon:
+          color: $color.fg.neutral
+        title:
+          color: $color.fg.neutral
+        description:
+          color: $color.fg.neutral
+        link:
+          color: $color.fg.neutral
+        suffixIcon:
+          color: $color.fg.neutral
+      pressed:
+        root:
+          gradient: $gradient.glow-magic-pressed

package/components/checkbox-group.yaml

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

package/components/checkbox.yaml

@@ -0,0 +1,59 @@
+# yaml-language-server: $schema=./schema.json
+kind: ComponentSpec
+metadata:
+  id: checkbox
+  name: Checkbox
+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/checkmark.yaml

@@ -0,0 +1,152 @@
+# yaml-language-server: $schema=./schema.json
+kind: ComponentSpec
+metadata:
+  id: checkmark
+  name: Checkmark
+data:
+  schema:
+    slots:
+      root:
+        properties:
+          colorDuration:
+            type: duration
+          colorTimingFunction:
+            type: cubicBezier
+          size:
+            type: dimension
+          color:
+            type: color
+          strokeColor:
+            type: color
+          strokeWidth:
+            type: dimension
+          cornerRadius:
+            type: dimension
+      icon:
+        properties:
+          color:
+            type: color
+          size:
+            type: dimension
+          colorDuration:
+            type: duration
+          colorTimingFunction:
+            type: cubicBezier
+    variants:
+      variant:
+        values:
+          square:
+            description: 필수 선택 항목이고 사용자가 해당 내용을 인지해야 하는 경우 사용합니다.
+          ghost:
+            description: 필수 선택 항목이 아니고, 3개 이하 항목으로 구성되는 경우 사용하는 것을 권장합니다.
+      tone:
+        values:
+          brand:
+            description: "[deprecated] 주요 버튼 등의 핵심 액션과 시각적으로 충돌하기에 더 이상 사용하지 않습니다."
+  definitions:
+    base:
+      enabled:
+        root:
+          colorDuration: $duration.color-transition
+          colorTimingFunction: $timing-function.easing
+    variant=square:
+      enabled:
+        root:
+          strokeWidth: 1px
+          strokeColor: $color.stroke.neutral-weak
+      pressed:
+        root:
+          color: $color.bg.transparent-pressed
+      enabled,selected:
+        root:
+          strokeWidth: 0px
+          strokeColor: "#00000000"
+      disabled:
+        root:
+          color: $color.bg.disabled
+          strokeColor: $color.stroke.neutral-muted
+        icon:
+          color: $color.fg.disabled
+      disabled,selected:
+        icon:
+          color: $color.fg.disabled
+
+    variant=square,tone=brand:
+      enabled,selected:
+        root:
+          color: $color.bg.brand-solid
+        icon:
+          color: $color.palette.static-white
+      pressed,selected:
+        root:
+          color: $color.bg.brand-solid-pressed
+    variant=square,tone=neutral:
+      enabled,selected:
+        root:
+          color: $color.bg.neutral-inverted
+        icon:
+          color: $color.fg.neutral-inverted
+      pressed,selected:
+        root:
+          color: $color.bg.neutral-inverted-pressed
+
+    variant=ghost:
+      enabled:
+        icon:
+          color: $color.fg.placeholder
+          colorDuration: $duration.color-transition
+          colorTimingFunction: $timing-function.easing
+
+      pressed:
+        root:
+          color: $color.bg.transparent-pressed
+      disabled:
+        icon:
+          color: $color.fg.disabled
+      disabled,selected:
+        icon:
+          color: $color.fg.disabled
+
+    variant=ghost,tone=brand:
+      enabled,selected:
+        icon:
+          color: $color.fg.brand
+      pressed,selected:
+        root:
+          color: $color.palette.carrot-200
+    variant=ghost,tone=neutral:
+      enabled,selected:
+        icon:
+          color: $color.fg.neutral
+      pressed,selected:
+        root:
+          color: $color.palette.gray-200
+
+    size=medium:
+      enabled:
+        root:
+          size: $dimension.x5
+          cornerRadius: $radius.r1
+
+    size=large:
+      enabled:
+        root:
+          size: $dimension.x6
+          cornerRadius: $radius.r1
+
+    variant=square,size=medium:
+      enabled:
+        icon:
+          size: 12px
+    variant=square,size=large:
+      enabled:
+        icon:
+          size: 14px
+    variant=ghost,size=medium:
+      enabled:
+        icon:
+          size: 14px
+    variant=ghost,size=large:
+      enabled:
+        icon:
+          size: 18px

package/components/chip-tablist.yaml

@@ -0,0 +1,28 @@
+# yaml-language-server: $schema=./schema.json
+kind: ComponentSpec
+metadata:
+  id: chip-tablist
+  name: Chip Tablist
+data:
+  schema:
+    slots:
+      root:
+        properties:
+          paddingX:
+            type: dimension
+          gap:
+            type: dimension
+  definitions:
+    base:
+      enabled:
+        root:
+          paddingX: $dimension.x4
+          gap: 8px
+    variant=neutralSolid:
+      enabled:
+        root:
+          gap: 8px
+    variant=neutralOutline:
+      enabled:
+        root:
+          gap: 8px