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