Migrate to twenty-ui - input/color-scheme (#7995)

This PR was created by [GitStart](https://gitstart.com/) to address the
requirements from this ticket:
[TWNTY-7063](https://clients.gitstart.com/twenty/5449/tickets/TWNTY-7063).

 --- 

### Description

- Move color-scheme components to `twenty-ui`

Fixes  twentyhq/private-issues#93

Co-authored-by: gitstart-twenty <gitstart-twenty@users.noreply.github.com>
Co-authored-by: Charles Bochet <charles@twenty.com>

packages/twenty-front/src/pages/settings/profile/appearance/components/SettingsAppearance.tsx

@@ -1,9 +1,8 @@
-import { H2Title } from 'twenty-ui';
+import { ColorSchemePicker, H2Title } from 'twenty-ui';
 
 import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer';
 import { getSettingsPagePath } from '@/settings/utils/getSettingsPagePath';
 import { SettingsPath } from '@/types/SettingsPath';
-import { ColorSchemePicker } from '@/ui/input/color-scheme/components/ColorSchemePicker';
 import { SubMenuTopBarContainer } from '@/ui/layout/page/components/SubMenuTopBarContainer';
 import { Section } from '@/ui/layout/section/components/Section';
 import { useColorScheme } from '@/ui/theme/hooks/useColorScheme';

packages/twenty-front/tsup.ui.index.tsx

@@ -4,8 +4,6 @@ export { ThemeProvider } from '@emotion/react';
 export * from 'twenty-ui';
 export * from './src/modules/ui/feedback/progress-bar/components/CircularProgressBar';
 export * from './src/modules/ui/feedback/progress-bar/components/ProgressBar';
-export * from './src/modules/ui/input/color-scheme/components/ColorSchemeCard';
-export * from './src/modules/ui/input/color-scheme/components/ColorSchemePicker';
 export * from './src/modules/ui/input/components/AutosizeTextInput';
 export * from './src/modules/ui/input/components/Checkbox';
 export * from './src/modules/ui/input/components/EntityTitleDoubleTextInput';

packages/twenty-ui/src/input/color-scheme/components/ColorSchemeCard.tsx

@@ -1,14 +1,13 @@
-import React from 'react';
 import styled from '@emotion/styled';
+import { Checkmark } from '@ui/display/checkmark/components/Checkmark';
+import { ColorScheme } from '@ui/input/types/ColorScheme';
 import {
   AnimatePresence,
   AnimationControls,
   motion,
   useAnimation,
 } from 'framer-motion';
-import { Checkmark } from 'twenty-ui';
+import React from 'react';
-
-import { ColorScheme } from '@/workspace-member/types/WorkspaceMember';
 
 const StyledColorSchemeBackground = styled.div<
   Pick<ColorSchemeCardProps, 'variant'>

packages/twenty-ui/src/input/color-scheme/components/ColorSchemePicker.tsx

@@ -1,10 +1,8 @@
-import React from 'react';
 import styled from '@emotion/styled';
 
-import { ColorScheme } from '@/workspace-member/types/WorkspaceMember';
+import { ColorScheme } from '@ui/input/types/ColorScheme';
-
+import { MOBILE_VIEWPORT } from '@ui/theme';
 import { ColorSchemeCard } from './ColorSchemeCard';
-import { MOBILE_VIEWPORT } from 'twenty-ui';
 
 const StyledContainer = styled.div`
   display: flex;

packages/twenty-ui/src/input/color-scheme/components/__stories__/ColorSchemeCard.stories.tsx

@@ -1,6 +1,6 @@
 import styled from '@emotion/styled';
 import { Meta, StoryObj } from '@storybook/react';
-import { ComponentDecorator } from 'twenty-ui';
+import { ComponentDecorator } from '@ui/testing';
 
 import { ColorSchemeCard } from '../ColorSchemeCard';
 

packages/twenty-ui/src/input/index.ts

@@ -12,4 +12,7 @@ export * from './button/components/LightIconButton';
 export * from './button/components/LightIconButtonGroup';
 export * from './button/components/MainButton';
 export * from './button/components/RoundedIconButton';
+export * from './color-scheme/components/ColorSchemeCard';
+export * from './color-scheme/components/ColorSchemePicker';
 export * from './components/Toggle';
+export * from './types/ColorScheme';

packages/twenty-ui/src/input/types/ColorScheme.ts

@@ -0,0 +1 @@
+export type ColorScheme = 'Dark' | 'Light' | 'System';

packages/twenty-website/src/content/twenty-ui/input/color-scheme.mdx

@@ -11,7 +11,7 @@ Represents different color schemes and is specially tailored for light and dark
 <ArticleTabs label1="Usage" label2="Props">
 <ArticleTab>
 
-<SandpackEditor content={`import { ColorSchemeCard } from "@/ui/input/color-scheme/components/ColorSchemeCard";
+<SandpackEditor content={`import { ColorSchemeCard } from "twenty-ui";
 
 export const MyComponent = () => {
   return (
@@ -43,7 +43,7 @@ Allows users to choose between different color schemes.
 <ArticleTabs label1="Usage" label2="Props">
 <ArticleTab>
 
-<SandpackEditor content={`import { ColorSchemePicker } from "@/ui/input/color-scheme/components/ColorSchemePicker";
+<SandpackEditor content={`import { ColorSchemePicker } from "twenty-ui";
 
 export const MyComponent = () => {
   return <ColorSchemePicker