Component Styling

/**
 * Returns light or dark value based on color mode
 * @param light - Value for light mode
 * @param dark - Value for dark mode
 * @returns Function that takes props and returns appropriate value
 */
function mode<T>(light: T, dark: T): (props: StyleFunctionProps) => T;

type StyleFunctionProps = {
  colorMode?: "light" | "dark";
  [key: string]: any;
};

import { mode } from "@chakra-ui/theme-tools/component";

// Define color mode dependent values
const backgroundColor = mode("gray.100", "gray.800");
const textColor = mode("gray.800", "gray.100");
const borderColor = mode("gray.200", "gray.600");

// Use in component props
const lightProps = { colorMode: "light" };
const darkProps = { colorMode: "dark" };

const bgLight = backgroundColor(lightProps); // "gray.100"
const bgDark = backgroundColor(darkProps); // "gray.800"

// Common usage in theme definitions
const buttonStyles = {
  baseStyle: {
    bg: mode("white", "gray.800"),
    color: mode("gray.800", "white"),
    borderColor: mode("gray.200", "gray.600"),
  }
};

/**
 * Returns value based on orientation (vertical/horizontal)
 * @param options - Configuration object with orientation values
 * @returns Value for the specified orientation or empty object
 */
function orient<T>(options: {
  orientation?: "vertical" | "horizontal";
  vertical: T;
  horizontal: T;
}): T | {};

import { orient } from "@chakra-ui/theme-tools/component";

// Define orientation-dependent styles
const flexDirection = orient({
  orientation: "vertical",
  vertical: "column",
  horizontal: "row"
}); // "column"

const spacing = orient({
  orientation: "horizontal", 
  vertical: { mb: 4 },
  horizontal: { mr: 4 }
}); // { mr: 4 }

// No orientation specified returns empty object
const emptyResult = orient({
  vertical: "column",
  horizontal: "row"
}); // {}

// Common usage in component definitions
const stackStyles = (orientation) => ({
  display: "flex",
  flexDirection: orient({
    orientation,
    vertical: "column",
    horizontal: "row"
  }),
  gap: orient({
    orientation,
    vertical: "1rem 0",
    horizontal: "0 1rem"
  })
});

/** Props for global styles */
type GlobalStyleProps = StyleFunctionProps;

/** Global style object definition */
type GlobalStyles = {
  global?: SystemStyleInterpolation;
};

/** Styles for JSX intrinsic elements */
type JSXElementStyles = {
  [K in keyof JSX.IntrinsicElements]?: SystemStyleObject;
};

/** Combined global and JSX element styles */
type Styles = GlobalStyles & JSXElementStyles;

/** Props passed to style functions */
type StyleFunctionProps = {
  colorMode?: "light" | "dark";
  orientation?: "vertical" | "horizontal";
  theme?: any;
  [key: string]: any;
};

/** Configuration for single-part components */
type StyleConfig = any;

/** Configuration for multi-part components */
type MultiStyleConfig = any;

/** System style object */
type SystemStyleObject = any;

/** System style function */
type SystemStyleFunction = any;

/** System style interpolation */
type SystemStyleInterpolation = any;

/** Style object for component parts */
type PartsStyleObject = any;

/** Style function for component parts */
type PartsStyleFunction = any;

/** Style interpolation for component parts */
type PartsStyleInterpolation = any;

import { mode, orient, type StyleConfig } from "@chakra-ui/theme-tools/component";

// Button component theme
const buttonTheme: StyleConfig = {
  baseStyle: {
    fontWeight: "semibold",
    borderRadius: "md",
    bg: mode("gray.100", "gray.700"),
    color: mode("gray.800", "white"),
    _hover: {
      bg: mode("gray.200", "gray.600"),
    }
  },
  sizes: {
    sm: { fontSize: "sm", px: 3, py: 1 },
    md: { fontSize: "md", px: 4, py: 2 },
    lg: { fontSize: "lg", px: 6, py: 3 }
  },
  variants: {
    solid: {
      bg: mode("blue.500", "blue.200"),
      color: mode("white", "gray.800")
    },
    outline: {
      border: "1px solid",
      borderColor: mode("gray.200", "gray.600"),
      bg: "transparent"
    }
  }
};

// Stack component with orientation support
const stackTheme = {
  baseStyle: (props) => ({
    display: "flex",
    flexDirection: orient({
      orientation: props.orientation,
      vertical: "column", 
      horizontal: "row"
    }),
    gap: orient({
      orientation: props.orientation,
      vertical: 4,
      horizontal: 4
    })
  })
};