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/workflow/workflow-diagram/workflow-edges/components/WorkflowDiagramEdgeButtonGroup.tsx

@@ -1,18 +1,14 @@
-import { getWorkflowDiagramColors } from '@/workflow/workflow-diagram/utils/getWorkflowDiagramColors';
-import { css } from '@linaria/core';
 import { styled } from '@linaria/react';
-import { useContext, useMemo, type CSSProperties } from 'react';
 import { IconButtonGroup, type IconButtonGroupProps } from 'twenty-ui/input';
-import { ThemeContext } from 'twenty-ui/theme';
+import { themeCssVariables } from 'twenty-ui/theme-constants';
 
-const iconButtonGroupStyle = css`
-  background-color: var(--edge-btn-bg, transparent);
-  border: var(--edge-btn-border, none);
+const StyledIconButtonGroup = styled(IconButtonGroup)`
   pointer-events: all;
 `;
 
-const StyledWrapper = styled.div`
-  display: contents;
+const StyledSelectedIconButtonGroup = styled(StyledIconButtonGroup)`
+  background-color: ${themeCssVariables.color.blue2};
+  border-color: ${themeCssVariables.color.blue};
 `;
 
 type WorkflowDiagramEdgeButtonGroupProps = IconButtonGroupProps & {
@@ -23,24 +19,9 @@ export const WorkflowDiagramEdgeButtonGroup = ({
   selected = false,
   iconButtons,
 }: WorkflowDiagramEdgeButtonGroupProps) => {
-  const { theme } = useContext(ThemeContext);
+  const ButtonGroup = selected
+    ? StyledSelectedIconButtonGroup
+    : StyledIconButtonGroup;
 
-  const dynamicStyles = useMemo(() => {
-    if (!selected) return {};
-    const colors = getWorkflowDiagramColors({ theme });
-    return {
-      '--edge-btn-bg': colors.selected.background,
-      // eslint-disable-next-line lingui/no-unlocalized-strings
-      '--edge-btn-border': `1px solid ${colors.selected.borderColor}`,
-    } as CSSProperties;
-  }, [selected, theme]);
-
-  return (
-    <StyledWrapper style={dynamicStyles}>
-      <IconButtonGroup
-        className={`nodrag nopan ${iconButtonGroupStyle}`}
-        iconButtons={iconButtons}
-      />
-    </StyledWrapper>
-  );
+  return <ButtonGroup className="nodrag nopan" iconButtons={iconButtons} />;
 };