@seed-design/rootage-artifacts 0.0.0 → 0.0.2

package/components/extended-fab.yaml

@@ -0,0 +1,102 @@
+# yaml-language-server: $schema=./schema.json
+kind: ComponentSpec
+metadata:
+  id: extended-fab
+  name: Extended Fab
+  deprecated: Use contextual-floating-button instead.
+data:
+  schema:
+    slots:
+      root:
+        properties:
+          cornerRadius:
+            type: dimension
+          shadow:
+            type: shadow
+          color:
+            type: color
+          minHeight:
+            type: dimension
+          gap:
+            type: dimension
+          paddingX:
+            type: dimension
+          paddingY:
+            type: dimension
+      label:
+        properties:
+          color:
+            type: color
+          fontSize:
+            type: dimension
+          lineHeight:
+            type: dimension
+          fontWeight:
+            type: number
+      prefixIcon:
+        properties:
+          color:
+            type: color
+          size:
+            type: dimension
+  definitions:
+    base:
+      enabled:
+        root:
+          cornerRadius: $radius.full
+          shadow:
+            type: shadow
+            value:
+              - offsetX: 0px
+                offsetY: 2px
+                blur: 6px
+                spread: 0px
+                color: "#00000026"
+    variant=neutralSolid:
+      enabled:
+        root:
+          color: $color.bg.neutral-inverted
+        label:
+          color: $color.fg.neutral-inverted
+        prefixIcon:
+          color: $color.fg.neutral-inverted
+      pressed:
+        root:
+          color: $color.bg.neutral-inverted-pressed
+    variant=layerFloating:
+      enabled:
+        root:
+          color: $color.bg.layer-floating
+        label:
+          color: $color.fg.neutral
+        prefixIcon:
+          color: $color.fg.neutral
+      pressed:
+        root:
+          color: $color.bg.layer-floating-pressed
+    size=small:
+      enabled:
+        root:
+          minHeight: 40px
+          gap: $dimension.x1
+          paddingX: $dimension.x3_5
+          paddingY: $dimension.x2_5
+        prefixIcon:
+          size: 16px
+        label:
+          fontSize: $font-size.t4
+          lineHeight: $line-height.t4
+          fontWeight: $font-weight.medium
+    size=medium:
+      enabled:
+        root:
+          minHeight: 48px
+          gap: $dimension.x1
+          paddingX: $dimension.x4
+          paddingY: $dimension.x3
+        prefixIcon:
+          size: 16px
+        label:
+          fontSize: $font-size.t5
+          lineHeight: $line-height.t5
+          fontWeight: $font-weight.bold

package/components/fab.yaml

@@ -3,26 +3,44 @@ kind: ComponentSpec
 metadata:
   id: fab
   name: Fab
+  deprecated: Use contextual-floating-button instead.
 data:
-  base:
-    enabled:
+  schema:
+    slots:
       root:
-        color: $color.bg.layer-floating
-        borderRadius: $radius.full
+        properties:
+          color:
+            type: color
+          cornerRadius:
+            type: dimension
+          size:
+            type: dimension
+          shadow:
+            type: shadow
       icon:
-        color: $color.fg.neutral
-    pressed:
-      root:
-        color: $color.bg.layer-floating-pressed
-  size=small:
-    enabled:
-      root:
-        size: $unit.x10
-      icon:
-        size: $unit.x5
-  size=medium:
-    enabled:
-      root:
-        size: $unit.x12
-      icon:
-        size: $unit.x6
+        properties:
+          color:
+            type: color
+          size:
+            type: dimension
+  definitions:
+    base:
+      enabled:
+        root:
+          color: $color.bg.layer-floating
+          cornerRadius: $radius.full
+          size: 44px
+          shadow:
+            type: shadow
+            value:
+              - offsetX: 0px
+                offsetY: 2px
+                blur: 6px
+                spread: 0px
+                color: "#00000026"
+        icon:
+          color: $color.fg.neutral
+          size: 22px
+      pressed:
+        root:
+          color: $color.bg.layer-floating-pressed

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
+  definitions:
+    base:
+      enabled:
+        root:
+          color: $color.bg.brand-solid
+          cornerRadius: $radius.full
+          shadow:
+            type: shadow
+            value:
+              - offsetX: 0px
+                offsetY: 2px
+                blur: 6px
+                spread: 0px
+                color: "#00000026"
+          colorDuration: $duration.d4
+          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

@@ -4,39 +4,128 @@ metadata:
   id: help-bubble
   name: Help Bubble
 data:
-  base:
-    enabled:
+  schema:
+    slots:
       root:
-        cornerRadius: $radius.x1_5
-        paddingX: $unit.x3
-        paddingY: $unit.x2
+        properties:
+          color:
+            type: color
+          cornerRadius:
+            type: dimension
+          paddingX:
+            type: dimension
+          paddingY:
+            type: dimension
+          shadow:
+            type: shadow
+          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:
-        size: $unit.x2_5
+        properties:
+          color:
+            type: color
+          width:
+            type: dimension
+          height:
+            type: dimension
+          cornerRadius:
+            type: dimension
+          gutter:
+            type: dimension
+            description: arrow와 타겟 요소 사이의 거리를 정의합니다.
+          padding:
+            type: dimension
+            description: arrow와 root의 경계 사이의 최소 간격을 정의합니다.
       title:
-        fontSize: $font-size.t3
-        fontWeight: $font-weight.bold
+        properties:
+          color:
+            type: color
+          fontSize:
+            type: dimension
+          fontWeight:
+            type: number
+          lineHeight:
+            type: dimension
       description:
-        fontSize: $font-size.t3
-        fontWeight: $font-weight.regular
-  variant=non-modal:
-    enabled:
-      root:
-        color: $color.bg.neutral-solid
-      arrow:
-        color: $color.bg.neutral-solid
-      title:
-        color: $color.fg.neutral-inverted
-      description:
-        color: $color.fg.neutral-inverted
-  variant=modal:
-    enabled:
-      root:
-        color: $color.bg.static-white
-      arrow:
-        color: $color.bg.static-white
-      title:
-        color: $color.fg.static-black
-      description:
-        color: $color.fg.static-black
-      backdrop:
-        color: $color.bg.overlay
+        properties:
+          color:
+            type: color
+          fontSize:
+            type: dimension
+          fontWeight:
+            type: number
+          lineHeight:
+            type: dimension
+      closeButton:
+        properties:
+          color:
+            type: color
+          fromRight:
+            type: dimension
+          fromTop:
+            type: dimension
+          size:
+            type: dimension
+          targetSize:
+            type: dimension
+  definitions:
+    base:
+      enabled:
+        root:
+          color: $color.bg.neutral-solid
+          cornerRadius: $radius.r3
+          paddingX: $dimension.x3
+          paddingY: $dimension.x2_5
+          shadow:
+            type: shadow
+            value:
+              - color: "#00000029"
+                blur: 24px
+                offsetX: 0px
+                offsetY: 8px
+                spread: 0px
+          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-solid
+          width: 12px
+          height: 8px
+          cornerRadius: 2px
+          gutter: 4px
+          padding: 14px
+        title:
+          color: $color.palette.static-white
+          fontSize: $font-size.t3
+          fontWeight: $font-weight.bold
+          lineHeight: $line-height.t3
+        description:
+          color: $color.palette.static-white
+          fontSize: $font-size.t3
+          fontWeight: $font-weight.regular
+          lineHeight: $line-height.t3
+        closeButton:
+          color: $color.palette.static-white
+          fromRight: 12px
+          fromTop: 12px
+          size: 14px
+          targetSize: 32px

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-400
+        image:
+          color: "#f7f8fa"