Skip to content

Commit 41496fa

Browse files
purnimagarg1alokr-dhub
purnimagarg1
authored and
alokr-dhub
committed
feat(ui): migrate colors to semantic tokens in sharedV2 folder (#16861)
1 parent ffd5a14 commit 41496fa

21 files changed

Lines changed: 101 additions & 142 deletions

File tree

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

Lines changed: 13 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import { describe, expect, it, vi } from 'vitest';
55

66
import ModuleMenu from '@app/homeV3/module/components/ModuleMenu';
77
import { ModulePositionInput } from '@app/homeV3/template/types';
8+
import CustomThemeProvider from '@src/CustomThemeProvider';
89

910
import { PageModuleFragment } from '@graphql/template.generated';
1011
import { DataHubPageModuleType, EntityType, PageModuleScope } from '@types';
@@ -61,6 +62,8 @@ vi.mock('@components', () => ({
6162
},
6263
}));
6364

65+
const renderWithTheme = (ui: React.ReactElement) => render(<CustomThemeProvider>{ui}</CustomThemeProvider>);
66+
6467
describe('ModuleMenu', () => {
6568
const mockModule: PageModuleFragment = {
6669
urn: 'urn:li:dataHubPageModule:test',
@@ -83,7 +86,7 @@ describe('ModuleMenu', () => {
8386
});
8487

8588
it('should render menu with correct items', () => {
86-
render(<ModuleMenu module={mockModule} position={mockPosition} />);
89+
renderWithTheme(<ModuleMenu module={mockModule} position={mockPosition} />);
8790

8891
// Click to open the dropdown
8992
const menuButton = screen.getByTestId('icon');
@@ -96,7 +99,7 @@ describe('ModuleMenu', () => {
9699
});
97100

98101
it('should call removeModule when remove is clicked', () => {
99-
render(<ModuleMenu module={mockModule} position={mockPosition} />);
102+
renderWithTheme(<ModuleMenu module={mockModule} position={mockPosition} />);
100103

101104
// Click to open the dropdown
102105
const menuButton = screen.getByTestId('icon');
@@ -133,7 +136,7 @@ describe('ModuleMenu', () => {
133136
rowSide: 'right',
134137
};
135138

136-
render(<ModuleMenu module={differentModule} position={differentPosition} />);
139+
renderWithTheme(<ModuleMenu module={differentModule} position={differentPosition} />);
137140

138141
// Click to open the dropdown
139142
const menuButton = screen.getByTestId('icon');
@@ -154,7 +157,7 @@ describe('ModuleMenu', () => {
154157
});
155158

156159
it('should render remove option with red color', () => {
157-
render(<ModuleMenu module={mockModule} position={mockPosition} />);
160+
renderWithTheme(<ModuleMenu module={mockModule} position={mockPosition} />);
158161

159162
// Click to open the dropdown
160163
const menuButton = screen.getByTestId('icon');
@@ -173,7 +176,7 @@ describe('ModuleMenu', () => {
173176
moduleIndex: 2,
174177
};
175178

176-
render(<ModuleMenu module={mockModule} position={positionWithModuleIndex} />);
179+
renderWithTheme(<ModuleMenu module={mockModule} position={positionWithModuleIndex} />);
177180

178181
// Click to open the dropdown
179182
const menuButton = screen.getByTestId('icon');
@@ -205,7 +208,7 @@ describe('ModuleMenu', () => {
205208
},
206209
};
207210

208-
render(<ModuleMenu module={moduleWithLongName} position={mockPosition} />);
211+
renderWithTheme(<ModuleMenu module={moduleWithLongName} position={mockPosition} />);
209212

210213
// Click to open the dropdown
211214
const menuButton = screen.getByTestId('icon');
@@ -231,7 +234,7 @@ describe('ModuleMenu', () => {
231234
// rowSide and moduleIndex are optional/undefined
232235
};
233236

234-
render(<ModuleMenu module={mockModule} position={minimalPosition} />);
237+
renderWithTheme(<ModuleMenu module={mockModule} position={minimalPosition} />);
235238

236239
// Click to open the dropdown
237240
const menuButton = screen.getByTestId('icon');
@@ -263,7 +266,7 @@ describe('ModuleMenu', () => {
263266
},
264267
};
265268

266-
render(<ModuleMenu module={moduleWithSpecialChars} position={mockPosition} />);
269+
renderWithTheme(<ModuleMenu module={moduleWithSpecialChars} position={mockPosition} />);
267270

268271
// Click to open the dropdown
269272
const menuButton = screen.getByTestId('icon');
@@ -284,7 +287,7 @@ describe('ModuleMenu', () => {
284287
});
285288

286289
it('should handle edit option (placeholder functionality)', () => {
287-
render(<ModuleMenu module={mockModule} position={mockPosition} />);
290+
renderWithTheme(<ModuleMenu module={mockModule} position={mockPosition} />);
288291

289292
// Click to open the dropdown
290293
const menuButton = screen.getByTestId('icon');
@@ -306,7 +309,7 @@ describe('ModuleMenu', () => {
306309
});
307310

308311
it('should handle multiple rapid clicks on remove', () => {
309-
render(<ModuleMenu module={mockModule} position={mockPosition} />);
312+
renderWithTheme(<ModuleMenu module={mockModule} position={mockPosition} />);
310313

311314
// Click to open the dropdown
312315
const menuButton = screen.getByTestId('icon');

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

Lines changed: 12 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,8 @@ import { Skeleton, Spin } from 'antd';
44
import React from 'react';
55
import { Link } from 'react-router-dom';
66
import { Handle, Position } from 'reactflow';
7-
import styled from 'styled-components';
7+
import styled, { useTheme } from 'styled-components';
88

9-
import { ANTD_GRAY, LINEAGE_COLORS, REDESIGN_COLORS } from '@app/entityV2/shared/constants';
109
import ContainerPath from '@app/lineageV2/LineageEntityNode/ContainerPath';
1110
import { ContractLineageButton } from '@app/lineageV2/LineageEntityNode/ContractLineageButton';
1211
import { ExpandLineageButton } from '@app/lineageV2/LineageEntityNode/ExpandLineageButton';
@@ -15,7 +14,6 @@ import NodeSkeleton from '@app/lineageV2/LineageEntityNode/NodeSkeleton';
1514
import { FetchStatus } from '@app/lineageV2/common';
1615
import { downgradeV2FieldPath, useGetLineageUrl } from '@app/lineageV2/lineageUtils';
1716
import { FetchedEntityV2 } from '@app/lineageV2/types';
18-
import { COLORS } from '@app/sharedV2/colors';
1917
import getTypeIcon from '@app/sharedV2/icons/getTypeIcon';
2018
import OverflowTitle from '@app/sharedV2/text/OverflowTitle';
2119
import { useEntityRegistryV2 } from '@app/useEntityRegistry';
@@ -26,7 +24,6 @@ import LinkOut from '@images/link-out.svg?react';
2624

2725
export const SCHEMA_FIELD_NODE_HEIGHT = 80;
2826
export const SCHEMA_FIELD_NODE_WIDTH = 240;
29-
const NODE_COLOR = COLORS.blue_7;
3027

3128
const NodeWrapper = styled.div<{
3229
selected: boolean;
@@ -36,15 +33,15 @@ const NodeWrapper = styled.div<{
3633
isSearchedEntity: boolean;
3734
}>`
3835
align-items: center;
39-
background-color: white;
36+
background-color: ${(props) => props.theme.colors.bgSurface};
4037
border: 1px solid
41-
${({ color, selected, isGhost }) => {
38+
${({ color, selected, isGhost, theme }) => {
4239
if (selected) return color;
43-
if (isGhost) return `${LINEAGE_COLORS.NODE_BORDER}50`;
44-
return LINEAGE_COLORS.NODE_BORDER;
40+
if (isGhost) return `${theme.colors.border}50`;
41+
return theme.colors.border;
4542
}};
4643
box-shadow: ${({ isSearchedEntity, theme }) =>
47-
isSearchedEntity ? `0 0 4px 4px ${theme.styles['primary-color']}95` : 'none'};
44+
isSearchedEntity ? `0 0 4px 4px ${theme.colors.borderBrand}95` : 'none'};
4845
outline: ${({ color, selected }) => (selected ? `1px solid ${color}` : 'none')};
4946
border-left: none;
5047
border-radius: 6px;
@@ -102,7 +99,7 @@ const CustomHandle = styled(Handle)<{ position: Position }>`
10299

103100
const IconsWrapper = styled.div`
104101
align-items: center;
105-
color: ${ANTD_GRAY[10]};
102+
color: ${(props) => props.theme.colors.text};
106103
display: flex;
107104
flex-direction: column;
108105
font-size: 24px;
@@ -144,7 +141,7 @@ const ParentLine = styled.span`
144141
height: min-content;
145142
gap: 4px;
146143
147-
color: ${REDESIGN_COLORS.SUBTITLE};
144+
color: ${(props) => props.theme.colors.text};
148145
font-weight: 600;
149146
`;
150147

@@ -193,7 +190,7 @@ const ColumnLinkWrapper = styled(Link)`
193190
color: inherit;
194191
195192
:hover {
196-
color: ${(props) => props.theme.styles['primary-color']};
193+
color: ${(props) => props.theme.colors.textHover};
197194
}
198195
`;
199196

@@ -237,6 +234,8 @@ export default function SchemaFieldNodeContents({
237234
ignoreSchemaFieldStatus,
238235
}: Props) {
239236
const entityRegistry = useEntityRegistryV2();
237+
const theme = useTheme();
238+
const NODE_COLOR = theme.colors.chartsInformationLow;
240239

241240
const isExpandedDownstream = isExpanded?.[LineageDirection.Downstream];
242241
const isExpandedUpstream = isExpanded?.[LineageDirection.Upstream];
@@ -248,7 +247,7 @@ export default function SchemaFieldNodeContents({
248247
const parentLineageUrl = useGetLineageUrl(parent?.urn, parent?.type);
249248
const lineageUrl = useGetLineageUrl(urn, EntityType.SchemaField);
250249

251-
const highlightColor = isSearchedEntity ? REDESIGN_COLORS.YELLOW_500 : REDESIGN_COLORS.YELLOW_200;
250+
const highlightColor = isSearchedEntity ? theme.colors.textWarning : theme.colors.bgSurfaceWarning;
252251
const contents = (
253252
<NodeWrapper
254253
selected={selected}

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

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,13 +4,12 @@ import React from 'react';
44
import styled from 'styled-components';
55

66
import { pluralize } from '@app/shared/textUtil';
7-
import { COLORS } from '@app/sharedV2/colors';
87

98
import { Post } from '@types';
109

1110
const IconWrapper = styled.div<{ count: number }>`
1211
display: flex;
13-
color: ${COLORS.blue_6};
12+
color: ${(props) => props.theme.colors.iconInformation};
1413
font-size: 20px;
1514
line-height: 1;
1615
`;

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

Lines changed: 9 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { Button, Text } from '@components';
22
import React from 'react';
33
import { useHistory } from 'react-router';
4-
import styled, { css } from 'styled-components';
4+
import styled, { css, useTheme } from 'styled-components';
55

66
type ErrorFallbackProps = {
77
variant?: ErrorVariant;
@@ -15,15 +15,15 @@ const getVariantStyles = (variant: ErrorVariant) => {
1515
if (variant === 'route') {
1616
return css`
1717
border-radius: ${(props) => props.theme.styles['border-radius-navbar-redesign']};
18-
box-shadow: ${(props) => props.theme.styles['box-shadow-navbar-redesign']};
18+
box-shadow: ${(props) => props.theme.colors.shadowSm};
1919
margin: 5px;
2020
`;
2121
}
2222
return '';
2323
};
2424

2525
const Container = styled.div<{ variant?: ErrorVariant }>`
26-
background-color: white;
26+
background-color: ${(props) => props.theme.colors.bg};
2727
display: flex;
2828
flex-direction: column;
2929
align-items: center;
@@ -55,24 +55,25 @@ const TextContainer = styled.div`
5555

5656
const ErrorFallback: React.FC<ErrorFallbackProps> = ({ variant, actionMessage = DEFAULT_MESSAGE }) => {
5757
const history = useHistory();
58+
const theme = useTheme();
5859
return (
5960
<Container variant={variant}>
6061
<svg width="200" height="200" viewBox="0 0 200 200" fill="none" xmlns="http://www.w3.org/2000/svg">
61-
<rect width="200" height="200" rx="100" fill="#F9FAFC" />
62+
<rect width="200" height="200" rx="100" fill={theme.colors.bgSurface} />
6263
<path
6364
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"
64-
fill="#67739E"
65+
fill={theme.colors.icon}
6566
/>
6667
</svg>
6768
<TextContainer>
68-
<Text color="gray" weight="bold" size="xl">
69+
<Text weight="bold" size="xl" style={{ color: theme.colors.textSecondary }}>
6970
Whoops!
7071
</Text>
7172
<TextContainer>
72-
<Text color="gray" size="lg">
73+
<Text size="lg" style={{ color: theme.colors.textSecondary }}>
7374
Something didn&apos;t go as planned.
7475
</Text>
75-
<Text color="gray" size="lg">
76+
<Text size="lg" style={{ color: theme.colors.textSecondary }}>
7677
{actionMessage}
7778
</Text>
7879
</TextContainer>

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

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,16 +2,15 @@ import { Popover } from '@components';
22
import React from 'react';
33
import styled from 'styled-components';
44

5-
import colors from '@src/alchemy-components/theme/foundations/colors';
65
import { toLocalDateTimeString, toRelativeTimeString } from '@src/app/shared/time/timeUtils';
76

87
const PopoverContent = styled.div`
9-
color: ${colors.gray[500]};
8+
color: ${(props) => props.theme.colors.textSecondary};
109
font-size: 0.8rem;
1110
`;
1211

1312
const Title = styled.div`
14-
color: ${colors.gray[500]};
13+
color: ${(props) => props.theme.colors.textSecondary};
1514
border-bottom: none;
1615
font-size: 0.8rem;
1716
font-weight: 600;

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

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -7,10 +7,10 @@ import styled from 'styled-components';
77
const StyledButton = styled(Button)`
88
height: 25px;
99
width: 25px;
10-
color: ${(p) => p.theme.styles['primary-color']};
10+
color: ${(p) => p.theme.colors.iconBrand};
1111
padding: 0px;
1212
border-radius: 20px;
13-
border: 1px solid ${(p) => p.theme.styles['primary-color']};
13+
border: 1px solid ${(p) => p.theme.colors.borderBrand};
1414
display: flex;
1515
align-items: center;
1616
justify-content: center;
@@ -19,8 +19,8 @@ const StyledButton = styled(Button)`
1919
margin-top: 2px;
2020
2121
&:hover {
22-
color: ${(p) => p.theme.styles['primary-color']};
23-
border-color: ${(p) => p.theme.styles['primary-color']};
22+
color: ${(p) => p.theme.colors.iconBrand};
23+
border-color: ${(p) => p.theme.colors.borderBrand};
2424
}
2525
`;
2626

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

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -4,20 +4,19 @@ import { Link } from 'react-router-dom';
44
import styled from 'styled-components/macro';
55

66
import { generateColor } from '@app/entityV2/shared/components/styled/StyledTag';
7-
import { ANTD_GRAY, ANTD_GRAY_V2, REDESIGN_COLORS } from '@app/entityV2/shared/constants';
87
import { formatNumber, formatNumberWithoutAbbreviation } from '@app/shared/formatNumber';
98

109
const Card = styled(Link)`
1110
align-items: center;
12-
background-color: ${ANTD_GRAY[1]};
13-
border: 1.5px solid ${ANTD_GRAY_V2[5]};
11+
background-color: ${(props) => props.theme.colors.bg};
12+
border: 1.5px solid ${(props) => props.theme.colors.border};
1413
border-radius: 10px;
1514
display: flex;
1615
justify-content: start;
1716
min-width: 180px;
1817
padding: 16px;
1918
:hover {
20-
border: 1.5px solid ${REDESIGN_COLORS.BLUE};
19+
border: 1.5px solid ${(props) => props.theme.colors.borderInformation};
2120
cursor: pointer;
2221
}
2322
`;
@@ -28,7 +27,7 @@ const Text = styled.div`
2827

2928
const Name = styled.div`
3029
font-size: 16px;
31-
color: ${ANTD_GRAY[7]};
30+
color: ${(props) => props.theme.colors.textTertiary};
3231
overflow: hidden;
3332
text-overflow: ellipsis;
3433
text-transform: capitalize;
@@ -39,7 +38,7 @@ const Name = styled.div`
3938
const IconWrapper = styled.div<{ color?: string; backgroundColor?: string }>`
4039
align-items: center;
4140
border-radius: 12px;
42-
background-color: ${({ backgroundColor }) => backgroundColor || ANTD_GRAY[3]};
41+
background-color: ${(props) => props.backgroundColor || props.theme.colors.bgSurface};
4342
display: flex;
4443
height: 50px;
4544
justify-content: center;
@@ -54,7 +53,7 @@ const IconWrapper = styled.div<{ color?: string; backgroundColor?: string }>`
5453

5554
const Count = styled.div`
5655
font-size: 20px;
57-
color: ${ANTD_GRAY[10]};
56+
color: ${(props) => props.theme.colors.text};
5857
overflow: hidden;
5958
text-overflow: ellipsis;
6059
white-space: nowrap;

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

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,15 @@
11
import styled from 'styled-components';
22

3-
import { ANTD_GRAY, ANTD_GRAY_V2, REDESIGN_COLORS } from '@app/entity/shared/constants';
4-
53
export const Card = styled.div`
6-
background-color: ${ANTD_GRAY[1]};
7-
border: 2px solid ${ANTD_GRAY_V2[5]};
4+
background-color: ${(props) => props.theme.colors.bg};
5+
border: 2px solid ${(props) => props.theme.colors.border};
86
border-radius: 8px;
97
cursor: pointer;
108
display: flex;
119
align-items: center;
1210
1311
:hover {
14-
border: 2px solid ${REDESIGN_COLORS.BLUE};
12+
border: 2px solid ${(props) => props.theme.colors.borderInformation};
1513
cursor: pointer;
1614
}
1715
`;

0 commit comments

Comments
 (0)