diff --git a/datahub-web-react/src/app/homeV3/module/components/__tests__/ModuleMenu.test.tsx b/datahub-web-react/src/app/homeV3/module/components/__tests__/ModuleMenu.test.tsx index 1f26e65d3551..d5a9d435ddb2 100644 --- a/datahub-web-react/src/app/homeV3/module/components/__tests__/ModuleMenu.test.tsx +++ b/datahub-web-react/src/app/homeV3/module/components/__tests__/ModuleMenu.test.tsx @@ -5,6 +5,7 @@ import { describe, expect, it, vi } from 'vitest'; import ModuleMenu from '@app/homeV3/module/components/ModuleMenu'; import { ModulePositionInput } from '@app/homeV3/template/types'; +import CustomThemeProvider from '@src/CustomThemeProvider'; import { PageModuleFragment } from '@graphql/template.generated'; import { DataHubPageModuleType, EntityType, PageModuleScope } from '@types'; @@ -61,6 +62,8 @@ vi.mock('@components', () => ({ }, })); +const renderWithTheme = (ui: React.ReactElement) => render({ui}); + describe('ModuleMenu', () => { const mockModule: PageModuleFragment = { urn: 'urn:li:dataHubPageModule:test', @@ -83,7 +86,7 @@ describe('ModuleMenu', () => { }); it('should render menu with correct items', () => { - render(); + renderWithTheme(); // Click to open the dropdown const menuButton = screen.getByTestId('icon'); @@ -96,7 +99,7 @@ describe('ModuleMenu', () => { }); it('should call removeModule when remove is clicked', () => { - render(); + renderWithTheme(); // Click to open the dropdown const menuButton = screen.getByTestId('icon'); @@ -133,7 +136,7 @@ describe('ModuleMenu', () => { rowSide: 'right', }; - render(); + renderWithTheme(); // Click to open the dropdown const menuButton = screen.getByTestId('icon'); @@ -154,7 +157,7 @@ describe('ModuleMenu', () => { }); it('should render remove option with red color', () => { - render(); + renderWithTheme(); // Click to open the dropdown const menuButton = screen.getByTestId('icon'); @@ -173,7 +176,7 @@ describe('ModuleMenu', () => { moduleIndex: 2, }; - render(); + renderWithTheme(); // Click to open the dropdown const menuButton = screen.getByTestId('icon'); @@ -205,7 +208,7 @@ describe('ModuleMenu', () => { }, }; - render(); + renderWithTheme(); // Click to open the dropdown const menuButton = screen.getByTestId('icon'); @@ -231,7 +234,7 @@ describe('ModuleMenu', () => { // rowSide and moduleIndex are optional/undefined }; - render(); + renderWithTheme(); // Click to open the dropdown const menuButton = screen.getByTestId('icon'); @@ -263,7 +266,7 @@ describe('ModuleMenu', () => { }, }; - render(); + renderWithTheme(); // Click to open the dropdown const menuButton = screen.getByTestId('icon'); @@ -284,7 +287,7 @@ describe('ModuleMenu', () => { }); it('should handle edit option (placeholder functionality)', () => { - render(); + renderWithTheme(); // Click to open the dropdown const menuButton = screen.getByTestId('icon'); @@ -306,7 +309,7 @@ describe('ModuleMenu', () => { }); it('should handle multiple rapid clicks on remove', () => { - render(); + renderWithTheme(); // Click to open the dropdown const menuButton = screen.getByTestId('icon'); diff --git a/datahub-web-react/src/app/lineageV2/LineageEntityNode/SchemaFieldNodeContents.tsx b/datahub-web-react/src/app/lineageV2/LineageEntityNode/SchemaFieldNodeContents.tsx index 2e2ed45e4d2c..ea6b61dd073f 100644 --- a/datahub-web-react/src/app/lineageV2/LineageEntityNode/SchemaFieldNodeContents.tsx +++ b/datahub-web-react/src/app/lineageV2/LineageEntityNode/SchemaFieldNodeContents.tsx @@ -4,9 +4,8 @@ import { Skeleton, Spin } from 'antd'; import React from 'react'; import { Link } from 'react-router-dom'; import { Handle, Position } from 'reactflow'; -import styled from 'styled-components'; +import styled, { useTheme } from 'styled-components'; -import { ANTD_GRAY, LINEAGE_COLORS, REDESIGN_COLORS } from '@app/entityV2/shared/constants'; import ContainerPath from '@app/lineageV2/LineageEntityNode/ContainerPath'; import { ContractLineageButton } from '@app/lineageV2/LineageEntityNode/ContractLineageButton'; import { ExpandLineageButton } from '@app/lineageV2/LineageEntityNode/ExpandLineageButton'; @@ -15,7 +14,6 @@ import NodeSkeleton from '@app/lineageV2/LineageEntityNode/NodeSkeleton'; import { FetchStatus } from '@app/lineageV2/common'; import { downgradeV2FieldPath, useGetLineageUrl } from '@app/lineageV2/lineageUtils'; import { FetchedEntityV2 } from '@app/lineageV2/types'; -import { COLORS } from '@app/sharedV2/colors'; import getTypeIcon from '@app/sharedV2/icons/getTypeIcon'; import OverflowTitle from '@app/sharedV2/text/OverflowTitle'; import { useEntityRegistryV2 } from '@app/useEntityRegistry'; @@ -26,7 +24,6 @@ import LinkOut from '@images/link-out.svg?react'; export const SCHEMA_FIELD_NODE_HEIGHT = 80; export const SCHEMA_FIELD_NODE_WIDTH = 240; -const NODE_COLOR = COLORS.blue_7; const NodeWrapper = styled.div<{ selected: boolean; @@ -36,15 +33,15 @@ const NodeWrapper = styled.div<{ isSearchedEntity: boolean; }>` align-items: center; - background-color: white; + background-color: ${(props) => props.theme.colors.bgSurface}; border: 1px solid - ${({ color, selected, isGhost }) => { + ${({ color, selected, isGhost, theme }) => { if (selected) return color; - if (isGhost) return `${LINEAGE_COLORS.NODE_BORDER}50`; - return LINEAGE_COLORS.NODE_BORDER; + if (isGhost) return `${theme.colors.border}50`; + return theme.colors.border; }}; box-shadow: ${({ isSearchedEntity, theme }) => - isSearchedEntity ? `0 0 4px 4px ${theme.styles['primary-color']}95` : 'none'}; + isSearchedEntity ? `0 0 4px 4px ${theme.colors.borderBrand}95` : 'none'}; outline: ${({ color, selected }) => (selected ? `1px solid ${color}` : 'none')}; border-left: none; border-radius: 6px; @@ -102,7 +99,7 @@ const CustomHandle = styled(Handle)<{ position: Position }>` const IconsWrapper = styled.div` align-items: center; - color: ${ANTD_GRAY[10]}; + color: ${(props) => props.theme.colors.text}; display: flex; flex-direction: column; font-size: 24px; @@ -144,7 +141,7 @@ const ParentLine = styled.span` height: min-content; gap: 4px; - color: ${REDESIGN_COLORS.SUBTITLE}; + color: ${(props) => props.theme.colors.text}; font-weight: 600; `; @@ -193,7 +190,7 @@ const ColumnLinkWrapper = styled(Link)` color: inherit; :hover { - color: ${(props) => props.theme.styles['primary-color']}; + color: ${(props) => props.theme.colors.textHover}; } `; @@ -237,6 +234,8 @@ export default function SchemaFieldNodeContents({ ignoreSchemaFieldStatus, }: Props) { const entityRegistry = useEntityRegistryV2(); + const theme = useTheme(); + const NODE_COLOR = theme.colors.chartsInformationLow; const isExpandedDownstream = isExpanded?.[LineageDirection.Downstream]; const isExpandedUpstream = isExpanded?.[LineageDirection.Upstream]; @@ -248,7 +247,7 @@ export default function SchemaFieldNodeContents({ const parentLineageUrl = useGetLineageUrl(parent?.urn, parent?.type); const lineageUrl = useGetLineageUrl(urn, EntityType.SchemaField); - const highlightColor = isSearchedEntity ? REDESIGN_COLORS.YELLOW_500 : REDESIGN_COLORS.YELLOW_200; + const highlightColor = isSearchedEntity ? theme.colors.textWarning : theme.colors.bgSurfaceWarning; const contents = ( ` display: flex; - color: ${COLORS.blue_6}; + color: ${(props) => props.theme.colors.iconInformation}; font-size: 20px; line-height: 1; `; diff --git a/datahub-web-react/src/app/sharedV2/ErrorHandling/ErrorFallback.tsx b/datahub-web-react/src/app/sharedV2/ErrorHandling/ErrorFallback.tsx index 8e1aa5fbfb06..3c2035356241 100644 --- a/datahub-web-react/src/app/sharedV2/ErrorHandling/ErrorFallback.tsx +++ b/datahub-web-react/src/app/sharedV2/ErrorHandling/ErrorFallback.tsx @@ -1,7 +1,7 @@ import { Button, Text } from '@components'; import React from 'react'; import { useHistory } from 'react-router'; -import styled, { css } from 'styled-components'; +import styled, { css, useTheme } from 'styled-components'; type ErrorFallbackProps = { variant?: ErrorVariant; @@ -15,7 +15,7 @@ const getVariantStyles = (variant: ErrorVariant) => { if (variant === 'route') { return css` border-radius: ${(props) => props.theme.styles['border-radius-navbar-redesign']}; - box-shadow: ${(props) => props.theme.styles['box-shadow-navbar-redesign']}; + box-shadow: ${(props) => props.theme.colors.shadowSm}; margin: 5px; `; } @@ -23,7 +23,7 @@ const getVariantStyles = (variant: ErrorVariant) => { }; const Container = styled.div<{ variant?: ErrorVariant }>` - background-color: white; + background-color: ${(props) => props.theme.colors.bg}; display: flex; flex-direction: column; align-items: center; @@ -55,24 +55,25 @@ const TextContainer = styled.div` const ErrorFallback: React.FC = ({ variant, actionMessage = DEFAULT_MESSAGE }) => { const history = useHistory(); + const theme = useTheme(); return ( - + - + Whoops! - + Something didn't go as planned. - + {actionMessage} diff --git a/datahub-web-react/src/app/sharedV2/TimestampPopover.tsx b/datahub-web-react/src/app/sharedV2/TimestampPopover.tsx index e51c17a24467..4b47e089fbba 100644 --- a/datahub-web-react/src/app/sharedV2/TimestampPopover.tsx +++ b/datahub-web-react/src/app/sharedV2/TimestampPopover.tsx @@ -2,16 +2,15 @@ import { Popover } from '@components'; import React from 'react'; import styled from 'styled-components'; -import colors from '@src/alchemy-components/theme/foundations/colors'; import { toLocalDateTimeString, toRelativeTimeString } from '@src/app/shared/time/timeUtils'; const PopoverContent = styled.div` - color: ${colors.gray[500]}; + color: ${(props) => props.theme.colors.textSecondary}; font-size: 0.8rem; `; const Title = styled.div` - color: ${colors.gray[500]}; + color: ${(props) => props.theme.colors.textSecondary}; border-bottom: none; font-size: 0.8rem; font-weight: 600; diff --git a/datahub-web-react/src/app/sharedV2/buttons/BackButton.tsx b/datahub-web-react/src/app/sharedV2/buttons/BackButton.tsx index a8414a3433bb..11322c5a6f8a 100644 --- a/datahub-web-react/src/app/sharedV2/buttons/BackButton.tsx +++ b/datahub-web-react/src/app/sharedV2/buttons/BackButton.tsx @@ -7,10 +7,10 @@ import styled from 'styled-components'; const StyledButton = styled(Button)` height: 25px; width: 25px; - color: ${(p) => p.theme.styles['primary-color']}; + color: ${(p) => p.theme.colors.iconBrand}; padding: 0px; border-radius: 20px; - border: 1px solid ${(p) => p.theme.styles['primary-color']}; + border: 1px solid ${(p) => p.theme.colors.borderBrand}; display: flex; align-items: center; justify-content: center; @@ -19,8 +19,8 @@ const StyledButton = styled(Button)` margin-top: 2px; &:hover { - color: ${(p) => p.theme.styles['primary-color']}; - border-color: ${(p) => p.theme.styles['primary-color']}; + color: ${(p) => p.theme.colors.iconBrand}; + border-color: ${(p) => p.theme.colors.borderBrand}; } `; diff --git a/datahub-web-react/src/app/sharedV2/cards/EntityCountCard.tsx b/datahub-web-react/src/app/sharedV2/cards/EntityCountCard.tsx index 9167ee905d86..de5575aa98ef 100644 --- a/datahub-web-react/src/app/sharedV2/cards/EntityCountCard.tsx +++ b/datahub-web-react/src/app/sharedV2/cards/EntityCountCard.tsx @@ -4,20 +4,19 @@ import { Link } from 'react-router-dom'; import styled from 'styled-components/macro'; import { generateColor } from '@app/entityV2/shared/components/styled/StyledTag'; -import { ANTD_GRAY, ANTD_GRAY_V2, REDESIGN_COLORS } from '@app/entityV2/shared/constants'; import { formatNumber, formatNumberWithoutAbbreviation } from '@app/shared/formatNumber'; const Card = styled(Link)` align-items: center; - background-color: ${ANTD_GRAY[1]}; - border: 1.5px solid ${ANTD_GRAY_V2[5]}; + background-color: ${(props) => props.theme.colors.bg}; + border: 1.5px solid ${(props) => props.theme.colors.border}; border-radius: 10px; display: flex; justify-content: start; min-width: 180px; padding: 16px; :hover { - border: 1.5px solid ${REDESIGN_COLORS.BLUE}; + border: 1.5px solid ${(props) => props.theme.colors.borderInformation}; cursor: pointer; } `; @@ -28,7 +27,7 @@ const Text = styled.div` const Name = styled.div` font-size: 16px; - color: ${ANTD_GRAY[7]}; + color: ${(props) => props.theme.colors.textTertiary}; overflow: hidden; text-overflow: ellipsis; text-transform: capitalize; @@ -39,7 +38,7 @@ const Name = styled.div` const IconWrapper = styled.div<{ color?: string; backgroundColor?: string }>` align-items: center; border-radius: 12px; - background-color: ${({ backgroundColor }) => backgroundColor || ANTD_GRAY[3]}; + background-color: ${(props) => props.backgroundColor || props.theme.colors.bgSurface}; display: flex; height: 50px; justify-content: center; @@ -54,7 +53,7 @@ const IconWrapper = styled.div<{ color?: string; backgroundColor?: string }>` const Count = styled.div` font-size: 20px; - color: ${ANTD_GRAY[10]}; + color: ${(props) => props.theme.colors.text}; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; diff --git a/datahub-web-react/src/app/sharedV2/cards/components.tsx b/datahub-web-react/src/app/sharedV2/cards/components.tsx index 168c9d21e533..391e4a1c8be4 100644 --- a/datahub-web-react/src/app/sharedV2/cards/components.tsx +++ b/datahub-web-react/src/app/sharedV2/cards/components.tsx @@ -1,17 +1,15 @@ import styled from 'styled-components'; -import { ANTD_GRAY, ANTD_GRAY_V2, REDESIGN_COLORS } from '@app/entity/shared/constants'; - export const Card = styled.div` - background-color: ${ANTD_GRAY[1]}; - border: 2px solid ${ANTD_GRAY_V2[5]}; + background-color: ${(props) => props.theme.colors.bg}; + border: 2px solid ${(props) => props.theme.colors.border}; border-radius: 8px; cursor: pointer; display: flex; align-items: center; :hover { - border: 2px solid ${REDESIGN_COLORS.BLUE}; + border: 2px solid ${(props) => props.theme.colors.borderInformation}; cursor: pointer; } `; diff --git a/datahub-web-react/src/app/sharedV2/carousel/Carousel.tsx b/datahub-web-react/src/app/sharedV2/carousel/Carousel.tsx index 977fa10a9eab..4a960811b6c3 100644 --- a/datahub-web-react/src/app/sharedV2/carousel/Carousel.tsx +++ b/datahub-web-react/src/app/sharedV2/carousel/Carousel.tsx @@ -3,7 +3,6 @@ import NavigateNextOutlinedIcon from '@mui/icons-material/NavigateNextOutlined'; import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'; import styled from 'styled-components'; -import { REDESIGN_COLORS } from '@app/entityV2/shared/constants'; import { HorizontalList } from '@app/entityV2/shared/summary/ListComponents'; const Wrapper = styled.div` @@ -39,12 +38,12 @@ const ButtonContainer = styled.div<{ left?: boolean; right?: boolean }>` z-index: 2; border-radius: 100px; - box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1); - background-color: ${REDESIGN_COLORS.WHITE}; + box-shadow: ${(props) => props.theme.colors.shadowXs}; + background-color: ${(props) => props.theme.colors.bg}; :hover { - color: ${REDESIGN_COLORS.WHITE}; - background-color: ${(props) => props.theme.styles['primary-color']}; + color: ${(props) => props.theme.colors.bg}; + background-color: ${(props) => props.theme.colors.buttonFillBrand}; } ${({ left }) => left && 'left: -10px;'} diff --git a/datahub-web-react/src/app/sharedV2/carousel/HorizontalScroller.tsx b/datahub-web-react/src/app/sharedV2/carousel/HorizontalScroller.tsx index 2cc021ea85b3..a6cdb9872a0c 100644 --- a/datahub-web-react/src/app/sharedV2/carousel/HorizontalScroller.tsx +++ b/datahub-web-react/src/app/sharedV2/carousel/HorizontalScroller.tsx @@ -3,8 +3,6 @@ import NavigateNextOutlinedIcon from '@mui/icons-material/NavigateNextOutlined'; import React, { useCallback, useEffect, useRef, useState } from 'react'; import styled from 'styled-components/macro'; -import { REDESIGN_COLORS } from '@app/entityV2/shared/constants'; - const ScrollButton = styled.button<{ alwaysVisible: boolean; size: number; @@ -28,16 +26,16 @@ const ScrollButton = styled.button<{ width: ${({ size }) => size + 6}px; height: ${({ size }) => size + 6}px; border-radius: 50%; - color: ${REDESIGN_COLORS.BLACK}; - background-color: ${REDESIGN_COLORS.WHITE}; + color: ${(props) => props.theme.colors.text}; + background-color: ${(props) => props.theme.colors.bg}; transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out; - box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.3); + box-shadow: ${(props) => props.theme.colors.shadowSm}; &:hover { - color: ${REDESIGN_COLORS.WHITE}; - background-color: ${(props) => props.theme.styles['primary-color']}; + color: ${(props) => props.theme.colors.bg}; + background-color: ${(props) => props.theme.colors.buttonFillBrand}; } `; diff --git a/datahub-web-react/src/app/sharedV2/colors.ts b/datahub-web-react/src/app/sharedV2/colors.ts deleted file mode 100644 index 30d10e5bf182..000000000000 --- a/datahub-web-react/src/app/sharedV2/colors.ts +++ /dev/null @@ -1,34 +0,0 @@ -export const COLORS = { - blue_1: '#EFF8FC', - blue_2: '#D7EFF8', - blue_3: '#B8E3F2', - blue_4: '#97D5EC', - blue_5: '#78C9E6', - blue_6: '#5ABDE1', - blue_7: '#4DA1BF', - blue_8: '#4086A0', - blue_9: '#336C80', - blue_10: '#285565', - - yellow_1: '#FEF9ED', - yellow_2: '#FCF1D3', - yellow_3: '#FAE6B1', - yellow_4: '#F8DA8C', - yellow_5: '#F6CF6A', - yellow_6: '#F4C449', - yellow_7: '#CFA73E', - yellow_8: '#AD8B34', - yellow_9: '#8B702A', - yellow_10: '#6E5821', - - green_1: '#F1F8EE', - green_2: '#DEEED5', - green_3: '#C5E0B4', - green_4: '#A9D291', - green_5: '#8FC470', - green_6: '#77B750', - green_7: '#659C44', - green_8: '#548239', - green_9: '#44682E', - green_10: '#365224', -}; diff --git a/datahub-web-react/src/app/sharedV2/forms/FieldLabel.tsx b/datahub-web-react/src/app/sharedV2/forms/FieldLabel.tsx index 216b6e140e00..2caf78cfc46f 100644 --- a/datahub-web-react/src/app/sharedV2/forms/FieldLabel.tsx +++ b/datahub-web-react/src/app/sharedV2/forms/FieldLabel.tsx @@ -1,8 +1,8 @@ import { QuestionCircleOutlined } from '@ant-design/icons'; -import { Text, colors, typography } from '@components'; +import { Text, typography } from '@components'; import { Tooltip } from 'antd'; import React from 'react'; -import styled from 'styled-components'; +import styled, { useTheme } from 'styled-components'; const LabelContainer = styled.span` display: inline-flex; @@ -11,14 +11,14 @@ const LabelContainer = styled.span` `; const RequiredMark = styled.span` - color: ${colors.red[1200]}; + color: ${(props) => props.theme.colors.textError}; font-family: ${typography.fonts.body}; `; const TooltipIcon = styled(QuestionCircleOutlined)` cursor: pointer; svg { - fill: ${colors.gray[1800]}; + fill: ${(props) => props.theme.colors.textTertiary}; } `; @@ -31,9 +31,10 @@ interface Props { } export function FieldLabel({ label, required, tooltip, labelHelper, className }: Props) { + const theme = useTheme(); return ( - + {label} {required && *} diff --git a/datahub-web-react/src/app/sharedV2/icons/InfoPopover.tsx b/datahub-web-react/src/app/sharedV2/icons/InfoPopover.tsx index 5c3ffdd219d5..4564b508db53 100644 --- a/datahub-web-react/src/app/sharedV2/icons/InfoPopover.tsx +++ b/datahub-web-react/src/app/sharedV2/icons/InfoPopover.tsx @@ -4,7 +4,7 @@ import React, { useState } from 'react'; import styled from 'styled-components'; const InfoWrapper = styled.div<{ $iconColor?: string }>` - color: ${({ theme, $iconColor }) => $iconColor || theme.styles['primary-color']}; + color: ${({ theme, $iconColor }) => $iconColor || theme.colors.iconBrand}; `; interface Props { diff --git a/datahub-web-react/src/app/sharedV2/icons/PlatformIcon.tsx b/datahub-web-react/src/app/sharedV2/icons/PlatformIcon.tsx index 97742780fe7b..1d7355715681 100644 --- a/datahub-web-react/src/app/sharedV2/icons/PlatformIcon.tsx +++ b/datahub-web-react/src/app/sharedV2/icons/PlatformIcon.tsx @@ -1,9 +1,8 @@ import ColorThief from 'colorthief'; import React, { useCallback, useRef, useState } from 'react'; -import styled, { CSSObject, css } from 'styled-components/macro'; +import styled, { CSSObject, css, useTheme } from 'styled-components/macro'; import { IconStyleType } from '@app/entityV2/Entity'; -import { REDESIGN_COLORS } from '@app/entityV2/shared/constants'; import { getLighterRGBColor } from '@app/sharedV2/icons/colorUtils'; import { useEntityRegistry } from '@app/useEntityRegistry'; @@ -57,16 +56,17 @@ const PlatformIcon: React.FC = ({ const [background, setBackground] = useState(undefined); const imgRef = useRef(null); const entityRegistry = useEntityRegistry(); + const theme = useTheme(); const logoUrl = platform?.properties?.logoUrl; const handleError = useCallback(() => { const img = imgRef.current; if (img) { img.removeAttribute('crossOrigin'); - setBackground(REDESIGN_COLORS.BACKGROUND_GREY); + setBackground(theme.colors.bgSurface); } onError?.(); - }, [onError, setBackground]); + }, [onError, setBackground, theme.colors.bgSurface]); return ( diff --git a/datahub-web-react/src/app/sharedV2/modals/ConfirmationModal.tsx b/datahub-web-react/src/app/sharedV2/modals/ConfirmationModal.tsx index 1d8c9b9b82eb..8d41ed13a138 100644 --- a/datahub-web-react/src/app/sharedV2/modals/ConfirmationModal.tsx +++ b/datahub-web-react/src/app/sharedV2/modals/ConfirmationModal.tsx @@ -8,7 +8,7 @@ const StyledModal = styled(Modal)` font-family: ${typography.fonts.body}; &&& .ant-modal-content { - box-shadow: 0px 4px 12px 0px rgba(9, 1, 61, 0.12); + box-shadow: ${(props) => props.theme.colors.shadowLg}; border-radius: 12px; } @@ -71,7 +71,7 @@ export const ConfirmationModal = ({ ]} title={modalTitle || 'Confirm'} > - + {modalText || 'Are you sure?'} diff --git a/datahub-web-react/src/app/sharedV2/search/DownloadButton.tsx b/datahub-web-react/src/app/sharedV2/search/DownloadButton.tsx index 3ff2e60e9396..ccc6792abb58 100644 --- a/datahub-web-react/src/app/sharedV2/search/DownloadButton.tsx +++ b/datahub-web-react/src/app/sharedV2/search/DownloadButton.tsx @@ -1,10 +1,10 @@ -import { Button, Tooltip, colors } from '@components'; +import { Button, Tooltip } from '@components'; import { DownloadSimple } from '@phosphor-icons/react/dist/csr/DownloadSimple'; import React from 'react'; import styled from 'styled-components'; const StyledButton = styled(Button)` - border: 1px solid ${colors.gray[100]}; + border: 1px solid ${({ theme }) => theme.colors.border}; `; type Props = { diff --git a/datahub-web-react/src/app/sharedV2/search/EditButton.tsx b/datahub-web-react/src/app/sharedV2/search/EditButton.tsx index 36c84fc5766a..8b4048bd720d 100644 --- a/datahub-web-react/src/app/sharedV2/search/EditButton.tsx +++ b/datahub-web-react/src/app/sharedV2/search/EditButton.tsx @@ -1,10 +1,10 @@ -import { Button, Tooltip, colors } from '@components'; +import { Button, Tooltip } from '@components'; import { PencilSimple } from '@phosphor-icons/react/dist/csr/PencilSimple'; import React from 'react'; import styled from 'styled-components'; const StyledButton = styled(Button)` - border: 1px solid ${colors.gray[100]}; + border: 1px solid ${({ theme }) => theme.colors.border}; `; type Props = { diff --git a/datahub-web-react/src/app/sharedV2/sidebar/components.tsx b/datahub-web-react/src/app/sharedV2/sidebar/components.tsx index 44ccfcbf2b44..a58539e13136 100644 --- a/datahub-web-react/src/app/sharedV2/sidebar/components.tsx +++ b/datahub-web-react/src/app/sharedV2/sidebar/components.tsx @@ -1,6 +1,6 @@ import ChevronRightIcon from '@mui/icons-material/ChevronRight'; import React from 'react'; -import styled from 'styled-components'; +import styled, { useTheme } from 'styled-components'; import { RotatingButton } from '@app/shared/components'; @@ -9,14 +9,14 @@ export const SidebarWrapper = styled.div<{ width: number; $isShowNavBarRedesign? width: ${(props) => props.width}px; min-width: ${(props) => props.width}px; display: ${(props) => (props.width ? 'block' : 'none')}; - background-color: #fff; + background-color: ${(props) => props.theme.colors.bg}; border-radius: ${(props) => props.$isShowNavBarRedesign ? props.theme.styles['border-radius-navbar-redesign'] : '8px'}; ${(props) => !props.$isShowNavBarRedesign && 'margin-bottom: 12px;'} ${(props) => props.$isShowNavBarRedesign && ` - box-shadow: ${props.theme.styles['box-shadow-navbar-redesign']}; + box-shadow: ${props.theme.colors.shadowSm}; `} `; @@ -29,13 +29,14 @@ export function RotatingTriangle({ onClick?: () => void; dataTestId?: string; }) { + const theme = useTheme(); return ( } + icon={} onClick={onClick} data-testid={dataTestId} /> diff --git a/datahub-web-react/src/app/sharedV2/tags/DomainLink.tsx b/datahub-web-react/src/app/sharedV2/tags/DomainLink.tsx index f607d37b9e2d..4c73d234fc82 100644 --- a/datahub-web-react/src/app/sharedV2/tags/DomainLink.tsx +++ b/datahub-web-react/src/app/sharedV2/tags/DomainLink.tsx @@ -3,7 +3,6 @@ import React from 'react'; import { Link } from 'react-router-dom'; import styled from 'styled-components'; -import { ANTD_GRAY } from '@app/entity/shared/constants'; import { DomainColoredIcon } from '@app/entityV2/shared/links/DomainColoredIcon'; import { HoverEntityTooltip } from '@app/recommendations/renderer/component/HoverEntityTooltip'; import { useEmbeddedProfileLinkProps } from '@app/shared/useEmbeddedProfileLinkProps'; @@ -25,7 +24,7 @@ const CloseButton = styled.div` cursor: pointer; } && { - color: ${ANTD_GRAY[7]}; + color: ${(props) => props.theme.colors.icon}; } `; diff --git a/datahub-web-react/src/app/sharedV2/tags/TagTermGroup.tsx b/datahub-web-react/src/app/sharedV2/tags/TagTermGroup.tsx index 23eeda105a28..6d9d1c0d1bf6 100644 --- a/datahub-web-react/src/app/sharedV2/tags/TagTermGroup.tsx +++ b/datahub-web-react/src/app/sharedV2/tags/TagTermGroup.tsx @@ -2,10 +2,9 @@ import { PlusOutlined } from '@ant-design/icons'; import { Typography } from 'antd'; import React, { useState } from 'react'; import Highlight from 'react-highlighter'; -import styled from 'styled-components'; +import styled, { useTheme } from 'styled-components'; import { EMPTY_MESSAGES } from '@app/entity/shared/constants'; -import { REDESIGN_COLORS } from '@app/entityV2/shared/constants'; import AddTagTerm from '@app/sharedV2/tags/AddTagTerm'; import { DomainLink } from '@app/sharedV2/tags/DomainLink'; import Tag from '@app/sharedV2/tags/tag/Tag'; @@ -51,11 +50,11 @@ const NoElementButton = styled.div` margin: 0px; padding: 0px; flex-basis: 100%; - color: ${REDESIGN_COLORS.DARK_GREY}; + color: ${(props) => props.theme.colors.text}; :hover { cursor: pointer; - color: ${REDESIGN_COLORS.LINK_HOVER_BLUE}; + color: ${(props) => props.theme.colors.hyperlinks}; } `; const TagTermWrapper = styled.div<{ $showOneAndCount?: boolean }>` @@ -68,7 +67,7 @@ const TagTermWrapper = styled.div<{ $showOneAndCount?: boolean }>` `; const TagText = styled.span` - color: ${REDESIGN_COLORS.DARK_GREY}; + color: ${(props) => props.theme.colors.text}; font-size: 10px; font-weight: 400; line-height: 8px; @@ -88,7 +87,7 @@ const EmptyText = styled(Typography.Text)` `; const Count = styled(Typography.Text)` - color: ${REDESIGN_COLORS.DARK_GREY}; + color: ${(props) => props.theme.colors.text}; font-size: 12px; font-weight: 400; line-height: 24px; @@ -97,18 +96,16 @@ const Count = styled(Typography.Text)` `; const AddText = styled.span` - color: ${REDESIGN_COLORS.DARK_GREY}; + color: ${(props) => props.theme.colors.text}; font-size: 12px; font-weight: 500; line-height: 16px; :hover { - color: ${REDESIGN_COLORS.LINK_HOVER_BLUE}; + color: ${(props) => props.theme.colors.hyperlinks}; } `; -const highlightMatchStyle = { background: '#ffe58f', padding: '0' }; - export default function TagTermGroup({ numberOfTags, directTags, @@ -136,9 +133,11 @@ export default function TagTermGroup({ showOneAndCount, showAddButton = true, }: Props) { + const theme = useTheme(); const entityRegistry = useEntityRegistry(); const [showAddModal, setShowAddModal] = useState(false); const [addModalType, setAddModalType] = useState(EntityType.Tag); + const highlightMatchStyle = { background: theme.colors.bgHighlight, padding: '0' }; const tagsEmpty = !directTags?.tags?.length && !editableTags?.tags?.length && !uneditableTags?.tags?.length; diff --git a/datahub-web-react/src/app/sharedV2/tags/term/TermContent.tsx b/datahub-web-react/src/app/sharedV2/tags/term/TermContent.tsx index 85ab66eb4020..3193897d0163 100644 --- a/datahub-web-react/src/app/sharedV2/tags/term/TermContent.tsx +++ b/datahub-web-react/src/app/sharedV2/tags/term/TermContent.tsx @@ -1,12 +1,10 @@ import { ThunderboltOutlined } from '@ant-design/icons'; -import { colors } from '@components'; import CloseIcon from '@mui/icons-material/Close'; import { Tag, message } from 'antd'; import React, { useState } from 'react'; import Highlight from 'react-highlighter'; -import styled from 'styled-components'; +import styled, { useTheme } from 'styled-components'; -import { REDESIGN_COLORS } from '@app/entityV2/shared/constants'; import { useGenerateGlossaryColorFromPalette } from '@app/glossaryV2/colorUtils'; import { useHasMatchedFieldByUrn } from '@app/search/context/SearchResultContext'; import { StopPropagation } from '@app/shared/StopPropagation'; @@ -21,15 +19,13 @@ import { DataHubPageModuleType, GlossaryTermAssociation, SubResourceType } from const PROPAGATOR_URN = 'urn:li:corpuser:__datahub_propagator'; -const highlightMatchStyle = { background: '#ffe58f', padding: '0' }; - const TermContainer = styled.div<{ $shouldHighlightBorderOnHover?: boolean }>` position: relative; max-width: 200px; .ant-tag.ant-tag { border-radius: 5px; - border: 1px solid ${colors.gray[100]}; + border: 1px solid ${(props) => props.theme.colors.border}; } ${(props) => @@ -37,7 +33,7 @@ const TermContainer = styled.div<{ $shouldHighlightBorderOnHover?: boolean }>` ` :hover { .ant-tag.ant-tag { - border: 1px solid ${props.theme.styles['primary-color']}; + border: 1px solid ${props.theme.colors.borderBrand}; } } `} @@ -48,12 +44,12 @@ const StyledTerm = styled(Tag)<{ fontSize?: number; highlightTerm?: boolean; sho ${(props) => props.highlightTerm && ` - background: ${props.theme.styles['highlight-color']}; - border: 1px solid ${props.theme.styles['highlight-border-color']}; + background: ${props.theme.colors.bgHighlight}; + border: 1px solid ${props.theme.colors.borderHover}; `} } ${(props) => props.fontSize && `font-size: ${props.fontSize}px;`} - color: ${REDESIGN_COLORS.TEXT_HEADING}; + color: ${(props) => props.theme.colors.text}; font-weight: 400; padding: 3px 8px; margin-right: 0; @@ -74,7 +70,7 @@ const StyledTerm = styled(Tag)<{ fontSize?: number; highlightTerm?: boolean; sho `; const PropagateThunderbolt = styled(ThunderboltOutlined)` - color: rgba(0, 143, 100, 0.95); + color: ${(props) => props.theme.colors.textSuccess}; margin-right: -4px; font-weight: bold; `; @@ -96,7 +92,7 @@ const CloseButtonContainer = styled.div` const CloseIconStyle = styled(CloseIcon)` font-size: 10px !important; - color: white; + color: ${(props) => props.theme.colors.textOnFillDefault}; `; const TermRibbon = styled.span<{ color: string; opacity?: number }>` @@ -143,8 +139,10 @@ export default function TermContent({ refetch, showOneAndCount, }: Props) { + const theme = useTheme(); const entityRegistry = useEntityRegistry(); const { reloadByKeyType } = useReloadableContext(); + const highlightMatchStyle = { background: theme.colors.bgHighlight, padding: '0' }; const [removeTermMutation] = useRemoveTermMutation(); const { parentNodes, urn, type } = term.term; const generateColor = useGenerateGlossaryColorFromPalette();