Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@uifabric/styling

Package Overview
Dependencies
Maintainers
6
Versions
422
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@uifabric/styling - npm Package Compare versions

Comparing version 7.16.7 to 7.16.8

15

CHANGELOG.md
# Change Log - @uifabric/styling
This log was last generated on Wed, 23 Sep 2020 12:22:41 GMT and should not be manually modified.
This log was last generated on Fri, 25 Sep 2020 12:21:26 GMT and should not be manually modified.
<!-- Start content -->
## [7.16.8](https://github.com/microsoft/fluentui/tree/@uifabric/styling_v7.16.8)
Fri, 25 Sep 2020 12:21:26 GMT
[Compare changes](https://github.com/microsoft/fluentui/compare/@uifabric/styling_v7.16.7..@uifabric/styling_v7.16.8)
### Patches
- Move AnimationStyles code to theme package. ([PR #15162](https://github.com/microsoft/fluentui/pull/15162) by xgao@microsoft.com)
- Move createTheme from styling to theme package. ([PR #15163](https://github.com/microsoft/fluentui/pull/15163) by xgao@microsoft.com)
- Add missing index from import path in fonts.ts ([PR #15230](https://github.com/microsoft/fluentui/pull/15230) by xgao@microsoft.com)
## [7.16.7](https://github.com/microsoft/fluentui/tree/@uifabric/styling_v7.16.7)
Wed, 23 Sep 2020 12:22:41 GMT
Wed, 23 Sep 2020 12:27:48 GMT
[Compare changes](https://github.com/microsoft/fluentui/compare/@uifabric/styling_v7.16.6..@uifabric/styling_v7.16.7)

@@ -11,0 +22,0 @@

91

dist/styling.d.ts

@@ -0,4 +1,7 @@

import { AnimationStyles } from '@fluentui/theme/lib/motion/AnimationStyles';
import { AnimationVariables } from '@fluentui/theme/lib/motion/AnimationStyles';
import { concatStyleSets } from '@uifabric/merge-styles';
import { concatStyleSetsWithProps } from '@uifabric/merge-styles';
import { createFontStyles } from '@fluentui/theme/lib/fonts';
import { createFontStyles } from '@fluentui/theme/lib/fonts/index';
import { createTheme } from '@fluentui/theme/lib/createTheme';
import { DefaultEffects } from '@fluentui/theme/lib/effects/DefaultEffects';

@@ -8,5 +11,7 @@ import { DefaultFontStyles } from '@fluentui/theme/lib/fonts/DefaultFontStyles';

import { fontFace } from '@uifabric/merge-styles';
import { FontSizes } from '@fluentui/theme/lib/fonts';
import { FontWeights } from '@fluentui/theme/lib/fonts';
import { IconFontSizes } from '@fluentui/theme/lib/fonts';
import { FontSizes } from '@fluentui/theme/lib/fonts/index';
import { FontWeights } from '@fluentui/theme/lib/fonts/index';
import { IAnimationStyles } from '@fluentui/theme/lib/types/IAnimationStyles';
import { IAnimationVariables } from '@fluentui/theme/lib/types/IAnimationStyles';
import { IconFontSizes } from '@fluentui/theme/lib/fonts/index';
import { ICSPSettings } from '@uifabric/merge-styles';

@@ -44,15 +49,6 @@ import { ICustomizerContext } from '@uifabric/utilities';

};
export { AnimationStyles }
export { AnimationVariables }
/**
* All Fabric standard animations, exposed as json objects referencing predefined
* keyframes. These objects can be mixed in with other class definitions.
*/
export declare const AnimationStyles: IAnimationStyles;
/**
* Exporting raw duraction values and easing functions to be used in custom animations
*/
export declare const AnimationVariables: IAnimationVariables;
/**
* Builds a class names object from a given map.

@@ -77,9 +73,3 @@ *

export { createFontStyles }
/**
* Creates a custom theme definition which can be used with the Customizer.
* @param theme - Partial theme object.
* @param depComments - Whether to include deprecated tags as comments for deprecated slots.
*/
export declare function createTheme(theme: IPartialTheme, depComments?: boolean): ITheme;
export { createTheme }
export { DefaultEffects }

@@ -285,59 +275,6 @@ export { DefaultFontStyles }

export declare const HighContrastSelectorWhite = "@media screen and (-ms-high-contrast: black-on-white)";
export { IAnimationStyles }
export { IAnimationVariables }
/**
* All Fabric standard animations, exposed as json objects referencing predefined
* keyframes. These objects can be mixed in with other class definitions.
* {@docCategory IAnimationStyles}
*/
export declare interface IAnimationStyles {
slideRightIn10: IRawStyle;
slideRightIn20: IRawStyle;
slideRightIn40: IRawStyle;
slideRightIn400: IRawStyle;
slideLeftIn10: IRawStyle;
slideLeftIn20: IRawStyle;
slideLeftIn40: IRawStyle;
slideLeftIn400: IRawStyle;
slideUpIn10: IRawStyle;
slideUpIn20: IRawStyle;
slideDownIn10: IRawStyle;
slideDownIn20: IRawStyle;
slideRightOut10: IRawStyle;
slideRightOut20: IRawStyle;
slideRightOut40: IRawStyle;
slideRightOut400: IRawStyle;
slideLeftOut10: IRawStyle;
slideLeftOut20: IRawStyle;
slideLeftOut40: IRawStyle;
slideLeftOut400: IRawStyle;
slideUpOut10: IRawStyle;
slideUpOut20: IRawStyle;
slideDownOut10: IRawStyle;
slideDownOut20: IRawStyle;
scaleUpIn100: IRawStyle;
scaleDownIn100: IRawStyle;
scaleUpOut103: IRawStyle;
scaleDownOut98: IRawStyle;
fadeIn100: IRawStyle;
fadeIn200: IRawStyle;
fadeIn400: IRawStyle;
fadeIn500: IRawStyle;
fadeOut100: IRawStyle;
fadeOut200: IRawStyle;
fadeOut400: IRawStyle;
fadeOut500: IRawStyle;
rotate90deg: IRawStyle;
rotateN90deg: IRawStyle;
}
export declare interface IAnimationVariables {
easeFunction1: string;
easeFunction2: string;
durationValue1: string;
durationValue2: string;
durationValue3: string;
durationValue4: string;
}
/**
* {@docCategory IColorClassNames}

@@ -344,0 +281,0 @@ */

@@ -7,5 +7,8 @@ ## API Report File for "@uifabric/styling"

import { AnimationStyles } from '@fluentui/theme/lib/motion/AnimationStyles';
import { AnimationVariables } from '@fluentui/theme/lib/motion/AnimationStyles';
import { concatStyleSets } from '@uifabric/merge-styles';
import { concatStyleSetsWithProps } from '@uifabric/merge-styles';
import { createFontStyles } from '@fluentui/theme/lib/fonts';
import { createFontStyles } from '@fluentui/theme/lib/fonts/index';
import { createTheme } from '@fluentui/theme/lib/createTheme';
import { DefaultEffects } from '@fluentui/theme/lib/effects/DefaultEffects';

@@ -15,5 +18,7 @@ import { DefaultFontStyles } from '@fluentui/theme/lib/fonts/DefaultFontStyles';

import { fontFace } from '@uifabric/merge-styles';
import { FontSizes } from '@fluentui/theme/lib/fonts';
import { FontWeights } from '@fluentui/theme/lib/fonts';
import { IconFontSizes } from '@fluentui/theme/lib/fonts';
import { FontSizes } from '@fluentui/theme/lib/fonts/index';
import { FontWeights } from '@fluentui/theme/lib/fonts/index';
import { IAnimationStyles } from '@fluentui/theme/lib/types/IAnimationStyles';
import { IAnimationVariables } from '@fluentui/theme/lib/types/IAnimationStyles';
import { IconFontSizes } from '@fluentui/theme/lib/fonts/index';
import { ICSPSettings } from '@uifabric/merge-styles';

@@ -50,7 +55,5 @@ import { ICustomizerContext } from '@uifabric/utilities';

// @public
export const AnimationStyles: IAnimationStyles;
export { AnimationStyles }
// @public
export const AnimationVariables: IAnimationVariables;
export { AnimationVariables }

@@ -73,4 +76,3 @@ // @public

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

@@ -158,97 +160,5 @@ export { DefaultEffects }

// @public
export interface IAnimationStyles {
// (undocumented)
fadeIn100: IRawStyle;
// (undocumented)
fadeIn200: IRawStyle;
// (undocumented)
fadeIn400: IRawStyle;
// (undocumented)
fadeIn500: IRawStyle;
// (undocumented)
fadeOut100: IRawStyle;
// (undocumented)
fadeOut200: IRawStyle;
// (undocumented)
fadeOut400: IRawStyle;
// (undocumented)
fadeOut500: IRawStyle;
// (undocumented)
rotate90deg: IRawStyle;
// (undocumented)
rotateN90deg: IRawStyle;
// (undocumented)
scaleDownIn100: IRawStyle;
// (undocumented)
scaleDownOut98: IRawStyle;
// (undocumented)
scaleUpIn100: IRawStyle;
// (undocumented)
scaleUpOut103: IRawStyle;
// (undocumented)
slideDownIn10: IRawStyle;
// (undocumented)
slideDownIn20: IRawStyle;
// (undocumented)
slideDownOut10: IRawStyle;
// (undocumented)
slideDownOut20: IRawStyle;
// (undocumented)
slideLeftIn10: IRawStyle;
// (undocumented)
slideLeftIn20: IRawStyle;
// (undocumented)
slideLeftIn40: IRawStyle;
// (undocumented)
slideLeftIn400: IRawStyle;
// (undocumented)
slideLeftOut10: IRawStyle;
// (undocumented)
slideLeftOut20: IRawStyle;
// (undocumented)
slideLeftOut40: IRawStyle;
// (undocumented)
slideLeftOut400: IRawStyle;
// (undocumented)
slideRightIn10: IRawStyle;
// (undocumented)
slideRightIn20: IRawStyle;
// (undocumented)
slideRightIn40: IRawStyle;
// (undocumented)
slideRightIn400: IRawStyle;
// (undocumented)
slideRightOut10: IRawStyle;
// (undocumented)
slideRightOut20: IRawStyle;
// (undocumented)
slideRightOut40: IRawStyle;
// (undocumented)
slideRightOut400: IRawStyle;
// (undocumented)
slideUpIn10: IRawStyle;
// (undocumented)
slideUpIn20: IRawStyle;
// (undocumented)
slideUpOut10: IRawStyle;
// (undocumented)
slideUpOut20: IRawStyle;
}
export { IAnimationStyles }
// @public (undocumented)
export interface IAnimationVariables {
// (undocumented)
durationValue1: string;
// (undocumented)
durationValue2: string;
// (undocumented)
durationValue3: string;
// (undocumented)
durationValue4: string;
// (undocumented)
easeFunction1: string;
// (undocumented)
easeFunction2: string;
}
export { IAnimationVariables }

@@ -255,0 +165,0 @@ export { IconFontSizes }

@@ -1,54 +0,1 @@

import { IRawStyle } from '@uifabric/merge-styles';
/**
* All Fabric standard animations, exposed as json objects referencing predefined
* keyframes. These objects can be mixed in with other class definitions.
* {@docCategory IAnimationStyles}
*/
export interface IAnimationStyles {
slideRightIn10: IRawStyle;
slideRightIn20: IRawStyle;
slideRightIn40: IRawStyle;
slideRightIn400: IRawStyle;
slideLeftIn10: IRawStyle;
slideLeftIn20: IRawStyle;
slideLeftIn40: IRawStyle;
slideLeftIn400: IRawStyle;
slideUpIn10: IRawStyle;
slideUpIn20: IRawStyle;
slideDownIn10: IRawStyle;
slideDownIn20: IRawStyle;
slideRightOut10: IRawStyle;
slideRightOut20: IRawStyle;
slideRightOut40: IRawStyle;
slideRightOut400: IRawStyle;
slideLeftOut10: IRawStyle;
slideLeftOut20: IRawStyle;
slideLeftOut40: IRawStyle;
slideLeftOut400: IRawStyle;
slideUpOut10: IRawStyle;
slideUpOut20: IRawStyle;
slideDownOut10: IRawStyle;
slideDownOut20: IRawStyle;
scaleUpIn100: IRawStyle;
scaleDownIn100: IRawStyle;
scaleUpOut103: IRawStyle;
scaleDownOut98: IRawStyle;
fadeIn100: IRawStyle;
fadeIn200: IRawStyle;
fadeIn400: IRawStyle;
fadeIn500: IRawStyle;
fadeOut100: IRawStyle;
fadeOut200: IRawStyle;
fadeOut400: IRawStyle;
fadeOut500: IRawStyle;
rotate90deg: IRawStyle;
rotateN90deg: IRawStyle;
}
export interface IAnimationVariables {
easeFunction1: string;
easeFunction2: string;
durationValue1: string;
durationValue2: string;
durationValue3: string;
durationValue4: string;
}
export * from '@fluentui/theme/lib/types/IAnimationStyles';

@@ -1,10 +0,1 @@

import { IAnimationStyles, IAnimationVariables } from '../interfaces/index';
/**
* Exporting raw duraction values and easing functions to be used in custom animations
*/
export declare const AnimationVariables: IAnimationVariables;
/**
* All Fabric standard animations, exposed as json objects referencing predefined
* keyframes. These objects can be mixed in with other class definitions.
*/
export declare const AnimationStyles: IAnimationStyles;
export * from '@fluentui/theme/lib/motion/AnimationStyles';

@@ -1,155 +0,6 @@

define(["require", "exports", "@uifabric/merge-styles"], function (require, exports, merge_styles_1) {
define(["require", "exports", "tslib", "@fluentui/theme/lib/motion/AnimationStyles"], function (require, exports, tslib_1, AnimationStyles_1) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
/* Register the keyframes */
var EASING_FUNCTION_1 = 'cubic-bezier(.1,.9,.2,1)';
var EASING_FUNCTION_2 = 'cubic-bezier(.1,.25,.75,.9)';
var DURATION_1 = '0.167s';
var DURATION_2 = '0.267s';
var DURATION_3 = '0.367s';
var DURATION_4 = '0.467s';
var FADE_IN = merge_styles_1.keyframes({
from: { opacity: 0 },
to: { opacity: 1 },
});
var FADE_OUT = merge_styles_1.keyframes({
from: { opacity: 1 },
to: { opacity: 0, visibility: 'hidden' },
});
var SLIDE_RIGHT_IN10 = _createSlideInX(-10);
var SLIDE_RIGHT_IN20 = _createSlideInX(-20);
var SLIDE_RIGHT_IN40 = _createSlideInX(-40);
var SLIDE_RIGHT_IN400 = _createSlideInX(-400);
var SLIDE_LEFT_IN10 = _createSlideInX(10);
var SLIDE_LEFT_IN20 = _createSlideInX(20);
var SLIDE_LEFT_IN40 = _createSlideInX(40);
var SLIDE_LEFT_IN400 = _createSlideInX(400);
var SLIDE_UP_IN10 = _createSlideInY(10);
var SLIDE_UP_IN20 = _createSlideInY(20);
var SLIDE_DOWN_IN10 = _createSlideInY(-10);
var SLIDE_DOWN_IN20 = _createSlideInY(-20);
var SLIDE_RIGHT_OUT10 = _createSlideOutX(10);
var SLIDE_RIGHT_OUT20 = _createSlideOutX(20);
var SLIDE_RIGHT_OUT40 = _createSlideOutX(40);
var SLIDE_RIGHT_OUT400 = _createSlideOutX(400);
var SLIDE_LEFT_OUT10 = _createSlideOutX(-10);
var SLIDE_LEFT_OUT20 = _createSlideOutX(-20);
var SLIDE_LEFT_OUT40 = _createSlideOutX(-40);
var SLIDE_LEFT_OUT400 = _createSlideOutX(-400);
var SLIDE_UP_OUT10 = _createSlideOutY(-10);
var SLIDE_UP_OUT20 = _createSlideOutY(-20);
var SLIDE_DOWN_OUT10 = _createSlideOutY(10);
var SLIDE_DOWN_OUT20 = _createSlideOutY(20);
var SCALE_UP100 = merge_styles_1.keyframes({
from: { transform: 'scale3d(.98,.98,1)' },
to: { transform: 'scale3d(1,1,1)' },
});
var SCALE_DOWN98 = merge_styles_1.keyframes({
from: { transform: 'scale3d(1,1,1)' },
to: { transform: 'scale3d(.98,.98,1)' },
});
var SCALE_DOWN100 = merge_styles_1.keyframes({
from: { transform: 'scale3d(1.03,1.03,1)' },
to: { transform: 'scale3d(1,1,1)' },
});
var SCALE_UP103 = merge_styles_1.keyframes({
from: { transform: 'scale3d(1,1,1)' },
to: { transform: 'scale3d(1.03,1.03,1)' },
});
var ROTATE90 = merge_styles_1.keyframes({
from: { transform: 'rotateZ(0deg)' },
to: { transform: 'rotateZ(90deg)' },
});
var ROTATE_N90 = merge_styles_1.keyframes({
from: { transform: 'rotateZ(0deg)' },
to: { transform: 'rotateZ(-90deg)' },
});
/**
* Exporting raw duraction values and easing functions to be used in custom animations
*/
exports.AnimationVariables = {
easeFunction1: EASING_FUNCTION_1,
easeFunction2: EASING_FUNCTION_2,
durationValue1: DURATION_1,
durationValue2: DURATION_2,
durationValue3: DURATION_3,
durationValue4: DURATION_4,
};
/**
* All Fabric standard animations, exposed as json objects referencing predefined
* keyframes. These objects can be mixed in with other class definitions.
*/
exports.AnimationStyles = {
slideRightIn10: _createAnimation(FADE_IN + "," + SLIDE_RIGHT_IN10, DURATION_3, EASING_FUNCTION_1),
slideRightIn20: _createAnimation(FADE_IN + "," + SLIDE_RIGHT_IN20, DURATION_3, EASING_FUNCTION_1),
slideRightIn40: _createAnimation(FADE_IN + "," + SLIDE_RIGHT_IN40, DURATION_3, EASING_FUNCTION_1),
slideRightIn400: _createAnimation(FADE_IN + "," + SLIDE_RIGHT_IN400, DURATION_3, EASING_FUNCTION_1),
slideLeftIn10: _createAnimation(FADE_IN + "," + SLIDE_LEFT_IN10, DURATION_3, EASING_FUNCTION_1),
slideLeftIn20: _createAnimation(FADE_IN + "," + SLIDE_LEFT_IN20, DURATION_3, EASING_FUNCTION_1),
slideLeftIn40: _createAnimation(FADE_IN + "," + SLIDE_LEFT_IN40, DURATION_3, EASING_FUNCTION_1),
slideLeftIn400: _createAnimation(FADE_IN + "," + SLIDE_LEFT_IN400, DURATION_3, EASING_FUNCTION_1),
slideUpIn10: _createAnimation(FADE_IN + "," + SLIDE_UP_IN10, DURATION_3, EASING_FUNCTION_1),
slideUpIn20: _createAnimation(FADE_IN + "," + SLIDE_UP_IN20, DURATION_3, EASING_FUNCTION_1),
slideDownIn10: _createAnimation(FADE_IN + "," + SLIDE_DOWN_IN10, DURATION_3, EASING_FUNCTION_1),
slideDownIn20: _createAnimation(FADE_IN + "," + SLIDE_DOWN_IN20, DURATION_3, EASING_FUNCTION_1),
slideRightOut10: _createAnimation(FADE_OUT + "," + SLIDE_RIGHT_OUT10, DURATION_3, EASING_FUNCTION_1),
slideRightOut20: _createAnimation(FADE_OUT + "," + SLIDE_RIGHT_OUT20, DURATION_3, EASING_FUNCTION_1),
slideRightOut40: _createAnimation(FADE_OUT + "," + SLIDE_RIGHT_OUT40, DURATION_3, EASING_FUNCTION_1),
slideRightOut400: _createAnimation(FADE_OUT + "," + SLIDE_RIGHT_OUT400, DURATION_3, EASING_FUNCTION_1),
slideLeftOut10: _createAnimation(FADE_OUT + "," + SLIDE_LEFT_OUT10, DURATION_3, EASING_FUNCTION_1),
slideLeftOut20: _createAnimation(FADE_OUT + "," + SLIDE_LEFT_OUT20, DURATION_3, EASING_FUNCTION_1),
slideLeftOut40: _createAnimation(FADE_OUT + "," + SLIDE_LEFT_OUT40, DURATION_3, EASING_FUNCTION_1),
slideLeftOut400: _createAnimation(FADE_OUT + "," + SLIDE_LEFT_OUT400, DURATION_3, EASING_FUNCTION_1),
slideUpOut10: _createAnimation(FADE_OUT + "," + SLIDE_UP_OUT10, DURATION_3, EASING_FUNCTION_1),
slideUpOut20: _createAnimation(FADE_OUT + "," + SLIDE_UP_OUT20, DURATION_3, EASING_FUNCTION_1),
slideDownOut10: _createAnimation(FADE_OUT + "," + SLIDE_DOWN_OUT10, DURATION_3, EASING_FUNCTION_1),
slideDownOut20: _createAnimation(FADE_OUT + "," + SLIDE_DOWN_OUT20, DURATION_3, EASING_FUNCTION_1),
scaleUpIn100: _createAnimation(FADE_IN + "," + SCALE_UP100, DURATION_3, EASING_FUNCTION_1),
scaleDownIn100: _createAnimation(FADE_IN + "," + SCALE_DOWN100, DURATION_3, EASING_FUNCTION_1),
scaleUpOut103: _createAnimation(FADE_OUT + "," + SCALE_UP103, DURATION_1, EASING_FUNCTION_2),
scaleDownOut98: _createAnimation(FADE_OUT + "," + SCALE_DOWN98, DURATION_1, EASING_FUNCTION_2),
fadeIn100: _createAnimation(FADE_IN, DURATION_1, EASING_FUNCTION_2),
fadeIn200: _createAnimation(FADE_IN, DURATION_2, EASING_FUNCTION_2),
fadeIn400: _createAnimation(FADE_IN, DURATION_3, EASING_FUNCTION_2),
fadeIn500: _createAnimation(FADE_IN, DURATION_4, EASING_FUNCTION_2),
fadeOut100: _createAnimation(FADE_OUT, DURATION_1, EASING_FUNCTION_2),
fadeOut200: _createAnimation(FADE_OUT, DURATION_2, EASING_FUNCTION_2),
fadeOut400: _createAnimation(FADE_OUT, DURATION_3, EASING_FUNCTION_2),
fadeOut500: _createAnimation(FADE_OUT, DURATION_4, EASING_FUNCTION_2),
rotate90deg: _createAnimation(ROTATE90, '0.1s', EASING_FUNCTION_2),
rotateN90deg: _createAnimation(ROTATE_N90, '0.1s', EASING_FUNCTION_2),
};
function _createAnimation(animationName, animationDuration, animationTimingFunction) {
return {
animationName: animationName,
animationDuration: animationDuration,
animationTimingFunction: animationTimingFunction,
animationFillMode: 'both',
};
}
function _createSlideInX(fromX) {
return merge_styles_1.keyframes({
from: { transform: "translate3d(" + fromX + "px,0,0)" },
to: { transform: "translate3d(0,0,0)" },
});
}
function _createSlideInY(fromY) {
return merge_styles_1.keyframes({
from: { transform: "translate3d(0," + fromY + "px,0)" },
to: { transform: "translate3d(0,0,0)" },
});
}
function _createSlideOutX(toX) {
return merge_styles_1.keyframes({
from: { transform: "translate3d(0,0,0)" },
to: { transform: "translate3d(" + toX + "px,0,0)" },
});
}
function _createSlideOutY(toY) {
return merge_styles_1.keyframes({
from: { transform: "translate3d(0,0,0)" },
to: { transform: "translate3d(0," + toY + "px,0)" },
});
}
tslib_1.__exportStar(AnimationStyles_1, exports);
});
//# sourceMappingURL=AnimationStyles.js.map

@@ -1,1 +0,1 @@

export { LocalizedFontNames, LocalizedFontFamilies, FontSizes, FontWeights, IconFontSizes, createFontStyles, } from '@fluentui/theme/lib/fonts';
export { LocalizedFontNames, LocalizedFontFamilies, FontSizes, FontWeights, IconFontSizes, createFontStyles, } from '@fluentui/theme/lib/fonts/index';

@@ -1,11 +0,11 @@

define(["require", "exports", "@fluentui/theme/lib/fonts"], function (require, exports, fonts_1) {
define(["require", "exports", "@fluentui/theme/lib/fonts/index"], function (require, exports, index_1) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.LocalizedFontNames = fonts_1.LocalizedFontNames;
exports.LocalizedFontFamilies = fonts_1.LocalizedFontFamilies;
exports.FontSizes = fonts_1.FontSizes;
exports.FontWeights = fonts_1.FontWeights;
exports.IconFontSizes = fonts_1.IconFontSizes;
exports.createFontStyles = fonts_1.createFontStyles;
exports.LocalizedFontNames = index_1.LocalizedFontNames;
exports.LocalizedFontFamilies = index_1.LocalizedFontFamilies;
exports.FontSizes = index_1.FontSizes;
exports.FontWeights = index_1.FontWeights;
exports.IconFontSizes = index_1.IconFontSizes;
exports.createFontStyles = index_1.createFontStyles;
});
//# sourceMappingURL=fonts.js.map
import { ITheme, IPartialTheme } from '../interfaces/index';
export { createTheme } from '@fluentui/theme/lib/createTheme';
export declare const ThemeSettingName = "theme";

@@ -26,7 +27,1 @@ export declare function initializeThemeInCustomizations(): void;

export declare function loadTheme(theme: IPartialTheme, depComments?: boolean): ITheme;
/**
* Creates a custom theme definition which can be used with the Customizer.
* @param theme - Partial theme object.
* @param depComments - Whether to include deprecated tags as comments for deprecated slots.
*/
export declare function createTheme(theme: IPartialTheme, depComments?: boolean): ITheme;

@@ -1,11 +0,6 @@

define(["require", "exports", "tslib", "@uifabric/utilities", "./DefaultFontStyles", "./DefaultPalette", "./DefaultSpacing", "@microsoft/load-themed-styles", "./DefaultEffects"], function (require, exports, tslib_1, utilities_1, DefaultFontStyles_1, DefaultPalette_1, DefaultSpacing_1, load_themed_styles_1, DefaultEffects_1) {
define(["require", "exports", "tslib", "@uifabric/utilities", "@microsoft/load-themed-styles", "@fluentui/theme/lib/createTheme", "@fluentui/theme/lib/createTheme"], function (require, exports, tslib_1, utilities_1, load_themed_styles_1, createTheme_1, createTheme_2) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var _theme = createTheme({
palette: DefaultPalette_1.DefaultPalette,
semanticColors: _makeSemanticColors(DefaultPalette_1.DefaultPalette, DefaultEffects_1.DefaultEffects, undefined, false, false),
fonts: DefaultFontStyles_1.DefaultFontStyles,
isInverted: false,
disableGlobalClassNames: false,
});
exports.createTheme = createTheme_2.createTheme;
var _theme = createTheme_1.createTheme({});
var _onThemeChangeCallbacks = [];

@@ -20,3 +15,3 @@ exports.ThemeSettingName = 'theme';

if ((_c = (_b = win) === null || _b === void 0 ? void 0 : _b.FabricConfig) === null || _c === void 0 ? void 0 : _c.theme) {
_theme = createTheme(win.FabricConfig.theme);
_theme = createTheme_1.createTheme(win.FabricConfig.theme);
}

@@ -36,3 +31,3 @@ // Set the default theme.

if (depComments === true) {
_theme = createTheme({}, depComments);
_theme = createTheme_1.createTheme({}, depComments);
}

@@ -73,3 +68,3 @@ return _theme;

if (depComments === void 0) { depComments = false; }
_theme = createTheme(theme, depComments);
_theme = createTheme_1.createTheme(theme, depComments);
// Invoke the legacy method of theming the page as well.

@@ -111,81 +106,3 @@ 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)));

}
/**
* Creates a custom theme definition which can be used with the Customizer.
* @param theme - Partial theme object.
* @param depComments - Whether to include deprecated tags as comments for deprecated slots.
*/
function createTheme(theme, depComments) {
if (depComments === void 0) { depComments = false; }
var newPalette = tslib_1.__assign(tslib_1.__assign({}, DefaultPalette_1.DefaultPalette), theme.palette);
var newEffects = tslib_1.__assign(tslib_1.__assign({}, DefaultEffects_1.DefaultEffects), theme.effects);
if (!theme.palette || !theme.palette.accent) {
newPalette.accent = newPalette.themePrimary;
}
// mix in custom overrides with good slots first, since custom overrides might be used in fixing deprecated slots
var newSemanticColors = tslib_1.__assign(tslib_1.__assign({}, _makeSemanticColors(newPalette, newEffects, theme.semanticColors, !!theme.isInverted, depComments)), theme.semanticColors);
var defaultFontStyles = tslib_1.__assign({}, DefaultFontStyles_1.DefaultFontStyles);
if (theme.defaultFontStyle) {
for (var _i = 0, _a = Object.keys(defaultFontStyles); _i < _a.length; _i++) {
var fontStyle = _a[_i];
defaultFontStyles[fontStyle] = utilities_1.merge({}, defaultFontStyles[fontStyle], theme.defaultFontStyle);
}
}
if (theme.fonts) {
for (var _b = 0, _c = Object.keys(theme.fonts); _b < _c.length; _b++) {
var fontStyle = _c[_b];
defaultFontStyles[fontStyle] = utilities_1.merge({}, defaultFontStyles[fontStyle], theme.fonts[fontStyle]);
}
}
return {
palette: newPalette,
fonts: tslib_1.__assign({}, defaultFontStyles),
rtl: theme.rtl,
semanticColors: newSemanticColors,
isInverted: !!theme.isInverted,
disableGlobalClassNames: !!theme.disableGlobalClassNames,
spacing: tslib_1.__assign(tslib_1.__assign({}, DefaultSpacing_1.DefaultSpacing), theme.spacing),
effects: newEffects,
};
}
exports.createTheme = createTheme;
/** Generates all the semantic slot colors based on the theme so far
* We'll use these as fallbacks for semantic slots that the passed in theme did not define.
* The caller must still mix in the customized semantic slots at the end.
*/
function _makeSemanticColors(p, e, s, isInverted, depComments) {
var toReturn = tslib_1.__assign({
// DEFAULTS
bodyBackground: p.white, bodyBackgroundHovered: p.neutralLighter, bodyBackgroundChecked: p.neutralLight, bodyStandoutBackground: p.neutralLighterAlt, bodyFrameBackground: p.white, bodyFrameDivider: p.neutralLight, bodyText: p.neutralPrimary, bodyTextChecked: p.black, bodySubtext: p.neutralSecondary, bodyDivider: p.neutralLight, disabledBodyText: p.neutralTertiary, disabledBodySubtext: p.neutralTertiaryAlt, disabledBorder: p.neutralTertiaryAlt, focusBorder: p.neutralSecondary, cardStandoutBackground: p.white, cardShadow: e.elevation4, cardShadowHovered: '', variantBorder: p.neutralLight, variantBorderHovered: p.neutralTertiary, defaultStateBackground: p.neutralLighterAlt,
// LINKS
actionLink: p.neutralPrimary, actionLinkHovered: p.neutralDark, link: p.themePrimary, linkHovered: p.themeDarker,
// BUTTONS
buttonBackground: p.white, buttonBackgroundChecked: p.neutralTertiaryAlt, buttonBackgroundHovered: p.neutralLighter, buttonBackgroundCheckedHovered: p.neutralLight, buttonBackgroundPressed: p.neutralLight, buttonBackgroundDisabled: p.neutralLighter, buttonBorder: p.neutralSecondaryAlt, buttonText: p.neutralPrimary, buttonTextHovered: p.neutralDark, buttonTextChecked: p.neutralDark, buttonTextCheckedHovered: p.black, buttonTextPressed: p.neutralDark, buttonTextDisabled: p.neutralTertiary, buttonBorderDisabled: p.neutralLighter, primaryButtonBackground: p.themePrimary, primaryButtonBackgroundHovered: p.themeDarkAlt, primaryButtonBackgroundPressed: p.themeDark, primaryButtonBackgroundDisabled: p.neutralLighter, primaryButtonBorder: 'transparent', primaryButtonText: p.white, primaryButtonTextHovered: p.white, primaryButtonTextPressed: p.white, primaryButtonTextDisabled: p.neutralQuaternary, accentButtonBackground: p.accent, accentButtonText: p.white,
// INPUTS
inputBorder: p.neutralSecondary, inputBorderHovered: p.neutralPrimary, inputBackground: p.white, inputBackgroundChecked: p.themePrimary, inputBackgroundCheckedHovered: p.themeDark, inputPlaceholderBackgroundChecked: p.themeLighter, inputForegroundChecked: p.white, inputIcon: p.themePrimary, inputIconHovered: p.themeDark, inputIconDisabled: p.neutralTertiary, inputFocusBorderAlt: p.themePrimary, smallInputBorder: p.neutralSecondary, inputText: p.neutralPrimary, inputTextHovered: p.neutralDark, inputPlaceholderText: p.neutralSecondary, disabledBackground: p.neutralLighter, disabledText: p.neutralTertiary, disabledSubtext: p.neutralQuaternary,
// LISTS
listBackground: p.white, listText: p.neutralPrimary, listItemBackgroundHovered: p.neutralLighter, listItemBackgroundChecked: p.neutralLight, listItemBackgroundCheckedHovered: p.neutralQuaternaryAlt, listHeaderBackgroundHovered: p.neutralLighter, listHeaderBackgroundPressed: p.neutralLight,
// MENUS
menuBackground: p.white, menuDivider: p.neutralTertiaryAlt, menuIcon: p.themePrimary, menuHeader: p.themePrimary, menuItemBackgroundHovered: p.neutralLighter, menuItemBackgroundPressed: p.neutralLight, menuItemText: p.neutralPrimary, menuItemTextHovered: p.neutralDark, errorText: !isInverted ? '#a4262c' : '#F1707B', messageText: !isInverted ? '#323130' : '#F3F2F1', messageLink: !isInverted ? '#005A9E' : '#6CB8F6', messageLinkHovered: !isInverted ? '#004578' : '#82C7FF', infoIcon: !isInverted ? '#605e5c' : '#C8C6C4', errorIcon: !isInverted ? '#A80000' : '#F1707B', blockingIcon: !isInverted ? '#FDE7E9' : '#442726', warningIcon: !isInverted ? '#797775' : '#C8C6C4', severeWarningIcon: !isInverted ? '#D83B01' : '#FCE100', successIcon: !isInverted ? '#107C10' : '#92C353', infoBackground: !isInverted ? '#f3f2f1' : '#323130', errorBackground: !isInverted ? '#FDE7E9' : '#442726', blockingBackground: !isInverted ? '#FDE7E9' : '#442726', warningBackground: !isInverted ? '#FFF4CE' : '#433519', severeWarningBackground: !isInverted ? '#FED9CC' : '#4F2A0F', successBackground: !isInverted ? '#DFF6DD' : '#393D1B',
// Deprecated slots, later pass by _fixDeprecatedSlots() for self-referential slots
warningHighlight: !isInverted ? '#ffb900' : '#fff100', warningText: '', successText: !isInverted ? '#107C10' : '#92c353', listTextColor: '', menuItemBackgroundChecked: p.neutralLight }, s);
// second pass for self-referential slots
toReturn = tslib_1.__assign(tslib_1.__assign({}, toReturn), { cardShadowHovered: !isInverted ? e.elevation8 : '0 0 1px ' + toReturn.variantBorderHovered });
return _fixDeprecatedSlots(toReturn, depComments);
}
function _fixDeprecatedSlots(s, depComments) {
// Add @deprecated tag as comment if enabled
var dep = '';
if (depComments === true) {
dep = ' /* @deprecated */';
}
/* eslint-disable deprecation/deprecation */
s.listTextColor = s.listText + dep;
s.menuItemBackgroundChecked += dep;
s.warningHighlight += dep;
s.warningText = s.messageText + dep;
s.successText += dep;
/* eslint-enable deprecation/deprecation */
return s;
}
});
//# sourceMappingURL=theme.js.map
define(["require", "exports", "@uifabric/set-version"], function (require, exports, set_version_1) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
set_version_1.setVersion('@uifabric/styling', '7.16.7');
set_version_1.setVersion('@uifabric/styling', '7.16.8');
});
//# sourceMappingURL=version.js.map

@@ -1,54 +0,1 @@

import { IRawStyle } from '@uifabric/merge-styles';
/**
* All Fabric standard animations, exposed as json objects referencing predefined
* keyframes. These objects can be mixed in with other class definitions.
* {@docCategory IAnimationStyles}
*/
export interface IAnimationStyles {
slideRightIn10: IRawStyle;
slideRightIn20: IRawStyle;
slideRightIn40: IRawStyle;
slideRightIn400: IRawStyle;
slideLeftIn10: IRawStyle;
slideLeftIn20: IRawStyle;
slideLeftIn40: IRawStyle;
slideLeftIn400: IRawStyle;
slideUpIn10: IRawStyle;
slideUpIn20: IRawStyle;
slideDownIn10: IRawStyle;
slideDownIn20: IRawStyle;
slideRightOut10: IRawStyle;
slideRightOut20: IRawStyle;
slideRightOut40: IRawStyle;
slideRightOut400: IRawStyle;
slideLeftOut10: IRawStyle;
slideLeftOut20: IRawStyle;
slideLeftOut40: IRawStyle;
slideLeftOut400: IRawStyle;
slideUpOut10: IRawStyle;
slideUpOut20: IRawStyle;
slideDownOut10: IRawStyle;
slideDownOut20: IRawStyle;
scaleUpIn100: IRawStyle;
scaleDownIn100: IRawStyle;
scaleUpOut103: IRawStyle;
scaleDownOut98: IRawStyle;
fadeIn100: IRawStyle;
fadeIn200: IRawStyle;
fadeIn400: IRawStyle;
fadeIn500: IRawStyle;
fadeOut100: IRawStyle;
fadeOut200: IRawStyle;
fadeOut400: IRawStyle;
fadeOut500: IRawStyle;
rotate90deg: IRawStyle;
rotateN90deg: IRawStyle;
}
export interface IAnimationVariables {
easeFunction1: string;
easeFunction2: string;
durationValue1: string;
durationValue2: string;
durationValue3: string;
durationValue4: string;
}
export * from '@fluentui/theme/lib-commonjs/types/IAnimationStyles';

@@ -1,10 +0,1 @@

import { IAnimationStyles, IAnimationVariables } from '../interfaces/index';
/**
* Exporting raw duraction values and easing functions to be used in custom animations
*/
export declare const AnimationVariables: IAnimationVariables;
/**
* All Fabric standard animations, exposed as json objects referencing predefined
* keyframes. These objects can be mixed in with other class definitions.
*/
export declare const AnimationStyles: IAnimationStyles;
export * from '@fluentui/theme/lib-commonjs/motion/AnimationStyles';
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var merge_styles_1 = require("@uifabric/merge-styles");
/* Register the keyframes */
var EASING_FUNCTION_1 = 'cubic-bezier(.1,.9,.2,1)';
var EASING_FUNCTION_2 = 'cubic-bezier(.1,.25,.75,.9)';
var DURATION_1 = '0.167s';
var DURATION_2 = '0.267s';
var DURATION_3 = '0.367s';
var DURATION_4 = '0.467s';
var FADE_IN = merge_styles_1.keyframes({
from: { opacity: 0 },
to: { opacity: 1 },
});
var FADE_OUT = merge_styles_1.keyframes({
from: { opacity: 1 },
to: { opacity: 0, visibility: 'hidden' },
});
var SLIDE_RIGHT_IN10 = _createSlideInX(-10);
var SLIDE_RIGHT_IN20 = _createSlideInX(-20);
var SLIDE_RIGHT_IN40 = _createSlideInX(-40);
var SLIDE_RIGHT_IN400 = _createSlideInX(-400);
var SLIDE_LEFT_IN10 = _createSlideInX(10);
var SLIDE_LEFT_IN20 = _createSlideInX(20);
var SLIDE_LEFT_IN40 = _createSlideInX(40);
var SLIDE_LEFT_IN400 = _createSlideInX(400);
var SLIDE_UP_IN10 = _createSlideInY(10);
var SLIDE_UP_IN20 = _createSlideInY(20);
var SLIDE_DOWN_IN10 = _createSlideInY(-10);
var SLIDE_DOWN_IN20 = _createSlideInY(-20);
var SLIDE_RIGHT_OUT10 = _createSlideOutX(10);
var SLIDE_RIGHT_OUT20 = _createSlideOutX(20);
var SLIDE_RIGHT_OUT40 = _createSlideOutX(40);
var SLIDE_RIGHT_OUT400 = _createSlideOutX(400);
var SLIDE_LEFT_OUT10 = _createSlideOutX(-10);
var SLIDE_LEFT_OUT20 = _createSlideOutX(-20);
var SLIDE_LEFT_OUT40 = _createSlideOutX(-40);
var SLIDE_LEFT_OUT400 = _createSlideOutX(-400);
var SLIDE_UP_OUT10 = _createSlideOutY(-10);
var SLIDE_UP_OUT20 = _createSlideOutY(-20);
var SLIDE_DOWN_OUT10 = _createSlideOutY(10);
var SLIDE_DOWN_OUT20 = _createSlideOutY(20);
var SCALE_UP100 = merge_styles_1.keyframes({
from: { transform: 'scale3d(.98,.98,1)' },
to: { transform: 'scale3d(1,1,1)' },
});
var SCALE_DOWN98 = merge_styles_1.keyframes({
from: { transform: 'scale3d(1,1,1)' },
to: { transform: 'scale3d(.98,.98,1)' },
});
var SCALE_DOWN100 = merge_styles_1.keyframes({
from: { transform: 'scale3d(1.03,1.03,1)' },
to: { transform: 'scale3d(1,1,1)' },
});
var SCALE_UP103 = merge_styles_1.keyframes({
from: { transform: 'scale3d(1,1,1)' },
to: { transform: 'scale3d(1.03,1.03,1)' },
});
var ROTATE90 = merge_styles_1.keyframes({
from: { transform: 'rotateZ(0deg)' },
to: { transform: 'rotateZ(90deg)' },
});
var ROTATE_N90 = merge_styles_1.keyframes({
from: { transform: 'rotateZ(0deg)' },
to: { transform: 'rotateZ(-90deg)' },
});
/**
* Exporting raw duraction values and easing functions to be used in custom animations
*/
exports.AnimationVariables = {
easeFunction1: EASING_FUNCTION_1,
easeFunction2: EASING_FUNCTION_2,
durationValue1: DURATION_1,
durationValue2: DURATION_2,
durationValue3: DURATION_3,
durationValue4: DURATION_4,
};
/**
* All Fabric standard animations, exposed as json objects referencing predefined
* keyframes. These objects can be mixed in with other class definitions.
*/
exports.AnimationStyles = {
slideRightIn10: _createAnimation(FADE_IN + "," + SLIDE_RIGHT_IN10, DURATION_3, EASING_FUNCTION_1),
slideRightIn20: _createAnimation(FADE_IN + "," + SLIDE_RIGHT_IN20, DURATION_3, EASING_FUNCTION_1),
slideRightIn40: _createAnimation(FADE_IN + "," + SLIDE_RIGHT_IN40, DURATION_3, EASING_FUNCTION_1),
slideRightIn400: _createAnimation(FADE_IN + "," + SLIDE_RIGHT_IN400, DURATION_3, EASING_FUNCTION_1),
slideLeftIn10: _createAnimation(FADE_IN + "," + SLIDE_LEFT_IN10, DURATION_3, EASING_FUNCTION_1),
slideLeftIn20: _createAnimation(FADE_IN + "," + SLIDE_LEFT_IN20, DURATION_3, EASING_FUNCTION_1),
slideLeftIn40: _createAnimation(FADE_IN + "," + SLIDE_LEFT_IN40, DURATION_3, EASING_FUNCTION_1),
slideLeftIn400: _createAnimation(FADE_IN + "," + SLIDE_LEFT_IN400, DURATION_3, EASING_FUNCTION_1),
slideUpIn10: _createAnimation(FADE_IN + "," + SLIDE_UP_IN10, DURATION_3, EASING_FUNCTION_1),
slideUpIn20: _createAnimation(FADE_IN + "," + SLIDE_UP_IN20, DURATION_3, EASING_FUNCTION_1),
slideDownIn10: _createAnimation(FADE_IN + "," + SLIDE_DOWN_IN10, DURATION_3, EASING_FUNCTION_1),
slideDownIn20: _createAnimation(FADE_IN + "," + SLIDE_DOWN_IN20, DURATION_3, EASING_FUNCTION_1),
slideRightOut10: _createAnimation(FADE_OUT + "," + SLIDE_RIGHT_OUT10, DURATION_3, EASING_FUNCTION_1),
slideRightOut20: _createAnimation(FADE_OUT + "," + SLIDE_RIGHT_OUT20, DURATION_3, EASING_FUNCTION_1),
slideRightOut40: _createAnimation(FADE_OUT + "," + SLIDE_RIGHT_OUT40, DURATION_3, EASING_FUNCTION_1),
slideRightOut400: _createAnimation(FADE_OUT + "," + SLIDE_RIGHT_OUT400, DURATION_3, EASING_FUNCTION_1),
slideLeftOut10: _createAnimation(FADE_OUT + "," + SLIDE_LEFT_OUT10, DURATION_3, EASING_FUNCTION_1),
slideLeftOut20: _createAnimation(FADE_OUT + "," + SLIDE_LEFT_OUT20, DURATION_3, EASING_FUNCTION_1),
slideLeftOut40: _createAnimation(FADE_OUT + "," + SLIDE_LEFT_OUT40, DURATION_3, EASING_FUNCTION_1),
slideLeftOut400: _createAnimation(FADE_OUT + "," + SLIDE_LEFT_OUT400, DURATION_3, EASING_FUNCTION_1),
slideUpOut10: _createAnimation(FADE_OUT + "," + SLIDE_UP_OUT10, DURATION_3, EASING_FUNCTION_1),
slideUpOut20: _createAnimation(FADE_OUT + "," + SLIDE_UP_OUT20, DURATION_3, EASING_FUNCTION_1),
slideDownOut10: _createAnimation(FADE_OUT + "," + SLIDE_DOWN_OUT10, DURATION_3, EASING_FUNCTION_1),
slideDownOut20: _createAnimation(FADE_OUT + "," + SLIDE_DOWN_OUT20, DURATION_3, EASING_FUNCTION_1),
scaleUpIn100: _createAnimation(FADE_IN + "," + SCALE_UP100, DURATION_3, EASING_FUNCTION_1),
scaleDownIn100: _createAnimation(FADE_IN + "," + SCALE_DOWN100, DURATION_3, EASING_FUNCTION_1),
scaleUpOut103: _createAnimation(FADE_OUT + "," + SCALE_UP103, DURATION_1, EASING_FUNCTION_2),
scaleDownOut98: _createAnimation(FADE_OUT + "," + SCALE_DOWN98, DURATION_1, EASING_FUNCTION_2),
fadeIn100: _createAnimation(FADE_IN, DURATION_1, EASING_FUNCTION_2),
fadeIn200: _createAnimation(FADE_IN, DURATION_2, EASING_FUNCTION_2),
fadeIn400: _createAnimation(FADE_IN, DURATION_3, EASING_FUNCTION_2),
fadeIn500: _createAnimation(FADE_IN, DURATION_4, EASING_FUNCTION_2),
fadeOut100: _createAnimation(FADE_OUT, DURATION_1, EASING_FUNCTION_2),
fadeOut200: _createAnimation(FADE_OUT, DURATION_2, EASING_FUNCTION_2),
fadeOut400: _createAnimation(FADE_OUT, DURATION_3, EASING_FUNCTION_2),
fadeOut500: _createAnimation(FADE_OUT, DURATION_4, EASING_FUNCTION_2),
rotate90deg: _createAnimation(ROTATE90, '0.1s', EASING_FUNCTION_2),
rotateN90deg: _createAnimation(ROTATE_N90, '0.1s', EASING_FUNCTION_2),
};
function _createAnimation(animationName, animationDuration, animationTimingFunction) {
return {
animationName: animationName,
animationDuration: animationDuration,
animationTimingFunction: animationTimingFunction,
animationFillMode: 'both',
};
}
function _createSlideInX(fromX) {
return merge_styles_1.keyframes({
from: { transform: "translate3d(" + fromX + "px,0,0)" },
to: { transform: "translate3d(0,0,0)" },
});
}
function _createSlideInY(fromY) {
return merge_styles_1.keyframes({
from: { transform: "translate3d(0," + fromY + "px,0)" },
to: { transform: "translate3d(0,0,0)" },
});
}
function _createSlideOutX(toX) {
return merge_styles_1.keyframes({
from: { transform: "translate3d(0,0,0)" },
to: { transform: "translate3d(" + toX + "px,0,0)" },
});
}
function _createSlideOutY(toY) {
return merge_styles_1.keyframes({
from: { transform: "translate3d(0,0,0)" },
to: { transform: "translate3d(0," + toY + "px,0)" },
});
}
var tslib_1 = require("tslib");
tslib_1.__exportStar(require("@fluentui/theme/lib-commonjs/motion/AnimationStyles"), exports);
//# sourceMappingURL=AnimationStyles.js.map

@@ -1,1 +0,1 @@

export { LocalizedFontNames, LocalizedFontFamilies, FontSizes, FontWeights, IconFontSizes, createFontStyles, } from '@fluentui/theme/lib-commonjs/fonts';
export { LocalizedFontNames, LocalizedFontFamilies, FontSizes, FontWeights, IconFontSizes, createFontStyles, } from '@fluentui/theme/lib-commonjs/fonts/index';
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var fonts_1 = require("@fluentui/theme/lib-commonjs/fonts");
exports.LocalizedFontNames = fonts_1.LocalizedFontNames;
exports.LocalizedFontFamilies = fonts_1.LocalizedFontFamilies;
exports.FontSizes = fonts_1.FontSizes;
exports.FontWeights = fonts_1.FontWeights;
exports.IconFontSizes = fonts_1.IconFontSizes;
exports.createFontStyles = fonts_1.createFontStyles;
var index_1 = require("@fluentui/theme/lib-commonjs/fonts/index");
exports.LocalizedFontNames = index_1.LocalizedFontNames;
exports.LocalizedFontFamilies = index_1.LocalizedFontFamilies;
exports.FontSizes = index_1.FontSizes;
exports.FontWeights = index_1.FontWeights;
exports.IconFontSizes = index_1.IconFontSizes;
exports.createFontStyles = index_1.createFontStyles;
//# sourceMappingURL=fonts.js.map
import { ITheme, IPartialTheme } from '../interfaces/index';
export { createTheme } from '@fluentui/theme/lib-commonjs/createTheme';
export declare const ThemeSettingName = "theme";

@@ -26,7 +27,1 @@ export declare function initializeThemeInCustomizations(): void;

export declare function loadTheme(theme: IPartialTheme, depComments?: boolean): ITheme;
/**
* Creates a custom theme definition which can be used with the Customizer.
* @param theme - Partial theme object.
* @param depComments - Whether to include deprecated tags as comments for deprecated slots.
*/
export declare function createTheme(theme: IPartialTheme, depComments?: boolean): ITheme;

@@ -5,14 +5,7 @@ "use strict";

var utilities_1 = require("@uifabric/utilities");
var DefaultFontStyles_1 = require("./DefaultFontStyles");
var DefaultPalette_1 = require("./DefaultPalette");
var DefaultSpacing_1 = require("./DefaultSpacing");
var load_themed_styles_1 = require("@microsoft/load-themed-styles");
var DefaultEffects_1 = require("./DefaultEffects");
var _theme = createTheme({
palette: DefaultPalette_1.DefaultPalette,
semanticColors: _makeSemanticColors(DefaultPalette_1.DefaultPalette, DefaultEffects_1.DefaultEffects, undefined, false, false),
fonts: DefaultFontStyles_1.DefaultFontStyles,
isInverted: false,
disableGlobalClassNames: false,
});
var createTheme_1 = require("@fluentui/theme/lib-commonjs/createTheme");
var createTheme_2 = require("@fluentui/theme/lib-commonjs/createTheme");
exports.createTheme = createTheme_2.createTheme;
var _theme = createTheme_1.createTheme({});
var _onThemeChangeCallbacks = [];

@@ -27,3 +20,3 @@ exports.ThemeSettingName = 'theme';

if ((_c = (_b = win) === null || _b === void 0 ? void 0 : _b.FabricConfig) === null || _c === void 0 ? void 0 : _c.theme) {
_theme = createTheme(win.FabricConfig.theme);
_theme = createTheme_1.createTheme(win.FabricConfig.theme);
}

@@ -43,3 +36,3 @@ // Set the default theme.

if (depComments === true) {
_theme = createTheme({}, depComments);
_theme = createTheme_1.createTheme({}, depComments);
}

@@ -80,3 +73,3 @@ return _theme;

if (depComments === void 0) { depComments = false; }
_theme = createTheme(theme, depComments);
_theme = createTheme_1.createTheme(theme, depComments);
// Invoke the legacy method of theming the page as well.

@@ -118,80 +111,2 @@ 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)));

}
/**
* Creates a custom theme definition which can be used with the Customizer.
* @param theme - Partial theme object.
* @param depComments - Whether to include deprecated tags as comments for deprecated slots.
*/
function createTheme(theme, depComments) {
if (depComments === void 0) { depComments = false; }
var newPalette = tslib_1.__assign(tslib_1.__assign({}, DefaultPalette_1.DefaultPalette), theme.palette);
var newEffects = tslib_1.__assign(tslib_1.__assign({}, DefaultEffects_1.DefaultEffects), theme.effects);
if (!theme.palette || !theme.palette.accent) {
newPalette.accent = newPalette.themePrimary;
}
// mix in custom overrides with good slots first, since custom overrides might be used in fixing deprecated slots
var newSemanticColors = tslib_1.__assign(tslib_1.__assign({}, _makeSemanticColors(newPalette, newEffects, theme.semanticColors, !!theme.isInverted, depComments)), theme.semanticColors);
var defaultFontStyles = tslib_1.__assign({}, DefaultFontStyles_1.DefaultFontStyles);
if (theme.defaultFontStyle) {
for (var _i = 0, _a = Object.keys(defaultFontStyles); _i < _a.length; _i++) {
var fontStyle = _a[_i];
defaultFontStyles[fontStyle] = utilities_1.merge({}, defaultFontStyles[fontStyle], theme.defaultFontStyle);
}
}
if (theme.fonts) {
for (var _b = 0, _c = Object.keys(theme.fonts); _b < _c.length; _b++) {
var fontStyle = _c[_b];
defaultFontStyles[fontStyle] = utilities_1.merge({}, defaultFontStyles[fontStyle], theme.fonts[fontStyle]);
}
}
return {
palette: newPalette,
fonts: tslib_1.__assign({}, defaultFontStyles),
rtl: theme.rtl,
semanticColors: newSemanticColors,
isInverted: !!theme.isInverted,
disableGlobalClassNames: !!theme.disableGlobalClassNames,
spacing: tslib_1.__assign(tslib_1.__assign({}, DefaultSpacing_1.DefaultSpacing), theme.spacing),
effects: newEffects,
};
}
exports.createTheme = createTheme;
/** Generates all the semantic slot colors based on the theme so far
* We'll use these as fallbacks for semantic slots that the passed in theme did not define.
* The caller must still mix in the customized semantic slots at the end.
*/
function _makeSemanticColors(p, e, s, isInverted, depComments) {
var toReturn = tslib_1.__assign({
// DEFAULTS
bodyBackground: p.white, bodyBackgroundHovered: p.neutralLighter, bodyBackgroundChecked: p.neutralLight, bodyStandoutBackground: p.neutralLighterAlt, bodyFrameBackground: p.white, bodyFrameDivider: p.neutralLight, bodyText: p.neutralPrimary, bodyTextChecked: p.black, bodySubtext: p.neutralSecondary, bodyDivider: p.neutralLight, disabledBodyText: p.neutralTertiary, disabledBodySubtext: p.neutralTertiaryAlt, disabledBorder: p.neutralTertiaryAlt, focusBorder: p.neutralSecondary, cardStandoutBackground: p.white, cardShadow: e.elevation4, cardShadowHovered: '', variantBorder: p.neutralLight, variantBorderHovered: p.neutralTertiary, defaultStateBackground: p.neutralLighterAlt,
// LINKS
actionLink: p.neutralPrimary, actionLinkHovered: p.neutralDark, link: p.themePrimary, linkHovered: p.themeDarker,
// BUTTONS
buttonBackground: p.white, buttonBackgroundChecked: p.neutralTertiaryAlt, buttonBackgroundHovered: p.neutralLighter, buttonBackgroundCheckedHovered: p.neutralLight, buttonBackgroundPressed: p.neutralLight, buttonBackgroundDisabled: p.neutralLighter, buttonBorder: p.neutralSecondaryAlt, buttonText: p.neutralPrimary, buttonTextHovered: p.neutralDark, buttonTextChecked: p.neutralDark, buttonTextCheckedHovered: p.black, buttonTextPressed: p.neutralDark, buttonTextDisabled: p.neutralTertiary, buttonBorderDisabled: p.neutralLighter, primaryButtonBackground: p.themePrimary, primaryButtonBackgroundHovered: p.themeDarkAlt, primaryButtonBackgroundPressed: p.themeDark, primaryButtonBackgroundDisabled: p.neutralLighter, primaryButtonBorder: 'transparent', primaryButtonText: p.white, primaryButtonTextHovered: p.white, primaryButtonTextPressed: p.white, primaryButtonTextDisabled: p.neutralQuaternary, accentButtonBackground: p.accent, accentButtonText: p.white,
// INPUTS
inputBorder: p.neutralSecondary, inputBorderHovered: p.neutralPrimary, inputBackground: p.white, inputBackgroundChecked: p.themePrimary, inputBackgroundCheckedHovered: p.themeDark, inputPlaceholderBackgroundChecked: p.themeLighter, inputForegroundChecked: p.white, inputIcon: p.themePrimary, inputIconHovered: p.themeDark, inputIconDisabled: p.neutralTertiary, inputFocusBorderAlt: p.themePrimary, smallInputBorder: p.neutralSecondary, inputText: p.neutralPrimary, inputTextHovered: p.neutralDark, inputPlaceholderText: p.neutralSecondary, disabledBackground: p.neutralLighter, disabledText: p.neutralTertiary, disabledSubtext: p.neutralQuaternary,
// LISTS
listBackground: p.white, listText: p.neutralPrimary, listItemBackgroundHovered: p.neutralLighter, listItemBackgroundChecked: p.neutralLight, listItemBackgroundCheckedHovered: p.neutralQuaternaryAlt, listHeaderBackgroundHovered: p.neutralLighter, listHeaderBackgroundPressed: p.neutralLight,
// MENUS
menuBackground: p.white, menuDivider: p.neutralTertiaryAlt, menuIcon: p.themePrimary, menuHeader: p.themePrimary, menuItemBackgroundHovered: p.neutralLighter, menuItemBackgroundPressed: p.neutralLight, menuItemText: p.neutralPrimary, menuItemTextHovered: p.neutralDark, errorText: !isInverted ? '#a4262c' : '#F1707B', messageText: !isInverted ? '#323130' : '#F3F2F1', messageLink: !isInverted ? '#005A9E' : '#6CB8F6', messageLinkHovered: !isInverted ? '#004578' : '#82C7FF', infoIcon: !isInverted ? '#605e5c' : '#C8C6C4', errorIcon: !isInverted ? '#A80000' : '#F1707B', blockingIcon: !isInverted ? '#FDE7E9' : '#442726', warningIcon: !isInverted ? '#797775' : '#C8C6C4', severeWarningIcon: !isInverted ? '#D83B01' : '#FCE100', successIcon: !isInverted ? '#107C10' : '#92C353', infoBackground: !isInverted ? '#f3f2f1' : '#323130', errorBackground: !isInverted ? '#FDE7E9' : '#442726', blockingBackground: !isInverted ? '#FDE7E9' : '#442726', warningBackground: !isInverted ? '#FFF4CE' : '#433519', severeWarningBackground: !isInverted ? '#FED9CC' : '#4F2A0F', successBackground: !isInverted ? '#DFF6DD' : '#393D1B',
// Deprecated slots, later pass by _fixDeprecatedSlots() for self-referential slots
warningHighlight: !isInverted ? '#ffb900' : '#fff100', warningText: '', successText: !isInverted ? '#107C10' : '#92c353', listTextColor: '', menuItemBackgroundChecked: p.neutralLight }, s);
// second pass for self-referential slots
toReturn = tslib_1.__assign(tslib_1.__assign({}, toReturn), { cardShadowHovered: !isInverted ? e.elevation8 : '0 0 1px ' + toReturn.variantBorderHovered });
return _fixDeprecatedSlots(toReturn, depComments);
}
function _fixDeprecatedSlots(s, depComments) {
// Add @deprecated tag as comment if enabled
var dep = '';
if (depComments === true) {
dep = ' /* @deprecated */';
}
/* eslint-disable deprecation/deprecation */
s.listTextColor = s.listText + dep;
s.menuItemBackgroundChecked += dep;
s.warningHighlight += dep;
s.warningText = s.messageText + dep;
s.successText += dep;
/* eslint-enable deprecation/deprecation */
return s;
}
//# sourceMappingURL=theme.js.map

@@ -6,3 +6,3 @@ "use strict";

var set_version_1 = require("@uifabric/set-version");
set_version_1.setVersion('@uifabric/styling', '7.16.7');
set_version_1.setVersion('@uifabric/styling', '7.16.8');
//# sourceMappingURL=version.js.map

@@ -1,54 +0,1 @@

import { IRawStyle } from '@uifabric/merge-styles';
/**
* All Fabric standard animations, exposed as json objects referencing predefined
* keyframes. These objects can be mixed in with other class definitions.
* {@docCategory IAnimationStyles}
*/
export interface IAnimationStyles {
slideRightIn10: IRawStyle;
slideRightIn20: IRawStyle;
slideRightIn40: IRawStyle;
slideRightIn400: IRawStyle;
slideLeftIn10: IRawStyle;
slideLeftIn20: IRawStyle;
slideLeftIn40: IRawStyle;
slideLeftIn400: IRawStyle;
slideUpIn10: IRawStyle;
slideUpIn20: IRawStyle;
slideDownIn10: IRawStyle;
slideDownIn20: IRawStyle;
slideRightOut10: IRawStyle;
slideRightOut20: IRawStyle;
slideRightOut40: IRawStyle;
slideRightOut400: IRawStyle;
slideLeftOut10: IRawStyle;
slideLeftOut20: IRawStyle;
slideLeftOut40: IRawStyle;
slideLeftOut400: IRawStyle;
slideUpOut10: IRawStyle;
slideUpOut20: IRawStyle;
slideDownOut10: IRawStyle;
slideDownOut20: IRawStyle;
scaleUpIn100: IRawStyle;
scaleDownIn100: IRawStyle;
scaleUpOut103: IRawStyle;
scaleDownOut98: IRawStyle;
fadeIn100: IRawStyle;
fadeIn200: IRawStyle;
fadeIn400: IRawStyle;
fadeIn500: IRawStyle;
fadeOut100: IRawStyle;
fadeOut200: IRawStyle;
fadeOut400: IRawStyle;
fadeOut500: IRawStyle;
rotate90deg: IRawStyle;
rotateN90deg: IRawStyle;
}
export interface IAnimationVariables {
easeFunction1: string;
easeFunction2: string;
durationValue1: string;
durationValue2: string;
durationValue3: string;
durationValue4: string;
}
export * from '@fluentui/theme/lib/types/IAnimationStyles';

@@ -1,10 +0,1 @@

import { IAnimationStyles, IAnimationVariables } from '../interfaces/index';
/**
* Exporting raw duraction values and easing functions to be used in custom animations
*/
export declare const AnimationVariables: IAnimationVariables;
/**
* All Fabric standard animations, exposed as json objects referencing predefined
* keyframes. These objects can be mixed in with other class definitions.
*/
export declare const AnimationStyles: IAnimationStyles;
export * from '@fluentui/theme/lib/motion/AnimationStyles';

@@ -1,152 +0,2 @@

import { keyframes } from '@uifabric/merge-styles';
/* Register the keyframes */
var EASING_FUNCTION_1 = 'cubic-bezier(.1,.9,.2,1)';
var EASING_FUNCTION_2 = 'cubic-bezier(.1,.25,.75,.9)';
var DURATION_1 = '0.167s';
var DURATION_2 = '0.267s';
var DURATION_3 = '0.367s';
var DURATION_4 = '0.467s';
var FADE_IN = keyframes({
from: { opacity: 0 },
to: { opacity: 1 },
});
var FADE_OUT = keyframes({
from: { opacity: 1 },
to: { opacity: 0, visibility: 'hidden' },
});
var SLIDE_RIGHT_IN10 = _createSlideInX(-10);
var SLIDE_RIGHT_IN20 = _createSlideInX(-20);
var SLIDE_RIGHT_IN40 = _createSlideInX(-40);
var SLIDE_RIGHT_IN400 = _createSlideInX(-400);
var SLIDE_LEFT_IN10 = _createSlideInX(10);
var SLIDE_LEFT_IN20 = _createSlideInX(20);
var SLIDE_LEFT_IN40 = _createSlideInX(40);
var SLIDE_LEFT_IN400 = _createSlideInX(400);
var SLIDE_UP_IN10 = _createSlideInY(10);
var SLIDE_UP_IN20 = _createSlideInY(20);
var SLIDE_DOWN_IN10 = _createSlideInY(-10);
var SLIDE_DOWN_IN20 = _createSlideInY(-20);
var SLIDE_RIGHT_OUT10 = _createSlideOutX(10);
var SLIDE_RIGHT_OUT20 = _createSlideOutX(20);
var SLIDE_RIGHT_OUT40 = _createSlideOutX(40);
var SLIDE_RIGHT_OUT400 = _createSlideOutX(400);
var SLIDE_LEFT_OUT10 = _createSlideOutX(-10);
var SLIDE_LEFT_OUT20 = _createSlideOutX(-20);
var SLIDE_LEFT_OUT40 = _createSlideOutX(-40);
var SLIDE_LEFT_OUT400 = _createSlideOutX(-400);
var SLIDE_UP_OUT10 = _createSlideOutY(-10);
var SLIDE_UP_OUT20 = _createSlideOutY(-20);
var SLIDE_DOWN_OUT10 = _createSlideOutY(10);
var SLIDE_DOWN_OUT20 = _createSlideOutY(20);
var SCALE_UP100 = keyframes({
from: { transform: 'scale3d(.98,.98,1)' },
to: { transform: 'scale3d(1,1,1)' },
});
var SCALE_DOWN98 = keyframes({
from: { transform: 'scale3d(1,1,1)' },
to: { transform: 'scale3d(.98,.98,1)' },
});
var SCALE_DOWN100 = keyframes({
from: { transform: 'scale3d(1.03,1.03,1)' },
to: { transform: 'scale3d(1,1,1)' },
});
var SCALE_UP103 = keyframes({
from: { transform: 'scale3d(1,1,1)' },
to: { transform: 'scale3d(1.03,1.03,1)' },
});
var ROTATE90 = keyframes({
from: { transform: 'rotateZ(0deg)' },
to: { transform: 'rotateZ(90deg)' },
});
var ROTATE_N90 = keyframes({
from: { transform: 'rotateZ(0deg)' },
to: { transform: 'rotateZ(-90deg)' },
});
/**
* Exporting raw duraction values and easing functions to be used in custom animations
*/
export var AnimationVariables = {
easeFunction1: EASING_FUNCTION_1,
easeFunction2: EASING_FUNCTION_2,
durationValue1: DURATION_1,
durationValue2: DURATION_2,
durationValue3: DURATION_3,
durationValue4: DURATION_4,
};
/**
* All Fabric standard animations, exposed as json objects referencing predefined
* keyframes. These objects can be mixed in with other class definitions.
*/
export var AnimationStyles = {
slideRightIn10: _createAnimation(FADE_IN + "," + SLIDE_RIGHT_IN10, DURATION_3, EASING_FUNCTION_1),
slideRightIn20: _createAnimation(FADE_IN + "," + SLIDE_RIGHT_IN20, DURATION_3, EASING_FUNCTION_1),
slideRightIn40: _createAnimation(FADE_IN + "," + SLIDE_RIGHT_IN40, DURATION_3, EASING_FUNCTION_1),
slideRightIn400: _createAnimation(FADE_IN + "," + SLIDE_RIGHT_IN400, DURATION_3, EASING_FUNCTION_1),
slideLeftIn10: _createAnimation(FADE_IN + "," + SLIDE_LEFT_IN10, DURATION_3, EASING_FUNCTION_1),
slideLeftIn20: _createAnimation(FADE_IN + "," + SLIDE_LEFT_IN20, DURATION_3, EASING_FUNCTION_1),
slideLeftIn40: _createAnimation(FADE_IN + "," + SLIDE_LEFT_IN40, DURATION_3, EASING_FUNCTION_1),
slideLeftIn400: _createAnimation(FADE_IN + "," + SLIDE_LEFT_IN400, DURATION_3, EASING_FUNCTION_1),
slideUpIn10: _createAnimation(FADE_IN + "," + SLIDE_UP_IN10, DURATION_3, EASING_FUNCTION_1),
slideUpIn20: _createAnimation(FADE_IN + "," + SLIDE_UP_IN20, DURATION_3, EASING_FUNCTION_1),
slideDownIn10: _createAnimation(FADE_IN + "," + SLIDE_DOWN_IN10, DURATION_3, EASING_FUNCTION_1),
slideDownIn20: _createAnimation(FADE_IN + "," + SLIDE_DOWN_IN20, DURATION_3, EASING_FUNCTION_1),
slideRightOut10: _createAnimation(FADE_OUT + "," + SLIDE_RIGHT_OUT10, DURATION_3, EASING_FUNCTION_1),
slideRightOut20: _createAnimation(FADE_OUT + "," + SLIDE_RIGHT_OUT20, DURATION_3, EASING_FUNCTION_1),
slideRightOut40: _createAnimation(FADE_OUT + "," + SLIDE_RIGHT_OUT40, DURATION_3, EASING_FUNCTION_1),
slideRightOut400: _createAnimation(FADE_OUT + "," + SLIDE_RIGHT_OUT400, DURATION_3, EASING_FUNCTION_1),
slideLeftOut10: _createAnimation(FADE_OUT + "," + SLIDE_LEFT_OUT10, DURATION_3, EASING_FUNCTION_1),
slideLeftOut20: _createAnimation(FADE_OUT + "," + SLIDE_LEFT_OUT20, DURATION_3, EASING_FUNCTION_1),
slideLeftOut40: _createAnimation(FADE_OUT + "," + SLIDE_LEFT_OUT40, DURATION_3, EASING_FUNCTION_1),
slideLeftOut400: _createAnimation(FADE_OUT + "," + SLIDE_LEFT_OUT400, DURATION_3, EASING_FUNCTION_1),
slideUpOut10: _createAnimation(FADE_OUT + "," + SLIDE_UP_OUT10, DURATION_3, EASING_FUNCTION_1),
slideUpOut20: _createAnimation(FADE_OUT + "," + SLIDE_UP_OUT20, DURATION_3, EASING_FUNCTION_1),
slideDownOut10: _createAnimation(FADE_OUT + "," + SLIDE_DOWN_OUT10, DURATION_3, EASING_FUNCTION_1),
slideDownOut20: _createAnimation(FADE_OUT + "," + SLIDE_DOWN_OUT20, DURATION_3, EASING_FUNCTION_1),
scaleUpIn100: _createAnimation(FADE_IN + "," + SCALE_UP100, DURATION_3, EASING_FUNCTION_1),
scaleDownIn100: _createAnimation(FADE_IN + "," + SCALE_DOWN100, DURATION_3, EASING_FUNCTION_1),
scaleUpOut103: _createAnimation(FADE_OUT + "," + SCALE_UP103, DURATION_1, EASING_FUNCTION_2),
scaleDownOut98: _createAnimation(FADE_OUT + "," + SCALE_DOWN98, DURATION_1, EASING_FUNCTION_2),
fadeIn100: _createAnimation(FADE_IN, DURATION_1, EASING_FUNCTION_2),
fadeIn200: _createAnimation(FADE_IN, DURATION_2, EASING_FUNCTION_2),
fadeIn400: _createAnimation(FADE_IN, DURATION_3, EASING_FUNCTION_2),
fadeIn500: _createAnimation(FADE_IN, DURATION_4, EASING_FUNCTION_2),
fadeOut100: _createAnimation(FADE_OUT, DURATION_1, EASING_FUNCTION_2),
fadeOut200: _createAnimation(FADE_OUT, DURATION_2, EASING_FUNCTION_2),
fadeOut400: _createAnimation(FADE_OUT, DURATION_3, EASING_FUNCTION_2),
fadeOut500: _createAnimation(FADE_OUT, DURATION_4, EASING_FUNCTION_2),
rotate90deg: _createAnimation(ROTATE90, '0.1s', EASING_FUNCTION_2),
rotateN90deg: _createAnimation(ROTATE_N90, '0.1s', EASING_FUNCTION_2),
};
function _createAnimation(animationName, animationDuration, animationTimingFunction) {
return {
animationName: animationName,
animationDuration: animationDuration,
animationTimingFunction: animationTimingFunction,
animationFillMode: 'both',
};
}
function _createSlideInX(fromX) {
return keyframes({
from: { transform: "translate3d(" + fromX + "px,0,0)" },
to: { transform: "translate3d(0,0,0)" },
});
}
function _createSlideInY(fromY) {
return keyframes({
from: { transform: "translate3d(0," + fromY + "px,0)" },
to: { transform: "translate3d(0,0,0)" },
});
}
function _createSlideOutX(toX) {
return keyframes({
from: { transform: "translate3d(0,0,0)" },
to: { transform: "translate3d(" + toX + "px,0,0)" },
});
}
function _createSlideOutY(toY) {
return keyframes({
from: { transform: "translate3d(0,0,0)" },
to: { transform: "translate3d(0," + toY + "px,0)" },
});
}
export * from '@fluentui/theme/lib/motion/AnimationStyles';
//# sourceMappingURL=AnimationStyles.js.map

@@ -1,1 +0,1 @@

export { LocalizedFontNames, LocalizedFontFamilies, FontSizes, FontWeights, IconFontSizes, createFontStyles, } from '@fluentui/theme/lib/fonts';
export { LocalizedFontNames, LocalizedFontFamilies, FontSizes, FontWeights, IconFontSizes, createFontStyles, } from '@fluentui/theme/lib/fonts/index';

@@ -1,2 +0,2 @@

export { LocalizedFontNames, LocalizedFontFamilies, FontSizes, FontWeights, IconFontSizes, createFontStyles, } from '@fluentui/theme/lib/fonts';
export { LocalizedFontNames, LocalizedFontFamilies, FontSizes, FontWeights, IconFontSizes, createFontStyles, } from '@fluentui/theme/lib/fonts/index';
//# sourceMappingURL=fonts.js.map
import { ITheme, IPartialTheme } from '../interfaces/index';
export { createTheme } from '@fluentui/theme/lib/createTheme';
export declare const ThemeSettingName = "theme";

@@ -26,7 +27,1 @@ export declare function initializeThemeInCustomizations(): void;

export declare function loadTheme(theme: IPartialTheme, depComments?: boolean): ITheme;
/**
* Creates a custom theme definition which can be used with the Customizer.
* @param theme - Partial theme object.
* @param depComments - Whether to include deprecated tags as comments for deprecated slots.
*/
export declare function createTheme(theme: IPartialTheme, depComments?: boolean): ITheme;
import { __assign } from "tslib";
import { Customizations, merge, getWindow } from '@uifabric/utilities';
import { DefaultFontStyles } from './DefaultFontStyles';
import { DefaultPalette } from './DefaultPalette';
import { DefaultSpacing } from './DefaultSpacing';
import { Customizations, getWindow } from '@uifabric/utilities';
import { loadTheme as legacyLoadTheme } from '@microsoft/load-themed-styles';
import { DefaultEffects } from './DefaultEffects';
var _theme = createTheme({
palette: DefaultPalette,
semanticColors: _makeSemanticColors(DefaultPalette, DefaultEffects, undefined, false, false),
fonts: DefaultFontStyles,
isInverted: false,
disableGlobalClassNames: false,
});
import { createTheme } from '@fluentui/theme/lib/createTheme';
export { createTheme } from '@fluentui/theme/lib/createTheme';
var _theme = createTheme({});
var _onThemeChangeCallbacks = [];

@@ -107,79 +99,2 @@ export var ThemeSettingName = 'theme';

}
/**
* Creates a custom theme definition which can be used with the Customizer.
* @param theme - Partial theme object.
* @param depComments - Whether to include deprecated tags as comments for deprecated slots.
*/
export function createTheme(theme, depComments) {
if (depComments === void 0) { depComments = false; }
var newPalette = __assign(__assign({}, DefaultPalette), theme.palette);
var newEffects = __assign(__assign({}, DefaultEffects), theme.effects);
if (!theme.palette || !theme.palette.accent) {
newPalette.accent = newPalette.themePrimary;
}
// mix in custom overrides with good slots first, since custom overrides might be used in fixing deprecated slots
var newSemanticColors = __assign(__assign({}, _makeSemanticColors(newPalette, newEffects, theme.semanticColors, !!theme.isInverted, depComments)), theme.semanticColors);
var defaultFontStyles = __assign({}, DefaultFontStyles);
if (theme.defaultFontStyle) {
for (var _i = 0, _a = Object.keys(defaultFontStyles); _i < _a.length; _i++) {
var fontStyle = _a[_i];
defaultFontStyles[fontStyle] = merge({}, defaultFontStyles[fontStyle], theme.defaultFontStyle);
}
}
if (theme.fonts) {
for (var _b = 0, _c = Object.keys(theme.fonts); _b < _c.length; _b++) {
var fontStyle = _c[_b];
defaultFontStyles[fontStyle] = merge({}, defaultFontStyles[fontStyle], theme.fonts[fontStyle]);
}
}
return {
palette: newPalette,
fonts: __assign({}, defaultFontStyles),
rtl: theme.rtl,
semanticColors: newSemanticColors,
isInverted: !!theme.isInverted,
disableGlobalClassNames: !!theme.disableGlobalClassNames,
spacing: __assign(__assign({}, DefaultSpacing), theme.spacing),
effects: newEffects,
};
}
/** Generates all the semantic slot colors based on the theme so far
* We'll use these as fallbacks for semantic slots that the passed in theme did not define.
* The caller must still mix in the customized semantic slots at the end.
*/
function _makeSemanticColors(p, e, s, isInverted, depComments) {
var toReturn = __assign({
// DEFAULTS
bodyBackground: p.white, bodyBackgroundHovered: p.neutralLighter, bodyBackgroundChecked: p.neutralLight, bodyStandoutBackground: p.neutralLighterAlt, bodyFrameBackground: p.white, bodyFrameDivider: p.neutralLight, bodyText: p.neutralPrimary, bodyTextChecked: p.black, bodySubtext: p.neutralSecondary, bodyDivider: p.neutralLight, disabledBodyText: p.neutralTertiary, disabledBodySubtext: p.neutralTertiaryAlt, disabledBorder: p.neutralTertiaryAlt, focusBorder: p.neutralSecondary, cardStandoutBackground: p.white, cardShadow: e.elevation4, cardShadowHovered: '', variantBorder: p.neutralLight, variantBorderHovered: p.neutralTertiary, defaultStateBackground: p.neutralLighterAlt,
// LINKS
actionLink: p.neutralPrimary, actionLinkHovered: p.neutralDark, link: p.themePrimary, linkHovered: p.themeDarker,
// BUTTONS
buttonBackground: p.white, buttonBackgroundChecked: p.neutralTertiaryAlt, buttonBackgroundHovered: p.neutralLighter, buttonBackgroundCheckedHovered: p.neutralLight, buttonBackgroundPressed: p.neutralLight, buttonBackgroundDisabled: p.neutralLighter, buttonBorder: p.neutralSecondaryAlt, buttonText: p.neutralPrimary, buttonTextHovered: p.neutralDark, buttonTextChecked: p.neutralDark, buttonTextCheckedHovered: p.black, buttonTextPressed: p.neutralDark, buttonTextDisabled: p.neutralTertiary, buttonBorderDisabled: p.neutralLighter, primaryButtonBackground: p.themePrimary, primaryButtonBackgroundHovered: p.themeDarkAlt, primaryButtonBackgroundPressed: p.themeDark, primaryButtonBackgroundDisabled: p.neutralLighter, primaryButtonBorder: 'transparent', primaryButtonText: p.white, primaryButtonTextHovered: p.white, primaryButtonTextPressed: p.white, primaryButtonTextDisabled: p.neutralQuaternary, accentButtonBackground: p.accent, accentButtonText: p.white,
// INPUTS
inputBorder: p.neutralSecondary, inputBorderHovered: p.neutralPrimary, inputBackground: p.white, inputBackgroundChecked: p.themePrimary, inputBackgroundCheckedHovered: p.themeDark, inputPlaceholderBackgroundChecked: p.themeLighter, inputForegroundChecked: p.white, inputIcon: p.themePrimary, inputIconHovered: p.themeDark, inputIconDisabled: p.neutralTertiary, inputFocusBorderAlt: p.themePrimary, smallInputBorder: p.neutralSecondary, inputText: p.neutralPrimary, inputTextHovered: p.neutralDark, inputPlaceholderText: p.neutralSecondary, disabledBackground: p.neutralLighter, disabledText: p.neutralTertiary, disabledSubtext: p.neutralQuaternary,
// LISTS
listBackground: p.white, listText: p.neutralPrimary, listItemBackgroundHovered: p.neutralLighter, listItemBackgroundChecked: p.neutralLight, listItemBackgroundCheckedHovered: p.neutralQuaternaryAlt, listHeaderBackgroundHovered: p.neutralLighter, listHeaderBackgroundPressed: p.neutralLight,
// MENUS
menuBackground: p.white, menuDivider: p.neutralTertiaryAlt, menuIcon: p.themePrimary, menuHeader: p.themePrimary, menuItemBackgroundHovered: p.neutralLighter, menuItemBackgroundPressed: p.neutralLight, menuItemText: p.neutralPrimary, menuItemTextHovered: p.neutralDark, errorText: !isInverted ? '#a4262c' : '#F1707B', messageText: !isInverted ? '#323130' : '#F3F2F1', messageLink: !isInverted ? '#005A9E' : '#6CB8F6', messageLinkHovered: !isInverted ? '#004578' : '#82C7FF', infoIcon: !isInverted ? '#605e5c' : '#C8C6C4', errorIcon: !isInverted ? '#A80000' : '#F1707B', blockingIcon: !isInverted ? '#FDE7E9' : '#442726', warningIcon: !isInverted ? '#797775' : '#C8C6C4', severeWarningIcon: !isInverted ? '#D83B01' : '#FCE100', successIcon: !isInverted ? '#107C10' : '#92C353', infoBackground: !isInverted ? '#f3f2f1' : '#323130', errorBackground: !isInverted ? '#FDE7E9' : '#442726', blockingBackground: !isInverted ? '#FDE7E9' : '#442726', warningBackground: !isInverted ? '#FFF4CE' : '#433519', severeWarningBackground: !isInverted ? '#FED9CC' : '#4F2A0F', successBackground: !isInverted ? '#DFF6DD' : '#393D1B',
// Deprecated slots, later pass by _fixDeprecatedSlots() for self-referential slots
warningHighlight: !isInverted ? '#ffb900' : '#fff100', warningText: '', successText: !isInverted ? '#107C10' : '#92c353', listTextColor: '', menuItemBackgroundChecked: p.neutralLight }, s);
// second pass for self-referential slots
toReturn = __assign(__assign({}, toReturn), { cardShadowHovered: !isInverted ? e.elevation8 : '0 0 1px ' + toReturn.variantBorderHovered });
return _fixDeprecatedSlots(toReturn, depComments);
}
function _fixDeprecatedSlots(s, depComments) {
// Add @deprecated tag as comment if enabled
var dep = '';
if (depComments === true) {
dep = ' /* @deprecated */';
}
/* eslint-disable deprecation/deprecation */
s.listTextColor = s.listText + dep;
s.menuItemBackgroundChecked += dep;
s.warningHighlight += dep;
s.warningText = s.messageText + dep;
s.successText += dep;
/* eslint-enable deprecation/deprecation */
return s;
}
//# sourceMappingURL=theme.js.map
// Do not modify this file; it is generated as part of publish.
// The checked in version is a placeholder only and will not be updated.
import { setVersion } from '@uifabric/set-version';
setVersion('@uifabric/styling', '7.16.7');
setVersion('@uifabric/styling', '7.16.8');
//# sourceMappingURL=version.js.map
{
"name": "@uifabric/styling",
"version": "7.16.7",
"version": "7.16.8",
"description": "Styling helpers for Fluent UI React.",

@@ -37,3 +37,3 @@ "repository": {

"@microsoft/load-themed-styles": "^1.10.26",
"@fluentui/theme": "^1.1.0",
"@fluentui/theme": "^1.2.0",
"@uifabric/merge-styles": "^7.19.1",

@@ -40,0 +40,0 @@ "@uifabric/set-version": "^7.0.23",

Sorry, the diff of this file is too big to display

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc