Theming

/**
 * React provider component for theme context
 * @param props - Provider configuration
 * @returns JSX element providing theme context
 */
function ThemeProvider(props: ThemeProviderProps): JSX.Element;

interface ThemeProviderProps {
  /**
   * The theme object containing design tokens and component styles
   */
  theme: Dict;
  /**
   * CSS selector for the root element where CSS variables are applied
   * @default ":host, :root"
   */
  cssVarsRoot?: string;
  /**
   * React children to receive theme context
   */
  children?: React.ReactNode;
}

import { ThemeProvider } from "@chakra-ui/system";

const theme = {
  colors: {
    brand: {
      50: "#e3f2fd",
      500: "#2196f3",
      900: "#0d47a1"
    }
  },
  components: {
    Button: {
      variants: {
        solid: {
          bg: "brand.500",
          color: "white"
        }
      }
    }
  }
};

function App() {
  return (
    <ThemeProvider theme={theme}>
      <YourComponents />
    </ThemeProvider>
  );
}

/**
 * Hook for accessing the complete theme object from context
 * @returns Theme object with design tokens and configurations
 */
function useTheme<T extends object = Dict>(): T;

import { useTheme } from "@chakra-ui/system";

function MyComponent() {
  const theme = useTheme();
  
  return (
    <div style={{ 
      backgroundColor: theme.colors.brand[500],
      padding: theme.space[4]
    }}>
      Themed component
    </div>
  );
}

/**
 * Hook for resolving design tokens from the theme
 * @param scale - Theme scale (colors, space, sizes, etc.)
 * @param token - Token key or array of keys
 * @param fallback - Fallback value if token not found
 * @returns Resolved token value(s)
 */
function useToken<T extends StringOrNumber | StringOrNumber[]>(
  scale: string,
  token: T,
  fallback?: T
): T;

/**
 * Function version of useToken that returns a theme resolver
 * @param scale - Theme scale (colors, space, sizes, etc.)
 * @param token - Token key or array of keys  
 * @param fallback - Fallback value if token not found
 * @returns Function that resolves token from theme
 */
function getToken<T extends StringOrNumber | StringOrNumber[]>(
  scale: string,
  token: T,
  fallback?: T
): (theme: Dict) => T;

import { useToken, getToken } from "@chakra-ui/system";

function TokenExample() {
  // Resolve single token
  const blue500 = useToken("colors", "blue.500");
  
  // Resolve multiple tokens
  const [space4, space8] = useToken("space", ["4", "8"]);
  
  // With fallback
  const customColor = useToken("colors", "custom.500", "#3182ce");
  
  return (
    <div style={{
      backgroundColor: blue500,
      padding: `${space4} ${space8}`,
      color: customColor
    }}>
      Token-based styling
    </div>
  );
}

// Using getToken for theme-aware functions
const getButtonStyles = getToken("components", "Button.variants.solid");

/**
 * Hook for single-part component styling based on theme configuration
 * @param themeKey - Key in theme.components object
 * @param props - Theming props (variant, size, colorScheme, etc.)
 * @returns Resolved style object
 */
function useStyleConfig(
  themeKey: string, 
  props?: ThemingProps & Dict
): SystemStyleObject;

/**
 * Hook for multi-part component styling based on theme configuration
 * @param themeKey - Key in theme.components object
 * @param props - Theming props (variant, size, colorScheme, etc.)
 * @returns Object with styles for each component part
 */
function useMultiStyleConfig(
  themeKey: string, 
  props?: ThemingProps & Dict
): Record<string, SystemStyleObject>;

/**
 * Unstable hook for component styles with base configuration
 * @param themeKey - Key in theme.components object
 * @param props - Theming props with base config
 * @returns Resolved style configuration
 */
function useComponentStyles__unstable(
  themeKey: string, 
  props: ThemingProps & { baseConfig: any }
): any;

import { useStyleConfig, useMultiStyleConfig } from "@chakra-ui/system";

// Single-part component
function CustomButton(props) {
  const { variant, size, colorScheme, children, ...rest } = props;
  
  const styles = useStyleConfig("Button", { variant, size, colorScheme });
  
  return (
    <button __css={styles} {...rest}>
      {children}
    </button>
  );
}

// Multi-part component
function CustomModal(props) {
  const { size, children, ...rest } = props;
  
  const styles = useMultiStyleConfig("Modal", { size });
  
  return (
    <div __css={styles.overlay}>
      <div __css={styles.content}>
        <div __css={styles.header}>Header</div>
        <div __css={styles.body}>{children}</div>
      </div>
    </div>
  );
}

/**
 * Component for injecting CSS custom properties from theme
 * @param props - CSS variables configuration
 * @returns JSX element with CSS variables
 */
function CSSVars(props: CSSVarsProps): JSX.Element;

interface CSSVarsProps {
  /**
   * CSS selector for where variables should be applied
   * @default ":host, :root"
   */
  root?: string;
  /**
   * Additional CSS variables to include
   */
  vars?: Record<string, string>;
}

/**
 * Convert theme tokens to CSS variables
 * @param token - Theme token path
 * @param fallback - Fallback value
 * @returns CSS variable reference
 */
function tokenToCSSVar(token: string, fallback?: string): string;

/**
 * Get CSS variable reference for a token
 * @param name - Variable name
 * @param fallback - Fallback value
 * @returns CSS variable reference string
 */
function getCSSVar(name: string, fallback?: string): string;

/**
 * Component for applying global styles defined in theme.styles.global
 * @returns JSX element with global styles
 */
function GlobalStyle(): JSX.Element;

import { ThemeProvider, CSSVars, GlobalStyle } from "@chakra-ui/system";

const theme = {
  styles: {
    global: {
      body: {
        fontFamily: "Inter, sans-serif",
        bg: "gray.50"
      }
    }
  }
};

function App() {
  return (
    <ThemeProvider theme={theme}>
      <CSSVars />
      <GlobalStyle />
      <YourApp />
    </ThemeProvider>
  );
}

/**
 * @deprecated Use useMultiStyleConfig instead
 * Context provider for component styles
 */
function StylesProvider(props: {
  value: Record<string, SystemStyleObject>;
  children: React.ReactNode;
}): JSX.Element;

/**
 * @deprecated Use useMultiStyleConfig instead
 * Hook for accessing styles from StylesProvider
 */
function useStyles(): Record<string, SystemStyleObject>;

/**
 * Factory for creating component-specific styles context
 * @param componentName - Name of the component for error messages
 * @returns Context provider and hook for component styles
 */
function createStylesContext(componentName: string): CreateStyleContextReturn;

interface CreateStyleContextReturn {
  StylesProvider: React.ComponentType<{
    value: Record<string, SystemStyleObject>;
    children: React.ReactNode;
  }>;
  useStyles: () => Record<string, SystemStyleObject>;
}

/**
 * Define reusable style objects with theme-aware properties
 * @param style - Style object with theme tokens
 * @returns Style object for use in components
 */
function defineStyle(style: SystemStyleObject): SystemStyleObject;

/**
 * Define component style configuration for theme
 * @param config - Style configuration object
 * @returns Component style configuration
 */
function defineStyleConfig(config: StyleConfig): StyleConfig;

interface StyleConfig {
  baseStyle?: SystemStyleObject | ((props: any) => SystemStyleObject);
  variants?: Record<string, SystemStyleObject | ((props: any) => SystemStyleObject)>;
  sizes?: Record<string, SystemStyleObject | ((props: any) => SystemStyleObject)>;
  defaultProps?: {
    variant?: string;
    size?: string;
    colorScheme?: string;
  };
}

import { defineStyle, defineStyleConfig } from "@chakra-ui/system";

// Define reusable styles
const cardStyle = defineStyle({
  borderRadius: "lg",
  bg: "white",
  boxShadow: "md",
  p: 6
});

// Define component configuration
const ButtonConfig = defineStyleConfig({
  baseStyle: {
    fontWeight: "semibold",
    borderRadius: "md",
    _focus: { boxShadow: "outline" }
  },
  variants: {
    solid: (props) => ({
      bg: `${props.colorScheme}.500`,
      color: "white",
      _hover: { bg: `${props.colorScheme}.600` }
    }),
    outline: (props) => ({
      border: "2px solid",
      borderColor: `${props.colorScheme}.500`,
      color: `${props.colorScheme}.500`
    })
  },
  sizes: {
    sm: { px: 3, py: 1, fontSize: "sm" },
    md: { px: 4, py: 2, fontSize: "md" },
    lg: { px: 6, py: 3, fontSize: "lg" }
  },
  defaultProps: {
    variant: "solid",
    size: "md",
    colorScheme: "blue"
  }
});

/**
 * Combined hook providing theme and color mode functionality
 * @returns Object with color mode controls and theme
 */
function useChakra<T extends Dict = Dict>(): {
  colorMode: "light" | "dark";
  toggleColorMode: () => void;
  setColorMode: (value: "light" | "dark") => void;
  theme: T;
};

import { useChakra } from "@chakra-ui/system";

function ThemedComponent() {
  const { colorMode, toggleColorMode, theme } = useChakra();
  
  return (
    <div style={{
      backgroundColor: colorMode === "light" 
        ? theme.colors.white 
        : theme.colors.gray[800],
      color: colorMode === "light"
        ? theme.colors.black
        : theme.colors.white
    }}>
      <button onClick={toggleColorMode}>
        Switch to {colorMode === "light" ? "dark" : "light"} mode
      </button>
    </div>
  );
}

// Theme and configuration types
type Dict<T = any> = Record<string, T>;
type StringOrNumber = string | number;

// Theme typings interface
interface ThemeTypings {
  borders: string;
  colors: string;
  fonts: string;
  fontSizes: string;
  fontWeights: string;
  letterSpacings: string;
  lineHeights: string;
  radii: string;
  shadows: string;
  sizes: string;
  space: string;
  zIndices: string;
}

// Base theme typings
interface BaseThemeTypings {
  borders: string;
  breakpoints: string;
  colors: string;
  fonts: string;
  fontSizes: string;
  fontWeights: string;
  letterSpacings: string;
  lineHeights: string;
  radii: string;
  shadows: string;
  sizes: string;
  space: string;
  transition: string;
  zIndices: string;
}

// Theme with CSS variables
interface WithCSSVar<T extends Dict> {
  __cssVars: Dict;
  __cssMap: Dict;
  __breakpoints: {
    keys: string[];
    asArray: string[];
    asObject: Dict<string>;
  };
}

// Theming props for components
interface ThemingProps<ThemeComponent = string> {
  variant?: ResponsiveValue<ThemeComponent>;
  size?: ResponsiveValue<ThemeComponent>;
  colorScheme?: ResponsiveValue<string>;
  orientation?: ResponsiveValue<"horizontal" | "vertical">;
}