feat: add Color calendar setting (#4141)

* feat: add Color calendar setting

Closes #4067

* fix: fix wrong imports

---------

Co-authored-by: Charles Bochet <charles@twenty.com>

packages/twenty-front/src/modules/ui/input/button/components/ColorPickerButton.tsx

@@ -0,0 +1,44 @@
+import { css } from '@emotion/react';
+import styled from '@emotion/styled';
+
+import {
+  ColorSample,
+  ColorSampleProps,
+} from '@/ui/display/color/components/ColorSample';
+import {
+  LightIconButton,
+  LightIconButtonProps,
+} from '@/ui/input/button/components/LightIconButton';
+
+type ColorPickerButtonProps = Pick<ColorSampleProps, 'colorName'> &
+  Pick<LightIconButtonProps, 'onClick'> & {
+    isSelected?: boolean;
+  };
+
+const StyledButton = styled(LightIconButton)<{
+  isSelected?: boolean;
+}>`
+  ${({ isSelected, theme }) =>
+    isSelected
+      ? css`
+          background-color: ${theme.background.transparent.medium};
+
+          &:hover {
+            background-color: ${theme.background.transparent.medium};
+          }
+        `
+      : ''}
+`;
+
+export const ColorPickerButton = ({
+  colorName,
+  isSelected,
+  onClick,
+}: ColorPickerButtonProps) => (
+  <StyledButton
+    size="medium"
+    isSelected={isSelected}
+    Icon={() => <ColorSample colorName={colorName} />}
+    onClick={onClick}
+  />
+);

packages/twenty-front/src/modules/ui/input/button/components/__stories__/ColorPickerButton.stories.tsx

@@ -0,0 +1,19 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
+
+import { ColorPickerButton } from '../ColorPickerButton';
+
+const meta: Meta<typeof ColorPickerButton> = {
+  title: 'UI/Input/Button/ColorPickerButton',
+  component: ColorPickerButton,
+  decorators: [ComponentDecorator],
+  args: { colorName: 'green' },
+};
+
+export default meta;
+type Story = StoryObj<typeof ColorPickerButton>;
+
+export const Default: Story = {};
+
+export const Selected: Story = { args: { isSelected: true } };