From baaec81a91e680738989f2d52cbde13c0a34fc56 Mon Sep 17 00:00:00 2001
From: Baptiste Devessier <baptiste@devessier.fr>
Date: Tue, 24 Jun 2025 17:29:36 +0200
Subject: [PATCH] Use default color in Loader component for CSS variable
 (#12844)

Fixes a regression introduced by
https://github.com/twentyhq/twenty/pull/11639

cc @AMoreaux

## Before

![CleanShot 2025-06-24 at 17 20
21@2x](https://github.com/user-attachments/assets/8360da38-98b7-42a0-91b8-15caa5dde802)

## After

![CleanShot 2025-06-24 at 17 18
21@2x](https://github.com/user-attachments/assets/9953ec11-f22c-49ea-9023-fe42e79761b5)



https://github.com/user-attachments/assets/875c6c7e-3fc3-44bf-bb17-69ca362c1145
---
 .../loader/__stories__/Loader.stories.tsx     | 96 +++++++++++++++++++
 .../src/feedback/loader/components/Loader.tsx |  8 +-
 2 files changed, 102 insertions(+), 2 deletions(-)
 create mode 100644 packages/twenty-ui/src/feedback/loader/__stories__/Loader.stories.tsx

diff --git a/packages/twenty-ui/src/feedback/loader/__stories__/Loader.stories.tsx b/packages/twenty-ui/src/feedback/loader/__stories__/Loader.stories.tsx
new file mode 100644
index 000000000..3ca878030
--- /dev/null
+++ b/packages/twenty-ui/src/feedback/loader/__stories__/Loader.stories.tsx
@@ -0,0 +1,96 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { expect, waitFor } from '@storybook/test';
+
+import { ComponentDecorator } from '@ui/testing';
+
+import { Loader } from '../components/Loader';
+
+const meta: Meta<typeof Loader> = {
+  title: 'UI/Feedback/Loader',
+  component: Loader,
+  decorators: [ComponentDecorator],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Loader>;
+
+export const WithColor: Story = {
+  args: {
+    color: 'red',
+  },
+  play: async ({ canvasElement }) => {
+    await waitFor(() => {
+      const element = canvasElement.querySelector(':first-child');
+
+      expect(element).toBeVisible();
+
+      return element;
+    });
+  },
+};
+
+export const WithDefaultCssVariable: Story = {
+  decorators: [
+    (Story) => (
+      // @ts-expect-error: Custom CSS variable for demonstration purposes
+      <div style={{ '--tw-button-color': 'blue' }}>
+        <Story />
+      </div>
+    ),
+  ],
+  play: async ({ canvasElement }) => {
+    await waitFor(() => {
+      const element = canvasElement.querySelector(':first-child');
+
+      expect(element).toBeVisible();
+
+      return element;
+    });
+  },
+};
+
+export const WithDefaultColor: Story = {
+  play: async ({ canvasElement }) => {
+    await waitFor(() => {
+      const element = canvasElement.querySelector(':first-child');
+
+      expect(element).toBeVisible();
+
+      return element;
+    });
+  },
+};
+
+export const WithDifferentColors: Story = {
+  render: () => (
+    <div id="container" style={{ display: 'flex', gap: '16px' }}>
+      <Loader color="red" />
+      <Loader color="blue" />
+      <Loader color="yellow" />
+      <Loader color="green" />
+    </div>
+  ),
+  play: async ({ canvasElement }) => {
+    const loaders = await waitFor(() => {
+      const elements = canvasElement.querySelectorAll('#container > *');
+
+      expect(elements).toHaveLength(4);
+
+      return elements;
+    });
+
+    expect(loaders[0]).toHaveStyle({
+      borderColor: expect.stringContaining('red'),
+    });
+    expect(loaders[1]).toHaveStyle({
+      borderColor: expect.stringContaining('blue'),
+    });
+    expect(loaders[2]).toHaveStyle({
+      borderColor: expect.stringContaining('yellow'),
+    });
+    expect(loaders[3]).toHaveStyle({
+      borderColor: expect.stringContaining('green'),
+    });
+  },
+};
diff --git a/packages/twenty-ui/src/feedback/loader/components/Loader.tsx b/packages/twenty-ui/src/feedback/loader/components/Loader.tsx
index 4d007ab0b..9b5066245 100644
--- a/packages/twenty-ui/src/feedback/loader/components/Loader.tsx
+++ b/packages/twenty-ui/src/feedback/loader/components/Loader.tsx
@@ -15,7 +15,9 @@ const StyledLoaderContainer = styled.div<{
   border-radius: ${({ theme }) => theme.border.radius.pill};
   border: 1px solid
     ${({ color, theme }) =>
-      color ? theme.tag.text[color] : `var(--tw-button-color)`};
+      color
+        ? theme.tag.text[color]
+        : `var(--tw-button-color, ${theme.font.color.tertiary})`};
   overflow: hidden;
 `;
 
@@ -23,7 +25,9 @@ const StyledLoader = styled(motion.div)<{
   color?: ThemeColor;
 }>`
   background-color: ${({ color, theme }) =>
-    color ? theme.tag.text[color] : `var(--tw-button-color)`};
+    color
+      ? theme.tag.text[color]
+      : `var(--tw-button-color, ${theme.font.color.tertiary})`};
   border-radius: ${({ theme }) => theme.border.radius.pill};
   height: 8px;
   width: 8px;