Align ChatMessageDetails color with header (#18840)

* Align ChatMessageDetails color with header * Add changelog entry
microsoft · Jul 7, 2021 · b6e3e9a · b6e3e9a
1 parent bc44a88
commit b6e3e9a
Show file tree

Hide file tree

Showing 7 changed files with 16 additions and 21 deletions.
diff --git a/packages/fluentui/CHANGELOG.md b/packages/fluentui/CHANGELOG.md
@@ -21,6 +21,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 ### Fixes
 - Fix `Carousel` animation in controlled mode @assuncaocharles ([#18798](https://github.com/microsoft/fluentui/pull/18798))
 - Wrap ChatMessage header elements correctly @Hirse ([#18837](https://github.com/microsoft/fluentui/pull/18837))
+- Align ChatMessageDetails color with ChatMessage header @Hirse ([#18840](https://github.com/microsoft/fluentui/pull/18840))
 - Fix compact hover background in dark themes @Hirse ([#18842](https://github.com/microsoft/fluentui/pull/18842))
 
 ### Features

diff --git a/packages/fluentui/react-northstar/src/themes/teams-dark-v2/componentVariables.ts b/packages/fluentui/react-northstar/src/themes/teams-dark-v2/componentVariables.ts
@@ -1,3 +1,4 @@
 export { chatVariables as Chat } from './components/Chat/chatVariables';
 export { chatMessageVariables as ChatMessage } from './components/Chat/chatMessageVariables';
+export { chatMessageDetailsVariables as ChatMessageDetails } from './components/Chat/chatMessageDetailsVariables';
 export { datepickerCalendarCellButtonVariables as DatepickerCalendarCellButton } from './components/Datepicker/datepickerCalendarCellButtonVariables';
diff --git a/...i/react-northstar/src/themes/teams-dark-v2/components/Chat/chatMessageDetailsVariables.ts b/...i/react-northstar/src/themes/teams-dark-v2/components/Chat/chatMessageDetailsVariables.ts
@@ -0,0 +1,5 @@
+import { ChatMessageDetailsVariables } from '../../../teams/components/Chat/chatMessageDetailsVariables';
+
+export const chatMessageDetailsVariables = (siteVars): Partial<ChatMessageDetailsVariables> => ({
+  detailsColor: siteVars.colorScheme.default.foreground2,
+});
diff --git a/packages/fluentui/react-northstar/src/themes/teams-v2/componentVariables.ts b/packages/fluentui/react-northstar/src/themes/teams-v2/componentVariables.ts
@@ -1,2 +1,3 @@
 export { chatVariables as Chat } from './components/Chat/chatVariables';
 export { chatMessageVariables as ChatMessage } from './components/Chat/chatMessageVariables';
+export { chatMessageDetailsVariables as ChatMessageDetails } from './components/Chat/chatMessageDetailsVariables';
diff --git a/...uentui/react-northstar/src/themes/teams-v2/components/Chat/chatMessageDetailsVariables.ts b/...uentui/react-northstar/src/themes/teams-v2/components/Chat/chatMessageDetailsVariables.ts
@@ -0,0 +1,5 @@
+import { ChatMessageDetailsVariables } from '../../../teams/components/Chat/chatMessageDetailsVariables';
+
+export const chatMessageDetailsVariables = (siteVars): Partial<ChatMessageDetailsVariables> => ({
+  detailsColor: siteVars.colorScheme.default.foreground2,
+});
diff --git a/...ges/fluentui/react-northstar/src/themes/teams/components/Chat/chatMessageDetailsStyles.ts b/...ges/fluentui/react-northstar/src/themes/teams/components/Chat/chatMessageDetailsStyles.ts
@@ -8,25 +8,15 @@ export const chatMessageDetailsStyles: ComponentSlotStylesPrepared<
   ChatMessageDetailsVariables
 > = {
   root: ({ props: p, variables: v }): ICSSInJSStyle => ({
-    fontSize: v.detailsFontSize,
+    color: v.detailsColor,
     display: 'inline-block',
+    fontSize: v.detailsFontSize,
     ...(p.density === 'comfy' && {
-      color: v.detailsColor,
-      ':hover': {
-        color: v.detailsHoverColor,
-      },
-      ...(p.mine && {
-        color: v.detailsColorMine,
-        ':hover': {
-          color: v.detailsHoverColorMine,
-        },
-      }),
       ...((p.attached === 'top' || !p.attached) && {
         marginLeft: v.detailsMargin,
       }),
     }),
     ...(p.density === 'compact' && {
-      color: v.detailsColorCompact,
       alignSelf: 'flex-start',
       flexShrink: 0,
       marginLeft: v.detailsMargin,

diff --git a/.../fluentui/react-northstar/src/themes/teams/components/Chat/chatMessageDetailsVariables.ts b/.../fluentui/react-northstar/src/themes/teams/components/Chat/chatMessageDetailsVariables.ts
@@ -2,20 +2,12 @@ import { pxToRem } from '../../../../utils';
 
 export interface ChatMessageDetailsVariables {
   detailsColor: string;
-  detailsHoverColor: string;
-  detailsColorCompact: string;
-  detailsColorMine: string;
-  detailsHoverColorMine: string;
   detailsFontSize: string;
   detailsMargin: string;
 }
 
 export const chatMessageDetailsVariables = (siteVars): ChatMessageDetailsVariables => ({
-  detailsColor: siteVars.colors.grey[350],
-  detailsHoverColor: siteVars.colors.grey[500],
-  detailsColorCompact: siteVars.colorScheme.default.foreground2,
-  detailsColorMine: siteVars.colors.grey[500],
-  detailsHoverColorMine: siteVars.colors.grey[500],
+  detailsColor: siteVars.colorScheme.default.foreground1,
   detailsFontSize: siteVars.fontSizes.small,
   detailsMargin: pxToRem(12),
 });