From 8e3ec5b43d40e937ea897dd2031baa03ad0eef9b Mon Sep 17 00:00:00 2001
From: Weiko <corentin@twenty.com>
Date: Thu, 16 Jul 2026 16:17:54 +0200
Subject: [PATCH] Propagate record card background to inline hover content
 (#22957)

## Summary
- Introduce a shared `--record-card-background-color` CSS variable on
record cards
- Reuse that variable for hovered inline cell content so the hover
portal matches the card background state
- Preserve selected, focused, and active background transitions without
duplicating background logic

### Before

<img width="196" height="337" alt="Screenshot 2026-07-16 at 16 03 40"
src="https://github.com/user-attachments/assets/b74bfb24-0144-4a8c-b8a4-b56768e84d66"
/>
<img width="219" height="357" alt="Screenshot 2026-07-16 at 16 03 25"
src="https://github.com/user-attachments/assets/19d052cb-8c8c-49c9-b3af-0178c53c0c0a"
/>


### After

<img width="189" height="372" alt="Screenshot 2026-07-16 at 16 03 52"
src="https://github.com/user-attachments/assets/289e4186-d418-44dc-93d4-70fa47e50cf2"
/>
<img width="180" height="333" alt="Screenshot 2026-07-16 at 16 03 00"
src="https://github.com/user-attachments/assets/b874e0c4-5840-4b7e-918c-d441c50fa487"
/>



<!-- This is an auto-generated description by cubic. -->
<a
href="https://cubic.dev/pr/twentyhq/twenty/pull/22957?utm_source=github"
target="_blank" rel="noopener noreferrer"
data-no-image-dialog="true"><picture><source
media="(prefers-color-scheme: dark)"
srcset="https://www.cubic.dev/buttons/review-in-cubic-dark.svg"><source
media="(prefers-color-scheme: light)"
srcset="https://www.cubic.dev/buttons/review-in-cubic-light.svg"><img
alt="Review in cubic"
src="https://www.cubic.dev/buttons/review-in-cubic-dark.svg"></picture></a>
<!-- End of auto-generated description by cubic. -->
---
 .../record-card/components/RecordCard.tsx             | 11 +++++++----
 .../RecordInlineCellHoveredPortalContent.tsx          |  5 ++++-
 2 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/packages/twenty-front/src/modules/object-record/record-card/components/RecordCard.tsx b/packages/twenty-front/src/modules/object-record/record-card/components/RecordCard.tsx
index 3a31517778..5d38a2becc 100644
--- a/packages/twenty-front/src/modules/object-record/record-card/components/RecordCard.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-card/components/RecordCard.tsx
@@ -6,7 +6,9 @@ const StyledBoardCard = styled.div<{
   isSecondaryDragged?: boolean;
   isPrimaryMultiDrag?: boolean;
 }>`
-  background-color: ${themeCssVariables.background.secondary};
+  --record-card-background-color: ${themeCssVariables.background.secondary};
+
+  background-color: var(--record-card-background-color);
   border: 1px solid ${themeCssVariables.border.color.medium};
   border-radius: ${themeCssVariables.border.radius.sm};
   color: ${themeCssVariables.font.color.primary};
@@ -16,15 +18,16 @@ const StyledBoardCard = styled.div<{
   width: 100%;
 
   &[data-selected='true'] {
-    background-color: ${themeCssVariables.accent.quaternary};
+    --record-card-background-color: ${themeCssVariables.accent.quaternary};
   }
 
   &[data-focused='true'] {
-    background-color: ${themeCssVariables.background.tertiary};
+    --record-card-background-color: ${themeCssVariables.background.tertiary};
   }
 
   &[data-active='true'] {
-    background-color: ${themeCssVariables.accent.quaternary};
+    --record-card-background-color: ${themeCssVariables.accent.quaternary};
+
     border: 1px solid ${themeCssVariables.color.blue7};
   }
 
diff --git a/packages/twenty-front/src/modules/object-record/record-inline-cell/components/RecordInlineCellHoveredPortalContent.tsx b/packages/twenty-front/src/modules/object-record/record-inline-cell/components/RecordInlineCellHoveredPortalContent.tsx
index f2b687b8d9..a104f87fc2 100644
--- a/packages/twenty-front/src/modules/object-record/record-inline-cell/components/RecordInlineCellHoveredPortalContent.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-inline-cell/components/RecordInlineCellHoveredPortalContent.tsx
@@ -17,7 +17,10 @@ const StyledRecordTableCellHoveredPortalContent = styled.div<{
 
 const StyledInlineCellBaseContainer = styled.div<{ readonly: boolean }>`
   align-items: center;
-  background: ${themeCssVariables.background.primary};
+  background: var(
+    --record-card-background-color,
+    ${themeCssVariables.background.primary}
+  );
   box-sizing: border-box;
   display: flex;
   gap: ${themeCssVariables.spacing[1]};