ECOPROJECT-4632 | fix: solving color inconsistency between dark and light mode (#763)

- Implemented theme-aware styling for popovers, tooltips, and chart
flyouts across the app. This restores and extends a previous fix that
was lost after the PatternFly v6.5 upgrade.

- Added a shared utility at src/lib/patternfly/flyoutAppendTo.ts that
provides:

1. Theme-aware CSS for Popover and Tooltip surfaces (floating background
+ regular text)
2. Themed chart tooltip styles for Victory ChartTooltip flyouts
3. appendTo={document.body} so flyouts inherit PatternFly typography

---------

Signed-off-by: Montse Ortega <mortegag@redhat.com>

Author: ammont82

src/lib/patternfly/__tests__/flyoutAppendTo.test.ts

@@ -0,0 +1,9 @@
+import { describe, expect, it } from "vitest";
+
+import { getFlyoutAppendTo } from "../flyoutAppendTo";
+
+describe("getFlyoutAppendTo", () => {
+  it("appends flyouts to document.body for PatternFly typography inheritance", () => {
+    expect(getFlyoutAppendTo()).toBe(document.body);
+  });
+});

src/lib/patternfly/flyoutAppendTo.ts

@@ -0,0 +1,94 @@
+import { css, cx } from "@emotion/css";
+
+/**
+ * DOM target for portaled PatternFly flyouts (Popover, Tooltip).
+ * Uses `document.body` so flyouts inherit Red Hat Text from PatternFly base styles.
+ * Appending to `document.documentElement` (where the theme class often lives) leaves
+ * flyouts outside `body` and they fall back to the browser serif default.
+ */
+export const getFlyoutAppendTo = (): HTMLElement => document.body;
+
+/** Shared typography for portaled popover and tooltip content. */
+export const flyoutTypographyClassName = css`
+  .pf-v6-c-popover__content,
+  .pf-v6-c-popover__title-text,
+  .pf-v6-c-tooltip__content {
+    font-family: var(--pf-t--global--font--family--body);
+    line-height: var(--pf-t--global--font--line-height--body);
+  }
+
+  .pf-v6-c-tooltip__content {
+    font-size: var(--pf-t--global--font--size--body--sm);
+  }
+`;
+
+/** Popover color tokens that respect the active PatternFly theme. */
+export const themeAwarePopoverClassName = css`
+  --pf-v6-c-popover__content--BackgroundColor: var(
+    --pf-t--global--background--color--floating--default
+  );
+  --pf-v6-c-popover__content--Color: var(--pf-t--global--text--color--regular);
+  --pf-v6-c-popover__arrow--BackgroundColor: var(
+    --pf-t--global--background--color--floating--default
+  );
+  --pf-v6-c-popover__arrow--BorderColor: var(
+    --pf-t--global--border--color--default
+  );
+`;
+
+/** Tooltip color tokens that respect the active PatternFly theme. */
+export const themeAwareTooltipClassName = css`
+  --pf-v6-c-tooltip__content--BackgroundColor: var(
+    --pf-t--global--background--color--floating--default
+  );
+  --pf-v6-c-tooltip__content--Color: var(--pf-t--global--text--color--regular);
+  --pf-v6-c-tooltip__arrow--BackgroundColor: var(
+    --pf-t--global--background--color--floating--default
+  );
+  --pf-v6-c-tooltip__arrow--BorderColor: var(
+    --pf-t--global--border--color--default
+  );
+`;
+
+/** Typography + theme tokens for popovers. */
+export const themePopoverFlyoutClassName = cx(
+  flyoutTypographyClassName,
+  themeAwarePopoverClassName,
+);
+
+/** Typography + theme tokens for tooltips. */
+export const themeTooltipFlyoutClassName = cx(
+  flyoutTypographyClassName,
+  themeAwareTooltipClassName,
+);
+
+/** Victory chart tooltips (Voronoi) that respect the active PatternFly theme. */
+export const themedChartTooltipStyle = {
+  fontSize: 9,
+  fill: "var(--pf-t--global--text--color--regular)",
+} as const;
+
+export const themedChartTooltipFlyoutStyle = {
+  stroke: "var(--pf-t--global--border--color--default)",
+  strokeWidth: 1,
+  fill: "var(--pf-t--global--background--color--floating--default)",
+} as const;
+
+export const themedChartTooltipFlyoutPadding = {
+  top: 6,
+  bottom: 6,
+  left: 10,
+  right: 10,
+} as const;
+
+/** Shared props for theme-aware PatternFly Popovers. */
+export const themePopoverFlyoutProps = {
+  appendTo: getFlyoutAppendTo,
+  className: themePopoverFlyoutClassName,
+} as const;
+
+/** Shared props for theme-aware PatternFly Tooltips. */
+export const themeTooltipFlyoutProps = {
+  appendTo: getFlyoutAppendTo,
+  className: themeTooltipFlyoutClassName,
+} as const;

src/ui/assessment/views/AssessmentsTable.tsx

@@ -29,6 +29,7 @@ import React, { useMemo, useState } from "react";
 import { Link, useNavigate } from "react-router-dom";
 
 import type { AssessmentModel } from "../../../models/AssessmentModel";
+import { themeTooltipFlyoutProps } from "../../../lib/patternfly/flyoutAppendTo";
 import { routes } from "../../../routing/Routes";
 import { EmptySearchResults } from "../../core/components/EmptySearchResults";
 
@@ -521,12 +522,13 @@ export const AssessmentsTable: React.FC<AssessmentsTableProps> = ({
             {isColumnVisible("Name") && (
               <Td dataLabel={Columns.Name} modifier="truncate">
                 {row.hasData ? (
-                  <Tooltip content={row.name}>
+                  <Tooltip {...themeTooltipFlyoutProps} content={row.name}>
                     <Link to={routes.assessmentById(row.id)}>{row.name}</Link>
                   </Tooltip>
                 ) : (
                   <span>
                     <Tooltip
+                      {...themeTooltipFlyoutProps}
                       content={
                         row.sourceType.toLowerCase().includes("rvtools")
                           ? "No inventory data found. The uploaded file may be corrupted. Please verify and re-upload."
@@ -537,7 +539,7 @@ export const AssessmentsTable: React.FC<AssessmentsTableProps> = ({
                         <RhUiWarningFillIcon />
                       </Icon>
                     </Tooltip>{" "}
-                    <Tooltip content={row.name}>
+                    <Tooltip {...themeTooltipFlyoutProps} content={row.name}>
                       <span>{row.name}</span>
                     </Tooltip>
                   </span>
@@ -592,6 +594,7 @@ export const AssessmentsTable: React.FC<AssessmentsTableProps> = ({
               <Td dataLabel={Columns.AssessmentReport}>
                 <TableText>
                   <Tooltip
+                    {...themeTooltipFlyoutProps}
                     content={
                       row.hasData
                         ? "View assessment report"

src/ui/core/components/MigrationChart.tsx

@@ -13,6 +13,11 @@ import { chart_color_blue_300 } from "@patternfly/react-tokens/dist/esm/chart_co
 import { chart_color_red_orange_400 } from "@patternfly/react-tokens/dist/esm/chart_color_red_orange_400";
 import React, { useMemo } from "react";
 
+import {
+  getFlyoutAppendTo,
+  themePopoverFlyoutClassName,
+} from "../../../lib/patternfly/flyoutAppendTo";
+
 interface OSData {
   name: string;
   count: number;
@@ -48,11 +53,9 @@ type DLength =
 // Styles
 // ---------------------------------------------------------------------------
 
-const upgradeRecommendationPopover = css`
-  .popover-override .pf-v5-c-popover__close .pf-v5-c-button.pf-m-plain {
-    color: var(--pf-t--global--text--color--regular);
-  }
-  .popover-override .pf-v5-c-popover__close .pf-v5-c-button.pf-m-plain:hover {
+const upgradeRecommendationPopoverCloseButton = css`
+  .pf-v6-c-popover__close .pf-v6-c-button.pf-m-plain,
+  .pf-v6-c-popover__close .pf-v6-c-button.pf-m-plain:hover {
     color: var(--pf-t--global--text--color--regular);
   }
 `;
@@ -178,7 +181,8 @@ const MigrationChart: React.FC<MigrationChartProps> = ({
                         {item.infoText ? (
                           <FlexItem shrink={{ default: "shrink" }}>
                             <Popover
-                              className={upgradeRecommendationPopover}
+                              appendTo={getFlyoutAppendTo}
+                              className={`${themePopoverFlyoutClassName} ${upgradeRecommendationPopoverCloseButton}`}
                               position="bottom"
                               headerContent="Upgrade to get support"
                               bodyContent={<div>{item.infoText}</div>}

src/ui/core/components/MigrationDonutChart.tsx

@@ -1,7 +1,17 @@
-import { ChartDonut, ChartLabel, ChartLegend } from "@patternfly/react-charts";
+import {
+  ChartDonut,
+  ChartLabel,
+  ChartLegend,
+  ChartTooltip,
+} from "@patternfly/react-charts";
 import { Flex, FlexItem } from "@patternfly/react-core";
 import React, { useCallback, useMemo } from "react";
 
+import {
+  themedChartTooltipFlyoutPadding,
+  themedChartTooltipFlyoutStyle,
+  themedChartTooltipStyle,
+} from "../../../lib/patternfly/flyoutAppendTo";
 import { CardEmptyState } from "./CardEmptyState";
 
 interface OSData {
@@ -156,6 +166,17 @@ const MigrationDonutChart: React.FC<MigrationDonutChartProps> = ({
     return chartData.reduce((sum, item) => sum + (Number(item.y) || 0), 0);
   }, [chartData]);
 
+  const donutTooltip = useMemo(
+    () => (
+      <ChartTooltip
+        style={themedChartTooltipStyle}
+        flyoutStyle={themedChartTooltipFlyoutStyle}
+        flyoutPadding={themedChartTooltipFlyoutPadding}
+      />
+    ),
+    [],
+  );
+
   if (!data || data.length === 0) {
     return (
       <CardEmptyState
@@ -174,6 +195,7 @@ const MigrationDonutChart: React.FC<MigrationDonutChartProps> = ({
         <ChartDonut
           ariaDesc="Migration data donut chart"
           data={chartData}
+          labelComponent={donutTooltip}
           labels={({ datum }) => {
             const safeDatum = datum as ChartDatum;
             const percent =

src/ui/environment/views/AgentStatusView.tsx

@@ -21,6 +21,7 @@ import { t_global_icon_color_status_info_default as globalInfoColor100 } from "@
 import React, { useMemo } from "react";
 import { Link } from "react-router-dom";
 
+import { themePopoverFlyoutProps } from "../../../lib/patternfly/flyoutAppendTo";
 import { VCenterSetupInstructions } from "../../core/components/VCenterSetupInstructions";
 import { safeExternalUrl } from "../../core/utils/urlValidation";
 import { getDiscoveryVmStatusLabel } from "../helpers/discoveryVmStatus";
@@ -156,6 +157,7 @@ export const AgentStatusView: React.FC<AgentStatusView.Props> = (props) => {
           status !== "not-connected" &&
           status !== "up-to-date") ? (
           <Popover
+            {...themePopoverFlyoutProps}
             aria-label={statusView && statusView.text}
             headerContent={statusView && statusView.text}
             headerComponent="h1"
@@ -186,6 +188,7 @@ export const AgentStatusView: React.FC<AgentStatusView.Props> = (props) => {
       {isNotConnected && (
         <SplitItem>
           <Popover
+            {...themePopoverFlyoutProps}
             aria-label="Setup instructions"
             headerContent="Setup instructions"
             headerComponent="h2"

src/ui/environment/views/DownloadOvaAction.tsx

@@ -2,6 +2,7 @@ import { Button, Icon, Tooltip } from "@patternfly/react-core";
 import { RhUiDownloadIcon } from "@patternfly/react-icons";
 import React, { useCallback, useState } from "react";
 
+import { themeTooltipFlyoutProps } from "../../../lib/patternfly/flyoutAppendTo";
 import { useEnvironmentPage } from "../view-models/EnvironmentPageContext";
 
 // eslint-disable-next-line @typescript-eslint/no-namespace
@@ -40,7 +41,7 @@ export const DownloadOvaAction: React.FC<DownloadOvaAction.Props> = (props) => {
   }, [sourceId, sourceName, url]);
 
   return (
-    <Tooltip content="Download OVA File">
+    <Tooltip {...themeTooltipFlyoutProps} content="Download OVA File">
       <Button
         icon={
           <Icon size="md" isInline>

src/ui/environment/views/ProxyFields.tsx

@@ -12,6 +12,8 @@ import {
 import { RhUiQuestionMarkCircleIcon } from "@patternfly/react-icons";
 import React, { useState } from "react";
 
+import { themePopoverFlyoutProps } from "../../../lib/patternfly/flyoutAppendTo";
+
 const ProxyInputFields = ({
   httpProxy,
   httpsProxy,
@@ -29,7 +31,10 @@ const ProxyInputFields = ({
         <FormGroup
           label="HTTP proxy URL"
           labelHelp={
-            <Popover bodyContent="The HTTP proxy URL that agents should use to access the discovery service.">
+            <Popover
+              {...themePopoverFlyoutProps}
+              bodyContent="The HTTP proxy URL that agents should use to access the discovery service."
+            >
               <button
                 type="button"
                 aria-label="More info about HTTP proxy URL"
@@ -60,7 +65,10 @@ const ProxyInputFields = ({
         <FormGroup
           label="HTTPS proxy URL"
           labelHelp={
-            <Popover bodyContent="Specify the HTTPS proxy that agents should use to access the discovery service. If you don't provide a value, your HTTP proxy URL will be used by default for both HTTP and HTTPS connections.">
+            <Popover
+              {...themePopoverFlyoutProps}
+              bodyContent="Specify the HTTPS proxy that agents should use to access the discovery service. If you don't provide a value, your HTTP proxy URL will be used by default for both HTTP and HTTPS connections."
+            >
               <button
                 type="button"
                 aria-label="More info about HTTPS proxy URL"
@@ -91,7 +99,10 @@ const ProxyInputFields = ({
         <FormGroup
           label="No proxy domains"
           labelHelp={
-            <Popover bodyContent="Exclude destination domain names, IP addresses, or other network CIDRs from proxying by adding them to this comma-separated list.">
+            <Popover
+              {...themePopoverFlyoutProps}
+              bodyContent="Exclude destination domain names, IP addresses, or other network CIDRs from proxying by adding them to this comma-separated list."
+            >
               <button
                 type="button"
                 aria-label="More info about no proxy domains"

src/ui/environment/views/RemoveSourceAction.tsx

@@ -2,6 +2,7 @@ import { Button, Content, Icon, Tooltip } from "@patternfly/react-core";
 import { RhUiTrashIcon } from "@patternfly/react-icons";
 import React, { useCallback, useState } from "react";
 
+import { themeTooltipFlyoutProps } from "../../../lib/patternfly/flyoutAppendTo";
 import { ConfirmationModal } from "../../core/components/ConfirmationModal";
 
 // eslint-disable-next-line @typescript-eslint/no-namespace
@@ -46,7 +47,7 @@ export const RemoveSourceAction: React.FC<RemoveSourceAction.Props> = (
 
   return (
     <>
-      <Tooltip content="Remove">
+      <Tooltip {...themeTooltipFlyoutProps} content="Remove">
         <Button
           icon={
             <Icon size="md" isInline>

src/ui/environment/views/SourcesTable.tsx

@@ -26,6 +26,7 @@ import React, { useEffect, useMemo, useState } from "react";
 import { useNavigate } from "react-router-dom";
 
 import type { SourceModel } from "../../../models/SourceModel";
+import { themeTooltipFlyoutProps } from "../../../lib/patternfly/flyoutAppendTo";
 import { routes } from "../../../routing/Routes";
 import { ConfirmationModal } from "../../core/components/ConfirmationModal";
 import { EmptySearchResults } from "../../core/components/EmptySearchResults";
@@ -721,6 +722,7 @@ export const SourcesTable: React.FC<SourceTableProps> = ({
                   <Td dataLabel={Columns.LastSeen} className={tableCellTop}>
                     {source?.updatedAt ? (
                       <Tooltip
+                        {...themeTooltipFlyoutProps}
                         content={new Date(source.updatedAt).toLocaleString()}
                       >
                         <span>{formatRelativeTime(source.updatedAt)}</span>