From c34f798a9c8ce4aad53af5180286199c199d4d31 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Rapha=C3=ABl=20Bosi?=
 <71827178+bosiraphael@users.noreply.github.com>
Date: Wed, 26 Nov 2025 15:40:45 +0100
Subject: [PATCH] Reorder colors to have a proper gradient (#16096)

## Before

<img width="638" height="1712" alt="CleanShot 2025-11-26 at 15 28 47@2x"
src="https://github.com/user-attachments/assets/a8ebadf7-a642-46c1-bb96-067e8b451059"
/>


## After

<img width="638" height="1712" alt="CleanShot 2025-11-26 at 15 26 15@2x"
src="https://github.com/user-attachments/assets/d276240c-4b34-4ea3-954d-2a20a94ddf60"
/>
---
 .../src/theme/constants/MainColorsDark.ts     | 54 +++++++++----------
 .../src/theme/constants/MainColorsLight.ts    | 54 +++++++++----------
 2 files changed, 54 insertions(+), 54 deletions(-)

diff --git a/packages/twenty-ui/src/theme/constants/MainColorsDark.ts b/packages/twenty-ui/src/theme/constants/MainColorsDark.ts
index f430fff360..cd76aba2a4 100644
--- a/packages/twenty-ui/src/theme/constants/MainColorsDark.ts
+++ b/packages/twenty-ui/src/theme/constants/MainColorsDark.ts
@@ -2,40 +2,40 @@ import * as RadixColors from '@radix-ui/colors';
 import { GRAY_SCALE_DARK } from '@ui/theme/constants/GrayScaleDark';
 
 export const MAIN_COLORS_DARK = {
-  // Grays
-  gray: GRAY_SCALE_DARK.gray7,
-
   // Reds
-  tomato: RadixColors.tomatoDarkP3.tomato9,
   red: RadixColors.redDarkP3.red9,
   ruby: RadixColors.rubyDarkP3.ruby9,
   crimson: RadixColors.crimsonDarkP3.crimson9,
-
-  // Pinks & Purples
-  pink: RadixColors.pinkDarkP3.pink9,
-  plum: RadixColors.plumDarkP3.plum9,
-  purple: RadixColors.purpleDarkP3.purple9,
-  violet: RadixColors.violetDarkP3.violet9,
-  iris: RadixColors.irisDarkP3.iris9,
-
-  // Cyans & Blues
-  cyan: RadixColors.cyanDarkP3.cyan9,
-  turquoise: RadixColors.tealDarkP3.teal9,
-  sky: RadixColors.skyDarkP3.sky9,
-  blue: RadixColors.indigoDarkP3.indigo9,
-
-  // Greens
-  jade: RadixColors.jadeDarkP3.jade9,
-  green: RadixColors.greenDarkP3.green9,
-  grass: RadixColors.grassDarkP3.grass9,
-  mint: RadixColors.mintDarkP3.mint9,
-  lime: RadixColors.limeDarkP3.lime9,
+  tomato: RadixColors.tomatoDarkP3.tomato9,
 
   // Oranges & Yellows
-  bronze: RadixColors.bronzeDarkP3.bronze9,
-  gold: RadixColors.goldDarkP3.gold9,
-  brown: RadixColors.brownDarkP3.brown9,
   orange: RadixColors.orangeDarkP3.orange9,
   amber: RadixColors.amberDarkP3.amber9,
   yellow: RadixColors.yellowDarkP3.yellow9,
+
+  // Greens
+  lime: RadixColors.limeDarkP3.lime9,
+  grass: RadixColors.grassDarkP3.grass9,
+  green: RadixColors.greenDarkP3.green9,
+  jade: RadixColors.jadeDarkP3.jade9,
+  mint: RadixColors.mintDarkP3.mint9,
+
+  // Cyans & Blues
+  turquoise: RadixColors.tealDarkP3.teal9,
+  cyan: RadixColors.cyanDarkP3.cyan9,
+  sky: RadixColors.skyDarkP3.sky9,
+  blue: RadixColors.indigoDarkP3.indigo9,
+
+  // Purples & Pinks
+  iris: RadixColors.irisDarkP3.iris9,
+  violet: RadixColors.violetDarkP3.violet9,
+  purple: RadixColors.purpleDarkP3.purple9,
+  plum: RadixColors.plumDarkP3.plum9,
+  pink: RadixColors.pinkDarkP3.pink9,
+
+  // Earth tones & Neutrals
+  bronze: RadixColors.bronzeDarkP3.bronze9,
+  gold: RadixColors.goldDarkP3.gold9,
+  brown: RadixColors.brownDarkP3.brown9,
+  gray: GRAY_SCALE_DARK.gray7,
 };
diff --git a/packages/twenty-ui/src/theme/constants/MainColorsLight.ts b/packages/twenty-ui/src/theme/constants/MainColorsLight.ts
index ce46ddbb61..ac5a334931 100644
--- a/packages/twenty-ui/src/theme/constants/MainColorsLight.ts
+++ b/packages/twenty-ui/src/theme/constants/MainColorsLight.ts
@@ -2,40 +2,40 @@ import * as RadixColors from '@radix-ui/colors';
 import { GRAY_SCALE_LIGHT } from './GrayScaleLight';
 
 export const MAIN_COLORS_LIGHT = {
-  // Grays
-  gray: GRAY_SCALE_LIGHT.gray7,
-
   // Reds
-  tomato: RadixColors.tomatoP3.tomato9,
   red: RadixColors.redP3.red9,
   ruby: RadixColors.rubyP3.ruby9,
   crimson: RadixColors.crimsonP3.crimson9,
-
-  // Pinks & Purples
-  pink: RadixColors.pinkP3.pink9,
-  plum: RadixColors.plumP3.plum9,
-  purple: RadixColors.purpleP3.purple9,
-  violet: RadixColors.violetP3.violet9,
-  iris: RadixColors.irisP3.iris9,
-
-  // Cyans & Blues
-  cyan: RadixColors.cyanP3.cyan9,
-  turquoise: RadixColors.tealP3.teal9,
-  sky: RadixColors.skyP3.sky9,
-  blue: RadixColors.indigoP3.indigo9,
-
-  // Greens
-  jade: RadixColors.jadeP3.jade9,
-  green: RadixColors.greenP3.green9,
-  grass: RadixColors.grassP3.grass9,
-  mint: RadixColors.mintP3.mint9,
-  lime: RadixColors.limeP3.lime9,
+  tomato: RadixColors.tomatoP3.tomato9,
 
   // Oranges & Yellows
-  bronze: RadixColors.bronzeP3.bronze9,
-  gold: RadixColors.goldP3.gold9,
-  brown: RadixColors.brownP3.brown9,
   orange: RadixColors.orangeP3.orange9,
   amber: RadixColors.amberP3.amber9,
   yellow: RadixColors.yellowP3.yellow9,
+
+  // Greens
+  lime: RadixColors.limeP3.lime9,
+  grass: RadixColors.grassP3.grass9,
+  green: RadixColors.greenP3.green9,
+  jade: RadixColors.jadeP3.jade9,
+  mint: RadixColors.mintP3.mint9,
+
+  // Cyans & Blues
+  turquoise: RadixColors.tealP3.teal9,
+  cyan: RadixColors.cyanP3.cyan9,
+  sky: RadixColors.skyP3.sky9,
+  blue: RadixColors.indigoP3.indigo9,
+
+  // Purples & Pinks
+  iris: RadixColors.irisP3.iris9,
+  violet: RadixColors.violetP3.violet9,
+  purple: RadixColors.purpleP3.purple9,
+  plum: RadixColors.plumP3.plum9,
+  pink: RadixColors.pinkP3.pink9,
+
+  // Earth tones & Neutrals
+  bronze: RadixColors.bronzeP3.bronze9,
+  gold: RadixColors.goldP3.gold9,
+  brown: RadixColors.brownP3.brown9,
+  gray: GRAY_SCALE_LIGHT.gray7,
 };