fix: minor color changes (#15616)

Closes #15597

The `color` of `OnBoardingModalCircularIcon` was set to `gray`. Now it
is set to `inverted` and it is displayed properly. I couldn't figure out
how to reach the onboarding screen, so I created a temporary path and
rendered the element there to verify the changes. Attaching screenshots
of the same.
<img width="398" height="393" alt="Screenshot from 2025-11-05 00-11-05"
src="https://github.com/user-attachments/assets/25efc790-92a3-42b5-8298-5128a3f1a466"
/>

<img width="398" height="418" alt="Screenshot from 2025-11-05 00-10-32"
src="https://github.com/user-attachments/assets/af52c695-4b01-40e9-a873-39d491c633cc"
/>

Additionally, a border has been added to the color picker icons.
<img width="573" height="383" alt="Screenshot from 2025-11-05 00-12-23"
src="https://github.com/user-attachments/assets/03d967aa-8c6f-4dfd-be3d-a2e16fe12b9a"
/>

I noticed that the dropdown after clicking on the icon also renders a
bunch of colors. Do let me know if these need the same border as well.
<img width="571" height="366" alt="Screenshot from 2025-11-05 00-12-37"
src="https://github.com/user-attachments/assets/a13bf253-6765-4d7a-9f0f-17cb7375a515"
/>

---------

Co-authored-by: bosiraphael <raphael.bosi@gmail.com>

packages/twenty-front/src/modules/command-menu/pages/page-layout/components/dropdown-content/ChartColorGradientOption.tsx

@@ -46,7 +46,9 @@ export const ChartColorGradientOption = ({
           groupIndex: reversedIndex,
           totalGroups: COLOR_GROUP_COUNT,
         });
-        return <ColorSample key={index} color={groupColor} />;
+        return (
+          <ColorSample key={index} colorName={colorName} color={groupColor} />
+        );
       })}
     </StyledColorSamplesContainer>
   );

packages/twenty-front/src/modules/command-menu/pages/page-layout/components/dropdown-content/ChartColorPaletteOption.tsx

@@ -4,6 +4,7 @@ import styled from '@emotion/styled';
 import { ColorSample } from 'twenty-ui/display';
 import { MenuItemSelect } from 'twenty-ui/navigation';
 import { type ThemeColor } from 'twenty-ui/theme';
+import { getMainColorNameFromPaletteColorName } from 'twenty-ui/utilities';
 
 type ChartColorPaletteOptionProps = {
   selectedItemId: string | null;
@@ -36,7 +37,13 @@ export const ChartColorPaletteOption = ({
     <StyledColorSamplesContainer>
       {paletteColors.map((paletteColorName) => {
         const baseColor = theme.color[paletteColorName] as string;
-        return <ColorSample key={paletteColorName} color={baseColor} />;
+        return (
+          <ColorSample
+            key={paletteColorName}
+            colorName={getMainColorNameFromPaletteColorName(paletteColorName)}
+            color={baseColor}
+          />
+        );
       })}
     </StyledColorSamplesContainer>
   );

packages/twenty-front/src/modules/onboarding/components/OnboardingModalCircularIcon.tsx

@@ -21,7 +21,7 @@ export const OnboardingModalCircularIcon = ({
   Icon,
 }: OnboardingModalCircularIconProps) => {
   const theme = useTheme();
-  const color = theme.grayScale.gray2;
+  const color = theme.background.invertedPrimary;
 
   return (
     <StyledCheckContainer color={color}>

packages/twenty-front/src/modules/settings/data-model/fields/forms/select/components/SettingsDataModelFieldSelectFormOptionRow.tsx

@@ -78,7 +78,6 @@ export const SettingsDataModelFieldSelectFormOptionRow = ({
   isNewRow,
 }: SettingsDataModelFieldSelectFormOptionRowProps) => {
   const theme = useTheme();
-
   const SELECT_COLOR_DROPDOWN_ID = `select-color-dropdown-${option.id}`;
   const SELECT_ACTIONS_DROPDOWN_ID = `select-actions-dropdown-${option.id}`;
 

packages/twenty-ui/src/display/color/components/ColorSample.tsx

@@ -7,25 +7,28 @@ import { isDefined } from 'twenty-shared/utils';
 export type ColorSampleVariant = 'default' | 'pipeline';
 
 export type ColorSampleProps = {
-  colorName?: ThemeColor;
+  colorName: ThemeColor;
   color?: string;
   variant?: ColorSampleVariant;
 };
 
-const getColor = (theme: ThemeType, colorName?: ThemeColor, color?: string) => {
+const getColor = (theme: ThemeType, colorName: ThemeColor, color?: string) => {
   if (isDefined(color)) {
     return color;
   }
-  if (isDefined(colorName)) {
-    return theme.tag.background[colorName];
-  }
-  return 'transparent';
+
+  return theme.tag.background[colorName];
+};
+
+const getBorderColor = (theme: ThemeType, colorName: ThemeColor) => {
+  return theme.tag.text[colorName];
 };
 
 const StyledColorSample = styled.div<ColorSampleProps>`
   background-color: ${({ theme, colorName, color }) =>
     getColor(theme, colorName, color)};
-  border: 1px solid ${({ theme }) => theme.border.color.transparentStrong};
+  border: 1px solid
+    ${({ theme, colorName }) => getBorderColor(theme, colorName)};
   border-radius: 60px;
   height: ${({ theme }) => theme.spacing(4)};
   width: ${({ theme }) => theme.spacing(3)};

packages/twenty-ui/src/utilities/color/utils/__tests__/getMainColorNameFromPaletteColorName.test.ts

@@ -0,0 +1,48 @@
+import { getMainColorNameFromPaletteColorName } from '../getMainColorNameFromPaletteColorName';
+
+describe('getMainColorNameFromPaletteColorName', () => {
+  it('should extract main color name from palette color names', () => {
+    expect(getMainColorNameFromPaletteColorName('purple5')).toBe('purple');
+    expect(getMainColorNameFromPaletteColorName('blue8')).toBe('blue');
+    expect(getMainColorNameFromPaletteColorName('red3')).toBe('red');
+    expect(getMainColorNameFromPaletteColorName('orange12')).toBe('orange');
+    expect(getMainColorNameFromPaletteColorName('yellow1')).toBe('yellow');
+    expect(getMainColorNameFromPaletteColorName('crimson9')).toBe('crimson');
+    expect(getMainColorNameFromPaletteColorName('violet7')).toBe('violet');
+    expect(getMainColorNameFromPaletteColorName('iris4')).toBe('iris');
+    expect(getMainColorNameFromPaletteColorName('grass6')).toBe('grass');
+    expect(getMainColorNameFromPaletteColorName('mint5')).toBe('mint');
+    expect(getMainColorNameFromPaletteColorName('lime3')).toBe('lime');
+    expect(getMainColorNameFromPaletteColorName('bronze8')).toBe('bronze');
+    expect(getMainColorNameFromPaletteColorName('gold2')).toBe('gold');
+    expect(getMainColorNameFromPaletteColorName('pink1')).toBe('pink');
+    expect(getMainColorNameFromPaletteColorName('turquoise2')).toBe(
+      'turquoise',
+    );
+    expect(getMainColorNameFromPaletteColorName('green10')).toBe('green');
+    expect(getMainColorNameFromPaletteColorName('cyan11')).toBe('cyan');
+    expect(getMainColorNameFromPaletteColorName('jade12')).toBe('jade');
+  });
+
+  it('should handle color names without numbers', () => {
+    expect(getMainColorNameFromPaletteColorName('purple')).toBe('purple');
+    expect(getMainColorNameFromPaletteColorName('blue')).toBe('blue');
+    expect(getMainColorNameFromPaletteColorName('red')).toBe('red');
+    expect(getMainColorNameFromPaletteColorName('orange')).toBe('orange');
+    expect(getMainColorNameFromPaletteColorName('yellow')).toBe('yellow');
+    expect(getMainColorNameFromPaletteColorName('crimson')).toBe('crimson');
+    expect(getMainColorNameFromPaletteColorName('violet')).toBe('violet');
+    expect(getMainColorNameFromPaletteColorName('iris')).toBe('iris');
+    expect(getMainColorNameFromPaletteColorName('grass')).toBe('grass');
+    expect(getMainColorNameFromPaletteColorName('mint')).toBe('mint');
+    expect(getMainColorNameFromPaletteColorName('lime')).toBe('lime');
+    expect(getMainColorNameFromPaletteColorName('bronze')).toBe('bronze');
+    expect(getMainColorNameFromPaletteColorName('gold')).toBe('gold');
+    expect(getMainColorNameFromPaletteColorName('pink')).toBe('pink');
+    expect(getMainColorNameFromPaletteColorName('turquoise')).toBe('turquoise');
+    expect(getMainColorNameFromPaletteColorName('green')).toBe('green');
+    expect(getMainColorNameFromPaletteColorName('cyan')).toBe('cyan');
+    expect(getMainColorNameFromPaletteColorName('jade')).toBe('jade');
+    expect(getMainColorNameFromPaletteColorName('gray')).toBe('gray');
+  });
+});

packages/twenty-ui/src/utilities/color/utils/getMainColorNameFromPaletteColorName.ts

@@ -0,0 +1,7 @@
+import { type ThemeColor } from '@ui/theme';
+
+export const getMainColorNameFromPaletteColorName = (
+  paletteColorName: string,
+): ThemeColor => {
+  return paletteColorName.replace(/\d+$/, '') as ThemeColor;
+};

packages/twenty-ui/src/utilities/index.ts

@@ -15,6 +15,7 @@ export { AnimatedFadeOut } from './animation/components/AnimatedFadeOut';
 export { AnimatedRotate } from './animation/components/AnimatedRotate';
 export { AnimatedTextWord } from './animation/components/AnimatedTextWord';
 export { AnimatedTranslation } from './animation/components/AnimatedTranslation';
+export { getMainColorNameFromPaletteColorName } from './color/utils/getMainColorNameFromPaletteColorName';
 export {
   stringToThemeColor,
   stringToThemeColorP3String,