@pstdio/ui 0.0.3 → 0.1.0

package/src/theme/primitives/colors.ts

@@ -1,209 +0,0 @@
-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

@@ -1,33 +0,0 @@
-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

@@ -1,49 +0,0 @@
-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

@@ -1,12 +0,0 @@
-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

@@ -1,124 +0,0 @@
-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

@@ -1,11 +0,0 @@
-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

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

package/src/theme/recipes/drawer.ts

@@ -1,16 +0,0 @@
-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

@@ -1,42 +0,0 @@
-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

@@ -1,11 +0,0 @@
-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

@@ -1,25 +0,0 @@
-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

@@ -1,40 +0,0 @@
-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

@@ -1,46 +0,0 @@
-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

@@ -1,22 +0,0 @@
-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

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