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-ui/src/input/button/components/AnimatedButton.tsx

@@ -6,7 +6,8 @@ import React, { useContext, useMemo } from 'react';
 import { Link } from 'react-router-dom';
 
 import { Pill } from '@ui/components/Pill/Pill';
-import { ThemeContext, themeCssVariables } from '@ui/theme';
+import { ThemeContext } from '@ui/theme';
+import { themeCssVariables } from '@ui/theme-constants';
 import {
   type ButtonAccent,
   type ButtonPosition,

packages/twenty-ui/src/input/button/components/AnimatedLightIconButton.tsx

@@ -4,7 +4,8 @@ import {
   type LightIconButtonAccent,
   type LightIconButtonSize,
 } from '@ui/input/button/components/LightIconButton';
-import { ThemeContext, themeCssVariables } from '@ui/theme';
+import { ThemeContext } from '@ui/theme';
+import { themeCssVariables } from '@ui/theme-constants';
 import { motion, type MotionProps } from 'framer-motion';
 import { type ComponentProps, type MouseEvent, useContext } from 'react';
 

packages/twenty-ui/src/input/button/components/Button/Button.tsx

@@ -3,7 +3,8 @@ import { type IconComponent } from '@ui/display/icon/types/IconComponent';
 import { ButtonHotkeys } from '@ui/input/button/components/Button/internal/ButtonHotKeys';
 import { ButtonIcon } from '@ui/input/button/components/Button/internal/ButtonIcon';
 import { ButtonSoon } from '@ui/input/button/components/Button/internal/ButtonSoon';
-import { GRAY_SCALE_LIGHT, themeCssVariables } from '@ui/theme';
+import { GRAY_SCALE_LIGHT } from '@ui/theme';
+import { themeCssVariables } from '@ui/theme-constants';
 import { useIsMobile } from '@ui/utilities';
 import { type ClickOutsideAttributes } from '@ui/utilities/types/ClickOutsideAttributes';
 import React, { useMemo, useState } from 'react';

packages/twenty-ui/src/input/button/components/Button/internal/ButtonHotKeys.tsx

@@ -5,7 +5,7 @@ import {
   type ButtonSize,
   type ButtonVariant,
 } from '@ui/input';
-import { themeCssVariables } from '@ui/theme';
+import { themeCssVariables } from '@ui/theme-constants';
 import { getOsShortcutSeparator } from '@ui/utilities';
 
 const StyledSeparator = styled.div<{

packages/twenty-ui/src/input/button/components/Button/internal/ButtonIcon.tsx

@@ -2,7 +2,8 @@ import { styled } from '@linaria/react';
 import { type IconComponent } from '@ui/display';
 import { Loader } from '@ui/feedback';
 import { baseTransitionTiming } from '@ui/input/button/components/Button/constant';
-import { ThemeContext, themeCssVariables } from '@ui/theme';
+import { ThemeContext } from '@ui/theme';
+import { themeCssVariables } from '@ui/theme-constants';
 import { useContext } from 'react';
 
 const StyledIcon = styled.div<{

packages/twenty-ui/src/input/button/components/Button/internal/ButtonText.tsx

@@ -1,7 +1,7 @@
 import { styled } from '@linaria/react';
 
 import { baseTransitionTiming } from '@ui/input/button/components/Button/constant';
-import { themeCssVariables } from '@ui/theme';
+import { themeCssVariables } from '@ui/theme-constants';
 
 const StyledEllipsis = styled.div<{ isLoading?: boolean }>`
   right: 0;

packages/twenty-ui/src/input/button/components/ButtonGroup.tsx

@@ -2,7 +2,7 @@ import { styled } from '@linaria/react';
 import React, { type ReactNode } from 'react';
 
 import { type ButtonPosition, type ButtonProps } from './Button/Button';
-import { themeCssVariables } from '@ui/theme';
+import { themeCssVariables } from '@ui/theme-constants';
 import { isDefined } from 'twenty-shared/utils';
 
 const StyledButtonGroupContainer = styled.div`

packages/twenty-ui/src/input/button/components/ColorPickerButton.tsx

@@ -1,6 +1,6 @@
 import { styled } from '@linaria/react';
 import { ColorSample, type ColorSampleProps } from '@ui/display';
-import { themeCssVariables } from '@ui/theme';
+import { themeCssVariables } from '@ui/theme-constants';
 import {
   LightIconButton,
   type LightIconButtonProps,

packages/twenty-ui/src/input/button/components/FloatingButton.tsx

@@ -1,6 +1,7 @@
 import { styled } from '@linaria/react';
 import { type IconComponent } from '@ui/display';
-import { ThemeContext, themeCssVariables } from '@ui/theme';
+import { ThemeContext } from '@ui/theme';
+import { themeCssVariables } from '@ui/theme-constants';
 import { useContext } from 'react';
 import { Link } from 'react-router-dom';
 

packages/twenty-ui/src/input/button/components/FloatingButtonGroup.tsx

@@ -5,7 +5,7 @@ import {
   type FloatingButtonPosition,
   type FloatingButtonProps,
 } from './FloatingButton';
-import { themeCssVariables } from '@ui/theme';
+import { themeCssVariables } from '@ui/theme-constants';
 import { isDefined } from 'twenty-shared/utils';
 
 const StyledFloatingButtonGroupContainer = styled.div`

packages/twenty-ui/src/input/button/components/FloatingIconButton.tsx

@@ -1,6 +1,7 @@
 import { styled } from '@linaria/react';
 import { type IconComponent } from '@ui/display';
-import { ThemeContext, themeCssVariables } from '@ui/theme';
+import { ThemeContext } from '@ui/theme';
+import { themeCssVariables } from '@ui/theme-constants';
 import React, { useContext } from 'react';
 
 export type FloatingIconButtonSize = 'small' | 'medium';

packages/twenty-ui/src/input/button/components/FloatingIconButtonGroup.tsx

@@ -7,7 +7,7 @@ import {
   type FloatingIconButtonPosition,
   type FloatingIconButtonProps,
 } from './FloatingIconButton';
-import { themeCssVariables } from '@ui/theme';
+import { themeCssVariables } from '@ui/theme-constants';
 
 const StyledFloatingIconButtonGroupContainer = styled.div`
   backdrop-filter: blur(20px);

packages/twenty-ui/src/input/button/components/IconButton.tsx

@@ -1,6 +1,7 @@
 import { styled } from '@linaria/react';
 import { type IconComponent } from '@ui/display';
-import { GRAY_SCALE_LIGHT, ThemeContext, themeCssVariables } from '@ui/theme';
+import { GRAY_SCALE_LIGHT, ThemeContext } from '@ui/theme';
+import { themeCssVariables } from '@ui/theme-constants';
 import React, { useContext, useMemo } from 'react';
 
 export type IconButtonSize = 'medium' | 'small';

packages/twenty-ui/src/input/button/components/IconButtonGroup.tsx

@@ -3,7 +3,7 @@ import { type IconComponent } from '@ui/display';
 import { type MouseEvent } from 'react';
 
 import { InsideButton } from '@ui/input/button/components/InsideButton';
-import { themeCssVariables } from '@ui/theme';
+import { themeCssVariables } from '@ui/theme-constants';
 
 export type IconButtonGroupProps = {
   disabled?: boolean;

packages/twenty-ui/src/input/button/components/InsideButton.tsx

@@ -1,6 +1,7 @@
 import { styled } from '@linaria/react';
 import { type IconComponent } from '@ui/display';
-import { ThemeContext, themeCssVariables } from '@ui/theme';
+import { ThemeContext } from '@ui/theme';
+import { themeCssVariables } from '@ui/theme-constants';
 import React, { useContext } from 'react';
 
 export type InsideButtonProps = {

packages/twenty-ui/src/input/button/components/LightButton.tsx

@@ -1,6 +1,7 @@
 import { styled } from '@linaria/react';
 import { type IconComponent } from '@ui/display';
-import { ThemeContext, themeCssVariables } from '@ui/theme';
+import { ThemeContext } from '@ui/theme';
+import { themeCssVariables } from '@ui/theme-constants';
 import { type MouseEvent, useContext } from 'react';
 
 export type LightButtonAccent = 'secondary' | 'tertiary';

packages/twenty-ui/src/input/button/components/LightIconButton.tsx

@@ -1,6 +1,7 @@
 import { styled } from '@linaria/react';
 import { type IconComponent } from '@ui/display';
-import { ThemeContext, themeCssVariables } from '@ui/theme';
+import { ThemeContext } from '@ui/theme';
+import { themeCssVariables } from '@ui/theme-constants';
 import { type ComponentProps, type MouseEvent, useContext } from 'react';
 
 export type LightIconButtonAccent = 'secondary' | 'tertiary';

packages/twenty-ui/src/input/button/components/MainButton.tsx

@@ -1,6 +1,7 @@
 import { styled } from '@linaria/react';
 import { type IconComponent } from '@ui/display';
-import { ThemeContext, themeCssVariables } from '@ui/theme';
+import { ThemeContext } from '@ui/theme';
+import { themeCssVariables } from '@ui/theme-constants';
 import React, { type FunctionComponent, useContext } from 'react';
 
 export type MainButtonVariant = 'primary' | 'secondary';

packages/twenty-ui/src/input/button/components/RoundedIconButton.tsx

@@ -1,6 +1,7 @@
 import { styled } from '@linaria/react';
 import { type IconComponent } from '@ui/display';
-import { ThemeContext, themeCssVariables } from '@ui/theme';
+import { ThemeContext } from '@ui/theme';
+import { themeCssVariables } from '@ui/theme-constants';
 import { useContext } from 'react';
 
 export type RoundedIconButtonSize = 'small' | 'medium';

packages/twenty-ui/src/input/button/components/TabButton/internals/components/StyledTabBase.tsx

@@ -1,5 +1,5 @@
 import { styled } from '@linaria/react';
-import { themeCssVariables } from '@ui/theme';
+import { themeCssVariables } from '@ui/theme-constants';
 
 export const StyledTabButton = styled.button<{
   active?: boolean;

packages/twenty-ui/src/input/button/components/__stories__/TabButton.stories.tsx

@@ -17,7 +17,7 @@ import {
   JotaiRootDecorator,
 } from '@ui/testing';
 import { type ReactNode } from 'react';
-import { themeCssVariables } from '@ui/theme';
+import { themeCssVariables } from '@ui/theme-constants';
 
 const StyledTabContainer = styled.div`
   display: flex;