[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.
2024-05-25 19:09:25 +05:00
parent 9c325eb0ef
commit cfd83d6b8e
81 changed files with 84 additions and 633 deletions
--- a/packages/twenty-front/src/modules/ui/theme/assets/dark-noise.jpg
+++ b/packages/twenty-front/src/modules/ui/theme/assets/dark-noise.jpg
--- a/packages/twenty-front/src/modules/ui/theme/assets/light-noise.png
+++ b/packages/twenty-front/src/modules/ui/theme/assets/light-noise.png
--- a/packages/twenty-front/src/modules/ui/theme/constants/AccentDark.ts
+++ b/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,
-};
--- a/packages/twenty-front/src/modules/ui/theme/constants/AccentLight.ts
+++ b/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,
-};
--- a/packages/twenty-front/src/modules/ui/theme/constants/Animation.ts
+++ b/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';
--- a/packages/twenty-front/src/modules/ui/theme/constants/BackgroundDark.ts
+++ b/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,
-};
--- a/packages/twenty-front/src/modules/ui/theme/constants/BackgroundLight.ts
+++ b/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,
-};
--- a/packages/twenty-front/src/modules/ui/theme/constants/Blur.ts
+++ b/packages/twenty-front/src/modules/ui/theme/constants/Blur.ts
@ -1,4 +0,0 @@
-export const BLUR = {
-  light: 'blur(6px)',
-  strong: 'blur(20px)',
-};
--- a/packages/twenty-front/src/modules/ui/theme/constants/BorderCommon.ts
+++ b/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%',
-  },
-};
--- a/packages/twenty-front/src/modules/ui/theme/constants/BorderDark.ts
+++ b/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,
-};
--- a/packages/twenty-front/src/modules/ui/theme/constants/BorderLight.ts
+++ b/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,
-};
--- a/packages/twenty-front/src/modules/ui/theme/constants/BoxShadowDark.ts
+++ b/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)}`,
-};
--- a/packages/twenty-front/src/modules/ui/theme/constants/BoxShadowLight.ts
+++ b/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)}`,
-};
--- a/packages/twenty-front/src/modules/ui/theme/constants/Colors.ts
+++ b/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,
-};
--- a/packages/twenty-front/src/modules/ui/theme/constants/FontCommon.ts
+++ b/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',
-};
--- a/packages/twenty-front/src/modules/ui/theme/constants/FontDark.ts
+++ b/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,
-};
--- a/packages/twenty-front/src/modules/ui/theme/constants/FontLight.ts
+++ b/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,
-};
--- a/packages/twenty-front/src/modules/ui/theme/constants/GrayScale.ts
+++ b/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',
-};
--- a/packages/twenty-front/src/modules/ui/theme/constants/HoverBackground.ts
+++ b/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};
-  }
-`;
--- a/packages/twenty-front/src/modules/ui/theme/constants/Icon.ts
+++ b/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,
-  },
-};
--- a/packages/twenty-front/src/modules/ui/theme/constants/MainColorNames.ts
+++ b/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;
--- a/packages/twenty-front/src/modules/ui/theme/constants/MobileViewport.ts
+++ b/packages/twenty-front/src/modules/ui/theme/constants/MobileViewport.ts
@ -1 +0,0 @@
-export const MOBILE_VIEWPORT = 768;
--- a/packages/twenty-front/src/modules/ui/theme/constants/Modal.ts
+++ b/packages/twenty-front/src/modules/ui/theme/constants/Modal.ts
@ -1,7 +0,0 @@
-export const MODAL = {
-  size: {
-    sm: '300px',
-    md: '400px',
-    lg: '53%',
-  },
-};
--- a/packages/twenty-front/src/modules/ui/theme/constants/OverlayBackground.ts
+++ b/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};
-`;
--- a/packages/twenty-front/src/modules/ui/theme/constants/Rgba.ts
+++ b/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})`;
-};
--- a/packages/twenty-front/src/modules/ui/theme/constants/SecondaryColors.ts
+++ b/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',
-};
--- a/packages/twenty-front/src/modules/ui/theme/constants/TagDark.ts
+++ b/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,
-  },
-};
--- a/packages/twenty-front/src/modules/ui/theme/constants/TagLight.ts
+++ b/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,
-  },
-};
--- a/packages/twenty-front/src/modules/ui/theme/constants/Text.ts
+++ b/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,
-};
--- a/packages/twenty-front/src/modules/ui/theme/constants/TextInputStyle.ts
+++ b/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};
-  }
-`;
--- a/packages/twenty-front/src/modules/ui/theme/constants/ThemeCommon.ts
+++ b/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,
-};
--- a/packages/twenty-front/src/modules/ui/theme/utils/themeColorSchema.ts
+++ b/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[]],
-);