diff --git a/datahub-web-react/src/app/homeV2/action/announcement/Announcement.tsx b/datahub-web-react/src/app/homeV2/action/announcement/Announcement.tsx index e3c9b52adc03..c4199ce42848 100644 --- a/datahub-web-react/src/app/homeV2/action/announcement/Announcement.tsx +++ b/datahub-web-react/src/app/homeV2/action/announcement/Announcement.tsx @@ -2,7 +2,6 @@ import { Editor } from '@components'; import React from 'react'; import styled from 'styled-components/macro'; -import { ANTD_GRAY } from '@app/entityV2/shared/constants'; import { toRelativeTimeString } from '@app/shared/time/timeUtils'; import { Post } from '@types'; @@ -36,7 +35,7 @@ const Title = styled.div` const Time = styled.div` font-size: 12px; - color: ${ANTD_GRAY[7]}; + color: ${(props) => props.theme.colors.textTertiary}; `; type Props = { diff --git a/datahub-web-react/src/app/homeV2/action/announcement/Announcements.tsx b/datahub-web-react/src/app/homeV2/action/announcement/Announcements.tsx index 36e16a0a3148..a9160bbc9654 100644 --- a/datahub-web-react/src/app/homeV2/action/announcement/Announcements.tsx +++ b/datahub-web-react/src/app/homeV2/action/announcement/Announcements.tsx @@ -6,7 +6,6 @@ import styled from 'styled-components'; import analytics, { EventType, HomePageModule } from '@app/analytics'; import { useUserContext } from '@app/context/useUserContext'; -import { ANTD_GRAY } from '@app/entity/shared/constants'; import { Announcement } from '@app/homeV2/action/announcement/Announcement'; import { useGetUnseenAnnouncements } from '@app/homeV2/action/announcement/useGetUnseenAnnouncements'; import AnnouncementsSkeleton from '@app/homeV2/content/tabs/announcements/AnnouncementsSkeleton'; @@ -14,9 +13,9 @@ import { useUpdateLastViewedAnnouncementTime } from '@app/homeV2/shared/updateLa import OnboardingContext from '@app/onboarding/OnboardingContext'; const Card = styled.div` - border: 1px solid ${ANTD_GRAY[4]}; + border: 1px solid ${(props) => props.theme.colors.bgSurface}; border-radius: 11px; - background-color: #ffffff; + background-color: ${(props) => props.theme.colors.bg}; overflow: hidden; padding: 16px 20px 8px 20px; width: 380px; @@ -31,7 +30,7 @@ const Header = styled.div` const Title = styled.div` font-weight: 600; font-size: 14px; - color: #434863; + color: ${(props) => props.theme.colors.text}; display: flex; align-items: center; justify-content: start; @@ -39,12 +38,12 @@ const Title = styled.div` const Icon = styled(NotificationOutlined)` margin-right: 8px; - color: #3cb47a; + color: ${(props) => props.theme.colors.textSuccess}; font-size: 16px; `; const StyledCloseOutlined = styled(CloseOutlined)` - color: ${ANTD_GRAY[8]}; + color: ${(props) => props.theme.colors.textSecondary}; font-size: 12px; `; @@ -55,11 +54,11 @@ const StyledCarousel = styled(Carousel)` overflow: hidden; > .slick-dots li button { - background-color: #d9d9d9; + background-color: ${(props) => props.theme.colors.border}; } > .slick-dots li.slick-active button { - background-color: #5c3fd1; + background-color: ${(props) => props.theme.colors.buttonFillBrand}; } `; diff --git a/datahub-web-react/src/app/homeV2/content/HorizontalListSkeletons.tsx b/datahub-web-react/src/app/homeV2/content/HorizontalListSkeletons.tsx index c2e0aef93c6c..11025c794ddc 100644 --- a/datahub-web-react/src/app/homeV2/content/HorizontalListSkeletons.tsx +++ b/datahub-web-react/src/app/homeV2/content/HorizontalListSkeletons.tsx @@ -26,7 +26,7 @@ const SectionHeader = styled.div` .ant-skeleton-button { height: 100%; border-radius: 12px; - background-color: #f8f9fa; + background-color: ${(props) => props.theme.colors.bgSurface}; } `; diff --git a/datahub-web-react/src/app/homeV2/content/recent/EntityCard.tsx b/datahub-web-react/src/app/homeV2/content/recent/EntityCard.tsx index 02fb53e31056..ff6150463356 100644 --- a/datahub-web-react/src/app/homeV2/content/recent/EntityCard.tsx +++ b/datahub-web-react/src/app/homeV2/content/recent/EntityCard.tsx @@ -2,9 +2,7 @@ import React from 'react'; import { Link } from 'react-router-dom'; import styled from 'styled-components'; -import { ANTD_GRAY } from '@app/entity/shared/constants'; import { GenericEntityProperties } from '@app/entity/shared/types'; -import { SEARCH_COLORS } from '@app/entityV2/shared/constants'; import { getDisplayedEntityType } from '@app/entityV2/shared/containers/profile/header/utils'; import { HoverEntityTooltip } from '@app/recommendations/renderer/component/HoverEntityTooltip'; import PlatformIcon from '@app/sharedV2/icons/PlatformIcon'; @@ -16,21 +14,21 @@ const Container = styled.div` display: flex; flex-direction: row; padding: 10px 12px 10px 12px; - background-color: #ffffff; + background-color: ${(props) => props.theme.colors.bg}; border-radius: 10px; min-width: 200px; max-width: 260px; - border: 1.5px solid #0000001a; + border: 1.5px solid ${(props) => props.theme.colors.border}; gap: 12px; :hover { - border: 1.5px solid ${SEARCH_COLORS.LINK_BLUE}; + border: 1.5px solid ${(props) => props.theme.colors.hyperlinks}; } `; const Name = styled.div` font-size: 14px; - color: #565657; + color: ${(props) => props.theme.colors.textSecondary}; margin-bottom: 4px; font-weight: 500; overflow: hidden; @@ -46,7 +44,7 @@ const Context = styled.div` const SubHeader = styled.div` font-size: 14px; - color: ${ANTD_GRAY[5]}; + color: ${(props) => props.theme.colors.border}; margin-top: 4px; overflow: hidden; text-overflow: ellipsis; @@ -54,7 +52,7 @@ const SubHeader = styled.div` const Type = styled.div` font-size: 14px; - color: ${ANTD_GRAY[7]}; + color: ${(props) => props.theme.colors.textTertiary}; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; diff --git a/datahub-web-react/src/app/homeV2/content/recent/EntityCardList.tsx b/datahub-web-react/src/app/homeV2/content/recent/EntityCardList.tsx index 2c49f60986b9..4d72bdfa654f 100644 --- a/datahub-web-react/src/app/homeV2/content/recent/EntityCardList.tsx +++ b/datahub-web-react/src/app/homeV2/content/recent/EntityCardList.tsx @@ -18,7 +18,7 @@ const Container = styled.div` `; const Title = styled.div` - color: #403d5c; + color: ${(props) => props.theme.colors.text}; margin: 0px; font-size: 18px; font-weight: 600; diff --git a/datahub-web-react/src/app/homeV2/content/recent/RecentActions.tsx b/datahub-web-react/src/app/homeV2/content/recent/RecentActions.tsx index e14c15243f4b..ef40ccd9352b 100644 --- a/datahub-web-react/src/app/homeV2/content/recent/RecentActions.tsx +++ b/datahub-web-react/src/app/homeV2/content/recent/RecentActions.tsx @@ -12,7 +12,7 @@ const Container = styled.div<{ $isShowNavBarRedesign?: boolean }>` align-items: start; justify-content: start; padding: ${(props) => (props.$isShowNavBarRedesign ? '16px 20px' : '16px 24px 24px 24px')}; - background-color: #fff; + background-color: ${(props) => props.theme.colors.bg}; ${(props) => !props.$isShowNavBarRedesign && @@ -20,14 +20,14 @@ const Container = styled.div<{ $isShowNavBarRedesign?: boolean }>` margin-top: 24px; overflow: hidden; border-radius: 10px; - border: 1.5px solid #ecf2f9; + border: 1.5px solid ${props.theme.colors.border}; `} ${(props) => props.$isShowNavBarRedesign && ` border-radius: ${props.theme.styles['border-radius-navbar-redesign']}; - box-shadow: ${props.theme.styles['box-shadow-navbar-redesign']}; + box-shadow: ${props.theme.colors.shadowSm}; margin: 0 5px; `} `; diff --git a/datahub-web-react/src/app/homeV2/content/tabs/announcements/AnnouncementCard.tsx b/datahub-web-react/src/app/homeV2/content/tabs/announcements/AnnouncementCard.tsx index 1ba4603ab2d6..954f453e3d68 100644 --- a/datahub-web-react/src/app/homeV2/content/tabs/announcements/AnnouncementCard.tsx +++ b/datahub-web-react/src/app/homeV2/content/tabs/announcements/AnnouncementCard.tsx @@ -2,15 +2,14 @@ import { Editor } from '@components'; import React from 'react'; import styled from 'styled-components/macro'; -import { ANTD_GRAY } from '@app/entity/shared/constants'; import { toRelativeTimeString } from '@app/shared/time/timeUtils'; import { Post } from '@types'; const Card = styled.div` - border: 1px solid ${ANTD_GRAY[4]}; + border: 1px solid ${(props) => props.theme.colors.bgHover}; border-radius: 8px; - background-color: #ffffff; + background-color: ${(props) => props.theme.colors.bg}; overflow: auto; `; @@ -34,7 +33,7 @@ const Title = styled.div` const Time = styled.div` font-size: 12px; - color: ${ANTD_GRAY[7]}; + color: ${(props) => props.theme.colors.textTertiary}; `; type Props = { diff --git a/datahub-web-react/src/app/homeV2/content/tabs/discovery/sections/Section.tsx b/datahub-web-react/src/app/homeV2/content/tabs/discovery/sections/Section.tsx index 5d14d908682d..7e3e19fa207b 100644 --- a/datahub-web-react/src/app/homeV2/content/tabs/discovery/sections/Section.tsx +++ b/datahub-web-react/src/app/homeV2/content/tabs/discovery/sections/Section.tsx @@ -2,8 +2,6 @@ import { Tooltip } from '@components'; import React from 'react'; import styled from 'styled-components/macro'; -import { ANTD_GRAY } from '@app/entity/shared/constants'; - const Header = styled.div` display: flex; justify-content: space-between; @@ -11,7 +9,7 @@ const Header = styled.div` `; const Title = styled.div` - color: #403d5c; + color: ${(props) => props.theme.colors.text}; margin: 0px; font-size: 18px; font-weight: 600; @@ -29,7 +27,7 @@ const Content = styled.div` `; const Action = styled.div` - color: ${ANTD_GRAY[8]}; + color: ${(props) => props.theme.colors.textSecondary}; font-size: 12px; font-weight: 700; :hover { diff --git a/datahub-web-react/src/app/homeV2/content/tabs/discovery/sections/dataProducts/DataProductCard.tsx b/datahub-web-react/src/app/homeV2/content/tabs/discovery/sections/dataProducts/DataProductCard.tsx index 031d996dba62..948cc83d2c59 100644 --- a/datahub-web-react/src/app/homeV2/content/tabs/discovery/sections/dataProducts/DataProductCard.tsx +++ b/datahub-web-react/src/app/homeV2/content/tabs/discovery/sections/dataProducts/DataProductCard.tsx @@ -2,24 +2,23 @@ import React from 'react'; import { Link } from 'react-router-dom'; import styled from 'styled-components/macro'; -import { ANTD_GRAY } from '@app/entity/shared/constants'; -import { SEARCH_COLORS } from '@app/entityV2/shared/constants'; import { DomainColoredIcon } from '@app/entityV2/shared/links/DomainColoredIcon'; import { HoverEntityTooltip } from '@app/recommendations/renderer/component/HoverEntityTooltip'; import { useEntityRegistry } from '@app/useEntityRegistry'; -import { colors } from '@src/alchemy-components'; import { useShowNavBarRedesign } from '@src/app/useShowNavBarRedesign'; import { DataProduct, Domain, EntityType } from '@types'; const Card = styled(Link)<{ $isShowNavBarRedesign?: boolean }>` border-radius: ${(props) => (props.$isShowNavBarRedesign ? '8px' : '10px')}; - background-color: #ffffff; + background-color: ${(props) => props.theme.colors.bg}; padding: 10px 16px; - border: ${(props) => (props.$isShowNavBarRedesign ? `1px solid ${colors.gray[100]}` : '2px solid transparent')}; + border: ${(props) => + props.$isShowNavBarRedesign ? `1px solid ${props.theme.colors.border}` : '2px solid transparent'}; :hover { - border: ${(props) => (props.$isShowNavBarRedesign ? '1px' : '2px')} solid ${SEARCH_COLORS.LINK_BLUE}; + border: ${(props) => (props.$isShowNavBarRedesign ? '1px' : '2px')} solid + ${(props) => props.theme.colors.hyperlinks}; } display: flex; @@ -36,7 +35,7 @@ const Text = styled.div` const Name = styled.div` font-size: 16px; - color: ${ANTD_GRAY[9]}; + color: ${(props) => props.theme.colors.text}; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; @@ -53,7 +52,7 @@ const Section = styled.div` const SectionName = styled.div` font-size: 14px; margin-left: 10px; - color: ${ANTD_GRAY[7]}; + color: ${(props) => props.theme.colors.textTertiary}; overflow: hidden; text-overflow: ellipsis; `; diff --git a/datahub-web-react/src/app/homeV2/content/tabs/discovery/sections/domains/DomainCard.tsx b/datahub-web-react/src/app/homeV2/content/tabs/discovery/sections/domains/DomainCard.tsx index 547af5f1be4c..912e3f0cde53 100644 --- a/datahub-web-react/src/app/homeV2/content/tabs/discovery/sections/domains/DomainCard.tsx +++ b/datahub-web-react/src/app/homeV2/content/tabs/discovery/sections/domains/DomainCard.tsx @@ -3,25 +3,24 @@ import React from 'react'; import { Link } from 'react-router-dom'; import styled from 'styled-components/macro'; -import { ANTD_GRAY } from '@app/entity/shared/constants'; -import { SEARCH_COLORS } from '@app/entityV2/shared/constants'; import { DomainColoredIcon } from '@app/entityV2/shared/links/DomainColoredIcon'; import { HoverEntityTooltip } from '@app/recommendations/renderer/component/HoverEntityTooltip'; import { formatNumber } from '@app/shared/formatNumber'; import { useEntityRegistry } from '@app/useEntityRegistry'; -import { colors } from '@src/alchemy-components'; import { useShowNavBarRedesign } from '@src/app/useShowNavBarRedesign'; import { Domain, EntityType } from '@types'; const Card = styled(Link)<{ $isShowNavBarRedesign?: boolean }>` border-radius: ${(props) => (props.$isShowNavBarRedesign ? '8px' : '10px')}; - background-color: #ffffff; + background-color: ${(props) => props.theme.colors.bg}; padding: 16px; - border: ${(props) => (props.$isShowNavBarRedesign ? `1px solid ${colors.gray[100]}` : '2px solid transparent')}; + border: ${(props) => + props.$isShowNavBarRedesign ? `1px solid ${props.theme.colors.border}` : '2px solid transparent'}; :hover { - border: ${(props) => (props.$isShowNavBarRedesign ? '1px' : '2px')} solid ${SEARCH_COLORS.LINK_BLUE}; + border: ${(props) => (props.$isShowNavBarRedesign ? '1px' : '2px')} solid + ${(props) => props.theme.colors.hyperlinks}; } display: flex; @@ -39,7 +38,7 @@ const Text = styled.div` const Name = styled.div` font-size: 16px; - color: ${ANTD_GRAY[9]}; + color: ${(props) => props.theme.colors.text}; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; @@ -54,7 +53,7 @@ const Counts = styled.div` const Count = styled.div` font-size: 14px; - color: ${ANTD_GRAY[7]}; + color: ${(props) => props.theme.colors.textTertiary}; overflow: hidden; text-overflow: ellipsis; `; diff --git a/datahub-web-react/src/app/homeV2/content/tabs/discovery/sections/insight/cards/PopularGlossaryTerms.tsx b/datahub-web-react/src/app/homeV2/content/tabs/discovery/sections/insight/cards/PopularGlossaryTerms.tsx index 26d3dadd96ca..960064b2c231 100644 --- a/datahub-web-react/src/app/homeV2/content/tabs/discovery/sections/insight/cards/PopularGlossaryTerms.tsx +++ b/datahub-web-react/src/app/homeV2/content/tabs/discovery/sections/insight/cards/PopularGlossaryTerms.tsx @@ -5,7 +5,6 @@ import styled from 'styled-components'; import analytics, { EventType, HomePageModule } from '@app/analytics'; import { useUserContext } from '@app/context/useUserContext'; -import { ANTD_GRAY } from '@app/entity/shared/constants'; import { useRegisterInsight } from '@app/homeV2/content/tabs/discovery/sections/insight/InsightStatusProvider'; import { InsightCard } from '@app/homeV2/content/tabs/discovery/sections/insight/shared/InsightCard'; import InsightCardSkeleton from '@app/homeV2/content/tabs/discovery/sections/insight/shared/InsightCardSkeleton'; @@ -29,13 +28,13 @@ const Title = styled.div` display: flex; align-items: center; justify-content: start; - color: ${ANTD_GRAY[9]}; + color: ${(props) => props.theme.colors.text}; white-space: nowrap; margin-right: 20px; `; const ShowAll = styled(Link)` - color: ${ANTD_GRAY[8]}; + color: ${(props) => props.theme.colors.textSecondary}; font-size: 12px; font-weight: 700; diff --git a/datahub-web-react/src/app/homeV2/content/tabs/discovery/sections/insight/cards/SearchListInsightCard.tsx b/datahub-web-react/src/app/homeV2/content/tabs/discovery/sections/insight/cards/SearchListInsightCard.tsx index 0736b75cba45..4e1f2685ede5 100644 --- a/datahub-web-react/src/app/homeV2/content/tabs/discovery/sections/insight/cards/SearchListInsightCard.tsx +++ b/datahub-web-react/src/app/homeV2/content/tabs/discovery/sections/insight/cards/SearchListInsightCard.tsx @@ -4,7 +4,6 @@ import styled from 'styled-components'; import analytics, { EventType, HomePageModule } from '@app/analytics'; import { useUserContext } from '@app/context/useUserContext'; -import { ANTD_GRAY } from '@app/entity/shared/constants'; import { EmbeddedListSearchModal } from '@app/entityV2/shared/components/styled/search/EmbeddedListSearchModal'; import { FilterSet } from '@app/entityV2/shared/components/styled/search/types'; import { useRegisterInsight } from '@app/homeV2/content/tabs/discovery/sections/insight/InsightStatusProvider'; @@ -31,7 +30,7 @@ const Title = styled.div` display: flex; align-items: center; justify-content: start; - color: ${ANTD_GRAY[9]}; + color: ${(props) => props.theme.colors.text}; white-space: nowrap; margin-right: 20px; `; @@ -42,7 +41,7 @@ const Icon = styled.div` `; const ShowAll = styled.div` - color: ${ANTD_GRAY[8]}; + color: ${(props) => props.theme.colors.textSecondary}; font-size: 12px; font-weight: 700; diff --git a/datahub-web-react/src/app/homeV2/content/tabs/discovery/sections/insight/shared/InsightCard.tsx b/datahub-web-react/src/app/homeV2/content/tabs/discovery/sections/insight/shared/InsightCard.tsx index b3070ac5be1b..82ab5da8b680 100644 --- a/datahub-web-react/src/app/homeV2/content/tabs/discovery/sections/insight/shared/InsightCard.tsx +++ b/datahub-web-react/src/app/homeV2/content/tabs/discovery/sections/insight/shared/InsightCard.tsx @@ -1,8 +1,6 @@ import React from 'react'; import styled from 'styled-components/macro'; -import { REDESIGN_COLORS } from '@app/entity/shared/constants'; -import { colors } from '@src/alchemy-components'; import { useShowNavBarRedesign } from '@src/app/useShowNavBarRedesign'; const Card = styled.div<{ @@ -13,14 +11,15 @@ const Card = styled.div<{ $isShowNavBarRedesign?: boolean; }>` border-radius: 10px; - background-color: #ffffff; + background-color: ${(props) => props.theme.colors.bg}; padding: 16px; - border: ${(props) => (props.$isShowNavBarRedesign ? `1px solid ${colors.gray[100]}` : '2px solid transparent')}; + border: ${(props) => + props.$isShowNavBarRedesign ? `1px solid ${props.theme.colors.border}` : '2px solid transparent'}; ${(props) => props.$isShowNavBarRedesign && 'border-radius: 8px;'} max-width: ${(props) => props.maxWidth}px; min-width: ${(props) => props.minWidth}px; :hover { - ${(props) => props.clickable && `border: 2px solid ${REDESIGN_COLORS.BLUE};`} + ${(props) => props.clickable && `border: 2px solid ${props.theme.colors.borderInformation};`} ${(props) => props.clickable && 'cursor: pointer;'} } overflow: hidden; @@ -28,7 +27,7 @@ const Card = styled.div<{ const Title = styled.div` font-size: 16px; - color: #403d5c; + color: ${(props) => props.theme.colors.text}; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; diff --git a/datahub-web-react/src/app/homeV2/content/tabs/discovery/sections/insight/shared/InsightCardSkeleton.tsx b/datahub-web-react/src/app/homeV2/content/tabs/discovery/sections/insight/shared/InsightCardSkeleton.tsx index f3eced3e1ef6..c8e9c11ff9e2 100644 --- a/datahub-web-react/src/app/homeV2/content/tabs/discovery/sections/insight/shared/InsightCardSkeleton.tsx +++ b/datahub-web-react/src/app/homeV2/content/tabs/discovery/sections/insight/shared/InsightCardSkeleton.tsx @@ -14,7 +14,7 @@ const CardHeader = styled.div` .ant-skeleton-button { height: 16px; - background-color: #ebecf0; + background-color: ${(props) => props.theme.colors.bgSkeleton}; } `; @@ -25,7 +25,7 @@ const CardContent = styled.div` .ant-skeleton-button { height: 16px; - background-color: #ebecf0; + background-color: ${(props) => props.theme.colors.bgSkeleton}; } .ant-skeleton-avatar-square { @@ -47,7 +47,7 @@ const CardSkeleton = styled.div` flex-direction: column; gap: 16px; border-radius: 12px; - background-color: #f8f9fa; + background-color: ${(props) => props.theme.colors.bgSurface}; padding: 16px; width: 340px; height: 275px; diff --git a/datahub-web-react/src/app/homeV2/content/tabs/discovery/sections/onboarding/OnboardingCards.tsx b/datahub-web-react/src/app/homeV2/content/tabs/discovery/sections/onboarding/OnboardingCards.tsx index ea16fc081d19..b34cc5d06095 100644 --- a/datahub-web-react/src/app/homeV2/content/tabs/discovery/sections/onboarding/OnboardingCards.tsx +++ b/datahub-web-react/src/app/homeV2/content/tabs/discovery/sections/onboarding/OnboardingCards.tsx @@ -1,9 +1,10 @@ -import { Button, Card, colors } from '@components'; +import { Button, Card } from '@components'; import { Globe } from '@phosphor-icons/react/dist/csr/Globe'; import { Plugs } from '@phosphor-icons/react/dist/csr/Plugs'; import { UserPlus } from '@phosphor-icons/react/dist/csr/UserPlus'; import React, { useContext, useState } from 'react'; import { Link } from 'react-router-dom'; +import { useTheme } from 'styled-components'; import { useUserContext } from '@app/context/useUserContext'; import ViewInviteTokenModal from '@app/identity/user/ViewInviteTokenModal'; @@ -13,6 +14,7 @@ import { PageRoutes } from '@conf/Global'; import { useGetPlatforms } from '@src/app/homeV2/content/tabs/discovery/sections/platform/useGetPlatforms'; export const OnboardingCards = () => { + const theme = useTheme(); const { user, platformPrivileges } = useUserContext(); const { platforms, loading } = useGetPlatforms(user); const { isUserInitializing } = useContext(OnboardingContext); @@ -34,7 +36,7 @@ export const OnboardingCards = () => {
} + icon={} title="Add Data Sources" subTitle="Connect your data platforms" button={} @@ -42,7 +44,7 @@ export const OnboardingCards = () => { {canManageUsers ? ( } + icon={} title="Invite Users" subTitle="Invite users to DataHub" onClick={openInviteUsers} @@ -51,7 +53,7 @@ export const OnboardingCards = () => { ) : null} } + icon={} title="Add Domains" subTitle="Configure your data domains" button={} diff --git a/datahub-web-react/src/app/homeV2/content/tabs/discovery/sections/platform/PlatformCard.tsx b/datahub-web-react/src/app/homeV2/content/tabs/discovery/sections/platform/PlatformCard.tsx index 2ed861d66758..9258a937c750 100644 --- a/datahub-web-react/src/app/homeV2/content/tabs/discovery/sections/platform/PlatformCard.tsx +++ b/datahub-web-react/src/app/homeV2/content/tabs/discovery/sections/platform/PlatformCard.tsx @@ -3,27 +3,26 @@ import React from 'react'; import { useHistory } from 'react-router'; import styled from 'styled-components/macro'; -import { ANTD_GRAY } from '@app/entity/shared/constants'; -import { SEARCH_COLORS } from '@app/entityV2/shared/constants'; import { PLATFORM_FILTER_NAME } from '@app/searchV2/utils/constants'; import { navigateToSearchUrl } from '@app/searchV2/utils/navigateToSearchUrl'; import { formatNumber, formatNumberWithoutAbbreviation } from '@app/shared/formatNumber'; import PlatformIcon from '@app/sharedV2/icons/PlatformIcon'; import { useEntityRegistry } from '@app/useEntityRegistry'; -import { colors } from '@src/alchemy-components'; import { useShowNavBarRedesign } from '@src/app/useShowNavBarRedesign'; import { DataPlatform, EntityType } from '@types'; const Card = styled.div<{ $isShowNavBarRedesign?: boolean }>` border-radius: 10px; - background-color: #ffffff; + background-color: ${(props) => props.theme.colors.bg}; padding: 16px; min-width: 180px; - border: ${(props) => (props.$isShowNavBarRedesign ? `1px solid ${colors.gray[100]}` : '2px solid transparent')}; + border: ${(props) => + props.$isShowNavBarRedesign ? `1px solid ${props.theme.colors.border}` : '2px solid transparent'}; ${(props) => props.$isShowNavBarRedesign && 'border-radius: 8px;'} :hover { - border: ${(props) => (props.$isShowNavBarRedesign ? '1px' : '2px')} solid ${SEARCH_COLORS.LINK_BLUE}; + border: ${(props) => (props.$isShowNavBarRedesign ? '1px' : '2px')} solid + ${(props) => props.theme.colors.hyperlinks}; cursor: pointer; } display: flex; @@ -36,7 +35,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; max-width: 160px; @@ -45,7 +44,7 @@ const Name = styled.div` const Count = styled.div` font-size: 16px; - color: #56668e; + color: ${(props) => props.theme.colors.textSecondary}; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; diff --git a/datahub-web-react/src/app/homeV2/introduce/IntroduceYourself.tsx b/datahub-web-react/src/app/homeV2/introduce/IntroduceYourself.tsx index 6afbb3ff3f15..716d1f42a86d 100644 --- a/datahub-web-react/src/app/homeV2/introduce/IntroduceYourself.tsx +++ b/datahub-web-react/src/app/homeV2/introduce/IntroduceYourself.tsx @@ -8,7 +8,7 @@ import { IntroduceYourselfMainContent } from '@app/homeV2/introduce/IntroduceYou const Container = styled.div` display: flex; height: 100vh; - background-color: #fff; + background-color: ${(props) => props.theme.colors.bg}; `; export const IntroduceYourself = () => { diff --git a/datahub-web-react/src/app/homeV2/introduce/IntroduceYourselfLeftSidebar.tsx b/datahub-web-react/src/app/homeV2/introduce/IntroduceYourselfLeftSidebar.tsx index c7015708f98b..478409de594d 100644 --- a/datahub-web-react/src/app/homeV2/introduce/IntroduceYourselfLeftSidebar.tsx +++ b/datahub-web-react/src/app/homeV2/introduce/IntroduceYourselfLeftSidebar.tsx @@ -11,19 +11,19 @@ const Container = styled.div` justify-content: space-between; max-width: 470px; padding: 52px 65px 65px 52px; - background: #191d2e url(${datahubPlatforms}) no-repeat bottom left; + background: ${(props) => props.theme.colors.bgSurfaceDarker} url(${datahubPlatforms}) no-repeat bottom left; `; const Title = styled.div` max-width: 240px; margin-bottom: 30px; - color: #374066; + color: ${(props) => props.theme.colors.text}; font: 700 35px/44px Mulish; `; const Subtitle = styled.div` width: 371px; - color: #5f6685; + color: ${(props) => props.theme.colors.textSecondary}; font: 400 16px/24px Mulish; `; @@ -32,7 +32,7 @@ const AcrylTitle = styled.div` align-items: center; justify-content: start; font: 700 14px Mulish; - color: #fff; + color: ${(props) => props.theme.colors.textOnFillDefault}; letter-spacing: 1px; `; diff --git a/datahub-web-react/src/app/homeV2/introduce/IntroduceYourselfMainContent.tsx b/datahub-web-react/src/app/homeV2/introduce/IntroduceYourselfMainContent.tsx index 8a39c1ffe432..59dae83908b2 100644 --- a/datahub-web-react/src/app/homeV2/introduce/IntroduceYourselfMainContent.tsx +++ b/datahub-web-react/src/app/homeV2/introduce/IntroduceYourselfMainContent.tsx @@ -7,7 +7,7 @@ import { Button, Select, message } from 'antd'; import { orderBy } from 'lodash'; import React, { useContext, useState } from 'react'; import { useHistory } from 'react-router'; -import styled from 'styled-components'; +import styled, { useTheme } from 'styled-components'; import analytics, { EventType } from '@app/analytics'; import { useUserContext } from '@app/context/useUserContext'; @@ -17,7 +17,6 @@ import { PERSONA_TYPE_TO_VIEW_URN, PersonaType, ROLE_TO_PERSONA_TYPE } from '@ap import OnboardingContext from '@app/onboarding/OnboardingContext'; import Loading from '@app/shared/Loading'; import PlatformIcon from '@app/sharedV2/icons/PlatformIcon'; -import colors from '@src/alchemy-components/theme/foundations/colors'; import { useEntityRegistry } from '@src/app/useEntityRegistry'; import { useListGlobalViewsQuery } from '@src/graphql/view.generated'; @@ -34,7 +33,7 @@ const Container = styled.div` `; const Content = styled.div` - background-color: #ffffff; + background-color: ${(props) => props.theme.colors.bg}; padding: 20px; .ant-select-selection-item { @@ -45,7 +44,7 @@ const Content = styled.div` .ant-select-selection-overflow-item-rest { .ant-select-selection-item { - background-color: #fff !important; + background-color: ${(props) => props.theme.colors.bg} !important; border: none !important; padding: 0 0 0 5px !important; height: auto !important; @@ -56,7 +55,7 @@ const Content = styled.div` `; const Title = styled.div` - color: #374066; + color: ${(props) => props.theme.colors.text}; text-align: center; font: 700 35px Mulish; line-height: 44px; @@ -64,7 +63,7 @@ const Title = styled.div` `; const Subtitle = styled.div` - color: #5f6685; + color: ${(props) => props.theme.colors.textSecondary}; width: 268px; text-align: center; font: 400 13px Mulish; @@ -76,8 +75,8 @@ const DoneButton = styled(Button)` width: 290px; height: 45px; flex-shrink: 0; - background-color: #3f54d1; - color: #fff; + background-color: ${(props) => props.theme.colors.buttonFillBrand}; + color: ${(props) => props.theme.colors.textOnFillBrand}; margin-top: 12px; `; @@ -91,14 +90,14 @@ const PsuedoCheckBox = styled.div<{ checked?: boolean }>` width: 12px; height: 12px; border-radius: 4px; - border: 1px solid #cfd1da; - background: #fff; - color: #fff; + border: 1px solid ${(props) => props.theme.colors.border}; + background: ${(props) => props.theme.colors.bgSurface}; + color: ${(props) => props.theme.colors.textOnFillBrand}; ${(props) => props.checked && ` - background: ${props.theme.styles['primary-color']}; + background: ${props.theme.colors.buttonFillBrand}; border: none; `} @@ -122,7 +121,7 @@ const SelectWrapper = styled.div` position: absolute; left: 10px; z-index: 99; - fill: #a9adbd; + fill: ${(props) => props.theme.colors.textTertiary}; } .ant-select-arrow { @@ -163,23 +162,23 @@ const SelectGrid = styled.div` &:hover, &:focus, &:active { - background-color: #fff !important; + background-color: ${(props) => props.theme.colors.bg} !important; } } .ant-select-item-option-active:not(.ant-select-item-option-disabled) { - background-color: #fff !important; + background-color: ${(props) => props.theme.colors.bg} !important; } .ant-select-item-option-content { display: flex; justify-content: center; - background-color: #fff !important; + background-color: ${(props) => props.theme.colors.bg} !important; &:hover, &:focus, &:active { - background-color: #fff !important; + background-color: ${(props) => props.theme.colors.bg} !important; } } `; @@ -204,7 +203,7 @@ const Footer = styled.div` `; const SkipButton = styled.div` - color: ${colors.gray[400]}; + color: ${(props) => props.theme.colors.textTertiary}; font-weight: 700; :hover { cursor: pointer; @@ -260,6 +259,7 @@ const DEFAULT_PERSONA = PersonaType.TECHNICAL_USER; // TODO: Make section ordering dynamic based on populated data. export const IntroduceYourselfMainContent = () => { + const themeConfig = useTheme(); const userContext = useUserContext(); const { refetchUser, user } = userContext; const defaultDataPlatforms = useGetDataPlatforms(); @@ -435,8 +435,8 @@ export const IntroduceYourselfMainContent = () => { const selectStyles = { width: 290, borderRadius: '8px', - borderColor: '#5F6685', - color: '#81879f', + borderColor: themeConfig.colors.border, + color: themeConfig.colors.textTertiary, }; // Sort Roles Alphabetically diff --git a/datahub-web-react/src/app/homeV2/layout/CenterContent.tsx b/datahub-web-react/src/app/homeV2/layout/CenterContent.tsx index 98215e36a2fa..ed7d9d7720d6 100644 --- a/datahub-web-react/src/app/homeV2/layout/CenterContent.tsx +++ b/datahub-web-react/src/app/homeV2/layout/CenterContent.tsx @@ -22,9 +22,9 @@ const Container = styled.div<{ $isShowNavBarRedesign?: boolean }>` ` margin: 0 5px 0 5px; border-radius: ${props.theme.styles['border-radius-navbar-redesign']}; - box-shadow: ${props.theme.styles['box-shadow-navbar-redesign']}; + box-shadow: ${props.theme.colors.shadowSm}; height: calc(100vh - 87px); - background-color: white; + background-color: ${props.theme.colors.bg}; `} display: flex; diff --git a/datahub-web-react/src/app/homeV2/layout/CustomNavLink.tsx b/datahub-web-react/src/app/homeV2/layout/CustomNavLink.tsx index 6edc55a0dea0..8f080e2b2506 100644 --- a/datahub-web-react/src/app/homeV2/layout/CustomNavLink.tsx +++ b/datahub-web-react/src/app/homeV2/layout/CustomNavLink.tsx @@ -9,7 +9,7 @@ const OptionContainer = styled.div``; const LinkTitle = styled.span` display: block; - color: #fff; + color: ${(props) => props.theme.colors.textOnFillDefault}; font: 700 12px/20px Mulish; white-space: break-spaces; `; @@ -21,7 +21,7 @@ const TitleWrapper = styled.div` const DescriptionWrapper = styled.span` display: block; - color: #fff; + color: ${(props) => props.theme.colors.textOnFillDefault}; white-space: break-spaces; display: block; diff --git a/datahub-web-react/src/app/homeV2/layout/LeftSidebar.tsx b/datahub-web-react/src/app/homeV2/layout/LeftSidebar.tsx index 610c9d445ccf..2505f626c0aa 100644 --- a/datahub-web-react/src/app/homeV2/layout/LeftSidebar.tsx +++ b/datahub-web-react/src/app/homeV2/layout/LeftSidebar.tsx @@ -29,7 +29,7 @@ const Container = styled.div<{ $isShowNavBarRedesign?: boolean }>` ` margin: 5px; border-radius: ${props.theme.styles['border-radius-navbar-redesign']}; - box-shadow: ${props.theme.styles['box-shadow-navbar-redesign']}; + box-shadow: ${props.theme.colors.shadowSm}; `} /* Hide scrollbar for Chrome, Safari, and Opera */ @@ -39,11 +39,11 @@ const Container = styled.div<{ $isShowNavBarRedesign?: boolean }>` `; const Content = styled.div<{ $isShowNavBarRedesign?: boolean }>` - background-color: #ffffff; + background-color: ${(props) => props.theme.colors.bg}; border-radius: ${(props) => props.$isShowNavBarRedesign ? props.theme.styles['border-radius-navbar-redesign'] : '18px'}; min-height: 100%; - ${(props) => !props.$isShowNavBarRedesign && 'border: 1.5px solid #efefef;'} + ${(props) => !props.$isShowNavBarRedesign && `border: 1.5px solid ${props.theme.colors.border};`} `; const Body = styled.div<{ $isShowNavBarRedesign?: boolean }>` diff --git a/datahub-web-react/src/app/homeV2/layout/NavLinks.tsx b/datahub-web-react/src/app/homeV2/layout/NavLinks.tsx index 61c332b8c100..39dee1f452e6 100644 --- a/datahub-web-react/src/app/homeV2/layout/NavLinks.tsx +++ b/datahub-web-react/src/app/homeV2/layout/NavLinks.tsx @@ -5,8 +5,8 @@ import { NavLinksMenu } from '@app/homeV2/layout/NavLinksMenu'; const Container = styled.div` border-radius: 47px; - background-color: #7262d9; - box-shadow: 0px 8px 8px 4px rgba(0, 0, 0, 0.25); + background-color: ${(props) => props.theme.colors.buttonFillBrand}; + box-shadow: ${(props) => props.theme.colors.shadowLg}; `; export const NavLinks = () => { diff --git a/datahub-web-react/src/app/homeV2/layout/NavLinksMenu.tsx b/datahub-web-react/src/app/homeV2/layout/NavLinksMenu.tsx index cb59b2d5006c..1f3cddffaa65 100644 --- a/datahub-web-react/src/app/homeV2/layout/NavLinksMenu.tsx +++ b/datahub-web-react/src/app/homeV2/layout/NavLinksMenu.tsx @@ -40,20 +40,20 @@ const LinkWrapper = styled.span` height: 52px; width: 52px; line-height: 0; - box-shadow: 0px 0px 8px 4px rgba(0, 0, 0, 0); + box-shadow: none; transition: all 200ms ease; - color: #f9fafc; + color: ${(props) => props.theme.colors.textOnFillDefault}; &:hover { cursor: pointer; - background-color: #4b39bc; - box-shadow: 0px 0px 8px 4px rgba(0, 0, 0, 0.15); + background-color: ${(props) => props.theme.colors.bgSurfaceBrandHover}; + box-shadow: ${(props) => props.theme.colors.shadowMd}; } & svg { width: 24px; height: 24px; - fill: #f9fafc; + fill: ${(props) => props.theme.colors.textOnFillDefault}; } `; @@ -69,16 +69,17 @@ const SubMenu = styled.div` // Used to style the submenu const SubMenuContent = styled.div` border-radius: 12px; - background: rgba(92, 63, 209, 0.95); - box-shadow: 0px 8px 8px 4px rgba(0, 0, 0, 0.25); + background: ${(props) => props.theme.colors.bgSurfaceBrand}; + box-shadow: ${(props) => props.theme.colors.shadowLg}; padding: 8px; `; const SubMenuTitle = styled.div` border-radius: 12px; - background: #2f2477; + background: ${(props) => props.theme.colors.bgSurfaceBrandHover}; padding: 8px 12px; font: 700 12px/20px Mulish; + color: ${(props) => props.theme.colors.textOnFillDefault}; margin-bottom: 4px; `; @@ -87,7 +88,7 @@ const SubMenuLink = styled.div` padding: 4px 12px 12px 12px; &:hover { - background-color: #4b39bc; + background-color: ${(props) => props.theme.colors.bgSurfaceBrandHover}; } `; diff --git a/datahub-web-react/src/app/homeV2/layout/RightSidebar.tsx b/datahub-web-react/src/app/homeV2/layout/RightSidebar.tsx index 5edbca338ebe..45341b07e230 100644 --- a/datahub-web-react/src/app/homeV2/layout/RightSidebar.tsx +++ b/datahub-web-react/src/app/homeV2/layout/RightSidebar.tsx @@ -14,8 +14,8 @@ const Container = styled.div<{ $isHidden?: boolean; $isShowNavBarRedesign?: bool ` margin: 5px; border-radius: ${props.theme.styles['border-radius-navbar-redesign']}; - box-shadow: ${props.theme.styles['box-shadow-navbar-redesign']}; - background-color: white; + box-shadow: ${props.theme.colors.shadowSm}; + background-color: ${props.theme.colors.bg}; `} /* Hide scrollbar for Chrome, Safari, and Opera */ diff --git a/datahub-web-react/src/app/homeV2/layout/navBarRedesign/NavBarMenuItem.tsx b/datahub-web-react/src/app/homeV2/layout/navBarRedesign/NavBarMenuItem.tsx index 60abe666ecc8..2d8975d01b94 100644 --- a/datahub-web-react/src/app/homeV2/layout/navBarRedesign/NavBarMenuItem.tsx +++ b/datahub-web-react/src/app/homeV2/layout/navBarRedesign/NavBarMenuItem.tsx @@ -3,10 +3,8 @@ import React from 'react'; import { useHistory } from 'react-router-dom'; import styled from 'styled-components'; -import { getColor } from '@components/theme/utils'; - import { NavBarMenuBaseItem } from '@app/homeV2/layout/navBarRedesign/types'; -import { Badge, Text, colors } from '@src/alchemy-components'; +import { Badge, Text } from '@src/alchemy-components'; import analytics, { EventType } from '@src/app/analytics'; const StyledMenuItem = styled(Menu.Item)<{ isCollapsed?: boolean }>` @@ -31,14 +29,14 @@ const StyledMenuItem = styled(Menu.Item)<{ isCollapsed?: boolean }>` } && svg { - color: ${colors.gray[1800]}; + color: ${(props) => props.theme.colors.textTertiary}; width: 20px; height: 20px; } && .ant-menu-title-content { width: 100%; - color: ${colors.gray[1700]}; + color: ${(props) => props.theme.colors.textSecondary}; font-family: Mulish; font-size: 14px; font-style: normal; @@ -53,23 +51,13 @@ const StyledMenuItem = styled(Menu.Item)<{ isCollapsed?: boolean }>` &:hover, &.ant-menu-item-active { - background: linear-gradient( - 180deg, - rgba(243, 244, 246, 0.5) -3.99%, - rgba(235, 236, 240, 0.5) 53.04%, - rgba(235, 236, 240, 0.5) 100% - ); - box-shadow: 0px 0px 0px 1px rgba(139, 135, 157, 0.08); + background: ${(props) => props.theme.colors.bgHover}; + box-shadow: ${(props) => props.theme.colors.shadowFocus}; } &&.ant-menu-item-selected { - background: linear-gradient( - 180deg, - rgba(83, 63, 209, 0.04) -3.99%, - rgba(112, 94, 228, 0.04) 53.04%, - rgba(112, 94, 228, 0.04) 100% - ); - box-shadow: 0px 0px 0px 1px rgba(108, 71, 255, 0.08); + background: ${(props) => props.theme.colors.bgSelectedSubtle}; + box-shadow: ${(props) => props.theme.colors.shadowFocusBrand}; } `; @@ -80,8 +68,8 @@ const Icon = styled.div<{ $isSelected?: boolean; $size?: number }>` && svg { ${(props) => props.$isSelected - ? `fill: url(#menu-item-selected-gradient) ${props.theme.styles['primary-color']};` - : 'color: #8088a3;'} + ? `fill: url(#menu-item-selected-gradient) ${props.theme.colors.textBrand};` + : `color: ${props.theme.colors.icon};`} width: ${(props) => props.$size ?? 20}px; height: ${(props) => props.$size ?? 20}px; } @@ -91,11 +79,7 @@ const StyledText = styled(Text)<{ $isSelected?: boolean }>` ${(props) => props.$isSelected && ` - background: linear-gradient(${getColor('primary', 300, props.theme)} 1%, ${getColor( - 'primary', - 500, - props.theme, - )} 99%); + background: ${props.theme.colors.brandGradientSelected}; background-clip: text; -webkit-text-fill-color: transparent; `} @@ -111,9 +95,9 @@ const PillDot = styled.div<{ $isSelected?: boolean }>` position: absolute; width: 10px; height: 10px; - background: ${(props) => props.theme.styles['primary-color']}; + background: ${(props) => props.theme.colors.buttonFillBrand}; border-radius: 6px; - border: 2px solid ${(props) => (props.$isSelected ? '#f9fafc' : '#f2f3fa')}; + border: 2px solid ${(props) => props.theme.colors.bgSurfaceNewNav}; top: 6px; left: 22px; `; diff --git a/datahub-web-react/src/app/homeV2/layout/navBarRedesign/NavBarMenuItemDropdown.tsx b/datahub-web-react/src/app/homeV2/layout/navBarRedesign/NavBarMenuItemDropdown.tsx index b45b221320ca..3ff0c4b41c99 100644 --- a/datahub-web-react/src/app/homeV2/layout/navBarRedesign/NavBarMenuItemDropdown.tsx +++ b/datahub-web-react/src/app/homeV2/layout/navBarRedesign/NavBarMenuItemDropdown.tsx @@ -5,13 +5,13 @@ import styled from 'styled-components'; import NavBarMenuItem from '@app/homeV2/layout/navBarRedesign/NavBarMenuItem'; import { NavBarMenuDropdownItem } from '@app/homeV2/layout/navBarRedesign/types'; -import { Text, colors } from '@src/alchemy-components'; +import { Text } from '@src/alchemy-components'; import analytics, { EventType } from '@src/app/analytics'; const StyledDropdownContentWrapper = styled.div` - background-color: white; + background-color: ${(props) => props.theme.colors.bg}; border-radius: ${(props) => props.theme.styles['border-radius-navbar-redesign']}; - box-shadow: 0px 0px 14px 0px rgba(0, 0, 0, 0.15); + box-shadow: ${(props) => props.theme.colors.shadowMd}; padding: 8px; `; @@ -20,20 +20,22 @@ const StyledDropDownOption = styled.div<{ $disabled?: boolean }>` border-radius: ${(props) => props.theme.styles['border-radius-navbar-redesign']}; ${(props) => props.$disabled - ? `color: ${colors.gray[1800]};` + ? `color: ${props.theme.colors.textTertiary};` : ` + color: ${props.theme.colors.text}; cursor: pointer; &:hover { - background: linear-gradient( - 180deg, - rgba(243, 244, 246, 0.5) -3.99%, - rgba(235, 236, 240, 0.5) 53.04%, - rgba(235, 236, 240, 0.5) 100% - ); + background: ${props.theme.colors.bgHover}; } `} `; +const DescriptionText = styled.span` + display: block; + font-size: 12px; + color: ${(props) => props.theme.colors.textSecondary}; +`; + type Props = { item: NavBarMenuDropdownItem; isCollapsed?: boolean; @@ -95,9 +97,7 @@ export default function NavBarMenuItemDropdown({ item, isCollapsed, isSelected, // Default rendering for other items {dropdownItem.title} )} - - {dropdownItem.description} - + {dropdownItem.description} ); })} diff --git a/datahub-web-react/src/app/homeV2/layout/navBarRedesign/NavBarMenuItemGroup.tsx b/datahub-web-react/src/app/homeV2/layout/navBarRedesign/NavBarMenuItemGroup.tsx index aefb8531d807..1f8d7097ddec 100644 --- a/datahub-web-react/src/app/homeV2/layout/navBarRedesign/NavBarMenuItemGroup.tsx +++ b/datahub-web-react/src/app/homeV2/layout/navBarRedesign/NavBarMenuItemGroup.tsx @@ -5,7 +5,7 @@ const NavBarMenuItemGroup = styled(Menu.ItemGroup)` .ant-menu-item-group-title { margin-top: 8px; padding: 8px 0; - color: #8088a3; + color: ${(props) => props.theme.colors.textTertiary}; font-family: Mulish; font-size: 14px; font-style: normal; diff --git a/datahub-web-react/src/app/homeV2/layout/navBarRedesign/NavBarToggler.tsx b/datahub-web-react/src/app/homeV2/layout/navBarRedesign/NavBarToggler.tsx index 47edb56e05d9..f2535daed9f6 100644 --- a/datahub-web-react/src/app/homeV2/layout/navBarRedesign/NavBarToggler.tsx +++ b/datahub-web-react/src/app/homeV2/layout/navBarRedesign/NavBarToggler.tsx @@ -1,10 +1,8 @@ -/* eslint-disable rulesdir/no-hardcoded-colors */ import { Sidebar } from '@phosphor-icons/react/dist/csr/Sidebar'; import React from 'react'; import styled from 'styled-components'; import { useNavBarContext } from '@app/homeV2/layout/navBarRedesign/NavBarContext'; -import { colors } from '@src/alchemy-components'; import analytics, { EventType } from '@src/app/analytics'; const Toggler = styled.button<{ $isCollapsed?: boolean }>` @@ -16,16 +14,16 @@ const Toggler = styled.button<{ $isCollapsed?: boolean }>` display: flex; transition: left 250ms ease-in-out; transition: background 300ms ease-in; - background: ${colors.gray[1600]}; + background: ${(props) => props.theme.colors.bgSurfaceNewNav}; &: hover { - background: #ebecf080; + background: ${(props) => props.theme.colors.bgHover}80; } & svg { height: 20px; width: 20px; - color: ${colors.gray[1800]}; + color: ${(props) => props.theme.colors.textTertiary}; } `; diff --git a/datahub-web-react/src/app/homeV2/layout/navBarRedesign/NavSidebar.tsx b/datahub-web-react/src/app/homeV2/layout/navBarRedesign/NavSidebar.tsx index 3df08dfba864..6f734fe1b5d8 100644 --- a/datahub-web-react/src/app/homeV2/layout/navBarRedesign/NavSidebar.tsx +++ b/datahub-web-react/src/app/homeV2/layout/navBarRedesign/NavSidebar.tsx @@ -1,4 +1,3 @@ -/* eslint-disable rulesdir/no-hardcoded-colors */ import { AppWindow } from '@phosphor-icons/react/dist/csr/AppWindow'; import { BookBookmark } from '@phosphor-icons/react/dist/csr/BookBookmark'; import { FileText } from '@phosphor-icons/react/dist/csr/FileText'; @@ -38,8 +37,6 @@ import OnboardingContext from '@app/onboarding/OnboardingContext'; import { useOnboardingTour } from '@app/onboarding/OnboardingTourContext.hooks'; import { useIsHomePage } from '@app/shared/useIsHomePage'; import { useAppConfig, useBusinessAttributesFlag, useIsContextDocumentsEnabled } from '@app/useAppConfig'; -import { colors } from '@src/alchemy-components'; -import { getColor } from '@src/alchemy-components/theme/utils'; import useGetLogoutHandler from '@src/app/auth/useGetLogoutHandler'; import { HOME_PAGE_INGESTION_ID } from '@src/app/onboarding/config/HomePageOnboardingConfig'; import { useHandleOnboardingTour } from '@src/app/onboarding/useHandleOnboardingTour'; @@ -53,7 +50,7 @@ import AcrylIcon from '@images/datahublogo.svg?react'; const Container = styled.div` height: 100vh; - background-color: ${colors.gray[1600]}; + background-color: ${(props) => props.theme.colors.bgSurfaceNewNav}; display: flex; flex: column; align-items: center; @@ -70,7 +67,7 @@ const Content = styled.div<{ isCollapsed: boolean }>` const Header = styled.div` padding: 17px 8px 8px 16px; - border-bottom: 1px solid ${colors.gray[100]}; + border-bottom: 1px solid ${(props) => props.theme.colors.border}; `; const ScrollableContent = styled.div` @@ -106,7 +103,7 @@ const ScrollableContent = styled.div` const Footer = styled.div` padding: 8px 8px 17px 16px; - border-top: 1px solid ${colors.gray[100]}; + border-top: 1px solid ${(props) => props.theme.colors.border}; `; const CustomLogo = styled.img` @@ -440,8 +437,8 @@ export const NavSidebar = () => { focusable="false" > - - + + ); diff --git a/datahub-web-react/src/app/homeV2/layout/sidebar/documents/DocumentActionsMenu.tsx b/datahub-web-react/src/app/homeV2/layout/sidebar/documents/DocumentActionsMenu.tsx index 10e1cecd181c..9a30b2fe5342 100644 --- a/datahub-web-react/src/app/homeV2/layout/sidebar/documents/DocumentActionsMenu.tsx +++ b/datahub-web-react/src/app/homeV2/layout/sidebar/documents/DocumentActionsMenu.tsx @@ -14,11 +14,10 @@ import { ConfirmationModal } from '@app/sharedV2/modals/ConfirmationModal'; import { useEntityRegistry } from '@app/useEntityRegistry'; import { Button, Menu, Popover } from '@src/alchemy-components'; import { ItemType } from '@src/alchemy-components/components/Menu/types'; -import { colors } from '@src/alchemy-components/theme'; const MenuButton = styled(Button)` &:hover { - background-color: ${colors.gray[100]}; + colors: ${(props) => props.theme.colors.textSecondary}; } `; diff --git a/datahub-web-react/src/app/homeV2/layout/sidebar/documents/DocumentTreeEmptyState.tsx b/datahub-web-react/src/app/homeV2/layout/sidebar/documents/DocumentTreeEmptyState.tsx index c3a0581a95cf..b7ec9bc2c5c2 100644 --- a/datahub-web-react/src/app/homeV2/layout/sidebar/documents/DocumentTreeEmptyState.tsx +++ b/datahub-web-react/src/app/homeV2/layout/sidebar/documents/DocumentTreeEmptyState.tsx @@ -1,4 +1,3 @@ -import { colors } from '@components'; import React from 'react'; import styled from 'styled-components'; @@ -8,7 +7,7 @@ const EmptyStateContainer = styled.div` align-items: start; justify-content: start; text-align: center; - colors: ${colors.gray[1700]}; + colors: ${(props) => props.theme.colors.textSecondary}; `; export const DocumentTreeEmptyState: React.FC = () => { diff --git a/datahub-web-react/src/app/homeV2/layout/sidebar/documents/DocumentTreeItem.tsx b/datahub-web-react/src/app/homeV2/layout/sidebar/documents/DocumentTreeItem.tsx index 36f0eedcb44a..bb9ddce1ee4e 100644 --- a/datahub-web-react/src/app/homeV2/layout/sidebar/documents/DocumentTreeItem.tsx +++ b/datahub-web-react/src/app/homeV2/layout/sidebar/documents/DocumentTreeItem.tsx @@ -1,17 +1,14 @@ -/* eslint-disable rulesdir/no-hardcoded-colors */ import { CaretDown } from '@phosphor-icons/react/dist/csr/CaretDown'; import { CaretRight } from '@phosphor-icons/react/dist/csr/CaretRight'; import { FileText } from '@phosphor-icons/react/dist/csr/FileText'; import { Folder } from '@phosphor-icons/react/dist/csr/Folder'; import { Plus } from '@phosphor-icons/react/dist/csr/Plus'; import React, { useState } from 'react'; -import styled from 'styled-components'; +import styled, { useTheme } from 'styled-components'; import { DocumentActionsMenu } from '@app/homeV2/layout/sidebar/documents/DocumentActionsMenu'; import Loading from '@app/shared/Loading'; import { Button, Tooltip } from '@src/alchemy-components'; -import { colors } from '@src/alchemy-components/theme'; -import { getColor } from '@src/alchemy-components/theme/utils'; const TreeItemContainer = styled.div<{ $level: number; $isSelected: boolean }>` position: relative; @@ -31,26 +28,16 @@ const TreeItemContainer = styled.div<{ $level: number; $isSelected: boolean }>` ${(props) => props.$isSelected && ` - background: linear-gradient( - 180deg, - rgba(83, 63, 209, 0.04) -3.99%, - rgba(112, 94, 228, 0.04) 53.04%, - rgba(112, 94, 228, 0.04) 100% - ); - box-shadow: 0px 0px 0px 1px rgba(108, 71, 255, 0.08); +background: ${props.theme.colors.bgSelectedSubtle}; + box-shadow: ${props.theme.colors.shadowFocusBrand}; `} ${(props) => !props.$isSelected && ` &:hover { - background: linear-gradient( - 180deg, - rgba(243, 244, 246, 0.5) -3.99%, - rgba(235, 236, 240, 0.5) 53.04%, - rgba(235, 236, 240, 0.5) 100% - ); - box-shadow: 0px 0px 0px 1px rgba(139, 135, 157, 0.08); +background: ${props.theme.colors.bgHover}; + box-shadow: ${props.theme.colors.shadowFocus}; } `} `; @@ -101,8 +88,8 @@ const IconWrapper = styled.div<{ $isSelected: boolean }>` && svg { ${(props) => props.$isSelected - ? `fill: url(#menu-item-selected-gradient) ${props.theme.styles?.['primary-color'] || '#6C47FF'};` - : `color: ${colors.gray[1800]};`} + ? `fill: url(#menu-item-selected-gradient) ${props.theme.colors.iconBrand};` + : `color: ${props.theme.colors.textTertiary};`} } `; @@ -112,12 +99,12 @@ const Title = styled.span<{ $isSelected: boolean }>` white-space: nowrap; font-size: 14px; line-height: 20px; - color: ${colors.gray[1700]}; + color: ${(props) => props.theme.colors.textSecondary}; ${(props) => props.$isSelected && ` - background: linear-gradient(${getColor('primary', 300, props.theme)} 1%, ${getColor('primary', 500, props.theme)} 99%); +background: ${props.theme.colors.brandGradientSelected}; background-clip: text; -webkit-text-fill-color: transparent; font-weight: 600; @@ -134,7 +121,7 @@ const Actions = styled.div` const ActionButton = styled(Button)` &:hover { - background-color: ${colors.gray[100]}; + background-color: ${(props) => props.theme.colors.bgHover}; } `; @@ -171,6 +158,7 @@ export const DocumentTreeItem: React.FC = ({ hideCreate = false, parentUrn, }) => { + const theme = useTheme(); const [isHovered, setIsHovered] = useState(false); const [forceShowActions, setForceShowActions] = useState(false); @@ -205,8 +193,12 @@ export const DocumentTreeItem: React.FC = ({ aria-label={isExpanded ? 'Collapse' : 'Expand'} > {isLoading && } - {!isLoading && isExpanded && } - {!isLoading && !isExpanded && } + {!isLoading && isExpanded && ( + + )} + {!isLoading && !isExpanded && ( + + )} ); } diff --git a/datahub-web-react/src/app/homeV2/layout/sidebar/documents/MoveDocumentPopover.tsx b/datahub-web-react/src/app/homeV2/layout/sidebar/documents/MoveDocumentPopover.tsx index 1a3a7555e11e..8b9f0c916410 100644 --- a/datahub-web-react/src/app/homeV2/layout/sidebar/documents/MoveDocumentPopover.tsx +++ b/datahub-web-react/src/app/homeV2/layout/sidebar/documents/MoveDocumentPopover.tsx @@ -6,7 +6,6 @@ import { useSearchDocuments } from '@app/document/hooks/useSearchDocuments'; import { DocumentTree } from '@app/homeV2/layout/sidebar/documents/DocumentTree'; import { SearchResultItem } from '@app/homeV2/layout/sidebar/documents/SearchResultItem'; import { Button, Input } from '@src/alchemy-components'; -import { colors } from '@src/alchemy-components/theme'; import { DocumentSourceType, DocumentState } from '@types'; @@ -15,9 +14,9 @@ const PopoverContainer = styled.div` max-height: 300px; /* Fixed height to prevent popover jumping */ display: flex; flex-direction: column; - background: white; + background: ${(props) => props.theme.colors.bg}; border-radius: 8px; - box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.1); + box-shadow: ${(props) => props.theme.colors.shadowSm}; `; const SearchContainer = styled.div` @@ -31,8 +30,8 @@ const TreeScrollContainer = styled.div` padding: 8px 4px; - border-top: 1px solid ${colors.gray[100]}; - border-bottom: 1px solid ${colors.gray[100]}; + border-top: 1px solid ${(props) => props.theme.colors.border}; + border-bottom: 1px solid ${(props) => props.theme.colors.border}; /* Custom scrollbar styling */ &::-webkit-scrollbar { @@ -44,12 +43,12 @@ const TreeScrollContainer = styled.div` } &::-webkit-scrollbar-thumb { - background: ${colors.gray[200]}; + background: ${(props) => props.theme.colors.bgSurface}; border-radius: 3px; } &::-webkit-scrollbar-thumb:hover { - background: ${colors.gray[500]}; + background: ${(props) => props.theme.colors.bgSurface}; } `; @@ -64,17 +63,12 @@ const RootOption = styled.div<{ $isSelected: boolean }>` ${(props) => props.$isSelected ? ` - background: linear-gradient( - 180deg, - rgba(83, 63, 209, 0.04) -3.99%, - rgba(112, 94, 228, 0.04) 53.04%, - rgba(112, 94, 228, 0.04) 100% - ); - box-shadow: 0px 0px 0px 1px rgba(108, 71, 255, 0.08); + background: ${props.theme.colors.bgSelectedSubtle}; + box-shadow: ${props.theme.colors.shadowFocusBrand}; ` : ` &:hover { - background-color: ${colors.gray[100]}; + background-color: ${props.theme.colors.bgHover}; } `} `; @@ -82,7 +76,7 @@ const RootOption = styled.div<{ $isSelected: boolean }>` const EmptyState = styled.div` padding: 24px; text-align: center; - color: ${colors.gray[600]}; + color: ${(props) => props.theme.colors.text}; font-size: 14px; `; diff --git a/datahub-web-react/src/app/homeV2/layout/sidebar/documents/SearchResultItem.tsx b/datahub-web-react/src/app/homeV2/layout/sidebar/documents/SearchResultItem.tsx index 176d143fdb58..295a3e6c2651 100644 --- a/datahub-web-react/src/app/homeV2/layout/sidebar/documents/SearchResultItem.tsx +++ b/datahub-web-react/src/app/homeV2/layout/sidebar/documents/SearchResultItem.tsx @@ -1,4 +1,3 @@ -/* eslint-disable rulesdir/no-hardcoded-colors */ import { CaretDown } from '@phosphor-icons/react/dist/csr/CaretDown'; import { CaretRight } from '@phosphor-icons/react/dist/csr/CaretRight'; import { FileText } from '@phosphor-icons/react/dist/csr/FileText'; @@ -9,8 +8,6 @@ import styled from 'styled-components'; import Loading from '@app/shared/Loading'; import { Button, Tooltip } from '@src/alchemy-components'; -import { colors } from '@src/alchemy-components/theme'; -import { getColor } from '@src/alchemy-components/theme/utils'; import { Document } from '@types'; @@ -36,17 +33,12 @@ const SearchResultItemContainer = styled.div<{ $isSelected: boolean; $level: num ${(props) => props.$isSelected ? ` - background: linear-gradient( - 180deg, - rgba(83, 63, 209, 0.04) -3.99%, - rgba(112, 94, 228, 0.04) 53.04%, - rgba(112, 94, 228, 0.04) 100% - ); - box-shadow: 0px 0px 0px 1px rgba(108, 71, 255, 0.08); +background: ${props.theme.colors.bgSelectedSubtle}; + box-shadow: ${props.theme.colors.shadowFocusBrand}; ` : ` &:hover { - background-color: ${colors.gray[1500]}; +background-color: ${props.theme.colors.bg}; } `} @@ -74,7 +66,7 @@ const Actions = styled.div` const ActionButton = styled(Button)` &:hover { - background-color: ${colors.gray[100]}; + background-color: ${(props) => props.theme.colors.bgHover}; } `; @@ -91,12 +83,12 @@ const SearchResultTitle = styled.span<{ $isSelected: boolean }>` white-space: nowrap; font-size: 14px; line-height: 20px; - color: ${colors.gray[1700]}; + color: ${(props) => props.theme.colors.textSecondary}; ${(props) => props.$isSelected && ` - background: linear-gradient(${getColor('primary', 300, props.theme)} 1%, ${getColor('primary', 500, props.theme)} 99%); +background: ${props.theme.colors.brandGradientSelected}; background-clip: text; -webkit-text-fill-color: transparent; font-weight: 600; @@ -105,7 +97,7 @@ const SearchResultTitle = styled.span<{ $isSelected: boolean }>` const SearchResultBreadcrumb = styled.div` font-size: 12px; - color: ${colors.gray[500]}; + color: ${(props) => props.theme.colors.textSecondary}; line-height: 16px; margin-top: 2px; `; @@ -119,8 +111,8 @@ const IconWrapper = styled.div<{ $isSelected: boolean }>` && svg { ${(props) => props.$isSelected - ? `fill: url(#menu-item-selected-gradient) ${props.theme.styles?.['primary-color'] || '#6C47FF'};` - : 'color: #8088a3;'} + ? `fill: url(#menu-item-selected-gradient) ${props.theme.colors.iconBrand};` + : `color: ${props.theme.colors.textTertiary};`} } `; diff --git a/datahub-web-react/src/app/homeV2/layout/sidebar/documents/shared/DocumentPopoverBase.tsx b/datahub-web-react/src/app/homeV2/layout/sidebar/documents/shared/DocumentPopoverBase.tsx index 2cf3e91ba6e3..0aef6e763436 100644 --- a/datahub-web-react/src/app/homeV2/layout/sidebar/documents/shared/DocumentPopoverBase.tsx +++ b/datahub-web-react/src/app/homeV2/layout/sidebar/documents/shared/DocumentPopoverBase.tsx @@ -5,7 +5,6 @@ import { useSearchDocuments } from '@app/document/hooks/useSearchDocuments'; import { DocumentTree } from '@app/homeV2/layout/sidebar/documents/DocumentTree'; import { SearchResultItem } from '@app/homeV2/layout/sidebar/documents/SearchResultItem'; import { Input } from '@src/alchemy-components'; -import { colors } from '@src/alchemy-components/theme'; import { Document, DocumentSourceType, DocumentState } from '@types'; @@ -14,19 +13,19 @@ const PopoverContainer = styled.div` max-height: ${(props: { $maxHeight?: number }) => props.$maxHeight || 300}px; display: flex; flex-direction: column; - background: white; + background: ${(props) => props.theme.colors.bg}; border-radius: 8px; - box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.1); + box-shadow: ${(props) => props.theme.colors.shadowSm}; `; const HeaderContainer = styled.div` padding: 6px 6px; - border-bottom: 1px solid ${colors.gray[100]}; + border-bottom: 1px solid ${(props) => props.theme.colors.border}; `; const SearchContainer = styled.div` padding: 8px; - border-bottom: 1px solid ${colors.gray[100]}; + border-bottom: 1px solid ${(props) => props.theme.colors.border}; `; const TreeScrollContainer = styled.div` @@ -45,19 +44,19 @@ const TreeScrollContainer = styled.div` } &::-webkit-scrollbar-thumb { - background: ${colors.gray[200]}; + background: ${(props) => props.theme.colors.bgSurface}; border-radius: 3px; } &::-webkit-scrollbar-thumb:hover { - background: ${colors.gray[500]}; + background: ${(props) => props.theme.colors.bgSurface}; } `; const EmptyState = styled.div` padding: 24px; text-align: center; - color: ${colors.gray[600]}; + color: ${(props) => props.theme.colors.text}; font-size: 14px; `; diff --git a/datahub-web-react/src/app/homeV2/persona/PersonalizationLoadingModal.tsx b/datahub-web-react/src/app/homeV2/persona/PersonalizationLoadingModal.tsx index 3ae1176ef94a..0635766f2880 100644 --- a/datahub-web-react/src/app/homeV2/persona/PersonalizationLoadingModal.tsx +++ b/datahub-web-react/src/app/homeV2/persona/PersonalizationLoadingModal.tsx @@ -2,13 +2,12 @@ import { Modal, Progress } from 'antd'; import React, { useCallback, useContext, useEffect } from 'react'; import styled from 'styled-components'; -import { REDESIGN_COLORS } from '@app/entityV2/shared/constants'; import OnboardingContext from '@app/onboarding/OnboardingContext'; const ModalStyle = styled(Modal)` .ant-modal-content { border-radius: 8px; - border: 1px solid #c1c4d0; + border: 1px solid ${(props) => props.theme.colors.border}; border-bottom: unset; } @@ -25,7 +24,7 @@ const ProgressStyle = styled(Progress)` .ant-progress-bg { border-radius: 12px; - background-color: ${(props) => props.theme.styles['primary-color']}; + background-color: ${(props) => props.theme.colors.buttonFillBrand}; height: 4px !important; } `; @@ -34,13 +33,13 @@ const ModalContent = styled.span` font-weight: 700; display: flex; justify-content: center; - color: ${REDESIGN_COLORS.TEXT_HEADING}; + color: ${(props) => props.theme.colors.text}; padding: 25px 0 0; font-size: 16px; `; const modalMaskStyle = { - backgroundColor: 'rgba(0, 0, 0, 0.05)', + backgroundColor: 'var(--theme-overlayLight)', }; export default function PersonalizationLoadingModal() { diff --git a/datahub-web-react/src/app/homeV2/reference/header/UserHeader.tsx b/datahub-web-react/src/app/homeV2/reference/header/UserHeader.tsx index fe5331654f4c..3fe0dbd60b7f 100644 --- a/datahub-web-react/src/app/homeV2/reference/header/UserHeader.tsx +++ b/datahub-web-react/src/app/homeV2/reference/header/UserHeader.tsx @@ -19,9 +19,9 @@ const Container = styled.div` `; const GreetingTextWrapper = styled.div` - color: #ffffff; + color: ${(props) => props.theme.colors.textOnFillDefault}; position: absolute; - background: linear-gradient(180deg, rgba(0, 0, 0, 0) 7%, #000 88.79%); + background: linear-gradient(180deg, transparent 7%, ${(props) => props.theme.colors.bgSurfaceDarker} 88.79%); width: 100%; height: 100%; display: flex; diff --git a/datahub-web-react/src/app/homeV2/reference/sections/DefaultEmptyEntityList.tsx b/datahub-web-react/src/app/homeV2/reference/sections/DefaultEmptyEntityList.tsx index 794bf65fd6c0..45ddf3929594 100644 --- a/datahub-web-react/src/app/homeV2/reference/sections/DefaultEmptyEntityList.tsx +++ b/datahub-web-react/src/app/homeV2/reference/sections/DefaultEmptyEntityList.tsx @@ -1,11 +1,9 @@ import React from 'react'; import styled from 'styled-components'; -import { ANTD_GRAY } from '@app/entity/shared/constants'; - const Text = styled.div` font-size: 14px; - color: ${ANTD_GRAY[7]}; + color: ${(props) => props.theme.colors.textTertiary}; `; export const DefaultEmptyEntityList = () => { diff --git a/datahub-web-react/src/app/homeV2/reference/sections/EntityLink.tsx b/datahub-web-react/src/app/homeV2/reference/sections/EntityLink.tsx index 61f56f480fc8..36437be78a64 100644 --- a/datahub-web-react/src/app/homeV2/reference/sections/EntityLink.tsx +++ b/datahub-web-react/src/app/homeV2/reference/sections/EntityLink.tsx @@ -24,10 +24,11 @@ const Container = styled.div<{ showHover: boolean; entity: GenericEntityProperti border-radius: 8px; cursor: pointer; width: ${(props) => props.entity.type === EntityType.GlossaryTerm && 'fit-content'}; - border: ${(props) => (props.entity.type === EntityType.GlossaryTerm ? '1px solid #C1C4D0' : 'none')}; + border: ${(props) => + props.entity.type === EntityType.GlossaryTerm ? `1px solid ${props.theme.colors.border}` : 'none'}; :hover { - ${(props) => props.showHover && 'background-color: #f5f7fa;'} + ${(props) => props.showHover && `background-color: ${props.theme.colors.bgSurface};`} } > a { @@ -58,7 +59,7 @@ const LinkButton = styled(Link)<{ $includePadding: boolean }>` `; const DisplayNameText = styled.span<{ entity: GenericEntityProperties }>` - color: #52596c; + color: ${(props) => props.theme.colors.textSecondary}; font-family: Mulish; font-size: 12px; font-style: normal; diff --git a/datahub-web-react/src/app/homeV2/reference/sections/EntityLinkList.tsx b/datahub-web-react/src/app/homeV2/reference/sections/EntityLinkList.tsx index 9587c568bf94..e604e2bc1f7a 100644 --- a/datahub-web-react/src/app/homeV2/reference/sections/EntityLinkList.tsx +++ b/datahub-web-react/src/app/homeV2/reference/sections/EntityLinkList.tsx @@ -2,7 +2,6 @@ import { Tooltip } from '@components'; import React, { useContext } from 'react'; import styled from 'styled-components'; -import { ANTD_GRAY } from '@app/entity/shared/constants'; import { GenericEntityProperties } from '@app/entity/shared/types'; import { DefaultEmptyEntityList } from '@app/homeV2/reference/sections/DefaultEmptyEntityList'; import { EntityLink } from '@app/homeV2/reference/sections/EntityLink'; @@ -14,7 +13,7 @@ import { Entity, EntityType } from '@types'; const Title = styled.div<{ hasAction: boolean }>` ${(props) => props.hasAction && `:hover { cursor: pointer; }`} - color: #403d5c; + color: ${(props) => props.theme.colors.text}; font-weight: 600; font-size: 16px; margin-bottom: 8px; @@ -29,10 +28,10 @@ const List = styled.div` const ShowMoreButton = styled.div` margin-top: 12px; padding: 0px; - color: ${ANTD_GRAY[7]}; + color: ${(props) => props.theme.colors.textTertiary}; :hover { cursor: pointer; - color: ${ANTD_GRAY[8]}; + color: ${(props) => props.theme.colors.textTertiary}; text-decoration: underline; } `; diff --git a/datahub-web-react/src/app/homeV2/reference/sections/EntityLinkListSkeleton.tsx b/datahub-web-react/src/app/homeV2/reference/sections/EntityLinkListSkeleton.tsx index 01913403b7ab..d656700301aa 100644 --- a/datahub-web-react/src/app/homeV2/reference/sections/EntityLinkListSkeleton.tsx +++ b/datahub-web-react/src/app/homeV2/reference/sections/EntityLinkListSkeleton.tsx @@ -5,7 +5,7 @@ import styled from 'styled-components'; const SkeletonContainer = styled(Row)` && { margin-bottom: 20px; - border-bottom: 1px solid #ebecf0; + border-bottom: 1px solid ${(props) => props.theme.colors.border}; .ant-skeleton-button-sm { height: 16px; } diff --git a/datahub-web-react/src/app/homeV2/reference/sections/assets/EmptyAssetsYouOwn.tsx b/datahub-web-react/src/app/homeV2/reference/sections/assets/EmptyAssetsYouOwn.tsx index 5971f14cf605..81611ce741a1 100644 --- a/datahub-web-react/src/app/homeV2/reference/sections/assets/EmptyAssetsYouOwn.tsx +++ b/datahub-web-react/src/app/homeV2/reference/sections/assets/EmptyAssetsYouOwn.tsx @@ -1,11 +1,9 @@ import React from 'react'; import styled from 'styled-components'; -import { ANTD_GRAY } from '@app/entity/shared/constants'; - const Text = styled.div` font-size: 14px; - color: ${ANTD_GRAY[7]}; + color: ${(props) => props.theme.colors.textTertiary}; `; export const EmptyAssetsYouOwn = () => { diff --git a/datahub-web-react/src/app/homeV2/reference/sections/domains/EmptyDomainsYouOwn.tsx b/datahub-web-react/src/app/homeV2/reference/sections/domains/EmptyDomainsYouOwn.tsx index 3ac3ac5cafd4..00503b1d8a66 100644 --- a/datahub-web-react/src/app/homeV2/reference/sections/domains/EmptyDomainsYouOwn.tsx +++ b/datahub-web-react/src/app/homeV2/reference/sections/domains/EmptyDomainsYouOwn.tsx @@ -1,11 +1,9 @@ import React from 'react'; import styled from 'styled-components'; -import { ANTD_GRAY } from '@app/entity/shared/constants'; - const Text = styled.div` font-size: 14px; - color: ${ANTD_GRAY[7]}; + color: ${(props) => props.theme.colors.textTertiary}; `; export const EmptyDomainsYouOwn = () => { diff --git a/datahub-web-react/src/app/homeV2/reference/sections/glossary/EmptyGlossaryNodesYouOwn.tsx b/datahub-web-react/src/app/homeV2/reference/sections/glossary/EmptyGlossaryNodesYouOwn.tsx index a396a4c32550..365ffb189e60 100644 --- a/datahub-web-react/src/app/homeV2/reference/sections/glossary/EmptyGlossaryNodesYouOwn.tsx +++ b/datahub-web-react/src/app/homeV2/reference/sections/glossary/EmptyGlossaryNodesYouOwn.tsx @@ -1,11 +1,9 @@ import React from 'react'; import styled from 'styled-components'; -import { ANTD_GRAY } from '@app/entity/shared/constants'; - const Text = styled.div` font-size: 14px; - color: ${ANTD_GRAY[7]}; + color: ${(props) => props.theme.colors.textTertiary}; `; export const EmptyGlossaryNodesYouOwn = () => { diff --git a/datahub-web-react/src/app/homeV2/reference/sections/groups/EmptyGroupsYouAreIn.tsx b/datahub-web-react/src/app/homeV2/reference/sections/groups/EmptyGroupsYouAreIn.tsx index bcb3bba6c1f2..814360cc2697 100644 --- a/datahub-web-react/src/app/homeV2/reference/sections/groups/EmptyGroupsYouAreIn.tsx +++ b/datahub-web-react/src/app/homeV2/reference/sections/groups/EmptyGroupsYouAreIn.tsx @@ -1,11 +1,9 @@ import React from 'react'; import styled from 'styled-components'; -import { ANTD_GRAY } from '@app/entity/shared/constants'; - const Text = styled.div` font-size: 14px; - color: ${ANTD_GRAY[7]}; + color: ${(props) => props.theme.colors.textTertiary}; `; export const EmptyGroupsYouAreIn = () => { diff --git a/datahub-web-react/src/app/homeV2/reference/sections/pinned/PinnedLink.tsx b/datahub-web-react/src/app/homeV2/reference/sections/pinned/PinnedLink.tsx index 6b9ed15743f1..7fb15640e11c 100644 --- a/datahub-web-react/src/app/homeV2/reference/sections/pinned/PinnedLink.tsx +++ b/datahub-web-react/src/app/homeV2/reference/sections/pinned/PinnedLink.tsx @@ -2,10 +2,7 @@ import { Tooltip } from '@components'; import React from 'react'; import styled from 'styled-components'; -import { ANTD_GRAY } from '@app/entity/shared/constants'; import { PinnedLinkLogo } from '@app/homeV2/reference/sections/pinned/PinnedLinkLogo'; -import { colors } from '@src/alchemy-components'; -import { SEARCH_COLORS } from '@src/app/entityV2/shared/constants'; import { useShowNavBarRedesign } from '@src/app/useShowNavBarRedesign'; import { PostContent } from '@types'; @@ -17,16 +14,16 @@ const LinkButton = styled.a<{ $isShowNavBarRedesign?: boolean }>` display: flex; align-items: center; line-height: 16px; - background-color: #fff; + background-color: ${(props) => props.theme.colors.bg}; ${(props) => props.$isShowNavBarRedesign && ` - border: 1px solid ${colors.gray[100]}; + border: 1px solid ${props.theme.colors.border}; border-radius: 8px; :hover { - border: 1px solid ${SEARCH_COLORS.LINK_BLUE}; + border: 1px solid ${props.theme.colors.hyperlinks}; } `} `; @@ -55,7 +52,7 @@ const TextColumn = styled.div` const Title = styled.div``; const Description = styled.div` - color: ${ANTD_GRAY[7]}; + color: ${(props) => props.theme.colors.textTertiary}; padding-top: 4px; `; diff --git a/datahub-web-react/src/app/homeV2/reference/sections/pinned/PinnedLinkList.tsx b/datahub-web-react/src/app/homeV2/reference/sections/pinned/PinnedLinkList.tsx index 9332ed6d2de0..202e75d324ee 100644 --- a/datahub-web-react/src/app/homeV2/reference/sections/pinned/PinnedLinkList.tsx +++ b/datahub-web-react/src/app/homeV2/reference/sections/pinned/PinnedLinkList.tsx @@ -11,7 +11,7 @@ import { PostContent } from '@types'; const Title = styled.div<{ hasAction: boolean }>` ${(props) => props.hasAction && `:hover { cursor: pointer; }`} margin-bottom: 8px; - color: #403d5c; + color: ${(props) => props.theme.colors.text}; font-weight: 600; font-size: 16px; `; diff --git a/datahub-web-react/src/app/homeV2/reference/sections/tags/EmptyTagsYouOwn.tsx b/datahub-web-react/src/app/homeV2/reference/sections/tags/EmptyTagsYouOwn.tsx index b6560339a3ac..e948542c4da5 100644 --- a/datahub-web-react/src/app/homeV2/reference/sections/tags/EmptyTagsYouOwn.tsx +++ b/datahub-web-react/src/app/homeV2/reference/sections/tags/EmptyTagsYouOwn.tsx @@ -1,11 +1,9 @@ import React from 'react'; import styled from 'styled-components'; -import { ANTD_GRAY } from '@app/entity/shared/constants'; - const Text = styled.div` font-size: 14px; - color: ${ANTD_GRAY[7]}; + color: ${(props) => props.theme.colors.textTertiary}; `; export const EmptyTagsYouOwn = () => { diff --git a/datahub-web-react/src/app/homeV3/context/hooks/__tests__/useTemplateOperations.test.ts b/datahub-web-react/src/app/homeV3/context/hooks/__tests__/useTemplateOperations.test.ts index cdf5935b78f3..456321529cef 100644 --- a/datahub-web-react/src/app/homeV3/context/hooks/__tests__/useTemplateOperations.test.ts +++ b/datahub-web-react/src/app/homeV3/context/hooks/__tests__/useTemplateOperations.test.ts @@ -21,6 +21,10 @@ vi.mock('@graphql/user.generated'); vi.mock('@graphql/settings.generated'); vi.mock('@app/entity/shared/EntityContext'); +vi.mock('@app/homeV3/toast/useShowToast', () => ({ + default: () => ({ showToast: vi.fn() }), +})); + const mockUpsertPageTemplateMutation = vi.fn(); const mockUpdateUserHomePageSettings = vi.fn(); const mockDeletePageTemplate = vi.fn(); diff --git a/datahub-web-react/src/app/homeV3/header/Header.tsx b/datahub-web-react/src/app/homeV3/header/Header.tsx index 448386f31c0e..076e8bbffe42 100644 --- a/datahub-web-react/src/app/homeV3/header/Header.tsx +++ b/datahub-web-react/src/app/homeV3/header/Header.tsx @@ -1,4 +1,3 @@ -import { colors } from '@components'; import React from 'react'; import styled from 'styled-components'; @@ -11,8 +10,8 @@ const HeaderWrapper = styled.div` justify-content: center; padding: 27px 0 24px 0; width: 100%; - background: linear-gradient(180deg, #f8fcff 0%, #fafafb 100%); - border-bottom: 1px solid ${colors.gray[100]}; + background: ${(props) => props.theme.colors.bgSurface}; + border-bottom: 1px solid ${(props) => props.theme.colors.border}; border-radius: 12px 12px 0 0; position: relative; `; diff --git a/datahub-web-react/src/app/homeV3/module/components/EmptyContent.tsx b/datahub-web-react/src/app/homeV3/module/components/EmptyContent.tsx index e62feec49c64..f9f963c2b598 100644 --- a/datahub-web-react/src/app/homeV3/module/components/EmptyContent.tsx +++ b/datahub-web-react/src/app/homeV3/module/components/EmptyContent.tsx @@ -1,4 +1,4 @@ -import { Button, Icon, Text, borders, colors, radius } from '@components'; +import { Button, Icon, Text, borders, radius } from '@components'; import { ArrowRight } from '@phosphor-icons/react/dist/csr/ArrowRight'; import React from 'react'; import styled from 'styled-components'; @@ -33,7 +33,7 @@ const IconWrapper = styled.div` width: 32px; height: 32px; - border: ${borders['1px']} ${colors.gray[100]}; + border: ${borders['1px']} ${(props) => props.theme.colors.border}; border-radius: ${radius.full}; margin-bottom: 8px; `; diff --git a/datahub-web-react/src/app/homeV3/module/components/LargeModule.tsx b/datahub-web-react/src/app/homeV3/module/components/LargeModule.tsx index 03555424b38c..0b70c68634cd 100644 --- a/datahub-web-react/src/app/homeV3/module/components/LargeModule.tsx +++ b/datahub-web-react/src/app/homeV3/module/components/LargeModule.tsx @@ -1,5 +1,5 @@ /* eslint-disable rulesdir/no-hardcoded-colors */ -import { Button, Loader, borders, colors, radius, spacing } from '@components'; +import { Button, Loader, borders, radius, spacing } from '@components'; import { useDraggable } from '@dnd-kit/core'; import { DotsSixVertical } from '@phosphor-icons/react/dist/csr/DotsSixVertical'; import React, { memo, useCallback, useMemo } from 'react'; @@ -21,7 +21,7 @@ const ModuleHeader = styled.div` gap: 2px; border-radius: ${radius.lg} ${radius.lg} 0 0; padding: ${spacing.sm} ${spacing.lg} ${spacing.sm} ${spacing.md}; - border-bottom: ${borders['1px']} ${colors.white}; + border-bottom: ${borders['1px']} ${(props) => props.theme.colors.bg}; user-select: none; /* Optimize for smooth dragging */ @@ -29,8 +29,8 @@ const ModuleHeader = styled.div` will-change: transform; :hover { - background: linear-gradient(180deg, #fff 0%, #fafafb 100%); - border-bottom: 1px solid ${colors.gray[100]}; + background: ${(props) => props.theme.colors.bgSurface}; + border-bottom: 1px solid ${(props) => props.theme.colors.border}; } :hover ${DragIcon} { @@ -116,13 +116,7 @@ function LargeModule({ data-testid="large-module-drag-handle" > {isTemplateEditable && ( - + )} {/* TODO: implement description for modules CH-548 */} diff --git a/datahub-web-react/src/app/homeV3/module/components/ModuleContainer.tsx b/datahub-web-react/src/app/homeV3/module/components/ModuleContainer.tsx index 1eac8652276c..ca2f03b91570 100644 --- a/datahub-web-react/src/app/homeV3/module/components/ModuleContainer.tsx +++ b/datahub-web-react/src/app/homeV3/module/components/ModuleContainer.tsx @@ -1,23 +1,21 @@ -import { borders, colors, radius } from '@components'; +import { borders, radius } from '@components'; import styled from 'styled-components'; const ModuleContainer = styled.div<{ $height?: string; $isDragging?: boolean }>` - background: ${colors.white}; - border: ${borders['1px']} ${colors.gray[100]}; + background: ${(props) => props.theme.colors.bg}; + border: ${borders['1px']} ${(props) => props.theme.colors.border}; border-radius: ${radius.lg}; flex: 1; overflow-x: hidden; - box-shadow: - 0px 2px 18px 0px rgba(17, 7, 69, 0.01), - 0px 4px 12px 0px rgba(17, 7, 69, 0.03); + box-shadow: ${(props) => props.theme.colors.shadowXs}; opacity: 1; transition: opacity 0.2s ease; - ${({ $isDragging }) => - $isDragging && + ${(props) => + props.$isDragging && ` - background: linear-gradient(180deg, #f0f8ff 0%, #e6f3ff 100%); - box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); + background: ${props.theme.colors.bgSurface}; + box-shadow: ${props.theme.colors.shadowSm}; z-index: 1000; transform: translateZ(0) scale(1.02); opacity: 0.5; diff --git a/datahub-web-react/src/app/homeV3/module/components/ModuleMenu.tsx b/datahub-web-react/src/app/homeV3/module/components/ModuleMenu.tsx index 4515183d939b..0bdb00286579 100644 --- a/datahub-web-react/src/app/homeV3/module/components/ModuleMenu.tsx +++ b/datahub-web-react/src/app/homeV3/module/components/ModuleMenu.tsx @@ -1,4 +1,4 @@ -import { Icon, Text, Tooltip, colors } from '@components'; +import { Icon, Text, Tooltip } from '@components'; import { DotsThreeVertical } from '@phosphor-icons/react/dist/csr/DotsThreeVertical'; import { Dropdown } from 'antd'; import React, { useCallback, useMemo, useState } from 'react'; @@ -29,6 +29,10 @@ const StyledDropdownContainer = styled.div` } `; +const DisabledText = styled(Text)` + color: ${(props) => props.theme.colors.textDisabled}; +`; + interface Props { module: PageModuleFragment; position: ModulePositionInput; @@ -77,14 +81,10 @@ export default function ModuleMenu({ module, position }: Props) { <> {!canEdit ? ( - - Edit - + Edit ) : ( - - Edit - + Edit )} ), @@ -100,9 +100,9 @@ export default function ModuleMenu({ module, position }: Props) { title: 'Remove', label: 'Remove', key: 'remove', + danger: true, style: { ...menuItemStyle, - color: colors.red[500], }, onClick: () => setShowRemoveModuleConfirmation(true), 'data-testid': 'remove-module', diff --git a/datahub-web-react/src/app/homeV3/module/components/ModuleName.tsx b/datahub-web-react/src/app/homeV3/module/components/ModuleName.tsx index f33512d89cbc..8e057387b8e0 100644 --- a/datahub-web-react/src/app/homeV3/module/components/ModuleName.tsx +++ b/datahub-web-react/src/app/homeV3/module/components/ModuleName.tsx @@ -1,5 +1,5 @@ -import { colors } from '@components'; import React from 'react'; +import { useTheme } from 'styled-components'; import { NameContainer } from '@app/homeV3/styledComponents'; @@ -8,12 +8,12 @@ interface Props { } export default function ModuleName({ text }: Props) { + const theme = useTheme(); return ( { return ( - No assets found. + No assets found. ); }; diff --git a/datahub-web-react/src/app/homeV3/modules/assetCollection/ManualSelectAssetsTab.tsx b/datahub-web-react/src/app/homeV3/modules/assetCollection/ManualSelectAssetsTab.tsx index a72694541add..9b4b44299128 100644 --- a/datahub-web-react/src/app/homeV3/modules/assetCollection/ManualSelectAssetsTab.tsx +++ b/datahub-web-react/src/app/homeV3/modules/assetCollection/ManualSelectAssetsTab.tsx @@ -1,4 +1,4 @@ -import { Checkbox, Loader, SearchBar, Text, colors } from '@components'; +import { Checkbox, Loader, SearchBar, Text } from '@components'; import { Divider } from 'antd'; import React, { useState } from 'react'; import styled from 'styled-components'; @@ -49,7 +49,7 @@ const RightSection = styled.div` `; const VerticalDivider = styled(Divider)` - color: ${colors.gray[100]}; + color: ${(props) => props.theme.colors.border}; height: auto; `; @@ -82,9 +82,7 @@ const ManualSelectAssetsTab = ({ selectedAssetUrns, setSelectedAssetUrns }: Prop return ( - - {displayType} - + {displayType} - - Search and Select Assets - + Search and Select Assets ` - background-color: ${colors.white}; - box-shadow: ${(props) => (props.$isDragging ? '0px 4px 12px 0px rgba(9, 1, 61, 0.12)' : 'none')}; + background-color: ${(props) => props.theme.colors.bg}; + box-shadow: ${(props) => (props.$isDragging ? props.theme.colors.shadowSm : 'none')}; cursor: ${(props) => (props.$isDragging ? 'grabbing' : 'inherit')}; z-index: ${(props) => (props.$isDragging ? '999' : 'auto')}; transform: ${(props) => props.$transform}; diff --git a/datahub-web-react/src/app/homeV3/modules/documentation/RichTextContent.tsx b/datahub-web-react/src/app/homeV3/modules/documentation/RichTextContent.tsx index 12c3463b81bd..8e591b021c03 100644 --- a/datahub-web-react/src/app/homeV3/modules/documentation/RichTextContent.tsx +++ b/datahub-web-react/src/app/homeV3/modules/documentation/RichTextContent.tsx @@ -1,4 +1,3 @@ -import { colors } from '@components'; import { Form, FormInstance } from 'antd'; import React from 'react'; import styled from 'styled-components'; @@ -13,7 +12,7 @@ import { UploadDownloadScenario } from '@types'; const EditorContainer = styled.div` height: 300px; overflow: auto; - border: 1px solid ${colors.gray[100]}; + border: 1px solid ${(props) => props.theme.colors.border}; border-radius: 12px; `; diff --git a/datahub-web-react/src/app/homeV3/modules/domains/useDomainModuleUtils.tsx b/datahub-web-react/src/app/homeV3/modules/domains/useDomainModuleUtils.tsx index e89fac2af257..1ba49e98a376 100644 --- a/datahub-web-react/src/app/homeV3/modules/domains/useDomainModuleUtils.tsx +++ b/datahub-web-react/src/app/homeV3/modules/domains/useDomainModuleUtils.tsx @@ -30,12 +30,12 @@ const useDomainModuleUtils = ({ domains }: Props) => { return ( <> {assetCount > 0 && ( - + {formatNumber(assetCount)} {pluralize(assetCount, 'asset')}{' '} )} {dataProductCount > 0 && ( - + , {formatNumber(dataProductCount)} data {pluralize(dataProductCount, 'product')} )} diff --git a/datahub-web-react/src/app/homeV3/modules/hierarchyViewModule/components/form/sections/relatedEntities/components/ShowRelatedEntitiesToggler.tsx b/datahub-web-react/src/app/homeV3/modules/hierarchyViewModule/components/form/sections/relatedEntities/components/ShowRelatedEntitiesToggler.tsx index d6d879c0516e..6f43aab5676e 100644 --- a/datahub-web-react/src/app/homeV3/modules/hierarchyViewModule/components/form/sections/relatedEntities/components/ShowRelatedEntitiesToggler.tsx +++ b/datahub-web-react/src/app/homeV3/modules/hierarchyViewModule/components/form/sections/relatedEntities/components/ShowRelatedEntitiesToggler.tsx @@ -21,12 +21,10 @@ export default function ShowRelatedEntitiesSwitch({ isChecked, onChange }: Props return ( - + Show Related Entities - - Show related entities for this term. Toggling shows entities in the module. - + Show related entities for this term. Toggling shows entities in the module. onChange(!isChecked)} /> diff --git a/datahub-web-react/src/app/homeV3/modules/hierarchyViewModule/components/form/sections/selectAssets/SelectAssetsSection.tsx b/datahub-web-react/src/app/homeV3/modules/hierarchyViewModule/components/form/sections/selectAssets/SelectAssetsSection.tsx index e641c7b246f9..91558e3a1b40 100644 --- a/datahub-web-react/src/app/homeV3/modules/hierarchyViewModule/components/form/sections/selectAssets/SelectAssetsSection.tsx +++ b/datahub-web-react/src/app/homeV3/modules/hierarchyViewModule/components/form/sections/selectAssets/SelectAssetsSection.tsx @@ -61,9 +61,7 @@ export default function SelectAssetsSection() { return ( - - Search and Select Assets - + Search and Select Assets diff --git a/datahub-web-react/src/app/homeV3/modules/link/LinkModule.tsx b/datahub-web-react/src/app/homeV3/modules/link/LinkModule.tsx index c2f4d74098d0..dd9ad4e3d009 100644 --- a/datahub-web-react/src/app/homeV3/modules/link/LinkModule.tsx +++ b/datahub-web-react/src/app/homeV3/modules/link/LinkModule.tsx @@ -1,7 +1,7 @@ -import { Icon, colors } from '@components'; +import { Icon } from '@components'; import { ArrowUpRight } from '@phosphor-icons/react/dist/csr/ArrowUpRight'; import React from 'react'; -import styled from 'styled-components'; +import styled, { useTheme } from 'styled-components'; import analytics, { EventType } from '@app/analytics'; import SmallModule from '@app/homeV3/module/components/SmallModule'; @@ -34,6 +34,7 @@ const TextSection = styled.div` `; export default function LinkModule(props: ModuleProps) { + const theme = useTheme(); const { name } = props.module.properties; const { linkParams } = props.module.properties.params; @@ -58,7 +59,7 @@ export default function LinkModule(props: ModuleProps) { ellipsis={{ tooltip: { color: 'white', - overlayInnerStyle: { color: colors.gray[1700] }, + overlayInnerStyle: { color: theme.colors.textSecondary }, showArrow: false, }, }} @@ -70,7 +71,7 @@ export default function LinkModule(props: ModuleProps) { ellipsis={{ tooltip: { color: 'white', - overlayInnerStyle: { color: colors.gray[1700] }, + overlayInnerStyle: { color: theme.colors.textSecondary }, showArrow: false, }, }} @@ -82,7 +83,7 @@ export default function LinkModule(props: ModuleProps) { - + diff --git a/datahub-web-react/src/app/homeV3/modules/shared/ButtonTabs/TabButtons.tsx b/datahub-web-react/src/app/homeV3/modules/shared/ButtonTabs/TabButtons.tsx index 1ee5be16bb9c..0ddc19fba5f8 100644 --- a/datahub-web-react/src/app/homeV3/modules/shared/ButtonTabs/TabButtons.tsx +++ b/datahub-web-react/src/app/homeV3/modules/shared/ButtonTabs/TabButtons.tsx @@ -1,4 +1,4 @@ -import { Button, colors } from '@components'; +import { Button } from '@components'; import React, { useCallback } from 'react'; import styled from 'styled-components'; @@ -11,20 +11,20 @@ const StyledButton = styled(Button)<{ $active?: boolean }>` ${(props) => props.$active ? ` - background: ${colors.white}; + background: ${props.theme.colors.bg}; :hover { - background: ${colors.white}; + background: ${props.theme.colors.bg}; } ` : ` - color: ${colors.gray[500]} !important; + color: ${props.theme.colors.textSecondary} !important; `} `; const TabsWrapper = styled.div` display: flex; padding: 2px; - background: ${colors.gray[1500]}; + background: ${(props) => props.theme.colors.bgSurface}; border-radius: 6px; `; diff --git a/datahub-web-react/src/app/homeV3/settings/EditDefaultTemplateBar.tsx b/datahub-web-react/src/app/homeV3/settings/EditDefaultTemplateBar.tsx index f7a6e1df23b2..cae6d28a76f8 100644 --- a/datahub-web-react/src/app/homeV3/settings/EditDefaultTemplateBar.tsx +++ b/datahub-web-react/src/app/homeV3/settings/EditDefaultTemplateBar.tsx @@ -1,4 +1,4 @@ -import { Button, Icon, colors } from '@components'; +import { Button, Icon } from '@components'; import { ExclamationMark } from '@phosphor-icons/react/dist/csr/ExclamationMark'; import React, { useCallback } from 'react'; import styled from 'styled-components'; @@ -10,8 +10,8 @@ import { usePageTemplateContext } from '@app/homeV3/context/PageTemplateContext' const Warning = styled.div` padding: 8px; - background-color: ${colors.red[0]}; - color: ${colors.red[1000]}; + background-color: ${(props) => props.theme.colors.bgSurfaceError}; + color: ${(props) => props.theme.colors.textError}; display: flex; align-items: center; gap: 8px; diff --git a/datahub-web-react/src/app/homeV3/styledComponents.ts b/datahub-web-react/src/app/homeV3/styledComponents.ts index bd675818e2fc..d53ea62cc6cb 100644 --- a/datahub-web-react/src/app/homeV3/styledComponents.ts +++ b/datahub-web-react/src/app/homeV3/styledComponents.ts @@ -1,4 +1,4 @@ -import { Icon, colors } from '@components'; +import { Icon } from '@components'; import { Typography } from 'antd'; import styled from 'styled-components'; @@ -13,7 +13,6 @@ export const PageWrapper = styled.div` } display: flex; flex-direction: column; - box-shadow: 0px 4px 8px 0px rgba(33, 23, 95, 0.08); align-items: center; `; @@ -22,9 +21,9 @@ export const HomePageContainer = styled.div` flex: 1; overflow: hidden; margin: 5px; - border: 1px solid ${colors.gray[100]}; border-radius: 12px; - position: relative; + box-shadow: ${(props) => props.theme.colors.shadowSm}; + background-color: ${(props) => props.theme.colors.bg}; `; export const StyledVectorBackground = styled(VectorBackground)` @@ -35,7 +34,8 @@ export const StyledVectorBackground = styled(VectorBackground)` transform: rotate(0deg); pointer-events: none; border-radius: 12px; - background-color: ${colors.white}; + background-color: ${(props) => props.theme.colors.bg}; + ${(props) => props.theme.id === 'themeV2Dark' && 'opacity: 0;'} `; export const contentWidth = (additionalWidth = 0) => ` @@ -106,14 +106,14 @@ export const FloatingRightHeaderSection = styled.div` `; export const NameContainer = styled(Typography.Text)` - color: ${colors.gray[600]}; + color: ${(props) => props.theme.colors.text}; font-weight: 700; font-size: 16px; line-height: 20px; `; export const DescriptionContainer = styled(Typography.Text)` - color: ${colors.gray[500]}; + color: ${(props) => props.theme.colors.textSecondary}; font-weight: 400; font-size: 12px; line-height: 20px; diff --git a/datahub-web-react/src/app/homeV3/template/components/AddModuleButton.tsx b/datahub-web-react/src/app/homeV3/template/components/AddModuleButton.tsx index d54d783df340..3b89bd13fae0 100644 --- a/datahub-web-react/src/app/homeV3/template/components/AddModuleButton.tsx +++ b/datahub-web-react/src/app/homeV3/template/components/AddModuleButton.tsx @@ -1,4 +1,4 @@ -import { Button, Dropdown, Icon, colors } from '@components'; +import { Button, Dropdown, Icon } from '@components'; import { Plus } from '@phosphor-icons/react/dist/csr/Plus'; import React, { useMemo, useState } from 'react'; import styled from 'styled-components'; @@ -40,10 +40,10 @@ const StyledButton = styled(Button)<{ $orientation: AddModuleButtonOrientation; `} justify-content: center; - background: ${colors.gray[1600]}; + background: ${(props) => props.theme.colors.bgSurfaceNewNav}; :hover { - background: ${colors.gray[1600]}; + background: ${(props) => props.theme.colors.bgSurfaceNewNav}; } `; diff --git a/datahub-web-react/src/app/homeV3/template/components/DragAndDropProvider.tsx b/datahub-web-react/src/app/homeV3/template/components/DragAndDropProvider.tsx index f3285940909a..10af6cb59bfa 100644 --- a/datahub-web-react/src/app/homeV3/template/components/DragAndDropProvider.tsx +++ b/datahub-web-react/src/app/homeV3/template/components/DragAndDropProvider.tsx @@ -9,7 +9,7 @@ import { pointerClosestCollisionDetector } from '@app/homeV3/template/components // Styled wrapper for drag overlay to make it look like it's floating const DragOverlayWrapper = styled.div` transform: rotate(5deg) scale(1.05); - box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2); + box-shadow: ${(props) => props.theme.colors.shadowXl}; border-radius: 8px; opacity: 0.95; /* Performance optimizations */ diff --git a/datahub-web-react/src/app/homeV3/template/components/NewRowDropZone.tsx b/datahub-web-react/src/app/homeV3/template/components/NewRowDropZone.tsx index 1ec8002de3f3..f320409e7ca4 100644 --- a/datahub-web-react/src/app/homeV3/template/components/NewRowDropZone.tsx +++ b/datahub-web-react/src/app/homeV3/template/components/NewRowDropZone.tsx @@ -6,7 +6,7 @@ const NewRowDropZone = styled.div<{ $isOver?: boolean }>` transition: all 0.2s ease; margin: 0 42px; - ${({ $isOver }) => $isOver && `border: 2px solid #CAC3F1;`} + ${({ $isOver, theme }) => $isOver && `border: 2px solid ${theme.colors.borderBrand};`} `; interface Props { diff --git a/datahub-web-react/src/app/homeV3/template/components/addModuleMenu/components/GroupItem.tsx b/datahub-web-react/src/app/homeV3/template/components/addModuleMenu/components/GroupItem.tsx index e29562f7fd8e..48d91a484859 100644 --- a/datahub-web-react/src/app/homeV3/template/components/addModuleMenu/components/GroupItem.tsx +++ b/datahub-web-react/src/app/homeV3/template/components/addModuleMenu/components/GroupItem.tsx @@ -7,7 +7,7 @@ interface Props { export default function GroupItem({ title }: Props) { return ( - + {title} ); diff --git a/datahub-web-react/src/app/homeV3/templateRow/components/ModuleDropZone.tsx b/datahub-web-react/src/app/homeV3/templateRow/components/ModuleDropZone.tsx index 07f33cf11617..43e4f29091e0 100644 --- a/datahub-web-react/src/app/homeV3/templateRow/components/ModuleDropZone.tsx +++ b/datahub-web-react/src/app/homeV3/templateRow/components/ModuleDropZone.tsx @@ -6,11 +6,11 @@ const DropZone = styled.div<{ $isOver?: boolean; $canDrop?: boolean; $isSmall?: height: ${(props) => (props.$isSmall ? '64px' : '316px')}; transition: all 0.2s ease; - ${({ $isOver, $canDrop }) => { + ${({ $isOver, $canDrop, theme }) => { if ($isOver && $canDrop) { return ` - background-color: rgba(59, 130, 246, 0.1); - border: 2px solid #CAC3F1; + background-color: ${theme.colors.bgSelectedSubtle}; + border: 2px solid ${theme.colors.borderBrand}; `; } return ` diff --git a/datahub-web-react/src/app/homeV3/toast/__tests__/useShowToast.test.tsx b/datahub-web-react/src/app/homeV3/toast/__tests__/useShowToast.test.tsx index 1f0e42da2723..a4ac78280d23 100644 --- a/datahub-web-react/src/app/homeV3/toast/__tests__/useShowToast.test.tsx +++ b/datahub-web-react/src/app/homeV3/toast/__tests__/useShowToast.test.tsx @@ -1,9 +1,15 @@ import { act, renderHook } from '@testing-library/react-hooks'; import { notification } from 'antd'; import React from 'react'; +import { ThemeProvider } from 'styled-components'; import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'; import useShowToast from '@app/homeV3/toast/useShowToast'; +import themeV2 from '@conf/theme/themeV2'; + +const wrapper = ({ children }: { children: React.ReactNode }) => ( + {children} +); interface NotificationArgsProps { message?: React.ReactNode; @@ -27,12 +33,12 @@ describe('useShowToast', () => { }); it('should return a showToast function', () => { - const { result } = renderHook(() => useShowToast()); + const { result } = renderHook(() => useShowToast(), { wrapper }); expect(typeof result.current.showToast).toBe('function'); }); it('should call notification.open with correct config on showToast call', () => { - const { result } = renderHook(() => useShowToast()); + const { result } = renderHook(() => useShowToast(), { wrapper }); const sampleTitle = 'Test Title'; const sampleDescription = 'Sample description text'; @@ -64,7 +70,9 @@ describe('useShowToast', () => { expect(React.isValidElement(config.description)).toBe(true); if (React.isValidElement(config.message)) { - const messageProps = config.message.props; + const messageEl = (config.message.props as { children: React.ReactElement }).children; + expect(React.isValidElement(messageEl)).toBe(true); + const messageProps = (messageEl as React.ReactElement).props; expect(messageProps.children).toBe(sampleTitle); expect(messageProps.color).toBe('blue'); expect(messageProps.colorLevel).toBe(1000); @@ -75,7 +83,9 @@ describe('useShowToast', () => { } if (React.isValidElement(config.description)) { - const descriptionProps = config.description.props; + const descriptionEl = (config.description.props as { children: React.ReactElement }).children; + expect(React.isValidElement(descriptionEl)).toBe(true); + const descriptionProps = (descriptionEl as React.ReactElement).props; expect(descriptionProps.children).toBe(sampleDescription); expect(descriptionProps.color).toBe('blue'); expect(descriptionProps.colorLevel).toBe(1000); @@ -86,7 +96,7 @@ describe('useShowToast', () => { }); it('should handle missing description gracefully', () => { - const { result } = renderHook(() => useShowToast()); + const { result } = renderHook(() => useShowToast(), { wrapper }); const sampleTitle = 'Only Title'; @@ -100,13 +110,12 @@ describe('useShowToast', () => { expect(React.isValidElement(config.message)).toBe(true); - if (config.description === undefined || config.description === null) { - expect(config.description).toBeUndefined(); - } else if (React.isValidElement(config.description)) { - const descriptionProps = config.description.props; + if (React.isValidElement(config.description)) { + const descriptionEl = (config.description.props as { children: React.ReactElement }).children; + const descriptionProps = (descriptionEl as React.ReactElement).props; expect(descriptionProps.children).toBeUndefined(); } else { - throw new Error('config.description is not a valid React element or undefined'); + expect(config.description).toBeUndefined(); } }); }); diff --git a/datahub-web-react/src/app/homeV3/toast/useShowToast.tsx b/datahub-web-react/src/app/homeV3/toast/useShowToast.tsx index 723bee7f87d6..051e83ab2828 100644 --- a/datahub-web-react/src/app/homeV3/toast/useShowToast.tsx +++ b/datahub-web-react/src/app/homeV3/toast/useShowToast.tsx @@ -1,38 +1,46 @@ import '@app/homeV3/toast/notification-toast-styles.less'; -import { Icon, Text, colors } from '@components'; +import { Icon, Text } from '@components'; import { Info } from '@phosphor-icons/react/dist/csr/Info'; import { X } from '@phosphor-icons/react/dist/csr/X'; import { notification } from 'antd'; import React from 'react'; +import { DefaultTheme, useTheme } from 'styled-components'; -const notificationStyles = { - backgroundColor: colors.blue[0], +import CustomThemeProvider from '@src/CustomThemeProvider'; + +const notificationStyles = (theme: DefaultTheme) => ({ + backgroundColor: theme.colors.bgSurfaceInfo, borderRadius: 8, width: 'max-content', padding: '8px 4px', right: 50, bottom: -8, -}; +}); + +function withTheme(children: React.ReactNode): React.ReactElement { + return {children}; +} export default function useShowToast() { + const theme = useTheme(); function showToast(title: string, description?: string, dataTestId?: string) { notification.open({ - message: ( + message: withTheme( {title} - + , ), - description: ( + description: withTheme( {description} - + , ), placement: 'bottomRight', duration: 0, - icon: , - closeIcon: , - style: notificationStyles, + icon: withTheme(), + closeIcon: withTheme(), + style: notificationStyles(theme), }); } return { showToast }; diff --git a/datahub-web-react/src/app/settingsV2/SettingsPage.tsx b/datahub-web-react/src/app/settingsV2/SettingsPage.tsx index 25bdc1f78b25..e0d1a9cb2984 100644 --- a/datahub-web-react/src/app/settingsV2/SettingsPage.tsx +++ b/datahub-web-react/src/app/settingsV2/SettingsPage.tsx @@ -1,4 +1,3 @@ -/* eslint-disable rulesdir/no-hardcoded-colors */ import { Bank } from '@phosphor-icons/react/dist/csr/Bank'; import { Bell } from '@phosphor-icons/react/dist/csr/Bell'; import { Funnel } from '@phosphor-icons/react/dist/csr/Funnel'; @@ -20,7 +19,7 @@ import { NavBarMenuItemTypes, NavBarMenuItems } from '@app/homeV2/layout/navBarR import { DEFAULT_PATH, PATHS } from '@app/settingsV2/settingsPaths'; import { useAppConfig } from '@app/useAppConfig'; import { useShowNavBarRedesign } from '@app/useShowNavBarRedesign'; -import { Button, colors } from '@src/alchemy-components'; +import { Button } from '@src/alchemy-components'; const PageContainer = styled.div` display: flex; @@ -37,7 +36,7 @@ const NavBarContainer = styled.div` display: flex; flex-direction: column; 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}; align-items: start; overflow: auto; width: 20%; @@ -60,7 +59,7 @@ const NavBarTitle = styled.div` const NavBarSubTitle = styled.div` font-size: 14px; - color: ${colors.gray[1700]}; + color: ${(props) => props.theme.colors.textSecondary}; margin-bottom: 8px; `; @@ -75,7 +74,7 @@ const ContentContainer = styled.div` display: flex; overflow: auto; background-color: ${(props) => props.theme.colors.bg}; - box-shadow: ${(props) => props.theme.styles['box-shadow-navbar-redesign']}; + box-shadow: ${(props) => props.theme.colors.shadowSm}; `; export const SettingsPage = () => { diff --git a/datahub-web-react/src/app/settingsV2/features/Feature.tsx b/datahub-web-react/src/app/settingsV2/features/Feature.tsx index d494c84b7e35..030741ee9792 100644 --- a/datahub-web-react/src/app/settingsV2/features/Feature.tsx +++ b/datahub-web-react/src/app/settingsV2/features/Feature.tsx @@ -1,17 +1,14 @@ -/* eslint-disable rulesdir/no-hardcoded-colors */ import { Button, Pill, StructuredPopover, Switch } from '@components'; import { ArrowRight } from '@phosphor-icons/react/dist/csr/ArrowRight'; import { Card, Divider } from 'antd'; import React from 'react'; import styled from 'styled-components'; -import { colors } from '@components/theme'; - const StyledCard = styled(Card)` && { border-radius: 12px; - border: 1px solid ${colors.gray[100]}; - box-shadow: 0px 1px 2px 0px rgba(33, 23, 95, 0.07); + border: 1px solid ${(props) => props.theme.colors.border}; + box-shadow: ${(props) => props.theme.colors.shadowXs}; margin-bottom: 24px; .ant-card-body { @@ -23,7 +20,7 @@ const StyledCard = styled(Card)` const Title = styled.div` font-size: 16px; font-weight: 700; - color: ${colors.gray[1700]}; + color: ${(props) => props.theme.colors.textSecondary}; display: flex; align-items: center; gap: 8px; @@ -31,7 +28,7 @@ const Title = styled.div` const TitleDescriptionText = styled.div` font-size: 14px; - color: ${colors.gray[1700]}; + color: ${(props) => props.theme.colors.textSecondary}; `; const SettingTitle = styled.div` @@ -58,7 +55,7 @@ const FeatureOptionRow = styled.div` `; const StyledDivider = styled(Divider)` - color: ${colors.gray[100]}; + color: ${(props) => props.theme.colors.border}; `; const SettingsOptionRow = styled.div` @@ -73,7 +70,7 @@ const SettingsOptionRow = styled.div` `; const DescriptionText = styled.div` - color: ${colors.gray[1700]}; + color: ${(props) => props.theme.colors.textSecondary}; font-size: 12px; `; @@ -82,7 +79,7 @@ const OptionTitle = styled.div` align-items: center; gap: 8px; font-size: 14px; - color: ${colors.gray[1700]}; + color: ${(props) => props.theme.colors.textSecondary}; font-weight: 600; `;