Remove twenty-ui-deprecated and migrate frontend to twenty-ui (#21596)

Migrates `twenty-front`, `twenty-sdk`, and
`twenty-front-component-renderer` from `twenty-ui-deprecated` to
`twenty-ui` (mechanical import swap — the packages have API parity) and
deletes the deprecated package along with its workspace/CI/config
wiring.

Also adds `@linaria/react`/`@linaria/core` as direct deps of
`twenty-front` (it used them transitively via the deprecated package).

Note: move the required status check from `ci-ui-status-check` to
`ci-new-ui-status-check`.

Argos: the Storybook box-model/button-reset baseline shift (the bulk of
the visual diffs) is isolated in #21665 — Storybook now loads
twenty-ui's global `reset.scss`, which the production app already ships.
Once #21665 merges and this branch is rebased, the remaining Argos diffs
are component-level visual-parity items only.
This commit is contained in:
Raphaël Bosi
2026-06-17 11:41:11 +02:00
committed by GitHub
parent 079040f1c0
commit 9c9c34fccf
2267 changed files with 3289 additions and 43134 deletions
@@ -9,8 +9,8 @@ import { Trans, useLingui } from '@lingui/react/macro';
import { useParams } from 'react-router-dom';
import { SettingsPath } from 'twenty-shared/types';
import { isDefined } from 'twenty-shared/utils';
import { H2Title } from 'twenty-ui-deprecated/display';
import { Button } from 'twenty-ui-deprecated/input';
import { H2Title } from 'twenty-ui/display';
import { Button } from 'twenty-ui/input';
import { useMutation } from '@apollo/client/react';
import { DeleteTwoFactorAuthenticationMethodDocument } from '~/generated-metadata/graphql';
import { useNavigateSettings } from '~/hooks/useNavigateSettings';
@@ -1,5 +1,5 @@
import { styled } from '@linaria/react';
import { themeCssVariables } from 'twenty-ui-deprecated/theme-constants';
import { themeCssVariables } from 'twenty-ui/theme-constants';
const StyledDashContainer = styled.div`
align-items: center;
@@ -1,6 +1,6 @@
import { styled } from '@linaria/react';
import { type SlotProps } from 'input-otp';
import { themeCssVariables } from 'twenty-ui-deprecated/theme-constants';
import { themeCssVariables } from 'twenty-ui/theme-constants';
const StyledSlot = styled.div<{ isActive: boolean }>`
align-items: center;
@@ -1,7 +1,7 @@
import { styled } from '@linaria/react';
import { OTPInput } from 'input-otp';
import { Controller, useFormContext } from 'react-hook-form';
import { themeCssVariables } from 'twenty-ui-deprecated/theme-constants';
import { themeCssVariables } from 'twenty-ui/theme-constants';
import { TwoFactorAuthenticationVerificationCodeDash } from '@/settings/two-factor-authentication/components/TwoFactorAuthenticationVerificationCodeDash';
import { TwoFactorAuthenticationVerificationCodeSlot } from '@/settings/two-factor-authentication/components/TwoFactorAuthenticationVerificationCodeSlot';