feat: pick select field option colors (#2748)

Closes #2433

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

front/src/modules/ui/display/color/components/ColorSample.tsx

@@ -0,0 +1,39 @@
+import { css } from '@emotion/react';
+import styled from '@emotion/styled';
+
+import { ThemeColor } from '@/ui/theme/constants/colors';
+
+export type ColorSampleVariant = 'default' | 'pipeline';
+
+const StyledColorSample = styled.div<{
+  colorName: ThemeColor;
+  variant?: ColorSampleVariant;
+}>`
+  background-color: ${({ theme, colorName }) =>
+    theme.tag.background[colorName]};
+  border: 1px solid ${({ theme, colorName }) => theme.tag.text[colorName]};
+  border-radius: 60px;
+  height: ${({ theme }) => theme.spacing(4)};
+  width: ${({ theme }) => theme.spacing(3)};
+
+  ${({ colorName, theme, variant }) => {
+    if (variant === 'pipeline')
+      return css`
+        align-items: center;
+        border: 0;
+        display: flex;
+        justify-content: center;
+
+        &:after {
+          background-color: ${theme.tag.text[colorName]};
+          border-radius: ${theme.border.radius.rounded};
+          content: '';
+          display: block;
+          height: ${theme.spacing(1)};
+          width: ${theme.spacing(1)};
+        }
+      `;
+  }}
+`;
+
+export { StyledColorSample as ColorSample };

front/src/modules/ui/display/color/components/__stories__/ColorSample.stories.tsx

@@ -0,0 +1,25 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
+
+import { ColorSample } from '../ColorSample';
+
+const meta: Meta<typeof ColorSample> = {
+  title: 'UI/Display/Color/ColorSample',
+  component: ColorSample,
+  decorators: [ComponentDecorator],
+  args: { colorName: 'green' },
+  argTypes: {
+    as: { control: false },
+    theme: { control: false },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof ColorSample>;
+
+export const Default: Story = {};
+
+export const Pipeline: Story = {
+  args: { variant: 'pipeline' },
+};