chore(twenty-front): migrate command-menu, workflow, page-layout and UI modules from Emotion to Linaria (PR 4-6/10) (#18342)

## Summary Continues the Emotion → Linaria migration (PR 4-6 from the [migration plan](docs/emotion-to-linaria-migration-plan.md)). Migrates **311 files** across four module groups: | Module | Files | |---|---| | command-menu | 53 | | workflow | 84 | | page-layout | 84 | | UI (partial - first ~80 files) | ~80 | | twenty-ui (TEXT_INPUT_STYLE) | 1 | | misc (hooks, keyboard-shortcut-menu, file-upload) | ~9 | ### Migration patterns applied - `import styled from '@emotion/styled'` → `import { styled } from '@linaria/react'` - `import { useTheme } from '@emotion/react'` → `import { useContext } from 'react'` + `import { ThemeContext } from 'twenty-ui/theme'` - `${({ theme }) => theme.X.Y.Z}` → `${themeCssVariables.X.Y.Z}` (static CSS variables) - `theme.spacing(N)` → `themeCssVariables.spacing[N]` - `styled(motion.div)` → `motion.create(StyledBase)` (11 components) - `styled(Component)<TypeParams>` → wrapper div approach for non-HTML elements - Multi-declaration interpolations split into one CSS property per interpolation - Interpolation return types fixed (`&&` → ternary `? : ''`) - `TEXT_INPUT_STYLE` converted from function to static string constant (backward compatible) - Emotion `<Global>` replaced with `useEffect` style injection - Complex runtime-dependent styles use CSS custom properties via `style={}` prop ### After this PR - **Remaining files**: ~400 (object-record: ~160, settings: ~200, UI: ~44) - **No breaking changes**: CSS variables resolve identically to the previous Emotion theme values
2026-03-03 16:42:03 +01:00
parent 8b26020a0b
commit 3bfdc2c83f
339 changed files with 3439 additions and 2613 deletions
@@ -1,5 +1,5 @@
 import { AIChatThreadsList } from '@/ai/components/AIChatThreadsList';
-import styled from '@emotion/styled';
+import { styled } from '@linaria/react';

 const StyledContainer = styled.div`
  height: 100%;
@@ -1,4 +1,4 @@
-import styled from '@emotion/styled';
+import { styled } from '@linaria/react';
 import { AIChatTab } from '@/ai/components/AIChatTab';

 const StyledContainer = styled.div`
@@ -1,20 +1,21 @@
-import styled from '@emotion/styled';
+import { styled } from '@linaria/react';
 import { IconChevronLeft } from 'twenty-ui/display';
 import { IconButton } from 'twenty-ui/input';
+import { themeCssVariables } from 'twenty-ui/theme-constants';

 const StyledContainer = styled.div`
  align-items: center;
-  border-bottom: 1px solid ${({ theme }) => theme.border.color.light};
+  border-bottom: 1px solid ${themeCssVariables.border.color.light};
  display: flex;
-  gap: ${({ theme }) => theme.spacing(1)};
-  padding: 0 ${({ theme }) => theme.spacing(2)};
+  gap: ${themeCssVariables.spacing[1]};
+  padding: 0 ${themeCssVariables.spacing[2]};
  height: 40px;
 `;

 const StyledText = styled.span`
-  color: ${({ theme }) => theme.font.color.tertiary};
-  font-size: ${({ theme }) => theme.font.size.md};
-  font-weight: ${({ theme }) => theme.font.weight.medium};
+  color: ${themeCssVariables.font.color.tertiary};
+  font-size: ${themeCssVariables.font.size.md};
+  font-weight: ${themeCssVariables.font.weight.medium};
 `;

 type SidePanelSubPageNavigationHeaderProps = {
@@ -1,13 +1,14 @@
-import styled from '@emotion/styled';
+import { styled } from '@linaria/react';
 import { useState } from 'react';

 import { EmailThreadMessage } from '@/activities/emails/components/EmailThreadMessage';
 import { type EmailThreadMessageWithSender } from '@/activities/emails/types/EmailThreadMessageWithSender';
 import { Button } from 'twenty-ui/input';
 import { IconArrowsVertical } from 'twenty-ui/display';
+import { themeCssVariables } from 'twenty-ui/theme-constants';

 const StyledButtonContainer = styled.div`
-  border-bottom: 1px solid ${({ theme }) => theme.border.color.light};
+  border-bottom: 1px solid ${themeCssVariables.border.color.light};
  padding: 16px 24px;
 `;

@@ -1,4 +1,4 @@
-import styled from '@emotion/styled';
+import { styled } from '@linaria/react';
 import { useEffect, useMemo } from 'react';

 import { CustomResolverFetchMoreLoader } from '@/activities/components/CustomResolverFetchMoreLoader';
@@ -14,6 +14,7 @@ import { ConnectedAccountProvider } from 'twenty-shared/types';
 import { assertUnreachable, isDefined } from 'twenty-shared/utils';
 import { IconArrowBackUp } from 'twenty-ui/display';
 import { Button } from 'twenty-ui/input';
+import { themeCssVariables } from 'twenty-ui/theme-constants';

 const StyledWrapper = styled.div`
  display: flex;
@@ -31,11 +32,11 @@ const StyledContainer = styled.div`
 `;

 const StyledButtonContainer = styled.div`
-  background: ${({ theme }) => theme.background.secondary};
-  border-top: 1px solid ${({ theme }) => theme.border.color.light};
+  background: ${themeCssVariables.background.secondary};
+  border-top: 1px solid ${themeCssVariables.border.color.light};
  display: flex;
  justify-content: flex-end;
-  padding: ${({ theme }) => theme.spacing(2)};
+  padding: ${themeCssVariables.spacing[2]};
  width: 100%;
  box-sizing: border-box;
 `;
@@ -5,7 +5,7 @@ import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/Drop
 import { DropdownMenuSearchInput } from '@/ui/layout/dropdown/components/DropdownMenuSearchInput';
 import { DropdownMenuSeparator } from '@/ui/layout/dropdown/components/DropdownMenuSeparator';
 import { useCloseDropdown } from '@/ui/layout/dropdown/hooks/useCloseDropdown';
-import styled from '@emotion/styled';
+import { styled } from '@linaria/react';
 import { useLingui } from '@lingui/react/macro';
 import { isNonEmptyString } from '@sniptt/guards';
 import { useState } from 'react';
@@ -16,11 +16,12 @@ import {
  MenuItemSelectColor,
 } from 'twenty-ui/navigation';
 import { MAIN_COLOR_NAMES, type ThemeColor } from 'twenty-ui/theme';
+import { themeCssVariables } from 'twenty-ui/theme-constants';

 const NAVIGATION_MENU_ITEM_COLOR_DROPDOWN_ID = 'navigation-menu-item-color';

 const StyledMenuStyleText = styled.span`
-  color: ${({ theme }) => theme.font.color.light};
+  color: ${themeCssVariables.font.color.light};
  font-size: 13px;
 `;

@@ -21,21 +21,22 @@ import { parseThemeColor } from '@/navigation-menu-item/utils/parseThemeColor';
 import { SelectableListItem } from '@/ui/layout/selectable-list/components/SelectableListItem';
 import { useAtomStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomStateValue';
 import { ViewKey } from '@/views/types/ViewKey';
-import styled from '@emotion/styled';
+import { styled } from '@linaria/react';
 import { useLingui } from '@lingui/react/macro';
 import { useState } from 'react';
 import { isDefined } from 'twenty-shared/utils';
 import { IconPlus } from 'twenty-ui/display';
+import { themeCssVariables } from 'twenty-ui/theme-constants';

 const ADD_ITEM_TO_FOLDER_ACTION_ID = 'add-item-to-folder';

 const StyledCommandMenuPlaceholder = styled.p`
-  color: ${({ theme }) => theme.font.color.tertiary};
-  font-size: ${({ theme }) => theme.font.size.sm};
+  color: ${themeCssVariables.font.color.tertiary};
+  font-size: ${themeCssVariables.font.size.sm};
 `;

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

 export const CommandMenuNavigationMenuItemEditPage = () => {
@@ -1,4 +1,3 @@
-import { useTheme } from '@emotion/react';
 import { useLingui } from '@lingui/react/macro';
 import {
  Avatar,
@@ -19,6 +18,8 @@ import { useAddLinkToNavigationMenu } from '@/command-menu/pages/navigation-menu
 import { NavigationMenuItemStyleIcon } from '@/navigation-menu-item/components/NavigationMenuItemStyleIcon';
 import { NavigationMenuItemType } from '@/navigation-menu-item/constants/NavigationMenuItemType';
 import { SelectableListItem } from '@/ui/layout/selectable-list/components/SelectableListItem';
+import { useContext } from 'react';
+import { ThemeContext } from 'twenty-ui/theme';

 type CommandMenuNewSidebarItemMainMenuProps = {
  onSelectObject: () => void;
@@ -32,7 +33,7 @@ export const CommandMenuNewSidebarItemMainMenu = ({
  onSelectRecord,
 }: CommandMenuNewSidebarItemMainMenuProps) => {
  const { t } = useLingui();
-  const theme = useTheme();
+  const { theme } = useContext(ThemeContext);
  const { handleAddFolder } = useAddFolderToNavigationMenu();
  const { handleAddLink } = useAddLinkToNavigationMenu();

@@ -16,16 +16,17 @@ import { currentRecordFiltersComponentState } from '@/object-record/record-filte
 import { InputLabel } from '@/ui/input/components/InputLabel';
 import { useAtomComponentStateCallbackState } from '@/ui/utilities/state/jotai/hooks/useAtomComponentStateCallbackState';
 import { useStore } from 'jotai';
-import styled from '@emotion/styled';
+import { styled } from '@linaria/react';
 import { t } from '@lingui/core/macro';
+import { themeCssVariables } from 'twenty-ui/theme-constants';

 const StyledChartFiltersPageContainer = styled.div`
  display: flex;
  flex-direction: column;

-  gap: ${({ theme }) => theme.spacing(2)};
+  gap: ${themeCssVariables.spacing[2]};

-  padding: ${({ theme }) => theme.spacing(3)};
+  padding: ${themeCssVariables.spacing[3]};
 `;

 export type ChartFiltersSettingsProps = {
@@ -15,7 +15,7 @@ import { shouldHideChartSetting } from '@/command-menu/pages/page-layout/utils/s
 import { useObjectMetadataItems } from '@/object-metadata/hooks/useObjectMetadataItems';
 import { hasWidgetTooManyGroupsComponentState } from '@/page-layout/widgets/graph/states/hasWidgetTooManyGroupsComponentState';
 import { useAtomComponentState } from '@/ui/utilities/state/jotai/hooks/useAtomComponentState';
-import styled from '@emotion/styled';
+import { styled } from '@linaria/react';
 import { t } from '@lingui/core/macro';
 import { isFieldMetadataDateKind } from 'twenty-shared/utils';

@@ -1,11 +1,12 @@
 import { GRAPH_TYPE_INFORMATION } from '@/command-menu/pages/page-layout/constants/GraphTypeInformation';
 import { useIsFeatureEnabled } from '@/workspace/hooks/useIsFeatureEnabled';
-import styled from '@emotion/styled';
+import { styled } from '@linaria/react';
 import { FeatureFlagKey } from '~/generated-metadata/graphql';

 import { GraphType } from '@/command-menu/pages/page-layout/types/GraphType';
 import { t } from '@lingui/core/macro';
 import { MenuPicker } from 'twenty-ui/navigation';
+import { themeCssVariables } from 'twenty-ui/theme-constants';

 const graphTypeOptions = [
  GraphType.VERTICAL_BAR,
@@ -19,7 +20,7 @@ const graphTypeOptions = [
 const StyledChartTypeSelectionContainer = styled.div`
  display: flex;
  flex-direction: row;
-  gap: ${({ theme }) => theme.spacing(2)};
+  gap: ${themeCssVariables.spacing[2]};
 `;

 type ChartTypeSelectionSectionProps = {
@@ -6,7 +6,7 @@ import { pageLayoutDraftComponentState } from '@/page-layout/states/pageLayoutDr
 import { pageLayoutEditingWidgetIdComponentState } from '@/page-layout/states/pageLayoutEditingWidgetIdComponentState';
 import { WidgetComponentInstanceContext } from '@/page-layout/widgets/states/contexts/WidgetComponentInstanceContext';
 import { useAtomComponentStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomComponentStateValue';
-import styled from '@emotion/styled';
+import { styled } from '@linaria/react';
 import { isDefined } from 'twenty-shared/utils';

 const StyledContainer = styled.div`
@@ -5,13 +5,14 @@ import { useWidgetInEditMode } from '@/command-menu/pages/page-layout/hooks/useW
 import { useTemporaryFieldsConfiguration } from '@/page-layout/hooks/useTemporaryFieldsConfiguration';
 import { FieldsConfigurationEditor } from '@/page-layout/widgets/fields/components/FieldsConfigurationEditor';
 import { FieldsWidgetGroupsDraftInitializationEffect } from '@/page-layout/widgets/fields/components/FieldsWidgetGroupsDraftInitializationEffect';
-import styled from '@emotion/styled';
+import { styled } from '@linaria/react';
 import { t } from '@lingui/core/macro';
 import { isDefined } from 'twenty-shared/utils';
 import {
  type FieldsConfiguration,
  WidgetConfigurationType,
 } from '~/generated-metadata/graphql';
+import { themeCssVariables } from 'twenty-ui/theme-constants';

 const StyledOuterContainer = styled.div`
  display: flex;
@@ -23,8 +24,8 @@ const StyledContainer = styled.div`
  display: flex;
  flex: 1;
  flex-direction: column;
-  gap: ${({ theme }) => theme.spacing(3)};
-  padding: ${({ theme }) => theme.spacing(2)};
+  gap: ${themeCssVariables.spacing[3]};
+  padding: ${themeCssVariables.spacing[2]};
  overflow-y: auto;
 `;

@@ -7,7 +7,7 @@ import { usePageLayoutIdForRecordPageLayoutFromContextStoreTargetedRecord } from
 import { useWidgetInEditMode } from '@/command-menu/pages/page-layout/hooks/useWidgetInEditMode';
 import { useFieldsWidgetGroups } from '@/page-layout/widgets/fields/hooks/useFieldsWidgetGroups';
 import { SelectableListItem } from '@/ui/layout/selectable-list/components/SelectableListItem';
-import styled from '@emotion/styled';
+import { styled } from '@linaria/react';
 import { useLingui } from '@lingui/react/macro';
 import { CommandMenuPages } from 'twenty-shared/types';
 import { isDefined } from 'twenty-shared/utils';
@@ -3,12 +3,13 @@ import { usePageLayoutIdFromContextStoreTargetedRecord } from '@/command-menu/pa
 import { useWidgetInEditMode } from '@/command-menu/pages/page-layout/hooks/useWidgetInEditMode';
 import { FormTextFieldInput } from '@/object-record/record-field/ui/form-types/components/FormTextFieldInput';
 import { useUpdatePageLayoutWidget } from '@/page-layout/hooks/useUpdatePageLayoutWidget';
-import styled from '@emotion/styled';
+import { styled } from '@linaria/react';
 import { t } from '@lingui/core/macro';
 import { isNonEmptyString, isString } from '@sniptt/guards';
 import { useState } from 'react';
 import { isDefined, isValidUrl } from 'twenty-shared/utils';
 import { WidgetConfigurationType } from '~/generated-metadata/graphql';
+import { themeCssVariables } from 'twenty-ui/theme-constants';

 const StyledOuterContainer = styled.div`
  display: flex;
@@ -20,8 +21,8 @@ const StyledContainer = styled.div`
  display: flex;
  flex: 1;
  flex-direction: column;
-  gap: ${({ theme }) => theme.spacing(3)};
-  padding: ${({ theme }) => theme.spacing(2)};
+  gap: ${themeCssVariables.spacing[3]};
+  padding: ${themeCssVariables.spacing[2]};
 `;

 export const CommandMenuPageLayoutIframeSettings = () => {
@@ -2,11 +2,12 @@ import { CHART_SETTINGS_PALETTE_COLOR_GROUP_COUNT } from '@/command-menu/pages/p
 import { createGraphColorRegistry } from '@/page-layout/widgets/graph/utils/createGraphColorRegistry';
 import { generateGroupColor } from '@/page-layout/widgets/graph/utils/generateGroupColor';
 import { SelectableListItem } from '@/ui/layout/selectable-list/components/SelectableListItem';
-import { useTheme } from '@emotion/react';
-import styled from '@emotion/styled';
+import { styled } from '@linaria/react';
 import { ColorSample } from 'twenty-ui/display';
 import { MenuItemSelect } from 'twenty-ui/navigation';
-import { type ThemeColor } from 'twenty-ui/theme';
+import { type ThemeColor, ThemeContext } from 'twenty-ui/theme';
+import { themeCssVariables } from 'twenty-ui/theme-constants';
+import { useContext } from 'react';

 type ChartColorGradientOptionProps = {
  colorOption: {
@@ -22,7 +23,7 @@ type ChartColorGradientOptionProps = {
 const StyledColorSamplesContainer = styled.div`
  align-items: center;
  display: flex;
-  gap: ${({ theme }) => theme.spacing(0.5)};
+  gap: ${themeCssVariables.spacing[0.5]};
 `;

 export const ChartColorGradientOption = ({
@@ -32,7 +33,7 @@ export const ChartColorGradientOption = ({
  onSelectColor,
 }: ChartColorGradientOptionProps) => {
  const colorName = colorOption.colorName as ThemeColor;
-  const theme = useTheme();
+  const { theme } = useContext(ThemeContext);
  const colorRegistry = createGraphColorRegistry(theme);

  const colorSamples = (
@@ -2,13 +2,14 @@ import { CHART_SETTINGS_PALETTE_COLOR_GROUP_COUNT } from '@/command-menu/pages/p
 import { createGraphColorRegistry } from '@/page-layout/widgets/graph/utils/createGraphColorRegistry';
 import { getColorSchemeByIndex } from '@/page-layout/widgets/graph/utils/getColorSchemeByIndex';
 import { SelectableListItem } from '@/ui/layout/selectable-list/components/SelectableListItem';
-import { useTheme } from '@emotion/react';
-import styled from '@emotion/styled';
+import { styled } from '@linaria/react';
 import { t } from '@lingui/core/macro';
 import { ColorSample } from 'twenty-ui/display';
 import { MenuItemSelect } from 'twenty-ui/navigation';
-import { type ThemeColor } from 'twenty-ui/theme';
+import { type ThemeColor, ThemeContext } from 'twenty-ui/theme';
 import { getMainColorNameFromPaletteColorName } from 'twenty-ui/utilities';
+import { themeCssVariables } from 'twenty-ui/theme-constants';
+import { useContext } from 'react';

 type ChartColorPaletteOptionProps = {
  selectedItemId: string | null;
@@ -19,7 +20,7 @@ type ChartColorPaletteOptionProps = {
 const StyledColorSamplesContainer = styled.div`
  align-items: center;
  display: flex;
-  gap: ${({ theme }) => theme.spacing(0.5)};
+  gap: ${themeCssVariables.spacing[0.5]};
 `;

 export const ChartColorPaletteOption = ({
@@ -27,7 +28,7 @@ export const ChartColorPaletteOption = ({
  currentColor,
  onSelectColor,
 }: ChartColorPaletteOptionProps) => {
-  const theme = useTheme();
+  const { theme } = useContext(ThemeContext);

  const colorRegistry = createGraphColorRegistry(theme);

@@ -5,7 +5,7 @@ import { ContextStoreComponentInstanceContext } from '@/context-store/states/con
 import { RecordComponentInstanceContextsWrapper } from '@/object-record/components/RecordComponentInstanceContextsWrapper';
 import { MergeRecordsContainer } from '@/object-record/record-merge/components/MergeRecordsContainer';
 import { useComponentInstanceStateContext } from '@/ui/utilities/state/component-state/hooks/useComponentInstanceStateContext';
-import styled from '@emotion/styled';
+import { styled } from '@linaria/react';

 const StyledRightDrawerRecord = styled.div`
  height: 100%;
@@ -11,7 +11,7 @@ import { useRecordShowPage } from '@/object-record/record-show/hooks/useRecordSh
 import { recordStoreFamilySelector } from '@/object-record/record-store/states/selectors/recordStoreFamilySelector';
 import { useComponentInstanceStateContext } from '@/ui/utilities/state/component-state/hooks/useComponentInstanceStateContext';
 import { useAtomComponentStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomComponentStateValue';
-import styled from '@emotion/styled';
+import { styled } from '@linaria/react';
 import { useAtomFamilySelectorValue } from '@/ui/utilities/state/jotai/hooks/useAtomFamilySelectorValue';

 const StyledRightDrawerRecord = styled.div<{
@@ -3,7 +3,7 @@ import { useContextStoreObjectMetadataItemOrThrow } from '@/context-store/hooks/

 import { UpdateMultipleRecordsContainer } from '@/object-record/record-update-multiple/components/UpdateMultipleRecordsContainer';
 import { useComponentInstanceStateContext } from '@/ui/utilities/state/component-state/hooks/useComponentInstanceStateContext';
-import styled from '@emotion/styled';
+import { styled } from '@linaria/react';

 const StyledRightDrawerRecord = styled.div`
  height: 100%;
@@ -1,11 +1,12 @@
 import { SKELETON_LOADER_HEIGHT_SIZES } from '@/activities/components/SkeletonLoader';
 import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
-import { useTheme } from '@emotion/react';
-import styled from '@emotion/styled';
-import { lazy, Suspense } from 'react';
+import { styled } from '@linaria/react';
+import { Suspense, lazy, useContext } from 'react';
+import { ThemeContext } from 'twenty-ui/theme';
 import Skeleton, { SkeletonTheme } from 'react-loading-skeleton';
 import { viewableRichTextComponentState } from '@/command-menu/pages/rich-text-page/states/viewableRichTextComponentState';
 import { useAtomStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomStateValue';
+import { themeCssVariables } from 'twenty-ui/theme-constants';

 const ActivityRichTextEditor = lazy(() =>
  import('@/activities/components/ActivityRichTextEditor').then((module) => ({
@@ -15,13 +16,13 @@ const ActivityRichTextEditor = lazy(() =>

 const StyledContainer = styled.div`
  box-sizing: border-box;
-  margin: ${({ theme }) => theme.spacing(4)} ${({ theme }) => theme.spacing(-2)};
+  margin: ${themeCssVariables.spacing[4]} -8px;
  padding-inline: 44px 0px;
  width: 100%;
 `;

 const LoadingSkeleton = () => {
-  const theme = useTheme();
+  const { theme } = useContext(ThemeContext);

  return (
    <SkeletonTheme
@@ -10,12 +10,13 @@ import { HUMAN_INPUT_ACTIONS } from '@/workflow/workflow-steps/workflow-actions/
 import { RECORD_ACTIONS } from '@/workflow/workflow-steps/workflow-actions/constants/RecordActions';
 import { getActionIconColorOrThrow } from '@/workflow/workflow-steps/workflow-actions/utils/getActionIconColorOrThrow';
 import { useIsFeatureEnabled } from '@/workspace/hooks/useIsFeatureEnabled';
-import { useTheme } from '@emotion/react';
 import { useAtomStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomStateValue';
 import { useLingui } from '@lingui/react/macro';
 import { IconFunction } from 'twenty-ui/display';
 import { MenuItem } from 'twenty-ui/navigation';
 import { FeatureFlagKey } from '~/generated-metadata/graphql';
+import { useContext } from 'react';
+import { ThemeContext } from 'twenty-ui/theme';

 export type WorkflowActionSelection = {
  type: WorkflowActionType;
@@ -31,7 +32,7 @@ export const CommandMenuWorkflowSelectAction = ({
  const isDraftEmailEnabled = useIsFeatureEnabled(
    FeatureFlagKey.IS_DRAFT_EMAIL_ENABLED,
  );
-  const theme = useTheme();
+  const { theme } = useContext(ThemeContext);

  const { t } = useLingui();

@@ -1,8 +1,9 @@
 import { type WorkflowActionType } from '@/workflow/types/Workflow';
 import { getActionIconColorOrThrow } from '@/workflow/workflow-steps/workflow-actions/utils/getActionIconColorOrThrow';
-import { useTheme } from '@emotion/react';
 import { useIcons } from 'twenty-ui/display';
 import { MenuItem } from 'twenty-ui/navigation';
+import { useContext } from 'react';
+import { ThemeContext } from 'twenty-ui/theme';

 type Action = {
  defaultLabel: string;
@@ -17,7 +18,7 @@ export const WorkflowActionMenuItems = ({
  actions: Action[];
  onClick: (actionType: WorkflowActionType) => void;
 }) => {
-  const theme = useTheme();
+  const { theme } = useContext(ThemeContext);
  const { getIcon } = useIcons();

  return (
@@ -4,7 +4,7 @@ import { workflowSelectedNodeComponentState } from '@/workflow/workflow-diagram/
 import { WorkflowStepDetail } from '@/workflow/workflow-steps/components/WorkflowStepDetail';
 import { useUpdateStep } from '@/workflow/workflow-steps/hooks/useUpdateStep';
 import { useUpdateWorkflowVersionTrigger } from '@/workflow/workflow-trigger/hooks/useUpdateWorkflowVersionTrigger';
-import styled from '@emotion/styled';
+import { styled } from '@linaria/react';
 import { isDefined } from 'twenty-shared/utils';

 const StyledContainer = styled.div`
@@ -22,11 +22,12 @@ import {
 } from '@/workflow/workflow-steps/types/WorkflowRunTabId';
 import { getWorkflowRunStepExecutionStatus } from '@/workflow/workflow-steps/utils/getWorkflowRunStepExecutionStatus';
 import { WorkflowIteratorSubStepSwitcher } from '@/workflow/workflow-steps/workflow-actions/iterator-action/components/WorkflowIteratorSubStepSwitcher';
-import styled from '@emotion/styled';
+import { styled } from '@linaria/react';
 import { isNull } from '@sniptt/guards';
 import { t } from '@lingui/core/macro';
 import { isDefined } from 'twenty-shared/utils';
 import { IconLogin2, IconLogout, IconStepInto } from 'twenty-ui/display';
+import { themeCssVariables } from 'twenty-ui/theme-constants';

 const StyledContainer = styled.div`
  display: flex;
@@ -35,8 +36,8 @@ const StyledContainer = styled.div`
 `;

 const StyledTabList = styled(TabList)`
-  background-color: ${({ theme }) => theme.background.secondary};
-  padding-left: ${({ theme }) => theme.spacing(2)};
+  background-color: ${themeCssVariables.background.secondary};
+  padding-left: ${themeCssVariables.spacing[2]};
 `;

 type TabId = WorkflowRunTabIdType;
@@ -2,7 +2,7 @@ import { useAtomComponentStateValue } from '@/ui/utilities/state/jotai/hooks/use
 import { useFlowOrThrow } from '@/workflow/hooks/useFlowOrThrow';
 import { workflowSelectedNodeComponentState } from '@/workflow/workflow-diagram/states/workflowSelectedNodeComponentState';
 import { WorkflowStepDetail } from '@/workflow/workflow-steps/components/WorkflowStepDetail';
-import styled from '@emotion/styled';
+import { styled } from '@linaria/react';
 import { isDefined } from 'twenty-shared/utils';

 const StyledContainer = styled.div`
@@ -14,12 +14,13 @@ import { DATABASE_TRIGGER_TYPES } from '@/workflow/workflow-trigger/constants/Da
 import { OTHER_TRIGGER_TYPES } from '@/workflow/workflow-trigger/constants/OtherTriggerTypes';
 import { useUpdateWorkflowVersionTrigger } from '@/workflow/workflow-trigger/hooks/useUpdateWorkflowVersionTrigger';
 import { getTriggerDefaultDefinition } from '@/workflow/workflow-trigger/utils/getTriggerDefaultDefinition';
-import { useTheme } from '@emotion/react';
 import { t } from '@lingui/core/macro';
 import { isDefined } from 'twenty-shared/utils';
 import { TRIGGER_STEP_ID } from 'twenty-shared/workflow';
 import { useIcons } from 'twenty-ui/display';
 import { MenuItem } from 'twenty-ui/navigation';
+import { useContext } from 'react';
+import { ThemeContext } from 'twenty-ui/theme';

 export const CommandMenuWorkflowSelectTriggerTypeContent = () => {
  const { getIcon } = useIcons();
@@ -72,7 +73,7 @@ export const CommandMenuWorkflowSelectTriggerTypeContent = () => {
    };
  };

-  const theme = useTheme();
+  const { theme } = useContext(ThemeContext);

  return (
    <RightDrawerStepListContainer>