From 4112b3b19aea3e325dad2f08d132ea8a2f7b12da Mon Sep 17 00:00:00 2001
From: Donald Labaj <dlabaj@redhat.com>
Date: Tue, 21 Nov 2023 13:28:40 -0500
Subject: [PATCH 1/3] fix(battery): Css fix for batteries.

---
 packages/module/src/Battery/Battery.tsx | 17 +++++++++++------
 1 file changed, 11 insertions(+), 6 deletions(-)

diff --git a/packages/module/src/Battery/Battery.tsx b/packages/module/src/Battery/Battery.tsx
index 32f1b650..ed40d810 100644
--- a/packages/module/src/Battery/Battery.tsx
+++ b/packages/module/src/Battery/Battery.tsx
@@ -32,6 +32,12 @@ const batteryCritical = {
   }
 };
 
+const batteryLineColor = {
+  '& svg': {
+    '& path': { stroke: 'var(--pf-v5-global--palette--black-500)' }
+  }
+};
+
 const useStyles = createUseStyles({
   battery: {
     display: 'inline-block',
@@ -48,6 +54,7 @@ const useStyles = createUseStyles({
   batteryMedium,
   batteryHigh,
   batteryCritical,
+  batteryLineColor
 });
 
 const batteryLevels = (severity: BatterySeverity, classMode?: boolean) => {
@@ -91,17 +98,15 @@ const Battery: React.FunctionComponent<BatteryProps> = ({ severity, label, label
   const classes = useStyles();
   const batteryClasses = clsx(classes.battery, classes[String(batteryLevels(severity, true))], className);
 
-  let ariaLabels = {};
-  if (labelHidden) {
-    ariaLabels = { ['aria-label']: `${severity} ${label}` };
-  }
+  const title = { ['title']: `${severity} ${label}` };
+
 
   const batteryVariant = useMemo(() => batteryLevels(severity) , [ severity ])
 
   return (
     <React.Fragment>
       {/* eslint-disable-next-line react/no-unknown-property */}
-      <i className={batteryClasses} {...ariaLabels} {...props} widget-type="InsightsBattery" widget-id={label}>
+      <i className={batteryClasses} {...title} {...props} widget-type="Battery" widget-id={label}>
         <svg
           version="1.1"
           x="0px"
@@ -114,7 +119,7 @@ const Battery: React.FunctionComponent<BatteryProps> = ({ severity, label, label
             style={{
               fill: 'none',
               fillOpacity: 1,
-              stroke: '#969696',
+              stroke: batteryLineColor['& svg']['& path'].stroke,
               strokeWidth: 41.96378708,
               strokeLinejoin: 'round',
               strokeMiterlimit: 4,

From fcd334258e0682a0aa847cfa9cff32cb39212541 Mon Sep 17 00:00:00 2001
From: Donald Labaj <dlabaj@redhat.com>
Date: Tue, 21 Nov 2023 14:52:31 -0500
Subject: [PATCH 2/3] fix(battery): Css fix for batteries.

---
 .../__snapshots__/Batery.test.tsx.snap        | 66 +++++++++++--------
 1 file changed, 39 insertions(+), 27 deletions(-)

diff --git a/packages/module/src/Battery/__snapshots__/Batery.test.tsx.snap b/packages/module/src/Battery/__snapshots__/Batery.test.tsx.snap
index eb13acf7..12f23ff4 100644
--- a/packages/module/src/Battery/__snapshots__/Batery.test.tsx.snap
+++ b/packages/module/src/Battery/__snapshots__/Batery.test.tsx.snap
@@ -3,10 +3,10 @@
 exports[`Battery component API should hide label 1`] = `
 <div>
   <i
-    aria-label="high high"
     class="battery-0-2-1 batteryHigh-0-2-5"
+    title="high high"
     widget-id="high"
-    widget-type="InsightsBattery"
+    widget-type="Battery"
   >
     <svg
       shape-rendering="geometricpresision"
@@ -18,7 +18,7 @@ exports[`Battery component API should hide label 1`] = `
     >
       <path
         d="m 144.16452,21.032222 h 159.67454 q 123.1748,0 123.1748,128.667868 v 212.64759 q 0,128.66788 -123.1748,128.66788 H 144.16452 q -123.174811,0 -123.174811,-128.66788 V 149.70009 q 0,-128.667868 123.174811,-128.667868 z"
-        style="fill: none; fill-opacity: 1; stroke: #969696; stroke-width: 41.96378708; stroke-linejoin: round; stroke-miterlimit: 4; stroke-dasharray: none; stroke-dashoffset: 0; stroke-opacity: 1;"
+        style="fill: none; fill-opacity: 1; stroke: var(--pf-v5-global--palette--black-500); stroke-width: 41.96378708; stroke-linejoin: round; stroke-miterlimit: 4; stroke-dasharray: none; stroke-dashoffset: 0; stroke-opacity: 1;"
       />
       <path
         d="M 99.168857,235.25069 H 351.33914 c 5.33437,0 9.69886,-5.04 9.69886,-11.2 v -28 c 0,-6.16 -4.36449,-11.2 -9.69886,-11.2 H 99.168857 c -5.334371,0 -9.698857,5.04 -9.698857,11.2 v 28 c 0,6.16 4.364486,11.2 9.698857,11.2 z M 99.168857,327.14542 H 351.33914 c 5.33437,0 9.69886,-5.04 9.69886,-11.19999 v -28 c 0,-6.16001 -4.36449,-11.2 -9.69886,-11.2 H 99.168857 c -5.334371,0 -9.698857,5.04 -9.698857,11.2 v 28 c 0,6.16 4.364486,11.19999 9.698857,11.19999 z M 99.168993,419.0375 H 351.33927 c 5.33437,0 9.69886,-5.04 9.69886,-11.2 v -28 c 0,-6.16 -4.36449,-11.2 -9.69886,-11.2 H 99.168993 c -5.334371,0 -9.698857,5.04 -9.698857,11.2 v 28 c 0,6.16 4.364486,11.2 9.698857,11.2 z"
@@ -32,8 +32,9 @@ exports[`Battery component should render correctly CriticalBattery - 4 1`] = `
 <div>
   <i
     class="battery-0-2-1 batteryCritical-0-2-6"
+    title="4 4"
     widget-id="4"
-    widget-type="InsightsBattery"
+    widget-type="Battery"
   >
     <svg
       shape-rendering="geometricpresision"
@@ -45,7 +46,7 @@ exports[`Battery component should render correctly CriticalBattery - 4 1`] = `
     >
       <path
         d="m 144.16452,21.032222 h 159.67454 q 123.1748,0 123.1748,128.667868 v 212.64759 q 0,128.66788 -123.1748,128.66788 H 144.16452 q -123.174811,0 -123.174811,-128.66788 V 149.70009 q 0,-128.667868 123.174811,-128.667868 z"
-        style="fill: none; fill-opacity: 1; stroke: #969696; stroke-width: 41.96378708; stroke-linejoin: round; stroke-miterlimit: 4; stroke-dasharray: none; stroke-dashoffset: 0; stroke-opacity: 1;"
+        style="fill: none; fill-opacity: 1; stroke: var(--pf-v5-global--palette--black-500); stroke-width: 41.96378708; stroke-linejoin: round; stroke-miterlimit: 4; stroke-dasharray: none; stroke-dashoffset: 0; stroke-opacity: 1;"
       />
       <path
         d="M 99.168858,143.38516 H 351.33914 c 5.33437,0 9.69886,-5.04 9.69886,-11.2 v -28 c 0,-6.16 -4.36449,-11.2 -9.69886,-11.2 H 99.168857 c -5.334371,0 -9.698857,5.04 -9.698857,11.2 v 28 c 0,6.16 4.364486,11.2 9.698858,11.2 z M 99.168857,235.25069 H 351.33914 c 5.33437,0 9.69886,-5.04 9.69886,-11.2 v -28 c 0,-6.16 -4.36449,-11.2 -9.69886,-11.2 H 99.168857 c -5.334371,0 -9.698857,5.04 -9.698857,11.2 v 28 c 0,6.16 4.364486,11.2 9.698857,11.2 z M 99.168857,327.14542 H 351.33914 c 5.33437,0 9.69886,-5.04 9.69886,-11.19999 v -28 c 0,-6.16001 -4.36449,-11.2 -9.69886,-11.2 H 99.168857 c -5.334371,0 -9.698857,5.04 -9.698857,11.2 v 28 c 0,6.16 4.364486,11.19999 9.698857,11.19999 z M 99.168993,419.0375 H 351.33927 c 5.33437,0 9.69886,-5.04 9.69886,-11.2 v -28 c 0,-6.16 -4.36449,-11.2 -9.69886,-11.2 H 99.168993 c -5.334371,0 -9.698857,5.04 -9.698857,11.2 v 28 c 0,6.16 4.364486,11.2 9.698857,11.2 z"
@@ -64,8 +65,9 @@ exports[`Battery component should render correctly CriticalBattery - critical 1`
 <div>
   <i
     class="battery-0-2-1 batteryCritical-0-2-6"
+    title="critical critical"
     widget-id="critical"
-    widget-type="InsightsBattery"
+    widget-type="Battery"
   >
     <svg
       shape-rendering="geometricpresision"
@@ -77,7 +79,7 @@ exports[`Battery component should render correctly CriticalBattery - critical 1`
     >
       <path
         d="m 144.16452,21.032222 h 159.67454 q 123.1748,0 123.1748,128.667868 v 212.64759 q 0,128.66788 -123.1748,128.66788 H 144.16452 q -123.174811,0 -123.174811,-128.66788 V 149.70009 q 0,-128.667868 123.174811,-128.667868 z"
-        style="fill: none; fill-opacity: 1; stroke: #969696; stroke-width: 41.96378708; stroke-linejoin: round; stroke-miterlimit: 4; stroke-dasharray: none; stroke-dashoffset: 0; stroke-opacity: 1;"
+        style="fill: none; fill-opacity: 1; stroke: var(--pf-v5-global--palette--black-500); stroke-width: 41.96378708; stroke-linejoin: round; stroke-miterlimit: 4; stroke-dasharray: none; stroke-dashoffset: 0; stroke-opacity: 1;"
       />
       <path
         d="M 99.168858,143.38516 H 351.33914 c 5.33437,0 9.69886,-5.04 9.69886,-11.2 v -28 c 0,-6.16 -4.36449,-11.2 -9.69886,-11.2 H 99.168857 c -5.334371,0 -9.698857,5.04 -9.698857,11.2 v 28 c 0,6.16 4.364486,11.2 9.698858,11.2 z M 99.168857,235.25069 H 351.33914 c 5.33437,0 9.69886,-5.04 9.69886,-11.2 v -28 c 0,-6.16 -4.36449,-11.2 -9.69886,-11.2 H 99.168857 c -5.334371,0 -9.698857,5.04 -9.698857,11.2 v 28 c 0,6.16 4.364486,11.2 9.698857,11.2 z M 99.168857,327.14542 H 351.33914 c 5.33437,0 9.69886,-5.04 9.69886,-11.19999 v -28 c 0,-6.16001 -4.36449,-11.2 -9.69886,-11.2 H 99.168857 c -5.334371,0 -9.698857,5.04 -9.698857,11.2 v 28 c 0,6.16 4.364486,11.19999 9.698857,11.19999 z M 99.168993,419.0375 H 351.33927 c 5.33437,0 9.69886,-5.04 9.69886,-11.2 v -28 c 0,-6.16 -4.36449,-11.2 -9.69886,-11.2 H 99.168993 c -5.334371,0 -9.698857,5.04 -9.698857,11.2 v 28 c 0,6.16 4.364486,11.2 9.698857,11.2 z"
@@ -96,8 +98,9 @@ exports[`Battery component should render correctly HighBattery - 3 1`] = `
 <div>
   <i
     class="battery-0-2-1 batteryHigh-0-2-5"
+    title="3 3"
     widget-id="3"
-    widget-type="InsightsBattery"
+    widget-type="Battery"
   >
     <svg
       shape-rendering="geometricpresision"
@@ -109,7 +112,7 @@ exports[`Battery component should render correctly HighBattery - 3 1`] = `
     >
       <path
         d="m 144.16452,21.032222 h 159.67454 q 123.1748,0 123.1748,128.667868 v 212.64759 q 0,128.66788 -123.1748,128.66788 H 144.16452 q -123.174811,0 -123.174811,-128.66788 V 149.70009 q 0,-128.667868 123.174811,-128.667868 z"
-        style="fill: none; fill-opacity: 1; stroke: #969696; stroke-width: 41.96378708; stroke-linejoin: round; stroke-miterlimit: 4; stroke-dasharray: none; stroke-dashoffset: 0; stroke-opacity: 1;"
+        style="fill: none; fill-opacity: 1; stroke: var(--pf-v5-global--palette--black-500); stroke-width: 41.96378708; stroke-linejoin: round; stroke-miterlimit: 4; stroke-dasharray: none; stroke-dashoffset: 0; stroke-opacity: 1;"
       />
       <path
         d="M 99.168857,235.25069 H 351.33914 c 5.33437,0 9.69886,-5.04 9.69886,-11.2 v -28 c 0,-6.16 -4.36449,-11.2 -9.69886,-11.2 H 99.168857 c -5.334371,0 -9.698857,5.04 -9.698857,11.2 v 28 c 0,6.16 4.364486,11.2 9.698857,11.2 z M 99.168857,327.14542 H 351.33914 c 5.33437,0 9.69886,-5.04 9.69886,-11.19999 v -28 c 0,-6.16001 -4.36449,-11.2 -9.69886,-11.2 H 99.168857 c -5.334371,0 -9.698857,5.04 -9.698857,11.2 v 28 c 0,6.16 4.364486,11.19999 9.698857,11.19999 z M 99.168993,419.0375 H 351.33927 c 5.33437,0 9.69886,-5.04 9.69886,-11.2 v -28 c 0,-6.16 -4.36449,-11.2 -9.69886,-11.2 H 99.168993 c -5.334371,0 -9.698857,5.04 -9.698857,11.2 v 28 c 0,6.16 4.364486,11.2 9.698857,11.2 z"
@@ -128,8 +131,9 @@ exports[`Battery component should render correctly HighBattery - error 1`] = `
 <div>
   <i
     class="battery-0-2-1 batteryHigh-0-2-5"
+    title="error error"
     widget-id="error"
-    widget-type="InsightsBattery"
+    widget-type="Battery"
   >
     <svg
       shape-rendering="geometricpresision"
@@ -141,7 +145,7 @@ exports[`Battery component should render correctly HighBattery - error 1`] = `
     >
       <path
         d="m 144.16452,21.032222 h 159.67454 q 123.1748,0 123.1748,128.667868 v 212.64759 q 0,128.66788 -123.1748,128.66788 H 144.16452 q -123.174811,0 -123.174811,-128.66788 V 149.70009 q 0,-128.667868 123.174811,-128.667868 z"
-        style="fill: none; fill-opacity: 1; stroke: #969696; stroke-width: 41.96378708; stroke-linejoin: round; stroke-miterlimit: 4; stroke-dasharray: none; stroke-dashoffset: 0; stroke-opacity: 1;"
+        style="fill: none; fill-opacity: 1; stroke: var(--pf-v5-global--palette--black-500); stroke-width: 41.96378708; stroke-linejoin: round; stroke-miterlimit: 4; stroke-dasharray: none; stroke-dashoffset: 0; stroke-opacity: 1;"
       />
       <path
         d="M 99.168857,235.25069 H 351.33914 c 5.33437,0 9.69886,-5.04 9.69886,-11.2 v -28 c 0,-6.16 -4.36449,-11.2 -9.69886,-11.2 H 99.168857 c -5.334371,0 -9.698857,5.04 -9.698857,11.2 v 28 c 0,6.16 4.364486,11.2 9.698857,11.2 z M 99.168857,327.14542 H 351.33914 c 5.33437,0 9.69886,-5.04 9.69886,-11.19999 v -28 c 0,-6.16001 -4.36449,-11.2 -9.69886,-11.2 H 99.168857 c -5.334371,0 -9.698857,5.04 -9.698857,11.2 v 28 c 0,6.16 4.364486,11.19999 9.698857,11.19999 z M 99.168993,419.0375 H 351.33927 c 5.33437,0 9.69886,-5.04 9.69886,-11.2 v -28 c 0,-6.16 -4.36449,-11.2 -9.69886,-11.2 H 99.168993 c -5.334371,0 -9.698857,5.04 -9.698857,11.2 v 28 c 0,6.16 4.364486,11.2 9.698857,11.2 z"
@@ -160,8 +164,9 @@ exports[`Battery component should render correctly HighBattery - high 1`] = `
 <div>
   <i
     class="battery-0-2-1 batteryHigh-0-2-5"
+    title="high high"
     widget-id="high"
-    widget-type="InsightsBattery"
+    widget-type="Battery"
   >
     <svg
       shape-rendering="geometricpresision"
@@ -173,7 +178,7 @@ exports[`Battery component should render correctly HighBattery - high 1`] = `
     >
       <path
         d="m 144.16452,21.032222 h 159.67454 q 123.1748,0 123.1748,128.667868 v 212.64759 q 0,128.66788 -123.1748,128.66788 H 144.16452 q -123.174811,0 -123.174811,-128.66788 V 149.70009 q 0,-128.667868 123.174811,-128.667868 z"
-        style="fill: none; fill-opacity: 1; stroke: #969696; stroke-width: 41.96378708; stroke-linejoin: round; stroke-miterlimit: 4; stroke-dasharray: none; stroke-dashoffset: 0; stroke-opacity: 1;"
+        style="fill: none; fill-opacity: 1; stroke: var(--pf-v5-global--palette--black-500); stroke-width: 41.96378708; stroke-linejoin: round; stroke-miterlimit: 4; stroke-dasharray: none; stroke-dashoffset: 0; stroke-opacity: 1;"
       />
       <path
         d="M 99.168857,235.25069 H 351.33914 c 5.33437,0 9.69886,-5.04 9.69886,-11.2 v -28 c 0,-6.16 -4.36449,-11.2 -9.69886,-11.2 H 99.168857 c -5.334371,0 -9.698857,5.04 -9.698857,11.2 v 28 c 0,6.16 4.364486,11.2 9.698857,11.2 z M 99.168857,327.14542 H 351.33914 c 5.33437,0 9.69886,-5.04 9.69886,-11.19999 v -28 c 0,-6.16001 -4.36449,-11.2 -9.69886,-11.2 H 99.168857 c -5.334371,0 -9.698857,5.04 -9.698857,11.2 v 28 c 0,6.16 4.364486,11.19999 9.698857,11.19999 z M 99.168993,419.0375 H 351.33927 c 5.33437,0 9.69886,-5.04 9.69886,-11.2 v -28 c 0,-6.16 -4.36449,-11.2 -9.69886,-11.2 H 99.168993 c -5.334371,0 -9.698857,5.04 -9.698857,11.2 v 28 c 0,6.16 4.364486,11.2 9.698857,11.2 z"
@@ -192,8 +197,9 @@ exports[`Battery component should render correctly LowBattery - 1 1`] = `
 <div>
   <i
     class="battery-0-2-1 batteryLow-0-2-3"
+    title="1 1"
     widget-id="1"
-    widget-type="InsightsBattery"
+    widget-type="Battery"
   >
     <svg
       shape-rendering="geometricpresision"
@@ -205,7 +211,7 @@ exports[`Battery component should render correctly LowBattery - 1 1`] = `
     >
       <path
         d="m 144.16452,21.032222 h 159.67454 q 123.1748,0 123.1748,128.667868 v 212.64759 q 0,128.66788 -123.1748,128.66788 H 144.16452 q -123.174811,0 -123.174811,-128.66788 V 149.70009 q 0,-128.667868 123.174811,-128.667868 z"
-        style="fill: none; fill-opacity: 1; stroke: #969696; stroke-width: 41.96378708; stroke-linejoin: round; stroke-miterlimit: 4; stroke-dasharray: none; stroke-dashoffset: 0; stroke-opacity: 1;"
+        style="fill: none; fill-opacity: 1; stroke: var(--pf-v5-global--palette--black-500); stroke-width: 41.96378708; stroke-linejoin: round; stroke-miterlimit: 4; stroke-dasharray: none; stroke-dashoffset: 0; stroke-opacity: 1;"
       />
       <path
         d="M 99.168993,419.0375 H 351.33927 c 5.33437,0 9.69886,-5.04 9.69886,-11.2 v -28 c 0,-6.16 -4.36449,-11.2 -9.69886,-11.2 H 99.168993 c -5.334371,0 -9.698857,5.04 -9.698857,11.2 v 28 c 0,6.16 4.364486,11.2 9.698857,11.2 z"
@@ -224,8 +230,9 @@ exports[`Battery component should render correctly LowBattery - info 1`] = `
 <div>
   <i
     class="battery-0-2-1 batteryLow-0-2-3"
+    title="info info"
     widget-id="info"
-    widget-type="InsightsBattery"
+    widget-type="Battery"
   >
     <svg
       shape-rendering="geometricpresision"
@@ -237,7 +244,7 @@ exports[`Battery component should render correctly LowBattery - info 1`] = `
     >
       <path
         d="m 144.16452,21.032222 h 159.67454 q 123.1748,0 123.1748,128.667868 v 212.64759 q 0,128.66788 -123.1748,128.66788 H 144.16452 q -123.174811,0 -123.174811,-128.66788 V 149.70009 q 0,-128.667868 123.174811,-128.667868 z"
-        style="fill: none; fill-opacity: 1; stroke: #969696; stroke-width: 41.96378708; stroke-linejoin: round; stroke-miterlimit: 4; stroke-dasharray: none; stroke-dashoffset: 0; stroke-opacity: 1;"
+        style="fill: none; fill-opacity: 1; stroke: var(--pf-v5-global--palette--black-500); stroke-width: 41.96378708; stroke-linejoin: round; stroke-miterlimit: 4; stroke-dasharray: none; stroke-dashoffset: 0; stroke-opacity: 1;"
       />
       <path
         d="M 99.168993,419.0375 H 351.33927 c 5.33437,0 9.69886,-5.04 9.69886,-11.2 v -28 c 0,-6.16 -4.36449,-11.2 -9.69886,-11.2 H 99.168993 c -5.334371,0 -9.698857,5.04 -9.698857,11.2 v 28 c 0,6.16 4.364486,11.2 9.698857,11.2 z"
@@ -256,8 +263,9 @@ exports[`Battery component should render correctly LowBattery - low 1`] = `
 <div>
   <i
     class="battery-0-2-1 batteryLow-0-2-3"
+    title="low low"
     widget-id="low"
-    widget-type="InsightsBattery"
+    widget-type="Battery"
   >
     <svg
       shape-rendering="geometricpresision"
@@ -269,7 +277,7 @@ exports[`Battery component should render correctly LowBattery - low 1`] = `
     >
       <path
         d="m 144.16452,21.032222 h 159.67454 q 123.1748,0 123.1748,128.667868 v 212.64759 q 0,128.66788 -123.1748,128.66788 H 144.16452 q -123.174811,0 -123.174811,-128.66788 V 149.70009 q 0,-128.667868 123.174811,-128.667868 z"
-        style="fill: none; fill-opacity: 1; stroke: #969696; stroke-width: 41.96378708; stroke-linejoin: round; stroke-miterlimit: 4; stroke-dasharray: none; stroke-dashoffset: 0; stroke-opacity: 1;"
+        style="fill: none; fill-opacity: 1; stroke: var(--pf-v5-global--palette--black-500); stroke-width: 41.96378708; stroke-linejoin: round; stroke-miterlimit: 4; stroke-dasharray: none; stroke-dashoffset: 0; stroke-opacity: 1;"
       />
       <path
         d="M 99.168993,419.0375 H 351.33927 c 5.33437,0 9.69886,-5.04 9.69886,-11.2 v -28 c 0,-6.16 -4.36449,-11.2 -9.69886,-11.2 H 99.168993 c -5.334371,0 -9.698857,5.04 -9.698857,11.2 v 28 c 0,6.16 4.364486,11.2 9.698857,11.2 z"
@@ -288,8 +296,9 @@ exports[`Battery component should render correctly MediumBattery - 2 1`] = `
 <div>
   <i
     class="battery-0-2-1 batteryMedium-0-2-4"
+    title="2 2"
     widget-id="2"
-    widget-type="InsightsBattery"
+    widget-type="Battery"
   >
     <svg
       shape-rendering="geometricpresision"
@@ -301,7 +310,7 @@ exports[`Battery component should render correctly MediumBattery - 2 1`] = `
     >
       <path
         d="m 144.16452,21.032222 h 159.67454 q 123.1748,0 123.1748,128.667868 v 212.64759 q 0,128.66788 -123.1748,128.66788 H 144.16452 q -123.174811,0 -123.174811,-128.66788 V 149.70009 q 0,-128.667868 123.174811,-128.667868 z"
-        style="fill: none; fill-opacity: 1; stroke: #969696; stroke-width: 41.96378708; stroke-linejoin: round; stroke-miterlimit: 4; stroke-dasharray: none; stroke-dashoffset: 0; stroke-opacity: 1;"
+        style="fill: none; fill-opacity: 1; stroke: var(--pf-v5-global--palette--black-500); stroke-width: 41.96378708; stroke-linejoin: round; stroke-miterlimit: 4; stroke-dasharray: none; stroke-dashoffset: 0; stroke-opacity: 1;"
       />
       <path
         d="M 99.168857,327.14542 H 351.33914 c 5.33437,0 9.69886,-5.04 9.69886,-11.19999 v -28 c 0,-6.16001 -4.36449,-11.2 -9.69886,-11.2 H 99.168857 c -5.334371,0 -9.698857,5.04 -9.698857,11.2 v 28 c 0,6.16 4.364486,11.19999 9.698857,11.19999 z M 99.168993,419.0375 H 351.33927 c 5.33437,0 9.69886,-5.04 9.69886,-11.2 v -28 c 0,-6.16 -4.36449,-11.2 -9.69886,-11.2 H 99.168993 c -5.334371,0 -9.698857,5.04 -9.698857,11.2 v 28 c 0,6.16 4.364486,11.2 9.698857,11.2 z"
@@ -320,8 +329,9 @@ exports[`Battery component should render correctly MediumBattery - medium 1`] =
 <div>
   <i
     class="battery-0-2-1 batteryMedium-0-2-4"
+    title="medium medium"
     widget-id="medium"
-    widget-type="InsightsBattery"
+    widget-type="Battery"
   >
     <svg
       shape-rendering="geometricpresision"
@@ -333,7 +343,7 @@ exports[`Battery component should render correctly MediumBattery - medium 1`] =
     >
       <path
         d="m 144.16452,21.032222 h 159.67454 q 123.1748,0 123.1748,128.667868 v 212.64759 q 0,128.66788 -123.1748,128.66788 H 144.16452 q -123.174811,0 -123.174811,-128.66788 V 149.70009 q 0,-128.667868 123.174811,-128.667868 z"
-        style="fill: none; fill-opacity: 1; stroke: #969696; stroke-width: 41.96378708; stroke-linejoin: round; stroke-miterlimit: 4; stroke-dasharray: none; stroke-dashoffset: 0; stroke-opacity: 1;"
+        style="fill: none; fill-opacity: 1; stroke: var(--pf-v5-global--palette--black-500); stroke-width: 41.96378708; stroke-linejoin: round; stroke-miterlimit: 4; stroke-dasharray: none; stroke-dashoffset: 0; stroke-opacity: 1;"
       />
       <path
         d="M 99.168857,327.14542 H 351.33914 c 5.33437,0 9.69886,-5.04 9.69886,-11.19999 v -28 c 0,-6.16001 -4.36449,-11.2 -9.69886,-11.2 H 99.168857 c -5.334371,0 -9.698857,5.04 -9.698857,11.2 v 28 c 0,6.16 4.364486,11.19999 9.698857,11.19999 z M 99.168993,419.0375 H 351.33927 c 5.33437,0 9.69886,-5.04 9.69886,-11.2 v -28 c 0,-6.16 -4.36449,-11.2 -9.69886,-11.2 H 99.168993 c -5.334371,0 -9.698857,5.04 -9.698857,11.2 v 28 c 0,6.16 4.364486,11.2 9.698857,11.2 z"
@@ -352,8 +362,9 @@ exports[`Battery component should render correctly MediumBattery - warn 1`] = `
 <div>
   <i
     class="battery-0-2-1 batteryMedium-0-2-4"
+    title="warn warn"
     widget-id="warn"
-    widget-type="InsightsBattery"
+    widget-type="Battery"
   >
     <svg
       shape-rendering="geometricpresision"
@@ -365,7 +376,7 @@ exports[`Battery component should render correctly MediumBattery - warn 1`] = `
     >
       <path
         d="m 144.16452,21.032222 h 159.67454 q 123.1748,0 123.1748,128.667868 v 212.64759 q 0,128.66788 -123.1748,128.66788 H 144.16452 q -123.174811,0 -123.174811,-128.66788 V 149.70009 q 0,-128.667868 123.174811,-128.667868 z"
-        style="fill: none; fill-opacity: 1; stroke: #969696; stroke-width: 41.96378708; stroke-linejoin: round; stroke-miterlimit: 4; stroke-dasharray: none; stroke-dashoffset: 0; stroke-opacity: 1;"
+        style="fill: none; fill-opacity: 1; stroke: var(--pf-v5-global--palette--black-500); stroke-width: 41.96378708; stroke-linejoin: round; stroke-miterlimit: 4; stroke-dasharray: none; stroke-dashoffset: 0; stroke-opacity: 1;"
       />
       <path
         d="M 99.168857,327.14542 H 351.33914 c 5.33437,0 9.69886,-5.04 9.69886,-11.19999 v -28 c 0,-6.16001 -4.36449,-11.2 -9.69886,-11.2 H 99.168857 c -5.334371,0 -9.698857,5.04 -9.698857,11.2 v 28 c 0,6.16 4.364486,11.19999 9.698857,11.19999 z M 99.168993,419.0375 H 351.33927 c 5.33437,0 9.69886,-5.04 9.69886,-11.2 v -28 c 0,-6.16 -4.36449,-11.2 -9.69886,-11.2 H 99.168993 c -5.334371,0 -9.698857,5.04 -9.698857,11.2 v 28 c 0,6.16 4.364486,11.2 9.698857,11.2 z"
@@ -384,8 +395,9 @@ exports[`Battery component should render correctly NullBatery, default 1`] = `
 <div>
   <i
     class="battery-0-2-1 batteryDefault-0-2-2"
+    title=" "
     widget-id=""
-    widget-type="InsightsBattery"
+    widget-type="Battery"
   >
     <svg
       shape-rendering="geometricpresision"
@@ -397,7 +409,7 @@ exports[`Battery component should render correctly NullBatery, default 1`] = `
     >
       <path
         d="m 144.16452,21.032222 h 159.67454 q 123.1748,0 123.1748,128.667868 v 212.64759 q 0,128.66788 -123.1748,128.66788 H 144.16452 q -123.174811,0 -123.174811,-128.66788 V 149.70009 q 0,-128.667868 123.174811,-128.667868 z"
-        style="fill: none; fill-opacity: 1; stroke: #969696; stroke-width: 41.96378708; stroke-linejoin: round; stroke-miterlimit: 4; stroke-dasharray: none; stroke-dashoffset: 0; stroke-opacity: 1;"
+        style="fill: none; fill-opacity: 1; stroke: var(--pf-v5-global--palette--black-500); stroke-width: 41.96378708; stroke-linejoin: round; stroke-miterlimit: 4; stroke-dasharray: none; stroke-dashoffset: 0; stroke-opacity: 1;"
       />
       <path
         d="M 99.168858,143.38516 H 351.33914 c 5.33437,0 9.69886,-5.04 9.69886,-11.2 v -28 c 0,-6.16 -4.36449,-11.2 -9.69886,-11.2 H 99.168857 c -5.334371,0 -9.698857,5.04 -9.698857,11.2 v 28 c 0,6.16 4.364486,11.2 9.698858,11.2 z M 99.168857,235.25069 H 351.33914 c 5.33437,0 9.69886,-5.04 9.69886,-11.2 v -28 c 0,-6.16 -4.36449,-11.2 -9.69886,-11.2 H 99.168857 c -5.334371,0 -9.698857,5.04 -9.698857,11.2 v 28 c 0,6.16 4.364486,11.2 9.698857,11.2 z M 99.168857,327.14542 H 351.33914 c 5.33437,0 9.69886,-5.04 9.69886,-11.19999 v -28 c 0,-6.16001 -4.36449,-11.2 -9.69886,-11.2 H 99.168857 c -5.334371,0 -9.698857,5.04 -9.698857,11.2 v 28 c 0,6.16 4.364486,11.19999 9.698857,11.19999 z M 99.168993,419.0375 H 351.33927 c 5.33437,0 9.69886,-5.04 9.69886,-11.2 v -28 c 0,-6.16 -4.36449,-11.2 -9.69886,-11.2 H 99.168993 c -5.334371,0 -9.698857,5.04 -9.698857,11.2 v 28 c 0,6.16 4.364486,11.2 9.698857,11.2 z"

From 6e94f54791b05fbb11dc11ca1de19397a1d7ad2b Mon Sep 17 00:00:00 2001
From: Donald Labaj <dlabaj@redhat.com>
Date: Tue, 21 Nov 2023 15:28:49 -0500
Subject: [PATCH 3/3] fix(battery): Updated with review comments.

---
 packages/module/src/Battery/Battery.tsx       |  4 +--
 .../__snapshots__/Batery.test.tsx.snap        | 26 +++++++++----------
 2 files changed, 15 insertions(+), 15 deletions(-)

diff --git a/packages/module/src/Battery/Battery.tsx b/packages/module/src/Battery/Battery.tsx
index ed40d810..3587f7a6 100644
--- a/packages/module/src/Battery/Battery.tsx
+++ b/packages/module/src/Battery/Battery.tsx
@@ -4,7 +4,7 @@ import { createUseStyles } from 'react-jss'
 
 const batteryDefault = {
   '& svg': {
-    '& path': { fill: 'var(--pf-v5-global--disabled-color--200)' }
+    '& path': { fill: 'var(--pf-v5-global--icon--Color--light)' }
   }
 };
 
@@ -34,7 +34,7 @@ const batteryCritical = {
 
 const batteryLineColor = {
   '& svg': {
-    '& path': { stroke: 'var(--pf-v5-global--palette--black-500)' }
+    '& path': { stroke: 'var(--pf-v5-global--BorderColor--100)' }
   }
 };
 
diff --git a/packages/module/src/Battery/__snapshots__/Batery.test.tsx.snap b/packages/module/src/Battery/__snapshots__/Batery.test.tsx.snap
index 12f23ff4..9381cd31 100644
--- a/packages/module/src/Battery/__snapshots__/Batery.test.tsx.snap
+++ b/packages/module/src/Battery/__snapshots__/Batery.test.tsx.snap
@@ -18,7 +18,7 @@ exports[`Battery component API should hide label 1`] = `
     >
       <path
         d="m 144.16452,21.032222 h 159.67454 q 123.1748,0 123.1748,128.667868 v 212.64759 q 0,128.66788 -123.1748,128.66788 H 144.16452 q -123.174811,0 -123.174811,-128.66788 V 149.70009 q 0,-128.667868 123.174811,-128.667868 z"
-        style="fill: none; fill-opacity: 1; stroke: var(--pf-v5-global--palette--black-500); stroke-width: 41.96378708; stroke-linejoin: round; stroke-miterlimit: 4; stroke-dasharray: none; stroke-dashoffset: 0; stroke-opacity: 1;"
+        style="fill: none; fill-opacity: 1; stroke: var(--pf-v5-global--BorderColor--100); stroke-width: 41.96378708; stroke-linejoin: round; stroke-miterlimit: 4; stroke-dasharray: none; stroke-dashoffset: 0; stroke-opacity: 1;"
       />
       <path
         d="M 99.168857,235.25069 H 351.33914 c 5.33437,0 9.69886,-5.04 9.69886,-11.2 v -28 c 0,-6.16 -4.36449,-11.2 -9.69886,-11.2 H 99.168857 c -5.334371,0 -9.698857,5.04 -9.698857,11.2 v 28 c 0,6.16 4.364486,11.2 9.698857,11.2 z M 99.168857,327.14542 H 351.33914 c 5.33437,0 9.69886,-5.04 9.69886,-11.19999 v -28 c 0,-6.16001 -4.36449,-11.2 -9.69886,-11.2 H 99.168857 c -5.334371,0 -9.698857,5.04 -9.698857,11.2 v 28 c 0,6.16 4.364486,11.19999 9.698857,11.19999 z M 99.168993,419.0375 H 351.33927 c 5.33437,0 9.69886,-5.04 9.69886,-11.2 v -28 c 0,-6.16 -4.36449,-11.2 -9.69886,-11.2 H 99.168993 c -5.334371,0 -9.698857,5.04 -9.698857,11.2 v 28 c 0,6.16 4.364486,11.2 9.698857,11.2 z"
@@ -46,7 +46,7 @@ exports[`Battery component should render correctly CriticalBattery - 4 1`] = `
     >
       <path
         d="m 144.16452,21.032222 h 159.67454 q 123.1748,0 123.1748,128.667868 v 212.64759 q 0,128.66788 -123.1748,128.66788 H 144.16452 q -123.174811,0 -123.174811,-128.66788 V 149.70009 q 0,-128.667868 123.174811,-128.667868 z"
-        style="fill: none; fill-opacity: 1; stroke: var(--pf-v5-global--palette--black-500); stroke-width: 41.96378708; stroke-linejoin: round; stroke-miterlimit: 4; stroke-dasharray: none; stroke-dashoffset: 0; stroke-opacity: 1;"
+        style="fill: none; fill-opacity: 1; stroke: var(--pf-v5-global--BorderColor--100); stroke-width: 41.96378708; stroke-linejoin: round; stroke-miterlimit: 4; stroke-dasharray: none; stroke-dashoffset: 0; stroke-opacity: 1;"
       />
       <path
         d="M 99.168858,143.38516 H 351.33914 c 5.33437,0 9.69886,-5.04 9.69886,-11.2 v -28 c 0,-6.16 -4.36449,-11.2 -9.69886,-11.2 H 99.168857 c -5.334371,0 -9.698857,5.04 -9.698857,11.2 v 28 c 0,6.16 4.364486,11.2 9.698858,11.2 z M 99.168857,235.25069 H 351.33914 c 5.33437,0 9.69886,-5.04 9.69886,-11.2 v -28 c 0,-6.16 -4.36449,-11.2 -9.69886,-11.2 H 99.168857 c -5.334371,0 -9.698857,5.04 -9.698857,11.2 v 28 c 0,6.16 4.364486,11.2 9.698857,11.2 z M 99.168857,327.14542 H 351.33914 c 5.33437,0 9.69886,-5.04 9.69886,-11.19999 v -28 c 0,-6.16001 -4.36449,-11.2 -9.69886,-11.2 H 99.168857 c -5.334371,0 -9.698857,5.04 -9.698857,11.2 v 28 c 0,6.16 4.364486,11.19999 9.698857,11.19999 z M 99.168993,419.0375 H 351.33927 c 5.33437,0 9.69886,-5.04 9.69886,-11.2 v -28 c 0,-6.16 -4.36449,-11.2 -9.69886,-11.2 H 99.168993 c -5.334371,0 -9.698857,5.04 -9.698857,11.2 v 28 c 0,6.16 4.364486,11.2 9.698857,11.2 z"
@@ -79,7 +79,7 @@ exports[`Battery component should render correctly CriticalBattery - critical 1`
     >
       <path
         d="m 144.16452,21.032222 h 159.67454 q 123.1748,0 123.1748,128.667868 v 212.64759 q 0,128.66788 -123.1748,128.66788 H 144.16452 q -123.174811,0 -123.174811,-128.66788 V 149.70009 q 0,-128.667868 123.174811,-128.667868 z"
-        style="fill: none; fill-opacity: 1; stroke: var(--pf-v5-global--palette--black-500); stroke-width: 41.96378708; stroke-linejoin: round; stroke-miterlimit: 4; stroke-dasharray: none; stroke-dashoffset: 0; stroke-opacity: 1;"
+        style="fill: none; fill-opacity: 1; stroke: var(--pf-v5-global--BorderColor--100); stroke-width: 41.96378708; stroke-linejoin: round; stroke-miterlimit: 4; stroke-dasharray: none; stroke-dashoffset: 0; stroke-opacity: 1;"
       />
       <path
         d="M 99.168858,143.38516 H 351.33914 c 5.33437,0 9.69886,-5.04 9.69886,-11.2 v -28 c 0,-6.16 -4.36449,-11.2 -9.69886,-11.2 H 99.168857 c -5.334371,0 -9.698857,5.04 -9.698857,11.2 v 28 c 0,6.16 4.364486,11.2 9.698858,11.2 z M 99.168857,235.25069 H 351.33914 c 5.33437,0 9.69886,-5.04 9.69886,-11.2 v -28 c 0,-6.16 -4.36449,-11.2 -9.69886,-11.2 H 99.168857 c -5.334371,0 -9.698857,5.04 -9.698857,11.2 v 28 c 0,6.16 4.364486,11.2 9.698857,11.2 z M 99.168857,327.14542 H 351.33914 c 5.33437,0 9.69886,-5.04 9.69886,-11.19999 v -28 c 0,-6.16001 -4.36449,-11.2 -9.69886,-11.2 H 99.168857 c -5.334371,0 -9.698857,5.04 -9.698857,11.2 v 28 c 0,6.16 4.364486,11.19999 9.698857,11.19999 z M 99.168993,419.0375 H 351.33927 c 5.33437,0 9.69886,-5.04 9.69886,-11.2 v -28 c 0,-6.16 -4.36449,-11.2 -9.69886,-11.2 H 99.168993 c -5.334371,0 -9.698857,5.04 -9.698857,11.2 v 28 c 0,6.16 4.364486,11.2 9.698857,11.2 z"
@@ -112,7 +112,7 @@ exports[`Battery component should render correctly HighBattery - 3 1`] = `
     >
       <path
         d="m 144.16452,21.032222 h 159.67454 q 123.1748,0 123.1748,128.667868 v 212.64759 q 0,128.66788 -123.1748,128.66788 H 144.16452 q -123.174811,0 -123.174811,-128.66788 V 149.70009 q 0,-128.667868 123.174811,-128.667868 z"
-        style="fill: none; fill-opacity: 1; stroke: var(--pf-v5-global--palette--black-500); stroke-width: 41.96378708; stroke-linejoin: round; stroke-miterlimit: 4; stroke-dasharray: none; stroke-dashoffset: 0; stroke-opacity: 1;"
+        style="fill: none; fill-opacity: 1; stroke: var(--pf-v5-global--BorderColor--100); stroke-width: 41.96378708; stroke-linejoin: round; stroke-miterlimit: 4; stroke-dasharray: none; stroke-dashoffset: 0; stroke-opacity: 1;"
       />
       <path
         d="M 99.168857,235.25069 H 351.33914 c 5.33437,0 9.69886,-5.04 9.69886,-11.2 v -28 c 0,-6.16 -4.36449,-11.2 -9.69886,-11.2 H 99.168857 c -5.334371,0 -9.698857,5.04 -9.698857,11.2 v 28 c 0,6.16 4.364486,11.2 9.698857,11.2 z M 99.168857,327.14542 H 351.33914 c 5.33437,0 9.69886,-5.04 9.69886,-11.19999 v -28 c 0,-6.16001 -4.36449,-11.2 -9.69886,-11.2 H 99.168857 c -5.334371,0 -9.698857,5.04 -9.698857,11.2 v 28 c 0,6.16 4.364486,11.19999 9.698857,11.19999 z M 99.168993,419.0375 H 351.33927 c 5.33437,0 9.69886,-5.04 9.69886,-11.2 v -28 c 0,-6.16 -4.36449,-11.2 -9.69886,-11.2 H 99.168993 c -5.334371,0 -9.698857,5.04 -9.698857,11.2 v 28 c 0,6.16 4.364486,11.2 9.698857,11.2 z"
@@ -145,7 +145,7 @@ exports[`Battery component should render correctly HighBattery - error 1`] = `
     >
       <path
         d="m 144.16452,21.032222 h 159.67454 q 123.1748,0 123.1748,128.667868 v 212.64759 q 0,128.66788 -123.1748,128.66788 H 144.16452 q -123.174811,0 -123.174811,-128.66788 V 149.70009 q 0,-128.667868 123.174811,-128.667868 z"
-        style="fill: none; fill-opacity: 1; stroke: var(--pf-v5-global--palette--black-500); stroke-width: 41.96378708; stroke-linejoin: round; stroke-miterlimit: 4; stroke-dasharray: none; stroke-dashoffset: 0; stroke-opacity: 1;"
+        style="fill: none; fill-opacity: 1; stroke: var(--pf-v5-global--BorderColor--100); stroke-width: 41.96378708; stroke-linejoin: round; stroke-miterlimit: 4; stroke-dasharray: none; stroke-dashoffset: 0; stroke-opacity: 1;"
       />
       <path
         d="M 99.168857,235.25069 H 351.33914 c 5.33437,0 9.69886,-5.04 9.69886,-11.2 v -28 c 0,-6.16 -4.36449,-11.2 -9.69886,-11.2 H 99.168857 c -5.334371,0 -9.698857,5.04 -9.698857,11.2 v 28 c 0,6.16 4.364486,11.2 9.698857,11.2 z M 99.168857,327.14542 H 351.33914 c 5.33437,0 9.69886,-5.04 9.69886,-11.19999 v -28 c 0,-6.16001 -4.36449,-11.2 -9.69886,-11.2 H 99.168857 c -5.334371,0 -9.698857,5.04 -9.698857,11.2 v 28 c 0,6.16 4.364486,11.19999 9.698857,11.19999 z M 99.168993,419.0375 H 351.33927 c 5.33437,0 9.69886,-5.04 9.69886,-11.2 v -28 c 0,-6.16 -4.36449,-11.2 -9.69886,-11.2 H 99.168993 c -5.334371,0 -9.698857,5.04 -9.698857,11.2 v 28 c 0,6.16 4.364486,11.2 9.698857,11.2 z"
@@ -178,7 +178,7 @@ exports[`Battery component should render correctly HighBattery - high 1`] = `
     >
       <path
         d="m 144.16452,21.032222 h 159.67454 q 123.1748,0 123.1748,128.667868 v 212.64759 q 0,128.66788 -123.1748,128.66788 H 144.16452 q -123.174811,0 -123.174811,-128.66788 V 149.70009 q 0,-128.667868 123.174811,-128.667868 z"
-        style="fill: none; fill-opacity: 1; stroke: var(--pf-v5-global--palette--black-500); stroke-width: 41.96378708; stroke-linejoin: round; stroke-miterlimit: 4; stroke-dasharray: none; stroke-dashoffset: 0; stroke-opacity: 1;"
+        style="fill: none; fill-opacity: 1; stroke: var(--pf-v5-global--BorderColor--100); stroke-width: 41.96378708; stroke-linejoin: round; stroke-miterlimit: 4; stroke-dasharray: none; stroke-dashoffset: 0; stroke-opacity: 1;"
       />
       <path
         d="M 99.168857,235.25069 H 351.33914 c 5.33437,0 9.69886,-5.04 9.69886,-11.2 v -28 c 0,-6.16 -4.36449,-11.2 -9.69886,-11.2 H 99.168857 c -5.334371,0 -9.698857,5.04 -9.698857,11.2 v 28 c 0,6.16 4.364486,11.2 9.698857,11.2 z M 99.168857,327.14542 H 351.33914 c 5.33437,0 9.69886,-5.04 9.69886,-11.19999 v -28 c 0,-6.16001 -4.36449,-11.2 -9.69886,-11.2 H 99.168857 c -5.334371,0 -9.698857,5.04 -9.698857,11.2 v 28 c 0,6.16 4.364486,11.19999 9.698857,11.19999 z M 99.168993,419.0375 H 351.33927 c 5.33437,0 9.69886,-5.04 9.69886,-11.2 v -28 c 0,-6.16 -4.36449,-11.2 -9.69886,-11.2 H 99.168993 c -5.334371,0 -9.698857,5.04 -9.698857,11.2 v 28 c 0,6.16 4.364486,11.2 9.698857,11.2 z"
@@ -211,7 +211,7 @@ exports[`Battery component should render correctly LowBattery - 1 1`] = `
     >
       <path
         d="m 144.16452,21.032222 h 159.67454 q 123.1748,0 123.1748,128.667868 v 212.64759 q 0,128.66788 -123.1748,128.66788 H 144.16452 q -123.174811,0 -123.174811,-128.66788 V 149.70009 q 0,-128.667868 123.174811,-128.667868 z"
-        style="fill: none; fill-opacity: 1; stroke: var(--pf-v5-global--palette--black-500); stroke-width: 41.96378708; stroke-linejoin: round; stroke-miterlimit: 4; stroke-dasharray: none; stroke-dashoffset: 0; stroke-opacity: 1;"
+        style="fill: none; fill-opacity: 1; stroke: var(--pf-v5-global--BorderColor--100); stroke-width: 41.96378708; stroke-linejoin: round; stroke-miterlimit: 4; stroke-dasharray: none; stroke-dashoffset: 0; stroke-opacity: 1;"
       />
       <path
         d="M 99.168993,419.0375 H 351.33927 c 5.33437,0 9.69886,-5.04 9.69886,-11.2 v -28 c 0,-6.16 -4.36449,-11.2 -9.69886,-11.2 H 99.168993 c -5.334371,0 -9.698857,5.04 -9.698857,11.2 v 28 c 0,6.16 4.364486,11.2 9.698857,11.2 z"
@@ -244,7 +244,7 @@ exports[`Battery component should render correctly LowBattery - info 1`] = `
     >
       <path
         d="m 144.16452,21.032222 h 159.67454 q 123.1748,0 123.1748,128.667868 v 212.64759 q 0,128.66788 -123.1748,128.66788 H 144.16452 q -123.174811,0 -123.174811,-128.66788 V 149.70009 q 0,-128.667868 123.174811,-128.667868 z"
-        style="fill: none; fill-opacity: 1; stroke: var(--pf-v5-global--palette--black-500); stroke-width: 41.96378708; stroke-linejoin: round; stroke-miterlimit: 4; stroke-dasharray: none; stroke-dashoffset: 0; stroke-opacity: 1;"
+        style="fill: none; fill-opacity: 1; stroke: var(--pf-v5-global--BorderColor--100); stroke-width: 41.96378708; stroke-linejoin: round; stroke-miterlimit: 4; stroke-dasharray: none; stroke-dashoffset: 0; stroke-opacity: 1;"
       />
       <path
         d="M 99.168993,419.0375 H 351.33927 c 5.33437,0 9.69886,-5.04 9.69886,-11.2 v -28 c 0,-6.16 -4.36449,-11.2 -9.69886,-11.2 H 99.168993 c -5.334371,0 -9.698857,5.04 -9.698857,11.2 v 28 c 0,6.16 4.364486,11.2 9.698857,11.2 z"
@@ -277,7 +277,7 @@ exports[`Battery component should render correctly LowBattery - low 1`] = `
     >
       <path
         d="m 144.16452,21.032222 h 159.67454 q 123.1748,0 123.1748,128.667868 v 212.64759 q 0,128.66788 -123.1748,128.66788 H 144.16452 q -123.174811,0 -123.174811,-128.66788 V 149.70009 q 0,-128.667868 123.174811,-128.667868 z"
-        style="fill: none; fill-opacity: 1; stroke: var(--pf-v5-global--palette--black-500); stroke-width: 41.96378708; stroke-linejoin: round; stroke-miterlimit: 4; stroke-dasharray: none; stroke-dashoffset: 0; stroke-opacity: 1;"
+        style="fill: none; fill-opacity: 1; stroke: var(--pf-v5-global--BorderColor--100); stroke-width: 41.96378708; stroke-linejoin: round; stroke-miterlimit: 4; stroke-dasharray: none; stroke-dashoffset: 0; stroke-opacity: 1;"
       />
       <path
         d="M 99.168993,419.0375 H 351.33927 c 5.33437,0 9.69886,-5.04 9.69886,-11.2 v -28 c 0,-6.16 -4.36449,-11.2 -9.69886,-11.2 H 99.168993 c -5.334371,0 -9.698857,5.04 -9.698857,11.2 v 28 c 0,6.16 4.364486,11.2 9.698857,11.2 z"
@@ -310,7 +310,7 @@ exports[`Battery component should render correctly MediumBattery - 2 1`] = `
     >
       <path
         d="m 144.16452,21.032222 h 159.67454 q 123.1748,0 123.1748,128.667868 v 212.64759 q 0,128.66788 -123.1748,128.66788 H 144.16452 q -123.174811,0 -123.174811,-128.66788 V 149.70009 q 0,-128.667868 123.174811,-128.667868 z"
-        style="fill: none; fill-opacity: 1; stroke: var(--pf-v5-global--palette--black-500); stroke-width: 41.96378708; stroke-linejoin: round; stroke-miterlimit: 4; stroke-dasharray: none; stroke-dashoffset: 0; stroke-opacity: 1;"
+        style="fill: none; fill-opacity: 1; stroke: var(--pf-v5-global--BorderColor--100); stroke-width: 41.96378708; stroke-linejoin: round; stroke-miterlimit: 4; stroke-dasharray: none; stroke-dashoffset: 0; stroke-opacity: 1;"
       />
       <path
         d="M 99.168857,327.14542 H 351.33914 c 5.33437,0 9.69886,-5.04 9.69886,-11.19999 v -28 c 0,-6.16001 -4.36449,-11.2 -9.69886,-11.2 H 99.168857 c -5.334371,0 -9.698857,5.04 -9.698857,11.2 v 28 c 0,6.16 4.364486,11.19999 9.698857,11.19999 z M 99.168993,419.0375 H 351.33927 c 5.33437,0 9.69886,-5.04 9.69886,-11.2 v -28 c 0,-6.16 -4.36449,-11.2 -9.69886,-11.2 H 99.168993 c -5.334371,0 -9.698857,5.04 -9.698857,11.2 v 28 c 0,6.16 4.364486,11.2 9.698857,11.2 z"
@@ -343,7 +343,7 @@ exports[`Battery component should render correctly MediumBattery - medium 1`] =
     >
       <path
         d="m 144.16452,21.032222 h 159.67454 q 123.1748,0 123.1748,128.667868 v 212.64759 q 0,128.66788 -123.1748,128.66788 H 144.16452 q -123.174811,0 -123.174811,-128.66788 V 149.70009 q 0,-128.667868 123.174811,-128.667868 z"
-        style="fill: none; fill-opacity: 1; stroke: var(--pf-v5-global--palette--black-500); stroke-width: 41.96378708; stroke-linejoin: round; stroke-miterlimit: 4; stroke-dasharray: none; stroke-dashoffset: 0; stroke-opacity: 1;"
+        style="fill: none; fill-opacity: 1; stroke: var(--pf-v5-global--BorderColor--100); stroke-width: 41.96378708; stroke-linejoin: round; stroke-miterlimit: 4; stroke-dasharray: none; stroke-dashoffset: 0; stroke-opacity: 1;"
       />
       <path
         d="M 99.168857,327.14542 H 351.33914 c 5.33437,0 9.69886,-5.04 9.69886,-11.19999 v -28 c 0,-6.16001 -4.36449,-11.2 -9.69886,-11.2 H 99.168857 c -5.334371,0 -9.698857,5.04 -9.698857,11.2 v 28 c 0,6.16 4.364486,11.19999 9.698857,11.19999 z M 99.168993,419.0375 H 351.33927 c 5.33437,0 9.69886,-5.04 9.69886,-11.2 v -28 c 0,-6.16 -4.36449,-11.2 -9.69886,-11.2 H 99.168993 c -5.334371,0 -9.698857,5.04 -9.698857,11.2 v 28 c 0,6.16 4.364486,11.2 9.698857,11.2 z"
@@ -376,7 +376,7 @@ exports[`Battery component should render correctly MediumBattery - warn 1`] = `
     >
       <path
         d="m 144.16452,21.032222 h 159.67454 q 123.1748,0 123.1748,128.667868 v 212.64759 q 0,128.66788 -123.1748,128.66788 H 144.16452 q -123.174811,0 -123.174811,-128.66788 V 149.70009 q 0,-128.667868 123.174811,-128.667868 z"
-        style="fill: none; fill-opacity: 1; stroke: var(--pf-v5-global--palette--black-500); stroke-width: 41.96378708; stroke-linejoin: round; stroke-miterlimit: 4; stroke-dasharray: none; stroke-dashoffset: 0; stroke-opacity: 1;"
+        style="fill: none; fill-opacity: 1; stroke: var(--pf-v5-global--BorderColor--100); stroke-width: 41.96378708; stroke-linejoin: round; stroke-miterlimit: 4; stroke-dasharray: none; stroke-dashoffset: 0; stroke-opacity: 1;"
       />
       <path
         d="M 99.168857,327.14542 H 351.33914 c 5.33437,0 9.69886,-5.04 9.69886,-11.19999 v -28 c 0,-6.16001 -4.36449,-11.2 -9.69886,-11.2 H 99.168857 c -5.334371,0 -9.698857,5.04 -9.698857,11.2 v 28 c 0,6.16 4.364486,11.19999 9.698857,11.19999 z M 99.168993,419.0375 H 351.33927 c 5.33437,0 9.69886,-5.04 9.69886,-11.2 v -28 c 0,-6.16 -4.36449,-11.2 -9.69886,-11.2 H 99.168993 c -5.334371,0 -9.698857,5.04 -9.698857,11.2 v 28 c 0,6.16 4.364486,11.2 9.698857,11.2 z"
@@ -409,7 +409,7 @@ exports[`Battery component should render correctly NullBatery, default 1`] = `
     >
       <path
         d="m 144.16452,21.032222 h 159.67454 q 123.1748,0 123.1748,128.667868 v 212.64759 q 0,128.66788 -123.1748,128.66788 H 144.16452 q -123.174811,0 -123.174811,-128.66788 V 149.70009 q 0,-128.667868 123.174811,-128.667868 z"
-        style="fill: none; fill-opacity: 1; stroke: var(--pf-v5-global--palette--black-500); stroke-width: 41.96378708; stroke-linejoin: round; stroke-miterlimit: 4; stroke-dasharray: none; stroke-dashoffset: 0; stroke-opacity: 1;"
+        style="fill: none; fill-opacity: 1; stroke: var(--pf-v5-global--BorderColor--100); stroke-width: 41.96378708; stroke-linejoin: round; stroke-miterlimit: 4; stroke-dasharray: none; stroke-dashoffset: 0; stroke-opacity: 1;"
       />
       <path
         d="M 99.168858,143.38516 H 351.33914 c 5.33437,0 9.69886,-5.04 9.69886,-11.2 v -28 c 0,-6.16 -4.36449,-11.2 -9.69886,-11.2 H 99.168857 c -5.334371,0 -9.698857,5.04 -9.698857,11.2 v 28 c 0,6.16 4.364486,11.2 9.698858,11.2 z M 99.168857,235.25069 H 351.33914 c 5.33437,0 9.69886,-5.04 9.69886,-11.2 v -28 c 0,-6.16 -4.36449,-11.2 -9.69886,-11.2 H 99.168857 c -5.334371,0 -9.698857,5.04 -9.698857,11.2 v 28 c 0,6.16 4.364486,11.2 9.698857,11.2 z M 99.168857,327.14542 H 351.33914 c 5.33437,0 9.69886,-5.04 9.69886,-11.19999 v -28 c 0,-6.16001 -4.36449,-11.2 -9.69886,-11.2 H 99.168857 c -5.334371,0 -9.698857,5.04 -9.698857,11.2 v 28 c 0,6.16 4.364486,11.19999 9.698857,11.19999 z M 99.168993,419.0375 H 351.33927 c 5.33437,0 9.69886,-5.04 9.69886,-11.2 v -28 c 0,-6.16 -4.36449,-11.2 -9.69886,-11.2 H 99.168993 c -5.334371,0 -9.698857,5.04 -9.698857,11.2 v 28 c 0,6.16 4.364486,11.2 9.698857,11.2 z"