quickblox-react-ui-kit 0.2.8 → 0.3.0-beta.2

package/src/Presentation/providers/QuickBloxUIKitProvider/useQbUIKitDataContext.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import { qbDataContext, QBDataContextType } from './QuickBloxUIKitProvider';
+
+const useQbUIKitDataContext = (): QBDataContextType => {
+  const currentQbDataContext: QBDataContextType =
+    React.useContext(qbDataContext);
+
+  return currentQbDataContext;
+};
+
+export default useQbUIKitDataContext;

package/src/Presentation/themes/DarkTheme.ts

@@ -0,0 +1,58 @@
+import UiKitTheme from './UiKitTheme';
+import ThemeScheme from './ThemeScheme';
+
+export default class DarkTheme implements UiKitTheme {
+  // eslint-disable-next-line class-methods-use-this
+  caption = (): string => ThemeScheme.secondary_100;
+
+  // eslint-disable-next-line class-methods-use-this
+  chatInput = (): string => ThemeScheme.secondary_800;
+
+  // eslint-disable-next-line class-methods-use-this
+  disabledElements = (): string => ThemeScheme.secondary_300;
+
+  // eslint-disable-next-line class-methods-use-this
+  divider = (): string => ThemeScheme.secondary_400;
+
+  // eslint-disable-next-line class-methods-use-this
+  dropdownBackground = (): string => ThemeScheme.secondary_400;
+
+  // eslint-disable-next-line class-methods-use-this
+  error = (): string => ThemeScheme.error_300;
+
+  // eslint-disable-next-line class-methods-use-this
+  fieldBorder = (): string => ThemeScheme.secondary_200;
+
+  // eslint-disable-next-line class-methods-use-this
+  hightlight = (): string => ThemeScheme.highlight;
+
+  // eslint-disable-next-line class-methods-use-this
+  incomingBackground = (): string => ThemeScheme.secondary_400;
+
+  // eslint-disable-next-line class-methods-use-this
+  inputElements = (): string => ThemeScheme.secondary_200;
+
+  // eslint-disable-next-line class-methods-use-this
+  mainBackground = (): string => ThemeScheme.secondary_500;
+
+  // eslint-disable-next-line class-methods-use-this
+  mainElements = (): string => ThemeScheme.primary_300;
+
+  // eslint-disable-next-line class-methods-use-this
+  mainText = (): string => ThemeScheme.primary_a_100;
+
+  // eslint-disable-next-line class-methods-use-this
+  outgoingBackground = (): string => ThemeScheme.primary_500;
+
+  // eslint-disable-next-line class-methods-use-this
+  secondaryBackground = (): string => ThemeScheme.secondary_800;
+
+  // eslint-disable-next-line class-methods-use-this
+  secondaryElements = (): string => ThemeScheme.primary_a_100;
+
+  // eslint-disable-next-line class-methods-use-this
+  secondaryText = (): string => ThemeScheme.secondary_200;
+
+  // eslint-disable-next-line class-methods-use-this
+  fontFamily = (): string => ThemeScheme.fontFamily;
+}

package/src/Presentation/themes/DefaultThemes/CustomTheme.ts

@@ -0,0 +1,58 @@
+import DefaultTheme from './DefaultTheme';
+
+export default class CustomTheme extends DefaultTheme {
+  // eslint-disable-next-line class-methods-use-this
+  divider = (): string => '#E7EFFF';
+
+  // eslint-disable-next-line class-methods-use-this
+  mainText = (): string => '#0B121B';
+
+  // eslint-disable-next-line class-methods-use-this
+  fontFamily = (): string => 'Roboto';
+
+  //
+  // eslint-disable-next-line class-methods-use-this
+  caption = (): string => '#90979F';
+
+  // eslint-disable-next-line class-methods-use-this
+  chatInput = (): string => '#F7F9FF';
+
+  // eslint-disable-next-line class-methods-use-this
+  disabledElements = (): string => '#BCC1C5';
+
+  // eslint-disable-next-line class-methods-use-this
+  dropdownBackground = (): string => '#FFFFFF';
+
+  // eslint-disable-next-line class-methods-use-this
+  error = (): string => '#FF3B30';
+
+  // eslint-disable-next-line class-methods-use-this
+  fieldBorder = (): string => '#90979F';
+
+  // eslint-disable-next-line class-methods-use-this
+  hightlight = (): string => '#FFFDC1';
+
+  // eslint-disable-next-line class-methods-use-this
+  incomingBackground = (): string => '#E4E6E8';
+
+  // eslint-disable-next-line class-methods-use-this
+  inputElements = (): string => '#202F3E';
+
+  // eslint-disable-next-line class-methods-use-this
+  mainBackground = (): string => '#FFFFFF';
+
+  // eslint-disable-next-line class-methods-use-this
+  mainElements = (): string => '#3978FC';
+
+  // eslint-disable-next-line class-methods-use-this
+  outgoingBackground = (): string => '#E7EFFF';
+
+  // eslint-disable-next-line class-methods-use-this
+  secondaryBackground = (): string => '#FFFFFF';
+
+  // eslint-disable-next-line class-methods-use-this
+  secondaryElements = (): string => '#202F3E';
+
+  // eslint-disable-next-line class-methods-use-this
+  secondaryText = (): string => '#636D78';
+}

package/src/Presentation/themes/DefaultThemes/DefaultTheme.ts

@@ -0,0 +1,58 @@
+import UiKitTheme from '../UiKitTheme';
+
+export default class DefaultTheme implements UiKitTheme {
+  // eslint-disable-next-line class-methods-use-this
+  divider = (): string => 'var(--divider)';
+
+  // eslint-disable-next-line class-methods-use-this
+  mainText = (): string => 'var(--main-text)';
+
+  // eslint-disable-next-line class-methods-use-this
+  fontFamily = (): string => 'var(--font-family)';
+
+  //
+  // eslint-disable-next-line class-methods-use-this
+  caption = (): string => 'var(--caption)';
+
+  // eslint-disable-next-line class-methods-use-this
+  chatInput = (): string => 'var(--chat-input)';
+
+  // eslint-disable-next-line class-methods-use-this
+  disabledElements = (): string => 'var(--disabled-elements)';
+
+  // eslint-disable-next-line class-methods-use-this
+  dropdownBackground = (): string => 'var(--dropdown-background)';
+
+  // eslint-disable-next-line class-methods-use-this
+  error = (): string => 'var(--error)';
+
+  // eslint-disable-next-line class-methods-use-this
+  fieldBorder = (): string => 'var(--field-border)';
+
+  // eslint-disable-next-line class-methods-use-this
+  hightlight = (): string => 'var(--hightlight)';
+
+  // eslint-disable-next-line class-methods-use-this
+  incomingBackground = (): string => 'var(--incoming-background)';
+
+  // eslint-disable-next-line class-methods-use-this
+  inputElements = (): string => 'var(--input-elements)';
+
+  // eslint-disable-next-line class-methods-use-this
+  mainBackground = (): string => 'var(--main-background)';
+
+  // eslint-disable-next-line class-methods-use-this
+  mainElements = (): string => 'var(--main-elements)';
+
+  // eslint-disable-next-line class-methods-use-this
+  outgoingBackground = (): string => 'var(--outgoing-background)';
+
+  // eslint-disable-next-line class-methods-use-this
+  secondaryBackground = (): string => 'var(--secondary-background)';
+
+  // eslint-disable-next-line class-methods-use-this
+  secondaryElements = (): string => 'var(--secondary-elements)';
+
+  // eslint-disable-next-line class-methods-use-this
+  secondaryText = (): string => 'var(--secondary-text)';
+}

package/src/Presentation/themes/LightTheme.ts

@@ -0,0 +1,58 @@
+import UiKitTheme from './UiKitTheme';
+import ThemeScheme from './ThemeScheme';
+
+export default class LightTheme implements UiKitTheme {
+  // eslint-disable-next-line class-methods-use-this
+  caption = (): string => ThemeScheme.secondary_200;
+
+  // eslint-disable-next-line class-methods-use-this
+  chatInput = (): string => ThemeScheme.primary_a_200;
+
+  // eslint-disable-next-line class-methods-use-this
+  disabledElements = (): string => ThemeScheme.secondary_100;
+
+  // eslint-disable-next-line class-methods-use-this
+  divider = (): string => ThemeScheme.primary_50;
+
+  // eslint-disable-next-line class-methods-use-this
+  dropdownBackground = (): string => ThemeScheme.primary_a_100;
+
+  // eslint-disable-next-line class-methods-use-this
+  error = (): string => ThemeScheme.error_500;
+
+  // eslint-disable-next-line class-methods-use-this
+  fieldBorder = (): string => ThemeScheme.secondary_200;
+
+  // eslint-disable-next-line class-methods-use-this
+  hightlight = (): string => ThemeScheme.highlight;
+
+  // eslint-disable-next-line class-methods-use-this
+  incomingBackground = (): string => ThemeScheme.secondary_50;
+
+  // eslint-disable-next-line class-methods-use-this
+  inputElements = (): string => ThemeScheme.secondary_500;
+
+  // eslint-disable-next-line class-methods-use-this
+  mainBackground = (): string => ThemeScheme.primary_a_100;
+
+  // eslint-disable-next-line class-methods-use-this
+  mainElements = (): string => ThemeScheme.primary_500;
+
+  // eslint-disable-next-line class-methods-use-this
+  mainText = (): string => ThemeScheme.secondary_900;
+
+  // eslint-disable-next-line class-methods-use-this
+  outgoingBackground = (): string => ThemeScheme.primary_50;
+
+  // eslint-disable-next-line class-methods-use-this
+  secondaryBackground = (): string => ThemeScheme.primary_50;
+
+  // eslint-disable-next-line class-methods-use-this
+  secondaryElements = (): string => ThemeScheme.secondary_500;
+
+  // eslint-disable-next-line class-methods-use-this
+  secondaryText = (): string => ThemeScheme.secondary_300;
+
+  // eslint-disable-next-line class-methods-use-this
+  fontFamily = (): string => ThemeScheme.fontFamily;
+}

package/src/Presentation/themes/ThemeScheme.ts

@@ -0,0 +1,83 @@
+export default class ThemeScheme {
+  public static readonly primary_50 = '#E7EFFF';
+
+  public static readonly primary_100 = '#C4D7FE';
+
+  public static readonly primary_200 = '#9CBCFE';
+
+  public static readonly primary_300 = '#74A1FD';
+
+  public static readonly primary_400 = '#578CFC';
+
+  public static readonly primary_500 = '#3978FC';
+
+  public static readonly primary_600 = '#3370FC';
+
+  public static readonly primary_700 = '#2C65FB';
+
+  public static readonly primary_800 = '#245BFB';
+
+  public static readonly primary_900 = '#1748FA';
+
+  public static readonly primary_a_100 = '#FFFFFF';
+
+  public static readonly primary_a_200 = '#F7F9FF';
+
+  public static readonly primary_a_400 = '#C4CFFF';
+
+  public static readonly primary_a_700 = '#ABBAFF';
+
+  public static readonly secondary_50 = '#E4E6E8';
+
+  public static readonly secondary_100 = '#BCC1C5';
+
+  public static readonly secondary_200 = '#90979F';
+
+  public static readonly secondary_300 = '#636D78';
+
+  public static readonly secondary_400 = '#414E5B';
+
+  public static readonly secondary_500 = '#202F3E';
+
+  public static readonly secondary_600 = '#1C2A38';
+
+  public static readonly secondary_700 = '#182330';
+
+  public static readonly secondary_800 = '#131D28';
+
+  public static readonly secondary_900 = '#0B121B';
+
+  public static readonly secondary_a_100 = '#74A1FD';
+
+  public static readonly secondary_a_200 = '#3978FC';
+
+  public static readonly secondary_a_400 = '#245BFB';
+
+  public static readonly secondary_a_700 = '#0050DC';
+
+  public static readonly system_green_100 = '#C8F1D6';
+
+  public static readonly system_green_200 = '#A4E7BB';
+
+  public static readonly system_green_300 = '#80DDA0';
+
+  public static readonly system_green_400 = '#64D68B';
+
+  public static readonly system_green_500 = '#49CF77';
+
+  public static readonly error_100 = '#FFC4C1';
+
+  public static readonly error_200 = '#FF9D98';
+
+  public static readonly error_300 = '#FF766E';
+
+  public static readonly error_400 = '#FF584F';
+
+  public static readonly error_500 = '#FF3B30';
+
+  public static readonly information = '#FDB0FF';
+
+  public static readonly highlight = '#FFFDC1';
+
+  public static readonly fontFamily = 'Roboto';
+}

package/src/Presentation/themes/UiKitTheme.ts

@@ -0,0 +1,37 @@
+export default interface UiKitTheme {
+  mainElements(): string;
+
+  secondaryElements(): string;
+
+  inputElements(): string;
+
+  disabledElements(): string;
+
+  fieldBorder(): string;
+
+  mainText(): string;
+
+  secondaryText(): string;
+
+  caption(): string;
+
+  mainBackground(): string;
+
+  secondaryBackground(): string;
+
+  incomingBackground(): string;
+
+  outgoingBackground(): string;
+
+  dropdownBackground(): string;
+
+  chatInput(): string;
+
+  divider(): string;
+
+  error(): string;
+
+  hightlight(): string;
+
+  fontFamily(): string;
+}

package/src/Presentation/themes/styles/_fonts.scss

@@ -0,0 +1,32 @@
+@import url('https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,400;0,500;0,700;1,700&display=swap');
+////font-family: 'Ubuntu', sans-serif;
+@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;600;700&display=swap');
+////font-family: 'Roboto', sans-serif;
+/*
+@font-face {
+  font-family: "Roboto-Regular";
+  src: url("../fonts/Roboto-Regular.eot");
+  src: local("☺"), url("../fonts/Roboto-Regular.woff") format("woff"),
+  url("../fonts/Roboto-Regular.ttf") format("truetype");
+  font-weight: normal;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: "Roboto-Medium";
+  src: url("../fonts/Roboto-Medium.eot");
+  src: local("☺"), url("../fonts/Roboto-Medium.woff") format("woff"),
+  url("../fonts/Roboto-Medium.ttf") format("truetype");
+  font-weight: normal;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: "Roboto-Bold";
+  src: url("../fonts/Roboto-Bold.eot");
+  src: local("☺"), url("../fonts/Roboto-Bold.woff") format("woff"),
+  url("../fonts/Roboto-Bold.ttf") format("truetype");
+  font-weight: normal;
+  font-style: normal;
+}
+*/

package/src/Presentation/themes/styles/_mixins.scss

@@ -0,0 +1,6 @@
+@mixin applyBorderBox {
+  &,
+  * {
+    box-sizing: border-box;
+  }
+}

package/src/Presentation/themes/styles/_theme_colors_scheme.scss

@@ -0,0 +1,56 @@
+$qb-light-primary: #3978FC;
+$qb-light-color-background: #FFFFFF;
+$qb-light-color-divider: #E7EFFF;
+$qb-light-color-font: #0B121B;
+
+$qb-dark-primary: #202F3E;
+$qb-dark-color-background: #414E5B;
+$qb-dark-color-divider: #FFFFFF;
+$qb-dark-color-font: #3978FC;
+
+$background-overlay-light: rgba(19, 29, 40, .80);
+$background-overlay-dark: rgba(144, 151, 159, .80);
+$primary-50: #E7EFFF;
+$primary-100: #C4D7FE;
+$primary-200: #9CBCFE;
+$primary-300: #74A1FD;
+$primary-400: #578CFC;
+$primary-500: #3978FC;
+$primary-600: #3370FC;
+$primary-700: #2C65FB;
+$primary-800: #245BFB;
+$primary-900: #1748FA;
+$primary-a-100: #FFFFFF;
+$primary-a-200: #F7F9FF;
+$primary-a-400: #C4CFFF;
+$primary-a-700: #ABBAFF;
+
+$secondary-50: #E4E6E8;
+$secondary-100: #BCC1C5;
+$secondary-200: #90979F;
+$secondary-300: #636D78;
+$secondary-400: #414E5B;
+$secondary-500: #202F3E;
+$secondary-600: #1C2A38;
+$secondary-700: #182330;
+$secondary-800: #131D28;
+$secondary-900: #0B121B;
+$secondary-a-100: #74A1FD;
+$secondary-a-200: #3978FC;
+$secondary-a-400: #245BFB;
+$secondary-a-700: #0050DC;
+
+$system-green-100: #C8F1D6;
+$system-green-200: #A4E7BB;
+$system-green-300: #80DDA0;
+$system-green-400: #64D68B;
+$system-green-500: #49CF77;
+
+$error-100: #FFC4C1;
+$error-200: #FF9D98;
+$error-300: #FF766E;
+$error-400: #FF584F;
+$error-500: #FF3B30;
+
+$information: #FDB0FF;
+$highlight: #FFFDC1;

package/src/Presentation/themes/styles/_theme_colors_scheme_green.scss

@@ -0,0 +1,57 @@
+$qb-light-primary: #3978FC;
+$qb-light-color-background: #FFFFFF;
+$qb-light-color-divider: #E7EFFF;
+$qb-light-color-font: #0B121B;
+
+$qb-dark-primary: #202F3E;
+$qb-dark-color-background: #414E5B;
+$qb-dark-color-divider: #FFFFFF;
+$qb-dark-color-font: #3978FC;
+
+$background-overlay-light: rgba(13, 31, 19, 0.8);
+$background-overlay-dark: rgba(191, 199, 199, 0.8);
+
+$primary-50: #0E1F0D;
+$primary-100: #14301A;
+$primary-200: #1A4126;
+$primary-300: #205133;
+$primary-400: #26623F;
+$primary-500: #2C734C;
+$primary-600: #328458;
+$primary-700: #389565;
+$primary-800: #3EAA71;
+$primary-900: #44BB7E;
+$primary-a-100: #FFFFFF;
+$primary-a-200: #E8F9E5;
+$primary-a-400: #8FD28E;
+$primary-a-700: #76BD75;
+
+$secondary-50: #7A7A7A;
+$secondary-100: #8E8E8E;
+$secondary-200: #A2A2A2;
+$secondary-300: #B6B6B6;
+$secondary-400: #CACACA;
+$secondary-500: #DEDEDE;
+$secondary-600: #E2E2E2;
+$secondary-700: #E6E6E6;
+$secondary-800: #EAEAEA;
+$secondary-900: #EEEEEE;
+$secondary-a-100: #FFFFFF;
+$secondary-a-200: #F8F8F8;
+$secondary-a-400: #D1D1D1;
+$secondary-a-700: #B8B8B8;
+
+$system-green-100: #C8F1D6;
+$system-green-200: #A4E7BB;
+$system-green-300: #80DDA0;
+$system-green-400: #64D68B;
+$system-green-500: #49CF77;
+
+$error-100: #FFC4C1;
+$error-200: #FF9D98;
+$error-300: #FF766E;
+$error-400: #FF584F;
+$error-500: #FF3B30;
+
+$information: #FDB0FF;
+$highlight: #FFFDC1;

package/src/Presentation/themes/styles/_theme_colors_scheme_pink.scss

@@ -0,0 +1,72 @@
+$qb-light-primary: #3978FC;
+$qb-light-color-background: #FFFFFF;
+$qb-light-color-divider: #E7EFFF;
+$qb-light-color-font: #0B121B;
+
+$qb-dark-primary: #202F3E;
+$qb-dark-color-background: #414E5B;
+$qb-dark-color-divider: #FFFFFF;
+$qb-dark-color-font: #3978FC;
+
+$background-overlay-light: rgba(19, 29, 40, .80);
+$background-overlay-dark: rgba(144, 151, 159, .80);
+
+$pink-50: #FFF0F6;
+$pink-100: #FFD6E8;
+$pink-200: #FFB3D1;
+$pink-300: #FF8BBB;
+$pink-400: #FF669E;
+$pink-500: #FF4081;
+$pink-600: #F50057;
+$pink-700: #D5004F;
+$pink-800: #C10045;
+$pink-900: #A0003A;
+$pink-a-100: #FF80AB;
+$pink-a-200: #FF4081;
+$pink-a-400: #F50057;
+$pink-a-700: #C51162;
+
+$primary-50: $pink-50;
+$primary-100: $pink-100;
+$primary-200: $pink-200;
+$primary-300: $pink-300;
+$primary-400: $pink-400;
+$primary-500: $pink-500;
+$primary-600: $pink-600;
+$primary-700: $pink-700;
+$primary-800: $pink-800;
+$primary-900: $pink-900;
+$primary-a-100: $pink-a-100;
+$primary-a-200: $pink-a-200;
+$primary-a-400: $pink-a-400;
+$primary-a-700: $pink-a-700;
+
+$secondary-50: #8C8C8C;
+$secondary-100: #A0A0A0;
+$secondary-200: #B3B3B3;
+$secondary-300: #C7C7C7;
+$secondary-400: #DADADA;
+$secondary-500: #EDEDED;
+$secondary-600: #F1F1F1;
+$secondary-700: #F5F5F5;
+$secondary-800: #F8F8F8;
+$secondary-900: #FCFCFC;
+$secondary-a-100: #FFFFFF;
+$secondary-a-200: #F7F7F7;
+$secondary-a-400: #CFCFCF;
+$secondary-a-700: #B6B6B6;
+
+$system-green-100: #C8F1D6;
+$system-green-200: #A4E7BB;
+$system-green-300: #80DDA0;
+$system-green-400: #64D68B;
+$system-green-500: #49CF77;
+
+$error-100: #FFC4C1;
+$error-200: #FF9D98;
+$error-300: #FF766E;
+$error-400: #FF584F;
+$error-500: #FF3B30;
+
+$information: #FDB0FF;
+$highlight: #FFFDC1;

package/src/Presentation/themes/styles/_theme_dark.scss

@@ -0,0 +1,37 @@
+@import 'theme_colors_scheme';
+// https://sass-lang.com/documentation/breaking-changes/css-vars
+
+html[data-theme='dark'] {
+  --primary: #{$primary-500};
+  --color-background: #{$secondary-900};
+  --color-background-modal: #{$secondary-800};
+  --color-background-overlay: #{$secondary-900};
+  --color-divider: #{$secondary-400};
+  --color-font: #{$primary-a-100};
+  --color-icon: #{$primary-300};
+  --color-media-icon: #{$primary-a-100};
+  --color-default-hover: #{$secondary-700};
+  --color-default-active: #{$secondary-900};
+
+  --color-background-info: #{$primary-500};
+  --color-border-active: #{$secondary-200};
+  --tertiary-elements: #{$background-overlay-dark};
+  --main-elements: #{$primary-300};
+  --secondary-elements: #{$primary-a-100};
+  --input-elements: #{$secondary-200};
+  --disabled-elements: #{$secondary-300};
+  --field-border: #{$secondary-200};
+  --main-text: #{$primary-a-100};
+  --secondary-text: #{$secondary-200};
+  --caption: #{$secondary-100};
+  --main-background: #{$secondary-500};
+  --secondary-background: #{$secondary-800};
+  --incoming-background: #{$secondary-400};
+  --outgoing-background: #{$primary-500};
+  --dropdown-background: #{$secondary-400};
+  --chat-input: #{$secondary-800};
+  --divider: #{$secondary-400};
+  --error: #{$error-300};
+  --error-secondary: #{$error-100};
+  --hightlight: #{$highlight};
+}

package/src/Presentation/themes/styles/_theme_light.scss

@@ -0,0 +1,38 @@
+@import 'theme_colors_scheme';
+
+:root {
+  --primary: #{$primary-500};
+  --color-background: #{$primary-a-100};
+  --color-background-modal: #{$primary-100};
+  --color-background-overlay: #{$secondary-900};
+  --color-divider: #{$primary-50};
+  --color-font: #{$secondary-900};
+  --color-icon: #{$primary-500};
+  --color-media-icon: #{$primary-a-100};
+  --color-default-hover: #{$primary-700};
+  --color-default-active: #{$primary-900};
+
+  --color-background-info: #{$primary-100};
+  --color-border-active: #{$primary-200};
+  --tertiary-elements: #{$secondary-300};
+  --main-elements: #{$primary-500};
+  --toast-color: #{$secondary-800};
+  --secondary-elements: #{$secondary-500};
+  --input-elements: #{$secondary-500};
+  --disabled-elements: #{$secondary-100};
+  --field-border: #{$secondary-200};
+  --main-text: #{$secondary-900};
+  --secondary-text: #{$secondary-300};
+  --caption: #{$secondary-200};
+  --main-background: #{$primary-a-100};
+  --secondary-background: #{$primary-a-100}; // #{$primary-50};
+  --secondary-background-modal: #{$background-overlay-light};
+  --incoming-background: #{$secondary-50};
+  --outgoing-background: #{$primary-50};
+  --dropdown-background: #{$primary-a-100};
+  --chat-input: #{$primary-a-200};
+  --divider: #{$primary-50};
+  --error: #{$error-500};
+  --error-secondary: #{$error-200};
+  --hightlight: #{$highlight};
+}