[Dashboards] new line area colors (#16272)

before - 


https://github.com/user-attachments/assets/a507809a-2a01-4aa6-940d-7d273e5fc8a7




after - 


https://github.com/user-attachments/assets/7c4d2a50-2ba6-4b91-b526-a87c609129c8

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

@@ -1,34 +0,0 @@
-import { type GraphColorScheme } from '../types/GraphColorScheme';
-import { calculateAngularGradient } from './calculateAngularGradient';
-
-export const createGradientDef = (
-  colorScheme: GraphColorScheme,
-  id: string,
-  isHovered: boolean = false,
-  angle?: number,
-  reverseGradient: boolean = false,
-) => {
-  const colors = isHovered
-    ? colorScheme.gradient.hover
-    : colorScheme.gradient.normal;
-
-  const coords =
-    angle !== undefined
-      ? calculateAngularGradient(angle)
-      : { x1: '0%', y1: '0%', x2: '0%', y2: '100%' };
-
-  return {
-    id,
-    type: 'linearGradient' as const,
-    ...coords,
-    colors: reverseGradient
-      ? [
-          { offset: 0, color: colors[1] },
-          { offset: 100, color: colors[0] },
-        ]
-      : [
-          { offset: 0, color: colors[0] },
-          { offset: 100, color: colors[1] },
-        ],
-  };
-};

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

@@ -7,10 +7,6 @@ export const createGraphColorRegistry = (
 ): GraphColorRegistry => ({
   blue: {
     name: 'blue',
-    gradient: {
-      normal: [theme.color.blue3, theme.color.blue5],
-      hover: [theme.color.blue7, theme.color.blue8],
-    },
     solid: theme.color.blue8,
     variations: [
       theme.color.blue1,
@@ -29,10 +25,6 @@ export const createGraphColorRegistry = (
   },
   purple: {
     name: 'purple',
-    gradient: {
-      normal: [theme.color.purple3, theme.color.purple5],
-      hover: [theme.color.purple7, theme.color.purple8],
-    },
     solid: theme.color.purple8,
     variations: [
       theme.color.purple1,
@@ -51,10 +43,6 @@ export const createGraphColorRegistry = (
   },
   turquoise: {
     name: 'turquoise',
-    gradient: {
-      normal: [theme.color.turquoise3, theme.color.turquoise5],
-      hover: [theme.color.turquoise7, theme.color.turquoise8],
-    },
     solid: theme.color.turquoise8,
     variations: [
       theme.color.turquoise1,
@@ -73,10 +61,6 @@ export const createGraphColorRegistry = (
   },
   orange: {
     name: 'orange',
-    gradient: {
-      normal: [theme.color.orange3, theme.color.orange5],
-      hover: [theme.color.orange7, theme.color.orange8],
-    },
     solid: theme.color.orange8,
     variations: [
       theme.color.orange1,
@@ -95,10 +79,6 @@ export const createGraphColorRegistry = (
   },
   pink: {
     name: 'pink',
-    gradient: {
-      normal: [theme.color.pink3, theme.color.pink5],
-      hover: [theme.color.pink7, theme.color.pink8],
-    },
     solid: theme.color.pink8,
     variations: [
       theme.color.pink1,
@@ -117,10 +97,6 @@ export const createGraphColorRegistry = (
   },
   yellow: {
     name: 'yellow',
-    gradient: {
-      normal: [theme.color.yellow3, theme.color.yellow5],
-      hover: [theme.color.yellow7, theme.color.yellow8],
-    },
     solid: theme.color.yellow8,
     variations: [
       theme.color.yellow1,
@@ -139,10 +115,6 @@ export const createGraphColorRegistry = (
   },
   red: {
     name: 'red',
-    gradient: {
-      normal: [theme.color.red3, theme.color.red5],
-      hover: [theme.color.red7, theme.color.red8],
-    },
     solid: theme.color.red8,
     variations: [
       theme.color.red1,
@@ -161,10 +133,6 @@ export const createGraphColorRegistry = (
   },
   green: {
     name: 'green',
-    gradient: {
-      normal: [theme.color.green3, theme.color.green5],
-      hover: [theme.color.green7, theme.color.green8],
-    },
     solid: theme.color.green8,
     variations: [
       theme.color.green1,
@@ -183,10 +151,6 @@ export const createGraphColorRegistry = (
   },
   sky: {
     name: 'sky',
-    gradient: {
-      normal: [theme.color.sky3, theme.color.sky5],
-      hover: [theme.color.sky7, theme.color.sky8],
-    },
     solid: theme.color.sky8,
     variations: [
       theme.color.sky1,
@@ -205,10 +169,6 @@ export const createGraphColorRegistry = (
   },
   gray: {
     name: 'gray',
-    gradient: {
-      normal: [theme.color.gray3, theme.color.gray5],
-      hover: [theme.color.gray7, theme.color.gray8],
-    },
     solid: theme.color.gray8,
     variations: [
       theme.color.gray1,
@@ -227,10 +187,6 @@ export const createGraphColorRegistry = (
   },
   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,
@@ -249,10 +205,6 @@ export const createGraphColorRegistry = (
   },
   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,
@@ -271,10 +223,6 @@ export const createGraphColorRegistry = (
   },
   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,
@@ -293,10 +241,6 @@ export const createGraphColorRegistry = (
   },
   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,
@@ -315,10 +259,6 @@ export const createGraphColorRegistry = (
   },
   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,
@@ -337,10 +277,6 @@ export const createGraphColorRegistry = (
   },
   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,
@@ -359,10 +295,6 @@ export const createGraphColorRegistry = (
   },
   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,
@@ -381,10 +313,6 @@ export const createGraphColorRegistry = (
   },
   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,
@@ -403,10 +331,6 @@ export const createGraphColorRegistry = (
   },
   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,
@@ -425,10 +349,6 @@ export const createGraphColorRegistry = (
   },
   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,
@@ -447,10 +367,6 @@ export const createGraphColorRegistry = (
   },
   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,
@@ -469,10 +385,6 @@ export const createGraphColorRegistry = (
   },
   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,
@@ -491,10 +403,6 @@ export const createGraphColorRegistry = (
   },
   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,
@@ -513,10 +421,6 @@ export const createGraphColorRegistry = (
   },
   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,
@@ -535,10 +439,6 @@ export const createGraphColorRegistry = (
   },
   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,