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

package/components/chip.yaml

@@ -0,0 +1,267 @@
+# yaml-language-server: $schema=./schema.json
+kind: ComponentSpec
+metadata:
+  id: chip
+  name: Chip
+  lastUpdated: 25-07-17
+data:
+  schema:
+    slots:
+      root:
+        properties:
+          color:
+            type: color
+          cornerRadius:
+            type: dimension
+          strokeColor:
+            type: color
+          strokeWidth:
+            type: dimension
+          height:
+            type: dimension
+          paddingX:
+            type: dimension
+          minWidth:
+            type: dimension
+          colorDuration:
+            type: duration
+          colorTimingFunction:
+            type: cubicBezier
+          opacity:
+            type: number
+      label:
+        properties:
+          color:
+            type: color
+          fontSize:
+            type: dimension
+          lineHeight:
+            type: dimension
+          fontWeight:
+            type: number
+          paddingX:
+            type: dimension
+      prefixIcon:
+        description: Icon, Avatar, Image를 넣을 수 있습니다. 들어오는 요소에 따라 좌측 여백이 달라집니다.
+        properties:
+          color:
+            type: color
+          size:
+            type: dimension
+          paddingLeft:
+            type: dimension
+      prefixAvatar:
+        properties:
+          size:
+            type: dimension
+      suffixIcon:
+        properties:
+          color:
+            type: color
+          size:
+            type: dimension
+          paddingRight:
+            type: dimension
+      icon:
+        properties:
+          color:
+            type: color
+          size:
+            type: dimension
+    variants:
+      variant:
+        values:
+          solid:
+            description: 기본 스타일입니다.
+          outlineStrong:
+            description: 명확한 구분이 필요한 경우 사용합니다.
+          outlineWeak:
+            description: Selection 사용 시 주목도가 낮은 스타일로 권장됩니다.
+  definitions:
+    base:
+      enabled:
+        root:
+          colorDuration: $duration.color-transition
+          colorTimingFunction: $timing-function.easing
+          cornerRadius: $radius.full
+        prefixIcon:
+          paddingLeft: $dimension.x1_5
+        prefixAvatar:
+          size: $dimension.x6
+        suffixIcon:
+          paddingRight: $dimension.x1_5
+        label:
+          fontWeight: $font-weight.medium
+          paddingX: $dimension.x1_5
+        icon:
+          color: $color.fg.neutral
+
+    variant=solid:
+      enabled:
+        root:
+          color: $color.bg.neutral-weak-alpha
+        label:
+          color: $color.fg.neutral
+        prefixIcon:
+          color: $color.fg.neutral
+        suffixIcon:
+          color: $color.fg.neutral
+        icon:
+          color: $color.fg.neutral
+      pressed:
+        root:
+          color: $color.bg.neutral-weak-alpha-pressed
+      disabled:
+        root:
+          opacity: 0.5
+      selected:
+        root:
+          color: $color.bg.neutral-inverted
+        label:
+          color: $color.fg.neutral-inverted
+        prefixIcon:
+          color: $color.fg.neutral-inverted
+        suffixIcon:
+          color: $color.fg.neutral-inverted
+        icon:
+          color: $color.fg.neutral-inverted
+      selected, pressed:
+        root:
+          color: $color.bg.neutral-inverted-pressed
+      selected, disabled:
+        root:
+          opacity: 0.5
+
+    variant=outlineStrong:
+      enabled:
+        root:
+          color: $color.bg.transparent
+          strokeColor: $color.stroke.neutral-muted
+          strokeWidth: 1px
+        label:
+          color: $color.fg.neutral
+        prefixIcon:
+          color: $color.fg.neutral
+        suffixIcon:
+          color: $color.fg.neutral
+        icon:
+          color: $color.fg.neutral
+      pressed:
+        root:
+          color: $color.bg.transparent-pressed
+      disabled:
+        root:
+          opacity: 0.5
+      selected:
+        root:
+          color: $color.bg.neutral-inverted
+        label:
+          color: $color.fg.neutral-inverted
+        prefixIcon:
+          color: $color.fg.neutral-inverted
+        suffixIcon:
+          color: $color.fg.neutral-inverted
+        icon:
+          color: $color.fg.neutral-inverted
+      selected, pressed:
+        root:
+          color: $color.bg.neutral-inverted-pressed
+      selected, disabled:
+        root:
+          opacity: 0.5
+
+    variant=outlineWeak:
+      enabled:
+        root:
+          color: $color.bg.transparent
+          strokeColor: $color.stroke.neutral-muted
+          strokeWidth: 1px
+        label:
+          color: $color.fg.neutral
+        prefixIcon:
+          color: $color.fg.neutral
+        suffixIcon:
+          color: $color.fg.neutral
+        icon:
+          color: $color.fg.neutral
+      pressed:
+        root:
+          color: $color.bg.transparent-pressed
+      disabled:
+        root:
+          opacity: 0.5
+      selected:
+        root:
+          strokeColor: $color.stroke.neutral-contrast
+          color: $color.bg.neutral-weak
+      selected, pressed:
+        root:
+          color: $color.bg.neutral-weak-pressed
+      selected, disabled:
+        root:
+          opacity: 0.5
+
+    size=small:
+      enabled:
+        root:
+          height: 32px
+          paddingX: $dimension.x1_5
+        label:
+          fontSize: $font-size.t4
+          lineHeight: $line-height.t4
+        prefixIcon:
+          size: $dimension.x3_5
+        suffixIcon:
+          size: $dimension.x3_5
+        prefixAvatar:
+          size: $dimension.x5
+        icon:
+          size: $dimension.x3_5
+    size=medium:
+      enabled:
+        root:
+          height: 36px
+          paddingX: $dimension.x2
+        label:
+          fontSize: $font-size.t4
+          lineHeight: $line-height.t4
+        prefixIcon:
+          size: $dimension.x4
+        suffixIcon:
+          size: $dimension.x3_5
+        prefixAvatar:
+          size: $dimension.x6
+        icon:
+          size: $dimension.x4
+    size=large:
+      enabled:
+        root:
+          height: 40px
+          paddingX: $dimension.x2_5
+        label:
+          fontSize: $font-size.t4
+          lineHeight: $line-height.t4
+        prefixIcon:
+          size: $dimension.x4
+          paddingLeft: $dimension.x1_5
+        suffixIcon:
+          size: $dimension.x4
+        prefixAvatar:
+          size: $dimension.x7
+        icon:
+          size: $dimension.x4
+
+    layout=withText: {}
+
+    size=small,layout=iconOnly:
+      enabled:
+        root:
+          minWidth: $dimension.x8
+    size=medium,layout=iconOnly:
+      enabled:
+        root:
+          minWidth: $dimension.x9
+    size=large,layout=iconOnly:
+      enabled:
+        root:
+          minWidth: $dimension.x10

package/components/content-placeholder.yaml

@@ -0,0 +1,45 @@
+# yaml-language-server: $schema=./schema.json
+kind: ComponentSpec
+metadata:
+  id: content-placeholder
+  name: Content Placeholder
+data:
+  schema:
+    slots:
+      root:
+        properties:
+          color:
+            type: color
+      asset:
+        properties:
+          minWidth:
+            type: dimension
+          maxWidth:
+            type: dimension
+          heightFraction:
+            type: number
+            description: root slot 대한 asset slot의 높이 비율입니다.
+          color:
+            type: color
+  definitions:
+    base:
+      enabled:
+        root:
+          color: $color.palette.gray-200
+        asset:
+          minWidth: $dimension.x4
+          maxWidth: 64px
+          heightFraction: 0.5
+          color: $color.palette.gray-400
+    type=default: {}
+    type=buySell: {}
+    type=car: {}
+    type=commerce: {}
+    type=coupon: {}
+    type=food: {}
+    type=group: {}
+    type=image: {}
+    type=jobs: {}
+    type=business: {}
+    type=post: {}
+    type=realty: {}

package/components/contextual-floating-button.yaml

@@ -0,0 +1,161 @@
+# yaml-language-server: $schema=./schema.json
+kind: ComponentSpec
+metadata:
+  id: contextual-floating-button
+  name: Contextual Floating Button
+data:
+  schema:
+    slots:
+      root:
+        properties:
+          cornerRadius:
+            type: dimension
+          shadow:
+            type: shadow
+          colorDuration:
+            type: duration
+          colorTimingFunction:
+            type: cubicBezier
+          color:
+            type: color
+          minHeight:
+            type: dimension
+          paddingX:
+            type: dimension
+          paddingY:
+            type: dimension
+          gap:
+            type: dimension
+          size:
+            type: dimension
+      progressCircle:
+        properties:
+          size:
+            type: dimension
+          thickness:
+            type: dimension
+          trackColor:
+            type: color
+          rangeColor:
+            type: color
+      label:
+        properties:
+          color:
+            type: color
+          fontSize:
+            type: dimension
+          lineHeight:
+            type: dimension
+          fontWeight:
+            type: number
+      prefixIcon:
+        properties:
+          color:
+            type: color
+          size:
+            type: dimension
+      icon:
+        properties:
+          color:
+            type: color
+          size:
+            type: dimension
+    variants:
+      variant:
+        values:
+          solid:
+            description: 배경과 대비되는 강조된 보조 액션으로 중요도 높은 행동 유도 시 적합합니다.
+          layer:
+            description: 시각적 부담 없이 부드럽게 액션을 유도합니다.
+      layout:
+        values:
+          withText:
+            description: label과 prefixIcon을 함께 표시합니다.
+          iconOnly:
+            description: icon만 표시합니다. 아이콘만으로 의미를 전달하기 때문에 접근성 레이블과 함께 사용해야 합니다.
+  definitions:
+    base:
+      enabled:
+        root:
+          cornerRadius: $radius.full
+          shadow: $shadow.s3
+          colorDuration: $duration.color-transition
+          colorTimingFunction: $timing-function.easing
+        progressCircle:
+          size: 16px
+          thickness: 2px
+    variant=solid:
+      enabled:
+        root:
+          color: $color.bg.neutral-inverted
+        progressCircle:
+          trackColor: $color.palette.gray-700
+          rangeColor: $color.fg.neutral-inverted
+        label:
+          color: $color.fg.neutral-inverted
+        prefixIcon:
+          color: $color.fg.neutral-inverted
+        icon:
+          color: $color.fg.neutral-inverted
+      pressed:
+        root:
+          color: $color.bg.neutral-inverted-pressed
+      disabled:
+        root:
+          color: $color.bg.disabled
+        label:
+          color: $color.fg.disabled
+        prefixIcon:
+          color: $color.fg.disabled
+        icon:
+          color: $color.fg.disabled
+      loading:
+        root:
+          color: $color.bg.neutral-inverted-pressed
+    variant=layer:
+      enabled:
+        root:
+          color: $color.bg.layer-floating
+        progressCircle:
+          trackColor: $color.palette.gray-500
+          rangeColor: $color.fg.neutral
+        label:
+          color: $color.fg.neutral
+        prefixIcon:
+          color: $color.fg.neutral
+        icon:
+          color: $color.fg.neutral
+      pressed:
+        root:
+          color: $color.bg.layer-floating-pressed
+      disabled:
+        root:
+          color: $color.bg.disabled
+        label:
+          color: $color.fg.disabled
+        prefixIcon:
+          color: $color.fg.disabled
+        icon:
+          color: $color.fg.disabled
+      loading:
+        root:
+          color: $color.bg.layer-floating-pressed
+    layout=withText:
+      enabled:
+        root:
+          minHeight: 36px
+          paddingX: $dimension.x3_5
+          paddingY: $dimension.x2
+          gap: $dimension.x1
+        label:
+          fontSize: $font-size.t4
+          lineHeight: $line-height.t4
+          fontWeight: $font-weight.medium
+        prefixIcon:
+          size: 16px
+    layout=iconOnly:
+      enabled:
+        root:
+          size: 44px
+        icon:
+          size: 22px

package/components/control-chip.yaml

@@ -0,0 +1,169 @@
+# yaml-language-server: $schema=./schema.json
+kind: ComponentSpec
+metadata:
+  id: control-chip
+  name: Control Chip
+  deprecated: Use Chip.Toggle or Chip.Button instead.
+  lastUpdated: 25-07-16
+data:
+  schema:
+    slots:
+      root:
+        properties:
+          strokeColor:
+            type: color
+          strokeWidth:
+            type: dimension
+          cornerRadius:
+            type: dimension
+          minHeight:
+            type: dimension
+          paddingY:
+            type: dimension
+          gap:
+            type: dimension
+          paddingX:
+            type: dimension
+          minWidth:
+            type: dimension
+          color:
+            type: color
+      label:
+        properties:
+          color:
+            type: color
+          fontWeight:
+            type: number
+          fontSize:
+            type: dimension
+          lineHeight:
+            type: dimension
+      prefixIcon:
+        properties:
+          color:
+            type: color
+          size:
+            type: dimension
+      suffixIcon:
+        properties:
+          color:
+            type: color
+          size:
+            type: dimension
+      icon:
+        properties:
+          color:
+            type: color
+          size:
+            type: dimension
+      count:
+        properties:
+          color:
+            type: color
+          fontWeight:
+            type: number
+          fontSize:
+            type: dimension
+  definitions:
+    base:
+      enabled:
+        root:
+          strokeColor: $color.stroke.neutral-muted
+          strokeWidth: 1px
+          cornerRadius: $radius.full
+        label:
+          color: $color.fg.neutral
+          fontWeight: $font-weight.medium
+        prefixIcon:
+          color: $color.fg.neutral
+        suffixIcon:
+          color: $color.fg.neutral-subtle
+        icon:
+          color: $color.fg.neutral
+        count:
+          color: $color.fg.neutral-muted
+          fontWeight: $font-weight.medium
+      pressed:
+        root:
+          color: $color.bg.layer-default-pressed
+      selected:
+        root:
+          strokeWidth: 0px
+          color: $color.bg.neutral-solid-muted
+        label:
+          color: $color.palette.static-white
+          fontWeight: $font-weight.bold
+        prefixIcon:
+          color: $color.palette.static-white
+        suffixIcon:
+          color: $color.palette.static-white
+        icon:
+          color: $color.palette.static-white
+        count:
+          color: $color.palette.static-white-alpha-800
+      selected, pressed:
+        root:
+          color: $color.bg.neutral-solid-muted-pressed
+      disabled:
+        root:
+          color: $color.bg.disabled
+        label:
+          color: $color.fg.disabled
+        prefixIcon:
+          color: $color.fg.disabled
+        suffixIcon:
+          color: $color.fg.disabled
+        icon:
+          color: $color.fg.disabled
+        count:
+          color: $color.fg.disabled
+    size=small:
+      enabled:
+        root:
+          minHeight: $dimension.x8
+          paddingY: $dimension.x1_5
+          gap: $dimension.x1
+        label:
+          fontSize: $font-size.t4
+          lineHeight: $line-height.t4
+        prefixIcon:
+          size: $dimension.x4
+        suffixIcon:
+          size: $dimension.x3_5
+        count:
+          fontSize: $font-size.t4
+    size=medium:
+      enabled:
+        root:
+          minHeight: $dimension.x9
+          paddingY: $dimension.x2
+          gap: $dimension.x1
+        label:
+          fontSize: $font-size.t4
+          lineHeight: $line-height.t4
+        prefixIcon:
+          size: $dimension.x4
+        suffixIcon:
+          size: $dimension.x3_5
+        count:
+          fontSize: $font-size.t4
+    size=small,layout=withText:
+      enabled:
+        root:
+          paddingX: $dimension.x3
+    size=small,layout=iconOnly:
+      enabled:
+        root:
+          minWidth: $dimension.x8
+        icon:
+          size: $dimension.x4
+    size=medium,layout=withText:
+      enabled:
+        root:
+          paddingX: $dimension.x3_5
+    size=medium,layout=iconOnly:
+      enabled:
+        root:
+          minWidth: $dimension.x9
+        icon:
+          size: $dimension.x4