Improve visibility of ChartDonut subtitle and TextComponent across th…

…emes 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 <[email protected]>
red-hat-storage · Apr 25, 2024 · f825006 · f825006
1 parent 84ebe2f
commit f825006
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 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
@@ -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
@@ -7,16 +7,18 @@ 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';
 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
@@ -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
@@ -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>