@seed-design/rootage-artifacts 0.0.0 → 0.0.2

package/components/action-chip.yaml

@@ -3,76 +3,148 @@ kind: ComponentSpec
 metadata:
   id: action-chip
   name: Action Chip
+  deprecated: Use Chip.Button with variant="solid" instead.
+  lastUpdated: 25-07-16
 data:
-  base:
-    enabled:
+  schema:
+    slots:
       root:
-        color: $color.bg.neutral-weak
-        cornerRadius: $radius.full
+        properties:
+          color:
+            type: color
+          cornerRadius:
+            type: dimension
+          minHeight:
+            type: dimension
+          paddingY:
+            type: dimension
+          gap:
+            type: dimension
+          paddingX:
+            type: dimension
+          minWidth:
+            type: dimension
       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
-      count:
-        color: $color.fg.neutral-muted
-    pressed:
-      root:
-        color: $color.bg.neutral-weak-pressed
-    disabled:
-      root:
-        color: $color.bg.disabled
-      label:
-        color: $color.fg.disabled
-      prefixIcon:
-        color: $color.fg.disabled
-      suffixIcon:
-        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
+        properties:
+          color:
+            type: color
+          size:
+            type: dimension
       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
+          size:
+            type: dimension
+      count:
+        properties:
+          color:
+            type: color
+          fontWeight:
+            type: number
+          fontSize:
+            type: dimension
+          lineHeight:
+            type: dimension
+  definitions:
+    base:
+      enabled:
+        root:
+          color: $color.bg.neutral-weak
+          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.neutral-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: $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
+          lineHeight: $line-height.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
+          lineHeight: $line-height.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/action-sheet-close-button.yaml

@@ -0,0 +1,45 @@
+# yaml-language-server: $schema=./schema.json
+kind: ComponentSpec
+metadata:
+  id: action-sheet-close-button
+  name: Action Sheet Close Button
+  deprecated: Use menu-sheet-close-button instead.
+data:
+  schema:
+    slots:
+      root:
+        properties:
+          color:
+            type: color
+          minHeight:
+            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.bg.layer-floating
+          minHeight: 50px
+          paddingX: $dimension.spacing-x.global-gutter
+          paddingY: $dimension.x3_5
+        label:
+          fontSize: $font-size.t5
+          lineHeight: $line-height.t5
+          fontWeight: $font-weight.bold
+          color: $color.fg.neutral
+      pressed:
+        root:
+          color: $color.bg.layer-floating-pressed

package/components/action-sheet-item.yaml

@@ -0,0 +1,52 @@
+# yaml-language-server: $schema=./schema.json
+kind: ComponentSpec
+metadata:
+  id: action-sheet-item
+  name: 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
+      label:
+        properties:
+          color:
+            type: color
+          fontSize:
+            type: dimension
+          lineHeight:
+            type: dimension
+          fontWeight:
+            type: number
+  definitions:
+    base:
+      enabled:
+        root:
+          color: $color.bg.layer-floating
+          minHeight: 50px
+          paddingX: $dimension.spacing-x.global-gutter
+          paddingY: $dimension.x3_5
+        label:
+          fontSize: $font-size.t5
+          lineHeight: $line-height.t5
+          fontWeight: $font-weight.regular
+      pressed:
+        root:
+          color: $color.bg.layer-floating-pressed
+    tone=neutral:
+      enabled:
+        label:
+          color: $color.fg.neutral
+    tone=critical:
+      enabled:
+        label:
+          color: $color.fg.critical

package/components/action-sheet.yaml

@@ -0,0 +1,115 @@
+# yaml-language-server: $schema=./schema.json
+kind: ComponentSpec
+metadata:
+  id: action-sheet
+  name: 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
+          topCornerRadius:
+            type: dimension
+          enterDuration:
+            type: duration
+          enterTimingFunction:
+            type: cubicBezier
+          exitDuration:
+            type: duration
+          exitTimingFunction:
+            type: cubicBezier
+      header:
+        properties:
+          paddingX:
+            type: dimension
+          paddingY:
+            type: dimension
+          gap:
+            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
+      divider:
+        properties:
+          strokeWidth:
+            type: dimension
+          strokeColor:
+            type: color
+          marginX:
+            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
+          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:
+          paddingX: $dimension.spacing-x.global-gutter
+          paddingY: $dimension.x3_5
+          gap: $dimension.x1
+        title:
+          fontSize: $font-size.t4
+          lineHeight: $line-height.t4
+          fontWeight: $font-weight.bold
+          color: $color.fg.neutral-muted
+        description:
+          fontSize: $font-size.t3
+          lineHeight: $line-height.t3
+          fontWeight: $font-weight.regular
+          color: $color.fg.neutral-muted
+        divider:
+          strokeWidth: 1px
+          strokeColor: $color.stroke.neutral
+          marginX: $dimension.spacing-x.global-gutter

package/components/avatar-stack.yaml

@@ -0,0 +1,74 @@
+# yaml-language-server: $schema=./schema.json
+kind: ComponentSpec
+metadata:
+  id: avatar-stack
+  name: Avatar Stack
+data:
+  schema:
+    slots:
+      root:
+        properties:
+          gap:
+            type: dimension
+      item:
+        properties:
+          cornerRadius:
+            type: dimension
+          strokeColor:
+            type: color
+          strokeWidth:
+            type: dimension
+  definitions:
+    base:
+      enabled:
+        item:
+          cornerRadius: $radius.full
+          strokeColor: $color.bg.layer-default
+    size=20:
+      enabled:
+        root:
+          gap: -5px
+        item:
+          strokeWidth: 1px
+    size=24:
+      enabled:
+        root:
+          gap: -6px
+        item:
+          strokeWidth: 1px
+    size=36:
+      enabled:
+        root:
+          gap: -8px
+        item:
+          strokeWidth: 2px
+    size=42:
+      enabled:
+        root:
+          gap: -10px
+        item:
+          strokeWidth: 2px
+    size=48:
+      enabled:
+        root:
+          gap: -12px
+        item:
+          strokeWidth: 2px
+    size=64:
+      enabled:
+        root:
+          gap: -16px
+        item:
+          strokeWidth: 3px
+    size=80:
+      enabled:
+        root:
+          gap: -20px
+        item:
+          strokeWidth: 4px
+    size=96:
+      enabled:
+        root:
+          gap: -24px
+        item:
+          strokeWidth: 5px

package/components/avatar.yaml

@@ -4,52 +4,115 @@ metadata:
   id: avatar
   name: Avatar
 data:
-  base:
-    enabled:
+  schema:
+    slots:
       root:
-        cornerRadius: $radius.full
+        properties:
+          cornerRadius:
+            type: dimension
+          size:
+            type: dimension
+          strokeColor:
+            type: color
+          strokeWidth:
+            type: dimension
+      badgeMask:
+        properties:
+          offset:
+            type: dimension
+          size:
+            type: dimension
       badge:
-        cornerRadius: $radius.full
-        color: $color.bg.layer-default
-  size=20:
-    enabled:
-      root:
-        size: $unit.x5
-      badge:
-        size: $unit.x2_5
-  size=24:
-    enabled:
-      root:
-        size: $unit.x6
-      badge:
-        size: $unit.x3
-  size=36:
-    enabled:
-      root:
-        size: $unit.x9
-      badge:
-        size: $unit.x4
-  size=48:
-    enabled:
-      root:
-        size: $unit.x12
-      badge:
-        size: $unit.x6
-  size=64:
-    enabled:
-      root:
-        size: $unit.x16
-      badge:
-        size: $unit.x6
-  size=80:
-    enabled:
-      root:
-        size: 80px
-      badge:
-        size: $unit.x6
-  size=96:
-    enabled:
-      root:
-        size: 96px
-      badge:
-        size: $unit.x8
+        properties:
+          offset:
+            type: dimension
+          size:
+            type: dimension
+  definitions:
+    base:
+      enabled:
+        root:
+          cornerRadius: $radius.full
+          strokeColor: $color.stroke.on-image
+    size=20:
+      enabled:
+        root:
+          size: 20px
+          strokeWidth: 1px
+    size=24:
+      enabled:
+        root:
+          size: 24px
+          strokeWidth: 1px
+        badgeMask:
+          offset: 14px
+          size: 12px
+        badge:
+          offset: 15px
+          size: 10px
+    size=36:
+      enabled:
+        root:
+          size: 36px
+          strokeWidth: 1px
+        badgeMask:
+          offset: 20px
+          size: 18px
+        badge:
+          offset: 22px
+          size: 14px
+    size=42:
+      enabled:
+        root:
+          size: 42px
+          strokeWidth: 1px
+        badgeMask:
+          offset: 24px
+          size: 20px
+        badge:
+          offset: 26px
+          size: 16px
+    size=48:
+      enabled:
+        root:
+          size: 48px
+          strokeWidth: 1px
+        badgeMask:
+          offset: 28px
+          size: 22px
+        badge:
+          offset: 30px
+          size: 18px
+    size=64:
+      enabled:
+        root:
+          size: 64px
+          strokeWidth: 1px
+        badgeMask:
+          offset: 40px
+          size: 26px
+        badge:
+          offset: 42px
+          size: 22px
+    size=80:
+      enabled:
+        root:
+          size: 80px
+          strokeWidth: 1px
+        badgeMask:
+          offset: 52px
+          size: 32px
+        badge:
+          offset: 54px
+          size: 28px
+    size=96:
+      enabled:
+        root:
+          size: 96px
+          strokeWidth: 1px
+        badgeMask:
+          offset: 62px
+          size: 38px
+        badge:
+          offset: 65px
+          size: 32px