quickblox-react-ui-kit 0.4.2-beta.3 → 0.4.2-beta.4

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

@@ -0,0 +1,83 @@
+import React from 'react';
+import { qbDataContext, QBDataContextType } from './QuickBloxUIKitProvider';
+
+const useQbInitializedDataContext = (): QBDataContextType => {
+  const currentQbDataContext = React.useContext(qbDataContext);
+
+  // console.log(
+  //   `call useQbDataContext with init param: ${JSON.stringify(
+  //     currentQbDataContext.InitParams,
+  //     // eslint-disable-next-line @typescript-eslint/restrict-template-expressions
+  //   )}`,
+  // );
+  // todo: throw exception if we have not enough data to start session or login
+  // let QuickBloxVersion = '';
+
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-ignore
+  if (!window.QB) {
+    throw new Error('HAVE NO SDK');
+  }
+  // else {
+  //   QuickBloxVersion = `Have SDK lib: version ${QB.version} build ${QB.buildNumber}`;
+  //   console.log(QuickBloxVersion);
+  // }
+  if (!currentQbDataContext) {
+    throw new Error('HAVE NO DATA CONTEXT');
+  }
+  if (!currentQbDataContext.InitParams) {
+    throw new Error('HAVE NO INIT SDK DATA');
+  }
+  // проверять был ли обработан логин
+  // если сведения для логина - ник, пароль или токен сессии
+  // console.log(
+  //   'data context: update init param: ',
+  //   JSON.stringify(currentQbDataContext.InitParams),
+  // );
+  if (
+    currentQbDataContext.InitParams.accountData.appId &&
+    currentQbDataContext.InitParams.accountData.accountKey &&
+    currentQbDataContext.InitParams.accountData.accountKey.length > 0
+  ) {
+    if (
+      currentQbDataContext.InitParams.accountData.sessionToken &&
+      currentQbDataContext.InitParams.accountData.sessionToken.length > 0
+    ) {
+      /* empty */
+    } else if (
+      currentQbDataContext.InitParams.accountData.authSecret &&
+      currentQbDataContext.InitParams.accountData.authSecret.length > 0
+    ) {
+      // проверить был ли проинициализирован репозиторий этими данными
+      // и залогинен юзер
+      // QBInit({
+      //   appIdOrToken: currentQbDataContext.QBInitParams.accountData.appId,
+      //   authKeyOrAppId: currentQbDataContext.QBInitParams.accountData.authKey,
+      //   authSecret: currentQbDataContext.QBInitParams.accountData.authSecret,
+      //   accountKey: currentQbDataContext.QBInitParams.accountData.accountKey,
+      // });
+      // if (
+      //   currentQbDataContext.InitParams.loginData &&
+      //   currentQbDataContext.InitParams.loginData.login &&
+      //   currentQbDataContext.InitParams.loginData.login.length > 0 &&
+      //   currentQbDataContext.InitParams.loginData.password &&
+      //   currentQbDataContext.InitParams.loginData.password.length > 0
+      // ) {
+      //   QuickBloxVersion = `Init SDK was success: version ${QB.version} build ${QB.buildNumber}`;
+      //   console.log(QuickBloxVersion);
+      //   console.log('all data to auth is collected');
+      //   // currentQbDataContext.updateAuthProcessedStatus(true);
+      // } else {
+      //   throw new Error('HAVE NO AUTH USER DATA: login or password');
+      // }
+    } else {
+      throw new Error('HAVE NO AUTH USER or WRONG authSecret');
+    }
+  } else {
+    throw new Error('HAVE NO APPID OR ACCOUNT KEY');
+  }
+
+  return currentQbDataContext;
+};
+
+export default useQbInitializedDataContext;

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;