From 702fceae6b0243fb73b53e3a4e57603ef04b9eb3 Mon Sep 17 00:00:00 2001 From: Philip Kuo Date: Wed, 28 Mar 2018 16:00:23 -0700 Subject: [PATCH 1/4] oops --- packages/variants/src/variants.ts | 24 +++++++++++++++++++++--- 1 file changed, 21 insertions(+), 3 deletions(-) diff --git a/packages/variants/src/variants.ts b/packages/variants/src/variants.ts index b1c9478b3c68a0..cf4ad8445eb3b6 100644 --- a/packages/variants/src/variants.ts +++ b/packages/variants/src/variants.ts @@ -54,7 +54,13 @@ export function getNeutralVariant(theme: IPartialTheme): ITheme { bodyBackground: p.neutralLighter }; - return createTheme({ ...theme, ...{ palette: partialPalette, semanticColors: partialSemantic } }); + return createTheme({ + ...theme, + ...{ + palette: { ...theme.palette, ...partialPalette }, + semanticColors: { ...theme.semanticColors, ...partialSemantic } + } + }); } /* Variants @@ -121,7 +127,13 @@ export function getSoftVariant(theme: IPartialTheme): ITheme { // inputFocusBorderAlt: p.themePrimary, }; - return createTheme({ ...theme, ...{ palette: partialPalette, semanticColors: partialSemantic } }); + return createTheme({ + ...theme, + ...{ + palette: { ...theme.palette, ...partialPalette }, + semanticColors: { ...theme.semanticColors, ...partialSemantic } + } + }); } /** @@ -186,5 +198,11 @@ export function getStrongVariant(theme: IPartialTheme): ITheme { // inputFocusBorderAlt: p.themePrimary, }; - return createTheme({ ...theme, ...{ palette: partialPalette, semanticColors: partialSemantic } }); + return createTheme({ + ...theme, + ...{ + palette: { ...theme.palette, ...partialPalette }, + semanticColors: { ...theme.semanticColors, ...partialSemantic } + } + }); } \ No newline at end of file From 4930d5d025242dbd9a2f03db101e84536af5cbb7 Mon Sep 17 00:00:00 2001 From: Philip Kuo Date: Wed, 28 Mar 2018 16:01:17 -0700 Subject: [PATCH 2/4] changefile --- .../variants/phkuo-fixMerging_2018-03-28-23-01.json | 11 +++++++++++ 1 file changed, 11 insertions(+) create mode 100644 common/changes/@uifabric/variants/phkuo-fixMerging_2018-03-28-23-01.json diff --git a/common/changes/@uifabric/variants/phkuo-fixMerging_2018-03-28-23-01.json b/common/changes/@uifabric/variants/phkuo-fixMerging_2018-03-28-23-01.json new file mode 100644 index 00000000000000..fcb463a5a9625a --- /dev/null +++ b/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": "phkuo@microsoft.com" +} \ No newline at end of file From 341bd88a7eb9d0061686291bab1cadc8a54c5f60 Mon Sep 17 00:00:00 2001 From: Philip Kuo Date: Wed, 28 Mar 2018 16:41:29 -0700 Subject: [PATCH 3/4] dry --- packages/variants/src/variants.ts | 43 ++++++++++--------------------- 1 file changed, 13 insertions(+), 30 deletions(-) diff --git a/packages/variants/src/variants.ts b/packages/variants/src/variants.ts index cf4ad8445eb3b6..9bd29c2c9bf83e 100644 --- a/packages/variants/src/variants.ts +++ b/packages/variants/src/variants.ts @@ -6,6 +6,16 @@ import { } from '@uifabric/styling/lib/index'; import { createTheme } from '@uifabric/styling/lib/index'; +function makeThemeFromPartials(originalTheme: IPartialTheme, partialPalette: Partial, partialSemantic: Partial): 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,24 +64,9 @@ export function getNeutralVariant(theme: IPartialTheme): ITheme { bodyBackground: p.neutralLighter }; - return createTheme({ - ...theme, - ...{ - palette: { ...theme.palette, ...partialPalette }, - semanticColors: { ...theme.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. * @@ -127,13 +122,7 @@ export function getSoftVariant(theme: IPartialTheme): ITheme { // inputFocusBorderAlt: p.themePrimary, }; - return createTheme({ - ...theme, - ...{ - palette: { ...theme.palette, ...partialPalette }, - semanticColors: { ...theme.semanticColors, ...partialSemantic } - } - }); + return makeThemeFromPartials(theme, partialPalette, partialSemantic); } /** @@ -198,11 +187,5 @@ export function getStrongVariant(theme: IPartialTheme): ITheme { // inputFocusBorderAlt: p.themePrimary, }; - return createTheme({ - ...theme, - ...{ - palette: { ...theme.palette, ...partialPalette }, - semanticColors: { ...theme.semanticColors, ...partialSemantic } - } - }); + return makeThemeFromPartials(theme, partialPalette, partialSemantic); } \ No newline at end of file From bd870c7cb68130ecf4fb4418066299bba70a0052 Mon Sep 17 00:00:00 2001 From: Philip Kuo Date: Wed, 28 Mar 2018 16:59:06 -0700 Subject: [PATCH 4/4] max line length error --- packages/variants/src/variants.ts | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/packages/variants/src/variants.ts b/packages/variants/src/variants.ts index 9bd29c2c9bf83e..16830529a927ef 100644 --- a/packages/variants/src/variants.ts +++ b/packages/variants/src/variants.ts @@ -6,7 +6,10 @@ import { } from '@uifabric/styling/lib/index'; import { createTheme } from '@uifabric/styling/lib/index'; -function makeThemeFromPartials(originalTheme: IPartialTheme, partialPalette: Partial, partialSemantic: Partial): ITheme { +function makeThemeFromPartials( + originalTheme: IPartialTheme, + partialPalette: Partial, + partialSemantic: Partial): ITheme { return createTheme({ ...originalTheme, ...{