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
@@ -15,7 +15,7 @@ import { type DropdownOffset } from '@/ui/layout/dropdown/types/DropdownOffset';
 import { type GlobalHotkeysConfig } from '@/ui/utilities/hotkey/types/GlobalHotkeysConfig';
 import { useAtomComponentStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomComponentStateValue';
 import { useSetAtomComponentState } from '@/ui/utilities/state/jotai/hooks/useSetAtomComponentState';
-import styled from '@emotion/styled';
+import { styled } from '@linaria/react';
 import {
  type Placement,
  autoUpdate,
@@ -1,5 +1,5 @@
 import { GenericDropdownContentWidth } from '@/ui/layout/dropdown/constants/GenericDropdownContentWidth';
-import styled from '@emotion/styled';
+import { styled } from '@linaria/react';
 import { type Ref, forwardRef } from 'react';

 const StyledInternalBaseDropdownContent = styled.div<{
@@ -1,26 +1,27 @@
-import styled from '@emotion/styled';
+import { styled } from '@linaria/react';
 import { type ComponentProps, type MouseEvent } from 'react';
+import { themeCssVariables } from 'twenty-ui/theme-constants';

 const StyledHeader = styled.li`
  align-items: center;
-  color: ${({ theme }) => theme.font.color.primary};
+  color: ${themeCssVariables.font.color.primary};
  cursor: ${({ onClick }) => (onClick ? 'pointer' : 'default')};
  display: flex;
-  font-size: ${({ theme, onClick }) =>
-    onClick ? theme.font.size.sm : theme.font.size.md};
-  font-weight: ${({ theme }) => theme.font.weight.medium};
-  border-top-left-radius: ${({ theme }) => theme.border.radius.sm};
-  border-top-right-radius: ${({ theme }) => theme.border.radius.sm};
-  padding: ${({ theme }) => theme.spacing(1)};
-  border-bottom: 1px solid ${({ theme }) => theme.border.color.light};
+  font-size: ${({ onClick }) =>
+    onClick ? themeCssVariables.font.size.sm : themeCssVariables.font.size.md};
+  font-weight: ${themeCssVariables.font.weight.medium};
+  border-top-left-radius: ${themeCssVariables.border.radius.sm};
+  border-top-right-radius: ${themeCssVariables.border.radius.sm};
+  padding: ${themeCssVariables.spacing[1]};
+  border-bottom: 1px solid ${themeCssVariables.border.color.light};

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

  user-select: none;

  &:hover {
-    background: ${({ theme, onClick }) =>
-      onClick ? theme.background.transparent.light : 'none'};
+    background: ${({ onClick }) =>
+      onClick ? themeCssVariables.background.transparent.light : 'none'};
  }

  flex-shrink: 0;
@@ -28,20 +29,20 @@ const StyledHeader = styled.li`

 const StyledChildrenWrapper = styled.span`
  overflow: hidden;
-  padding: 0 ${({ theme }) => theme.spacing(1)};
+  padding: 0 ${themeCssVariables.spacing[1]};
  white-space: nowrap;
  text-overflow: ellipsis;
 `;

 const StyledEndComponent = styled.div`
  display: inline-flex;
-  color: ${({ theme }) => theme.font.color.tertiary};
+  color: ${themeCssVariables.font.color.tertiary};
  margin-left: auto;
  margin-right: 0;

  & > svg {
-    height: ${({ theme }) => theme.icon.size.md}px;
-    width: ${({ theme }) => theme.icon.size.md}px;
+    height: ${themeCssVariables.icon.size.md}px;
+    width: ${themeCssVariables.icon.size.md}px;
  }
 `;

@@ -1,12 +1,13 @@
-import { type MouseEvent, type ReactElement } from 'react';
-import styled from '@emotion/styled';
-import { useTheme } from '@emotion/react';
+import { type MouseEvent, type ReactElement, useContext } from 'react';
+import { styled } from '@linaria/react';
 import {
  type Avatar,
  type AvatarProps,
  type IconComponent,
 } from 'twenty-ui/display';
 import { LightIconButton } from 'twenty-ui/input';
+import { themeCssVariables } from 'twenty-ui/theme-constants';
+import { ThemeContext } from 'twenty-ui/theme';

 const StyledNonClickableStartIcon = styled.div`
  align-items: center;
@@ -16,18 +17,18 @@ const StyledNonClickableStartIcon = styled.div`
  display: flex;
  flex-direction: row;

-  font-family: ${({ theme }) => theme.font.family};
-  font-weight: ${({ theme }) => theme.font.weight.regular};
-  gap: ${({ theme }) => theme.spacing(1)};
+  font-family: ${themeCssVariables.font.family};
+  font-weight: ${themeCssVariables.font.weight.regular};
+  gap: ${themeCssVariables.spacing[1]};
  justify-content: center;

  white-space: nowrap;
-  height: ${({ theme }) => theme.spacing(6)};
-  width: ${({ theme }) => theme.spacing(6)};
+  height: ${themeCssVariables.spacing[6]};
+  width: ${themeCssVariables.spacing[6]};
 `;

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

 export const DropdownMenuHeaderLeftComponent = ({
@@ -40,7 +41,7 @@ export const DropdownMenuHeaderLeftComponent = ({
    }
  | Record<never, never>
 )) => {
-  const theme = useTheme();
+  const { theme } = useContext(ThemeContext);

  return (
    <>
@@ -2,26 +2,28 @@ import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
 import { DropdownContent } from '@/ui/layout/dropdown/components/DropdownContent';
 import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
 import { useCloseDropdown } from '@/ui/layout/dropdown/hooks/useCloseDropdown';
-import { useTheme } from '@emotion/react';

-import styled from '@emotion/styled';
+import { styled } from '@linaria/react';
 import { IconChevronDown } from 'twenty-ui/display';
 import { type SelectOption } from 'twenty-ui/input';
 import { MenuItemSelect } from 'twenty-ui/navigation';
+import { themeCssVariables } from 'twenty-ui/theme-constants';
+import { useContext } from 'react';
+import { ThemeContext } from 'twenty-ui/theme';

 const StyledDropdownMenuInnerSelectDropdownButton = styled.div`
  align-items: center;
-  color: ${({ theme }) => theme.font.color.secondary};
+  color: ${themeCssVariables.font.color.secondary};
  display: flex;
-  font-size: ${({ theme }) => theme.font.size.sm};
+  font-size: ${themeCssVariables.font.size.sm};

-  font-weight: ${({ theme }) => theme.font.weight.medium};
-  height: ${({ theme }) => theme.spacing(7)};
+  font-weight: ${themeCssVariables.font.weight.medium};
+  height: ${themeCssVariables.spacing[7]};

  justify-content: space-between;

-  padding-left: ${({ theme }) => theme.spacing(2)};
-  padding-right: ${({ theme }) => theme.spacing(2)};
+  padding-left: ${themeCssVariables.spacing[2]};
+  padding-right: ${themeCssVariables.spacing[2]};
  width: 100%;

  box-sizing: border-box;
@@ -43,7 +45,7 @@ export const DropdownMenuInnerSelect = ({
  dropdownId,
  widthInPixels,
 }: DropdownMenuInnerSelectProps) => {
-  const theme = useTheme();
+  const { theme } = useContext(ThemeContext);

  const { closeDropdown } = useCloseDropdown();

@@ -1,5 +1,4 @@
-import { css } from '@emotion/react';
-import styled from '@emotion/styled';
+import { styled } from '@linaria/react';
 import {
  forwardRef,
  useRef,
@@ -11,6 +10,7 @@ import 'react-phone-number-input/style.css';
 import { useRegisterInputEvents } from '@/object-record/record-field/ui/meta-types/input/hooks/useRegisterInputEvents';
 import { TEXT_INPUT_STYLE } from 'twenty-ui/theme';
 import { useCombinedRefs } from '~/hooks/useCombinedRefs';
+import { themeCssVariables } from 'twenty-ui/theme-constants';

 const StyledInput = styled.input<{
  withRightComponent?: boolean;
@@ -19,16 +19,13 @@ const StyledInput = styled.input<{
  ${TEXT_INPUT_STYLE}

  box-sizing: border-box;
-  font-weight: ${({ theme }) => theme.font.weight.medium};
+  font-weight: ${themeCssVariables.font.weight.medium};
  height: 32px;
  position: relative;
  width: 100%;

-  ${({ withRightComponent }) =>
-    withRightComponent &&
-    css`
-      padding-right: 32px;
-    `}
+  padding-right: ${({ withRightComponent }) =>
+    withRightComponent ? '32px' : '0'};
 `;

 const StyledInputContainer = styled.div`
@@ -38,20 +35,20 @@ const StyledInputContainer = styled.div`
  width: 100%;

  &:not(:first-of-type) {
-    padding: ${({ theme }) => theme.spacing(1)};
+    padding: ${themeCssVariables.spacing[1]};
  }
 `;

 const StyledRightContainer = styled.div`
  position: absolute;
-  right: ${({ theme }) => theme.spacing(2)};
+  right: ${themeCssVariables.spacing[2]};
  top: 50%;
  transform: translateY(-50%);
 `;

 const StyledErrorDiv = styled.div`
-  color: ${({ theme }) => theme.color.red};
-  padding: 0 ${({ theme }) => theme.spacing(2)};
+  color: ${themeCssVariables.color.red};
+  padding: 0 ${themeCssVariables.spacing[2]};
 `;

 type HTMLInputProps = InputHTMLAttributes<HTMLInputElement>;
@@ -1,10 +1,11 @@
 import { DROPDOWN_MENU_ITEMS_CONTAINER_MAX_HEIGHT } from '@/ui/layout/dropdown/constants/DropdownMenuItemsContainerMaxHeight';
-import styled from '@emotion/styled';
+import { styled } from '@linaria/react';
+import { themeCssVariables } from 'twenty-ui/theme-constants';

 const StyledExternalContainer = styled.div<{
  maxHeight?: number;
 }>`
-  --padding: ${({ theme }) => theme.spacing(1)};
+  --padding: ${themeCssVariables.spacing[1]};

  align-items: flex-start;
  display: flex;
@@ -28,11 +29,11 @@ const StyledScrollableContainer = styled.div<{ maxHeight?: number }>`
  width: 100%;

  overflow-y: auto;
-  scrollbar-color: ${({ theme }) => theme.border.color.medium} transparent;
+  scrollbar-color: ${themeCssVariables.border.color.medium} transparent;
  scrollbar-width: 4px;

  *::-webkit-scrollbar-thumb {
-    border-radius: ${({ theme }) => theme.border.radius.sm};
+    border-radius: ${themeCssVariables.border.radius.sm};
  }
 `;

@@ -1,13 +1,14 @@
 import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react/macro';
 import { useInputFocusWithoutScrollOnMount } from '@/ui/input/hooks/useInputFocusWithoutScrollOnMount';
-import styled from '@emotion/styled';
+import { styled } from '@linaria/react';
 import { forwardRef, type InputHTMLAttributes } from 'react';
 import { TEXT_INPUT_STYLE } from 'twenty-ui/theme';
+import { themeCssVariables } from 'twenty-ui/theme-constants';

 const StyledDropdownMenuSearchInputContainer = styled.div`
  align-items: center;
-  --vertical-padding: ${({ theme }) => theme.spacing(2)};
+  --vertical-padding: ${themeCssVariables.spacing[2]};
  display: flex;
  flex-direction: row;
  min-height: calc(36px - 2 * var(--vertical-padding));
@@ -19,7 +20,7 @@ const StyledDropdownMenuSearchInputContainer = styled.div`
 const StyledInput = styled.input`
  ${TEXT_INPUT_STYLE}

-  font-size: ${({ theme }) => theme.font.size.sm};
+  font-size: ${themeCssVariables.font.size.sm};
  background-color: transparent;
  width: 100%;

@@ -1,15 +1,16 @@
-import styled from '@emotion/styled';
+import { themeCssVariables } from 'twenty-ui/theme-constants';
+import { styled } from '@linaria/react';

 const StyledDropdownMenuSectionLabel = styled.div`
-  background-color: ${({ theme }) => theme.background.transparent.lighter};
-  color: ${({ theme }) => theme.font.color.tertiary};
+  background-color: ${themeCssVariables.background.transparent.lighter};
+  color: ${themeCssVariables.font.color.tertiary};
  min-height: 20px;
  width: auto;
-  font-size: ${({ theme }) => theme.font.size.xxs};
+  font-size: ${themeCssVariables.font.size.xxs};
  display: flex;
  align-items: center;
  justify-content: flex-start;
-  padding-left: ${({ theme }) => theme.spacing(1)};
+  padding-left: ${themeCssVariables.spacing[1]};
  user-select: none;
 `;

@@ -1,10 +1,8 @@
-import styled from '@emotion/styled';
+import { styled } from '@linaria/react';
+import { themeCssVariables } from 'twenty-ui/theme-constants';

 const StyledDropdownMenuSeparator = styled.div`
-  background-color: ${({ theme }) =>
-    theme.name === 'dark'
-      ? theme.background.transparent.light
-      : theme.border.color.light};
+  background-color: ${themeCssVariables.border.color.light};
  min-height: 1px;
  width: 100%;
 `;
@@ -6,7 +6,6 @@ import { useToggleDropdown } from '@/ui/layout/dropdown/hooks/useToggleDropdown'
 import { SelectableList } from '@/ui/layout/selectable-list/components/SelectableList';
 import { useSelectableList } from '@/ui/layout/selectable-list/hooks/useSelectableList';
 import { useHotkeysOnFocusedElement } from '@/ui/utilities/hotkey/hooks/useHotkeysOnFocusedElement';
-import { useTheme } from '@emotion/react';
 import { useLingui } from '@lingui/react/macro';
 import { type ReactNode, useId } from 'react';
 import { Button } from 'twenty-ui/input';
@@ -30,7 +29,6 @@ export const OptionsDropdownMenu = ({
  const generatedDropdownId = useId();
  const dropdownId = dropdownIdFromProps ?? generatedDropdownId;
  const { t } = useLingui();
-  const theme = useTheme();
  const { toggleDropdown } = useToggleDropdown();

  const listId = selectableListId ?? dropdownId;
@@ -75,7 +73,7 @@ export const OptionsDropdownMenu = ({
        />
      }
      dropdownPlacement="top-end"
-      dropdownOffset={{ y: parseInt(theme.spacing(2), 10) }}
+      dropdownOffset={{ y: 8 }}
      globalHotkeysConfig={{
        enableGlobalHotkeysWithModifiers: true,
        enableGlobalHotkeysConflictingWithKeyboard: false,
@@ -1,4 +1,5 @@
-import styled from '@emotion/styled';
+import { themeCssVariables } from 'twenty-ui/theme-constants';
+import { styled } from '@linaria/react';

 type StyledDropdownButtonProps = {
  isUnfolded: boolean;
@@ -8,30 +9,32 @@ type StyledDropdownButtonProps = {

 export const StyledDropdownButtonContainer = styled.div<StyledDropdownButtonProps>`
  align-items: center;
-  background: ${({ theme, isUnfolded, transparentBackground }) =>
+  background: ${({ isUnfolded, transparentBackground }) =>
    transparentBackground
      ? 'none'
      : isUnfolded
-        ? theme.background.transparent.light
-        : theme.background.primary};
-  border-radius: ${({ theme }) => theme.border.radius.sm};
-  color: ${({ isActive, theme }) =>
-    isActive ? theme.color.blue : theme.font.color.secondary};
+        ? themeCssVariables.background.transparent.light
+        : themeCssVariables.background.primary};
+  border-radius: ${themeCssVariables.border.radius.sm};
+  color: ${({ isActive }) =>
+    isActive
+      ? themeCssVariables.color.blue
+      : themeCssVariables.font.color.secondary};
  cursor: pointer;
  display: flex;

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

-  padding-right: ${({ theme }) => theme.spacing(2)};
+  padding-right: ${themeCssVariables.spacing[2]};
  user-select: none;

  &:hover {
-    background: ${({ theme, isUnfolded, transparentBackground }) =>
+    background: ${({ isUnfolded, transparentBackground }) =>
      transparentBackground
        ? 'transparent'
        : isUnfolded
-          ? theme.background.transparent.medium
-          : theme.background.transparent.light};
+          ? themeCssVariables.background.transparent.medium
+          : themeCssVariables.background.transparent.light};
  }
 `;
@@ -1,8 +1,9 @@
-import styled from '@emotion/styled';
+import { styled } from '@linaria/react';
 import { Label } from 'twenty-ui/display';
+import { themeCssVariables } from 'twenty-ui/theme-constants';

 export const StyledDropdownMenuSubheader = styled(Label)`
-  background-color: ${({ theme }) => theme.background.transparent.lighter};
-  padding: ${({ theme }) => `${theme.spacing(1)} ${theme.spacing(2)}`};
+  background-color: ${themeCssVariables.background.transparent.lighter};
+  padding: ${themeCssVariables.spacing[1]} ${themeCssVariables.spacing[2]};
  width: 100%;
 `;
@@ -1,4 +1,5 @@
-import styled from '@emotion/styled';
+import { themeCssVariables } from 'twenty-ui/theme-constants';
+import { styled } from '@linaria/react';

 type StyledDropdownButtonProps = {
  isUnfolded?: boolean;
@@ -9,25 +10,29 @@ export const StyledHeaderDropdownButton = styled.button<StyledDropdownButtonProp
  font-family: inherit;
  align-items: center;
  border: none;
-  border-radius: ${({ theme }) => theme.border.radius.sm};
-  color: ${({ isActive, theme }) =>
-    isActive ? theme.color.blue : theme.font.color.secondary};
+  border-radius: ${themeCssVariables.border.radius.sm};
+  color: ${({ isActive }) =>
+    isActive
+      ? themeCssVariables.color.blue
+      : themeCssVariables.font.color.secondary};
  cursor: pointer;
  display: flex;

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

-  padding-right: ${({ theme }) => theme.spacing(2)};
+  padding-right: ${themeCssVariables.spacing[2]};
  user-select: none;

-  background: ${({ theme, isUnfolded }) =>
-    isUnfolded ? theme.background.transparent.light : theme.background.primary};
+  background: ${({ isUnfolded }) =>
+    isUnfolded
+      ? themeCssVariables.background.transparent.light
+      : themeCssVariables.background.primary};

  &:hover {
-    background: ${({ theme, isUnfolded }) =>
+    background: ${({ isUnfolded }) =>
      isUnfolded
-        ? theme.background.transparent.medium
-        : theme.background.transparent.light};
+        ? themeCssVariables.background.transparent.medium
+        : themeCssVariables.background.transparent.light};
  }
 `;
@@ -1,4 +1,4 @@
-import styled from '@emotion/styled';
+import { styled } from '@linaria/react';
 import {
  type Decorator,
  type Meta,
@@ -14,7 +14,7 @@ import { useListenClickOutside } from '@/ui/utilities/pointer-event/hooks/useLis
 import { useAtomComponentStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomComponentStateValue';
 import { useAtomStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomStateValue';
 import { useSetAtomComponentState } from '@/ui/utilities/state/jotai/hooks/useSetAtomComponentState';
-import styled from '@emotion/styled';
+import { styled } from '@linaria/react';
 import {
  FloatingPortal,
  type Placement,