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

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)}}`;
+};