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/field/input/components/AddressInput.tsx

@@ -1,4 +1,4 @@
-import styled from '@emotion/styled';
+import { styled } from '@linaria/react';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 
 import { PlaceAutocompleteSelect } from '@/geo-map/components/PlaceAutocompleteSelect';

packages/twenty-front/src/modules/ui/field/input/components/BooleanInput.tsx

@@ -1,7 +1,8 @@
-import styled from '@emotion/styled';
+import { styled } from '@linaria/react';
 import { useEffect, useState } from 'react';
 
 import { BooleanDisplay } from '@/ui/field/display/components/BooleanDisplay';
+import { themeCssVariables } from 'twenty-ui/theme-constants';
 
 const StyledEditableBooleanFieldContainer = styled.div<{ readonly?: boolean }>`
   align-items: center;
@@ -11,8 +12,10 @@ const StyledEditableBooleanFieldContainer = styled.div<{ readonly?: boolean }>`
   height: 100%;
   width: 100%;
 
-  color: ${({ theme, readonly }) =>
-    readonly ? theme.font.color.tertiary : theme.font.color.primary};
+  color: ${({ readonly }) =>
+    readonly
+      ? themeCssVariables.font.color.tertiary
+      : themeCssVariables.font.color.primary};
 `;
 
 type BooleanInputProps = {

packages/twenty-front/src/modules/ui/field/input/components/CurrencyInput.tsx

@@ -1,6 +1,5 @@
-import { useTheme } from '@emotion/react';
-import styled from '@emotion/styled';
-import { useEffect, useRef, useState } from 'react';
+import { styled } from '@linaria/react';
+import { useContext, useEffect, useRef, useState } from 'react';
 
 import { useRegisterInputEvents } from '@/object-record/record-field/ui/meta-types/input/hooks/useRegisterInputEvents';
 import { CURRENCIES } from '@/settings/data-model/constants/Currencies';
@@ -8,13 +7,14 @@ import { CurrencyPickerDropdownButton } from '@/ui/input/components/internal/cur
 import { type Currency } from '@/ui/input/components/internal/types/Currency';
 import { IMaskInput } from 'react-imask';
 import { type IconComponent } from 'twenty-ui/display';
-import { TEXT_INPUT_STYLE } from 'twenty-ui/theme';
+import { TEXT_INPUT_STYLE, ThemeContext } from 'twenty-ui/theme';
+import { themeCssVariables } from 'twenty-ui/theme-constants';
 
 export const StyledIMaskInput = styled(IMaskInput)`
   margin: 0;
   ${TEXT_INPUT_STYLE}
   width: 100%;
-  padding: ${({ theme }) => `${theme.spacing(0)} ${theme.spacing(1.5)}`};
+  padding: ${themeCssVariables.spacing[0]} ${themeCssVariables.spacing[1.5]};
 `;
 
 const StyledContainer = styled.div`
@@ -29,10 +29,10 @@ const StyledIcon = styled.div`
   display: flex;
 
   & > svg {
-    padding-left: ${({ theme }) => theme.spacing(1)};
-    color: ${({ theme }) => theme.font.color.tertiary};
-    height: ${({ theme }) => theme.icon.size.md}px;
-    width: ${({ theme }) => theme.icon.size.md}px;
+    padding-left: ${themeCssVariables.spacing[1]};
+    color: ${themeCssVariables.font.color.tertiary};
+    height: ${themeCssVariables.icon.size.md}px;
+    width: ${themeCssVariables.icon.size.md}px;
   }
 `;
 
@@ -67,7 +67,7 @@ export const CurrencyInput = ({
   onSelect,
   decimals,
 }: CurrencyInputProps) => {
-  const theme = useTheme();
+  const { theme } = useContext(ThemeContext);
 
   const [internalText, setInternalText] = useState(value);
 

packages/twenty-front/src/modules/ui/field/input/components/DoubleTextInput.tsx

@@ -1,4 +1,4 @@
-import styled from '@emotion/styled';
+import { styled } from '@linaria/react';
 import {
   useEffect,
   useRef,
@@ -17,14 +17,15 @@ import { isDefined } from 'twenty-shared/utils';
 import { splitFullName } from '~/utils/format/spiltFullName';
 import { turnIntoEmptyStringIfWhitespacesOnly } from '~/utils/string/turnIntoEmptyStringIfWhitespacesOnly';
 import { StyledTextInput } from './TextInput';
+import { themeCssVariables } from 'twenty-ui/theme-constants';
 
 const StyledContainer = styled.div`
   display: flex;
   justify-content: space-between;
 
   & > input:last-child {
-    border-left: 1px solid ${({ theme }) => theme.border.color.strong};
-    padding-left: ${({ theme }) => theme.spacing(2)};
+    border-left: 1px solid ${themeCssVariables.border.color.strong};
+    padding-left: ${themeCssVariables.spacing[2]};
   }
 `;
 

packages/twenty-front/src/modules/ui/field/input/components/FieldInputContainer.tsx

@@ -1,4 +1,4 @@
-import styled from '@emotion/styled';
+import { styled } from '@linaria/react';
 
 // eslint-disable-next-line twenty/styled-components-prefixed-with-styled
 export const FieldInputContainer = styled.div`

packages/twenty-front/src/modules/ui/field/input/components/TextAreaInput.tsx

@@ -1,4 +1,4 @@
-import styled from '@emotion/styled';
+import { styled } from '@linaria/react';
 import { useEffect, useRef, useState, type ChangeEvent } from 'react';
 import TextareaAutosize from 'react-textarea-autosize';
 
@@ -7,6 +7,7 @@ import { useRegisterInputEvents } from '@/object-record/record-field/ui/meta-typ
 import { isDefined } from 'twenty-shared/utils';
 import { TEXT_INPUT_STYLE } from 'twenty-ui/theme';
 import { turnIntoEmptyStringIfWhitespacesOnly } from '~/utils/string/turnIntoEmptyStringIfWhitespacesOnly';
+import { themeCssVariables } from 'twenty-ui/theme-constants';
 
 export type TextAreaInputProps = {
   instanceId: string;
@@ -32,7 +33,7 @@ const StyledTextArea = styled(TextareaAutosize)`
   justify-content: center;
   resize: none;
   max-height: 400px;
-  width: calc(100% - ${({ theme }) => theme.spacing(7)});
+  width: calc(100% - ${themeCssVariables.spacing[7]});
 
   line-height: 18px;
 `;

packages/twenty-front/src/modules/ui/field/input/components/TextInput.tsx

@@ -1,9 +1,10 @@
-import styled from '@emotion/styled';
+import { styled } from '@linaria/react';
 import { useEffect, useRef, useState, type ChangeEvent } from 'react';
 
 import { LightCopyIconButton } from '@/object-record/record-field/ui/components/LightCopyIconButton';
 import { useRegisterInputEvents } from '@/object-record/record-field/ui/meta-types/input/hooks/useRegisterInputEvents';
 import { TEXT_INPUT_STYLE } from 'twenty-ui/theme';
+import { themeCssVariables } from 'twenty-ui/theme-constants';
 
 export const StyledTextInput = styled.input`
   margin: 0;
@@ -11,7 +12,7 @@ export const StyledTextInput = styled.input`
   width: 100%;
 
   &:disabled {
-    color: ${({ theme }) => theme.font.color.tertiary};
+    color: ${themeCssVariables.font.color.tertiary};
   }
 `;