Migrate twenty ui to linaria (#18307)

## Migrate twenty-ui from Emotion to Linaria

Completes the migration of all `twenty-ui` components from Emotion
(runtime CSS-in-JS) to Linaria (zero-runtime, CSS extracted at build
time).

- Replaced `@emotion/styled` with `@linaria/react` across ~170 files
- Removed all Emotion dependencies from `twenty-ui`
- Introduced a CSS custom properties-based theme system:
`themeCssVariables` where every leaf is a `var(--t-xxx)` reference,
injected onto `document.documentElement` by
`ThemeCssVariableInjectorEffect`
- No more `theme` prop threading — styled components reference
`themeCssVariables.x.y` directly at build time
- Updated `twenty-front` consumers to remove `theme={theme}` prop
passing

**Before / After:**
```tsx
// Emotion
color: ${({ theme }) => theme.font.color.primary};
padding: ${({ theme }) => theme.spacing(4)};

// Linaria
color: ${themeCssVariables.font.color.primary};
padding: ${themeCssVariables.spacing[4]};
```

### Theme architecture

Two build-time utilities produce the theme system:

- **`buildThemeReferencingRootCssVariables`** — walks the theme object
and builds a nested mirror where every leaf is a `var(--t-xxx)` string
(evaluated at build time by wyw-in-js)
- **`prepareThemeForRootCssVariableInjection`** — walks the runtime
theme and collects flat `[--css-variable-name, value]` pairs, injected
onto `document.documentElement` by `ThemeCssVariableInjectorEffect`

Both share naming conventions (`camelToKebab`, `SPACING_VALUES`,
`formatSpacingKey`) and are unit tested.

### Spacing cleanup

Spacing scale now uses integers 0–32 (generated via loop), with `0.5`
and `1.5` as the only fractional exceptions. All other fractional
spacing usages (`0.25`, `0.75`, `1.25`, `2.5`, `3.5`) were replaced with
literal pixel values across ~20 twenty-front files.

### Framer Motion integration

Linaria doesn't support `styled(motion.div)` — wrapping a motion element
with `styled()` causes the component body to be stripped at build time.
Instead, we define the styled component first, then wrap it with
`motion.create()`:

```tsx
const StyledBarBase = styled.div`
  background-color: ${themeCssVariables.font.color.primary};
  height: 100%;
`;

const StyledBar = motion.create(StyledBarBase);
```

### Block interpolations

Linaria doesn't support interpolations that return multiple CSS
declarations (Linaria wraps the entire block in a single `var()`,
producing invalid CSS). These were split into individual property
interpolations:

```tsx
// Emotion — single interpolation returning multiple declarations
border-left: ${({ divider, theme }) => {
  const border = `1px solid ${theme.border.color.light}`;
  return divider ? `border-${divider}: ${border}` : '';
}}

// Linaria — one interpolation per property
border-left: ${({ divider }) =>
  divider === 'left' ? `1px solid ${themeCssVariables.border.color.light}` : 'none'};
border-right: ${({ divider }) =>
  divider === 'right' ? `1px solid ${themeCssVariables.border.color.light}` : 'none'};
```

### Dynamic styles via CSS variables

When a component needs to compute styles from multiple props with
complex branching logic (e.g. `Button` combining `variant`, `accent`,
`inverted`, `disabled`, `focus`, `position`), Linaria's prop
interpolations become unwieldy. In those cases we use a
`computeDynamicStyles` function that returns a `CSSProperties` object
injected via `style={}`, referenced from the static CSS with `var()`:

```tsx
const StyledButton = styled.button`
  background: var(--btn-bg);
  border-color: var(--btn-border-color);
  &:hover { background: var(--btn-hover-bg); }
`;

const dynamicStyles = useMemo(() => {
  const s = computeButtonDynamicStyles(variant, accent, ...);
  return { '--btn-bg': s.background, '--btn-hover-bg': s.hoverBackground } as CSSProperties;
}, [variant, accent, ...]);

return <StyledButton style={dynamicStyles} />;
```

### CSS var + unit concatenation

CSS custom properties can't be concatenated with unit suffixes directly
(`var(--x)px` is invalid). Values that need units use `calc()`:

```tsx
// Broken
transition: background ${themeCssVariables.animation.duration.instant}s ease;

// Fixed
transition: background calc(${themeCssVariables.animation.duration.instant} * 1s) ease;
```

packages/twenty-front/src/modules/ui/field/display/components/BooleanDisplay.tsx

@@ -3,11 +3,10 @@ import { t } from '@lingui/core/macro';
 import { IconCheck, IconX } from 'twenty-ui/display';
 import { THEME_COMMON } from 'twenty-ui/theme';
 
-const spacing = THEME_COMMON.spacingMultiplicator * 1;
 const iconSizeSm = THEME_COMMON.icon.size.sm;
 
 const StyledBooleanFieldValue = styled.div`
-  margin-left: ${spacing}px;
+  margin-left: 4px;
 `;
 
 type BooleanDisplayProps = {

packages/twenty-front/src/modules/ui/field/display/components/EmailsDisplay.tsx

@@ -5,7 +5,6 @@ import { ExpandableList } from '@/ui/layout/expandable-list/components/Expandabl
 import { styled } from '@linaria/react';
 import { isDefined } from 'twenty-shared/utils';
 import { RoundedLink } from 'twenty-ui/navigation';
-import { THEME_COMMON } from 'twenty-ui/theme';
 
 type EmailsDisplayProps = {
   value?: FieldEmailsValue;
@@ -13,12 +12,10 @@ type EmailsDisplayProps = {
   onEmailClick?: (email: string, event: React.MouseEvent<HTMLElement>) => void;
 };
 
-const themeSpacing = THEME_COMMON.spacingMultiplicator;
-
 const StyledContainer = styled.div`
   align-items: center;
   display: flex;
-  gap: ${themeSpacing * 1}px;
+  gap: 4px;
   justify-content: flex-start;
 
   max-width: 100%;

packages/twenty-front/src/modules/ui/field/display/components/MultiSelectDisplay.tsx

@@ -2,14 +2,11 @@ import { type FieldMultiSelectValue } from '@/object-record/record-field/ui/type
 import { styled } from '@linaria/react';
 import { Tag } from 'twenty-ui/components';
 import { type SelectOption } from 'twenty-ui/input';
-import { THEME_COMMON } from 'twenty-ui/theme';
-
-const spacing1 = THEME_COMMON.spacing(1);
 
 const StyledContainer = styled.div`
   align-items: center;
   display: flex;
-  gap: ${spacing1};
+  gap: 4px;
   justify-content: flex-start;
 
   max-width: 100%;

packages/twenty-front/src/modules/ui/field/display/components/PhonesDisplay.tsx

@@ -8,7 +8,6 @@ import { styled } from '@linaria/react';
 import { parsePhoneNumber } from 'libphonenumber-js';
 import { isDefined } from 'twenty-shared/utils';
 import { RoundedLink } from 'twenty-ui/navigation';
-import { THEME_COMMON } from 'twenty-ui/theme';
 import { logError } from '~/utils/logError';
 
 type PhonesDisplayProps = {
@@ -20,12 +19,10 @@ type PhonesDisplayProps = {
   ) => void;
 };
 
-const themeSpacing = THEME_COMMON.spacingMultiplicator;
-
 const StyledContainer = styled.div`
   align-items: center;
   display: flex;
-  gap: ${themeSpacing * 1}px;
+  gap: 4px;
   justify-content: flex-start;
 
   max-width: 100%;

packages/twenty-front/src/modules/ui/input/components/InputErrorHelper.tsx

@@ -5,7 +5,7 @@ const StyledInputErrorHelper = styled.div`
   color: ${({ theme }) => theme.color.red};
   font-size: ${({ theme }) => theme.font.size.xs};
   position: absolute;
-  margin-top: ${({ theme }) => theme.spacing(0.25)};
+  margin-top: 1px;
 `;
 
 export const InputErrorHelper = ({

packages/twenty-front/src/modules/ui/input/components/TextInput.tsx

@@ -409,7 +409,7 @@ const StyledAutogrowWrapper = styled(AutogrowWrapper)<{
         : sizeVariant === 'md'
           ? '28px'
           : '32px'};
-  padding: 0 ${({ theme }) => theme.spacing(1.25)};
+  padding: 0 5px;
 `;
 
 const TextInputWithAutoGrowWrapper = forwardRef<