From 14d3866439752628d2775596b29dca0b0b93bb33 Mon Sep 17 00:00:00 2001
From: Balaji Krishnamurthy <107975017+BKM14@users.noreply.github.com>
Date: Tue, 18 Nov 2025 20:26:00 +0530
Subject: [PATCH] fix: hotkey visibility in buttons with blue accent (#15764)

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
<img width="278" height="54" alt="image"
src="https://github.com/user-attachments/assets/7dd2c8a4-1230-4b57-9a1d-62564ab15337"
/>
<img width="280" height="52" alt="image"
src="https://github.com/user-attachments/assets/21cc62fb-e1eb-47ce-925c-3658389d24d8"
/>


### After
<img width="274" height="54" alt="image"
src="https://github.com/user-attachments/assets/cfbed222-a807-4af2-ab11-839ef5274186"
/>
<img width="275" height="52" alt="image"
src="https://github.com/user-attachments/assets/602274d8-3af6-4de8-9504-2cb0fe30d5dc"
/>

---------

Co-authored-by: Lucas Bordeau <bordeau.lucas@gmail.com>
---
 .../components/Button/internal/ButtonHotKeys.tsx    |  8 ++++----
 .../twenty-ui/src/theme/constants/AccentDark.ts     | 13 +++++++++++++
 .../twenty-ui/src/theme/constants/AccentLight.ts    | 13 +++++++++++++
 .../twenty-ui/src/theme/constants/ThemeCommon.ts    |  4 ++++
 4 files changed, 34 insertions(+), 4 deletions(-)

diff --git a/packages/twenty-ui/src/input/button/components/Button/internal/ButtonHotKeys.tsx b/packages/twenty-ui/src/input/button/components/Button/internal/ButtonHotKeys.tsx
index ab5b482747..396f273630 100644
--- a/packages/twenty-ui/src/input/button/components/Button/internal/ButtonHotKeys.tsx
+++ b/packages/twenty-ui/src/input/button/components/Button/internal/ButtonHotKeys.tsx
@@ -1,10 +1,10 @@
-import { getOsShortcutSeparator } from '@ui/utilities';
+import styled from '@emotion/styled';
 import {
   type ButtonAccent,
   type ButtonSize,
   type ButtonVariant,
 } from '@ui/input';
-import styled from '@emotion/styled';
+import { getOsShortcutSeparator } from '@ui/utilities';
 
 const StyledSeparator = styled.div<{
   buttonSize: ButtonSize;
@@ -13,7 +13,7 @@ const StyledSeparator = styled.div<{
   background: ${({ theme, accent }) => {
     switch (accent) {
       case 'blue':
-        return theme.border.color.blue;
+        return theme.buttons.secondaryTextColor;
       case 'danger':
         return theme.border.color.danger;
       default:
@@ -33,7 +33,7 @@ const StyledShortcutLabel = styled.div<{
   color: ${({ theme, variant, accent }) => {
     switch (accent) {
       case 'blue':
-        return theme.border.color.blue;
+        return theme.buttons.secondaryTextColor;
       case 'danger':
         return variant === 'primary'
           ? theme.border.color.danger
diff --git a/packages/twenty-ui/src/theme/constants/AccentDark.ts b/packages/twenty-ui/src/theme/constants/AccentDark.ts
index ad81c0c5d2..a8fad2b9e9 100644
--- a/packages/twenty-ui/src/theme/constants/AccentDark.ts
+++ b/packages/twenty-ui/src/theme/constants/AccentDark.ts
@@ -1,3 +1,4 @@
+import * as RadixColors from '@radix-ui/colors';
 import { COLOR_DARK } from '@ui/theme/constants/ColorsDark';
 
 export const ACCENT_DARK = {
@@ -7,4 +8,16 @@ export const ACCENT_DARK = {
   quaternary: COLOR_DARK.blue2,
   accent3570: COLOR_DARK.blue8,
   accent4060: COLOR_DARK.blue8,
+  accent1: RadixColors.indigoDarkP3.indigo1,
+  accent2: RadixColors.indigoDarkP3.indigo2,
+  accent3: RadixColors.indigoDarkP3.indigo3,
+  accent4: RadixColors.indigoDarkP3.indigo4,
+  accent5: RadixColors.indigoDarkP3.indigo5,
+  accent6: RadixColors.indigoDarkP3.indigo6,
+  accent7: RadixColors.indigoDarkP3.indigo7,
+  accent8: RadixColors.indigoDarkP3.indigo8,
+  accent9: RadixColors.indigoDarkP3.indigo9,
+  accent10: RadixColors.indigoDarkP3.indigo10,
+  accent11: RadixColors.indigoDarkP3.indigo11,
+  accent12: RadixColors.indigoDarkP3.indigo12,
 };
diff --git a/packages/twenty-ui/src/theme/constants/AccentLight.ts b/packages/twenty-ui/src/theme/constants/AccentLight.ts
index ca089977f4..5895d44acd 100644
--- a/packages/twenty-ui/src/theme/constants/AccentLight.ts
+++ b/packages/twenty-ui/src/theme/constants/AccentLight.ts
@@ -1,3 +1,4 @@
+import * as RadixColors from '@radix-ui/colors';
 import { COLOR_LIGHT } from '@ui/theme/constants/ColorsLight';
 
 export const ACCENT_LIGHT = {
@@ -7,4 +8,16 @@ export const ACCENT_LIGHT = {
   quaternary: COLOR_LIGHT.blue2,
   accent3570: COLOR_LIGHT.blue8,
   accent4060: COLOR_LIGHT.blue8,
+  accent1: RadixColors.indigoP3.indigo1,
+  accent2: RadixColors.indigoP3.indigo2,
+  accent3: RadixColors.indigoP3.indigo3,
+  accent4: RadixColors.indigoP3.indigo4,
+  accent5: RadixColors.indigoP3.indigo5,
+  accent6: RadixColors.indigoP3.indigo6,
+  accent7: RadixColors.indigoP3.indigo7,
+  accent8: RadixColors.indigoP3.indigo8,
+  accent9: RadixColors.indigoP3.indigo9,
+  accent10: RadixColors.indigoP3.indigo10,
+  accent11: RadixColors.indigoP3.indigo11,
+  accent12: RadixColors.indigoP3.indigo12,
 };
diff --git a/packages/twenty-ui/src/theme/constants/ThemeCommon.ts b/packages/twenty-ui/src/theme/constants/ThemeCommon.ts
index 3091da7e41..53f0ed0229 100644
--- a/packages/twenty-ui/src/theme/constants/ThemeCommon.ts
+++ b/packages/twenty-ui/src/theme/constants/ThemeCommon.ts
@@ -1,3 +1,4 @@
+import { ACCENT_DARK } from '@ui/theme/constants/AccentDark';
 import { ANIMATION } from './Animation';
 import { ICON } from './Icon';
 import { MODAL } from './Modal';
@@ -20,4 +21,7 @@ export const THEME_COMMON = {
   rightDrawerWidth: '500px',
   clickableElementBackgroundTransition: 'background 0.1s ease',
   lastLayerZIndex: 2147483647,
+  buttons: {
+    secondaryTextColor: ACCENT_DARK.accent11,
+  },
 };