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
@@ -17,7 +17,7 @@ import { assertFieldWidgetOrThrow } from '@/page-layout/widgets/field/utils/asse
 import { useLayoutRenderingContext } from '@/ui/layout/contexts/LayoutRenderingContext';
 import { useTargetRecord } from '@/ui/layout/contexts/useTargetRecord';
 import { RightDrawerProvider } from '@/ui/layout/right-drawer/contexts/RightDrawerContext';
-import styled from '@emotion/styled';
+import { styled } from '@linaria/react';
 import { t } from '@lingui/core/macro';
 import { useAtomFamilySelectorValue } from '@/ui/utilities/state/jotai/hooks/useAtomFamilySelectorValue';
 import { isDefined } from 'twenty-shared/utils';
@@ -18,7 +18,7 @@ import { useCurrentWidget } from '@/page-layout/widgets/hooks/useCurrentWidget';
 import { getObjectPermissionsFromMapByObjectMetadataId } from '@/settings/roles/role-permissions/objects-permissions/utils/getObjectPermissionsFromMapByObjectMetadataId';
 import { RightDrawerProvider } from '@/ui/layout/right-drawer/contexts/RightDrawerContext';
 import { useAtomComponentState } from '@/ui/utilities/state/jotai/hooks/useAtomComponentState';
-import styled from '@emotion/styled';
+import { styled } from '@linaria/react';

 const StyledContainer = styled.div`
  width: 100%;
@@ -4,17 +4,15 @@ import { FieldContext } from '@/object-record/record-field/ui/contexts/FieldCont
 import { useInlineCell } from '@/object-record/record-inline-cell/hooks/useInlineCell';
 import { useOpenFieldWidgetFieldInputEditMode } from '@/page-layout/widgets/field/hooks/useOpenFieldWidgetFieldInputEditMode';
 import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
-import { css } from '@emotion/react';
-import styled from '@emotion/styled';
+import { styled } from '@linaria/react';
 import { IconPencil } from 'twenty-ui/display';
 import { LightIconButton } from 'twenty-ui/input';
+import { themeCssVariables } from 'twenty-ui/theme-constants';

-const StyledEditButton = styled(LightIconButton)<{ isMobile: boolean }>`
-  ${({ theme, isMobile }) => css`
-    opacity: ${isMobile ? 1 : 0};
-    pointer-events: none;
-    transition: opacity ${theme.animation.duration.instant}s ease;
-  `}
+const StyledEditButtonWrapper = styled.div<{ isMobile: boolean }>`
+  opacity: ${({ isMobile }) => (isMobile ? '1' : '0')};
+  pointer-events: none;
+  transition: opacity ${themeCssVariables.animation.duration.instant}s ease;

  .widget:hover & {
    opacity: 1;
@@ -37,11 +35,12 @@ export const FieldWidgetEditAction = () => {
  };

  return (
-    <StyledEditButton
-      Icon={IconPencil}
-      accent="secondary"
-      onClick={handleClick}
-      isMobile={isMobile}
-    />
+    <StyledEditButtonWrapper isMobile={isMobile}>
+      <LightIconButton
+        Icon={IconPencil}
+        accent="secondary"
+        onClick={handleClick}
+      />
+    </StyledEditButtonWrapper>
  );
 };
@@ -1,10 +1,11 @@
-import styled from '@emotion/styled';
+import { styled } from '@linaria/react';
 import { useContext } from 'react';

 import { FieldContext } from '@/object-record/record-field/ui/contexts/FieldContext';
 import { useFieldFocus } from '@/object-record/record-field/ui/hooks/useFieldFocus';
 import { useRecordInlineCellContext } from '@/object-record/record-inline-cell/components/RecordInlineCellContext';
 import { RecordInlineCellValue } from '@/object-record/record-inline-cell/components/RecordInlineCellValue';
+import { themeCssVariables } from 'twenty-ui/theme-constants';

 const StyledValueContainer = styled.div<{ readonly: boolean }>`
  display: flex;
@@ -18,7 +19,7 @@ const StyledInlineCellBaseContainer = styled.div<{ readonly: boolean }>`
  width: 100%;
  display: flex;
  height: fit-content;
-  gap: ${({ theme }) => theme.spacing(1)};
+  gap: ${themeCssVariables.spacing[1]};
  user-select: none;
  align-items: center;
  cursor: ${({ readonly }) => (readonly ? 'default' : 'pointer')};
@@ -1,4 +1,4 @@
-import styled from '@emotion/styled';
+import { styled } from '@linaria/react';
 import { Fragment, useState } from 'react';

 import { useObjectMetadataItem } from '@/object-metadata/hooks/useObjectMetadataItem';
@@ -25,9 +25,10 @@ import { useCurrentWidget } from '@/page-layout/widgets/hooks/useCurrentWidget';
 import { useTargetRecord } from '@/ui/layout/contexts/useTargetRecord';
 import { RightDrawerProvider } from '@/ui/layout/right-drawer/contexts/RightDrawerContext';
 import { isDefined } from 'twenty-shared/utils';
+import { themeCssVariables } from 'twenty-ui/theme-constants';

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

 type FieldWidgetMorphRelationCardProps = {
@@ -3,17 +3,18 @@ import { useGetMorphRelationRelatedRecordsWithObjectNameSingular } from '@/objec
 import { type FieldDefinition } from '@/object-record/record-field/ui/types/FieldDefinition';
 import { type FieldMorphRelationMetadata } from '@/object-record/record-field/ui/types/FieldMetadata';
 import { RightDrawerProvider } from '@/ui/layout/right-drawer/contexts/RightDrawerContext';
-import styled from '@emotion/styled';
+import { styled } from '@linaria/react';
+import { themeCssVariables } from 'twenty-ui/theme-constants';

 const StyledContainer = styled.div`
  box-sizing: border-box;
-  padding: ${({ theme }) => theme.spacing(1)};
+  padding: ${themeCssVariables.spacing[1]};
  width: 100%;
 `;

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

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

 import { useObjectMetadataItem } from '@/object-metadata/hooks/useObjectMetadataItem';
@@ -23,9 +23,10 @@ import { useCurrentWidget } from '@/page-layout/widgets/hooks/useCurrentWidget';
 import { useTargetRecord } from '@/ui/layout/contexts/useTargetRecord';
 import { RightDrawerProvider } from '@/ui/layout/right-drawer/contexts/RightDrawerContext';
 import { isDefined } from 'twenty-shared/utils';
+import { themeCssVariables } from 'twenty-ui/theme-constants';

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

 type FieldWidgetRelationCardProps = {
@@ -21,11 +21,11 @@ import { getRecordFieldCardRelationPickerDropdownId } from '@/object-record/reco
 import { isDropdownOpenComponentState } from '@/ui/layout/dropdown/states/isDropdownOpenComponentState';
 import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
 import { useAtomComponentStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomComponentStateValue';
-import { css } from '@emotion/react';
-import styled from '@emotion/styled';
+import { styled } from '@linaria/react';
 import { CustomError } from 'twenty-shared/utils';
 import { IconPencil } from 'twenty-ui/display';
 import { LightIconButton } from 'twenty-ui/input';
+import { themeCssVariables } from 'twenty-ui/theme-constants';

 type FieldWidgetRelationEditActionProps = {
  fieldDefinition:
@@ -34,17 +34,17 @@ type FieldWidgetRelationEditActionProps = {
  recordId: string;
 };

-const StyledEditButton = styled(LightIconButton)<{
+const StyledEditButtonWrapper = styled.div<{
  isDropdownOpen: boolean;
  isMobile: boolean;
 }>`
-  ${({ isDropdownOpen, isMobile, theme }) =>
-    !isDropdownOpen &&
-    css`
-      opacity: ${isMobile ? 1 : 0};
-      pointer-events: none;
-      transition: opacity ${theme.animation.duration.instant}s ease;
-    `}
+  opacity: ${({ isDropdownOpen, isMobile }) =>
+    isDropdownOpen ? '1' : isMobile ? '1' : '0'};
+  pointer-events: ${({ isDropdownOpen }) => (isDropdownOpen ? 'auto' : 'none')};
+  transition: ${({ isDropdownOpen }) =>
+    isDropdownOpen
+      ? 'none'
+      : `opacity ${themeCssVariables.animation.duration.instant}s ease`};

  .widget:hover & {
    opacity: 1;
@@ -107,12 +107,12 @@ export const FieldWidgetRelationEditAction = ({
  const isMobile = useIsMobile();

  const dropdownTriggerClickableComponent = (
-    <StyledEditButton
+    <StyledEditButtonWrapper
      isDropdownOpen={isDropdownOpen}
      isMobile={isMobile}
-      Icon={IconPencil}
-      accent="secondary"
-    />
+    >
+      <LightIconButton Icon={IconPencil} accent="secondary" />
+    </StyledEditButtonWrapper>
  );

  return (
@@ -2,18 +2,19 @@ import { RecordChip } from '@/object-record/components/RecordChip';
 import { type FieldDefinition } from '@/object-record/record-field/ui/types/FieldDefinition';
 import { type FieldRelationMetadata } from '@/object-record/record-field/ui/types/FieldMetadata';
 import { RightDrawerProvider } from '@/ui/layout/right-drawer/contexts/RightDrawerContext';
-import styled from '@emotion/styled';
+import { styled } from '@linaria/react';
 import { isDefined } from 'twenty-shared/utils';
+import { themeCssVariables } from 'twenty-ui/theme-constants';

 const StyledContainer = styled.div`
  box-sizing: border-box;
-  padding: ${({ theme }) => theme.spacing(1)};
+  padding: ${themeCssVariables.spacing[1]};
  width: 100%;
 `;

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

@@ -1,7 +1,8 @@
-import styled from '@emotion/styled';
+import { styled } from '@linaria/react';
 import { t } from '@lingui/core/macro';

 import { IconChevronDown } from 'twenty-ui/display';
+import { themeCssVariables } from 'twenty-ui/theme-constants';

 type FieldWidgetShowMoreButtonProps = {
  remainingCount: number;
@@ -12,20 +13,20 @@ const StyledButton = styled.button`
  display: flex;
  width: 100%;
  align-items: center;
-  gap: ${({ theme }) => theme.spacing(1)};
+  gap: ${themeCssVariables.spacing[1]};
  height: 24px;
  box-sizing: border-box;
  padding: 0;
  border: none;
  background: transparent;
-  color: ${({ theme }) => theme.font.color.tertiary};
-  font-family: ${({ theme }) => theme.font.family};
-  font-weight: ${({ theme }) => theme.font.weight.regular};
+  color: ${themeCssVariables.font.color.tertiary};
+  font-family: ${themeCssVariables.font.family};
+  font-weight: ${themeCssVariables.font.weight.regular};
  cursor: pointer;
-  transition: color ${({ theme }) => theme.animation.duration.instant}s ease;
+  transition: color ${themeCssVariables.animation.duration.instant}s ease;

  &:hover {
-    color: ${({ theme }) => theme.font.color.primary};
+    color: ${themeCssVariables.font.color.primary};
  }
 `;