chore(twenty-front): migrate small modules from Emotion to Linaria (PR 1/10) (#18314)

## Emotion → Linaria migration — PR 1 of 10

First batch of the `twenty-front` migration from Emotion (runtime
CSS-in-JS) to Linaria (zero-runtime, build-time extraction via
wyw-in-js). Covers **100 files** across 10 small standalone modules —
chosen as the lowest-risk starting point.

### Modules migrated

spreadsheet-import (28) · navigation-menu-item (17) · views (14) ·
billing (10) · blocknote-editor (7) · advanced-text-editor (7) ·
favorites (7) · navigation (4) · information-banner (3) ·
sign-in-background-mock (3)

### Migration pattern

Every file follows the same mechanical transformation:

| Emotion | Linaria |
|---|---|
| `import styled from '@emotion/styled'` | `import { styled } from
'@linaria/react'` |
| `${({ theme }) => theme.font.color.primary}` |
`${themeCssVariables.font.color.primary}` |
| `${({ theme }) => theme.spacing(4)}` |
`${themeCssVariables.spacing[4]}` |
| `const theme = useTheme()` | `const { theme } =
useContext(ThemeContext)` |
| `import { type Theme } from '@emotion/react'` | `import { type
ThemeType } from 'twenty-ui/theme'` |

`themeCssVariables` is a build-time object where every leaf is a
`var(--t-xxx)` CSS custom property reference, evaluated statically by
wyw-in-js. Runtime theme access (icon sizes, colors passed as props)
uses `useContext(ThemeContext)`.

### Gotchas encountered & fixed

- **Interpolation return types** — wyw-in-js requires `string | number`,
never `false`/`undefined`. Replaced `condition && 'css'` with `condition
? 'css' : ''`.
- **`css` tag inside `styled` templates** — Linaria `css` returns a
class name, not CSS text. Replaced with plain template strings.
- **`styled(Component)` needs `className`** — added `className` prop to
`NavigationDrawerSection`, `DropdownMenuItemsContainer`, and `Heading`.
- **`shouldForwardProp` not supported** — Linaria filters invalid DOM
props automatically for HTML elements. For custom components, used
wrapper divs where needed.
- **`FormFieldPlaceholderStyles`** — converted from Emotion `css`
function to a static string using `themeCssVariables`.

packages/twenty-front/src/modules/spreadsheet-import/components/SpreadsheetImportTable.tsx

@@ -1,31 +1,31 @@
-import { useTheme } from '@emotion/react';
-import styled from '@emotion/styled';
+import { styled } from '@linaria/react';
+import { useContext } from 'react';
 // @ts-expect-error  // Todo: remove usage of react-data-grid
 import DataGrid, { type DataGridProps } from 'react-data-grid';
+import { ThemeContext } from 'twenty-ui/theme';
+import { themeCssVariables } from 'twenty-ui/theme-constants';
 
 import { useSpreadsheetImportInternal } from '@/spreadsheet-import/hooks/useSpreadsheetImportInternal';
 
 const StyledDataGrid = styled(DataGrid)`
-  --rdg-background-color: ${({ theme }) => theme.background.primary};
-  --rdg-border-color: ${({ theme }) => theme.border.color.medium};
-  --rdg-color: ${({ theme }) => theme.font.color.primary};
-  --rdg-error-cell-background-color: ${({ theme }) =>
-    theme.color.transparent.red5};
-  --rdg-font-size: ${({ theme }) => theme.font.size.sm};
+  --rdg-background-color: ${themeCssVariables.background.primary};
+  --rdg-border-color: ${themeCssVariables.border.color.medium};
+  --rdg-color: ${themeCssVariables.font.color.primary};
+  --rdg-error-cell-background-color: ${themeCssVariables.color.transparent
+    .red5};
+  --rdg-font-size: ${themeCssVariables.font.size.sm};
   --rdg-frozen-cell-box-shadow: none;
-  --rdg-header-background-color: ${({ theme }) => theme.background.primary};
-  --rdg-info-cell-background-color: ${({ theme }) => theme.color.blue};
-  --rdg-row-hover-background-color: ${({ theme }) =>
-    theme.background.secondary};
-  --rdg-row-selected-background-color: ${({ theme }) =>
-    theme.background.primary};
-  --rdg-row-selected-hover-background-color: ${({ theme }) =>
-    theme.background.secondary};
-  --rdg-selection-color: ${({ theme }) => theme.color.blue};
-  --rdg-summary-border-color: ${({ theme }) => theme.border.color.medium};
-  --rdg-warning-cell-background-color: ${({ theme }) => theme.color.orange};
-  --row-selected-hover-background-color: ${({ theme }) =>
-    theme.background.secondary};
+  --rdg-header-background-color: ${themeCssVariables.background.primary};
+  --rdg-info-cell-background-color: ${themeCssVariables.color.blue};
+  --rdg-row-hover-background-color: ${themeCssVariables.background.secondary};
+  --rdg-row-selected-background-color: ${themeCssVariables.background.primary};
+  --rdg-row-selected-hover-background-color: ${themeCssVariables.background
+    .secondary};
+  --rdg-selection-color: ${themeCssVariables.color.blue};
+  --rdg-summary-border-color: ${themeCssVariables.border.color.medium};
+  --rdg-warning-cell-background-color: ${themeCssVariables.color.orange};
+  --row-selected-hover-background-color: ${themeCssVariables.background
+    .secondary};
 
   border: none;
   block-size: 100%;
@@ -33,22 +33,21 @@ const StyledDataGrid = styled(DataGrid)`
 
   .rdg-header-row .rdg-cell {
     box-shadow: none;
-    color: ${({ theme }) => theme.font.color.tertiary};
-    background-color: ${({ theme }) => theme.background.secondary};
-    font-size: ${({ theme }) => theme.font.size.sm};
-    font-weight: ${({ theme }) => theme.font.weight.semiBold};
+    color: ${themeCssVariables.font.color.tertiary};
+    background-color: ${themeCssVariables.background.secondary};
+    font-size: ${themeCssVariables.font.size.sm};
+    font-weight: ${themeCssVariables.font.weight.semiBold};
     letter-spacing: wider;
-    ${({ headerRowHeight }) => {
-      if (headerRowHeight === 0) {
-        return `
+    ${({ headerRowHeight }) =>
+      headerRowHeight === 0
+        ? `
           border: none;
-        `;
-      }
-    }};
+        `
+        : ''};
   }
 
   .rdg-cell {
-    border-bottom: 1px solid ${({ theme }) => theme.border.color.medium};
+    border-bottom: 1px solid ${themeCssVariables.border.color.medium};
     border-inline-end: none;
     border-right: none;
     box-shadow: none;
@@ -66,15 +65,15 @@ const StyledDataGrid = styled(DataGrid)`
   }
 
   .rdg-cell-error {
-    background-color: ${({ theme }) => theme.color.yellow3};
+    background-color: ${themeCssVariables.color.yellow3};
   }
 
   .rdg-cell-warning {
-    background-color: ${({ theme }) => theme.color.transparent.orange2};
+    background-color: ${themeCssVariables.color.transparent.orange2};
   }
 
   .rdg-cell-info {
-    background-color: ${({ theme }) => theme.color.transparent.blue2};
+    background-color: ${themeCssVariables.color.transparent.blue2};
   }
 
   .rdg-static {
@@ -136,7 +135,7 @@ export const SpreadsheetImportTable = <Data,>({
   selectedRows,
 }: SpreadsheetImportTableProps<Data>) => {
   const { rtl } = useSpreadsheetImportInternal();
-  const theme = useTheme();
+  const { theme } = useContext(ThemeContext);
   const themeClassName = theme.name === 'dark' ? 'rdg-dark' : 'rdg-light';
 
   if (!rows?.length || !columns?.length) return null;