@pstdio/ui 0.0.1

package/src/theme/primitives/colors.ts

@@ -0,0 +1,209 @@
+export const blacks = {
+  DEFAULT: { value: "#0A0D15" },
+  50: { value: "#FFFFFF" },
+  100: { value: "#F9F9F9" },
+  200: { value: "#F5F5F5" },
+  300: { value: "#EAEAEA" },
+  400: { value: "#C5C5C7" },
+  500: { value: "#797D83" },
+  600: { value: "#5A5F67" },
+  700: { value: "#444750" },
+  800: { value: "#22252C" },
+  850: { value: "#1A1C21" },
+  900: { value: "#0A0D15" },
+  1000: { value: "#000000" },
+};
+
+export const blue = {
+  DEFAULT: { value: "#5098FF" },
+  50: { value: "#EEF5FF" },
+  100: { value: "#D2E4FF" },
+  200: { value: "#A8CBFE" },
+  300: { value: "#81B4FE" },
+  400: { value: "#6CA9FF" },
+  500: { value: "#5098FF" },
+  600: { value: "#2B82FF" },
+  700: { value: "#0E6EF6" },
+  800: { value: "#0652C3" },
+  900: { value: "#002862" },
+};
+
+export const sapphire = {
+  DEFAULT: { value: "#3A4BE4" },
+  25: { value: "#F0F1FF" },
+  50: { value: "#E0E3FF" },
+  100: { value: "#BEC4FF" },
+  200: { value: "#97A2FF" },
+  300: { value: "#6A78F8" },
+  400: { value: "#4E5FF3" },
+  500: { value: "#3A4BE4" },
+  600: { value: "#2A3CD7" },
+  700: { value: "#202FB8" },
+  800: { value: "#131F87" },
+  900: { value: "#0A125A" },
+};
+
+export const pink = {
+  DEFAULT: { value: "#E054EC" },
+  25: { value: "#FDF0FF" },
+  50: { value: "#FCE1FF" },
+  100: { value: "#F5CBF9" },
+  200: { value: "#F6B4FC" },
+  300: { value: "#F69AFF" },
+  400: { value: "#EF81FA" },
+  500: { value: "#E054EC" },
+  600: { value: "#B636C1" },
+  700: { value: "#951BA0" },
+  800: { value: "#6F0C78" },
+  900: { value: "#520659" },
+};
+
+export const peach = {
+  DEFAULT: { value: "#FBD8CE" },
+  50: { value: "#FFF2EC" },
+  100: { value: "#FCE1DA" },
+  200: { value: "#FBD8CE" },
+  300: { value: "#F7C4B8" },
+  400: { value: "#F3AA9A" },
+  500: { value: "#EB8A75" },
+  600: { value: "#D17059" },
+  700: { value: "#A85646" },
+  800: { value: "#7B3F34" },
+  900: { value: "#522923" },
+};
+
+export const red = {
+  DEFAULT: { value: "#FF3232" },
+  50: { value: "#FFE0E3" },
+  100: { value: "#FFCCCC" },
+  200: { value: "#FDA8A8" },
+  300: { value: "#FF8B8B" },
+  400: { value: "#FF6B6B" },
+  500: { value: "#FF3232" },
+  600: { value: "#DE1D1D" },
+  700: { value: "#BA1313" },
+  800: { value: "#8E0E0E" },
+  900: { value: "#580707" },
+};
+
+export const orange = {
+  DEFAULT: { value: "#EB9D2A" },
+  50: { value: "#FDF3E5" },
+  100: { value: "#FAE6C8" },
+  200: { value: "#F7D6A6" },
+  300: { value: "#F3C683" },
+  400: { value: "#EB9D2A" },
+  500: { value: "#CF8A25" },
+  600: { value: "#B37720" },
+  700: { value: "#92611A" },
+  800: { value: "#714B14" },
+  900: { value: "#52370F" },
+};
+
+export const accentPrimary = {
+  DEFAULT: { value: "#FFE2BC" },
+  light: { value: "#FFF1DE" },
+  medium: { value: "#FFE2BC" },
+  dark: { value: "#FFD6A8" },
+};
+
+export const yellow = {
+  DEFAULT: { value: "#FFD643" },
+  50: { value: "#FFF7D9" },
+  100: { value: "#FFEEB3" },
+  200: { value: "#FFE792" },
+  300: { value: "#FFDE67" },
+  400: { value: "#FFD643" },
+  500: { value: "#FFC909" },
+  600: { value: "#E4B200" },
+  700: { value: "#C69B00" },
+  800: { value: "#9D7A00" },
+  900: { value: "#644E00" },
+};
+
+export const green = {
+  DEFAULT: { value: "#2DD665" },
+  50: { value: "#CFFFDF" },
+  100: { value: "#ACFBC7" },
+  200: { value: "#86F3AB" },
+  300: { value: "#61EA8F" },
+  400: { value: "#2DD665" },
+  500: { value: "#0AB744" },
+  600: { value: "#029232" },
+  700: { value: "#007126" },
+  800: { value: "#00511B" },
+  900: { value: "#003110" },
+};
+
+export const teal = {
+  DEFAULT: { value: "#3EECC4" },
+  50: { value: "#C9FFF3" },
+  100: { value: "#9EFBE6" },
+  200: { value: "#6DF4D5" },
+  300: { value: "#3EECC4" },
+  400: { value: "#16DFB0" },
+  500: { value: "#12C69C" },
+  600: { value: "#10A884" },
+  700: { value: "#0C8367" },
+  800: { value: "#096C55" },
+  900: { value: "#024F3D" },
+};
+
+export const cyan = {
+  DEFAULT: { value: "#5CDCFF" },
+  50: { value: "#DAF7FE" },
+  100: { value: "#ADEDFF" },
+  200: { value: "#85E4FF" },
+  300: { value: "#5CDCFF" },
+  400: { value: "#30D2FF" },
+  500: { value: "#00C0F5" },
+  600: { value: "#03AAD7" },
+  700: { value: "#0095BE" },
+  800: { value: "#007A9B" },
+  900: { value: "#005B73" },
+};
+
+export const purple = {
+  DEFAULT: { value: "#8B47FF" },
+  50: { value: "#EFE6FF" },
+  100: { value: "#D8C2FF" },
+  200: { value: "#BE99FF" },
+  300: { value: "#A36DFF" },
+  400: { value: "#8B47FF" },
+  500: { value: "#7223F9" },
+  600: { value: "#5A00F5" },
+  700: { value: "#4600C0" },
+  800: { value: "#310086" },
+  900: { value: "#1E0050" },
+};
+
+export const sand = {
+  DEFAULT: { value: "#F4F2EC" },
+  50: { value: "#FCF7EF" },
+  100: { value: "#F4F2EC" },
+  200: { value: "#E8CECE" },
+  300: { value: "#E8CECE" },
+  400: { value: "#E8CECE" },
+  500: { value: "#E8CECE" },
+  600: { value: "#E8CECE" },
+  700: { value: "#E8CECE" },
+  800: { value: "#E8CECE" },
+  900: { value: "#E8CECE" },
+};
+
+export const colors = {
+  sand,
+  blacks,
+  blue,
+  sapphire,
+  pink,
+  peach,
+  red,
+  accentPrimary,
+  orange,
+  yellow,
+  green,
+  teal,
+  cyan,
+  purple,
+};

package/src/theme/primitives/fonts.ts

@@ -0,0 +1,33 @@
+export const fonts = {
+  display: { value: "'Playfair Display', serif" },
+  brand: { value: "Onest, sans-serif" },
+  heading: { value: "Onest, sans-serif" },
+  label: { value: "Onest, sans-serif" },
+  body: { value: "Inter, sans-serif" },
+};
+
+export const fontSizes = {
+  xs: { value: "0.625rem" }, // 10px
+  sm: { value: "0.75rem" }, // 12px
+  md: { value: "0.875rem" }, // 14px
+  lg: { value: "1rem" }, // 16px
+  xl: { value: "1.125rem" }, // 18px
+  "2xl": { value: "1.25rem" }, // 20px
+  "3xl": { value: "1.5rem" }, // 24px
+  "3.5xl": { value: "1.75rem" }, // 28px
+  "4xl": { value: "2.25rem" }, // 36px
+  "5xl": { value: "3rem" }, // 48px
+  "6xl": { value: "4.375rem" }, // 70px
+  "7xl": { value: "5.25rem" }, // 84px
+  "icon-xs": { value: "0.875rem" }, // 14px
+  "icon-sm": { value: "1rem" }, // 16px
+  "icon-md": { value: "1.25rem" }, // 20px
+  "icon-lg": { value: "1.25rem" }, // 20px
+};
+
+export const fontWeights = {
+  regular: { value: 400 },
+  medium: { value: 500 },
+  semibold: { value: 600 },
+  bold: { value: 700 },
+};

package/src/theme/primitives/sizes.ts

@@ -0,0 +1,49 @@
+export const sp = {
+  0: "0rem", // 0px
+  25: "0.125rem", // 2px
+  50: "0.25rem", // 4px
+  100: "0.5rem", // 8px
+  150: "0.75rem", // 12px
+  200: "1rem", // 16px
+  250: "1.25rem", // 20px
+  300: "1.5rem", // 24px
+  400: "2rem", // 32px
+  500: "2.5rem", // 40px
+  600: "3rem", // 48px
+  700: "3.5rem", // 56px
+  800: "4rem", // 64px
+  900: "4.5rem", // 72px
+  1000: "5rem", // 80px
+  1200: "6rem", // 96px
+  1600: "8rem", // 128px
+  2000: "10rem", // 160px
+  3000: "15rem", // 240px
+  4000: "20rem", // 320px
+};
+
+export const spacing = {
+  none: { value: "0" },
+  "2xs": { value: sp[50] },
+  xs: { value: sp[100] },
+  sm: { value: sp[150] },
+  md: { value: sp[200] },
+  lg: { value: sp[300] },
+  xl: { value: sp[400] },
+  "2xl": { value: sp[500] },
+  "3xl": { value: sp[600] },
+  "3.5xl": { value: sp[700] },
+  "4xl": { value: sp[800] },
+  "4.5xl": { value: sp[900] },
+  "5xl": { value: sp[1600] },
+};
+
+export const radii = {
+  none: { value: "0" },
+  "2xs": { value: sp[25] },
+  xs: { value: sp[50] },
+  sm: { value: sp[100] },
+  md: { value: sp[150] },
+  lg: { value: sp[200] },
+  xl: { value: sp[400] },
+  full: { value: "100%" },
+};

package/src/theme/recipes/alert.ts

@@ -0,0 +1,12 @@
+import { defineSlotRecipe } from "@chakra-ui/react";
+import { alertAnatomy } from "@chakra-ui/react/anatomy";
+
+export const alertSlotRecipe = defineSlotRecipe({
+  slots: alertAnatomy.keys(),
+  base: {
+    root: {
+      pt: "xs",
+      pb: "xs",
+    },
+  },
+});

package/src/theme/recipes/button.ts

@@ -0,0 +1,124 @@
+import { defineRecipe } from "@chakra-ui/react";
+
+export const buttonRecipe = defineRecipe({
+  base: {
+    borderRadius: "sm",
+    transition: "all 0.1s ease-in-out",
+    fontFamily: "label",
+    fontWeight: "500",
+    color: "fg",
+    bg: "bg",
+    borderColor: "border.muted",
+    _disabled: {
+      opacity: 1,
+      color: "fg.subtle",
+      bg: "bg.muted",
+      _hover: { bg: "bg.muted" },
+    },
+    _loading: {
+      opacity: 1,
+      color: "fg.subtle",
+      bg: "bg.muted",
+      _hover: { bg: "bg.muted" },
+    },
+  },
+  variants: {
+    variant: {
+      "display-primary": {
+        bg: "blacks.900",
+        color: "fg.inverted",
+        borderRadius: "xl",
+        outline: "none",
+        border: "none",
+        _hover: { bg: "blacks.800" },
+      },
+      "display-outline": {
+        bg: "transparent",
+        color: "fg",
+        borderRadius: "xl",
+        border: "2px solid {fg}",
+        _hover: { bg: "bg.muted" },
+        _active: { bg: "bg.emphasized" },
+      },
+      "display-ghost": {
+        bg: "transparent",
+        color: "fg",
+        borderRadius: "xl",
+        _hover: { bg: "bg.muted" },
+        _active: { bg: "bg.emphasized" },
+      },
+      "display-link": {
+        bg: "transparent",
+        color: "fg",
+        border: "none",
+        borderRadius: "xl",
+        _hover: { textDecoration: "underline" },
+        _active: { textDecoration: "underline" },
+      },
+      primary: {
+        color: "blacks.1000",
+        bg: "bg.accent-primary.medium",
+        border: "none",
+        _hover: { bg: "bg.accent-primary.light" },
+        _active: { bg: "bg.accent-primary.medium" },
+      },
+      secondary: {
+        color: "fg",
+        bg: "bg",
+        border: "2px solid border.muted",
+        _hover: { bg: "bg.muted" },
+        _active: { bg: "bg.emphasized" },
+        _disabled: {
+          opacity: 1,
+          color: "fg.subtle",
+          borderColor: "border.muted",
+        },
+      },
+      outline: {
+        color: "fg",
+        bg: "bg",
+        border: "border.muted",
+        _hover: { bg: "bg.muted" },
+        _active: { bg: "bg.emphasized" },
+        _disabled: {
+          opacity: 1,
+          color: "fg.subtle",
+          borderColor: "border.muted",
+        },
+      },
+      ghost: {
+        color: "fg",
+        bg: "transparent",
+        border: "none",
+        _hover: { bg: "bg.muted" },
+        _active: { bg: "bg.emphasized" },
+        _disabled: {
+          bg: "transparent",
+          _hover: { bg: "transparent" },
+        },
+      },
+    },
+    size: {
+      "2xl": {
+        px: "1.5rem",
+        h: "3.5rem",
+        textStyle: "label/L/medium",
+      },
+      lg: {
+        px: "1rem",
+        h: "3rem",
+        textStyle: "label/M/medium",
+      },
+      md: {
+        textStyle: "label/M/medium",
+      },
+      sm: {
+        px: "0.5rem",
+        h: "2rem",
+        textStyle: "label/S/medium",
+      },
+    },
+  },
+
+  defaultVariants: { size: "md", variant: "outline" },
+});

package/src/theme/recipes/dialog.ts

@@ -0,0 +1,11 @@
+import { defineSlotRecipe } from "@chakra-ui/react";
+import { dialogAnatomy } from "@chakra-ui/react/anatomy";
+
+export const dialogSlotRecipe = defineSlotRecipe({
+  slots: dialogAnatomy.keys(),
+  base: {
+    content: {
+      bg: "bg",
+    },
+  },
+});

package/src/theme/recipes/divider.ts

@@ -0,0 +1,7 @@
+import { defineRecipe } from "@chakra-ui/react";
+
+export const dividerRecipe = defineRecipe({
+  base: {
+    borderColor: "border",
+  },
+});

package/src/theme/recipes/drawer.ts

@@ -0,0 +1,16 @@
+import { defineSlotRecipe } from "@chakra-ui/react";
+import { drawerAnatomy as parts } from "@chakra-ui/react/anatomy";
+
+export const drawerSlotRecipe = defineSlotRecipe({
+  slots: parts.keys(),
+  base: {
+    header: {
+      fontWeight: "medium",
+      textStyle: "label/M/medium",
+      p: "xs",
+    },
+    content: {
+      bg: "bg",
+    },
+  },
+});

package/src/theme/recipes/editable.ts

@@ -0,0 +1,42 @@
+import { defineSlotRecipe } from "@chakra-ui/react";
+
+export const editableSlotRecipe = defineSlotRecipe({
+  slots: ["preview", "input", "textarea"] as const,
+  base: {
+    preview: {
+      textStyle: "label/L/medium",
+      borderRadius: "2xs",
+      focusRingColor: "border",
+      py: "0",
+      lineHeight: "1.5rem",
+      transitionProperty: "common",
+      transitionDuration: "normal",
+      _hover: { bg: "bg.muted" },
+    },
+    input: {
+      textStyle: "label/L/medium",
+      borderRadius: "2xs",
+      focusRingColor: "border",
+      py: "0",
+      lineHeight: "1.5rem",
+      transitionProperty: "common",
+      transitionDuration: "normal",
+      bg: "bg",
+      width: "auto",
+      _focusVisible: { boxShadow: "none" },
+      _placeholder: { color: "fg.muted" },
+    },
+    textarea: {
+      textStyle: "label/L/medium",
+      borderRadius: "2xs",
+      focusRingColor: "border",
+      py: "0",
+      transitionProperty: "common",
+      transitionDuration: "normal",
+      bg: "bg.muted",
+      width: "auto",
+      _focusVisible: { boxShadow: "none" },
+      _placeholder: { color: "fg.muted" },
+    },
+  },
+});

package/src/theme/recipes/form.ts

@@ -0,0 +1,11 @@
+import { defineSlotRecipe } from "@chakra-ui/react";
+import { fieldsetAnatomy } from "@chakra-ui/react/anatomy";
+
+export const fieldsetSlotRecipe = defineSlotRecipe({
+  slots: fieldsetAnatomy.keys(),
+  base: {
+    legend: {
+      mb: "2xs",
+    },
+  },
+});

package/src/theme/recipes/input.ts

@@ -0,0 +1,25 @@
+import { defineRecipe } from "@chakra-ui/react";
+
+export const inputRecipe = defineRecipe({
+  base: {
+    px: "sm",
+    borderRadius: "sm",
+    border: "1px solid",
+    transition: "border-color 0.2s ease-in-out",
+    bg: "bg",
+    color: "fg",
+    borderColor: "border.muted",
+    _hover: { borderColor: "border" },
+    _active: { borderColor: "blue.border" },
+    _focus: { borderColor: "blue.border" },
+    _focusVisible: { borderColor: "blue.border" },
+    _placeholder: { color: "fg.subtle" },
+  },
+  variants: {
+    size: {
+      sm: {
+        h: "2rem",
+      },
+    },
+  },
+});

package/src/theme/recipes/menu.ts

@@ -0,0 +1,40 @@
+import { defineSlotRecipe } from "@chakra-ui/react";
+import { menuAnatomy } from "@chakra-ui/react/anatomy";
+
+export const menuSlotRecipe = defineSlotRecipe({
+  slots: menuAnatomy.keys(),
+  base: {
+    itemGroupLabel: {
+      ml: "{2xs}",
+      textStyle: "label/S/regular",
+      fontWeight: "normal",
+      color: "fg.muted",
+    },
+
+    item: {
+      bg: "bg",
+      color: "fg",
+      textStyle: "label/M/regular",
+      px: "0.5rem",
+      h: "2.25rem",
+      _hover: { bg: "bg.muted" },
+      _focus: { bg: "bg.muted" },
+      _active: { bg: "bg.emphasized" },
+    },
+
+    content: {
+      display: "flex",
+      flexDirection: "column",
+      gap: "2xs",
+      borderRadius: "sm",
+      py: "xs",
+      bg: "bg",
+      borderWidth: "1px",
+      borderStyle: "solid",
+      borderColor: "border.muted",
+      boxShadow: "low",
+      zIndex: "dropdown",
+      textStyle: "label/M/regular",
+    },
+  },
+});

package/src/theme/recipes/popover.ts

@@ -0,0 +1,46 @@
+import { defineSlotRecipe } from "@chakra-ui/react";
+import { popoverAnatomy } from "@chakra-ui/react/anatomy";
+
+export const popoverRecipe = defineSlotRecipe({
+  slots: popoverAnatomy.keys(),
+  base: {
+    positioner: {
+      _focus: { boxShadow: "none !important" },
+    },
+    closeTrigger: {
+      textStyle: "label/M/medium",
+      color: "fg",
+    },
+    arrow: {
+      bg: "background-primary !important",
+      borderColor: "button-secondary-stroke",
+    },
+    content: {
+      gap: "8px",
+      py: "xs",
+      borderRadius: "12px",
+      bg: "bg",
+      borderColor: "border",
+      _focus: { boxShadow: "none !important" },
+    },
+    title: {
+      borderBottom: "none",
+      textStyle: "label/M/medium",
+      bg: "bg",
+    },
+    body: { textStyle: "primary" },
+    footer: {},
+  },
+  variants: {
+    variant: {
+      responsive: {
+        content: { width: "unset" },
+      },
+    },
+    size: {
+      "2xl": {
+        content: { width: "2xl" },
+      },
+    },
+  },
+});

package/src/theme/recipes/progress-circle.ts

@@ -0,0 +1,22 @@
+import { progressCircleSlotRecipe as baseProgressCircleSlotRecipe } from "@chakra-ui/react/theme";
+
+const baseSizeVariants = baseProgressCircleSlotRecipe.variants?.size ?? {};
+
+export const progressCircleSlotRecipe = {
+  ...baseProgressCircleSlotRecipe,
+  variants: {
+    ...baseProgressCircleSlotRecipe.variants,
+    size: {
+      ...baseSizeVariants,
+      "2xs": {
+        circle: {
+          "--size": "14px",
+          "--thickness": "2px",
+        },
+        valueText: {
+          textStyle: "2xs",
+        },
+      },
+    },
+  },
+};

package/src/theme/recipes/skeleton.ts

@@ -0,0 +1,8 @@
+import { defineRecipe } from "@chakra-ui/react";
+
+export const skeletonRecipe = defineRecipe({
+  base: {
+    "--start-color": "fg",
+    "--end-color": "fg.muted",
+  },
+});