diff --git a/apps/fabric-website/src/data/colors-accent.json b/apps/fabric-website/src/data/colors-accent.json index 0595f346bd8612..605500b8dd88fe 100644 --- a/apps/fabric-website/src/data/colors-accent.json +++ b/apps/fabric-website/src/data/colors-accent.json @@ -104,7 +104,7 @@ }, { "name": "blue", - "value": "#0078d7", + "value": "#0078d4", "labelColorClass": "ms-fontColor-white" }, { diff --git a/apps/fabric-website/src/data/colors-theme.json b/apps/fabric-website/src/data/colors-theme.json index 63f2dca5836bf5..0d12bc12a40530 100644 --- a/apps/fabric-website/src/data/colors-theme.json +++ b/apps/fabric-website/src/data/colors-theme.json @@ -16,7 +16,7 @@ }, { "name": "themePrimary", - "value": "#0078d7", + "value": "#0078d4", "labelColorClass": "ms-fontColor-white" }, { diff --git a/apps/fabric-website/src/styles/_variables.scss b/apps/fabric-website/src/styles/_variables.scss index c1860a81bec575..8fbf649680c794 100644 --- a/apps/fabric-website/src/styles/_variables.scss +++ b/apps/fabric-website/src/styles/_variables.scss @@ -4,7 +4,7 @@ // Colors (all taken from the MDL2 palette) $color-home-darker: #004e8c; $color-home-dark: #0063b1; -$color-home-medium: #0078d7; +$color-home-medium: #0078d4; $color-home-light: #3a96dd; $color-home-lighter: #b3dbf2; diff --git a/common/changes/@uifabric/example-app-base/themePrimary-change_2018-03-16-17-25.json b/common/changes/@uifabric/example-app-base/themePrimary-change_2018-03-16-17-25.json new file mode 100644 index 00000000000000..ed155fa4fd8bf6 --- /dev/null +++ b/common/changes/@uifabric/example-app-base/themePrimary-change_2018-03-16-17-25.json @@ -0,0 +1,11 @@ +{ + "changes": [ + { + "packageName": "@uifabric/example-app-base", + "comment": "ThemePrimary: Updating this color along with an Office branding update.", + "type": "minor" + } + ], + "packageName": "@uifabric/example-app-base", + "email": "lynam.emily@gmail.com" +} \ No newline at end of file diff --git a/common/changes/@uifabric/fabric-website/themePrimary-change_2018-03-16-17-25.json b/common/changes/@uifabric/fabric-website/themePrimary-change_2018-03-16-17-25.json new file mode 100644 index 00000000000000..8ec9e026f48604 --- /dev/null +++ b/common/changes/@uifabric/fabric-website/themePrimary-change_2018-03-16-17-25.json @@ -0,0 +1,11 @@ +{ + "changes": [ + { + "packageName": "@uifabric/fabric-website", + "comment": "ThemePrimary: Updating this color along with an Office branding update.", + "type": "minor" + } + ], + "packageName": "@uifabric/fabric-website", + "email": "lynam.emily@gmail.com" +} \ No newline at end of file diff --git a/common/changes/@uifabric/styling/themePrimary-change_2018-03-16-17-25.json b/common/changes/@uifabric/styling/themePrimary-change_2018-03-16-17-25.json new file mode 100644 index 00000000000000..4d463fc84d81cb --- /dev/null +++ b/common/changes/@uifabric/styling/themePrimary-change_2018-03-16-17-25.json @@ -0,0 +1,11 @@ +{ + "changes": [ + { + "packageName": "@uifabric/styling", + "comment": "ThemePrimary: Updating this color along with an Office branding update.", + "type": "minor" + } + ], + "packageName": "@uifabric/styling", + "email": "lynam.emily@gmail.com" +} \ No newline at end of file diff --git a/common/changes/@uifabric/variants/themePrimary-change_2018-03-16-17-25.json b/common/changes/@uifabric/variants/themePrimary-change_2018-03-16-17-25.json new file mode 100644 index 00000000000000..fb9e9ff4c062a0 --- /dev/null +++ b/common/changes/@uifabric/variants/themePrimary-change_2018-03-16-17-25.json @@ -0,0 +1,11 @@ +{ + "changes": [ + { + "packageName": "@uifabric/variants", + "comment": "ThemePrimary: Updating this color along with an Office branding update.", + "type": "minor" + } + ], + "packageName": "@uifabric/variants", + "email": "lynam.emily@gmail.com" +} \ No newline at end of file diff --git a/common/changes/office-ui-fabric-react/themePrimary-change_2018-03-16-17-25.json b/common/changes/office-ui-fabric-react/themePrimary-change_2018-03-16-17-25.json new file mode 100644 index 00000000000000..29b04286ac6e27 --- /dev/null +++ b/common/changes/office-ui-fabric-react/themePrimary-change_2018-03-16-17-25.json @@ -0,0 +1,11 @@ +{ + "changes": [ + { + "packageName": "office-ui-fabric-react", + "comment": "ThemePrimary: Updating this color along with an Office branding update.", + "type": "minor" + } + ], + "packageName": "office-ui-fabric-react", + "email": "lynam.emily@gmail.com" +} \ No newline at end of file diff --git a/ghdocs/Theming.md b/ghdocs/Theming.md index e6f79bf369294f..fc082b73d0201e 100644 --- a/ghdocs/Theming.md +++ b/ghdocs/Theming.md @@ -10,7 +10,7 @@ Theming is a mechanism by which a consistent look and feel can be applied to all ## What's in a theme? A theme is defined by a simple collection of variables (which we call slots) with string values. -For example, `themePrimary` by default is `"#0078d7"`, but it could easily be `"rgba(0, 120, 215)"`. +For example, `themePrimary` by default is `"#0078d4"`, but it could easily be `"rgba(0, 120, 212)"`. ## What are theme slots? diff --git a/packages/example-app-base/src/common/_themeOverrides.scss b/packages/example-app-base/src/common/_themeOverrides.scss index f0ba2adfce3871..a29ca32537a88f 100644 --- a/packages/example-app-base/src/common/_themeOverrides.scss +++ b/packages/example-app-base/src/common/_themeOverrides.scss @@ -2,7 +2,7 @@ $ms-color-themeDarker: "[theme:themeDarker, default: #004578]"; $ms-color-themeDark: "[theme:themeDark, default: #005a9e]"; $ms-color-themeDarkAlt: "[theme:themeDarkAlt, default: #106ebe]"; -$ms-color-themePrimary: "[theme:themePrimary, default: #0078d7]"; +$ms-color-themePrimary: "[theme:themePrimary, default: #0078d4]"; $ms-color-themeSecondary: "[theme:themeSecondary, default: #2b88d8]"; $ms-color-themeTertiary: "[theme:themeTertiary, default: #71afe5]"; $ms-color-themeLight: "[theme:themeLight, default: #c7e0f4]"; @@ -38,7 +38,7 @@ $ms-color-purple: "[theme:purple, default: #5c2d91]"; $ms-color-purpleLight: "[theme:purpleLight, default: #b4a0ff]"; $ms-color-blueDark: "[theme:blueDark, default: #002050]"; $ms-color-blueMid: "[theme:blueMid, default: #00188f]"; -$ms-color-blue: "[theme:blue, default: #0078d7]"; +$ms-color-blue: "[theme:blue, default: #0078d4]"; $ms-color-blueLight: "[theme:blueLight, default: #00bcf2]"; $ms-color-tealDark: "[theme:tealDark, default: #004b50]"; $ms-color-teal: "[theme:teal, default: #008272]"; diff --git a/packages/office-ui-fabric-react/src/common/_semanticSlots.scss b/packages/office-ui-fabric-react/src/common/_semanticSlots.scss index 6c28970435c5f5..30636a35048729 100644 --- a/packages/office-ui-fabric-react/src/common/_semanticSlots.scss +++ b/packages/office-ui-fabric-react/src/common/_semanticSlots.scss @@ -23,10 +23,10 @@ $successBackgroundColor: "[theme:successBackground, default: rgba(186,216,10,.2) $inputBackgroundColor: "[theme:inputBackground, default: #ffffff]"; $inputBorderColor: "[theme:inputBorder, default: #a6a6a6]"; $inputBorderHoveredColor: "[theme:inputBorderHovered, default: #212121]"; -$inputBackgroundCheckedColor: "[theme:inputBackgroundChecked, default: #0078d7]"; +$inputBackgroundCheckedColor: "[theme:inputBackgroundChecked, default: #0078d4]"; $inputBackgroundCheckedHoveredColor: "[theme:inputBackgroundCheckedHovered, default: #106ebe]"; $inputForegroundCheckedColor: "[theme:inputForegroundChecked, default: #ffffff]"; -$inputFocusBorderAltColor: "[theme:inputFocusBorderAlt, default: #0078d7]"; +$inputFocusBorderAltColor: "[theme:inputFocusBorderAlt, default: #0078d4]"; $smallInputBorderColor: "[theme:inputBorder, default: #666666]"; $inputPlaceholderTextColor: "[theme:inputPlaceholderText, default: #666666]"; @@ -44,8 +44,8 @@ $buttonTextCheckedHoveredColor: "[theme:buttonTextCheckedHovered, default: #0000 /* Menus */ $menuItemBackgroundHoveredColor: "[theme:menuItemBackgroundHovered, default: #f8f8f8]"; $menuItemBackgroundCheckedColor: "[theme:menuItemBackgroundChecked, default: #eaeaea]"; -$menuIconColor: "[theme:menuIcon, default: #0078d7]"; -$menuHeaderColor: "[theme:menuHeader, default: #0078d7]"; +$menuIconColor: "[theme:menuIcon, default: #0078d4]"; +$menuHeaderColor: "[theme:menuHeader, default: #0078d4]"; /* Lists */ $listBackgroundColor: "[theme:listBackground, default: #ffffff]"; diff --git a/packages/office-ui-fabric-react/src/common/_themeOverrides.scss b/packages/office-ui-fabric-react/src/common/_themeOverrides.scss index c4526a68675390..b2751d5578eebe 100644 --- a/packages/office-ui-fabric-react/src/common/_themeOverrides.scss +++ b/packages/office-ui-fabric-react/src/common/_themeOverrides.scss @@ -1,7 +1,7 @@ $ms-color-themeDarker: "[theme:themeDarker, default: #004578]"; $ms-color-themeDark: "[theme:themeDark, default: #005a9e]"; $ms-color-themeDarkAlt: "[theme:themeDarkAlt, default: #106ebe]"; -$ms-color-themePrimary: "[theme:themePrimary, default: #0078d7]"; +$ms-color-themePrimary: "[theme:themePrimary, default: #0078d4]"; $ms-color-themeSecondary: "[theme:themeSecondary, default: #2b88d8]"; $ms-color-themeTertiary: "[theme:themeTertiary, default: #71afe5]"; $ms-color-themeLight: "[theme:themeLight, default: #c7e0f4]"; @@ -40,7 +40,7 @@ $ms-color-purple: "[theme:purple, default: #5c2d91]"; $ms-color-purpleLight: "[theme:purpleLight, default: #b4a0ff]"; $ms-color-blueDark: "[theme:blueDark, default: #002050]"; $ms-color-blueMid: "[theme:blueMid, default: #00188f]"; -$ms-color-blue: "[theme:blue, default: #0078d7]"; +$ms-color-blue: "[theme:blue, default: #0078d4]"; $ms-color-blueLight: "[theme:blueLight, default: #00bcf2]"; $ms-color-tealDark: "[theme:tealDark, default: #004b50]"; $ms-color-teal: "[theme:teal, default: #008272]"; diff --git a/packages/office-ui-fabric-react/src/components/ActivityItem/__snapshots__/ActivityItem.test.tsx.snap b/packages/office-ui-fabric-react/src/components/ActivityItem/__snapshots__/ActivityItem.test.tsx.snap index 286b79f76ca97f..10a242fb6db7b2 100644 --- a/packages/office-ui-fabric-react/src/components/ActivityItem/__snapshots__/ActivityItem.test.tsx.snap +++ b/packages/office-ui-fabric-react/src/components/ActivityItem/__snapshots__/ActivityItem.test.tsx.snap @@ -23,7 +23,7 @@ exports[`ActivityItem renders compact with a single persona correctly 1`] = ` className= ms-ActivityItem-activityTypeIcon { - color: #0078d7; + color: #0078d4; font-size: 13px; height: 16px; line-height: 13px; @@ -175,7 +175,7 @@ exports[`ActivityItem renders compact with an icon correctly 1`] = ` className= ms-ActivityItem-activityTypeIcon { - color: #0078d7; + color: #0078d4; font-size: 13px; height: 16px; line-height: 13px; @@ -254,7 +254,7 @@ exports[`ActivityItem renders compact with multiple personas correctly 1`] = ` className= ms-ActivityItem-activityTypeIcon { - color: #0078d7; + color: #0078d4; font-size: 13px; height: 16px; line-height: 13px; diff --git a/packages/office-ui-fabric-react/src/components/Breadcrumb/__snapshots__/Breadcrumb.test.tsx.snap b/packages/office-ui-fabric-react/src/components/Breadcrumb/__snapshots__/Breadcrumb.test.tsx.snap index bb6e270d861e7f..620b858b0e0a06 100644 --- a/packages/office-ui-fabric-react/src/components/Breadcrumb/__snapshots__/Breadcrumb.test.tsx.snap +++ b/packages/office-ui-fabric-react/src/components/Breadcrumb/__snapshots__/Breadcrumb.test.tsx.snap @@ -247,7 +247,7 @@ exports[`Breadcrumb renders breadcumb correctly 2`] = ` color: #004578; } &:active { - color: #0078d7; + color: #0078d4; } data-is-focusable={true} disabled={undefined} diff --git a/packages/office-ui-fabric-react/src/components/Button/__snapshots__/Button.test.tsx.snap b/packages/office-ui-fabric-react/src/components/Button/__snapshots__/Button.test.tsx.snap index 442ee99480d236..6efa1fec5de301 100644 --- a/packages/office-ui-fabric-react/src/components/Button/__snapshots__/Button.test.tsx.snap +++ b/packages/office-ui-fabric-react/src/components/Button/__snapshots__/Button.test.tsx.snap @@ -50,10 +50,10 @@ exports[`Button renders ActionButton correctly 1`] = ` z-index: 1; } &:hover { - color: #0078d7; + color: #0078d4; } &:hover .ms-Button-icon { - color: #0078d7; + color: #0078d4; } &:active { color: #000000; @@ -531,7 +531,7 @@ exports[`Button renders IconButton correctly 1`] = ` color: #004578; } &:active { - color: #0078d7; + color: #0078d4; } data-is-focusable={true} disabled={undefined} diff --git a/packages/office-ui-fabric-react/src/components/ComboBox/__snapshots__/ComboBox.test.tsx.snap b/packages/office-ui-fabric-react/src/components/ComboBox/__snapshots__/ComboBox.test.tsx.snap index 4410b1e5c53881..9dc775c82eeb06 100644 --- a/packages/office-ui-fabric-react/src/components/ComboBox/__snapshots__/ComboBox.test.tsx.snap +++ b/packages/office-ui-fabric-react/src/components/ComboBox/__snapshots__/ComboBox.test.tsx.snap @@ -44,7 +44,7 @@ exports[`ComboBox Renders ComboBox correctly 1`] = ` display: none; } &.is-open { - border-color: #0078d7; + border-color: #0078d4; } @media screen and (-ms-high-contrast: active){&.is-open { -ms-high-contrast-adjust: none; @@ -70,7 +70,7 @@ exports[`ComboBox Renders ComboBox correctly 1`] = ` color: HighlightText; } &:active { - border-color: #0078d7; + border-color: #0078d4; } @media screen and (-ms-high-contrast: active){&:active { -ms-high-contrast-adjust: none; @@ -87,7 +87,7 @@ exports[`ComboBox Renders ComboBox correctly 1`] = ` top: -2px; } &:focus { - border-color: #0078d7; + border-color: #0078d4; } @media screen and (-ms-high-contrast: active){&:focus { -ms-high-contrast-adjust: none; diff --git a/packages/office-ui-fabric-react/src/components/Link/__snapshots__/Link.test.tsx.snap b/packages/office-ui-fabric-react/src/components/Link/__snapshots__/Link.test.tsx.snap index 12fddf196c581b..3868767f4aacbd 100644 --- a/packages/office-ui-fabric-react/src/components/Link/__snapshots__/Link.test.tsx.snap +++ b/packages/office-ui-fabric-react/src/components/Link/__snapshots__/Link.test.tsx.snap @@ -6,7 +6,7 @@ exports[`Link renders Link correctly 1`] = ` className= ms-Link { - color: #0078d7; + color: #0078d4; outline: transparent; position: relative; text-decoration: none; @@ -29,7 +29,7 @@ exports[`Link renders Link correctly 1`] = ` color: #004578; } &:focus { - color: #0078d7; + color: #0078d4; } href="#" onClick={[Function]} @@ -46,7 +46,7 @@ exports[`Link renders Link with a custom class name 1`] = ` ms-Link customClassName { - color: #0078d7; + color: #0078d4; outline: transparent; position: relative; text-decoration: none; @@ -69,7 +69,7 @@ exports[`Link renders Link with a custom class name 1`] = ` color: #004578; } &:focus { - color: #0078d7; + color: #0078d4; } href="#" onClick={[Function]} @@ -87,7 +87,7 @@ exports[`Link renders Link with no href as a button 1`] = ` { background: none; border: none; - color: #0078d7; + color: #0078d4; cursor: pointer; display: inline; font-size: inherit; @@ -123,7 +123,7 @@ exports[`Link renders Link with no href as a button 1`] = ` color: #004578; } &:focus { - color: #0078d7; + color: #0078d4; } onClick={[Function]} > diff --git a/packages/office-ui-fabric-react/src/components/Nav/__snapshots__/Nav.test.tsx.snap b/packages/office-ui-fabric-react/src/components/Nav/__snapshots__/Nav.test.tsx.snap index ee83f7a180de5a..ed959927528817 100644 --- a/packages/office-ui-fabric-react/src/components/Nav/__snapshots__/Nav.test.tsx.snap +++ b/packages/office-ui-fabric-react/src/components/Nav/__snapshots__/Nav.test.tsx.snap @@ -133,10 +133,10 @@ exports[`Nav renders Nav correctly 1`] = ` color: #333333; } &:hover { - color: #0078d7; + color: #0078d4; } &:hover .ms-Button-icon { - color: #0078d7; + color: #0078d4; } &:active { color: #000000; diff --git a/packages/office-ui-fabric-react/src/components/Pivot/__snapshots__/Pivot.test.tsx.snap b/packages/office-ui-fabric-react/src/components/Pivot/__snapshots__/Pivot.test.tsx.snap index 264a0b97496768..5d0b13019a9f70 100644 --- a/packages/office-ui-fabric-react/src/components/Pivot/__snapshots__/Pivot.test.tsx.snap +++ b/packages/office-ui-fabric-react/src/components/Pivot/__snapshots__/Pivot.test.tsx.snap @@ -69,10 +69,10 @@ exports[`Pivot renders Pivot correctly 1`] = ` z-index: 1; } &:hover { - color: #0078d7; + color: #0078d4; } &:hover .ms-Button-icon { - color: #0078d7; + color: #0078d4; } &:active { color: #000000; @@ -163,10 +163,10 @@ exports[`Pivot renders Pivot correctly 1`] = ` z-index: 1; } &:hover { - color: #0078d7; + color: #0078d4; } &:hover .ms-Button-icon { - color: #0078d7; + color: #0078d4; } &:active { color: #000000; diff --git a/packages/office-ui-fabric-react/src/components/SearchBox/__snapshots__/SearchBox.test.tsx.snap b/packages/office-ui-fabric-react/src/components/SearchBox/__snapshots__/SearchBox.test.tsx.snap index a440cb5d7a379c..d6ceb51608a28c 100644 --- a/packages/office-ui-fabric-react/src/components/SearchBox/__snapshots__/SearchBox.test.tsx.snap +++ b/packages/office-ui-fabric-react/src/components/SearchBox/__snapshots__/SearchBox.test.tsx.snap @@ -43,7 +43,7 @@ exports[`SearchBox renders SearchBox correctly 1`] = ` className= ms-SearchBox-iconContainer { - color: #0078d7; + color: #0078d4; display: flex; flex-direction: column; flex-shrink: 0; diff --git a/packages/office-ui-fabric-react/src/components/SpinButton/__snapshots__/SpinButton.test.tsx.snap b/packages/office-ui-fabric-react/src/components/SpinButton/__snapshots__/SpinButton.test.tsx.snap index 3b37ceae167cac..bbfaca7e4a761d 100644 --- a/packages/office-ui-fabric-react/src/components/SpinButton/__snapshots__/SpinButton.test.tsx.snap +++ b/packages/office-ui-fabric-react/src/components/SpinButton/__snapshots__/SpinButton.test.tsx.snap @@ -104,7 +104,7 @@ exports[`SpinButton renders SpinButton correctly 1`] = ` width: calc(100% - 14px); } &::selection { - background-color: #0078d7; + background-color: #0078d4; color: #ffffff; } @media screen and (-ms-high-contrast: active){&::selection { diff --git a/packages/office-ui-fabric-react/src/components/SwatchColorPicker/__snapshots__/SwatchColorPicker.test.tsx.snap b/packages/office-ui-fabric-react/src/components/SwatchColorPicker/__snapshots__/SwatchColorPicker.test.tsx.snap index 836f6122dc63b7..2e840542cd814d 100644 --- a/packages/office-ui-fabric-react/src/components/SwatchColorPicker/__snapshots__/SwatchColorPicker.test.tsx.snap +++ b/packages/office-ui-fabric-react/src/components/SwatchColorPicker/__snapshots__/SwatchColorPicker.test.tsx.snap @@ -171,7 +171,7 @@ exports[`SwatchColorPicker renders SwatchColorPicker correctly 1`] = ` border-radius: 100%; } &:hover { - color: #0078d7; + color: #0078d4; } &:active { color: #000000; @@ -356,7 +356,7 @@ exports[`SwatchColorPicker renders SwatchColorPicker correctly 1`] = ` border-radius: 100%; } &:hover { - color: #0078d7; + color: #0078d4; } &:active { color: #000000; @@ -541,7 +541,7 @@ exports[`SwatchColorPicker renders SwatchColorPicker correctly 1`] = ` border-radius: 100%; } &:hover { - color: #0078d7; + color: #0078d4; } &:active { color: #000000; @@ -726,7 +726,7 @@ exports[`SwatchColorPicker renders SwatchColorPicker correctly 1`] = ` border-radius: 100%; } &:hover { - color: #0078d7; + color: #0078d4; } &:active { color: #000000; @@ -915,7 +915,7 @@ exports[`SwatchColorPicker renders SwatchColorPicker correctly 1`] = ` border-radius: 100%; } &:hover { - color: #0078d7; + color: #0078d4; } &:active { color: #000000; @@ -1100,7 +1100,7 @@ exports[`SwatchColorPicker renders SwatchColorPicker correctly 1`] = ` border-radius: 100%; } &:hover { - color: #0078d7; + color: #0078d4; } &:active { color: #000000; @@ -1285,7 +1285,7 @@ exports[`SwatchColorPicker renders SwatchColorPicker correctly 1`] = ` border-radius: 100%; } &:hover { - color: #0078d7; + color: #0078d4; } &:active { color: #000000; @@ -1470,7 +1470,7 @@ exports[`SwatchColorPicker renders SwatchColorPicker correctly 1`] = ` border-radius: 100%; } &:hover { - color: #0078d7; + color: #0078d4; } &:active { color: #000000; @@ -1659,7 +1659,7 @@ exports[`SwatchColorPicker renders SwatchColorPicker correctly 1`] = ` border-radius: 100%; } &:hover { - color: #0078d7; + color: #0078d4; } &:active { color: #000000; @@ -1844,7 +1844,7 @@ exports[`SwatchColorPicker renders SwatchColorPicker correctly 1`] = ` border-radius: 100%; } &:hover { - color: #0078d7; + color: #0078d4; } &:active { color: #000000; @@ -2029,7 +2029,7 @@ exports[`SwatchColorPicker renders SwatchColorPicker correctly 1`] = ` border-radius: 100%; } &:hover { - color: #0078d7; + color: #0078d4; } &:active { color: #000000; @@ -2214,7 +2214,7 @@ exports[`SwatchColorPicker renders SwatchColorPicker correctly 1`] = ` border-radius: 100%; } &:hover { - color: #0078d7; + color: #0078d4; } &:active { color: #000000; diff --git a/packages/office-ui-fabric-react/src/components/Theme/defaultTheme.ts b/packages/office-ui-fabric-react/src/components/Theme/defaultTheme.ts index 761d697edf3ab8..4e696df67c9c99 100644 --- a/packages/office-ui-fabric-react/src/components/Theme/defaultTheme.ts +++ b/packages/office-ui-fabric-react/src/components/Theme/defaultTheme.ts @@ -2,7 +2,7 @@ export const defaultTheme = { themeDarker: '#004578', themeDark: '#005a9e', themeDarkAlt: '#106ebe', - themePrimary: '#0078d7', + themePrimary: '#0078d4', themeSecondary: '#2b88d8', themeTertiary: '#71afe5', themeLight: '#c7e0f4', @@ -25,7 +25,7 @@ export const defaultTheme = { alertBackground: '#deecf9', black: '#000000', blackTranslucent40: 'rgba(0,0,0,.4)', - blue: '#0078d7', + blue: '#0078d4', blueDark: '#002050', blueLight: '#00bcf2', blueMid: '#00188f', diff --git a/packages/office-ui-fabric-react/src/components/ThemeGenerator/ThemeGeneratorPage.tsx b/packages/office-ui-fabric-react/src/components/ThemeGenerator/ThemeGeneratorPage.tsx index 2f30f2ad6dd9ce..8ceb7ec1219752 100644 --- a/packages/office-ui-fabric-react/src/components/ThemeGenerator/ThemeGeneratorPage.tsx +++ b/packages/office-ui-fabric-react/src/components/ThemeGenerator/ThemeGeneratorPage.tsx @@ -284,7 +284,7 @@ export class ThemeGeneratorPage extends BaseComponent<{}, IThemeGeneratorPageSta // todo: could use more logic based on isInverted and isBg switch (color.toLowerCase()) { case 'black': return '#1f1f1f'; - case 'blue': return '#0078d7'; + case 'blue': return '#0078d4'; case 'brown': return '#754d12'; case 'gray': case 'grey': return isBg ? '#444' : '#ccc'; diff --git a/packages/office-ui-fabric-react/src/components/ThemeGenerator/ThemeRulesStandard.ts b/packages/office-ui-fabric-react/src/components/ThemeGenerator/ThemeRulesStandard.ts index be99ff5655af29..cbe3ffdcaa4d78 100644 --- a/packages/office-ui-fabric-react/src/components/ThemeGenerator/ThemeRulesStandard.ts +++ b/packages/office-ui-fabric-react/src/components/ThemeGenerator/ThemeRulesStandard.ts @@ -95,7 +95,7 @@ export function themeRulesStandardCreator() { }); // set default colors for the base colors - slotRules[BaseSlots[BaseSlots.primaryColor]].color = getColorFromString('#0078d7'); + slotRules[BaseSlots[BaseSlots.primaryColor]].color = getColorFromString('#0078d4'); slotRules[BaseSlots[BaseSlots.backgroundColor]].color = getColorFromString('#fff'); slotRules[BaseSlots[BaseSlots.foregroundColor]].color = getColorFromString('#333'); diff --git a/packages/styling/src/styles/DefaultPalette.ts b/packages/styling/src/styles/DefaultPalette.ts index 1a7fd7802cf6af..f0f277e8f6e78f 100644 --- a/packages/styling/src/styles/DefaultPalette.ts +++ b/packages/styling/src/styles/DefaultPalette.ts @@ -5,7 +5,7 @@ export const DefaultPalette: IPalette = { themeDarker: '#004578', themeDark: '#005a9e', themeDarkAlt: '#106ebe', - themePrimary: '#0078d7', + themePrimary: '#0078d4', themeSecondary: '#2b88d8', themeTertiary: '#71afe5', themeLight: '#c7e0f4', @@ -24,7 +24,7 @@ export const DefaultPalette: IPalette = { neutralLight: '#eaeaea', neutralLighter: '#f4f4f4', neutralLighterAlt: '#f8f8f8', - accent: '#0078d7', + accent: '#0078d4', white: '#ffffff', whiteTranslucent40: 'rgba(255,255,255,.4)', yellow: '#ffb900', @@ -42,7 +42,7 @@ export const DefaultPalette: IPalette = { purpleLight: '#b4a0ff', blueDark: '#002050', blueMid: '#00188f', - blue: '#0078d7', + blue: '#0078d4', blueLight: '#00bcf2', tealDark: '#004b50', teal: '#008272', diff --git a/packages/variants/src/variants.ts b/packages/variants/src/variants.ts index a645fdcbcee648..4116875e4488a6 100644 --- a/packages/variants/src/variants.ts +++ b/packages/variants/src/variants.ts @@ -33,7 +33,7 @@ export function getSoftVariant(theme: IPartialTheme): ITheme { // themeDarker: '#004578', // themeDark: '#005a9e', // themeDarkAlt: '#106ebe', - // themePrimary: '#0078d7', + // themePrimary: '#0078d4', // themeSecondary: '#2b88d8', // themeTertiary: '#71afe5', // themeLight: '#c7e0f4',