@fluentui/theme - npm Package Compare versions

Comparing version 1.3.0 to 1.4.0

CHANGELOG.json

@@ -5,3 +5,18 @@ {
     {
-      "date": "Tue, 06 Oct 2020 17:26:33 GMT",
+      "date": "Mon, 12 Oct 2020 12:25:15 GMT",
+      "tag": "@fluentui/theme_v1.4.0",
+      "version": "1.4.0",
+      "comments": {
+        "minor": [
+          {
+            "comment": "Update createTheme interface to use Theme and PartialTheme; mark tokens typing in Theme as internal; update mergeThemes.",
+            "author": "[e-mail]",
+            "commit": "5b99c2fc197a3e06f50a8529b4b1990edcc516c6",
+            "package": "@fluentui/theme"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Tue, 06 Oct 2020 17:31:19 GMT",
       "tag": "@fluentui/theme_v1.3.0",
@@ -8,0 +23,0 @@ "version": "1.3.0",

CHANGELOG.md

 # Change Log - @fluentui/theme
 
-This log was last generated on Tue, 06 Oct 2020 17:26:33 GMT and should not be manually modified.
+This log was last generated on Mon, 12 Oct 2020 12:25:15 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [1.4.0](https://github.com/microsoft/fluentui/tree/@fluentui/theme_v1.4.0)
+
+Mon, 12 Oct 2020 12:25:15 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/theme_v1.3.0..@fluentui/theme_v1.4.0)
+
+### Minor changes
+
+- Update createTheme interface to use Theme and PartialTheme; mark tokens typing in Theme as internal; update mergeThemes. ([PR #15452](https://github.com/microsoft/fluentui/pull/15452) by [e-mail])
+
 ## [1.3.0](https://github.com/microsoft/fluentui/tree/@fluentui/theme_v1.3.0)
 
-Tue, 06 Oct 2020 17:26:33 GMT 
+Tue, 06 Oct 2020 17:31:19 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/theme_v1.2.1..@fluentui/theme_v1.3.0)
@@ -11,0 +20,0 @@

dist/theme.d.ts

@@ -82,7 +82,7 @@ import { IFontWeight } from '@uifabric/merge-styles';
 /**
- * Creates a custom theme definition which can be used with the Customizer.
+ * Creates a custom theme definition.
  * @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 declare function createTheme(theme?: PartialTheme, depComments?: boolean): Theme;
 
@@ -1131,5 +1131,5 @@ export declare const DefaultEffects: IEffects;
 /**
- * Merges multiple themes.
+ * Merge a partial/full theme into a full theme and returns a merged full theme.
  */
-export declare function mergeThemes<TResult = PartialTheme>(...themes: (undefined | PartialTheme | Theme)[]): TResult;
+export declare function mergeThemes(theme: Theme, partialTheme?: PartialTheme): Theme;
 
@@ -1193,3 +1193,3 @@ export declare namespace MotionAnimations {
 /**
- * A partial theme, provided by the customer. The internal `createTheme` helper will fill in the rest.
+ * A partial theme object.
  */
@@ -1258,5 +1258,8 @@ export declare interface PartialTheme extends IPartialTheme {
     components?: ComponentStyles;
-    tokens?: Tokens;
     stylesheets?: string[];
     id?: string;
+    /** @internal
+     * This is currently only for internal use and not production-ready.
+     * */
+    tokens?: RecursivePartial<Tokens>;
 }
@@ -1263,0 +1266,0 @@

etc/theme.api.md

@@ -74,3 +74,3 @@ ## API Report File for "@fluentui/theme"
 // @public
-export function createTheme(theme: IPartialTheme, depComments?: boolean): ITheme;
+export function createTheme(theme?: PartialTheme, depComments?: boolean): Theme;
 
@@ -630,3 +630,3 @@ // @public (undocumented)
 // @public
-export function mergeThemes<TResult = PartialTheme>(...themes: (undefined | PartialTheme | Theme)[]): TResult;
+export function mergeThemes(theme: Theme, partialTheme?: PartialTheme): Theme;
 
@@ -838,4 +838,4 @@ // @public (undocumented)
     stylesheets?: string[];
-    // (undocumented)
-    tokens?: Tokens;
+    // @internal
+    tokens?: RecursivePartial<Tokens>;
 }
@@ -842,0 +842,0 @@

lib-amd/createTheme.d.ts

@@ -1,7 +0,7 @@
-import { IPartialTheme, ITheme } from './types/index';
+import { PartialTheme, Theme } from './types/index';
 /**
- * Creates a custom theme definition which can be used with the Customizer.
+ * Creates a custom theme definition.
  * @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 declare function createTheme(theme?: PartialTheme, depComments?: boolean): Theme;

lib-amd/createTheme.js

@@ -1,6 +0,6 @@
-define(["require", "exports", "tslib", "@uifabric/utilities", "./colors/index", "./effects/index", "./fonts/index", "./spacing/index", "./utilities/makeSemanticColors"], function (require, exports, tslib_1, utilities_1, index_1, index_2, index_3, index_4, makeSemanticColors_1) {
+define(["require", "exports", "./colors/index", "./effects/index", "./fonts/index", "./mergeThemes", "./spacing/index", "./utilities/makeSemanticColors"], function (require, exports, index_1, index_2, index_3, mergeThemes_1, index_4, makeSemanticColors_1) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
     /**
-     * Creates a custom theme definition which can be used with the Customizer.
+     * Creates a custom theme definition.
      * @param theme - Partial theme object.
@@ -10,33 +10,15 @@ * @param depComments - Whether to include deprecated tags as comments for deprecated slots.
     function createTheme(theme, depComments) {
+        if (theme === void 0) { theme = {}; }
         if (depComments === void 0) { depComments = false; }
-        var newPalette = tslib_1.__assign(tslib_1.__assign({}, index_1.DefaultPalette), theme.palette);
-        var newEffects = tslib_1.__assign(tslib_1.__assign({}, index_2.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_1.makeSemanticColors(newPalette, newEffects, theme.semanticColors, !!theme.isInverted, depComments)), theme.semanticColors);
-        var defaultFontStyles = tslib_1.__assign({}, index_3.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({}, index_4.DefaultSpacing), theme.spacing),
-            effects: newEffects,
+        var baseTheme = {
+            palette: index_1.DefaultPalette,
+            effects: index_2.DefaultEffects,
+            fonts: index_3.DefaultFontStyles,
+            spacing: index_4.DefaultSpacing,
+            isInverted: false,
+            disableGlobalClassNames: false,
+            semanticColors: makeSemanticColors_1.makeSemanticColors(index_1.DefaultPalette, index_2.DefaultEffects, undefined, false, depComments),
+            rtl: undefined,
         };
+        return mergeThemes_1.mergeThemes(baseTheme, theme);
     }
@@ -43,0 +25,0 @@ exports.createTheme = createTheme;

lib-amd/mergeThemes.d.ts

 import { PartialTheme, Theme } from './types/index';
 /**
- * Merges multiple themes.
+ * Merge a partial/full theme into a full theme and returns a merged full theme.
  */
-export declare function mergeThemes<TResult = PartialTheme>(...themes: (undefined | PartialTheme | Theme)[]): TResult;
+export declare function mergeThemes(theme: Theme, partialTheme?: PartialTheme): Theme;

lib-amd/mergeThemes.js

@@ -1,17 +0,26 @@
-define(["require", "exports", "tslib", "@uifabric/utilities"], function (require, exports, tslib_1, utilities_1) {
+define(["require", "exports", "@uifabric/utilities", "./utilities/makeSemanticColors"], function (require, exports, utilities_1, makeSemanticColors_1) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
     /**
-     * Merges multiple themes.
+     * Merge a partial/full theme into a full theme and returns a merged full theme.
      */
-    function mergeThemes() {
-        var themes = [];
-        for (var _i = 0; _i < arguments.length; _i++) {
-            themes[_i] = arguments[_i];
+    function mergeThemes(theme, partialTheme) {
+        if (partialTheme === void 0) { partialTheme = {}; }
+        var _a, _b, _c, _d;
+        var mergedTheme = utilities_1.merge({}, theme, partialTheme, {
+            semanticColors: makeSemanticColors_1.getSemanticColors(partialTheme.palette, partialTheme.effects, partialTheme.semanticColors, partialTheme.isInverted === undefined ? theme.isInverted : partialTheme.isInverted),
+        });
+        if (((_a = partialTheme.palette) === null || _a === void 0 ? void 0 : _a.themePrimary) && !((_b = partialTheme.palette) === null || _b === void 0 ? void 0 : _b.accent)) {
+            mergedTheme.palette.accent = partialTheme.palette.themePrimary;
         }
-        var partialTheme = utilities_1.merge.apply(void 0, tslib_1.__spreadArrays([{}], themes));
-        // Correctly merge stylesheets array
-        partialTheme.stylesheets = [];
-        themes.forEach(function (theme) { var _a; return theme && theme.stylesheets && ((_a = partialTheme.stylesheets) === null || _a === void 0 ? void 0 : _a.push.apply(_a, theme.stylesheets)); });
-        return partialTheme;
+        if (partialTheme.defaultFontStyle) {
+            for (var _i = 0, _e = Object.keys(mergedTheme.fonts); _i < _e.length; _i++) {
+                var fontStyle = _e[_i];
+                mergedTheme.fonts[fontStyle] = utilities_1.merge(mergedTheme.fonts[fontStyle], partialTheme.defaultFontStyle, (_d = (_c = partialTheme) === null || _c === void 0 ? void 0 : _c.fonts) === null || _d === void 0 ? void 0 : _d[fontStyle]);
+            }
+        }
+        if (partialTheme.stylesheets) {
+            mergedTheme.stylesheets = (theme.stylesheets || []).concat(partialTheme.stylesheets);
+        }
+        return mergedTheme;
     }
@@ -18,0 +27,0 @@ exports.mergeThemes = mergeThemes;

lib-amd/types/Theme.d.ts

@@ -87,8 +87,11 @@ import { IPartialTheme, ITheme } from './ITheme';
     components?: ComponentStyles;
-    tokens?: Tokens;
     stylesheets?: string[];
     id?: string;
+    /** @internal
+     * This is currently only for internal use and not production-ready.
+     * */
+    tokens?: RecursivePartial<Tokens>;
 }
 /**
- * A partial theme, provided by the customer. The internal `createTheme` helper will fill in the rest.
+ * A partial theme object.
  */
@@ -95,0 +98,0 @@ export interface PartialTheme extends IPartialTheme {

lib-amd/utilities/makeSemanticColors.d.ts

@@ -6,2 +6,6 @@ import { IEffects, IPalette, ISemanticColors } from '../types/index';
  */
-export declare function makeSemanticColors(p: IPalette, e: IEffects, s: Partial<ISemanticColors> | undefined, isInverted: boolean, depComments: boolean): ISemanticColors;
+export declare function makeSemanticColors(p: IPalette, e: IEffects, s: Partial<ISemanticColors> | undefined, isInverted: boolean, depComments?: boolean): ISemanticColors;
+/**
+ * Map partial platte and effects to partial semantic colors.
+ */
+export declare function getSemanticColors<TResult = Partial<ISemanticColors>>(p: Partial<IPalette> | undefined, e: Partial<IEffects> | undefined, s: Partial<ISemanticColors> | undefined, isInverted: boolean, depComments?: boolean): TResult;

lib-amd/utilities/makeSemanticColors.js

@@ -9,22 +9,153 @@ define(["require", "exports", "tslib"], function (require, exports, tslib_1) {
     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);
+        if (depComments === void 0) { depComments = false; }
+        var semanticColors = tslib_1.__assign({ primaryButtonBorder: 'transparent', 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
+            warningHighlight: !isInverted ? '#ffb900' : '#fff100', successText: !isInverted ? '#107C10' : '#92c353' }, s);
+        var fullSemanticColors = getSemanticColors(p, e, semanticColors, isInverted);
+        return _fixDeprecatedSlots(fullSemanticColors, depComments);
     }
     exports.makeSemanticColors = makeSemanticColors;
+    /**
+     * Map partial platte and effects to partial semantic colors.
+     */
+    function getSemanticColors(p, e, s, isInverted, depComments) {
+        if (depComments === void 0) { depComments = false; }
+        var _a, _b, _c;
+        var result = {};
+        // map palette
+        var _d = p || {}, white = _d.white, black = _d.black, themePrimary = _d.themePrimary, themeDark = _d.themeDark, themeDarker = _d.themeDarker, themeDarkAlt = _d.themeDarkAlt, themeLighter = _d.themeLighter, neutralLight = _d.neutralLight, neutralLighter = _d.neutralLighter, neutralDark = _d.neutralDark, neutralQuaternary = _d.neutralQuaternary, neutralQuaternaryAlt = _d.neutralQuaternaryAlt, neutralPrimary = _d.neutralPrimary, neutralSecondary = _d.neutralSecondary, neutralSecondaryAlt = _d.neutralSecondaryAlt, neutralTertiary = _d.neutralTertiary, neutralTertiaryAlt = _d.neutralTertiaryAlt, neutralLighterAlt = _d.neutralLighterAlt, accent = _d.accent;
+        if (white) {
+            result.bodyBackground = white;
+            result.bodyFrameBackground = white;
+            result.accentButtonText = white;
+            result.buttonBackground = white;
+            result.primaryButtonText = white;
+            result.primaryButtonTextHovered = white;
+            result.primaryButtonTextPressed = white;
+            result.inputBackground = white;
+            result.inputForegroundChecked = white;
+            result.listBackground = white;
+            result.menuBackground = white;
+            result.cardStandoutBackground = white;
+        }
+        if (black) {
+            result.bodyTextChecked = black;
+            result.buttonTextCheckedHovered = black;
+        }
+        if (themePrimary) {
+            result.link = themePrimary;
+            result.primaryButtonBackground = themePrimary;
+            result.inputBackgroundChecked = themePrimary;
+            result.inputIcon = themePrimary;
+            result.inputFocusBorderAlt = themePrimary;
+            result.menuIcon = themePrimary;
+            result.menuHeader = themePrimary;
+            result.accentButtonBackground = themePrimary;
+        }
+        if (themeDark) {
+            result.primaryButtonBackgroundPressed = themeDark;
+            result.inputBackgroundCheckedHovered = themeDark;
+            result.inputIconHovered = themeDark;
+        }
+        if (themeDarker) {
+            result.linkHovered = themeDarker;
+        }
+        if (themeDarkAlt) {
+            result.primaryButtonBackgroundHovered = themeDarkAlt;
+        }
+        if (themeLighter) {
+            result.inputPlaceholderBackgroundChecked = themeLighter;
+        }
+        if (neutralLight) {
+            result.bodyBackgroundChecked = neutralLight;
+            result.bodyFrameDivider = neutralLight;
+            result.bodyDivider = neutralLight;
+            result.variantBorder = neutralLight;
+            result.buttonBackgroundCheckedHovered = neutralLight;
+            result.buttonBackgroundPressed = neutralLight;
+            result.listItemBackgroundChecked = neutralLight;
+            result.listHeaderBackgroundPressed = neutralLight;
+            result.menuItemBackgroundPressed = neutralLight;
+            // eslint-disable-next-line deprecation/deprecation
+            result.menuItemBackgroundChecked = neutralLight;
+        }
+        if (neutralLighter) {
+            result.bodyBackgroundHovered = neutralLighter;
+            result.buttonBackgroundHovered = neutralLighter;
+            result.buttonBackgroundDisabled = neutralLighter;
+            result.buttonBorderDisabled = neutralLighter;
+            result.primaryButtonBackgroundDisabled = neutralLighter;
+            result.disabledBackground = neutralLighter;
+            result.listItemBackgroundHovered = neutralLighter;
+            result.listHeaderBackgroundHovered = neutralLighter;
+            result.menuItemBackgroundHovered = neutralLighter;
+        }
+        if (neutralQuaternary) {
+            result.primaryButtonTextDisabled = neutralQuaternary;
+            result.disabledSubtext = neutralQuaternary;
+        }
+        if (neutralQuaternaryAlt) {
+            result.listItemBackgroundCheckedHovered = neutralQuaternaryAlt;
+        }
+        if (neutralTertiary) {
+            result.disabledBodyText = neutralTertiary;
+            result.variantBorderHovered = ((_a = s) === null || _a === void 0 ? void 0 : _a.variantBorderHovered) || neutralTertiary;
+            result.buttonTextDisabled = neutralTertiary;
+            result.inputIconDisabled = neutralTertiary;
+            result.disabledText = neutralTertiary;
+        }
+        if (neutralPrimary) {
+            result.bodyText = neutralPrimary;
+            result.actionLink = neutralPrimary;
+            result.buttonText = neutralPrimary;
+            result.inputBorderHovered = neutralPrimary;
+            result.inputText = neutralPrimary;
+            result.listText = neutralPrimary;
+            result.menuItemText = neutralPrimary;
+        }
+        if (neutralLighterAlt) {
+            result.bodyStandoutBackground = neutralLighterAlt;
+            result.defaultStateBackground = neutralLighterAlt;
+        }
+        if (neutralDark) {
+            result.actionLinkHovered = neutralDark;
+            result.buttonTextHovered = neutralDark;
+            result.buttonTextChecked = neutralDark;
+            result.buttonTextPressed = neutralDark;
+            result.inputTextHovered = neutralDark;
+            result.menuItemTextHovered = neutralDark;
+        }
+        if (neutralSecondary) {
+            result.bodySubtext = neutralSecondary;
+            result.focusBorder = neutralSecondary;
+            result.inputBorder = neutralSecondary;
+            result.smallInputBorder = neutralSecondary;
+            result.inputPlaceholderText = neutralSecondary;
+        }
+        if (neutralSecondaryAlt) {
+            result.buttonBorder = neutralSecondaryAlt;
+        }
+        if (neutralTertiaryAlt) {
+            result.disabledBodySubtext = neutralTertiaryAlt;
+            result.disabledBorder = neutralTertiaryAlt;
+            result.buttonBackgroundChecked = neutralTertiaryAlt;
+            result.menuDivider = neutralTertiaryAlt;
+        }
+        if (accent) {
+            result.accentButtonBackground = accent;
+        }
+        // map effects
+        if ((_b = e) === null || _b === void 0 ? void 0 : _b.elevation4) {
+            result.cardShadow = e.elevation4;
+        }
+        if (!isInverted && ((_c = e) === null || _c === void 0 ? void 0 : _c.elevation8)) {
+            result.cardShadowHovered = e.elevation8;
+        }
+        else if (result.variantBorderHovered) {
+            result.cardShadowHovered = '0 0 1px ' + result.variantBorderHovered;
+        }
+        result = tslib_1.__assign(tslib_1.__assign({}, result), s);
+        return result;
+    }
+    exports.getSemanticColors = getSemanticColors;
     function _fixDeprecatedSlots(s, depComments) {
@@ -31,0 +162,0 @@ // Add @deprecated tag as comment if enabled

lib-amd/version.js

 define(["require", "exports", "@uifabric/set-version"], function (require, exports, set_version_1) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
-    set_version_1.setVersion('@fluentui/theme', '1.2.1');
+    set_version_1.setVersion('@fluentui/theme', '1.3.0');
 });
 //# sourceMappingURL=version.js.map

lib-commonjs/createTheme.d.ts

@@ -1,7 +0,7 @@
-import { IPartialTheme, ITheme } from './types/index';
+import { PartialTheme, Theme } from './types/index';
 /**
- * Creates a custom theme definition which can be used with the Customizer.
+ * Creates a custom theme definition.
  * @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 declare function createTheme(theme?: PartialTheme, depComments?: boolean): Theme;

lib-commonjs/createTheme.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-var tslib_1 = require("tslib");
-var utilities_1 = require("@uifabric/utilities");
 var index_1 = require("./colors/index");
 var index_2 = require("./effects/index");
 var index_3 = require("./fonts/index");
+var mergeThemes_1 = require("./mergeThemes");
 var index_4 = require("./spacing/index");
 var makeSemanticColors_1 = require("./utilities/makeSemanticColors");
 /**
- * Creates a custom theme definition which can be used with the Customizer.
+ * Creates a custom theme definition.
  * @param theme - Partial theme object.
@@ -16,35 +15,17 @@ * @param depComments - Whether to include deprecated tags as comments for deprecated slots.
 function createTheme(theme, depComments) {
+    if (theme === void 0) { theme = {}; }
     if (depComments === void 0) { depComments = false; }
-    var newPalette = tslib_1.__assign(tslib_1.__assign({}, index_1.DefaultPalette), theme.palette);
-    var newEffects = tslib_1.__assign(tslib_1.__assign({}, index_2.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_1.makeSemanticColors(newPalette, newEffects, theme.semanticColors, !!theme.isInverted, depComments)), theme.semanticColors);
-    var defaultFontStyles = tslib_1.__assign({}, index_3.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({}, index_4.DefaultSpacing), theme.spacing),
-        effects: newEffects,
+    var baseTheme = {
+        palette: index_1.DefaultPalette,
+        effects: index_2.DefaultEffects,
+        fonts: index_3.DefaultFontStyles,
+        spacing: index_4.DefaultSpacing,
+        isInverted: false,
+        disableGlobalClassNames: false,
+        semanticColors: makeSemanticColors_1.makeSemanticColors(index_1.DefaultPalette, index_2.DefaultEffects, undefined, false, depComments),
+        rtl: undefined,
     };
+    return mergeThemes_1.mergeThemes(baseTheme, theme);
 }
 exports.createTheme = createTheme;
 //# sourceMappingURL=createTheme.js.map

lib-commonjs/mergeThemes.d.ts

 import { PartialTheme, Theme } from './types/index';
 /**
- * Merges multiple themes.
+ * Merge a partial/full theme into a full theme and returns a merged full theme.
  */
-export declare function mergeThemes<TResult = PartialTheme>(...themes: (undefined | PartialTheme | Theme)[]): TResult;
+export declare function mergeThemes(theme: Theme, partialTheme?: PartialTheme): Theme;

lib-commonjs/mergeThemes.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-var tslib_1 = require("tslib");
 var utilities_1 = require("@uifabric/utilities");
+var makeSemanticColors_1 = require("./utilities/makeSemanticColors");
 /**
- * Merges multiple themes.
+ * Merge a partial/full theme into a full theme and returns a merged full theme.
  */
-function mergeThemes() {
-    var themes = [];
-    for (var _i = 0; _i < arguments.length; _i++) {
-        themes[_i] = arguments[_i];
+function mergeThemes(theme, partialTheme) {
+    if (partialTheme === void 0) { partialTheme = {}; }
+    var _a, _b, _c, _d;
+    var mergedTheme = utilities_1.merge({}, theme, partialTheme, {
+        semanticColors: makeSemanticColors_1.getSemanticColors(partialTheme.palette, partialTheme.effects, partialTheme.semanticColors, partialTheme.isInverted === undefined ? theme.isInverted : partialTheme.isInverted),
+    });
+    if (((_a = partialTheme.palette) === null || _a === void 0 ? void 0 : _a.themePrimary) && !((_b = partialTheme.palette) === null || _b === void 0 ? void 0 : _b.accent)) {
+        mergedTheme.palette.accent = partialTheme.palette.themePrimary;
     }
-    var partialTheme = utilities_1.merge.apply(void 0, tslib_1.__spreadArrays([{}], themes));
-    // Correctly merge stylesheets array
-    partialTheme.stylesheets = [];
-    themes.forEach(function (theme) { var _a; return theme && theme.stylesheets && ((_a = partialTheme.stylesheets) === null || _a === void 0 ? void 0 : _a.push.apply(_a, theme.stylesheets)); });
-    return partialTheme;
+    if (partialTheme.defaultFontStyle) {
+        for (var _i = 0, _e = Object.keys(mergedTheme.fonts); _i < _e.length; _i++) {
+            var fontStyle = _e[_i];
+            mergedTheme.fonts[fontStyle] = utilities_1.merge(mergedTheme.fonts[fontStyle], partialTheme.defaultFontStyle, (_d = (_c = partialTheme) === null || _c === void 0 ? void 0 : _c.fonts) === null || _d === void 0 ? void 0 : _d[fontStyle]);
+        }
+    }
+    if (partialTheme.stylesheets) {
+        mergedTheme.stylesheets = (theme.stylesheets || []).concat(partialTheme.stylesheets);
+    }
+    return mergedTheme;
 }
 exports.mergeThemes = mergeThemes;
 //# sourceMappingURL=mergeThemes.js.map

lib-commonjs/types/Theme.d.ts

@@ -87,8 +87,11 @@ import { IPartialTheme, ITheme } from './ITheme';
     components?: ComponentStyles;
-    tokens?: Tokens;
     stylesheets?: string[];
     id?: string;
+    /** @internal
+     * This is currently only for internal use and not production-ready.
+     * */
+    tokens?: RecursivePartial<Tokens>;
 }
 /**
- * A partial theme, provided by the customer. The internal `createTheme` helper will fill in the rest.
+ * A partial theme object.
  */
@@ -95,0 +98,0 @@ export interface PartialTheme extends IPartialTheme {

lib-commonjs/utilities/makeSemanticColors.d.ts

@@ -6,2 +6,6 @@ import { IEffects, IPalette, ISemanticColors } from '../types/index';
  */
-export declare function makeSemanticColors(p: IPalette, e: IEffects, s: Partial<ISemanticColors> | undefined, isInverted: boolean, depComments: boolean): ISemanticColors;
+export declare function makeSemanticColors(p: IPalette, e: IEffects, s: Partial<ISemanticColors> | undefined, isInverted: boolean, depComments?: boolean): ISemanticColors;
+/**
+ * Map partial platte and effects to partial semantic colors.
+ */
+export declare function getSemanticColors<TResult = Partial<ISemanticColors>>(p: Partial<IPalette> | undefined, e: Partial<IEffects> | undefined, s: Partial<ISemanticColors> | undefined, isInverted: boolean, depComments?: boolean): TResult;

lib-commonjs/utilities/makeSemanticColors.js

@@ -9,22 +9,153 @@ "use strict";
 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);
+    if (depComments === void 0) { depComments = false; }
+    var semanticColors = tslib_1.__assign({ primaryButtonBorder: 'transparent', 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
+        warningHighlight: !isInverted ? '#ffb900' : '#fff100', successText: !isInverted ? '#107C10' : '#92c353' }, s);
+    var fullSemanticColors = getSemanticColors(p, e, semanticColors, isInverted);
+    return _fixDeprecatedSlots(fullSemanticColors, depComments);
 }
 exports.makeSemanticColors = makeSemanticColors;
+/**
+ * Map partial platte and effects to partial semantic colors.
+ */
+function getSemanticColors(p, e, s, isInverted, depComments) {
+    if (depComments === void 0) { depComments = false; }
+    var _a, _b, _c;
+    var result = {};
+    // map palette
+    var _d = p || {}, white = _d.white, black = _d.black, themePrimary = _d.themePrimary, themeDark = _d.themeDark, themeDarker = _d.themeDarker, themeDarkAlt = _d.themeDarkAlt, themeLighter = _d.themeLighter, neutralLight = _d.neutralLight, neutralLighter = _d.neutralLighter, neutralDark = _d.neutralDark, neutralQuaternary = _d.neutralQuaternary, neutralQuaternaryAlt = _d.neutralQuaternaryAlt, neutralPrimary = _d.neutralPrimary, neutralSecondary = _d.neutralSecondary, neutralSecondaryAlt = _d.neutralSecondaryAlt, neutralTertiary = _d.neutralTertiary, neutralTertiaryAlt = _d.neutralTertiaryAlt, neutralLighterAlt = _d.neutralLighterAlt, accent = _d.accent;
+    if (white) {
+        result.bodyBackground = white;
+        result.bodyFrameBackground = white;
+        result.accentButtonText = white;
+        result.buttonBackground = white;
+        result.primaryButtonText = white;
+        result.primaryButtonTextHovered = white;
+        result.primaryButtonTextPressed = white;
+        result.inputBackground = white;
+        result.inputForegroundChecked = white;
+        result.listBackground = white;
+        result.menuBackground = white;
+        result.cardStandoutBackground = white;
+    }
+    if (black) {
+        result.bodyTextChecked = black;
+        result.buttonTextCheckedHovered = black;
+    }
+    if (themePrimary) {
+        result.link = themePrimary;
+        result.primaryButtonBackground = themePrimary;
+        result.inputBackgroundChecked = themePrimary;
+        result.inputIcon = themePrimary;
+        result.inputFocusBorderAlt = themePrimary;
+        result.menuIcon = themePrimary;
+        result.menuHeader = themePrimary;
+        result.accentButtonBackground = themePrimary;
+    }
+    if (themeDark) {
+        result.primaryButtonBackgroundPressed = themeDark;
+        result.inputBackgroundCheckedHovered = themeDark;
+        result.inputIconHovered = themeDark;
+    }
+    if (themeDarker) {
+        result.linkHovered = themeDarker;
+    }
+    if (themeDarkAlt) {
+        result.primaryButtonBackgroundHovered = themeDarkAlt;
+    }
+    if (themeLighter) {
+        result.inputPlaceholderBackgroundChecked = themeLighter;
+    }
+    if (neutralLight) {
+        result.bodyBackgroundChecked = neutralLight;
+        result.bodyFrameDivider = neutralLight;
+        result.bodyDivider = neutralLight;
+        result.variantBorder = neutralLight;
+        result.buttonBackgroundCheckedHovered = neutralLight;
+        result.buttonBackgroundPressed = neutralLight;
+        result.listItemBackgroundChecked = neutralLight;
+        result.listHeaderBackgroundPressed = neutralLight;
+        result.menuItemBackgroundPressed = neutralLight;
+        // eslint-disable-next-line deprecation/deprecation
+        result.menuItemBackgroundChecked = neutralLight;
+    }
+    if (neutralLighter) {
+        result.bodyBackgroundHovered = neutralLighter;
+        result.buttonBackgroundHovered = neutralLighter;
+        result.buttonBackgroundDisabled = neutralLighter;
+        result.buttonBorderDisabled = neutralLighter;
+        result.primaryButtonBackgroundDisabled = neutralLighter;
+        result.disabledBackground = neutralLighter;
+        result.listItemBackgroundHovered = neutralLighter;
+        result.listHeaderBackgroundHovered = neutralLighter;
+        result.menuItemBackgroundHovered = neutralLighter;
+    }
+    if (neutralQuaternary) {
+        result.primaryButtonTextDisabled = neutralQuaternary;
+        result.disabledSubtext = neutralQuaternary;
+    }
+    if (neutralQuaternaryAlt) {
+        result.listItemBackgroundCheckedHovered = neutralQuaternaryAlt;
+    }
+    if (neutralTertiary) {
+        result.disabledBodyText = neutralTertiary;
+        result.variantBorderHovered = ((_a = s) === null || _a === void 0 ? void 0 : _a.variantBorderHovered) || neutralTertiary;
+        result.buttonTextDisabled = neutralTertiary;
+        result.inputIconDisabled = neutralTertiary;
+        result.disabledText = neutralTertiary;
+    }
+    if (neutralPrimary) {
+        result.bodyText = neutralPrimary;
+        result.actionLink = neutralPrimary;
+        result.buttonText = neutralPrimary;
+        result.inputBorderHovered = neutralPrimary;
+        result.inputText = neutralPrimary;
+        result.listText = neutralPrimary;
+        result.menuItemText = neutralPrimary;
+    }
+    if (neutralLighterAlt) {
+        result.bodyStandoutBackground = neutralLighterAlt;
+        result.defaultStateBackground = neutralLighterAlt;
+    }
+    if (neutralDark) {
+        result.actionLinkHovered = neutralDark;
+        result.buttonTextHovered = neutralDark;
+        result.buttonTextChecked = neutralDark;
+        result.buttonTextPressed = neutralDark;
+        result.inputTextHovered = neutralDark;
+        result.menuItemTextHovered = neutralDark;
+    }
+    if (neutralSecondary) {
+        result.bodySubtext = neutralSecondary;
+        result.focusBorder = neutralSecondary;
+        result.inputBorder = neutralSecondary;
+        result.smallInputBorder = neutralSecondary;
+        result.inputPlaceholderText = neutralSecondary;
+    }
+    if (neutralSecondaryAlt) {
+        result.buttonBorder = neutralSecondaryAlt;
+    }
+    if (neutralTertiaryAlt) {
+        result.disabledBodySubtext = neutralTertiaryAlt;
+        result.disabledBorder = neutralTertiaryAlt;
+        result.buttonBackgroundChecked = neutralTertiaryAlt;
+        result.menuDivider = neutralTertiaryAlt;
+    }
+    if (accent) {
+        result.accentButtonBackground = accent;
+    }
+    // map effects
+    if ((_b = e) === null || _b === void 0 ? void 0 : _b.elevation4) {
+        result.cardShadow = e.elevation4;
+    }
+    if (!isInverted && ((_c = e) === null || _c === void 0 ? void 0 : _c.elevation8)) {
+        result.cardShadowHovered = e.elevation8;
+    }
+    else if (result.variantBorderHovered) {
+        result.cardShadowHovered = '0 0 1px ' + result.variantBorderHovered;
+    }
+    result = tslib_1.__assign(tslib_1.__assign({}, result), s);
+    return result;
+}
+exports.getSemanticColors = getSemanticColors;
 function _fixDeprecatedSlots(s, depComments) {
@@ -31,0 +162,0 @@ // Add @deprecated tag as comment if enabled

lib-commonjs/version.js

@@ -6,3 +6,3 @@ "use strict";
 var set_version_1 = require("@uifabric/set-version");
-set_version_1.setVersion('@fluentui/theme', '1.2.1');
+set_version_1.setVersion('@fluentui/theme', '1.3.0');
 //# sourceMappingURL=version.js.map

lib/createTheme.d.ts

@@ -1,7 +0,7 @@
-import { IPartialTheme, ITheme } from './types/index';
+import { PartialTheme, Theme } from './types/index';
 /**
- * Creates a custom theme definition which can be used with the Customizer.
+ * Creates a custom theme definition.
  * @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 declare function createTheme(theme?: PartialTheme, depComments?: boolean): Theme;

lib/createTheme.js

@@ -1,10 +0,9 @@
-import { __assign } from "tslib";
-import { merge } from '@uifabric/utilities';
 import { DefaultPalette } from './colors/index';
 import { DefaultEffects } from './effects/index';
 import { DefaultFontStyles } from './fonts/index';
+import { mergeThemes } from './mergeThemes';
 import { DefaultSpacing } from './spacing/index';
 import { makeSemanticColors } from './utilities/makeSemanticColors';
 /**
- * Creates a custom theme definition which can be used with the Customizer.
+ * Creates a custom theme definition.
  * @param theme - Partial theme object.
@@ -14,34 +13,16 @@ * @param depComments - Whether to include deprecated tags as comments for deprecated slots.
 export function createTheme(theme, depComments) {
+    if (theme === void 0) { theme = {}; }
     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,
+    var baseTheme = {
+        palette: DefaultPalette,
+        effects: DefaultEffects,
+        fonts: DefaultFontStyles,
+        spacing: DefaultSpacing,
+        isInverted: false,
+        disableGlobalClassNames: false,
+        semanticColors: makeSemanticColors(DefaultPalette, DefaultEffects, undefined, false, depComments),
+        rtl: undefined,
     };
+    return mergeThemes(baseTheme, theme);
 }
 //# sourceMappingURL=createTheme.js.map

lib/mergeThemes.d.ts

 import { PartialTheme, Theme } from './types/index';
 /**
- * Merges multiple themes.
+ * Merge a partial/full theme into a full theme and returns a merged full theme.
  */
-export declare function mergeThemes<TResult = PartialTheme>(...themes: (undefined | PartialTheme | Theme)[]): TResult;
+export declare function mergeThemes(theme: Theme, partialTheme?: PartialTheme): Theme;

lib/mergeThemes.js

@@ -1,17 +0,26 @@
-import { __spreadArrays } from "tslib";
 import { merge } from '@uifabric/utilities';
+import { getSemanticColors } from './utilities/makeSemanticColors';
 /**
- * Merges multiple themes.
+ * Merge a partial/full theme into a full theme and returns a merged full theme.
  */
-export function mergeThemes() {
-    var themes = [];
-    for (var _i = 0; _i < arguments.length; _i++) {
-        themes[_i] = arguments[_i];
+export function mergeThemes(theme, partialTheme) {
+    if (partialTheme === void 0) { partialTheme = {}; }
+    var _a, _b, _c, _d;
+    var mergedTheme = merge({}, theme, partialTheme, {
+        semanticColors: getSemanticColors(partialTheme.palette, partialTheme.effects, partialTheme.semanticColors, partialTheme.isInverted === undefined ? theme.isInverted : partialTheme.isInverted),
+    });
+    if (((_a = partialTheme.palette) === null || _a === void 0 ? void 0 : _a.themePrimary) && !((_b = partialTheme.palette) === null || _b === void 0 ? void 0 : _b.accent)) {
+        mergedTheme.palette.accent = partialTheme.palette.themePrimary;
     }
-    var partialTheme = merge.apply(void 0, __spreadArrays([{}], themes));
-    // Correctly merge stylesheets array
-    partialTheme.stylesheets = [];
-    themes.forEach(function (theme) { var _a; return theme && theme.stylesheets && ((_a = partialTheme.stylesheets) === null || _a === void 0 ? void 0 : _a.push.apply(_a, theme.stylesheets)); });
-    return partialTheme;
+    if (partialTheme.defaultFontStyle) {
+        for (var _i = 0, _e = Object.keys(mergedTheme.fonts); _i < _e.length; _i++) {
+            var fontStyle = _e[_i];
+            mergedTheme.fonts[fontStyle] = merge(mergedTheme.fonts[fontStyle], partialTheme.defaultFontStyle, (_d = (_c = partialTheme) === null || _c === void 0 ? void 0 : _c.fonts) === null || _d === void 0 ? void 0 : _d[fontStyle]);
+        }
+    }
+    if (partialTheme.stylesheets) {
+        mergedTheme.stylesheets = (theme.stylesheets || []).concat(partialTheme.stylesheets);
+    }
+    return mergedTheme;
 }
 //# sourceMappingURL=mergeThemes.js.map

lib/types/Theme.d.ts

@@ -87,8 +87,11 @@ import { IPartialTheme, ITheme } from './ITheme';
     components?: ComponentStyles;
-    tokens?: Tokens;
     stylesheets?: string[];
     id?: string;
+    /** @internal
+     * This is currently only for internal use and not production-ready.
+     * */
+    tokens?: RecursivePartial<Tokens>;
 }
 /**
- * A partial theme, provided by the customer. The internal `createTheme` helper will fill in the rest.
+ * A partial theme object.
  */
@@ -95,0 +98,0 @@ export interface PartialTheme extends IPartialTheme {

lib/utilities/makeSemanticColors.d.ts

@@ -6,2 +6,6 @@ import { IEffects, IPalette, ISemanticColors } from '../types/index';
  */
-export declare function makeSemanticColors(p: IPalette, e: IEffects, s: Partial<ISemanticColors> | undefined, isInverted: boolean, depComments: boolean): ISemanticColors;
+export declare function makeSemanticColors(p: IPalette, e: IEffects, s: Partial<ISemanticColors> | undefined, isInverted: boolean, depComments?: boolean): ISemanticColors;
+/**
+ * Map partial platte and effects to partial semantic colors.
+ */
+export declare function getSemanticColors<TResult = Partial<ISemanticColors>>(p: Partial<IPalette> | undefined, e: Partial<IEffects> | undefined, s: Partial<ISemanticColors> | undefined, isInverted: boolean, depComments?: boolean): TResult;

lib/utilities/makeSemanticColors.js

@@ -7,21 +7,151 @@ import { __assign } from "tslib";
 export 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);
+    if (depComments === void 0) { depComments = false; }
+    var semanticColors = __assign({ primaryButtonBorder: 'transparent', 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
+        warningHighlight: !isInverted ? '#ffb900' : '#fff100', successText: !isInverted ? '#107C10' : '#92c353' }, s);
+    var fullSemanticColors = getSemanticColors(p, e, semanticColors, isInverted);
+    return _fixDeprecatedSlots(fullSemanticColors, depComments);
 }
+/**
+ * Map partial platte and effects to partial semantic colors.
+ */
+export function getSemanticColors(p, e, s, isInverted, depComments) {
+    if (depComments === void 0) { depComments = false; }
+    var _a, _b, _c;
+    var result = {};
+    // map palette
+    var _d = p || {}, white = _d.white, black = _d.black, themePrimary = _d.themePrimary, themeDark = _d.themeDark, themeDarker = _d.themeDarker, themeDarkAlt = _d.themeDarkAlt, themeLighter = _d.themeLighter, neutralLight = _d.neutralLight, neutralLighter = _d.neutralLighter, neutralDark = _d.neutralDark, neutralQuaternary = _d.neutralQuaternary, neutralQuaternaryAlt = _d.neutralQuaternaryAlt, neutralPrimary = _d.neutralPrimary, neutralSecondary = _d.neutralSecondary, neutralSecondaryAlt = _d.neutralSecondaryAlt, neutralTertiary = _d.neutralTertiary, neutralTertiaryAlt = _d.neutralTertiaryAlt, neutralLighterAlt = _d.neutralLighterAlt, accent = _d.accent;
+    if (white) {
+        result.bodyBackground = white;
+        result.bodyFrameBackground = white;
+        result.accentButtonText = white;
+        result.buttonBackground = white;
+        result.primaryButtonText = white;
+        result.primaryButtonTextHovered = white;
+        result.primaryButtonTextPressed = white;
+        result.inputBackground = white;
+        result.inputForegroundChecked = white;
+        result.listBackground = white;
+        result.menuBackground = white;
+        result.cardStandoutBackground = white;
+    }
+    if (black) {
+        result.bodyTextChecked = black;
+        result.buttonTextCheckedHovered = black;
+    }
+    if (themePrimary) {
+        result.link = themePrimary;
+        result.primaryButtonBackground = themePrimary;
+        result.inputBackgroundChecked = themePrimary;
+        result.inputIcon = themePrimary;
+        result.inputFocusBorderAlt = themePrimary;
+        result.menuIcon = themePrimary;
+        result.menuHeader = themePrimary;
+        result.accentButtonBackground = themePrimary;
+    }
+    if (themeDark) {
+        result.primaryButtonBackgroundPressed = themeDark;
+        result.inputBackgroundCheckedHovered = themeDark;
+        result.inputIconHovered = themeDark;
+    }
+    if (themeDarker) {
+        result.linkHovered = themeDarker;
+    }
+    if (themeDarkAlt) {
+        result.primaryButtonBackgroundHovered = themeDarkAlt;
+    }
+    if (themeLighter) {
+        result.inputPlaceholderBackgroundChecked = themeLighter;
+    }
+    if (neutralLight) {
+        result.bodyBackgroundChecked = neutralLight;
+        result.bodyFrameDivider = neutralLight;
+        result.bodyDivider = neutralLight;
+        result.variantBorder = neutralLight;
+        result.buttonBackgroundCheckedHovered = neutralLight;
+        result.buttonBackgroundPressed = neutralLight;
+        result.listItemBackgroundChecked = neutralLight;
+        result.listHeaderBackgroundPressed = neutralLight;
+        result.menuItemBackgroundPressed = neutralLight;
+        // eslint-disable-next-line deprecation/deprecation
+        result.menuItemBackgroundChecked = neutralLight;
+    }
+    if (neutralLighter) {
+        result.bodyBackgroundHovered = neutralLighter;
+        result.buttonBackgroundHovered = neutralLighter;
+        result.buttonBackgroundDisabled = neutralLighter;
+        result.buttonBorderDisabled = neutralLighter;
+        result.primaryButtonBackgroundDisabled = neutralLighter;
+        result.disabledBackground = neutralLighter;
+        result.listItemBackgroundHovered = neutralLighter;
+        result.listHeaderBackgroundHovered = neutralLighter;
+        result.menuItemBackgroundHovered = neutralLighter;
+    }
+    if (neutralQuaternary) {
+        result.primaryButtonTextDisabled = neutralQuaternary;
+        result.disabledSubtext = neutralQuaternary;
+    }
+    if (neutralQuaternaryAlt) {
+        result.listItemBackgroundCheckedHovered = neutralQuaternaryAlt;
+    }
+    if (neutralTertiary) {
+        result.disabledBodyText = neutralTertiary;
+        result.variantBorderHovered = ((_a = s) === null || _a === void 0 ? void 0 : _a.variantBorderHovered) || neutralTertiary;
+        result.buttonTextDisabled = neutralTertiary;
+        result.inputIconDisabled = neutralTertiary;
+        result.disabledText = neutralTertiary;
+    }
+    if (neutralPrimary) {
+        result.bodyText = neutralPrimary;
+        result.actionLink = neutralPrimary;
+        result.buttonText = neutralPrimary;
+        result.inputBorderHovered = neutralPrimary;
+        result.inputText = neutralPrimary;
+        result.listText = neutralPrimary;
+        result.menuItemText = neutralPrimary;
+    }
+    if (neutralLighterAlt) {
+        result.bodyStandoutBackground = neutralLighterAlt;
+        result.defaultStateBackground = neutralLighterAlt;
+    }
+    if (neutralDark) {
+        result.actionLinkHovered = neutralDark;
+        result.buttonTextHovered = neutralDark;
+        result.buttonTextChecked = neutralDark;
+        result.buttonTextPressed = neutralDark;
+        result.inputTextHovered = neutralDark;
+        result.menuItemTextHovered = neutralDark;
+    }
+    if (neutralSecondary) {
+        result.bodySubtext = neutralSecondary;
+        result.focusBorder = neutralSecondary;
+        result.inputBorder = neutralSecondary;
+        result.smallInputBorder = neutralSecondary;
+        result.inputPlaceholderText = neutralSecondary;
+    }
+    if (neutralSecondaryAlt) {
+        result.buttonBorder = neutralSecondaryAlt;
+    }
+    if (neutralTertiaryAlt) {
+        result.disabledBodySubtext = neutralTertiaryAlt;
+        result.disabledBorder = neutralTertiaryAlt;
+        result.buttonBackgroundChecked = neutralTertiaryAlt;
+        result.menuDivider = neutralTertiaryAlt;
+    }
+    if (accent) {
+        result.accentButtonBackground = accent;
+    }
+    // map effects
+    if ((_b = e) === null || _b === void 0 ? void 0 : _b.elevation4) {
+        result.cardShadow = e.elevation4;
+    }
+    if (!isInverted && ((_c = e) === null || _c === void 0 ? void 0 : _c.elevation8)) {
+        result.cardShadowHovered = e.elevation8;
+    }
+    else if (result.variantBorderHovered) {
+        result.cardShadowHovered = '0 0 1px ' + result.variantBorderHovered;
+    }
+    result = __assign(__assign({}, result), s);
+    return result;
+}
 function _fixDeprecatedSlots(s, depComments) {
@@ -28,0 +158,0 @@ // Add @deprecated tag as comment if enabled

lib/version.js

 // 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('@fluentui/theme', '1.2.1');
+setVersion('@fluentui/theme', '1.3.0');
 //# sourceMappingURL=version.js.map

package.json

 {
   "name": "@fluentui/theme",
-  "version": "1.3.0",
+  "version": "1.4.0",
   "description": "Basic building blocks for Fluent UI React Component themes",
@@ -5,0 +5,0 @@ "main": "lib-commonjs/index.js",

README.md

@@ -8,10 +8,12 @@ # @fluentui/theme
 ```js
-import { createTheme } from '@uifabric/styling';
-import { Theme, mergeThemes, FontWeights } from '@fluentui/theme';
+import { createTheme, Theme, FontWeights } from '@fluentui/theme';
 
-export const MyTheme: Theme = mergeThemes(createTheme(), {
-  tokens: {
-    button: {
-      fontWeight: FontWeights.semibold,
-      padding: '0 24px',
+export const MyTheme: Theme = createTheme({
+  components: {
+    Button: {
+      variants: {
+        fontWeight: FontWeights.semibold,
+        paddingLeft: '24px',
+        paddingRight: '24px',
+      },
     },
@@ -18,0 +20,0 @@ },

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

667265

increased by2.94%

Lines of code

8138

increased by4.94%

Number of lines in readme file

22

increased by10%

No dependency changes