@seed-design/rootage-artifacts 0.0.0 → 0.0.1

package/components/menu-sheet.yaml

@@ -0,0 +1,133 @@
+# yaml-language-server: $schema=./schema.json
+kind: ComponentSpec
+metadata:
+  id: menu-sheet
+  name: Menu Sheet
+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
+          paddingX:
+            type: dimension
+          paddingY:
+            type: dimension
+          topCornerRadius:
+            type: dimension
+          enterDuration:
+            type: duration
+          enterTimingFunction:
+            type: cubicBezier
+          exitDuration:
+            type: duration
+          exitTimingFunction:
+            type: cubicBezier
+      header:
+        properties:
+          gap:
+            type: dimension
+          paddingBottom:
+            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
+      list:
+        properties:
+          gap:
+            type: dimension
+      group:
+        properties:
+          cornerRadius:
+            type: dimension
+      divider:
+        properties:
+          strokeBottomWidth:
+            type: dimension
+          strokeColor:
+            type: color
+      footer:
+        properties:
+          paddingTop:
+            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
+          paddingX: $dimension.spacing-x.global-gutter
+          paddingY: $dimension.x4
+          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:
+          gap: $dimension.x1
+          paddingBottom: $dimension.x4
+        title:
+          fontSize: $font-size.t6
+          lineHeight: $line-height.t6
+          fontWeight: $font-weight.bold
+          color: $color.fg.neutral
+        description:
+          fontSize: $font-size.t4
+          lineHeight: $line-height.t4
+          fontWeight: $font-weight.regular
+          color: $color.fg.neutral-muted
+        # We might need description in near future
+        list:
+          gap: $dimension.x2_5
+        group:
+          cornerRadius: $radius.r4
+        divider:
+          strokeBottomWidth: 1px
+          strokeColor: $color.stroke.neutral
+        footer:
+          paddingTop: $dimension.x2_5

package/components/notification-badge.yaml

@@ -0,0 +1,67 @@
+# yaml-language-server: $schema=./schema.json
+kind: ComponentSpec
+metadata:
+  id: notification-badge
+  name: Notification Badge
+data:
+  schema:
+    slots:
+      root:
+        properties:
+          color:
+            type: color
+          minHeight:
+            type: dimension
+          paddingX:
+            type: dimension
+          paddingY:
+            type: dimension
+          cornerRadius:
+            type: dimension
+          iconAttachedInsetEnd:
+            type: dimension
+          iconAttachedInsetTop:
+            type: dimension
+          textAttachedGap:
+            type: dimension
+          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
+        label:
+          color: $color.palette.static-white
+    size=large:
+      enabled:
+        root:
+          minHeight: 18px
+          paddingX: $dimension.x1
+          paddingY: 0px
+          cornerRadius: $radius.full
+          iconAttachedInsetEnd: 8px
+          iconAttachedInsetTop: 14px
+          textAttachedGap: 2px
+        label:
+          fontSize: $font-size.t1
+          lineHeight: $line-height.t1
+          fontWeight: $font-weight.bold
+    size=small:
+      enabled:
+        root:
+          size: 6px
+          cornerRadius: $radius.full
+          iconAttachedInsetEnd: 7px
+          iconAttachedInsetTop: 7px
+          textAttachedGap: 2px

package/components/progress-circle.yaml

@@ -1,41 +1,84 @@
 # yaml-language-server: $schema=./schema.json
-base:
-  enabled:
-    root: null
-    track:
-      fill: "#0017580d"
-    indicator:
-      color: "#d1d3d8"
-    indicator-path: null
-size=small:
-  enabled:
-    root:
-      size: $unit.x6
-    track: null
-    indicator: null
-size=medium:
-  enabled:
-    root:
-      size: $unit.x10
-    track: null
-    indicator: null
-variant=indeterminate:
-  enabled:
-    root: null
-    track: null
-    indicator: null
-    indicator-path:
-      headDashDuration: 1.2s
-      tailDashDuration: 1.2s
-      rotateDuration: 1.2s
-      headDashTimingFunction: cubic-bezier(0.35, 0, 0.65, 1)
-      tailDashTimingFunction: cubic-bezier(0.35, 0, 0.65, 0.6)
-      rotateTimingFunction: cubic-bezier(0.35, 0.25, 0.65, 0.75)
-variant=determinate:
-  enabled:
-    root: null
-    track: null
-    indicator: null
-    indicator-path:
-      transitionDuration: 0.4s
-      transitionTimingFunction: cubic-bezier(0, 0, 0.15, 1)
+kind: ComponentSpec
+metadata:
+  id: progress-circle
+  name: Progress Circle
+data:
+  schema:
+    slots:
+      root:
+        properties:
+          size:
+            type: dimension
+          thickness:
+            type: dimension
+      track:
+        properties:
+          color:
+            type: color
+      range:
+        properties:
+          color:
+            type: color
+          lengthDuration:
+            type: duration
+          lengthTimingFunction:
+            type: cubicBezier
+          rotateDuration:
+            type: duration
+          headTimingFunction:
+            type: cubicBezier
+          tailTimingFunction:
+            type: cubicBezier
+          rotateTimingFunction:
+            type: cubicBezier
+  definitions:
+    size=40:
+      enabled:
+        root:
+          size: $dimension.x10
+          thickness: 5px
+    size=24:
+      enabled:
+        root:
+          size: $dimension.x6
+          thickness: 3px
+    indeterminate=false:
+      enabled:
+        range:
+          lengthDuration: 300ms
+          lengthTimingFunction:
+            type: cubicBezier
+            value: [0, 0, 0.15, 1]
+    indeterminate=true:
+      enabled:
+        range:
+          lengthDuration: 1.2s
+          rotateDuration: 1.2s
+          headTimingFunction:
+            type: cubicBezier
+            value: [0.35, 0, 0.65, 1]
+          tailTimingFunction:
+            type: cubicBezier
+            value: [0.35, 0, 0.65, 0.6]
+          rotateTimingFunction:
+            type: cubicBezier
+            value: [0.35, 0.25, 0.65, 0.75]
+    tone=neutral:
+      enabled:
+        track:
+          color: $color.palette.gray-200
+        range:
+          color: $color.palette.gray-500
+    tone=brand:
+      enabled:
+        track:
+          color: $color.palette.carrot-200
+        range:
+          color: $color.bg.brand-solid
+    tone=staticWhite:
+      enabled:
+        track:
+          color: $color.palette.static-white-alpha-300
+        range:
+          color: $color.palette.static-white

package/components/radio.yaml

@@ -4,76 +4,72 @@ metadata:
   id: radio
   name: Radio
 data:
-  base:
-    enabled:
-      label:
-        color: $color.fg.neutral
-      control:
-        strokeColor: $color.stroke.control
-        strokeWidth: 1px
-        cornerRadius: $radius.full
-    enabled,selected:
-      control:
-        color: $color.bg.brand-solid
-      icon:
-        color: $color.fg.static-white
-    pressed:
-      control:
-        color: $color.bg.layer-default-pressed
-    pressed,selected:
-      control:
-        color: $color.bg.brand-solid-pressed
-      icon:
-        color: $color.fg.static-white
-    disabled:
-      label:
-        color: $color.fg.disabled
-      control:
-        color: $color.bg.disabled
-    disabled,selected:
-      label:
-        color: $color.fg.disabled
-      icon:
-        color: $color.bg.disabled
-  size=small:
-    enabled:
-      root:
-        gap: $unit.x2
-        minHeight: $unit.x7
-      label:
-        fontSize: $font-size.t3
-      control:
-        size: $unit.x4
-      icon:
-        size: $unit.x2
-    disabled:
-      icon:
-        size: $unit.x2
-  size=medium:
-    enabled:
+  schema:
+    slots:
       root:
-        gap: $unit.x2_5
-        minHeight: $unit.x8
-      label:
-        fontSize: $font-size.t4
-      control:
-        size: $unit.x5
-      icon:
-        size: $unit.x2
-    disabled:
-      icon:
-        size: $unit.x2_5
-  size=large:
-    enabled:
-      root:
-        gap: $unit.x3
-        minHeight: $unit.x9
-      label:
-        fontSize: $font-size.t5
-      control:
-        size: $unit.x6
-      icon:
-        size: $unit.x2_5
-    disabled:
+        properties:
+          color:
+            type: color
+          size:
+            type: dimension
+          strokeWidth:
+            type: dimension
+          strokeColor:
+            type: color
+          cornerRadius:
+            type: dimension
       icon:
-        size: $unit.x3
+        properties:
+          color:
+            type: color
+          size:
+            type: dimension
+  definitions:
+    base:
+      enabled:
+        root:
+          color: $color.bg.layer-default
+          strokeWidth: 1px
+          strokeColor: $color.stroke.control
+          cornerRadius: $radius.full
+        icon:
+          cornerRadius: $radius.full
+      enabled,pressed:
+        root:
+          color: $color.bg.layer-default-pressed
+      enabled,selected:
+        root:
+          color: $color.bg.brand-solid
+          strokeWidth: 0px
+        icon:
+          color: $color.palette.static-white
+      enabled,selected,pressed:
+        root:
+          color: $color.bg.brand-solid-pressed
+      disabled:
+        root:
+          color: $color.palette.gray-300
+      disabled,selected:
+        root:
+          strokeColor: $color.palette.gray-300
+        icon:
+          color: $color.palette.gray-300
+
+    size=large:
+      enabled:
+        root:
+          size: $dimension.x6
+        icon:
+          size: $dimension.x2_5
+      disabled:
+        icon:
+          size: $dimension.x3
+    size=medium:
+      enabled:
+        root:
+          size: $dimension.x5
+        icon:
+          size: $dimension.x2
+      disabled:
+        icon:
+          size: $dimension.x2_5

package/components/reaction-button.yaml

@@ -0,0 +1,159 @@
+# yaml-language-server: $schema=./schema.json
+kind: ComponentSpec
+metadata:
+  id: reaction-button
+  name: Reaction Button
+data:
+  schema:
+    slots:
+      root:
+        properties:
+          color:
+            type: color
+          colorDuration:
+            type: duration
+          colorTimingFunction:
+            type: cubicBezier
+          strokeColor:
+            type: color
+          strokeWidth:
+            type: dimension
+          minHeight:
+            type: dimension
+          cornerRadius:
+            type: dimension
+          gap:
+            type: dimension
+          paddingX:
+            type: dimension
+          paddingY:
+            type: dimension
+      label:
+        properties:
+          color:
+            type: color
+          fontWeight:
+            type: number
+          fontSize:
+            type: dimension
+          lineHeight:
+            type: dimension
+      count:
+        properties:
+          color:
+            type: color
+          fontWeight:
+            type: number
+          fontSize:
+            type: dimension
+          lineHeight:
+            type: dimension
+      prefixIcon:
+        properties:
+          color:
+            type: color
+          size:
+            type: dimension
+      progressCircle:
+        properties:
+          trackColor:
+            type: color
+          rangeColor:
+            type: color
+          size:
+            type: dimension
+          thickness:
+            type: dimension
+  definitions:
+    base:
+      enabled:
+        root:
+          color: $color.bg.neutral-weak
+          colorDuration: $duration.d4
+          colorTimingFunction: $timing-function.easing
+        label:
+          color: $color.fg.neutral
+          fontWeight: $font-weight.medium
+        count:
+          color: $color.fg.neutral
+          fontWeight: $font-weight.bold
+        prefixIcon:
+          color: $color.fg.neutral
+        progressCircle:
+          trackColor: $color.palette.gray-500
+          rangeColor: $color.fg.neutral
+      pressed:
+        root:
+          color: $color.bg.neutral-weak-pressed
+      selected:
+        root:
+          color: $color.bg.layer-default
+          strokeColor: $color.stroke.brand
+          strokeWidth: 1px
+        label:
+          color: $color.fg.brand
+        count:
+          color: $color.fg.brand
+        prefixIcon:
+          color: $color.fg.brand
+        progressCircle:
+          trackColor: $color.palette.carrot-200
+          rangeColor: $color.fg.brand
+      selected,pressed:
+        root:
+          color: $color.bg.layer-default-pressed
+      disabled:
+        root:
+          color: $color.bg.disabled
+          strokeWidth: 0px
+        label:
+          color: $color.fg.disabled
+        count:
+          color: $color.fg.disabled
+        prefixIcon:
+          color: $color.fg.disabled
+      loading:
+        root:
+          color: $color.bg.neutral-weak-pressed
+      selected,loading:
+        root:
+          color: $color.bg.layer-default-pressed
+          strokeWidth: 1px
+    size=xsmall:
+      enabled:
+        root:
+          minHeight: $dimension.x8
+          cornerRadius: $radius.full
+          gap: $dimension.x1
+          paddingX: $dimension.x3
+          paddingY: $dimension.x1_5
+        prefixIcon:
+          size: 18px
+        label:
+          fontSize: $font-size.t3
+          lineHeight: $line-height.t3
+        count:
+          fontSize: $font-size.t3
+          lineHeight: $line-height.t3
+        progressCircle:
+          size: 14px
+          thickness: 2px
+    size=small:
+      enabled:
+        root:
+          minHeight: $dimension.x9
+          cornerRadius: $radius.full
+          gap: $dimension.x1
+          paddingX: $dimension.x3_5
+          paddingY: $dimension.x2
+        prefixIcon:
+          size: 18px
+        label:
+          fontSize: $font-size.t3
+          lineHeight: $line-height.t3
+        count:
+          fontSize: $font-size.t3
+          lineHeight: $line-height.t3
+        progressCircle:
+          size: 14px
+          thickness: 2px

package/components/segmented-control-item.yaml

@@ -0,0 +1,54 @@
+# yaml-language-server: $schema=./schema.json
+# parts: root, segment, indicator
+kind: ComponentSpec
+metadata:
+  id: segmented-control-item
+  name: Segmented Control Item
+data:
+  schema:
+    slots:
+      root:
+        properties:
+          height:
+            type: dimension
+          cornerRadius:
+            type: dimension
+          paddingX:
+            type: dimension
+          minWidth:
+            type: dimension
+          color:
+            type: color
+      label:
+        properties:
+          fontSize:
+            type: dimension
+          lineHeight:
+            type: dimension
+          fontWeight:
+            type: number
+          color:
+            type: color
+  definitions:
+    base:
+      enabled:
+        root:
+          height: $dimension.x8
+          cornerRadius: $radius.full
+          paddingX: $dimension.x4
+          minWidth: 86px
+        label:
+          fontSize: $font-size.t5
+          lineHeight: $line-height.t5
+          fontWeight: $font-weight.medium
+          color: $color.fg.neutral-muted
+      pressed:
+        root:
+          color: $color.bg.neutral-weak-pressed
+      selected:
+        label:
+          fontWeight: $font-weight.bold
+          color: $color.fg.neutral
+      disabled:
+        label:
+          color: $color.fg.disabled