feat(ui): update colors to semantic tokens in home and settings folders by purnimagarg1 · Pull Request #16877 · datahub-project/datahub

purnimagarg1 · 2026-04-01T13:43:47Z

Linear ticket:
https://linear.app/acryl-data/issue/CAT-1661/update-colors-to-semantic-tokens-in-settings-and-home-folders

Description:

Updates colors to semantic tokens in the following folders:

homeV3
homeV2
settingsV2

codecov · 2026-04-01T13:50:11Z

Bundle Report

Changes will increase total bundle size by 1.99kB (0.01%) ⬆️. This is within the configured threshold ✅

Detailed changes

Bundle name	Size	Change
datahub-react-web-esm	22.74MB	1.99kB (0.01%) ⬆️

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`	1.99kB	12.48MB	0.02%

Files in assets/index-*.js:

./src/app/homeV2/content/tabs/discovery/sections/insight/cards/PopularGlossaryTerms.tsx → Total Size: 3.72kB
./src/app/homeV2/content/tabs/discovery/sections/Section.tsx → Total Size: 1.44kB
./src/app/homeV2/introduce/IntroduceYourselfLeftSidebar.tsx → Total Size: 1.49kB
./src/app/homeV2/layout/navBarRedesign/NavBarMenuItemGroup.tsx → Total Size: 955 bytes
./src/app/homeV2/action/announcement/Announcement.tsx → Total Size: 1.41kB
./src/app/homeV2/content/tabs/discovery/sections/dataProducts/DataProductCard.tsx → Total Size: 2.43kB
./src/app/homeV2/layout/CustomNavLink.tsx → Total Size: 2.18kB
./src/app/homeV2/action/announcement/Announcements.tsx → Total Size: 3.42kB
./src/app/homeV2/content/tabs/discovery/sections/platform/PlatformCard.tsx → Total Size: 2.43kB
./src/app/homeV2/content/tabs/discovery/sections/domains/DomainCard.tsx → Total Size: 2.7kB
./src/app/homeV2/introduce/IntroduceYourself.tsx → Total Size: 607 bytes
./src/app/homeV2/content/recent/EntityCardList.tsx → Total Size: 1.71kB
./src/app/homeV2/content/recent/EntityCard.tsx → Total Size: 2.44kB
./src/app/homeV2/layout/CenterContent.tsx → Total Size: 1.65kB
./src/app/homeV2/content/tabs/discovery/sections/onboarding/OnboardingCards.tsx → Total Size: 2.05kB
./src/app/homeV2/introduce/IntroduceYourselfMainContent.tsx → Total Size: 12.53kB
./src/app/homeV2/layout/NavLinks.tsx → Total Size: 348 bytes
./src/app/homeV2/layout/NavLinksMenu.tsx → Total Size: 7.88kB
./src/app/homeV2/content/recent/RecentActions.tsx → Total Size: 1.26kB
./src/app/homeV2/content/tabs/announcements/AnnouncementCard.tsx → Total Size: 1.51kB
./src/app/homeV2/layout/LeftSidebar.tsx → Total Size: 4.0kB
./src/app/homeV2/content/tabs/discovery/sections/insight/shared/InsightCard.tsx → Total Size: 1.32kB
./src/app/homeV2/content/tabs/discovery/sections/insight/cards/SearchListInsightCard.tsx → Total Size: 3.25kB
./src/app/homeV2/content/tabs/discovery/sections/insight/shared/InsightCardSkeleton.tsx → Total Size: 2.94kB
./src/app/homeV2/layout/navBarRedesign/NavBarMenuItem.tsx → Total Size: 3.98kB
./src/app/homeV2/layout/RightSidebar.tsx → Total Size: 1.47kB
./src/app/homeV2/content/HorizontalListSkeletons.tsx → Total Size: 1.41kB
./src/app/homeV2/layout/navBarRedesign/NavBarToggler.tsx → Total Size: 967 bytes
./src/app/homeV2/layout/navBarRedesign/NavSidebar.tsx → Total Size: 13.31kB
./src/app/homeV2/layout/navBarRedesign/NavBarMenuItemDropdown.tsx → Total Size: 3.43kB

alwaysmeticulous · 2026-04-01T13:59:09Z

✅ Meticulous spotted visual differences in 460 of 1446 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 8bd57ea Merge branch 'master' into pg--cat-1661-update-tokens-home-settings. This comment will update as new commits are pushed.}

github-actions · 2026-04-06T11:14:49Z

Linear: CAT-1733

codecov · 2026-04-06T15:59:41Z

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!

v-tarasevich-blitz-brain

Looks good to me
Nothing blocking, just a few suggestions/questions

v-tarasevich-blitz-brain · 2026-04-13T07:32:01Z


 const Card = styled.div`
-    border: 1px solid ${ANTD_GRAY[4]};
+    border: 1px solid ${(props) => props.theme.colors.bgSurface};


use border* colors

v-tarasevich-blitz-brain · 2026-04-13T07:49:02Z


    :hover {
-        border: 1.5px solid ${SEARCH_COLORS.LINK_BLUE};
+        border: 1.5px solid ${(props) => props.theme.colors.hyperlinks};


borderBrand

v-tarasevich-blitz-brain · 2026-04-13T07:50:36Z

 const SubHeader = styled.div`
    font-size: 14px;
-    color: ${ANTD_GRAY[5]};
+    color: ${(props) => props.theme.colors.border};


let's try with textTertiary

v-tarasevich-blitz-brain · 2026-04-13T07:56:22Z


    > .slick-dots li button {
-        background-color: #d9d9d9;
+        background-color: ${(props) => props.theme.colors.border};


do we have some more suitable button* token?

v-tarasevich-blitz-brain · 2026-04-13T07:58:43Z


 const Card = styled.div`
-    border: 1px solid ${ANTD_GRAY[4]};
+    border: 1px solid ${(props) => props.theme.colors.bgHover};


can we use border?

v-tarasevich-blitz-brain · 2026-04-13T08:43:02Z


    :hover {
-        ${(props) => props.showHover && 'background-color: #f5f7fa;'}
+        ${(props) => props.showHover && `background-color: ${props.theme.colors.bgSurface};`}


v-tarasevich-blitz-brain · 2026-04-13T08:53:07Z

@@ -58,7 +59,7 @@ export default function LinkModule(props: ModuleProps) {
                            ellipsis={{
                                tooltip: {
                                    color: 'white',


perhaps we can update this white too

v-tarasevich-blitz-brain · 2026-04-13T08:54:26Z


    justify-content: center;
-    background: ${colors.gray[1600]};
+    background: ${(props) => props.theme.colors.bgSurfaceNewNav};


can we use another tokens not related to new nav?

v-tarasevich-blitz-brain · 2026-04-13T09:03:34Z

    margin: 5px;
-    border: 1px solid ${colors.gray[100]};
    border-radius: 12px;
-    position: relative;


is it safe to remove?

v-tarasevich-blitz-brain · 2026-04-13T09:06:19Z

    border-radius: 12px;
-    background-color: ${colors.white};
+    background-color: ${(props) => props.theme.colors.bg};
+    ${(props) => props.theme.id === 'themeV2Dark' && 'opacity: 0;'}


what do you think if we change it to theme.id !== themeV2Light? I think this background supported only in light theme

…rs (#16877)

update colors to semantic tokens in homeV3 folder

2979f26

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

purnimagarg1 changed the title ~~feat(ui): update colors to semantic tokens in homeV3 folder~~ feat(ui): update colors to semantic tokens in home and settings folders Apr 1, 2026

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

vercel Bot deployed to Preview April 1, 2026 13:59 View deployment

Merge branch 'master' into pg--cat-1661-update-tokens-home-settings

d8170d3

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

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

update colors to semantic tokens in homeV2 folder

9ac9c54

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

update colors to semantic tokens in settingsV2 folder

f58f662

purnimagarg1 marked this pull request as ready for review April 6, 2026 11:14

Merge branch 'master' into pg--cat-1661-update-tokens-home-settings

6c31453

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

vercel Bot deployed to Preview April 6, 2026 11:31 View deployment

fix tests

41554dd

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

vercel Bot deployed to Preview April 6, 2026 16:04 View deployment

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

fix issues found via meticulous

6fbd00f

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

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

fix more issues

f628db3

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

vercel Bot deployed to Preview April 7, 2026 14:20 View deployment

Merge branch 'master' into pg--cat-1661-update-tokens-home-settings

26985dc

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

vercel Bot deployed to Preview April 10, 2026 14:24 View deployment

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

View reviewed changes

Merge branch 'master' into pg--cat-1661-update-tokens-home-settings

b6bb67f

github-actions Bot deployed to datahub-project-web-react (Preview) April 13, 2026 11:51 View deployment

Merge branch 'master' into pg--cat-1661-update-tokens-home-settings

8bd57ea

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

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

purnimagarg1 merged commit 791577c into master Apr 13, 2026
44 checks passed

purnimagarg1 deleted the pg--cat-1661-update-tokens-home-settings branch April 13, 2026 14:01

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

feat(ui): update colors to semantic tokens in home and settings folde…

e75df3a

…rs (#16877)

Conversation

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

Uh oh!

Uh oh!

codecov Bot commented Apr 1, 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!

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

Uh oh!

Uh oh!

github-actions Bot commented Apr 6, 2026

Uh oh!

codecov Bot commented Apr 6, 2026

Codecov Report

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

purnimagarg1 commented Apr 1, 2026 •

edited

Loading

codecov Bot commented Apr 1, 2026 •

edited

Loading

alwaysmeticulous Bot commented Apr 1, 2026 •

edited

Loading