[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"
/>

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>
   );
 

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}

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) => ({

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;