From b1320830b5e0ed64b9edf60c00b2f61e4b80b2a6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Rapha=C3=ABl=20Bosi?=
 <71827178+bosiraphael@users.noreply.github.com>
Date: Thu, 18 Dec 2025 17:11:13 +0100
Subject: [PATCH] [DASHBOARDS] Fix settings color palette (#16681)

Before, the settings color palette was hardcoded according to the Figma
design, now we generate it dynamically with the same util used by the
chart so it always corresponds to the same color. Even if we update the
graph color registry, it will be reflected inside the settings.

<img width="1512" height="741" alt="image"
src="https://github.com/user-attachments/assets/fac2d433-62b3-4b00-a362-cebbbe9f8aca"
/>
---
 .../ChartColorGradientOption.tsx              | 30 +++++++------
 .../ChartColorPaletteOption.tsx               | 44 +++++++++++--------
 .../ChartColorSelectionDropdownContent.tsx    |  2 +-
 .../ChartSettingsPaletteColorGroupCount.ts    |  1 +
 4 files changed, 44 insertions(+), 33 deletions(-)
 create mode 100644 packages/twenty-front/src/modules/command-menu/pages/page-layout/constants/ChartSettingsPaletteColorGroupCount.ts

diff --git a/packages/twenty-front/src/modules/command-menu/pages/page-layout/components/dropdown-content/ChartColorGradientOption.tsx b/packages/twenty-front/src/modules/command-menu/pages/page-layout/components/dropdown-content/ChartColorGradientOption.tsx
index 8a17ab0318..d0e38cd4ef 100644
--- a/packages/twenty-front/src/modules/command-menu/pages/page-layout/components/dropdown-content/ChartColorGradientOption.tsx
+++ b/packages/twenty-front/src/modules/command-menu/pages/page-layout/components/dropdown-content/ChartColorGradientOption.tsx
@@ -1,3 +1,4 @@
+import { CHART_SETTINGS_PALETTE_COLOR_GROUP_COUNT } from '@/command-menu/pages/page-layout/constants/ChartSettingsPaletteColorGroupCount';
 import { createGraphColorRegistry } from '@/page-layout/widgets/graph/utils/createGraphColorRegistry';
 import { generateGroupColor } from '@/page-layout/widgets/graph/utils/generateGroupColor';
 import { SelectableListItem } from '@/ui/layout/selectable-list/components/SelectableListItem';
@@ -24,8 +25,6 @@ const StyledColorSamplesContainer = styled.div`
   gap: ${({ theme }) => theme.spacing(0.5)};
 `;
 
-const COLOR_GROUP_COUNT = 5;
-
 export const ChartColorGradientOption = ({
   colorOption,
   selectedItemId,
@@ -38,18 +37,21 @@ export const ChartColorGradientOption = ({
 
   const colorSamples = (
     <StyledColorSamplesContainer>
-      {Array.from({ length: COLOR_GROUP_COUNT }).map((_, index) => {
-        const colorScheme = colorRegistry[colorName];
-        const reversedIndex = COLOR_GROUP_COUNT - 1 - index;
-        const groupColor = generateGroupColor({
-          colorScheme,
-          groupIndex: reversedIndex,
-          totalGroups: COLOR_GROUP_COUNT,
-        });
-        return (
-          <ColorSample key={index} colorName={colorName} color={groupColor} />
-        );
-      })}
+      {Array.from({ length: CHART_SETTINGS_PALETTE_COLOR_GROUP_COUNT }).map(
+        (_, index) => {
+          const colorScheme = colorRegistry[colorName];
+          const reversedIndex =
+            CHART_SETTINGS_PALETTE_COLOR_GROUP_COUNT - 1 - index;
+          const groupColor = generateGroupColor({
+            colorScheme,
+            groupIndex: reversedIndex,
+            totalGroups: CHART_SETTINGS_PALETTE_COLOR_GROUP_COUNT,
+          });
+          return (
+            <ColorSample key={index} colorName={colorName} color={groupColor} />
+          );
+        },
+      )}
     </StyledColorSamplesContainer>
   );
 
diff --git a/packages/twenty-front/src/modules/command-menu/pages/page-layout/components/dropdown-content/ChartColorPaletteOption.tsx b/packages/twenty-front/src/modules/command-menu/pages/page-layout/components/dropdown-content/ChartColorPaletteOption.tsx
index e9d8ac263d..e536ae5943 100644
--- a/packages/twenty-front/src/modules/command-menu/pages/page-layout/components/dropdown-content/ChartColorPaletteOption.tsx
+++ b/packages/twenty-front/src/modules/command-menu/pages/page-layout/components/dropdown-content/ChartColorPaletteOption.tsx
@@ -1,3 +1,6 @@
+import { CHART_SETTINGS_PALETTE_COLOR_GROUP_COUNT } from '@/command-menu/pages/page-layout/constants/ChartSettingsPaletteColorGroupCount';
+import { createGraphColorRegistry } from '@/page-layout/widgets/graph/utils/createGraphColorRegistry';
+import { getColorSchemeByIndex } from '@/page-layout/widgets/graph/utils/getColorSchemeByIndex';
 import { SelectableListItem } from '@/ui/layout/selectable-list/components/SelectableListItem';
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
@@ -26,26 +29,31 @@ export const ChartColorPaletteOption = ({
 }: ChartColorPaletteOptionProps) => {
   const theme = useTheme();
 
-  const paletteColors: Array<keyof typeof theme.color> = [
-    'purple',
-    'pink',
-    'red',
-    'orange',
-    'yellow',
-  ];
+  const colorRegistry = createGraphColorRegistry(theme);
+
+  const paletteColors = Array.from(
+    { length: CHART_SETTINGS_PALETTE_COLOR_GROUP_COUNT },
+    (_, index) => {
+      const colorScheme = getColorSchemeByIndex(colorRegistry, index);
+
+      return {
+        colorName: colorScheme.name,
+        color: colorScheme.solid,
+      };
+    },
+  );
 
   const colorSamples = (
     <StyledColorSamplesContainer>
-      {paletteColors.map((paletteColorName) => {
-        const baseColor = theme.color[paletteColorName] as string;
-        return (
-          <ColorSample
-            key={paletteColorName}
-            colorName={getMainColorNameFromPaletteColorName(paletteColorName)}
-            color={baseColor}
-          />
-        );
-      })}
+      {paletteColors.map((paletteColor) => (
+        <ColorSample
+          key={paletteColor.colorName}
+          colorName={getMainColorNameFromPaletteColorName(
+            paletteColor.colorName,
+          )}
+          color={paletteColor.color}
+        />
+      ))}
     </StyledColorSamplesContainer>
   );
 
@@ -58,7 +66,7 @@ export const ChartColorPaletteOption = ({
       }}
     >
       <MenuItemSelect
-        text={t`Palette`}
+        text={t`Default palette`}
         selected={false}
         focused={selectedItemId === 'auto' || currentColor === 'auto'}
         contextualText={colorSamples}
diff --git a/packages/twenty-front/src/modules/command-menu/pages/page-layout/components/dropdown-content/ChartColorSelectionDropdownContent.tsx b/packages/twenty-front/src/modules/command-menu/pages/page-layout/components/dropdown-content/ChartColorSelectionDropdownContent.tsx
index 65bf742a32..dfb228bf8e 100644
--- a/packages/twenty-front/src/modules/command-menu/pages/page-layout/components/dropdown-content/ChartColorSelectionDropdownContent.tsx
+++ b/packages/twenty-front/src/modules/command-menu/pages/page-layout/components/dropdown-content/ChartColorSelectionDropdownContent.tsx
@@ -71,7 +71,7 @@ export const ChartColorSelectionDropdownContent = () => {
   const colorOptions: ColorOption[] = [
     {
       id: 'auto',
-      name: 'Palette',
+      name: 'Default palette',
       colorName: 'auto',
     },
     ...MAIN_COLOR_NAMES.map((colorName) => ({
diff --git a/packages/twenty-front/src/modules/command-menu/pages/page-layout/constants/ChartSettingsPaletteColorGroupCount.ts b/packages/twenty-front/src/modules/command-menu/pages/page-layout/constants/ChartSettingsPaletteColorGroupCount.ts
new file mode 100644
index 0000000000..29633db390
--- /dev/null
+++ b/packages/twenty-front/src/modules/command-menu/pages/page-layout/constants/ChartSettingsPaletteColorGroupCount.ts
@@ -0,0 +1 @@
+export const CHART_SETTINGS_PALETTE_COLOR_GROUP_COUNT = 5;