From cf550d9505aaa04d3fd7334828e04328c493b945 Mon Sep 17 00:00:00 2001 From: Viktor Fomin Date: Fri, 28 Jun 2024 14:23:01 +0300 Subject: [PATCH] Shared: use colors from theme --- .../shared/components/article-item/ArticleItem.styled.ts | 4 ++-- packages/shared/components/article/Article.styled.ts | 6 +++--- packages/shared/components/avatar/Avatar.styled.ts | 4 ++-- packages/shared/components/button/Button.styled.tsx | 4 ++-- packages/shared/components/checkbox/Checkbox.styled.ts | 4 ++-- .../color-theme/sub-components/StyledFilterBlockItemTag.ts | 4 ++-- packages/shared/components/combobox/Combobox.styled.ts | 6 +++--- .../context-menu-button/ContextMenuButton.styled.ts | 4 ++-- .../shared/components/context-menu/ContextMenu.styled.ts | 6 +++--- .../shared/components/drop-down-item/DropDownItem.styled.ts | 4 ++-- packages/shared/components/filter/Filter.styled.ts | 4 ++-- packages/shared/components/icon-button/IconButton.styled.ts | 4 ++-- .../shared/components/input-block/InputBlock.styled.tsx | 2 +- packages/shared/components/link/Link.styled.tsx | 4 ++-- .../main-button-mobile/MainButtonMobile.styled.ts | 2 +- packages/shared/components/main-button/MainButton.styled.ts | 4 ++-- .../shared/components/media-viewer/MediaViewer.styled.ts | 4 ++-- .../sub-components/DesktopDetails/DesktopDetails.styled.ts | 3 ++- .../sub-components/ViewerPlayer/ViewerPlayer.styled.ts | 2 +- packages/shared/components/section/Section.styled.ts | 4 ++-- .../selector-add-button/SelectorAddButton.styled.ts | 4 ++-- packages/shared/components/table/Table.styled.ts | 4 ++-- packages/shared/components/toast/Toast.styled.ts | 4 ++-- .../shared/components/toggle-button/ToggleButton.styled.ts | 2 +- .../components/toggle-content/ToggleContent.styled.ts | 4 ++-- packages/shared/skeletons/profile/Profile.styled.ts | 5 +++-- 26 files changed, 52 insertions(+), 50 deletions(-) diff --git a/packages/shared/components/article-item/ArticleItem.styled.ts b/packages/shared/components/article-item/ArticleItem.styled.ts index 6f78ea76cc..05815370a9 100644 --- a/packages/shared/components/article-item/ArticleItem.styled.ts +++ b/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; diff --git a/packages/shared/components/article/Article.styled.ts b/packages/shared/components/article/Article.styled.ts index fa8cf7ff29..9d19d479dd 100644 --- a/packages/shared/components/article/Article.styled.ts +++ b/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")}; diff --git a/packages/shared/components/avatar/Avatar.styled.ts b/packages/shared/components/avatar/Avatar.styled.ts index 5b895e219b..d97603754c 100644 --- a/packages/shared/components/avatar/Avatar.styled.ts +++ b/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) { diff --git a/packages/shared/components/button/Button.styled.tsx b/packages/shared/components/button/Button.styled.tsx index f5d8351671..d5b3f727cc 100644 --- a/packages/shared/components/button/Button.styled.tsx +++ b/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 && diff --git a/packages/shared/components/checkbox/Checkbox.styled.ts b/packages/shared/components/checkbox/Checkbox.styled.ts index 5f5ed1be5a..5995177068 100644 --- a/packages/shared/components/checkbox/Checkbox.styled.ts +++ b/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; diff --git a/packages/shared/components/color-theme/sub-components/StyledFilterBlockItemTag.ts b/packages/shared/components/color-theme/sub-components/StyledFilterBlockItemTag.ts index 9959dee318..8fb10417fa 100644 --- a/packages/shared/components/color-theme/sub-components/StyledFilterBlockItemTag.ts +++ b/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 }; diff --git a/packages/shared/components/combobox/Combobox.styled.ts b/packages/shared/components/combobox/Combobox.styled.ts index 9cc6276d99..80208e3230 100644 --- a/packages/shared/components/combobox/Combobox.styled.ts +++ b/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 diff --git a/packages/shared/components/context-menu-button/ContextMenuButton.styled.ts b/packages/shared/components/context-menu-button/ContextMenuButton.styled.ts index 4599e616a8..32b609eb54 100644 --- a/packages/shared/components/context-menu-button/ContextMenuButton.styled.ts +++ b/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 && diff --git a/packages/shared/components/context-menu/ContextMenu.styled.ts b/packages/shared/components/context-menu/ContextMenu.styled.ts index 40bb44eb67..547c1bf7d9 100644 --- a/packages/shared/components/context-menu/ContextMenu.styled.ts +++ b/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}; diff --git a/packages/shared/components/drop-down-item/DropDownItem.styled.ts b/packages/shared/components/drop-down-item/DropDownItem.styled.ts index 3522eebb84..e267126cd0 100644 --- a/packages/shared/components/drop-down-item/DropDownItem.styled.ts +++ b/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 { diff --git a/packages/shared/components/filter/Filter.styled.ts b/packages/shared/components/filter/Filter.styled.ts index 7020148ee2..c90ef0f2bb 100644 --- a/packages/shared/components/filter/Filter.styled.ts +++ b/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 }; diff --git a/packages/shared/components/icon-button/IconButton.styled.ts b/packages/shared/components/icon-button/IconButton.styled.ts index cc8e96b586..388967340c 100644 --- a/packages/shared/components/icon-button/IconButton.styled.ts +++ b/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` @@ -34,7 +34,7 @@ const StyledOuter = styled.div` 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 && diff --git a/packages/shared/components/input-block/InputBlock.styled.tsx b/packages/shared/components/input-block/InputBlock.styled.tsx index 675172b60a..22737092b0 100644 --- a/packages/shared/components/input-block/InputBlock.styled.tsx +++ b/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 }; diff --git a/packages/shared/components/link/Link.styled.tsx b/packages/shared/components/link/Link.styled.tsx index b94bbfffd0..e5eca8ad50 100644 --- a/packages/shared/components/link/Link.styled.tsx +++ b/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}; diff --git a/packages/shared/components/main-button-mobile/MainButtonMobile.styled.ts b/packages/shared/components/main-button-mobile/MainButtonMobile.styled.ts index c109855a16..f68f7dfb03 100644 --- a/packages/shared/components/main-button-mobile/MainButtonMobile.styled.ts +++ b/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}; diff --git a/packages/shared/components/main-button/MainButton.styled.ts b/packages/shared/components/main-button/MainButton.styled.ts index 1060915ec4..4510b60f3e 100644 --- a/packages/shared/components/main-button/MainButton.styled.ts +++ b/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; diff --git a/packages/shared/components/media-viewer/MediaViewer.styled.ts b/packages/shared/components/media-viewer/MediaViewer.styled.ts index d1f29a4479..cbf661da74 100644 --- a/packages/shared/components/media-viewer/MediaViewer.styled.ts +++ b/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` width: 100%; background: linear-gradient( 0deg, - rgba(0, 0, 0, 0) 0%, + ${globalColors.tapHighlight} 0%, rgba(0, 0, 0, 0.8) 100% ); position: fixed; diff --git a/packages/shared/components/media-viewer/sub-components/DesktopDetails/DesktopDetails.styled.ts b/packages/shared/components/media-viewer/sub-components/DesktopDetails/DesktopDetails.styled.ts index e05edcc8d9..c78dc3541f 100644 --- a/packages/shared/components/media-viewer/sub-components/DesktopDetails/DesktopDetails.styled.ts +++ b/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% ); diff --git a/packages/shared/components/media-viewer/sub-components/ViewerPlayer/ViewerPlayer.styled.ts b/packages/shared/components/media-viewer/sub-components/ViewerPlayer/ViewerPlayer.styled.ts index 43bcd66e6b..287b513ccb 100644 --- a/packages/shared/components/media-viewer/sub-components/ViewerPlayer/ViewerPlayer.styled.ts +++ b/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% ); diff --git a/packages/shared/components/section/Section.styled.ts b/packages/shared/components/section/Section.styled.ts index d5f9e6033c..eba8e4a675 100644 --- a/packages/shared/components/section/Section.styled.ts +++ b/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}; } } diff --git a/packages/shared/components/selector-add-button/SelectorAddButton.styled.ts b/packages/shared/components/selector-add-button/SelectorAddButton.styled.ts index d7d445c549..cfe3b321b3 100644 --- a/packages/shared/components/selector-add-button/SelectorAddButton.styled.ts +++ b/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 && diff --git a/packages/shared/components/table/Table.styled.ts b/packages/shared/components/table/Table.styled.ts index 7c93932c1e..342b68ecb5 100644 --- a/packages/shared/components/table/Table.styled.ts +++ b/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; diff --git a/packages/shared/components/toast/Toast.styled.ts b/packages/shared/components/toast/Toast.styled.ts index d5fabe3ec1..a1911cedad 100644 --- a/packages/shared/components/toast/Toast.styled.ts +++ b/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; diff --git a/packages/shared/components/toggle-button/ToggleButton.styled.ts b/packages/shared/components/toggle-button/ToggleButton.styled.ts index 00310c1a48..533ef4c670 100644 --- a/packages/shared/components/toggle-button/ToggleButton.styled.ts +++ b/packages/shared/components/toggle-button/ToggleButton.styled.ts @@ -43,7 +43,7 @@ const ToggleButtonContainer = styled.label` -webkit-appearance: none; align-items: start; outline: none; - -webkit-tap-highlight-color: rgba(0, 0, 0, 0); + -webkit-tap-highlight-color: ${globalColors.tapHighlight}; ${NoUserSelect}; diff --git a/packages/shared/components/toggle-content/ToggleContent.styled.ts b/packages/shared/components/toggle-content/ToggleContent.styled.ts index 71d6574f89..898d64b426 100644 --- a/packages/shared/components/toggle-content/ToggleContent.styled.ts +++ b/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; diff --git a/packages/shared/skeletons/profile/Profile.styled.ts b/packages/shared/skeletons/profile/Profile.styled.ts index aa56af68da..bc521a07d8 100644 --- a/packages/shared/skeletons/profile/Profile.styled.ts +++ b/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);