LearnNewsExamplesServices
Frontmatter
id8031
titleFix Grid Header Button Border on Hover
stateClosed
labels
bugdesignai
assigneestobiu
createdAtDec 5, 2025, 2:01 AM
updatedAtDec 5, 2025, 2:51 AM
githubUrlhttps://github.com/neomjs/neo/issues/8031
authortobiu
commentsCount1
parentIssue7918
subIssues[]
subIssuesCompleted0
subIssuesTotal0
blockedBy[]
blocking[]
closedAtDec 5, 2025, 2:51 AM

Fix Grid Header Button Border on Hover

Closed v11.16.0 bugdesignai
tobiu
tobiu commented on Dec 5, 2025, 2:01 AM

Implement a cyan hover effect for grid header button borders in neo-theme-cyberpunk.

Requirements:

  1. Modify resources/scss/src/grid/header/Button.scss:

    • Introduce --grid-header-button-border-color.
    • Introduce --grid-header-button-border-color-hover.
    • Update the border-right rule to use --grid-header-button-border-color.
    • Add a :hover state that applies --grid-header-button-border-color-hover to the border.
  2. Update Themes:

    • theme-cyberpunk:
      • Set --grid-header-button-border-color to var(--cyber-border).
      • Set --grid-header-button-border-color-hover to var(--cyber-cyan).
    • theme-dark / theme-light / theme-neo-light:
      • Set --grid-header-button-border-color to var(--grid-container-border-color).
      • Set --grid-header-button-border-color-hover to var(--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).

tobiu added the bug label on Dec 5, 2025, 2:01 AM
tobiu added the design label on Dec 5, 2025, 2:01 AM
tobiu added the ai label on Dec 5, 2025, 2:01 AM
tobiu added parent issue #7918 on Dec 5, 2025, 2:02 AM
tobiu assigned to @tobiu on Dec 5, 2025, 2:43 AM
tobiu referenced in commit 706f1d7 - "Fix Grid Header Button Border on Hover #8031" on Dec 5, 2025, 2:49 AM
tobiu
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:

  1. Source Refactoring (src/grid/header/Button.scss):

    • Set border: 1px solid transparent as the structural base.
    • Used --grid-header-button-border-right-color for the default separator.
    • Used --grid-header-button-border-hover-color for the hover box color.
    • Used --grid-header-button-border-right-hover-color to explicitly control the separator behavior on hover (override vs. persist).
  2. 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