[UI] Remove theme constants from twenty-front and use the ones exported from twenty-ui. (#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,7 +2,12 @@ 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';
@@ -10,7 +15,6 @@ 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';

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

@@ -6,12 +6,9 @@ import {
   CatalogStory,
   ColorSampleVariant,
   ComponentDecorator,
-} from 'twenty-ui';
-
-import {
   MAIN_COLOR_NAMES,
   ThemeColor,
-} from '@/ui/theme/constants/MainColorNames';
+} from 'twenty-ui';
 
 import { MenuItemSelectColor } from '../MenuItemSelectColor';
 

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

@@ -1,7 +1,6 @@
 import { css } from '@emotion/react';
 import styled from '@emotion/styled';
-
-import { HOVER_BACKGROUND } from '@/ui/theme/constants/HoverBackground';
+import { HOVER_BACKGROUND } from 'twenty-ui';
 
 import { MenuItemAccent } from '../../types/MenuItemAccent';
 

packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawer.tsx

@@ -3,9 +3,9 @@ import { css, useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 import { motion } from 'framer-motion';
 import { useRecoilValue } from 'recoil';
+import { MOBILE_VIEWPORT } from 'twenty-ui';
 
 import { isNavigationDrawerOpenState } from '@/ui/navigation/states/isNavigationDrawerOpenState';
-import { MOBILE_VIEWPORT } from '@/ui/theme/constants/MobileViewport';
 import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
 
 import { DESKTOP_NAV_DRAWER_WIDTHS } from '../constants/DesktopNavDrawerWidths';

packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerItem.tsx

@@ -4,10 +4,9 @@ import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 import { isNonEmptyString } from '@sniptt/guards';
 import { useSetRecoilState } from 'recoil';
-import { IconComponent, Pill } from 'twenty-ui';
+import { IconComponent, MOBILE_VIEWPORT, Pill } from 'twenty-ui';
 
 import { isNavigationDrawerOpenState } from '@/ui/navigation/states/isNavigationDrawerOpenState';
-import { MOBILE_VIEWPORT } from '@/ui/theme/constants/MobileViewport';
 import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
 import { isDefined } from '~/utils/isDefined';
 

packages/twenty-front/src/modules/ui/navigation/states/isNavigationDrawerOpenState.ts

@@ -1,6 +1,5 @@
 import { atom } from 'recoil';
-
-import { MOBILE_VIEWPORT } from '@/ui/theme/constants/MobileViewport';
+import { MOBILE_VIEWPORT } from 'twenty-ui';
 
 const isMobile = window.innerWidth <= MOBILE_VIEWPORT;
 

packages/twenty-front/src/modules/ui/navigation/step-bar/components/Step.tsx

@@ -1,9 +1,8 @@
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 import { motion } from 'framer-motion';
-import { AnimatedCheckmark } from 'twenty-ui';
+import { AnimatedCheckmark, MOBILE_VIEWPORT } from 'twenty-ui';
 
-import { MOBILE_VIEWPORT } from '@/ui/theme/constants/MobileViewport';
 import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
 
 const StyledContainer = styled.div<{ isLast: boolean }>`

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 'twenty-ui';
 
-import { MOBILE_VIEWPORT } from '@/ui/theme/constants/MobileViewport';
 import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
 
 import { Step, StepProps } from './Step';

packages/twenty-front/src/modules/ui/theme/constants/AccentDark.ts

@@ -1,10 +0,0 @@
-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,
-};

packages/twenty-front/src/modules/ui/theme/constants/AccentLight.ts

@@ -1,10 +0,0 @@
-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,
-};

packages/twenty-front/src/modules/ui/theme/constants/Animation.ts

@@ -1,9 +0,0 @@
-export const ANIMATION = {
-  duration: {
-    instant: 0.075,
-    fast: 0.15,
-    normal: 0.3,
-  },
-};
-
-export type AnimationDuration = 'instant' | 'fast' | 'normal';

packages/twenty-front/src/modules/ui/theme/constants/BackgroundDark.ts

@@ -1,29 +0,0 @@
-/* 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.5),
-    secondary: RGBA(GRAY_SCALE.gray80, 0.5),
-    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%)`,
-  primaryInverted: GRAY_SCALE.gray20,
-  primaryInvertedHover: GRAY_SCALE.gray15,
-};

packages/twenty-front/src/modules/ui/theme/constants/BackgroundLight.ts

@@ -1,29 +0,0 @@
-/* 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.5),
-    secondary: RGBA(GRAY_SCALE.gray10, 0.5),
-    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%)`,
-  primaryInverted: GRAY_SCALE.gray60,
-  primaryInvertedHover: GRAY_SCALE.gray55,
-};

packages/twenty-front/src/modules/ui/theme/constants/Blur.ts

@@ -1,4 +0,0 @@
-export const BLUR = {
-  light: 'blur(6px)',
-  strong: 'blur(20px)',
-};

packages/twenty-front/src/modules/ui/theme/constants/BorderCommon.ts

@@ -1,10 +0,0 @@
-export const BORDER_COMMON = {
-  radius: {
-    xs: '2px',
-    sm: '4px',
-    md: '8px',
-    xl: '20px',
-    pill: '999px',
-    rounded: '100%',
-  },
-};

packages/twenty-front/src/modules/ui/theme/constants/BorderDark.ts

@@ -1,15 +0,0 @@
-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,
-};

packages/twenty-front/src/modules/ui/theme/constants/BorderLight.ts

@@ -1,15 +0,0 @@
-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,
-};

packages/twenty-front/src/modules/ui/theme/constants/BoxShadowDark.ts

@@ -1,18 +0,0 @@
-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)}`,
-};

packages/twenty-front/src/modules/ui/theme/constants/BoxShadowLight.ts

@@ -1,21 +0,0 @@
-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)}`,
-};

packages/twenty-front/src/modules/ui/theme/constants/Colors.ts

@@ -1,8 +0,0 @@
-import { MAIN_COLORS } from 'twenty-ui';
-
-import { SECONDARY_COLORS } from '@/ui/theme/constants/SecondaryColors';
-
-export const COLOR = {
-  ...MAIN_COLORS,
-  ...SECONDARY_COLORS,
-};

packages/twenty-front/src/modules/ui/theme/constants/FontCommon.ts

@@ -1,17 +0,0 @@
-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',
-};

packages/twenty-front/src/modules/ui/theme/constants/FontDark.ts

@@ -1,16 +0,0 @@
-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,
-};

packages/twenty-front/src/modules/ui/theme/constants/FontLight.ts

@@ -1,16 +0,0 @@
-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,
-};

packages/twenty-front/src/modules/ui/theme/constants/GrayScale.ts

@@ -1,22 +0,0 @@
-/* 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',
-};

packages/twenty-front/src/modules/ui/theme/constants/HoverBackground.ts

@@ -1,8 +0,0 @@
-import { css } from '@emotion/react';
-
-export const HOVER_BACKGROUND = (props: any) => css`
-  transition: background 0.1s ease;
-  &:hover {
-    background: ${props.theme.background.transparent.light};
-  }
-`;

packages/twenty-front/src/modules/ui/theme/constants/Icon.ts

@@ -1,13 +0,0 @@
-export const ICON = {
-  size: {
-    sm: 14,
-    md: 16,
-    lg: 20,
-    xl: 40,
-  },
-  stroke: {
-    sm: 1.6,
-    md: 2,
-    lg: 2.5,
-  },
-};

packages/twenty-front/src/modules/ui/theme/constants/MainColorNames.ts

@@ -1,5 +0,0 @@
-import { MAIN_COLORS } from 'twenty-ui';
-
-export const MAIN_COLOR_NAMES = Object.keys(MAIN_COLORS) as ThemeColor[];
-
-export type ThemeColor = keyof typeof MAIN_COLORS;

packages/twenty-front/src/modules/ui/theme/constants/MobileViewport.ts

@@ -1 +0,0 @@
-export const MOBILE_VIEWPORT = 768;

packages/twenty-front/src/modules/ui/theme/constants/Modal.ts

@@ -1,7 +0,0 @@
-export const MODAL = {
-  size: {
-    sm: '300px',
-    md: '400px',
-    lg: '53%',
-  },
-};

packages/twenty-front/src/modules/ui/theme/constants/OverlayBackground.ts

@@ -1,8 +0,0 @@
-import { css } from '@emotion/react';
-import { ThemeType } from 'twenty-ui';
-
-export const OVERLAY_BACKGROUND = (props: { theme: ThemeType }) => css`
-  backdrop-filter: blur(12px) saturate(200%) contrast(50%) brightness(130%);
-  background: ${props.theme.background.transparent.secondary};
-  box-shadow: ${props.theme.boxShadow.strong};
-`;

packages/twenty-front/src/modules/ui/theme/constants/Rgba.ts

@@ -1,8 +0,0 @@
-/* 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})`;
-};

packages/twenty-front/src/modules/ui/theme/constants/SecondaryColors.ts

@@ -1,106 +0,0 @@
-/* eslint-disable @nx/workspace-no-hardcoded-colors */
-import { GRAY_SCALE } from '@/ui/theme/constants/GrayScale';
-
-export const SECONDARY_COLORS = {
-  yellow80: '#2e2a1a',
-  yellow70: '#453d1e',
-  yellow60: '#746224',
-  yellow50: '#b99b2e',
-  yellow40: '#ffe074',
-  yellow30: '#ffedaf',
-  yellow20: '#fff6d7',
-  yellow10: '#fffbeb',
-
-  green80: '#1d2d1b',
-  green70: '#23421e',
-  green60: '#2a5822',
-  green50: '#42ae31',
-  green40: '#88f477',
-  green30: '#ccfac5',
-  green20: '#ddfcd8',
-  green10: '#eefdec',
-
-  turquoise80: '#172b23',
-  turquoise70: '#173f2f',
-  turquoise60: '#166747',
-  turquoise50: '#16a26b',
-  turquoise40: '#5be8b1',
-  turquoise30: '#a1f2d2',
-  turquoise20: '#d0f8e9',
-  turquoise10: '#e8fcf4',
-
-  sky80: '#152b2e',
-  sky70: '#123f45',
-  sky60: '#0e6874',
-  sky50: '#07a4b9',
-  sky40: '#4de9ff',
-  sky30: '#99f3ff',
-  sky20: '#ccf9ff',
-  sky10: '#e5fcff',
-
-  blue80: '#171e2c',
-  blue70: '#172642',
-  blue60: '#18356d',
-  blue50: '#184bad',
-  blue40: '#5e90f2',
-  blue30: '#a3c0f8',
-  blue20: '#d1dffb',
-  blue10: '#e8effd',
-
-  purple80: '#231e2e',
-  purple70: '#2f2545',
-  purple60: '#483473',
-  purple50: '#6c49b8',
-  purple40: '#b28ffe',
-  purple30: '#d3bffe',
-  purple20: '#e9dfff',
-  purple10: '#f4efff',
-
-  pink80: '#2d1c29',
-  pink70: '#43213c',
-  pink60: '#702c61',
-  pink50: '#b23b98',
-  pink40: '#f881de',
-  pink30: '#fbb7ec',
-  pink20: '#fddbf6',
-  pink10: '#feedfa',
-
-  red80: '#2d1b1b',
-  red70: '#441f1f',
-  red60: '#712727',
-  red50: '#b43232',
-  red40: '#fa7878',
-  red30: '#fcb2b2',
-  red20: '#fed8d8',
-  red10: '#feecec',
-
-  orange80: '#2e2018',
-  orange70: '#452919',
-  orange60: '#743b1b',
-  orange50: '#b9571f',
-  orange40: '#ff9c64',
-  orange30: '#ffc7a7',
-  orange20: '#ffe3d3',
-  orange10: '#fff1e9',
-
-  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',
-  blueAccent75: '#16233f',
-  blueAccent70: '#17294a',
-  blueAccent60: '#18356d',
-  blueAccent40: '#a3c0f8',
-  blueAccent35: '#c8d9fb',
-  blueAccent25: '#dae6fc',
-  blueAccent20: '#e2ecfd',
-  blueAccent15: '#edf2fe',
-  blueAccent10: '#f5f9fd',
-};

packages/twenty-front/src/modules/ui/theme/constants/TagDark.ts

@@ -1,28 +0,0 @@
-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,
-  },
-};

packages/twenty-front/src/modules/ui/theme/constants/TagLight.ts

@@ -1,28 +0,0 @@
-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,
-  },
-};

packages/twenty-front/src/modules/ui/theme/constants/Text.ts

@@ -1,13 +0,0 @@
-export const TEXT = {
-  lineHeight: {
-    lg: 1.5,
-    md: 1.2,
-  },
-
-  iconSizeMedium: 16,
-  iconSizeSmall: 14,
-
-  iconStrikeLight: 1.6,
-  iconStrikeMedium: 2,
-  iconStrikeBold: 2.5,
-};

packages/twenty-front/src/modules/ui/theme/constants/TextInputStyle.ts

@@ -1,20 +0,0 @@
-import { css } from '@emotion/react';
-import { ThemeType } from 'twenty-ui';
-
-export const TEXT_INPUT_STYLE = (props: { theme: ThemeType }) => css`
-  background-color: transparent;
-  border: none;
-  color: ${props.theme.font.color.primary};
-  font-family: ${props.theme.font.family};
-  font-size: inherit;
-  font-weight: inherit;
-  outline: none;
-  padding: ${props.theme.spacing(0)} ${props.theme.spacing(2)};
-
-  &::placeholder,
-  &::-webkit-input-placeholder {
-    color: ${props.theme.font.color.light};
-    font-family: ${props.theme.font.family};
-    font-weight: ${props.theme.font.weight.medium};
-  }
-`;

packages/twenty-front/src/modules/ui/theme/constants/ThemeCommon.ts

@@ -1,44 +0,0 @@
-/* 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,
-};

packages/twenty-front/src/modules/ui/theme/utils/themeColorSchema.ts

@@ -1,10 +0,0 @@
-import { z } from 'zod';
-
-import {
-  MAIN_COLOR_NAMES,
-  ThemeColor,
-} from '@/ui/theme/constants/MainColorNames';
-
-export const themeColorSchema = z.enum(
-  MAIN_COLOR_NAMES as [ThemeColor, ...ThemeColor[]],
-);

packages/twenty-front/src/modules/ui/utilities/animation/components/AnimatedEaseIn.tsx

@@ -1,7 +1,6 @@
 import { useTheme } from '@emotion/react';
 import { motion } from 'framer-motion';
-
-import { AnimationDuration } from '@/ui/theme/constants/Animation';
+import { AnimationDuration } from 'twenty-ui';
 
 type AnimatedEaseInProps = Omit<
   React.ComponentProps<typeof motion.div>,

packages/twenty-front/src/modules/ui/utilities/animation/components/AnimatedEaseInOut.tsx

@@ -1,7 +1,6 @@
 import { useTheme } from '@emotion/react';
 import { AnimatePresence, motion } from 'framer-motion';
-
-import { AnimationDuration } from '@/ui/theme/constants/Animation';
+import { AnimationDuration } from 'twenty-ui';
 
 type AnimatedEaseInOutProps = {
   isOpen: boolean;

packages/twenty-front/src/modules/ui/utilities/animation/components/AnimatedFadeOut.tsx

@@ -1,7 +1,6 @@
 import { useTheme } from '@emotion/react';
 import { AnimatePresence, motion } from 'framer-motion';
-
-import { AnimationDuration } from '@/ui/theme/constants/Animation';
+import { AnimationDuration } from 'twenty-ui';
 
 type AnimatedFadeOutProps = {
   isOpen: boolean;

packages/twenty-front/src/modules/ui/utilities/drag-select/components/DragSelect.tsx

@@ -4,8 +4,7 @@ import {
   useSelectionContainer,
 } from '@air/react-drag-to-select';
 import { useTheme } from '@emotion/react';
-
-import { RGBA } from '@/ui/theme/constants/Rgba';
+import { RGBA } from 'twenty-ui';
 
 import { useDragSelect } from '../hooks/useDragSelect';
 

packages/twenty-front/src/modules/ui/utilities/responsive/hooks/useIsMobile.ts

@@ -1,6 +1,5 @@
 import { useMediaQuery } from 'react-responsive';
-
-import { MOBILE_VIEWPORT } from '@/ui/theme/constants/MobileViewport';
+import { MOBILE_VIEWPORT } from 'twenty-ui';
 
 export const useIsMobile = () =>
   useMediaQuery({ query: `(max-width: ${MOBILE_VIEWPORT}px)` });

packages/twenty-front/src/modules/views/view-picker/components/ViewPickerDropdown.tsx

@@ -1,12 +1,16 @@
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 import { useRecoilValue } from 'recoil';
-import { IconChevronDown, IconList, useIcons } from 'twenty-ui';
+import {
+  IconChevronDown,
+  IconList,
+  MOBILE_VIEWPORT,
+  useIcons,
+} from 'twenty-ui';
 
 import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
 import { StyledDropdownButtonContainer } from '@/ui/layout/dropdown/components/StyledDropdownButtonContainer';
 import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
-import { MOBILE_VIEWPORT } from '@/ui/theme/constants/MobileViewport';
 import { useGetCurrentView } from '@/views/hooks/useGetCurrentView';
 import { ViewsHotkeyScope } from '@/views/types/ViewsHotkeyScope';
 import { ViewPickerCreateOrEditContent } from '@/views/view-picker/components/ViewPickerCreateOrEditContent';

packages/twenty-front/src/pages/auth/PaymentSuccess.tsx

@@ -2,13 +2,12 @@ import React from 'react';
 import { useNavigate } from 'react-router-dom';
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
-import { IconCheck } from 'twenty-ui';
+import { IconCheck, RGBA } from 'twenty-ui';
 
 import { SubTitle } from '@/auth/components/SubTitle';
 import { Title } from '@/auth/components/Title';
 import { AppPath } from '@/types/AppPath';
 import { MainButton } from '@/ui/input/button/components/MainButton';
-import { RGBA } from '@/ui/theme/constants/Rgba';
 import { AnimatedEaseIn } from '@/ui/utilities/animation/components/AnimatedEaseIn';
 
 const StyledCheckContainer = styled.div`

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

@@ -1,3 +1,4 @@
+/* eslint-disable @nx/workspace-no-hardcoded-colors */
 import { ANIMATION } from './Animation';
 import { BLUR } from './Blur';
 import { COLOR } from './Colors';
@@ -14,6 +15,20 @@ export const THEME_COMMON = {
   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(' '),