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/blocknote-editor/components/BlockEditor.tsx

@@ -1,9 +1,10 @@
 import { filterSuggestionItems } from '@blocknote/core/extensions';
 import { BlockNoteView } from '@blocknote/mantine';
 import { SuggestionMenuController } from '@blocknote/react';
-import { useTheme } from '@emotion/react';
-import styled from '@emotion/styled';
-import { type ClipboardEvent } from 'react';
+import { styled } from '@linaria/react';
+import { type ClipboardEvent, useContext } from 'react';
+import { ThemeContext } from 'twenty-ui/theme';
+import { themeCssVariables } from 'twenty-ui/theme-constants';
 
 import { type BLOCK_SCHEMA } from '@/blocknote-editor/blocks/Schema';
 import { getSlashMenu } from '@/blocknote-editor/utils/getSlashMenu';
@@ -31,11 +32,11 @@ const StyledEditor = styled.div`
   & .editor {
     background: transparent;
     font-size: 13px;
-    color: ${({ theme }) => theme.font.color.primary};
+    color: ${themeCssVariables.font.color.primary};
     min-height: 400px;
   }
   & .editor [class^='_inlineContent']:before {
-    color: ${({ theme }) => theme.font.color.tertiary};
+    color: ${themeCssVariables.font.color.tertiary};
     font-style: normal !important;
   }
   & .editor .bn-inline-content:has(> .ProseMirror-trailingBreak):before {
@@ -55,8 +56,8 @@ const StyledEditor = styled.div`
     align-items: center;
   }
   & .bn-drag-handle-menu {
-    background: ${({ theme }) => theme.background.transparent.secondary};
-    backdrop-filter: ${({ theme }) => theme.blur.medium};
+    background: ${themeCssVariables.background.transparent.secondary};
+    backdrop-filter: ${themeCssVariables.blur.medium};
     box-shadow:
       0px 2px 4px rgba(0, 0, 0, 0.04),
       2px 4px 16px rgba(0, 0, 0, 0.12);
@@ -64,7 +65,7 @@ const StyledEditor = styled.div`
     min-height: 96px;
     padding: 4px;
     border-radius: 8px;
-    border: 1px solid ${({ theme }) => theme.border.color.medium};
+    border: 1px solid ${themeCssVariables.border.color.medium};
     left: 26px;
   }
 
@@ -83,9 +84,9 @@ const StyledEditor = styled.div`
   & .bn-suggestion-menu {
     padding: 4px;
     border-radius: 8px;
-    border: 1px solid ${({ theme }) => theme.border.color.medium};
-    background: ${({ theme }) => theme.background.transparent.secondary};
-    backdrop-filter: ${({ theme }) => theme.blur.medium};
+    border: 1px solid ${themeCssVariables.border.color.medium};
+    background: ${themeCssVariables.background.transparent.secondary};
+    backdrop-filter: ${themeCssVariables.blur.medium};
   }
 
   & .mantine-Menu-item {
@@ -94,17 +95,17 @@ const StyledEditor = styled.div`
     min-height: 32px;
 
     font-style: normal;
-    font-family: ${({ theme }) => theme.font.family};
-    font-weight: ${({ theme }) => theme.font.weight.regular};
-    color: ${({ theme }) => theme.font.color.secondary};
+    font-family: ${themeCssVariables.font.family};
+    font-weight: ${themeCssVariables.font.weight.regular};
+    color: ${themeCssVariables.font.color.secondary};
   }
   & .mantine-ActionIcon-root:hover {
     box-shadow:
       0px 0px 4px rgba(0, 0, 0, 0.08),
       0px 2px 4px rgba(0, 0, 0, 0.04);
-    background: ${({ theme }) => theme.background.transparent.primary};
+    background: ${themeCssVariables.background.transparent.primary};
     backdrop-filter: blur(20px);
-    border: 1px solid ${({ theme }) => theme.border.color.light};
+    border: 1px solid ${themeCssVariables.border.color.light};
   }
   & .bn-side-menu .mantine-UnstyledButton-root:not(.mantine-Menu-item) svg {
     height: 16px;
@@ -119,17 +120,17 @@ const StyledEditor = styled.div`
   }
 
   & .bn-inline-content a {
-    color: ${({ theme }) => theme.color.blue};
+    color: ${themeCssVariables.color.blue};
   }
 
   & .bn-inline-content code {
     font-family: monospace;
-    color: ${({ theme }) => theme.font.color.danger};
+    color: ${themeCssVariables.font.color.danger};
     padding: 2px 4px;
     border-radius: 4px;
-    border: 1px solid ${({ theme }) => theme.font.color.extraLight};
+    border: 1px solid ${themeCssVariables.font.color.extraLight};
     font-size: 0.9rem;
-    background-color: ${({ theme }) => theme.background.transparent.light};
+    background-color: ${themeCssVariables.background.transparent.light};
   }
 `;
 
@@ -141,7 +142,7 @@ export const BlockEditor = ({
   onPaste,
   readonly,
 }: BlockEditorProps) => {
-  const theme = useTheme();
+  const { theme } = useContext(ThemeContext);
   const blockNoteTheme = theme.name === 'light' ? 'light' : 'dark';
   const getMentionItems = useMentionMenu(editor);
 

packages/twenty-front/src/modules/blocknote-editor/components/CustomMentionMenu.tsx

@@ -1,4 +1,4 @@
-import styled from '@emotion/styled';
+import { styled } from '@linaria/react';
 import { autoUpdate, useFloating } from '@floating-ui/react';
 import { motion } from 'framer-motion';
 import { type MouseEvent as ReactMouseEvent } from 'react';

packages/twenty-front/src/modules/blocknote-editor/components/CustomSideMenu.tsx

@@ -9,16 +9,17 @@ import {
   SideMenu,
   SideMenuController,
 } from '@blocknote/react';
-import styled from '@emotion/styled';
+import { styled } from '@linaria/react';
 import { useLingui } from '@lingui/react/macro';
 import { IconColorSwatch, IconPlus, IconTrash } from 'twenty-ui/display';
+import { themeCssVariables } from 'twenty-ui/theme-constants';
 
 type CustomSideMenuProps = {
   editor: typeof BLOCK_SCHEMA.BlockNoteEditor;
 };
 
 const StyledDivToCreateGap = styled.div`
-  width: ${({ theme }) => theme.spacing(2)};
+  width: ${themeCssVariables.spacing[2]};
 `;
 
 export const CustomSideMenu = ({ editor }: CustomSideMenuProps) => {

packages/twenty-front/src/modules/blocknote-editor/components/CustomSideMenuOptions.tsx

@@ -1,14 +1,16 @@
-import { useTheme } from '@emotion/react';
-import styled from '@emotion/styled';
+import { styled } from '@linaria/react';
+import { useContext } from 'react';
 import { type IconComponent } from 'twenty-ui/display';
+import { ThemeContext } from 'twenty-ui/theme';
+import { themeCssVariables } from 'twenty-ui/theme-constants';
 
 const StyledContainer = styled.div<{ Variant: Variants }>`
-  color: ${({ theme, Variant }) =>
-    Variant === 'danger' ? theme.color.red : 'inherit'};
+  color: ${({ Variant }) =>
+    Variant === 'danger' ? themeCssVariables.color.red : 'inherit'};
   align-items: center;
   display: flex;
   flex-direction: row;
-  gap: ${({ theme }) => theme.spacing(2)};
+  gap: ${themeCssVariables.spacing[2]};
 `;
 
 const StyledTextContainer = styled.div``;
@@ -26,7 +28,7 @@ export const CustomSideMenuOptions = ({
   Variant,
   text,
 }: CustomSideMenuOptionsProps) => {
-  const theme = useTheme();
+  const { theme } = useContext(ThemeContext);
   return (
     <StyledContainer Variant={Variant}>
       <LeftIcon

packages/twenty-front/src/modules/blocknote-editor/components/CustomSlashMenu.tsx

@@ -1,5 +1,5 @@
 import { useBlockNoteEditor } from '@blocknote/react';
-import styled from '@emotion/styled';
+import { styled } from '@linaria/react';
 import { autoUpdate, flip, offset, useFloating } from '@floating-ui/react';
 import { motion } from 'framer-motion';
 import { createPortal } from 'react-dom';