import { concatStyleSets } from '@uifabric/merge-styles'; import { concatStyleSetsWithProps } from '@uifabric/merge-styles'; import { fontFace } from '@uifabric/merge-styles'; import { ICSPSettings } from '@uifabric/merge-styles'; import { ICustomizerContext } from '@uifabric/utilities'; import { IFontFace } from '@uifabric/merge-styles'; import { IFontWeight } from '@uifabric/merge-styles'; import { InjectionMode } from '@uifabric/merge-styles'; import { IProcessedStyleSet } from '@uifabric/merge-styles'; import { IRawStyle } from '@uifabric/merge-styles'; import { IStyle } from '@uifabric/merge-styles'; import { IStyleSet } from '@uifabric/merge-styles'; import { IStyleSheetConfig } from '@uifabric/merge-styles'; import { keyframes } from '@uifabric/merge-styles'; import { mergeStyles } from '@uifabric/merge-styles'; import { mergeStyleSets } from '@uifabric/merge-styles'; import { Stylesheet } from '@uifabric/merge-styles'; /** * {@docCategory AnimationClassNames} */ export declare const AnimationClassNames: { [key in keyof IAnimationStyles]?: string; }; /** * All Fabric standard animations, exposed as json objects referencing predefined * keyframes. These objects can be mixed in with other class definitions. */ export declare const AnimationStyles: IAnimationStyles; /** * Exporting raw duraction values and easing functions to be used in custom animations */ export declare const AnimationVariables: IAnimationVariables; /** * Builds a class names object from a given map. * * @param styles - Map of unprocessed styles. * @returns Map of property name to class name. */ export declare function buildClassMap(styles: T): { [key in keyof T]?: string; }; export declare const ColorClassNames: IColorClassNames; export { concatStyleSets } export { concatStyleSetsWithProps } declare function _continuousPulseAnimationDouble(beaconColorOne: string, beaconColorTwo: string, innerDimension: string, outerDimension: string, borderWidth: string): string; declare function _continuousPulseAnimationSingle(beaconColorOne: string, beaconColorTwo: string, innerDimension: string, outerDimension: string, borderWidth: string): string; declare function _createDefaultAnimation(animationName: string, delayLength?: string): IRawStyle; export declare function createFontStyles(localeCode: string | null): IFontStyles; /** * Creates a custom theme definition which can be used with the Customizer. * @param theme - Partial theme object. * @param depComments - Whether to include deprecated tags as comments for deprecated slots. */ export declare function createTheme(theme: IPartialTheme, depComments?: boolean): ITheme; export declare const DefaultEffects: IEffects; export declare const DefaultFontStyles: IFontStyles; export declare const DefaultPalette: IPalette; export declare const EdgeChromiumHighContrastSelector = "@media screen and (forced-colors: active)"; /** * Generates style to clear browser specific focus styles. */ export declare function focusClear(): IRawStyle; /** * {@docCategory FontClassNames} */ export declare const FontClassNames: { [key in keyof IFontStyles]?: string; }; export { fontFace } export declare namespace FontSizes { const mini: string; const xSmall: string; const small: string; const smallPlus: string; const medium: string; const mediumPlus: string; const icon: string; const large: string; const xLarge: string; const xLargePlus: string; const xxLarge: string; const xxLargePlus: string; const superLarge: string; const mega: string; } export declare namespace FontWeights { const light: IFontWeight; const semilight: IFontWeight; const regular: IFontWeight; const semibold: IFontWeight; const bold: IFontWeight; } /** * The style which turns off high contrast adjustment in (only) Edge Chromium browser. */ export declare function getEdgeChromiumNoHighContrastAdjustSelector(): { [EdgeChromiumHighContrastSelector]: IRawStyle; }; /** * - Generates a style used to fade out an overflowing content by defining a style for an :after pseudo element. * - Apply it to the :after selector for all combination of states the parent of content might have (normal, hover, * selected, focus). * - Requires the target to have position set to relative and overflow set to hidden. * * @example * ```tsx * // Assuming the following DOM structure and the different background colors coming from * // the parent holding the content. *
* Overflown Content *
* ``` * ```ts * // This is how the style set would look in Component.styles.ts * const { bodyBackground } = theme.semanticColors; * const { neutralLighter } = theme.palette; * * // The second argument of getFadedOverflowStyle function is a string representing a key of * // ISemanticColors or IPalette. * * const styles = { * parent: [ * backgroundColor: bodyBackground, * selectors: { * '&:hover: { * backgroundColor: neutralLighter * }, * '$content:after': { * ...getFadedOverflowStyle(theme, 'bodyBackground') * }, * '&:hover $content:after': { * ...getFadedOverflowStyle(theme, 'neutralLighter') * } * } * ], * content: [ * width: '100%', * display: 'inline-block', * position: 'relative', * overflow: 'hidden' * ] * } * ``` * @param theme - The theme object to use. * @param color - The background color to fade out to. Accepts only keys of ISemanticColors or IPalette. * Defaults to 'bodyBackground'. * @param direction - The direction of the overflow. Defaults to horizontal. * @param width - The width of the fading overflow. Vertical direction defaults it to 100% vs 20px when horizontal. * @param height - The Height of the fading overflow. Vertical direction defaults it to 50% vs 100% when horizontal. * @returns The style object. */ export declare function getFadedOverflowStyle(theme: ITheme, color?: keyof ISemanticColors | keyof IPalette, direction?: 'horizontal' | 'vertical', width?: string | number, height?: string | number): IRawStyle; /** * Generates a style which can be used to set a border on focus. * * @param theme - The theme object to use. * @param inset - The number of pixels to inset the border (default 0) * @param width - The border width in pixels (default 1) * @param color - Color of the outline (default `theme.palette.neutralSecondary`) * @returns The style object. */ export declare function getFocusOutlineStyle(theme: ITheme, inset?: number, width?: number, color?: string): IRawStyle; /** * Generates a focus style which can be used to define an :after focus border. * * @param theme - The theme object to use. * @param options - Options to customize the focus border. * @returns The style object. */ export declare function getFocusStyle(theme: ITheme, options?: IGetFocusStylesOptions): IRawStyle; /** * Generates a focus style which can be used to define an :after focus border. * * @param theme - The theme object to use. * @param inset - The number of pixels to inset the border. * @param position - The positioning applied to the container. Must * be 'relative' or 'absolute' so that the focus border can live around it. * @param highContrastStyle - Style for high contrast mode. * @param borderColor - Color of the border. * @param outlineColor - Color of the outline. * @param isFocusedOnly - If the styles should apply on focus or not. * @returns The style object. * @deprecated Use the object parameter version instead. */ export declare function getFocusStyle(theme: ITheme, inset?: number, position?: 'relative' | 'absolute', highContrastStyle?: IRawStyle | undefined, borderColor?: string, outlineColor?: string, isFocusedOnly?: boolean): IRawStyle; /** * Checks for the `disableGlobalClassNames` property on the `theme` to determine if it should return `classNames` * Note that calls to this function are memoized. * * @param classNames - The collection of global class names that apply when the flag is false. Make sure to pass in * the same instance on each call to benefit from memoization. * @param theme - The theme to check the flag on * @param disableGlobalClassNames - Optional. Explicitly opt in/out of disabling global classnames. Defaults to false. */ export declare function getGlobalClassNames(classNames: GlobalClassNames, theme: ITheme, disableGlobalClassNames?: boolean): GlobalClassNames; /** * Gets an icon definition. If an icon is requested but the subset has yet to be registered, * it will get registered immediately. * * @public * @param name - Name of icon. */ export declare function getIcon(name?: string): IIconRecord | undefined; /** * Gets an icon classname. You should be able to add this classname to an I tag with no * additional classnames, and render the icon. * * @public */ export declare function getIconClassName(name: string): string; /** * Generates text input border styles on focus. * * @param borderColor - Color of the border. * @param borderRadius - Radius of the border. * @param borderType - Type of the border. * @param borderPosition - Position of the border relative to the input element (default to -1 * as it's the most common border width of the input element) * @returns The style object. */ export declare const getInputFocusStyle: (borderColor: string, borderRadius: string | number, borderType?: "border" | "borderBottom", borderPosition?: number) => IRawStyle; /** * Generates placeholder style for each of the browsers supported by office-ui-fabric-react. * @param styles - The style to use. * @returns The placeholder style object for each browser depending on the placeholder directive it uses. */ export declare function getPlaceholderStyles(styles: IStyle): IStyle; export declare function getScreenSelector(min: number, max: number): string; /** * Gets the theme object * @param depComments - Whether to include deprecated tags as comments for deprecated slots. */ export declare function getTheme(depComments?: boolean): ITheme; /** * @internal * This function is still in experimental phase in support of Foundation experimental development. * Its API signature and existence are subject to change. * * Modify context to activate the specified scheme or theme. For schemes, look in context (if available) and fall back * to global Customizations. If both scheme and theme are specified, scheme will be looked up in theme. In this case, * scheme must be present in theme arg, otherwise new context will default to theme arg (there is no fallback to * settings to look up scheme.) * * @param context - Context in which to get schemed customizations. * @param scheme - Scheme to get customizations for from theme arg (if supplied) OR from context and global settings. * @param theme - Theme to merge into context. * @returns modified schemed context if scheme is valid and not already applied, unmodified context otherwise. */ export declare function getThemedContext(context: ICustomizerContext, scheme?: ISchemeNames, theme?: ITheme): ICustomizerContext; export declare type GlobalClassNames = Record; export declare const hiddenContentStyle: IRawStyle; export declare const HighContrastSelector = "@media screen and (-ms-high-contrast: active)"; export declare const HighContrastSelectorBlack = "@media screen and (-ms-high-contrast: white-on-black)"; export declare const HighContrastSelectorWhite = "@media screen and (-ms-high-contrast: black-on-white)"; /** * All Fabric standard animations, exposed as json objects referencing predefined * keyframes. These objects can be mixed in with other class definitions. * {@docCategory IAnimationStyles} */ export declare interface IAnimationStyles { slideRightIn10: IRawStyle; slideRightIn20: IRawStyle; slideRightIn40: IRawStyle; slideRightIn400: IRawStyle; slideLeftIn10: IRawStyle; slideLeftIn20: IRawStyle; slideLeftIn40: IRawStyle; slideLeftIn400: IRawStyle; slideUpIn10: IRawStyle; slideUpIn20: IRawStyle; slideDownIn10: IRawStyle; slideDownIn20: IRawStyle; slideRightOut10: IRawStyle; slideRightOut20: IRawStyle; slideRightOut40: IRawStyle; slideRightOut400: IRawStyle; slideLeftOut10: IRawStyle; slideLeftOut20: IRawStyle; slideLeftOut40: IRawStyle; slideLeftOut400: IRawStyle; slideUpOut10: IRawStyle; slideUpOut20: IRawStyle; slideDownOut10: IRawStyle; slideDownOut20: IRawStyle; scaleUpIn100: IRawStyle; scaleDownIn100: IRawStyle; scaleUpOut103: IRawStyle; scaleDownOut98: IRawStyle; fadeIn100: IRawStyle; fadeIn200: IRawStyle; fadeIn400: IRawStyle; fadeIn500: IRawStyle; fadeOut100: IRawStyle; fadeOut200: IRawStyle; fadeOut400: IRawStyle; fadeOut500: IRawStyle; rotate90deg: IRawStyle; rotateN90deg: IRawStyle; } export declare interface IAnimationVariables { easeFunction1: string; easeFunction2: string; durationValue1: string; durationValue2: string; durationValue3: string; durationValue4: string; } /** * {@docCategory IColorClassNames} */ declare interface IColorClassNames { themeDarker: string; themeDarkerHover: string; themeDarkerBackground: string; themeDarkerBackgroundHover: string; themeDarkerBorder: string; themeDarkerBorderHover: string; themeDark: string; themeDarkHover: string; themeDarkBackground: string; themeDarkBackgroundHover: string; themeDarkBorder: string; themeDarkBorderHover: string; themeDarkAlt: string; themeDarkAltHover: string; themeDarkAltBackground: string; themeDarkAltBackgroundHover: string; themeDarkAltBorder: string; themeDarkAltBorderHover: string; themePrimary: string; themePrimaryHover: string; themePrimaryBackground: string; themePrimaryBackgroundHover: string; themePrimaryBorder: string; themePrimaryBorderHover: string; themeSecondary: string; themeSecondaryHover: string; themeSecondaryBackground: string; themeSecondaryBackgroundHover: string; themeSecondaryBorder: string; themeSecondaryBorderHover: string; themeTertiary: string; themeTertiaryHover: string; themeTertiaryBackground: string; themeTertiaryBackgroundHover: string; themeTertiaryBorder: string; themeTertiaryBorderHover: string; themeLight: string; themeLightHover: string; themeLightBackground: string; themeLightBackgroundHover: string; themeLightBorder: string; themeLightBorderHover: string; themeLighter: string; themeLighterHover: string; themeLighterBackground: string; themeLighterBackgroundHover: string; themeLighterBorder: string; themeLighterBorderHover: string; themeLighterAlt: string; themeLighterAltHover: string; themeLighterAltBackground: string; themeLighterAltBackgroundHover: string; themeLighterAltBorder: string; themeLighterAltBorderHover: string; black: string; blackHover: string; blackBackground: string; blackBackgroundHover: string; blackBorder: string; blackBorderHover: string; blackTranslucent40: string; blackTranslucent40Hover: string; blackTranslucent40Background: string; blackTranslucent40BackgroundHover: string; blackTranslucent40Border: string; blackTranslucent40BorderHover: string; neutralDark: string; neutralDarkHover: string; neutralDarkBackground: string; neutralDarkBackgroundHover: string; neutralDarkBorder: string; neutralDarkBorderHover: string; neutralPrimary: string; neutralPrimaryHover: string; neutralPrimaryBackground: string; neutralPrimaryBackgroundHover: string; neutralPrimaryBorder: string; neutralPrimaryBorderHover: string; neutralPrimaryAlt: string; neutralPrimaryAltHover: string; neutralPrimaryAltBackground: string; neutralPrimaryAltBackgroundHover: string; neutralPrimaryAltBorder: string; neutralPrimaryAltBorderHover: string; neutralSecondary: string; neutralSecondaryHover: string; neutralSecondaryBackground: string; neutralSecondaryBackgroundHover: string; neutralSecondaryBorder: string; neutralSecondaryBorderHover: string; neutralSecondaryAlt: string; neutralSecondaryAltHover: string; neutralSecondaryAltBackground: string; neutralSecondaryAltBackgroundHover: string; neutralSecondaryAltBorder: string; neutralSecondaryAltBorderHover: string; neutralTertiary: string; neutralTertiaryHover: string; neutralTertiaryBackground: string; neutralTertiaryBackgroundHover: string; neutralTertiaryBorder: string; neutralTertiaryBorderHover: string; neutralTertiaryAlt: string; neutralTertiaryAltHover: string; neutralTertiaryAltBackground: string; neutralTertiaryAltBackgroundHover: string; neutralTertiaryAltBorder: string; neutralTertiaryAltBorderHover: string; neutralQuaternary: string; neutralQuaternaryHover: string; neutralQuaternaryBackground: string; neutralQuaternaryBackgroundHover: string; neutralQuaternaryBorder: string; neutralQuaternaryBorderHover: string; neutralQuaternaryAlt: string; neutralQuaternaryAltHover: string; neutralQuaternaryAltBackground: string; neutralQuaternaryAltBackgroundHover: string; neutralQuaternaryAltBorder: string; neutralQuaternaryAltBorderHover: string; neutralLight: string; neutralLightHover: string; neutralLightBackground: string; neutralLightBackgroundHover: string; neutralLightBorder: string; neutralLightBorderHover: string; neutralLighter: string; neutralLighterHover: string; neutralLighterBackground: string; neutralLighterBackgroundHover: string; neutralLighterBorder: string; neutralLighterBorderHover: string; neutralLighterAlt: string; neutralLighterAltHover: string; neutralLighterAltBackground: string; neutralLighterAltBackgroundHover: string; neutralLighterAltBorder: string; neutralLighterAltBorderHover: string; white: string; whiteHover: string; whiteBackground: string; whiteBackgroundHover: string; whiteBorder: string; whiteBorderHover: string; whiteTranslucent40: string; whiteTranslucent40Hover: string; whiteTranslucent40Background: string; whiteTranslucent40BackgroundHover: string; whiteTranslucent40Border: string; whiteTranslucent40BorderHover: string; yellow: string; yellowHover: string; yellowBackground: string; yellowBackgroundHover: string; yellowBorder: string; yellowBorderHover: string; yellowLight: string; yellowLightHover: string; yellowLightBackground: string; yellowLightBackgroundHover: string; yellowLightBorder: string; yellowLightBorderHover: string; orange: string; orangeHover: string; orangeBackground: string; orangeBackgroundHover: string; orangeBorder: string; orangeBorderHover: string; orangeLight: string; orangeLightHover: string; orangeLightBackground: string; orangeLightBackgroundHover: string; orangeLightBorder: string; orangeLightBorderHover: string; orangeLighter: string; orangeLighterHover: string; orangeLighterBackground: string; orangeLighterBackgroundHover: string; orangeLighterBorder: string; orangeLighterBorderHover: string; redDark: string; redDarkHover: string; redDarkBackground: string; redDarkBackgroundHover: string; redDarkBorder: string; redDarkBorderHover: string; red: string; redHover: string; redBackground: string; redBackgroundHover: string; redBorder: string; redBorderHover: string; magentaDark: string; magentaDarkHover: string; magentaDarkBackground: string; magentaDarkBackgroundHover: string; magentaDarkBorder: string; magentaDarkBorderHover: string; magenta: string; magentaHover: string; magentaBackground: string; magentaBackgroundHover: string; magentaBorder: string; magentaBorderHover: string; magentaLight: string; magentaLightHover: string; magentaLightBackground: string; magentaLightBackgroundHover: string; magentaLightBorder: string; magentaLightBorderHover: string; purpleDark: string; purpleDarkHover: string; purpleDarkBackground: string; purpleDarkBackgroundHover: string; purpleDarkBorder: string; purpleDarkBorderHover: string; purple: string; purpleHover: string; purpleBackground: string; purpleBackgroundHover: string; purpleBorder: string; purpleBorderHover: string; purpleLight: string; purpleLightHover: string; purpleLightBackground: string; purpleLightBackgroundHover: string; purpleLightBorder: string; purpleLightBorderHover: string; blueDark: string; blueDarkHover: string; blueDarkBackground: string; blueDarkBackgroundHover: string; blueDarkBorder: string; blueDarkBorderHover: string; blueMid: string; blueMidHover: string; blueMidBackground: string; blueMidBackgroundHover: string; blueMidBorder: string; blueMidBorderHover: string; blue: string; blueHover: string; blueBackground: string; blueBackgroundHover: string; blueBorder: string; blueBorderHover: string; blueLight: string; blueLightHover: string; blueLightBackground: string; blueLightBackgroundHover: string; blueLightBorder: string; blueLightBorderHover: string; tealDark: string; tealDarkHover: string; tealDarkBackground: string; tealDarkBackgroundHover: string; tealDarkBorder: string; tealDarkBorderHover: string; teal: string; tealHover: string; tealBackground: string; tealBackgroundHover: string; tealBorder: string; tealBorderHover: string; tealLight: string; tealLightHover: string; tealLightBackground: string; tealLightBackgroundHover: string; tealLightBorder: string; tealLightBorderHover: string; greenDark: string; greenDarkHover: string; greenDarkBackground: string; greenDarkBackgroundHover: string; greenDarkBorder: string; greenDarkBorderHover: string; green: string; greenHover: string; greenBackground: string; greenBackgroundHover: string; greenBorder: string; greenBorderHover: string; greenLight: string; greenLightHover: string; greenLightBackground: string; greenLightBackgroundHover: string; greenLightBorder: string; greenLightBorderHover: string; } export declare namespace IconFontSizes { const xSmall: string; const small: string; const medium: string; const large: string; } export { ICSPSettings } /** * Decorative styles in a theme * {@docCategory IEffects} */ export declare interface IEffects { /** * Used to provide a visual affordance that this element is elevated above the surface it rests on. * This is lower than elevations with a higher value, and higher than elevations with a lower value. * The shadow's color should not change with the theme, because colored shadows look unnatural. * Used for: cards, grid items */ elevation4: string; /** * Used to provide a visual affordance that this element is elevated above the surface it rests on. * This is lower than elevations with a higher value, and higher than elevations with a lower value. * The shadow's color should not change with the theme, because colored shadows look unnatural. * Used for: menus, command surfaces */ elevation8: string; /** * Used to provide a visual affordance that this element is elevated above the surface it rests on. * This is lower than elevations with a higher value, and higher than elevations with a lower value. * The shadow's color should not change with the theme, because colored shadows look unnatural. * Used for: search result dropdowns, hover cards, tooltips, help bubbles */ elevation16: string; /** * Used to provide a visual affordance that this element is elevated above the surface it rests on. * This is lower than elevations with a higher value, and higher than elevations with a lower value. * The shadow's color should not change with the theme, because colored shadows look unnatural. * Used for: Panels, Dialogs */ elevation64: string; /** * Rounded corner value, for use with border-radius. Smaller values indicate less rounding. * Smaller elements should get less rounding than larger elements. * Used for: buttons */ roundedCorner2: string; /** * Rounded corner value, for use with border-radius. Smaller values indicate less rounding. * Smaller elements should get less rounding than larger elements. * Used for: cards */ roundedCorner4: string; /** * Rounded corner value, for use with border-radius. Smaller values indicate less rounding. * Smaller elements should get less rounding than larger elements. * Used for: surfaces */ roundedCorner6: string; } export { IFontFace } /** * Fluent UI font set. * {@docCategory IFontStyles} */ export declare interface IFontStyles { tiny: IRawStyle; xSmall: IRawStyle; small: IRawStyle; smallPlus: IRawStyle; medium: IRawStyle; mediumPlus: IRawStyle; large: IRawStyle; xLarge: IRawStyle; /** * @deprecated Exists for forward compatibility with Fabric 7's Fluent theme. * Not recommended for use with Fabric 6. */ xLargePlus: IRawStyle; xxLarge: IRawStyle; /** * @deprecated Exists for forward compatibility with Fabric 7's Fluent theme * Not recommended for use with Fabric 6. */ xxLargePlus: IRawStyle; superLarge: IRawStyle; mega: IRawStyle; } export { IFontWeight } export declare interface IGetFocusStylesOptions { /** * The number of pixels to inset the border. * @defaultvalue 0 */ inset?: number; /** * The width of the border in pixels. * @defaultvalue 1 */ width?: number; /** * The positioning applied to the container. * Must be 'relative' or 'absolute' so that the focus border can live around it. * @defaultvalue 'relative' */ position?: 'relative' | 'absolute'; /** * Style for high contrast mode. */ highContrastStyle?: IRawStyle; /** * Color of the border. * @defaultvalue theme.palette.white */ borderColor?: string; /** * Color of the outline. * @defaultvalue theme.palette.neutralSecondary */ outlineColor?: string; /** * If the styles should apply on `:focus` pseudo element. * @defaultvalue true */ isFocusedOnly?: boolean; } export declare interface IIconOptions { /** * By default, registering the same set of icons will generate a console warning per duplicate icon * registered, because this scenario can create unexpected consequences. * * Some scenarios include: * * Icon set was previously registered using a different base url. * Icon set was previously registered but a different version was provided. * Icons in a previous registered set overlap with a new set. * * To simply ignore previously registered icons, you can specify to disable warnings. This means * that if an icon which was previous registered is registered again, it will be silently ignored. * However, consider whether the problems listed above will cause issues. **/ disableWarnings: boolean; /** * @deprecated * Use 'disableWarnings' instead. */ warnOnMissingIcons?: boolean; } export declare interface IIconRecord { code: string | undefined; subset: IIconSubsetRecord; } export declare interface IIconSubset { fontFace?: IFontFace; icons: { [key: string]: string | JSX.Element; }; style?: IRawStyle; } export declare interface IIconSubsetRecord extends IIconSubset { isRegistered?: boolean; className?: string; } export { InjectionMode } /** * Fluent UI color palette. * {@docCategory IPalette} */ export declare interface IPalette { /** * Color code for themeDarker. */ themeDarker: string; /** * Color code for themeDark. */ themeDark: string; /** * Color code for themeDarkAlt. */ themeDarkAlt: string; /** * Color code for themePrimary. */ themePrimary: string; /** * Color code for themeSecondary. */ themeSecondary: string; /** * Color code for themeTertiary. */ themeTertiary: string; /** * Color code for themeLight. */ themeLight: string; /** * Color code for themeLighter. */ themeLighter: string; /** * Color code for themeLighterAlt. */ themeLighterAlt: string; /** * Color code for the strongest color, which is black in the default theme. * This is a very light color in inverted themes. */ black: string; /** * Color code for blackTranslucent40. */ blackTranslucent40: string; /** * Color code for neutralDark. */ neutralDark: string; /** * Color code for neutralPrimary. */ neutralPrimary: string; /** * Color code for neutralPrimaryAlt. */ neutralPrimaryAlt: string; /** * Color code for neutralSecondary. */ neutralSecondary: string; /** * Color code for neutralSecondaryAlt. */ neutralSecondaryAlt: string; /** * Color code for neutralTertiary. */ neutralTertiary: string; /** * Color code for neutralTertiaryAlt. */ neutralTertiaryAlt: string; /** * Color code for neutralQuaternary. */ neutralQuaternary: string; /** * Color code for neutralQuaternaryAlt. */ neutralQuaternaryAlt: string; /** * Color code for neutralLight. */ neutralLight: string; /** * Color code for neutralLighter. */ neutralLighter: string; /** * Color code for neutralLighterAlt. */ neutralLighterAlt: string; /** * Color code for the accent. */ accent: string; /** * Color code for the softest color, which is white in the default theme. This is a very dark color in dark themes. * This is the page background. */ white: string; /** * Color code for whiteTranslucent40 */ whiteTranslucent40: string; /** * Color code for yellowDark. */ yellowDark: string; /** * Color code for yellow. */ yellow: string; /** * Color code for yellowLight. */ yellowLight: string; /** * Color code for orange. */ orange: string; /** * Color code for orangeLight. */ orangeLight: string; /** * Color code for orangeLighter. */ orangeLighter: string; /** * Color code for redDark. */ redDark: string; /** * Color code for red. */ red: string; /** * Color code for magentaDark. */ magentaDark: string; /** * Color code for magenta. */ magenta: string; /** * Color code for magentaLight. */ magentaLight: string; /** * Color code for purpleDark. */ purpleDark: string; /** * Color code for purple. */ purple: string; /** * Color code for purpleLight. */ purpleLight: string; /** * Color code for blueDark. */ blueDark: string; /** * Color code for blueMid. */ blueMid: string; /** * Color code for blue. */ blue: string; /** * Color code for blueLight. */ blueLight: string; /** * Color code for tealDark. */ tealDark: string; /** * Color code for teal. */ teal: string; /** * Color code for tealLight. */ tealLight: string; /** * Color code for greenDark. */ greenDark: string; /** * Color code for green. */ green: string; /** * Color code for greenLight. */ greenLight: string; } /** * {@docCategory ITheme} */ export declare type IPartialTheme = { palette?: Partial; fonts?: Partial; /** * Use this property to specify font property defaults. */ defaultFontStyle?: IRawStyle; semanticColors?: Partial; isInverted?: boolean; disableGlobalClassNames?: boolean; rtl?: boolean; spacing?: Partial; effects?: Partial; schemes?: { [P in ISchemeNames]?: IScheme; }; }; export { IProcessedStyleSet } export { IRawStyle } /** * {@docCategory IScheme} */ export declare interface IScheme { rtl?: boolean; palette: IPalette; fonts: IFontStyles; semanticColors: ISemanticColors; isInverted: boolean; /** * This setting is for a very narrow use case and you probably don't need to worry about, * unless you share a environment with others that also use fabric. * It is used for disabling global styles on fabric components. This will prevent global * overrides that might have been set by other fabric users from applying to your components. * When you set this setting to `true` on your theme the components in the subtree of your * Customizer will not get the global styles applied to them. */ disableGlobalClassNames: boolean; /** * @internal * The spacing property is still in an experimental phase. The intent is to have it * be used for padding and margin sizes in a future release, but it is still undergoing review. * Avoid using it until it is finalized. */ spacing: ISpacing; effects: IEffects; } /** * @internal * Predefined scheme identifiers. * Schemes are is still in an experimental phase. * This interface's naming and values are not finalized and are subject to change. * {@docCategory IScheme} */ export declare type ISchemeNames = 'default' | 'neutral' | 'soft' | 'strong'; /** * The collection of all semantic slots for colors used in themes. * * Note: text colors are defined in ISemanticTextColors.ts. * We plan to move completely to semantic slots and replace all usage of Fabric palette slots. * We've been actively making some of these changes but still have a ways to go. At present, * we're only adding slots if absolutely necessary because we are trying to avoid bloating * the already sizeable offering. We're also working on a better solution for design tokens * overall in our next iteration. We'll provide an update on this site when that's ready. * Thank you for your patience. * * #### Naming Convention * * The name of a semantic slot can quickly tell you how it’s meant to be used. It generally follows this format: * * `[category name][element name][Checked][Hovered/Pressed/Disabled state]` * * * `[category name]` – The “family” that this slot belongs to. * * `[element name]` – The name of the thing being targeted, such as the background or border. * * `[Checked]` – Whether the thing is checked. We assume things are unchecked by default, so no need to specify the * unchecked state. (“Checked” refers to anything that is on, selected, toggled, highlighted, emphasized, etc.) * * `[Hovered/Pressed/Disabled state]` – One of these states, if applicable. Each of these states are mutually * exclusive. Pressed styles overwrite hovered styles, and disabled elements cannot be hovered or pressed. * * #### Base Slots * * A basic set of slots that provide many default body styles, such as text, subtext, disabled colors, and so on. * If a category doesn't provide the slot you're looking for, use one from this category. * For example, the placeholder text on a text input field has no corresponding slot in its category, * so you'd use the bodySubtextColor from this category. * * #### Invariants * * When color has meaning, we do not want to change the color much theme to theme. For example, we * will always want errors to be some shade of red, but we will need to tweak the exact shade so it's * legible depending on whether it's an inverted theme or not. * Invariant colors should almost never be changed by the theme, the defaults should suffice. * * #### Input Controls * * This category contains input components commonly used to denote state, including radio buttons, * check boxes, toggle switches, sliders, progress bars, and more. * * #### Buttons * * Buttons! And all the flavors thereof. * * #### Menus * * Any kind of popup menus uses this category. * * #### Lists * * Lists differ from menus in that they are designed to show infinite amounts of items, often scroll, * and have a large and complex interaction surface. * This category covers all kinds of lists, whether they're typical one-item-per-row lists (like DetailsList) * or ones with a tiled layout. * * {@docCategory ISemanticColors} */ export declare interface ISemanticColors extends ISemanticTextColors { /** * The default color for backgrounds. */ bodyBackground: string; /** * The default hover color for the backgrounds of interactable elements that don't have their own backgrounds. * e.g. if links had hover backgrounds, they'd use this */ bodyBackgroundHovered: string; /** * The default background color of selected interactable elements that don't have their own backgrounds. * e.g. indicates in the nav which page you're currently on */ bodyBackgroundChecked: string; /** * The standout color for highlighted content backgrounds. * For highlighted content when there is no emphasis, use the neutral variant instead. * This should be a shade darker than bodyBackground in light themes, and a shade lighter in inverted themes. */ bodyStandoutBackground: string; /** * The color for chrome adjacent to an area with bodyBackground. * This can be used to provide visual separation of zones when using stronger colors, when using a divider line * is not desired. * In most themes, this should match the color of bodyBackground. * See also: bodyFrameDivider */ bodyFrameBackground: string; /** * Used as the border between a zone with bodyFrameBackground and a zone with bodyBackground. * If bodyBackground and bodyFrameBackground are different, this should be the same color as bodyFrameBackground * in order to visually disappear. * See also: bodyFrameBackground */ bodyFrameDivider: string; /** * Divider lines; e.g. lines that separate sections in a menu, an
element. */ bodyDivider: string; /** * The default color for backgrounds of disabled controls; e.g. disabled text field. */ disabledBackground: string; /** * The default color for border of disabled controls; e.g. disabled slider, disabled toggle border. */ disabledBorder: string; /** * The color of the outline around focused controls that don't already have a border; e.g. menu items */ focusBorder: string; /** * The background color of a card (or other surface) on a standout background. * Cards usually have shadows, but the variantBorder slots can be used for a solid border. * e.g. cards on a carousel of highlighted articles */ cardStandoutBackground: string; /** * The default box-shadow for a card. In inverted themes, by default, this is set to `none` since shadows do not work * well on dark backgrounds. If the card could be the same color as the background, it is recommended that * `variantBorder` is used instead, so the card doesn't disappear in inverted themes. * For use with `box-shadow`. */ cardShadow: string; /** * The default box-shadow when hovering on a card. Generally, this is a deeper shadow than `cardShadow`, to give * the effect that the card is lifting off the page. * In inverted themes, this should be set to a box-shadow that looks like a solid border, because shadows are not * visible on dark themes. * For use with `box-shadow`. */ cardShadowHovered: string; /** * The color of the border that provides contrast between an element, such as a card, and a standout background. */ variantBorder: string; /** * Hover color of border that provides contrast between an element, such as a card, and a standout background. */ variantBorderHovered: string; /** * Background color for default/empty state graphical elements; eg default icons, empty section that * needs user to fill in content, placeholder graphics, empty seats, etc. */ defaultStateBackground: string; /** * Background for informational messages. */ infoBackground: string; /** * The background for errors, if necessary, or highlighting the section of the page where the error is present. */ errorBackground: string; /** * Background for blocking issues, which is more severe than a warning, but not as bad as an error. */ blockingBackground: string; /** * Background for warning messages. */ warningBackground: string; /** * Background for severe warning messages. */ severeWarningBackground: string; /** * Background for success */ successBackground: string; /** * Color for icons on infoBackground. */ infoIcon: string; /** * Color for icons on errorBackground. */ errorIcon: string; /** * Color for icons on blockingBackground. */ blockingIcon: string; /** * Color for icons on warningBackground. */ warningIcon: string; /** * Color for icons on severeWarningBackground. */ severeWarningIcon: string; /** * Color for icons on successBackground. */ successIcon: string; /** * Color of links within a message. */ messageLink: string; /** * Color of links within a message when hovered. */ messageLinkHovered: string; /** * The border of a large input control in its resting, state; e.g. the box of dropdown. */ inputBorder: string; /** * The border of a small input control in its resting unchecked state; e.g. the box of an unchecked checkbox. */ smallInputBorder: string; /** * The border color of a large hovered input control, such as textbox. */ inputBorderHovered: string; /** * The background color of an input, e.g. textbox background. */ inputBackground: string; /** * The background of a checked control; e.g. checked radio button's dot, checked toggle's background. */ inputBackgroundChecked: string; /** * The background of a checked and hovered control; e.g. checked checkbox's background color on hover. */ inputBackgroundCheckedHovered: string; /** * The placeholder background color of a checked control, e.g. slider background, spinner background. */ inputPlaceholderBackgroundChecked: string; /** * The foreground of a checked control; e.g. checked checkbox's checkmark color, checked toggle's thumb color, * radio button's background color around the dot. */ inputForegroundChecked: string; /** * The alternate focus border color for elements that already have a border; e.g. text field borders on focus. */ inputFocusBorderAlt: string; /** * The color for disabled icon ; e.g. SearchBox magnifying glass in disabled state. */ inputIconDisabled: string; /** * The color for icon ; e.g. SearchBox magnifying glass in rest state. */ inputIcon: string; /** * The color for hovered icon ; e.g. SearchBox magnifying glass in hovered state. */ inputIconHovered: string; /** * Background of a standard button */ buttonBackground: string; /** * Background of a checked standard button; e.g. bold/italicize/underline text button in toolbar */ buttonBackgroundChecked: string; /** * Background of a hovered standard button */ buttonBackgroundHovered: string; /** * Background of a checked and hovered standard button; e.g. bold/italicize/underline text button in toolbar */ buttonBackgroundCheckedHovered: string; /** * Background of a disabled standard button */ buttonBackgroundDisabled: string; /** * Background of a pressed standard button; i.e. currently being clicked by mouse */ buttonBackgroundPressed: string; /** * Border of a standard button */ buttonBorder: string; /** * Border of a disabled standard button */ buttonBorderDisabled: string; /** * Background of a primary button */ primaryButtonBackground: string; /** * Background of a hovered primary button */ primaryButtonBackgroundHovered: string; /** * Background of a pressed primary button; i.e. currently being clicked by mouse */ primaryButtonBackgroundPressed: string; /** * Background of a disabled primary button */ primaryButtonBackgroundDisabled: string; /** * Border of a primary button */ primaryButtonBorder: string; /** * Background of an accent button (kicker) */ accentButtonBackground: string; /** * The background of a menu. */ menuBackground: string; /** * The divider between menu items. */ menuDivider: string; /** * The default colors of icons in menus. */ menuIcon: string; /** * The headers in menus that denote title of a section. */ menuHeader: string; /** * The background of a hovered menu item. */ menuItemBackgroundHovered: string; /** * The background of a pressed menu item. */ menuItemBackgroundPressed: string; /** * The text color of a menu item. */ menuItemText: string; /** * The text color of a hovered menu item. */ menuItemTextHovered: string; /** * The background color for the entire list. */ listBackground: string; /** * The default text color for list item titles and text in column fields. */ listText: string; /** * The background color of a hovered list item. */ listItemBackgroundHovered: string; /** * The background color of a checked list item. */ listItemBackgroundChecked: string; /** * The background color of a checked and hovered list item. */ listItemBackgroundCheckedHovered: string; /** * The background color for a hovered list header. */ listHeaderBackgroundHovered: string; /** * The background color for a pressed list header. */ listHeaderBackgroundPressed: string; /** * @deprecated * (Checked menu items no longer get a background color.) * The background of checked menu item; e.g. a menu item whose submenu is open, a selected dropdown item. */ menuItemBackgroundChecked: string; /** * @deprecated * (no longer used) * Foreground color for warning highlights */ warningHighlight: string; } /** * {@docCategory ISemanticTextColors} */ export declare interface ISemanticTextColors { /** * The default color for text. */ bodyText: string; /** * Checked text color, e.g. selected menu item text. */ bodyTextChecked: string; /** * De-emphasized text; e.g. metadata, captions, placeholder text. */ bodySubtext: string; /** * Neutral colored links and links for action buttons. */ actionLink: string; /** * Hover state for neutral colored links and links for action buttons. */ actionLinkHovered: string; /** * The color of a link. */ link: string; /** * The color of a hovered link. Also used when the link is active. */ linkHovered: string; /** * The default color for disabled text on top of disabledBackground; e.g. text in a disabled text field or * disabled button text. */ disabledText: string; /** * The default color for disabled text on the default background (bodyBackground). */ disabledBodyText: string; /** * Disabled de-emphasized text, for use on disabledBackground. */ disabledSubtext: string; /** * Disabled de-emphasized text, for use on the default background (bodyBackground). */ disabledBodySubtext: string; /** * The default color of error text on bodyBackground. */ errorText: string; /** * The default color of text in a message bar. */ messageText: string; /** * The color of input text. */ inputText: string; /** * The color of input text on hover. */ inputTextHovered: string; /** * The color of placeholder text. */ inputPlaceholderText: string; /** * Color of text in a standard button */ buttonText: string; /** * Color of text in a hovered standard button */ buttonTextHovered: string; /** * Color of text in a checked standard button */ buttonTextChecked: string; /** * Color of text in a checked and hovered standard button */ buttonTextCheckedHovered: string; /** * Color of text in a pressed standard button; i.e. currently being clicked by mouse */ buttonTextPressed: string; /** * Color of text in a disabled standard button */ buttonTextDisabled: string; /** * Color of text in a primary button */ primaryButtonText: string; /** * Color of text in a hovered primary button */ primaryButtonTextHovered: string; /** * Color of text in a pressed primary button; i.e. currently being clicked by mouse */ primaryButtonTextPressed: string; /** * Color of text in a disabled primary button */ primaryButtonTextDisabled: string; /** * Color of text for accent button (kicker) */ accentButtonText: string; /** * The default text color for list item titles and text in column fields. */ listText: string; /** @deprecated * This slot was incorrectly named. Use listText instead. */ listTextColor: string; /** @deprecated * No longer used. Consider using messageText and/or warningIcon instead. */ warningText: string; /** @deprecated * No longer used. Consider using messageText and/or successIcon instead. */ successText: string; } /** * @internal This is an experimental interface and will be changed post design review. * {@docCategory ISpacing} */ export declare interface ISpacing { s2: string; s1: string; m: string; l1: string; l2: string; } export { IStyle } export { IStyleSet } export { IStyleSheetConfig } /** * {@docCategory ITheme} */ export declare interface ITheme extends IScheme { /** * @internal * The schemes property is still in an experimental phase. The intent is to have it work * in conjunction with new 'schemes' prop that any component making use of Foundation can use. * Alternative themes that can be referred to by name. */ schemes?: { [P in ISchemeNames]?: IScheme; }; } export { keyframes } /** * Applies the theme, while filling in missing slots. * @param theme - Partial theme object. * @param depComments - Whether to include deprecated tags as comments for deprecated slots. */ export declare function loadTheme(theme: IPartialTheme, depComments?: boolean): ITheme; export { mergeStyles } export { mergeStyleSets } export declare const normalize: IRawStyle; export declare const noWrap: IRawStyle; export declare const PulsingBeaconAnimationStyles: { continuousPulseAnimationDouble: typeof _continuousPulseAnimationDouble; continuousPulseAnimationSingle: typeof _continuousPulseAnimationSingle; createDefaultAnimation: typeof _createDefaultAnimation; }; export declare function registerDefaultFontFaces(baseUrl: string): void; /** * Remaps one icon name to another. */ export declare function registerIconAlias(iconName: string, mappedToName: string): void; /** * Registers a given subset of icons. * * @param iconSubset - the icon subset definition. */ export declare function registerIcons(iconSubset: IIconSubset, options?: Partial): void; /** * Registers a callback that gets called whenever the theme changes. * This should only be used when the component cannot automatically get theme changes through its state. * This will not register duplicate callbacks. */ export declare function registerOnThemeChangeCallback(callback: (theme: ITheme) => void): void; /** * See registerOnThemeChangeCallback(). * Removes previously registered callbacks. */ export declare function removeOnThemeChangeCallback(callback: (theme: ITheme) => void): void; export declare const ScreenWidthMaxLarge: number; export declare const ScreenWidthMaxMedium: number; export declare const ScreenWidthMaxSmall: number; export declare const ScreenWidthMaxXLarge: number; export declare const ScreenWidthMaxXXLarge: number; export declare const ScreenWidthMinLarge = 640; export declare const ScreenWidthMinMedium = 480; export declare const ScreenWidthMinSmall = 320; export declare const ScreenWidthMinUhfMobile = 768; export declare const ScreenWidthMinXLarge = 1024; export declare const ScreenWidthMinXXLarge = 1366; export declare const ScreenWidthMinXXXLarge = 1920; /** * Sets the icon options. * * @public */ export declare function setIconOptions(options: Partial): void; export { Stylesheet } export declare const ThemeSettingName = "theme"; /** * Unregisters icons by name. * * @param iconNames - List of icons to unregister. */ export declare function unregisterIcons(iconNames: string[]): void; export declare namespace ZIndexes { const Nav: number; /** * @deprecated ScrollablePane */ const ScrollablePane: number; const FocusStyle: number; const Coachmark: number; const Layer: number; const KeytipLayer: number; } export { }