[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/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';