Fixes #33023: evaluate neutral gray palette

[shah-harshit]

Describe your changes:

Fixes #33023

Updates the shared gray primitives to the proposed neutral scale:

• gray-25 through gray-950 now use the approved neutral values
• the core fallback palette, generated aliases, token references, and color handbook stay synchronized
• dark card/divider edges use an 8% white alpha so adjacent dark surfaces remain distinct without adding another solid gray layer

This PR intentionally contains only global palette and token changes. Home, AI Analytics, sidebar, card, icon, and interaction styling live in open-metadata/openmetadata-collate#6491 so OSS pages are not changed by this visual experiment.

Type of change:

• Improvement

High-level design:

• Light surfaces retain white cards over the neutral gray-25 page/canvas.
• Dark surfaces use gray-950 for the page, gray-900 for canvas/header/sidebar, gray-800 for cards, and gray-700 for raised surfaces.
• Semantic page treatments remain Collate-scoped while consuming these shared primitives.
• Custom gray-725 and gray-750 values remain unchanged because they are outside the proposed scale and have existing targeted uses.

Tests:

• The generated token files were refreshed after the palette update.
• Local test, lint, build, and runtime checks were not rerun for the latest revision at request; this draft is intended for visual evaluation with the dependent Collate PR.
• No backend or ingestion behavior changes.

UI screen recording / screenshots:

Visual validation is covered by open-metadata/openmetadata-collate#6491 on:

• / in light and dark mode
• /ai-dashboards in light and dark mode

Checklist:

• The PR is linked to GitHub issue Evaluate updated neutral gray palette in light and dark mode #33023.
• Generated palette and token reference files are included.
• Page-specific changes are excluded from OSS.

[gitar-bot]

⚠️ Edge Case: New gray-500 (#808080) fails WCAG AA for muted/placeholder text

The new gray-500 is #808080, which yields only ~3.95:1 contrast on a white background — below the WCAG 2.1 AA minimum of 4.5:1 for normal text. In light mode --color-text-quaternary, --color-text-placeholder, and --color-text-disabled all resolve to gray-500 (#808080), so placeholder, disabled, and muted body text become non-compliant (a regression from the old #717680 ≈ 4.6:1). The author already flags this in the PR body; before merge either lift these semantic tokens to a darker step (e.g. gray-600 #666666 ≈ 5.7:1) or darken gray-500 itself so the muted-text tokens clear 4.5:1.

_{Was this helpful? React with 👍 / 👎}

[gitar-bot]

⚠️ Bug: Tailwind prefix placed after variant breaks hover styles

In Tailwind v4 the configured prefix (tw:) must come first, before any variant. The new classes hover:tw:bg-primary_hover (ActivityFeedItem.tsx:196) and group-hover:tw:bg-secondary_hover (ActivityFeedItem.tsx:259) put the variant before the prefix, so Tailwind will not generate these utilities and the hover surfaces silently stop working. The replaced code used the correct order (tw:hover:bg-utility-gray-blue-50), and the rest of the repo consistently uses tw:hover: / tw:group-hover:. The new unit tests assert the literal wrong strings (toHaveClass('hover:tw:bg-primary_hover')), so they pass while masking the broken styling. Fix the class order to tw:hover:bg-primary_hover and tw:group-hover:bg-secondary_hover, and update the test expectations accordingly.

_{Was this helpful? React with 👍 / 👎}

[gitar-bot]

Code Review ⚠️ Changes requested 0 resolved / 2 findings

Updates the neutral gray palette for light and dark mode and migrates AI sidebar and Inbox surfaces to semantic tokens, but two critical issues prevent merge: the new gray-500 (#808080) fails WCAG AA contrast for muted and placeholder text (only 3.95:1 vs. required 4.5:1), and Tailwind class prefix placement is reversed (hover:tw: instead of tw:hover:), breaking hover styles on activity cards while masked by incorrect test assertions.

⚠️ Edge Case: New gray-500 (#808080) fails WCAG AA for muted/placeholder text

📄 openmetadata-ui-core-components/src/main/resources/ui/src/styles/globals.css:216 📄 openmetadata-ui/src/main/resources/ui/docs/colors.md:113-115

The new gray-500 is #808080, which yields only ~3.95:1 contrast on a white background — below the WCAG 2.1 AA minimum of 4.5:1 for normal text. In light mode --color-text-quaternary, --color-text-placeholder, and --color-text-disabled all resolve to gray-500 (#808080), so placeholder, disabled, and muted body text become non-compliant (a regression from the old #717680 ≈ 4.6:1). The author already flags this in the PR body; before merge either lift these semantic tokens to a darker step (e.g. gray-600 #666666 ≈ 5.7:1) or darken gray-500 itself so the muted-text tokens clear 4.5:1.

⚠️ Bug: Tailwind prefix placed after variant breaks hover styles

📄 openmetadata-ui/src/main/resources/ui/src/components/discovery/personal-space/InboxPage/components/ActivityFeedItem.tsx:196 📄 openmetadata-ui/src/main/resources/ui/src/components/discovery/personal-space/InboxPage/components/ActivityFeedItem.tsx:259 📄 openmetadata-ui/src/main/resources/ui/src/components/discovery/personal-space/InboxPage/components/ActivityFeedItem.test.tsx:181 📄 openmetadata-ui/src/main/resources/ui/src/components/discovery/personal-space/InboxPage/components/ActivityFeedItem.test.tsx:185 📄 openmetadata-ui/src/main/resources/ui/src/components/discovery/personal-space/InboxPage/components/ActivityFeedItem.test.tsx:202 📄 openmetadata-ui/src/main/resources/ui/src/components/discovery/personal-space/InboxPage/components/ActivityFeedItem.test.tsx:206

In Tailwind v4 the configured prefix (tw:) must come first, before any variant. The new classes hover:tw:bg-primary_hover (ActivityFeedItem.tsx:196) and group-hover:tw:bg-secondary_hover (ActivityFeedItem.tsx:259) put the variant before the prefix, so Tailwind will not generate these utilities and the hover surfaces silently stop working. The replaced code used the correct order (tw:hover:bg-utility-gray-blue-50), and the rest of the repo consistently uses tw:hover: / tw:group-hover:. The new unit tests assert the literal wrong strings (toHaveClass('hover:tw:bg-primary_hover')), so they pass while masking the broken styling. Fix the class order to tw:hover:bg-primary_hover and tw:group-hover:bg-secondary_hover, and update the test expectations accordingly.

Fix hover prefix order in the item Box className

isActive ? 'tw:bg-utility-brand-50' : 'tw:hover:bg-primary_hover'

Fix group-hover prefix order in the message Card className

'tw:bg-secondary tw:group-hover:bg-secondary_hover': !isActive,

🤖 Prompt for agents

Code Review: Updates the neutral gray palette for light and dark mode and migrates AI sidebar and Inbox surfaces to semantic tokens, but two critical issues prevent merge: the new gray-500 (#808080) fails WCAG AA contrast for muted and placeholder text (only 3.95:1 vs. required 4.5:1), and Tailwind class prefix placement is reversed (`hover:tw:` instead of `tw:hover:`), breaking hover styles on activity cards while masked by incorrect test assertions.

1. ⚠️ Edge Case: New gray-500 (#808080) fails WCAG AA for muted/placeholder text
   Files: openmetadata-ui-core-components/src/main/resources/ui/src/styles/globals.css:216, openmetadata-ui/src/main/resources/ui/docs/colors.md:113-115

   The new gray-500 is #808080, which yields only ~3.95:1 contrast on a white background — below the WCAG 2.1 AA minimum of 4.5:1 for normal text. In light mode `--color-text-quaternary`, `--color-text-placeholder`, and `--color-text-disabled` all resolve to gray-500 (#808080), so placeholder, disabled, and muted body text become non-compliant (a regression from the old #717680 ≈ 4.6:1). The author already flags this in the PR body; before merge either lift these semantic tokens to a darker step (e.g. gray-600 #666666 ≈ 5.7:1) or darken gray-500 itself so the muted-text tokens clear 4.5:1.

2. ⚠️ Bug: Tailwind prefix placed after variant breaks hover styles
   Files: openmetadata-ui/src/main/resources/ui/src/components/discovery/personal-space/InboxPage/components/ActivityFeedItem.tsx:196, openmetadata-ui/src/main/resources/ui/src/components/discovery/personal-space/InboxPage/components/ActivityFeedItem.tsx:259, openmetadata-ui/src/main/resources/ui/src/components/discovery/personal-space/InboxPage/components/ActivityFeedItem.test.tsx:181, openmetadata-ui/src/main/resources/ui/src/components/discovery/personal-space/InboxPage/components/ActivityFeedItem.test.tsx:185, openmetadata-ui/src/main/resources/ui/src/components/discovery/personal-space/InboxPage/components/ActivityFeedItem.test.tsx:202, openmetadata-ui/src/main/resources/ui/src/components/discovery/personal-space/InboxPage/components/ActivityFeedItem.test.tsx:206

   In Tailwind v4 the configured prefix (`tw:`) must come first, before any variant. The new classes `hover:tw:bg-primary_hover` (ActivityFeedItem.tsx:196) and `group-hover:tw:bg-secondary_hover` (ActivityFeedItem.tsx:259) put the variant before the prefix, so Tailwind will not generate these utilities and the hover surfaces silently stop working. The replaced code used the correct order (`tw:hover:bg-utility-gray-blue-50`), and the rest of the repo consistently uses `tw:hover:` / `tw:group-hover:`. The new unit tests assert the literal wrong strings (`toHaveClass('hover:tw:bg-primary_hover')`), so they pass while masking the broken styling. Fix the class order to `tw:hover:bg-primary_hover` and `tw:group-hover:bg-secondary_hover`, and update the test expectations accordingly.

   Fix (Fix hover prefix order in the item Box className):
   isActive ? 'tw:bg-utility-brand-50' : 'tw:hover:bg-primary_hover'

   Fix (Fix group-hover prefix order in the message Card className):
   'tw:bg-secondary tw:group-hover:bg-secondary_hover': !isActive,

Options

Display: compact → Counting what did not apply, without listing it.

Comment with these commands to change the behavior for this request:

Compact

gitar display:verbose

_{Was this helpful? React with 👍 / 👎 | Powered by Gitar — free for open source}

[shah-harshit]

Superseded by #33150 after renaming the source branch.