Add check for default color (#3194)

Author: laurakwhit

src/lib/components/lines-and-dots/constants.ts

@@ -214,6 +214,8 @@ export const getNextDistanceAndOffset = (
   return { nextDistance, offset };
 };
 
+export const DEFAULT_STROKE_COLOR = 'currentColor';
+
 export const getStatusStrokeColor = (
   status: WorkflowStatus | EventClassification | 'Delayed',
 ): string => {
@@ -236,7 +238,7 @@ export const getStatusStrokeColor = (
     case 'Delayed':
       return '#fbbf24';
     default:
-      return 'currentColor';
+      return DEFAULT_STROKE_COLOR;
   }
 };
 
@@ -263,7 +265,7 @@ export const getCategoryStrokeColor = (
     case 'retry':
       return '#FF9B70';
     default:
-      return 'currentColor';
+      return DEFAULT_STROKE_COLOR;
   }
 };
 

src/lib/components/lines-and-dots/svg/line.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import {
+    DEFAULT_STROKE_COLOR,
     getCategoryStrokeColor,
     getStatusStrokeColor,
   } from '$lib/components/lines-and-dots/constants';
@@ -46,15 +47,17 @@
   );
 
   const strokeColor = $derived.by(() => {
-    let color = 'currentColor';
+    let color = DEFAULT_STROKE_COLOR;
     if (status) {
       color = status === 'none' ? '#141414' : getStatusStrokeColor(status);
     }
     if (category) {
-      color = getCategoryStrokeColor(category);
+      const categoryColor = getCategoryStrokeColor(category);
+      if (categoryColor !== DEFAULT_STROKE_COLOR) color = categoryColor;
     }
     if (classification) {
-      color = getStatusStrokeColor(classification);
+      const statusColor = getStatusStrokeColor(classification);
+      if (statusColor !== DEFAULT_STROKE_COLOR) color = statusColor;
     }
     if (delayed && [classification, status].includes('Running')) {
       color = getStatusStrokeColor('Delayed');