From c6dd2c4d07dcfc4114735b560b48503ea91562ba Mon Sep 17 00:00:00 2001
From: Jeff Phillips <jephilli@redhat.com>
Date: Wed, 4 Dec 2024 08:11:20 -0500
Subject: [PATCH] fix(edges): Fix colors for selected/hovered edges for light
 and dark themes (#258)

---
 .../module/src/components/nodes/labels/LabelBadge.tsx  |  8 +++++---
 packages/module/src/css/topology-components.css        |  8 +++++---
 .../components/groups/DefaultTaskGroupCollapsed.tsx    |  1 -
 .../src/pipelines/components/nodes/TaskBadge.tsx       | 10 +++++++---
 4 files changed, 17 insertions(+), 10 deletions(-)

diff --git a/packages/module/src/components/nodes/labels/LabelBadge.tsx b/packages/module/src/components/nodes/labels/LabelBadge.tsx
index ffce97b2..9b295bd3 100644
--- a/packages/module/src/components/nodes/labels/LabelBadge.tsx
+++ b/packages/module/src/components/nodes/labels/LabelBadge.tsx
@@ -39,8 +39,10 @@ const LabelBadge = React.forwardRef<SVGRectElement, LabelBadgeProps>(
       height += paddingY * 2;
       rect = (
         <rect
-          fill={badgeColor || (badgeClassName ? undefined : defaultBadgeFill.value)}
-          stroke={badgeBorderColor || (badgeClassName ? undefined : defaultBadgeBorder.value)}
+          style={{
+            fill: badgeColor || (badgeClassName ? undefined : defaultBadgeFill.value),
+            stroke: badgeBorderColor || (badgeClassName ? undefined : defaultBadgeBorder.value)
+          }}
           ref={iconRef}
           x={0}
           width={width + paddingX * 2}
@@ -55,7 +57,7 @@ const LabelBadge = React.forwardRef<SVGRectElement, LabelBadgeProps>(
       <g className={classes} transform={`translate(${x}, ${y})`} ref={innerRef}>
         {rect}
         <text
-          fill={badgeTextColor || badgeClassName ? badgeTextColor : defaultBadgeTextColor.value}
+          style={{ fill: badgeTextColor || badgeClassName ? badgeTextColor : defaultBadgeTextColor.value }}
           ref={textRef}
           x={width / 2 + paddingX}
           y={height / 2}
diff --git a/packages/module/src/css/topology-components.css b/packages/module/src/css/topology-components.css
index ae4b73c1..24b4712e 100644
--- a/packages/module/src/css/topology-components.css
+++ b/packages/module/src/css/topology-components.css
@@ -149,10 +149,12 @@
   /* edge */
   --pf-topology__edge--Stroke: #707070;
   --pf-topology__edge--StrokeWidth: var(--pf-t--global--border--width--regular);
-  --pf-topology__edge--HoverStroke: var(--pf-t--global--border--color--hover);
+  --pf-topology__edge--HoverStroke: var(--pf-topology__edge--Stroke);
   --pf-topology__edge--ActiveStroke: var(--pf-t--global--border--color--clicked);
   --pf-topology__edge--ActiveStrokeWidth: var(--pf-t--global--border--width--strong);
   --pf-topology__edge--InteractiveStroke: var(--pf-t--global--border--color--brand--default);
+  --pf-topology__edge--m-selected--background--Stroke: var(--pf-topology__edge--ActiveStroke);
+  --pf-topology__edge--m-selected--background--Opacity: 0.3;
 
   --pf-topology__edge--m-info--EdgeStroke: var(--pf-t--global--border--color--brand--default);
   --pf-topology__edge--m-success--EdgeStroke: var(--pf-t--global--border--color--status--success--default);
@@ -164,8 +166,7 @@
   --pf-topology__edge--m-warning--EdgeFill: var(--pf-t--global--border--color--status--warning--default);
   --pf-topology__edge--m-danger--EdgeFill: var(--pf-t--global--border--color--status--danger--default);
 
-  --pf-topology__edge--m-selected--background--Stroke: var(--pf-t--global--border--color--default);
-  --pf-topology__edge--m-hover--background--Stroke: var(--pf-t--global--border--color--nonstatus--blue--default);
+  --pf-topology__edge--m-hover--background--Stroke: var(--pf-t--global--border--color--default);
 
   --pf-topology__edge__tag__text--Fill: var(--pf-t--global--text--color--inverse);
   --pf-topology__edge__tag__text--Stroke: var(--pf-t--global--text--color--inverse);
@@ -667,6 +668,7 @@
 }
 .pf-topology__edge.pf-m-selected .pf-topology__edge__background {
   stroke: var(--pf-topology__edge--m-selected--background--Stroke);
+  opacity: var(--pf-topology__edge--m-selected--background--Opacity);
 }
 .pf-topology__edge.pf-m-hover .pf-topology__edge__background {
   stroke: var(--pf-topology__edge--m-hover--background--Stroke);
diff --git a/packages/module/src/pipelines/components/groups/DefaultTaskGroupCollapsed.tsx b/packages/module/src/pipelines/components/groups/DefaultTaskGroupCollapsed.tsx
index 1ad450f6..d571679e 100644
--- a/packages/module/src/pipelines/components/groups/DefaultTaskGroupCollapsed.tsx
+++ b/packages/module/src/pipelines/components/groups/DefaultTaskGroupCollapsed.tsx
@@ -22,7 +22,6 @@ const DefaultTaskGroupCollapsed: React.FunctionComponent<DefaultTaskGroupCollaps
   return (
     <TaskNode
       element={element}
-      {...rest}
       actionIcon={collapsible ? <ExpandIcon /> : undefined}
       onActionIconClick={() => onCollapseChange(element, false)}
       shadowCount={shadowCount}
diff --git a/packages/module/src/pipelines/components/nodes/TaskBadge.tsx b/packages/module/src/pipelines/components/nodes/TaskBadge.tsx
index de16507f..f9ed8220 100644
--- a/packages/module/src/pipelines/components/nodes/TaskBadge.tsx
+++ b/packages/module/src/pipelines/components/nodes/TaskBadge.tsx
@@ -38,8 +38,10 @@ const TaskBadge = React.forwardRef<SVGRectElement, LabelBadgeProps>(
       height += paddingY * 2;
       rect = (
         <rect
-          fill={badgeColor || (badgeClassName ? undefined : defaultBadgeFill.value)}
-          stroke={badgeBorderColor || (badgeClassName ? undefined : defaultBadgeBorder.value)}
+          style={{
+            fill: badgeColor || (badgeClassName ? undefined : defaultBadgeFill.value),
+            stroke: badgeBorderColor || (badgeClassName ? undefined : defaultBadgeBorder.value)
+          }}
           ref={iconRef}
           x={0}
           width={width + paddingX * 2}
@@ -55,7 +57,9 @@ const TaskBadge = React.forwardRef<SVGRectElement, LabelBadgeProps>(
         {rect}
         {typeof badge === 'string' ? (
           <text
-            fill={badgeTextColor || badgeClassName ? undefined : defaultBadgeTextColor.value}
+            style={{
+              fill: badgeTextColor || badgeClassName ? undefined : defaultBadgeTextColor.value
+            }}
             ref={textRef}
             x={width / 2 + paddingX}
             y={height / 2}