diff --git a/.eslintrc.js b/.eslintrc.js index eba5e217bb..96425af5ab 100644 --- a/.eslintrc.js +++ b/.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 }], + }, + }, ], }; diff --git a/package.json b/package.json index 88b835a7ae..022b741ae7 100644 --- a/package.json +++ b/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", diff --git a/packages/twenty-chrome-extension/src/options/modules/ui/theme/constants/background.ts b/packages/twenty-chrome-extension/src/options/modules/ui/theme/constants/background.ts index 5f54b5590d..76887ad70c 100644 --- a/packages/twenty-chrome-extension/src/options/modules/ui/theme/constants/background.ts +++ b/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'; diff --git a/packages/twenty-chrome-extension/src/options/modules/ui/theme/constants/colors.ts b/packages/twenty-chrome-extension/src/options/modules/ui/theme/constants/colors.ts index 1425b06f68..4e2f338111 100644 --- a/packages/twenty-chrome-extension/src/options/modules/ui/theme/constants/colors.ts +++ b/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 = { diff --git a/packages/twenty-front/.storybook/preview.ts b/packages/twenty-front/.storybook/preview.ts index 9b97d6c301..90f7111618 100644 --- a/packages/twenty-front/.storybook/preview.ts +++ b/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({ themes: { - light: lightTheme, - dark: darkTheme, + light: THEME_LIGHT, + dark: THEME_DARK, }, defaultTheme: 'light', Provider: ThemeProvider, diff --git a/packages/twenty-front/src/effect-components/CommandMenuEffect.tsx b/packages/twenty-front/src/effect-components/CommandMenuEffect.tsx index e62427f11f..ece319312e 100644 --- a/packages/twenty-front/src/effect-components/CommandMenuEffect.tsx +++ b/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]); diff --git a/packages/twenty-front/src/index.tsx b/packages/twenty-front/src/index.tsx index 0b944a3ea9..c30daece20 100644 --- a/packages/twenty-front/src/index.tsx +++ b/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'; diff --git a/packages/twenty-front/src/modules/activities/emails/components/EmailThreadFetchMoreLoader.tsx b/packages/twenty-front/src/modules/activities/emails/components/EmailThreadFetchMoreLoader.tsx index 94f0b39029..c133b55310 100644 --- a/packages/twenty-front/src/modules/activities/emails/components/EmailThreadFetchMoreLoader.tsx +++ b/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)}; diff --git a/packages/twenty-front/src/modules/activities/emails/components/EmailThreadPreview.tsx b/packages/twenty-front/src/modules/activities/emails/components/EmailThreadPreview.tsx index 3adb73555a..523645b1cb 100644 --- a/packages/twenty-front/src/modules/activities/emails/components/EmailThreadPreview.tsx +++ b/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} - backgroundColor={isCountIcon ? grayScale.gray10 : undefined} + color={isCountIcon ? GRAY_SCALE.gray50 : undefined} + backgroundColor={isCountIcon ? GRAY_SCALE.gray10 : undefined} /> )} diff --git a/packages/twenty-front/src/modules/activities/emails/components/EmailThreads.tsx b/packages/twenty-front/src/modules/activities/emails/components/EmailThreads.tsx index e72bd7f3ef..3704145433 100644 --- a/packages/twenty-front/src/modules/activities/emails/components/EmailThreads.tsx +++ b/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'; diff --git a/packages/twenty-front/src/modules/activities/emails/constants/messaging.constants.ts b/packages/twenty-front/src/modules/activities/emails/constants/Messaging.ts similarity index 100% rename from packages/twenty-front/src/modules/activities/emails/constants/messaging.constants.ts rename to packages/twenty-front/src/modules/activities/emails/constants/Messaging.ts diff --git a/packages/twenty-front/src/modules/activities/notes/hooks/useNotes.ts b/packages/twenty-front/src/modules/activities/notes/hooks/useNotes.ts index 65b1eae2fd..039a8d11fb 100644 --- a/packages/twenty-front/src/modules/activities/notes/hooks/useNotes.ts +++ b/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'; diff --git a/packages/twenty-front/src/modules/activities/right-drawer/components/ActivityActionBar.tsx b/packages/twenty-front/src/modules/activities/right-drawer/components/ActivityActionBar.tsx index cc25fab5d3..9ae5f7d632 100644 --- a/packages/twenty-front/src/modules/activities/right-drawer/components/ActivityActionBar.tsx +++ b/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'; diff --git a/packages/twenty-front/src/modules/activities/tasks/components/TaskGroups.tsx b/packages/twenty-front/src/modules/activities/tasks/components/TaskGroups.tsx index eb0284b475..bdc9b1c170 100644 --- a/packages/twenty-front/src/modules/activities/tasks/components/TaskGroups.tsx +++ b/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'; diff --git a/packages/twenty-front/src/modules/activities/tasks/constants/tasksTabListComponentId.ts b/packages/twenty-front/src/modules/activities/tasks/constants/TasksTabListComponentId.ts similarity index 100% rename from packages/twenty-front/src/modules/activities/tasks/constants/tasksTabListComponentId.ts rename to packages/twenty-front/src/modules/activities/tasks/constants/TasksTabListComponentId.ts diff --git a/packages/twenty-front/src/modules/activities/tasks/hooks/useTasks.ts b/packages/twenty-front/src/modules/activities/tasks/hooks/useTasks.ts index 33f1d4c1de..b4d7b0179f 100644 --- a/packages/twenty-front/src/modules/activities/tasks/hooks/useTasks.ts +++ b/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'; diff --git a/packages/twenty-front/src/modules/activities/timeline/components/TimelineQueryEffect.tsx b/packages/twenty-front/src/modules/activities/timeline/components/TimelineQueryEffect.tsx index 50566855a0..e28eee40b8 100644 --- a/packages/twenty-front/src/modules/activities/timeline/components/TimelineQueryEffect.tsx +++ b/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'; diff --git a/packages/twenty-front/src/modules/activities/timeline/constants/FIND_MANY_TIMELINE_ACTIVITIES_ORDER_BY.ts b/packages/twenty-front/src/modules/activities/timeline/constants/FindManyTimelineActivitiesOrderBy.ts similarity index 100% rename from packages/twenty-front/src/modules/activities/timeline/constants/FIND_MANY_TIMELINE_ACTIVITIES_ORDER_BY.ts rename to packages/twenty-front/src/modules/activities/timeline/constants/FindManyTimelineActivitiesOrderBy.ts diff --git a/packages/twenty-front/src/modules/command-menu/constants/commandMenuCommands.ts b/packages/twenty-front/src/modules/command-menu/constants/CommandMenuCommands.ts similarity index 95% rename from packages/twenty-front/src/modules/command-menu/constants/commandMenuCommands.ts rename to packages/twenty-front/src/modules/command-menu/constants/CommandMenuCommands.ts index 3d5414f4c3..41fed70209 100644 --- a/packages/twenty-front/src/modules/command-menu/constants/commandMenuCommands.ts +++ b/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', diff --git a/packages/twenty-front/src/modules/command-menu/hooks/useCommandMenu.ts b/packages/twenty-front/src/modules/command-menu/hooks/useCommandMenu.ts index 3dc1688cd7..0d806f586b 100644 --- a/packages/twenty-front/src/modules/command-menu/hooks/useCommandMenu.ts +++ b/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( diff --git a/packages/twenty-front/src/modules/companies/board/components/CompanyBoard.tsx b/packages/twenty-front/src/modules/companies/board/components/CompanyBoard.tsx index 1f71c997da..48bbf277f9 100644 --- a/packages/twenty-front/src/modules/companies/board/components/CompanyBoard.tsx +++ b/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} /> { {isKeyboardShortcutMenuOpened && ( - {keyboardShortcutsTable.map((TableShortcut, index) => ( + {KEYBOARD_SHORTCUTS_TABLE.map((TableShortcut, index) => ( ))} - {keyboardShortcutsGeneral.map((GeneralShortcut) => ( + {KEYBOARD_SHORTCUTS_GENERAL.map((GeneralShortcut) => ( ))} diff --git a/packages/twenty-front/src/modules/keyboard-shortcut-menu/constants/KeyboardShortcutsGeneral.ts b/packages/twenty-front/src/modules/keyboard-shortcut-menu/constants/KeyboardShortcutsGeneral.ts new file mode 100644 index 0000000000..2697d33fe6 --- /dev/null +++ b/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, + }, +]; diff --git a/packages/twenty-front/src/modules/keyboard-shortcut-menu/constants/keyboardShortcuts.ts b/packages/twenty-front/src/modules/keyboard-shortcut-menu/constants/KeyboardShortcutsTable.ts similarity index 50% rename from packages/twenty-front/src/modules/keyboard-shortcut-menu/constants/keyboardShortcuts.ts rename to packages/twenty-front/src/modules/keyboard-shortcut-menu/constants/KeyboardShortcutsTable.ts index 36f4239d11..9cef7f446b 100644 --- a/packages/twenty-front/src/modules/keyboard-shortcut-menu/constants/keyboardShortcuts.ts +++ b/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, - }, -]; diff --git a/packages/twenty-front/src/modules/object-metadata/types/FieldMetadataItem.ts b/packages/twenty-front/src/modules/object-metadata/types/FieldMetadataItem.ts index 40ce3cedfb..8940618141 100644 --- a/packages/twenty-front/src/modules/object-metadata/types/FieldMetadataItem.ts +++ b/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< diff --git a/packages/twenty-front/src/modules/object-metadata/types/FieldMetadataOption.ts b/packages/twenty-front/src/modules/object-metadata/types/FieldMetadataOption.ts index bcdd1a012b..30d3d1eaaf 100644 --- a/packages/twenty-front/src/modules/object-metadata/types/FieldMetadataOption.ts +++ b/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; diff --git a/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/AddObjectFilterFromDetailsButton.tsx b/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/AddObjectFilterFromDetailsButton.tsx index b1347ed391..0de22274d7 100644 --- a/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/AddObjectFilterFromDetailsButton.tsx +++ b/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, diff --git a/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/MultipleFiltersButton.tsx b/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/MultipleFiltersButton.tsx index 2da7b144ef..066cc9fb34 100644 --- a/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/MultipleFiltersButton.tsx +++ b/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 = () => { diff --git a/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/MultipleFiltersDropdownButton.tsx b/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/MultipleFiltersDropdownButton.tsx index 08cdfee1ec..885a6c8eb8 100644 --- a/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/MultipleFiltersDropdownButton.tsx +++ b/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 ( } dropdownComponents={} diff --git a/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownEntitySearchSelect.tsx b/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownEntitySearchSelect.tsx index d79dbc3bf4..0d19879da2 100644 --- a/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownEntitySearchSelect.tsx +++ b/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); diff --git a/packages/twenty-front/src/modules/object-record/object-filter-dropdown/constants/ObjectFilterDropdownId.ts b/packages/twenty-front/src/modules/object-record/object-filter-dropdown/constants/ObjectFilterDropdownId.ts index 9371d0fdd4..d5c49f9703 100644 --- a/packages/twenty-front/src/modules/object-record/object-filter-dropdown/constants/ObjectFilterDropdownId.ts +++ b/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'; diff --git a/packages/twenty-front/src/modules/object-record/object-sort-dropdown/components/ObjectSortDropdownButton.tsx b/packages/twenty-front/src/modules/object-record/object-sort-dropdown/components/ObjectSortDropdownButton.tsx index dc98dd90eb..4487463fa5 100644 --- a/packages/twenty-front/src/modules/object-record/object-sort-dropdown/components/ObjectSortDropdownButton.tsx +++ b/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 ( theme.background.transparent.lighter}; border-color: ${({ theme }) => theme.color.blue}; @@ -109,7 +112,7 @@ export const RecordBoardDeprecatedColumnEditTitleMenu = ({ /> - {mainColorNames.map((colorName) => ( + {MAIN_COLOR_NAMES.map((colorName) => ( handleColorChange(colorName)} diff --git a/packages/twenty-front/src/modules/object-record/record-board-deprecated/constants/BoardOptionsDropdownId.ts b/packages/twenty-front/src/modules/object-record/record-board-deprecated/constants/BoardOptionsDropdownId.ts index d68691780a..77727d5947 100644 --- a/packages/twenty-front/src/modules/object-record/record-board-deprecated/constants/BoardOptionsDropdownId.ts +++ b/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'; diff --git a/packages/twenty-front/src/modules/object-record/record-board-deprecated/options/components/RecordBoardDeprecatedOptionsDropdown.tsx b/packages/twenty-front/src/modules/object-record/record-board-deprecated/options/components/RecordBoardDeprecatedOptionsDropdown.tsx index 8dc99a6cc7..1a3e6f1f20 100644 --- a/packages/twenty-front/src/modules/object-record/record-board-deprecated/options/components/RecordBoardDeprecatedOptionsDropdown.tsx +++ b/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 ( } dropdownComponents={ { const { isDropdownOpen, toggleDropdown } = useDropdown( - BoardOptionsDropdownId, + BOARD_OPTIONS_DROPDOWN_ID, ); const handleClick = () => { diff --git a/packages/twenty-front/src/modules/object-record/record-board-deprecated/options/components/RecordBoardDeprecatedOptionsDropdownContent.tsx b/packages/twenty-front/src/modules/object-record/record-board-deprecated/options/components/RecordBoardDeprecatedOptionsDropdownContent.tsx index 912d8135a1..2290f75b4d 100644 --- a/packages/twenty-front/src/modules/object-record/record-board-deprecated/options/components/RecordBoardDeprecatedOptionsDropdownContent.tsx +++ b/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) => { diff --git a/packages/twenty-front/src/modules/object-record/record-board-deprecated/types/BoardColumnDefinition.ts b/packages/twenty-front/src/modules/object-record/record-board-deprecated/types/BoardColumnDefinition.ts index 16c0747249..b779ed4358 100644 --- a/packages/twenty-front/src/modules/object-record/record-board-deprecated/types/BoardColumnDefinition.ts +++ b/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; diff --git a/packages/twenty-front/src/modules/object-record/record-board/record-board-column/components/RecordBoardColumnFetchMoreLoader.tsx b/packages/twenty-front/src/modules/object-record/record-board/record-board-column/components/RecordBoardColumnFetchMoreLoader.tsx index 98ca2e8666..072120d680 100644 --- a/packages/twenty-front/src/modules/object-record/record-board/record-board-column/components/RecordBoardColumnFetchMoreLoader.tsx +++ b/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)}; diff --git a/packages/twenty-front/src/modules/object-record/record-board/types/RecordBoardColumnDefinition.ts b/packages/twenty-front/src/modules/object-record/record-board/types/RecordBoardColumnDefinition.ts index af3ee5e8f4..288090c389 100644 --- a/packages/twenty-front/src/modules/object-record/record-board/types/RecordBoardColumnDefinition.ts +++ b/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; diff --git a/packages/twenty-front/src/modules/object-record/record-field/types/FieldMetadata.ts b/packages/twenty-front/src/modules/object-record/record-field/types/FieldMetadata.ts index 1f0d498eac..74f8bbe884 100644 --- a/packages/twenty-front/src/modules/object-record/record-field/types/FieldMetadata.ts +++ b/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'; diff --git a/packages/twenty-front/src/modules/object-record/record-index/hooks/useLoadRecordIndexTable.ts b/packages/twenty-front/src/modules/object-record/record-index/hooks/useLoadRecordIndexTable.ts index 9db52bcc72..e447084e7a 100644 --- a/packages/twenty-front/src/modules/object-record/record-index/hooks/useLoadRecordIndexTable.ts +++ b/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, diff --git a/packages/twenty-front/src/modules/object-record/record-table/components/RecordTable.tsx b/packages/twenty-front/src/modules/object-record/record-table/components/RecordTable.tsx index 20e08592fc..07638f0fa4 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/components/RecordTable.tsx +++ b/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.gray100, 0.25) + ? RGBA(theme.grayScale.gray50, 0.8) + : RGBA(theme.grayScale.gray100, 0.25) } inset`}; } diff --git a/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableBodyFetchMoreLoader.tsx b/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableBodyFetchMoreLoader.tsx index bbd4f91137..196f5aae30 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableBodyFetchMoreLoader.tsx +++ b/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)}; diff --git a/packages/twenty-front/src/modules/object-record/record-table/constants/ColumnHeadDropdownId.ts b/packages/twenty-front/src/modules/object-record/record-table/constants/ColumnHeadDropdownId.ts index 767e31d617..8598c85465 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/constants/ColumnHeadDropdownId.ts +++ b/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'; diff --git a/packages/twenty-front/src/modules/object-record/record-table/constants/TableHiddenFieldsDropdownId.ts b/packages/twenty-front/src/modules/object-record/record-table/constants/TableHiddenFieldsDropdownId.ts index ce97149342..d94eeb6b89 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/constants/TableHiddenFieldsDropdownId.ts +++ b/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'; diff --git a/packages/twenty-front/src/modules/object-record/relation-picker/components/MultipleObjectRecordSelect.tsx b/packages/twenty-front/src/modules/object-record/relation-picker/components/MultipleObjectRecordSelect.tsx index 97acf3362e..05aaf85f56 100644 --- a/packages/twenty-front/src/modules/object-record/relation-picker/components/MultipleObjectRecordSelect.tsx +++ b/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 = ({ ) : ( <> { diff --git a/packages/twenty-front/src/modules/object-record/relation-picker/components/MultipleObjectRecordSelectItem.tsx b/packages/twenty-front/src/modules/object-record/relation-picker/components/MultipleObjectRecordSelectItem.tsx index 21136c4d53..c5b8360530 100644 --- a/packages/twenty-front/src/modules/object-record/relation-picker/components/MultipleObjectRecordSelectItem.tsx +++ b/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( diff --git a/packages/twenty-front/src/modules/object-record/relation-picker/constants/CreateButtonId.ts b/packages/twenty-front/src/modules/object-record/relation-picker/constants/CreateButtonId.ts new file mode 100644 index 0000000000..a42ee93c26 --- /dev/null +++ b/packages/twenty-front/src/modules/object-record/relation-picker/constants/CreateButtonId.ts @@ -0,0 +1 @@ +export const CREATE_BUTTON_ID = 'create-button'; diff --git a/packages/twenty-front/src/modules/object-record/relation-picker/constants/EmptyButtonId.ts b/packages/twenty-front/src/modules/object-record/relation-picker/constants/EmptyButtonId.ts new file mode 100644 index 0000000000..eaaca4a811 --- /dev/null +++ b/packages/twenty-front/src/modules/object-record/relation-picker/constants/EmptyButtonId.ts @@ -0,0 +1 @@ +export const EMPTY_BUTTON_ID = 'empty-button'; diff --git a/packages/twenty-front/src/modules/object-record/relation-picker/constants/MultiObjectRecordSelectSelectableListId.ts b/packages/twenty-front/src/modules/object-record/relation-picker/constants/MultiObjectRecordSelectSelectableListId.ts index 7d1624e92a..e611eeaa80 100644 --- a/packages/twenty-front/src/modules/object-record/relation-picker/constants/MultiObjectRecordSelectSelectableListId.ts +++ b/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'; diff --git a/packages/twenty-front/src/modules/object-record/relation-picker/constants/index.ts b/packages/twenty-front/src/modules/object-record/relation-picker/constants/index.ts deleted file mode 100644 index 4521251b93..0000000000 --- a/packages/twenty-front/src/modules/object-record/relation-picker/constants/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export const CreateButtonId = 'create-button'; -export const EmptyButtonId = 'empty-button'; diff --git a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsCalendarTimeZoneSelect.tsx b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsCalendarTimeZoneSelect.tsx index 159f5e7625..81fba15c62 100644 --- a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsCalendarTimeZoneSelect.tsx +++ b/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 /> diff --git a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsColorSettingCard.tsx b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsColorSettingCard.tsx index cd1d4ce5af..0e6e3f2c48 100644 --- a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsColorSettingCard.tsx +++ b/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) => ( - {mainColorNames.map((colorName) => ( + {MAIN_COLOR_NAMES.map((colorName) => ( { + // 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; +}); diff --git a/packages/twenty-front/src/modules/settings/accounts/constants/timeZoneSelectOptions.ts b/packages/twenty-front/src/modules/settings/accounts/constants/AvailableTimezoneOptionsByLabel.ts similarity index 54% rename from packages/twenty-front/src/modules/settings/accounts/constants/timeZoneSelectOptions.ts rename to packages/twenty-front/src/modules/settings/accounts/constants/AvailableTimezoneOptionsByLabel.ts index ffb3d5e67a..391352a936 100644 --- a/packages/twenty-front/src/modules/settings/accounts/constants/timeZoneSelectOptions.ts +++ b/packages/twenty-front/src/modules/settings/accounts/constants/AvailableTimezoneOptionsByLabel.ts @@ -1,10 +1,10 @@ -import { getTimezoneOffset } from 'date-fns-tz'; - -import { ianaTimeZones } from '@/settings/accounts/constants/ianaTimeZones'; +/* eslint-disable @typescript-eslint/naming-convention */ +/* eslint-disable @nx/workspace-max-consts-per-file */ +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> >((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; -}); diff --git a/packages/twenty-front/src/modules/settings/accounts/constants/ianaTimeZones.ts b/packages/twenty-front/src/modules/settings/accounts/constants/IanaTimeZones.ts similarity index 99% rename from packages/twenty-front/src/modules/settings/accounts/constants/ianaTimeZones.ts rename to packages/twenty-front/src/modules/settings/accounts/constants/IanaTimeZones.ts index c4b26354ac..d76415c55e 100644 --- a/packages/twenty-front/src/modules/settings/accounts/constants/ianaTimeZones.ts +++ b/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', diff --git a/packages/twenty-front/src/modules/settings/accounts/utils/findAvailableTimeZoneOption.ts b/packages/twenty-front/src/modules/settings/accounts/utils/findAvailableTimeZoneOption.ts index 8f5795cfe5..ab3b6cb5e4 100644 --- a/packages/twenty-front/src/modules/settings/accounts/utils/findAvailableTimeZoneOption.ts +++ b/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)]; diff --git a/packages/twenty-front/src/modules/settings/components/SettingsPageContainer.tsx b/packages/twenty-front/src/modules/settings/components/SettingsPageContainer.tsx index 432bf569ce..8775b37bc6 100644 --- a/packages/twenty-front/src/modules/settings/components/SettingsPageContainer.tsx +++ b/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 }; diff --git a/packages/twenty-front/src/modules/settings/data-model/components/SettingsObjectFieldCurrencyForm.tsx b/packages/twenty-front/src/modules/settings/data-model/components/SettingsObjectFieldCurrencyForm.tsx index 7c38adc479..f0afa115e9 100644 --- a/packages/twenty-front/src/modules/settings/data-model/components/SettingsObjectFieldCurrencyForm.tsx +++ b/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, diff --git a/packages/twenty-front/src/modules/settings/data-model/components/SettingsObjectFieldRelationForm.tsx b/packages/twenty-front/src/modules/settings/data-model/components/SettingsObjectFieldRelationForm.tsx index ab7bdc4030..368a74abfb 100644 --- a/packages/twenty-front/src/modules/settings/data-model/components/SettingsObjectFieldRelationForm.tsx +++ b/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, diff --git a/packages/twenty-front/src/modules/settings/data-model/components/SettingsObjectFieldSelectForm.tsx b/packages/twenty-front/src/modules/settings/data-model/components/SettingsObjectFieldSelectForm.tsx index cfa7dd013f..a1ffbb5da2 100644 --- a/packages/twenty-front/src/modules/settings/data-model/components/SettingsObjectFieldSelectForm.tsx +++ b/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; - return mainColorNames[nextColorIndex]; + const nextColorIndex = (currentColorIndex + 1) % MAIN_COLOR_NAMES.length; + return MAIN_COLOR_NAMES[nextColorIndex]; }; export const SettingsObjectFieldSelectForm = ({ diff --git a/packages/twenty-front/src/modules/settings/data-model/components/SettingsObjectFieldSelectFormOptionRow.tsx b/packages/twenty-front/src/modules/settings/data-model/components/SettingsObjectFieldSelectFormOptionRow.tsx index 5c74bc6863..47069e6bcd 100644 --- a/packages/twenty-front/src/modules/settings/data-model/components/SettingsObjectFieldSelectFormOptionRow.tsx +++ b/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={ - {mainColorNames.map((colorName) => ( + {MAIN_COLOR_NAMES.map((colorName) => ( { diff --git a/packages/twenty-front/src/modules/settings/data-model/components/SettingsObjectFieldTypeSelectSection.tsx b/packages/twenty-front/src/modules/settings/data-model/components/SettingsObjectFieldTypeSelectSection.tsx index d08c846a18..6fa6a6fc83 100644 --- a/packages/twenty-front/src/modules/settings/data-model/components/SettingsObjectFieldTypeSelectSection.tsx +++ b/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 && ( <> = { diff --git a/packages/twenty-front/src/modules/settings/data-model/constants/settingsFieldMetadataTypes.ts b/packages/twenty-front/src/modules/settings/data-model/constants/SettingsFieldMetadataTypes.ts similarity index 90% rename from packages/twenty-front/src/modules/settings/data-model/constants/settingsFieldMetadataTypes.ts rename to packages/twenty-front/src/modules/settings/data-model/constants/SettingsFieldMetadataTypes.ts index 27f52e8485..ab811e4716 100644 --- a/packages/twenty-front/src/modules/settings/data-model/constants/settingsFieldMetadataTypes.ts +++ b/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(); -defaultDateValue.setFullYear(defaultDateValue.getFullYear() + 2); +DEFAULT_DATE_VALUE.setFullYear(DEFAULT_DATE_VALUE.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', diff --git a/packages/twenty-front/src/modules/settings/data-model/constants/objectSettings.ts b/packages/twenty-front/src/modules/settings/data-model/constants/objectSettings.ts deleted file mode 100644 index 7ce71edd0b..0000000000 --- a/packages/twenty-front/src/modules/settings/data-model/constants/objectSettings.ts +++ /dev/null @@ -1 +0,0 @@ -export const objectSettingsWidth = 512; diff --git a/packages/twenty-front/src/modules/settings/data-model/hooks/useFieldPreview.ts b/packages/twenty-front/src/modules/settings/data-model/hooks/useFieldPreview.ts index 9328140d5d..cd96377147 100644 --- a/packages/twenty-front/src/modules/settings/data-model/hooks/useFieldPreview.ts +++ b/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 = diff --git a/packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectFieldDataType.tsx b/packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectFieldDataType.tsx index 4cc066fc95..eb99da0b02 100644 --- a/packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectFieldDataType.tsx +++ b/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, - label = settingsFieldMetadataTypes[value]?.label, + Icon = SETTINGS_FIELD_METADATA_TYPES[value]?.Icon ?? IconTwentyStar, + label = SETTINGS_FIELD_METADATA_TYPES[value]?.label, }: SettingsObjectFieldDataTypeProps) => { const theme = useTheme(); diff --git a/packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectFieldItemTableRow.tsx b/packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectFieldItemTableRow.tsx index 242f8a6a63..2657fd4713 100644 --- a/packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectFieldItemTableRow.tsx +++ b/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 { settingsFieldMetadataTypes } from '../../constants/settingsFieldMetadataTypes'; +import { RELATION_TYPES } from '../../constants/RelationTypes'; 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 ( diff --git a/packages/twenty-front/src/modules/settings/data-model/types/SettingsObjectFieldSelectFormOption.ts b/packages/twenty-front/src/modules/settings/data-model/types/SettingsObjectFieldSelectFormOption.ts index 7ff6063ead..e59b6fe535 100644 --- a/packages/twenty-front/src/modules/settings/data-model/types/SettingsObjectFieldSelectFormOption.ts +++ b/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; diff --git a/packages/twenty-front/src/modules/settings/developers/constants/expirationDates.ts b/packages/twenty-front/src/modules/settings/developers/constants/ExpirationDates.ts similarity index 89% rename from packages/twenty-front/src/modules/settings/developers/constants/expirationDates.ts rename to packages/twenty-front/src/modules/settings/developers/constants/ExpirationDates.ts index 028ac9ddef..ae47b7b1ae 100644 --- a/packages/twenty-front/src/modules/settings/developers/constants/expirationDates.ts +++ b/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; }[] = [ diff --git a/packages/twenty-front/src/modules/sign-in-background-mock/components/SignInBackgroundMockContainerEffect.tsx b/packages/twenty-front/src/modules/sign-in-background-mock/components/SignInBackgroundMockContainerEffect.tsx index a65e5b444c..239e26b48f 100644 --- a/packages/twenty-front/src/modules/sign-in-background-mock/components/SignInBackgroundMockContainerEffect.tsx +++ b/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 { - signInBackgroundMockColumnDefinitions, - signInBackgroundMockFilterDefinitions, - signInBackgroundMockSortDefinitions, -} from '@/sign-in-background-mock/constants/signInBackgroundMockDefinitions'; -import { signInBackgroundMockViewFields } from '@/sign-in-background-mock/constants/signInBackgroundMockViewFields'; +import { SIGN_IN_BACKGROUND_MOCK_COLUMN_DEFINITIONS } from '@/sign-in-background-mock/constants/SignInBackgroundMockColumnDefinitions'; +import { SIGN_IN_BACKGROUND_MOCK_FILTER_DEFINITIONS } from '@/sign-in-background-mock/constants/SignInBackgroundMockFilterDefinitions'; +import { SIGN_IN_BACKGROUND_MOCK_SORT_DEFINITIONS } from '@/sign-in-background-mock/constants/SignInBackgroundMockSortDefinitions'; +import { SIGN_IN_BACKGROUND_MOCK_VIEW_FIELDS } 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); - setAvailableFilterDefinitions?.(signInBackgroundMockFilterDefinitions); - setAvailableFieldDefinitions?.(signInBackgroundMockColumnDefinitions); + setAvailableSortDefinitions?.(SIGN_IN_BACKGROUND_MOCK_SORT_DEFINITIONS); + setAvailableFilterDefinitions?.(SIGN_IN_BACKGROUND_MOCK_FILTER_DEFINITIONS); + setAvailableFieldDefinitions?.(SIGN_IN_BACKGROUND_MOCK_COLUMN_DEFINITIONS); - setAvailableTableColumns(signInBackgroundMockColumnDefinitions); + setAvailableTableColumns(SIGN_IN_BACKGROUND_MOCK_COLUMN_DEFINITIONS); setTableColumns( mapViewFieldsToColumnDefinitions({ - viewFields: signInBackgroundMockViewFields, - columnDefinitions: signInBackgroundMockColumnDefinitions, + viewFields: SIGN_IN_BACKGROUND_MOCK_VIEW_FIELDS, + columnDefinitions: SIGN_IN_BACKGROUND_MOCK_COLUMN_DEFINITIONS, }), ); }, [ diff --git a/packages/twenty-front/src/modules/sign-in-background-mock/constants/signInBackgroundMockDefinitions.ts b/packages/twenty-front/src/modules/sign-in-background-mock/constants/SignInBackgroundMockColumnDefinitions.ts similarity index 74% rename from packages/twenty-front/src/modules/sign-in-background-mock/constants/signInBackgroundMockDefinitions.ts rename to packages/twenty-front/src/modules/sign-in-background-mock/constants/SignInBackgroundMockColumnDefinitions.ts index 80a0cb1ce8..990ed52b1a 100644 --- a/packages/twenty-front/src/modules/sign-in-background-mock/constants/signInBackgroundMockDefinitions.ts +++ b/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[] ).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[]; diff --git a/packages/twenty-front/src/modules/sign-in-background-mock/constants/signInBackgroundMockCompanies.ts b/packages/twenty-front/src/modules/sign-in-background-mock/constants/SignInBackgroundMockCompanies.ts similarity index 99% rename from packages/twenty-front/src/modules/sign-in-background-mock/constants/signInBackgroundMockCompanies.ts rename to packages/twenty-front/src/modules/sign-in-background-mock/constants/SignInBackgroundMockCompanies.ts index cf9776cb40..1dac5f6352 100644 --- a/packages/twenty-front/src/modules/sign-in-background-mock/constants/signInBackgroundMockCompanies.ts +++ b/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', diff --git a/packages/twenty-front/src/modules/sign-in-background-mock/constants/SignInBackgroundMockFilterDefinitions.ts b/packages/twenty-front/src/modules/sign-in-background-mock/constants/SignInBackgroundMockFilterDefinitions.ts new file mode 100644 index 0000000000..15a87498e3 --- /dev/null +++ b/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[]; diff --git a/packages/twenty-front/src/modules/sign-in-background-mock/constants/SignInBackgroundMockSortDefinitions.ts b/packages/twenty-front/src/modules/sign-in-background-mock/constants/SignInBackgroundMockSortDefinitions.ts new file mode 100644 index 0000000000..598e6e4d2a --- /dev/null +++ b/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[]; diff --git a/packages/twenty-front/src/modules/sign-in-background-mock/constants/signInBackgroundMockViewFields.ts b/packages/twenty-front/src/modules/sign-in-background-mock/constants/SignInBackgroundMockViewFields.ts similarity index 97% rename from packages/twenty-front/src/modules/sign-in-background-mock/constants/signInBackgroundMockViewFields.ts rename to packages/twenty-front/src/modules/sign-in-background-mock/constants/SignInBackgroundMockViewFields.ts index ac927950ce..c2ee7a7932 100644 --- a/packages/twenty-front/src/modules/sign-in-background-mock/constants/signInBackgroundMockViewFields.ts +++ b/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', diff --git a/packages/twenty-front/src/modules/spreadsheet-import/components/ModalWrapper.tsx b/packages/twenty-front/src/modules/spreadsheet-import/components/ModalWrapper.tsx index a6814e9c44..66dc08423c 100644 --- a/packages/twenty-front/src/modules/spreadsheet-import/components/ModalWrapper.tsx +++ b/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'; diff --git a/packages/twenty-front/src/modules/spreadsheet-import/components/Table.tsx b/packages/twenty-front/src/modules/spreadsheet-import/components/Table.tsx index f966e13cab..cc3610d9c1 100644 --- a/packages/twenty-front/src/modules/spreadsheet-import/components/Table.tsx +++ b/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 { diff --git a/packages/twenty-front/src/modules/spreadsheet-import/steps/components/Steps.tsx b/packages/twenty-front/src/modules/spreadsheet-import/steps/components/Steps.tsx index 5fc6dcacd8..cd87cc5728 100644 --- a/packages/twenty-front/src/modules/spreadsheet-import/steps/components/Steps.tsx +++ b/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'; diff --git a/packages/twenty-front/src/modules/ui/display/color/components/ColorSample.tsx b/packages/twenty-front/src/modules/ui/display/color/components/ColorSample.tsx index 4cc753ccff..9b1a41e052 100644 --- a/packages/twenty-front/src/modules/ui/display/color/components/ColorSample.tsx +++ b/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'; diff --git a/packages/twenty-front/src/modules/ui/display/status/components/Status.tsx b/packages/twenty-front/src/modules/ui/display/status/components/Status.tsx index 8d1b3542e4..17b0b47042 100644 --- a/packages/twenty-front/src/modules/ui/display/status/components/Status.tsx +++ b/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<{ diff --git a/packages/twenty-front/src/modules/ui/display/status/components/__stories__/Status.stories.tsx b/packages/twenty-front/src/modules/ui/display/status/components/__stories__/Status.stories.tsx index 5027dcc10a..b0077e064f 100644 --- a/packages/twenty-front/src/modules/ui/display/status/components/__stories__/Status.stories.tsx +++ b/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 = { dimensions: [ { name: 'colors', - values: mainColorNames, + values: MAIN_COLOR_NAMES, props: (color: ThemeColor) => ({ color }), }, ], diff --git a/packages/twenty-front/src/modules/ui/display/tag/components/Tag.tsx b/packages/twenty-front/src/modules/ui/display/tag/components/Tag.tsx index 51c84d6f8d..c475965e7c 100644 --- a/packages/twenty-front/src/modules/ui/display/tag/components/Tag.tsx +++ b/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<{ diff --git a/packages/twenty-front/src/modules/ui/display/tag/components/__stories__/Tag.stories.tsx b/packages/twenty-front/src/modules/ui/display/tag/components/__stories__/Tag.stories.tsx index 9ef7411f6b..1f72762f80 100644 --- a/packages/twenty-front/src/modules/ui/display/tag/components/__stories__/Tag.stories.tsx +++ b/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 = { dimensions: [ { name: 'colors', - values: mainColorNames, + values: MAIN_COLOR_NAMES, props: (color: ThemeColor) => ({ color }), }, ], diff --git a/packages/twenty-front/src/modules/ui/display/tooltip/AppTooltip.tsx b/packages/twenty-front/src/modules/ui/display/tooltip/AppTooltip.tsx index 87d34f1de0..99fa35032f 100644 --- a/packages/twenty-front/src/modules/ui/display/tooltip/AppTooltip.tsx +++ b/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}; diff --git a/packages/twenty-front/src/modules/ui/feedback/snack-bar-manager/components/SnackBar.tsx b/packages/twenty-front/src/modules/ui/feedback/snack-bar-manager/components/SnackBar.tsx index 062a417789..fc73db7713 100644 --- a/packages/twenty-front/src/modules/ui/feedback/snack-bar-manager/components/SnackBar.tsx +++ b/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>` 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 = ({ diff --git a/packages/twenty-front/src/modules/ui/field/input/components/FieldInputOverlay.tsx b/packages/twenty-front/src/modules/ui/field/input/components/FieldInputOverlay.tsx index c836fd0ee8..bd5376c32f 100644 --- a/packages/twenty-front/src/modules/ui/field/input/components/FieldInputOverlay.tsx +++ b/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; diff --git a/packages/twenty-front/src/modules/ui/field/input/components/TextAreaInput.tsx b/packages/twenty-front/src/modules/ui/field/input/components/TextAreaInput.tsx index 7a354a1383..7525c18577 100644 --- a/packages/twenty-front/src/modules/ui/field/input/components/TextAreaInput.tsx +++ b/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}; diff --git a/packages/twenty-front/src/modules/ui/field/input/components/TextInput.tsx b/packages/twenty-front/src/modules/ui/field/input/components/TextInput.tsx index 845a92446f..245d298c15 100644 --- a/packages/twenty-front/src/modules/ui/field/input/components/TextInput.tsx +++ b/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%; `; diff --git a/packages/twenty-front/src/modules/ui/input/components/Radio.tsx b/packages/twenty-front/src/modules/ui/input/components/Radio.tsx index 696759e3d7..a5f2b57bbf 100644 --- a/packages/twenty-front/src/modules/ui/input/components/Radio.tsx +++ b/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)` if (!checked) { return theme.background.tertiary; } - return rgba(theme.color.blue, 0.12); + return RGBA(theme.color.blue, 0.12); }}; } diff --git a/packages/twenty-front/src/modules/ui/input/components/internal/date/components/InternalDatePicker.tsx b/packages/twenty-front/src/modules/ui/input/components/internal/date/components/InternalDatePicker.tsx index 9a9b86375b..e3a231fd75 100644 --- a/packages/twenty-front/src/modules/ui/input/components/internal/date/components/InternalDatePicker.tsx +++ b/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)}; } diff --git a/packages/twenty-front/src/modules/ui/layout/animated-placeholder/components/AnimatedPlaceholder.tsx b/packages/twenty-front/src/modules/ui/layout/animated-placeholder/components/AnimatedPlaceholder.tsx index b343e44abd..87b0fa7915 100644 --- a/packages/twenty-front/src/modules/ui/layout/animated-placeholder/components/AnimatedPlaceholder.tsx +++ b/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 { - Background, - DarkBackground, - DarkMovingImage, - MovingImage, -} from '@/ui/layout/animated-placeholder/constants/AnimatedImages'; +import { BACKGROUND } from '@/ui/layout/animated-placeholder/constants/Background'; +import { DARK_BACKGROUND } from '@/ui/layout/animated-placeholder/constants/DarkBackground'; +import { DARK_MOVING_IMAGE } from '@/ui/layout/animated-placeholder/constants/DarkMovingImage'; +import { MOVING_IMAGE } from '@/ui/layout/animated-placeholder/constants/MovingImage'; const StyledContainer = styled.div` display: flex; @@ -39,7 +37,7 @@ const StyledMovingImage = styled(motion.img)` `; 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 ( = { - 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 = { - 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 = { - 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 = { - 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', -}; diff --git a/packages/twenty-front/src/modules/ui/layout/animated-placeholder/constants/Background.ts b/packages/twenty-front/src/modules/ui/layout/animated-placeholder/constants/Background.ts new file mode 100644 index 0000000000..7498e14421 --- /dev/null +++ b/packages/twenty-front/src/modules/ui/layout/animated-placeholder/constants/Background.ts @@ -0,0 +1,14 @@ +export const BACKGROUND: Record = { + 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', +}; diff --git a/packages/twenty-front/src/modules/ui/layout/animated-placeholder/constants/DarkBackground.ts b/packages/twenty-front/src/modules/ui/layout/animated-placeholder/constants/DarkBackground.ts new file mode 100644 index 0000000000..6fc5e701f6 --- /dev/null +++ b/packages/twenty-front/src/modules/ui/layout/animated-placeholder/constants/DarkBackground.ts @@ -0,0 +1,14 @@ +export const DARK_BACKGROUND: Record = { + 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', +}; diff --git a/packages/twenty-front/src/modules/ui/layout/animated-placeholder/constants/DarkMovingImage.ts b/packages/twenty-front/src/modules/ui/layout/animated-placeholder/constants/DarkMovingImage.ts new file mode 100644 index 0000000000..d8173f6f5e --- /dev/null +++ b/packages/twenty-front/src/modules/ui/layout/animated-placeholder/constants/DarkMovingImage.ts @@ -0,0 +1,14 @@ +export const DARK_MOVING_IMAGE: Record = { + 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', +}; diff --git a/packages/twenty-front/src/modules/ui/layout/animated-placeholder/constants/MovingImage.ts b/packages/twenty-front/src/modules/ui/layout/animated-placeholder/constants/MovingImage.ts new file mode 100644 index 0000000000..d08eac3e82 --- /dev/null +++ b/packages/twenty-front/src/modules/ui/layout/animated-placeholder/constants/MovingImage.ts @@ -0,0 +1,14 @@ +export const MOVING_IMAGE: Record = { + 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', +}; diff --git a/packages/twenty-front/src/modules/ui/layout/dropdown/components/DropdownMenuInput.tsx b/packages/twenty-front/src/modules/ui/layout/dropdown/components/DropdownMenuInput.tsx index f024ccb7f4..913534a8d7 100644 --- a/packages/twenty-front/src/modules/ui/layout/dropdown/components/DropdownMenuInput.tsx +++ b/packages/twenty-front/src/modules/ui/layout/dropdown/components/DropdownMenuInput.tsx @@ -1,11 +1,11 @@ import { forwardRef, InputHTMLAttributes } from 'react'; import styled from '@emotion/styled'; -import { rgba } from '@/ui/theme/constants/colors'; -import { textInputStyle } from '@/ui/theme/constants/effects'; +import { RGBA } from '@/ui/theme/constants/Rgba'; +import { TEXT_INPUT_STYLE } from '@/ui/theme/constants/TextInputStyle'; const StyledInput = styled.input` - ${textInputStyle} + ${TEXT_INPUT_STYLE} border: 1px solid ${({ theme }) => theme.border.color.medium}; border-radius: ${({ theme }) => theme.border.radius.sm}; @@ -17,7 +17,7 @@ const StyledInput = styled.input` &:focus { border-color: ${({ theme }) => theme.color.blue}; - box-shadow: 0px 0px 0px 3px ${({ theme }) => rgba(theme.color.blue, 0.1)}; + box-shadow: 0px 0px 0px 3px ${({ theme }) => RGBA(theme.color.blue, 0.1)}; } `; diff --git a/packages/twenty-front/src/modules/ui/layout/dropdown/components/DropdownMenuSearchInput.tsx b/packages/twenty-front/src/modules/ui/layout/dropdown/components/DropdownMenuSearchInput.tsx index 041eddfe4f..c5e3ffa84f 100644 --- a/packages/twenty-front/src/modules/ui/layout/dropdown/components/DropdownMenuSearchInput.tsx +++ b/packages/twenty-front/src/modules/ui/layout/dropdown/components/DropdownMenuSearchInput.tsx @@ -1,7 +1,7 @@ import { forwardRef, InputHTMLAttributes } from 'react'; import styled from '@emotion/styled'; -import { textInputStyle } from '@/ui/theme/constants/effects'; +import { TEXT_INPUT_STYLE } from '@/ui/theme/constants/TextInputStyle'; const StyledDropdownMenuSearchInputContainer = styled.div` --vertical-padding: ${({ theme }) => theme.spacing(1)}; @@ -17,7 +17,7 @@ const StyledDropdownMenuSearchInputContainer = styled.div` `; const StyledInput = styled.input` - ${textInputStyle} + ${TEXT_INPUT_STYLE} font-size: ${({ theme }) => theme.font.size.sm}; width: 100%; diff --git a/packages/twenty-front/src/modules/ui/layout/page/DefaultLayout.tsx b/packages/twenty-front/src/modules/ui/layout/page/DefaultLayout.tsx index b2dd429a24..d3cb26c65c 100644 --- a/packages/twenty-front/src/modules/ui/layout/page/DefaultLayout.tsx +++ b/packages/twenty-front/src/modules/ui/layout/page/DefaultLayout.tsx @@ -13,10 +13,10 @@ import { KeyboardShortcutMenu } from '@/keyboard-shortcut-menu/components/Keyboa import { AppNavigationDrawer } from '@/navigation/components/AppNavigationDrawer'; import { MobileNavigationBar } from '@/navigation/components/MobileNavigationBar'; import { useIsSettingsPage } from '@/navigation/hooks/useIsSettingsPage'; -import { objectSettingsWidth } from '@/settings/data-model/constants/objectSettings'; +import { OBJECT_SETTINGS_WIDTH } from '@/settings/data-model/constants/ObjectSettings'; import { SignInBackgroundMockPage } from '@/sign-in-background-mock/components/SignInBackgroundMockPage'; import { AppPath } from '@/types/AppPath'; -import { desktopNavDrawerWidths } from '@/ui/navigation/navigation-drawer/constants'; +import { DESKTOP_NAV_DRAWER_WIDTHS } from '@/ui/navigation/navigation-drawer/constants/DesktopNavDrawerWidths'; import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile'; import { useScreenSize } from '@/ui/utilities/screen-size/hooks/useScreenSize'; import { useIsMatchingLocation } from '~/hooks/useIsMatchingLocation'; @@ -100,7 +100,9 @@ export const DefaultLayout = ({ children }: DefaultLayoutProps) => { marginLeft: isSettingsPage && !isMobile ? (widowsWidth - - (objectSettingsWidth + desktopNavDrawerWidths.menu + 64)) / + (OBJECT_SETTINGS_WIDTH + + DESKTOP_NAV_DRAWER_WIDTHS.menu + + 64)) / 2 : 0, }} diff --git a/packages/twenty-front/src/modules/ui/layout/page/PageHeader.tsx b/packages/twenty-front/src/modules/ui/layout/page/PageHeader.tsx index 1804cfb481..fc67db03dc 100644 --- a/packages/twenty-front/src/modules/ui/layout/page/PageHeader.tsx +++ b/packages/twenty-front/src/modules/ui/layout/page/PageHeader.tsx @@ -11,7 +11,7 @@ import { OverflowingTextWithTooltip } from '@/ui/display/tooltip/OverflowingText import { IconButton } from '@/ui/input/button/components/IconButton'; import { NavigationDrawerCollapseButton } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerCollapseButton'; import { isNavigationDrawerOpenState } from '@/ui/navigation/states/isNavigationDrawerOpenState'; -import { MOBILE_VIEWPORT } from '@/ui/theme/constants/theme'; +import { MOBILE_VIEWPORT } from '@/ui/theme/constants/MobileViewport'; import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile'; export const PAGE_BAR_MIN_HEIGHT = 40; diff --git a/packages/twenty-front/src/modules/ui/layout/page/RightDrawerContainer.tsx b/packages/twenty-front/src/modules/ui/layout/page/RightDrawerContainer.tsx index eb99145e40..5ee7cae452 100644 --- a/packages/twenty-front/src/modules/ui/layout/page/RightDrawerContainer.tsx +++ b/packages/twenty-front/src/modules/ui/layout/page/RightDrawerContainer.tsx @@ -2,7 +2,7 @@ import { ReactNode } from 'react'; import styled from '@emotion/styled'; import { RightDrawer } from '@/ui/layout/right-drawer/components/RightDrawer'; -import { MOBILE_VIEWPORT } from '@/ui/theme/constants/theme'; +import { MOBILE_VIEWPORT } from '@/ui/theme/constants/MobileViewport'; import { PagePanel } from './PagePanel'; diff --git a/packages/twenty-front/src/modules/ui/navigation/link/components/GithubVersionLink.tsx b/packages/twenty-front/src/modules/ui/navigation/link/components/GithubVersionLink.tsx index 5225263a93..67bc94ed93 100644 --- a/packages/twenty-front/src/modules/ui/navigation/link/components/GithubVersionLink.tsx +++ b/packages/twenty-front/src/modules/ui/navigation/link/components/GithubVersionLink.tsx @@ -4,13 +4,13 @@ import { IconBrandGithub } from '@/ui/display/icon'; import { ActionLink } from '@/ui/navigation/link/components/ActionLink.tsx'; import packageJson from '../../../../../../package.json'; -import { githubLink } from '../constants'; +import { GITHUB_LINK } from '../constants/GithubLink'; export const GithubVersionLink = () => { const theme = useTheme(); return ( - + {packageJson.version} diff --git a/packages/twenty-front/src/modules/ui/navigation/link/constants/GithubLink.ts b/packages/twenty-front/src/modules/ui/navigation/link/constants/GithubLink.ts new file mode 100644 index 0000000000..428859df52 --- /dev/null +++ b/packages/twenty-front/src/modules/ui/navigation/link/constants/GithubLink.ts @@ -0,0 +1 @@ +export const GITHUB_LINK = 'https://github.com/twentyhq/twenty'; diff --git a/packages/twenty-front/src/modules/ui/navigation/link/constants/index.ts b/packages/twenty-front/src/modules/ui/navigation/link/constants/index.ts deleted file mode 100644 index 48feee776e..0000000000 --- a/packages/twenty-front/src/modules/ui/navigation/link/constants/index.ts +++ /dev/null @@ -1 +0,0 @@ -export const githubLink = 'https://github.com/twentyhq/twenty'; diff --git a/packages/twenty-front/src/modules/ui/navigation/menu-item/components/MenuItemSelectColor.tsx b/packages/twenty-front/src/modules/ui/navigation/menu-item/components/MenuItemSelectColor.tsx index 0f0a4b0fc8..90e535fab9 100644 --- a/packages/twenty-front/src/modules/ui/navigation/menu-item/components/MenuItemSelectColor.tsx +++ b/packages/twenty-front/src/modules/ui/navigation/menu-item/components/MenuItemSelectColor.tsx @@ -5,7 +5,7 @@ import { ColorSampleVariant, } from '@/ui/display/color/components/ColorSample'; import { IconCheck } from '@/ui/display/icon'; -import { ThemeColor } from '@/ui/theme/constants/colors'; +import { ThemeColor } from '@/ui/theme/constants/MainColorNames'; import { StyledMenuItemLabel, diff --git a/packages/twenty-front/src/modules/ui/navigation/menu-item/components/__stories__/MenuItemSelectColor.stories.tsx b/packages/twenty-front/src/modules/ui/navigation/menu-item/components/__stories__/MenuItemSelectColor.stories.tsx index 5678a43455..26164369ef 100644 --- a/packages/twenty-front/src/modules/ui/navigation/menu-item/components/__stories__/MenuItemSelectColor.stories.tsx +++ b/packages/twenty-front/src/modules/ui/navigation/menu-item/components/__stories__/MenuItemSelectColor.stories.tsx @@ -1,7 +1,10 @@ import { Meta, StoryObj } from '@storybook/react'; import { ColorSampleVariant } from '@/ui/display/color/components/ColorSample'; -import { mainColorNames, ThemeColor } from '@/ui/theme/constants/colors'; +import { + MAIN_COLOR_NAMES, + ThemeColor, +} from '@/ui/theme/constants/MainColorNames'; import { CatalogDecorator, CatalogDimension, @@ -35,7 +38,7 @@ export const Catalog: CatalogStory = { dimensions: [ { name: 'color', - values: mainColorNames, + values: MAIN_COLOR_NAMES, props: (color: ThemeColor) => ({ color }), labels: (color: ThemeColor) => color, }, diff --git a/packages/twenty-front/src/modules/ui/navigation/menu-item/internals/components/StyledMenuItemBase.tsx b/packages/twenty-front/src/modules/ui/navigation/menu-item/internals/components/StyledMenuItemBase.tsx index 7fc9e0b790..a1dc523c19 100644 --- a/packages/twenty-front/src/modules/ui/navigation/menu-item/internals/components/StyledMenuItemBase.tsx +++ b/packages/twenty-front/src/modules/ui/navigation/menu-item/internals/components/StyledMenuItemBase.tsx @@ -1,7 +1,7 @@ import { css } from '@emotion/react'; import styled from '@emotion/styled'; -import { hoverBackground } from '@/ui/theme/constants/effects'; +import { HOVER_BACKGROUND } from '@/ui/theme/constants/HoverBackground'; import { MenuItemAccent } from '../../types/MenuItemAccent'; @@ -36,7 +36,7 @@ export const StyledMenuItemBase = styled.li` padding: var(--vertical-padding) var(--horizontal-padding); - ${hoverBackground}; + ${HOVER_BACKGROUND}; ${({ theme, accent }) => { switch (accent) { diff --git a/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawer.tsx b/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawer.tsx index 1f84d79ad2..88cf5f9b42 100644 --- a/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawer.tsx +++ b/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawer.tsx @@ -5,10 +5,10 @@ import { motion } from 'framer-motion'; import { useRecoilValue } from 'recoil'; import { isNavigationDrawerOpenState } from '@/ui/navigation/states/isNavigationDrawerOpenState'; -import { MOBILE_VIEWPORT } from '@/ui/theme/constants/theme'; +import { MOBILE_VIEWPORT } from '@/ui/theme/constants/MobileViewport'; import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile'; -import { desktopNavDrawerWidths } from '../constants'; +import { DESKTOP_NAV_DRAWER_WIDTHS } from '../constants/DesktopNavDrawerWidths'; import { NavigationDrawerBackButton } from './NavigationDrawerBackButton'; import { NavigationDrawerHeader } from './NavigationDrawerHeader'; @@ -33,7 +33,7 @@ const StyledContainer = styled.div<{ isSubMenu?: boolean }>` flex-direction: column; gap: ${({ theme }) => theme.spacing(3)}; height: 100%; - min-width: ${desktopNavDrawerWidths.menu}px; + min-width: ${DESKTOP_NAV_DRAWER_WIDTHS.menu}px; padding: ${({ theme }) => theme.spacing(3, 2, 4)}; ${({ isSubMenu, theme }) => @@ -80,7 +80,7 @@ export const NavigationDrawer = ({ const desktopWidth = !isNavigationDrawerOpen ? 12 - : desktopNavDrawerWidths.menu; + : DESKTOP_NAV_DRAWER_WIDTHS.menu; const mobileWidth = isNavigationDrawerOpen ? '100%' : 0; diff --git a/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerItem.tsx b/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerItem.tsx index 69e1be7418..916edd0a74 100644 --- a/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerItem.tsx +++ b/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerItem.tsx @@ -5,7 +5,7 @@ import { useSetRecoilState } from 'recoil'; import { IconComponent } from '@/ui/display/icon/types/IconComponent'; import { isNavigationDrawerOpenState } from '@/ui/navigation/states/isNavigationDrawerOpenState'; -import { MOBILE_VIEWPORT } from '@/ui/theme/constants/theme'; +import { MOBILE_VIEWPORT } from '@/ui/theme/constants/MobileViewport'; import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile'; export type NavigationDrawerItemProps = { diff --git a/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/constants/DesktopNavDrawerWidths.ts b/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/constants/DesktopNavDrawerWidths.ts new file mode 100644 index 0000000000..dae34ed195 --- /dev/null +++ b/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/constants/DesktopNavDrawerWidths.ts @@ -0,0 +1,3 @@ +export const DESKTOP_NAV_DRAWER_WIDTHS = { + menu: 236, +}; diff --git a/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/constants/index.ts b/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/constants/index.ts deleted file mode 100644 index 262bd15e3b..0000000000 --- a/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/constants/index.ts +++ /dev/null @@ -1,3 +0,0 @@ -export const desktopNavDrawerWidths = { - menu: 236, -}; diff --git a/packages/twenty-front/src/modules/ui/navigation/states/isNavigationDrawerOpenState.ts b/packages/twenty-front/src/modules/ui/navigation/states/isNavigationDrawerOpenState.ts index 89c23890fe..33c9c37eed 100644 --- a/packages/twenty-front/src/modules/ui/navigation/states/isNavigationDrawerOpenState.ts +++ b/packages/twenty-front/src/modules/ui/navigation/states/isNavigationDrawerOpenState.ts @@ -1,6 +1,6 @@ import { atom } from 'recoil'; -import { MOBILE_VIEWPORT } from '@/ui/theme/constants/theme'; +import { MOBILE_VIEWPORT } from '@/ui/theme/constants/MobileViewport'; const isMobile = window.innerWidth <= MOBILE_VIEWPORT; diff --git a/packages/twenty-front/src/modules/ui/navigation/step-bar/components/Step.tsx b/packages/twenty-front/src/modules/ui/navigation/step-bar/components/Step.tsx index 88712e1e2a..6fed186244 100644 --- a/packages/twenty-front/src/modules/ui/navigation/step-bar/components/Step.tsx +++ b/packages/twenty-front/src/modules/ui/navigation/step-bar/components/Step.tsx @@ -3,7 +3,7 @@ import styled from '@emotion/styled'; import { motion } from 'framer-motion'; import { AnimatedCheckmark } from '@/ui/display/checkmark/components/AnimatedCheckmark'; -import { MOBILE_VIEWPORT } from '@/ui/theme/constants/theme'; +import { MOBILE_VIEWPORT } from '@/ui/theme/constants/MobileViewport'; import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile'; const StyledContainer = styled.div<{ isLast: boolean }>` diff --git a/packages/twenty-front/src/modules/ui/navigation/step-bar/components/StepBar.tsx b/packages/twenty-front/src/modules/ui/navigation/step-bar/components/StepBar.tsx index b9564a5618..1f7ca533e3 100644 --- a/packages/twenty-front/src/modules/ui/navigation/step-bar/components/StepBar.tsx +++ b/packages/twenty-front/src/modules/ui/navigation/step-bar/components/StepBar.tsx @@ -1,7 +1,7 @@ import React from 'react'; import styled from '@emotion/styled'; -import { MOBILE_VIEWPORT } from '@/ui/theme/constants/theme'; +import { MOBILE_VIEWPORT } from '@/ui/theme/constants/MobileViewport'; import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile'; import { Step, StepProps } from './Step'; diff --git a/packages/twenty-front/src/modules/ui/theme/components/AppThemeProvider.tsx b/packages/twenty-front/src/modules/ui/theme/components/AppThemeProvider.tsx index 41afd6dd75..d1f14d2623 100644 --- a/packages/twenty-front/src/modules/ui/theme/components/AppThemeProvider.tsx +++ b/packages/twenty-front/src/modules/ui/theme/components/AppThemeProvider.tsx @@ -1,6 +1,7 @@ import { ThemeProvider } from '@emotion/react'; -import { darkTheme, lightTheme } from '@/ui/theme/constants/theme'; +import { THEME_DARK } from '@/ui/theme/constants/ThemeDark'; +import { THEME_LIGHT } from '@/ui/theme/constants/ThemeLight'; import { useColorScheme } from '../hooks/useColorScheme'; import { useSystemColorScheme } from '../hooks/useSystemColorScheme'; @@ -17,7 +18,7 @@ export const AppThemeProvider = ({ children }: AppThemeProviderProps) => { const computedColorScheme = colorScheme === 'System' ? systemColorScheme : colorScheme; - const theme = computedColorScheme === 'Dark' ? darkTheme : lightTheme; + const theme = computedColorScheme === 'Dark' ? THEME_DARK : THEME_LIGHT; return {children}; }; diff --git a/packages/twenty-front/src/modules/ui/theme/constants/AccentDark.ts b/packages/twenty-front/src/modules/ui/theme/constants/AccentDark.ts new file mode 100644 index 0000000000..35918883d3 --- /dev/null +++ b/packages/twenty-front/src/modules/ui/theme/constants/AccentDark.ts @@ -0,0 +1,10 @@ +import { COLOR } from './Colors'; + +export const ACCENT_DARK = { + primary: COLOR.blueAccent75, + secondary: COLOR.blueAccent80, + tertiary: COLOR.blueAccent85, + quaternary: COLOR.blueAccent90, + accent3570: COLOR.blueAccent70, + accent4060: COLOR.blueAccent60, +}; diff --git a/packages/twenty-front/src/modules/ui/theme/constants/AccentLight.ts b/packages/twenty-front/src/modules/ui/theme/constants/AccentLight.ts new file mode 100644 index 0000000000..7c89896972 --- /dev/null +++ b/packages/twenty-front/src/modules/ui/theme/constants/AccentLight.ts @@ -0,0 +1,10 @@ +import { COLOR } from './Colors'; + +export const ACCENT_LIGHT = { + primary: COLOR.blueAccent25, + secondary: COLOR.blueAccent20, + tertiary: COLOR.blueAccent15, + quaternary: COLOR.blueAccent10, + accent3570: COLOR.blueAccent35, + accent4060: COLOR.blueAccent40, +}; diff --git a/packages/twenty-front/src/modules/ui/theme/constants/animation.ts b/packages/twenty-front/src/modules/ui/theme/constants/Animation.ts similarity index 83% rename from packages/twenty-front/src/modules/ui/theme/constants/animation.ts rename to packages/twenty-front/src/modules/ui/theme/constants/Animation.ts index 04adcee2b0..865d43b2b9 100644 --- a/packages/twenty-front/src/modules/ui/theme/constants/animation.ts +++ b/packages/twenty-front/src/modules/ui/theme/constants/Animation.ts @@ -1,4 +1,4 @@ -export const animation = { +export const ANIMATION = { duration: { instant: 0.075, fast: 0.15, diff --git a/packages/twenty-front/src/modules/ui/theme/constants/BackgroundDark.ts b/packages/twenty-front/src/modules/ui/theme/constants/BackgroundDark.ts new file mode 100644 index 0000000000..c5204dbbaf --- /dev/null +++ b/packages/twenty-front/src/modules/ui/theme/constants/BackgroundDark.ts @@ -0,0 +1,27 @@ +/* eslint-disable @nx/workspace-no-hardcoded-colors */ +import { COLOR } from '@/ui/theme/constants/Colors'; +import { GRAY_SCALE } from '@/ui/theme/constants/GrayScale'; +import { RGBA } from '@/ui/theme/constants/Rgba'; + +import DarkNoise from '../assets/dark-noise.jpg'; + +export const BACKGROUND_DARK = { + noisy: `url(${DarkNoise.toString()});`, + primary: GRAY_SCALE.gray85, + secondary: GRAY_SCALE.gray80, + tertiary: GRAY_SCALE.gray75, + quaternary: GRAY_SCALE.gray70, + danger: COLOR.red80, + transparent: { + primary: RGBA(GRAY_SCALE.gray85, 0.8), + secondary: RGBA(GRAY_SCALE.gray80, 0.8), + strong: RGBA(GRAY_SCALE.gray0, 0.14), + medium: RGBA(GRAY_SCALE.gray0, 0.1), + light: RGBA(GRAY_SCALE.gray0, 0.06), + lighter: RGBA(GRAY_SCALE.gray0, 0.03), + danger: RGBA(COLOR.red, 0.08), + }, + overlay: RGBA(GRAY_SCALE.gray80, 0.8), + radialGradient: `radial-gradient(50% 62.62% at 50% 0%, #505050 0%, ${GRAY_SCALE.gray60} 100%)`, + radialGradientHover: `radial-gradient(76.32% 95.59% at 50% 0%, #505050 0%, ${GRAY_SCALE.gray60} 100%)`, +}; diff --git a/packages/twenty-front/src/modules/ui/theme/constants/BackgroundLight.ts b/packages/twenty-front/src/modules/ui/theme/constants/BackgroundLight.ts new file mode 100644 index 0000000000..3247f5f9fb --- /dev/null +++ b/packages/twenty-front/src/modules/ui/theme/constants/BackgroundLight.ts @@ -0,0 +1,27 @@ +/* eslint-disable @nx/workspace-no-hardcoded-colors */ +import { COLOR } from '@/ui/theme/constants/Colors'; +import { GRAY_SCALE } from '@/ui/theme/constants/GrayScale'; +import { RGBA } from '@/ui/theme/constants/Rgba'; + +import LightNoise from '../assets/light-noise.png'; + +export const BACKGROUND_LIGHT = { + noisy: `url(${LightNoise.toString()});`, + primary: GRAY_SCALE.gray0, + secondary: GRAY_SCALE.gray10, + tertiary: GRAY_SCALE.gray15, + quaternary: GRAY_SCALE.gray20, + danger: COLOR.red10, + transparent: { + primary: RGBA(GRAY_SCALE.gray0, 0.8), + secondary: RGBA(GRAY_SCALE.gray10, 0.8), + strong: RGBA(GRAY_SCALE.gray100, 0.16), + medium: RGBA(GRAY_SCALE.gray100, 0.08), + light: RGBA(GRAY_SCALE.gray100, 0.04), + lighter: RGBA(GRAY_SCALE.gray100, 0.02), + danger: RGBA(COLOR.red, 0.08), + }, + overlay: RGBA(GRAY_SCALE.gray80, 0.8), + radialGradient: `radial-gradient(50% 62.62% at 50% 0%, #505050 0%, ${GRAY_SCALE.gray60} 100%)`, + radialGradientHover: `radial-gradient(76.32% 95.59% at 50% 0%, #505050 0%, ${GRAY_SCALE.gray60} 100%)`, +}; diff --git a/packages/twenty-front/src/modules/ui/theme/constants/blur.ts b/packages/twenty-front/src/modules/ui/theme/constants/Blur.ts similarity index 69% rename from packages/twenty-front/src/modules/ui/theme/constants/blur.ts rename to packages/twenty-front/src/modules/ui/theme/constants/Blur.ts index 9028343902..01f2651473 100644 --- a/packages/twenty-front/src/modules/ui/theme/constants/blur.ts +++ b/packages/twenty-front/src/modules/ui/theme/constants/Blur.ts @@ -1,4 +1,4 @@ -export const blur = { +export const BLUR = { light: 'blur(6px)', strong: 'blur(20px)', }; diff --git a/packages/twenty-front/src/modules/ui/theme/constants/BorderCommon.ts b/packages/twenty-front/src/modules/ui/theme/constants/BorderCommon.ts new file mode 100644 index 0000000000..a68f017bc4 --- /dev/null +++ b/packages/twenty-front/src/modules/ui/theme/constants/BorderCommon.ts @@ -0,0 +1,10 @@ +export const BORDER_COMMON = { + radius: { + xs: '2px', + sm: '4px', + md: '8px', + xl: '20px', + pill: '999px', + rounded: '100%', + }, +}; diff --git a/packages/twenty-front/src/modules/ui/theme/constants/BorderDark.ts b/packages/twenty-front/src/modules/ui/theme/constants/BorderDark.ts new file mode 100644 index 0000000000..98d7cb80b2 --- /dev/null +++ b/packages/twenty-front/src/modules/ui/theme/constants/BorderDark.ts @@ -0,0 +1,15 @@ +import { BORDER_COMMON } from '@/ui/theme/constants/BorderCommon'; +import { COLOR } from '@/ui/theme/constants/Colors'; +import { GRAY_SCALE } from '@/ui/theme/constants/GrayScale'; + +export const BORDER_DARK = { + color: { + strong: GRAY_SCALE.gray55, + medium: GRAY_SCALE.gray65, + light: GRAY_SCALE.gray70, + secondaryInverted: GRAY_SCALE.gray35, + inverted: GRAY_SCALE.gray20, + danger: COLOR.red70, + }, + ...BORDER_COMMON, +}; diff --git a/packages/twenty-front/src/modules/ui/theme/constants/BorderLight.ts b/packages/twenty-front/src/modules/ui/theme/constants/BorderLight.ts new file mode 100644 index 0000000000..fbc43b1307 --- /dev/null +++ b/packages/twenty-front/src/modules/ui/theme/constants/BorderLight.ts @@ -0,0 +1,15 @@ +import { BORDER_COMMON } from '@/ui/theme/constants/BorderCommon'; +import { COLOR } from '@/ui/theme/constants/Colors'; +import { GRAY_SCALE } from '@/ui/theme/constants/GrayScale'; + +export const BORDER_LIGHT = { + color: { + strong: GRAY_SCALE.gray25, + medium: GRAY_SCALE.gray20, + light: GRAY_SCALE.gray15, + secondaryInverted: GRAY_SCALE.gray50, + inverted: GRAY_SCALE.gray60, + danger: COLOR.red20, + }, + ...BORDER_COMMON, +}; diff --git a/packages/twenty-front/src/modules/ui/theme/constants/BoxShadowDark.ts b/packages/twenty-front/src/modules/ui/theme/constants/BoxShadowDark.ts new file mode 100644 index 0000000000..3c0ae9c333 --- /dev/null +++ b/packages/twenty-front/src/modules/ui/theme/constants/BoxShadowDark.ts @@ -0,0 +1,18 @@ +import { GRAY_SCALE } from '@/ui/theme/constants/GrayScale'; +import { RGBA } from '@/ui/theme/constants/Rgba'; + +export const BOX_SHADOW_DARK = { + light: `0px 2px 4px 0px ${RGBA( + GRAY_SCALE.gray100, + 0.04, + )}, 0px 0px 4px 0px ${RGBA(GRAY_SCALE.gray100, 0.08)}`, + strong: `2px 4px 16px 0px ${RGBA( + GRAY_SCALE.gray100, + 0.16, + )}, 0px 2px 4px 0px ${RGBA(GRAY_SCALE.gray100, 0.08)}`, + underline: `0px 1px 0px 0px ${RGBA(GRAY_SCALE.gray100, 0.32)}`, + superHeavy: `2px 4px 16px 0px ${RGBA( + GRAY_SCALE.gray100, + 0.12, + )}, 0px 2px 4px 0px ${RGBA(GRAY_SCALE.gray100, 0.04)}`, +}; diff --git a/packages/twenty-front/src/modules/ui/theme/constants/BoxShadowLight.ts b/packages/twenty-front/src/modules/ui/theme/constants/BoxShadowLight.ts new file mode 100644 index 0000000000..9ed6fd1238 --- /dev/null +++ b/packages/twenty-front/src/modules/ui/theme/constants/BoxShadowLight.ts @@ -0,0 +1,21 @@ +import { GRAY_SCALE } from '@/ui/theme/constants/GrayScale'; +import { RGBA } from '@/ui/theme/constants/Rgba'; + +export const BOX_SHADOW_LIGHT = { + light: `0px 2px 4px 0px ${RGBA( + GRAY_SCALE.gray100, + 0.04, + )}, 0px 0px 4px 0px ${RGBA(GRAY_SCALE.gray100, 0.08)}`, + strong: `2px 4px 16px 0px ${RGBA( + GRAY_SCALE.gray100, + 0.12, + )}, 0px 2px 4px 0px ${RGBA(GRAY_SCALE.gray100, 0.04)}`, + underline: `0px 1px 0px 0px ${RGBA(GRAY_SCALE.gray100, 0.32)}`, + superHeavy: `0px 0px 8px 0px ${RGBA( + GRAY_SCALE.gray100, + 0.16, + )}, 0px 8px 64px -16px ${RGBA( + GRAY_SCALE.gray100, + 0.48, + )}, 0px 24px 56px -16px ${RGBA(GRAY_SCALE.gray100, 0.08)}`, +}; diff --git a/packages/twenty-front/src/modules/ui/theme/constants/Colors.ts b/packages/twenty-front/src/modules/ui/theme/constants/Colors.ts new file mode 100644 index 0000000000..022a67b707 --- /dev/null +++ b/packages/twenty-front/src/modules/ui/theme/constants/Colors.ts @@ -0,0 +1,7 @@ +import { MAIN_COLORS } from '@/ui/theme/constants/MainColors'; +import { SECONDARY_COLORS } from '@/ui/theme/constants/SecondaryColors'; + +export const COLOR = { + ...MAIN_COLORS, + ...SECONDARY_COLORS, +}; diff --git a/packages/twenty-front/src/modules/ui/theme/constants/FontCommon.ts b/packages/twenty-front/src/modules/ui/theme/constants/FontCommon.ts new file mode 100644 index 0000000000..65556c018d --- /dev/null +++ b/packages/twenty-front/src/modules/ui/theme/constants/FontCommon.ts @@ -0,0 +1,17 @@ +export const FONT_COMMON = { + size: { + xxs: '0.625rem', + xs: '0.85rem', + sm: '0.92rem', + md: '1rem', + lg: '1.23rem', + xl: '1.54rem', + xxl: '1.85rem', + }, + weight: { + regular: 400, + medium: 500, + semiBold: 600, + }, + family: 'Inter, sans-serif', +}; diff --git a/packages/twenty-front/src/modules/ui/theme/constants/FontDark.ts b/packages/twenty-front/src/modules/ui/theme/constants/FontDark.ts new file mode 100644 index 0000000000..07aac6f97c --- /dev/null +++ b/packages/twenty-front/src/modules/ui/theme/constants/FontDark.ts @@ -0,0 +1,16 @@ +import { COLOR } from '@/ui/theme/constants/Colors'; +import { FONT_COMMON } from '@/ui/theme/constants/FontCommon'; +import { GRAY_SCALE } from '@/ui/theme/constants/GrayScale'; + +export const FONT_DARK = { + color: { + primary: GRAY_SCALE.gray20, + secondary: GRAY_SCALE.gray35, + tertiary: GRAY_SCALE.gray45, + light: GRAY_SCALE.gray50, + extraLight: GRAY_SCALE.gray55, + inverted: GRAY_SCALE.gray100, + danger: COLOR.red, + }, + ...FONT_COMMON, +}; diff --git a/packages/twenty-front/src/modules/ui/theme/constants/FontLight.ts b/packages/twenty-front/src/modules/ui/theme/constants/FontLight.ts new file mode 100644 index 0000000000..9681a65027 --- /dev/null +++ b/packages/twenty-front/src/modules/ui/theme/constants/FontLight.ts @@ -0,0 +1,16 @@ +import { COLOR } from '@/ui/theme/constants/Colors'; +import { FONT_COMMON } from '@/ui/theme/constants/FontCommon'; +import { GRAY_SCALE } from '@/ui/theme/constants/GrayScale'; + +export const FONT_LIGHT = { + color: { + primary: GRAY_SCALE.gray60, + secondary: GRAY_SCALE.gray50, + tertiary: GRAY_SCALE.gray40, + light: GRAY_SCALE.gray35, + extraLight: GRAY_SCALE.gray30, + inverted: GRAY_SCALE.gray0, + danger: COLOR.red, + }, + ...FONT_COMMON, +}; diff --git a/packages/twenty-front/src/modules/ui/theme/constants/GrayScale.ts b/packages/twenty-front/src/modules/ui/theme/constants/GrayScale.ts new file mode 100644 index 0000000000..90c194d924 --- /dev/null +++ b/packages/twenty-front/src/modules/ui/theme/constants/GrayScale.ts @@ -0,0 +1,22 @@ +/* eslint-disable @nx/workspace-no-hardcoded-colors */ +export const GRAY_SCALE = { + gray100: '#000000', + gray90: '#141414', + gray85: '#171717', + gray80: '#1b1b1b', + gray75: '#1d1d1d', + gray70: '#222222', + gray65: '#292929', + gray60: '#333333', + gray55: '#4c4c4c', + gray50: '#666666', + gray45: '#818181', + gray40: '#999999', + gray35: '#b3b3b3', + gray30: '#cccccc', + gray25: '#d6d6d6', + gray20: '#ebebeb', + gray15: '#f1f1f1', + gray10: '#fcfcfc', + gray0: '#ffffff', +}; diff --git a/packages/twenty-front/src/modules/ui/theme/constants/HoverBackground.ts b/packages/twenty-front/src/modules/ui/theme/constants/HoverBackground.ts new file mode 100644 index 0000000000..cbd9b9e0e4 --- /dev/null +++ b/packages/twenty-front/src/modules/ui/theme/constants/HoverBackground.ts @@ -0,0 +1,8 @@ +import { css } from '@emotion/react'; + +export const HOVER_BACKGROUND = (props: any) => css` + transition: background 0.1s ease; + &:hover { + background: ${props.theme.background.transparent.light}; + } +`; diff --git a/packages/twenty-front/src/modules/ui/theme/constants/icon.ts b/packages/twenty-front/src/modules/ui/theme/constants/Icon.ts similarity index 84% rename from packages/twenty-front/src/modules/ui/theme/constants/icon.ts rename to packages/twenty-front/src/modules/ui/theme/constants/Icon.ts index a6654de668..e103c0b8ec 100644 --- a/packages/twenty-front/src/modules/ui/theme/constants/icon.ts +++ b/packages/twenty-front/src/modules/ui/theme/constants/Icon.ts @@ -1,4 +1,4 @@ -export const icon = { +export const ICON = { size: { sm: 14, md: 16, diff --git a/packages/twenty-front/src/modules/ui/theme/constants/MainColorNames.ts b/packages/twenty-front/src/modules/ui/theme/constants/MainColorNames.ts new file mode 100644 index 0000000000..648389ee7d --- /dev/null +++ b/packages/twenty-front/src/modules/ui/theme/constants/MainColorNames.ts @@ -0,0 +1,5 @@ +import { MAIN_COLORS } from '@/ui/theme/constants/MainColors'; + +export const MAIN_COLOR_NAMES = Object.keys(MAIN_COLORS) as ThemeColor[]; + +export type ThemeColor = keyof typeof MAIN_COLORS; diff --git a/packages/twenty-front/src/modules/ui/theme/constants/MainColors.ts b/packages/twenty-front/src/modules/ui/theme/constants/MainColors.ts new file mode 100644 index 0000000000..d9d969a62b --- /dev/null +++ b/packages/twenty-front/src/modules/ui/theme/constants/MainColors.ts @@ -0,0 +1,15 @@ +/* eslint-disable @nx/workspace-no-hardcoded-colors */ +import { GRAY_SCALE } from '@/ui/theme/constants/GrayScale'; + +export const MAIN_COLORS = { + green: '#55ef3c', + turquoise: '#15de8f', + sky: '#00e0ff', + blue: '#1961ed', + purple: '#915ffd', + pink: '#f54bd0', + red: '#f83e3e', + orange: '#ff7222', + yellow: '#ffd338', + gray: GRAY_SCALE.gray30, +}; diff --git a/packages/twenty-front/src/modules/ui/theme/constants/MobileViewport.ts b/packages/twenty-front/src/modules/ui/theme/constants/MobileViewport.ts new file mode 100644 index 0000000000..485d2dacd0 --- /dev/null +++ b/packages/twenty-front/src/modules/ui/theme/constants/MobileViewport.ts @@ -0,0 +1 @@ +export const MOBILE_VIEWPORT = 768; diff --git a/packages/twenty-front/src/modules/ui/theme/constants/modal.ts b/packages/twenty-front/src/modules/ui/theme/constants/Modal.ts similarity index 74% rename from packages/twenty-front/src/modules/ui/theme/constants/modal.ts rename to packages/twenty-front/src/modules/ui/theme/constants/Modal.ts index 30099fde89..2a53265cc0 100644 --- a/packages/twenty-front/src/modules/ui/theme/constants/modal.ts +++ b/packages/twenty-front/src/modules/ui/theme/constants/Modal.ts @@ -1,4 +1,4 @@ -export const modal = { +export const MODAL = { size: { sm: '300px', md: '400px', diff --git a/packages/twenty-front/src/modules/ui/theme/constants/OverlayBackground.ts b/packages/twenty-front/src/modules/ui/theme/constants/OverlayBackground.ts new file mode 100644 index 0000000000..b86741fff7 --- /dev/null +++ b/packages/twenty-front/src/modules/ui/theme/constants/OverlayBackground.ts @@ -0,0 +1,9 @@ +import { css } from '@emotion/react'; + +import { ThemeType } from './ThemeLight'; + +export const OVERLAY_BACKGROUND = (props: { theme: ThemeType }) => css` + backdrop-filter: blur(8px); + background: ${props.theme.background.transparent.secondary}; + box-shadow: ${props.theme.boxShadow.strong}; +`; diff --git a/packages/twenty-front/src/modules/ui/theme/constants/Rgba.ts b/packages/twenty-front/src/modules/ui/theme/constants/Rgba.ts new file mode 100644 index 0000000000..6b06f2a64e --- /dev/null +++ b/packages/twenty-front/src/modules/ui/theme/constants/Rgba.ts @@ -0,0 +1,8 @@ +/* eslint-disable @nx/workspace-no-hardcoded-colors */ +import hexRgb from 'hex-rgb'; + +export const RGBA = (hex: string, alpha: number) => { + return `rgba(${hexRgb(hex, { format: 'array' }) + .slice(0, -1) + .join(',')},${alpha})`; +}; diff --git a/packages/twenty-front/src/modules/ui/theme/constants/colors.ts b/packages/twenty-front/src/modules/ui/theme/constants/SecondaryColors.ts similarity index 60% rename from packages/twenty-front/src/modules/ui/theme/constants/colors.ts rename to packages/twenty-front/src/modules/ui/theme/constants/SecondaryColors.ts index c6d022c426..2eb3be248f 100644 --- a/packages/twenty-front/src/modules/ui/theme/constants/colors.ts +++ b/packages/twenty-front/src/modules/ui/theme/constants/SecondaryColors.ts @@ -1,46 +1,7 @@ /* eslint-disable @nx/workspace-no-hardcoded-colors */ -import hexRgb from 'hex-rgb'; +import { GRAY_SCALE } from '@/ui/theme/constants/GrayScale'; -export const grayScale = { - gray100: '#000000', - gray90: '#141414', - gray85: '#171717', - gray80: '#1b1b1b', - gray75: '#1d1d1d', - gray70: '#222222', - gray65: '#292929', - gray60: '#333333', - gray55: '#4c4c4c', - gray50: '#666666', - gray45: '#818181', - gray40: '#999999', - gray35: '#b3b3b3', - gray30: '#cccccc', - gray25: '#d6d6d6', - gray20: '#ebebeb', - gray15: '#f1f1f1', - gray10: '#fcfcfc', - gray0: '#ffffff', -}; - -export const mainColors = { - green: '#55ef3c', - turquoise: '#15de8f', - sky: '#00e0ff', - blue: '#1961ed', - purple: '#915ffd', - pink: '#f54bd0', - red: '#f83e3e', - orange: '#ff7222', - yellow: '#ffd338', - gray: grayScale.gray30, -}; - -export type ThemeColor = keyof typeof mainColors; - -export const mainColorNames = Object.keys(mainColors) as ThemeColor[]; - -export const secondaryColors = { +export const SECONDARY_COLORS = { yellow80: '#2e2a1a', yellow70: '#453d1e', yellow60: '#746224', @@ -122,14 +83,14 @@ export const secondaryColors = { orange20: '#ffe3d3', orange10: '#fff1e9', - gray80: grayScale.gray70, - gray70: grayScale.gray65, - gray60: grayScale.gray55, - gray50: grayScale.gray40, - gray40: grayScale.gray25, - gray30: grayScale.gray20, - gray20: grayScale.gray15, - gray10: grayScale.gray10, + gray80: GRAY_SCALE.gray70, + gray70: GRAY_SCALE.gray65, + gray60: GRAY_SCALE.gray55, + gray50: GRAY_SCALE.gray40, + gray40: GRAY_SCALE.gray25, + gray30: GRAY_SCALE.gray20, + gray20: GRAY_SCALE.gray15, + gray10: GRAY_SCALE.gray10, blueAccent90: '#141a25', blueAccent85: '#151d2e', blueAccent80: '#152037', @@ -143,13 +104,3 @@ export const secondaryColors = { blueAccent15: '#edf2fe', blueAccent10: '#f5f9fd', }; - -export const color = { - ...mainColors, - ...secondaryColors, -}; - -export const rgba = (hex: string, alpha: number) => { - const rgb = hexRgb(hex, { format: 'array' }).slice(0, -1).join(','); - return `rgba(${rgb},${alpha})`; -}; diff --git a/packages/twenty-front/src/modules/ui/theme/constants/TagDark.ts b/packages/twenty-front/src/modules/ui/theme/constants/TagDark.ts new file mode 100644 index 0000000000..f146d694b5 --- /dev/null +++ b/packages/twenty-front/src/modules/ui/theme/constants/TagDark.ts @@ -0,0 +1,28 @@ +import { COLOR } from '@/ui/theme/constants/Colors'; + +export const TAG_DARK = { + text: { + green: COLOR.green10, + turquoise: COLOR.turquoise10, + sky: COLOR.sky10, + blue: COLOR.blue10, + purple: COLOR.purple10, + pink: COLOR.pink10, + red: COLOR.red10, + orange: COLOR.orange10, + yellow: COLOR.yellow10, + gray: COLOR.gray10, + }, + background: { + green: COLOR.green60, + turquoise: COLOR.turquoise60, + sky: COLOR.sky60, + blue: COLOR.blue60, + purple: COLOR.purple60, + pink: COLOR.pink60, + red: COLOR.red60, + orange: COLOR.orange60, + yellow: COLOR.yellow60, + gray: COLOR.gray60, + }, +}; diff --git a/packages/twenty-front/src/modules/ui/theme/constants/TagLight.ts b/packages/twenty-front/src/modules/ui/theme/constants/TagLight.ts new file mode 100644 index 0000000000..29bdee8be6 --- /dev/null +++ b/packages/twenty-front/src/modules/ui/theme/constants/TagLight.ts @@ -0,0 +1,28 @@ +import { COLOR } from './Colors'; + +export const TAG_LIGHT = { + text: { + green: COLOR.green60, + turquoise: COLOR.turquoise60, + sky: COLOR.sky60, + blue: COLOR.blue60, + purple: COLOR.purple60, + pink: COLOR.pink60, + red: COLOR.red60, + orange: COLOR.orange60, + yellow: COLOR.yellow60, + gray: COLOR.gray60, + }, + background: { + green: COLOR.green20, + turquoise: COLOR.turquoise20, + sky: COLOR.sky20, + blue: COLOR.blue20, + purple: COLOR.purple20, + pink: COLOR.pink20, + red: COLOR.red20, + orange: COLOR.orange20, + yellow: COLOR.yellow20, + gray: COLOR.gray20, + }, +}; diff --git a/packages/twenty-front/src/modules/ui/theme/constants/text.ts b/packages/twenty-front/src/modules/ui/theme/constants/Text.ts similarity index 88% rename from packages/twenty-front/src/modules/ui/theme/constants/text.ts rename to packages/twenty-front/src/modules/ui/theme/constants/Text.ts index 0f571de7c1..db9a0786b7 100644 --- a/packages/twenty-front/src/modules/ui/theme/constants/text.ts +++ b/packages/twenty-front/src/modules/ui/theme/constants/Text.ts @@ -1,4 +1,4 @@ -export const text = { +export const TEXT = { lineHeight: { lg: 1.5, md: 1.2, diff --git a/packages/twenty-front/src/modules/ui/theme/constants/effects.ts b/packages/twenty-front/src/modules/ui/theme/constants/TextInputStyle.ts similarity index 50% rename from packages/twenty-front/src/modules/ui/theme/constants/effects.ts rename to packages/twenty-front/src/modules/ui/theme/constants/TextInputStyle.ts index 19874ba212..655f4b0e2c 100644 --- a/packages/twenty-front/src/modules/ui/theme/constants/effects.ts +++ b/packages/twenty-front/src/modules/ui/theme/constants/TextInputStyle.ts @@ -1,14 +1,8 @@ import { css } from '@emotion/react'; -import { ThemeType } from './theme'; +import { ThemeType } from './ThemeLight'; -export const overlayBackground = (props: { theme: ThemeType }) => css` - backdrop-filter: blur(8px); - background: ${props.theme.background.transparent.secondary}; - box-shadow: ${props.theme.boxShadow.strong}; -`; - -export const textInputStyle = (props: { theme: ThemeType }) => css` +export const TEXT_INPUT_STYLE = (props: { theme: ThemeType }) => css` background-color: transparent; border: none; color: ${props.theme.font.color.primary}; @@ -25,10 +19,3 @@ export const textInputStyle = (props: { theme: ThemeType }) => css` font-weight: ${props.theme.font.weight.medium}; } `; - -export const hoverBackground = (props: any) => css` - transition: background 0.1s ease; - &:hover { - background: ${props.theme.background.transparent.light}; - } -`; diff --git a/packages/twenty-front/src/modules/ui/theme/constants/ThemeCommon.ts b/packages/twenty-front/src/modules/ui/theme/constants/ThemeCommon.ts new file mode 100644 index 0000000000..1480582a2f --- /dev/null +++ b/packages/twenty-front/src/modules/ui/theme/constants/ThemeCommon.ts @@ -0,0 +1,44 @@ +/* eslint-disable @nx/workspace-no-hardcoded-colors */ +import { ANIMATION } from '@/ui/theme/constants/Animation'; +import { BLUR } from '@/ui/theme/constants/Blur'; +import { COLOR } from '@/ui/theme/constants/Colors'; +import { GRAY_SCALE } from '@/ui/theme/constants/GrayScale'; +import { ICON } from '@/ui/theme/constants/Icon'; +import { MODAL } from '@/ui/theme/constants/Modal'; +import { TEXT } from '@/ui/theme/constants/Text'; + +export const THEME_COMMON = { + color: COLOR, + grayScale: GRAY_SCALE, + icon: ICON, + modal: MODAL, + text: TEXT, + blur: BLUR, + animation: ANIMATION, + snackBar: { + success: { + background: '#16A26B', + color: '#D0F8E9', + }, + error: { + background: '#B43232', + color: '#FED8D8', + }, + info: { + background: COLOR.gray80, + color: GRAY_SCALE.gray0, + }, + }, + spacingMultiplicator: 4, + spacing: (...args: number[]) => + args.map((multiplicator) => `${multiplicator * 4}px`).join(' '), + betweenSiblingsGap: `2px`, + table: { + horizontalCellMargin: '8px', + checkboxColumnWidth: '32px', + horizontalCellPadding: '8px', + }, + rightDrawerWidth: '500px', + clickableElementBackgroundTransition: 'background 0.1s ease', + lastLayerZIndex: 2147483647, +}; diff --git a/packages/twenty-front/src/modules/ui/theme/constants/ThemeDark.ts b/packages/twenty-front/src/modules/ui/theme/constants/ThemeDark.ts new file mode 100644 index 0000000000..a80f03071c --- /dev/null +++ b/packages/twenty-front/src/modules/ui/theme/constants/ThemeDark.ts @@ -0,0 +1,21 @@ +import { ACCENT_DARK } from '@/ui/theme/constants/AccentDark'; +import { BACKGROUND_DARK } from '@/ui/theme/constants/BackgroundDark'; +import { BORDER_DARK } from '@/ui/theme/constants/BorderDark'; +import { BOX_SHADOW_DARK } from '@/ui/theme/constants/BoxShadowDark'; +import { FONT_DARK } from '@/ui/theme/constants/FontDark'; +import { TAG_DARK } from '@/ui/theme/constants/TagDark'; +import { THEME_COMMON } from '@/ui/theme/constants/ThemeCommon'; +import { ThemeType } from '@/ui/theme/constants/ThemeLight'; + +export const THEME_DARK: ThemeType = { + ...THEME_COMMON, + ...{ + accent: ACCENT_DARK, + background: BACKGROUND_DARK, + border: BORDER_DARK, + tag: TAG_DARK, + boxShadow: BOX_SHADOW_DARK, + font: FONT_DARK, + name: 'dark', + }, +}; diff --git a/packages/twenty-front/src/modules/ui/theme/constants/ThemeLight.ts b/packages/twenty-front/src/modules/ui/theme/constants/ThemeLight.ts new file mode 100644 index 0000000000..3f837e48f3 --- /dev/null +++ b/packages/twenty-front/src/modules/ui/theme/constants/ThemeLight.ts @@ -0,0 +1,22 @@ +import { ACCENT_LIGHT } from '@/ui/theme/constants/AccentLight'; +import { BACKGROUND_LIGHT } from '@/ui/theme/constants/BackgroundLight'; +import { BORDER_LIGHT } from '@/ui/theme/constants/BorderLight'; +import { BOX_SHADOW_LIGHT } from '@/ui/theme/constants/BoxShadowLight'; +import { FONT_LIGHT } from '@/ui/theme/constants/FontLight'; +import { TAG_LIGHT } from '@/ui/theme/constants/TagLight'; +import { THEME_COMMON } from '@/ui/theme/constants/ThemeCommon'; + +export const THEME_LIGHT = { + ...THEME_COMMON, + ...{ + accent: ACCENT_LIGHT, + background: BACKGROUND_LIGHT, + border: BORDER_LIGHT, + tag: TAG_LIGHT, + boxShadow: BOX_SHADOW_LIGHT, + font: FONT_LIGHT, + name: 'light', + }, +}; + +export type ThemeType = typeof THEME_LIGHT; diff --git a/packages/twenty-front/src/modules/ui/theme/constants/accent.ts b/packages/twenty-front/src/modules/ui/theme/constants/accent.ts deleted file mode 100644 index 4272974766..0000000000 --- a/packages/twenty-front/src/modules/ui/theme/constants/accent.ts +++ /dev/null @@ -1,19 +0,0 @@ -import { color } from './colors'; - -export const accentLight = { - primary: color.blueAccent25, - secondary: color.blueAccent20, - tertiary: color.blueAccent15, - quaternary: color.blueAccent10, - accent3570: color.blueAccent35, - accent4060: color.blueAccent40, -}; - -export const accentDark = { - primary: color.blueAccent75, - secondary: color.blueAccent80, - tertiary: color.blueAccent85, - quaternary: color.blueAccent90, - accent3570: color.blueAccent70, - accent4060: color.blueAccent60, -}; diff --git a/packages/twenty-front/src/modules/ui/theme/constants/background.ts b/packages/twenty-front/src/modules/ui/theme/constants/background.ts deleted file mode 100644 index ae3d9d65ec..0000000000 --- a/packages/twenty-front/src/modules/ui/theme/constants/background.ts +++ /dev/null @@ -1,47 +0,0 @@ -/* eslint-disable @nx/workspace-no-hardcoded-colors */ -import DarkNoise from '../assets/dark-noise.jpg'; -import LightNoise from '../assets/light-noise.png'; - -import { color, grayScale, rgba } from './colors'; - -export const backgroundLight = { - noisy: `url(${LightNoise.toString()});`, - primary: grayScale.gray0, - secondary: grayScale.gray10, - tertiary: grayScale.gray15, - quaternary: grayScale.gray20, - danger: color.red10, - transparent: { - primary: rgba(grayScale.gray0, 0.8), - secondary: rgba(grayScale.gray10, 0.8), - strong: rgba(grayScale.gray100, 0.16), - medium: rgba(grayScale.gray100, 0.08), - light: rgba(grayScale.gray100, 0.04), - lighter: rgba(grayScale.gray100, 0.02), - danger: rgba(color.red, 0.08), - }, - overlay: rgba(grayScale.gray80, 0.8), - radialGradient: `radial-gradient(50% 62.62% at 50% 0%, #505050 0%, ${grayScale.gray60} 100%)`, - radialGradientHover: `radial-gradient(76.32% 95.59% at 50% 0%, #505050 0%, ${grayScale.gray60} 100%)`, -}; - -export const backgroundDark = { - noisy: `url(${DarkNoise.toString()});`, - primary: grayScale.gray85, - secondary: grayScale.gray80, - tertiary: grayScale.gray75, - quaternary: grayScale.gray70, - danger: color.red80, - transparent: { - primary: rgba(grayScale.gray85, 0.8), - secondary: rgba(grayScale.gray80, 0.8), - strong: rgba(grayScale.gray0, 0.14), - medium: rgba(grayScale.gray0, 0.1), - light: rgba(grayScale.gray0, 0.06), - lighter: rgba(grayScale.gray0, 0.03), - danger: rgba(color.red, 0.08), - }, - overlay: rgba(grayScale.gray80, 0.8), - radialGradient: `radial-gradient(50% 62.62% at 50% 0%, #505050 0%, ${grayScale.gray60} 100%)`, - radialGradientHover: `radial-gradient(76.32% 95.59% at 50% 0%, #505050 0%, ${grayScale.gray60} 100%)`, -}; diff --git a/packages/twenty-front/src/modules/ui/theme/constants/border.ts b/packages/twenty-front/src/modules/ui/theme/constants/border.ts deleted file mode 100644 index 1fd0e75711..0000000000 --- a/packages/twenty-front/src/modules/ui/theme/constants/border.ts +++ /dev/null @@ -1,36 +0,0 @@ -import { color, grayScale } from './colors'; - -const common = { - radius: { - xs: '2px', - sm: '4px', - md: '8px', - xl: '20px', - pill: '999px', - rounded: '100%', - }, -}; - -export const borderLight = { - color: { - strong: grayScale.gray25, - medium: grayScale.gray20, - light: grayScale.gray15, - secondaryInverted: grayScale.gray50, - inverted: grayScale.gray60, - danger: color.red20, - }, - ...common, -}; - -export const borderDark = { - color: { - strong: grayScale.gray55, - medium: grayScale.gray65, - light: grayScale.gray70, - secondaryInverted: grayScale.gray35, - inverted: grayScale.gray20, - danger: color.red70, - }, - ...common, -}; diff --git a/packages/twenty-front/src/modules/ui/theme/constants/boxShadow.ts b/packages/twenty-front/src/modules/ui/theme/constants/boxShadow.ts deleted file mode 100644 index 267453ad1b..0000000000 --- a/packages/twenty-front/src/modules/ui/theme/constants/boxShadow.ts +++ /dev/null @@ -1,36 +0,0 @@ -import { grayScale, rgba } from './colors'; - -export const boxShadowLight = { - light: `0px 2px 4px 0px ${rgba( - grayScale.gray100, - 0.04, - )}, 0px 0px 4px 0px ${rgba(grayScale.gray100, 0.08)}`, - strong: `2px 4px 16px 0px ${rgba( - grayScale.gray100, - 0.12, - )}, 0px 2px 4px 0px ${rgba(grayScale.gray100, 0.04)}`, - underline: `0px 1px 0px 0px ${rgba(grayScale.gray100, 0.32)}`, - superHeavy: `0px 0px 8px 0px ${rgba( - grayScale.gray100, - 0.16, - )}, 0px 8px 64px -16px ${rgba( - grayScale.gray100, - 0.48, - )}, 0px 24px 56px -16px ${rgba(grayScale.gray100, 0.08)}`, -}; - -export const boxShadowDark = { - light: `0px 2px 4px 0px ${rgba( - grayScale.gray100, - 0.04, - )}, 0px 0px 4px 0px ${rgba(grayScale.gray100, 0.08)}`, - strong: `2px 4px 16px 0px ${rgba( - grayScale.gray100, - 0.16, - )}, 0px 2px 4px 0px ${rgba(grayScale.gray100, 0.08)}`, - underline: `0px 1px 0px 0px ${rgba(grayScale.gray100, 0.32)}`, - superHeavy: `2px 4px 16px 0px ${rgba( - grayScale.gray100, - 0.12, - )}, 0px 2px 4px 0px ${rgba(grayScale.gray100, 0.04)}`, -}; diff --git a/packages/twenty-front/src/modules/ui/theme/constants/font.ts b/packages/twenty-front/src/modules/ui/theme/constants/font.ts deleted file mode 100644 index 031f6c786a..0000000000 --- a/packages/twenty-front/src/modules/ui/theme/constants/font.ts +++ /dev/null @@ -1,45 +0,0 @@ -import { color, grayScale } from './colors'; - -const common = { - size: { - xxs: '0.625rem', - xs: '0.85rem', - sm: '0.92rem', - md: '1rem', - lg: '1.23rem', - xl: '1.54rem', - xxl: '1.85rem', - }, - weight: { - regular: 400, - medium: 500, - semiBold: 600, - }, - family: 'Inter, sans-serif', -}; - -export const fontLight = { - color: { - primary: grayScale.gray60, - secondary: grayScale.gray50, - tertiary: grayScale.gray40, - light: grayScale.gray35, - extraLight: grayScale.gray30, - inverted: grayScale.gray0, - danger: color.red, - }, - ...common, -}; - -export const fontDark = { - color: { - primary: grayScale.gray20, - secondary: grayScale.gray35, - tertiary: grayScale.gray45, - light: grayScale.gray50, - extraLight: grayScale.gray55, - inverted: grayScale.gray100, - danger: color.red, - }, - ...common, -}; diff --git a/packages/twenty-front/src/modules/ui/theme/constants/tag.ts b/packages/twenty-front/src/modules/ui/theme/constants/tag.ts deleted file mode 100644 index af1b727c02..0000000000 --- a/packages/twenty-front/src/modules/ui/theme/constants/tag.ts +++ /dev/null @@ -1,55 +0,0 @@ -import { color } from './colors'; - -export const tagLight = { - text: { - green: color.green60, - turquoise: color.turquoise60, - sky: color.sky60, - blue: color.blue60, - purple: color.purple60, - pink: color.pink60, - red: color.red60, - orange: color.orange60, - yellow: color.yellow60, - gray: color.gray60, - }, - background: { - green: color.green20, - turquoise: color.turquoise20, - sky: color.sky20, - blue: color.blue20, - purple: color.purple20, - pink: color.pink20, - red: color.red20, - orange: color.orange20, - yellow: color.yellow20, - gray: color.gray20, - }, -}; - -export const tagDark = { - text: { - green: color.green10, - turquoise: color.turquoise10, - sky: color.sky10, - blue: color.blue10, - purple: color.purple10, - pink: color.pink10, - red: color.red10, - orange: color.orange10, - yellow: color.yellow10, - gray: color.gray10, - }, - background: { - green: color.green60, - turquoise: color.turquoise60, - sky: color.sky60, - blue: color.blue60, - purple: color.purple60, - pink: color.pink60, - red: color.red60, - orange: color.orange60, - yellow: color.yellow60, - gray: color.gray60, - }, -}; diff --git a/packages/twenty-front/src/modules/ui/theme/constants/theme.ts b/packages/twenty-front/src/modules/ui/theme/constants/theme.ts deleted file mode 100644 index b9c1904a4b..0000000000 --- a/packages/twenty-front/src/modules/ui/theme/constants/theme.ts +++ /dev/null @@ -1,78 +0,0 @@ -/* eslint-disable @nx/workspace-no-hardcoded-colors */ -import { accentDark, accentLight } from './accent'; -import { animation } from './animation'; -import { backgroundDark, backgroundLight } from './background'; -import { blur } from './blur'; -import { borderDark, borderLight } from './border'; -import { boxShadowDark, boxShadowLight } from './boxShadow'; -import { color, grayScale } from './colors'; -import { fontDark, fontLight } from './font'; -import { icon } from './icon'; -import { modal } from './modal'; -import { tagDark, tagLight } from './tag'; -import { text } from './text'; - -const common = { - color: color, - grayScale: grayScale, - icon: icon, - modal: modal, - text: text, - blur: blur, - animation: animation, - snackBar: { - success: { - background: '#16A26B', - color: '#D0F8E9', - }, - error: { - background: '#B43232', - color: '#FED8D8', - }, - info: { - background: color.gray80, - color: grayScale.gray0, - }, - }, - spacingMultiplicator: 4, - spacing: (...args: number[]) => - args.map((multiplicator) => `${multiplicator * 4}px`).join(' '), - betweenSiblingsGap: `2px`, - table: { - horizontalCellMargin: '8px', - checkboxColumnWidth: '32px', - horizontalCellPadding: '8px', - }, - rightDrawerWidth: '500px', - clickableElementBackgroundTransition: 'background 0.1s ease', - lastLayerZIndex: 2147483647, -}; - -export const lightTheme = { - ...common, - ...{ - accent: accentLight, - background: backgroundLight, - border: borderLight, - tag: tagLight, - boxShadow: boxShadowLight, - font: fontLight, - name: 'light', - }, -}; -export type ThemeType = typeof lightTheme; - -export const darkTheme: ThemeType = { - ...common, - ...{ - accent: accentDark, - background: backgroundDark, - border: borderDark, - tag: tagDark, - boxShadow: boxShadowDark, - font: fontDark, - name: 'dark', - }, -}; - -export const MOBILE_VIEWPORT = 768; diff --git a/packages/twenty-front/src/modules/ui/theme/utils/themeColorSchema.ts b/packages/twenty-front/src/modules/ui/theme/utils/themeColorSchema.ts index ec8bafba2a..2e0159e586 100644 --- a/packages/twenty-front/src/modules/ui/theme/utils/themeColorSchema.ts +++ b/packages/twenty-front/src/modules/ui/theme/utils/themeColorSchema.ts @@ -1,7 +1,10 @@ import { z } from 'zod'; -import { mainColorNames, ThemeColor } from '../constants/colors'; +import { + MAIN_COLOR_NAMES, + ThemeColor, +} from '@/ui/theme/constants/MainColorNames'; export const themeColorSchema = z.enum( - mainColorNames as [ThemeColor, ...ThemeColor[]], + MAIN_COLOR_NAMES as [ThemeColor, ...ThemeColor[]], ); diff --git a/packages/twenty-front/src/modules/ui/utilities/animation/components/AnimatedEaseIn.tsx b/packages/twenty-front/src/modules/ui/utilities/animation/components/AnimatedEaseIn.tsx index 3b6fb30a8c..00bccbbd79 100644 --- a/packages/twenty-front/src/modules/ui/utilities/animation/components/AnimatedEaseIn.tsx +++ b/packages/twenty-front/src/modules/ui/utilities/animation/components/AnimatedEaseIn.tsx @@ -1,7 +1,7 @@ import { useTheme } from '@emotion/react'; import { motion } from 'framer-motion'; -import { AnimationDuration } from '@/ui/theme/constants/animation'; +import { AnimationDuration } from '@/ui/theme/constants/Animation'; type AnimatedEaseInProps = Omit< React.ComponentProps, diff --git a/packages/twenty-front/src/modules/ui/utilities/animation/components/AnimatedEaseInOut.tsx b/packages/twenty-front/src/modules/ui/utilities/animation/components/AnimatedEaseInOut.tsx index f5341484b3..a52c69e4b2 100644 --- a/packages/twenty-front/src/modules/ui/utilities/animation/components/AnimatedEaseInOut.tsx +++ b/packages/twenty-front/src/modules/ui/utilities/animation/components/AnimatedEaseInOut.tsx @@ -1,7 +1,7 @@ import { useTheme } from '@emotion/react'; import { AnimatePresence, motion } from 'framer-motion'; -import { AnimationDuration } from '@/ui/theme/constants/animation'; +import { AnimationDuration } from '@/ui/theme/constants/Animation'; type AnimatedEaseInOutProps = { isOpen: boolean; diff --git a/packages/twenty-front/src/modules/ui/utilities/animation/components/AnimatedFadeOut.tsx b/packages/twenty-front/src/modules/ui/utilities/animation/components/AnimatedFadeOut.tsx index cb7512f854..d3e227084d 100644 --- a/packages/twenty-front/src/modules/ui/utilities/animation/components/AnimatedFadeOut.tsx +++ b/packages/twenty-front/src/modules/ui/utilities/animation/components/AnimatedFadeOut.tsx @@ -1,7 +1,7 @@ import { useTheme } from '@emotion/react'; import { AnimatePresence, motion } from 'framer-motion'; -import { AnimationDuration } from '@/ui/theme/constants/animation'; +import { AnimationDuration } from '@/ui/theme/constants/Animation'; type AnimatedFadeOutProps = { isOpen: boolean; diff --git a/packages/twenty-front/src/modules/ui/utilities/drag-select/components/DragSelect.tsx b/packages/twenty-front/src/modules/ui/utilities/drag-select/components/DragSelect.tsx index 1acf11ba09..ab4c8a304c 100644 --- a/packages/twenty-front/src/modules/ui/utilities/drag-select/components/DragSelect.tsx +++ b/packages/twenty-front/src/modules/ui/utilities/drag-select/components/DragSelect.tsx @@ -5,7 +5,7 @@ import { } from '@air/react-drag-to-select'; import { useTheme } from '@emotion/react'; -import { rgba } from '@/ui/theme/constants/colors'; +import { RGBA } from '@/ui/theme/constants/Rgba'; import { useDragSelect } from '../hooks/useDragSelect'; @@ -61,7 +61,7 @@ export const DragSelect = ({ selectionProps: { style: { border: `1px solid ${theme.color.blue10}`, - background: rgba(theme.color.blue30, 0.4), + background: RGBA(theme.color.blue30, 0.4), position: `absolute`, zIndex: 99, }, diff --git a/packages/twenty-front/src/modules/ui/utilities/hotkey/constants/DefaultHotkeysScopeCustomScopes.ts b/packages/twenty-front/src/modules/ui/utilities/hotkey/constants/DefaultHotkeysScopeCustomScopes.ts new file mode 100644 index 0000000000..754e8fc347 --- /dev/null +++ b/packages/twenty-front/src/modules/ui/utilities/hotkey/constants/DefaultHotkeysScopeCustomScopes.ts @@ -0,0 +1,7 @@ +import { CustomHotkeyScopes } from '@/ui/utilities/hotkey/types/CustomHotkeyScope'; + +export const DEFAULT_HOTKEYS_SCOPE_CUSTOM_SCOPES: CustomHotkeyScopes = { + commandMenu: true, + goto: false, + keyboardShortcutMenu: false, +}; diff --git a/packages/twenty-front/src/modules/ui/utilities/hotkey/constants/index.ts b/packages/twenty-front/src/modules/ui/utilities/hotkey/constants/InitialHotkeysScope.ts similarity index 58% rename from packages/twenty-front/src/modules/ui/utilities/hotkey/constants/index.ts rename to packages/twenty-front/src/modules/ui/utilities/hotkey/constants/InitialHotkeysScope.ts index 435b9ee3c8..bc4f1c3714 100644 --- a/packages/twenty-front/src/modules/ui/utilities/hotkey/constants/index.ts +++ b/packages/twenty-front/src/modules/ui/utilities/hotkey/constants/InitialHotkeysScope.ts @@ -1,13 +1,6 @@ import { AppHotkeyScope } from '../types/AppHotkeyScope'; -import { CustomHotkeyScopes } from '../types/CustomHotkeyScope'; import { HotkeyScope } from '../types/HotkeyScope'; -export const DEFAULT_HOTKEYS_SCOPE_CUSTOM_SCOPES: CustomHotkeyScopes = { - commandMenu: true, - goto: false, - keyboardShortcutMenu: false, -}; - export const INITIAL_HOTKEYS_SCOPE: HotkeyScope = { scope: AppHotkeyScope.App, customScopes: { diff --git a/packages/twenty-front/src/modules/ui/utilities/hotkey/hooks/useSetHotkeyScope.ts b/packages/twenty-front/src/modules/ui/utilities/hotkey/hooks/useSetHotkeyScope.ts index 592e9d53ef..59f6253dd4 100644 --- a/packages/twenty-front/src/modules/ui/utilities/hotkey/hooks/useSetHotkeyScope.ts +++ b/packages/twenty-front/src/modules/ui/utilities/hotkey/hooks/useSetHotkeyScope.ts @@ -2,7 +2,7 @@ import { useRecoilCallback } from 'recoil'; import { isDefined } from '~/utils/isDefined'; -import { DEFAULT_HOTKEYS_SCOPE_CUSTOM_SCOPES } from '../constants'; +import { DEFAULT_HOTKEYS_SCOPE_CUSTOM_SCOPES } from '../constants/DefaultHotkeysScopeCustomScopes'; import { currentHotkeyScopeState } from '../states/internal/currentHotkeyScopeState'; import { internalHotkeysEnabledScopesState } from '../states/internal/internalHotkeysEnabledScopesState'; import { AppHotkeyScope } from '../types/AppHotkeyScope'; diff --git a/packages/twenty-front/src/modules/ui/utilities/hotkey/states/internal/currentHotkeyScopeState.ts b/packages/twenty-front/src/modules/ui/utilities/hotkey/states/internal/currentHotkeyScopeState.ts index 59a190fb49..98eeabde6a 100644 --- a/packages/twenty-front/src/modules/ui/utilities/hotkey/states/internal/currentHotkeyScopeState.ts +++ b/packages/twenty-front/src/modules/ui/utilities/hotkey/states/internal/currentHotkeyScopeState.ts @@ -1,6 +1,6 @@ import { atom } from 'recoil'; -import { INITIAL_HOTKEYS_SCOPE } from '../../constants'; +import { INITIAL_HOTKEYS_SCOPE } from '../../constants/InitialHotkeysScope'; import { HotkeyScope } from '../../types/HotkeyScope'; export const currentHotkeyScopeState = atom({ diff --git a/packages/twenty-front/src/modules/ui/utilities/responsive/hooks/useIsMobile.ts b/packages/twenty-front/src/modules/ui/utilities/responsive/hooks/useIsMobile.ts index 4a40896049..0479488cfa 100644 --- a/packages/twenty-front/src/modules/ui/utilities/responsive/hooks/useIsMobile.ts +++ b/packages/twenty-front/src/modules/ui/utilities/responsive/hooks/useIsMobile.ts @@ -1,6 +1,6 @@ import { useMediaQuery } from 'react-responsive'; -import { MOBILE_VIEWPORT } from '@/ui/theme/constants/theme'; +import { MOBILE_VIEWPORT } from '@/ui/theme/constants/MobileViewport'; export const useIsMobile = () => useMediaQuery({ query: `(max-width: ${MOBILE_VIEWPORT}px)` }); diff --git a/packages/twenty-front/src/modules/views/components/UpdateViewButtonGroup.tsx b/packages/twenty-front/src/modules/views/components/UpdateViewButtonGroup.tsx index 58876d2250..ac8c6da739 100644 --- a/packages/twenty-front/src/modules/views/components/UpdateViewButtonGroup.tsx +++ b/packages/twenty-front/src/modules/views/components/UpdateViewButtonGroup.tsx @@ -9,7 +9,7 @@ import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown'; import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer'; import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem'; import { HotkeyScope } from '@/ui/utilities/hotkey/types/HotkeyScope'; -import { UpdateViewDropdownId } from '@/views/constants/UpdateViewDropdownId'; +import { UPDATE_VIEW_DROPDOWN_ID } from '@/views/constants/UpdateViewDropdownId'; import { useViewBar } from '@/views/hooks/useViewBar'; import { useViewScopedStates } from '../hooks/internal/useViewScopedStates'; @@ -58,7 +58,7 @@ export const UpdateViewButtonGroup = ({