Variants: improve strong variant generation algorithm to better handle inversion

common/changes/@uifabric/variants/phkuo-betterStrong_2018-03-30-22-56.json

@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "packageName": "@uifabric/variants",
+      "comment": "Variants: improve algorithm for generating strong variant that better handles inversion",
+      "type": "patch"
+    }
+  ],
+  "packageName": "@uifabric/variants",
+  "email": "phkuo@microsoft.com"
+}

packages/variants/src/variants.ts

@@ -180,6 +180,7 @@ export function getStrongVariant(theme: IPartialTheme): ITheme {
   const partialSemantic: Partial<ISemanticColors> = {
     bodyBackground: p.themeDarkAlt,
     bodyText: p.white,
+    bodySubtext: p.white,
 
     inputBorder: p.themeDark,
     // inputBorderHovered: p.neutralPrimary,
@@ -190,5 +191,16 @@ export function getStrongVariant(theme: IPartialTheme): ITheme {
     // inputFocusBorderAlt: p.themePrimary,
   };
 
-  return makeThemeFromPartials(theme, partialPalette, partialSemantic);
+  // Strong variant is unique here, we've redefined the entire palette and are
+  // effectively inverting the theme. Thus, do not mix in the original theme's value
+  // for the palette and semanticColors, since they will not work well "inverted",
+  // instead, use the new palette and then generate semanticColors from scratch.
+  return createTheme({
+    ...theme,
+    ...{
+      palette: partialPalette,
+      semanticColors: partialSemantic,
+      isInverted: !theme.isInverted
+    }
+  });
 }