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,7 +1,8 @@
-import { useTheme } from '@emotion/react';
 import { Draggable } from '@hello-pangea/dnd';
 import { isFunction } from '@sniptt/guards';
 import { isDefined } from 'twenty-shared/utils';
+import { useContext } from 'react';
+import { ThemeContext } from 'twenty-ui/theme';

 type DraggableItemProps = {
  draggableId: string;
@@ -28,7 +29,7 @@ export const DraggableItem = ({
  disableDraggingBackground,
  containerOffsetY,
 }: DraggableItemProps) => {
-  const theme = useTheme();
+  const { theme } = useContext(ThemeContext);

  return (
    <Draggable
@@ -1,4 +1,4 @@
-import styled from '@emotion/styled';
+import { styled } from '@linaria/react';
 import {
  DragDropContext,
  Droppable,
@@ -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,
@@ -1,4 +1,4 @@
-import styled from '@emotion/styled';
+import { styled } from '@linaria/react';
 import {
  type ReactElement,
  useCallback,
@@ -13,11 +13,12 @@ import { isDefined } from 'twenty-shared/utils';
 import { ChipSize } from 'twenty-ui/components';
 import { OverflowingTextWithTooltip } from 'twenty-ui/display';
 import { AnimatedContainer } from 'twenty-ui/utilities';
+import { themeCssVariables } from 'twenty-ui/theme-constants';

 const StyledContainer = styled.div`
  align-items: center;
  display: flex;
-  gap: ${({ theme }) => theme.spacing(1)};
+  gap: ${themeCssVariables.spacing[1]};
  justify-content: space-between;
  min-width: 100%;
  width: 100%;
@@ -25,7 +26,7 @@ const StyledContainer = styled.div`

 const StyledChildrenContainer = styled.div`
  display: flex;
-  gap: ${({ theme }) => theme.spacing(1)};
+  gap: ${themeCssVariables.spacing[1]};
  overflow: hidden;
  max-width: 100%;
  flex: 0 1 fit-content;
@@ -43,7 +44,7 @@ const StyledChildContainer = styled.div`
 `;

 const StyledUnShrinkableContainer = styled.div`
-  color: ${({ theme }) => theme.font.color.primary};
+  color: ${themeCssVariables.font.color.primary};
  flex-shrink: 0;

  width: 24px;
@@ -1,9 +1,10 @@
 import { RootStackingContextZIndices } from '@/ui/layout/constants/RootStackingContextZIndices';
 import { OverlayContainer } from '@/ui/layout/overlay/components/OverlayContainer';
 import { useListenClickOutside } from '@/ui/utilities/pointer-event/hooks/useListenClickOutside';
-import styled from '@emotion/styled';
+import { styled } from '@linaria/react';
 import { flip, FloatingPortal, offset, useFloating } from '@floating-ui/react';
 import { type ReactNode } from 'react';
+import { themeCssVariables } from 'twenty-ui/theme-constants';

 type ExpandedFieldDisplayProps = {
  anchorElement?: HTMLElement;
@@ -14,8 +15,8 @@ type ExpandedFieldDisplayProps = {
 const StyledExpandedFieldContainer = styled.div`
  display: flex;
  flex-direction: column;
-  gap: ${({ theme }) => theme.spacing(1)};
-  padding: ${({ theme }) => theme.spacing(2)};
+  gap: ${themeCssVariables.spacing[1]};
+  padding: ${themeCssVariables.spacing[2]};
  overflow: auto;
  box-sizing: border-box;
  height: 300px;
@@ -2,9 +2,10 @@ import { DropdownContent } from '@/ui/layout/dropdown/components/DropdownContent
 import { StyledDropdownContentContainer } from '@/ui/layout/dropdown/components/internal/DropdownInternalContainer';
 import { OverlayContainer } from '@/ui/layout/overlay/components/OverlayContainer';
 import { useListenClickOutside } from '@/ui/utilities/pointer-event/hooks/useListenClickOutside';
-import styled from '@emotion/styled';
+import { styled } from '@linaria/react';
 import { FloatingPortal, offset, shift, useFloating } from '@floating-ui/react';
 import { type ReactNode } from 'react';
+import { themeCssVariables } from 'twenty-ui/theme-constants';

 type ExpandedListDropdownProps = {
  anchorElement?: HTMLElement;
@@ -15,8 +16,8 @@ type ExpandedListDropdownProps = {
 const StyledExpandedListContainer = styled.div`
  display: flex;
  flex-wrap: wrap;
-  gap: ${({ theme }) => theme.spacing(1)};
-  padding: ${({ theme }) => theme.spacing(2)};
+  gap: ${themeCssVariables.spacing[1]};
+  padding: ${themeCssVariables.spacing[2]};
 `;

 // TODO: unify this and use Dropdown component instead
@@ -1,4 +1,4 @@
-import styled from '@emotion/styled';
+import { styled } from '@linaria/react';
 import { type Meta, type StoryObj } from '@storybook/react-vite';
 import { expect, userEvent, within } from 'storybook/test';

@@ -7,9 +7,10 @@ import { isDefined } from 'twenty-shared/utils';
 import { Tag } from 'twenty-ui/components';
 import { ComponentDecorator } from 'twenty-ui/testing';
 import { MAIN_COLOR_NAMES } from 'twenty-ui/theme';
+import { themeCssVariables } from 'twenty-ui/theme-constants';

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

@@ -4,8 +4,9 @@ import {
  Breadcrumb,
  type BreadcrumbProps,
 } from '@/ui/navigation/bread-crumb/components/Breadcrumb';
-import styled from '@emotion/styled';
+import { styled } from '@linaria/react';
 import { useIsMobile } from 'twenty-ui/utilities';
+import { themeCssVariables } from 'twenty-ui/theme-constants';

 type FullScreenContainerProps = {
  children: JSX.Element | JSX.Element[];
@@ -14,7 +15,7 @@ type FullScreenContainerProps = {
 };

 const StyledFullScreen = styled.div`
-  background: ${({ theme }) => theme.background.noisy};
+  background: ${themeCssVariables.background.noisy};
  display: flex;
  flex-direction: column;
  width: 100%;
@@ -22,14 +23,14 @@ const StyledFullScreen = styled.div`

 const StyledMainContainer = styled.div`
  height: calc(
-    100% - ${PAGE_BAR_MIN_HEIGHT}px - ${({ theme }) => theme.spacing(2 * 2 + 5)}
+    100% - ${PAGE_BAR_MIN_HEIGHT}px - ${themeCssVariables.spacing[9]}
  );
-  padding: ${({ theme }) =>
-    `0 ${theme.spacing(3)} ${theme.spacing(3)} ${theme.spacing(3)}`};
+  padding: 0 ${themeCssVariables.spacing[3]} ${themeCssVariables.spacing[3]}
+    ${themeCssVariables.spacing[3]};
 `;

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

 export const FullScreenContainer = ({
@@ -1,5 +1,5 @@
 import { FullScreenContainer } from '@/ui/layout/fullscreen/components/FullScreenContainer';
-import styled from '@emotion/styled';
+import { styled } from '@linaria/react';
 import { type Meta, type StoryObj } from '@storybook/react-vite';
 import {
  ComponentDecorator,
@@ -4,9 +4,10 @@ import {
  Breadcrumb,
  type BreadcrumbProps,
 } from '@/ui/navigation/bread-crumb/components/Breadcrumb';
-import styled from '@emotion/styled';
+import { styled } from '@linaria/react';
 import { useRef } from 'react';
 import { createPortal } from 'react-dom';
+import { themeCssVariables } from 'twenty-ui/theme-constants';

 const StyledFullScreenOverlay = styled.div`
  position: fixed;
@@ -14,7 +15,7 @@ const StyledFullScreenOverlay = styled.div`
  left: 0;
  right: 0;
  bottom: 0;
-  background: ${({ theme }) => theme.background.noisy};
+  background: ${themeCssVariables.background.noisy};
  display: flex;
  flex-direction: column;
  width: 100%;
@@ -23,17 +24,17 @@ const StyledFullScreenOverlay = styled.div`
 `;

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

 const StyledFullScreenContent = styled.div`
  display: flex;
  flex-direction: column;
-  gap: ${({ theme }) => theme.spacing(3)};
+  gap: ${themeCssVariables.spacing[3]};
  flex: 1;
  min-height: 0;
-  padding: ${({ theme }) =>
-    `0 ${theme.spacing(3)} ${theme.spacing(3)} ${theme.spacing(3)}`};
+  padding: 0 ${themeCssVariables.spacing[3]} ${themeCssVariables.spacing[3]}
+    ${themeCssVariables.spacing[3]};

  // Make the immediate child a flex column that grows, so nested components
  // with height="100%" (e.g., editors) can size correctly.
@@ -42,7 +43,7 @@ const StyledFullScreenContent = styled.div`
    flex-direction: column;
    flex: 1;
    min-height: 0;
-    row-gap: ${({ theme }) => theme.spacing(5)};
+    row-gap: ${themeCssVariables.spacing[5]};
  }
 `;

@@ -1,4 +1,4 @@
-import styled from '@emotion/styled';
+import { styled } from '@linaria/react';
 import { type ReactNode, useState } from 'react';
 import { useDebouncedCallback } from 'use-debounce';

@@ -11,6 +11,7 @@ import { useLingui } from '@lingui/react/macro';
 import { H1Title, H1TitleFontColor } from 'twenty-ui/display';
 import { Button, type ButtonAccent } from 'twenty-ui/input';
 import { Section, SectionAlignment, SectionFontColor } from 'twenty-ui/layout';
+import { themeCssVariables } from 'twenty-ui/theme-constants';

 export type ConfirmationModalProps = {
  modalId: string;
@@ -28,15 +29,15 @@ export type ConfirmationModalProps = {
 };

 const StyledConfirmationModal = styled(Modal)`
-  border-radius: ${({ theme }) => theme.spacing(1)};
-  width: calc(400px - ${({ theme }) => theme.spacing(32)});
+  border-radius: ${themeCssVariables.spacing[1]};
+  width: calc(400px - ${themeCssVariables.spacing[32]});
  height: auto;
 `;

 export const StyledCenteredButton = styled(Button)`
  box-sizing: border-box;
  justify-content: center;
-  margin-top: ${({ theme }) => theme.spacing(2)};
+  margin-top: ${themeCssVariables.spacing[2]};
 `;

 const StyledCenteredTitle = styled.div`
@@ -44,17 +45,17 @@ const StyledCenteredTitle = styled.div`
 `;

 const StyledSection = styled(Section)`
-  margin-bottom: ${({ theme }) => theme.spacing(6)};
+  margin-bottom: ${themeCssVariables.spacing[6]};
 `;

 export const StyledConfirmationButton = styled(StyledCenteredButton)`
-  border-color: ${({ theme }) => theme.border.color.danger};
+  border-color: ${themeCssVariables.border.color.danger};
  box-shadow: none;
-  color: ${({ theme }) => theme.color.red};
-  font-size: ${({ theme }) => theme.font.size.md};
-  line-height: ${({ theme }) => theme.text.lineHeight.lg};
+  color: ${themeCssVariables.color.red};
+  font-size: ${themeCssVariables.font.size.md};
+  line-height: ${themeCssVariables.text.lineHeight.lg};
  :hover {
-    background-color: ${({ theme }) => theme.color.red3};
+    background-color: ${themeCssVariables.color.red3};
  }
 `;

@@ -10,13 +10,14 @@ import { useModal } from '@/ui/layout/modal/hooks/useModal';
 import { ClickOutsideListenerContext } from '@/ui/utilities/pointer-event/contexts/ClickOutsideListenerContext';
 import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
 import { useAtomComponentStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomComponentStateValue';
-import { css, useTheme } from '@emotion/react';
-import styled from '@emotion/styled';
+import { styled } from '@linaria/react';
 import { AnimatePresence, motion } from 'framer-motion';
-import React, { useRef } from 'react';
+import React, { useContext, useRef } from 'react';
 import { createPortal } from 'react-dom';
 import { isDefined } from 'twenty-shared/utils';
-const StyledModalDiv = styled(motion.div)<{
+import { themeCssVariables } from 'twenty-ui/theme-constants';
+import { ThemeContext } from 'twenty-ui/theme';
+const StyledModalDivBase = styled.div<{
  size?: ModalSize;
  padding?: ModalPadding;
  isMobile: boolean;
@@ -24,65 +25,70 @@ const StyledModalDiv = styled(motion.div)<{
 }>`
  display: flex;
  flex-direction: column;
-  box-shadow: ${({ theme, modalVariant }) =>
+  box-shadow: ${({ modalVariant }) =>
    modalVariant === 'primary'
-      ? theme.boxShadow.superHeavy
+      ? themeCssVariables.boxShadow.superHeavy
      : modalVariant === 'transparent'
        ? 'none'
-        : theme.boxShadow.strong};
-  background: ${({ theme, modalVariant }) =>
-    modalVariant === 'transparent' ? 'transparent' : theme.background.primary};
-  color: ${({ theme }) => theme.font.color.primary};
-  border-radius: ${({ theme, isMobile, modalVariant }) => {
+        : themeCssVariables.boxShadow.strong};
+  background: ${({ modalVariant }) =>
+    modalVariant === 'transparent'
+      ? 'transparent'
+      : themeCssVariables.background.primary};
+  color: ${themeCssVariables.font.color.primary};
+  border-radius: ${({ isMobile, modalVariant }) => {
    if (isMobile || modalVariant === 'transparent') return `0`;
-    return theme.border.radius.md;
+    return themeCssVariables.border.radius.md;
  }};
  overflow-x: hidden;
  overflow-y: auto;
  z-index: ${RootStackingContextZIndices.RootModal}; // should be higher than Backdrop's z-index

-  width: ${({ isMobile, size, theme }) => {
-    if (isMobile) return theme.modal.size.fullscreen.width;
+  width: ${({ isMobile, size }) => {
+    if (isMobile)
+      return themeCssVariables.modal.size.fullscreen.width ?? 'auto';
    switch (size) {
      case 'small':
-        return theme.modal.size.sm.width;
+        return themeCssVariables.modal.size.sm.width ?? 'auto';
      case 'medium':
-        return theme.modal.size.md.width;
+        return themeCssVariables.modal.size.md.width ?? 'auto';
      case 'large':
-        return theme.modal.size.lg.width;
+        return themeCssVariables.modal.size.lg.width ?? 'auto';
      case 'extraLarge':
-        return theme.modal.size.xl.width;
+        return themeCssVariables.modal.size.xl.width ?? 'auto';
      default:
        return 'auto';
    }
  }};

-  padding: ${({ padding, theme }) => {
+  padding: ${({ padding }) => {
    switch (padding) {
      case 'none':
-        return theme.spacing(0);
+        return themeCssVariables.spacing[0];
      case 'small':
-        return theme.spacing(2);
+        return themeCssVariables.spacing[2];
      case 'medium':
-        return theme.spacing(4);
+        return themeCssVariables.spacing[4];
      case 'large':
-        return theme.spacing(6);
+        return themeCssVariables.spacing[6];
      default:
        return 'auto';
    }
  }};
-  height: ${({ isMobile, theme, size }) => {
-    if (isMobile) return theme.modal.size.fullscreen.height;
+  height: ${({ isMobile, size }) => {
+    if (isMobile)
+      return themeCssVariables.modal.size.fullscreen.height ?? 'auto';

    switch (size) {
      case 'extraLarge':
-        return theme.modal.size.xl.height;
+        return themeCssVariables.modal.size.xl.height ?? 'auto';
      default:
        return 'auto';
    }
  }};
  max-height: ${({ isMobile }) => (isMobile ? 'none' : '90dvh')};
 `;
+const StyledModalDiv = motion.create(StyledModalDivBase);

 const StyledHeader = styled.div`
  align-items: center;
@@ -90,7 +96,7 @@ const StyledHeader = styled.div`
  flex-direction: row;
  height: 60px;
  overflow: hidden;
-  padding: ${({ theme }) => theme.spacing(5)};
+  padding: ${themeCssVariables.spacing[5]};
 `;

 const StyledContent = styled.div<{
@@ -101,17 +107,11 @@ const StyledContent = styled.div<{
  flex: 1;
  flex: 1 1 0%;
  flex-direction: column;
-  padding: ${({ theme }) => theme.spacing(10)};
-  ${({ isVerticalCentered }) =>
-    isVerticalCentered &&
-    css`
-      align-items: center;
-    `}
-  ${({ isHorizontalCentered }) =>
-    isHorizontalCentered &&
-    css`
-      justify-content: center;
-    `}
+  padding: ${themeCssVariables.spacing[10]};
+  align-items: ${({ isVerticalCentered }) =>
+    isVerticalCentered ? 'center' : 'stretch'};
+  justify-content: ${({ isHorizontalCentered }) =>
+    isHorizontalCentered ? 'center' : 'flex-start'};
 `;

 const StyledFooter = styled.div`
@@ -120,22 +120,22 @@ const StyledFooter = styled.div`
  flex-direction: row;
  height: 60px;
  overflow: hidden;
-  padding: ${({ theme }) => theme.spacing(5)};
+  padding: ${themeCssVariables.spacing[5]};
 `;

-const StyledBackDrop = styled(motion.div)<{
+const StyledBackDropBase = styled.div<{
  modalVariant: ModalVariants;
  isInContainer?: boolean;
 }>`
  align-items: center;
-  background: ${({ theme, modalVariant, isInContainer }) =>
+  background: ${({ modalVariant, isInContainer }) =>
    isInContainer
-      ? theme.background.overlayTertiary
+      ? themeCssVariables.background.overlayTertiary
      : modalVariant === 'primary' || modalVariant === 'transparent'
-        ? theme.background.overlayPrimary
+        ? themeCssVariables.background.overlayPrimary
        : modalVariant === 'secondary'
-          ? theme.background.overlaySecondary
-          : theme.background.overlayTertiary};
+          ? themeCssVariables.background.overlaySecondary
+          : themeCssVariables.background.overlayTertiary};
  display: flex;
  height: 100%;
  justify-content: center;
@@ -147,6 +147,7 @@ const StyledBackDrop = styled(motion.div)<{
  z-index: ${RootStackingContextZIndices.RootModalBackDrop};
  user-select: none;
 `;
+const StyledBackDrop = motion.create(StyledBackDropBase);

 type ModalHeaderProps = React.PropsWithChildren & {
  className?: string;
@@ -237,7 +238,7 @@ export const Modal = ({
    : container;
  const isInContainer = isDefined(container) && !ignoreContainer;

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

  const stopEventPropagation = (e: React.MouseEvent) => {
    e.stopPropagation();
@@ -1,4 +1,5 @@
-import styled from '@emotion/styled';
+import { themeCssVariables } from 'twenty-ui/theme-constants';
+import { styled } from '@linaria/react';

 // eslint-disable-next-line twenty/styled-components-prefixed-with-styled
 export const OverlayContainer = styled.div<{
@@ -8,16 +9,16 @@ export const OverlayContainer = styled.div<{
  align-items: center;
  display: flex;

-  backdrop-filter: ${({ theme }) => theme.blur.medium};
+  backdrop-filter: ${themeCssVariables.blur.medium};

-  border-radius: ${({ theme, borderRadius }) =>
-    theme.border.radius[borderRadius ?? 'md']};
+  border-radius: ${({ borderRadius }) =>
+    themeCssVariables.border.radius[borderRadius ?? 'md']};

-  background: ${({ theme }) => theme.background.transparent.primary};
+  background: ${themeCssVariables.background.transparent.primary};
  border: 1px solid
-    ${({ theme, hasDangerBorder }) =>
-      theme.border.color[hasDangerBorder ? 'danger' : 'medium']};
-  box-shadow: ${({ theme }) => theme.boxShadow.strong};
+    ${({ hasDangerBorder }) =>
+      themeCssVariables.border.color[hasDangerBorder ? 'danger' : 'medium']};
+  box-shadow: ${themeCssVariables.boxShadow.strong};

  overflow: hidden;

@@ -5,33 +5,31 @@ import { isNavigationMenuInEditModeState } from '@/navigation-menu-item/states/i
 import { RootStackingContextZIndices } from '@/ui/layout/constants/RootStackingContextZIndices';
 import { PAGE_HEADER_COMMAND_MENU_BUTTON_CLICK_OUTSIDE_ID } from '@/ui/layout/page-header/constants/PageHeaderCommandMenuButtonClickOutsideId';
 import { useAtomStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomStateValue';
-import { css, useTheme } from '@emotion/react';
-import styled from '@emotion/styled';
+import { styled } from '@linaria/react';
 import { i18n } from '@lingui/core';
 import { t } from '@lingui/core/macro';
 import { motion } from 'framer-motion';
 import { AppTooltip, TooltipDelay, TooltipPosition } from 'twenty-ui/display';
 import { AnimatedButton } from 'twenty-ui/input';
 import { getOsControlSymbol, useIsMobile } from 'twenty-ui/utilities';
+import { themeCssVariables } from 'twenty-ui/theme-constants';
+import { useContext } from 'react';
+import { ThemeContext } from 'twenty-ui/theme';

-const StyledButtonWrapper = styled.div<{
-  alignWithCommandMenuTopBar: boolean;
-}>`
+const StyledButtonWrapper = styled.div<{ alignToTop: boolean }>`
+  align-items: ${({ alignToTop }) => (alignToTop ? 'center' : 'initial')};
+  display: ${({ alignToTop }) => (alignToTop ? 'flex' : 'block')};
+  height: ${({ alignToTop }) =>
+    alignToTop ? `${COMMAND_MENU_SEARCH_BAR_HEIGHT_MOBILE}px` : 'auto'};
+  position: ${({ alignToTop }) => (alignToTop ? 'fixed' : 'static')};
+  right: ${({ alignToTop }) =>
+    alignToTop ? themeCssVariables.spacing[3] : 'auto'};
+  top: ${({ alignToTop }) => (alignToTop ? '0' : 'auto')};
  z-index: ${RootStackingContextZIndices.CommandMenuButton};
-  ${({ alignWithCommandMenuTopBar, theme }) =>
-    alignWithCommandMenuTopBar &&
-    css`
-      align-items: center;
-      display: flex;
-      height: ${COMMAND_MENU_SEARCH_BAR_HEIGHT_MOBILE}px;
-      position: fixed;
-      right: ${theme.spacing(3)};
-      top: 0;
-    `}
 `;

 const StyledTooltipWrapper = styled.div`
-  font-size: ${({ theme }) => theme.font.size.md};
+  font-size: ${themeCssVariables.font.size.md};
 `;

 const xPaths = {
@@ -46,7 +44,7 @@ const AnimatedIcon = ({
 }: {
  isCommandMenuOpened: boolean;
 }) => {
-  const theme = useTheme();
+  const { theme } = useContext(ThemeContext);
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
@@ -136,12 +134,10 @@ export const PageHeaderToggleCommandMenuButton = () => {
    ? t`Close command menu`
    : t`Open command menu`;

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

  return (
-    <StyledButtonWrapper
-      alignWithCommandMenuTopBar={alignWithCommandMenuTopBar}
-    >
+    <StyledButtonWrapper alignToTop={alignWithCommandMenuTopBar}>
      <div id="toggle-command-menu-button">
        <AnimatedButton
          animatedSvg={
@@ -1,9 +1,9 @@
-import { css, Global, useTheme } from '@emotion/react';
-import styled from '@emotion/styled';
+import { styled } from '@linaria/react';
 import { Outlet } from 'react-router-dom';
+import { themeCssVariables } from 'twenty-ui/theme-constants';

 const StyledLayout = styled.div`
-  background: ${({ theme }) => theme.background.noisy};
+  background: ${themeCssVariables.background.noisy};
  display: flex;
  flex-direction: column;
  height: 100dvh;
@@ -13,19 +13,9 @@ const StyledLayout = styled.div`
 `;

 export const BlankLayout = () => {
-  const theme = useTheme();
  return (
-    <>
-      <Global
-        styles={css`
-          body {
-            background: ${theme.background.tertiary};
-          }
-        `}
-      />
-      <StyledLayout>
-        <Outlet />
-      </StyledLayout>
-    </>
+    <StyledLayout>
+      <Outlet />
+    </StyledLayout>
  );
 };
@@ -12,7 +12,7 @@ import { PageDragDropProvider } from '@/navigation/components/PageDragDropProvid
 import { useIsSettingsPage } from '@/navigation/hooks/useIsSettingsPage';
 import { OBJECT_SETTINGS_WIDTH } from '@/settings/data-model/constants/ObjectSettings';
 import { SignInAppNavigationDrawerMock } from '@/sign-in-background-mock/components/SignInAppNavigationDrawerMock';
-import { lazy, Suspense } from 'react';
+import { Suspense, lazy, useContext } from 'react';

 const SignInBackgroundMockPage = lazy(() =>
  import('@/sign-in-background-mock/components/SignInBackgroundMockPage').then(
@@ -23,39 +23,37 @@ import { useShowFullscreen } from '@/ui/layout/fullscreen/hooks/useShowFullscree
 import { useShowAuthModal } from '@/ui/layout/hooks/useShowAuthModal';
 import { NAVIGATION_DRAWER_CONSTRAINTS } from '@/ui/layout/resizable-panel/constants/NavigationDrawerConstraints';
 import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
-import { Global, css, useTheme } from '@emotion/react';
-import styled from '@emotion/styled';
+import { styled } from '@linaria/react';
 import { AnimatePresence, LayoutGroup, motion } from 'framer-motion';
 import { Outlet } from 'react-router-dom';
 import { useScreenSize } from 'twenty-ui/utilities';
+import { themeCssVariables } from 'twenty-ui/theme-constants';
+import { ThemeContext } from 'twenty-ui/theme';

 const StyledLayout = styled.div`
-  background: ${({ theme }) => theme.background.noisy};
+  background: ${themeCssVariables.background.noisy};
  display: flex;
  flex-direction: column;
  height: 100dvh;
  position: relative;
-  scrollbar-color: ${({ theme }) => theme.border.color.medium} transparent;
+  scrollbar-color: ${themeCssVariables.border.color.medium} transparent;
  scrollbar-width: 4px;
  width: 100%;

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

-const StyledPageContainer = styled(motion.div)`
+const StyledPageContainerBase = styled.div`
  display: flex;
  flex: 1 1 auto;
  flex-direction: row;
  min-height: 0;
 `;
+const StyledPageContainer = motion.create(StyledPageContainerBase);

-const StyledAppNavigationDrawer = styled(AppNavigationDrawer)`
-  flex-shrink: 0;
-`;
-
-const StyledAppNavigationDrawerMock = styled(SignInAppNavigationDrawerMock)`
+const StyledNavigationDrawerWrapper = styled.div`
  flex-shrink: 0;
 `;

@@ -68,20 +66,13 @@ const StyledMainContainer = styled.div`
 export const DefaultLayout = () => {
  const isMobile = useIsMobile();
  const isSettingsPage = useIsSettingsPage();
-  const theme = useTheme();
+  const { theme } = useContext(ThemeContext);
  const windowsWidth = useScreenSize().width;
  const showAuthModal = useShowAuthModal();
  const useShowFullScreen = useShowFullscreen();

  return (
    <>
-      <Global
-        styles={css`
-          body {
-            background: ${theme.background.tertiary};
-          }
-        `}
-      />
      <FileUploadProvider>
        <StyledLayout>
          <AppErrorBoundary FallbackComponent={AppFullScreenErrorFallback}>
@@ -105,9 +96,13 @@ export const DefaultLayout = () => {
              <PageDragDropProvider>
                {!showAuthModal && <KeyboardShortcutMenu />}
                {showAuthModal ? (
-                  <StyledAppNavigationDrawerMock />
+                  <StyledNavigationDrawerWrapper>
+                    <SignInAppNavigationDrawerMock />
+                  </StyledNavigationDrawerWrapper>
                ) : useShowFullScreen ? null : (
-                  <StyledAppNavigationDrawer />
+                  <StyledNavigationDrawerWrapper>
+                    <AppNavigationDrawer />
+                  </StyledNavigationDrawerWrapper>
                )}
                {showAuthModal ? (
                  <>
@@ -1,7 +1,8 @@
-import styled from '@emotion/styled';
+import { styled } from '@linaria/react';
 import { type ReactNode } from 'react';

 import { PagePanel } from './PagePanel';
+import { themeCssVariables } from 'twenty-ui/theme-constants';

 type PageBodyProps = {
  children: ReactNode;
@@ -9,15 +10,15 @@ type PageBodyProps = {
 };

 const StyledMainContainer = styled.div`
-  background: ${({ theme }) => theme.background.noisy};
+  background: ${themeCssVariables.background.noisy};
  box-sizing: border-box;
  display: flex;
  flex: 1 1 auto;
  flex-direction: row;
-  gap: ${({ theme }) => theme.spacing(2)};
+  gap: ${themeCssVariables.spacing[2]};
  min-height: 0;
-  padding-bottom: ${({ theme }) => theme.spacing(3)};
-  padding-right: ${({ theme }) => theme.spacing(3)};
+  padding-bottom: ${themeCssVariables.spacing[3]};
+  padding-right: ${themeCssVariables.spacing[3]};
  padding-left: 0;
  width: 100%;
 `;
@@ -1,4 +1,4 @@
-import styled from '@emotion/styled';
+import { styled } from '@linaria/react';

 const StyledContainer = styled.div`
  display: flex;
@@ -1,6 +1,5 @@
-import { useTheme } from '@emotion/react';
-import styled from '@emotion/styled';
-import { type ReactNode } from 'react';
+import { styled } from '@linaria/react';
+import { type ReactNode, useContext } from 'react';

 import { NavigationDrawerCollapseButton } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerCollapseButton';

@@ -16,41 +15,43 @@ import {
  OverflowingTextWithTooltip,
 } from 'twenty-ui/display';
 import { LightIconButton } from 'twenty-ui/input';
-import { MOBILE_VIEWPORT } from 'twenty-ui/theme';
+import { MOBILE_VIEWPORT, ThemeContext } from 'twenty-ui/theme';
+import { themeCssVariables } from 'twenty-ui/theme-constants';

 const StyledTopBarContainer = styled.div<{ isMobile: boolean }>`
  align-items: center;
-  background: ${({ theme }) => theme.background.noisy};
-  color: ${({ theme }) => theme.font.color.primary};
+  background: ${themeCssVariables.background.noisy};
+  color: ${themeCssVariables.font.color.primary};
  display: flex;
  flex-direction: row;
-  font-size: ${({ theme }) => theme.font.size.lg};
+  font-size: ${themeCssVariables.font.size.lg};
  justify-content: space-between;
  min-height: ${PAGE_BAR_MIN_HEIGHT}px;
-  padding-top: ${({ theme }) => theme.spacing(3)};
-  padding-bottom: ${({ theme }) => theme.spacing(3)};
-  padding-left: ${({ isMobile, theme }) => (isMobile ? theme.spacing(3) : 0)};
-  padding-right: ${({ theme }) => theme.spacing(3)};
-  gap: ${({ theme }) => theme.spacing(2)};
+  padding-top: ${themeCssVariables.spacing[3]};
+  padding-bottom: ${themeCssVariables.spacing[3]};
+  padding-left: ${({ isMobile }) =>
+    isMobile ? themeCssVariables.spacing[3] : 0};
+  padding-right: ${themeCssVariables.spacing[3]};
+  gap: ${themeCssVariables.spacing[2]};
 `;

 const StyledLeftContainer = styled.div`
  align-items: center;
  display: flex;
  flex-direction: row;
-  gap: ${({ theme }) => theme.spacing(1)};
+  gap: ${themeCssVariables.spacing[1]};
  overflow-x: hidden;
  width: 100%;
  @media (max-width: ${MOBILE_VIEWPORT}px) {
-    padding-left: ${({ theme }) => theme.spacing(1)};
+    padding-left: ${themeCssVariables.spacing[1]};
  }
 `;

 const StyledTitleContainer = styled.div`
  display: flex;
-  font-size: ${({ theme }) => theme.font.size.md};
-  font-weight: ${({ theme }) => theme.font.weight.medium};
-  margin-right: ${({ theme }) => theme.spacing(1)};
+  font-size: ${themeCssVariables.font.size.md};
+  font-weight: ${themeCssVariables.font.weight.medium};
+  margin-right: ${themeCssVariables.spacing[1]};
  width: 100%;
  overflow: hidden;
  align-items: center;
@@ -59,7 +60,7 @@ const StyledTitleContainer = styled.div`
 const StyledTopBarIconStyledTitleContainer = styled.div`
  align-items: center;
  display: flex;
-  gap: ${({ theme }) => theme.spacing(1)};
+  gap: ${themeCssVariables.spacing[1]};
  flex-direction: row;
  width: 100%;
  overflow: hidden;
@@ -67,7 +68,7 @@ const StyledTopBarIconStyledTitleContainer = styled.div`

 const StyledPageActionContainer = styled.div`
  display: inline-flex;
-  gap: ${({ theme }) => theme.spacing(2)};
+  gap: ${themeCssVariables.spacing[2]};
  flex: 1 0 auto;
 `;

@@ -95,7 +96,7 @@ export const PageHeader = ({
  className,
 }: PageHeaderProps) => {
  const isMobile = useIsMobile();
-  const theme = useTheme();
+  const { theme } = useContext(ThemeContext);
  const isNavigationDrawerExpanded = useAtomStateValue(
    isNavigationDrawerExpandedState,
  );
@@ -1,10 +1,11 @@
-import styled from '@emotion/styled';
+import { styled } from '@linaria/react';
 import React from 'react';
+import { themeCssVariables } from 'twenty-ui/theme-constants';

 const StyledPanel = styled.div`
-  background: ${({ theme }) => theme.background.primary};
-  border: 1px solid ${({ theme }) => theme.border.color.medium};
-  border-radius: ${({ theme }) => theme.border.radius.md};
+  background: ${themeCssVariables.background.primary};
+  border: 1px solid ${themeCssVariables.border.color.medium};
+  border-radius: ${themeCssVariables.border.radius.md};
  height: 100%;
  overflow-x: auto;
  overflow-y: hidden;
@@ -1,26 +1,27 @@
-import styled from '@emotion/styled';
-import { type ReactNode } from 'react';
+import { styled } from '@linaria/react';
+import { type CSSProperties, type ReactNode } from 'react';

 import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
 import { ScrollWrapper } from '@/ui/utilities/scroll/components/ScrollWrapper';
+import { themeCssVariables } from 'twenty-ui/theme-constants';

 const StyledOuterContainer = styled.div`
  display: flex;
-  gap: ${({ theme }) => (useIsMobile() ? theme.spacing(3) : '0')};
+  gap: var(--show-page-gap, 0);
  height: 100%;
  width: 100%;
 `;

 const StyledInnerContainer = styled.div`
  display: flex;
-  flex-direction: ${() => (useIsMobile() ? 'column' : 'row')};
+  flex-direction: var(--show-page-direction, row);
  width: 100%;
  height: 100%;
 `;

 const StyledScrollWrapper = styled(ScrollWrapper)`
-  background-color: ${({ theme }) => theme.background.secondary};
-  border-radius: ${({ theme }) => theme.border.radius.md};
+  background-color: ${themeCssVariables.background.secondary};
+  border-radius: ${themeCssVariables.border.radius.md};
 `;

 export type ShowPageContainerProps = {
@@ -29,10 +30,20 @@ export type ShowPageContainerProps = {

 export const ShowPageContainer = ({ children }: ShowPageContainerProps) => {
  const isMobile = useIsMobile();
+
+  const mobileStyle = isMobile
+    ? ({
+        '--show-page-gap': themeCssVariables.spacing[3],
+        '--show-page-direction': 'column',
+      } as CSSProperties)
+    : undefined;
+
  return isMobile ? (
-    <StyledOuterContainer>
+    <StyledOuterContainer style={mobileStyle}>
      <StyledScrollWrapper componentInstanceId="scroll-wrapper-show-page-container">
-        <StyledInnerContainer>{children}</StyledInnerContainer>
+        <StyledInnerContainer style={mobileStyle}>
+          {children}
+        </StyledInnerContainer>
      </StyledScrollWrapper>
    </StyledOuterContainer>
  ) : (
@@ -3,10 +3,11 @@ import {
  Breadcrumb,
  type BreadcrumbProps,
 } from '@/ui/navigation/bread-crumb/components/Breadcrumb';
-import styled from '@emotion/styled';
+import { styled } from '@linaria/react';
 import { type JSX, type ReactNode } from 'react';
 import { PageBody } from './PageBody';
 import { PageHeader } from './PageHeader';
+import { themeCssVariables } from 'twenty-ui/theme-constants';

 type SubMenuTopBarContainerProps = {
  children: JSX.Element | JSX.Element[];
@@ -24,13 +25,14 @@ const StyledContainer = styled.div`
 `;

 const StyledTitle = styled.h3<{ reserveTitleSpace?: boolean }>`
-  color: ${({ theme }) => theme.font.color.primary};
-  font-size: ${({ theme }) => theme.font.size.lg};
-  font-weight: ${({ theme }) => theme.font.weight.semiBold};
+  color: ${themeCssVariables.font.color.primary};
+  font-size: ${themeCssVariables.font.size.lg};
+  font-weight: ${themeCssVariables.font.weight.semiBold};
  line-height: 1.2;
-  margin: ${({ theme }) => theme.spacing(8, 8, 2)};
-  min-height: ${({ theme, reserveTitleSpace }) =>
-    reserveTitleSpace ? theme.spacing(5) : 'none'};
+  margin: ${themeCssVariables.spacing[8]} ${themeCssVariables.spacing[8]}
+    ${themeCssVariables.spacing[2]};
+  min-height: ${({ reserveTitleSpace }) =>
+    reserveTitleSpace ? themeCssVariables.spacing[5] : 'none'};
 `;

 export const SubMenuTopBarContainer = ({
@@ -1,9 +1,10 @@
-import styled from '@emotion/styled';
+import { styled } from '@linaria/react';

 import { RESIZE_EDGE_WIDTH_PX } from '@/ui/layout/resizable-panel/constants/ResizeEdgeWidthPx';
 import { useResizablePanel } from '@/ui/layout/resizable-panel/hooks/useResizablePanel';
 import { type ResizablePanelConstraints } from '@/ui/layout/resizable-panel/types/ResizablePanelConstraints';
 import { type ResizablePanelSide } from '@/ui/layout/resizable-panel/types/ResizablePanelSide';
+import { themeCssVariables } from 'twenty-ui/theme-constants';

 type StyledEdgeProps = {
  isActive: boolean;
@@ -12,32 +13,34 @@ type StyledEdgeProps = {
 };

 const StyledEdge = styled.div<StyledEdgeProps>`
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  ${({ side }) =>
-    side === 'right' ? 'right' : 'left'}: -${RESIZE_EDGE_WIDTH_PX / 2}px;
-  width: ${RESIZE_EDGE_WIDTH_PX}px;
-  cursor: col-resize;
-
-  display: flex;
  align-items: center;
+  bottom: 0;
+  cursor: col-resize;
+  display: flex;
  justify-content: center;
+  left: ${({ side }) =>
+    side === 'left' ? `-${RESIZE_EDGE_WIDTH_PX / 2}px` : 'auto'};
+  position: absolute;
+
+  right: ${({ side }) =>
+    side === 'right' ? `-${RESIZE_EDGE_WIDTH_PX / 2}px` : 'auto'};
+  top: 0;
+  width: ${RESIZE_EDGE_WIDTH_PX}px;
 `;

 const StyledHandle = styled.div<{ isActive: boolean; isHovered: boolean }>`
  width: 4px;
  height: 48px;
-  border-radius: ${({ theme }) => theme.border.radius.pill};
-  background-color: ${({ theme, isActive, isHovered }) =>
+  border-radius: ${themeCssVariables.border.radius.pill};
+  background-color: ${({ isActive, isHovered }) =>
    isActive
-      ? theme.color.blue
+      ? themeCssVariables.color.blue
      : isHovered
-        ? theme.font.color.tertiary
-        : theme.background.quaternary};
+        ? themeCssVariables.font.color.tertiary
+        : themeCssVariables.background.quaternary};
  transition:
-    background-color ${({ theme }) => theme.animation.duration.fast}s,
-    transform ${({ theme }) => theme.animation.duration.fast}s;
+    background-color ${themeCssVariables.animation.duration.fast}s,
+    transform ${themeCssVariables.animation.duration.fast}s;
  transform: ${({ isHovered, isActive }) =>
    isHovered || isActive ? 'scaleY(1.2)' : 'scaleY(1)'};
 `;
@@ -1,4 +1,4 @@
-import styled from '@emotion/styled';
+import { styled } from '@linaria/react';

 import { useResizablePanel } from '@/ui/layout/resizable-panel/hooks/useResizablePanel';
 import { type ResizablePanelConstraints } from '@/ui/layout/resizable-panel/types/ResizablePanelConstraints';
@@ -1,16 +1,17 @@
-import styled from '@emotion/styled';
+import { styled } from '@linaria/react';
 import { Fragment } from 'react';
+import { themeCssVariables } from 'twenty-ui/theme-constants';

 const StyledContainer = styled.div`
  align-items: center;
-  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};
  bottom: 0;
  box-sizing: border-box;
  display: flex;
  justify-content: flex-end;
-  padding: ${({ theme }) => theme.spacing(2)} ${({ theme }) => theme.spacing(3)};
-  gap: ${({ theme }) => theme.spacing(2)};
+  padding: ${themeCssVariables.spacing[2]} ${themeCssVariables.spacing[3]};
+  gap: ${themeCssVariables.spacing[2]};
  width: 100%;
 `;