Shared: use colors from theme

packages/shared/components/code-input/CodeInput.styled.ts

@@ -64,7 +64,7 @@ const InputWrapper = styled.div`
   }
 
   input:focus {
-    border: 1px solid #5299e0;
+    border: ${(props) => props.theme.codeInput.focusBorder};
     outline: none;
   }
 

packages/shared/components/color-picker/ColorPicker.styled.tsx

@@ -26,6 +26,7 @@
 
 import styled, { css } from "styled-components";
 import { isMobileOnly } from "react-device-detect";
+import { globalColors } from "../../themes";
 
 const Wrapper = styled.div`
   .save-button {
@@ -74,19 +75,23 @@ const Wrapper = styled.div`
     width: 30px;
     height: 30px;
     box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.25);
-    border: 8px solid #fff;
+    border: 8px solid ${globalColors.white};
   }
 
   .hex-value {
     height: 32px;
     outline: none;
     padding: 6px 8px;
-    border: 1px solid ${(props) => (props.theme.isBase ? "#d0d5da" : "#474747")};
+    border: 1px solid
+      ${(props) =>
+        props.theme.isBase
+          ? globalColors.grayStrong
+          : globalColors.grayDarkStrong};
     border-radius: 3px;
     width: 100%;
     box-sizing: border-box;
-    background: ${(props) => !props.theme.isBase && "#282828"};
-    color: ${(props) => !props.theme.isBase && "#5C5C5C"};
+    background: ${(props) => !props.theme.isBase && globalColors.darkGrayLight};
+    color: ${(props) => !props.theme.isBase && globalColors.grayDarkText};
   }
 
   .hex-value-label {

packages/shared/components/date-picker/DatePicker.styled.ts

@@ -25,7 +25,7 @@
 // International. See the License terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
 
 import styled, { css } from "styled-components";
-import { Base } from "../../themes";
+import { Base, globalColors } from "../../themes";
 import { mobile } from "../../utils";
 
 import { Calendar } from "../calendar";
@@ -106,7 +106,7 @@ const Wrapper = styled.div`
       height: 12px;
       padding: 0 10px 0 2px;
       path {
-        fill: #657077;
+        fill: ${globalColors.lightGrayDark};
       }
     }
   }

packages/shared/components/date-time-picker/DateTimerPicker.styled.ts

@@ -26,7 +26,7 @@
 
 import styled, { css } from "styled-components";
 import { getCorrectFourValuesStyle } from "../../utils";
-import { Base } from "../../themes";
+import { Base, globalColors } from "../../themes";
 
 const Selectors = styled.div<{ hasError?: boolean }>`
   position: relative;
@@ -56,7 +56,8 @@ const TimeCell = styled.span<{ hasError?: boolean }>`
   width: 73px;
   height: 32px;
 
-  background-color: ${(props) => (props.theme.isBase ? "#eceef1" : "#242424")};
+  background-color: ${(props) =>
+    props.theme.isBase ? globalColors.grayLightMid : globalColors.grayDarkMid};
   border-radius: 3px;
 
   padding: 6px 8px;

packages/shared/components/error-container/ErrorContainer.styled.ts

@@ -50,7 +50,7 @@ const StyledErrorContainer = styled.div<{ isEditor: boolean }>`
   box-sizing: border-box;
 
   .error_description_link {
-    color: #2da7db;
+    color: ${(props) => props.theme.errorContainer.linkColor};
     font-size: 13px;
     font-weight: 600;
   }

packages/shared/components/filling-status-line/FillingStatusLine.styled.ts

@@ -49,13 +49,13 @@ const FillingStatusContainer = styled.div<{
   }
 
   .status-interrupted-text {
-    color: ${(props) => props.isInterrupted && "#F2675A"};
+    color: ${(props) => props.isInterrupted && globalColors.mainRed};
   }
 
   .status-interrupted-icon {
     circle,
     path {
-      stroke: ${(props) => props.isInterrupted && "#F2675A"};
+      stroke: ${(props) => props.isInterrupted && globalColors.mainRed};
     }
   }
 

packages/shared/components/main-button-mobile/sub-components/ProgressBar.tsx

@@ -65,7 +65,6 @@ const ProgressBarMobile = ({
         <Text
           className="progress-header"
           fontSize="14px"
-          // color="#657077"
           onClick={onClickHeaderAction}
           truncate
         >

packages/shared/components/snackbar/Snackbar.tsx

@@ -39,6 +39,7 @@ import { BarConfig, SnackbarProps } from "./Snackbar.types";
 import { StyledAction, StyledSnackBar, StyledIframe } from "./Snackbar.styled";
 import StyledCrossIcon from "./SnackbarAction.styled";
 import StyledLogoIcon from "./SnackbarLogo.styled.ts";
+import { globalColors } from "../../themes";
 
 class SnackBar extends React.Component<SnackbarProps, { isLoaded: boolean }> {
   static show(barConfig: BarConfig) {
@@ -128,7 +129,7 @@ class SnackBar extends React.Component<SnackbarProps, { isLoaded: boolean }> {
       text,
       headerText,
       btnText,
-      textColor = "#000",
+      textColor = globalColors.darkBlack,
       showIcon,
       fontSize,
       fontWeight,
@@ -139,7 +140,7 @@ class SnackBar extends React.Component<SnackbarProps, { isLoaded: boolean }> {
       isCampaigns,
       onAction,
       sectionWidth,
-      backgroundColor = "#F7E6BE",
+      backgroundColor = globalColors.lightToastAlert,
       ...rest
     } = this.props;
 

packages/shared/constants/index.ts

@@ -31,13 +31,14 @@ import ShareTwitterReactSvgUrl from "PUBLIC_DIR/images/share.twitter.react.svg?u
 import ShareLinkedinReactSvgUrl from "PUBLIC_DIR/images/share.linkedin.react.svg?url";
 import ShareMicrosoftReactSvgUrl from "PUBLIC_DIR/images/share.microsoft.react.svg?url";
 import ShareZoomReactSvgUrl from "PUBLIC_DIR/images/share.zoom.react.svg?url";
+import { globalColors } from "../themes/globalColors";
 
 export const LOADER_STYLE = Object.freeze({
   title: "",
   width: "100%",
   height: "32",
-  backgroundColor: "#000000",
-  foregroundColor: "#000000",
+  backgroundColor: globalColors.darkBlack,
+  foregroundColor: globalColors.darkBlack,
   backgroundOpacity: 0.1,
   foregroundOpacity: 0.15,
   borderRadius: "3",

packages/shared/utils/whiteLabelHelper.ts

@@ -27,6 +27,7 @@
 /* eslint-disable no-console */
 import axios from "axios";
 import isEqual from "lodash/isEqual";
+import { globalColors } from "../themes";
 
 export type TWhiteLabel = {
   path: { light: string; dark: string };
@@ -40,7 +41,7 @@ export const generateLogo = (
   text: string,
   alignCenter: boolean,
   fontSize: number = 18,
-  fontColor: string = "#000",
+  fontColor: string = globalColors.darkBlack,
 ) => {
   const canvas = document.createElement("canvas");
   canvas.width = width;
@@ -179,7 +180,7 @@ export const getLogosAsText = (
       options.text,
       options.alignCenter || false,
       options.fontSize,
-      isDocsEditorName ? "#fff" : "#000",
+      isDocsEditorName ? globalColors.white : globalColors.darkBlack,
     );
     const logoDark = generateLogo(
       options.width,
@@ -187,7 +188,7 @@ export const getLogosAsText = (
       options.text,
       options.alignCenter || false,
       options.fontSize,
-      "#fff",
+      globalColors.white,
     );
     newLogos[i].path.light = logoLight;
     newLogos[i].path.dark = logoDark;