@seed-design/rootage-artifacts 0.0.0 → 0.0.2

package/components/control-chip.yaml

@@ -3,98 +3,167 @@ kind: ComponentSpec
 metadata:
   id: control-chip
   name: Control Chip
+  deprecated: Use Chip.Toggle or Chip.Button instead.
+  lastUpdated: 25-07-16
 data:
-  base:
-    enabled:
+  schema:
+    slots:
       root:
-        strokeColor: $color.stroke.neutral
-        strokeWidth: 1px
-        cornerRadius: $radius.full
+        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:
-        color: $color.fg.neutral
-        fontWeight: $font-weight.medium
+        properties:
+          color:
+            type: color
+          fontWeight:
+            type: number
+          fontSize:
+            type: dimension
+          lineHeight:
+            type: dimension
       prefixIcon:
-        color: $color.fg.neutral
+        properties:
+          color:
+            type: color
+          size:
+            type: dimension
       suffixIcon:
-        color: $color.fg.neutral
+        properties:
+          color:
+            type: color
+          size:
+            type: dimension
       icon:
-        color: $color.fg.neutral
+        properties:
+          color:
+            type: color
+          size:
+            type: dimension
       count:
-        color: $color.fg.neutral-muted
-    pressed:
-      root:
-        color: $color.bg.layer-default-pressed
-    selected:
-      root:
-        strokeWidth: 0
-        color: $color.bg.brand-weak
-      label:
-        color: $color.fg.brand
-      prefixIcon:
-        color: $color.fg.brand
-      suffixIcon:
-        color: $color.fg.brand
-      icon:
-        color: $color.fg.brand
-      count:
-        color: $color.fg.brand
-    selected, pressed:
-      root:
-        color: $color.bg.brand-weak-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: $unit.x8
-        paddingY: $unit.x1_5
-        gap: $unit.x1
-      label:
-        fontSize: $font-size.t4
-      prefixIcon:
-        size: $unit.x4
-      suffixIcon:
-        size: $unit.x3_5
-  size=medium:
-    enabled:
-      root:
-        minHeight: $unit.x9
-        paddingY: $unit.x2
-        gap: $unit.x1
-      label:
-        fontSize: $font-size.t4
-      prefixIcon:
-        size: $unit.x4
-      suffixIcon:
-        size: $unit.x3_5
-  size=small,layout=with text:
-    enabled:
-      root:
-        paddingX: $unit.x3
-  size=small,layout=icon only:
-    enabled:
-      root:
-        minWidth: $unit.x8
-      icon:
-        size: $unit.x4
-  size=medium,layout=with text:
-    enabled:
-      root:
-        paddingX: $unit.x3_5
-  size=medium,layout=icon only:
-    enabled:
-      root:
-        minWidth: $unit.x9
-      icon:
-        size: $unit.x4
+        properties:
+          color:
+            type: color
+          fontWeight:
+            type: number
+          fontSize:
+            type: dimension
+  definitions:
+    base:
+      enabled:
+        root:
+          strokeColor: $color.stroke.neutral
+          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: 0
+          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

package/components/dialog.yaml

@@ -4,27 +4,128 @@ metadata:
   id: dialog
   name: Dialog
 data:
-  base:
-    enabled:
+  schema:
+    slots:
       backdrop:
-        background: $color.bg.overlay
+        properties:
+          color:
+            type: color
+          enterDuration:
+            type: duration
+          enterTimingFunction:
+            type: cubicBezier
+          enterOpacity:
+            type: number
+          exitDuration:
+            type: duration
+          exitTimingFunction:
+            type: cubicBezier
+          exitOpacity:
+            type: number
       content:
-        background: $color.bg.layer-default
-        borderRadius: $radius.x4
-        marginX: $unit.x8
-        paddingX: $unit.x5
-        paddingY: $unit.x5
-        maxWidth: 272px
+        properties:
+          color:
+            type: color
+          cornerRadius:
+            type: dimension
+          marginX:
+            type: dimension
+          marginY:
+            type: dimension
+          maxWidth:
+            type: dimension
+          enterDuration:
+            type: duration
+          enterTimingFunction:
+            type: cubicBezier
+          enterOpacity:
+            type: number
+          enterScale:
+            type: number
+          exitDuration:
+            type: duration
+          exitTimingFunction:
+            type: cubicBezier
+          exitOpacity:
+            type: number
       header:
-        gap: $unit.x1_5
+        properties:
+          gap:
+            type: dimension
+          paddingX:
+            type: dimension
+          paddingTop:
+            type: dimension
       footer:
-        paddingTop: $unit.x4
-        gap: $unit.x2
+        properties:
+          gap:
+            type: dimension
+          paddingX:
+            type: dimension
+          paddingTop:
+            type: dimension
+          paddingBottom:
+            type: dimension
       title:
-        color: $color.fg.neutral
-        fontSize: $font-size.t7
-        fontWeight: $font-weight.bold
+        properties:
+          color:
+            type: color
+          fontSize:
+            type: dimension
+          lineHeight:
+            type: dimension
+          fontWeight:
+            type: number
       description:
-        color: $color.fg.neutral
-        fontSize: $font-size.t5
-        fontWeight: $font-weight.regular
+        properties:
+          color:
+            type: color
+          fontSize:
+            type: dimension
+          lineHeight:
+            type: dimension
+          fontWeight:
+            type: number
+  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
+          cornerRadius: $radius.r5
+          marginX: $dimension.x8
+          marginY: $dimension.x16
+          maxWidth: 272px
+          enterDuration: $duration.d4
+          enterTimingFunction: $timing-function.enter-expressive
+          enterOpacity: 0
+          enterScale: 1.3
+          exitDuration: $duration.d2
+          exitTimingFunction: $timing-function.exit
+          exitOpacity: 0
+        header:
+          gap: $dimension.x1_5
+          paddingX: $dimension.x5
+          paddingTop: $dimension.x5
+        footer:
+          gap: $dimension.x2
+          paddingX: $dimension.x5
+          paddingTop: $dimension.x4
+          paddingBottom: $dimension.x5
+        title:
+          color: $color.fg.neutral
+          fontSize: $font-size.t7
+          lineHeight: $line-height.t7
+          fontWeight: $font-weight.bold
+        description:
+          color: $color.fg.neutral
+          fontSize: $font-size.t5
+          lineHeight: $line-height.t5
+          fontWeight: $font-weight.regular

package/components/divider.yaml

@@ -0,0 +1,17 @@
+# yaml-language-server: $schema=./schema.json
+kind: ComponentSpec
+metadata:
+  id: divider
+  name: Divider
+data:
+  schema:
+    slots:
+      root:
+        properties:
+          thickness:
+            type: dimension
+  definitions:
+    base:
+      enabled:
+        root:
+          thickness: 1px

package/components/extended-action-sheet-close-button.yaml

@@ -0,0 +1,50 @@
+# yaml-language-server: $schema=./schema.json
+kind: ComponentSpec
+metadata:
+  id: extended-action-sheet-close-button
+  name: Extended Action Sheet Close Button
+  deprecated: Use menu-sheet-close-button instead.
+data:
+  schema:
+    slots:
+      root:
+        properties:
+          color:
+            type: color
+          minHeight:
+            type: dimension
+          cornerRadius:
+            type: dimension
+          paddingX:
+            type: dimension
+          paddingY:
+            type: dimension
+          gap:
+            type: dimension
+      label:
+        properties:
+          color:
+            type: color
+          fontSize:
+            type: dimension
+          lineHeight:
+            type: dimension
+          fontWeight:
+            type: number
+  definitions:
+    base:
+      enabled:
+        root:
+          color: $color.bg.neutral-weak
+          minHeight: 52px
+          cornerRadius: $radius.r3
+          paddingX: $dimension.x5
+          paddingY: $dimension.x3_5
+        label:
+          color: $color.fg.neutral
+          fontSize: $font-size.t5
+          lineHeight: $line-height.t5
+          fontWeight: $font-weight.medium
+      pressed:
+        root:
+          color: $color.bg.neutral-weak-pressed

package/components/extended-action-sheet-item.yaml

@@ -0,0 +1,67 @@
+# yaml-language-server: $schema=./schema.json
+kind: ComponentSpec
+metadata:
+  id: extended-action-sheet-item
+  name: Extended Action Sheet Item
+  deprecated: Use menu-sheet-item instead.
+data:
+  schema:
+    slots:
+      root:
+        properties:
+          color:
+            type: color
+          minHeight:
+            type: dimension
+          paddingX:
+            type: dimension
+          paddingY:
+            type: dimension
+          gap:
+            type: dimension
+      prefixIcon:
+        properties:
+          size:
+            type: dimension
+          color:
+            type: color
+      label:
+        properties:
+          color:
+            type: color
+          fontSize:
+            type: dimension
+          lineHeight:
+            type: dimension
+          fontWeight:
+            type: number
+  definitions:
+    base:
+      enabled:
+        root:
+          color: $color.bg.neutral-weak
+          minHeight: 52px
+          paddingX: $dimension.x4
+          paddingY: $dimension.x3_5
+          gap: $dimension.x3_5
+        prefixIcon:
+          size: 22px
+        label:
+          fontSize: $font-size.t5
+          lineHeight: $line-height.t5
+          fontWeight: $font-weight.regular
+      pressed:
+        root:
+          color: $color.bg.neutral-weak-pressed
+    tone=neutral:
+      enabled:
+        prefixIcon:
+          color: $color.fg.neutral
+        label:
+          color: $color.fg.neutral
+    tone=critical:
+      enabled:
+        prefixIcon:
+          color: $color.fg.critical
+        label:
+          color: $color.fg.critical

package/components/extended-action-sheet.yaml

@@ -0,0 +1,134 @@
+# yaml-language-server: $schema=./schema.json
+kind: ComponentSpec
+metadata:
+  id: extended-action-sheet
+  name: Extended Action Sheet
+  deprecated: Use menu-sheet instead.
+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