Add linter to Chrome Extension (#4044). (#4174)

* feat: configure eslint rules by replicating those in the twenty-front package and introduce scripts for linting, formatting code and removing build output

* fix: ensure each file of the extension package satisfies linting rules and disable some rules where necessary

* fix: update relative imports to absolute imports throughout extension code with the defined tilde and at symbols

* fix: import the updated ui module from the front package to the chrome extension package to prevent eslint rules from breaking subject to the recent merged changes into main

* fix: commit the case change for files that were missed by Git in the earlier commits due to default configuration

packages/twenty-chrome-extension/.eslintrc-ci.cjs

@@ -0,0 +1,19 @@
+module.exports = {
+  extends: ['./.eslintrc.cjs'],
+  rules: {
+    'no-console': 'error',
+  },
+  overrides: [
+    {
+      files: [
+        '.storybook/**/*',
+        '**/*.stories.tsx',
+        '**/*.test.ts',
+        '**/*.test.tsx',
+      ],
+      rules: {
+        'no-console': 'off',
+      },
+    },
+  ],
+};

packages/twenty-chrome-extension/.eslintrc.cjs

@@ -1,18 +1,61 @@
+// eslint-disable-next-line
+const path = require('path');
+
 module.exports = {
-  root: true,
-  env: { browser: true, es2020: true },
   extends: [
-    'eslint:recommended',
+    'plugin:@nx/react',
-    'plugin:@typescript-eslint/recommended',
+    'plugin:react/recommended',
     'plugin:react-hooks/recommended',
+    'plugin:storybook/recommended',
+    '../../.eslintrc.js',
   ],
-  ignorePatterns: ['dist', '.eslintrc.cjs'],
+  plugins: ['react-hooks', 'react-refresh'],
-  parser: '@typescript-eslint/parser',
+  ignorePatterns: ['!**/*', 'node_modules', 'dist'],
-  plugins: ['react-refresh'],
   rules: {
-    'react-refresh/only-export-components': [
+    '@nx/workspace-effect-components': 'error',
-      'warn',
+    '@nx/workspace-no-hardcoded-colors': 'error',
-      { allowConstantExport: true },
+    '@nx/workspace-matching-state-variable': 'error',
+    '@nx/workspace-sort-css-properties-alphabetically': 'error',
+    '@nx/workspace-styled-components-prefixed-with-styled': 'error',
+    '@nx/workspace-no-state-useref': 'error',
+    '@nx/workspace-component-props-naming': 'error',
+
+    'react/no-unescaped-entities': 'off',
+    'react/prop-types': 'off',
+    'react/jsx-key': 'off',
+    'react/display-name': 'off',
+    'react/jsx-uses-react': 'off',
+    'react/react-in-jsx-scope': 'off',
+    'react/jsx-no-useless-fragment': 'off',
+    'react/jsx-props-no-spreading': [
+      'error',
+      {
+        explicitSpread: 'ignore',
+      },
     ],
   },
-}
+  overrides: [
+    {
+      files: ['*.ts', '*.tsx', '*.js', '*.jsx'],
+      parserOptions: {
+        project: ['packages/twenty-chrome-extension/tsconfig.*?.json'],
+      },
+      rules: {},
+    },
+    {
+      files: ['.storybook/main.@(js|cjs|mjs|ts)'],
+      rules: {
+        'storybook/no-uninstalled-addons': [
+          'error',
+          { packageJsonLocation: path.resolve('../../package.json') },
+        ],
+      },
+    },
+    {
+      files: ['.storybook/**/*', '**/*.stories.tsx', '**/*.test.@(ts|tsx)'],
+      rules: {
+        'no-console': 'off',
+      },
+    },
+  ],
+};

packages/twenty-chrome-extension/package.json

@@ -6,8 +6,12 @@
   "type": "module",
   "scripts": {
     "nx": "NX_DEFAULT_PROJECT=twenty-chrome-extension node ../../node_modules/nx/bin/nx.js",
-    "start": "vite",
+    "clean": "rimraf ./dist",
-    "build": "tsc && vite build"
+    "start": "yarn clean && vite",
+    "build": "yarn clean && tsc && vite build",
+    "lint": "eslint . --report-unused-disable-directives --max-warnings 0 --config .eslintrc.cjs",
+    "fmt": "prettier --check \"src/**/*.ts\" \"src/**/*.tsx\"",
+    "fmt:fix": "prettier --cache --write \"src/**/*.ts\" \"src/**/*.tsx\""
   },
   "dependencies": {
     "@types/chrome": "^0.0.256"

packages/twenty-chrome-extension/src/background/index.ts

@@ -1,16 +1,14 @@
-import { openOptionsPage } from './utils/openOptionsPage';
+import { openOptionsPage } from '~/background/utils/openOptionsPage';
-
-console.log('Background Script Works');
 
 // Open options page programmatically in a new tab.
-chrome.runtime.onInstalled.addListener(function (details) {
+chrome.runtime.onInstalled.addListener((details) => {
   if (details.reason === 'install') {
     openOptionsPage();
   }
 });
 
 // Open options page when extension icon is clicked.
-chrome.action.onClicked.addListener(function () {
+chrome.action.onClicked.addListener(() => {
   openOptionsPage();
 });
 

packages/twenty-chrome-extension/src/contentScript/createButton.ts

@@ -1,7 +1,8 @@
-function createNewButton(
+/* eslint-disable @nx/workspace-no-hardcoded-colors */
+const createNewButton = (
   text: string,
   onClickHandler: () => void,
-): HTMLButtonElement {
+): HTMLButtonElement => {
   const newButton: HTMLButtonElement = document.createElement('button');
   newButton.textContent = text;
 
@@ -52,6 +53,6 @@ function createNewButton(
   });
 
   return newButton;
-}
+};
 
 export default createNewButton;

packages/twenty-chrome-extension/src/contentScript/extractCompanyProfile.ts

@@ -1,10 +1,10 @@
-import handleQueryParams from '../utils/handleQueryParams';
+import createNewButton from '~/contentScript/createButton';
-import requestDb from '../utils/requestDb';
+import extractCompanyLinkedinLink from '~/contentScript/utils/extractCompanyLinkedinLink';
-import createNewButton from './createButton';
+import extractDomain from '~/contentScript/utils/extractDomain';
-import extractCompanyLinkedinLink from './utils/extractCompanyLinkedinLink';
+import handleQueryParams from '~/utils/handleQueryParams';
-import extractDomain from './utils/extractDomain';
+import requestDb from '~/utils/requestDb';
 
-function insertButtonForCompany(): void {
+const insertButtonForCompany = (): void => {
   // Select the element in which to create the button.
   const parentDiv: HTMLDivElement | null = document.querySelector(
     '.org-top-card-primary-actions__inner',
@@ -101,6 +101,6 @@ function insertButtonForCompany(): void {
 
     Object.assign(newButtonCompany.style, buttonSpecificStyles);
   }
-}
+};
 
 export default insertButtonForCompany;

packages/twenty-chrome-extension/src/contentScript/extractPersonProfile.ts

@@ -1,9 +1,9 @@
-import handleQueryParams from '../utils/handleQueryParams';
+import createNewButton from '~/contentScript/createButton';
-import requestDb from '../utils/requestDb';
+import extractFirstAndLastName from '~/contentScript/utils/extractFirstAndLastName';
-import createNewButton from './createButton';
+import handleQueryParams from '~/utils/handleQueryParams';
-import extractFirstAndLastName from './utils/extractFirstAndLastName';
+import requestDb from '~/utils/requestDb';
 
-function insertButtonForPerson(): void {
+const insertButtonForPerson = (): void => {
   // Select the element in which to create the button.
   const parentDiv: HTMLDivElement | null = document.querySelector(
     '.pv-top-card-v2-ctas',
@@ -114,6 +114,6 @@ function insertButtonForPerson(): void {
 
     Object.assign(newButtonPerson.style, buttonSpecificStyles);
   }
-}
+};
 
 export default insertButtonForPerson;

packages/twenty-chrome-extension/src/contentScript/index.ts

@@ -1,5 +1,5 @@
-import insertButtonForPerson from './extractPersonProfile';
+import insertButtonForCompany from '~/contentScript/extractCompanyProfile';
-import insertButtonForCompany from './extractCompanyProfile';
+import insertButtonForPerson from '~/contentScript/extractPersonProfile';
 
 // Inject buttons into the DOM when SPA is reloaded on the resource url.
 // e.g. reload the page when on https://www.linkedin.com/in/mabdullahabaid/

packages/twenty-chrome-extension/src/contentScript/utils/extractDomain.ts

@@ -1,4 +1,4 @@
-function extractDomain(url: string | null) {
+const extractDomain = (url: string | null) => {
   if (!url) return '';
 
   const hostname = new URL(url).hostname;
@@ -10,6 +10,6 @@ function extractDomain(url: string | null) {
   }
 
   return domain;
-}
+};
 
 export default extractDomain;

packages/twenty-chrome-extension/src/manifest.ts

@@ -1,4 +1,5 @@
 import { defineManifest } from '@crxjs/vite-plugin';
+
 import packageData from '../package.json';
 
 export default defineManifest({

packages/twenty-chrome-extension/src/options/Options.tsx

@@ -1,13 +1,14 @@
 import styled from '@emotion/styled';
-import { ApiKeyForm } from './modules/api-key/components/ApiKeyForm';
+
+import { ApiKeyForm } from '@/api-key/components/ApiKeyForm';
 
 const StyledContainer = styled.div`
+  align-items: center;
   background: ${({ theme }) => theme.background.noisy};
   display: flex;
   flex-direction: column;
-  justify-content: center;
-  align-items: center;
   height: 100vh;
+  justify-content: center;
 `;
 
 const Options = () => {

packages/twenty-chrome-extension/src/options/index.tsx

@@ -1,9 +1,11 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
-import App from './Options';
+
-import '../index.css';
+import { AppThemeProvider } from '@/ui/theme/components/AppThemeProvider';
-import { AppThemeProvider } from './modules/ui/theme/components/AppThemeProvider';
+import { ThemeType } from '@/ui/theme/constants/ThemeLight';
-import { ThemeType } from './modules/ui/theme/constants/theme';
+import App from '~/options/Options';
+
+import '~/index.css';
 
 ReactDOM.createRoot(document.getElementById('app') as HTMLElement).render(
   <AppThemeProvider>
@@ -14,6 +16,5 @@ ReactDOM.createRoot(document.getElementById('app') as HTMLElement).render(
 );
 
 declare module '@emotion/react' {
-  // eslint-disable-next-line @typescript-eslint/no-empty-interface
   export interface Theme extends ThemeType {}
 }

packages/twenty-chrome-extension/src/options/modules/api-key/components/ApiKeyForm.tsx

@@ -1,9 +1,10 @@
-import styled from '@emotion/styled';
-import { H2Title } from '../../ui/display/typography/components/H2Title';
 import { useEffect, useState } from 'react';
-import { TextInput } from '../../ui/input/components/TextInput';
+import styled from '@emotion/styled';
-import { Button } from '../../ui/input/button/Button';
+
-import { Toggle } from '../../ui/input/components/Toggle';
+import { H2Title } from '@/ui/display/typography/components/H2Title';
+import { Button } from '@/ui/input/button/Button';
+import { TextInput } from '@/ui/input/components/TextInput';
+import { Toggle } from '@/ui/input/components/Toggle';
 
 const StyledContainer = styled.div<{ isToggleOn: boolean }>`
   width: 400px;
@@ -18,8 +19,8 @@ const StyledContainer = styled.div<{ isToggleOn: boolean }>`
 `;
 
 const StyledHeader = styled.header`
-  text-align: center;
   margin-bottom: ${({ theme }) => theme.spacing(8)};
+  text-align: center;
 `;
 
 const StyledImg = styled.img``;

packages/twenty-chrome-extension/src/options/modules/ui/input/components/TextInput.tsx

@@ -29,7 +29,7 @@ const StyledLabel = styled.span`
 const StyledInputContainer = styled.div`
   display: flex;
   align-items: center;
-  border: 1px solid #ccc;
+  border: 1px solid ${({ theme }) => theme.color.gray30};
   border-radius: 4px;
   padding: 8px;
 `;
@@ -46,12 +46,12 @@ const StyledInput = styled.input`
   font-size: 14px;
 
   &::placeholder {
-    color: #aaa;
+    color: ${({ theme }) => theme.font.color.light};
   }
 `;
 
 const StyledErrorHelper = styled.div`
-  color: #ff0000;
+  color: ${({ theme }) => theme.color.red};
   font-size: 12px;
   padding: 5px 0;
 `;

packages/twenty-chrome-extension/src/options/modules/ui/theme/components/AppThemeProvider.tsx

@@ -1,13 +1,13 @@
 import { ThemeProvider } from '@emotion/react';
 
-import { lightTheme } from '../constants/theme';
+import { THEME_LIGHT } from '@/ui/theme/constants/ThemeLight';
 
 type AppThemeProviderProps = {
   children: JSX.Element;
 };
 
 const AppThemeProvider: React.FC<AppThemeProviderProps> = ({ children }) => {
-  const theme = lightTheme;
+  const theme = THEME_LIGHT;
 
   return <ThemeProvider theme={theme}>{children}</ThemeProvider>;
 };

packages/twenty-chrome-extension/src/options/modules/ui/theme/constants/AccentDark.ts

@@ -0,0 +1,10 @@
+import { COLOR } from '@/ui/theme/constants/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-chrome-extension/src/options/modules/ui/theme/constants/AccentLight.ts

@@ -0,0 +1,10 @@
+import { COLOR } from '@/ui/theme/constants/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-chrome-extension/src/options/modules/ui/theme/constants/Animation.ts

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

packages/twenty-chrome-extension/src/options/modules/ui/theme/constants/BackgroundDark.ts

@@ -0,0 +1,26 @@
+/* eslint-disable @nx/workspace-no-hardcoded-colors */
+import DarkNoise from '@/ui/theme/assets/dark-noise.jpg';
+import { COLOR } from '@/ui/theme/constants/Colors';
+import { GRAY_SCALE } from '@/ui/theme/constants/GrayScale';
+import { RGBA } from '@/ui/theme/constants/Rgba';
+
+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.8),
+    secondary: RGBA(GRAY_SCALE.gray80, 0.8),
+    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%)`,
+};

packages/twenty-chrome-extension/src/options/modules/ui/theme/constants/BackgroundLight.ts

@@ -0,0 +1,26 @@
+/* eslint-disable @nx/workspace-no-hardcoded-colors */
+import LightNoise from '@/ui/theme/assets/light-noise.png';
+import { COLOR } from '@/ui/theme/constants/Colors';
+import { GRAY_SCALE } from '@/ui/theme/constants/GrayScale';
+import { RGBA } from '@/ui/theme/constants/Rgba';
+
+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.8),
+    secondary: RGBA(GRAY_SCALE.gray10, 0.8),
+    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%)`,
+};

packages/twenty-chrome-extension/src/options/modules/ui/theme/constants/Blur.ts

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

packages/twenty-chrome-extension/src/options/modules/ui/theme/constants/BorderCommon.ts

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

packages/twenty-chrome-extension/src/options/modules/ui/theme/constants/BorderDark.ts

@@ -0,0 +1,15 @@
+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-chrome-extension/src/options/modules/ui/theme/constants/BorderLight.ts

@@ -0,0 +1,15 @@
+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-chrome-extension/src/options/modules/ui/theme/constants/BoxShadowDark.ts

@@ -0,0 +1,18 @@
+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-chrome-extension/src/options/modules/ui/theme/constants/BoxShadowLight.ts

@@ -0,0 +1,21 @@
+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-chrome-extension/src/options/modules/ui/theme/constants/Colors.ts

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

packages/twenty-chrome-extension/src/options/modules/ui/theme/constants/FontCommon.ts

@@ -0,0 +1,17 @@
+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-chrome-extension/src/options/modules/ui/theme/constants/FontDark.ts

@@ -0,0 +1,16 @@
+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-chrome-extension/src/options/modules/ui/theme/constants/FontLight.ts

@@ -0,0 +1,16 @@
+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-chrome-extension/src/options/modules/ui/theme/constants/GrayScale.ts

@@ -0,0 +1,22 @@
+/* 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-chrome-extension/src/options/modules/ui/theme/constants/HoverBackground.ts

@@ -0,0 +1,8 @@
+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-chrome-extension/src/options/modules/ui/theme/constants/Icon.ts

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

packages/twenty-chrome-extension/src/options/modules/ui/theme/constants/MainColorNames.ts

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

packages/twenty-chrome-extension/src/options/modules/ui/theme/constants/MainColors.ts

@@ -0,0 +1,15 @@
+/* eslint-disable @nx/workspace-no-hardcoded-colors */
+import { GRAY_SCALE } from '@/ui/theme/constants/GrayScale';
+
+export const MAIN_COLORS = {
+  green: '#55ef3c',
+  turquoise: '#15de8f',
+  sky: '#00e0ff',
+  blue: '#1961ed',
+  purple: '#915ffd',
+  pink: '#f54bd0',
+  red: '#f83e3e',
+  orange: '#ff7222',
+  yellow: '#ffd338',
+  gray: GRAY_SCALE.gray30,
+};

packages/twenty-chrome-extension/src/options/modules/ui/theme/constants/MobileViewport.ts

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

packages/twenty-chrome-extension/src/options/modules/ui/theme/constants/Modal.ts

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

packages/twenty-chrome-extension/src/options/modules/ui/theme/constants/OverlayBackground.ts

@@ -0,0 +1,9 @@
+import { css } from '@emotion/react';
+
+import { ThemeType } from '@/ui/theme/constants/ThemeLight';
+
+export const OVERLAY_BACKGROUND = (props: { theme: ThemeType }) => css`
+  backdrop-filter: blur(8px);
+  background: ${props.theme.background.transparent.secondary};
+  box-shadow: ${props.theme.boxShadow.strong};
+`;

packages/twenty-chrome-extension/src/options/modules/ui/theme/constants/Rgba.ts

@@ -0,0 +1,8 @@
+/* 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-chrome-extension/src/options/modules/ui/theme/constants/SecondaryColors.ts

@@ -0,0 +1,106 @@
+/* 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-chrome-extension/src/options/modules/ui/theme/constants/TagDark.ts

@@ -0,0 +1,28 @@
+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-chrome-extension/src/options/modules/ui/theme/constants/TagLight.ts

@@ -0,0 +1,28 @@
+import { COLOR } from '@/ui/theme/constants/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-chrome-extension/src/options/modules/ui/theme/constants/Text.ts

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

packages/twenty-chrome-extension/src/options/modules/ui/theme/constants/TextInputStyle.ts

@@ -0,0 +1,21 @@
+import { css } from '@emotion/react';
+
+import { ThemeType } from '@/ui/theme/constants/ThemeLight';
+
+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-chrome-extension/src/options/modules/ui/theme/constants/ThemeCommon.ts

@@ -0,0 +1,44 @@
+/* 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-chrome-extension/src/options/modules/ui/theme/constants/ThemeDark.ts

@@ -0,0 +1,21 @@
+import { ACCENT_DARK } from '@/ui/theme/constants/AccentDark';
+import { BACKGROUND_DARK } from '@/ui/theme/constants/BackgroundDark';
+import { BORDER_DARK } from '@/ui/theme/constants/BorderDark';
+import { BOX_SHADOW_DARK } from '@/ui/theme/constants/BoxShadowDark';
+import { FONT_DARK } from '@/ui/theme/constants/FontDark';
+import { TAG_DARK } from '@/ui/theme/constants/TagDark';
+import { THEME_COMMON } from '@/ui/theme/constants/ThemeCommon';
+import { ThemeType } from '@/ui/theme/constants/ThemeLight';
+
+export const THEME_DARK: ThemeType = {
+  ...THEME_COMMON,
+  ...{
+    accent: ACCENT_DARK,
+    background: BACKGROUND_DARK,
+    border: BORDER_DARK,
+    tag: TAG_DARK,
+    boxShadow: BOX_SHADOW_DARK,
+    font: FONT_DARK,
+    name: 'dark',
+  },
+};

packages/twenty-chrome-extension/src/options/modules/ui/theme/constants/ThemeLight.ts

@@ -0,0 +1,22 @@
+import { ACCENT_LIGHT } from '@/ui/theme/constants/AccentLight';
+import { BACKGROUND_LIGHT } from '@/ui/theme/constants/BackgroundLight';
+import { BORDER_LIGHT } from '@/ui/theme/constants/BorderLight';
+import { BOX_SHADOW_LIGHT } from '@/ui/theme/constants/BoxShadowLight';
+import { FONT_LIGHT } from '@/ui/theme/constants/FontLight';
+import { TAG_LIGHT } from '@/ui/theme/constants/TagLight';
+import { THEME_COMMON } from '@/ui/theme/constants/ThemeCommon';
+
+export const THEME_LIGHT = {
+  ...THEME_COMMON,
+  ...{
+    accent: ACCENT_LIGHT,
+    background: BACKGROUND_LIGHT,
+    border: BORDER_LIGHT,
+    tag: TAG_LIGHT,
+    boxShadow: BOX_SHADOW_LIGHT,
+    font: FONT_LIGHT,
+    name: 'light',
+  },
+};
+
+export type ThemeType = typeof THEME_LIGHT;

packages/twenty-chrome-extension/src/options/modules/ui/theme/constants/accent.ts

@@ -1,19 +0,0 @@
-import { color } from './colors';
-
-export const accentLight = {
-  primary: color.blueAccent25,
-  secondary: color.blueAccent20,
-  tertiary: color.blueAccent15,
-  quaternary: color.blueAccent10,
-  accent3570: color.blueAccent35,
-  accent4060: color.blueAccent40,
-};
-
-export const accentDark = {
-  primary: color.blueAccent75,
-  secondary: color.blueAccent80,
-  tertiary: color.blueAccent85,
-  quaternary: color.blueAccent90,
-  accent3570: color.blueAccent70,
-  accent4060: color.blueAccent60,
-};

packages/twenty-chrome-extension/src/options/modules/ui/theme/constants/animation.ts

@@ -1,4 +1,4 @@
-export const animation = {
+export const ANIMATION = {
   duration: {
     instant: 0.075,
     fast: 0.15,

packages/twenty-chrome-extension/src/options/modules/ui/theme/constants/background.ts

@@ -1,46 +0,0 @@
-import DarkNoise from '../assets/dark-noise.jpg';
-import LightNoise from '../assets/light-noise.png';
-
-import { color, grayScale, rgba } from './colors';
-
-export const backgroundLight = {
-  noisy: `url(${LightNoise.toString()});`,
-  primary: grayScale.gray0,
-  secondary: grayScale.gray10,
-  tertiary: grayScale.gray15,
-  quaternary: grayScale.gray20,
-  danger: color.red10,
-  transparent: {
-    primary: rgba(grayScale.gray0, 0.8),
-    secondary: rgba(grayScale.gray10, 0.8),
-    strong: rgba(grayScale.gray100, 0.16),
-    medium: rgba(grayScale.gray100, 0.08),
-    light: rgba(grayScale.gray100, 0.04),
-    lighter: rgba(grayScale.gray100, 0.02),
-    danger: rgba(color.red, 0.08),
-  },
-  overlay: rgba(grayScale.gray80, 0.8),
-  radialGradient: `radial-gradient(50% 62.62% at 50% 0%, #505050 0%, ${grayScale.gray60} 100%)`,
-  radialGradientHover: `radial-gradient(76.32% 95.59% at 50% 0%, #505050 0%, ${grayScale.gray60} 100%)`,
-};
-
-export const backgroundDark = {
-  noisy: `url(${DarkNoise.toString()});`,
-  primary: grayScale.gray85,
-  secondary: grayScale.gray80,
-  tertiary: grayScale.gray75,
-  quaternary: grayScale.gray70,
-  danger: color.red80,
-  transparent: {
-    primary: rgba(grayScale.gray85, 0.8),
-    secondary: rgba(grayScale.gray80, 0.8),
-    strong: rgba(grayScale.gray0, 0.14),
-    medium: rgba(grayScale.gray0, 0.1),
-    light: rgba(grayScale.gray0, 0.06),
-    lighter: rgba(grayScale.gray0, 0.03),
-    danger: rgba(color.red, 0.08),
-  },
-  overlay: rgba(grayScale.gray80, 0.8),
-  radialGradient: `radial-gradient(50% 62.62% at 50% 0%, #505050 0%, ${grayScale.gray60} 100%)`,
-  radialGradientHover: `radial-gradient(76.32% 95.59% at 50% 0%, #505050 0%, ${grayScale.gray60} 100%)`,
-};

packages/twenty-chrome-extension/src/options/modules/ui/theme/constants/blur.ts

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

packages/twenty-chrome-extension/src/options/modules/ui/theme/constants/border.ts

@@ -1,34 +0,0 @@
-import { color, grayScale } from './colors';
-
-const common = {
-  radius: {
-    xs: '2px',
-    sm: '4px',
-    md: '8px',
-    rounded: '100%',
-  },
-};
-
-export const borderLight = {
-  color: {
-    strong: grayScale.gray25,
-    medium: grayScale.gray20,
-    light: grayScale.gray15,
-    secondaryInverted: grayScale.gray50,
-    inverted: grayScale.gray60,
-    danger: color.red20,
-  },
-  ...common,
-};
-
-export const borderDark = {
-  color: {
-    strong: grayScale.gray55,
-    medium: grayScale.gray65,
-    light: grayScale.gray70,
-    secondaryInverted: grayScale.gray35,
-    inverted: grayScale.gray20,
-    danger: color.red70,
-  },
-  ...common,
-};

packages/twenty-chrome-extension/src/options/modules/ui/theme/constants/boxShadow.ts

@@ -1,27 +0,0 @@
-import { grayScale, rgba } from './colors';
-
-export const boxShadowLight = {
-  extraLight: `0px 1px 0px 0px ${rgba(grayScale.gray100, 0.04)}`,
-  light: `0px 2px 4px 0px ${rgba(
-    grayScale.gray100,
-    0.04,
-  )}, 0px 0px 4px 0px ${rgba(grayScale.gray100, 0.08)}`,
-  strong: `2px 4px 16px 0px ${rgba(
-    grayScale.gray100,
-    0.12,
-  )}, 0px 2px 4px 0px ${rgba(grayScale.gray100, 0.04)}`,
-  underline: `0px 1px 0px 0px ${rgba(grayScale.gray100, 0.32)}`,
-};
-
-export const boxShadowDark = {
-  extraLight: `0px 1px 0px 0px ${rgba(grayScale.gray100, 0.04)}`,
-  light: `0px 2px 4px 0px ${rgba(
-    grayScale.gray100,
-    0.04,
-  )}, 0px 0px 4px 0px ${rgba(grayScale.gray100, 0.08)}`,
-  strong: `2px 4px 16px 0px ${rgba(
-    grayScale.gray100,
-    0.16,
-  )}, 0px 2px 4px 0px ${rgba(grayScale.gray100, 0.08)}`,
-  underline: `0px 1px 0px 0px ${rgba(grayScale.gray100, 0.32)}`,
-};

packages/twenty-chrome-extension/src/options/modules/ui/theme/constants/colors.ts

@@ -1,152 +1,7 @@
-import hexRgb from 'hex-rgb';
+import { MAIN_COLORS } from '@/ui/theme/constants/MainColors';
+import { SECONDARY_COLORS } from '@/ui/theme/constants/SecondaryColors';
 
-export const grayScale = {
+export const COLOR = {
-  gray100: '#000000',
+  ...MAIN_COLORS,
-  gray90: '#141414',
+  ...SECONDARY_COLORS,
-  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',
-};
-
-export const mainColors = {
-  yellow: '#ffd338',
-  green: '#55ef3c',
-  turquoise: '#15de8f',
-  sky: '#00e0ff',
-  blue: '#1961ed',
-  purple: '#915ffd',
-  pink: '#f54bd0',
-  red: '#f83e3e',
-  orange: '#ff7222',
-  gray: grayScale.gray30,
-};
-
-export type ThemeColor = keyof typeof mainColors;
-
-export const secondaryColors = {
-  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: grayScale.gray70,
-  gray70: grayScale.gray65,
-  gray60: grayScale.gray55,
-  gray50: grayScale.gray40,
-  gray40: grayScale.gray25,
-  gray30: grayScale.gray20,
-  gray20: grayScale.gray15,
-  gray10: grayScale.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',
-};
-
-export const color = {
-  ...mainColors,
-  ...secondaryColors,
-};
-
-export const rgba = (hex: string, alpha: number) => {
-  const rgb = hexRgb(hex, { format: 'array' }).slice(0, -1).join(',');
-  return `rgba(${rgb},${alpha})`;
 };

packages/twenty-chrome-extension/src/options/modules/ui/theme/constants/effects.ts

@@ -1,37 +0,0 @@
-import { css } from '@emotion/react';
-
-import { ThemeType } from './theme';
-
-export const overlayBackground = (props: { theme: ThemeType }) =>
-  css`
-    backdrop-filter: blur(8px);
-    background: ${props.theme.background.transparent.secondary};
-    box-shadow: ${props.theme.boxShadow.strong};
-  `;
-
-export const textInputStyle = (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};
-    }
-  `;
-
-export const hoverBackground = (props: any) =>
-  css`
-    transition: background 0.1s ease;
-    &:hover {
-      background: ${props.theme.background.transparent.light};
-    }
-  `;

packages/twenty-chrome-extension/src/options/modules/ui/theme/constants/font.ts

@@ -1,45 +0,0 @@
-import { color, grayScale } from './colors';
-
-const 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',
-};
-
-export const fontLight = {
-  color: {
-    primary: grayScale.gray60,
-    secondary: grayScale.gray50,
-    tertiary: grayScale.gray40,
-    light: grayScale.gray35,
-    extraLight: grayScale.gray30,
-    inverted: grayScale.gray0,
-    danger: color.red,
-  },
-  ...common,
-};
-
-export const fontDark = {
-  color: {
-    primary: grayScale.gray20,
-    secondary: grayScale.gray35,
-    tertiary: grayScale.gray45,
-    light: grayScale.gray50,
-    extraLight: grayScale.gray55,
-    inverted: grayScale.gray100,
-    danger: color.red,
-  },
-  ...common,
-};

packages/twenty-chrome-extension/src/options/modules/ui/theme/constants/icon.ts

@@ -1,4 +1,4 @@
-export const icon = {
+export const ICON = {
   size: {
     sm: 14,
     md: 16,

packages/twenty-chrome-extension/src/options/modules/ui/theme/constants/modal.ts

@@ -1,4 +1,4 @@
-export const modal = {
+export const MODAL = {
   size: {
     sm: '300px',
     md: '400px',

packages/twenty-chrome-extension/src/options/modules/ui/theme/constants/tag.ts

@@ -1,55 +0,0 @@
-import { color } from './colors';
-
-export const tagLight: { [key: string]: { [key: string]: string } } = {
-  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,
-  },
-};
-
-export const tagDark = {
-  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-chrome-extension/src/options/modules/ui/theme/constants/text.ts

@@ -1,4 +1,4 @@
-export const text = {
+export const TEXT = {
   lineHeight: {
     lg: 1.5,
     md: 1.2,

packages/twenty-chrome-extension/src/options/modules/ui/theme/constants/theme.ts

@@ -1,76 +0,0 @@
-/* eslint-disable twenty/no-hardcoded-colors */
-import { accentDark, accentLight } from './accent';
-import { animation } from './animation';
-import { backgroundDark, backgroundLight } from './background';
-import { blur } from './blur';
-import { borderDark, borderLight } from './border';
-import { boxShadowDark, boxShadowLight } from './boxShadow';
-import { color, grayScale } from './colors';
-import { fontDark, fontLight } from './font';
-import { icon } from './icon';
-import { modal } from './modal';
-import { tagDark, tagLight } from './tag';
-import { text } from './text';
-
-const common = {
-  color: color,
-  grayScale: grayScale,
-  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: grayScale.gray0,
-    },
-  },
-  spacingMultiplicator: 4,
-  spacing: (multiplicator: number) => `${multiplicator * 4}px`,
-  betweenSiblingsGap: `2px`,
-  table: {
-    horizontalCellMargin: '8px',
-    checkboxColumnWidth: '32px',
-  },
-  rightDrawerWidth: '500px',
-  clickableElementBackgroundTransition: 'background 0.1s ease',
-  lastLayerZIndex: 2147483647,
-};
-
-export const lightTheme = {
-  ...common,
-  ...{
-    accent: accentLight,
-    background: backgroundLight,
-    border: borderLight,
-    tag: tagLight,
-    boxShadow: boxShadowLight,
-    font: fontLight,
-    name: 'light',
-  },
-};
-export type ThemeType = typeof lightTheme;
-
-export const darkTheme: ThemeType = {
-  ...common,
-  ...{
-    accent: accentDark,
-    background: backgroundDark,
-    border: borderDark,
-    tag: tagDark,
-    boxShadow: boxShadowDark,
-    font: fontDark,
-    name: 'dark',
-  },
-};
-
-export const MOBILE_VIEWPORT = 768;

packages/twenty-chrome-extension/src/utils/requestDb.ts

@@ -20,6 +20,8 @@ const requestDb = async (query: string) => {
   );
 
   if (!response.ok) {
+    // TODO: Handle error gracefully and remove the console statement.
+    /* eslint-disable no-console */
     console.error(response);
   }
 

packages/twenty-chrome-extension/tsconfig.app.json

@@ -0,0 +1,14 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../dist/out-tsc"
+  },
+  "exclude": [
+    "**/*.spec.ts",
+    "**/*.test.ts",
+    "**/*.spec.tsx",
+    "**/*.test.tsx",
+    "jest.config.ts",
+  ],
+  "include": ["**/*.js", "**/*.jsx", "**/*.ts", "**/*.tsx"]
+}

packages/twenty-chrome-extension/tsconfig.json

@@ -5,9 +5,16 @@
     "lib": ["ES2020", "DOM", "DOM.Iterable"],
     "module": "ESNext",
     "skipLibCheck": true,
+    "esModuleInterop": true,
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["src/options/modules/*"],
+      "~/*": ["src/*"]
+    },
 
     /* Bundler mode */
     "moduleResolution": "bundler",
+    "allowSyntheticDefaultImports": true,
     "allowImportingTsExtensions": true,
     "resolveJsonModule": true,
     "isolatedModules": true,
@@ -18,8 +25,17 @@
     "strict": true,
     "noUnusedLocals": true,
     "noUnusedParameters": true,
-    "noFallthroughCasesInSwitch": true
+    "noFallthroughCasesInSwitch": true,
+    "forceConsistentCasingInFileNames": true
   },
-  "include": ["src/**/*"],
+  "files": [],
-  "references": [{ "path": "./tsconfig.node.json" }]
+  "include": [],
+  "references": [
+    {
+      "path": "./tsconfig.app.json"
+    },
+    {
+      "path": "./tsconfig.spec.json"
+    }
+  ]
 }

packages/twenty-chrome-extension/tsconfig.node.json

@@ -1,10 +0,0 @@
-{
-  "compilerOptions": {
-    "composite": true,
-    "skipLibCheck": true,
-    "module": "ESNext",
-    "moduleResolution": "bundler",
-    "allowSyntheticDefaultImports": true
-  },
-  "include": ["vite.config.ts", "package.json", "src/*"]
-}

packages/twenty-chrome-extension/tsconfig.spec.json

@@ -0,0 +1,17 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../dist/out-tsc",
+    "types": ["jest", "node"]
+  },
+  "include": [
+    "vite.config.ts",
+    "jest.config.ts",
+    "**/*.test.ts",
+    "**/*.test.tsx",
+    "**/*.spec.ts",
+    "**/*.d.ts",
+    ".storybook/**/*",
+    "**/*.stories.tsx"
+  ]
+}

packages/twenty-chrome-extension/vite.config.ts

@@ -1,6 +1,7 @@
-import { defineConfig, Plugin } from 'vite';
 import { crx } from '@crxjs/vite-plugin';
 import react from '@vitejs/plugin-react';
+import { defineConfig, Plugin } from 'vite';
+import tsconfigPaths from 'vite-tsconfig-paths';
 
 import manifest from './src/manifest';
 
@@ -9,7 +10,7 @@ const viteManifestHack: Plugin & {
 } = {
   // Workaround from https://github.com/crxjs/chrome-extension-tools/issues/846#issuecomment-1861880919.
   name: 'manifestHack',
-  renderCrxManifest(_manifest, bundle) {
+  renderCrxManifest: (_manifest, bundle: any) => {
     bundle['manifest.json'] = bundle['.vite/manifest.json'];
     bundle['manifest.json'].fileName = 'manifest.json';
     delete bundle['.vite/manifest.json'];
@@ -33,6 +34,6 @@ export default defineConfig(() => {
       hmr: { port: 3002 },
     },
 
-    plugins: [viteManifestHack, crx({ manifest }), react()],
+    plugins: [viteManifestHack, crx({ manifest }), react(), tsconfigPaths()],
   };
 });