@seed-design/rootage-artifacts 1.1.8 → 1.2.0

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/help-bubble.yaml

@@ -16,6 +16,8 @@ data:
             type: dimension
           paddingY:
             type: dimension
+          gap:
+            type: dimension
           enterScale:
             type: number
           enterOpacity:
@@ -48,6 +50,10 @@ data:
           padding:
             type: dimension
             description: arrow와 root의 경계 사이의 최소 간격을 정의합니다.
+      body:
+        properties:
+          gap:
+            type: dimension
       title:
         properties:
           color:
@@ -72,14 +78,12 @@ data:
         properties:
           color:
             type: color
-          fromRight:
-            type: dimension
-          fromTop:
-            type: dimension
           size:
             type: dimension
           targetSize:
             type: dimension
+          marginTop:
+            type: dimension
   definitions:
     base:
       enabled:
@@ -88,6 +92,7 @@ data:
           cornerRadius: $radius.r3
           paddingX: $dimension.x3
           paddingY: $dimension.x2_5
+          gap: $dimension.x1
           enterScale: 0.9
           enterOpacity: 0
           enterDuration: $duration.d4
@@ -103,6 +108,8 @@ data:
           cornerRadius: 2px
           gutter: 4px
           padding: 14px
+        body:
+          gap: $dimension.x0_5
         title:
           color: $color.fg.neutral-inverted
           fontSize: $font-size.t3
@@ -115,7 +122,6 @@ data:
           lineHeight: $line-height.t3
         closeButton:
           color: $color.fg.neutral-inverted
-          fromRight: 12px
-          fromTop: 12px
-          size: 14px
-          targetSize: 32px
+          size: $dimension.x3_5
+          targetSize: 38px
+          marginTop: $dimension.x0_5

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: 오버레이가 이미지 프레임 가장자리에서 떨어진 거리입니다.
+  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,43 @@
+# 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:
+          color:
+            type: color
+            description: 버튼 배경색입니다.
+          cornerRadius:
+            type: dimension
+          size:
+            type: dimension
+            description: 보이는 버튼 크기입니다.
+          targetSize:
+            type: dimension
+            description: 터치 영역 크기입니다.
+      icon:
+        description: 하트 아이콘입니다. 기본 상태에서는 IconHeartLine, 선택 상태에서는 IconHeartFill을 사용합니다.
+        properties:
+          color:
+            type: color
+          size:
+            type: dimension
+  definitions:
+    base:
+      enabled:
+        root:
+          color: $color.palette.static-black-alpha-200
+          cornerRadius: $radius.full
+          size: $dimension.x6
+          targetSize: $dimension.x10
+        icon:
+          color: $color.fg.neutral-inverted
+          size: $dimension.x6
+      selected:
+        icon:
+          color: $color.fg.brand

package/components/image-frame.yaml

@@ -0,0 +1,50 @@
+# yaml-language-server: $schema=./schema.json
+kind: ComponentSpec
+metadata:
+  id: image-frame
+  name: Image Frame
+data:
+  schema:
+    slots:
+      root:
+        properties:
+          cornerRadius:
+            type: dimension
+            description: rounded 옵션 사용 시 적용되는 모서리 반경입니다.
+          strokeColor:
+            type: color
+            description: stroke 옵션 사용 시 적용되는 테두리 색상입니다.
+          strokeWidth:
+            type: dimension
+            description: stroke 옵션 사용 시 적용되는 테두리 두께입니다.
+    variants:
+      rounded:
+        values:
+          "true":
+            description: 모서리에 라운드 스타일을 적용합니다.
+          "false":
+            description: 모서리를 직각으로 유지합니다.
+      stroke:
+        values:
+          "true":
+            description: 이미지 테두리에 스트로크를 표시합니다.
+          "false":
+            description: 테두리를 표시하지 않습니다.
+  definitions:
+    rounded=true:
+      enabled:
+        root:
+          cornerRadius: $radius.r2
+    rounded=false:
+      enabled:
+        root:
+          cornerRadius: 0px
+    stroke=true:
+      enabled:
+        root:
+          strokeColor: $color.stroke.neutral-subtle
+          strokeWidth: 1px
+    stroke=false:
+      enabled:
+        root:
+          strokeWidth: 0px

package/components/input-button.yaml

@@ -26,13 +26,10 @@ data:
             type: duration
           colorTimingFunction:
             type: cubicBezier
-          strokeColorDuration:
+          strokeDuration:
             type: duration
-          strokeColorTimingFunction:
-            type: cubicBezier
-          strokeWidthDuration:
-            type: duration
-          strokeWidthTimingFunction:
+            description: 1px stroke 위에 2px stroke가 fade in/out 되는 데에 걸리는 시간입니다. stroke 두께나 색상 자체를 transition하지 않습니다.
+          strokeTimingFunction:
             type: cubicBezier
       value:
         properties:
@@ -107,10 +104,8 @@ data:
           color: $color.bg.transparent
           colorDuration: $duration.color-transition
           colorTimingFunction: $timing-function.easing
-          strokeColorDuration: $duration.color-transition
-          strokeColorTimingFunction: $timing-function.easing
-          strokeWidthDuration: $duration.color-transition
-          strokeWidthTimingFunction: $timing-function.easing
+          strokeDuration: 0.1s
+          strokeTimingFunction: $timing-function.easing
 
         value:
           fontSize: $font-size.t5

package/components/radio-group.yaml

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

package/components/select-box-checkmark.yaml

@@ -0,0 +1,52 @@
+# yaml-language-server: $schema=./schema.json
+kind: ComponentSpec
+metadata:
+  id: select-box-checkmark
+  name: Select Box Checkmark
+data:
+  schema:
+    slots:
+      root:
+        properties:
+          size:
+            type: dimension
+      icon:
+        properties:
+          size:
+            type: dimension
+          color:
+            type: color
+          colorDuration:
+            type: duration
+          colorTimingFunction:
+            type: cubicBezier
+  definitions:
+    base:
+      enabled:
+        root:
+          size: $dimension.x5
+        icon:
+          size: 15px
+          color: $color.fg.placeholder
+          colorDuration: $duration.color-transition
+          colorTimingFunction: $timing-function.easing
+
+      pressed:
+        icon:
+          color: $color.fg.neutral-subtle
+
+      enabled,selected:
+        icon:
+          color: $color.fg.neutral
+
+      enabled,selected,pressed:
+        icon:
+          color: $color.fg.neutral # being obvious
+
+      disabled:
+        icon:
+          color: $color.fg.disabled
+
+      disabled,selected:
+        icon:
+          color: $color.fg.disabled # being obvious

package/components/select-box-group.yaml

@@ -0,0 +1,20 @@
+# yaml-language-server: $schema=./schema.json
+kind: ComponentSpec
+metadata:
+  id: select-box-group
+  name: Select Box Group
+data:
+  schema:
+    slots:
+      root:
+        properties:
+          gapX:
+            type: dimension
+          gapY:
+            type: dimension
+  definitions:
+    base:
+      enabled:
+        root:
+          gapX: $dimension.x3
+          gapY: $dimension.spacing-y.component-default

package/components/select-box.yaml

@@ -8,83 +8,169 @@ data:
     slots:
       root:
         properties:
-          colorTransitionDuration:
+          cornerRadius:
+            type: dimension
+          strokeWidth:
+            type: dimension
+          strokeColor:
+            type: color
+          color:
+            type: color
+          colorDuration:
+            type: duration
+          colorTimingFunction:
+            type: cubicBezier
+          strokeDuration:
             type: duration
-          colorTransitionTimingFunction:
+            description: 1px stroke 위에 2px stroke가 fade in/out 되는 데에 걸리는 시간입니다. stroke 두께나 색상 자체를 transition하지 않습니다.
+          strokeTimingFunction:
             type: cubicBezier
+      trigger:
+        properties:
+          gap:
+            type: dimension
+          paddingLeft:
+            type: dimension
+          paddingRight:
+            type: dimension
           paddingX:
             type: dimension
           paddingY:
             type: dimension
+      content:
+        properties:
           gap:
             type: dimension
-          strokeWidth:
-            type: dimension
-          strokeColor:
-            type: color
-          cornerRadius:
-            type: dimension
+      prefixIcon:
+        properties:
           color:
             type: color
-      content:
+          size:
+            type: dimension
+      body:
         properties:
           gap:
             type: dimension
+          paddingRight:
+            type: dimension
       label:
         properties:
+          gap:
+            type: dimension
           color:
             type: color
-          fontWeight:
-            type: number
           fontSize:
             type: dimension
           lineHeight:
             type: dimension
+          fontWeight:
+            type: number
       description:
         properties:
           color:
             type: color
-          fontWeight:
-            type: number
           fontSize:
             type: dimension
           lineHeight:
             type: dimension
+          fontWeight:
+            type: number
+      footer:
+        properties:
+          expandHeightDuration:
+            type: duration
+            description: 열릴 때는 천천히 펼쳐지고 빠르게 fade in됩니다.
+          expandHeightTimingFunction:
+            type: cubicBezier
+          expandOpacityDuration:
+            type: duration
+            description: 열릴 때는 천천히 펼쳐지고 빠르게 fade in됩니다.
+          expandOpacityTimingFunction:
+            type: cubicBezier
+          collapseHeightDuration:
+            type: duration
+            description: 닫힐 때는 빠르게 접히고 천천히 fade out됩니다.
+          collapseHeightTimingFunction:
+            type: cubicBezier
+          collapseOpacityDuration:
+            type: duration
+            description: 닫힐 때는 빠르게 접히고 천천히 fade out됩니다.
+          collapseOpacityTimingFunction:
+            type: cubicBezier
   definitions:
     base:
       enabled:
         root:
-          colorTransitionDuration: $duration.color-transition
-          colorTransitionTimingFunction: $timing-function.easing
-          paddingX: $dimension.x4
-          paddingY: $dimension.x5
-          gap: $dimension.x2_5
-          strokeWidth: 1px
-          strokeColor: $color.stroke.neutral-muted
           cornerRadius: $radius.r3
           color: $color.bg.transparent
-        content:
+          strokeColor: $color.stroke.neutral-muted
+          strokeWidth: 1px
+          colorDuration: $duration.color-transition
+          colorTimingFunction: $timing-function.easing
+          strokeDuration: 0.1s
+          strokeTimingFunction: $timing-function.easing
+        trigger:
+          gap: $dimension.x1_5
+        prefixIcon:
+          color: $color.fg.neutral
+          size: 22px
+        body:
           gap: $dimension.x0_5
+          paddingRight: $dimension.x1
         label:
+          gap: $dimension.x1 # might have prefix/suffix
           color: $color.fg.neutral
-          fontWeight: $font-weight.bold
           fontSize: $font-size.t5
           lineHeight: $line-height.t5
+          fontWeight: $font-weight.medium
         description:
           color: $color.fg.neutral-muted
+          fontSize: $font-size.t3
+          lineHeight: $line-height.t3
           fontWeight: $font-weight.regular
-          fontSize: $font-size.t4
-          lineHeight: $line-height.t4
+        footer:
+          expandHeightDuration: 400ms
+          expandHeightTimingFunction: $timing-function.easing
+          expandOpacityDuration: $duration.d6
+          expandOpacityTimingFunction: $timing-function.easing
+          collapseHeightDuration: $duration.d6
+          collapseHeightTimingFunction: $timing-function.easing
+          collapseOpacityDuration: 400ms
+          collapseOpacityTimingFunction: $timing-function.easing
 
-      enabled,pressed:
+      selected:
         root:
-          color: $color.bg.transparent-pressed
-
+          strokeWidth: 2px
       enabled,selected:
         root:
-          color: $color.bg.neutral-weak
-          strokeColor: $color.stroke.neutral-weak
+          strokeColor: $color.stroke.neutral-contrast
+      disabled:
+        root:
+          strokeColor: $color.stroke.neutral-muted
+        prefixIcon:
+          color: $color.fg.disabled
+        label:
+          color: $color.fg.disabled
+        description:
+          color: $color.fg.disabled
 
-      enabled,selected,pressed:
+      enabled,pressed:
         root:
-          color: $color.bg.neutral-weak-pressed
+          color: $color.bg.transparent-pressed
+
+    layout=horizontal:
+      enabled:
+        trigger:
+          paddingLeft: $dimension.x5
+          paddingRight: $dimension.x4
+          paddingY: $dimension.x4
+        content: # aligns horizontally
+          gap: $dimension.x3
+
+    layout=vertical:
+      enabled:
+        trigger:
+          paddingX: $dimension.x4
+          paddingY: $dimension.x5
+        content: # aligns vertically
+          gap: $dimension.x2_5

package/components/{switch-mark.yaml → switchmark.yaml}

@@ -1,8 +1,10 @@
 # yaml-language-server: $schema=./schema.json
+# parts: root, thumb
 kind: ComponentSpec
 metadata:
-  id: switch-mark
-  name: Switch Mark
+  id: switchmark
+  name: Switchmark
+  lastUpdated: 25-12-16
 data:
   schema:
     slots:
@@ -63,6 +65,7 @@ data:
         values:
           brand:
             description: "[deprecated] 주요 버튼 등의 핵심 액션과 시각적으로 충돌하기에 더 이상 사용하지 않습니다."
+
   definitions:
     base:
       enabled:
@@ -90,7 +93,7 @@ data:
       selected:
         thumb:
           scale: 1.0
-    
+
     tone=brand:
       enabled:
         thumb:

package/components/text-input.yaml

@@ -26,13 +26,10 @@ data:
             type: color
           color:
             type: color
-          strokeColorDuration:
+          strokeDuration:
             type: duration
-          strokeColorTimingFunction:
-            type: cubicBezier
-          strokeWidthDuration:
-            type: duration
-          strokeWidthTimingFunction:
+            description: 1px stroke 위에 2px stroke가 fade in/out 되는 데에 걸리는 시간입니다. stroke 두께나 색상 자체를 transition하지 않습니다.
+          strokeTimingFunction:
             type: cubicBezier
       value:
         properties:
@@ -98,10 +95,8 @@ data:
       enabled:
         root:
           strokeColor: $color.stroke.neutral-weak
-          strokeColorDuration: $duration.color-transition
-          strokeColorTimingFunction: $timing-function.easing
-          strokeWidthDuration: $duration.d3
-          strokeWidthTimingFunction: $timing-function.easing
+          strokeDuration: 0.1s
+          strokeTimingFunction: $timing-function.easing
         value:
           color: $color.fg.neutral
           fontWeight: $font-weight.regular

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seed-design/rootage-artifacts",
-  "version": "1.1.8",
+  "version": "1.2.0",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/daangn/seed-design.git",