@pstdio/ui 0.0.4 → 0.1.0

package/dist/{theme-9E0MRtZk.js → theme-C7CIuIPZ.js}

@@ -1,5 +1,5 @@
 import { defineSlotRecipe as l, defineRecipe as a, defineLayerStyles as r, defineTextStyles as s, defineConfig as t, createSystem as i, defaultConfig as u } from "@chakra-ui/react";
-import { alertAnatomy as d, dialogAnatomy as c, drawerAnatomy as n, fieldsetAnatomy as b, menuAnatomy as v, popoverAnatomy as g, tooltipAnatomy as p } from "@chakra-ui/react/anatomy";
+import { alertAnatomy as d, dialogAnatomy as b, drawerAnatomy as c, fieldsetAnatomy as n, menuAnatomy as v, popoverAnatomy as g, tooltipAnatomy as p } from "@chakra-ui/react/anatomy";
 import { progressCircleSlotRecipe as o } from "@chakra-ui/react/theme";
 const m = {
   "*::selection": {
@@ -53,6 +53,9 @@ const m = {
   50: {
     value: "#FFFFFF"
   },
+  75: {
+    value: "#FCFCFC"
+  },
   100: {
     value: "#F9F9F9"
   },
@@ -74,6 +77,9 @@ const m = {
   700: {
     value: "#444750"
   },
+  750: {
+    value: "#33363E"
+  },
   800: {
     value: "#22252C"
   },
@@ -86,7 +92,7 @@ const m = {
   1e3: {
     value: "#000000"
   }
-}, F = {
+}, k = {
   DEFAULT: {
     value: "#5098FF"
   },
@@ -120,7 +126,7 @@ const m = {
   900: {
     value: "#002862"
   }
-}, k = {
+}, x = {
   DEFAULT: {
     value: "#3A4BE4"
   },
@@ -157,7 +163,7 @@ const m = {
   900: {
     value: "#0A125A"
   }
-}, x = {
+}, F = {
   DEFAULT: {
     value: "#E054EC"
   },
@@ -297,19 +303,6 @@ const m = {
     value: "#52370F"
   }
 }, E = {
-  DEFAULT: {
-    value: "#FFE2BC"
-  },
-  light: {
-    value: "#FFF1DE"
-  },
-  medium: {
-    value: "#FFE2BC"
-  },
-  dark: {
-    value: "#FFD6A8"
-  }
-}, C = {
   DEFAULT: {
     value: "#FFD643"
   },
@@ -343,7 +336,7 @@ const m = {
   900: {
     value: "#644E00"
   }
-}, S = {
+}, C = {
   DEFAULT: {
     value: "#2DD665"
   },
@@ -377,7 +370,7 @@ const m = {
   900: {
     value: "#003110"
   }
-}, A = {
+}, S = {
   DEFAULT: {
     value: "#3EECC4"
   },
@@ -411,7 +404,7 @@ const m = {
   900: {
     value: "#024F3D"
   }
-}, D = {
+}, A = {
   DEFAULT: {
     value: "#5CDCFF"
   },
@@ -445,7 +438,7 @@ const m = {
   900: {
     value: "#005B73"
   }
-}, w = {
+}, D = {
   DEFAULT: {
     value: "#8B47FF"
   },
@@ -479,7 +472,7 @@ const m = {
   900: {
     value: "#1E0050"
   }
-}, z = {
+}, w = {
   DEFAULT: {
     value: "#F4F2EC"
   },
@@ -513,22 +506,21 @@ const m = {
   900: {
     value: "#E8CECE"
   }
-}, B = {
-  sand: z,
+}, z = {
+  sand: w,
   blacks: h,
-  blue: F,
-  sapphire: k,
-  pink: x,
+  blue: k,
+  sapphire: x,
+  pink: F,
   peach: f,
   red: y,
-  accentPrimary: E,
   orange: _,
-  yellow: C,
-  green: S,
-  teal: A,
-  cyan: D,
-  purple: w
-}, L = {
+  yellow: E,
+  green: C,
+  teal: S,
+  cyan: A,
+  purple: D
+}, B = {
   display: {
     value: "'Playfair Display', serif"
   },
@@ -544,7 +536,7 @@ const m = {
   body: {
     value: "Inter, sans-serif"
   }
-}, R = {
+}, L = {
   xs: {
     value: "0.625rem"
   },
@@ -609,7 +601,7 @@ const m = {
     value: "1.25rem"
   }
   // 20px
-}, W = {
+}, R = {
   regular: {
     value: 400
   },
@@ -649,7 +641,7 @@ const m = {
   900: "4.5rem",
   // 96px
   1600: "8rem"
-}, H = {
+}, W = {
   none: {
     value: "0"
   },
@@ -689,7 +681,7 @@ const m = {
   "5xl": {
     value: e[1600]
   }
-}, T = {
+}, H = {
   none: {
     value: "0"
   },
@@ -714,7 +706,7 @@ const m = {
   full: {
     value: "100%"
   }
-}, U = l({
+}, T = l({
   slots: d.keys(),
   base: {
     root: {
@@ -722,7 +714,7 @@ const m = {
       pb: "xs"
     }
   }
-}), M = a({
+}), U = a({
   base: {
     borderRadius: "sm",
     transition: "all 0.1s ease-in-out",
@@ -881,8 +873,8 @@ const m = {
     size: "md",
     variant: "outline"
   }
-}), P = l({
-  slots: c.keys(),
+}), M = l({
+  slots: b.keys(),
   base: {
     content: {
       bg: "bg"
@@ -893,7 +885,7 @@ const m = {
     borderColor: "border"
   }
 }), X = l({
-  slots: n.keys(),
+  slots: c.keys(),
   base: {
     header: {
       fontWeight: "medium",
@@ -953,14 +945,14 @@ const m = {
       }
     }
   }
-}), O = l({
-  slots: b.keys(),
+}), P = l({
+  slots: n.keys(),
   base: {
     legend: {
       mb: "2xs"
     }
   }
-}), $ = a({
+}), O = a({
   base: {
     px: "sm",
     borderRadius: "sm",
@@ -992,7 +984,7 @@ const m = {
       }
     }
   }
-}), q = l({
+}), $ = l({
   slots: v.keys(),
   base: {
     itemGroupLabel: {
@@ -1002,19 +994,19 @@ const m = {
       color: "fg.muted"
     },
     item: {
-      bg: "bg",
-      color: "fg",
+      bg: "bg.menu-item.default",
+      color: "fg.menu-item.default",
       textStyle: "label/M/regular",
       px: "0.5rem",
       h: "2.25rem",
       _hover: {
-        bg: "bg.muted"
+        bg: "bg.menu-item.hover"
       },
       _focus: {
-        bg: "bg.muted"
+        bg: "bg.menu-item.focus"
       },
       _active: {
-        bg: "bg.emphasized"
+        bg: "bg.menu-item.selected"
       }
     },
     content: {
@@ -1032,7 +1024,7 @@ const m = {
       textStyle: "label/M/regular"
     }
   }
-}), G = l({
+}), q = l({
   slots: g.keys(),
   base: {
     positioner: {
@@ -1084,12 +1076,12 @@ const m = {
       }
     }
   }
-}), Y = o.variants?.size ?? {}, j = {
+}), G = o.variants?.size ?? {}, Y = {
   ...o,
   variants: {
     ...o.variants,
     size: {
-      ...Y,
+      ...G,
       "2xs": {
         circle: {
           "--size": "14px",
@@ -1101,12 +1093,12 @@ const m = {
       }
     }
   }
-}, J = a({
+}, j = a({
   base: {
     "--start-color": "fg",
     "--end-color": "fg.muted"
   }
-}), K = a({
+}), J = a({
   base: {
     paddingX: "sm",
     paddingY: "xs",
@@ -1132,7 +1124,7 @@ const m = {
       color: "fg.subtle"
     }
   }
-}), N = l({
+}), K = l({
   slots: p.keys(),
   base: {
     content: {
@@ -1143,44 +1135,44 @@ const m = {
       bg: "bg.inverted"
     }
   }
-}), Q = {
-  accent: {
-    value: {
-      base: "1px solid {colors.blue.700}",
-      _dark: "1px solid {colors.blue.700}"
-    }
-  },
-  "accent-light": {
-    value: {
-      base: "1px solid {colors.blue.200}",
-      _dark: "1px solid {colors.blue.900}"
-    }
-  },
-  primary: {
+}), N = {
+  DEFAULT: {
     value: {
       base: "1px solid {colors.blacks.400}",
       _dark: "1px solid {colors.blacks.600}"
     }
   },
-  secondary: {
+  muted: {
     value: {
       base: "1px solid {colors.blacks.300}",
-      _dark: "1px solid {colors.blacks.800}"
+      _dark: "1px solid {colors.blacks.700}"
     }
   },
-  tertiary: {
+  subtle: {
     value: {
       base: "1px solid {colors.blacks.300}",
-      _dark: "1px solid {colors.blacks.800}"
+      _dark: "1px solid {colors.blacks.50}"
     }
   },
-  inverse: {
+  inverted: {
     value: {
       base: "1px solid {colors.blacks.400}",
       _dark: "1px solid {colors.blacks.600}"
     }
+  },
+  accent: {
+    value: {
+      base: "1px solid {colors.blue.700}",
+      _dark: "1px solid {colors.blue.200}"
+    }
+  },
+  "accent-light": {
+    value: {
+      base: "1px solid {colors.blue.200}",
+      _dark: "1px solid {colors.blue.900}"
+    }
   }
-}, Z = {
+}, Q = {
   DEFAULT: {
     value: {
       base: "{colors.blacks.800}",
@@ -1242,8 +1234,29 @@ const m = {
       base: "{colors.sapphire.900}",
       _dark: "{colors.sapphire.800}"
     }
+  },
+  button: {
+    primary: {
+      default: {
+        value: {
+          base: "{colors.blacks.200}",
+          _dark: "{colors.blacks.200}"
+        }
+      },
+      disabled: {
+        value: "{colors.fg.subtle}"
+      }
+    }
+  },
+  "menu-item": {
+    default: {
+      value: "{colors.fg}"
+    },
+    secondary: {
+      value: "{colors.fg.muted}"
+    }
   }
-}, ee = {
+}, Z = {
   DEFAULT: {
     value: {
       base: "{colors.blacks.50}",
@@ -1258,8 +1271,8 @@ const m = {
   },
   subtle: {
     value: {
-      base: "{colors.blacks.50}",
-      _dark: "{colors.blacks.600}"
+      base: "{colors.blacks.75}",
+      _dark: "{colors.blacks.850}"
     }
   },
   code: {
@@ -1298,6 +1311,36 @@ const m = {
       _dark: "{colors.blacks.50}"
     }
   },
+  button: {
+    primary: {
+      default: {
+        value: "{colors.bg.accent-primary.default}"
+      },
+      hover: {
+        value: "{colors.bg.accent-primary.hover}"
+      },
+      pressed: {
+        value: "{colors.bg.accent-primary.pressed}"
+      },
+      disabled: {
+        value: "{colors.bg.muted}"
+      }
+    }
+  },
+  "menu-item": {
+    default: {
+      value: "{colors.bg}"
+    },
+    hover: {
+      value: "{colors.bg.muted}"
+    },
+    focus: {
+      value: "{colors.bg.muted}"
+    },
+    selected: {
+      value: "{colors.bg.muted}"
+    }
+  },
   display: {
     "very-light": {
       value: {
@@ -1307,28 +1350,46 @@ const m = {
     }
   },
   "accent-primary": {
+    default: {
+      value: {
+        base: "{colors.orange.100}",
+        _dark: "{colors.orange.300}"
+      }
+    },
+    hover: {
+      value: {
+        base: "{colors.orange.200}",
+        _dark: "{colors.orange.200}"
+      }
+    },
+    pressed: {
+      value: {
+        base: "{colors.orange.300}",
+        _dark: "{colors.orange.100}"
+      }
+    },
     "very-light": {
       value: {
-        base: "{colors.accentPrimary.light}",
+        base: "{colors.orange.100}",
         _dark: "{colors.blacks.1000}"
       }
     },
     light: {
       value: {
-        base: "{colors.accentPrimary.light}",
-        _dark: "{colors.accentPrimary.light}"
+        base: "{colors.orange.100}",
+        _dark: "{colors.orange.300}"
       }
     },
     medium: {
       value: {
-        base: "{colors.accentPrimary.medium}",
-        _dark: "{colors.accentPrimary.medium}"
+        base: "{colors.orange.200}",
+        _dark: "{colors.orange.200}"
       }
     },
     dark: {
       value: {
-        base: "{colors.accentPrimary.dark}",
-        _dark: "{colors.accentPrimary.dark}"
+        base: "{colors.orange.300}",
+        _dark: "{colors.orange.100}"
       }
     }
   },
@@ -1424,7 +1485,7 @@ const m = {
       }
     }
   }
-}, le = {
+}, ee = {
   DEFAULT: {
     value: {
       base: "{colors.blacks.400}",
@@ -1454,15 +1515,26 @@ const m = {
       base: "{colors.blue.200}",
       _dark: "{colors.blue.900}"
     }
+  },
+  accent: {
+    value: {
+      base: "{colors.blue.700}",
+      _dark: "{colors.blue.200}"
+    }
+  },
+  button: {
+    primary: {
+      value: "{colors.border.muted}"
+    }
   }
-}, ae = {
+}, le = {
   border: {
     value: {
       base: "{colors.blue.700}",
       _dark: "{colors.blue.200}"
     }
   }
-}, oe = {
+}, ae = {
   text: {
     primary: {
       value: {
@@ -1623,12 +1695,22 @@ const m = {
       }
     }
   }
+}, oe = {
+  selectable: {
+    primary: {
+      value: {
+        base: "{colors.blacks.800}",
+        _dark: "{colors.blacks.800}"
+      }
+    }
+  }
 }, re = {
-  fg: Z,
-  bg: ee,
-  border: le,
-  blue: ae,
-  vis: oe
+  fg: Q,
+  bg: Z,
+  border: ee,
+  blue: le,
+  vis: ae,
+  text: oe
 }, se = r({
   modal: {
     value: {
@@ -1946,40 +2028,40 @@ const m = {
     textStyles: ue,
     layerStyles: se,
     recipes: {
-      button: M,
+      button: U,
       divider: V,
-      input: $,
-      skeleton: J,
-      textarea: K
+      input: O,
+      skeleton: j,
+      textarea: J
     },
     tokens: {
-      colors: B,
-      fonts: L,
-      fontSizes: R,
-      fontWeights: W,
-      radii: T,
+      colors: z,
+      fonts: B,
+      fontSizes: L,
+      fontWeights: R,
+      radii: H,
       shadows: te,
-      spacing: H
+      spacing: W
     },
     semanticTokens: {
       colors: re,
-      borders: Q,
+      borders: N,
       shadows: ie
     },
     slotRecipes: {
-      alert: U,
+      alert: T,
       drawer: X,
-      tooltip: N,
-      popover: G,
-      menu: q,
+      tooltip: K,
+      popover: q,
+      menu: $,
       editable: I,
-      form: O,
-      dialog: P,
-      progressCircle: j
+      form: P,
+      dialog: M,
+      progressCircle: Y
     }
   }
 }), ve = i(u, de);
 export {
   ve as t
 };
-//# sourceMappingURL=theme-9E0MRtZk.js.map
+//# sourceMappingURL=theme-C7CIuIPZ.js.map