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 { t } from '@lingui/core/macro';
-import { useTheme } from '@emotion/react';
-import styled from '@emotion/styled';
+import { useContext } from 'react';
+import { styled } from '@linaria/react';

 import { type ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
 import {
@@ -9,6 +9,8 @@ import {
  useIcons,
 } from 'twenty-ui/display';
 import { SettingsItemTypeTag } from '@/settings/components/SettingsItemTypeTag';
+import { ThemeContext } from 'twenty-ui/theme';
+import { themeCssVariables } from 'twenty-ui/theme-constants';

 export type SettingsDataModelObjectPreviewProps = {
  className?: string;
@@ -27,17 +29,17 @@ const StyledObjectPreview = styled.div`

 const StyledObjectName = styled.div`
  display: flex;
-  gap: ${({ theme }) => theme.spacing(2)};
+  gap: ${themeCssVariables.spacing[2]};
  max-width: 60%;
 `;

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

 const StyledNumber = styled.div`
-  color: ${({ theme }) => theme.font.color.tertiary};
-  padding-right: ${({ theme }) => theme.spacing(2)};
+  color: ${themeCssVariables.font.color.tertiary};
+  padding-right: ${themeCssVariables.spacing[2]};
 `;

 const StyledIconContainer = styled.div`
@@ -46,10 +48,10 @@ const StyledIconContainer = styled.div`

 const StyledSeparator = styled.div`
  align-self: stretch;
-  background: ${({ theme }) => theme.background.quaternary};
+  background: ${themeCssVariables.background.quaternary};
  height: 1px;
-  margin-bottom: ${({ theme }) => theme.spacing(2)};
-  margin-top: ${({ theme }) => theme.spacing(2)};
+  margin-bottom: ${themeCssVariables.spacing[2]};
+  margin-top: ${themeCssVariables.spacing[2]};
 `;

 type SettingsDataModelObjectPreviewItemProps = {
@@ -66,7 +68,7 @@ const SettingsDataModelObjectPreviewItem = ({
  pluralizeLabel = true,
  index,
 }: SettingsDataModelObjectPreviewItemProps) => {
-  const theme = useTheme();
+  const { theme } = useContext(ThemeContext);
  const { getIcon } = useIcons();
  const ObjectIcon = getIcon(objectMetadataItem.icon);

@@ -100,7 +102,7 @@ const SettingsDataModelObjectPreviewOtherObjects = ({
 }: {
  selected: number;
 }) => {
-  const theme = useTheme();
+  const { theme } = useContext(ThemeContext);
  return (
    <>
      <StyledSeparator />
@@ -1,6 +1,7 @@
-import styled from '@emotion/styled';
+import { styled } from '@linaria/react';

 import { useLingui } from '@lingui/react/macro';
+import { useContext } from 'react';
 import { SettingsPath } from 'twenty-shared/types';
 import { getSettingsPath } from 'twenty-shared/utils';
 import { IconEye } from 'twenty-ui/display';
@@ -9,30 +10,36 @@ import { Card } from 'twenty-ui/layout';

 import DarkCoverImage from '@/settings/data-model/assets/cover-dark.png';
 import LightCoverImage from '@/settings/data-model/assets/cover-light.png';
+import { ThemeContext } from 'twenty-ui/theme';
+import { themeCssVariables } from 'twenty-ui/theme-constants';

 const StyledCoverImageContainer = styled(Card)`
  align-items: center;
-  background-image: ${({ theme }) =>
-    theme.name === 'light'
-      ? `url('${LightCoverImage.toString()}')`
-      : `url('${DarkCoverImage.toString()}')`};
  background-size: cover;
-  border-radius: ${({ theme }) => theme.border.radius.md};
+  border-radius: ${themeCssVariables.border.radius.md};
  box-sizing: border-box;
  display: flex;
  min-height: 153px;
  justify-content: center;
  position: relative;
-  margin-bottom: ${({ theme }) => theme.spacing(8)};
+  margin-bottom: ${themeCssVariables.spacing[8]};
 `;

 const StyledButtonContainer = styled.div`
-  padding-top: ${({ theme }) => theme.spacing(5)};
+  padding-top: ${themeCssVariables.spacing[5]};
 `;
 export const SettingsObjectCoverImage = () => {
  const { t } = useLingui();
+  const { theme } = useContext(ThemeContext);
  return (
-    <StyledCoverImageContainer>
+    <StyledCoverImageContainer
+      style={{
+        backgroundImage:
+          theme.name === 'light'
+            ? `url('${LightCoverImage.toString()}')`
+            : `url('${DarkCoverImage.toString()}')`,
+      }}
+    >
      <StyledButtonContainer>
        <FloatingButton
          Icon={IconEye}
@@ -6,8 +6,8 @@ import { type SettingsDataModelObjectAboutFormValues } from '@/settings/data-mod
 import { IconPicker } from '@/ui/input/components/IconPicker';
 import { SettingsTextInput } from '@/ui/input/components/SettingsTextInput';
 import { TextArea } from '@/ui/input/components/TextArea';
-import { useTheme } from '@emotion/react';
-import styled from '@emotion/styled';
+import { useContext } from 'react';
+import { styled } from '@linaria/react';
 import { useLingui } from '@lingui/react/macro';
 import { plural } from 'pluralize';
 import { Controller, useFormContext } from 'react-hook-form';
@@ -22,6 +22,8 @@ import {
 } from 'twenty-ui/display';
 import { Button } from 'twenty-ui/input';
 import { Card } from 'twenty-ui/layout';
+import { ThemeContext } from 'twenty-ui/theme';
+import { themeCssVariables } from 'twenty-ui/theme-constants';
 import { type StringKeyOf } from 'type-fest';
 import { useNavigateSettings } from '~/hooks/useNavigateSettings';
 import { computeMetadataNameFromLabel } from '~/pages/settings/data-model/utils/computeMetadataNameFromLabel';
@@ -35,8 +37,8 @@ type SettingsDataModelObjectAboutFormProps = {

 const StyledInputsContainer = styled.div`
  display: flex;
-  gap: ${({ theme }) => theme.spacing(2)};
-  margin-bottom: ${({ theme }) => theme.spacing(2)};
+  gap: ${themeCssVariables.spacing[2]};
+  margin-bottom: ${themeCssVariables.spacing[2]};
  width: 100%;
 `;

@@ -48,60 +50,60 @@ const StyledInputContainer = styled.div`
 const StyledAdvancedSettingsSectionInputWrapper = styled.div`
  display: flex;
  flex-direction: column;
-  gap: ${({ theme }) => theme.spacing(4)};
+  gap: ${themeCssVariables.spacing[4]};
  width: 100%;
  flex: 1;
 `;

 const StyledAdvancedSettingsOuterContainer = styled.div`
-  padding-top: ${({ theme }) => theme.spacing(4)};
+  padding-top: ${themeCssVariables.spacing[4]};
 `;

 const StyledAdvancedSettingsContainer = styled.div`
  display: flex;
-  gap: ${({ theme }) => theme.spacing(2)};
+  gap: ${themeCssVariables.spacing[2]};
  position: relative;
  width: 100%;
 `;

 const StyledLabel = styled.span`
-  color: ${({ theme }) => theme.font.color.light};
-  font-size: ${({ theme }) => theme.font.size.xs};
-  font-weight: ${({ theme }) => theme.font.weight.semiBold};
-  margin-bottom: ${({ theme }) => theme.spacing(1)};
+  color: ${themeCssVariables.font.color.light};
+  font-size: ${themeCssVariables.font.size.xs};
+  font-weight: ${themeCssVariables.font.weight.semiBold};
+  margin-bottom: ${themeCssVariables.spacing[1]};
 `;

 const StyledConflictBanner = styled.div`
  align-items: center;
-  background-color: ${({ theme }) => theme.accent.secondary};
-  border-radius: ${({ theme }) => theme.border.radius.md};
+  background-color: ${themeCssVariables.accent.secondary};
+  border-radius: ${themeCssVariables.border.radius.md};
  box-sizing: border-box;
  display: flex;
-  gap: ${({ theme }) => theme.spacing(2)};
-  margin-bottom: ${({ theme }) => theme.spacing(2)};
-  padding: ${({ theme }) => theme.spacing(2)};
+  gap: ${themeCssVariables.spacing[2]};
+  margin-bottom: ${themeCssVariables.spacing[2]};
+  padding: ${themeCssVariables.spacing[2]};
 `;

 const StyledBannerContent = styled.div`
  align-items: center;
  display: flex;
-  gap: ${({ theme }) => theme.spacing(2)};
+  gap: ${themeCssVariables.spacing[2]};
  flex: 1;
 `;

 const StyledBannerText = styled.span`
-  color: ${({ theme }) => theme.color.blue};
+  color: ${themeCssVariables.color.blue};
  flex: 1;
 `;

 const StyledConflictButton = styled(Button)`
-  border-color: ${({ theme }) => theme.color.blue};
-  color: ${({ theme }) => theme.color.blue};
+  border-color: ${themeCssVariables.color.blue};
+  color: ${themeCssVariables.color.blue};
  &:hover {
-    background: ${({ theme }) => theme.accent.secondary};
+    background: ${themeCssVariables.accent.secondary};
  }
  &:focus-visible {
-    box-shadow: 0 0 0 3px ${({ theme }) => theme.accent.tertiary};
+    box-shadow: 0 0 0 3px ${themeCssVariables.accent.tertiary};
  }
 `;

@@ -116,7 +118,7 @@ export const SettingsDataModelObjectAboutForm = ({
  const { control, watch, setValue } =
    useFormContext<SettingsDataModelObjectAboutFormValues>();
  const { t } = useLingui();
-  const theme = useTheme();
+  const { theme } = useContext(ThemeContext);
  const navigateSettings = useNavigateSettings();

  const isLabelSyncedWithName = watch('isLabelSyncedWithName');
@@ -4,7 +4,7 @@ import { getActiveFieldMetadataItems } from '@/object-metadata/utils/getActiveFi
 import { objectMetadataItemSchema } from '@/object-metadata/validation-schemas/objectMetadataItemSchema';
 import { isObjectMetadataReadOnly } from '@/object-record/read-only/utils/isObjectMetadataReadOnly';
 import { Select } from '@/ui/input/components/Select';
-import styled from '@emotion/styled';
+import { styled } from '@linaria/react';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { t } from '@lingui/core/macro';
 import { useMemo } from 'react';
@@ -13,6 +13,7 @@ import { useNavigate } from 'react-router-dom';
 import { isLabelIdentifierFieldMetadataTypes } from 'twenty-shared/utils';
 import { IconCircleOff, IconPlus, useIcons } from 'twenty-ui/display';
 import { type SelectOption } from 'twenty-ui/input';
+import { themeCssVariables } from 'twenty-ui/theme-constants';
 import { type z } from 'zod';

 export const settingsDataModelObjectIdentifiersFormSchema =
@@ -36,7 +37,7 @@ const IMAGE_IDENTIFIER_FIELD_METADATA_ID: SettingsDataModelObjectIdentifiers =

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

 export const SettingsDataModelObjectIdentifiersForm = ({
@@ -1,4 +1,4 @@
-import styled from '@emotion/styled';
+import { styled } from '@linaria/react';
 import { useMemo } from 'react';

 import { type ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
@@ -9,23 +9,24 @@ import { SettingsDataModelObjectPreview } from '@/settings/data-model/objects/co
 import { SettingsDataModelObjectIdentifiersForm } from '@/settings/data-model/objects/forms/components/SettingsDataModelObjectIdentifiersForm';
 import { Trans } from '@lingui/react/macro';
 import { Card, CardContent } from 'twenty-ui/layout';
+import { themeCssVariables } from 'twenty-ui/theme-constants';

 type SettingsDataModelObjectSettingsFormCardProps = {
  objectMetadataItem: ObjectMetadataItem;
 };

 const StyledTopCardContent = styled(CardContent)`
-  background-color: ${({ theme }) => theme.background.transparent.lighter};
+  background-color: ${themeCssVariables.background.transparent.lighter};
 `;

 const StyledObjectSummaryCard = styled(Card)`
-  border-radius: ${({ theme }) => theme.border.radius.md};
-  color: ${({ theme }) => theme.font.color.primary};
+  border-radius: ${themeCssVariables.border.radius.md};
+  color: ${themeCssVariables.font.color.primary};
  max-width: 480px;
 `;

 const StyledObjectSummaryCardContent = styled(CardContent)`
-  padding: ${({ theme }) => theme.spacing(2)};
+  padding: ${themeCssVariables.spacing[2]};
 `;

 export const SettingsDataModelObjectSettingsFormCard = ({
@@ -1,4 +1,4 @@
-import styled from '@emotion/styled';
+import { styled } from '@linaria/react';
 import { type Meta, type StoryObj } from '@storybook/react-vite';
 import { FormProviderDecorator } from '~/testing/decorators/FormProviderDecorator';
 import { IconsProviderDecorator } from '~/testing/decorators/IconsProviderDecorator';