fix(Chat Message): update at mention colors

CHANGELOG.md

@@ -24,6 +24,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 - Fix overflowing focus outline for `Grid` items for Teams theme @Bugaa92 ([#1195](https://github.com/stardust-ui/react/pull/1195))
 - Fix routing for accessibility documentation @sophieH29 ([#1208](https://github.com/stardust-ui/react/pull/1208))
 - Fix `content` prop type in `Dialog` @layershifter ([#1212](https://github.com/stardust-ui/react/pull/1212))
+- Fix themeing for Teams theme at mention nubbin and left bar in `ChatMessage` [redlines] @codepretty ([#1232](https://github.com/stardust-ui/react/pull/1232))
 - Add `keyboard` up & down key controls for the `Tree` component @priyankar205 ([#1219](https://github.com/stardust-ui/react/pull/1219))
 - Add `keyboard` enter & spacebar key controls for the `Tree` component @priyankar205 ([#1233](https://github.com/stardust-ui/react/pull/1233))
 - Simplify DOM structure in `List` component when not all slot are defined @layershifter ([#1218](https://github.com/stardust-ui/react/pull/1218))

docs/src/examples/components/Chat/Types/ChatMessageExampleBadge.shorthand.steps.ts

@@ -0,0 +1,3 @@
+const config: ScreenerTestsConfig = { themes: ['teams', 'teamsDark', 'teamsHighContrast'] }
+
+export default config

docs/src/examples/components/Chat/Types/ChatMessageExampleBadge.shorthand.tsx

@@ -16,9 +16,10 @@ const items = [
           timestamp="Yesterday, 10:15 PM"
           mine
           badge={{
-            icon: 'exclamation',
+            icon: 'redbang',
           }}
           badgePosition="start"
+          variables={{ isImportant: true }}
         />
       ),
     },
@@ -34,8 +35,9 @@ const items = [
           author="Jane Doe"
           timestamp="Yesterday, 10:15 PM"
           badge={{
-            icon: 'at',
+            icon: 'mention',
           }}
+          variables={{ hasMention: true }}
         />
       ),
     },

packages/react/src/themes/teams-dark/components/Chat/chatMessageVariables.ts

@@ -6,5 +6,7 @@ export default (siteVars: any): Partial<ChatMessageVariables> => {
     backgroundColorMine: '#3B3C54',
     color: siteVars.colors.white,
     contentFocusOutlineColor: siteVars.brand,
+    hasMentionNubbinColor: siteVars.naturalColors.orange[900], // orange[300] when the new palette pr is checked in
+    isImportantColor: '#e73550', // red[300] when the new palette pr is checked in
   }
 }

packages/react/src/themes/teams-high-contrast/components/Chat/chatMessageVariables.ts

@@ -7,5 +7,10 @@ export default (siteVars: any): Partial<ChatMessageVariables> => {
     color: siteVars.white,
     contentFocusOutlineColor: siteVars.colors.yellow[900], // Red flag (should this be accessibleYellow?)
     border: `1px solid ${siteVars.white}`,
+    hasMentionColor: siteVars.accessibleYellow,
+    hasMentionNubbinColor: siteVars.accessibleYellow,
+    isImportantColor: siteVars.accessibleYellow,
+    badgeTextColor: siteVars.colors.black,
+    timestampColorMine: siteVars.colors.white,
   }
 }

packages/react/src/themes/teams/components/Chat/chatMessageStyles.ts

@@ -123,7 +123,7 @@ const chatMessageStyles: ComponentSlotStylesInput<
   badge: ({ props: p, variables: v }) => {
     const sidePosition = p.badgePosition === 'start' ? 'left' : 'right'
     return {
-      backgroundColor: v.hasMention ? v.hasMentionColor : v.isImportantColor,
+      backgroundColor: v.hasMention ? v.hasMentionNubbinColor : v.isImportantColor,
       color: v.badgeTextColor,
       boxShadow: v.badgeShadow,
       position: 'absolute',

packages/react/src/themes/teams/components/Chat/chatMessageVariables.ts

@@ -19,6 +19,7 @@ export interface ChatMessageVariables {
   isImportant: boolean
   hasMention: boolean
   hasMentionColor: string
+  hasMentionNubbinColor: string
   isImportantColor: string
   badgeTextColor: string
   reactionGroupMarginLeft: string
@@ -43,8 +44,9 @@ export default (siteVars): ChatMessageVariables => ({
   badgeShadow: siteVars.shadowLevel1Darker,
   isImportant: false,
   hasMention: false,
-  hasMentionColor: siteVars.naturalColors.darkOrange[400],
-  isImportantColor: siteVars.colors.red[900],
+  hasMentionColor: siteVars.naturalColors.orange[900], // orange[300] when the new palette pr is checked in
+  hasMentionNubbinColor: siteVars.naturalColors.darkOrange[400], // orange[400] when the new palette pr is checked in
+  isImportantColor: siteVars.colors.red[900], // red[400] when the new palette pr is checked in
   badgeTextColor: siteVars.colors.white,
   reactionGroupMarginLeft: pxToRem(12),
   timestampColorMine: siteVars.gray02,