From f825006559a0a6daf745694245cb0f75539a16c4 Mon Sep 17 00:00:00 2001
From: Timothy Asir Jeyasingh <tjeyasin@redhat.com>
Date: Tue, 16 Apr 2024 14:44:35 +0530
Subject: [PATCH] Improve visibility of ChartDonut subtitle and TextComponent
 across themes

This commit updates the subTitleComponent of the ChartDonut and
TextComponent in Topology to use a theme-adaptive color variable
(`--pf-global--Color--200`).

This change ensures that the text maintains sufficient contrast
and visibility in both light and dark modes.

Signed-off-by: Timothy Asir Jeyasingh <tjeyasin@redhat.com>
---
 .../disaster-recovery/cluster-app-card/common.tsx      |  7 ++++++-
 .../dashboards/common/capacity-card/capacity-card.tsx  | 10 ++++++----
 packages/odf/components/topology/topology.scss         |  4 ++--
 .../src/dashboards/breakdown-card/breakdown-chart.tsx  |  2 +-
 4 files changed, 15 insertions(+), 8 deletions(-)

diff --git a/packages/mco/components/mco-dashboard/disaster-recovery/cluster-app-card/common.tsx b/packages/mco/components/mco-dashboard/disaster-recovery/cluster-app-card/common.tsx
index 235ccc571..da70739fc 100644
--- a/packages/mco/components/mco-dashboard/disaster-recovery/cluster-app-card/common.tsx
+++ b/packages/mco/components/mco-dashboard/disaster-recovery/cluster-app-card/common.tsx
@@ -37,6 +37,7 @@ import {
   SelectVariant,
 } from '@patternfly/react-core/deprecated';
 import { global_danger_color_100 as globalDanger100 } from '@patternfly/react-tokens/dist/js/global_danger_color_100';
+import { global_info_color_100 as globalInfo100 } from '@patternfly/react-tokens/dist/js/global_info_color_100';
 import { global_warning_color_100 as globalWarning100 } from '@patternfly/react-tokens/dist/js/global_warning_color_100';
 import { ChartDonut } from '@patternfly/react-charts';
 import {
@@ -65,7 +66,11 @@ const namespaceToModelMapping = (namespace: string) => {
   }
 };
 
-const colorScale = [globalDanger100.value, globalWarning100.value, '#0166cc'];
+const colorScale = [
+  globalDanger100.value,
+  globalWarning100.value,
+  globalInfo100.value,
+];
 
 const getNSAndNameFromId = (itemId: string): string[] => {
   if (itemId?.includes(NAMESPACE_NAME_SPLIT_CHAR)) {
diff --git a/packages/ocs/dashboards/common/capacity-card/capacity-card.tsx b/packages/ocs/dashboards/common/capacity-card/capacity-card.tsx
index f65cd0702..83dfcc7b1 100644
--- a/packages/ocs/dashboards/common/capacity-card/capacity-card.tsx
+++ b/packages/ocs/dashboards/common/capacity-card/capacity-card.tsx
@@ -7,6 +7,8 @@ import {
   YellowExclamationTriangleIcon,
 } from '@openshift-console/dynamic-plugin-sdk';
 import { global_danger_color_100 as globalDanger100 } from '@patternfly/react-tokens/dist/js/global_danger_color_100';
+import { global_disabled_color_100 as globalDisable100 } from '@patternfly/react-tokens/dist/js/global_disabled_color_100';
+import { global_info_color_100 as globalInfo100 } from '@patternfly/react-tokens/dist/js/global_info_color_100';
 import { global_warning_color_100 as globalWarning100 } from '@patternfly/react-tokens/dist/js/global_warning_color_100';
 import classNames from 'classnames';
 import { ChartDonut, ChartLabel } from '@patternfly/react-charts';
@@ -14,9 +16,9 @@ import { Card, CardBody, CardHeader, CardTitle } from '@patternfly/react-core';
 import { DANGER_THRESHOLD, WARNING_THRESHOLD } from '../../../constants';
 import './capacity-card.scss';
 
-const generalColorScale = ['#0166cc', '#d6d6d6'];
-const warningColorScale = [globalWarning100.value, '#d6d6d6'];
-const dangerColorScale = [globalDanger100.value, '#d6d6d6'];
+const generalColorScale = [globalInfo100.value, globalDisable100.value];
+const warningColorScale = [globalWarning100.value, globalDisable100.value];
+const dangerColorScale = [globalDanger100.value, globalDisable100.value];
 
 const CapacityStatusIcon: React.FC<CapacityStatusIconProps> = React.memo(
   ({ ratio }) => {
@@ -129,7 +131,7 @@ export const CapacityCard: React.FC<CapacityCardProps> = React.memo((props) => {
                 subTitleComponent={
                   <ChartLabel
                     dy={5}
-                    style={{ fill: `var(--pf-v5-global--palette--black-500)` }}
+                    style={{ fill: `var(--pf-v5-global--Color--200)` }}
                   />
                 }
               />
diff --git a/packages/odf/components/topology/topology.scss b/packages/odf/components/topology/topology.scss
index e5155069a..c150db462 100644
--- a/packages/odf/components/topology/topology.scss
+++ b/packages/odf/components/topology/topology.scss
@@ -16,7 +16,7 @@
 
 .odf-topology__back-button {
     background-color: var(--pf-v5-global--palette--black-300);
-    color: #393F44;
+    color: var(--pf-v5-global--Color--dark-200);
     left: var(--pf-v5-global--gutter);
     position: absolute;
     top: var(--pf-v5-global--gutter);
@@ -28,7 +28,7 @@
 }
 
 .odf-topology__message-button {
-    color: #393F44;
+    color: var(--pf-v5-global--Color--dark-200);
     right: var(--pf-v5-global--gutter);
     position: absolute;
     top: var(--pf-v5-global--gutter);
diff --git a/packages/shared/src/dashboards/breakdown-card/breakdown-chart.tsx b/packages/shared/src/dashboards/breakdown-card/breakdown-chart.tsx
index 32cad2bca..ba7330dbc 100644
--- a/packages/shared/src/dashboards/breakdown-card/breakdown-chart.tsx
+++ b/packages/shared/src/dashboards/breakdown-card/breakdown-chart.tsx
@@ -41,7 +41,7 @@ export const LinkableLegend: React.FC<LinkableLegendProps> = React.memo(
             lineHeight={1.2}
             style={[
               { ...datum.labels, fontSize: 9 },
-              { fill: 'black', fontSize: 8 },
+              { fill: `var(--pf-v5-global--Color--200)`, fontSize: 8 },
             ]}
           />
         </g>