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/ui/layout/fullscreen/hooks/useFullScreenModal.tsx

@@ -4,9 +4,10 @@ import {
   Breadcrumb,
   type BreadcrumbProps,
 } from '@/ui/navigation/bread-crumb/components/Breadcrumb';
-import styled from '@emotion/styled';
+import { styled } from '@linaria/react';
 import { useRef } from 'react';
 import { createPortal } from 'react-dom';
+import { themeCssVariables } from 'twenty-ui/theme-constants';
 
 const StyledFullScreenOverlay = styled.div`
   position: fixed;
@@ -14,7 +15,7 @@ const StyledFullScreenOverlay = styled.div`
   left: 0;
   right: 0;
   bottom: 0;
-  background: ${({ theme }) => theme.background.noisy};
+  background: ${themeCssVariables.background.noisy};
   display: flex;
   flex-direction: column;
   width: 100%;
@@ -23,17 +24,17 @@ const StyledFullScreenOverlay = styled.div`
 `;
 
 const StyledFullScreenHeader = styled(PageHeader)`
-  padding-left: ${({ theme }) => theme.spacing(3)};
+  padding-left: ${themeCssVariables.spacing[3]};
 `;
 
 const StyledFullScreenContent = styled.div`
   display: flex;
   flex-direction: column;
-  gap: ${({ theme }) => theme.spacing(3)};
+  gap: ${themeCssVariables.spacing[3]};
   flex: 1;
   min-height: 0;
-  padding: ${({ theme }) =>
-    `0 ${theme.spacing(3)} ${theme.spacing(3)} ${theme.spacing(3)}`};
+  padding: 0 ${themeCssVariables.spacing[3]} ${themeCssVariables.spacing[3]}
+    ${themeCssVariables.spacing[3]};
 
   // Make the immediate child a flex column that grows, so nested components
   // with height="100%" (e.g., editors) can size correctly.
@@ -42,7 +43,7 @@ const StyledFullScreenContent = styled.div`
     flex-direction: column;
     flex: 1;
     min-height: 0;
-    row-gap: ${({ theme }) => theme.spacing(5)};
+    row-gap: ${themeCssVariables.spacing[5]};
   }
 `;