Serverless function UI (#6388)

https://www.figma.com/design/xt8O9mFeLl46C5InWwoMrN/Twenty?node-id=36235-120877

Did not do the file manager part. A Function is defined using one unique
file at the moment

Feature protected by featureFlag `IS_FUNCTION_SETTINGS_ENABLED`

## Demo


https://github.com/user-attachments/assets/0acb8291-47b4-4521-a6fa-a88b9198609b

packages/twenty-ui/src/display/icon/components/TablerIcons.ts

@@ -84,6 +84,7 @@ export {
   IconFilter,
   IconFilterOff,
   IconFocusCentered,
+  IconFunction,
   IconForbid,
   IconGripVertical,
   IconH1,
@@ -127,6 +128,7 @@ export {
   IconPhone,
   IconPhoto,
   IconPilcrow,
+  IconPlayerPlay,
   IconPlug,
   IconPlus,
   IconPresentation,
@@ -153,6 +155,7 @@ export {
   IconTags,
   IconTarget,
   IconTargetArrow,
+  IconTestPipe,
   IconTextSize,
   IconTimelineEvent,
   IconTrash,

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

@@ -0,0 +1,10 @@
+import { COLOR } from './Colors';
+
+export const CODE_DARK = {
+  text: {
+    gray: COLOR.gray50,
+    sky: COLOR.sky50,
+    pink: COLOR.pink50,
+    orange: COLOR.orange40,
+  },
+};

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

@@ -0,0 +1,10 @@
+import { COLOR } from './Colors';
+
+export const CODE_LIGHT = {
+  text: {
+    gray: COLOR.gray50,
+    sky: COLOR.sky50,
+    pink: COLOR.pink50,
+    orange: COLOR.orange40,
+  },
+};

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

@@ -9,6 +9,7 @@ import { BOX_SHADOW_DARK } from './BoxShadowDark';
 import { FONT_DARK } from './FontDark';
 import { TAG_DARK } from './TagDark';
 import { THEME_COMMON } from './ThemeCommon';
+import { CODE_DARK } from './CodeDark';
 
 export const THEME_DARK: ThemeType = {
   ...THEME_COMMON,
@@ -22,5 +23,6 @@ export const THEME_DARK: ThemeType = {
     name: 'dark',
     snackBar: SNACK_BAR_DARK,
     tag: TAG_DARK,
+    code: CODE_DARK,
   },
 };

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

@@ -8,6 +8,7 @@ import { BOX_SHADOW_LIGHT } from './BoxShadowLight';
 import { FONT_LIGHT } from './FontLight';
 import { TAG_LIGHT } from './TagLight';
 import { THEME_COMMON } from './ThemeCommon';
+import { CODE_LIGHT } from './CodeLight';
 
 export const THEME_LIGHT = {
   ...THEME_COMMON,
@@ -21,5 +22,6 @@ export const THEME_LIGHT = {
     name: 'light',
     snackBar: SNACK_BAR_LIGHT,
     tag: TAG_LIGHT,
+    code: CODE_LIGHT,
   },
 };

packages/twenty-ui/src/theme/index.ts

@@ -10,6 +10,8 @@ export * from './constants/BorderDark';
 export * from './constants/BorderLight';
 export * from './constants/BoxShadowDark';
 export * from './constants/BoxShadowLight';
+export * from './constants/CodeDark';
+export * from './constants/CodeLight';
 export * from './constants/Colors';
 export * from './constants/FontCommon';
 export * from './constants/FontDark';