Frontmatter
| id | 8031 |
| title | Fix Grid Header Button Border on Hover |
| state | Closed |
| labels | bugdesignai |
| assignees | tobiu |
| createdAt | Dec 5, 2025, 2:01 AM |
| updatedAt | Dec 5, 2025, 2:51 AM |
| githubUrl | https://github.com/neomjs/neo/issues/8031 |
| author | tobiu |
| commentsCount | 1 |
| parentIssue | 7918 |
| subIssues | [] |
| subIssuesCompleted | 0 |
| subIssuesTotal | 0 |
| blockedBy | [] |
| blocking | [] |
| closedAt | Dec 5, 2025, 2:51 AM |
Fix Grid Header Button Border on Hover
tobiu added parent issue #7918 on Dec 5, 2025, 2:02 AM
tobiu assigned to @tobiu on Dec 5, 2025, 2:43 AM

tobiu
Dec 5, 2025, 2:49 AM
Input from Gemini 2.5 pro:
✦ I have implemented the 3-variable strategy for grid header button borders, resolving the conflict between standard themes and the Cyberpunk aesthetic.
Changes:
Source Refactoring (
src/grid/header/Button.scss):
- Set
border: 1px solid transparentas the structural base.- Used
--grid-header-button-border-right-colorfor the default separator.- Used
--grid-header-button-border-hover-colorfor the hover box color.- Used
--grid-header-button-border-right-hover-colorto explicitly control the separator behavior on hover (override vs. persist).Theme Updates:
- Cyberpunk: Configured for a full cyan box on hover (
hover-color: cyan,right-hover: cyan).- Standard Themes (Dark/Light/Neo-Light): Configured to maintain the existing look (
hover-color: transparent,right-hover: var(--separator)).This solution provides the flexibility required for the new theme while guaranteeing zero regressions for existing ones.
tobiu closed this issue on Dec 5, 2025, 2:51 AM
Implement a cyan hover effect for grid header button borders in
neo-theme-cyberpunk.Requirements:
Modify
resources/scss/src/grid/header/Button.scss:--grid-header-button-border-color.--grid-header-button-border-color-hover.border-rightrule to use--grid-header-button-border-color.:hoverstate that applies--grid-header-button-border-color-hoverto the border.Update Themes:
theme-cyberpunk:--grid-header-button-border-colortovar(--cyber-border).--grid-header-button-border-color-hovertovar(--cyber-cyan).theme-dark/theme-light/theme-neo-light:--grid-header-button-border-colortovar(--grid-container-border-color).--grid-header-button-border-color-hovertovar(--grid-container-border-color)(to maintain existing "no change on hover" behavior).Goal: Ensure the grid header borders glow cyan on hover in the Cyberpunk theme, while remaining consistent in all other themes (dark, light, neo-light).