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,6 +1,6 @@
 import { type ConfigVariableSourceFilter } from '@/settings/admin-panel/config-variables/types/ConfigVariableSourceFilter';
 import { SortOrFilterChip } from '@/views/components/SortOrFilterChip';
-import styled from '@emotion/styled';
+import { styled } from '@linaria/react';

 const StyledChipContainer = styled.div`
  display: flex;
@@ -1,16 +1,17 @@
-import styled from '@emotion/styled';
+import { styled } from '@linaria/react';
 import { useLingui } from '@lingui/react/macro';

 import { isConfigVariablesInDbEnabledState } from '@/client-config/states/isConfigVariablesInDbEnabledState';
 import { useAtomStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomStateValue';
+import { themeCssVariables } from 'twenty-ui/theme-constants';
 import {
  ConfigSource,
  type ConfigVariable,
 } from '~/generated-metadata/graphql';

 const StyledHelpText = styled.div<{ color?: string }>`
-  color: ${({ theme, color }) => color || theme.font.color.tertiary};
-  font-size: ${({ theme }) => theme.font.size.sm};
+  color: ${themeCssVariables.font.color.tertiary};
+  font-size: ${themeCssVariables.font.size.sm};
  line-height: 1.5;
 `;

@@ -8,11 +8,12 @@ import { DropdownMenuHeader } from '@/ui/layout/dropdown/components/DropdownMenu
 import { DropdownMenuHeaderLeftComponent } from '@/ui/layout/dropdown/components/DropdownMenuHeader/internal/DropdownMenuHeaderLeftComponent';
 import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
 import { DropdownMenuSeparator } from '@/ui/layout/dropdown/components/DropdownMenuSeparator';
-import { useTheme } from '@emotion/react';
 import { t } from '@lingui/core/macro';
 import { useAtomStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomStateValue';
+import { useContext } from 'react';
 import { IconChevronLeft, IconEye, IconEyeOff } from 'twenty-ui/display';
 import { MenuItem, MenuItemSelectTag } from 'twenty-ui/navigation';
+import { ThemeContext } from 'twenty-ui/theme';

 type ConfigVariableOptionsDropdownContentProps = {
  selectedCategory: ConfigVariableFilterCategory | null;
@@ -37,7 +38,7 @@ export const ConfigVariableOptionsDropdownContent = ({
  onGroupFilterChange,
  onShowHiddenChange,
 }: ConfigVariableOptionsDropdownContentProps) => {
-  const theme = useTheme();
+  const { theme } = useContext(ThemeContext);

  const isConfigVariablesInDbEnabled = useAtomStateValue(
    isConfigVariablesInDbEnabledState,
@@ -1,5 +1,5 @@
 import { SettingsTextInput } from '@/ui/input/components/SettingsTextInput';
-import styled from '@emotion/styled';
+import { styled } from '@linaria/react';
 import { t } from '@lingui/core/macro';
 import { IconSearch } from 'twenty-ui/display';

@@ -2,7 +2,7 @@ import { useLingui } from '@lingui/react/macro';

 import { isConfigVariablesInDbEnabledState } from '@/client-config/states/isConfigVariablesInDbEnabledState';
 import { TextInput } from '@/ui/input/components/TextInput';
-import styled from '@emotion/styled';
+import { styled } from '@linaria/react';
 import { useAtomStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomStateValue';
 import { type ConfigVariableValue } from 'twenty-shared/types';
 import { type ConfigVariable } from '~/generated-metadata/graphql';
@@ -6,7 +6,7 @@ import { CONFIG_VARIABLE_SOURCE_OPTIONS } from '@/settings/admin-panel/config-va
 import { configVariableGroupFilterState } from '@/settings/admin-panel/config-variables/states/configVariableGroupFilterState';
 import { configVariableSourceFilterState } from '@/settings/admin-panel/config-variables/states/configVariableSourceFilterState';
 import { showHiddenGroupVariablesState } from '@/settings/admin-panel/config-variables/states/showHiddenGroupVariablesState';
-import styled from '@emotion/styled';
+import { styled } from '@linaria/react';
 import { t } from '@lingui/core/macro';
 import { useMemo, useState } from 'react';
 import { H2Title } from 'twenty-ui/display';
@@ -1,10 +1,12 @@
 import { TableCell } from '@/ui/layout/table/components/TableCell';
 import { TableRow } from '@/ui/layout/table/components/TableRow';
-import { useTheme } from '@emotion/react';
-import styled from '@emotion/styled';
+import { useContext } from 'react';
+import { styled } from '@linaria/react';
 import { SettingsPath } from 'twenty-shared/types';
 import { getSettingsPath } from 'twenty-shared/utils';
 import { IconChevronRight } from 'twenty-ui/display';
+import { ThemeContext } from 'twenty-ui/theme';
+import { themeCssVariables } from 'twenty-ui/theme-constants';
 import { type ConfigVariable } from '~/generated-metadata/graphql';

 type SettingsAdminConfigVariablesRowProps = {
@@ -20,7 +22,7 @@ const StyledTruncatedCell = styled(TableCell)`

 const StyledTableRow = styled(TableRow)`
  &:hover {
-    background-color: ${({ theme }) => theme.background.transparent.light};
+    background-color: ${themeCssVariables.background.transparent.light};
  }
 `;

@@ -33,7 +35,7 @@ const StyledEllipsisLabel = styled.div`
 export const SettingsAdminConfigVariablesRow = ({
  variable,
 }: SettingsAdminConfigVariablesRowProps) => {
-  const theme = useTheme();
+  const { theme } = useContext(ThemeContext);

  const displayValue =
    variable.value === ''
@@ -4,11 +4,12 @@ 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 { themeCssVariables } from 'twenty-ui/theme-constants';
 import { type ConfigVariable } from '~/generated-metadata/graphql';

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

 type SettingsAdminConfigVariablesTableProps = {