feat(ui): migrate colors to semantic tokens in sharedV2 folder

datahub-web-react/src/app/homeV3/module/components/__tests__/ModuleMenu.test.tsx

@@ -5,6 +5,7 @@ import { describe, expect, it, vi } from 'vitest';
 
 import ModuleMenu from '@app/homeV3/module/components/ModuleMenu';
 import { ModulePositionInput } from '@app/homeV3/template/types';
+import CustomThemeProvider from '@src/CustomThemeProvider';
 
 import { PageModuleFragment } from '@graphql/template.generated';
 import { DataHubPageModuleType, EntityType, PageModuleScope } from '@types';
@@ -61,6 +62,8 @@ vi.mock('@components', () => ({
     },
 }));
 
+const renderWithTheme = (ui: React.ReactElement) => render(<CustomThemeProvider>{ui}</CustomThemeProvider>);
+
 describe('ModuleMenu', () => {
     const mockModule: PageModuleFragment = {
         urn: 'urn:li:dataHubPageModule:test',
@@ -83,7 +86,7 @@ describe('ModuleMenu', () => {
     });
 
     it('should render menu with correct items', () => {
-        render(<ModuleMenu module={mockModule} position={mockPosition} />);
+        renderWithTheme(<ModuleMenu module={mockModule} position={mockPosition} />);
 
         // Click to open the dropdown
         const menuButton = screen.getByTestId('icon');
@@ -96,7 +99,7 @@ describe('ModuleMenu', () => {
     });
 
     it('should call removeModule when remove is clicked', () => {
-        render(<ModuleMenu module={mockModule} position={mockPosition} />);
+        renderWithTheme(<ModuleMenu module={mockModule} position={mockPosition} />);
 
         // Click to open the dropdown
         const menuButton = screen.getByTestId('icon');
@@ -133,7 +136,7 @@ describe('ModuleMenu', () => {
             rowSide: 'right',
         };
 
-        render(<ModuleMenu module={differentModule} position={differentPosition} />);
+        renderWithTheme(<ModuleMenu module={differentModule} position={differentPosition} />);
 
         // Click to open the dropdown
         const menuButton = screen.getByTestId('icon');
@@ -154,7 +157,7 @@ describe('ModuleMenu', () => {
     });
 
     it('should render remove option with red color', () => {
-        render(<ModuleMenu module={mockModule} position={mockPosition} />);
+        renderWithTheme(<ModuleMenu module={mockModule} position={mockPosition} />);
 
         // Click to open the dropdown
         const menuButton = screen.getByTestId('icon');
@@ -173,7 +176,7 @@ describe('ModuleMenu', () => {
             moduleIndex: 2,
         };
 
-        render(<ModuleMenu module={mockModule} position={positionWithModuleIndex} />);
+        renderWithTheme(<ModuleMenu module={mockModule} position={positionWithModuleIndex} />);
 
         // Click to open the dropdown
         const menuButton = screen.getByTestId('icon');
@@ -205,7 +208,7 @@ describe('ModuleMenu', () => {
             },
         };
 
-        render(<ModuleMenu module={moduleWithLongName} position={mockPosition} />);
+        renderWithTheme(<ModuleMenu module={moduleWithLongName} position={mockPosition} />);
 
         // Click to open the dropdown
         const menuButton = screen.getByTestId('icon');
@@ -231,7 +234,7 @@ describe('ModuleMenu', () => {
             // rowSide and moduleIndex are optional/undefined
         };
 
-        render(<ModuleMenu module={mockModule} position={minimalPosition} />);
+        renderWithTheme(<ModuleMenu module={mockModule} position={minimalPosition} />);
 
         // Click to open the dropdown
         const menuButton = screen.getByTestId('icon');
@@ -263,7 +266,7 @@ describe('ModuleMenu', () => {
             },
         };
 
-        render(<ModuleMenu module={moduleWithSpecialChars} position={mockPosition} />);
+        renderWithTheme(<ModuleMenu module={moduleWithSpecialChars} position={mockPosition} />);
 
         // Click to open the dropdown
         const menuButton = screen.getByTestId('icon');
@@ -284,7 +287,7 @@ describe('ModuleMenu', () => {
     });
 
     it('should handle edit option (placeholder functionality)', () => {
-        render(<ModuleMenu module={mockModule} position={mockPosition} />);
+        renderWithTheme(<ModuleMenu module={mockModule} position={mockPosition} />);
 
         // Click to open the dropdown
         const menuButton = screen.getByTestId('icon');
@@ -306,7 +309,7 @@ describe('ModuleMenu', () => {
     });
 
     it('should handle multiple rapid clicks on remove', () => {
-        render(<ModuleMenu module={mockModule} position={mockPosition} />);
+        renderWithTheme(<ModuleMenu module={mockModule} position={mockPosition} />);
 
         // Click to open the dropdown
         const menuButton = screen.getByTestId('icon');

datahub-web-react/src/app/lineageV2/LineageEntityNode/SchemaFieldNodeContents.tsx

@@ -4,9 +4,8 @@ import { Skeleton, Spin } from 'antd';
 import React from 'react';
 import { Link } from 'react-router-dom';
 import { Handle, Position } from 'reactflow';
-import styled from 'styled-components';
+import styled, { useTheme } from 'styled-components';
 
-import { ANTD_GRAY, LINEAGE_COLORS, REDESIGN_COLORS } from '@app/entityV2/shared/constants';
 import ContainerPath from '@app/lineageV2/LineageEntityNode/ContainerPath';
 import { ContractLineageButton } from '@app/lineageV2/LineageEntityNode/ContractLineageButton';
 import { ExpandLineageButton } from '@app/lineageV2/LineageEntityNode/ExpandLineageButton';
@@ -15,7 +14,6 @@ import NodeSkeleton from '@app/lineageV2/LineageEntityNode/NodeSkeleton';
 import { FetchStatus } from '@app/lineageV2/common';
 import { downgradeV2FieldPath, useGetLineageUrl } from '@app/lineageV2/lineageUtils';
 import { FetchedEntityV2 } from '@app/lineageV2/types';
-import { COLORS } from '@app/sharedV2/colors';
 import getTypeIcon from '@app/sharedV2/icons/getTypeIcon';
 import OverflowTitle from '@app/sharedV2/text/OverflowTitle';
 import { useEntityRegistryV2 } from '@app/useEntityRegistry';
@@ -26,7 +24,6 @@ import LinkOut from '@images/link-out.svg?react';
 
 export const SCHEMA_FIELD_NODE_HEIGHT = 80;
 export const SCHEMA_FIELD_NODE_WIDTH = 240;
-const NODE_COLOR = COLORS.blue_7;
 
 const NodeWrapper = styled.div<{
     selected: boolean;
@@ -36,15 +33,15 @@ const NodeWrapper = styled.div<{
     isSearchedEntity: boolean;
 }>`
     align-items: center;
-    background-color: white;
+    background-color: ${(props) => props.theme.colors.bgSurface};
     border: 1px solid
-        ${({ color, selected, isGhost }) => {
+        ${({ color, selected, isGhost, theme }) => {
             if (selected) return color;
-            if (isGhost) return `${LINEAGE_COLORS.NODE_BORDER}50`;
-            return LINEAGE_COLORS.NODE_BORDER;
+            if (isGhost) return `${theme.colors.border}50`;
+            return theme.colors.border;
         }};
     box-shadow: ${({ isSearchedEntity, theme }) =>
-        isSearchedEntity ? `0 0 4px 4px ${theme.styles['primary-color']}95` : 'none'};
+        isSearchedEntity ? `0 0 4px 4px ${theme.colors.borderBrand}95` : 'none'};
     outline: ${({ color, selected }) => (selected ? `1px solid ${color}` : 'none')};
     border-left: none;
     border-radius: 6px;
@@ -102,7 +99,7 @@ const CustomHandle = styled(Handle)<{ position: Position }>`
 
 const IconsWrapper = styled.div`
     align-items: center;
-    color: ${ANTD_GRAY[10]};
+    color: ${(props) => props.theme.colors.text};
     display: flex;
     flex-direction: column;
     font-size: 24px;
@@ -144,7 +141,7 @@ const ParentLine = styled.span`
     height: min-content;
     gap: 4px;
 
-    color: ${REDESIGN_COLORS.SUBTITLE};
+    color: ${(props) => props.theme.colors.text};
     font-weight: 600;
 `;
 
@@ -193,7 +190,7 @@ const ColumnLinkWrapper = styled(Link)`
     color: inherit;
 
     :hover {
-        color: ${(props) => props.theme.styles['primary-color']};
+        color: ${(props) => props.theme.colors.textHover};
     }
 `;
 
@@ -237,6 +234,8 @@ export default function SchemaFieldNodeContents({
     ignoreSchemaFieldStatus,
 }: Props) {
     const entityRegistry = useEntityRegistryV2();
+    const theme = useTheme();
+    const NODE_COLOR = theme.colors.chartsInformationLow;
 
     const isExpandedDownstream = isExpanded?.[LineageDirection.Downstream];
     const isExpandedUpstream = isExpanded?.[LineageDirection.Upstream];
@@ -248,7 +247,7 @@ export default function SchemaFieldNodeContents({
     const parentLineageUrl = useGetLineageUrl(parent?.urn, parent?.type);
     const lineageUrl = useGetLineageUrl(urn, EntityType.SchemaField);
 
-    const highlightColor = isSearchedEntity ? REDESIGN_COLORS.YELLOW_500 : REDESIGN_COLORS.YELLOW_200;
+    const highlightColor = isSearchedEntity ? theme.colors.textWarning : theme.colors.bgSurfaceWarning;
     const contents = (
         <NodeWrapper
             selected={selected}

datahub-web-react/src/app/previewV2/NotesIcon.tsx

@@ -4,13 +4,12 @@ import React from 'react';
 import styled from 'styled-components';
 
 import { pluralize } from '@app/shared/textUtil';
-import { COLORS } from '@app/sharedV2/colors';
 
 import { Post } from '@types';
 
 const IconWrapper = styled.div<{ count: number }>`
     display: flex;
-    color: ${COLORS.blue_6};
+    color: ${(props) => props.theme.colors.iconInformation};
     font-size: 20px;
     line-height: 1;
 `;

datahub-web-react/src/app/sharedV2/ErrorHandling/ErrorFallback.tsx

@@ -1,7 +1,7 @@
 import { Button, Text } from '@components';
 import React from 'react';
 import { useHistory } from 'react-router';
-import styled, { css } from 'styled-components';
+import styled, { css, useTheme } from 'styled-components';
 
 type ErrorFallbackProps = {
     variant?: ErrorVariant;
@@ -15,15 +15,15 @@ const getVariantStyles = (variant: ErrorVariant) => {
     if (variant === 'route') {
         return css`
             border-radius: ${(props) => props.theme.styles['border-radius-navbar-redesign']};
-            box-shadow: ${(props) => props.theme.styles['box-shadow-navbar-redesign']};
+            box-shadow: ${(props) => props.theme.colors.shadowSm};
             margin: 5px;
         `;
     }
     return '';
 };
 
 const Container = styled.div<{ variant?: ErrorVariant }>`
-    background-color: white;
+    background-color: ${(props) => props.theme.colors.bg};
     display: flex;
     flex-direction: column;
     align-items: center;
@@ -55,24 +55,25 @@ const TextContainer = styled.div`
 
 const ErrorFallback: React.FC<ErrorFallbackProps> = ({ variant, actionMessage = DEFAULT_MESSAGE }) => {
     const history = useHistory();
+    const theme = useTheme();
     return (
         <Container variant={variant}>
             <svg width="200" height="200" viewBox="0 0 200 200" fill="none" xmlns="http://www.w3.org/2000/svg">
-                <rect width="200" height="200" rx="100" fill="#F9FAFC" />
+                <rect width="200" height="200" rx="100" fill={theme.colors.bgSurface} />
                 <path
                     d="M110 145C110 146.978 109.414 148.911 108.315 150.556C107.216 152.2 105.654 153.482 103.827 154.239C102 154.996 99.9889 155.194 98.0491 154.808C96.1093 154.422 94.3275 153.47 92.9289 152.071C91.5304 150.673 90.578 148.891 90.1922 146.951C89.8063 145.011 90.0043 143 90.7612 141.173C91.5181 139.346 92.7998 137.784 94.4443 136.685C96.0888 135.587 98.0222 135 100 135C102.652 135 105.196 136.054 107.071 137.929C108.946 139.804 110 142.348 110 145ZM100 120C101.326 120 102.598 119.473 103.536 118.536C104.473 117.598 105 116.326 105 115V50C105 48.6739 104.473 47.4021 103.536 46.4645C102.598 45.5268 101.326 45 100 45C98.6739 45 97.4022 45.5268 96.4645 46.4645C95.5268 47.4021 95 48.6739 95 50V115C95 116.326 95.5268 117.598 96.4645 118.536C97.4022 119.473 98.6739 120 100 120Z"
-                    fill="#67739E"
+                    fill={theme.colors.icon}
                 />
             </svg>
             <TextContainer>
-                <Text color="gray" weight="bold" size="xl">
+                <Text weight="bold" size="xl" style={{ color: theme.colors.textSecondary }}>
                     Whoops!
                 </Text>
                 <TextContainer>
-                    <Text color="gray" size="lg">
+                    <Text size="lg" style={{ color: theme.colors.textSecondary }}>
                         Something didn&apos;t go as planned.
                     </Text>
-                    <Text color="gray" size="lg">
+                    <Text size="lg" style={{ color: theme.colors.textSecondary }}>
                         {actionMessage}
                     </Text>
                 </TextContainer>

datahub-web-react/src/app/sharedV2/TimestampPopover.tsx

@@ -2,16 +2,15 @@ import { Popover } from '@components';
 import React from 'react';
 import styled from 'styled-components';
 
-import colors from '@src/alchemy-components/theme/foundations/colors';
 import { toLocalDateTimeString, toRelativeTimeString } from '@src/app/shared/time/timeUtils';
 
 const PopoverContent = styled.div`
-    color: ${colors.gray[500]};
+    color: ${(props) => props.theme.colors.textSecondary};
     font-size: 0.8rem;
 `;
 
 const Title = styled.div`
-    color: ${colors.gray[500]};
+    color: ${(props) => props.theme.colors.textSecondary};
     border-bottom: none;
     font-size: 0.8rem;
     font-weight: 600;

datahub-web-react/src/app/sharedV2/buttons/BackButton.tsx

@@ -7,10 +7,10 @@ import styled from 'styled-components';
 const StyledButton = styled(Button)`
     height: 25px;
     width: 25px;
-    color: ${(p) => p.theme.styles['primary-color']};
+    color: ${(p) => p.theme.colors.iconBrand};
     padding: 0px;
     border-radius: 20px;
-    border: 1px solid ${(p) => p.theme.styles['primary-color']};
+    border: 1px solid ${(p) => p.theme.colors.borderBrand};
     display: flex;
     align-items: center;
     justify-content: center;
@@ -19,8 +19,8 @@ const StyledButton = styled(Button)`
     margin-top: 2px;
 
     &:hover {
-        color: ${(p) => p.theme.styles['primary-color']};
-        border-color: ${(p) => p.theme.styles['primary-color']};
+        color: ${(p) => p.theme.colors.iconBrand};
+        border-color: ${(p) => p.theme.colors.borderBrand};
     }
 `;
 

datahub-web-react/src/app/sharedV2/cards/EntityCountCard.tsx

@@ -4,20 +4,19 @@ import { Link } from 'react-router-dom';
 import styled from 'styled-components/macro';
 
 import { generateColor } from '@app/entityV2/shared/components/styled/StyledTag';
-import { ANTD_GRAY, ANTD_GRAY_V2, REDESIGN_COLORS } from '@app/entityV2/shared/constants';
 import { formatNumber, formatNumberWithoutAbbreviation } from '@app/shared/formatNumber';
 
 const Card = styled(Link)`
     align-items: center;
-    background-color: ${ANTD_GRAY[1]};
-    border: 1.5px solid ${ANTD_GRAY_V2[5]};
+    background-color: ${(props) => props.theme.colors.bg};
+    border: 1.5px solid ${(props) => props.theme.colors.border};
     border-radius: 10px;
     display: flex;
     justify-content: start;
     min-width: 180px;
     padding: 16px;
     :hover {
-        border: 1.5px solid ${REDESIGN_COLORS.BLUE};
+        border: 1.5px solid ${(props) => props.theme.colors.borderInformation};
         cursor: pointer;
     }
 `;
@@ -28,7 +27,7 @@ const Text = styled.div`
 
 const Name = styled.div`
     font-size: 16px;
-    color: ${ANTD_GRAY[7]};
+    color: ${(props) => props.theme.colors.textTertiary};
     overflow: hidden;
     text-overflow: ellipsis;
     text-transform: capitalize;
@@ -39,7 +38,7 @@ const Name = styled.div`
 const IconWrapper = styled.div<{ color?: string; backgroundColor?: string }>`
     align-items: center;
     border-radius: 12px;
-    background-color: ${({ backgroundColor }) => backgroundColor || ANTD_GRAY[3]};
+    background-color: ${(props) => props.backgroundColor || props.theme.colors.bgSurface};
     display: flex;
     height: 50px;
     justify-content: center;
@@ -54,7 +53,7 @@ const IconWrapper = styled.div<{ color?: string; backgroundColor?: string }>`
 
 const Count = styled.div`
     font-size: 20px;
-    color: ${ANTD_GRAY[10]};
+    color: ${(props) => props.theme.colors.text};
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;

datahub-web-react/src/app/sharedV2/cards/components.tsx

@@ -1,17 +1,15 @@
 import styled from 'styled-components';
 
-import { ANTD_GRAY, ANTD_GRAY_V2, REDESIGN_COLORS } from '@app/entity/shared/constants';
-
 export const Card = styled.div`
-    background-color: ${ANTD_GRAY[1]};
-    border: 2px solid ${ANTD_GRAY_V2[5]};
+    background-color: ${(props) => props.theme.colors.bg};
+    border: 2px solid ${(props) => props.theme.colors.border};
     border-radius: 8px;
     cursor: pointer;
     display: flex;
     align-items: center;
 
     :hover {
-        border: 2px solid ${REDESIGN_COLORS.BLUE};
+        border: 2px solid ${(props) => props.theme.colors.borderInformation};
         cursor: pointer;
     }
 `;