@uifabric/styling/etc/styling.api.md

Styling helpers for Fluent UI React.

## API Report File for "@uifabric/styling"

> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).

```ts

import { AnimationStyles } from '@fluentui/theme/lib/motion/AnimationStyles';
import { AnimationVariables } from '@fluentui/theme/lib/motion/AnimationStyles';
import { concatStyleSets } from '@uifabric/merge-styles';
import { concatStyleSetsWithProps } from '@uifabric/merge-styles';
import { createFontStyles } from '@fluentui/theme/lib/fonts/index';
import { createTheme } from '@fluentui/theme/lib/createTheme';
import { DefaultEffects } from '@fluentui/theme/lib/effects/DefaultEffects';
import { DefaultFontStyles } from '@fluentui/theme/lib/fonts/DefaultFontStyles';
import { DefaultPalette } from '@fluentui/theme/lib/colors/DefaultPalette';
import { fontFace } from '@uifabric/merge-styles';
import { FontSizes } from '@fluentui/theme/lib/fonts/index';
import { FontWeights } from '@fluentui/theme/lib/fonts/index';
import { IAnimationStyles } from '@fluentui/theme/lib/types/IAnimationStyles';
import { IAnimationVariables } from '@fluentui/theme/lib/types/IAnimationStyles';
import { IconFontSizes } from '@fluentui/theme/lib/fonts/index';
import { ICSPSettings } from '@uifabric/merge-styles';
import { ICustomizerContext } from '@uifabric/utilities';
import { IEffects } from '@fluentui/theme/lib/types/IEffects';
import { IFontFace } from '@uifabric/merge-styles';
import { IFontStyles } from '@fluentui/theme/lib/types/IFontStyles';
import { IFontWeight } from '@uifabric/merge-styles';
import { InjectionMode } from '@uifabric/merge-styles';
import { IPalette } from '@fluentui/theme/lib/types/IPalette';
import { IPartialTheme } from '@fluentui/theme/lib/types/ITheme';
import { IProcessedStyleSet } from '@uifabric/merge-styles';
import { IRawStyle } from '@uifabric/merge-styles';
import { IScheme } from '@fluentui/theme/lib/types/ITheme';
import { ISchemeNames } from '@fluentui/theme/lib/types/ITheme';
import { ISemanticColors } from '@fluentui/theme/lib/types/ISemanticColors';
import { ISemanticTextColors } from '@fluentui/theme/lib/types/ISemanticTextColors';
import { ISpacing } from '@fluentui/theme/lib/types/ISpacing';
import { IStyle } from '@uifabric/merge-styles';
import { IStyleSet } from '@uifabric/merge-styles';
import { IStyleSheetConfig } from '@uifabric/merge-styles';
import { ITheme } from '@fluentui/theme/lib/types/ITheme';
import { keyframes } from '@uifabric/merge-styles';
import { mergeStyles } from '@uifabric/merge-styles';
import { mergeStyleSets } from '@uifabric/merge-styles';
import { registerDefaultFontFaces } from '@fluentui/theme/lib/fonts/DefaultFontStyles';
import { Stylesheet } from '@uifabric/merge-styles';

// @public (undocumented)
export const AnimationClassNames: {
    [key in keyof IAnimationStyles]?: string;
};

export { AnimationStyles }

export { AnimationVariables }

// @public
export function buildClassMap<T extends Object>(styles: T): {
    [key in keyof T]?: string;
};

// Warning: (ae-forgotten-export) The symbol "IColorClassNames" needs to be exported by the entry point index.d.ts
//
// @public (undocumented)
export const ColorClassNames: IColorClassNames;

export { concatStyleSets }

export { concatStyleSetsWithProps }

export { createFontStyles }

export { createTheme }

export { DefaultEffects }

export { DefaultFontStyles }

export { DefaultPalette }

// @public @deprecated (undocumented)
export const EdgeChromiumHighContrastSelector = "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)";

// @public
export function focusClear(): IRawStyle;

// @public (undocumented)
export const FontClassNames: {
    [key in keyof IFontStyles]?: string;
};

export { fontFace }

export { FontSizes }

export { FontWeights }

// @public @deprecated
export function getEdgeChromiumNoHighContrastAdjustSelector(): {
    [EdgeChromiumHighContrastSelector]: IRawStyle;
};

// @public
export function getFadedOverflowStyle(theme: ITheme, color?: keyof ISemanticColors | keyof IPalette, direction?: 'horizontal' | 'vertical', width?: string | number, height?: string | number): IRawStyle;

// @public
export function getFocusOutlineStyle(theme: ITheme, inset?: number, width?: number, color?: string): IRawStyle;

// @public
export function getFocusStyle(theme: ITheme, options?: IGetFocusStylesOptions): IRawStyle;

// @public @deprecated
export function getFocusStyle(theme: ITheme, inset?: number, position?: 'relative' | 'absolute', highContrastStyle?: IRawStyle | undefined, borderColor?: string, outlineColor?: string, isFocusedOnly?: boolean): IRawStyle;

// @public
export function getGlobalClassNames<T>(classNames: GlobalClassNames<T>, theme: ITheme, disableGlobalClassNames?: boolean): GlobalClassNames<T>;

// @public
export function getHighContrastNoAdjustStyle(): IRawStyle;

// @public
export function getIcon(name?: string): IIconRecord | undefined;

// @public
export function getIconClassName(name: string): string;

// @public
export const getInputFocusStyle: (borderColor: string, borderRadius: string | number, borderType?: "border" | "borderBottom", borderPosition?: number) => IRawStyle;

// @public
export function getPlaceholderStyles(styles: IStyle): IStyle;

// @public (undocumented)
export function getScreenSelector(min: number | undefined, max: number | undefined): string;

// @public
export function getTheme(depComments?: boolean): ITheme;

// Warning: (ae-internal-missing-underscore) The name "getThemedContext" should be prefixed with an underscore because the declaration is marked as @internal
//
// @internal
export function getThemedContext(context: ICustomizerContext, scheme?: ISchemeNames, theme?: ITheme): ICustomizerContext;

// @public (undocumented)
export type GlobalClassNames<IStyles> = Record<keyof IStyles, string>;

// @public (undocumented)
export const hiddenContentStyle: IRawStyle;

// @public (undocumented)
export const HighContrastSelector = "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)";

// @public (undocumented)
export const HighContrastSelectorBlack = "@media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark)";

// @public (undocumented)
export const HighContrastSelectorWhite = "@media screen and (-ms-high-contrast: black-on-white), screen and (forced-colors: active) and (prefers-color-scheme: light)";

export { IAnimationStyles }

export { IAnimationVariables }

export { IconFontSizes }

export { ICSPSettings }

export { IEffects }

export { IFontFace }

export { IFontStyles }

export { IFontWeight }

// @public (undocumented)
export interface IGetFocusStylesOptions {
    borderColor?: string;
    highContrastStyle?: IRawStyle;
    inset?: number;
    isFocusedOnly?: boolean;
    outlineColor?: string;
    position?: 'relative' | 'absolute';
    width?: number;
}

// @public (undocumented)
export interface IIconOptions {
    disableWarnings: boolean;
    // @deprecated (undocumented)
    warnOnMissingIcons?: boolean;
}

// @public (undocumented)
export interface IIconRecord {
    // (undocumented)
    code: string | undefined;
    // (undocumented)
    subset: IIconSubsetRecord;
}

// @public (undocumented)
export interface IIconSubset {
    // (undocumented)
    fontFace?: IFontFace;
    // (undocumented)
    icons: {
        [key: string]: string | JSX.Element;
    };
    mergeImageProps?: boolean;
    // (undocumented)
    style?: IRawStyle;
}

// @public (undocumented)
export interface IIconSubsetRecord extends IIconSubset {
    // (undocumented)
    className?: string;
    // (undocumented)
    isRegistered?: boolean;
}

export { InjectionMode }

export { IPalette }

export { IPartialTheme }

export { IProcessedStyleSet }

export { IRawStyle }

export { IScheme }

export { ISchemeNames }

export { ISemanticColors }

export { ISemanticTextColors }

export { ISpacing }

export { IStyle }

export { IStyleSet }

export { IStyleSheetConfig }

export { ITheme }

export { keyframes }

// @public
export function loadTheme(theme: IPartialTheme, depComments?: boolean): ITheme;

export { mergeStyles }

export { mergeStyleSets }

// @public (undocumented)
export const normalize: IRawStyle;

// @public (undocumented)
export const noWrap: IRawStyle;

// @public (undocumented)
export const PulsingBeaconAnimationStyles: {
    continuousPulseAnimationDouble: typeof _continuousPulseAnimationDouble;
    continuousPulseAnimationSingle: typeof _continuousPulseAnimationSingle;
    createDefaultAnimation: typeof _createDefaultAnimation;
};

export { registerDefaultFontFaces }

// @public
export function registerIconAlias(iconName: string, mappedToName: string): void;

// @public
export function registerIcons(iconSubset: IIconSubset, options?: Partial<IIconOptions>): void;

// @public
export function registerOnThemeChangeCallback(callback: (theme: ITheme) => void): void;

// @public
export function removeOnThemeChangeCallback(callback: (theme: ITheme) => void): void;

// @public (undocumented)
export const ScreenWidthMaxLarge: number;

// @public (undocumented)
export const ScreenWidthMaxMedium: number;

// @public (undocumented)
export const ScreenWidthMaxSmall: number;

// @public (undocumented)
export const ScreenWidthMaxXLarge: number;

// @public (undocumented)
export const ScreenWidthMaxXXLarge: number;

// @public (undocumented)
export const ScreenWidthMinLarge = 640;

// @public (undocumented)
export const ScreenWidthMinMedium = 480;

// @public (undocumented)
export const ScreenWidthMinSmall = 320;

// @public (undocumented)
export const ScreenWidthMinUhfMobile = 768;

// @public (undocumented)
export const ScreenWidthMinXLarge = 1024;

// @public (undocumented)
export const ScreenWidthMinXXLarge = 1366;

// @public (undocumented)
export const ScreenWidthMinXXXLarge = 1920;

// @public
export function setIconOptions(options: Partial<IIconOptions>): void;

export { Stylesheet }

// @public (undocumented)
export const ThemeSettingName = "theme";

// @public
export function unregisterIcons(iconNames: string[]): void;

// @public (undocumented)
export namespace ZIndexes {
    const // (undocumented)
    Nav: number;
    const // @deprecated (undocumented)
    ScrollablePane: number;
    const // (undocumented)
    FocusStyle: number;
    const // (undocumented)
    Coachmark: number;
    const // (undocumented)
    Layer: number;
    const // (undocumented)
    KeytipLayer: number;
}


// Warnings were encountered during analysis:
//
// lib/styles/PulsingBeaconAnimationStyles.d.ts:6:5 - (ae-forgotten-export) The symbol "_continuousPulseAnimationDouble" needs to be exported by the entry point index.d.ts
// lib/styles/PulsingBeaconAnimationStyles.d.ts:7:5 - (ae-forgotten-export) The symbol "_continuousPulseAnimationSingle" needs to be exported by the entry point index.d.ts
// lib/styles/PulsingBeaconAnimationStyles.d.ts:8:5 - (ae-forgotten-export) The symbol "_createDefaultAnimation" needs to be exported by the entry point index.d.ts

// (No @packageDocumentation comment for this package)

```