fix(Chat): Adding dark and contrast theme files for Chat

CHANGELOG.md

@@ -23,6 +23,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 ### Fixes
 - Ensure `Popup` properly flips values of `offset` prop in RTL @kuzhelov ([#612](https://github.com/stardust-ui/react/pull/612))
 - Fix `List` - items should be selectable @sophieH29 ([#566](https://github.com/stardust-ui/react/pull/566))
+- Fix `Chat` - added themes values for dark and contrast @bcalvery ([#652](https://github.com/stardust-ui/react/pull/652))
 
 ### Features
 - Add `color` prop to `Text` component @Bugaa92 ([#597](https://github.com/stardust-ui/react/pull/597))

src/themes/teams-dark/componentVariables.ts

@@ -1,4 +1,6 @@
 export { default as Button } from './components/Button/buttonVariables'
+export { default as Chat } from './components/Chat/chatVariables'
+export { default as ChatMessage } from './components/Chat/chatMessageVariables'
 export { default as Divider } from './components/Divider/dividerVariables'
 export { default as Header } from './components/Header/headerVariables'
 export { default as Input } from './components/Input/inputVariables'

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

@@ -0,0 +1,11 @@
+import { ChatMessageVariables } from '../../../teams/components/Chat/chatMessageVariables'
+import { Partial } from 'types/utils'
+
+export default (siteVars: any): Partial<ChatMessageVariables> => {
+  return {
+    backgroundColor: siteVars.gray10,
+    backgroundColorMine: '#3B3C54',
+    color: siteVars.white,
+    contentFocusOutlineColor: siteVars.brand,
+  }
+}

src/themes/teams-dark/components/Chat/chatVariables.ts

@@ -0,0 +1,8 @@
+import { ChatVariables } from '../../../teams/components/Chat/chatVariables'
+import { Partial } from 'types/utils'
+
+export default (siteVars: any): Partial<ChatVariables> => {
+  return {
+    backgroundColor: siteVars.black,
+  }
+}

src/themes/teams-high-contrast/componentVariables.ts

@@ -1,5 +1,7 @@
 export { default as Avatar } from './components/Avatar/avatarVariables'
 export { default as Button } from './components/Button/buttonVariables'
+export { default as Chat } from './components/Chat/chatVariables'
+export { default as ChatMessage } from './components/Chat/chatMessageVariables'
 export { default as Divider } from './components/Divider/dividerVariables'
 export { default as Header } from './components/Header/headerVariables'
 

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

@@ -0,0 +1,12 @@
+import { ChatMessageVariables } from '../../../teams/components/Chat/chatMessageVariables'
+import { Partial } from 'types/utils'
+
+export default (siteVars: any): Partial<ChatMessageVariables> => {
+  return {
+    backgroundColor: siteVars.black,
+    backgroundColorMine: siteVars.black,
+    color: siteVars.white,
+    contentFocusOutlineColor: siteVars.yellow,
+    border: `1px solid ${siteVars.white}`,
+  }
+}

src/themes/teams-high-contrast/components/Chat/chatVariables.ts

@@ -0,0 +1,8 @@
+import { ChatVariables } from '../../../teams/components/Chat/chatVariables'
+import { Partial } from 'types/utils'
+
+export default (siteVars: any): Partial<ChatVariables> => {
+  return {
+    backgroundColor: siteVars.black,
+  }
+}

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

@@ -7,6 +7,7 @@ const chatMessageStyles: ComponentSlotStylesInput<ChatMessageProps, ChatMessageV
     display: 'inline-block',
     padding: v.padding,
     borderRadius: v.borderRadius,
+    border: v.border,
     color: v.color,
     backgroundColor: p.mine ? v.backgroundColorMine : v.backgroundColor,
     maxWidth: v.width,

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

@@ -9,15 +9,17 @@ export interface ChatMessageVariables {
   padding: string
   authorMargin: string
   contentFocusOutlineColor: string
+  border: string
 }
 
 export default (siteVars): ChatMessageVariables => ({
   width: '80%',
   backgroundColor: siteVars.white,
-  backgroundColorMine: '#E0E0ED',
+  backgroundColorMine: '#E5E5F1',
   borderRadius: '0.3rem',
   color: 'rgb(64, 64, 64)',
   padding: pxToRem(14),
   authorMargin: pxToRem(10),
   contentFocusOutlineColor: siteVars.brand,
+  border: 'none',
 })