chore(twenty-front): migrate command-menu, workflow, page-layout and UI modules from Emotion to Linaria (PR 4-6/10) (#18342)

## Summary

Continues the Emotion → Linaria migration (PR 4-6 from the [migration
plan](docs/emotion-to-linaria-migration-plan.md)). Migrates **311
files** across four module groups:

| Module | Files |
|---|---|
| command-menu | 53 |
| workflow | 84 |
| page-layout | 84 |
| UI (partial - first ~80 files) | ~80 |
| twenty-ui (TEXT_INPUT_STYLE) | 1 |
| misc (hooks, keyboard-shortcut-menu, file-upload) | ~9 |

### Migration patterns applied

- `import styled from '@emotion/styled'` → `import { styled } from
'@linaria/react'`
- `import { useTheme } from '@emotion/react'` → `import { useContext }
from 'react'` + `import { ThemeContext } from 'twenty-ui/theme'`
- `${({ theme }) => theme.X.Y.Z}` → `${themeCssVariables.X.Y.Z}` (static
CSS variables)
- `theme.spacing(N)` → `themeCssVariables.spacing[N]`
- `styled(motion.div)` → `motion.create(StyledBase)` (11 components)
- `styled(Component)<TypeParams>` → wrapper div approach for non-HTML
elements
- Multi-declaration interpolations split into one CSS property per
interpolation
- Interpolation return types fixed (`&&` → ternary `? : ''`)
- `TEXT_INPUT_STYLE` converted from function to static string constant
(backward compatible)
- Emotion `<Global>` replaced with `useEffect` style injection
- Complex runtime-dependent styles use CSS custom properties via
`style={}` prop

### After this PR

- **Remaining files**: ~400 (object-record: ~160, settings: ~200, UI:
~44)
- **No breaking changes**: CSS variables resolve identically to the
previous Emotion theme values

packages/twenty-front/src/modules/workflow/components/WorkflowStepExecutionResult.tsx

@@ -1,6 +1,5 @@
 import { LightCopyIconButton } from '@/object-record/record-field/ui/components/LightCopyIconButton';
-import { useTheme } from '@emotion/react';
-import styled from '@emotion/styled';
+import { styled } from '@linaria/react';
 import { t } from '@lingui/core/macro';
 import {
   IconLoader,
@@ -9,6 +8,9 @@ import {
 } from 'twenty-ui/display';
 import { CodeEditor, CoreEditorHeader } from 'twenty-ui/input';
 import { AnimatedCircleLoading } from 'twenty-ui/utilities';
+import { themeCssVariables } from 'twenty-ui/theme-constants';
+import { useContext } from 'react';
+import { ThemeContext } from 'twenty-ui/theme';
 
 const StyledContainer = styled.div`
   display: flex;
@@ -28,26 +30,26 @@ type OutputAccent = 'default' | 'success' | 'error';
 
 const StyledInfoContainer = styled.div`
   display: flex;
-  font-size: ${({ theme }) => theme.font.size.md};
+  font-size: ${themeCssVariables.font.size.md};
 `;
 
 const StyledOutput = styled.div<{ accent?: OutputAccent }>`
   align-items: center;
-  gap: ${({ theme }) => theme.spacing(1)};
-  color: ${({ theme, accent }) =>
+  gap: ${themeCssVariables.spacing[1]};
+  color: ${({ accent }) =>
     accent === 'success'
-      ? theme.color.turquoise
+      ? themeCssVariables.color.turquoise
       : accent === 'error'
-        ? theme.color.red
-        : theme.font.color.secondary};
+        ? themeCssVariables.color.red
+        : themeCssVariables.font.color.secondary};
   display: flex;
 `;
 
 const StyledStatusInfo = styled.div`
   display: flex;
-  gap: ${({ theme }) => theme.spacing(2)};
-  font-size: ${({ theme }) => theme.font.size.sm};
-  color: ${({ theme }) => theme.font.color.tertiary};
+  gap: ${themeCssVariables.spacing[2]};
+  font-size: ${themeCssVariables.font.size.sm};
+  color: ${themeCssVariables.font.color.tertiary};
 `;
 
 export type ExecutionStatus = {
@@ -77,7 +79,7 @@ export const WorkflowStepExecutionResult = ({
   loadingMessage = t`Processing...`,
   idleMessage = t`Output`,
 }: WorkflowStepExecutionResultProps) => {
-  const theme = useTheme();
+  const { theme } = useContext(ThemeContext);
 
   const SuccessLeftNode = (
     <StyledOutput accent="success">