From 13fb8c2d79d1be1a2dac306a9195812760fe749e Mon Sep 17 00:00:00 2001 From: Thomas Michon Date: Mon, 23 Apr 2018 16:33:00 -0700 Subject: [PATCH 1/2] Fix theme slots for DetailsList header colors --- .../src/common/_semanticSlots.scss | 4 ++-- .../src/components/DetailsList/DetailsHeader.scss | 4 ++-- packages/styling/src/interfaces/ISemanticColors.ts | 12 +++++++++++- packages/styling/src/styles/theme.ts | 3 +++ 4 files changed, 18 insertions(+), 5 deletions(-) diff --git a/packages/office-ui-fabric-react/src/common/_semanticSlots.scss b/packages/office-ui-fabric-react/src/common/_semanticSlots.scss index eddd4e3b345d7..8adc8814c34cb 100644 --- a/packages/office-ui-fabric-react/src/common/_semanticSlots.scss +++ b/packages/office-ui-fabric-react/src/common/_semanticSlots.scss @@ -50,8 +50,8 @@ $menuHeaderColor: "[theme:menuHeader, default: #0078d4]"; /* Lists */ $listBackgroundColor: "[theme:listBackground, default: #ffffff]"; $listTextColor: "[theme:listText, default: #333333]"; -$listItemHeaderHoveredColor: "[theme:listItemHeaderHovered, default: #f4f4f4]"; -$listItemHeaderActivatedColor: "[theme:listItemActivatedHovered, default: #eaeaea]"; +$listHeaderBackgroundHoveredColor: "[theme:listHeaderBackgroundHovered, default: #f4f4f4]"; +$listHeaderBackgroundPressedColor: "[theme:listHeaderBackgroundPressed, default: #eaeaea]"; $listItemBackgroundHoveredColor: "[theme:listItemBackgroundHovered, default: #f8f8f8]"; $listItemBackgroundCheckedColor: "[theme:listItemBackgroundChecked, default: #eaeaea]"; $listItemBackgroundCheckedHoveredColor: "[theme:listItemBackgroundCheckedHovered, default: #d0d0d0]"; diff --git a/packages/office-ui-fabric-react/src/components/DetailsList/DetailsHeader.scss b/packages/office-ui-fabric-react/src/components/DetailsList/DetailsHeader.scss index 4927094cbd7b2..9d2e4137ded60 100644 --- a/packages/office-ui-fabric-react/src/components/DetailsList/DetailsHeader.scss +++ b/packages/office-ui-fabric-react/src/components/DetailsList/DetailsHeader.scss @@ -64,11 +64,11 @@ $isPaddedMargin: 24px; &:hover { color: $bodyTextColor; - background: $listItemHeaderHoveredColor; + background: $listHeaderBackgroundHoveredColor; } &:active { - background: $listItemHeaderActivatedColor; + background: $listHeaderBackgroundPressedColor; } } diff --git a/packages/styling/src/interfaces/ISemanticColors.ts b/packages/styling/src/interfaces/ISemanticColors.ts index 2574465261467..0a065e26d847b 100644 --- a/packages/styling/src/interfaces/ISemanticColors.ts +++ b/packages/styling/src/interfaces/ISemanticColors.ts @@ -271,6 +271,16 @@ export interface ISemanticColors { */ listItemBackgroundCheckedHovered: string; + /** + * The background color for a hovered list header. + */ + listHeaderBackgroundHovered: string; + + /** + * The background color for a pressed list header. + */ + listHeaderBackgroundPressed: string; + /** * The color of a link. */ @@ -286,4 +296,4 @@ export interface ISemanticColors { /** DEPRECATED use listText instead */ listTextColor: string; -} \ No newline at end of file +} diff --git a/packages/styling/src/styles/theme.ts b/packages/styling/src/styles/theme.ts index ab52c951ba3df..2b21b0953bb0b 100644 --- a/packages/styling/src/styles/theme.ts +++ b/packages/styling/src/styles/theme.ts @@ -178,6 +178,9 @@ function _makeSemanticColorsFromPalette(p: IPalette, isInverted: boolean, depCom listItemBackgroundChecked: p.neutralLight, listItemBackgroundCheckedHovered: p.neutralQuaternaryAlt, + listHeaderBackgroundHovered: p.neutralLighter, + listHeaderBackgroundPressed: p.neutralLight, + link: p.themePrimary, linkHovered: p.themeDarker, From c2eb67aea797e14928076020cdb4918dd98a13d5 Mon Sep 17 00:00:00 2001 From: Thomas Michon Date: Mon, 23 Apr 2018 16:33:33 -0700 Subject: [PATCH 2/2] Update change output --- .../styling/header-themes_2018-04-23-23-33.json | 11 +++++++++++ .../header-themes_2018-04-23-23-33.json | 11 +++++++++++ 2 files changed, 22 insertions(+) create mode 100644 common/changes/@uifabric/styling/header-themes_2018-04-23-23-33.json create mode 100644 common/changes/office-ui-fabric-react/header-themes_2018-04-23-23-33.json diff --git a/common/changes/@uifabric/styling/header-themes_2018-04-23-23-33.json b/common/changes/@uifabric/styling/header-themes_2018-04-23-23-33.json new file mode 100644 index 0000000000000..43bb34ae2b6a4 --- /dev/null +++ b/common/changes/@uifabric/styling/header-themes_2018-04-23-23-33.json @@ -0,0 +1,11 @@ +{ + "changes": [ + { + "packageName": "@uifabric/styling", + "comment": "Add theme slots for DetailsList header colors", + "type": "minor" + } + ], + "packageName": "@uifabric/styling", + "email": "tmichon@microsoft.com" +} \ No newline at end of file diff --git a/common/changes/office-ui-fabric-react/header-themes_2018-04-23-23-33.json b/common/changes/office-ui-fabric-react/header-themes_2018-04-23-23-33.json new file mode 100644 index 0000000000000..40a762059515e --- /dev/null +++ b/common/changes/office-ui-fabric-react/header-themes_2018-04-23-23-33.json @@ -0,0 +1,11 @@ +{ + "changes": [ + { + "packageName": "office-ui-fabric-react", + "comment": "Fix theme slots for DetailsList header colors", + "type": "minor" + } + ], + "packageName": "office-ui-fabric-react", + "email": "tmichon@microsoft.com" +} \ No newline at end of file