From 7093e19d5adac44cde202f3fe423aa7f2227bb90 Mon Sep 17 00:00:00 2001 From: Brian Calvery Date: Thu, 13 Dec 2018 11:17:21 -0800 Subject: [PATCH 1/4] reset adn added variable files for chat --- src/themes/teams-dark/componentVariables.ts | 3 +++ .../teams-dark/components/Chat/chatItemVariables.ts | 12 ++++++++++++ .../components/Chat/chatMessageVariables.ts | 13 +++++++++++++ .../teams-dark/components/Chat/chatVariables.ts | 8 ++++++++ .../teams-high-contrast/componentVariables.ts | 3 +++ .../components/Chat/chatItemVariables.ts | 12 ++++++++++++ .../components/Chat/chatMessageVariables.ts | 13 +++++++++++++ .../components/Chat/chatVariables.ts | 8 ++++++++ 8 files changed, 72 insertions(+) create mode 100644 src/themes/teams-dark/components/Chat/chatItemVariables.ts create mode 100644 src/themes/teams-dark/components/Chat/chatMessageVariables.ts create mode 100644 src/themes/teams-dark/components/Chat/chatVariables.ts create mode 100644 src/themes/teams-high-contrast/components/Chat/chatItemVariables.ts create mode 100644 src/themes/teams-high-contrast/components/Chat/chatMessageVariables.ts create mode 100644 src/themes/teams-high-contrast/components/Chat/chatVariables.ts diff --git a/src/themes/teams-dark/componentVariables.ts b/src/themes/teams-dark/componentVariables.ts index 8e3ec3ed40..01e6fc079b 100644 --- a/src/themes/teams-dark/componentVariables.ts +++ b/src/themes/teams-dark/componentVariables.ts @@ -1,4 +1,7 @@ export { default as Button } from './components/Button/buttonVariables' +export { default as Chat } from './components/Chat/chatVariables' +export { default as ChatItem } from './components/Chat/chatItemVariables' +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' diff --git a/src/themes/teams-dark/components/Chat/chatItemVariables.ts b/src/themes/teams-dark/components/Chat/chatItemVariables.ts new file mode 100644 index 0000000000..67eb61ffec --- /dev/null +++ b/src/themes/teams-dark/components/Chat/chatItemVariables.ts @@ -0,0 +1,12 @@ +import { ChatItemVariables } from '../../../teams/components/Chat/chatItemVariables' +import { Partial } from 'types/utils' + +export default (siteVars: any): Partial => { + return { + messageColor: siteVars.white, + messageColorMine: '#E0E0ED', + avatar: { + statusBorderColor: siteVars.black, + }, + } +} diff --git a/src/themes/teams-dark/components/Chat/chatMessageVariables.ts b/src/themes/teams-dark/components/Chat/chatMessageVariables.ts new file mode 100644 index 0000000000..25b3df35af --- /dev/null +++ b/src/themes/teams-dark/components/Chat/chatMessageVariables.ts @@ -0,0 +1,13 @@ +import { ChatMessageVariables } from '../../../teams/components/Chat/chatMessageVariables' +import { Partial } from 'types/utils' + +export default (siteVars: any): Partial => { + return { + messageColor: siteVars.white, + messageColorMine: '#E0E0ED', + avatar: { + statusBorderColor: siteVars.black, + }, + messageBody: { focusOutlineColor: siteVars.brand }, + } +} diff --git a/src/themes/teams-dark/components/Chat/chatVariables.ts b/src/themes/teams-dark/components/Chat/chatVariables.ts new file mode 100644 index 0000000000..1a5f78499c --- /dev/null +++ b/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 => { + return { + backgroundColor: siteVars.black, + } +} diff --git a/src/themes/teams-high-contrast/componentVariables.ts b/src/themes/teams-high-contrast/componentVariables.ts index 38bb4040b9..587f349589 100644 --- a/src/themes/teams-high-contrast/componentVariables.ts +++ b/src/themes/teams-high-contrast/componentVariables.ts @@ -1,5 +1,8 @@ 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 ChatItem } from './components/Chat/chatItemVariables' +export { default as ChatMessage } from './components/Chat/chatMessageVariables' export { default as Divider } from './components/Divider/dividerVariables' export { default as Header } from './components/Header/headerVariables' diff --git a/src/themes/teams-high-contrast/components/Chat/chatItemVariables.ts b/src/themes/teams-high-contrast/components/Chat/chatItemVariables.ts new file mode 100644 index 0000000000..1b66923644 --- /dev/null +++ b/src/themes/teams-high-contrast/components/Chat/chatItemVariables.ts @@ -0,0 +1,12 @@ +import { ChatItemVariables } from '../../../teams/components/Chat/chatItemVariables' +import { Partial } from 'types/utils' + +export default (siteVars: any): Partial => { + return { + messageColor: siteVars.black, + messageColorMine: siteVars.black, + avatar: { + statusBorderColor: siteVars.black, + }, + } +} diff --git a/src/themes/teams-high-contrast/components/Chat/chatMessageVariables.ts b/src/themes/teams-high-contrast/components/Chat/chatMessageVariables.ts new file mode 100644 index 0000000000..9ca6c92bc9 --- /dev/null +++ b/src/themes/teams-high-contrast/components/Chat/chatMessageVariables.ts @@ -0,0 +1,13 @@ +import { ChatMessageVariables } from '../../../teams/components/Chat/chatMessageVariables' +import { Partial } from 'types/utils' + +export default (siteVars: any): Partial => { + return { + messageColor: siteVars.black, + messageColorMine: siteVars.black, + avatar: { + statusBorderColor: siteVars.black, + }, + messageBody: { focusOutlineColor: siteVars.brand }, + } +} diff --git a/src/themes/teams-high-contrast/components/Chat/chatVariables.ts b/src/themes/teams-high-contrast/components/Chat/chatVariables.ts new file mode 100644 index 0000000000..1a5f78499c --- /dev/null +++ b/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 => { + return { + backgroundColor: siteVars.black, + } +} From 37aae27ea81fccd74275562145abbc85e930d8e3 Mon Sep 17 00:00:00 2001 From: Brian Calvery Date: Thu, 13 Dec 2018 16:00:55 -0800 Subject: [PATCH 2/4] fixing merge issues and adding border to messages for contrast theme. --- src/themes/teams-dark/componentVariables.ts | 1 - .../teams-dark/components/Chat/chatItemVariables.ts | 12 ------------ .../components/Chat/chatMessageVariables.ts | 10 ++++------ src/themes/teams-high-contrast/componentVariables.ts | 1 - .../components/Chat/chatItemVariables.ts | 12 ------------ .../components/Chat/chatMessageVariables.ts | 11 +++++------ .../teams/components/Chat/chatMessageStyles.ts | 1 + .../teams/components/Chat/chatMessageVariables.ts | 2 ++ 8 files changed, 12 insertions(+), 38 deletions(-) delete mode 100644 src/themes/teams-dark/components/Chat/chatItemVariables.ts delete mode 100644 src/themes/teams-high-contrast/components/Chat/chatItemVariables.ts diff --git a/src/themes/teams-dark/componentVariables.ts b/src/themes/teams-dark/componentVariables.ts index 01e6fc079b..ce9d65749a 100644 --- a/src/themes/teams-dark/componentVariables.ts +++ b/src/themes/teams-dark/componentVariables.ts @@ -1,6 +1,5 @@ export { default as Button } from './components/Button/buttonVariables' export { default as Chat } from './components/Chat/chatVariables' -export { default as ChatItem } from './components/Chat/chatItemVariables' export { default as ChatMessage } from './components/Chat/chatMessageVariables' export { default as Divider } from './components/Divider/dividerVariables' export { default as Header } from './components/Header/headerVariables' diff --git a/src/themes/teams-dark/components/Chat/chatItemVariables.ts b/src/themes/teams-dark/components/Chat/chatItemVariables.ts deleted file mode 100644 index 67eb61ffec..0000000000 --- a/src/themes/teams-dark/components/Chat/chatItemVariables.ts +++ /dev/null @@ -1,12 +0,0 @@ -import { ChatItemVariables } from '../../../teams/components/Chat/chatItemVariables' -import { Partial } from 'types/utils' - -export default (siteVars: any): Partial => { - return { - messageColor: siteVars.white, - messageColorMine: '#E0E0ED', - avatar: { - statusBorderColor: siteVars.black, - }, - } -} diff --git a/src/themes/teams-dark/components/Chat/chatMessageVariables.ts b/src/themes/teams-dark/components/Chat/chatMessageVariables.ts index 25b3df35af..63cc0bbd6b 100644 --- a/src/themes/teams-dark/components/Chat/chatMessageVariables.ts +++ b/src/themes/teams-dark/components/Chat/chatMessageVariables.ts @@ -3,11 +3,9 @@ import { Partial } from 'types/utils' export default (siteVars: any): Partial => { return { - messageColor: siteVars.white, - messageColorMine: '#E0E0ED', - avatar: { - statusBorderColor: siteVars.black, - }, - messageBody: { focusOutlineColor: siteVars.brand }, + backgroundColor: siteVars.gray14, + backgroundColorMine: siteVars.brand16, + color: siteVars.white, + contentFocusOutlineColor: siteVars.brand, } } diff --git a/src/themes/teams-high-contrast/componentVariables.ts b/src/themes/teams-high-contrast/componentVariables.ts index 587f349589..c267102ca7 100644 --- a/src/themes/teams-high-contrast/componentVariables.ts +++ b/src/themes/teams-high-contrast/componentVariables.ts @@ -1,7 +1,6 @@ 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 ChatItem } from './components/Chat/chatItemVariables' export { default as ChatMessage } from './components/Chat/chatMessageVariables' export { default as Divider } from './components/Divider/dividerVariables' export { default as Header } from './components/Header/headerVariables' diff --git a/src/themes/teams-high-contrast/components/Chat/chatItemVariables.ts b/src/themes/teams-high-contrast/components/Chat/chatItemVariables.ts deleted file mode 100644 index 1b66923644..0000000000 --- a/src/themes/teams-high-contrast/components/Chat/chatItemVariables.ts +++ /dev/null @@ -1,12 +0,0 @@ -import { ChatItemVariables } from '../../../teams/components/Chat/chatItemVariables' -import { Partial } from 'types/utils' - -export default (siteVars: any): Partial => { - return { - messageColor: siteVars.black, - messageColorMine: siteVars.black, - avatar: { - statusBorderColor: siteVars.black, - }, - } -} diff --git a/src/themes/teams-high-contrast/components/Chat/chatMessageVariables.ts b/src/themes/teams-high-contrast/components/Chat/chatMessageVariables.ts index 9ca6c92bc9..8d0c47c986 100644 --- a/src/themes/teams-high-contrast/components/Chat/chatMessageVariables.ts +++ b/src/themes/teams-high-contrast/components/Chat/chatMessageVariables.ts @@ -3,11 +3,10 @@ import { Partial } from 'types/utils' export default (siteVars: any): Partial => { return { - messageColor: siteVars.black, - messageColorMine: siteVars.black, - avatar: { - statusBorderColor: siteVars.black, - }, - messageBody: { focusOutlineColor: siteVars.brand }, + backgroundColor: siteVars.black, + backgroundColorMine: siteVars.black, + color: siteVars.white, + contentFocusOutlineColor: siteVars.yellow, + border: `1px solid ${siteVars.white}`, } } diff --git a/src/themes/teams/components/Chat/chatMessageStyles.ts b/src/themes/teams/components/Chat/chatMessageStyles.ts index bfd1cef48a..91889adf31 100644 --- a/src/themes/teams/components/Chat/chatMessageStyles.ts +++ b/src/themes/teams/components/Chat/chatMessageStyles.ts @@ -7,6 +7,7 @@ const chatMessageStyles: ComponentSlotStylesInput ({ @@ -20,4 +21,5 @@ export default (siteVars): ChatMessageVariables => ({ padding: pxToRem(14), authorMargin: pxToRem(10), contentFocusOutlineColor: siteVars.brand, + border: 'none', }) From 63e05acbd4417664559b8eef36d1e783b7d56e24 Mon Sep 17 00:00:00 2001 From: Brian Calvery Date: Wed, 19 Dec 2018 09:38:11 -0800 Subject: [PATCH 3/4] updating colors per daisy --- src/themes/teams-dark/components/Chat/chatMessageVariables.ts | 4 ++-- src/themes/teams/components/Chat/chatMessageVariables.ts | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/themes/teams-dark/components/Chat/chatMessageVariables.ts b/src/themes/teams-dark/components/Chat/chatMessageVariables.ts index 63cc0bbd6b..b79e641334 100644 --- a/src/themes/teams-dark/components/Chat/chatMessageVariables.ts +++ b/src/themes/teams-dark/components/Chat/chatMessageVariables.ts @@ -3,8 +3,8 @@ import { Partial } from 'types/utils' export default (siteVars: any): Partial => { return { - backgroundColor: siteVars.gray14, - backgroundColorMine: siteVars.brand16, + backgroundColor: siteVars.gray10, + backgroundColorMine: '#3B3C54', color: siteVars.white, contentFocusOutlineColor: siteVars.brand, } diff --git a/src/themes/teams/components/Chat/chatMessageVariables.ts b/src/themes/teams/components/Chat/chatMessageVariables.ts index af0e1df676..032836c222 100644 --- a/src/themes/teams/components/Chat/chatMessageVariables.ts +++ b/src/themes/teams/components/Chat/chatMessageVariables.ts @@ -15,7 +15,7 @@ export interface ChatMessageVariables { export default (siteVars): ChatMessageVariables => ({ width: '80%', backgroundColor: siteVars.white, - backgroundColorMine: '#E0E0ED', + backgroundColorMine: '#E5E5F1', borderRadius: '0.3rem', color: 'rgb(64, 64, 64)', padding: pxToRem(14), From f423b7e07864188523bcfc2c42397744d024e099 Mon Sep 17 00:00:00 2001 From: Brian Calvery Date: Wed, 19 Dec 2018 13:58:10 -0800 Subject: [PATCH 4/4] updating changelog --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 94479e015c..bcd8f7dd5c 100644 --- a/CHANGELOG.md +++ b/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))