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