diff --git a/common/changes/@uifabric/variants/phkuo-betterStrong_2018-03-30-22-56.json b/common/changes/@uifabric/variants/phkuo-betterStrong_2018-03-30-22-56.json new file mode 100644 index 0000000000000..d7a4094270a98 --- /dev/null +++ b/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" +} diff --git a/packages/variants/src/variants.ts b/packages/variants/src/variants.ts index 16830529a927e..60a88538ee41b 100644 --- a/packages/variants/src/variants.ts +++ b/packages/variants/src/variants.ts @@ -180,6 +180,7 @@ export function getStrongVariant(theme: IPartialTheme): ITheme { const partialSemantic: Partial = { 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 + } + }); } \ No newline at end of file