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/object-record/record-field/ui/form-types/components/FormNumberFieldInput.tsx

@@ -8,17 +8,21 @@ import { TextInput } from '@/ui/field/input/components/TextInput';
 import { InputHint } from '@/ui/input/components/InputHint';
 import { InputLabel } from '@/ui/input/components/InputLabel';
 import { isStandaloneVariableString } from '@/workflow/utils/isStandaloneVariableString';
-import styled from '@emotion/styled';
 import isEmpty from 'lodash.isempty';
 import { useId, useState } from 'react';
 import { isDefined } from 'twenty-shared/utils';
+import { themeCssVariables } from 'twenty-ui/theme-constants';
 import {
   canBeCastAsNumberOrNull,
   castAsNumberOrNull,
 } from '~/utils/cast-as-number-or-null';
 
-const StyledInput = styled(TextInput)`
-  padding: ${({ theme }) => `${theme.spacing(1)} ${theme.spacing(2)}`};
+import { styled } from '@linaria/react';
+
+const StyledInputWrapper = styled.div`
+  & input {
+    padding: ${themeCssVariables.spacing[1]} ${themeCssVariables.spacing[2]};
+  }
 `;
 
 type FormNumberFieldInputProps = {
@@ -113,18 +117,20 @@ export const FormNumberFieldInput = ({
           onBlur={onBlur}
         >
           {draftValue.type === 'static' ? (
-            <StyledInput
-              instanceId={instanceId}
-              placeholder={
-                isDefined(placeholder) && !isEmpty(placeholder)
-                  ? placeholder
-                  : t`Enter a number`
-              }
-              value={draftValue.value}
-              copyButton={false}
-              onChange={handleChange}
-              disabled={readonly}
-            />
+            <StyledInputWrapper>
+              <TextInput
+                instanceId={instanceId}
+                placeholder={
+                  isDefined(placeholder) && !isEmpty(placeholder)
+                    ? placeholder
+                    : t`Enter a number`
+                }
+                value={draftValue.value}
+                copyButton={false}
+                onChange={handleChange}
+                disabled={readonly}
+              />
+            </StyledInputWrapper>
           ) : (
             <VariableChipStandalone
               rawVariableName={draftValue.value}

packages/twenty-front/src/modules/object-record/record-field/ui/form-types/components/FormRawJsonFieldInput.tsx

@@ -20,6 +20,7 @@ type FormRawJsonFieldInputProps = {
   readonly?: boolean;
   VariablePicker?: VariablePickerComponent;
   placeholder?: string;
+  className?: string;
 };
 
 export const FormRawJsonFieldInput = ({
@@ -31,6 +32,7 @@ export const FormRawJsonFieldInput = ({
   onBlur,
   readonly,
   VariablePicker,
+  className,
 }: FormRawJsonFieldInputProps) => {
   const instanceId = useId();
 
@@ -67,7 +69,7 @@ export const FormRawJsonFieldInput = ({
   }
 
   return (
-    <FormFieldInputContainer>
+    <FormFieldInputContainer className={className}>
       {label ? <InputLabel>{label}</InputLabel> : null}
 
       <FormFieldInputRowContainer multiline>

packages/twenty-front/src/modules/object-record/record-field/ui/form-types/components/FormUuidFieldInput.tsx

@@ -7,12 +7,15 @@ import { type VariablePickerComponent } from '@/object-record/record-field/ui/fo
 import { TextInput } from '@/ui/field/input/components/TextInput';
 import { InputLabel } from '@/ui/input/components/InputLabel';
 import { isStandaloneVariableString } from '@/workflow/utils/isStandaloneVariableString';
-import styled from '@emotion/styled';
+import { styled } from '@linaria/react';
 import { useId, useState } from 'react';
 import { isDefined } from 'twenty-shared/utils';
+import { themeCssVariables } from 'twenty-ui/theme-constants';
 
-const StyledInput = styled(TextInput)`
-  padding: ${({ theme }) => `${theme.spacing(1)} ${theme.spacing(2)}`};
+const StyledInputWrapper = styled.div`
+  & input {
+    padding: ${themeCssVariables.spacing[1]} ${themeCssVariables.spacing[2]};
+  }
 `;
 
 type FormUuidFieldInputProps = {
@@ -100,14 +103,16 @@ export const FormUuidFieldInput = ({
           hasRightElement={isDefined(VariablePicker) && !readonly}
         >
           {draftValue.type === 'static' ? (
-            <StyledInput
-              instanceId={instanceId}
-              placeholder={placeholder ?? t`Enter a UUID`}
-              value={draftValue.value}
-              copyButton={false}
-              disabled={readonly}
-              onChange={handleChange}
-            />
+            <StyledInputWrapper>
+              <TextInput
+                instanceId={instanceId}
+                placeholder={placeholder ?? t`Enter a UUID`}
+                value={draftValue.value}
+                copyButton={false}
+                disabled={readonly}
+                onChange={handleChange}
+              />
+            </StyledInputWrapper>
           ) : (
             <VariableChipStandalone
               rawVariableName={draftValue.value}