Theming and Styling

/**
 * Creates a Material-UI theme with custom configuration options
 * @param options - Theme configuration options
 * @returns Configured theme object
 */
function createMuiTheme(options?: ThemeOptions): Theme;

interface ThemeOptions {
  breakpoints?: BreakpointsOptions;
  direction?: Direction;
  mixins?: MixinsOptions;
  overrides?: Overrides;
  palette?: PaletteOptions;
  props?: ComponentsProps;
  shadows?: Shadows;
  spacing?: SpacingOptions;
  transitions?: TransitionsOptions;
  typography?: TypographyOptions;
  zIndex?: ZIndexOptions;
  shape?: ShapeOptions;
}

interface Theme {
  palette: Palette;
  typography: Typography;
  spacing: Spacing;
  breakpoints: Breakpoints;
  shadows: Shadows;
  transitions: Transitions;
  zIndex: ZIndex;
  shape: Shape;
  mixins: Mixins;
  direction: Direction;
  overrides?: Overrides;
  props?: ComponentsProps;
}

import { createMuiTheme } from '@material-ui/core/styles';
import { blue, red } from '@material-ui/core/colors';

// Basic theme with custom colors
const theme = createMuiTheme({
  palette: {
    primary: blue,
    secondary: red,
    type: 'dark',
  },
});

// Advanced theme configuration
const advancedTheme = createMuiTheme({
  palette: {
    primary: {
      main: '#1976d2',
    },
    secondary: {
      main: '#dc004e',
    },
  },
  typography: {
    fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif',
    h1: {
      fontSize: '2.5rem',
      fontWeight: 300,
    },
  },
  spacing: 8,
  shape: {
    borderRadius: 4,
  },
});

/**
 * Provides theme context to the component tree
 * @param props - Theme provider props
 * @returns React component providing theme context
 */
function ThemeProvider(props: ThemeProviderProps): JSX.Element;

interface ThemeProviderProps {
  children: React.ReactNode;
  theme: Theme | ((outerTheme: Theme) => Theme);
}

import { ThemeProvider } from '@material-ui/core/styles';

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

/**
 * Higher-order component for styling components with theme integration
 * @param styles - Styles object or function returning styles
 * @param options - Styling options
 * @returns HOC that provides classes prop to wrapped component
 */
function withStyles<P extends object>(
  styles: Styles<Theme, P>,
  options?: WithStylesOptions<Theme>
): (Component: React.ComponentType<P>) => React.ComponentType<P>;

type Styles<Theme, Props extends object> = 
  | Record<string, CSSProperties | CreateCSSProperties<Props> | PropsFunc<Props, CreateCSSProperties<Props>>>
  | ((theme: Theme) => Record<string, CSSProperties | CreateCSSProperties<Props> | PropsFunc<Props, CreateCSSProperties<Props>>>);

interface WithStylesOptions<Theme = DefaultTheme> extends JSS.StyleSheetFactoryOptions {
  defaultTheme?: Theme;
  withTheme?: boolean;
  name?: string;
  flip?: boolean;
  index?: number;
}

import { withStyles } from '@material-ui/core/styles';

const styles = (theme) => ({
  root: {
    padding: theme.spacing(2),
    backgroundColor: theme.palette.background.paper,
    borderRadius: theme.shape.borderRadius,
  },
  title: {
    color: theme.palette.primary.main,
    marginBottom: theme.spacing(1),
  },
});

const StyledComponent = withStyles(styles)(({ classes, title, children }) => (
  <div className={classes.root}>
    <h2 className={classes.title}>{title}</h2>
    {children}
  </div>
));

/**
 * Higher-order component for accessing theme in components
 * @param Component - Component to wrap with theme access
 * @returns Component with theme prop injected
 */
function withTheme<P extends WithThemeProps<Theme>>(
  Component: React.ComponentType<P>
): React.ComponentType<Omit<P, keyof WithThemeProps<Theme>>>;

interface WithThemeProps<Theme> {
  theme: Theme;
}

/**
 * Creates typed styles object for TypeScript integration
 * @param styles - Styles object
 * @returns Typed styles object
 */
function createStyles<T extends Record<string, CSSProperties | CreateCSSProperties>>(styles: T): T;

/**
 * Creates class name generator with custom configuration
 * @param options - Class name generator options
 * @returns Class name generator function
 */
function createGenerateClassName(options?: CreateGenerateClassNameOptions): GenerateClassName;

interface CreateGenerateClassNameOptions {
  dangerouslyUseGlobalCSS?: boolean;
  productionPrefix?: string;
  seed?: string;
}

type GenerateClassName = (rule: object, sheet?: object) => string;

/**
 * JSS preset with Material-UI specific plugins and configuration
 * @returns JSS preset object
 */
function jssPreset(): JSS.Preset;

interface Palette {
  type: PaletteType;
  common: CommonColors;
  primary: PaletteColor;
  secondary: PaletteColor;
  error: PaletteColor;
  grey: Color;
  contrastThreshold: number;
  tonalOffset: number;
  text: TypeText;
  divider: string;
  action: TypeAction;
  background: TypeBackground;
}

interface PaletteColor {
  light: string;
  main: string;
  dark: string;
  contrastText: string;
}

interface Typography extends Record<TypographyVariant, TypographyStyle> {
  pxToRem: (px: number) => string;
  round: (px: number) => number;
  fontFamily: string;
  fontSize: number;
  fontWeightLight: number;
  fontWeightRegular: number;
  fontWeightMedium: number;
  fontWeightBold: number;
}

interface TypographyStyle {
  fontFamily: string;
  fontWeight: number;
  fontSize: string;
  lineHeight: number;
  letterSpacing?: string;
  color?: string;
  textTransform?: string;
}

type Spacing = (factor: number) => number;

interface Breakpoints {
  keys: Breakpoint[];
  values: Record<Breakpoint, number>;
  up: (key: Breakpoint | number) => string;
  down: (key: Breakpoint | number) => string;
  between: (start: Breakpoint | number, end: Breakpoint | number) => string;
  only: (key: Breakpoint) => string;
  width: (key: Breakpoint) => number;
}

interface Transitions {
  easing: {
    easeInOut: string;
    easeOut: string;
    easeIn: string;
    sharp: string;
  };
  duration: {
    shortest: number;
    shorter: number;
    short: number;
    standard: number;
    complex: number;
    enteringScreen: number;
    leavingScreen: number;
  };
  create: (
    props: string | string[],
    options?: Partial<{
      duration: number | string;
      easing: string;
      delay: number | string;
    }>
  ) => string;
}

type Shadows = [
  'none',
  string,
  string,
  string,
  string,
  string,
  string,
  string,
  string,
  string,
  string,
  string,
  string,
  string,
  string,
  string,
  string,
  string,
  string,
  string,
  string,
  string,
  string,
  string,
  string
];

interface ZIndex {
  mobileStepper: number;
  appBar: number;
  drawer: number;
  modal: number;
  snackbar: number;
  tooltip: number;
}