snapshot of https://github.com/twentyhq/twenty.git (main, 2026-09-17; blobs > 131072B omitted)

packages/twenty-ui/design-tokens/__tests__/themeTokenPipeline.test.ts

@@ -0,0 +1,14 @@
+import { DESIGN_TOKENS } from '../designTokens';
+import { collectLeaves } from '../pipeline/collectLeaves';
+
+const leaves = collectLeaves(DESIGN_TOKENS);
+
+describe('design token source', () => {
+  it('marks exactly the leaves that resolve to numbers as unit number', () => {
+    for (const leaf of leaves) {
+      const parsesAsNumber =
+        !Number.isNaN(Number(leaf.light)) && !Number.isNaN(Number(leaf.dark));
+      expect(leaf.unit === 'number').toBe(parsesAsNumber);
+    }
+  });
+});

packages/twenty-ui/design-tokens/accent.ts

@@ -0,0 +1,21 @@
+import { COLOR_TOKENS } from './color';
+export const ACCENT_TOKENS = {
+  primary: COLOR_TOKENS.blue5,
+  secondary: COLOR_TOKENS.blue5,
+  tertiary: COLOR_TOKENS.blue3,
+  quaternary: COLOR_TOKENS.blue2,
+  accent3570: COLOR_TOKENS.blue8,
+  accent4060: COLOR_TOKENS.blue8,
+  accent1: COLOR_TOKENS.blue1,
+  accent2: COLOR_TOKENS.blue2,
+  accent3: COLOR_TOKENS.blue3,
+  accent4: COLOR_TOKENS.blue4,
+  accent5: COLOR_TOKENS.blue5,
+  accent6: COLOR_TOKENS.blue6,
+  accent7: COLOR_TOKENS.blue7,
+  accent8: COLOR_TOKENS.blue8,
+  accent9: COLOR_TOKENS.blue9,
+  accent10: COLOR_TOKENS.blue10,
+  accent11: COLOR_TOKENS.blue11,
+  accent12: COLOR_TOKENS.blue12,
+};

packages/twenty-ui/design-tokens/animation.ts

@@ -0,0 +1,10 @@
+import { token } from './token';
+
+export const ANIMATION_TOKENS = {
+  duration: {
+    instant: token('0.075', { unit: 'number' }),
+    fast: token('0.15', { unit: 'number' }),
+    normal: token('0.3', { unit: 'number' }),
+    slow: token('1.5', { unit: 'number' }),
+  },
+};

packages/twenty-ui/design-tokens/blur.ts

@@ -0,0 +1,16 @@
+import { token } from './token';
+
+export const BLUR_TOKENS = {
+  light: token({
+    light: 'blur(6px) saturate(200%) contrast(50%) brightness(130%)',
+    dark: 'blur(6px) saturate(200%) contrast(100%) brightness(130%)',
+  }),
+  medium: token({
+    light: 'blur(12px) saturate(200%) contrast(50%) brightness(130%)',
+    dark: 'blur(12px) saturate(200%) contrast(100%) brightness(130%)',
+  }),
+  strong: token({
+    light: 'blur(20px) saturate(200%) contrast(50%) brightness(130%)',
+    dark: 'blur(20px) saturate(200%) contrast(100%) brightness(130%)',
+  }),
+};

packages/twenty-ui/design-tokens/border.ts

@@ -0,0 +1,31 @@
+import { COLOR_TOKENS } from './color';
+import { GRAY_SCALE_TOKENS } from './grayScale';
+import { token } from './token';
+
+const SM_RADIUS = token('4px');
+const MD_RADIUS = token('8px');
+
+export const BORDER_TOKENS = {
+  color: {
+    strong: GRAY_SCALE_TOKENS.gray6,
+    medium: GRAY_SCALE_TOKENS.gray5,
+    light: GRAY_SCALE_TOKENS.gray4,
+    secondaryInverted: GRAY_SCALE_TOKENS.gray11,
+    inverted: GRAY_SCALE_TOKENS.gray12,
+    danger: COLOR_TOKENS.red5,
+    blue: COLOR_TOKENS.blue7,
+    transparentStrong: COLOR_TOKENS.transparent.gray4,
+  },
+  radius: {
+    xs: token('2px'),
+    sm: SM_RADIUS,
+    md: MD_RADIUS,
+    smRound: SM_RADIUS,
+    mdRound: MD_RADIUS,
+    lg: token('16px'),
+    xl: token('20px'),
+    xxl: token('40px'),
+    pill: token('999px'),
+    rounded: token('100%'),
+  },
+};

packages/twenty-ui/design-tokens/boxShadow.ts

@@ -0,0 +1,31 @@
+import { token } from './token';
+
+export const BOX_SHADOW_TOKENS = {
+  color: token({
+    light: 'color(display-p3 0 0 0 / 0.039)',
+    dark: 'rgba(0, 0, 0, 0.6)',
+  }),
+  light: token({
+    light:
+      '0px 2px 4px 0px color(display-p3 0 0 0 / 0.039), 0px 0px 4px 0px color(display-p3 0 0 0 / 0.078)',
+    dark: '0px 2px 4px 0px rgba(0, 0, 0, 0.04), 0px 0px 4px 0px rgba(0, 0, 0, 0.08)',
+  }),
+  sidebar: token({
+    light: '-4px 4px 4px 0px rgba(0, 0, 0, 0.005)',
+    dark: '-4px 4px 4px 0px rgba(0, 0, 0, 0.03)',
+  }),
+  strong: token({
+    light:
+      '2px 4px 16px 0px color(display-p3 0 0 0 / 0.161), 0px 2px 4px 0px color(display-p3 0 0 0 / 0.078)',
+    dark: '2px 4px 16px 0px rgba(0, 0, 0, 0.16), 0px 2px 4px 0px rgba(0, 0, 0, 0.08)',
+  }),
+  underline: token({
+    light: '0px 1px 0px 0px color(display-p3 0 0 0 / 0.361)',
+    dark: '0px 1px 0px 0px rgba(0, 0, 0, 0.32)',
+  }),
+  superHeavy: token({
+    light:
+      '0px 0px 8px 0px color(display-p3 0 0 0 / 0.161), 0px 8px 64px -16px color(display-p3 0 0 0 / 0.478), 0px 24px 56px -16px color(display-p3 0 0 0 / 0.078)',
+    dark: '2px 4px 16px 0px rgba(0, 0, 0, 0.12), 0px 2px 4px 0px rgba(0, 0, 0, 0.04)',
+  }),
+};

packages/twenty-ui/design-tokens/buttons.ts

@@ -0,0 +1,6 @@
+import { ACCENT_TOKENS } from './accent';
+import { token } from './token';
+
+export const BUTTONS_TOKENS = {
+  secondaryTextColor: token(ACCENT_TOKENS.accent11.dark),
+};

packages/twenty-ui/design-tokens/code.ts

@@ -0,0 +1,15 @@
+import { COLOR_TOKENS } from './color';
+import { GRAY_SCALE_TOKENS } from './grayScale';
+import { token } from './token';
+export const CODE_TOKENS = {
+  text: {
+    gray: GRAY_SCALE_TOKENS.gray10,
+    sky: COLOR_TOKENS.sky10,
+    pink: COLOR_TOKENS.pink10,
+    orange: COLOR_TOKENS.orange8,
+    green: COLOR_TOKENS.lime8,
+  },
+  font: {
+    family: token('DM Mono'),
+  },
+};

packages/twenty-ui/design-tokens/color/amber.ts

@@ -0,0 +1,65 @@
+import { token } from '../token';
+
+export const AMBER_COLOR_TOKENS = {
+  scale: {
+    amber1: token({
+      light: 'color(display-p3 0.995 0.992 0.985)',
+      dark: 'color(display-p3 0.082 0.07 0.05)',
+    }),
+    amber2: token({
+      light: 'color(display-p3 0.994 0.986 0.921)',
+      dark: 'color(display-p3 0.111 0.094 0.064)',
+    }),
+    amber3: token({
+      light: 'color(display-p3 0.994 0.969 0.782)',
+      dark: 'color(display-p3 0.178 0.128 0.049)',
+    }),
+    amber4: token({
+      light: 'color(display-p3 0.989 0.937 0.65)',
+      dark: 'color(display-p3 0.239 0.156 0)',
+    }),
+    amber5: token({
+      light: 'color(display-p3 0.97 0.902 0.527)',
+      dark: 'color(display-p3 0.29 0.193 0)',
+    }),
+    amber6: token({
+      light: 'color(display-p3 0.936 0.844 0.506)',
+      dark: 'color(display-p3 0.344 0.245 0.076)',
+    }),
+    amber7: token({
+      light: 'color(display-p3 0.89 0.762 0.443)',
+      dark: 'color(display-p3 0.422 0.314 0.141)',
+    }),
+    amber8: token({
+      light: 'color(display-p3 0.85 0.65 0.3)',
+      dark: 'color(display-p3 0.535 0.399 0.189)',
+    }),
+    amber9: token('color(display-p3 1 0.77 0.26)'),
+    amber10: token({
+      light: 'color(display-p3 0.959 0.741 0.274)',
+      dark: 'color(display-p3 1 0.87 0.15)',
+    }),
+    amber11: token({
+      light: 'color(display-p3 0.64 0.4 0)',
+      dark: 'color(display-p3 1 0.8 0.29)',
+    }),
+    amber12: token({
+      light: 'color(display-p3 0.294 0.208 0.145)',
+      dark: 'color(display-p3 0.984 0.909 0.726)',
+    }),
+  },
+  transparent: {
+    amber1: token({ light: '#c0800004', dark: '#e63c0006' }),
+    amber2: token({ light: '#f4d10016', dark: '#fd9b000d' }),
+    amber3: token({ light: '#ffde003d', dark: '#fa820022' }),
+    amber4: token({ light: '#ffd40063', dark: '#fc820032' }),
+    amber5: token({ light: '#f8cf0088', dark: '#fd8b0041' }),
+    amber6: token({ light: '#eab5008c', dark: '#fd9b0051' }),
+    amber7: token({ light: '#dc9b009d', dark: '#ffab2567' }),
+    amber8: token({ light: '#da8a00c9', dark: '#ffae3587' }),
+    amber9: token({ light: '#ffb300c2', dark: '#ffc53d' }),
+    amber10: token({ light: '#ffb300e7', dark: '#ffd60a' }),
+    amber11: token({ light: '#ab6400', dark: '#ffca16' }),
+    amber12: token({ light: '#341500dd', dark: '#ffe7b3' }),
+  },
+};

packages/twenty-ui/design-tokens/color/blue.ts

@@ -0,0 +1,65 @@
+import { token } from '../token';
+
+export const BLUE_COLOR_TOKENS = {
+  scale: {
+    blue1: token({
+      light: 'color(display-p3 0.992 0.992 0.996)',
+      dark: 'color(display-p3 0.068 0.074 0.118)',
+    }),
+    blue2: token({
+      light: 'color(display-p3 0.971 0.977 0.998)',
+      dark: 'color(display-p3 0.081 0.089 0.144)',
+    }),
+    blue3: token({
+      light: 'color(display-p3 0.933 0.948 0.992)',
+      dark: 'color(display-p3 0.105 0.141 0.275)',
+    }),
+    blue4: token({
+      light: 'color(display-p3 0.885 0.914 1)',
+      dark: 'color(display-p3 0.129 0.18 0.369)',
+    }),
+    blue5: token({
+      light: 'color(display-p3 0.831 0.87 1)',
+      dark: 'color(display-p3 0.163 0.22 0.439)',
+    }),
+    blue6: token({
+      light: 'color(display-p3 0.767 0.814 0.995)',
+      dark: 'color(display-p3 0.203 0.262 0.5)',
+    }),
+    blue7: token({
+      light: 'color(display-p3 0.685 0.74 0.957)',
+      dark: 'color(display-p3 0.245 0.309 0.575)',
+    }),
+    blue8: token({
+      light: 'color(display-p3 0.569 0.639 0.916)',
+      dark: 'color(display-p3 0.285 0.362 0.674)',
+    }),
+    blue9: token('color(display-p3 0.276 0.384 0.837)'),
+    blue10: token({
+      light: 'color(display-p3 0.234 0.343 0.801)',
+      dark: 'color(display-p3 0.354 0.445 0.866)',
+    }),
+    blue11: token({
+      light: 'color(display-p3 0.256 0.354 0.755)',
+      dark: 'color(display-p3 0.63 0.69 1)',
+    }),
+    blue12: token({
+      light: 'color(display-p3 0.133 0.175 0.348)',
+      dark: 'color(display-p3 0.848 0.881 0.99)',
+    }),
+  },
+  transparent: {
+    blue1: token({ light: '#00008002', dark: '#1133ff0f' }),
+    blue2: token({ light: '#0040ff08', dark: '#3354fa17' }),
+    blue3: token({ light: '#0047f112', dark: '#2f62ff3c' }),
+    blue4: token({ light: '#0044ff1e', dark: '#3566ff57' }),
+    blue5: token({ light: '#0044ff2d', dark: '#4171fd6b' }),
+    blue6: token({ light: '#003eff3e', dark: '#5178fd7c' }),
+    blue7: token({ light: '#0037ed54', dark: '#5a7fff90' }),
+    blue8: token({ light: '#0034dc72', dark: '#5b81feac' }),
+    blue9: token({ light: '#0031d2c1', dark: '#4671ffdb' }),
+    blue10: token({ light: '#002ec9cc', dark: '#5c7efee3' }),
+    blue11: token({ light: '#002bb7c5', dark: '#9eb1ff' }),
+    blue12: token({ light: '#001046e0', dark: '#d6e1ff' }),
+  },
+};

packages/twenty-ui/design-tokens/color/bronze.ts

@@ -0,0 +1,65 @@
+import { token } from '../token';
+
+export const BRONZE_COLOR_TOKENS = {
+  scale: {
+    bronze1: token({
+      light: 'color(display-p3 0.991 0.988 0.988)',
+      dark: 'color(display-p3 0.076 0.067 0.063)',
+    }),
+    bronze2: token({
+      light: 'color(display-p3 0.989 0.97 0.961)',
+      dark: 'color(display-p3 0.106 0.097 0.093)',
+    }),
+    bronze3: token({
+      light: 'color(display-p3 0.958 0.932 0.919)',
+      dark: 'color(display-p3 0.147 0.132 0.125)',
+    }),
+    bronze4: token({
+      light: 'color(display-p3 0.929 0.894 0.877)',
+      dark: 'color(display-p3 0.185 0.166 0.156)',
+    }),
+    bronze5: token({
+      light: 'color(display-p3 0.898 0.853 0.832)',
+      dark: 'color(display-p3 0.227 0.202 0.19)',
+    }),
+    bronze6: token({
+      light: 'color(display-p3 0.861 0.805 0.778)',
+      dark: 'color(display-p3 0.278 0.246 0.23)',
+    }),
+    bronze7: token({
+      light: 'color(display-p3 0.812 0.739 0.706)',
+      dark: 'color(display-p3 0.343 0.302 0.281)',
+    }),
+    bronze8: token({
+      light: 'color(display-p3 0.741 0.647 0.606)',
+      dark: 'color(display-p3 0.426 0.374 0.347)',
+    }),
+    bronze9: token('color(display-p3 0.611 0.507 0.455)'),
+    bronze10: token({
+      light: 'color(display-p3 0.563 0.461 0.414)',
+      dark: 'color(display-p3 0.66 0.556 0.504)',
+    }),
+    bronze11: token({
+      light: 'color(display-p3 0.471 0.373 0.336)',
+      dark: 'color(display-p3 0.81 0.707 0.655)',
+    }),
+    bronze12: token({
+      light: 'color(display-p3 0.251 0.191 0.172)',
+      dark: 'color(display-p3 0.921 0.88 0.854)',
+    }),
+  },
+  transparent: {
+    bronze1: token({ light: '#55000003', dark: '#d1110004' }),
+    bronze2: token({ light: '#cc33000a', dark: '#fbbc910c' }),
+    bronze3: token({ light: '#92250015', dark: '#faceb817' }),
+    bronze4: token({ light: '#80280020', dark: '#facdb622' }),
+    bronze5: token({ light: '#7423002c', dark: '#ffd2c12d' }),
+    bronze6: token({ light: '#7324003a', dark: '#ffd1c03c' }),
+    bronze7: token({ light: '#6c1f004c', dark: '#fdd0c04f' }),
+    bronze8: token({ light: '#671c0066', dark: '#ffd6c565' }),
+    bronze9: token({ light: '#551a008d', dark: '#fec7b09b' }),
+    bronze10: token({ light: '#4c150097', dark: '#fecab5a9' }),
+    bronze11: token({ light: '#3d0f00ab', dark: '#ffd7c6d1' }),
+    bronze12: token({ light: '#1d0600d4', dark: '#fff1e9ec' }),
+  },
+};

packages/twenty-ui/design-tokens/color/brown.ts

@@ -0,0 +1,65 @@
+import { token } from '../token';
+
+export const BROWN_COLOR_TOKENS = {
+  scale: {
+    brown1: token({
+      light: 'color(display-p3 0.995 0.992 0.989)',
+      dark: 'color(display-p3 0.071 0.067 0.059)',
+    }),
+    brown2: token({
+      light: 'color(display-p3 0.987 0.976 0.964)',
+      dark: 'color(display-p3 0.107 0.095 0.087)',
+    }),
+    brown3: token({
+      light: 'color(display-p3 0.959 0.936 0.909)',
+      dark: 'color(display-p3 0.151 0.13 0.115)',
+    }),
+    brown4: token({
+      light: 'color(display-p3 0.934 0.897 0.855)',
+      dark: 'color(display-p3 0.191 0.161 0.138)',
+    }),
+    brown5: token({
+      light: 'color(display-p3 0.909 0.856 0.798)',
+      dark: 'color(display-p3 0.235 0.194 0.162)',
+    }),
+    brown6: token({
+      light: 'color(display-p3 0.88 0.808 0.73)',
+      dark: 'color(display-p3 0.291 0.237 0.192)',
+    }),
+    brown7: token({
+      light: 'color(display-p3 0.841 0.742 0.639)',
+      dark: 'color(display-p3 0.365 0.295 0.232)',
+    }),
+    brown8: token({
+      light: 'color(display-p3 0.782 0.647 0.514)',
+      dark: 'color(display-p3 0.469 0.377 0.287)',
+    }),
+    brown9: token('color(display-p3 0.651 0.505 0.368)'),
+    brown10: token({
+      light: 'color(display-p3 0.601 0.465 0.344)',
+      dark: 'color(display-p3 0.697 0.557 0.423)',
+    }),
+    brown11: token({
+      light: 'color(display-p3 0.485 0.374 0.288)',
+      dark: 'color(display-p3 0.835 0.715 0.597)',
+    }),
+    brown12: token({
+      light: 'color(display-p3 0.236 0.202 0.183)',
+      dark: 'color(display-p3 0.938 0.885 0.802)',
+    }),
+  },
+  transparent: {
+    brown1: token({ light: '#aa550003', dark: '#91110002' }),
+    brown2: token({ light: '#aa550009', dark: '#fba67c0c' }),
+    brown3: token({ light: '#a04b0018', dark: '#fcb58c19' }),
+    brown4: token({ light: '#9b4a0026', dark: '#fbbb8a24' }),
+    brown5: token({ light: '#9f4d0035', dark: '#fcb88931' }),
+    brown6: token({ light: '#a04e0048', dark: '#fdba8741' }),
+    brown7: token({ light: '#a34e0060', dark: '#ffbb8856' }),
+    brown8: token({ light: '#9f4a0081', dark: '#ffbe8773' }),
+    brown9: token({ light: '#823c00a7', dark: '#feb87da8' }),
+    brown10: token({ light: '#723300ac', dark: '#ffc18cb3' }),
+    brown11: token({ light: '#522100b9', dark: '#fed1aad9' }),
+    brown12: token({ light: '#140600d1', dark: '#feecd4f2' }),
+  },
+};

packages/twenty-ui/design-tokens/color/crimson.ts

@@ -0,0 +1,65 @@
+import { token } from '../token';
+
+export const CRIMSON_COLOR_TOKENS = {
+  scale: {
+    crimson1: token({
+      light: 'color(display-p3 0.998 0.989 0.992)',
+      dark: 'color(display-p3 0.093 0.068 0.078)',
+    }),
+    crimson2: token({
+      light: 'color(display-p3 0.991 0.969 0.976)',
+      dark: 'color(display-p3 0.117 0.078 0.095)',
+    }),
+    crimson3: token({
+      light: 'color(display-p3 0.987 0.917 0.941)',
+      dark: 'color(display-p3 0.203 0.091 0.143)',
+    }),
+    crimson4: token({
+      light: 'color(display-p3 0.975 0.866 0.904)',
+      dark: 'color(display-p3 0.277 0.087 0.182)',
+    }),
+    crimson5: token({
+      light: 'color(display-p3 0.953 0.813 0.864)',
+      dark: 'color(display-p3 0.332 0.115 0.22)',
+    }),
+    crimson6: token({
+      light: 'color(display-p3 0.921 0.755 0.817)',
+      dark: 'color(display-p3 0.394 0.162 0.268)',
+    }),
+    crimson7: token({
+      light: 'color(display-p3 0.88 0.683 0.761)',
+      dark: 'color(display-p3 0.489 0.222 0.336)',
+    }),
+    crimson8: token({
+      light: 'color(display-p3 0.834 0.592 0.694)',
+      dark: 'color(display-p3 0.638 0.289 0.429)',
+    }),
+    crimson9: token('color(display-p3 0.843 0.298 0.507)'),
+    crimson10: token({
+      light: 'color(display-p3 0.807 0.266 0.468)',
+      dark: 'color(display-p3 0.864 0.364 0.539)',
+    }),
+    crimson11: token({
+      light: 'color(display-p3 0.731 0.195 0.388)',
+      dark: 'color(display-p3 1 0.56 0.66)',
+    }),
+    crimson12: token({
+      light: 'color(display-p3 0.352 0.111 0.221)',
+      dark: 'color(display-p3 0.966 0.834 0.906)',
+    }),
+  },
+  transparent: {
+    crimson1: token({ light: '#ff005503', dark: '#f4126709' }),
+    crimson2: token({ light: '#e0004008', dark: '#f22f7a11' }),
+    crimson3: token({ light: '#ff005216', dark: '#fe2a8b2a' }),
+    crimson4: token({ light: '#f8005123', dark: '#fd158741' }),
+    crimson5: token({ light: '#e5004f31', dark: '#fd278f51' }),
+    crimson6: token({ light: '#d0004b41', dark: '#fe459763' }),
+    crimson7: token({ light: '#bf004753', dark: '#fd559b7f' }),
+    crimson8: token({ light: '#b6004a6c', dark: '#fe5b9bab' }),
+    crimson9: token({ light: '#e2005bc2', dark: '#fe418de8' }),
+    crimson10: token({ light: '#d70056cb', dark: '#ff5693ed' }),
+    crimson11: token({ light: '#c4004fe2', dark: '#ff92ad' }),
+    crimson12: token({ light: '#530026e9', dark: '#ffd5eafd' }),
+  },
+};

packages/twenty-ui/design-tokens/color/cyan.ts

@@ -0,0 +1,65 @@
+import { token } from '../token';
+
+export const CYAN_COLOR_TOKENS = {
+  scale: {
+    cyan1: token({
+      light: 'color(display-p3 0.982 0.992 0.996)',
+      dark: 'color(display-p3 0.053 0.085 0.098)',
+    }),
+    cyan2: token({
+      light: 'color(display-p3 0.955 0.981 0.984)',
+      dark: 'color(display-p3 0.072 0.105 0.122)',
+    }),
+    cyan3: token({
+      light: 'color(display-p3 0.888 0.965 0.975)',
+      dark: 'color(display-p3 0.073 0.168 0.209)',
+    }),
+    cyan4: token({
+      light: 'color(display-p3 0.821 0.941 0.959)',
+      dark: 'color(display-p3 0.063 0.216 0.277)',
+    }),
+    cyan5: token({
+      light: 'color(display-p3 0.751 0.907 0.935)',
+      dark: 'color(display-p3 0.091 0.267 0.336)',
+    }),
+    cyan6: token({
+      light: 'color(display-p3 0.671 0.862 0.9)',
+      dark: 'color(display-p3 0.137 0.324 0.4)',
+    }),
+    cyan7: token({
+      light: 'color(display-p3 0.564 0.8 0.854)',
+      dark: 'color(display-p3 0.186 0.398 0.484)',
+    }),
+    cyan8: token({
+      light: 'color(display-p3 0.388 0.715 0.798)',
+      dark: 'color(display-p3 0.23 0.496 0.6)',
+    }),
+    cyan9: token('color(display-p3 0.282 0.627 0.765)'),
+    cyan10: token({
+      light: 'color(display-p3 0.264 0.583 0.71)',
+      dark: 'color(display-p3 0.331 0.675 0.801)',
+    }),
+    cyan11: token({
+      light: 'color(display-p3 0.08 0.48 0.63)',
+      dark: 'color(display-p3 0.446 0.79 0.887)',
+    }),
+    cyan12: token({
+      light: 'color(display-p3 0.108 0.232 0.277)',
+      dark: 'color(display-p3 0.757 0.919 0.962)',
+    }),
+  },
+  transparent: {
+    cyan1: token({ light: '#0099cc05', dark: '#0091f70a' }),
+    cyan2: token({ light: '#009db10d', dark: '#02a7f211' }),
+    cyan3: token({ light: '#00c2d121', dark: '#00befd28' }),
+    cyan4: token({ light: '#00bcd435', dark: '#00baff3b' }),
+    cyan5: token({ light: '#01b4cc4a', dark: '#00befd4d' }),
+    cyan6: token({ light: '#00a7c162', dark: '#00c7fd5e' }),
+    cyan7: token({ light: '#009fbb82', dark: '#14cdff75' }),
+    cyan8: token({ light: '#00a3c0c2', dark: '#11cfff95' }),
+    cyan9: token({ light: '#00a2c7', dark: '#00cfffc3' }),
+    cyan10: token({ light: '#0094b7f8', dark: '#28d6ffcd' }),
+    cyan11: token({ light: '#007491ef', dark: '#52e1fee5' }),
+    cyan12: token({ light: '#00323ef2', dark: '#bbf3fef7' }),
+  },
+};

packages/twenty-ui/design-tokens/color/gold.ts

@@ -0,0 +1,65 @@
+import { token } from '../token';
+
+export const GOLD_COLOR_TOKENS = {
+  scale: {
+    gold1: token({
+      light: 'color(display-p3 0.992 0.992 0.989)',
+      dark: 'color(display-p3 0.071 0.071 0.067)',
+    }),
+    gold2: token({
+      light: 'color(display-p3 0.98 0.976 0.953)',
+      dark: 'color(display-p3 0.104 0.101 0.09)',
+    }),
+    gold3: token({
+      light: 'color(display-p3 0.947 0.94 0.909)',
+      dark: 'color(display-p3 0.141 0.136 0.122)',
+    }),
+    gold4: token({
+      light: 'color(display-p3 0.914 0.904 0.865)',
+      dark: 'color(display-p3 0.177 0.17 0.152)',
+    }),
+    gold5: token({
+      light: 'color(display-p3 0.88 0.865 0.816)',
+      dark: 'color(display-p3 0.217 0.207 0.185)',
+    }),
+    gold6: token({
+      light: 'color(display-p3 0.84 0.818 0.756)',
+      dark: 'color(display-p3 0.265 0.252 0.225)',
+    }),
+    gold7: token({
+      light: 'color(display-p3 0.788 0.753 0.677)',
+      dark: 'color(display-p3 0.327 0.31 0.277)',
+    }),
+    gold8: token({
+      light: 'color(display-p3 0.715 0.66 0.565)',
+      dark: 'color(display-p3 0.407 0.384 0.342)',
+    }),
+    gold9: token('color(display-p3 0.579 0.517 0.41)'),
+    gold10: token({
+      light: 'color(display-p3 0.538 0.479 0.38)',
+      dark: 'color(display-p3 0.628 0.566 0.463)',
+    }),
+    gold11: token({
+      light: 'color(display-p3 0.433 0.386 0.305)',
+      dark: 'color(display-p3 0.784 0.728 0.635)',
+    }),
+    gold12: token({
+      light: 'color(display-p3 0.227 0.209 0.173)',
+      dark: 'color(display-p3 0.906 0.887 0.855)',
+    }),
+  },
+  transparent: {
+    gold1: token({ light: '#55550003', dark: '#91911102' }),
+    gold2: token({ light: '#9d8a000d', dark: '#f9e29d0b' }),
+    gold3: token({ light: '#75600018', dark: '#f8ecbb15' }),
+    gold4: token({ light: '#6b4e0024', dark: '#ffeec41e' }),
+    gold5: token({ light: '#60460030', dark: '#feecc22a' }),
+    gold6: token({ light: '#64440040', dark: '#feebcb37' }),
+    gold7: token({ light: '#63420055', dark: '#ffedcd48' }),
+    gold8: token({ light: '#633d0072', dark: '#fdeaca5f' }),
+    gold9: token({ light: '#5332009a', dark: '#ffdba690' }),
+    gold10: token({ light: '#492d00a1', dark: '#fedfb09d' }),
+    gold11: token({ light: '#362100b4', dark: '#fee7c6c8' }),
+    gold12: token({ light: '#130c00d4', dark: '#fef7ede7' }),
+  },
+};

packages/twenty-ui/design-tokens/color/grass.ts

@@ -0,0 +1,65 @@
+import { token } from '../token';
+
+export const GRASS_COLOR_TOKENS = {
+  scale: {
+    grass1: token({
+      light: 'color(display-p3 0.986 0.996 0.985)',
+      dark: 'color(display-p3 0.062 0.083 0.067)',
+    }),
+    grass2: token({
+      light: 'color(display-p3 0.966 0.983 0.964)',
+      dark: 'color(display-p3 0.083 0.103 0.085)',
+    }),
+    grass3: token({
+      light: 'color(display-p3 0.923 0.965 0.917)',
+      dark: 'color(display-p3 0.118 0.163 0.122)',
+    }),
+    grass4: token({
+      light: 'color(display-p3 0.872 0.94 0.865)',
+      dark: 'color(display-p3 0.142 0.225 0.15)',
+    }),
+    grass5: token({
+      light: 'color(display-p3 0.811 0.908 0.802)',
+      dark: 'color(display-p3 0.178 0.279 0.186)',
+    }),
+    grass6: token({
+      light: 'color(display-p3 0.733 0.864 0.724)',
+      dark: 'color(display-p3 0.217 0.337 0.224)',
+    }),
+    grass7: token({
+      light: 'color(display-p3 0.628 0.803 0.622)',
+      dark: 'color(display-p3 0.258 0.4 0.264)',
+    }),
+    grass8: token({
+      light: 'color(display-p3 0.477 0.72 0.482)',
+      dark: 'color(display-p3 0.302 0.47 0.305)',
+    }),
+    grass9: token('color(display-p3 0.38 0.647 0.378)'),
+    grass10: token({
+      light: 'color(display-p3 0.344 0.598 0.342)',
+      dark: 'color(display-p3 0.426 0.694 0.426)',
+    }),
+    grass11: token({
+      light: 'color(display-p3 0.263 0.488 0.261)',
+      dark: 'color(display-p3 0.535 0.807 0.542)',
+    }),
+    grass12: token({
+      light: 'color(display-p3 0.151 0.233 0.153)',
+      dark: 'color(display-p3 0.797 0.936 0.776)',
+    }),
+  },
+  transparent: {
+    grass1: token({ light: '#00c00004', dark: '#00de1205' }),
+    grass2: token({ light: '#0099000a', dark: '#5ef7780a' }),
+    grass3: token({ light: '#00970016', dark: '#70fe8c1b' }),
+    grass4: token({ light: '#009f0725', dark: '#57ff802c' }),
+    grass5: token({ light: '#00930536', dark: '#68ff8b3b' }),
+    grass6: token({ light: '#008f0a4d', dark: '#71ff8f4b' }),
+    grass7: token({ light: '#018b0f6b', dark: '#77fd925d' }),
+    grass8: token({ light: '#008d199a', dark: '#77fd9070' }),
+    grass9: token({ light: '#008619b9', dark: '#65ff82a1' }),
+    grass10: token({ light: '#007b17c1', dark: '#72ff8dae' }),
+    grass11: token({ light: '#006514d5', dark: '#89ff9fcd' }),
+    grass12: token({ light: '#002006df', dark: '#ceffceef' }),
+  },
+};

packages/twenty-ui/design-tokens/color/gray.ts

@@ -0,0 +1,104 @@
+import { token } from '../token';
+
+export const GRAY_COLOR_TOKENS = {
+  scale: {
+    gray1: token({
+      light: 'color(display-p3 1 1 1)',
+      dark: 'color(display-p3 0.09 0.09 0.09)',
+    }),
+    gray2: token({
+      light: 'color(display-p3 0.988 0.988 0.988)',
+      dark: 'color(display-p3 0.106 0.106 0.106)',
+    }),
+    gray3: token({
+      light: 'color(display-p3 0.976 0.976 0.976)',
+      dark: 'color(display-p3 0.098 0.098 0.098)',
+    }),
+    gray4: token({
+      light: 'color(display-p3 0.945 0.945 0.945)',
+      dark: 'color(display-p3 0.114 0.114 0.114)',
+    }),
+    gray5: token({
+      light: 'color(display-p3 0.922 0.922 0.922)',
+      dark: 'color(display-p3 0.133 0.133 0.133)',
+    }),
+    gray6: token({
+      light: 'color(display-p3 0.839 0.839 0.839)',
+      dark: 'color(display-p3 0.282 0.282 0.282)',
+    }),
+    gray7: token({
+      light: 'color(display-p3 0.8 0.8 0.8)',
+      dark: 'color(display-p3 0.298 0.298 0.298)',
+    }),
+    gray8: token({
+      light: 'color(display-p3 0.702 0.702 0.702)',
+      dark: 'color(display-p3 0.4 0.4 0.4)',
+    }),
+    gray9: token({
+      light: 'color(display-p3 0.6 0.6 0.6)',
+      dark: 'color(display-p3 0.506 0.506 0.506)',
+    }),
+    gray10: token({
+      light: 'color(display-p3 0.514 0.514 0.514)',
+      dark: 'color(display-p3 0.482 0.482 0.482)',
+    }),
+    gray11: token({
+      light: 'color(display-p3 0.4 0.4 0.4)',
+      dark: 'color(display-p3 0.702 0.702 0.702)',
+    }),
+    gray12: token({
+      light: 'color(display-p3 0.2 0.2 0.2)',
+      dark: 'color(display-p3 0.922 0.922 0.922)',
+    }),
+  },
+  transparent: {
+    gray1: token({
+      light: 'color(display-p3 0 0 0 / 0.02)',
+      dark: 'color(display-p3 1 1 1 / 0.031)',
+    }),
+    gray2: token({
+      light: 'color(display-p3 0 0 0 / 0.039)',
+      dark: 'color(display-p3 1 1 1 / 0.059)',
+    }),
+    gray3: token({
+      light: 'color(display-p3 0 0 0 / 0.047)',
+      dark: 'color(display-p3 1 1 1 / 0.047)',
+    }),
+    gray4: token({
+      light: 'color(display-p3 0 0 0 / 0.071)',
+      dark: 'color(display-p3 1 1 1 / 0.071)',
+    }),
+    gray5: token({
+      light: 'color(display-p3 0 0 0 / 0.078)',
+      dark: 'color(display-p3 1 1 1 / 0.102)',
+    }),
+    gray6: token({
+      light: 'color(display-p3 0 0 0 / 0.114)',
+      dark: 'color(display-p3 1 1 1 / 0.114)',
+    }),
+    gray7: token({
+      light: 'color(display-p3 0 0 0 / 0.161)',
+      dark: 'color(display-p3 1 1 1 / 0.141)',
+    }),
+    gray8: token({
+      light: 'color(display-p3 0 0 0 / 0.22)',
+      dark: 'color(display-p3 1 1 1 / 0.22)',
+    }),
+    gray9: token({
+      light: 'color(display-p3 0 0 0 / 0.361)',
+      dark: 'color(display-p3 1 1 1 / 0.427)',
+    }),
+    gray10: token({
+      light: 'color(display-p3 0 0 0 / 0.478)',
+      dark: 'color(display-p3 1 1 1 / 0.478)',
+    }),
+    gray11: token({
+      light: 'color(display-p3 0 0 0 / 0.722)',
+      dark: 'color(display-p3 1 1 1 / 0.565)',
+    }),
+    gray12: token({
+      light: 'color(display-p3 0 0 0 / 0.91)',
+      dark: 'color(display-p3 1 1 1 / 0.91)',
+    }),
+  },
+};

packages/twenty-ui/design-tokens/color/green.ts

@@ -0,0 +1,65 @@
+import { token } from '../token';
+
+export const GREEN_COLOR_TOKENS = {
+  scale: {
+    green1: token({
+      light: 'color(display-p3 0.986 0.996 0.989)',
+      dark: 'color(display-p3 0.062 0.083 0.071)',
+    }),
+    green2: token({
+      light: 'color(display-p3 0.963 0.983 0.967)',
+      dark: 'color(display-p3 0.079 0.106 0.09)',
+    }),
+    green3: token({
+      light: 'color(display-p3 0.913 0.964 0.925)',
+      dark: 'color(display-p3 0.1 0.173 0.133)',
+    }),
+    green4: token({
+      light: 'color(display-p3 0.859 0.94 0.879)',
+      dark: 'color(display-p3 0.115 0.229 0.166)',
+    }),
+    green5: token({
+      light: 'color(display-p3 0.796 0.907 0.826)',
+      dark: 'color(display-p3 0.147 0.282 0.206)',
+    }),
+    green6: token({
+      light: 'color(display-p3 0.718 0.863 0.761)',
+      dark: 'color(display-p3 0.185 0.338 0.25)',
+    }),
+    green7: token({
+      light: 'color(display-p3 0.61 0.801 0.675)',
+      dark: 'color(display-p3 0.227 0.403 0.298)',
+    }),
+    green8: token({
+      light: 'color(display-p3 0.451 0.715 0.559)',
+      dark: 'color(display-p3 0.27 0.479 0.351)',
+    }),
+    green9: token('color(display-p3 0.332 0.634 0.442)'),
+    green10: token({
+      light: 'color(display-p3 0.308 0.595 0.417)',
+      dark: 'color(display-p3 0.357 0.682 0.474)',
+    }),
+    green11: token({
+      light: 'color(display-p3 0.19 0.5 0.32)',
+      dark: 'color(display-p3 0.434 0.828 0.573)',
+    }),
+    green12: token({
+      light: 'color(display-p3 0.132 0.228 0.18)',
+      dark: 'color(display-p3 0.747 0.938 0.807)',
+    }),
+  },
+  transparent: {
+    green1: token({ light: '#00c04004', dark: '#00de4505' }),
+    green2: token({ light: '#00a32f0b', dark: '#29f99d0b' }),
+    green3: token({ light: '#00a43319', dark: '#22ff991e' }),
+    green4: token({ light: '#00a83829', dark: '#11ff992d' }),
+    green5: token({ light: '#019c393b', dark: '#2bffa23c' }),
+    green6: token({ light: '#00963c52', dark: '#44ffaa4b' }),
+    green7: token({ light: '#00914071', dark: '#50fdac5e' }),
+    green8: token({ light: '#00924ba4', dark: '#54ffad73' }),
+    green9: token({ light: '#008f4acf', dark: '#44ffa49e' }),
+    green10: token({ light: '#008647d4', dark: '#43fea4ab' }),
+    green11: token({ light: '#00713fde', dark: '#46fea5d4' }),
+    green12: token({ light: '#002616e6', dark: '#bbffd7f0' }),
+  },
+};

packages/twenty-ui/design-tokens/color/index.ts

@@ -0,0 +1,97 @@
+import { AMBER_COLOR_TOKENS } from './amber';
+import { BLUE_COLOR_TOKENS } from './blue';
+import { BRONZE_COLOR_TOKENS } from './bronze';
+import { BROWN_COLOR_TOKENS } from './brown';
+import { CRIMSON_COLOR_TOKENS } from './crimson';
+import { CYAN_COLOR_TOKENS } from './cyan';
+import { GOLD_COLOR_TOKENS } from './gold';
+import { GRASS_COLOR_TOKENS } from './grass';
+import { GRAY_COLOR_TOKENS } from './gray';
+import { GREEN_COLOR_TOKENS } from './green';
+import { IRIS_COLOR_TOKENS } from './iris';
+import { JADE_COLOR_TOKENS } from './jade';
+import { LIME_COLOR_TOKENS } from './lime';
+import { MAUVE_COLOR_TOKENS } from './mauve';
+import { MINT_COLOR_TOKENS } from './mint';
+import { OLIVE_COLOR_TOKENS } from './olive';
+import { ORANGE_COLOR_TOKENS } from './orange';
+import { PINK_COLOR_TOKENS } from './pink';
+import { PLUM_COLOR_TOKENS } from './plum';
+import { PURPLE_COLOR_TOKENS } from './purple';
+import { RED_COLOR_TOKENS } from './red';
+import { RUBY_COLOR_TOKENS } from './ruby';
+import { SAGE_COLOR_TOKENS } from './sage';
+import { SAND_COLOR_TOKENS } from './sand';
+import { SKY_COLOR_TOKENS } from './sky';
+import { SLATE_COLOR_TOKENS } from './slate';
+import { TOMATO_COLOR_TOKENS } from './tomato';
+import { TURQUOISE_COLOR_TOKENS } from './turquoise';
+import { VIOLET_COLOR_TOKENS } from './violet';
+import { YELLOW_COLOR_TOKENS } from './yellow';
+import { MAIN_COLOR_TOKENS } from './mainColors';
+
+export const COLOR_TOKENS = {
+  ...MAIN_COLOR_TOKENS,
+  ...YELLOW_COLOR_TOKENS.scale,
+  ...GREEN_COLOR_TOKENS.scale,
+  ...TURQUOISE_COLOR_TOKENS.scale,
+  ...SKY_COLOR_TOKENS.scale,
+  ...BLUE_COLOR_TOKENS.scale,
+  ...PURPLE_COLOR_TOKENS.scale,
+  ...PINK_COLOR_TOKENS.scale,
+  ...RED_COLOR_TOKENS.scale,
+  ...ORANGE_COLOR_TOKENS.scale,
+  ...GRAY_COLOR_TOKENS.scale,
+  ...MAUVE_COLOR_TOKENS.scale,
+  ...SLATE_COLOR_TOKENS.scale,
+  ...SAGE_COLOR_TOKENS.scale,
+  ...OLIVE_COLOR_TOKENS.scale,
+  ...SAND_COLOR_TOKENS.scale,
+  ...TOMATO_COLOR_TOKENS.scale,
+  ...RUBY_COLOR_TOKENS.scale,
+  ...CRIMSON_COLOR_TOKENS.scale,
+  ...PLUM_COLOR_TOKENS.scale,
+  ...VIOLET_COLOR_TOKENS.scale,
+  ...IRIS_COLOR_TOKENS.scale,
+  ...CYAN_COLOR_TOKENS.scale,
+  ...JADE_COLOR_TOKENS.scale,
+  ...GRASS_COLOR_TOKENS.scale,
+  ...MINT_COLOR_TOKENS.scale,
+  ...LIME_COLOR_TOKENS.scale,
+  ...BRONZE_COLOR_TOKENS.scale,
+  ...GOLD_COLOR_TOKENS.scale,
+  ...BROWN_COLOR_TOKENS.scale,
+  ...AMBER_COLOR_TOKENS.scale,
+  transparent: {
+    ...GREEN_COLOR_TOKENS.transparent,
+    ...TURQUOISE_COLOR_TOKENS.transparent,
+    ...SKY_COLOR_TOKENS.transparent,
+    ...BLUE_COLOR_TOKENS.transparent,
+    ...PURPLE_COLOR_TOKENS.transparent,
+    ...PINK_COLOR_TOKENS.transparent,
+    ...RED_COLOR_TOKENS.transparent,
+    ...ORANGE_COLOR_TOKENS.transparent,
+    ...YELLOW_COLOR_TOKENS.transparent,
+    ...GRAY_COLOR_TOKENS.transparent,
+    ...MAUVE_COLOR_TOKENS.transparent,
+    ...SLATE_COLOR_TOKENS.transparent,
+    ...SAGE_COLOR_TOKENS.transparent,
+    ...OLIVE_COLOR_TOKENS.transparent,
+    ...SAND_COLOR_TOKENS.transparent,
+    ...TOMATO_COLOR_TOKENS.transparent,
+    ...RUBY_COLOR_TOKENS.transparent,
+    ...CRIMSON_COLOR_TOKENS.transparent,
+    ...PLUM_COLOR_TOKENS.transparent,
+    ...VIOLET_COLOR_TOKENS.transparent,
+    ...IRIS_COLOR_TOKENS.transparent,
+    ...CYAN_COLOR_TOKENS.transparent,
+    ...JADE_COLOR_TOKENS.transparent,
+    ...GRASS_COLOR_TOKENS.transparent,
+    ...MINT_COLOR_TOKENS.transparent,
+    ...LIME_COLOR_TOKENS.transparent,
+    ...BRONZE_COLOR_TOKENS.transparent,
+    ...GOLD_COLOR_TOKENS.transparent,
+    ...BROWN_COLOR_TOKENS.transparent,
+    ...AMBER_COLOR_TOKENS.transparent,
+  },
+};

packages/twenty-ui/design-tokens/color/iris.ts

@@ -0,0 +1,65 @@
+import { token } from '../token';
+
+export const IRIS_COLOR_TOKENS = {
+  scale: {
+    iris1: token({
+      light: 'color(display-p3 0.992 0.992 0.999)',
+      dark: 'color(display-p3 0.075 0.075 0.114)',
+    }),
+    iris2: token({
+      light: 'color(display-p3 0.972 0.973 0.998)',
+      dark: 'color(display-p3 0.089 0.086 0.14)',
+    }),
+    iris3: token({
+      light: 'color(display-p3 0.943 0.945 0.992)',
+      dark: 'color(display-p3 0.128 0.134 0.272)',
+    }),
+    iris4: token({
+      light: 'color(display-p3 0.902 0.906 1)',
+      dark: 'color(display-p3 0.153 0.165 0.382)',
+    }),
+    iris5: token({
+      light: 'color(display-p3 0.857 0.861 1)',
+      dark: 'color(display-p3 0.192 0.201 0.44)',
+    }),
+    iris6: token({
+      light: 'color(display-p3 0.799 0.805 0.987)',
+      dark: 'color(display-p3 0.239 0.241 0.491)',
+    }),
+    iris7: token({
+      light: 'color(display-p3 0.721 0.727 0.955)',
+      dark: 'color(display-p3 0.291 0.289 0.565)',
+    }),
+    iris8: token({
+      light: 'color(display-p3 0.61 0.619 0.918)',
+      dark: 'color(display-p3 0.35 0.345 0.673)',
+    }),
+    iris9: token('color(display-p3 0.357 0.357 0.81)'),
+    iris10: token({
+      light: 'color(display-p3 0.318 0.318 0.774)',
+      dark: 'color(display-p3 0.428 0.416 0.843)',
+    }),
+    iris11: token({
+      light: 'color(display-p3 0.337 0.326 0.748)',
+      dark: 'color(display-p3 0.685 0.662 1)',
+    }),
+    iris12: token({
+      light: 'color(display-p3 0.154 0.161 0.371)',
+      dark: 'color(display-p3 0.878 0.875 0.986)',
+    }),
+  },
+  transparent: {
+    iris1: token({ light: '#0000ff02', dark: '#3636fe0e' }),
+    iris2: token({ light: '#0000ff07', dark: '#564bf916' }),
+    iris3: token({ light: '#0011ee0f', dark: '#525bff3b' }),
+    iris4: token({ light: '#000bff19', dark: '#4d58ff5a' }),
+    iris5: token({ light: '#000eff25', dark: '#5b62fd6b' }),
+    iris6: token({ light: '#000aff34', dark: '#6d6ffd7a' }),
+    iris7: token({ light: '#0008e647', dark: '#7777fe8e' }),
+    iris8: token({ light: '#0008d964', dark: '#7b7afeac' }),
+    iris9: token({ light: '#0000c0a4', dark: '#6a6afed4' }),
+    iris10: token({ light: '#0000b6ae', dark: '#7d79ffdc' }),
+    iris11: token({ light: '#0600abac', dark: '#b1a9ff' }),
+    iris12: token({ light: '#000246d8', dark: '#e1e0fffe' }),
+  },
+};

packages/twenty-ui/design-tokens/color/jade.ts

@@ -0,0 +1,65 @@
+import { token } from '../token';
+
+export const JADE_COLOR_TOKENS = {
+  scale: {
+    jade1: token({
+      light: 'color(display-p3 0.986 0.996 0.992)',
+      dark: 'color(display-p3 0.059 0.083 0.071)',
+    }),
+    jade2: token({
+      light: 'color(display-p3 0.962 0.983 0.969)',
+      dark: 'color(display-p3 0.078 0.11 0.094)',
+    }),
+    jade3: token({
+      light: 'color(display-p3 0.912 0.965 0.932)',
+      dark: 'color(display-p3 0.091 0.176 0.138)',
+    }),
+    jade4: token({
+      light: 'color(display-p3 0.858 0.941 0.893)',
+      dark: 'color(display-p3 0.102 0.228 0.177)',
+    }),
+    jade5: token({
+      light: 'color(display-p3 0.795 0.909 0.847)',
+      dark: 'color(display-p3 0.133 0.279 0.221)',
+    }),
+    jade6: token({
+      light: 'color(display-p3 0.715 0.864 0.791)',
+      dark: 'color(display-p3 0.174 0.334 0.273)',
+    }),
+    jade7: token({
+      light: 'color(display-p3 0.603 0.802 0.718)',
+      dark: 'color(display-p3 0.219 0.402 0.335)',
+    }),
+    jade8: token({
+      light: 'color(display-p3 0.44 0.72 0.629)',
+      dark: 'color(display-p3 0.263 0.488 0.411)',
+    }),
+    jade9: token('color(display-p3 0.319 0.63 0.521)'),
+    jade10: token({
+      light: 'color(display-p3 0.299 0.592 0.488)',
+      dark: 'color(display-p3 0.338 0.68 0.555)',
+    }),
+    jade11: token({
+      light: 'color(display-p3 0.15 0.5 0.37)',
+      dark: 'color(display-p3 0.4 0.835 0.656)',
+    }),
+    jade12: token({
+      light: 'color(display-p3 0.142 0.229 0.194)',
+      dark: 'color(display-p3 0.734 0.934 0.838)',
+    }),
+  },
+  transparent: {
+    jade1: token({ light: '#00c08004', dark: '#00de4505' }),
+    jade2: token({ light: '#00a3460b', dark: '#27fba60c' }),
+    jade3: token({ light: '#00ae4819', dark: '#02f99920' }),
+    jade4: token({ light: '#00a85129', dark: '#00ffaa2d' }),
+    jade5: token({ light: '#00a2553c', dark: '#11ffb63b' }),
+    jade6: token({ light: '#009a5753', dark: '#34ffc24b' }),
+    jade7: token({ light: '#00945f74', dark: '#45fdc75e' }),
+    jade8: token({ light: '#00976ea9', dark: '#48ffcf75' }),
+    jade9: token({ light: '#00916bd6', dark: '#38feca9d' }),
+    jade10: token({ light: '#008764d9', dark: '#31fec7ab' }),
+    jade11: token({ light: '#007152df', dark: '#21fec0d6' }),
+    jade12: token({ light: '#002217e2', dark: '#b8ffe1ef' }),
+  },
+};

packages/twenty-ui/design-tokens/color/lime.ts

@@ -0,0 +1,65 @@
+import { token } from '../token';
+
+export const LIME_COLOR_TOKENS = {
+  scale: {
+    lime1: token({
+      light: 'color(display-p3 0.989 0.992 0.981)',
+      dark: 'color(display-p3 0.067 0.073 0.048)',
+    }),
+    lime2: token({
+      light: 'color(display-p3 0.975 0.98 0.954)',
+      dark: 'color(display-p3 0.086 0.1 0.067)',
+    }),
+    lime3: token({
+      light: 'color(display-p3 0.939 0.965 0.851)',
+      dark: 'color(display-p3 0.13 0.16 0.099)',
+    }),
+    lime4: token({
+      light: 'color(display-p3 0.896 0.94 0.76)',
+      dark: 'color(display-p3 0.172 0.214 0.126)',
+    }),
+    lime5: token({
+      light: 'color(display-p3 0.843 0.903 0.678)',
+      dark: 'color(display-p3 0.213 0.266 0.153)',
+    }),
+    lime6: token({
+      light: 'color(display-p3 0.778 0.852 0.599)',
+      dark: 'color(display-p3 0.257 0.321 0.182)',
+    }),
+    lime7: token({
+      light: 'color(display-p3 0.694 0.784 0.508)',
+      dark: 'color(display-p3 0.307 0.383 0.215)',
+    }),
+    lime8: token({
+      light: 'color(display-p3 0.585 0.707 0.378)',
+      dark: 'color(display-p3 0.365 0.456 0.25)',
+    }),
+    lime9: token('color(display-p3 0.78 0.928 0.466)'),
+    lime10: token({
+      light: 'color(display-p3 0.734 0.896 0.397)',
+      dark: 'color(display-p3 0.865 0.995 0.519)',
+    }),
+    lime11: token({
+      light: 'color(display-p3 0.386 0.482 0.227)',
+      dark: 'color(display-p3 0.771 0.893 0.485)',
+    }),
+    lime12: token({
+      light: 'color(display-p3 0.222 0.25 0.128)',
+      dark: 'color(display-p3 0.905 0.966 0.753)',
+    }),
+  },
+  transparent: {
+    lime1: token({ light: '#66990005', dark: '#11bb0003' }),
+    lime2: token({ light: '#6b95000c', dark: '#78f7000a' }),
+    lime3: token({ light: '#96c80029', dark: '#9bfd4c1a' }),
+    lime4: token({ light: '#8fc60042', dark: '#a7fe5c29' }),
+    lime5: token({ light: '#81bb0059', dark: '#affe6537' }),
+    lime6: token({ light: '#72aa006e', dark: '#b2fe6d46' }),
+    lime7: token({ light: '#61990087', dark: '#b6ff6f57' }),
+    lime8: token({ light: '#559200ab', dark: '#b6fd6d6c' }),
+    lime9: token({ light: '#93e4009c', dark: '#caff69ed' }),
+    lime10: token({ light: '#8fdc00b3', dark: '#d4ff70' }),
+    lime11: token({ light: '#375f00d0', dark: '#d1fe77e4' }),
+    lime12: token({ light: '#1e2900e3', dark: '#e9febff7' }),
+  },
+};

packages/twenty-ui/design-tokens/color/mainColors.ts

@@ -0,0 +1,57 @@
+import { AMBER_COLOR_TOKENS } from './amber';
+import { BLUE_COLOR_TOKENS } from './blue';
+import { BRONZE_COLOR_TOKENS } from './bronze';
+import { BROWN_COLOR_TOKENS } from './brown';
+import { CRIMSON_COLOR_TOKENS } from './crimson';
+import { CYAN_COLOR_TOKENS } from './cyan';
+import { GOLD_COLOR_TOKENS } from './gold';
+import { GRASS_COLOR_TOKENS } from './grass';
+import { GRAY_COLOR_TOKENS } from './gray';
+import { GREEN_COLOR_TOKENS } from './green';
+import { IRIS_COLOR_TOKENS } from './iris';
+import { JADE_COLOR_TOKENS } from './jade';
+import { LIME_COLOR_TOKENS } from './lime';
+import { MINT_COLOR_TOKENS } from './mint';
+import { ORANGE_COLOR_TOKENS } from './orange';
+import { PINK_COLOR_TOKENS } from './pink';
+import { PLUM_COLOR_TOKENS } from './plum';
+import { PURPLE_COLOR_TOKENS } from './purple';
+import { RED_COLOR_TOKENS } from './red';
+import { RUBY_COLOR_TOKENS } from './ruby';
+import { SKY_COLOR_TOKENS } from './sky';
+import { TOMATO_COLOR_TOKENS } from './tomato';
+import { TURQUOISE_COLOR_TOKENS } from './turquoise';
+import { VIOLET_COLOR_TOKENS } from './violet';
+import { YELLOW_COLOR_TOKENS } from './yellow';
+import { token } from '../token';
+
+export const MAIN_COLOR_TOKENS = {
+  red: RED_COLOR_TOKENS.scale.red9,
+  ruby: RUBY_COLOR_TOKENS.scale.ruby9,
+  crimson: CRIMSON_COLOR_TOKENS.scale.crimson9,
+  tomato: TOMATO_COLOR_TOKENS.scale.tomato9,
+  orange: ORANGE_COLOR_TOKENS.scale.orange9,
+  amber: AMBER_COLOR_TOKENS.scale.amber9,
+  yellow: YELLOW_COLOR_TOKENS.scale.yellow9,
+  lime: LIME_COLOR_TOKENS.scale.lime9,
+  grass: GRASS_COLOR_TOKENS.scale.grass9,
+  green: GREEN_COLOR_TOKENS.scale.green9,
+  jade: JADE_COLOR_TOKENS.scale.jade9,
+  mint: MINT_COLOR_TOKENS.scale.mint9,
+  turquoise: TURQUOISE_COLOR_TOKENS.scale.turquoise9,
+  cyan: CYAN_COLOR_TOKENS.scale.cyan9,
+  sky: SKY_COLOR_TOKENS.scale.sky9,
+  blue: BLUE_COLOR_TOKENS.scale.blue9,
+  iris: IRIS_COLOR_TOKENS.scale.iris9,
+  violet: VIOLET_COLOR_TOKENS.scale.violet9,
+  purple: PURPLE_COLOR_TOKENS.scale.purple9,
+  plum: PLUM_COLOR_TOKENS.scale.plum9,
+  pink: PINK_COLOR_TOKENS.scale.pink9,
+  bronze: BRONZE_COLOR_TOKENS.scale.bronze9,
+  gold: GOLD_COLOR_TOKENS.scale.gold9,
+  brown: BROWN_COLOR_TOKENS.scale.brown9,
+  gray: token({
+    light: GRAY_COLOR_TOKENS.scale.gray9.light,
+    dark: GRAY_COLOR_TOKENS.scale.gray7.dark,
+  }),
+};

packages/twenty-ui/design-tokens/color/mauve.ts

@@ -0,0 +1,68 @@
+import { token } from '../token';
+
+export const MAUVE_COLOR_TOKENS = {
+  scale: {
+    mauve1: token({
+      light: 'color(display-p3 0.991 0.988 0.992)',
+      dark: 'color(display-p3 0.07 0.067 0.074)',
+    }),
+    mauve2: token({
+      light: 'color(display-p3 0.98 0.976 0.984)',
+      dark: 'color(display-p3 0.101 0.098 0.105)',
+    }),
+    mauve3: token({
+      light: 'color(display-p3 0.946 0.938 0.952)',
+      dark: 'color(display-p3 0.138 0.134 0.144)',
+    }),
+    mauve4: token({
+      light: 'color(display-p3 0.915 0.906 0.925)',
+      dark: 'color(display-p3 0.167 0.161 0.175)',
+    }),
+    mauve5: token({
+      light: 'color(display-p3 0.886 0.876 0.901)',
+      dark: 'color(display-p3 0.196 0.189 0.206)',
+    }),
+    mauve6: token({
+      light: 'color(display-p3 0.856 0.846 0.875)',
+      dark: 'color(display-p3 0.232 0.225 0.245)',
+    }),
+    mauve7: token({
+      light: 'color(display-p3 0.814 0.804 0.84)',
+      dark: 'color(display-p3 0.286 0.277 0.302)',
+    }),
+    mauve8: token({
+      light: 'color(display-p3 0.735 0.728 0.777)',
+      dark: 'color(display-p3 0.383 0.373 0.408)',
+    }),
+    mauve9: token({
+      light: 'color(display-p3 0.555 0.549 0.596)',
+      dark: 'color(display-p3 0.434 0.428 0.467)',
+    }),
+    mauve10: token({
+      light: 'color(display-p3 0.514 0.508 0.552)',
+      dark: 'color(display-p3 0.487 0.48 0.519)',
+    }),
+    mauve11: token({
+      light: 'color(display-p3 0.395 0.388 0.424)',
+      dark: 'color(display-p3 0.707 0.7 0.735)',
+    }),
+    mauve12: token({
+      light: 'color(display-p3 0.128 0.122 0.147)',
+      dark: 'color(display-p3 0.933 0.933 0.94)',
+    }),
+  },
+  transparent: {
+    mauve1: token({ light: '#55005503', dark: '#00000000' }),
+    mauve2: token({ light: '#2b005506', dark: '#f5f4f609' }),
+    mauve3: token({ light: '#30004010', dark: '#ebeaf814' }),
+    mauve4: token({ light: '#20003618', dark: '#eee5f81d' }),
+    mauve5: token({ light: '#20003820', dark: '#efe6fe25' }),
+    mauve6: token({ light: '#14003527', dark: '#f1e6fd30' }),
+    mauve7: token({ light: '#10003332', dark: '#eee9ff40' }),
+    mauve8: token({ light: '#08003145', dark: '#eee7ff5d' }),
+    mauve9: token({ light: '#05001d73', dark: '#eae6fd6e' }),
+    mauve10: token({ light: '#0500197d', dark: '#ece9fd7c' }),
+    mauve11: token({ light: '#0400119c', dark: '#f5f1ffb7' }),
+    mauve12: token({ light: '#020008e0', dark: '#fdfdffef' }),
+  },
+};

packages/twenty-ui/design-tokens/color/mint.ts

@@ -0,0 +1,65 @@
+import { token } from '../token';
+
+export const MINT_COLOR_TOKENS = {
+  scale: {
+    mint1: token({
+      light: 'color(display-p3 0.98 0.995 0.992)',
+      dark: 'color(display-p3 0.059 0.082 0.081)',
+    }),
+    mint2: token({
+      light: 'color(display-p3 0.957 0.985 0.977)',
+      dark: 'color(display-p3 0.068 0.104 0.105)',
+    }),
+    mint3: token({
+      light: 'color(display-p3 0.888 0.972 0.95)',
+      dark: 'color(display-p3 0.077 0.17 0.168)',
+    }),
+    mint4: token({
+      light: 'color(display-p3 0.819 0.951 0.916)',
+      dark: 'color(display-p3 0.068 0.224 0.22)',
+    }),
+    mint5: token({
+      light: 'color(display-p3 0.747 0.918 0.873)',
+      dark: 'color(display-p3 0.104 0.275 0.264)',
+    }),
+    mint6: token({
+      light: 'color(display-p3 0.668 0.87 0.818)',
+      dark: 'color(display-p3 0.154 0.332 0.313)',
+    }),
+    mint7: token({
+      light: 'color(display-p3 0.567 0.805 0.744)',
+      dark: 'color(display-p3 0.207 0.403 0.373)',
+    }),
+    mint8: token({
+      light: 'color(display-p3 0.42 0.724 0.649)',
+      dark: 'color(display-p3 0.258 0.49 0.441)',
+    }),
+    mint9: token('color(display-p3 0.62 0.908 0.834)'),
+    mint10: token({
+      light: 'color(display-p3 0.585 0.871 0.797)',
+      dark: 'color(display-p3 0.725 0.954 0.898)',
+    }),
+    mint11: token({
+      light: 'color(display-p3 0.203 0.463 0.397)',
+      dark: 'color(display-p3 0.482 0.825 0.733)',
+    }),
+    mint12: token({
+      light: 'color(display-p3 0.136 0.259 0.236)',
+      dark: 'color(display-p3 0.807 0.955 0.887)',
+    }),
+  },
+  transparent: {
+    mint1: token({ light: '#00d5aa06', dark: '#00dede05' }),
+    mint2: token({ light: '#00b18a0d', dark: '#00f9f90b' }),
+    mint3: token({ light: '#00d29e22', dark: '#00fff61d' }),
+    mint4: token({ light: '#00cc9937', dark: '#00fff42c' }),
+    mint5: token({ light: '#00c0914c', dark: '#00fff23a' }),
+    mint6: token({ light: '#00b08663', dark: '#0effeb4a' }),
+    mint7: token({ light: '#00a17d81', dark: '#34fde55e' }),
+    mint8: token({ light: '#009e7fb3', dark: '#41ffdf76' }),
+    mint9: token({ light: '#00d3a579', dark: '#92ffe7e9' }),
+    mint10: token({ light: '#00c39982', dark: '#aefeedf5' }),
+    mint11: token({ light: '#007763fd', dark: '#67ffded2' }),
+    mint12: token({ light: '#00312ae9', dark: '#cbfee9f5' }),
+  },
+};

packages/twenty-ui/design-tokens/color/olive.ts

@@ -0,0 +1,68 @@
+import { token } from '../token';
+
+export const OLIVE_COLOR_TOKENS = {
+  scale: {
+    olive1: token({
+      light: 'color(display-p3 0.989 0.992 0.989)',
+      dark: 'color(display-p3 0.067 0.07 0.063)',
+    }),
+    olive2: token({
+      light: 'color(display-p3 0.974 0.98 0.973)',
+      dark: 'color(display-p3 0.095 0.098 0.091)',
+    }),
+    olive3: token({
+      light: 'color(display-p3 0.939 0.945 0.937)',
+      dark: 'color(display-p3 0.131 0.135 0.126)',
+    }),
+    olive4: token({
+      light: 'color(display-p3 0.907 0.914 0.905)',
+      dark: 'color(display-p3 0.158 0.163 0.153)',
+    }),
+    olive5: token({
+      light: 'color(display-p3 0.878 0.885 0.875)',
+      dark: 'color(display-p3 0.186 0.192 0.18)',
+    }),
+    olive6: token({
+      light: 'color(display-p3 0.846 0.855 0.843)',
+      dark: 'color(display-p3 0.221 0.229 0.215)',
+    }),
+    olive7: token({
+      light: 'color(display-p3 0.803 0.812 0.8)',
+      dark: 'color(display-p3 0.273 0.284 0.266)',
+    }),
+    olive8: token({
+      light: 'color(display-p3 0.727 0.738 0.723)',
+      dark: 'color(display-p3 0.365 0.382 0.359)',
+    }),
+    olive9: token({
+      light: 'color(display-p3 0.541 0.556 0.532)',
+      dark: 'color(display-p3 0.414 0.438 0.404)',
+    }),
+    olive10: token({
+      light: 'color(display-p3 0.5 0.515 0.491)',
+      dark: 'color(display-p3 0.467 0.49 0.458)',
+    }),
+    olive11: token({
+      light: 'color(display-p3 0.38 0.395 0.374)',
+      dark: 'color(display-p3 0.69 0.709 0.682)',
+    }),
+    olive12: token({
+      light: 'color(display-p3 0.117 0.129 0.111)',
+      dark: 'color(display-p3 0.927 0.933 0.926)',
+    }),
+  },
+  transparent: {
+    olive1: token({ light: '#00550003', dark: '#00000000' }),
+    olive2: token({ light: '#00490007', dark: '#f1f2f008' }),
+    olive3: token({ light: '#00200010', dark: '#f4f5f312' }),
+    olive4: token({ light: '#00160018', dark: '#f3fef21a' }),
+    olive5: token({ light: '#00180020', dark: '#f2fbf122' }),
+    olive6: token({ light: '#00140028', dark: '#f4faed2c' }),
+    olive7: token({ light: '#000f0033', dark: '#f2fced3b' }),
+    olive8: token({ light: '#040f0047', dark: '#edfdeb57' }),
+    olive9: token({ light: '#050f0078', dark: '#ebfde766' }),
+    olive10: token({ light: '#040e0082', dark: '#f0fdec74' }),
+    olive11: token({ light: '#020a00a0', dark: '#f6fef4b0' }),
+    olive12: token({ light: '#010600e3', dark: '#fdfffded' }),
+  },
+};

packages/twenty-ui/design-tokens/color/orange.ts

@@ -0,0 +1,65 @@
+import { token } from '../token';
+
+export const ORANGE_COLOR_TOKENS = {
+  scale: {
+    orange1: token({
+      light: 'color(display-p3 0.995 0.988 0.985)',
+      dark: 'color(display-p3 0.088 0.07 0.057)',
+    }),
+    orange2: token({
+      light: 'color(display-p3 0.994 0.968 0.934)',
+      dark: 'color(display-p3 0.113 0.089 0.061)',
+    }),
+    orange3: token({
+      light: 'color(display-p3 0.989 0.938 0.85)',
+      dark: 'color(display-p3 0.189 0.12 0.056)',
+    }),
+    orange4: token({
+      light: 'color(display-p3 1 0.874 0.687)',
+      dark: 'color(display-p3 0.262 0.132 0)',
+    }),
+    orange5: token({
+      light: 'color(display-p3 1 0.821 0.583)',
+      dark: 'color(display-p3 0.315 0.168 0.016)',
+    }),
+    orange6: token({
+      light: 'color(display-p3 0.975 0.767 0.545)',
+      dark: 'color(display-p3 0.376 0.219 0.088)',
+    }),
+    orange7: token({
+      light: 'color(display-p3 0.919 0.693 0.486)',
+      dark: 'color(display-p3 0.465 0.283 0.147)',
+    }),
+    orange8: token({
+      light: 'color(display-p3 0.877 0.597 0.379)',
+      dark: 'color(display-p3 0.601 0.359 0.201)',
+    }),
+    orange9: token('color(display-p3 0.9 0.45 0.2)'),
+    orange10: token({
+      light: 'color(display-p3 0.87 0.409 0.164)',
+      dark: 'color(display-p3 0.98 0.51 0.23)',
+    }),
+    orange11: token({
+      light: 'color(display-p3 0.76 0.34 0)',
+      dark: 'color(display-p3 1 0.63 0.38)',
+    }),
+    orange12: token({
+      light: 'color(display-p3 0.323 0.185 0.127)',
+      dark: 'color(display-p3 0.98 0.883 0.775)',
+    }),
+  },
+  transparent: {
+    orange1: token({ light: '#c0400004', dark: '#ec360007' }),
+    orange2: token({ light: '#ff8e0012', dark: '#fe6d000e' }),
+    orange3: token({ light: '#ff9c0029', dark: '#fb6a0025' }),
+    orange4: token({ light: '#ff91014a', dark: '#ff590039' }),
+    orange5: token({ light: '#ff8b0065', dark: '#ff61004a' }),
+    orange6: token({ light: '#ff81007d', dark: '#fd75045c' }),
+    orange7: token({ light: '#ed6c008c', dark: '#ff832c75' }),
+    orange8: token({ light: '#e35f00aa', dark: '#fe84389d' }),
+    orange9: token({ light: '#f65e00ea', dark: '#fe6d15f7' }),
+    orange10: token({ light: '#ef5f00', dark: '#ff801f' }),
+    orange11: token({ light: '#cc4e00', dark: '#ffa057' }),
+    orange12: token({ light: '#431200e2', dark: '#ffe0c2' }),
+  },
+};

packages/twenty-ui/design-tokens/color/pink.ts

@@ -0,0 +1,65 @@
+import { token } from '../token';
+
+export const PINK_COLOR_TOKENS = {
+  scale: {
+    pink1: token({
+      light: 'color(display-p3 0.998 0.989 0.996)',
+      dark: 'color(display-p3 0.093 0.068 0.089)',
+    }),
+    pink2: token({
+      light: 'color(display-p3 0.992 0.97 0.985)',
+      dark: 'color(display-p3 0.121 0.073 0.11)',
+    }),
+    pink3: token({
+      light: 'color(display-p3 0.981 0.917 0.96)',
+      dark: 'color(display-p3 0.198 0.098 0.179)',
+    }),
+    pink4: token({
+      light: 'color(display-p3 0.963 0.867 0.932)',
+      dark: 'color(display-p3 0.271 0.095 0.231)',
+    }),
+    pink5: token({
+      light: 'color(display-p3 0.939 0.815 0.899)',
+      dark: 'color(display-p3 0.32 0.127 0.273)',
+    }),
+    pink6: token({
+      light: 'color(display-p3 0.907 0.756 0.859)',
+      dark: 'color(display-p3 0.382 0.177 0.326)',
+    }),
+    pink7: token({
+      light: 'color(display-p3 0.869 0.683 0.81)',
+      dark: 'color(display-p3 0.477 0.238 0.405)',
+    }),
+    pink8: token({
+      light: 'color(display-p3 0.825 0.59 0.751)',
+      dark: 'color(display-p3 0.612 0.304 0.51)',
+    }),
+    pink9: token('color(display-p3 0.775 0.297 0.61)'),
+    pink10: token({
+      light: 'color(display-p3 0.748 0.27 0.581)',
+      dark: 'color(display-p3 0.808 0.356 0.645)',
+    }),
+    pink11: token({
+      light: 'color(display-p3 0.698 0.219 0.528)',
+      dark: 'color(display-p3 1 0.535 0.78)',
+    }),
+    pink12: token({
+      light: 'color(display-p3 0.363 0.101 0.279)',
+      dark: 'color(display-p3 0.964 0.826 0.912)',
+    }),
+  },
+  transparent: {
+    pink1: token({ light: '#ff00aa03', dark: '#f412bc09' }),
+    pink2: token({ light: '#e0008008', dark: '#f420bb12' }),
+    pink3: token({ light: '#f4008c16', dark: '#fe37cc29' }),
+    pink4: token({ light: '#e2008b23', dark: '#fc1ec43f' }),
+    pink5: token({ light: '#d1008331', dark: '#fd35c24e' }),
+    pink6: token({ light: '#c0007840', dark: '#fd51c75f' }),
+    pink7: token({ light: '#b6006f53', dark: '#fd62c87b' }),
+    pink8: token({ light: '#af006f6c', dark: '#ff68c8a2' }),
+    pink9: token({ light: '#c8007fbf', dark: '#fe49bcd4' }),
+    pink10: token({ light: '#c2007ac7', dark: '#ff5cc0dc' }),
+    pink11: token({ light: '#b60074d6', dark: '#ff8dcc' }),
+    pink12: token({ light: '#59003bed', dark: '#ffd3ecfd' }),
+  },
+};

packages/twenty-ui/design-tokens/color/plum.ts

@@ -0,0 +1,65 @@
+import { token } from '../token';
+
+export const PLUM_COLOR_TOKENS = {
+  scale: {
+    plum1: token({
+      light: 'color(display-p3 0.995 0.988 0.999)',
+      dark: 'color(display-p3 0.09 0.068 0.092)',
+    }),
+    plum2: token({
+      light: 'color(display-p3 0.988 0.971 0.99)',
+      dark: 'color(display-p3 0.118 0.077 0.121)',
+    }),
+    plum3: token({
+      light: 'color(display-p3 0.973 0.923 0.98)',
+      dark: 'color(display-p3 0.192 0.105 0.202)',
+    }),
+    plum4: token({
+      light: 'color(display-p3 0.953 0.875 0.966)',
+      dark: 'color(display-p3 0.25 0.121 0.271)',
+    }),
+    plum5: token({
+      light: 'color(display-p3 0.926 0.825 0.945)',
+      dark: 'color(display-p3 0.293 0.152 0.319)',
+    }),
+    plum6: token({
+      light: 'color(display-p3 0.89 0.765 0.916)',
+      dark: 'color(display-p3 0.343 0.198 0.372)',
+    }),
+    plum7: token({
+      light: 'color(display-p3 0.84 0.686 0.877)',
+      dark: 'color(display-p3 0.424 0.262 0.461)',
+    }),
+    plum8: token({
+      light: 'color(display-p3 0.775 0.58 0.832)',
+      dark: 'color(display-p3 0.54 0.341 0.595)',
+    }),
+    plum9: token('color(display-p3 0.624 0.313 0.708)'),
+    plum10: token({
+      light: 'color(display-p3 0.587 0.29 0.667)',
+      dark: 'color(display-p3 0.666 0.365 0.748)',
+    }),
+    plum11: token({
+      light: 'color(display-p3 0.543 0.263 0.619)',
+      dark: 'color(display-p3 0.86 0.602 0.933)',
+    }),
+    plum12: token({
+      light: 'color(display-p3 0.299 0.114 0.352)',
+      dark: 'color(display-p3 0.936 0.836 0.949)',
+    }),
+  },
+  transparent: {
+    plum1: token({ light: '#aa00ff03', dark: '#f112f108' }),
+    plum2: token({ light: '#c000c008', dark: '#f22ff211' }),
+    plum3: token({ light: '#cc00cc14', dark: '#fd4cfd27' }),
+    plum4: token({ light: '#c200c921', dark: '#f646ff3a' }),
+    plum5: token({ light: '#b700bd2e', dark: '#f455ff48' }),
+    plum6: token({ light: '#a400b03d', dark: '#f66dff56' }),
+    plum7: token({ light: '#9900a852', dark: '#f07cfd70' }),
+    plum8: token({ light: '#9000a56e', dark: '#ee84ff95' }),
+    plum9: token({ light: '#89009eb5', dark: '#e961feb6' }),
+    plum10: token({ light: '#7f0092bb', dark: '#ed70ffc0' }),
+    plum11: token({ light: '#730086c1', dark: '#f19cfef3' }),
+    plum12: token({ light: '#40004be6', dark: '#feddfef4' }),
+  },
+};

packages/twenty-ui/design-tokens/color/purple.ts

@@ -0,0 +1,65 @@
+import { token } from '../token';
+
+export const PURPLE_COLOR_TOKENS = {
+  scale: {
+    purple1: token({
+      light: 'color(display-p3 0.995 0.988 0.996)',
+      dark: 'color(display-p3 0.09 0.068 0.103)',
+    }),
+    purple2: token({
+      light: 'color(display-p3 0.983 0.971 0.993)',
+      dark: 'color(display-p3 0.113 0.082 0.134)',
+    }),
+    purple3: token({
+      light: 'color(display-p3 0.963 0.931 0.989)',
+      dark: 'color(display-p3 0.175 0.112 0.224)',
+    }),
+    purple4: token({
+      light: 'color(display-p3 0.937 0.888 0.981)',
+      dark: 'color(display-p3 0.224 0.137 0.297)',
+    }),
+    purple5: token({
+      light: 'color(display-p3 0.904 0.837 0.966)',
+      dark: 'color(display-p3 0.264 0.167 0.349)',
+    }),
+    purple6: token({
+      light: 'color(display-p3 0.86 0.774 0.942)',
+      dark: 'color(display-p3 0.311 0.208 0.406)',
+    }),
+    purple7: token({
+      light: 'color(display-p3 0.799 0.69 0.91)',
+      dark: 'color(display-p3 0.381 0.266 0.496)',
+    }),
+    purple8: token({
+      light: 'color(display-p3 0.719 0.583 0.874)',
+      dark: 'color(display-p3 0.49 0.349 0.649)',
+    }),
+    purple9: token('color(display-p3 0.523 0.318 0.751)'),
+    purple10: token({
+      light: 'color(display-p3 0.483 0.289 0.7)',
+      dark: 'color(display-p3 0.57 0.373 0.791)',
+    }),
+    purple11: token({
+      light: 'color(display-p3 0.473 0.281 0.687)',
+      dark: 'color(display-p3 0.8 0.62 1)',
+    }),
+    purple12: token({
+      light: 'color(display-p3 0.234 0.132 0.363)',
+      dark: 'color(display-p3 0.913 0.854 0.971)',
+    }),
+  },
+  transparent: {
+    purple1: token({ light: '#aa00aa03', dark: '#b412f90b' }),
+    purple2: token({ light: '#8000e008', dark: '#b744f714' }),
+    purple3: token({ light: '#8e00f112', dark: '#c150ff2d' }),
+    purple4: token({ light: '#8d00e51d', dark: '#bb53fd42' }),
+    purple5: token({ light: '#8000db2a', dark: '#be5cfd51' }),
+    purple6: token({ light: '#7a01d03b', dark: '#c16dfd61' }),
+    purple7: token({ light: '#6d00c350', dark: '#c378fd7a' }),
+    purple8: token({ light: '#6600c06c', dark: '#c47effa4' }),
+    purple9: token({ light: '#5c00adb1', dark: '#b661ffc2' }),
+    purple10: token({ light: '#53009eb8', dark: '#bc6fffcd' }),
+    purple11: token({ light: '#52009aba', dark: '#d19dff' }),
+    purple12: token({ light: '#250049df', dark: '#f1ddfffa' }),
+  },
+};

packages/twenty-ui/design-tokens/color/red.ts

@@ -0,0 +1,65 @@
+import { token } from '../token';
+
+export const RED_COLOR_TOKENS = {
+  scale: {
+    red1: token({
+      light: 'color(display-p3 0.998 0.989 0.988)',
+      dark: 'color(display-p3 0.093 0.068 0.067)',
+    }),
+    red2: token({
+      light: 'color(display-p3 0.995 0.971 0.971)',
+      dark: 'color(display-p3 0.118 0.077 0.079)',
+    }),
+    red3: token({
+      light: 'color(display-p3 0.985 0.925 0.925)',
+      dark: 'color(display-p3 0.211 0.081 0.099)',
+    }),
+    red4: token({
+      light: 'color(display-p3 0.999 0.866 0.866)',
+      dark: 'color(display-p3 0.287 0.079 0.113)',
+    }),
+    red5: token({
+      light: 'color(display-p3 0.984 0.812 0.811)',
+      dark: 'color(display-p3 0.348 0.11 0.142)',
+    }),
+    red6: token({
+      light: 'color(display-p3 0.955 0.751 0.749)',
+      dark: 'color(display-p3 0.414 0.16 0.183)',
+    }),
+    red7: token({
+      light: 'color(display-p3 0.915 0.675 0.672)',
+      dark: 'color(display-p3 0.508 0.224 0.236)',
+    }),
+    red8: token({
+      light: 'color(display-p3 0.872 0.575 0.572)',
+      dark: 'color(display-p3 0.659 0.298 0.297)',
+    }),
+    red9: token('color(display-p3 0.83 0.329 0.324)'),
+    red10: token({
+      light: 'color(display-p3 0.798 0.294 0.285)',
+      dark: 'color(display-p3 0.861 0.403 0.387)',
+    }),
+    red11: token({
+      light: 'color(display-p3 0.744 0.234 0.222)',
+      dark: 'color(display-p3 1 0.57 0.55)',
+    }),
+    red12: token({
+      light: 'color(display-p3 0.36 0.115 0.143)',
+      dark: 'color(display-p3 0.971 0.826 0.852)',
+    }),
+  },
+  transparent: {
+    red1: token({ light: '#ff000003', dark: '#f4121209' }),
+    red2: token({ light: '#ff000008', dark: '#f22f3e11' }),
+    red3: token({ light: '#f3000d14', dark: '#ff173f2d' }),
+    red4: token({ light: '#ff000824', dark: '#fe0a3b44' }),
+    red5: token({ light: '#ff000632', dark: '#ff204756' }),
+    red6: token({ light: '#f8000442', dark: '#ff3e5668' }),
+    red7: token({ light: '#df000356', dark: '#ff536184' }),
+    red8: token({ light: '#d2000571', dark: '#ff5d61b0' }),
+    red9: token({ light: '#db0007b7', dark: '#fe4e54e4' }),
+    red10: token({ light: '#d10005c1', dark: '#ff6465eb' }),
+    red11: token({ light: '#c40006d3', dark: '#ff9592' }),
+    red12: token({ light: '#55000de8', dark: '#ffd1d9' }),
+  },
+};

packages/twenty-ui/design-tokens/color/ruby.ts

@@ -0,0 +1,65 @@
+import { token } from '../token';
+
+export const RUBY_COLOR_TOKENS = {
+  scale: {
+    ruby1: token({
+      light: 'color(display-p3 0.998 0.989 0.992)',
+      dark: 'color(display-p3 0.093 0.068 0.074)',
+    }),
+    ruby2: token({
+      light: 'color(display-p3 0.995 0.971 0.974)',
+      dark: 'color(display-p3 0.113 0.083 0.089)',
+    }),
+    ruby3: token({
+      light: 'color(display-p3 0.983 0.92 0.928)',
+      dark: 'color(display-p3 0.208 0.088 0.117)',
+    }),
+    ruby4: token({
+      light: 'color(display-p3 0.987 0.869 0.885)',
+      dark: 'color(display-p3 0.279 0.092 0.147)',
+    }),
+    ruby5: token({
+      light: 'color(display-p3 0.968 0.817 0.839)',
+      dark: 'color(display-p3 0.337 0.12 0.18)',
+    }),
+    ruby6: token({
+      light: 'color(display-p3 0.937 0.758 0.786)',
+      dark: 'color(display-p3 0.401 0.166 0.223)',
+    }),
+    ruby7: token({
+      light: 'color(display-p3 0.897 0.685 0.721)',
+      dark: 'color(display-p3 0.495 0.224 0.281)',
+    }),
+    ruby8: token({
+      light: 'color(display-p3 0.851 0.588 0.639)',
+      dark: 'color(display-p3 0.652 0.295 0.359)',
+    }),
+    ruby9: token('color(display-p3 0.83 0.323 0.408)'),
+    ruby10: token({
+      light: 'color(display-p3 0.795 0.286 0.375)',
+      dark: 'color(display-p3 0.857 0.392 0.455)',
+    }),
+    ruby11: token({
+      light: 'color(display-p3 0.728 0.211 0.311)',
+      dark: 'color(display-p3 1 0.57 0.59)',
+    }),
+    ruby12: token({
+      light: 'color(display-p3 0.36 0.115 0.171)',
+      dark: 'color(display-p3 0.968 0.83 0.88)',
+    }),
+  },
+  transparent: {
+    ruby1: token({ light: '#ff005503', dark: '#f4124a09' }),
+    ruby2: token({ light: '#ff002008', dark: '#fe5a7f0e' }),
+    ruby3: token({ light: '#f3002515', dark: '#ff235d2c' }),
+    ruby4: token({ light: '#ff002523', dark: '#fd195e42' }),
+    ruby5: token({ light: '#ff002a31', dark: '#fe2d6b53' }),
+    ruby6: token({ light: '#e4002440', dark: '#ff447665' }),
+    ruby7: token({ light: '#ce002553', dark: '#ff577d80' }),
+    ruby8: token({ light: '#c300286d', dark: '#ff5c7cae' }),
+    ruby9: token({ light: '#db002cb9', dark: '#fe4c70e4' }),
+    ruby10: token({ light: '#d2002cc4', dark: '#ff617beb' }),
+    ruby11: token({ light: '#c10030db', dark: '#ff949d' }),
+    ruby12: token({ light: '#550016e8', dark: '#ffd3e2fe' }),
+  },
+};

packages/twenty-ui/design-tokens/color/sage.ts

@@ -0,0 +1,68 @@
+import { token } from '../token';
+
+export const SAGE_COLOR_TOKENS = {
+  scale: {
+    sage1: token({
+      light: 'color(display-p3 0.986 0.992 0.988)',
+      dark: 'color(display-p3 0.064 0.07 0.067)',
+    }),
+    sage2: token({
+      light: 'color(display-p3 0.97 0.977 0.974)',
+      dark: 'color(display-p3 0.092 0.098 0.094)',
+    }),
+    sage3: token({
+      light: 'color(display-p3 0.935 0.944 0.94)',
+      dark: 'color(display-p3 0.128 0.135 0.131)',
+    }),
+    sage4: token({
+      light: 'color(display-p3 0.904 0.913 0.909)',
+      dark: 'color(display-p3 0.155 0.164 0.159)',
+    }),
+    sage5: token({
+      light: 'color(display-p3 0.875 0.885 0.88)',
+      dark: 'color(display-p3 0.183 0.193 0.188)',
+    }),
+    sage6: token({
+      light: 'color(display-p3 0.844 0.854 0.849)',
+      dark: 'color(display-p3 0.218 0.23 0.224)',
+    }),
+    sage7: token({
+      light: 'color(display-p3 0.8 0.811 0.806)',
+      dark: 'color(display-p3 0.269 0.285 0.277)',
+    }),
+    sage8: token({
+      light: 'color(display-p3 0.725 0.738 0.732)',
+      dark: 'color(display-p3 0.362 0.382 0.373)',
+    }),
+    sage9: token({
+      light: 'color(display-p3 0.531 0.556 0.546)',
+      dark: 'color(display-p3 0.398 0.438 0.421)',
+    }),
+    sage10: token({
+      light: 'color(display-p3 0.492 0.515 0.506)',
+      dark: 'color(display-p3 0.453 0.49 0.474)',
+    }),
+    sage11: token({
+      light: 'color(display-p3 0.377 0.395 0.389)',
+      dark: 'color(display-p3 0.685 0.709 0.697)',
+    }),
+    sage12: token({
+      light: 'color(display-p3 0.107 0.129 0.118)',
+      dark: 'color(display-p3 0.927 0.933 0.93)',
+    }),
+  },
+  transparent: {
+    sage1: token({ light: '#00804004', dark: '#00000000' }),
+    sage2: token({ light: '#00402008', dark: '#f0f2f108' }),
+    sage3: token({ light: '#002d1e11', dark: '#f3f5f412' }),
+    sage4: token({ light: '#001f1519', dark: '#f2fefd1a' }),
+    sage5: token({ light: '#00180820', dark: '#f1fbfa22' }),
+    sage6: token({ light: '#00140d28', dark: '#edfbf42d' }),
+    sage7: token({ light: '#00140a34', dark: '#edfcf73c' }),
+    sage8: token({ light: '#000f0847', dark: '#ebfdf657' }),
+    sage9: token({ light: '#00110b79', dark: '#dffdf266' }),
+    sage10: token({ light: '#00100a83', dark: '#e5fdf674' }),
+    sage11: token({ light: '#000a07a0', dark: '#f4fefbb0' }),
+    sage12: token({ light: '#000805e5', dark: '#fdfffeed' }),
+  },
+};

packages/twenty-ui/design-tokens/color/sand.ts

@@ -0,0 +1,68 @@
+import { token } from '../token';
+
+export const SAND_COLOR_TOKENS = {
+  scale: {
+    sand1: token({
+      light: 'color(display-p3 0.992 0.992 0.989)',
+      dark: 'color(display-p3 0.067 0.067 0.063)',
+    }),
+    sand2: token({
+      light: 'color(display-p3 0.977 0.977 0.973)',
+      dark: 'color(display-p3 0.098 0.098 0.094)',
+    }),
+    sand3: token({
+      light: 'color(display-p3 0.943 0.942 0.936)',
+      dark: 'color(display-p3 0.135 0.135 0.129)',
+    }),
+    sand4: token({
+      light: 'color(display-p3 0.913 0.912 0.903)',
+      dark: 'color(display-p3 0.164 0.163 0.156)',
+    }),
+    sand5: token({
+      light: 'color(display-p3 0.885 0.883 0.873)',
+      dark: 'color(display-p3 0.193 0.192 0.183)',
+    }),
+    sand6: token({
+      light: 'color(display-p3 0.854 0.852 0.839)',
+      dark: 'color(display-p3 0.23 0.229 0.217)',
+    }),
+    sand7: token({
+      light: 'color(display-p3 0.813 0.81 0.794)',
+      dark: 'color(display-p3 0.285 0.282 0.267)',
+    }),
+    sand8: token({
+      light: 'color(display-p3 0.738 0.734 0.713)',
+      dark: 'color(display-p3 0.384 0.378 0.357)',
+    }),
+    sand9: token({
+      light: 'color(display-p3 0.553 0.553 0.528)',
+      dark: 'color(display-p3 0.434 0.428 0.403)',
+    }),
+    sand10: token({
+      light: 'color(display-p3 0.511 0.511 0.488)',
+      dark: 'color(display-p3 0.487 0.481 0.456)',
+    }),
+    sand11: token({
+      light: 'color(display-p3 0.388 0.388 0.37)',
+      dark: 'color(display-p3 0.707 0.703 0.68)',
+    }),
+    sand12: token({
+      light: 'color(display-p3 0.129 0.126 0.111)',
+      dark: 'color(display-p3 0.933 0.933 0.926)',
+    }),
+  },
+  transparent: {
+    sand1: token({ light: '#55550003', dark: '#00000000' }),
+    sand2: token({ light: '#25250007', dark: '#f4f4f309' }),
+    sand3: token({ light: '#20100010', dark: '#f6f6f513' }),
+    sand4: token({ light: '#1f150019', dark: '#fefef31b' }),
+    sand5: token({ light: '#1f180021', dark: '#fbfbeb23' }),
+    sand6: token({ light: '#19130029', dark: '#fffaed2d' }),
+    sand7: token({ light: '#19140035', dark: '#fffbed3c' }),
+    sand8: token({ light: '#1915014a', dark: '#fff9eb57' }),
+    sand9: token({ light: '#0f0f0079', dark: '#fffae965' }),
+    sand10: token({ light: '#0c0c0083', dark: '#fffdee73' }),
+    sand11: token({ light: '#080800a1', dark: '#fffcf4b0' }),
+    sand12: token({ light: '#060500e3', dark: '#fffffded' }),
+  },
+};

packages/twenty-ui/design-tokens/color/sky.ts

@@ -0,0 +1,65 @@
+import { token } from '../token';
+
+export const SKY_COLOR_TOKENS = {
+  scale: {
+    sky1: token({
+      light: 'color(display-p3 0.98 0.995 0.999)',
+      dark: 'color(display-p3 0.056 0.078 0.116)',
+    }),
+    sky2: token({
+      light: 'color(display-p3 0.953 0.98 0.99)',
+      dark: 'color(display-p3 0.075 0.101 0.149)',
+    }),
+    sky3: token({
+      light: 'color(display-p3 0.899 0.963 0.989)',
+      dark: 'color(display-p3 0.089 0.154 0.244)',
+    }),
+    sky4: token({
+      light: 'color(display-p3 0.842 0.937 0.977)',
+      dark: 'color(display-p3 0.106 0.207 0.323)',
+    }),
+    sky5: token({
+      light: 'color(display-p3 0.777 0.9 0.954)',
+      dark: 'color(display-p3 0.135 0.261 0.394)',
+    }),
+    sky6: token({
+      light: 'color(display-p3 0.701 0.851 0.921)',
+      dark: 'color(display-p3 0.17 0.322 0.469)',
+    }),
+    sky7: token({
+      light: 'color(display-p3 0.604 0.785 0.879)',
+      dark: 'color(display-p3 0.205 0.394 0.557)',
+    }),
+    sky8: token({
+      light: 'color(display-p3 0.457 0.696 0.829)',
+      dark: 'color(display-p3 0.232 0.48 0.665)',
+    }),
+    sky9: token('color(display-p3 0.585 0.877 0.983)'),
+    sky10: token({
+      light: 'color(display-p3 0.555 0.845 0.959)',
+      dark: 'color(display-p3 0.718 0.925 0.991)',
+    }),
+    sky11: token({
+      light: 'color(display-p3 0.193 0.448 0.605)',
+      dark: 'color(display-p3 0.536 0.772 0.924)',
+    }),
+    sky12: token({
+      light: 'color(display-p3 0.145 0.241 0.329)',
+      dark: 'color(display-p3 0.799 0.947 0.993)',
+    }),
+  },
+  transparent: {
+    sky1: token({ light: '#00d5ff06', dark: '#0044ff0f' }),
+    sky2: token({ light: '#00a4db0e', dark: '#1171fb18' }),
+    sky3: token({ light: '#00b3ee1e', dark: '#1184fc33' }),
+    sky4: token({ light: '#00ace42e', dark: '#128fff49' }),
+    sky5: token({ light: '#00a1d841', dark: '#1c9dfd5d' }),
+    sky6: token({ light: '#0092ca56', dark: '#28a5ff72' }),
+    sky7: token({ light: '#0089c172', dark: '#2badfe8b' }),
+    sky8: token({ light: '#0085bf9f', dark: '#1db2fea9' }),
+    sky9: token({ light: '#00c7fe83', dark: '#7ce3fffe' }),
+    sky10: token({ light: '#00bcf38b', dark: '#a8eeff' }),
+    sky11: token({ light: '#00749e', dark: '#7cd3ffef' }),
+    sky12: token({ light: '#002540e2', dark: '#c2f3ff' }),
+  },
+};

packages/twenty-ui/design-tokens/color/slate.ts

@@ -0,0 +1,68 @@
+import { token } from '../token';
+
+export const SLATE_COLOR_TOKENS = {
+  scale: {
+    slate1: token({
+      light: 'color(display-p3 0.988 0.988 0.992)',
+      dark: 'color(display-p3 0.067 0.067 0.074)',
+    }),
+    slate2: token({
+      light: 'color(display-p3 0.976 0.976 0.984)',
+      dark: 'color(display-p3 0.095 0.098 0.105)',
+    }),
+    slate3: token({
+      light: 'color(display-p3 0.94 0.941 0.953)',
+      dark: 'color(display-p3 0.13 0.135 0.145)',
+    }),
+    slate4: token({
+      light: 'color(display-p3 0.908 0.909 0.925)',
+      dark: 'color(display-p3 0.156 0.163 0.176)',
+    }),
+    slate5: token({
+      light: 'color(display-p3 0.88 0.881 0.901)',
+      dark: 'color(display-p3 0.183 0.191 0.206)',
+    }),
+    slate6: token({
+      light: 'color(display-p3 0.85 0.852 0.876)',
+      dark: 'color(display-p3 0.215 0.226 0.244)',
+    }),
+    slate7: token({
+      light: 'color(display-p3 0.805 0.808 0.838)',
+      dark: 'color(display-p3 0.265 0.28 0.302)',
+    }),
+    slate8: token({
+      light: 'color(display-p3 0.727 0.733 0.773)',
+      dark: 'color(display-p3 0.357 0.381 0.409)',
+    }),
+    slate9: token({
+      light: 'color(display-p3 0.547 0.553 0.592)',
+      dark: 'color(display-p3 0.415 0.431 0.463)',
+    }),
+    slate10: token({
+      light: 'color(display-p3 0.503 0.512 0.549)',
+      dark: 'color(display-p3 0.469 0.483 0.514)',
+    }),
+    slate11: token({
+      light: 'color(display-p3 0.379 0.392 0.421)',
+      dark: 'color(display-p3 0.692 0.704 0.728)',
+    }),
+    slate12: token({
+      light: 'color(display-p3 0.113 0.125 0.14)',
+      dark: 'color(display-p3 0.93 0.933 0.94)',
+    }),
+  },
+  transparent: {
+    slate1: token({ light: '#00005503', dark: '#00000000' }),
+    slate2: token({ light: '#00005506', dark: '#d8f4f609' }),
+    slate3: token({ light: '#0000330f', dark: '#ddeaf814' }),
+    slate4: token({ light: '#00002d17', dark: '#d3edf81d' }),
+    slate5: token({ light: '#0009321f', dark: '#d9edfe25' }),
+    slate6: token({ light: '#00002f26', dark: '#d6ebfd30' }),
+    slate7: token({ light: '#00062e32', dark: '#d9edff40' }),
+    slate8: token({ light: '#00083046', dark: '#d9edff5d' }),
+    slate9: token({ light: '#00051d74', dark: '#dfebfd6d' }),
+    slate10: token({ light: '#00071b7f', dark: '#e5edfd7b' }),
+    slate11: token({ light: '#0007149f', dark: '#f1f7feb5' }),
+    slate12: token({ light: '#000509e3', dark: '#fcfdffef' }),
+  },
+};

packages/twenty-ui/design-tokens/color/tomato.ts

@@ -0,0 +1,65 @@
+import { token } from '../token';
+
+export const TOMATO_COLOR_TOKENS = {
+  scale: {
+    tomato1: token({
+      light: 'color(display-p3 0.998 0.989 0.988)',
+      dark: 'color(display-p3 0.09 0.068 0.067)',
+    }),
+    tomato2: token({
+      light: 'color(display-p3 0.994 0.974 0.969)',
+      dark: 'color(display-p3 0.115 0.084 0.076)',
+    }),
+    tomato3: token({
+      light: 'color(display-p3 0.985 0.924 0.909)',
+      dark: 'color(display-p3 0.205 0.097 0.083)',
+    }),
+    tomato4: token({
+      light: 'color(display-p3 0.996 0.868 0.835)',
+      dark: 'color(display-p3 0.282 0.099 0.077)',
+    }),
+    tomato5: token({
+      light: 'color(display-p3 0.98 0.812 0.77)',
+      dark: 'color(display-p3 0.339 0.129 0.101)',
+    }),
+    tomato6: token({
+      light: 'color(display-p3 0.953 0.75 0.698)',
+      dark: 'color(display-p3 0.398 0.179 0.141)',
+    }),
+    tomato7: token({
+      light: 'color(display-p3 0.917 0.673 0.611)',
+      dark: 'color(display-p3 0.487 0.245 0.194)',
+    }),
+    tomato8: token({
+      light: 'color(display-p3 0.875 0.575 0.502)',
+      dark: 'color(display-p3 0.629 0.322 0.248)',
+    }),
+    tomato9: token('color(display-p3 0.831 0.345 0.231)'),
+    tomato10: token({
+      light: 'color(display-p3 0.802 0.313 0.2)',
+      dark: 'color(display-p3 0.862 0.415 0.298)',
+    }),
+    tomato11: token({
+      light: 'color(display-p3 0.755 0.259 0.152)',
+      dark: 'color(display-p3 1 0.585 0.455)',
+    }),
+    tomato12: token({
+      light: 'color(display-p3 0.335 0.165 0.132)',
+      dark: 'color(display-p3 0.959 0.833 0.802)',
+    }),
+  },
+  transparent: {
+    tomato1: token({ light: '#ff000003', dark: '#f1121208' }),
+    tomato2: token({ light: '#ff200008', dark: '#ff55330f' }),
+    tomato3: token({ light: '#f52b0018', dark: '#ff35232b' }),
+    tomato4: token({ light: '#ff35002c', dark: '#fd201142' }),
+    tomato5: token({ light: '#ff2e003d', dark: '#fe332153' }),
+    tomato6: token({ light: '#f92d0050', dark: '#ff4f3864' }),
+    tomato7: token({ light: '#e7280067', dark: '#fd644a7d' }),
+    tomato8: token({ light: '#db250084', dark: '#fe6d4ea7' }),
+    tomato9: token({ light: '#df2600d1', dark: '#fe5431e4' }),
+    tomato10: token({ light: '#d72400da', dark: '#ff6847eb' }),
+    tomato11: token({ light: '#cd2200ea', dark: '#ff977d' }),
+    tomato12: token({ light: '#460900e0', dark: '#ffd6cefb' }),
+  },
+};

packages/twenty-ui/design-tokens/color/turquoise.ts

@@ -0,0 +1,65 @@
+import { token } from '../token';
+
+export const TURQUOISE_COLOR_TOKENS = {
+  scale: {
+    turquoise1: token({
+      light: 'color(display-p3 0.983 0.996 0.992)',
+      dark: 'color(display-p3 0.059 0.083 0.079)',
+    }),
+    turquoise2: token({
+      light: 'color(display-p3 0.958 0.983 0.976)',
+      dark: 'color(display-p3 0.075 0.11 0.107)',
+    }),
+    turquoise3: token({
+      light: 'color(display-p3 0.895 0.971 0.952)',
+      dark: 'color(display-p3 0.087 0.175 0.165)',
+    }),
+    turquoise4: token({
+      light: 'color(display-p3 0.831 0.949 0.92)',
+      dark: 'color(display-p3 0.087 0.227 0.214)',
+    }),
+    turquoise5: token({
+      light: 'color(display-p3 0.761 0.914 0.878)',
+      dark: 'color(display-p3 0.12 0.277 0.261)',
+    }),
+    turquoise6: token({
+      light: 'color(display-p3 0.682 0.864 0.825)',
+      dark: 'color(display-p3 0.162 0.335 0.314)',
+    }),
+    turquoise7: token({
+      light: 'color(display-p3 0.581 0.798 0.756)',
+      dark: 'color(display-p3 0.205 0.406 0.379)',
+    }),
+    turquoise8: token({
+      light: 'color(display-p3 0.433 0.716 0.671)',
+      dark: 'color(display-p3 0.245 0.489 0.453)',
+    }),
+    turquoise9: token('color(display-p3 0.297 0.637 0.581)'),
+    turquoise10: token({
+      light: 'color(display-p3 0.275 0.599 0.542)',
+      dark: 'color(display-p3 0.319 0.69 0.62)',
+    }),
+    turquoise11: token({
+      light: 'color(display-p3 0.08 0.5 0.43)',
+      dark: 'color(display-p3 0.388 0.835 0.719)',
+    }),
+    turquoise12: token({
+      light: 'color(display-p3 0.11 0.235 0.219)',
+      dark: 'color(display-p3 0.734 0.934 0.87)',
+    }),
+  },
+  transparent: {
+    turquoise1: token({ light: '#00cc9905', dark: '#00deab05' }),
+    turquoise2: token({ light: '#00aa800c', dark: '#12fbe60c' }),
+    turquoise3: token({ light: '#00c69d1f', dark: '#00ffe61e' }),
+    turquoise4: token({ light: '#00c39633', dark: '#00ffe92d' }),
+    turquoise5: token({ light: '#00b49047', dark: '#00ffea3b' }),
+    turquoise6: token({ light: '#00a6855e', dark: '#1cffe84b' }),
+    turquoise7: token({ light: '#0099807c', dark: '#2efde85f' }),
+    turquoise8: token({ light: '#009783ac', dark: '#32ffe775' }),
+    turquoise9: token({ light: '#009e8ced', dark: '#13ffe49f' }),
+    turquoise10: token({ light: '#009684f2', dark: '#0dffe0ae' }),
+    turquoise11: token({ light: '#008573', dark: '#0afed5d6' }),
+    turquoise12: token({ light: '#00332df2', dark: '#b8ffebef' }),
+  },
+};

packages/twenty-ui/design-tokens/color/violet.ts

@@ -0,0 +1,65 @@
+import { token } from '../token';
+
+export const VIOLET_COLOR_TOKENS = {
+  scale: {
+    violet1: token({
+      light: 'color(display-p3 0.991 0.988 0.995)',
+      dark: 'color(display-p3 0.077 0.071 0.118)',
+    }),
+    violet2: token({
+      light: 'color(display-p3 0.978 0.974 0.998)',
+      dark: 'color(display-p3 0.101 0.084 0.141)',
+    }),
+    violet3: token({
+      light: 'color(display-p3 0.953 0.943 0.993)',
+      dark: 'color(display-p3 0.154 0.123 0.256)',
+    }),
+    violet4: token({
+      light: 'color(display-p3 0.916 0.897 1)',
+      dark: 'color(display-p3 0.191 0.148 0.345)',
+    }),
+    violet5: token({
+      light: 'color(display-p3 0.876 0.851 1)',
+      dark: 'color(display-p3 0.226 0.182 0.396)',
+    }),
+    violet6: token({
+      light: 'color(display-p3 0.825 0.793 0.981)',
+      dark: 'color(display-p3 0.269 0.223 0.449)',
+    }),
+    violet7: token({
+      light: 'color(display-p3 0.752 0.712 0.943)',
+      dark: 'color(display-p3 0.326 0.277 0.53)',
+    }),
+    violet8: token({
+      light: 'color(display-p3 0.654 0.602 0.902)',
+      dark: 'color(display-p3 0.399 0.346 0.656)',
+    }),
+    violet9: token('color(display-p3 0.417 0.341 0.784)'),
+    violet10: token({
+      light: 'color(display-p3 0.381 0.306 0.741)',
+      dark: 'color(display-p3 0.477 0.402 0.823)',
+    }),
+    violet11: token({
+      light: 'color(display-p3 0.383 0.317 0.702)',
+      dark: 'color(display-p3 0.72 0.65 1)',
+    }),
+    violet12: token({
+      light: 'color(display-p3 0.179 0.15 0.359)',
+      dark: 'color(display-p3 0.883 0.867 0.986)',
+    }),
+  },
+  transparent: {
+    violet1: token({ light: '#5500aa03', dark: '#4422ff0f' }),
+    violet2: token({ light: '#4900ff07', dark: '#853ff916' }),
+    violet3: token({ light: '#4400ee0f', dark: '#8354fe36' }),
+    violet4: token({ light: '#4300ff1b', dark: '#7d51fd50' }),
+    violet5: token({ light: '#3600ff26', dark: '#845ffd5f' }),
+    violet6: token({ light: '#3100fb35', dark: '#8f6cfd6d' }),
+    violet7: token({ light: '#2d01dd4a', dark: '#9879ff83' }),
+    violet8: token({ light: '#2b00d066', dark: '#977dfea8' }),
+    violet9: token({ light: '#2400b7a9', dark: '#8668ffcc' }),
+    violet10: token({ light: '#2300abb2', dark: '#9176fed7' }),
+    violet11: token({ light: '#1f0099af', dark: '#baa7ff' }),
+    violet12: token({ light: '#0b0043d9', dark: '#e3defffe' }),
+  },
+};

packages/twenty-ui/design-tokens/color/yellow.ts

@@ -0,0 +1,65 @@
+import { token } from '../token';
+
+export const YELLOW_COLOR_TOKENS = {
+  scale: {
+    yellow1: token({
+      light: 'color(display-p3 0.992 0.992 0.978)',
+      dark: 'color(display-p3 0.078 0.069 0.047)',
+    }),
+    yellow2: token({
+      light: 'color(display-p3 0.995 0.99 0.922)',
+      dark: 'color(display-p3 0.103 0.094 0.063)',
+    }),
+    yellow3: token({
+      light: 'color(display-p3 0.997 0.982 0.749)',
+      dark: 'color(display-p3 0.168 0.137 0.039)',
+    }),
+    yellow4: token({
+      light: 'color(display-p3 0.992 0.953 0.627)',
+      dark: 'color(display-p3 0.209 0.169 0)',
+    }),
+    yellow5: token({
+      light: 'color(display-p3 0.984 0.91 0.51)',
+      dark: 'color(display-p3 0.255 0.209 0)',
+    }),
+    yellow6: token({
+      light: 'color(display-p3 0.934 0.847 0.474)',
+      dark: 'color(display-p3 0.31 0.261 0.07)',
+    }),
+    yellow7: token({
+      light: 'color(display-p3 0.876 0.785 0.46)',
+      dark: 'color(display-p3 0.389 0.331 0.135)',
+    }),
+    yellow8: token({
+      light: 'color(display-p3 0.811 0.689 0.313)',
+      dark: 'color(display-p3 0.497 0.42 0.182)',
+    }),
+    yellow9: token('color(display-p3 1 0.92 0.22)'),
+    yellow10: token({
+      light: 'color(display-p3 0.977 0.868 0.291)',
+      dark: 'color(display-p3 1 1 0.456)',
+    }),
+    yellow11: token({
+      light: 'color(display-p3 0.6 0.44 0)',
+      dark: 'color(display-p3 0.948 0.885 0.392)',
+    }),
+    yellow12: token({
+      light: 'color(display-p3 0.271 0.233 0.137)',
+      dark: 'color(display-p3 0.959 0.934 0.731)',
+    }),
+  },
+  transparent: {
+    yellow1: token({ light: '#aaaa0006', dark: '#d1510004' }),
+    yellow2: token({ light: '#f4dd0016', dark: '#f9b4000b' }),
+    yellow3: token({ light: '#ffee0047', dark: '#ffaa001e' }),
+    yellow4: token({ light: '#ffe3016b', dark: '#fdb70028' }),
+    yellow5: token({ light: '#ffd5008f', dark: '#febb0036' }),
+    yellow6: token({ light: '#ebbc0097', dark: '#fec40046' }),
+    yellow7: token({ light: '#d2a10098', dark: '#fdcb225c' }),
+    yellow8: token({ light: '#c99700c6', dark: '#fdca327b' }),
+    yellow9: token({ light: '#ffe100d6', dark: '#ffe629' }),
+    yellow10: token({ light: '#ffdc00', dark: '#ffff57' }),
+    yellow11: token({ light: '#9e6c00', dark: '#fee949f5' }),
+    yellow12: token({ light: '#2e2000e0', dark: '#fef6baf6' }),
+  },
+};

packages/twenty-ui/design-tokens/designTokens.ts

@@ -0,0 +1,51 @@
+import { ACCENT_TOKENS } from './accent';
+import { ANIMATION_TOKENS } from './animation';
+import { BACKGROUND_TOKENS } from './background';
+import { BLUR_TOKENS } from './blur';
+import { BORDER_TOKENS } from './border';
+import { BOX_SHADOW_TOKENS } from './boxShadow';
+import { BUTTONS_TOKENS } from './buttons';
+import { CODE_TOKENS } from './code';
+import { COLOR_TOKENS } from './color';
+import { FONT_TOKENS } from './font';
+import { GRAY_SCALE_TOKENS } from './grayScale';
+import { ICON_TOKENS } from './icon';
+import { ILLUSTRATION_ICON_TOKENS } from './illustrationIcon';
+import { MODAL_TOKENS } from './modal';
+import { SNACK_BAR_TOKENS } from './snackBar';
+import { SPACING_TOKENS } from './spacing';
+import { TABLE_TOKENS } from './table';
+import { TAG_TOKENS } from './tag';
+import { TEXT_TOKENS } from './text';
+import { token } from './token';
+import { TOOLTIP_TOKENS } from './tooltip';
+import { type DesignTokenNode } from './types/DesignTokenNode';
+
+export const DESIGN_TOKENS: DesignTokenNode = {
+  icon: ICON_TOKENS,
+  modal: MODAL_TOKENS,
+  text: TEXT_TOKENS,
+  tooltip: TOOLTIP_TOKENS,
+  animation: ANIMATION_TOKENS,
+  spacingMultiplicator: token('4', { unit: 'number' }),
+  spacing: SPACING_TOKENS,
+  betweenSiblingsGap: token('2px'),
+  table: TABLE_TOKENS,
+  sidePanelWidth: token('500px'),
+  clickableElementBackgroundTransition: token('background 0.1s ease'),
+  lastLayerZIndex: token('2147483647', { unit: 'number' }),
+  buttons: BUTTONS_TOKENS,
+  accent: ACCENT_TOKENS,
+  background: BACKGROUND_TOKENS,
+  blur: BLUR_TOKENS,
+  border: BORDER_TOKENS,
+  boxShadow: BOX_SHADOW_TOKENS,
+  font: FONT_TOKENS,
+  name: token({ light: 'light', dark: 'dark' }),
+  snackBar: SNACK_BAR_TOKENS,
+  tag: TAG_TOKENS,
+  code: CODE_TOKENS,
+  IllustrationIcon: ILLUSTRATION_ICON_TOKENS,
+  grayScale: GRAY_SCALE_TOKENS,
+  color: COLOR_TOKENS,
+};

packages/twenty-ui/design-tokens/font.ts

@@ -0,0 +1,29 @@
+import { COLOR_TOKENS } from './color';
+import { GRAY_SCALE_TOKENS } from './grayScale';
+import { token } from './token';
+export const FONT_TOKENS = {
+  color: {
+    primary: GRAY_SCALE_TOKENS.gray12,
+    secondary: GRAY_SCALE_TOKENS.gray11,
+    tertiary: GRAY_SCALE_TOKENS.gray9,
+    light: GRAY_SCALE_TOKENS.gray8,
+    extraLight: GRAY_SCALE_TOKENS.gray7,
+    inverted: GRAY_SCALE_TOKENS.gray1,
+    danger: COLOR_TOKENS.red,
+  },
+  size: {
+    xxs: token('0.625rem'),
+    xs: token('0.85rem'),
+    sm: token('0.92rem'),
+    md: token('1rem'),
+    lg: token('1.23rem'),
+    xl: token('1.54rem'),
+    xxl: token('1.85rem'),
+  },
+  weight: {
+    regular: token('400', { unit: 'number' }),
+    medium: token('500', { unit: 'number' }),
+    semiBold: token('600', { unit: 'number' }),
+  },
+  family: token('Inter, sans-serif'),
+};

packages/twenty-ui/design-tokens/grayScale.ts

@@ -0,0 +1,3 @@
+import { GRAY_COLOR_TOKENS } from './color/gray';
+
+export const GRAY_SCALE_TOKENS = GRAY_COLOR_TOKENS.scale;

packages/twenty-ui/design-tokens/icon.ts

@@ -0,0 +1,15 @@
+import { token } from './token';
+
+export const ICON_TOKENS = {
+  size: {
+    sm: token('14', { unit: 'number' }),
+    md: token('16', { unit: 'number' }),
+    lg: token('20', { unit: 'number' }),
+    xl: token('24', { unit: 'number' }),
+  },
+  stroke: {
+    sm: token('1.6', { unit: 'number' }),
+    md: token('2', { unit: 'number' }),
+    lg: token('2.5', { unit: 'number' }),
+  },
+};

packages/twenty-ui/design-tokens/illustrationIcon.ts

@@ -0,0 +1,21 @@
+import { GRAY_SCALE_TOKENS } from './grayScale';
+import { token } from './token';
+export const ILLUSTRATION_ICON_TOKENS = {
+  color: {
+    blue: token({
+      light: 'color(display-p3 0.569 0.639 0.916)',
+      dark: 'color(display-p3 0.354 0.445 0.866)',
+    }),
+    gray: token({
+      light: 'color(display-p3 0.6 0.6 0.6)',
+      dark: 'color(display-p3 0.4 0.4 0.4)',
+    }),
+  },
+  fill: {
+    blue: token({
+      light: 'color(display-p3 0.831 0.87 1)',
+      dark: 'color(display-p3 0.848 0.881 0.99)',
+    }),
+    gray: GRAY_SCALE_TOKENS.gray5,
+  },
+};

packages/twenty-ui/design-tokens/modal.ts

@@ -0,0 +1,23 @@
+import { token } from './token';
+
+export const MODAL_TOKENS = {
+  size: {
+    sm: {
+      width: token('300px'),
+    },
+    md: {
+      width: token('400px'),
+    },
+    lg: {
+      width: token('53%'),
+    },
+    xl: {
+      width: token('1200px'),
+      height: token('800px'),
+    },
+    fullscreen: {
+      width: token('calc(100dvw / var(--t-zoom, 1))'),
+      height: token('calc(100dvh / var(--t-zoom, 1))'),
+    },
+  },
+};

packages/twenty-ui/design-tokens/pipeline/__tests__/buildLeafTree.test.ts

@@ -0,0 +1,49 @@
+import { type CollectedTokenLeaf } from '../../types/CollectedTokenLeaf';
+import { buildLeafTree } from '../buildLeafTree';
+
+const leafAt = (path: string[]): CollectedTokenLeaf => ({
+  path,
+  varName: `--t-${path.join('-')}`,
+  light: 'light-value',
+  dark: 'dark-value',
+});
+
+describe('buildLeafTree', () => {
+  it('nests leaves under their shared path segments', () => {
+    expect(
+      buildLeafTree({
+        leaves: [
+          leafAt(['border', 'radius', 'md']),
+          leafAt(['border', 'width']),
+        ],
+        leafValue: (leaf) => leaf.light,
+      }),
+    ).toEqual({
+      border: { radius: { md: 'light-value' }, width: 'light-value' },
+    });
+  });
+
+  it('throws when a path segment is already a leaf', () => {
+    expect(() =>
+      buildLeafTree({
+        leaves: [
+          leafAt(['border', 'radius']),
+          leafAt(['border', 'radius', 'md']),
+        ],
+        leafValue: (leaf) => leaf.light,
+      }),
+    ).toThrow('Token path collision at "border.radius.md"');
+  });
+
+  it('throws when a leaf would replace an existing subtree', () => {
+    expect(() =>
+      buildLeafTree({
+        leaves: [
+          leafAt(['border', 'radius', 'md']),
+          leafAt(['border', 'radius']),
+        ],
+        leafValue: (leaf) => leaf.light,
+      }),
+    ).toThrow('Token path collision at "border.radius"');
+  });
+});

packages/twenty-ui/design-tokens/pipeline/__tests__/buildThemeCommon.test.ts

@@ -0,0 +1,52 @@
+import { type CollectedTokenLeaf } from '../../types/CollectedTokenLeaf';
+import { buildThemeCommon } from '../buildThemeCommon';
+import { pathToVarName } from '../pathToVarName';
+
+const leaf = (
+  path: string[],
+  light: string,
+  dark = light,
+): CollectedTokenLeaf => ({
+  path,
+  varName: pathToVarName(path),
+  light,
+  dark,
+});
+
+const spacingLeaf = leaf(['spacing', '1'], '4px');
+
+describe('buildThemeCommon', () => {
+  it('emits only the pinned root keys', () => {
+    const output = buildThemeCommon({
+      leaves: [
+        leaf(['icon', 'size', 'sm'], '14px'),
+        spacingLeaf,
+        leaf(['background', 'primary'], '#fff', '#000'),
+      ],
+      rootKeys: ['icon', 'spacing'],
+    });
+    expect(output).toContain("sm: '14px'");
+    expect(output).toContain('spacing: themeSpacing');
+    expect(output).not.toContain('background');
+  });
+
+  it('throws when a pinned root key has no token', () => {
+    expect(() =>
+      buildThemeCommon({
+        leaves: [spacingLeaf],
+        rootKeys: ['spacing', 'modal'],
+      }),
+    ).toThrow('Missing the "modal" tokens for THEME_COMMON.');
+  });
+
+  it('throws when a pinned root key has a scheme-variant token', () => {
+    expect(() =>
+      buildThemeCommon({
+        leaves: [leaf(['icon', 'size', 'sm'], '14px', '16px'), spacingLeaf],
+        rootKeys: ['icon', 'spacing'],
+      }),
+    ).toThrow(
+      'THEME_COMMON token "icon.size.sm" must be scheme-invariant, got light "14px" / dark "16px".',
+    );
+  });
+});

packages/twenty-ui/design-tokens/pipeline/__tests__/buildThemeCss.test.ts

@@ -0,0 +1,95 @@
+import { type CollectedTokenLeaf } from '../../types/CollectedTokenLeaf';
+import { buildThemeCss } from '../buildThemeCss';
+import { pathToVarName } from '../pathToVarName';
+
+const radiusLeaf = (
+  name: string,
+  value: string,
+  darkValue = value,
+): CollectedTokenLeaf => {
+  const path = ['border', 'radius', name];
+  return { path, varName: pathToVarName(path), light: value, dark: darkValue };
+};
+
+const roundRadiusLeaves = [
+  radiusLeaf('smRound', '4px'),
+  radiusLeaf('mdRound', '8px'),
+  radiusLeaf('pill', '999px'),
+  radiusLeaf('rounded', '100%'),
+];
+
+const radiusLeaves = [
+  radiusLeaf('xs', '2px'),
+  radiusLeaf('sm', '4px'),
+  radiusLeaf('md', '8px'),
+  ...roundRadiusLeaves,
+  radiusLeaf('lg', '16px'),
+  radiusLeaf('xl', '20px'),
+  radiusLeaf('xxl', '40px'),
+];
+
+const extractSquircleBlock = (css: string): string =>
+  css.slice(css.indexOf('@supports (corner-shape: squircle)'));
+
+describe('buildThemeCss', () => {
+  it('emits the scheme block with the values of that scheme', () => {
+    const css = buildThemeCss({ leaves: radiusLeaves, scheme: 'dark' });
+    expect(css).toContain('.dark {');
+    expect(css).toContain('  --t-border-radius-md: 8px;');
+  });
+
+  it('doubles every radius that is not round inside the @supports block', () => {
+    const squircleBlock = extractSquircleBlock(
+      buildThemeCss({
+        leaves: [...radiusLeaves, radiusLeaf('xxxl', '48px')],
+        scheme: 'light',
+      }),
+    );
+    expect(squircleBlock).toContain('--t-border-radius-md: 16px;');
+    expect(squircleBlock).toContain('--t-border-radius-xxl: 80px;');
+    expect(squircleBlock).toContain('--t-border-radius-xxxl: 96px;');
+  });
+
+  it('never doubles the round radius tokens', () => {
+    const squircleBlock = extractSquircleBlock(
+      buildThemeCss({ leaves: radiusLeaves, scheme: 'light' }),
+    );
+    expect(squircleBlock).not.toContain('--t-border-radius-sm-round');
+    expect(squircleBlock).not.toContain('--t-border-radius-md-round');
+    expect(squircleBlock).not.toContain('--t-border-radius-pill');
+    expect(squircleBlock).not.toContain('--t-border-radius-rounded');
+  });
+
+  it('uses K 2.2 universally while preserving the --t-corner-shape opt-out', () => {
+    const squircleBlock = extractSquircleBlock(
+      buildThemeCss({ leaves: radiusLeaves, scheme: 'light' }),
+    );
+    expect(squircleBlock).toContain(
+      'corner-shape: var(--t-corner-shape, superellipse(2.2));',
+    );
+  });
+
+  it('throws when a round radius token is missing from the source', () => {
+    expect(() =>
+      buildThemeCss({
+        leaves: radiusLeaves.filter((leaf) => leaf.path[2] !== 'pill'),
+        scheme: 'light',
+      }),
+    ).toThrow('Missing round radius token "pill" for the squircle block.');
+  });
+
+  it('throws when no radius token is left to double', () => {
+    expect(() =>
+      buildThemeCss({ leaves: roundRadiusLeaves, scheme: 'light' }),
+    ).toThrow('Missing the border radius tokens for the squircle block.');
+  });
+
+  it('throws when a squircle radius is not a scheme-invariant integer px value', () => {
+    expect(() =>
+      buildThemeCss({
+        leaves: [radiusLeaf('xs', '2px', '3px'), ...radiusLeaves.slice(1)],
+        scheme: 'light',
+      }),
+    ).toThrow('must be a scheme-invariant integer px value');
+  });
+});

packages/twenty-ui/design-tokens/pipeline/__tests__/collectLeaves.test.ts

@@ -0,0 +1,64 @@
+import { collectLeaves } from '../collectLeaves';
+
+describe('collectLeaves', () => {
+  it('walks nested nodes and derives the CSS variable name from the path', () => {
+    expect(
+      collectLeaves({
+        border: { radius: { smRound: { light: '4px', dark: '4px' } } },
+      }),
+    ).toEqual([
+      {
+        path: ['border', 'radius', 'smRound'],
+        varName: '--t-border-radius-sm-round',
+        light: '4px',
+        dark: '4px',
+      },
+    ]);
+  });
+
+  it('keeps the number unit on leaves that declare it', () => {
+    expect(
+      collectLeaves({
+        lastLayerZIndex: {
+          light: '2147483647',
+          dark: '2147483647',
+          unit: 'number',
+        },
+      })[0].unit,
+    ).toBe('number');
+  });
+
+  it('throws when two token paths map to the same CSS variable', () => {
+    expect(() =>
+      collectLeaves({
+        IllustrationIcon: { color: { light: 'a', dark: 'a' } },
+        illustrationIcon: { color: { light: 'b', dark: 'b' } },
+      }),
+    ).toThrow(
+      'Token paths "IllustrationIcon.color" and "illustrationIcon.color" both map to the CSS variable "--t-illustration-icon-color"',
+    );
+  });
+
+  it('throws when a leaf marked unit number does not parse as a number', () => {
+    expect(() =>
+      collectLeaves({
+        spacingMultiplicator: { light: '4px', dark: '4px', unit: 'number' },
+      }),
+    ).toThrow(
+      "is marked unit: 'number' but its values do not parse as numbers",
+    );
+  });
+
+  it.each(['', '   ', 'Infinity'])(
+    'throws when a leaf marked unit number holds "%s"',
+    (value) => {
+      expect(() =>
+        collectLeaves({
+          spacingMultiplicator: { light: value, dark: '4', unit: 'number' },
+        }),
+      ).toThrow(
+        "is marked unit: 'number' but its values do not parse as numbers",
+      );
+    },
+  );
+});

packages/twenty-ui/design-tokens/pipeline/__tests__/pathToVarName.test.ts

@@ -0,0 +1,25 @@
+import { pathToVarName } from '../pathToVarName';
+
+describe('pathToVarName', () => {
+  it('joins segments with dashes under the --t- prefix', () => {
+    expect(pathToVarName(['border', 'color', 'strong'])).toBe(
+      '--t-border-color-strong',
+    );
+  });
+
+  it('splits camelCase segments into dashed words', () => {
+    expect(pathToVarName(['border', 'radius', 'smRound'])).toBe(
+      '--t-border-radius-sm-round',
+    );
+  });
+
+  it('lowercases a leading capital without adding a dash', () => {
+    expect(pathToVarName(['IllustrationIcon', 'color', 'blue'])).toBe(
+      '--t-illustration-icon-color-blue',
+    );
+  });
+
+  it('replaces dots inside a segment with an underscore', () => {
+    expect(pathToVarName(['spacing', '0.5'])).toBe('--t-spacing-0_5');
+  });
+});

packages/twenty-ui/design-tokens/pipeline/__tests__/quoteSingle.test.ts

@@ -0,0 +1,15 @@
+import { quoteSingle } from '../quoteSingle';
+
+describe('quoteSingle', () => {
+  it('wraps a plain value in single quotes', () => {
+    expect(quoteSingle('8px')).toBe("'8px'");
+  });
+
+  it('escapes backslashes before quotes so the escape is not doubled', () => {
+    expect(quoteSingle('a\\b')).toBe("'a\\\\b'");
+  });
+
+  it('escapes single quotes', () => {
+    expect(quoteSingle("Inter, 'DM Mono'")).toBe("'Inter, \\'DM Mono\\''");
+  });
+});

packages/twenty-ui/design-tokens/pipeline/__tests__/serializeTree.test.ts

@@ -0,0 +1,39 @@
+import { serializeTree } from '../serializeTree';
+
+describe('serializeTree', () => {
+  it('serializes a flat tree with the given separator', () => {
+    expect(serializeTree({ node: { md: "'8px'" }, separator: ',' })).toBe(
+      "{\n  md: '8px',\n}",
+    );
+  });
+
+  it('indents nested nodes by two more spaces per level', () => {
+    expect(
+      serializeTree({
+        node: { border: { radius: { md: "'8px'" } } },
+        separator: ',',
+      }),
+    ).toBe("{\n  border: {\n    radius: {\n      md: '8px',\n    },\n  },\n}");
+  });
+
+  it('quotes keys that are not valid identifiers', () => {
+    expect(serializeTree({ node: { '0.5': "'2px'" }, separator: ',' })).toBe(
+      '{\n  "0.5": \'2px\',\n}',
+    );
+  });
+
+  it('escapes a key that would otherwise break out of its quotes', () => {
+    expect(
+      serializeTree({ node: { 'we"ird\\': "'2px'" }, separator: ',' }),
+    ).toBe('{\n  "we\\"ird\\\\": \'2px\',\n}');
+  });
+
+  it('uses semicolons when serializing a type tree', () => {
+    expect(
+      serializeTree({
+        node: { size: { sm: 'number' } },
+        separator: ';',
+      }),
+    ).toBe('{\n  size: {\n    sm: number;\n  };\n}');
+  });
+});

packages/twenty-ui/design-tokens/pipeline/buildLeafTree.ts

@@ -0,0 +1,34 @@
+import { type CollectedTokenLeaf } from '../types/CollectedTokenLeaf';
+import { type SerializableTree } from '../types/SerializableTree';
+
+export const buildLeafTree = ({
+  leaves,
+  leafValue,
+}: {
+  leaves: CollectedTokenLeaf[];
+  leafValue: (leaf: CollectedTokenLeaf) => string;
+}): SerializableTree => {
+  const tree: SerializableTree = {};
+  for (const leaf of leaves) {
+    let node = tree;
+    for (const segment of leaf.path.slice(0, -1)) {
+      const existing = node[segment];
+      if (typeof existing === 'string') {
+        throw new Error(
+          `Token path collision at "${leaf.path.join('.')}": "${segment}" is already a leaf.`,
+        );
+      }
+      const child = existing ?? {};
+      node[segment] = child;
+      node = child;
+    }
+    const leafKey = leaf.path[leaf.path.length - 1];
+    if (node[leafKey] !== undefined) {
+      throw new Error(
+        `Token path collision at "${leaf.path.join('.')}": "${leafKey}" is already defined.`,
+      );
+    }
+    node[leafKey] = leafValue(leaf);
+  }
+  return tree;
+};

packages/twenty-ui/design-tokens/pipeline/buildMainColorNames.ts

@@ -0,0 +1,12 @@
+import { GENERATED_TYPESCRIPT_HEADER } from './generatedTypeScriptHeader';
+import { quoteSingle } from './quoteSingle';
+
+export const buildMainColorNames = (
+  colorNames: string[],
+): string => `${GENERATED_TYPESCRIPT_HEADER}
+export type ThemeColor = ${colorNames.map(quoteSingle).join(' | ')};
+
+export const MAIN_COLOR_NAMES: ThemeColor[] = [
+${colorNames.map((colorName) => `  ${quoteSingle(colorName)},`).join('\n')}
+];
+`;

packages/twenty-ui/design-tokens/pipeline/buildStaticThemeTree.ts

@@ -0,0 +1,44 @@
+import { type CollectedTokenLeaf } from '../types/CollectedTokenLeaf';
+import { buildLeafTree } from './buildLeafTree';
+import { renderStaticTokenValue } from './renderStaticTokenValue';
+import { serializeTree } from './serializeTree';
+
+const SPACING_TOKEN_KEY = 'spacing';
+const SPACING_BINDING = 'themeSpacing';
+
+const collapseSpacingScale = (
+  leaves: CollectedTokenLeaf[],
+): CollectedTokenLeaf[] => {
+  const firstSpacingIndex = leaves.findIndex(
+    (leaf) => leaf.path[0] === SPACING_TOKEN_KEY,
+  );
+  if (firstSpacingIndex === -1) {
+    throw new Error('Missing the spacing scale tokens.');
+  }
+  return leaves.flatMap((leaf, index) => {
+    if (leaf.path[0] !== SPACING_TOKEN_KEY) {
+      return [leaf];
+    }
+    return index === firstSpacingIndex
+      ? [{ ...leaf, path: [SPACING_TOKEN_KEY] }]
+      : [];
+  });
+};
+
+export const buildStaticThemeTree = ({
+  leaves,
+  scheme,
+}: {
+  leaves: CollectedTokenLeaf[];
+  scheme: 'light' | 'dark';
+}): string =>
+  serializeTree({
+    node: buildLeafTree({
+      leaves: collapseSpacingScale(leaves),
+      leafValue: (leaf) =>
+        leaf.path[0] === SPACING_TOKEN_KEY
+          ? SPACING_BINDING
+          : renderStaticTokenValue({ leaf, scheme }),
+    }),
+    separator: ',',
+  });

packages/twenty-ui/design-tokens/pipeline/buildThemeCommon.ts

@@ -0,0 +1,32 @@
+import { type CollectedTokenLeaf } from '../types/CollectedTokenLeaf';
+import { buildStaticThemeTree } from './buildStaticThemeTree';
+import { GENERATED_TYPESCRIPT_HEADER } from './generatedTypeScriptHeader';
+
+export const buildThemeCommon = ({
+  leaves,
+  rootKeys,
+}: {
+  leaves: CollectedTokenLeaf[];
+  rootKeys: readonly string[];
+}): string => {
+  const commonLeaves = leaves.filter((leaf) => rootKeys.includes(leaf.path[0]));
+  const missingRootKey = rootKeys.find(
+    (rootKey) => !commonLeaves.some((leaf) => leaf.path[0] === rootKey),
+  );
+  if (missingRootKey !== undefined) {
+    throw new Error(`Missing the "${missingRootKey}" tokens for THEME_COMMON.`);
+  }
+  const schemeVariantLeaf = commonLeaves.find(
+    (leaf) => leaf.light !== leaf.dark,
+  );
+  if (schemeVariantLeaf !== undefined) {
+    throw new Error(
+      `THEME_COMMON token "${schemeVariantLeaf.path.join('.')}" must be scheme-invariant, got light "${schemeVariantLeaf.light}" / dark "${schemeVariantLeaf.dark}".`,
+    );
+  }
+  return `${GENERATED_TYPESCRIPT_HEADER}
+import { themeSpacing } from '../internal/themeSpacing';
+
+export const THEME_COMMON = ${buildStaticThemeTree({ leaves: commonLeaves, scheme: 'light' })};
+`;
+};

packages/twenty-ui/design-tokens/pipeline/buildThemeConstants.ts

@@ -0,0 +1,26 @@
+import { type CollectedTokenLeaf } from '../types/CollectedTokenLeaf';
+import { buildStaticThemeTree } from './buildStaticThemeTree';
+import { GENERATED_TYPESCRIPT_HEADER } from './generatedTypeScriptHeader';
+
+export const buildThemeConstants = ({
+  leaves,
+  scheme,
+}: {
+  leaves: CollectedTokenLeaf[];
+  scheme: 'light' | 'dark';
+}): string => {
+  const body = buildStaticThemeTree({ leaves, scheme });
+  if (scheme === 'light') {
+    return `${GENERATED_TYPESCRIPT_HEADER}
+import { themeSpacing } from '../internal/themeSpacing';
+
+export const THEME_LIGHT = ${body};
+`;
+  }
+  return `${GENERATED_TYPESCRIPT_HEADER}
+import { themeSpacing } from '../internal/themeSpacing';
+import { type THEME_LIGHT } from './ThemeLight';
+
+export const THEME_DARK: typeof THEME_LIGHT = ${body};
+`;
+};

packages/twenty-ui/design-tokens/pipeline/buildThemeCss.ts

@@ -0,0 +1,73 @@
+import { type CollectedTokenLeaf } from '../types/CollectedTokenLeaf';
+import { GENERATED_CSS_HEADER } from './generatedCssHeader';
+import { selectSquircleDoubledRadiusLeaves } from './selectSquircleDoubledRadiusLeaves';
+
+const SQUIRCLE_COMMENT = `/* Squircle corners: progressive enhancement for browsers supporting
+   corner-shape (Chromium 139+). A squircle needs ~2x the radius of a round
+   corner to read as the same visual size, so the radius tokens are doubled
+   here; other browsers keep the base tokens as plain rounded corners.
+
+   Shape rules:
+   - pill, rounded and the *-round tokens are never doubled: they belong to
+     elements that keep corner-shape: round (circles, capsules, checkboxes,
+     chips, tags) and must look identical in both modes.
+   - Opt a subtree out of squircles with --t-corner-shape: round, or a
+     single element with corner-shape: round.
+   - Nested radii must stay concentric in both modes: derive them from the
+     parent radius token minus the inset, e.g.
+     calc(var(--t-border-radius-md) - var(--t-spacing-1)).
+     The token doubles under squircle while the inset does not, which is
+     exactly what concentricity requires. */`;
+
+const ZERO_SPECIFICITY_COMMENT =
+  '  /* Zero specificity on purpose: any component rule can override it. */';
+
+const extractSquircleBasePx = (leaf: CollectedTokenLeaf): number => {
+  const match = leaf.light.match(/^(\d+)px$/);
+  if (match === null || leaf.light !== leaf.dark) {
+    throw new Error(
+      `Squircle-doubled radius token "${leaf.varName}" must be a scheme-invariant integer px value, got light "${leaf.light}" / dark "${leaf.dark}".`,
+    );
+  }
+  return Number(match[1]);
+};
+
+export const buildThemeCss = ({
+  leaves,
+  scheme,
+}: {
+  leaves: CollectedTokenLeaf[];
+  scheme: 'light' | 'dark';
+}): string => {
+  const declarations = leaves
+    .map(
+      (leaf) =>
+        `  ${leaf.varName}: ${scheme === 'light' ? leaf.light : leaf.dark};`,
+    )
+    .join('\n');
+
+  const doubledDeclarations = selectSquircleDoubledRadiusLeaves(leaves)
+    .map((leaf) => `    ${leaf.varName}: ${extractSquircleBasePx(leaf) * 2}px;`)
+    .join('\n');
+
+  return `${GENERATED_CSS_HEADER}
+
+.${scheme} {
+${declarations}
+}
+
+${SQUIRCLE_COMMENT}
+@supports (corner-shape: squircle) {
+  .${scheme} {
+${doubledDeclarations}
+  }
+
+${ZERO_SPECIFICITY_COMMENT}
+  *,
+  *::before,
+  *::after {
+    corner-shape: var(--t-corner-shape, superellipse(2.2));
+  }
+}
+`;
+};

packages/twenty-ui/design-tokens/pipeline/buildThemeCssVariables.ts

@@ -0,0 +1,17 @@
+import { type CollectedTokenLeaf } from '../types/CollectedTokenLeaf';
+import { buildLeafTree } from './buildLeafTree';
+import { GENERATED_TYPESCRIPT_HEADER } from './generatedTypeScriptHeader';
+import { quoteSingle } from './quoteSingle';
+import { serializeTree } from './serializeTree';
+
+export const buildThemeCssVariables = (
+  leaves: CollectedTokenLeaf[],
+): string => {
+  const tree = buildLeafTree({
+    leaves,
+    leafValue: (leaf) => quoteSingle(`var(${leaf.varName})`),
+  });
+  return `${GENERATED_TYPESCRIPT_HEADER}
+export const themeCssVariables = ${serializeTree({ node: tree, separator: ',' })};
+`;
+};

packages/twenty-ui/design-tokens/pipeline/buildThemeSpacing.ts

@@ -0,0 +1,22 @@
+import { type CollectedTokenLeaf } from '../types/CollectedTokenLeaf';
+import { GENERATED_TYPESCRIPT_HEADER } from './generatedTypeScriptHeader';
+
+export const buildThemeSpacing = (leaves: CollectedTokenLeaf[]): string => {
+  const multiplicatorLeaf = leaves.find(
+    (leaf) => leaf.path.join('.') === 'spacingMultiplicator',
+  );
+  if (multiplicatorLeaf === undefined) {
+    throw new Error('Missing the spacingMultiplicator token.');
+  }
+  if (multiplicatorLeaf.light !== multiplicatorLeaf.dark) {
+    throw new Error(
+      `spacingMultiplicator must be scheme-invariant, got light "${multiplicatorLeaf.light}" / dark "${multiplicatorLeaf.dark}".`,
+    );
+  }
+  return `${GENERATED_TYPESCRIPT_HEADER}
+export const themeSpacing = (...multiplicators: number[]): string =>
+  multiplicators
+    .map((multiplicator) => \`\${multiplicator * ${Number(multiplicatorLeaf.light)}}px\`)
+    .join(' ');
+`;
+};

packages/twenty-ui/design-tokens/pipeline/buildThemeSubtreeConstant.ts

@@ -0,0 +1,34 @@
+import { type CollectedTokenLeaf } from '../types/CollectedTokenLeaf';
+import { buildLeafTree } from './buildLeafTree';
+import { GENERATED_TYPESCRIPT_HEADER } from './generatedTypeScriptHeader';
+import { renderStaticTokenValue } from './renderStaticTokenValue';
+import { serializeTree } from './serializeTree';
+
+// Bundlers cannot drop unused properties of a referenced object literal, so
+// slicing these out of THEME_LIGHT would retain all 994 tokens.
+export const buildThemeSubtreeConstant = ({
+  leaves,
+  rootKey,
+  scheme,
+  exportName,
+}: {
+  leaves: CollectedTokenLeaf[];
+  rootKey: string;
+  scheme: 'light' | 'dark';
+  exportName: string;
+}): string => {
+  const subtreeLeaves = leaves.filter((leaf) => leaf.path[0] === rootKey);
+  if (subtreeLeaves.length === 0) {
+    throw new Error(`Missing the "${rootKey}" tokens.`);
+  }
+  const tree = buildLeafTree({
+    leaves: subtreeLeaves.map((leaf) => ({
+      ...leaf,
+      path: leaf.path.slice(1),
+    })),
+    leafValue: (leaf) => renderStaticTokenValue({ leaf, scheme }),
+  });
+  return `${GENERATED_TYPESCRIPT_HEADER}
+export const ${exportName} = ${serializeTree({ node: tree, separator: ',' })};
+`;
+};

packages/twenty-ui/design-tokens/pipeline/buildThemeTypes.ts

@@ -0,0 +1,14 @@
+import { type CollectedTokenLeaf } from '../types/CollectedTokenLeaf';
+import { buildLeafTree } from './buildLeafTree';
+import { GENERATED_TYPESCRIPT_HEADER } from './generatedTypeScriptHeader';
+import { serializeTree } from './serializeTree';
+
+export const buildThemeTypes = (leaves: CollectedTokenLeaf[]): string => {
+  const tree = buildLeafTree({
+    leaves,
+    leafValue: (leaf) => (leaf.unit === 'number' ? 'number' : 'string'),
+  });
+  return `${GENERATED_TYPESCRIPT_HEADER}
+export type ThemeType = ${serializeTree({ node: tree, separator: ';' })};
+`;
+};

packages/twenty-ui/design-tokens/pipeline/collectLeaves.ts

@@ -0,0 +1,70 @@
+import { type CollectedTokenLeaf } from '../types/CollectedTokenLeaf';
+import { type DesignTokenLeaf } from '../types/DesignTokenLeaf';
+import { type DesignTokenNode } from '../types/DesignTokenNode';
+import { pathToVarName } from './pathToVarName';
+
+const isLeaf = (
+  node: DesignTokenNode | DesignTokenLeaf,
+): node is DesignTokenLeaf =>
+  typeof node.light === 'string' && typeof node.dark === 'string';
+
+const collectLeavesUnderPath = (
+  node: DesignTokenNode,
+  path: string[],
+): CollectedTokenLeaf[] => {
+  const leaves: CollectedTokenLeaf[] = [];
+  for (const key of Object.keys(node)) {
+    const value = node[key];
+    const valuePath = [...path, key];
+    if (isLeaf(value)) {
+      leaves.push({
+        path: valuePath,
+        varName: pathToVarName(valuePath),
+        light: value.light,
+        dark: value.dark,
+        unit: value.unit,
+        jsValue: value.jsValue,
+      });
+      continue;
+    }
+    leaves.push(...collectLeavesUnderPath(value, valuePath));
+  }
+  return leaves;
+};
+
+const assertUniqueVarNames = (leaves: CollectedTokenLeaf[]) => {
+  const pathByVarName = new Map<string, string>();
+  for (const leaf of leaves) {
+    const tokenPath = leaf.path.join('.');
+    const claimedBy = pathByVarName.get(leaf.varName);
+    if (claimedBy !== undefined) {
+      throw new Error(
+        `Token paths "${claimedBy}" and "${tokenPath}" both map to the CSS variable "${leaf.varName}".`,
+      );
+    }
+    pathByVarName.set(leaf.varName, tokenPath);
+  }
+};
+
+const isFiniteNumericValue = (value: string) =>
+  value.trim() !== '' && Number.isFinite(Number(value));
+
+const assertNumericLeavesParse = (leaves: CollectedTokenLeaf[]) => {
+  for (const leaf of leaves) {
+    if (leaf.unit !== 'number') {
+      continue;
+    }
+    if (!isFiniteNumericValue(leaf.light) || !isFiniteNumericValue(leaf.dark)) {
+      throw new Error(
+        `Token "${leaf.path.join('.')}" is marked unit: 'number' but its values do not parse as numbers: light "${leaf.light}" / dark "${leaf.dark}".`,
+      );
+    }
+  }
+};
+
+export const collectLeaves = (root: DesignTokenNode): CollectedTokenLeaf[] => {
+  const leaves = collectLeavesUnderPath(root, []);
+  assertUniqueVarNames(leaves);
+  assertNumericLeavesParse(leaves);
+  return leaves;
+};

packages/twenty-ui/design-tokens/pipeline/generatedCssHeader.ts

@@ -0,0 +1,2 @@
+export const GENERATED_CSS_HEADER = `/* Generated from design-tokens by scripts/generateThemeTokens.ts.
+   Do not edit manually. Regenerate with: npx nx generateTokens twenty-ui. */`;

packages/twenty-ui/design-tokens/pipeline/generatedTypeScriptHeader.ts

@@ -0,0 +1,2 @@
+export const GENERATED_TYPESCRIPT_HEADER = `// Generated from design-tokens by scripts/generateThemeTokens.ts.
+// Do not edit manually. Regenerate with: npx nx generateTokens twenty-ui.`;

packages/twenty-ui/design-tokens/pipeline/pathToVarName.ts

@@ -0,0 +1,11 @@
+export const pathToVarName = (path: string[]): string =>
+  '--t-' +
+  path
+    .map((segment) =>
+      segment
+        .replace(/[A-Z]/g, (letter, offset) =>
+          offset === 0 ? letter.toLowerCase() : `-${letter.toLowerCase()}`,
+        )
+        .replace(/\./g, '_'),
+    )
+    .join('-');

packages/twenty-ui/design-tokens/pipeline/quoteSingle.ts

@@ -0,0 +1,2 @@
+export const quoteSingle = (value: string): string =>
+  `'${value.replace(/\\/g, '\\\\').replace(/'/g, "\\'")}'`;

packages/twenty-ui/design-tokens/pipeline/referenceKey.ts

@@ -0,0 +1,2 @@
+export const referenceKey = (key: string): string =>
+  /^[A-Za-z_$][A-Za-z0-9_$]*$/.test(key) ? key : JSON.stringify(key);

packages/twenty-ui/design-tokens/pipeline/renderStaticTokenValue.ts

@@ -0,0 +1,16 @@
+import { type CollectedTokenLeaf } from '../types/CollectedTokenLeaf';
+import { quoteSingle } from './quoteSingle';
+
+export const renderStaticTokenValue = ({
+  leaf,
+  scheme,
+}: {
+  leaf: CollectedTokenLeaf;
+  scheme: 'light' | 'dark';
+}): string => {
+  if (leaf.jsValue === 'cssVariable') {
+    return quoteSingle(`var(${leaf.varName})`);
+  }
+  const value = scheme === 'light' ? leaf.light : leaf.dark;
+  return leaf.unit === 'number' ? String(Number(value)) : quoteSingle(value);
+};

packages/twenty-ui/design-tokens/pipeline/selectSquircleDoubledRadiusLeaves.ts

@@ -0,0 +1,29 @@
+import { ROUND_RADIUS_TOKENS } from '../roundRadiusTokens';
+import { type CollectedTokenLeaf } from '../types/CollectedTokenLeaf';
+
+const isRadiusLeaf = (leaf: CollectedTokenLeaf): boolean =>
+  leaf.path.length === 3 &&
+  leaf.path[0] === 'border' &&
+  leaf.path[1] === 'radius';
+
+export const selectSquircleDoubledRadiusLeaves = (
+  leaves: CollectedTokenLeaf[],
+): CollectedTokenLeaf[] => {
+  const radiusLeaves = leaves.filter(isRadiusLeaf);
+  const missingRoundRadiusToken = ROUND_RADIUS_TOKENS.find(
+    (roundRadiusToken) =>
+      !radiusLeaves.some((leaf) => leaf.path[2] === roundRadiusToken),
+  );
+  if (missingRoundRadiusToken !== undefined) {
+    throw new Error(
+      `Missing round radius token "${missingRoundRadiusToken}" for the squircle block.`,
+    );
+  }
+  const doubledRadiusLeaves = radiusLeaves.filter(
+    (leaf) => !ROUND_RADIUS_TOKENS.includes(leaf.path[2]),
+  );
+  if (doubledRadiusLeaves.length === 0) {
+    throw new Error('Missing the border radius tokens for the squircle block.');
+  }
+  return doubledRadiusLeaves;
+};

packages/twenty-ui/design-tokens/pipeline/serializeTree.ts

@@ -0,0 +1,23 @@
+import { type SerializableTree } from '../types/SerializableTree';
+import { referenceKey } from './referenceKey';
+
+export const serializeTree = ({
+  node,
+  separator,
+  depth = 0,
+}: {
+  node: SerializableTree;
+  separator: ',' | ';';
+  depth?: number;
+}): string => {
+  const spaces = '  '.repeat(depth + 1);
+  const entries = Object.keys(node).map((key) => {
+    const value = node[key];
+    const serializedValue =
+      typeof value === 'string'
+        ? value
+        : serializeTree({ node: value, separator, depth: depth + 1 });
+    return `${spaces}${referenceKey(key)}: ${serializedValue}${separator}`;
+  });
+  return `{\n${entries.join('\n')}\n${'  '.repeat(depth)}}`;
+};

packages/twenty-ui/design-tokens/roundRadiusTokens.ts

@@ -0,0 +1,6 @@
+export const ROUND_RADIUS_TOKENS: readonly string[] = [
+  'smRound',
+  'mdRound',
+  'pill',
+  'rounded',
+];

packages/twenty-ui/design-tokens/snackBar.ts

@@ -0,0 +1,25 @@
+import { COLOR_TOKENS } from './color';
+import { GRAY_SCALE_TOKENS } from './grayScale';
+import { token } from './token';
+export const SNACK_BAR_TOKENS = {
+  success: {
+    color: COLOR_TOKENS.turquoise,
+    backgroundColor: token({ light: '#00a43319', dark: '#11ff992d' }),
+  },
+  error: {
+    color: COLOR_TOKENS.red,
+    backgroundColor: COLOR_TOKENS.transparent.red3,
+  },
+  warning: {
+    color: COLOR_TOKENS.orange,
+    backgroundColor: token({ light: '#ff9c0029', dark: '#ff590039' }),
+  },
+  info: {
+    color: COLOR_TOKENS.blue,
+    backgroundColor: token({ light: '#0047f112', dark: '#3566ff57' }),
+  },
+  default: {
+    color: GRAY_SCALE_TOKENS.gray12,
+    backgroundColor: COLOR_TOKENS.transparent.gray2,
+  },
+};

packages/twenty-ui/design-tokens/spacing.ts

@@ -0,0 +1,39 @@
+import { token } from './token';
+
+export const SPACING_TOKENS = {
+  '0': token('0px'),
+  '1': token('4px'),
+  '2': token('8px'),
+  '3': token('12px'),
+  '4': token('16px'),
+  '5': token('20px'),
+  '6': token('24px'),
+  '7': token('28px'),
+  '8': token('32px'),
+  '9': token('36px'),
+  '10': token('40px'),
+  '11': token('44px'),
+  '12': token('48px'),
+  '13': token('52px'),
+  '14': token('56px'),
+  '15': token('60px'),
+  '16': token('64px'),
+  '17': token('68px'),
+  '18': token('72px'),
+  '19': token('76px'),
+  '20': token('80px'),
+  '21': token('84px'),
+  '22': token('88px'),
+  '23': token('92px'),
+  '24': token('96px'),
+  '25': token('100px'),
+  '26': token('104px'),
+  '27': token('108px'),
+  '28': token('112px'),
+  '29': token('116px'),
+  '30': token('120px'),
+  '31': token('124px'),
+  '32': token('128px'),
+  '0.5': token('2px'),
+  '1.5': token('6px'),
+};

packages/twenty-ui/design-tokens/table.ts

@@ -0,0 +1,7 @@
+import { token } from './token';
+
+export const TABLE_TOKENS = {
+  horizontalCellMargin: token('8px'),
+  checkboxColumnWidth: token('32px'),
+  horizontalCellPadding: token('8px'),
+};

packages/twenty-ui/design-tokens/tag.ts

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

packages/twenty-ui/design-tokens/text.ts

@@ -0,0 +1,13 @@
+import { token } from './token';
+
+export const TEXT_TOKENS = {
+  lineHeight: {
+    lg: token('1.5', { unit: 'number' }),
+    md: token('1.1', { unit: 'number' }),
+  },
+  iconSizeMedium: token('16', { unit: 'number' }),
+  iconSizeSmall: token('14', { unit: 'number' }),
+  iconStrikeLight: token('1.6', { unit: 'number' }),
+  iconStrikeMedium: token('2', { unit: 'number' }),
+  iconStrikeBold: token('2.5', { unit: 'number' }),
+};

packages/twenty-ui/design-tokens/themeCommonRootKeys.ts

@@ -0,0 +1,15 @@
+export const THEME_COMMON_ROOT_KEYS: readonly string[] = [
+  'icon',
+  'modal',
+  'text',
+  'tooltip',
+  'animation',
+  'spacingMultiplicator',
+  'spacing',
+  'betweenSiblingsGap',
+  'table',
+  'sidePanelWidth',
+  'clickableElementBackgroundTransition',
+  'lastLayerZIndex',
+  'buttons',
+];

packages/twenty-ui/design-tokens/themeCssFileNameByScheme.ts

@@ -0,0 +1,4 @@
+export const THEME_CSS_FILE_NAME_BY_SCHEME = {
+  light: 'theme-light.css',
+  dark: 'theme-dark.css',
+} as const;

packages/twenty-ui/design-tokens/token.ts

@@ -0,0 +1,9 @@
+import { type DesignTokenLeaf } from './types/DesignTokenLeaf';
+
+export const token = (
+  value: string | { light: string; dark: string },
+  options?: { unit?: 'number'; jsValue?: 'cssVariable' },
+): DesignTokenLeaf =>
+  typeof value === 'string'
+    ? { light: value, dark: value, ...options }
+    : { ...value, ...options };

packages/twenty-ui/design-tokens/tooltip.ts

@@ -0,0 +1,7 @@
+import { token } from './token';
+
+export const TOOLTIP_TOKENS = {
+  background: token('color(display-p3 0 0 0 / 0.72)'),
+  color: token('color(display-p3 1 1 1 / 1)'),
+  descriptionColor: token('color(display-p3 1 1 1 / 0.64)'),
+};

packages/twenty-ui/design-tokens/types/CollectedTokenLeaf.ts

@@ -0,0 +1,6 @@
+import { type DesignTokenLeaf } from './DesignTokenLeaf';
+
+export type CollectedTokenLeaf = DesignTokenLeaf & {
+  path: string[];
+  varName: string;
+};

packages/twenty-ui/design-tokens/types/DesignTokenLeaf.ts

@@ -0,0 +1,6 @@
+export type DesignTokenLeaf = {
+  light: string;
+  dark: string;
+  unit?: 'number';
+  jsValue?: 'cssVariable';
+};

packages/twenty-ui/design-tokens/types/DesignTokenNode.ts

@@ -0,0 +1,5 @@
+import { type DesignTokenLeaf } from './DesignTokenLeaf';
+
+export type DesignTokenNode = {
+  [key: string]: DesignTokenNode | DesignTokenLeaf;
+};

packages/twenty-ui/design-tokens/types/SerializableTree.ts

@@ -0,0 +1,3 @@
+export type SerializableTree = {
+  [key: string]: SerializableTree | string;
+};