Deprecate runtime theme objects in favor of CSS variables (#18402)

## Summary - **Eliminate `ICON_SIZES` / `ICON_STROKES` constants**: all icon dimensions are now resolved at runtime via `resolveThemeVariableAsNumber(themeCssVariables.icon.size.X)`, ensuring values always come from computed CSS variables - **No more consumer imports from `twenty-ui/theme`**: moved `ColorSchemeContext`, `ColorSchemeProvider`, `ThemeColor`, `MAIN_COLOR_NAMES`, `getNextThemeColor`, `AnimationDuration` to `twenty-ui/theme-constants` - **Remove `ThemeContext` / `ThemeContextProvider` / `ThemeProvider` / `ThemeType`**: replaced across ~300 files with `themeCssVariables` (for CSS contexts) or `resolveThemeVariable` / `resolveThemeVariableAsNumber` (for JS runtime values) - **Simplify provider chain**: only `ColorSchemeProvider` remains — it toggles `light`/`dark` class on `document.documentElement` and provides `colorScheme` via React context - **Fix pre-existing test failures**: `useIcons.test.ts` (non-configurable ES module spy) and `turnRecordFilterGroupIntoGqlOperationFilter.test.ts` (`Omit<RecordFilter, 'id'>` type mismatch) ### Theme access pattern (before → after) | Context | Before | After | |---------|--------|-------| | CSS (Linaria) | `${({ theme }) => theme.font.color.primary}` | `${themeCssVariables.font.color.primary}` | | JS runtime (icon size, animation) | `theme.icon.size.md` / `ICON_SIZES.md` | `resolveThemeVariableAsNumber(themeCssVariables.icon.size.md)` | | Color scheme check | `theme.name === 'dark'` | `useContext(ColorSchemeContext).colorScheme === 'dark'` |
2026-03-05 14:39:01 +01:00
parent 7293d4c1f8
commit 647c32ff3e
432 changed files with 1243 additions and 1433 deletions
@@ -8,7 +8,7 @@ import { AVATAR_PROPERTIES_BY_SIZE } from '@ui/display/avatar/constants/AvatarPr
 import { type AvatarSize } from '@ui/display/avatar/types/AvatarSize';
 import { type AvatarType } from '@ui/display/avatar/types/AvatarType';
 import { type IconComponent } from '@ui/display/icon/types/IconComponent';
-import { ThemeContext } from '@ui/theme';
+import { ThemeContext } from '@ui/theme-constants';
 import { stringToThemeColorP3String } from '@ui/utilities';
 import { REACT_APP_SERVER_BASE_URL } from '@ui/utilities/config';
 import { type Nullable } from 'twenty-shared/types';
@@ -85,6 +85,7 @@ export const Avatar = ({
  backgroundColor,
 }: AvatarProps) => {
  const { theme } = useContext(ThemeContext);
+
  const [invalidAvatarUrls, setInvalidAvatarUrls] = useAtom(
    invalidAvatarUrlsAtomV2,
  );
@@ -115,16 +116,16 @@ export const Avatar = ({
    : (color ??
      stringToThemeColorP3String({
        string: placeholderColorSeed ?? '',
-        theme,
        variant: 12,
+        theme,
      }));
  const fixedBackgroundColor = isPlaceholderFirstCharEmpty
    ? theme.background.transparent.light
    : (backgroundColor ??
      stringToThemeColorP3String({
        string: placeholderColorSeed ?? '',
-        theme,
        variant: 4,
+        theme,
      }));

  const showBackgroundColor = showPlaceholder;
@@ -148,7 +149,7 @@ export const Avatar = ({
          size={theme.icon.size.xl}
        />
      ) : showPlaceholder ? (
-        <StyledPlaceholderChar fontWeight={theme.font.weight.medium}>
+        <StyledPlaceholderChar fontWeight={500}>
          {placeholderChar}
        </StyledPlaceholderChar>
      ) : (
@@ -1,6 +1,6 @@
-import { useContext } from 'react';
 import { motion } from 'framer-motion';
-import { ThemeContext } from '@ui/theme';
+import { useContext } from 'react';
+import { ThemeContext } from '@ui/theme-constants';

 export type AnimatedCheckmarkProps = React.ComponentProps<
  typeof motion.path
@@ -18,6 +18,7 @@ export const AnimatedCheckmark = ({
  size = 28,
 }: AnimatedCheckmarkProps) => {
  const { theme } = useContext(ThemeContext);
+
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
@@ -3,8 +3,7 @@ import React, { useContext } from 'react';
 import { styled } from '@linaria/react';

 import { IconCheck } from '@ui/display/icon/components/TablerIcons';
-import { ThemeContext } from '@ui/theme';
-import { themeCssVariables } from '@ui/theme-constants';
+import { ThemeContext, themeCssVariables } from '@ui/theme-constants';

 const StyledContainer = styled.div`
  align-items: center;
@@ -1,8 +1,8 @@
 import { styled } from '@linaria/react';

+import { isDefined } from 'twenty-shared/utils';
 import { type ThemeColor } from '@ui/theme';
 import { themeCssVariables } from '@ui/theme-constants';
-import { isDefined } from 'twenty-shared/utils';

 export type ColorSampleVariant = 'default' | 'pipeline';

@@ -1,7 +1,8 @@
-import IconAddressBookRaw from '@assets/icons/address-book.svg?react';
 import { useContext } from 'react';
+
+import IconAddressBookRaw from '@assets/icons/address-book.svg?react';
 import { type IconComponentProps } from '@ui/display/icon/types/IconComponent';
-import { ThemeContext } from '@ui/theme';
+import { ThemeContext } from '@ui/theme-constants';

 type IconAddressBookProps = Pick<
  IconComponentProps,
@@ -2,7 +2,7 @@ import { useContext } from 'react';

 import IconAnthropicRaw from '@assets/icons/anthropic.svg?react';
 import { type IconComponentProps } from '@ui/display/icon/types/IconComponent';
-import { ThemeContext } from '@ui/theme';
+import { ThemeContext } from '@ui/theme-constants';

 type IconBrandAnthropicProps = Pick<IconComponentProps, 'size' | 'color'>;

@@ -2,7 +2,7 @@ import { useContext } from 'react';

 import IconBrandGroqRaw from '@assets/icons/groq.svg?react';
 import { type IconComponentProps } from '@ui/display/icon/types/IconComponent';
-import { ThemeContext } from '@ui/theme';
+import { ThemeContext } from '@ui/theme-constants';

 type IconBrandGroqProps = Pick<IconComponentProps, 'size' | 'color'>;

@@ -2,7 +2,7 @@ import { useContext } from 'react';

 import IconBrandMistralRaw from '@assets/icons/mistral.svg?react';
 import { type IconComponentProps } from '@ui/display/icon/types/IconComponent';
-import { ThemeContext } from '@ui/theme';
+import { ThemeContext } from '@ui/theme-constants';

 type IconBrandMistralProps = Pick<IconComponentProps, 'size' | 'color'>;

@@ -2,7 +2,7 @@ import { useContext } from 'react';

 import IconBrandXaiRaw from '@assets/icons/xai.svg?react';
 import { type IconComponentProps } from '@ui/display/icon/types/IconComponent';
-import { ThemeContext } from '@ui/theme';
+import { ThemeContext } from '@ui/theme-constants';

 type IconBrandXaiProps = Pick<IconComponentProps, 'size' | 'color'>;

@@ -4,7 +4,7 @@ import { styled } from '@linaria/react';

 import { IconChartBar } from '@ui/display/icon/components/TablerIcons';
 import { type IconComponentProps } from '@ui/display/icon/types/IconComponent';
-import { ThemeContext } from '@ui/theme';
+import { ThemeContext } from '@ui/theme-constants';

 const StyledRotatedIconWrapper = styled.div`
  display: inline-flex;
@@ -2,7 +2,7 @@ import { useContext } from 'react';

 import IconGmailRaw from '@assets/icons/gmail.svg?react';
 import { type IconComponentProps } from '@ui/display/icon/types/IconComponent';
-import { ThemeContext } from '@ui/theme';
+import { ThemeContext } from '@ui/theme-constants';

 type IconGmailProps = Pick<IconComponentProps, 'size'>;

@@ -2,7 +2,7 @@ import { useContext } from 'react';

 import IconGoogleRaw from '@assets/icons/google.svg?react';
 import { type IconComponentProps } from '@ui/display/icon/types/IconComponent';
-import { ThemeContext } from '@ui/theme';
+import { ThemeContext } from '@ui/theme-constants';

 type IconGoogleProps = Pick<IconComponentProps, 'size'>;

@@ -2,7 +2,7 @@ import { useContext } from 'react';

 import IconGoogleCalendarRaw from '@assets/icons/google-calendar.svg?react';
 import { type IconComponentProps } from '@ui/display/icon/types/IconComponent';
-import { ThemeContext } from '@ui/theme';
+import { ThemeContext } from '@ui/theme-constants';

 type IconGoogleCalendarProps = Pick<IconComponentProps, 'size'>;

@@ -2,7 +2,7 @@ import { useContext } from 'react';

 import IconLockRaw from '@assets/icons/lock.svg?react';
 import { type IconComponentProps } from '@ui/display/icon/types/IconComponent';
-import { ThemeContext } from '@ui/theme';
+import { ThemeContext } from '@ui/theme-constants';

 type IconLockCustomProps = Pick<IconComponentProps, 'size'>;

@@ -1,7 +1,7 @@
 import { useContext } from 'react';

 import IconMicrosoftRaw from '@assets/icons/microsoft.svg?react';
-import { ThemeContext } from '@ui/theme';
+import { ThemeContext } from '@ui/theme-constants';

 interface IconMicrosoftProps {
  size?: number | string;
@@ -1,7 +1,7 @@
 import { useContext } from 'react';

 import IconMicrosoftCalendarRaw from '@assets/icons/microsoft-calendar.svg?react';
-import { ThemeContext } from '@ui/theme';
+import { ThemeContext } from '@ui/theme-constants';

 interface IconMicrosoftCalendarProps {
  size?: number | string;
@@ -1,7 +1,7 @@
 import { useContext } from 'react';

 import IconMicrosoftOutlookRaw from '@assets/icons/microsoft-outlook.svg?react';
-import { ThemeContext } from '@ui/theme';
+import { ThemeContext } from '@ui/theme-constants';

 interface IconMicrosoftOutlookProps {
  size?: number | string;
@@ -2,7 +2,7 @@ import { useContext } from 'react';

 import IconRelationManyToOneRaw from '@assets/icons/many-to-one.svg?react';
 import { type IconComponentProps } from '@ui/display/icon/types/IconComponent';
-import { ThemeContext } from '@ui/theme';
+import { ThemeContext } from '@ui/theme-constants';

 type IconRelationManyToOneProps = Pick<IconComponentProps, 'size' | 'stroke'>;

@@ -2,7 +2,7 @@ import { useContext } from 'react';

 import IconTrashXOffRaw from '@assets/icons/trash-x-off.svg?react';
 import { type IconComponentProps } from '@ui/display/icon/types/IconComponent';
-import { ThemeContext } from '@ui/theme';
+import { ThemeContext } from '@ui/theme-constants';

 type IconTrashXOffProps = Pick<IconComponentProps, 'size' | 'stroke'>;

@@ -2,7 +2,7 @@ import { useContext } from 'react';

 import IconTwentyStarRaw from '@assets/icons/twenty-star.svg?react';
 import { type IconComponentProps } from '@ui/display/icon/types/IconComponent';
-import { ThemeContext } from '@ui/theme';
+import { ThemeContext } from '@ui/theme-constants';

 type IconTwentyStarProps = Pick<IconComponentProps, 'size' | 'stroke'>;

@@ -1,14 +1,15 @@
+import { useContext } from 'react';
+
 import IconTwentyStarFilledRaw from '@assets/icons/twenty-star-filled.svg?react';
 import { type IconComponentProps } from '@ui/display/icon/types/IconComponent';
-import { THEME_COMMON } from '@ui/theme';
+import { ThemeContext } from '@ui/theme-constants';

 type IconTwentyStarFilledProps = Pick<IconComponentProps, 'size' | 'stroke'>;

-const iconStrokeMd = THEME_COMMON.icon.stroke.md;
-
 export const IconTwentyStarFilled = (props: IconTwentyStarFilledProps) => {
+  const { theme } = useContext(ThemeContext);
  const size = props.size ?? 24;
-  const stroke = props.stroke ?? iconStrokeMd;
+  const stroke = props.stroke ?? theme.icon.stroke.md;

  return (
    <IconTwentyStarFilledRaw height={size} width={size} strokeWidth={stroke} />
@@ -1,8 +1,10 @@
-import IllustrationIconArrayRaw from '@assets/icons/illustration-array.svg?react';
 import { useContext } from 'react';
+
+import IllustrationIconArrayRaw from '@assets/icons/illustration-array.svg?react';
 import { IllustrationIconWrapper } from '@ui/display/icon/components/IllustrationIconWrapper';
 import { type IconComponentProps } from '@ui/display/icon/types/IconComponent';
-import { ThemeContext } from '@ui/theme';
+import { ThemeContext } from '@ui/theme-constants';
+
 type IllustrationIconArrayProps = Pick<IconComponentProps, 'size'>;

 export const IllustrationIconArray = (props: IllustrationIconArrayProps) => {
@@ -1,8 +1,10 @@
-import IllustrationIconCalendarEventRaw from '@assets/icons/illustration-calendar-event.svg?react';
 import { useContext } from 'react';
+
+import IllustrationIconCalendarEventRaw from '@assets/icons/illustration-calendar-event.svg?react';
 import { IllustrationIconWrapper } from '@ui/display/icon/components/IllustrationIconWrapper';
 import { type IconComponentProps } from '@ui/display/icon/types/IconComponent';
-import { ThemeContext } from '@ui/theme';
+import { ThemeContext } from '@ui/theme-constants';
+
 type IllustrationIconCalendarEventProps = Pick<IconComponentProps, 'size'>;

 export const IllustrationIconCalendarEvent = (
@@ -1,8 +1,9 @@
-import IllustrationIconCalendarTimeRaw from '@assets/icons/illustration-calendar-time.svg?react';
 import { useContext } from 'react';
+
+import IllustrationIconCalendarTimeRaw from '@assets/icons/illustration-calendar-time.svg?react';
 import { IllustrationIconWrapper } from '@ui/display/icon/components/IllustrationIconWrapper';
 import { type IconComponentProps } from '@ui/display/icon/types/IconComponent';
-import { ThemeContext } from '@ui/theme';
+import { ThemeContext } from '@ui/theme-constants';

 type IllustrationIconCalendarTimeProps = Pick<IconComponentProps, 'size'>;

@@ -1,9 +1,9 @@
 import { useContext } from 'react';
-import { IllustrationIconWrapper } from '@ui/display/icon/components/IllustrationIconWrapper';

 import IllustrationIconCurrencyRaw from '@assets/icons/illustration-currency.svg?react';
+import { IllustrationIconWrapper } from '@ui/display/icon/components/IllustrationIconWrapper';
 import { type IconComponentProps } from '@ui/display/icon/types/IconComponent';
-import { ThemeContext } from '@ui/theme';
+import { ThemeContext } from '@ui/theme-constants';

 type IllustrationIconCurrencyProps = Pick<IconComponentProps, 'size'>;

@@ -1,9 +1,9 @@
 import { useContext } from 'react';
-import { IllustrationIconWrapper } from '@ui/display/icon/components/IllustrationIconWrapper';

 import IllustrationIconFileRaw from '@assets/icons/illustration-file.svg?react';
+import { IllustrationIconWrapper } from '@ui/display/icon/components/IllustrationIconWrapper';
 import { type IconComponentProps } from '@ui/display/icon/types/IconComponent';
-import { ThemeContext } from '@ui/theme';
+import { ThemeContext } from '@ui/theme-constants';

 type IllustrationIconFileProps = Pick<IconComponentProps, 'size'>;

@@ -1,9 +1,9 @@
 import { useContext } from 'react';
-import { IllustrationIconWrapper } from '@ui/display/icon/components/IllustrationIconWrapper';

 import IllustrationIconJsonRaw from '@assets/icons/illustration-json.svg?react';
+import { IllustrationIconWrapper } from '@ui/display/icon/components/IllustrationIconWrapper';
 import { type IconComponentProps } from '@ui/display/icon/types/IconComponent';
-import { ThemeContext } from '@ui/theme';
+import { ThemeContext } from '@ui/theme-constants';

 type IllustrationIconJsonProps = Pick<IconComponentProps, 'size'>;

@@ -1,9 +1,9 @@
 import { useContext } from 'react';
-import { IllustrationIconWrapper } from '@ui/display/icon/components/IllustrationIconWrapper';

 import IllustrationIconLinkRaw from '@assets/icons/illustration-link.svg?react';
+import { IllustrationIconWrapper } from '@ui/display/icon/components/IllustrationIconWrapper';
 import { type IconComponentProps } from '@ui/display/icon/types/IconComponent';
-import { ThemeContext } from '@ui/theme';
+import { ThemeContext } from '@ui/theme-constants';

 type IllustrationIconLinkProps = Pick<IconComponentProps, 'size'>;

@@ -1,8 +1,9 @@
-import IllustrationIconMailRaw from '@assets/icons/illustration-mail.svg?react';
 import { useContext } from 'react';
+
+import IllustrationIconMailRaw from '@assets/icons/illustration-mail.svg?react';
 import { IllustrationIconWrapper } from '@ui/display/icon/components/IllustrationIconWrapper';
 import { type IconComponentProps } from '@ui/display/icon/types/IconComponent';
-import { ThemeContext } from '@ui/theme';
+import { ThemeContext } from '@ui/theme-constants';

 type IllustrationIconMailProps = Pick<IconComponentProps, 'size'>;

@@ -1,8 +1,9 @@
-import IllustrationIconManyToManyRaw from '@assets/icons/illustration-many-to-many.svg?react';
 import { useContext } from 'react';
+
+import IllustrationIconManyToManyRaw from '@assets/icons/illustration-many-to-many.svg?react';
 import { IllustrationIconWrapper } from '@ui/display/icon/components/IllustrationIconWrapper';
 import { type IconComponentProps } from '@ui/display/icon/types/IconComponent';
-import { ThemeContext } from '@ui/theme';
+import { ThemeContext } from '@ui/theme-constants';

 type IllustrationIconManyToManyProps = Pick<IconComponentProps, 'size'>;

@@ -1,8 +1,9 @@
-import IllustrationIconMapRaw from '@assets/icons/illustration-map.svg?react';
 import { useContext } from 'react';
+
+import IllustrationIconMapRaw from '@assets/icons/illustration-map.svg?react';
 import { IllustrationIconWrapper } from '@ui/display/icon/components/IllustrationIconWrapper';
 import { type IconComponentProps } from '@ui/display/icon/types/IconComponent';
-import { ThemeContext } from '@ui/theme';
+import { ThemeContext } from '@ui/theme-constants';

 type IllustrationIconMapProps = Pick<IconComponentProps, 'size'>;

@@ -1,8 +1,9 @@
-import IllustrationIconNumbersRaw from '@assets/icons/illustration-numbers.svg?react';
 import { useContext } from 'react';
+
+import IllustrationIconNumbersRaw from '@assets/icons/illustration-numbers.svg?react';
 import { IllustrationIconWrapper } from '@ui/display/icon/components/IllustrationIconWrapper';
 import { type IconComponentProps } from '@ui/display/icon/types/IconComponent';
-import { ThemeContext } from '@ui/theme';
+import { ThemeContext } from '@ui/theme-constants';

 type IllustrationIconNumbersProps = Pick<IconComponentProps, 'size'>;

@@ -1,9 +1,9 @@
 import { useContext } from 'react';
-import { IllustrationIconWrapper } from '@ui/display/icon/components/IllustrationIconWrapper';

 import IllustrationIconOneToManyRaw from '@assets/icons/illustration-one-to-many.svg?react';
+import { IllustrationIconWrapper } from '@ui/display/icon/components/IllustrationIconWrapper';
 import { type IconComponentProps } from '@ui/display/icon/types/IconComponent';
-import { ThemeContext } from '@ui/theme';
+import { ThemeContext } from '@ui/theme-constants';

 type IllustrationIconOneToManyProps = Pick<IconComponentProps, 'size'>;

@@ -1,9 +1,9 @@
 import { useContext } from 'react';
-import { IllustrationIconWrapper } from '@ui/display/icon/components/IllustrationIconWrapper';

 import IllustrationIconOneToOneRaw from '@assets/icons/illustration-one-to-one.svg?react';
+import { IllustrationIconWrapper } from '@ui/display/icon/components/IllustrationIconWrapper';
 import { type IconComponentProps } from '@ui/display/icon/types/IconComponent';
-import { ThemeContext } from '@ui/theme';
+import { ThemeContext } from '@ui/theme-constants';

 type IllustrationIconOneToOneProps = Pick<IconComponentProps, 'size'>;

@@ -1,9 +1,9 @@
 import { useContext } from 'react';
-import { IllustrationIconWrapper } from '@ui/display/icon/components/IllustrationIconWrapper';

 import IllustrationIconPhoneRaw from '@assets/icons/illustration-phone.svg?react';
+import { IllustrationIconWrapper } from '@ui/display/icon/components/IllustrationIconWrapper';
 import { type IconComponentProps } from '@ui/display/icon/types/IconComponent';
-import { ThemeContext } from '@ui/theme';
+import { ThemeContext } from '@ui/theme-constants';

 type IllustrationIconPhoneProps = Pick<IconComponentProps, 'size'>;

@@ -1,9 +1,9 @@
 import { useContext } from 'react';
-import { IllustrationIconWrapper } from '@ui/display/icon/components/IllustrationIconWrapper';

 import IllustrationIconSettingRaw from '@assets/icons/illustration-setting.svg?react';
+import { IllustrationIconWrapper } from '@ui/display/icon/components/IllustrationIconWrapper';
 import { type IconComponentProps } from '@ui/display/icon/types/IconComponent';
-import { ThemeContext } from '@ui/theme';
+import { ThemeContext } from '@ui/theme-constants';

 type IllustrationIconSettingProps = Pick<IconComponentProps, 'size'>;

@@ -1,9 +1,9 @@
 import { useContext } from 'react';
-import { IllustrationIconWrapper } from '@ui/display/icon/components/IllustrationIconWrapper';

 import IllustrationIconStarRaw from '@assets/icons/illustration-star.svg?react';
+import { IllustrationIconWrapper } from '@ui/display/icon/components/IllustrationIconWrapper';
 import { type IconComponentProps } from '@ui/display/icon/types/IconComponent';
-import { ThemeContext } from '@ui/theme';
+import { ThemeContext } from '@ui/theme-constants';

 type IllustrationIconStarProps = Pick<IconComponentProps, 'size'>;

@@ -1,9 +1,9 @@
 import { useContext } from 'react';
-import { IllustrationIconWrapper } from '@ui/display/icon/components/IllustrationIconWrapper';

 import IllustrationIconTagRaw from '@assets/icons/illustration-tag.svg?react';
+import { IllustrationIconWrapper } from '@ui/display/icon/components/IllustrationIconWrapper';
 import { type IconComponentProps } from '@ui/display/icon/types/IconComponent';
-import { ThemeContext } from '@ui/theme';
+import { ThemeContext } from '@ui/theme-constants';

 type IllustrationIconTagProps = Pick<IconComponentProps, 'size'>;

@@ -1,9 +1,9 @@
 import { useContext } from 'react';
-import { IllustrationIconWrapper } from '@ui/display/icon/components/IllustrationIconWrapper';

 import IllustrationIconTagsRaw from '@assets/icons/illustration-tags.svg?react';
+import { IllustrationIconWrapper } from '@ui/display/icon/components/IllustrationIconWrapper';
 import { type IconComponentProps } from '@ui/display/icon/types/IconComponent';
-import { ThemeContext } from '@ui/theme';
+import { ThemeContext } from '@ui/theme-constants';

 type IllustrationIconTagsProps = Pick<IconComponentProps, 'size'>;

@@ -1,9 +1,9 @@
 import { useContext } from 'react';
-import { IllustrationIconWrapper } from '@ui/display/icon/components/IllustrationIconWrapper';

 import IllustrationIconTextRaw from '@assets/icons/illustration-text.svg?react';
+import { IllustrationIconWrapper } from '@ui/display/icon/components/IllustrationIconWrapper';
 import { type IconComponentProps } from '@ui/display/icon/types/IconComponent';
-import { ThemeContext } from '@ui/theme';
+import { ThemeContext } from '@ui/theme-constants';

 type IllustrationIconTextProps = Pick<IconComponentProps, 'size'>;

@@ -1,9 +1,9 @@
 import { useContext } from 'react';
-import { IllustrationIconWrapper } from '@ui/display/icon/components/IllustrationIconWrapper';

 import IllustrationIconToggleRaw from '@assets/icons/illustration-toggle.svg?react';
+import { IllustrationIconWrapper } from '@ui/display/icon/components/IllustrationIconWrapper';
 import { type IconComponentProps } from '@ui/display/icon/types/IconComponent';
-import { ThemeContext } from '@ui/theme';
+import { ThemeContext } from '@ui/theme-constants';

 type IllustrationIconToggleProps = Pick<IconComponentProps, 'size'>;

@@ -1,9 +1,9 @@
 import { useContext } from 'react';
-import { IllustrationIconWrapper } from '@ui/display/icon/components/IllustrationIconWrapper';

 import IllustrationIconUidRaw from '@assets/icons/illustration-uid.svg?react';
+import { IllustrationIconWrapper } from '@ui/display/icon/components/IllustrationIconWrapper';
 import { type IconComponentProps } from '@ui/display/icon/types/IconComponent';
-import { ThemeContext } from '@ui/theme';
+import { ThemeContext } from '@ui/theme-constants';

 type IllustrationIconUidProps = Pick<IconComponentProps, 'size'>;

@@ -1,9 +1,9 @@
 import { useContext } from 'react';
-import { IllustrationIconWrapper } from '@ui/display/icon/components/IllustrationIconWrapper';

 import IllustrationIconUserRaw from '@assets/icons/illustration-user.svg?react';
+import { IllustrationIconWrapper } from '@ui/display/icon/components/IllustrationIconWrapper';
 import { type IconComponentProps } from '@ui/display/icon/types/IconComponent';
-import { ThemeContext } from '@ui/theme';
+import { ThemeContext } from '@ui/theme-constants';

 type IllustrationIconUserProps = Pick<IconComponentProps, 'size'>;

@@ -1,5 +1,5 @@
 import { renderHook } from '@testing-library/react';
-import * as jotai from 'jotai';
+import { Provider } from 'jotai';

 import {
  Icon123,
@@ -8,17 +8,20 @@ import {
 } from '@ui/display/icon/components/TablerIcons';
 import { useIcons } from '@ui/display/icon/hooks/useIcons';

+const mockedStateIcons = {
+  IconUser,
+  Icon123,
+  IconBuildingSkyscraper,
+};
+
+jest.mock('jotai', () => ({
+  ...jest.requireActual('jotai'),
+  useAtomValue: () => mockedStateIcons,
+}));
+
 describe('useIcons', () => {
-  const mockedStateIcons = {
-    IconUser,
-    Icon123,
-    IconBuildingSkyscraper,
-  };
-  jest
-    .spyOn(jotai, 'useAtomValue')
-    .mockImplementationOnce(() => mockedStateIcons);
  const { result } = renderHook(() => useIcons(), {
-    wrapper: jotai.Provider,
+    wrapper: Provider,
  });

  it('returns default icon when no icon key is provided', () => {
@@ -1,9 +1,9 @@
 import { styled } from '@linaria/react';
 import { IconInfoCircle } from '@ui/display/icon/components/TablerIcons';
-import { ICON_SIZES, themeCssVariables } from '@ui/theme-constants';
+import { ThemeContext, themeCssVariables } from '@ui/theme-constants';

 import { Button } from '@ui/input/button/components/Button/Button';
-import React from 'react';
+import React, { useContext } from 'react';
 import { Link } from 'react-router-dom';

 export type InfoAccent = 'blue' | 'danger';
@@ -69,10 +69,12 @@ export const Info = ({
  onClick,
  to,
 }: InfoProps) => {
+  const { theme } = useContext(ThemeContext);
+
  return (
    <StyledInfo accent={accent}>
      <StyledTextContainer>
-        <IconInfoCircle size={ICON_SIZES.md} />
+        <IconInfoCircle size={theme.icon.size.md} />
        {text}
      </StyledTextContainer>
      {buttonTitle && to && (
@@ -1,8 +1,7 @@
 import { styled } from '@linaria/react';
-import { MAIN_COLOR_NAMES, type ThemeColor } from '@ui/theme';
-import { themeCssVariables } from '@ui/theme-constants';
-
 import { Loader } from '@ui/feedback/loader/components/Loader';
+import { type ThemeColor, MAIN_COLOR_NAMES } from '@ui/theme';
+import { themeCssVariables } from '@ui/theme-constants';

 const parseThemeColor = (color: string): ThemeColor =>
  (MAIN_COLOR_NAMES as string[]).includes(color)
@@ -4,7 +4,7 @@ import {
  type CatalogStory,
  ComponentDecorator,
 } from '@ui/testing';
-import { MAIN_COLOR_NAMES, type ThemeColor } from '@ui/theme';
+import { type ThemeColor, MAIN_COLOR_NAMES } from '@ui/theme';
 import { expect, fn, userEvent, within } from 'storybook/test';

 import { Status } from '../Status';
@@ -3,11 +3,11 @@ import { type ReactNode, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';

 import { isNonEmptyString } from '@sniptt/guards';
-import { THEME_COMMON } from '@ui/theme';
 import { isDefined } from 'twenty-shared/utils';
+import { themeCssVariables } from '@ui/theme-constants';
 import { AppTooltip, TooltipDelay } from './AppTooltip';

-const spacing4 = THEME_COMMON.spacing(4);
+const spacing4 = themeCssVariables.spacing[4];

 const StyledOverflowingMultilineText = styled.div<{
  isContentOverflowing: boolean;