Complete color refactoring (#15414)

# Complete color refactoring

Closes https://github.com/twentyhq/core-team-issues/issues/1779

- Updated all colors to use Radix colors with P3 color space allowing
for brighter colors
- Created our own gray scale interpolated on Radix's scale to have the
same values for grays as the old ones in the app
- Introduced dark and light colors as well as there transparent versions
- Added many new colors from radix that can be used in the tags or in
the graphs
- Updated multiple color utilities to match new behaviors
- Changed the computation of Avatar colors to return only colors from
the theme (before it was random hsl)

These changes allow the user to use new colors in tags or charts, the
colors are brighter and with better contrast. We have a full range of
color variations from 1 to 12 where before we only had 4 adaptative
colors.
All these changes will allow us to develop custom themes for the user
soon, where users can choose their accent colors, background colors and
there contrast.

package.json

@@ -7,6 +7,7 @@
     "@floating-ui/react": "^0.24.3",
     "@linaria/core": "^6.2.0",
     "@linaria/react": "^6.2.1",
+    "@radix-ui/colors": "^3.0.0",
     "@sentry/profiling-node": "^9.26.0",
     "@sentry/react": "^9.26.0",
     "@sniptt/guards": "^0.2.0",

packages/twenty-front/src/modules/activities/components/CustomResolverFetchMoreLoader.tsx

@@ -1,6 +1,5 @@
-import { useInView } from 'react-intersection-observer';
 import styled from '@emotion/styled';
-import { GRAY_SCALE } from 'twenty-ui/theme';
+import { useInView } from 'react-intersection-observer';
 
 type CustomResolverFetchMoreLoaderProps = {
   loading: boolean;
@@ -10,7 +9,7 @@ type CustomResolverFetchMoreLoaderProps = {
 const StyledText = styled.div`
   align-items: center;
   box-shadow: none;
-  color: ${GRAY_SCALE.gray40};
+  color: ${({ theme }) => theme.grayScale.gray9};
   display: flex;
   height: 32px;
   margin-left: ${({ theme }) => theme.spacing(8)};

packages/twenty-front/src/modules/activities/emails/components/EmailThreadPreview.tsx

@@ -3,8 +3,8 @@ import styled from '@emotion/styled';
 import { ActivityRow } from '@/activities/components/ActivityRow';
 import { EmailThreadNotShared } from '@/activities/emails/components/EmailThreadNotShared';
 import { useOpenEmailThreadInCommandMenu } from '@/command-menu/hooks/useOpenEmailThreadInCommandMenu';
+import { useTheme } from '@emotion/react';
 import { Avatar } from 'twenty-ui/display';
-import { GRAY_SCALE } from 'twenty-ui/theme';
 import {
   MessageChannelVisibility,
   type TimelineThread,
@@ -105,6 +105,7 @@ export const EmailThreadPreview = ({ thread }: EmailThreadPreviewProps) => {
   };
 
   const isDisabled = visibility !== MessageChannelVisibility.SHARE_EVERYTHING;
+  const theme = useTheme();
 
   return (
     <ActivityRow onClick={handleThreadClick} disabled={isDisabled}>
@@ -135,8 +136,8 @@ export const EmailThreadPreview = ({ thread }: EmailThreadPreviewProps) => {
               avatarUrl={finalAvatarUrl}
               placeholder={finalDisplayedName}
               type="rounded"
-              color={isCountIcon ? GRAY_SCALE.gray50 : undefined}
-              backgroundColor={isCountIcon ? GRAY_SCALE.gray10 : undefined}
+              color={isCountIcon ? theme.grayScale.gray11 : undefined}
+              backgroundColor={isCountIcon ? theme.grayScale.gray2 : undefined}
             />
           )}
         </StyledParticipantsContainer>

packages/twenty-front/src/modules/advanced-text-editor/components/AdvancedTextEditor.tsx

@@ -47,7 +47,7 @@ const StyledEditorContainer = styled.div<{
     }
 
     .variable-tag {
-      background-color: ${({ theme }) => theme.color.blue10};
+      background-color: ${({ theme }) => theme.color.blue3};
       border-radius: ${({ theme }) => theme.border.radius.sm};
       color: ${({ theme }) => theme.color.blue};
       padding: ${({ theme }) => theme.spacing(1)};

packages/twenty-front/src/modules/billing/components/SettingsBillingCreditsSection.tsx

@@ -8,12 +8,13 @@ import { useCurrentMetered } from '@/billing/hooks/useCurrentMetered';
 import { useGetWorkflowNodeExecutionUsage } from '@/billing/hooks/useGetWorkflowNodeExecutionUsage';
 import { useNumberFormat } from '@/localization/hooks/useNumberFormat';
 import { useSubscriptionStatus } from '@/workspace/hooks/useSubscriptionStatus';
+import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 import { t } from '@lingui/core/macro';
 import { H2Title } from 'twenty-ui/display';
 import { ProgressBar } from 'twenty-ui/feedback';
 import { Section } from 'twenty-ui/layout';
-import { BACKGROUND_LIGHT, COLOR } from 'twenty-ui/theme';
+import { BACKGROUND_LIGHT } from 'twenty-ui/theme';
 import { SubscriptionStatus } from '~/generated/graphql';
 import { formatToShortNumber } from '~/utils/format/formatToShortNumber';
 
@@ -61,6 +62,8 @@ export const SettingsBillingCreditsSection = ({
     currentBillingSubscription.interval,
   );
 
+  const theme = useTheme();
+
   return (
     <>
       <Section>
@@ -75,7 +78,9 @@ export const SettingsBillingCreditsSection = ({
           />
           <ProgressBar
             value={displayedProgressBarValue}
-            barColor={progressBarValue > 100 ? COLOR.red40 : COLOR.blue}
+            barColor={
+              progressBarValue > 100 ? theme.color.red8 : theme.color.blue
+            }
             backgroundColor={BACKGROUND_LIGHT.tertiary}
             withBorderRadius={true}
           />

packages/twenty-front/src/modules/billing/components/SubscriptionBenefit.tsx

@@ -1,6 +1,6 @@
-import React from 'react';
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
+import React from 'react';
 import { IconCheck } from 'twenty-ui/display';
 
 const StyledBenefitContainer = styled.div`
@@ -27,7 +27,7 @@ export const SubscriptionBenefit = ({ children }: SubscriptionBenefitProps) => {
   return (
     <StyledBenefitContainer>
       <StyledCheckContainer>
-        <IconCheck color={theme.grayScale.gray50} size={14} />
+        <IconCheck color={theme.grayScale.gray11} size={14} />
       </StyledCheckContainer>
       {children}
     </StyledBenefitContainer>

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

@@ -1,8 +1,9 @@
 import { SelectableListItem } from '@/ui/layout/selectable-list/components/SelectableListItem';
+import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 import { ColorSample } from 'twenty-ui/display';
 import { MenuItemSelect } from 'twenty-ui/navigation';
-import { MAIN_COLORS, type ThemeColor } from 'twenty-ui/theme';
+import { type ThemeColor } from 'twenty-ui/theme';
 
 type ChartColorPaletteOptionProps = {
   selectedItemId: string | null;
@@ -21,7 +22,9 @@ export const ChartColorPaletteOption = ({
   currentColor,
   onSelectColor,
 }: ChartColorPaletteOptionProps) => {
-  const paletteColors: Array<keyof typeof MAIN_COLORS> = [
+  const theme = useTheme();
+
+  const paletteColors: Array<keyof typeof theme.color> = [
     'purple',
     'pink',
     'red',
@@ -32,7 +35,7 @@ export const ChartColorPaletteOption = ({
   const colorSamples = (
     <StyledColorSamplesContainer>
       {paletteColors.map((paletteColorName) => {
-        const baseColor = MAIN_COLORS[paletteColorName];
+        const baseColor = theme.color[paletteColorName] as string;
         return <ColorSample key={paletteColorName} color={baseColor} />;
       })}
     </StyledColorSamplesContainer>

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

@@ -115,19 +115,11 @@ export const ChartColorSelectionDropdownContent = () => {
             currentColor={currentColor}
             onSelectColor={handleSelectColor}
           />
-        </SelectableList>
-      </DropdownMenuItemsContainer>
-      {regularColorOptions.length > 0 && (
-        <>
-          <DropdownMenuSeparator />
-          <DropdownMenuItemsContainer>
-            <SelectableList
-              selectableListInstanceId={dropdownId}
-              focusId={dropdownId}
-              selectableItemIdArray={filteredColorOptions.map(
-                (colorOption) => colorOption.id,
-              )}
-            >
+
+          {regularColorOptions.length > 0 && (
+            <>
+              <DropdownMenuSeparator />
+
               {regularColorOptions.map((colorOption) => (
                 <ChartColorGradientOption
                   key={colorOption.id}
@@ -137,10 +129,10 @@ export const ChartColorSelectionDropdownContent = () => {
                   onSelectColor={handleSelectColor}
                 />
               ))}
-            </SelectableList>
-          </DropdownMenuItemsContainer>
-        </>
-      )}
+            </>
+          )}
+        </SelectableList>
+      </DropdownMenuItemsContainer>
     </>
   );
 };

packages/twenty-front/src/modules/error-handler/components/AppRootErrorFallback.tsx

@@ -3,7 +3,7 @@ import styled from '@emotion/styled';
 import { t } from '@lingui/core/macro';
 import { motion } from 'framer-motion';
 import { IconReload } from 'twenty-ui/display';
-import { GRAY_SCALE, THEME_DARK } from 'twenty-ui/theme';
+import { THEME_DARK } from 'twenty-ui/theme';
 
 type AppRootErrorFallbackProps = AppErrorDisplayProps;
 
@@ -17,8 +17,8 @@ const StyledContainer = styled.div`
 `;
 
 const StyledPanel = styled.div`
-  background: ${GRAY_SCALE.gray0};
-  border: 1px solid ${GRAY_SCALE.gray20};
+  background: ${({ theme }) => theme.grayScale.gray1};
+  border: 1px solid ${({ theme }) => theme.grayScale.gray5};
   border-radius: 8px;
   height: 100%;
   overflow-x: auto;
@@ -66,13 +66,13 @@ const StyledEmptyTextContainer = styled.div`
 `;
 
 const StyledEmptyTitle = styled.div`
-  color: ${GRAY_SCALE.gray60};
+  color: ${({ theme }) => theme.grayScale.gray12};
   font-size: 1.23rem;
   font-weight: 600;
 `;
 
 const StyledEmptySubTitle = styled.div`
-  color: ${GRAY_SCALE.gray50};
+  color: ${({ theme }) => theme.grayScale.gray11};
   font-size: 0.92rem;
   font-weight: 400;
   line-height: 1.5;
@@ -83,9 +83,9 @@ const StyledEmptySubTitle = styled.div`
 
 const StyledButton = styled.button`
   align-items: center;
-  background: ${GRAY_SCALE.gray0};
-  border: 1px solid ${GRAY_SCALE.gray20};
-  color: ${GRAY_SCALE.gray60};
+  background: ${({ theme }) => theme.grayScale.gray1};
+  border: 1px solid ${({ theme }) => theme.grayScale.gray5};
+  color: ${({ theme }) => theme.grayScale.gray12};
   border-radius: 8px;
   cursor: pointer;
   display: flex;
@@ -94,7 +94,7 @@ const StyledButton = styled.button`
 `;
 
 const StyledIcon = styled(IconReload)`
-  color: ${GRAY_SCALE.gray60};
+  color: ${({ theme }) => theme.grayScale.gray12};
   margin-right: 8px;
 `;
 

packages/twenty-front/src/modules/file/components/FileIcon.tsx

@@ -8,7 +8,7 @@ const StyledIconContainer = styled.div<{ background: string }>`
   align-items: center;
   background: ${({ background }) => background};
   border-radius: ${({ theme }) => theme.border.radius.sm};
-  color: ${({ theme }) => theme.grayScale.gray0};
+  color: ${({ theme }) => theme.grayScale.gray1};
   display: flex;
   flex-shrink: 0;
   justify-content: center;

packages/twenty-front/src/modules/keyboard-shortcut-menu/components/KeyboardShortcutMenuStyles.tsx

@@ -40,7 +40,7 @@ export const StyledContainer = styled.div`
 `;
 
 export const StyledGroupHeading = styled.label`
-  color: ${({ theme }) => theme.color.gray50};
+  color: ${({ theme }) => theme.color.gray10};
   padding-bottom: ${({ theme }) => theme.spacing(1)};
   padding-top: ${({ theme }) => theme.spacing(4)};
 `;

packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownBooleanSelect.tsx

@@ -68,7 +68,7 @@ export const ObjectFilterDropdownBooleanSelect = () => {
               <BooleanDisplay value={option} />
               {objectFilterDropdownFilterValue === option.toString() && (
                 <StyledIconCheckContainer>
-                  <IconCheck color={theme.grayScale.gray50} size={16} />
+                  <IconCheck color={theme.grayScale.gray11} size={16} />
                 </StyledIconCheckContainer>
               )}
             </StyledBooleanSelectContainer>

packages/twenty-front/src/modules/object-record/record-board/record-board-column/components/RecordBoardColumnFetchMoreLoader.tsx

@@ -7,12 +7,11 @@ import { RecordBoardColumnContext } from '@/object-record/record-board/record-bo
 import { isRecordBoardFetchingRecordsByColumnFamilyState } from '@/object-record/record-board/states/isRecordBoardFetchingRecordsByColumnFamilyState';
 import { recordBoardShouldFetchMoreInColumnComponentFamilyState } from '@/object-record/record-board/states/recordBoardShouldFetchMoreInColumnComponentFamilyState';
 import { useSetRecoilComponentFamilyState } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentFamilyState';
-import { GRAY_SCALE } from 'twenty-ui/theme';
 
 const StyledText = styled.div`
   align-items: center;
   box-shadow: none;
-  color: ${GRAY_SCALE.gray40};
+  color: ${({ theme }) => theme.grayScale.gray9};
   display: flex;
   height: 32px;
   margin-left: ${({ theme }) => theme.spacing(8)};

packages/twenty-front/src/modules/object-record/record-card/components/RecordCard.tsx

@@ -28,14 +28,14 @@ const StyledBoardCard = styled.div<{
 
   &[data-active='true'] {
     background-color: ${({ theme }) => theme.accent.quaternary};
-    border: 1px solid ${({ theme }) => theme.adaptiveColors.blue3};
+    border: 1px solid ${({ theme }) => theme.color.blue7};
   }
 
   &:hover {
     border: 1px solid ${({ theme }) => theme.border.color.strong};
 
     &[data-active='true'] {
-      border: 1px solid ${({ theme }) => theme.adaptiveColors.blue3};
+      border: 1px solid ${({ theme }) => theme.color.blue7};
     }
   }
 

packages/twenty-front/src/modules/object-record/record-field/ui/form-types/components/TextVariableEditor.tsx

@@ -43,7 +43,7 @@ const StyledEditor = styled.div<{
     }
 
     .variable-tag {
-      background-color: ${({ theme }) => theme.color.blue10};
+      background-color: ${({ theme }) => theme.color.blue3};
       border-radius: ${({ theme }) => theme.border.radius.sm};
       color: ${({ theme }) => theme.color.blue};
       padding: ${({ theme }) => theme.spacing(1)};

packages/twenty-front/src/modules/object-record/record-field/ui/form-types/components/VariableChip.tsx

@@ -8,11 +8,11 @@ import { IconAlertTriangle, IconX } from 'twenty-ui/display';
 
 const StyledChip = styled.div<{ deletable: boolean; danger: boolean }>`
   background-color: ${({ theme, danger }) =>
-    danger ? theme.adaptiveColors.red1 : theme.adaptiveColors.blue1};
+    danger ? theme.color.red3 : theme.color.blue3};
   border-width: 1px;
   border-style: solid;
   border-color: ${({ theme, danger }) =>
-    danger ? theme.adaptiveColors.red2 : theme.adaptiveColors.blue2};
+    danger ? theme.color.red5 : theme.color.blue5};
   border-radius: 4px;
   height: 20px;
   box-sizing: border-box;
@@ -62,7 +62,7 @@ const StyledDelete = styled.button<{ danger: boolean }>`
 
   &:hover {
     background-color: ${({ theme, danger }) =>
-      danger ? theme.adaptiveColors.red2 : theme.adaptiveColors.blue2};
+      danger ? theme.color.red5 : theme.color.blue5};
   }
 `;
 

packages/twenty-front/src/modules/object-record/record-picker/multiple-record-picker/components/MultipleRecordPickerFetchMoreLoader.tsx

@@ -16,12 +16,11 @@ import styled from '@emotion/styled';
 import { useCallback } from 'react';
 import { useInView } from 'react-intersection-observer';
 import { useRecoilCallback } from 'recoil';
-import { GRAY_SCALE } from 'twenty-ui/theme';
 
 const StyledText = styled.div`
   align-items: center;
   box-shadow: none;
-  color: ${GRAY_SCALE.gray40};
+  color: ${({ theme }) => theme.grayScale.gray9};
   display: flex;
   height: 32px;
   margin-left: ${({ theme }) => theme.spacing(8)};

packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellFocusedPortalContent.tsx

@@ -26,7 +26,7 @@ const StyledRecordTableCellFocusPortalContent = styled.div<{
 
   height: ${RECORD_TABLE_ROW_HEIGHT}px;
 
-  outline: ${({ theme }) => `1px solid ${theme.adaptiveColors.blue4}`};
+  outline: ${({ theme }) => `1px solid ${theme.color.blue8}`};
 
   user-select: none;
 `;

packages/twenty-front/src/modules/object-record/record-table/virtualization/components/RecordTableRowVirtualizedDebugRowHelper.tsx

@@ -17,8 +17,8 @@ const StyledDebugRow = styled.div`
   top: ${({ theme }) => theme.spacing(1.25)};
   z-index: 20;
   color: ${({ theme }) => theme.font.color.primary};
-  background-color: ${({ theme }) => theme.adaptiveColors.gray1};
-  border: 1px solid ${({ theme }) => theme.adaptiveColors.blue4};
+  background-color: ${({ theme }) => theme.color.gray3};
+  border: 1px solid ${({ theme }) => theme.color.blue8};
   padding: ${({ theme }) => theme.spacing(0.5)};
   display: flex;
   max-height: ${({ theme }) => theme.spacing(4)};

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

@@ -1,7 +1,6 @@
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 import { type IconComponent } from 'twenty-ui/display';
-import { RGBA } from 'twenty-ui/theme';
 
 const StyledCheckContainer = styled.div<{ color: string }>`
   align-items: center;
@@ -9,7 +8,7 @@ const StyledCheckContainer = styled.div<{ color: string }>`
   justify-content: center;
   border: 2px solid ${({ color }) => color};
   border-radius: ${({ theme }) => theme.border.radius.rounded};
-  box-shadow: ${({ color }) => color && `-4px 4px 0 -2px ${RGBA(color, 1)}`};
+  box-shadow: ${({ color }) => color && `-4px 4px 0 -2px ${color}`};
   height: 36px;
   width: 36px;
 `;
@@ -22,8 +21,7 @@ export const OnboardingModalCircularIcon = ({
   Icon,
 }: OnboardingModalCircularIconProps) => {
   const theme = useTheme();
-  const color =
-    theme.name === 'light' ? theme.grayScale.gray90 : theme.grayScale.gray10;
+  const color = theme.grayScale.gray2;
 
   return (
     <StyledCheckContainer color={color}>

packages/twenty-front/src/modules/page-layout/components/PageLayoutGridLayout.tsx

@@ -38,7 +38,7 @@ const StyledGridContainer = styled.div`
   user-select: none;
 
   .react-grid-placeholder {
-    background: ${({ theme }) => theme.adaptiveColors.blue3} !important;
+    background: ${({ theme }) => theme.color.blue7} !important;
 
     border-radius: ${({ theme }) => theme.border.radius.md};
   }

packages/twenty-front/src/modules/page-layout/components/PageLayoutGridOverlay.tsx

@@ -31,10 +31,10 @@ const StyledGridOverlay = styled.div<{
 
 const StyledGridCell = styled.div<{ isSelected?: boolean }>`
   background: ${({ isSelected, theme }) =>
-    isSelected ? theme.adaptiveColors.blue1 : 'transparent'};
+    isSelected ? theme.color.blue3 : 'transparent'};
   border: 1px solid
     ${({ theme, isSelected }) =>
-      isSelected ? theme.adaptiveColors.blue3 : theme.border.color.light};
+      isSelected ? theme.color.blue7 : theme.border.color.light};
   border-radius: ${({ theme }) => theme.border.radius.md};
   transition: background-color 0.3s ease;
 

packages/twenty-front/src/modules/page-layout/widgets/graph/constants/GraphColorScaleMax.ts

@@ -0,0 +1 @@
+export const GRAPH_COLOR_SCALE_MAX = 8;

packages/twenty-front/src/modules/page-layout/widgets/graph/constants/GraphColorScaleMinIndex.ts

@@ -0,0 +1 @@
+export const GRAPH_COLOR_SCALE_MIN = 2;

packages/twenty-front/src/modules/page-layout/widgets/graph/constants/GraphGroupColorMinimumAlpha.constant.ts

@@ -1 +0,0 @@
-export const GRAPH_GROUP_COLOR_MINIMUM_ALPHA = 0.2;

packages/twenty-front/src/modules/page-layout/widgets/graph/constants/GraphMaximumNumberOfGroupColors.ts

@@ -1 +1 @@
-export const GRAPH_MAXIMUM_NUMBER_OF_GROUP_COLORS = 10;
+export const GRAPH_MAXIMUM_NUMBER_OF_GROUP_COLORS = 5;

packages/twenty-front/src/modules/page-layout/widgets/graph/graphWidgetAggregateChart/components/GraphWidgetAggregateChart.tsx

@@ -60,12 +60,12 @@ export const GraphWidgetAggregateChart = ({
           </StyledTrendPercentageValue>
           {trendPercentage >= 0 ? (
             <IconTrendingUp
-              color={theme.color.turquoise40}
+              color={theme.color.turquoise8}
               size={theme.icon.size.md}
             />
           ) : (
             <IconTrendingDown
-              color={theme.adaptiveColors.red4}
+              color={theme.color.red8}
               size={theme.icon.size.md}
             />
           )}

packages/twenty-front/src/modules/page-layout/widgets/graph/graphWidgetBarChart/hooks/__tests__/useBarChartData.test.ts

@@ -17,6 +17,20 @@ describe('useBarChartData', () => {
         hover: ['green3', 'green4'],
       },
       solid: 'greenSolid',
+      variations: [
+        'green1',
+        'green2',
+        'green3',
+        'green4',
+        'green5',
+        'green6',
+        'green7',
+        'green8',
+        'green9',
+        'green10',
+        'green11',
+        'green12',
+      ],
     },
     purple: {
       name: 'purple',
@@ -25,6 +39,20 @@ describe('useBarChartData', () => {
         hover: ['purple3', 'purple4'],
       },
       solid: 'purpleSolid',
+      variations: [
+        'purple1',
+        'purple2',
+        'purple3',
+        'purple4',
+        'purple5',
+        'purple6',
+        'purple7',
+        'purple8',
+        'purple9',
+        'purple10',
+        'purple11',
+        'purple12',
+      ],
     },
   };
 

packages/twenty-front/src/modules/page-layout/widgets/graph/graphWidgetGaugeChart/hooks/__tests__/useGaugeChartData.test.ts

@@ -12,6 +12,20 @@ describe('useGaugeChartData', () => {
         hover: ['blue3', 'blue4'],
       },
       solid: 'blueSolid',
+      variations: [
+        'blue1',
+        'blue2',
+        'blue3',
+        'blue4',
+        'blue5',
+        'blue6',
+        'blue7',
+        'blue8',
+        'blue9',
+        'blue10',
+        'blue11',
+        'blue12',
+      ],
     },
     green: {
       name: 'green',
@@ -20,6 +34,20 @@ describe('useGaugeChartData', () => {
         hover: ['green3', 'green4'],
       },
       solid: 'greenSolid',
+      variations: [
+        'green1',
+        'green2',
+        'green3',
+        'green4',
+        'green5',
+        'green6',
+        'green7',
+        'green8',
+        'green9',
+        'green10',
+        'green11',
+        'green12',
+      ],
     },
   };
 

packages/twenty-front/src/modules/page-layout/widgets/graph/graphWidgetLineChart/hooks/__tests__/useLineChartData.test.ts

@@ -14,6 +14,20 @@ describe('useLineChartData', () => {
         hover: ['red3', 'red4'],
       },
       solid: 'redSolid',
+      variations: [
+        'red1',
+        'red2',
+        'red3',
+        'red4',
+        'red5',
+        'red6',
+        'red7',
+        'red8',
+        'red9',
+        'red10',
+        'red11',
+        'red12',
+      ],
     },
     blue: {
       name: 'blue',
@@ -22,6 +36,20 @@ describe('useLineChartData', () => {
         hover: ['blue3', 'blue4'],
       },
       solid: 'blueSolid',
+      variations: [
+        'blue1',
+        'blue2',
+        'blue3',
+        'blue4',
+        'blue5',
+        'blue6',
+        'blue7',
+        'blue8',
+        'blue9',
+        'blue10',
+        'blue11',
+        'blue12',
+      ],
     },
   };
 

packages/twenty-front/src/modules/page-layout/widgets/graph/graphWidgetPieChart/hooks/__tests__/usePieChartData.test.ts

@@ -17,6 +17,20 @@ describe('usePieChartData', () => {
         hover: ['red3', 'red4'],
       },
       solid: 'redSolid',
+      variations: [
+        'red1',
+        'red2',
+        'red3',
+        'red4',
+        'red5',
+        'red6',
+        'red7',
+        'red8',
+        'red9',
+        'red10',
+        'red11',
+        'red12',
+      ],
     },
     blue: {
       name: 'blue',
@@ -25,6 +39,20 @@ describe('usePieChartData', () => {
         hover: ['blue3', 'blue4'],
       },
       solid: 'blueSolid',
+      variations: [
+        'blue1',
+        'blue2',
+        'blue3',
+        'blue4',
+        'blue5',
+        'blue6',
+        'blue7',
+        'blue8',
+        'blue9',
+        'blue10',
+        'blue11',
+        'blue12',
+      ],
     },
   };
 

packages/twenty-front/src/modules/page-layout/widgets/graph/types/GraphColorScheme.ts

@@ -5,4 +5,18 @@ export type GraphColorScheme = {
     hover: [string, string];
   };
   solid: string;
+  variations: [
+    string,
+    string,
+    string,
+    string,
+    string,
+    string,
+    string,
+    string,
+    string,
+    string,
+    string,
+    string,
+  ];
 };

packages/twenty-front/src/modules/page-layout/widgets/graph/utils/createGraphColorRegistry.ts

@@ -8,84 +8,551 @@ export const createGraphColorRegistry = (
   blue: {
     name: 'blue',
     gradient: {
-      normal: [theme.adaptiveColors.blue1, theme.adaptiveColors.blue2],
-      hover: [theme.adaptiveColors.blue3, theme.adaptiveColors.blue4],
+      normal: [theme.color.blue3, theme.color.blue5],
+      hover: [theme.color.blue7, theme.color.blue8],
     },
-    solid: theme.adaptiveColors.blue4,
+    solid: theme.color.blue8,
+    variations: [
+      theme.color.blue1,
+      theme.color.blue2,
+      theme.color.blue3,
+      theme.color.blue4,
+      theme.color.blue5,
+      theme.color.blue6,
+      theme.color.blue7,
+      theme.color.blue8,
+      theme.color.blue9,
+      theme.color.blue10,
+      theme.color.blue11,
+      theme.color.blue12,
+    ],
   },
   purple: {
     name: 'purple',
     gradient: {
-      normal: [theme.adaptiveColors.purple1, theme.adaptiveColors.purple2],
-      hover: [theme.adaptiveColors.purple3, theme.adaptiveColors.purple4],
+      normal: [theme.color.purple3, theme.color.purple5],
+      hover: [theme.color.purple7, theme.color.purple8],
     },
-    solid: theme.adaptiveColors.purple4,
+    solid: theme.color.purple8,
+    variations: [
+      theme.color.purple1,
+      theme.color.purple2,
+      theme.color.purple3,
+      theme.color.purple4,
+      theme.color.purple5,
+      theme.color.purple6,
+      theme.color.purple7,
+      theme.color.purple8,
+      theme.color.purple9,
+      theme.color.purple10,
+      theme.color.purple11,
+      theme.color.purple12,
+    ],
   },
   turquoise: {
     name: 'turquoise',
     gradient: {
-      normal: [
-        theme.adaptiveColors.turquoise1,
-        theme.adaptiveColors.turquoise2,
-      ],
-      hover: [theme.adaptiveColors.turquoise3, theme.adaptiveColors.turquoise4],
+      normal: [theme.color.turquoise3, theme.color.turquoise5],
+      hover: [theme.color.turquoise7, theme.color.turquoise8],
     },
-    solid: theme.adaptiveColors.turquoise4,
+    solid: theme.color.turquoise8,
+    variations: [
+      theme.color.turquoise1,
+      theme.color.turquoise2,
+      theme.color.turquoise3,
+      theme.color.turquoise4,
+      theme.color.turquoise5,
+      theme.color.turquoise6,
+      theme.color.turquoise7,
+      theme.color.turquoise8,
+      theme.color.turquoise9,
+      theme.color.turquoise10,
+      theme.color.turquoise11,
+      theme.color.turquoise12,
+    ],
   },
   orange: {
     name: 'orange',
     gradient: {
-      normal: [theme.adaptiveColors.orange1, theme.adaptiveColors.orange2],
-      hover: [theme.adaptiveColors.orange3, theme.adaptiveColors.orange4],
+      normal: [theme.color.orange3, theme.color.orange5],
+      hover: [theme.color.orange7, theme.color.orange8],
     },
-    solid: theme.adaptiveColors.orange4,
+    solid: theme.color.orange8,
+    variations: [
+      theme.color.orange1,
+      theme.color.orange2,
+      theme.color.orange3,
+      theme.color.orange4,
+      theme.color.orange5,
+      theme.color.orange6,
+      theme.color.orange7,
+      theme.color.orange8,
+      theme.color.orange9,
+      theme.color.orange10,
+      theme.color.orange11,
+      theme.color.orange12,
+    ],
   },
   pink: {
     name: 'pink',
     gradient: {
-      normal: [theme.adaptiveColors.pink1, theme.adaptiveColors.pink2],
-      hover: [theme.adaptiveColors.pink3, theme.adaptiveColors.pink4],
+      normal: [theme.color.pink3, theme.color.pink5],
+      hover: [theme.color.pink7, theme.color.pink8],
     },
-    solid: theme.adaptiveColors.pink4,
+    solid: theme.color.pink8,
+    variations: [
+      theme.color.pink1,
+      theme.color.pink2,
+      theme.color.pink3,
+      theme.color.pink4,
+      theme.color.pink5,
+      theme.color.pink6,
+      theme.color.pink7,
+      theme.color.pink8,
+      theme.color.pink9,
+      theme.color.pink10,
+      theme.color.pink11,
+      theme.color.pink12,
+    ],
   },
   yellow: {
     name: 'yellow',
     gradient: {
-      normal: [theme.adaptiveColors.yellow1, theme.adaptiveColors.yellow2],
-      hover: [theme.adaptiveColors.yellow3, theme.adaptiveColors.yellow4],
+      normal: [theme.color.yellow3, theme.color.yellow5],
+      hover: [theme.color.yellow7, theme.color.yellow8],
     },
-    solid: theme.adaptiveColors.yellow4,
+    solid: theme.color.yellow8,
+    variations: [
+      theme.color.yellow1,
+      theme.color.yellow2,
+      theme.color.yellow3,
+      theme.color.yellow4,
+      theme.color.yellow5,
+      theme.color.yellow6,
+      theme.color.yellow7,
+      theme.color.yellow8,
+      theme.color.yellow9,
+      theme.color.yellow10,
+      theme.color.yellow11,
+      theme.color.yellow12,
+    ],
   },
   red: {
     name: 'red',
     gradient: {
-      normal: [theme.adaptiveColors.red1, theme.adaptiveColors.red2],
-      hover: [theme.adaptiveColors.red3, theme.adaptiveColors.red4],
+      normal: [theme.color.red3, theme.color.red5],
+      hover: [theme.color.red7, theme.color.red8],
     },
-    solid: theme.adaptiveColors.red4,
+    solid: theme.color.red8,
+    variations: [
+      theme.color.red1,
+      theme.color.red2,
+      theme.color.red3,
+      theme.color.red4,
+      theme.color.red5,
+      theme.color.red6,
+      theme.color.red7,
+      theme.color.red8,
+      theme.color.red9,
+      theme.color.red10,
+      theme.color.red11,
+      theme.color.red12,
+    ],
   },
   green: {
     name: 'green',
     gradient: {
-      normal: [theme.adaptiveColors.green1, theme.adaptiveColors.green2],
-      hover: [theme.adaptiveColors.green3, theme.adaptiveColors.green4],
+      normal: [theme.color.green3, theme.color.green5],
+      hover: [theme.color.green7, theme.color.green8],
     },
-    solid: theme.adaptiveColors.green4,
+    solid: theme.color.green8,
+    variations: [
+      theme.color.green1,
+      theme.color.green2,
+      theme.color.green3,
+      theme.color.green4,
+      theme.color.green5,
+      theme.color.green6,
+      theme.color.green7,
+      theme.color.green8,
+      theme.color.green9,
+      theme.color.green10,
+      theme.color.green11,
+      theme.color.green12,
+    ],
   },
   sky: {
     name: 'sky',
     gradient: {
-      normal: [theme.adaptiveColors.sky1, theme.adaptiveColors.sky2],
-      hover: [theme.adaptiveColors.sky3, theme.adaptiveColors.sky4],
+      normal: [theme.color.sky3, theme.color.sky5],
+      hover: [theme.color.sky7, theme.color.sky8],
     },
-    solid: theme.adaptiveColors.sky4,
+    solid: theme.color.sky8,
+    variations: [
+      theme.color.sky1,
+      theme.color.sky2,
+      theme.color.sky3,
+      theme.color.sky4,
+      theme.color.sky5,
+      theme.color.sky6,
+      theme.color.sky7,
+      theme.color.sky8,
+      theme.color.sky9,
+      theme.color.sky10,
+      theme.color.sky11,
+      theme.color.sky12,
+    ],
   },
   gray: {
     name: 'gray',
     gradient: {
-      normal: [theme.adaptiveColors.gray1, theme.adaptiveColors.gray2],
-      hover: [theme.adaptiveColors.gray3, theme.adaptiveColors.gray4],
+      normal: [theme.color.gray3, theme.color.gray5],
+      hover: [theme.color.gray7, theme.color.gray8],
     },
-    solid: theme.adaptiveColors.gray4,
+    solid: theme.color.gray8,
+    variations: [
+      theme.color.gray1,
+      theme.color.gray2,
+      theme.color.gray3,
+      theme.color.gray4,
+      theme.color.gray5,
+      theme.color.gray6,
+      theme.color.gray7,
+      theme.color.gray8,
+      theme.color.gray9,
+      theme.color.gray10,
+      theme.color.gray11,
+      theme.color.gray12,
+    ],
+  },
+  tomato: {
+    name: 'tomato',
+    gradient: {
+      normal: [theme.color.tomato3, theme.color.tomato5],
+      hover: [theme.color.tomato7, theme.color.tomato8],
+    },
+    solid: theme.color.tomato8,
+    variations: [
+      theme.color.tomato1,
+      theme.color.tomato2,
+      theme.color.tomato3,
+      theme.color.tomato4,
+      theme.color.tomato5,
+      theme.color.tomato6,
+      theme.color.tomato7,
+      theme.color.tomato8,
+      theme.color.tomato9,
+      theme.color.tomato10,
+      theme.color.tomato11,
+      theme.color.tomato12,
+    ],
+  },
+  ruby: {
+    name: 'ruby',
+    gradient: {
+      normal: [theme.color.ruby3, theme.color.ruby5],
+      hover: [theme.color.ruby7, theme.color.ruby8],
+    },
+    solid: theme.color.ruby8,
+    variations: [
+      theme.color.ruby1,
+      theme.color.ruby2,
+      theme.color.ruby3,
+      theme.color.ruby4,
+      theme.color.ruby5,
+      theme.color.ruby6,
+      theme.color.ruby7,
+      theme.color.ruby8,
+      theme.color.ruby9,
+      theme.color.ruby10,
+      theme.color.ruby11,
+      theme.color.ruby12,
+    ],
+  },
+  crimson: {
+    name: 'crimson',
+    gradient: {
+      normal: [theme.color.crimson3, theme.color.crimson5],
+      hover: [theme.color.crimson7, theme.color.crimson8],
+    },
+    solid: theme.color.crimson8,
+    variations: [
+      theme.color.crimson1,
+      theme.color.crimson2,
+      theme.color.crimson3,
+      theme.color.crimson4,
+      theme.color.crimson5,
+      theme.color.crimson6,
+      theme.color.crimson7,
+      theme.color.crimson8,
+      theme.color.crimson9,
+      theme.color.crimson10,
+      theme.color.crimson11,
+      theme.color.crimson12,
+    ],
+  },
+  plum: {
+    name: 'plum',
+    gradient: {
+      normal: [theme.color.plum3, theme.color.plum5],
+      hover: [theme.color.plum7, theme.color.plum8],
+    },
+    solid: theme.color.plum8,
+    variations: [
+      theme.color.plum1,
+      theme.color.plum2,
+      theme.color.plum3,
+      theme.color.plum4,
+      theme.color.plum5,
+      theme.color.plum6,
+      theme.color.plum7,
+      theme.color.plum8,
+      theme.color.plum9,
+      theme.color.plum10,
+      theme.color.plum11,
+      theme.color.plum12,
+    ],
+  },
+  violet: {
+    name: 'violet',
+    gradient: {
+      normal: [theme.color.violet3, theme.color.violet5],
+      hover: [theme.color.violet7, theme.color.violet8],
+    },
+    solid: theme.color.violet8,
+    variations: [
+      theme.color.violet1,
+      theme.color.violet2,
+      theme.color.violet3,
+      theme.color.violet4,
+      theme.color.violet5,
+      theme.color.violet6,
+      theme.color.violet7,
+      theme.color.violet8,
+      theme.color.violet9,
+      theme.color.violet10,
+      theme.color.violet11,
+      theme.color.violet12,
+    ],
+  },
+  iris: {
+    name: 'iris',
+    gradient: {
+      normal: [theme.color.iris3, theme.color.iris5],
+      hover: [theme.color.iris7, theme.color.iris8],
+    },
+    solid: theme.color.iris8,
+    variations: [
+      theme.color.iris1,
+      theme.color.iris2,
+      theme.color.iris3,
+      theme.color.iris4,
+      theme.color.iris5,
+      theme.color.iris6,
+      theme.color.iris7,
+      theme.color.iris8,
+      theme.color.iris9,
+      theme.color.iris10,
+      theme.color.iris11,
+      theme.color.iris12,
+    ],
+  },
+  cyan: {
+    name: 'cyan',
+    gradient: {
+      normal: [theme.color.cyan3, theme.color.cyan5],
+      hover: [theme.color.cyan7, theme.color.cyan8],
+    },
+    solid: theme.color.cyan8,
+    variations: [
+      theme.color.cyan1,
+      theme.color.cyan2,
+      theme.color.cyan3,
+      theme.color.cyan4,
+      theme.color.cyan5,
+      theme.color.cyan6,
+      theme.color.cyan7,
+      theme.color.cyan8,
+      theme.color.cyan9,
+      theme.color.cyan10,
+      theme.color.cyan11,
+      theme.color.cyan12,
+    ],
+  },
+  jade: {
+    name: 'jade',
+    gradient: {
+      normal: [theme.color.jade3, theme.color.jade5],
+      hover: [theme.color.jade7, theme.color.jade8],
+    },
+    solid: theme.color.jade8,
+    variations: [
+      theme.color.jade1,
+      theme.color.jade2,
+      theme.color.jade3,
+      theme.color.jade4,
+      theme.color.jade5,
+      theme.color.jade6,
+      theme.color.jade7,
+      theme.color.jade8,
+      theme.color.jade9,
+      theme.color.jade10,
+      theme.color.jade11,
+      theme.color.jade12,
+    ],
+  },
+  grass: {
+    name: 'grass',
+    gradient: {
+      normal: [theme.color.grass3, theme.color.grass5],
+      hover: [theme.color.grass7, theme.color.grass8],
+    },
+    solid: theme.color.grass8,
+    variations: [
+      theme.color.grass1,
+      theme.color.grass2,
+      theme.color.grass3,
+      theme.color.grass4,
+      theme.color.grass5,
+      theme.color.grass6,
+      theme.color.grass7,
+      theme.color.grass8,
+      theme.color.grass9,
+      theme.color.grass10,
+      theme.color.grass11,
+      theme.color.grass12,
+    ],
+  },
+  mint: {
+    name: 'mint',
+    gradient: {
+      normal: [theme.color.mint3, theme.color.mint5],
+      hover: [theme.color.mint7, theme.color.mint8],
+    },
+    solid: theme.color.mint8,
+    variations: [
+      theme.color.mint1,
+      theme.color.mint2,
+      theme.color.mint3,
+      theme.color.mint4,
+      theme.color.mint5,
+      theme.color.mint6,
+      theme.color.mint7,
+      theme.color.mint8,
+      theme.color.mint9,
+      theme.color.mint10,
+      theme.color.mint11,
+      theme.color.mint12,
+    ],
+  },
+  lime: {
+    name: 'lime',
+    gradient: {
+      normal: [theme.color.lime3, theme.color.lime5],
+      hover: [theme.color.lime7, theme.color.lime8],
+    },
+    solid: theme.color.lime8,
+    variations: [
+      theme.color.lime1,
+      theme.color.lime2,
+      theme.color.lime3,
+      theme.color.lime4,
+      theme.color.lime5,
+      theme.color.lime6,
+      theme.color.lime7,
+      theme.color.lime8,
+      theme.color.lime9,
+      theme.color.lime10,
+      theme.color.lime11,
+      theme.color.lime12,
+    ],
+  },
+  bronze: {
+    name: 'bronze',
+    gradient: {
+      normal: [theme.color.bronze3, theme.color.bronze5],
+      hover: [theme.color.bronze7, theme.color.bronze8],
+    },
+    solid: theme.color.bronze8,
+    variations: [
+      theme.color.bronze1,
+      theme.color.bronze2,
+      theme.color.bronze3,
+      theme.color.bronze4,
+      theme.color.bronze5,
+      theme.color.bronze6,
+      theme.color.bronze7,
+      theme.color.bronze8,
+      theme.color.bronze9,
+      theme.color.bronze10,
+      theme.color.bronze11,
+      theme.color.bronze12,
+    ],
+  },
+  gold: {
+    name: 'gold',
+    gradient: {
+      normal: [theme.color.gold3, theme.color.gold5],
+      hover: [theme.color.gold7, theme.color.gold8],
+    },
+    solid: theme.color.gold8,
+    variations: [
+      theme.color.gold1,
+      theme.color.gold2,
+      theme.color.gold3,
+      theme.color.gold4,
+      theme.color.gold5,
+      theme.color.gold6,
+      theme.color.gold7,
+      theme.color.gold8,
+      theme.color.gold9,
+      theme.color.gold10,
+      theme.color.gold11,
+      theme.color.gold12,
+    ],
+  },
+  brown: {
+    name: 'brown',
+    gradient: {
+      normal: [theme.color.brown3, theme.color.brown5],
+      hover: [theme.color.brown7, theme.color.brown8],
+    },
+    solid: theme.color.brown8,
+    variations: [
+      theme.color.brown1,
+      theme.color.brown2,
+      theme.color.brown3,
+      theme.color.brown4,
+      theme.color.brown5,
+      theme.color.brown6,
+      theme.color.brown7,
+      theme.color.brown8,
+      theme.color.brown9,
+      theme.color.brown10,
+      theme.color.brown11,
+      theme.color.brown12,
+    ],
+  },
+  amber: {
+    name: 'amber',
+    gradient: {
+      normal: [theme.color.amber3, theme.color.amber5],
+      hover: [theme.color.amber7, theme.color.amber8],
+    },
+    solid: theme.color.amber8,
+    variations: [
+      theme.color.amber1,
+      theme.color.amber2,
+      theme.color.amber3,
+      theme.color.amber4,
+      theme.color.amber5,
+      theme.color.amber6,
+      theme.color.amber7,
+      theme.color.amber8,
+      theme.color.amber9,
+      theme.color.amber10,
+      theme.color.amber11,
+      theme.color.amber12,
+    ],
   },
 });

packages/twenty-front/src/modules/page-layout/widgets/graph/utils/generateGroupColor.ts

@@ -1,6 +1,5 @@
-import { RGBA } from 'twenty-ui/theme';
-
-import { GRAPH_GROUP_COLOR_MINIMUM_ALPHA } from '@/page-layout/widgets/graph/constants/GraphGroupColorMinimumAlpha.constant';
+import { GRAPH_COLOR_SCALE_MAX } from '@/page-layout/widgets/graph/constants/GraphColorScaleMax';
+import { GRAPH_COLOR_SCALE_MIN } from '@/page-layout/widgets/graph/constants/GraphColorScaleMinIndex';
 import { GRAPH_MAXIMUM_NUMBER_OF_GROUP_COLORS } from '@/page-layout/widgets/graph/constants/GraphMaximumNumberOfGroupColors';
 import { type GraphColorScheme } from '@/page-layout/widgets/graph/types/GraphColorScheme';
 
@@ -23,10 +22,14 @@ export const generateGroupColor = ({
     GRAPH_MAXIMUM_NUMBER_OF_GROUP_COLORS,
   );
 
-  const ratio = (effectiveGroupIndex + 1) / effectiveTotalGroups;
-  const alpha =
-    GRAPH_GROUP_COLOR_MINIMUM_ALPHA +
-    (1 - GRAPH_GROUP_COLOR_MINIMUM_ALPHA) * ratio;
+  const colorIndexRange = GRAPH_COLOR_SCALE_MAX - GRAPH_COLOR_SCALE_MIN;
 
-  return RGBA(colorScheme.solid, alpha);
+  const variationIndex =
+    GRAPH_COLOR_SCALE_MIN -
+    1 +
+    Math.floor(
+      ((effectiveGroupIndex + 1) / effectiveTotalGroups) * colorIndexRange,
+    );
+
+  return colorScheme.variations[variationIndex];
 };

packages/twenty-front/src/modules/settings/admin-panel/config-variables/utils/useSourceContent.ts

@@ -12,12 +12,12 @@ export const useSourceContent = (source: ConfigSource) => {
     case ConfigSource.DATABASE:
       return {
         text: t`Stored in database`,
-        color: theme.color.blue50,
+        color: theme.color.blue10,
       };
     case ConfigSource.ENVIRONMENT:
       return {
         text: t`Environment variable`,
-        color: theme.color.green50,
+        color: theme.color.green10,
       };
     case ConfigSource.DEFAULT:
       return {

packages/twenty-front/src/modules/settings/components/SettingsRadioCard.tsx

@@ -59,7 +59,7 @@ export const SettingsRadioCard = ({
 
   return (
     <StyledRadioCardContent tabIndex={0} onClick={onClick}>
-      {Icon && <Icon size={theme.icon.size.xl} color={theme.color.gray50} />}
+      {Icon && <Icon size={theme.icon.size.xl} color={theme.color.gray10} />}
       <span>
         {title && <StyledTitle>{title}</StyledTitle>}
         {description && <StyledDescription>{description}</StyledDescription>}

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

@@ -19,6 +19,7 @@ import { applySimpleQuotesToString } from '~/utils/string/applySimpleQuotesToStr
 
 import { AdvancedSettingsWrapper } from '@/settings/components/AdvancedSettingsWrapper';
 import { isAdvancedModeEnabledState } from '@/ui/navigation/navigation-drawer/states/isAdvancedModeEnabledState';
+import { useTheme } from '@emotion/react';
 import { t } from '@lingui/core/macro';
 import { useEffect, useState } from 'react';
 import { useSearchParams } from 'react-router-dom';
@@ -27,7 +28,6 @@ import { isDefined } from 'twenty-shared/utils';
 import { IconPlus, IconPoint } from 'twenty-ui/display';
 import { LightButton } from 'twenty-ui/input';
 import { CardContent, CardFooter } from 'twenty-ui/layout';
-import { MAIN_COLORS } from 'twenty-ui/theme';
 import { SettingsDataModelFieldSelectFormOptionRow } from './SettingsDataModelFieldSelectFormOptionRow';
 
 export const settingsDataModelFieldSelectFormSchema = z.object({
@@ -89,7 +89,7 @@ const StyledLabelContainer = styled.div`
 `;
 
 const StyledIconContainer = styled.div`
-  border-right: 1px solid ${MAIN_COLORS.yellow};
+  border-right: 1px solid ${({ theme }) => theme.color.yellow};
   display: flex;
 
   margin-bottom: ${({ theme }) => theme.spacing(1.5)};
@@ -248,6 +248,8 @@ export const SettingsDataModelFieldSelectForm = ({
     setFormValue('options', newOptions, { shouldDirty: true });
   };
 
+  const theme = useTheme();
+
   return (
     <>
       <Controller
@@ -269,8 +271,8 @@ export const SettingsDataModelFieldSelectForm = ({
                     <StyledIconContainer>
                       <StyledIconPoint
                         size={12}
-                        color={MAIN_COLORS.yellow}
-                        fill={MAIN_COLORS.yellow}
+                        color={theme.color.yellow}
+                        fill={theme.color.yellow}
                       />
                     </StyledIconContainer>
                     <StyledApiKey>{t`API values`}</StyledApiKey>

packages/twenty-front/src/modules/settings/roles/role-permissions/object-level-permissions/object-form/components/OverridableCheckbox.tsx

@@ -85,7 +85,7 @@ export const OverridableCheckbox = ({
               <AnimatedRotate animateOnHover={!disabled}>
                 <IconReload
                   size={theme.icon.size.md}
-                  color={theme.adaptiveColors.orange4}
+                  color={theme.color.orange8}
                 />
               </AnimatedRotate>
             </StyledIconWrapper>

packages/twenty-front/src/modules/settings/roles/role-permissions/objects-permissions/components/PermissionIcon.tsx

@@ -13,10 +13,10 @@ type PermissionIconProps = {
 const StyledIconWrapper = styled.div<{ isRevoked?: boolean }>`
   align-items: center;
   background: ${({ theme, isRevoked }) =>
-    isRevoked ? theme.adaptiveColors.orange1 : theme.adaptiveColors.blue1};
+    isRevoked ? theme.color.orange3 : theme.color.blue3};
   border: 1px solid
     ${({ theme, isRevoked }) =>
-      isRevoked ? theme.adaptiveColors.orange3 : theme.adaptiveColors.blue3};
+      isRevoked ? theme.color.orange7 : theme.color.blue7};
   border-radius: ${({ theme }) => theme.border.radius.sm};
   display: flex;
   height: ${({ theme }) => theme.spacing(4)};

packages/twenty-front/src/modules/spreadsheet-import/components/SpreadsheetImportTable.tsx

@@ -4,14 +4,13 @@ import styled from '@emotion/styled';
 import DataGrid, { type DataGridProps } from 'react-data-grid';
 
 import { useSpreadsheetImportInternal } from '@/spreadsheet-import/hooks/useSpreadsheetImportInternal';
-import { RGBA } from 'twenty-ui/theme';
 
 const StyledDataGrid = styled(DataGrid)`
   --rdg-background-color: ${({ theme }) => theme.background.primary};
   --rdg-border-color: ${({ theme }) => theme.border.color.medium};
   --rdg-color: ${({ theme }) => theme.font.color.primary};
   --rdg-error-cell-background-color: ${({ theme }) =>
-    RGBA(theme.color.red, 0.4)};
+    theme.color.transparent.red5};
   --rdg-font-size: ${({ theme }) => theme.font.size.sm};
   --rdg-frozen-cell-box-shadow: none;
   --rdg-header-background-color: ${({ theme }) => theme.background.primary};
@@ -67,15 +66,15 @@ const StyledDataGrid = styled(DataGrid)`
   }
 
   .rdg-cell-error {
-    background-color: ${({ theme }) => theme.adaptiveColors.yellow1};
+    background-color: ${({ theme }) => theme.color.yellow3};
   }
 
   .rdg-cell-warning {
-    background-color: ${({ theme }) => RGBA(theme.color.orange, 0.08)};
+    background-color: ${({ theme }) => theme.color.transparent.orange2};
   }
 
   .rdg-cell-info {
-    background-color: ${({ theme }) => RGBA(theme.color.blue, 0.08)};
+    background-color: ${({ theme }) => theme.color.transparent.blue2};
   }
 
   .rdg-static {

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

@@ -5,7 +5,6 @@ import TextareaAutosize from 'react-textarea-autosize';
 import { usePushFocusItemToFocusStack } from '@/ui/utilities/focus/hooks/usePushFocusItemToFocusStack';
 import { useRemoveFocusItemFromFocusStackById } from '@/ui/utilities/focus/hooks/useRemoveFocusItemFromFocusStackById';
 import { FocusComponentType } from '@/ui/utilities/focus/types/FocusComponentType';
-import { RGBA } from 'twenty-ui/theme';
 import { turnIntoEmptyStringIfWhitespacesOnly } from '~/utils/string/turnIntoEmptyStringIfWhitespacesOnly';
 
 const MAX_ROWS = 5;
@@ -56,7 +55,7 @@ const StyledTextArea = styled(TextareaAutosize)`
   &:focus {
     outline: none;
     ${({ theme }) => {
-      return `box-shadow: 0px 0px 0px 3px ${RGBA(theme.color.blue, 0.1)};
+      return `box-shadow: 0px 0px 0px 3px ${theme.color.transparent.blue2};
       border-color: ${theme.color.blue};`;
     }};
   }

packages/twenty-front/src/modules/ui/layout/modal/components/ConfirmationModal.tsx

@@ -53,7 +53,7 @@ export const StyledConfirmationButton = styled(StyledCenteredButton)`
   font-size: ${({ theme }) => theme.font.size.md};
   line-height: ${({ theme }) => theme.text.lineHeight.lg};
   :hover {
-    background-color: ${({ theme }) => theme.color.red10};
+    background-color: ${({ theme }) => theme.color.red3};
   }
 `;
 

packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerItem.tsx

@@ -161,7 +161,7 @@ const StyledItemCount = styled.span`
   align-items: center;
   background-color: ${({ theme }) => theme.color.blue};
   border-radius: ${({ theme }) => theme.border.radius.rounded};
-  color: ${({ theme }) => theme.grayScale.gray0};
+  color: ${({ theme }) => theme.grayScale.gray1};
   display: flex;
   font-size: ${({ theme }) => theme.font.size.xs};
   font-weight: ${({ theme }) => theme.font.weight.semiBold};

packages/twenty-front/src/modules/ui/navigation/step-bar/components/Step.tsx

@@ -118,7 +118,7 @@ export const Step = ({
         {isInPreviousSteps && (
           <AnimatedCheckmark
             isAnimating={isInPreviousSteps}
-            color={theme.grayScale.gray60}
+            color={theme.grayScale.gray12}
           />
         )}
         {!isInPreviousSteps && (

packages/twenty-front/src/modules/ui/utilities/drag-select/components/DragSelect.tsx

@@ -27,8 +27,8 @@ const StyledDragSelection = styled.div<SelectionBox>`
   position: absolute;
   z-index: 99;
   opacity: 0.2;
-  border: 1px solid ${({ theme }) => theme.color.blue10};
-  background: ${({ theme }) => theme.color.blue30};
+  border: 1px solid ${({ theme }) => theme.color.blue3};
+  background: ${({ theme }) => theme.color.blue7};
   top: ${({ top }) => top}px;
   left: ${({ left }) => left}px;
   width: ${({ width }) => width}px;

packages/twenty-front/src/modules/ui/utilities/drag-select/components/__stories__/DragSelect.stories.tsx

@@ -24,7 +24,7 @@ const StyledSelectableItem = styled.div<{ selected?: boolean }>`
   border: 1px solid ${({ theme }) => theme.border.color.medium};
   border-radius: ${({ theme }) => theme.border.radius.sm};
   background: ${({ theme, selected }) =>
-    selected ? theme.color.blue10 : theme.background.secondary};
+    selected ? theme.color.blue3 : theme.background.secondary};
   display: flex;
   align-items: center;
   justify-content: center;
@@ -34,7 +34,7 @@ const StyledSelectableItem = styled.div<{ selected?: boolean }>`
 
   &:hover {
     background: ${({ theme, selected }) =>
-      selected ? theme.color.blue20 : theme.background.tertiary};
+      selected ? theme.color.blue5 : theme.background.tertiary};
   }
 `;
 

packages/twenty-front/src/modules/views/components/SortOrFilterChip.tsx

@@ -73,7 +73,7 @@ const StyledDelete = styled.button<{ variant: SortOrFilterChipVariant }>`
     background-color: ${({ theme, variant }) => {
       switch (variant) {
         case 'danger':
-          return theme.color.red20;
+          return theme.color.red5;
         case 'default':
         default:
           return theme.accent.secondary;

packages/twenty-front/src/modules/views/components/ViewBarFilterDropdownAdvancedFilterButton.tsx

@@ -27,7 +27,7 @@ import { MenuItem } from 'twenty-ui/navigation';
 import { v4 } from 'uuid';
 
 const StyledPill = styled(Pill)`
-  background: ${({ theme }) => theme.color.blueAccent10};
+  background: ${({ theme }) => theme.color.blue3};
   color: ${({ theme }) => theme.color.blue};
 `;
 

packages/twenty-front/src/modules/views/view-picker/components/ViewPickerDropdown.tsx

@@ -21,7 +21,7 @@ import { MOBILE_VIEWPORT } from 'twenty-ui/theme';
 
 const StyledDropdownLabelAdornments = styled.span`
   align-items: center;
-  color: ${({ theme }) => theme.grayScale.gray35};
+  color: ${({ theme }) => theme.grayScale.gray8};
   display: inline-flex;
   gap: ${({ theme }) => theme.spacing(1)};
   margin-left: ${({ theme }) => theme.spacing(1)};

packages/twenty-front/src/modules/workflow/workflow-diagram/utils/getWorkflowDiagramColors.ts

@@ -26,7 +26,7 @@ export const getWorkflowDiagramColors = ({
     case 'RUNNING': {
       return {
         selected: {
-          background: theme.adaptiveColors.yellow1,
+          background: theme.color.yellow3,
           borderColor: theme.color.yellow,
           color: theme.tag.text.yellow,
           titleColor: theme.font.color.primary,
@@ -44,7 +44,7 @@ export const getWorkflowDiagramColors = ({
     case 'FAILED': {
       return {
         selected: {
-          background: theme.adaptiveColors.red1,
+          background: theme.color.red3,
           borderColor: theme.color.red,
           color: theme.tag.text.red,
           titleColor: theme.font.color.primary,
@@ -63,7 +63,7 @@ export const getWorkflowDiagramColors = ({
     case 'SUCCESS': {
       return {
         selected: {
-          background: theme.adaptiveColors.turquoise1,
+          background: theme.color.turquoise3,
           borderColor: theme.color.turquoise,
           color: theme.tag.text.green,
           titleColor: theme.font.color.primary,
@@ -81,7 +81,7 @@ export const getWorkflowDiagramColors = ({
     default: {
       return {
         selected: {
-          background: theme.adaptiveColors.blue1,
+          background: theme.color.blue3,
           borderColor: theme.color.blue,
           color: theme.tag.text.blue,
           titleColor: theme.font.color.primary,

packages/twenty-front/src/modules/workflow/workflow-diagram/workflow-nodes/components/WorkflowDiagramStepNodeIcon.tsx

@@ -52,7 +52,7 @@ export const WorkflowDiagramStepNodeIcon = ({
         case 'DELAY':
         case 'FILTER':
         case 'ITERATOR':
-          return <Icon size={theme.icon.size.md} color={theme.color.green60} />;
+          return <Icon size={theme.icon.size.md} color={theme.color.green12} />;
         default: {
           return (
             <Icon

packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/utils/__tests__/getActionIconColorOrThrow.test.ts

@@ -1,17 +1,17 @@
 import { type WorkflowActionType } from '@/workflow/types/Workflow';
 import { type Theme } from '@emotion/react';
-import { COLOR, GRAY_SCALE } from 'twenty-ui/theme';
+import { COLOR_LIGHT, GRAY_SCALE_LIGHT } from 'twenty-ui/theme';
 import { getActionIconColorOrThrow } from '../getActionIconColorOrThrow';
 
 const mockTheme: Theme = {
   color: {
-    orange: COLOR.orange,
-    pink: COLOR.pink,
-    red: COLOR.red,
+    orange: COLOR_LIGHT.orange,
+    pink: COLOR_LIGHT.pink,
+    red: COLOR_LIGHT.red,
   },
   font: {
     color: {
-      tertiary: GRAY_SCALE.gray40,
+      tertiary: GRAY_SCALE_LIGHT.gray9,
     },
   },
 } as Theme;
@@ -85,7 +85,7 @@ describe('getActionIconColorOrThrow', () => {
         actionType: 'FILTER',
       });
 
-      expect(result).toBe(mockTheme.color.green60);
+      expect(result).toBe(mockTheme.color.green12);
     });
   });
 
@@ -93,13 +93,13 @@ describe('getActionIconColorOrThrow', () => {
     it('should use the provided theme colors correctly', () => {
       const customTheme: Theme = {
         color: {
-          red: COLOR.red,
-          orange: COLOR.orange,
-          pink: COLOR.turquoise,
+          red: COLOR_LIGHT.red,
+          orange: COLOR_LIGHT.orange,
+          pink: COLOR_LIGHT.turquoise,
         },
         font: {
           color: {
-            tertiary: GRAY_SCALE.gray50,
+            tertiary: GRAY_SCALE_LIGHT.gray11,
           },
         },
       } as Theme;
@@ -109,28 +109,28 @@ describe('getActionIconColorOrThrow', () => {
           theme: customTheme,
           actionType: 'CODE',
         }),
-      ).toBe(COLOR.red);
+      ).toBe(COLOR_LIGHT.red);
 
       expect(
         getActionIconColorOrThrow({
           theme: customTheme,
           actionType: 'SEND_EMAIL',
         }),
-      ).toBe(COLOR.red);
+      ).toBe(COLOR_LIGHT.red);
 
       expect(
         getActionIconColorOrThrow({
           theme: customTheme,
           actionType: 'AI_AGENT',
         }),
-      ).toBe(COLOR.turquoise);
+      ).toBe(COLOR_LIGHT.turquoise);
 
       expect(
         getActionIconColorOrThrow({
           theme: customTheme,
           actionType: 'CREATE_RECORD',
         }),
-      ).toBe(GRAY_SCALE.gray50);
+      ).toBe(GRAY_SCALE_LIGHT.gray11);
     });
   });
 
@@ -231,49 +231,49 @@ describe('getActionIconColorOrThrow', () => {
     it('should use the provided theme colors correctly', () => {
       const customTheme: Theme = {
         color: {
-          red: COLOR.red,
-          orange: COLOR.orange,
-          pink: COLOR.turquoise,
+          red: COLOR_LIGHT.red,
+          orange: COLOR_LIGHT.orange,
+          pink: COLOR_LIGHT.turquoise,
         },
         font: {
           color: {
-            tertiary: GRAY_SCALE.gray50,
+            tertiary: GRAY_SCALE_LIGHT.gray11,
           },
         },
       } as Theme;
 
       expect(
         getActionIconColorOrThrow({ theme: customTheme, actionType: 'CODE' }),
-      ).toBe(COLOR.red);
+      ).toBe(COLOR_LIGHT.red);
       expect(
         getActionIconColorOrThrow({
           theme: customTheme,
           actionType: 'SEND_EMAIL',
         }),
-      ).toBe(COLOR.red);
+      ).toBe(COLOR_LIGHT.red);
       expect(
         getActionIconColorOrThrow({
           theme: customTheme,
           actionType: 'AI_AGENT',
         }),
-      ).toBe(COLOR.turquoise);
+      ).toBe(COLOR_LIGHT.turquoise);
       expect(
         getActionIconColorOrThrow({
           theme: customTheme,
           actionType: 'CREATE_RECORD',
         }),
-      ).toBe(GRAY_SCALE.gray50);
+      ).toBe(GRAY_SCALE_LIGHT.gray11);
     });
 
     it('should return undefined when red color is missing for SEND_EMAIL action', () => {
       const themeWithoutBlue: Theme = {
         color: {
-          orange: COLOR.orange,
-          pink: COLOR.pink,
+          orange: COLOR_LIGHT.orange,
+          pink: COLOR_LIGHT.pink,
         },
         font: {
           color: {
-            tertiary: GRAY_SCALE.gray40,
+            tertiary: GRAY_SCALE_LIGHT.gray9,
           },
         },
       } as Theme;

packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/utils/getActionIconColorOrThrow.ts

@@ -26,7 +26,7 @@ export const getActionIconColorOrThrow = ({
     case 'EMPTY':
     case 'FILTER':
     case 'DELAY':
-      return theme.color.green60;
+      return theme.color.green12;
     case 'AI_AGENT':
       return theme.color.pink;
     default:

packages/twenty-front/src/modules/workflow/workflow-trigger/utils/__tests__/getTriggerIconColor.test.ts

@@ -1,12 +1,12 @@
 import { type Theme } from '@emotion/react';
-import { COLOR } from 'twenty-ui/theme';
+import { COLOR_LIGHT } from 'twenty-ui/theme';
 import { getTriggerIconColor } from '../getTriggerIconColor';
 
 describe('getTriggerIconColor', () => {
   const mockTheme: Theme = {
     color: {
-      blue: COLOR.blue,
-      purple: COLOR.purple,
+      blue: COLOR_LIGHT.blue,
+      purple: COLOR_LIGHT.purple,
     },
   } as unknown as Theme;
 
@@ -16,7 +16,7 @@ describe('getTriggerIconColor', () => {
       triggerType: 'DATABASE_EVENT',
     });
 
-    expect(result).toBe(COLOR.blue);
+    expect(result).toBe(COLOR_LIGHT.blue);
   });
 
   it('returns the purple color for cron from theme', () => {
@@ -25,14 +25,14 @@ describe('getTriggerIconColor', () => {
       triggerType: 'CRON',
     });
 
-    expect(result).toBe(COLOR.purple);
+    expect(result).toBe(COLOR_LIGHT.purple);
   });
 
   it('works with different theme configurations', () => {
     const differentTheme: Theme = {
       color: {
-        blue: COLOR.blue,
-        purple: COLOR.purple,
+        blue: COLOR_LIGHT.blue,
+        purple: COLOR_LIGHT.purple,
       },
     } as unknown as Theme;
 
@@ -41,14 +41,14 @@ describe('getTriggerIconColor', () => {
       triggerType: 'DATABASE_EVENT',
     });
 
-    expect(result).toBe(COLOR.blue);
+    expect(result).toBe(COLOR_LIGHT.blue);
   });
 
   it('maintains reference to theme.color.blue', () => {
     const customTheme: Theme = {
       color: {
-        blue: COLOR.blue,
-        purple: COLOR.purple,
+        blue: COLOR_LIGHT.blue,
+        purple: COLOR_LIGHT.purple,
       },
     } as unknown as Theme;
 
@@ -57,6 +57,6 @@ describe('getTriggerIconColor', () => {
       triggerType: 'DATABASE_EVENT',
     });
 
-    expect(result).toBe(COLOR.blue);
+    expect(result).toBe(COLOR_LIGHT.blue);
   });
 });

packages/twenty-front/src/pages/settings/data-model/SettingsObjectDetailPage.tsx

@@ -14,8 +14,11 @@ import styled from '@emotion/styled';
 import { useRecoilState, useRecoilValue } from 'recoil';
 import { AppPath, SettingsPath } from 'twenty-shared/types';
 
+import { isObjectMetadataReadOnly } from '@/object-record/read-only/utils/isObjectMetadataReadOnly';
+import { SettingsItemTypeTag } from '@/settings/components/SettingsItemTypeTag';
 import { activeTabIdComponentState } from '@/ui/layout/tab-list/states/activeTabIdComponentState';
 import { useRecoilComponentValue } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValue';
+import { useTheme } from '@emotion/react';
 import { useLingui } from '@lingui/react/macro';
 import { getSettingsPath, isDefined } from 'twenty-shared/utils';
 import {
@@ -28,13 +31,10 @@ import {
 } from 'twenty-ui/display';
 import { Button } from 'twenty-ui/input';
 import { UndecoratedLink } from 'twenty-ui/navigation';
-import { MAIN_COLORS } from 'twenty-ui/theme';
 import { FeatureFlagKey } from '~/generated/graphql';
 import { useNavigateApp } from '~/hooks/useNavigateApp';
 import { SETTINGS_OBJECT_DETAIL_TABS } from '~/pages/settings/data-model/constants/SettingsObjectDetailTabs';
 import { updatedObjectNamePluralState } from '~/pages/settings/data-model/states/updatedObjectNamePluralState';
-import { SettingsItemTypeTag } from '@/settings/components/SettingsItemTypeTag';
-import { isObjectMetadataReadOnly } from '@/object-record/read-only/utils/isObjectMetadataReadOnly';
 
 const StyledContentContainer = styled.div`
   flex: 1;
@@ -91,6 +91,8 @@ export const SettingsObjectDetailPage = () => {
     setUpdatedObjectNamePlural,
   ]);
 
+  const theme = useTheme();
+
   if (!isDefined(objectMetadataItem)) return <></>;
 
   const tabs = [
@@ -114,8 +116,8 @@ export const SettingsObjectDetailPage = () => {
       pill: (
         <IconPoint
           size={12}
-          color={MAIN_COLORS.yellow}
-          fill={MAIN_COLORS.yellow}
+          color={theme.color.yellow}
+          fill={theme.color.yellow}
         />
       ),
     },

packages/twenty-server/src/engine/core-modules/domain/subdomain-manager/utils/generate-random-subdomain.util.ts

@@ -151,9 +151,7 @@ export const generateRandomSubdomain = () => {
     'garnet',
     'jade',
     'lavender',
-    'mauve',
     'navy',
-    'olive',
     'platinum',
     'plum',
     'rose',

packages/twenty-ui/src/display/avatar/components/Avatar.tsx

@@ -8,9 +8,10 @@ import { type AvatarSize } from '@ui/display/avatar/types/AvatarSize';
 import { type AvatarType } from '@ui/display/avatar/types/AvatarType';
 import { type IconComponent } from '@ui/display/icon/types/IconComponent';
 import { ThemeContext } from '@ui/theme';
-import { type Nullable, stringToHslColor } from '@ui/utilities';
+import { stringToThemeColorP3String } from '@ui/utilities';
 import { REACT_APP_SERVER_BASE_URL } from '@ui/utilities/config';
 import { useRecoilState } from 'recoil';
+import { type Nullable } from 'twenty-shared/types';
 import { getImageAbsoluteURI } from 'twenty-shared/utils';
 
 const StyledAvatar = styled.div<{
@@ -112,10 +113,20 @@ export const Avatar = ({
 
   const fixedColor = isPlaceholderFirstCharEmpty
     ? theme.font.color.tertiary
-    : (color ?? stringToHslColor(placeholderColorSeed ?? '', 75, 25));
+    : (color ??
+      stringToThemeColorP3String({
+        string: placeholderColorSeed ?? '',
+        theme,
+        variant: 12,
+      }));
   const fixedBackgroundColor = isPlaceholderFirstCharEmpty
     ? theme.background.transparent.light
-    : (backgroundColor ?? stringToHslColor(placeholderColorSeed ?? '', 75, 85));
+    : (backgroundColor ??
+      stringToThemeColorP3String({
+        string: placeholderColorSeed ?? '',
+        theme,
+        variant: 4,
+      }));
 
   const showBackgroundColor = showPlaceholder;
 

packages/twenty-ui/src/display/checkmark/components/AnimatedCheckmark.tsx

@@ -26,7 +26,7 @@ export const AnimatedCheckmark = ({
     >
       <motion.path
         fill="none"
-        stroke={color ?? theme.grayScale.gray0}
+        stroke={color ?? theme.grayScale.gray1}
         strokeWidth={4}
         d="M14 27l7.8 7.8L38 14"
         pathLength="1"

packages/twenty-ui/src/display/checkmark/components/Checkmark.tsx

@@ -1,6 +1,6 @@
-import React from 'react';
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
+import React from 'react';
 
 import { IconCheck } from '@ui/display/icon/components/TablerIcons';
 
@@ -23,7 +23,7 @@ export const Checkmark = ({ className }: CheckmarkProps) => {
 
   return (
     <StyledContainer className={className}>
-      <IconCheck color={theme.grayScale.gray0} size={14} />
+      <IconCheck color={theme.grayScale.gray1} size={14} />
     </StyledContainer>
   );
 };

packages/twenty-ui/src/display/info/components/Info.tsx

@@ -38,12 +38,12 @@ const StyledInfo = styled.div<Pick<InfoProps, 'accent'>>`
     switch (accent) {
       case 'blue':
         return css`
-          background: ${theme.color.blueAccent20};
-          color: ${theme.color.blue50};
+          background: ${theme.color.blue5};
+          color: ${theme.color.blue10};
         `;
       case 'danger':
         return css`
-          background: ${theme.color.red10};
+          background: ${theme.color.red3};
           color: ${theme.color.red};
         `;
     }

packages/twenty-ui/src/display/tooltip/AppTooltip.tsx

@@ -1,8 +1,6 @@
 import styled from '@emotion/styled';
 import { type PlacesType, type PositionStrategy, Tooltip } from 'react-tooltip';
 
-import { RGBA } from '@ui/theme/constants/Rgba';
-
 export enum TooltipPosition {
   Top = 'top',
   Left = 'left',
@@ -19,11 +17,11 @@ export enum TooltipDelay {
 
 const StyledAppTooltip = styled(Tooltip)<{ width?: string }>`
   backdrop-filter: ${({ theme }) => theme.blur.strong};
-  background-color: ${({ theme }) => RGBA(theme.color.gray80, 0.8)};
+  background-color: ${({ theme }) => theme.color.transparent.gray11};
   border-radius: ${({ theme }) => theme.border.radius.sm};
 
   box-shadow: ${({ theme }) => theme.boxShadow.light};
-  color: ${({ theme }) => theme.grayScale.gray0};
+  color: ${({ theme }) => theme.grayScale.gray1};
 
   font-size: ${({ theme }) => theme.font.size.sm};
   font-weight: ${({ theme }) => theme.font.weight.regular};

packages/twenty-ui/src/input/button/components/AnimatedButton.tsx

@@ -92,18 +92,18 @@ const StyledButton = styled.button<
                       : theme.background.transparent.medium
                   }`
                 : 'none'};
-              color: ${!inverted ? theme.grayScale.gray0 : theme.color.blue};
+              color: ${!inverted ? theme.grayScale.gray1 : theme.color.blue};
               ${disabled
                 ? ''
                 : css`
                     &:hover {
                       background: ${!inverted
-                        ? theme.color.blue50
+                        ? theme.color.blue10
                         : theme.background.secondary};
                     }
                     &:active {
                       background: ${!inverted
-                        ? theme.color.blue60
+                        ? theme.color.blue12
                         : theme.background.tertiary};
                     }
                   `}
@@ -122,7 +122,7 @@ const StyledButton = styled.button<
               box-shadow: ${!disabled && focus
                 ? `0 0 0 3px ${
                     !inverted
-                      ? theme.color.red10
+                      ? theme.color.red3
                       : theme.background.transparent.medium
                   }`
                 : 'none'};
@@ -132,12 +132,12 @@ const StyledButton = styled.button<
                 : css`
                     &:hover {
                       background: ${!inverted
-                        ? theme.color.red40
+                        ? theme.color.red8
                         : theme.background.secondary};
                     }
                     &:active {
                       background: ${!inverted
-                        ? theme.color.red50
+                        ? theme.color.red10
                         : theme.background.tertiary};
                     }
                   `}
@@ -160,10 +160,10 @@ const StyledButton = styled.button<
                     : 'transparent'
                 : variant === 'secondary'
                   ? focus || disabled
-                    ? theme.grayScale.gray0
+                    ? theme.grayScale.gray1
                     : theme.background.transparent.primary
                   : focus
-                    ? theme.grayScale.gray0
+                    ? theme.grayScale.gray1
                     : 'transparent'};
               border-width: 1px 1px 1px 1px !important;
               box-shadow: ${!disabled && focus
@@ -206,10 +206,10 @@ const StyledButton = styled.button<
                     : 'transparent'
                 : variant === 'secondary'
                   ? focus || disabled
-                    ? theme.grayScale.gray0
+                    ? theme.grayScale.gray1
                     : theme.background.transparent.primary
                   : focus
-                    ? theme.grayScale.gray0
+                    ? theme.grayScale.gray1
                     : 'transparent'};
               border-width: 1px 1px 1px 1px !important;
               box-shadow: ${!disabled && focus
@@ -252,16 +252,16 @@ const StyledButton = styled.button<
                     : 'transparent'
                 : variant === 'secondary'
                   ? focus || disabled
-                    ? theme.grayScale.gray0
+                    ? theme.grayScale.gray1
                     : theme.background.transparent.primary
                   : focus
-                    ? theme.grayScale.gray0
+                    ? theme.grayScale.gray1
                     : 'transparent'};
               border-width: 1px 1px 1px 1px !important;
               box-shadow: ${!disabled && focus
                 ? `0 0 0 3px ${
                     !inverted
-                      ? theme.color.red10
+                      ? theme.color.red3
                       : theme.background.transparent.medium
                   }`
                 : 'none'};
@@ -369,7 +369,7 @@ const StyledShortcutLabel = styled.div<{
       case 'danger':
         return variant === 'primary'
           ? theme.border.color.danger
-          : theme.color.red40;
+          : theme.color.red8;
       default:
         return theme.font.color.light;
     }

packages/twenty-ui/src/input/button/components/AnimatedLightIconButton.tsx

@@ -33,7 +33,7 @@ const StyledButton = styled.button<
     !disabled && focus ? `1px solid ${theme.color.blue}` : 'none'};
   border-radius: ${({ theme }) => theme.border.radius.sm};
   box-shadow: ${({ disabled, theme, focus }) =>
-    !disabled && focus ? `0 0 0 3px ${theme.color.blue10}` : 'none'};
+    !disabled && focus ? `0 0 0 3px ${theme.color.blue3}` : 'none'};
   color: ${({ theme, accent, active, disabled, focus }) => {
     switch (accent) {
       case 'secondary':

packages/twenty-ui/src/input/button/components/Button/Button.tsx

@@ -5,6 +5,7 @@ import { type IconComponent } from '@ui/display/icon/types/IconComponent';
 import { ButtonHotkeys } from '@ui/input/button/components/Button/internal/ButtonHotKeys';
 import { ButtonIcon } from '@ui/input/button/components/Button/internal/ButtonIcon';
 import { ButtonSoon } from '@ui/input/button/components/Button/internal/ButtonSoon';
+import { GRAY_SCALE_LIGHT } from '@ui/theme';
 import { useIsMobile } from '@ui/utilities';
 import { type ClickOutsideAttributes } from '@ui/utilities/types/ClickOutsideAttributes';
 import React, { useState } from 'react';
@@ -123,18 +124,18 @@ const StyledButton = styled('button', {
                       : theme.background.transparent.medium
                   }`
                 : 'none'};
-              color: ${!inverted ? theme.grayScale.gray0 : theme.color.blue};
+              color: ${!inverted ? GRAY_SCALE_LIGHT.gray1 : theme.color.blue};
               ${disabled
                 ? ''
                 : css`
                     &:hover {
                       background: ${!inverted
-                        ? theme.color.blue50
+                        ? theme.color.blue10
                         : theme.background.secondary};
                     }
                     &:active {
                       background: ${!inverted
-                        ? theme.color.blue60
+                        ? theme.color.blue12
                         : theme.background.tertiary};
                     }
                   `}
@@ -153,7 +154,7 @@ const StyledButton = styled('button', {
               box-shadow: ${!disabled && focus
                 ? `0 0 0 3px ${
                     !inverted
-                      ? theme.color.red10
+                      ? theme.color.red3
                       : theme.background.transparent.medium
                   }`
                 : 'none'};
@@ -163,12 +164,12 @@ const StyledButton = styled('button', {
                 : css`
                     &:hover {
                       background: ${!inverted
-                        ? theme.color.red40
+                        ? theme.color.red8
                         : theme.background.secondary};
                     }
                     &:active {
                       background: ${!inverted
-                        ? theme.color.red50
+                        ? theme.color.red10
                         : theme.background.tertiary};
                     }
                   `}
@@ -191,10 +192,10 @@ const StyledButton = styled('button', {
                     : 'transparent'
                 : variant === 'secondary'
                   ? focus || disabled
-                    ? theme.grayScale.gray0
+                    ? GRAY_SCALE_LIGHT.gray1
                     : theme.background.transparent.primary
                   : focus
-                    ? theme.grayScale.gray0
+                    ? GRAY_SCALE_LIGHT.gray1
                     : 'transparent'};
               border-width: 1px 1px 1px 1px !important;
               box-shadow: ${!disabled && focus
@@ -237,10 +238,10 @@ const StyledButton = styled('button', {
                     : 'transparent'
                 : variant === 'secondary'
                   ? focus || disabled
-                    ? theme.grayScale.gray0
+                    ? GRAY_SCALE_LIGHT.gray1
                     : theme.background.transparent.primary
                   : focus
-                    ? theme.grayScale.gray0
+                    ? GRAY_SCALE_LIGHT.gray1
                     : 'transparent'};
               border-width: 1px 1px 1px 1px !important;
               box-shadow: ${!disabled && focus
@@ -283,23 +284,23 @@ const StyledButton = styled('button', {
                     : 'transparent'
                 : variant === 'secondary'
                   ? focus || disabled
-                    ? theme.grayScale.gray0
+                    ? GRAY_SCALE_LIGHT.gray1
                     : theme.background.transparent.primary
                   : focus
-                    ? theme.grayScale.gray0
+                    ? GRAY_SCALE_LIGHT.gray1
                     : 'transparent'};
               border-width: 1px 1px 1px 1px !important;
               box-shadow: ${!disabled && focus
                 ? `0 0 0 3px ${
                     !inverted
-                      ? theme.color.red10
+                      ? theme.color.red3
                       : theme.background.transparent.medium
                   }`
                 : 'none'};
               color: ${!inverted
                 ? !disabled
                   ? theme.font.color.danger
-                  : theme.color.red20
+                  : theme.color.red5
                 : theme.font.color.inverted};
               &:hover {
                 background: ${!inverted
@@ -386,7 +387,7 @@ const StyledButtonWrapper = styled.div<
                   : theme.font.color.extraLight
                 : theme.font.color.secondary;
             case 'blue':
-              return !inverted ? theme.grayScale.gray0 : theme.color.blue;
+              return !inverted ? GRAY_SCALE_LIGHT.gray1 : theme.color.blue;
             case 'danger':
               return !inverted ? theme.background.primary : theme.color.red;
           }

packages/twenty-ui/src/input/button/components/Button/internal/ButtonHotKeys.tsx

@@ -37,7 +37,7 @@ const StyledShortcutLabel = styled.div<{
       case 'danger':
         return variant === 'primary'
           ? theme.border.color.danger
-          : theme.color.red40;
+          : theme.color.red8;
       default:
         return theme.font.color.light;
     }

packages/twenty-ui/src/input/button/components/FloatingButton.tsx

@@ -59,10 +59,10 @@ const StyledButton = styled('button', {
       ? `0px 2px 4px 0px ${
           theme.background.transparent.light
         }, 0px 0px 4px 0px ${theme.background.transparent.medium}${
-          focus ? `,0 0 0 3px ${theme.color.blue10}` : ''
+          focus ? `,0 0 0 3px ${theme.color.blue3}` : ''
         }`
       : focus
-        ? `0 0 0 3px ${theme.color.blue10}`
+        ? `0 0 0 3px ${theme.color.blue3}`
         : 'none'};
   color: ${({ theme, disabled, focus }) => {
     return !disabled

packages/twenty-ui/src/input/button/components/FloatingIconButton.tsx

@@ -63,7 +63,7 @@ const StyledButton = styled('button', { shouldForwardProp })<
     applyShadow
       ? theme.boxShadow.light
       : focus
-        ? `0 0 0 3px ${theme.color.blue10}`
+        ? `0 0 0 3px ${theme.color.blue3}`
         : 'none'};
   box-sizing: border-box;
   color: ${({ theme, disabled, focus }) => {

packages/twenty-ui/src/input/button/components/IconButton.tsx

@@ -1,6 +1,7 @@
 import { css, useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 import { type IconComponent } from '@ui/display';
+import { GRAY_SCALE_LIGHT } from '@ui/theme';
 import React from 'react';
 
 export type IconButtonSize = 'medium' | 'small';
@@ -70,17 +71,17 @@ const StyledButton = styled.button<
               box-shadow: ${!disabled && focus
                 ? `0 0 0 3px ${theme.accent.tertiary}`
                 : 'none'};
-              color: ${theme.grayScale.gray0};
+              color: ${GRAY_SCALE_LIGHT.gray1};
               opacity: ${disabled ? 0.24 : 1};
 
               ${disabled
                 ? ''
                 : css`
                     &:hover {
-                      background: ${theme.color.blue50};
+                      background: ${theme.color.blue10};
                     }
                     &:active {
-                      background: ${theme.color.blue60};
+                      background: ${theme.color.blue12};
                     }
                   `}
             `;
@@ -94,9 +95,9 @@ const StyledButton = styled.button<
                 : 'transparent'};
               border-width: ${!disabled && focus ? '1px 1px !important' : 0};
               box-shadow: ${!disabled && focus
-                ? `0 0 0 3px ${theme.color.red10}`
+                ? `0 0 0 3px ${theme.color.red3}`
                 : 'none'};
-              color: ${theme.grayScale.gray0};
+              color: ${GRAY_SCALE_LIGHT.gray1};
               opacity: ${disabled ? 0.24 : 1};
 
               ${disabled
@@ -104,7 +105,7 @@ const StyledButton = styled.button<
                 : css`
                     &:hover,
                     &:active {
-                      background: ${theme.color.red50};
+                      background: ${theme.color.red10};
                     }
                   `}
             `;
@@ -153,7 +154,7 @@ const StyledButton = styled.button<
               border-color: ${variant === 'secondary'
                 ? !disabled
                   ? theme.color.blue
-                  : theme.color.blue20
+                  : theme.color.blue5
                 : focus
                   ? theme.color.blue
                   : 'transparent'};
@@ -183,9 +184,9 @@ const StyledButton = styled.button<
                   : 'transparent'};
               border-width: ${!disabled && focus ? '1px 1px !important' : 0};
               box-shadow: ${!disabled && focus
-                ? `0 0 0 3px ${theme.color.red10}`
+                ? `0 0 0 3px ${theme.color.red3}`
                 : 'none'};
-              color: ${!disabled ? theme.font.color.danger : theme.color.red20};
+              color: ${!disabled ? theme.font.color.danger : theme.color.red5};
               &:hover {
                 background: ${!disabled
                   ? theme.background.danger

packages/twenty-ui/src/input/button/components/LightButton.tsx

@@ -27,7 +27,7 @@ const StyledButton = styled.button<
 
   border-radius: ${({ theme }) => theme.border.radius.sm};
   box-shadow: ${({ theme, focus }) =>
-    focus ? `0 0 0 3px  ${theme.color.blue10}` : 'none'};
+    focus ? `0 0 0 3px  ${theme.color.blue3}` : 'none'};
   color: ${({ theme, accent, active, disabled, focus }) => {
     switch (accent) {
       case 'secondary':

packages/twenty-ui/src/input/button/components/LightIconButton.tsx

@@ -30,7 +30,7 @@ const StyledButton = styled.button<
     !disabled && focus ? `1px solid ${theme.color.blue}` : 'none'};
   border-radius: ${({ theme }) => theme.border.radius.sm};
   box-shadow: ${({ disabled, theme, focus }) =>
-    !disabled && focus ? `0 0 0 3px ${theme.color.blue10}` : 'none'};
+    !disabled && focus ? `0 0 0 3px ${theme.color.blue3}` : 'none'};
   color: ${({ theme, accent, active, disabled, focus }) => {
     switch (accent) {
       case 'secondary':

packages/twenty-ui/src/input/code-editor/theme/utils/getBaseCodeEditorTheme.ts

@@ -1,5 +1,35 @@
 import { type ThemeType } from '@ui/theme';
 import { type editor } from 'monaco-editor';
+import { isDefined } from 'twenty-shared/utils';
+
+const convertColorToHex = (color: string): string => {
+  const displayP3Match = color.match(
+    /color\(display-p3\s+([\d.]+)\s+([\d.]+)\s+([\d.]+)(?:\s+\/\s+([\d.]+))?\)/,
+  );
+
+  if (isDefined(displayP3Match)) {
+    const [, r, g, b, a] = displayP3Match;
+    const rHex = Math.round(parseFloat(r) * 255)
+      .toString(16)
+      .padStart(2, '0');
+    const gHex = Math.round(parseFloat(g) * 255)
+      .toString(16)
+      .padStart(2, '0');
+    const bHex = Math.round(parseFloat(b) * 255)
+      .toString(16)
+      .padStart(2, '0');
+
+    if (isDefined(a)) {
+      const aHex = Math.round(parseFloat(a) * 255)
+        .toString(16)
+        .padStart(2, '0');
+      return `#${rHex}${gHex}${bHex}${aHex}`;
+    }
+    return `#${rHex}${gHex}${bHex}`;
+  }
+
+  return color;
+};
 
 export const getBaseCodeEditorTheme = ({
   theme,
@@ -12,26 +42,32 @@ export const getBaseCodeEditorTheme = ({
     rules: [
       {
         token: '',
-        foreground: theme.code.text.gray,
+        foreground: convertColorToHex(theme.code.text.gray),
         fontStyle: 'bold',
       },
-      { token: 'keyword', foreground: theme.code.text.sky },
+      { token: 'keyword', foreground: convertColorToHex(theme.code.text.sky) },
       {
         token: 'delimiter',
-        foreground: theme.code.text.gray,
+        foreground: convertColorToHex(theme.code.text.gray),
       },
-      { token: 'string', foreground: theme.code.text.pink },
+      { token: 'string', foreground: convertColorToHex(theme.code.text.pink) },
       {
         token: 'comment',
-        foreground: theme.code.text.orange,
+        foreground: convertColorToHex(theme.code.text.orange),
       },
     ],
     colors: {
       'editor.background': '#00000000',
-      'editorCursor.foreground': theme.font.color.primary,
-      'editorLineNumber.foreground': theme.font.color.extraLight,
-      'editorLineNumber.activeForeground': theme.font.color.light,
-      'editor.lineHighlightBackground': theme.background.tertiary,
+      'editorCursor.foreground': convertColorToHex(theme.font.color.primary),
+      'editorLineNumber.foreground': convertColorToHex(
+        theme.font.color.extraLight,
+      ),
+      'editorLineNumber.activeForeground': convertColorToHex(
+        theme.font.color.light,
+      ),
+      'editor.lineHighlightBackground': convertColorToHex(
+        theme.background.tertiary,
+      ),
     },
   };
 };

packages/twenty-ui/src/input/color-scheme/components/ColorSchemeCard.tsx

@@ -1,6 +1,7 @@
 import styled from '@emotion/styled';
 import { Checkmark } from '@ui/display/checkmark/components/Checkmark';
 import { type ColorScheme } from '@ui/input/types/ColorScheme';
+import { GRAY_SCALE_DARK, GRAY_SCALE_LIGHT } from '@ui/theme';
 import {
   AnimatePresence,
   type AnimationControls,
@@ -13,22 +14,22 @@ const StyledColorSchemeBackground = styled.div<
   Pick<ColorSchemeCardProps, 'variant'>
 >`
   align-items: flex-end;
-  background: ${({ variant, theme }) => {
+  background: ${({ variant }) => {
     switch (variant) {
       case 'Dark':
-        return theme.grayScale.gray75;
+        return GRAY_SCALE_DARK.gray4;
       case 'Light':
       default:
-        return theme.grayScale.gray15;
+        return GRAY_SCALE_LIGHT.gray4;
     }
   }};
-  border: ${({ variant, theme }) => {
+  border: ${({ variant }) => {
     switch (variant) {
       case 'Dark':
-        return `1px solid ${theme.grayScale.gray70};`;
+        return `1px solid ${GRAY_SCALE_DARK.gray5};`;
       case 'Light':
       default:
-        return `1px solid ${theme.grayScale.gray20};`;
+        return `1px solid ${GRAY_SCALE_LIGHT.gray5};`;
     }
   }};
   border-radius: ${({ theme }) => theme.border.radius.md};
@@ -46,42 +47,42 @@ const StyledColorSchemeBackground = styled.div<
 const StyledColorSchemeContent = styled(motion.div)<
   Pick<ColorSchemeCardProps, 'variant'>
 >`
-  background: ${({ theme, variant }) => {
+  background: ${({ variant }) => {
     switch (variant) {
       case 'Dark':
-        return theme.grayScale.gray75;
+        return GRAY_SCALE_DARK.gray1;
       case 'Light':
-        return theme.grayScale.gray0;
+        return GRAY_SCALE_LIGHT.gray1;
     }
   }};
 
-  border-left: ${({ variant, theme }) => {
+  border-left: ${({ variant }) => {
     switch (variant) {
       case 'Dark':
-        return `1px solid ${theme.grayScale.gray60};`;
+        return `1px solid ${GRAY_SCALE_DARK.gray5};`;
       case 'Light':
       default:
-        return `1px solid ${theme.grayScale.gray20};`;
+        return `1px solid ${GRAY_SCALE_LIGHT.gray5};`;
     }
   }};
   border-radius: ${({ theme }) => theme.border.radius.md} 0px 0px 0px;
-  border-top: ${({ variant, theme }) => {
+  border-top: ${({ variant }) => {
     switch (variant) {
       case 'Dark':
-        return `1px solid ${theme.grayScale.gray60};`;
+        return `1px solid ${GRAY_SCALE_DARK.gray5};`;
       case 'Light':
       default:
-        return `1px solid ${theme.grayScale.gray20};`;
+        return `1px solid ${GRAY_SCALE_LIGHT.gray5};`;
     }
   }};
   box-sizing: border-box;
-  color: ${({ variant, theme }) => {
+  color: ${({ variant }) => {
     switch (variant) {
       case 'Dark':
-        return theme.grayScale.gray30;
+        return GRAY_SCALE_DARK.gray12;
       case 'Light':
       default:
-        return theme.grayScale.gray60;
+        return GRAY_SCALE_LIGHT.gray12;
     }
   }};
   display: flex;

packages/twenty-ui/src/input/components/Checkbox.tsx

@@ -113,8 +113,8 @@ const StyledInput = styled.input<InputProps>`
       if (!(indeterminate || isChecked)) return 'transparent';
       return disabled
         ? accent === CheckboxAccent.Blue
-          ? theme.adaptiveColors.blue3
-          : theme.adaptiveColors.orange3
+          ? theme.color.blue7
+          : theme.color.orange7
         : accent === CheckboxAccent.Blue
           ? theme.color.blue
           : theme.color.orange;
@@ -131,8 +131,8 @@ const StyledInput = styled.input<InputProps>`
         case indeterminate || isChecked:
           return disabled
             ? accent === CheckboxAccent.Blue
-              ? theme.adaptiveColors.blue3
-              : theme.adaptiveColors.orange3
+              ? theme.color.blue7
+              : theme.color.orange7
             : accent === CheckboxAccent.Blue
               ? theme.color.blue
               : theme.color.orange;

packages/twenty-ui/src/input/components/Radio.tsx

@@ -1,7 +1,6 @@
 import styled from '@emotion/styled';
 import { motion } from 'framer-motion';
 import * as React from 'react';
-import { RGBA } from '@ui/theme';
 import { RadioGroup } from './RadioGroup';
 
 export enum RadioSize {
@@ -56,7 +55,7 @@ const StyledRadioInput = styled(motion.input)<RadioInputProps>`
         if (!checked) {
           return theme.background.tertiary;
         }
-        return RGBA(theme.color.blue, 0.12);
+        return theme.color.transparent.blue2;
       }};
   }
 
@@ -64,7 +63,7 @@ const StyledRadioInput = styled(motion.input)<RadioInputProps>`
     background-color: ${({ theme }) => theme.color.blue};
     border: none;
     &::after {
-      background-color: ${({ theme }) => theme.grayScale.gray0};
+      background-color: ${({ theme }) => theme.grayScale.gray1};
       border-radius: 50%;
       content: '';
       height: ${({ 'radio-size': radioSize }) =>

packages/twenty-ui/src/input/components/__stories__/Toggle.stories.tsx

@@ -4,7 +4,7 @@ import {
   type CatalogStory,
   ComponentDecorator,
 } from '@ui/testing';
-import { MAIN_COLORS } from '@ui/theme';
+import { MAIN_COLORS_LIGHT } from '@ui/theme';
 import { useState } from 'react';
 
 import { Toggle, type ToggleSize } from '../Toggle';
@@ -88,7 +88,7 @@ export const Catalog: CatalogStory<Story, typeof InteractiveToggle> = {
             if (color === 'default') {
               return {};
             }
-            return { color: MAIN_COLORS.yellow };
+            return { color: MAIN_COLORS_LIGHT.yellow };
           },
         },
       ],

packages/twenty-ui/src/json-visualizer/components/internal/JsonNodeLabel.tsx

@@ -9,13 +9,13 @@ const StyledLabelContainer = styled.span<{
   align-items: center;
   background-color: ${({ theme, highlighting }) =>
     highlighting === 'blue'
-      ? theme.adaptiveColors.blue1
+      ? theme.color.blue3
       : highlighting === 'red'
         ? theme.background.danger
         : theme.background.transparent.lighter};
   border-color: ${({ theme, highlighting }) =>
     highlighting === 'blue'
-      ? theme.adaptiveColors.blue2
+      ? theme.color.blue5
       : highlighting === 'red'
         ? theme.border.color.danger
         : theme.border.color.medium};

packages/twenty-ui/src/json-visualizer/components/internal/JsonNodeValue.tsx

@@ -9,9 +9,9 @@ const StyledText = styled.span<{
   box-sizing: border-box;
   color: ${({ theme, highlighting }) =>
     highlighting === 'blue'
-      ? theme.adaptiveColors.blue4
+      ? theme.color.blue8
       : highlighting === 'red'
-        ? theme.adaptiveColors.red4
+        ? theme.color.red8
         : theme.font.color.tertiary};
   display: inline-flex;
   height: 24px;

packages/twenty-ui/src/layout/animated-expandable-container/__stories__/AnimatedExpandableContainer.stories.tsx

@@ -6,7 +6,7 @@ import { AnimatedExpandableContainer } from '../components/AnimatedExpandableCon
 
 const StyledButton = styled.button`
   padding: ${({ theme }) => theme.spacing(2)} ${({ theme }) => theme.spacing(4)};
-  background-color: ${({ theme }) => theme.color.blue50};
+  background-color: ${({ theme }) => theme.color.blue10};
   color: ${({ theme }) => theme.font.color.primary};
   border: none;
   border-radius: ${({ theme }) => theme.spacing(1)};
@@ -14,7 +14,7 @@ const StyledButton = styled.button`
   margin-bottom: ${({ theme }) => theme.spacing(3)};
 
   &:hover {
-    background-color: ${({ theme }) => theme.color.blue40};
+    background-color: ${({ theme }) => theme.color.blue8};
   }
 `;
 

packages/twenty-ui/src/navigation/link/components/AdvancedSettingsToggle.tsx

@@ -1,7 +1,7 @@
+import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 import { IconPoint } from '@ui/display';
 import { Toggle } from '@ui/input';
-import { MAIN_COLORS } from '@ui/theme';
 import { useId } from 'react';
 
 const StyledContainer = styled.div`
@@ -50,13 +50,15 @@ export const AdvancedSettingsToggle = ({
   };
   const instanceId = useId();
 
+  const theme = useTheme();
+
   return (
     <StyledContainer>
       <StyledIconContainer>
         <IconPoint
           size={12}
-          color={MAIN_COLORS.yellow}
-          fill={MAIN_COLORS.yellow}
+          color={theme.color.yellow}
+          fill={theme.color.yellow}
         />
       </StyledIconContainer>
       <StyledToggleContainer htmlFor={instanceId}>
@@ -65,7 +67,7 @@ export const AdvancedSettingsToggle = ({
         <Toggle
           id={instanceId}
           onChange={onChange}
-          color={MAIN_COLORS.yellow}
+          color={theme.color.yellow}
           value={isAdvancedModeEnabled}
         />
       </StyledToggleContainer>

packages/twenty-ui/src/navigation/menu/menu-item/components/MenuItemSelectColor.tsx

@@ -21,16 +21,31 @@ type MenuItemSelectColorProps = {
 };
 
 export const colorLabels: Record<ThemeColor, string> = {
-  green: 'Green',
+  gray: 'Gray',
+  tomato: 'Tomato',
+  red: 'Red',
+  ruby: 'Ruby',
+  crimson: 'Crimson',
+  pink: 'Pink',
+  plum: 'Plum',
+  purple: 'Purple',
+  violet: 'Violet',
+  iris: 'Iris',
+  cyan: 'Cyan',
   turquoise: 'Turquoise',
   sky: 'Sky',
   blue: 'Blue',
-  purple: 'Purple',
-  pink: 'Pink',
-  red: 'Red',
+  jade: 'Jade',
+  green: 'Green',
+  grass: 'Grass',
+  mint: 'Mint',
+  lime: 'Lime',
+  bronze: 'Bronze',
+  gold: 'Gold',
+  brown: 'Brown',
   orange: 'Orange',
+  amber: 'Amber',
   yellow: 'Yellow',
-  gray: 'Gray',
 };
 
 export const MenuItemSelectColor = ({

packages/twenty-ui/src/navigation/navigation-bar/components/NavigationBarItem.tsx

@@ -35,7 +35,7 @@ export const NavigationBarItem = ({
 
   return (
     <StyledIconButton isActive={isActive} onClick={onClick}>
-      <Icon color={theme.color.gray50} size={theme.icon.size.lg} />
+      <Icon color={theme.color.gray10} size={theme.icon.size.lg} />
     </StyledIconButton>
   );
 };

packages/twenty-ui/src/testing/decorators/ComponentDecorator.tsx

@@ -1,6 +1,6 @@
 import { type Decorator } from '@storybook/react';
 
-import { GRAY_SCALE, MAIN_COLORS } from '@ui/theme';
+import { GRAY_SCALE_LIGHT, MAIN_COLORS_LIGHT } from '@ui/theme';
 
 import { ComponentStorybookLayout } from '../ComponentStorybookLayout';
 
@@ -9,11 +9,11 @@ const getBackgroundColor = (inverted: boolean, accent: string) => {
 
   switch (accent) {
     case 'default':
-      return GRAY_SCALE.gray50;
+      return GRAY_SCALE_LIGHT.gray11;
     case 'danger':
-      return MAIN_COLORS.red;
+      return MAIN_COLORS_LIGHT.red;
     case 'blue':
-      return MAIN_COLORS.blue;
+      return MAIN_COLORS_LIGHT.blue;
     default:
       return undefined;
   }

packages/twenty-ui/src/theme/constants/AccentDark.ts

@@ -1,10 +1,10 @@
-import { COLOR } from './Colors';
+import { COLOR_DARK } from '@ui/theme/constants/ColorsDark';
 
 export const ACCENT_DARK = {
-  primary: COLOR.blueAccent75,
-  secondary: COLOR.blueAccent80,
-  tertiary: COLOR.blueAccent85,
-  quaternary: COLOR.blueAccent90,
-  accent3570: COLOR.blueAccent70,
-  accent4060: COLOR.blueAccent60,
+  primary: COLOR_DARK.blue5,
+  secondary: COLOR_DARK.blue5,
+  tertiary: COLOR_DARK.blue3,
+  quaternary: COLOR_DARK.blue2,
+  accent3570: COLOR_DARK.blue8,
+  accent4060: COLOR_DARK.blue8,
 };

packages/twenty-ui/src/theme/constants/AccentLight.ts

@@ -1,10 +1,10 @@
-import { COLOR } from './Colors';
+import { COLOR_LIGHT } from '@ui/theme/constants/ColorsLight';
 
 export const ACCENT_LIGHT = {
-  primary: COLOR.blueAccent25,
-  secondary: COLOR.blueAccent20,
-  tertiary: COLOR.blueAccent15,
-  quaternary: COLOR.blueAccent10,
-  accent3570: COLOR.blueAccent35,
-  accent4060: COLOR.blueAccent40,
+  primary: COLOR_LIGHT.blue5,
+  secondary: COLOR_LIGHT.blue5,
+  tertiary: COLOR_LIGHT.blue3,
+  quaternary: COLOR_LIGHT.blue2,
+  accent3570: COLOR_LIGHT.blue8,
+  accent4060: COLOR_LIGHT.blue8,
 };

packages/twenty-ui/src/theme/constants/AdaptiveColorsDark.ts

@@ -1,44 +0,0 @@
-import { THEME_COMMON } from '@ui/theme/constants/ThemeCommon';
-
-export const ADAPTIVE_COLORS_DARK = {
-  green1: THEME_COMMON.color.green80,
-  green2: THEME_COMMON.color.green70,
-  green3: THEME_COMMON.color.green60,
-  green4: THEME_COMMON.color.green50,
-  turquoise1: THEME_COMMON.color.turquoise80,
-  turquoise2: THEME_COMMON.color.turquoise70,
-  turquoise3: THEME_COMMON.color.turquoise60,
-  turquoise4: THEME_COMMON.color.turquoise50,
-  sky1: THEME_COMMON.color.sky80,
-  sky2: THEME_COMMON.color.sky70,
-  sky3: THEME_COMMON.color.sky60,
-  sky4: THEME_COMMON.color.sky50,
-  blue1: THEME_COMMON.color.blue80,
-  blue2: THEME_COMMON.color.blue70,
-  blue3: THEME_COMMON.color.blue60,
-  blue4: THEME_COMMON.color.blue50,
-  red1: THEME_COMMON.color.red80,
-  red2: THEME_COMMON.color.red70,
-  red3: THEME_COMMON.color.red60,
-  red4: THEME_COMMON.color.red50,
-  orange1: THEME_COMMON.color.orange80,
-  orange2: THEME_COMMON.color.orange70,
-  orange3: THEME_COMMON.color.orange60,
-  orange4: THEME_COMMON.color.orange50,
-  yellow1: THEME_COMMON.color.yellow80,
-  yellow2: THEME_COMMON.color.yellow70,
-  yellow3: THEME_COMMON.color.yellow60,
-  yellow4: THEME_COMMON.color.yellow50,
-  pink1: THEME_COMMON.color.pink80,
-  pink2: THEME_COMMON.color.pink70,
-  pink3: THEME_COMMON.color.pink60,
-  pink4: THEME_COMMON.color.pink50,
-  purple1: THEME_COMMON.color.purple80,
-  purple2: THEME_COMMON.color.purple70,
-  purple3: THEME_COMMON.color.purple60,
-  purple4: THEME_COMMON.color.purple50,
-  gray1: THEME_COMMON.color.gray80,
-  gray2: THEME_COMMON.color.gray70,
-  gray3: THEME_COMMON.color.gray60,
-  gray4: THEME_COMMON.color.gray50,
-};

packages/twenty-ui/src/theme/constants/AdaptiveColorsLight.ts

@@ -1,44 +0,0 @@
-import { THEME_COMMON } from '@ui/theme/constants/ThemeCommon';
-
-export const ADAPTIVE_COLORS_LIGHT = {
-  green1: THEME_COMMON.color.green10,
-  green2: THEME_COMMON.color.green20,
-  green3: THEME_COMMON.color.green30,
-  green4: THEME_COMMON.color.green40,
-  turquoise1: THEME_COMMON.color.turquoise10,
-  turquoise2: THEME_COMMON.color.turquoise20,
-  turquoise3: THEME_COMMON.color.turquoise30,
-  turquoise4: THEME_COMMON.color.turquoise40,
-  sky1: THEME_COMMON.color.sky10,
-  sky2: THEME_COMMON.color.sky20,
-  sky3: THEME_COMMON.color.sky30,
-  sky4: THEME_COMMON.color.sky40,
-  blue1: THEME_COMMON.color.blue10,
-  blue2: THEME_COMMON.color.blue20,
-  blue3: THEME_COMMON.color.blue30,
-  blue4: THEME_COMMON.color.blue40,
-  red1: THEME_COMMON.color.red10,
-  red2: THEME_COMMON.color.red20,
-  red3: THEME_COMMON.color.red30,
-  red4: THEME_COMMON.color.red40,
-  orange1: THEME_COMMON.color.orange10,
-  orange2: THEME_COMMON.color.orange20,
-  orange3: THEME_COMMON.color.orange30,
-  orange4: THEME_COMMON.color.orange40,
-  yellow1: THEME_COMMON.color.yellow10,
-  yellow2: THEME_COMMON.color.yellow20,
-  yellow3: THEME_COMMON.color.yellow30,
-  yellow4: THEME_COMMON.color.yellow40,
-  pink1: THEME_COMMON.color.pink10,
-  pink2: THEME_COMMON.color.pink20,
-  pink3: THEME_COMMON.color.pink30,
-  pink4: THEME_COMMON.color.pink40,
-  purple1: THEME_COMMON.color.purple10,
-  purple2: THEME_COMMON.color.purple20,
-  purple3: THEME_COMMON.color.purple30,
-  purple4: THEME_COMMON.color.purple40,
-  gray1: THEME_COMMON.color.gray10,
-  gray2: THEME_COMMON.color.gray20,
-  gray3: THEME_COMMON.color.gray30,
-  gray4: THEME_COMMON.color.gray40,
-};

packages/twenty-ui/src/theme/constants/BackgroundDark.ts

@@ -1,35 +1,36 @@
-/* eslint-disable @nx/workspace-no-hardcoded-colors */
 import DarkNoise from '@assets/themes/dark-noise.jpg';
+import * as RadixColors from '@radix-ui/colors';
 
-import { COLOR } from './Colors';
-import { GRAY_SCALE } from './GrayScale';
-import { RGBA } from './Rgba';
+import { COLOR_DARK } from '@ui/theme/constants/ColorsDark';
+import { GRAY_SCALE_DARK } from './GrayScaleDark';
+import { TRANSPARENT_COLORS_DARK } from './TransparentColorsDark';
 
 export const BACKGROUND_DARK = {
   noisy: `url(${DarkNoise.toString()});`,
-  primary: GRAY_SCALE.gray85,
-  secondary: GRAY_SCALE.gray80,
-  tertiary: GRAY_SCALE.gray75,
-  quaternary: GRAY_SCALE.gray70,
-  invertedPrimary: GRAY_SCALE.gray20,
-  invertedSecondary: GRAY_SCALE.gray35,
-  danger: COLOR.red80,
+  primary: GRAY_SCALE_DARK.gray1,
+  secondary: GRAY_SCALE_DARK.gray2,
+  tertiary: GRAY_SCALE_DARK.gray4,
+  quaternary: GRAY_SCALE_DARK.gray5,
+  invertedPrimary: GRAY_SCALE_DARK.gray12,
+  invertedSecondary: GRAY_SCALE_DARK.gray11,
+  danger: COLOR_DARK.red12,
   transparent: {
-    primary: RGBA(GRAY_SCALE.gray85, 0.5),
-    secondary: RGBA(GRAY_SCALE.gray80, 0.5),
-    strong: RGBA(GRAY_SCALE.gray0, 0.14),
-    medium: RGBA(GRAY_SCALE.gray0, 0.1),
-    light: RGBA(GRAY_SCALE.gray0, 0.06),
-    lighter: RGBA(GRAY_SCALE.gray0, 0.03),
-    danger: RGBA(COLOR.red, 0.08),
-    blue: RGBA(COLOR.blue, 0.2),
-    orange: RGBA(COLOR.orange, 0.2),
+    primary: RadixColors.blackP3A.blackA7,
+    secondary: RadixColors.blackP3A.blackA6,
+    strong: TRANSPARENT_COLORS_DARK.gray7,
+    medium: TRANSPARENT_COLORS_DARK.gray5,
+    light: TRANSPARENT_COLORS_DARK.gray2,
+    lighter: TRANSPARENT_COLORS_DARK.gray1,
+    danger: TRANSPARENT_COLORS_DARK.red3,
+    blue: TRANSPARENT_COLORS_DARK.blue4,
+    orange: TRANSPARENT_COLORS_DARK.orange4,
+    success: TRANSPARENT_COLORS_DARK.green4,
   },
-  overlayPrimary: RGBA(GRAY_SCALE.gray100, 0.8),
-  overlaySecondary: RGBA(GRAY_SCALE.gray100, 0.6),
-  overlayTertiary: RGBA(GRAY_SCALE.gray100, 0.4),
-  radialGradient: `radial-gradient(50% 62.62% at 50% 0%, #505050 0%, ${GRAY_SCALE.gray60} 100%)`,
-  radialGradientHover: `radial-gradient(76.32% 95.59% at 50% 0%, #505050 0%, ${GRAY_SCALE.gray60} 100%)`,
-  primaryInverted: GRAY_SCALE.gray20,
-  primaryInvertedHover: GRAY_SCALE.gray15,
+  overlayPrimary: '#000000b8',
+  overlaySecondary: '#0000005c',
+  overlayTertiary: '#0000005c',
+  radialGradient: `radial-gradient(50% 62.62% at 50% 0%, ${GRAY_SCALE_DARK.gray9} 0%, ${GRAY_SCALE_DARK.gray10} 100%)`,
+  radialGradientHover: `radial-gradient(76.32% 95.59% at 50% 0%, ${GRAY_SCALE_DARK.gray10} 0%, ${GRAY_SCALE_DARK.gray11} 100%)`,
+  primaryInverted: GRAY_SCALE_DARK.gray12,
+  primaryInvertedHover: GRAY_SCALE_DARK.gray11,
 };

packages/twenty-ui/src/theme/constants/BackgroundLight.ts

@@ -1,35 +1,36 @@
-/* eslint-disable @nx/workspace-no-hardcoded-colors */
 import LightNoise from '@assets/themes/light-noise.png';
+import * as RadixColors from '@radix-ui/colors';
 
-import { COLOR } from './Colors';
-import { GRAY_SCALE } from './GrayScale';
-import { RGBA } from './Rgba';
+import { COLOR_LIGHT } from '@ui/theme/constants/ColorsLight';
+import { GRAY_SCALE_LIGHT } from './GrayScaleLight';
+import { TRANSPARENT_COLORS_LIGHT } from './TransparentColorsLight';
 
 export const BACKGROUND_LIGHT = {
   noisy: `url(${LightNoise.toString()});`,
-  primary: GRAY_SCALE.gray0,
-  secondary: GRAY_SCALE.gray10,
-  tertiary: GRAY_SCALE.gray15,
-  quaternary: GRAY_SCALE.gray20,
-  invertedPrimary: GRAY_SCALE.gray60,
-  invertedSecondary: GRAY_SCALE.gray50,
-  danger: COLOR.red10,
+  primary: GRAY_SCALE_LIGHT.gray1,
+  secondary: GRAY_SCALE_LIGHT.gray2,
+  tertiary: GRAY_SCALE_LIGHT.gray4,
+  quaternary: GRAY_SCALE_LIGHT.gray5,
+  invertedPrimary: GRAY_SCALE_LIGHT.gray12,
+  invertedSecondary: GRAY_SCALE_LIGHT.gray11,
+  danger: COLOR_LIGHT.red3,
   transparent: {
-    primary: RGBA(GRAY_SCALE.gray0, 0.5),
-    secondary: RGBA(GRAY_SCALE.gray10, 0.5),
-    strong: RGBA(GRAY_SCALE.gray100, 0.16),
-    medium: RGBA(GRAY_SCALE.gray100, 0.08),
-    light: RGBA(GRAY_SCALE.gray100, 0.04),
-    lighter: RGBA(GRAY_SCALE.gray100, 0.02),
-    danger: RGBA(COLOR.red, 0.08),
-    blue: RGBA(COLOR.blue, 0.08),
-    orange: RGBA(COLOR.orange, 0.08),
+    primary: RadixColors.whiteP3A.whiteA7,
+    secondary: RadixColors.whiteP3A.whiteA6,
+    strong: TRANSPARENT_COLORS_LIGHT.gray7,
+    medium: TRANSPARENT_COLORS_LIGHT.gray5,
+    light: TRANSPARENT_COLORS_LIGHT.gray2,
+    lighter: TRANSPARENT_COLORS_LIGHT.gray1,
+    danger: TRANSPARENT_COLORS_LIGHT.red3,
+    blue: TRANSPARENT_COLORS_LIGHT.blue3,
+    orange: TRANSPARENT_COLORS_LIGHT.orange3,
+    success: TRANSPARENT_COLORS_LIGHT.green3,
   },
-  overlayPrimary: RGBA(GRAY_SCALE.gray80, 0.8),
-  overlaySecondary: RGBA(GRAY_SCALE.gray80, 0.4),
-  overlayTertiary: RGBA(GRAY_SCALE.gray80, 0.08),
-  radialGradient: `radial-gradient(50% 62.62% at 50% 0%, #505050 0%, ${GRAY_SCALE.gray60} 100%)`,
-  radialGradientHover: `radial-gradient(76.32% 95.59% at 50% 0%, #505050 0%, ${GRAY_SCALE.gray60} 100%)`,
-  primaryInverted: GRAY_SCALE.gray60,
-  primaryInvertedHover: GRAY_SCALE.gray55,
+  overlayPrimary: TRANSPARENT_COLORS_LIGHT.gray11,
+  overlaySecondary: TRANSPARENT_COLORS_LIGHT.gray9,
+  overlayTertiary: TRANSPARENT_COLORS_LIGHT.gray4,
+  radialGradient: `radial-gradient(50% 62.62% at 50% 0%, ${GRAY_SCALE_LIGHT.gray9} 0%, ${GRAY_SCALE_LIGHT.gray10} 100%)`,
+  radialGradientHover: `radial-gradient(76.32% 95.59% at 50% 0%, ${GRAY_SCALE_LIGHT.gray10} 0%, ${GRAY_SCALE_LIGHT.gray11} 100%)`,
+  primaryInverted: GRAY_SCALE_LIGHT.gray12,
+  primaryInvertedHover: GRAY_SCALE_LIGHT.gray11,
 };

packages/twenty-ui/src/theme/constants/BorderDark.ts

@@ -1,18 +1,18 @@
-import { RGBA } from '@ui/theme/constants/Rgba';
+import { COLOR_DARK } from '@ui/theme/constants/ColorsDark';
 import { BORDER_COMMON } from './BorderCommon';
-import { COLOR } from './Colors';
-import { GRAY_SCALE } from './GrayScale';
+import { GRAY_SCALE_DARK } from './GrayScaleDark';
+import { TRANSPARENT_COLORS_DARK } from './TransparentColorsDark';
 
 export const BORDER_DARK = {
   color: {
-    strong: GRAY_SCALE.gray55,
-    medium: GRAY_SCALE.gray65,
-    light: GRAY_SCALE.gray70,
-    secondaryInverted: GRAY_SCALE.gray35,
-    inverted: GRAY_SCALE.gray20,
-    danger: COLOR.red70,
-    blue: COLOR.blue30,
-    transparentStrong: RGBA(GRAY_SCALE.gray100, 0.16),
+    strong: GRAY_SCALE_DARK.gray6,
+    medium: GRAY_SCALE_DARK.gray5,
+    light: GRAY_SCALE_DARK.gray4,
+    secondaryInverted: GRAY_SCALE_DARK.gray11,
+    inverted: GRAY_SCALE_DARK.gray12,
+    danger: COLOR_DARK.red5,
+    blue: COLOR_DARK.blue7,
+    transparentStrong: TRANSPARENT_COLORS_DARK.gray4,
   },
   ...BORDER_COMMON,
 };

packages/twenty-ui/src/theme/constants/BorderLight.ts

@@ -1,18 +1,18 @@
-import { RGBA } from '@ui/theme/constants/Rgba';
+import { COLOR_LIGHT } from '@ui/theme/constants/ColorsLight';
 import { BORDER_COMMON } from './BorderCommon';
-import { COLOR } from './Colors';
-import { GRAY_SCALE } from './GrayScale';
+import { GRAY_SCALE_LIGHT } from './GrayScaleLight';
+import { TRANSPARENT_COLORS_LIGHT } from './TransparentColorsLight';
 
 export const BORDER_LIGHT = {
   color: {
-    strong: GRAY_SCALE.gray25,
-    medium: GRAY_SCALE.gray20,
-    light: GRAY_SCALE.gray15,
-    secondaryInverted: GRAY_SCALE.gray50,
-    inverted: GRAY_SCALE.gray60,
-    danger: COLOR.red20,
-    blue: COLOR.blue30,
-    transparentStrong: RGBA(GRAY_SCALE.gray100, 0.16),
+    strong: GRAY_SCALE_LIGHT.gray6,
+    medium: GRAY_SCALE_LIGHT.gray5,
+    light: GRAY_SCALE_LIGHT.gray4,
+    secondaryInverted: GRAY_SCALE_LIGHT.gray11,
+    inverted: GRAY_SCALE_LIGHT.gray12,
+    danger: COLOR_LIGHT.red5,
+    blue: COLOR_LIGHT.blue7,
+    transparentStrong: TRANSPARENT_COLORS_LIGHT.gray4,
   },
   ...BORDER_COMMON,
 };

packages/twenty-ui/src/theme/constants/BoxShadowDark.ts

@@ -1,19 +1,19 @@
-import { GRAY_SCALE } from './GrayScale';
-import { RGBA } from './Rgba';
+import { RGBA } from '@ui/theme/constants/Rgba';
 
+/* eslint-disable @nx/workspace-no-hardcoded-colors */
 export const BOX_SHADOW_DARK = {
-  color: RGBA(GRAY_SCALE.gray100, 0.6),
+  color: RGBA('#000000', 0.6),
   light: `0px 2px 4px 0px ${RGBA(
-    GRAY_SCALE.gray100,
+    '#000000',
     0.04,
-  )}, 0px 0px 4px 0px ${RGBA(GRAY_SCALE.gray100, 0.08)}`,
+  )}, 0px 0px 4px 0px ${RGBA('#000000', 0.08)}`,
   strong: `2px 4px 16px 0px ${RGBA(
-    GRAY_SCALE.gray100,
+    '#000000',
     0.16,
-  )}, 0px 2px 4px 0px ${RGBA(GRAY_SCALE.gray100, 0.08)}`,
-  underline: `0px 1px 0px 0px ${RGBA(GRAY_SCALE.gray100, 0.32)}`,
+  )}, 0px 2px 4px 0px ${RGBA('#000000', 0.08)}`,
+  underline: `0px 1px 0px 0px ${RGBA('#000000', 0.32)}`,
   superHeavy: `2px 4px 16px 0px ${RGBA(
-    GRAY_SCALE.gray100,
+    '#000000',
     0.12,
-  )}, 0px 2px 4px 0px ${RGBA(GRAY_SCALE.gray100, 0.04)}`,
+  )}, 0px 2px 4px 0px ${RGBA('#000000', 0.04)}`,
 };

packages/twenty-ui/src/theme/constants/BoxShadowLight.ts

@@ -1,22 +1,9 @@
-import { GRAY_SCALE } from './GrayScale';
-import { RGBA } from './Rgba';
+import { GRAY_SCALE_LIGHT_ALPHA } from '@ui/theme/constants/GrayScaleLightAlpha';
 
 export const BOX_SHADOW_LIGHT = {
-  color: RGBA(GRAY_SCALE.gray100, 0.04),
-  light: `0px 2px 4px 0px ${RGBA(
-    GRAY_SCALE.gray100,
-    0.04,
-  )}, 0px 0px 4px 0px ${RGBA(GRAY_SCALE.gray100, 0.08)}`,
-  strong: `2px 4px 16px 0px ${RGBA(
-    GRAY_SCALE.gray100,
-    0.12,
-  )}, 0px 2px 4px 0px ${RGBA(GRAY_SCALE.gray100, 0.04)}`,
-  underline: `0px 1px 0px 0px ${RGBA(GRAY_SCALE.gray100, 0.32)}`,
-  superHeavy: `0px 0px 8px 0px ${RGBA(
-    GRAY_SCALE.gray100,
-    0.16,
-  )}, 0px 8px 64px -16px ${RGBA(
-    GRAY_SCALE.gray100,
-    0.48,
-  )}, 0px 24px 56px -16px ${RGBA(GRAY_SCALE.gray100, 0.08)}`,
+  color: GRAY_SCALE_LIGHT_ALPHA.gray2,
+  light: `0px 2px 4px 0px ${GRAY_SCALE_LIGHT_ALPHA.gray2}, 0px 0px 4px 0px ${GRAY_SCALE_LIGHT_ALPHA.gray5}`,
+  strong: `2px 4px 16px 0px ${GRAY_SCALE_LIGHT_ALPHA.gray7}, 0px 2px 4px 0px ${GRAY_SCALE_LIGHT_ALPHA.gray5}`,
+  underline: `0px 1px 0px 0px ${GRAY_SCALE_LIGHT_ALPHA.gray9}`,
+  superHeavy: `0px 0px 8px 0px ${GRAY_SCALE_LIGHT_ALPHA.gray7}, 0px 8px 64px -16px ${GRAY_SCALE_LIGHT_ALPHA.gray10}, 0px 24px 56px -16px ${GRAY_SCALE_LIGHT_ALPHA.gray5}`,
 };

packages/twenty-ui/src/theme/constants/CodeDark.ts

@@ -1,10 +1,10 @@
-import { COLOR } from './Colors';
+import { COLOR_DARK } from '@ui/theme/constants/ColorsDark';
 
 export const CODE_DARK = {
   text: {
-    gray: COLOR.gray50,
-    sky: COLOR.sky50,
-    pink: COLOR.pink50,
-    orange: COLOR.orange40,
+    gray: COLOR_DARK.gray10,
+    sky: COLOR_DARK.sky10,
+    pink: COLOR_DARK.pink10,
+    orange: COLOR_DARK.orange8,
   },
 };

packages/twenty-ui/src/theme/constants/CodeLight.ts

@@ -1,10 +1,10 @@
-import { COLOR } from './Colors';
+import { COLOR_LIGHT } from '@ui/theme/constants/ColorsLight';
 
 export const CODE_LIGHT = {
   text: {
-    gray: COLOR.gray50,
-    sky: COLOR.sky50,
-    pink: COLOR.pink50,
-    orange: COLOR.orange40,
+    gray: COLOR_LIGHT.gray10,
+    sky: COLOR_LIGHT.sky10,
+    pink: COLOR_LIGHT.pink10,
+    orange: COLOR_LIGHT.orange8,
   },
 };

packages/twenty-ui/src/theme/constants/Colors.ts

@@ -1,7 +0,0 @@
-import { MAIN_COLORS } from './MainColors';
-import { SECONDARY_COLORS } from './SecondaryColors';
-
-export const COLOR = {
-  ...MAIN_COLORS,
-  ...SECONDARY_COLORS,
-};

packages/twenty-ui/src/theme/constants/ColorsDark.ts

@@ -0,0 +1,9 @@
+import { MAIN_COLORS_DARK } from './MainColorsDark';
+import { SECONDARY_COLORS_DARK } from './SecondaryColorsDark';
+import { TRANSPARENT_COLORS_DARK } from './TransparentColorsDark';
+
+export const COLOR_DARK = {
+  ...MAIN_COLORS_DARK,
+  ...SECONDARY_COLORS_DARK,
+  transparent: TRANSPARENT_COLORS_DARK,
+};

packages/twenty-ui/src/theme/constants/ColorsLight.ts

@@ -0,0 +1,9 @@
+import { MAIN_COLORS_LIGHT } from './MainColorsLight';
+import { SECONDARY_COLORS_LIGHT } from './SecondaryColorsLight';
+import { TRANSPARENT_COLORS_LIGHT } from './TransparentColorsLight';
+
+export const COLOR_LIGHT = {
+  ...MAIN_COLORS_LIGHT,
+  ...SECONDARY_COLORS_LIGHT,
+  transparent: TRANSPARENT_COLORS_LIGHT,
+};

packages/twenty-ui/src/theme/constants/FontDark.ts

@@ -1,16 +1,16 @@
-import { COLOR } from './Colors';
+import { COLOR_DARK } from '@ui/theme/constants/ColorsDark';
 import { FONT_COMMON } from './FontCommon';
-import { GRAY_SCALE } from './GrayScale';
+import { GRAY_SCALE_DARK } from './GrayScaleDark';
 
 export const FONT_DARK = {
   color: {
-    primary: GRAY_SCALE.gray20,
-    secondary: GRAY_SCALE.gray35,
-    tertiary: GRAY_SCALE.gray45,
-    light: GRAY_SCALE.gray50,
-    extraLight: GRAY_SCALE.gray55,
-    inverted: GRAY_SCALE.gray100,
-    danger: COLOR.red,
+    primary: GRAY_SCALE_DARK.gray12,
+    secondary: GRAY_SCALE_DARK.gray11,
+    tertiary: GRAY_SCALE_DARK.gray9,
+    light: GRAY_SCALE_DARK.gray8,
+    extraLight: GRAY_SCALE_DARK.gray7,
+    inverted: GRAY_SCALE_DARK.gray1,
+    danger: COLOR_DARK.red,
   },
   ...FONT_COMMON,
 };

packages/twenty-ui/src/theme/constants/FontLight.ts

@@ -1,16 +1,16 @@
-import { COLOR } from './Colors';
+import { COLOR_LIGHT } from '@ui/theme/constants/ColorsLight';
 import { FONT_COMMON } from './FontCommon';
-import { GRAY_SCALE } from './GrayScale';
+import { GRAY_SCALE_LIGHT } from './GrayScaleLight';
 
 export const FONT_LIGHT = {
   color: {
-    primary: GRAY_SCALE.gray60,
-    secondary: GRAY_SCALE.gray50,
-    tertiary: GRAY_SCALE.gray40,
-    light: GRAY_SCALE.gray35,
-    extraLight: GRAY_SCALE.gray30,
-    inverted: GRAY_SCALE.gray0,
-    danger: COLOR.red,
+    primary: GRAY_SCALE_LIGHT.gray12,
+    secondary: GRAY_SCALE_LIGHT.gray11,
+    tertiary: GRAY_SCALE_LIGHT.gray9,
+    light: GRAY_SCALE_LIGHT.gray8,
+    extraLight: GRAY_SCALE_LIGHT.gray7,
+    inverted: GRAY_SCALE_LIGHT.gray1,
+    danger: COLOR_LIGHT.red,
   },
   ...FONT_COMMON,
 };

packages/twenty-ui/src/theme/constants/GrayScale.ts

@@ -1,22 +0,0 @@
-/* eslint-disable @nx/workspace-no-hardcoded-colors */
-export const GRAY_SCALE = {
-  gray100: '#000000',
-  gray90: '#141414',
-  gray85: '#171717',
-  gray80: '#1b1b1b',
-  gray75: '#1d1d1d',
-  gray70: '#222222',
-  gray65: '#292929',
-  gray60: '#333333',
-  gray55: '#4c4c4c',
-  gray50: '#666666',
-  gray45: '#818181',
-  gray40: '#999999',
-  gray35: '#b3b3b3',
-  gray30: '#cccccc',
-  gray25: '#d6d6d6',
-  gray20: '#ebebeb',
-  gray15: '#f1f1f1',
-  gray10: '#fcfcfc',
-  gray0: '#ffffff',
-};