fix: hotkey visibility in buttons with blue accent

[BKM14]

Closes #15728

Problem

The color of ButtonHotKeys was set to theme.border.color.blue when the button accent was blue. This led to poor visibility of the hotkey.

Solution

The color is now set to GRAY_SCALE_LIGHT.gray7

Screenshots

Before

After

[greptile-apps]

Greptile Overview

Greptile Summary

This PR completes the fix for hotkey visibility on blue accent buttons by updating the separator color to match the previously fixed hotkey label color.

• Changed StyledSeparator background color from theme.border.color.blue to GRAY_SCALE_LIGHT.gray7 when accent='blue'
• This complements the previous commit (ceb41a5) which fixed the hotkey label color
• The light gray color (GRAY_SCALE_LIGHT.gray7 = 80% brightness) provides good contrast against blue button backgrounds while remaining distinguishable from white button text
• Follows the same color approach used for button text on blue accent buttons (GRAY_SCALE_LIGHT.gray1 for text)
• Import statements reordered alphabetically

Confidence Score: 5/5

• This PR is safe to merge with no risk
• The change is minimal, targeted, and fixes a specific UI accessibility issue. It applies the same color fix that was already applied to the hotkey label to the separator element, ensuring consistency. The hardcoded light gray color is appropriate for blue accent buttons which always have blue backgrounds in both light and dark modes.
• No files require special attention

Important Files Changed

File Analysis

Filename	Score	Overview
packages/twenty-ui/src/input/button/components/Button/internal/ButtonHotKeys.tsx	5/5	Fixed separator color for blue accent buttons by changing from theme.border.color.blue to GRAY_SCALE_LIGHT.gray7 for better visibility

Sequence Diagram

sequenceDiagram
    participant User
    participant Button
    participant ButtonHotkeys
    participant StyledSeparator
    participant StyledShortcutLabel
    participant Theme

    User->>Button: Renders Button with accent="blue"
    Button->>ButtonHotkeys: Pass accent="blue", hotkeys array
    ButtonHotkeys->>StyledSeparator: Render with accent prop
    StyledSeparator->>GRAY_SCALE_LIGHT: Get gray7 color (0.8 brightness)
    GRAY_SCALE_LIGHT-->>StyledSeparator: Return light gray color
    StyledSeparator-->>User: Display visible separator
    
    ButtonHotkeys->>StyledShortcutLabel: Render with accent prop
    StyledShortcutLabel->>GRAY_SCALE_LIGHT: Get gray7 color (0.8 brightness)
    GRAY_SCALE_LIGHT-->>StyledShortcutLabel: Return light gray color
    StyledShortcutLabel-->>User: Display visible hotkey text
    
    Note over StyledSeparator,StyledShortcutLabel: Both now use GRAY_SCALE_LIGHT.gray7<br/>instead of theme.border.color.blue<br/>for better contrast on blue backgrounds

Loading

[greptile-apps]

_{1 file reviewed, no comments}

_{Edit Code Review Agent Settings | Greptile}

[lucasbordeau]

@Bonapara I think that we should keep the theme here but maybe the color is not right since color refactor ?