github / github/awesome-copilot

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

Closed Beginner friendly
#3,204 0 comments 0 reactions 0 assignees View on GitHub
Dominant language
JavaScript
Stars
39k
Forks
5k
Avg merge
1d 22h
Merged PRs (30d)
113

Description

## 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:

```js
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:

```diff
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`:

```css
.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%)`

Contributor guide

Open the contributing guide

Research direction

Start at the color event handler described in the issue and inspect the existing .orb CSS rule that uses --orb-color. Verify how set_color values reach the handler, then ensure the fill and glow both derive from that custom property. Done means representative hex, named, rgb(), and hsl() colors update both the orb fill and glow without stale styling.

Written by the indexing model from the issue text.

Assessment

Tech stack
css, javascript
Domain
frontend
Issue type
Bug
Difficulty
2/5
Estimated time
1-3 hours
Activity status
Active
Clarity
Clearly specified
Newbie friendliness
76/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.