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

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