From e3addb22346fc8530eae591eb0398721d642a070 Mon Sep 17 00:00:00 2001
From: Baptiste Devessier <baptiste@devessier.fr>
Date: Mon, 16 Jun 2025 14:59:12 +0200
Subject: [PATCH] Improve VariableChip design (#12610)

## Before

![CleanShot 2025-06-16 at 12 03
33@2x](https://github.com/user-attachments/assets/2fa6ec21-2947-48df-b447-aab298b9a480)

![CleanShot 2025-06-16 at 12 03
26@2x](https://github.com/user-attachments/assets/74f36b2f-cec7-40a1-9f99-453fbdb75669)

![CleanShot 2025-06-16 at 12 08
34@2x](https://github.com/user-attachments/assets/b4c920ee-377c-43b6-b809-545d441a0d8c)


## After

![CleanShot 2025-06-16 at 12 02
18@2x](https://github.com/user-attachments/assets/28720f15-997a-4600-9b5f-ed50a9422329)

![CleanShot 2025-06-16 at 12 02
43@2x](https://github.com/user-attachments/assets/875df203-07dc-4c95-8411-7e084ea25dbd)

![CleanShot 2025-06-16 at 12 08
12@2x](https://github.com/user-attachments/assets/48bacf2a-ee16-4894-a288-9d8113fa4f45)
---
 .../form-types/components/VariableChip.tsx    |  8 +++-
 .../__stories__/VariableChip.stories.tsx      | 44 +++++++++++++++++++
 2 files changed, 50 insertions(+), 2 deletions(-)

diff --git a/packages/twenty-front/src/modules/object-record/record-field/form-types/components/VariableChip.tsx b/packages/twenty-front/src/modules/object-record/record-field/form-types/components/VariableChip.tsx
index 7ced05652..63e589dce 100644
--- a/packages/twenty-front/src/modules/object-record/record-field/form-types/components/VariableChip.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-field/form-types/components/VariableChip.tsx
@@ -11,7 +11,11 @@ import { IconAlertTriangle, IconX } from 'twenty-ui/display';
 
 const StyledChip = styled.div<{ deletable: boolean; danger: boolean }>`
   background-color: ${({ theme, danger }) =>
-    danger ? theme.background.danger : theme.accent.quaternary};
+    danger ? theme.adaptiveColors.red1 : theme.adaptiveColors.blue1};
+  border-width: 1px;
+  border-style: solid;
+  border-color: ${({ theme, danger }) =>
+    danger ? theme.adaptiveColors.red2 : theme.adaptiveColors.blue2};
   border-radius: 4px;
   height: 20px;
   box-sizing: border-box;
@@ -61,7 +65,7 @@ const StyledDelete = styled.button<{ danger: boolean }>`
 
   &:hover {
     background-color: ${({ theme, danger }) =>
-      danger ? theme.color.red20 : theme.accent.secondary};
+      danger ? theme.adaptiveColors.red2 : theme.adaptiveColors.blue2};
   }
 `;
 
diff --git a/packages/twenty-front/src/modules/object-record/record-field/form-types/components/__stories__/VariableChip.stories.tsx b/packages/twenty-front/src/modules/object-record/record-field/form-types/components/__stories__/VariableChip.stories.tsx
index 9ce20772a..064349376 100644
--- a/packages/twenty-front/src/modules/object-record/record-field/form-types/components/__stories__/VariableChip.stories.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-field/form-types/components/__stories__/VariableChip.stories.tsx
@@ -1,5 +1,7 @@
 import { VariableChip } from '@/object-record/record-field/form-types/components/VariableChip';
+import { expect } from '@storybook/jest';
 import { Meta, StoryObj } from '@storybook/react';
+import { within } from '@storybook/test';
 import { I18nFrontDecorator } from '~/testing/decorators/I18nFrontDecorator';
 import { WorkflowStepDecorator } from '~/testing/decorators/WorkflowStepDecorator';
 import { MOCKED_STEP_ID } from '~/testing/mock-data/workflow';
@@ -18,10 +20,52 @@ export const Default: Story = {
   args: {
     rawVariableName: `{{${MOCKED_STEP_ID}.address.street1}}`,
   },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    expect(await canvas.findByText('Street 1')).toBeVisible();
+  },
+};
+
+export const DefaultDeleteHovered: Story = {
+  parameters: {
+    pseudo: {
+      hover: true,
+    },
+  },
+  args: {
+    rawVariableName: `{{${MOCKED_STEP_ID}.address.street1}}`,
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    expect(await canvas.findByText('Street 1')).toBeVisible();
+  },
 };
 
 export const WithVariableNotFound: Story = {
   args: {
     rawVariableName: `{{${MOCKED_STEP_ID}.unknown.variable}}`,
   },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    expect(await canvas.findByText('Not Found')).toBeVisible();
+  },
+};
+
+export const WithVariableNotFoundDeleteHover: Story = {
+  parameters: {
+    pseudo: {
+      hover: true,
+    },
+  },
+  args: {
+    rawVariableName: `{{${MOCKED_STEP_ID}.unknown.variable}}`,
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    expect(await canvas.findByText('Not Found')).toBeVisible();
+  },
 };