fix(ui): dark mode for DQ & Observability component surfaces (#6459) by shah-harshit · Pull Request #33586 · open-metadata/OpenMetadata

shah-harshit · 2026-09-18T15:49:50Z

Describe your changes:

Refs open-metadata/openmetadata-collate#6459
Gate contract: open-metadata/openmetadata-collate#6564
Depends on #33597 (global legacy-var bridge + app background).

DQ/Observability component-level dark-mode fixes — swaps non-adapting Tailwind color classes to semantic ones on the .tsx surfaces (bg-white→tw:bg-primary, bg-gray-50→tw:bg-secondary, text-gray-500→tw:text-tertiary, border-gray-300→tw:border-secondary, bg-gray-blue-25→bg-secondary_subtle, bg-blue-50→bg-utility-blue-50).

The .less-surface theming for these pages is delivered globally by the legacy-var bridge in #33597 (kept separate per review) — hence the dependency. Light mode unchanged.

Type of change:

Improvement

Checklist:

References ticket Bump terser from 4.8.0 to 4.8.1 in /openmetadata-ui/src/main/resources/ui #6459 + Gate Zero contract.
Light mode unchanged (semantic-class swaps only).
Depends on fix(ui): global dark-mode — app bg, legacy-var bridge, core-ui component gaps #33597 for the global .less bridge.

Confidence Score: 5/5

The PR appears safe to merge; no actionable regressions remain in the reviewed changes.

Summary

This PR updates Data Quality and Observability surfaces to use theme-aware semantic colors and adds a dark-only border treatment for the Data Quality page.

Replaces fixed light backgrounds, text colors, and borders with semantic utility classes.
Updates dashboard tests to expect the new adaptive surface class.
Applies the subtle border token to Data Quality cards, tab navigation, and table containers in dark mode.

_{Reviews (6) · Last reviewed commit: "fix(ui): DQ page header/tab/table border..."}

@grey-

Combined dark-mode pass over the remaining Data Quality & Observability AI-mode routes (workstream open-metadata/openmetadata-collate#6459). Swaps compile-time fixed-hex LESS palette vars and raw Tailwind palette classes for adaptive semantic / auto-inverting utility tokens; light-mode values are preserved (exact for status colors) and only the resolved dark values change. Covers: - #6533 Add/Edit Test Case: TestCaseFormV1.less, add-test-suite-pipeline (@grey-*/@Blue-22 surfaces), AddTestCaseList bg-white -> tw:bg-primary. - #6531 Incident Manager: dimensionality heatmap legend + tooltip, failed sample-data diff rows, incident/result tab surfaces (@grey-*/status hex -> semantic + utility-{success,error,warning}). - #6532 Table DQ + Profiler: ProfilerLatestValue, TestSummaryGraph, no-profiler-banner, table-profiler (neutral greys -> semantic roles). - #6538 Pipeline Observability: data-observability-tab border. - #6530 Alerts: AlertAiNotificationSection bg-white + text-gray-500. Status hexes map to exact-match auto-inverting utility tokens (@red-22=error-500, @warning-400=warning-400, @Green-9=success-50, @Blue-22=blue-light-50, @alert-error-icon-bg-1=error-100). Neutral greys map to --color-bg/border/text semantic roles. Deferred (categorical, tracked for the token foundation): the 5-level incident severity ramp and the heatmap data-viz white-fade gradients in incident-manager.style.less / DimensionalityHeatmap.less need shared dark palette values rather than per-page overrides. Verify-only (no offenders found; AI routes already on semantic tokens): #6540 Test Suites list, #6535 Test Case details/versions, #6537 Test Library, #6536 Suite details/ingestion. Refs open-metadata/openmetadata-collate#6533 open-metadata/openmetadata-collate#6531 open-metadata/openmetadata-collate#6532 open-metadata/openmetadata-collate#6538 open-metadata/openmetadata-collate#6530 open-metadata/openmetadata-collate#6459 Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

github-actions · 2026-09-18T15:50:02Z

❌ PR checklist incomplete

This PR cannot be merged until the following are addressed on its linked issue:

No GitHub issue is linked. Link an issue in the Development section of the PR (or add Fixes #12345 to the description). For a same-org cross-repo issue, add Fixes open-metadata/<repo>#123 to the description.

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 skip-pr-checks label.

github-actions · 2026-09-18T15:50:19Z

Hi there 👋 Thanks for your contribution!

The OpenMetadata team will review the PR shortly! Once it has been labeled as safe to test, the CI workflows
will start executing and we'll be able to make sure everything is working as expected.

Let us know if you need any help!

github-actions · 2026-09-18T15:51:39Z

✅ Playwright Results — workflow succeeded

Validated commit 47c028e35152b32479eca2d199129c3f96be35c9 in Playwright run 35390738216, attempt 1.

✅ 4492 passed · ❌ 0 failed · 🟡 7 flaky · ⏭️ 1 skipped · 🧰 0 lifecycle flaky

Performance

Blocking targets: ✅ met · Optimization targets: 🟡 in progress

Shard-job maxima below are not the full workflow wall time; the linked run includes build, fixture, planning, and reporting.

🕒 Full workflow signal wall (to summary) 54m 24s

⏱️ Max setup 4m 39s · max shard execution 23m 56s · max shard-job elapsed before upload 27m 0s · reporting 24s

🌐 220.81 requests/attempt · 2.23 app boots/UI scenario · 43.94% common-shard skew

Optimization targets still in progress:

Common shard skew was 43.94% (convergence target: at most 15%).
Browser traffic was 220.81 requests per attempt (convergence target: fewer than 200).
Application boot ratio was 2.23 per UI scenario (10691 boots / 4788 scenarios; convergence target: at most 1).

Shard	Passed	Flaky	Skipped
✅ Shard advanced-search-01	130	0	0
✅ Shard chromium-01	159	0	0
✅ Shard chromium-02	176	0	0
✅ Shard chromium-03	163	0	0
✅ Shard chromium-04	202	0	0
🟡 Shard chromium-05	186	1	1
✅ Shard chromium-06	174	0	0
🟡 Shard chromium-07	169	2	0
✅ Shard chromium-08	157	0	0
✅ Shard chromium-09	174	0	0
🟡 Shard chromium-10	166	1	0
✅ Shard chromium-11	215	0	0
✅ Shard chromium-12	160	0	0
✅ Shard chromium-13	162	0	0
🟡 Shard chromium-14	200	1	0
✅ Shard chromium-15	248	0	0
🟡 Shard chromium-16	179	1	0
✅ Shard chromium-17	171	0	0
✅ Shard chromium-18	167	0	0
✅ Shard chromium-19	168	0	0
✅ Shard chromium-20	165	0	0
🟡 Shard chromium-21	164	1	0
✅ Shard chromium-22	205	0	0
✅ Shard data-asset-rules-01	65	0	0
✅ Shard domain-isolation-01	16	0	0
✅ Shard global-state-01	34	0	0
✅ Shard import-export-01	80	0	0
✅ Shard import-export-02	70	0	0
✅ Shard ingestion-01	43	0	0
✅ Shard ingestion-02	55	0	0
✅ Shard reindex-01	28	0	0
✅ Shard search-01	12	0	0
✅ Shard search-rbac-01	29	0	0

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

Flow/CustomizeWidgets.spec.ts › KPI Widget (shard chromium-05, 1 retry)
Features/SettingsNavigationPage.spec.ts › should save changes and navigate when "Save changes" is clicked in blocker (shard chromium-07, 1 retry)
Pages/UserDetails.spec.ts › Admin user can edit teams from the user profile (shard chromium-07, 1 retry)
Features/ContextCenterArticles.spec.ts › Article card metadata, widgets, and listing search update from UI edits (shard chromium-10, 1 retry)
Features/ColumnBulkOperations.spec.ts › should show no results when searching for nonexistent column (shard chromium-14, 1 retry)
Pages/ExplorePageRightPanel_KnowledgeCenter.spec.ts › Should remove user owner for knowledgeCenter (shard chromium-16, 1 retry)
Pages/EntityDataConsumer.spec.ts › Tag Add, Update and Remove for child entities (shard chromium-21, 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

@Blue-13

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>

@Blue-13

Address review on the DQ summary dark-mode PR: - The coverage/all-tests chart icon mapped @blue-500 (#0ba5ec, cyan) to utility-blue-500 (#2e90fa), a perceptible cyan->blue hue shift in light mode. #0ba5ec is exactly the blue-light-500 ramp, so switch the icon fg to utility-blue-light-500 and its background (@Blue-13 #e0f2fe) to utility-blue-light-100 (#e0f2fe) — both now exact light-value matches. - DataQualityDashboard.test.tsx still asserted the removed bg-gray-blue-25 classes; update both expectations to bg-utility-gray-blue-50 so the focused test matches the component. Suite passes (8/8). Refs open-metadata/openmetadata-collate#6539 open-metadata/openmetadata-collate#6459 Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

The dimension-count chip in the AI-mode Test Cases list used the raw palette class tw:bg-blue-50, which does not invert in dark mode, so its light-blue background stayed fixed while tw:text-primary flipped to a light foreground — light-on-light, unreadable in dark. Swap to tw:bg-utility-blue-50, which auto-inverts (light blue tint in light, dark blue in dark) per colors.md §2.7, keeping text-primary readable in both themes. Light mode is unchanged. The rest of the Test Cases list (table header, filters, table shell) was already on adaptive semantic tokens. Refs open-metadata/openmetadata-collate#6534 open-metadata/openmetadata-collate#6459 Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

github-actions · 2026-09-18T15:53:02Z

Hi there 👋 Thanks for your contribution!

The OpenMetadata team will review the PR shortly! Once it has been labeled as safe to test, the CI workflows
will start executing and we'll be able to make sure everything is working as expected.

Let us know if you need any help!

Address greptile P2: bg-utility-gray-blue-50 resolved to #f8f9fc in light, shifting the section-card surface from the original bg-gray-blue-25 (#fcfcfd). Use tw:bg-secondary_subtle instead — light #fdfdfd (effectively unchanged) and a proper dark surface, matching the LESS card surfaces in this PR. Focused test updated; suite passes 8/8. Refs open-metadata/openmetadata-collate#6539 open-metadata/openmetadata-collate#6459 Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

shah-harshit · 2026-09-18T16:07:50Z

Addressed the P2 light-drift comments (2d6dfd4):

Dashboard section cards: switched bg-utility-gray-blue-50 → tw:bg-secondary_subtle. Light resolves to #fdfdfd vs the original #fcfcfd (Δ1, imperceptible) and it now carries a proper dark surface, consistent with the LESS card surfaces in this PR. Test updated, suite 8/8.
Success green swaps: keeping utility-success-700/-100. The light deltas are sub-perceptual — #027a48→#067647 is rgb(2,122,72)→(6,118,71), and #d1fadf→#dcfae6 ≈ Δ6 — there is no exact-light token for #027a48, and only the success-* utility adapts to dark (the old fixed @green-* vars stayed light-on-dark). Semantic correctness + dark adaptation outweighs an invisible light shift here.

github-actions · 2026-09-18T16:08:04Z

Hi there 👋 Thanks for your contribution!

The OpenMetadata team will review the PR shortly! Once it has been labeled as safe to test, the CI workflows
will start executing and we'll be able to make sure everything is working as expected.

Let us know if you need any help!

@yellow-10

Replace the per-file dark-mode token swaps with a single global bridge so the fixed-hex legacy LESS palette vars adapt to dark mode everywhere they are used, with zero light-mode drift and no per-component edits. - variables.less: the 27 fixed-hex vars this workstream touched (@grey-1/2/5/7/9/15/25/26/50, @green-9/10/12/100/500, @red-9/10/22, @yellow-10, @blue-13/22/500, @warning-100/400, @alert-*) become `@x: var(--legacy-x, #originalHex)`. Light resolves to the exact original hex (no drift — fixes the greptile light-shift comments); dark picks up the override. - app.less: one `.dark-mode` block maps each `--legacy-*` to the semantic / auto-inverting utility token (neutrals -> --color-bg/border/text roles, status -> utility-{success,error,warning,blue-light}-*). - Revert the individual DQ/Profiler/IncidentManager/Alerts LESS files back to origin/main — they now adapt automatically through the bridge. Verified: variables.less and a consumer (.less) compile via lessc, emitting `var(--legacy-*, #hex)`; no legacy var is used in a LESS color function or operation (checked app-wide), so the var() substitution is safe. @black left literal (mostly non-DQ, app-wide). Categorical severity/heatmap ramps still deferred to the token foundation. Raw Tailwind palette classes in TSX (bg-white, bg-gray-50, text-gray-500, border-gray-300, bg-gray-blue-25) keep their per-file semantic swaps — they are not LESS vars and have no global bridge. Refs open-metadata/openmetadata-collate#6459 Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

shah-harshit · 2026-09-18T16:26:59Z

Reworked into a global legacy-var bridge (06c0246) and reverted the per-file LESS swaps:

variables.less: 27 fixed-hex vars → var(--legacy-x, #origHex) (light byte-exact).
app.less .dark-mode: maps --legacy-* → semantic/utility tokens for dark.
Reverted all per-component DQ/Profiler/IncidentManager/Alerts .less edits — they adapt through the bridge now.

This also fully resolves the earlier P2 light-drift comments: light mode is the exact original hex via the var() fallback, so there is no shift for the success greens or the dashboard cards. TSX raw palette classes keep their per-file semantic swaps (no global hook for Tailwind palette classes).

github-actions · 2026-09-18T16:27:00Z

Hi there 👋 Thanks for your contribution!

The OpenMetadata team will review the PR shortly! Once it has been labeled as safe to test, the CI workflows
will start executing and we'll be able to make sure everything is working as expected.

Let us know if you need any help!

The variables.less/app.less global bridge and the dark app-background fix now live in #33597 (core/global scope). This DQ PR keeps only its component (.tsx) changes and depends on #33597 for the .less-surface dark theming. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

github-actions · 2026-09-18T16:44:13Z

Hi there 👋 Thanks for your contribution!

The OpenMetadata team will review the PR shortly! Once it has been labeled as safe to test, the CI workflows
will start executing and we'll be able to make sure everything is working as expected.

Let us know if you need any help!

shah-harshit · 2026-09-18T16:50:00Z

Both P2 light-drift comments are resolved after splitting the token bridge into #33597:

Success green: the per-file utility-success-700 swap was reverted; @green-10 stays #027a48 in light (exact) and only adapts in dark via the fix(ui): global dark-mode — app bg, legacy-var bridge, core-ui component gaps #33597 legacy-var bridge.
Dashboard cards: now use tw:bg-secondary_subtle (#fdfdfd, Δ1 vs the original #fcfcfd — imperceptible) instead of the gray-blue-50 shift.

This PR now carries only the DQ consumer changes (TSX raw-class → semantic swaps); the global variables.less/app.less bridge lives in #33597.

@Grey-15

The DQ page header card, tab-nav container, and table container draw their border from @global-border (@Grey-15) — a solid gray that stands out in dark. Scope a dark-only override to border-subtle (rgba(255,255,255,0.08)) to match the subtle white-alpha border used across dark surfaces. Light unchanged. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

gitar-bot · 2026-09-18T20:19:55Z

Code Review ✅ Approved

🟢 Low risk

Replaces non-adaptive Tailwind color classes with semantic tokens across DQ and Observability component surfaces to enable dark mode support. Light mode remains unchanged, and no issues were found.

Review coverage

Rules No rules evaluated

Functional validation Not enabled · Set up

Auto-approval Not enabled · Set up

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 requested review from ShaileshParmar11, chirag-madlani and karanh37 as code owners September 18, 2026 15:49

shah-harshit and others added 3 commits September 18, 2026 21:22

shah-harshit changed the title ~~fix(ui): theme DQ authoring, incidents, profiler & alerts for dark mode~~ fix(ui): dark mode for Data Quality & Observability AI routes (#6459) Sep 18, 2026

This was referenced Sep 18, 2026

fix(ui): theme Data Quality summary widgets for dark mode #33582

Closed

fix(ui): theme Test Cases list for dark mode #33583

Closed

greptile-apps Bot reviewed Sep 18, 2026

View reviewed changes

Comment thread ...es/ui/src/components/DataQuality/ChartWidgets/DataStatisticWidget/data-statistic-widget.less Outdated

Comment thread ...ain/resources/ui/src/components/observability/DataQuality/Dashboard/DataQualityDashboard.tsx Outdated

shah-harshit changed the title ~~fix(ui): dark mode for Data Quality & Observability AI routes (#6459)~~ fix(ui): dark mode for DQ & Observability via global legacy-var bridge (#6459) Sep 18, 2026

shah-harshit mentioned this pull request Sep 18, 2026

fix(ui): global dark-mode — app bg, legacy-var bridge, core-ui component gaps #33597

Merged

4 tasks

shah-harshit changed the title ~~fix(ui): dark mode for DQ & Observability via global legacy-var bridge (#6459)~~ fix(ui): dark mode for DQ & Observability component surfaces (#6459) Sep 18, 2026

shah-harshit self-assigned this Sep 18, 2026

shah-harshit added UI UI specific issues safe to test Add this label to run secure Github workflows on PRs labels Sep 18, 2026

shah-harshit deployed to test September 18, 2026 18:01 — with GitHub Actions Active

shah-harshit deployed to test September 18, 2026 20:43 — with GitHub Actions Active

Navigation Menu

fix(ui): dark mode for DQ & Observability component surfaces (#6459) - #33586

fix(ui): dark mode for DQ & Observability component surfaces (#6459)#33586
shah-harshit wants to merge 9 commits into
mainfrom
6459-dq-observability-dark-batch

shah-harshit commented Sep 18, 2026 •

edited by greptile-apps Bot

Loading

Uh oh!

github-actions Bot commented Sep 18, 2026

Uh oh!

github-actions Bot commented Sep 18, 2026

Uh oh!

github-actions Bot commented Sep 18, 2026 •

edited

Loading

Uh oh!

github-actions Bot commented Sep 18, 2026

Uh oh!

Uh oh!

Uh oh!

shah-harshit commented Sep 18, 2026

Uh oh!

github-actions Bot commented Sep 18, 2026

Uh oh!

shah-harshit commented Sep 18, 2026

Uh oh!

github-actions Bot commented Sep 18, 2026

Uh oh!

github-actions Bot commented Sep 18, 2026

Uh oh!

shah-harshit commented Sep 18, 2026

Uh oh!

gitar-bot Bot commented Sep 18, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Conversation

shah-harshit commented Sep 18, 2026 • edited by greptile-apps Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Describe your changes:

Type of change:

Checklist:

Confidence Score: 5/5

Uh oh!

github-actions Bot commented Sep 18, 2026

❌ PR checklist incomplete

Uh oh!

github-actions Bot commented Sep 18, 2026

Uh oh!

github-actions Bot commented Sep 18, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Playwright Results — workflow succeeded

Performance

Uh oh!

github-actions Bot commented Sep 18, 2026

Uh oh!

Uh oh!

Uh oh!

shah-harshit commented Sep 18, 2026

Uh oh!

github-actions Bot commented Sep 18, 2026

Uh oh!

shah-harshit commented Sep 18, 2026

Uh oh!

github-actions Bot commented Sep 18, 2026

Uh oh!

github-actions Bot commented Sep 18, 2026

Uh oh!

shah-harshit commented Sep 18, 2026

Uh oh!

gitar-bot Bot commented Sep 18, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

shah-harshit commented Sep 18, 2026 •

edited by greptile-apps Bot

Loading

github-actions Bot commented Sep 18, 2026 •

edited

Loading