Migration: replace mui theme colors with tailwind theme colors

[Rohit0301]

Describe your changes:

Fixes 3275

I worked on ... because ...

Type of change:

• Bug fix
• Improvement
• New feature
• Breaking change (fix or feature that would cause existing functionality to not work as expected)
• Documentation

Checklist:

• I have read the CONTRIBUTING document.
• My PR title is Fixes <issue-number>: <short explanation>
• I have commented on my code, particularly in hard-to-understand areas.
• For JSON Schema changes: I updated the migration scripts or explained why it is not needed.

[github-actions]

Jest test Coverage

UI tests summary

Lines	Statements	Branches	Functions
	65.01% (58082/89330)	44.8% (30712/68547)	47.8% (9196/19235)

[github-actions]

🟡 Playwright Results — all passed (17 flaky)

✅ 3416 passed · ❌ 0 failed · 🟡 17 flaky · ⏭️ 183 skipped

Shard	Passed	Failed	Flaky	Skipped
🟡 Shard 1	453	0	2	2
✅ Shard 2	305	0	0	1
🟡 Shard 3	676	0	5	33
🟡 Shard 4	702	0	4	41
🟡 Shard 5	670	0	2	73
🟡 Shard 6	610	0	4	33

🟡 17 flaky test(s) (passed on retry)

• Features/CustomizeDetailPage.spec.ts › Table - customization should work (shard 1, 1 retry)
• Features/CustomizeDetailPage.spec.ts › Database Schema - customization should work (shard 1, 1 retry)
• Features/BulkImport.spec.ts › Database (shard 3, 1 retry)
• Features/DataQuality/TestCaseIncidentPermissions.spec.ts › User with TEST_CASE.EDIT_ALL can see edit icon on incidents (shard 3, 1 retry)
• Features/DataQuality/TestCaseResultPermissions.spec.ts › User with only VIEW cannot PATCH results (shard 3, 1 retry)
• Features/ImpactAnalysis.spec.ts › Verify Upstream connections (shard 3, 1 retry)
• Features/Permissions/GlossaryPermissions.spec.ts › Team-based permissions work correctly (shard 3, 1 retry)
• Pages/Customproperties-part2.spec.ts › entityReferenceList shows item count, scrollable list, no expand toggle (shard 4, 1 retry)
• Pages/DomainUIInteractions.spec.ts › Add owner to data product via UI (shard 4, 1 retry)
• Pages/Entity.spec.ts › Set & update column-level custom property (shard 4, 1 retry)
• Pages/Entity.spec.ts › Column detail panel data type display and nested column navigation (shard 4, 1 retry)
• Pages/Entity.spec.ts › Tier Add, Update and Remove (shard 5, 1 retry)
• Pages/ExplorePageRightPanel.spec.ts › Should verify deleted user not visible in owner selection for table (shard 5, 1 retry)
• Pages/HyperlinkCustomProperty.spec.ts › should show No Data placeholder when hyperlink has no value (shard 6, 1 retry)
• Pages/ODCSImportExport.spec.ts › Import ODCS full contract and export both formats (shard 6, 1 retry)
• Pages/ODCSImportExport.spec.ts › Multi-object ODCS contract - object selector shows all schema objects (shard 6, 1 retry)
• Pages/Users.spec.ts › Permissions for table details page for Data Consumer (shard 6, 1 retry)

📦 Download artifacts

How to debug locally

# Download playwright-test-results-<shard> artifact and unzip
npx playwright show-trace path/to/trace.zip    # view trace

[gitar-bot]

💡 Bug: rgba() used with 3 args instead of rgb()

The constant EDGE_COLOR_DEFAULT = 'rgba(177, 177, 183)' uses rgba() with only 3 arguments. The rgba() function expects 4 arguments (r, g, b, alpha). While most modern browsers tolerate this, it's technically invalid CSS and should be rgb(177, 177, 183). This is a pre-existing issue carried over from the old inline value, but since you're extracting it into a named constant, it's a good opportunity to fix it.

Suggested fix:

const EDGE_COLOR_DEFAULT = 'rgb(177, 177, 183)';

_{Was this helpful? React with 👍 / 👎 | Reply gitar fix to apply this suggestion}

[gitar-bot]

Code Review 👍 Approved with suggestions 1 resolved / 2 findings

Migrates MUI theme colors to Tailwind theme colors, with test CSS variable naming now correctly aligned to source constants. Consider using rgb() instead of rgba() for the EDGE_COLOR_DEFAULT constant since it doesn't specify an alpha channel.

💡 Bug: rgba() used with 3 args instead of rgb()

📄 openmetadata-ui/src/main/resources/ui/src/utils/EdgeStyleUtils.ts:18

The constant EDGE_COLOR_DEFAULT = 'rgba(177, 177, 183)' uses rgba() with only 3 arguments. The rgba() function expects 4 arguments (r, g, b, alpha). While most modern browsers tolerate this, it's technically invalid CSS and should be rgb(177, 177, 183). This is a pre-existing issue carried over from the old inline value, but since you're extracting it into a named constant, it's a good opportunity to fix it.

Suggested fix

const EDGE_COLOR_DEFAULT = 'rgb(177, 177, 183)';

✅ 1 resolved

✅ Bug: Test CSS variable names don't match source constants

📄 openmetadata-ui/src/main/resources/ui/src/utils/EdgeStyleUtils.test.ts:20-22 📄 openmetadata-ui/src/main/resources/ui/src/utils/EdgeStyleUtils.ts:15-17
The test file EdgeStyleUtils.test.ts defines CSS variable constants without the tw- prefix (var(--color-brand-600), var(--color-indigo-600), var(--color-error-600)), while the source file EdgeStyleUtils.ts uses var(--tw-color-brand-600), var(--tw-color-indigo-600), and var(--tw-color-error-600). This mismatch means all assertion checks comparing against these constants (e.g., expect(style.stroke).toBe(EDGE_COLOR_BRAND)) will fail, since the actual computed values will have the --tw- prefix.

🤖 Prompt for agents

Code Review: Migrates MUI theme colors to Tailwind theme colors, with test CSS variable naming now correctly aligned to source constants. Consider using rgb() instead of rgba() for the EDGE_COLOR_DEFAULT constant since it doesn't specify an alpha channel.

1. 💡 Bug: rgba() used with 3 args instead of rgb()
   Files: openmetadata-ui/src/main/resources/ui/src/utils/EdgeStyleUtils.ts:18

   The constant `EDGE_COLOR_DEFAULT = 'rgba(177, 177, 183)'` uses `rgba()` with only 3 arguments. The `rgba()` function expects 4 arguments (r, g, b, alpha). While most modern browsers tolerate this, it's technically invalid CSS and should be `rgb(177, 177, 183)`. This is a pre-existing issue carried over from the old inline value, but since you're extracting it into a named constant, it's a good opportunity to fix it.

   Suggested fix:
   const EDGE_COLOR_DEFAULT = 'rgb(177, 177, 183)';

Options

Auto-apply is off → Gitar will not commit updates to this branch.
Display: compact → Showing less information.

Comment with these commands to change:

Auto-apply	Compact
gitar auto-apply:on	gitar display:verbose

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

[sonarqubecloud]

Quality Gate passed for 'open-metadata-ui'

Issues
2 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud