@seed-design/rootage-artifacts 0.0.0 → 0.0.2

package/components/inline-banner.yaml

@@ -4,146 +4,193 @@ metadata:
   id: inline-banner
   name: Inline Banner
 data:
-  base:
-    enabled:
+  schema:
+    slots:
       root:
-        gap: $unit.x1
-        paddingXStart: $unit.x4
-        paddingXEnd: $unit.x1
-      content:
-        gap: $unit.x2
-        paddingY: 10.5px
-        fontSize: $font-size.t4
-        lineHeight: $line-height.t4
-      icon:
-        size: $unit.x4
-        marginY: 1.5px
+        properties:
+          paddingX:
+            type: dimension
+          paddingY:
+            type: dimension
+          minHeight:
+            type: dimension
+          color:
+            type: color
+      prefixIcon:
+        properties:
+          size:
+            type: dimension
+          marginRight:
+            type: dimension
+          color:
+            type: color
       title:
-        fontWeight: $font-weight.bold
-      label:
-        fontWeight: $font-weight.medium
-      linkLabel:
-        size: $unit.x10
-        paddingX: $unit.x3
-        fontWeight: $font-weight.regular
-        fontSize: $font-size.t2
-        lineHeight: $line-height.t2
-      dismissButton:
-        size: $unit.x10
-      dismissIcon:
-        size: $unit.x4
-      actionableIcon:
-        size: $unit.x4
-        margin: $unit.x3
-  type=contentOnly:
-    enabled:
-      content:
-        paddingXEnd: $unit.x3
-  variant=neutral weak:
-    enabled:
-      root:
-        color: $color.bg.neutral-weak
-      icon:
-        color: $color.fg.neutral
-      title:
-        color: $color.fg.neutral
-      label:
-        color: $color.fg.neutral
-      linkLabel:
-        color: $color.fg.neutral
-      dismissIcon:
-        color: $color.fg.neutral
-      actionableIcon:
-        color: $color.fg.neutral
-  variant=positive weak:
-    enabled:
-      root:
-        color: $color.bg.positive-weak
-      icon:
-        color: $color.fg.positive-contrast
-      title:
-        color: $color.fg.positive-contrast
-      label:
-        color: $color.fg.positive-contrast
-      linkLabel:
-        color: $color.fg.positive-contrast
-      dismissIcon:
-        color: $color.fg.positive-contrast
-      actionableIcon:
-        color: $color.fg.positive-contrast
-  variant=informative weak:
-    enabled:
-      root:
-        color: $color.bg.informative-weak
-      icon:
-        color: $color.fg.informative-contrast
-      title:
-        color: $color.fg.informative-contrast
-      label:
-        color: $color.fg.informative-contrast
-      linkLabel:
-        color: $color.fg.informative-contrast
-      dismissIcon:
-        color: $color.fg.informative-contrast
-      actionableIcon:
-        color: $color.fg.informative-contrast
-  variant=warning weak:
-    enabled:
-      root:
-        color: $color.bg.warning-weak
-      icon:
-        color: $color.fg.warning-contrast
-      title:
-        color: $color.fg.warning-contrast
-      label:
-        color: $color.fg.warning-contrast
-      linkLabel:
-        color: $color.fg.warning-contrast
-      dismissIcon:
-        color: $color.fg.warning-contrast
-      actionableIcon:
-        color: $color.fg.warning-contrast
-  variant=warning solid:
-    enabled:
-      root:
-        color: $color.bg.warning-solid
-      icon:
-        color: $color.fg.neutral
-      title:
-        color: $color.fg.neutral
-      label:
-        color: $color.fg.neutral
-      linkLabel:
-        color: $color.fg.neutral
-      dismissIcon:
-        color: $color.fg.neutral
-      actionableIcon:
-        color: $color.fg.neutral
-  variant=danger weak:
-    enabled:
-      root:
-        color: $color.bg.danger-weak
-      icon:
-        color: $color.fg.danger-contrast
-      title:
-        color: $color.fg.danger-contrast
-      label:
-        color: $color.fg.danger-contrast
-      linkLabel:
-        color: $color.fg.danger-contrast
-      actionableIcon:
-        color: $color.fg.danger-contrast
-  variant=danger solid:
-    enabled:
-      root:
-        color: $color.bg.danger-solid
-      icon:
-        color: $color.fg.static-white
-      title:
-        color: $color.fg.static-white
-      label:
-        color: $color.fg.static-white
-      linkLabel:
-        color: $color.fg.static-white
-      actionableIcon:
-        color: $color.fg.static-white
+        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
+      link:
+        properties:
+          targetHeight:
+            type: dimension
+          fontSize:
+            type: dimension
+          lineHeight:
+            type: dimension
+          fontWeight:
+            type: number
+          marginLeft:
+            type: dimension
+          color:
+            type: color
+      suffixIcon:
+        properties:
+          size:
+            type: dimension
+          targetSize:
+            type: dimension
+          marginLeft:
+            type: dimension
+          color:
+            type: color
+  definitions:
+    base:
+      enabled:
+        root:
+          paddingX: $dimension.x4
+          paddingY: $dimension.x2_5
+          minHeight: $dimension.x10
+        prefixIcon:
+          size: $dimension.x4
+          marginRight: $dimension.x2
+        title:
+          fontSize: $font-size.t4
+          lineHeight: $line-height.t4
+          fontWeight: $font-weight.bold
+        description:
+          fontSize: $font-size.t4
+          lineHeight: $line-height.t4
+          fontWeight: $font-weight.medium
+        link:
+          targetHeight: $dimension.x10
+          fontSize: $font-size.t2
+          lineHeight: $line-height.t2
+          fontWeight: $font-weight.regular
+          marginLeft: $dimension.x4
+        suffixIcon:
+          size: $dimension.x4
+          targetSize: $dimension.x10
+          marginLeft: $dimension.x4
+    variant=neutralWeak:
+      enabled:
+        root:
+          color: $color.bg.neutral-weak
+        prefixIcon:
+          color: $color.fg.neutral
+        title:
+          color: $color.fg.neutral
+        description:
+          color: $color.fg.neutral
+        link:
+          color: $color.fg.neutral
+        suffixIcon:
+          color: $color.fg.neutral
+    variant=positiveWeak:
+      enabled:
+        root:
+          color: $color.bg.positive-weak
+        prefixIcon:
+          color: $color.fg.positive-contrast
+        title:
+          color: $color.fg.positive-contrast
+        description:
+          color: $color.fg.positive-contrast
+        link:
+          color: $color.fg.positive-contrast
+        suffixIcon:
+          color: $color.fg.positive-contrast
+    variant=informativeWeak:
+      enabled:
+        root:
+          color: $color.bg.informative-weak
+        prefixIcon:
+          color: $color.fg.informative-contrast
+        title:
+          color: $color.fg.informative-contrast
+        description:
+          color: $color.fg.informative-contrast
+        link:
+          color: $color.fg.informative-contrast
+        suffixIcon:
+          color: $color.fg.informative-contrast
+    variant=warningWeak:
+      enabled:
+        root:
+          color: $color.bg.warning-weak
+        prefixIcon:
+          color: $color.fg.warning-contrast
+        title:
+          color: $color.fg.warning-contrast
+        description:
+          color: $color.fg.warning-contrast
+        link:
+          color: $color.fg.warning-contrast
+        suffixIcon:
+          color: $color.fg.warning-contrast
+    variant=warningSolid:
+      enabled:
+        root:
+          color: $color.bg.warning-solid
+        prefixIcon:
+          color: $color.fg.neutral
+        title:
+          color: $color.fg.neutral
+        description:
+          color: $color.fg.neutral
+        link:
+          color: $color.fg.neutral
+        suffixIcon:
+          color: $color.fg.neutral
+    variant=criticalWeak:
+      enabled:
+        root:
+          color: $color.bg.critical-weak
+        prefixIcon:
+          color: $color.fg.critical-contrast
+        title:
+          color: $color.fg.critical-contrast
+        description:
+          color: $color.fg.critical-contrast
+        link:
+          color: $color.fg.critical-contrast
+        suffixIcon:
+          color: $color.fg.critical-contrast
+    variant=criticalSolid:
+      enabled:
+        root:
+          color: $color.bg.critical-solid
+        prefixIcon:
+          color: $color.palette.static-white
+        title:
+          color: $color.palette.static-white
+        description:
+          color: $color.palette.static-white
+        link:
+          color: $color.palette.static-white
+        suffixIcon:
+          color: $color.palette.static-white

package/components/link-content.yaml

@@ -0,0 +1,60 @@
+# yaml-language-server: $schema=./schema.json
+kind: ComponentSpec
+metadata:
+  id: link-content
+  name: Link Content
+data:
+  schema:
+    slots:
+      root:
+        properties:
+          gap:
+            type: dimension
+      label:
+        properties:
+          fontSize:
+            type: dimension
+          lineHeight:
+            type: dimension
+          fontWeight:
+            type: number
+      suffixIcon:
+        properties:
+          size:
+            type: dimension
+  definitions:
+    weight=regular:
+      enabled:
+        label:
+          fontWeight: $font-weight.regular
+    weight=bold:
+      enabled:
+        label:
+          fontWeight: $font-weight.bold
+    size=t4:
+      enabled:
+        root:
+          gap: $dimension.x0_5
+        suffixIcon:
+          size: $dimension.x3
+        label:
+          fontSize: $font-size.t4
+          lineHeight: $line-height.t4
+    size=t5:
+      enabled:
+        root:
+          gap: $dimension.x0_5
+        suffixIcon:
+          size: $dimension.x3_5
+        label:
+          fontSize: $font-size.t5
+          lineHeight: $line-height.t5
+    size=t6:
+      enabled:
+        root:
+          gap: $dimension.x0_5
+        suffixIcon:
+          size: $dimension.x4
+        label:
+          fontSize: $font-size.t6
+          lineHeight: $line-height.t6

package/components/manner-temp-badge.yaml

@@ -0,0 +1,78 @@
+# yaml-language-server: $schema=./schema.json
+kind: ComponentSpec
+metadata:
+  id: manner-temp-badge
+  name: Manner Temp Badge
+data:
+  schema:
+    slots:
+      root:
+        properties:
+          minHeight:
+            type: dimension
+          paddingY:
+            type: dimension
+          paddingX:
+            type: dimension
+          cornerRadius:
+            type: dimension
+          color:
+            type: color
+      label:
+        properties:
+          fontSize:
+            type: dimension
+          lineHeight:
+            type: dimension
+          fontWeight:
+            type: number
+          color:
+            type: color
+  definitions:
+    base:
+      enabled:
+        root:
+          minHeight: 20px
+          paddingY: $dimension.x0_5
+          paddingX: $dimension.x1_5
+          cornerRadius: $radius.full
+        label:
+          fontSize: $font-size.t1
+          lineHeight: $line-height.t1
+          fontWeight: $font-weight.bold
+    level=l1:
+      enabled:
+        root:
+          color: $color.manner-temp.l1.bg
+        label:
+          color: $color.manner-temp.l1.text
+    level=l2:
+      enabled:
+        root:
+          color: $color.manner-temp.l2.bg
+        label:
+          color: $color.manner-temp.l2.text
+    level=l3:
+      enabled:
+        root:
+          color: $color.manner-temp.l3.bg
+        label:
+          color: $color.manner-temp.l3.text
+    level=l4:
+      enabled:
+        root:
+          color: $color.manner-temp.l4.bg
+        label:
+          color: $color.manner-temp.l4.text
+    level=l5:
+      enabled:
+        root:
+          color: $color.manner-temp.l5.bg
+        label:
+          color: $color.manner-temp.l5.text
+    level=l6:
+      enabled:
+        root:
+          color: $color.manner-temp.l6.bg
+        label:
+          color: $color.manner-temp.l6.text

package/components/manner-temp.yaml

@@ -0,0 +1,61 @@
+# yaml-language-server: $schema=./schema.json
+kind: ComponentSpec
+metadata:
+  id: manner-temp
+  name: Manner Temp
+data:
+  schema:
+    slots:
+      root:
+        properties:
+          gap:
+            type: dimension
+      label:
+        properties:
+          fontSize:
+            type: dimension
+          lineHeight:
+            type: dimension
+          fontWeight:
+            type: number
+          color:
+            type: color
+      emote:
+        properties:
+          size:
+            type: dimension
+  definitions:
+    base:
+      enabled:
+        root:
+          gap: $dimension.x1
+        label:
+          fontSize: $font-size.t5
+          lineHeight: $line-height.t5
+          fontWeight: $font-weight.bold
+        emote:
+          size: $dimension.x6
+    level=l1:
+      enabled:
+        label:
+          color: $color.manner-temp.l1.text
+    level=l2:
+      enabled:
+        label:
+          color: $color.manner-temp.l2.text
+    level=l3:
+      enabled:
+        label:
+          color: $color.manner-temp.l3.text
+    level=l4:
+      enabled:
+        label:
+          color: $color.manner-temp.l4.text
+    level=l5:
+      enabled:
+        label:
+          color: $color.manner-temp.l5.text
+    level=l6:
+      enabled:
+        label:
+          color: $color.manner-temp.l6.text

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

@@ -0,0 +1,49 @@
+# yaml-language-server: $schema=./schema.json
+kind: ComponentSpec
+metadata:
+  id: menu-sheet-close-button
+  name: Menu Sheet Close Button
+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/menu-sheet-item.yaml

@@ -0,0 +1,70 @@
+# yaml-language-server: $schema=./schema.json
+kind: ComponentSpec
+metadata:
+  id: menu-sheet-item
+  name: Menu Sheet Item
+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
+    labelAlign=left:
+      enabled: {}
+    labelAlign=center:
+      enabled: {}