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)

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};
   }
 `;
 

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();
+  },
 };