Scaffold twenty-new-ui (#21236)

Scaffolds `twenty-new-ui`, the next-gen replacement for `twenty-ui`, on
**SCSS** Modules + **Base UI** (no Linaria).

- **Tooling**: Vite lib build, subpaths mirror twenty-ui, typed SCSS
Modules, Storybook + axe a11y, size-limit, Nx targets.
- **Theme**: single token source → nx generateTheme emits the CSS vars +
accessor; parity test asserts token-for-token match with twenty-ui.

Migrated a first `Toggle` component with its stories to allow
@charlesBochet to wire the new pixel-diff system.

---------

Co-authored-by: Claude Opus 4.8 <noreply@anthropic.com>

package.json

@@ -52,6 +52,7 @@
       "packages/twenty-server",
       "packages/twenty-emails",
       "packages/twenty-ui",
+      "packages/twenty-new-ui",
       "packages/twenty-utils",
       "packages/twenty-zapier",
       "packages/twenty-website",

packages/twenty-new-ui/.oxlintrc.json

@@ -0,0 +1,77 @@
+{
+  "$schema": "./node_modules/oxlint/configuration_schema.json",
+  "plugins": ["react", "typescript", "import", "unicorn"],
+  "jsPlugins": ["../twenty-oxlint-rules/dist/oxlint-plugin.mjs"],
+  "categories": {
+    "correctness": "off"
+  },
+  "ignorePatterns": ["node_modules", "generated", "**/*.module.scss.d.ts"],
+  "rules": {
+    "func-style": ["error", "declaration", { "allowArrowFunctions": true }],
+    "no-console": [
+      "warn",
+      { "allow": ["group", "groupCollapsed", "groupEnd"] }
+    ],
+    "no-control-regex": "off",
+    "no-debugger": "error",
+    "no-duplicate-imports": "error",
+    "no-undef": "off",
+    "no-unused-vars": "off",
+    "no-redeclare": "off",
+
+    "import/no-duplicates": "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" }],
+
+    "react-hooks/rules-of-hooks": "error",
+    "react-hooks/exhaustive-deps": "warn",
+
+    "typescript/no-redeclare": "error",
+    "typescript/ban-ts-comment": "error",
+    "typescript/consistent-type-imports": [
+      "error",
+      {
+        "prefer": "type-imports",
+        "fixStyle": "inline-type-imports"
+      }
+    ],
+    "typescript/explicit-function-return-type": "off",
+    "typescript/explicit-module-boundary-types": "off",
+    "typescript/no-empty-object-type": [
+      "error",
+      {
+        "allowInterfaces": "with-single-extends"
+      }
+    ],
+    "typescript/no-empty-function": "off",
+    "typescript/no-explicit-any": "off",
+    "typescript/no-unused-vars": [
+      "warn",
+      {
+        "vars": "all",
+        "varsIgnorePattern": "^_",
+        "args": "after-used",
+        "argsIgnorePattern": "^_"
+      }
+    ],
+
+    "twenty/enforce-module-boundaries": [
+      "error",
+      {
+        "depConstraints": [
+          {
+            "sourceTag": "scope:shared",
+            "onlyDependOnLibsWithTags": ["scope:shared"]
+          }
+        ]
+      }
+    ]
+  }
+}

packages/twenty-new-ui/.prettierignore

@@ -0,0 +1,6 @@
+dist
+storybook-static
+coverage
+
+# Generated by vite-plugin-sass-dts (committed; regenerated in dev mode).
+*.module.scss.d.ts

packages/twenty-new-ui/.size-limit.json

@@ -0,0 +1,78 @@
+[
+  {
+    "name": ". (root barrel)",
+    "path": "dist/index.mjs",
+    "limit": "60 kB",
+    "import": "*"
+  },
+  {
+    "name": "accessibility",
+    "path": "dist/accessibility.mjs",
+    "limit": "10 kB"
+  },
+  {
+    "name": "assets",
+    "path": "dist/assets.mjs",
+    "limit": "10 kB"
+  },
+  {
+    "name": "testing",
+    "path": "dist/testing.mjs",
+    "limit": "10 kB"
+  },
+  {
+    "name": "components",
+    "path": "dist/components.mjs",
+    "limit": "40 kB"
+  },
+  {
+    "name": "display",
+    "path": "dist/display.mjs",
+    "limit": "30 kB"
+  },
+  {
+    "name": "feedback",
+    "path": "dist/feedback.mjs",
+    "limit": "20 kB"
+  },
+  {
+    "name": "input",
+    "path": "dist/input.mjs",
+    "limit": "50 kB"
+  },
+  {
+    "name": "layout",
+    "path": "dist/layout.mjs",
+    "limit": "20 kB"
+  },
+  {
+    "name": "navigation",
+    "path": "dist/navigation.mjs",
+    "limit": "20 kB"
+  },
+  {
+    "name": "json-visualizer",
+    "path": "dist/json-visualizer.mjs",
+    "limit": "30 kB"
+  },
+  {
+    "name": "theme",
+    "path": "dist/theme.mjs",
+    "limit": "55 kB"
+  },
+  {
+    "name": "theme-constants",
+    "path": "dist/theme-constants.mjs",
+    "limit": "20 kB"
+  },
+  {
+    "name": "utilities",
+    "path": "dist/utilities.mjs",
+    "limit": "10 kB"
+  },
+  {
+    "name": "style.css",
+    "path": "dist/style.css",
+    "limit": "40 kB"
+  }
+]

packages/twenty-new-ui/.storybook/main.ts

@@ -0,0 +1,58 @@
+import type { StorybookConfig } from '@storybook/react-vite';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+import checker from 'vite-plugin-checker';
+
+const dirname =
+  typeof __dirname !== 'undefined'
+    ? __dirname
+    : path.dirname(fileURLToPath(import.meta.url));
+
+const isVitest = Boolean(process.env.VITEST);
+
+const config: StorybookConfig = {
+  stories: ['../src/**/*.@(mdx|stories.@(js|jsx|ts|tsx))'],
+
+  addons: [
+    '@storybook-community/storybook-addon-cookie',
+    '@storybook/addon-links',
+    '@storybook/addon-coverage',
+    '@storybook/addon-a11y',
+    'storybook-addon-pseudo-states',
+    '@storybook/addon-vitest',
+  ],
+
+  framework: '@storybook/react-vite',
+
+  viteFinal: async (viteConfig) => {
+    const plugins = [...(viteConfig.plugins ?? [])];
+
+    if (!isVitest) {
+      plugins.push(
+        checker({
+          typescript: {
+            tsconfigPath: path.resolve(dirname, '../tsconfig.json'),
+          },
+        }),
+      );
+    }
+
+    return {
+      ...viteConfig,
+      plugins,
+      resolve: {
+        ...viteConfig.resolve,
+        alias: {
+          ...(viteConfig.resolve?.alias ?? {}),
+          '@tabler/icons-react': '@tabler/icons-react/dist/esm/icons/index.mjs',
+        },
+      },
+    };
+  },
+};
+
+export default config;
+
+// To customize your Vite configuration you can use the viteFinal field.
+// Check https://storybook.js.org/docs/react/builders/vite#configuration
+// and https://nx.dev/recipes/storybook/custom-builder-configs

packages/twenty-new-ui/.storybook/preview-head.html

@@ -0,0 +1,34 @@
+<link
+  href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap"
+  rel="stylesheet"
+/>
+
+<script src="https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/4.3.7/iframeResizer.contentWindow.min.js"></script>
+
+<style type="text/css">
+  body {
+    margin: 0;
+    font-family: 'Inter', sans-serif;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+  html {
+    font-size: 13px;
+  }
+  .sbdocs-wrapper {
+    padding: 0 !important;
+  }
+  *::-webkit-scrollbar {
+    height: 4px;
+    width: 4px;
+  }
+
+  *::-webkit-scrollbar-corner {
+    background-color: transparent;
+  }
+
+  *::-webkit-scrollbar-thumb {
+    background-color: transparent;
+    border-radius: 2px;
+  }
+</style>

packages/twenty-new-ui/.storybook/preview.tsx

@@ -0,0 +1,24 @@
+import { type Preview } from '@storybook/react-vite';
+import '@new-ui/theme-constants/theme-light.css';
+import '@new-ui/theme-constants/theme-dark.css';
+import { ThemeProvider } from '@new-ui/theme-constants';
+
+const preview: Preview = {
+  tags: ['autodocs'],
+  parameters: {
+    a11y: {
+      test: 'error',
+    },
+  },
+  decorators: [
+    (Story) => {
+      return (
+        <ThemeProvider colorScheme="light">
+          <Story />
+        </ThemeProvider>
+      );
+    },
+  ],
+};
+
+export default preview;

packages/twenty-new-ui/.storybook/vitest.setup.ts

@@ -0,0 +1,5 @@
+import { setProjectAnnotations } from '@storybook/react-vite';
+import * as projectAnnotations from './preview';
+
+// Apply Storybook's preview configuration to Vitest runs.
+setProjectAnnotations([projectAnnotations]);

packages/twenty-new-ui/README.md

@@ -1,6 +1,10 @@
 # twenty-new-ui
 
-> **Status:** Planning. This is a design document; no implementation has started.
+> **Status:** Phase 0 — Foundations in progress. The package is scaffolded and builds
+> on SCSS Modules + Base UI; the theme layer is ported from `twenty-ui` with a parity
+> test, and the size/Storybook/a11y harnesses are wired up. Remaining Phase 0 work: the
+> CI diff-table workflow, the `twenty-ui` component inventory, and the `modules/ui` triage.
+> The sections below remain the design document for the full effort.
 
 `twenty-new-ui` is the next generation of Twenty's UI library, replacing [`twenty-ui`](../twenty-ui).
 It is built on a headless component library and a zero-runtime, CSS-variable styling layer.
@@ -30,8 +34,9 @@ components are now **in scope** — they migrate into `twenty-new-ui` (see [Appl
 
 ## Decision 1 — Headless library: Base UI
 
-Adopt **Base UI** (`@base-ui-components/react`, MIT) as the behavioral foundation; build Twenty's
+Adopt **Base UI** ([`mui/base-ui`](https://github.com/mui/base-ui), published to npm as
-visual design on top of it.
+[`@base-ui/react`](https://base-ui.com), MIT) as the behavioral foundation; build Twenty's visual
+design on top of it.
 
 | | Base UI | shadcn/ui | Radix |
 | --- | --- | --- | --- |
@@ -84,7 +89,7 @@ packages/twenty-new-ui/
 ├── vitest.config.ts        # storybook component tests
 ├── .storybook/
 ├── .size-limit.json        # per-entry bundle budgets
-├── scripts/                # generateBarrels.ts, generateTheme.ts
+├── scripts/                # generateBarrels.ts
 └── src/
     ├── styles/             # global: reset, theme vars, mixins, breakpoints
     ├── theme/ theme-constants/
@@ -106,8 +111,8 @@ as-is.
 
 - Keep the public API identical: `ThemeProvider`, `ThemeContext`, `useTheme`, the `themeCssVariables` shape, `ThemeType`, color helpers, and the `theme-light.css` / `theme-dark.css` exports.
 - Reuse `twenty-ui`'s token values verbatim to guarantee identical design.
-- Tokens are authored in `src/theme/` and generated into CSS variables + a typed accessor.
+- Tokens live in `src/theme/` (`THEME_LIGHT` / `THEME_DARK`); the `--t-*` CSS variables and the `themeCssVariables` accessor are static files mirrored token-for-token from `twenty-ui` (matching `twenty-ui`'s own static-CSS approach).
-- A generated-output diff test asserts the new theme CSS produces the same `--t-*` values as `twenty-ui`.
+- A theme parity test asserts the theme CSS and `themeCssVariables` stay identical to `twenty-ui`'s `--t-*` values.
 
 ## Component migration map
 
@@ -219,7 +224,7 @@ CI surfaces a per-PR diff table (`twenty-ui` vs `twenty-new-ui`) for size, a11y,
 
 - Vite library mode, dual ESM/CJS, `vite-plugin-dts`, `vite-plugin-svgr`; SCSS via Vite's built-in `sass`; no Babel.
 - `sideEffects: ["**/*.css", "**/*.scss"]`; emit per-entry CSS plus `style.css` / `theme-light.css` / `theme-dark.css`.
-- Public package (remove `private`); scoped name (e.g. `@twenty/ui`).
+- Public package (remove `private`); ships as `twenty-new-ui` until cut-over, then claims the `twenty-ui` name once the old package is removed.
 - **Changesets** for semver + changelog; GitHub Actions release with `npm publish --provenance`.
 - Declare `react` / `react-dom` as peer dependencies; validate the `exports`/types map with `publint` + `@arethetypeswrong/cli`.
 - Publish the Storybook as living documentation.
@@ -259,59 +264,10 @@ a passing visual-parity diff, and a within-budget size entry.
 
 ## Open questions
 
-1. Published package name/scope (proposed `@twenty/ui`).
+1. Published package name: `twenty-new-ui` now, renamed to `twenty-ui` at cut-over (Phase 6).
 2. Styling: confirm SCSS Modules vs vanilla-extract vs plain CSS Modules.
 3. Variants helper: `clsx` + `data-*` vs `cva`.
 4. Visual regression tooling: Chromatic vs self-hosted image snapshots.
 5. How aggressively to drop `framer-motion` in favor of CSS/Base UI transitions.
 6. Scope of `assets` / `testing` / `json-visualizer`: port verbatim or modernize.
 7. Where to draw the generic-vs-app-specific line for `modules/ui`, and whether hybrid components live as a headless core in `twenty-new-ui` with a thin app wrapper in `twenty-front`.
-
-## Appendix — example component pattern
-
-`src/input/components/Toggle.tsx`
-
-```tsx
-import { Switch } from '@base-ui-components/react/switch';
-import { clsx } from 'clsx';
-import styles from './Toggle.module.scss';
-
-type ToggleProps = {
-  value?: boolean;
-  onChange?: (value: boolean) => void;
-  disabled?: boolean;
-  size?: 'small' | 'medium';
-};
-
-export const Toggle = ({ value, onChange, disabled, size = 'medium' }: ToggleProps) => (
-  <Switch.Root
-    checked={value}
-    onCheckedChange={onChange}
-    disabled={disabled}
-    className={clsx(styles.root, styles[size])}
-  >
-    <Switch.Thumb className={styles.thumb} />
-  </Switch.Root>
-);
-```
-
-`src/input/components/Toggle.module.scss`
-
-```scss
-.root {
-  background: var(--t-background-quaternary);
-  border-radius: var(--t-border-radius-pill);
-  transition: background var(--t-animation-duration-fast) ease;
-
-  &[data-checked] { background: var(--t-color-blue); }
-  &[data-disabled] { opacity: 0.32; cursor: not-allowed; }
-}
-
-.thumb {
-  background: var(--t-background-primary);
-  border-radius: 50%;
-  transition: translate var(--t-animation-duration-fast) ease;
-
-  .root[data-checked] & { translate: 100% 0; }
-}
-```

packages/twenty-new-ui/__mocks__/imageMockUi.js

@@ -0,0 +1 @@
+export default 'test-file-stub';

packages/twenty-new-ui/__mocks__/styleMock.js

@@ -0,0 +1,7 @@
+// Proxy so `styles.anyClassName` resolves to its key when SCSS is imported in Jest.
+module.exports = new Proxy(
+  {},
+  {
+    get: (_target, key) => (key === '__esModule' ? false : String(key)),
+  },
+);

packages/twenty-new-ui/jest.config.mjs

@@ -0,0 +1,41 @@
+import { readFileSync } from 'fs';
+import { dirname, resolve } from 'path';
+import { pathsToModuleNameMapper } from 'ts-jest';
+import { fileURLToPath } from 'url';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
+const tsConfigPath = resolve(__dirname, './tsconfig.json');
+const tsConfig = JSON.parse(readFileSync(tsConfigPath, 'utf8'));
+
+const jestConfig = {
+  displayName: 'twenty-new-ui',
+  preset: '../../jest.preset.js',
+  setupFilesAfterEnv: ['./setupTests.ts'],
+  testEnvironment: 'jsdom',
+  transformIgnorePatterns: ['../../node_modules/'],
+  transform: {
+    '^.+\\.[tj]sx?$': [
+      '@swc/jest',
+      {
+        jsc: {
+          parser: { syntax: 'typescript', tsx: true },
+          transform: { react: { runtime: 'automatic' } },
+        },
+      },
+    ],
+  },
+  moduleNameMapper: {
+    '\\.(jpg|jpeg|png|gif|webp|svg|svg)$': '<rootDir>/__mocks__/imageMockUi.js',
+    '\\.(scss|css)$': '<rootDir>/__mocks__/styleMock.js',
+    ...pathsToModuleNameMapper(tsConfig.compilerOptions.paths, {
+      prefix: '<rootDir>/',
+    }),
+  },
+  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx'],
+  extensionsToTreatAsEsm: ['.ts', '.tsx'],
+  coverageDirectory: './coverage',
+};
+
+export default jestConfig;

packages/twenty-new-ui/package.json

@@ -0,0 +1,208 @@
+{
+  "name": "twenty-new-ui",
+  "//name": "Named `twenty-new-ui` because the target name `twenty-ui` is still taken by the existing packages/twenty-ui workspace (Yarn forbids duplicate workspace names). Renamed to `twenty-ui` at the Phase 6 cut-over once the old package is removed.",
+  "version": "0.0.0",
+  "main": "dist/index.cjs",
+  "module": "dist/index.mjs",
+  "style": "./dist/style.css",
+  "type": "module",
+  "sideEffects": [
+    "**/*.css",
+    "**/*.scss"
+  ],
+  "devDependencies": {
+    "@argos-ci/storybook": "^6.0.6",
+    "@prettier/sync": "^0.5.2",
+    "@size-limit/preset-small-lib": "^11.1.6",
+    "@storybook-community/storybook-addon-cookie": "^5.0.0",
+    "@storybook/addon-a11y": "^10.3.3",
+    "@storybook/addon-coverage": "^3.0.0",
+    "@storybook/addon-links": "^10.3.3",
+    "@storybook/addon-vitest": "^10.2.13",
+    "@storybook/react-vite": "^10.3.3",
+    "@swc/core": "^1.15.11",
+    "@swc/jest": "^0.2.39",
+    "@testing-library/dom": "^10.4.0",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.3.0",
+    "@types/jest": "^30.0.0",
+    "@types/react": "^18.2.39",
+    "@types/react-dom": "^18.2.15",
+    "@vitejs/plugin-react-swc": "4.2.3",
+    "@vitest/browser-playwright": "4.0.18",
+    "jest": "29.7.0",
+    "jest-environment-jsdom": "30.0.0-beta.3",
+    "prettier": "^3.1.1",
+    "sass": "^1.83.0",
+    "sass-embedded": "^1.83.0",
+    "size-limit": "^11.1.6",
+    "slash": "^5.1.0",
+    "storybook-addon-pseudo-states": "^10.3.3",
+    "ts-jest": "^29.1.1",
+    "tsx": "^4.19.3",
+    "vite-plugin-checker": "^0.10.2",
+    "vite-plugin-dts": "3.8.1",
+    "vite-plugin-sass-dts": "^1.3.31",
+    "vite-plugin-svgr": "^4.3.0",
+    "vite-tsconfig-paths": "^4.2.1",
+    "vitest": "4.0.18"
+  },
+  "dependencies": {
+    "@base-ui/react": "^1.5.0",
+    "@monaco-editor/react": "^4.7.0",
+    "@radix-ui/colors": "^3.0.0",
+    "@tabler/icons-react": "^3.31.0",
+    "clsx": "^2.1.1",
+    "date-fns": "^2.30.0",
+    "framer-motion": "^11.18.0",
+    "glob": "^11.1.0",
+    "hex-rgb": "^5.0.0",
+    "jotai": "^2.17.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-responsive": "^9.0.2",
+    "react-router-dom": "^6.4.4",
+    "twenty-shared": "workspace:*",
+    "zod": "^4.1.11"
+  },
+  "peerDependencies": {
+    "monaco-editor": ">= 0.25.0 < 1"
+  },
+  "scripts": {
+    "build": "npx vite build"
+  },
+  "files": [
+    "dist",
+    "accessibility",
+    "assets",
+    "components",
+    "display",
+    "feedback",
+    "input",
+    "json-visualizer",
+    "layout",
+    "navigation",
+    "testing",
+    "theme",
+    "theme-constants",
+    "utilities"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.cjs"
+    },
+    "./style.css": "./dist/style.css",
+    "./theme-light.css": "./dist/theme-light.css",
+    "./theme-dark.css": "./dist/theme-dark.css",
+    "./accessibility": {
+      "types": "./dist/accessibility/index.d.ts",
+      "import": "./dist/accessibility.mjs",
+      "require": "./dist/accessibility.cjs"
+    },
+    "./assets": {
+      "types": "./dist/assets/index.d.ts",
+      "import": "./dist/assets.mjs",
+      "require": "./dist/assets.cjs"
+    },
+    "./components": {
+      "types": "./dist/components/index.d.ts",
+      "import": "./dist/components.mjs",
+      "require": "./dist/components.cjs"
+    },
+    "./display": {
+      "types": "./dist/display/index.d.ts",
+      "import": "./dist/display.mjs",
+      "require": "./dist/display.cjs"
+    },
+    "./feedback": {
+      "types": "./dist/feedback/index.d.ts",
+      "import": "./dist/feedback.mjs",
+      "require": "./dist/feedback.cjs"
+    },
+    "./input": {
+      "types": "./dist/input/index.d.ts",
+      "import": "./dist/input.mjs",
+      "require": "./dist/input.cjs"
+    },
+    "./json-visualizer": {
+      "types": "./dist/json-visualizer/index.d.ts",
+      "import": "./dist/json-visualizer.mjs",
+      "require": "./dist/json-visualizer.cjs"
+    },
+    "./layout": {
+      "types": "./dist/layout/index.d.ts",
+      "import": "./dist/layout.mjs",
+      "require": "./dist/layout.cjs"
+    },
+    "./navigation": {
+      "types": "./dist/navigation/index.d.ts",
+      "import": "./dist/navigation.mjs",
+      "require": "./dist/navigation.cjs"
+    },
+    "./testing": {
+      "types": "./dist/testing/index.d.ts",
+      "import": "./dist/testing.mjs",
+      "require": "./dist/testing.cjs"
+    },
+    "./theme": {
+      "types": "./dist/theme/index.d.ts",
+      "import": "./dist/theme.mjs",
+      "require": "./dist/theme.cjs"
+    },
+    "./theme-constants": {
+      "types": "./dist/theme-constants/index.d.ts",
+      "import": "./dist/theme-constants.mjs",
+      "require": "./dist/theme-constants.cjs"
+    },
+    "./utilities": {
+      "types": "./dist/utilities/index.d.ts",
+      "import": "./dist/utilities.mjs",
+      "require": "./dist/utilities.cjs"
+    }
+  },
+  "typesVersions": {
+    "*": {
+      "accessibility": [
+        "dist/accessibility/index.d.ts"
+      ],
+      "assets": [
+        "dist/assets/index.d.ts"
+      ],
+      "components": [
+        "dist/components/index.d.ts"
+      ],
+      "display": [
+        "dist/display/index.d.ts"
+      ],
+      "feedback": [
+        "dist/feedback/index.d.ts"
+      ],
+      "input": [
+        "dist/input/index.d.ts"
+      ],
+      "json-visualizer": [
+        "dist/json-visualizer/index.d.ts"
+      ],
+      "layout": [
+        "dist/layout/index.d.ts"
+      ],
+      "navigation": [
+        "dist/navigation/index.d.ts"
+      ],
+      "testing": [
+        "dist/testing/index.d.ts"
+      ],
+      "theme": [
+        "dist/theme/index.d.ts"
+      ],
+      "theme-constants": [
+        "dist/theme-constants/index.d.ts"
+      ],
+      "utilities": [
+        "dist/utilities/index.d.ts"
+      ]
+    }
+  }
+}

packages/twenty-new-ui/project.json

@@ -0,0 +1,103 @@
+{
+  "name": "twenty-new-ui",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "packages/twenty-new-ui/src",
+  "projectType": "library",
+  "tags": ["scope:shared"],
+  "targets": {
+    "build": {
+      "dependsOn": ["^build"],
+      "outputs": [
+        "{projectRoot}/dist",
+        "{projectRoot}/accessibility/package.json",
+        "{projectRoot}/accessibility/dist",
+        "{projectRoot}/assets/package.json",
+        "{projectRoot}/assets/dist",
+        "{projectRoot}/components/package.json",
+        "{projectRoot}/components/dist",
+        "{projectRoot}/display/package.json",
+        "{projectRoot}/display/dist",
+        "{projectRoot}/feedback/package.json",
+        "{projectRoot}/feedback/dist",
+        "{projectRoot}/input/package.json",
+        "{projectRoot}/input/dist",
+        "{projectRoot}/json-visualizer/package.json",
+        "{projectRoot}/json-visualizer/dist",
+        "{projectRoot}/layout/package.json",
+        "{projectRoot}/layout/dist",
+        "{projectRoot}/navigation/package.json",
+        "{projectRoot}/navigation/dist",
+        "{projectRoot}/testing/package.json",
+        "{projectRoot}/testing/dist",
+        "{projectRoot}/theme/package.json",
+        "{projectRoot}/theme/dist",
+        "{projectRoot}/theme-constants/package.json",
+        "{projectRoot}/theme-constants/dist",
+        "{projectRoot}/utilities/package.json",
+        "{projectRoot}/utilities/dist"
+      ]
+    },
+    "generateBarrels": {
+      "executor": "nx:run-commands",
+      "cache": true,
+      "inputs": ["production", "{projectRoot}/scripts/generateBarrels.ts"],
+      "outputs": [
+        "{projectRoot}/src/**/*/index.ts",
+        "{projectRoot}/package.json"
+      ],
+      "options": { "command": "tsx {projectRoot}/scripts/generateBarrels.ts" }
+    },
+    "build:individual": {
+      "executor": "nx:run-commands",
+      "cache": true,
+      "dependsOn": ["build"],
+      "inputs": ["production", "^production"],
+      "outputs": ["{projectRoot}/dist/individual"],
+      "options": {
+        "cwd": "{projectRoot}",
+        "command": "npx vite build -c vite.config.individual.ts"
+      }
+    },
+    "size": {
+      "executor": "nx:run-commands",
+      "cache": true,
+      "dependsOn": ["build"],
+      "inputs": ["{projectRoot}/dist", "{projectRoot}/.size-limit.json"],
+      "options": {
+        "cwd": "{projectRoot}",
+        "command": "npx size-limit"
+      },
+      "configurations": {
+        "why": { "command": "npx size-limit --why" }
+      }
+    },
+    "clean": {
+      "executor": "nx:run-commands",
+      "options": { "command": "rimraf {projectRoot}/dist" }
+    },
+    "lint": {},
+    "fmt": { "options": { "files": "src" }, "configurations": { "fix": {} } },
+    "test": {},
+    "typecheck": {},
+    "storybook:build": { "configurations": { "test": {} } },
+    "storybook:serve:dev": { "options": { "port": 6008 } },
+    "storybook:serve:static": {
+      "options": {
+        "buildTarget": "twenty-new-ui:storybook:build",
+        "port": 6008
+      },
+      "configurations": { "test": {} }
+    },
+    "storybook:test": {},
+    "storybook:test:no-coverage": {},
+    "storybook:visual-diff": {
+      "executor": "nx:run-commands",
+      "dependsOn": ["storybook:build"],
+      "options": {
+        "cwd": "{projectRoot}",
+        "command": "bash scripts/visual-diff.sh"
+      }
+    },
+    "storybook:coverage": {}
+  }
+}

packages/twenty-new-ui/scripts/generateBarrels.ts

@@ -0,0 +1,505 @@
+import prettier from '@prettier/sync';
+import * as fs from 'fs';
+import { globSync } from 'glob';
+import path from 'path';
+import { type Options } from 'prettier';
+import slash from 'slash';
+import ts from 'typescript';
+
+// TODO prastoin refactor this file in several one into its dedicated package and make it a TypeScript CLI
+
+const INDEX_FILENAME = 'index';
+const PACKAGE_JSON_FILENAME = 'package.json';
+const NX_PROJECT_CONFIGURATION_FILENAME = 'project.json';
+const PACKAGE_PATH = path.resolve('packages/twenty-ui');
+const SRC_PATH = path.resolve(`${PACKAGE_PATH}/src`);
+const PACKAGE_JSON_PATH = path.join(PACKAGE_PATH, PACKAGE_JSON_FILENAME);
+const NX_PROJECT_CONFIGURATION_PATH = path.join(
+  PACKAGE_PATH,
+  NX_PROJECT_CONFIGURATION_FILENAME,
+);
+
+const prettierConfigFile = prettier.resolveConfigFile();
+if (prettierConfigFile == null) {
+  throw new Error('Prettier config file not found');
+}
+const prettierConfiguration = prettier.resolveConfig(prettierConfigFile);
+const prettierFormat = (str: string, parser: Options['parser']) =>
+  prettier.format(str, {
+    ...prettierConfiguration,
+    parser,
+  });
+type createTypeScriptFileArgs = {
+  path: string;
+  content: string;
+  filename: string;
+};
+const createTypeScriptFile = ({
+  content,
+  path: filePath,
+  filename,
+}: createTypeScriptFileArgs) => {
+  const header = `
+/*
+ * _____                    _
+ *|_   _|_      _____ _ __ | |_ _   _
+ *  | | \\ \\ /\\ / / _ \\ '_ \\| __| | | | Auto-generated file
+ *  | |  \\ V  V /  __/ | | | |_| |_| | Any edits to this will be overridden
+ *  |_|   \\_/\\_/ \\___|_| |_|\\__|\\__, |
+ *                              |___/
+ */
+`;
+  const formattedContent = prettierFormat(
+    `${header}\n${content}\n`,
+    'typescript',
+  );
+  fs.writeFileSync(
+    path.join(filePath, `${filename}.ts`),
+    formattedContent,
+    'utf-8',
+  );
+};
+
+const getLastPathFolder = (pathStr: string) => path.basename(pathStr);
+
+const getSubDirectoryPaths = (directoryPath: string): string[] => {
+  const pattern = slash(path.join(directoryPath, '*/'));
+  return globSync(pattern, {
+    ignore: [...EXCLUDED_DIRECTORIES],
+    cwd: SRC_PATH,
+    nodir: false,
+    maxDepth: 1,
+  }).sort((a, b) => a.localeCompare(b));
+};
+
+const partitionFileExportsByType = (declarations: DeclarationOccurrence[]) => {
+  return declarations.reduce<{
+    typeAndInterfaceDeclarations: DeclarationOccurrence[];
+    otherDeclarations: DeclarationOccurrence[];
+  }>(
+    (acc, { kind, name }) => {
+      if (kind === 'type' || kind === 'interface') {
+        return {
+          ...acc,
+          typeAndInterfaceDeclarations: [
+            ...acc.typeAndInterfaceDeclarations,
+            { kind, name },
+          ],
+        };
+      }
+
+      return {
+        ...acc,
+        otherDeclarations: [...acc.otherDeclarations, { kind, name }],
+      };
+    },
+    {
+      typeAndInterfaceDeclarations: [],
+      otherDeclarations: [],
+    },
+  );
+};
+
+const generateModuleIndexFiles = (exportByBarrel: ExportByBarrel[]) => {
+  return exportByBarrel.map<createTypeScriptFileArgs>(
+    ({ barrel: { moduleDirectory }, allFileExports }) => {
+      const content = allFileExports
+        .sort((a, b) => a.file.localeCompare(b.file))
+        .map(({ exports, file }) => {
+          const { otherDeclarations, typeAndInterfaceDeclarations } =
+            partitionFileExportsByType(exports);
+
+          const fileWithoutExtension = path.parse(file).name;
+          const pathToImport = slash(
+            path.relative(
+              moduleDirectory,
+              path.join(path.dirname(file), fileWithoutExtension),
+            ),
+          );
+          const mapDeclarationNameAndJoin = (
+            declarations: DeclarationOccurrence[],
+          ) => declarations.map(({ name }) => name).join(', ');
+
+          const typeExport =
+            typeAndInterfaceDeclarations.length > 0
+              ? `export type { ${mapDeclarationNameAndJoin(typeAndInterfaceDeclarations)} } from "./${pathToImport}"`
+              : '';
+          const othersExport =
+            otherDeclarations.length > 0
+              ? `export { ${mapDeclarationNameAndJoin(otherDeclarations)} } from "./${pathToImport}"`
+              : '';
+
+          return [typeExport, othersExport]
+            .filter((el) => el !== '')
+            .join('\n');
+        })
+        .join('\n');
+
+      return {
+        content,
+        path: moduleDirectory,
+        filename: INDEX_FILENAME,
+      };
+    },
+  );
+};
+
+type JsonUpdate = Record<string, any>;
+type WriteInJsonFileArgs = {
+  content: JsonUpdate;
+  file: string;
+};
+const updateJsonFile = ({ content, file }: WriteInJsonFileArgs) => {
+  const updatedJsonFile = JSON.stringify(content);
+  const formattedContent = prettier.format(updatedJsonFile, {
+    ...prettierConfiguration,
+    filepath: file,
+  });
+  fs.writeFileSync(file, formattedContent, 'utf-8');
+};
+
+const writeInPackageJson = (update: JsonUpdate) => {
+  const rawJsonFile = fs.readFileSync(PACKAGE_JSON_PATH, 'utf-8');
+  const initialJsonFile = JSON.parse(rawJsonFile);
+
+  updateJsonFile({
+    file: PACKAGE_JSON_PATH,
+    content: {
+      ...initialJsonFile,
+      ...update,
+    },
+  });
+};
+
+const updateNxProjectConfigurationBuildOutputs = (outputs: JsonUpdate) => {
+  const rawJsonFile = fs.readFileSync(NX_PROJECT_CONFIGURATION_PATH, 'utf-8');
+  const initialJsonFile = JSON.parse(rawJsonFile);
+
+  updateJsonFile({
+    file: NX_PROJECT_CONFIGURATION_PATH,
+    content: {
+      ...initialJsonFile,
+      targets: {
+        ...initialJsonFile.targets,
+        build: {
+          ...initialJsonFile.targets.build,
+          outputs,
+        },
+      },
+    },
+  });
+};
+
+type ExportOccurrence = {
+  types: string;
+  import: string;
+  require: string;
+};
+type ExportsConfig = Record<string, ExportOccurrence | string>;
+
+const generateModulePackageExports = (moduleDirectories: string[]) => {
+  return moduleDirectories.reduce<ExportsConfig>(
+    (acc, moduleDirectory) => {
+      const moduleName = getLastPathFolder(moduleDirectory);
+      if (moduleName === undefined) {
+        throw new Error(
+          `Should never occur, moduleName is undefined ${moduleDirectory}`,
+        );
+      }
+
+      return {
+        ...acc,
+        [`./${moduleName}`]: {
+          types: `./dist/${moduleName}/index.d.ts`,
+          import: `./dist/${moduleName}.mjs`,
+          require: `./dist/${moduleName}.cjs`,
+        },
+      };
+    },
+    {
+      './style.css': './dist/style.css',
+      './theme-light.css': './dist/theme-light.css',
+      './theme-dark.css': './dist/theme-dark.css',
+    },
+  );
+};
+
+const computePackageJsonFilesAndExportsConfig = (
+  moduleDirectories: string[],
+) => {
+  const entrypoints = moduleDirectories.map(getLastPathFolder);
+  const exports = {
+    '.': {
+      types: './dist/index.d.ts',
+      import: './dist/index.mjs',
+      require: './dist/index.cjs',
+    },
+    ...generateModulePackageExports(moduleDirectories),
+  } satisfies ExportsConfig;
+
+  const typesVersionsEntries = entrypoints.reduce<Record<string, string[]>>(
+    (acc, moduleName) => ({
+      ...acc,
+      [`${moduleName}`]: [`dist/${moduleName}/index.d.ts`],
+    }),
+    {},
+  );
+
+  return {
+    exports,
+    typesVersions: { '*': typesVersionsEntries },
+    files: ['dist', ...entrypoints],
+  };
+};
+
+const computeProjectNxBuildOutputsPath = (moduleDirectories: string[]) => {
+  const dynamicOutputsPath = moduleDirectories
+    .map(getLastPathFolder)
+    .flatMap((barrelName) =>
+      ['package.json', 'dist'].map(
+        (subPath) => `{projectRoot}/${barrelName}/${subPath}`,
+      ),
+    );
+
+  return ['{projectRoot}/dist', ...dynamicOutputsPath];
+};
+
+const EXCLUDED_EXTENSIONS = [
+  '**/*.test.ts',
+  '**/*.test.tsx',
+  '**/*.spec.ts',
+  '**/*.spec.tsx',
+  '**/*.stories.ts',
+  '**/*.stories.tsx',
+] as const;
+const EXCLUDED_DIRECTORIES = [
+  '**/__tests__/**',
+  '**/__mocks__/**',
+  '**/__stories__/**',
+  '**/internal/**',
+] as const;
+function getTypeScriptFiles(
+  directoryPath: string,
+  includeIndex: boolean = false,
+): string[] {
+  const pattern = slash(path.join(directoryPath, '**', '*.{ts,tsx}'));
+  const files = globSync(pattern, {
+    cwd: SRC_PATH,
+    nodir: true,
+    ignore: [...EXCLUDED_EXTENSIONS, ...EXCLUDED_DIRECTORIES],
+  });
+
+  return files.filter(
+    (file) =>
+      !file.endsWith('.d.ts') &&
+      (includeIndex ? true : !file.endsWith('index.ts')),
+  );
+}
+
+const getKind = (
+  node: ts.VariableStatement,
+): Extract<ExportKind, 'const' | 'let' | 'var'> => {
+  const isConst = (node.declarationList.flags & ts.NodeFlags.Const) !== 0;
+  if (isConst) {
+    return 'const';
+  }
+
+  const isLet = (node.declarationList.flags & ts.NodeFlags.Let) !== 0;
+  if (isLet) {
+    return 'let';
+  }
+
+  return 'var';
+};
+
+function extractExportsFromSourceFile(sourceFile: ts.SourceFile) {
+  const exports: DeclarationOccurrence[] = [];
+
+  function visit(node: ts.Node) {
+    if (!ts.canHaveModifiers(node)) {
+      return ts.forEachChild(node, visit);
+    }
+    const modifiers = ts.getModifiers(node);
+    const isExport = modifiers?.some(
+      (mod) => mod.kind === ts.SyntaxKind.ExportKeyword,
+    );
+
+    if (!isExport && !ts.isExportDeclaration(node)) {
+      return ts.forEachChild(node, visit);
+    }
+
+    switch (true) {
+      case ts.isTypeAliasDeclaration(node):
+        exports.push({
+          kind: 'type',
+          name: node.name.text,
+        });
+        break;
+
+      case ts.isInterfaceDeclaration(node):
+        exports.push({
+          kind: 'interface',
+          name: node.name.text,
+        });
+        break;
+
+      case ts.isEnumDeclaration(node):
+        exports.push({
+          kind: 'enum',
+          name: node.name.text,
+        });
+        break;
+
+      case ts.isFunctionDeclaration(node) && node.name !== undefined:
+        exports.push({
+          kind: 'function',
+          name: node.name.text,
+        });
+        break;
+
+      case ts.isVariableStatement(node):
+        node.declarationList.declarations.forEach((decl) => {
+          const kind = getKind(node);
+
+          if (ts.isIdentifier(decl.name)) {
+            exports.push({
+              kind,
+              name: decl.name.text,
+            });
+          } else if (ts.isObjectBindingPattern(decl.name)) {
+            decl.name.elements.forEach((element) => {
+              if (
+                !ts.isBindingElement(element) ||
+                !ts.isIdentifier(element.name)
+              ) {
+                return;
+              }
+
+              exports.push({
+                kind,
+                name: element.name.text,
+              });
+            });
+          }
+        });
+        break;
+
+      case ts.isClassDeclaration(node) && node.name !== undefined:
+        exports.push({
+          kind: 'class',
+          name: node.name.text,
+        });
+        break;
+      case ts.isExportDeclaration(node):
+        if (node.exportClause && ts.isNamedExports(node.exportClause)) {
+          node.exportClause.elements.forEach((element) => {
+            const exportName = element.name.text;
+
+            // Check both the declaration and the individual specifier for type-only exports
+            const isTypeExport =
+              node.isTypeOnly || ts.isTypeOnlyExportDeclaration(node);
+            if (isTypeExport) {
+              // should handle kind
+              exports.push({
+                kind: 'type',
+                name: exportName,
+              });
+              return;
+            }
+
+            exports.push({
+              kind: 'const',
+              name: exportName,
+            });
+          });
+        }
+        break;
+    }
+    return ts.forEachChild(node, visit);
+  }
+
+  visit(sourceFile);
+  return exports;
+}
+
+type ExportKind =
+  | 'type'
+  | 'interface'
+  | 'enum'
+  | 'function'
+  | 'const'
+  | 'let'
+  | 'var'
+  | 'class';
+type DeclarationOccurrence = { kind: ExportKind; name: string };
+type FileExports = Array<{
+  file: string;
+  exports: DeclarationOccurrence[];
+}>;
+
+function findAllExports(directoryPath: string): FileExports {
+  const results: FileExports = [];
+
+  const files = getTypeScriptFiles(directoryPath);
+
+  for (const file of files) {
+    const sourceFile = ts.createSourceFile(
+      file,
+      fs.readFileSync(file, 'utf8'),
+      ts.ScriptTarget.Latest,
+      true,
+    );
+
+    const exports = extractExportsFromSourceFile(sourceFile);
+    if (exports.length > 0) {
+      results.push({
+        file,
+        exports,
+      });
+    }
+  }
+
+  return results;
+}
+
+type ExportByBarrel = {
+  barrel: {
+    moduleName: string;
+    moduleDirectory: string;
+  };
+  allFileExports: FileExports;
+};
+const retrieveExportsByBarrel = (barrelDirectories: string[]) => {
+  return barrelDirectories.map<ExportByBarrel>((moduleDirectory) => {
+    const moduleExportsPerFile = findAllExports(moduleDirectory);
+    const moduleName = getLastPathFolder(moduleDirectory);
+    if (!moduleName) {
+      throw new Error(
+        `Should never occur moduleName not found ${moduleDirectory}`,
+      );
+    }
+
+    return {
+      barrel: {
+        moduleName,
+        moduleDirectory,
+      },
+      allFileExports: moduleExportsPerFile,
+    };
+  });
+};
+
+const main = () => {
+  const moduleDirectories = getSubDirectoryPaths(SRC_PATH);
+  const exportsByBarrel = retrieveExportsByBarrel(moduleDirectories);
+  const moduleIndexFiles = generateModuleIndexFiles(exportsByBarrel);
+  const packageJsonConfig =
+    computePackageJsonFilesAndExportsConfig(moduleDirectories);
+  const nxBuildOutputsPath =
+    computeProjectNxBuildOutputsPath(moduleDirectories);
+
+  updateNxProjectConfigurationBuildOutputs(nxBuildOutputsPath);
+  writeInPackageJson(packageJsonConfig);
+  moduleIndexFiles.forEach(createTypeScriptFile);
+};
+main();

packages/twenty-new-ui/scripts/visual-diff.sh

@@ -0,0 +1,49 @@
+#!/usr/bin/env bash
+set -euo pipefail
+
+SCRIPT_DIR="$(cd "$(dirname "${BASH_SOURCE[0]}")/.." && pwd)"
+if [[ -f "$SCRIPT_DIR/.env" ]]; then
+  set -a
+  source "$SCRIPT_DIR/.env"
+  set +a
+fi
+
+ARGOS_API_BASE_URL="${ARGOS_API_BASE_URL:-http://127.0.0.1:4002/v2/}"
+ARGOS_TOKEN="${ARGOS_TOKEN:?ARGOS_TOKEN is required – set it in packages/twenty-new-ui/.env}"
+
+USERNAME=$(whoami)
+GIT_BRANCH="${ARGOS_BRANCH:-$(git rev-parse --abbrev-ref HEAD 2>/dev/null || echo "unknown")}"
+COMMIT="${ARGOS_COMMIT:-$(git rev-parse HEAD 2>/dev/null || echo "unknown")}"
+REFERENCE_COMMIT="${ARGOS_REFERENCE_COMMIT:-$(git merge-base HEAD main 2>/dev/null || echo "")}"
+
+export ARGOS_API_BASE_URL
+export ARGOS_TOKEN
+export ARGOS_BUILD_NAME="${USERNAME}/twenty-new-ui"
+export ARGOS_BRANCH="${USERNAME}/${GIT_BRANCH}"
+export ARGOS_COMMIT="$COMMIT"
+export ARGOS_REFERENCE_COMMIT="${REFERENCE_COMMIT}"
+
+echo "Argos visual diff"
+echo "  API:        $ARGOS_API_BASE_URL"
+echo "  Build name: $ARGOS_BUILD_NAME"
+echo "  Branch:     $ARGOS_BRANCH"
+echo "  Commit:     ${ARGOS_COMMIT:0:12}"
+echo "  Ref commit: ${ARGOS_REFERENCE_COMMIT:0:12}"
+echo ""
+
+npx http-server storybook-static --port 6007 --silent &
+HTTP_PID=$!
+trap "kill $HTTP_PID 2>/dev/null || true" EXIT
+
+SERVER_UP=false
+for i in $(seq 1 30); do
+  if curl -sf http://localhost:6007 > /dev/null 2>&1; then SERVER_UP=true; break; fi
+  sleep 1
+done
+if [[ "$SERVER_UP" != "true" ]]; then
+  echo "Storybook static server did not start on http://localhost:6007 after 30s" >&2
+  exit 1
+fi
+
+export STORYBOOK_URL="http://localhost:6007"
+npx vitest run

packages/twenty-new-ui/setupTests.ts

@@ -0,0 +1,5 @@
+// jest-dom adds custom jest matchers for asserting on DOM nodes.
+// allows you to do things like:
+// expect(element).toHaveTextContent(/react/i)
+// learn more: https://github.com/testing-library/jest-dom
+import '@testing-library/jest-dom';

packages/twenty-new-ui/src/accessibility/index.ts

@@ -0,0 +1,2 @@
+// Auto-generated barrel placeholder — populated as components migrate into this entry point.
+export {};

packages/twenty-new-ui/src/assets/index.ts

@@ -0,0 +1,2 @@
+// Auto-generated barrel placeholder — populated as components migrate into this entry point.
+export {};

packages/twenty-new-ui/src/components/index.ts

@@ -0,0 +1,2 @@
+// Auto-generated barrel placeholder — populated as components migrate into this entry point.
+export {};

packages/twenty-new-ui/src/display/index.ts

@@ -0,0 +1,2 @@
+// Auto-generated barrel placeholder — populated as components migrate into this entry point.
+export {};

packages/twenty-new-ui/src/feedback/index.ts

@@ -0,0 +1,2 @@
+// Auto-generated barrel placeholder — populated as components migrate into this entry point.
+export {};

packages/twenty-new-ui/src/global.d.ts

@@ -0,0 +1,7 @@
+declare global {
+  interface Window {
+    _env_?: Record<string, string>;
+  }
+}
+
+export {};

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

@@ -0,0 +1,4 @@
+// Side-effect import: the reset must ship exactly once in the aggregated style.css.
+import './styles/base/reset.scss';
+
+export {};

packages/twenty-new-ui/src/individual-entry.ts

@@ -0,0 +1,15 @@
+// Entry point for the individual/self-contained build (vite.config.individual.ts).
+// Re-exports all public modules so a single bundle contains every component with
+// internal deps bundled, while React stays external for the consumer's bundler.
+
+export * from './accessibility';
+export * from './components';
+export * from './display';
+export * from './feedback';
+export * from './input';
+export * from './json-visualizer';
+export * from './layout';
+export * from './navigation';
+export * from './theme';
+export * from './theme-constants';
+export * from './utilities';

packages/twenty-new-ui/src/input/components/Toggle.module.scss

@@ -0,0 +1,64 @@
+.root {
+  position: relative;
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+  align-self: flex-start;
+  border-radius: 10px;
+  background-color: var(--t-background-transparent-medium);
+  cursor: pointer;
+  transition: background-color duration(normal) ease;
+
+  &[data-checked] {
+    background-color: var(--toggle-on-color, var(--t-color-blue));
+  }
+
+  &[data-disabled] {
+    opacity: 0.5;
+    pointer-events: none;
+  }
+}
+
+.centered {
+  align-self: center;
+}
+
+.small {
+  width: 24px;
+  height: 16px;
+}
+
+.medium {
+  width: 32px;
+  height: 20px;
+}
+
+.thumb {
+  position: absolute;
+  top: 50%;
+  left: 0;
+  display: block;
+  border-radius: 50%;
+  background-color: var(--t-background-primary);
+  transition: transform duration(normal) ease;
+}
+
+.small .thumb {
+  width: 12px;
+  height: 12px;
+  transform: translate(2px, -50%);
+}
+
+.medium .thumb {
+  width: 16px;
+  height: 16px;
+  transform: translate(2px, -50%);
+}
+
+.small[data-checked] .thumb {
+  transform: translate(10px, -50%);
+}
+
+.medium[data-checked] .thumb {
+  transform: translate(14px, -50%);
+}

packages/twenty-new-ui/src/input/components/Toggle.module.scss.d.ts

@@ -0,0 +1,8 @@
+declare const classNames: {
+  readonly root: 'root';
+  readonly centered: 'centered';
+  readonly small: 'small';
+  readonly medium: 'medium';
+  readonly thumb: 'thumb';
+};
+export default classNames;

packages/twenty-new-ui/src/input/components/Toggle.stories.tsx

@@ -0,0 +1,50 @@
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+import { useState } from 'react';
+
+import { ThemeProvider } from '@new-ui/theme-constants';
+
+import { Toggle } from './Toggle';
+
+const meta: Meta<typeof Toggle> = {
+  title: 'Input/Toggle',
+  component: Toggle,
+  args: { toggleSize: 'medium', 'aria-label': 'Example toggle' },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Toggle>;
+
+export const On: Story = { args: { value: true } };
+
+export const Off: Story = { args: { value: false } };
+
+export const Small: Story = { args: { value: true, toggleSize: 'small' } };
+
+export const CustomColor: Story = {
+  args: { value: true, color: 'color(display-p3 0.2 0.7 0.4)' },
+};
+
+export const Disabled: Story = { args: { value: true, disabled: true } };
+
+const ControlledToggle = () => {
+  const [value, setValue] = useState(false);
+  return (
+    <Toggle value={value} onChange={setValue} aria-label="Example toggle" />
+  );
+};
+
+export const Interactive: Story = {
+  render: () => <ControlledToggle />,
+};
+
+export const Dark: Story = {
+  args: { value: true },
+  decorators: [
+    (Story) => (
+      <ThemeProvider colorScheme="dark">
+        <Story />
+      </ThemeProvider>
+    ),
+  ],
+};

packages/twenty-new-ui/src/input/components/Toggle.tsx

@@ -0,0 +1,54 @@
+import { Switch } from '@base-ui/react/switch';
+import { clsx } from 'clsx';
+
+import styles from './Toggle.module.scss';
+
+export type ToggleSize = 'small' | 'medium';
+
+export type ToggleProps = {
+  id?: string;
+  value?: boolean;
+  onChange?: (value: boolean, e?: React.MouseEvent<HTMLDivElement>) => void;
+  color?: string;
+  toggleSize?: ToggleSize;
+  className?: string;
+  centered?: boolean;
+  disabled?: boolean;
+  'aria-label'?: string;
+  'aria-labelledby'?: string;
+};
+
+export const Toggle = ({
+  id,
+  value = false,
+  onChange,
+  color,
+  toggleSize = 'medium',
+  className,
+  centered,
+  disabled,
+  'aria-label': ariaLabel,
+  'aria-labelledby': ariaLabelledBy,
+}: ToggleProps) => (
+  <Switch.Root
+    id={id}
+    checked={value}
+    disabled={disabled}
+    onCheckedChange={(checked) => onChange?.(checked)}
+    aria-label={ariaLabel}
+    aria-labelledby={ariaLabelledBy}
+    className={clsx(
+      styles.root,
+      styles[toggleSize],
+      centered && styles.centered,
+      className,
+    )}
+    style={
+      color
+        ? ({ '--toggle-on-color': color } as React.CSSProperties)
+        : undefined
+    }
+  >
+    <Switch.Thumb className={styles.thumb} />
+  </Switch.Root>
+);

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

@@ -0,0 +1,2 @@
+export { Toggle } from './components/Toggle';
+export type { ToggleProps, ToggleSize } from './components/Toggle';

packages/twenty-new-ui/src/json-visualizer/index.ts

@@ -0,0 +1,2 @@
+// Auto-generated barrel placeholder — populated as components migrate into this entry point.
+export {};

packages/twenty-new-ui/src/layout/index.ts

@@ -0,0 +1,2 @@
+// Auto-generated barrel placeholder — populated as components migrate into this entry point.
+export {};

packages/twenty-new-ui/src/navigation/index.ts

@@ -0,0 +1,2 @@
+// Auto-generated barrel placeholder — populated as components migrate into this entry point.
+export {};

packages/twenty-new-ui/src/styles/abstracts/_breakpoints.scss

@@ -0,0 +1,18 @@
+@use 'sass:map';
+
+// Mirrors twenty-ui's MOBILE_VIEWPORT (768px).
+$breakpoints: (
+  'mobile': 768px,
+);
+
+@mixin respond-to($name) {
+  $value: map.get($breakpoints, $name);
+
+  @if $value == null {
+    @error 'Unknown breakpoint: #{$name}';
+  }
+
+  @media (max-width: $value) {
+    @content;
+  }
+}

packages/twenty-new-ui/src/styles/abstracts/_functions.scss

@@ -0,0 +1,5 @@
+// duration(fast) => calc(var(--t-animation-duration-fast) * 1s)
+// Theme animation durations are stored unitless; this scales them to seconds.
+@function duration($name) {
+  @return calc(var(--t-animation-duration-#{$name}) * 1s);
+}

packages/twenty-new-ui/src/styles/abstracts/_mixins.scss

@@ -0,0 +1,6 @@
+@mixin focus-ring {
+  &:focus-visible {
+    outline: 2px solid var(--t-color-blue);
+    outline-offset: 1px;
+  }
+}

packages/twenty-new-ui/src/styles/base/reset.scss

@@ -0,0 +1,15 @@
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+button {
+  margin: 0;
+  padding: 0;
+  font: inherit;
+  color: inherit;
+  background: none;
+  border: none;
+  cursor: pointer;
+}

packages/twenty-new-ui/src/testing/index.ts

@@ -0,0 +1,2 @@
+// Auto-generated barrel placeholder — populated as components migrate into this entry point.
+export {};

packages/twenty-new-ui/src/theme-constants/ThemeProvider.tsx

@@ -0,0 +1,121 @@
+import { createContext, useLayoutEffect, useState } from 'react';
+
+import { themeCssVariables } from './themeCssVariables';
+
+type StringLeaves<T> = {
+  [K in keyof T]: T[K] extends string ? string : StringLeaves<T[K]>;
+};
+
+type DeepMerge<T, U> = {
+  [K in keyof T]: K extends keyof U
+    ? U[K] extends Record<string, unknown>
+      ? T[K] extends Record<string, unknown>
+        ? DeepMerge<T[K], U[K]>
+        : U[K]
+      : U[K]
+    : T[K];
+};
+
+// CSS variables that resolve to pure numbers at runtime
+type NumericOverrides = {
+  icon: {
+    size: { sm: number; md: number; lg: number; xl: number };
+    stroke: { sm: number; md: number; lg: number };
+  };
+  animation: {
+    duration: { instant: number; fast: number; normal: number; slow: number };
+  };
+  text: {
+    lineHeight: { lg: number; md: number };
+    iconSizeMedium: number;
+    iconSizeSmall: number;
+    iconStrikeLight: number;
+    iconStrikeMedium: number;
+    iconStrikeBold: number;
+  };
+  spacingMultiplicator: number;
+  lastLayerZIndex: number;
+};
+
+export type ThemeType = DeepMerge<
+  StringLeaves<typeof themeCssVariables>,
+  NumericOverrides
+>;
+
+export type ThemeContextType = {
+  theme: ThemeType;
+  colorScheme: 'light' | 'dark';
+};
+
+const computeThemeFromCss = (): ThemeType => {
+  if (
+    typeof document === 'undefined' ||
+    typeof getComputedStyle !== 'function'
+  ) {
+    return themeCssVariables as unknown as ThemeType;
+  }
+
+  const computedStyle = getComputedStyle(document.documentElement);
+
+  const resolve = (obj: Record<string, unknown>): Record<string, unknown> => {
+    const result: Record<string, unknown> = {};
+
+    for (const key of Object.keys(obj)) {
+      const value = obj[key];
+
+      if (typeof value === 'string' && value.startsWith('var(')) {
+        const varName = value.slice(4, -1);
+        const raw = computedStyle.getPropertyValue(varName).trim();
+        const num = Number(raw);
+        result[key] = raw !== '' && !isNaN(num) ? num : raw;
+      } else if (typeof value === 'object' && value !== null) {
+        result[key] = resolve(value as Record<string, unknown>);
+      } else {
+        result[key] = value;
+      }
+    }
+
+    return result;
+  };
+
+  return resolve(
+    themeCssVariables as unknown as Record<string, unknown>,
+  ) as unknown as ThemeType;
+};
+
+const applyColorSchemeClass = (colorScheme: 'light' | 'dark') => {
+  if (typeof document === 'undefined') return;
+  const root = document.documentElement;
+  if (!root?.classList) return;
+  root.classList.toggle('dark', colorScheme === 'dark');
+  root.classList.toggle('light', colorScheme === 'light');
+};
+
+export const ThemeContext = createContext<ThemeContextType>({
+  theme: themeCssVariables as unknown as ThemeType,
+  colorScheme: 'light',
+});
+
+export const ThemeProvider = ({
+  children,
+  colorScheme,
+}: {
+  children: React.ReactNode;
+  colorScheme: 'light' | 'dark';
+}) => {
+  const [theme, setTheme] = useState<ThemeType>(() => {
+    applyColorSchemeClass(colorScheme);
+    return computeThemeFromCss();
+  });
+
+  useLayoutEffect(() => {
+    applyColorSchemeClass(colorScheme);
+    setTheme(computeThemeFromCss());
+  }, [colorScheme]);
+
+  return (
+    <ThemeContext.Provider value={{ theme, colorScheme }}>
+      {children}
+    </ThemeContext.Provider>
+  );
+};

packages/twenty-new-ui/src/theme-constants/__tests__/getNextThemeColor.test.ts

@@ -0,0 +1,28 @@
+import {
+  MAIN_COLOR_NAMES,
+  type ThemeColor,
+} from '@new-ui/theme/constants/MainColorNames';
+
+import { getNextThemeColor } from '../getNextThemeColor';
+
+describe('getNextThemeColor', () => {
+  it('returns the next theme color', () => {
+    const currentColor: ThemeColor = MAIN_COLOR_NAMES[0];
+    const nextColor: ThemeColor = MAIN_COLOR_NAMES[1];
+
+    expect(getNextThemeColor(MAIN_COLOR_NAMES, currentColor)).toBe(nextColor);
+  });
+
+  it('returns the first color when reaching the end', () => {
+    const currentColor: ThemeColor =
+      MAIN_COLOR_NAMES[MAIN_COLOR_NAMES.length - 1];
+    const nextColor: ThemeColor = MAIN_COLOR_NAMES[0];
+
+    expect(getNextThemeColor(MAIN_COLOR_NAMES, currentColor)).toBe(nextColor);
+  });
+  it('returns the first color when currentColorIsUndefined', () => {
+    const firstColor: ThemeColor = MAIN_COLOR_NAMES[0];
+
+    expect(getNextThemeColor(MAIN_COLOR_NAMES, undefined)).toBe(firstColor);
+  });
+});

packages/twenty-new-ui/src/theme-constants/__tests__/theme-parity.test.ts

@@ -0,0 +1,50 @@
+import { readFileSync } from 'fs';
+import { resolve } from 'path';
+
+import { themeCssVariables as newThemeCssVariables } from '../themeCssVariables';
+import { themeCssVariables as oldThemeCssVariables } from '../../../../twenty-ui/src/theme-constants/themeCssVariables';
+
+const NEW_DIR = resolve(__dirname, '..');
+const OLD_DIR = resolve(__dirname, '../../../../twenty-ui/src/theme-constants');
+
+// Parse a theme CSS file into ordered [name, value] pairs, normalizing
+// whitespace so formatting differences (multi-line vs single-line values,
+// header comment) don't affect the comparison. Stops each value at the ';'
+// that terminates it, skipping ';' embedded in values (e.g. data URIs).
+const parseTokens = (dir: string, file: string): [string, string][] => {
+  const text = readFileSync(resolve(dir, file), 'utf8');
+  const body = text.slice(text.indexOf('{') + 1, text.lastIndexOf('}'));
+  const re = /--t-([a-z0-9_-]+):\s*([\s\S]*?);(?=\s*(?:--t-|$))/g;
+  const tokens: [string, string][] = [];
+  let match: RegExpExecArray | null;
+  while ((match = re.exec(body)) !== null) {
+    const value = match[2]
+      .trim()
+      .replace(/\s+/g, ' ')
+      .replace(/\(\s+/g, '(')
+      .replace(/\s+\)/g, ')');
+    tokens.push([match[1], value]);
+  }
+  return tokens;
+};
+
+// twenty-new-ui must produce the exact same --t-* tokens and values (and order)
+// as twenty-ui, so the swap is token-for-token with no visual change.
+// Comparison ignores incidental formatting (header, whitespace) but not values.
+describe('theme parity with twenty-ui', () => {
+  it('theme-light.css tokens match twenty-ui', () => {
+    expect(parseTokens(NEW_DIR, 'theme-light.css')).toEqual(
+      parseTokens(OLD_DIR, 'theme-light.css'),
+    );
+  });
+
+  it('theme-dark.css tokens match twenty-ui', () => {
+    expect(parseTokens(NEW_DIR, 'theme-dark.css')).toEqual(
+      parseTokens(OLD_DIR, 'theme-dark.css'),
+    );
+  });
+
+  it('themeCssVariables is deeply equal to twenty-ui', () => {
+    expect(newThemeCssVariables).toEqual(oldThemeCssVariables);
+  });
+});

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

@@ -0,0 +1,3 @@
+// CSS custom properties don't work in media queries, so MOBILE_VIEWPORT
+// must be a static number rather than a var(--...) reference.
+export const MOBILE_VIEWPORT = 768;

packages/twenty-new-ui/src/theme-constants/getNextThemeColor.ts

@@ -0,0 +1,15 @@
+import { type ThemeColor } from '@new-ui/theme/constants/MainColorNames';
+
+export const getNextThemeColor = (
+  colorNames: ThemeColor[],
+  currentColor?: ThemeColor,
+): ThemeColor => {
+  if (currentColor === null || currentColor === undefined) {
+    return colorNames[0];
+  }
+  const currentColorIndex = colorNames.findIndex(
+    (color) => color === currentColor,
+  );
+  const nextColorIndex = (currentColorIndex + 1) % colorNames.length;
+  return colorNames[nextColorIndex];
+};

packages/twenty-new-ui/src/theme-constants/index.ts

@@ -0,0 +1,14 @@
+/*
+ * _____                    _
+ *|_   _|_      _____ _ __ | |_ _   _
+ *  | | \ \ /\ / / _ \ '_ \| __| | | | Auto-generated file
+ *  | |  \ V  V /  __/ | | | |_| |_| | Any edits to this will be overridden
+ *  |_|   \_/\_/ \___|_| |_|\__|\__, |
+ *                              |___/
+ */
+
+export { MOBILE_VIEWPORT } from './constants';
+export { getNextThemeColor } from './getNextThemeColor';
+export { themeCssVariables } from './themeCssVariables';
+export type { ThemeType, ThemeContextType } from './ThemeProvider';
+export { ThemeContext, ThemeProvider } from './ThemeProvider';

packages/twenty-new-ui/src/theme/constants/AccentDark.ts

@@ -0,0 +1,23 @@
+import * as RadixColors from '@radix-ui/colors';
+import { COLOR_DARK } from '@new-ui/theme/constants/ColorsDark';
+
+export const ACCENT_DARK = {
+  primary: COLOR_DARK.blue5,
+  secondary: COLOR_DARK.blue5,
+  tertiary: COLOR_DARK.blue3,
+  quaternary: COLOR_DARK.blue2,
+  accent3570: COLOR_DARK.blue8,
+  accent4060: COLOR_DARK.blue8,
+  accent1: RadixColors.indigoDarkP3.indigo1,
+  accent2: RadixColors.indigoDarkP3.indigo2,
+  accent3: RadixColors.indigoDarkP3.indigo3,
+  accent4: RadixColors.indigoDarkP3.indigo4,
+  accent5: RadixColors.indigoDarkP3.indigo5,
+  accent6: RadixColors.indigoDarkP3.indigo6,
+  accent7: RadixColors.indigoDarkP3.indigo7,
+  accent8: RadixColors.indigoDarkP3.indigo8,
+  accent9: RadixColors.indigoDarkP3.indigo9,
+  accent10: RadixColors.indigoDarkP3.indigo10,
+  accent11: RadixColors.indigoDarkP3.indigo11,
+  accent12: RadixColors.indigoDarkP3.indigo12,
+};

packages/twenty-new-ui/src/theme/constants/AccentLight.ts

@@ -0,0 +1,23 @@
+import * as RadixColors from '@radix-ui/colors';
+import { COLOR_LIGHT } from '@new-ui/theme/constants/ColorsLight';
+
+export const ACCENT_LIGHT = {
+  primary: COLOR_LIGHT.blue5,
+  secondary: COLOR_LIGHT.blue5,
+  tertiary: COLOR_LIGHT.blue3,
+  quaternary: COLOR_LIGHT.blue2,
+  accent3570: COLOR_LIGHT.blue8,
+  accent4060: COLOR_LIGHT.blue8,
+  accent1: RadixColors.indigoP3.indigo1,
+  accent2: RadixColors.indigoP3.indigo2,
+  accent3: RadixColors.indigoP3.indigo3,
+  accent4: RadixColors.indigoP3.indigo4,
+  accent5: RadixColors.indigoP3.indigo5,
+  accent6: RadixColors.indigoP3.indigo6,
+  accent7: RadixColors.indigoP3.indigo7,
+  accent8: RadixColors.indigoP3.indigo8,
+  accent9: RadixColors.indigoP3.indigo9,
+  accent10: RadixColors.indigoP3.indigo10,
+  accent11: RadixColors.indigoP3.indigo11,
+  accent12: RadixColors.indigoP3.indigo12,
+};

packages/twenty-new-ui/src/theme/constants/Animation.ts

@@ -0,0 +1,10 @@
+export const ANIMATION = {
+  duration: {
+    instant: 0.075,
+    fast: 0.15,
+    normal: 0.3,
+    slow: 1.5,
+  },
+};
+
+export type AnimationDuration = keyof typeof ANIMATION.duration;

packages/twenty-new-ui/src/theme/constants/BackgroundDark.ts

@@ -0,0 +1,35 @@
+import * as RadixColors from '@radix-ui/colors';
+
+import { COLOR_DARK } from '@new-ui/theme/constants/ColorsDark';
+import { GRAY_SCALE_DARK } from './GrayScaleDark';
+import { TRANSPARENT_COLORS_DARK } from './TransparentColorsDark';
+
+export const BACKGROUND_DARK = {
+  noisy: 'var(--t-background-noisy)',
+  primary: GRAY_SCALE_DARK.gray1,
+  secondary: GRAY_SCALE_DARK.gray2,
+  tertiary: GRAY_SCALE_DARK.gray4,
+  quaternary: GRAY_SCALE_DARK.gray5,
+  invertedPrimary: GRAY_SCALE_DARK.gray12,
+  invertedSecondary: GRAY_SCALE_DARK.gray11,
+  danger: COLOR_DARK.red3,
+  transparent: {
+    primary: RadixColors.blackP3A.blackA7,
+    secondary: RadixColors.blackP3A.blackA6,
+    strong: TRANSPARENT_COLORS_DARK.gray7,
+    medium: TRANSPARENT_COLORS_DARK.gray5,
+    light: TRANSPARENT_COLORS_DARK.gray2,
+    lighter: TRANSPARENT_COLORS_DARK.gray1,
+    danger: TRANSPARENT_COLORS_DARK.red3,
+    blue: TRANSPARENT_COLORS_DARK.blue4,
+    orange: TRANSPARENT_COLORS_DARK.orange4,
+    success: TRANSPARENT_COLORS_DARK.green4,
+  },
+  overlayPrimary: '#000000b8',
+  overlaySecondary: '#0000005c',
+  overlayTertiary: '#0000005c',
+  radialGradient: `radial-gradient(50% 62.62% at 50% 0%, ${GRAY_SCALE_DARK.gray9} 0%, ${GRAY_SCALE_DARK.gray10} 100%)`,
+  radialGradientHover: `radial-gradient(76.32% 95.59% at 50% 0%, ${GRAY_SCALE_DARK.gray10} 0%, ${GRAY_SCALE_DARK.gray11} 100%)`,
+  primaryInverted: GRAY_SCALE_DARK.gray12,
+  primaryInvertedHover: GRAY_SCALE_DARK.gray11,
+};

packages/twenty-new-ui/src/theme/constants/BackgroundLight.ts

@@ -0,0 +1,35 @@
+import * as RadixColors from '@radix-ui/colors';
+
+import { COLOR_LIGHT } from '@new-ui/theme/constants/ColorsLight';
+import { GRAY_SCALE_LIGHT } from './GrayScaleLight';
+import { TRANSPARENT_COLORS_LIGHT } from './TransparentColorsLight';
+
+export const BACKGROUND_LIGHT = {
+  noisy: 'var(--t-background-noisy)',
+  primary: GRAY_SCALE_LIGHT.gray1,
+  secondary: GRAY_SCALE_LIGHT.gray2,
+  tertiary: GRAY_SCALE_LIGHT.gray4,
+  quaternary: GRAY_SCALE_LIGHT.gray5,
+  invertedPrimary: GRAY_SCALE_LIGHT.gray12,
+  invertedSecondary: GRAY_SCALE_LIGHT.gray11,
+  danger: COLOR_LIGHT.red3,
+  transparent: {
+    primary: RadixColors.whiteP3A.whiteA7,
+    secondary: RadixColors.whiteP3A.whiteA6,
+    strong: TRANSPARENT_COLORS_LIGHT.gray7,
+    medium: TRANSPARENT_COLORS_LIGHT.gray5,
+    light: TRANSPARENT_COLORS_LIGHT.gray2,
+    lighter: TRANSPARENT_COLORS_LIGHT.gray1,
+    danger: TRANSPARENT_COLORS_LIGHT.red3,
+    blue: TRANSPARENT_COLORS_LIGHT.blue3,
+    orange: TRANSPARENT_COLORS_LIGHT.orange3,
+    success: TRANSPARENT_COLORS_LIGHT.green3,
+  },
+  overlayPrimary: TRANSPARENT_COLORS_LIGHT.gray11,
+  overlaySecondary: TRANSPARENT_COLORS_LIGHT.gray9,
+  overlayTertiary: TRANSPARENT_COLORS_LIGHT.gray4,
+  radialGradient: `radial-gradient(50% 62.62% at 50% 0%, ${GRAY_SCALE_LIGHT.gray9} 0%, ${GRAY_SCALE_LIGHT.gray10} 100%)`,
+  radialGradientHover: `radial-gradient(76.32% 95.59% at 50% 0%, ${GRAY_SCALE_LIGHT.gray10} 0%, ${GRAY_SCALE_LIGHT.gray11} 100%)`,
+  primaryInverted: GRAY_SCALE_LIGHT.gray12,
+  primaryInvertedHover: GRAY_SCALE_LIGHT.gray11,
+};

packages/twenty-new-ui/src/theme/constants/BlurDark.ts

@@ -0,0 +1,5 @@
+export const BLUR_DARK = {
+  light: 'blur(6px) saturate(200%) contrast(100%) brightness(130%)',
+  medium: 'blur(12px) saturate(200%) contrast(100%) brightness(130%)',
+  strong: 'blur(20px) saturate(200%) contrast(100%) brightness(130%)',
+};

packages/twenty-new-ui/src/theme/constants/BlurLight.ts

@@ -0,0 +1,5 @@
+export const BLUR_LIGHT = {
+  light: 'blur(6px) saturate(200%) contrast(50%) brightness(130%)',
+  medium: 'blur(12px) saturate(200%) contrast(50%) brightness(130%)',
+  strong: 'blur(20px) saturate(200%) contrast(50%) brightness(130%)',
+};

packages/twenty-new-ui/src/theme/constants/BorderCommon.ts

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

packages/twenty-new-ui/src/theme/constants/BorderDark.ts

@@ -0,0 +1,18 @@
+import { COLOR_DARK } from '@new-ui/theme/constants/ColorsDark';
+import { BORDER_COMMON } from './BorderCommon';
+import { GRAY_SCALE_DARK } from './GrayScaleDark';
+import { TRANSPARENT_COLORS_DARK } from './TransparentColorsDark';
+
+export const BORDER_DARK = {
+  color: {
+    strong: GRAY_SCALE_DARK.gray6,
+    medium: GRAY_SCALE_DARK.gray5,
+    light: GRAY_SCALE_DARK.gray4,
+    secondaryInverted: GRAY_SCALE_DARK.gray11,
+    inverted: GRAY_SCALE_DARK.gray12,
+    danger: COLOR_DARK.red5,
+    blue: COLOR_DARK.blue7,
+    transparentStrong: TRANSPARENT_COLORS_DARK.gray4,
+  },
+  ...BORDER_COMMON,
+};

packages/twenty-new-ui/src/theme/constants/BorderLight.ts

@@ -0,0 +1,18 @@
+import { COLOR_LIGHT } from '@new-ui/theme/constants/ColorsLight';
+import { BORDER_COMMON } from './BorderCommon';
+import { GRAY_SCALE_LIGHT } from './GrayScaleLight';
+import { TRANSPARENT_COLORS_LIGHT } from './TransparentColorsLight';
+
+export const BORDER_LIGHT = {
+  color: {
+    strong: GRAY_SCALE_LIGHT.gray6,
+    medium: GRAY_SCALE_LIGHT.gray5,
+    light: GRAY_SCALE_LIGHT.gray4,
+    secondaryInverted: GRAY_SCALE_LIGHT.gray11,
+    inverted: GRAY_SCALE_LIGHT.gray12,
+    danger: COLOR_LIGHT.red5,
+    blue: COLOR_LIGHT.blue7,
+    transparentStrong: TRANSPARENT_COLORS_LIGHT.gray4,
+  },
+  ...BORDER_COMMON,
+};

packages/twenty-new-ui/src/theme/constants/BoxShadowDark.ts

@@ -0,0 +1,19 @@
+import { RGBA } from '@new-ui/theme/constants/Rgba';
+
+/* oxlint-disable twenty/no-hardcoded-colors */
+export const BOX_SHADOW_DARK = {
+  color: RGBA('#000000', 0.6),
+  light: `0px 2px 4px 0px ${RGBA(
+    '#000000',
+    0.04,
+  )}, 0px 0px 4px 0px ${RGBA('#000000', 0.08)}`,
+  strong: `2px 4px 16px 0px ${RGBA(
+    '#000000',
+    0.16,
+  )}, 0px 2px 4px 0px ${RGBA('#000000', 0.08)}`,
+  underline: `0px 1px 0px 0px ${RGBA('#000000', 0.32)}`,
+  superHeavy: `2px 4px 16px 0px ${RGBA(
+    '#000000',
+    0.12,
+  )}, 0px 2px 4px 0px ${RGBA('#000000', 0.04)}`,
+};

packages/twenty-new-ui/src/theme/constants/BoxShadowLight.ts

@@ -0,0 +1,9 @@
+import { GRAY_SCALE_LIGHT_ALPHA } from '@new-ui/theme/constants/GrayScaleLightAlpha';
+
+export const BOX_SHADOW_LIGHT = {
+  color: GRAY_SCALE_LIGHT_ALPHA.gray2,
+  light: `0px 2px 4px 0px ${GRAY_SCALE_LIGHT_ALPHA.gray2}, 0px 0px 4px 0px ${GRAY_SCALE_LIGHT_ALPHA.gray5}`,
+  strong: `2px 4px 16px 0px ${GRAY_SCALE_LIGHT_ALPHA.gray7}, 0px 2px 4px 0px ${GRAY_SCALE_LIGHT_ALPHA.gray5}`,
+  underline: `0px 1px 0px 0px ${GRAY_SCALE_LIGHT_ALPHA.gray9}`,
+  superHeavy: `0px 0px 8px 0px ${GRAY_SCALE_LIGHT_ALPHA.gray7}, 0px 8px 64px -16px ${GRAY_SCALE_LIGHT_ALPHA.gray10}, 0px 24px 56px -16px ${GRAY_SCALE_LIGHT_ALPHA.gray5}`,
+};

packages/twenty-new-ui/src/theme/constants/CodeDark.ts

@@ -0,0 +1,12 @@
+import { COLOR_DARK } from '@new-ui/theme/constants/ColorsDark';
+
+export const CODE_DARK = {
+  text: {
+    gray: COLOR_DARK.gray10,
+    sky: COLOR_DARK.sky10,
+    pink: COLOR_DARK.pink10,
+    orange: COLOR_DARK.orange8,
+    green: COLOR_DARK.lime8,
+  },
+  font: { family: 'DM Mono' },
+};

packages/twenty-new-ui/src/theme/constants/CodeLight.ts

@@ -0,0 +1,12 @@
+import { COLOR_LIGHT } from '@new-ui/theme/constants/ColorsLight';
+
+export const CODE_LIGHT = {
+  text: {
+    gray: COLOR_LIGHT.gray10,
+    sky: COLOR_LIGHT.sky10,
+    pink: COLOR_LIGHT.pink10,
+    orange: COLOR_LIGHT.orange8,
+    green: COLOR_LIGHT.lime8,
+  },
+  font: { family: 'DM Mono' },
+};

packages/twenty-new-ui/src/theme/constants/ColorsDark.ts

@@ -0,0 +1,9 @@
+import { MAIN_COLORS_DARK } from './MainColorsDark';
+import { SECONDARY_COLORS_DARK } from './SecondaryColorsDark';
+import { TRANSPARENT_COLORS_DARK } from './TransparentColorsDark';
+
+export const COLOR_DARK = {
+  ...MAIN_COLORS_DARK,
+  ...SECONDARY_COLORS_DARK,
+  transparent: TRANSPARENT_COLORS_DARK,
+};

packages/twenty-new-ui/src/theme/constants/ColorsLight.ts

@@ -0,0 +1,9 @@
+import { MAIN_COLORS_LIGHT } from './MainColorsLight';
+import { SECONDARY_COLORS_LIGHT } from './SecondaryColorsLight';
+import { TRANSPARENT_COLORS_LIGHT } from './TransparentColorsLight';
+
+export const COLOR_LIGHT = {
+  ...MAIN_COLORS_LIGHT,
+  ...SECONDARY_COLORS_LIGHT,
+  transparent: TRANSPARENT_COLORS_LIGHT,
+};

packages/twenty-new-ui/src/theme/constants/DefaultThemeColorFallback.ts

@@ -0,0 +1,3 @@
+import { type ThemeColor } from './MainColorNames';
+
+export const DEFAULT_THEME_COLOR_FALLBACK: ThemeColor = 'gray';

packages/twenty-new-ui/src/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-new-ui/src/theme/constants/FontDark.ts

@@ -0,0 +1,16 @@
+import { COLOR_DARK } from '@new-ui/theme/constants/ColorsDark';
+import { FONT_COMMON } from './FontCommon';
+import { GRAY_SCALE_DARK } from './GrayScaleDark';
+
+export const FONT_DARK = {
+  color: {
+    primary: GRAY_SCALE_DARK.gray12,
+    secondary: GRAY_SCALE_DARK.gray11,
+    tertiary: GRAY_SCALE_DARK.gray9,
+    light: GRAY_SCALE_DARK.gray8,
+    extraLight: GRAY_SCALE_DARK.gray7,
+    inverted: GRAY_SCALE_DARK.gray1,
+    danger: COLOR_DARK.red,
+  },
+  ...FONT_COMMON,
+};

packages/twenty-new-ui/src/theme/constants/FontLight.ts

@@ -0,0 +1,16 @@
+import { COLOR_LIGHT } from '@new-ui/theme/constants/ColorsLight';
+import { FONT_COMMON } from './FontCommon';
+import { GRAY_SCALE_LIGHT } from './GrayScaleLight';
+
+export const FONT_LIGHT = {
+  color: {
+    primary: GRAY_SCALE_LIGHT.gray12,
+    secondary: GRAY_SCALE_LIGHT.gray11,
+    tertiary: GRAY_SCALE_LIGHT.gray9,
+    light: GRAY_SCALE_LIGHT.gray8,
+    extraLight: GRAY_SCALE_LIGHT.gray7,
+    inverted: GRAY_SCALE_LIGHT.gray1,
+    danger: COLOR_LIGHT.red,
+  },
+  ...FONT_COMMON,
+};

packages/twenty-new-ui/src/theme/constants/GrayScaleDark.ts

@@ -0,0 +1,14 @@
+export const GRAY_SCALE_DARK = {
+  gray1: 'color(display-p3 0.09 0.09 0.09)',
+  gray2: 'color(display-p3 0.106 0.106 0.106)',
+  gray3: 'color(display-p3 0.098 0.098 0.098)',
+  gray4: 'color(display-p3 0.114 0.114 0.114)',
+  gray5: 'color(display-p3 0.133 0.133 0.133)',
+  gray6: 'color(display-p3 0.282 0.282 0.282)',
+  gray7: 'color(display-p3 0.298 0.298 0.298)',
+  gray8: 'color(display-p3 0.4 0.4 0.4)',
+  gray9: 'color(display-p3 0.506 0.506 0.506)',
+  gray10: 'color(display-p3 0.482 0.482 0.482)',
+  gray11: 'color(display-p3 0.702 0.702 0.702)',
+  gray12: 'color(display-p3 0.922 0.922 0.922)',
+};

packages/twenty-new-ui/src/theme/constants/GrayScaleDarkAlpha.ts

@@ -0,0 +1,14 @@
+export const GRAY_SCALE_DARK_ALPHA = {
+  gray1: 'color(display-p3 1 1 1 / 0.031)',
+  gray2: 'color(display-p3 1 1 1 / 0.059)',
+  gray3: 'color(display-p3 1 1 1 / 0.047)',
+  gray4: 'color(display-p3 1 1 1 / 0.071)',
+  gray5: 'color(display-p3 1 1 1 / 0.102)',
+  gray6: 'color(display-p3 1 1 1 / 0.114)',
+  gray7: 'color(display-p3 1 1 1 / 0.141)',
+  gray8: 'color(display-p3 1 1 1 / 0.22)',
+  gray9: 'color(display-p3 1 1 1 / 0.427)',
+  gray10: 'color(display-p3 1 1 1 / 0.478)',
+  gray11: 'color(display-p3 1 1 1 / 0.565)',
+  gray12: 'color(display-p3 1 1 1 / 0.91)',
+};

packages/twenty-new-ui/src/theme/constants/GrayScaleLight.ts

@@ -0,0 +1,14 @@
+export const GRAY_SCALE_LIGHT = {
+  gray1: 'color(display-p3 1 1 1)',
+  gray2: 'color(display-p3 0.988 0.988 0.988)',
+  gray3: 'color(display-p3 0.976 0.976 0.976)',
+  gray4: 'color(display-p3 0.945 0.945 0.945)',
+  gray5: 'color(display-p3 0.922 0.922 0.922)',
+  gray6: 'color(display-p3 0.839 0.839 0.839)',
+  gray7: 'color(display-p3 0.8 0.8 0.8)',
+  gray8: 'color(display-p3 0.702 0.702 0.702)',
+  gray9: 'color(display-p3 0.6 0.6 0.6)',
+  gray10: 'color(display-p3 0.514 0.514 0.514)',
+  gray11: 'color(display-p3 0.4 0.4 0.4)',
+  gray12: 'color(display-p3 0.2 0.2 0.2)',
+};

packages/twenty-new-ui/src/theme/constants/GrayScaleLightAlpha.ts

@@ -0,0 +1,14 @@
+export const GRAY_SCALE_LIGHT_ALPHA = {
+  gray1: 'color(display-p3 0 0 0 / 0.02)',
+  gray2: 'color(display-p3 0 0 0 / 0.039)',
+  gray3: 'color(display-p3 0 0 0 / 0.047)',
+  gray4: 'color(display-p3 0 0 0 / 0.071)',
+  gray5: 'color(display-p3 0 0 0 / 0.078)',
+  gray6: 'color(display-p3 0 0 0 / 0.114)',
+  gray7: 'color(display-p3 0 0 0 / 0.161)',
+  gray8: 'color(display-p3 0 0 0 / 0.22)',
+  gray9: 'color(display-p3 0 0 0 / 0.361)',
+  gray10: 'color(display-p3 0 0 0 / 0.478)',
+  gray11: 'color(display-p3 0 0 0 / 0.722)',
+  gray12: 'color(display-p3 0 0 0 / 0.91)',
+};

packages/twenty-new-ui/src/theme/constants/Icon.ts

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

packages/twenty-new-ui/src/theme/constants/IllustrationIconDark.ts

@@ -0,0 +1,13 @@
+import { COLOR_DARK } from '@new-ui/theme/constants/ColorsDark';
+import { GRAY_SCALE_DARK } from '@new-ui/theme/constants/GrayScaleDark';
+
+export const ILLUSTRATION_ICON_DARK = {
+  color: {
+    blue: COLOR_DARK.blue10,
+    gray: GRAY_SCALE_DARK.gray8,
+  },
+  fill: {
+    blue: COLOR_DARK.blue12,
+    gray: GRAY_SCALE_DARK.gray5,
+  },
+};

packages/twenty-new-ui/src/theme/constants/IllustrationIconLight.ts

@@ -0,0 +1,13 @@
+import { COLOR_LIGHT } from '@new-ui/theme/constants/ColorsLight';
+import { GRAY_SCALE_LIGHT } from '@new-ui/theme/constants/GrayScaleLight';
+
+export const ILLUSTRATION_ICON_LIGHT = {
+  color: {
+    blue: COLOR_LIGHT.blue8,
+    gray: GRAY_SCALE_LIGHT.gray9,
+  },
+  fill: {
+    blue: COLOR_LIGHT.blue5,
+    gray: GRAY_SCALE_LIGHT.gray5,
+  },
+};

packages/twenty-new-ui/src/theme/constants/MainColorNames.ts

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

packages/twenty-new-ui/src/theme/constants/MainColorsDark.ts

@@ -0,0 +1,41 @@
+import * as RadixColors from '@radix-ui/colors';
+import { GRAY_SCALE_DARK } from '@new-ui/theme/constants/GrayScaleDark';
+
+export const MAIN_COLORS_DARK = {
+  // Reds
+  red: RadixColors.redDarkP3.red9,
+  ruby: RadixColors.rubyDarkP3.ruby9,
+  crimson: RadixColors.crimsonDarkP3.crimson9,
+  tomato: RadixColors.tomatoDarkP3.tomato9,
+
+  // Oranges & Yellows
+  orange: RadixColors.orangeDarkP3.orange9,
+  amber: RadixColors.amberDarkP3.amber9,
+  yellow: RadixColors.yellowDarkP3.yellow9,
+
+  // Greens
+  lime: RadixColors.limeDarkP3.lime9,
+  grass: RadixColors.grassDarkP3.grass9,
+  green: RadixColors.greenDarkP3.green9,
+  jade: RadixColors.jadeDarkP3.jade9,
+  mint: RadixColors.mintDarkP3.mint9,
+
+  // Cyans & Blues
+  turquoise: RadixColors.tealDarkP3.teal9,
+  cyan: RadixColors.cyanDarkP3.cyan9,
+  sky: RadixColors.skyDarkP3.sky9,
+  blue: RadixColors.indigoDarkP3.indigo9,
+
+  // Purples & Pinks
+  iris: RadixColors.irisDarkP3.iris9,
+  violet: RadixColors.violetDarkP3.violet9,
+  purple: RadixColors.purpleDarkP3.purple9,
+  plum: RadixColors.plumDarkP3.plum9,
+  pink: RadixColors.pinkDarkP3.pink9,
+
+  // Earth tones & Neutrals
+  bronze: RadixColors.bronzeDarkP3.bronze9,
+  gold: RadixColors.goldDarkP3.gold9,
+  brown: RadixColors.brownDarkP3.brown9,
+  gray: GRAY_SCALE_DARK.gray7,
+};

packages/twenty-new-ui/src/theme/constants/MainColorsLight.ts

@@ -0,0 +1,41 @@
+import * as RadixColors from '@radix-ui/colors';
+import { GRAY_SCALE_LIGHT } from './GrayScaleLight';
+
+export const MAIN_COLORS_LIGHT = {
+  // Reds
+  red: RadixColors.redP3.red9,
+  ruby: RadixColors.rubyP3.ruby9,
+  crimson: RadixColors.crimsonP3.crimson9,
+  tomato: RadixColors.tomatoP3.tomato9,
+
+  // Oranges & Yellows
+  orange: RadixColors.orangeP3.orange9,
+  amber: RadixColors.amberP3.amber9,
+  yellow: RadixColors.yellowP3.yellow9,
+
+  // Greens
+  lime: RadixColors.limeP3.lime9,
+  grass: RadixColors.grassP3.grass9,
+  green: RadixColors.greenP3.green9,
+  jade: RadixColors.jadeP3.jade9,
+  mint: RadixColors.mintP3.mint9,
+
+  // Cyans & Blues
+  turquoise: RadixColors.tealP3.teal9,
+  cyan: RadixColors.cyanP3.cyan9,
+  sky: RadixColors.skyP3.sky9,
+  blue: RadixColors.indigoP3.indigo9,
+
+  // Purples & Pinks
+  iris: RadixColors.irisP3.iris9,
+  violet: RadixColors.violetP3.violet9,
+  purple: RadixColors.purpleP3.purple9,
+  plum: RadixColors.plumP3.plum9,
+  pink: RadixColors.pinkP3.pink9,
+
+  // Earth tones & Neutrals
+  bronze: RadixColors.bronzeP3.bronze9,
+  gold: RadixColors.goldP3.gold9,
+  brown: RadixColors.brownP3.brown9,
+  gray: GRAY_SCALE_LIGHT.gray9,
+};

packages/twenty-new-ui/src/theme/constants/Modal.ts

@@ -0,0 +1,23 @@
+export const MODAL: {
+  size: { [key: string]: { width?: string; height?: string } };
+} = {
+  size: {
+    sm: {
+      width: '300px',
+    },
+    md: {
+      width: '400px',
+    },
+    lg: {
+      width: '53%',
+    },
+    xl: {
+      width: '1200px',
+      height: '800px',
+    },
+    fullscreen: {
+      width: '100dvw',
+      height: '100dvh',
+    },
+  },
+};

packages/twenty-new-ui/src/theme/constants/Rgba.ts

@@ -0,0 +1,8 @@
+/* oxlint-disable twenty/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-new-ui/src/theme/constants/SecondaryColorsDark.ts

@@ -0,0 +1,394 @@
+import * as RadixColors from '@radix-ui/colors';
+import { GRAY_SCALE_DARK } from '@new-ui/theme/constants/GrayScaleDark';
+
+export const SECONDARY_COLORS_DARK = {
+  yellow1: RadixColors.yellowDarkP3.yellow1,
+  yellow2: RadixColors.yellowDarkP3.yellow2,
+  yellow3: RadixColors.yellowDarkP3.yellow3,
+  yellow4: RadixColors.yellowDarkP3.yellow4,
+  yellow5: RadixColors.yellowDarkP3.yellow5,
+  yellow6: RadixColors.yellowDarkP3.yellow6,
+  yellow7: RadixColors.yellowDarkP3.yellow7,
+  yellow8: RadixColors.yellowDarkP3.yellow8,
+  yellow9: RadixColors.yellowDarkP3.yellow9,
+  yellow10: RadixColors.yellowDarkP3.yellow10,
+  yellow11: RadixColors.yellowDarkP3.yellow11,
+  yellow12: RadixColors.yellowDarkP3.yellow12,
+
+  green1: RadixColors.greenDarkP3.green1,
+  green2: RadixColors.greenDarkP3.green2,
+  green3: RadixColors.greenDarkP3.green3,
+  green4: RadixColors.greenDarkP3.green4,
+  green5: RadixColors.greenDarkP3.green5,
+  green6: RadixColors.greenDarkP3.green6,
+  green7: RadixColors.greenDarkP3.green7,
+  green8: RadixColors.greenDarkP3.green8,
+  green9: RadixColors.greenDarkP3.green9,
+  green10: RadixColors.greenDarkP3.green10,
+  green11: RadixColors.greenDarkP3.green11,
+  green12: RadixColors.greenDarkP3.green12,
+
+  turquoise1: RadixColors.tealDarkP3.teal1,
+  turquoise2: RadixColors.tealDarkP3.teal2,
+  turquoise3: RadixColors.tealDarkP3.teal3,
+  turquoise4: RadixColors.tealDarkP3.teal4,
+  turquoise5: RadixColors.tealDarkP3.teal5,
+  turquoise6: RadixColors.tealDarkP3.teal6,
+  turquoise7: RadixColors.tealDarkP3.teal7,
+  turquoise8: RadixColors.tealDarkP3.teal8,
+  turquoise9: RadixColors.tealDarkP3.teal9,
+  turquoise10: RadixColors.tealDarkP3.teal10,
+  turquoise11: RadixColors.tealDarkP3.teal11,
+  turquoise12: RadixColors.tealDarkP3.teal12,
+
+  sky1: RadixColors.skyDarkP3.sky1,
+  sky2: RadixColors.skyDarkP3.sky2,
+  sky3: RadixColors.skyDarkP3.sky3,
+  sky4: RadixColors.skyDarkP3.sky4,
+  sky5: RadixColors.skyDarkP3.sky5,
+  sky6: RadixColors.skyDarkP3.sky6,
+  sky7: RadixColors.skyDarkP3.sky7,
+  sky8: RadixColors.skyDarkP3.sky8,
+  sky9: RadixColors.skyP3.sky9,
+  sky10: RadixColors.skyDarkP3.sky10,
+  sky11: RadixColors.skyDarkP3.sky11,
+  sky12: RadixColors.skyDarkP3.sky12,
+
+  blue1: RadixColors.indigoDarkP3.indigo1,
+  blue2: RadixColors.indigoDarkP3.indigo2,
+  blue3: RadixColors.indigoDarkP3.indigo3,
+  blue4: RadixColors.indigoDarkP3.indigo4,
+  blue5: RadixColors.indigoDarkP3.indigo5,
+  blue6: RadixColors.indigoDarkP3.indigo6,
+  blue7: RadixColors.indigoDarkP3.indigo7,
+  blue8: RadixColors.indigoDarkP3.indigo8,
+  blue9: RadixColors.indigoDarkP3.indigo9,
+  blue10: RadixColors.indigoDarkP3.indigo10,
+  blue11: RadixColors.indigoDarkP3.indigo11,
+  blue12: RadixColors.indigoDarkP3.indigo12,
+
+  purple1: RadixColors.purpleDarkP3.purple1,
+  purple2: RadixColors.purpleDarkP3.purple2,
+  purple3: RadixColors.purpleDarkP3.purple3,
+  purple4: RadixColors.purpleDarkP3.purple4,
+  purple5: RadixColors.purpleDarkP3.purple5,
+  purple6: RadixColors.purpleDarkP3.purple6,
+  purple7: RadixColors.purpleDarkP3.purple7,
+  purple8: RadixColors.purpleDarkP3.purple8,
+  purple9: RadixColors.purpleDarkP3.purple9,
+  purple10: RadixColors.purpleDarkP3.purple10,
+  purple11: RadixColors.purpleDarkP3.purple11,
+  purple12: RadixColors.purpleDarkP3.purple12,
+
+  pink1: RadixColors.pinkDarkP3.pink1,
+  pink2: RadixColors.pinkDarkP3.pink2,
+  pink3: RadixColors.pinkDarkP3.pink3,
+  pink4: RadixColors.pinkDarkP3.pink4,
+  pink5: RadixColors.pinkDarkP3.pink5,
+  pink6: RadixColors.pinkDarkP3.pink6,
+  pink7: RadixColors.pinkDarkP3.pink7,
+  pink8: RadixColors.pinkDarkP3.pink8,
+  pink9: RadixColors.pinkDarkP3.pink9,
+  pink10: RadixColors.pinkDarkP3.pink10,
+  pink11: RadixColors.pinkDarkP3.pink11,
+  pink12: RadixColors.pinkDarkP3.pink12,
+
+  red1: RadixColors.redDarkP3.red1,
+  red2: RadixColors.redDarkP3.red2,
+  red3: RadixColors.redDarkP3.red3,
+  red4: RadixColors.redDarkP3.red4,
+  red5: RadixColors.redDarkP3.red5,
+  red6: RadixColors.redDarkP3.red6,
+  red7: RadixColors.redDarkP3.red7,
+  red8: RadixColors.redDarkP3.red8,
+  red9: RadixColors.redDarkP3.red9,
+  red10: RadixColors.redDarkP3.red10,
+  red11: RadixColors.redDarkP3.red11,
+  red12: RadixColors.redDarkP3.red12,
+
+  orange1: RadixColors.orangeDarkP3.orange1,
+  orange2: RadixColors.orangeDarkP3.orange2,
+  orange3: RadixColors.orangeDarkP3.orange3,
+  orange4: RadixColors.orangeDarkP3.orange4,
+  orange5: RadixColors.orangeDarkP3.orange5,
+  orange6: RadixColors.orangeDarkP3.orange6,
+  orange7: RadixColors.orangeDarkP3.orange7,
+  orange8: RadixColors.orangeDarkP3.orange8,
+  orange9: RadixColors.orangeDarkP3.orange9,
+  orange10: RadixColors.orangeDarkP3.orange10,
+  orange11: RadixColors.orangeDarkP3.orange11,
+  orange12: RadixColors.orangeDarkP3.orange12,
+
+  gray1: GRAY_SCALE_DARK.gray1,
+  gray2: GRAY_SCALE_DARK.gray2,
+  gray3: GRAY_SCALE_DARK.gray3,
+  gray4: GRAY_SCALE_DARK.gray4,
+  gray5: GRAY_SCALE_DARK.gray5,
+  gray6: GRAY_SCALE_DARK.gray6,
+  gray7: GRAY_SCALE_DARK.gray7,
+  gray8: GRAY_SCALE_DARK.gray8,
+  gray9: GRAY_SCALE_DARK.gray9,
+  gray10: GRAY_SCALE_DARK.gray10,
+  gray11: GRAY_SCALE_DARK.gray11,
+  gray12: GRAY_SCALE_DARK.gray12,
+
+  mauve1: RadixColors.mauveDarkP3.mauve1,
+  mauve2: RadixColors.mauveDarkP3.mauve2,
+  mauve3: RadixColors.mauveDarkP3.mauve3,
+  mauve4: RadixColors.mauveDarkP3.mauve4,
+  mauve5: RadixColors.mauveDarkP3.mauve5,
+  mauve6: RadixColors.mauveDarkP3.mauve6,
+  mauve7: RadixColors.mauveDarkP3.mauve7,
+  mauve8: RadixColors.mauveDarkP3.mauve8,
+  mauve9: RadixColors.mauveDarkP3.mauve9,
+  mauve10: RadixColors.mauveDarkP3.mauve10,
+  mauve11: RadixColors.mauveDarkP3.mauve11,
+  mauve12: RadixColors.mauveDarkP3.mauve12,
+
+  slate1: RadixColors.slateDarkP3.slate1,
+  slate2: RadixColors.slateDarkP3.slate2,
+  slate3: RadixColors.slateDarkP3.slate3,
+  slate4: RadixColors.slateDarkP3.slate4,
+  slate5: RadixColors.slateDarkP3.slate5,
+  slate6: RadixColors.slateDarkP3.slate6,
+  slate7: RadixColors.slateDarkP3.slate7,
+  slate8: RadixColors.slateDarkP3.slate8,
+  slate9: RadixColors.slateDarkP3.slate9,
+  slate10: RadixColors.slateDarkP3.slate10,
+  slate11: RadixColors.slateDarkP3.slate11,
+  slate12: RadixColors.slateDarkP3.slate12,
+
+  sage1: RadixColors.sageDarkP3.sage1,
+  sage2: RadixColors.sageDarkP3.sage2,
+  sage3: RadixColors.sageDarkP3.sage3,
+  sage4: RadixColors.sageDarkP3.sage4,
+  sage5: RadixColors.sageDarkP3.sage5,
+  sage6: RadixColors.sageDarkP3.sage6,
+  sage7: RadixColors.sageDarkP3.sage7,
+  sage8: RadixColors.sageDarkP3.sage8,
+  sage9: RadixColors.sageDarkP3.sage9,
+  sage10: RadixColors.sageDarkP3.sage10,
+  sage11: RadixColors.sageDarkP3.sage11,
+  sage12: RadixColors.sageDarkP3.sage12,
+
+  olive1: RadixColors.oliveDarkP3.olive1,
+  olive2: RadixColors.oliveDarkP3.olive2,
+  olive3: RadixColors.oliveDarkP3.olive3,
+  olive4: RadixColors.oliveDarkP3.olive4,
+  olive5: RadixColors.oliveDarkP3.olive5,
+  olive6: RadixColors.oliveDarkP3.olive6,
+  olive7: RadixColors.oliveDarkP3.olive7,
+  olive8: RadixColors.oliveDarkP3.olive8,
+  olive9: RadixColors.oliveDarkP3.olive9,
+  olive10: RadixColors.oliveDarkP3.olive10,
+  olive11: RadixColors.oliveDarkP3.olive11,
+  olive12: RadixColors.oliveDarkP3.olive12,
+
+  sand1: RadixColors.sandDarkP3.sand1,
+  sand2: RadixColors.sandDarkP3.sand2,
+  sand3: RadixColors.sandDarkP3.sand3,
+  sand4: RadixColors.sandDarkP3.sand4,
+  sand5: RadixColors.sandDarkP3.sand5,
+  sand6: RadixColors.sandDarkP3.sand6,
+  sand7: RadixColors.sandDarkP3.sand7,
+  sand8: RadixColors.sandDarkP3.sand8,
+  sand9: RadixColors.sandDarkP3.sand9,
+  sand10: RadixColors.sandDarkP3.sand10,
+  sand11: RadixColors.sandDarkP3.sand11,
+  sand12: RadixColors.sandDarkP3.sand12,
+
+  tomato1: RadixColors.tomatoDarkP3.tomato1,
+  tomato2: RadixColors.tomatoDarkP3.tomato2,
+  tomato3: RadixColors.tomatoDarkP3.tomato3,
+  tomato4: RadixColors.tomatoDarkP3.tomato4,
+  tomato5: RadixColors.tomatoDarkP3.tomato5,
+  tomato6: RadixColors.tomatoDarkP3.tomato6,
+  tomato7: RadixColors.tomatoDarkP3.tomato7,
+  tomato8: RadixColors.tomatoDarkP3.tomato8,
+  tomato9: RadixColors.tomatoDarkP3.tomato9,
+  tomato10: RadixColors.tomatoDarkP3.tomato10,
+  tomato11: RadixColors.tomatoDarkP3.tomato11,
+  tomato12: RadixColors.tomatoDarkP3.tomato12,
+
+  ruby1: RadixColors.rubyDarkP3.ruby1,
+  ruby2: RadixColors.rubyDarkP3.ruby2,
+  ruby3: RadixColors.rubyDarkP3.ruby3,
+  ruby4: RadixColors.rubyDarkP3.ruby4,
+  ruby5: RadixColors.rubyDarkP3.ruby5,
+  ruby6: RadixColors.rubyDarkP3.ruby6,
+  ruby7: RadixColors.rubyDarkP3.ruby7,
+  ruby8: RadixColors.rubyDarkP3.ruby8,
+  ruby9: RadixColors.rubyDarkP3.ruby9,
+  ruby10: RadixColors.rubyDarkP3.ruby10,
+  ruby11: RadixColors.rubyDarkP3.ruby11,
+  ruby12: RadixColors.rubyDarkP3.ruby12,
+
+  crimson1: RadixColors.crimsonDarkP3.crimson1,
+  crimson2: RadixColors.crimsonDarkP3.crimson2,
+  crimson3: RadixColors.crimsonDarkP3.crimson3,
+  crimson4: RadixColors.crimsonDarkP3.crimson4,
+  crimson5: RadixColors.crimsonDarkP3.crimson5,
+  crimson6: RadixColors.crimsonDarkP3.crimson6,
+  crimson7: RadixColors.crimsonDarkP3.crimson7,
+  crimson8: RadixColors.crimsonDarkP3.crimson8,
+  crimson9: RadixColors.crimsonDarkP3.crimson9,
+  crimson10: RadixColors.crimsonDarkP3.crimson10,
+  crimson11: RadixColors.crimsonDarkP3.crimson11,
+  crimson12: RadixColors.crimsonDarkP3.crimson12,
+
+  plum1: RadixColors.plumDarkP3.plum1,
+  plum2: RadixColors.plumDarkP3.plum2,
+  plum3: RadixColors.plumDarkP3.plum3,
+  plum4: RadixColors.plumDarkP3.plum4,
+  plum5: RadixColors.plumDarkP3.plum5,
+  plum6: RadixColors.plumDarkP3.plum6,
+  plum7: RadixColors.plumDarkP3.plum7,
+  plum8: RadixColors.plumDarkP3.plum8,
+  plum9: RadixColors.plumDarkP3.plum9,
+  plum10: RadixColors.plumDarkP3.plum10,
+  plum11: RadixColors.plumDarkP3.plum11,
+  plum12: RadixColors.plumDarkP3.plum12,
+
+  violet1: RadixColors.violetDarkP3.violet1,
+  violet2: RadixColors.violetDarkP3.violet2,
+  violet3: RadixColors.violetDarkP3.violet3,
+  violet4: RadixColors.violetDarkP3.violet4,
+  violet5: RadixColors.violetDarkP3.violet5,
+  violet6: RadixColors.violetDarkP3.violet6,
+  violet7: RadixColors.violetDarkP3.violet7,
+  violet8: RadixColors.violetDarkP3.violet8,
+  violet9: RadixColors.violetDarkP3.violet9,
+  violet10: RadixColors.violetDarkP3.violet10,
+  violet11: RadixColors.violetDarkP3.violet11,
+  violet12: RadixColors.violetDarkP3.violet12,
+
+  iris1: RadixColors.irisDarkP3.iris1,
+  iris2: RadixColors.irisDarkP3.iris2,
+  iris3: RadixColors.irisDarkP3.iris3,
+  iris4: RadixColors.irisDarkP3.iris4,
+  iris5: RadixColors.irisDarkP3.iris5,
+  iris6: RadixColors.irisDarkP3.iris6,
+  iris7: RadixColors.irisDarkP3.iris7,
+  iris8: RadixColors.irisDarkP3.iris8,
+  iris9: RadixColors.irisDarkP3.iris9,
+  iris10: RadixColors.irisDarkP3.iris10,
+  iris11: RadixColors.irisDarkP3.iris11,
+  iris12: RadixColors.irisDarkP3.iris12,
+
+  cyan1: RadixColors.cyanDarkP3.cyan1,
+  cyan2: RadixColors.cyanDarkP3.cyan2,
+  cyan3: RadixColors.cyanDarkP3.cyan3,
+  cyan4: RadixColors.cyanDarkP3.cyan4,
+  cyan5: RadixColors.cyanDarkP3.cyan5,
+  cyan6: RadixColors.cyanDarkP3.cyan6,
+  cyan7: RadixColors.cyanDarkP3.cyan7,
+  cyan8: RadixColors.cyanDarkP3.cyan8,
+  cyan9: RadixColors.cyanDarkP3.cyan9,
+  cyan10: RadixColors.cyanDarkP3.cyan10,
+  cyan11: RadixColors.cyanDarkP3.cyan11,
+  cyan12: RadixColors.cyanDarkP3.cyan12,
+
+  jade1: RadixColors.jadeDarkP3.jade1,
+  jade2: RadixColors.jadeDarkP3.jade2,
+  jade3: RadixColors.jadeDarkP3.jade3,
+  jade4: RadixColors.jadeDarkP3.jade4,
+  jade5: RadixColors.jadeDarkP3.jade5,
+  jade6: RadixColors.jadeDarkP3.jade6,
+  jade7: RadixColors.jadeDarkP3.jade7,
+  jade8: RadixColors.jadeDarkP3.jade8,
+  jade9: RadixColors.jadeDarkP3.jade9,
+  jade10: RadixColors.jadeDarkP3.jade10,
+  jade11: RadixColors.jadeDarkP3.jade11,
+  jade12: RadixColors.jadeDarkP3.jade12,
+
+  grass1: RadixColors.grassDarkP3.grass1,
+  grass2: RadixColors.grassDarkP3.grass2,
+  grass3: RadixColors.grassDarkP3.grass3,
+  grass4: RadixColors.grassDarkP3.grass4,
+  grass5: RadixColors.grassDarkP3.grass5,
+  grass6: RadixColors.grassDarkP3.grass6,
+  grass7: RadixColors.grassDarkP3.grass7,
+  grass8: RadixColors.grassDarkP3.grass8,
+  grass9: RadixColors.grassDarkP3.grass9,
+  grass10: RadixColors.grassDarkP3.grass10,
+  grass11: RadixColors.grassDarkP3.grass11,
+  grass12: RadixColors.grassDarkP3.grass12,
+
+  mint1: RadixColors.mintDarkP3.mint1,
+  mint2: RadixColors.mintDarkP3.mint2,
+  mint3: RadixColors.mintDarkP3.mint3,
+  mint4: RadixColors.mintDarkP3.mint4,
+  mint5: RadixColors.mintDarkP3.mint5,
+  mint6: RadixColors.mintDarkP3.mint6,
+  mint7: RadixColors.mintDarkP3.mint7,
+  mint8: RadixColors.mintDarkP3.mint8,
+  mint9: RadixColors.mintDarkP3.mint9,
+  mint10: RadixColors.mintDarkP3.mint10,
+  mint11: RadixColors.mintDarkP3.mint11,
+  mint12: RadixColors.mintDarkP3.mint12,
+
+  lime1: RadixColors.limeDarkP3.lime1,
+  lime2: RadixColors.limeDarkP3.lime2,
+  lime3: RadixColors.limeDarkP3.lime3,
+  lime4: RadixColors.limeDarkP3.lime4,
+  lime5: RadixColors.limeDarkP3.lime5,
+  lime6: RadixColors.limeDarkP3.lime6,
+  lime7: RadixColors.limeDarkP3.lime7,
+  lime8: RadixColors.limeDarkP3.lime8,
+  lime9: RadixColors.limeDarkP3.lime9,
+  lime10: RadixColors.limeDarkP3.lime10,
+  lime11: RadixColors.limeDarkP3.lime11,
+  lime12: RadixColors.limeDarkP3.lime12,
+
+  bronze1: RadixColors.bronzeDarkP3.bronze1,
+  bronze2: RadixColors.bronzeDarkP3.bronze2,
+  bronze3: RadixColors.bronzeDarkP3.bronze3,
+  bronze4: RadixColors.bronzeDarkP3.bronze4,
+  bronze5: RadixColors.bronzeDarkP3.bronze5,
+  bronze6: RadixColors.bronzeDarkP3.bronze6,
+  bronze7: RadixColors.bronzeDarkP3.bronze7,
+  bronze8: RadixColors.bronzeDarkP3.bronze8,
+  bronze9: RadixColors.bronzeDarkP3.bronze9,
+  bronze10: RadixColors.bronzeDarkP3.bronze10,
+  bronze11: RadixColors.bronzeDarkP3.bronze11,
+  bronze12: RadixColors.bronzeDarkP3.bronze12,
+
+  gold1: RadixColors.goldDarkP3.gold1,
+  gold2: RadixColors.goldDarkP3.gold2,
+  gold3: RadixColors.goldDarkP3.gold3,
+  gold4: RadixColors.goldDarkP3.gold4,
+  gold5: RadixColors.goldDarkP3.gold5,
+  gold6: RadixColors.goldDarkP3.gold6,
+  gold7: RadixColors.goldDarkP3.gold7,
+  gold8: RadixColors.goldDarkP3.gold8,
+  gold9: RadixColors.goldDarkP3.gold9,
+  gold10: RadixColors.goldDarkP3.gold10,
+  gold11: RadixColors.goldDarkP3.gold11,
+  gold12: RadixColors.goldDarkP3.gold12,
+
+  brown1: RadixColors.brownDarkP3.brown1,
+  brown2: RadixColors.brownDarkP3.brown2,
+  brown3: RadixColors.brownDarkP3.brown3,
+  brown4: RadixColors.brownDarkP3.brown4,
+  brown5: RadixColors.brownDarkP3.brown5,
+  brown6: RadixColors.brownDarkP3.brown6,
+  brown7: RadixColors.brownDarkP3.brown7,
+  brown8: RadixColors.brownDarkP3.brown8,
+  brown9: RadixColors.brownDarkP3.brown9,
+  brown10: RadixColors.brownDarkP3.brown10,
+  brown11: RadixColors.brownDarkP3.brown11,
+  brown12: RadixColors.brownDarkP3.brown12,
+
+  amber1: RadixColors.amberDarkP3.amber1,
+  amber2: RadixColors.amberDarkP3.amber2,
+  amber3: RadixColors.amberDarkP3.amber3,
+  amber4: RadixColors.amberDarkP3.amber4,
+  amber5: RadixColors.amberDarkP3.amber5,
+  amber6: RadixColors.amberDarkP3.amber6,
+  amber7: RadixColors.amberDarkP3.amber7,
+  amber8: RadixColors.amberDarkP3.amber8,
+  amber9: RadixColors.amberDarkP3.amber9,
+  amber10: RadixColors.amberDarkP3.amber10,
+  amber11: RadixColors.amberDarkP3.amber11,
+  amber12: RadixColors.amberDarkP3.amber12,
+};

packages/twenty-new-ui/src/theme/constants/SecondaryColorsLight.ts

@@ -0,0 +1,394 @@
+import * as RadixColors from '@radix-ui/colors';
+import { GRAY_SCALE_LIGHT } from './GrayScaleLight';
+
+export const SECONDARY_COLORS_LIGHT = {
+  yellow1: RadixColors.yellowP3.yellow1,
+  yellow2: RadixColors.yellowP3.yellow2,
+  yellow3: RadixColors.yellowP3.yellow3,
+  yellow4: RadixColors.yellowP3.yellow4,
+  yellow5: RadixColors.yellowP3.yellow5,
+  yellow6: RadixColors.yellowP3.yellow6,
+  yellow7: RadixColors.yellowP3.yellow7,
+  yellow8: RadixColors.yellowP3.yellow8,
+  yellow9: RadixColors.yellowP3.yellow9,
+  yellow10: RadixColors.yellowP3.yellow10,
+  yellow11: RadixColors.yellowP3.yellow11,
+  yellow12: RadixColors.yellowP3.yellow12,
+
+  green1: RadixColors.greenP3.green1,
+  green2: RadixColors.greenP3.green2,
+  green3: RadixColors.greenP3.green3,
+  green4: RadixColors.greenP3.green4,
+  green5: RadixColors.greenP3.green5,
+  green6: RadixColors.greenP3.green6,
+  green7: RadixColors.greenP3.green7,
+  green8: RadixColors.greenP3.green8,
+  green9: RadixColors.greenP3.green9,
+  green10: RadixColors.greenP3.green10,
+  green11: RadixColors.greenP3.green11,
+  green12: RadixColors.greenP3.green12,
+
+  turquoise1: RadixColors.tealP3.teal1,
+  turquoise2: RadixColors.tealP3.teal2,
+  turquoise3: RadixColors.tealP3.teal3,
+  turquoise4: RadixColors.tealP3.teal4,
+  turquoise5: RadixColors.tealP3.teal5,
+  turquoise6: RadixColors.tealP3.teal6,
+  turquoise7: RadixColors.tealP3.teal7,
+  turquoise8: RadixColors.tealP3.teal8,
+  turquoise9: RadixColors.tealP3.teal9,
+  turquoise10: RadixColors.tealP3.teal10,
+  turquoise11: RadixColors.tealP3.teal11,
+  turquoise12: RadixColors.tealP3.teal12,
+
+  sky1: RadixColors.skyP3.sky1,
+  sky2: RadixColors.skyP3.sky2,
+  sky3: RadixColors.skyP3.sky3,
+  sky4: RadixColors.skyP3.sky4,
+  sky5: RadixColors.skyP3.sky5,
+  sky6: RadixColors.skyP3.sky6,
+  sky7: RadixColors.skyP3.sky7,
+  sky8: RadixColors.skyP3.sky8,
+  sky9: RadixColors.skyP3.sky9,
+  sky10: RadixColors.skyP3.sky10,
+  sky11: RadixColors.skyP3.sky11,
+  sky12: RadixColors.skyP3.sky12,
+
+  blue1: RadixColors.indigoP3.indigo1,
+  blue2: RadixColors.indigoP3.indigo2,
+  blue3: RadixColors.indigoP3.indigo3,
+  blue4: RadixColors.indigoP3.indigo4,
+  blue5: RadixColors.indigoP3.indigo5,
+  blue6: RadixColors.indigoP3.indigo6,
+  blue7: RadixColors.indigoP3.indigo7,
+  blue8: RadixColors.indigoP3.indigo8,
+  blue9: RadixColors.indigoP3.indigo9,
+  blue10: RadixColors.indigoP3.indigo10,
+  blue11: RadixColors.indigoP3.indigo11,
+  blue12: RadixColors.indigoP3.indigo12,
+
+  purple1: RadixColors.purpleP3.purple1,
+  purple2: RadixColors.purpleP3.purple2,
+  purple3: RadixColors.purpleP3.purple3,
+  purple4: RadixColors.purpleP3.purple4,
+  purple5: RadixColors.purpleP3.purple5,
+  purple6: RadixColors.purpleP3.purple6,
+  purple7: RadixColors.purpleP3.purple7,
+  purple8: RadixColors.purpleP3.purple8,
+  purple9: RadixColors.purpleP3.purple9,
+  purple10: RadixColors.purpleP3.purple10,
+  purple11: RadixColors.purpleP3.purple11,
+  purple12: RadixColors.purpleP3.purple12,
+
+  pink1: RadixColors.pinkP3.pink1,
+  pink2: RadixColors.pinkP3.pink2,
+  pink3: RadixColors.pinkP3.pink3,
+  pink4: RadixColors.pinkP3.pink4,
+  pink5: RadixColors.pinkP3.pink5,
+  pink6: RadixColors.pinkP3.pink6,
+  pink7: RadixColors.pinkP3.pink7,
+  pink8: RadixColors.pinkP3.pink8,
+  pink9: RadixColors.pinkP3.pink9,
+  pink10: RadixColors.pinkP3.pink10,
+  pink11: RadixColors.pinkP3.pink11,
+  pink12: RadixColors.pinkP3.pink12,
+
+  red1: RadixColors.redP3.red1,
+  red2: RadixColors.redP3.red2,
+  red3: RadixColors.redP3.red3,
+  red4: RadixColors.redP3.red4,
+  red5: RadixColors.redP3.red5,
+  red6: RadixColors.redP3.red6,
+  red7: RadixColors.redP3.red7,
+  red8: RadixColors.redP3.red8,
+  red9: RadixColors.redP3.red9,
+  red10: RadixColors.redP3.red10,
+  red11: RadixColors.redP3.red11,
+  red12: RadixColors.redP3.red12,
+
+  orange1: RadixColors.orangeP3.orange1,
+  orange2: RadixColors.orangeP3.orange2,
+  orange3: RadixColors.orangeP3.orange3,
+  orange4: RadixColors.orangeP3.orange4,
+  orange5: RadixColors.orangeP3.orange5,
+  orange6: RadixColors.orangeP3.orange6,
+  orange7: RadixColors.orangeP3.orange7,
+  orange8: RadixColors.orangeP3.orange8,
+  orange9: RadixColors.orangeP3.orange9,
+  orange10: RadixColors.orangeP3.orange10,
+  orange11: RadixColors.orangeP3.orange11,
+  orange12: RadixColors.orangeP3.orange12,
+
+  gray1: GRAY_SCALE_LIGHT.gray1,
+  gray2: GRAY_SCALE_LIGHT.gray2,
+  gray3: GRAY_SCALE_LIGHT.gray3,
+  gray4: GRAY_SCALE_LIGHT.gray4,
+  gray5: GRAY_SCALE_LIGHT.gray5,
+  gray6: GRAY_SCALE_LIGHT.gray6,
+  gray7: GRAY_SCALE_LIGHT.gray7,
+  gray8: GRAY_SCALE_LIGHT.gray8,
+  gray9: GRAY_SCALE_LIGHT.gray9,
+  gray10: GRAY_SCALE_LIGHT.gray10,
+  gray11: GRAY_SCALE_LIGHT.gray11,
+  gray12: GRAY_SCALE_LIGHT.gray12,
+
+  mauve1: RadixColors.mauveP3.mauve1,
+  mauve2: RadixColors.mauveP3.mauve2,
+  mauve3: RadixColors.mauveP3.mauve3,
+  mauve4: RadixColors.mauveP3.mauve4,
+  mauve5: RadixColors.mauveP3.mauve5,
+  mauve6: RadixColors.mauveP3.mauve6,
+  mauve7: RadixColors.mauveP3.mauve7,
+  mauve8: RadixColors.mauveP3.mauve8,
+  mauve9: RadixColors.mauveP3.mauve9,
+  mauve10: RadixColors.mauveP3.mauve10,
+  mauve11: RadixColors.mauveP3.mauve11,
+  mauve12: RadixColors.mauveP3.mauve12,
+
+  slate1: RadixColors.slateP3.slate1,
+  slate2: RadixColors.slateP3.slate2,
+  slate3: RadixColors.slateP3.slate3,
+  slate4: RadixColors.slateP3.slate4,
+  slate5: RadixColors.slateP3.slate5,
+  slate6: RadixColors.slateP3.slate6,
+  slate7: RadixColors.slateP3.slate7,
+  slate8: RadixColors.slateP3.slate8,
+  slate9: RadixColors.slateP3.slate9,
+  slate10: RadixColors.slateP3.slate10,
+  slate11: RadixColors.slateP3.slate11,
+  slate12: RadixColors.slateP3.slate12,
+
+  sage1: RadixColors.sageP3.sage1,
+  sage2: RadixColors.sageP3.sage2,
+  sage3: RadixColors.sageP3.sage3,
+  sage4: RadixColors.sageP3.sage4,
+  sage5: RadixColors.sageP3.sage5,
+  sage6: RadixColors.sageP3.sage6,
+  sage7: RadixColors.sageP3.sage7,
+  sage8: RadixColors.sageP3.sage8,
+  sage9: RadixColors.sageP3.sage9,
+  sage10: RadixColors.sageP3.sage10,
+  sage11: RadixColors.sageP3.sage11,
+  sage12: RadixColors.sageP3.sage12,
+
+  olive1: RadixColors.oliveP3.olive1,
+  olive2: RadixColors.oliveP3.olive2,
+  olive3: RadixColors.oliveP3.olive3,
+  olive4: RadixColors.oliveP3.olive4,
+  olive5: RadixColors.oliveP3.olive5,
+  olive6: RadixColors.oliveP3.olive6,
+  olive7: RadixColors.oliveP3.olive7,
+  olive8: RadixColors.oliveP3.olive8,
+  olive9: RadixColors.oliveP3.olive9,
+  olive10: RadixColors.oliveP3.olive10,
+  olive11: RadixColors.oliveP3.olive11,
+  olive12: RadixColors.oliveP3.olive12,
+
+  sand1: RadixColors.sandP3.sand1,
+  sand2: RadixColors.sandP3.sand2,
+  sand3: RadixColors.sandP3.sand3,
+  sand4: RadixColors.sandP3.sand4,
+  sand5: RadixColors.sandP3.sand5,
+  sand6: RadixColors.sandP3.sand6,
+  sand7: RadixColors.sandP3.sand7,
+  sand8: RadixColors.sandP3.sand8,
+  sand9: RadixColors.sandP3.sand9,
+  sand10: RadixColors.sandP3.sand10,
+  sand11: RadixColors.sandP3.sand11,
+  sand12: RadixColors.sandP3.sand12,
+
+  tomato1: RadixColors.tomatoP3.tomato1,
+  tomato2: RadixColors.tomatoP3.tomato2,
+  tomato3: RadixColors.tomatoP3.tomato3,
+  tomato4: RadixColors.tomatoP3.tomato4,
+  tomato5: RadixColors.tomatoP3.tomato5,
+  tomato6: RadixColors.tomatoP3.tomato6,
+  tomato7: RadixColors.tomatoP3.tomato7,
+  tomato8: RadixColors.tomatoP3.tomato8,
+  tomato9: RadixColors.tomatoP3.tomato9,
+  tomato10: RadixColors.tomatoP3.tomato10,
+  tomato11: RadixColors.tomatoP3.tomato11,
+  tomato12: RadixColors.tomatoP3.tomato12,
+
+  ruby1: RadixColors.rubyP3.ruby1,
+  ruby2: RadixColors.rubyP3.ruby2,
+  ruby3: RadixColors.rubyP3.ruby3,
+  ruby4: RadixColors.rubyP3.ruby4,
+  ruby5: RadixColors.rubyP3.ruby5,
+  ruby6: RadixColors.rubyP3.ruby6,
+  ruby7: RadixColors.rubyP3.ruby7,
+  ruby8: RadixColors.rubyP3.ruby8,
+  ruby9: RadixColors.rubyP3.ruby9,
+  ruby10: RadixColors.rubyP3.ruby10,
+  ruby11: RadixColors.rubyP3.ruby11,
+  ruby12: RadixColors.rubyP3.ruby12,
+
+  crimson1: RadixColors.crimsonP3.crimson1,
+  crimson2: RadixColors.crimsonP3.crimson2,
+  crimson3: RadixColors.crimsonP3.crimson3,
+  crimson4: RadixColors.crimsonP3.crimson4,
+  crimson5: RadixColors.crimsonP3.crimson5,
+  crimson6: RadixColors.crimsonP3.crimson6,
+  crimson7: RadixColors.crimsonP3.crimson7,
+  crimson8: RadixColors.crimsonP3.crimson8,
+  crimson9: RadixColors.crimsonP3.crimson9,
+  crimson10: RadixColors.crimsonP3.crimson10,
+  crimson11: RadixColors.crimsonP3.crimson11,
+  crimson12: RadixColors.crimsonP3.crimson12,
+
+  plum1: RadixColors.plumP3.plum1,
+  plum2: RadixColors.plumP3.plum2,
+  plum3: RadixColors.plumP3.plum3,
+  plum4: RadixColors.plumP3.plum4,
+  plum5: RadixColors.plumP3.plum5,
+  plum6: RadixColors.plumP3.plum6,
+  plum7: RadixColors.plumP3.plum7,
+  plum8: RadixColors.plumP3.plum8,
+  plum9: RadixColors.plumP3.plum9,
+  plum10: RadixColors.plumP3.plum10,
+  plum11: RadixColors.plumP3.plum11,
+  plum12: RadixColors.plumP3.plum12,
+
+  violet1: RadixColors.violetP3.violet1,
+  violet2: RadixColors.violetP3.violet2,
+  violet3: RadixColors.violetP3.violet3,
+  violet4: RadixColors.violetP3.violet4,
+  violet5: RadixColors.violetP3.violet5,
+  violet6: RadixColors.violetP3.violet6,
+  violet7: RadixColors.violetP3.violet7,
+  violet8: RadixColors.violetP3.violet8,
+  violet9: RadixColors.violetP3.violet9,
+  violet10: RadixColors.violetP3.violet10,
+  violet11: RadixColors.violetP3.violet11,
+  violet12: RadixColors.violetP3.violet12,
+
+  iris1: RadixColors.irisP3.iris1,
+  iris2: RadixColors.irisP3.iris2,
+  iris3: RadixColors.irisP3.iris3,
+  iris4: RadixColors.irisP3.iris4,
+  iris5: RadixColors.irisP3.iris5,
+  iris6: RadixColors.irisP3.iris6,
+  iris7: RadixColors.irisP3.iris7,
+  iris8: RadixColors.irisP3.iris8,
+  iris9: RadixColors.irisP3.iris9,
+  iris10: RadixColors.irisP3.iris10,
+  iris11: RadixColors.irisP3.iris11,
+  iris12: RadixColors.irisP3.iris12,
+
+  cyan1: RadixColors.cyanP3.cyan1,
+  cyan2: RadixColors.cyanP3.cyan2,
+  cyan3: RadixColors.cyanP3.cyan3,
+  cyan4: RadixColors.cyanP3.cyan4,
+  cyan5: RadixColors.cyanP3.cyan5,
+  cyan6: RadixColors.cyanP3.cyan6,
+  cyan7: RadixColors.cyanP3.cyan7,
+  cyan8: RadixColors.cyanP3.cyan8,
+  cyan9: RadixColors.cyanP3.cyan9,
+  cyan10: RadixColors.cyanP3.cyan10,
+  cyan11: RadixColors.cyanP3.cyan11,
+  cyan12: RadixColors.cyanP3.cyan12,
+
+  jade1: RadixColors.jadeP3.jade1,
+  jade2: RadixColors.jadeP3.jade2,
+  jade3: RadixColors.jadeP3.jade3,
+  jade4: RadixColors.jadeP3.jade4,
+  jade5: RadixColors.jadeP3.jade5,
+  jade6: RadixColors.jadeP3.jade6,
+  jade7: RadixColors.jadeP3.jade7,
+  jade8: RadixColors.jadeP3.jade8,
+  jade9: RadixColors.jadeP3.jade9,
+  jade10: RadixColors.jadeP3.jade10,
+  jade11: RadixColors.jadeP3.jade11,
+  jade12: RadixColors.jadeP3.jade12,
+
+  grass1: RadixColors.grassP3.grass1,
+  grass2: RadixColors.grassP3.grass2,
+  grass3: RadixColors.grassP3.grass3,
+  grass4: RadixColors.grassP3.grass4,
+  grass5: RadixColors.grassP3.grass5,
+  grass6: RadixColors.grassP3.grass6,
+  grass7: RadixColors.grassP3.grass7,
+  grass8: RadixColors.grassP3.grass8,
+  grass9: RadixColors.grassP3.grass9,
+  grass10: RadixColors.grassP3.grass10,
+  grass11: RadixColors.grassP3.grass11,
+  grass12: RadixColors.grassP3.grass12,
+
+  mint1: RadixColors.mintP3.mint1,
+  mint2: RadixColors.mintP3.mint2,
+  mint3: RadixColors.mintP3.mint3,
+  mint4: RadixColors.mintP3.mint4,
+  mint5: RadixColors.mintP3.mint5,
+  mint6: RadixColors.mintP3.mint6,
+  mint7: RadixColors.mintP3.mint7,
+  mint8: RadixColors.mintP3.mint8,
+  mint9: RadixColors.mintP3.mint9,
+  mint10: RadixColors.mintP3.mint10,
+  mint11: RadixColors.mintP3.mint11,
+  mint12: RadixColors.mintP3.mint12,
+
+  lime1: RadixColors.limeP3.lime1,
+  lime2: RadixColors.limeP3.lime2,
+  lime3: RadixColors.limeP3.lime3,
+  lime4: RadixColors.limeP3.lime4,
+  lime5: RadixColors.limeP3.lime5,
+  lime6: RadixColors.limeP3.lime6,
+  lime7: RadixColors.limeP3.lime7,
+  lime8: RadixColors.limeP3.lime8,
+  lime9: RadixColors.limeP3.lime9,
+  lime10: RadixColors.limeP3.lime10,
+  lime11: RadixColors.limeP3.lime11,
+  lime12: RadixColors.limeP3.lime12,
+
+  bronze1: RadixColors.bronzeP3.bronze1,
+  bronze2: RadixColors.bronzeP3.bronze2,
+  bronze3: RadixColors.bronzeP3.bronze3,
+  bronze4: RadixColors.bronzeP3.bronze4,
+  bronze5: RadixColors.bronzeP3.bronze5,
+  bronze6: RadixColors.bronzeP3.bronze6,
+  bronze7: RadixColors.bronzeP3.bronze7,
+  bronze8: RadixColors.bronzeP3.bronze8,
+  bronze9: RadixColors.bronzeP3.bronze9,
+  bronze10: RadixColors.bronzeP3.bronze10,
+  bronze11: RadixColors.bronzeP3.bronze11,
+  bronze12: RadixColors.bronzeP3.bronze12,
+
+  gold1: RadixColors.goldP3.gold1,
+  gold2: RadixColors.goldP3.gold2,
+  gold3: RadixColors.goldP3.gold3,
+  gold4: RadixColors.goldP3.gold4,
+  gold5: RadixColors.goldP3.gold5,
+  gold6: RadixColors.goldP3.gold6,
+  gold7: RadixColors.goldP3.gold7,
+  gold8: RadixColors.goldP3.gold8,
+  gold9: RadixColors.goldP3.gold9,
+  gold10: RadixColors.goldP3.gold10,
+  gold11: RadixColors.goldP3.gold11,
+  gold12: RadixColors.goldP3.gold12,
+
+  brown1: RadixColors.brownP3.brown1,
+  brown2: RadixColors.brownP3.brown2,
+  brown3: RadixColors.brownP3.brown3,
+  brown4: RadixColors.brownP3.brown4,
+  brown5: RadixColors.brownP3.brown5,
+  brown6: RadixColors.brownP3.brown6,
+  brown7: RadixColors.brownP3.brown7,
+  brown8: RadixColors.brownP3.brown8,
+  brown9: RadixColors.brownP3.brown9,
+  brown10: RadixColors.brownP3.brown10,
+  brown11: RadixColors.brownP3.brown11,
+  brown12: RadixColors.brownP3.brown12,
+
+  amber1: RadixColors.amberP3.amber1,
+  amber2: RadixColors.amberP3.amber2,
+  amber3: RadixColors.amberP3.amber3,
+  amber4: RadixColors.amberP3.amber4,
+  amber5: RadixColors.amberP3.amber5,
+  amber6: RadixColors.amberP3.amber6,
+  amber7: RadixColors.amberP3.amber7,
+  amber8: RadixColors.amberP3.amber8,
+  amber9: RadixColors.amberP3.amber9,
+  amber10: RadixColors.amberP3.amber10,
+  amber11: RadixColors.amberP3.amber11,
+  amber12: RadixColors.amberP3.amber12,
+};

packages/twenty-new-ui/src/theme/constants/SnackBarDark.ts

@@ -0,0 +1,26 @@
+import { BACKGROUND_DARK } from '@new-ui/theme/constants/BackgroundDark';
+import { FONT_DARK } from '@new-ui/theme/constants/FontDark';
+import { MAIN_COLORS_DARK } from '@new-ui/theme/constants/MainColorsDark';
+
+export const SNACK_BAR_DARK = {
+  success: {
+    color: MAIN_COLORS_DARK.turquoise,
+    backgroundColor: BACKGROUND_DARK.transparent.success,
+  },
+  error: {
+    color: MAIN_COLORS_DARK.red,
+    backgroundColor: BACKGROUND_DARK.transparent.danger,
+  },
+  warning: {
+    color: MAIN_COLORS_DARK.orange,
+    backgroundColor: BACKGROUND_DARK.transparent.orange,
+  },
+  info: {
+    color: MAIN_COLORS_DARK.blue,
+    backgroundColor: BACKGROUND_DARK.transparent.blue,
+  },
+  default: {
+    color: FONT_DARK.color.primary,
+    backgroundColor: BACKGROUND_DARK.transparent.light,
+  },
+};

packages/twenty-new-ui/src/theme/constants/SnackBarLight.ts

@@ -0,0 +1,26 @@
+import { BACKGROUND_LIGHT } from '@new-ui/theme/constants/BackgroundLight';
+import { FONT_LIGHT } from '@new-ui/theme/constants/FontLight';
+import { MAIN_COLORS_LIGHT } from '@new-ui/theme/constants/MainColorsLight';
+
+export const SNACK_BAR_LIGHT = {
+  success: {
+    color: MAIN_COLORS_LIGHT.turquoise,
+    backgroundColor: BACKGROUND_LIGHT.transparent.success,
+  },
+  error: {
+    color: MAIN_COLORS_LIGHT.red,
+    backgroundColor: BACKGROUND_LIGHT.transparent.danger,
+  },
+  warning: {
+    color: MAIN_COLORS_LIGHT.orange,
+    backgroundColor: BACKGROUND_LIGHT.transparent.orange,
+  },
+  info: {
+    color: MAIN_COLORS_LIGHT.blue,
+    backgroundColor: BACKGROUND_LIGHT.transparent.blue,
+  },
+  default: {
+    color: FONT_LIGHT.color.primary,
+    backgroundColor: BACKGROUND_LIGHT.transparent.light,
+  },
+};

packages/twenty-new-ui/src/theme/constants/TagDark.ts

@@ -0,0 +1,68 @@
+import { COLOR_DARK } from '@new-ui/theme/constants/ColorsDark';
+
+export const TAG_DARK = {
+  text: {
+    gray: COLOR_DARK.gray11,
+    mauve: COLOR_DARK.mauve11,
+    slate: COLOR_DARK.slate11,
+    sage: COLOR_DARK.sage11,
+    olive: COLOR_DARK.olive11,
+    sand: COLOR_DARK.sand11,
+    tomato: COLOR_DARK.tomato11,
+    red: COLOR_DARK.red11,
+    ruby: COLOR_DARK.ruby11,
+    crimson: COLOR_DARK.crimson11,
+    pink: COLOR_DARK.pink11,
+    plum: COLOR_DARK.plum11,
+    purple: COLOR_DARK.purple11,
+    violet: COLOR_DARK.violet11,
+    iris: COLOR_DARK.iris11,
+    cyan: COLOR_DARK.cyan11,
+    turquoise: COLOR_DARK.turquoise11,
+    sky: COLOR_DARK.sky11,
+    blue: COLOR_DARK.blue11,
+    jade: COLOR_DARK.jade11,
+    green: COLOR_DARK.green11,
+    grass: COLOR_DARK.grass11,
+    mint: COLOR_DARK.mint11,
+    lime: COLOR_DARK.lime11,
+    bronze: COLOR_DARK.bronze11,
+    gold: COLOR_DARK.gold11,
+    brown: COLOR_DARK.brown11,
+    orange: COLOR_DARK.orange11,
+    amber: COLOR_DARK.amber11,
+    yellow: COLOR_DARK.yellow11,
+  },
+  background: {
+    gray: COLOR_DARK.gray3,
+    mauve: COLOR_DARK.mauve3,
+    slate: COLOR_DARK.slate3,
+    sage: COLOR_DARK.sage3,
+    olive: COLOR_DARK.olive3,
+    sand: COLOR_DARK.sand3,
+    tomato: COLOR_DARK.tomato3,
+    red: COLOR_DARK.red3,
+    ruby: COLOR_DARK.ruby3,
+    crimson: COLOR_DARK.crimson3,
+    pink: COLOR_DARK.pink3,
+    plum: COLOR_DARK.plum3,
+    purple: COLOR_DARK.purple3,
+    violet: COLOR_DARK.violet3,
+    iris: COLOR_DARK.iris3,
+    cyan: COLOR_DARK.cyan3,
+    turquoise: COLOR_DARK.turquoise3,
+    sky: COLOR_DARK.sky3,
+    blue: COLOR_DARK.blue3,
+    jade: COLOR_DARK.jade3,
+    green: COLOR_DARK.green3,
+    grass: COLOR_DARK.grass3,
+    mint: COLOR_DARK.mint3,
+    lime: COLOR_DARK.lime3,
+    bronze: COLOR_DARK.bronze3,
+    gold: COLOR_DARK.gold3,
+    brown: COLOR_DARK.brown3,
+    orange: COLOR_DARK.orange3,
+    amber: COLOR_DARK.amber3,
+    yellow: COLOR_DARK.yellow3,
+  },
+};

packages/twenty-new-ui/src/theme/constants/TagLight.ts

@@ -0,0 +1,68 @@
+import { COLOR_LIGHT } from '@new-ui/theme/constants/ColorsLight';
+
+export const TAG_LIGHT = {
+  text: {
+    gray: COLOR_LIGHT.gray11,
+    mauve: COLOR_LIGHT.mauve11,
+    slate: COLOR_LIGHT.slate11,
+    sage: COLOR_LIGHT.sage11,
+    olive: COLOR_LIGHT.olive11,
+    sand: COLOR_LIGHT.sand11,
+    tomato: COLOR_LIGHT.tomato11,
+    red: COLOR_LIGHT.red11,
+    ruby: COLOR_LIGHT.ruby11,
+    crimson: COLOR_LIGHT.crimson11,
+    pink: COLOR_LIGHT.pink11,
+    plum: COLOR_LIGHT.plum11,
+    purple: COLOR_LIGHT.purple11,
+    violet: COLOR_LIGHT.violet11,
+    iris: COLOR_LIGHT.iris11,
+    cyan: COLOR_LIGHT.cyan11,
+    turquoise: COLOR_LIGHT.turquoise11,
+    sky: COLOR_LIGHT.sky11,
+    blue: COLOR_LIGHT.blue11,
+    jade: COLOR_LIGHT.jade11,
+    green: COLOR_LIGHT.green11,
+    grass: COLOR_LIGHT.grass11,
+    mint: COLOR_LIGHT.mint11,
+    lime: COLOR_LIGHT.lime11,
+    bronze: COLOR_LIGHT.bronze11,
+    gold: COLOR_LIGHT.gold11,
+    brown: COLOR_LIGHT.brown11,
+    orange: COLOR_LIGHT.orange11,
+    amber: COLOR_LIGHT.amber11,
+    yellow: COLOR_LIGHT.yellow11,
+  },
+  background: {
+    gray: COLOR_LIGHT.gray3,
+    mauve: COLOR_LIGHT.mauve3,
+    slate: COLOR_LIGHT.slate3,
+    sage: COLOR_LIGHT.sage3,
+    olive: COLOR_LIGHT.olive3,
+    sand: COLOR_LIGHT.sand3,
+    tomato: COLOR_LIGHT.tomato3,
+    red: COLOR_LIGHT.red3,
+    ruby: COLOR_LIGHT.ruby3,
+    crimson: COLOR_LIGHT.crimson3,
+    pink: COLOR_LIGHT.pink3,
+    plum: COLOR_LIGHT.plum3,
+    purple: COLOR_LIGHT.purple3,
+    violet: COLOR_LIGHT.violet3,
+    iris: COLOR_LIGHT.iris3,
+    cyan: COLOR_LIGHT.cyan3,
+    turquoise: COLOR_LIGHT.turquoise3,
+    sky: COLOR_LIGHT.sky3,
+    blue: COLOR_LIGHT.blue3,
+    jade: COLOR_LIGHT.jade3,
+    green: COLOR_LIGHT.green3,
+    grass: COLOR_LIGHT.grass3,
+    mint: COLOR_LIGHT.mint3,
+    lime: COLOR_LIGHT.lime3,
+    bronze: COLOR_LIGHT.bronze3,
+    gold: COLOR_LIGHT.gold3,
+    brown: COLOR_LIGHT.brown3,
+    orange: COLOR_LIGHT.orange3,
+    amber: COLOR_LIGHT.amber3,
+    yellow: COLOR_LIGHT.yellow3,
+  },
+};

packages/twenty-new-ui/src/theme/constants/Text.ts

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

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

@@ -0,0 +1,27 @@
+import { ACCENT_DARK } from '@new-ui/theme/constants/AccentDark';
+import { ANIMATION } from './Animation';
+import { ICON } from './Icon';
+import { MODAL } from './Modal';
+import { TEXT } from './Text';
+
+export const THEME_COMMON = {
+  icon: ICON,
+  modal: MODAL,
+  text: TEXT,
+  animation: ANIMATION,
+  spacingMultiplicator: 4,
+  spacing: (...args: number[]) =>
+    args.map((multiplicator) => `${multiplicator * 4}px`).join(' '),
+  betweenSiblingsGap: `2px`,
+  table: {
+    horizontalCellMargin: '8px',
+    checkboxColumnWidth: '32px',
+    horizontalCellPadding: '8px',
+  },
+  sidePanelWidth: '500px',
+  clickableElementBackgroundTransition: 'background 0.1s ease',
+  lastLayerZIndex: 2147483647,
+  buttons: {
+    secondaryTextColor: ACCENT_DARK.accent11,
+  },
+};

packages/twenty-new-ui/src/theme/constants/ThemeDark.ts

@@ -0,0 +1,33 @@
+import { BLUR_DARK } from '@new-ui/theme/constants/BlurDark';
+import { ILLUSTRATION_ICON_DARK } from '@new-ui/theme/constants/IllustrationIconDark';
+import { COLOR_DARK } from './ColorsDark';
+import { GRAY_SCALE_DARK } from './GrayScaleDark';
+import { SNACK_BAR_DARK } from './SnackBarDark';
+import { ACCENT_DARK } from './AccentDark';
+import { BACKGROUND_DARK } from './BackgroundDark';
+import { BORDER_DARK } from './BorderDark';
+import { BOX_SHADOW_DARK } from './BoxShadowDark';
+import { CODE_DARK } from './CodeDark';
+import { FONT_DARK } from './FontDark';
+import { TAG_DARK } from './TagDark';
+import { THEME_COMMON } from './ThemeCommon';
+import type { THEME_LIGHT } from './ThemeLight';
+
+export const THEME_DARK: typeof THEME_LIGHT = {
+  ...THEME_COMMON,
+  ...{
+    accent: ACCENT_DARK,
+    background: BACKGROUND_DARK,
+    blur: BLUR_DARK,
+    border: BORDER_DARK,
+    boxShadow: BOX_SHADOW_DARK,
+    font: FONT_DARK,
+    name: 'dark',
+    snackBar: SNACK_BAR_DARK,
+    tag: TAG_DARK,
+    code: CODE_DARK,
+    IllustrationIcon: ILLUSTRATION_ICON_DARK,
+    grayScale: GRAY_SCALE_DARK,
+    color: COLOR_DARK,
+  },
+};

packages/twenty-new-ui/src/theme/constants/ThemeLight.ts

@@ -0,0 +1,32 @@
+import { BLUR_LIGHT } from '@new-ui/theme/constants/BlurLight';
+import { COLOR_LIGHT } from '@new-ui/theme/constants/ColorsLight';
+import { GRAY_SCALE_LIGHT } from '@new-ui/theme/constants/GrayScaleLight';
+import { ILLUSTRATION_ICON_LIGHT } from '@new-ui/theme/constants/IllustrationIconLight';
+import { SNACK_BAR_LIGHT } from '@new-ui/theme/constants/SnackBarLight';
+import { ACCENT_LIGHT } from './AccentLight';
+import { BACKGROUND_LIGHT } from './BackgroundLight';
+import { BORDER_LIGHT } from './BorderLight';
+import { BOX_SHADOW_LIGHT } from './BoxShadowLight';
+import { CODE_LIGHT } from './CodeLight';
+import { FONT_LIGHT } from './FontLight';
+import { TAG_LIGHT } from './TagLight';
+import { THEME_COMMON } from './ThemeCommon';
+
+export const THEME_LIGHT = {
+  ...THEME_COMMON,
+  ...{
+    accent: ACCENT_LIGHT,
+    background: BACKGROUND_LIGHT,
+    blur: BLUR_LIGHT,
+    border: BORDER_LIGHT,
+    boxShadow: BOX_SHADOW_LIGHT,
+    font: FONT_LIGHT,
+    name: 'light',
+    snackBar: SNACK_BAR_LIGHT,
+    tag: TAG_LIGHT,
+    code: CODE_LIGHT,
+    IllustrationIcon: ILLUSTRATION_ICON_LIGHT,
+    grayScale: GRAY_SCALE_LIGHT,
+    color: COLOR_LIGHT,
+  },
+};

packages/twenty-new-ui/src/theme/constants/TransparentColorsDark.ts

@@ -0,0 +1,394 @@
+import * as RadixColors from '@radix-ui/colors';
+import { GRAY_SCALE_DARK_ALPHA } from '@new-ui/theme/constants/GrayScaleDarkAlpha';
+
+export const TRANSPARENT_COLORS_DARK = {
+  green1: RadixColors.greenDarkA.greenA1,
+  green2: RadixColors.greenDarkA.greenA2,
+  green3: RadixColors.greenDarkA.greenA3,
+  green4: RadixColors.greenDarkA.greenA4,
+  green5: RadixColors.greenDarkA.greenA5,
+  green6: RadixColors.greenDarkA.greenA6,
+  green7: RadixColors.greenDarkA.greenA7,
+  green8: RadixColors.greenDarkA.greenA8,
+  green9: RadixColors.greenDarkA.greenA9,
+  green10: RadixColors.greenDarkA.greenA10,
+  green11: RadixColors.greenDarkA.greenA11,
+  green12: RadixColors.greenDarkA.greenA12,
+
+  turquoise1: RadixColors.tealDarkA.tealA1,
+  turquoise2: RadixColors.tealDarkA.tealA2,
+  turquoise3: RadixColors.tealDarkA.tealA3,
+  turquoise4: RadixColors.tealDarkA.tealA4,
+  turquoise5: RadixColors.tealDarkA.tealA5,
+  turquoise6: RadixColors.tealDarkA.tealA6,
+  turquoise7: RadixColors.tealDarkA.tealA7,
+  turquoise8: RadixColors.tealDarkA.tealA8,
+  turquoise9: RadixColors.tealDarkA.tealA9,
+  turquoise10: RadixColors.tealDarkA.tealA10,
+  turquoise11: RadixColors.tealDarkA.tealA11,
+  turquoise12: RadixColors.tealDarkA.tealA12,
+
+  sky1: RadixColors.skyDarkA.skyA1,
+  sky2: RadixColors.skyDarkA.skyA2,
+  sky3: RadixColors.skyDarkA.skyA3,
+  sky4: RadixColors.skyDarkA.skyA4,
+  sky5: RadixColors.skyDarkA.skyA5,
+  sky6: RadixColors.skyDarkA.skyA6,
+  sky7: RadixColors.skyDarkA.skyA7,
+  sky8: RadixColors.skyDarkA.skyA8,
+  sky9: RadixColors.skyDarkA.skyA9,
+  sky10: RadixColors.skyDarkA.skyA10,
+  sky11: RadixColors.skyDarkA.skyA11,
+  sky12: RadixColors.skyDarkA.skyA12,
+
+  blue1: RadixColors.indigoDarkA.indigoA1,
+  blue2: RadixColors.indigoDarkA.indigoA2,
+  blue3: RadixColors.indigoDarkA.indigoA3,
+  blue4: RadixColors.indigoDarkA.indigoA4,
+  blue5: RadixColors.indigoDarkA.indigoA5,
+  blue6: RadixColors.indigoDarkA.indigoA6,
+  blue7: RadixColors.indigoDarkA.indigoA7,
+  blue8: RadixColors.indigoDarkA.indigoA8,
+  blue9: RadixColors.indigoDarkA.indigoA9,
+  blue10: RadixColors.indigoDarkA.indigoA10,
+  blue11: RadixColors.indigoDarkA.indigoA11,
+  blue12: RadixColors.indigoDarkA.indigoA12,
+
+  purple1: RadixColors.purpleDarkA.purpleA1,
+  purple2: RadixColors.purpleDarkA.purpleA2,
+  purple3: RadixColors.purpleDarkA.purpleA3,
+  purple4: RadixColors.purpleDarkA.purpleA4,
+  purple5: RadixColors.purpleDarkA.purpleA5,
+  purple6: RadixColors.purpleDarkA.purpleA6,
+  purple7: RadixColors.purpleDarkA.purpleA7,
+  purple8: RadixColors.purpleDarkA.purpleA8,
+  purple9: RadixColors.purpleDarkA.purpleA9,
+  purple10: RadixColors.purpleDarkA.purpleA10,
+  purple11: RadixColors.purpleDarkA.purpleA11,
+  purple12: RadixColors.purpleDarkA.purpleA12,
+
+  pink1: RadixColors.pinkDarkA.pinkA1,
+  pink2: RadixColors.pinkDarkA.pinkA2,
+  pink3: RadixColors.pinkDarkA.pinkA3,
+  pink4: RadixColors.pinkDarkA.pinkA4,
+  pink5: RadixColors.pinkDarkA.pinkA5,
+  pink6: RadixColors.pinkDarkA.pinkA6,
+  pink7: RadixColors.pinkDarkA.pinkA7,
+  pink8: RadixColors.pinkDarkA.pinkA8,
+  pink9: RadixColors.pinkDarkA.pinkA9,
+  pink10: RadixColors.pinkDarkA.pinkA10,
+  pink11: RadixColors.pinkDarkA.pinkA11,
+  pink12: RadixColors.pinkDarkA.pinkA12,
+
+  red1: RadixColors.redDarkA.redA1,
+  red2: RadixColors.redDarkA.redA2,
+  red3: RadixColors.redDarkA.redA3,
+  red4: RadixColors.redDarkA.redA4,
+  red5: RadixColors.redDarkA.redA5,
+  red6: RadixColors.redDarkA.redA6,
+  red7: RadixColors.redDarkA.redA7,
+  red8: RadixColors.redDarkA.redA8,
+  red9: RadixColors.redDarkA.redA9,
+  red10: RadixColors.redDarkA.redA10,
+  red11: RadixColors.redDarkA.redA11,
+  red12: RadixColors.redDarkA.redA12,
+
+  orange1: RadixColors.orangeDarkA.orangeA1,
+  orange2: RadixColors.orangeDarkA.orangeA2,
+  orange3: RadixColors.orangeDarkA.orangeA3,
+  orange4: RadixColors.orangeDarkA.orangeA4,
+  orange5: RadixColors.orangeDarkA.orangeA5,
+  orange6: RadixColors.orangeDarkA.orangeA6,
+  orange7: RadixColors.orangeDarkA.orangeA7,
+  orange8: RadixColors.orangeDarkA.orangeA8,
+  orange9: RadixColors.orangeDarkA.orangeA9,
+  orange10: RadixColors.orangeDarkA.orangeA10,
+  orange11: RadixColors.orangeDarkA.orangeA11,
+  orange12: RadixColors.orangeDarkA.orangeA12,
+
+  yellow1: RadixColors.yellowDarkA.yellowA1,
+  yellow2: RadixColors.yellowDarkA.yellowA2,
+  yellow3: RadixColors.yellowDarkA.yellowA3,
+  yellow4: RadixColors.yellowDarkA.yellowA4,
+  yellow5: RadixColors.yellowDarkA.yellowA5,
+  yellow6: RadixColors.yellowDarkA.yellowA6,
+  yellow7: RadixColors.yellowDarkA.yellowA7,
+  yellow8: RadixColors.yellowDarkA.yellowA8,
+  yellow9: RadixColors.yellowDarkA.yellowA9,
+  yellow10: RadixColors.yellowDarkA.yellowA10,
+  yellow11: RadixColors.yellowDarkA.yellowA11,
+  yellow12: RadixColors.yellowDarkA.yellowA12,
+
+  gray1: GRAY_SCALE_DARK_ALPHA.gray1,
+  gray2: GRAY_SCALE_DARK_ALPHA.gray2,
+  gray3: GRAY_SCALE_DARK_ALPHA.gray3,
+  gray4: GRAY_SCALE_DARK_ALPHA.gray4,
+  gray5: GRAY_SCALE_DARK_ALPHA.gray5,
+  gray6: GRAY_SCALE_DARK_ALPHA.gray6,
+  gray7: GRAY_SCALE_DARK_ALPHA.gray7,
+  gray8: GRAY_SCALE_DARK_ALPHA.gray8,
+  gray9: GRAY_SCALE_DARK_ALPHA.gray9,
+  gray10: GRAY_SCALE_DARK_ALPHA.gray10,
+  gray11: GRAY_SCALE_DARK_ALPHA.gray11,
+  gray12: GRAY_SCALE_DARK_ALPHA.gray12,
+
+  mauve1: RadixColors.mauveDarkA.mauveA1,
+  mauve2: RadixColors.mauveDarkA.mauveA2,
+  mauve3: RadixColors.mauveDarkA.mauveA3,
+  mauve4: RadixColors.mauveDarkA.mauveA4,
+  mauve5: RadixColors.mauveDarkA.mauveA5,
+  mauve6: RadixColors.mauveDarkA.mauveA6,
+  mauve7: RadixColors.mauveDarkA.mauveA7,
+  mauve8: RadixColors.mauveDarkA.mauveA8,
+  mauve9: RadixColors.mauveDarkA.mauveA9,
+  mauve10: RadixColors.mauveDarkA.mauveA10,
+  mauve11: RadixColors.mauveDarkA.mauveA11,
+  mauve12: RadixColors.mauveDarkA.mauveA12,
+
+  slate1: RadixColors.slateDarkA.slateA1,
+  slate2: RadixColors.slateDarkA.slateA2,
+  slate3: RadixColors.slateDarkA.slateA3,
+  slate4: RadixColors.slateDarkA.slateA4,
+  slate5: RadixColors.slateDarkA.slateA5,
+  slate6: RadixColors.slateDarkA.slateA6,
+  slate7: RadixColors.slateDarkA.slateA7,
+  slate8: RadixColors.slateDarkA.slateA8,
+  slate9: RadixColors.slateDarkA.slateA9,
+  slate10: RadixColors.slateDarkA.slateA10,
+  slate11: RadixColors.slateDarkA.slateA11,
+  slate12: RadixColors.slateDarkA.slateA12,
+
+  sage1: RadixColors.sageDarkA.sageA1,
+  sage2: RadixColors.sageDarkA.sageA2,
+  sage3: RadixColors.sageDarkA.sageA3,
+  sage4: RadixColors.sageDarkA.sageA4,
+  sage5: RadixColors.sageDarkA.sageA5,
+  sage6: RadixColors.sageDarkA.sageA6,
+  sage7: RadixColors.sageDarkA.sageA7,
+  sage8: RadixColors.sageDarkA.sageA8,
+  sage9: RadixColors.sageDarkA.sageA9,
+  sage10: RadixColors.sageDarkA.sageA10,
+  sage11: RadixColors.sageDarkA.sageA11,
+  sage12: RadixColors.sageDarkA.sageA12,
+
+  olive1: RadixColors.oliveDarkA.oliveA1,
+  olive2: RadixColors.oliveDarkA.oliveA2,
+  olive3: RadixColors.oliveDarkA.oliveA3,
+  olive4: RadixColors.oliveDarkA.oliveA4,
+  olive5: RadixColors.oliveDarkA.oliveA5,
+  olive6: RadixColors.oliveDarkA.oliveA6,
+  olive7: RadixColors.oliveDarkA.oliveA7,
+  olive8: RadixColors.oliveDarkA.oliveA8,
+  olive9: RadixColors.oliveDarkA.oliveA9,
+  olive10: RadixColors.oliveDarkA.oliveA10,
+  olive11: RadixColors.oliveDarkA.oliveA11,
+  olive12: RadixColors.oliveDarkA.oliveA12,
+
+  sand1: RadixColors.sandDarkA.sandA1,
+  sand2: RadixColors.sandDarkA.sandA2,
+  sand3: RadixColors.sandDarkA.sandA3,
+  sand4: RadixColors.sandDarkA.sandA4,
+  sand5: RadixColors.sandDarkA.sandA5,
+  sand6: RadixColors.sandDarkA.sandA6,
+  sand7: RadixColors.sandDarkA.sandA7,
+  sand8: RadixColors.sandDarkA.sandA8,
+  sand9: RadixColors.sandDarkA.sandA9,
+  sand10: RadixColors.sandDarkA.sandA10,
+  sand11: RadixColors.sandDarkA.sandA11,
+  sand12: RadixColors.sandDarkA.sandA12,
+
+  tomato1: RadixColors.tomatoDarkA.tomatoA1,
+  tomato2: RadixColors.tomatoDarkA.tomatoA2,
+  tomato3: RadixColors.tomatoDarkA.tomatoA3,
+  tomato4: RadixColors.tomatoDarkA.tomatoA4,
+  tomato5: RadixColors.tomatoDarkA.tomatoA5,
+  tomato6: RadixColors.tomatoDarkA.tomatoA6,
+  tomato7: RadixColors.tomatoDarkA.tomatoA7,
+  tomato8: RadixColors.tomatoDarkA.tomatoA8,
+  tomato9: RadixColors.tomatoDarkA.tomatoA9,
+  tomato10: RadixColors.tomatoDarkA.tomatoA10,
+  tomato11: RadixColors.tomatoDarkA.tomatoA11,
+  tomato12: RadixColors.tomatoDarkA.tomatoA12,
+
+  ruby1: RadixColors.rubyDarkA.rubyA1,
+  ruby2: RadixColors.rubyDarkA.rubyA2,
+  ruby3: RadixColors.rubyDarkA.rubyA3,
+  ruby4: RadixColors.rubyDarkA.rubyA4,
+  ruby5: RadixColors.rubyDarkA.rubyA5,
+  ruby6: RadixColors.rubyDarkA.rubyA6,
+  ruby7: RadixColors.rubyDarkA.rubyA7,
+  ruby8: RadixColors.rubyDarkA.rubyA8,
+  ruby9: RadixColors.rubyDarkA.rubyA9,
+  ruby10: RadixColors.rubyDarkA.rubyA10,
+  ruby11: RadixColors.rubyDarkA.rubyA11,
+  ruby12: RadixColors.rubyDarkA.rubyA12,
+
+  crimson1: RadixColors.crimsonDarkA.crimsonA1,
+  crimson2: RadixColors.crimsonDarkA.crimsonA2,
+  crimson3: RadixColors.crimsonDarkA.crimsonA3,
+  crimson4: RadixColors.crimsonDarkA.crimsonA4,
+  crimson5: RadixColors.crimsonDarkA.crimsonA5,
+  crimson6: RadixColors.crimsonDarkA.crimsonA6,
+  crimson7: RadixColors.crimsonDarkA.crimsonA7,
+  crimson8: RadixColors.crimsonDarkA.crimsonA8,
+  crimson9: RadixColors.crimsonDarkA.crimsonA9,
+  crimson10: RadixColors.crimsonDarkA.crimsonA10,
+  crimson11: RadixColors.crimsonDarkA.crimsonA11,
+  crimson12: RadixColors.crimsonDarkA.crimsonA12,
+
+  plum1: RadixColors.plumDarkA.plumA1,
+  plum2: RadixColors.plumDarkA.plumA2,
+  plum3: RadixColors.plumDarkA.plumA3,
+  plum4: RadixColors.plumDarkA.plumA4,
+  plum5: RadixColors.plumDarkA.plumA5,
+  plum6: RadixColors.plumDarkA.plumA6,
+  plum7: RadixColors.plumDarkA.plumA7,
+  plum8: RadixColors.plumDarkA.plumA8,
+  plum9: RadixColors.plumDarkA.plumA9,
+  plum10: RadixColors.plumDarkA.plumA10,
+  plum11: RadixColors.plumDarkA.plumA11,
+  plum12: RadixColors.plumDarkA.plumA12,
+
+  violet1: RadixColors.violetDarkA.violetA1,
+  violet2: RadixColors.violetDarkA.violetA2,
+  violet3: RadixColors.violetDarkA.violetA3,
+  violet4: RadixColors.violetDarkA.violetA4,
+  violet5: RadixColors.violetDarkA.violetA5,
+  violet6: RadixColors.violetDarkA.violetA6,
+  violet7: RadixColors.violetDarkA.violetA7,
+  violet8: RadixColors.violetDarkA.violetA8,
+  violet9: RadixColors.violetDarkA.violetA9,
+  violet10: RadixColors.violetDarkA.violetA10,
+  violet11: RadixColors.violetDarkA.violetA11,
+  violet12: RadixColors.violetDarkA.violetA12,
+
+  iris1: RadixColors.irisDarkA.irisA1,
+  iris2: RadixColors.irisDarkA.irisA2,
+  iris3: RadixColors.irisDarkA.irisA3,
+  iris4: RadixColors.irisDarkA.irisA4,
+  iris5: RadixColors.irisDarkA.irisA5,
+  iris6: RadixColors.irisDarkA.irisA6,
+  iris7: RadixColors.irisDarkA.irisA7,
+  iris8: RadixColors.irisDarkA.irisA8,
+  iris9: RadixColors.irisDarkA.irisA9,
+  iris10: RadixColors.irisDarkA.irisA10,
+  iris11: RadixColors.irisDarkA.irisA11,
+  iris12: RadixColors.irisDarkA.irisA12,
+
+  cyan1: RadixColors.cyanDarkA.cyanA1,
+  cyan2: RadixColors.cyanDarkA.cyanA2,
+  cyan3: RadixColors.cyanDarkA.cyanA3,
+  cyan4: RadixColors.cyanDarkA.cyanA4,
+  cyan5: RadixColors.cyanDarkA.cyanA5,
+  cyan6: RadixColors.cyanDarkA.cyanA6,
+  cyan7: RadixColors.cyanDarkA.cyanA7,
+  cyan8: RadixColors.cyanDarkA.cyanA8,
+  cyan9: RadixColors.cyanDarkA.cyanA9,
+  cyan10: RadixColors.cyanDarkA.cyanA10,
+  cyan11: RadixColors.cyanDarkA.cyanA11,
+  cyan12: RadixColors.cyanDarkA.cyanA12,
+
+  jade1: RadixColors.jadeDarkA.jadeA1,
+  jade2: RadixColors.jadeDarkA.jadeA2,
+  jade3: RadixColors.jadeDarkA.jadeA3,
+  jade4: RadixColors.jadeDarkA.jadeA4,
+  jade5: RadixColors.jadeDarkA.jadeA5,
+  jade6: RadixColors.jadeDarkA.jadeA6,
+  jade7: RadixColors.jadeDarkA.jadeA7,
+  jade8: RadixColors.jadeDarkA.jadeA8,
+  jade9: RadixColors.jadeDarkA.jadeA9,
+  jade10: RadixColors.jadeDarkA.jadeA10,
+  jade11: RadixColors.jadeDarkA.jadeA11,
+  jade12: RadixColors.jadeDarkA.jadeA12,
+
+  grass1: RadixColors.grassDarkA.grassA1,
+  grass2: RadixColors.grassDarkA.grassA2,
+  grass3: RadixColors.grassDarkA.grassA3,
+  grass4: RadixColors.grassDarkA.grassA4,
+  grass5: RadixColors.grassDarkA.grassA5,
+  grass6: RadixColors.grassDarkA.grassA6,
+  grass7: RadixColors.grassDarkA.grassA7,
+  grass8: RadixColors.grassDarkA.grassA8,
+  grass9: RadixColors.grassDarkA.grassA9,
+  grass10: RadixColors.grassDarkA.grassA10,
+  grass11: RadixColors.grassDarkA.grassA11,
+  grass12: RadixColors.grassDarkA.grassA12,
+
+  mint1: RadixColors.mintDarkA.mintA1,
+  mint2: RadixColors.mintDarkA.mintA2,
+  mint3: RadixColors.mintDarkA.mintA3,
+  mint4: RadixColors.mintDarkA.mintA4,
+  mint5: RadixColors.mintDarkA.mintA5,
+  mint6: RadixColors.mintDarkA.mintA6,
+  mint7: RadixColors.mintDarkA.mintA7,
+  mint8: RadixColors.mintDarkA.mintA8,
+  mint9: RadixColors.mintDarkA.mintA9,
+  mint10: RadixColors.mintDarkA.mintA10,
+  mint11: RadixColors.mintDarkA.mintA11,
+  mint12: RadixColors.mintDarkA.mintA12,
+
+  lime1: RadixColors.limeDarkA.limeA1,
+  lime2: RadixColors.limeDarkA.limeA2,
+  lime3: RadixColors.limeDarkA.limeA3,
+  lime4: RadixColors.limeDarkA.limeA4,
+  lime5: RadixColors.limeDarkA.limeA5,
+  lime6: RadixColors.limeDarkA.limeA6,
+  lime7: RadixColors.limeDarkA.limeA7,
+  lime8: RadixColors.limeDarkA.limeA8,
+  lime9: RadixColors.limeDarkA.limeA9,
+  lime10: RadixColors.limeDarkA.limeA10,
+  lime11: RadixColors.limeDarkA.limeA11,
+  lime12: RadixColors.limeDarkA.limeA12,
+
+  bronze1: RadixColors.bronzeDarkA.bronzeA1,
+  bronze2: RadixColors.bronzeDarkA.bronzeA2,
+  bronze3: RadixColors.bronzeDarkA.bronzeA3,
+  bronze4: RadixColors.bronzeDarkA.bronzeA4,
+  bronze5: RadixColors.bronzeDarkA.bronzeA5,
+  bronze6: RadixColors.bronzeDarkA.bronzeA6,
+  bronze7: RadixColors.bronzeDarkA.bronzeA7,
+  bronze8: RadixColors.bronzeDarkA.bronzeA8,
+  bronze9: RadixColors.bronzeDarkA.bronzeA9,
+  bronze10: RadixColors.bronzeDarkA.bronzeA10,
+  bronze11: RadixColors.bronzeDarkA.bronzeA11,
+  bronze12: RadixColors.bronzeDarkA.bronzeA12,
+
+  gold1: RadixColors.goldDarkA.goldA1,
+  gold2: RadixColors.goldDarkA.goldA2,
+  gold3: RadixColors.goldDarkA.goldA3,
+  gold4: RadixColors.goldDarkA.goldA4,
+  gold5: RadixColors.goldDarkA.goldA5,
+  gold6: RadixColors.goldDarkA.goldA6,
+  gold7: RadixColors.goldDarkA.goldA7,
+  gold8: RadixColors.goldDarkA.goldA8,
+  gold9: RadixColors.goldDarkA.goldA9,
+  gold10: RadixColors.goldDarkA.goldA10,
+  gold11: RadixColors.goldDarkA.goldA11,
+  gold12: RadixColors.goldDarkA.goldA12,
+
+  brown1: RadixColors.brownDarkA.brownA1,
+  brown2: RadixColors.brownDarkA.brownA2,
+  brown3: RadixColors.brownDarkA.brownA3,
+  brown4: RadixColors.brownDarkA.brownA4,
+  brown5: RadixColors.brownDarkA.brownA5,
+  brown6: RadixColors.brownDarkA.brownA6,
+  brown7: RadixColors.brownDarkA.brownA7,
+  brown8: RadixColors.brownDarkA.brownA8,
+  brown9: RadixColors.brownDarkA.brownA9,
+  brown10: RadixColors.brownDarkA.brownA10,
+  brown11: RadixColors.brownDarkA.brownA11,
+  brown12: RadixColors.brownDarkA.brownA12,
+
+  amber1: RadixColors.amberDarkA.amberA1,
+  amber2: RadixColors.amberDarkA.amberA2,
+  amber3: RadixColors.amberDarkA.amberA3,
+  amber4: RadixColors.amberDarkA.amberA4,
+  amber5: RadixColors.amberDarkA.amberA5,
+  amber6: RadixColors.amberDarkA.amberA6,
+  amber7: RadixColors.amberDarkA.amberA7,
+  amber8: RadixColors.amberDarkA.amberA8,
+  amber9: RadixColors.amberDarkA.amberA9,
+  amber10: RadixColors.amberDarkA.amberA10,
+  amber11: RadixColors.amberDarkA.amberA11,
+  amber12: RadixColors.amberDarkA.amberA12,
+};

packages/twenty-new-ui/src/theme/constants/TransparentColorsLight.ts

@@ -0,0 +1,394 @@
+import * as RadixColors from '@radix-ui/colors';
+import { GRAY_SCALE_LIGHT_ALPHA } from '@new-ui/theme/constants/GrayScaleLightAlpha';
+
+export const TRANSPARENT_COLORS_LIGHT = {
+  green1: RadixColors.greenA.greenA1,
+  green2: RadixColors.greenA.greenA2,
+  green3: RadixColors.greenA.greenA3,
+  green4: RadixColors.greenA.greenA4,
+  green5: RadixColors.greenA.greenA5,
+  green6: RadixColors.greenA.greenA6,
+  green7: RadixColors.greenA.greenA7,
+  green8: RadixColors.greenA.greenA8,
+  green9: RadixColors.greenA.greenA9,
+  green10: RadixColors.greenA.greenA10,
+  green11: RadixColors.greenA.greenA11,
+  green12: RadixColors.greenA.greenA12,
+
+  turquoise1: RadixColors.tealA.tealA1,
+  turquoise2: RadixColors.tealA.tealA2,
+  turquoise3: RadixColors.tealA.tealA3,
+  turquoise4: RadixColors.tealA.tealA4,
+  turquoise5: RadixColors.tealA.tealA5,
+  turquoise6: RadixColors.tealA.tealA6,
+  turquoise7: RadixColors.tealA.tealA7,
+  turquoise8: RadixColors.tealA.tealA8,
+  turquoise9: RadixColors.tealA.tealA9,
+  turquoise10: RadixColors.tealA.tealA10,
+  turquoise11: RadixColors.tealA.tealA11,
+  turquoise12: RadixColors.tealA.tealA12,
+
+  sky1: RadixColors.skyA.skyA1,
+  sky2: RadixColors.skyA.skyA2,
+  sky3: RadixColors.skyA.skyA3,
+  sky4: RadixColors.skyA.skyA4,
+  sky5: RadixColors.skyA.skyA5,
+  sky6: RadixColors.skyA.skyA6,
+  sky7: RadixColors.skyA.skyA7,
+  sky8: RadixColors.skyA.skyA8,
+  sky9: RadixColors.skyA.skyA9,
+  sky10: RadixColors.skyA.skyA10,
+  sky11: RadixColors.skyA.skyA11,
+  sky12: RadixColors.skyA.skyA12,
+
+  blue1: RadixColors.indigoA.indigoA1,
+  blue2: RadixColors.indigoA.indigoA2,
+  blue3: RadixColors.indigoA.indigoA3,
+  blue4: RadixColors.indigoA.indigoA4,
+  blue5: RadixColors.indigoA.indigoA5,
+  blue6: RadixColors.indigoA.indigoA6,
+  blue7: RadixColors.indigoA.indigoA7,
+  blue8: RadixColors.indigoA.indigoA8,
+  blue9: RadixColors.indigoA.indigoA9,
+  blue10: RadixColors.indigoA.indigoA10,
+  blue11: RadixColors.indigoA.indigoA11,
+  blue12: RadixColors.indigoA.indigoA12,
+
+  purple1: RadixColors.purpleA.purpleA1,
+  purple2: RadixColors.purpleA.purpleA2,
+  purple3: RadixColors.purpleA.purpleA3,
+  purple4: RadixColors.purpleA.purpleA4,
+  purple5: RadixColors.purpleA.purpleA5,
+  purple6: RadixColors.purpleA.purpleA6,
+  purple7: RadixColors.purpleA.purpleA7,
+  purple8: RadixColors.purpleA.purpleA8,
+  purple9: RadixColors.purpleA.purpleA9,
+  purple10: RadixColors.purpleA.purpleA10,
+  purple11: RadixColors.purpleA.purpleA11,
+  purple12: RadixColors.purpleA.purpleA12,
+
+  pink1: RadixColors.pinkA.pinkA1,
+  pink2: RadixColors.pinkA.pinkA2,
+  pink3: RadixColors.pinkA.pinkA3,
+  pink4: RadixColors.pinkA.pinkA4,
+  pink5: RadixColors.pinkA.pinkA5,
+  pink6: RadixColors.pinkA.pinkA6,
+  pink7: RadixColors.pinkA.pinkA7,
+  pink8: RadixColors.pinkA.pinkA8,
+  pink9: RadixColors.pinkA.pinkA9,
+  pink10: RadixColors.pinkA.pinkA10,
+  pink11: RadixColors.pinkA.pinkA11,
+  pink12: RadixColors.pinkA.pinkA12,
+
+  red1: RadixColors.redA.redA1,
+  red2: RadixColors.redA.redA2,
+  red3: RadixColors.redA.redA3,
+  red4: RadixColors.redA.redA4,
+  red5: RadixColors.redA.redA5,
+  red6: RadixColors.redA.redA6,
+  red7: RadixColors.redA.redA7,
+  red8: RadixColors.redA.redA8,
+  red9: RadixColors.redA.redA9,
+  red10: RadixColors.redA.redA10,
+  red11: RadixColors.redA.redA11,
+  red12: RadixColors.redA.redA12,
+
+  orange1: RadixColors.orangeA.orangeA1,
+  orange2: RadixColors.orangeA.orangeA2,
+  orange3: RadixColors.orangeA.orangeA3,
+  orange4: RadixColors.orangeA.orangeA4,
+  orange5: RadixColors.orangeA.orangeA5,
+  orange6: RadixColors.orangeA.orangeA6,
+  orange7: RadixColors.orangeA.orangeA7,
+  orange8: RadixColors.orangeA.orangeA8,
+  orange9: RadixColors.orangeA.orangeA9,
+  orange10: RadixColors.orangeA.orangeA10,
+  orange11: RadixColors.orangeA.orangeA11,
+  orange12: RadixColors.orangeA.orangeA12,
+
+  yellow1: RadixColors.yellowA.yellowA1,
+  yellow2: RadixColors.yellowA.yellowA2,
+  yellow3: RadixColors.yellowA.yellowA3,
+  yellow4: RadixColors.yellowA.yellowA4,
+  yellow5: RadixColors.yellowA.yellowA5,
+  yellow6: RadixColors.yellowA.yellowA6,
+  yellow7: RadixColors.yellowA.yellowA7,
+  yellow8: RadixColors.yellowA.yellowA8,
+  yellow9: RadixColors.yellowA.yellowA9,
+  yellow10: RadixColors.yellowA.yellowA10,
+  yellow11: RadixColors.yellowA.yellowA11,
+  yellow12: RadixColors.yellowA.yellowA12,
+
+  gray1: GRAY_SCALE_LIGHT_ALPHA.gray1,
+  gray2: GRAY_SCALE_LIGHT_ALPHA.gray2,
+  gray3: GRAY_SCALE_LIGHT_ALPHA.gray3,
+  gray4: GRAY_SCALE_LIGHT_ALPHA.gray4,
+  gray5: GRAY_SCALE_LIGHT_ALPHA.gray5,
+  gray6: GRAY_SCALE_LIGHT_ALPHA.gray6,
+  gray7: GRAY_SCALE_LIGHT_ALPHA.gray7,
+  gray8: GRAY_SCALE_LIGHT_ALPHA.gray8,
+  gray9: GRAY_SCALE_LIGHT_ALPHA.gray9,
+  gray10: GRAY_SCALE_LIGHT_ALPHA.gray10,
+  gray11: GRAY_SCALE_LIGHT_ALPHA.gray11,
+  gray12: GRAY_SCALE_LIGHT_ALPHA.gray12,
+
+  mauve1: RadixColors.mauveA.mauveA1,
+  mauve2: RadixColors.mauveA.mauveA2,
+  mauve3: RadixColors.mauveA.mauveA3,
+  mauve4: RadixColors.mauveA.mauveA4,
+  mauve5: RadixColors.mauveA.mauveA5,
+  mauve6: RadixColors.mauveA.mauveA6,
+  mauve7: RadixColors.mauveA.mauveA7,
+  mauve8: RadixColors.mauveA.mauveA8,
+  mauve9: RadixColors.mauveA.mauveA9,
+  mauve10: RadixColors.mauveA.mauveA10,
+  mauve11: RadixColors.mauveA.mauveA11,
+  mauve12: RadixColors.mauveA.mauveA12,
+
+  slate1: RadixColors.slateA.slateA1,
+  slate2: RadixColors.slateA.slateA2,
+  slate3: RadixColors.slateA.slateA3,
+  slate4: RadixColors.slateA.slateA4,
+  slate5: RadixColors.slateA.slateA5,
+  slate6: RadixColors.slateA.slateA6,
+  slate7: RadixColors.slateA.slateA7,
+  slate8: RadixColors.slateA.slateA8,
+  slate9: RadixColors.slateA.slateA9,
+  slate10: RadixColors.slateA.slateA10,
+  slate11: RadixColors.slateA.slateA11,
+  slate12: RadixColors.slateA.slateA12,
+
+  sage1: RadixColors.sageA.sageA1,
+  sage2: RadixColors.sageA.sageA2,
+  sage3: RadixColors.sageA.sageA3,
+  sage4: RadixColors.sageA.sageA4,
+  sage5: RadixColors.sageA.sageA5,
+  sage6: RadixColors.sageA.sageA6,
+  sage7: RadixColors.sageA.sageA7,
+  sage8: RadixColors.sageA.sageA8,
+  sage9: RadixColors.sageA.sageA9,
+  sage10: RadixColors.sageA.sageA10,
+  sage11: RadixColors.sageA.sageA11,
+  sage12: RadixColors.sageA.sageA12,
+
+  olive1: RadixColors.oliveA.oliveA1,
+  olive2: RadixColors.oliveA.oliveA2,
+  olive3: RadixColors.oliveA.oliveA3,
+  olive4: RadixColors.oliveA.oliveA4,
+  olive5: RadixColors.oliveA.oliveA5,
+  olive6: RadixColors.oliveA.oliveA6,
+  olive7: RadixColors.oliveA.oliveA7,
+  olive8: RadixColors.oliveA.oliveA8,
+  olive9: RadixColors.oliveA.oliveA9,
+  olive10: RadixColors.oliveA.oliveA10,
+  olive11: RadixColors.oliveA.oliveA11,
+  olive12: RadixColors.oliveA.oliveA12,
+
+  sand1: RadixColors.sandA.sandA1,
+  sand2: RadixColors.sandA.sandA2,
+  sand3: RadixColors.sandA.sandA3,
+  sand4: RadixColors.sandA.sandA4,
+  sand5: RadixColors.sandA.sandA5,
+  sand6: RadixColors.sandA.sandA6,
+  sand7: RadixColors.sandA.sandA7,
+  sand8: RadixColors.sandA.sandA8,
+  sand9: RadixColors.sandA.sandA9,
+  sand10: RadixColors.sandA.sandA10,
+  sand11: RadixColors.sandA.sandA11,
+  sand12: RadixColors.sandA.sandA12,
+
+  tomato1: RadixColors.tomatoA.tomatoA1,
+  tomato2: RadixColors.tomatoA.tomatoA2,
+  tomato3: RadixColors.tomatoA.tomatoA3,
+  tomato4: RadixColors.tomatoA.tomatoA4,
+  tomato5: RadixColors.tomatoA.tomatoA5,
+  tomato6: RadixColors.tomatoA.tomatoA6,
+  tomato7: RadixColors.tomatoA.tomatoA7,
+  tomato8: RadixColors.tomatoA.tomatoA8,
+  tomato9: RadixColors.tomatoA.tomatoA9,
+  tomato10: RadixColors.tomatoA.tomatoA10,
+  tomato11: RadixColors.tomatoA.tomatoA11,
+  tomato12: RadixColors.tomatoA.tomatoA12,
+
+  ruby1: RadixColors.rubyA.rubyA1,
+  ruby2: RadixColors.rubyA.rubyA2,
+  ruby3: RadixColors.rubyA.rubyA3,
+  ruby4: RadixColors.rubyA.rubyA4,
+  ruby5: RadixColors.rubyA.rubyA5,
+  ruby6: RadixColors.rubyA.rubyA6,
+  ruby7: RadixColors.rubyA.rubyA7,
+  ruby8: RadixColors.rubyA.rubyA8,
+  ruby9: RadixColors.rubyA.rubyA9,
+  ruby10: RadixColors.rubyA.rubyA10,
+  ruby11: RadixColors.rubyA.rubyA11,
+  ruby12: RadixColors.rubyA.rubyA12,
+
+  crimson1: RadixColors.crimsonA.crimsonA1,
+  crimson2: RadixColors.crimsonA.crimsonA2,
+  crimson3: RadixColors.crimsonA.crimsonA3,
+  crimson4: RadixColors.crimsonA.crimsonA4,
+  crimson5: RadixColors.crimsonA.crimsonA5,
+  crimson6: RadixColors.crimsonA.crimsonA6,
+  crimson7: RadixColors.crimsonA.crimsonA7,
+  crimson8: RadixColors.crimsonA.crimsonA8,
+  crimson9: RadixColors.crimsonA.crimsonA9,
+  crimson10: RadixColors.crimsonA.crimsonA10,
+  crimson11: RadixColors.crimsonA.crimsonA11,
+  crimson12: RadixColors.crimsonA.crimsonA12,
+
+  plum1: RadixColors.plumA.plumA1,
+  plum2: RadixColors.plumA.plumA2,
+  plum3: RadixColors.plumA.plumA3,
+  plum4: RadixColors.plumA.plumA4,
+  plum5: RadixColors.plumA.plumA5,
+  plum6: RadixColors.plumA.plumA6,
+  plum7: RadixColors.plumA.plumA7,
+  plum8: RadixColors.plumA.plumA8,
+  plum9: RadixColors.plumA.plumA9,
+  plum10: RadixColors.plumA.plumA10,
+  plum11: RadixColors.plumA.plumA11,
+  plum12: RadixColors.plumA.plumA12,
+
+  violet1: RadixColors.violetA.violetA1,
+  violet2: RadixColors.violetA.violetA2,
+  violet3: RadixColors.violetA.violetA3,
+  violet4: RadixColors.violetA.violetA4,
+  violet5: RadixColors.violetA.violetA5,
+  violet6: RadixColors.violetA.violetA6,
+  violet7: RadixColors.violetA.violetA7,
+  violet8: RadixColors.violetA.violetA8,
+  violet9: RadixColors.violetA.violetA9,
+  violet10: RadixColors.violetA.violetA10,
+  violet11: RadixColors.violetA.violetA11,
+  violet12: RadixColors.violetA.violetA12,
+
+  iris1: RadixColors.irisA.irisA1,
+  iris2: RadixColors.irisA.irisA2,
+  iris3: RadixColors.irisA.irisA3,
+  iris4: RadixColors.irisA.irisA4,
+  iris5: RadixColors.irisA.irisA5,
+  iris6: RadixColors.irisA.irisA6,
+  iris7: RadixColors.irisA.irisA7,
+  iris8: RadixColors.irisA.irisA8,
+  iris9: RadixColors.irisA.irisA9,
+  iris10: RadixColors.irisA.irisA10,
+  iris11: RadixColors.irisA.irisA11,
+  iris12: RadixColors.irisA.irisA12,
+
+  cyan1: RadixColors.cyanA.cyanA1,
+  cyan2: RadixColors.cyanA.cyanA2,
+  cyan3: RadixColors.cyanA.cyanA3,
+  cyan4: RadixColors.cyanA.cyanA4,
+  cyan5: RadixColors.cyanA.cyanA5,
+  cyan6: RadixColors.cyanA.cyanA6,
+  cyan7: RadixColors.cyanA.cyanA7,
+  cyan8: RadixColors.cyanA.cyanA8,
+  cyan9: RadixColors.cyanA.cyanA9,
+  cyan10: RadixColors.cyanA.cyanA10,
+  cyan11: RadixColors.cyanA.cyanA11,
+  cyan12: RadixColors.cyanA.cyanA12,
+
+  jade1: RadixColors.jadeA.jadeA1,
+  jade2: RadixColors.jadeA.jadeA2,
+  jade3: RadixColors.jadeA.jadeA3,
+  jade4: RadixColors.jadeA.jadeA4,
+  jade5: RadixColors.jadeA.jadeA5,
+  jade6: RadixColors.jadeA.jadeA6,
+  jade7: RadixColors.jadeA.jadeA7,
+  jade8: RadixColors.jadeA.jadeA8,
+  jade9: RadixColors.jadeA.jadeA9,
+  jade10: RadixColors.jadeA.jadeA10,
+  jade11: RadixColors.jadeA.jadeA11,
+  jade12: RadixColors.jadeA.jadeA12,
+
+  grass1: RadixColors.grassA.grassA1,
+  grass2: RadixColors.grassA.grassA2,
+  grass3: RadixColors.grassA.grassA3,
+  grass4: RadixColors.grassA.grassA4,
+  grass5: RadixColors.grassA.grassA5,
+  grass6: RadixColors.grassA.grassA6,
+  grass7: RadixColors.grassA.grassA7,
+  grass8: RadixColors.grassA.grassA8,
+  grass9: RadixColors.grassA.grassA9,
+  grass10: RadixColors.grassA.grassA10,
+  grass11: RadixColors.grassA.grassA11,
+  grass12: RadixColors.grassA.grassA12,
+
+  mint1: RadixColors.mintA.mintA1,
+  mint2: RadixColors.mintA.mintA2,
+  mint3: RadixColors.mintA.mintA3,
+  mint4: RadixColors.mintA.mintA4,
+  mint5: RadixColors.mintA.mintA5,
+  mint6: RadixColors.mintA.mintA6,
+  mint7: RadixColors.mintA.mintA7,
+  mint8: RadixColors.mintA.mintA8,
+  mint9: RadixColors.mintA.mintA9,
+  mint10: RadixColors.mintA.mintA10,
+  mint11: RadixColors.mintA.mintA11,
+  mint12: RadixColors.mintA.mintA12,
+
+  lime1: RadixColors.limeA.limeA1,
+  lime2: RadixColors.limeA.limeA2,
+  lime3: RadixColors.limeA.limeA3,
+  lime4: RadixColors.limeA.limeA4,
+  lime5: RadixColors.limeA.limeA5,
+  lime6: RadixColors.limeA.limeA6,
+  lime7: RadixColors.limeA.limeA7,
+  lime8: RadixColors.limeA.limeA8,
+  lime9: RadixColors.limeA.limeA9,
+  lime10: RadixColors.limeA.limeA10,
+  lime11: RadixColors.limeA.limeA11,
+  lime12: RadixColors.limeA.limeA12,
+
+  bronze1: RadixColors.bronzeA.bronzeA1,
+  bronze2: RadixColors.bronzeA.bronzeA2,
+  bronze3: RadixColors.bronzeA.bronzeA3,
+  bronze4: RadixColors.bronzeA.bronzeA4,
+  bronze5: RadixColors.bronzeA.bronzeA5,
+  bronze6: RadixColors.bronzeA.bronzeA6,
+  bronze7: RadixColors.bronzeA.bronzeA7,
+  bronze8: RadixColors.bronzeA.bronzeA8,
+  bronze9: RadixColors.bronzeA.bronzeA9,
+  bronze10: RadixColors.bronzeA.bronzeA10,
+  bronze11: RadixColors.bronzeA.bronzeA11,
+  bronze12: RadixColors.bronzeA.bronzeA12,
+
+  gold1: RadixColors.goldA.goldA1,
+  gold2: RadixColors.goldA.goldA2,
+  gold3: RadixColors.goldA.goldA3,
+  gold4: RadixColors.goldA.goldA4,
+  gold5: RadixColors.goldA.goldA5,
+  gold6: RadixColors.goldA.goldA6,
+  gold7: RadixColors.goldA.goldA7,
+  gold8: RadixColors.goldA.goldA8,
+  gold9: RadixColors.goldA.goldA9,
+  gold10: RadixColors.goldA.goldA10,
+  gold11: RadixColors.goldA.goldA11,
+  gold12: RadixColors.goldA.goldA12,
+
+  brown1: RadixColors.brownA.brownA1,
+  brown2: RadixColors.brownA.brownA2,
+  brown3: RadixColors.brownA.brownA3,
+  brown4: RadixColors.brownA.brownA4,
+  brown5: RadixColors.brownA.brownA5,
+  brown6: RadixColors.brownA.brownA6,
+  brown7: RadixColors.brownA.brownA7,
+  brown8: RadixColors.brownA.brownA8,
+  brown9: RadixColors.brownA.brownA9,
+  brown10: RadixColors.brownA.brownA10,
+  brown11: RadixColors.brownA.brownA11,
+  brown12: RadixColors.brownA.brownA12,
+
+  amber1: RadixColors.amberA.amberA1,
+  amber2: RadixColors.amberA.amberA2,
+  amber3: RadixColors.amberA.amberA3,
+  amber4: RadixColors.amberA.amberA4,
+  amber5: RadixColors.amberA.amberA5,
+  amber6: RadixColors.amberA.amberA6,
+  amber7: RadixColors.amberA.amberA7,
+  amber8: RadixColors.amberA.amberA8,
+  amber9: RadixColors.amberA.amberA9,
+  amber10: RadixColors.amberA.amberA10,
+  amber11: RadixColors.amberA.amberA11,
+  amber12: RadixColors.amberA.amberA12,
+};

packages/twenty-new-ui/src/theme/index.ts

@@ -0,0 +1,55 @@
+/*
+ * _____                    _
+ *|_   _|_      _____ _ __ | |_ _   _
+ *  | | \ \ /\ / / _ \ '_ \| __| | | | Auto-generated file
+ *  | |  \ V  V /  __/ | | | |_| |_| | Any edits to this will be overridden
+ *  |_|   \_/\_/ \___|_| |_|\__|\__, |
+ *                              |___/
+ */
+
+export { ACCENT_DARK } from './constants/AccentDark';
+export { ACCENT_LIGHT } from './constants/AccentLight';
+export type { AnimationDuration } from './constants/Animation';
+export { ANIMATION } from './constants/Animation';
+export { BACKGROUND_DARK } from './constants/BackgroundDark';
+export { BACKGROUND_LIGHT } from './constants/BackgroundLight';
+export { BLUR_DARK } from './constants/BlurDark';
+export { BLUR_LIGHT } from './constants/BlurLight';
+export { BORDER_COMMON } from './constants/BorderCommon';
+export { BORDER_DARK } from './constants/BorderDark';
+export { BORDER_LIGHT } from './constants/BorderLight';
+export { BOX_SHADOW_DARK } from './constants/BoxShadowDark';
+export { BOX_SHADOW_LIGHT } from './constants/BoxShadowLight';
+export { CODE_DARK } from './constants/CodeDark';
+export { CODE_LIGHT } from './constants/CodeLight';
+export { COLOR_DARK } from './constants/ColorsDark';
+export { COLOR_LIGHT } from './constants/ColorsLight';
+export { DEFAULT_THEME_COLOR_FALLBACK } from './constants/DefaultThemeColorFallback';
+export { FONT_COMMON } from './constants/FontCommon';
+export { FONT_DARK } from './constants/FontDark';
+export { FONT_LIGHT } from './constants/FontLight';
+export { GRAY_SCALE_DARK } from './constants/GrayScaleDark';
+export { GRAY_SCALE_DARK_ALPHA } from './constants/GrayScaleDarkAlpha';
+export { GRAY_SCALE_LIGHT } from './constants/GrayScaleLight';
+export { GRAY_SCALE_LIGHT_ALPHA } from './constants/GrayScaleLightAlpha';
+export { ICON } from './constants/Icon';
+export { ILLUSTRATION_ICON_DARK } from './constants/IllustrationIconDark';
+export { ILLUSTRATION_ICON_LIGHT } from './constants/IllustrationIconLight';
+export type { ThemeColor } from './constants/MainColorNames';
+export { MAIN_COLOR_NAMES } from './constants/MainColorNames';
+export { MAIN_COLORS_DARK } from './constants/MainColorsDark';
+export { MAIN_COLORS_LIGHT } from './constants/MainColorsLight';
+export { MODAL } from './constants/Modal';
+export { RGBA } from './constants/Rgba';
+export { SECONDARY_COLORS_DARK } from './constants/SecondaryColorsDark';
+export { SECONDARY_COLORS_LIGHT } from './constants/SecondaryColorsLight';
+export { SNACK_BAR_DARK } from './constants/SnackBarDark';
+export { SNACK_BAR_LIGHT } from './constants/SnackBarLight';
+export { TAG_DARK } from './constants/TagDark';
+export { TAG_LIGHT } from './constants/TagLight';
+export { TEXT } from './constants/Text';
+export { THEME_COMMON } from './constants/ThemeCommon';
+export { THEME_DARK } from './constants/ThemeDark';
+export { THEME_LIGHT } from './constants/ThemeLight';
+export { TRANSPARENT_COLORS_DARK } from './constants/TransparentColorsDark';
+export { TRANSPARENT_COLORS_LIGHT } from './constants/TransparentColorsLight';

packages/twenty-new-ui/src/utilities/index.ts

@@ -0,0 +1,2 @@
+// Auto-generated barrel placeholder — populated as components migrate into this entry point.
+export {};

packages/twenty-new-ui/src/vite-env.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="vite/client" />
+/// <reference types="vite-plugin-svgr/client" />

packages/twenty-new-ui/tsconfig.json

@@ -0,0 +1,30 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "target": "ES2020",
+    "jsx": "react-jsx",
+    "allowJs": false,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "moduleResolution": "bundler",
+    "esModuleInterop": true,
+    "noEmit": true,
+    "types": ["node", "jest"],
+    "outDir": "../../.cache/tsc",
+    "paths": {
+      "@new-ui/*": ["./src/*"],
+      "@assets/*": ["./src/assets/*"],
+      "@styles/*": ["./src/styles/*"]
+    }
+  },
+  "include": [
+    "src/**/*.ts",
+    "src/**/*.tsx",
+    "src/**/*.d.ts",
+    ".storybook/*.ts",
+    ".storybook/*.tsx",
+    "jest.config.mjs",
+    "setupTests.ts",
+    "vite.config.ts"
+  ]
+}

packages/twenty-new-ui/tsconfig.lib.json

@@ -0,0 +1,22 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "declaration": true,
+    "declarationMap": true,
+    "noEmit": false
+  },
+  "include": [
+    "src/**/*.d.ts",
+    "src/**/*.scss.d.ts",
+    "src/**/*.ts",
+    "src/**/*.tsx"
+  ],
+  "exclude": [
+    "**/*.spec.ts",
+    "**/*.spec.tsx",
+    "**/*.stories.ts",
+    "**/*.stories.tsx",
+    "**/*.test.ts",
+    "**/*.test.tsx"
+  ]
+}

packages/twenty-new-ui/vite.config.individual.ts

@@ -0,0 +1,78 @@
+import react from '@vitejs/plugin-react-swc';
+import * as path from 'path';
+import { defineConfig } from 'vite';
+import svgr from 'vite-plugin-svgr';
+import tsconfigPaths from 'vite-tsconfig-paths';
+
+import packageJson from './package.json';
+
+const depNames = Object.keys(packageJson.dependencies || {});
+
+const isExternal = (id: string): boolean =>
+  depNames.some((dep) => id === dep || id.startsWith(dep + '/'));
+
+export default defineConfig(() => {
+  return {
+    resolve: {
+      alias: {
+        '@new-ui/': path.resolve(__dirname, 'src') + '/',
+        '@assets/': path.resolve(__dirname, 'src/assets') + '/',
+        '@styles/': path.resolve(__dirname, 'src/styles') + '/',
+      },
+    },
+    css: {
+      modules: {
+        localsConvention: 'camelCaseOnly',
+      },
+      preprocessorOptions: {
+        scss: {
+          api: 'modern-compiler',
+          loadPaths: [path.resolve(__dirname, 'src/styles')],
+          additionalData: [
+            `@use 'abstracts/functions' as *;`,
+            `@use 'abstracts/mixins' as *;`,
+            `@use 'abstracts/breakpoints' as *;`,
+            '',
+          ].join('\n'),
+        },
+      },
+    },
+    root: __dirname,
+    cacheDir: '../../node_modules/.vite/packages/twenty-new-ui-individual',
+    assetsInclude: ['src/**/*.svg'],
+    plugins: [
+      react(),
+      tsconfigPaths({
+        root: __dirname,
+        projects: ['tsconfig.json'],
+      }),
+      svgr(),
+    ],
+    build: {
+      cssCodeSplit: false,
+      minify: 'esbuild',
+      sourcemap: true,
+      outDir: './dist/individual',
+      emptyOutDir: true,
+      commonjsOptions: {
+        transformMixedEsModules: true,
+        interopDefault: true,
+        defaultIsModuleExports: true,
+        requireReturnsDefault: 'auto',
+      },
+      lib: {
+        entry: 'src/individual-entry.ts',
+        formats: ['es'],
+      },
+      rollupOptions: {
+        external: isExternal,
+        output: {
+          preserveModules: true,
+          preserveModulesRoot: 'src',
+          entryFileNames: '[name].js',
+        },
+      },
+    },
+    logLevel: 'warn',
+  };
+});

packages/twenty-new-ui/vite.config.ts

@@ -0,0 +1,170 @@
+import react from '@vitejs/plugin-react-swc';
+import * as fs from 'fs';
+import * as path from 'path';
+import { defineConfig } from 'vite';
+import checker from 'vite-plugin-checker';
+import dts, { type PluginOptions } from 'vite-plugin-dts';
+import sassDts from 'vite-plugin-sass-dts';
+import svgr from 'vite-plugin-svgr';
+import tsconfigPaths from 'vite-tsconfig-paths';
+
+type Checkers = Parameters<typeof checker>[0];
+
+import packageJson from './package.json';
+
+const entries = Object.keys(packageJson.exports)
+  .filter((el) => !el.endsWith('.css'))
+  .map((module) => `src/${module}/index.ts`);
+
+const entryFileNames = (chunk: any, extension: 'cjs' | 'mjs') => {
+  if (!chunk.isEntry) {
+    throw new Error(
+      `Should never occurs, encountered a non entry chunk ${chunk.facadeModuleId}`,
+    );
+  }
+
+  const splitFaceModuleId = chunk.facadeModuleId?.split('/');
+  if (splitFaceModuleId === undefined) {
+    throw new Error(
+      `Should never occurs splitFaceModuleId is undefined ${chunk.facadeModuleId}`,
+    );
+  }
+
+  const moduleDirectory = splitFaceModuleId[splitFaceModuleId?.length - 2];
+  if (moduleDirectory === 'src') {
+    return `${chunk.name}.${extension}`;
+  }
+  return `${moduleDirectory}.${extension}`;
+};
+
+export default defineConfig(({ command }) => {
+  const isBuildCommand = command === 'build';
+
+  const tsConfigPath = isBuildCommand
+    ? path.resolve(__dirname, './tsconfig.lib.json')
+    : path.resolve(__dirname, './tsconfig.json');
+
+  const checkersConfig: Checkers = {
+    typescript: {
+      tsconfigPath: tsConfigPath,
+    },
+  };
+
+  const dtsConfig: PluginOptions = {
+    entryRoot: 'src',
+    tsconfigPath: tsConfigPath,
+  };
+
+  const BUNDLED_DEPS = ['@tabler/icons-react'];
+
+  const externalDeps = Object.keys(packageJson.dependencies || {}).filter(
+    (dep) => !BUNDLED_DEPS.includes(dep),
+  );
+
+  return {
+    resolve: {
+      alias: {
+        '@new-ui/': path.resolve(__dirname, 'src') + '/',
+        '@assets/': path.resolve(__dirname, 'src/assets') + '/',
+        '@styles/': path.resolve(__dirname, 'src/styles') + '/',
+        '@tabler/icons-react': '@tabler/icons-react/dist/esm/icons/index.mjs',
+      },
+    },
+    css: {
+      modules: {
+        localsConvention: 'camelCaseOnly',
+      },
+      preprocessorOptions: {
+        scss: {
+          api: 'modern-compiler',
+          loadPaths: [path.resolve(__dirname, 'src/styles')],
+          additionalData: [
+            `@use 'abstracts/functions' as *;`,
+            `@use 'abstracts/mixins' as *;`,
+            `@use 'abstracts/breakpoints' as *;`,
+            '',
+          ].join('\n'),
+        },
+      },
+    },
+    optimizeDeps: {
+      exclude: ['../../node_modules/.vite', '../../node_modules/.cache'],
+    },
+    root: __dirname,
+    cacheDir: '../../node_modules/.vite/packages/twenty-new-ui',
+    assetsInclude: ['src/**/*.svg'],
+    plugins: [
+      react(),
+      tsconfigPaths({
+        root: __dirname,
+        projects: ['tsconfig.json'],
+      }),
+      svgr(),
+      // Generates typed *.module.scss.d.ts siblings (dev mode only — backed by
+      // sass-embedded). CI/build relies on the ambient src/scss-modules.d.ts.
+      sassDts({ esmExport: true, legacyFileFormat: true }),
+      dts(dtsConfig),
+      checker(checkersConfig),
+      {
+        name: 'copy-theme-css',
+        closeBundle() {
+          const distDir = path.resolve(__dirname, 'dist');
+          fs.mkdirSync(distDir, { recursive: true });
+          const themeCssFiles = ['theme-light.css', 'theme-dark.css'];
+          for (const file of themeCssFiles) {
+            fs.copyFileSync(
+              path.resolve(__dirname, `src/theme-constants/${file}`),
+              path.resolve(distDir, file),
+            );
+          }
+        },
+      },
+    ],
+    build: {
+      cssCodeSplit: false,
+      minify: 'esbuild',
+      sourcemap: false,
+      emptyOutDir: false,
+      outDir: './dist',
+      reportCompressedSize: true,
+      commonjsOptions: {
+        transformMixedEsModules: true,
+        interopDefault: true,
+        defaultIsModuleExports: true,
+        requireReturnsDefault: 'auto',
+      },
+      lib: {
+        entry: ['src/index.ts', ...entries],
+        name: 'twenty-new-ui',
+      },
+      rollupOptions: {
+        external: (id: string) =>
+          externalDeps.some((dep) => id === dep || id.startsWith(dep + '/')),
+        output: [
+          {
+            assetFileNames: 'style.css',
+            globals: {
+              react: 'React',
+              'react-dom': 'ReactDOM',
+            },
+            format: 'es',
+            entryFileNames: (chunk) => entryFileNames(chunk, 'mjs'),
+          },
+          {
+            assetFileNames: 'style.css',
+            format: 'cjs',
+            globals: {
+              react: 'React',
+              'react-dom': 'ReactDOM',
+            },
+            interop: 'auto',
+            esModule: true,
+            exports: 'named',
+            entryFileNames: (chunk) => entryFileNames(chunk, 'cjs'),
+          },
+        ],
+      },
+    },
+    logLevel: 'error',
+  };
+});

packages/twenty-new-ui/vitest.config.ts

@@ -0,0 +1,51 @@
+import { argosVitestPlugin } from '@argos-ci/storybook/vitest-plugin';
+import { storybookTest } from '@storybook/addon-vitest/vitest-plugin';
+import { playwright } from '@vitest/browser-playwright';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+import { defineConfig } from 'vitest/config';
+
+const MINUTES_IN_MS = 60 * 1000;
+
+const dirname =
+  typeof __dirname !== 'undefined'
+    ? __dirname
+    : path.dirname(fileURLToPath(import.meta.url));
+
+export default defineConfig({
+  test: {
+    projects: [
+      {
+        extends: './vite.config.ts',
+        plugins: [
+          storybookTest({
+            configDir: path.join(dirname, '.storybook'),
+            ...(process.env.STORYBOOK_URL
+              ? { storybookUrl: process.env.STORYBOOK_URL }
+              : { storybookScript: 'yarn storybook --no-open --port 6008' }),
+          }),
+          argosVitestPlugin({
+            uploadToArgos: !!process.env.ARGOS_TOKEN,
+            token: process.env.ARGOS_TOKEN,
+            apiBaseUrl: process.env.ARGOS_API_BASE_URL,
+            buildName: process.env.ARGOS_BUILD_NAME || undefined,
+            branch: process.env.ARGOS_BRANCH || undefined,
+            commit: process.env.ARGOS_COMMIT || undefined,
+            referenceCommit: process.env.ARGOS_REFERENCE_COMMIT || undefined,
+          }),
+        ],
+        test: {
+          name: 'storybook',
+          browser: {
+            enabled: true,
+            headless: true,
+            provider: playwright({}),
+            instances: [{ browser: 'chromium' }],
+          },
+          setupFiles: ['./.storybook/vitest.setup.ts'],
+          testTimeout: 5 * MINUTES_IN_MS,
+        },
+      },
+    ],
+  },
+});

yarn.lock

@@ -4261,6 +4261,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/runtime@npm:^7.29.2":
+  version: 7.29.7
+  resolution: "@babel/runtime@npm:7.29.7"
+  checksum: 10c0/ca11572f7146b21e0bde6a9ed4bb6a89eafbee5f0944c7eb54d0d8a2dac962c33638a1d611e14faa71dfbb92b4b5f9236232208568a6b7d5c6f3f39ddb91771e
+  languageName: node
+  linkType: hard
+
 "@babel/template@npm:^7.18.10, @babel/template@npm:^7.22.15, @babel/template@npm:^7.25.9, @babel/template@npm:^7.27.2, @babel/template@npm:^7.3.3":
   version: 7.27.2
   resolution: "@babel/template@npm:7.27.2"
@@ -4379,6 +4386,32 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@base-ui/react@npm:^1.5.0":
+  version: 1.5.0
+  resolution: "@base-ui/react@npm:1.5.0"
+  dependencies:
+    "@babel/runtime": "npm:^7.29.2"
+    "@base-ui/utils": "npm:0.2.9"
+    "@floating-ui/react-dom": "npm:^2.1.8"
+    "@floating-ui/utils": "npm:^0.2.11"
+    use-sync-external-store: "npm:^1.6.0"
+  peerDependencies:
+    "@date-fns/tz": ^1.2.0
+    "@types/react": ^17 || ^18 || ^19
+    date-fns: ^4.0.0
+    react: ^17 || ^18 || ^19
+    react-dom: ^17 || ^18 || ^19
+  peerDependenciesMeta:
+    "@date-fns/tz":
+      optional: true
+    "@types/react":
+      optional: true
+    date-fns:
+      optional: true
+  checksum: 10c0/ba0f00149d7500d39e0e790b4b6cf19c002f4281508b6076ed1e367ca9a4946eb345e98d4c0dd0ab8e1613807bdcac9d9ad07f6c6d19c3b243a022bb30cbb61b
+  languageName: node
+  linkType: hard
+
 "@base-ui/utils@npm:0.2.6, @base-ui/utils@npm:^0.2.6":
   version: 0.2.6
   resolution: "@base-ui/utils@npm:0.2.6"
@@ -4398,6 +4431,25 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@base-ui/utils@npm:0.2.9":
+  version: 0.2.9
+  resolution: "@base-ui/utils@npm:0.2.9"
+  dependencies:
+    "@babel/runtime": "npm:^7.29.2"
+    "@floating-ui/utils": "npm:^0.2.11"
+    reselect: "npm:^5.1.1"
+    use-sync-external-store: "npm:^1.6.0"
+  peerDependencies:
+    "@types/react": ^17 || ^18 || ^19
+    react: ^17 || ^18 || ^19
+    react-dom: ^17 || ^18 || ^19
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+  checksum: 10c0/169a67fb6a4d86d3ce9fb12bc1e8cb02a67ad3d16872c81798cd6a532c9277383c4066c88356a9813499a87b93b4bf255ea035ea3c6f7298c52adeb1e8e846ce
+  languageName: node
+  linkType: hard
+
 "@bcoe/v8-coverage@npm:^0.2.3":
   version: 0.2.3
   resolution: "@bcoe/v8-coverage@npm:0.2.3"
@@ -4580,6 +4632,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@bufbuild/protobuf@npm:^2.5.0":
+  version: 2.12.0
+  resolution: "@bufbuild/protobuf@npm:2.12.0"
+  checksum: 10c0/28959e371fd2e7c8d67d52af9e3c8f8e6770e2e116dcc5508f469ca736afa6905e216bc76183835898a5f3deb8aa2e7db47d4a0e706fba76115e9a1996893191
+  languageName: node
+  linkType: hard
+
 "@bufbuild/protobuf@npm:^2.6.2":
   version: 2.10.1
   resolution: "@bufbuild/protobuf@npm:2.10.1"
@@ -15696,6 +15755,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@parcel/watcher-android-arm64@npm:2.5.6":
+  version: 2.5.6
+  resolution: "@parcel/watcher-android-arm64@npm:2.5.6"
+  conditions: os=android & cpu=arm64
+  languageName: node
+  linkType: hard
+
 "@parcel/watcher-darwin-arm64@npm:2.4.1":
   version: 2.4.1
   resolution: "@parcel/watcher-darwin-arm64@npm:2.4.1"
@@ -15703,6 +15769,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@parcel/watcher-darwin-arm64@npm:2.5.6":
+  version: 2.5.6
+  resolution: "@parcel/watcher-darwin-arm64@npm:2.5.6"
+  conditions: os=darwin & cpu=arm64
+  languageName: node
+  linkType: hard
+
 "@parcel/watcher-darwin-x64@npm:2.4.1":
   version: 2.4.1
   resolution: "@parcel/watcher-darwin-x64@npm:2.4.1"
@@ -15710,6 +15783,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@parcel/watcher-darwin-x64@npm:2.5.6":
+  version: 2.5.6
+  resolution: "@parcel/watcher-darwin-x64@npm:2.5.6"
+  conditions: os=darwin & cpu=x64
+  languageName: node
+  linkType: hard
+
 "@parcel/watcher-freebsd-x64@npm:2.4.1":
   version: 2.4.1
   resolution: "@parcel/watcher-freebsd-x64@npm:2.4.1"
@@ -15717,6 +15797,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@parcel/watcher-freebsd-x64@npm:2.5.6":
+  version: 2.5.6
+  resolution: "@parcel/watcher-freebsd-x64@npm:2.5.6"
+  conditions: os=freebsd & cpu=x64
+  languageName: node
+  linkType: hard
+
 "@parcel/watcher-linux-arm-glibc@npm:2.4.1":
   version: 2.4.1
   resolution: "@parcel/watcher-linux-arm-glibc@npm:2.4.1"
@@ -15724,6 +15811,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@parcel/watcher-linux-arm-glibc@npm:2.5.6":
+  version: 2.5.6
+  resolution: "@parcel/watcher-linux-arm-glibc@npm:2.5.6"
+  conditions: os=linux & cpu=arm & libc=glibc
+  languageName: node
+  linkType: hard
+
+"@parcel/watcher-linux-arm-musl@npm:2.5.6":
+  version: 2.5.6
+  resolution: "@parcel/watcher-linux-arm-musl@npm:2.5.6"
+  conditions: os=linux & cpu=arm & libc=musl
+  languageName: node
+  linkType: hard
+
 "@parcel/watcher-linux-arm64-glibc@npm:2.4.1":
   version: 2.4.1
   resolution: "@parcel/watcher-linux-arm64-glibc@npm:2.4.1"
@@ -15731,6 +15832,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@parcel/watcher-linux-arm64-glibc@npm:2.5.6":
+  version: 2.5.6
+  resolution: "@parcel/watcher-linux-arm64-glibc@npm:2.5.6"
+  conditions: os=linux & cpu=arm64 & libc=glibc
+  languageName: node
+  linkType: hard
+
 "@parcel/watcher-linux-arm64-musl@npm:2.4.1":
   version: 2.4.1
   resolution: "@parcel/watcher-linux-arm64-musl@npm:2.4.1"
@@ -15738,6 +15846,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@parcel/watcher-linux-arm64-musl@npm:2.5.6":
+  version: 2.5.6
+  resolution: "@parcel/watcher-linux-arm64-musl@npm:2.5.6"
+  conditions: os=linux & cpu=arm64 & libc=musl
+  languageName: node
+  linkType: hard
+
 "@parcel/watcher-linux-x64-glibc@npm:2.4.1":
   version: 2.4.1
   resolution: "@parcel/watcher-linux-x64-glibc@npm:2.4.1"
@@ -15745,6 +15860,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@parcel/watcher-linux-x64-glibc@npm:2.5.6":
+  version: 2.5.6
+  resolution: "@parcel/watcher-linux-x64-glibc@npm:2.5.6"
+  conditions: os=linux & cpu=x64 & libc=glibc
+  languageName: node
+  linkType: hard
+
 "@parcel/watcher-linux-x64-musl@npm:2.4.1":
   version: 2.4.1
   resolution: "@parcel/watcher-linux-x64-musl@npm:2.4.1"
@@ -15752,6 +15874,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@parcel/watcher-linux-x64-musl@npm:2.5.6":
+  version: 2.5.6
+  resolution: "@parcel/watcher-linux-x64-musl@npm:2.5.6"
+  conditions: os=linux & cpu=x64 & libc=musl
+  languageName: node
+  linkType: hard
+
 "@parcel/watcher-win32-arm64@npm:2.4.1":
   version: 2.4.1
   resolution: "@parcel/watcher-win32-arm64@npm:2.4.1"
@@ -15759,6 +15888,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@parcel/watcher-win32-arm64@npm:2.5.6":
+  version: 2.5.6
+  resolution: "@parcel/watcher-win32-arm64@npm:2.5.6"
+  conditions: os=win32 & cpu=arm64
+  languageName: node
+  linkType: hard
+
 "@parcel/watcher-win32-ia32@npm:2.4.1":
   version: 2.4.1
   resolution: "@parcel/watcher-win32-ia32@npm:2.4.1"
@@ -15766,6 +15902,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@parcel/watcher-win32-ia32@npm:2.5.6":
+  version: 2.5.6
+  resolution: "@parcel/watcher-win32-ia32@npm:2.5.6"
+  conditions: os=win32 & cpu=ia32
+  languageName: node
+  linkType: hard
+
 "@parcel/watcher-win32-x64@npm:2.4.1":
   version: 2.4.1
   resolution: "@parcel/watcher-win32-x64@npm:2.4.1"
@@ -15773,6 +15916,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@parcel/watcher-win32-x64@npm:2.5.6":
+  version: 2.5.6
+  resolution: "@parcel/watcher-win32-x64@npm:2.5.6"
+  conditions: os=win32 & cpu=x64
+  languageName: node
+  linkType: hard
+
 "@parcel/watcher@npm:^2.1.0":
   version: 2.4.1
   resolution: "@parcel/watcher@npm:2.4.1"
@@ -15823,6 +15973,59 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@parcel/watcher@npm:^2.4.1":
+  version: 2.5.6
+  resolution: "@parcel/watcher@npm:2.5.6"
+  dependencies:
+    "@parcel/watcher-android-arm64": "npm:2.5.6"
+    "@parcel/watcher-darwin-arm64": "npm:2.5.6"
+    "@parcel/watcher-darwin-x64": "npm:2.5.6"
+    "@parcel/watcher-freebsd-x64": "npm:2.5.6"
+    "@parcel/watcher-linux-arm-glibc": "npm:2.5.6"
+    "@parcel/watcher-linux-arm-musl": "npm:2.5.6"
+    "@parcel/watcher-linux-arm64-glibc": "npm:2.5.6"
+    "@parcel/watcher-linux-arm64-musl": "npm:2.5.6"
+    "@parcel/watcher-linux-x64-glibc": "npm:2.5.6"
+    "@parcel/watcher-linux-x64-musl": "npm:2.5.6"
+    "@parcel/watcher-win32-arm64": "npm:2.5.6"
+    "@parcel/watcher-win32-ia32": "npm:2.5.6"
+    "@parcel/watcher-win32-x64": "npm:2.5.6"
+    detect-libc: "npm:^2.0.3"
+    is-glob: "npm:^4.0.3"
+    node-addon-api: "npm:^7.0.0"
+    node-gyp: "npm:latest"
+    picomatch: "npm:^4.0.3"
+  dependenciesMeta:
+    "@parcel/watcher-android-arm64":
+      optional: true
+    "@parcel/watcher-darwin-arm64":
+      optional: true
+    "@parcel/watcher-darwin-x64":
+      optional: true
+    "@parcel/watcher-freebsd-x64":
+      optional: true
+    "@parcel/watcher-linux-arm-glibc":
+      optional: true
+    "@parcel/watcher-linux-arm-musl":
+      optional: true
+    "@parcel/watcher-linux-arm64-glibc":
+      optional: true
+    "@parcel/watcher-linux-arm64-musl":
+      optional: true
+    "@parcel/watcher-linux-x64-glibc":
+      optional: true
+    "@parcel/watcher-linux-x64-musl":
+      optional: true
+    "@parcel/watcher-win32-arm64":
+      optional: true
+    "@parcel/watcher-win32-ia32":
+      optional: true
+    "@parcel/watcher-win32-x64":
+      optional: true
+  checksum: 10c0/1e1d91f92e94e4640089a7cead243b2b81ca9aa8e1c862a97a25f589e84fbf1ad93abeb503f325c43a8c0e024ae0e74b48ec42c1cd84e8e423a3a87d25ded4f2
+  languageName: node
+  linkType: hard
+
 "@peculiar/asn1-schema@npm:^2.3.8":
   version: 2.3.13
   resolution: "@peculiar/asn1-schema@npm:2.3.13"
@@ -19095,6 +19298,40 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@size-limit/esbuild@npm:11.2.0":
+  version: 11.2.0
+  resolution: "@size-limit/esbuild@npm:11.2.0"
+  dependencies:
+    esbuild: "npm:^0.25.0"
+    nanoid: "npm:^5.1.0"
+  peerDependencies:
+    size-limit: 11.2.0
+  checksum: 10c0/8740fd6f86d0be14bd7492781a9611f12fdbeafefa590ed485ce4f1768b521da8847c5ab314253bd0bb6decb50b5b5fe8f3cba7adc5cc9e55ebccbad6a161df3
+  languageName: node
+  linkType: hard
+
+"@size-limit/file@npm:11.2.0":
+  version: 11.2.0
+  resolution: "@size-limit/file@npm:11.2.0"
+  peerDependencies:
+    size-limit: 11.2.0
+  checksum: 10c0/25fb431c2afa9293774842f3abb12ee0aaa988585a2be545f2a4f90ffd5c638a13bada10a0b71e376cefb426bd991793d0e1ffe970b94a4e0bb8b0a8b504f343
+  languageName: node
+  linkType: hard
+
+"@size-limit/preset-small-lib@npm:^11.1.6":
+  version: 11.2.0
+  resolution: "@size-limit/preset-small-lib@npm:11.2.0"
+  dependencies:
+    "@size-limit/esbuild": "npm:11.2.0"
+    "@size-limit/file": "npm:11.2.0"
+    size-limit: "npm:11.2.0"
+  peerDependencies:
+    size-limit: 11.2.0
+  checksum: 10c0/3b1f55fde435794d83245687bc4e2e6996ddb178c774af62b57754e9b7d6ea1db3ef041f0706bd1ffb45da2fa52eba50594ce92ab312637e4198ee06274de673
+  languageName: node
+  linkType: hard
+
 "@smithy/abort-controller@npm:^4.2.10":
   version: 4.2.10
   resolution: "@smithy/abort-controller@npm:4.2.10"
@@ -20448,6 +20685,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@storybook/addon-a11y@npm:^10.3.3":
+  version: 10.4.1
+  resolution: "@storybook/addon-a11y@npm:10.4.1"
+  dependencies:
+    "@storybook/global": "npm:^5.0.0"
+    axe-core: "npm:^4.2.0"
+  peerDependencies:
+    storybook: ^10.4.1
+  checksum: 10c0/2a051276db77dbf196b0c509aae6e49e1d1a722db1ecd3a73fa60ff8c1d88e61900f9c31a66201cedab8dd555718fca407099b4f27662fd3d9404b2096770344
+  languageName: node
+  linkType: hard
+
 "@storybook/addon-coverage@npm:^3.0.0":
   version: 3.0.0
   resolution: "@storybook/addon-coverage@npm:3.0.0"
@@ -24304,7 +24553,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@vitest/browser-playwright@npm:^4.0.18":
+"@vitest/browser-playwright@npm:4.0.18, @vitest/browser-playwright@npm:^4.0.18":
   version: 4.0.18
   resolution: "@vitest/browser-playwright@npm:4.0.18"
   dependencies:
@@ -27848,6 +28097,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"axe-core@npm:^4.2.0":
+  version: 4.11.4
+  resolution: "axe-core@npm:4.11.4"
+  checksum: 10c0/c4aa83fc3eac5f7a0d0cb1a28f9d073acf0c06ce8daacc38608faa278c57ce084c028c850746b98817ae4c101c30c1a32e95ea34748c4b4c7419b9b81221ef84
+  languageName: node
+  linkType: hard
+
 "axios-retry@npm:^4.5.0":
   version: 4.5.0
   resolution: "axios-retry@npm:4.5.0"
@@ -29102,6 +29358,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"bytes-iec@npm:^3.1.1":
+  version: 3.1.1
+  resolution: "bytes-iec@npm:3.1.1"
+  checksum: 10c0/cb553a214d49afe2efb4f9f6f03c0a76dbf2b0db8fe176c1d9943f74b79fb36767938e5f0a60991d870309c96f21e440904dd4f92b54c9c316c88486e6eef025
+  languageName: node
+  linkType: hard
+
 "bytes@npm:3.1.2, bytes@npm:^3.1.2, bytes@npm:~3.1.2":
   version: 3.1.2
   resolution: "bytes@npm:3.1.2"
@@ -30465,6 +30728,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"colorjs.io@npm:^0.5.0":
+  version: 0.5.2
+  resolution: "colorjs.io@npm:0.5.2"
+  checksum: 10c0/2e6ea43629e325e721b92429239de3a6f42fb6d88ba6e4c2aeff0288c196d876f2f7ee82aea95bd40072d5cdc8cb87f042f4d94c134dcabf0e34a717e4caacb9
+  languageName: node
+  linkType: hard
+
 "colors@npm:1.0.3":
   version: 1.0.3
   resolution: "colors@npm:1.0.3"
@@ -38460,6 +38730,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"immutable@npm:^5.1.5":
+  version: 5.1.6
+  resolution: "immutable@npm:5.1.6"
+  checksum: 10c0/79eb033f68ca70fca60fb052c87b5420034e460e306ce9bea2558fd7b5e0b3b59c28c4a4653867305992b4a30e169b353175d78126c1be6ed0113794b27e3317
+  languageName: node
+  linkType: hard
+
 "immutable@npm:~3.7.6":
   version: 3.7.6
   resolution: "immutable@npm:3.7.6"
@@ -44951,6 +45228,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"nanoid@npm:^5.1.0":
+  version: 5.1.11
+  resolution: "nanoid@npm:5.1.11"
+  bin:
+    nanoid: bin/nanoid.js
+  checksum: 10c0/91580d18c29263ac0e871734f0d86e7f906f523f974d3c30fc65354ccf387ccffd606c2a6c28acc2977a3950146347e790ce9e3f514133a48995af5ccdb308ce
+  languageName: node
+  linkType: hard
+
 "nanoid@npm:^5.1.3":
   version: 5.1.6
   resolution: "nanoid@npm:5.1.6"
@@ -44960,6 +45246,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"nanospinner@npm:^1.2.2":
+  version: 1.2.2
+  resolution: "nanospinner@npm:1.2.2"
+  dependencies:
+    picocolors: "npm:^1.1.1"
+  checksum: 10c0/07264f63816a8ec24d84ffe216a605cf11dffd8b098d4c5e6790437304b47e10ce4fc341de8dbcfc1b59aa42107f9949c89bcc201239eb61a80e14b6b1a20c90
+  languageName: node
+  linkType: hard
+
 "napi-build-utils@npm:^1.0.1":
   version: 1.0.2
   resolution: "napi-build-utils@npm:1.0.2"
@@ -51609,7 +51904,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"rxjs@npm:7.8.2, rxjs@npm:^7.8.2":
+"rxjs@npm:7.8.2, rxjs@npm:^7.4.0, rxjs@npm:^7.8.2":
   version: 7.8.2
   resolution: "rxjs@npm:7.8.2"
   dependencies:
@@ -51696,6 +51991,225 @@ __metadata:
   languageName: node
   linkType: hard
 
+"sass-embedded-all-unknown@npm:1.100.0":
+  version: 1.100.0
+  resolution: "sass-embedded-all-unknown@npm:1.100.0"
+  dependencies:
+    sass: "npm:1.100.0"
+  conditions: (!cpu=arm | !cpu=arm64 | !cpu=riscv64 | !cpu=x64)
+  languageName: node
+  linkType: hard
+
+"sass-embedded-android-arm64@npm:1.100.0":
+  version: 1.100.0
+  resolution: "sass-embedded-android-arm64@npm:1.100.0"
+  conditions: os=android & cpu=arm64
+  languageName: node
+  linkType: hard
+
+"sass-embedded-android-arm@npm:1.100.0":
+  version: 1.100.0
+  resolution: "sass-embedded-android-arm@npm:1.100.0"
+  conditions: os=android & cpu=arm
+  languageName: node
+  linkType: hard
+
+"sass-embedded-android-riscv64@npm:1.100.0":
+  version: 1.100.0
+  resolution: "sass-embedded-android-riscv64@npm:1.100.0"
+  conditions: os=android & cpu=riscv64
+  languageName: node
+  linkType: hard
+
+"sass-embedded-android-x64@npm:1.100.0":
+  version: 1.100.0
+  resolution: "sass-embedded-android-x64@npm:1.100.0"
+  conditions: os=android & cpu=x64
+  languageName: node
+  linkType: hard
+
+"sass-embedded-darwin-arm64@npm:1.100.0":
+  version: 1.100.0
+  resolution: "sass-embedded-darwin-arm64@npm:1.100.0"
+  conditions: os=darwin & cpu=arm64
+  languageName: node
+  linkType: hard
+
+"sass-embedded-darwin-x64@npm:1.100.0":
+  version: 1.100.0
+  resolution: "sass-embedded-darwin-x64@npm:1.100.0"
+  conditions: os=darwin & cpu=x64
+  languageName: node
+  linkType: hard
+
+"sass-embedded-linux-arm64@npm:1.100.0":
+  version: 1.100.0
+  resolution: "sass-embedded-linux-arm64@npm:1.100.0"
+  conditions: os=linux & cpu=arm64
+  languageName: node
+  linkType: hard
+
+"sass-embedded-linux-arm@npm:1.100.0":
+  version: 1.100.0
+  resolution: "sass-embedded-linux-arm@npm:1.100.0"
+  conditions: os=linux & cpu=arm
+  languageName: node
+  linkType: hard
+
+"sass-embedded-linux-musl-arm64@npm:1.100.0":
+  version: 1.100.0
+  resolution: "sass-embedded-linux-musl-arm64@npm:1.100.0"
+  conditions: os=linux & cpu=arm64
+  languageName: node
+  linkType: hard
+
+"sass-embedded-linux-musl-arm@npm:1.100.0":
+  version: 1.100.0
+  resolution: "sass-embedded-linux-musl-arm@npm:1.100.0"
+  conditions: os=linux & cpu=arm
+  languageName: node
+  linkType: hard
+
+"sass-embedded-linux-musl-riscv64@npm:1.100.0":
+  version: 1.100.0
+  resolution: "sass-embedded-linux-musl-riscv64@npm:1.100.0"
+  conditions: os=linux & cpu=riscv64
+  languageName: node
+  linkType: hard
+
+"sass-embedded-linux-musl-x64@npm:1.100.0":
+  version: 1.100.0
+  resolution: "sass-embedded-linux-musl-x64@npm:1.100.0"
+  conditions: os=linux & cpu=x64
+  languageName: node
+  linkType: hard
+
+"sass-embedded-linux-riscv64@npm:1.100.0":
+  version: 1.100.0
+  resolution: "sass-embedded-linux-riscv64@npm:1.100.0"
+  conditions: os=linux & cpu=riscv64
+  languageName: node
+  linkType: hard
+
+"sass-embedded-linux-x64@npm:1.100.0":
+  version: 1.100.0
+  resolution: "sass-embedded-linux-x64@npm:1.100.0"
+  conditions: os=linux & cpu=x64
+  languageName: node
+  linkType: hard
+
+"sass-embedded-unknown-all@npm:1.100.0":
+  version: 1.100.0
+  resolution: "sass-embedded-unknown-all@npm:1.100.0"
+  dependencies:
+    sass: "npm:1.100.0"
+  conditions: (!os=android | !os=darwin | !os=linux | !os=win32)
+  languageName: node
+  linkType: hard
+
+"sass-embedded-win32-arm64@npm:1.100.0":
+  version: 1.100.0
+  resolution: "sass-embedded-win32-arm64@npm:1.100.0"
+  conditions: os=win32 & cpu=arm64
+  languageName: node
+  linkType: hard
+
+"sass-embedded-win32-x64@npm:1.100.0":
+  version: 1.100.0
+  resolution: "sass-embedded-win32-x64@npm:1.100.0"
+  conditions: os=win32 & cpu=x64
+  languageName: node
+  linkType: hard
+
+"sass-embedded@npm:^1.83.0":
+  version: 1.100.0
+  resolution: "sass-embedded@npm:1.100.0"
+  dependencies:
+    "@bufbuild/protobuf": "npm:^2.5.0"
+    colorjs.io: "npm:^0.5.0"
+    immutable: "npm:^5.1.5"
+    rxjs: "npm:^7.4.0"
+    sass-embedded-all-unknown: "npm:1.100.0"
+    sass-embedded-android-arm: "npm:1.100.0"
+    sass-embedded-android-arm64: "npm:1.100.0"
+    sass-embedded-android-riscv64: "npm:1.100.0"
+    sass-embedded-android-x64: "npm:1.100.0"
+    sass-embedded-darwin-arm64: "npm:1.100.0"
+    sass-embedded-darwin-x64: "npm:1.100.0"
+    sass-embedded-linux-arm: "npm:1.100.0"
+    sass-embedded-linux-arm64: "npm:1.100.0"
+    sass-embedded-linux-musl-arm: "npm:1.100.0"
+    sass-embedded-linux-musl-arm64: "npm:1.100.0"
+    sass-embedded-linux-musl-riscv64: "npm:1.100.0"
+    sass-embedded-linux-musl-x64: "npm:1.100.0"
+    sass-embedded-linux-riscv64: "npm:1.100.0"
+    sass-embedded-linux-x64: "npm:1.100.0"
+    sass-embedded-unknown-all: "npm:1.100.0"
+    sass-embedded-win32-arm64: "npm:1.100.0"
+    sass-embedded-win32-x64: "npm:1.100.0"
+    supports-color: "npm:^8.1.1"
+    sync-child-process: "npm:^1.0.2"
+    varint: "npm:^6.0.0"
+  dependenciesMeta:
+    sass-embedded-all-unknown:
+      optional: true
+    sass-embedded-android-arm:
+      optional: true
+    sass-embedded-android-arm64:
+      optional: true
+    sass-embedded-android-riscv64:
+      optional: true
+    sass-embedded-android-x64:
+      optional: true
+    sass-embedded-darwin-arm64:
+      optional: true
+    sass-embedded-darwin-x64:
+      optional: true
+    sass-embedded-linux-arm:
+      optional: true
+    sass-embedded-linux-arm64:
+      optional: true
+    sass-embedded-linux-musl-arm:
+      optional: true
+    sass-embedded-linux-musl-arm64:
+      optional: true
+    sass-embedded-linux-musl-riscv64:
+      optional: true
+    sass-embedded-linux-musl-x64:
+      optional: true
+    sass-embedded-linux-riscv64:
+      optional: true
+    sass-embedded-linux-x64:
+      optional: true
+    sass-embedded-unknown-all:
+      optional: true
+    sass-embedded-win32-arm64:
+      optional: true
+    sass-embedded-win32-x64:
+      optional: true
+  bin:
+    sass: dist/bin/sass.js
+  checksum: 10c0/62650f86a2530614720dd38a650ebcd7c1d5115c157e2ee9f1f7e0fa64c0dd7d7d47624e0b7f3dfe6e6c080e14f9e0b3231e5edb365b7292423f0e8fcc4a7ad8
+  languageName: node
+  linkType: hard
+
+"sass@npm:1.100.0, sass@npm:^1.83.0":
+  version: 1.100.0
+  resolution: "sass@npm:1.100.0"
+  dependencies:
+    "@parcel/watcher": "npm:^2.4.1"
+    chokidar: "npm:^5.0.0"
+    immutable: "npm:^5.1.5"
+    source-map-js: "npm:>=0.6.2 <2.0.0"
+  dependenciesMeta:
+    "@parcel/watcher":
+      optional: true
+  bin:
+    sass: sass.js
+  checksum: 10c0/e2aab47c87b69d2d4f8e48fa665138548069f56a7fd0fc4e15c9bde888b715798e49d33436e873918a8849ca3cc6c141a68618f58e2f3b2e6ec179cc309ca622
+  languageName: node
+  linkType: hard
+
 "sax@npm:>=0.6.0, sax@npm:^1.2.4":
   version: 1.4.1
   resolution: "sax@npm:1.4.1"
@@ -52682,6 +53196,23 @@ __metadata:
   languageName: node
   linkType: hard
 
+"size-limit@npm:11.2.0, size-limit@npm:^11.1.6":
+  version: 11.2.0
+  resolution: "size-limit@npm:11.2.0"
+  dependencies:
+    bytes-iec: "npm:^3.1.1"
+    chokidar: "npm:^4.0.3"
+    jiti: "npm:^2.4.2"
+    lilconfig: "npm:^3.1.3"
+    nanospinner: "npm:^1.2.2"
+    picocolors: "npm:^1.1.1"
+    tinyglobby: "npm:^0.2.11"
+  bin:
+    size-limit: bin.js
+  checksum: 10c0/c3613e20dfc227074d73098bfdd6fe274aed980bf133ad61a380032425bfa8b7d749c876dea50e9648a64cd57fb768edac9ffc1927100bcadf814255e44236f1
+  languageName: node
+  linkType: hard
+
 "slash@npm:3.0.0, slash@npm:^3.0.0":
   version: 3.0.0
   resolution: "slash@npm:3.0.0"
@@ -52943,7 +53474,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"source-map-js@npm:^1.0.1, source-map-js@npm:^1.0.2, source-map-js@npm:^1.2.0, source-map-js@npm:^1.2.1":
+"source-map-js@npm:>=0.6.2 <2.0.0, source-map-js@npm:^1.0.1, source-map-js@npm:^1.0.2, source-map-js@npm:^1.2.0, source-map-js@npm:^1.2.1":
   version: 1.2.1
   resolution: "source-map-js@npm:1.2.1"
   checksum: 10c0/7bda1fc4c197e3c6ff17de1b8b2c20e60af81b63a52cb32ec5a5d67a20a7d42651e2cb34ebe93833c5a2a084377e17455854fee3e21e7925c64a51b6a52b0faf
@@ -54191,6 +54722,22 @@ __metadata:
   languageName: node
   linkType: hard
 
+"sync-child-process@npm:^1.0.2":
+  version: 1.0.2
+  resolution: "sync-child-process@npm:1.0.2"
+  dependencies:
+    sync-message-port: "npm:^1.0.0"
+  checksum: 10c0/f73c87251346fba28da8ac5bc8ed4c9474504a5250ab4bd44582beae8e25c230e0a5b7b16076488fee1aed39a1865de5ed4cec19c6fa4efdbb1081c514615170
+  languageName: node
+  linkType: hard
+
+"sync-message-port@npm:^1.0.0":
+  version: 1.2.0
+  resolution: "sync-message-port@npm:1.2.0"
+  checksum: 10c0/31071ccc1e1607649aab5f1d283b0b6544632b9e8c2e8afedae394a0e97c1454978d0e415d664db8e3b1ae48a9c4cdba8d39e79edcb86c517be06123a110efae
+  languageName: node
+  linkType: hard
+
 "synckit@npm:^0.11.8":
   version: 0.11.11
   resolution: "synckit@npm:0.11.11"
@@ -54662,6 +55209,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"tinyglobby@npm:^0.2.11":
+  version: 0.2.17
+  resolution: "tinyglobby@npm:0.2.17"
+  dependencies:
+    fdir: "npm:^6.5.0"
+    picomatch: "npm:^4.0.4"
+  checksum: 10c0/7f7bb0f197c88bc4b20c231e0deca4240ca3bf313a88f5a7fee93a872b84966a4d50220947c0455ad07a60b3b360961c5b7fd979222aeb716a9f99b412002e4c
+  languageName: node
+  linkType: hard
+
 "tinyglobby@npm:^0.2.12, tinyglobby@npm:^0.2.13, tinyglobby@npm:^0.2.14, tinyglobby@npm:^0.2.15":
   version: 0.2.16
   resolution: "tinyglobby@npm:0.2.16"
@@ -55638,6 +56195,66 @@ __metadata:
   languageName: unknown
   linkType: soft
 
+"twenty-new-ui@workspace:packages/twenty-new-ui":
+  version: 0.0.0-use.local
+  resolution: "twenty-new-ui@workspace:packages/twenty-new-ui"
+  dependencies:
+    "@argos-ci/storybook": "npm:^6.0.6"
+    "@base-ui/react": "npm:^1.5.0"
+    "@monaco-editor/react": "npm:^4.7.0"
+    "@prettier/sync": "npm:^0.5.2"
+    "@radix-ui/colors": "npm:^3.0.0"
+    "@size-limit/preset-small-lib": "npm:^11.1.6"
+    "@storybook-community/storybook-addon-cookie": "npm:^5.0.0"
+    "@storybook/addon-a11y": "npm:^10.3.3"
+    "@storybook/addon-coverage": "npm:^3.0.0"
+    "@storybook/addon-links": "npm:^10.3.3"
+    "@storybook/addon-vitest": "npm:^10.2.13"
+    "@storybook/react-vite": "npm:^10.3.3"
+    "@swc/core": "npm:^1.15.11"
+    "@swc/jest": "npm:^0.2.39"
+    "@tabler/icons-react": "npm:^3.31.0"
+    "@testing-library/dom": "npm:^10.4.0"
+    "@testing-library/jest-dom": "npm:^6.6.3"
+    "@testing-library/react": "npm:^16.3.0"
+    "@types/jest": "npm:^30.0.0"
+    "@types/react": "npm:^18.2.39"
+    "@types/react-dom": "npm:^18.2.15"
+    "@vitejs/plugin-react-swc": "npm:4.2.3"
+    "@vitest/browser-playwright": "npm:4.0.18"
+    clsx: "npm:^2.1.1"
+    date-fns: "npm:^2.30.0"
+    framer-motion: "npm:^11.18.0"
+    glob: "npm:^11.1.0"
+    hex-rgb: "npm:^5.0.0"
+    jest: "npm:29.7.0"
+    jest-environment-jsdom: "npm:30.0.0-beta.3"
+    jotai: "npm:^2.17.1"
+    prettier: "npm:^3.1.1"
+    react: "npm:^18.2.0"
+    react-dom: "npm:^18.2.0"
+    react-responsive: "npm:^9.0.2"
+    react-router-dom: "npm:^6.4.4"
+    sass: "npm:^1.83.0"
+    sass-embedded: "npm:^1.83.0"
+    size-limit: "npm:^11.1.6"
+    slash: "npm:^5.1.0"
+    storybook-addon-pseudo-states: "npm:^10.3.3"
+    ts-jest: "npm:^29.1.1"
+    tsx: "npm:^4.19.3"
+    twenty-shared: "workspace:*"
+    vite-plugin-checker: "npm:^0.10.2"
+    vite-plugin-dts: "npm:3.8.1"
+    vite-plugin-sass-dts: "npm:^1.3.31"
+    vite-plugin-svgr: "npm:^4.3.0"
+    vite-tsconfig-paths: "npm:^4.2.1"
+    vitest: "npm:4.0.18"
+    zod: "npm:^4.1.11"
+  peerDependencies:
+    monaco-editor: ">= 0.25.0 < 1"
+  languageName: unknown
+  linkType: soft
+
 "twenty-oxlint-rules@workspace:packages/twenty-oxlint-rules":
   version: 0.0.0-use.local
   resolution: "twenty-oxlint-rules@workspace:packages/twenty-oxlint-rules"
@@ -57601,6 +58218,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"varint@npm:^6.0.0":
+  version: 6.0.0
+  resolution: "varint@npm:6.0.0"
+  checksum: 10c0/737fc37088a62ed3bd21466e318d21ca7ac4991d0f25546f518f017703be4ed0f9df1c5559f1dd533dddba4435a1b758fd9230e4772c1a930ef72b42f5c750fd
+  languageName: node
+  linkType: hard
+
 "vary@npm:^1, vary@npm:^1.1.2, vary@npm:~1.1.2":
   version: 1.1.2
   resolution: "vary@npm:1.1.2"
@@ -57873,6 +58497,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"vite-plugin-sass-dts@npm:^1.3.31":
+  version: 1.3.37
+  resolution: "vite-plugin-sass-dts@npm:1.3.37"
+  dependencies:
+    postcss-js: "npm:^4.0.1"
+  peerDependencies:
+    postcss: ^8
+    prettier: ^2.7 || ^3
+    sass-embedded: ^1.78.0
+    vite: ^7 || ^8
+  checksum: 10c0/3dab77e2a6a20d471a4d81e55ac55b607f17edb9b03d6cb5871a69f195fad13fb15807267e38cc023a59174c8d1adf3b996f87c33ee4a84848befe4921970edc
+  languageName: node
+  linkType: hard
+
 "vite-plugin-svgr@npm:^4.3.0":
   version: 4.5.0
   resolution: "vite-plugin-svgr@npm:4.5.0"
@@ -57957,7 +58595,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"vitest@npm:^4.0.18":
+"vitest@npm:4.0.18, vitest@npm:^4.0.18":
   version: 4.0.18
   resolution: "vitest@npm:4.0.18"
   dependencies: