Fix Invalid Gradient Rendering in Graph Nodes

Overview

The graph visualization component contains an issue in the .graph-node styling where the gradient background is applied using an invalid CSS declaration. The custom property --gradient-primary is defined as a linear-gradient(), but it is incorrectly wrapped inside the hsl() function when assigned to the background property.

This results in invalid CSS because the hsl() function expects hue, saturation, and lightness color values, not a gradient object. As a consequence, browsers fail to interpret the background declaration correctly, causing graph nodes to render without the intended gradient styling.

Root Cause

The CSS variable is defined as:

--gradient-primary: linear-gradient(
  135deg,
  hsl(263 70% 65%),
  hsl(180 100% 70%)
);

However, within the .graph-node class it is used as:

background: hsl(var(--gradient-primary));

Since var(--gradient-primary) resolves to a linear-gradient() value, wrapping it with hsl() creates an invalid CSS expression. The browser ignores the declaration and the visual styling of graph nodes becomes inconsistent with the design system.

Solution

Update the background property to use the gradient variable directly without the hsl() wrapper.

Before

.graph-node {
  background: hsl(var(--gradient-primary));
}

After

.graph-node {
  background: var(--gradient-primary);
}

Expected Result

• Graph nodes display the intended purple-to-cyan gradient.
• CSS validation errors related to background rendering are eliminated.
• Visual consistency is restored across graph visualization components.
• The design system's gradient variables are used correctly throughout the application.

Impact

This change only affects the visual styling of graph nodes and does not modify application logic or component behavior. The fix improves UI consistency, ensures proper browser rendering, and aligns the implementation with standard CSS variable usage practices.