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
+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';
+2
View File
@@ -0,0 +1,2 @@
export { InjectionMode, Stylesheet, concatStyleSets, concatStyleSetsWithProps, fontFace, keyframes, mergeStyleSets, mergeStyles, } from '@fluentui/merge-styles';
//# sourceMappingURL=MergeStyles.js.map
+1
View File
@@ -0,0 +1 @@
{"version":3,"file":"MergeStyles.js","sourceRoot":"../src/","sources":["MergeStyles.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,aAAa,EACb,UAAU,EACV,eAAe,EACf,wBAAwB,EACxB,QAAQ,EACR,SAAS,EACT,cAAc,EACd,WAAW,GACZ,MAAM,wBAAwB,CAAC","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';
+2
View File
@@ -0,0 +1,2 @@
export * from './utilities/index';
//# sourceMappingURL=Utilities.js.map
+1
View File
@@ -0,0 +1 @@
{"version":3,"file":"Utilities.js","sourceRoot":"../src/","sources":["Utilities.ts"],"names":[],"mappings":"AAAA,cAAc,mBAAmB,CAAC","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";
+2
View File
@@ -0,0 +1,2 @@
export var 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":"AAAA,MAAM,CAAC,IAAM,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,7 @@
import { buildClassMap } from '../utilities/index';
import { AnimationStyles } from '../styles/index';
/**
* {@docCategory AnimationClassNames}
*/
export var AnimationClassNames = buildClassMap(AnimationStyles);
//# sourceMappingURL=AnimationClassNames.js.map
@@ -0,0 +1 @@
{"version":3,"file":"AnimationClassNames.js","sourceRoot":"../src/","sources":["classNames/AnimationClassNames.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AACnD,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAGlD;;GAEG;AACH,MAAM,CAAC,IAAM,mBAAmB,GAAiD,aAAa,CAAC,eAAe,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,36 @@
import { mergeStyles } from '@fluentui/merge-styles';
import { DefaultPalette } from '../styles/DefaultPalette';
import { getTheme } from '../styles/index';
export var ColorClassNames = {};
for (var colorName in DefaultPalette) {
if (DefaultPalette.hasOwnProperty(colorName)) {
// Foreground color
_defineGetter(ColorClassNames, colorName, '', false, 'color');
// Hover color
_defineGetter(ColorClassNames, colorName, 'Hover', true, 'color');
// Background color
_defineGetter(ColorClassNames, colorName, 'Background', false, 'background');
// Background hover
_defineGetter(ColorClassNames, colorName, 'BackgroundHover', true, 'background');
// Border color
_defineGetter(ColorClassNames, colorName, 'Border', false, 'borderColor');
// Border hover color
_defineGetter(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] = getTheme().palette[colorName], _a);
return 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,7 @@
import { buildClassMap } from '../utilities/buildClassMap';
import { DefaultFontStyles } from '../styles/DefaultFontStyles';
/**
* {@docCategory FontClassNames}
*/
export var FontClassNames = buildClassMap(DefaultFontStyles);
//# sourceMappingURL=FontClassNames.js.map
@@ -0,0 +1 @@
{"version":3,"file":"FontClassNames.js","sourceRoot":"../src/","sources":["classNames/FontClassNames.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAC;AAC3D,OAAO,EAAE,iBAAiB,EAAE,MAAM,6BAA6B,CAAC;AAGhE;;GAEG;AACH,MAAM,CAAC,IAAM,cAAc,GAA4C,aAAa,CAAC,iBAAiB,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';
+4
View File
@@ -0,0 +1,4 @@
export { AnimationClassNames } from './AnimationClassNames';
export { FontClassNames } from './FontClassNames';
export { ColorClassNames } from './ColorClassNames';
//# sourceMappingURL=index.js.map
+1
View File
@@ -0,0 +1 @@
{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["classNames/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC","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';
+16
View File
@@ -0,0 +1,16 @@
export { AnimationClassNames, FontClassNames, ColorClassNames } from './classNames/index';
export { AnimationStyles, AnimationVariables, DefaultPalette, DefaultEffects, DefaultFontStyles, registerDefaultFontFaces, FontSizes, FontWeights, IconFontSizes, createFontStyles, hiddenContentStyle, PulsingBeaconAnimationStyles, getGlobalClassNames,
// eslint-disable-next-line @typescript-eslint/no-deprecated
getFocusStyle, getFocusOutlineStyle, getInputFocusStyle, getThemedContext, focusClear, ThemeSettingName, getTheme, loadTheme, createTheme, registerOnThemeChangeCallback, removeOnThemeChangeCallback, HighContrastSelector, HighContrastSelectorWhite, HighContrastSelectorBlack,
// eslint-disable-next-line @typescript-eslint/no-deprecated
EdgeChromiumHighContrastSelector, ScreenWidthMinSmall, ScreenWidthMinMedium, ScreenWidthMinLarge, ScreenWidthMinXLarge, ScreenWidthMinXXLarge, ScreenWidthMinXXXLarge, ScreenWidthMaxSmall, ScreenWidthMaxMedium, ScreenWidthMaxLarge, ScreenWidthMaxXLarge, ScreenWidthMaxXXLarge, ScreenWidthMinUhfMobile, getScreenSelector, getHighContrastNoAdjustStyle,
// eslint-disable-next-line @typescript-eslint/no-deprecated
getEdgeChromiumNoHighContrastAdjustSelector, normalize, noWrap, getFadedOverflowStyle, getPlaceholderStyles, ZIndexes, } from './styles/index';
export { buildClassMap, getIcon, registerIcons, registerIconAlias, unregisterIcons, setIconOptions, getIconClassName, } from './utilities/index';
export { InjectionMode, Stylesheet, concatStyleSets, concatStyleSetsWithProps, fontFace, keyframes, mergeStyleSets, mergeStyles, } from './MergeStyles';
export { FLUENT_CDN_BASE_URL } from './cdn';
import './version';
// Ensure theme is initialized when this package is referenced.
import { initializeThemeInCustomizations } from './styles/theme';
initializeThemeInCustomizations();
//# sourceMappingURL=index.js.map
+1
View File
@@ -0,0 +1 @@
{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,cAAc,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAE1F,OAAO,EACL,eAAe,EACf,kBAAkB,EAClB,cAAc,EACd,cAAc,EACd,iBAAiB,EACjB,wBAAwB,EACxB,SAAS,EACT,WAAW,EACX,aAAa,EACb,gBAAgB,EAChB,kBAAkB,EAClB,4BAA4B,EAC5B,mBAAmB;AACnB,4DAA4D;AAC5D,aAAa,EACb,oBAAoB,EACpB,kBAAkB,EAClB,gBAAgB,EAChB,UAAU,EACV,gBAAgB,EAChB,QAAQ,EACR,SAAS,EACT,WAAW,EACX,6BAA6B,EAC7B,2BAA2B,EAC3B,oBAAoB,EACpB,yBAAyB,EACzB,yBAAyB;AACzB,4DAA4D;AAC5D,gCAAgC,EAChC,mBAAmB,EACnB,oBAAoB,EACpB,mBAAmB,EACnB,oBAAoB,EACpB,qBAAqB,EACrB,sBAAsB,EACtB,mBAAmB,EACnB,oBAAoB,EACpB,mBAAmB,EACnB,oBAAoB,EACpB,qBAAqB,EACrB,uBAAuB,EACvB,iBAAiB,EACjB,4BAA4B;AAC5B,4DAA4D;AAC5D,2CAA2C,EAC3C,SAAS,EACT,MAAM,EACN,qBAAqB,EACrB,oBAAoB,EACpB,QAAQ,GACT,MAAM,gBAAgB,CAAC;AAGxB,OAAO,EACL,aAAa,EACb,OAAO,EACP,aAAa,EACb,iBAAiB,EACjB,eAAe,EACf,cAAc,EACd,gBAAgB,GACjB,MAAM,mBAAmB,CAAC;AAmB3B,OAAO,EACL,aAAa,EACb,UAAU,EACV,eAAe,EACf,wBAAwB,EACxB,QAAQ,EACR,SAAS,EACT,cAAc,EACd,WAAW,GACZ,MAAM,eAAe,CAAC;AAcvB,OAAO,EAAE,mBAAmB,EAAE,MAAM,OAAO,CAAC;AAE5C,OAAO,WAAW,CAAC;AAEnB,+DAA+D;AAC/D,OAAO,EAAE,+BAA+B,EAAE,MAAM,gBAAgB,CAAC;AACjE,+BAA+B,EAAE,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,2 @@
export {};
//# 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,2 @@
export {};
//# 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';
+2
View File
@@ -0,0 +1,2 @@
export {};
//# sourceMappingURL=index.js.map
+1
View File
@@ -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';
+2
View File
@@ -0,0 +1,2 @@
export { AnimationStyles, AnimationVariables } from '@fluentui/theme';
//# sourceMappingURL=AnimationStyles.js.map
@@ -0,0 +1 @@
{"version":3,"file":"AnimationStyles.js","sourceRoot":"../src/","sources":["styles/AnimationStyles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC","sourcesContent":["export { AnimationStyles, AnimationVariables } from '@fluentui/theme';\n"]}
+32
View File
@@ -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;
};
+53
View File
@@ -0,0 +1,53 @@
export var HighContrastSelector = '@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)';
export var 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)';
export var 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`
*/
export var EdgeChromiumHighContrastSelector = '@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)';
export var ScreenWidthMinSmall = 320;
export var ScreenWidthMinMedium = 480;
export var ScreenWidthMinLarge = 640;
export var ScreenWidthMinXLarge = 1024;
export var ScreenWidthMinXXLarge = 1366;
export var ScreenWidthMinXXXLarge = 1920;
export var ScreenWidthMaxSmall = ScreenWidthMinMedium - 1;
export var ScreenWidthMaxMedium = ScreenWidthMinLarge - 1;
export var ScreenWidthMaxLarge = ScreenWidthMinXLarge - 1;
export var ScreenWidthMaxXLarge = ScreenWidthMinXXLarge - 1;
export var ScreenWidthMaxXXLarge = ScreenWidthMinXXXLarge - 1;
export var ScreenWidthMinUhfMobile = 768;
export 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.
*/
export 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
export function getEdgeChromiumNoHighContrastAdjustSelector() {
var _a;
return _a = {},
// eslint-disable-next-line @typescript-eslint/no-deprecated
_a[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":"AAEA,MAAM,CAAC,IAAM,oBAAoB,GAAG,mFAAmF,CAAC;AACxH,MAAM,CAAC,IAAM,yBAAyB;AACpC,6CAA6C;AAC7C,6HAA6H,CAAC;AAChI,MAAM,CAAC,IAAM,yBAAyB;AACpC,6CAA6C;AAC7C,4HAA4H,CAAC;AAC/H;;GAEG;AACH,MAAM,CAAC,IAAM,gCAAgC,GAC3C,mFAAmF,CAAC;AAEtF,MAAM,CAAC,IAAM,mBAAmB,GAAG,GAAG,CAAC;AACvC,MAAM,CAAC,IAAM,oBAAoB,GAAG,GAAG,CAAC;AACxC,MAAM,CAAC,IAAM,mBAAmB,GAAG,GAAG,CAAC;AACvC,MAAM,CAAC,IAAM,oBAAoB,GAAG,IAAI,CAAC;AACzC,MAAM,CAAC,IAAM,qBAAqB,GAAG,IAAI,CAAC;AAC1C,MAAM,CAAC,IAAM,sBAAsB,GAAG,IAAI,CAAC;AAC3C,MAAM,CAAC,IAAM,mBAAmB,GAAG,oBAAoB,GAAG,CAAC,CAAC;AAC5D,MAAM,CAAC,IAAM,oBAAoB,GAAG,mBAAmB,GAAG,CAAC,CAAC;AAC5D,MAAM,CAAC,IAAM,mBAAmB,GAAG,oBAAoB,GAAG,CAAC,CAAC;AAC5D,MAAM,CAAC,IAAM,oBAAoB,GAAG,qBAAqB,GAAG,CAAC,CAAC;AAC9D,MAAM,CAAC,IAAM,qBAAqB,GAAG,sBAAsB,GAAG,CAAC,CAAC;AAEhE,MAAM,CAAC,IAAM,uBAAuB,GAAG,GAAG,CAAC;AAE3C,MAAM,UAAU,iBAAiB,CAAC,GAAuB,EAAE,GAAuB;IAChF,IAAM,WAAW,GAAG,OAAO,GAAG,KAAK,QAAQ,CAAC,CAAC,CAAC,2BAAoB,GAAG,QAAK,CAAC,CAAC,CAAC,EAAE,CAAC;IAChF,IAAM,WAAW,GAAG,OAAO,GAAG,KAAK,QAAQ,CAAC,CAAC,CAAC,2BAAoB,GAAG,QAAK,CAAC,CAAC,CAAC,EAAE,CAAC;IAChF,OAAO,4BAAqB,WAAW,SAAG,WAAW,CAAE,CAAC;AAC1D,CAAC;AAED;;GAEG;AACH,MAAM,UAAU,4BAA4B;IAC1C,OAAO;QACL,iBAAiB,EAAE,MAAM;QACzB,oBAAoB,EAAE,MAAM;KAC7B,CAAC;AACJ,CAAC;AAED;;;GAGG;AACH,4DAA4D;AAC5D,MAAM,UAAU,2CAA2C;;IACzD;QACE,4DAA4D;QAC5D,GAAC,gCAAgC,IAAG;YAClC,iBAAiB,EAAE,MAAM;YACzB,oBAAoB,EAAE,MAAM;SAC7B;WACD;AACJ,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';
+2
View File
@@ -0,0 +1,2 @@
export { DefaultEffects } from '@fluentui/theme';
//# sourceMappingURL=DefaultEffects.js.map
@@ -0,0 +1 @@
{"version":3,"file":"DefaultEffects.js","sourceRoot":"../src/","sources":["styles/DefaultEffects.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC","sourcesContent":["export { DefaultEffects } from '@fluentui/theme';\n"]}
@@ -0,0 +1 @@
export { DefaultFontStyles, registerDefaultFontFaces } from '@fluentui/theme';
@@ -0,0 +1,2 @@
export { DefaultFontStyles, registerDefaultFontFaces } from '@fluentui/theme';
//# sourceMappingURL=DefaultFontStyles.js.map
@@ -0,0 +1 @@
{"version":3,"file":"DefaultFontStyles.js","sourceRoot":"../src/","sources":["styles/DefaultFontStyles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,wBAAwB,EAAE,MAAM,iBAAiB,CAAC","sourcesContent":["export { DefaultFontStyles, registerDefaultFontFaces } from '@fluentui/theme';\n"]}
@@ -0,0 +1 @@
export { DefaultPalette } from '@fluentui/theme';
+2
View File
@@ -0,0 +1,2 @@
export { DefaultPalette } from '@fluentui/theme';
//# sourceMappingURL=DefaultPalette.js.map
@@ -0,0 +1 @@
{"version":3,"file":"DefaultPalette.js","sourceRoot":"../src/","sources":["styles/DefaultPalette.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC","sourcesContent":["export { DefaultPalette } from '@fluentui/theme';\n"]}
@@ -0,0 +1 @@
export { DefaultSpacing } from '@fluentui/theme';
+2
View File
@@ -0,0 +1,2 @@
export { DefaultSpacing } from '@fluentui/theme';
//# sourceMappingURL=DefaultSpacing.js.map
@@ -0,0 +1 @@
{"version":3,"file":"DefaultSpacing.js","sourceRoot":"../src/","sources":["styles/DefaultSpacing.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC","sourcesContent":["export { DefaultSpacing } from '@fluentui/theme';\n"]}
+3
View File
@@ -0,0 +1,3 @@
import type { IRawStyle } from '@fluentui/merge-styles';
export declare const normalize: IRawStyle;
export declare const noWrap: IRawStyle;
+13
View File
@@ -0,0 +1,13 @@
// This file mimics styles and mixins from _General.Mixins.scss
export var normalize = {
boxShadow: 'none',
margin: 0,
padding: 0,
boxSizing: 'border-box',
};
export var 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":"AAEA,+DAA+D;AAC/D,MAAM,CAAC,IAAM,SAAS,GAAc;IAClC,SAAS,EAAE,MAAM;IACjB,MAAM,EAAE,CAAC;IACT,OAAO,EAAE,CAAC;IACV,SAAS,EAAE,YAAY;CACxB,CAAC;AAEF,MAAM,CAAC,IAAM,MAAM,GAAc;IAC/B,QAAQ,EAAE,QAAQ;IAClB,YAAY,EAAE,UAAU;IACxB,UAAU,EAAE,QAAQ;CACrB,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,82 @@
import { __assign } from "tslib";
import { keyframes } from '@fluentui/merge-styles';
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 __assign(__assign({}, _continuousPulseStepOne(beaconColorOne, innerDimension)), {
opacity: 0,
});
}
function _continuousPulseAnimationDouble(beaconColorOne, beaconColorTwo, innerDimension, outerDimension, borderWidth) {
return 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 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,
};
}
export var 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';
+2
View File
@@ -0,0 +1,2 @@
export { LocalizedFontNames, LocalizedFontFamilies, FontSizes, FontWeights, IconFontSizes, createFontStyles, } from '@fluentui/theme';
//# sourceMappingURL=fonts.js.map
+1
View File
@@ -0,0 +1 @@
{"version":3,"file":"fonts.js","sourceRoot":"../src/","sources":["styles/fonts.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,kBAAkB,EAClB,qBAAqB,EACrB,SAAS,EACT,WAAW,EACX,aAAa,EACb,gBAAgB,GACjB,MAAM,iBAAiB,CAAC","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,126 @@
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.
*/
export 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
+51
View File
@@ -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;
+135
View File
@@ -0,0 +1,135 @@
import { HighContrastSelector } from './CommonStyles';
import { IsFocusVisibleClassName } from '@fluentui/utilities';
import { ZIndexes } from './zIndexes';
export 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(IsFocusVisibleClassName, " &").concat(isFocusedOnly ? ':focus' : '', ":after, :host(.").concat(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.FocusStyle,
borderRadius: borderRadius,
selectors: (_b = {},
_b[HighContrastSelector] = highContrastStyle,
_b),
},
_a),
};
}
/**
* Generates style to clear browser specific focus styles.
*/
export 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.
*/
export 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(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.
*/
export 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[HighContrastSelector] = (_c = {},
_c[borderType === 'border' ? 'borderColor' : 'borderBottomColor'] = 'Highlight',
_c),
_b),
_a),
},
};
};
//# 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,31 @@
import { Stylesheet } from '@fluentui/merge-styles';
import { memoizeFunction } from '@fluentui/utilities';
/**
* Internal memoized function which simply takes in the class map and the
* disable boolean. These immutable values can be memoized.
*/
var _getGlobalClassNames = memoizeFunction(function (classNames, disableGlobalClassNames) {
var styleSheet = 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.
*/
export 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":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AACpD,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAKtD;;;GAGG;AACH,IAAM,oBAAoB,GAAG,eAAe,CAC1C,UAAI,UAA+B,EAAE,uBAAiC;IACpE,IAAM,UAAU,GAAG,UAAU,CAAC,WAAW,EAAE,CAAC;IAE5C,IAAI,uBAAuB,EAAE,CAAC;QAC5B,4BAA4B;QAC5B,OAAQ,MAAM,CAAC,IAAI,CAAC,UAAU,CAAiB,CAAC,MAAM,CAAC,UAAC,GAAG,EAAE,SAAS;YACpE,GAAG,CAAC,SAAS,CAAC,GAAG,UAAU,CAAC,YAAY,CAAC,UAAU,CAAC,SAAS,CAAC,CAAC,CAAC;YAChE,OAAO,GAAG,CAAC;QACb,CAAC,EAAE,EAAyB,CAAC,CAAC;IAChC,CAAC;IAED,wBAAwB;IACxB,OAAO,UAAU,CAAC;AACpB,CAAC,CACF,CAAC;AAEF;;;;;;;;GAQG;AACH,MAAM,UAAU,mBAAmB,CACjC,UAA+B,EAC/B,KAAa,EACb,uBAAiC;IAEjC,OAAO,oBAAoB,CACzB,UAAU,EACV,uBAAuB,KAAK,SAAS,CAAC,CAAC,CAAC,uBAAuB,CAAC,CAAC,CAAC,KAAK,CAAC,uBAAuB,CAChG,CAAC;AACJ,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,15 @@
/**
* 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 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":"AAEA;;;;GAIG;AACH,MAAM,UAAU,oBAAoB,CAAC,MAAc;IACjD,OAAO;QACL,SAAS,EAAE;YACT,eAAe,EAAE,MAAM,EAAE,iCAAiC;YAC1D,wBAAwB,EAAE,MAAM,EAAE,SAAS;YAC3C,yBAAyB,EAAE,MAAM,EAAE,OAAO;SAC3C;KACF,CAAC;AACJ,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,11 @@
export var 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":"AAEA,MAAM,CAAC,IAAM,kBAAkB,GAAc;IAC3C,QAAQ,EAAE,UAAU;IACpB,KAAK,EAAE,CAAC;IACR,MAAM,EAAE,CAAC;IACT,MAAM,EAAE,CAAC,CAAC;IACV,OAAO,EAAE,CAAC;IACV,MAAM,EAAE,CAAC;IACT,QAAQ,EAAE,QAAQ;IAClB,UAAU,EAAE,QAAQ;CACrB,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';
+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';
//# sourceMappingURL=index.js.map
+1
View File
@@ -0,0 +1 @@
{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["styles/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,kBAAkB,EAAE,MAAM,mBAAmB,CAAC;AACxE,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,iBAAiB,EAAE,wBAAwB,EAAE,MAAM,qBAAqB,CAAC;AAClF,OAAO,EAAE,SAAS,EAAE,WAAW,EAAE,aAAa,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAClF,cAAc,iBAAiB,CAAC;AAChC,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAC1D,OAAO,EAAE,4BAA4B,EAAE,MAAM,gCAAgC,CAAC;AAC9E,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAC5D,cAAc,UAAU,CAAC;AACzB,OAAO,EACL,gBAAgB,EAChB,QAAQ,EACR,SAAS,EACT,WAAW,EACX,6BAA6B,EAC7B,2BAA2B,GAC5B,MAAM,SAAS,CAAC;AACjB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,iBAAiB,CAAC;AAChC,cAAc,yBAAyB,CAAC;AACxC,cAAc,wBAAwB,CAAC;AACvC,cAAc,YAAY,CAAC","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;
+42
View File
@@ -0,0 +1,42 @@
import { Customizations, mergeSettings } from '@fluentui/utilities';
/**
* @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 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 || 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: 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":"AAAA,OAAO,EAAE,cAAc,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAIpE;;;;;;;;;;;;;;GAcG;AACH,MAAM,UAAU,gBAAgB,CAC9B,OAA2B,EAC3B,MAAqB,EACrB,KAAc;IAEd,IAAI,UAAU,GAAuB,OAAO,CAAC;IAC7C,IAAI,WAAW,CAAC;IAEhB,+EAA+E;IAC/E,IAAI,YAAY,GAAG,KAAK,IAAI,cAAc,CAAC,WAAW,CAAC,CAAC,OAAO,CAAC,EAAE,SAAS,EAAE,OAAO,CAAC,cAAc,CAAC,CAAC,KAAK,CAAC;IAE3G,IAAI,KAAK,EAAE,CAAC;QACV,WAAW,GAAG,EAAE,KAAK,OAAA,EAAE,CAAC;IAC1B,CAAC;IAED,IAAM,WAAW,GACf,MAAM,IAAI,YAAY,IAAI,YAAY,CAAC,OAAO,IAAI,YAAY,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC;IAEjF,sGAAsG;IACtG,+BAA+B;IAC/B,IAAI,YAAY,IAAI,WAAW,IAAI,YAAY,KAAK,WAAW,EAAE,CAAC;QAChE,WAAW,GAAG,EAAE,KAAK,EAAE,WAAW,EAAE,CAAC;QACrC,WAAW,CAAC,KAAK,CAAC,OAAO,GAAG,YAAY,CAAC,OAAO,CAAC;IACnD,CAAC;IAED,IAAI,WAAW,EAAE,CAAC;QAChB,UAAU,GAAG;YACX,cAAc,EAAE;gBACd,QAAQ,EAAE,aAAa,CAAC,OAAO,CAAC,cAAc,CAAC,QAAQ,EAAE,WAAW,CAAC;gBACrE,cAAc,EAAE,OAAO,CAAC,cAAc,CAAC,cAAc;aACtD;SACF,CAAC;IACJ,CAAC;IAED,OAAO,UAAU,CAAC;AACpB,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;
+103
View File
@@ -0,0 +1,103 @@
import { __assign } from "tslib";
import { Customizations, getWindow } from '@fluentui/utilities';
import { loadTheme as legacyLoadTheme } from '@microsoft/load-themed-styles';
import { createTheme } from '@fluentui/theme';
export { createTheme } from '@fluentui/theme';
var _theme = createTheme({});
var _onThemeChangeCallbacks = [];
export var ThemeSettingName = 'theme';
export function initializeThemeInCustomizations() {
var _a;
var _b, _c;
// eslint-disable-next-line @typescript-eslint/no-explicit-any
var win = 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 (!Customizations.getSettings([ThemeSettingName]).theme) {
if ((_c = win === null || win === void 0 ? void 0 : win.FabricConfig) === null || _c === void 0 ? void 0 : _c.theme) {
_theme = createTheme(win.FabricConfig.theme);
}
// Set the default theme.
Customizations.applySettings((_a = {}, _a[ThemeSettingName] = _theme, _a));
}
}
initializeThemeInCustomizations();
/**
* Gets the theme object
* @param depComments - Whether to include deprecated tags as comments for deprecated slots.
*/
export function getTheme(depComments) {
if (depComments === void 0) { depComments = false; }
if (depComments === true) {
_theme = 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.
*/
export function registerOnThemeChangeCallback(callback) {
if (_onThemeChangeCallbacks.indexOf(callback) === -1) {
_onThemeChangeCallbacks.push(callback);
}
}
/**
* See registerOnThemeChangeCallback().
* Removes previously registered callbacks.
*/
export 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.
*/
export function loadTheme(theme, depComments) {
var _a;
if (depComments === void 0) { depComments = false; }
_theme = createTheme(theme, depComments);
// Invoke the legacy method of theming the page as well.
legacyLoadTheme(__assign(__assign(__assign(__assign({}, _theme.palette), _theme.semanticColors), _theme.effects), _loadFonts(_theme)));
Customizations.applySettings((_a = {}, _a[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;
}
+13
View File
@@ -0,0 +1,13 @@
export 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 || (ZIndexes = {}));
//# sourceMappingURL=zIndexes.js.map
+1
View File
@@ -0,0 +1 @@
{"version":3,"file":"zIndexes.js","sourceRoot":"../src/","sources":["styles/zIndexes.ts"],"names":[],"mappings":"AAAA,MAAM,KAAW,QAAQ,CAUxB;AAVD,WAAiB,QAAQ;IACV,YAAG,GAAW,CAAC,CAAC;IAC7B;;OAEG;IACU,uBAAc,GAAW,CAAC,CAAC;IAC3B,mBAAU,GAAW,CAAC,CAAC;IACvB,kBAAS,GAAW,IAAI,CAAC;IACzB,cAAK,GAAW,OAAO,CAAC;IACxB,oBAAW,GAAW,OAAO,CAAC;AAC7C,CAAC,EAVgB,QAAQ,KAAR,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;
};
+31
View File
@@ -0,0 +1,31 @@
import { mergeStyles } from '../MergeStyles';
/**
* Builds a class names object from a given map.
*
* @param styles - Map of unprocessed styles.
* @returns Map of property name to class name.
*/
export 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 = 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":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAE7C;;;;;GAKG;AACH,MAAM,UAAU,aAAa,CAAmB,MAAS;IACvD,IAAI,OAAO,GAAkC,EAAE,CAAC;4BAEvC,SAAS;QAChB,IAAI,MAAM,CAAC,cAAc,CAAC,SAAS,CAAC,EAAE,CAAC;YACrC,IAAI,WAAiB,CAAC;YAEtB,MAAM,CAAC,cAAc,CAAC,OAAO,EAAE,SAAS,EAAE;gBACxC,GAAG,EAAE;oBACH,IAAI,WAAS,KAAK,SAAS,EAAE,CAAC;wBAC5B,8DAA8D;wBAC9D,WAAS,GAAG,WAAW,CAAC,MAAM,CAAC,SAAS,CAAQ,CAAC,CAAC,QAAQ,EAAE,CAAC;oBAC/D,CAAC;oBACD,OAAO,WAAS,CAAC;gBACnB,CAAC;gBACD,UAAU,EAAE,IAAI;gBAChB,YAAY,EAAE,IAAI;aACnB,CAAC,CAAC;QACL,CAAC;;IAfH,KAAK,IAAI,SAAS,IAAI,MAAM;gBAAnB,SAAS;KAgBjB;IAED,OAAO,OAAO,CAAC;AACjB,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"]}
@@ -0,0 +1,7 @@
/**
* 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;
@@ -0,0 +1,26 @@
import { mergeStyles } from '@fluentui/merge-styles';
import { getIcon } from './icons';
var defaultIconStyles = {
display: 'inline-block',
};
/**
* 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 function getIconClassName(name) {
var className = '';
var icon = getIcon(name);
if (icon) {
className = mergeStyles(icon.subset.className, defaultIconStyles, {
selectors: {
'::before': {
content: "\"".concat(icon.code, "\""),
},
},
});
}
return className;
}
//# sourceMappingURL=getIconClassName.js.map
@@ -0,0 +1 @@
{"version":3,"file":"getIconClassName.js","sourceRoot":"../src/","sources":["utilities/getIconClassName.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAC;AACrD,OAAO,EAAE,OAAO,EAAE,MAAM,SAAS,CAAC;AAGlC,IAAM,iBAAiB,GAAW;IAChC,OAAO,EAAE,cAAc;CACxB,CAAC;AAEF;;;;;GAKG;AACH,MAAM,UAAU,gBAAgB,CAAC,IAAY;IAC3C,IAAI,SAAS,GAAG,EAAE,CAAC;IACnB,IAAM,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IAE3B,IAAI,IAAI,EAAE,CAAC;QACT,SAAS,GAAG,WAAW,CAAC,IAAI,CAAC,MAAM,CAAC,SAAS,EAAE,iBAAiB,EAAE;YAChE,SAAS,EAAE;gBACT,UAAU,EAAE;oBACV,OAAO,EAAE,YAAI,IAAI,CAAC,IAAI,OAAG;iBAC1B;aACF;SACF,CAAC,CAAC;IACL,CAAC;IAED,OAAO,SAAS,CAAC;AACnB,CAAC","sourcesContent":["import { mergeStyles } from '@fluentui/merge-styles';\nimport { getIcon } from './icons';\nimport type { IStyle } from '@fluentui/merge-styles';\n\nconst defaultIconStyles: IStyle = {\n display: 'inline-block',\n};\n\n/**\n * Gets an icon classname. You should be able to add this classname to an I tag with no\n * additional classnames, and render the icon.\n *\n * @public\n */\nexport function getIconClassName(name: string): string {\n let className = '';\n const icon = getIcon(name);\n\n if (icon) {\n className = mergeStyles(icon.subset.className, defaultIconStyles, {\n selectors: {\n '::before': {\n content: `\"${icon.code}\"`,\n },\n },\n });\n }\n\n return className;\n}\n"]}
+80
View File
@@ -0,0 +1,80 @@
import type { IRawStyle, IFontFace } from '@fluentui/merge-styles';
import type { JSXElement } from '@fluentui/utilities';
export 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 interface IIconSubsetRecord extends IIconSubset {
isRegistered?: boolean;
className?: string;
}
export interface IIconRecord {
code: string | undefined;
subset: IIconSubsetRecord;
}
export 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 interface IIconRecords {
__options: IIconOptions;
__remapped: {
[key: string]: string;
};
[key: string]: IIconRecord | {};
}
/**
* Registers a given subset of icons.
*
* @param iconSubset - the icon subset definition.
*/
export declare function registerIcons(iconSubset: IIconSubset, options?: Partial<IIconOptions>): void;
/**
* Unregisters icons by name.
*
* @param iconNames - List of icons to unregister.
*/
export declare function unregisterIcons(iconNames: string[]): void;
/**
* Remaps one icon name to another.
*/
export declare function registerIconAlias(iconName: string, mappedToName: string): void;
/**
* 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;
/**
* Sets the icon options.
*
* @public
*/
export declare function setIconOptions(options: Partial<IIconOptions>): void;
+165
View File
@@ -0,0 +1,165 @@
import { __assign } from "tslib";
import { GlobalSettings, warn } from '@fluentui/utilities';
import { fontFace, mergeStyles, Stylesheet } from '@fluentui/merge-styles';
var ICON_SETTING_NAME = 'icons';
var _iconSettings = GlobalSettings.getValue(ICON_SETTING_NAME, {
__options: {
disableWarnings: false,
warnOnMissingIcons: true,
},
__remapped: {},
});
// Reset icon registration on stylesheet resets.
var stylesheet = Stylesheet.getInstance();
if (stylesheet && stylesheet.onReset) {
stylesheet.onReset(function () {
for (var name_1 in _iconSettings) {
if (_iconSettings.hasOwnProperty(name_1) && !!_iconSettings[name_1].subset) {
_iconSettings[name_1].subset.className = undefined;
}
}
});
}
/**
* Normalizes an icon name for consistent mapping.
* Current implementation is to convert the icon name to lower case.
*
* @param name - Icon name to normalize.
* @returns {string} Normalized icon name to use for indexing and mapping.
*/
var normalizeIconName = function (name) { return name.toLowerCase(); };
/**
* Registers a given subset of icons.
*
* @param iconSubset - the icon subset definition.
*/
export function registerIcons(iconSubset, options) {
var subset = __assign(__assign({}, iconSubset), { isRegistered: false, className: undefined });
var icons = iconSubset.icons;
// Grab options, optionally mix user provided ones on top.
options = options ? __assign(__assign({}, _iconSettings.__options), options) : _iconSettings.__options;
for (var iconName in icons) {
if (icons.hasOwnProperty(iconName)) {
var code = icons[iconName];
var normalizedIconName = normalizeIconName(iconName);
if (_iconSettings[normalizedIconName]) {
_warnDuplicateIcon(iconName);
}
else {
_iconSettings[normalizedIconName] = {
code: code,
subset: subset,
};
}
}
}
}
/**
* Unregisters icons by name.
*
* @param iconNames - List of icons to unregister.
*/
export function unregisterIcons(iconNames) {
var options = _iconSettings.__options;
var _loop_1 = function (iconName) {
var normalizedIconName = normalizeIconName(iconName);
if (_iconSettings[normalizedIconName]) {
delete _iconSettings[normalizedIconName];
}
else {
// Warn that we are trying to delete an icon that doesn't exist
if (!options.disableWarnings) {
warn("The icon \"".concat(iconName, "\" tried to unregister but was not registered."));
}
}
// Delete any aliases for this iconName
if (_iconSettings.__remapped[normalizedIconName]) {
delete _iconSettings.__remapped[normalizedIconName];
}
// Delete any items that were an alias for this iconName
Object.keys(_iconSettings.__remapped).forEach(function (key) {
if (_iconSettings.__remapped[key] === normalizedIconName) {
delete _iconSettings.__remapped[key];
}
});
};
for (var _i = 0, iconNames_1 = iconNames; _i < iconNames_1.length; _i++) {
var iconName = iconNames_1[_i];
_loop_1(iconName);
}
}
/**
* Remaps one icon name to another.
*/
export function registerIconAlias(iconName, mappedToName) {
_iconSettings.__remapped[normalizeIconName(iconName)] = normalizeIconName(mappedToName);
}
/**
* 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 function getIcon(name) {
var icon = undefined;
var options = _iconSettings.__options;
name = name ? normalizeIconName(name) : '';
name = _iconSettings.__remapped[name] || name;
if (name) {
icon = _iconSettings[name];
if (icon) {
var subset = icon.subset;
if (subset && subset.fontFace) {
if (!subset.isRegistered) {
fontFace(subset.fontFace);
subset.isRegistered = true;
}
if (!subset.className) {
subset.className = mergeStyles(subset.style, {
fontFamily: subset.fontFace.fontFamily,
fontWeight: subset.fontFace.fontWeight || 'normal',
fontStyle: subset.fontFace.fontStyle || 'normal',
});
}
}
}
else {
// eslint-disable-next-line @typescript-eslint/no-deprecated
if (!options.disableWarnings && options.warnOnMissingIcons) {
warn("The icon \"".concat(name, "\" was used but not registered. See https://github.com/microsoft/fluentui/wiki/Using-icons for more information."));
}
}
}
return icon;
}
/**
* Sets the icon options.
*
* @public
*/
export function setIconOptions(options) {
_iconSettings.__options = __assign(__assign({}, _iconSettings.__options), options);
}
var _missingIcons = [];
var _missingIconsTimer = undefined;
function _warnDuplicateIcon(iconName) {
var options = _iconSettings.__options;
var warningDelay = 2000;
var maxIconsInMessage = 10;
if (!options.disableWarnings) {
_missingIcons.push(iconName);
if (_missingIconsTimer === undefined) {
_missingIconsTimer = setTimeout(function () {
warn("Some icons were re-registered. Applications should only call registerIcons for any given " +
"icon once. Redefining what an icon is may have unintended consequences. Duplicates " +
"include: \n" +
_missingIcons.slice(0, maxIconsInMessage).join(', ') +
(_missingIcons.length > maxIconsInMessage ? " (+ ".concat(_missingIcons.length - maxIconsInMessage, " more)") : ''));
_missingIconsTimer = undefined;
_missingIcons = [];
}, warningDelay);
}
}
}
//# sourceMappingURL=icons.js.map
File diff suppressed because one or more lines are too long
+4
View File
@@ -0,0 +1,4 @@
export { buildClassMap } from './buildClassMap';
export { getIcon, registerIcons, registerIconAlias, unregisterIcons, setIconOptions } from './icons';
export { getIconClassName } from './getIconClassName';
export type { IIconRecord, IIconSubset, IIconSubsetRecord, IIconOptions } from './icons';
+4
View File
@@ -0,0 +1,4 @@
export { buildClassMap } from './buildClassMap';
export { getIcon, registerIcons, registerIconAlias, unregisterIcons, setIconOptions } from './icons';
export { getIconClassName } from './getIconClassName';
//# sourceMappingURL=index.js.map
+1
View File
@@ -0,0 +1 @@
{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["utilities/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAEhD,OAAO,EAAE,OAAO,EAAE,aAAa,EAAE,iBAAiB,EAAE,eAAe,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAErG,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC","sourcesContent":["export { buildClassMap } from './buildClassMap';\n\nexport { getIcon, registerIcons, registerIconAlias, unregisterIcons, setIconOptions } from './icons';\n\nexport { getIconClassName } from './getIconClassName';\nexport type { IIconRecord, IIconSubset, IIconSubsetRecord, IIconOptions } from './icons';\n"]}
+1
View File
@@ -0,0 +1 @@
export {};

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