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

package/components/manner-temp.yaml

@@ -0,0 +1,80 @@
+# yaml-language-server: $schema=./schema.json
+kind: ComponentSpec
+metadata:
+  id: manner-temp
+  name: Manner Temp
+data:
+  schema:
+    slots:
+      root:
+        properties:
+          gap:
+            type: dimension
+      label:
+        properties:
+          fontSize:
+            type: dimension
+          lineHeight:
+            type: dimension
+          fontWeight:
+            type: number
+          color:
+            type: color
+      emote:
+        properties:
+          size:
+            type: dimension
+          bleed:
+            type: dimension
+  definitions:
+    base:
+      enabled:
+        root:
+          gap: $dimension.x1
+        label:
+          fontSize: $font-size.t5
+          lineHeight: $line-height.t5
+          fontWeight: $font-weight.bold
+        emote:
+          size: $dimension.x8
+          bleed: $dimension.x1
+    level=l1:
+      enabled:
+        label:
+          color: $color.manner-temp.l1.text
+    level=l2:
+      enabled:
+        label:
+          color: $color.manner-temp.l2.text
+    level=l3:
+      enabled:
+        label:
+          color: $color.manner-temp.l3.text
+    level=l4:
+      enabled:
+        label:
+          color: $color.manner-temp.l4.text
+    level=l5:
+      enabled:
+        label:
+          color: $color.manner-temp.l5.text
+    level=l6:
+      enabled:
+        label:
+          color: $color.manner-temp.l6.text
+    level=l7:
+      enabled:
+        label:
+          color: $color.manner-temp.l7.text
+    level=l8:
+      enabled:
+        label:
+          color: $color.manner-temp.l8.text
+    level=l9:
+      enabled:
+        label:
+          color: $color.manner-temp.l9.text
+    level=l10:
+      enabled:
+        label:
+          color: $color.manner-temp.l10.text

package/components/menu-item.yaml

@@ -0,0 +1,156 @@
+# yaml-language-server: $schema=./schema.json
+kind: ComponentSpec
+metadata:
+  id: menu-item
+  name: Menu Item
+data:
+  schema:
+    slots:
+      root:
+        properties:
+          color:
+            type: color
+          marginX:
+            type: dimension
+          cornerRadius:
+            type: dimension
+          colorDuration:
+            type: duration
+          colorTimingFunction:
+            type: cubicBezier
+          marginDuration:
+            type: duration
+          marginTimingFunction:
+            type: cubicBezier
+          borderRadiusDuration:
+            type: duration
+          borderRadiusTimingFunction:
+            type: cubicBezier
+          paddingX:
+            type: dimension
+          paddingY:
+            type: dimension
+          gap:
+            type: dimension
+      prefixIcon:
+        properties:
+          size:
+            type: dimension
+          color:
+            type: color
+      suffixIcon:
+        properties:
+          size:
+            type: dimension
+          color:
+            type: color
+      body:
+        properties:
+          gap:
+            type: dimension
+      label:
+        properties:
+          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
+    variants:
+      tone:
+        values:
+          neutral:
+            description: 일반적인 작업을 수행하는 기본 아이템입니다.
+          critical:
+            description: 데이터 삭제와 같이 되돌릴 수 없는 작업을 수행하는 아이템입니다.
+  definitions:
+    base:
+      enabled:
+        root:
+          colorDuration: $duration.color-transition
+          colorTimingFunction: $timing-function.easing
+          marginDuration: $duration.d3
+          marginTimingFunction: $timing-function.easing
+          borderRadiusDuration: $duration.d3
+          borderRadiusTimingFunction: $timing-function.easing
+        body:
+          gap: $dimension.x0_5
+        label:
+          fontWeight: $font-weight.regular
+        description:
+          fontWeight: $font-weight.regular
+          color: $color.fg.neutral-subtle
+      pressed:
+        root:
+          color: $color.bg.transparent-pressed
+          marginX: $dimension.x2
+          cornerRadius: $radius.r3
+      disabled:
+        prefixIcon:
+          color: $color.fg.disabled
+        suffixIcon:
+          color: $color.fg.disabled
+        label:
+          color: $color.fg.disabled
+        description:
+          color: $color.fg.disabled
+    size=medium:
+      enabled:
+        root:
+          paddingX: $dimension.x4
+          paddingY: $dimension.x3
+          gap: $dimension.x3
+        prefixIcon:
+          size: 22px
+        suffixIcon:
+          size: 18px
+        label:
+          fontSize: $font-size.t5
+          lineHeight: $line-height.t5
+        description:
+          fontSize: $font-size.t3
+          lineHeight: $line-height.t3
+    size=small:
+      enabled:
+        root:
+          paddingX: $dimension.x4
+          paddingY: $dimension.x2_5
+          gap: $dimension.x2
+        prefixIcon:
+          size: 18px
+        suffixIcon:
+          size: 16px
+        label:
+          fontSize: $font-size.t4
+          lineHeight: $line-height.t4
+        description:
+          fontSize: $font-size.t2
+          lineHeight: $line-height.t2
+    tone=neutral:
+      enabled:
+        prefixIcon:
+          color: $color.fg.neutral
+        suffixIcon:
+          color: $color.fg.neutral
+        label:
+          color: $color.fg.neutral
+    tone=critical:
+      enabled:
+        prefixIcon:
+          color: $color.fg.critical
+        suffixIcon:
+          color: $color.fg.critical
+        label:
+          color: $color.fg.critical

package/components/menu-sheet-close-button.yaml

@@ -0,0 +1,48 @@
+# yaml-language-server: $schema=./schema.json
+kind: ComponentSpec
+metadata:
+  id: menu-sheet-close-button
+  name: Menu Sheet Close Button
+  deprecated: No longer used. Menu Sheet now uses a handle instead of a close 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
+          fontSize:
+            type: dimension
+          lineHeight:
+            type: dimension
+          fontWeight:
+            type: number
+  definitions:
+    base:
+      enabled:
+        root:
+          color: $color.bg.neutral-weak
+          minHeight: 52px
+          cornerRadius: $radius.r3
+          paddingX: $dimension.x5
+          paddingY: $dimension.x3_5
+        label:
+          color: $color.fg.neutral
+          fontSize: $font-size.t5
+          lineHeight: $line-height.t5
+          fontWeight: $font-weight.medium
+      pressed:
+        root:
+          color: $color.bg.neutral-weak-pressed

package/components/menu-sheet-item.yaml

@@ -0,0 +1,104 @@
+# yaml-language-server: $schema=./schema.json
+kind: ComponentSpec
+metadata:
+  id: menu-sheet-item
+  name: Menu Sheet Item
+data:
+  schema:
+    slots:
+      root:
+        properties:
+          color:
+            type: color
+          minHeight:
+            type: dimension
+          paddingX:
+            type: dimension
+          paddingY:
+            type: dimension
+          gap:
+            type: dimension
+      prefixIcon:
+        properties:
+          size:
+            type: dimension
+          color:
+            type: color
+      content:
+        properties:
+          gap:
+            type: dimension
+      label:
+        properties:
+          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
+    variants:
+      tone:
+        values:
+          neutral:
+            description: 일반적인 작업을 수행하는 기본 아이템입니다.
+          critical:
+            description: 데이터 삭제와 같이 되돌릴 수 없는 작업을 수행하는 아이템입니다.
+      labelAlign:
+        values:
+          left:
+            description: 라벨을 왼쪽 정렬합니다.
+          center:
+            description: 라벨을 중앙 정렬합니다.
+  definitions:
+    base:
+      enabled:
+        root:
+          color: $color.bg.neutral-weak
+          minHeight: 52px
+          paddingX: $dimension.x4
+          paddingY: $dimension.x3_5
+          gap: $dimension.x3_5
+        prefixIcon:
+          size: 22px
+        content:
+          gap: $dimension.x0_5
+        label:
+          fontSize: $font-size.t5
+          lineHeight: $line-height.t5
+          fontWeight: $font-weight.regular
+        description:
+          fontSize: $font-size.t3
+          lineHeight: $line-height.t3
+          fontWeight: $font-weight.medium
+          color: $color.fg.neutral-subtle
+      pressed:
+        root:
+          color: $color.bg.neutral-weak-pressed
+    tone=neutral:
+      enabled:
+        prefixIcon:
+          color: $color.fg.neutral
+        label:
+          color: $color.fg.neutral
+    tone=critical:
+      enabled:
+        prefixIcon:
+          color: $color.fg.critical
+        label:
+          color: $color.fg.critical
+    labelAlign=left:
+      enabled: {}
+    labelAlign=center:
+      enabled: {}

package/components/menu-sheet.yaml

@@ -0,0 +1,136 @@
+# yaml-language-server: $schema=./schema.json
+kind: ComponentSpec
+metadata:
+  id: menu-sheet
+  name: Menu 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
+          paddingX:
+            type: dimension
+          paddingY:
+            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
+      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
+      list:
+        properties:
+          gap:
+            type: dimension
+      group:
+        properties:
+          cornerRadius:
+            type: dimension
+      divider:
+        properties:
+          strokeBottomWidth:
+            type: dimension
+          strokeColor:
+            type: color
+      footer:
+        properties:
+          paddingTop:
+            type: dimension
+  definitions:
+    base:
+      enabled:
+        backdrop:
+          color: $color.bg.overlay
+          enterDuration: $duration.d2
+          enterTimingFunction: $timing-function.enter
+          enterOpacity: 0
+          exitDuration: $duration.d2
+          exitTimingFunction: $timing-function.exit
+          exitOpacity: 0
+        content:
+          color: $color.bg.layer-floating
+          maxWidth: 480px
+          paddingX: $dimension.spacing-x.global-gutter
+          paddingY: $dimension.x4
+          topCornerRadius: $radius.r5
+          enterDuration: $duration.d6
+          enterTimingFunction: $timing-function.enter-expressive
+          # Do we need translateY definition here?
+          exitDuration: $duration.d4
+          exitTimingFunction: $timing-function.exit
+        header:
+          gap: $dimension.x1
+          paddingTop: $dimension.x2
+          paddingBottom: $dimension.x4
+        title:
+          fontSize: $font-size.t6
+          lineHeight: $line-height.t6
+          fontWeight: $font-weight.bold
+          color: $color.fg.neutral
+        description:
+          fontSize: $font-size.t4
+          lineHeight: $line-height.t4
+          fontWeight: $font-weight.regular
+          color: $color.fg.neutral-muted
+        # We might need description in near future
+        list:
+          gap: $dimension.x2_5
+        group:
+          cornerRadius: $radius.r4
+        divider:
+          strokeBottomWidth: 1px
+          strokeColor: $color.stroke.neutral-muted
+        footer:
+          paddingTop: $dimension.x2_5

package/components/menu.yaml

@@ -0,0 +1,117 @@
+# yaml-language-server: $schema=./schema.json
+kind: ComponentSpec
+metadata:
+  id: menu
+  name: Menu
+data:
+  schema:
+    slots:
+      root:
+        properties:
+          cornerRadius:
+            type: dimension
+          color:
+            type: color
+          shadow:
+            type: shadow
+          paddingY:
+            type: dimension
+          gap:
+            type: dimension
+          enterDuration:
+            type: duration
+          enterTimingFunction:
+            type: cubicBezier
+          enterScale:
+            type: number
+          enterOpacity:
+            type: number
+          exitDuration:
+            type: duration
+          exitTimingFunction:
+            type: cubicBezier
+          exitScale:
+            type: number
+          exitOpacity:
+            type: number
+          gutter:
+            type: dimension
+            description: 트리거와 메뉴 사이의 간격을 정의합니다.
+          overflowPadding:
+            type: dimension
+            description: 메뉴와 뷰포트 경계 사이의 최소 간격을 정의합니다.
+          maxHeight:
+            type: dimension
+          width:
+            type: dimension
+      group:
+        properties: {}
+      groupLabel:
+        properties:
+          color:
+            type: color
+          paddingX:
+            type: dimension
+          paddingY:
+            type: dimension
+          fontSize:
+            type: dimension
+          lineHeight:
+            type: dimension
+          fontWeight:
+            type: number
+      divider:
+        properties:
+          marginX:
+            type: dimension
+          height:
+            type: dimension
+          color:
+            type: color
+
+  definitions:
+    base:
+      enabled:
+        root:
+          cornerRadius: $radius.r5
+          color: $color.bg.layer-floating
+          shadow: $shadow.s3
+          enterDuration: $duration.d3
+          enterTimingFunction: $timing-function.enter
+          enterScale: 0.95
+          enterOpacity: 0
+          exitDuration: $duration.d2
+          exitTimingFunction: $timing-function.exit
+          exitScale: 0.95
+          exitOpacity: 0
+          paddingY: $dimension.x2
+          gap: $dimension.x2
+          gutter: $dimension.x2
+          overflowPadding: $dimension.x2
+          maxHeight: 480px
+        groupLabel:
+          color: $color.fg.neutral-subtle
+        divider:
+          marginX: $dimension.x4
+          height: 1px
+          color: $color.stroke.neutral-muted
+    size=medium:
+      enabled:
+        root:
+          width: 240px
+        groupLabel:
+          paddingY: $dimension.x2_5
+          paddingX: $dimension.x4
+          fontSize: $font-size.t4
+          lineHeight: $line-height.t4
+          fontWeight: $font-weight.medium
+    size=small:
+      enabled:
+        root:
+          width: 200px
+        groupLabel:
+          paddingY: $dimension.x2
+          paddingX: $dimension.x4
+          fontSize: $font-size.t3
+          lineHeight: $line-height.t3
+          fontWeight: $font-weight.regular

package/components/notification-badge.yaml

@@ -0,0 +1,74 @@
+# yaml-language-server: $schema=./schema.json
+kind: ComponentSpec
+metadata:
+  id: notification-badge
+  name: Notification Badge
+data:
+  schema:
+    slots:
+      root:
+        properties:
+          color:
+            type: color
+          minHeight:
+            type: dimension
+          paddingX:
+            type: dimension
+          paddingY:
+            type: dimension
+          cornerRadius:
+            type: dimension
+          iconAttachedInsetEnd:
+            type: dimension
+          iconAttachedInsetTop:
+            type: dimension
+          textAttachedGap:
+            type: dimension
+          size:
+            type: dimension
+      label:
+        properties:
+          color:
+            type: color
+          fontSize:
+            type: dimension
+          lineHeight:
+            type: dimension
+          fontWeight:
+            type: number
+    variants:
+      size:
+        values:
+          large:
+            description: 라벨을 포함해 구체적인 알림 수나 상태 정보를 제공합니다.
+          small:
+            description: 간결한 도트 형태로, 텍스트 없이 상태 변화만 표시합니다.
+  definitions:
+    base:
+      enabled:
+        root:
+          color: $color.bg.brand-solid
+        label:
+          color: $color.palette.static-white
+    size=large:
+      enabled:
+        root:
+          minHeight: 18px
+          paddingX: $dimension.x1
+          paddingY: 0px
+          cornerRadius: $radius.full
+          iconAttachedInsetEnd: 8px
+          iconAttachedInsetTop: 14px
+          textAttachedGap: 2px
+        label:
+          fontSize: $font-size.t1
+          lineHeight: $line-height.t1
+          fontWeight: $font-weight.bold
+    size=small:
+      enabled:
+        root:
+          size: 6px
+          cornerRadius: $radius.full
+          iconAttachedInsetEnd: 7px
+          iconAttachedInsetTop: 7px
+          textAttachedGap: 2px