[Bug] Color Orb glow does not update for non-hex CSS colors

[fabriziolussana]

Description

When the Color Orb color is changed through chat using a named, RGB, or HSL CSS color, the orb fill changes but its glow remains the previous color. Hex colors generally work as expected.

The Change Color button may appear to work consistently because the agent often chooses a six-digit hex value.

Steps to reproduce

1. Open the Color Orb canvas.
2. Set the orb to a hex color, such as #770000.
3. Ask the agent to set the orb color to a named color, such as red or green.
4. Observe that the orb fill changes, but the glow retains the previous color.

Expected behavior

The orb fill and glow should both update for every CSS color format supported by the set_color action, including:

• Hex colors
• Named colors
• rgb() colors
• hsl() colors

Actual behavior

The fill changes, but the glow remains unchanged when the supplied color cannot be converted to a valid shadow by appending 66.

Root cause

The color event handler constructs the glow with:

orb.style.boxShadow = '0 0 60px ' + color + ', 0 0 120px ' + color + '66';

Proposed solution

Use the existing --orb-color CSS custom property as the single source of truth for both the orb fill and its glow.

Remove the redundant inline background and boxShadow assignments from the color event handler:

es.addEventListener('color', (e) => {
  const { color } = JSON.parse(e.data);
  orb.style.setProperty('--orb-color', color);
- orb.style.background = color;
- orb.style.boxShadow = '0 0 60px ' + color + ', 0 0 120px ' + color + '66';
});

No CSS changes are required because the existing .orb rule already derives both properties from --orb-color:

.orb {
  background: var(--orb-color, #ff7f50);
  box-shadow:
    0 0 60px var(--orb-color, #ff7f50),
    0 0 120px color-mix(
      in srgb,
      var(--orb-color, #ff7f50) 40%,
      transparent
    );
}

This fixes the stale glow for every CSS color format accepted by the set_color action, including hex, named, RGB, and HSL values. It also removes duplicated styling logic and ensures the existing background and shadow transitions continue to apply consistently.

Validation

Verify that both the orb fill and glow update when set_color receives representative values such as:

• #22c55e
• tomato
• rgb(14, 165, 233)
• hsl(271 81% 56%)