@okshaun/components 0.2.0 → 0.3.0

package/dist/panda.buildinfo.json

@@ -10,42 +10,45 @@
       "gap]___[value:40",
       "borderTopWidth]___[value:1",
       "borderTopStyle]___[value:solid",
-      "borderColor]___[value:gray.10",
-      "borderColor]___[value:gray.80]___[cond:_dark",
+      "borderColor]___[value:border",
       "paddingBlock]___[value:24",
       "paddingBottom]___[value:96",
       "gridTemplateColumns]___[value:minmax(auto, 1fr) 1fr",
       "gap]___[value:24",
       "alignItems]___[value:center",
+      "gridTemplateColumns]___[value:repeat(13, auto)",
+      "gap]___[value:8",
       "gridTemplateColumns]___[value:repeat(3, 1fr)",
+      "gridTemplateColumns]___[value:repeat(4, auto)",
+      "alignItems]___[value:flex-start",
       "display]___[value:flex",
       "gap]___[value:8px",
       "flexDirection]___[value:row",
-      "color]___[value:gold.40",
-      "color]___[value:gold.30]___[cond:_dark",
+      "color]___[value:blue.60",
+      "color]___[value:blue.40]___[cond:_dark",
       "justifyContent]___[value:space-between",
+      "borderBottomWidth]___[value:1",
+      "borderStyle]___[value:solid",
+      "paddingBlock]___[value:4",
       "alignItems]___[value:flex-end",
-      "gap]___[value:8",
-      "flexWrap]___[value:wrap",
       "height]___[value:80",
       "fontSize]___[value:14",
       "fontSize]___[value:16",
       "letterSpacing]___[value:widest",
       "textTransform]___[value:uppercase",
       "fontWeight]___[value:bold",
+      "color]___[value:text.bold",
+      "textStyle]___[value:mono.sm",
       "marginLeft]___[value:8",
       "flexDirection]___[value:column",
-      "alignItems]___[value:flex-start",
       "padding]___[value:16",
-      "maxWidth]___[value:280",
-      "paddingBlock]___[value:4",
-      "background]___[value:gray.10",
-      "background]___[value:gray.80]___[cond:_dark",
+      "gap]___[value:4",
+      "maxWidth]___[value:xs",
+      "background]___[value:surface",
       "marginBottom]___[value:56",
       "position]___[value:sticky",
       "top]___[value:0",
       "zIndex]___[value:100",
-      "boxShadow]___[value:medium",
       "position]___[value:relative",
       "width]___[value:100%",
       "maxWidth]___[value:5xl",
@@ -53,135 +56,107 @@
       "paddingInline]___[value:24",
       "paddingInline]___[value:20]___[cond:md",
       "paddingInline]___[value:16]___[cond:sm",
-      "background]___[value:red.50",
+      "color]___[value:gold.40",
+      "paddingInlineStart]___[value:3",
+      "paddingInlineEnd]___[value:3",
+      "paddingInlineStart]___[value:2",
+      "paddingInlineEnd]___[value:2",
+      "paddingInlineStart]___[value:5",
+      "paddingInlineEnd]___[value:5",
       "gridColumn]___[value:1 / -1",
       "marginTop]___[value:32",
-      "color]___[value:gray.70",
-      "color]___[value:gray.20]___[cond:_dark",
-      "background]___[value:gray.70]___[cond:_dark",
-      "color]___[value:gray.0",
-      "color]___[value:gray.80]___[cond:_dark",
-      "background]___[value:gray.50",
-      "background]___[value:gray.20]___[cond:_dark",
-      "color]___[value:tan.70",
-      "color]___[value:tan.20]___[cond:_dark",
-      "background]___[value:tan.10",
-      "background]___[value:tan.70]___[cond:_dark",
-      "color]___[value:tan.80]___[cond:_dark",
-      "background]___[value:tan.50",
-      "background]___[value:tan.20]___[cond:_dark",
+      "maxWidth]___[value:280",
+      "color]___[value:text.subtle",
+      "background]___[value:bg.neutral",
+      "color]___[value:text.inverse",
+      "background]___[value:bg.neutral.boldest",
       "color]___[value:red.70",
-      "color]___[value:red.10]___[cond:_dark",
-      "background]___[value:red.10",
-      "background]___[value:red.70]___[cond:_dark",
-      "color]___[value:red.80]___[cond:_dark",
-      "background]___[value:red.20]___[cond:_dark",
-      "color]___[value:tomato.70",
-      "color]___[value:tomato.20]___[cond:_dark",
-      "background]___[value:tomato.10",
-      "background]___[value:tomato.70]___[cond:_dark",
-      "color]___[value:tomato.80]___[cond:_dark",
-      "background]___[value:tomato.50",
-      "background]___[value:tomato.20]___[cond:_dark",
+      "color]___[value:red.20]___[cond:_dark",
+      "background]___[value:red.20",
+      "background]___[value:red.100]___[cond:_dark",
+      "color]___[value:red.10",
+      "color]___[value:red.100]___[cond:_dark",
+      "background]___[value:red.60",
+      "background]___[value:red.40]___[cond:_dark",
       "color]___[value:orange.70",
       "color]___[value:orange.20]___[cond:_dark",
-      "background]___[value:orange.10",
-      "background]___[value:orange.70]___[cond:_dark",
-      "color]___[value:orange.5",
-      "color]___[value:orange.80]___[cond:_dark",
+      "background]___[value:orange.20",
+      "background]___[value:orange.100]___[cond:_dark",
+      "color]___[value:orange.10",
+      "color]___[value:orange.100]___[cond:_dark",
       "background]___[value:orange.60",
-      "background]___[value:orange.20]___[cond:_dark",
-      "color]___[value:yellow.60",
-      "color]___[value:yellow.10]___[cond:_dark",
-      "background]___[value:yellow.10",
-      "background]___[value:yellow.60]___[cond:_dark",
-      "color]___[value:yellow.70",
-      "color]___[value:yellow.90]___[cond:_dark",
+      "background]___[value:orange.50]___[cond:_dark",
+      "color]___[value:yellow.80",
+      "color]___[value:yellow.50]___[cond:_dark",
       "background]___[value:yellow.20",
-      "background]___[value:yellow.20]___[cond:_dark",
+      "background]___[value:yellow.90]___[cond:_dark",
+      "color]___[value:yellow.100",
+      "color]___[value:yellow.100]___[cond:_dark",
+      "background]___[value:yellow.40",
+      "background]___[value:yellow.60]___[cond:_dark",
+      "color]___[value:lime.70",
+      "color]___[value:lime.20]___[cond:_dark",
+      "background]___[value:lime.20",
+      "background]___[value:lime.90]___[cond:_dark",
+      "color]___[value:lime.10",
+      "color]___[value:lime.100]___[cond:_dark",
+      "background]___[value:lime.60",
+      "background]___[value:lime.40]___[cond:_dark",
       "color]___[value:green.70",
       "color]___[value:green.20]___[cond:_dark",
-      "background]___[value:green.10",
-      "background]___[value:green.70]___[cond:_dark",
-      "color]___[value:green.80]___[cond:_dark",
-      "background]___[value:green.50",
-      "background]___[value:green.20]___[cond:_dark",
-      "color]___[value:grass.70",
-      "color]___[value:grass.10]___[cond:_dark",
-      "background]___[value:grass.10",
-      "background]___[value:grass.70]___[cond:_dark",
-      "color]___[value:grass.80]___[cond:_dark",
-      "background]___[value:grass.60",
-      "background]___[value:grass.20]___[cond:_dark",
-      "color]___[value:mint.80",
-      "color]___[value:mint.30]___[cond:_dark",
-      "background]___[value:mint.10",
-      "background]___[value:mint.80]___[cond:_dark",
-      "color]___[value:mint.80]___[cond:_dark",
-      "background]___[value:mint.70",
-      "background]___[value:mint.20]___[cond:_dark",
-      "color]___[value:cyan.70",
-      "color]___[value:cyan.20]___[cond:_dark",
-      "background]___[value:cyan.10",
-      "background]___[value:cyan.70]___[cond:_dark",
-      "color]___[value:cyan.5",
-      "color]___[value:cyan.80]___[cond:_dark",
-      "background]___[value:cyan.60",
-      "background]___[value:cyan.30]___[cond:_dark",
+      "background]___[value:green.20",
+      "background]___[value:green.90]___[cond:_dark",
+      "color]___[value:gray.10",
+      "color]___[value:green.100]___[cond:_dark",
+      "background]___[value:green.70",
+      "background]___[value:green.40]___[cond:_dark",
+      "color]___[value:teal.80",
+      "color]___[value:teal.20]___[cond:_dark",
+      "background]___[value:teal.20",
+      "background]___[value:teal.90]___[cond:_dark",
+      "color]___[value:teal.10",
+      "color]___[value:teal.100]___[cond:_dark",
+      "background]___[value:teal.60",
+      "background]___[value:teal.50]___[cond:_dark",
       "color]___[value:blue.70",
       "color]___[value:blue.20]___[cond:_dark",
-      "background]___[value:blue.10",
-      "background]___[value:blue.70]___[cond:_dark",
-      "color]___[value:blue.90]___[cond:_dark",
+      "background]___[value:blue.20",
+      "background]___[value:blue.90]___[cond:_dark",
+      "color]___[value:blue.10",
+      "color]___[value:blue.10]___[cond:_dark",
       "background]___[value:blue.50",
-      "background]___[value:blue.40]___[cond:_dark",
+      "background]___[value:blue.70]___[cond:_dark",
       "color]___[value:indigo.70",
+      "color]___[value:indigo.20]___[cond:_dark",
+      "background]___[value:indigo.20",
+      "background]___[value:indigo.90]___[cond:_dark",
+      "color]___[value:indigo.10",
       "color]___[value:indigo.10]___[cond:_dark",
-      "background]___[value:indigo.10",
+      "background]___[value:indigo.60",
       "background]___[value:indigo.70]___[cond:_dark",
-      "color]___[value:indigo.5",
-      "color]___[value:indigo.80]___[cond:_dark",
-      "background]___[value:indigo.50",
-      "background]___[value:indigo.20]___[cond:_dark",
       "color]___[value:purple.70",
       "color]___[value:purple.20]___[cond:_dark",
-      "background]___[value:purple.10",
-      "background]___[value:purple.70]___[cond:_dark",
-      "color]___[value:purple.80]___[cond:_dark",
-      "background]___[value:purple.50",
-      "background]___[value:purple.20]___[cond:_dark",
-      "color]___[value:violet.70",
-      "color]___[value:violet.10]___[cond:_dark",
-      "background]___[value:violet.10",
-      "background]___[value:violet.70]___[cond:_dark",
-      "color]___[value:violet.5",
-      "color]___[value:violet.80]___[cond:_dark",
-      "background]___[value:violet.60",
-      "background]___[value:violet.20]___[cond:_dark",
-      "color]___[value:pink.70",
-      "color]___[value:pink.10]___[cond:_dark",
-      "background]___[value:pink.10",
-      "background]___[value:pink.70]___[cond:_dark",
-      "color]___[value:pink.5",
-      "color]___[value:pink.80]___[cond:_dark",
-      "background]___[value:pink.70",
-      "background]___[value:pink.20]___[cond:_dark",
-      "color]___[value:rose.70",
-      "color]___[value:rose.10]___[cond:_dark",
-      "background]___[value:rose.10",
-      "background]___[value:rose.70]___[cond:_dark",
-      "color]___[value:rose.5",
-      "color]___[value:rose.80]___[cond:_dark",
-      "background]___[value:rose.60",
-      "background]___[value:rose.20]___[cond:_dark",
-      "color]___[value:magenta.70",
+      "background]___[value:purple.20",
+      "background]___[value:purple.90]___[cond:_dark",
+      "color]___[value:purple.10",
+      "color]___[value:purple.10]___[cond:_dark",
+      "background]___[value:purple.60",
+      "background]___[value:purple.80]___[cond:_dark",
+      "color]___[value:magenta.80",
+      "color]___[value:magenta.20]___[cond:_dark",
+      "background]___[value:magenta.20",
+      "background]___[value:magenta.90]___[cond:_dark",
+      "color]___[value:magenta.10",
       "color]___[value:magenta.10]___[cond:_dark",
-      "background]___[value:magenta.10",
+      "background]___[value:magenta.70",
       "background]___[value:magenta.70]___[cond:_dark",
-      "color]___[value:magenta.5",
-      "color]___[value:magenta.80]___[cond:_dark",
-      "background]___[value:magenta.60",
-      "background]___[value:magenta.20]___[cond:_dark",
+      "color]___[value:tan.70",
+      "color]___[value:tan.20]___[cond:_dark",
+      "background]___[value:tan.20",
+      "background]___[value:tan.80]___[cond:_dark",
+      "color]___[value:tan.90]___[cond:_dark",
+      "background]___[value:tan.60",
+      "background]___[value:tan.40]___[cond:_dark",
       "marginBottom]___[value:12",
       "marginBottom]___[value:8",
       "marginTop]___[value:12",
@@ -191,7 +166,6 @@
       "marginLeft]___[value:12",
       "opacity]___[value:0",
       "opacity]___[value:1",
-      "gap]___[value:2",
       "position]___[value:absolute",
       "left]___[value:0",
       "right]___[value:0",
@@ -203,27 +177,21 @@
       "width]___[value:24",
       "height]___[value:24",
       "fill]___[value:current",
-      "width]___[value:22",
-      "height]___[value:22",
+      "gap]___[value:2",
       "width]___[value:20",
       "height]___[value:20",
       "color]___[value:gray.100",
       "color]___[value:gray.90]___[cond:_dark",
       "color]___[value:gray.90",
-      "color]___[value:gray.0]___[cond:_dark",
+      "color]___[value:gray.10]___[cond:_dark",
       "textStyle]___[value:body-lg",
       "textStyle]___[value:body-md]___[cond:md",
       "textStyle]___[value:body-xs",
-      "color]___[value:gray.5]___[cond:_dark",
-      "color]___[value:gray.10",
       "color]___[value:gray.60]___[cond:_dark",
       "font]___[value:mono",
       "color]___[value:gold.50",
       "color]___[value:blue.50",
       "borderWidth]___[value:2",
-      "borderStyle]___[value:solid",
-      "borderColor]___[value:gray.30",
-      "borderColor]___[value:gray.70]___[cond:_dark",
       "color]___[value:transparent",
       "margin]___[value:8",
       "borderRadius]___[value:100",
@@ -238,17 +206,17 @@
       "opacity]___[value:0]___[cond:&:before",
       "display]___[value:block]___[cond:&:before",
       "borderRadius]___[value:100]___[cond:&:before",
-      "backgroundColor]___[value:gray.98]___[cond:&:before",
-      "backgroundColor]___[value:gray.5]___[cond:&:before<___>_dark",
+      "background]___[value:bg.neutral.bold]___[cond:&:before",
       "transition]___[value:all]___[cond:&:before",
       "transitionTimingFunction]___[value:default]___[cond:&:before",
-      "transitionDuration]___[value:slow]___[cond:&:before",
+      "transitionDuration]___[value:normal]___[cond:&:before",
       "cursor]___[value:pointer]___[cond:_hover",
-      "background]___[value:gray.90]___[cond:_hover",
-      "background]___[value:gray.5]___[cond:_hover<___>_dark",
-      "borderColor]___[value:gray.90]___[cond:_hover",
-      "borderColor]___[value:gray.5]___[cond:_hover<___>_dark",
+      "background]___[value:darkNeutral.0]___[cond:_hover",
+      "background]___[value:neutral.0]___[cond:_hover<___>_dark",
+      "borderColor]___[value:bg.neutral.bold]___[cond:_hover",
       "inset]___[value:-8]___[cond:_hover<___>&:before",
+      "background]___[value:darkNeutral.0]___[cond:_hover<___>&:before",
+      "background]___[value:neutral.0]___[cond:_hover<___>&:before<___>_dark",
       "opacity]___[value:0.25]___[cond:_hover<___>&:before",
       "textStyle]___[value:body-md",
       "textStyle]___[value:body-sm"
@@ -256,7 +224,7 @@
     "recipes": {
       "text": [
         "family]___[value:mono]___[recipe:text",
-        "family]___[value:sans]___[recipe:text",
+        "family]___[value:inherit]___[recipe:text",
         "italic]___[value:true]___[recipe:text",
         "bold]___[value:true]___[recipe:text",
         "underline]___[value:true]___[recipe:text"
@@ -268,32 +236,28 @@
         "level]___[value:h4]___[recipe:heading"
       ],
       "button": [
-        "variant]___[value:primary]___[recipe:button",
-        "size]___[value:standard]___[recipe:button",
-        "variant]___[value:standard]___[recipe:button",
-        "variant]___[value:hollow]___[recipe:button",
-        "variant]___[value:ghost]___[recipe:button",
-        "variant]___[value:cta]___[recipe:button",
-        "variant]___[value:danger]___[recipe:button",
-        "size]___[value:small]___[recipe:button",
-        "variant]___[value:default]___[recipe:button",
-        "variant]___[value:utility]___[recipe:button"
+        "appearance]___[value:primary]___[recipe:button",
+        "size]___[value:default]___[recipe:button",
+        "appearance]___[value:default]___[recipe:button",
+        "appearance]___[value:subtle]___[recipe:button",
+        "appearance]___[value:hollow]___[recipe:button",
+        "iconBefore]___[value:user]___[recipe:button",
+        "iconAfter]___[value:caret-down]___[recipe:button",
+        "iconAfter]___[value:plus]___[recipe:button",
+        "iconBefore]___[value:aa-placeholder]___[recipe:button",
+        "size]___[value:small]___[recipe:button"
       ],
       "iconButton": [
-        "variant]___[value:ghost]___[recipe:iconButton",
-        "size]___[value:standard]___[recipe:iconButton",
-        "variant]___[value:standard]___[recipe:iconButton",
-        "variant]___[value:primary]___[recipe:iconButton",
-        "size]___[value:large]___[recipe:iconButton",
-        "variant]___[value:default]___[recipe:iconButton",
-        "variant]___[value:danger]___[recipe:iconButton",
-        "variant]___[value:hollow]___[recipe:iconButton",
-        "variant]___[value:utility]___[recipe:iconButton"
+        "appearance]___[value:subtle]___[recipe:iconButton",
+        "size]___[value:default]___[recipe:iconButton",
+        "appearance]___[value:default]___[recipe:iconButton",
+        "appearance]___[value:primary]___[recipe:iconButton",
+        "size]___[value:large]___[recipe:iconButton"
       ],
       "box": [],
       "pre": [],
       "link": [
-        "family]___[value:sans]___[recipe:link",
+        "family]___[value:inherit]___[recipe:link",
         "family]___[value:mono]___[recipe:link"
       ],
       "spinner": [
@@ -310,19 +274,22 @@
         "variant]___[value:outline]___[recipe:badge"
       ],
       "tag": [
-        "variant]___[value:default]___[recipe:tag",
-        "hue]___[value:slate]___[recipe:tag",
+        "appearance]___[value:default]___[recipe:tag",
+        "hue]___[value:gray]___[recipe:tag",
         "iconPosition]___[value:left]___[recipe:tag",
         "hasIcon]___[value:false]___[recipe:tag",
         "hue]___[value:red]___[recipe:tag",
         "hue]___[value:orange]___[recipe:tag",
         "hue]___[value:yellow]___[recipe:tag",
+        "hue]___[value:lime]___[recipe:tag",
         "hue]___[value:green]___[recipe:tag",
+        "hue]___[value:teal]___[recipe:tag",
         "hue]___[value:blue]___[recipe:tag",
+        "hue]___[value:indigo]___[recipe:tag",
         "hue]___[value:purple]___[recipe:tag",
-        "hue]___[value:pink]___[recipe:tag",
-        "variant]___[value:bold]___[recipe:tag",
-        "iconPosition]___[value:right]___[recipe:tag"
+        "hue]___[value:magenta]___[recipe:tag",
+        "hue]___[value:tan]___[recipe:tag",
+        "appearance]___[value:bold]___[recipe:tag"
       ],
       "breadcrumbs": [],
       "card": [
@@ -335,12 +302,17 @@
         "direction]___[value:vertical]___[recipe:divider"
       ],
       "label": [
-        "family]___[value:sans]___[recipe:label"
+        "family]___[value:inherit]___[recipe:label"
       ],
       "textinput": [
         "size]___[value:medium]___[recipe:textinput",
-        "size]___[value:large]___[recipe:textinput",
-        "autoSize]___[value:false]___[recipe:textinput"
+        "size]___[value:small]___[recipe:textinput",
+        "size]___[value:large]___[recipe:textinput"
+      ],
+      "textarea": [
+        "size]___[value:medium]___[recipe:textarea",
+        "size]___[value:small]___[recipe:textarea",
+        "size]___[value:large]___[recipe:textarea"
       ],
       "checkbox": [],
       "checkboxInput": [],
@@ -358,11 +330,6 @@
       ],
       "code": [],
       "radioInput": [],
-      "textarea": [
-        "stacked]___[value:true]___[recipe:textarea",
-        "internalLabel]___[value:false]___[recipe:textarea",
-        "autoGrow]___[value:false]___[recipe:textarea"
-      ],
       "toggle": [],
       "toggleInput": []
     }