github / github/awesome-copilot
[Bug] Color Orb glow does not update for non-hex CSS colors
- 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
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