@pstdio/ui 0.0.3 → 0.1.0

package/src/theme/recipes/textarea.ts

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

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

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

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

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

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

@@ -1,47 +0,0 @@
-// 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}",
-    },
-  },
-};