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

package/components/field.yaml

@@ -0,0 +1,159 @@
+# yaml-language-server: $schema=./schema.json
+kind: ComponentSpec
+metadata:
+  id: field
+  name: Field
+data:
+  schema:
+    slots:
+      root:
+        properties:
+          gap:
+            type: dimension
+      header:
+        properties:
+          paddingX:
+            type: dimension
+          gap:
+            type: dimension
+      indicatorIcon:
+        description: 필수 입력 필드임을 나타내는 아이콘입니다. indicatorText 및 Field Label과의 조화를 위해 폰트 스케일링에 반응합니다.
+        properties:
+          color:
+            type: color
+          size:
+            type: dimension
+          paddingTop:
+            type: dimension
+          paddingLeft:
+            type: dimension
+      indicatorText:
+        properties:
+          color:
+            type: color
+          fontSize:
+            type: dimension
+          lineHeight:
+            type: dimension
+            description: Field Label과의 조화를 위해 Field Label의 lineHeight와 동일한 값을 갖습니다.
+          fontWeight:
+            type: number
+          paddingLeft:
+            type: dimension
+      footer:
+        properties:
+          paddingX:
+            type: dimension
+          gap:
+            type: dimension
+      description:
+        properties:
+          color:
+            type: color
+          fontWeight:
+            type: number
+          fontSize:
+            type: dimension
+          lineHeight:
+            type: dimension
+      descriptionIcon:
+        properties:
+          paddingRight:
+            type: dimension
+          color:
+            type: color
+          size:
+            type: dimension
+      errorMessage:
+        properties:
+          color:
+            type: color
+          fontWeight:
+            type: number
+          fontSize:
+            type: dimension
+          lineHeight:
+            type: dimension
+      errorIcon:
+        properties:
+          paddingRight:
+            type: dimension
+          color:
+            type: color
+          size:
+            type: dimension
+      characterCount:
+        properties:
+          color:
+            type: color
+          fontWeight:
+            type: number
+          fontSize:
+            type: dimension
+          lineHeight:
+            type: dimension
+      maxCharacterCount:
+        properties:
+          color:
+            type: color
+          fontWeight:
+            type: number
+          fontSize:
+            type: dimension
+          lineHeight:
+            type: dimension
+  definitions:
+    base:
+      enabled:
+        root:
+          gap: $dimension.x2
+        header:
+          paddingX: $dimension.x0_5
+          gap: $dimension.x2_5
+        indicatorIcon:
+          color: $color.fg.critical
+          size: 0.375rem # should be font scaled (6px)
+          paddingTop: 0.25rem # should be font scaled (4px)
+          paddingLeft: 0.125rem # should be font scaled (2px)
+        indicatorText:
+          color: $color.fg.neutral-subtle
+          fontSize: $font-size.t4
+          lineHeight: $line-height.t5 # intentional; not a typo
+          fontWeight: $font-weight.regular
+          paddingLeft: 0.25rem # should be font scaled (4px)
+        footer:
+          paddingX: $dimension.x0_5
+          gap: $dimension.x2
+        description:
+          color: $color.fg.neutral-subtle
+          fontWeight: $font-weight.regular
+          fontSize: $font-size.t4
+          lineHeight: $line-height.t4
+        descriptionIcon:
+          paddingRight: $dimension.x1_5
+          color: $color.fg.neutral-subtle
+          size: $dimension.x4
+        errorMessage:
+          color: $color.fg.critical
+          fontWeight: $font-weight.regular
+          fontSize: $font-size.t4
+          lineHeight: $line-height.t4
+        errorIcon:
+          paddingRight: $dimension.x1_5
+          color: $color.fg.critical
+          size: $dimension.x4
+        characterCount:
+          color: $color.fg.neutral
+          fontWeight: $font-weight.regular
+          fontSize: $font-size.t4
+          lineHeight: $line-height.t4
+        maxCharacterCount:
+          color: $color.fg.neutral-subtle
+          fontWeight: $font-weight.regular
+          fontSize: $font-size.t4
+          lineHeight: $line-height.t4
+      invalid:
+        characterCount:
+          color: $color.fg.critical
+        maxCharacterCount:
+          color: $color.fg.critical

package/components/floating-action-button.yaml

@@ -0,0 +1,99 @@
+# yaml-language-server: $schema=./schema.json
+kind: ComponentSpec
+metadata:
+  id: floating-action-button
+  name: Floating Action Button
+data:
+  schema:
+    slots:
+      root:
+        properties:
+          color:
+            type: color
+          cornerRadius:
+            type: dimension
+          shadow:
+            type: shadow
+          colorDuration:
+            type: duration
+          colorTimingFunction:
+            type: cubicBezier
+          layoutDuration:
+            type: duration
+          layoutTimingFunction:
+            type: cubicBezier
+          gap:
+            type: dimension
+          paddingX:
+            type: dimension
+          paddingY:
+            type: dimension
+          minHeight:
+            type: dimension
+          size:
+            type: dimension
+      icon:
+        properties:
+          color:
+            type: color
+          sizeDuration:
+            type: duration
+          sizeTimingFunction:
+            type: cubicBezier
+          size:
+            type: dimension
+      label:
+        properties:
+          color:
+            type: color
+          fontSize:
+            type: dimension
+          lineHeight:
+            type: dimension
+          fontWeight:
+            type: number
+    variants:
+      extended:
+        values:
+          "true":
+            description: 라벨이 포함된 확장 형태로, 버튼의 역할을 명확히 전달합니다.
+          "false":
+            description: 아이콘만 표시되는 기본 형태입니다.
+  definitions:
+    base:
+      enabled:
+        root:
+          color: $color.bg.brand-solid
+          cornerRadius: $radius.full
+          shadow: $shadow.s3
+          colorDuration: $duration.color-transition
+          colorTimingFunction: $timing-function.easing
+          layoutDuration: $duration.d4
+          layoutTimingFunction: $timing-function.easing
+        icon:
+          color: $color.palette.static-white
+          sizeDuration: $duration.d4
+          sizeTimingFunction: $timing-function.easing
+      pressed:
+        root:
+          color: $color.bg.brand-solid-pressed
+    extended=true:
+      enabled:
+        root:
+          gap: $dimension.x1
+          paddingX: $dimension.x4_5
+          paddingY: $dimension.x3
+          minHeight: 48px
+        icon:
+          size: $dimension.x5
+        label:
+          color: $color.palette.static-white
+          fontSize: $font-size.t5
+          lineHeight: $line-height.t5
+          fontWeight: $font-weight.bold
+    extended=false:
+      enabled:
+        root:
+          size: 56px
+        icon:
+          size: $dimension.x6

package/components/help-bubble.yaml

@@ -0,0 +1,127 @@
+# yaml-language-server: $schema=./schema.json
+kind: ComponentSpec
+metadata:
+  id: help-bubble
+  name: Help Bubble
+data:
+  schema:
+    slots:
+      root:
+        properties:
+          color:
+            type: color
+          cornerRadius:
+            type: dimension
+          paddingX:
+            type: dimension
+          paddingY:
+            type: dimension
+          gap:
+            type: dimension
+          enterScale:
+            type: number
+          enterOpacity:
+            type: number
+          enterDuration:
+            type: duration
+          enterTimingFunction:
+            type: cubicBezier
+          exitScale:
+            type: number
+          exitOpacity:
+            type: number
+          exitDuration:
+            type: duration
+          exitTimingFunction:
+            type: cubicBezier
+      arrow:
+        properties:
+          color:
+            type: color
+          width:
+            type: dimension
+          height:
+            type: dimension
+          cornerRadius:
+            type: dimension
+          gutter:
+            type: dimension
+            description: arrow와 타겟 요소 사이의 거리를 정의합니다.
+          padding:
+            type: dimension
+            description: arrow와 root의 경계 사이의 최소 간격을 정의합니다.
+      body:
+        properties:
+          gap:
+            type: dimension
+      title:
+        properties:
+          color:
+            type: color
+          fontSize:
+            type: dimension
+          fontWeight:
+            type: number
+          lineHeight:
+            type: dimension
+      description:
+        properties:
+          color:
+            type: color
+          fontSize:
+            type: dimension
+          fontWeight:
+            type: number
+          lineHeight:
+            type: dimension
+      closeButton:
+        properties:
+          color:
+            type: color
+          size:
+            type: dimension
+          targetSize:
+            type: dimension
+          marginTop:
+            type: dimension
+  definitions:
+    base:
+      enabled:
+        root:
+          color: $color.bg.neutral-inverted
+          cornerRadius: $radius.r3
+          paddingX: $dimension.x3
+          paddingY: $dimension.x2_5
+          gap: $dimension.x1
+          enterScale: 0.9
+          enterOpacity: 0
+          enterDuration: $duration.d4
+          enterTimingFunction: $timing-function.enter
+          exitScale: 1
+          exitOpacity: 0
+          exitDuration: $duration.d4
+          exitTimingFunction: $timing-function.easing
+        arrow:
+          color: $color.bg.neutral-inverted
+          width: 12px
+          height: 8px
+          cornerRadius: 2px
+          gutter: 4px
+          padding: 14px
+        body:
+          gap: $dimension.x0_5
+        title:
+          color: $color.fg.neutral-inverted
+          fontSize: $font-size.t3
+          fontWeight: $font-weight.bold
+          lineHeight: $line-height.t3
+        description:
+          color: $color.fg.neutral-inverted
+          fontSize: $font-size.t3
+          fontWeight: $font-weight.regular
+          lineHeight: $line-height.t3
+        closeButton:
+          color: $color.fg.neutral-inverted
+          size: $dimension.x3_5
+          targetSize: 38px
+          marginTop: $dimension.x0_5

package/components/identity-placeholder.yaml

@@ -0,0 +1,23 @@
+# yaml-language-server: $schema=./schema.json
+kind: ComponentSpec
+metadata:
+  id: identity-placeholder
+  name: Identity Placeholder
+data:
+  schema:
+    slots:
+      root:
+        properties:
+          color:
+            type: color
+      image:
+        properties:
+          color:
+            type: color
+  definitions:
+    base:
+      enabled:
+        root:
+          color: $color.palette.gray-500
+        image:
+          color: $color.palette.static-white-alpha-800

package/components/image-frame-floater.yaml

@@ -0,0 +1,18 @@
+# yaml-language-server: $schema=./schema.json
+kind: ComponentSpec
+metadata:
+  id: image-frame-floater
+  name: Image Frame Floater
+data:
+  schema:
+    slots:
+      root:
+        properties:
+          offset:
+            type: dimension
+            description: image-frame root slot의 padding property로 대체되었습니다.
+  definitions:
+    base:
+      enabled:
+        root:
+          offset: 6px

package/components/image-frame-indicator.yaml

@@ -0,0 +1,42 @@
+# yaml-language-server: $schema=./schema.json
+kind: ComponentSpec
+metadata:
+  id: image-frame-indicator
+  name: Image Frame Indicator
+data:
+  schema:
+    slots:
+      root:
+        properties:
+          color:
+            type: color
+            description: 인디케이터 배경색입니다.
+          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.palette.static-black-alpha-800
+          cornerRadius: $radius.full
+          paddingX: $dimension.x1_5
+          paddingY: $dimension.x0_5
+        label:
+          color: $color.palette.static-white
+          fontSize: $font-size.t1
+          lineHeight: $line-height.t1
+          fontWeight: $font-weight.medium

package/components/image-frame-reaction-button.yaml

@@ -0,0 +1,60 @@
+# yaml-language-server: $schema=./schema.json
+kind: ComponentSpec
+metadata:
+  id: image-frame-reaction-button
+  name: Image Frame Reaction Button
+data:
+  schema:
+    slots:
+      root:
+        description: 하트 아이콘 토글 버튼입니다. 이미지 위에서 좋아요 기능에 사용됩니다.
+        properties:
+          size:
+            type: dimension
+            description: 보이는 버튼 크기입니다.
+          targetSize:
+            type: dimension
+            description: 터치 영역 크기입니다.
+      fillIcon:
+        description: lineIcon 아래에 내려가는 하트 아이콘입니다.
+        properties:
+          gradient:
+            type: gradient
+          size:
+            type: dimension
+      lineIcon:
+        description: fillIcon 위로 올라가는 하트 아이콘입니다.
+        properties:
+          color:
+            type: color
+          size:
+            type: dimension
+  definitions:
+    base:
+      enabled:
+        root:
+          size: $dimension.x6
+          targetSize: $dimension.x10
+        fillIcon:
+          gradient:
+            type: gradient
+            value:
+              - color: $color.palette.static-black-alpha-300
+                position: 0
+              - color: $color.palette.static-black-alpha-300
+                position: 1
+          size: $dimension.x6
+        lineIcon:
+          color: $color.palette.static-white
+          size: $dimension.x6
+      selected:
+        fillIcon:
+          gradient:
+            type: gradient
+            value:
+              - color: "#FF9A56"
+                position: 0
+              - color: "#FF6600"
+                position: 1
+        lineIcon:
+          color: $color.bg.transparent

package/components/image-frame.yaml

@@ -0,0 +1,37 @@
+# yaml-language-server: $schema=./schema.json
+kind: ComponentSpec
+metadata:
+  id: image-frame
+  name: Image Frame
+data:
+  schema:
+    slots:
+      root:
+        properties:
+          strokeColor:
+            type: color
+            description: stroke 옵션 사용 시 적용되는 테두리 색상입니다.
+          strokeWidth:
+            type: dimension
+            description: stroke 옵션 사용 시 적용되는 테두리 두께입니다.
+          padding:
+            type: dimension
+            description: 내부에 오버레이 요소가 존재하는 경우 이미지 모서리와 오버레이 요소 사이의 간격입니다. 이 값은 기본값이며 변경할 수 있습니다.
+    variants:
+      stroke:
+        values:
+          "true":
+            description: 이미지 테두리에 스트로크를 표시합니다.
+          "false":
+            description: 테두리를 표시하지 않습니다.
+  definitions:
+    base:
+      enabled:
+        root:
+          padding: $dimension.x1_5
+    stroke=true:
+      enabled:
+        root:
+          strokeColor: $color.stroke.neutral-subtle
+          strokeWidth: 1px
+    stroke=false: {}