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/page-layout/components/PageLayoutGridOverlay.tsx

@@ -9,41 +9,44 @@ import { calculateTotalGridRows } from '@/page-layout/utils/calculateTotalGridRo
 import { generateCellId } from '@/page-layout/utils/generateCellId';
 import { activeTabIdComponentState } from '@/ui/layout/tab-list/states/activeTabIdComponentState';
 import { useAtomComponentStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomComponentStateValue';
-import styled from '@emotion/styled';
+import { styled } from '@linaria/react';
 import { useMemo } from 'react';
+import { themeCssVariables } from 'twenty-ui/theme-constants';
 
 const StyledGridOverlay = styled.div<{
   isDragSelecting?: boolean;
   breakpoint: PageLayoutBreakpoint;
 }>`
   position: absolute;
-  top: ${({ theme }) => theme.spacing(2)};
-  left: ${({ theme }) => theme.spacing(2)};
-  right: ${({ theme }) => theme.spacing(2)};
-  bottom: ${({ theme }) => theme.spacing(2)};
+  top: ${themeCssVariables.spacing[2]};
+  left: ${themeCssVariables.spacing[2]};
+  right: ${themeCssVariables.spacing[2]};
+  bottom: ${themeCssVariables.spacing[2]};
   display: grid;
   grid-template-columns: ${({ breakpoint }) =>
     breakpoint === 'mobile' ? '1fr' : 'repeat(12, 1fr)'};
   grid-auto-rows: 55px;
-  gap: ${({ theme }) => theme.spacing(2)};
+  gap: ${themeCssVariables.spacing[2]};
   pointer-events: ${({ isDragSelecting }) =>
     isDragSelecting ? 'auto' : 'none'};
   z-index: ${PAGE_LAYOUT_GRID_OVERLAY_Z_INDEX};
 `;
 
 const StyledGridCell = styled.div<{ isSelected?: boolean }>`
-  background: ${({ isSelected, theme }) =>
-    isSelected ? theme.color.blue3 : 'transparent'};
+  background: ${({ isSelected }) =>
+    isSelected ? themeCssVariables.color.blue3 : 'transparent'};
   border: 1px solid
-    ${({ theme, isSelected }) =>
-      isSelected ? theme.color.blue7 : theme.border.color.light};
-  border-radius: ${({ theme }) => theme.border.radius.md};
+    ${({ isSelected }) =>
+      isSelected
+        ? themeCssVariables.color.blue7
+        : themeCssVariables.border.color.light};
+  border-radius: ${themeCssVariables.border.radius.md};
   cursor: pointer;
   transition: background-color 0.3s ease;
 
   &:hover {
-    background: ${({ theme }) => theme.background.transparent.lighter};
-    border-color: ${({ theme }) => theme.border.color.medium};
+    background: ${themeCssVariables.background.transparent.lighter};
+    border-color: ${themeCssVariables.border.color.medium};
   }
 `;