TWNTY-3825 - ESLint rule: const naming (#4171)

* ESLint rule: const naming

Co-authored-by: v1b3m <vibenjamin6@gmail.com>
Co-authored-by: KlingerMatheus <klinger.matheus@gitstart.dev>

* Refactor according to review

Co-authored-by: v1b3m <vibenjamin6@gmail.com>
Co-authored-by: KlingerMatheus <klinger.matheus@gitstart.dev>

* refactor: Reverts changes on `twenty-server`

Co-authored-by: KlingerMatheus <klinger.matheus@gitstart.dev>
Co-authored-by: v1b3m <vibenjamin6@gmail.com>

---------

Co-authored-by: gitstart-twenty <gitstart-twenty@users.noreply.github.com>
Co-authored-by: v1b3m <vibenjamin6@gmail.com>
Co-authored-by: KlingerMatheus <klinger.matheus@gitstart.dev>

.eslintrc.js

@@ -1,7 +1,13 @@
 module.exports = {
   root: true,
   extends: ['plugin:prettier/recommended'],
-  plugins: ['@nx', 'prefer-arrow', 'simple-import-sort', 'unused-imports'],
+  plugins: [
+    '@nx',
+    'prefer-arrow',
+    'simple-import-sort',
+    'unused-imports',
+    'unicorn',
+  ],
   rules: {
     'func-style': ['error', 'declaration', { allowArrowFunctions: true }],
     'no-console': ['warn', { allow: ['group', 'groupCollapsed', 'groupEnd'] }],
@@ -95,5 +101,26 @@ module.exports = {
       },
       rules: {},
     },
+    {
+      files: ['**/constants/*.ts', '**/*.constants.ts'],
+      rules: {
+        '@typescript-eslint/naming-convention': [
+          'error',
+          {
+            selector: 'variable',
+            format: ['UPPER_CASE'],
+          },
+        ],
+        'unicorn/filename-case': [
+          'warn',
+          {
+            cases: {
+              pascalCase: true,
+            },
+          },
+        ],
+        '@nx/workspace-max-consts-per-file': ['error', { max: 1 }],
+      },
+    },
   ],
 };

package.json

@@ -257,6 +257,7 @@
     "eslint-plugin-react-refresh": "^0.4.4",
     "eslint-plugin-simple-import-sort": "^10.0.0",
     "eslint-plugin-storybook": "^0.6.15",
+    "eslint-plugin-unicorn": "^51.0.1",
     "eslint-plugin-unused-imports": "^3.0.0",
     "http-server": "^14.1.1",
     "jest": "29.7.0",

packages/twenty-chrome-extension/src/options/modules/ui/theme/constants/background.ts

@@ -1,4 +1,3 @@
-/* eslint-disable twenty/no-hardcoded-colors */
 import DarkNoise from '../assets/dark-noise.jpg';
 import LightNoise from '../assets/light-noise.png';
 

packages/twenty-chrome-extension/src/options/modules/ui/theme/constants/colors.ts

@@ -1,4 +1,3 @@
-/* eslint-disable twenty/no-hardcoded-colors */
 import hexRgb from 'hex-rgb';
 
 export const grayScale = {

packages/twenty-front/.storybook/preview.ts

@@ -3,7 +3,9 @@ import { withThemeFromJSXProvider } from '@storybook/addon-themes';
 import { Preview, ReactRenderer } from '@storybook/react';
 import { initialize, mswDecorator } from 'msw-storybook-addon';
 
-import { darkTheme, lightTheme } from '../src/modules/ui/theme/constants/theme';
+import { THEME_DARK } from '@/ui/theme/constants/ThemeDark';
+import { THEME_LIGHT } from '@/ui/theme/constants/ThemeLight';
+
 import { RootDecorator } from '../src/testing/decorators/RootDecorator';
 import { mockedUserJWT } from '../src/testing/mock-data/jwt';
 
@@ -29,8 +31,8 @@ const preview: Preview = {
   decorators: [
     withThemeFromJSXProvider<ReactRenderer>({
       themes: {
-        light: lightTheme,
+        light: THEME_LIGHT,
-        dark: darkTheme,
+        dark: THEME_DARK,
       },
       defaultTheme: 'light',
       Provider: ThemeProvider,

packages/twenty-front/src/effect-components/CommandMenuEffect.tsx

@@ -1,13 +1,13 @@
 import { useEffect } from 'react';
 import { useSetRecoilState } from 'recoil';
 
-import { commandMenuCommands } from '@/command-menu/constants/commandMenuCommands';
+import { COMMAND_MENU_COMMANDS } from '@/command-menu/constants/CommandMenuCommands';
 import { commandMenuCommandsState } from '@/command-menu/states/commandMenuCommandsState';
 
 export const CommandMenuEffect = () => {
   const setCommands = useSetRecoilState(commandMenuCommandsState);
 
-  const commands = commandMenuCommands;
+  const commands = COMMAND_MENU_COMMANDS;
   useEffect(() => {
     setCommands(commands);
   }, [commands, setCommands]);

packages/twenty-front/src/index.tsx

@@ -19,7 +19,7 @@ import { DialogManagerScope } from '@/ui/feedback/dialog-manager/scopes/DialogMa
 import { SnackBarProvider } from '@/ui/feedback/snack-bar-manager/components/SnackBarProvider';
 import { SnackBarProviderScope } from '@/ui/feedback/snack-bar-manager/scopes/SnackBarProviderScope';
 import { AppThemeProvider } from '@/ui/theme/components/AppThemeProvider';
-import { ThemeType } from '@/ui/theme/constants/theme';
+import { ThemeType } from '@/ui/theme/constants/ThemeLight';
 import { UserProvider } from '@/users/components/UserProvider';
 import { PageChangeEffect } from '~/effect-components/PageChangeEffect';
 

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

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

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

@@ -2,7 +2,7 @@ import styled from '@emotion/styled';
 
 import { EmailThreadNotShared } from '@/activities/emails/components/EmailThreadNotShared';
 import { CardContent } from '@/ui/layout/card/components/CardContent';
-import { grayScale } from '@/ui/theme/constants/colors';
+import { GRAY_SCALE } from '@/ui/theme/constants/GrayScale';
 import { Avatar } from '@/users/components/Avatar';
 import { TimelineThread } from '~/generated/graphql';
 import { formatToHumanReadableDate } from '~/utils';
@@ -129,8 +129,8 @@ export const EmailThreadPreview = ({
               avatarUrl={finalAvatarUrl}
               placeholder={finalDisplayedName}
               type="rounded"
-              color={isCountIcon ? grayScale.gray50 : undefined}
+              color={isCountIcon ? GRAY_SCALE.gray50 : undefined}
-              backgroundColor={isCountIcon ? grayScale.gray10 : undefined}
+              backgroundColor={isCountIcon ? GRAY_SCALE.gray10 : undefined}
             />
           )}
         </StyledParticipantsContainer>

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

@@ -6,7 +6,7 @@ import { useRecoilState } from 'recoil';
 import { EmailLoader } from '@/activities/emails/components/EmailLoader';
 import { EmailThreadFetchMoreLoader } from '@/activities/emails/components/EmailThreadFetchMoreLoader';
 import { EmailThreadPreview } from '@/activities/emails/components/EmailThreadPreview';
-import { TIMELINE_THREADS_DEFAULT_PAGE_SIZE } from '@/activities/emails/constants/messaging.constants';
+import { TIMELINE_THREADS_DEFAULT_PAGE_SIZE } from '@/activities/emails/constants/Messaging';
 import { useEmailThreadStates } from '@/activities/emails/hooks/internal/useEmailThreadStates';
 import { useEmailThread } from '@/activities/emails/hooks/useEmailThread';
 import { getTimelineThreadsFromCompanyId } from '@/activities/emails/queries/getTimelineThreadsFromCompanyId';

packages/twenty-front/src/modules/activities/notes/hooks/useNotes.ts

@@ -3,7 +3,7 @@ import { useRecoilState } from 'recoil';
 
 import { useActivities } from '@/activities/hooks/useActivities';
 import { currentNotesQueryVariablesState } from '@/activities/notes/states/currentNotesQueryVariablesState';
-import { FIND_MANY_TIMELINE_ACTIVITIES_ORDER_BY } from '@/activities/timeline/constants/FIND_MANY_TIMELINE_ACTIVITIES_ORDER_BY';
+import { FIND_MANY_TIMELINE_ACTIVITIES_ORDER_BY } from '@/activities/timeline/constants/FindManyTimelineActivitiesOrderBy';
 import { Note } from '@/activities/types/Note';
 import { ObjectRecordQueryVariables } from '@/object-record/types/ObjectRecordQueryVariables';
 import { isDeeplyEqual } from '~/utils/isDeeplyEqual';

packages/twenty-front/src/modules/activities/right-drawer/components/ActivityActionBar.tsx

@@ -16,7 +16,7 @@ import { temporaryActivityForEditorState } from '@/activities/states/temporaryAc
 import { viewableActivityIdState } from '@/activities/states/viewableActivityIdState';
 import { currentCompletedTaskQueryVariablesState } from '@/activities/tasks/states/currentCompletedTaskQueryVariablesState';
 import { currentIncompleteTaskQueryVariablesState } from '@/activities/tasks/states/currentIncompleteTaskQueryVariablesState';
-import { FIND_MANY_TIMELINE_ACTIVITIES_ORDER_BY } from '@/activities/timeline/constants/FIND_MANY_TIMELINE_ACTIVITIES_ORDER_BY';
+import { FIND_MANY_TIMELINE_ACTIVITIES_ORDER_BY } from '@/activities/timeline/constants/FindManyTimelineActivitiesOrderBy';
 import { objectShowPageTargetableObjectState } from '@/activities/timeline/states/objectShowPageTargetableObjectIdState';
 import { Activity } from '@/activities/types/Activity';
 import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';

packages/twenty-front/src/modules/activities/tasks/components/TaskGroups.tsx

@@ -2,7 +2,7 @@ import styled from '@emotion/styled';
 import { useRecoilValue } from 'recoil';
 
 import { useOpenCreateActivityDrawer } from '@/activities/hooks/useOpenCreateActivityDrawer';
-import { TASKS_TAB_LIST_COMPONENT_ID } from '@/activities/tasks/constants/tasksTabListComponentId';
+import { TASKS_TAB_LIST_COMPONENT_ID } from '@/activities/tasks/constants/TasksTabListComponentId';
 import { useTasks } from '@/activities/tasks/hooks/useTasks';
 import { ActivityTargetableObject } from '@/activities/types/ActivityTargetableEntity';
 import { IconPlus } from '@/ui/display/icon';

packages/twenty-front/src/modules/activities/tasks/hooks/useTasks.ts

@@ -6,7 +6,7 @@ import { useRecoilState } from 'recoil';
 import { useActivities } from '@/activities/hooks/useActivities';
 import { currentCompletedTaskQueryVariablesState } from '@/activities/tasks/states/currentCompletedTaskQueryVariablesState';
 import { currentIncompleteTaskQueryVariablesState } from '@/activities/tasks/states/currentIncompleteTaskQueryVariablesState';
-import { FIND_MANY_TIMELINE_ACTIVITIES_ORDER_BY } from '@/activities/timeline/constants/FIND_MANY_TIMELINE_ACTIVITIES_ORDER_BY';
+import { FIND_MANY_TIMELINE_ACTIVITIES_ORDER_BY } from '@/activities/timeline/constants/FindManyTimelineActivitiesOrderBy';
 import { Activity } from '@/activities/types/Activity';
 import { ActivityTargetableObject } from '@/activities/types/ActivityTargetableEntity';
 import { useFilterDropdown } from '@/object-record/object-filter-dropdown/hooks/useFilterDropdown';

packages/twenty-front/src/modules/activities/timeline/components/TimelineQueryEffect.tsx

@@ -2,7 +2,7 @@ import { useEffect } from 'react';
 import { useRecoilCallback, useRecoilState, useSetRecoilState } from 'recoil';
 
 import { useActivities } from '@/activities/hooks/useActivities';
-import { FIND_MANY_TIMELINE_ACTIVITIES_ORDER_BY } from '@/activities/timeline/constants/FIND_MANY_TIMELINE_ACTIVITIES_ORDER_BY';
+import { FIND_MANY_TIMELINE_ACTIVITIES_ORDER_BY } from '@/activities/timeline/constants/FindManyTimelineActivitiesOrderBy';
 import { objectShowPageTargetableObjectState } from '@/activities/timeline/states/objectShowPageTargetableObjectIdState';
 import { timelineActivitiesFammilyState } from '@/activities/timeline/states/timelineActivitiesFamilyState';
 import { timelineActivitiesForGroupState } from '@/activities/timeline/states/timelineActivitiesForGroupState';

packages/twenty-front/src/modules/command-menu/constants/CommandMenuCommands.ts

@@ -8,7 +8,7 @@ import {
 
 import { Command, CommandType } from '../types/Command';
 
-export const commandMenuCommands: Command[] = [
+export const COMMAND_MENU_COMMANDS: Command[] = [
   {
     id: 'go-to-people',
     to: '/objects/people',

packages/twenty-front/src/modules/command-menu/hooks/useCommandMenu.ts

@@ -6,7 +6,7 @@ import { useSelectableList } from '@/ui/layout/selectable-list/hooks/useSelectab
 import { usePreviousHotkeyScope } from '@/ui/utilities/hotkey/hooks/usePreviousHotkeyScope';
 import { AppHotkeyScope } from '@/ui/utilities/hotkey/types/AppHotkeyScope';
 
-import { commandMenuCommands } from '../constants/commandMenuCommands';
+import { COMMAND_MENU_COMMANDS } from '../constants/CommandMenuCommands';
 import { commandMenuCommandsState } from '../states/commandMenuCommandsState';
 import { isCommandMenuOpenedState } from '../states/isCommandMenuOpenedState';
 import { Command } from '../types/Command';
@@ -62,7 +62,7 @@ export const useCommandMenu = () => {
   );
 
   const setToInitialCommandMenu = () => {
-    setCommands(commandMenuCommands);
+    setCommands(COMMAND_MENU_COMMANDS);
   };
 
   const onItemClick = useCallback(

packages/twenty-front/src/modules/companies/board/components/CompanyBoard.tsx

@@ -8,7 +8,7 @@ import {
   RecordBoardDeprecatedProps,
 } from '@/object-record/record-board-deprecated/components/RecordBoardDeprecated';
 import { RecordBoardDeprecatedEffect } from '@/object-record/record-board-deprecated/components/RecordBoardDeprecatedEffect';
-import { BoardOptionsDropdownId } from '@/object-record/record-board-deprecated/constants/BoardOptionsDropdownId';
+import { BOARD_OPTIONS_DROPDOWN_ID } from '@/object-record/record-board-deprecated/constants/BoardOptionsDropdownId';
 import { RecordBoardDeprecatedOptionsDropdown } from '@/object-record/record-board-deprecated/options/components/RecordBoardDeprecatedOptionsDropdown';
 import { BoardColumnDefinition } from '@/object-record/record-board-deprecated/types/BoardColumnDefinition';
 import { ViewBar } from '@/views/components/ViewBar';
@@ -66,7 +66,7 @@ export const CompanyBoard = ({
             onStageAdd={onStageAdd}
           />
         }
-        optionsDropdownScopeId={BoardOptionsDropdownId}
+        optionsDropdownScopeId={BOARD_OPTIONS_DROPDOWN_ID}
       />
 
       <HooksCompanyBoardEffect

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

@@ -2,13 +2,11 @@ import { useRecoilValue } from 'recoil';
 import { Key } from 'ts-key-enum';
 
 import { useCommandMenu } from '@/command-menu/hooks/useCommandMenu';
+import { KEYBOARD_SHORTCUTS_GENERAL } from '@/keyboard-shortcut-menu/constants/KeyboardShortcutsGeneral';
+import { KEYBOARD_SHORTCUTS_TABLE } from '@/keyboard-shortcut-menu/constants/KeyboardShortcutsTable';
 import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
 import { AppHotkeyScope } from '@/ui/utilities/hotkey/types/AppHotkeyScope';
 
-import {
-  keyboardShortcutsGeneral,
-  keyboardShortcutsTable,
-} from '../constants/keyboardShortcuts';
 import { useKeyboardShortcutMenu } from '../hooks/useKeyboardShortcutMenu';
 import { isKeyboardShortcutMenuOpenedState } from '../states/isKeyboardShortcutMenuOpenedState';
 
@@ -48,12 +46,12 @@ export const KeyboardShortcutMenu = () => {
       {isKeyboardShortcutMenuOpened && (
         <KeyboardMenuDialog onClose={toggleKeyboardShortcutMenu}>
           <KeyboardMenuGroup heading="Table">
-            {keyboardShortcutsTable.map((TableShortcut, index) => (
+            {KEYBOARD_SHORTCUTS_TABLE.map((TableShortcut, index) => (
               <KeyboardMenuItem shortcut={TableShortcut} key={index} />
             ))}
           </KeyboardMenuGroup>
           <KeyboardMenuGroup heading="General">
-            {keyboardShortcutsGeneral.map((GeneralShortcut) => (
+            {KEYBOARD_SHORTCUTS_GENERAL.map((GeneralShortcut) => (
               <KeyboardMenuItem shortcut={GeneralShortcut} />
             ))}
           </KeyboardMenuGroup>

packages/twenty-front/src/modules/keyboard-shortcut-menu/constants/KeyboardShortcutsGeneral.ts

@@ -0,0 +1,18 @@
+import { Shortcut, ShortcutType } from '../types/Shortcut';
+
+export const KEYBOARD_SHORTCUTS_GENERAL: Shortcut[] = [
+  {
+    label: 'Open search',
+    type: ShortcutType.General,
+    firstHotKey: '⌘',
+    secondHotKey: 'K',
+    areSimultaneous: false,
+  },
+  {
+    label: 'Mark as favourite',
+    type: ShortcutType.General,
+    firstHotKey: '⇧',
+    secondHotKey: 'F',
+    areSimultaneous: false,
+  },
+];

packages/twenty-front/src/modules/keyboard-shortcut-menu/constants/KeyboardShortcutsTable.ts

@@ -1,6 +1,6 @@
 import { Shortcut, ShortcutType } from '../types/Shortcut';
 
-export const keyboardShortcutsTable: Shortcut[] = [
+export const KEYBOARD_SHORTCUTS_TABLE: Shortcut[] = [
   {
     label: 'Move right',
     type: ShortcutType.Table,
@@ -20,20 +20,3 @@ export const keyboardShortcutsTable: Shortcut[] = [
     areSimultaneous: true,
   },
 ];
-
-export const keyboardShortcutsGeneral: Shortcut[] = [
-  {
-    label: 'Open search',
-    type: ShortcutType.General,
-    firstHotKey: '⌘',
-    secondHotKey: 'K',
-    areSimultaneous: false,
-  },
-  {
-    label: 'Mark as favourite',
-    type: ShortcutType.General,
-    firstHotKey: '⇧',
-    secondHotKey: 'F',
-    areSimultaneous: false,
-  },
-];

packages/twenty-front/src/modules/object-metadata/types/FieldMetadataItem.ts

@@ -1,4 +1,4 @@
-import { ThemeColor } from '@/ui/theme/constants/colors';
+import { ThemeColor } from '@/ui/theme/constants/MainColorNames';
 import { Field, Relation } from '~/generated-metadata/graphql';
 
 export type FieldMetadataItem = Omit<

packages/twenty-front/src/modules/object-metadata/types/FieldMetadataOption.ts

@@ -1,4 +1,4 @@
-import { ThemeColor } from '@/ui/theme/constants/colors';
+import { ThemeColor } from '@/ui/theme/constants/MainColorNames';
 
 export type FieldMetadataOption = {
   color?: ThemeColor;

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

@@ -1,10 +1,9 @@
+import { OBJECT_FILTER_DROPDOWN_ID } from '@/object-record/object-filter-dropdown/constants/ObjectFilterDropdownId';
 import { useFilterDropdown } from '@/object-record/object-filter-dropdown/hooks/useFilterDropdown';
 import { IconPlus } from '@/ui/display/icon';
 import { LightButton } from '@/ui/input/button/components/LightButton';
 import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
 
-import { ObjectFilterDropdownId } from '../constants/ObjectFilterDropdownId';
-
 type AddObjectFilterFromDetailsButtonProps = {
   filterDropdownId?: string;
 };
@@ -12,7 +11,7 @@ type AddObjectFilterFromDetailsButtonProps = {
 export const AddObjectFilterFromDetailsButton = ({
   filterDropdownId,
 }: AddObjectFilterFromDetailsButtonProps) => {
-  const { toggleDropdown } = useDropdown(ObjectFilterDropdownId);
+  const { toggleDropdown } = useDropdown(OBJECT_FILTER_DROPDOWN_ID);
 
   const { resetFilter } = useFilterDropdown({
     filterDropdownId: filterDropdownId,

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

@@ -1,14 +1,13 @@
+import { OBJECT_FILTER_DROPDOWN_ID } from '@/object-record/object-filter-dropdown/constants/ObjectFilterDropdownId';
 import { useFilterDropdown } from '@/object-record/object-filter-dropdown/hooks/useFilterDropdown';
 import { StyledHeaderDropdownButton } from '@/ui/layout/dropdown/components/StyledHeaderDropdownButton';
 import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
 
-import { ObjectFilterDropdownId } from '../constants/ObjectFilterDropdownId';
-
 export const MultipleFiltersButton = () => {
   const { resetFilter } = useFilterDropdown();
 
   const { isDropdownOpen, toggleDropdown } = useDropdown(
-    ObjectFilterDropdownId,
+    OBJECT_FILTER_DROPDOWN_ID,
   );
 
   const handleClick = () => {

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

@@ -1,9 +1,8 @@
+import { OBJECT_FILTER_DROPDOWN_ID } from '@/object-record/object-filter-dropdown/constants/ObjectFilterDropdownId';
 import { useFilterDropdown } from '@/object-record/object-filter-dropdown/hooks/useFilterDropdown';
 import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
 import { HotkeyScope } from '@/ui/utilities/hotkey/types/HotkeyScope';
 
-import { ObjectFilterDropdownId } from '../constants/ObjectFilterDropdownId';
-
 import { MultipleFiltersButton } from './MultipleFiltersButton';
 import { MultipleFiltersDropdownContent } from './MultipleFiltersDropdownContent';
 
@@ -18,7 +17,7 @@ export const MultipleFiltersDropdownButton = ({
 
   return (
     <Dropdown
-      dropdownId={ObjectFilterDropdownId}
+      dropdownId={OBJECT_FILTER_DROPDOWN_ID}
       onClose={resetFilter}
       clickableComponent={<MultipleFiltersButton />}
       dropdownComponents={<MultipleFiltersDropdownContent />}

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

@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'react';
 
-import { ObjectFilterDropdownId } from '@/object-record/object-filter-dropdown/constants/ObjectFilterDropdownId';
+import { OBJECT_FILTER_DROPDOWN_ID } from '@/object-record/object-filter-dropdown/constants/ObjectFilterDropdownId';
 import { useFilterDropdown } from '@/object-record/object-filter-dropdown/hooks/useFilterDropdown';
 import { SingleEntitySelectMenuItems } from '@/object-record/relation-picker/components/SingleEntitySelectMenuItems';
 import { EntitiesForMultipleEntitySelect } from '@/object-record/relation-picker/types/EntitiesForMultipleEntitySelect';
@@ -22,7 +22,7 @@ export const ObjectFilterDropdownEntitySearchSelect = ({
     selectFilter,
   } = useFilterDropdown();
 
-  const { closeDropdown } = useDropdown(ObjectFilterDropdownId);
+  const { closeDropdown } = useDropdown(OBJECT_FILTER_DROPDOWN_ID);
 
   const [isAllEntitySelected, setIsAllEntitySelected] = useState(false);
 

packages/twenty-front/src/modules/object-record/object-filter-dropdown/constants/ObjectFilterDropdownId.ts

@@ -1 +1 @@
-export const ObjectFilterDropdownId = 'filter';
+export const OBJECT_FILTER_DROPDOWN_ID = 'filter';

packages/twenty-front/src/modules/object-record/object-sort-dropdown/components/ObjectSortDropdownButton.tsx

@@ -1,5 +1,6 @@
 import { useCallback, useState } from 'react';
 
+import { OBJECT_SORT_DROPDOWN_ID } from '@/object-record/object-sort-dropdown/constants/ObjectSortDropdownId';
 import { useSortDropdown } from '@/object-record/object-sort-dropdown/hooks/useSortDropdown';
 import { ObjectSortDropdownScope } from '@/object-record/object-sort-dropdown/scopes/ObjectSortDropdownScope';
 import { IconChevronDown } from '@/ui/display/icon';
@@ -13,7 +14,6 @@ import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
 import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem';
 import { HotkeyScope } from '@/ui/utilities/hotkey/types/HotkeyScope';
 
-import { ObjectSortDropdownId } from '../constants/ObjectSortDropdownId';
 import { SortDefinition } from '../types/SortDefinition';
 import { SORT_DIRECTIONS, SortDirection } from '../types/SortDirection';
 
@@ -41,7 +41,7 @@ export const ObjectSortDropdownButton = ({
     sortDropdownId: sortDropdownId,
   });
 
-  const { toggleDropdown } = useDropdown(ObjectSortDropdownId);
+  const { toggleDropdown } = useDropdown(OBJECT_SORT_DROPDOWN_ID);
 
   const handleButtonClick = () => {
     toggleDropdown();
@@ -70,7 +70,7 @@ export const ObjectSortDropdownButton = ({
   return (
     <ObjectSortDropdownScope sortScopeId={sortDropdownId}>
       <Dropdown
-        dropdownId={ObjectSortDropdownId}
+        dropdownId={OBJECT_SORT_DROPDOWN_ID}
         dropdownHotkeyScope={hotkeyScope}
         dropdownOffset={{ y: 8 }}
         clickableComponent={

packages/twenty-front/src/modules/object-record/object-sort-dropdown/constants/ObjectSortDropdownId.ts

@@ -1 +1 @@
-export const ObjectSortDropdownId = 'sort-dropdown';
+export const OBJECT_SORT_DROPDOWN_ID = 'sort-dropdown';

packages/twenty-front/src/modules/object-record/record-board-deprecated/components/RecordBoardDeprecatedColumnEditTitleMenu.tsx

@@ -7,8 +7,11 @@ import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/Drop
 import { DropdownMenuSeparator } from '@/ui/layout/dropdown/components/DropdownMenuSeparator';
 import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem';
 import { MenuItemSelectColor } from '@/ui/navigation/menu-item/components/MenuItemSelectColor';
-import { mainColorNames, ThemeColor } from '@/ui/theme/constants/colors';
+import {
-import { textInputStyle } from '@/ui/theme/constants/effects';
+  MAIN_COLOR_NAMES,
+  ThemeColor,
+} from '@/ui/theme/constants/MainColorNames';
+import { TEXT_INPUT_STYLE } from '@/ui/theme/constants/TextInputStyle';
 
 import { BoardColumnContext } from '../contexts/BoardColumnContext';
 import { useRecordBoardDeprecated } from '../hooks/useRecordBoardDeprecated';
@@ -27,7 +30,7 @@ const StyledEditTitleContainer = styled.div`
 `;
 
 const StyledEditModeInput = styled.input`
-  ${textInputStyle}
+  ${TEXT_INPUT_STYLE}
 
   background: ${({ theme }) => theme.background.transparent.lighter};
   border-color: ${({ theme }) => theme.color.blue};
@@ -109,7 +112,7 @@ export const RecordBoardDeprecatedColumnEditTitleMenu = ({
         />
       </StyledEditTitleContainer>
       <DropdownMenuSeparator />
-      {mainColorNames.map((colorName) => (
+      {MAIN_COLOR_NAMES.map((colorName) => (
         <MenuItemSelectColor
           key={colorName}
           onClick={() => handleColorChange(colorName)}

packages/twenty-front/src/modules/object-record/record-board-deprecated/constants/BoardOptionsDropdownId.ts

@@ -1 +1 @@
-export const BoardOptionsDropdownId = 'board-options-dropdown-id';
+export const BOARD_OPTIONS_DROPDOWN_ID = 'board-options-dropdown-id';

packages/twenty-front/src/modules/object-record/record-board-deprecated/options/components/RecordBoardDeprecatedOptionsDropdown.tsx

@@ -1,4 +1,4 @@
-import { BoardOptionsDropdownId } from '@/object-record/record-board-deprecated/constants/BoardOptionsDropdownId';
+import { BOARD_OPTIONS_DROPDOWN_ID } from '@/object-record/record-board-deprecated/constants/BoardOptionsDropdownId';
 import { useViewBar } from '@/views/hooks/useViewBar';
 
 import { Dropdown } from '../../../../ui/layout/dropdown/components/Dropdown';
@@ -23,7 +23,7 @@ export const RecordBoardDeprecatedOptionsDropdown = ({
 
   return (
     <Dropdown
-      dropdownId={BoardOptionsDropdownId}
+      dropdownId={BOARD_OPTIONS_DROPDOWN_ID}
       clickableComponent={<RecordBoardDeprecatedOptionsDropdownButton />}
       dropdownComponents={
         <RecordBoardDeprecatedOptionsDropdownContent

packages/twenty-front/src/modules/object-record/record-board-deprecated/options/components/RecordBoardDeprecatedOptionsDropdownButton.tsx

@@ -1,10 +1,10 @@
-import { BoardOptionsDropdownId } from '@/object-record/record-board-deprecated/constants/BoardOptionsDropdownId';
+import { BOARD_OPTIONS_DROPDOWN_ID } from '@/object-record/record-board-deprecated/constants/BoardOptionsDropdownId';
 import { StyledHeaderDropdownButton } from '@/ui/layout/dropdown/components/StyledHeaderDropdownButton';
 import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
 
 export const RecordBoardDeprecatedOptionsDropdownButton = () => {
   const { isDropdownOpen, toggleDropdown } = useDropdown(
-    BoardOptionsDropdownId,
+    BOARD_OPTIONS_DROPDOWN_ID,
   );
 
   const handleClick = () => {

packages/twenty-front/src/modules/object-record/record-board-deprecated/options/components/RecordBoardDeprecatedOptionsDropdownContent.tsx

@@ -4,7 +4,7 @@ import { useRecoilState, useRecoilValue } from 'recoil';
 import { Key } from 'ts-key-enum';
 import { v4 } from 'uuid';
 
-import { BoardOptionsDropdownId } from '@/object-record/record-board-deprecated/constants/BoardOptionsDropdownId';
+import { BOARD_OPTIONS_DROPDOWN_ID } from '@/object-record/record-board-deprecated/constants/BoardOptionsDropdownId';
 import { useRecordBoardDeprecatedScopedStates } from '@/object-record/record-board-deprecated/hooks/internal/useRecordBoardDeprecatedScopedStates';
 import {
   IconBaselineDensitySmall,
@@ -106,7 +106,7 @@ export const RecordBoardDeprecatedOptionsDropdownContent = ({
       recordBoardScopeId: recordBoardId,
     });
 
-  const { closeDropdown } = useDropdown(BoardOptionsDropdownId);
+  const { closeDropdown } = useDropdown(BOARD_OPTIONS_DROPDOWN_ID);
 
   const handleReorderField: OnDragEndResponder = useCallback(
     (result) => {

packages/twenty-front/src/modules/object-record/record-board-deprecated/types/BoardColumnDefinition.ts

@@ -1,4 +1,4 @@
-import { ThemeColor } from '@/ui/theme/constants/colors';
+import { ThemeColor } from '@/ui/theme/constants/MainColorNames';
 
 export type BoardColumnDefinition = {
   id: string;

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

@@ -3,12 +3,12 @@ import styled from '@emotion/styled';
 import { useRecoilValue } from 'recoil';
 
 import { useRecordBoardStates } from '@/object-record/record-board/hooks/internal/useRecordBoardStates';
-import { grayScale } from '@/ui/theme/constants/colors';
+import { GRAY_SCALE } from '@/ui/theme/constants/GrayScale';
 
 const StyledText = styled.div`
   align-items: center;
   box-shadow: none;
-  color: ${grayScale.gray40};
+  color: ${GRAY_SCALE.gray40};
   display: flex;
   height: 32px;
   margin-left: ${({ theme }) => theme.spacing(8)};

packages/twenty-front/src/modules/object-record/record-board/types/RecordBoardColumnDefinition.ts

@@ -1,5 +1,5 @@
 import { RecordBoardColumnAction } from '@/object-record/record-board/types/RecordBoardColumnAction';
-import { ThemeColor } from '@/ui/theme/constants/colors';
+import { ThemeColor } from '@/ui/theme/constants/MainColorNames';
 
 export type RecordBoardColumnDefinition = {
   id: string;

packages/twenty-front/src/modules/object-record/record-field/types/FieldMetadata.ts

@@ -1,6 +1,6 @@
 import { RATING_VALUES } from '@/object-record/record-field/meta-types/constants/RatingValues';
 import { EntityForSelect } from '@/object-record/relation-picker/types/EntityForSelect';
-import { ThemeColor } from '@/ui/theme/constants/colors';
+import { ThemeColor } from '@/ui/theme/constants/MainColorNames';
 
 import { CurrencyCode } from './CurrencyCode';
 

packages/twenty-front/src/modules/object-record/record-index/hooks/useLoadRecordIndexTable.ts

@@ -6,7 +6,7 @@ import { turnSortsIntoOrderBy } from '@/object-record/object-sort-dropdown/utils
 import { turnObjectDropdownFilterIntoQueryFilter } from '@/object-record/record-filter/utils/turnObjectDropdownFilterIntoQueryFilter';
 import { useRecordTableStates } from '@/object-record/record-table/hooks/internal/useRecordTableStates';
 import { useRecordTable } from '@/object-record/record-table/hooks/useRecordTable';
-import { signInBackgroundMockCompanies } from '@/sign-in-background-mock/constants/signInBackgroundMockCompanies';
+import { SIGN_IN_BACKGROUND_MOCK_COMPANIES } from '@/sign-in-background-mock/constants/SignInBackgroundMockCompanies';
 
 import { useFindManyRecords } from '../../hooks/useFindManyRecords';
 
@@ -59,7 +59,7 @@ export const useLoadRecordIndexTable = (objectNameSingular: string) => {
     records:
       currentWorkspace?.activationStatus === 'active'
         ? records
-        : signInBackgroundMockCompanies,
+        : SIGN_IN_BACKGROUND_MOCK_COMPANIES,
     totalCount: totalCount || 0,
     loading,
     fetchMoreRecords,

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

@@ -9,7 +9,7 @@ import { RecordTableHeader } from '@/object-record/record-table/components/Recor
 import { RecordTableContext } from '@/object-record/record-table/contexts/RecordTableContext';
 import { useRecordTableStates } from '@/object-record/record-table/hooks/internal/useRecordTableStates';
 import { RecordTableScope } from '@/object-record/record-table/scopes/RecordTableScope';
-import { rgba } from '@/ui/theme/constants/colors';
+import { RGBA } from '@/ui/theme/constants/Rgba';
 
 const StyledTable = styled.table`
   border-radius: ${({ theme }) => theme.border.radius.sm};
@@ -87,8 +87,8 @@ const StyledTable = styled.table`
     box-shadow: ${({ theme }) =>
       `4px 0px 4px -4px ${
         theme.name === 'dark'
-          ? rgba(theme.grayScale.gray50, 0.8)
+          ? RGBA(theme.grayScale.gray50, 0.8)
-          : rgba(theme.grayScale.gray100, 0.25)
+          : RGBA(theme.grayScale.gray100, 0.25)
       } inset`};
   }
 

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

@@ -5,7 +5,7 @@ import { useRecoilCallback, useRecoilValue } from 'recoil';
 import { useLoadRecordIndexTable } from '@/object-record/record-index/hooks/useLoadRecordIndexTable';
 import { useRecordTable } from '@/object-record/record-table/hooks/useRecordTable';
 import { isFetchingMoreRecordsFamilyState } from '@/object-record/states/isFetchingMoreRecordsFamilyState';
-import { grayScale } from '@/ui/theme/constants/colors';
+import { GRAY_SCALE } from '@/ui/theme/constants/GrayScale';
 
 type RecordTableBodyFetchMoreLoaderProps = {
   objectNameSingular: string;
@@ -14,7 +14,7 @@ type RecordTableBodyFetchMoreLoaderProps = {
 const StyledText = styled.div`
   align-items: center;
   box-shadow: none;
-  color: ${grayScale.gray40};
+  color: ${GRAY_SCALE.gray40};
   display: flex;
   height: 32px;
   margin-left: ${({ theme }) => theme.spacing(8)};

packages/twenty-front/src/modules/object-record/record-table/constants/ColumnHeadDropdownId.ts

@@ -1 +1 @@
-export const ColumnHeadDropdownId = 'table-head-options-dropdown-id';
+export const COLUMN_HEAD_DROPDOWN_ID = 'table-head-options-dropdown-id';

packages/twenty-front/src/modules/object-record/record-table/constants/TableHiddenFieldsDropdownId.ts

@@ -1,2 +1,3 @@
 // We should either apply the constant all caps case or maybe define a more general enum to store those ids ?
-export const TableHiddenFieldsDropdownId = 'table-hidden-fields-dropdown-id';
+export const TABLE_HIDDEN_FIELDS_DROPDOWN_ID =
+  'table-hidden-fields-dropdown-id';

packages/twenty-front/src/modules/object-record/relation-picker/components/MultipleObjectRecordSelect.tsx

@@ -5,7 +5,7 @@ import debounce from 'lodash.debounce';
 
 import { MultipleObjectRecordOnClickOutsideEffect } from '@/object-record/relation-picker/components/MultipleObjectRecordOnClickOutsideEffect';
 import { MultipleObjectRecordSelectItem } from '@/object-record/relation-picker/components/MultipleObjectRecordSelectItem';
-import { MultiObjectRecordSelectSelectableListId } from '@/object-record/relation-picker/constants/MultiObjectRecordSelectSelectableListId';
+import { MULTI_OBJECT_RECORD_SELECT_SELECTABLE_LIST_ID } from '@/object-record/relation-picker/constants/MultiObjectRecordSelectSelectableListId';
 import {
   ObjectRecordForSelect,
   SelectedObjectRecordId,
@@ -140,7 +140,7 @@ export const MultipleObjectRecordSelect = ({
           ) : (
             <>
               <SelectableList
-                selectableListId={MultiObjectRecordSelectSelectableListId}
+                selectableListId={MULTI_OBJECT_RECORD_SELECT_SELECTABLE_LIST_ID}
                 selectableItemIdArray={selectableItemIds}
                 hotkeyScope={RelationPickerHotkeyScope.RelationPicker}
                 onEnter={(recordId) => {

packages/twenty-front/src/modules/object-record/relation-picker/components/MultipleObjectRecordSelectItem.tsx

@@ -2,7 +2,7 @@ import styled from '@emotion/styled';
 import { useRecoilValue } from 'recoil';
 import { v4 } from 'uuid';
 
-import { MultiObjectRecordSelectSelectableListId } from '@/object-record/relation-picker/constants/MultiObjectRecordSelectSelectableListId';
+import { MULTI_OBJECT_RECORD_SELECT_SELECTABLE_LIST_ID } from '@/object-record/relation-picker/constants/MultiObjectRecordSelectSelectableListId';
 import { ObjectRecordForSelect } from '@/object-record/relation-picker/hooks/useMultiObjectSearch';
 import { SelectableItem } from '@/ui/layout/selectable-list/components/SelectableItem';
 import { useSelectableList } from '@/ui/layout/selectable-list/hooks/useSelectableList';
@@ -24,7 +24,7 @@ export const MultipleObjectRecordSelectItem = ({
   selected: boolean;
 }) => {
   const { isSelectedItemIdSelector } = useSelectableList(
-    MultiObjectRecordSelectSelectableListId,
+    MULTI_OBJECT_RECORD_SELECT_SELECTABLE_LIST_ID,
   );
 
   const isSelectedByKeyboard = useRecoilValue(

packages/twenty-front/src/modules/object-record/relation-picker/constants/CreateButtonId.ts

@@ -0,0 +1 @@
+export const CREATE_BUTTON_ID = 'create-button';

packages/twenty-front/src/modules/object-record/relation-picker/constants/EmptyButtonId.ts

@@ -0,0 +1 @@
+export const EMPTY_BUTTON_ID = 'empty-button';

packages/twenty-front/src/modules/object-record/relation-picker/constants/MultiObjectRecordSelectSelectableListId.ts

@@ -1,2 +1,2 @@
-export const MultiObjectRecordSelectSelectableListId =
+export const MULTI_OBJECT_RECORD_SELECT_SELECTABLE_LIST_ID =
   'multi-object-record-select-selectable-list';

packages/twenty-front/src/modules/object-record/relation-picker/constants/index.ts

@@ -1,2 +0,0 @@
-export const CreateButtonId = 'create-button';
-export const EmptyButtonId = 'empty-button';

packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsCalendarTimeZoneSelect.tsx

@@ -1,4 +1,4 @@
-import { availableTimeZoneOptions } from '@/settings/accounts/constants/timeZoneSelectOptions';
+import { AVAILABLE_TIMEZONE_OPTIONS } from '@/settings/accounts/constants/AvailableTimezoneOptions';
 import { detectTimeZone } from '@/settings/accounts/utils/detectTimeZone';
 import { findAvailableTimeZoneOption } from '@/settings/accounts/utils/findAvailableTimeZoneOption';
 import { Select } from '@/ui/input/components/Select';
@@ -18,7 +18,7 @@ export const SettingsAccountsCalendarTimeZoneSelect = ({
     label="Time zone"
     fullWidth
     value={findAvailableTimeZoneOption(value)?.value}
-    options={availableTimeZoneOptions}
+    options={AVAILABLE_TIMEZONE_OPTIONS}
     onChange={onChange}
     withSearchInput
   />

packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsColorSettingCard.tsx

@@ -3,7 +3,10 @@ import styled from '@emotion/styled';
 import { ColorPickerButton } from '@/ui/input/button/components/ColorPickerButton';
 import { Card } from '@/ui/layout/card/components/Card';
 import { CardContent } from '@/ui/layout/card/components/CardContent';
-import { mainColorNames, ThemeColor } from '@/ui/theme/constants/colors';
+import {
+  MAIN_COLOR_NAMES,
+  ThemeColor,
+} from '@/ui/theme/constants/MainColorNames';
 
 type SettingsAccountsColorSettingCardProps = {
   onChange: (nextValue: ThemeColor) => void;
@@ -22,7 +25,7 @@ export const SettingsAccountsColorSettingCard = ({
 }: SettingsAccountsColorSettingCardProps) => (
   <Card>
     <StyledCardContent>
-      {mainColorNames.map((colorName) => (
+      {MAIN_COLOR_NAMES.map((colorName) => (
         <ColorPickerButton
           colorName={colorName}
           isSelected={value === colorName}

packages/twenty-front/src/modules/settings/accounts/constants/AvailableTimezoneOptions.ts

@@ -0,0 +1,18 @@
+/* eslint-disable @nx/workspace-max-consts-per-file */
+import { getTimezoneOffset } from 'date-fns-tz';
+
+import { AVAILABLE_TIME_ZONE_OPTIONS_BY_LABEL } from '@/settings/accounts/constants/AvailableTimezoneOptionsByLabel';
+
+export const AVAILABLE_TIMEZONE_OPTIONS = Object.values(
+  AVAILABLE_TIME_ZONE_OPTIONS_BY_LABEL,
+).sort((optionA, optionB) => {
+  // eslint-disable-next-line @typescript-eslint/naming-convention
+  const difference =
+    getTimezoneOffset(optionA.value) - getTimezoneOffset(optionB.value);
+
+  return difference === 0
+    ? // Sort alphabetically if the time zone offsets are the same.
+      optionA.label.localeCompare(optionB.label)
+    : // Sort by time zone offset if different.
+      difference;
+});

packages/twenty-front/src/modules/settings/accounts/constants/AvailableTimezoneOptionsByLabel.ts

@@ -1,10 +1,10 @@
-import { getTimezoneOffset } from 'date-fns-tz';
+/* eslint-disable @typescript-eslint/naming-convention */
-
+/* eslint-disable @nx/workspace-max-consts-per-file */
-import { ianaTimeZones } from '@/settings/accounts/constants/ianaTimeZones';
+import { IANA_TIME_ZONES } from '@/settings/accounts/constants/IanaTimeZones';
 import { formatTimeZoneLabel } from '@/settings/accounts/utils/formatTimeZoneLabel';
 import { SelectOption } from '@/ui/input/components/Select';
 
-export const availableTimeZoneOptionsByLabel = ianaTimeZones.reduce<
+export const AVAILABLE_TIME_ZONE_OPTIONS_BY_LABEL = IANA_TIME_ZONES.reduce<
   Record<string, SelectOption<string>>
 >((result, ianaTimeZone) => {
   const timeZoneLabel = formatTimeZoneLabel(ianaTimeZone);
@@ -28,16 +28,3 @@ export const availableTimeZoneOptionsByLabel = ianaTimeZones.reduce<
     [timeZoneLabel]: { label: timeZoneLabel, value: ianaTimeZone },
   };
 }, {});
-
-export const availableTimeZoneOptions = Object.values(
-  availableTimeZoneOptionsByLabel,
-).sort((optionA, optionB) => {
-  const difference =
-    getTimezoneOffset(optionA.value) - getTimezoneOffset(optionB.value);
-
-  return difference === 0
-    ? // Sort alphabetically if the time zone offsets are the same.
-      optionA.label.localeCompare(optionB.label)
-    : // Sort by time zone offset if different.
-      difference;
-});

packages/twenty-front/src/modules/settings/accounts/constants/IanaTimeZones.ts

@@ -2,7 +2,7 @@
  * Standard IANA time zones.
  * @see https://www.iana.org/time-zones
  */
-export const ianaTimeZones = [
+export const IANA_TIME_ZONES = [
   'Africa/Abidjan',
   'Africa/Accra',
   'Africa/Addis_Ababa',

packages/twenty-front/src/modules/settings/accounts/utils/findAvailableTimeZoneOption.ts

@@ -1,4 +1,4 @@
-import { availableTimeZoneOptionsByLabel } from '@/settings/accounts/constants/timeZoneSelectOptions';
+import { AVAILABLE_TIME_ZONE_OPTIONS_BY_LABEL } from '@/settings/accounts/constants/AvailableTimezoneOptionsByLabel';
 import { formatTimeZoneLabel } from '@/settings/accounts/utils/formatTimeZoneLabel';
 
 /**
@@ -7,4 +7,4 @@ import { formatTimeZoneLabel } from '@/settings/accounts/utils/formatTimeZoneLab
  * @returns the matching available IANA time zone select option or undefined
  */
 export const findAvailableTimeZoneOption = (value: string) =>
-  availableTimeZoneOptionsByLabel[formatTimeZoneLabel(value)];
+  AVAILABLE_TIME_ZONE_OPTIONS_BY_LABEL[formatTimeZoneLabel(value)];

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

@@ -1,6 +1,6 @@
 import styled from '@emotion/styled';
 
-import { objectSettingsWidth } from '@/settings/data-model/constants/objectSettings';
+import { OBJECT_SETTINGS_WIDTH } from '@/settings/data-model/constants/ObjectSettings';
 
 const StyledSettingsPageContainer = styled.div<{ width?: number }>`
   display: flex;
@@ -8,7 +8,8 @@ const StyledSettingsPageContainer = styled.div<{ width?: number }>`
   gap: ${({ theme }) => theme.spacing(8)};
   overflow: auto;
   padding: ${({ theme }) => theme.spacing(8)};
-  width: ${({ width }) => (width ? width + 'px' : objectSettingsWidth + 'px')};
+  width: ${({ width }) =>
+    width ? width + 'px' : OBJECT_SETTINGS_WIDTH + 'px'};
 `;
 
 export { StyledSettingsPageContainer as SettingsPageContainer };

packages/twenty-front/src/modules/settings/data-model/components/SettingsObjectFieldCurrencyForm.tsx

@@ -2,7 +2,7 @@ import { CurrencyCode } from '@/object-record/record-field/types/CurrencyCode';
 import { Select } from '@/ui/input/components/Select';
 import { CardContent } from '@/ui/layout/card/components/CardContent';
 
-import { settingsFieldCurrencyCodes } from '../constants/settingsFieldCurrencyCodes';
+import { SETTINGS_FIELD_CURRENCY_CODES } from '../constants/SettingsFieldCurrencyCodes';
 
 export type SettingsObjectFieldCurrencyFormValues = {
   currencyCode: CurrencyCode;
@@ -26,7 +26,7 @@ export const SettingsObjectFieldCurrencyForm = ({
       label="Unit"
       dropdownId="currency-unit-select"
       value={values.currencyCode}
-      options={Object.entries(settingsFieldCurrencyCodes).map(
+      options={Object.entries(SETTINGS_FIELD_CURRENCY_CODES).map(
         ([value, { label, Icon }]) => ({
           label,
           value: value as CurrencyCode,

packages/twenty-front/src/modules/settings/data-model/components/SettingsObjectFieldRelationForm.tsx

@@ -9,7 +9,7 @@ import { Select } from '@/ui/input/components/Select';
 import { TextInput } from '@/ui/input/components/TextInput';
 import { Field } from '~/generated-metadata/graphql';
 
-import { relationTypes } from '../constants/relationTypes';
+import { RELATION_TYPES } from '../constants/RelationTypes';
 import { RelationType } from '../types/RelationType';
 
 export type SettingsObjectFieldRelationFormValues = {
@@ -75,7 +75,7 @@ export const SettingsObjectFieldRelationForm = ({
           fullWidth
           disabled={disableRelationEdition}
           value={values.type}
-          options={Object.entries(relationTypes)
+          options={Object.entries(RELATION_TYPES)
             .filter(([value]) => 'ONE_TO_ONE' !== value)
             .map(([value, { label, Icon }]) => ({
               label,

packages/twenty-front/src/modules/settings/data-model/components/SettingsObjectFieldSelectForm.tsx

@@ -8,7 +8,10 @@ import { CardContent } from '@/ui/layout/card/components/CardContent';
 import { CardFooter } from '@/ui/layout/card/components/CardFooter';
 import { DraggableItem } from '@/ui/layout/draggable-list/components/DraggableItem';
 import { DraggableList } from '@/ui/layout/draggable-list/components/DraggableList';
-import { mainColorNames, ThemeColor } from '@/ui/theme/constants/colors';
+import {
+  MAIN_COLOR_NAMES,
+  ThemeColor,
+} from '@/ui/theme/constants/MainColorNames';
 import { moveArrayItem } from '~/utils/array/moveArrayItem';
 
 import { SettingsObjectFieldSelectFormOption } from '../types/SettingsObjectFieldSelectFormOption';
@@ -48,11 +51,11 @@ const StyledButton = styled(LightButton)`
 `;
 
 const getNextColor = (currentColor: ThemeColor) => {
-  const currentColorIndex = mainColorNames.findIndex(
+  const currentColorIndex = MAIN_COLOR_NAMES.findIndex(
     (color) => color === currentColor,
   );
-  const nextColorIndex = (currentColorIndex + 1) % mainColorNames.length;
+  const nextColorIndex = (currentColorIndex + 1) % MAIN_COLOR_NAMES.length;
-  return mainColorNames[nextColorIndex];
+  return MAIN_COLOR_NAMES[nextColorIndex];
 };
 
 export const SettingsObjectFieldSelectForm = ({

packages/twenty-front/src/modules/settings/data-model/components/SettingsObjectFieldSelectFormOptionRow.tsx

@@ -19,7 +19,7 @@ import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/Drop
 import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
 import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem';
 import { MenuItemSelectColor } from '@/ui/navigation/menu-item/components/MenuItemSelectColor';
-import { mainColorNames } from '@/ui/theme/constants/colors';
+import { MAIN_COLOR_NAMES } from '@/ui/theme/constants/MainColorNames';
 
 import { SettingsObjectFieldSelectFormOption } from '../types/SettingsObjectFieldSelectFormOption';
 
@@ -89,7 +89,7 @@ export const SettingsObjectFieldSelectFormOptionRow = ({
         dropdownComponents={
           <DropdownMenu>
             <DropdownMenuItemsContainer>
-              {mainColorNames.map((colorName) => (
+              {MAIN_COLOR_NAMES.map((colorName) => (
                 <MenuItemSelectColor
                   key={colorName}
                   onClick={() => {

packages/twenty-front/src/modules/settings/data-model/components/SettingsObjectFieldTypeSelectSection.tsx

@@ -1,13 +1,12 @@
 import styled from '@emotion/styled';
 
+import { RELATION_TYPES } from '@/settings/data-model/constants/RelationTypes';
+import { SETTINGS_FIELD_METADATA_TYPES } from '@/settings/data-model/constants/SettingsFieldMetadataTypes';
 import { H2Title } from '@/ui/display/typography/components/H2Title';
 import { Select } from '@/ui/input/components/Select';
 import { Section } from '@/ui/layout/section/components/Section';
 import { Field, FieldMetadataType } from '~/generated-metadata/graphql';
 
-import { relationTypes } from '../constants/relationTypes';
-import { settingsFieldMetadataTypes } from '../constants/settingsFieldMetadataTypes';
-
 import {
   SettingsObjectFieldCurrencyForm,
   SettingsObjectFieldCurrencyFormValues,
@@ -71,7 +70,7 @@ export const SettingsObjectFieldTypeSelectSection = ({
   const relationFormConfig = values.relation;
   const selectFormConfig = values.select;
 
-  const fieldTypeOptions = Object.entries(settingsFieldMetadataTypes)
+  const fieldTypeOptions = Object.entries(SETTINGS_FIELD_METADATA_TYPES)
     .filter(([key]) => !excludedFieldTypes?.includes(key as FieldMetadataType))
     .map(([key, dataTypeConfig]) => ({
       value: key as FieldMetadataType,
@@ -124,11 +123,11 @@ export const SettingsObjectFieldTypeSelectSection = ({
                   !!relationFormConfig.objectMetadataId && (
                     <>
                       <StyledRelationImage
-                        src={relationTypes[relationFormConfig.type].imageSrc}
+                        src={RELATION_TYPES[relationFormConfig.type].imageSrc}
                         flip={
-                          relationTypes[relationFormConfig.type].isImageFlipped
+                          RELATION_TYPES[relationFormConfig.type].isImageFlipped
                         }
-                        alt={relationTypes[relationFormConfig.type].label}
+                        alt={RELATION_TYPES[relationFormConfig.type].label}
                       />
                       <StyledSettingsObjectFieldPreview
                         fieldMetadata={{

packages/twenty-front/src/modules/settings/data-model/constants/DefaultDateValue.ts

@@ -0,0 +1 @@
+export const DEFAULT_DATE_VALUE = new Date();

packages/twenty-front/src/modules/settings/data-model/constants/ObjectSettings.ts

@@ -0,0 +1 @@
+export const OBJECT_SETTINGS_WIDTH = 512;

packages/twenty-front/src/modules/settings/data-model/constants/RelationTypes.ts

@@ -6,7 +6,7 @@ import OneToManySvg from '../assets/OneToMany.svg';
 import OneToOneSvg from '../assets/OneToOne.svg';
 import { RelationType } from '../types/RelationType';
 
-export const relationTypes: Record<
+export const RELATION_TYPES: Record<
   RelationType,
   {
     label: string;

packages/twenty-front/src/modules/settings/data-model/constants/SettingsFieldCurrencyCodes.ts

@@ -9,7 +9,7 @@ import {
 } from '@/ui/display/icon';
 import { IconComponent } from '@/ui/display/icon/types/IconComponent';
 
-export const settingsFieldCurrencyCodes: Record<
+export const SETTINGS_FIELD_CURRENCY_CODES: Record<
   CurrencyCode,
   { label: string; Icon: IconComponent }
 > = {

packages/twenty-front/src/modules/settings/data-model/constants/SettingsFieldMetadataTypes.ts

@@ -1,4 +1,5 @@
 import { CurrencyCode } from '@/object-record/record-field/types/CurrencyCode';
+import { DEFAULT_DATE_VALUE } from '@/settings/data-model/constants/DefaultDateValue';
 import {
   IconCalendarEvent,
   IconCheck,
@@ -17,10 +18,9 @@ import { IconTwentyStar } from '@/ui/display/icon/components/IconTwentyStar';
 import { IconComponent } from '@/ui/display/icon/types/IconComponent';
 import { FieldMetadataType } from '~/generated-metadata/graphql';
 
-const defaultDateValue = new Date();
+DEFAULT_DATE_VALUE.setFullYear(DEFAULT_DATE_VALUE.getFullYear() + 2);
-defaultDateValue.setFullYear(defaultDateValue.getFullYear() + 2);
 
-export const settingsFieldMetadataTypes: Partial<
+export const SETTINGS_FIELD_METADATA_TYPES: Partial<
   Record<
     FieldMetadataType,
     { label: string; Icon: IconComponent; defaultValue?: unknown }
@@ -60,7 +60,7 @@ export const settingsFieldMetadataTypes: Partial<
   [FieldMetadataType.DateTime]: {
     label: 'Date & Time',
     Icon: IconCalendarEvent,
-    defaultValue: defaultDateValue.toISOString(),
+    defaultValue: DEFAULT_DATE_VALUE.toISOString(),
   },
   [FieldMetadataType.Select]: {
     label: 'Select',

packages/twenty-front/src/modules/settings/data-model/constants/objectSettings.ts

@@ -1 +0,0 @@
-export const objectSettingsWidth = 512;

packages/twenty-front/src/modules/settings/data-model/hooks/useFieldPreview.ts

@@ -1,8 +1,8 @@
 import { useObjectMetadataItemForSettings } from '@/object-metadata/hooks/useObjectMetadataItemForSettings';
+import { SETTINGS_FIELD_METADATA_TYPES } from '@/settings/data-model/constants/SettingsFieldMetadataTypes';
 import { useIcons } from '@/ui/display/icon/hooks/useIcons';
 import { Field, FieldMetadataType } from '~/generated-metadata/graphql';
 
-import { settingsFieldMetadataTypes } from '../constants/settingsFieldMetadataTypes';
 import { SettingsObjectFieldSelectFormOption } from '../types/SettingsObjectFieldSelectFormOption';
 
 import { useFieldPreviewValue } from './useFieldPreviewValue';
@@ -46,7 +46,7 @@ export const useFieldPreview = ({
     });
 
   const settingsFieldMetadataType =
-    settingsFieldMetadataTypes[fieldMetadata.type];
+    SETTINGS_FIELD_METADATA_TYPES[fieldMetadata.type];
 
   const defaultSelectValue = selectOptions?.[0];
   const selectValue =

packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectFieldDataType.tsx

@@ -1,12 +1,11 @@
 import { css, useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 
+import { SETTINGS_FIELD_METADATA_TYPES } from '@/settings/data-model/constants/SettingsFieldMetadataTypes';
 import { IconTwentyStar } from '@/ui/display/icon/components/IconTwentyStar';
 import { IconComponent } from '@/ui/display/icon/types/IconComponent';
 import { FieldMetadataType } from '~/generated-metadata/graphql';
 
-import { settingsFieldMetadataTypes } from '../../constants/settingsFieldMetadataTypes';
-
 type SettingsObjectFieldDataTypeProps = {
   onClick?: () => void;
   Icon?: IconComponent;
@@ -50,8 +49,8 @@ const StyledLabelContainer = styled.div`
 export const SettingsObjectFieldDataType = ({
   onClick,
   value,
-  Icon = settingsFieldMetadataTypes[value]?.Icon ?? IconTwentyStar,
+  Icon = SETTINGS_FIELD_METADATA_TYPES[value]?.Icon ?? IconTwentyStar,
-  label = settingsFieldMetadataTypes[value]?.label,
+  label = SETTINGS_FIELD_METADATA_TYPES[value]?.label,
 }: SettingsObjectFieldDataTypeProps) => {
   const theme = useTheme();
 

packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectFieldItemTableRow.tsx

@@ -6,14 +6,14 @@ import styled from '@emotion/styled';
 import { useGetRelationMetadata } from '@/object-metadata/hooks/useGetRelationMetadata';
 import { FieldMetadataItem } from '@/object-metadata/types/FieldMetadataItem';
 import { getObjectSlug } from '@/object-metadata/utils/getObjectSlug';
+import { SETTINGS_FIELD_METADATA_TYPES } from '@/settings/data-model/constants/SettingsFieldMetadataTypes';
 import { FieldIdentifierType } from '@/settings/data-model/types/FieldIdentifierType';
 import { useIcons } from '@/ui/display/icon/hooks/useIcons';
 import { TableCell } from '@/ui/layout/table/components/TableCell';
 import { TableRow } from '@/ui/layout/table/components/TableRow';
 import { Nullable } from '~/types/Nullable';
 
-import { relationTypes } from '../../constants/relationTypes';
+import { RELATION_TYPES } from '../../constants/RelationTypes';
-import { settingsFieldMetadataTypes } from '../../constants/settingsFieldMetadataTypes';
 
 import { SettingsObjectFieldDataType } from './SettingsObjectFieldDataType';
 
@@ -51,7 +51,7 @@ export const SettingsObjectFieldItemTableRow = ({
 
   // TODO: parse with zod and merge types with FieldType (create a subset of FieldType for example)
   const fieldDataTypeIsSupported =
-    fieldMetadataItem.type in settingsFieldMetadataTypes;
+    fieldMetadataItem.type in SETTINGS_FIELD_METADATA_TYPES;
 
   const getRelationMetadata = useGetRelationMetadata();
 
@@ -64,7 +64,7 @@ export const SettingsObjectFieldItemTableRow = ({
   if (!fieldDataTypeIsSupported) return null;
 
   const RelationIcon = relationType
-    ? relationTypes[relationType].Icon
+    ? RELATION_TYPES[relationType].Icon
     : undefined;
 
   return (

packages/twenty-front/src/modules/settings/data-model/types/SettingsObjectFieldSelectFormOption.ts

@@ -1,4 +1,4 @@
-import { ThemeColor } from '@/ui/theme/constants/colors';
+import { ThemeColor } from '@/ui/theme/constants/MainColorNames';
 
 export type SettingsObjectFieldSelectFormOption = {
   color: ThemeColor;

packages/twenty-front/src/modules/settings/developers/constants/ExpirationDates.ts

@@ -1,4 +1,4 @@
-export const ExpirationDates: {
+export const EXPIRATION_DATES: {
   value: number | null;
   label: string;
 }[] = [

packages/twenty-front/src/modules/sign-in-background-mock/components/SignInBackgroundMockContainerEffect.tsx

@@ -4,12 +4,10 @@ import { useObjectMetadataItem } from '@/object-metadata/hooks/useObjectMetadata
 import { useObjectNameSingularFromPlural } from '@/object-metadata/hooks/useObjectNameSingularFromPlural';
 import { useRecordActionBar } from '@/object-record/record-action-bar/hooks/useRecordActionBar';
 import { useRecordTable } from '@/object-record/record-table/hooks/useRecordTable';
-import {
+import { SIGN_IN_BACKGROUND_MOCK_COLUMN_DEFINITIONS } from '@/sign-in-background-mock/constants/SignInBackgroundMockColumnDefinitions';
-  signInBackgroundMockColumnDefinitions,
+import { SIGN_IN_BACKGROUND_MOCK_FILTER_DEFINITIONS } from '@/sign-in-background-mock/constants/SignInBackgroundMockFilterDefinitions';
-  signInBackgroundMockFilterDefinitions,
+import { SIGN_IN_BACKGROUND_MOCK_SORT_DEFINITIONS } from '@/sign-in-background-mock/constants/SignInBackgroundMockSortDefinitions';
-  signInBackgroundMockSortDefinitions,
+import { SIGN_IN_BACKGROUND_MOCK_VIEW_FIELDS } from '@/sign-in-background-mock/constants/SignInBackgroundMockViewFields';
-} from '@/sign-in-background-mock/constants/signInBackgroundMockDefinitions';
-import { signInBackgroundMockViewFields } from '@/sign-in-background-mock/constants/signInBackgroundMockViewFields';
 import { useViewBar } from '@/views/hooks/useViewBar';
 import { mapViewFieldsToColumnDefinitions } from '@/views/utils/mapViewFieldsToColumnDefinitions';
 
@@ -52,16 +50,16 @@ export const SignInBackgroundMockContainerEffect = ({
   useEffect(() => {
     setViewObjectMetadataId?.(objectMetadataItem.id);
 
-    setAvailableSortDefinitions?.(signInBackgroundMockSortDefinitions);
+    setAvailableSortDefinitions?.(SIGN_IN_BACKGROUND_MOCK_SORT_DEFINITIONS);
-    setAvailableFilterDefinitions?.(signInBackgroundMockFilterDefinitions);
+    setAvailableFilterDefinitions?.(SIGN_IN_BACKGROUND_MOCK_FILTER_DEFINITIONS);
-    setAvailableFieldDefinitions?.(signInBackgroundMockColumnDefinitions);
+    setAvailableFieldDefinitions?.(SIGN_IN_BACKGROUND_MOCK_COLUMN_DEFINITIONS);
 
-    setAvailableTableColumns(signInBackgroundMockColumnDefinitions);
+    setAvailableTableColumns(SIGN_IN_BACKGROUND_MOCK_COLUMN_DEFINITIONS);
 
     setTableColumns(
       mapViewFieldsToColumnDefinitions({
-        viewFields: signInBackgroundMockViewFields,
+        viewFields: SIGN_IN_BACKGROUND_MOCK_VIEW_FIELDS,
-        columnDefinitions: signInBackgroundMockColumnDefinitions,
+        columnDefinitions: SIGN_IN_BACKGROUND_MOCK_COLUMN_DEFINITIONS,
       }),
     );
   }, [

packages/twenty-front/src/modules/sign-in-background-mock/constants/SignInBackgroundMockColumnDefinitions.ts

@@ -1,10 +1,8 @@
-import { FilterDefinition } from '@/object-record/object-filter-dropdown/types/FilterDefinition';
-import { SortDefinition } from '@/object-record/object-sort-dropdown/types/SortDefinition';
 import { FieldMetadata } from '@/object-record/record-field/types/FieldMetadata';
 import { ColumnDefinition } from '@/object-record/record-table/types/ColumnDefinition';
 import { filterAvailableTableColumns } from '@/object-record/utils/filterAvailableTableColumns';
 
-export const signInBackgroundMockColumnDefinitions = (
+export const SIGN_IN_BACKGROUND_MOCK_COLUMN_DEFINITIONS = (
   [
     {
       position: 0,
@@ -254,95 +252,3 @@ export const signInBackgroundMockColumnDefinitions = (
     },
   ] satisfies ColumnDefinition<FieldMetadata>[]
 ).filter(filterAvailableTableColumns);
-
-export const signInBackgroundMockFilterDefinitions = [
-  {
-    fieldMetadataId: '20202020-5e4e-4007-a630-8a2617914889',
-    label: 'Domain Name',
-    iconName: 'IconLink',
-    type: 'TEXT',
-  },
-  {
-    fieldMetadataId: '20202020-7fbd-41ad-b64d-25a15ff62f04',
-    label: 'Employees',
-    iconName: 'IconUsers',
-    type: 'NUMBER',
-  },
-  {
-    fieldMetadataId: '20202020-6d30-4111-9f40-b4301906fd3c',
-    label: 'Name',
-    iconName: 'IconBuildingSkyscraper',
-    type: 'TEXT',
-  },
-  {
-    fieldMetadataId: '20202020-ad10-4117-a039-3f04b7a5f939',
-    label: 'Address',
-    iconName: 'IconMap',
-    type: 'TEXT',
-  },
-  {
-    fieldMetadataId: '20202020-0739-495d-8e70-c0807f6b2268',
-    label: 'Account Owner',
-    iconName: 'IconUserCircle',
-    relationObjectMetadataNamePlural: 'workspaceMembers',
-    relationObjectMetadataNameSingular: 'workspaceMember',
-    type: 'RELATION',
-  },
-  {
-    fieldMetadataId: '20202020-4dc2-47c9-bb15-6e6f19ba9e46',
-    label: 'Creation date',
-    iconName: 'IconCalendar',
-    type: 'DATE_TIME',
-  },
-  {
-    fieldMetadataId: '20202020-a61d-4b78-b998-3fd88b4f73a1',
-    label: 'Linkedin',
-    iconName: 'IconBrandLinkedin',
-    type: 'LINK',
-  },
-  {
-    fieldMetadataId: '20202020-46e3-479a-b8f4-77137c74daa6',
-    label: 'X',
-    iconName: 'IconBrandX',
-    type: 'LINK',
-  },
-  {
-    fieldMetadataId: '20202020-4a5a-466f-92d9-c3870d9502a9',
-    label: 'ARR',
-    iconName: 'IconMoneybag',
-    type: 'CURRENCY',
-  },
-] as FilterDefinition[];
-
-export const signInBackgroundMockSortDefinitions = [
-  {
-    fieldMetadataId: '20202020-5e4e-4007-a630-8a2617914889',
-    label: 'Domain Name',
-    iconName: 'IconLink',
-  },
-  {
-    fieldMetadataId: '20202020-7fbd-41ad-b64d-25a15ff62f04',
-    label: 'Employees',
-    iconName: 'IconUsers',
-  },
-  {
-    fieldMetadataId: '20202020-6d30-4111-9f40-b4301906fd3c',
-    label: 'Name',
-    iconName: 'IconBuildingSkyscraper',
-  },
-  {
-    fieldMetadataId: '20202020-ad10-4117-a039-3f04b7a5f939',
-    label: 'Address',
-    iconName: 'IconMap',
-  },
-  {
-    fieldMetadataId: '20202020-4dc2-47c9-bb15-6e6f19ba9e46',
-    label: 'Creation date',
-    iconName: 'IconCalendar',
-  },
-  {
-    fieldMetadataId: '20202020-9e9f-4235-98b2-c76f3e2d281e',
-    label: 'ICP',
-    iconName: 'IconTarget',
-  },
-] as SortDefinition[];

packages/twenty-front/src/modules/sign-in-background-mock/constants/SignInBackgroundMockCompanies.ts

@@ -1,4 +1,4 @@
-export const signInBackgroundMockCompanies = [
+export const SIGN_IN_BACKGROUND_MOCK_COMPANIES = [
   {
     __typename: 'Company',
     id: '04b2e9f5-0713-40a5-8216-82802401d33e',

packages/twenty-front/src/modules/sign-in-background-mock/constants/SignInBackgroundMockFilterDefinitions.ts

@@ -0,0 +1,60 @@
+import { FilterDefinition } from '@/object-record/object-filter-dropdown/types/FilterDefinition';
+
+export const SIGN_IN_BACKGROUND_MOCK_FILTER_DEFINITIONS = [
+  {
+    fieldMetadataId: '20202020-5e4e-4007-a630-8a2617914889',
+    label: 'Domain Name',
+    iconName: 'IconLink',
+    type: 'TEXT',
+  },
+  {
+    fieldMetadataId: '20202020-7fbd-41ad-b64d-25a15ff62f04',
+    label: 'Employees',
+    iconName: 'IconUsers',
+    type: 'NUMBER',
+  },
+  {
+    fieldMetadataId: '20202020-6d30-4111-9f40-b4301906fd3c',
+    label: 'Name',
+    iconName: 'IconBuildingSkyscraper',
+    type: 'TEXT',
+  },
+  {
+    fieldMetadataId: '20202020-ad10-4117-a039-3f04b7a5f939',
+    label: 'Address',
+    iconName: 'IconMap',
+    type: 'TEXT',
+  },
+  {
+    fieldMetadataId: '20202020-0739-495d-8e70-c0807f6b2268',
+    label: 'Account Owner',
+    iconName: 'IconUserCircle',
+    relationObjectMetadataNamePlural: 'workspaceMembers',
+    relationObjectMetadataNameSingular: 'workspaceMember',
+    type: 'RELATION',
+  },
+  {
+    fieldMetadataId: '20202020-4dc2-47c9-bb15-6e6f19ba9e46',
+    label: 'Creation date',
+    iconName: 'IconCalendar',
+    type: 'DATE_TIME',
+  },
+  {
+    fieldMetadataId: '20202020-a61d-4b78-b998-3fd88b4f73a1',
+    label: 'Linkedin',
+    iconName: 'IconBrandLinkedin',
+    type: 'LINK',
+  },
+  {
+    fieldMetadataId: '20202020-46e3-479a-b8f4-77137c74daa6',
+    label: 'X',
+    iconName: 'IconBrandX',
+    type: 'LINK',
+  },
+  {
+    fieldMetadataId: '20202020-4a5a-466f-92d9-c3870d9502a9',
+    label: 'ARR',
+    iconName: 'IconMoneybag',
+    type: 'CURRENCY',
+  },
+] as FilterDefinition[];

packages/twenty-front/src/modules/sign-in-background-mock/constants/SignInBackgroundMockSortDefinitions.ts

@@ -0,0 +1,34 @@
+import { SortDefinition } from '@/object-record/object-sort-dropdown/types/SortDefinition';
+
+export const SIGN_IN_BACKGROUND_MOCK_SORT_DEFINITIONS = [
+  {
+    fieldMetadataId: '20202020-5e4e-4007-a630-8a2617914889',
+    label: 'Domain Name',
+    iconName: 'IconLink',
+  },
+  {
+    fieldMetadataId: '20202020-7fbd-41ad-b64d-25a15ff62f04',
+    label: 'Employees',
+    iconName: 'IconUsers',
+  },
+  {
+    fieldMetadataId: '20202020-6d30-4111-9f40-b4301906fd3c',
+    label: 'Name',
+    iconName: 'IconBuildingSkyscraper',
+  },
+  {
+    fieldMetadataId: '20202020-ad10-4117-a039-3f04b7a5f939',
+    label: 'Address',
+    iconName: 'IconMap',
+  },
+  {
+    fieldMetadataId: '20202020-4dc2-47c9-bb15-6e6f19ba9e46',
+    label: 'Creation date',
+    iconName: 'IconCalendar',
+  },
+  {
+    fieldMetadataId: '20202020-9e9f-4235-98b2-c76f3e2d281e',
+    label: 'ICP',
+    iconName: 'IconTarget',
+  },
+] as SortDefinition[];

packages/twenty-front/src/modules/sign-in-background-mock/constants/SignInBackgroundMockViewFields.ts

@@ -1,6 +1,6 @@
 import { ViewField } from '@/views/types/ViewField';
 
-export const signInBackgroundMockViewFields = [
+export const SIGN_IN_BACKGROUND_MOCK_VIEW_FIELDS = [
   {
     __typename: 'ViewField',
     id: '5168be09-f200-40f5-9e04-29d607de06e5',

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

@@ -2,7 +2,7 @@ import styled from '@emotion/styled';
 
 import { useSpreadsheetImportInternal } from '@/spreadsheet-import/hooks/useSpreadsheetImportInternal';
 import { Modal } from '@/ui/layout/modal/components/Modal';
-import { MOBILE_VIEWPORT } from '@/ui/theme/constants/theme';
+import { MOBILE_VIEWPORT } from '@/ui/theme/constants/MobileViewport';
 
 import { ModalCloseButton } from './ModalCloseButton';
 

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

@@ -3,14 +3,14 @@ import DataGrid, { DataGridProps } from 'react-data-grid';
 import styled from '@emotion/styled';
 
 import { useSpreadsheetImportInternal } from '@/spreadsheet-import/hooks/useSpreadsheetImportInternal';
-import { rgba } from '@/ui/theme/constants/colors';
+import { RGBA } from '@/ui/theme/constants/Rgba';
 
 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)};
+    RGBA(theme.color.red, 0.4)};
   --rdg-font-size: ${({ theme }) => theme.font.size.sm};
   --rdg-frozen-cell-box-shadow: none;
   --rdg-header-background-color: ${({ theme }) => theme.background.primary};
@@ -67,15 +67,15 @@ const StyledDataGrid = styled(DataGrid)`
   }
 
   .rdg-cell-error {
-    background-color: ${({ theme }) => rgba(theme.color.red, 0.08)};
+    background-color: ${({ theme }) => RGBA(theme.color.red, 0.08)};
   }
 
   .rdg-cell-warning {
-    background-color: ${({ theme }) => rgba(theme.color.orange, 0.08)};
+    background-color: ${({ theme }) => RGBA(theme.color.orange, 0.08)};
   }
 
   .rdg-cell-info {
-    background-color: ${({ theme }) => rgba(theme.color.blue, 0.08)};
+    background-color: ${({ theme }) => RGBA(theme.color.blue, 0.08)};
   }
 
   .rdg-static {

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

@@ -5,7 +5,7 @@ import { useSpreadsheetImportInternal } from '@/spreadsheet-import/hooks/useSpre
 import { Modal } from '@/ui/layout/modal/components/Modal';
 import { StepBar } from '@/ui/navigation/step-bar/components/StepBar';
 import { useStepBar } from '@/ui/navigation/step-bar/hooks/useStepBar';
-import { MOBILE_VIEWPORT } from '@/ui/theme/constants/theme';
+import { MOBILE_VIEWPORT } from '@/ui/theme/constants/MobileViewport';
 
 import { UploadFlow } from './UploadFlow';
 

packages/twenty-front/src/modules/ui/display/color/components/ColorSample.tsx

@@ -1,7 +1,7 @@
 import { css } from '@emotion/react';
 import styled from '@emotion/styled';
 
-import { ThemeColor } from '@/ui/theme/constants/colors';
+import { ThemeColor } from '@/ui/theme/constants/MainColorNames';
 
 export type ColorSampleVariant = 'default' | 'pipeline';
 

packages/twenty-front/src/modules/ui/display/status/components/Status.tsx

@@ -1,6 +1,6 @@
 import styled from '@emotion/styled';
 
-import { ThemeColor } from '@/ui/theme/constants/colors';
+import { ThemeColor } from '@/ui/theme/constants/MainColorNames';
 import { themeColorSchema } from '@/ui/theme/utils/themeColorSchema';
 
 const StyledStatus = styled.h3<{

packages/twenty-front/src/modules/ui/display/status/components/__stories__/Status.stories.tsx

@@ -1,7 +1,10 @@
 import { Meta, StoryObj } from '@storybook/react';
 import { expect, fn, userEvent, within } from '@storybook/test';
 
-import { mainColorNames, ThemeColor } from '@/ui/theme/constants/colors';
+import {
+  MAIN_COLOR_NAMES,
+  ThemeColor,
+} from '@/ui/theme/constants/MainColorNames';
 import { CatalogDecorator } from '~/testing/decorators/CatalogDecorator';
 import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
 import { CatalogStory } from '~/testing/types';
@@ -55,7 +58,7 @@ export const Catalog: CatalogStory<Story, typeof Status> = {
       dimensions: [
         {
           name: 'colors',
-          values: mainColorNames,
+          values: MAIN_COLOR_NAMES,
           props: (color: ThemeColor) => ({ color }),
         },
       ],

packages/twenty-front/src/modules/ui/display/tag/components/Tag.tsx

@@ -2,7 +2,7 @@ import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 
 import { IconComponent } from '@/ui/display/icon/types/IconComponent';
-import { ThemeColor } from '@/ui/theme/constants/colors';
+import { ThemeColor } from '@/ui/theme/constants/MainColorNames';
 import { themeColorSchema } from '@/ui/theme/utils/themeColorSchema';
 
 const StyledTag = styled.h3<{

packages/twenty-front/src/modules/ui/display/tag/components/__stories__/Tag.stories.tsx

@@ -1,7 +1,10 @@
 import { Meta, StoryObj } from '@storybook/react';
 import { expect, fn, userEvent, within } from '@storybook/test';
 
-import { mainColorNames, ThemeColor } from '@/ui/theme/constants/colors';
+import {
+  MAIN_COLOR_NAMES,
+  ThemeColor,
+} from '@/ui/theme/constants/MainColorNames';
 import { CatalogDecorator } from '~/testing/decorators/CatalogDecorator';
 import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
 import { CatalogStory } from '~/testing/types';
@@ -55,7 +58,7 @@ export const Catalog: CatalogStory<Story, typeof Tag> = {
       dimensions: [
         {
           name: 'colors',
-          values: mainColorNames,
+          values: MAIN_COLOR_NAMES,
           props: (color: ThemeColor) => ({ color }),
         },
       ],

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

@@ -1,7 +1,7 @@
 import { PlacesType, PositionStrategy, Tooltip } from 'react-tooltip';
 import styled from '@emotion/styled';
 
-import { rgba } from '../../theme/constants/colors';
+import { RGBA } from '@/ui/theme/constants/Rgba';
 
 export enum TooltipPosition {
   Top = 'top',
@@ -12,7 +12,7 @@ export enum TooltipPosition {
 
 const StyledAppTooltip = styled(Tooltip)`
   backdrop-filter: ${({ theme }) => theme.blur.strong};
-  background-color: ${({ theme }) => rgba(theme.color.gray80, 0.8)};
+  background-color: ${({ theme }) => RGBA(theme.color.gray80, 0.8)};
   border-radius: ${({ theme }) => theme.border.radius.sm};
 
   box-shadow: ${({ theme }) => theme.boxShadow.light};

packages/twenty-front/src/modules/ui/feedback/snack-bar-manager/components/SnackBar.tsx

@@ -7,7 +7,7 @@ import {
   ProgressBar,
   ProgressBarControls,
 } from '@/ui/feedback/progress-bar/components/ProgressBar';
-import { rgba } from '@/ui/theme/constants/colors';
+import { RGBA } from '@/ui/theme/constants/Rgba';
 
 import { usePausableTimeout } from '../hooks/usePausableTimeout';
 
@@ -85,7 +85,7 @@ const StyledCloseButton = styled.button<Pick<SnackBarProps, 'variant'>>`
   width: 24px;
 
   &:hover {
-    background-color: ${({ theme }) => rgba(theme.grayScale.gray0, 0.1)};
+    background-color: ${({ theme }) => RGBA(theme.grayScale.gray0, 0.1)};
   }
 `;
 
@@ -167,7 +167,7 @@ export const SnackBar = ({
         <ProgressBar
           ref={progressBarRef}
           barHeight={5}
-          barColor={rgba(theme.grayScale.gray0, 0.3)}
+          barColor={RGBA(theme.grayScale.gray0, 0.3)}
           duration={duration}
         />
       </StyledProgressBarContainer>

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

@@ -1,11 +1,11 @@
 import styled from '@emotion/styled';
 
-import { overlayBackground } from '@/ui/theme/constants/effects';
+import { OVERLAY_BACKGROUND } from '@/ui/theme/constants/OverlayBackground';
 
 const StyledFieldInputOverlay = styled.div`
   border: ${({ theme }) => `1px solid ${theme.border.color.light}`};
   border-radius: ${({ theme }) => theme.border.radius.sm};
-  ${overlayBackground}
+  ${OVERLAY_BACKGROUND}
   display: flex;
   height: 32px;
   margin: -1px;

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

@@ -3,7 +3,7 @@ import TextareaAutosize from 'react-textarea-autosize';
 import styled from '@emotion/styled';
 
 import { useRegisterInputEvents } from '@/object-record/record-field/meta-types/input/hooks/useRegisterInputEvents';
-import { textInputStyle } from '@/ui/theme/constants/effects';
+import { TEXT_INPUT_STYLE } from '@/ui/theme/constants/TextInputStyle';
 
 export type TextAreaInputProps = {
   disabled?: boolean;
@@ -21,7 +21,7 @@ export type TextAreaInputProps = {
 };
 
 const StyledTextArea = styled(TextareaAutosize)`
-  ${textInputStyle}
+  ${TEXT_INPUT_STYLE}
   width: 100%;
   resize: none;
   box-shadow: ${({ theme }) => theme.boxShadow.strong};

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

@@ -2,11 +2,11 @@ import { ChangeEvent, useEffect, useRef, useState } from 'react';
 import styled from '@emotion/styled';
 
 import { useRegisterInputEvents } from '@/object-record/record-field/meta-types/input/hooks/useRegisterInputEvents';
-import { textInputStyle } from '@/ui/theme/constants/effects';
+import { TEXT_INPUT_STYLE } from '@/ui/theme/constants/TextInputStyle';
 
 export const StyledInput = styled.input`
   margin: 0;
-  ${textInputStyle}
+  ${TEXT_INPUT_STYLE}
   width: 100%;
 `;
 

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

@@ -2,7 +2,7 @@ import * as React from 'react';
 import styled from '@emotion/styled';
 import { motion } from 'framer-motion';
 
-import { rgba } from '@/ui/theme/constants/colors';
+import { RGBA } from '@/ui/theme/constants/Rgba';
 
 import { RadioGroup } from './RadioGroup';
 
@@ -58,7 +58,7 @@ const StyledRadioInput = styled(motion.input)<RadioInputProps>`
         if (!checked) {
           return theme.background.tertiary;
         }
-        return rgba(theme.color.blue, 0.12);
+        return RGBA(theme.color.blue, 0.12);
       }};
   }
 

packages/twenty-front/src/modules/ui/input/components/internal/date/components/InternalDatePicker.tsx

@@ -5,7 +5,7 @@ import styled from '@emotion/styled';
 import { IconCalendarX } from '@/ui/display/icon';
 import { MenuItemLeftContent } from '@/ui/navigation/menu-item/internals/components/MenuItemLeftContent';
 import { StyledHoverableMenuItemBase } from '@/ui/navigation/menu-item/internals/components/StyledMenuItemBase';
-import { overlayBackground } from '@/ui/theme/constants/effects';
+import { OVERLAY_BACKGROUND } from '@/ui/theme/constants/OverlayBackground';
 
 import 'react-datepicker/dist/react-datepicker.css';
 
@@ -90,7 +90,7 @@ const StyledContainer = styled.div`
   & .react-datepicker__month-dropdown,
   & .react-datepicker__year-dropdown {
     border: ${({ theme }) => theme.border.color.light};
-    ${overlayBackground}
+    ${OVERLAY_BACKGROUND}
     overflow-y: scroll;
     top: ${({ theme }) => theme.spacing(2)};
   }

packages/twenty-front/src/modules/ui/layout/animated-placeholder/components/AnimatedPlaceholder.tsx

@@ -4,12 +4,10 @@ import styled from '@emotion/styled';
 import { motion, useMotionValue, useTransform } from 'framer-motion';
 import { animate } from 'framer-motion';
 
-import {
+import { BACKGROUND } from '@/ui/layout/animated-placeholder/constants/Background';
-  Background,
+import { DARK_BACKGROUND } from '@/ui/layout/animated-placeholder/constants/DarkBackground';
-  DarkBackground,
+import { DARK_MOVING_IMAGE } from '@/ui/layout/animated-placeholder/constants/DarkMovingImage';
-  DarkMovingImage,
+import { MOVING_IMAGE } from '@/ui/layout/animated-placeholder/constants/MovingImage';
-  MovingImage,
-} from '@/ui/layout/animated-placeholder/constants/AnimatedImages';
 
 const StyledContainer = styled.div`
   display: flex;
@@ -39,7 +37,7 @@ const StyledMovingImage = styled(motion.img)<StyledImageProps>`
 `;
 
 interface AnimatedPlaceholderProps {
-  type: keyof typeof Background | keyof typeof MovingImage;
+  type: keyof typeof BACKGROUND | keyof typeof MOVING_IMAGE;
 }
 
 const AnimatedPlaceholder = ({ type }: AnimatedPlaceholderProps) => {
@@ -89,12 +87,14 @@ const AnimatedPlaceholder = ({ type }: AnimatedPlaceholderProps) => {
   return (
     <StyledContainer>
       <StyledBackgroundImage
-        src={theme.name === 'dark' ? DarkBackground[type] : Background[type]}
+        src={theme.name === 'dark' ? DARK_BACKGROUND[type] : BACKGROUND[type]}
         alt="Background"
         type={type}
       />
       <StyledMovingImage
-        src={theme.name === 'dark' ? DarkMovingImage[type] : MovingImage[type]}
+        src={
+          theme.name === 'dark' ? DARK_MOVING_IMAGE[type] : MOVING_IMAGE[type]
+        }
         alt="Moving"
         style={{ translateX, translateY }}
         transition={{ type: 'spring', stiffness: 100, damping: 10 }}

packages/twenty-front/src/modules/ui/layout/animated-placeholder/constants/AnimatedImages.ts

@@ -1,59 +0,0 @@
-export const Background: Record<string, string> = {
-  noFile: '/images/placeholders/background/no_file_bg.png',
-  noNote: '/images/placeholders/background/no_note_bg.png',
-  noRecord: '/images/placeholders/background/no_record_bg.png',
-  noMatchRecord: '/images/placeholders/background/no_match_record_bg.png',
-  noTask: '/images/placeholders/background/no_task_bg.png',
-  errorIndex: '/images/placeholders/background/error_index_bg.png',
-  emptyTimeline: '/images/placeholders/background/empty_timeline_bg.png',
-  loadingMessages: '/images/placeholders/background/loading_messages_bg.png',
-  loadingAccounts: '/images/placeholders/background/loading_accounts_bg.png',
-  emptyInbox: '/images/placeholders/background/empty_inbox_bg.png',
-  error404: '/images/placeholders/background/404_bg.png',
-  error500: '/images/placeholders/background/500_bg.png',
-};
-
-export const MovingImage: Record<string, string> = {
-  noFile: '/images/placeholders/moving-image/no_file.png',
-  noNote: '/images/placeholders/moving-image/no_note.png',
-  noRecord: '/images/placeholders/moving-image/no_record.png',
-  noMatchRecord: '/images/placeholders/moving-image/no_match_record.png',
-  noTask: '/images/placeholders/moving-image/no_task.png',
-  errorIndex: '/images/placeholders/moving-image/error_index.png',
-  emptyTimeline: '/images/placeholders/moving-image/empty_timeline.png',
-  loadingMessages: '/images/placeholders/moving-image/loading_messages.png',
-  loadingAccounts: '/images/placeholders/moving-image/loading_accounts.png',
-  emptyInbox: '/images/placeholders/moving-image/empty_inbox.png',
-  error404: '/images/placeholders/moving-image/404.png',
-  error500: '/images/placeholders/moving-image/500.png',
-};
-
-export const DarkBackground: Record<string, string> = {
-  noFile: '/images/placeholders/dark-background/no_file_bg.png',
-  noNote: '/images/placeholders/dark-background/no_note_bg.png',
-  noRecord: '/images/placeholders/dark-background/no_record_bg.png',
-  noMatchRecord: '/images/placeholders/dark-background/no_match_record_bg.png',
-  noTask: '/images/placeholders/dark-background/no_task_bg.png',
-  errorIndex: '/images/placeholders/dark-background/error_index_bg.png',
-  emptyTimeline: '/images/placeholders/dark-background/empty_timeline_bg.png',
-  emptyInbox: '/images/placeholders/dark-background/empty_inbox_bg.png',
-  error404: '/images/placeholders/dark-background/404_bg.png',
-  error500: '/images/placeholders/dark-background/500_bg.png',
-  loadingMessages: '/images/placeholders/background/loading_messages_bg.png',
-  loadingAccounts: '/images/placeholders/background/loading_accounts_bg.png',
-};
-
-export const DarkMovingImage: Record<string, string> = {
-  noFile: '/images/placeholders/dark-moving-image/no_file.png',
-  noNote: '/images/placeholders/dark-moving-image/no_note.png',
-  noRecord: '/images/placeholders/dark-moving-image/no_record.png',
-  noMatchRecord: '/images/placeholders/dark-moving-image/no_match_record.png',
-  noTask: '/images/placeholders/dark-moving-image/no_task.png',
-  errorIndex: '/images/placeholders/dark-moving-image/error_index.png',
-  emptyTimeline: '/images/placeholders/dark-moving-image/empty_timeline.png',
-  emptyInbox: '/images/placeholders/dark-moving-image/empty_inbox.png',
-  error404: '/images/placeholders/dark-moving-image/404.png',
-  error500: '/images/placeholders/dark-moving-image/500.png',
-  loadingMessages: '/images/placeholders/moving-image/loading_messages.png',
-  loadingAccounts: '/images/placeholders/moving-image/loading_accounts.png',
-};

packages/twenty-front/src/modules/ui/layout/animated-placeholder/constants/Background.ts

@@ -0,0 +1,14 @@
+export const BACKGROUND: Record<string, string> = {
+  noFile: '/images/placeholders/background/no_file_bg.png',
+  noNote: '/images/placeholders/background/no_note_bg.png',
+  noRecord: '/images/placeholders/background/no_record_bg.png',
+  noMatchRecord: '/images/placeholders/background/no_match_record_bg.png',
+  noTask: '/images/placeholders/background/no_task_bg.png',
+  errorIndex: '/images/placeholders/background/error_index_bg.png',
+  emptyTimeline: '/images/placeholders/background/empty_timeline_bg.png',
+  loadingMessages: '/images/placeholders/background/loading_messages_bg.png',
+  loadingAccounts: '/images/placeholders/background/loading_accounts_bg.png',
+  emptyInbox: '/images/placeholders/background/empty_inbox_bg.png',
+  error404: '/images/placeholders/background/404_bg.png',
+  error500: '/images/placeholders/background/500_bg.png',
+};