Modern UI-Replace alpha with solid hex on hover states on 2026 default themes
- Dominant language
- TypeScript
- Stars
- 193k
- Forks
- 42.4k
- PR merge metrics
- PR metrics pending
Description
## Description
Hover states currently use colors with alpha transparency. Their final appearance therefore changes depending on the background beneath them.
Update hover states across the product to use solid colors, aligning the implementation with Figma and creating a consistent appearance across surfaces.
## Color specification
| State | Current Light | New Light | Current Dark | New Dark |
|---|---|---|---|---|
| Item hover | `#00000014` | `#F1F1F3` | `#FFFFFF14` | `#1E1F20` |
| Nested action hover | `#0000001F` | `#E3E3E5` | `#5A5D5E50` | `#323233` |
## Acceptance criteria
- Apply the solid hover colors wherever the corresponding hover states are used.
- Hover colors use opaque six-digit hex values without alpha.
- The resulting color remains consistent across different backgrounds and surfaces.
- Nested action hover remains visually distinct from the parent hover state.
- Validate representative product surfaces in both 2026 Light and 2026 Dark.
- High-contrast theme behavior remains unchanged.
Figma [link](https://www.figma.com/design/nE50XAgPReJgrEDmC0aLPI/VS-Code-Design-Foundation-2026?node-id=87-89&t=cV3egSRhDSuEp50o-1)
Contributor guide
Assessment
This issue has not been assessed yet.