Variants: fix theming output so original input theme values are respected

common/changes/@uifabric/variants/phkuo-fixMerging_2018-03-28-23-01.json

@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "packageName": "@uifabric/variants",
+      "comment": "fix theme output from variants",
+      "type": "patch"
+    }
+  ],
+  "packageName": "@uifabric/variants",
+  "email": "[email protected]"
+}

packages/variants/src/variants.ts

@@ -6,6 +6,19 @@ import {
 } from '@uifabric/styling/lib/index';
 import { createTheme } from '@uifabric/styling/lib/index';
 
+function makeThemeFromPartials(
+  originalTheme: IPartialTheme,
+  partialPalette: Partial<IPalette>,
+  partialSemantic: Partial<ISemanticColors>): ITheme {
+  return createTheme({
+    ...originalTheme,
+    ...{
+      palette: { ...originalTheme.palette, ...partialPalette },
+      semanticColors: { ...originalTheme.semanticColors, ...partialSemantic }
+    }
+  });
+}
+
 /**
  * A variant where the background soft shade of the neutral color. Most other colors remain unchanged.
  *
@@ -54,18 +67,9 @@ export function getNeutralVariant(theme: IPartialTheme): ITheme {
     bodyBackground: p.neutralLighter
   };
 
-  return createTheme({ ...theme, ...{ palette: partialPalette, semanticColors: partialSemantic } });
+  return makeThemeFromPartials(theme, partialPalette, partialSemantic);
 }
 
-/* Variants
- * Variants are themes based off the current theme.
- * Each variant is a subset of the current theme, rearranging slots to create a theme of a different style.
- * Variants are meant to be applied to sections of a page, not the entire page.
- * They can be used to highlight or de-emphasize sections of a page.
- *
- * Variants are still under development.
- */
-
 /**
  * A variant where the background a softer version of the primary color. Most other colors remain unchanged.
  *
@@ -121,7 +125,7 @@ export function getSoftVariant(theme: IPartialTheme): ITheme {
     // inputFocusBorderAlt: p.themePrimary,
   };
 
-  return createTheme({ ...theme, ...{ palette: partialPalette, semanticColors: partialSemantic } });
+  return makeThemeFromPartials(theme, partialPalette, partialSemantic);
 }
 
 /**
@@ -186,5 +190,5 @@ export function getStrongVariant(theme: IPartialTheme): ITheme {
     // inputFocusBorderAlt: p.themePrimary,
   };
 
-  return createTheme({ ...theme, ...{ palette: partialPalette, semanticColors: partialSemantic } });
+  return makeThemeFromPartials(theme, partialPalette, partialSemantic);
 }