[UI] Remove theme constants from twenty-front and use the ones export…

…ed from twenty-ui. (twentyhq#5558)

Some parts of the Frontend used theme constants exported from
`modules/ui` while other parts used theme constants exported from
`twenty-ui`.

This PR centralizes theme constants by removing them from `modules/ui`
completely.

packages/twenty-front/src/modules/activities/components/CustomResolverFetchMoreLoader.tsx

@@ -1,7 +1,6 @@
 import { useInView } from 'react-intersection-observer';
 import styled from '@emotion/styled';
-
-import { GRAY_SCALE } from '@/ui/theme/constants/GrayScale';
+import { GRAY_SCALE } from 'twenty-ui';
 
 type FetchMoreLoaderProps = {
   loading: boolean;

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

@@ -1,14 +1,13 @@
 import { useRef } from 'react';
 import styled from '@emotion/styled';
 import { useRecoilCallback } from 'recoil';
-import { Avatar } from 'twenty-ui';
+import { Avatar, GRAY_SCALE } from 'twenty-ui';
 
 import { EmailThreadNotShared } from '@/activities/emails/components/EmailThreadNotShared';
 import { useEmailThread } from '@/activities/emails/hooks/useEmailThread';
 import { emailThreadIdWhenEmailThreadWasClosedState } from '@/activities/emails/states/lastViewableEmailThreadIdState';
 import { CardContent } from '@/ui/layout/card/components/CardContent';
 import { useRightDrawer } from '@/ui/layout/right-drawer/hooks/useRightDrawer';
-import { GRAY_SCALE } from '@/ui/theme/constants/GrayScale';
 import { TimelineThread } from '~/generated/graphql';
 import { formatToHumanReadableDate } from '~/utils';
 import { getImageAbsoluteURIOrBase64 } from '~/utils/image/getImageAbsoluteURIOrBase64';

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

@@ -1,4 +1,5 @@
-import { ThemeColor } from '@/ui/theme/constants/MainColorNames';
+import { ThemeColor } from 'twenty-ui';
+
 import {
   Field,
   Object as MetadataObject,

packages/twenty-front/src/modules/object-metadata/validation-schemas/fieldMetadataItemSchema.ts

@@ -1,8 +1,8 @@
+import { themeColorSchema } from 'twenty-ui';
 import { z } from 'zod';
 
 import { FieldMetadataItem } from '@/object-metadata/types/FieldMetadataItem';
 import { metadataLabelSchema } from '@/object-metadata/validation-schemas/metadataLabelSchema';
-import { themeColorSchema } from '@/ui/theme/utils/themeColorSchema';
 import {
   FieldMetadataType,
   RelationDefinitionType,

packages/twenty-front/src/modules/object-metadata/validation-schemas/selectOptionsSchema.ts

@@ -1,8 +1,8 @@
+import { themeColorSchema } from 'twenty-ui';
 import { z } from 'zod';
 
 import { FieldMetadataItemOption } from '@/object-metadata/types/FieldMetadataItem';
 import { getOptionValueFromLabel } from '@/settings/data-model/fields/forms/select/utils/getOptionValueFromLabel';
-import { themeColorSchema } from '@/ui/theme/utils/themeColorSchema';
 import { computeOptionValueFromLabelOrThrow } from '~/pages/settings/data-model/utils/compute-option-value-from-label.utils';
 
 const selectOptionSchema = z

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

@@ -2,10 +2,10 @@ import { useContext, useEffect } from 'react';
 import { useInView } from 'react-intersection-observer';
 import styled from '@emotion/styled';
 import { useRecoilValue, useSetRecoilState } from 'recoil';
+import { GRAY_SCALE } from 'twenty-ui';
 
 import { useRecordBoardStates } from '@/object-record/record-board/hooks/internal/useRecordBoardStates';
 import { RecordBoardColumnContext } from '@/object-record/record-board/record-board-column/contexts/RecordBoardColumnContext';
-import { GRAY_SCALE } from '@/ui/theme/constants/GrayScale';
 
 const StyledText = styled.div`
   align-items: center;

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

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

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

@@ -1,6 +1,7 @@
+import { ThemeColor } from 'twenty-ui';
+
 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/MainColorNames';
 
 import { CurrencyCode } from './CurrencyCode';
 

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

@@ -1,10 +1,9 @@
 import { css, useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 import { useRecoilValue } from 'recoil';
-import { useIcons } from 'twenty-ui';
+import { MOBILE_VIEWPORT, useIcons } from 'twenty-ui';
 
 import { FieldMetadata } from '@/object-record/record-field/types/FieldMetadata';
-import { MOBILE_VIEWPORT } from '@/ui/theme/constants/MobileViewport';
 import { scrollLeftState } from '@/ui/utilities/scroll/states/scrollLeftState';
 
 import { ColumnDefinition } from '../types/ColumnDefinition';

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

@@ -1,6 +1,7 @@
 import { css } from '@emotion/react';
 import styled from '@emotion/styled';
 import { useRecoilValue } from 'recoil';
+import { MOBILE_VIEWPORT, RGBA } from 'twenty-ui';
 
 import { useObjectMetadataItem } from '@/object-metadata/hooks/useObjectMetadataItem';
 import { RecordTableBody } from '@/object-record/record-table/components/RecordTableBody';
@@ -21,8 +22,6 @@ import { useUpsertRecordV2 } from '@/object-record/record-table/record-table-cel
 import { RecordTableScope } from '@/object-record/record-table/scopes/RecordTableScope';
 import { MoveFocusDirection } from '@/object-record/record-table/types/MoveFocusDirection';
 import { TableCellPosition } from '@/object-record/record-table/types/TableCellPosition';
-import { MOBILE_VIEWPORT } from '@/ui/theme/constants/MobileViewport';
-import { RGBA } from '@/ui/theme/constants/Rgba';
 
 const StyledTable = styled.table<{
   freezeFirstColumns?: boolean;

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

@@ -2,11 +2,11 @@ import { useContext } from 'react';
 import { useInView } from 'react-intersection-observer';
 import styled from '@emotion/styled';
 import { useRecoilCallback, useRecoilValue } from 'recoil';
+import { GRAY_SCALE } from 'twenty-ui';
 
 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 { GRAY_SCALE } from '@/ui/theme/constants/GrayScale';
 import { ScrollWrapperContext } from '@/ui/utilities/scroll/components/ScrollWrapper';
 
 type RecordTableBodyFetchMoreLoaderProps = {

packages/twenty-front/src/modules/settings/data-model/fields/forms/select/components/SettingsDataModelFieldSelectFormOptionRow.tsx

@@ -8,6 +8,7 @@ import {
   IconGripVertical,
   IconTrash,
   IconX,
+  MAIN_COLOR_NAMES,
 } from 'twenty-ui';
 import { v4 } from 'uuid';
 
@@ -21,7 +22,6 @@ 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 { MAIN_COLOR_NAMES } from '@/ui/theme/constants/MainColorNames';
 
 type SettingsDataModelFieldSelectFormOptionRowProps = {
   className?: string;

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

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

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

@@ -1,9 +1,9 @@
 // @ts-expect-error // Todo: remove usage of react-data-grid
 import DataGrid, { DataGridProps } from 'react-data-grid';
 import styled from '@emotion/styled';
+import { RGBA } from 'twenty-ui';
 
 import { useSpreadsheetImportInternal } from '@/spreadsheet-import/hooks/useSpreadsheetImportInternal';
-import { RGBA } from '@/ui/theme/constants/Rgba';
 
 const StyledDataGrid = styled(DataGrid)`
   --rdg-background-color: ${({ theme }) => theme.background.primary};

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

@@ -1,11 +1,11 @@
 import styled from '@emotion/styled';
+import { MOBILE_VIEWPORT } from 'twenty-ui';
 
 import { useSpreadsheetImportInitialStep } from '@/spreadsheet-import/hooks/useSpreadsheetImportInitialStep';
 import { useSpreadsheetImportInternal } from '@/spreadsheet-import/hooks/useSpreadsheetImportInternal';
 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/MobileViewport';
 
 import { UploadFlow } from './UploadFlow';
 

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

@@ -1,8 +1,7 @@
 import styled from '@emotion/styled';
+import { ThemeColor, themeColorSchema } from 'twenty-ui';
 
 import { Loader } from '@/ui/feedback/loader/components/Loader';
-import { ThemeColor } from '@/ui/theme/constants/MainColorNames';
-import { themeColorSchema } from '@/ui/theme/utils/themeColorSchema';
 
 const StyledStatus = styled.h3<{
   color: ThemeColor;

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

@@ -1,11 +1,12 @@
 import { Meta, StoryObj } from '@storybook/react';
 import { expect, fn, userEvent, within } from '@storybook/test';
-import { CatalogDecorator, CatalogStory, ComponentDecorator } from 'twenty-ui';
-
 import {
+  CatalogDecorator,
+  CatalogStory,
+  ComponentDecorator,
   MAIN_COLOR_NAMES,
   ThemeColor,
-} from '@/ui/theme/constants/MainColorNames';
+} from 'twenty-ui';
 
 import { Status } from '../Status';
 

packages/twenty-front/src/modules/ui/feedback/loader/components/Loader.tsx

@@ -1,7 +1,6 @@
 import styled from '@emotion/styled';
 import { motion } from 'framer-motion';
-
-import { ThemeColor } from '@/ui/theme/constants/MainColorNames';
+import { ThemeColor } from 'twenty-ui';
 
 const StyledLoaderContainer = styled.div<{
   color?: ThemeColor;

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

@@ -2,12 +2,11 @@ import { useEffect, useMemo, useRef, useState } from 'react';
 import { IMaskInput, IMaskInputProps } from 'react-imask';
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
-import { IconComponent } from 'twenty-ui';
+import { IconComponent, TEXT_INPUT_STYLE } from 'twenty-ui';
 
 import { useRegisterInputEvents } from '@/object-record/record-field/meta-types/input/hooks/useRegisterInputEvents';
 import { SETTINGS_FIELD_CURRENCY_CODES } from '@/settings/data-model/constants/SettingsFieldCurrencyCodes';
 import { CurrencyPickerDropdownButton } from '@/ui/input/components/internal/currency/components/CurrencyPickerDropdownButton';
-import { TEXT_INPUT_STYLE } from '@/ui/theme/constants/TextInputStyle';
 
 type StyledInputProps = React.ComponentProps<'input'> &
   IMaskInputProps<HTMLInputElement>;

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

@@ -1,6 +1,5 @@
 import styled from '@emotion/styled';
-
-import { OVERLAY_BACKGROUND } from '@/ui/theme/constants/OverlayBackground';
+import { OVERLAY_BACKGROUND } from 'twenty-ui';
 
 const StyledFieldInputOverlay = styled.div`
   align-items: center;

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

@@ -1,10 +1,10 @@
 import { ChangeEvent, useEffect, useRef, useState } from 'react';
 import TextareaAutosize from 'react-textarea-autosize';
 import styled from '@emotion/styled';
+import { TEXT_INPUT_STYLE } from 'twenty-ui';
 
 import { LightCopyIconButton } from '@/object-record/record-field/components/LightCopyIconButton';
 import { useRegisterInputEvents } from '@/object-record/record-field/meta-types/input/hooks/useRegisterInputEvents';
-import { TEXT_INPUT_STYLE } from '@/ui/theme/constants/TextInputStyle';
 import { isDefined } from '~/utils/isDefined';
 
 export type TextAreaInputProps = {

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

@@ -1,9 +1,9 @@
 import { ChangeEvent, useEffect, useRef, useState } from 'react';
 import styled from '@emotion/styled';
+import { TEXT_INPUT_STYLE } from 'twenty-ui';
 
 import { LightCopyIconButton } from '@/object-record/record-field/components/LightCopyIconButton';
 import { useRegisterInputEvents } from '@/object-record/record-field/meta-types/input/hooks/useRegisterInputEvents';
-import { TEXT_INPUT_STYLE } from '@/ui/theme/constants/TextInputStyle';
 
 export const StyledTextInput = styled.input`
   margin: 0;

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

@@ -1,8 +1,7 @@
 import * as React from 'react';
 import styled from '@emotion/styled';
 import { motion } from 'framer-motion';
-
-import { RGBA } from '@/ui/theme/constants/Rgba';
+import { RGBA } from 'twenty-ui';
 
 import { RadioGroup } from './RadioGroup';
 

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

@@ -2,15 +2,19 @@ import ReactDatePicker from 'react-datepicker';
 import styled from '@emotion/styled';
 import { DateTime } from 'luxon';
 import { Key } from 'ts-key-enum';
-import { IconCalendarX, IconChevronLeft, IconChevronRight } from 'twenty-ui';
+import {
+  IconCalendarX,
+  IconChevronLeft,
+  IconChevronRight,
+  OVERLAY_BACKGROUND,
+} from 'twenty-ui';
 
 import { LightIconButton } from '@/ui/input/button/components/LightIconButton';
 import { DateTimeInput } from '@/ui/input/components/internal/date/components/DateTimeInput';
 import { Select } from '@/ui/input/components/Select';
 import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
 import { MenuItemLeftContent } from '@/ui/navigation/menu-item/internals/components/MenuItemLeftContent';
 import { StyledHoverableMenuItemBase } from '@/ui/navigation/menu-item/internals/components/StyledMenuItemBase';
-import { OVERLAY_BACKGROUND } from '@/ui/theme/constants/OverlayBackground';
 import { isDefined } from '~/utils/isDefined';
 
 import 'react-datepicker/dist/react-datepicker.css';

packages/twenty-front/src/modules/ui/layout/dropdown/components/DropdownMenuInput.tsx

@@ -1,10 +1,9 @@
 import { forwardRef, InputHTMLAttributes, ReactNode, useRef } from 'react';
 import { css } from '@emotion/react';
 import styled from '@emotion/styled';
+import { RGBA, TEXT_INPUT_STYLE } from 'twenty-ui';
 
 import { useRegisterInputEvents } from '@/object-record/record-field/meta-types/input/hooks/useRegisterInputEvents';
-import { RGBA } from '@/ui/theme/constants/Rgba';
-import { TEXT_INPUT_STYLE } from '@/ui/theme/constants/TextInputStyle';
 import { useCombinedRefs } from '~/hooks/useCombinedRefs';
 
 const StyledInput = styled.input<{ withRightComponent?: boolean }>`

packages/twenty-front/src/modules/ui/layout/dropdown/components/DropdownMenuSearchInput.tsx

@@ -1,7 +1,6 @@
 import { forwardRef, InputHTMLAttributes } from 'react';
 import styled from '@emotion/styled';
-
-import { TEXT_INPUT_STYLE } from '@/ui/theme/constants/TextInputStyle';
+import { TEXT_INPUT_STYLE } from 'twenty-ui';
 
 const StyledDropdownMenuSearchInputContainer = styled.div`
   --vertical-padding: ${({ theme }) => theme.spacing(1)};

packages/twenty-front/src/modules/ui/layout/expandable-list/components/__stories__/ExpandableList.stories.tsx

@@ -2,10 +2,9 @@ import styled from '@emotion/styled';
 import { expect } from '@storybook/jest';
 import { Meta, StoryObj } from '@storybook/react';
 import { userEvent, within } from '@storybook/test';
-import { ComponentDecorator, Tag } from 'twenty-ui';
+import { ComponentDecorator, MAIN_COLOR_NAMES, Tag } from 'twenty-ui';
 
 import { ExpandableList } from '@/ui/layout/expandable-list/components/ExpandableList';
-import { MAIN_COLOR_NAMES } from '@/ui/theme/constants/MainColorNames';
 
 const StyledContainer = styled.div`
   padding: ${({ theme }) => theme.spacing(1)};

packages/twenty-front/src/modules/ui/layout/page/PageHeader.tsx

@@ -7,13 +7,13 @@ import { useRecoilValue } from 'recoil';
 import {
   IconChevronLeft,
   IconComponent,
+  MOBILE_VIEWPORT,
   OverflowingTextWithTooltip,
 } from 'twenty-ui';
 
 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/MobileViewport';
 import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
 
 export const PAGE_BAR_MIN_HEIGHT = 40;

packages/twenty-front/src/modules/ui/layout/page/RightDrawerContainer.tsx

@@ -1,8 +1,8 @@
 import { ReactNode } from 'react';
 import styled from '@emotion/styled';
+import { MOBILE_VIEWPORT } from 'twenty-ui';
 
 import { RightDrawer } from '@/ui/layout/right-drawer/components/RightDrawer';
-import { MOBILE_VIEWPORT } from '@/ui/theme/constants/MobileViewport';
 
 import { PagePanel } from './PagePanel';
 

packages/twenty-front/src/modules/ui/navigation/menu-item/components/MenuItemMultiSelect.tsx

@@ -1,9 +1,8 @@
 import styled from '@emotion/styled';
-import { IconComponent, Tag } from 'twenty-ui';
+import { IconComponent, Tag, ThemeColor } from 'twenty-ui';
 
 import { Checkbox } from '@/ui/input/components/Checkbox';
 import { MenuItemLeftContent } from '@/ui/navigation/menu-item/internals/components/MenuItemLeftContent';
-import { ThemeColor } from '@/ui/theme/constants/MainColorNames';
 
 import { StyledMenuItemBase } from '../internals/components/StyledMenuItemBase';
 

packages/twenty-front/src/modules/ui/navigation/menu-item/components/MenuItemMultiSelectTag.tsx

@@ -1,11 +1,10 @@
-import { Tag } from 'twenty-ui';
+import { Tag, ThemeColor } from 'twenty-ui';
 
 import {
   Checkbox,
   CheckboxShape,
   CheckboxSize,
 } from '@/ui/input/components/Checkbox';
-import { ThemeColor } from '@/ui/theme/constants/MainColorNames';
 
 import {
   StyledMenuItemBase,

packages/twenty-front/src/modules/ui/navigation/menu-item/components/MenuItemSelectColor.tsx

@@ -1,7 +1,10 @@
 import { useTheme } from '@emotion/react';
-import { ColorSample, ColorSampleVariant, IconCheck } from 'twenty-ui';
-
-import { ThemeColor } from '@/ui/theme/constants/MainColorNames';
+import {
+  ColorSample,
+  ColorSampleVariant,
+  IconCheck,
+  ThemeColor,
+} from 'twenty-ui';
 
 import {
   StyledMenuItemLabel,

packages/twenty-front/src/modules/ui/navigation/menu-item/components/MenuItemSelectTag.tsx

@@ -1,7 +1,5 @@
 import { useTheme } from '@emotion/react';
-import { IconCheck, Tag } from 'twenty-ui';
-
-import { ThemeColor } from '@/ui/theme/constants/MainColorNames';
+import { IconCheck, Tag, ThemeColor } from 'twenty-ui';
 
 import { StyledMenuItemLeftContent } from '../internals/components/StyledMenuItemBase';
 

packages/twenty-front/src/modules/ui/navigation/menu-item/components/MenuItemSuggestion.tsx

@@ -1,8 +1,6 @@
 import { MouseEvent } from 'react';
 import styled from '@emotion/styled';
-import { IconComponent } from 'twenty-ui';
-
-import { HOVER_BACKGROUND } from '@/ui/theme/constants/HoverBackground';
+import { HOVER_BACKGROUND, IconComponent } from 'twenty-ui';
 
 import { MenuItemLeftContent } from '../internals/components/MenuItemLeftContent';
 import { StyledMenuItemLeftContent } from '../internals/components/StyledMenuItemBase';