Shared: use colors from theme

packages/shared/components/article-item/ArticleItem.styled.ts

@@ -27,7 +27,7 @@
 import styled, { css } from "styled-components";
 import { isMobile } from "react-device-detect";
 
-import { Base, TColorScheme } from "../../themes";
+import { Base, TColorScheme, globalColors } from "../../themes";
 import { tablet } from "../../utils";
 
 import { Text } from "../text";
@@ -372,7 +372,7 @@ const StyledArticleItemContainer = styled.div<{
       props.theme.catalogItem.container.tablet.marginBottom};
   }
 
-  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  -webkit-tap-highlight-color: ${globalColors.tapHighlight};
 
   .catalog-item__icon {
     display: none;

packages/shared/components/article/Article.styled.ts

@@ -36,7 +36,7 @@ import {
   desktop,
 } from "../../utils";
 
-import { Base, TColorScheme } from "../../themes";
+import { Base, TColorScheme, globalColors } from "../../themes";
 
 const StyledArticle = styled.article<{
   showText?: boolean;
@@ -159,7 +159,7 @@ const StyledArticleHeader = styled.div<{ showText?: boolean }>`
     padding: 12px 0;
   }
 
-  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  -webkit-tap-highlight-color: ${globalColors.tapHighlight};
 `;
 
 StyledArticleHeader.defaultProps = { theme: Base };
@@ -461,7 +461,7 @@ const StyledHideArticleMenuButton = styled.div<{
           left: 0;
         `}
   cursor: pointer;
-  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  -webkit-tap-highlight-color: ${globalColors.tapHighlight};
 
   min-width: ${({ showText }) => (showText ? "243px" : "60px")};
   max-width: ${({ showText }) => (showText ? "243px" : "60px")};

packages/shared/components/avatar/Avatar.styled.ts

@@ -26,7 +26,7 @@
 
 import styled from "styled-components";
 
-import { Base, TTheme } from "../../themes";
+import { Base, TTheme, globalColors } from "../../themes";
 import { commonIconsStyles, NoUserSelect } from "../../utils";
 
 import { CameraReactSvg } from "./svg";
@@ -216,7 +216,7 @@ const StyledAvatar = styled.div<{ size: AvatarSize; theme: TTheme }>`
   font-family: ${(props) => props.theme.fontFamily};
   font-style: normal;
 
-  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  -webkit-tap-highlight-color: ${globalColors.tapHighlight};
 
   .admin_icon {
     rect:nth-child(1) {

packages/shared/components/button/Button.styled.tsx

@@ -28,7 +28,7 @@ import React from "react";
 import styled, { css } from "styled-components";
 
 import { NoUserSelect } from "../../utils";
-import { Base, TTheme } from "../../themes";
+import { Base, TTheme, globalColors } from "../../themes";
 import { ButtonProps, ButtonThemeProps } from "./Button.types";
 import { ButtonSize } from "./Button.enums";
 
@@ -217,7 +217,7 @@ const StyledButton = styled(ButtonWrapper).attrs((props: ButtonProps) => ({
   overflow: ${(props) => props.theme.button.overflow};
   text-overflow: ${(props) => props.theme.button.textOverflow};
   white-space: ${(props) => props.theme.button.whiteSpace};
-  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  -webkit-tap-highlight-color: ${globalColors.tapHighlight};
 
   ${(props) =>
     !props.isDisabled &&

packages/shared/components/checkbox/Checkbox.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";
 
 const StyledLabel = styled.label<{
   isDisabled: boolean;
@@ -41,7 +41,7 @@ const StyledLabel = styled.label<{
   -o-user-select: none;
   -moz-user-select: none;
   -webkit-user-select: none;
-  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  -webkit-tap-highlight-color: ${globalColors.tapHighlight};
 
   .checkbox {
     margin-right: 12px;

packages/shared/components/color-theme/sub-components/StyledFilterBlockItemTag.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";
 
 const selectedItemTag = css`
   background: ${(props) =>
@@ -55,7 +55,7 @@ const StyledFilterBlockItemTag = styled.div<{ isSelected?: boolean }>`
 
   ${(props) => props.isSelected && selectedItemTag}
 
-  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  -webkit-tap-highlight-color: ${globalColors.tapHighlight};
 `;
 
 StyledFilterBlockItemTag.defaultProps = { theme: Base };

packages/shared/components/combobox/Combobox.styled.ts

@@ -28,7 +28,7 @@ import styled, { css } from "styled-components";
 
 import TriangleDownIcon from "PUBLIC_DIR/images/triangle.down.react.svg";
 
-import { Base, TColorScheme, TTheme } from "../../themes";
+import { Base, TColorScheme, TTheme, globalColors } from "../../themes";
 import { mobile, NoUserSelect, commonIconsStyles } from "../../utils";
 
 import { Loader } from "../loader";
@@ -88,7 +88,7 @@ const StyledComboBox = styled.div<{
 
   position: relative;
   outline: 0;
-  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  -webkit-tap-highlight-color: ${globalColors.tapHighlight};
 
   padding: ${(props) => (props.withoutPadding ? "0" : "4px 0")};
 
@@ -181,7 +181,7 @@ const StyledComboButton = styled.div<{
 
   gap: ${(props) => props.type && "4px"};
   justify-content: center;
-  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  -webkit-tap-highlight-color: ${globalColors.tapHighlight};
 
   height: ${(props) =>
     props.noBorder

packages/shared/components/context-menu-button/ContextMenuButton.styled.ts

@@ -26,13 +26,13 @@
 
 import styled, { css } from "styled-components";
 
-import { Base } from "../../themes";
+import { Base, globalColors } from "../../themes";
 
 const StyledOuter = styled.div<{ displayIconBorder?: boolean }>`
   display: inline-block;
   position: relative;
   cursor: pointer;
-  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  -webkit-tap-highlight-color: ${globalColors.tapHighlight};
 
   ${(props) =>
     props.displayIconBorder &&

packages/shared/components/context-menu/ContextMenu.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, TTheme } from "../../themes";
+import { Base, TTheme, globalColors } from "../../themes";
 import { tablet, mobile, getCorrectFourValuesStyle } from "../../utils";
 
 const styledTabletView = css<{ articleWidth: number }>`
@@ -138,7 +138,7 @@ const StyledContextMenu = styled.div<{
     box-sizing: border-box;
     background: none;
     outline: 0 !important;
-    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+    -webkit-tap-highlight-color: ${globalColors.tapHighlight};
 
     .icon-wrapper {
       display: flex;
@@ -252,7 +252,7 @@ const StyledContextMenu = styled.div<{
     background: none;
     user-select: none;
     outline: 0 !important;
-    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+    -webkit-tap-highlight-color: ${globalColors.tapHighlight};
 
     font-weight: ${(props) => props.theme.dropDownItem.fontWeight};
     font-size: ${(props) => props.theme.dropDownItem.fontSize};

packages/shared/components/drop-down-item/DropDownItem.styled.ts

@@ -26,7 +26,7 @@
 
 import styled, { css } from "styled-components";
 
-import { Base } from "../../themes";
+import { Base, globalColors } from "../../themes";
 import { tablet } from "../../utils";
 
 const itemTruncate = css`
@@ -100,7 +100,7 @@ const StyledDropdownItem = styled.div<{
   text-decoration: none;
   user-select: none;
   outline: 0 !important;
-  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  -webkit-tap-highlight-color: ${globalColors.tapHighlight};
 
   .drop-down-item_icon {
     svg {

packages/shared/components/filter/Filter.styled.ts

@@ -29,7 +29,7 @@ import styled, { css } from "styled-components";
 import CrossIcon from "PUBLIC_DIR/images/cross.react.svg";
 
 import { tablet, mobile } from "../../utils";
-import { Base } from "../../themes";
+import { Base, globalColors } from "../../themes";
 import { TViewAs } from "../../types";
 
 import { SearchInput } from "../search-input";
@@ -147,7 +147,7 @@ const StyledButton = styled.div<{ isOpen: boolean }>`
       }
     `}
 
-  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  -webkit-tap-highlight-color: ${globalColors.tapHighlight};
 `;
 
 StyledButton.defaultProps = { theme: Base };

packages/shared/components/icon-button/IconButton.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 { IconButtonProps } from "./IconButton.types";
 
 const StyledOuter = styled.div<IconButtonProps>`
@@ -34,7 +34,7 @@ const StyledOuter = styled.div<IconButtonProps>`
   cursor: ${(props) =>
     props.isDisabled || !props.isClickable ? "default" : "pointer"};
   line-height: 0;
-  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  -webkit-tap-highlight-color: ${globalColors.tapHighlight};
 
   ${(props) =>
     props.isStroke &&

packages/shared/components/input-block/InputBlock.styled.tsx

@@ -48,7 +48,7 @@ const StyledIconBlock = styled.div<{
       padding-left: ${props.theme.inputBlock.paddingRight};
       padding-right: ${props.theme.inputBlock.paddingLeft};
     `}
-  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  -webkit-tap-highlight-color: ${globalColors.tapHighlight};
 `;
 StyledIconBlock.defaultProps = { theme: Base };
 

packages/shared/components/link/Link.styled.tsx

@@ -28,7 +28,7 @@ import React from "react";
 import styled, { css } from "styled-components";
 
 import { Text } from "../text";
-import { Base } from "../../themes";
+import { Base, globalColors } from "../../themes";
 import { NoUserSelect } from "../../utils";
 import { LinkProps } from "./Link.types";
 
@@ -62,7 +62,7 @@ const StyledText = styled(PureText)`
       : NoUserSelect}
 
   cursor: ${(props) => props.theme.link.cursor};
-  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  -webkit-tap-highlight-color: ${globalColors.tapHighlight};
   opacity: ${(props) => props.isSemitransparent && props.theme.link.opacity};
   line-height: ${(props) =>
     props.lineHeight ? props.lineHeight : props.theme.link.lineHeight};

packages/shared/components/main-button-mobile/MainButtonMobile.styled.ts

@@ -39,7 +39,7 @@ const StyledFloatingButton = styled(FloatingButton)`
   position: relative;
   z-index: 1010;
   background: ${(props) => props.theme.mainButtonMobile.buttonColor};
-  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  -webkit-tap-highlight-color: ${globalColors.tapHighlight};
 
   .circle__background {
     background: ${(props) => props.theme.mainButtonMobile.buttonColor};

packages/shared/components/main-button/MainButton.styled.ts

@@ -26,7 +26,7 @@
 
 import styled, { css } from "styled-components";
 import { NoUserSelect } from "../../utils";
-import { TColorScheme, TTheme, Base } from "../../themes";
+import { TColorScheme, TTheme, Base, globalColors } from "../../themes";
 
 const hoveredCss = css`
   background-color: ${(props) => props.theme.mainButton.hoverBackgroundColor};
@@ -65,7 +65,7 @@ const StyledMainButton = styled.div<{
 }>`
   ${NoUserSelect}
 
-  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  -webkit-tap-highlight-color: ${globalColors.tapHighlight};
   position: relative;
   display: flex;
   justify-content: space-between;

packages/shared/components/media-viewer/MediaViewer.styled.ts

@@ -99,7 +99,7 @@ export const StyledMobileDetails = styled.div`
   align-items: center;
   background: linear-gradient(
     0deg,
-    rgba(0, 0, 0, 0) 0%,
+    ${globalColors.tapHighlight} 0%,
     rgba(0, 0, 0, 0.8) 100%
   );
 
@@ -190,7 +190,7 @@ export const StyledViewerContainer = styled.div<StyledViewerContainerProps>`
     width: 100%;
     background: linear-gradient(
       0deg,
-      rgba(0, 0, 0, 0) 0%,
+      ${globalColors.tapHighlight} 0%,
       rgba(0, 0, 0, 0.8) 100%
     );
     position: fixed;

packages/shared/components/media-viewer/sub-components/DesktopDetails/DesktopDetails.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";
 
 export const DesktopDetailsContainer = styled.div`
   padding-top: 21px;
@@ -32,7 +33,7 @@ export const DesktopDetailsContainer = styled.div`
   width: 100%;
   background: linear-gradient(
     0deg,
-    rgba(0, 0, 0, 0) 0%,
+    ${globalColors.tapHighlight} 0%,
     rgba(0, 0, 0, 0.8) 100%
   );
 

packages/shared/components/media-viewer/sub-components/ViewerPlayer/ViewerPlayer.styled.ts

@@ -73,7 +73,7 @@ export const StyledPlayerControls = styled.div<{ $isShow: boolean }>`
   opacity: ${(props) => (props.$isShow ? "1" : "0")};
 
   background: linear-gradient(
-    rgba(0, 0, 0, 0) 0%,
+    ${globalColors.tapHighlight} 0%,
     rgba(0, 0, 0, 0.64) 48.44%,
     rgba(0, 0, 0, 0.89) 100%
   );

packages/shared/components/section/Section.styled.ts

@@ -37,7 +37,7 @@ import {
   desktop,
   NoUserSelect,
 } from "../../utils";
-import { Base } from "../../themes";
+import { Base, globalColors } from "../../themes";
 import { TViewAs } from "../../types";
 
 import { Scrollbar } from "../scrollbar";
@@ -665,7 +665,7 @@ const StyledSectionHeader = styled.div<{ isFormGallery?: boolean }>`
 
     .header-container {
       margin-bottom: 1px;
-      -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+      -webkit-tap-highlight-color: ${globalColors.tapHighlight};
     }
   }
 

packages/shared/components/selector-add-button/SelectorAddButton.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";
 
 const StyledButton = styled.div<{ isDisabled?: boolean; isAction?: boolean }>`
   display: inline-block;
@@ -78,7 +78,7 @@ const StyledButton = styled.div<{ isDisabled?: boolean; isAction?: boolean }>`
     }
   }
 
-  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  -webkit-tap-highlight-color: ${globalColors.tapHighlight};
 
   ${(props) =>
     props.isAction &&

packages/shared/components/table/Table.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,
   tablet,
@@ -524,7 +524,7 @@ const StyledTableSettings = styled.div`
   display: inline-block;
   position: relative;
   cursor: pointer;
-  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  -webkit-tap-highlight-color: ${globalColors.tapHighlight};
 
   .table-container_settings-checkbox {
     padding: 8px 16px;

packages/shared/components/toast/Toast.styled.ts

@@ -29,7 +29,7 @@
 import styled, { css } from "styled-components";
 import { ToastContainer } from "react-toastify";
 
-import { Base } from "../../themes";
+import { Base, globalColors } from "../../themes";
 import { tablet, mobile } from "../../utils";
 
 import { IconButton } from "../icon-button";
@@ -53,7 +53,7 @@ const StyledToastContainer = styled(ToastContainer)<{ $topOffset: number }>`
       right: auto;
     `}
   margin-top: ${(props) => props.theme.toast.marginTop};
-  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  -webkit-tap-highlight-color: ${globalColors.tapHighlight};
 
   .Toastify__progress-bar--animated {
     animation: Toastify__trackProgress linear 1 forwards;

packages/shared/components/toggle-button/ToggleButton.styled.ts

@@ -43,7 +43,7 @@ const ToggleButtonContainer = styled.label<StyledToggleButtonProps>`
   -webkit-appearance: none;
   align-items: start;
   outline: none;
-  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  -webkit-tap-highlight-color: ${globalColors.tapHighlight};
 
   ${NoUserSelect};
 

packages/shared/components/toggle-content/ToggleContent.styled.ts

@@ -26,13 +26,13 @@
 
 import styled, { css } from "styled-components";
 
-import { Base } from "../../themes";
+import { Base, globalColors } from "../../themes";
 
 const StyledContainer = styled.div<{
   enableToggle?: boolean;
   isOpen?: boolean;
 }>`
-  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  -webkit-tap-highlight-color: ${globalColors.tapHighlight};
 
   .toggle-container {
     display: inline-block;

packages/shared/skeletons/profile/Profile.styled.ts

@@ -27,6 +27,7 @@
 import styled from "styled-components";
 
 import { tablet, getCorrectFourValuesStyle } from "@docspace/shared/utils";
+import { globalColors } from "../../themes";
 
 export const StyledWrapper = styled.div`
   width: 660px;
@@ -46,9 +47,9 @@ export const MainBlock = styled.div`
   border-radius: 12px;
   background: linear-gradient(
       270deg,
-      rgba(0, 0, 0, 0) 23.13%,
+      ${globalColors.tapHighlight} 23.13%,
       rgba(0, 0, 0, 0.07) 50.52%,
-      rgba(0, 0, 0, 0) 78.12%
+      ${globalColors.tapHighlight} 78.12%
     ),
     rgba(0, 0, 0, 0.05);