@uifabric/styling
Advanced tools
Comparing version 7.16.7 to 7.16.8
# 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 @@ |
@@ -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
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
646107
9983
Updated@fluentui/theme@^1.2.0