Complete linaria migration (#18361)

## Summary

Completes the migration of the frontend styling system from **Emotion**
(`@emotion/styled`, `@emotion/react`) to **Linaria** (`@linaria/react`,
`@linaria/core`), a zero-runtime CSS-in-JS library where styles are
extracted at build time.

This is the final step of the migration — all ~494 files across
`twenty-front`, `twenty-ui`, `twenty-website`, and `twenty-sdk` are now
fully converted.

## Changes

### Styling Migration (across ~480 component files)
- Replaced all `@emotion/styled` imports with `@linaria/react`
- Converted runtime theme access patterns (`({ theme }) => theme.x.y`)
to build-time `themeCssVariables` CSS custom properties
- Replaced `useTheme()` hook (from Emotion) with
`useContext(ThemeContext)` where runtime theme values are still needed
(e.g., passing colors to non-CSS props like icon components)
- Removed `@emotion/react` `css` helper usages in favor of Linaria
template literals

### Dependency & Configuration Changes
- **Removed**: `@emotion/react`, `@emotion/styled` from root
`package.json`
- **Added**: `@wyw-in-js/babel-preset`, `next-with-linaria` (for
twenty-website SSR support)
- Updated Nx generator defaults from `@emotion/styled` to
`@linaria/react` in `nx.json`
- Simplified `vite.config.ts` (removed Emotion-specific configuration)
- Updated `twenty-website/next.config.js` to use `next-with-linaria` for
SSR Linaria support

### Storybook & Testing
- Removed `ThemeProvider` from Emotion in Storybook previews
(`twenty-front`, `twenty-sdk`)
- Now relies solely on `ThemeContextProvider` for theme injection

### Documentation
- Removed the temporary `docs/emotion-to-linaria-migration-plan.md`
(migration complete)
- Updated `CLAUDE.md` and `README.md` to reflect Linaria as the styling
stack
- Updated frontend style guide docs across all locales

## How it works

Linaria extracts styles at build time via the `@wyw-in-js/vite` plugin.
All expressions in `styled` template literals must be **statically
evaluable** — no runtime theme objects or closures over component state.

- **Static styles** use `themeCssVariables` which map to CSS custom
properties (`var(--theme-color-x)`)
- **Runtime theme access** (for non-CSS use cases like icon `color`
props) uses `useContext(ThemeContext)` instead of Emotion's `useTheme()`

packages/twenty-front/src/modules/settings/two-factor-authentication/components/TwoFactorAuthenticationVerificationCodeDash.tsx

@@ -1,16 +1,17 @@
-import styled from '@emotion/styled';
+import { styled } from '@linaria/react';
+import { themeCssVariables } from 'twenty-ui/theme-constants';
 
 const StyledDashContainer = styled.div`
   display: flex;
-  width: ${({ theme }) => theme.spacing(2)};
+  width: ${themeCssVariables.spacing[2]};
   justify-content: center;
   align-items: center;
 `;
 
 const StyledDash = styled.div`
-  background-color: ${({ theme }) => theme.font.color.light};
-  height: ${({ theme }) => theme.spacing(0.4)};
-  width: ${({ theme }) => theme.spacing(1.5)};
+  background-color: ${themeCssVariables.font.color.light};
+  height: 1.6px;
+  width: ${themeCssVariables.spacing['1.5']};
 `;
 
 export const TwoFactorAuthenticationVerificationCodeDash = () => {

packages/twenty-front/src/modules/settings/two-factor-authentication/components/TwoFactorAuthenticationVerificationCodeSlot.tsx

@@ -1,35 +1,34 @@
-import { css } from '@emotion/react';
-import styled from '@emotion/styled';
+import { styled } from '@linaria/react';
 import { type SlotProps } from 'input-otp';
+import { themeCssVariables } from 'twenty-ui/theme-constants';
 
 const StyledSlot = styled.div<{ isActive: boolean }>`
   position: relative;
   width: 24px;
   height: 32px;
-  font-size: ${({ theme }) => theme.font.size.md};
+  font-size: ${themeCssVariables.font.size.md};
   display: flex;
   align-items: center;
   justify-content: center;
   transition: all 0.3s;
-  background-color: ${({ theme }) => theme.background.transparent.lighter};
-  border: 1px solid ${({ theme }) => theme.border.color.medium};
-  border-radius: ${({ theme }) => theme.border.radius.sm};
+  background-color: ${themeCssVariables.background.transparent.lighter};
+  border: 1px solid ${themeCssVariables.border.color.medium};
+  border-radius: ${themeCssVariables.border.radius.sm};
 
   .group:hover &,
   .group:focus-within & {
-    border-color: ${({ theme }) => theme.border.color.medium};
+    border-color: ${themeCssVariables.border.color.medium};
   }
 
   outline: 0;
-  outline-color: ${({ theme }) => theme.border.color.medium};
+  outline-color: ${themeCssVariables.border.color.medium};
 
-  ${({ isActive, theme }) =>
-    isActive &&
-    css`
-      outline-width: 1px;
-      outline-style: solid;
-      outline-color: ${theme.border.color.strong};
-    `}
+  outline-color: ${({ isActive }) =>
+    isActive
+      ? themeCssVariables.border.color.strong
+      : themeCssVariables.border.color.medium};
+  outline-style: ${({ isActive }) => (isActive ? 'solid' : 'none')};
+  outline-width: ${({ isActive }) => (isActive ? '1px' : '0')};
 `;
 
 const StyledCaretContainer = styled.div`
@@ -63,7 +62,7 @@ const StyledInputChar = styled.div`
 const StyledCaret = styled.div`
   width: 1px;
   height: 20px;
-  background-color: ${({ theme }) => theme.font.color.primary};
+  background-color: ${themeCssVariables.font.color.primary};
 `;
 
 type TwoFactorAuthenticationVerificationCodeSlotProps = SlotProps;

packages/twenty-front/src/modules/settings/two-factor-authentication/components/TwoFactorAuthenticationVerificationForSettings.tsx

@@ -1,6 +1,7 @@
-import styled from '@emotion/styled';
+import { styled } from '@linaria/react';
 import { OTPInput } from 'input-otp';
 import { Controller, useFormContext } from 'react-hook-form';
+import { themeCssVariables } from 'twenty-ui/theme-constants';
 
 import { TwoFactorAuthenticationVerificationCodeDash } from '@/settings/two-factor-authentication/components/TwoFactorAuthenticationVerificationCodeDash';
 import { TwoFactorAuthenticationVerificationCodeSlot } from '@/settings/two-factor-authentication/components/TwoFactorAuthenticationVerificationCodeSlot';
@@ -12,8 +13,8 @@ type OTPFormValues = {
 
 const StyledOTPContainer = styled.div`
   display: flex;
-  gap: ${({ theme }) => theme.spacing(1)};
-  margin-bottom: ${({ theme }) => theme.spacing(8)};
+  gap: ${themeCssVariables.spacing[1]};
+  margin-bottom: ${themeCssVariables.spacing[8]};
 
   &:has(:disabled) {
     opacity: 0.3;