diff --git a/packages/twenty-ui/src/data-display/Tag/Tag.tsx b/packages/twenty-ui/src/data-display/Tag/Tag.tsx
index 93cc7c4152..3d74772527 100644
--- a/packages/twenty-ui/src/data-display/Tag/Tag.tsx
+++ b/packages/twenty-ui/src/data-display/Tag/Tag.tsx
@@ -1,9 +1,8 @@
import { type IconComponent } from '@ui/icon/types/IconComponent';
import { OverflowingTextWithTooltip } from '@ui/surfaces/OverflowingTextWithTooltip/OverflowingTextWithTooltip';
import { type ThemeColor } from '@ui/theme';
-import { ThemeContext, themeCssVariables } from '@ui/theme-constants';
+import { themeCssVariables, useTheme } from '@ui/theme-constants';
import { clsx } from 'clsx';
-import { useContext } from 'react';
import { isDefined } from '@ui/utilities/utils/isDefined';
import styles from './Tag.module.scss';
@@ -35,7 +34,7 @@ export const Tag = ({
preventShrink,
preventPadding,
}: TagProps) => {
- const { theme } = useContext(ThemeContext);
+ const theme = useTheme();
const tagBackground =
color === 'transparent'
diff --git a/packages/twenty-ui/src/data-display/TintedIconTile/TintedIconTile.tsx b/packages/twenty-ui/src/data-display/TintedIconTile/TintedIconTile.tsx
index 3f1c9eae5c..23ce0e6747 100644
--- a/packages/twenty-ui/src/data-display/TintedIconTile/TintedIconTile.tsx
+++ b/packages/twenty-ui/src/data-display/TintedIconTile/TintedIconTile.tsx
@@ -2,8 +2,7 @@ import { type IconComponent } from '@ui/icon/types/IconComponent';
import { StyledTintedIconTileContainer } from '@ui/data-display/StyledTintedIconTileContainer/StyledTintedIconTileContainer';
import { getIconTileColorShades } from '@ui/data-display/TintedIconTile/utils/getIconTileColorShades';
import { DEFAULT_THEME_COLOR_FALLBACK } from '@ui/theme';
-import { ThemeContext } from '@ui/theme-constants';
-import { useContext } from 'react';
+import { useTheme } from '@ui/theme-constants';
import { isDefined } from '@ui/utilities/utils/isDefined';
export type TintedIconTileProps = {
@@ -19,7 +18,7 @@ export const TintedIconTile = ({
size: sizeFromProps,
stroke: strokeFromProps,
}: TintedIconTileProps) => {
- const { theme } = useContext(ThemeContext);
+ const theme = useTheme();
const style = getIconTileColorShades(color);
const iconSize = sizeFromProps ?? theme.icon.size.md;
const iconStroke = strokeFromProps ?? theme.icon.stroke.md;
diff --git a/packages/twenty-ui/src/feedback/AnimatedPlaceholder/AnimatedPlaceholder.tsx b/packages/twenty-ui/src/feedback/AnimatedPlaceholder/AnimatedPlaceholder.tsx
index 7857f943ca..48103dd170 100644
--- a/packages/twenty-ui/src/feedback/AnimatedPlaceholder/AnimatedPlaceholder.tsx
+++ b/packages/twenty-ui/src/feedback/AnimatedPlaceholder/AnimatedPlaceholder.tsx
@@ -1,12 +1,12 @@
import { clsx } from 'clsx';
import { animate, motion, useMotionValue, useTransform } from 'framer-motion';
-import { useContext, useEffect } from 'react';
+import { useEffect } from 'react';
import { BACKGROUND } from '@ui/feedback/AnimatedPlaceholder/constants/Background';
import { DARK_BACKGROUND } from '@ui/feedback/AnimatedPlaceholder/constants/DarkBackground';
import { DARK_MOVING_IMAGE } from '@ui/feedback/AnimatedPlaceholder/constants/DarkMovingImage';
import { MOVING_IMAGE } from '@ui/feedback/AnimatedPlaceholder/constants/MovingImage';
-import { ThemeContext } from '@ui/theme-constants';
+import { useThemeColorScheme } from '@ui/theme-constants';
import styles from './AnimatedPlaceholder.module.scss';
@@ -22,7 +22,7 @@ type AnimatedPlaceholderProps = {
};
export const AnimatedPlaceholder = ({ type }: AnimatedPlaceholderProps) => {
- const { colorScheme } = useContext(ThemeContext);
+ const colorScheme = useThemeColorScheme();
const x = useMotionValue(window.innerWidth / 2);
const y = useMotionValue(window.innerHeight / 2);
diff --git a/packages/twenty-ui/src/feedback/Info/Info.tsx b/packages/twenty-ui/src/feedback/Info/Info.tsx
index 70c67ed6a2..8616dbc342 100644
--- a/packages/twenty-ui/src/feedback/Info/Info.tsx
+++ b/packages/twenty-ui/src/feedback/Info/Info.tsx
@@ -1,9 +1,9 @@
import { clsx } from 'clsx';
import { IconInfoCircle } from '@ui/icon/components/TablerIcons';
-import { ThemeContext } from '@ui/theme-constants';
+import { useTheme } from '@ui/theme-constants';
import { Button } from '@ui/input/Button/Button';
-import React, { useContext } from 'react';
+import React from 'react';
import { Link } from 'react-router-dom';
import styles from './Info.module.scss';
@@ -29,7 +29,7 @@ export const Info = ({
onClick,
to,
}: InfoProps) => {
- const { theme } = useContext(ThemeContext);
+ const theme = useTheme();
return (
diff --git a/packages/twenty-ui/src/feedback/InlineBanner/InlineBanner.tsx b/packages/twenty-ui/src/feedback/InlineBanner/InlineBanner.tsx
index eece4d1f40..cfcee4e333 100644
--- a/packages/twenty-ui/src/feedback/InlineBanner/InlineBanner.tsx
+++ b/packages/twenty-ui/src/feedback/InlineBanner/InlineBanner.tsx
@@ -1,6 +1,5 @@
import { clsx } from 'clsx';
-import { useContext } from 'react';
-import { ThemeContext } from '@ui/theme-constants';
+import { useTheme } from '@ui/theme-constants';
import { Button } from '@ui/input/Button/Button';
import { type IconComponent } from '@ui/icon/types/IconComponent';
import { IconInfoCircle } from '@ui/icon/components/TablerIcons';
@@ -27,7 +26,7 @@ export const InlineBanner = ({
LeftIcon = IconInfoCircle,
className,
}: InlineBannerProps) => {
- const { theme } = useContext(ThemeContext);
+ const theme = useTheme();
return (
;
export const IconAddressBook = (props: IconAddressBookProps) => {
- const { theme } = useContext(ThemeContext);
+ const theme = useTheme();
const size = props.size ?? 24;
const stroke = props.stroke ?? theme.icon.stroke.md;
diff --git a/packages/twenty-ui/src/icon/components/IconBrandAnthropic.tsx b/packages/twenty-ui/src/icon/components/IconBrandAnthropic.tsx
index aae6cdf4ed..f7980f71f1 100644
--- a/packages/twenty-ui/src/icon/components/IconBrandAnthropic.tsx
+++ b/packages/twenty-ui/src/icon/components/IconBrandAnthropic.tsx
@@ -1,13 +1,11 @@
-import { useContext } from 'react';
-
import IconAnthropicRaw from '@assets/icons/anthropic.svg?react';
import { type IconComponentProps } from '@ui/icon/types/IconComponent';
-import { ThemeContext } from '@ui/theme-constants';
+import { useTheme } from '@ui/theme-constants';
type IconBrandAnthropicProps = Pick;
export const IconBrandAnthropic = (props: IconBrandAnthropicProps) => {
- const { theme } = useContext(ThemeContext);
+ const theme = useTheme();
const size = props.size ?? theme.icon.size.lg;
return ;
diff --git a/packages/twenty-ui/src/icon/components/IconBrandGemini.tsx b/packages/twenty-ui/src/icon/components/IconBrandGemini.tsx
index 950fc9c83e..4dd6e526bd 100644
--- a/packages/twenty-ui/src/icon/components/IconBrandGemini.tsx
+++ b/packages/twenty-ui/src/icon/components/IconBrandGemini.tsx
@@ -1,13 +1,11 @@
-import { useContext } from 'react';
-
import IconBrandGeminiRaw from '@assets/icons/gemini.svg?react';
import { type IconComponentProps } from '@ui/icon/types/IconComponent';
-import { ThemeContext } from '@ui/theme-constants';
+import { useTheme } from '@ui/theme-constants';
type IconBrandGeminiProps = Pick;
export const IconBrandGemini = (props: IconBrandGeminiProps) => {
- const { theme } = useContext(ThemeContext);
+ const theme = useTheme();
const size = props.size ?? theme.icon.size.lg;
return ;
diff --git a/packages/twenty-ui/src/icon/components/IconBrandGroq.tsx b/packages/twenty-ui/src/icon/components/IconBrandGroq.tsx
index a6c420da20..610a4ffd43 100644
--- a/packages/twenty-ui/src/icon/components/IconBrandGroq.tsx
+++ b/packages/twenty-ui/src/icon/components/IconBrandGroq.tsx
@@ -1,13 +1,11 @@
-import { useContext } from 'react';
-
import IconBrandGroqRaw from '@assets/icons/groq.svg?react';
import { type IconComponentProps } from '@ui/icon/types/IconComponent';
-import { ThemeContext } from '@ui/theme-constants';
+import { useTheme } from '@ui/theme-constants';
type IconBrandGroqProps = Pick;
export const IconBrandGroq = (props: IconBrandGroqProps) => {
- const { theme } = useContext(ThemeContext);
+ const theme = useTheme();
const size = props.size ?? theme.icon.size.lg;
return ;
diff --git a/packages/twenty-ui/src/icon/components/IconBrandMistral.tsx b/packages/twenty-ui/src/icon/components/IconBrandMistral.tsx
index dfe4dbe44a..e5c390a51b 100644
--- a/packages/twenty-ui/src/icon/components/IconBrandMistral.tsx
+++ b/packages/twenty-ui/src/icon/components/IconBrandMistral.tsx
@@ -1,13 +1,11 @@
-import { useContext } from 'react';
-
import IconBrandMistralRaw from '@assets/icons/mistral.svg?react';
import { type IconComponentProps } from '@ui/icon/types/IconComponent';
-import { ThemeContext } from '@ui/theme-constants';
+import { useTheme } from '@ui/theme-constants';
type IconBrandMistralProps = Pick;
export const IconBrandMistral = (props: IconBrandMistralProps) => {
- const { theme } = useContext(ThemeContext);
+ const theme = useTheme();
const size = props.size ?? theme.icon.size.lg;
return ;
diff --git a/packages/twenty-ui/src/icon/components/IconBrandXai.tsx b/packages/twenty-ui/src/icon/components/IconBrandXai.tsx
index 9570edcd57..cccbcbc953 100644
--- a/packages/twenty-ui/src/icon/components/IconBrandXai.tsx
+++ b/packages/twenty-ui/src/icon/components/IconBrandXai.tsx
@@ -1,13 +1,11 @@
-import { useContext } from 'react';
-
import IconBrandXaiRaw from '@assets/icons/xai.svg?react';
import { type IconComponentProps } from '@ui/icon/types/IconComponent';
-import { ThemeContext } from '@ui/theme-constants';
+import { useTheme } from '@ui/theme-constants';
type IconBrandXaiProps = Pick;
export const IconBrandXai = (props: IconBrandXaiProps) => {
- const { theme } = useContext(ThemeContext);
+ const theme = useTheme();
const size = props.size ?? theme.icon.size.lg;
return (
diff --git a/packages/twenty-ui/src/icon/components/IconChartBarHorizontal.tsx b/packages/twenty-ui/src/icon/components/IconChartBarHorizontal.tsx
index 268b4d839a..94f3d32c76 100644
--- a/packages/twenty-ui/src/icon/components/IconChartBarHorizontal.tsx
+++ b/packages/twenty-ui/src/icon/components/IconChartBarHorizontal.tsx
@@ -1,8 +1,6 @@
-import { useContext } from 'react';
-
import { IconChartBar } from '@ui/icon/components/TablerIcons';
import { type IconComponentProps } from '@ui/icon/types/IconComponent';
-import { ThemeContext } from '@ui/theme-constants';
+import { useTheme } from '@ui/theme-constants';
import styles from './IconChartBarHorizontal.module.scss';
@@ -12,7 +10,7 @@ type IconChartBarHorizontalProps = Pick<
>;
export const IconChartBarHorizontal = (props: IconChartBarHorizontalProps) => {
- const { theme } = useContext(ThemeContext);
+ const theme = useTheme();
const size = props.size ?? theme.icon.size.md;
const stroke = props.stroke ?? theme.icon.stroke.sm;
diff --git a/packages/twenty-ui/src/icon/components/IconGmail.tsx b/packages/twenty-ui/src/icon/components/IconGmail.tsx
index c270f9efc0..79b2680650 100644
--- a/packages/twenty-ui/src/icon/components/IconGmail.tsx
+++ b/packages/twenty-ui/src/icon/components/IconGmail.tsx
@@ -1,13 +1,11 @@
-import { useContext } from 'react';
-
import IconGmailRaw from '@assets/icons/gmail.svg?react';
import { type IconComponentProps } from '@ui/icon/types/IconComponent';
-import { ThemeContext } from '@ui/theme-constants';
+import { useTheme } from '@ui/theme-constants';
type IconGmailProps = Pick;
export const IconGmail = (props: IconGmailProps) => {
- const { theme } = useContext(ThemeContext);
+ const theme = useTheme();
const size = props.size ?? theme.icon.size.lg;
return ;
diff --git a/packages/twenty-ui/src/icon/components/IconGoogle.tsx b/packages/twenty-ui/src/icon/components/IconGoogle.tsx
index 3547b2dece..d88bda5f05 100644
--- a/packages/twenty-ui/src/icon/components/IconGoogle.tsx
+++ b/packages/twenty-ui/src/icon/components/IconGoogle.tsx
@@ -1,13 +1,11 @@
-import { useContext } from 'react';
-
import IconGoogleRaw from '@assets/icons/google.svg?react';
import { type IconComponentProps } from '@ui/icon/types/IconComponent';
-import { ThemeContext } from '@ui/theme-constants';
+import { useTheme } from '@ui/theme-constants';
type IconGoogleProps = Pick;
export const IconGoogle = (props: IconGoogleProps) => {
- const { theme } = useContext(ThemeContext);
+ const theme = useTheme();
const size = props.size ?? theme.icon.size.lg;
return ;
diff --git a/packages/twenty-ui/src/icon/components/IconGoogleCalendar.tsx b/packages/twenty-ui/src/icon/components/IconGoogleCalendar.tsx
index d9d3599de9..86f2de6843 100644
--- a/packages/twenty-ui/src/icon/components/IconGoogleCalendar.tsx
+++ b/packages/twenty-ui/src/icon/components/IconGoogleCalendar.tsx
@@ -1,13 +1,11 @@
-import { useContext } from 'react';
-
import IconGoogleCalendarRaw from '@assets/icons/google-calendar.svg?react';
import { type IconComponentProps } from '@ui/icon/types/IconComponent';
-import { ThemeContext } from '@ui/theme-constants';
+import { useTheme } from '@ui/theme-constants';
type IconGoogleCalendarProps = Pick;
export const IconGoogleCalendar = (props: IconGoogleCalendarProps) => {
- const { theme } = useContext(ThemeContext);
+ const theme = useTheme();
const size = props.size ?? theme.icon.size.lg;
return ;
diff --git a/packages/twenty-ui/src/icon/components/IconLock.tsx b/packages/twenty-ui/src/icon/components/IconLock.tsx
index 7afe848b60..810b5eeaab 100644
--- a/packages/twenty-ui/src/icon/components/IconLock.tsx
+++ b/packages/twenty-ui/src/icon/components/IconLock.tsx
@@ -1,13 +1,11 @@
-import { useContext } from 'react';
-
import IconLockRaw from '@assets/icons/lock.svg?react';
import { type IconComponentProps } from '@ui/icon/types/IconComponent';
-import { ThemeContext } from '@ui/theme-constants';
+import { useTheme } from '@ui/theme-constants';
type IconLockCustomProps = Pick;
export const IconLockCustom = (props: IconLockCustomProps) => {
- const { theme } = useContext(ThemeContext);
+ const theme = useTheme();
const size = props.size ?? theme.icon.size.lg;
return ;
diff --git a/packages/twenty-ui/src/icon/components/IconMicrosoft.tsx b/packages/twenty-ui/src/icon/components/IconMicrosoft.tsx
index 5bc803f493..e322fe2e41 100644
--- a/packages/twenty-ui/src/icon/components/IconMicrosoft.tsx
+++ b/packages/twenty-ui/src/icon/components/IconMicrosoft.tsx
@@ -1,14 +1,12 @@
-import { useContext } from 'react';
-
import IconMicrosoftRaw from '@assets/icons/microsoft.svg?react';
-import { ThemeContext } from '@ui/theme-constants';
+import { useTheme } from '@ui/theme-constants';
interface IconMicrosoftProps {
size?: number | string;
}
export const IconMicrosoft = (props: IconMicrosoftProps) => {
- const { theme } = useContext(ThemeContext);
+ const theme = useTheme();
const size = props.size ?? theme.icon.size.lg;
return ;
diff --git a/packages/twenty-ui/src/icon/components/IconMicrosoftCalendar.tsx b/packages/twenty-ui/src/icon/components/IconMicrosoftCalendar.tsx
index 894fbebfda..484a191932 100644
--- a/packages/twenty-ui/src/icon/components/IconMicrosoftCalendar.tsx
+++ b/packages/twenty-ui/src/icon/components/IconMicrosoftCalendar.tsx
@@ -1,14 +1,12 @@
-import { useContext } from 'react';
-
import IconMicrosoftCalendarRaw from '@assets/icons/microsoft-calendar.svg?react';
-import { ThemeContext } from '@ui/theme-constants';
+import { useTheme } from '@ui/theme-constants';
interface IconMicrosoftCalendarProps {
size?: number | string;
}
export const IconMicrosoftCalendar = (props: IconMicrosoftCalendarProps) => {
- const { theme } = useContext(ThemeContext);
+ const theme = useTheme();
const size = props.size ?? theme.icon.size.lg;
return ;
diff --git a/packages/twenty-ui/src/icon/components/IconMicrosoftOutlook.tsx b/packages/twenty-ui/src/icon/components/IconMicrosoftOutlook.tsx
index 4e04adac43..65adbbf4d5 100644
--- a/packages/twenty-ui/src/icon/components/IconMicrosoftOutlook.tsx
+++ b/packages/twenty-ui/src/icon/components/IconMicrosoftOutlook.tsx
@@ -1,14 +1,12 @@
-import { useContext } from 'react';
-
import IconMicrosoftOutlookRaw from '@assets/icons/microsoft-outlook.svg?react';
-import { ThemeContext } from '@ui/theme-constants';
+import { useTheme } from '@ui/theme-constants';
interface IconMicrosoftOutlookProps {
size?: number | string;
}
export const IconMicrosoftOutlook = (props: IconMicrosoftOutlookProps) => {
- const { theme } = useContext(ThemeContext);
+ const theme = useTheme();
const size = props.size ?? theme.icon.size.lg;
return ;
diff --git a/packages/twenty-ui/src/icon/components/IconModelClaude.tsx b/packages/twenty-ui/src/icon/components/IconModelClaude.tsx
index ebdc8d08a1..a363c1adf0 100644
--- a/packages/twenty-ui/src/icon/components/IconModelClaude.tsx
+++ b/packages/twenty-ui/src/icon/components/IconModelClaude.tsx
@@ -1,13 +1,11 @@
-import { useContext } from 'react';
-
import IconModelClaudeRaw from '@assets/icons/claude.svg?react';
import { type IconComponentProps } from '@ui/icon/types/IconComponent';
-import { ThemeContext } from '@ui/theme-constants';
+import { useTheme } from '@ui/theme-constants';
type IconModelClaudeProps = Pick;
export const IconModelClaude = (props: IconModelClaudeProps) => {
- const { theme } = useContext(ThemeContext);
+ const theme = useTheme();
const size = props.size ?? theme.icon.size.lg;
return ;
diff --git a/packages/twenty-ui/src/icon/components/IconProviderOpenai.tsx b/packages/twenty-ui/src/icon/components/IconProviderOpenai.tsx
index b2cfd06877..e335b02c57 100644
--- a/packages/twenty-ui/src/icon/components/IconProviderOpenai.tsx
+++ b/packages/twenty-ui/src/icon/components/IconProviderOpenai.tsx
@@ -1,13 +1,11 @@
-import { useContext } from 'react';
-
import IconOpenaiRaw from '@assets/icons/openai.svg?react';
import { type IconComponentProps } from '@ui/icon/types/IconComponent';
-import { ThemeContext } from '@ui/theme-constants';
+import { useTheme } from '@ui/theme-constants';
type IconProviderOpenaiProps = Pick;
export const IconProviderOpenai = (props: IconProviderOpenaiProps) => {
- const { theme } = useContext(ThemeContext);
+ const theme = useTheme();
const size = props.size ?? theme.icon.size.lg;
return (
diff --git a/packages/twenty-ui/src/icon/components/IconRelationManyToOne.tsx b/packages/twenty-ui/src/icon/components/IconRelationManyToOne.tsx
index c29ad2ef8e..9366126b89 100644
--- a/packages/twenty-ui/src/icon/components/IconRelationManyToOne.tsx
+++ b/packages/twenty-ui/src/icon/components/IconRelationManyToOne.tsx
@@ -1,13 +1,11 @@
-import { useContext } from 'react';
-
import IconRelationManyToOneRaw from '@assets/icons/many-to-one.svg?react';
import { type IconComponentProps } from '@ui/icon/types/IconComponent';
-import { ThemeContext } from '@ui/theme-constants';
+import { useTheme } from '@ui/theme-constants';
type IconRelationManyToOneProps = Pick;
export const IconRelationManyToOne = (props: IconRelationManyToOneProps) => {
- const { theme } = useContext(ThemeContext);
+ const theme = useTheme();
const size = props.size ?? 24;
const stroke = props.stroke ?? theme.icon.stroke.md;
diff --git a/packages/twenty-ui/src/icon/components/IconTrashXOff.tsx b/packages/twenty-ui/src/icon/components/IconTrashXOff.tsx
index 576ca872cd..35bd053da1 100644
--- a/packages/twenty-ui/src/icon/components/IconTrashXOff.tsx
+++ b/packages/twenty-ui/src/icon/components/IconTrashXOff.tsx
@@ -1,13 +1,11 @@
-import { useContext } from 'react';
-
import IconTrashXOffRaw from '@assets/icons/trash-x-off.svg?react';
import { type IconComponentProps } from '@ui/icon/types/IconComponent';
-import { ThemeContext } from '@ui/theme-constants';
+import { useTheme } from '@ui/theme-constants';
type IconTrashXOffProps = Pick;
export const IconTrashXOff = (props: IconTrashXOffProps) => {
- const { theme } = useContext(ThemeContext);
+ const theme = useTheme();
const size = props.size ?? theme.icon.size.lg;
const stroke = props.stroke ?? theme.icon.stroke.md;
diff --git a/packages/twenty-ui/src/icon/components/IconTwentyStar.tsx b/packages/twenty-ui/src/icon/components/IconTwentyStar.tsx
index 04ee48ec5e..c6ea2bbc9a 100644
--- a/packages/twenty-ui/src/icon/components/IconTwentyStar.tsx
+++ b/packages/twenty-ui/src/icon/components/IconTwentyStar.tsx
@@ -1,13 +1,11 @@
-import { useContext } from 'react';
-
import IconTwentyStarRaw from '@assets/icons/twenty-star.svg?react';
import { type IconComponentProps } from '@ui/icon/types/IconComponent';
-import { ThemeContext } from '@ui/theme-constants';
+import { useTheme } from '@ui/theme-constants';
type IconTwentyStarProps = Pick;
export const IconTwentyStar = (props: IconTwentyStarProps) => {
- const { theme } = useContext(ThemeContext);
+ const theme = useTheme();
const size = props.size ?? 24;
const stroke = props.stroke ?? theme.icon.stroke.md;
diff --git a/packages/twenty-ui/src/icon/components/IconTwentyStarFilled.tsx b/packages/twenty-ui/src/icon/components/IconTwentyStarFilled.tsx
index 10564ab4d6..7c75f77081 100644
--- a/packages/twenty-ui/src/icon/components/IconTwentyStarFilled.tsx
+++ b/packages/twenty-ui/src/icon/components/IconTwentyStarFilled.tsx
@@ -1,13 +1,11 @@
-import { useContext } from 'react';
-
import IconTwentyStarFilledRaw from '@assets/icons/twenty-star-filled.svg?react';
import { type IconComponentProps } from '@ui/icon/types/IconComponent';
-import { ThemeContext } from '@ui/theme-constants';
+import { useTheme } from '@ui/theme-constants';
type IconTwentyStarFilledProps = Pick;
export const IconTwentyStarFilled = (props: IconTwentyStarFilledProps) => {
- const { theme } = useContext(ThemeContext);
+ const theme = useTheme();
const size = props.size ?? 24;
const stroke = props.stroke ?? theme.icon.stroke.md;
diff --git a/packages/twenty-ui/src/icon/components/IllustrationIconArray.tsx b/packages/twenty-ui/src/icon/components/IllustrationIconArray.tsx
index ecc730a065..ba5b52d493 100644
--- a/packages/twenty-ui/src/icon/components/IllustrationIconArray.tsx
+++ b/packages/twenty-ui/src/icon/components/IllustrationIconArray.tsx
@@ -1,14 +1,12 @@
-import { useContext } from 'react';
-
import IllustrationIconArrayRaw from '@assets/icons/illustration-array.svg?react';
import { IllustrationIconWrapper } from '@ui/icon/components/IllustrationIconWrapper';
import { type IconComponentProps } from '@ui/icon/types/IconComponent';
-import { ThemeContext } from '@ui/theme-constants';
+import { useTheme } from '@ui/theme-constants';
type IllustrationIconArrayProps = Pick;
export const IllustrationIconArray = (props: IllustrationIconArrayProps) => {
- const { theme } = useContext(ThemeContext);
+ const theme = useTheme();
const size = props.size ?? theme.icon.size.lg;
return (
diff --git a/packages/twenty-ui/src/icon/components/IllustrationIconCalendarEvent.tsx b/packages/twenty-ui/src/icon/components/IllustrationIconCalendarEvent.tsx
index aa3fb1904b..44fc355989 100644
--- a/packages/twenty-ui/src/icon/components/IllustrationIconCalendarEvent.tsx
+++ b/packages/twenty-ui/src/icon/components/IllustrationIconCalendarEvent.tsx
@@ -1,16 +1,14 @@
-import { useContext } from 'react';
-
import IllustrationIconCalendarEventRaw from '@assets/icons/illustration-calendar-event.svg?react';
import { IllustrationIconWrapper } from '@ui/icon/components/IllustrationIconWrapper';
import { type IconComponentProps } from '@ui/icon/types/IconComponent';
-import { ThemeContext } from '@ui/theme-constants';
+import { useTheme } from '@ui/theme-constants';
type IllustrationIconCalendarEventProps = Pick;
export const IllustrationIconCalendarEvent = (
props: IllustrationIconCalendarEventProps,
) => {
- const { theme } = useContext(ThemeContext);
+ const theme = useTheme();
const size = props.size ?? theme.icon.size.lg;
return (
diff --git a/packages/twenty-ui/src/icon/components/IllustrationIconCalendarTime.tsx b/packages/twenty-ui/src/icon/components/IllustrationIconCalendarTime.tsx
index ec963a74be..410233b579 100644
--- a/packages/twenty-ui/src/icon/components/IllustrationIconCalendarTime.tsx
+++ b/packages/twenty-ui/src/icon/components/IllustrationIconCalendarTime.tsx
@@ -1,16 +1,14 @@
-import { useContext } from 'react';
-
import IllustrationIconCalendarTimeRaw from '@assets/icons/illustration-calendar-time.svg?react';
import { IllustrationIconWrapper } from '@ui/icon/components/IllustrationIconWrapper';
import { type IconComponentProps } from '@ui/icon/types/IconComponent';
-import { ThemeContext } from '@ui/theme-constants';
+import { useTheme } from '@ui/theme-constants';
type IllustrationIconCalendarTimeProps = Pick;
export const IllustrationIconCalendarTime = (
props: IllustrationIconCalendarTimeProps,
) => {
- const { theme } = useContext(ThemeContext);
+ const theme = useTheme();
const size = props.size ?? theme.icon.size.lg;
return (
diff --git a/packages/twenty-ui/src/icon/components/IllustrationIconCurrency.tsx b/packages/twenty-ui/src/icon/components/IllustrationIconCurrency.tsx
index 52e06af18f..d9652899c5 100644
--- a/packages/twenty-ui/src/icon/components/IllustrationIconCurrency.tsx
+++ b/packages/twenty-ui/src/icon/components/IllustrationIconCurrency.tsx
@@ -1,16 +1,14 @@
-import { useContext } from 'react';
-
import IllustrationIconCurrencyRaw from '@assets/icons/illustration-currency.svg?react';
import { IllustrationIconWrapper } from '@ui/icon/components/IllustrationIconWrapper';
import { type IconComponentProps } from '@ui/icon/types/IconComponent';
-import { ThemeContext } from '@ui/theme-constants';
+import { useTheme } from '@ui/theme-constants';
type IllustrationIconCurrencyProps = Pick;
export const IllustrationIconCurrency = (
props: IllustrationIconCurrencyProps,
) => {
- const { theme } = useContext(ThemeContext);
+ const theme = useTheme();
const size = props.size ?? theme.icon.size.lg;
return (
diff --git a/packages/twenty-ui/src/icon/components/IllustrationIconFile.tsx b/packages/twenty-ui/src/icon/components/IllustrationIconFile.tsx
index 9b846e7e41..f276815bdb 100644
--- a/packages/twenty-ui/src/icon/components/IllustrationIconFile.tsx
+++ b/packages/twenty-ui/src/icon/components/IllustrationIconFile.tsx
@@ -1,14 +1,12 @@
-import { useContext } from 'react';
-
import IllustrationIconFileRaw from '@assets/icons/illustration-file.svg?react';
import { IllustrationIconWrapper } from '@ui/icon/components/IllustrationIconWrapper';
import { type IconComponentProps } from '@ui/icon/types/IconComponent';
-import { ThemeContext } from '@ui/theme-constants';
+import { useTheme } from '@ui/theme-constants';
type IllustrationIconFileProps = Pick;
export const IllustrationIconFile = (props: IllustrationIconFileProps) => {
- const { theme } = useContext(ThemeContext);
+ const theme = useTheme();
const size = props.size ?? theme.icon.size.lg;
return (
diff --git a/packages/twenty-ui/src/icon/components/IllustrationIconJson.tsx b/packages/twenty-ui/src/icon/components/IllustrationIconJson.tsx
index 66a4377b85..f1b7602d9d 100644
--- a/packages/twenty-ui/src/icon/components/IllustrationIconJson.tsx
+++ b/packages/twenty-ui/src/icon/components/IllustrationIconJson.tsx
@@ -1,14 +1,12 @@
-import { useContext } from 'react';
-
import IllustrationIconJsonRaw from '@assets/icons/illustration-json.svg?react';
import { IllustrationIconWrapper } from '@ui/icon/components/IllustrationIconWrapper';
import { type IconComponentProps } from '@ui/icon/types/IconComponent';
-import { ThemeContext } from '@ui/theme-constants';
+import { useTheme } from '@ui/theme-constants';
type IllustrationIconJsonProps = Pick;
export const IllustrationIconJson = (props: IllustrationIconJsonProps) => {
- const { theme } = useContext(ThemeContext);
+ const theme = useTheme();
const size = props.size ?? theme.icon.size.lg;
return (
diff --git a/packages/twenty-ui/src/icon/components/IllustrationIconLink.tsx b/packages/twenty-ui/src/icon/components/IllustrationIconLink.tsx
index caee86596d..3b7ce44a71 100644
--- a/packages/twenty-ui/src/icon/components/IllustrationIconLink.tsx
+++ b/packages/twenty-ui/src/icon/components/IllustrationIconLink.tsx
@@ -1,14 +1,12 @@
-import { useContext } from 'react';
-
import IllustrationIconLinkRaw from '@assets/icons/illustration-link.svg?react';
import { IllustrationIconWrapper } from '@ui/icon/components/IllustrationIconWrapper';
import { type IconComponentProps } from '@ui/icon/types/IconComponent';
-import { ThemeContext } from '@ui/theme-constants';
+import { useTheme } from '@ui/theme-constants';
type IllustrationIconLinkProps = Pick;
export const IllustrationIconLink = (props: IllustrationIconLinkProps) => {
- const { theme } = useContext(ThemeContext);
+ const theme = useTheme();
const size = props.size ?? theme.icon.size.lg;
return (
diff --git a/packages/twenty-ui/src/icon/components/IllustrationIconMail.tsx b/packages/twenty-ui/src/icon/components/IllustrationIconMail.tsx
index 4cf10ad02b..cba3a82042 100644
--- a/packages/twenty-ui/src/icon/components/IllustrationIconMail.tsx
+++ b/packages/twenty-ui/src/icon/components/IllustrationIconMail.tsx
@@ -1,14 +1,12 @@
-import { useContext } from 'react';
-
import IllustrationIconMailRaw from '@assets/icons/illustration-mail.svg?react';
import { IllustrationIconWrapper } from '@ui/icon/components/IllustrationIconWrapper';
import { type IconComponentProps } from '@ui/icon/types/IconComponent';
-import { ThemeContext } from '@ui/theme-constants';
+import { useTheme } from '@ui/theme-constants';
type IllustrationIconMailProps = Pick;
export const IllustrationIconMail = (props: IllustrationIconMailProps) => {
- const { theme } = useContext(ThemeContext);
+ const theme = useTheme();
const size = props.size ?? theme.icon.size.lg;
return (
diff --git a/packages/twenty-ui/src/icon/components/IllustrationIconManyToMany.tsx b/packages/twenty-ui/src/icon/components/IllustrationIconManyToMany.tsx
index d7ee64bb3d..2eed205207 100644
--- a/packages/twenty-ui/src/icon/components/IllustrationIconManyToMany.tsx
+++ b/packages/twenty-ui/src/icon/components/IllustrationIconManyToMany.tsx
@@ -1,16 +1,14 @@
-import { useContext } from 'react';
-
import IllustrationIconManyToManyRaw from '@assets/icons/illustration-many-to-many.svg?react';
import { IllustrationIconWrapper } from '@ui/icon/components/IllustrationIconWrapper';
import { type IconComponentProps } from '@ui/icon/types/IconComponent';
-import { ThemeContext } from '@ui/theme-constants';
+import { useTheme } from '@ui/theme-constants';
type IllustrationIconManyToManyProps = Pick;
export const IllustrationIconManyToMany = (
props: IllustrationIconManyToManyProps,
) => {
- const { theme } = useContext(ThemeContext);
+ const theme = useTheme();
const size = props.size ?? theme.icon.size.lg;
return (
diff --git a/packages/twenty-ui/src/icon/components/IllustrationIconMap.tsx b/packages/twenty-ui/src/icon/components/IllustrationIconMap.tsx
index 0474b6370c..2c62067865 100644
--- a/packages/twenty-ui/src/icon/components/IllustrationIconMap.tsx
+++ b/packages/twenty-ui/src/icon/components/IllustrationIconMap.tsx
@@ -1,14 +1,12 @@
-import { useContext } from 'react';
-
import IllustrationIconMapRaw from '@assets/icons/illustration-map.svg?react';
import { IllustrationIconWrapper } from '@ui/icon/components/IllustrationIconWrapper';
import { type IconComponentProps } from '@ui/icon/types/IconComponent';
-import { ThemeContext } from '@ui/theme-constants';
+import { useTheme } from '@ui/theme-constants';
type IllustrationIconMapProps = Pick;
export const IllustrationIconMap = (props: IllustrationIconMapProps) => {
- const { theme } = useContext(ThemeContext);
+ const theme = useTheme();
const size = props.size ?? theme.icon.size.lg;
return (
diff --git a/packages/twenty-ui/src/icon/components/IllustrationIconNumbers.tsx b/packages/twenty-ui/src/icon/components/IllustrationIconNumbers.tsx
index 5d5a820c6e..5dfeb026db 100644
--- a/packages/twenty-ui/src/icon/components/IllustrationIconNumbers.tsx
+++ b/packages/twenty-ui/src/icon/components/IllustrationIconNumbers.tsx
@@ -1,16 +1,14 @@
-import { useContext } from 'react';
-
import IllustrationIconNumbersRaw from '@assets/icons/illustration-numbers.svg?react';
import { IllustrationIconWrapper } from '@ui/icon/components/IllustrationIconWrapper';
import { type IconComponentProps } from '@ui/icon/types/IconComponent';
-import { ThemeContext } from '@ui/theme-constants';
+import { useTheme } from '@ui/theme-constants';
type IllustrationIconNumbersProps = Pick;
export const IllustrationIconNumbers = (
props: IllustrationIconNumbersProps,
) => {
- const { theme } = useContext(ThemeContext);
+ const theme = useTheme();
const size = props.size ?? theme.icon.size.lg;
return (
diff --git a/packages/twenty-ui/src/icon/components/IllustrationIconOneToMany.tsx b/packages/twenty-ui/src/icon/components/IllustrationIconOneToMany.tsx
index 8c2503b6eb..90eab8e7a0 100644
--- a/packages/twenty-ui/src/icon/components/IllustrationIconOneToMany.tsx
+++ b/packages/twenty-ui/src/icon/components/IllustrationIconOneToMany.tsx
@@ -1,16 +1,14 @@
-import { useContext } from 'react';
-
import IllustrationIconOneToManyRaw from '@assets/icons/illustration-one-to-many.svg?react';
import { IllustrationIconWrapper } from '@ui/icon/components/IllustrationIconWrapper';
import { type IconComponentProps } from '@ui/icon/types/IconComponent';
-import { ThemeContext } from '@ui/theme-constants';
+import { useTheme } from '@ui/theme-constants';
type IllustrationIconOneToManyProps = Pick;
export const IllustrationIconOneToMany = (
props: IllustrationIconOneToManyProps,
) => {
- const { theme } = useContext(ThemeContext);
+ const theme = useTheme();
const size = props.size ?? theme.icon.size.lg;
return (
diff --git a/packages/twenty-ui/src/icon/components/IllustrationIconOneToOne.tsx b/packages/twenty-ui/src/icon/components/IllustrationIconOneToOne.tsx
index 4307d64b82..bbdcda978f 100644
--- a/packages/twenty-ui/src/icon/components/IllustrationIconOneToOne.tsx
+++ b/packages/twenty-ui/src/icon/components/IllustrationIconOneToOne.tsx
@@ -1,16 +1,14 @@
-import { useContext } from 'react';
-
import IllustrationIconOneToOneRaw from '@assets/icons/illustration-one-to-one.svg?react';
import { IllustrationIconWrapper } from '@ui/icon/components/IllustrationIconWrapper';
import { type IconComponentProps } from '@ui/icon/types/IconComponent';
-import { ThemeContext } from '@ui/theme-constants';
+import { useTheme } from '@ui/theme-constants';
type IllustrationIconOneToOneProps = Pick;
export const IllustrationIconOneToOne = (
props: IllustrationIconOneToOneProps,
) => {
- const { theme } = useContext(ThemeContext);
+ const theme = useTheme();
const size = props.size ?? theme.icon.size.lg;
return (
diff --git a/packages/twenty-ui/src/icon/components/IllustrationIconPhone.tsx b/packages/twenty-ui/src/icon/components/IllustrationIconPhone.tsx
index 414ae0820e..3a1ac82fd3 100644
--- a/packages/twenty-ui/src/icon/components/IllustrationIconPhone.tsx
+++ b/packages/twenty-ui/src/icon/components/IllustrationIconPhone.tsx
@@ -1,14 +1,12 @@
-import { useContext } from 'react';
-
import IllustrationIconPhoneRaw from '@assets/icons/illustration-phone.svg?react';
import { IllustrationIconWrapper } from '@ui/icon/components/IllustrationIconWrapper';
import { type IconComponentProps } from '@ui/icon/types/IconComponent';
-import { ThemeContext } from '@ui/theme-constants';
+import { useTheme } from '@ui/theme-constants';
type IllustrationIconPhoneProps = Pick;
export const IllustrationIconPhone = (props: IllustrationIconPhoneProps) => {
- const { theme } = useContext(ThemeContext);
+ const theme = useTheme();
const size = props.size ?? theme.icon.size.lg;
return (
diff --git a/packages/twenty-ui/src/icon/components/IllustrationIconSetting.tsx b/packages/twenty-ui/src/icon/components/IllustrationIconSetting.tsx
index 795fbafbcf..55b86f8af7 100644
--- a/packages/twenty-ui/src/icon/components/IllustrationIconSetting.tsx
+++ b/packages/twenty-ui/src/icon/components/IllustrationIconSetting.tsx
@@ -1,16 +1,14 @@
-import { useContext } from 'react';
-
import IllustrationIconSettingRaw from '@assets/icons/illustration-setting.svg?react';
import { IllustrationIconWrapper } from '@ui/icon/components/IllustrationIconWrapper';
import { type IconComponentProps } from '@ui/icon/types/IconComponent';
-import { ThemeContext } from '@ui/theme-constants';
+import { useTheme } from '@ui/theme-constants';
type IllustrationIconSettingProps = Pick;
export const IllustrationIconSetting = (
props: IllustrationIconSettingProps,
) => {
- const { theme } = useContext(ThemeContext);
+ const theme = useTheme();
const size = props.size ?? theme.icon.size.lg;
return (
diff --git a/packages/twenty-ui/src/icon/components/IllustrationIconStar.tsx b/packages/twenty-ui/src/icon/components/IllustrationIconStar.tsx
index 5e69da23b4..56312c55ea 100644
--- a/packages/twenty-ui/src/icon/components/IllustrationIconStar.tsx
+++ b/packages/twenty-ui/src/icon/components/IllustrationIconStar.tsx
@@ -1,14 +1,12 @@
-import { useContext } from 'react';
-
import IllustrationIconStarRaw from '@assets/icons/illustration-star.svg?react';
import { IllustrationIconWrapper } from '@ui/icon/components/IllustrationIconWrapper';
import { type IconComponentProps } from '@ui/icon/types/IconComponent';
-import { ThemeContext } from '@ui/theme-constants';
+import { useTheme } from '@ui/theme-constants';
type IllustrationIconStarProps = Pick;
export const IllustrationIconStar = (props: IllustrationIconStarProps) => {
- const { theme } = useContext(ThemeContext);
+ const theme = useTheme();
const size = props.size ?? theme.icon.size.lg;
return (
diff --git a/packages/twenty-ui/src/icon/components/IllustrationIconTag.tsx b/packages/twenty-ui/src/icon/components/IllustrationIconTag.tsx
index f663914eba..65b546346e 100644
--- a/packages/twenty-ui/src/icon/components/IllustrationIconTag.tsx
+++ b/packages/twenty-ui/src/icon/components/IllustrationIconTag.tsx
@@ -1,14 +1,12 @@
-import { useContext } from 'react';
-
import IllustrationIconTagRaw from '@assets/icons/illustration-tag.svg?react';
import { IllustrationIconWrapper } from '@ui/icon/components/IllustrationIconWrapper';
import { type IconComponentProps } from '@ui/icon/types/IconComponent';
-import { ThemeContext } from '@ui/theme-constants';
+import { useTheme } from '@ui/theme-constants';
type IllustrationIconTagProps = Pick;
export const IllustrationIconTag = (props: IllustrationIconTagProps) => {
- const { theme } = useContext(ThemeContext);
+ const theme = useTheme();
const size = props.size ?? theme.icon.size.lg;
return (
diff --git a/packages/twenty-ui/src/icon/components/IllustrationIconTags.tsx b/packages/twenty-ui/src/icon/components/IllustrationIconTags.tsx
index bcd9d9c326..dc03e6ab0a 100644
--- a/packages/twenty-ui/src/icon/components/IllustrationIconTags.tsx
+++ b/packages/twenty-ui/src/icon/components/IllustrationIconTags.tsx
@@ -1,14 +1,12 @@
-import { useContext } from 'react';
-
import IllustrationIconTagsRaw from '@assets/icons/illustration-tags.svg?react';
import { IllustrationIconWrapper } from '@ui/icon/components/IllustrationIconWrapper';
import { type IconComponentProps } from '@ui/icon/types/IconComponent';
-import { ThemeContext } from '@ui/theme-constants';
+import { useTheme } from '@ui/theme-constants';
type IllustrationIconTagsProps = Pick;
export const IllustrationIconTags = (props: IllustrationIconTagsProps) => {
- const { theme } = useContext(ThemeContext);
+ const theme = useTheme();
const size = props.size ?? theme.icon.size.lg;
return (
diff --git a/packages/twenty-ui/src/icon/components/IllustrationIconText.tsx b/packages/twenty-ui/src/icon/components/IllustrationIconText.tsx
index 0af7fc87f8..8c2cfe8f21 100644
--- a/packages/twenty-ui/src/icon/components/IllustrationIconText.tsx
+++ b/packages/twenty-ui/src/icon/components/IllustrationIconText.tsx
@@ -1,14 +1,12 @@
-import { useContext } from 'react';
-
import IllustrationIconTextRaw from '@assets/icons/illustration-text.svg?react';
import { IllustrationIconWrapper } from '@ui/icon/components/IllustrationIconWrapper';
import { type IconComponentProps } from '@ui/icon/types/IconComponent';
-import { ThemeContext } from '@ui/theme-constants';
+import { useTheme } from '@ui/theme-constants';
type IllustrationIconTextProps = Pick;
export const IllustrationIconText = (props: IllustrationIconTextProps) => {
- const { theme } = useContext(ThemeContext);
+ const theme = useTheme();
const size = props.size ?? theme.icon.size.lg;
return (
diff --git a/packages/twenty-ui/src/icon/components/IllustrationIconToggle.tsx b/packages/twenty-ui/src/icon/components/IllustrationIconToggle.tsx
index 28ed2eb818..1da007fa37 100644
--- a/packages/twenty-ui/src/icon/components/IllustrationIconToggle.tsx
+++ b/packages/twenty-ui/src/icon/components/IllustrationIconToggle.tsx
@@ -1,14 +1,12 @@
-import { useContext } from 'react';
-
import IllustrationIconToggleRaw from '@assets/icons/illustration-toggle.svg?react';
import { IllustrationIconWrapper } from '@ui/icon/components/IllustrationIconWrapper';
import { type IconComponentProps } from '@ui/icon/types/IconComponent';
-import { ThemeContext } from '@ui/theme-constants';
+import { useTheme } from '@ui/theme-constants';
type IllustrationIconToggleProps = Pick;
export const IllustrationIconToggle = (props: IllustrationIconToggleProps) => {
- const { theme } = useContext(ThemeContext);
+ const theme = useTheme();
const size = props.size ?? theme.icon.size.lg;
return (
diff --git a/packages/twenty-ui/src/icon/components/IllustrationIconUid.tsx b/packages/twenty-ui/src/icon/components/IllustrationIconUid.tsx
index c2dfbbe042..09a132ee65 100644
--- a/packages/twenty-ui/src/icon/components/IllustrationIconUid.tsx
+++ b/packages/twenty-ui/src/icon/components/IllustrationIconUid.tsx
@@ -1,14 +1,12 @@
-import { useContext } from 'react';
-
import IllustrationIconUidRaw from '@assets/icons/illustration-uid.svg?react';
import { IllustrationIconWrapper } from '@ui/icon/components/IllustrationIconWrapper';
import { type IconComponentProps } from '@ui/icon/types/IconComponent';
-import { ThemeContext } from '@ui/theme-constants';
+import { useTheme } from '@ui/theme-constants';
type IllustrationIconUidProps = Pick;
export const IllustrationIconUid = (props: IllustrationIconUidProps) => {
- const { theme } = useContext(ThemeContext);
+ const theme = useTheme();
const size = props.size ?? theme.icon.size.lg;
return (
diff --git a/packages/twenty-ui/src/icon/components/IllustrationIconUser.tsx b/packages/twenty-ui/src/icon/components/IllustrationIconUser.tsx
index 42aea42c90..f2d11828f5 100644
--- a/packages/twenty-ui/src/icon/components/IllustrationIconUser.tsx
+++ b/packages/twenty-ui/src/icon/components/IllustrationIconUser.tsx
@@ -1,14 +1,12 @@
-import { useContext } from 'react';
-
import IllustrationIconUserRaw from '@assets/icons/illustration-user.svg?react';
import { IllustrationIconWrapper } from '@ui/icon/components/IllustrationIconWrapper';
import { type IconComponentProps } from '@ui/icon/types/IconComponent';
-import { ThemeContext } from '@ui/theme-constants';
+import { useTheme } from '@ui/theme-constants';
type IllustrationIconUserProps = Pick;
export const IllustrationIconUser = (props: IllustrationIconUserProps) => {
- const { theme } = useContext(ThemeContext);
+ const theme = useTheme();
const size = props.size ?? theme.icon.size.lg;
return (
diff --git a/packages/twenty-ui/src/input/AdvancedSettingsToggle/AdvancedSettingsToggle.tsx b/packages/twenty-ui/src/input/AdvancedSettingsToggle/AdvancedSettingsToggle.tsx
index 6f6261d3dd..61a3fd155f 100644
--- a/packages/twenty-ui/src/input/AdvancedSettingsToggle/AdvancedSettingsToggle.tsx
+++ b/packages/twenty-ui/src/input/AdvancedSettingsToggle/AdvancedSettingsToggle.tsx
@@ -1,7 +1,7 @@
import { Toggle } from '@ui/input';
-import { ThemeContext } from '@ui/theme-constants';
+import { useTheme } from '@ui/theme-constants';
import { clsx } from 'clsx';
-import { useContext, useId } from 'react';
+import { useId } from 'react';
import styles from './AdvancedSettingsToggle.module.scss';
@@ -18,7 +18,7 @@ export const AdvancedSettingsToggle = ({
label = 'Advanced',
className,
}: AdvancedSettingsToggleProps) => {
- const { theme } = useContext(ThemeContext);
+ const theme = useTheme();
const onChange = (newValue: boolean) => {
setIsAdvancedModeEnabled(newValue);
diff --git a/packages/twenty-ui/src/input/AnimatedButton/AnimatedButton.tsx b/packages/twenty-ui/src/input/AnimatedButton/AnimatedButton.tsx
index ba7df8d57f..337753d234 100644
--- a/packages/twenty-ui/src/input/AnimatedButton/AnimatedButton.tsx
+++ b/packages/twenty-ui/src/input/AnimatedButton/AnimatedButton.tsx
@@ -1,10 +1,10 @@
import { clsx } from 'clsx';
import { type MotionProps, motion } from 'framer-motion';
-import React, { useContext, useMemo } from 'react';
+import React, { useMemo } from 'react';
import { Link } from 'react-router-dom';
import { Pill } from '@ui/data-display/Pill/Pill';
-import { ThemeContext, themeCssVariables } from '@ui/theme-constants';
+import { themeCssVariables, useTheme } from '@ui/theme-constants';
import { GRAY_SCALE_LIGHT } from '@ui/theme/constants/GrayScaleLight';
import { useIsMobile } from '@ui/utilities';
import { getOsShortcutSeparator } from '@ui/utilities/device/getOsShortcutSeparator';
@@ -335,7 +335,7 @@ export const AnimatedButton = ({
dataGloballyPreventClickOutside,
soonLabel = 'Soon',
}: AnimatedButtonProps) => {
- const { theme } = useContext(ThemeContext);
+ const theme = useTheme();
const isMobile = useIsMobile();
const isDisabled = soon || disabled;
diff --git a/packages/twenty-ui/src/input/AnimatedLightIconButton/AnimatedLightIconButton.tsx b/packages/twenty-ui/src/input/AnimatedLightIconButton/AnimatedLightIconButton.tsx
index 22fdcde6ac..6873d1d466 100644
--- a/packages/twenty-ui/src/input/AnimatedLightIconButton/AnimatedLightIconButton.tsx
+++ b/packages/twenty-ui/src/input/AnimatedLightIconButton/AnimatedLightIconButton.tsx
@@ -1,13 +1,13 @@
import { clsx } from 'clsx';
import { motion, type MotionProps } from 'framer-motion';
-import { type ComponentProps, type MouseEvent, useContext } from 'react';
+import { type ComponentProps, type MouseEvent } from 'react';
import { type IconComponent } from '@ui/icon';
import {
type LightIconButtonAccent,
type LightIconButtonSize,
} from '@ui/input/LightIconButton/LightIconButton';
-import { ThemeContext } from '@ui/theme-constants';
+import { useTheme } from '@ui/theme-constants';
import styles from './AnimatedLightIconButton.module.scss';
@@ -40,7 +40,7 @@ export const AnimatedLightIconButton = ({
onClick,
title,
}: AnimatedLightIconButtonProps) => {
- const { theme } = useContext(ThemeContext);
+ const theme = useTheme();
return (
