@pstdio/ui 0.0.1

package/src/theme/recipes/textarea.ts

@@ -0,0 +1,29 @@
+import { defineRecipe } from "@chakra-ui/react";
+
+export const textareaRecipe = defineRecipe({
+  base: {
+    paddingX: "sm",
+    paddingY: "xs",
+    opacity: "1",
+    outline: "none",
+    color: "fg",
+    border: "1px solid",
+    transition: "border-color 0.2s ease-in-out",
+    borderColor: "border.muted",
+    _hover: {
+      borderColor: "border",
+    },
+    _active: {
+      borderColor: "blue.border",
+    },
+    _focus: {
+      borderColor: "blue.border",
+    },
+    _focusVisible: {
+      borderColor: "blue.border",
+    },
+    _placeholder: {
+      color: "fg.subtle",
+    },
+  },
+});

package/src/theme/recipes/tooltip.ts

@@ -0,0 +1,15 @@
+import { defineSlotRecipe } from "@chakra-ui/react";
+import { tooltipAnatomy } from "@chakra-ui/react/anatomy";
+
+export const tooltipRecipe = defineSlotRecipe({
+  slots: tooltipAnatomy.keys(),
+  base: {
+    content: {
+      bg: "bg.inverted",
+      color: "fg.inverted",
+    },
+    arrow: {
+      bg: "bg.inverted",
+    },
+  },
+});

package/src/theme/theme.ts

@@ -0,0 +1,70 @@
+import { createSystem, defaultConfig, defineConfig } from "@chakra-ui/react";
+import { globalCss } from "./global";
+import { colors } from "./primitives/colors";
+import { fontSizes, fonts, fontWeights } from "./primitives/fonts";
+import { radii, spacing } from "./primitives/sizes";
+import { alertSlotRecipe } from "./recipes/alert";
+import { buttonRecipe } from "./recipes/button";
+import { dialogSlotRecipe } from "./recipes/dialog";
+import { dividerRecipe } from "./recipes/divider";
+import { drawerSlotRecipe } from "./recipes/drawer";
+import { editableSlotRecipe } from "./recipes/editable";
+import { fieldsetSlotRecipe } from "./recipes/form";
+import { inputRecipe } from "./recipes/input";
+import { menuSlotRecipe } from "./recipes/menu";
+import { popoverRecipe } from "./recipes/popover";
+import { progressCircleSlotRecipe } from "./recipes/progress-circle";
+import { skeletonRecipe } from "./recipes/skeleton";
+import { textareaRecipe } from "./recipes/textarea";
+import { tooltipRecipe } from "./recipes/tooltip";
+import { borders } from "./tokens/borders";
+import { semanticColors } from "./tokens/colors";
+import { layerStyles } from "./tokens/layer-styles";
+import { semanticShadows, shadows } from "./tokens/shadows";
+import { textStyles } from "./tokens/text";
+
+const config = defineConfig({
+  globalCss,
+  theme: {
+    breakpoints: {
+      "3xl": "2560px",
+      "4xl": "3840px",
+    },
+    textStyles,
+    layerStyles,
+    recipes: {
+      button: buttonRecipe,
+      divider: dividerRecipe,
+      input: inputRecipe,
+      skeleton: skeletonRecipe,
+      textarea: textareaRecipe,
+    },
+    tokens: {
+      colors,
+      fonts,
+      fontSizes,
+      fontWeights,
+      radii,
+      shadows,
+      spacing,
+    },
+    semanticTokens: {
+      colors: semanticColors,
+      borders,
+      shadows: semanticShadows,
+    },
+    slotRecipes: {
+      alert: alertSlotRecipe,
+      drawer: drawerSlotRecipe,
+      tooltip: tooltipRecipe,
+      popover: popoverRecipe,
+      menu: menuSlotRecipe,
+      editable: editableSlotRecipe,
+      form: fieldsetSlotRecipe,
+      dialog: dialogSlotRecipe,
+      progressCircle: progressCircleSlotRecipe,
+    },
+  },
+});
+
+export default createSystem(defaultConfig, config);

package/src/theme/tokens/borders.ts

@@ -0,0 +1,38 @@
+export const borders = {
+  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: {
+    value: {
+      base: "1px solid {colors.blacks.400}",
+      _dark: "1px solid {colors.blacks.600}",
+    },
+  },
+  secondary: {
+    value: {
+      base: "1px solid {colors.blacks.300}",
+      _dark: "1px solid {colors.blacks.800}",
+    },
+  },
+  tertiary: {
+    value: {
+      base: "1px solid {colors.blacks.300}",
+      _dark: "1px solid {colors.blacks.800}",
+    },
+  },
+  inverse: {
+    value: {
+      base: "1px solid {colors.blacks.400}",
+      _dark: "1px solid {colors.blacks.600}",
+    },
+  },
+};

package/src/theme/tokens/colors.ts

@@ -0,0 +1,488 @@
+export const fg = {
+  DEFAULT: {
+    value: {
+      base: "{colors.blacks.800}",
+      _dark: "{colors.blacks.200}",
+    },
+  },
+
+  muted: {
+    value: {
+      base: "{colors.blacks.500}",
+      _dark: "{colors.blacks.500}",
+    },
+  },
+
+  subtle: {
+    value: {
+      base: "{colors.blacks.400}",
+      _dark: "{colors.blacks.600}",
+    },
+  },
+
+  inverted: {
+    value: {
+      base: "{colors.blacks.50}",
+      _dark: "{colors.blacks.800}",
+    },
+  },
+
+  success: {
+    value: {
+      base: "{colors.green.400}",
+      _dark: "{colors.green.400}",
+    },
+  },
+
+  error: {
+    value: {
+      base: "{colors.red.400}",
+      _dark: "{colors.red.400}",
+    },
+  },
+
+  accent: {
+    "pink-dark": {
+      value: {
+        base: "{colors.pink.700}",
+        _dark: "{colors.pink.50}",
+      },
+    },
+  },
+
+  "green-dark": {
+    value: {
+      base: "{colors.green.700}",
+      _dark: "{colors.green.50}",
+    },
+  },
+
+  "blue-dark": {
+    value: {
+      base: "{colors.sapphire.700}",
+      _dark: "{colors.sapphire.100}",
+    },
+  },
+
+  "blue-very-dark": {
+    value: {
+      base: "{colors.sapphire.900}",
+      _dark: "{colors.sapphire.800}",
+    },
+  },
+};
+
+export const bg = {
+  DEFAULT: {
+    value: {
+      base: "{colors.blacks.50}",
+      _dark: "{colors.blacks.900}",
+    },
+  },
+
+  muted: {
+    value: {
+      base: "{colors.blacks.200}",
+      _dark: "{colors.blacks.800}",
+    },
+  },
+
+  subtle: {
+    value: {
+      base: "{colors.blacks.50}",
+      _dark: "{colors.blacks.600}",
+    },
+  },
+
+  code: {
+    value: {
+      base: "{colors.blacks.50}",
+      _dark: "{colors.blacks.800}",
+    },
+  },
+
+  emphasized: {
+    value: {
+      base: "{colors.blacks.50}",
+      _dark: "{colors.blacks.600}",
+    },
+  },
+
+  inverted: {
+    value: {
+      base: "{colors.blacks.800}",
+      _dark: "{colors.blacks.100}",
+    },
+  },
+
+  panel: {
+    value: {
+      base: "{colors.blacks.100}",
+      _dark: "{colors.blacks.850}",
+    },
+  },
+
+  dark: {
+    value: {
+      base: "{colors.blacks.900}",
+      _dark: "{colors.blacks.900}",
+    },
+  },
+
+  white: {
+    value: {
+      base: "{colors.blacks.50}",
+      _dark: "{colors.blacks.50}",
+    },
+  },
+
+  display: {
+    "very-light": {
+      value: {
+        base: "{colors.sand.50}",
+        _dark: "{colors.blacks.1000}",
+      },
+    },
+  },
+
+  "accent-primary": {
+    "very-light": {
+      value: {
+        base: "{colors.accentPrimary.light}",
+        _dark: "{colors.blacks.1000}",
+      },
+    },
+    light: {
+      value: {
+        base: "{colors.accentPrimary.light}",
+        _dark: "{colors.accentPrimary.light}",
+      },
+    },
+    medium: {
+      value: {
+        base: "{colors.accentPrimary.medium}",
+        _dark: "{colors.accentPrimary.medium}",
+      },
+    },
+    dark: {
+      value: {
+        base: "{colors.accentPrimary.dark}",
+        _dark: "{colors.accentPrimary.dark}",
+      },
+    },
+  },
+
+  "accent-secondary": {
+    "grey-dark": {
+      value: {
+        base: "{colors.blacks.50}",
+        _dark: "{colors.blacks.1000}",
+      },
+    },
+    "grey-light": {
+      value: {
+        base: "{colors.blacks.100}",
+        _dark: "{colors.blacks.900}",
+      },
+    },
+    "red-very-light": {
+      value: {
+        base: "{colors.red.50}",
+        _dark: "{colors.red.100}",
+      },
+    },
+    "red-light": {
+      value: {
+        base: "{colors.red.100}",
+        _dark: "{colors.red.100}",
+      },
+    },
+    "pink-light": {
+      value: {
+        base: "{colors.pink.50}",
+        _dark: "{colors.pink.700}",
+      },
+    },
+    "pink-medium": {
+      value: {
+        base: "{colors.pink.100}",
+        _dark: "{colors.pink.800}",
+      },
+    },
+    "blue-very-light": {
+      value: {
+        base: "{colors.blue.25}",
+        _dark: "{colors.blue.50}",
+      },
+    },
+    "blue-light": {
+      value: {
+        base: "{colors.blue.50}",
+        _dark: "{colors.blue.700}",
+      },
+    },
+    "blue-medium": {
+      value: {
+        base: "{colors.blue.100}",
+        _dark: "{colors.blue.800}",
+      },
+    },
+    "blue-dark": {
+      value: {
+        base: "{colors.blue.700}",
+        _dark: "{colors.blue.200}",
+      },
+    },
+    "cyan-light": {
+      value: {
+        base: "{colors.cyan.50}",
+        _dark: "{colors.cyan.100}",
+      },
+    },
+    "green-light": {
+      value: {
+        base: "{colors.green.50}",
+        _dark: "{colors.sapphire.50}",
+      },
+    },
+    "yellow-light": {
+      value: {
+        base: "{colors.yellow.50}",
+        _dark: "{colors.yellow.100}",
+      },
+    },
+    "yellow-medium": {
+      value: {
+        base: "{colors.yellow.100}",
+        _dark: "{colors.yellow.200}",
+      },
+    },
+    "sand-light": {
+      value: {
+        base: "{colors.sand.100}",
+        _dark: "{colors.sand.100}",
+      },
+    },
+  },
+};
+
+export const border = {
+  DEFAULT: {
+    value: {
+      base: "{colors.blacks.400}",
+      _dark: "{colors.blacks.600}",
+    },
+  },
+
+  muted: {
+    value: {
+      base: "{colors.blacks.300}",
+      _dark: "{colors.blacks.700}",
+    },
+  },
+
+  subtle: {
+    value: {
+      base: "{colors.blacks.300}",
+      _dark: "{colors.blacks.50}",
+    },
+  },
+
+  inverted: {
+    value: {
+      base: "{colors.blacks.400}",
+      _dark: "{colors.blacks.600}",
+    },
+  },
+
+  "accent-light": {
+    value: {
+      base: "{colors.blue.200}",
+      _dark: "{colors.blue.900}",
+    },
+  },
+};
+
+export const blue = {
+  border: {
+    value: {
+      base: "{colors.blue.700}",
+      _dark: "{colors.blue.200}",
+    },
+  },
+};
+
+export const vis = {
+  text: {
+    primary: {
+      value: {
+        base: "{colors.blacks.800}",
+        _dark: "{colors.blacks.200}",
+      },
+    },
+    secondary: {
+      value: {
+        base: "{colors.blacks.600}",
+        _dark: "{colors.blacks.500}",
+      },
+    },
+  },
+
+  grid: {
+    value: {
+      base: "{colors.blacks.300}",
+      _dark: "{colors.blacks.800}",
+    },
+  },
+
+  axis: {
+    value: {
+      base: "{colors.blacks.700}",
+      _dark: "{colors.blacks.300}",
+    },
+  },
+
+  categorical: {
+    1: {
+      value: {
+        base: "{colors.blue.300}",
+        _dark: "{colors.blue.300}",
+      },
+    },
+    2: {
+      value: {
+        base: "{colors.orange.500}",
+        _dark: "{colors.orange.500}",
+      },
+    },
+    3: {
+      value: {
+        base: "{colors.purple.700}",
+        _dark: "{colors.purple.700}",
+      },
+    },
+    4: {
+      value: {
+        base: "{colors.red.500}",
+        _dark: "{colors.red.600}",
+      },
+    },
+    5: {
+      value: {
+        base: "{colors.pink.500}",
+        _dark: "{colors.pink.500}",
+      },
+    },
+    6: {
+      value: {
+        base: "{colors.cyan.800}",
+        _dark: "{colors.green.500}",
+      },
+    },
+    7: {
+      value: {
+        base: "{colors.red.200}",
+        _dark: "{colors.cyan.700}",
+      },
+    },
+  },
+
+  sequential: {
+    blue: {
+      "low-3": {
+        value: {
+          base: "{colors.blue.200}",
+          _dark: "{colors.blue.800}",
+        },
+      },
+      "low-2": {
+        value: {
+          base: "{colors.blue.300}",
+          _dark: "{colors.blue.700}",
+        },
+      },
+      "low-1": {
+        value: {
+          base: "{colors.blue.400}",
+          _dark: "{colors.blue.600}",
+        },
+      },
+      default: {
+        value: {
+          base: "{colors.blue.500}",
+          _dark: "{colors.blue.500}",
+        },
+      },
+      "high-1": {
+        value: {
+          base: "{colors.blue.600}",
+          _dark: "{colors.blue.400}",
+        },
+      },
+      "high-2": {
+        value: {
+          base: "{colors.blue.700}",
+          _dark: "{colors.blue.300}",
+        },
+      },
+      "high-3": {
+        value: {
+          base: "{colors.blue.800}",
+          _dark: "{colors.blue.200}",
+        },
+      },
+    },
+    red: {
+      "low-3": {
+        value: {
+          base: "{colors.red.200}",
+          _dark: "{colors.red.800}",
+        },
+      },
+      "low-2": {
+        value: {
+          base: "{colors.red.300}",
+          _dark: "{colors.red.700}",
+        },
+      },
+      "low-1": {
+        value: {
+          base: "{colors.red.400}",
+          _dark: "{colors.red.600}",
+        },
+      },
+      default: {
+        value: {
+          base: "{colors.red.500}",
+          _dark: "{colors.red.500}",
+        },
+      },
+      "high-1": {
+        value: {
+          base: "{colors.red.600}",
+          _dark: "{colors.red.400}",
+        },
+      },
+      "high-2": {
+        value: {
+          base: "{colors.red.700}",
+          _dark: "{colors.red.300}",
+        },
+      },
+      "high-3": {
+        value: {
+          base: "{colors.red.800}",
+          _dark: "{colors.red.200}",
+        },
+      },
+    },
+  },
+};
+
+export const semanticColors = {
+  fg,
+  bg,
+  border,
+  blue,
+  vis,
+};

package/src/theme/tokens/layer-styles.ts

@@ -0,0 +1,15 @@
+import { defineLayerStyles } from "@chakra-ui/react";
+
+export const layerStyles = defineLayerStyles({
+  modal: {
+    value: {
+      paddingInline: "xs",
+      paddingBlock: "sm",
+      borderRadius: "sm",
+      bg: "bg",
+      border: "1px solid",
+      borderColor: "border",
+      boxShadow: "mid",
+    },
+  },
+});

package/src/theme/tokens/shadows.ts

@@ -0,0 +1,47 @@
+// Primitive shadow tokens
+export const shadows = {
+  "low-light": { value: "0px 2px 4px 0px rgba(0, 0, 0, 0.10)" },
+  "mid-light": { value: "0px 6px 12px 0px rgba(0, 0, 0, 0.10)" },
+  "high-light": { value: "0px 12px 24px 0px rgba(0, 0, 0, 0.10)" },
+  "low-dark": { value: "0px 2px 4px 0px rgba(0, 0, 0, 0.45)" },
+  "mid-dark": { value: "0px 6px 12px 0px rgba(0, 0, 0, 0.5)" },
+  "high-dark": { value: "0px 12px 24px 0px rgba(0, 0, 0, 0.55)" },
+  "desktop-icon-label-text-light": { value: "0px 1px 3px rgba(15, 23, 42, 0.45)" },
+  "desktop-icon-label-text-dark": { value: "0px 1px 3px rgba(8, 15, 35, 0.75)" },
+  "desktop-icon-label-text-selected-light": { value: "0px 1px 3px rgba(37, 99, 235, 0.55)" },
+  "desktop-icon-label-text-selected-dark": { value: "0px 2px 4px rgba(37, 99, 235, 0.75)" },
+};
+
+// Semantic shadow tokens for light/dark mode
+export const semanticShadows = {
+  low: {
+    value: {
+      base: "{shadows.low-light}",
+      _dark: "{shadows.low-dark}",
+    },
+  },
+  mid: {
+    value: {
+      base: "{shadows.mid-light}",
+      _dark: "{shadows.mid-dark}",
+    },
+  },
+  high: {
+    value: {
+      base: "{shadows.high-light}",
+      _dark: "{shadows.high-dark}",
+    },
+  },
+  "desktop-icon-label": {
+    value: {
+      base: "{shadows.desktop-icon-label-text-light}",
+      _dark: "{shadows.desktop-icon-label-text-dark}",
+    },
+  },
+  "desktop-icon-label-selected": {
+    value: {
+      base: "{shadows.desktop-icon-label-text-selected-light}",
+      _dark: "{shadows.desktop-icon-label-text-selected-dark}",
+    },
+  },
+};