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';
+13
View File
@@ -0,0 +1,13 @@
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.mergeStyles = exports.mergeStyleSets = exports.keyframes = exports.fontFace = exports.concatStyleSetsWithProps = exports.concatStyleSets = exports.Stylesheet = exports.InjectionMode = void 0;
var merge_styles_1 = require("@fluentui/merge-styles");
Object.defineProperty(exports, "InjectionMode", { enumerable: true, get: function () { return merge_styles_1.InjectionMode; } });
Object.defineProperty(exports, "Stylesheet", { enumerable: true, get: function () { return merge_styles_1.Stylesheet; } });
Object.defineProperty(exports, "concatStyleSets", { enumerable: true, get: function () { return merge_styles_1.concatStyleSets; } });
Object.defineProperty(exports, "concatStyleSetsWithProps", { enumerable: true, get: function () { return merge_styles_1.concatStyleSetsWithProps; } });
Object.defineProperty(exports, "fontFace", { enumerable: true, get: function () { return merge_styles_1.fontFace; } });
Object.defineProperty(exports, "keyframes", { enumerable: true, get: function () { return merge_styles_1.keyframes; } });
Object.defineProperty(exports, "mergeStyleSets", { enumerable: true, get: function () { return merge_styles_1.mergeStyleSets; } });
Object.defineProperty(exports, "mergeStyles", { enumerable: true, get: function () { return merge_styles_1.mergeStyles; } });
//# sourceMappingURL=MergeStyles.js.map
@@ -0,0 +1 @@
{"version":3,"file":"MergeStyles.js","sourceRoot":"../src/","sources":["MergeStyles.ts"],"names":[],"mappings":";;;AAAA,uDASgC;AAR9B,6GAAA,aAAa,OAAA;AACb,0GAAA,UAAU,OAAA;AACV,+GAAA,eAAe,OAAA;AACf,wHAAA,wBAAwB,OAAA;AACxB,wGAAA,QAAQ,OAAA;AACR,yGAAA,SAAS,OAAA;AACT,8GAAA,cAAc,OAAA;AACd,2GAAA,WAAW,OAAA","sourcesContent":["export {\n InjectionMode,\n Stylesheet,\n concatStyleSets,\n concatStyleSetsWithProps,\n fontFace,\n keyframes,\n mergeStyleSets,\n mergeStyles,\n} from '@fluentui/merge-styles';\nexport type {\n IFontFace,\n IFontWeight,\n IRawStyle,\n IStyle,\n IStyleSet,\n IStyleSetBase,\n IProcessedStyleSet,\n IStyleSheetConfig,\n ICSPSettings,\n ShadowConfig,\n} from '@fluentui/merge-styles';\n"]}
+1
View File
@@ -0,0 +1 @@
export * from './utilities/index';
+5
View File
@@ -0,0 +1,5 @@
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
tslib_1.__exportStar(require("./utilities/index"), exports);
//# sourceMappingURL=Utilities.js.map
+1
View File
@@ -0,0 +1 @@
{"version":3,"file":"Utilities.js","sourceRoot":"../src/","sources":["Utilities.ts"],"names":[],"mappings":";;;AAAA,4DAAkC","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";
+5
View File
@@ -0,0 +1,5 @@
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.FLUENT_CDN_BASE_URL = void 0;
exports.FLUENT_CDN_BASE_URL = 'https://res.cdn.office.net/files/fabric-cdn-prod_20260115.001';
//# sourceMappingURL=cdn.js.map
+1
View File
@@ -0,0 +1 @@
{"version":3,"file":"cdn.js","sourceRoot":"../src/","sources":["cdn.ts"],"names":[],"mappings":";;;AAAa,QAAA,mBAAmB,GAAG,+DAA+D,CAAC","sourcesContent":["export const FLUENT_CDN_BASE_URL = 'https://res.cdn.office.net/files/fabric-cdn-prod_20260115.001';\n"]}
@@ -0,0 +1,7 @@
import type { IAnimationStyles } from '../interfaces/index';
/**
* {@docCategory AnimationClassNames}
*/
export declare const AnimationClassNames: {
[key in keyof IAnimationStyles]?: string;
};
@@ -0,0 +1,10 @@
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.AnimationClassNames = void 0;
var index_1 = require("../utilities/index");
var index_2 = require("../styles/index");
/**
* {@docCategory AnimationClassNames}
*/
exports.AnimationClassNames = (0, index_1.buildClassMap)(index_2.AnimationStyles);
//# sourceMappingURL=AnimationClassNames.js.map
@@ -0,0 +1 @@
{"version":3,"file":"AnimationClassNames.js","sourceRoot":"../src/","sources":["classNames/AnimationClassNames.ts"],"names":[],"mappings":";;;AAAA,4CAAmD;AACnD,yCAAkD;AAGlD;;GAEG;AACU,QAAA,mBAAmB,GAAiD,IAAA,qBAAa,EAAC,uBAAe,CAAC,CAAC","sourcesContent":["import { buildClassMap } from '../utilities/index';\nimport { AnimationStyles } from '../styles/index';\nimport type { IAnimationStyles } from '../interfaces/index';\n\n/**\n * {@docCategory AnimationClassNames}\n */\nexport const AnimationClassNames: { [key in keyof IAnimationStyles]?: string } = buildClassMap(AnimationStyles);\n"]}
@@ -0,0 +1,294 @@
/**
* {@docCategory IColorClassNames}
*/
export interface IColorClassNames {
themeDarker: string;
themeDarkerHover: string;
themeDarkerBackground: string;
themeDarkerBackgroundHover: string;
themeDarkerBorder: string;
themeDarkerBorderHover: string;
themeDark: string;
themeDarkHover: string;
themeDarkBackground: string;
themeDarkBackgroundHover: string;
themeDarkBorder: string;
themeDarkBorderHover: string;
themeDarkAlt: string;
themeDarkAltHover: string;
themeDarkAltBackground: string;
themeDarkAltBackgroundHover: string;
themeDarkAltBorder: string;
themeDarkAltBorderHover: string;
themePrimary: string;
themePrimaryHover: string;
themePrimaryBackground: string;
themePrimaryBackgroundHover: string;
themePrimaryBorder: string;
themePrimaryBorderHover: string;
themeSecondary: string;
themeSecondaryHover: string;
themeSecondaryBackground: string;
themeSecondaryBackgroundHover: string;
themeSecondaryBorder: string;
themeSecondaryBorderHover: string;
themeTertiary: string;
themeTertiaryHover: string;
themeTertiaryBackground: string;
themeTertiaryBackgroundHover: string;
themeTertiaryBorder: string;
themeTertiaryBorderHover: string;
themeLight: string;
themeLightHover: string;
themeLightBackground: string;
themeLightBackgroundHover: string;
themeLightBorder: string;
themeLightBorderHover: string;
themeLighter: string;
themeLighterHover: string;
themeLighterBackground: string;
themeLighterBackgroundHover: string;
themeLighterBorder: string;
themeLighterBorderHover: string;
themeLighterAlt: string;
themeLighterAltHover: string;
themeLighterAltBackground: string;
themeLighterAltBackgroundHover: string;
themeLighterAltBorder: string;
themeLighterAltBorderHover: string;
black: string;
blackHover: string;
blackBackground: string;
blackBackgroundHover: string;
blackBorder: string;
blackBorderHover: string;
blackTranslucent40: string;
blackTranslucent40Hover: string;
blackTranslucent40Background: string;
blackTranslucent40BackgroundHover: string;
blackTranslucent40Border: string;
blackTranslucent40BorderHover: string;
neutralDark: string;
neutralDarkHover: string;
neutralDarkBackground: string;
neutralDarkBackgroundHover: string;
neutralDarkBorder: string;
neutralDarkBorderHover: string;
neutralPrimary: string;
neutralPrimaryHover: string;
neutralPrimaryBackground: string;
neutralPrimaryBackgroundHover: string;
neutralPrimaryBorder: string;
neutralPrimaryBorderHover: string;
neutralPrimaryAlt: string;
neutralPrimaryAltHover: string;
neutralPrimaryAltBackground: string;
neutralPrimaryAltBackgroundHover: string;
neutralPrimaryAltBorder: string;
neutralPrimaryAltBorderHover: string;
neutralSecondary: string;
neutralSecondaryHover: string;
neutralSecondaryBackground: string;
neutralSecondaryBackgroundHover: string;
neutralSecondaryBorder: string;
neutralSecondaryBorderHover: string;
neutralSecondaryAlt: string;
neutralSecondaryAltHover: string;
neutralSecondaryAltBackground: string;
neutralSecondaryAltBackgroundHover: string;
neutralSecondaryAltBorder: string;
neutralSecondaryAltBorderHover: string;
neutralTertiary: string;
neutralTertiaryHover: string;
neutralTertiaryBackground: string;
neutralTertiaryBackgroundHover: string;
neutralTertiaryBorder: string;
neutralTertiaryBorderHover: string;
neutralTertiaryAlt: string;
neutralTertiaryAltHover: string;
neutralTertiaryAltBackground: string;
neutralTertiaryAltBackgroundHover: string;
neutralTertiaryAltBorder: string;
neutralTertiaryAltBorderHover: string;
neutralQuaternary: string;
neutralQuaternaryHover: string;
neutralQuaternaryBackground: string;
neutralQuaternaryBackgroundHover: string;
neutralQuaternaryBorder: string;
neutralQuaternaryBorderHover: string;
neutralQuaternaryAlt: string;
neutralQuaternaryAltHover: string;
neutralQuaternaryAltBackground: string;
neutralQuaternaryAltBackgroundHover: string;
neutralQuaternaryAltBorder: string;
neutralQuaternaryAltBorderHover: string;
neutralLight: string;
neutralLightHover: string;
neutralLightBackground: string;
neutralLightBackgroundHover: string;
neutralLightBorder: string;
neutralLightBorderHover: string;
neutralLighter: string;
neutralLighterHover: string;
neutralLighterBackground: string;
neutralLighterBackgroundHover: string;
neutralLighterBorder: string;
neutralLighterBorderHover: string;
neutralLighterAlt: string;
neutralLighterAltHover: string;
neutralLighterAltBackground: string;
neutralLighterAltBackgroundHover: string;
neutralLighterAltBorder: string;
neutralLighterAltBorderHover: string;
white: string;
whiteHover: string;
whiteBackground: string;
whiteBackgroundHover: string;
whiteBorder: string;
whiteBorderHover: string;
whiteTranslucent40: string;
whiteTranslucent40Hover: string;
whiteTranslucent40Background: string;
whiteTranslucent40BackgroundHover: string;
whiteTranslucent40Border: string;
whiteTranslucent40BorderHover: string;
yellow: string;
yellowHover: string;
yellowBackground: string;
yellowBackgroundHover: string;
yellowBorder: string;
yellowBorderHover: string;
yellowLight: string;
yellowLightHover: string;
yellowLightBackground: string;
yellowLightBackgroundHover: string;
yellowLightBorder: string;
yellowLightBorderHover: string;
orange: string;
orangeHover: string;
orangeBackground: string;
orangeBackgroundHover: string;
orangeBorder: string;
orangeBorderHover: string;
orangeLight: string;
orangeLightHover: string;
orangeLightBackground: string;
orangeLightBackgroundHover: string;
orangeLightBorder: string;
orangeLightBorderHover: string;
orangeLighter: string;
orangeLighterHover: string;
orangeLighterBackground: string;
orangeLighterBackgroundHover: string;
orangeLighterBorder: string;
orangeLighterBorderHover: string;
redDark: string;
redDarkHover: string;
redDarkBackground: string;
redDarkBackgroundHover: string;
redDarkBorder: string;
redDarkBorderHover: string;
red: string;
redHover: string;
redBackground: string;
redBackgroundHover: string;
redBorder: string;
redBorderHover: string;
magentaDark: string;
magentaDarkHover: string;
magentaDarkBackground: string;
magentaDarkBackgroundHover: string;
magentaDarkBorder: string;
magentaDarkBorderHover: string;
magenta: string;
magentaHover: string;
magentaBackground: string;
magentaBackgroundHover: string;
magentaBorder: string;
magentaBorderHover: string;
magentaLight: string;
magentaLightHover: string;
magentaLightBackground: string;
magentaLightBackgroundHover: string;
magentaLightBorder: string;
magentaLightBorderHover: string;
purpleDark: string;
purpleDarkHover: string;
purpleDarkBackground: string;
purpleDarkBackgroundHover: string;
purpleDarkBorder: string;
purpleDarkBorderHover: string;
purple: string;
purpleHover: string;
purpleBackground: string;
purpleBackgroundHover: string;
purpleBorder: string;
purpleBorderHover: string;
purpleLight: string;
purpleLightHover: string;
purpleLightBackground: string;
purpleLightBackgroundHover: string;
purpleLightBorder: string;
purpleLightBorderHover: string;
blueDark: string;
blueDarkHover: string;
blueDarkBackground: string;
blueDarkBackgroundHover: string;
blueDarkBorder: string;
blueDarkBorderHover: string;
blueMid: string;
blueMidHover: string;
blueMidBackground: string;
blueMidBackgroundHover: string;
blueMidBorder: string;
blueMidBorderHover: string;
blue: string;
blueHover: string;
blueBackground: string;
blueBackgroundHover: string;
blueBorder: string;
blueBorderHover: string;
blueLight: string;
blueLightHover: string;
blueLightBackground: string;
blueLightBackgroundHover: string;
blueLightBorder: string;
blueLightBorderHover: string;
tealDark: string;
tealDarkHover: string;
tealDarkBackground: string;
tealDarkBackgroundHover: string;
tealDarkBorder: string;
tealDarkBorderHover: string;
teal: string;
tealHover: string;
tealBackground: string;
tealBackgroundHover: string;
tealBorder: string;
tealBorderHover: string;
tealLight: string;
tealLightHover: string;
tealLightBackground: string;
tealLightBackgroundHover: string;
tealLightBorder: string;
tealLightBorderHover: string;
greenDark: string;
greenDarkHover: string;
greenDarkBackground: string;
greenDarkBackgroundHover: string;
greenDarkBorder: string;
greenDarkBorderHover: string;
green: string;
greenHover: string;
greenBackground: string;
greenBackgroundHover: string;
greenBorder: string;
greenBorderHover: string;
greenLight: string;
greenLightHover: string;
greenLightBackground: string;
greenLightBackgroundHover: string;
greenLightBorder: string;
greenLightBorderHover: string;
}
export declare const ColorClassNames: IColorClassNames;
@@ -0,0 +1,39 @@
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.ColorClassNames = void 0;
var merge_styles_1 = require("@fluentui/merge-styles");
var DefaultPalette_1 = require("../styles/DefaultPalette");
var index_1 = require("../styles/index");
exports.ColorClassNames = {};
for (var colorName in DefaultPalette_1.DefaultPalette) {
if (DefaultPalette_1.DefaultPalette.hasOwnProperty(colorName)) {
// Foreground color
_defineGetter(exports.ColorClassNames, colorName, '', false, 'color');
// Hover color
_defineGetter(exports.ColorClassNames, colorName, 'Hover', true, 'color');
// Background color
_defineGetter(exports.ColorClassNames, colorName, 'Background', false, 'background');
// Background hover
_defineGetter(exports.ColorClassNames, colorName, 'BackgroundHover', true, 'background');
// Border color
_defineGetter(exports.ColorClassNames, colorName, 'Border', false, 'borderColor');
// Border hover color
_defineGetter(exports.ColorClassNames, colorName, 'BorderHover', true, 'borderColor');
}
}
/**
* Defines a getter for the given class configuration.
*/
function _defineGetter(obj, colorName, suffix, isHover, cssProperty) {
Object.defineProperty(obj, colorName + suffix, {
get: function () {
var _a;
// eslint-disable-next-line @typescript-eslint/no-explicit-any
var style = (_a = {}, _a[cssProperty] = (0, index_1.getTheme)().palette[colorName], _a);
return (0, merge_styles_1.mergeStyles)(isHover ? { selectors: { ':hover': style } } : style).toString();
},
enumerable: true,
configurable: true,
});
}
//# sourceMappingURL=ColorClassNames.js.map
File diff suppressed because one or more lines are too long
@@ -0,0 +1,7 @@
import type { IFontStyles } from '../interfaces/index';
/**
* {@docCategory FontClassNames}
*/
export declare const FontClassNames: {
[key in keyof IFontStyles]?: string;
};
@@ -0,0 +1,10 @@
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.FontClassNames = void 0;
var buildClassMap_1 = require("../utilities/buildClassMap");
var DefaultFontStyles_1 = require("../styles/DefaultFontStyles");
/**
* {@docCategory FontClassNames}
*/
exports.FontClassNames = (0, buildClassMap_1.buildClassMap)(DefaultFontStyles_1.DefaultFontStyles);
//# sourceMappingURL=FontClassNames.js.map
@@ -0,0 +1 @@
{"version":3,"file":"FontClassNames.js","sourceRoot":"../src/","sources":["classNames/FontClassNames.ts"],"names":[],"mappings":";;;AAAA,4DAA2D;AAC3D,iEAAgE;AAGhE;;GAEG;AACU,QAAA,cAAc,GAA4C,IAAA,6BAAa,EAAC,qCAAiB,CAAC,CAAC","sourcesContent":["import { buildClassMap } from '../utilities/buildClassMap';\nimport { DefaultFontStyles } from '../styles/DefaultFontStyles';\nimport type { IFontStyles } from '../interfaces/index';\n\n/**\n * {@docCategory FontClassNames}\n */\nexport const FontClassNames: { [key in keyof IFontStyles]?: string } = buildClassMap(DefaultFontStyles);\n"]}
@@ -0,0 +1,3 @@
export { AnimationClassNames } from './AnimationClassNames';
export { FontClassNames } from './FontClassNames';
export { ColorClassNames } from './ColorClassNames';
@@ -0,0 +1,10 @@
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.ColorClassNames = exports.FontClassNames = exports.AnimationClassNames = void 0;
var AnimationClassNames_1 = require("./AnimationClassNames");
Object.defineProperty(exports, "AnimationClassNames", { enumerable: true, get: function () { return AnimationClassNames_1.AnimationClassNames; } });
var FontClassNames_1 = require("./FontClassNames");
Object.defineProperty(exports, "FontClassNames", { enumerable: true, get: function () { return FontClassNames_1.FontClassNames; } });
var ColorClassNames_1 = require("./ColorClassNames");
Object.defineProperty(exports, "ColorClassNames", { enumerable: true, get: function () { return ColorClassNames_1.ColorClassNames; } });
//# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["classNames/index.ts"],"names":[],"mappings":";;;AAAA,6DAA4D;AAAnD,0HAAA,mBAAmB,OAAA;AAC5B,mDAAkD;AAAzC,gHAAA,cAAc,OAAA;AACvB,qDAAoD;AAA3C,kHAAA,eAAe,OAAA","sourcesContent":["export { AnimationClassNames } from './AnimationClassNames';\nexport { FontClassNames } from './FontClassNames';\nexport { ColorClassNames } from './ColorClassNames';\n"]}
+10
View File
@@ -0,0 +1,10 @@
export { AnimationClassNames, FontClassNames, ColorClassNames } from './classNames/index';
export { AnimationStyles, AnimationVariables, DefaultPalette, DefaultEffects, DefaultFontStyles, registerDefaultFontFaces, FontSizes, FontWeights, IconFontSizes, createFontStyles, hiddenContentStyle, PulsingBeaconAnimationStyles, getGlobalClassNames, getFocusStyle, getFocusOutlineStyle, getInputFocusStyle, getThemedContext, focusClear, ThemeSettingName, getTheme, loadTheme, createTheme, registerOnThemeChangeCallback, removeOnThemeChangeCallback, HighContrastSelector, HighContrastSelectorWhite, HighContrastSelectorBlack, EdgeChromiumHighContrastSelector, ScreenWidthMinSmall, ScreenWidthMinMedium, ScreenWidthMinLarge, ScreenWidthMinXLarge, ScreenWidthMinXXLarge, ScreenWidthMinXXXLarge, ScreenWidthMaxSmall, ScreenWidthMaxMedium, ScreenWidthMaxLarge, ScreenWidthMaxXLarge, ScreenWidthMaxXXLarge, ScreenWidthMinUhfMobile, getScreenSelector, getHighContrastNoAdjustStyle, getEdgeChromiumNoHighContrastAdjustSelector, normalize, noWrap, getFadedOverflowStyle, getPlaceholderStyles, ZIndexes, } from './styles/index';
export type { GlobalClassNames } from './styles/index';
export { buildClassMap, getIcon, registerIcons, registerIconAlias, unregisterIcons, setIconOptions, getIconClassName, } from './utilities/index';
export type { IIconRecord, IIconSubset, IIconSubsetRecord, IIconOptions } from './utilities/index';
export type { IAnimationStyles, IAnimationVariables, IGetFocusStylesOptions, IEffects, IFontStyles, IPalette, ISemanticColors, ISemanticTextColors, ISpacing, ITheme, IPartialTheme, IScheme, ISchemeNames, } from './interfaces/index';
export { InjectionMode, Stylesheet, concatStyleSets, concatStyleSetsWithProps, fontFace, keyframes, mergeStyleSets, mergeStyles, } from './MergeStyles';
export type { IFontFace, IFontWeight, IRawStyle, IStyle, IStyleSet, IStyleSetBase, IProcessedStyleSet, IStyleSheetConfig, ICSPSettings, ShadowConfig, } from './MergeStyles';
export { FLUENT_CDN_BASE_URL } from './cdn';
import './version';
+84
View File
@@ -0,0 +1,84 @@
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.getPlaceholderStyles = exports.getFadedOverflowStyle = exports.noWrap = exports.normalize = exports.getEdgeChromiumNoHighContrastAdjustSelector = exports.getHighContrastNoAdjustStyle = exports.getScreenSelector = exports.ScreenWidthMinUhfMobile = exports.ScreenWidthMaxXXLarge = exports.ScreenWidthMaxXLarge = exports.ScreenWidthMaxLarge = exports.ScreenWidthMaxMedium = exports.ScreenWidthMaxSmall = exports.ScreenWidthMinXXXLarge = exports.ScreenWidthMinXXLarge = exports.ScreenWidthMinXLarge = exports.ScreenWidthMinLarge = exports.ScreenWidthMinMedium = exports.ScreenWidthMinSmall = exports.EdgeChromiumHighContrastSelector = exports.HighContrastSelectorBlack = exports.HighContrastSelectorWhite = exports.HighContrastSelector = exports.removeOnThemeChangeCallback = exports.registerOnThemeChangeCallback = exports.createTheme = exports.loadTheme = exports.getTheme = exports.ThemeSettingName = exports.focusClear = exports.getThemedContext = exports.getInputFocusStyle = exports.getFocusOutlineStyle = exports.getFocusStyle = exports.getGlobalClassNames = exports.PulsingBeaconAnimationStyles = exports.hiddenContentStyle = exports.createFontStyles = exports.IconFontSizes = exports.FontWeights = exports.FontSizes = exports.registerDefaultFontFaces = exports.DefaultFontStyles = exports.DefaultEffects = exports.DefaultPalette = exports.AnimationVariables = exports.AnimationStyles = exports.ColorClassNames = exports.FontClassNames = exports.AnimationClassNames = void 0;
exports.FLUENT_CDN_BASE_URL = exports.mergeStyles = exports.mergeStyleSets = exports.keyframes = exports.fontFace = exports.concatStyleSetsWithProps = exports.concatStyleSets = exports.Stylesheet = exports.InjectionMode = exports.getIconClassName = exports.setIconOptions = exports.unregisterIcons = exports.registerIconAlias = exports.registerIcons = exports.getIcon = exports.buildClassMap = exports.ZIndexes = void 0;
var index_1 = require("./classNames/index");
Object.defineProperty(exports, "AnimationClassNames", { enumerable: true, get: function () { return index_1.AnimationClassNames; } });
Object.defineProperty(exports, "FontClassNames", { enumerable: true, get: function () { return index_1.FontClassNames; } });
Object.defineProperty(exports, "ColorClassNames", { enumerable: true, get: function () { return index_1.ColorClassNames; } });
var index_2 = require("./styles/index");
Object.defineProperty(exports, "AnimationStyles", { enumerable: true, get: function () { return index_2.AnimationStyles; } });
Object.defineProperty(exports, "AnimationVariables", { enumerable: true, get: function () { return index_2.AnimationVariables; } });
Object.defineProperty(exports, "DefaultPalette", { enumerable: true, get: function () { return index_2.DefaultPalette; } });
Object.defineProperty(exports, "DefaultEffects", { enumerable: true, get: function () { return index_2.DefaultEffects; } });
Object.defineProperty(exports, "DefaultFontStyles", { enumerable: true, get: function () { return index_2.DefaultFontStyles; } });
Object.defineProperty(exports, "registerDefaultFontFaces", { enumerable: true, get: function () { return index_2.registerDefaultFontFaces; } });
Object.defineProperty(exports, "FontSizes", { enumerable: true, get: function () { return index_2.FontSizes; } });
Object.defineProperty(exports, "FontWeights", { enumerable: true, get: function () { return index_2.FontWeights; } });
Object.defineProperty(exports, "IconFontSizes", { enumerable: true, get: function () { return index_2.IconFontSizes; } });
Object.defineProperty(exports, "createFontStyles", { enumerable: true, get: function () { return index_2.createFontStyles; } });
Object.defineProperty(exports, "hiddenContentStyle", { enumerable: true, get: function () { return index_2.hiddenContentStyle; } });
Object.defineProperty(exports, "PulsingBeaconAnimationStyles", { enumerable: true, get: function () { return index_2.PulsingBeaconAnimationStyles; } });
Object.defineProperty(exports, "getGlobalClassNames", { enumerable: true, get: function () { return index_2.getGlobalClassNames; } });
// eslint-disable-next-line @typescript-eslint/no-deprecated
Object.defineProperty(exports, "getFocusStyle", { enumerable: true, get: function () { return index_2.getFocusStyle; } });
Object.defineProperty(exports, "getFocusOutlineStyle", { enumerable: true, get: function () { return index_2.getFocusOutlineStyle; } });
Object.defineProperty(exports, "getInputFocusStyle", { enumerable: true, get: function () { return index_2.getInputFocusStyle; } });
Object.defineProperty(exports, "getThemedContext", { enumerable: true, get: function () { return index_2.getThemedContext; } });
Object.defineProperty(exports, "focusClear", { enumerable: true, get: function () { return index_2.focusClear; } });
Object.defineProperty(exports, "ThemeSettingName", { enumerable: true, get: function () { return index_2.ThemeSettingName; } });
Object.defineProperty(exports, "getTheme", { enumerable: true, get: function () { return index_2.getTheme; } });
Object.defineProperty(exports, "loadTheme", { enumerable: true, get: function () { return index_2.loadTheme; } });
Object.defineProperty(exports, "createTheme", { enumerable: true, get: function () { return index_2.createTheme; } });
Object.defineProperty(exports, "registerOnThemeChangeCallback", { enumerable: true, get: function () { return index_2.registerOnThemeChangeCallback; } });
Object.defineProperty(exports, "removeOnThemeChangeCallback", { enumerable: true, get: function () { return index_2.removeOnThemeChangeCallback; } });
Object.defineProperty(exports, "HighContrastSelector", { enumerable: true, get: function () { return index_2.HighContrastSelector; } });
Object.defineProperty(exports, "HighContrastSelectorWhite", { enumerable: true, get: function () { return index_2.HighContrastSelectorWhite; } });
Object.defineProperty(exports, "HighContrastSelectorBlack", { enumerable: true, get: function () { return index_2.HighContrastSelectorBlack; } });
// eslint-disable-next-line @typescript-eslint/no-deprecated
Object.defineProperty(exports, "EdgeChromiumHighContrastSelector", { enumerable: true, get: function () { return index_2.EdgeChromiumHighContrastSelector; } });
Object.defineProperty(exports, "ScreenWidthMinSmall", { enumerable: true, get: function () { return index_2.ScreenWidthMinSmall; } });
Object.defineProperty(exports, "ScreenWidthMinMedium", { enumerable: true, get: function () { return index_2.ScreenWidthMinMedium; } });
Object.defineProperty(exports, "ScreenWidthMinLarge", { enumerable: true, get: function () { return index_2.ScreenWidthMinLarge; } });
Object.defineProperty(exports, "ScreenWidthMinXLarge", { enumerable: true, get: function () { return index_2.ScreenWidthMinXLarge; } });
Object.defineProperty(exports, "ScreenWidthMinXXLarge", { enumerable: true, get: function () { return index_2.ScreenWidthMinXXLarge; } });
Object.defineProperty(exports, "ScreenWidthMinXXXLarge", { enumerable: true, get: function () { return index_2.ScreenWidthMinXXXLarge; } });
Object.defineProperty(exports, "ScreenWidthMaxSmall", { enumerable: true, get: function () { return index_2.ScreenWidthMaxSmall; } });
Object.defineProperty(exports, "ScreenWidthMaxMedium", { enumerable: true, get: function () { return index_2.ScreenWidthMaxMedium; } });
Object.defineProperty(exports, "ScreenWidthMaxLarge", { enumerable: true, get: function () { return index_2.ScreenWidthMaxLarge; } });
Object.defineProperty(exports, "ScreenWidthMaxXLarge", { enumerable: true, get: function () { return index_2.ScreenWidthMaxXLarge; } });
Object.defineProperty(exports, "ScreenWidthMaxXXLarge", { enumerable: true, get: function () { return index_2.ScreenWidthMaxXXLarge; } });
Object.defineProperty(exports, "ScreenWidthMinUhfMobile", { enumerable: true, get: function () { return index_2.ScreenWidthMinUhfMobile; } });
Object.defineProperty(exports, "getScreenSelector", { enumerable: true, get: function () { return index_2.getScreenSelector; } });
Object.defineProperty(exports, "getHighContrastNoAdjustStyle", { enumerable: true, get: function () { return index_2.getHighContrastNoAdjustStyle; } });
// eslint-disable-next-line @typescript-eslint/no-deprecated
Object.defineProperty(exports, "getEdgeChromiumNoHighContrastAdjustSelector", { enumerable: true, get: function () { return index_2.getEdgeChromiumNoHighContrastAdjustSelector; } });
Object.defineProperty(exports, "normalize", { enumerable: true, get: function () { return index_2.normalize; } });
Object.defineProperty(exports, "noWrap", { enumerable: true, get: function () { return index_2.noWrap; } });
Object.defineProperty(exports, "getFadedOverflowStyle", { enumerable: true, get: function () { return index_2.getFadedOverflowStyle; } });
Object.defineProperty(exports, "getPlaceholderStyles", { enumerable: true, get: function () { return index_2.getPlaceholderStyles; } });
Object.defineProperty(exports, "ZIndexes", { enumerable: true, get: function () { return index_2.ZIndexes; } });
var index_3 = require("./utilities/index");
Object.defineProperty(exports, "buildClassMap", { enumerable: true, get: function () { return index_3.buildClassMap; } });
Object.defineProperty(exports, "getIcon", { enumerable: true, get: function () { return index_3.getIcon; } });
Object.defineProperty(exports, "registerIcons", { enumerable: true, get: function () { return index_3.registerIcons; } });
Object.defineProperty(exports, "registerIconAlias", { enumerable: true, get: function () { return index_3.registerIconAlias; } });
Object.defineProperty(exports, "unregisterIcons", { enumerable: true, get: function () { return index_3.unregisterIcons; } });
Object.defineProperty(exports, "setIconOptions", { enumerable: true, get: function () { return index_3.setIconOptions; } });
Object.defineProperty(exports, "getIconClassName", { enumerable: true, get: function () { return index_3.getIconClassName; } });
var MergeStyles_1 = require("./MergeStyles");
Object.defineProperty(exports, "InjectionMode", { enumerable: true, get: function () { return MergeStyles_1.InjectionMode; } });
Object.defineProperty(exports, "Stylesheet", { enumerable: true, get: function () { return MergeStyles_1.Stylesheet; } });
Object.defineProperty(exports, "concatStyleSets", { enumerable: true, get: function () { return MergeStyles_1.concatStyleSets; } });
Object.defineProperty(exports, "concatStyleSetsWithProps", { enumerable: true, get: function () { return MergeStyles_1.concatStyleSetsWithProps; } });
Object.defineProperty(exports, "fontFace", { enumerable: true, get: function () { return MergeStyles_1.fontFace; } });
Object.defineProperty(exports, "keyframes", { enumerable: true, get: function () { return MergeStyles_1.keyframes; } });
Object.defineProperty(exports, "mergeStyleSets", { enumerable: true, get: function () { return MergeStyles_1.mergeStyleSets; } });
Object.defineProperty(exports, "mergeStyles", { enumerable: true, get: function () { return MergeStyles_1.mergeStyles; } });
var cdn_1 = require("./cdn");
Object.defineProperty(exports, "FLUENT_CDN_BASE_URL", { enumerable: true, get: function () { return cdn_1.FLUENT_CDN_BASE_URL; } });
require("./version");
// Ensure theme is initialized when this package is referenced.
var theme_1 = require("./styles/theme");
(0, theme_1.initializeThemeInCustomizations)();
//# sourceMappingURL=index.js.map
+1
View File
@@ -0,0 +1 @@
{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["index.ts"],"names":[],"mappings":";;;;AAAA,4CAA0F;AAAjF,4GAAA,mBAAmB,OAAA;AAAE,uGAAA,cAAc,OAAA;AAAE,wGAAA,eAAe,OAAA;AAE7D,wCAoDwB;AAnDtB,wGAAA,eAAe,OAAA;AACf,2GAAA,kBAAkB,OAAA;AAClB,uGAAA,cAAc,OAAA;AACd,uGAAA,cAAc,OAAA;AACd,0GAAA,iBAAiB,OAAA;AACjB,iHAAA,wBAAwB,OAAA;AACxB,kGAAA,SAAS,OAAA;AACT,oGAAA,WAAW,OAAA;AACX,sGAAA,aAAa,OAAA;AACb,yGAAA,gBAAgB,OAAA;AAChB,2GAAA,kBAAkB,OAAA;AAClB,qHAAA,4BAA4B,OAAA;AAC5B,4GAAA,mBAAmB,OAAA;AACnB,4DAA4D;AAC5D,sGAAA,aAAa,OAAA;AACb,6GAAA,oBAAoB,OAAA;AACpB,2GAAA,kBAAkB,OAAA;AAClB,yGAAA,gBAAgB,OAAA;AAChB,mGAAA,UAAU,OAAA;AACV,yGAAA,gBAAgB,OAAA;AAChB,iGAAA,QAAQ,OAAA;AACR,kGAAA,SAAS,OAAA;AACT,oGAAA,WAAW,OAAA;AACX,sHAAA,6BAA6B,OAAA;AAC7B,oHAAA,2BAA2B,OAAA;AAC3B,6GAAA,oBAAoB,OAAA;AACpB,kHAAA,yBAAyB,OAAA;AACzB,kHAAA,yBAAyB,OAAA;AACzB,4DAA4D;AAC5D,yHAAA,gCAAgC,OAAA;AAChC,4GAAA,mBAAmB,OAAA;AACnB,6GAAA,oBAAoB,OAAA;AACpB,4GAAA,mBAAmB,OAAA;AACnB,6GAAA,oBAAoB,OAAA;AACpB,8GAAA,qBAAqB,OAAA;AACrB,+GAAA,sBAAsB,OAAA;AACtB,4GAAA,mBAAmB,OAAA;AACnB,6GAAA,oBAAoB,OAAA;AACpB,4GAAA,mBAAmB,OAAA;AACnB,6GAAA,oBAAoB,OAAA;AACpB,8GAAA,qBAAqB,OAAA;AACrB,gHAAA,uBAAuB,OAAA;AACvB,0GAAA,iBAAiB,OAAA;AACjB,qHAAA,4BAA4B,OAAA;AAC5B,4DAA4D;AAC5D,oIAAA,2CAA2C,OAAA;AAC3C,kGAAA,SAAS,OAAA;AACT,+FAAA,MAAM,OAAA;AACN,8GAAA,qBAAqB,OAAA;AACrB,6GAAA,oBAAoB,OAAA;AACpB,iGAAA,QAAQ,OAAA;AAIV,2CAQ2B;AAPzB,sGAAA,aAAa,OAAA;AACb,gGAAA,OAAO,OAAA;AACP,sGAAA,aAAa,OAAA;AACb,0GAAA,iBAAiB,OAAA;AACjB,wGAAA,eAAe,OAAA;AACf,uGAAA,cAAc,OAAA;AACd,yGAAA,gBAAgB,OAAA;AAoBlB,6CASuB;AARrB,4GAAA,aAAa,OAAA;AACb,yGAAA,UAAU,OAAA;AACV,8GAAA,eAAe,OAAA;AACf,uHAAA,wBAAwB,OAAA;AACxB,uGAAA,QAAQ,OAAA;AACR,wGAAA,SAAS,OAAA;AACT,6GAAA,cAAc,OAAA;AACd,0GAAA,WAAW,OAAA;AAeb,6BAA4C;AAAnC,0GAAA,mBAAmB,OAAA;AAE5B,qBAAmB;AAEnB,+DAA+D;AAC/D,wCAAiE;AACjE,IAAA,uCAA+B,GAAE,CAAC","sourcesContent":["export { AnimationClassNames, FontClassNames, ColorClassNames } from './classNames/index';\n\nexport {\n AnimationStyles,\n AnimationVariables,\n DefaultPalette,\n DefaultEffects,\n DefaultFontStyles,\n registerDefaultFontFaces,\n FontSizes,\n FontWeights,\n IconFontSizes,\n createFontStyles,\n hiddenContentStyle,\n PulsingBeaconAnimationStyles,\n getGlobalClassNames,\n // eslint-disable-next-line @typescript-eslint/no-deprecated\n getFocusStyle,\n getFocusOutlineStyle,\n getInputFocusStyle,\n getThemedContext,\n focusClear,\n ThemeSettingName,\n getTheme,\n loadTheme,\n createTheme,\n registerOnThemeChangeCallback,\n removeOnThemeChangeCallback,\n HighContrastSelector,\n HighContrastSelectorWhite,\n HighContrastSelectorBlack,\n // eslint-disable-next-line @typescript-eslint/no-deprecated\n EdgeChromiumHighContrastSelector,\n ScreenWidthMinSmall,\n ScreenWidthMinMedium,\n ScreenWidthMinLarge,\n ScreenWidthMinXLarge,\n ScreenWidthMinXXLarge,\n ScreenWidthMinXXXLarge,\n ScreenWidthMaxSmall,\n ScreenWidthMaxMedium,\n ScreenWidthMaxLarge,\n ScreenWidthMaxXLarge,\n ScreenWidthMaxXXLarge,\n ScreenWidthMinUhfMobile,\n getScreenSelector,\n getHighContrastNoAdjustStyle,\n // eslint-disable-next-line @typescript-eslint/no-deprecated\n getEdgeChromiumNoHighContrastAdjustSelector,\n normalize,\n noWrap,\n getFadedOverflowStyle,\n getPlaceholderStyles,\n ZIndexes,\n} from './styles/index';\nexport type { GlobalClassNames } from './styles/index';\n\nexport {\n buildClassMap,\n getIcon,\n registerIcons,\n registerIconAlias,\n unregisterIcons,\n setIconOptions,\n getIconClassName,\n} from './utilities/index';\nexport type { IIconRecord, IIconSubset, IIconSubsetRecord, IIconOptions } from './utilities/index';\n\nexport type {\n IAnimationStyles,\n IAnimationVariables,\n IGetFocusStylesOptions,\n IEffects,\n IFontStyles,\n IPalette,\n ISemanticColors,\n ISemanticTextColors,\n ISpacing,\n ITheme,\n IPartialTheme,\n IScheme,\n ISchemeNames,\n} from './interfaces/index';\n\nexport {\n InjectionMode,\n Stylesheet,\n concatStyleSets,\n concatStyleSetsWithProps,\n fontFace,\n keyframes,\n mergeStyleSets,\n mergeStyles,\n} from './MergeStyles';\nexport type {\n IFontFace,\n IFontWeight,\n IRawStyle,\n IStyle,\n IStyleSet,\n IStyleSetBase,\n IProcessedStyleSet,\n IStyleSheetConfig,\n ICSPSettings,\n ShadowConfig,\n} from './MergeStyles';\n\nexport { FLUENT_CDN_BASE_URL } from './cdn';\n\nimport './version';\n\n// Ensure theme is initialized when this package is referenced.\nimport { initializeThemeInCustomizations } from './styles/theme';\ninitializeThemeInCustomizations();\n"]}
@@ -0,0 +1 @@
export type { IAnimationStyles, IAnimationVariables } from '@fluentui/theme';
@@ -0,0 +1,3 @@
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
//# sourceMappingURL=IAnimationStyles.js.map
@@ -0,0 +1 @@
{"version":3,"file":"IAnimationStyles.js","sourceRoot":"../src/","sources":["interfaces/IAnimationStyles.ts"],"names":[],"mappings":"","sourcesContent":["export type { IAnimationStyles, IAnimationVariables } from '@fluentui/theme';\n"]}
@@ -0,0 +1,47 @@
import type { IRawStyle } from '@fluentui/merge-styles';
export interface IGetFocusStylesOptions {
/**
* The number of pixels to inset the border.
* @defaultvalue 0
*/
inset?: number;
/**
* The width of the border in pixels.
* @defaultvalue 1
*/
width?: number;
/**
* The positioning applied to the container.
* Must be 'relative' or 'absolute' so that the focus border can live around it.
* @defaultvalue 'relative'
*/
position?: 'relative' | 'absolute';
/**
* Style for high contrast mode.
*/
highContrastStyle?: IRawStyle;
/**
* Color of the border.
* @defaultvalue theme.palette.white
*/
borderColor?: string;
/**
* Color of the outline.
* @defaultvalue theme.palette.neutralSecondary
*/
outlineColor?: string;
/**
* If the styles should apply on `:focus` pseudo element.
* @defaultvalue true
*/
isFocusedOnly?: boolean;
/**
* If the style should include a rounded border.
*/
borderRadius?: string | number | undefined;
/**
* If default pointer events should be overridden.
* @defaultvalue undefined
*/
pointerEvents?: IRawStyle['pointerEvents'];
}
@@ -0,0 +1,3 @@
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
//# sourceMappingURL=IGetFocusStyles.js.map
@@ -0,0 +1 @@
{"version":3,"file":"IGetFocusStyles.js","sourceRoot":"../src/","sources":["interfaces/IGetFocusStyles.ts"],"names":[],"mappings":"","sourcesContent":["import type { IRawStyle } from '@fluentui/merge-styles';\n\nexport interface IGetFocusStylesOptions {\n /**\n * The number of pixels to inset the border.\n * @defaultvalue 0\n */\n inset?: number;\n\n /**\n * The width of the border in pixels.\n * @defaultvalue 1\n */\n width?: number;\n\n /**\n * The positioning applied to the container.\n * Must be 'relative' or 'absolute' so that the focus border can live around it.\n * @defaultvalue 'relative'\n */\n position?: 'relative' | 'absolute';\n\n /**\n * Style for high contrast mode.\n */\n highContrastStyle?: IRawStyle;\n\n /**\n * Color of the border.\n * @defaultvalue theme.palette.white\n */\n borderColor?: string;\n\n /**\n * Color of the outline.\n * @defaultvalue theme.palette.neutralSecondary\n */\n outlineColor?: string;\n\n /**\n * If the styles should apply on `:focus` pseudo element.\n * @defaultvalue true\n */\n isFocusedOnly?: boolean;\n\n /**\n * If the style should include a rounded border.\n */\n borderRadius?: string | number | undefined;\n\n /**\n * If default pointer events should be overridden.\n * @defaultvalue undefined\n */\n pointerEvents?: IRawStyle['pointerEvents'];\n}\n"]}
@@ -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';
@@ -0,0 +1,3 @@
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
//# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["interfaces/index.ts"],"names":[],"mappings":"","sourcesContent":["export type { IAnimationStyles, IAnimationVariables } from './IAnimationStyles';\nexport type { IGetFocusStylesOptions } from './IGetFocusStyles';\nexport type {\n IEffects,\n IFontStyles,\n IPalette,\n ISemanticColors,\n ISemanticTextColors,\n ISpacing,\n ITheme,\n IPartialTheme,\n IScheme,\n ISchemeNames,\n} from '@fluentui/theme';\n"]}
@@ -0,0 +1 @@
export { AnimationStyles, AnimationVariables } from '@fluentui/theme';
@@ -0,0 +1,7 @@
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.AnimationVariables = exports.AnimationStyles = void 0;
var theme_1 = require("@fluentui/theme");
Object.defineProperty(exports, "AnimationStyles", { enumerable: true, get: function () { return theme_1.AnimationStyles; } });
Object.defineProperty(exports, "AnimationVariables", { enumerable: true, get: function () { return theme_1.AnimationVariables; } });
//# sourceMappingURL=AnimationStyles.js.map
@@ -0,0 +1 @@
{"version":3,"file":"AnimationStyles.js","sourceRoot":"../src/","sources":["styles/AnimationStyles.ts"],"names":[],"mappings":";;;AAAA,yCAAsE;AAA7D,wGAAA,eAAe,OAAA;AAAE,2GAAA,kBAAkB,OAAA","sourcesContent":["export { AnimationStyles, AnimationVariables } from '@fluentui/theme';\n"]}
@@ -0,0 +1,32 @@
import type { IRawStyle } from '../MergeStyles';
export declare const HighContrastSelector = "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)";
export declare const HighContrastSelectorWhite = "@media screen and (-ms-high-contrast: black-on-white), screen and (forced-colors: active) and (prefers-color-scheme: light)";
export declare const HighContrastSelectorBlack = "@media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark)";
/**
* @deprecated Use `HighContrastSelector`
*/
export declare const EdgeChromiumHighContrastSelector = "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)";
export declare const ScreenWidthMinSmall = 320;
export declare const ScreenWidthMinMedium = 480;
export declare const ScreenWidthMinLarge = 640;
export declare const ScreenWidthMinXLarge = 1024;
export declare const ScreenWidthMinXXLarge = 1366;
export declare const ScreenWidthMinXXXLarge = 1920;
export declare const ScreenWidthMaxSmall: number;
export declare const ScreenWidthMaxMedium: number;
export declare const ScreenWidthMaxLarge: number;
export declare const ScreenWidthMaxXLarge: number;
export declare const ScreenWidthMaxXXLarge: number;
export declare const ScreenWidthMinUhfMobile = 768;
export declare function getScreenSelector(min: number | undefined, max: number | undefined): string;
/**
* The style which turns off high contrast adjustment in browsers.
*/
export declare function getHighContrastNoAdjustStyle(): IRawStyle;
/**
* The style which turns off high contrast adjustment in (only) Edge Chromium browser.
* @deprecated Use `getHighContrastNoAdjustStyle`
*/
export declare function getEdgeChromiumNoHighContrastAdjustSelector(): {
[EdgeChromiumHighContrastSelector]: IRawStyle;
};
@@ -0,0 +1,59 @@
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.ScreenWidthMinUhfMobile = exports.ScreenWidthMaxXXLarge = exports.ScreenWidthMaxXLarge = exports.ScreenWidthMaxLarge = exports.ScreenWidthMaxMedium = exports.ScreenWidthMaxSmall = exports.ScreenWidthMinXXXLarge = exports.ScreenWidthMinXXLarge = exports.ScreenWidthMinXLarge = exports.ScreenWidthMinLarge = exports.ScreenWidthMinMedium = exports.ScreenWidthMinSmall = exports.EdgeChromiumHighContrastSelector = exports.HighContrastSelectorBlack = exports.HighContrastSelectorWhite = exports.HighContrastSelector = void 0;
exports.getScreenSelector = getScreenSelector;
exports.getHighContrastNoAdjustStyle = getHighContrastNoAdjustStyle;
exports.getEdgeChromiumNoHighContrastAdjustSelector = getEdgeChromiumNoHighContrastAdjustSelector;
exports.HighContrastSelector = '@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)';
exports.HighContrastSelectorWhite =
// eslint-disable-next-line @fluentui/max-len
'@media screen and (-ms-high-contrast: black-on-white), screen and (forced-colors: active) and (prefers-color-scheme: light)';
exports.HighContrastSelectorBlack =
// eslint-disable-next-line @fluentui/max-len
'@media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark)';
/**
* @deprecated Use `HighContrastSelector`
*/
exports.EdgeChromiumHighContrastSelector = '@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)';
exports.ScreenWidthMinSmall = 320;
exports.ScreenWidthMinMedium = 480;
exports.ScreenWidthMinLarge = 640;
exports.ScreenWidthMinXLarge = 1024;
exports.ScreenWidthMinXXLarge = 1366;
exports.ScreenWidthMinXXXLarge = 1920;
exports.ScreenWidthMaxSmall = exports.ScreenWidthMinMedium - 1;
exports.ScreenWidthMaxMedium = exports.ScreenWidthMinLarge - 1;
exports.ScreenWidthMaxLarge = exports.ScreenWidthMinXLarge - 1;
exports.ScreenWidthMaxXLarge = exports.ScreenWidthMinXXLarge - 1;
exports.ScreenWidthMaxXXLarge = exports.ScreenWidthMinXXXLarge - 1;
exports.ScreenWidthMinUhfMobile = 768;
function getScreenSelector(min, max) {
var minSelector = typeof min === 'number' ? " and (min-width: ".concat(min, "px)") : '';
var maxSelector = typeof max === 'number' ? " and (max-width: ".concat(max, "px)") : '';
return "@media only screen".concat(minSelector).concat(maxSelector);
}
/**
* The style which turns off high contrast adjustment in browsers.
*/
function getHighContrastNoAdjustStyle() {
return {
forcedColorAdjust: 'none',
MsHighContrastAdjust: 'none',
};
}
/**
* The style which turns off high contrast adjustment in (only) Edge Chromium browser.
* @deprecated Use `getHighContrastNoAdjustStyle`
*/
// eslint-disable-next-line @typescript-eslint/no-deprecated
function getEdgeChromiumNoHighContrastAdjustSelector() {
var _a;
return _a = {},
// eslint-disable-next-line @typescript-eslint/no-deprecated
_a[exports.EdgeChromiumHighContrastSelector] = {
forcedColorAdjust: 'none',
MsHighContrastAdjust: 'none',
},
_a;
}
//# sourceMappingURL=CommonStyles.js.map
@@ -0,0 +1 @@
{"version":3,"file":"CommonStyles.js","sourceRoot":"../src/","sources":["styles/CommonStyles.ts"],"names":[],"mappings":";;;AA6BA,8CAIC;AAKD,oEAKC;AAOD,kGAQC;AAxDY,QAAA,oBAAoB,GAAG,mFAAmF,CAAC;AAC3G,QAAA,yBAAyB;AACpC,6CAA6C;AAC7C,6HAA6H,CAAC;AACnH,QAAA,yBAAyB;AACpC,6CAA6C;AAC7C,4HAA4H,CAAC;AAC/H;;GAEG;AACU,QAAA,gCAAgC,GAC3C,mFAAmF,CAAC;AAEzE,QAAA,mBAAmB,GAAG,GAAG,CAAC;AAC1B,QAAA,oBAAoB,GAAG,GAAG,CAAC;AAC3B,QAAA,mBAAmB,GAAG,GAAG,CAAC;AAC1B,QAAA,oBAAoB,GAAG,IAAI,CAAC;AAC5B,QAAA,qBAAqB,GAAG,IAAI,CAAC;AAC7B,QAAA,sBAAsB,GAAG,IAAI,CAAC;AAC9B,QAAA,mBAAmB,GAAG,4BAAoB,GAAG,CAAC,CAAC;AAC/C,QAAA,oBAAoB,GAAG,2BAAmB,GAAG,CAAC,CAAC;AAC/C,QAAA,mBAAmB,GAAG,4BAAoB,GAAG,CAAC,CAAC;AAC/C,QAAA,oBAAoB,GAAG,6BAAqB,GAAG,CAAC,CAAC;AACjD,QAAA,qBAAqB,GAAG,8BAAsB,GAAG,CAAC,CAAC;AAEnD,QAAA,uBAAuB,GAAG,GAAG,CAAC;AAE3C,SAAgB,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,SAAgB,4BAA4B;IAC1C,OAAO;QACL,iBAAiB,EAAE,MAAM;QACzB,oBAAoB,EAAE,MAAM;KAC7B,CAAC;AACJ,CAAC;AAED;;;GAGG;AACH,4DAA4D;AAC5D,SAAgB,2CAA2C;;IACzD;QACE,4DAA4D;QAC5D,GAAC,wCAAgC,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';
@@ -0,0 +1,6 @@
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.DefaultEffects = void 0;
var theme_1 = require("@fluentui/theme");
Object.defineProperty(exports, "DefaultEffects", { enumerable: true, get: function () { return theme_1.DefaultEffects; } });
//# sourceMappingURL=DefaultEffects.js.map
@@ -0,0 +1 @@
{"version":3,"file":"DefaultEffects.js","sourceRoot":"../src/","sources":["styles/DefaultEffects.ts"],"names":[],"mappings":";;;AAAA,yCAAiD;AAAxC,uGAAA,cAAc,OAAA","sourcesContent":["export { DefaultEffects } from '@fluentui/theme';\n"]}
@@ -0,0 +1 @@
export { DefaultFontStyles, registerDefaultFontFaces } from '@fluentui/theme';
@@ -0,0 +1,7 @@
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.registerDefaultFontFaces = exports.DefaultFontStyles = void 0;
var theme_1 = require("@fluentui/theme");
Object.defineProperty(exports, "DefaultFontStyles", { enumerable: true, get: function () { return theme_1.DefaultFontStyles; } });
Object.defineProperty(exports, "registerDefaultFontFaces", { enumerable: true, get: function () { return theme_1.registerDefaultFontFaces; } });
//# sourceMappingURL=DefaultFontStyles.js.map
@@ -0,0 +1 @@
{"version":3,"file":"DefaultFontStyles.js","sourceRoot":"../src/","sources":["styles/DefaultFontStyles.ts"],"names":[],"mappings":";;;AAAA,yCAA8E;AAArE,0GAAA,iBAAiB,OAAA;AAAE,iHAAA,wBAAwB,OAAA","sourcesContent":["export { DefaultFontStyles, registerDefaultFontFaces } from '@fluentui/theme';\n"]}
@@ -0,0 +1 @@
export { DefaultPalette } from '@fluentui/theme';
@@ -0,0 +1,6 @@
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.DefaultPalette = void 0;
var theme_1 = require("@fluentui/theme");
Object.defineProperty(exports, "DefaultPalette", { enumerable: true, get: function () { return theme_1.DefaultPalette; } });
//# sourceMappingURL=DefaultPalette.js.map
@@ -0,0 +1 @@
{"version":3,"file":"DefaultPalette.js","sourceRoot":"../src/","sources":["styles/DefaultPalette.ts"],"names":[],"mappings":";;;AAAA,yCAAiD;AAAxC,uGAAA,cAAc,OAAA","sourcesContent":["export { DefaultPalette } from '@fluentui/theme';\n"]}
@@ -0,0 +1 @@
export { DefaultSpacing } from '@fluentui/theme';
@@ -0,0 +1,6 @@
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.DefaultSpacing = void 0;
var theme_1 = require("@fluentui/theme");
Object.defineProperty(exports, "DefaultSpacing", { enumerable: true, get: function () { return theme_1.DefaultSpacing; } });
//# sourceMappingURL=DefaultSpacing.js.map
@@ -0,0 +1 @@
{"version":3,"file":"DefaultSpacing.js","sourceRoot":"../src/","sources":["styles/DefaultSpacing.ts"],"names":[],"mappings":";;;AAAA,yCAAiD;AAAxC,uGAAA,cAAc,OAAA","sourcesContent":["export { DefaultSpacing } from '@fluentui/theme';\n"]}
@@ -0,0 +1,3 @@
import type { IRawStyle } from '@fluentui/merge-styles';
export declare const normalize: IRawStyle;
export declare const noWrap: IRawStyle;
@@ -0,0 +1,16 @@
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.noWrap = exports.normalize = void 0;
// This file mimics styles and mixins from _General.Mixins.scss
exports.normalize = {
boxShadow: 'none',
margin: 0,
padding: 0,
boxSizing: 'border-box',
};
exports.noWrap = {
overflow: 'hidden',
textOverflow: 'ellipsis',
whiteSpace: 'nowrap',
};
//# sourceMappingURL=GeneralStyles.js.map
@@ -0,0 +1 @@
{"version":3,"file":"GeneralStyles.js","sourceRoot":"../src/","sources":["styles/GeneralStyles.ts"],"names":[],"mappings":";;;AAEA,+DAA+D;AAClD,QAAA,SAAS,GAAc;IAClC,SAAS,EAAE,MAAM;IACjB,MAAM,EAAE,CAAC;IACT,OAAO,EAAE,CAAC;IACV,SAAS,EAAE,YAAY;CACxB,CAAC;AAEW,QAAA,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,85 @@
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.PulsingBeaconAnimationStyles = void 0;
var tslib_1 = require("tslib");
var merge_styles_1 = require("@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 tslib_1.__assign(tslib_1.__assign({}, _continuousPulseStepOne(beaconColorOne, innerDimension)), {
opacity: 0,
});
}
function _continuousPulseAnimationDouble(beaconColorOne, beaconColorTwo, innerDimension, outerDimension, borderWidth) {
return (0, merge_styles_1.keyframes)({
'0%': _continuousPulseStepOne(beaconColorOne, innerDimension),
'1.42%': _continuousPulseStepTwo(borderWidth),
'3.57%': _continuousPulseStepThree(),
'7.14%': _continuousPulseStepFour(beaconColorTwo, outerDimension),
'8%': _continuousPulseStepFive(beaconColorOne, innerDimension),
'29.99%': _continuousPulseStepFive(beaconColorOne, innerDimension),
'30%': _continuousPulseStepOne(beaconColorOne, innerDimension),
'31.42%': _continuousPulseStepTwo(borderWidth),
'33.57%': _continuousPulseStepThree(),
'37.14%': _continuousPulseStepFour(beaconColorTwo, outerDimension),
'38%': _continuousPulseStepFive(beaconColorOne, innerDimension),
'79.42%': _continuousPulseStepFive(beaconColorOne, innerDimension),
'79.43': _continuousPulseStepOne(beaconColorOne, innerDimension),
'81.85': _continuousPulseStepTwo(borderWidth),
'83.42': _continuousPulseStepThree(),
'87%': _continuousPulseStepFour(beaconColorTwo, outerDimension),
'100%': {},
});
}
function _continuousPulseAnimationSingle(beaconColorOne, beaconColorTwo, innerDimension, outerDimension, borderWidth) {
return (0, merge_styles_1.keyframes)({
'0%': _continuousPulseStepOne(beaconColorOne, innerDimension),
'14.2%': _continuousPulseStepTwo(borderWidth),
'35.7%': _continuousPulseStepThree(),
'71.4%': _continuousPulseStepFour(beaconColorTwo, outerDimension),
'100%': {},
});
}
function _createDefaultAnimation(animationName, delayLength) {
return {
animationName: animationName,
animationIterationCount: DEFAULT_ITERATION_COUNT,
animationDuration: DEFAULT_DURATION,
animationDelay: delayLength || DEFAULT_DELAY,
};
}
exports.PulsingBeaconAnimationStyles = {
continuousPulseAnimationDouble: _continuousPulseAnimationDouble,
continuousPulseAnimationSingle: _continuousPulseAnimationSingle,
createDefaultAnimation: _createDefaultAnimation,
};
//# sourceMappingURL=PulsingBeaconAnimationStyles.js.map
File diff suppressed because one or more lines are too long
@@ -0,0 +1 @@
export { LocalizedFontNames, LocalizedFontFamilies, FontSizes, FontWeights, IconFontSizes, createFontStyles, } from '@fluentui/theme';
+11
View File
@@ -0,0 +1,11 @@
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.createFontStyles = exports.IconFontSizes = exports.FontWeights = exports.FontSizes = exports.LocalizedFontFamilies = exports.LocalizedFontNames = void 0;
var theme_1 = require("@fluentui/theme");
Object.defineProperty(exports, "LocalizedFontNames", { enumerable: true, get: function () { return theme_1.LocalizedFontNames; } });
Object.defineProperty(exports, "LocalizedFontFamilies", { enumerable: true, get: function () { return theme_1.LocalizedFontFamilies; } });
Object.defineProperty(exports, "FontSizes", { enumerable: true, get: function () { return theme_1.FontSizes; } });
Object.defineProperty(exports, "FontWeights", { enumerable: true, get: function () { return theme_1.FontWeights; } });
Object.defineProperty(exports, "IconFontSizes", { enumerable: true, get: function () { return theme_1.IconFontSizes; } });
Object.defineProperty(exports, "createFontStyles", { enumerable: true, get: function () { return theme_1.createFontStyles; } });
//# sourceMappingURL=fonts.js.map
@@ -0,0 +1 @@
{"version":3,"file":"fonts.js","sourceRoot":"../src/","sources":["styles/fonts.ts"],"names":[],"mappings":";;;AAAA,yCAOyB;AANvB,2GAAA,kBAAkB,OAAA;AAClB,8GAAA,qBAAqB,OAAA;AACrB,kGAAA,SAAS,OAAA;AACT,oGAAA,WAAW,OAAA;AACX,sGAAA,aAAa,OAAA;AACb,yGAAA,gBAAgB,OAAA","sourcesContent":["export {\n LocalizedFontNames,\n LocalizedFontFamilies,\n FontSizes,\n FontWeights,\n IconFontSizes,\n createFontStyles,\n} from '@fluentui/theme';\n"]}
@@ -0,0 +1,56 @@
import type { IRawStyle } from '@fluentui/merge-styles';
import type { ITheme, ISemanticColors, IPalette } from '../interfaces/index';
/**
* - Generates a style used to fade out an overflowing content by defining a style for an :after pseudo element.
* - Apply it to the :after selector for all combination of states the parent of content might have (normal, hover,
* selected, focus).
* - Requires the target to have position set to relative and overflow set to hidden.
*
* @example
* ```tsx
* // Assuming the following DOM structure and the different background colors coming from
* // the parent holding the content.
* <div className={classNames.parent}>
* <span className={classNames.content}>Overflown Content</span>
* </div>
* ```
* ```ts
* // This is how the style set would look in Component.styles.ts
* const { bodyBackground } = theme.semanticColors;
* const { neutralLighter } = theme.palette;
*
* // The second argument of getFadedOverflowStyle function is a string representing a key of
* // ISemanticColors or IPalette.
*
* const styles = {
* parent: [
* backgroundColor: bodyBackground,
* selectors: {
* '&:hover: {
* backgroundColor: neutralLighter
* },
* '$content:after': {
* ...getFadedOverflowStyle(theme, 'bodyBackground')
* },
* '&:hover $content:after': {
* ...getFadedOverflowStyle(theme, 'neutralLighter')
* }
* }
* ],
* content: [
* width: '100%',
* display: 'inline-block',
* position: 'relative',
* overflow: 'hidden'
* ]
* }
* ```
* @param theme - The theme object to use.
* @param color - The background color to fade out to. Accepts only keys of ISemanticColors or IPalette.
* Defaults to 'bodyBackground'.
* @param direction - The direction of the overflow. Defaults to horizontal.
* @param width - The width of the fading overflow. Vertical direction defaults it to 100% vs 20px when horizontal.
* @param height - The Height of the fading overflow. Vertical direction defaults it to 50% vs 100% when horizontal.
* @returns The style object.
*/
export declare function getFadedOverflowStyle(theme: ITheme, color?: keyof ISemanticColors | keyof IPalette, direction?: 'horizontal' | 'vertical', width?: string | number, height?: string | number): IRawStyle;
@@ -0,0 +1,129 @@
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.getFadedOverflowStyle = getFadedOverflowStyle;
var DEFAULT_HEIGHT = '50%';
var DEFAULT_WIDTH = 20;
/**
* - Generates a style used to fade out an overflowing content by defining a style for an :after pseudo element.
* - Apply it to the :after selector for all combination of states the parent of content might have (normal, hover,
* selected, focus).
* - Requires the target to have position set to relative and overflow set to hidden.
*
* @example
* ```tsx
* // Assuming the following DOM structure and the different background colors coming from
* // the parent holding the content.
* <div className={classNames.parent}>
* <span className={classNames.content}>Overflown Content</span>
* </div>
* ```
* ```ts
* // This is how the style set would look in Component.styles.ts
* const { bodyBackground } = theme.semanticColors;
* const { neutralLighter } = theme.palette;
*
* // The second argument of getFadedOverflowStyle function is a string representing a key of
* // ISemanticColors or IPalette.
*
* const styles = {
* parent: [
* backgroundColor: bodyBackground,
* selectors: {
* '&:hover: {
* backgroundColor: neutralLighter
* },
* '$content:after': {
* ...getFadedOverflowStyle(theme, 'bodyBackground')
* },
* '&:hover $content:after': {
* ...getFadedOverflowStyle(theme, 'neutralLighter')
* }
* }
* ],
* content: [
* width: '100%',
* display: 'inline-block',
* position: 'relative',
* overflow: 'hidden'
* ]
* }
* ```
* @param theme - The theme object to use.
* @param color - The background color to fade out to. Accepts only keys of ISemanticColors or IPalette.
* Defaults to 'bodyBackground'.
* @param direction - The direction of the overflow. Defaults to horizontal.
* @param width - The width of the fading overflow. Vertical direction defaults it to 100% vs 20px when horizontal.
* @param height - The Height of the fading overflow. Vertical direction defaults it to 50% vs 100% when horizontal.
* @returns The style object.
*/
function getFadedOverflowStyle(theme, color, direction, width, height) {
if (color === void 0) { color = 'bodyBackground'; }
if (direction === void 0) { direction = 'horizontal'; }
if (width === void 0) { width = getDefaultValue('width', direction); }
if (height === void 0) { height = getDefaultValue('height', direction); }
// Get the color value string from the theme semanticColors or palette.
var colorValue = theme.semanticColors[color] || theme.palette[color];
// Get the red, green, blue values of the colorValue.
var rgbColor = color2rgb(colorValue);
// Apply opacity 0 to serve as a start color of the gradient.
var rgba = "rgba(".concat(rgbColor.r, ", ").concat(rgbColor.g, ", ").concat(rgbColor.b, ", 0)");
// Get the direction of the gradient. (mergeStyles takes care of RTL direction)
var gradientDirection = direction === 'vertical' ? 'to bottom' : 'to right';
return {
content: '""',
position: 'absolute',
right: 0,
bottom: 0,
width: width,
height: height,
pointerEvents: 'none',
backgroundImage: "linear-gradient(".concat(gradientDirection, ", ").concat(rgba, " 0%, ").concat(colorValue, " 100%)"),
};
}
// TODO consider moving this to a separate module along with some more color functions from OUFR/utilities.
/**
* Helper function to convert a string hex color to an RGB object.
*
* @param colorValue - Color to be converted from hex to rgba.
*/
function color2rgb(colorValue) {
if (colorValue[0] === '#') {
// If it's a hex code
return {
r: parseInt(colorValue.slice(1, 3), 16),
g: parseInt(colorValue.slice(3, 5), 16),
b: parseInt(colorValue.slice(5, 7), 16),
};
}
else if (colorValue.indexOf('rgba(') === 0) {
// If it's an rgba color string
colorValue = colorValue.match(/rgba\(([^)]+)\)/)[1];
var parts = colorValue.split(/ *, */).map(Number);
return {
r: parts[0],
g: parts[1],
b: parts[2],
};
}
// The only remaining possibility is transparent.
return {
r: 255,
g: 255,
b: 255,
};
}
/**
* Helper function to get the default values for parameters of main function.
*
* @param style - Which style to get the default value for.
* @param direction - What direction to take into consideration.
*/
function getDefaultValue(style, direction) {
if (style === 'width') {
return direction === 'horizontal' ? DEFAULT_WIDTH : '100%';
}
else {
return direction === 'vertical' ? DEFAULT_HEIGHT : '100%';
}
}
//# sourceMappingURL=getFadedOverflowStyle.js.map
File diff suppressed because one or more lines are too long
@@ -0,0 +1,51 @@
import type { IRawStyle } from '@fluentui/merge-styles';
import type { IGetFocusStylesOptions, ITheme } from '../interfaces/index';
/**
* Generates a focus style which can be used to define an :after focus border.
*
* @param theme - The theme object to use.
* @param options - Options to customize the focus border.
* @returns The style object.
*/
export declare function getFocusStyle(theme: ITheme, options?: IGetFocusStylesOptions): IRawStyle;
/**
* Generates a focus style which can be used to define an :after focus border.
*
* @param theme - The theme object to use.
* @param inset - The number of pixels to inset the border.
* @param position - The positioning applied to the container. Must
* be 'relative' or 'absolute' so that the focus border can live around it.
* @param highContrastStyle - Style for high contrast mode.
* @param borderColor - Color of the border.
* @param outlineColor - Color of the outline.
* @param isFocusedOnly - If the styles should apply on focus or not.
* @param borderRadius - If the style should include a rounded border.
* @returns The style object.
* @deprecated Use the object parameter version instead.
*/
export declare function getFocusStyle(theme: ITheme, inset?: number, position?: 'relative' | 'absolute', highContrastStyle?: IRawStyle | undefined, borderColor?: string, outlineColor?: string, isFocusedOnly?: boolean, borderRadius?: string | number | undefined): IRawStyle;
/**
* Generates style to clear browser specific focus styles.
*/
export declare function focusClear(): IRawStyle;
/**
* Generates a style which can be used to set a border on focus.
*
* @param theme - The theme object to use.
* @param inset - The number of pixels to inset the border (default 0)
* @param width - The border width in pixels (default 1)
* @param color - Color of the outline (default `theme.palette.neutralSecondary`)
* @returns The style object.
*/
export declare function getFocusOutlineStyle(theme: ITheme, inset?: number, width?: number, color?: string): IRawStyle;
/**
* Generates text input border styles on focus.
*
* @param borderColor - Color of the border.
* @param borderRadius - Radius of the border.
* @param borderType - Type of the border.
* @param borderPosition - Position of the border relative to the input element (default to -1
* as it's the most common border width of the input element)
* @returns The style object.
*/
export declare const getInputFocusStyle: (borderColor: string, borderRadius: string | number, borderType?: "border" | "borderBottom", borderPosition?: number) => IRawStyle;
@@ -0,0 +1,142 @@
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.getInputFocusStyle = void 0;
exports.getFocusStyle = getFocusStyle;
exports.focusClear = focusClear;
exports.getFocusOutlineStyle = getFocusOutlineStyle;
var CommonStyles_1 = require("./CommonStyles");
var utilities_1 = require("@fluentui/utilities");
var zIndexes_1 = require("./zIndexes");
function getFocusStyle(theme, insetOrOptions, position, highContrastStyle, borderColor, outlineColor, isFocusedOnly, borderRadius) {
if (typeof insetOrOptions === 'number' || !insetOrOptions) {
return _getFocusStyleInternal(theme, {
inset: insetOrOptions,
position: position,
highContrastStyle: highContrastStyle,
borderColor: borderColor,
outlineColor: outlineColor,
isFocusedOnly: isFocusedOnly,
borderRadius: borderRadius,
});
}
else {
return _getFocusStyleInternal(theme, insetOrOptions);
}
}
function _getFocusStyleInternal(theme, options) {
var _a, _b;
if (options === void 0) { options = {}; }
var borderRadius = options.borderRadius, _c = options.inset, inset = _c === void 0 ? 0 : _c, _d = options.width, width = _d === void 0 ? 1 : _d, _e = options.position, position = _e === void 0 ? 'relative' : _e, highContrastStyle = options.highContrastStyle, _f = options.borderColor, borderColor = _f === void 0 ? theme.palette.white : _f, _g = options.outlineColor, outlineColor = _g === void 0 ? theme.palette.neutralSecondary : _g, _h = options.isFocusedOnly, isFocusedOnly = _h === void 0 ? true : _h, pointerEvents = options.pointerEvents;
return {
// Clear browser-specific focus styles and use 'transparent' as placeholder for focus style.
outline: 'transparent',
// Requirement because pseudo-element is absolutely positioned.
position: position,
selectors: (_a = {
// Clear the focus border in Firefox.
// Reference: http://stackoverflow.com/a/199319/1436671
'::-moz-focus-inner': {
border: '0',
}
},
// When the element that uses this mixin is in a :focus state, add a pseudo-element to
// create a border.
_a[".".concat(utilities_1.IsFocusVisibleClassName, " &").concat(isFocusedOnly ? ':focus' : '', ":after, :host(.").concat(utilities_1.IsFocusVisibleClassName, ") &").concat(isFocusedOnly ? ':focus' : '', ":after")] = {
content: '""',
position: 'absolute',
pointerEvents: pointerEvents,
left: inset + 1,
top: inset + 1,
bottom: inset + 1,
right: inset + 1,
border: "".concat(width, "px solid ").concat(borderColor),
outline: "".concat(width, "px solid ").concat(outlineColor),
zIndex: zIndexes_1.ZIndexes.FocusStyle,
borderRadius: borderRadius,
selectors: (_b = {},
_b[CommonStyles_1.HighContrastSelector] = highContrastStyle,
_b),
},
_a),
};
}
/**
* Generates style to clear browser specific focus styles.
*/
function focusClear() {
return {
selectors: {
'&::-moz-focus-inner': {
// Clear the focus border in Firefox. Reference: http://stackoverflow.com/a/199319/1436671
border: 0,
},
'&': {
// Clear browser specific focus styles and use transparent as placeholder for focus style
outline: 'transparent',
},
},
};
}
/**
* Generates a style which can be used to set a border on focus.
*
* @param theme - The theme object to use.
* @param inset - The number of pixels to inset the border (default 0)
* @param width - The border width in pixels (default 1)
* @param color - Color of the outline (default `theme.palette.neutralSecondary`)
* @returns The style object.
*/
function getFocusOutlineStyle(theme, inset, width, color) {
var _a;
if (inset === void 0) { inset = 0; }
if (width === void 0) { width = 1; }
return {
selectors: (_a = {},
_a[":global(".concat(utilities_1.IsFocusVisibleClassName, ") &:focus")] = {
outline: "".concat(width, " solid ").concat(color || theme.palette.neutralSecondary),
outlineOffset: "".concat(-inset, "px"),
},
_a),
};
}
/**
* Generates text input border styles on focus.
*
* @param borderColor - Color of the border.
* @param borderRadius - Radius of the border.
* @param borderType - Type of the border.
* @param borderPosition - Position of the border relative to the input element (default to -1
* as it's the most common border width of the input element)
* @returns The style object.
*/
var getInputFocusStyle = function (borderColor, borderRadius, borderType, borderPosition) {
var _a, _b, _c;
if (borderType === void 0) { borderType = 'border'; }
if (borderPosition === void 0) { borderPosition = -1; }
var isBorderBottom = borderType === 'borderBottom';
return {
borderColor: borderColor,
selectors: {
':after': (_a = {
pointerEvents: 'none',
content: "''",
position: 'absolute',
left: isBorderBottom ? 0 : borderPosition,
top: borderPosition,
bottom: borderPosition,
right: isBorderBottom ? 0 : borderPosition
},
_a[borderType] = "2px solid ".concat(borderColor),
_a.borderRadius = borderRadius,
_a.width = borderType === 'borderBottom' ? '100%' : undefined,
_a.selectors = (_b = {},
_b[CommonStyles_1.HighContrastSelector] = (_c = {},
_c[borderType === 'border' ? 'borderColor' : 'borderBottomColor'] = 'Highlight',
_c),
_b),
_a),
},
};
};
exports.getInputFocusStyle = getInputFocusStyle;
//# sourceMappingURL=getFocusStyle.js.map
File diff suppressed because one or more lines are too long
@@ -0,0 +1,12 @@
import type { ITheme } from '../interfaces/index';
export type GlobalClassNames<IStyles> = Record<keyof IStyles, string>;
/**
* Checks for the `disableGlobalClassNames` property on the `theme` to determine if it should return `classNames`
* Note that calls to this function are memoized.
*
* @param classNames - The collection of global class names that apply when the flag is false. Make sure to pass in
* the same instance on each call to benefit from memoization.
* @param theme - The theme to check the flag on
* @param disableGlobalClassNames - Optional. Explicitly opt in/out of disabling global classnames. Defaults to false.
*/
export declare function getGlobalClassNames<T>(classNames: GlobalClassNames<T>, theme: ITheme, disableGlobalClassNames?: boolean): GlobalClassNames<T>;
@@ -0,0 +1,34 @@
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.getGlobalClassNames = getGlobalClassNames;
var merge_styles_1 = require("@fluentui/merge-styles");
var utilities_1 = require("@fluentui/utilities");
/**
* Internal memoized function which simply takes in the class map and the
* disable boolean. These immutable values can be memoized.
*/
var _getGlobalClassNames = (0, utilities_1.memoizeFunction)(function (classNames, disableGlobalClassNames) {
var styleSheet = merge_styles_1.Stylesheet.getInstance();
if (disableGlobalClassNames) {
// disable global classnames
return Object.keys(classNames).reduce(function (acc, className) {
acc[className] = styleSheet.getClassName(classNames[className]);
return acc;
}, {});
}
// use global classnames
return classNames;
});
/**
* Checks for the `disableGlobalClassNames` property on the `theme` to determine if it should return `classNames`
* Note that calls to this function are memoized.
*
* @param classNames - The collection of global class names that apply when the flag is false. Make sure to pass in
* the same instance on each call to benefit from memoization.
* @param theme - The theme to check the flag on
* @param disableGlobalClassNames - Optional. Explicitly opt in/out of disabling global classnames. Defaults to false.
*/
function getGlobalClassNames(classNames, theme, disableGlobalClassNames) {
return _getGlobalClassNames(classNames, disableGlobalClassNames !== undefined ? disableGlobalClassNames : theme.disableGlobalClassNames);
}
//# sourceMappingURL=getGlobalClassNames.js.map
@@ -0,0 +1 @@
{"version":3,"file":"getGlobalClassNames.js","sourceRoot":"../src/","sources":["styles/getGlobalClassNames.ts"],"names":[],"mappings":";;AAoCA,kDASC;AA7CD,uDAAoD;AACpD,iDAAsD;AAKtD;;;GAGG;AACH,IAAM,oBAAoB,GAAG,IAAA,2BAAe,EAC1C,UAAI,UAA+B,EAAE,uBAAiC;IACpE,IAAM,UAAU,GAAG,yBAAU,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,SAAgB,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,18 @@
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.getPlaceholderStyles = getPlaceholderStyles;
/**
* Generates placeholder style for each of the browsers supported by `@fluentui/react`.
* @param styles - The style to use.
* @returns The placeholder style object for each browser depending on the placeholder directive it uses.
*/
function getPlaceholderStyles(styles) {
return {
selectors: {
'::placeholder': styles, // Chrome, Safari, Opera, Firefox
':-ms-input-placeholder': styles, // IE 10+
'::-ms-input-placeholder': styles, // Edge
},
};
}
//# sourceMappingURL=getPlaceholderStyles.js.map
@@ -0,0 +1 @@
{"version":3,"file":"getPlaceholderStyles.js","sourceRoot":"../src/","sources":["styles/getPlaceholderStyles.ts"],"names":[],"mappings":";;AAOA,oDAQC;AAbD;;;;GAIG;AACH,SAAgB,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,14 @@
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.hiddenContentStyle = void 0;
exports.hiddenContentStyle = {
position: 'absolute',
width: 1,
height: 1,
margin: -1,
padding: 0,
border: 0,
overflow: 'hidden',
whiteSpace: 'nowrap',
};
//# sourceMappingURL=hiddenContentStyle.js.map
@@ -0,0 +1 @@
{"version":3,"file":"hiddenContentStyle.js","sourceRoot":"../src/","sources":["styles/hiddenContentStyle.ts"],"names":[],"mappings":";;;AAEa,QAAA,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';
+40
View File
@@ -0,0 +1,40 @@
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.removeOnThemeChangeCallback = exports.registerOnThemeChangeCallback = exports.createTheme = exports.loadTheme = exports.getTheme = exports.ThemeSettingName = exports.getGlobalClassNames = exports.PulsingBeaconAnimationStyles = exports.hiddenContentStyle = exports.createFontStyles = exports.IconFontSizes = exports.FontWeights = exports.FontSizes = exports.registerDefaultFontFaces = exports.DefaultFontStyles = exports.DefaultEffects = exports.DefaultPalette = exports.AnimationVariables = exports.AnimationStyles = void 0;
var tslib_1 = require("tslib");
var AnimationStyles_1 = require("./AnimationStyles");
Object.defineProperty(exports, "AnimationStyles", { enumerable: true, get: function () { return AnimationStyles_1.AnimationStyles; } });
Object.defineProperty(exports, "AnimationVariables", { enumerable: true, get: function () { return AnimationStyles_1.AnimationVariables; } });
var DefaultPalette_1 = require("./DefaultPalette");
Object.defineProperty(exports, "DefaultPalette", { enumerable: true, get: function () { return DefaultPalette_1.DefaultPalette; } });
var DefaultEffects_1 = require("./DefaultEffects");
Object.defineProperty(exports, "DefaultEffects", { enumerable: true, get: function () { return DefaultEffects_1.DefaultEffects; } });
var DefaultFontStyles_1 = require("./DefaultFontStyles");
Object.defineProperty(exports, "DefaultFontStyles", { enumerable: true, get: function () { return DefaultFontStyles_1.DefaultFontStyles; } });
Object.defineProperty(exports, "registerDefaultFontFaces", { enumerable: true, get: function () { return DefaultFontStyles_1.registerDefaultFontFaces; } });
var fonts_1 = require("./fonts");
Object.defineProperty(exports, "FontSizes", { enumerable: true, get: function () { return fonts_1.FontSizes; } });
Object.defineProperty(exports, "FontWeights", { enumerable: true, get: function () { return fonts_1.FontWeights; } });
Object.defineProperty(exports, "IconFontSizes", { enumerable: true, get: function () { return fonts_1.IconFontSizes; } });
Object.defineProperty(exports, "createFontStyles", { enumerable: true, get: function () { return fonts_1.createFontStyles; } });
tslib_1.__exportStar(require("./getFocusStyle"), exports);
var hiddenContentStyle_1 = require("./hiddenContentStyle");
Object.defineProperty(exports, "hiddenContentStyle", { enumerable: true, get: function () { return hiddenContentStyle_1.hiddenContentStyle; } });
var PulsingBeaconAnimationStyles_1 = require("./PulsingBeaconAnimationStyles");
Object.defineProperty(exports, "PulsingBeaconAnimationStyles", { enumerable: true, get: function () { return PulsingBeaconAnimationStyles_1.PulsingBeaconAnimationStyles; } });
var getGlobalClassNames_1 = require("./getGlobalClassNames");
Object.defineProperty(exports, "getGlobalClassNames", { enumerable: true, get: function () { return getGlobalClassNames_1.getGlobalClassNames; } });
tslib_1.__exportStar(require("./scheme"), exports);
var theme_1 = require("./theme");
Object.defineProperty(exports, "ThemeSettingName", { enumerable: true, get: function () { return theme_1.ThemeSettingName; } });
Object.defineProperty(exports, "getTheme", { enumerable: true, get: function () { return theme_1.getTheme; } });
Object.defineProperty(exports, "loadTheme", { enumerable: true, get: function () { return theme_1.loadTheme; } });
Object.defineProperty(exports, "createTheme", { enumerable: true, get: function () { return theme_1.createTheme; } });
Object.defineProperty(exports, "registerOnThemeChangeCallback", { enumerable: true, get: function () { return theme_1.registerOnThemeChangeCallback; } });
Object.defineProperty(exports, "removeOnThemeChangeCallback", { enumerable: true, get: function () { return theme_1.removeOnThemeChangeCallback; } });
tslib_1.__exportStar(require("./CommonStyles"), exports);
tslib_1.__exportStar(require("./GeneralStyles"), exports);
tslib_1.__exportStar(require("./getFadedOverflowStyle"), exports);
tslib_1.__exportStar(require("./getPlaceholderStyles"), exports);
tslib_1.__exportStar(require("./zIndexes"), exports);
//# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["styles/index.ts"],"names":[],"mappings":";;;;AAAA,qDAAwE;AAA/D,kHAAA,eAAe,OAAA;AAAE,qHAAA,kBAAkB,OAAA;AAC5C,mDAAkD;AAAzC,gHAAA,cAAc,OAAA;AACvB,mDAAkD;AAAzC,gHAAA,cAAc,OAAA;AACvB,yDAAkF;AAAzE,sHAAA,iBAAiB,OAAA;AAAE,6HAAA,wBAAwB,OAAA;AACpD,iCAAkF;AAAzE,kGAAA,SAAS,OAAA;AAAE,oGAAA,WAAW,OAAA;AAAE,sGAAA,aAAa,OAAA;AAAE,yGAAA,gBAAgB,OAAA;AAChE,0DAAgC;AAChC,2DAA0D;AAAjD,wHAAA,kBAAkB,OAAA;AAC3B,+EAA8E;AAArE,4IAAA,4BAA4B,OAAA;AACrC,6DAA4D;AAAnD,0HAAA,mBAAmB,OAAA;AAC5B,mDAAyB;AACzB,iCAOiB;AANf,yGAAA,gBAAgB,OAAA;AAChB,iGAAA,QAAQ,OAAA;AACR,kGAAA,SAAS,OAAA;AACT,oGAAA,WAAW,OAAA;AACX,sHAAA,6BAA6B,OAAA;AAC7B,oHAAA,2BAA2B,OAAA;AAE7B,yDAA+B;AAC/B,0DAAgC;AAChC,kEAAwC;AACxC,iEAAuC;AACvC,qDAA2B","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;
+45
View File
@@ -0,0 +1,45 @@
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.getThemedContext = getThemedContext;
var utilities_1 = require("@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.
*/
function getThemedContext(context, scheme, theme) {
var newContext = context;
var newSettings;
// Only fall back to context and customizations when theme arg is not provided.
var schemeSource = theme || utilities_1.Customizations.getSettings(['theme'], undefined, context.customizations).theme;
if (theme) {
newSettings = { theme: theme };
}
var schemeTheme = scheme && schemeSource && schemeSource.schemes && schemeSource.schemes[scheme];
// These first two checks are logically redundant but TS doesn't infer schemeSource.schemes is defined
// when schemeTheme is defined.
if (schemeSource && schemeTheme && schemeSource !== schemeTheme) {
newSettings = { theme: schemeTheme };
newSettings.theme.schemes = schemeSource.schemes;
}
if (newSettings) {
newContext = {
customizations: {
settings: (0, utilities_1.mergeSettings)(context.customizations.settings, newSettings),
scopedSettings: context.customizations.scopedSettings,
},
};
}
return newContext;
}
//# sourceMappingURL=scheme.js.map
@@ -0,0 +1 @@
{"version":3,"file":"scheme.js","sourceRoot":"../src/","sources":["styles/scheme.ts"],"names":[],"mappings":";;AAmBA,4CAmCC;AAtDD,iDAAoE;AAIpE;;;;;;;;;;;;;;GAcG;AACH,SAAgB,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,0BAAc,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,IAAA,yBAAa,EAAC,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;
+112
View File
@@ -0,0 +1,112 @@
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.ThemeSettingName = exports.createTheme = void 0;
exports.initializeThemeInCustomizations = initializeThemeInCustomizations;
exports.getTheme = getTheme;
exports.registerOnThemeChangeCallback = registerOnThemeChangeCallback;
exports.removeOnThemeChangeCallback = removeOnThemeChangeCallback;
exports.loadTheme = loadTheme;
var tslib_1 = require("tslib");
var utilities_1 = require("@fluentui/utilities");
var load_themed_styles_1 = require("@microsoft/load-themed-styles");
var theme_1 = require("@fluentui/theme");
var theme_2 = require("@fluentui/theme");
Object.defineProperty(exports, "createTheme", { enumerable: true, get: function () { return theme_2.createTheme; } });
var _theme = (0, theme_1.createTheme)({});
var _onThemeChangeCallbacks = [];
exports.ThemeSettingName = 'theme';
function initializeThemeInCustomizations() {
var _a;
var _b, _c;
// eslint-disable-next-line @typescript-eslint/no-explicit-any
var win = (0, utilities_1.getWindow)();
if ((_b = win === null || win === void 0 ? void 0 : win.FabricConfig) === null || _b === void 0 ? void 0 : _b.legacyTheme) {
// does everything the `else` clause does and more, such as invoke legacy theming
loadTheme(win.FabricConfig.legacyTheme);
}
else if (!utilities_1.Customizations.getSettings([exports.ThemeSettingName]).theme) {
if ((_c = win === null || win === void 0 ? void 0 : win.FabricConfig) === null || _c === void 0 ? void 0 : _c.theme) {
_theme = (0, theme_1.createTheme)(win.FabricConfig.theme);
}
// Set the default theme.
utilities_1.Customizations.applySettings((_a = {}, _a[exports.ThemeSettingName] = _theme, _a));
}
}
initializeThemeInCustomizations();
/**
* Gets the theme object
* @param depComments - Whether to include deprecated tags as comments for deprecated slots.
*/
function getTheme(depComments) {
if (depComments === void 0) { depComments = false; }
if (depComments === true) {
_theme = (0, theme_1.createTheme)({}, depComments);
}
return _theme;
}
/**
* Registers a callback that gets called whenever the theme changes.
* This should only be used when the component cannot automatically get theme changes through its state.
* This will not register duplicate callbacks.
*/
function registerOnThemeChangeCallback(callback) {
if (_onThemeChangeCallbacks.indexOf(callback) === -1) {
_onThemeChangeCallbacks.push(callback);
}
}
/**
* See registerOnThemeChangeCallback().
* Removes previously registered callbacks.
*/
function removeOnThemeChangeCallback(callback) {
var i = _onThemeChangeCallbacks.indexOf(callback);
if (i === -1) {
return;
}
_onThemeChangeCallbacks.splice(i, 1);
}
/**
* Applies the theme, while filling in missing slots.
* @param theme - Partial theme object.
* @param depComments - Whether to include deprecated tags as comments for deprecated slots.
*/
function loadTheme(theme, depComments) {
var _a;
if (depComments === void 0) { depComments = false; }
_theme = (0, theme_1.createTheme)(theme, depComments);
// Invoke the legacy method of theming the page as well.
(0, load_themed_styles_1.loadTheme)(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign({}, _theme.palette), _theme.semanticColors), _theme.effects), _loadFonts(_theme)));
utilities_1.Customizations.applySettings((_a = {}, _a[exports.ThemeSettingName] = _theme, _a));
_onThemeChangeCallbacks.forEach(function (callback) {
try {
callback(_theme);
}
catch (e) {
// don't let a bad callback break everything else
}
});
return _theme;
}
/**
* Loads font variables into a JSON object.
* @param theme - The theme object
*/
function _loadFonts(theme) {
var lines = {};
for (var _i = 0, _a = Object.keys(theme.fonts); _i < _a.length; _i++) {
var fontName = _a[_i];
var font = theme.fonts[fontName];
for (var _b = 0, _c = Object.keys(font); _b < _c.length; _b++) {
var propName = _c[_b];
var name_1 = fontName + propName.charAt(0).toUpperCase() + propName.slice(1);
var value = font[propName];
if (propName === 'fontSize' && typeof value === 'number') {
// if it's a number, convert it to px by default like our theming system does
value = value + 'px';
}
lines[name_1] = value;
}
}
return lines;
}
//# sourceMappingURL=theme.js.map
File diff suppressed because one or more lines are too long
@@ -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;
}
+16
View File
@@ -0,0 +1,16 @@
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.ZIndexes = void 0;
var ZIndexes;
(function (ZIndexes) {
ZIndexes.Nav = 1;
/**
* @deprecated Do not use
*/
ZIndexes.ScrollablePane = 1;
ZIndexes.FocusStyle = 1;
ZIndexes.Coachmark = 1000;
ZIndexes.Layer = 1000000;
ZIndexes.KeytipLayer = 1000001;
})(ZIndexes || (exports.ZIndexes = ZIndexes = {}));
//# sourceMappingURL=zIndexes.js.map
@@ -0,0 +1 @@
{"version":3,"file":"zIndexes.js","sourceRoot":"../src/","sources":["styles/zIndexes.ts"],"names":[],"mappings":";;;AAAA,IAAiB,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,wBAAR,QAAQ,QAUxB","sourcesContent":["export namespace ZIndexes {\n export const Nav: number = 1;\n /**\n * @deprecated Do not use\n */\n export const ScrollablePane: number = 1;\n export const FocusStyle: number = 1;\n export const Coachmark: number = 1000;\n export const Layer: number = 1000000;\n export const KeytipLayer: number = 1000001;\n}\n"]}
@@ -0,0 +1,9 @@
/**
* Builds a class names object from a given map.
*
* @param styles - Map of unprocessed styles.
* @returns Map of property name to class name.
*/
export declare function buildClassMap<T extends Object>(styles: T): {
[key in keyof T]?: string;
};
@@ -0,0 +1,34 @@
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.buildClassMap = buildClassMap;
var MergeStyles_1 = require("../MergeStyles");
/**
* Builds a class names object from a given map.
*
* @param styles - Map of unprocessed styles.
* @returns Map of property name to class name.
*/
function buildClassMap(styles) {
var classes = {};
var _loop_1 = function (styleName) {
if (styles.hasOwnProperty(styleName)) {
var className_1;
Object.defineProperty(classes, styleName, {
get: function () {
if (className_1 === undefined) {
// eslint-disable-next-line @typescript-eslint/no-explicit-any
className_1 = (0, MergeStyles_1.mergeStyles)(styles[styleName]).toString();
}
return className_1;
},
enumerable: true,
configurable: true,
});
}
};
for (var styleName in styles) {
_loop_1(styleName);
}
return classes;
}
//# sourceMappingURL=buildClassMap.js.map
@@ -0,0 +1 @@
{"version":3,"file":"buildClassMap.js","sourceRoot":"../src/","sources":["utilities/buildClassMap.ts"],"names":[],"mappings":";;AAQA,sCAsBC;AA9BD,8CAA6C;AAE7C;;;;;GAKG;AACH,SAAgB,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,IAAA,yBAAW,EAAC,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,29 @@
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.getIconClassName = getIconClassName;
var merge_styles_1 = require("@fluentui/merge-styles");
var icons_1 = require("./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
*/
function getIconClassName(name) {
var className = '';
var icon = (0, icons_1.getIcon)(name);
if (icon) {
className = (0, merge_styles_1.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":";;AAcA,4CAeC;AA7BD,uDAAqD;AACrD,iCAAkC;AAGlC,IAAM,iBAAiB,GAAW;IAChC,OAAO,EAAE,cAAc;CACxB,CAAC;AAEF;;;;;GAKG;AACH,SAAgB,gBAAgB,CAAC,IAAY;IAC3C,IAAI,SAAS,GAAG,EAAE,CAAC;IACnB,IAAM,IAAI,GAAG,IAAA,eAAO,EAAC,IAAI,CAAC,CAAC;IAE3B,IAAI,IAAI,EAAE,CAAC;QACT,SAAS,GAAG,IAAA,0BAAW,EAAC,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"]}
@@ -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;
+172
View File
@@ -0,0 +1,172 @@
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.registerIcons = registerIcons;
exports.unregisterIcons = unregisterIcons;
exports.registerIconAlias = registerIconAlias;
exports.getIcon = getIcon;
exports.setIconOptions = setIconOptions;
var tslib_1 = require("tslib");
var utilities_1 = require("@fluentui/utilities");
var merge_styles_1 = require("@fluentui/merge-styles");
var ICON_SETTING_NAME = 'icons';
var _iconSettings = utilities_1.GlobalSettings.getValue(ICON_SETTING_NAME, {
__options: {
disableWarnings: false,
warnOnMissingIcons: true,
},
__remapped: {},
});
// Reset icon registration on stylesheet resets.
var stylesheet = merge_styles_1.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.
*/
function registerIcons(iconSubset, options) {
var subset = tslib_1.__assign(tslib_1.__assign({}, iconSubset), { isRegistered: false, className: undefined });
var icons = iconSubset.icons;
// Grab options, optionally mix user provided ones on top.
options = options ? tslib_1.__assign(tslib_1.__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.
*/
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) {
(0, utilities_1.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.
*/
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.
*/
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) {
(0, merge_styles_1.fontFace)(subset.fontFace);
subset.isRegistered = true;
}
if (!subset.className) {
subset.className = (0, merge_styles_1.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) {
(0, utilities_1.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
*/
function setIconOptions(options) {
_iconSettings.__options = tslib_1.__assign(tslib_1.__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 () {
(0, utilities_1.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
@@ -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';
+14
View File
@@ -0,0 +1,14 @@
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.getIconClassName = exports.setIconOptions = exports.unregisterIcons = exports.registerIconAlias = exports.registerIcons = exports.getIcon = exports.buildClassMap = void 0;
var buildClassMap_1 = require("./buildClassMap");
Object.defineProperty(exports, "buildClassMap", { enumerable: true, get: function () { return buildClassMap_1.buildClassMap; } });
var icons_1 = require("./icons");
Object.defineProperty(exports, "getIcon", { enumerable: true, get: function () { return icons_1.getIcon; } });
Object.defineProperty(exports, "registerIcons", { enumerable: true, get: function () { return icons_1.registerIcons; } });
Object.defineProperty(exports, "registerIconAlias", { enumerable: true, get: function () { return icons_1.registerIconAlias; } });
Object.defineProperty(exports, "unregisterIcons", { enumerable: true, get: function () { return icons_1.unregisterIcons; } });
Object.defineProperty(exports, "setIconOptions", { enumerable: true, get: function () { return icons_1.setIconOptions; } });
var getIconClassName_1 = require("./getIconClassName");
Object.defineProperty(exports, "getIconClassName", { enumerable: true, get: function () { return getIconClassName_1.getIconClassName; } });
//# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["utilities/index.ts"],"names":[],"mappings":";;;AAAA,iDAAgD;AAAvC,8GAAA,aAAa,OAAA;AAEtB,iCAAqG;AAA5F,gGAAA,OAAO,OAAA;AAAE,sGAAA,aAAa,OAAA;AAAE,0GAAA,iBAAiB,OAAA;AAAE,wGAAA,eAAe,OAAA;AAAE,uGAAA,cAAc,OAAA;AAEnF,uDAAsD;AAA7C,oHAAA,gBAAgB,OAAA","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