Shared: use colors from theme

packages/shared/.storybook/globals/theme-wrapper.js

@@ -1,12 +1,16 @@
 import PropTypes from "prop-types";
 import { ThemeProvider } from "../../components/theme-provider";
+import { globalColors } from "../../themes";
 
 const ThemeWrapper = ({ theme, children }) => {
   return (
     <ThemeProvider
       theme={theme}
       currentColorScheme={{
-        main: { accent: "#4781D1", buttons: "#5299E0" },
+        main: {
+          accent: globalColors.lightBlueMain,
+          buttons: globalColors.lightSecondMain,
+        },
       }}
     >
       {children}

packages/shared/components/color-input/ColorInput.tsx

@@ -33,6 +33,7 @@ import { DropDown } from "../drop-down";
 
 import { ColorInputProps } from "./ColorInput.types";
 import { ColorPicker } from "../color-picker";
+import { globalColors } from "../../themes";
 
 const ColorInput = ({
   className,
@@ -45,7 +46,9 @@ const ColorInput = ({
   hasError,
   hasWarning,
 }: ColorInputProps) => {
-  const [color, setColor] = useState(defaultColor || "#4781D1");
+  const [color, setColor] = useState(
+    defaultColor || globalColors.lightBlueMain,
+  );
   const [isPickerOpen, setIsPickerOpen] = useState(false);
 
   const closePicker = () => setIsPickerOpen(false);

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

@@ -32,6 +32,7 @@ import { Button } from "../button";
 import Wrapper from "./ColorPicker.styled";
 import { ColorPickerProps } from "./ColorPicker.types";
 import { ButtonSize } from "../button/Button.enums";
+import { globalColors } from "../../themes";
 
 const ColorPicker = ({
   className,
@@ -45,7 +46,9 @@ const ColorPicker = ({
   handleChange,
   hexCodeLabel,
 }: ColorPickerProps) => {
-  const [color, setColor] = useState(appliedColor || "#4781D1");
+  const [color, setColor] = useState(
+    appliedColor || globalColors.lightBlueMain,
+  );
 
   useEffect(() => {
     if (!isPickerOnly && appliedColor && appliedColor !== color) {
@@ -105,7 +108,7 @@ ColorPicker.defaultProps = {
   isPickerOnly: false,
   onClose: () => {},
   onApply: () => {},
-  appliedColor: "#4781D1",
+  appliedColor: globalColors.lightBlueMain,
   applyButtonLabel: "Apply",
   cancelButtonLabel: "Cancel",
   hexCodeLabel: "Hex code",

packages/shared/components/empty-view/EmptyView.styled.ts

@@ -1,5 +1,6 @@
 import styled from "styled-components";
 import { mobile } from "@docspace/shared/utils";
+import { globalColors } from "../../themes";
 
 export const EmptyViewWrapper = styled.div`
   margin-inline: auto;
@@ -68,34 +69,34 @@ export const EmptyViewItemWrapper = styled.div`
 
   :nth-child(1) .ev-item__icon {
     rect {
-      color: #5299e0;
+      color: ${globalColors.lightSecondMain};
     }
     path {
-      color: #4781d1;
+      color: ${globalColors.lightBlueMain};
     }
   }
   :nth-child(2) .ev-item__icon {
     rect {
-      color: #2db482;
+      color: ${globalColors.mainGreen};
     }
     path {
-      color: #2db482;
+      color: ${globalColors.mainGreen};
     }
   }
   :nth-child(3) .ev-item__icon {
     rect {
-      color: #f97a0b;
+      color: ${globalColors.mainOrange};
     }
     path {
-      color: #f97a0b;
+      color: ${globalColors.mainOrange};
     }
   }
   :nth-child(4) .ev-item__icon {
     rect {
-      color: #6d4ec2;
+      color: ${globalColors.purple};
     }
     path {
-      color: #6d4ec2;
+      color: ${globalColors.purple};
     }
   }
 

packages/shared/components/share/sub-components/ExpiredComboBox.tsx

@@ -37,6 +37,7 @@ import { getExpiredOptions } from "../Share.helpers";
 import { ExpiredComboBoxProps } from "../Share.types";
 
 import ShareCalendar from "./ShareCalendar";
+import { globalColors } from "../../../themes";
 
 const ExpiredComboBox = ({
   link,
@@ -136,7 +137,7 @@ const ExpiredComboBox = ({
           The link will expire after
           <LinkWithDropdown
             className="expired-options"
-            color="#4781D1"
+            color={globalColors.lightBlueMain}
             dropdownType="alwaysDashed"
             data={expiredOptions}
             fontSize="12px"
@@ -157,7 +158,7 @@ const ExpiredComboBox = ({
         The link is valid for
         <LinkWithDropdown
           className="expired-options"
-          color="#4781D1"
+          color={globalColors.lightBlueMain}
           dropdownType="alwaysDashed"
           data={expiredOptions}
           fontSize="12px"
@@ -180,7 +181,7 @@ const ExpiredComboBox = ({
             type={LinkType.action}
             fontWeight={400}
             fontSize="12px"
-            color="#4781D1"
+            color={globalColors.lightBlueMain}
             onClick={onRegenerateClick}
           >
             {t("Common:Regenerate")}

packages/shared/components/time-picker/TimePicker.styled.tsx

@@ -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";
 
 const TimeInput = styled.div<{ hasError?: boolean; isFocused?: boolean }>`
   width: 57px;
@@ -49,11 +49,11 @@ const TimeInput = styled.div<{ hasError?: boolean; isFocused?: boolean }>`
   ${(props) =>
     props.isFocused &&
     css`
-      border-color: #4781d1;
+      border-color: ${globalColors.lightBlueMain};
     `}
 
   :focus {
-    border-color: #4781d1;
+    border-color: ${globalColors.lightBlueMain};
   }
 
   input {

packages/shared/themes/globalColors.ts

@@ -61,6 +61,7 @@ export const globalColors = {
   secondOrange: "#FF9933",
   mainRed: "#F2665A",
   mainPurple: "#533ED1",
+  purple: "#6D4EC2",
   secondPurple: "#8570BD",
   mainBlueLight: "#13B7EC",
   secondBlue: "#11A3D4",