fix(ui): theme Data Quality summary widgets for dark mode - #33582
shah-harshit wants to merge 2 commits into
Conversation
The AI-mode Data Quality summary shells already use adaptive semantic tokens, but the shared widgets they embed (chart backgrounds, status cards, statistic widgets, test-case status chart) baked compile-time fixed-hex LESS palette vars (@grey-26/@grey-9/@grey-2/@grey-50, @Blue-13, @GREEN-*, @RED-*, @yellow-10, @alert-*) that cannot follow the theme, so those surfaces stayed light in dark mode. Swap the fixed palette vars for adaptive tokens: - neutral surfaces/borders -> semantic --color-bg-secondary_subtle / --color-bg-secondary / --color-border-secondary - status colors -> --tw-color-utility-{error,success,warning,blue}-*, which auto-invert in dark (mirrors the merged StatusCardWidget precedent). Every status mapping is an exact light-value match, so light mode does not regress. - AI dashboard section tint tw:bg-gray-blue-25 (fixed light) -> tw:bg-utility-gray-blue-50 (auto-inverting). Already-adaptive utility-gray vars are left as-is. Categorical chart/ status data colors are intentionally unchanged. Refs open-metadata/openmetadata-collate#6539 open-metadata/openmetadata-collate#6459 Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
❌ PR checklist incompleteThis PR cannot be merged until the following are addressed on its linked issue:
The fields live on the linked issue in the Shipping project (open the issue → right sidebar → Projects). After you set them, re-run this check (or push a commit) — issue/project changes do not re-trigger it automatically. Maintainers can bypass this check by adding the |
|
Hi there 👋 Thanks for your contribution! The OpenMetadata team will review the PR shortly! Once it has been labeled as Let us know if you need any help! |
shah-harshit
added
UI
![gitar-bot[bot]](https://avatars.githubusercontent.com/in/827041?s=60&v=4){kind=small}
![greptile-apps[bot]](https://avatars.githubusercontent.com/in/867647?s=60&v=4){kind=small}
| 'tw:[&_.status-card-widget-container]:border-0 tw:[&_.status-card-widget-container]:bg-utility-gray-blue-50', | ||
| 'incident-metrics': | ||
| 'tw:[&_.custom-chart-background]:border-0 tw:[&_.custom-chart-background]:bg-gray-blue-25', | ||
| 'tw:[&_.custom-chart-background]:border-0 tw:[&_.custom-chart-background]:bg-utility-gray-blue-50', |
There was a problem hiding this comment.
These section backgrounds now use bg-utility-gray-blue-50, but the existing unit test still requires the removed bg-gray-blue-25 classes for both affected cards. The focused DataQualityDashboard.test.tsx test will therefore fail until both expectations are updated.
1 participant
Describe your changes
Dark-mode coverage for the AI-mode Data Quality Summary route (workstream open-metadata/openmetadata-collate#6459, ticket open-metadata/openmetadata-collate#6539).
The AI-mode DQ summary shells (
components/observability/DataQuality/*) already use adaptive semantic tokens. The remaining dark-mode gaps were in the shared widgets they embed, which baked compile-time fixed-hex LESS palette vars that cannot follow the theme — so chart backgrounds, status cards, statistic widgets, and the test-case status chart stayed light in dark mode.Changes
--color-bg-secondary_subtle/--color-bg-secondary/--color-border-secondary.--tw-color-utility-{error,success,warning,blue}-*, which auto-invert in dark (percolors.md§2.7) — mirrors the mergedStatusCardWidgetprecedent. Every status mapping is an exact light-value match, so light mode does not regress.tw:bg-gray-blue-25(fixed light) →tw:bg-utility-gray-blue-50(auto-inverting).utility-grayvars left as-is; categorical chart/status data colors intentionally unchanged.Files:
components/DataQuality/DataQualityDashboard/data-quality-dashboard.style.lesscomponents/DataQuality/ChartWidgets/chart-widgets.lesscomponents/DataQuality/ChartWidgets/StatusCardWidget/status-card-widget.lesscomponents/DataQuality/ChartWidgets/DataStatisticWidget/data-statistic-widget.lesscomponents/DataQuality/ChartWidgets/TestCaseStatusAreaChartWidget/test-case-status-area-chart-widget.lesscomponents/observability/DataQuality/Dashboard/DataQualityDashboard.tsxType of change
Checklist
token-auditintroduces no new violations in the changed filesgit diff --checkclean; prettier clean🤖 Generated with Claude Code
The PR appears safe to merge; the previous stale-test issue is fully fixed and no new actionable defects remain.
Findings
Summary
Updates shared Data Quality widgets to use theme-adaptive semantic and utility color tokens, fixing light surfaces and status treatments that remained visible in dark mode.
Reviews (2) · Last reviewed commit: "fix(ui): use blue-light token + update s..."