Shared: use colors from theme

2024-06-20 16:05:55 +03:00 · 2024-06-20 16:05:55 +03:00 · 2a19bc3106
commit 2a19bc3106
parent 0ae8eeb76c
15 changed files with 52 additions and 87 deletions
--- a/packages/shared/components/all/All.stories.tsx
+++ b/packages/shared/components/all/All.stories.tsx
@ -61,6 +61,7 @@ import { Text } from "../text";
 import { Toast, toastr } from "../toast";
 import { ToggleContent } from "../toggle-content";
 import { Tooltip } from "../tooltip";
+import { globalColors } from "../../themes";

 const arrayItems = [
  {
@ -259,7 +260,7 @@ const Template = () => (
                <Text isBold fontSize="16px">
                  {arrayUsers[+content].name}
                </Text>
-                <Text color="#A3A9AE" fontSize="13px">
+                <Text color={globalColors.gray} fontSize="13px">
                  {arrayUsers[+content].email}
                </Text>
                <Text fontSize="13px">{arrayUsers[+content].position}</Text>
@ -302,40 +303,6 @@ const Template = () => (
          }
        />
      </div>
-      {/*
-          <div style={{ padding: "8px 0" }}>
-          <ContextMenuButton
-            iconName={VerticalDotsReactSvgUrl}
-            size={16}
-            color="#A3A9AE"
-            isDisabled={false}
-            title="Actions"
-            getData={() => [
-              {
-                key: "key",
-                label: "label",
-                onClick: () => {}
-              }
-            ]}
-          />
-        </div>
-        */}
-      {/* <div style={{ padding: "8px 0" }}>
-          <div style={{ display: "flex" }}>
-            <div style={{ marginRight: 16 }}>
-              <IconButton
-                size="25"
-                isDisabled={false}
-                onClick={() => {}}
-                iconName={VerticalDotsReactSvgUrl}
-                isFill
-                isClickable={false}
-              />
-            </div>
-            <HelpButton tooltipContent="Paste you tooltip content here" />
-          </div>
-        </div>
-        */}
    </div>
    <div style={{ justifySelf: "center" }}>
      <div style={{ padding: "8px 0" }}>
@ -386,26 +353,6 @@ const Template = () => (
        </StringValue> */}
      </div>

-      {/* <div style={{ padding: "8px 0" }}>
-        <DatePicker
-          onChange={(date) => {
-            console.log("Selected date", date);
-          }}
-          selectedDate={new Date()}
-          minDate={new Date("1970/01/01")}
-          maxDate={new Date(new Date().getFullYear() + 1 + "/01/01")}
-          isDisabled={false}
-          isReadOnly={false}
-          hasError={false}
-          isOpen={false}
-          themeColor="#ED7309"
-          locale="en"
-          setSelectedDate={(date) => {
-            console.log("Selected date", date);
-          }}
-        />
-      </div> */}
-
      <div style={{ padding: "8px 0" }}>
        {/* <StringValue>
          {({ value, set }: any) => ( */}
@ -491,7 +438,6 @@ const Template = () => (
      <div style={{ padding: "8px 0" }}>
        <Calendar
          onChange={() => {}}
-          //   themeColor="#ED7309"
          selectedDate={moment()}
          minDate={new Date("1970/01/01")}
          maxDate={new Date("3000/01/01")}
--- a/packages/shared/components/article-item/ArticleItem.styled.ts
+++ b/packages/shared/components/article-item/ArticleItem.styled.ts
@ -78,7 +78,7 @@ const StyledArticleItemHeaderContainer = styled.div<{
    font-weight: 600;
    font-size: 11px;
    line-height: 14px;
-    color: #a3a9ae;
+    color: ${(props) => props.theme.catalogItem.header.color};
  }

  @media ${tablet} {
@ -98,7 +98,7 @@ const StyledArticleItemHeaderContainer = styled.div<{
          line-height: 1px;
          height: 1px;

-          background: #d0d5da;
+          background: ${props.theme.catalogItem.header.background};
        }
      `}
  }
--- a/packages/shared/components/campaigns-banner/CampaignsBanner.styled.ts
+++ b/packages/shared/components/campaigns-banner/CampaignsBanner.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 { tablet, mobile } from "../../utils/device";

 const BannerWrapper = styled.div<{
@ -77,7 +77,7 @@ const BannerWrapper = styled.div<{
    top: 18px;

    path {
-      fill: "#A3A9AE";
+      fill: ${globalColors.gray};
    }
  }
 `;
--- a/packages/shared/components/context-menu-button/ContextMenuButton.test.tsx
+++ b/packages/shared/components/context-menu-button/ContextMenuButton.test.tsx
@ -32,6 +32,7 @@ import VerticalDotsReactSvgUrl from "PUBLIC_DIR/images/vertical-dots.react.svg?u

 import { ContextMenuButton } from "./ContextMenuButton";
 import { ContextMenuButtonDisplayType } from "./ContextMenuButton.enums";
+import { globalColors } from "../../themes";

 const baseData = () => [
  {
@ -45,7 +46,7 @@ const baseProps = {
  title: "Actions",
  iconName: VerticalDotsReactSvgUrl,
  size: 16,
-  color: "#A3A9AE",
+  color: globalColors.gray,
  getData: baseData,
  isDisabled: false,
 };
--- a/packages/shared/components/date-picker/DatePicker.tsx
+++ b/packages/shared/components/date-picker/DatePicker.tsx
@ -40,6 +40,7 @@ import {
  Wrapper,
 } from "./DatePicker.styled";
 import { DatePickerProps } from "./DatePicker.types";
+import { globalColors } from "../../themes";

 const DatePicker = (props: DatePickerProps) => {
  const {
@ -136,7 +137,7 @@ const DatePicker = (props: DatePickerProps) => {
            className="mr-8 add-delivery-date-button"
            iconName={CalendarIconUrl}
          />
-          <Text isInline fontWeight={600} color="#A3A9AE">
+          <Text isInline fontWeight={600} color={globalColors.gray}>
            {selectDateText}
          </Text>
        </DateSelector>
--- a/packages/shared/components/file-input/FileInput.tsx
+++ b/packages/shared/components/file-input/FileInput.tsx
@ -40,6 +40,7 @@ import { toastr } from "../toast";

 import StyledFileInput from "./FileInput.styled";
 import { FileInputProps } from "./FileInput.types";
+import { globalColors } from "../../themes";

 const FileInputPure = ({
  onInput,
@ -177,7 +178,7 @@ const FileInputPure = ({
                      ? DocumentReactSvgUrl
                      : CatalogFolderReactSvgUrl
                  }
-                  color="#A3A9AE"
+                  color={globalColors.gray}
                  size={iconSize}
                  isDisabled={isDisabled}
                />
--- a/packages/shared/components/filling-role-selector/FillingRoleSelector.styled.ts
+++ b/packages/shared/components/filling-role-selector/FillingRoleSelector.styled.ts
@ -29,7 +29,7 @@ import styled, { css } from "styled-components";
 import AddRoleButton from "PUBLIC_DIR/images/add.role.button.react.svg";
 import EveryoneRoleIcon from "PUBLIC_DIR/images/everyone.role.button.react.svg";

-import { Base } from "../../themes";
+import { Base, globalColors } from "../../themes";

 const StyledFillingRoleSelector = styled.div`
  display: flex;
@ -65,7 +65,7 @@ const StyledNumber = styled.div`
  font-weight: 600;
  font-size: 14px;
  line-height: 16px;
-  color: #a3a9ae;
+  color: ${globalColors.gray};
 `;

 const StyledAvatar = styled.img`
@ -128,13 +128,13 @@ const StyledEveryoneRoleContainer = styled.div`
    font-weight: 400;
    font-size: 10px;
    line-height: 14px;
-    color: #657077;
+    color: ${globalColors.lightGrayDark};
  }
 `;

 const StyledTooltip = styled.div`
-  background: #f8f7bf;
-  color: #333;
+  background: ${globalColors.lightToastInfo};
+  color: ${globalColors.black};
  border-radius: 6px;
  font-weight: 400;
  font-size: 12px;
--- a/packages/shared/components/filling-status-line/FillingStatusLine.styled.ts
+++ b/packages/shared/components/filling-status-line/FillingStatusLine.styled.ts
@ -25,7 +25,7 @@
 // International. See the License terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode

 import styled from "styled-components";
-import { Base } from "../../themes";
+import { Base, globalColors } from "../../themes";

 const FillingStatusContainer = styled.div<{
  isDone?: boolean;
@ -36,13 +36,15 @@ const FillingStatusContainer = styled.div<{
  padding: 10px;

  .status-done-text {
-    color: ${(props) => (props.isDone ? "#4781D1" : "#A3A9AE")};
+    color: ${(props) =>
+      props.isDone ? globalColors.lightBlueMain : globalColors.gray};
  }

  .status-done-icon {
    circle,
    path {
-      stroke: ${(props) => (props.isDone ? "#4781D1" : "#A3A9AE")};
+      stroke: ${(props) =>
+        props.isDone ? globalColors.lightBlueMain : globalColors.gray};
    }
  }

@ -85,9 +87,10 @@ const AccordionItem = styled.div<{

    .user-avatar {
      padding: 1px;
-      border: 2px solid #a3a9ae;
+      border: 2px solid ${globalColors.gray};
      border-color: ${(props) =>
-        (props.isDone && "#4781D1") || (props.isInterrupted && "#F2675A")};
+        (props.isDone && globalColors.lightBlueMain) ||
+        (props.isInterrupted && globalColors.mainRed)};
      border-radius: 50%;
    }

@ -96,7 +99,8 @@ const AccordionItem = styled.div<{
    }

    .accordion-role {
-      color: ${(props) => (props.theme.isBase ? "#657077" : "#FFFFFF99")};
+      color: ${(props) =>
+        props.theme.isBase ? globalColors.lightGrayDark : "#FFFFFF99"};
    }

    .arrow-icon {
@ -107,7 +111,8 @@ const AccordionItem = styled.div<{
      transform: ${(props) =>
        props.isOpen ? "rotate(270deg)" : "rotate(90deg)"};
      path {
-        fill: ${(props) => (props.isOpen ? "#4781d1" : "#A3A9AE")};
+        fill: ${(props) =>
+          props.isOpen ? globalColors.lightBlueMain : globalColors.gray};
      }
    }
  }
@ -132,25 +137,28 @@ const AccordionItem = styled.div<{
    ${(props) => {
      const borderValue = `2px ${
        props.isDone || props.isInterrupted ? "solid" : "dashed"
-      } #A3A9AE;`;
+      } ${globalColors.gray};`;

      return props.theme.interfaceDirection === "rtl"
        ? `border-right: ${borderValue}`
        : `border-left: ${borderValue}`;
    }}
    border-color: ${(props) =>
-      (props.isDone && "#4781D1") || (props.isInterrupted && "#F2675A")};
+      (props.isDone && globalColors.lightBlueMain) ||
+      (props.isInterrupted && globalColors.mainRed)};

    .status-text {
      ${(props) =>
        props.theme.interfaceDirection === "rtl"
          ? `margin-right: 15px;`
          : `margin-left: 15px;`}
-      color: ${(props) => (props.theme.isBase ? "#657077" : "#FFFFFF99")};
+      color: ${(props) =>
+        props.theme.isBase ? globalColors.lightGrayDark : "#FFFFFF99"};
    }

    .status-date {
-      color: ${(props) => (props.theme.isBase ? "#657077" : "#FFFFFF99")};
+      color: ${(props) =>
+        props.theme.isBase ? globalColors.lightGrayDark : "#FFFFFF99"};
    }

    .filled-status-text {
@ -158,7 +166,8 @@ const AccordionItem = styled.div<{
        props.theme.interfaceDirection === "rtl"
          ? `margin-right: 15px;`
          : `margin-left: 15px;`}
-      color: ${(props) => (props.isDone ? "#4781D1" : "#657077")};
+      color: ${(props) =>
+        props.isDone ? globalColors.lightBlueMain : globalColors.lightGrayDark};
    }
  }
 `;
--- a/packages/shared/components/password-input/PasswordInput.tsx
+++ b/packages/shared/components/password-input/PasswordInput.tsx
@ -58,6 +58,7 @@ import {
  TPasswordSettings,
  TPasswordValidation,
 } from "./PasswordInput.types";
+import { globalColors } from "../../themes";

 const PasswordInput = React.forwardRef(
  (
@ -417,7 +418,7 @@ const PasswordInput = React.forwardRef(
          <Text
            className="text-tooltip"
            fontSize="10px"
-            color="#A3A9AE"
+            color={globalColors.gray}
            as="span"
          >
            {settings?.minLength ? length : null}{" "}
--- a/packages/shared/components/report-dialog/index.tsx
+++ b/packages/shared/components/report-dialog/index.tsx
@ -46,6 +46,7 @@ import { ModalDialogType, ModalDialog } from "../modal-dialog";

 import { ModalDialogContainer } from "./ReportDialog.styled";
 import type { ReportDialogProps } from "./ReportDialog.types";
+import { globalColors } from "../../themes";

 const ReportDialog = (props: ReportDialogProps) => {
  const { t, ready } = useTranslation(["Common"]);
@ -123,7 +124,7 @@ const ReportDialog = (props: ReportDialogProps) => {
          <img src={FileReactSvgUrl} className="file-icon" alt="" />
          <Text as="div" fontWeight={600} noSelect className="report-filename">
            {fileTitle}
-            <Text fontWeight={600} noSelect color="#A3A9AE">
+            <Text fontWeight={600} noSelect color={globalColors.gray}>
              .json
            </Text>
          </Text>
--- a/packages/shared/components/share/Share.styled.ts
+++ b/packages/shared/components/share/Share.styled.ts
@ -25,6 +25,7 @@
 // International. See the License terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode

 import styled from "styled-components";
+import { globalColors } from "../../themes";

 const StyledLinks = styled.div`
  margin-top: 20px;
@ -32,7 +33,7 @@ const StyledLinks = styled.div`
  .title-link {
    margin-bottom: 12px;
    line-height: 16px;
-    color: #a3a9ae;
+    color: ${globalColors.gray};
  }

  .additional-link {
--- a/packages/shared/dialogs/conflict-resolve/ConflictResolve.styled.ts
+++ b/packages/shared/dialogs/conflict-resolve/ConflictResolve.styled.ts
@ -27,6 +27,7 @@
 import styled from "styled-components";

 import { ModalDialog } from "../../components/modal-dialog";
+import { globalColors } from "../../themes";

 const StyledModalDialog = styled(ModalDialog)`
  .radio {
@ -73,7 +74,7 @@ const StyledModalDialog = styled(ModalDialog)`
    .radio-option-description {
      font-size: 12px;
      line-height: 16px;
-      color: #a3a9ae;
+      color: ${globalColors.gray};
    }
  }
 `;
--- a/packages/shared/pages/PreparationPortal/PreparationPortal.styled.ts
+++ b/packages/shared/pages/PreparationPortal/PreparationPortal.styled.ts
@ -26,6 +26,7 @@

 import styled from "styled-components";
 import { tablet } from "@docspace/shared/utils";
+import { globalColors } from "../../themes";

 const StyledPreparationPortal = styled.div<{
  errorMessage?: boolean;
@ -40,7 +41,7 @@ const StyledPreparationPortal = styled.div<{
    font-size: 23px;
  }
  #text {
-    color: #a3a9ae;
+    color: ${globalColors.gray};
    font-size: 13px;
    line-height: 20px;
    max-width: 480px;
--- a/packages/shared/selectors/People/index.tsx
+++ b/packages/shared/selectors/People/index.tsx
@ -53,6 +53,7 @@ import { Text } from "../../components/text";

 import { PeopleSelectorProps } from "./PeopleSelector.types";
 import { PRODUCT_NAME } from "../../constants";
+import { globalColors } from "../../themes";

 const toListItem = (
  item: TUser,
@ -367,7 +368,7 @@ const PeopleSelector = ({
              fontSize="12px"
              noSelect
              truncate
-              color="#A3A9AE"
+              color={globalColors.gray}
              dir="auto"
            >
              {`${userType} | ${email}`}
--- a/packages/shared/skeletons/share/index.tsx
+++ b/packages/shared/skeletons/share/index.tsx
@ -30,6 +30,7 @@ import styled from "styled-components";
 import { Text } from "../../components/text";
 import { TTranslation } from "../../types";
 import { RectangleSkeleton, CircleSkeleton } from "../index";
+import { globalColors } from "../../themes";

 const StyledWrapper = styled.div`
  display: flex;
@ -43,7 +44,7 @@ const StyledWrapper = styled.div`
  .title-link {
    margin-bottom: 12px;
    line-height: 16px;
-    color: #a3a9ae;
+    color: ${globalColors.gray};
  }
 `;