first commit

This commit is contained in:
Stefan Hacker
2026-04-03 09:38:48 +02:00
commit 37ad745546
47450 changed files with 3120798 additions and 0 deletions
File diff suppressed because it is too large Load Diff
File diff suppressed because it is too large Load Diff
+15
View File
@@ -0,0 +1,15 @@
Fluent UI React - Style Utilities
Copyright (c) Microsoft Corporation
All rights reserved.
MIT License
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the ""Software""), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED *AS IS*, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
Note: Usage of the fonts and icons referenced in Fluent UI React is subject to the terms listed at https://aka.ms/fluentui-assets-license
+18
View File
@@ -0,0 +1,18 @@
# @fluentui/style-utilities
**Styling helpers for [Fluent UI React](https://developer.microsoft.com/en-us/fluentui)**
([formerly Office UI Fabric React](https://developer.microsoft.com/en-us/office/blogs/ui-fabric-is-evolving-into-fluent-ui/))
## Using this package
Integrating components into your project depends heavily on your setup. The recommended setup is to use a bundler such as webpack which can resolve NPM package imports in your code and can bundle the specific things you import.
If you're using `@fluentui/react`, the `@fluentui/style-utilities` package contents are re-exported under `@fluentui/react/lib/Styling`. It's recommended to access the package this way rather than via a direct dependency.
In a project which doesn't use `@fluentui/react`, you can still install this package as a dependency:
```
npm install --save @fluentui/style-utilities
```
This gives you access to styling-related constants, utilities, and Fabric Core style classes through JavaScript.
+3
View File
@@ -0,0 +1,3 @@
{
"extends": "@fluentui/scripts-api-extractor/api-extractor.common.json"
}
+9
View File
@@ -0,0 +1,9 @@
{
"entries": [
{
"entry": "./lib/index.js",
"manifest": "./src/office-ui-styling.manifest.json",
"outputPath": "./dist/office-ui-styling.js"
}
]
}
+3
View File
@@ -0,0 +1,3 @@
{
"cdnBasePath": "/"
}
+838
View File
@@ -0,0 +1,838 @@
import { AnimationStyles } from '@fluentui/theme';
import { AnimationVariables } from '@fluentui/theme';
import { concatStyleSets } from '@fluentui/merge-styles';
import { concatStyleSetsWithProps } from '@fluentui/merge-styles';
import { createFontStyles } from '@fluentui/theme';
import { createTheme } from '@fluentui/theme';
import { DefaultEffects } from '@fluentui/theme';
import { DefaultFontStyles } from '@fluentui/theme';
import { DefaultPalette } from '@fluentui/theme';
import { fontFace } from '@fluentui/merge-styles';
import { FontSizes } from '@fluentui/theme';
import { FontWeights } from '@fluentui/theme';
import { IAnimationStyles } from '@fluentui/theme';
import { IAnimationVariables } from '@fluentui/theme';
import { IconFontSizes } from '@fluentui/theme';
import { ICSPSettings } from '@fluentui/merge-styles';
import type { ICustomizerContext } from '@fluentui/utilities';
import { IEffects } from '@fluentui/theme';
import { IFontFace } from '@fluentui/merge-styles';
import { IFontStyles } from '@fluentui/theme';
import { IFontWeight } from '@fluentui/merge-styles';
import { InjectionMode } from '@fluentui/merge-styles';
import { IPalette } from '@fluentui/theme';
import { IPartialTheme } from '@fluentui/theme';
import { IProcessedStyleSet } from '@fluentui/merge-styles';
import { IRawStyle } from '@fluentui/merge-styles';
import { IScheme } from '@fluentui/theme';
import { ISchemeNames } from '@fluentui/theme';
import { ISemanticColors } from '@fluentui/theme';
import { ISemanticTextColors } from '@fluentui/theme';
import { ISpacing } from '@fluentui/theme';
import { IStyle } from '@fluentui/merge-styles';
import { IStyleSet } from '@fluentui/merge-styles';
import { IStyleSetBase } from '@fluentui/merge-styles';
import { IStyleSheetConfig } from '@fluentui/merge-styles';
import { ITheme } from '@fluentui/theme';
import type { JSXElement } from '@fluentui/utilities';
import { keyframes } from '@fluentui/merge-styles';
import { mergeStyles } from '@fluentui/merge-styles';
import { mergeStyleSets } from '@fluentui/merge-styles';
import { registerDefaultFontFaces } from '@fluentui/theme';
import { ShadowConfig } from '@fluentui/merge-styles';
import { Stylesheet } from '@fluentui/merge-styles';
/**
* {@docCategory AnimationClassNames}
*/
export declare const AnimationClassNames: {
[key in keyof IAnimationStyles]?: string;
};
export { AnimationStyles }
export { AnimationVariables }
/**
* 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<T extends Object>(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 { createFontStyles }
export { createTheme }
export { DefaultEffects }
export { DefaultFontStyles }
export { DefaultPalette }
/**
* @deprecated Use `HighContrastSelector`
*/
export declare const EdgeChromiumHighContrastSelector = "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)";
export declare const FLUENT_CDN_BASE_URL = "https://res.cdn.office.net/files/fabric-cdn-prod_20260115.001";
/**
* 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 { FontSizes }
export { FontWeights }
/**
* The style which turns off high contrast adjustment in (only) Edge Chromium browser.
* @deprecated Use `getHighContrastNoAdjustStyle`
*/
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.
* <div className={classNames.parent}>
* <span className={classNames.content}>Overflown Content</span>
* </div>
* ```
* ```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.
* @param borderRadius - If the style should include a rounded border.
* @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, borderRadius?: string | number | undefined): 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<T>(classNames: GlobalClassNames<T>, theme: ITheme, disableGlobalClassNames?: boolean): GlobalClassNames<T>;
/**
* The style which turns off high contrast adjustment in browsers.
*/
export declare function getHighContrastNoAdjustStyle(): IRawStyle;
/**
* 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 `@fluentui/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 | undefined, max: number | undefined): 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<IStyles> = Record<keyof IStyles, string>;
export declare const hiddenContentStyle: IRawStyle;
export declare const HighContrastSelector = "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)";
export declare const HighContrastSelectorBlack = "@media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark)";
export declare 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 }
/**
* {@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 { IconFontSizes }
export { ICSPSettings }
export { IEffects }
export { IFontFace }
export { IFontStyles }
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;
/**
* If the style should include a rounded border.
*/
borderRadius?: string | number | undefined;
/**
* If default pointer events should be overridden.
* @defaultvalue undefined
*/
pointerEvents?: IRawStyle['pointerEvents'];
}
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 | JSXElement;
};
style?: IRawStyle;
/**
* Indicates to the icon renderer that it is safe to merge any props on the original `Icon` element
* onto the child content element registered for the icon which are valid for HTML images.
*/
mergeImageProps?: boolean;
}
export declare interface IIconSubsetRecord extends IIconSubset {
isRegistered?: boolean;
className?: string;
}
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 { IStyleSetBase }
export { IStyleSheetConfig }
export { ITheme }
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 { registerDefaultFontFaces }
/**
* 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<IIconOptions>): 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<IIconOptions>): void;
export { ShadowConfig }
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 Do not use
*/
const ScrollablePane: number;
const FocusStyle: number;
const Coachmark: number;
const Layer: number;
const KeytipLayer: number;
}
export { }
+369
View File
@@ -0,0 +1,369 @@
## API Report File for "@fluentui/style-utilities"
> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
```ts
import { AnimationStyles } from '@fluentui/theme';
import { AnimationVariables } from '@fluentui/theme';
import { concatStyleSets } from '@fluentui/merge-styles';
import { concatStyleSetsWithProps } from '@fluentui/merge-styles';
import { createFontStyles } from '@fluentui/theme';
import { createTheme } from '@fluentui/theme';
import { DefaultEffects } from '@fluentui/theme';
import { DefaultFontStyles } from '@fluentui/theme';
import { DefaultPalette } from '@fluentui/theme';
import { fontFace } from '@fluentui/merge-styles';
import { FontSizes } from '@fluentui/theme';
import { FontWeights } from '@fluentui/theme';
import { IAnimationStyles } from '@fluentui/theme';
import { IAnimationVariables } from '@fluentui/theme';
import { IconFontSizes } from '@fluentui/theme';
import { ICSPSettings } from '@fluentui/merge-styles';
import type { ICustomizerContext } from '@fluentui/utilities';
import { IEffects } from '@fluentui/theme';
import { IFontFace } from '@fluentui/merge-styles';
import { IFontStyles } from '@fluentui/theme';
import { IFontWeight } from '@fluentui/merge-styles';
import { InjectionMode } from '@fluentui/merge-styles';
import { IPalette } from '@fluentui/theme';
import { IPartialTheme } from '@fluentui/theme';
import { IProcessedStyleSet } from '@fluentui/merge-styles';
import { IRawStyle } from '@fluentui/merge-styles';
import { IScheme } from '@fluentui/theme';
import { ISchemeNames } from '@fluentui/theme';
import { ISemanticColors } from '@fluentui/theme';
import { ISemanticTextColors } from '@fluentui/theme';
import { ISpacing } from '@fluentui/theme';
import { IStyle } from '@fluentui/merge-styles';
import { IStyleSet } from '@fluentui/merge-styles';
import { IStyleSetBase } from '@fluentui/merge-styles';
import { IStyleSheetConfig } from '@fluentui/merge-styles';
import { ITheme } from '@fluentui/theme';
import type { JSXElement } from '@fluentui/utilities';
import { keyframes } from '@fluentui/merge-styles';
import { mergeStyles } from '@fluentui/merge-styles';
import { mergeStyleSets } from '@fluentui/merge-styles';
import { registerDefaultFontFaces } from '@fluentui/theme';
import { ShadowConfig } from '@fluentui/merge-styles';
import { Stylesheet } from '@fluentui/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 (undocumented)
export const FLUENT_CDN_BASE_URL = "https://res.cdn.office.net/files/fabric-cdn-prod_20260115.001";
// @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, borderRadius?: string | number | undefined): 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;
borderRadius?: string | number | undefined;
highContrastStyle?: IRawStyle;
inset?: number;
isFocusedOnly?: boolean;
outlineColor?: string;
pointerEvents?: IRawStyle['pointerEvents'];
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 | JSXElement;
};
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 { IStyleSetBase }
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 { ShadowConfig }
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)
```
+3
View File
@@ -0,0 +1,3 @@
import { preset } from '@fluentui/scripts-tasks';
preset();
+2
View File
@@ -0,0 +1,2 @@
export { InjectionMode, Stylesheet, concatStyleSets, concatStyleSetsWithProps, fontFace, keyframes, mergeStyleSets, mergeStyles, } from '@fluentui/merge-styles';
export type { IFontFace, IFontWeight, IRawStyle, IStyle, IStyleSet, IStyleSetBase, IProcessedStyleSet, IStyleSheetConfig, ICSPSettings, ShadowConfig, } from '@fluentui/merge-styles';
+14
View File
@@ -0,0 +1,14 @@
define(["require", "exports", "@fluentui/merge-styles"], function (require, exports, merge_styles_1) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.mergeStyles = exports.mergeStyleSets = exports.keyframes = exports.fontFace = exports.concatStyleSetsWithProps = exports.concatStyleSets = exports.Stylesheet = exports.InjectionMode = void 0;
Object.defineProperty(exports, "InjectionMode", { enumerable: true, get: function () { return merge_styles_1.InjectionMode; } });
Object.defineProperty(exports, "Stylesheet", { enumerable: true, get: function () { return merge_styles_1.Stylesheet; } });
Object.defineProperty(exports, "concatStyleSets", { enumerable: true, get: function () { return merge_styles_1.concatStyleSets; } });
Object.defineProperty(exports, "concatStyleSetsWithProps", { enumerable: true, get: function () { return merge_styles_1.concatStyleSetsWithProps; } });
Object.defineProperty(exports, "fontFace", { enumerable: true, get: function () { return merge_styles_1.fontFace; } });
Object.defineProperty(exports, "keyframes", { enumerable: true, get: function () { return merge_styles_1.keyframes; } });
Object.defineProperty(exports, "mergeStyleSets", { enumerable: true, get: function () { return merge_styles_1.mergeStyleSets; } });
Object.defineProperty(exports, "mergeStyles", { enumerable: true, get: function () { return merge_styles_1.mergeStyles; } });
});
//# sourceMappingURL=MergeStyles.js.map
+1
View File
@@ -0,0 +1 @@
{"version":3,"file":"MergeStyles.js","sourceRoot":"../src/","sources":["MergeStyles.ts"],"names":[],"mappings":";;;;IACE,6GAAA,aAAa,OAAA;IACb,0GAAA,UAAU,OAAA;IACV,+GAAA,eAAe,OAAA;IACf,wHAAA,wBAAwB,OAAA;IACxB,wGAAA,QAAQ,OAAA;IACR,yGAAA,SAAS,OAAA;IACT,8GAAA,cAAc,OAAA;IACd,2GAAA,WAAW,OAAA","sourcesContent":["export {\n InjectionMode,\n Stylesheet,\n concatStyleSets,\n concatStyleSetsWithProps,\n fontFace,\n keyframes,\n mergeStyleSets,\n mergeStyles,\n} from '@fluentui/merge-styles';\nexport type {\n IFontFace,\n IFontWeight,\n IRawStyle,\n IStyle,\n IStyleSet,\n IStyleSetBase,\n IProcessedStyleSet,\n IStyleSheetConfig,\n ICSPSettings,\n ShadowConfig,\n} from '@fluentui/merge-styles';\n"]}
+1
View File
@@ -0,0 +1 @@
export * from './utilities/index';
+6
View File
@@ -0,0 +1,6 @@
define(["require", "exports", "tslib", "./utilities/index"], function (require, exports, tslib_1, index_1) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
tslib_1.__exportStar(index_1, exports);
});
//# sourceMappingURL=Utilities.js.map
+1
View File
@@ -0,0 +1 @@
{"version":3,"file":"Utilities.js","sourceRoot":"../src/","sources":["Utilities.ts"],"names":[],"mappings":";;;IAAA,uCAAkC","sourcesContent":["export * from './utilities/index';\n"]}
+1
View File
@@ -0,0 +1 @@
export declare const FLUENT_CDN_BASE_URL = "https://res.cdn.office.net/files/fabric-cdn-prod_20260115.001";
+7
View File
@@ -0,0 +1,7 @@
define(["require", "exports"], function (require, exports) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.FLUENT_CDN_BASE_URL = void 0;
exports.FLUENT_CDN_BASE_URL = 'https://res.cdn.office.net/files/fabric-cdn-prod_20260115.001';
});
//# sourceMappingURL=cdn.js.map
+1
View File
@@ -0,0 +1 @@
{"version":3,"file":"cdn.js","sourceRoot":"../src/","sources":["cdn.ts"],"names":[],"mappings":";;;;IAAa,QAAA,mBAAmB,GAAG,+DAA+D,CAAC","sourcesContent":["export const FLUENT_CDN_BASE_URL = 'https://res.cdn.office.net/files/fabric-cdn-prod_20260115.001';\n"]}
@@ -0,0 +1,7 @@
import type { IAnimationStyles } from '../interfaces/index';
/**
* {@docCategory AnimationClassNames}
*/
export declare const AnimationClassNames: {
[key in keyof IAnimationStyles]?: string;
};
@@ -0,0 +1,10 @@
define(["require", "exports", "../utilities/index", "../styles/index"], function (require, exports, index_1, index_2) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.AnimationClassNames = void 0;
/**
* {@docCategory AnimationClassNames}
*/
exports.AnimationClassNames = (0, index_1.buildClassMap)(index_2.AnimationStyles);
});
//# sourceMappingURL=AnimationClassNames.js.map
@@ -0,0 +1 @@
{"version":3,"file":"AnimationClassNames.js","sourceRoot":"../src/","sources":["classNames/AnimationClassNames.ts"],"names":[],"mappings":";;;;IAIA;;OAEG;IACU,QAAA,mBAAmB,GAAiD,IAAA,qBAAa,EAAC,uBAAe,CAAC,CAAC","sourcesContent":["import { buildClassMap } from '../utilities/index';\nimport { AnimationStyles } from '../styles/index';\nimport type { IAnimationStyles } from '../interfaces/index';\n\n/**\n * {@docCategory AnimationClassNames}\n */\nexport const AnimationClassNames: { [key in keyof IAnimationStyles]?: string } = buildClassMap(AnimationStyles);\n"]}
@@ -0,0 +1,294 @@
/**
* {@docCategory IColorClassNames}
*/
export 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 const ColorClassNames: IColorClassNames;
@@ -0,0 +1,38 @@
define(["require", "exports", "@fluentui/merge-styles", "../styles/DefaultPalette", "../styles/index"], function (require, exports, merge_styles_1, DefaultPalette_1, index_1) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.ColorClassNames = void 0;
exports.ColorClassNames = {};
for (var colorName in DefaultPalette_1.DefaultPalette) {
if (DefaultPalette_1.DefaultPalette.hasOwnProperty(colorName)) {
// Foreground color
_defineGetter(exports.ColorClassNames, colorName, '', false, 'color');
// Hover color
_defineGetter(exports.ColorClassNames, colorName, 'Hover', true, 'color');
// Background color
_defineGetter(exports.ColorClassNames, colorName, 'Background', false, 'background');
// Background hover
_defineGetter(exports.ColorClassNames, colorName, 'BackgroundHover', true, 'background');
// Border color
_defineGetter(exports.ColorClassNames, colorName, 'Border', false, 'borderColor');
// Border hover color
_defineGetter(exports.ColorClassNames, colorName, 'BorderHover', true, 'borderColor');
}
}
/**
* Defines a getter for the given class configuration.
*/
function _defineGetter(obj, colorName, suffix, isHover, cssProperty) {
Object.defineProperty(obj, colorName + suffix, {
get: function () {
var _a;
// eslint-disable-next-line @typescript-eslint/no-explicit-any
var style = (_a = {}, _a[cssProperty] = (0, index_1.getTheme)().palette[colorName], _a);
return (0, merge_styles_1.mergeStyles)(isHover ? { selectors: { ':hover': style } } : style).toString();
},
enumerable: true,
configurable: true,
});
}
});
//# sourceMappingURL=ColorClassNames.js.map
File diff suppressed because one or more lines are too long
@@ -0,0 +1,7 @@
import type { IFontStyles } from '../interfaces/index';
/**
* {@docCategory FontClassNames}
*/
export declare const FontClassNames: {
[key in keyof IFontStyles]?: string;
};
@@ -0,0 +1,10 @@
define(["require", "exports", "../utilities/buildClassMap", "../styles/DefaultFontStyles"], function (require, exports, buildClassMap_1, DefaultFontStyles_1) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.FontClassNames = void 0;
/**
* {@docCategory FontClassNames}
*/
exports.FontClassNames = (0, buildClassMap_1.buildClassMap)(DefaultFontStyles_1.DefaultFontStyles);
});
//# sourceMappingURL=FontClassNames.js.map
@@ -0,0 +1 @@
{"version":3,"file":"FontClassNames.js","sourceRoot":"../src/","sources":["classNames/FontClassNames.ts"],"names":[],"mappings":";;;;IAIA;;OAEG;IACU,QAAA,cAAc,GAA4C,IAAA,6BAAa,EAAC,qCAAiB,CAAC,CAAC","sourcesContent":["import { buildClassMap } from '../utilities/buildClassMap';\nimport { DefaultFontStyles } from '../styles/DefaultFontStyles';\nimport type { IFontStyles } from '../interfaces/index';\n\n/**\n * {@docCategory FontClassNames}\n */\nexport const FontClassNames: { [key in keyof IFontStyles]?: string } = buildClassMap(DefaultFontStyles);\n"]}
+3
View File
@@ -0,0 +1,3 @@
export { AnimationClassNames } from './AnimationClassNames';
export { FontClassNames } from './FontClassNames';
export { ColorClassNames } from './ColorClassNames';
+9
View File
@@ -0,0 +1,9 @@
define(["require", "exports", "./AnimationClassNames", "./FontClassNames", "./ColorClassNames"], function (require, exports, AnimationClassNames_1, FontClassNames_1, ColorClassNames_1) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.ColorClassNames = exports.FontClassNames = exports.AnimationClassNames = void 0;
Object.defineProperty(exports, "AnimationClassNames", { enumerable: true, get: function () { return AnimationClassNames_1.AnimationClassNames; } });
Object.defineProperty(exports, "FontClassNames", { enumerable: true, get: function () { return FontClassNames_1.FontClassNames; } });
Object.defineProperty(exports, "ColorClassNames", { enumerable: true, get: function () { return ColorClassNames_1.ColorClassNames; } });
});
//# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["classNames/index.ts"],"names":[],"mappings":";;;;IAAS,0HAAA,mBAAmB,OAAA;IACnB,gHAAA,cAAc,OAAA;IACd,kHAAA,eAAe,OAAA","sourcesContent":["export { AnimationClassNames } from './AnimationClassNames';\nexport { FontClassNames } from './FontClassNames';\nexport { ColorClassNames } from './ColorClassNames';\n"]}
+10
View File
@@ -0,0 +1,10 @@
export { AnimationClassNames, FontClassNames, ColorClassNames } from './classNames/index';
export { AnimationStyles, AnimationVariables, DefaultPalette, DefaultEffects, DefaultFontStyles, registerDefaultFontFaces, FontSizes, FontWeights, IconFontSizes, createFontStyles, hiddenContentStyle, PulsingBeaconAnimationStyles, getGlobalClassNames, getFocusStyle, getFocusOutlineStyle, getInputFocusStyle, getThemedContext, focusClear, ThemeSettingName, getTheme, loadTheme, createTheme, registerOnThemeChangeCallback, removeOnThemeChangeCallback, HighContrastSelector, HighContrastSelectorWhite, HighContrastSelectorBlack, EdgeChromiumHighContrastSelector, ScreenWidthMinSmall, ScreenWidthMinMedium, ScreenWidthMinLarge, ScreenWidthMinXLarge, ScreenWidthMinXXLarge, ScreenWidthMinXXXLarge, ScreenWidthMaxSmall, ScreenWidthMaxMedium, ScreenWidthMaxLarge, ScreenWidthMaxXLarge, ScreenWidthMaxXXLarge, ScreenWidthMinUhfMobile, getScreenSelector, getHighContrastNoAdjustStyle, getEdgeChromiumNoHighContrastAdjustSelector, normalize, noWrap, getFadedOverflowStyle, getPlaceholderStyles, ZIndexes, } from './styles/index';
export type { GlobalClassNames } from './styles/index';
export { buildClassMap, getIcon, registerIcons, registerIconAlias, unregisterIcons, setIconOptions, getIconClassName, } from './utilities/index';
export type { IIconRecord, IIconSubset, IIconSubsetRecord, IIconOptions } from './utilities/index';
export type { IAnimationStyles, IAnimationVariables, IGetFocusStylesOptions, IEffects, IFontStyles, IPalette, ISemanticColors, ISemanticTextColors, ISpacing, ITheme, IPartialTheme, IScheme, ISchemeNames, } from './interfaces/index';
export { InjectionMode, Stylesheet, concatStyleSets, concatStyleSetsWithProps, fontFace, keyframes, mergeStyleSets, mergeStyles, } from './MergeStyles';
export type { IFontFace, IFontWeight, IRawStyle, IStyle, IStyleSet, IStyleSetBase, IProcessedStyleSet, IStyleSheetConfig, ICSPSettings, ShadowConfig, } from './MergeStyles';
export { FLUENT_CDN_BASE_URL } from './cdn';
import './version';
+77
View File
@@ -0,0 +1,77 @@
define(["require", "exports", "./classNames/index", "./styles/index", "./utilities/index", "./MergeStyles", "./cdn", "./styles/theme", "./version"], function (require, exports, index_1, index_2, index_3, MergeStyles_1, cdn_1, theme_1) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.FLUENT_CDN_BASE_URL = exports.mergeStyles = exports.mergeStyleSets = exports.keyframes = exports.fontFace = exports.concatStyleSetsWithProps = exports.concatStyleSets = exports.Stylesheet = exports.InjectionMode = exports.getIconClassName = exports.setIconOptions = exports.unregisterIcons = exports.registerIconAlias = exports.registerIcons = exports.getIcon = exports.buildClassMap = exports.ZIndexes = exports.getPlaceholderStyles = exports.getFadedOverflowStyle = exports.noWrap = exports.normalize = exports.getEdgeChromiumNoHighContrastAdjustSelector = exports.getHighContrastNoAdjustStyle = exports.getScreenSelector = exports.ScreenWidthMinUhfMobile = exports.ScreenWidthMaxXXLarge = exports.ScreenWidthMaxXLarge = exports.ScreenWidthMaxLarge = exports.ScreenWidthMaxMedium = exports.ScreenWidthMaxSmall = exports.ScreenWidthMinXXXLarge = exports.ScreenWidthMinXXLarge = exports.ScreenWidthMinXLarge = exports.ScreenWidthMinLarge = exports.ScreenWidthMinMedium = exports.ScreenWidthMinSmall = exports.EdgeChromiumHighContrastSelector = exports.HighContrastSelectorBlack = exports.HighContrastSelectorWhite = exports.HighContrastSelector = exports.removeOnThemeChangeCallback = exports.registerOnThemeChangeCallback = exports.createTheme = exports.loadTheme = exports.getTheme = exports.ThemeSettingName = exports.focusClear = exports.getThemedContext = exports.getInputFocusStyle = exports.getFocusOutlineStyle = exports.getFocusStyle = exports.getGlobalClassNames = exports.PulsingBeaconAnimationStyles = exports.hiddenContentStyle = exports.createFontStyles = exports.IconFontSizes = exports.FontWeights = exports.FontSizes = exports.registerDefaultFontFaces = exports.DefaultFontStyles = exports.DefaultEffects = exports.DefaultPalette = exports.AnimationVariables = exports.AnimationStyles = exports.ColorClassNames = exports.FontClassNames = exports.AnimationClassNames = void 0;
Object.defineProperty(exports, "AnimationClassNames", { enumerable: true, get: function () { return index_1.AnimationClassNames; } });
Object.defineProperty(exports, "FontClassNames", { enumerable: true, get: function () { return index_1.FontClassNames; } });
Object.defineProperty(exports, "ColorClassNames", { enumerable: true, get: function () { return index_1.ColorClassNames; } });
Object.defineProperty(exports, "AnimationStyles", { enumerable: true, get: function () { return index_2.AnimationStyles; } });
Object.defineProperty(exports, "AnimationVariables", { enumerable: true, get: function () { return index_2.AnimationVariables; } });
Object.defineProperty(exports, "DefaultPalette", { enumerable: true, get: function () { return index_2.DefaultPalette; } });
Object.defineProperty(exports, "DefaultEffects", { enumerable: true, get: function () { return index_2.DefaultEffects; } });
Object.defineProperty(exports, "DefaultFontStyles", { enumerable: true, get: function () { return index_2.DefaultFontStyles; } });
Object.defineProperty(exports, "registerDefaultFontFaces", { enumerable: true, get: function () { return index_2.registerDefaultFontFaces; } });
Object.defineProperty(exports, "FontSizes", { enumerable: true, get: function () { return index_2.FontSizes; } });
Object.defineProperty(exports, "FontWeights", { enumerable: true, get: function () { return index_2.FontWeights; } });
Object.defineProperty(exports, "IconFontSizes", { enumerable: true, get: function () { return index_2.IconFontSizes; } });
Object.defineProperty(exports, "createFontStyles", { enumerable: true, get: function () { return index_2.createFontStyles; } });
Object.defineProperty(exports, "hiddenContentStyle", { enumerable: true, get: function () { return index_2.hiddenContentStyle; } });
Object.defineProperty(exports, "PulsingBeaconAnimationStyles", { enumerable: true, get: function () { return index_2.PulsingBeaconAnimationStyles; } });
Object.defineProperty(exports, "getGlobalClassNames", { enumerable: true, get: function () { return index_2.getGlobalClassNames; } });
// eslint-disable-next-line @typescript-eslint/no-deprecated
Object.defineProperty(exports, "getFocusStyle", { enumerable: true, get: function () { return index_2.getFocusStyle; } });
Object.defineProperty(exports, "getFocusOutlineStyle", { enumerable: true, get: function () { return index_2.getFocusOutlineStyle; } });
Object.defineProperty(exports, "getInputFocusStyle", { enumerable: true, get: function () { return index_2.getInputFocusStyle; } });
Object.defineProperty(exports, "getThemedContext", { enumerable: true, get: function () { return index_2.getThemedContext; } });
Object.defineProperty(exports, "focusClear", { enumerable: true, get: function () { return index_2.focusClear; } });
Object.defineProperty(exports, "ThemeSettingName", { enumerable: true, get: function () { return index_2.ThemeSettingName; } });
Object.defineProperty(exports, "getTheme", { enumerable: true, get: function () { return index_2.getTheme; } });
Object.defineProperty(exports, "loadTheme", { enumerable: true, get: function () { return index_2.loadTheme; } });
Object.defineProperty(exports, "createTheme", { enumerable: true, get: function () { return index_2.createTheme; } });
Object.defineProperty(exports, "registerOnThemeChangeCallback", { enumerable: true, get: function () { return index_2.registerOnThemeChangeCallback; } });
Object.defineProperty(exports, "removeOnThemeChangeCallback", { enumerable: true, get: function () { return index_2.removeOnThemeChangeCallback; } });
Object.defineProperty(exports, "HighContrastSelector", { enumerable: true, get: function () { return index_2.HighContrastSelector; } });
Object.defineProperty(exports, "HighContrastSelectorWhite", { enumerable: true, get: function () { return index_2.HighContrastSelectorWhite; } });
Object.defineProperty(exports, "HighContrastSelectorBlack", { enumerable: true, get: function () { return index_2.HighContrastSelectorBlack; } });
// eslint-disable-next-line @typescript-eslint/no-deprecated
Object.defineProperty(exports, "EdgeChromiumHighContrastSelector", { enumerable: true, get: function () { return index_2.EdgeChromiumHighContrastSelector; } });
Object.defineProperty(exports, "ScreenWidthMinSmall", { enumerable: true, get: function () { return index_2.ScreenWidthMinSmall; } });
Object.defineProperty(exports, "ScreenWidthMinMedium", { enumerable: true, get: function () { return index_2.ScreenWidthMinMedium; } });
Object.defineProperty(exports, "ScreenWidthMinLarge", { enumerable: true, get: function () { return index_2.ScreenWidthMinLarge; } });
Object.defineProperty(exports, "ScreenWidthMinXLarge", { enumerable: true, get: function () { return index_2.ScreenWidthMinXLarge; } });
Object.defineProperty(exports, "ScreenWidthMinXXLarge", { enumerable: true, get: function () { return index_2.ScreenWidthMinXXLarge; } });
Object.defineProperty(exports, "ScreenWidthMinXXXLarge", { enumerable: true, get: function () { return index_2.ScreenWidthMinXXXLarge; } });
Object.defineProperty(exports, "ScreenWidthMaxSmall", { enumerable: true, get: function () { return index_2.ScreenWidthMaxSmall; } });
Object.defineProperty(exports, "ScreenWidthMaxMedium", { enumerable: true, get: function () { return index_2.ScreenWidthMaxMedium; } });
Object.defineProperty(exports, "ScreenWidthMaxLarge", { enumerable: true, get: function () { return index_2.ScreenWidthMaxLarge; } });
Object.defineProperty(exports, "ScreenWidthMaxXLarge", { enumerable: true, get: function () { return index_2.ScreenWidthMaxXLarge; } });
Object.defineProperty(exports, "ScreenWidthMaxXXLarge", { enumerable: true, get: function () { return index_2.ScreenWidthMaxXXLarge; } });
Object.defineProperty(exports, "ScreenWidthMinUhfMobile", { enumerable: true, get: function () { return index_2.ScreenWidthMinUhfMobile; } });
Object.defineProperty(exports, "getScreenSelector", { enumerable: true, get: function () { return index_2.getScreenSelector; } });
Object.defineProperty(exports, "getHighContrastNoAdjustStyle", { enumerable: true, get: function () { return index_2.getHighContrastNoAdjustStyle; } });
// eslint-disable-next-line @typescript-eslint/no-deprecated
Object.defineProperty(exports, "getEdgeChromiumNoHighContrastAdjustSelector", { enumerable: true, get: function () { return index_2.getEdgeChromiumNoHighContrastAdjustSelector; } });
Object.defineProperty(exports, "normalize", { enumerable: true, get: function () { return index_2.normalize; } });
Object.defineProperty(exports, "noWrap", { enumerable: true, get: function () { return index_2.noWrap; } });
Object.defineProperty(exports, "getFadedOverflowStyle", { enumerable: true, get: function () { return index_2.getFadedOverflowStyle; } });
Object.defineProperty(exports, "getPlaceholderStyles", { enumerable: true, get: function () { return index_2.getPlaceholderStyles; } });
Object.defineProperty(exports, "ZIndexes", { enumerable: true, get: function () { return index_2.ZIndexes; } });
Object.defineProperty(exports, "buildClassMap", { enumerable: true, get: function () { return index_3.buildClassMap; } });
Object.defineProperty(exports, "getIcon", { enumerable: true, get: function () { return index_3.getIcon; } });
Object.defineProperty(exports, "registerIcons", { enumerable: true, get: function () { return index_3.registerIcons; } });
Object.defineProperty(exports, "registerIconAlias", { enumerable: true, get: function () { return index_3.registerIconAlias; } });
Object.defineProperty(exports, "unregisterIcons", { enumerable: true, get: function () { return index_3.unregisterIcons; } });
Object.defineProperty(exports, "setIconOptions", { enumerable: true, get: function () { return index_3.setIconOptions; } });
Object.defineProperty(exports, "getIconClassName", { enumerable: true, get: function () { return index_3.getIconClassName; } });
Object.defineProperty(exports, "InjectionMode", { enumerable: true, get: function () { return MergeStyles_1.InjectionMode; } });
Object.defineProperty(exports, "Stylesheet", { enumerable: true, get: function () { return MergeStyles_1.Stylesheet; } });
Object.defineProperty(exports, "concatStyleSets", { enumerable: true, get: function () { return MergeStyles_1.concatStyleSets; } });
Object.defineProperty(exports, "concatStyleSetsWithProps", { enumerable: true, get: function () { return MergeStyles_1.concatStyleSetsWithProps; } });
Object.defineProperty(exports, "fontFace", { enumerable: true, get: function () { return MergeStyles_1.fontFace; } });
Object.defineProperty(exports, "keyframes", { enumerable: true, get: function () { return MergeStyles_1.keyframes; } });
Object.defineProperty(exports, "mergeStyleSets", { enumerable: true, get: function () { return MergeStyles_1.mergeStyleSets; } });
Object.defineProperty(exports, "mergeStyles", { enumerable: true, get: function () { return MergeStyles_1.mergeStyles; } });
Object.defineProperty(exports, "FLUENT_CDN_BASE_URL", { enumerable: true, get: function () { return cdn_1.FLUENT_CDN_BASE_URL; } });
(0, theme_1.initializeThemeInCustomizations)();
});
//# sourceMappingURL=index.js.map
+1
View File
@@ -0,0 +1 @@
{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["index.ts"],"names":[],"mappings":";;;;IAAS,4GAAA,mBAAmB,OAAA;IAAE,uGAAA,cAAc,OAAA;IAAE,wGAAA,eAAe,OAAA;IAG3D,wGAAA,eAAe,OAAA;IACf,2GAAA,kBAAkB,OAAA;IAClB,uGAAA,cAAc,OAAA;IACd,uGAAA,cAAc,OAAA;IACd,0GAAA,iBAAiB,OAAA;IACjB,iHAAA,wBAAwB,OAAA;IACxB,kGAAA,SAAS,OAAA;IACT,oGAAA,WAAW,OAAA;IACX,sGAAA,aAAa,OAAA;IACb,yGAAA,gBAAgB,OAAA;IAChB,2GAAA,kBAAkB,OAAA;IAClB,qHAAA,4BAA4B,OAAA;IAC5B,4GAAA,mBAAmB,OAAA;IACnB,4DAA4D;IAC5D,sGAAA,aAAa,OAAA;IACb,6GAAA,oBAAoB,OAAA;IACpB,2GAAA,kBAAkB,OAAA;IAClB,yGAAA,gBAAgB,OAAA;IAChB,mGAAA,UAAU,OAAA;IACV,yGAAA,gBAAgB,OAAA;IAChB,iGAAA,QAAQ,OAAA;IACR,kGAAA,SAAS,OAAA;IACT,oGAAA,WAAW,OAAA;IACX,sHAAA,6BAA6B,OAAA;IAC7B,oHAAA,2BAA2B,OAAA;IAC3B,6GAAA,oBAAoB,OAAA;IACpB,kHAAA,yBAAyB,OAAA;IACzB,kHAAA,yBAAyB,OAAA;IACzB,4DAA4D;IAC5D,yHAAA,gCAAgC,OAAA;IAChC,4GAAA,mBAAmB,OAAA;IACnB,6GAAA,oBAAoB,OAAA;IACpB,4GAAA,mBAAmB,OAAA;IACnB,6GAAA,oBAAoB,OAAA;IACpB,8GAAA,qBAAqB,OAAA;IACrB,+GAAA,sBAAsB,OAAA;IACtB,4GAAA,mBAAmB,OAAA;IACnB,6GAAA,oBAAoB,OAAA;IACpB,4GAAA,mBAAmB,OAAA;IACnB,6GAAA,oBAAoB,OAAA;IACpB,8GAAA,qBAAqB,OAAA;IACrB,gHAAA,uBAAuB,OAAA;IACvB,0GAAA,iBAAiB,OAAA;IACjB,qHAAA,4BAA4B,OAAA;IAC5B,4DAA4D;IAC5D,oIAAA,2CAA2C,OAAA;IAC3C,kGAAA,SAAS,OAAA;IACT,+FAAA,MAAM,OAAA;IACN,8GAAA,qBAAqB,OAAA;IACrB,6GAAA,oBAAoB,OAAA;IACpB,iGAAA,QAAQ,OAAA;IAKR,sGAAA,aAAa,OAAA;IACb,gGAAA,OAAO,OAAA;IACP,sGAAA,aAAa,OAAA;IACb,0GAAA,iBAAiB,OAAA;IACjB,wGAAA,eAAe,OAAA;IACf,uGAAA,cAAc,OAAA;IACd,yGAAA,gBAAgB,OAAA;IAqBhB,4GAAA,aAAa,OAAA;IACb,yGAAA,UAAU,OAAA;IACV,8GAAA,eAAe,OAAA;IACf,uHAAA,wBAAwB,OAAA;IACxB,uGAAA,QAAQ,OAAA;IACR,wGAAA,SAAS,OAAA;IACT,6GAAA,cAAc,OAAA;IACd,0GAAA,WAAW,OAAA;IAeJ,0GAAA,mBAAmB,OAAA;IAM5B,IAAA,uCAA+B,GAAE,CAAC","sourcesContent":["export { AnimationClassNames, FontClassNames, ColorClassNames } from './classNames/index';\n\nexport {\n AnimationStyles,\n AnimationVariables,\n DefaultPalette,\n DefaultEffects,\n DefaultFontStyles,\n registerDefaultFontFaces,\n FontSizes,\n FontWeights,\n IconFontSizes,\n createFontStyles,\n hiddenContentStyle,\n PulsingBeaconAnimationStyles,\n getGlobalClassNames,\n // eslint-disable-next-line @typescript-eslint/no-deprecated\n getFocusStyle,\n getFocusOutlineStyle,\n getInputFocusStyle,\n getThemedContext,\n focusClear,\n ThemeSettingName,\n getTheme,\n loadTheme,\n createTheme,\n registerOnThemeChangeCallback,\n removeOnThemeChangeCallback,\n HighContrastSelector,\n HighContrastSelectorWhite,\n HighContrastSelectorBlack,\n // eslint-disable-next-line @typescript-eslint/no-deprecated\n EdgeChromiumHighContrastSelector,\n ScreenWidthMinSmall,\n ScreenWidthMinMedium,\n ScreenWidthMinLarge,\n ScreenWidthMinXLarge,\n ScreenWidthMinXXLarge,\n ScreenWidthMinXXXLarge,\n ScreenWidthMaxSmall,\n ScreenWidthMaxMedium,\n ScreenWidthMaxLarge,\n ScreenWidthMaxXLarge,\n ScreenWidthMaxXXLarge,\n ScreenWidthMinUhfMobile,\n getScreenSelector,\n getHighContrastNoAdjustStyle,\n // eslint-disable-next-line @typescript-eslint/no-deprecated\n getEdgeChromiumNoHighContrastAdjustSelector,\n normalize,\n noWrap,\n getFadedOverflowStyle,\n getPlaceholderStyles,\n ZIndexes,\n} from './styles/index';\nexport type { GlobalClassNames } from './styles/index';\n\nexport {\n buildClassMap,\n getIcon,\n registerIcons,\n registerIconAlias,\n unregisterIcons,\n setIconOptions,\n getIconClassName,\n} from './utilities/index';\nexport type { IIconRecord, IIconSubset, IIconSubsetRecord, IIconOptions } from './utilities/index';\n\nexport type {\n IAnimationStyles,\n IAnimationVariables,\n IGetFocusStylesOptions,\n IEffects,\n IFontStyles,\n IPalette,\n ISemanticColors,\n ISemanticTextColors,\n ISpacing,\n ITheme,\n IPartialTheme,\n IScheme,\n ISchemeNames,\n} from './interfaces/index';\n\nexport {\n InjectionMode,\n Stylesheet,\n concatStyleSets,\n concatStyleSetsWithProps,\n fontFace,\n keyframes,\n mergeStyleSets,\n mergeStyles,\n} from './MergeStyles';\nexport type {\n IFontFace,\n IFontWeight,\n IRawStyle,\n IStyle,\n IStyleSet,\n IStyleSetBase,\n IProcessedStyleSet,\n IStyleSheetConfig,\n ICSPSettings,\n ShadowConfig,\n} from './MergeStyles';\n\nexport { FLUENT_CDN_BASE_URL } from './cdn';\n\nimport './version';\n\n// Ensure theme is initialized when this package is referenced.\nimport { initializeThemeInCustomizations } from './styles/theme';\ninitializeThemeInCustomizations();\n"]}
@@ -0,0 +1 @@
export type { IAnimationStyles, IAnimationVariables } from '@fluentui/theme';
@@ -0,0 +1,5 @@
define(["require", "exports"], function (require, exports) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
});
//# sourceMappingURL=IAnimationStyles.js.map
@@ -0,0 +1 @@
{"version":3,"file":"IAnimationStyles.js","sourceRoot":"../src/","sources":["interfaces/IAnimationStyles.ts"],"names":[],"mappings":"","sourcesContent":["export type { IAnimationStyles, IAnimationVariables } from '@fluentui/theme';\n"]}
@@ -0,0 +1,47 @@
import type { IRawStyle } from '@fluentui/merge-styles';
export 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;
/**
* If the style should include a rounded border.
*/
borderRadius?: string | number | undefined;
/**
* If default pointer events should be overridden.
* @defaultvalue undefined
*/
pointerEvents?: IRawStyle['pointerEvents'];
}
@@ -0,0 +1,5 @@
define(["require", "exports"], function (require, exports) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
});
//# sourceMappingURL=IGetFocusStyles.js.map
@@ -0,0 +1 @@
{"version":3,"file":"IGetFocusStyles.js","sourceRoot":"../src/","sources":["interfaces/IGetFocusStyles.ts"],"names":[],"mappings":"","sourcesContent":["import type { IRawStyle } from '@fluentui/merge-styles';\n\nexport interface IGetFocusStylesOptions {\n /**\n * The number of pixels to inset the border.\n * @defaultvalue 0\n */\n inset?: number;\n\n /**\n * The width of the border in pixels.\n * @defaultvalue 1\n */\n width?: number;\n\n /**\n * The positioning applied to the container.\n * Must be 'relative' or 'absolute' so that the focus border can live around it.\n * @defaultvalue 'relative'\n */\n position?: 'relative' | 'absolute';\n\n /**\n * Style for high contrast mode.\n */\n highContrastStyle?: IRawStyle;\n\n /**\n * Color of the border.\n * @defaultvalue theme.palette.white\n */\n borderColor?: string;\n\n /**\n * Color of the outline.\n * @defaultvalue theme.palette.neutralSecondary\n */\n outlineColor?: string;\n\n /**\n * If the styles should apply on `:focus` pseudo element.\n * @defaultvalue true\n */\n isFocusedOnly?: boolean;\n\n /**\n * If the style should include a rounded border.\n */\n borderRadius?: string | number | undefined;\n\n /**\n * If default pointer events should be overridden.\n * @defaultvalue undefined\n */\n pointerEvents?: IRawStyle['pointerEvents'];\n}\n"]}
+3
View File
@@ -0,0 +1,3 @@
export type { IAnimationStyles, IAnimationVariables } from './IAnimationStyles';
export type { IGetFocusStylesOptions } from './IGetFocusStyles';
export type { IEffects, IFontStyles, IPalette, ISemanticColors, ISemanticTextColors, ISpacing, ITheme, IPartialTheme, IScheme, ISchemeNames, } from '@fluentui/theme';
+5
View File
@@ -0,0 +1,5 @@
define(["require", "exports"], function (require, exports) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
});
//# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["interfaces/index.ts"],"names":[],"mappings":"","sourcesContent":["export type { IAnimationStyles, IAnimationVariables } from './IAnimationStyles';\nexport type { IGetFocusStylesOptions } from './IGetFocusStyles';\nexport type {\n IEffects,\n IFontStyles,\n IPalette,\n ISemanticColors,\n ISemanticTextColors,\n ISpacing,\n ITheme,\n IPartialTheme,\n IScheme,\n ISchemeNames,\n} from '@fluentui/theme';\n"]}
@@ -0,0 +1 @@
export { AnimationStyles, AnimationVariables } from '@fluentui/theme';
@@ -0,0 +1,8 @@
define(["require", "exports", "@fluentui/theme"], function (require, exports, theme_1) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.AnimationVariables = exports.AnimationStyles = void 0;
Object.defineProperty(exports, "AnimationStyles", { enumerable: true, get: function () { return theme_1.AnimationStyles; } });
Object.defineProperty(exports, "AnimationVariables", { enumerable: true, get: function () { return theme_1.AnimationVariables; } });
});
//# sourceMappingURL=AnimationStyles.js.map
@@ -0,0 +1 @@
{"version":3,"file":"AnimationStyles.js","sourceRoot":"../src/","sources":["styles/AnimationStyles.ts"],"names":[],"mappings":";;;;IAAS,wGAAA,eAAe,OAAA;IAAE,2GAAA,kBAAkB,OAAA","sourcesContent":["export { AnimationStyles, AnimationVariables } from '@fluentui/theme';\n"]}
@@ -0,0 +1,32 @@
import type { IRawStyle } from '../MergeStyles';
export declare const HighContrastSelector = "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)";
export declare const HighContrastSelectorWhite = "@media screen and (-ms-high-contrast: black-on-white), screen and (forced-colors: active) and (prefers-color-scheme: light)";
export declare const HighContrastSelectorBlack = "@media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark)";
/**
* @deprecated Use `HighContrastSelector`
*/
export declare const EdgeChromiumHighContrastSelector = "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)";
export declare const ScreenWidthMinSmall = 320;
export declare const ScreenWidthMinMedium = 480;
export declare const ScreenWidthMinLarge = 640;
export declare const ScreenWidthMinXLarge = 1024;
export declare const ScreenWidthMinXXLarge = 1366;
export declare const ScreenWidthMinXXXLarge = 1920;
export declare const ScreenWidthMaxSmall: number;
export declare const ScreenWidthMaxMedium: number;
export declare const ScreenWidthMaxLarge: number;
export declare const ScreenWidthMaxXLarge: number;
export declare const ScreenWidthMaxXXLarge: number;
export declare const ScreenWidthMinUhfMobile = 768;
export declare function getScreenSelector(min: number | undefined, max: number | undefined): string;
/**
* The style which turns off high contrast adjustment in browsers.
*/
export declare function getHighContrastNoAdjustStyle(): IRawStyle;
/**
* The style which turns off high contrast adjustment in (only) Edge Chromium browser.
* @deprecated Use `getHighContrastNoAdjustStyle`
*/
export declare function getEdgeChromiumNoHighContrastAdjustSelector(): {
[EdgeChromiumHighContrastSelector]: IRawStyle;
};
+61
View File
@@ -0,0 +1,61 @@
define(["require", "exports"], function (require, exports) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.ScreenWidthMinUhfMobile = exports.ScreenWidthMaxXXLarge = exports.ScreenWidthMaxXLarge = exports.ScreenWidthMaxLarge = exports.ScreenWidthMaxMedium = exports.ScreenWidthMaxSmall = exports.ScreenWidthMinXXXLarge = exports.ScreenWidthMinXXLarge = exports.ScreenWidthMinXLarge = exports.ScreenWidthMinLarge = exports.ScreenWidthMinMedium = exports.ScreenWidthMinSmall = exports.EdgeChromiumHighContrastSelector = exports.HighContrastSelectorBlack = exports.HighContrastSelectorWhite = exports.HighContrastSelector = void 0;
exports.getScreenSelector = getScreenSelector;
exports.getHighContrastNoAdjustStyle = getHighContrastNoAdjustStyle;
exports.getEdgeChromiumNoHighContrastAdjustSelector = getEdgeChromiumNoHighContrastAdjustSelector;
exports.HighContrastSelector = '@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)';
exports.HighContrastSelectorWhite =
// eslint-disable-next-line @fluentui/max-len
'@media screen and (-ms-high-contrast: black-on-white), screen and (forced-colors: active) and (prefers-color-scheme: light)';
exports.HighContrastSelectorBlack =
// eslint-disable-next-line @fluentui/max-len
'@media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark)';
/**
* @deprecated Use `HighContrastSelector`
*/
exports.EdgeChromiumHighContrastSelector = '@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)';
exports.ScreenWidthMinSmall = 320;
exports.ScreenWidthMinMedium = 480;
exports.ScreenWidthMinLarge = 640;
exports.ScreenWidthMinXLarge = 1024;
exports.ScreenWidthMinXXLarge = 1366;
exports.ScreenWidthMinXXXLarge = 1920;
exports.ScreenWidthMaxSmall = exports.ScreenWidthMinMedium - 1;
exports.ScreenWidthMaxMedium = exports.ScreenWidthMinLarge - 1;
exports.ScreenWidthMaxLarge = exports.ScreenWidthMinXLarge - 1;
exports.ScreenWidthMaxXLarge = exports.ScreenWidthMinXXLarge - 1;
exports.ScreenWidthMaxXXLarge = exports.ScreenWidthMinXXXLarge - 1;
exports.ScreenWidthMinUhfMobile = 768;
function getScreenSelector(min, max) {
var minSelector = typeof min === 'number' ? " and (min-width: ".concat(min, "px)") : '';
var maxSelector = typeof max === 'number' ? " and (max-width: ".concat(max, "px)") : '';
return "@media only screen".concat(minSelector).concat(maxSelector);
}
/**
* The style which turns off high contrast adjustment in browsers.
*/
function getHighContrastNoAdjustStyle() {
return {
forcedColorAdjust: 'none',
MsHighContrastAdjust: 'none',
};
}
/**
* The style which turns off high contrast adjustment in (only) Edge Chromium browser.
* @deprecated Use `getHighContrastNoAdjustStyle`
*/
// eslint-disable-next-line @typescript-eslint/no-deprecated
function getEdgeChromiumNoHighContrastAdjustSelector() {
var _a;
return _a = {},
// eslint-disable-next-line @typescript-eslint/no-deprecated
_a[exports.EdgeChromiumHighContrastSelector] = {
forcedColorAdjust: 'none',
MsHighContrastAdjust: 'none',
},
_a;
}
});
//# sourceMappingURL=CommonStyles.js.map
@@ -0,0 +1 @@
{"version":3,"file":"CommonStyles.js","sourceRoot":"../src/","sources":["styles/CommonStyles.ts"],"names":[],"mappings":";;;;IA6BA,8CAIC;IAKD,oEAKC;IAOD,kGAQC;IAxDY,QAAA,oBAAoB,GAAG,mFAAmF,CAAC;IAC3G,QAAA,yBAAyB;IACpC,6CAA6C;IAC7C,6HAA6H,CAAC;IACnH,QAAA,yBAAyB;IACpC,6CAA6C;IAC7C,4HAA4H,CAAC;IAC/H;;OAEG;IACU,QAAA,gCAAgC,GAC3C,mFAAmF,CAAC;IAEzE,QAAA,mBAAmB,GAAG,GAAG,CAAC;IAC1B,QAAA,oBAAoB,GAAG,GAAG,CAAC;IAC3B,QAAA,mBAAmB,GAAG,GAAG,CAAC;IAC1B,QAAA,oBAAoB,GAAG,IAAI,CAAC;IAC5B,QAAA,qBAAqB,GAAG,IAAI,CAAC;IAC7B,QAAA,sBAAsB,GAAG,IAAI,CAAC;IAC9B,QAAA,mBAAmB,GAAG,4BAAoB,GAAG,CAAC,CAAC;IAC/C,QAAA,oBAAoB,GAAG,2BAAmB,GAAG,CAAC,CAAC;IAC/C,QAAA,mBAAmB,GAAG,4BAAoB,GAAG,CAAC,CAAC;IAC/C,QAAA,oBAAoB,GAAG,6BAAqB,GAAG,CAAC,CAAC;IACjD,QAAA,qBAAqB,GAAG,8BAAsB,GAAG,CAAC,CAAC;IAEnD,QAAA,uBAAuB,GAAG,GAAG,CAAC;IAE3C,SAAgB,iBAAiB,CAAC,GAAuB,EAAE,GAAuB;QAChF,IAAM,WAAW,GAAG,OAAO,GAAG,KAAK,QAAQ,CAAC,CAAC,CAAC,2BAAoB,GAAG,QAAK,CAAC,CAAC,CAAC,EAAE,CAAC;QAChF,IAAM,WAAW,GAAG,OAAO,GAAG,KAAK,QAAQ,CAAC,CAAC,CAAC,2BAAoB,GAAG,QAAK,CAAC,CAAC,CAAC,EAAE,CAAC;QAChF,OAAO,4BAAqB,WAAW,SAAG,WAAW,CAAE,CAAC;IAC1D,CAAC;IAED;;OAEG;IACH,SAAgB,4BAA4B;QAC1C,OAAO;YACL,iBAAiB,EAAE,MAAM;YACzB,oBAAoB,EAAE,MAAM;SAC7B,CAAC;IACJ,CAAC;IAED;;;OAGG;IACH,4DAA4D;IAC5D,SAAgB,2CAA2C;;QACzD;YACE,4DAA4D;YAC5D,GAAC,wCAAgC,IAAG;gBAClC,iBAAiB,EAAE,MAAM;gBACzB,oBAAoB,EAAE,MAAM;aAC7B;eACD;IACJ,CAAC","sourcesContent":["import type { IRawStyle } from '../MergeStyles';\n\nexport const HighContrastSelector = '@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)';\nexport const HighContrastSelectorWhite =\n // eslint-disable-next-line @fluentui/max-len\n '@media screen and (-ms-high-contrast: black-on-white), screen and (forced-colors: active) and (prefers-color-scheme: light)';\nexport const HighContrastSelectorBlack =\n // eslint-disable-next-line @fluentui/max-len\n '@media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark)';\n/**\n * @deprecated Use `HighContrastSelector`\n */\nexport const EdgeChromiumHighContrastSelector =\n '@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)';\n\nexport const ScreenWidthMinSmall = 320;\nexport const ScreenWidthMinMedium = 480;\nexport const ScreenWidthMinLarge = 640;\nexport const ScreenWidthMinXLarge = 1024;\nexport const ScreenWidthMinXXLarge = 1366;\nexport const ScreenWidthMinXXXLarge = 1920;\nexport const ScreenWidthMaxSmall = ScreenWidthMinMedium - 1;\nexport const ScreenWidthMaxMedium = ScreenWidthMinLarge - 1;\nexport const ScreenWidthMaxLarge = ScreenWidthMinXLarge - 1;\nexport const ScreenWidthMaxXLarge = ScreenWidthMinXXLarge - 1;\nexport const ScreenWidthMaxXXLarge = ScreenWidthMinXXXLarge - 1;\n\nexport const ScreenWidthMinUhfMobile = 768;\n\nexport function getScreenSelector(min: number | undefined, max: number | undefined): string {\n const minSelector = typeof min === 'number' ? ` and (min-width: ${min}px)` : '';\n const maxSelector = typeof max === 'number' ? ` and (max-width: ${max}px)` : '';\n return `@media only screen${minSelector}${maxSelector}`;\n}\n\n/**\n * The style which turns off high contrast adjustment in browsers.\n */\nexport function getHighContrastNoAdjustStyle(): IRawStyle {\n return {\n forcedColorAdjust: 'none',\n MsHighContrastAdjust: 'none',\n };\n}\n\n/**\n * The style which turns off high contrast adjustment in (only) Edge Chromium browser.\n * @deprecated Use `getHighContrastNoAdjustStyle`\n */\n// eslint-disable-next-line @typescript-eslint/no-deprecated\nexport function getEdgeChromiumNoHighContrastAdjustSelector(): { [EdgeChromiumHighContrastSelector]: IRawStyle } {\n return {\n // eslint-disable-next-line @typescript-eslint/no-deprecated\n [EdgeChromiumHighContrastSelector]: {\n forcedColorAdjust: 'none',\n MsHighContrastAdjust: 'none',\n },\n };\n}\n"]}
@@ -0,0 +1 @@
export { DefaultEffects } from '@fluentui/theme';
@@ -0,0 +1,7 @@
define(["require", "exports", "@fluentui/theme"], function (require, exports, theme_1) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.DefaultEffects = void 0;
Object.defineProperty(exports, "DefaultEffects", { enumerable: true, get: function () { return theme_1.DefaultEffects; } });
});
//# sourceMappingURL=DefaultEffects.js.map
@@ -0,0 +1 @@
{"version":3,"file":"DefaultEffects.js","sourceRoot":"../src/","sources":["styles/DefaultEffects.ts"],"names":[],"mappings":";;;;IAAS,uGAAA,cAAc,OAAA","sourcesContent":["export { DefaultEffects } from '@fluentui/theme';\n"]}
@@ -0,0 +1 @@
export { DefaultFontStyles, registerDefaultFontFaces } from '@fluentui/theme';
@@ -0,0 +1,8 @@
define(["require", "exports", "@fluentui/theme"], function (require, exports, theme_1) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.registerDefaultFontFaces = exports.DefaultFontStyles = void 0;
Object.defineProperty(exports, "DefaultFontStyles", { enumerable: true, get: function () { return theme_1.DefaultFontStyles; } });
Object.defineProperty(exports, "registerDefaultFontFaces", { enumerable: true, get: function () { return theme_1.registerDefaultFontFaces; } });
});
//# sourceMappingURL=DefaultFontStyles.js.map
@@ -0,0 +1 @@
{"version":3,"file":"DefaultFontStyles.js","sourceRoot":"../src/","sources":["styles/DefaultFontStyles.ts"],"names":[],"mappings":";;;;IAAS,0GAAA,iBAAiB,OAAA;IAAE,iHAAA,wBAAwB,OAAA","sourcesContent":["export { DefaultFontStyles, registerDefaultFontFaces } from '@fluentui/theme';\n"]}
@@ -0,0 +1 @@
export { DefaultPalette } from '@fluentui/theme';
@@ -0,0 +1,7 @@
define(["require", "exports", "@fluentui/theme"], function (require, exports, theme_1) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.DefaultPalette = void 0;
Object.defineProperty(exports, "DefaultPalette", { enumerable: true, get: function () { return theme_1.DefaultPalette; } });
});
//# sourceMappingURL=DefaultPalette.js.map
@@ -0,0 +1 @@
{"version":3,"file":"DefaultPalette.js","sourceRoot":"../src/","sources":["styles/DefaultPalette.ts"],"names":[],"mappings":";;;;IAAS,uGAAA,cAAc,OAAA","sourcesContent":["export { DefaultPalette } from '@fluentui/theme';\n"]}
@@ -0,0 +1 @@
export { DefaultSpacing } from '@fluentui/theme';
@@ -0,0 +1,7 @@
define(["require", "exports", "@fluentui/theme"], function (require, exports, theme_1) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.DefaultSpacing = void 0;
Object.defineProperty(exports, "DefaultSpacing", { enumerable: true, get: function () { return theme_1.DefaultSpacing; } });
});
//# sourceMappingURL=DefaultSpacing.js.map
@@ -0,0 +1 @@
{"version":3,"file":"DefaultSpacing.js","sourceRoot":"../src/","sources":["styles/DefaultSpacing.ts"],"names":[],"mappings":";;;;IAAS,uGAAA,cAAc,OAAA","sourcesContent":["export { DefaultSpacing } from '@fluentui/theme';\n"]}
@@ -0,0 +1,3 @@
import type { IRawStyle } from '@fluentui/merge-styles';
export declare const normalize: IRawStyle;
export declare const noWrap: IRawStyle;
+18
View File
@@ -0,0 +1,18 @@
define(["require", "exports"], function (require, exports) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.noWrap = exports.normalize = void 0;
// This file mimics styles and mixins from _General.Mixins.scss
exports.normalize = {
boxShadow: 'none',
margin: 0,
padding: 0,
boxSizing: 'border-box',
};
exports.noWrap = {
overflow: 'hidden',
textOverflow: 'ellipsis',
whiteSpace: 'nowrap',
};
});
//# sourceMappingURL=GeneralStyles.js.map
@@ -0,0 +1 @@
{"version":3,"file":"GeneralStyles.js","sourceRoot":"../src/","sources":["styles/GeneralStyles.ts"],"names":[],"mappings":";;;;IAEA,+DAA+D;IAClD,QAAA,SAAS,GAAc;QAClC,SAAS,EAAE,MAAM;QACjB,MAAM,EAAE,CAAC;QACT,OAAO,EAAE,CAAC;QACV,SAAS,EAAE,YAAY;KACxB,CAAC;IAEW,QAAA,MAAM,GAAc;QAC/B,QAAQ,EAAE,QAAQ;QAClB,YAAY,EAAE,UAAU;QACxB,UAAU,EAAE,QAAQ;KACrB,CAAC","sourcesContent":["import type { IRawStyle } from '@fluentui/merge-styles';\n\n// This file mimics styles and mixins from _General.Mixins.scss\nexport const normalize: IRawStyle = {\n boxShadow: 'none',\n margin: 0,\n padding: 0,\n boxSizing: 'border-box',\n};\n\nexport const noWrap: IRawStyle = {\n overflow: 'hidden',\n textOverflow: 'ellipsis',\n whiteSpace: 'nowrap',\n};\n"]}
@@ -0,0 +1,10 @@
import type { IRawStyle } from '@fluentui/merge-styles';
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 const PulsingBeaconAnimationStyles: {
continuousPulseAnimationDouble: typeof _continuousPulseAnimationDouble;
continuousPulseAnimationSingle: typeof _continuousPulseAnimationSingle;
createDefaultAnimation: typeof _createDefaultAnimation;
};
export {};
@@ -0,0 +1,85 @@
define(["require", "exports", "tslib", "@fluentui/merge-styles"], function (require, exports, tslib_1, merge_styles_1) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.PulsingBeaconAnimationStyles = void 0;
var DEFAULT_DURATION = '14s';
var DEFAULT_DELAY = '2s';
var DEFAULT_ITERATION_COUNT = '1';
function _continuousPulseStepOne(beaconColorOne, innerDimension) {
return {
borderColor: beaconColorOne,
borderWidth: '0px',
width: innerDimension,
height: innerDimension,
};
}
function _continuousPulseStepTwo(borderWidth) {
return {
opacity: 1,
borderWidth: borderWidth,
};
}
function _continuousPulseStepThree() {
return {
opacity: 1,
};
}
function _continuousPulseStepFour(beaconColorTwo, outerDimension) {
return {
borderWidth: '0',
width: outerDimension,
height: outerDimension,
opacity: 0,
borderColor: beaconColorTwo,
};
}
function _continuousPulseStepFive(beaconColorOne, innerDimension) {
return tslib_1.__assign(tslib_1.__assign({}, _continuousPulseStepOne(beaconColorOne, innerDimension)), {
opacity: 0,
});
}
function _continuousPulseAnimationDouble(beaconColorOne, beaconColorTwo, innerDimension, outerDimension, borderWidth) {
return (0, merge_styles_1.keyframes)({
'0%': _continuousPulseStepOne(beaconColorOne, innerDimension),
'1.42%': _continuousPulseStepTwo(borderWidth),
'3.57%': _continuousPulseStepThree(),
'7.14%': _continuousPulseStepFour(beaconColorTwo, outerDimension),
'8%': _continuousPulseStepFive(beaconColorOne, innerDimension),
'29.99%': _continuousPulseStepFive(beaconColorOne, innerDimension),
'30%': _continuousPulseStepOne(beaconColorOne, innerDimension),
'31.42%': _continuousPulseStepTwo(borderWidth),
'33.57%': _continuousPulseStepThree(),
'37.14%': _continuousPulseStepFour(beaconColorTwo, outerDimension),
'38%': _continuousPulseStepFive(beaconColorOne, innerDimension),
'79.42%': _continuousPulseStepFive(beaconColorOne, innerDimension),
'79.43': _continuousPulseStepOne(beaconColorOne, innerDimension),
'81.85': _continuousPulseStepTwo(borderWidth),
'83.42': _continuousPulseStepThree(),
'87%': _continuousPulseStepFour(beaconColorTwo, outerDimension),
'100%': {},
});
}
function _continuousPulseAnimationSingle(beaconColorOne, beaconColorTwo, innerDimension, outerDimension, borderWidth) {
return (0, merge_styles_1.keyframes)({
'0%': _continuousPulseStepOne(beaconColorOne, innerDimension),
'14.2%': _continuousPulseStepTwo(borderWidth),
'35.7%': _continuousPulseStepThree(),
'71.4%': _continuousPulseStepFour(beaconColorTwo, outerDimension),
'100%': {},
});
}
function _createDefaultAnimation(animationName, delayLength) {
return {
animationName: animationName,
animationIterationCount: DEFAULT_ITERATION_COUNT,
animationDuration: DEFAULT_DURATION,
animationDelay: delayLength || DEFAULT_DELAY,
};
}
exports.PulsingBeaconAnimationStyles = {
continuousPulseAnimationDouble: _continuousPulseAnimationDouble,
continuousPulseAnimationSingle: _continuousPulseAnimationSingle,
createDefaultAnimation: _createDefaultAnimation,
};
});
//# sourceMappingURL=PulsingBeaconAnimationStyles.js.map
File diff suppressed because one or more lines are too long
+1
View File
@@ -0,0 +1 @@
export { LocalizedFontNames, LocalizedFontFamilies, FontSizes, FontWeights, IconFontSizes, createFontStyles, } from '@fluentui/theme';
+12
View File
@@ -0,0 +1,12 @@
define(["require", "exports", "@fluentui/theme"], function (require, exports, theme_1) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.createFontStyles = exports.IconFontSizes = exports.FontWeights = exports.FontSizes = exports.LocalizedFontFamilies = exports.LocalizedFontNames = void 0;
Object.defineProperty(exports, "LocalizedFontNames", { enumerable: true, get: function () { return theme_1.LocalizedFontNames; } });
Object.defineProperty(exports, "LocalizedFontFamilies", { enumerable: true, get: function () { return theme_1.LocalizedFontFamilies; } });
Object.defineProperty(exports, "FontSizes", { enumerable: true, get: function () { return theme_1.FontSizes; } });
Object.defineProperty(exports, "FontWeights", { enumerable: true, get: function () { return theme_1.FontWeights; } });
Object.defineProperty(exports, "IconFontSizes", { enumerable: true, get: function () { return theme_1.IconFontSizes; } });
Object.defineProperty(exports, "createFontStyles", { enumerable: true, get: function () { return theme_1.createFontStyles; } });
});
//# sourceMappingURL=fonts.js.map
+1
View File
@@ -0,0 +1 @@
{"version":3,"file":"fonts.js","sourceRoot":"../src/","sources":["styles/fonts.ts"],"names":[],"mappings":";;;;IACE,2GAAA,kBAAkB,OAAA;IAClB,8GAAA,qBAAqB,OAAA;IACrB,kGAAA,SAAS,OAAA;IACT,oGAAA,WAAW,OAAA;IACX,sGAAA,aAAa,OAAA;IACb,yGAAA,gBAAgB,OAAA","sourcesContent":["export {\n LocalizedFontNames,\n LocalizedFontFamilies,\n FontSizes,\n FontWeights,\n IconFontSizes,\n createFontStyles,\n} from '@fluentui/theme';\n"]}
@@ -0,0 +1,56 @@
import type { IRawStyle } from '@fluentui/merge-styles';
import type { ITheme, ISemanticColors, IPalette } from '../interfaces/index';
/**
* - 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.
* <div className={classNames.parent}>
* <span className={classNames.content}>Overflown Content</span>
* </div>
* ```
* ```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;
@@ -0,0 +1,131 @@
define(["require", "exports"], function (require, exports) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.getFadedOverflowStyle = getFadedOverflowStyle;
var DEFAULT_HEIGHT = '50%';
var DEFAULT_WIDTH = 20;
/**
* - 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.
* <div className={classNames.parent}>
* <span className={classNames.content}>Overflown Content</span>
* </div>
* ```
* ```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.
*/
function getFadedOverflowStyle(theme, color, direction, width, height) {
if (color === void 0) { color = 'bodyBackground'; }
if (direction === void 0) { direction = 'horizontal'; }
if (width === void 0) { width = getDefaultValue('width', direction); }
if (height === void 0) { height = getDefaultValue('height', direction); }
// Get the color value string from the theme semanticColors or palette.
var colorValue = theme.semanticColors[color] || theme.palette[color];
// Get the red, green, blue values of the colorValue.
var rgbColor = color2rgb(colorValue);
// Apply opacity 0 to serve as a start color of the gradient.
var rgba = "rgba(".concat(rgbColor.r, ", ").concat(rgbColor.g, ", ").concat(rgbColor.b, ", 0)");
// Get the direction of the gradient. (mergeStyles takes care of RTL direction)
var gradientDirection = direction === 'vertical' ? 'to bottom' : 'to right';
return {
content: '""',
position: 'absolute',
right: 0,
bottom: 0,
width: width,
height: height,
pointerEvents: 'none',
backgroundImage: "linear-gradient(".concat(gradientDirection, ", ").concat(rgba, " 0%, ").concat(colorValue, " 100%)"),
};
}
// TODO consider moving this to a separate module along with some more color functions from OUFR/utilities.
/**
* Helper function to convert a string hex color to an RGB object.
*
* @param colorValue - Color to be converted from hex to rgba.
*/
function color2rgb(colorValue) {
if (colorValue[0] === '#') {
// If it's a hex code
return {
r: parseInt(colorValue.slice(1, 3), 16),
g: parseInt(colorValue.slice(3, 5), 16),
b: parseInt(colorValue.slice(5, 7), 16),
};
}
else if (colorValue.indexOf('rgba(') === 0) {
// If it's an rgba color string
colorValue = colorValue.match(/rgba\(([^)]+)\)/)[1];
var parts = colorValue.split(/ *, */).map(Number);
return {
r: parts[0],
g: parts[1],
b: parts[2],
};
}
// The only remaining possibility is transparent.
return {
r: 255,
g: 255,
b: 255,
};
}
/**
* Helper function to get the default values for parameters of main function.
*
* @param style - Which style to get the default value for.
* @param direction - What direction to take into consideration.
*/
function getDefaultValue(style, direction) {
if (style === 'width') {
return direction === 'horizontal' ? DEFAULT_WIDTH : '100%';
}
else {
return direction === 'vertical' ? DEFAULT_HEIGHT : '100%';
}
}
});
//# sourceMappingURL=getFadedOverflowStyle.js.map
File diff suppressed because one or more lines are too long
@@ -0,0 +1,51 @@
import type { IRawStyle } from '@fluentui/merge-styles';
import type { IGetFocusStylesOptions, ITheme } from '../interfaces/index';
/**
* 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.
* @param borderRadius - If the style should include a rounded border.
* @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, borderRadius?: string | number | undefined): IRawStyle;
/**
* Generates style to clear browser specific focus styles.
*/
export declare function focusClear(): 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 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;
+141
View File
@@ -0,0 +1,141 @@
define(["require", "exports", "./CommonStyles", "@fluentui/utilities", "./zIndexes"], function (require, exports, CommonStyles_1, utilities_1, zIndexes_1) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.getInputFocusStyle = void 0;
exports.getFocusStyle = getFocusStyle;
exports.focusClear = focusClear;
exports.getFocusOutlineStyle = getFocusOutlineStyle;
function getFocusStyle(theme, insetOrOptions, position, highContrastStyle, borderColor, outlineColor, isFocusedOnly, borderRadius) {
if (typeof insetOrOptions === 'number' || !insetOrOptions) {
return _getFocusStyleInternal(theme, {
inset: insetOrOptions,
position: position,
highContrastStyle: highContrastStyle,
borderColor: borderColor,
outlineColor: outlineColor,
isFocusedOnly: isFocusedOnly,
borderRadius: borderRadius,
});
}
else {
return _getFocusStyleInternal(theme, insetOrOptions);
}
}
function _getFocusStyleInternal(theme, options) {
var _a, _b;
if (options === void 0) { options = {}; }
var borderRadius = options.borderRadius, _c = options.inset, inset = _c === void 0 ? 0 : _c, _d = options.width, width = _d === void 0 ? 1 : _d, _e = options.position, position = _e === void 0 ? 'relative' : _e, highContrastStyle = options.highContrastStyle, _f = options.borderColor, borderColor = _f === void 0 ? theme.palette.white : _f, _g = options.outlineColor, outlineColor = _g === void 0 ? theme.palette.neutralSecondary : _g, _h = options.isFocusedOnly, isFocusedOnly = _h === void 0 ? true : _h, pointerEvents = options.pointerEvents;
return {
// Clear browser-specific focus styles and use 'transparent' as placeholder for focus style.
outline: 'transparent',
// Requirement because pseudo-element is absolutely positioned.
position: position,
selectors: (_a = {
// Clear the focus border in Firefox.
// Reference: http://stackoverflow.com/a/199319/1436671
'::-moz-focus-inner': {
border: '0',
}
},
// When the element that uses this mixin is in a :focus state, add a pseudo-element to
// create a border.
_a[".".concat(utilities_1.IsFocusVisibleClassName, " &").concat(isFocusedOnly ? ':focus' : '', ":after, :host(.").concat(utilities_1.IsFocusVisibleClassName, ") &").concat(isFocusedOnly ? ':focus' : '', ":after")] = {
content: '""',
position: 'absolute',
pointerEvents: pointerEvents,
left: inset + 1,
top: inset + 1,
bottom: inset + 1,
right: inset + 1,
border: "".concat(width, "px solid ").concat(borderColor),
outline: "".concat(width, "px solid ").concat(outlineColor),
zIndex: zIndexes_1.ZIndexes.FocusStyle,
borderRadius: borderRadius,
selectors: (_b = {},
_b[CommonStyles_1.HighContrastSelector] = highContrastStyle,
_b),
},
_a),
};
}
/**
* Generates style to clear browser specific focus styles.
*/
function focusClear() {
return {
selectors: {
'&::-moz-focus-inner': {
// Clear the focus border in Firefox. Reference: http://stackoverflow.com/a/199319/1436671
border: 0,
},
'&': {
// Clear browser specific focus styles and use transparent as placeholder for focus style
outline: 'transparent',
},
},
};
}
/**
* 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.
*/
function getFocusOutlineStyle(theme, inset, width, color) {
var _a;
if (inset === void 0) { inset = 0; }
if (width === void 0) { width = 1; }
return {
selectors: (_a = {},
_a[":global(".concat(utilities_1.IsFocusVisibleClassName, ") &:focus")] = {
outline: "".concat(width, " solid ").concat(color || theme.palette.neutralSecondary),
outlineOffset: "".concat(-inset, "px"),
},
_a),
};
}
/**
* 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.
*/
var getInputFocusStyle = function (borderColor, borderRadius, borderType, borderPosition) {
var _a, _b, _c;
if (borderType === void 0) { borderType = 'border'; }
if (borderPosition === void 0) { borderPosition = -1; }
var isBorderBottom = borderType === 'borderBottom';
return {
borderColor: borderColor,
selectors: {
':after': (_a = {
pointerEvents: 'none',
content: "''",
position: 'absolute',
left: isBorderBottom ? 0 : borderPosition,
top: borderPosition,
bottom: borderPosition,
right: isBorderBottom ? 0 : borderPosition
},
_a[borderType] = "2px solid ".concat(borderColor),
_a.borderRadius = borderRadius,
_a.width = borderType === 'borderBottom' ? '100%' : undefined,
_a.selectors = (_b = {},
_b[CommonStyles_1.HighContrastSelector] = (_c = {},
_c[borderType === 'border' ? 'borderColor' : 'borderBottomColor'] = 'Highlight',
_c),
_b),
_a),
},
};
};
exports.getInputFocusStyle = getInputFocusStyle;
});
//# sourceMappingURL=getFocusStyle.js.map
File diff suppressed because one or more lines are too long
@@ -0,0 +1,12 @@
import type { ITheme } from '../interfaces/index';
export type GlobalClassNames<IStyles> = Record<keyof IStyles, string>;
/**
* 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<T>(classNames: GlobalClassNames<T>, theme: ITheme, disableGlobalClassNames?: boolean): GlobalClassNames<T>;
@@ -0,0 +1,34 @@
define(["require", "exports", "@fluentui/merge-styles", "@fluentui/utilities"], function (require, exports, merge_styles_1, utilities_1) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.getGlobalClassNames = getGlobalClassNames;
/**
* Internal memoized function which simply takes in the class map and the
* disable boolean. These immutable values can be memoized.
*/
var _getGlobalClassNames = (0, utilities_1.memoizeFunction)(function (classNames, disableGlobalClassNames) {
var styleSheet = merge_styles_1.Stylesheet.getInstance();
if (disableGlobalClassNames) {
// disable global classnames
return Object.keys(classNames).reduce(function (acc, className) {
acc[className] = styleSheet.getClassName(classNames[className]);
return acc;
}, {});
}
// use global classnames
return classNames;
});
/**
* 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.
*/
function getGlobalClassNames(classNames, theme, disableGlobalClassNames) {
return _getGlobalClassNames(classNames, disableGlobalClassNames !== undefined ? disableGlobalClassNames : theme.disableGlobalClassNames);
}
});
//# sourceMappingURL=getGlobalClassNames.js.map
@@ -0,0 +1 @@
{"version":3,"file":"getGlobalClassNames.js","sourceRoot":"../src/","sources":["styles/getGlobalClassNames.ts"],"names":[],"mappings":";;;IAoCA,kDASC;IAvCD;;;OAGG;IACH,IAAM,oBAAoB,GAAG,IAAA,2BAAe,EAC1C,UAAI,UAA+B,EAAE,uBAAiC;QACpE,IAAM,UAAU,GAAG,yBAAU,CAAC,WAAW,EAAE,CAAC;QAE5C,IAAI,uBAAuB,EAAE,CAAC;YAC5B,4BAA4B;YAC5B,OAAQ,MAAM,CAAC,IAAI,CAAC,UAAU,CAAiB,CAAC,MAAM,CAAC,UAAC,GAAG,EAAE,SAAS;gBACpE,GAAG,CAAC,SAAS,CAAC,GAAG,UAAU,CAAC,YAAY,CAAC,UAAU,CAAC,SAAS,CAAC,CAAC,CAAC;gBAChE,OAAO,GAAG,CAAC;YACb,CAAC,EAAE,EAAyB,CAAC,CAAC;QAChC,CAAC;QAED,wBAAwB;QACxB,OAAO,UAAU,CAAC;IACpB,CAAC,CACF,CAAC;IAEF;;;;;;;;OAQG;IACH,SAAgB,mBAAmB,CACjC,UAA+B,EAC/B,KAAa,EACb,uBAAiC;QAEjC,OAAO,oBAAoB,CACzB,UAAU,EACV,uBAAuB,KAAK,SAAS,CAAC,CAAC,CAAC,uBAAuB,CAAC,CAAC,CAAC,KAAK,CAAC,uBAAuB,CAChG,CAAC;IACJ,CAAC","sourcesContent":["import { Stylesheet } from '@fluentui/merge-styles';\nimport { memoizeFunction } from '@fluentui/utilities';\nimport type { ITheme } from '../interfaces/index';\n\nexport type GlobalClassNames<IStyles> = Record<keyof IStyles, string>;\n\n/**\n * Internal memoized function which simply takes in the class map and the\n * disable boolean. These immutable values can be memoized.\n */\nconst _getGlobalClassNames = memoizeFunction(\n <T>(classNames: GlobalClassNames<T>, disableGlobalClassNames?: boolean): GlobalClassNames<T> => {\n const styleSheet = Stylesheet.getInstance();\n\n if (disableGlobalClassNames) {\n // disable global classnames\n return (Object.keys(classNames) as (keyof T)[]).reduce((acc, className) => {\n acc[className] = styleSheet.getClassName(classNames[className]);\n return acc;\n }, {} as GlobalClassNames<T>);\n }\n\n // use global classnames\n return classNames;\n },\n);\n\n/**\n * Checks for the `disableGlobalClassNames` property on the `theme` to determine if it should return `classNames`\n * Note that calls to this function are memoized.\n *\n * @param classNames - The collection of global class names that apply when the flag is false. Make sure to pass in\n * the same instance on each call to benefit from memoization.\n * @param theme - The theme to check the flag on\n * @param disableGlobalClassNames - Optional. Explicitly opt in/out of disabling global classnames. Defaults to false.\n */\nexport function getGlobalClassNames<T>(\n classNames: GlobalClassNames<T>,\n theme: ITheme,\n disableGlobalClassNames?: boolean,\n): GlobalClassNames<T> {\n return _getGlobalClassNames(\n classNames,\n disableGlobalClassNames !== undefined ? disableGlobalClassNames : theme.disableGlobalClassNames,\n );\n}\n"]}
@@ -0,0 +1,7 @@
import type { IStyle } from '@fluentui/merge-styles';
/**
* Generates placeholder style for each of the browsers supported by `@fluentui/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;
@@ -0,0 +1,20 @@
define(["require", "exports"], function (require, exports) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.getPlaceholderStyles = getPlaceholderStyles;
/**
* Generates placeholder style for each of the browsers supported by `@fluentui/react`.
* @param styles - The style to use.
* @returns The placeholder style object for each browser depending on the placeholder directive it uses.
*/
function getPlaceholderStyles(styles) {
return {
selectors: {
'::placeholder': styles, // Chrome, Safari, Opera, Firefox
':-ms-input-placeholder': styles, // IE 10+
'::-ms-input-placeholder': styles, // Edge
},
};
}
});
//# sourceMappingURL=getPlaceholderStyles.js.map
@@ -0,0 +1 @@
{"version":3,"file":"getPlaceholderStyles.js","sourceRoot":"../src/","sources":["styles/getPlaceholderStyles.ts"],"names":[],"mappings":";;;IAOA,oDAQC;IAbD;;;;OAIG;IACH,SAAgB,oBAAoB,CAAC,MAAc;QACjD,OAAO;YACL,SAAS,EAAE;gBACT,eAAe,EAAE,MAAM,EAAE,iCAAiC;gBAC1D,wBAAwB,EAAE,MAAM,EAAE,SAAS;gBAC3C,yBAAyB,EAAE,MAAM,EAAE,OAAO;aAC3C;SACF,CAAC;IACJ,CAAC","sourcesContent":["import type { IStyle } from '@fluentui/merge-styles';\n\n/**\n * Generates placeholder style for each of the browsers supported by `@fluentui/react`.\n * @param styles - The style to use.\n * @returns The placeholder style object for each browser depending on the placeholder directive it uses.\n */\nexport function getPlaceholderStyles(styles: IStyle): IStyle {\n return {\n selectors: {\n '::placeholder': styles, // Chrome, Safari, Opera, Firefox\n ':-ms-input-placeholder': styles, // IE 10+\n '::-ms-input-placeholder': styles, // Edge\n },\n };\n}\n"]}
@@ -0,0 +1,2 @@
import type { IRawStyle } from '@fluentui/merge-styles';
export declare const hiddenContentStyle: IRawStyle;
@@ -0,0 +1,16 @@
define(["require", "exports"], function (require, exports) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.hiddenContentStyle = void 0;
exports.hiddenContentStyle = {
position: 'absolute',
width: 1,
height: 1,
margin: -1,
padding: 0,
border: 0,
overflow: 'hidden',
whiteSpace: 'nowrap',
};
});
//# sourceMappingURL=hiddenContentStyle.js.map
@@ -0,0 +1 @@
{"version":3,"file":"hiddenContentStyle.js","sourceRoot":"../src/","sources":["styles/hiddenContentStyle.ts"],"names":[],"mappings":";;;;IAEa,QAAA,kBAAkB,GAAc;QAC3C,QAAQ,EAAE,UAAU;QACpB,KAAK,EAAE,CAAC;QACR,MAAM,EAAE,CAAC;QACT,MAAM,EAAE,CAAC,CAAC;QACV,OAAO,EAAE,CAAC;QACV,MAAM,EAAE,CAAC;QACT,QAAQ,EAAE,QAAQ;QAClB,UAAU,EAAE,QAAQ;KACrB,CAAC","sourcesContent":["import type { IRawStyle } from '@fluentui/merge-styles';\n\nexport const hiddenContentStyle: IRawStyle = {\n position: 'absolute',\n width: 1,\n height: 1,\n margin: -1,\n padding: 0,\n border: 0,\n overflow: 'hidden',\n whiteSpace: 'nowrap',\n};\n"]}
+17
View File
@@ -0,0 +1,17 @@
export { AnimationStyles, AnimationVariables } from './AnimationStyles';
export { DefaultPalette } from './DefaultPalette';
export { DefaultEffects } from './DefaultEffects';
export { DefaultFontStyles, registerDefaultFontFaces } from './DefaultFontStyles';
export { FontSizes, FontWeights, IconFontSizes, createFontStyles } from './fonts';
export * from './getFocusStyle';
export { hiddenContentStyle } from './hiddenContentStyle';
export { PulsingBeaconAnimationStyles } from './PulsingBeaconAnimationStyles';
export { getGlobalClassNames } from './getGlobalClassNames';
export * from './scheme';
export { ThemeSettingName, getTheme, loadTheme, createTheme, registerOnThemeChangeCallback, removeOnThemeChangeCallback, } from './theme';
export * from './CommonStyles';
export * from './GeneralStyles';
export * from './getFadedOverflowStyle';
export * from './getPlaceholderStyles';
export * from './zIndexes';
export type { GlobalClassNames } from './getGlobalClassNames';
+32
View File
@@ -0,0 +1,32 @@
define(["require", "exports", "tslib", "./AnimationStyles", "./DefaultPalette", "./DefaultEffects", "./DefaultFontStyles", "./fonts", "./getFocusStyle", "./hiddenContentStyle", "./PulsingBeaconAnimationStyles", "./getGlobalClassNames", "./scheme", "./theme", "./CommonStyles", "./GeneralStyles", "./getFadedOverflowStyle", "./getPlaceholderStyles", "./zIndexes"], function (require, exports, tslib_1, AnimationStyles_1, DefaultPalette_1, DefaultEffects_1, DefaultFontStyles_1, fonts_1, getFocusStyle_1, hiddenContentStyle_1, PulsingBeaconAnimationStyles_1, getGlobalClassNames_1, scheme_1, theme_1, CommonStyles_1, GeneralStyles_1, getFadedOverflowStyle_1, getPlaceholderStyles_1, zIndexes_1) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.removeOnThemeChangeCallback = exports.registerOnThemeChangeCallback = exports.createTheme = exports.loadTheme = exports.getTheme = exports.ThemeSettingName = exports.getGlobalClassNames = exports.PulsingBeaconAnimationStyles = exports.hiddenContentStyle = exports.createFontStyles = exports.IconFontSizes = exports.FontWeights = exports.FontSizes = exports.registerDefaultFontFaces = exports.DefaultFontStyles = exports.DefaultEffects = exports.DefaultPalette = exports.AnimationVariables = exports.AnimationStyles = void 0;
Object.defineProperty(exports, "AnimationStyles", { enumerable: true, get: function () { return AnimationStyles_1.AnimationStyles; } });
Object.defineProperty(exports, "AnimationVariables", { enumerable: true, get: function () { return AnimationStyles_1.AnimationVariables; } });
Object.defineProperty(exports, "DefaultPalette", { enumerable: true, get: function () { return DefaultPalette_1.DefaultPalette; } });
Object.defineProperty(exports, "DefaultEffects", { enumerable: true, get: function () { return DefaultEffects_1.DefaultEffects; } });
Object.defineProperty(exports, "DefaultFontStyles", { enumerable: true, get: function () { return DefaultFontStyles_1.DefaultFontStyles; } });
Object.defineProperty(exports, "registerDefaultFontFaces", { enumerable: true, get: function () { return DefaultFontStyles_1.registerDefaultFontFaces; } });
Object.defineProperty(exports, "FontSizes", { enumerable: true, get: function () { return fonts_1.FontSizes; } });
Object.defineProperty(exports, "FontWeights", { enumerable: true, get: function () { return fonts_1.FontWeights; } });
Object.defineProperty(exports, "IconFontSizes", { enumerable: true, get: function () { return fonts_1.IconFontSizes; } });
Object.defineProperty(exports, "createFontStyles", { enumerable: true, get: function () { return fonts_1.createFontStyles; } });
tslib_1.__exportStar(getFocusStyle_1, exports);
Object.defineProperty(exports, "hiddenContentStyle", { enumerable: true, get: function () { return hiddenContentStyle_1.hiddenContentStyle; } });
Object.defineProperty(exports, "PulsingBeaconAnimationStyles", { enumerable: true, get: function () { return PulsingBeaconAnimationStyles_1.PulsingBeaconAnimationStyles; } });
Object.defineProperty(exports, "getGlobalClassNames", { enumerable: true, get: function () { return getGlobalClassNames_1.getGlobalClassNames; } });
tslib_1.__exportStar(scheme_1, exports);
Object.defineProperty(exports, "ThemeSettingName", { enumerable: true, get: function () { return theme_1.ThemeSettingName; } });
Object.defineProperty(exports, "getTheme", { enumerable: true, get: function () { return theme_1.getTheme; } });
Object.defineProperty(exports, "loadTheme", { enumerable: true, get: function () { return theme_1.loadTheme; } });
Object.defineProperty(exports, "createTheme", { enumerable: true, get: function () { return theme_1.createTheme; } });
Object.defineProperty(exports, "registerOnThemeChangeCallback", { enumerable: true, get: function () { return theme_1.registerOnThemeChangeCallback; } });
Object.defineProperty(exports, "removeOnThemeChangeCallback", { enumerable: true, get: function () { return theme_1.removeOnThemeChangeCallback; } });
tslib_1.__exportStar(CommonStyles_1, exports);
tslib_1.__exportStar(GeneralStyles_1, exports);
tslib_1.__exportStar(getFadedOverflowStyle_1, exports);
tslib_1.__exportStar(getPlaceholderStyles_1, exports);
tslib_1.__exportStar(zIndexes_1, exports);
});
//# sourceMappingURL=index.js.map
+1
View File
@@ -0,0 +1 @@
{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["styles/index.ts"],"names":[],"mappings":";;;;IAAS,kHAAA,eAAe,OAAA;IAAE,qHAAA,kBAAkB,OAAA;IACnC,gHAAA,cAAc,OAAA;IACd,gHAAA,cAAc,OAAA;IACd,sHAAA,iBAAiB,OAAA;IAAE,6HAAA,wBAAwB,OAAA;IAC3C,kGAAA,SAAS,OAAA;IAAE,oGAAA,WAAW,OAAA;IAAE,sGAAA,aAAa,OAAA;IAAE,yGAAA,gBAAgB,OAAA;IAChE,+CAAgC;IACvB,wHAAA,kBAAkB,OAAA;IAClB,4IAAA,4BAA4B,OAAA;IAC5B,0HAAA,mBAAmB,OAAA;IAC5B,wCAAyB;IAEvB,yGAAA,gBAAgB,OAAA;IAChB,iGAAA,QAAQ,OAAA;IACR,kGAAA,SAAS,OAAA;IACT,oGAAA,WAAW,OAAA;IACX,sHAAA,6BAA6B,OAAA;IAC7B,oHAAA,2BAA2B,OAAA;IAE7B,8CAA+B;IAC/B,+CAAgC;IAChC,uDAAwC;IACxC,sDAAuC;IACvC,0CAA2B","sourcesContent":["export { AnimationStyles, AnimationVariables } from './AnimationStyles';\nexport { DefaultPalette } from './DefaultPalette';\nexport { DefaultEffects } from './DefaultEffects';\nexport { DefaultFontStyles, registerDefaultFontFaces } from './DefaultFontStyles';\nexport { FontSizes, FontWeights, IconFontSizes, createFontStyles } from './fonts';\nexport * from './getFocusStyle';\nexport { hiddenContentStyle } from './hiddenContentStyle';\nexport { PulsingBeaconAnimationStyles } from './PulsingBeaconAnimationStyles';\nexport { getGlobalClassNames } from './getGlobalClassNames';\nexport * from './scheme';\nexport {\n ThemeSettingName,\n getTheme,\n loadTheme,\n createTheme,\n registerOnThemeChangeCallback,\n removeOnThemeChangeCallback,\n} from './theme';\nexport * from './CommonStyles';\nexport * from './GeneralStyles';\nexport * from './getFadedOverflowStyle';\nexport * from './getPlaceholderStyles';\nexport * from './zIndexes';\nexport type { GlobalClassNames } from './getGlobalClassNames';\n"]}
+18
View File
@@ -0,0 +1,18 @@
import type { ICustomizerContext } from '@fluentui/utilities';
import type { ISchemeNames, ITheme } from '../interfaces/index';
/**
* @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;
+46
View File
@@ -0,0 +1,46 @@
define(["require", "exports", "@fluentui/utilities"], function (require, exports, utilities_1) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.getThemedContext = getThemedContext;
/**
* @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.
*/
function getThemedContext(context, scheme, theme) {
var newContext = context;
var newSettings;
// Only fall back to context and customizations when theme arg is not provided.
var schemeSource = theme || utilities_1.Customizations.getSettings(['theme'], undefined, context.customizations).theme;
if (theme) {
newSettings = { theme: theme };
}
var schemeTheme = scheme && schemeSource && schemeSource.schemes && schemeSource.schemes[scheme];
// These first two checks are logically redundant but TS doesn't infer schemeSource.schemes is defined
// when schemeTheme is defined.
if (schemeSource && schemeTheme && schemeSource !== schemeTheme) {
newSettings = { theme: schemeTheme };
newSettings.theme.schemes = schemeSource.schemes;
}
if (newSettings) {
newContext = {
customizations: {
settings: (0, utilities_1.mergeSettings)(context.customizations.settings, newSettings),
scopedSettings: context.customizations.scopedSettings,
},
};
}
return newContext;
}
});
//# sourceMappingURL=scheme.js.map
+1
View File
@@ -0,0 +1 @@
{"version":3,"file":"scheme.js","sourceRoot":"../src/","sources":["styles/scheme.ts"],"names":[],"mappings":";;;IAmBA,4CAmCC;IAlDD;;;;;;;;;;;;;;OAcG;IACH,SAAgB,gBAAgB,CAC9B,OAA2B,EAC3B,MAAqB,EACrB,KAAc;QAEd,IAAI,UAAU,GAAuB,OAAO,CAAC;QAC7C,IAAI,WAAW,CAAC;QAEhB,+EAA+E;QAC/E,IAAI,YAAY,GAAG,KAAK,IAAI,0BAAc,CAAC,WAAW,CAAC,CAAC,OAAO,CAAC,EAAE,SAAS,EAAE,OAAO,CAAC,cAAc,CAAC,CAAC,KAAK,CAAC;QAE3G,IAAI,KAAK,EAAE,CAAC;YACV,WAAW,GAAG,EAAE,KAAK,OAAA,EAAE,CAAC;QAC1B,CAAC;QAED,IAAM,WAAW,GACf,MAAM,IAAI,YAAY,IAAI,YAAY,CAAC,OAAO,IAAI,YAAY,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC;QAEjF,sGAAsG;QACtG,+BAA+B;QAC/B,IAAI,YAAY,IAAI,WAAW,IAAI,YAAY,KAAK,WAAW,EAAE,CAAC;YAChE,WAAW,GAAG,EAAE,KAAK,EAAE,WAAW,EAAE,CAAC;YACrC,WAAW,CAAC,KAAK,CAAC,OAAO,GAAG,YAAY,CAAC,OAAO,CAAC;QACnD,CAAC;QAED,IAAI,WAAW,EAAE,CAAC;YAChB,UAAU,GAAG;gBACX,cAAc,EAAE;oBACd,QAAQ,EAAE,IAAA,yBAAa,EAAC,OAAO,CAAC,cAAc,CAAC,QAAQ,EAAE,WAAW,CAAC;oBACrE,cAAc,EAAE,OAAO,CAAC,cAAc,CAAC,cAAc;iBACtD;aACF,CAAC;QACJ,CAAC;QAED,OAAO,UAAU,CAAC;IACpB,CAAC","sourcesContent":["import { Customizations, mergeSettings } from '@fluentui/utilities';\nimport type { ICustomizerContext } from '@fluentui/utilities';\nimport type { ISchemeNames, ITheme } from '../interfaces/index';\n\n/**\n * @internal\n * This function is still in experimental phase in support of Foundation experimental development.\n * Its API signature and existence are subject to change.\n *\n * Modify context to activate the specified scheme or theme. For schemes, look in context (if available) and fall back\n * to global Customizations. If both scheme and theme are specified, scheme will be looked up in theme. In this case,\n * scheme must be present in theme arg, otherwise new context will default to theme arg (there is no fallback to\n * settings to look up scheme.)\n *\n * @param context - Context in which to get schemed customizations.\n * @param scheme - Scheme to get customizations for from theme arg (if supplied) OR from context and global settings.\n * @param theme - Theme to merge into context.\n * @returns modified schemed context if scheme is valid and not already applied, unmodified context otherwise.\n */\nexport function getThemedContext(\n context: ICustomizerContext,\n scheme?: ISchemeNames,\n theme?: ITheme,\n): ICustomizerContext {\n let newContext: ICustomizerContext = context;\n let newSettings;\n\n // Only fall back to context and customizations when theme arg is not provided.\n let schemeSource = theme || Customizations.getSettings(['theme'], undefined, context.customizations).theme;\n\n if (theme) {\n newSettings = { theme };\n }\n\n const schemeTheme: ITheme | undefined =\n scheme && schemeSource && schemeSource.schemes && schemeSource.schemes[scheme];\n\n // These first two checks are logically redundant but TS doesn't infer schemeSource.schemes is defined\n // when schemeTheme is defined.\n if (schemeSource && schemeTheme && schemeSource !== schemeTheme) {\n newSettings = { theme: schemeTheme };\n newSettings.theme.schemes = schemeSource.schemes;\n }\n\n if (newSettings) {\n newContext = {\n customizations: {\n settings: mergeSettings(context.customizations.settings, newSettings),\n scopedSettings: context.customizations.scopedSettings,\n },\n };\n }\n\n return newContext;\n}\n"]}
+26
View File
@@ -0,0 +1,26 @@
import type { ITheme, IPartialTheme } from '../interfaces/index';
export { createTheme } from '@fluentui/theme';
export declare const ThemeSettingName = "theme";
export declare function initializeThemeInCustomizations(): void;
/**
* Gets the theme object
* @param depComments - Whether to include deprecated tags as comments for deprecated slots.
*/
export declare function getTheme(depComments?: boolean): ITheme;
/**
* 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;
/**
* 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;
+109
View File
@@ -0,0 +1,109 @@
define(["require", "exports", "tslib", "@fluentui/utilities", "@microsoft/load-themed-styles", "@fluentui/theme", "@fluentui/theme"], function (require, exports, tslib_1, utilities_1, load_themed_styles_1, theme_1, theme_2) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.ThemeSettingName = exports.createTheme = void 0;
exports.initializeThemeInCustomizations = initializeThemeInCustomizations;
exports.getTheme = getTheme;
exports.registerOnThemeChangeCallback = registerOnThemeChangeCallback;
exports.removeOnThemeChangeCallback = removeOnThemeChangeCallback;
exports.loadTheme = loadTheme;
Object.defineProperty(exports, "createTheme", { enumerable: true, get: function () { return theme_2.createTheme; } });
var _theme = (0, theme_1.createTheme)({});
var _onThemeChangeCallbacks = [];
exports.ThemeSettingName = 'theme';
function initializeThemeInCustomizations() {
var _a;
var _b, _c;
// eslint-disable-next-line @typescript-eslint/no-explicit-any
var win = (0, utilities_1.getWindow)();
if ((_b = win === null || win === void 0 ? void 0 : win.FabricConfig) === null || _b === void 0 ? void 0 : _b.legacyTheme) {
// does everything the `else` clause does and more, such as invoke legacy theming
loadTheme(win.FabricConfig.legacyTheme);
}
else if (!utilities_1.Customizations.getSettings([exports.ThemeSettingName]).theme) {
if ((_c = win === null || win === void 0 ? void 0 : win.FabricConfig) === null || _c === void 0 ? void 0 : _c.theme) {
_theme = (0, theme_1.createTheme)(win.FabricConfig.theme);
}
// Set the default theme.
utilities_1.Customizations.applySettings((_a = {}, _a[exports.ThemeSettingName] = _theme, _a));
}
}
initializeThemeInCustomizations();
/**
* Gets the theme object
* @param depComments - Whether to include deprecated tags as comments for deprecated slots.
*/
function getTheme(depComments) {
if (depComments === void 0) { depComments = false; }
if (depComments === true) {
_theme = (0, theme_1.createTheme)({}, depComments);
}
return _theme;
}
/**
* 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.
*/
function registerOnThemeChangeCallback(callback) {
if (_onThemeChangeCallbacks.indexOf(callback) === -1) {
_onThemeChangeCallbacks.push(callback);
}
}
/**
* See registerOnThemeChangeCallback().
* Removes previously registered callbacks.
*/
function removeOnThemeChangeCallback(callback) {
var i = _onThemeChangeCallbacks.indexOf(callback);
if (i === -1) {
return;
}
_onThemeChangeCallbacks.splice(i, 1);
}
/**
* 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.
*/
function loadTheme(theme, depComments) {
var _a;
if (depComments === void 0) { depComments = false; }
_theme = (0, theme_1.createTheme)(theme, depComments);
// Invoke the legacy method of theming the page as well.
(0, load_themed_styles_1.loadTheme)(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign({}, _theme.palette), _theme.semanticColors), _theme.effects), _loadFonts(_theme)));
utilities_1.Customizations.applySettings((_a = {}, _a[exports.ThemeSettingName] = _theme, _a));
_onThemeChangeCallbacks.forEach(function (callback) {
try {
callback(_theme);
}
catch (e) {
// don't let a bad callback break everything else
}
});
return _theme;
}
/**
* Loads font variables into a JSON object.
* @param theme - The theme object
*/
function _loadFonts(theme) {
var lines = {};
for (var _i = 0, _a = Object.keys(theme.fonts); _i < _a.length; _i++) {
var fontName = _a[_i];
var font = theme.fonts[fontName];
for (var _b = 0, _c = Object.keys(font); _b < _c.length; _b++) {
var propName = _c[_b];
var name_1 = fontName + propName.charAt(0).toUpperCase() + propName.slice(1);
var value = font[propName];
if (propName === 'fontSize' && typeof value === 'number') {
// if it's a number, convert it to px by default like our theming system does
value = value + 'px';
}
lines[name_1] = value;
}
}
return lines;
}
});
//# sourceMappingURL=theme.js.map
File diff suppressed because one or more lines are too long
+11
View File
@@ -0,0 +1,11 @@
export declare namespace ZIndexes {
const Nav: number;
/**
* @deprecated Do not use
*/
const ScrollablePane: number;
const FocusStyle: number;
const Coachmark: number;
const Layer: number;
const KeytipLayer: number;
}
+18
View File
@@ -0,0 +1,18 @@
define(["require", "exports"], function (require, exports) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.ZIndexes = void 0;
var ZIndexes;
(function (ZIndexes) {
ZIndexes.Nav = 1;
/**
* @deprecated Do not use
*/
ZIndexes.ScrollablePane = 1;
ZIndexes.FocusStyle = 1;
ZIndexes.Coachmark = 1000;
ZIndexes.Layer = 1000000;
ZIndexes.KeytipLayer = 1000001;
})(ZIndexes || (exports.ZIndexes = ZIndexes = {}));
});
//# sourceMappingURL=zIndexes.js.map
@@ -0,0 +1 @@
{"version":3,"file":"zIndexes.js","sourceRoot":"../src/","sources":["styles/zIndexes.ts"],"names":[],"mappings":";;;;IAAA,IAAiB,QAAQ,CAUxB;IAVD,WAAiB,QAAQ;QACV,YAAG,GAAW,CAAC,CAAC;QAC7B;;WAEG;QACU,uBAAc,GAAW,CAAC,CAAC;QAC3B,mBAAU,GAAW,CAAC,CAAC;QACvB,kBAAS,GAAW,IAAI,CAAC;QACzB,cAAK,GAAW,OAAO,CAAC;QACxB,oBAAW,GAAW,OAAO,CAAC;IAC7C,CAAC,EAVgB,QAAQ,wBAAR,QAAQ,QAUxB","sourcesContent":["export namespace ZIndexes {\n export const Nav: number = 1;\n /**\n * @deprecated Do not use\n */\n export const ScrollablePane: number = 1;\n export const FocusStyle: number = 1;\n export const Coachmark: number = 1000;\n export const Layer: number = 1000000;\n export const KeytipLayer: number = 1000001;\n}\n"]}
@@ -0,0 +1,9 @@
/**
* 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<T extends Object>(styles: T): {
[key in keyof T]?: string;
};
@@ -0,0 +1,35 @@
define(["require", "exports", "../MergeStyles"], function (require, exports, MergeStyles_1) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.buildClassMap = buildClassMap;
/**
* Builds a class names object from a given map.
*
* @param styles - Map of unprocessed styles.
* @returns Map of property name to class name.
*/
function buildClassMap(styles) {
var classes = {};
var _loop_1 = function (styleName) {
if (styles.hasOwnProperty(styleName)) {
var className_1;
Object.defineProperty(classes, styleName, {
get: function () {
if (className_1 === undefined) {
// eslint-disable-next-line @typescript-eslint/no-explicit-any
className_1 = (0, MergeStyles_1.mergeStyles)(styles[styleName]).toString();
}
return className_1;
},
enumerable: true,
configurable: true,
});
}
};
for (var styleName in styles) {
_loop_1(styleName);
}
return classes;
}
});
//# sourceMappingURL=buildClassMap.js.map
@@ -0,0 +1 @@
{"version":3,"file":"buildClassMap.js","sourceRoot":"../src/","sources":["utilities/buildClassMap.ts"],"names":[],"mappings":";;;IAQA,sCAsBC;IA5BD;;;;;OAKG;IACH,SAAgB,aAAa,CAAmB,MAAS;QACvD,IAAI,OAAO,GAAkC,EAAE,CAAC;gCAEvC,SAAS;YAChB,IAAI,MAAM,CAAC,cAAc,CAAC,SAAS,CAAC,EAAE,CAAC;gBACrC,IAAI,WAAiB,CAAC;gBAEtB,MAAM,CAAC,cAAc,CAAC,OAAO,EAAE,SAAS,EAAE;oBACxC,GAAG,EAAE;wBACH,IAAI,WAAS,KAAK,SAAS,EAAE,CAAC;4BAC5B,8DAA8D;4BAC9D,WAAS,GAAG,IAAA,yBAAW,EAAC,MAAM,CAAC,SAAS,CAAQ,CAAC,CAAC,QAAQ,EAAE,CAAC;wBAC/D,CAAC;wBACD,OAAO,WAAS,CAAC;oBACnB,CAAC;oBACD,UAAU,EAAE,IAAI;oBAChB,YAAY,EAAE,IAAI;iBACnB,CAAC,CAAC;YACL,CAAC;;QAfH,KAAK,IAAI,SAAS,IAAI,MAAM;oBAAnB,SAAS;SAgBjB;QAED,OAAO,OAAO,CAAC;IACjB,CAAC","sourcesContent":["import { mergeStyles } from '../MergeStyles';\n\n/**\n * Builds a class names object from a given map.\n *\n * @param styles - Map of unprocessed styles.\n * @returns Map of property name to class name.\n */\nexport function buildClassMap<T extends Object>(styles: T): { [key in keyof T]?: string } {\n let classes: { [key in keyof T]?: string } = {};\n\n for (let styleName in styles) {\n if (styles.hasOwnProperty(styleName)) {\n let className: string;\n\n Object.defineProperty(classes, styleName, {\n get: (): string => {\n if (className === undefined) {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n className = mergeStyles(styles[styleName] as any).toString();\n }\n return className;\n },\n enumerable: true,\n configurable: true,\n });\n }\n }\n\n return classes;\n}\n"]}

Some files were not shown because too many files have changed in this diff Show More