Styling & Theming

/**
 * Create a new theme with custom overrides
 * @param theme - Partial theme overrides
 * @returns Complete theme object
 */
function createTheme(theme?: IPartialTheme): ITheme;

/**
 * Load theme globally for the application
 * @param theme - Partial theme to load
 * @returns Complete loaded theme
 */
function loadTheme(theme: IPartialTheme): ITheme;

/**
 * Get the current global theme
 * @returns Current theme object
 */
function getTheme(): ITheme;

/**
 * Theme provider component
 * @param props - Theme provider properties
 * @returns JSX element providing theme context
 */
function ThemeProvider(props: ThemeProviderProps): JSX.Element;

/**
 * Hook to access current theme
 * @returns Current theme object
 */
function useTheme(): ITheme;

/**
 * Register callback for theme changes
 * @param callback - Function to call when theme changes
 * @returns Unregister function
 */
function registerOnThemeChangeCallback(callback: (theme: ITheme) => void): () => void;

/**
 * Remove theme change callback
 * @param callback - Callback function to remove
 */
function removeOnThemeChangeCallback(callback: (theme: ITheme) => void): void;

interface ITheme {
  /** Color palette */
  palette: IPalette;
  /** Typography definitions */
  fonts: IFontStyles;
  /** Semantic color mappings */
  semanticColors: ISemanticColors;
  /** Shadow and elevation effects */
  effects: IEffects;
  /** Spacing scale */
  spacing: ISpacing;
  /** Whether theme is inverted (dark) */
  isInverted?: boolean;
  /** Disable global class names */
  disableGlobalClassNames?: boolean;
}

interface IPalette {
  themePrimary: string;
  themeLighterAlt: string;
  themeLighter: string;
  themeLight: string;
  themeTertiary: string;
  themeSecondary: string;
  themeDarkAlt: string;
  themeDark: string;
  themeDarker: string;
  neutralLighterAlt: string;
  neutralLighter: string;
  neutralLight: string;
  neutralQuaternaryAlt: string;
  neutralQuaternary: string;
  neutralTertiaryAlt: string;
  neutralTertiary: string;
  neutralSecondary: string;
  neutralPrimaryAlt: string;
  neutralPrimary: string;
  neutralDark: string;
  black: string;
  white: string;
  // Additional semantic colors
  red: string;
  redDark: string;
  orange: string;
  orangeLight: string;
  orangeLighter: string;
  yellowDark: string;
  yellow: string;
  yellowLight: string;
  green: string;
  greenLight: string;
  greenDark: string;
  teal: string;
  tealLight: string;
  tealDark: string;
  blue: string;
  blueLight: string;
  blueMid: string;
  blueDark: string;
  purple: string;
  purpleLight: string;
  purpleDark: string;
  magenta: string;
  magentaLight: string;
  magentaDark: string;
}

import { 
  createTheme, 
  loadTheme, 
  ThemeProvider, 
  useTheme,
  IPartialTheme 
} from "@fluentui/react";

// Create custom theme
const customTheme = createTheme({
  palette: {
    themePrimary: '#0078d4',
    themeSecondary: '#106ebe',
    themeDarkAlt: '#006cbe',
    neutralPrimary: '#323130',
    neutralSecondary: '#605e5c',
  },
  fonts: {
    small: {
      fontSize: '11px',
    },
    medium: {
      fontSize: '14px',
    },
    large: {
      fontSize: '18px',
    },
  },
});

// Load theme globally
loadTheme(customTheme);

// Use ThemeProvider for component tree
function App() {
  return (
    <ThemeProvider theme={customTheme}>
      <MyComponent />
    </ThemeProvider>
  );
}

// Access theme in components
function MyComponent() {
  const theme = useTheme();
  
  return (
    <div style={{ 
      backgroundColor: theme.palette.neutralLighter,
      color: theme.palette.neutralPrimary,
      padding: theme.spacing.m 
    }}>
      Themed content
    </div>
  );
}

/**
 * Merge CSS-in-JS styles into a single class name
 * @param styles - Style objects to merge
 * @returns Generated class name
 */
function mergeStyles(...styles: (IStyle | undefined)[]): string;

/**
 * Merge style sets into processed style set with class names
 * @param styleSets - Style sets to merge
 * @returns Processed style set with class names
 */
function mergeStyleSets<T extends IStyleSet<T>>(...styleSets: (T | undefined)[]): IProcessedStyleSet<T>;

/**
 * Concatenate style sets without processing
 * @param styleSets - Style sets to concatenate
 * @returns Concatenated style set
 */
function concatStyleSets<T extends IStyleSet<T>>(...styleSets: (T | undefined)[]): T;

/**
 * Concatenate style sets with props
 * @param styleSet - Base style set
 * @param ...styleSets - Additional style sets
 * @returns Concatenated style set
 */
function concatStyleSetsWithProps<TStyleSet extends IStyleSet<TStyleSet>, TStyleProps>(
  styleSet: TStyleSet | IStyleFunctionOrObject<TStyleProps, TStyleSet>,
  ...styleSets: (TStyleSet | IStyleFunctionOrObject<TStyleProps, TStyleSet> | undefined)[]
): IStyleFunctionOrObject<TStyleProps, TStyleSet>;

/**
 * CSS class name generation utility
 * @param args - CSS class arguments
 * @returns Combined class name string
 */
function css(...args: (string | false | null | undefined)[]): string;

/**
 * Global stylesheet management
 */
class Stylesheet {
  /** Get stylesheet instance */
  static getInstance(): Stylesheet;
  /** Insert rule */
  insertRule(rule: string, index?: number): void;
  /** Get rules */
  getRules(): string;
  /** Reset stylesheet */
  reset(): void;
}

interface IStyle {
  [key: string]: any;
}

interface IStyleSet<T> {
  [P in keyof T]: IStyle;
}

interface IProcessedStyleSet<T> {
  [P in keyof T]: string;
}

type IStyleFunctionOrObject<TStyleProps, TStyleSet> = 
  | TStyleSet 
  | ((props: TStyleProps) => TStyleSet);

import { 
  mergeStyles, 
  mergeStyleSets, 
  css,
  IStyle,
  useTheme 
} from "@fluentui/react";

function StyledComponent() {
  const theme = useTheme();

  // Single style merge
  const buttonClass = mergeStyles({
    backgroundColor: theme.palette.themePrimary,
    color: theme.palette.white,
    border: 'none',
    padding: '8px 16px',
    borderRadius: '2px',
    cursor: 'pointer',
    ':hover': {
      backgroundColor: theme.palette.themeDarkAlt,
    },
    ':active': {
      backgroundColor: theme.palette.themeDark,
    },
  });

  // Style set merge
  const classNames = mergeStyleSets({
    container: {
      padding: theme.spacing.l1,
      backgroundColor: theme.palette.neutralLighter,
    },
    header: {
      fontSize: theme.fonts.xLarge.fontSize,
      fontWeight: theme.fonts.xLarge.fontWeight,
      color: theme.palette.neutralPrimary,
      marginBottom: theme.spacing.m,
    },
    content: {
      fontSize: theme.fonts.medium.fontSize,
      lineHeight: '1.4',
    },
  });

  // Conditional class names
  const containerClass = css(
    classNames.container,
    theme.isInverted && 'inverted-theme',
    'custom-container'
  );

  return (
    <div className={containerClass}>
      <h1 className={classNames.header}>Styled Component</h1>
      <div className={classNames.content}>
        Content with merged styles
      </div>
      <button className={buttonClass}>
        Styled Button
      </button>
    </div>
  );
}

// Advanced style function
function createButtonStyles(props: { primary?: boolean; disabled?: boolean }) {
  const theme = useTheme();
  
  return mergeStyleSets({
    root: [
      {
        border: 'none',
        padding: '8px 16px',
        borderRadius: '2px',
        cursor: props.disabled ? 'default' : 'pointer',
        fontSize: theme.fonts.medium.fontSize,
        fontFamily: theme.fonts.medium.fontFamily,
      },
      props.primary && {
        backgroundColor: theme.palette.themePrimary,
        color: theme.palette.white,
        ':hover': !props.disabled && {
          backgroundColor: theme.palette.themeDarkAlt,
        },
      },
      !props.primary && {
        backgroundColor: theme.palette.neutralLighter,
        color: theme.palette.neutralPrimary,
        border: `1px solid ${theme.palette.neutralQuaternary}`,
        ':hover': !props.disabled && {
          backgroundColor: theme.palette.neutralLight,
        },
      },
      props.disabled && {
        opacity: 0.5,
        backgroundColor: theme.palette.neutralLighter,
        color: theme.palette.neutralTertiary,
      },
    ],
  });
}

/**
 * Default color palette
 */
const DefaultPalette: IPalette;

/**
 * Default font styles
 */
const DefaultFontStyles: IFontStyles;

/**
 * Default shadow and elevation effects
 */
const DefaultEffects: IEffects;

/**
 * Font size scale
 */
const FontSizes: {
  mini: string;
  xSmall: string;
  small: string;
  smallPlus: string;
  medium: string;
  mediumPlus: string;
  icon: string;
  large: string;
  xLarge: string;
  xLargePlus: string;
  xxLarge: string;
  xxLargePlus: string;
  superLarge: string;
  mega: string;
};

/**
 * Font weight scale
 */
const FontWeights: {
  light: number;
  semilight: number;
  regular: number;
  semibold: number;
  bold: number;
};

/**
 * Icon font sizes
 */
const IconFontSizes: {
  xSmall: string;
  small: string;
  medium: string;
  large: string;
};

/**
 * Z-index scale for layering
 */
const ZIndexes: {
  Nav: number;
  ScrollablePane: number;
  FocusStyle: number;
  Coachmark: number;
  Layer: number;
  KeytipLayer: number;
  Modal: number;
};

/**
 * Default spacing scale
 */
const DefaultSpacing: ISpacing;

interface ISpacing {
  s2: string;
  s1: string;
  m: string;
  l1: string;
  l2: string;
}

interface IEffects {
  elevation4: string;
  elevation8: string;
  elevation16: string;
  elevation64: string;
  roundedCorner2: string;
  roundedCorner4: string;
  roundedCorner6: string;
}

/**
 * Get media query selector for screen size
 * @param minWidth - Minimum width
 * @param maxWidth - Maximum width
 * @returns Media query string
 */
function getScreenSelector(minWidth: number, maxWidth?: number): string;

// Screen width breakpoints
const ScreenWidthMinSmall: number;
const ScreenWidthMinMedium: number;
const ScreenWidthMinLarge: number;
const ScreenWidthMinXLarge: number;
const ScreenWidthMinXXLarge: number;
const ScreenWidthMinXXXLarge: number;

const ScreenWidthMaxSmall: number;
const ScreenWidthMaxMedium: number;
const ScreenWidthMaxLarge: number;
const ScreenWidthMaxXLarge: number;
const ScreenWidthMaxXXLarge: number;

import {
  getScreenSelector,
  ScreenWidthMinMedium,
  ScreenWidthMinLarge,
  mergeStyles
} from "@fluentui/react";

const responsiveStyles = mergeStyles({
  padding: '8px',
  fontSize: '14px',
  
  // Medium screens and up
  [getScreenSelector(ScreenWidthMinMedium)]: {
    padding: '12px',
    fontSize: '16px',
  },
  
  // Large screens and up
  [getScreenSelector(ScreenWidthMinLarge)]: {
    padding: '16px',
    fontSize: '18px',
  },
});

/**
 * Animation CSS class names
 */
const AnimationClassNames: {
  slideRightIn10: string;
  slideRightIn20: string;
  slideRightIn40: string;
  slideRightIn400: string;
  slideLeftIn10: string;
  slideLeftIn20: string;
  slideLeftIn40: string;
  slideLeftIn400: string;
  slideUpIn10: string;
  slideUpIn20: string;
  slideDownIn10: string;
  slideDownIn20: string;
  slideRightOut10: string;
  slideRightOut20: string;
  slideRightOut40: string;
  slideRightOut400: string;
  slideLeftOut10: string;
  slideLeftOut20: string;
  slideLeftOut40: string;
  slideLeftOut400: string;
  slideUpOut10: string;
  slideUpOut20: string;
  slideDownOut10: string;
  slideDownOut20: string;
  scaleUpIn100: string;
  scaleDownIn100: string;
  scaleUpOut103: string;
  scaleDownOut98: string;
  fadeIn100: string;
  fadeIn200: string;
  fadeIn400: string;
  fadeIn500: string;
  fadeOut100: string;
  fadeOut200: string;
  fadeOut400: string;
  fadeOut500: string;
  rotate90deg: string;
  rotateN90deg: string;
};

/**
 * Animation style definitions
 */
const AnimationStyles: {
  slideRightIn10: IAnimationStyles;
  slideRightIn20: IAnimationStyles;
  slideRightIn40: IAnimationStyles;
  slideRightIn400: IAnimationStyles;
  slideLeftIn10: IAnimationStyles;
  slideLeftIn20: IAnimationStyles;
  slideLeftIn40: IAnimationStyles;
  slideLeftIn400: IAnimationStyles;
  slideUpIn10: IAnimationStyles;
  slideUpIn20: IAnimationStyles;
  slideDownIn10: IAnimationStyles;
  slideDownIn20: IAnimationStyles;
  slideRightOut10: IAnimationStyles;
  slideRightOut20: IAnimationStyles;
  slideRightOut40: IAnimationStyles;
  slideRightOut400: IAnimationStyles;
  slideLeftOut10: IAnimationStyles;
  slideLeftOut20: IAnimationStyles;
  slideLeftOut40: IAnimationStyles;
  slideLeftOut400: IAnimationStyles;
  slideUpOut10: IAnimationStyles;
  slideUpOut20: IAnimationStyles;
  slideDownOut10: IAnimationStyles;
  slideDownOut20: IAnimationStyles;
  scaleUpIn100: IAnimationStyles;
  scaleDownIn100: IAnimationStyles;
  scaleUpOut103: IAnimationStyles;
  scaleDownOut98: IAnimationStyles;
  fadeIn100: IAnimationStyles;
  fadeIn200: IAnimationStyles;
  fadeIn400: IAnimationStyles;
  fadeIn500: IAnimationStyles;
  fadeOut100: IAnimationStyles;
  fadeOut200: IAnimationStyles;
  fadeOut400: IAnimationStyles;
  fadeOut500: IAnimationStyles;
  rotate90deg: IAnimationStyles;
  rotateN90deg: IAnimationStyles;
};

/**
 * CSS keyframes utility
 * @param timeline - Keyframe timeline object
 * @returns Keyframes string
 */
function keyframes(timeline: { [key: string]: any }): string;

/**
 * High contrast media query selector
 */
const HighContrastSelector: string;

/**
 * High contrast selector for black themes
 */
const HighContrastSelectorBlack: string;

/**
 * High contrast selector for white themes
 */
const HighContrastSelectorWhite: string;

/**
 * Get focus outline styles
 * @param theme - Theme object
 * @param inset - Inset amount
 * @param position - Position style
 * @returns Focus outline styles
 */
function getFocusOutlineStyle(theme: ITheme, inset?: number, position?: 'relative' | 'absolute'): IStyle;

/**
 * Get input focus styles
 * @param theme - Theme object
 * @param borderRadius - Border radius
 * @param borderType - Border type
 * @param inset - Inset amount
 * @returns Input focus styles
 */
function getInputFocusStyle(
  theme: ITheme, 
  borderRadius?: number | string, 
  borderType?: 'border' | 'borderBottom', 
  inset?: number
): IStyle;

/**
 * Hidden content styles for screen readers
 */
const hiddenContentStyle: IStyle;

/**
 * Get high contrast no adjust style
 * @returns Style object for high contrast
 */
function getHighContrastNoAdjustStyle(): IStyle;

import {
  HighContrastSelector,
  getFocusOutlineStyle,
  getInputFocusStyle,
  hiddenContentStyle,
  AnimationClassNames,
  keyframes,
  mergeStyles,
  useTheme
} from "@fluentui/react";

function AccessibleComponent() {
  const theme = useTheme();

  const styles = mergeStyles({
    // Base styles
    padding: '12px',
    backgroundColor: theme.palette.neutralLighter,
    
    // High contrast support
    [HighContrastSelector]: {
      backgroundColor: 'ButtonFace',
      border: '1px solid ButtonText',
    },
    
    // Focus styles
    ':focus': getFocusOutlineStyle(theme),
    
    // Animation
    animationName: keyframes({
      '0%': { opacity: 0, transform: 'translateY(-10px)' },
      '100%': { opacity: 1, transform: 'translateY(0)' },
    }),
    animationDuration: '0.2s',
    animationTimingFunction: 'ease-out',
  });

  const inputStyles = mergeStyles({
    border: `1px solid ${theme.palette.neutralQuaternary}`,
    borderRadius: '2px',
    
    ':focus': getInputFocusStyle(theme, '2px'),
  });

  return (
    <div className={styles}>
      {/* Hidden content for screen readers */}
      <span style={hiddenContentStyle}>
        This content is only visible to screen readers
      </span>
      
      <input 
        className={inputStyles}
        placeholder="Accessible input"
        aria-label="Search field"
      />
      
      {/* Animated element */}
      <div className={AnimationClassNames.fadeIn200}>
        Animated content
      </div>
    </div>
  );
}

/**
 * Initialize default icon fonts
 * @param baseUrl - Base URL for icon fonts
 * @param options - Icon options
 */
function initializeIcons(baseUrl?: string, options?: IIconOptions): void;

/**
 * Register custom icons
 * @param iconSubset - Icon subset to register
 */
function registerIcons(iconSubset: IIconSubset, options?: IIconOptions): void;

/**
 * Unregister icons by name
 * @param iconNames - Array of icon names to unregister
 */
function unregisterIcons(iconNames: string[]): void;

/**
 * Get icon definition
 * @param name - Icon name
 * @returns Icon definition or undefined
 */
function getIcon(name?: string): IIconRecord | undefined;

/**
 * Get icon CSS class name
 * @param name - Icon name
 * @returns CSS class name
 */
function getIconClassName(name?: string): string;

/**
 * Set global icon options
 * @param options - Icon options
 */
function setIconOptions(options: IIconOptions): void;

interface IIconOptions {
  /** Base URL for icon fonts */
  baseUrl?: string;
  /** Class name for icons */
  className?: string;
  /** Disable warnings */
  disableWarnings?: boolean;
}

interface IIconSubset {
  /** Subset style */
  style?: any;
  /** Icon definitions */
  icons: { [iconName: string]: string | JSX.Element };
}