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

package/components/action-sheet.yaml

@@ -0,0 +1,115 @@
+# yaml-language-server: $schema=./schema.json
+kind: ComponentSpec
+metadata:
+  id: action-sheet
+  name: Action Sheet
+  deprecated: Use menu-sheet instead.
+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:
+          paddingX:
+            type: dimension
+          paddingY:
+            type: dimension
+          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
+      divider:
+        properties:
+          strokeWidth:
+            type: dimension
+          strokeColor:
+            type: color
+          marginX:
+            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
+          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:
+          paddingX: $dimension.spacing-x.global-gutter
+          paddingY: $dimension.x3_5
+          gap: $dimension.x1
+        title:
+          fontSize: $font-size.t4
+          lineHeight: $line-height.t4
+          fontWeight: $font-weight.bold
+          color: $color.fg.neutral-muted
+        description:
+          fontSize: $font-size.t3
+          lineHeight: $line-height.t3
+          fontWeight: $font-weight.regular
+          color: $color.fg.neutral-muted
+        divider:
+          strokeWidth: 1px
+          strokeColor: $color.stroke.neutral-muted
+          marginX: $dimension.spacing-x.global-gutter

package/components/avatar-stack.yaml

@@ -0,0 +1,86 @@
+# yaml-language-server: $schema=./schema.json
+kind: ComponentSpec
+metadata:
+  id: avatar-stack
+  name: Avatar Stack
+data:
+  schema:
+    slots:
+      root:
+        properties:
+          gap:
+            type: dimension
+      item:
+        properties:
+          cornerRadius:
+            type: dimension
+          strokeColor:
+            type: color
+          strokeWidth:
+            type: dimension
+  definitions:
+    base:
+      enabled:
+        item:
+          cornerRadius: $radius.full
+          strokeColor: $color.bg.layer-default
+    size=20:
+      enabled:
+        root:
+          gap: -5px
+        item:
+          strokeWidth: 1px
+    size=24:
+      enabled:
+        root:
+          gap: -6px
+        item:
+          strokeWidth: 1px
+    size=36:
+      enabled:
+        root:
+          gap: -8px
+        item:
+          strokeWidth: 2px
+    size=42:
+      enabled:
+        root:
+          gap: -10px
+        item:
+          strokeWidth: 2px
+    size=48:
+      enabled:
+        root:
+          gap: -12px
+        item:
+          strokeWidth: 2px
+    size=56:
+      enabled:
+        root:
+          gap: -13px
+        item:
+          strokeWidth: 3px
+    size=64:
+      enabled:
+        root:
+          gap: -16px
+        item:
+          strokeWidth: 3px
+    size=80:
+      enabled:
+        root:
+          gap: -20px
+        item:
+          strokeWidth: 4px
+    size=96:
+      enabled:
+        root:
+          gap: -24px
+        item:
+          strokeWidth: 5px
+    size=108:
+      enabled:
+        root:
+          gap: -27px
+        item:
+          strokeWidth: 5px

package/components/avatar.yaml

@@ -0,0 +1,161 @@
+# yaml-language-server: $schema=./schema.json
+kind: ComponentSpec
+metadata:
+  id: avatar
+  name: Avatar
+data:
+  schema:
+    variants:
+      size:
+        values:
+          20:
+            description: "대표 사용처: 댓글을 남긴 사용자"
+          24:
+            description: "대표 사용처: 답글 프로필"
+          36:
+            description: "대표 사용처: 댓글 프로필"
+          42:
+            description: "대표 사용처: 게시글 상세 내 프로필"
+          48:
+            description: "대표 사용처: 작은 리스트"
+          56:
+            description: "대표 사용처: 큰 리스트"
+          64:
+            description: "대표 사용처: 프로필 상세, 캐러셀"
+          108:
+            description: "대표 사용처: 프로필 수정"
+    slots:
+      root:
+        properties:
+          cornerRadius:
+            type: dimension
+          size:
+            type: dimension
+          strokeColor:
+            type: color
+          strokeWidth:
+            type: dimension
+      badgeMask:
+        description: size=20에서는 지원되지 않습니다.
+        properties:
+          offset:
+            type: dimension
+          size:
+            type: dimension
+      badge:
+        description: size=20에서는 지원되지 않습니다.
+        properties:
+          offset:
+            type: dimension
+          size:
+            type: dimension
+  definitions:
+    base:
+      enabled:
+        root:
+          cornerRadius: $radius.full
+          strokeColor: $color.stroke.neutral-subtle
+    size=20:
+      enabled:
+        root:
+          size: 20px
+          strokeWidth: 1px
+    size=24:
+      enabled:
+        root:
+          size: 24px
+          strokeWidth: 1px
+        badgeMask:
+          offset: 14px
+          size: 12px
+        badge:
+          offset: 15px
+          size: 10px
+    size=36:
+      enabled:
+        root:
+          size: 36px
+          strokeWidth: 1px
+        badgeMask:
+          offset: 20px
+          size: 18px
+        badge:
+          offset: 22px
+          size: 14px
+    size=42:
+      enabled:
+        root:
+          size: 42px
+          strokeWidth: 1px
+        badgeMask:
+          offset: 24px
+          size: 20px
+        badge:
+          offset: 26px
+          size: 16px
+    size=48:
+      enabled:
+        root:
+          size: 48px
+          strokeWidth: 1px
+        badgeMask:
+          offset: 28px
+          size: 22px
+        badge:
+          offset: 30px
+          size: 18px
+    size=56:
+      enabled:
+        root:
+          size: 56px
+          strokeWidth: 1px
+        badgeMask:
+          offset: 34px
+          size: 24px
+        badge:
+          offset: 36px
+          size: 20px
+    size=64:
+      enabled:
+        root:
+          size: 64px
+          strokeWidth: 1px
+        badgeMask:
+          offset: 40px
+          size: 26px
+        badge:
+          offset: 42px
+          size: 22px
+    size=80:
+      enabled:
+        root:
+          size: 80px
+          strokeWidth: 1px
+        badgeMask:
+          offset: 52px
+          size: 32px
+        badge:
+          offset: 54px
+          size: 28px
+    size=96:
+      enabled:
+        root:
+          size: 96px
+          strokeWidth: 1px
+        badgeMask:
+          offset: 62px
+          size: 38px
+        badge:
+          offset: 65px
+          size: 32px
+    size=108:
+      enabled:
+        root:
+          size: 108px
+          strokeWidth: 1px
+        badgeMask:
+          offset: 70px
+          size: 44px
+        badge:
+          offset: 74px
+          size: 36px

package/components/badge.yaml

@@ -0,0 +1,210 @@
+# yaml-language-server: $schema=./schema.json
+kind: ComponentSpec
+metadata:
+  id: badge
+  name: Badge
+data:
+  schema:
+    slots:
+      root:
+        properties:
+          maxWidth:
+            type: dimension
+            description: 10글자 이상의 텍스트를 말줄임 처리하기 위해 설정된 최대 너비입니다.
+          minHeight:
+            type: dimension
+          paddingX:
+            type: dimension
+          paddingY:
+            type: dimension
+          cornerRadius:
+            type: dimension
+          strokeWidth:
+            type: dimension
+          strokeColor:
+            type: color
+          color:
+            type: color
+      label:
+        properties:
+          fontSize:
+            type: dimension
+          lineHeight:
+            type: dimension
+          fontWeight:
+            type: number
+          color:
+            type: color
+    variants:
+      variant:
+        values:
+          solid:
+            description: 배경이 복잡하거나 이미지 위에 Badge가 겹치는 경우 사용합니다.
+          outline:
+            description: 중간 정도의 주목도가 필요한 본문 또는 상세 화면에서 사용합니다.
+          weak:
+            description: 반복적인 구조를 가진 환경에서 사용합니다. 배경색이 있는 경우에는 권장하지 않습니다.
+      tone:
+        values:
+          neutral:
+            description: 상태가 특별히 없거나, 상태값이 명확하지 않은 초기 상태
+          informative:
+            description: 베타 기능 안내, 사용자 권한 제한, 정보 기반 메시지
+          positive:
+            description: 완료, 적용됨, 승인됨, 발행됨, 저장 성공, 검토 통과
+          warning:
+            description: 만료 임박, 제출 누락, 필수 정보 부족 등 잠재적 문제 상태
+          critical:
+            description: 검수 거절, 제재 상태, 편집 불가, 유효성 검증 실패
+  definitions:
+    size=large:
+      enabled:
+        root:
+          maxWidth: 6.75rem # 108px ÷ 16
+          minHeight: $dimension.x6
+          paddingX: $dimension.x2
+          paddingY: $dimension.x1
+          cornerRadius: $radius.r1_5
+        label:
+          fontSize: $font-size.t2
+          lineHeight: $line-height.t2
+    size=medium:
+      enabled:
+        root:
+          maxWidth: 7.5rem # 120px ÷ 16
+          minHeight: $dimension.x5
+          paddingX: $dimension.x1_5
+          paddingY: $dimension.x0_5
+          cornerRadius: $radius.r1
+        label:
+          fontSize: $font-size.t1
+          lineHeight: $line-height.t1
+
+    variant=weak:
+      enabled:
+        label:
+          fontWeight: $font-weight.medium
+    variant=solid:
+      enabled:
+        label:
+          fontWeight: $font-weight.bold
+    variant=outline:
+      enabled:
+        root:
+          strokeWidth: 1px
+        label:
+          fontWeight: $font-weight.bold
+
+    tone=neutral, variant=weak:
+      enabled:
+        root:
+          color: $color.bg.neutral-weak
+        label:
+          color: $color.fg.neutral-muted
+    tone=neutral, variant=solid:
+      enabled:
+        root:
+          color: $color.palette.gray-800
+        label:
+          color: $color.fg.neutral-inverted
+    tone=neutral, variant=outline:
+      enabled:
+        root:
+          strokeColor: $color.stroke.neutral-muted
+        label:
+          color: $color.fg.neutral-muted
+
+    tone=brand, variant=weak:
+      enabled:
+        root:
+          color: $color.bg.brand-weak
+        label:
+          color: $color.fg.brand-contrast
+    tone=brand, variant=solid:
+      enabled:
+        root:
+          color: $color.bg.brand-solid
+        label:
+          color: $color.palette.static-white
+    tone=brand, variant=outline:
+      enabled:
+        root:
+          strokeColor: $color.stroke.brand-weak
+        label:
+          color: $color.fg.brand
+
+    tone=informative, variant=weak:
+      enabled:
+        root:
+          color: $color.bg.informative-weak
+        label:
+          color: $color.fg.informative-contrast
+    tone=informative, variant=solid:
+      enabled:
+        root:
+          color: $color.bg.informative-solid
+        label:
+          color: $color.palette.static-white
+    tone=informative, variant=outline:
+      enabled:
+        root:
+          strokeColor: $color.stroke.informative-weak
+        label:
+          color: $color.fg.informative
+
+    tone=positive, variant=weak:
+      enabled:
+        root:
+          color: $color.bg.positive-weak
+        label:
+          color: $color.fg.positive-contrast
+    tone=positive, variant=solid:
+      enabled:
+        root:
+          color: $color.bg.positive-solid
+        label:
+          color: $color.palette.static-white
+    tone=positive, variant=outline:
+      enabled:
+        root:
+          strokeColor: $color.stroke.positive-weak
+        label:
+          color: $color.fg.positive
+
+    tone=warning, variant=weak:
+      enabled:
+        root:
+          color: $color.bg.warning-weak
+        label:
+          color: $color.fg.warning-contrast
+    tone=warning, variant=solid:
+      enabled:
+        root:
+          color: $color.bg.warning-solid
+        label:
+          color: $color.palette.static-black-alpha-900
+    tone=warning, variant=outline:
+      enabled:
+        root:
+          strokeColor: $color.stroke.warning-weak
+        label:
+          color: $color.fg.warning
+
+    tone=critical, variant=weak:
+      enabled:
+        root:
+          color: $color.bg.critical-weak
+        label:
+          color: $color.fg.critical-contrast
+    tone=critical, variant=solid:
+      enabled:
+        root:
+          color: $color.bg.critical-solid
+        label:
+          color: $color.palette.static-white
+    tone=critical, variant=outline:
+      enabled:
+        root:
+          strokeColor: $color.stroke.critical-weak
+        label:
+          color: $color.fg.critical

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

@@ -0,0 +1,38 @@
+# yaml-language-server: $schema=./schema.json
+kind: ComponentSpec
+metadata:
+  id: bottom-sheet-close-button
+  name: Bottom Sheet Close Button
+data:
+  schema:
+    slots:
+      root:
+        properties:
+          color:
+            type: color
+          cornerRadius:
+            type: dimension
+          targetSize:
+            type: dimension
+          size:
+            type: dimension
+      icon:
+        properties:
+          color:
+            type: color
+          size:
+            type: dimension
+  definitions:
+    base:
+      enabled:
+        root:
+          color: $color.bg.neutral-weak
+          cornerRadius: $radius.full
+          targetSize: 44px
+          size: 28px
+        icon:
+          color: $color.fg.neutral
+          size: 14px
+      pressed:
+        root:
+          color: $color.bg.neutral-weak-pressed

package/components/bottom-sheet-handle.yaml

@@ -0,0 +1,48 @@
+# yaml-language-server: $schema=./schema.json
+kind: ComponentSpec
+metadata:
+  id: bottom-sheet-handle
+  name: Bottom Sheet Handle
+data:
+  schema:
+    slots:
+      root:
+        properties:
+          fromTop:
+            type: dimension
+          width:
+            type: dimension
+          height:
+            type: dimension
+          color:
+            type: color
+          borderRadius:
+            type: dimension
+          colorDuration:
+            type: duration
+          colorTimingFunction:
+            type: cubicBezier
+      touchArea:
+        properties:
+          width:
+            type: dimension
+          height:
+            type: dimension
+
+  definitions:
+    base:
+      enabled:
+        root:
+          fromTop: 6px
+          width: 36px
+          height: 4px
+          color: $color.palette.gray-400
+          borderRadius: 9999px
+          colorDuration: $duration.color-transition
+          colorTimingFunction: $timing-function.easing
+        touchArea:
+          width: 44px
+          height: 44px
+      pressed:
+        root:
+          color: $color.palette.gray-500