feat(ui): migrate colors to semantic tokens in sharedV2 folder by purnimagarg1 · Pull Request #16861 · datahub-project/datahub

purnimagarg1 · 2026-03-31T11:24:42Z

Linear ticket:
https://linear.app/acryl-data/issue/CAT-1659/update-colors-to-semantic-tokens-in-shared-folder

github-actions · 2026-03-31T11:24:53Z

Linear: CAT-1669

alwaysmeticulous · 2026-03-31T11:30:25Z

✅ Meticulous spotted visual differences in 94 of 1606 screens tested, but all differences have already been approved: view differences detected.

Meticulous evaluated ~9 hours of user flows against your PR.

_{Last updated for commit d8af654 fix issue found from meticulous. This comment will update as new commits are pushed.}

codecov · 2026-03-31T11:40:19Z

Bundle Report

Changes will increase total bundle size by 624 bytes (0.0%) ⬆️. This is within the configured threshold ✅

Detailed changes

Bundle name	Size	Change
datahub-react-web-esm	22.71MB	624 bytes (0.0%) ⬆️

Affected Assets, Files, and Routes:

view changes for bundle: datahub-react-web-esm

Assets Changed:

Asset Name	Size Change	Total Size	Change (%)
`assets/index-*.js`	624 bytes	12.46MB	0.01%

Files in assets/index-*.js:

./src/app/sharedV2/cards/EntityCountCard.tsx → Total Size: 2.3kB
./src/app/sharedV2/tags/DomainLink.tsx → Total Size: 2.28kB
./src/app/lineageV2/LineageEntityNode/SchemaFieldNodeContents.tsx → Total Size: 10.22kB
./src/app/sharedV2/search/DownloadButton.tsx → Total Size: 667 bytes
./src/app/sharedV2/icons/InfoPopover.tsx → Total Size: 666 bytes
./src/app/sharedV2/forms/FieldLabel.tsx → Total Size: 998 bytes
./src/app/sharedV2/cards/components.tsx → Total Size: 361 bytes
./src/app/sharedV2/search/EditButton.tsx → Total Size: 536 bytes
./src/app/sharedV2/tags/term/TermContent.tsx → Total Size: 5.82kB
./src/app/sharedV2/buttons/BackButton.tsx → Total Size: 970 bytes
./src/app/sharedV2/tags/TagTermGroup.tsx → Total Size: 7.95kB
./src/app/sharedV2/carousel/HorizontalScroller.tsx → Total Size: 4.28kB
./src/app/sharedV2/icons/PlatformIcon.tsx → Total Size: 2.03kB
./src/app/sharedV2/TimestampPopover.tsx → Total Size: 1.38kB
./src/app/previewV2/NotesIcon.tsx → Total Size: 794 bytes
./src/app/sharedV2/carousel/Carousel.tsx → Total Size: 4.38kB
./src/app/sharedV2/modals/ConfirmationModal.tsx → Total Size: 1.28kB
./src/app/sharedV2/ErrorHandling/ErrorFallback.tsx → Total Size: 3.48kB
./src/app/sharedV2/sidebar/components.tsx → Total Size: 937 bytes

codecov · 2026-04-01T09:06:31Z

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ All tests successful. No failed tests found.

📢 Thoughts on this report? Let us know!

…-folder

Miss tab

v-tarasevich-blitz-brain

I have a few non-blocking suggestions about tokens. It can be improved in the follow-ups

v-tarasevich-blitz-brain · 2026-04-09T16:49:42Z

 }>`
    align-items: center;
-    background-color: white;
+    background-color: ${(props) => props.theme.colors.bgSurface};


i see it was white so maybe we can use just bg?

v-tarasevich-blitz-brain · 2026-04-09T17:07:04Z

 const IconsWrapper = styled.div`
    align-items: center;
-    color: ${ANTD_GRAY[10]};
+    color: ${(props) => props.theme.colors.text};


let's use just icon

v-tarasevich-blitz-brain · 2026-04-09T17:11:28Z

        <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} />


I think it's better to use transparent here

v-tarasevich-blitz-brain · 2026-04-09T17:21:01Z

    :hover {
-        color: ${REDESIGN_COLORS.WHITE};
-        background-color: ${(props) => props.theme.styles['primary-color']};
+        color: ${(props) => props.theme.colors.bg};


let's use textBrandOnBgFill

v-tarasevich-blitz-brain · 2026-04-09T17:21:36Z

    &:hover {
-        color: ${REDESIGN_COLORS.WHITE};
-        background-color: ${(props) => props.theme.styles['primary-color']};
+        color: ${(props) => props.theme.colors.bg};


textBrandOnBgFill

v-tarasevich-blitz-brain · 2026-04-09T17:32:30Z

            type="ghost"
            deg={isOpen ? 90 : 0}
-            icon={<ChevronRightIcon style={{ color: 'black' }} />}
+            icon={<ChevronRightIcon style={{ color: theme.colors.text }} />}


let's use just icon

v-tarasevich-blitz-brain · 2026-04-09T17:34:40Z


 const PropagateThunderbolt = styled(ThunderboltOutlined)`
-    color: rgba(0, 143, 100, 0.95);
+    color: ${(props) => props.theme.colors.textSuccess};


can we use iconSuccess here? it has green200 instead of green300

v-tarasevich-blitz-brain · 2026-04-09T17:36:39Z

    :hover {
        cursor: pointer;
-        color: ${REDESIGN_COLORS.LINK_HOVER_BLUE};
+        color: ${(props) => props.theme.colors.hyperlinks};


textBrand?

v-tarasevich-blitz-brain · 2026-04-09T17:37:06Z


    :hover {
-        color: ${REDESIGN_COLORS.LINK_HOVER_BLUE};
+        color: ${(props) => props.theme.colors.hyperlinks};


v-tarasevich-blitz-brain · 2026-04-09T17:39:21Z

    },
 }));

+const renderWithTheme = (ui: React.ReactElement) => render(<CustomThemeProvider>{ui}</CustomThemeProvider>);


can it be usable in other tests? perhaps we can move it in some utils for tests

github-actions Bot added the product PR or Issue related to the DataHub UI/UX label Mar 31, 2026

github-actions Bot deployed to datahub-project-web-react (Preview) March 31, 2026 11:29 View deployment

vercel Bot deployed to Preview March 31, 2026 11:38 View deployment

maggiehays added the needs-review Label for PRs that need review from a maintainer. label Mar 31, 2026

purnimagarg1 changed the title ~~feat(ui): migrate colors to semantic tokens in shared folder~~ feat(ui): migrate colors to semantic tokens in sharedV2 folder Apr 1, 2026

github-actions Bot deployed to datahub-project-web-react (Preview) April 1, 2026 08:57 View deployment

vercel Bot deployed to Preview April 1, 2026 09:08 View deployment

github-actions Bot deployed to datahub-project-web-react (Preview) April 1, 2026 10:53 View deployment

vercel Bot deployed to Preview April 1, 2026 11:04 View deployment

Base automatically changed from pg--cat-1551-update-components-semantic-tokens to master April 1, 2026 13:21

purnimagarg1 added 2 commits April 2, 2026 12:31

migrate colors to semantic tokens in sharedV2 folder

ece3bef

fix tests

b88513d

purnimagarg1 force-pushed the pg--cat-1659-update-semantic-tokens-shared-folder branch from 3009b24 to b88513d Compare April 2, 2026 07:31

github-actions Bot deployed to datahub-project-web-react (Preview) April 2, 2026 07:36 View deployment

vercel Bot deployed to Preview April 2, 2026 07:47 View deployment

Merge branch 'master' into pg--cat-1659-update-semantic-tokens-shared…

a95c34e

…-folder

github-actions Bot deployed to datahub-project-web-react (Preview) April 6, 2026 10:10 View deployment

fix lint issues after the added rule

7075826

github-actions Bot deployed to datahub-project-web-react (Preview) April 6, 2026 10:18 View deployment

vercel Bot deployed to Preview April 6, 2026 10:30 View deployment

fix issue found from meticulous

d8af654

github-actions Bot deployed to datahub-project-web-react (Preview) April 7, 2026 12:23 View deployment

vercel Bot deployed to Preview April 7, 2026 12:32 View deployment

This comment was marked as off-topic.

Sign in to view

v-tarasevich-blitz-brain self-requested a review April 9, 2026 16:35

v-tarasevich-blitz-brain approved these changes Apr 9, 2026

View reviewed changes

maggiehays added pending-submitter-merge and removed needs-review Label for PRs that need review from a maintainer. labels Apr 9, 2026

purnimagarg1 merged commit aca3fe0 into master Apr 10, 2026
39 checks passed

purnimagarg1 deleted the pg--cat-1659-update-semantic-tokens-shared-folder branch April 10, 2026 13:29

alokr-dhub pushed a commit that referenced this pull request Apr 23, 2026

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

41496fa

Conversation

purnimagarg1 commented Mar 31, 2026

Uh oh!

github-actions Bot commented Mar 31, 2026

Uh oh!

alwaysmeticulous Bot commented Mar 31, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

codecov Bot commented Mar 31, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Bundle Report

Affected Assets, Files, and Routes:

Assets Changed:

Uh oh!

codecov Bot commented Apr 1, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

This comment was marked as off-topic.

Uh oh!

v-tarasevich-blitz-brain left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

alwaysmeticulous Bot commented Mar 31, 2026 •

edited

Loading

codecov Bot commented Mar 31, 2026 •

edited

Loading

codecov Bot commented Apr 1, 2026 •

edited

Loading