@seed-design/rootage-artifacts 0.0.0 → 0.0.1

package/components/badge.yaml

@@ -4,133 +4,156 @@ metadata:
   id: badge
   name: Badge
 data:
-  size=medium:
-    enabled:
-      root:
-        minHeight: $unit.x5
-        paddingX: $unit.x2
-        paddingY: $unit.x1
-        fontSize: $font-size.t2
-  size=small:
-    enabled:
-      root:
-        minHeight: $unit.x4
-        paddingX: $unit.x1_5
-        paddingY: $unit.x0_5
-        fontSize: $font-size.t1
-  shape=pill:
-    enabled:
-      root:
-        borderRadius: $radius.full
-  shape=rectangle, size=medium:
-    enabled:
-      root:
-        borderRadius: $radius.x1
-  shape=rectangle, size=small:
-    enabled:
-      root:
-        borderRadius: $radius.x0_5
-  variant=soft:
-    enabled:
-      label:
-        fontWeight: $font-weight.medium
-  variant=solid:
-    enabled:
-      label:
-        fontWeight: $font-weight.bold
-  variant=outlined:
-    enabled:
-      root:
-        borderWidth: 1px
-      label:
-        fontWeight: $font-weight.bold
-  tone=neutral, variant=soft:
-    enabled:
-      root:
-        color: $color.bg.neutral-weak
-      label:
-        color: $color.fg.neutral
-  tone=neutral, variant=solid:
-    enabled:
-      root:
-        color: $color.bg.neutral-solid
-      label:
-        color: $color.fg.static-white
-  tone=neutral, variant=outlined:
-    enabled:
-      root:
-        strokeColor: $color.stroke.neutral
-      label:
-        color: $color.fg.neutral
-  tone=brand, variant=soft:
-    enabled:
-      root:
-        color: $color.bg.brand-weak
-      label:
-        color: $color.fg.brand
-  tone=brand, variant=solid:
-    enabled:
-      root:
-        color: $color.bg.brand-solid
-      label:
-        color: $color.fg.static-white
-  tone=brand, variant=outlined:
-    enabled:
-      root:
-        strokeColor: $color.stroke.brand
-      label:
-        color: $color.fg.brand
-  tone=informative, variant=soft:
-    enabled:
-      root:
-        color: $color.bg.informative-weak
-      label:
-        color: $color.fg.informative
-  tone=informative, variant=solid:
-    enabled:
-      root:
-        color: $color.bg.informative-solid
-      label:
-        color: $color.fg.static-white
-  tone=informative, variant=outlined:
-    enabled:
-      root:
-        strokeColor: $color.fg.informative
-      label:
-        color: $color.fg.informative
-  tone=positive, variant=soft:
-    enabled:
-      root:
-        color: $color.bg.positive-weak
-      label:
-        color: $color.fg.positive
-  tone=positive, variant=solid:
-    enabled:
-      root:
-        color: $color.bg.positive-solid
-      label:
-        color: $color.fg.static-white
-  tone=positive, variant=outlined:
-    enabled:
-      root:
-        strokeColor: $color.stroke.positive
-      label:
-        color: $color.fg.positive
-  tone=danger, variant=soft:
-    enabled:
-      root:
-        color: $color.bg.danger-weak
-      label:
-        color: $color.fg.danger
-  tone=danger, variant=solid:
-    enabled:
-      root:
-        color: $color.bg.danger-solid
-      label:
-        color: $color.fg.static-white
-  tone=danger, variant=outlined:
-    enabled:
-      root:
-        strokeColor: $color.stroke.danger
-      label:
-        color: $color.fg.danger
+  schema:
+    slots:
+      root:
+        properties:
+          minHeight:
+            type: dimension
+          paddingX:
+            type: dimension
+          paddingY:
+            type: dimension
+          cornerRadius:
+            type: dimension
+          strokeWidth:
+            type: dimension
+          strokeColor:
+            type: color
+          color:
+            type: color
+      label:
+        properties:
+          fontSize:
+            type: dimension
+          lineHeight:
+            type: dimension
+          fontWeight:
+            type: number
+          color:
+            type: color
+  definitions:
+    size=large:
+      enabled:
+        root:
+          minHeight: $dimension.x6
+          paddingX: $dimension.x2
+          paddingY: $dimension.x1
+          cornerRadius: $radius.r1_5
+        label:
+          fontSize: $font-size.t2
+          lineHeight: $line-height.t2
+    size=medium:
+      enabled:
+        root:
+          minHeight: $dimension.x5
+          paddingX: $dimension.x1_5
+          paddingY: $dimension.x0_5
+          cornerRadius: $radius.r1
+        label:
+          fontSize: $font-size.t1
+          lineHeight: $line-height.t1
+    variant=weak:
+      enabled:
+        label:
+          fontWeight: $font-weight.medium
+    variant=solid:
+      enabled:
+        label:
+          fontWeight: $font-weight.bold
+    variant=outline:
+      enabled:
+        root:
+          strokeWidth: 1px
+        label:
+          fontWeight: $font-weight.bold
+    tone=neutral, variant=weak:
+      enabled:
+        root:
+          color: $color.bg.neutral-weak
+        label:
+          color: $color.fg.neutral-muted
+    tone=neutral, variant=solid:
+      enabled:
+        root:
+          color: $color.palette.gray-800
+        label:
+          color: $color.fg.neutral-inverted
+    tone=neutral, variant=outline:
+      enabled:
+        root:
+          strokeColor: $color.stroke.neutral
+        label:
+          color: $color.fg.neutral-muted
+    tone=brand, variant=weak:
+      enabled:
+        root:
+          color: $color.palette.carrot-100
+        label:
+          color: $color.palette.carrot-900
+    tone=brand, variant=solid:
+      enabled:
+        root:
+          color: $color.bg.brand-solid
+        label:
+          color: $color.palette.static-white
+    tone=brand, variant=outline:
+      enabled:
+        root:
+          strokeColor: $color.stroke.brand
+        label:
+          color: $color.fg.brand
+    tone=informative, variant=weak:
+      enabled:
+        root:
+          color: $color.bg.informative-weak
+        label:
+          color: $color.fg.informative-contrast
+    tone=informative, variant=solid:
+      enabled:
+        root:
+          color: $color.bg.informative-solid
+        label:
+          color: $color.palette.static-white
+    tone=informative, variant=outline:
+      enabled:
+        root:
+          strokeColor: $color.stroke.informative
+        label:
+          color: $color.fg.informative
+    tone=positive, variant=weak:
+      enabled:
+        root:
+          color: $color.bg.positive-weak
+        label:
+          color: $color.fg.positive-contrast
+    tone=positive, variant=solid:
+      enabled:
+        root:
+          color: $color.bg.positive-solid
+        label:
+          color: $color.palette.static-white
+    tone=positive, variant=outline:
+      enabled:
+        root:
+          strokeColor: $color.stroke.positive
+        label:
+          color: $color.fg.positive
+    tone=critical, variant=weak:
+      enabled:
+        root:
+          color: $color.bg.critical-weak
+        label:
+          color: $color.fg.critical-contrast
+    tone=critical, variant=solid:
+      enabled:
+        root:
+          color: $color.bg.critical-solid
+        label:
+          color: $color.palette.static-white
+    tone=critical, variant=outline:
+      enabled:
+        root:
+          strokeColor: $color.stroke.critical
+        label:
+          color: $color.fg.critical

package/components/bottom-sheet-close-button.yaml

@@ -0,0 +1,38 @@
+# yaml-language-server: $schema=./schema.json
+kind: ComponentSpec
+metadata:
+  id: bottom-sheet-close-button
+  name: Bottom Sheet Close Button
+data:
+  schema:
+    slots:
+      root:
+        properties:
+          color:
+            type: color
+          cornerRadius:
+            type: dimension
+          targetSize:
+            type: dimension
+          size:
+            type: dimension
+      icon:
+        properties:
+          color:
+            type: color
+          size:
+            type: dimension
+  definitions:
+    base:
+      enabled:
+        root:
+          color: $color.bg.neutral-weak
+          cornerRadius: $radius.full
+          targetSize: 44px
+          size: 28px
+        icon:
+          color: $color.fg.neutral
+          size: 14px
+      pressed:
+        root:
+          color: $color.bg.neutral-weak-pressed

package/components/bottom-sheet.yaml

@@ -0,0 +1,143 @@
+# yaml-language-server: $schema=./schema.json
+kind: ComponentSpec
+metadata:
+  id: bottom-sheet
+  name: Bottom 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
+          topCornerRadius:
+            type: dimension
+          enterDuration:
+            type: duration
+          enterTimingFunction:
+            type: cubicBezier
+          exitDuration:
+            type: duration
+          exitTimingFunction:
+            type: cubicBezier
+      header:
+        properties:
+          gap:
+            type: dimension
+          paddingLeft:
+            type: dimension
+          paddingRight:
+            type: dimension
+          paddingTop:
+            type: dimension
+          paddingBottom:
+            type: dimension
+      body:
+        properties:
+          paddingX:
+            type: dimension
+      footer:
+        properties:
+          paddingX:
+            type: dimension
+          paddingTop:
+            type: dimension
+          paddingBottom:
+            type: dimension
+      title:
+        properties:
+          color:
+            type: color
+          fontSize:
+            type: dimension
+          lineHeight:
+            type: dimension
+          fontWeight:
+            type: number
+      description:
+        properties:
+          color:
+            type: color
+          fontSize:
+            type: dimension
+          lineHeight:
+            type: dimension
+          fontWeight:
+            type: number
+      closeButton:
+        properties:
+          fromTop:
+            type: dimension
+          fromRight:
+            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: 640px
+          topCornerRadius: $radius.r6
+          enterDuration: $duration.d6
+          enterTimingFunction: $timing-function.enter-expressive
+          # Do we need translateY definition here?
+          exitDuration: $duration.d4
+          exitTimingFunction: $timing-function.exit
+        header:
+          gap: $dimension.x2
+          paddingTop: $dimension.x6
+          paddingBottom: $dimension.x4
+        body:
+          paddingX: $dimension.spacing-x.global-gutter
+        footer:
+          paddingX: $dimension.spacing-x.global-gutter
+          paddingTop: $dimension.x3
+          paddingBottom: $dimension.x4
+        title:
+          color: $color.fg.neutral
+          fontSize: $font-size.t8
+          lineHeight: $line-height.t8
+          fontWeight: $font-weight.bold
+        description:
+          color: $color.fg.neutral-muted
+          fontSize: $font-size.t5
+          lineHeight: $line-height.t5
+          fontWeight: $font-weight.regular
+        closeButton:
+          fromTop: $dimension.x5
+          fromRight: $dimension.x5
+    headerAlignment=left:
+      enabled:
+        header:
+          paddingLeft: $dimension.spacing-x.global-gutter
+          paddingRight: 50px
+    headerAlignment=center:
+      enabled:
+        header:
+          paddingLeft: 50px
+          paddingRight: 50px