@seed-design/rootage-artifacts 0.0.0 → 0.0.2

package/components/segmented-control.yaml

@@ -1,38 +1,49 @@
 # yaml-language-server: $schema=./schema.json
-# parts: root, trigger, indicator
+# parts: root, segment, indicator
 kind: ComponentSpec
 metadata:
   id: segmented-control
   name: Segmented Control
 data:
-  base:
-    enabled:
+  schema:
+    slots:
       root:
-        padding: $unit.x1
-        cornerRadius: $radius.full
-        color: $color.bg.neutral-weak
-      trigger:
-        height: $unit.x8
-        cornerRadius: $radius.full
-        paddingX: $unit.x4
-        minWidth: 86px
-        fontSize: $font-size.t5
-        lineHeight: $line-height.t5
-        fontWeight: $font-weight.medium
-        color: $color.fg.neutral-muted
+        properties:
+          padding:
+            type: dimension
+          cornerRadius:
+            type: dimension
+          color:
+            type: color
       indicator:
-        cornerRadius: $radius.full
-        color: $color.bg.layer-default
-    pressed:
-      trigger:
-        color: $color.bg.neutral-weak-pressed
-    selected:
-      trigger:
-        color: $color.fg.neutral
-        fontWeight: $font-weight.bold
-    selected,pressed:
-      trigger:
-        color: $color.bg.layer-default-pressed
-    disabled:
-      trigger:
-        color: $color.fg.disabled
+        properties:
+          color:
+            type: color
+          cornerRadius:
+            type: dimension
+          shadow:
+            type: shadow
+          transformDuration:
+            type: duration
+          transformTimingFunction:
+            type: cubicBezier
+  definitions:
+    base:
+      enabled:
+        root:
+          padding: $dimension.x1
+          cornerRadius: $radius.full
+          color: $color.bg.neutral-weak
+        indicator:
+          color: $color.bg.layer-default
+          cornerRadius: $radius.full
+          shadow:
+            type: shadow
+            value:
+              - offsetX: 0px
+                offsetY: 1px
+                blur: 6px
+                spread: 0px
+                color: "#0000000d"
+          transformDuration: $duration.d4
+          transformTimingFunction: $timing-function.easing

package/components/select-box.yaml

@@ -0,0 +1,152 @@
+# yaml-language-server: $schema=./schema.json
+kind: ComponentSpec
+metadata:
+  id: select-box
+  name: Select Box
+data:
+  schema:
+    slots:
+      root:
+        properties:
+          paddingX:
+            type: dimension
+          paddingY:
+            type: dimension
+          gap:
+            type: dimension
+          strokeWidth:
+            type: dimension
+          strokeColor:
+            type: color
+          cornerRadius:
+            type: dimension
+          color:
+            type: color
+      content:
+        properties:
+          gap:
+            type: dimension
+      label:
+        properties:
+          color:
+            type: color
+          fontWeight:
+            type: number
+          fontSize:
+            type: dimension
+          lineHeight:
+            type: dimension
+      description:
+        properties:
+          color:
+            type: color
+          fontWeight:
+            type: number
+          fontSize:
+            type: dimension
+          lineHeight:
+            type: dimension
+      checkboxControl:
+        properties:
+          size:
+            type: dimension
+          color:
+            type: color
+          strokeWidth:
+            type: dimension
+          strokeColor:
+            type: color
+          cornerRadius:
+            type: dimension
+      checkboxIcon:
+        properties:
+          size:
+            type: dimension
+      radioControl:
+        properties:
+          size:
+            type: dimension
+          color:
+            type: color
+          strokeWidth:
+            type: dimension
+          strokeColor:
+            type: color
+          cornerRadius:
+            type: dimension
+      radioIcon:
+        properties:
+          size:
+            type: dimension
+          cornerRadius:
+            type: dimension
+  definitions:
+    base:
+      enabled:
+        root:
+          paddingX: $dimension.x4
+          paddingY: $dimension.x5
+          gap: $dimension.x2_5
+          strokeWidth: 1px
+          strokeColor: $color.stroke.neutral
+          cornerRadius: $radius.r3
+        content:
+          gap: $dimension.x0_5
+        label:
+          color: $color.fg.neutral
+          fontWeight: $font-weight.bold
+          fontSize: $font-size.t5
+          lineHeight: $line-height.t5
+        description:
+          color: $color.fg.neutral-muted
+          fontWeight: $font-weight.regular
+          fontSize: $font-size.t4
+          lineHeight: $line-height.t4
+        checkboxControl:
+          size: $dimension.x6
+          color: $color.bg.layer-default
+          strokeWidth: 1px
+          strokeColor: $color.stroke.control
+          cornerRadius: $radius.r1
+        checkboxIcon:
+          size: $dimension.x3_5
+        radioControl:
+          size: $dimension.x6
+          color: $color.bg.layer-default
+          strokeWidth: 1px
+          strokeColor: $color.stroke.control
+          cornerRadius: $radius.full
+        radioIcon:
+          size: $dimension.x2_5
+          cornerRadius: $radius.full
+
+      enabled,pressed:
+        root:
+          color: $color.bg.layer-default-pressed
+        checkboxControl:
+          color: $color.bg.layer-default-pressed
+        radioControl:
+          color: $color.bg.layer-default-pressed
+
+      enabled,selected:
+        root:
+          color: $color.bg.neutral-weak
+          strokeColor: $color.stroke.control
+        checkboxControl:
+          color: $color.bg.brand-solid
+          strokeWidth: 0
+        checkboxIcon:
+          color: $color.palette.static-white
+        radioControl:
+          color: $color.bg.brand-solid
+          strokeWidth: 0
+        radioIcon:
+          color: $color.palette.static-white
+
+      enabled,selected,pressed:
+        root:
+          color: $color.bg.neutral-weak-pressed
+        checkboxControl:
+          color: $color.bg.brand-solid-pressed
+        radioControl:
+          color: $color.bg.brand-solid-pressed

package/components/skeleton.yaml

@@ -0,0 +1,56 @@
+# yaml-language-server: $schema=./schema.json
+kind: ComponentSpec
+metadata:
+  id: skeleton
+  name: Skeleton
+data:
+  schema:
+    slots:
+      root:
+        properties:
+          color:
+            type: color
+          cornerRadius:
+            type: dimension
+      shimmer:
+        properties:
+          duration:
+            type: duration
+          timingFunction:
+            type: cubicBezier
+          color:
+            type: gradient
+  definitions:
+    base:
+      enabled:
+        shimmer:
+          duration: 1.5s
+          timingFunction: $timing-function.easing
+    radius=0:
+      enabled:
+        root:
+          cornerRadius: 0px
+    radius=8:
+      enabled:
+        root:
+          cornerRadius: 8px
+    radius=16:
+      enabled:
+        root:
+          cornerRadius: 16px
+    radius=full:
+      enabled:
+        root:
+          cornerRadius: $radius.full
+    tone=neutral:
+      enabled:
+        root:
+          color: $color.palette.gray-200
+        shimmer:
+          color: $gradient.shimmer-neutral
+    tone=magic:
+      enabled:
+        root:
+          color: $color.bg.magic-weak
+        shimmer:
+          color: $gradient.shimmer-magic

package/components/snackbar.yaml

@@ -0,0 +1,125 @@
+# yaml-language-server: $schema=./schema.json
+kind: ComponentSpec
+metadata:
+  id: snackbar
+  name: Snackbar
+data:
+  schema:
+    slots:
+      region:
+        properties:
+          paddingX:
+            type: dimension
+          paddingY:
+            type: dimension
+          offsetDuration:
+            type: duration
+          offsetTimingFunction:
+            type: cubicBezier
+      root:
+        properties:
+          color:
+            type: color
+          cornerRadius:
+            type: dimension
+          minHeight:
+            type: dimension
+          paddingX:
+            type: dimension
+          paddingY:
+            type: dimension
+          gap:
+            type: dimension
+          enterOpacity:
+            type: number
+          enterScale:
+            type: number
+          enterDuration:
+            type: duration
+          enterTimingFunction:
+            type: cubicBezier
+          exitScale:
+            type: number
+          exitOpacity:
+            type: number
+          exitDuration:
+            type: duration
+          exitTimingFunction:
+            type: cubicBezier
+      message:
+        properties:
+          color:
+            type: color
+          fontSize:
+            type: dimension
+          lineHeight:
+            type: dimension
+          fontWeight:
+            type: number
+      prefixIcon:
+        properties:
+          size:
+            type: dimension
+          color:
+            type: color
+      actionButton:
+        properties:
+          targetPaddingX:
+            type: dimension
+          targetMinHeight:
+            type: dimension
+          color:
+            type: color
+          fontSize:
+            type: dimension
+          lineHeight:
+            type: dimension
+          fontWeight:
+            type: number
+  definitions:
+    base:
+      enabled:
+        # TODO: we might split region out to a separate component
+        region:
+          paddingX: $dimension.x2
+          paddingY: $dimension.x2
+          offsetDuration: $duration.d4
+          offsetTimingFunction: $timing-function.easing
+        root:
+          color: $color.bg.neutral-solid
+          cornerRadius: $radius.r2
+          minHeight: 44px
+          paddingX: $dimension.x4
+          paddingY: $dimension.x2_5
+          gap: $dimension.x2
+          enterOpacity: 0
+          enterScale: 0.8
+          enterDuration: $duration.d3
+          enterTimingFunction: $timing-function.enter
+          exitOpacity: 0
+          exitScale: 0.8
+          exitDuration: $duration.d2
+          exitTimingFunction: $timing-function.exit
+        message:
+          color: $color.palette.static-white
+          fontSize: $font-size.t4
+          lineHeight: $line-height.t4
+          fontWeight: $font-weight.regular
+        prefixIcon:
+          size: 24px
+        actionButton:
+          targetPaddingX: $dimension.x2
+          targetMinHeight: 44px
+          color: $color.fg.brand
+          fontSize: $font-size.t4
+          lineHeight: $line-height.t4
+          fontWeight: $font-weight.bold
+    variant=default: {}
+    variant=positive:
+      enabled:
+        prefixIcon:
+          color: $color.fg.positive
+    variant=critical:
+      enabled:
+        prefixIcon:
+          color: $color.fg.critical

package/components/switch.yaml

@@ -5,52 +5,104 @@ metadata:
   id: switch
   name: Switch
 data:
-  base:
-    enabled:
-      control:
-        color: $color.palette.gray-600
-        cornerRadius: $radius.full
-      thumb:
-        color: $color.fg.static-white
-        cornerRadius: $radius.full
-    enabled,selected:
-      control:
-        color: $color.bg.brand-solid
-    disabled:
-      root:
-        opacity: 0.38
-  size=medium:
-    enabled:
-      root:
-        height: 31px
-        width: 51px
-      control:
-        paddingX: 2px
-        paddingY: 2px
-      thumb:
-        height: 27px
-        width: 27px
-        shadow:
-          type: shadow
-          value:
-            - offsetX: 0px
-              offsetY: 3px
-              blur: 8px
-              spread: 0px
-              color: "#00000026"
-            - offsetX: 0px
-              offsetY: 1px
-              blur: 3px
-              spread: 0px
-              color: "#0000000f"
-  size=small:
-    enabled:
+  schema:
+    slots:
       root:
-        height: 16px
-        width: 26px
+        properties:
+          height:
+            type: dimension
+          gap:
+            type: dimension
+          opacity:
+            type: number
       control:
-        paddingX: 2px
-        paddingY: 2px
+        properties:
+          color:
+            type: color
+          cornerRadius:
+            type: dimension
+          height:
+            type: dimension
+          width:
+            type: dimension
+          paddingX:
+            type: dimension
+          paddingY:
+            type: dimension
       thumb:
-        height: 12px
-        width: 12px
+        properties:
+          color:
+            type: color
+          cornerRadius:
+            type: dimension
+          height:
+            type: dimension
+          width:
+            type: dimension
+          shadow:
+            type: shadow
+      label:
+        properties:
+          fontSize:
+            type: dimension
+          lineHeight:
+            type: dimension
+          fontWeight:
+            type: number
+  definitions:
+    base:
+      enabled:
+        control:
+          color: $color.palette.gray-600
+          cornerRadius: $radius.full
+        thumb:
+          color: $color.palette.static-white
+          cornerRadius: $radius.full
+      enabled,selected:
+        control:
+          color: $color.bg.brand-solid
+      disabled:
+        root:
+          opacity: 0.38
+    size=medium:
+      enabled:
+        root:
+          height: 32px
+        control:
+          height: 32px
+          width: 52px
+          paddingX: 2px
+          paddingY: 2px
+        thumb:
+          height: 28px
+          width: 28px
+          shadow:
+            type: shadow
+            value:
+              - offsetX: 0px
+                offsetY: 3px
+                blur: 8px
+                spread: 0px
+                color: "#00000026"
+              - offsetX: 0px
+                offsetY: 1px
+                blur: 3px
+                spread: 0px
+                color: "#0000000f"
+    size=small:
+      enabled:
+        root:
+          height: 24px
+          gap: $dimension.x2
+        control:
+          height: 16px
+          width: 26px
+          paddingX: 2px
+          paddingY: 2px
+        thumb:
+          height: 12px
+          width: 12px
+        label:
+          fontSize: $font-size.t4
+          lineHeight: $line-height.t4
+          fontWeight: $font-weight.regular

package/components/tab.yaml

@@ -4,36 +4,54 @@ metadata:
   id: tab
   name: Tab
 data:
-  base:
-    enabled:
-      label:
-        color: $color.fg.neutral-subtle
-      notification:
-        size: $unit.x1
-        cornerRadius: $radius.full
-        color: $color.bg.brand-solid
-        marginLeft: $unit.x0_5
-    selected:
-      label:
-        color: $color.fg.neutral
-    disabled:
-      label:
-        color: $color.fg.disabled
-  size=medium:
-    enabled:
-      root:
-        minHeight: 44px
-        paddingX: $unit.x2_5
-        paddingY: $unit.x2_5
-      label:
-        fontSize: $font-size.t5
-        fontWeight: $font-weight.bold
-  size=small:
-    enabled:
+  schema:
+    slots:
       root:
-        minHeight: 40px
-        paddingX: $unit.x2_5
-        paddingY: $unit.x2_5
+        properties:
+          minHeight:
+            type: dimension
+          paddingX:
+            type: dimension
+          paddingY:
+            type: dimension
       label:
-        fontSize: $font-size.t4
-        fontWeight: $font-weight.bold
+        properties:
+          color:
+            type: color
+          fontSize:
+            type: dimension
+          lineHeight:
+            type: dimension
+          fontWeight:
+            type: number
+  definitions:
+    base:
+      enabled:
+        label:
+          color: $color.fg.neutral-subtle
+      selected:
+        label:
+          color: $color.fg.neutral
+      disabled:
+        label:
+          color: $color.fg.disabled
+    size=medium:
+      enabled:
+        root:
+          minHeight: 44px
+          paddingX: $dimension.x2_5
+          paddingY: $dimension.x2_5
+        label:
+          fontSize: $font-size.t5
+          lineHeight: $line-height.t5
+          fontWeight: $font-weight.bold
+    size=small:
+      enabled:
+        root:
+          minHeight: 40px
+          paddingX: $dimension.x2_5
+          paddingY: $dimension.x2_5
+        label:
+          fontSize: $font-size.t4
+          lineHeight: $line-height.t4
+          fontWeight: $font-weight.bold