Complete linaria migration (#18361)

## Summary Completes the migration of the frontend styling system from **Emotion** (`@emotion/styled`, `@emotion/react`) to **Linaria** (`@linaria/react`, `@linaria/core`), a zero-runtime CSS-in-JS library where styles are extracted at build time. This is the final step of the migration — all ~494 files across `twenty-front`, `twenty-ui`, `twenty-website`, and `twenty-sdk` are now fully converted. ## Changes ### Styling Migration (across ~480 component files) - Replaced all `@emotion/styled` imports with `@linaria/react` - Converted runtime theme access patterns (`({ theme }) => theme.x.y`) to build-time `themeCssVariables` CSS custom properties - Replaced `useTheme()` hook (from Emotion) with `useContext(ThemeContext)` where runtime theme values are still needed (e.g., passing colors to non-CSS props like icon components) - Removed `@emotion/react` `css` helper usages in favor of Linaria template literals ### Dependency & Configuration Changes - **Removed**: `@emotion/react`, `@emotion/styled` from root `package.json` - **Added**: `@wyw-in-js/babel-preset`, `next-with-linaria` (for twenty-website SSR support) - Updated Nx generator defaults from `@emotion/styled` to `@linaria/react` in `nx.json` - Simplified `vite.config.ts` (removed Emotion-specific configuration) - Updated `twenty-website/next.config.js` to use `next-with-linaria` for SSR Linaria support ### Storybook & Testing - Removed `ThemeProvider` from Emotion in Storybook previews (`twenty-front`, `twenty-sdk`) - Now relies solely on `ThemeContextProvider` for theme injection ### Documentation - Removed the temporary `docs/emotion-to-linaria-migration-plan.md` (migration complete) - Updated `CLAUDE.md` and `README.md` to reflect Linaria as the styling stack - Updated frontend style guide docs across all locales ## How it works Linaria extracts styles at build time via the `@wyw-in-js/vite` plugin. All expressions in `styled` template literals must be **statically evaluable** — no runtime theme objects or closures over component state. - **Static styles** use `themeCssVariables` which map to CSS custom properties (`var(--theme-color-x)`) - **Runtime theme access** (for non-CSS use cases like icon `color` props) uses `useContext(ThemeContext)` instead of Emotion's `useTheme()`
2026-03-04 00:50:06 +01:00
parent 8a3b96d911
commit 7a2e397ad1
540 changed files with 3654 additions and 4156 deletions
@@ -1,15 +1,16 @@
 import { TitleInput } from '@/ui/input/components/TitleInput';
-import styled from '@emotion/styled';
+import { styled } from '@linaria/react';
 import { t } from '@lingui/core/macro';
+import { themeCssVariables } from 'twenty-ui/theme-constants';

 const StyledHeaderTitle = styled.div`
-  color: ${({ theme }) => theme.font.color.primary};
-  font-weight: ${({ theme }) => theme.font.weight.semiBold};
-  font-size: ${({ theme }) => theme.font.size.lg};
+  color: ${themeCssVariables.font.color.primary};
+  font-weight: ${themeCssVariables.font.weight.semiBold};
+  font-size: ${themeCssVariables.font.size.lg};
  width: fit-content;
  max-width: 420px;
  & > input:disabled {
-    color: ${({ theme }) => theme.font.color.primary};
+    color: ${themeCssVariables.font.color.primary};
  }
 `;

@@ -3,15 +3,16 @@ import { SettingsOptionCardContentCounter } from '@/settings/components/Settings
 import { SettingsOptionCardContentToggle } from '@/settings/components/SettingsOptions/SettingsOptionCardContentToggle';
 import { SettingsTextInput } from '@/ui/input/components/SettingsTextInput';
 import { TextArea } from '@/ui/input/components/TextArea';
-import styled from '@emotion/styled';
+import { styled } from '@linaria/react';
 import { t } from '@lingui/core/macro';
 import { H2Title, IconClockHour8, IconTool } from 'twenty-ui/display';
 import { Card, Section } from 'twenty-ui/layout';
+import { themeCssVariables } from 'twenty-ui/theme-constants';

 const StyledInputsContainer = styled.div`
  display: flex;
  flex-direction: column;
-  gap: ${({ theme }) => theme.spacing(4)};
+  gap: ${themeCssVariables.spacing[4]};
 `;

 export const SettingsLogicFunctionNewForm = ({
@@ -1,27 +1,29 @@
-import styled from '@emotion/styled';
+import { styled } from '@linaria/react';
 import { type LogicFunction } from '~/generated-metadata/graphql';
 import { TableCell } from '@/ui/layout/table/components/TableCell';
-import { useTheme } from '@emotion/react';
+import { useContext } from 'react';
 import { IconChevronRight } from 'twenty-ui/display';
 import { StyledTableRow } from '@/settings/logic-functions/components/SettingsLogicFunctionsTable';
+import { ThemeContext } from 'twenty-ui/theme';
+import { themeCssVariables } from 'twenty-ui/theme-constants';

 const StyledNameTableCell = styled(TableCell)`
-  color: ${({ theme }) => theme.font.color.primary};
-  gap: ${({ theme }) => theme.spacing(2)};
+  color: ${themeCssVariables.font.color.primary};
+  gap: ${themeCssVariables.spacing[2]};
 `;

 const StyledRuntimeTableCell = styled(TableCell)`
-  color: ${({ theme }) => theme.font.color.secondary};
-  gap: ${({ theme }) => theme.spacing(2)};
+  color: ${themeCssVariables.font.color.secondary};
+  gap: ${themeCssVariables.spacing[2]};
 `;

 const StyledIconTableCell = styled(TableCell)`
  justify-content: center;
-  padding-right: ${({ theme }) => theme.spacing(1)};
+  padding-right: ${themeCssVariables.spacing[1]};
 `;

 const StyledIconChevronRight = styled(IconChevronRight)`
-  color: ${({ theme }) => theme.font.color.tertiary};
+  color: ${themeCssVariables.font.color.tertiary};
 `;

 export const SettingsLogicFunctionsFieldItemTableRow = ({
@@ -31,7 +33,7 @@ export const SettingsLogicFunctionsFieldItemTableRow = ({
  logicFunction: LogicFunction;
  to: string;
 }) => {
-  const theme = useTheme();
+  const { theme } = useContext(ThemeContext);
  return (
    <StyledTableRow to={to}>
      <StyledNameTableCell>{logicFunction.name}</StyledNameTableCell>
@@ -3,19 +3,20 @@ import { Table } from '@/ui/layout/table/components/Table';
 import { TableBody } from '@/ui/layout/table/components/TableBody';
 import { TableHeader } from '@/ui/layout/table/components/TableHeader';
 import { TableRow } from '@/ui/layout/table/components/TableRow';
-import styled from '@emotion/styled';
+import { styled } from '@linaria/react';
 import { SettingsPath } from 'twenty-shared/types';
 import { getSettingsPath } from 'twenty-shared/utils';
 import { type LogicFunction } from '~/generated-metadata/graphql';
 import { useLingui } from '@lingui/react/macro';
 import { useParams } from 'react-router-dom';
+import { themeCssVariables } from 'twenty-ui/theme-constants';

 export const StyledTableRow = styled(TableRow)`
  grid-template-columns: 164px 1fr 96px 32px;
 `;

 const StyledTableBody = styled(TableBody)`
-  border-bottom: 1px solid ${({ theme }) => theme.border.color.light};
+  border-bottom: 1px solid ${themeCssVariables.border.color.light};
 `;

 export const SettingsLogicFunctionsTable = ({
@@ -6,7 +6,7 @@ import { SETTINGS_LOGIC_FUNCTION_TAB_LIST_COMPONENT_ID } from '@/settings/logic-
 import { TabList } from '@/ui/layout/tab-list/components/TabList';
 import { activeTabIdComponentState } from '@/ui/layout/tab-list/states/activeTabIdComponentState';
 import { useAtomComponentStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomComponentStateValue';
-import styled from '@emotion/styled';
+import { styled } from '@linaria/react';
 import { t } from '@lingui/core/macro';
 import { H2Title, IconPlayerPlay } from 'twenty-ui/display';
 import { Button, CoreEditorHeader } from 'twenty-ui/input';
@@ -5,7 +5,7 @@ import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/Drop
 import { useCloseDropdown } from '@/ui/layout/dropdown/hooks/useCloseDropdown';
 import { TableCell } from '@/ui/layout/table/components/TableCell';
 import { TableRow } from '@/ui/layout/table/components/TableRow';
-import styled from '@emotion/styled';
+import { styled } from '@linaria/react';
 import { t } from '@lingui/core/macro';
 import { useState } from 'react';
 import {
@@ -2,18 +2,19 @@ import { LogicFunctionExecutionResult } from '@/logic-functions/components/Logic
 import { useAtomFamilyStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomFamilyStateValue';
 import { useSetAtomFamilyState } from '@/ui/utilities/state/jotai/hooks/useSetAtomFamilyState';
 import { logicFunctionTestDataFamilyState } from '@/workflow/workflow-steps/workflow-actions/code-action/states/logicFunctionTestDataFamilyState';
-import styled from '@emotion/styled';
+import { styled } from '@linaria/react';
 import { useLingui } from '@lingui/react/macro';
 import { H2Title, IconPlayerPlay } from 'twenty-ui/display';
 import { Button, CodeEditor, CoreEditorHeader } from 'twenty-ui/input';
 import { Section } from 'twenty-ui/layout';
+import { themeCssVariables } from 'twenty-ui/theme-constants';
 import { InputLabel } from '@/ui/input/components/InputLabel';
 import { TextArea } from '@/ui/input/components/TextArea';

 const StyledInputsContainer = styled.div`
  display: flex;
  flex-direction: column;
-  gap: ${({ theme }) => theme.spacing(4)};
+  gap: ${themeCssVariables.spacing[4]};
 `;

 const StyledCodeEditorContainer = styled.div`
@@ -3,7 +3,7 @@ import { SettingsDatabaseEventsForm } from '@/settings/components/SettingsDataba
 import { Table } from '@/ui/layout/table/components/Table';
 import { TableHeader } from '@/ui/layout/table/components/TableHeader';
 import { TableRow } from '@/ui/layout/table/components/TableRow';
-import styled from '@emotion/styled';
+import { styled } from '@linaria/react';
 import { useLingui } from '@lingui/react/macro';
 import { H2Title, OverflowingTextWithTooltip } from 'twenty-ui/display';
 import { Section } from 'twenty-ui/layout';
@@ -12,27 +12,28 @@ import { TableCell } from '@/ui/layout/table/components/TableCell';
 import { REACT_APP_SERVER_BASE_URL } from '~/config';
 import { Tag } from 'twenty-ui/components';
 import { type LogicFunction } from '~/generated-metadata/graphql';
+import { themeCssVariables } from 'twenty-ui/theme-constants';

 export const StyledRouteTriggerTableRow = styled(TableRow)`
  grid-template-columns: 1fr 120px 120px;
 `;

 const StyledTableCell = styled(TableCell)`
-  color: ${({ theme }) => theme.font.color.tertiary};
-  gap: ${({ theme }) => theme.spacing(2)};
+  color: ${themeCssVariables.font.color.tertiary};
+  gap: ${themeCssVariables.spacing[2]};
  min-width: 0;
  overflow: hidden;
 `;

 const StyledRouteTriggerTableHeaderRow = styled(StyledRouteTriggerTableRow)`
-  margin-bottom: ${({ theme }) => theme.spacing(2)};
+  margin-bottom: ${themeCssVariables.spacing[2]};
 `;

 const StyledEmptyState = styled.div`
  align-items: center;
-  color: ${({ theme }) => theme.font.color.tertiary};
+  color: ${themeCssVariables.font.color.tertiary};
  display: flex;
-  font-size: ${({ theme }) => theme.font.size.md};
+  font-size: ${themeCssVariables.font.size.md};
  height: 160px;
  justify-content: center;
  text-align: center;