@pstdio/ui 0.3.0 → 0.4.0

package/dist/{theme-BFV2Q048.js → theme-D0VvFB1Y.js}

@@ -1,11 +1,14 @@
 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 b, drawerAnatomy as c, fieldsetAnatomy as n, menuAnatomy as v, popoverAnatomy as g, tooltipAnatomy as p } from "@chakra-ui/react/anatomy";
+import { alertAnatomy as n, dialogAnatomy as c, drawerAnatomy as d, fieldsetAnatomy as b, 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": {
     bg: {
       base: "bg.accent-secondary.blue-medium",
       _dark: "bg.accent-secondary.blue-medium"
+    },
+    color: {
+      _dark: "fg.inverted"
     }
   },
   ":root": {
@@ -94,7 +97,7 @@ const m = {
     value: "#22252C"
   },
   850: {
-    value: "#1A1C21"
+    value: "#1b2028"
   },
   900: {
     value: "#0A0D15"
@@ -102,7 +105,7 @@ const m = {
   1e3: {
     value: "#000000"
   }
-}, k = {
+}, F = {
   DEFAULT: {
     value: "#5098FF"
   },
@@ -136,7 +139,7 @@ const m = {
   900: {
     value: "#002862"
   }
-}, x = {
+}, k = {
   DEFAULT: {
     value: "#3A4BE4"
   },
@@ -173,7 +176,7 @@ const m = {
   900: {
     value: "#0A125A"
   }
-}, F = {
+}, x = {
   DEFAULT: {
     value: "#E054EC"
   },
@@ -280,37 +283,37 @@ const m = {
   }
 }, _ = {
   DEFAULT: {
-    value: "#EB9D2A"
+    value: "#F78C25"
   },
   50: {
-    value: "#FDF3E5"
+    value: "#FFF4E8"
   },
   100: {
-    value: "#FAE6C8"
+    value: "#FFE2C1"
   },
   200: {
-    value: "#F7D6A6"
+    value: "#FFC98E"
   },
   300: {
-    value: "#F3C683"
+    value: "#FFAD57"
   },
   400: {
-    value: "#EB9D2A"
+    value: "#F78C25"
   },
   500: {
-    value: "#CF8A25"
+    value: "#E26F12"
   },
   600: {
-    value: "#B37720"
+    value: "#C85D12"
   },
   700: {
-    value: "#92611A"
+    value: "#A74810"
   },
   800: {
-    value: "#714B14"
+    value: "#7E330C"
   },
   900: {
-    value: "#52370F"
+    value: "#552107"
   }
 }, E = {
   DEFAULT: {
@@ -319,9 +322,15 @@ const m = {
   50: {
     value: "#FFF7D9"
   },
+  75: {
+    value: "#FFF3C2"
+  },
   100: {
     value: "#FFEEB3"
   },
+  150: {
+    value: "#FFE999"
+  },
   200: {
     value: "#FFE792"
   },
@@ -414,7 +423,7 @@ const m = {
   900: {
     value: "#024F3D"
   }
-}, A = {
+}, w = {
   DEFAULT: {
     value: "#5CDCFF"
   },
@@ -482,7 +491,7 @@ const m = {
   900: {
     value: "#1E0050"
   }
-}, w = {
+}, A = {
   DEFAULT: {
     value: "#F4F2EC"
   },
@@ -517,20 +526,72 @@ const m = {
     value: "#E8CECE"
   }
 }, z = {
-  sand: w,
+  50: {
+    value: "#FCFDFC"
+  },
+  75: {
+    value: "#F7F9F7"
+  },
+  100: {
+    value: "#F1F5F2"
+  },
+  200: {
+    value: "#EDF1EE"
+  },
+  300: {
+    value: "#E9EFEA"
+  },
+  400: {
+    value: "#DEE5DF"
+  },
+  500: {
+    value: "#CCD1CE"
+  },
+  600: {
+    value: "#404347"
+  },
+  700: {
+    value: "#31363C"
+  },
+  750: {
+    value: "#252A2F"
+  },
+  800: {
+    value: "#222A35"
+  },
+  850: {
+    value: "#1A202A"
+  },
+  900: {
+    value: "#141923"
+  },
+  950: {
+    value: "#10141B"
+  }
+}, B = {
+  100: {
+    value: "#D3ECEE"
+  },
+  200: {
+    value: "#B3DEE2"
+  }
+}, L = {
+  sand: A,
   blacks: h,
-  blue: k,
-  sapphire: x,
-  pink: F,
+  blue: F,
+  sapphire: k,
+  pink: x,
   peach: f,
   red: y,
   orange: _,
   yellow: E,
   green: C,
   teal: S,
-  cyan: A,
-  purple: D
-}, B = {
+  cyan: w,
+  purple: D,
+  neutral: z,
+  mint: B
+}, R = {
   display: {
     value: "'Playfair Display', serif"
   },
@@ -546,7 +607,7 @@ const m = {
   body: {
     value: "Inter, sans-serif"
   }
-}, L = {
+}, W = {
   xs: {
     value: "0.625rem"
   },
@@ -611,7 +672,7 @@ const m = {
     value: "1.25rem"
   }
   // 20px
-}, R = {
+}, H = {
   regular: {
     value: 400
   },
@@ -651,7 +712,7 @@ const m = {
   900: "4.5rem",
   // 96px
   1600: "8rem"
-}, W = {
+}, T = {
   none: {
     value: "0"
   },
@@ -691,7 +752,7 @@ const m = {
   "5xl": {
     value: e[1600]
   }
-}, H = {
+}, U = {
   none: {
     value: "0"
   },
@@ -716,15 +777,15 @@ const m = {
   full: {
     value: "100%"
   }
-}, T = l({
-  slots: d.keys(),
+}, M = l({
+  slots: n.keys(),
   base: {
     root: {
       pt: "xs",
       pb: "xs"
     }
   }
-}), U = a({
+}), V = a({
   base: {
     borderRadius: "sm",
     transition: "all 0.1s ease-in-out",
@@ -768,10 +829,10 @@ const m = {
         borderRadius: "xl",
         border: "2px solid {fg}",
         _hover: {
-          bg: "bg.muted"
+          bg: "bg.hover"
         },
         _active: {
-          bg: "bg.emphasized"
+          bg: "bg.active"
         }
       },
       "display-ghost": {
@@ -779,10 +840,10 @@ const m = {
         color: "fg",
         borderRadius: "xl",
         _hover: {
-          bg: "bg.muted"
+          bg: "bg.hover"
         },
         _active: {
-          bg: "bg.emphasized"
+          bg: "bg.active"
         }
       },
       "display-link": {
@@ -799,13 +860,13 @@ const m = {
       },
       primary: {
         color: "blacks.1000",
-        bg: "bg.accent-primary.medium",
+        bg: "bg.button.primary.default",
         border: "none",
         _hover: {
-          bg: "bg.accent-primary.light"
+          bg: "bg.button.primary.hover"
         },
         _active: {
-          bg: "bg.accent-primary.medium"
+          bg: "bg.button.primary.pressed"
         }
       },
       secondary: {
@@ -813,10 +874,10 @@ const m = {
         bg: "bg",
         border: "2px solid border.muted",
         _hover: {
-          bg: "bg.muted"
+          bg: "bg.hover"
         },
         _active: {
-          bg: "bg.emphasized"
+          bg: "bg.active"
         },
         _disabled: {
           opacity: 1,
@@ -829,10 +890,10 @@ const m = {
         bg: "bg",
         border: "border.muted",
         _hover: {
-          bg: "bg.muted"
+          bg: "bg.hover"
         },
         _active: {
-          bg: "bg.emphasized"
+          bg: "bg.active"
         },
         _disabled: {
           opacity: 1,
@@ -845,10 +906,10 @@ const m = {
         bg: "transparent",
         border: "none",
         _hover: {
-          bg: "bg.muted"
+          bg: "bg.hover"
         },
         _active: {
-          bg: "bg.emphasized"
+          bg: "bg.active"
         },
         _disabled: {
           bg: "transparent",
@@ -883,19 +944,19 @@ const m = {
     size: "md",
     variant: "outline"
   }
-}), M = l({
-  slots: b.keys(),
+}), X = l({
+  slots: c.keys(),
   base: {
     content: {
       bg: "bg"
     }
   }
-}), V = a({
+}), I = a({
   base: {
     borderColor: "border"
   }
-}), X = l({
-  slots: c.keys(),
+}), P = l({
+  slots: d.keys(),
   base: {
     header: {
       fontWeight: "medium",
@@ -906,7 +967,7 @@ const m = {
       bg: "bg"
     }
   }
-}), I = l({
+}), O = l({
   slots: ["preview", "input", "textarea"],
   base: {
     preview: {
@@ -918,7 +979,7 @@ const m = {
       transitionProperty: "common",
       transitionDuration: "normal",
       _hover: {
-        bg: "bg.muted"
+        bg: "bg.hover"
       }
     },
     input: {
@@ -955,14 +1016,14 @@ const m = {
       }
     }
   }
-}), P = l({
-  slots: n.keys(),
+}), Y = l({
+  slots: b.keys(),
   base: {
     legend: {
       mb: "2xs"
     }
   }
-}), O = a({
+}), $ = a({
   base: {
     px: "sm",
     borderRadius: "sm",
@@ -994,7 +1055,7 @@ const m = {
       }
     }
   }
-}), Y = l({
+}), q = l({
   slots: v.keys(),
   base: {
     itemGroupLabel: {
@@ -1034,7 +1095,7 @@ const m = {
       textStyle: "label/M/regular"
     }
   }
-}), $ = l({
+}), G = l({
   slots: g.keys(),
   base: {
     positioner: {
@@ -1086,12 +1147,12 @@ const m = {
       }
     }
   }
-}), q = o.variants?.size ?? {}, G = {
+}), j = o.variants?.size ?? {}, J = {
   ...o,
   variants: {
     ...o.variants,
     size: {
-      ...q,
+      ...j,
       "2xs": {
         circle: {
           "--size": "14px",
@@ -1103,12 +1164,12 @@ const m = {
       }
     }
   }
-}, j = a({
+}, K = a({
   base: {
     "--start-color": "fg",
     "--end-color": "fg.muted"
   }
-}), J = a({
+}), N = a({
   base: {
     paddingX: "sm",
     paddingY: "xs",
@@ -1134,7 +1195,7 @@ const m = {
       color: "fg.subtle"
     }
   }
-}), K = l({
+}), Q = l({
   slots: p.keys(),
   base: {
     content: {
@@ -1145,7 +1206,7 @@ const m = {
       bg: "bg.inverted"
     }
   }
-}), N = {
+}), Z = {
   DEFAULT: {
     value: {
       base: "1px solid {colors.blacks.400}",
@@ -1182,7 +1243,7 @@ const m = {
       _dark: "1px solid {colors.blue.900}"
     }
   }
-}, Q = {
+}, ee = {
   DEFAULT: {
     value: {
       base: "{colors.blacks.800}",
@@ -1266,7 +1327,7 @@ const m = {
       value: "{colors.fg.muted}"
     }
   }
-}, Z = {
+}, le = {
   DEFAULT: {
     value: {
       base: "{colors.blacks.50}",
@@ -1275,13 +1336,25 @@ const m = {
   },
   muted: {
     value: {
-      base: "{colors.blacks.200}",
-      _dark: "{colors.blacks.800}"
+      base: "{colors.neutral.200}",
+      _dark: "{colors.neutral.800}"
     }
   },
   subtle: {
     value: {
-      base: "{colors.blacks.75}",
+      base: "{colors.neutral.50}",
+      _dark: "{colors.neutral.950}"
+    }
+  },
+  hover: {
+    value: {
+      base: "{colors.neutral.100}",
+      _dark: "{colors.neutral.850}"
+    }
+  },
+  active: {
+    value: {
+      base: "{colors.neutral.75}",
       _dark: "{colors.blacks.850}"
     }
   },
@@ -1293,8 +1366,8 @@ const m = {
   },
   emphasized: {
     value: {
-      base: "{colors.blacks.50}",
-      _dark: "{colors.blacks.600}"
+      base: "{colors.bg.active}",
+      _dark: "{colors.bg.active}"
     }
   },
   inverted: {
@@ -1324,13 +1397,22 @@ const m = {
   button: {
     primary: {
       default: {
-        value: "{colors.bg.accent-primary.default}"
+        value: {
+          base: "{colors.bg.accent-primary.default}",
+          _dark: "{colors.bg.accent-primary.dark}"
+        }
       },
       hover: {
-        value: "{colors.bg.accent-primary.hover}"
+        value: {
+          base: "{colors.bg.accent-primary.hover}",
+          _dark: "{colors.bg.accent-primary.medium}"
+        }
       },
       pressed: {
-        value: "{colors.bg.accent-primary.pressed}"
+        value: {
+          base: "{colors.bg.accent-primary.pressed}",
+          _dark: "{colors.bg.accent-primary.medium}"
+        }
       },
       disabled: {
         value: "{colors.bg.muted}"
@@ -1342,13 +1424,13 @@ const m = {
       value: "{colors.bg}"
     },
     hover: {
-      value: "{colors.bg.muted}"
+      value: "{colors.bg.hover}"
     },
     focus: {
-      value: "{colors.bg.muted}"
+      value: "{colors.bg.hover}"
     },
     selected: {
-      value: "{colors.bg.muted}"
+      value: "{colors.bg.active}"
     }
   },
   display: {
@@ -1362,44 +1444,44 @@ const m = {
   "accent-primary": {
     default: {
       value: {
-        base: "{colors.orange.100}",
-        _dark: "{colors.orange.300}"
+        base: "{colors.yellow.75}",
+        _dark: "{colors.yellow.75}"
       }
     },
     hover: {
       value: {
-        base: "{colors.orange.200}",
-        _dark: "{colors.orange.200}"
+        base: "{colors.yellow.100}",
+        _dark: "{colors.yellow.100}"
       }
     },
     pressed: {
       value: {
-        base: "{colors.orange.300}",
-        _dark: "{colors.orange.100}"
+        base: "{colors.yellow.150}",
+        _dark: "{colors.yellow.150}"
       }
     },
     "very-light": {
       value: {
-        base: "{colors.orange.100}",
-        _dark: "{colors.blacks.1000}"
+        base: "{colors.yellow.75}",
+        _dark: "{colors.yellow.75}"
       }
     },
     light: {
       value: {
-        base: "{colors.orange.100}",
-        _dark: "{colors.orange.300}"
+        base: "{colors.yellow.75}",
+        _dark: "{colors.yellow.75}"
       }
     },
     medium: {
       value: {
-        base: "{colors.orange.200}",
-        _dark: "{colors.orange.200}"
+        base: "{colors.yellow.100}",
+        _dark: "{colors.yellow.100}"
       }
     },
     dark: {
       value: {
-        base: "{colors.orange.300}",
-        _dark: "{colors.orange.100}"
+        base: "{colors.yellow.150}",
+        _dark: "{colors.yellow.150}"
       }
     }
   },
@@ -1448,14 +1530,14 @@ const m = {
     },
     "blue-light": {
       value: {
-        base: "{colors.blue.50}",
-        _dark: "{colors.blue.700}"
+        base: "{colors.mint.100}",
+        _dark: "{colors.mint.100}"
       }
     },
     "blue-medium": {
       value: {
-        base: "{colors.blue.100}",
-        _dark: "{colors.blue.800}"
+        base: "{colors.mint.200}",
+        _dark: "{colors.mint.200}"
       }
     },
     "blue-dark": {
@@ -1478,14 +1560,20 @@ const m = {
     },
     "yellow-light": {
       value: {
-        base: "{colors.yellow.50}",
-        _dark: "{colors.yellow.100}"
+        base: "{colors.yellow.75}",
+        _dark: "{colors.yellow.75}"
       }
     },
     "yellow-medium": {
       value: {
         base: "{colors.yellow.100}",
-        _dark: "{colors.yellow.200}"
+        _dark: "{colors.yellow.100}"
+      }
+    },
+    "yellow-dark": {
+      value: {
+        base: "{colors.yellow.150}",
+        _dark: "{colors.yellow.150}"
       }
     },
     "sand-light": {
@@ -1495,35 +1583,35 @@ const m = {
       }
     }
   }
-}, ee = {
+}, ae = {
   DEFAULT: {
     value: {
-      base: "{colors.blacks.400}",
-      _dark: "{colors.blacks.600}"
+      base: "{colors.neutral.500}",
+      _dark: "{colors.neutral.600}"
     }
   },
   muted: {
     value: {
-      base: "{colors.blacks.300}",
-      _dark: "{colors.blacks.700}"
+      base: "{colors.neutral.400}",
+      _dark: "{colors.neutral.700}"
     }
   },
   subtle: {
     value: {
-      base: "{colors.blacks.300}",
-      _dark: "{colors.blacks.50}"
+      base: "{colors.neutral.300}",
+      _dark: "{colors.neutral.750}"
     }
   },
   inverted: {
     value: {
-      base: "{colors.blacks.400}",
-      _dark: "{colors.blacks.600}"
+      base: "{colors.neutral.600}",
+      _dark: "{colors.neutral.500}"
     }
   },
   "accent-light": {
     value: {
-      base: "{colors.blue.200}",
-      _dark: "{colors.blue.900}"
+      base: "{colors.mint.100}",
+      _dark: "{colors.mint.100}"
     }
   },
   accent: {
@@ -1537,14 +1625,63 @@ const m = {
       value: "{colors.border.muted}"
     }
   }
-}, le = {
+}, oe = {
   border: {
     value: {
-      base: "{colors.blue.700}",
-      _dark: "{colors.blue.200}"
+      _light: "{colors.mint.200}",
+      _dark: "{colors.mint.200}"
     }
   }
-}, ae = {
+}, re = {
+  contrast: {
+    value: {
+      _light: "black",
+      _dark: "black"
+    }
+  },
+  fg: {
+    value: {
+      _light: "{colors.orange.700}",
+      _dark: "{colors.orange.300}"
+    }
+  },
+  subtle: {
+    value: {
+      _light: "{colors.orange.100}",
+      _dark: "{colors.orange.900}"
+    }
+  },
+  muted: {
+    value: {
+      _light: "{colors.orange.200}",
+      _dark: "{colors.orange.800}"
+    }
+  },
+  emphasized: {
+    value: {
+      _light: "{colors.orange.300}",
+      _dark: "{colors.orange.700}"
+    }
+  },
+  solid: {
+    value: {
+      _light: "{colors.orange.500}",
+      _dark: "{colors.orange.400}"
+    }
+  },
+  focusRing: {
+    value: {
+      _light: "{colors.orange.500}",
+      _dark: "{colors.orange.500}"
+    }
+  },
+  border: {
+    value: {
+      _light: "{colors.orange.400}",
+      _dark: "{colors.orange.500}"
+    }
+  }
+}, se = {
   text: {
     primary: {
       value: {
@@ -1705,7 +1842,7 @@ const m = {
       }
     }
   }
-}, oe = {
+}, te = {
   selectable: {
     primary: {
       value: {
@@ -1714,14 +1851,15 @@ const m = {
       }
     }
   }
-}, re = {
-  fg: Q,
-  bg: Z,
-  border: ee,
-  blue: le,
-  vis: ae,
-  text: oe
-}, se = r({
+}, ie = {
+  fg: ee,
+  bg: le,
+  border: ae,
+  blue: oe,
+  orange: re,
+  vis: se,
+  text: te
+}, ue = r({
   modal: {
     value: {
       paddingInline: "xs",
@@ -1733,7 +1871,7 @@ const m = {
       boxShadow: "mid"
     }
   }
-}), te = {
+}), ne = {
   "low-light": {
     value: "0px 2px 4px 0px rgba(0, 0, 0, 0.10)"
   },
@@ -1764,7 +1902,7 @@ const m = {
   "desktop-icon-label-text-selected-dark": {
     value: "0px 2px 4px rgba(37, 99, 235, 0.75)"
   }
-}, ie = {
+}, ce = {
   low: {
     value: {
       base: "{shadows.low-light}",
@@ -1795,7 +1933,7 @@ const m = {
       _dark: "{shadows.desktop-icon-label-text-selected-dark}"
     }
   }
-}, ue = s({
+}, de = s({
   brand: {
     value: {
       fontFamily: "brand",
@@ -2028,50 +2166,50 @@ const m = {
       letterSpacing: "0.14px"
     }
   }
-}), de = t({
+}), be = t({
   globalCss: m,
   theme: {
     breakpoints: {
       "3xl": "2560px",
       "4xl": "3840px"
     },
-    textStyles: ue,
-    layerStyles: se,
+    textStyles: de,
+    layerStyles: ue,
     recipes: {
-      button: U,
-      divider: V,
-      input: O,
-      skeleton: j,
-      textarea: J
+      button: V,
+      divider: I,
+      input: $,
+      skeleton: K,
+      textarea: N
     },
     tokens: {
-      colors: z,
-      fonts: B,
-      fontSizes: L,
-      fontWeights: R,
-      radii: H,
-      shadows: te,
-      spacing: W
+      colors: L,
+      fonts: R,
+      fontSizes: W,
+      fontWeights: H,
+      radii: U,
+      shadows: ne,
+      spacing: T
     },
     semanticTokens: {
-      colors: re,
-      borders: N,
-      shadows: ie
+      colors: ie,
+      borders: Z,
+      shadows: ce
     },
     slotRecipes: {
-      alert: T,
-      drawer: X,
-      tooltip: K,
-      popover: $,
-      menu: Y,
-      editable: I,
-      form: P,
-      dialog: M,
-      progressCircle: G
+      alert: M,
+      drawer: P,
+      tooltip: Q,
+      popover: G,
+      menu: q,
+      editable: O,
+      form: Y,
+      dialog: X,
+      progressCircle: J
     }
   }
-}), ve = i(u, de);
+}), me = i(u, be);
 export {
-  ve as t
+  me as t
 };
-//# sourceMappingURL=theme-BFV2Q048.js.map
+//# sourceMappingURL=theme-D0VvFB1Y.js.map