ECOPROJECT-4355 | refactor: changing code to adapt styles and colors to dark mode

src/ui/assessment/views/Assessment.tsx

@@ -61,13 +61,13 @@ const filterInnerStyle = css`
   align-items: center;
   gap: 8px;
   flex-wrap: wrap;
-  background: #f5f5f5;
+  background: var(--pf-t--global--background--color--secondary--default);
   padding: 6px 8px;
   border-radius: 6px;
 `;
 
 const filterLabelStyle = css`
-  background: #e7e7e7;
+  background: var(--pf-t--global--background--color--secondary--hover);
   border-radius: 12px;
   padding: 2px 8px;
   font-size: 12px;

src/ui/assessment/views/AssessmentDetails.tsx

@@ -87,11 +87,17 @@ const AssessmentDetails: React.FC = () => {
       title={vm.assessment.name || `Assessment ${vm.id}`}
     >
       <div
-        style={{ background: "white", padding: "16px", borderRadius: "4px" }}
+        style={{
+          background:
+            "var(--pf-t--global--background--color--primary--default)",
+          padding: "16px",
+          borderRadius: "4px",
+        }}
       >
         <div
           style={{
-            borderBottom: "1px solid #eee",
+            borderBottom:
+              "1px solid var(--pf-t--global--border--color--default)",
             paddingBottom: "8px",
             marginBottom: "16px",
           }}
@@ -170,15 +176,17 @@ const AssessmentDetails: React.FC = () => {
 
       <div
         style={{
-          background: "white",
+          background:
+            "var(--pf-t--global--background--color--primary--default)",
           padding: "16px",
           borderRadius: "4px",
           marginTop: "16px",
         }}
       >
         <div
           style={{
-            borderBottom: "1px solid #eee",
+            borderBottom:
+              "1px solid var(--pf-t--global--border--color--default)",
             paddingBottom: "8px",
             marginBottom: "16px",
           }}
@@ -231,7 +239,12 @@ const AssessmentDetails: React.FC = () => {
                       <Button
                         icon={
                           <Icon isInline>
-                            <MonitoringIcon style={{ color: "#0066cc" }} />
+                            <MonitoringIcon
+                              style={{
+                                color:
+                                  "var(--pf-t--global--text--color--link--default)",
+                              }}
+                            />
                           </Icon>
                         }
                         variant="plain"

src/ui/assessment/views/AssessmentsTable.tsx

@@ -466,7 +466,8 @@ export const AssessmentsTable: React.FC<Props> = ({
                       >
                         <ExclamationTriangleIcon
                           style={{
-                            color: "#f0ab00",
+                            color:
+                              "var(--pf-t--global--icon--color--status--warning--default)",
                             cursor: "help",
                           }}
                         />

src/ui/assessment/views/MigrationAssessmentStepsModal.tsx

@@ -30,14 +30,17 @@ export const MigrationAssessmentStepsModal: React.FC<
               cursor: "pointer",
               border:
                 activeTab === "existing"
-                  ? "2px solid #0066CC"
-                  : "1px solid #D2D2D2",
-              backgroundColor: activeTab === "existing" ? "#E7F1FA" : "#FFFFFF",
+                  ? "2px solid var(--pf-t--global--border--color--status--info--default)"
+                  : "1px solid var(--pf-t--global--border--color--default)",
+              backgroundColor:
+                activeTab === "existing"
+                  ? "var(--pf-t--global--background--color--status--info--default)"
+                  : "var(--pf-t--global--background--color--primary--default)",
               borderRadius: "12px",
               padding: "12px 24px",
               fontSize: "14px",
               fontWeight: 500,
-              color: "#151515",
+              color: "var(--pf-t--global--text--color--regular)",
               transition: "all 0.2s ease",
             }}
             type="button"
@@ -50,13 +53,18 @@ export const MigrationAssessmentStepsModal: React.FC<
               flex: 1,
               cursor: "pointer",
               border:
-                activeTab === "new" ? "2px solid #0066CC" : "1px solid #D2D2D2",
-              backgroundColor: activeTab === "new" ? "#E7F1FA" : "#FFFFFF",
+                activeTab === "new"
+                  ? "2px solid var(--pf-t--global--border--color--status--info--default)"
+                  : "1px solid var(--pf-t--global--border--color--default)",
+              backgroundColor:
+                activeTab === "new"
+                  ? "var(--pf-t--global--background--color--status--info--default)"
+                  : "var(--pf-t--global--background--color--primary--default)",
               borderRadius: "12px",
               padding: "12px 24px",
               fontSize: "14px",
               fontWeight: 500,
-              color: "#151515",
+              color: "var(--pf-t--global--text--color--regular)",
               transition: "all 0.2s ease",
             }}
             type="button"

src/ui/core/components/CustomEnterpriseIcon.tsx

@@ -7,7 +7,13 @@ export const CustomEnterpriseIcon: React.FC<{ color?: string }> = ({
 }) => (
   <SVGIcon viewBox="0 0 54 54" style={{ fill: color }}>
     <path d="M22.7165 0L0 5.78496V46.5275L30.2835 54H34.0722L53 46.285V5.78496L26.5052 0H22.7165ZM3.78867 43.5111V10.5943L29.8125 16.4848V49.7971L26.4793 48.9902V43.2105L6.6457 38.3221V44.1809L3.78867 43.5111ZM33.125 17.2441L49.6875 10.7104V43.4637L46.3698 44.8084V40.2627L36.4375 44.2652V48.8584L33.125 50.2295V17.2441ZM6.6457 22.8973L26.4793 27.6961V19.865L6.6457 15.3404V22.8973ZM36.4375 21.1201V28.8352L46.375 24.8379V17.1281L36.4375 21.1201ZM6.6457 34.4672L26.4793 39.2977V31.5193L6.6457 26.7521V34.4672ZM36.4375 32.6953V40.4104L46.3802 36.4131V28.698L36.4375 32.6953Z" />
-    <ellipse cx="43" cy="41" rx="13" ry="13" fill="#F0F0F0" />
+    <ellipse
+      cx="43"
+      cy="41"
+      rx="13"
+      ry="13"
+      fill="var(--pf-t--global--background--color--secondary--default)"
+    />
     <path d="M52.8258 51.7238L53.7655 50.7665C54.0776 50.4485 54.0776 49.9344 53.7688 49.6164L50.4582 46.2439C50.3088 46.0917 50.1062 46.0071 49.8937 46.0071H49.3525C50.2689 44.8131 50.8135 43.3112 50.8135 41.6774C50.8135 37.7907 47.7221 34.6415 43.9068 34.6415C40.0914 34.6415 37 37.7907 37 41.6774C37 45.564 40.0914 48.7132 43.9068 48.7132C45.5106 48.7132 46.9849 48.1585 48.1571 47.2249V47.7762C48.1571 47.9928 48.2401 48.1991 48.3895 48.3513L51.7001 51.7238C52.0122 52.0418 52.517 52.0418 52.8258 51.7238ZM43.9068 46.0071C41.5591 46.0071 39.6564 44.0723 39.6564 41.6774C39.6564 39.2859 41.5558 37.3476 43.9068 37.3476C46.2544 37.3476 48.1571 39.2825 48.1571 41.6774C48.1571 44.0689 46.2577 46.0071 43.9068 46.0071Z" />
   </SVGIcon>
 );

src/ui/core/components/FilterPill.tsx

@@ -12,7 +12,7 @@ const FilterPill: React.FC<Props> = ({ label, onClear, ariaLabel }) => {
   return (
     <span
       style={{
-        background: "#e7e7e7",
+        background: "var(--pf-t--global--background--color--secondary--hover)",
         borderRadius: "12px",
         padding: "2px 6px 2px 8px",
         fontSize: "12px",

src/ui/core/components/MigrationChart.tsx

@@ -48,10 +48,10 @@ type DLength =
 
 const upgradeRecommendationPopover = css`
   .popover-override .pf-v5-c-popover__close .pf-v5-c-button.pf-m-plain {
-    color: #151515;
+    color: var(--pf-t--global--text--color--regular);
   }
   .popover-override .pf-v5-c-popover__close .pf-v5-c-button.pf-m-plain:hover {
-    color: #000;
+    color: var(--pf-t--global--text--color--regular);
   }
 `;
 
@@ -185,7 +185,7 @@ const MigrationChart: React.FC<MigrationChartProps> = ({
                                   verticalAlign: "middle",
                                 }}
                               >
-                                <InfoCircleIcon color="#6a6ec8" />
+                                <InfoCircleIcon color="var(--pf-t--global--icon--color--status--info--default)" />
                               </Button>
                             </Popover>
                           </FlexItem>
@@ -199,7 +199,8 @@ const MigrationChart: React.FC<MigrationChartProps> = ({
                           style={{
                             position: "relative",
                             height: `${barHeight}px`,
-                            backgroundColor: "#F5F5F5",
+                            backgroundColor:
+                              "var(--pf-t--global--background--color--secondary--default)",
                             overflow: "hidden",
                           }}
                         >

src/ui/core/components/MigrationDonutChart.tsx

@@ -58,8 +58,8 @@ const MigrationDonutChart: React.FC<MigrationDonutChartProps> = ({
   width = 420,
   title,
   subTitle,
-  titleColor = "#000000",
-  subTitleColor = "#000000",
+  titleColor = "var(--pf-t--global--text--color--regular)",
+  subTitleColor = "var(--pf-t--global--text--color--subtle)",
   itemsPerRow = 1,
   labelFontSize = 25,
   titleFontSize = 28,
@@ -234,7 +234,10 @@ const MigrationDonutChart: React.FC<MigrationDonutChartProps> = ({
               x={legendX}
               itemsPerRow={itemsPerRow}
               style={{
-                labels: { fontSize: labelFontSize },
+                labels: {
+                  fontSize: labelFontSize,
+                  fill: "var(--pf-t--global--text--color--regular)",
+                },
               }}
             />
           </FlexItem>

src/ui/environment/views/AgentStatusView.tsx

@@ -77,7 +77,7 @@ export const AgentStatusView: React.FC<AgentStatusView.Props> = (props) => {
         return {
           icon: uploadedManually ? (
             <Icon size="md" isInline>
-              <CheckCircleIcon color={globalSuccessColor100.value} />
+              <CheckCircleIcon color={globalSuccessColor100.var} />
             </Icon>
           ) : (
             <Icon isInline>
@@ -90,7 +90,7 @@ export const AgentStatusView: React.FC<AgentStatusView.Props> = (props) => {
         return {
           icon: (
             <Icon size="md" isInline>
-              <InfoCircleIcon color={globalInfoColor100.value} />
+              <InfoCircleIcon color={globalInfoColor100.var} />
             </Icon>
           ),
           text: "Waiting for credentials",
@@ -108,7 +108,7 @@ export const AgentStatusView: React.FC<AgentStatusView.Props> = (props) => {
         return {
           icon: (
             <Icon size="md" isInline>
-              <ExclamationCircleIcon color={globalDangerColor200.value} />
+              <ExclamationCircleIcon color={globalDangerColor200.var} />
             </Icon>
           ),
           text: "Error",
@@ -117,7 +117,7 @@ export const AgentStatusView: React.FC<AgentStatusView.Props> = (props) => {
         return {
           icon: (
             <Icon size="md" isInline>
-              <CheckCircleIcon color={globalSuccessColor100.value} />
+              <CheckCircleIcon color={globalSuccessColor100.var} />
             </Icon>
           ),
           text: "Ready",
@@ -190,7 +190,7 @@ export const AgentStatusView: React.FC<AgentStatusView.Props> = (props) => {
               style={{ padding: 0, minWidth: "auto" }}
             >
               <Icon isInline>
-                <QuestionCircleIcon color={globalInfoColor100.value} />
+                <QuestionCircleIcon color={globalInfoColor100.var} />
               </Icon>
             </Button>
           </Popover>

src/ui/environment/views/SourcesTable.tsx

@@ -67,13 +67,13 @@ const filterChipsWrapper = css`
   align-items: center;
   gap: 8px;
   flex-wrap: wrap;
-  background: #f5f5f5;
+  background: var(--pf-t--global--background--color--secondary--default);
   padding: 6px 8px;
   border-radius: 6px;
 `;
 
 const filterBadge = css`
-  background: #e7e7e7;
+  background: var(--pf-t--global--background--color--secondary--hover);
   border-radius: 12px;
   padding: 2px 8px;
   font-size: 12px;

src/ui/environment/views/VersionStatus.tsx

@@ -27,15 +27,15 @@ const popoverButton = css`
 `;
 
 const latestStyle = css`
-  color: ${globalSuccessColor.value};
+  color: ${globalSuccessColor.var};
 `;
 
 const outdatedStyle = css`
-  color: ${globalWarningColor.value};
+  color: ${globalWarningColor.var};
 `;
 
 const ovaDownloadingStyle = css`
-  color: ${globalInfoColor.value};
+  color: ${globalInfoColor.var};
 `;
 
 // ---------------------------------------------------------------------------
@@ -61,7 +61,7 @@ const OvaDownloading: React.FC = () => (
           className={popoverButton}
         >
           <Icon isInline>
-            <QuestionCircleIcon color={globalInfoColor.value} />
+            <QuestionCircleIcon color={globalInfoColor.var} />
           </Icon>
         </Button>
       </Popover>
@@ -87,7 +87,7 @@ const VersionWarning: React.FC<{ warning: string }> = ({ warning }) => (
           className={popoverButton}
         >
           <Icon isInline>
-            <InfoCircleIcon color={globalWarningColor.value} />
+            <InfoCircleIcon color={globalWarningColor.var} />
           </Icon>
         </Button>
       </Popover>

src/ui/home/views/HowDoesItWork.tsx

@@ -55,7 +55,7 @@ const linkButtonStyle = css`
 `;
 
 const cardStyle = css`
-  --pf-v6-c-card--BorderColor: ${globalTextColorStatusInfoDefault.value};
+  --pf-v6-c-card--BorderColor: ${globalTextColorStatusInfoDefault.var};
 `;
 
 const HOW_DOES_IT_WORK_EXPANDED_KEY =
@@ -73,7 +73,7 @@ export const HowDoesItWork: React.FC = () => {
       <CardHeader onExpand={() => setIsExpanded(!isExpanded)}>
         <CardTitle>
           <Icon size="md" style={{ marginRight: "0.5rem" }}>
-            <InfoCircleIcon color={globalTextColorStatusInfoDefault.value} />
+            <InfoCircleIcon color={globalTextColorStatusInfoDefault.var} />
           </Icon>
           How does this work?
         </CardTitle>
@@ -90,14 +90,14 @@ export const HowDoesItWork: React.FC = () => {
           >
             <FlexItem flex={{ default: "flex_1" }} className={flexItemStyle}>
               <Icon size="xl">
-                <CustomEnterpriseIcon color={globalNonStatusGrayColor.value} />
+                <CustomEnterpriseIcon color={globalNonStatusGrayColor.var} />
               </Icon>
               <Content component="h3" className={headingStyle}>
                 Assess VMware
                 <Tooltip content="As part of the discovery process, we're collecting aggregated data about your VMware environment. This includes information such as the number of clusters, hosts, and VMs; VM counts per operating system type; total CPU cores and memory; network types and VLANs; and a list of datastores.">
                   <Icon size="lg" className={questionIconStyle}>
                     <OutlinedQuestionCircleIcon
-                      color={globalActiveColor300.value}
+                      color={globalActiveColor300.var}
                     />
                   </Icon>
                 </Tooltip>
@@ -117,7 +117,7 @@ export const HowDoesItWork: React.FC = () => {
             </FlexItem>
             <FlexItem flex={{ default: "flex_1" }} className={flexItemStyle}>
               <Icon size="xl">
-                <ClusterIcon color={globalNonStatusGrayColor.value} />
+                <ClusterIcon color={globalNonStatusGrayColor.var} />
               </Icon>
               <Content component="h3" className={headingStyle}>
                 Select Target Cluster
@@ -128,7 +128,7 @@ export const HowDoesItWork: React.FC = () => {
             </FlexItem>
             <FlexItem flex={{ default: "flex_1" }} className={flexItemStyle}>
               <Icon size="xl">
-                <MigrationIcon color={globalNonStatusGrayColor.value} />
+                <MigrationIcon color={globalNonStatusGrayColor.var} />
               </Icon>
               <Content component="h3" className={headingStyle}>
                 Plan Migration

src/ui/report/views/ExampleReport.tsx

@@ -2032,7 +2032,7 @@ const ExampleReport: React.FC = () => {
           <StackItem>
             Discovery VM status :{" "}
             <Icon size="md" isInline>
-              <CheckCircleIcon color={globalSuccessColor100.value} />
+              <CheckCircleIcon color={globalSuccessColor100.var} />
             </Icon>{" "}
             Ready
             <br />

src/ui/report/views/ExportReportButton.tsx

@@ -21,10 +21,14 @@ const dropdownListReset = css`
   padding: 0 !important;
 
   .pf-v6-c-menu__list-item {
-    background-color: #ffffff !important;
+    background-color: var(
+      --pf-t--global--background--color--primary--default
+    ) !important;
   }
   .pf-v6-c-menu__list-item:hover {
-    background-color: #f0f0f0 !important;
+    background-color: var(
+      --pf-t--global--background--color--primary--hover
+    ) !important;
   }
 `;