diff --git a/packages/twenty-apps/community/apollo-enrich/src/logic-functions/get-authentication-token-pairs.ts b/packages/twenty-apps/community/apollo-enrich/src/logic-functions/get-authentication-token-pairs.ts index ab35c47132..12b5729267 100644 --- a/packages/twenty-apps/community/apollo-enrich/src/logic-functions/get-authentication-token-pairs.ts +++ b/packages/twenty-apps/community/apollo-enrich/src/logic-functions/get-authentication-token-pairs.ts @@ -1,7 +1,6 @@ import { defineLogicFunction, RoutePayload } from "twenty-sdk"; import { MetadataApiClient } from 'twenty-sdk/generated'; - export const OAUTH_TOKEN_PAIRS_PATH = '/oauth/token-pairs'; type ApolloTokenResponse = { @@ -53,16 +52,8 @@ const handler = async (event: RoutePayload): Promise => { const apolloClientSecret = process.env.APOLLO_CLIENT_SECRET ?? ''; const applicationId = process.env.APPLICATION_ID ?? ''; - const metadataClient = new MetadataApiClient({}); - - - - - - - const tokenPairs = await getAuthenticationTokenPairs( code, apolloClientId, diff --git a/packages/twenty-apps/community/apollo-enrich/src/logic-functions/on-company-updated.ts b/packages/twenty-apps/community/apollo-enrich/src/logic-functions/on-company-updated.ts index 7afb5e52cd..cba2df2d33 100644 --- a/packages/twenty-apps/community/apollo-enrich/src/logic-functions/on-company-updated.ts +++ b/packages/twenty-apps/community/apollo-enrich/src/logic-functions/on-company-updated.ts @@ -5,8 +5,6 @@ import { } from 'twenty-sdk'; import { CoreApiClient } from 'twenty-sdk/generated'; - - type CompanyRecord = { id: string; name?: string; @@ -38,8 +36,6 @@ type ApolloEnrichResponse = { organization?: ApolloOrganization; }; - - const extractDomain = ( domainName?: CompanyRecord['domainName'], ): string | undefined => { @@ -172,7 +168,6 @@ const updateCompanyInTwenty = async ( } }; - type CompanyUpdateEvent = DatabaseEventPayload< ObjectRecordUpdateEvent >; @@ -181,7 +176,6 @@ const handler = async ( event: CompanyUpdateEvent, ): Promise => { - const { recordId, properties } = event; const { after: companyAfter } = properties; @@ -206,7 +200,6 @@ const handler = async ( return { skipped: true, reason: 'no enrichment data to apply' }; } - await updateCompanyInTwenty(recordId, updateData); const result = { diff --git a/packages/twenty-apps/community/fireflies/scripts/fetch-all-meetings.ts b/packages/twenty-apps/community/fireflies/scripts/fetch-all-meetings.ts index 082d764629..678669fc72 100644 --- a/packages/twenty-apps/community/fireflies/scripts/fetch-all-meetings.ts +++ b/packages/twenty-apps/community/fireflies/scripts/fetch-all-meetings.ts @@ -219,4 +219,3 @@ main().catch((error) => { process.exit(1); }); - diff --git a/packages/twenty-apps/community/fireflies/src/__tests__/historical-importer.spec.ts b/packages/twenty-apps/community/fireflies/src/__tests__/historical-importer.spec.ts index 4e829c7326..1e8c30a7ca 100644 --- a/packages/twenty-apps/community/fireflies/src/__tests__/historical-importer.spec.ts +++ b/packages/twenty-apps/community/fireflies/src/__tests__/historical-importer.spec.ts @@ -81,4 +81,3 @@ describe('HistoricalImporter', () => { }); }); - diff --git a/packages/twenty-apps/community/fireflies/src/historical-importer.ts b/packages/twenty-apps/community/fireflies/src/historical-importer.ts index ebebef071c..b418584d95 100644 --- a/packages/twenty-apps/community/fireflies/src/historical-importer.ts +++ b/packages/twenty-apps/community/fireflies/src/historical-importer.ts @@ -158,4 +158,3 @@ export class HistoricalImporter { } } - diff --git a/packages/twenty-apps/community/fireflies/src/objects/index.ts b/packages/twenty-apps/community/fireflies/src/objects/index.ts index 00189441a4..2d87481294 100644 --- a/packages/twenty-apps/community/fireflies/src/objects/index.ts +++ b/packages/twenty-apps/community/fireflies/src/objects/index.ts @@ -1,3 +1,2 @@ export { Meeting } from './meeting'; - diff --git a/packages/twenty-apps/community/fireflies/src/webhook-handler.ts b/packages/twenty-apps/community/fireflies/src/webhook-handler.ts index 2a8ae38591..8f0689ccea 100644 --- a/packages/twenty-apps/community/fireflies/src/webhook-handler.ts +++ b/packages/twenty-apps/community/fireflies/src/webhook-handler.ts @@ -330,7 +330,6 @@ export class WebhookHandler { } } - private async createFailedMeetingRecord(params: unknown, error: string): Promise { try { const twentyApiKey = process.env.TWENTY_API_KEY || ''; diff --git a/packages/twenty-apps/community/linkedin-browser-extension/browser-extension/src/entrypoints/add-person.content/index.tsx b/packages/twenty-apps/community/linkedin-browser-extension/browser-extension/src/entrypoints/add-person.content/index.tsx index be5bd25081..e54b643436 100644 --- a/packages/twenty-apps/community/linkedin-browser-extension/browser-extension/src/entrypoints/add-person.content/index.tsx +++ b/packages/twenty-apps/community/linkedin-browser-extension/browser-extension/src/entrypoints/add-person.content/index.tsx @@ -43,7 +43,6 @@ export default defineContentScript({ }, }); - ctx.addEventListener(window, 'wxt:locationchange', ({newUrl, }) => { const injectedBtn = document.querySelector('[data-id="twenty-btn"]'); if(personPattern.includes(newUrl) && !injectedBtn) ui.mount(); diff --git a/packages/twenty-apps/community/linkedin-browser-extension/browser-extension/src/ui/components/button.tsx b/packages/twenty-apps/community/linkedin-browser-extension/browser-extension/src/ui/components/button.tsx index 0e400fc5f3..6fcab66cb3 100755 --- a/packages/twenty-apps/community/linkedin-browser-extension/browser-extension/src/ui/components/button.tsx +++ b/packages/twenty-apps/community/linkedin-browser-extension/browser-extension/src/ui/components/button.tsx @@ -8,7 +8,6 @@ const StyledButton = styled.button` --text-color: #0a66c2; --bg-color: #00000000; - font-size: ${({theme}) => theme.spacing(3.5)}; font-weight: ${({theme}) => theme.font.weight.semiBold}; font-family: ${({theme}) => theme.font.family}; @@ -26,7 +25,6 @@ const StyledButton = styled.button` transition-timing-function: cubic-bezier(.4, 0, .2, 1); transition-duration: 167ms; - &:hover { background-color: var(--hover-bg-color); color: var(--hover-color); diff --git a/packages/twenty-apps/community/linkedin-browser-extension/browser-extension/src/ui/theme/context/ThemeContext.tsx b/packages/twenty-apps/community/linkedin-browser-extension/browser-extension/src/ui/theme/context/ThemeContext.tsx index fca7fa0b90..e6603cb03b 100755 --- a/packages/twenty-apps/community/linkedin-browser-extension/browser-extension/src/ui/theme/context/ThemeContext.tsx +++ b/packages/twenty-apps/community/linkedin-browser-extension/browser-extension/src/ui/theme/context/ThemeContext.tsx @@ -1,6 +1,5 @@ -import { ThemeProvider } from '@emotion/react'; import type React from 'react'; -import { THEME_DARK, ThemeContextProvider } from 'twenty-ui/theme'; +import { ColorSchemeProvider } from 'twenty-ui/theme-constants'; type ThemeContextProps = { children: React.ReactNode; @@ -8,10 +7,6 @@ type ThemeContextProps = { export const ThemeContext = ({ children }: ThemeContextProps) => { return ( - - - {children} - - + {children} ); }; diff --git a/packages/twenty-apps/community/linkedin-browser-extension/browser-extension/src/ui/theme/emotion.d.ts b/packages/twenty-apps/community/linkedin-browser-extension/browser-extension/src/ui/theme/emotion.d.ts deleted file mode 100755 index 5c654112a8..0000000000 --- a/packages/twenty-apps/community/linkedin-browser-extension/browser-extension/src/ui/theme/emotion.d.ts +++ /dev/null @@ -1,5 +0,0 @@ -import type { ThemeType } from 'twenty-ui/theme'; - -declare module '@emotion/react' { - export interface Theme extends ThemeType {} -} diff --git a/packages/twenty-front/.storybook/preview.tsx b/packages/twenty-front/.storybook/preview.tsx index e882e1981e..342fdbd503 100644 --- a/packages/twenty-front/.storybook/preview.tsx +++ b/packages/twenty-front/.storybook/preview.tsx @@ -2,9 +2,7 @@ import { i18n } from '@lingui/core'; import { I18nProvider } from '@lingui/react'; import { type Preview } from '@storybook/react-vite'; import { initialize, mswLoader } from 'msw-storybook-addon'; -import { useEffect } from 'react'; import { SOURCE_LOCALE } from 'twenty-shared/translations'; -//import { useDarkMode } from 'storybook-dark-mode'; // eslint-disable-next-line no-restricted-imports import { RootDecorator } from '../src/testing/decorators/RootDecorator'; @@ -13,7 +11,9 @@ import { resetJotaiStore } from '../src/modules/ui/utilities/state/jotai/jotaiSt import 'react-loading-skeleton/dist/skeleton.css'; import 'twenty-ui/style.css'; -import { THEME_LIGHT, ThemeContextProvider } from 'twenty-ui/theme'; +import 'twenty-ui/theme-light.css'; +import 'twenty-ui/theme-dark.css'; +import { ThemeProvider } from 'twenty-ui/theme-constants'; // eslint-disable-next-line no-restricted-imports import { messages as enMessages } from '../src/locales/generated/en'; @@ -60,23 +60,15 @@ initialize({ const preview: Preview = { decorators: [ (Story) => { - // const theme = useDarkMode() ? THEME_DARK : THEME_LIGHT; - const theme = THEME_LIGHT; - - useEffect(() => { - document.documentElement.className = - theme.name === 'dark' ? 'dark' : 'light'; - }, [theme]); - return ( - + - + ); }, diff --git a/packages/twenty-front/src/hooks/useCopyToClipboard.tsx b/packages/twenty-front/src/hooks/useCopyToClipboard.tsx index ffb4754604..cdaea46357 100644 --- a/packages/twenty-front/src/hooks/useCopyToClipboard.tsx +++ b/packages/twenty-front/src/hooks/useCopyToClipboard.tsx @@ -2,8 +2,7 @@ import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar'; import { useLingui } from '@lingui/react/macro'; import { IconCopy, IconExclamationCircle } from 'twenty-ui/display'; import { useContext } from 'react'; -import { ThemeContext } from 'twenty-ui/theme'; - +import { ThemeContext } from 'twenty-ui/theme-constants'; export const useCopyToClipboard = () => { const { theme } = useContext(ThemeContext); const { enqueueSuccessSnackBar, enqueueErrorSnackBar } = useSnackBar(); diff --git a/packages/twenty-front/src/loading/components/LeftPanelSkeletonLoader.tsx b/packages/twenty-front/src/loading/components/LeftPanelSkeletonLoader.tsx index 526733a951..c151bdf5b1 100644 --- a/packages/twenty-front/src/loading/components/LeftPanelSkeletonLoader.tsx +++ b/packages/twenty-front/src/loading/components/LeftPanelSkeletonLoader.tsx @@ -5,9 +5,9 @@ import Skeleton, { SkeletonTheme } from 'react-loading-skeleton'; import { SKELETON_LOADER_HEIGHT_SIZES } from '@/activities/components/SkeletonLoader'; import { NAVIGATION_DRAWER_CONSTRAINTS } from '@/ui/layout/resizable-panel/constants/NavigationDrawerConstraints'; import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile'; -import { useContext } from 'react'; -import { ANIMATION, ThemeContext } from 'twenty-ui/theme'; import { MainNavigationDrawerItemsSkeletonLoader } from '~/loading/components/MainNavigationDrawerItemsSkeletonLoader'; +import { useContext } from 'react'; +import { ThemeContext } from 'twenty-ui/theme-constants'; const StyledAnimatedContainer = styled(motion.div)` align-items: center; @@ -47,9 +47,8 @@ const StyledSkeletonTitleContainer = styled.div` `; export const LeftPanelSkeletonLoader = () => { - const isMobile = useIsMobile(); const { theme } = useContext(ThemeContext); - + const isMobile = useIsMobile(); return ( { width: isMobile ? 0 : NAVIGATION_DRAWER_CONSTRAINTS.default, opacity: isMobile ? 0 : 1, }} - transition={{ duration: ANIMATION.duration.fast }} + transition={{ + duration: theme.animation.duration.fast, + }} > diff --git a/packages/twenty-front/src/loading/components/MainNavigationDrawerItemsSkeletonLoader.tsx b/packages/twenty-front/src/loading/components/MainNavigationDrawerItemsSkeletonLoader.tsx index 3cf07d50ca..760599d99d 100644 --- a/packages/twenty-front/src/loading/components/MainNavigationDrawerItemsSkeletonLoader.tsx +++ b/packages/twenty-front/src/loading/components/MainNavigationDrawerItemsSkeletonLoader.tsx @@ -2,7 +2,7 @@ import { SKELETON_LOADER_HEIGHT_SIZES } from '@/activities/components/SkeletonLo import { styled } from '@linaria/react'; import { useContext } from 'react'; import Skeleton, { SkeletonTheme } from 'react-loading-skeleton'; -import { ThemeContext } from 'twenty-ui/theme'; +import { ThemeContext } from 'twenty-ui/theme-constants'; const StyledSkeletonContainer = styled.div` align-items: flex-start; @@ -22,7 +22,6 @@ export const MainNavigationDrawerItemsSkeletonLoader = ({ length: number; }) => { const { theme } = useContext(ThemeContext); - return ( { const { theme } = useContext(ThemeContext); - return ( { const { theme } = useContext(ThemeContext); - return ( { const StyledSkeletonAddLoader = () => { const { theme } = useContext(ThemeContext); - return ( { - const { actions } = useContext(ActionMenuContext); const { theme } = useContext(ThemeContext); - + const { actions } = useContext(ActionMenuContext); const pinnedActions = actions.filter((entry) => entry.isPinned).toReversed(); const actionsWithPositionForAnimation = pinnedActions.map( diff --git a/packages/twenty-front/src/modules/activities/calendar/components/CalendarDayCardContent.tsx b/packages/twenty-front/src/modules/activities/calendar/components/CalendarDayCardContent.tsx index 8276e4d84c..f96ec1768e 100644 --- a/packages/twenty-front/src/modules/activities/calendar/components/CalendarDayCardContent.tsx +++ b/packages/twenty-front/src/modules/activities/calendar/components/CalendarDayCardContent.tsx @@ -1,12 +1,11 @@ -import { useContext } from 'react'; import { styled } from '@linaria/react'; import { differenceInSeconds, endOfDay, format } from 'date-fns'; +import { useContext } from 'react'; import { CalendarEventRow } from '@/activities/calendar/components/CalendarEventRow'; import { getCalendarEventStartDate } from '@/activities/calendar/utils/getCalendarEventStartDate'; import { CardContent } from 'twenty-ui/layout'; -import { ThemeContext } from 'twenty-ui/theme'; -import { themeCssVariables } from 'twenty-ui/theme-constants'; +import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants'; import { type TimelineCalendarEvent } from '~/generated/graphql'; type CalendarDayCardContentProps = { @@ -54,7 +53,6 @@ export const CalendarDayCardContent = ({ divider, }: CalendarDayCardContentProps) => { const { theme } = useContext(ThemeContext); - const endOfDayDate = endOfDay(getCalendarEventStartDate(calendarEvents[0])); const dayEndsIn = differenceInSeconds(endOfDayDate, Date.now()); @@ -63,7 +61,9 @@ export const CalendarDayCardContent = ({ const upcomingDayCardContentVariants = { upcoming: {}, - ended: { backgroundColor: theme.background.primary }, + ended: { + backgroundColor: theme.background.primary, + }, }; return ( diff --git a/packages/twenty-front/src/modules/activities/calendar/components/CalendarEventNotSharedContent.tsx b/packages/twenty-front/src/modules/activities/calendar/components/CalendarEventNotSharedContent.tsx index 4cf667e29d..8dc32bf6f6 100644 --- a/packages/twenty-front/src/modules/activities/calendar/components/CalendarEventNotSharedContent.tsx +++ b/packages/twenty-front/src/modules/activities/calendar/components/CalendarEventNotSharedContent.tsx @@ -1,10 +1,9 @@ -import { useContext } from 'react'; import { styled } from '@linaria/react'; import { Trans } from '@lingui/react/macro'; +import { useContext } from 'react'; import { IconLock } from 'twenty-ui/display'; import { Card, CardContent } from 'twenty-ui/layout'; -import { ThemeContext } from 'twenty-ui/theme'; -import { themeCssVariables } from 'twenty-ui/theme-constants'; +import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants'; const StyledVisibilityCard = styled(Card)` color: ${themeCssVariables.font.color.light}; diff --git a/packages/twenty-front/src/modules/activities/calendar/components/CalendarEventParticipantsResponseStatusField.tsx b/packages/twenty-front/src/modules/activities/calendar/components/CalendarEventParticipantsResponseStatusField.tsx index 2b273446e9..424308772b 100644 --- a/packages/twenty-front/src/modules/activities/calendar/components/CalendarEventParticipantsResponseStatusField.tsx +++ b/packages/twenty-front/src/modules/activities/calendar/components/CalendarEventParticipantsResponseStatusField.tsx @@ -7,8 +7,7 @@ import { ParticipantChip } from '@/activities/components/ParticipantChip'; import { EllipsisDisplay } from '@/ui/field/display/components/EllipsisDisplay'; import { ExpandableList } from '@/ui/layout/expandable-list/components/ExpandableList'; import { IconCheck, IconQuestionMark, IconX } from 'twenty-ui/display'; -import { ThemeContext } from 'twenty-ui/theme'; -import { themeCssVariables } from 'twenty-ui/theme-constants'; +import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants'; const StyledInlineCellBaseContainer = styled.div` align-items: center; diff --git a/packages/twenty-front/src/modules/activities/calendar/components/CalendarEventRow.tsx b/packages/twenty-front/src/modules/activities/calendar/components/CalendarEventRow.tsx index 5240a159ad..b8a22e4431 100644 --- a/packages/twenty-front/src/modules/activities/calendar/components/CalendarEventRow.tsx +++ b/packages/twenty-front/src/modules/activities/calendar/components/CalendarEventRow.tsx @@ -1,4 +1,3 @@ -import { useContext } from 'react'; import { styled } from '@linaria/react'; import { t } from '@lingui/core/macro'; import { format } from 'date-fns'; @@ -15,9 +14,9 @@ import { getCalendarEventStartDate } from '@/activities/calendar/utils/getCalend import { hasCalendarEventEnded } from '@/activities/calendar/utils/hasCalendarEventEnded'; import { currentWorkspaceMemberState } from '@/auth/states/currentWorkspaceMemberState'; import { useOpenCalendarEventInCommandMenu } from '@/command-menu/hooks/useOpenCalendarEventInCommandMenu'; +import { useContext } from 'react'; import { IconArrowRight } from 'twenty-ui/display'; -import { ThemeContext } from 'twenty-ui/theme'; -import { themeCssVariables } from 'twenty-ui/theme-constants'; +import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants'; type CalendarEventRowProps = { calendarEvent: TimelineCalendarEvent; diff --git a/packages/twenty-front/src/modules/activities/components/SkeletonLoader.tsx b/packages/twenty-front/src/modules/activities/components/SkeletonLoader.tsx index 66feefa7d8..14cfaf2e13 100644 --- a/packages/twenty-front/src/modules/activities/components/SkeletonLoader.tsx +++ b/packages/twenty-front/src/modules/activities/components/SkeletonLoader.tsx @@ -1,8 +1,7 @@ -import { useContext } from 'react'; import { styled } from '@linaria/react'; +import { useContext } from 'react'; import Skeleton, { SkeletonTheme } from 'react-loading-skeleton'; -import { ThemeContext } from 'twenty-ui/theme'; -import { themeCssVariables } from 'twenty-ui/theme-constants'; +import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants'; const StyledSkeletonContainer = styled.div` align-items: center; @@ -44,7 +43,6 @@ export const SKELETON_LOADER_HEIGHT_SIZES = { const SkeletonColumnLoader = ({ height }: { height: number }) => { const { theme } = useContext(ThemeContext); - return ( ` @@ -34,8 +33,8 @@ type EmailThreadNotSharedProps = { export const EmailThreadNotShared = ({ visibility, }: EmailThreadNotSharedProps) => { - const { t } = useLingui(); const { theme } = useContext(ThemeContext); + const { t } = useLingui(); const containerId = 'email-thread-not-shared'; const isCompact = visibility === MessageChannelVisibility.SUBJECT; diff --git a/packages/twenty-front/src/modules/activities/emails/components/EmailThreadPreview.tsx b/packages/twenty-front/src/modules/activities/emails/components/EmailThreadPreview.tsx index 0d618f892a..bffb0c937d 100644 --- a/packages/twenty-front/src/modules/activities/emails/components/EmailThreadPreview.tsx +++ b/packages/twenty-front/src/modules/activities/emails/components/EmailThreadPreview.tsx @@ -1,12 +1,12 @@ -import { useContext } from 'react'; import { styled } from '@linaria/react'; import { ActivityRow } from '@/activities/components/ActivityRow'; import { EmailThreadNotShared } from '@/activities/emails/components/EmailThreadNotShared'; import { useOpenEmailThreadInCommandMenu } from '@/command-menu/hooks/useOpenEmailThreadInCommandMenu'; +import { useContext } from 'react'; + import { Avatar } from 'twenty-ui/display'; -import { ThemeContext } from 'twenty-ui/theme'; -import { themeCssVariables } from 'twenty-ui/theme-constants'; +import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants'; import { MessageChannelVisibility, type TimelineThread, @@ -75,6 +75,7 @@ type EmailThreadPreviewProps = { }; export const EmailThreadPreview = ({ thread }: EmailThreadPreviewProps) => { + const { theme } = useContext(ThemeContext); const { openEmailThreadInCommandMenu } = useOpenEmailThreadInCommandMenu(); const visibility = thread.visibility; @@ -107,8 +108,6 @@ export const EmailThreadPreview = ({ thread }: EmailThreadPreviewProps) => { }; const isDisabled = visibility !== MessageChannelVisibility.SHARE_EVERYTHING; - const { theme } = useContext(ThemeContext); - return ( diff --git a/packages/twenty-front/src/modules/activities/files/components/AttachmentRow.tsx b/packages/twenty-front/src/modules/activities/files/components/AttachmentRow.tsx index 5276def634..9fb36786cb 100644 --- a/packages/twenty-front/src/modules/activities/files/components/AttachmentRow.tsx +++ b/packages/twenty-front/src/modules/activities/files/components/AttachmentRow.tsx @@ -10,7 +10,7 @@ import { import { getFileCategoryFromExtension } from '@/object-record/record-field/ui/utils/getFileCategoryFromExtension'; import { SettingsTextInput } from '@/ui/input/components/SettingsTextInput'; import { styled } from '@linaria/react'; -import { useContext, useState } from 'react'; +import { useState, useContext } from 'react'; import { isDefined } from 'twenty-shared/utils'; import { type AttachmentWithFile } from '@/activities/files/utils/filterAttachmentsWithFile'; @@ -18,8 +18,7 @@ import { FileIcon } from '@/file/components/FileIcon'; import { useHasPermissionFlag } from '@/settings/roles/hooks/useHasPermissionFlag'; import { CoreObjectNameSingular } from 'twenty-shared/types'; import { IconCalendar, OverflowingTextWithTooltip } from 'twenty-ui/display'; -import { ThemeContext } from 'twenty-ui/theme'; -import { themeCssVariables } from 'twenty-ui/theme-constants'; +import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants'; import { isNavigationModifierPressed } from 'twenty-ui/utilities'; import { PermissionFlagType } from '~/generated-metadata/graphql'; import { formatToHumanReadableDate } from '~/utils/date-utils'; diff --git a/packages/twenty-front/src/modules/activities/files/components/DocumentViewer.tsx b/packages/twenty-front/src/modules/activities/files/components/DocumentViewer.tsx index 92db34973f..1c68bc8fb0 100644 --- a/packages/twenty-front/src/modules/activities/files/components/DocumentViewer.tsx +++ b/packages/twenty-front/src/modules/activities/files/components/DocumentViewer.tsx @@ -13,8 +13,7 @@ import { useContext, useEffect, useState } from 'react'; import { isDefined } from 'twenty-shared/utils'; import { IconDownload } from 'twenty-ui/display'; import { Button } from 'twenty-ui/input'; -import { ThemeContext } from 'twenty-ui/theme'; -import { themeCssVariables } from 'twenty-ui/theme-constants'; +import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants'; import { getFileNameAndExtension } from '~/utils/file/getFileNameAndExtension'; const MS_OFFICE_EXTENSIONS = [ @@ -200,8 +199,8 @@ export const DocumentViewer = ({ documentUrl, documentExtension, }: DocumentViewerProps) => { - const { t } = useLingui(); const { theme } = useContext(ThemeContext); + const { t } = useLingui(); const [csvPreview, setCsvPreview] = useState( undefined, ); diff --git a/packages/twenty-front/src/modules/activities/files/components/DropZone.tsx b/packages/twenty-front/src/modules/activities/files/components/DropZone.tsx index c6b6f142c1..66065ac61f 100644 --- a/packages/twenty-front/src/modules/activities/files/components/DropZone.tsx +++ b/packages/twenty-front/src/modules/activities/files/components/DropZone.tsx @@ -1,12 +1,11 @@ -import { useContext } from 'react'; import { styled } from '@linaria/react'; import { useLingui } from '@lingui/react/macro'; +import { useContext } from 'react'; import { useDropzone } from 'react-dropzone'; import { useSpreadsheetImportInternal } from '@/spreadsheet-import/hooks/useSpreadsheetImportInternal'; import { IconUpload } from 'twenty-ui/display'; -import { ThemeContext } from 'twenty-ui/theme'; -import { themeCssVariables } from 'twenty-ui/theme-constants'; +import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants'; const StyledContainer = styled.div` align-items: center; @@ -49,8 +48,8 @@ export const DropZone = ({ setIsDraggingFile, onUploadFiles, }: DropZoneProps) => { - const { t } = useLingui(); const { theme } = useContext(ThemeContext); + const { t } = useLingui(); const { maxFileSize } = useSpreadsheetImportInternal(); const { getRootProps, getInputProps, isDragActive } = useDropzone({ diff --git a/packages/twenty-front/src/modules/activities/tasks/components/TaskRow.tsx b/packages/twenty-front/src/modules/activities/tasks/components/TaskRow.tsx index cb4874046a..df23d4d220 100644 --- a/packages/twenty-front/src/modules/activities/tasks/components/TaskRow.tsx +++ b/packages/twenty-front/src/modules/activities/tasks/components/TaskRow.tsx @@ -1,4 +1,3 @@ -import { useContext } from 'react'; import { styled } from '@linaria/react'; import { t } from '@lingui/core/macro'; @@ -14,10 +13,10 @@ import { CoreObjectNameSingular } from 'twenty-shared/types'; import { StopPropagationContainer } from '@/object-record/record-board/record-board-card/components/StopPropagationContainer'; import { RecordFieldsScopeContextProvider } from '@/object-record/record-field-list/contexts/RecordFieldsScopeContext'; import { FieldContextProvider } from '@/object-record/record-field/ui/components/FieldContextProvider'; +import { useContext } from 'react'; import { IconCalendar, OverflowingTextWithTooltip } from 'twenty-ui/display'; import { Checkbox, CheckboxShape } from 'twenty-ui/input'; -import { ThemeContext } from 'twenty-ui/theme'; -import { themeCssVariables } from 'twenty-ui/theme-constants'; +import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants'; import { useCompleteTask } from '@/activities/tasks/hooks/useCompleteTask'; const StyledTaskBody = styled.div` diff --git a/packages/twenty-front/src/modules/advanced-text-editor/components/TurnIntoBlockDropdown.tsx b/packages/twenty-front/src/modules/advanced-text-editor/components/TurnIntoBlockDropdown.tsx index eb1213e555..9c4b399119 100644 --- a/packages/twenty-front/src/modules/advanced-text-editor/components/TurnIntoBlockDropdown.tsx +++ b/packages/twenty-front/src/modules/advanced-text-editor/components/TurnIntoBlockDropdown.tsx @@ -9,8 +9,7 @@ import { type Editor } from '@tiptap/react'; import { useContext, useId } from 'react'; import { IconPilcrow } from 'twenty-ui/display'; import { MenuItem } from 'twenty-ui/navigation'; -import { ThemeContext } from 'twenty-ui/theme'; -import { themeCssVariables } from 'twenty-ui/theme-constants'; +import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants'; const StyledMenuItem = styled.button` align-items: center; @@ -45,7 +44,6 @@ export const TurnIntoBlockDropdown = ({ editor, }: TurnIntoBlockDropdownProps) => { const { theme } = useContext(ThemeContext); - const instanceId = useId(); const dropdownId = `turn-into-block-dropdown-${instanceId}`; const { toggleDropdown } = useToggleDropdown(); @@ -84,7 +82,7 @@ export const TurnIntoBlockDropdown = ({ } dropdownOffset={{ - y: parseInt(theme.spacing(1), 10), + y: parseInt(theme.spacing[1], 10), }} /> ); diff --git a/packages/twenty-front/src/modules/advanced-text-editor/components/WorkflowAttachmentChip.tsx b/packages/twenty-front/src/modules/advanced-text-editor/components/WorkflowAttachmentChip.tsx index e2d4eb2564..704c235683 100644 --- a/packages/twenty-front/src/modules/advanced-text-editor/components/WorkflowAttachmentChip.tsx +++ b/packages/twenty-front/src/modules/advanced-text-editor/components/WorkflowAttachmentChip.tsx @@ -6,8 +6,7 @@ import { useContext } from 'react'; import { type WorkflowAttachment } from 'twenty-shared/workflow'; import { AvatarOrIcon } from 'twenty-ui/components'; import { IconX } from 'twenty-ui/display'; -import { ThemeContext } from 'twenty-ui/theme'; -import { themeCssVariables } from 'twenty-ui/theme-constants'; +import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants'; type WorkflowAttachmentChipProps = { file: WorkflowAttachment; @@ -65,8 +64,8 @@ export const WorkflowAttachmentChip = ({ onRemove, readonly = false, }: WorkflowAttachmentChipProps) => { - const iconColors = useFileCategoryColors(); const { theme } = useContext(ThemeContext); + const iconColors = useFileCategoryColors(); return ( diff --git a/packages/twenty-front/src/modules/advanced-text-editor/components/WorkflowSendEmailAttachments.tsx b/packages/twenty-front/src/modules/advanced-text-editor/components/WorkflowSendEmailAttachments.tsx index ce68b31bef..999d45e1f4 100644 --- a/packages/twenty-front/src/modules/advanced-text-editor/components/WorkflowSendEmailAttachments.tsx +++ b/packages/twenty-front/src/modules/advanced-text-editor/components/WorkflowSendEmailAttachments.tsx @@ -8,8 +8,7 @@ import { type ChangeEvent, useContext, useRef } from 'react'; import { isDefined } from 'twenty-shared/utils'; import { type WorkflowAttachment } from 'twenty-shared/workflow'; import { IconUpload } from 'twenty-ui/display'; -import { ThemeContext } from 'twenty-ui/theme'; -import { themeCssVariables } from 'twenty-ui/theme-constants'; +import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants'; type WorkflowSendEmailAttachmentsProps = { files: WorkflowAttachment[]; @@ -67,11 +66,10 @@ export const WorkflowSendEmailAttachments = ({ label, onChange, }: WorkflowSendEmailAttachmentsProps) => { + const { theme } = useContext(ThemeContext); const fileInputRef = useRef(null); const { uploadWorkflowFile } = useUploadWorkflowFile(); const { t } = useLingui(); - const { theme } = useContext(ThemeContext); - const handleAddFileClick = (e: React.MouseEvent) => { const target = e.target as HTMLElement; diff --git a/packages/twenty-front/src/modules/ai/components/AIChatAssistantMessageRenderer.tsx b/packages/twenty-front/src/modules/ai/components/AIChatAssistantMessageRenderer.tsx index c793ceb711..b538346cc2 100644 --- a/packages/twenty-front/src/modules/ai/components/AIChatAssistantMessageRenderer.tsx +++ b/packages/twenty-front/src/modules/ai/components/AIChatAssistantMessageRenderer.tsx @@ -7,11 +7,10 @@ import { LazyMarkdownRenderer } from '@/ai/components/LazyMarkdownRenderer'; import { ToolStepRenderer } from '@/ai/components/ToolStepRenderer'; import { groupContiguousThinkingStepParts } from '@/ai/utils/groupContiguousThinkingStepParts'; import { styled } from '@linaria/react'; -import { useContext } from 'react'; import { isToolUIPart, type ToolUIPart } from 'ai'; import { type ExtendedUIMessagePart } from 'twenty-shared/ai'; -import { ThemeContext } from 'twenty-ui/theme'; -import { themeCssVariables } from 'twenty-ui/theme-constants'; +import { useContext } from 'react'; +import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants'; const StyledMessagePartsContainer = styled.div` display: flex; diff --git a/packages/twenty-front/src/modules/ai/components/AIChatErrorMessage.tsx b/packages/twenty-front/src/modules/ai/components/AIChatErrorMessage.tsx index 2082e6a6a4..96c70e5ce1 100644 --- a/packages/twenty-front/src/modules/ai/components/AIChatErrorMessage.tsx +++ b/packages/twenty-front/src/modules/ai/components/AIChatErrorMessage.tsx @@ -4,11 +4,10 @@ import { dispatchBrowserEvent } from '@/browser-event/utils/dispatchBrowserEvent import { useAtomStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomStateValue'; import { styled } from '@linaria/react'; import { t } from '@lingui/core/macro'; -import { useContext } from 'react'; import { IconAlertCircle, IconRefresh } from 'twenty-ui/display'; import { Button } from 'twenty-ui/input'; -import { ThemeContext } from 'twenty-ui/theme'; -import { themeCssVariables } from 'twenty-ui/theme-constants'; +import { useContext } from 'react'; +import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants'; const StyledErrorContainer = styled.div` align-items: center; diff --git a/packages/twenty-front/src/modules/ai/components/AIChatThreadGroup.tsx b/packages/twenty-front/src/modules/ai/components/AIChatThreadGroup.tsx index 75541c0cd2..8e0d066d2d 100644 --- a/packages/twenty-front/src/modules/ai/components/AIChatThreadGroup.tsx +++ b/packages/twenty-front/src/modules/ai/components/AIChatThreadGroup.tsx @@ -1,10 +1,9 @@ import { useAIChatThreadClick } from '@/ai/hooks/useAIChatThreadClick'; import { styled } from '@linaria/react'; -import { useContext } from 'react'; import { useLingui } from '@lingui/react/macro'; +import { useContext } from 'react'; import { IconSparkles } from 'twenty-ui/display'; -import { ThemeContext } from 'twenty-ui/theme'; -import { themeCssVariables } from 'twenty-ui/theme-constants'; +import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants'; import { type AgentChatThread } from '~/generated-metadata/graphql'; const StyledThreadsList = styled.div` @@ -73,8 +72,8 @@ export const AIChatThreadGroup = ({ threads: AgentChatThread[]; title: string; }) => { - const { t } = useLingui(); const { theme } = useContext(ThemeContext); + const { t } = useLingui(); const { handleThreadClick } = useAIChatThreadClick(); if (threads.length === 0) { diff --git a/packages/twenty-front/src/modules/ai/components/CodeExecutionDisplay.tsx b/packages/twenty-front/src/modules/ai/components/CodeExecutionDisplay.tsx index 7c20c6df8d..08a61615cd 100644 --- a/packages/twenty-front/src/modules/ai/components/CodeExecutionDisplay.tsx +++ b/packages/twenty-front/src/modules/ai/components/CodeExecutionDisplay.tsx @@ -15,8 +15,7 @@ import { } from 'twenty-ui/display'; import { CodeEditor, LightIconButton } from 'twenty-ui/input'; import { AnimatedExpandableContainer } from 'twenty-ui/layout'; -import { ThemeContext } from 'twenty-ui/theme'; -import { themeCssVariables } from 'twenty-ui/theme-constants'; +import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants'; import { useCopyToClipboard } from '~/hooks/useCopyToClipboard'; const StyledContainer = styled.div` @@ -202,8 +201,8 @@ export const CodeExecutionDisplay = ({ files = [], isRunning = false, }: CodeExecutionDisplayProps) => { - const { t } = useLingui(); const { theme } = useContext(ThemeContext); + const { t } = useLingui(); const { copyToClipboard } = useCopyToClipboard(); const [isCodeExpanded, setIsCodeExpanded] = useState(false); const [isOutputExpanded, setIsOutputExpanded] = useState(true); diff --git a/packages/twenty-front/src/modules/ai/components/LazyMarkdownRenderer.tsx b/packages/twenty-front/src/modules/ai/components/LazyMarkdownRenderer.tsx index 801ad267ea..40c005d114 100644 --- a/packages/twenty-front/src/modules/ai/components/LazyMarkdownRenderer.tsx +++ b/packages/twenty-front/src/modules/ai/components/LazyMarkdownRenderer.tsx @@ -13,7 +13,7 @@ import { import { lazy, Suspense, useContext } from 'react'; import Skeleton, { SkeletonTheme } from 'react-loading-skeleton'; import { isDefined } from 'twenty-shared/utils'; -import { ThemeContext } from 'twenty-ui/theme'; +import { ThemeContext } from 'twenty-ui/theme-constants'; const TextWithRecordLinks = ({ text }: { text: string }) => { const parts: React.ReactNode[] = []; @@ -132,7 +132,6 @@ const MarkdownRenderer = lazy(async () => { const LoadingSkeleton = () => { const { theme } = useContext(ThemeContext); - return ( { - const { t } = useLingui(); const { theme } = useContext(ThemeContext); + const { t } = useLingui(); const { copyToClipboard } = useCopyToClipboard(); const [isExpanded, setIsExpanded] = useState(false); const [activeTab, setActiveTab] = useState('timing'); diff --git a/packages/twenty-front/src/modules/ai/components/RoutingStatusDisplay.tsx b/packages/twenty-front/src/modules/ai/components/RoutingStatusDisplay.tsx index f12bec2083..db5f110fa0 100644 --- a/packages/twenty-front/src/modules/ai/components/RoutingStatusDisplay.tsx +++ b/packages/twenty-front/src/modules/ai/components/RoutingStatusDisplay.tsx @@ -5,8 +5,7 @@ import { useContext, useState } from 'react'; import { type DataMessagePart } from 'twenty-shared/ai'; import { IconChevronDown, IconChevronUp, IconCpu } from 'twenty-ui/display'; import { AnimatedExpandableContainer } from 'twenty-ui/layout'; -import { ThemeContext } from 'twenty-ui/theme'; -import { themeCssVariables } from 'twenty-ui/theme-constants'; +import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants'; const StyledContainer = styled.div` display: flex; diff --git a/packages/twenty-front/src/modules/ai/components/ToolStepRenderer.tsx b/packages/twenty-front/src/modules/ai/components/ToolStepRenderer.tsx index 1f50191f24..2e69dfa2fb 100644 --- a/packages/twenty-front/src/modules/ai/components/ToolStepRenderer.tsx +++ b/packages/twenty-front/src/modules/ai/components/ToolStepRenderer.tsx @@ -4,8 +4,7 @@ import { useContext, useState } from 'react'; import { IconChevronDown, IconChevronUp } from 'twenty-ui/display'; import { JsonTree } from 'twenty-ui/json-visualizer'; import { AnimatedExpandableContainer } from 'twenty-ui/layout'; -import { ThemeContext } from 'twenty-ui/theme'; -import { themeCssVariables } from 'twenty-ui/theme-constants'; +import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants'; import { CodeExecutionDisplay } from '@/ai/components/CodeExecutionDisplay'; import { ShimmeringText } from '@/ai/components/ShimmeringText'; @@ -137,8 +136,8 @@ export const ToolStepRenderer = ({ toolPart: ToolUIPart; isStreaming: boolean; }) => { - const { t } = useLingui(); const { theme } = useContext(ThemeContext); + const { t } = useLingui(); const { copyToClipboard } = useCopyToClipboard(); const [isExpanded, setIsExpanded] = useState(false); const [activeTab, setActiveTab] = useState('output'); diff --git a/packages/twenty-front/src/modules/ai/components/__tests__/AIChatAssistantMessageRenderer.test.tsx b/packages/twenty-front/src/modules/ai/components/__tests__/AIChatAssistantMessageRenderer.test.tsx index 368c23cacb..edf6c76c70 100644 --- a/packages/twenty-front/src/modules/ai/components/__tests__/AIChatAssistantMessageRenderer.test.tsx +++ b/packages/twenty-front/src/modules/ai/components/__tests__/AIChatAssistantMessageRenderer.test.tsx @@ -1,5 +1,5 @@ import { render, screen } from '@testing-library/react'; -import { THEME_LIGHT, ThemeContextProvider } from 'twenty-ui/theme'; +import { ThemeProvider } from 'twenty-ui/theme-constants'; import { type ExtendedUIMessagePart } from 'twenty-shared/ai'; import { AIChatAssistantMessageRenderer } from '@/ai/components/AIChatAssistantMessageRenderer'; @@ -42,12 +42,12 @@ jest.mock('@/ai/components/CodeExecutionDisplay', () => ({ const renderAssistantRenderer = (messageParts: ExtendedUIMessagePart[]) => { return render( - + - , + , ); }; diff --git a/packages/twenty-front/src/modules/ai/components/__tests__/ThinkingStepsDisplay.test.tsx b/packages/twenty-front/src/modules/ai/components/__tests__/ThinkingStepsDisplay.test.tsx index 442282a742..19a3a1d329 100644 --- a/packages/twenty-front/src/modules/ai/components/__tests__/ThinkingStepsDisplay.test.tsx +++ b/packages/twenty-front/src/modules/ai/components/__tests__/ThinkingStepsDisplay.test.tsx @@ -1,6 +1,6 @@ import { render, screen, waitFor } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; -import { THEME_LIGHT, ThemeContextProvider } from 'twenty-ui/theme'; +import { ThemeProvider } from 'twenty-ui/theme-constants'; import { ThinkingStepsDisplay } from '@/ai/components/ThinkingStepsDisplay'; import { type ThinkingStepPart } from '@/ai/utils/thinkingStepPart'; @@ -80,13 +80,13 @@ const renderThinkingStepsDisplay = ({ hasAssistantTextResponseStarted?: boolean; }) => { return render( - + - , + , ); }; diff --git a/packages/twenty-front/src/modules/ai/components/internal/AIChatContextUsageButton.tsx b/packages/twenty-front/src/modules/ai/components/internal/AIChatContextUsageButton.tsx index 8ff23b5aa9..eabf08ea75 100644 --- a/packages/twenty-front/src/modules/ai/components/internal/AIChatContextUsageButton.tsx +++ b/packages/twenty-front/src/modules/ai/components/internal/AIChatContextUsageButton.tsx @@ -1,11 +1,10 @@ import { styled } from '@linaria/react'; import { t } from '@lingui/core/macro'; import { useLingui } from '@lingui/react/macro'; -import { useContext, useState } from 'react'; +import { useState } from 'react'; import { isDefined } from 'twenty-shared/utils'; import { HorizontalSeparator } from 'twenty-ui/display'; import { ProgressBar } from 'twenty-ui/feedback'; -import { ThemeContext } from 'twenty-ui/theme'; import { themeCssVariables } from 'twenty-ui/theme-constants'; import { ContextUsageProgressRing } from '@/ai/components/internal/ContextUsageProgressRing'; @@ -116,7 +115,6 @@ const getCachedLabel = (lastMessage: AgentChatLastMessageUsage): string => { export const AIChatContextUsageButton = () => { const { t } = useLingui(); - const { theme } = useContext(ThemeContext); const [isHovered, setIsHovered] = useState(false); const agentChatUsage = useAtomStateValue(agentChatUsageState); @@ -175,19 +173,22 @@ export const AIChatContextUsageButton = () => { value={percentage} barColor={ percentage > 80 - ? theme.color.red + ? themeCssVariables.color.red : percentage > 60 - ? theme.color.orange - : theme.color.blue + ? themeCssVariables.color.orange + : themeCssVariables.color.blue } - backgroundColor={theme.background.tertiary} + backgroundColor={themeCssVariables.background.tertiary} withBorderRadius /> {isDefined(lastMessage) && ( <> - + {t`Last message`} { )} - + {t`Conversation`} ` cursor: ${({ clickable }: { clickable: boolean }) => diff --git a/packages/twenty-front/src/modules/ai/components/internal/ContextUsageProgressRing.tsx b/packages/twenty-front/src/modules/ai/components/internal/ContextUsageProgressRing.tsx index 56c585f7a0..fac99659f0 100644 --- a/packages/twenty-front/src/modules/ai/components/internal/ContextUsageProgressRing.tsx +++ b/packages/twenty-front/src/modules/ai/components/internal/ContextUsageProgressRing.tsx @@ -1,6 +1,4 @@ import { styled } from '@linaria/react'; -import { useContext } from 'react'; -import { ThemeContext } from 'twenty-ui/theme'; import { themeCssVariables } from 'twenty-ui/theme-constants'; type ContextUsageProgressRingProps = { @@ -32,8 +30,6 @@ export const ContextUsageProgressRing = ({ size = 16, strokeWidth = 2, }: ContextUsageProgressRingProps) => { - const { theme } = useContext(ThemeContext); - const normalizedPercentage = Math.min(Math.max(percentage, 0), 100); const radius = (size - strokeWidth) / 2; const circumference = 2 * Math.PI * radius; @@ -42,10 +38,10 @@ export const ContextUsageProgressRing = ({ const progressColor = normalizedPercentage > 80 - ? theme.color.red + ? themeCssVariables.color.red : normalizedPercentage > 60 - ? theme.color.orange - : theme.color.blue; + ? themeCssVariables.color.orange + : themeCssVariables.color.blue; return ( @@ -60,7 +56,7 @@ export const ContextUsageProgressRing = ({ cy={size / 2} r={radius} strokeWidth={strokeWidth} - stroke={progressColor} + style={{ stroke: progressColor }} strokeDasharray={circumference} strokeDashoffset={strokeDashoffset} strokeLinecap="round" diff --git a/packages/twenty-front/src/modules/auth/sign-in-up/components/SignInUpGlobalScopeForm.tsx b/packages/twenty-front/src/modules/auth/sign-in-up/components/SignInUpGlobalScopeForm.tsx index 2ddff5bd51..6804655f3a 100644 --- a/packages/twenty-front/src/modules/auth/sign-in-up/components/SignInUpGlobalScopeForm.tsx +++ b/packages/twenty-front/src/modules/auth/sign-in-up/components/SignInUpGlobalScopeForm.tsx @@ -30,8 +30,7 @@ import { IconChevronRight, IconPlus, } from 'twenty-ui/display'; -import { ThemeContext } from 'twenty-ui/theme'; -import { themeCssVariables } from 'twenty-ui/theme-constants'; +import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants'; import { type AvailableWorkspace } from '~/generated-metadata/graphql'; import { getWorkspaceUrl } from '~/utils/getWorkspaceUrl'; @@ -135,11 +134,11 @@ const StyledForgotPasswordLinkContainer = styled.div` `; export const SignInUpGlobalScopeForm = () => { + const { theme } = useContext(ThemeContext); const authProviders = useAtomStateValue(authProvidersState); const signInUpStep = useAtomStateValue(signInUpStepState); const { buildWorkspaceUrl } = useBuildWorkspaceUrl(); const { signOut } = useAuth(); - const { theme } = useContext(ThemeContext); const { createWorkspace } = useSignUpInNewWorkspace(); const availableWorkspaces = useAtomStateValue(availableWorkspacesState); diff --git a/packages/twenty-front/src/modules/auth/sign-in-up/components/__tests__/SignInUpGlobalScopeForm.test.tsx b/packages/twenty-front/src/modules/auth/sign-in-up/components/__tests__/SignInUpGlobalScopeForm.test.tsx index 8bb2fbb74b..6bc9eb492f 100644 --- a/packages/twenty-front/src/modules/auth/sign-in-up/components/__tests__/SignInUpGlobalScopeForm.test.tsx +++ b/packages/twenty-front/src/modules/auth/sign-in-up/components/__tests__/SignInUpGlobalScopeForm.test.tsx @@ -3,11 +3,7 @@ import { I18nProvider } from '@lingui/react'; import { fireEvent, render, screen } from '@testing-library/react'; import { Provider as JotaiProvider } from 'jotai'; import { SOURCE_LOCALE } from 'twenty-shared/translations'; -import { - THEME_LIGHT, - ThemeContextProvider, - ThemeProvider, -} from 'twenty-ui/theme'; +import { ThemeProvider } from 'twenty-ui/theme-constants'; import { SignInUpGlobalScopeForm } from '@/auth/sign-in-up/components/SignInUpGlobalScopeForm'; import { @@ -98,12 +94,10 @@ describe('SignInUpGlobalScopeForm', () => { render( - - - - - - + + + + , ); diff --git a/packages/twenty-front/src/modules/auth/sign-in-up/components/internal/SignInUpPasswordField.tsx b/packages/twenty-front/src/modules/auth/sign-in-up/components/internal/SignInUpPasswordField.tsx index cccac77c27..578afe3363 100644 --- a/packages/twenty-front/src/modules/auth/sign-in-up/components/internal/SignInUpPasswordField.tsx +++ b/packages/twenty-front/src/modules/auth/sign-in-up/components/internal/SignInUpPasswordField.tsx @@ -7,8 +7,7 @@ import { motion } from 'framer-motion'; import { useContext } from 'react'; import { Controller, useFormContext } from 'react-hook-form'; import { StyledText } from 'twenty-ui/display'; -import { ThemeContext } from 'twenty-ui/theme'; -import { themeCssVariables } from 'twenty-ui/theme-constants'; +import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants'; const StyledFullWidthMotionDiv = styled(motion.div)` width: 100%; @@ -25,8 +24,8 @@ export const SignInUpPasswordField = ({ showErrors: boolean; signInUpMode: SignInUpMode; }) => { - const { t } = useLingui(); const { theme } = useContext(ThemeContext); + const { t } = useLingui(); const form = useFormContext
(); return ( diff --git a/packages/twenty-front/src/modules/auth/sign-in-up/components/internal/SignInUpTwoFactorAuthenticationProvision.tsx b/packages/twenty-front/src/modules/auth/sign-in-up/components/internal/SignInUpTwoFactorAuthenticationProvision.tsx index d88aa1323e..0612361f92 100644 --- a/packages/twenty-front/src/modules/auth/sign-in-up/components/internal/SignInUpTwoFactorAuthenticationProvision.tsx +++ b/packages/twenty-front/src/modules/auth/sign-in-up/components/internal/SignInUpTwoFactorAuthenticationProvision.tsx @@ -7,14 +7,13 @@ import { import { extractSecretFromOtpUri } from '@/settings/two-factor-authentication/utils/extractSecretFromOtpUri'; import { styled } from '@linaria/react'; import { Trans, useLingui } from '@lingui/react/macro'; -import { useContext } from 'react'; import QRCode from 'react-qr-code'; import { useSetAtomState } from '@/ui/utilities/state/jotai/hooks/useSetAtomState'; import { IconCopy } from 'twenty-ui/display'; import { Loader } from 'twenty-ui/feedback'; import { MainButton } from 'twenty-ui/input'; -import { ThemeContext } from 'twenty-ui/theme'; -import { themeCssVariables } from 'twenty-ui/theme-constants'; +import { useContext } from 'react'; +import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants'; import { useAtomStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomStateValue'; import { useCopyToClipboard } from '~/hooks/useCopyToClipboard'; @@ -69,8 +68,8 @@ const StyledCopySetupKeyLink = styled.button` `; export const SignInUpTwoFactorAuthenticationProvision = () => { - const { t } = useLingui(); const { theme } = useContext(ThemeContext); + const { t } = useLingui(); const { copyToClipboard } = useCopyToClipboard(); const qrCode = useAtomStateValue(qrCodeState); const setSignInUpStep = useSetAtomState(signInUpStepState); diff --git a/packages/twenty-front/src/modules/auth/sign-in-up/components/internal/SignInUpWithGoogle.tsx b/packages/twenty-front/src/modules/auth/sign-in-up/components/internal/SignInUpWithGoogle.tsx index c4b7a67df7..31a79a7f16 100644 --- a/packages/twenty-front/src/modules/auth/sign-in-up/components/internal/SignInUpWithGoogle.tsx +++ b/packages/twenty-front/src/modules/auth/sign-in-up/components/internal/SignInUpWithGoogle.tsx @@ -11,12 +11,11 @@ import { useLingui } from '@lingui/react/macro'; import { memo, useContext } from 'react'; import { HorizontalSeparator, IconGoogle } from 'twenty-ui/display'; import { MainButton } from 'twenty-ui/input'; -import { ThemeContext } from 'twenty-ui/theme'; import { useAtomState } from '@/ui/utilities/state/jotai/hooks/useAtomState'; import { useAtomStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomStateValue'; import { LastUsedPill } from './LastUsedPill'; import { StyledSSOButtonContainer } from './SignInUpSSOButtonStyles'; - +import { ThemeContext } from 'twenty-ui/theme-constants'; const GoogleIcon = memo(() => { const { theme } = useContext(ThemeContext); return ; diff --git a/packages/twenty-front/src/modules/auth/sign-in-up/components/internal/SignInUpWithMicrosoft.tsx b/packages/twenty-front/src/modules/auth/sign-in-up/components/internal/SignInUpWithMicrosoft.tsx index fe7fc4306c..4302b1b9b9 100644 --- a/packages/twenty-front/src/modules/auth/sign-in-up/components/internal/SignInUpWithMicrosoft.tsx +++ b/packages/twenty-front/src/modules/auth/sign-in-up/components/internal/SignInUpWithMicrosoft.tsx @@ -11,11 +11,11 @@ import { useLingui } from '@lingui/react/macro'; import { useContext } from 'react'; import { HorizontalSeparator, IconMicrosoft } from 'twenty-ui/display'; import { MainButton } from 'twenty-ui/input'; -import { ThemeContext } from 'twenty-ui/theme'; import { useAtomState } from '@/ui/utilities/state/jotai/hooks/useAtomState'; import { useAtomStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomStateValue'; import { LastUsedPill } from './LastUsedPill'; import { StyledSSOButtonContainer } from './SignInUpSSOButtonStyles'; +import { ThemeContext } from 'twenty-ui/theme-constants'; export const SignInUpWithMicrosoft = ({ action, diff --git a/packages/twenty-front/src/modules/auth/sign-in-up/components/internal/SignInUpWithSSO.tsx b/packages/twenty-front/src/modules/auth/sign-in-up/components/internal/SignInUpWithSSO.tsx index eccf3b0e6b..70be4b7907 100644 --- a/packages/twenty-front/src/modules/auth/sign-in-up/components/internal/SignInUpWithSSO.tsx +++ b/packages/twenty-front/src/modules/auth/sign-in-up/components/internal/SignInUpWithSSO.tsx @@ -11,13 +11,13 @@ import { useAtomStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomState import { useAtomState } from '@/ui/utilities/state/jotai/hooks/useAtomState'; import { useSetAtomState } from '@/ui/utilities/state/jotai/hooks/useSetAtomState'; import { useLingui } from '@lingui/react/macro'; -import { useContext } from 'react'; import { isDefined } from 'twenty-shared/utils'; import { HorizontalSeparator, IconLock } from 'twenty-ui/display'; import { MainButton } from 'twenty-ui/input'; -import { ThemeContext } from 'twenty-ui/theme'; import { LastUsedPill } from './LastUsedPill'; import { StyledSSOButtonContainer } from './SignInUpSSOButtonStyles'; +import { useContext } from 'react'; +import { ThemeContext } from 'twenty-ui/theme-constants'; export const SignInUpWithSSO = () => { const { theme } = useContext(ThemeContext); diff --git a/packages/twenty-front/src/modules/billing/components/SettingsBillingCreditsSection.tsx b/packages/twenty-front/src/modules/billing/components/SettingsBillingCreditsSection.tsx index 28e4fae762..caa9a714e0 100644 --- a/packages/twenty-front/src/modules/billing/components/SettingsBillingCreditsSection.tsx +++ b/packages/twenty-front/src/modules/billing/components/SettingsBillingCreditsSection.tsx @@ -14,7 +14,7 @@ import { formatToShortNumber } from 'twenty-shared/utils'; import { H2Title, HorizontalSeparator } from 'twenty-ui/display'; import { ProgressBar } from 'twenty-ui/feedback'; import { Section } from 'twenty-ui/layout'; -import { ThemeContext } from 'twenty-ui/theme'; +import { ThemeContext } from 'twenty-ui/theme-constants'; import { SubscriptionStatus } from '~/generated-metadata/graphql'; export const SettingsBillingCreditsSection = ({ @@ -24,6 +24,7 @@ export const SettingsBillingCreditsSection = ({ CurrentWorkspace['currentBillingSubscription'] >; }) => { + const { theme } = useContext(ThemeContext); const subscriptionStatus = useSubscriptionStatus(); const { formatNumber } = useNumberFormat(); @@ -60,8 +61,6 @@ export const SettingsBillingCreditsSection = ({ currentBillingSubscription.interval, ); - const { theme } = useContext(ThemeContext); - return ( <>
diff --git a/packages/twenty-front/src/modules/billing/components/SubscriptionBenefit.tsx b/packages/twenty-front/src/modules/billing/components/SubscriptionBenefit.tsx index f30be08d79..d7292951c8 100644 --- a/packages/twenty-front/src/modules/billing/components/SubscriptionBenefit.tsx +++ b/packages/twenty-front/src/modules/billing/components/SubscriptionBenefit.tsx @@ -1,8 +1,7 @@ import { styled } from '@linaria/react'; import React, { useContext } from 'react'; import { IconCheck } from 'twenty-ui/display'; -import { ThemeContext } from 'twenty-ui/theme'; -import { themeCssVariables } from 'twenty-ui/theme-constants'; +import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants'; const StyledBenefitContainer = styled.div` color: ${themeCssVariables.font.color.secondary}; @@ -25,6 +24,7 @@ type SubscriptionBenefitProps = { }; export const SubscriptionBenefit = ({ children }: SubscriptionBenefitProps) => { const { theme } = useContext(ThemeContext); + return ( diff --git a/packages/twenty-front/src/modules/billing/components/internal/SubscriptionInfoRowContainer.tsx b/packages/twenty-front/src/modules/billing/components/internal/SubscriptionInfoRowContainer.tsx index 2cbfd5c366..3b304490cc 100644 --- a/packages/twenty-front/src/modules/billing/components/internal/SubscriptionInfoRowContainer.tsx +++ b/packages/twenty-front/src/modules/billing/components/internal/SubscriptionInfoRowContainer.tsx @@ -2,8 +2,7 @@ import { type IconComponent } from 'twenty-ui/display'; import React, { useContext } from 'react'; import { styled } from '@linaria/react'; import { t } from '@lingui/core/macro'; -import { ThemeContext } from 'twenty-ui/theme'; -import { themeCssVariables } from 'twenty-ui/theme-constants'; +import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants'; type SubscriptionInfoRowContainerProps = { Icon: IconComponent; @@ -56,6 +55,7 @@ export const SubscriptionInfoRowContainer = ({ nextValue, }: SubscriptionInfoRowContainerProps) => { const { theme } = useContext(ThemeContext); + return ( diff --git a/packages/twenty-front/src/modules/blocknote-editor/components/BlockEditor.tsx b/packages/twenty-front/src/modules/blocknote-editor/components/BlockEditor.tsx index a346a75a8b..6351963336 100644 --- a/packages/twenty-front/src/modules/blocknote-editor/components/BlockEditor.tsx +++ b/packages/twenty-front/src/modules/blocknote-editor/components/BlockEditor.tsx @@ -3,9 +3,6 @@ import { BlockNoteView } from '@blocknote/mantine'; import { SuggestionMenuController } from '@blocknote/react'; import { styled } from '@linaria/react'; import { type ClipboardEvent, useContext } from 'react'; -import { ThemeContext } from 'twenty-ui/theme'; -import { themeCssVariables } from 'twenty-ui/theme-constants'; - import { type BLOCK_SCHEMA } from '@/blocknote-editor/blocks/Schema'; import { getSlashMenu } from '@/blocknote-editor/utils/getSlashMenu'; import { CustomMentionMenu } from '@/blocknote-editor/components/CustomMentionMenu'; @@ -15,6 +12,7 @@ import { type SuggestionItem, } from '@/blocknote-editor/components/CustomSlashMenu'; import { useMentionMenu } from '@/mention/hooks/useMentionMenu'; +import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants'; interface BlockEditorProps { editor: typeof BLOCK_SCHEMA.BlockNoteEditor; @@ -142,8 +140,9 @@ export const BlockEditor = ({ onPaste, readonly, }: BlockEditorProps) => { - const { theme } = useContext(ThemeContext); - const blockNoteTheme = theme.name === 'light' ? 'light' : 'dark'; + const { colorScheme } = useContext(ThemeContext); + + const blockNoteTheme = colorScheme === 'light' ? 'light' : 'dark'; const getMentionItems = useMentionMenu(editor); const handleFocus = () => { diff --git a/packages/twenty-front/src/modules/blocknote-editor/components/CustomSideMenuOptions.tsx b/packages/twenty-front/src/modules/blocknote-editor/components/CustomSideMenuOptions.tsx index 9b6cc0dc28..bd62af3512 100644 --- a/packages/twenty-front/src/modules/blocknote-editor/components/CustomSideMenuOptions.tsx +++ b/packages/twenty-front/src/modules/blocknote-editor/components/CustomSideMenuOptions.tsx @@ -1,8 +1,7 @@ import { styled } from '@linaria/react'; import { useContext } from 'react'; import { type IconComponent } from 'twenty-ui/display'; -import { ThemeContext } from 'twenty-ui/theme'; -import { themeCssVariables } from 'twenty-ui/theme-constants'; +import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants'; const StyledContainer = styled.div<{ Variant: Variants }>` color: ${({ Variant }) => @@ -29,6 +28,7 @@ export const CustomSideMenuOptions = ({ text, }: CustomSideMenuOptionsProps) => { const { theme } = useContext(ThemeContext); + return ( ` background: ${({ withIconBackground }) => withIconBackground ? themeCssVariables.background.primary : 'unset'}; @@ -32,6 +30,7 @@ export const CommandMenuContextRecordChipAvatars = ({ objectMetadataItem: ObjectMetadataItem; record: ObjectRecord; }) => { + const { theme } = useContext(ThemeContext); const { recordChipData } = useRecordChipData({ objectNameSingular: objectMetadataItem.nameSingular, record, @@ -39,9 +38,6 @@ export const CommandMenuContextRecordChipAvatars = ({ const { Icon, IconColor } = useGetStandardObjectIcon( objectMetadataItem.nameSingular, ); - - const { theme } = useContext(ThemeContext); - return ( { const { theme } = useContext(ThemeContext); - const { totalCount } = useFindManyRecordsSelectedInContextStore({ instanceId: commandMenuPageInstanceId, limit: 1, diff --git a/packages/twenty-front/src/modules/command-menu/components/CommandMenuOpenContainer.tsx b/packages/twenty-front/src/modules/command-menu/components/CommandMenuOpenContainer.tsx index 3d86aba025..27db5ba554 100644 --- a/packages/twenty-front/src/modules/command-menu/components/CommandMenuOpenContainer.tsx +++ b/packages/twenty-front/src/modules/command-menu/components/CommandMenuOpenContainer.tsx @@ -23,9 +23,7 @@ import { motion } from 'framer-motion'; import { useCallback, useContext, useRef } from 'react'; import { LINK_CHIP_CLICK_OUTSIDE_ID } from 'twenty-ui/components'; import { useIsMobile } from 'twenty-ui/utilities'; -import { themeCssVariables } from 'twenty-ui/theme-constants'; -import { ThemeContext } from 'twenty-ui/theme'; - +import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants'; const StyledCommandMenuBase = styled.div` background: ${themeCssVariables.background.primary}; border-left: 1px solid ${themeCssVariables.border.color.medium}; @@ -46,14 +44,12 @@ const StyledCommandMenu = motion.create(StyledCommandMenuBase); export const CommandMenuOpenContainer = ({ children, }: React.PropsWithChildren) => { + const { theme } = useContext(ThemeContext); const isMobile = useIsMobile(); const targetVariantForAnimation: CommandMenuAnimationVariant = isMobile ? 'fullScreen' : 'normal'; - - const { theme } = useContext(ThemeContext); - const { closeCommandMenu } = useCommandMenu(); const commandMenuRef = useRef(null); @@ -100,7 +96,9 @@ export const CommandMenuOpenContainer = ({ initial="closed" exit="closed" variants={COMMAND_MENU_ANIMATION_VARIANTS} - transition={{ duration: theme.animation.duration.normal }} + transition={{ + duration: theme.animation.duration.normal, + }} onAnimationStart={() => setIsSidePanelAnimating(true)} onAnimationComplete={() => setIsSidePanelAnimating(false)} > diff --git a/packages/twenty-front/src/modules/command-menu/components/CommandMenuPageInfo.tsx b/packages/twenty-front/src/modules/command-menu/components/CommandMenuPageInfo.tsx index abb7ec3e29..5130f4018d 100644 --- a/packages/twenty-front/src/modules/command-menu/components/CommandMenuPageInfo.tsx +++ b/packages/twenty-front/src/modules/command-menu/components/CommandMenuPageInfo.tsx @@ -20,11 +20,9 @@ import { selectedNavigationMenuItemInEditModeState } from '@/navigation-menu-ite import { useAtomStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomStateValue'; import { CommandMenuPages } from 'twenty-shared/types'; -import { type CommandMenuContextChipProps } from './CommandMenuContextChip'; -import { themeCssVariables } from 'twenty-ui/theme-constants'; import { useContext } from 'react'; -import { ThemeContext } from 'twenty-ui/theme'; - +import { type CommandMenuContextChipProps } from './CommandMenuContextChip'; +import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants'; const StyledPageTitle = styled.div` color: ${themeCssVariables.font.color.primary}; font-size: ${themeCssVariables.font.size.sm}; diff --git a/packages/twenty-front/src/modules/command-menu/components/CommandMenuPageLayoutInfoContent.tsx b/packages/twenty-front/src/modules/command-menu/components/CommandMenuPageLayoutInfoContent.tsx index b448de7e1c..76b1fddfbf 100644 --- a/packages/twenty-front/src/modules/command-menu/components/CommandMenuPageLayoutInfoContent.tsx +++ b/packages/twenty-front/src/modules/command-menu/components/CommandMenuPageLayoutInfoContent.tsx @@ -18,8 +18,7 @@ import { CommandMenuPages } from 'twenty-shared/types'; import { isDefined } from 'twenty-shared/utils'; import { useIcons } from 'twenty-ui/display'; import { CommandMenuPageInfoLayout } from './CommandMenuPageInfoLayout'; -import { ThemeContext } from 'twenty-ui/theme'; - +import { ThemeContext } from 'twenty-ui/theme-constants'; export const CommandMenuPageLayoutInfoContent = ({ pageLayoutId, }: { diff --git a/packages/twenty-front/src/modules/command-menu/components/CommandMenuRouter.tsx b/packages/twenty-front/src/modules/command-menu/components/CommandMenuRouter.tsx index 0faf55086c..3d8ecea57f 100644 --- a/packages/twenty-front/src/modules/command-menu/components/CommandMenuRouter.tsx +++ b/packages/twenty-front/src/modules/command-menu/components/CommandMenuRouter.tsx @@ -8,9 +8,9 @@ import { CommandMenuPageComponentInstanceContext } from '@/command-menu/states/c import { useAtomStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomStateValue'; import { styled } from '@linaria/react'; import { motion } from 'framer-motion'; -import { isDefined } from 'twenty-shared/utils'; import { useContext } from 'react'; -import { ThemeContext } from 'twenty-ui/theme'; +import { isDefined } from 'twenty-shared/utils'; +import { ThemeContext } from 'twenty-ui/theme-constants'; const StyledCommandMenuContent = styled.div` flex: 1; @@ -18,6 +18,7 @@ const StyledCommandMenuContent = styled.div` `; export const CommandMenuRouter = () => { + const { theme } = useContext(ThemeContext); const commandMenuPage = useAtomStateValue(commandMenuPageState); const commandMenuPageInfo = useAtomStateValue(commandMenuPageInfoState); @@ -26,9 +27,6 @@ export const CommandMenuRouter = () => { ) : ( <> ); - - const { theme } = useContext(ThemeContext); - return ( ` align-items: center; @@ -80,6 +79,7 @@ const StyledContentContainer = styled.div` `; export const CommandMenuTopBar = () => { + const { theme } = useContext(ThemeContext); const [commandMenuSearch, setCommandMenuSearch] = useAtomState( commandMenuSearchState, ); @@ -101,8 +101,6 @@ export const CommandMenuTopBar = () => { commandMenuNavigationStackState, ); - const { theme } = useContext(ThemeContext); - const { contextChips } = useCommandMenuContextChips(); const { pushFocusItemToFocusStack } = usePushFocusItemToFocusStack(); diff --git a/packages/twenty-front/src/modules/command-menu/components/CommandMenuWorkflowStepInfo.tsx b/packages/twenty-front/src/modules/command-menu/components/CommandMenuWorkflowStepInfo.tsx index 0b80adce8a..60f6b5e96c 100644 --- a/packages/twenty-front/src/modules/command-menu/components/CommandMenuWorkflowStepInfo.tsx +++ b/packages/twenty-front/src/modules/command-menu/components/CommandMenuWorkflowStepInfo.tsx @@ -18,19 +18,20 @@ import { getActionIconColorOrThrow } from '@/workflow/workflow-steps/workflow-ac import { getTriggerIcon } from '@/workflow/workflow-trigger/utils/getTriggerIcon'; import { getTriggerIconColor } from '@/workflow/workflow-trigger/utils/getTriggerIconColor'; import { t } from '@lingui/core/macro'; -import { useState } from 'react'; +import { useContext, useState } from 'react'; import { CommandMenuPages, CoreObjectNameSingular } from 'twenty-shared/types'; import { isDefined } from 'twenty-shared/utils'; import { TRIGGER_STEP_ID } from 'twenty-shared/workflow'; import { useIcons } from 'twenty-ui/display'; -import { ICON_SIZES, ICON_STROKES } from 'twenty-ui/theme-constants'; import { CommandMenuPageInfoLayout } from './CommandMenuPageInfoLayout'; +import { ThemeContext } from 'twenty-ui/theme-constants'; export const CommandMenuWorkflowStepInfo = ({ commandMenuPageInstanceId, }: { commandMenuPageInstanceId: string; }) => { + const { theme } = useContext(ThemeContext); const { getIcon } = useIcons(); const commandMenuPage = useAtomStateValue(commandMenuPageState); @@ -169,7 +170,7 @@ export const CommandMenuWorkflowStepInfo = ({ + ) : undefined } iconColor={headerIconColor} diff --git a/packages/twenty-front/src/modules/command-menu/components/hooks/usePageLayoutHeaderInfo.ts b/packages/twenty-front/src/modules/command-menu/components/hooks/usePageLayoutHeaderInfo.ts index f660af8d7e..063ff8466f 100644 --- a/packages/twenty-front/src/modules/command-menu/components/hooks/usePageLayoutHeaderInfo.ts +++ b/packages/twenty-front/src/modules/command-menu/components/hooks/usePageLayoutHeaderInfo.ts @@ -13,8 +13,8 @@ import { IconPlus, type IconComponent, } from 'twenty-ui/display'; +import { ThemeContext } from 'twenty-ui/theme-constants'; import { useContext } from 'react'; -import { ThemeContext } from 'twenty-ui/theme'; type PageLayoutHeaderInfo = { headerIcon: IconComponent | undefined; diff --git a/packages/twenty-front/src/modules/command-menu/constants/CommandMenuAnimationVariants.ts b/packages/twenty-front/src/modules/command-menu/constants/CommandMenuAnimationVariants.ts index fd33b3de75..7db2daf635 100644 --- a/packages/twenty-front/src/modules/command-menu/constants/CommandMenuAnimationVariants.ts +++ b/packages/twenty-front/src/modules/command-menu/constants/CommandMenuAnimationVariants.ts @@ -1,4 +1,5 @@ -import { THEME_COMMON } from 'twenty-ui/theme'; +import { themeCssVariables } from 'twenty-ui/theme-constants'; + export const COMMAND_MENU_ANIMATION_VARIANTS = { fullScreen: { x: '0%', @@ -9,14 +10,14 @@ export const COMMAND_MENU_ANIMATION_VARIANTS = { }, normal: { x: '0%', - width: THEME_COMMON.rightDrawerWidth, + width: themeCssVariables.rightDrawerWidth, height: '100%', bottom: '0', top: '0', }, closed: { x: '100%', - width: THEME_COMMON.rightDrawerWidth, + width: themeCssVariables.rightDrawerWidth, height: '100%', bottom: '0', top: 'auto', diff --git a/packages/twenty-front/src/modules/command-menu/hooks/useCommandMenuContextChips.tsx b/packages/twenty-front/src/modules/command-menu/hooks/useCommandMenuContextChips.tsx index 6f2f9d0041..5a06000519 100644 --- a/packages/twenty-front/src/modules/command-menu/hooks/useCommandMenuContextChips.tsx +++ b/packages/twenty-front/src/modules/command-menu/hooks/useCommandMenuContextChips.tsx @@ -12,9 +12,11 @@ import { useAtomStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomState import { useContext, useMemo } from 'react'; import { CommandMenuPages } from 'twenty-shared/types'; import { isDefined } from 'twenty-shared/utils'; -import { ThemeContext } from 'twenty-ui/theme'; +import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants'; export const useCommandMenuContextChips = () => { + const { theme } = useContext(ThemeContext); + const iconSizeSm = theme.icon.size.sm; const commandMenuNavigationStack = useAtomStateValue( commandMenuNavigationStackState, ); @@ -27,8 +29,6 @@ export const useCommandMenuContextChips = () => { const { navigateCommandMenuHistory } = useCommandMenuHistory(); - const { theme } = useContext(ThemeContext); - const commandMenuNavigationMorphItemsByPage = useAtomStateValue( commandMenuNavigationMorphItemsByPageState, ); @@ -111,16 +111,16 @@ export const useCommandMenuContextChips = () => { return { page, Icons: isLastChip - ? [] + ? [] : [ , @@ -137,12 +137,11 @@ export const useCommandMenuContextChips = () => { }, [ commandMenuNavigationMorphItemsByPage, commandMenuNavigationStack, + iconSizeSm, navigateCommandMenuHistory, objectMetadataItems, recordIdentifiers, records, - theme.font.color.tertiary, - theme.icon.size.sm, ]); return { diff --git a/packages/twenty-front/src/modules/command-menu/pages/navigation-menu-item/components/CommandMenuEditColorOption.tsx b/packages/twenty-front/src/modules/command-menu/pages/navigation-menu-item/components/CommandMenuEditColorOption.tsx index 17752bcdfa..b3ad48caa6 100644 --- a/packages/twenty-front/src/modules/command-menu/pages/navigation-menu-item/components/CommandMenuEditColorOption.tsx +++ b/packages/twenty-front/src/modules/command-menu/pages/navigation-menu-item/components/CommandMenuEditColorOption.tsx @@ -15,9 +15,8 @@ import { DEFAULT_COLOR_LABELS, MenuItemSelectColor, } from 'twenty-ui/navigation'; -import { MAIN_COLOR_NAMES, type ThemeColor } from 'twenty-ui/theme'; import { themeCssVariables } from 'twenty-ui/theme-constants'; - +import { type ThemeColor, MAIN_COLOR_NAMES } from 'twenty-ui/theme'; const NAVIGATION_MENU_ITEM_COLOR_DROPDOWN_ID = 'navigation-menu-item-color'; const StyledMenuStyleText = styled.span` diff --git a/packages/twenty-front/src/modules/command-menu/pages/navigation-menu-item/components/CommandMenuNewSidebarItemMainMenu.tsx b/packages/twenty-front/src/modules/command-menu/pages/navigation-menu-item/components/CommandMenuNewSidebarItemMainMenu.tsx index b1bc13ccde..ed3e78c4e4 100644 --- a/packages/twenty-front/src/modules/command-menu/pages/navigation-menu-item/components/CommandMenuNewSidebarItemMainMenu.tsx +++ b/packages/twenty-front/src/modules/command-menu/pages/navigation-menu-item/components/CommandMenuNewSidebarItemMainMenu.tsx @@ -19,7 +19,7 @@ import { NavigationMenuItemStyleIcon } from '@/navigation-menu-item/components/N import { NavigationMenuItemType } from '@/navigation-menu-item/constants/NavigationMenuItemType'; import { SelectableListItem } from '@/ui/layout/selectable-list/components/SelectableListItem'; import { useContext } from 'react'; -import { ThemeContext } from 'twenty-ui/theme'; +import { ThemeContext } from 'twenty-ui/theme-constants'; type CommandMenuNewSidebarItemMainMenuProps = { onSelectObject: () => void; @@ -32,8 +32,8 @@ export const CommandMenuNewSidebarItemMainMenu = ({ onSelectView, onSelectRecord, }: CommandMenuNewSidebarItemMainMenuProps) => { - const { t } = useLingui(); const { theme } = useContext(ThemeContext); + const { t } = useLingui(); const { handleAddFolder } = useAddFolderToNavigationMenu(); const { handleAddLink } = useAddLinkToNavigationMenu(); diff --git a/packages/twenty-front/src/modules/command-menu/pages/page-layout/components/dropdown-content/ChartColorGradientOption.tsx b/packages/twenty-front/src/modules/command-menu/pages/page-layout/components/dropdown-content/ChartColorGradientOption.tsx index 3f684f20ac..70e7ebaf5a 100644 --- a/packages/twenty-front/src/modules/command-menu/pages/page-layout/components/dropdown-content/ChartColorGradientOption.tsx +++ b/packages/twenty-front/src/modules/command-menu/pages/page-layout/components/dropdown-content/ChartColorGradientOption.tsx @@ -5,9 +5,8 @@ import { SelectableListItem } from '@/ui/layout/selectable-list/components/Selec import { styled } from '@linaria/react'; import { ColorSample } from 'twenty-ui/display'; import { MenuItemSelect } from 'twenty-ui/navigation'; -import { type ThemeColor } from 'twenty-ui/theme'; import { themeCssVariables } from 'twenty-ui/theme-constants'; - +import { type ThemeColor } from 'twenty-ui/theme'; type ChartColorGradientOptionProps = { colorOption: { id: string; diff --git a/packages/twenty-front/src/modules/command-menu/pages/page-layout/components/dropdown-content/ChartColorPaletteOption.tsx b/packages/twenty-front/src/modules/command-menu/pages/page-layout/components/dropdown-content/ChartColorPaletteOption.tsx index f50e3cc716..50f51fde3e 100644 --- a/packages/twenty-front/src/modules/command-menu/pages/page-layout/components/dropdown-content/ChartColorPaletteOption.tsx +++ b/packages/twenty-front/src/modules/command-menu/pages/page-layout/components/dropdown-content/ChartColorPaletteOption.tsx @@ -6,10 +6,9 @@ import { styled } from '@linaria/react'; import { t } from '@lingui/core/macro'; import { ColorSample } from 'twenty-ui/display'; import { MenuItemSelect } from 'twenty-ui/navigation'; -import { type ThemeColor } from 'twenty-ui/theme'; import { getMainColorNameFromPaletteColorName } from 'twenty-ui/utilities'; import { themeCssVariables } from 'twenty-ui/theme-constants'; - +import { type ThemeColor } from 'twenty-ui/theme'; type ChartColorPaletteOptionProps = { selectedItemId: string | null; currentColor: string | null | undefined; diff --git a/packages/twenty-front/src/modules/command-menu/pages/page-layout/components/dropdown-content/ChartColorSelectionDropdownContent.tsx b/packages/twenty-front/src/modules/command-menu/pages/page-layout/components/dropdown-content/ChartColorSelectionDropdownContent.tsx index 83b33c2320..9c585c95b4 100644 --- a/packages/twenty-front/src/modules/command-menu/pages/page-layout/components/dropdown-content/ChartColorSelectionDropdownContent.tsx +++ b/packages/twenty-front/src/modules/command-menu/pages/page-layout/components/dropdown-content/ChartColorSelectionDropdownContent.tsx @@ -17,7 +17,7 @@ import { useAtomComponentStateValue } from '@/ui/utilities/state/jotai/hooks/use import { t } from '@lingui/core/macro'; import { useState } from 'react'; import { capitalize, isDefined } from 'twenty-shared/utils'; -import { MAIN_COLOR_NAMES, type ThemeColor } from 'twenty-ui/theme'; +import { type ThemeColor, MAIN_COLOR_NAMES } from 'twenty-ui/theme'; import { filterBySearchQuery } from '~/utils/filterBySearchQuery'; type ColorOption = { diff --git a/packages/twenty-front/src/modules/command-menu/pages/rich-text-page/components/CommandMenuEditRichTextPage.tsx b/packages/twenty-front/src/modules/command-menu/pages/rich-text-page/components/CommandMenuEditRichTextPage.tsx index a765690531..d09a92b0f4 100644 --- a/packages/twenty-front/src/modules/command-menu/pages/rich-text-page/components/CommandMenuEditRichTextPage.tsx +++ b/packages/twenty-front/src/modules/command-menu/pages/rich-text-page/components/CommandMenuEditRichTextPage.tsx @@ -5,8 +5,7 @@ import { styled } from '@linaria/react'; import { lazy, Suspense, useContext } from 'react'; import Skeleton, { SkeletonTheme } from 'react-loading-skeleton'; import { CoreObjectNameSingular } from 'twenty-shared/types'; -import { ThemeContext } from 'twenty-ui/theme'; -import { themeCssVariables } from 'twenty-ui/theme-constants'; +import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants'; const ActivityRichTextEditor = lazy(() => import('@/activities/components/ActivityRichTextEditor').then((module) => ({ @@ -23,7 +22,6 @@ const StyledContainer = styled.div` const LoadingSkeleton = () => { const { theme } = useContext(ThemeContext); - return ( { + const { theme } = useContext(ThemeContext); const { getIcon } = useIcons(); const workflowId = useCommandMenuWorkflowIdOrThrow(); const { updateTrigger } = useUpdateWorkflowVersionTrigger(); @@ -73,8 +74,6 @@ export const CommandMenuWorkflowSelectTriggerTypeContent = () => { }; }; - const { theme } = useContext(ThemeContext); - return ( diff --git a/packages/twenty-front/src/modules/error-handler/components/AppRootErrorFallback.tsx b/packages/twenty-front/src/modules/error-handler/components/AppRootErrorFallback.tsx index 2240825f54..dcdf2edd93 100644 --- a/packages/twenty-front/src/modules/error-handler/components/AppRootErrorFallback.tsx +++ b/packages/twenty-front/src/modules/error-handler/components/AppRootErrorFallback.tsx @@ -1,8 +1,9 @@ import { type AppErrorDisplayProps } from '@/error-handler/types/AppErrorDisplayProps'; import { styled } from '@linaria/react'; import { t } from '@lingui/core/macro'; +import { useContext } from 'react'; import { IconReload } from 'twenty-ui/display'; -import { ICON_SIZES, themeCssVariables } from 'twenty-ui/theme-constants'; +import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants'; type AppRootErrorFallbackProps = AppErrorDisplayProps; @@ -102,6 +103,8 @@ export const AppRootErrorFallback = ({ resetErrorBoundary, title = t`Sorry, something went wrong`, }: AppRootErrorFallbackProps) => { + const { theme } = useContext(ThemeContext); + return ( @@ -124,7 +127,7 @@ export const AppRootErrorFallback = ({ - + {t`Reload`} diff --git a/packages/twenty-front/src/modules/favorites/components/FavoriteIcon.tsx b/packages/twenty-front/src/modules/favorites/components/FavoriteIcon.tsx index 8de9d9d5b7..90f5294a0c 100644 --- a/packages/twenty-front/src/modules/favorites/components/FavoriteIcon.tsx +++ b/packages/twenty-front/src/modules/favorites/components/FavoriteIcon.tsx @@ -2,7 +2,7 @@ import { type ProcessedFavorite } from '@/favorites/utils/sortFavorites'; import { useGetStandardObjectIcon } from '@/object-metadata/hooks/useGetStandardObjectIcon'; import { useContext } from 'react'; import { Avatar, useIcons } from 'twenty-ui/display'; -import { ThemeContext } from 'twenty-ui/theme'; +import { ThemeContext } from 'twenty-ui/theme-constants'; export const FavoriteIcon = ({ favorite }: { favorite: ProcessedFavorite }) => { const { theme } = useContext(ThemeContext); diff --git a/packages/twenty-front/src/modules/favorites/components/FavoritesBackButton.tsx b/packages/twenty-front/src/modules/favorites/components/FavoritesBackButton.tsx index f614e2bc7c..f0b9e38611 100644 --- a/packages/twenty-front/src/modules/favorites/components/FavoritesBackButton.tsx +++ b/packages/twenty-front/src/modules/favorites/components/FavoritesBackButton.tsx @@ -1,10 +1,9 @@ import { currentFavoriteFolderIdState } from '@/ui/navigation/navigation-drawer/states/currentFavoriteFolderIdState'; import { useSetAtomState } from '@/ui/utilities/state/jotai/hooks/useSetAtomState'; import { styled } from '@linaria/react'; -import { useContext } from 'react'; import { IconX } from 'twenty-ui/display'; -import { ThemeContext } from 'twenty-ui/theme'; -import { themeCssVariables } from 'twenty-ui/theme-constants'; +import { useContext } from 'react'; +import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants'; const StyledBackButton = styled.button` display: flex; diff --git a/packages/twenty-front/src/modules/favorites/components/FavoritesSkeletonLoader.tsx b/packages/twenty-front/src/modules/favorites/components/FavoritesSkeletonLoader.tsx index 765dbb969b..aaf023afd1 100644 --- a/packages/twenty-front/src/modules/favorites/components/FavoritesSkeletonLoader.tsx +++ b/packages/twenty-front/src/modules/favorites/components/FavoritesSkeletonLoader.tsx @@ -2,8 +2,7 @@ import { SKELETON_LOADER_HEIGHT_SIZES } from '@/activities/components/SkeletonLo import { styled } from '@linaria/react'; import { useContext } from 'react'; import Skeleton, { SkeletonTheme } from 'react-loading-skeleton'; -import { ThemeContext } from 'twenty-ui/theme'; -import { themeCssVariables } from 'twenty-ui/theme-constants'; +import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants'; const StyledSkeletonContainer = styled.div` display: flex; diff --git a/packages/twenty-front/src/modules/favorites/favorite-folder-picker/components/FavoriteFolderPickerFooter.tsx b/packages/twenty-front/src/modules/favorites/favorite-folder-picker/components/FavoriteFolderPickerFooter.tsx index 17ed61ba0d..be8df84e02 100644 --- a/packages/twenty-front/src/modules/favorites/favorite-folder-picker/components/FavoriteFolderPickerFooter.tsx +++ b/packages/twenty-front/src/modules/favorites/favorite-folder-picker/components/FavoriteFolderPickerFooter.tsx @@ -5,17 +5,17 @@ import { useCloseDropdown } from '@/ui/layout/dropdown/hooks/useCloseDropdown'; import { useNavigationSection } from '@/ui/navigation/navigation-drawer/hooks/useNavigationSection'; import { isNavigationDrawerExpandedState } from '@/ui/navigation/states/isNavigationDrawerExpanded'; import { useSetAtomState } from '@/ui/utilities/state/jotai/hooks/useSetAtomState'; -import { useContext } from 'react'; import { useLingui } from '@lingui/react/macro'; +import { useContext } from 'react'; import { IconPlus } from 'twenty-ui/display'; import { MenuItem } from 'twenty-ui/navigation'; -import { ThemeContext } from 'twenty-ui/theme'; - +import { ThemeContext } from 'twenty-ui/theme-constants'; export const FavoriteFolderPickerFooter = ({ dropdownId, }: { dropdownId: string; }) => { + const { theme } = useContext(ThemeContext); const { t } = useLingui(); const [, setIsFavoriteFolderCreating] = useAtomState( isFavoriteFolderCreatingState, @@ -24,7 +24,6 @@ export const FavoriteFolderPickerFooter = ({ isNavigationDrawerExpandedState, ); const { openNavigationSection } = useNavigationSection('Favorites'); - const { theme } = useContext(ThemeContext); const { closeDropdown } = useCloseDropdown(); return ( diff --git a/packages/twenty-front/src/modules/file/components/FileIcon.tsx b/packages/twenty-front/src/modules/file/components/FileIcon.tsx index e682a25766..326c2330a4 100644 --- a/packages/twenty-front/src/modules/file/components/FileIcon.tsx +++ b/packages/twenty-front/src/modules/file/components/FileIcon.tsx @@ -2,11 +2,10 @@ import { type AttachmentFileCategory } from '@/activities/files/types/Attachment import { useFileIconColors } from '@/file/hooks/useFileIconColors'; import { IconMapping } from '@/file/utils/fileIconMappings'; import { styled } from '@linaria/react'; -import { useContext } from 'react'; import { type FileCategory } from 'twenty-shared/types'; import { AvatarOrIcon } from 'twenty-ui/components'; -import { ThemeContext } from 'twenty-ui/theme'; -import { themeCssVariables } from 'twenty-ui/theme-constants'; +import { useContext } from 'react'; +import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants'; type FileIconSize = 'small' | 'medium'; diff --git a/packages/twenty-front/src/modules/file/hooks/useFileCategoryColors.ts b/packages/twenty-front/src/modules/file/hooks/useFileCategoryColors.ts index 00f6ec7202..e7b6698018 100644 --- a/packages/twenty-front/src/modules/file/hooks/useFileCategoryColors.ts +++ b/packages/twenty-front/src/modules/file/hooks/useFileCategoryColors.ts @@ -3,13 +3,14 @@ import { useObjectMetadataItem } from '@/object-metadata/hooks/useObjectMetadata import { useContext } from 'react'; import { CoreObjectNameSingular } from 'twenty-shared/types'; import { isDefined } from 'twenty-shared/utils'; -import { type ThemeColor, ThemeContext } from 'twenty-ui/theme'; - +import { ThemeContext } from 'twenty-ui/theme-constants'; +import { type ThemeColor } from 'twenty-ui/theme'; export const useFileCategoryColors = (): Record< AttachmentFileCategory, string > => { const { theme } = useContext(ThemeContext); + const { objectMetadataItem } = useObjectMetadataItem({ objectNameSingular: CoreObjectNameSingular.Attachment, }); @@ -36,9 +37,11 @@ export const useFileCategoryColors = (): Record< if ( isDefined(category) && isDefined(color) && - isDefined(theme.color[color]) + isDefined((theme.color as unknown as Record)[color]) ) { - colorMap[category] = theme.color[color]; + colorMap[category] = (theme.color as unknown as Record)[ + color + ]; } }); } diff --git a/packages/twenty-front/src/modules/file/hooks/useFileIconColors.ts b/packages/twenty-front/src/modules/file/hooks/useFileIconColors.ts index 4cd85f4fa5..e59eff996d 100644 --- a/packages/twenty-front/src/modules/file/hooks/useFileIconColors.ts +++ b/packages/twenty-front/src/modules/file/hooks/useFileIconColors.ts @@ -1,7 +1,7 @@ import { type AttachmentFileCategory } from '@/activities/files/types/AttachmentFileCategory'; import { useContext } from 'react'; import { type FileCategory } from 'twenty-shared/types'; -import { ThemeContext } from 'twenty-ui/theme'; +import { ThemeContext } from 'twenty-ui/theme-constants'; export const useFileIconColors = (): Record< AttachmentFileCategory | FileCategory, diff --git a/packages/twenty-front/src/modules/front-components/components/FrontComponentRenderer.tsx b/packages/twenty-front/src/modules/front-components/components/FrontComponentRenderer.tsx index 192eea8b33..e69274bc2a 100644 --- a/packages/twenty-front/src/modules/front-components/components/FrontComponentRenderer.tsx +++ b/packages/twenty-front/src/modules/front-components/components/FrontComponentRenderer.tsx @@ -9,7 +9,7 @@ import { t } from '@lingui/core/macro'; import { useCallback, useContext } from 'react'; import { FrontComponentRenderer as SharedFrontComponentRenderer } from 'twenty-sdk/front-component-renderer'; import { isDefined } from 'twenty-shared/utils'; -import { ThemeContext } from 'twenty-ui/theme'; +import { ThemeContext } from 'twenty-ui/theme-constants'; import { REACT_APP_SERVER_BASE_URL } from '~/config'; import { useFindOneFrontComponentQuery } from '~/generated-metadata/graphql'; @@ -20,7 +20,7 @@ type FrontComponentRendererProps = { export const FrontComponentRenderer = ({ frontComponentId, }: FrontComponentRendererProps) => { - const { theme } = useContext(ThemeContext); + const { colorScheme } = useContext(ThemeContext); const { enqueueErrorSnackBar } = useSnackBar(); const setFrontComponentApplicationTokenPair = useSetAtomComponentState( @@ -81,7 +81,7 @@ export const FrontComponentRenderer = ({ return ( { + const { theme } = useContext(ThemeContext); const style = getNavigationMenuItemIconStyleFromColor(color); return ( diff --git a/packages/twenty-front/src/modules/navigation-menu-item/components/ObjectIconWithViewOverlay.tsx b/packages/twenty-front/src/modules/navigation-menu-item/components/ObjectIconWithViewOverlay.tsx index 66dc749fe2..52cd576950 100644 --- a/packages/twenty-front/src/modules/navigation-menu-item/components/ObjectIconWithViewOverlay.tsx +++ b/packages/twenty-front/src/modules/navigation-menu-item/components/ObjectIconWithViewOverlay.tsx @@ -1,6 +1,7 @@ import { styled } from '@linaria/react'; import type { IconComponent } from 'twenty-ui/display'; -import { ICON_STROKES, themeCssVariables } from 'twenty-ui/theme-constants'; +import { useContext } from 'react'; +import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants'; import { getNavigationMenuItemIconStyleFromColor } from '@/navigation-menu-item/utils/get-navigation-menu-item-icon-style-from-color'; @@ -56,6 +57,7 @@ export const ObjectIconWithViewOverlay = ({ ViewIcon, objectColor, }: ObjectIconWithViewOverlayProps) => { + const { theme } = useContext(ThemeContext); const objectStyle = getNavigationMenuItemIconStyleFromColor(objectColor); return ( @@ -66,14 +68,14 @@ export const ObjectIconWithViewOverlay = ({ > diff --git a/packages/twenty-front/src/modules/navigation-menu-item/components/WorkspaceNavigationMenuItemFolderDragClone.tsx b/packages/twenty-front/src/modules/navigation-menu-item/components/WorkspaceNavigationMenuItemFolderDragClone.tsx index 39c7f74d57..eb4a0096c1 100644 --- a/packages/twenty-front/src/modules/navigation-menu-item/components/WorkspaceNavigationMenuItemFolderDragClone.tsx +++ b/packages/twenty-front/src/modules/navigation-menu-item/components/WorkspaceNavigationMenuItemFolderDragClone.tsx @@ -5,7 +5,7 @@ import { } from '@hello-pangea/dnd'; import { useContext } from 'react'; import { isDefined } from 'twenty-shared/utils'; -import { ThemeContext } from 'twenty-ui/theme'; +import { ThemeContext } from 'twenty-ui/theme-constants'; import { NavigationMenuItemIcon } from '@/navigation-menu-item/components/NavigationMenuItemIcon'; import { getNavigationMenuItemSecondaryLabel } from '@/navigation-menu-item/utils/getNavigationMenuItemSecondaryLabel'; diff --git a/packages/twenty-front/src/modules/navigation-menu-item/components/WorkspaceNavigationMenuItemsFolder.tsx b/packages/twenty-front/src/modules/navigation-menu-item/components/WorkspaceNavigationMenuItemsFolder.tsx index 92223d454d..fd542db459 100644 --- a/packages/twenty-front/src/modules/navigation-menu-item/components/WorkspaceNavigationMenuItemsFolder.tsx +++ b/packages/twenty-front/src/modules/navigation-menu-item/components/WorkspaceNavigationMenuItemsFolder.tsx @@ -11,8 +11,7 @@ import { IconPlus, useIcons, } from 'twenty-ui/display'; -import { ThemeContext } from 'twenty-ui/theme'; -import { themeCssVariables } from 'twenty-ui/theme-constants'; +import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants'; import { useIsDropDisabledForSection } from '@/navigation-menu-item/hooks/useIsDropDisabledForSection'; import { useOpenAddItemToFolderPage } from '@/navigation-menu-item/hooks/useOpenAddItemToFolderPage'; diff --git a/packages/twenty-front/src/modules/navigation-menu-item/utils/get-color-from-theme.util.ts b/packages/twenty-front/src/modules/navigation-menu-item/utils/get-color-from-theme.util.ts index a82b82faaa..aa30425cb4 100644 --- a/packages/twenty-front/src/modules/navigation-menu-item/utils/get-color-from-theme.util.ts +++ b/packages/twenty-front/src/modules/navigation-menu-item/utils/get-color-from-theme.util.ts @@ -1,5 +1,5 @@ -import type { ThemeColor } from 'twenty-ui/theme'; import { themeCssVariables } from 'twenty-ui/theme-constants'; +import { type ThemeColor } from 'twenty-ui/theme'; export const getColorFromTheme = ( themeColor: ThemeColor, diff --git a/packages/twenty-front/src/modules/navigation/components/MainNavigationDrawerTabsRow.tsx b/packages/twenty-front/src/modules/navigation/components/MainNavigationDrawerTabsRow.tsx index 3ac89399ae..30a4cce475 100644 --- a/packages/twenty-front/src/modules/navigation/components/MainNavigationDrawerTabsRow.tsx +++ b/packages/twenty-front/src/modules/navigation/components/MainNavigationDrawerTabsRow.tsx @@ -1,15 +1,15 @@ import { styled } from '@linaria/react'; import { t } from '@lingui/core/macro'; -import { useContext } from 'react'; import { IconComment, IconHome, IconMessageCirclePlus, } from 'twenty-ui/display'; -import { ThemeContext } from 'twenty-ui/theme'; -import { themeCssVariables } from 'twenty-ui/theme-constants'; +import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants'; import { useIsMobile } from 'twenty-ui/utilities'; +import { useContext } from 'react'; + import { useCreateNewAIChatThread } from '@/ai/hooks/useCreateNewAIChatThread'; import { NavigationDrawerAnimatedCollapseWrapper } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerAnimatedCollapseWrapper'; import { isNavigationDrawerExpandedState } from '@/ui/navigation/states/isNavigationDrawerExpanded'; diff --git a/packages/twenty-front/src/modules/object-metadata/components/NavigationDrawerSectionForObjectMetadataItemsSkeletonLoader.tsx b/packages/twenty-front/src/modules/object-metadata/components/NavigationDrawerSectionForObjectMetadataItemsSkeletonLoader.tsx index 3b59008e9a..11d95b6174 100644 --- a/packages/twenty-front/src/modules/object-metadata/components/NavigationDrawerSectionForObjectMetadataItemsSkeletonLoader.tsx +++ b/packages/twenty-front/src/modules/object-metadata/components/NavigationDrawerSectionForObjectMetadataItemsSkeletonLoader.tsx @@ -2,8 +2,7 @@ import { SKELETON_LOADER_HEIGHT_SIZES } from '@/activities/components/SkeletonLo import { styled } from '@linaria/react'; import { useContext } from 'react'; import Skeleton, { SkeletonTheme } from 'react-loading-skeleton'; -import { ThemeContext } from 'twenty-ui/theme'; -import { themeCssVariables } from 'twenty-ui/theme-constants'; +import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants'; const StyledSkeletonColumn = styled.div` display: flex; diff --git a/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownBooleanSelect.tsx b/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownBooleanSelect.tsx index b1754216a2..c1f94ff6cf 100644 --- a/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownBooleanSelect.tsx +++ b/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownBooleanSelect.tsx @@ -1,8 +1,7 @@ import { styled } from '@linaria/react'; import { t } from '@lingui/core/macro'; import { useContext } from 'react'; -import { ThemeContext } from 'twenty-ui/theme'; -import { themeCssVariables } from 'twenty-ui/theme-constants'; +import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants'; import { useApplyObjectFilterDropdownFilterValue } from '@/object-record/object-filter-dropdown/hooks/useApplyObjectFilterDropdownFilterValue'; import { useObjectFilterDropdownFilterValue } from '@/object-record/object-filter-dropdown/hooks/useObjectFilterDropdownFilterValue'; diff --git a/packages/twenty-front/src/modules/object-record/object-options-dropdown/components/ObjectOptionsDropdownMenuViewName.tsx b/packages/twenty-front/src/modules/object-record/object-options-dropdown/components/ObjectOptionsDropdownMenuViewName.tsx index 1d768497a9..11bf2aead4 100644 --- a/packages/twenty-front/src/modules/object-record/object-options-dropdown/components/ObjectOptionsDropdownMenuViewName.tsx +++ b/packages/twenty-front/src/modules/object-record/object-options-dropdown/components/ObjectOptionsDropdownMenuViewName.tsx @@ -16,8 +16,7 @@ import { styled } from '@linaria/react'; import { useContext, useEffect, useRef, useState } from 'react'; import { Key } from 'ts-key-enum'; import { OverflowingTextWithTooltip, useIcons } from 'twenty-ui/display'; -import { ThemeContext } from 'twenty-ui/theme'; -import { themeCssVariables } from 'twenty-ui/theme-constants'; +import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants'; import { useDebouncedCallback } from 'use-debounce'; const StyledDropdownMenuIconAndNameContainer = styled.div` @@ -60,6 +59,7 @@ type ObjectOptionsDropdownMenuViewNameProps = { export const ObjectOptionsDropdownMenuViewName = ({ currentView, }: ObjectOptionsDropdownMenuViewNameProps) => { + const { theme } = useContext(ThemeContext); const [viewPickerSelectedIcon, setViewPickerSelectedIcon] = useAtomComponentState(viewPickerSelectedIconComponentState); @@ -111,7 +111,6 @@ export const ObjectOptionsDropdownMenuViewName = ({ } }, [currentView?.key]); - const { theme } = useContext(ThemeContext); const { getIcon } = useIcons(); const MainIcon = getIcon(currentView?.icon); diff --git a/packages/twenty-front/src/modules/object-record/record-board/record-board-column/components/RecordBoardColumnCardContainerSkeletonLoader.tsx b/packages/twenty-front/src/modules/object-record/record-board/record-board-column/components/RecordBoardColumnCardContainerSkeletonLoader.tsx index 2ac532ba99..21b3b061af 100644 --- a/packages/twenty-front/src/modules/object-record/record-board/record-board-column/components/RecordBoardColumnCardContainerSkeletonLoader.tsx +++ b/packages/twenty-front/src/modules/object-record/record-board/record-board-column/components/RecordBoardColumnCardContainerSkeletonLoader.tsx @@ -1,8 +1,7 @@ import { styled } from '@linaria/react'; import { useContext } from 'react'; import { SkeletonTheme } from 'react-loading-skeleton'; -import { ThemeContext } from 'twenty-ui/theme'; -import { themeCssVariables } from 'twenty-ui/theme-constants'; +import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants'; import { SKELETON_LOADER_HEIGHT_SIZES } from '@/activities/components/SkeletonLoader'; import { RecordCardBodyContainer } from '@/object-record/record-card/components/RecordCardBodyContainer'; @@ -38,7 +37,6 @@ const StyledStaticCellSkeleton = styled.div<{ width: number; height: number }>` export const RecordBoardColumnCardContainerSkeletonLoader = () => { const { theme } = useContext(ThemeContext); - const { currentView } = useGetCurrentViewOnly(); const isCompactModeActive = currentView?.isCompact ?? false; diff --git a/packages/twenty-front/src/modules/object-record/record-board/record-board-column/components/RecordBoardColumnNewRecordButton.tsx b/packages/twenty-front/src/modules/object-record/record-board/record-board-column/components/RecordBoardColumnNewRecordButton.tsx index 2b827d1f3e..4f75d5701e 100644 --- a/packages/twenty-front/src/modules/object-record/record-board/record-board-column/components/RecordBoardColumnNewRecordButton.tsx +++ b/packages/twenty-front/src/modules/object-record/record-board/record-board-column/components/RecordBoardColumnNewRecordButton.tsx @@ -8,8 +8,7 @@ import { styled } from '@linaria/react'; import { t } from '@lingui/core/macro'; import { useContext } from 'react'; import { IconPlus } from 'twenty-ui/display'; -import { ThemeContext } from 'twenty-ui/theme'; -import { themeCssVariables } from 'twenty-ui/theme-constants'; +import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants'; const StyledNewButton = styled.button` align-items: center; @@ -30,7 +29,6 @@ const StyledNewButton = styled.button` export const RecordBoardColumnNewRecordButton = () => { const { theme } = useContext(ThemeContext); - const { objectMetadataItem, selectFieldMetadataItem } = useContext(RecordBoardContext); diff --git a/packages/twenty-front/src/modules/object-record/record-calendar/components/RecordCalendarAddNew.tsx b/packages/twenty-front/src/modules/object-record/record-calendar/components/RecordCalendarAddNew.tsx index 6ecebbed66..8a92a73ec8 100644 --- a/packages/twenty-front/src/modules/object-record/record-calendar/components/RecordCalendarAddNew.tsx +++ b/packages/twenty-front/src/modules/object-record/record-calendar/components/RecordCalendarAddNew.tsx @@ -12,8 +12,7 @@ import { useContext } from 'react'; import { type Temporal } from 'temporal-polyfill'; import { IconPlus } from 'twenty-ui/display'; import { Button } from 'twenty-ui/input'; -import { ThemeContext } from 'twenty-ui/theme'; -import { themeCssVariables } from 'twenty-ui/theme-constants'; +import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants'; const StyledButton = styled(Button)` padding: ${themeCssVariables.spacing['0.5']}; @@ -28,10 +27,9 @@ type RecordCalendarAddNewProps = { export const RecordCalendarAddNew = ({ cardDate, }: RecordCalendarAddNewProps) => { + const { theme } = useContext(ThemeContext); const { userTimezone } = useUserTimezone(); const { objectMetadataItem } = useRecordCalendarContextOrThrow(); - const { theme } = useContext(ThemeContext); - const { createNewIndexRecord } = useCreateNewIndexRecord({ objectMetadataItem, }); diff --git a/packages/twenty-front/src/modules/object-record/record-field/ui/form-types/components/BaseChip.tsx b/packages/twenty-front/src/modules/object-record/record-field/ui/form-types/components/BaseChip.tsx index 1c44f6fb2b..7ff8ad10d3 100644 --- a/packages/twenty-front/src/modules/object-record/record-field/ui/form-types/components/BaseChip.tsx +++ b/packages/twenty-front/src/modules/object-record/record-field/ui/form-types/components/BaseChip.tsx @@ -1,8 +1,7 @@ import { styled } from '@linaria/react'; import { useContext } from 'react'; import { IconX } from 'twenty-ui/display'; -import { ThemeContext } from 'twenty-ui/theme'; -import { themeCssVariables } from 'twenty-ui/theme-constants'; +import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants'; const StyledChip = styled.div<{ deletable: boolean; danger: boolean }>` background-color: ${({ danger }) => diff --git a/packages/twenty-front/src/modules/object-record/record-field/ui/form-types/components/FormAdvancedTextFieldInput.tsx b/packages/twenty-front/src/modules/object-record/record-field/ui/form-types/components/FormAdvancedTextFieldInput.tsx index 127a8c2bef..ce2b4a38b2 100644 --- a/packages/twenty-front/src/modules/object-record/record-field/ui/form-types/components/FormAdvancedTextFieldInput.tsx +++ b/packages/twenty-front/src/modules/object-record/record-field/ui/form-types/components/FormAdvancedTextFieldInput.tsx @@ -19,8 +19,7 @@ import { useLingui } from '@lingui/react/macro'; import { useContext, useId, useState } from 'react'; import { isDefined } from 'twenty-shared/utils'; import { IconMaximize } from 'twenty-ui/display'; -import { ThemeContext } from 'twenty-ui/theme'; -import { themeCssVariables } from 'twenty-ui/theme-constants'; +import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants'; import { useIsMobile } from 'twenty-ui/utilities'; const StyledAdvancedTextFieldContainer = styled(FormFieldInputContainer)` @@ -110,10 +109,10 @@ export const FormAdvancedTextFieldInput = ({ maxWidth, contentType = 'json', }: FormAdvancedTextFieldInputProps) => { + const { theme } = useContext(ThemeContext); const instanceId = useId(); const isMobile = useIsMobile(); const [isFullScreen, setIsFullScreen] = useState(false); - const { theme } = useContext(ThemeContext); const { t } = useLingui(); const { pushFocusItemToFocusStack } = usePushFocusItemToFocusStack(); diff --git a/packages/twenty-front/src/modules/object-record/record-field/ui/form-types/components/FormArrayFieldInput.tsx b/packages/twenty-front/src/modules/object-record/record-field/ui/form-types/components/FormArrayFieldInput.tsx index b2853017ca..4dfc5aa604 100644 --- a/packages/twenty-front/src/modules/object-record/record-field/ui/form-types/components/FormArrayFieldInput.tsx +++ b/packages/twenty-front/src/modules/object-record/record-field/ui/form-types/components/FormArrayFieldInput.tsx @@ -28,8 +28,7 @@ import { isNonEmptyArray } from '@sniptt/guards'; import { useContext, useId, useRef, useState } from 'react'; import { isDefined } from 'twenty-shared/utils'; import { IconPlus } from 'twenty-ui/display'; -import { ThemeContext } from 'twenty-ui/theme'; -import { themeCssVariables } from 'twenty-ui/theme-constants'; +import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants'; import { MenuItem } from 'twenty-ui/navigation'; import { toSpliced } from '~/utils/array/toSpliced'; @@ -87,7 +86,6 @@ export const FormArrayFieldInput = ({ }: FormArrayFieldInputProps) => { const { t } = useLingui(); const { theme } = useContext(ThemeContext); - const instanceId = useId(); const { pushFocusItemToFocusStack } = usePushFocusItemToFocusStack(); @@ -323,7 +321,7 @@ export const FormArrayFieldInput = ({ dropdownId={dropdownId} dropdownPlacement="bottom-start" dropdownOffset={{ - y: parseSpacingValueAsNumber(theme.spacing(1)), + y: parseSpacingValueAsNumber(theme.spacing[1]), }} clickableComponent={ diff --git a/packages/twenty-front/src/modules/object-record/record-field/ui/form-types/components/FormBooleanFieldInput.tsx b/packages/twenty-front/src/modules/object-record/record-field/ui/form-types/components/FormBooleanFieldInput.tsx index f4c41da20e..5a1089d27f 100644 --- a/packages/twenty-front/src/modules/object-record/record-field/ui/form-types/components/FormBooleanFieldInput.tsx +++ b/packages/twenty-front/src/modules/object-record/record-field/ui/form-types/components/FormBooleanFieldInput.tsx @@ -12,7 +12,7 @@ import { useLingui } from '@lingui/react/macro'; import { useContext, useId, useState } from 'react'; import { isDefined } from 'twenty-shared/utils'; import { IconCheck, IconCircleOff, IconX } from 'twenty-ui/display'; -import { ThemeContext } from 'twenty-ui/theme'; +import { ThemeContext } from 'twenty-ui/theme-constants'; type FormBooleanFieldInputProps = { label?: string; @@ -45,8 +45,8 @@ export const FormBooleanFieldInput = ({ readonly, VariablePicker, }: FormBooleanFieldInputProps) => { - const { theme } = useContext(ThemeContext); const { t } = useLingui(); + const { theme } = useContext(ThemeContext); const instanceId = useId(); @@ -134,7 +134,9 @@ export const FormBooleanFieldInput = ({ hasRightElement={isDefined(VariablePicker) && !readonly} disabled={readonly} dropdownWidth={GenericDropdownContentWidth.ExtraLarge} - dropdownOffset={{ y: parseInt(theme.spacing(1), 10) }} + dropdownOffset={{ + y: parseInt(theme.spacing[1], 10), + }} /> ) : ( { - const instanceId = useId(); const { theme } = useContext(ThemeContext); + const instanceId = useId(); const { pushFocusItemToFocusStack } = usePushFocusItemToFocusStack(); const { removeFocusItemFromFocusStackById } = diff --git a/packages/twenty-front/src/modules/object-record/record-field/ui/form-types/components/FormSelectFieldInput.tsx b/packages/twenty-front/src/modules/object-record/record-field/ui/form-types/components/FormSelectFieldInput.tsx index 938a5b8ff4..80833fa557 100644 --- a/packages/twenty-front/src/modules/object-record/record-field/ui/form-types/components/FormSelectFieldInput.tsx +++ b/packages/twenty-front/src/modules/object-record/record-field/ui/form-types/components/FormSelectFieldInput.tsx @@ -16,7 +16,7 @@ import { Key } from 'ts-key-enum'; import { isDefined } from 'twenty-shared/utils'; import { IconCircleOff } from 'twenty-ui/display'; import { type SelectOption } from 'twenty-ui/input'; -import { ThemeContext } from 'twenty-ui/theme'; +import { ThemeContext } from 'twenty-ui/theme-constants'; type FormSelectFieldInputProps = { label?: string; @@ -38,7 +38,6 @@ export const FormSelectFieldInput = ({ readonly, }: FormSelectFieldInputProps) => { const { theme } = useContext(ThemeContext); - const instanceId = useId(); const { removeFocusItemFromFocusStackById } = @@ -145,7 +144,9 @@ export const FormSelectFieldInput = ({ withSearchInput disabled={readonly} dropdownWidth={GenericDropdownContentWidth.ExtraLarge} - dropdownOffset={{ y: parseInt(theme.spacing(1), 10) }} + dropdownOffset={{ + y: parseInt(theme.spacing[1], 10), + }} /> ) : ( { const { theme } = useContext(ThemeContext); + const draftValue: FormSingleRecordPickerValue = isStandaloneVariableString( defaultValue, ) @@ -186,7 +186,9 @@ export const FormSingleRecordPicker = ({ clickableComponentWidth="100%" onClose={handleCloseRelationPickerDropdown} onOpen={handleOpenDropdown} - dropdownOffset={{ y: parseInt(theme.spacing(1), 10) }} + dropdownOffset={{ + y: parseInt(theme.spacing[1], 10), + }} clickableComponent={ { - const { theme } = useContext(ThemeContext); const { t } = useLingui(); + const { theme } = useContext(ThemeContext); const { variableLabel, variablePathLabel } = useSearchVariable({ stepId: extractRawVariableNamePart({ diff --git a/packages/twenty-front/src/modules/object-record/record-field/ui/meta-types/display/components/ForbiddenFieldDisplay.tsx b/packages/twenty-front/src/modules/object-record/record-field/ui/meta-types/display/components/ForbiddenFieldDisplay.tsx index 1edbad8c6d..574d01a98f 100644 --- a/packages/twenty-front/src/modules/object-record/record-field/ui/meta-types/display/components/ForbiddenFieldDisplay.tsx +++ b/packages/twenty-front/src/modules/object-record/record-field/ui/meta-types/display/components/ForbiddenFieldDisplay.tsx @@ -2,8 +2,7 @@ import { styled } from '@linaria/react'; import { Trans } from '@lingui/react/macro'; import { useContext } from 'react'; import { IconLock } from 'twenty-ui/display'; -import { ThemeContext } from 'twenty-ui/theme'; -import { themeCssVariables } from 'twenty-ui/theme-constants'; +import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants'; const StyledContainer = styled.div` align-items: center; diff --git a/packages/twenty-front/src/modules/object-record/record-field/ui/meta-types/input/components/RichTextFieldInput.tsx b/packages/twenty-front/src/modules/object-record/record-field/ui/meta-types/input/components/RichTextFieldInput.tsx index 4ede25a039..b1beee6870 100644 --- a/packages/twenty-front/src/modules/object-record/record-field/ui/meta-types/input/components/RichTextFieldInput.tsx +++ b/packages/twenty-front/src/modules/object-record/record-field/ui/meta-types/input/components/RichTextFieldInput.tsx @@ -14,8 +14,7 @@ import { Suspense, lazy, useContext, useRef } from 'react'; import Skeleton, { SkeletonTheme } from 'react-loading-skeleton'; import { IconLayoutSidebarLeftCollapse } from 'twenty-ui/display'; import { FloatingIconButton } from 'twenty-ui/input'; -import { ThemeContext } from 'twenty-ui/theme'; -import { themeCssVariables } from 'twenty-ui/theme-constants'; +import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants'; const ActivityRichTextEditor = lazy(() => import('@/activities/components/ActivityRichTextEditor').then((module) => ({ @@ -43,7 +42,6 @@ const StyledCollapseButton = styled.div` const LoadingSkeleton = () => { const { theme } = useContext(ThemeContext); - return ( { - const { theme } = useContext(ThemeContext); const isNavigationMenuItemEditingEnabled = useIsFeatureEnabled( FeatureFlagKey.IS_NAVIGATION_MENU_ITEM_EDITING_ENABLED, ); @@ -28,6 +27,7 @@ export const RecordIndexPageHeaderIcon = ({ coreIndexViewIdFromObjectMetadataItemFamilySelector, { objectMetadataItemId: objectMetadataItem?.id ?? '' }, ); + const { theme } = useContext(ThemeContext); const { getIcon } = useIcons(); const ObjectIcon = getIcon(objectMetadataItem?.icon); diff --git a/packages/twenty-front/src/modules/object-record/record-inline-cell/components/RecordInlineCellContainer.tsx b/packages/twenty-front/src/modules/object-record/record-inline-cell/components/RecordInlineCellContainer.tsx index 0af9e83e43..b41eba6593 100644 --- a/packages/twenty-front/src/modules/object-record/record-inline-cell/components/RecordInlineCellContainer.tsx +++ b/packages/twenty-front/src/modules/object-record/record-inline-cell/components/RecordInlineCellContainer.tsx @@ -1,7 +1,6 @@ import { styled } from '@linaria/react'; import { useContext } from 'react'; -import { ThemeContext } from 'twenty-ui/theme'; -import { themeCssVariables } from 'twenty-ui/theme-constants'; +import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants'; import { FieldContext } from '@/object-record/record-field/ui/contexts/FieldContext'; import { useFieldFocus } from '@/object-record/record-field/ui/hooks/useFieldFocus'; @@ -73,6 +72,7 @@ export const StyledSkeletonDiv = styled.div` export const RecordInlineCellContainer = () => { const { readonly, IconLabel, label, labelWidth, showLabel } = useRecordInlineCellContext(); + const { theme } = useContext(ThemeContext); const { recordId, fieldDefinition, onMouseEnter, onMouseLeave, anchorId } = useContext(FieldContext); @@ -97,7 +97,6 @@ export const RecordInlineCellContainer = () => { onMouseLeave?.(); }; - const { theme } = useContext(ThemeContext); const labelId = `label-${getRecordFieldInputInstanceId({ recordId, fieldName: fieldDefinition?.metadata?.fieldName, diff --git a/packages/twenty-front/src/modules/object-record/record-inline-cell/components/RecordInlineCellSkeletonLoader.tsx b/packages/twenty-front/src/modules/object-record/record-inline-cell/components/RecordInlineCellSkeletonLoader.tsx index 3a19ee2fb5..6ef8bdfe08 100644 --- a/packages/twenty-front/src/modules/object-record/record-inline-cell/components/RecordInlineCellSkeletonLoader.tsx +++ b/packages/twenty-front/src/modules/object-record/record-inline-cell/components/RecordInlineCellSkeletonLoader.tsx @@ -1,13 +1,12 @@ import { useContext } from 'react'; import Skeleton, { SkeletonTheme } from 'react-loading-skeleton'; -import { ThemeContext } from 'twenty-ui/theme'; import { SKELETON_LOADER_HEIGHT_SIZES } from '@/activities/components/SkeletonLoader'; +import { ThemeContext } from 'twenty-ui/theme-constants'; import { StyledSkeletonDiv } from './RecordInlineCellContainer'; export const RecordInlineCellSkeletonLoader = () => { const { theme } = useContext(ThemeContext); - return ( { + const { theme } = useContext(ThemeContext); const { loading } = useFindOneRecord({ objectNameSingular, objectRecordId, @@ -81,9 +81,6 @@ export const ObjectRecordShowPageBreadcrumb = ({ objectNameSingular, objectRecordId, ); - - const { theme } = useContext(ThemeContext); - if (loading) { return null; } diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellBaseContainer.tsx b/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellBaseContainer.tsx index a65986530f..8d095bab85 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellBaseContainer.tsx +++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellBaseContainer.tsx @@ -6,7 +6,7 @@ import { isFieldIdentifierDisplay } from '@/object-record/record-field/ui/meta-t import { RECORD_CHIP_CLICK_OUTSIDE_ID } from '@/object-record/record-table/constants/RecordChipClickOutsideId'; import { RecordTableCellContext } from '@/object-record/record-table/contexts/RecordTableCellContext'; import { useOpenRecordTableCellFromCell } from '@/object-record/record-table/record-table-cell/hooks/useOpenRecordTableCellFromCell'; -import { ThemeContext } from 'twenty-ui/theme'; +import { ThemeContext } from 'twenty-ui/theme-constants'; const StyledBaseContainer = styled.div<{ fontColorMedium: string; diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellFirstRowFirstColumn.tsx b/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellFirstRowFirstColumn.tsx index 4c1360a5a7..6299739c7c 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellFirstRowFirstColumn.tsx +++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellFirstRowFirstColumn.tsx @@ -10,7 +10,7 @@ import { styled } from '@linaria/react'; import { type DraggableProvidedDragHandleProps } from '@hello-pangea/dnd'; import { cx } from '@linaria/core'; import { useContext, type ReactNode } from 'react'; -import { ThemeContext } from 'twenty-ui/theme'; +import { ThemeContext } from 'twenty-ui/theme-constants'; const StyledRecordTableTd = styled(StyledCell)<{ zIndex: number }>` z-index: ${({ zIndex }) => zIndex}; diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellSkeletonLoader.tsx b/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellSkeletonLoader.tsx index ba960a42b4..eae1a0a920 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellSkeletonLoader.tsx +++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellSkeletonLoader.tsx @@ -2,8 +2,7 @@ import { SKELETON_LOADER_HEIGHT_SIZES } from '@/activities/components/SkeletonLo import { styled } from '@linaria/react'; import { useContext } from 'react'; import Skeleton, { SkeletonTheme } from 'react-loading-skeleton'; -import { ThemeContext } from 'twenty-ui/theme'; -import { themeCssVariables } from 'twenty-ui/theme-constants'; +import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants'; const StyledSkeletonContainer = styled.div` padding-left: ${themeCssVariables.spacing[2]}; diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellStyleWrapper.tsx b/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellStyleWrapper.tsx index 93276b0891..a9c95406ba 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellStyleWrapper.tsx +++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellStyleWrapper.tsx @@ -2,7 +2,7 @@ import { type DraggableProvidedDragHandleProps } from '@hello-pangea/dnd'; import { cx } from '@linaria/core'; import { styled } from '@linaria/react'; import { type ReactNode, useContext } from 'react'; -import { ThemeContext } from 'twenty-ui/theme'; +import { ThemeContext } from 'twenty-ui/theme-constants'; export const StyledCell = styled.div<{ backgroundColor: string; diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-footer/components/RecordTableColumnAggregateFooterValueCell.tsx b/packages/twenty-front/src/modules/object-record/record-table/record-table-footer/components/RecordTableColumnAggregateFooterValueCell.tsx index 8cf95e7bb2..9a200af74c 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/record-table-footer/components/RecordTableColumnAggregateFooterValueCell.tsx +++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-footer/components/RecordTableColumnAggregateFooterValueCell.tsx @@ -11,8 +11,7 @@ import { useAtomComponentStateValue } from '@/ui/utilities/state/jotai/hooks/use import { styled } from '@linaria/react'; import { useContext, useState } from 'react'; import { IconChevronDown } from 'twenty-ui/display'; -import { ThemeContext } from 'twenty-ui/theme'; -import { themeCssVariables } from 'twenty-ui/theme-constants'; +import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants'; const StyledCell = styled.div<{ isUnfolded: boolean; isFirstCell: boolean }>` align-items: center; diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-header/components/RecordTableColumnHead.tsx b/packages/twenty-front/src/modules/object-record/record-table/record-table-header/components/RecordTableColumnHead.tsx index 35026533b6..e6090427ee 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/record-table-header/components/RecordTableColumnHead.tsx +++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-header/components/RecordTableColumnHead.tsx @@ -8,8 +8,11 @@ import { shouldCompactRecordTableFirstColumnComponentState } from '@/object-reco import { useAtomComponentStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomComponentStateValue'; import { useAtomFamilySelectorValue } from '@/ui/utilities/state/jotai/hooks/useAtomFamilySelectorValue'; import { useIcons } from 'twenty-ui/display'; -import { ThemeContext } from 'twenty-ui/theme'; -import { MOBILE_VIEWPORT, themeCssVariables } from 'twenty-ui/theme-constants'; +import { + MOBILE_VIEWPORT, + ThemeContext, + themeCssVariables, +} from 'twenty-ui/theme-constants'; const StyledTitle = styled.div<{ hideTitle?: boolean }>` align-items: center; diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-header/components/RecordTableHeaderAddColumnButton.tsx b/packages/twenty-front/src/modules/object-record/record-table/record-table-header/components/RecordTableHeaderAddColumnButton.tsx index 6224ac3959..447063226c 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/record-table-header/components/RecordTableHeaderAddColumnButton.tsx +++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-header/components/RecordTableHeaderAddColumnButton.tsx @@ -19,8 +19,7 @@ import { useAtomComponentStateValue } from '@/ui/utilities/state/jotai/hooks/use import { cx } from '@linaria/core'; import { useContext } from 'react'; import { IconPlus } from 'twenty-ui/display'; -import { ThemeContext } from 'twenty-ui/theme'; -import { themeCssVariables } from 'twenty-ui/theme-constants'; +import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants'; const StyledPlusIconHeaderCell = styled.div<{ shouldDisplayBorderBottom: boolean; diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-header/components/RecordTableHeaderDragDropColumn.tsx b/packages/twenty-front/src/modules/object-record/record-table/record-table-header/components/RecordTableHeaderDragDropColumn.tsx index 1fc2965626..cac4c178b5 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/record-table-header/components/RecordTableHeaderDragDropColumn.tsx +++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-header/components/RecordTableHeaderDragDropColumn.tsx @@ -12,8 +12,7 @@ import { useAtomComponentStateValue } from '@/ui/utilities/state/jotai/hooks/use import { styled } from '@linaria/react'; import { cx } from '@linaria/core'; import { useContext } from 'react'; -import { ThemeContext } from 'twenty-ui/theme'; -import { themeCssVariables } from 'twenty-ui/theme-constants'; +import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants'; const StyledDragDropHeaderCell = styled.div<{ shouldDisplayBorderBottom: boolean; diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-row/components/RecordTableActionRow.tsx b/packages/twenty-front/src/modules/object-record/record-table/record-table-row/components/RecordTableActionRow.tsx index 05766fba4d..aa7068fd68 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/record-table-row/components/RecordTableActionRow.tsx +++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-row/components/RecordTableActionRow.tsx @@ -1,8 +1,7 @@ import { styled } from '@linaria/react'; import { useRecordIndexContextOrThrow } from '@/object-record/record-index/contexts/RecordIndexContext'; -import { ThemeContext } from 'twenty-ui/theme'; -import { themeCssVariables } from 'twenty-ui/theme-constants'; +import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants'; import { RECORD_TABLE_COLUMN_CHECKBOX_WIDTH } from '@/object-record/record-table/constants/RecordTableColumnCheckboxWidth'; import { RECORD_TABLE_COLUMN_DRAG_AND_DROP_WIDTH } from '@/object-record/record-table/constants/RecordTableColumnDragAndDropWidth'; import { RECORD_TABLE_COLUMN_MIN_WIDTH } from '@/object-record/record-table/constants/RecordTableColumnMinWidth'; diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-row/components/RecordTableDraggableTr.tsx b/packages/twenty-front/src/modules/object-record/record-table/record-table-row/components/RecordTableDraggableTr.tsx index f1050040cb..c2f55bc8bd 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/record-table-row/components/RecordTableDraggableTr.tsx +++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-row/components/RecordTableDraggableTr.tsx @@ -1,6 +1,6 @@ import { Draggable } from '@hello-pangea/dnd'; import { type ReactNode, useContext } from 'react'; -import { ThemeContext } from 'twenty-ui/theme'; +import { ThemeContext } from 'twenty-ui/theme-constants'; import { RecordTableRowDraggableContextProvider } from '@/object-record/record-table/contexts/RecordTableRowDraggableContext'; import { RecordTableRowMultiDragPreview } from '@/object-record/record-table/record-table-row/components/RecordTableRowMultiDragPreview'; diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-row/components/RecordTableDraggableTrFirstRowOfGroup.tsx b/packages/twenty-front/src/modules/object-record/record-table/record-table-row/components/RecordTableDraggableTrFirstRowOfGroup.tsx index 69d94e2718..32524eccd7 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/record-table-row/components/RecordTableDraggableTrFirstRowOfGroup.tsx +++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-row/components/RecordTableDraggableTrFirstRowOfGroup.tsx @@ -1,6 +1,6 @@ import { Draggable } from '@hello-pangea/dnd'; import { type ReactNode, useContext } from 'react'; -import { ThemeContext } from 'twenty-ui/theme'; +import { ThemeContext } from 'twenty-ui/theme-constants'; import { RecordTableRowDraggableContextProvider } from '@/object-record/record-table/contexts/RecordTableRowDraggableContext'; import { RecordTableRowMultiDragPreview } from '@/object-record/record-table/record-table-row/components/RecordTableRowMultiDragPreview'; diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-section/components/RecordTableRecordGroupSection.tsx b/packages/twenty-front/src/modules/object-record/record-table/record-table-section/components/RecordTableRecordGroupSection.tsx index fe53fb9f02..70356be4b9 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/record-table-section/components/RecordTableRecordGroupSection.tsx +++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-section/components/RecordTableRecordGroupSection.tsx @@ -1,7 +1,6 @@ import { styled } from '@linaria/react'; import { useCallback, useContext } from 'react'; -import { ThemeContext } from 'twenty-ui/theme'; -import { themeCssVariables } from 'twenty-ui/theme-constants'; +import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants'; import { RecordBoardColumnHeaderAggregateDropdown } from '@/object-record/record-board/record-board-column/components/RecordBoardColumnHeaderAggregateDropdown'; import { visibleRecordFieldsComponentSelector } from '@/object-record/record-field/states/visibleRecordFieldsComponentSelector'; diff --git a/packages/twenty-front/src/modules/onboarding/components/OnboardingModalCircularIcon.tsx b/packages/twenty-front/src/modules/onboarding/components/OnboardingModalCircularIcon.tsx index c4f8c6c0a7..6bea820ce3 100644 --- a/packages/twenty-front/src/modules/onboarding/components/OnboardingModalCircularIcon.tsx +++ b/packages/twenty-front/src/modules/onboarding/components/OnboardingModalCircularIcon.tsx @@ -1,8 +1,7 @@ import { styled } from '@linaria/react'; import { useContext } from 'react'; import { type IconComponent } from 'twenty-ui/display'; -import { ThemeContext } from 'twenty-ui/theme'; -import { themeCssVariables } from 'twenty-ui/theme-constants'; +import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants'; const StyledCheckContainer = styled.div<{ color: string }>` align-items: center; diff --git a/packages/twenty-front/src/modules/page-layout/components/PageLayoutGridResizeHandle.tsx b/packages/twenty-front/src/modules/page-layout/components/PageLayoutGridResizeHandle.tsx index c63f93e6b6..f4e40877ea 100644 --- a/packages/twenty-front/src/modules/page-layout/components/PageLayoutGridResizeHandle.tsx +++ b/packages/twenty-front/src/modules/page-layout/components/PageLayoutGridResizeHandle.tsx @@ -7,9 +7,7 @@ import { IconRadiusTopRight, } from 'twenty-ui/display'; import { ResizeHandle } from 'twenty-ui/layout'; -import { themeCssVariables } from 'twenty-ui/theme-constants'; -import { ThemeContext } from 'twenty-ui/theme'; - +import { themeCssVariables, ThemeContext } from 'twenty-ui/theme-constants'; type WidgetHandleAxis = 'n' | 's' | 'e' | 'w' | 'ne' | 'nw' | 'se' | 'sw'; type WidgetHorizontalHandleAxis = 'n' | 's'; type WidgetVerticalHandleAxis = 'e' | 'w'; diff --git a/packages/twenty-front/src/modules/page-layout/components/PageLayoutTabListReorderableOverflowDropdown.tsx b/packages/twenty-front/src/modules/page-layout/components/PageLayoutTabListReorderableOverflowDropdown.tsx index 89a936d692..e398c645f7 100644 --- a/packages/twenty-front/src/modules/page-layout/components/PageLayoutTabListReorderableOverflowDropdown.tsx +++ b/packages/twenty-front/src/modules/page-layout/components/PageLayoutTabListReorderableOverflowDropdown.tsx @@ -29,7 +29,7 @@ import { useSetAtomComponentState } from '@/ui/utilities/state/jotai/hooks/useSe import { useContext } from 'react'; import { CommandMenuPages } from 'twenty-shared/types'; import { type PageLayoutType } from '~/generated-metadata/graphql'; -import { ThemeContext } from 'twenty-ui/theme'; +import { ThemeContext } from 'twenty-ui/theme-constants'; const StyledOverflowDropdownListDraggableWrapper = styled.div` display: flex; diff --git a/packages/twenty-front/src/modules/page-layout/components/PageLayoutTabMenuItemSelectAvatar.tsx b/packages/twenty-front/src/modules/page-layout/components/PageLayoutTabMenuItemSelectAvatar.tsx index 2d3196c850..e7c8078818 100644 --- a/packages/twenty-front/src/modules/page-layout/components/PageLayoutTabMenuItemSelectAvatar.tsx +++ b/packages/twenty-front/src/modules/page-layout/components/PageLayoutTabMenuItemSelectAvatar.tsx @@ -11,9 +11,7 @@ import { StyledMenuItemLabel, StyledMenuItemLeftContent, } from 'twenty-ui/navigation'; -import { themeCssVariables } from 'twenty-ui/theme-constants'; -import { ThemeContext } from 'twenty-ui/theme'; - +import { themeCssVariables, ThemeContext } from 'twenty-ui/theme-constants'; const StyledTextContainer = styled.div` display: flex; align-items: center; diff --git a/packages/twenty-front/src/modules/page-layout/components/PageLayoutTabRenderClone.tsx b/packages/twenty-front/src/modules/page-layout/components/PageLayoutTabRenderClone.tsx index b39b3ab682..ab574ca607 100644 --- a/packages/twenty-front/src/modules/page-layout/components/PageLayoutTabRenderClone.tsx +++ b/packages/twenty-front/src/modules/page-layout/components/PageLayoutTabRenderClone.tsx @@ -8,9 +8,8 @@ import { styled } from '@linaria/react'; import { type DraggableProvided } from '@hello-pangea/dnd'; import { StyledTabContainer, TabContent } from 'twenty-ui/input'; import { MenuItemSelectAvatar } from 'twenty-ui/navigation'; +import { ThemeContext } from 'twenty-ui/theme-constants'; import { useContext } from 'react'; -import { ThemeContext } from 'twenty-ui/theme'; - const StyledDraggableWrapper = styled.div` display: flex; cursor: grab; @@ -30,7 +29,6 @@ export const PageLayoutTabRenderClone = ({ activeTabId: string | null; }) => { const { theme } = useContext(ThemeContext); - const pageLayoutTabListCurrentDragDroppableId = useAtomComponentStateValue( pageLayoutTabListCurrentDragDroppableIdComponentState, ); diff --git a/packages/twenty-front/src/modules/page-layout/widgets/components/WidgetRenderer.tsx b/packages/twenty-front/src/modules/page-layout/widgets/components/WidgetRenderer.tsx index 7ac7244c00..de86928696 100644 --- a/packages/twenty-front/src/modules/page-layout/widgets/components/WidgetRenderer.tsx +++ b/packages/twenty-front/src/modules/page-layout/widgets/components/WidgetRenderer.tsx @@ -33,7 +33,7 @@ import { PageLayoutType, WidgetType, } from '~/generated-metadata/graphql'; -import { ThemeContext } from 'twenty-ui/theme'; +import { ThemeContext } from 'twenty-ui/theme-constants'; const StyledNoAccessContainer = styled.div` align-items: center; diff --git a/packages/twenty-front/src/modules/page-layout/widgets/components/WidgetSkeletonLoader.tsx b/packages/twenty-front/src/modules/page-layout/widgets/components/WidgetSkeletonLoader.tsx index 0aba5fd279..b3077966cc 100644 --- a/packages/twenty-front/src/modules/page-layout/widgets/components/WidgetSkeletonLoader.tsx +++ b/packages/twenty-front/src/modules/page-layout/widgets/components/WidgetSkeletonLoader.tsx @@ -1,8 +1,8 @@ import { SKELETON_LOADER_HEIGHT_SIZES } from '@/activities/components/SkeletonLoader'; import { styled } from '@linaria/react'; -import Skeleton, { SkeletonTheme } from 'react-loading-skeleton'; import { useContext } from 'react'; -import { ThemeContext } from 'twenty-ui/theme'; +import Skeleton, { SkeletonTheme } from 'react-loading-skeleton'; +import { ThemeContext } from 'twenty-ui/theme-constants'; const StyledContainer = styled.div` align-items: center; @@ -14,7 +14,6 @@ const StyledContainer = styled.div` export const WidgetSkeletonLoader = () => { const { theme } = useContext(ThemeContext); - return ( { - const [isExpanded, setIsExpanded] = useState(true); const { theme } = useContext(ThemeContext); + const [isExpanded, setIsExpanded] = useState(true); const handleToggleGroup = () => setIsExpanded((previousIsExpanded) => !previousIsExpanded); diff --git a/packages/twenty-front/src/modules/page-layout/widgets/graph/chart-core/layers/AxisLabel.tsx b/packages/twenty-front/src/modules/page-layout/widgets/graph/chart-core/layers/AxisLabel.tsx index 9a7f3b2f12..fca42fabab 100644 --- a/packages/twenty-front/src/modules/page-layout/widgets/graph/chart-core/layers/AxisLabel.tsx +++ b/packages/twenty-front/src/modules/page-layout/widgets/graph/chart-core/layers/AxisLabel.tsx @@ -1,6 +1,6 @@ import { useContext } from 'react'; import { isDefined } from 'twenty-shared/utils'; -import { ThemeContext } from 'twenty-ui/theme'; +import { ThemeContext } from 'twenty-ui/theme-constants'; type AxisLabelProps = { label: string; diff --git a/packages/twenty-front/src/modules/page-layout/widgets/graph/chart-core/layers/AxisLayer.tsx b/packages/twenty-front/src/modules/page-layout/widgets/graph/chart-core/layers/AxisLayer.tsx index 82563f7f52..2b585985ac 100644 --- a/packages/twenty-front/src/modules/page-layout/widgets/graph/chart-core/layers/AxisLayer.tsx +++ b/packages/twenty-front/src/modules/page-layout/widgets/graph/chart-core/layers/AxisLayer.tsx @@ -7,7 +7,7 @@ import { getAxisLayerLayout } from '@/page-layout/widgets/graph/chart-core/utils import { type ChartMargins } from '@/page-layout/widgets/graph/types/ChartMargins'; import { styled } from '@linaria/react'; import { useContext } from 'react'; -import { ThemeContext } from 'twenty-ui/theme'; +import { ThemeContext } from 'twenty-ui/theme-constants'; type AxisLayerProps = { bottomAxisTickRotation: number; @@ -55,6 +55,7 @@ export const AxisLayer = ({ axisConfig, }: AxisLayerProps) => { const { theme } = useContext(ThemeContext); + const tickFontSize = axisConfig.tickFontSize; const legendFontSize = axisConfig.legendFontSize; diff --git a/packages/twenty-front/src/modules/page-layout/widgets/graph/chart-core/layers/BottomAxisTicks.tsx b/packages/twenty-front/src/modules/page-layout/widgets/graph/chart-core/layers/BottomAxisTicks.tsx index 5f640b1871..dc0630435f 100644 --- a/packages/twenty-front/src/modules/page-layout/widgets/graph/chart-core/layers/BottomAxisTicks.tsx +++ b/packages/twenty-front/src/modules/page-layout/widgets/graph/chart-core/layers/BottomAxisTicks.tsx @@ -1,6 +1,5 @@ import { useContext } from 'react'; -import { ThemeContext } from 'twenty-ui/theme'; - +import { ThemeContext } from 'twenty-ui/theme-constants'; type BottomAxisTicksProps = { bottomTickValues: (string | number)[]; getBottomTickPosition: (value: string | number, index: number) => number; diff --git a/packages/twenty-front/src/modules/page-layout/widgets/graph/chart-core/layers/LeftAxisTicks.tsx b/packages/twenty-front/src/modules/page-layout/widgets/graph/chart-core/layers/LeftAxisTicks.tsx index 15e11a8792..b635d4b2eb 100644 --- a/packages/twenty-front/src/modules/page-layout/widgets/graph/chart-core/layers/LeftAxisTicks.tsx +++ b/packages/twenty-front/src/modules/page-layout/widgets/graph/chart-core/layers/LeftAxisTicks.tsx @@ -1,6 +1,5 @@ import { useContext } from 'react'; -import { ThemeContext } from 'twenty-ui/theme'; - +import { ThemeContext } from 'twenty-ui/theme-constants'; type LeftAxisTicksProps = { leftTickValues: (string | number)[]; getLeftTickPosition: (value: string | number, index: number) => number; diff --git a/packages/twenty-front/src/modules/page-layout/widgets/graph/chart-core/layers/ZeroLine.tsx b/packages/twenty-front/src/modules/page-layout/widgets/graph/chart-core/layers/ZeroLine.tsx index f881863cf0..919de8782f 100644 --- a/packages/twenty-front/src/modules/page-layout/widgets/graph/chart-core/layers/ZeroLine.tsx +++ b/packages/twenty-front/src/modules/page-layout/widgets/graph/chart-core/layers/ZeroLine.tsx @@ -1,6 +1,5 @@ import { useContext } from 'react'; -import { ThemeContext } from 'twenty-ui/theme'; - +import { ThemeContext } from 'twenty-ui/theme-constants'; type ZeroLineProps = { isVertical: boolean; zeroPosition: number; diff --git a/packages/twenty-front/src/modules/page-layout/widgets/graph/components/GraphDataLabel.tsx b/packages/twenty-front/src/modules/page-layout/widgets/graph/components/GraphDataLabel.tsx index c5bedd74c5..a737f902e9 100644 --- a/packages/twenty-front/src/modules/page-layout/widgets/graph/components/GraphDataLabel.tsx +++ b/packages/twenty-front/src/modules/page-layout/widgets/graph/components/GraphDataLabel.tsx @@ -1,9 +1,9 @@ import { type GraphLabelData } from '@/page-layout/widgets/graph/types/GraphLabelData'; import { calculateGraphLabelStyles } from '@/page-layout/widgets/graph/utils/calculateGraphLabelStyles'; import { animated } from '@react-spring/web'; -import { isDefined } from 'twenty-shared/utils'; import { useContext } from 'react'; -import { ThemeContext } from 'twenty-ui/theme'; +import { isDefined } from 'twenty-shared/utils'; +import { ThemeContext } from 'twenty-ui/theme-constants'; type GraphDataLabelProps = { label: GraphLabelData; @@ -19,6 +19,7 @@ export const GraphDataLabel = ({ isVerticalLayout, }: GraphDataLabelProps) => { const { theme } = useContext(ThemeContext); + const styles = calculateGraphLabelStyles(label, offset, isVerticalLayout); return ( diff --git a/packages/twenty-front/src/modules/page-layout/widgets/graph/components/GraphWidgetFloatingTooltip.tsx b/packages/twenty-front/src/modules/page-layout/widgets/graph/components/GraphWidgetFloatingTooltip.tsx index 51580b2c41..dfa6ba868f 100644 --- a/packages/twenty-front/src/modules/page-layout/widgets/graph/components/GraphWidgetFloatingTooltip.tsx +++ b/packages/twenty-front/src/modules/page-layout/widgets/graph/components/GraphWidgetFloatingTooltip.tsx @@ -5,10 +5,9 @@ import { import { useGraphWidgetTooltipFloating } from '@/page-layout/widgets/graph/hooks/useGraphWidgetTooltipFloating'; import { FloatingPortal, type VirtualElement } from '@floating-ui/react'; import { animated, useSpring } from '@react-spring/web'; -import { isDefined } from 'twenty-shared/utils'; import { useContext } from 'react'; -import { ThemeContext } from 'twenty-ui/theme'; - +import { isDefined } from 'twenty-shared/utils'; +import { ThemeContext } from 'twenty-ui/theme-constants'; type GraphWidgetFloatingTooltipProps = { reference: Element | VirtualElement | null; boundary: Element | null; diff --git a/packages/twenty-front/src/modules/page-layout/widgets/graph/components/GraphWidgetLegend.tsx b/packages/twenty-front/src/modules/page-layout/widgets/graph/components/GraphWidgetLegend.tsx index 250da1a8bc..bc0b032d43 100644 --- a/packages/twenty-front/src/modules/page-layout/widgets/graph/components/GraphWidgetLegend.tsx +++ b/packages/twenty-front/src/modules/page-layout/widgets/graph/components/GraphWidgetLegend.tsx @@ -20,8 +20,7 @@ import { OverflowingTextWithTooltip, } from 'twenty-ui/display'; import { LightIconButton } from 'twenty-ui/input'; -import { themeCssVariables } from 'twenty-ui/theme-constants'; -import { ThemeContext } from 'twenty-ui/theme'; +import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants'; export type GraphWidgetLegendItem = { id: string; @@ -140,6 +139,8 @@ export const GraphWidgetLegend = ({ items, show = true, }: GraphWidgetLegendProps) => { + const { theme } = useContext(ThemeContext); + const containerRef = useRef(null); const [currentPage, setCurrentPage] = useState(0); @@ -149,8 +150,6 @@ export const GraphWidgetLegend = ({ const [animationDirection, setAnimationDirection] = useState('forward'); - const { theme } = useContext(ThemeContext); - const isPageLayoutInEditMode = useAtomComponentStateValue( isPageLayoutInEditModeComponentState, ); diff --git a/packages/twenty-front/src/modules/page-layout/widgets/graph/components/GraphWidgetTooltip.tsx b/packages/twenty-front/src/modules/page-layout/widgets/graph/components/GraphWidgetTooltip.tsx index e9c7ee85fe..62d5186267 100644 --- a/packages/twenty-front/src/modules/page-layout/widgets/graph/components/GraphWidgetTooltip.tsx +++ b/packages/twenty-front/src/modules/page-layout/widgets/graph/components/GraphWidgetTooltip.tsx @@ -5,11 +5,10 @@ import { GraphWidgetLegendDot } from '@/page-layout/widgets/graph/components/Gra import { styled } from '@linaria/react'; import { t } from '@lingui/core/macro'; import { isNonEmptyString } from '@sniptt/guards'; +import { useContext } from 'react'; import { isDefined } from 'twenty-shared/utils'; import { IconArrowUpRight } from 'twenty-ui/display'; -import { themeCssVariables } from 'twenty-ui/theme-constants'; -import { useContext } from 'react'; -import { ThemeContext } from 'twenty-ui/theme'; +import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants'; const StyledTooltip = styled.div` background: ${themeCssVariables.background.primary}; diff --git a/packages/twenty-front/src/modules/page-layout/widgets/graph/components/NoDataLayer.tsx b/packages/twenty-front/src/modules/page-layout/widgets/graph/components/NoDataLayer.tsx index 500b260a0e..3c3defcadf 100644 --- a/packages/twenty-front/src/modules/page-layout/widgets/graph/components/NoDataLayer.tsx +++ b/packages/twenty-front/src/modules/page-layout/widgets/graph/components/NoDataLayer.tsx @@ -1,6 +1,6 @@ -import { useContext } from 'react'; import { useLingui } from '@lingui/react/macro'; -import { ThemeContext } from 'twenty-ui/theme'; +import { useContext } from 'react'; +import { ThemeContext } from 'twenty-ui/theme-constants'; type NoDataLayerProps = { innerWidth: number; diff --git a/packages/twenty-front/src/modules/page-layout/widgets/graph/graphWidgetAggregateChart/components/GraphWidgetAggregateChart.tsx b/packages/twenty-front/src/modules/page-layout/widgets/graph/graphWidgetAggregateChart/components/GraphWidgetAggregateChart.tsx index bdd2a958f6..23f471c53b 100644 --- a/packages/twenty-front/src/modules/page-layout/widgets/graph/graphWidgetAggregateChart/components/GraphWidgetAggregateChart.tsx +++ b/packages/twenty-front/src/modules/page-layout/widgets/graph/graphWidgetAggregateChart/components/GraphWidgetAggregateChart.tsx @@ -1,5 +1,6 @@ import { formatNumberChartTrend } from '@/page-layout/widgets/graph/graphWidgetAggregateChart/utils/formatNumberChartTrend'; import { styled } from '@linaria/react'; +import { useContext } from 'react'; import { isDefined } from 'twenty-shared/utils'; import { H1Title, @@ -7,10 +8,7 @@ import { IconTrendingDown, IconTrendingUp, } from 'twenty-ui/display'; -import { themeCssVariables } from 'twenty-ui/theme-constants'; -import { useContext } from 'react'; -import { ThemeContext } from 'twenty-ui/theme'; - +import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants'; type GraphWidgetAggregateChartProps = { value: string | number; trendPercentage?: number; diff --git a/packages/twenty-front/src/modules/page-layout/widgets/graph/graphWidgetBarChart/components/BarChart.tsx b/packages/twenty-front/src/modules/page-layout/widgets/graph/graphWidgetBarChart/components/BarChart.tsx index 65ec5a5d90..255dc4662e 100644 --- a/packages/twenty-front/src/modules/page-layout/widgets/graph/graphWidgetBarChart/components/BarChart.tsx +++ b/packages/twenty-front/src/modules/page-layout/widgets/graph/graphWidgetBarChart/components/BarChart.tsx @@ -18,9 +18,8 @@ import { useAtomComponentStateValue } from '@/ui/utilities/state/jotai/hooks/use import { styled } from '@linaria/react'; import { type MouseEvent, useContext } from 'react'; import { isDefined } from 'twenty-shared/utils'; +import { ThemeContext } from 'twenty-ui/theme-constants'; import { BarChartLayout } from '~/generated-metadata/graphql'; -import { ThemeContext } from 'twenty-ui/theme'; - type BarChartProps = { data: BarChartDatum[]; indexBy: string; @@ -77,6 +76,7 @@ export const BarChart = ({ hasNoData = false, }: BarChartProps) => { const { theme } = useContext(ThemeContext); + const graphWidgetHighlightedLegendId = useAtomComponentStateValue( graphWidgetHighlightedLegendIdComponentState, ); diff --git a/packages/twenty-front/src/modules/page-layout/widgets/graph/graphWidgetBarChart/components/BarChartBaseLayerEffect.tsx b/packages/twenty-front/src/modules/page-layout/widgets/graph/graphWidgetBarChart/components/BarChartBaseLayerEffect.tsx index a11111e0d8..79e58a745f 100644 --- a/packages/twenty-front/src/modules/page-layout/widgets/graph/graphWidgetBarChart/components/BarChartBaseLayerEffect.tsx +++ b/packages/twenty-front/src/modules/page-layout/widgets/graph/graphWidgetBarChart/components/BarChartBaseLayerEffect.tsx @@ -15,7 +15,7 @@ import { useState, } from 'react'; import { BarChartLayout } from '~/generated-metadata/graphql'; -import { ThemeContext } from 'twenty-ui/theme'; +import { ThemeContext } from 'twenty-ui/theme-constants'; type BarChartBaseLayerEffectProps = { bars: BarPosition[]; diff --git a/packages/twenty-front/src/modules/page-layout/widgets/graph/graphWidgetBarChart/components/BarChartHoverLayerEffect.tsx b/packages/twenty-front/src/modules/page-layout/widgets/graph/graphWidgetBarChart/components/BarChartHoverLayerEffect.tsx index ef84d04802..feb7a3d33b 100644 --- a/packages/twenty-front/src/modules/page-layout/widgets/graph/graphWidgetBarChart/components/BarChartHoverLayerEffect.tsx +++ b/packages/twenty-front/src/modules/page-layout/widgets/graph/graphWidgetBarChart/components/BarChartHoverLayerEffect.tsx @@ -4,7 +4,7 @@ import { renderSliceHighlight } from '@/page-layout/widgets/graph/graphWidgetBar import { type ChartMargins } from '@/page-layout/widgets/graph/types/ChartMargins'; import { type RefObject, useContext, useEffect, useState } from 'react'; import { BarChartLayout } from '~/generated-metadata/graphql'; -import { ThemeContext } from 'twenty-ui/theme'; +import { ThemeContext } from 'twenty-ui/theme-constants'; type BarChartHoverLayerEffectProps = { hoveredSlice: BarChartSlice | null; @@ -24,6 +24,7 @@ export const BarChartHoverLayerEffect = ({ canvasRef, }: BarChartHoverLayerEffectProps) => { const { theme } = useContext(ThemeContext); + const [dpr] = useState( () => (typeof window !== 'undefined' ? window.devicePixelRatio : undefined) || diff --git a/packages/twenty-front/src/modules/page-layout/widgets/graph/graphWidgetBarChart/hooks/useBarChartTheme.ts b/packages/twenty-front/src/modules/page-layout/widgets/graph/graphWidgetBarChart/hooks/useBarChartTheme.ts index 24d4e28ce9..1461ad6823 100644 --- a/packages/twenty-front/src/modules/page-layout/widgets/graph/graphWidgetBarChart/hooks/useBarChartTheme.ts +++ b/packages/twenty-front/src/modules/page-layout/widgets/graph/graphWidgetBarChart/hooks/useBarChartTheme.ts @@ -1,10 +1,11 @@ import { COMMON_CHART_CONSTANTS } from '@/page-layout/widgets/graph/constants/CommonChartConstants'; import { parseFontSizeToPx } from '@/page-layout/widgets/graph/utils/parseFontSizeToPx'; import { useContext } from 'react'; -import { ThemeContext } from 'twenty-ui/theme'; +import { ThemeContext } from 'twenty-ui/theme-constants'; export const useBarChartTheme = () => { const { theme } = useContext(ThemeContext); + const tickFontSize = COMMON_CHART_CONSTANTS.AXIS_FONT_SIZE; const legendFontSize = parseFontSizeToPx(theme.font.size.sm, tickFontSize); diff --git a/packages/twenty-front/src/modules/page-layout/widgets/graph/graphWidgetLineChart/components/CustomCrosshairLayer.tsx b/packages/twenty-front/src/modules/page-layout/widgets/graph/graphWidgetLineChart/components/CustomCrosshairLayer.tsx index ca3cf1e04d..b18c6e09a7 100644 --- a/packages/twenty-front/src/modules/page-layout/widgets/graph/graphWidgetLineChart/components/CustomCrosshairLayer.tsx +++ b/packages/twenty-front/src/modules/page-layout/widgets/graph/graphWidgetLineChart/components/CustomCrosshairLayer.tsx @@ -5,7 +5,7 @@ import { type LineSeries, type Point } from '@nivo/line'; import { motion } from 'framer-motion'; import { type MouseEvent, useCallback, useContext, useMemo } from 'react'; import { isDefined } from 'twenty-shared/utils'; -import { ThemeContext } from 'twenty-ui/theme'; +import { ThemeContext } from 'twenty-ui/theme-constants'; export type SliceHoverData = { sliceX: number; @@ -41,6 +41,7 @@ export const CustomCrosshairLayer = ({ onRectLeave, }: CustomCrosshairLayerProps) => { const { theme } = useContext(ThemeContext); + const graphWidgetLineCrosshairX = useAtomComponentStateValue( graphWidgetLineCrosshairXComponentState, ); diff --git a/packages/twenty-front/src/modules/page-layout/widgets/graph/graphWidgetLineChart/hooks/useLineChartTheme.ts b/packages/twenty-front/src/modules/page-layout/widgets/graph/graphWidgetLineChart/hooks/useLineChartTheme.ts index 806715952d..c45a536c9f 100644 --- a/packages/twenty-front/src/modules/page-layout/widgets/graph/graphWidgetLineChart/hooks/useLineChartTheme.ts +++ b/packages/twenty-front/src/modules/page-layout/widgets/graph/graphWidgetLineChart/hooks/useLineChartTheme.ts @@ -1,9 +1,10 @@ -import { useContext } from 'react'; import { parseFontSizeToPx } from '@/page-layout/widgets/graph/utils/parseFontSizeToPx'; -import { ThemeContext } from 'twenty-ui/theme'; +import { useContext } from 'react'; +import { ThemeContext } from 'twenty-ui/theme-constants'; export const useLineChartTheme = () => { const { theme } = useContext(ThemeContext); + const tickFontSize = 12; const legendFontSize = parseFontSizeToPx(theme.font.size.sm, tickFontSize); diff --git a/packages/twenty-front/src/modules/page-layout/widgets/graph/graphWidgetPieChart/components/PieChartCenterMetricLayer.tsx b/packages/twenty-front/src/modules/page-layout/widgets/graph/graphWidgetPieChart/components/PieChartCenterMetricLayer.tsx index 11886700c2..3ae31905a4 100644 --- a/packages/twenty-front/src/modules/page-layout/widgets/graph/graphWidgetPieChart/components/PieChartCenterMetricLayer.tsx +++ b/packages/twenty-front/src/modules/page-layout/widgets/graph/graphWidgetPieChart/components/PieChartCenterMetricLayer.tsx @@ -2,10 +2,9 @@ import { usePieChartCenterMetricData } from '@/page-layout/widgets/graph/graphWi import { styled } from '@linaria/react'; import { useLingui } from '@lingui/react/macro'; import { AnimatePresence, motion } from 'framer-motion'; -import { type PieChartConfiguration } from '~/generated-metadata/graphql'; -import { themeCssVariables } from 'twenty-ui/theme-constants'; import { useContext } from 'react'; -import { ThemeContext } from 'twenty-ui/theme'; +import { type PieChartConfiguration } from '~/generated-metadata/graphql'; +import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants'; type PieChartCenterMetricProps = { objectMetadataItemId: string; diff --git a/packages/twenty-front/src/modules/page-layout/widgets/graph/utils/parseGraphColor.ts b/packages/twenty-front/src/modules/page-layout/widgets/graph/utils/parseGraphColor.ts index 70f18402c3..d467450474 100644 --- a/packages/twenty-front/src/modules/page-layout/widgets/graph/utils/parseGraphColor.ts +++ b/packages/twenty-front/src/modules/page-layout/widgets/graph/utils/parseGraphColor.ts @@ -1,6 +1,6 @@ import { type GraphColor } from '@/page-layout/widgets/graph/types/GraphColor'; import { isDefined } from 'twenty-shared/utils'; -import { MAIN_COLOR_NAMES, type ThemeColor } from 'twenty-ui/theme'; +import { type ThemeColor, MAIN_COLOR_NAMES } from 'twenty-ui/theme'; export const parseGraphColor = ( value: string | null | undefined, diff --git a/packages/twenty-front/src/modules/page-layout/widgets/standalone-rich-text/components/DashboardColorIcon.tsx b/packages/twenty-front/src/modules/page-layout/widgets/standalone-rich-text/components/DashboardColorIcon.tsx index 6260eddd95..6b020abcae 100644 --- a/packages/twenty-front/src/modules/page-layout/widgets/standalone-rich-text/components/DashboardColorIcon.tsx +++ b/packages/twenty-front/src/modules/page-layout/widgets/standalone-rich-text/components/DashboardColorIcon.tsx @@ -1,10 +1,8 @@ import { styled } from '@linaria/react'; import { type BlockNoteColor } from '@/page-layout/widgets/standalone-rich-text/types/BlockNoteColor'; -import { themeCssVariables } from 'twenty-ui/theme-constants'; +import { themeCssVariables, ThemeContext } from 'twenty-ui/theme-constants'; import { useContext } from 'react'; -import { ThemeContext } from 'twenty-ui/theme'; - const StyledColorIcon = styled.div<{ textColorValue: string; backgroundColorValue: string; @@ -36,7 +34,9 @@ export const DashboardColorIcon = ({ if (color === 'default') { return 'inherit'; } - return theme.color[color] ?? 'inherit'; + return ( + (theme.color as unknown as Record)[color] ?? 'inherit' + ); }; const getThemeColorForBackgroundColor = (color: BlockNoteColor): string => { diff --git a/packages/twenty-front/src/modules/page-layout/widgets/standalone-rich-text/components/DashboardColorSelectionMenu.tsx b/packages/twenty-front/src/modules/page-layout/widgets/standalone-rich-text/components/DashboardColorSelectionMenu.tsx index b028dcd62d..f5b2459055 100644 --- a/packages/twenty-front/src/modules/page-layout/widgets/standalone-rich-text/components/DashboardColorSelectionMenu.tsx +++ b/packages/twenty-front/src/modules/page-layout/widgets/standalone-rich-text/components/DashboardColorSelectionMenu.tsx @@ -10,9 +10,8 @@ import { DropdownContent } from '@/ui/layout/dropdown/components/DropdownContent import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer'; import { DropdownMenuSectionLabel } from '@/ui/layout/dropdown/components/DropdownMenuSectionLabel'; import { DropdownMenuSeparator } from '@/ui/layout/dropdown/components/DropdownMenuSeparator'; -import { themeCssVariables } from 'twenty-ui/theme-constants'; +import { themeCssVariables, ThemeContext } from 'twenty-ui/theme-constants'; import { useContext } from 'react'; -import { ThemeContext } from 'twenty-ui/theme'; const StyledColorMenuItem = styled.div` align-items: center; diff --git a/packages/twenty-front/src/modules/page-layout/widgets/standalone-rich-text/components/DashboardsBlockEditor.tsx b/packages/twenty-front/src/modules/page-layout/widgets/standalone-rich-text/components/DashboardsBlockEditor.tsx index d78ceaef06..8365e71907 100644 --- a/packages/twenty-front/src/modules/page-layout/widgets/standalone-rich-text/components/DashboardsBlockEditor.tsx +++ b/packages/twenty-front/src/modules/page-layout/widgets/standalone-rich-text/components/DashboardsBlockEditor.tsx @@ -12,9 +12,7 @@ import { DashboardEditorSideMenu } from '@/page-layout/widgets/standalone-rich-t import { DashboardFormattingToolbar } from '@/page-layout/widgets/standalone-rich-text/components/DashboardFormattingToolbar'; import { type DASHBOARD_BLOCK_SCHEMA } from '@/page-layout/widgets/standalone-rich-text/constants/DashboardBlockSchema'; import { getDashboardSlashMenu } from '@/page-layout/widgets/standalone-rich-text/utils/getDashboardSlashMenu'; -import { themeCssVariables } from 'twenty-ui/theme-constants'; -import { ThemeContext } from 'twenty-ui/theme'; - +import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants'; type DashboardsBlockEditorProps = { editor: typeof DASHBOARD_BLOCK_SCHEMA.BlockNoteEditor; onFocus?: () => void; @@ -148,8 +146,8 @@ export const DashboardsBlockEditor = ({ readonly, boundaryElement, }: DashboardsBlockEditorProps) => { - const { theme } = useContext(ThemeContext); - const blockNoteTheme = theme.name === 'light' ? 'light' : 'dark'; + const { colorScheme } = useContext(ThemeContext); + const blockNoteTheme = colorScheme === 'light' ? 'light' : 'dark'; const handleFocus = () => { onFocus?.(); diff --git a/packages/twenty-front/src/modules/page-layout/widgets/widget-card/components/WidgetCardHeader.tsx b/packages/twenty-front/src/modules/page-layout/widgets/widget-card/components/WidgetCardHeader.tsx index 1a8f9606b8..5a0f1739aa 100644 --- a/packages/twenty-front/src/modules/page-layout/widgets/widget-card/components/WidgetCardHeader.tsx +++ b/packages/twenty-front/src/modules/page-layout/widgets/widget-card/components/WidgetCardHeader.tsx @@ -12,9 +12,7 @@ import { type WidgetCardVariant } from '@/page-layout/widgets/types/WidgetCardVa import { WidgetGrip } from '@/page-layout/widgets/widget-card/components/WidgetGrip'; import { AnimatePresence, motion } from 'framer-motion'; import { isDefined, isNonEmptyArray } from 'twenty-shared/utils'; -import { themeCssVariables } from 'twenty-ui/theme-constants'; -import { ThemeContext } from 'twenty-ui/theme'; - +import { themeCssVariables, ThemeContext } from 'twenty-ui/theme-constants'; export type WidgetCardHeaderProps = { variant: WidgetCardVariant; widgetId: string; @@ -83,7 +81,6 @@ export const WidgetCardHeader = ({ className, }: WidgetCardHeaderProps) => { const { theme } = useContext(ThemeContext); - const widgetCardHovered = useAtomComponentFamilyStateValue( widgetCardHoveredComponentFamilyState, widgetId, diff --git a/packages/twenty-front/src/modules/page-layout/widgets/widget-card/components/WidgetGrip.tsx b/packages/twenty-front/src/modules/page-layout/widgets/widget-card/components/WidgetGrip.tsx index ac3826f80a..e240e41138 100644 --- a/packages/twenty-front/src/modules/page-layout/widgets/widget-card/components/WidgetGrip.tsx +++ b/packages/twenty-front/src/modules/page-layout/widgets/widget-card/components/WidgetGrip.tsx @@ -1,9 +1,8 @@ import { styled } from '@linaria/react'; import { motion } from 'framer-motion'; import { IconGripVertical } from 'twenty-ui/display'; -import { themeCssVariables } from 'twenty-ui/theme-constants'; +import { themeCssVariables, ThemeContext } from 'twenty-ui/theme-constants'; import { useContext } from 'react'; -import { ThemeContext } from 'twenty-ui/theme'; const StyledGripContainerBase = styled.div` width: 20px; @@ -34,7 +33,6 @@ type WidgetGripProps = { export const WidgetGrip = ({ className, onClick }: WidgetGripProps) => { const { theme } = useContext(ThemeContext); - return ( { const { theme } = useContext(ThemeContext); diff --git a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsListEmptyStateCard.tsx b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsListEmptyStateCard.tsx index 4a3e46c2cb..f86aaff395 100644 --- a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsListEmptyStateCard.tsx +++ b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsListEmptyStateCard.tsx @@ -6,15 +6,14 @@ import { isMicrosoftMessagingEnabledState } from '@/client-config/states/isMicro import { useTriggerApisOAuth } from '@/settings/accounts/hooks/useTriggerApiOAuth'; import { SettingsCard } from '@/settings/components/SettingsCard'; import { styled } from '@linaria/react'; -import { useContext } from 'react'; import { useLingui } from '@lingui/react/macro'; import { useAtomStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomStateValue'; import { ConnectedAccountProvider, SettingsPath } from 'twenty-shared/types'; import { getSettingsPath } from 'twenty-shared/utils'; import { IconAt, IconGoogle, IconMicrosoft } from 'twenty-ui/display'; import { UndecoratedLink } from 'twenty-ui/navigation'; -import { ThemeContext } from 'twenty-ui/theme'; -import { themeCssVariables } from 'twenty-ui/theme-constants'; +import { useContext } from 'react'; +import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants'; const StyledCardsContainer = styled.div` display: flex; @@ -23,11 +22,10 @@ const StyledCardsContainer = styled.div` `; export const SettingsAccountsListEmptyStateCard = () => { + const { theme } = useContext(ThemeContext); const { triggerApisOAuth } = useTriggerApisOAuth(); const { t } = useLingui(); - const { theme } = useContext(ThemeContext); - const isGoogleMessagingEnabled = useAtomStateValue( isGoogleMessagingEnabledState, ); diff --git a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsSettingsSection.tsx b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsSettingsSection.tsx index 06c042a672..770dca1401 100644 --- a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsSettingsSection.tsx +++ b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsSettingsSection.tsx @@ -1,15 +1,18 @@ import { styled } from '@linaria/react'; +import { useContext } from 'react'; import { SettingsCard } from '@/settings/components/SettingsCard'; -import { useContext } from 'react'; import { useLingui } from '@lingui/react/macro'; import { SettingsPath } from 'twenty-shared/types'; import { getSettingsPath } from 'twenty-shared/utils'; import { H2Title, IconCalendarEvent, IconMailCog } from 'twenty-ui/display'; import { Section } from 'twenty-ui/layout'; import { UndecoratedLink } from 'twenty-ui/navigation'; -import { ThemeContext } from 'twenty-ui/theme'; -import { MOBILE_VIEWPORT, themeCssVariables } from 'twenty-ui/theme-constants'; +import { + MOBILE_VIEWPORT, + ThemeContext, + themeCssVariables, +} from 'twenty-ui/theme-constants'; const StyledCardsContainer = styled.div` display: flex; @@ -22,8 +25,8 @@ const StyledCardsContainer = styled.div` `; export const SettingsAccountsSettingsSection = () => { - const { t } = useLingui(); const { theme } = useContext(ThemeContext); + const { t } = useLingui(); return (
{ const { theme } = useContext(ThemeContext); + if (folder.isSentFolder) { return ; } diff --git a/packages/twenty-front/src/modules/settings/accounts/components/message-folders/SettingsMessageFoldersEmptyStateCard.tsx b/packages/twenty-front/src/modules/settings/accounts/components/message-folders/SettingsMessageFoldersEmptyStateCard.tsx index 57d299e6fb..f22cbb7688 100644 --- a/packages/twenty-front/src/modules/settings/accounts/components/message-folders/SettingsMessageFoldersEmptyStateCard.tsx +++ b/packages/twenty-front/src/modules/settings/accounts/components/message-folders/SettingsMessageFoldersEmptyStateCard.tsx @@ -1,10 +1,9 @@ import { styled } from '@linaria/react'; -import { useContext } from 'react'; import { t } from '@lingui/core/macro'; import { IconFolder } from 'twenty-ui/display'; import { Section } from 'twenty-ui/layout'; -import { ThemeContext } from 'twenty-ui/theme'; -import { themeCssVariables } from 'twenty-ui/theme-constants'; +import { useContext } from 'react'; +import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants'; const StyledEmptyState = styled.div` align-items: center; diff --git a/packages/twenty-front/src/modules/settings/accounts/components/message-folders/SettingsMessageFoldersSkeletonLoader.tsx b/packages/twenty-front/src/modules/settings/accounts/components/message-folders/SettingsMessageFoldersSkeletonLoader.tsx index f08c6e3a89..5ce24b8ff9 100644 --- a/packages/twenty-front/src/modules/settings/accounts/components/message-folders/SettingsMessageFoldersSkeletonLoader.tsx +++ b/packages/twenty-front/src/modules/settings/accounts/components/message-folders/SettingsMessageFoldersSkeletonLoader.tsx @@ -2,8 +2,7 @@ import { SKELETON_LOADER_HEIGHT_SIZES } from '@/activities/components/SkeletonLo import { styled } from '@linaria/react'; import { useContext } from 'react'; import Skeleton, { SkeletonTheme } from 'react-loading-skeleton'; -import { ThemeContext } from 'twenty-ui/theme'; -import { themeCssVariables } from 'twenty-ui/theme-constants'; +import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants'; const StyledSkeletonContainer = styled.div` display: flex; @@ -37,7 +36,6 @@ const SKELETON_ROWS = [ export const SettingsMessageFoldersSkeletonLoader = () => { const { theme } = useContext(ThemeContext); - return ( { const { theme } = useContext(ThemeContext); diff --git a/packages/twenty-front/src/modules/settings/admin-panel/components/SettingsAdminTableCard.tsx b/packages/twenty-front/src/modules/settings/admin-panel/components/SettingsAdminTableCard.tsx index e32099ac9f..9d3b7fe11d 100644 --- a/packages/twenty-front/src/modules/settings/admin-panel/components/SettingsAdminTableCard.tsx +++ b/packages/twenty-front/src/modules/settings/admin-panel/components/SettingsAdminTableCard.tsx @@ -5,7 +5,8 @@ import { TableRow } from '@/ui/layout/table/components/TableRow'; import { isDefined } from 'twenty-shared/utils'; import { type IconComponent } from 'twenty-ui/display'; import { Card } from 'twenty-ui/layout'; -import { ICON_SIZES, themeCssVariables } from 'twenty-ui/theme-constants'; +import { useContext } from 'react'; +import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants'; type TableItem = { Icon?: IconComponent; @@ -31,6 +32,7 @@ export const SettingsAdminTableCard = ({ valueAlign = 'left', className, }: SettingsAdminTableCardProps) => { + const { theme } = useContext(ThemeContext); return ( - {item.Icon && } + {item.Icon && } {item.label} void; @@ -39,7 +38,6 @@ export const ConfigVariableOptionsDropdownContent = ({ onShowHiddenChange, }: ConfigVariableOptionsDropdownContentProps) => { const { theme } = useContext(ThemeContext); - const isConfigVariablesInDbEnabled = useAtomStateValue( isConfigVariablesInDbEnabledState, ); diff --git a/packages/twenty-front/src/modules/settings/admin-panel/config-variables/components/SettingsAdminConfigVariablesRow.tsx b/packages/twenty-front/src/modules/settings/admin-panel/config-variables/components/SettingsAdminConfigVariablesRow.tsx index 88958ad9de..cbfc9be78b 100644 --- a/packages/twenty-front/src/modules/settings/admin-panel/config-variables/components/SettingsAdminConfigVariablesRow.tsx +++ b/packages/twenty-front/src/modules/settings/admin-panel/config-variables/components/SettingsAdminConfigVariablesRow.tsx @@ -1,12 +1,11 @@ import { TableCell } from '@/ui/layout/table/components/TableCell'; import { TableRow } from '@/ui/layout/table/components/TableRow'; -import { useContext } from 'react'; import { styled } from '@linaria/react'; import { SettingsPath } from 'twenty-shared/types'; import { getSettingsPath } from 'twenty-shared/utils'; import { IconChevronRight } from 'twenty-ui/display'; -import { ThemeContext } from 'twenty-ui/theme'; -import { themeCssVariables } from 'twenty-ui/theme-constants'; +import { useContext } from 'react'; +import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants'; import { type ConfigVariable } from '~/generated-metadata/graphql'; type SettingsAdminConfigVariablesRowProps = { diff --git a/packages/twenty-front/src/modules/settings/admin-panel/config-variables/utils/useSourceContent.ts b/packages/twenty-front/src/modules/settings/admin-panel/config-variables/utils/useSourceContent.ts index 3fcb976f2d..9cbe5fdc26 100644 --- a/packages/twenty-front/src/modules/settings/admin-panel/config-variables/utils/useSourceContent.ts +++ b/packages/twenty-front/src/modules/settings/admin-panel/config-variables/utils/useSourceContent.ts @@ -1,13 +1,13 @@ import { useLingui } from '@lingui/react/macro'; import { useContext } from 'react'; import { CustomError } from 'twenty-shared/utils'; -import { ThemeContext } from 'twenty-ui/theme'; +import { ThemeContext } from 'twenty-ui/theme-constants'; import { ConfigSource } from '~/generated-metadata/graphql'; export const useSourceContent = (source: ConfigSource) => { - const { t } = useLingui(); const { theme } = useContext(ThemeContext); + const { t } = useLingui(); switch (source) { case ConfigSource.DATABASE: diff --git a/packages/twenty-front/src/modules/settings/admin-panel/health-status/components/SettingsAdminHealthStatusListCard.tsx b/packages/twenty-front/src/modules/settings/admin-panel/health-status/components/SettingsAdminHealthStatusListCard.tsx index ff61b84f9a..cafe5156bd 100644 --- a/packages/twenty-front/src/modules/settings/admin-panel/health-status/components/SettingsAdminHealthStatusListCard.tsx +++ b/packages/twenty-front/src/modules/settings/admin-panel/health-status/components/SettingsAdminHealthStatusListCard.tsx @@ -1,5 +1,4 @@ import { SettingsListCard } from '@/settings/components/SettingsListCard'; -import { useContext } from 'react'; import { SettingsPath } from 'twenty-shared/types'; import { getSettingsPath } from 'twenty-shared/utils'; import { @@ -10,7 +9,8 @@ import { IconTool, IconUserCircle, } from 'twenty-ui/display'; -import { ThemeContext } from 'twenty-ui/theme'; +import { useContext } from 'react'; +import { ThemeContext } from 'twenty-ui/theme-constants'; import { HealthIndicatorId, type SystemHealthService, diff --git a/packages/twenty-front/src/modules/settings/admin-panel/health-status/components/SettingsAdminWorkerMetricsGraph.tsx b/packages/twenty-front/src/modules/settings/admin-panel/health-status/components/SettingsAdminWorkerMetricsGraph.tsx index 962e35f927..ca2653c151 100644 --- a/packages/twenty-front/src/modules/settings/admin-panel/health-status/components/SettingsAdminWorkerMetricsGraph.tsx +++ b/packages/twenty-front/src/modules/settings/admin-panel/health-status/components/SettingsAdminWorkerMetricsGraph.tsx @@ -1,12 +1,11 @@ import { SettingsAdminTableCard } from '@/settings/admin-panel/components/SettingsAdminTableCard'; import { SettingsAdminWorkerMetricsTooltip } from '@/settings/admin-panel/health-status/components/SettingsAdminWorkerMetricsTooltip'; import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar'; -import { useContext } from 'react'; import { styled } from '@linaria/react'; import { t } from '@lingui/core/macro'; import { ResponsiveLine } from '@nivo/line'; -import { ThemeContext } from 'twenty-ui/theme'; -import { themeCssVariables } from 'twenty-ui/theme-constants'; +import { useContext } from 'react'; +import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants'; import { QueueMetricsTimeRange, useGetQueueMetricsQuery, diff --git a/packages/twenty-front/src/modules/settings/components/AdvancedSettingsContentWrapperWithDot.tsx b/packages/twenty-front/src/modules/settings/components/AdvancedSettingsContentWrapperWithDot.tsx index 16ebac5a6e..6c3dc23007 100644 --- a/packages/twenty-front/src/modules/settings/components/AdvancedSettingsContentWrapperWithDot.tsx +++ b/packages/twenty-front/src/modules/settings/components/AdvancedSettingsContentWrapperWithDot.tsx @@ -1,8 +1,7 @@ import { styled } from '@linaria/react'; import { useContext } from 'react'; import { IconPoint } from 'twenty-ui/display'; -import { ThemeContext } from 'twenty-ui/theme'; -import { themeCssVariables } from 'twenty-ui/theme-constants'; +import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants'; const StyledWrapper = styled.div` position: relative; @@ -37,6 +36,7 @@ export const AdvancedSettingsContentWrapperWithDot = ({ dotPosition = 'centered', }: AdvancedSettingsContentWrapperWithDotProps) => { const { theme } = useContext(ThemeContext); + return ( {!hideDot && ( diff --git a/packages/twenty-front/src/modules/settings/components/SettingsCard.tsx b/packages/twenty-front/src/modules/settings/components/SettingsCard.tsx index 0e83d9f861..517fc2af42 100644 --- a/packages/twenty-front/src/modules/settings/components/SettingsCard.tsx +++ b/packages/twenty-front/src/modules/settings/components/SettingsCard.tsx @@ -5,8 +5,7 @@ import { t } from '@lingui/core/macro'; import { Card, CardContent } from 'twenty-ui/layout'; import { IconChevronRight } from 'twenty-ui/display'; import { Pill } from 'twenty-ui/components'; -import { ThemeContext } from 'twenty-ui/theme'; -import { themeCssVariables } from 'twenty-ui/theme-constants'; +import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants'; type SettingsCardProps = { description?: string; diff --git a/packages/twenty-front/src/modules/settings/components/SettingsConnectedAccountsTableRow.tsx b/packages/twenty-front/src/modules/settings/components/SettingsConnectedAccountsTableRow.tsx index 6f4d8f3a94..8a684a9452 100644 --- a/packages/twenty-front/src/modules/settings/components/SettingsConnectedAccountsTableRow.tsx +++ b/packages/twenty-front/src/modules/settings/components/SettingsConnectedAccountsTableRow.tsx @@ -5,8 +5,7 @@ import { TableCell } from '@/ui/layout/table/components/TableCell'; import { TableRow } from '@/ui/layout/table/components/TableRow'; import { styled } from '@linaria/react'; import { useContext } from 'react'; -import { ThemeContext } from 'twenty-ui/theme'; -import { themeCssVariables } from 'twenty-ui/theme-constants'; +import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants'; const StyledNameCell = styled.div` align-items: center; @@ -30,7 +29,6 @@ export const SettingsConnectedAccountsTableRow = ({ account, }: SettingsConnectedAccountsTableRowProps) => { const { theme } = useContext(ThemeContext); - const IconComponent = SettingsConnectedAccountIcon({ account }); return ( diff --git a/packages/twenty-front/src/modules/settings/components/SettingsItemTypeTag.tsx b/packages/twenty-front/src/modules/settings/components/SettingsItemTypeTag.tsx index de38f3dde2..935c2141bf 100644 --- a/packages/twenty-front/src/modules/settings/components/SettingsItemTypeTag.tsx +++ b/packages/twenty-front/src/modules/settings/components/SettingsItemTypeTag.tsx @@ -1,11 +1,10 @@ import { currentWorkspaceState } from '@/auth/states/currentWorkspaceState'; import { getItemTagInfo } from '@/settings/data-model/utils/getItemTagInfo'; import { styled } from '@linaria/react'; -import { useContext } from 'react'; import { Avatar } from 'twenty-ui/display'; import { useAtomStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomStateValue'; -import { ThemeContext } from 'twenty-ui/theme'; -import { themeCssVariables } from 'twenty-ui/theme-constants'; +import { useContext } from 'react'; +import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants'; type SettingsItemTypeTagProps = { item: { @@ -28,7 +27,6 @@ export const SettingsItemTypeTag = ({ className, item: { isCustom, isRemote, applicationId }, }: SettingsItemTypeTagProps) => { - const { theme } = useContext(ThemeContext); const currentWorkspace = useAtomStateValue(currentWorkspaceState); const itemTagInfo = getItemTagInfo({ item: { isCustom, isRemote, applicationId }, @@ -36,6 +34,8 @@ export const SettingsItemTypeTag = ({ currentWorkspace?.workspaceCustomApplication?.id, }); + const { theme } = useContext(ThemeContext); + return ( (disabled ? 'default' : 'pointer')}; diff --git a/packages/twenty-front/src/modules/settings/components/SettingsOptions/SettingsOptionIconCustomizer.tsx b/packages/twenty-front/src/modules/settings/components/SettingsOptions/SettingsOptionIconCustomizer.tsx index 017dd50953..6a84c2f23f 100644 --- a/packages/twenty-front/src/modules/settings/components/SettingsOptions/SettingsOptionIconCustomizer.tsx +++ b/packages/twenty-front/src/modules/settings/components/SettingsOptions/SettingsOptionIconCustomizer.tsx @@ -1,7 +1,7 @@ import { styled } from '@linaria/react'; import { useContext } from 'react'; import { type IconComponent } from 'twenty-ui/display'; -import { ThemeContext } from 'twenty-ui/theme'; +import { ThemeContext } from 'twenty-ui/theme-constants'; type SettingsOptionIconCustomizerProps = { Icon: IconComponent; @@ -22,6 +22,7 @@ export const SettingsOptionIconCustomizer = ({ rotate = -4, }: SettingsOptionIconCustomizerProps) => { const { theme } = useContext(ThemeContext); + return ( { const { theme } = useContext(ThemeContext); - const onClick = () => handleSelect(value); return ( diff --git a/packages/twenty-front/src/modules/settings/components/SettingsSkeletonLoader.tsx b/packages/twenty-front/src/modules/settings/components/SettingsSkeletonLoader.tsx index 53990de3a0..b98a6c935b 100644 --- a/packages/twenty-front/src/modules/settings/components/SettingsSkeletonLoader.tsx +++ b/packages/twenty-front/src/modules/settings/components/SettingsSkeletonLoader.tsx @@ -4,8 +4,7 @@ import { PageHeader } from '@/ui/layout/page/components/PageHeader'; import { styled } from '@linaria/react'; import { useContext } from 'react'; import Skeleton, { SkeletonTheme } from 'react-loading-skeleton'; -import { ThemeContext } from 'twenty-ui/theme'; -import { themeCssVariables } from 'twenty-ui/theme-constants'; +import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants'; const StyledContainer = styled.div` display: flex; diff --git a/packages/twenty-front/src/modules/settings/data-model/components/SettingsDataModelNewFieldBreadcrumbDropDown.tsx b/packages/twenty-front/src/modules/settings/data-model/components/SettingsDataModelNewFieldBreadcrumbDropDown.tsx index 66c1d62272..3644ba1a5c 100644 --- a/packages/twenty-front/src/modules/settings/data-model/components/SettingsDataModelNewFieldBreadcrumbDropDown.tsx +++ b/packages/twenty-front/src/modules/settings/data-model/components/SettingsDataModelNewFieldBreadcrumbDropDown.tsx @@ -4,16 +4,15 @@ 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 { styled } from '@linaria/react'; -import { t } from '@lingui/core/macro'; import { useContext } from 'react'; +import { t } from '@lingui/core/macro'; import { useLocation, useParams, useSearchParams } from 'react-router-dom'; import { SettingsPath } from 'twenty-shared/types'; import { isDefined } from 'twenty-shared/utils'; import { IconChevronDown } from 'twenty-ui/display'; import { Button } from 'twenty-ui/input'; import { MenuItem } from 'twenty-ui/navigation'; -import { ThemeContext } from 'twenty-ui/theme'; -import { themeCssVariables } from 'twenty-ui/theme-constants'; +import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants'; import { useNavigateSettings } from '~/hooks/useNavigateSettings'; const StyledContainer = styled.div` @@ -52,13 +51,13 @@ const StyledButton = styled(Button)` `; export const SettingsDataModelNewFieldBreadcrumbDropDown = () => { + const { theme } = useContext(ThemeContext); const dropdownId = `settings-object-new-field-breadcrumb-dropdown`; const { closeDropdown } = useCloseDropdown(); const navigate = useNavigateSettings(); const location = useLocation(); const { objectNamePlural = '' } = useParams(); const [searchParams] = useSearchParams(); - const { theme } = useContext(ThemeContext); const fieldType = searchParams.get('fieldType') as SettingsFieldType; const isConfigureStep = location.pathname.includes('/configure'); diff --git a/packages/twenty-front/src/modules/settings/data-model/fields/forms/components/SettingsDataModelFieldIconLabelForm.tsx b/packages/twenty-front/src/modules/settings/data-model/fields/forms/components/SettingsDataModelFieldIconLabelForm.tsx index d95bb33d1b..06ec88fbee 100644 --- a/packages/twenty-front/src/modules/settings/data-model/fields/forms/components/SettingsDataModelFieldIconLabelForm.tsx +++ b/packages/twenty-front/src/modules/settings/data-model/fields/forms/components/SettingsDataModelFieldIconLabelForm.tsx @@ -1,4 +1,5 @@ import { styled } from '@linaria/react'; +import { useContext } from 'react'; import { Controller, useFormContext } from 'react-hook-form'; import { type z } from 'zod'; @@ -12,7 +13,6 @@ import { getErrorMessageFromError } from '@/settings/data-model/fields/forms/uti import { IconPicker } from '@/ui/input/components/IconPicker'; import { SettingsTextInput } from '@/ui/input/components/SettingsTextInput'; import { useLingui } from '@lingui/react/macro'; -import { useContext } from 'react'; import { FieldMetadataType } from 'twenty-shared/types'; import { isDefined } from 'twenty-shared/utils'; import { @@ -22,8 +22,7 @@ import { TooltipDelay, } from 'twenty-ui/display'; import { Card } from 'twenty-ui/layout'; -import { ThemeContext } from 'twenty-ui/theme'; -import { themeCssVariables } from 'twenty-ui/theme-constants'; +import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants'; import { computeMetadataNameFromLabel } from '~/pages/settings/data-model/utils/computeMetadataNameFromLabel'; export const settingsDataModelFieldIconLabelFormSchema = ( @@ -96,7 +95,6 @@ export const SettingsDataModelFieldIconLabelForm = ({ } = useFormContext(); const { theme } = useContext(ThemeContext); - const label = watch('label'); const { t } = useLingui(); diff --git a/packages/twenty-front/src/modules/settings/data-model/fields/forms/components/SettingsObjectNewFieldSelector.tsx b/packages/twenty-front/src/modules/settings/data-model/fields/forms/components/SettingsObjectNewFieldSelector.tsx index c724426fbf..32ffe2796c 100644 --- a/packages/twenty-front/src/modules/settings/data-model/fields/forms/components/SettingsObjectNewFieldSelector.tsx +++ b/packages/twenty-front/src/modules/settings/data-model/fields/forms/components/SettingsObjectNewFieldSelector.tsx @@ -19,8 +19,7 @@ import { SettingsPath } from 'twenty-shared/types'; import { getSettingsPath } from 'twenty-shared/utils'; import { H2Title, IconSearch } from 'twenty-ui/display'; import { UndecoratedLink } from 'twenty-ui/navigation'; -import { ThemeContext } from 'twenty-ui/theme'; -import { themeCssVariables } from 'twenty-ui/theme-constants'; +import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants'; import { FieldMetadataType } from '~/generated-metadata/graphql'; import { type SettingsDataModelFieldTypeFormValues } from '~/pages/settings/data-model/new-field/SettingsObjectNewFieldSelect'; diff --git a/packages/twenty-front/src/modules/settings/data-model/fields/forms/select/components/SettingsDataModelFieldSelectForm.tsx b/packages/twenty-front/src/modules/settings/data-model/fields/forms/select/components/SettingsDataModelFieldSelectForm.tsx index 24efee2b6d..c768535687 100644 --- a/packages/twenty-front/src/modules/settings/data-model/fields/forms/select/components/SettingsDataModelFieldSelectForm.tsx +++ b/packages/twenty-front/src/modules/settings/data-model/fields/forms/select/components/SettingsDataModelFieldSelectForm.tsx @@ -43,8 +43,7 @@ import { import { LightButton, LightIconButton } from 'twenty-ui/input'; import { CardContent, CardFooter } from 'twenty-ui/layout'; import { MenuItem } from 'twenty-ui/navigation'; -import { ThemeContext } from 'twenty-ui/theme'; -import { themeCssVariables } from 'twenty-ui/theme-constants'; +import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants'; import { SettingsDataModelFieldSelectFormOptionRow } from './SettingsDataModelFieldSelectFormOptionRow'; export const settingsDataModelFieldSelectFormSchema = z.object({ @@ -159,6 +158,7 @@ export const SettingsDataModelFieldSelectForm = ({ fieldType, disabled = false, }: SettingsDataModelFieldSelectFormProps) => { + const { theme } = useContext(ThemeContext); const { initialDefaultValue, initialOptions } = useSelectSettingsFormInitialValues({ fieldMetadataId: existingFieldMetadataId, @@ -302,8 +302,6 @@ export const SettingsDataModelFieldSelectForm = ({ setFormValue('options', newOptions, { shouldDirty: true }); }; - const { theme } = useContext(ThemeContext); - return ( <> ({ gray: t`Gray`, @@ -130,7 +130,9 @@ export const SettingsDataModelFieldSelectFormOptionRow = ({ return ( { const newOptionLabel = label ?? generateNewSelectOptionLabel(options); return { - color: getNextThemeColor(options[options.length - 1]?.color), + color: getNextThemeColor( + MAIN_COLOR_NAMES, + options[options.length - 1]?.color, + ), id: v4(), label: newOptionLabel, position: options.length, diff --git a/packages/twenty-front/src/modules/settings/data-model/fields/preview/components/SettingsDataModelFieldPreview.tsx b/packages/twenty-front/src/modules/settings/data-model/fields/preview/components/SettingsDataModelFieldPreview.tsx index 5a0fc23990..995fbcf9f7 100644 --- a/packages/twenty-front/src/modules/settings/data-model/fields/preview/components/SettingsDataModelFieldPreview.tsx +++ b/packages/twenty-front/src/modules/settings/data-model/fields/preview/components/SettingsDataModelFieldPreview.tsx @@ -12,11 +12,8 @@ import { SettingsDataModelSetFieldValueEffect } from '@/settings/data-model/fiel import { SettingsDataModelSetLabelIdentifierRecordEffect } from '@/settings/data-model/fields/preview/components/SettingsDataModelSetLabelIdentifierRecordEffect'; import { useFieldPreviewValue } from '@/settings/data-model/fields/preview/hooks/useFieldPreviewValue'; import { useIcons } from 'twenty-ui/display'; -import { - ICON_SIZES, - ICON_STROKES, - themeCssVariables, -} from 'twenty-ui/theme-constants'; +import { useContext } from 'react'; +import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants'; import { FieldMetadataType } from '~/generated-metadata/graphql'; type SettingsDataModelFieldPreviewProps = { @@ -66,6 +63,7 @@ export const SettingsDataModelFieldPreview = ({ objectNameSingular: objectNameSingular, }); + const { theme } = useContext(ThemeContext); const { getIcon } = useIcons(); const FieldIcon = getIcon(fieldMetadataItem.icon); @@ -115,7 +113,10 @@ export const SettingsDataModelFieldPreview = ({ {!!withFieldLabel && ( - + {fieldMetadataItem.label}: )} diff --git a/packages/twenty-front/src/modules/settings/data-model/fields/preview/components/SettingsDataModelRelationFieldPreview.tsx b/packages/twenty-front/src/modules/settings/data-model/fields/preview/components/SettingsDataModelRelationFieldPreview.tsx index dd52420765..44d52ff6ae 100644 --- a/packages/twenty-front/src/modules/settings/data-model/fields/preview/components/SettingsDataModelRelationFieldPreview.tsx +++ b/packages/twenty-front/src/modules/settings/data-model/fields/preview/components/SettingsDataModelRelationFieldPreview.tsx @@ -1,4 +1,3 @@ -import { useContext } from 'react'; import { styled } from '@linaria/react'; import { useObjectMetadataItem } from '@/object-metadata/hooks/useObjectMetadataItem'; @@ -11,8 +10,8 @@ import { RecordFieldComponentInstanceContext } from '@/object-record/record-fiel import { SettingsDataModelSetFieldValueEffect } from '@/settings/data-model/fields/preview/components/SettingsDataModelSetFieldValueEffect'; import { useFieldPreviewValue } from '@/settings/data-model/fields/preview/hooks/useFieldPreviewValue'; import { useIcons } from 'twenty-ui/display'; -import { ThemeContext } from 'twenty-ui/theme'; -import { themeCssVariables } from 'twenty-ui/theme-constants'; +import { useContext } from 'react'; +import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants'; import { v4 } from 'uuid'; import { FieldMetadataType } from '~/generated-metadata/graphql'; @@ -62,9 +61,7 @@ export const SettingsDataModelRelationFieldPreview = ({ useObjectMetadataItem({ objectNameSingular: relationTargetObjectNameSingular, }); - const { theme } = useContext(ThemeContext); - const { getIcon } = useIcons(); const FieldIcon = getIcon(fieldMetadataItem.icon); diff --git a/packages/twenty-front/src/modules/settings/data-model/graph-overview/components/SettingsDataModelOverviewEffect.tsx b/packages/twenty-front/src/modules/settings/data-model/graph-overview/components/SettingsDataModelOverviewEffect.tsx index 5aef1c2aab..e83f097a39 100644 --- a/packages/twenty-front/src/modules/settings/data-model/graph-overview/components/SettingsDataModelOverviewEffect.tsx +++ b/packages/twenty-front/src/modules/settings/data-model/graph-overview/components/SettingsDataModelOverviewEffect.tsx @@ -1,10 +1,10 @@ import { type Edge, type Node } from '@xyflow/react'; -import { useContext, useEffect } from 'react'; +import { useEffect } from 'react'; import { useFilteredObjectMetadataItems } from '@/object-metadata/hooks/useFilteredObjectMetadataItems'; import { isDefined } from 'twenty-shared/utils'; -import { ThemeContext } from 'twenty-ui/theme'; import { isUndefinedOrNull } from '~/utils/isUndefinedOrNull'; +import { themeCssVariables } from 'twenty-ui/theme-constants'; type SettingsDataModelOverviewEffectProps = { setEdges: (edges: Edge[]) => void; @@ -15,7 +15,6 @@ export const SettingsDataModelOverviewEffect = ({ setEdges, setNodes, }: SettingsDataModelOverviewEffectProps) => { - const { theme } = useContext(ThemeContext); const { activeNonSystemObjectMetadataItems: items } = useFilteredObjectMetadataItems(); @@ -62,7 +61,7 @@ export const SettingsDataModelOverviewEffect = ({ type: 'smoothstep', style: { strokeWidth: 1, - stroke: theme.color.gray, + stroke: themeCssVariables.color.gray, }, markerEnd: 'marker', markerStart: 'marker', @@ -102,7 +101,7 @@ export const SettingsDataModelOverviewEffect = ({ }; loadDagreAndLayout(); - }, [items, setEdges, setNodes, theme]); + }, [items, setEdges, setNodes]); return <>; }; diff --git a/packages/twenty-front/src/modules/settings/data-model/graph-overview/components/SettingsDataModelOverviewField.tsx b/packages/twenty-front/src/modules/settings/data-model/graph-overview/components/SettingsDataModelOverviewField.tsx index b53ba6af1d..bf8baa4926 100644 --- a/packages/twenty-front/src/modules/settings/data-model/graph-overview/components/SettingsDataModelOverviewField.tsx +++ b/packages/twenty-front/src/modules/settings/data-model/graph-overview/components/SettingsDataModelOverviewField.tsx @@ -3,10 +3,9 @@ import { Handle, Position } from '@xyflow/react'; import { objectMetadataItemsState } from '@/object-metadata/states/objectMetadataItemsState'; import { useAtomStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomStateValue'; import { type FieldMetadataItem } from '@/object-metadata/types/FieldMetadataItem'; -import { useContext } from 'react'; import { useIcons } from 'twenty-ui/display'; -import { ThemeContext } from 'twenty-ui/theme'; -import { themeCssVariables } from 'twenty-ui/theme-constants'; +import { useContext } from 'react'; +import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants'; import { RelationType } from '~/generated-metadata/graphql'; type ObjectFieldRowProps = { @@ -27,9 +26,9 @@ const StyledFieldName = styled.div` `; export const ObjectFieldRow = ({ field }: ObjectFieldRowProps) => { + const { theme } = useContext(ThemeContext); const objectMetadataItems = useAtomStateValue(objectMetadataItemsState); const { getIcon } = useIcons(); - const { theme } = useContext(ThemeContext); const relatedObjectId = field.relation?.targetObjectMetadata.id; diff --git a/packages/twenty-front/src/modules/settings/data-model/graph-overview/components/SettingsDataModelOverviewFieldWithoutRelation.tsx b/packages/twenty-front/src/modules/settings/data-model/graph-overview/components/SettingsDataModelOverviewFieldWithoutRelation.tsx index 3a9a002c59..24193d4a27 100644 --- a/packages/twenty-front/src/modules/settings/data-model/graph-overview/components/SettingsDataModelOverviewFieldWithoutRelation.tsx +++ b/packages/twenty-front/src/modules/settings/data-model/graph-overview/components/SettingsDataModelOverviewFieldWithoutRelation.tsx @@ -1,10 +1,9 @@ -import { useContext } from 'react'; import { styled } from '@linaria/react'; import { type FieldMetadataItem } from '@/object-metadata/types/FieldMetadataItem'; import { useIcons } from 'twenty-ui/display'; -import { ThemeContext } from 'twenty-ui/theme'; -import { themeCssVariables } from 'twenty-ui/theme-constants'; +import { useContext } from 'react'; +import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants'; type ObjectFieldRowWithoutRelationProps = { field: FieldMetadataItem; @@ -26,8 +25,8 @@ const StyledFieldName = styled.div` export const ObjectFieldRowWithoutRelation = ({ field, }: ObjectFieldRowWithoutRelationProps) => { - const { getIcon } = useIcons(); const { theme } = useContext(ThemeContext); + const { getIcon } = useIcons(); const Icon = getIcon(field?.icon); diff --git a/packages/twenty-front/src/modules/settings/data-model/graph-overview/components/SettingsDataModelOverviewObject.tsx b/packages/twenty-front/src/modules/settings/data-model/graph-overview/components/SettingsDataModelOverviewObject.tsx index 753d09e739..dbf2289287 100644 --- a/packages/twenty-front/src/modules/settings/data-model/graph-overview/components/SettingsDataModelOverviewObject.tsx +++ b/packages/twenty-front/src/modules/settings/data-model/graph-overview/components/SettingsDataModelOverviewObject.tsx @@ -15,8 +15,7 @@ import { SettingsPath } from 'twenty-shared/types'; import { getSettingsPath } from 'twenty-shared/utils'; import { IconChevronDown, IconChevronUp, useIcons } from 'twenty-ui/display'; import { SettingsItemTypeTag } from '@/settings/components/SettingsItemTypeTag'; -import { ThemeContext } from 'twenty-ui/theme'; -import { themeCssVariables } from 'twenty-ui/theme-constants'; +import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants'; type SettingsDataModelOverviewObjectNode = Node; type SettingsDataModelOverviewObjectProps = diff --git a/packages/twenty-front/src/modules/settings/data-model/graph-overview/components/SettingsDataModelOverviewRelationMarkers.tsx b/packages/twenty-front/src/modules/settings/data-model/graph-overview/components/SettingsDataModelOverviewRelationMarkers.tsx index 161b262512..5e8fe2e643 100644 --- a/packages/twenty-front/src/modules/settings/data-model/graph-overview/components/SettingsDataModelOverviewRelationMarkers.tsx +++ b/packages/twenty-front/src/modules/settings/data-model/graph-overview/components/SettingsDataModelOverviewRelationMarkers.tsx @@ -1,8 +1,8 @@ import { useContext } from 'react'; -import { ThemeContext } from 'twenty-ui/theme'; - +import { ThemeContext } from 'twenty-ui/theme-constants'; export const SettingsDataModelOverviewRelationMarkers = () => { const { theme } = useContext(ThemeContext); + return ( diff --git a/packages/twenty-front/src/modules/settings/data-model/new-object/components/SettingsAvailableStandardObjectItemTableRow.tsx b/packages/twenty-front/src/modules/settings/data-model/new-object/components/SettingsAvailableStandardObjectItemTableRow.tsx index f63a445a4d..1a55235794 100644 --- a/packages/twenty-front/src/modules/settings/data-model/new-object/components/SettingsAvailableStandardObjectItemTableRow.tsx +++ b/packages/twenty-front/src/modules/settings/data-model/new-object/components/SettingsAvailableStandardObjectItemTableRow.tsx @@ -1,4 +1,3 @@ -import { useContext } from 'react'; import { styled } from '@linaria/react'; import { type ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem'; @@ -6,8 +5,8 @@ import { TableCell } from '@/ui/layout/table/components/TableCell'; import { TableRow } from '@/ui/layout/table/components/TableRow'; import { Checkbox } from 'twenty-ui/input'; import { useIcons } from 'twenty-ui/display'; -import { ThemeContext } from 'twenty-ui/theme'; -import { themeCssVariables } from 'twenty-ui/theme-constants'; +import { useContext } from 'react'; +import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants'; type SettingsAvailableStandardObjectItemTableRowProps = { isSelected?: boolean; @@ -42,7 +41,6 @@ export const SettingsAvailableStandardObjectItemTableRow = ({ onClick, }: SettingsAvailableStandardObjectItemTableRowProps) => { const { theme } = useContext(ThemeContext); - const { getIcon } = useIcons(); const Icon = getIcon(objectItem.icon); diff --git a/packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectFieldDataType.tsx b/packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectFieldDataType.tsx index aa397fca09..1afee5bf22 100644 --- a/packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectFieldDataType.tsx +++ b/packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectFieldDataType.tsx @@ -1,12 +1,11 @@ -import { useContext } from 'react'; import { styled } from '@linaria/react'; import { Link } from 'react-router-dom'; import { type SettingsFieldType } from '@/settings/data-model/types/SettingsFieldType'; import { getSettingsFieldTypeConfig } from '@/settings/data-model/utils/getSettingsFieldTypeConfig'; import { type IconComponent, IconTwentyStar } from 'twenty-ui/display'; -import { ThemeContext } from 'twenty-ui/theme'; -import { themeCssVariables } from 'twenty-ui/theme-constants'; +import { useContext } from 'react'; +import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants'; type SettingsObjectFieldDataTypeProps = { to?: string; @@ -68,7 +67,6 @@ export const SettingsObjectFieldDataType = ({ onClick, }: SettingsObjectFieldDataTypeProps) => { const { theme } = useContext(ThemeContext); - const fieldTypeConfig = getSettingsFieldTypeConfig(value); const Icon: IconComponent = IconFromProps ?? fieldTypeConfig?.Icon ?? IconTwentyStar; diff --git a/packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectFieldItemTableRow.tsx b/packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectFieldItemTableRow.tsx index 8b817104fb..66db4cf5cb 100644 --- a/packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectFieldItemTableRow.tsx +++ b/packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectFieldItemTableRow.tsx @@ -24,8 +24,7 @@ import { } from 'twenty-ui/display'; import { LightIconButton } from 'twenty-ui/input'; import { UndecoratedLink } from 'twenty-ui/navigation'; -import { ThemeContext } from 'twenty-ui/theme'; -import { themeCssVariables } from 'twenty-ui/theme-constants'; +import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants'; import { RelationType } from '~/generated-metadata/graphql'; import { useNavigateSettings } from '~/hooks/useNavigateSettings'; import { type SettingsObjectDetailTableItem } from '~/pages/settings/data-model/types/SettingsObjectDetailTableItem'; @@ -89,6 +88,7 @@ export const SettingsObjectFieldItemTableRow = ({ mode, status, }: SettingsObjectFieldItemTableRowProps) => { + const { theme } = useContext(ThemeContext); const { t } = useLingui(); const { fieldMetadataItem, objectMetadataItem } = settingsObjectDetailTableItem; @@ -99,7 +99,6 @@ export const SettingsObjectFieldItemTableRow = ({ const navigate = useNavigateSettings(); - const { theme } = useContext(ThemeContext); const { getIcon } = useIcons(); const Icon = getIcon(fieldMetadataItem.icon); @@ -185,7 +184,9 @@ export const SettingsObjectFieldItemTableRow = ({ {!!Icon && ( diff --git a/packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectItemTableRow.tsx b/packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectItemTableRow.tsx index 9c97e1f24a..5d14a976f8 100644 --- a/packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectItemTableRow.tsx +++ b/packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectItemTableRow.tsx @@ -1,4 +1,4 @@ -import { useContext, type ReactNode } from 'react'; +import { type ReactNode, useContext } from 'react'; import { styled } from '@linaria/react'; import { useLingui } from '@lingui/react/macro'; @@ -12,8 +12,7 @@ import { } from '@/settings/data-model/object-details/components/SettingsObjectItemTableRowStyledComponents'; import { TableCell } from '@/ui/layout/table/components/TableCell'; import { useIcons } from 'twenty-ui/display'; -import { ThemeContext } from 'twenty-ui/theme'; -import { themeCssVariables } from 'twenty-ui/theme-constants'; +import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants'; export type SettingsObjectMetadataItemTableRowProps = { action: ReactNode; @@ -57,8 +56,8 @@ export const SettingsObjectMetadataItemTableRow = ({ link, totalObjectCount, }: SettingsObjectMetadataItemTableRowProps) => { - const { t } = useLingui(); const { theme } = useContext(ThemeContext); + const { t } = useLingui(); const { getIcon } = useIcons(); const Icon = getIcon(objectMetadataItem.icon); @@ -68,7 +67,9 @@ export const SettingsObjectMetadataItemTableRow = ({ {!!Icon && ( diff --git a/packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectRelationItemTableRow.tsx b/packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectRelationItemTableRow.tsx index eacaee23fc..67a214e630 100644 --- a/packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectRelationItemTableRow.tsx +++ b/packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectRelationItemTableRow.tsx @@ -17,8 +17,7 @@ import { FieldMetadataType, SettingsPath } from 'twenty-shared/types'; import { getSettingsPath, isDefined } from 'twenty-shared/utils'; import { IconChevronRight, useIcons } from 'twenty-ui/display'; import { UndecoratedLink } from 'twenty-ui/navigation'; -import { ThemeContext } from 'twenty-ui/theme'; -import { themeCssVariables } from 'twenty-ui/theme-constants'; +import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants'; import { useNavigateSettings } from '~/hooks/useNavigateSettings'; type SettingsObjectRelationItemTableRowProps = { @@ -99,9 +98,9 @@ export const SettingsObjectRelationItemTableRow = ({ fieldMetadataItem, objectMetadataItem, }: SettingsObjectRelationItemTableRowProps) => { + const { theme } = useContext(ThemeContext); const { t } = useLingui(); const navigate = useNavigateSettings(); - const { theme } = useContext(ThemeContext); const { getIcon } = useIcons(); const Icon = getIcon(fieldMetadataItem.icon); @@ -163,7 +162,9 @@ export const SettingsObjectRelationItemTableRow = ({ {!!Icon && ( diff --git a/packages/twenty-front/src/modules/settings/data-model/objects/components/SettingsDataModelObjectSummary.tsx b/packages/twenty-front/src/modules/settings/data-model/objects/components/SettingsDataModelObjectSummary.tsx index 32416d16a7..0bbd2e2440 100644 --- a/packages/twenty-front/src/modules/settings/data-model/objects/components/SettingsDataModelObjectSummary.tsx +++ b/packages/twenty-front/src/modules/settings/data-model/objects/components/SettingsDataModelObjectSummary.tsx @@ -1,6 +1,6 @@ import { t } from '@lingui/core/macro'; -import { useContext } from 'react'; import { styled } from '@linaria/react'; +import { useContext } from 'react'; import { type ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem'; import { @@ -9,8 +9,7 @@ import { useIcons, } from 'twenty-ui/display'; import { SettingsItemTypeTag } from '@/settings/components/SettingsItemTypeTag'; -import { ThemeContext } from 'twenty-ui/theme'; -import { themeCssVariables } from 'twenty-ui/theme-constants'; +import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants'; export type SettingsDataModelObjectPreviewProps = { className?: string; @@ -103,6 +102,7 @@ const SettingsDataModelObjectPreviewOtherObjects = ({ selected: number; }) => { const { theme } = useContext(ThemeContext); + return ( <> diff --git a/packages/twenty-front/src/modules/settings/data-model/objects/components/SettingsObjectCoverImage.tsx b/packages/twenty-front/src/modules/settings/data-model/objects/components/SettingsObjectCoverImage.tsx index 964385599f..b850934d29 100644 --- a/packages/twenty-front/src/modules/settings/data-model/objects/components/SettingsObjectCoverImage.tsx +++ b/packages/twenty-front/src/modules/settings/data-model/objects/components/SettingsObjectCoverImage.tsx @@ -10,9 +10,7 @@ import { Card } from 'twenty-ui/layout'; import DarkCoverImage from '@/settings/data-model/assets/cover-dark.png'; import LightCoverImage from '@/settings/data-model/assets/cover-light.png'; -import { ThemeContext } from 'twenty-ui/theme'; -import { themeCssVariables } from 'twenty-ui/theme-constants'; - +import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants'; const StyledCoverImageContainer = styled(Card)` align-items: center; background-size: cover; @@ -29,13 +27,14 @@ const StyledButtonContainer = styled.div` padding-top: ${themeCssVariables.spacing[5]}; `; export const SettingsObjectCoverImage = () => { + const { colorScheme } = useContext(ThemeContext); + const { t } = useLingui(); - const { theme } = useContext(ThemeContext); return ( { + const { theme } = useContext(ThemeContext); const { control, watch, setValue } = useFormContext(); const { t } = useLingui(); - const { theme } = useContext(ThemeContext); const navigateSettings = useNavigateSettings(); const isLabelSyncedWithName = watch('isLabelSyncedWithName'); diff --git a/packages/twenty-front/src/modules/settings/developers/components/SettingsApiKeysFieldItemTableRow.tsx b/packages/twenty-front/src/modules/settings/developers/components/SettingsApiKeysFieldItemTableRow.tsx index 78ca68de55..a0ca69059a 100644 --- a/packages/twenty-front/src/modules/settings/developers/components/SettingsApiKeysFieldItemTableRow.tsx +++ b/packages/twenty-front/src/modules/settings/developers/components/SettingsApiKeysFieldItemTableRow.tsx @@ -1,4 +1,3 @@ -import { useContext } from 'react'; import { styled } from '@linaria/react'; import { @@ -8,8 +7,8 @@ import { import { TableCell } from '@/ui/layout/table/components/TableCell'; import { TableRow } from '@/ui/layout/table/components/TableRow'; import { IconChevronRight } from 'twenty-ui/display'; -import { ThemeContext } from 'twenty-ui/theme'; -import { MOBILE_VIEWPORT } from 'twenty-ui/theme-constants'; +import { useContext } from 'react'; +import { MOBILE_VIEWPORT, ThemeContext } from 'twenty-ui/theme-constants'; import { type ApiKey } from '~/generated-metadata/graphql'; export const StyledApisFieldTableRow = styled(TableRow)` diff --git a/packages/twenty-front/src/modules/settings/developers/components/SettingsDevelopersWebhookTableRow.tsx b/packages/twenty-front/src/modules/settings/developers/components/SettingsDevelopersWebhookTableRow.tsx index a5e638bf02..a6da829f93 100644 --- a/packages/twenty-front/src/modules/settings/developers/components/SettingsDevelopersWebhookTableRow.tsx +++ b/packages/twenty-front/src/modules/settings/developers/components/SettingsDevelopersWebhookTableRow.tsx @@ -2,14 +2,13 @@ import { styled } from '@linaria/react'; import { TableCell } from '@/ui/layout/table/components/TableCell'; import { TableRow } from '@/ui/layout/table/components/TableRow'; -import { useContext } from 'react'; import { getUrlHostnameOrThrow, isValidUrl } from 'twenty-shared/utils'; import { IconChevronRight, OverflowingTextWithTooltip, } from 'twenty-ui/display'; -import { ThemeContext } from 'twenty-ui/theme'; -import { themeCssVariables } from 'twenty-ui/theme-constants'; +import { useContext } from 'react'; +import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants'; import { type Webhook } from '~/generated-metadata/graphql'; export const StyledApisFieldTableRow = styled(TableRow)` @@ -42,7 +41,6 @@ export const SettingsDevelopersWebhookTableRow = ({ to: string; }) => { const { theme } = useContext(ThemeContext); - return ( diff --git a/packages/twenty-front/src/modules/settings/developers/components/WebhookEntitySelect.tsx b/packages/twenty-front/src/modules/settings/developers/components/WebhookEntitySelect.tsx index 75ce39c3d9..b2eabb08c2 100644 --- a/packages/twenty-front/src/modules/settings/developers/components/WebhookEntitySelect.tsx +++ b/packages/twenty-front/src/modules/settings/developers/components/WebhookEntitySelect.tsx @@ -26,8 +26,7 @@ import { useIcons, } from 'twenty-ui/display'; import { MenuItemSelect } from 'twenty-ui/navigation'; -import { ThemeContext } from 'twenty-ui/theme'; -import { themeCssVariables } from 'twenty-ui/theme-constants'; +import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants'; const WEBHOOK_ENTITY_DROPDOWN_ID = 'webhook-entity-select'; diff --git a/packages/twenty-front/src/modules/settings/logic-functions/components/SettingsLogicFunctionsFieldItemTableRow.tsx b/packages/twenty-front/src/modules/settings/logic-functions/components/SettingsLogicFunctionsFieldItemTableRow.tsx index 00ce9ec8d9..fbe210407c 100644 --- a/packages/twenty-front/src/modules/settings/logic-functions/components/SettingsLogicFunctionsFieldItemTableRow.tsx +++ b/packages/twenty-front/src/modules/settings/logic-functions/components/SettingsLogicFunctionsFieldItemTableRow.tsx @@ -1,11 +1,10 @@ import { styled } from '@linaria/react'; import { type LogicFunction } from '~/generated-metadata/graphql'; import { TableCell } from '@/ui/layout/table/components/TableCell'; -import { useContext } from 'react'; import { IconChevronRight } from 'twenty-ui/display'; import { StyledTableRow } from '@/settings/logic-functions/components/SettingsLogicFunctionsTable'; -import { ThemeContext } from 'twenty-ui/theme'; -import { themeCssVariables } from 'twenty-ui/theme-constants'; +import { useContext } from 'react'; +import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants'; const StyledNameTableCell = styled(TableCell)` color: ${themeCssVariables.font.color.primary}; diff --git a/packages/twenty-front/src/modules/settings/playground/components/GraphQLPlayground.tsx b/packages/twenty-front/src/modules/settings/playground/components/GraphQLPlayground.tsx index c3b8b891d1..dc6cae5b2c 100644 --- a/packages/twenty-front/src/modules/settings/playground/components/GraphQLPlayground.tsx +++ b/packages/twenty-front/src/modules/settings/playground/components/GraphQLPlayground.tsx @@ -8,9 +8,8 @@ import { createGraphiQLFetcher } from '@graphiql/toolkit'; import { GraphiQL } from 'graphiql'; import 'graphiql/graphiql.css'; import { useContext } from 'react'; -import { ThemeContext } from 'twenty-ui/theme'; -import { themeCssVariables } from 'twenty-ui/theme-constants'; import { REACT_APP_SERVER_BASE_URL } from '~/config'; +import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants'; type GraphQLPlaygroundProps = { onError(): void; @@ -39,7 +38,7 @@ export const GraphQLPlayground = ({ const playgroundApiKey = useAtomStateValue(playgroundApiKeyState); const baseUrl = REACT_APP_SERVER_BASE_URL + '/' + schemaToPath[schema]; - const { theme } = useContext(ThemeContext); + const { colorScheme } = useContext(ThemeContext); if (!playgroundApiKey) { onError(); @@ -57,7 +56,7 @@ export const GraphQLPlayground = ({ return ( { - const { theme } = useContext(ThemeContext); + const { theme, colorScheme } = useContext(ThemeContext); const playgroundApiKey = useAtomStateValue(playgroundApiKeyState); if (!playgroundApiKey) { @@ -85,7 +84,7 @@ export const RestPlayground = ({ onError, schema }: RestPlaygroundProps) => { }, }, baseServerURL: REACT_APP_SERVER_BASE_URL + '/' + schema, - forceDarkModeState: theme.name === 'dark' ? 'dark' : 'light', + forceDarkModeState: colorScheme === 'dark' ? 'dark' : 'light', hideClientButton: true, hideDarkModeToggle: true, hideModels: schema === 'metadata', diff --git a/packages/twenty-front/src/modules/settings/playground/components/SettingsPlaygroundCoverImage.tsx b/packages/twenty-front/src/modules/settings/playground/components/SettingsPlaygroundCoverImage.tsx index 3bd58f6682..f15c3153b0 100644 --- a/packages/twenty-front/src/modules/settings/playground/components/SettingsPlaygroundCoverImage.tsx +++ b/packages/twenty-front/src/modules/settings/playground/components/SettingsPlaygroundCoverImage.tsx @@ -4,9 +4,7 @@ import { type ReactNode, useContext } from 'react'; import DarkCoverImage from '@/settings/playground/assets/cover-dark.png'; import LightCoverImage from '@/settings/playground/assets/cover-light.png'; import { Card } from 'twenty-ui/layout'; -import { ThemeContext } from 'twenty-ui/theme'; -import { themeCssVariables } from 'twenty-ui/theme-constants'; - +import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants'; const StyledCard = styled(Card)` align-items: center; background-size: cover; @@ -29,9 +27,10 @@ export const StyledSettingsApiPlaygroundCoverImage = ({ children, className, }: StyledSettingsApiPlaygroundCoverImageProps) => { - const { theme } = useContext(ThemeContext); + const { colorScheme } = useContext(ThemeContext); + const coverImage = - theme.name === 'light' + colorScheme === 'light' ? LightCoverImage.toString() : DarkCoverImage.toString(); return ( diff --git a/packages/twenty-front/src/modules/settings/roles/components/SettingsRolesTableRow.tsx b/packages/twenty-front/src/modules/settings/roles/components/SettingsRolesTableRow.tsx index 483857e8fd..bdfa7448b1 100644 --- a/packages/twenty-front/src/modules/settings/roles/components/SettingsRolesTableRow.tsx +++ b/packages/twenty-front/src/modules/settings/roles/components/SettingsRolesTableRow.tsx @@ -14,8 +14,7 @@ import { TooltipDelay, useIcons, } from 'twenty-ui/display'; -import { ThemeContext } from 'twenty-ui/theme'; -import { themeCssVariables } from 'twenty-ui/theme-constants'; +import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants'; import { type RoleWithPartialMembers } from '@/settings/roles/types/RoleWithPartialMembers'; @@ -62,7 +61,6 @@ type SettingsRolesTableRowProps = { export const SettingsRolesTableRow = ({ role }: SettingsRolesTableRowProps) => { const { theme } = useContext(ThemeContext); - const { getIcon } = useIcons(); const Icon = getIcon(role.icon ?? 'IconUser'); diff --git a/packages/twenty-front/src/modules/settings/roles/role-assignment/components/SettingsRoleAssignmentTableRow.tsx b/packages/twenty-front/src/modules/settings/roles/role-assignment/components/SettingsRoleAssignmentTableRow.tsx index 2efb3db12d..92de3c47b6 100644 --- a/packages/twenty-front/src/modules/settings/roles/role-assignment/components/SettingsRoleAssignmentTableRow.tsx +++ b/packages/twenty-front/src/modules/settings/roles/role-assignment/components/SettingsRoleAssignmentTableRow.tsx @@ -12,8 +12,7 @@ import { OverflowingTextWithTooltip, useIcons, } from 'twenty-ui/display'; -import { ThemeContext } from 'twenty-ui/theme'; -import { themeCssVariables } from 'twenty-ui/theme-constants'; +import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants'; import { type Agent, type ApiKeyForRole } from '~/generated-metadata/graphql'; import { dateLocaleState } from '~/localization/states/dateLocaleState'; import { formatDateString } from '~/utils/string/formatDateString'; @@ -55,10 +54,10 @@ type SettingsRoleAssignmentTableRowProps = { export const SettingsRoleAssignmentTableRow = ({ roleTarget, }: SettingsRoleAssignmentTableRowProps) => { - const { theme } = useContext(ThemeContext); const currentWorkspaceMembers = useAtomStateValue( currentWorkspaceMembersState, ); + const { theme } = useContext(ThemeContext); const { getIcon } = useIcons(); const { dateFormat, timeZone } = useContext(UserContext); const dateLocale = useAtomStateValue(dateLocaleState); diff --git a/packages/twenty-front/src/modules/settings/roles/role-permissions/object-level-permissions/components/SettingsRolePermissionsObjectLevelObjectPicker.tsx b/packages/twenty-front/src/modules/settings/roles/role-permissions/object-level-permissions/components/SettingsRolePermissionsObjectLevelObjectPicker.tsx index 22aa5f51e5..6b7821f9e2 100644 --- a/packages/twenty-front/src/modules/settings/roles/role-permissions/object-level-permissions/components/SettingsRolePermissionsObjectLevelObjectPicker.tsx +++ b/packages/twenty-front/src/modules/settings/roles/role-permissions/object-level-permissions/components/SettingsRolePermissionsObjectLevelObjectPicker.tsx @@ -10,8 +10,7 @@ import { useSearchParams } from 'react-router-dom'; import { SettingsPath } from 'twenty-shared/types'; import { H2Title, IconSearch, useIcons } from 'twenty-ui/display'; import { Section } from 'twenty-ui/layout'; -import { ThemeContext } from 'twenty-ui/theme'; -import { themeCssVariables } from 'twenty-ui/theme-constants'; +import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants'; import { useNavigateSettings } from '~/hooks/useNavigateSettings'; const StyledTypeSelectContainer = styled.div` diff --git a/packages/twenty-front/src/modules/settings/roles/role-permissions/object-level-permissions/components/SettingsRolePermissionsObjectLevelTableRow.tsx b/packages/twenty-front/src/modules/settings/roles/role-permissions/object-level-permissions/components/SettingsRolePermissionsObjectLevelTableRow.tsx index 9c79e83444..d96f79fd04 100644 --- a/packages/twenty-front/src/modules/settings/roles/role-permissions/object-level-permissions/components/SettingsRolePermissionsObjectLevelTableRow.tsx +++ b/packages/twenty-front/src/modules/settings/roles/role-permissions/object-level-permissions/components/SettingsRolePermissionsObjectLevelTableRow.tsx @@ -6,13 +6,12 @@ import { SettingsRolePermissionsObjectLevelUpdateFieldsValueForObject } from '@/ import { OBJECT_LEVEL_PERMISSION_TABLE_GRID_AUTO_COLUMNS } from '@/settings/roles/role-permissions/object-level-permissions/constants/ObjectLevelPermissionTableGridAutoColumns'; import { TableCell } from '@/ui/layout/table/components/TableCell'; import { TableRow } from '@/ui/layout/table/components/TableRow'; -import { useContext } from 'react'; import { styled } from '@linaria/react'; import { SettingsPath } from 'twenty-shared/types'; import { getSettingsPath } from 'twenty-shared/utils'; import { OverflowingTextWithTooltip, useIcons } from 'twenty-ui/display'; -import { ThemeContext } from 'twenty-ui/theme'; -import { themeCssVariables } from 'twenty-ui/theme-constants'; +import { useContext } from 'react'; +import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants'; const StyledNameTableCell = styled(TableCell)` color: ${themeCssVariables.font.color.primary}; @@ -43,8 +42,8 @@ export const SettingsRolePermissionsObjectLevelTableRow = ({ isEditable = true, fromAgentId, }: SettingsRolePermissionsObjectLevelTableRowProps) => { - const { getIcon } = useIcons(); const { theme } = useContext(ThemeContext); + const { getIcon } = useIcons(); const Icon = getIcon(objectMetadataItem.icon); @@ -66,7 +65,9 @@ export const SettingsRolePermissionsObjectLevelTableRow = ({ {!!Icon && ( diff --git a/packages/twenty-front/src/modules/settings/roles/role-permissions/object-level-permissions/field-permissions/components/SettingsRolePermissionsObjectLevelObjectFieldPermissionTableRow.tsx b/packages/twenty-front/src/modules/settings/roles/role-permissions/object-level-permissions/field-permissions/components/SettingsRolePermissionsObjectLevelObjectFieldPermissionTableRow.tsx index 8f23780997..c5a9253b8a 100644 --- a/packages/twenty-front/src/modules/settings/roles/role-permissions/object-level-permissions/field-permissions/components/SettingsRolePermissionsObjectLevelObjectFieldPermissionTableRow.tsx +++ b/packages/twenty-front/src/modules/settings/roles/role-permissions/object-level-permissions/field-permissions/components/SettingsRolePermissionsObjectLevelObjectFieldPermissionTableRow.tsx @@ -13,8 +13,7 @@ import { styled } from '@linaria/react'; import { useContext, useMemo } from 'react'; import { isDefined } from 'twenty-shared/utils'; import { useIcons } from 'twenty-ui/display'; -import { ThemeContext } from 'twenty-ui/theme'; -import { themeCssVariables } from 'twenty-ui/theme-constants'; +import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants'; import { v4 } from 'uuid'; import { type FieldPermission, @@ -161,7 +160,9 @@ export const SettingsRolePermissionsObjectLevelObjectFieldPermissionTableRow = {!!Icon && ( diff --git a/packages/twenty-front/src/modules/settings/roles/role-permissions/object-level-permissions/object-form/components/OverridableCheckbox.tsx b/packages/twenty-front/src/modules/settings/roles/role-permissions/object-level-permissions/object-form/components/OverridableCheckbox.tsx index 943417e073..2ff2197cdc 100644 --- a/packages/twenty-front/src/modules/settings/roles/role-permissions/object-level-permissions/object-form/components/OverridableCheckbox.tsx +++ b/packages/twenty-front/src/modules/settings/roles/role-permissions/object-level-permissions/object-form/components/OverridableCheckbox.tsx @@ -1,9 +1,8 @@ -import { useContext } from 'react'; import { styled } from '@linaria/react'; +import { useContext } from 'react'; import { IconReload, IconX } from 'twenty-ui/display'; import { Checkbox } from 'twenty-ui/input'; -import { ThemeContext } from 'twenty-ui/theme'; -import { themeCssVariables } from 'twenty-ui/theme-constants'; +import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants'; import { AnimatedRotate } from 'twenty-ui/utilities'; export type OverridableCheckboxType = 'default' | 'override' | 'no_cta'; diff --git a/packages/twenty-front/src/modules/settings/roles/role-permissions/object-level-permissions/record-level-permissions/components/SettingsRolePermissionsObjectLevelRecordLevelPermissionValueInput.tsx b/packages/twenty-front/src/modules/settings/roles/role-permissions/object-level-permissions/record-level-permissions/components/SettingsRolePermissionsObjectLevelRecordLevelPermissionValueInput.tsx index 9956202c04..3bbe76d5b5 100644 --- a/packages/twenty-front/src/modules/settings/roles/role-permissions/object-level-permissions/record-level-permissions/components/SettingsRolePermissionsObjectLevelRecordLevelPermissionValueInput.tsx +++ b/packages/twenty-front/src/modules/settings/roles/role-permissions/object-level-permissions/record-level-permissions/components/SettingsRolePermissionsObjectLevelRecordLevelPermissionValueInput.tsx @@ -24,8 +24,7 @@ import { currentRecordFiltersComponentState } from '@/object-record/record-filte import { type CompositeFieldType } from '@/settings/data-model/types/CompositeFieldType'; import { createRecordLevelPermissionVariablePicker } from '@/settings/roles/role-permissions/object-level-permissions/record-level-permissions/components/SettingsRolePermissionsObjectLevelRecordLevelPermissionVariablePicker'; import { useAtomComponentStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomComponentStateValue'; -import { ThemeContext } from 'twenty-ui/theme'; -import { themeCssVariables } from 'twenty-ui/theme-constants'; +import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants'; const StyledContainer = styled.div` align-items: stretch; @@ -99,7 +98,6 @@ export const SettingsRolePermissionsObjectLevelRecordLevelPermissionValueInput = recordFilterId, }: SettingsRolePermissionsObjectLevelRecordLevelPermissionValueInputProps) => { const { theme } = useContext(ThemeContext); - const { objectMetadataItem } = useContext(AdvancedFilterContext); const currentRecordFilters = useAtomComponentStateValue( diff --git a/packages/twenty-front/src/modules/settings/roles/role-permissions/object-level-permissions/record-level-permissions/components/SettingsRolePermissionsObjectLevelRecordLevelPermissionVariablePicker.tsx b/packages/twenty-front/src/modules/settings/roles/role-permissions/object-level-permissions/record-level-permissions/components/SettingsRolePermissionsObjectLevelRecordLevelPermissionVariablePicker.tsx index 8f078d09e2..24060e2203 100644 --- a/packages/twenty-front/src/modules/settings/roles/role-permissions/object-level-permissions/record-level-permissions/components/SettingsRolePermissionsObjectLevelRecordLevelPermissionVariablePicker.tsx +++ b/packages/twenty-front/src/modules/settings/roles/role-permissions/object-level-permissions/record-level-permissions/components/SettingsRolePermissionsObjectLevelRecordLevelPermissionVariablePicker.tsx @@ -1,10 +1,9 @@ /* @license Enterprise */ -import { useContext } from 'react'; import { styled } from '@linaria/react'; import { IconVariablePlus } from 'twenty-ui/display'; -import { ThemeContext } from 'twenty-ui/theme'; -import { themeCssVariables } from 'twenty-ui/theme-constants'; +import { useContext } from 'react'; +import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants'; import { type VariablePickerComponent } from '@/object-record/record-field/ui/form-types/types/VariablePickerComponent'; import { SettingsRolePermissionsObjectLevelRecordLevelPermissionMeValueSelect } from '@/settings/roles/role-permissions/object-level-permissions/record-level-permissions/components/SettingsRolePermissionsObjectLevelRecordLevelPermissionMeValueSelect'; diff --git a/packages/twenty-front/src/modules/settings/roles/role-permissions/objects-permissions/components/PermissionIcon.tsx b/packages/twenty-front/src/modules/settings/roles/role-permissions/objects-permissions/components/PermissionIcon.tsx index 2c7d3e0ec9..07a9f4d2fe 100644 --- a/packages/twenty-front/src/modules/settings/roles/role-permissions/objects-permissions/components/PermissionIcon.tsx +++ b/packages/twenty-front/src/modules/settings/roles/role-permissions/objects-permissions/components/PermissionIcon.tsx @@ -2,10 +2,9 @@ import { SETTINGS_ROLE_OBJECT_PERMISSION_ICON_CONFIG, type SettingsRoleObjectPermissionKey, } from '@/settings/roles/role-permissions/objects-permissions/constants/SettingsRoleObjectPermissionIconConfig'; -import { useContext } from 'react'; import { styled } from '@linaria/react'; -import { ThemeContext } from 'twenty-ui/theme'; -import { themeCssVariables } from 'twenty-ui/theme-constants'; +import { useContext } from 'react'; +import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants'; type PermissionIconProps = { permission: SettingsRoleObjectPermissionKey; @@ -39,11 +38,10 @@ const StyledIcon = styled.div<{ isRevoked?: boolean }>` `; export const PermissionIcon = ({ permission, state }: PermissionIconProps) => { - const { theme } = useContext(ThemeContext); - const { Icon, IconForbidden } = SETTINGS_ROLE_OBJECT_PERMISSION_ICON_CONFIG[permission]; + const { theme } = useContext(ThemeContext); const isRevoked = state === 'revoked'; return ( diff --git a/packages/twenty-front/src/modules/settings/roles/role-permissions/permission-flags/components/SettingsRolePermissionsSettingsTableRow.tsx b/packages/twenty-front/src/modules/settings/roles/role-permissions/permission-flags/components/SettingsRolePermissionsSettingsTableRow.tsx index 63d07a82e0..3a929d4607 100644 --- a/packages/twenty-front/src/modules/settings/roles/role-permissions/permission-flags/components/SettingsRolePermissionsSettingsTableRow.tsx +++ b/packages/twenty-front/src/modules/settings/roles/role-permissions/permission-flags/components/SettingsRolePermissionsSettingsTableRow.tsx @@ -4,11 +4,10 @@ import { TableCell } from '@/ui/layout/table/components/TableCell'; import { useAtomFamilyStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomFamilyStateValue'; import { useSetAtomFamilyState } from '@/ui/utilities/state/jotai/hooks/useSetAtomFamilyState'; import { TableRow } from '@/ui/layout/table/components/TableRow'; -import { useContext } from 'react'; import { styled } from '@linaria/react'; import { Checkbox } from 'twenty-ui/input'; -import { ThemeContext } from 'twenty-ui/theme'; -import { themeCssVariables } from 'twenty-ui/theme-constants'; +import { useContext } from 'react'; +import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants'; import { v4 } from 'uuid'; const StyledTableRow = styled(TableRow)<{ isDisabled: boolean }>` diff --git a/packages/twenty-front/src/modules/settings/roles/role-settings/components/SettingsRoleApplicability.tsx b/packages/twenty-front/src/modules/settings/roles/role-settings/components/SettingsRoleApplicability.tsx index 2d2ecdb636..a2078f3f80 100644 --- a/packages/twenty-front/src/modules/settings/roles/role-settings/components/SettingsRoleApplicability.tsx +++ b/packages/twenty-front/src/modules/settings/roles/role-settings/components/SettingsRoleApplicability.tsx @@ -1,13 +1,12 @@ import { useIsFeatureEnabled } from '@/workspace/hooks/useIsFeatureEnabled'; -import { useContext } from 'react'; import { styled } from '@linaria/react'; import { t } from '@lingui/core/macro'; import { H2Title, IconKey, IconRobot, IconUsers } from 'twenty-ui/display'; import { Checkbox } from 'twenty-ui/input'; import { Section } from 'twenty-ui/layout'; -import { ThemeContext } from 'twenty-ui/theme'; -import { themeCssVariables } from 'twenty-ui/theme-constants'; +import { useContext } from 'react'; +import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants'; import { FeatureFlagKey } from '~/generated-metadata/graphql'; const StyledCheckboxContainer = styled.div<{ disabled: boolean }>` @@ -52,7 +51,6 @@ export const SettingsRoleApplicability = ({ isEditable, }: SettingsRoleApplicabilityProps) => { const { theme } = useContext(ThemeContext); - const isAiEnabled = useIsFeatureEnabled(FeatureFlagKey.IS_AI_ENABLED); const options = [ diff --git a/packages/twenty-front/src/modules/settings/security/components/SSO/SettingsSSOSAMLForm.tsx b/packages/twenty-front/src/modules/settings/security/components/SSO/SettingsSSOSAMLForm.tsx index 16ee4891f4..6fbf0dc9e5 100644 --- a/packages/twenty-front/src/modules/settings/security/components/SSO/SettingsSSOSAMLForm.tsx +++ b/packages/twenty-front/src/modules/settings/security/components/SSO/SettingsSSOSAMLForm.tsx @@ -3,7 +3,7 @@ import { parseSAMLMetadataFromXMLFile } from '@/settings/security/utils/parseSAMLMetadataFromXMLFile'; import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar'; import { SettingsTextInput } from '@/ui/input/components/SettingsTextInput'; -import { useContext, type ChangeEvent, useRef } from 'react'; +import { type ChangeEvent, useContext, useRef } from 'react'; import { styled } from '@linaria/react'; import { useLingui } from '@lingui/react/macro'; import { useFormContext } from 'react-hook-form'; @@ -18,8 +18,7 @@ import { } from 'twenty-ui/display'; import { Button } from 'twenty-ui/input'; import { Section } from 'twenty-ui/layout'; -import { ThemeContext } from 'twenty-ui/theme'; -import { themeCssVariables } from 'twenty-ui/theme-constants'; +import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants'; import { REACT_APP_SERVER_BASE_URL } from '~/config'; import { useCopyToClipboard } from '~/hooks/useCopyToClipboard'; @@ -57,8 +56,8 @@ const StyledButtonCopy = styled.div` `; export const SettingsSSOSAMLForm = () => { - const { enqueueErrorSnackBar } = useSnackBar(); const { theme } = useContext(ThemeContext); + const { enqueueErrorSnackBar } = useSnackBar(); const { setValue, getValues, watch, trigger } = useFormContext(); const { t } = useLingui(); const { copyToClipboard } = useCopyToClipboard(); diff --git a/packages/twenty-front/src/modules/spreadsheet-import/components/SpreadsheetImportTable.tsx b/packages/twenty-front/src/modules/spreadsheet-import/components/SpreadsheetImportTable.tsx index 34c8f9be99..802aaca35f 100644 --- a/packages/twenty-front/src/modules/spreadsheet-import/components/SpreadsheetImportTable.tsx +++ b/packages/twenty-front/src/modules/spreadsheet-import/components/SpreadsheetImportTable.tsx @@ -2,10 +2,8 @@ import { styled } from '@linaria/react'; import { useContext } from 'react'; // @ts-expect-error // Todo: remove usage of react-data-grid import DataGrid, { type DataGridProps } from 'react-data-grid'; -import { ThemeContext } from 'twenty-ui/theme'; -import { themeCssVariables } from 'twenty-ui/theme-constants'; - import { useSpreadsheetImportInternal } from '@/spreadsheet-import/hooks/useSpreadsheetImportInternal'; +import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants'; const StyledDataGrid = styled(DataGrid)` --rdg-background-color: ${themeCssVariables.background.primary}; @@ -132,9 +130,10 @@ export const SpreadsheetImportTable = ({ onSelectedRowsChange, selectedRows, }: SpreadsheetImportTableProps) => { + const { colorScheme } = useContext(ThemeContext); + const { rtl } = useSpreadsheetImportInternal(); - const { theme } = useContext(ThemeContext); - const themeClassName = theme.name === 'dark' ? 'rdg-dark' : 'rdg-light'; + const themeClassName = colorScheme === 'dark' ? 'rdg-dark' : 'rdg-light'; if (!rows?.length || !columns?.length) return null; diff --git a/packages/twenty-front/src/modules/spreadsheet-import/provider/components/SpreadsheetImportProvider.tsx b/packages/twenty-front/src/modules/spreadsheet-import/provider/components/SpreadsheetImportProvider.tsx index a6221468a9..7566196ed4 100644 --- a/packages/twenty-front/src/modules/spreadsheet-import/provider/components/SpreadsheetImportProvider.tsx +++ b/packages/twenty-front/src/modules/spreadsheet-import/provider/components/SpreadsheetImportProvider.tsx @@ -1,6 +1,6 @@ import React, { useContext } from 'react'; -import { ThemeContext } from 'twenty-ui/theme'; import Skeleton, { SkeletonTheme } from 'react-loading-skeleton'; +import { ThemeContext } from 'twenty-ui/theme-constants'; import { SKELETON_LOADER_HEIGHT_SIZES } from '@/activities/components/SkeletonLoader'; import { SPREADSHEET_IMPORT_MODAL_ID } from '@/spreadsheet-import/constants/SpreadsheetImportModalId'; @@ -18,7 +18,6 @@ const SpreadsheetImport = React.lazy(() => const LoadingSkeleton = () => { const { theme } = useContext(ThemeContext); - return ( { + const { theme } = useContext(ThemeContext); const { spreadsheetImportFields: fields } = useSpreadsheetImportInternal(); const options = getFieldOptions(fields, column.value) as SelectOption[]; const value = options.find((opt) => opt.value === option.value); - - const { theme } = useContext(ThemeContext); - return ( ` background: ${({ allMatched }) => diff --git a/packages/twenty-front/src/modules/spreadsheet-import/steps/components/SpreadsheetImportStepper.tsx b/packages/twenty-front/src/modules/spreadsheet-import/steps/components/SpreadsheetImportStepper.tsx index 3cf1083d63..0681e62076 100644 --- a/packages/twenty-front/src/modules/spreadsheet-import/steps/components/SpreadsheetImportStepper.tsx +++ b/packages/twenty-front/src/modules/spreadsheet-import/steps/components/SpreadsheetImportStepper.tsx @@ -1,6 +1,4 @@ import { useCallback, useContext, useState } from 'react'; -import { ThemeContext } from 'twenty-ui/theme'; - import { useSpreadsheetImportInternal } from '@/spreadsheet-import/hooks/useSpreadsheetImportInternal'; import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar'; import { ModalContent } from 'twenty-ui/layout'; @@ -14,6 +12,7 @@ import { SelectHeaderStep } from './SelectHeaderStep/SelectHeaderStep'; import { SelectSheetStep } from './SelectSheetStep/SelectSheetStep'; import { UploadStep } from './UploadStep/UploadStep'; import { ValidationStep } from './ValidationStep/ValidationStep'; +import { ThemeContext } from 'twenty-ui/theme-constants'; type SpreadsheetImportStepperProps = { nextStep: () => void; @@ -25,7 +24,6 @@ export const SpreadsheetImportStepper = ({ prevStep, }: SpreadsheetImportStepperProps) => { const { theme } = useContext(ThemeContext); - const { initialStepState } = useSpreadsheetImportInternal(); const [currentStepState, setCurrentStepState] = diff --git a/packages/twenty-front/src/modules/ui/feedback/snack-bar-manager/components/SnackBar.tsx b/packages/twenty-front/src/modules/ui/feedback/snack-bar-manager/components/SnackBar.tsx index 419c379142..f6035311d9 100644 --- a/packages/twenty-front/src/modules/ui/feedback/snack-bar-manager/components/SnackBar.tsx +++ b/packages/twenty-front/src/modules/ui/feedback/snack-bar-manager/components/SnackBar.tsx @@ -19,8 +19,11 @@ import { } from 'twenty-ui/display'; import { ProgressBar, useProgressAnimation } from 'twenty-ui/feedback'; import { LightButton, LightIconButton } from 'twenty-ui/input'; -import { ThemeContext } from 'twenty-ui/theme'; -import { MOBILE_VIEWPORT, themeCssVariables } from 'twenty-ui/theme-constants'; +import { + MOBILE_VIEWPORT, + ThemeContext, + themeCssVariables, +} from 'twenty-ui/theme-constants'; export enum SnackBarVariant { Default = 'default', @@ -154,8 +157,8 @@ export const SnackBar = ({ role = 'status', variant = SnackBarVariant.Default, }: SnackBarProps) => { - const { theme } = useContext(ThemeContext); const { i18n, t } = useLingui(); + const { theme } = useContext(ThemeContext); const { animation: progressAnimation, value: progressValue } = useProgressAnimation({ autoPlay: isUndefined(overrideProgressValue), @@ -197,7 +200,7 @@ export const SnackBar = ({ ); } - }, [iconComponent, theme.icon.size.md, theme.snackBar, variant, i18n]); + }, [iconComponent, variant, i18n, theme.icon.size.md, theme.snackBar]); const handleMouseEnter = () => { if (progressAnimation?.state === 'running') { diff --git a/packages/twenty-front/src/modules/ui/field/display/components/CurrencyDisplay.tsx b/packages/twenty-front/src/modules/ui/field/display/components/CurrencyDisplay.tsx index 019a1980a9..d953aff34e 100644 --- a/packages/twenty-front/src/modules/ui/field/display/components/CurrencyDisplay.tsx +++ b/packages/twenty-front/src/modules/ui/field/display/components/CurrencyDisplay.tsx @@ -13,7 +13,7 @@ import { EllipsisDisplay } from '@/ui/field/display/components/EllipsisDisplay'; import { isDefined, formatToShortNumber } from 'twenty-shared/utils'; import { DEFAULT_DECIMAL_VALUE } from '~/utils/format/formatNumber'; import { isUndefinedOrNull } from '~/utils/isUndefinedOrNull'; -import { ThemeContext } from 'twenty-ui/theme'; +import { ThemeContext } from 'twenty-ui/theme-constants'; type CurrencyDisplayProps = { currencyValue: FieldCurrencyValue | null | undefined; diff --git a/packages/twenty-front/src/modules/ui/field/display/components/UploadFileChip.tsx b/packages/twenty-front/src/modules/ui/field/display/components/UploadFileChip.tsx index 04a039862f..2a4f932056 100644 --- a/packages/twenty-front/src/modules/ui/field/display/components/UploadFileChip.tsx +++ b/packages/twenty-front/src/modules/ui/field/display/components/UploadFileChip.tsx @@ -1,9 +1,8 @@ import { styled } from '@linaria/react'; +import { useContext } from 'react'; import { IconArrowUp } from 'twenty-ui/display'; import { Loader } from 'twenty-ui/feedback'; -import { themeCssVariables } from 'twenty-ui/theme-constants'; -import { useContext } from 'react'; -import { ThemeContext } from 'twenty-ui/theme'; +import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants'; const StyledContainer = styled.div` align-items: center; diff --git a/packages/twenty-front/src/modules/ui/field/input/components/CurrencyInput.tsx b/packages/twenty-front/src/modules/ui/field/input/components/CurrencyInput.tsx index f905f9984f..000e09cdd7 100644 --- a/packages/twenty-front/src/modules/ui/field/input/components/CurrencyInput.tsx +++ b/packages/twenty-front/src/modules/ui/field/input/components/CurrencyInput.tsx @@ -7,8 +7,7 @@ import { CurrencyPickerDropdownButton } from '@/ui/input/components/internal/cur import { type Currency } from '@/ui/input/components/internal/types/Currency'; import { IMaskInput } from 'react-imask'; import { type IconComponent } from 'twenty-ui/display'; -import { ThemeContext } from 'twenty-ui/theme'; -import { themeCssVariables } from 'twenty-ui/theme-constants'; +import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants'; export const StyledIMaskInput = styled(IMaskInput)` margin: 0; @@ -82,7 +81,6 @@ export const CurrencyInput = ({ decimals, }: CurrencyInputProps) => { const { theme } = useContext(ThemeContext); - const [internalText, setInternalText] = useState(value); const wrapperRef = useRef(null); diff --git a/packages/twenty-front/src/modules/ui/field/input/components/RatingInput.tsx b/packages/twenty-front/src/modules/ui/field/input/components/RatingInput.tsx index 696e563c9f..524a824069 100644 --- a/packages/twenty-front/src/modules/ui/field/input/components/RatingInput.tsx +++ b/packages/twenty-front/src/modules/ui/field/input/components/RatingInput.tsx @@ -6,7 +6,7 @@ import { useClearField } from '@/object-record/record-field/ui/hooks/useClearFie import { RATING_VALUES } from 'twenty-shared/constants'; import { type FieldRatingValue } from 'twenty-shared/types'; import { IconTwentyStarFilled } from 'twenty-ui/display'; -import { THEME_COMMON, ThemeContext } from 'twenty-ui/theme'; +import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants'; const StyledContainer = styled.div` align-items: center; @@ -26,18 +26,17 @@ type RatingInputProps = { readonly?: boolean; }; -const iconSizeMd = THEME_COMMON.icon.size.md; - export const RatingInput = ({ onChange, value, readonly, }: RatingInputProps) => { - const { theme } = useContext(ThemeContext); const clearField = useClearField(); + const { theme } = useContext(ThemeContext); - const activeColor = theme.font.color.secondary; - const inactiveColor = theme.background.quaternary; + const iconSizeMd = theme.icon.size.md; + const activeColor = themeCssVariables.font.color.secondary; + const inactiveColor = themeCssVariables.background.quaternary; const [hoveredValue, setHoveredValue] = useState(null); diff --git a/packages/twenty-front/src/modules/ui/input/components/ImageInput.tsx b/packages/twenty-front/src/modules/ui/input/components/ImageInput.tsx index d0fe1f8e84..c14f8c662e 100644 --- a/packages/twenty-front/src/modules/ui/input/components/ImageInput.tsx +++ b/packages/twenty-front/src/modules/ui/input/components/ImageInput.tsx @@ -7,9 +7,7 @@ import { getImageAbsoluteURI, isDefined } from 'twenty-shared/utils'; import { IconPhotoUp, IconTrash, IconUpload, IconX } from 'twenty-ui/display'; import { Button } from 'twenty-ui/input'; import { REACT_APP_SERVER_BASE_URL } from '~/config'; -import { themeCssVariables } from 'twenty-ui/theme-constants'; -import { ThemeContext } from 'twenty-ui/theme'; - +import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants'; const StyledContainer = styled.div` display: flex; flex-direction: row; diff --git a/packages/twenty-front/src/modules/ui/input/components/MultiSelectControl.tsx b/packages/twenty-front/src/modules/ui/input/components/MultiSelectControl.tsx index ef49c3ed8d..0a3f27f496 100644 --- a/packages/twenty-front/src/modules/ui/input/components/MultiSelectControl.tsx +++ b/packages/twenty-front/src/modules/ui/input/components/MultiSelectControl.tsx @@ -10,8 +10,7 @@ import { type IconComponent, OverflowingTextWithTooltip, } from 'twenty-ui/display'; -import { ThemeContext } from 'twenty-ui/theme'; -import { themeCssVariables } from 'twenty-ui/theme-constants'; +import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants'; const StyledIconChevronDownWrapper = styled.div<{ disabled?: boolean; @@ -44,7 +43,6 @@ export const MultiSelectControl = ({ hasRightElement, }: MultiSelectControlProps) => { const { theme } = useContext(ThemeContext); - const firstSelectedOption = selectedOptions?.[0]; return ( { const { theme } = useContext(ThemeContext); - return ( >` box-sizing: border-box; display: inline-flex; diff --git a/packages/twenty-front/src/modules/ui/input/components/internal/currency/components/CurrencyPickerDropdownButton.tsx b/packages/twenty-front/src/modules/ui/input/components/internal/currency/components/CurrencyPickerDropdownButton.tsx index 390e8f981d..947d1c3fb4 100644 --- a/packages/twenty-front/src/modules/ui/input/components/internal/currency/components/CurrencyPickerDropdownButton.tsx +++ b/packages/twenty-front/src/modules/ui/input/components/internal/currency/components/CurrencyPickerDropdownButton.tsx @@ -6,12 +6,10 @@ import { CurrencyCode } from 'twenty-shared/constants'; import { CURRENCIES } from '@/settings/data-model/constants/Currencies'; import { type Currency } from '@/ui/input/components/internal/types/Currency'; import { useCloseDropdown } from '@/ui/layout/dropdown/hooks/useCloseDropdown'; +import { useContext } from 'react'; import { IconChevronDown } from 'twenty-ui/display'; import { CurrencyPickerDropdownSelect } from './CurrencyPickerDropdownSelect'; -import { ThemeContext } from 'twenty-ui/theme'; -import { themeCssVariables } from 'twenty-ui/theme-constants'; -import { useContext } from 'react'; - +import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants'; const StyledDropdownButtonContainer = styled.div` align-items: center; color: ${({ color }) => color ?? 'none'}; @@ -51,7 +49,6 @@ export const CurrencyPickerDropdownButton = ({ onChange: (currency: Currency) => void; }) => { const { theme } = useContext(ThemeContext); - const dropdownId = 'currency-picker-dropdown-id'; const { closeDropdown } = useCloseDropdown(); diff --git a/packages/twenty-front/src/modules/ui/input/components/internal/date/components/DatePicker.tsx b/packages/twenty-front/src/modules/ui/input/components/internal/date/components/DatePicker.tsx index 827354024a..c877185cf8 100644 --- a/packages/twenty-front/src/modules/ui/input/components/internal/date/components/DatePicker.tsx +++ b/packages/twenty-front/src/modules/ui/input/components/internal/date/components/DatePicker.tsx @@ -1,5 +1,5 @@ import { styled } from '@linaria/react'; -import { Suspense, lazy, type ComponentType, useContext } from 'react'; +import { Suspense, lazy, useContext, type ComponentType } from 'react'; import type { ReactDatePickerProps as ReactDatePickerLibProps } from 'react-datepicker'; import Skeleton, { SkeletonTheme } from 'react-loading-skeleton'; @@ -26,8 +26,7 @@ import { } from 'twenty-shared/utils'; import { IconCalendarX } from 'twenty-ui/display'; import { MenuItemLeftContent } from 'twenty-ui/navigation'; -import { themeCssVariables } from 'twenty-ui/theme-constants'; -import { ThemeContext } from 'twenty-ui/theme'; +import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants'; export const MONTH_AND_YEAR_DROPDOWN_MONTH_SELECT_ID = 'date-picker-month-and-year-dropdown-month-select'; @@ -355,14 +354,13 @@ export const DatePicker = ({ onRelativeDateChange, hideHeaderInput, }: DatePickerProps) => { + const { theme } = useContext(ThemeContext); const plainDate = isDefined(plainDateString) ? Temporal.PlainDate.from(plainDateString) : Temporal.Now.plainDateISO(); const { userTimezone } = useUserTimezone(); - const { theme } = useContext(ThemeContext); - const { closeDropdown: closeDropdownMonthSelect } = useCloseDropdown(); const { closeDropdown: closeDropdownYearSelect } = useCloseDropdown(); const currentWorkspaceMember = useAtomStateValue(currentWorkspaceMemberState); diff --git a/packages/twenty-front/src/modules/ui/input/components/internal/date/components/DatePickerWithoutCalendar.tsx b/packages/twenty-front/src/modules/ui/input/components/internal/date/components/DatePickerWithoutCalendar.tsx index a5dcffa248..fa13744512 100644 --- a/packages/twenty-front/src/modules/ui/input/components/internal/date/components/DatePickerWithoutCalendar.tsx +++ b/packages/twenty-front/src/modules/ui/input/components/internal/date/components/DatePickerWithoutCalendar.tsx @@ -1,5 +1,5 @@ import { styled } from '@linaria/react'; -import { Suspense, lazy, type ComponentType, useContext } from 'react'; +import { Suspense, lazy, useContext, type ComponentType } from 'react'; import type { ReactDatePickerProps as ReactDatePickerLibProps } from 'react-datepicker'; import Skeleton, { SkeletonTheme } from 'react-loading-skeleton'; @@ -16,8 +16,7 @@ import { useAtomStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomState import { Temporal } from 'temporal-polyfill'; import { type Nullable } from 'twenty-shared/types'; import { isDefined, turnJSDateToPlainDate } from 'twenty-shared/utils'; -import { themeCssVariables } from 'twenty-ui/theme-constants'; -import { ThemeContext } from 'twenty-ui/theme'; +import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants'; export const MONTH_AND_YEAR_DROPDOWN_MONTH_SELECT_ID = 'date-picker-month-and-year-dropdown-month-select'; @@ -323,9 +322,8 @@ export const DatePickerWithoutCalendar = ({ onChange, onClose, }: DatePickerWithoutCalendarProps) => { - const plainDate = isDefined(date) ? Temporal.PlainDate.from(date) : null; - const { theme } = useContext(ThemeContext); + const plainDate = isDefined(date) ? Temporal.PlainDate.from(date) : null; const { closeDropdown: closeDropdownMonthSelect } = useCloseDropdown(); const { closeDropdown: closeDropdownYearSelect } = useCloseDropdown(); diff --git a/packages/twenty-front/src/modules/ui/input/components/internal/date/components/DateTimePicker.tsx b/packages/twenty-front/src/modules/ui/input/components/internal/date/components/DateTimePicker.tsx index 975359160b..c756284d54 100644 --- a/packages/twenty-front/src/modules/ui/input/components/internal/date/components/DateTimePicker.tsx +++ b/packages/twenty-front/src/modules/ui/input/components/internal/date/components/DateTimePicker.tsx @@ -11,7 +11,7 @@ import { getHighlightedDates } from '@/ui/input/components/internal/date/utils/g import { useCloseDropdown } from '@/ui/layout/dropdown/hooks/useCloseDropdown'; import { styled } from '@linaria/react'; import { t } from '@lingui/core/macro'; -import { Suspense, lazy, type ComponentType, useContext } from 'react'; +import { Suspense, lazy, useContext, type ComponentType } from 'react'; import type { ReactDatePickerProps as ReactDatePickerLibProps } from 'react-datepicker'; import Skeleton, { SkeletonTheme } from 'react-loading-skeleton'; @@ -24,9 +24,7 @@ import { useGetShiftedDateToSystemTimeZone } from '@/ui/input/components/interna import { useUserFirstDayOfTheWeek } from '@/ui/input/components/internal/date/hooks/useUserFirstDayOfTheWeek'; import { useUserTimezone } from '@/ui/input/components/internal/date/hooks/useUserTimezone'; import { Temporal } from 'temporal-polyfill'; -import { themeCssVariables } from 'twenty-ui/theme-constants'; -import { ThemeContext } from 'twenty-ui/theme'; - +import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants'; export const MONTH_AND_YEAR_DROPDOWN_MONTH_SELECT_ID = 'date-picker-month-and-year-dropdown-month-select'; export const MONTH_AND_YEAR_DROPDOWN_YEAR_SELECT_ID = @@ -356,7 +354,6 @@ export const DateTimePicker = ({ timeZone, }: DateTimePickerProps) => { const { theme } = useContext(ThemeContext); - const { userFirstDayOfTheWeek } = useUserFirstDayOfTheWeek(); const { userTimezone } = useUserTimezone(); diff --git a/packages/twenty-front/src/modules/ui/input/components/internal/phone/components/PhoneCountryPickerDropdownButton.tsx b/packages/twenty-front/src/modules/ui/input/components/internal/phone/components/PhoneCountryPickerDropdownButton.tsx index 0113e501cd..034351a786 100644 --- a/packages/twenty-front/src/modules/ui/input/components/internal/phone/components/PhoneCountryPickerDropdownButton.tsx +++ b/packages/twenty-front/src/modules/ui/input/components/internal/phone/components/PhoneCountryPickerDropdownButton.tsx @@ -13,8 +13,7 @@ import { useAtomComponentStateValue } from '@/ui/utilities/state/jotai/hooks/use import 'react-phone-number-input/style.css'; import { isDefined } from 'twenty-shared/utils'; import { IconChevronDown, IconWorld } from 'twenty-ui/display'; -import { themeCssVariables } from 'twenty-ui/theme-constants'; -import { ThemeContext } from 'twenty-ui/theme'; +import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants'; type StyledDropdownButtonProps = { isUnfolded: boolean; @@ -75,8 +74,6 @@ export const PhoneCountryPickerDropdownButton = ({ value: string; onChange: (countryCode: string) => void; }) => { - const { theme } = useContext(ThemeContext); - const [selectedCountry, setSelectedCountry] = useState(); const isDropdownOpen = useAtomComponentStateValue( @@ -92,6 +89,7 @@ export const PhoneCountryPickerDropdownButton = ({ }; const countries = useCountries(); + const { theme } = useContext(ThemeContext); useEffect(() => { const country = countries.find(({ countryCode }) => countryCode === value); diff --git a/packages/twenty-front/src/modules/ui/input/relation-picker/components/skeletons/DropdownMenuSkeletonItem.tsx b/packages/twenty-front/src/modules/ui/input/relation-picker/components/skeletons/DropdownMenuSkeletonItem.tsx index 0a20c86462..1627eea416 100644 --- a/packages/twenty-front/src/modules/ui/input/relation-picker/components/skeletons/DropdownMenuSkeletonItem.tsx +++ b/packages/twenty-front/src/modules/ui/input/relation-picker/components/skeletons/DropdownMenuSkeletonItem.tsx @@ -1,11 +1,9 @@ import { SKELETON_LOADER_HEIGHT_SIZES } from '@/activities/components/SkeletonLoader'; import { type CSSWidth } from '@/ui/types/CSSWidth'; import { styled } from '@linaria/react'; -import Skeleton, { SkeletonTheme } from 'react-loading-skeleton'; -import { themeCssVariables } from 'twenty-ui/theme-constants'; import { useContext } from 'react'; -import { ThemeContext } from 'twenty-ui/theme'; - +import Skeleton, { SkeletonTheme } from 'react-loading-skeleton'; +import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants'; const StyledDropdownMenuSkeletonContainer = styled.div` --horizontal-padding: ${themeCssVariables.spacing[1]}; --vertical-padding: ${themeCssVariables.spacing[2]}; diff --git a/packages/twenty-front/src/modules/ui/layout/draggable-list/components/DraggableItem.tsx b/packages/twenty-front/src/modules/ui/layout/draggable-list/components/DraggableItem.tsx index 173ae2877f..fab1d9a381 100644 --- a/packages/twenty-front/src/modules/ui/layout/draggable-list/components/DraggableItem.tsx +++ b/packages/twenty-front/src/modules/ui/layout/draggable-list/components/DraggableItem.tsx @@ -1,8 +1,8 @@ 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'; +import { isDefined } from 'twenty-shared/utils'; +import { ThemeContext } from 'twenty-ui/theme-constants'; type DraggableItemProps = { draggableId: string; @@ -30,7 +30,6 @@ export const DraggableItem = ({ containerOffsetY, }: DraggableItemProps) => { const { theme } = useContext(ThemeContext); - return ( )) => { const { theme } = useContext(ThemeContext); - return ( <> {'Icon' in props && diff --git a/packages/twenty-front/src/modules/ui/layout/dropdown/components/DropdownMenuInnerSelect.tsx b/packages/twenty-front/src/modules/ui/layout/dropdown/components/DropdownMenuInnerSelect.tsx index 374ed2805b..dfc9526ed8 100644 --- a/packages/twenty-front/src/modules/ui/layout/dropdown/components/DropdownMenuInnerSelect.tsx +++ b/packages/twenty-front/src/modules/ui/layout/dropdown/components/DropdownMenuInnerSelect.tsx @@ -4,12 +4,11 @@ import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/Drop import { useCloseDropdown } from '@/ui/layout/dropdown/hooks/useCloseDropdown'; import { styled } from '@linaria/react'; +import { useContext } from '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'; +import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants'; const StyledDropdownMenuInnerSelectDropdownButton = styled.div` align-items: center; @@ -46,7 +45,6 @@ export const DropdownMenuInnerSelect = ({ widthInPixels, }: DropdownMenuInnerSelectProps) => { const { theme } = useContext(ThemeContext); - const { closeDropdown } = useCloseDropdown(); return ( diff --git a/packages/twenty-front/src/modules/ui/layout/expandable-list/components/__stories__/ExpandableList.stories.tsx b/packages/twenty-front/src/modules/ui/layout/expandable-list/components/__stories__/ExpandableList.stories.tsx index 9d66b8765d..1be1e90d05 100644 --- a/packages/twenty-front/src/modules/ui/layout/expandable-list/components/__stories__/ExpandableList.stories.tsx +++ b/packages/twenty-front/src/modules/ui/layout/expandable-list/components/__stories__/ExpandableList.stories.tsx @@ -6,9 +6,8 @@ import { ExpandableList } from '@/ui/layout/expandable-list/components/Expandabl 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'; - +import { MAIN_COLOR_NAMES } from 'twenty-ui/theme'; const StyledContainer = styled.div` padding: ${themeCssVariables.spacing[1]}; width: 300px; diff --git a/packages/twenty-front/src/modules/ui/layout/page-header/components/PageHeaderToggleCommandMenuButton.tsx b/packages/twenty-front/src/modules/ui/layout/page-header/components/PageHeaderToggleCommandMenuButton.tsx index d1d00b2a13..ee6e079cad 100644 --- a/packages/twenty-front/src/modules/ui/layout/page-header/components/PageHeaderToggleCommandMenuButton.tsx +++ b/packages/twenty-front/src/modules/ui/layout/page-header/components/PageHeaderToggleCommandMenuButton.tsx @@ -9,13 +9,11 @@ import { styled } from '@linaria/react'; import { i18n } from '@lingui/core'; import { t } from '@lingui/core/macro'; import { motion } from 'framer-motion'; +import { useContext } from 'react'; 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'; - +import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants'; const StyledButtonWrapper = styled.div<{ alignToTop: boolean }>` align-items: ${({ alignToTop }) => (alignToTop ? 'center' : 'initial')}; display: ${({ alignToTop }) => (alignToTop ? 'flex' : 'block')}; @@ -45,6 +43,7 @@ const AnimatedIcon = ({ isCommandMenuOpened: boolean; }) => { const { theme } = useContext(ThemeContext); + return ( {/* X lines expanding from center */} @@ -99,7 +100,9 @@ const AnimatedIcon = ({ scale: isCommandMenuOpened ? 0 : 1, opacity: isCommandMenuOpened ? 0 : 1, }} - transition={{ duration: theme.animation.duration.fast }} + transition={{ + duration: theme.animation.duration.fast, + }} /> {/* Bottom dot */} @@ -112,13 +115,16 @@ const AnimatedIcon = ({ scale: isCommandMenuOpened ? 0 : 1, opacity: isCommandMenuOpened ? 0 : 1, }} - transition={{ duration: theme.animation.duration.fast }} + transition={{ + duration: theme.animation.duration.fast, + }} /> ); }; export const PageHeaderToggleCommandMenuButton = () => { + const { theme } = useContext(ThemeContext); const { toggleCommandMenu } = useCommandMenu(); const isCommandMenuOpened = useAtomStateValue(isCommandMenuOpenedState); const isNavigationMenuInEditMode = useAtomStateValue( @@ -133,9 +139,6 @@ export const PageHeaderToggleCommandMenuButton = () => { const ariaLabel = isCommandMenuOpened ? t`Close command menu` : t`Open command menu`; - - const { theme } = useContext(ThemeContext); - return (
diff --git a/packages/twenty-front/src/modules/ui/layout/page/components/DefaultLayout.tsx b/packages/twenty-front/src/modules/ui/layout/page/components/DefaultLayout.tsx index 8a3132ebc1..c61d890c79 100644 --- a/packages/twenty-front/src/modules/ui/layout/page/components/DefaultLayout.tsx +++ b/packages/twenty-front/src/modules/ui/layout/page/components/DefaultLayout.tsx @@ -27,9 +27,7 @@ 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'; - +import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants'; const StyledLayout = styled.div` background: ${themeCssVariables.background.noisy}; display: flex; @@ -66,10 +64,10 @@ const StyledMainContainer = styled.div` export const DefaultLayout = () => { const isMobile = useIsMobile(); const isSettingsPage = useIsSettingsPage(); - const { theme } = useContext(ThemeContext); const windowsWidth = useScreenSize().width; const showAuthModal = useShowAuthModal(); const useShowFullScreen = useShowFullscreen(); + const { theme } = useContext(ThemeContext); return ( <> diff --git a/packages/twenty-front/src/modules/ui/layout/page/components/PageHeader.tsx b/packages/twenty-front/src/modules/ui/layout/page/components/PageHeader.tsx index b6c02cdd51..630f1f86ef 100644 --- a/packages/twenty-front/src/modules/ui/layout/page/components/PageHeader.tsx +++ b/packages/twenty-front/src/modules/ui/layout/page/components/PageHeader.tsx @@ -15,8 +15,11 @@ import { OverflowingTextWithTooltip, } from 'twenty-ui/display'; import { LightIconButton } from 'twenty-ui/input'; -import { ThemeContext } from 'twenty-ui/theme'; -import { MOBILE_VIEWPORT, themeCssVariables } from 'twenty-ui/theme-constants'; +import { + MOBILE_VIEWPORT, + ThemeContext, + themeCssVariables, +} from 'twenty-ui/theme-constants'; const StyledTopBarContainer = styled.div<{ isMobile: boolean }>` align-items: center; diff --git a/packages/twenty-front/src/modules/ui/layout/show-page/components/FieldRichTextCard.tsx b/packages/twenty-front/src/modules/ui/layout/show-page/components/FieldRichTextCard.tsx index 308561f38a..71e9607290 100644 --- a/packages/twenty-front/src/modules/ui/layout/show-page/components/FieldRichTextCard.tsx +++ b/packages/twenty-front/src/modules/ui/layout/show-page/components/FieldRichTextCard.tsx @@ -8,8 +8,7 @@ import { lazy, Suspense, useContext } from 'react'; import Skeleton, { SkeletonTheme } from 'react-loading-skeleton'; import { useAtomFamilySelectorValue } from '@/ui/utilities/state/jotai/hooks/useAtomFamilySelectorValue'; import { isDefined } from 'twenty-shared/utils'; -import { ThemeContext } from 'twenty-ui/theme'; -import { themeCssVariables } from 'twenty-ui/theme-constants'; +import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants'; const ActivityRichTextEditor = lazy(() => import('@/activities/components/ActivityRichTextEditor').then((module) => ({ @@ -33,7 +32,6 @@ const StyledSkeletonContainer = styled.div` const LoadingSkeleton = () => { const { theme } = useContext(ThemeContext); - return ( { const { theme } = useContext(ThemeContext); diff --git a/packages/twenty-front/src/modules/ui/layout/table/components/TableSection.tsx b/packages/twenty-front/src/modules/ui/layout/table/components/TableSection.tsx index ab78c9e496..6fb0fda0bf 100644 --- a/packages/twenty-front/src/modules/ui/layout/table/components/TableSection.tsx +++ b/packages/twenty-front/src/modules/ui/layout/table/components/TableSection.tsx @@ -2,8 +2,7 @@ import { styled } from '@linaria/react'; import { type ReactNode, useContext, useState } from 'react'; import { TableBody } from './TableBody'; import { IconChevronDown, IconChevronUp, Label } from 'twenty-ui/display'; -import { ThemeContext } from 'twenty-ui/theme'; -import { themeCssVariables } from 'twenty-ui/theme-constants'; +import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants'; type TableSectionProps = { children: ReactNode; @@ -41,8 +40,8 @@ export const TableSection = ({ isInitiallyExpanded = true, title, }: TableSectionProps) => { - const [isExpanded, setIsExpanded] = useState(isInitiallyExpanded); const { theme } = useContext(ThemeContext); + const [isExpanded, setIsExpanded] = useState(isInitiallyExpanded); const handleToggleSection = () => setIsExpanded((previousIsExpanded) => !previousIsExpanded); diff --git a/packages/twenty-front/src/modules/ui/navigation/bread-crumb/components/MobileBreadcrumb.tsx b/packages/twenty-front/src/modules/ui/navigation/bread-crumb/components/MobileBreadcrumb.tsx index 6f050f93d0..b3586419ac 100644 --- a/packages/twenty-front/src/modules/ui/navigation/bread-crumb/components/MobileBreadcrumb.tsx +++ b/packages/twenty-front/src/modules/ui/navigation/bread-crumb/components/MobileBreadcrumb.tsx @@ -5,8 +5,7 @@ import { isNonEmptyString } from '@sniptt/guards'; import { type ReactNode, useContext } from 'react'; import { Link } from 'react-router-dom'; import { IconChevronLeft } from 'twenty-ui/display'; -import { ThemeContext } from 'twenty-ui/theme'; -import { themeCssVariables } from 'twenty-ui/theme-constants'; +import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants'; export type MobileBreadcrumbProps = { className?: string; @@ -45,7 +44,6 @@ export const MobileBreadcrumb = ({ links, }: MobileBreadcrumbProps) => { const { theme } = useContext(ThemeContext); - const { openSettingsMenu } = useOpenSettingsMenu(); const handleBackToSettingsClick = () => { diff --git a/packages/twenty-front/src/modules/ui/navigation/menu-item/components/MenuItemWithOptionDropdown.tsx b/packages/twenty-front/src/modules/ui/navigation/menu-item/components/MenuItemWithOptionDropdown.tsx index 582c1f9b52..c3607bbfa8 100644 --- a/packages/twenty-front/src/modules/ui/navigation/menu-item/components/MenuItemWithOptionDropdown.tsx +++ b/packages/twenty-front/src/modules/ui/navigation/menu-item/components/MenuItemWithOptionDropdown.tsx @@ -7,7 +7,6 @@ import { type ReactNode, useContext, } from 'react'; -import { ThemeContext } from 'twenty-ui/theme'; import { IconChevronRight, type IconComponent, @@ -20,6 +19,7 @@ import { StyledHoverableMenuItemBase, StyledMenuItemLeftContent, } from 'twenty-ui/navigation'; +import { ThemeContext } from 'twenty-ui/theme-constants'; export type MenuItemIconButton = { Wrapper?: FunctionComponent<{ iconButton: ReactElement }>; @@ -64,7 +64,6 @@ export const MenuItemWithOptionDropdown = ({ dropdownPlacement = 'bottom-end', }: MenuItemWithOptionDropdownProps) => { const { theme } = useContext(ThemeContext); - const handleMenuItemClick = (event: MouseEvent) => { if (!onClick) return; event.preventDefault(); diff --git a/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/MultiWorkspaceDropdown/internal/MultiWorkspaceDropdownClickableComponent.tsx b/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/MultiWorkspaceDropdown/internal/MultiWorkspaceDropdownClickableComponent.tsx index 7f1d91d547..b23b5c80e7 100644 --- a/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/MultiWorkspaceDropdown/internal/MultiWorkspaceDropdownClickableComponent.tsx +++ b/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/MultiWorkspaceDropdown/internal/MultiWorkspaceDropdownClickableComponent.tsx @@ -7,14 +7,13 @@ import { } from '@/ui/navigation/navigation-drawer/components/MultiWorkspaceDropdown/internal/MultiWorkspacesDropdownStyles'; import { currentWorkspaceState } from '@/auth/states/currentWorkspaceState'; import { useAtomStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomStateValue'; -import { useContext } from 'react'; import { isNavigationDrawerExpandedState } from '@/ui/navigation/states/isNavigationDrawerExpanded'; +import { useContext } from 'react'; import { Avatar } from 'twenty-ui/display'; -import { ThemeContext } from 'twenty-ui/theme'; - +import { ThemeContext } from 'twenty-ui/theme-constants'; export const MultiWorkspaceDropdownClickableComponent = () => { - const currentWorkspace = useAtomStateValue(currentWorkspaceState); const { theme } = useContext(ThemeContext); + const currentWorkspace = useAtomStateValue(currentWorkspaceState); const isNavigationDrawerExpanded = useAtomStateValue( isNavigationDrawerExpandedState, diff --git a/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerAnimatedCollapseWrapper.tsx b/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerAnimatedCollapseWrapper.tsx index 5e480784d5..fb758a1317 100644 --- a/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerAnimatedCollapseWrapper.tsx +++ b/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerAnimatedCollapseWrapper.tsx @@ -2,14 +2,13 @@ import { useIsSettingsPage } from '@/navigation/hooks/useIsSettingsPage'; import { isNavigationDrawerExpandedState } from '@/ui/navigation/states/isNavigationDrawerExpanded'; import { useAtomStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomStateValue'; import { styled } from '@linaria/react'; -import { useContext } from 'react'; import { type AnimationControls, motion, type TargetAndTransition, } from 'framer-motion'; -import { ThemeContext } from 'twenty-ui/theme'; - +import { useContext } from 'react'; +import { ThemeContext } from 'twenty-ui/theme-constants'; const StyledAnimatedContainerBase = styled.span` display: block; `; @@ -50,7 +49,9 @@ export const NavigationDrawerAnimatedCollapseWrapper = ({ {children} diff --git a/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerBackButton.tsx b/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerBackButton.tsx index 7a9c5531a9..7708fa7a7a 100644 --- a/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerBackButton.tsx +++ b/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerBackButton.tsx @@ -1,5 +1,4 @@ import { styled } from '@linaria/react'; -import { useContext } from 'react'; import { isNavigationDrawerExpandedState } from '@/ui/navigation/states/isNavigationDrawerExpanded'; import { navigationDrawerExpandedMemorizedState } from '@/ui/navigation/states/navigationDrawerExpandedMemorizedState'; @@ -8,10 +7,10 @@ import { useAtomStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomState import { useSetAtomState } from '@/ui/utilities/state/jotai/hooks/useSetAtomState'; import { useIsWorkspaceActivationStatusEqualsTo } from '@/workspace/hooks/useIsWorkspaceActivationStatusEqualsTo'; import { WorkspaceActivationStatus } from 'twenty-shared/workspace'; +import { useContext } from 'react'; import { IconX } from 'twenty-ui/display'; import { UndecoratedLink } from 'twenty-ui/navigation'; -import { ThemeContext } from 'twenty-ui/theme'; -import { themeCssVariables } from 'twenty-ui/theme-constants'; +import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants'; type NavigationDrawerBackButtonProps = { title: string; diff --git a/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerItem.tsx b/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerItem.tsx index 3d2baf6fc2..959bd3473c 100644 --- a/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerItem.tsx +++ b/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerItem.tsx @@ -25,8 +25,11 @@ import { TooltipDelay, TooltipPosition, } from 'twenty-ui/display'; -import { ThemeContext } from 'twenty-ui/theme'; -import { MOBILE_VIEWPORT, themeCssVariables } from 'twenty-ui/theme-constants'; +import { + MOBILE_VIEWPORT, + ThemeContext, + themeCssVariables, +} from 'twenty-ui/theme-constants'; import { type TriggerEventType, useMouseDownNavigation, diff --git a/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerItemsCollapsableContainer.tsx b/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerItemsCollapsableContainer.tsx index 9dd2dd83f5..0ee407068a 100644 --- a/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerItemsCollapsableContainer.tsx +++ b/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerItemsCollapsableContainer.tsx @@ -2,14 +2,13 @@ import { useIsSettingsPage } from '@/navigation/hooks/useIsSettingsPage'; import { isNavigationDrawerExpandedState } from '@/ui/navigation/states/isNavigationDrawerExpanded'; import { useAtomStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomStateValue'; import { styled } from '@linaria/react'; -import { useContext, type ReactNode } from 'react'; +import { type ReactNode, useContext } from 'react'; import { type AnimationControls, motion, type TargetAndTransition, } from 'framer-motion'; -import { ThemeContext } from 'twenty-ui/theme'; - +import { ThemeContext } from 'twenty-ui/theme-constants'; const StyledAnimationGroupContainerBase = styled.div``; const StyledAnimationGroupContainer = motion.create( @@ -52,7 +51,9 @@ export const NavigationDrawerItemsCollapsableContainer = ({ {children} diff --git a/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerSectionTitleSkeletonLoader.tsx b/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerSectionTitleSkeletonLoader.tsx index 051caf7dd0..2680b77d40 100644 --- a/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerSectionTitleSkeletonLoader.tsx +++ b/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerSectionTitleSkeletonLoader.tsx @@ -2,8 +2,7 @@ import { SKELETON_LOADER_HEIGHT_SIZES } from '@/activities/components/SkeletonLo import { styled } from '@linaria/react'; import { useContext } from 'react'; import Skeleton, { SkeletonTheme } from 'react-loading-skeleton'; -import { ThemeContext } from 'twenty-ui/theme'; -import { themeCssVariables } from 'twenty-ui/theme-constants'; +import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants'; const StyledSkeletonTitle = styled.div` margin-bottom: ${themeCssVariables.spacing[2]}; diff --git a/packages/twenty-front/src/modules/ui/navigation/step-bar/components/Step.tsx b/packages/twenty-front/src/modules/ui/navigation/step-bar/components/Step.tsx index c4278dbf8f..2863c17557 100644 --- a/packages/twenty-front/src/modules/ui/navigation/step-bar/components/Step.tsx +++ b/packages/twenty-front/src/modules/ui/navigation/step-bar/components/Step.tsx @@ -1,11 +1,14 @@ import { styled } from '@linaria/react'; -import { useContext } from 'react'; import { motion } from 'framer-motion'; +import { useContext } from 'react'; import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile'; import { AnimatedCheckmark } from 'twenty-ui/display'; -import { ThemeContext } from 'twenty-ui/theme'; -import { MOBILE_VIEWPORT, themeCssVariables } from 'twenty-ui/theme-constants'; +import { + MOBILE_VIEWPORT, + ThemeContext, + themeCssVariables, +} from 'twenty-ui/theme-constants'; const StyledContainer = styled.div<{ isLast: boolean }>` align-items: center; @@ -82,8 +85,8 @@ export const Step = ({ children, activeStep = 0, }: StepProps) => { - const { theme } = useContext(ThemeContext); const isMobile = useIsMobile(); + const { theme } = useContext(ThemeContext); const variantsLine = { previous: { diff --git a/packages/twenty-front/src/modules/ui/theme/components/BaseThemeProvider.tsx b/packages/twenty-front/src/modules/ui/theme/components/BaseThemeProvider.tsx index cf469d1494..8b2deb044d 100644 --- a/packages/twenty-front/src/modules/ui/theme/components/BaseThemeProvider.tsx +++ b/packages/twenty-front/src/modules/ui/theme/components/BaseThemeProvider.tsx @@ -4,7 +4,7 @@ import { useSystemColorScheme } from '@/ui/theme/hooks/useSystemColorScheme'; import { persistedColorSchemeState } from '@/ui/theme/states/persistedColorSchemeState'; import { useAtomState } from '@/ui/utilities/state/jotai/hooks/useAtomState'; import { type ColorScheme } from 'twenty-ui/input'; -import { THEME_DARK, THEME_LIGHT, ThemeContextProvider } from 'twenty-ui/theme'; +import { ThemeProvider } from 'twenty-ui/theme-constants'; type BaseThemeProviderProps = { children: JSX.Element | JSX.Element[]; @@ -24,14 +24,13 @@ export const BaseThemeProvider = ({ children }: BaseThemeProviderProps) => { ? systemColorScheme : persistedColorScheme; - document.documentElement.className = - effectiveColorScheme === 'Dark' ? 'dark' : 'light'; - - const theme = effectiveColorScheme === 'Dark' ? THEME_DARK : THEME_LIGHT; - return ( - {children} + + {children} + ); }; diff --git a/packages/twenty-front/src/modules/views/components/SortOrFilterChip.tsx b/packages/twenty-front/src/modules/views/components/SortOrFilterChip.tsx index 4be3a68d90..87486b2ae8 100644 --- a/packages/twenty-front/src/modules/views/components/SortOrFilterChip.tsx +++ b/packages/twenty-front/src/modules/views/components/SortOrFilterChip.tsx @@ -1,8 +1,7 @@ import { styled } from '@linaria/react'; import { useContext } from 'react'; import { type IconComponent, IconX } from 'twenty-ui/display'; -import { ThemeContext } from 'twenty-ui/theme'; -import { themeCssVariables } from 'twenty-ui/theme-constants'; +import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants'; const StyledChip = styled.div<{ variant: SortOrFilterChipVariant }>` align-items: center; diff --git a/packages/twenty-front/src/modules/views/components/ViewBarSkeletonLoader.tsx b/packages/twenty-front/src/modules/views/components/ViewBarSkeletonLoader.tsx index eba2279312..d1ea91af3a 100644 --- a/packages/twenty-front/src/modules/views/components/ViewBarSkeletonLoader.tsx +++ b/packages/twenty-front/src/modules/views/components/ViewBarSkeletonLoader.tsx @@ -1,7 +1,7 @@ import { SKELETON_LOADER_HEIGHT_SIZES } from '@/activities/components/SkeletonLoader'; import { useContext } from 'react'; import Skeleton, { SkeletonTheme } from 'react-loading-skeleton'; -import { ThemeContext } from 'twenty-ui/theme'; +import { ThemeContext } from 'twenty-ui/theme-constants'; export const ViewBarSkeletonLoader = () => { const { theme } = useContext(ThemeContext); diff --git a/packages/twenty-front/src/modules/views/view-picker/components/ViewPickerDropdown.tsx b/packages/twenty-front/src/modules/views/view-picker/components/ViewPickerDropdown.tsx index 6945b5345f..4bb391fa81 100644 --- a/packages/twenty-front/src/modules/views/view-picker/components/ViewPickerDropdown.tsx +++ b/packages/twenty-front/src/modules/views/view-picker/components/ViewPickerDropdown.tsx @@ -1,7 +1,5 @@ import { styled } from '@linaria/react'; import { t } from '@lingui/core/macro'; -import { useContext } from 'react'; - import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown'; import { StyledDropdownButtonContainer } from '@/ui/layout/dropdown/components/StyledDropdownButtonContainer'; import { isDropdownOpenComponentState } from '@/ui/layout/dropdown/states/isDropdownOpenComponentState'; @@ -23,8 +21,12 @@ import { OverflowingTextWithTooltip, useIcons, } from 'twenty-ui/display'; -import { ThemeContext } from 'twenty-ui/theme'; -import { MOBILE_VIEWPORT, themeCssVariables } from 'twenty-ui/theme-constants'; +import { useContext } from 'react'; +import { + MOBILE_VIEWPORT, + ThemeContext, + themeCssVariables, +} from 'twenty-ui/theme-constants'; const StyledIconContainer = styled.span` display: flex; @@ -55,7 +57,6 @@ const StyledViewName = styled.span` export const ViewPickerDropdown = () => { const { theme } = useContext(ThemeContext); - const { currentView } = useGetCurrentViewOnly(); const { updateViewFromCurrentState } = useUpdateViewFromCurrentState(); diff --git a/packages/twenty-front/src/modules/workflow/components/WorkflowStepExecutionResult.tsx b/packages/twenty-front/src/modules/workflow/components/WorkflowStepExecutionResult.tsx index 5c4d0e8b5e..0737cd9c42 100644 --- a/packages/twenty-front/src/modules/workflow/components/WorkflowStepExecutionResult.tsx +++ b/packages/twenty-front/src/modules/workflow/components/WorkflowStepExecutionResult.tsx @@ -8,10 +8,8 @@ import { } from 'twenty-ui/display'; import { CodeEditor, CoreEditorHeader } from 'twenty-ui/input'; import { AnimatedCircleLoading } from 'twenty-ui/utilities'; -import { themeCssVariables } from 'twenty-ui/theme-constants'; +import { themeCssVariables, ThemeContext } from 'twenty-ui/theme-constants'; import { useContext } from 'react'; -import { ThemeContext } from 'twenty-ui/theme'; - const StyledContainer = styled.div` display: flex; flex-direction: column; diff --git a/packages/twenty-front/src/modules/workflow/workflow-diagram/components/WorkflowDiagramCanvasBase.tsx b/packages/twenty-front/src/modules/workflow/workflow-diagram/components/WorkflowDiagramCanvasBase.tsx index 9154754945..fccc1c3a7b 100644 --- a/packages/twenty-front/src/modules/workflow/workflow-diagram/components/WorkflowDiagramCanvasBase.tsx +++ b/packages/twenty-front/src/modules/workflow/workflow-diagram/components/WorkflowDiagramCanvasBase.tsx @@ -63,9 +63,7 @@ import { useAtomStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomState import { isDefined } from 'twenty-shared/utils'; import { Tag, type TagColor } from 'twenty-ui/components'; import { useStore } from 'jotai'; -import { themeCssVariables } from 'twenty-ui/theme-constants'; -import { ThemeContext } from 'twenty-ui/theme'; - +import { themeCssVariables, ThemeContext } from 'twenty-ui/theme-constants'; const StyledResetReactflowStyles = styled.div` height: 100%; width: 100%; @@ -166,9 +164,8 @@ export const WorkflowDiagramCanvasBase = ({ event: MouseEvent | React.MouseEvent; }) => void; }) => { - const store = useStore(); const { theme } = useContext(ThemeContext); - + const store = useStore(); const reactflow = useReactFlow(); const workflowDiagram = useAtomComponentStateValue( diff --git a/packages/twenty-front/src/modules/workflow/workflow-diagram/components/WorkflowDiagramConnector.tsx b/packages/twenty-front/src/modules/workflow/workflow-diagram/components/WorkflowDiagramConnector.tsx index dd418456dd..683b539a70 100644 --- a/packages/twenty-front/src/modules/workflow/workflow-diagram/components/WorkflowDiagramConnector.tsx +++ b/packages/twenty-front/src/modules/workflow/workflow-diagram/components/WorkflowDiagramConnector.tsx @@ -1,9 +1,7 @@ +import { ThemeContext } from 'twenty-ui/theme-constants'; import { useContext } from 'react'; -import { ThemeContext } from 'twenty-ui/theme'; - export const WorkflowDiagramConnector = () => { const { theme } = useContext(ThemeContext); - return ( { const { theme } = useContext(ThemeContext); - return ( { const { theme } = useContext(ThemeContext); - return ( { + const { theme } = useContext(ThemeContext); const { screenToFlowPosition } = useReactFlow(); const workflowDiagramScreenToFlowPosition = (position?: { @@ -14,7 +15,7 @@ export const useWorkflowDiagramScreenToFlowPosition = () => { } const visibleRightDrawerWidth = Number( - THEME_COMMON.rightDrawerWidth.replace('px', ''), + theme.rightDrawerWidth.replace('px', ''), ); const flowPosition = screenToFlowPosition(position); diff --git a/packages/twenty-front/src/modules/workflow/workflow-diagram/workflow-edges/components/WorkflowDiagramBaseEdge.tsx b/packages/twenty-front/src/modules/workflow/workflow-diagram/workflow-edges/components/WorkflowDiagramBaseEdge.tsx index 3e32b58766..435ecae8b2 100644 --- a/packages/twenty-front/src/modules/workflow/workflow-diagram/workflow-edges/components/WorkflowDiagramBaseEdge.tsx +++ b/packages/twenty-front/src/modules/workflow/workflow-diagram/workflow-edges/components/WorkflowDiagramBaseEdge.tsx @@ -1,8 +1,8 @@ import { useEdgeState } from '@/workflow/workflow-diagram/workflow-edges/hooks/useEdgeState'; import { type WorkflowDiagramEdgeComponentProps } from '@/workflow/workflow-diagram/workflow-edges/types/WorkflowDiagramEdgeComponentProps'; import { BaseEdge } from '@xyflow/react'; +import { ThemeContext } from 'twenty-ui/theme-constants'; import { useContext } from 'react'; -import { ThemeContext } from 'twenty-ui/theme'; type WorkflowDiagramBaseEdgeProps = Pick< WorkflowDiagramEdgeComponentProps, @@ -26,7 +26,6 @@ export const WorkflowDiagramBaseEdge = ({ path, }: WorkflowDiagramBaseEdgeProps) => { const { theme } = useContext(ThemeContext); - const { isEdgeSelected, isEdgeHovered } = useEdgeState(); const selected = isEdgeSelected({ diff --git a/packages/twenty-front/src/modules/workflow/workflow-diagram/workflow-edges/components/WorkflowDiagramBlankEdge.tsx b/packages/twenty-front/src/modules/workflow/workflow-diagram/workflow-edges/components/WorkflowDiagramBlankEdge.tsx index fe832db5ca..c3a2616e64 100644 --- a/packages/twenty-front/src/modules/workflow/workflow-diagram/workflow-edges/components/WorkflowDiagramBlankEdge.tsx +++ b/packages/twenty-front/src/modules/workflow/workflow-diagram/workflow-edges/components/WorkflowDiagramBlankEdge.tsx @@ -1,8 +1,8 @@ import { type WorkflowDiagramEdge } from '@/workflow/workflow-diagram/types/WorkflowDiagram'; import { getEdgePath } from '@/workflow/workflow-diagram/workflow-edges/utils/getEdgePath'; import { BaseEdge, type EdgeProps } from '@xyflow/react'; +import { ThemeContext } from 'twenty-ui/theme-constants'; import { useContext } from 'react'; -import { ThemeContext } from 'twenty-ui/theme'; type WorkflowDiagramBlankEdgeProps = EdgeProps; @@ -17,7 +17,6 @@ export const WorkflowDiagramBlankEdge = ({ targetPosition, }: WorkflowDiagramBlankEdgeProps) => { const { theme } = useContext(ThemeContext); - const { segments } = getEdgePath({ sourceX, sourceY, @@ -37,7 +36,9 @@ export const WorkflowDiagramBlankEdge = ({ markerStart={segment.markerStart} markerEnd={segment.markerEnd} path={segment.path} - style={{ stroke: theme.border.color.strong }} + style={{ + stroke: theme.border.color.strong, + }} /> ))} diff --git a/packages/twenty-front/src/modules/workflow/workflow-diagram/workflow-edges/components/WorkflowDiagramConnection.tsx b/packages/twenty-front/src/modules/workflow/workflow-diagram/workflow-edges/components/WorkflowDiagramConnection.tsx index b90ceac961..432c6632bc 100644 --- a/packages/twenty-front/src/modules/workflow/workflow-diagram/workflow-edges/components/WorkflowDiagramConnection.tsx +++ b/packages/twenty-front/src/modules/workflow/workflow-diagram/workflow-edges/components/WorkflowDiagramConnection.tsx @@ -3,8 +3,8 @@ import { getBezierPath, } from '@xyflow/react'; import { EDGE_BRANCH_ARROW_MARKER } from '@/workflow/workflow-diagram/workflow-edges/constants/EdgeBranchArrowMarker'; +import { ThemeContext } from 'twenty-ui/theme-constants'; import { useContext } from 'react'; -import { ThemeContext } from 'twenty-ui/theme'; type WorkflowDiagramConnectionProps = ConnectionLineComponentProps; @@ -15,7 +15,6 @@ export const WorkflowDiagramConnection = ({ toY, }: WorkflowDiagramConnectionProps) => { const { theme } = useContext(ThemeContext); - const [path] = getBezierPath({ sourceX: fromX, sourceY: fromY + 4, diff --git a/packages/twenty-front/src/modules/workflow/workflow-diagram/workflow-edges/components/WorkflowDiagramCustomMarkers.tsx b/packages/twenty-front/src/modules/workflow/workflow-diagram/workflow-edges/components/WorkflowDiagramCustomMarkers.tsx index f6a8f6c22a..2529e225b7 100644 --- a/packages/twenty-front/src/modules/workflow/workflow-diagram/workflow-edges/components/WorkflowDiagramCustomMarkers.tsx +++ b/packages/twenty-front/src/modules/workflow/workflow-diagram/workflow-edges/components/WorkflowDiagramCustomMarkers.tsx @@ -1,10 +1,9 @@ -import { useContext } from 'react'; import { EDGE_BRANCH_ARROW_MARKER } from '@/workflow/workflow-diagram/workflow-edges/constants/EdgeBranchArrowMarker'; -import { ThemeContext } from 'twenty-ui/theme'; +import { ThemeContext } from 'twenty-ui/theme-constants'; +import { useContext } from 'react'; export const WorkflowDiagramCustomMarkers = () => { const { theme } = useContext(ThemeContext); - return ( diff --git a/packages/twenty-front/src/modules/workflow/workflow-diagram/workflow-edges/components/WorkflowDiagramDefaultEdgeReadonly.tsx b/packages/twenty-front/src/modules/workflow/workflow-diagram/workflow-edges/components/WorkflowDiagramDefaultEdgeReadonly.tsx index 7267c54cf9..522f831637 100644 --- a/packages/twenty-front/src/modules/workflow/workflow-diagram/workflow-edges/components/WorkflowDiagramDefaultEdgeReadonly.tsx +++ b/packages/twenty-front/src/modules/workflow/workflow-diagram/workflow-edges/components/WorkflowDiagramDefaultEdgeReadonly.tsx @@ -5,8 +5,8 @@ import { getEdgePath } from '@/workflow/workflow-diagram/workflow-edges/utils/ge import { i18n } from '@lingui/core'; import { BaseEdge, EdgeLabelRenderer } from '@xyflow/react'; import { isDefined } from 'twenty-shared/utils'; +import { ThemeContext } from 'twenty-ui/theme-constants'; import { useContext } from 'react'; -import { ThemeContext } from 'twenty-ui/theme'; type WorkflowDiagramDefaultEdgeReadonlyProps = WorkflowDiagramEdgeComponentProps; @@ -23,7 +23,6 @@ export const WorkflowDiagramDefaultEdgeReadonly = ({ data, }: WorkflowDiagramDefaultEdgeReadonlyProps) => { const { theme } = useContext(ThemeContext); - const { segments, overlayPosition: [labelX, labelY], @@ -47,7 +46,9 @@ export const WorkflowDiagramDefaultEdgeReadonly = ({ markerStart={segment.markerStart} markerEnd={segment.markerEnd} path={segment.path} - style={{ stroke: theme.border.color.strong }} + style={{ + stroke: theme.border.color.strong, + }} /> ))} diff --git a/packages/twenty-front/src/modules/workflow/workflow-diagram/workflow-nodes/components/WorkflowDiagramStepNodeIcon.tsx b/packages/twenty-front/src/modules/workflow/workflow-diagram/workflow-nodes/components/WorkflowDiagramStepNodeIcon.tsx index 6e332b2574..d28e86c928 100644 --- a/packages/twenty-front/src/modules/workflow/workflow-diagram/workflow-nodes/components/WorkflowDiagramStepNodeIcon.tsx +++ b/packages/twenty-front/src/modules/workflow/workflow-diagram/workflow-nodes/components/WorkflowDiagramStepNodeIcon.tsx @@ -2,8 +2,8 @@ import { type WorkflowDiagramStepNodeData } from '@/workflow/workflow-diagram/ty import { getWorkflowNodeIconKey } from '@/workflow/workflow-diagram/utils/getWorkflowNodeIconKey'; import { assertUnreachable } from 'twenty-shared/utils'; import { useIcons } from 'twenty-ui/display'; +import { ThemeContext } from 'twenty-ui/theme-constants'; import { useContext } from 'react'; -import { ThemeContext } from 'twenty-ui/theme'; export const WorkflowDiagramStepNodeIcon = ({ data, diff --git a/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/ai-agent-action/components/WorkflowAiAgentPermissionsFlagRow.tsx b/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/ai-agent-action/components/WorkflowAiAgentPermissionsFlagRow.tsx index 2fa3678321..9f6c9fb680 100644 --- a/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/ai-agent-action/components/WorkflowAiAgentPermissionsFlagRow.tsx +++ b/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/ai-agent-action/components/WorkflowAiAgentPermissionsFlagRow.tsx @@ -8,9 +8,8 @@ import { StyledRowLeftContent, StyledText, } from './WorkflowAiAgentPermissionsStyles'; +import { ThemeContext } from 'twenty-ui/theme-constants'; import { useContext } from 'react'; -import { ThemeContext } from 'twenty-ui/theme'; - type WorkflowAiAgentPermissionsFlagRowProps = { permission: SettingsRolePermissionsSettingPermission; isEnabled: boolean; diff --git a/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/ai-agent-action/components/WorkflowAiAgentPermissionsObjectRow.tsx b/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/ai-agent-action/components/WorkflowAiAgentPermissionsObjectRow.tsx index 9d9e14cca8..96ab5dc6fd 100644 --- a/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/ai-agent-action/components/WorkflowAiAgentPermissionsObjectRow.tsx +++ b/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/ai-agent-action/components/WorkflowAiAgentPermissionsObjectRow.tsx @@ -6,9 +6,8 @@ import { StyledRowLeftContent, StyledText, } from './WorkflowAiAgentPermissionsStyles'; +import { ThemeContext } from 'twenty-ui/theme-constants'; import { useContext } from 'react'; -import { ThemeContext } from 'twenty-ui/theme'; - type WorkflowAiAgentPermissionsObjectRowProps = { objectMetadata: { id: string; diff --git a/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/ai-agent-action/components/WorkflowOutputSchemaBuilder.tsx b/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/ai-agent-action/components/WorkflowOutputSchemaBuilder.tsx index a2b170fd34..ce8faecee0 100644 --- a/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/ai-agent-action/components/WorkflowOutputSchemaBuilder.tsx +++ b/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/ai-agent-action/components/WorkflowOutputSchemaBuilder.tsx @@ -9,10 +9,8 @@ import { IconPlus, IconTrash } from 'twenty-ui/display'; import { LightIconButton } from 'twenty-ui/input'; import { v4 } from 'uuid'; import { WorkflowOutputFieldTypeSelector } from './WorkflowOutputFieldTypeSelector'; -import { themeCssVariables } from 'twenty-ui/theme-constants'; +import { themeCssVariables, ThemeContext } from 'twenty-ui/theme-constants'; import { useContext } from 'react'; -import { ThemeContext } from 'twenty-ui/theme'; - type WorkflowOutputSchemaBuilderProps = { fields: OutputSchemaField[]; onChange: (fields: OutputSchemaField[]) => void; diff --git a/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/form-action/components/WorkflowEditActionFormBuilder.tsx b/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/form-action/components/WorkflowEditActionFormBuilder.tsx index 8645fd3eac..c2f2d29740 100644 --- a/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/form-action/components/WorkflowEditActionFormBuilder.tsx +++ b/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/form-action/components/WorkflowEditActionFormBuilder.tsx @@ -18,7 +18,7 @@ import { styled } from '@linaria/react'; import { type OnDragEndResponder } from '@hello-pangea/dnd'; import { useLingui } from '@lingui/react/macro'; import { isNonEmptyString } from '@sniptt/guards'; -import { useEffect, useState } from 'react'; +import { useContext, useEffect, useState } from 'react'; import { FieldMetadataType } from 'twenty-shared/types'; import { isDefined } from 'twenty-shared/utils'; import { @@ -32,7 +32,7 @@ import { import { LightIconButton } from 'twenty-ui/input'; import { useDebouncedCallback } from 'use-debounce'; import { v4 } from 'uuid'; -import { ICON_SIZES, themeCssVariables } from 'twenty-ui/theme-constants'; +import { themeCssVariables, ThemeContext } from 'twenty-ui/theme-constants'; export type WorkflowEditActionFormBuilderProps = { triggerType: WorkflowTriggerType | undefined; @@ -149,6 +149,7 @@ export const WorkflowEditActionFormBuilder = ({ actionOptions, }: WorkflowEditActionFormBuilderProps) => { const { t } = useLingui(); + const { theme } = useContext(ThemeContext); const [formData, setFormData] = useState(action.settings.input); @@ -328,7 +329,7 @@ export const WorkflowEditActionFormBuilder = ({ {field.type === 'RECORD' && ( - + {t`Add Field`} diff --git a/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/form-action/components/WorkflowEditActionFormFieldSettings.tsx b/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/form-action/components/WorkflowEditActionFormFieldSettings.tsx index 32e7af8a3e..bf7320ca7d 100644 --- a/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/form-action/components/WorkflowEditActionFormFieldSettings.tsx +++ b/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/form-action/components/WorkflowEditActionFormFieldSettings.tsx @@ -10,10 +10,8 @@ import { styled } from '@linaria/react'; import { t } from '@lingui/core/macro'; import { IconSettingsAutomation, IconX } from 'twenty-ui/display'; import { LightIconButton } from 'twenty-ui/input'; -import { themeCssVariables } from 'twenty-ui/theme-constants'; +import { themeCssVariables, ThemeContext } from 'twenty-ui/theme-constants'; import { useContext } from 'react'; -import { ThemeContext } from 'twenty-ui/theme'; - type WorkflowEditActionFormFieldSettingsProps = { field: WorkflowFormActionField; onChange: (field: WorkflowFormActionField) => void; diff --git a/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/http-request-action/components/WorkflowEditActionHttpRequest.tsx b/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/http-request-action/components/WorkflowEditActionHttpRequest.tsx index 514121b588..08e14d8343 100644 --- a/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/http-request-action/components/WorkflowEditActionHttpRequest.tsx +++ b/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/http-request-action/components/WorkflowEditActionHttpRequest.tsx @@ -30,9 +30,7 @@ import { BodyInput } from './BodyInput'; import { HttpRequestExecutionResult } from './HttpRequestExecutionResult'; import { HttpRequestTestVariableInput } from './HttpRequestTestVariableInput'; import { KeyValuePairInput } from './KeyValuePairInput'; -import { themeCssVariables } from 'twenty-ui/theme-constants'; -import { ThemeContext } from 'twenty-ui/theme'; - +import { themeCssVariables, ThemeContext } from 'twenty-ui/theme-constants'; type WorkflowEditActionHttpRequestProps = { action: WorkflowHttpRequestAction; actionOptions: { @@ -153,7 +151,9 @@ export const WorkflowEditActionHttpRequest = ({ value={formData.method} onChange={(value) => handleFieldChange('method', value)} disabled={actionOptions.readonly} - dropdownOffset={{ y: parseInt(theme.spacing(1), 10) }} + dropdownOffset={{ + y: parseInt(theme.spacing[1], 10), + }} dropdownWidth={GenericDropdownContentWidth.ExtraLarge} /> diff --git a/packages/twenty-front/src/modules/workflow/workflow-trigger/components/WorkflowEditTriggerWebhookForm.tsx b/packages/twenty-front/src/modules/workflow/workflow-trigger/components/WorkflowEditTriggerWebhookForm.tsx index 873355f85f..ede9ca5129 100644 --- a/packages/twenty-front/src/modules/workflow/workflow-trigger/components/WorkflowEditTriggerWebhookForm.tsx +++ b/packages/twenty-front/src/modules/workflow/workflow-trigger/components/WorkflowEditTriggerWebhookForm.tsx @@ -24,7 +24,7 @@ import { IconCopy } from 'twenty-ui/display'; import { useDebouncedCallback } from 'use-debounce'; import { REACT_APP_SERVER_BASE_URL } from '~/config'; import { useCopyToClipboard } from '~/hooks/useCopyToClipboard'; -import { ThemeContext } from 'twenty-ui/theme'; +import { ThemeContext } from 'twenty-ui/theme-constants'; type WorkflowEditTriggerWebhookFormProps = { trigger: WorkflowWebhookTrigger; diff --git a/packages/twenty-front/src/modules/workflow/workflow-variables/components/WorkflowVariablesDropdown.tsx b/packages/twenty-front/src/modules/workflow/workflow-variables/components/WorkflowVariablesDropdown.tsx index fd319e283c..084f113649 100644 --- a/packages/twenty-front/src/modules/workflow/workflow-variables/components/WorkflowVariablesDropdown.tsx +++ b/packages/twenty-front/src/modules/workflow/workflow-variables/components/WorkflowVariablesDropdown.tsx @@ -14,9 +14,7 @@ import { styled } from '@linaria/react'; import { useContext, useState } from 'react'; import { isDefined } from 'twenty-shared/utils'; import { IconVariablePlus } from 'twenty-ui/display'; -import { themeCssVariables } from 'twenty-ui/theme-constants'; -import { ThemeContext } from 'twenty-ui/theme'; - +import { themeCssVariables, ThemeContext } from 'twenty-ui/theme-constants'; const StyledDropdownVariableButtonContainer = styled( StyledDropdownButtonContainer, )<{ transparentBackground?: boolean; disabled?: boolean }>` @@ -52,7 +50,6 @@ export const WorkflowVariablesDropdown = ({ clickableComponent?: React.ReactNode; }) => { const { theme } = useContext(ThemeContext); - const dropdownId = `${SEARCH_VARIABLES_DROPDOWN_ID}-${instanceId}`; const isDropdownOpen = useAtomComponentStateValue( isDropdownOpenComponentState, @@ -140,7 +137,7 @@ export const WorkflowVariablesDropdown = ({ dropdownPlacement="bottom-end" dropdownOffset={{ x: 2, - y: parseInt(theme.spacing(multiline ? 11 : 1), 10), + y: parseInt(theme.spacing[multiline ? 11 : 1], 10), }} /> ); diff --git a/packages/twenty-front/src/pages/auth/PasswordReset.tsx b/packages/twenty-front/src/pages/auth/PasswordReset.tsx index 1291a749f5..773d584672 100644 --- a/packages/twenty-front/src/pages/auth/PasswordReset.tsx +++ b/packages/twenty-front/src/pages/auth/PasswordReset.tsx @@ -29,8 +29,7 @@ import { useAtomStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomState import { useSetAtomState } from '@/ui/utilities/state/jotai/hooks/useSetAtomState'; import { AppPath } from 'twenty-shared/types'; import { MainButton } from 'twenty-ui/input'; -import { ThemeContext } from 'twenty-ui/theme'; -import { themeCssVariables } from 'twenty-ui/theme-constants'; +import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants'; import { AnimatedEaseIn } from 'twenty-ui/utilities'; import { z } from 'zod'; import { @@ -87,6 +86,7 @@ const StyledMainButton = styled(MainButton)` `; export const PasswordReset = () => { + const { theme } = useContext(ThemeContext); const { t } = useLingui(); const { enqueueErrorSnackBar, enqueueSuccessSnackBar } = useSnackBar(); @@ -99,9 +99,6 @@ export const PasswordReset = () => { const [email, setEmail] = useState(''); const [isTokenValid, setIsTokenValid] = useState(false); const [isTargetUserPasswordSet, setIsTargetUserPasswordSet] = useState(false); - - const { theme } = useContext(ThemeContext); - const passwordResetToken = useParams().passwordResetToken; const isLoggedIn = useIsLogged(); @@ -230,7 +227,9 @@ export const PasswordReset = () => { ) : ( diff --git a/packages/twenty-front/src/pages/onboarding/BookCall.tsx b/packages/twenty-front/src/pages/onboarding/BookCall.tsx index 4eb043cc61..e36cc419ca 100644 --- a/packages/twenty-front/src/pages/onboarding/BookCall.tsx +++ b/packages/twenty-front/src/pages/onboarding/BookCall.tsx @@ -12,7 +12,7 @@ import { useAtomStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomState import { AppPath } from 'twenty-shared/types'; import { IconChevronLeft, IconChevronRightPipe } from 'twenty-ui/display'; import { LightButton } from 'twenty-ui/input'; -import { ThemeContext } from 'twenty-ui/theme'; +import { ThemeContext } from 'twenty-ui/theme-constants'; import { useIsMobile } from 'twenty-ui/utilities'; import { OnboardingStatus, @@ -20,8 +20,9 @@ import { } from '~/generated-metadata/graphql'; export const BookCall = () => { + const { colorScheme } = useContext(ThemeContext); + const { t } = useLingui(); - const { theme } = useContext(ThemeContext); const calendarBookingPageId = useAtomStateValue(calendarBookingPageIdState); const setNextOnboardingStatus = useSetNextOnboardingStatus(); const currentUser = useAtomStateValue(currentUserState); @@ -52,7 +53,7 @@ export const BookCall = () => { calLink={calendarBookingPageId ?? ''} config={{ layout: 'month_view', - theme: theme.name === 'light' ? 'light' : 'dark', + theme: colorScheme === 'light' ? 'light' : 'dark', email: currentUser?.email ?? '', name: `${currentUser?.firstName} ${currentUser?.lastName}`, }} diff --git a/packages/twenty-front/src/pages/onboarding/SyncEmails.tsx b/packages/twenty-front/src/pages/onboarding/SyncEmails.tsx index 07ce8713c7..ba460aa77b 100644 --- a/packages/twenty-front/src/pages/onboarding/SyncEmails.tsx +++ b/packages/twenty-front/src/pages/onboarding/SyncEmails.tsx @@ -22,8 +22,7 @@ import { AppPath, ConnectedAccountProvider } from 'twenty-shared/types'; import { IconGoogle, IconMicrosoft } from 'twenty-ui/display'; import { MainButton } from 'twenty-ui/input'; import { ClickToActionLink } from 'twenty-ui/navigation'; -import { ThemeContext } from 'twenty-ui/theme'; -import { themeCssVariables } from 'twenty-ui/theme-constants'; +import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants'; import { CalendarChannelVisibility, MessageChannelVisibility, diff --git a/packages/twenty-front/src/pages/settings/ai/SettingsSkillForm.tsx b/packages/twenty-front/src/pages/settings/ai/SettingsSkillForm.tsx index 1262cb0967..e94f399ce9 100644 --- a/packages/twenty-front/src/pages/settings/ai/SettingsSkillForm.tsx +++ b/packages/twenty-front/src/pages/settings/ai/SettingsSkillForm.tsx @@ -29,8 +29,7 @@ import { } from 'twenty-ui/display'; import { Button } from 'twenty-ui/input'; import { Card, Section } from 'twenty-ui/layout'; -import { ThemeContext } from 'twenty-ui/theme'; -import { themeCssVariables } from 'twenty-ui/theme-constants'; +import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants'; import { useActivateSkillMutation, useCreateSkillMutation, @@ -105,11 +104,11 @@ type SkillFormValues = { const DELETE_SKILL_MODAL_ID = 'delete-skill-modal'; export const SettingsSkillForm = ({ mode }: { mode: 'create' | 'edit' }) => { + const { theme } = useContext(ThemeContext); const { skillId = '' } = useParams<{ skillId: string }>(); const navigate = useNavigateSettings(); const navigateApp = useNavigateApp(); const { enqueueErrorSnackBar } = useSnackBar(); - const { theme } = useContext(ThemeContext); const [isSubmitting, setIsSubmitting] = useState(false); const [isReadonlyMode, setIsReadonlyMode] = useState(false); const [originalFormValues, setOriginalFormValues] = diff --git a/packages/twenty-front/src/pages/settings/ai/components/SettingsAIAgentTableRow.tsx b/packages/twenty-front/src/pages/settings/ai/components/SettingsAIAgentTableRow.tsx index d00ffc93c0..907f117e7e 100644 --- a/packages/twenty-front/src/pages/settings/ai/components/SettingsAIAgentTableRow.tsx +++ b/packages/twenty-front/src/pages/settings/ai/components/SettingsAIAgentTableRow.tsx @@ -5,8 +5,7 @@ import { SettingsItemTypeTag } from '@/settings/components/SettingsItemTypeTag'; import { TableCell } from '@/ui/layout/table/components/TableCell'; import { TableRow } from '@/ui/layout/table/components/TableRow'; import { OverflowingTextWithTooltip, useIcons } from 'twenty-ui/display'; -import { ThemeContext } from 'twenty-ui/theme'; -import { themeCssVariables } from 'twenty-ui/theme-constants'; +import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants'; import { type Agent } from '~/generated-metadata/graphql'; export type SettingsAIAgentTableRowProps = { diff --git a/packages/twenty-front/src/pages/settings/ai/components/SettingsAIAgentsTable.tsx b/packages/twenty-front/src/pages/settings/ai/components/SettingsAIAgentsTable.tsx index 70712adb33..afb256535a 100644 --- a/packages/twenty-front/src/pages/settings/ai/components/SettingsAIAgentsTable.tsx +++ b/packages/twenty-front/src/pages/settings/ai/components/SettingsAIAgentsTable.tsx @@ -20,8 +20,7 @@ import { } from 'twenty-ui/display'; import { Button } from 'twenty-ui/input'; import { MenuItemToggle } from 'twenty-ui/navigation'; -import { ThemeContext } from 'twenty-ui/theme'; -import { themeCssVariables } from 'twenty-ui/theme-constants'; +import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants'; import { SETTINGS_AI_AGENT_TABLE_METADATA } from '~/pages/settings/ai/constants/SettingsAiAgentTableMetadata'; import { normalizeSearchText } from '~/utils/normalizeSearchText'; @@ -52,10 +51,10 @@ const StyledTableHeaderRow = styled(StyledAIAgentTableRow)` `; export const SettingsAIAgentsTable = () => { + const { theme } = useContext(ThemeContext); const { data, loading } = useFindManyAgentsQuery(); const { t } = useLingui(); - const { theme } = useContext(ThemeContext); const [searchTerm, setSearchTerm] = useState(''); const [showWorkflowAgents, setShowWorkflowAgents] = useState(false); diff --git a/packages/twenty-front/src/pages/settings/ai/components/SettingsAgentDetailSkeletonLoader.tsx b/packages/twenty-front/src/pages/settings/ai/components/SettingsAgentDetailSkeletonLoader.tsx index 71d4ea529c..5b55fae94f 100644 --- a/packages/twenty-front/src/pages/settings/ai/components/SettingsAgentDetailSkeletonLoader.tsx +++ b/packages/twenty-front/src/pages/settings/ai/components/SettingsAgentDetailSkeletonLoader.tsx @@ -3,8 +3,7 @@ import { useContext } from 'react'; import Skeleton, { SkeletonTheme } from 'react-loading-skeleton'; import { SKELETON_LOADER_HEIGHT_SIZES } from '@/activities/components/SkeletonLoader'; -import { ThemeContext } from 'twenty-ui/theme'; -import { themeCssVariables } from 'twenty-ui/theme-constants'; +import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants'; const StyledSkeletonContainer = styled.div` display: flex; @@ -34,7 +33,6 @@ const StyledNameContainer = styled.div` export const SettingsAgentDetailSkeletonLoader = () => { const { theme } = useContext(ThemeContext); - return ( ` display: flex; diff --git a/packages/twenty-front/src/pages/settings/ai/components/SettingsSkillTableRow.tsx b/packages/twenty-front/src/pages/settings/ai/components/SettingsSkillTableRow.tsx index 7df14e443d..fdbccdac45 100644 --- a/packages/twenty-front/src/pages/settings/ai/components/SettingsSkillTableRow.tsx +++ b/packages/twenty-front/src/pages/settings/ai/components/SettingsSkillTableRow.tsx @@ -1,11 +1,11 @@ import { styled } from '@linaria/react'; -import { type ReactNode } from 'react'; +import { type ReactNode, useContext } from 'react'; import { SettingsItemTypeTag } from '@/settings/components/SettingsItemTypeTag'; import { TableCell } from '@/ui/layout/table/components/TableCell'; import { TableRow } from '@/ui/layout/table/components/TableRow'; import { useIcons, OverflowingTextWithTooltip } from 'twenty-ui/display'; -import { ICON_SIZES, themeCssVariables } from 'twenty-ui/theme-constants'; +import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants'; import { type Skill } from '~/generated-metadata/graphql'; @@ -26,6 +26,7 @@ export const SettingsSkillTableRow = ({ action, link, }: SettingsSkillTableRowProps) => { + const { theme } = useContext(ThemeContext); const { getIcon } = useIcons(); const Icon = getIcon(skill.icon ?? 'IconSparkles'); @@ -43,7 +44,7 @@ export const SettingsSkillTableRow = ({ overflow="hidden" > - + diff --git a/packages/twenty-front/src/pages/settings/ai/components/SettingsSkillsTable.tsx b/packages/twenty-front/src/pages/settings/ai/components/SettingsSkillsTable.tsx index 5cd243967a..bfa26638c0 100644 --- a/packages/twenty-front/src/pages/settings/ai/components/SettingsSkillsTable.tsx +++ b/packages/twenty-front/src/pages/settings/ai/components/SettingsSkillsTable.tsx @@ -1,6 +1,6 @@ import { styled } from '@linaria/react'; import { useLingui } from '@lingui/react/macro'; -import { useMemo, useState } from 'react'; +import { useContext, useMemo, useState } from 'react'; import Skeleton from 'react-loading-skeleton'; import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar'; @@ -24,11 +24,7 @@ import { } from 'twenty-ui/display'; import { Button } from 'twenty-ui/input'; import { MenuItemToggle, UndecoratedLink } from 'twenty-ui/navigation'; -import { - ICON_SIZES, - ICON_STROKES, - themeCssVariables, -} from 'twenty-ui/theme-constants'; +import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants'; import { useActivateSkillMutation, @@ -63,6 +59,7 @@ const StyledFooterContainer = styled.div` `; export const SettingsSkillsTable = () => { + const { theme } = useContext(ThemeContext); const { data, loading, refetch } = useFindManySkillsQuery(); const [activateSkill] = useActivateSkillMutation(); const [deleteSkill] = useDeleteSkillMutation(); @@ -190,8 +187,8 @@ export const SettingsSkillsTable = () => { action={ skill.isActive ? ( ) : ( { + const { theme } = useContext(ThemeContext); const logicFunctions = useAtomStateValue(logicFunctionsState); const { toolIndex, loading: toolIndexLoading } = useGetToolIndex(); const { createLogicFunction } = usePersistLogicFunction(); const { t } = useLingui(); - const { theme } = useContext(ThemeContext); const navigate = useNavigate(); const { enqueueSuccessSnackBar, enqueueErrorSnackBar } = useSnackBar(); const [customSearchTerm, setCustomSearchTerm] = useState(''); diff --git a/packages/twenty-front/src/pages/settings/applications/components/SettingsApplicationDataTableRow.tsx b/packages/twenty-front/src/pages/settings/applications/components/SettingsApplicationDataTableRow.tsx index 3cf5cb217b..26b5929fa6 100644 --- a/packages/twenty-front/src/pages/settings/applications/components/SettingsApplicationDataTableRow.tsx +++ b/packages/twenty-front/src/pages/settings/applications/components/SettingsApplicationDataTableRow.tsx @@ -11,11 +11,10 @@ import { TableRow } from '@/ui/layout/table/components/TableRow'; import { TableSubRow } from '@/ui/layout/table/components/TableSubRow'; import { styled } from '@linaria/react'; import { t } from '@lingui/core/macro'; -import { useContext } from 'react'; import { isDefined } from 'twenty-shared/utils'; import { IconChevronDown, IconChevronRight, useIcons } from 'twenty-ui/display'; -import { ThemeContext } from 'twenty-ui/theme'; -import { themeCssVariables } from 'twenty-ui/theme-constants'; +import { useContext } from 'react'; +import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants'; import { type ApplicationDataTableRow } from '~/pages/settings/applications/components/SettingsApplicationDataTable'; diff --git a/packages/twenty-front/src/pages/settings/applications/components/SettingsApplicationDetailSkeletonLoader.tsx b/packages/twenty-front/src/pages/settings/applications/components/SettingsApplicationDetailSkeletonLoader.tsx index 5cb2cc84b4..3fd78e9ecd 100644 --- a/packages/twenty-front/src/pages/settings/applications/components/SettingsApplicationDetailSkeletonLoader.tsx +++ b/packages/twenty-front/src/pages/settings/applications/components/SettingsApplicationDetailSkeletonLoader.tsx @@ -3,8 +3,7 @@ import { useContext } from 'react'; import Skeleton, { SkeletonTheme } from 'react-loading-skeleton'; import { SKELETON_LOADER_HEIGHT_SIZES } from '@/activities/components/SkeletonLoader'; -import { ThemeContext } from 'twenty-ui/theme'; -import { themeCssVariables } from 'twenty-ui/theme-constants'; +import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants'; const StyledSkeletonContainer = styled.div` display: flex; @@ -20,7 +19,6 @@ const StyledFormSection = styled.div` export const SettingsApplicationDetailSkeletonLoader = () => { const { theme } = useContext(ThemeContext); - return ( { - const { t } = useLingui(); - const { theme } = useContext(ThemeContext); + const { t } = useLingui(); const [searchTerm, setSearchTerm] = useState(''); diff --git a/packages/twenty-front/src/pages/settings/applications/tabs/SettingsApplicationsDeveloperTab.tsx b/packages/twenty-front/src/pages/settings/applications/tabs/SettingsApplicationsDeveloperTab.tsx index 38d299b9f7..815d4cc043 100644 --- a/packages/twenty-front/src/pages/settings/applications/tabs/SettingsApplicationsDeveloperTab.tsx +++ b/packages/twenty-front/src/pages/settings/applications/tabs/SettingsApplicationsDeveloperTab.tsx @@ -6,7 +6,6 @@ import { useAtomStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomState import { styled } from '@linaria/react'; import { useLingui } from '@lingui/react/macro'; import { useQuery } from '@apollo/client'; -import { useContext } from 'react'; import { useNavigate } from 'react-router-dom'; import { SettingsPath } from 'twenty-shared/types'; import { getSettingsPath } from 'twenty-shared/utils'; @@ -20,8 +19,8 @@ import { } from 'twenty-ui/display'; import { Button } from 'twenty-ui/input'; import { Section } from 'twenty-ui/layout'; -import { ThemeContext } from 'twenty-ui/theme'; -import { themeCssVariables } from 'twenty-ui/theme-constants'; +import { useContext } from 'react'; +import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants'; import { useCopyToClipboard } from '~/hooks/useCopyToClipboard'; const StyledButtonContainer = styled.div` @@ -35,9 +34,9 @@ type ApplicationRegistration = { }; export const SettingsApplicationsDeveloperTab = () => { + const { theme } = useContext(ThemeContext); const { t } = useLingui(); const navigate = useNavigate(); - const { theme } = useContext(ThemeContext); const currentWorkspaceMember = useAtomStateValue(currentWorkspaceMemberState); const { copyToClipboard } = useCopyToClipboard(); diff --git a/packages/twenty-front/src/pages/settings/data-model/SettingsObjectDetailPage.tsx b/packages/twenty-front/src/pages/settings/data-model/SettingsObjectDetailPage.tsx index 9f78114d83..00e21f550c 100644 --- a/packages/twenty-front/src/pages/settings/data-model/SettingsObjectDetailPage.tsx +++ b/packages/twenty-front/src/pages/settings/data-model/SettingsObjectDetailPage.tsx @@ -29,7 +29,7 @@ import { } from 'twenty-ui/display'; import { Button } from 'twenty-ui/input'; import { UndecoratedLink } from 'twenty-ui/navigation'; -import { ThemeContext } from 'twenty-ui/theme'; +import { ThemeContext } from 'twenty-ui/theme-constants'; import { FeatureFlagKey } from '~/generated-metadata/graphql'; import { useNavigateApp } from '~/hooks/useNavigateApp'; import { SETTINGS_OBJECT_DETAIL_TABS } from '~/pages/settings/data-model/constants/SettingsObjectDetailTabs'; @@ -42,10 +42,9 @@ const StyledContentContainer = styled.div` `; export const SettingsObjectDetailPage = () => { + const { theme } = useContext(ThemeContext); const navigateApp = useNavigateApp(); const { t } = useLingui(); - const { theme } = useContext(ThemeContext); - const { objectNamePlural = '' } = useParams(); const { findObjectMetadataItemByNamePlural } = diff --git a/packages/twenty-front/src/pages/settings/data-model/SettingsObjectTable.tsx b/packages/twenty-front/src/pages/settings/data-model/SettingsObjectTable.tsx index 24dde8b9b9..42c3b4e555 100644 --- a/packages/twenty-front/src/pages/settings/data-model/SettingsObjectTable.tsx +++ b/packages/twenty-front/src/pages/settings/data-model/SettingsObjectTable.tsx @@ -25,8 +25,7 @@ import { getSettingsPath } from 'twenty-shared/utils'; import { IconArchive, IconChevronRight, IconSettings } from 'twenty-ui/display'; import { SearchInput } from 'twenty-ui/input'; import { MenuItemToggle } from 'twenty-ui/navigation'; -import { ThemeContext } from 'twenty-ui/theme'; -import { themeCssVariables } from 'twenty-ui/theme-constants'; +import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants'; import { GET_SETTINGS_OBJECT_TABLE_METADATA } from '~/pages/settings/data-model/constants/SettingsObjectTableMetadata'; import type { SettingsObjectTableItem } from '~/pages/settings/data-model/types/SettingsObjectTableItem'; import { normalizeSearchText } from '~/utils/normalizeSearchText'; @@ -46,9 +45,8 @@ export const SettingsObjectTable = ({ objectMetadataItems: ObjectMetadataItem[]; withSearchBar?: boolean; }) => { - const { t } = useLingui(); - const { theme } = useContext(ThemeContext); + const { t } = useLingui(); const isAdvancedModeEnabled = useAtomStateValue(isAdvancedModeEnabledState); diff --git a/packages/twenty-front/src/pages/settings/members/SettingsWorkspaceMembers.tsx b/packages/twenty-front/src/pages/settings/members/SettingsWorkspaceMembers.tsx index 15a8dc4608..e928328d46 100644 --- a/packages/twenty-front/src/pages/settings/members/SettingsWorkspaceMembers.tsx +++ b/packages/twenty-front/src/pages/settings/members/SettingsWorkspaceMembers.tsx @@ -49,8 +49,7 @@ import { TableRow } from '@/ui/layout/table/components/TableRow'; import { useDeleteWorkspaceInvitation } from '@/workspace-invitation/hooks/useDeleteWorkspaceInvitation'; import { useResendWorkspaceInvitation } from '@/workspace-invitation/hooks/useResendWorkspaceInvitation'; import { workspaceInvitationsState } from '@/workspace-invitation/states/workspaceInvitationsStates'; -import { ThemeContext } from 'twenty-ui/theme'; -import { themeCssVariables } from 'twenty-ui/theme-constants'; +import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants'; import { useNavigateSettings } from '~/hooks/useNavigateSettings'; import { normalizeSearchText } from '~/utils/normalizeSearchText'; @@ -122,9 +121,9 @@ const StyledNoMembers = styled(TableCell)` `; export const SettingsWorkspaceMembers = () => { + const { theme } = useContext(ThemeContext); const { t } = useLingui(); const { enqueueErrorSnackBar } = useSnackBar(); - const { theme } = useContext(ThemeContext); const navigateSettings = useNavigateSettings(); const [isFetchingMore, setIsFetchingMore] = useState(false); const [searchFilter, setSearchFilter] = useState(''); diff --git a/packages/twenty-front/src/pages/settings/security/event-logs/components/EventLogResultsTable.tsx b/packages/twenty-front/src/pages/settings/security/event-logs/components/EventLogResultsTable.tsx index 4f8292ef1c..7c04cfd309 100644 --- a/packages/twenty-front/src/pages/settings/security/event-logs/components/EventLogResultsTable.tsx +++ b/packages/twenty-front/src/pages/settings/security/event-logs/components/EventLogResultsTable.tsx @@ -11,8 +11,7 @@ import { TableHeader } from '@/ui/layout/table/components/TableHeader'; import { TableRow } from '@/ui/layout/table/components/TableRow'; import { ScrollWrapper } from '@/ui/utilities/scroll/components/ScrollWrapper'; import { useScrollWrapperHTMLElement } from '@/ui/utilities/scroll/hooks/useScrollWrapperHTMLElement'; -import { ThemeContext } from 'twenty-ui/theme'; -import { themeCssVariables } from 'twenty-ui/theme-constants'; +import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants'; import { beautifyPastDateRelativeToNow } from '~/utils/date-utils'; import { type MessageDescriptor } from '@lingui/core'; @@ -175,8 +174,8 @@ export const EventLogResultsTable = ({ onLoadMore, selectedTable, }: EventLogResultsTableProps) => { - const { t } = useLingui(); const { theme } = useContext(ThemeContext); + const { t } = useLingui(); const showObjectEventColumns = selectedTable === EventLogTable.OBJECT_EVENT; const baseColumns = showObjectEventColumns diff --git a/packages/twenty-front/src/pages/settings/updates/SettingsUpdates.tsx b/packages/twenty-front/src/pages/settings/updates/SettingsUpdates.tsx index a5d0ce80b1..07f6475a18 100644 --- a/packages/twenty-front/src/pages/settings/updates/SettingsUpdates.tsx +++ b/packages/twenty-front/src/pages/settings/updates/SettingsUpdates.tsx @@ -4,20 +4,18 @@ import { SettingsLabContent } from '@/settings/lab/components/SettingsLabContent import { SubMenuTopBarContainer } from '@/ui/layout/page/components/SubMenuTopBarContainer'; import { styled } from '@linaria/react'; import { t } from '@lingui/core/macro'; -import { useContext } from 'react'; import { SettingsPath } from 'twenty-shared/types'; import { getSettingsPath } from 'twenty-shared/utils'; import { H2Title, IconTransform } from 'twenty-ui/display'; import { Section } from 'twenty-ui/layout'; -import { ThemeContext } from 'twenty-ui/theme'; - +import { useContext } from 'react'; +import { ThemeContext } from 'twenty-ui/theme-constants'; const StyledCardLink = styled.a` text-decoration: none; `; export const SettingsUpdates = () => { const { theme } = useContext(ThemeContext); - return ( { - const theme = THEME_LIGHT; - return ( - + - + ); }, ], - args: { - theme: THEME_LIGHT, - }, }; export default preview; diff --git a/packages/twenty-sdk/src/front-component-renderer/__stories__/example-sources/twenty-ui-example.front-component.tsx b/packages/twenty-sdk/src/front-component-renderer/__stories__/example-sources/twenty-ui-example.front-component.tsx index 54a4646459..235fc66266 100644 --- a/packages/twenty-sdk/src/front-component-renderer/__stories__/example-sources/twenty-ui-example.front-component.tsx +++ b/packages/twenty-sdk/src/front-component-renderer/__stories__/example-sources/twenty-ui-example.front-component.tsx @@ -7,7 +7,6 @@ import { H2Title, Status, Tag, - THEME_LIGHT, ThemeProvider, } from 'twenty-sdk/ui'; @@ -34,7 +33,7 @@ const TwentyUiComponent = () => { const [count, setCount] = useState(0); return ( - +
void; - theme: ThemeType; + colorScheme: 'light' | 'dark'; }; export const FrontComponentRenderer = ({ @@ -33,7 +33,7 @@ export const FrontComponentRenderer = ({ executionContext, frontComponentHostCommunicationApi, onError, - theme, + colorScheme, }: FrontComponentContentProps) => { const [receiver, setReceiver] = useState(null); const [thread, setThread] = useState + - + )} ); diff --git a/packages/twenty-sdk/src/ui/index.ts b/packages/twenty-sdk/src/ui/index.ts index d35fd14e73..2882256cc6 100644 --- a/packages/twenty-sdk/src/ui/index.ts +++ b/packages/twenty-sdk/src/ui/index.ts @@ -7,5 +7,5 @@ export * from 'twenty-ui/input'; export * from 'twenty-ui/json-visualizer'; export * from 'twenty-ui/layout'; export * from 'twenty-ui/navigation'; -export * from 'twenty-ui/theme'; +export * from 'twenty-ui/theme-constants'; export * from 'twenty-ui/utilities'; diff --git a/packages/twenty-shared/src/utils/filter/__tests__/turnRecordFilterGroupIntoGqlOperationFilter.test.ts b/packages/twenty-shared/src/utils/filter/__tests__/turnRecordFilterGroupIntoGqlOperationFilter.test.ts index a2d4c77fd1..8f43880e8c 100644 --- a/packages/twenty-shared/src/utils/filter/__tests__/turnRecordFilterGroupIntoGqlOperationFilter.test.ts +++ b/packages/twenty-shared/src/utils/filter/__tests__/turnRecordFilterGroupIntoGqlOperationFilter.test.ts @@ -38,7 +38,6 @@ describe('turnRecordFilterGroupsIntoGqlOperationFilter', () => { filterValueDependencies: {}, filters: [ { - id: 'filter1', fieldMetadataId: 'f1', value: 'test', type: 'TEXT', @@ -64,7 +63,6 @@ describe('turnRecordFilterGroupsIntoGqlOperationFilter', () => { filterValueDependencies: {}, filters: [ { - id: 'filter1', fieldMetadataId: 'f1', value: 'test', type: 'TEXT', @@ -90,7 +88,6 @@ describe('turnRecordFilterGroupsIntoGqlOperationFilter', () => { filterValueDependencies: {}, filters: [ { - id: 'filter1', fieldMetadataId: 'f1', value: 'test', type: 'TEXT', diff --git a/packages/twenty-ui/.storybook/preview.tsx b/packages/twenty-ui/.storybook/preview.tsx index ce885f3791..bee0d0f8b9 100644 --- a/packages/twenty-ui/.storybook/preview.tsx +++ b/packages/twenty-ui/.storybook/preview.tsx @@ -1,16 +1,16 @@ import { type Preview } from '@storybook/react-vite'; -import { THEME_LIGHT, ThemeContextProvider } from '@ui/theme'; +import '@ui/theme-constants/theme-light.css'; +import '@ui/theme-constants/theme-dark.css'; +import { ThemeProvider } from '@ui/theme-constants'; const preview: Preview = { tags: ['autodocs'], decorators: [ (Story) => { - const theme = THEME_LIGHT; - return ( - + - + ); }, ], diff --git a/packages/twenty-ui/src/components/avatar-or-icon/AvatarOrIcon.tsx b/packages/twenty-ui/src/components/avatar-or-icon/AvatarOrIcon.tsx index b12baff556..ca12c2ac15 100644 --- a/packages/twenty-ui/src/components/avatar-or-icon/AvatarOrIcon.tsx +++ b/packages/twenty-ui/src/components/avatar-or-icon/AvatarOrIcon.tsx @@ -2,9 +2,9 @@ import { styled } from '@linaria/react'; import { Avatar } from '@ui/display/avatar/components/Avatar'; import { type AvatarType } from '@ui/display/avatar/types/AvatarType'; import { type IconComponent } from '@ui/display/icon/types/IconComponent'; -import { ThemeContext } from '@ui/theme'; -import { type Nullable } from '@ui/utilities'; +import { ThemeContext } from '@ui/theme-constants'; import { useContext } from 'react'; +import { type Nullable } from '@ui/utilities'; import { isDefined } from 'twenty-shared/utils'; const StyledIconWithBackgroundContainer = styled.div<{ @@ -50,6 +50,7 @@ export const AvatarOrIcon = ({ onClick, }: AvatarOrIconProps) => { const { theme } = useContext(ThemeContext); + if (!isDefined(Icon)) { return ( { 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 ? ( - + {placeholderChar} ) : ( diff --git a/packages/twenty-ui/src/display/checkmark/components/AnimatedCheckmark.tsx b/packages/twenty-ui/src/display/checkmark/components/AnimatedCheckmark.tsx index 72011e93bd..4a1faa110c 100644 --- a/packages/twenty-ui/src/display/checkmark/components/AnimatedCheckmark.tsx +++ b/packages/twenty-ui/src/display/checkmark/components/AnimatedCheckmark.tsx @@ -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 ( ; diff --git a/packages/twenty-ui/src/display/icon/components/IconBrandGroq.tsx b/packages/twenty-ui/src/display/icon/components/IconBrandGroq.tsx index 5c059c4d48..98731b6e7a 100644 --- a/packages/twenty-ui/src/display/icon/components/IconBrandGroq.tsx +++ b/packages/twenty-ui/src/display/icon/components/IconBrandGroq.tsx @@ -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; diff --git a/packages/twenty-ui/src/display/icon/components/IconBrandMistral.tsx b/packages/twenty-ui/src/display/icon/components/IconBrandMistral.tsx index 0f15d51287..a05c53967b 100644 --- a/packages/twenty-ui/src/display/icon/components/IconBrandMistral.tsx +++ b/packages/twenty-ui/src/display/icon/components/IconBrandMistral.tsx @@ -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; diff --git a/packages/twenty-ui/src/display/icon/components/IconBrandXai.tsx b/packages/twenty-ui/src/display/icon/components/IconBrandXai.tsx index 283ade6ca1..d0d1a7ab29 100644 --- a/packages/twenty-ui/src/display/icon/components/IconBrandXai.tsx +++ b/packages/twenty-ui/src/display/icon/components/IconBrandXai.tsx @@ -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; diff --git a/packages/twenty-ui/src/display/icon/components/IconChartBarHorizontal.tsx b/packages/twenty-ui/src/display/icon/components/IconChartBarHorizontal.tsx index 32e293c185..f589ac03fb 100644 --- a/packages/twenty-ui/src/display/icon/components/IconChartBarHorizontal.tsx +++ b/packages/twenty-ui/src/display/icon/components/IconChartBarHorizontal.tsx @@ -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; diff --git a/packages/twenty-ui/src/display/icon/components/IconGmail.tsx b/packages/twenty-ui/src/display/icon/components/IconGmail.tsx index b42c619324..961fc5d688 100644 --- a/packages/twenty-ui/src/display/icon/components/IconGmail.tsx +++ b/packages/twenty-ui/src/display/icon/components/IconGmail.tsx @@ -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; diff --git a/packages/twenty-ui/src/display/icon/components/IconGoogle.tsx b/packages/twenty-ui/src/display/icon/components/IconGoogle.tsx index cf8b30176d..4ae7dac95e 100644 --- a/packages/twenty-ui/src/display/icon/components/IconGoogle.tsx +++ b/packages/twenty-ui/src/display/icon/components/IconGoogle.tsx @@ -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; diff --git a/packages/twenty-ui/src/display/icon/components/IconGoogleCalendar.tsx b/packages/twenty-ui/src/display/icon/components/IconGoogleCalendar.tsx index 70a8e200b8..1db26ddec9 100644 --- a/packages/twenty-ui/src/display/icon/components/IconGoogleCalendar.tsx +++ b/packages/twenty-ui/src/display/icon/components/IconGoogleCalendar.tsx @@ -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; diff --git a/packages/twenty-ui/src/display/icon/components/IconLock.tsx b/packages/twenty-ui/src/display/icon/components/IconLock.tsx index f8e8563d09..3165280066 100644 --- a/packages/twenty-ui/src/display/icon/components/IconLock.tsx +++ b/packages/twenty-ui/src/display/icon/components/IconLock.tsx @@ -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; diff --git a/packages/twenty-ui/src/display/icon/components/IconMicrosoft.tsx b/packages/twenty-ui/src/display/icon/components/IconMicrosoft.tsx index 7d4d92a40e..5bc803f493 100644 --- a/packages/twenty-ui/src/display/icon/components/IconMicrosoft.tsx +++ b/packages/twenty-ui/src/display/icon/components/IconMicrosoft.tsx @@ -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; diff --git a/packages/twenty-ui/src/display/icon/components/IconMicrosoftCalendar.tsx b/packages/twenty-ui/src/display/icon/components/IconMicrosoftCalendar.tsx index 60d0e656c8..894fbebfda 100644 --- a/packages/twenty-ui/src/display/icon/components/IconMicrosoftCalendar.tsx +++ b/packages/twenty-ui/src/display/icon/components/IconMicrosoftCalendar.tsx @@ -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; diff --git a/packages/twenty-ui/src/display/icon/components/IconMicrosoftOutlook.tsx b/packages/twenty-ui/src/display/icon/components/IconMicrosoftOutlook.tsx index aaaa48ab0c..4e04adac43 100644 --- a/packages/twenty-ui/src/display/icon/components/IconMicrosoftOutlook.tsx +++ b/packages/twenty-ui/src/display/icon/components/IconMicrosoftOutlook.tsx @@ -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; diff --git a/packages/twenty-ui/src/display/icon/components/IconRelationManyToOne.tsx b/packages/twenty-ui/src/display/icon/components/IconRelationManyToOne.tsx index 808305a748..0f20794181 100644 --- a/packages/twenty-ui/src/display/icon/components/IconRelationManyToOne.tsx +++ b/packages/twenty-ui/src/display/icon/components/IconRelationManyToOne.tsx @@ -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; diff --git a/packages/twenty-ui/src/display/icon/components/IconTrashXOff.tsx b/packages/twenty-ui/src/display/icon/components/IconTrashXOff.tsx index b5f5dbe50a..2d5aedfb5e 100644 --- a/packages/twenty-ui/src/display/icon/components/IconTrashXOff.tsx +++ b/packages/twenty-ui/src/display/icon/components/IconTrashXOff.tsx @@ -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; diff --git a/packages/twenty-ui/src/display/icon/components/IconTwentyStar.tsx b/packages/twenty-ui/src/display/icon/components/IconTwentyStar.tsx index b763b5b684..7309bb0c2c 100644 --- a/packages/twenty-ui/src/display/icon/components/IconTwentyStar.tsx +++ b/packages/twenty-ui/src/display/icon/components/IconTwentyStar.tsx @@ -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; diff --git a/packages/twenty-ui/src/display/icon/components/IconTwentyStarFilled.tsx b/packages/twenty-ui/src/display/icon/components/IconTwentyStarFilled.tsx index 98f0154be7..051c98fffb 100644 --- a/packages/twenty-ui/src/display/icon/components/IconTwentyStarFilled.tsx +++ b/packages/twenty-ui/src/display/icon/components/IconTwentyStarFilled.tsx @@ -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; -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 ( diff --git a/packages/twenty-ui/src/display/icon/components/IllustrationIconArray.tsx b/packages/twenty-ui/src/display/icon/components/IllustrationIconArray.tsx index 9c8d1d1bf9..17cf7c48a4 100644 --- a/packages/twenty-ui/src/display/icon/components/IllustrationIconArray.tsx +++ b/packages/twenty-ui/src/display/icon/components/IllustrationIconArray.tsx @@ -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; export const IllustrationIconArray = (props: IllustrationIconArrayProps) => { diff --git a/packages/twenty-ui/src/display/icon/components/IllustrationIconCalendarEvent.tsx b/packages/twenty-ui/src/display/icon/components/IllustrationIconCalendarEvent.tsx index 14e91b5f13..f622089925 100644 --- a/packages/twenty-ui/src/display/icon/components/IllustrationIconCalendarEvent.tsx +++ b/packages/twenty-ui/src/display/icon/components/IllustrationIconCalendarEvent.tsx @@ -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; export const IllustrationIconCalendarEvent = ( diff --git a/packages/twenty-ui/src/display/icon/components/IllustrationIconCalendarTime.tsx b/packages/twenty-ui/src/display/icon/components/IllustrationIconCalendarTime.tsx index f9c6edf5af..8027cb5048 100644 --- a/packages/twenty-ui/src/display/icon/components/IllustrationIconCalendarTime.tsx +++ b/packages/twenty-ui/src/display/icon/components/IllustrationIconCalendarTime.tsx @@ -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; diff --git a/packages/twenty-ui/src/display/icon/components/IllustrationIconCurrency.tsx b/packages/twenty-ui/src/display/icon/components/IllustrationIconCurrency.tsx index 1925339491..0a0ef60343 100644 --- a/packages/twenty-ui/src/display/icon/components/IllustrationIconCurrency.tsx +++ b/packages/twenty-ui/src/display/icon/components/IllustrationIconCurrency.tsx @@ -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; diff --git a/packages/twenty-ui/src/display/icon/components/IllustrationIconFile.tsx b/packages/twenty-ui/src/display/icon/components/IllustrationIconFile.tsx index f2b880b2e9..94be18214b 100644 --- a/packages/twenty-ui/src/display/icon/components/IllustrationIconFile.tsx +++ b/packages/twenty-ui/src/display/icon/components/IllustrationIconFile.tsx @@ -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; diff --git a/packages/twenty-ui/src/display/icon/components/IllustrationIconJson.tsx b/packages/twenty-ui/src/display/icon/components/IllustrationIconJson.tsx index bf147d2b13..c521ba4c8c 100644 --- a/packages/twenty-ui/src/display/icon/components/IllustrationIconJson.tsx +++ b/packages/twenty-ui/src/display/icon/components/IllustrationIconJson.tsx @@ -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; diff --git a/packages/twenty-ui/src/display/icon/components/IllustrationIconLink.tsx b/packages/twenty-ui/src/display/icon/components/IllustrationIconLink.tsx index 799cd3d8df..afaa9b1983 100644 --- a/packages/twenty-ui/src/display/icon/components/IllustrationIconLink.tsx +++ b/packages/twenty-ui/src/display/icon/components/IllustrationIconLink.tsx @@ -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; diff --git a/packages/twenty-ui/src/display/icon/components/IllustrationIconMail.tsx b/packages/twenty-ui/src/display/icon/components/IllustrationIconMail.tsx index 8925466e95..95f9ee133e 100644 --- a/packages/twenty-ui/src/display/icon/components/IllustrationIconMail.tsx +++ b/packages/twenty-ui/src/display/icon/components/IllustrationIconMail.tsx @@ -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; diff --git a/packages/twenty-ui/src/display/icon/components/IllustrationIconManyToMany.tsx b/packages/twenty-ui/src/display/icon/components/IllustrationIconManyToMany.tsx index e1ce8101d3..0fd8370f85 100644 --- a/packages/twenty-ui/src/display/icon/components/IllustrationIconManyToMany.tsx +++ b/packages/twenty-ui/src/display/icon/components/IllustrationIconManyToMany.tsx @@ -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; diff --git a/packages/twenty-ui/src/display/icon/components/IllustrationIconMap.tsx b/packages/twenty-ui/src/display/icon/components/IllustrationIconMap.tsx index 3c1018ca49..484ce4cd47 100644 --- a/packages/twenty-ui/src/display/icon/components/IllustrationIconMap.tsx +++ b/packages/twenty-ui/src/display/icon/components/IllustrationIconMap.tsx @@ -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; diff --git a/packages/twenty-ui/src/display/icon/components/IllustrationIconNumbers.tsx b/packages/twenty-ui/src/display/icon/components/IllustrationIconNumbers.tsx index 19bd1ebbd0..0ac70a09fe 100644 --- a/packages/twenty-ui/src/display/icon/components/IllustrationIconNumbers.tsx +++ b/packages/twenty-ui/src/display/icon/components/IllustrationIconNumbers.tsx @@ -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; diff --git a/packages/twenty-ui/src/display/icon/components/IllustrationIconOneToMany.tsx b/packages/twenty-ui/src/display/icon/components/IllustrationIconOneToMany.tsx index c4e4f9204e..7c8e50474f 100644 --- a/packages/twenty-ui/src/display/icon/components/IllustrationIconOneToMany.tsx +++ b/packages/twenty-ui/src/display/icon/components/IllustrationIconOneToMany.tsx @@ -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; diff --git a/packages/twenty-ui/src/display/icon/components/IllustrationIconOneToOne.tsx b/packages/twenty-ui/src/display/icon/components/IllustrationIconOneToOne.tsx index 88d810a7da..54da40e2b2 100644 --- a/packages/twenty-ui/src/display/icon/components/IllustrationIconOneToOne.tsx +++ b/packages/twenty-ui/src/display/icon/components/IllustrationIconOneToOne.tsx @@ -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; diff --git a/packages/twenty-ui/src/display/icon/components/IllustrationIconPhone.tsx b/packages/twenty-ui/src/display/icon/components/IllustrationIconPhone.tsx index 84845786da..e06371bb9a 100644 --- a/packages/twenty-ui/src/display/icon/components/IllustrationIconPhone.tsx +++ b/packages/twenty-ui/src/display/icon/components/IllustrationIconPhone.tsx @@ -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; diff --git a/packages/twenty-ui/src/display/icon/components/IllustrationIconSetting.tsx b/packages/twenty-ui/src/display/icon/components/IllustrationIconSetting.tsx index 30acb88824..10c96b0e6d 100644 --- a/packages/twenty-ui/src/display/icon/components/IllustrationIconSetting.tsx +++ b/packages/twenty-ui/src/display/icon/components/IllustrationIconSetting.tsx @@ -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; diff --git a/packages/twenty-ui/src/display/icon/components/IllustrationIconStar.tsx b/packages/twenty-ui/src/display/icon/components/IllustrationIconStar.tsx index f610a32c0f..e8c662c27f 100644 --- a/packages/twenty-ui/src/display/icon/components/IllustrationIconStar.tsx +++ b/packages/twenty-ui/src/display/icon/components/IllustrationIconStar.tsx @@ -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; diff --git a/packages/twenty-ui/src/display/icon/components/IllustrationIconTag.tsx b/packages/twenty-ui/src/display/icon/components/IllustrationIconTag.tsx index b2a85b29d6..a45034ed09 100644 --- a/packages/twenty-ui/src/display/icon/components/IllustrationIconTag.tsx +++ b/packages/twenty-ui/src/display/icon/components/IllustrationIconTag.tsx @@ -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; diff --git a/packages/twenty-ui/src/display/icon/components/IllustrationIconTags.tsx b/packages/twenty-ui/src/display/icon/components/IllustrationIconTags.tsx index 59e9f7ba26..667a812740 100644 --- a/packages/twenty-ui/src/display/icon/components/IllustrationIconTags.tsx +++ b/packages/twenty-ui/src/display/icon/components/IllustrationIconTags.tsx @@ -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; diff --git a/packages/twenty-ui/src/display/icon/components/IllustrationIconText.tsx b/packages/twenty-ui/src/display/icon/components/IllustrationIconText.tsx index bff5af5b3e..9544e42ab6 100644 --- a/packages/twenty-ui/src/display/icon/components/IllustrationIconText.tsx +++ b/packages/twenty-ui/src/display/icon/components/IllustrationIconText.tsx @@ -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; diff --git a/packages/twenty-ui/src/display/icon/components/IllustrationIconToggle.tsx b/packages/twenty-ui/src/display/icon/components/IllustrationIconToggle.tsx index fd0e9109da..8dec6ec915 100644 --- a/packages/twenty-ui/src/display/icon/components/IllustrationIconToggle.tsx +++ b/packages/twenty-ui/src/display/icon/components/IllustrationIconToggle.tsx @@ -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; diff --git a/packages/twenty-ui/src/display/icon/components/IllustrationIconUid.tsx b/packages/twenty-ui/src/display/icon/components/IllustrationIconUid.tsx index ce3465195f..6c89066302 100644 --- a/packages/twenty-ui/src/display/icon/components/IllustrationIconUid.tsx +++ b/packages/twenty-ui/src/display/icon/components/IllustrationIconUid.tsx @@ -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; diff --git a/packages/twenty-ui/src/display/icon/components/IllustrationIconUser.tsx b/packages/twenty-ui/src/display/icon/components/IllustrationIconUser.tsx index d155b0144a..e76856f2a0 100644 --- a/packages/twenty-ui/src/display/icon/components/IllustrationIconUser.tsx +++ b/packages/twenty-ui/src/display/icon/components/IllustrationIconUser.tsx @@ -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; diff --git a/packages/twenty-ui/src/display/icon/hooks/__tests__/useIcons.test.ts b/packages/twenty-ui/src/display/icon/hooks/__tests__/useIcons.test.ts index bd49b6047a..f12ce151fa 100644 --- a/packages/twenty-ui/src/display/icon/hooks/__tests__/useIcons.test.ts +++ b/packages/twenty-ui/src/display/icon/hooks/__tests__/useIcons.test.ts @@ -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', () => { diff --git a/packages/twenty-ui/src/display/info/components/Info.tsx b/packages/twenty-ui/src/display/info/components/Info.tsx index f2a28215ea..2cfc84235c 100644 --- a/packages/twenty-ui/src/display/info/components/Info.tsx +++ b/packages/twenty-ui/src/display/info/components/Info.tsx @@ -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 ( - + {text} {buttonTitle && to && ( diff --git a/packages/twenty-ui/src/display/status/components/Status.tsx b/packages/twenty-ui/src/display/status/components/Status.tsx index aa5b44f214..9cfb3126f3 100644 --- a/packages/twenty-ui/src/display/status/components/Status.tsx +++ b/packages/twenty-ui/src/display/status/components/Status.tsx @@ -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) diff --git a/packages/twenty-ui/src/display/status/components/__stories__/Status.stories.tsx b/packages/twenty-ui/src/display/status/components/__stories__/Status.stories.tsx index 75fcf6af9e..c24a164797 100644 --- a/packages/twenty-ui/src/display/status/components/__stories__/Status.stories.tsx +++ b/packages/twenty-ui/src/display/status/components/__stories__/Status.stories.tsx @@ -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'; diff --git a/packages/twenty-ui/src/display/tooltip/OverflowingTextWithTooltip.tsx b/packages/twenty-ui/src/display/tooltip/OverflowingTextWithTooltip.tsx index 0e6ddcc8da..aa57729685 100644 --- a/packages/twenty-ui/src/display/tooltip/OverflowingTextWithTooltip.tsx +++ b/packages/twenty-ui/src/display/tooltip/OverflowingTextWithTooltip.tsx @@ -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; diff --git a/packages/twenty-ui/src/feedback/loader/components/Loader.tsx b/packages/twenty-ui/src/feedback/loader/components/Loader.tsx index 11d4eaf851..753be93c28 100644 --- a/packages/twenty-ui/src/feedback/loader/components/Loader.tsx +++ b/packages/twenty-ui/src/feedback/loader/components/Loader.tsx @@ -1,7 +1,7 @@ import { styled } from '@linaria/react'; +import { motion } from 'framer-motion'; import { type ThemeColor } from '@ui/theme'; import { themeCssVariables } from '@ui/theme-constants'; -import { motion } from 'framer-motion'; const StyledLoaderContainer = styled.div<{ color?: ThemeColor; diff --git a/packages/twenty-ui/src/individual-entry.ts b/packages/twenty-ui/src/individual-entry.ts index 11fa297fe9..f9ef6db03a 100644 --- a/packages/twenty-ui/src/individual-entry.ts +++ b/packages/twenty-ui/src/individual-entry.ts @@ -12,4 +12,5 @@ export * from './json-visualizer'; export * from './layout'; export * from './navigation'; export * from './theme'; +export * from './theme-constants'; export * from './utilities'; diff --git a/packages/twenty-ui/src/input/button/components/AnimatedButton.tsx b/packages/twenty-ui/src/input/button/components/AnimatedButton.tsx index 398f1b27e2..849cb3ece4 100644 --- a/packages/twenty-ui/src/input/button/components/AnimatedButton.tsx +++ b/packages/twenty-ui/src/input/button/components/AnimatedButton.tsx @@ -2,11 +2,11 @@ import { styled } from '@linaria/react'; import { useIsMobile } from '@ui/utilities'; import { getOsShortcutSeparator } from '@ui/utilities/device/getOsShortcutSeparator'; import { type MotionProps, motion } from 'framer-motion'; -import React, { useMemo } from 'react'; +import React, { useContext, useMemo } from 'react'; import { Link } from 'react-router-dom'; import { Pill } from '@ui/components/Pill/Pill'; -import { ICON_SIZES, themeCssVariables } from '@ui/theme-constants'; +import { ThemeContext, themeCssVariables } from '@ui/theme-constants'; import { type ButtonAccent, type ButtonPosition, @@ -446,6 +446,7 @@ export const AnimatedButton = ({ dataGloballyPreventClickOutside, soonLabel = 'Soon', }: AnimatedButtonProps) => { + const { theme } = useContext(ThemeContext); const isMobile = useIsMobile(); const isDisabled = soon || disabled; @@ -492,7 +493,7 @@ export const AnimatedButton = ({ {Icon && ( - + )} diff --git a/packages/twenty-ui/src/input/button/components/AnimatedLightIconButton.tsx b/packages/twenty-ui/src/input/button/components/AnimatedLightIconButton.tsx index 50d0701574..1dce5c8e34 100644 --- a/packages/twenty-ui/src/input/button/components/AnimatedLightIconButton.tsx +++ b/packages/twenty-ui/src/input/button/components/AnimatedLightIconButton.tsx @@ -4,9 +4,9 @@ import { type LightIconButtonAccent, type LightIconButtonSize, } from '@ui/input/button/components/LightIconButton'; -import { ICON_SIZES, themeCssVariables } from '@ui/theme-constants'; +import { ThemeContext, themeCssVariables } from '@ui/theme-constants'; import { motion, type MotionProps } from 'framer-motion'; -import { type ComponentProps, type MouseEvent } from 'react'; +import { type ComponentProps, type MouseEvent, useContext } from 'react'; export type AnimatedLightIconButtonProps = { className?: string; @@ -107,6 +107,8 @@ export const AnimatedLightIconButton = ({ onClick, title, }: AnimatedLightIconButtonProps) => { + const { theme } = useContext(ThemeContext); + return ( {Icon && ( - + )} diff --git a/packages/twenty-ui/src/input/button/components/Button/internal/ButtonIcon.tsx b/packages/twenty-ui/src/input/button/components/Button/internal/ButtonIcon.tsx index 342eff8c85..de58ef4517 100644 --- a/packages/twenty-ui/src/input/button/components/Button/internal/ButtonIcon.tsx +++ b/packages/twenty-ui/src/input/button/components/Button/internal/ButtonIcon.tsx @@ -2,7 +2,8 @@ import { styled } from '@linaria/react'; import { type IconComponent } from '@ui/display'; import { Loader } from '@ui/feedback'; import { baseTransitionTiming } from '@ui/input/button/components/Button/constant'; -import { ICON_SIZES, themeCssVariables } from '@ui/theme-constants'; +import { ThemeContext, themeCssVariables } from '@ui/theme-constants'; +import { useContext } from 'react'; const StyledIcon = styled.div<{ isLoading: boolean; @@ -41,17 +42,21 @@ export const ButtonIcon = ({ }: { Icon?: IconComponent; isLoading?: boolean; -}) => ( - - {isLoading && ( - - - - )} - {Icon && ( - - - - )} - -); +}) => { + const { theme } = useContext(ThemeContext); + + return ( + + {isLoading && ( + + + + )} + {Icon && ( + + + + )} + + ); +}; diff --git a/packages/twenty-ui/src/input/button/components/FloatingButton.tsx b/packages/twenty-ui/src/input/button/components/FloatingButton.tsx index 691d3439b0..b1c3cde476 100644 --- a/packages/twenty-ui/src/input/button/components/FloatingButton.tsx +++ b/packages/twenty-ui/src/input/button/components/FloatingButton.tsx @@ -1,7 +1,6 @@ import { styled } from '@linaria/react'; import { type IconComponent } from '@ui/display'; -import { ThemeContext } from '@ui/theme'; -import { themeCssVariables } from '@ui/theme-constants'; +import { ThemeContext, themeCssVariables } from '@ui/theme-constants'; import { useContext } from 'react'; import { Link } from 'react-router-dom'; @@ -115,6 +114,7 @@ export const FloatingButton = ({ to, }: FloatingButtonProps) => { const { theme } = useContext(ThemeContext); + return ( { const { theme } = useContext(ThemeContext); + return ( { const { theme } = useContext(ThemeContext); + const dynamicStyles = useMemo(() => { const styles = computeIconButtonDynamicStyles( variant, diff --git a/packages/twenty-ui/src/input/button/components/InsideButton.tsx b/packages/twenty-ui/src/input/button/components/InsideButton.tsx index d02048905c..9ed8d9e262 100644 --- a/packages/twenty-ui/src/input/button/components/InsideButton.tsx +++ b/packages/twenty-ui/src/input/button/components/InsideButton.tsx @@ -1,7 +1,6 @@ import { styled } from '@linaria/react'; import { type IconComponent } from '@ui/display'; -import { ThemeContext } from '@ui/theme'; -import { themeCssVariables } from '@ui/theme-constants'; +import { ThemeContext, themeCssVariables } from '@ui/theme-constants'; import React, { useContext } from 'react'; export type InsideButtonProps = { diff --git a/packages/twenty-ui/src/input/button/components/LightButton.tsx b/packages/twenty-ui/src/input/button/components/LightButton.tsx index 59c5dac468..98356705f7 100644 --- a/packages/twenty-ui/src/input/button/components/LightButton.tsx +++ b/packages/twenty-ui/src/input/button/components/LightButton.tsx @@ -1,7 +1,7 @@ import { styled } from '@linaria/react'; import { type IconComponent } from '@ui/display'; -import { ICON_SIZES, themeCssVariables } from '@ui/theme-constants'; -import { type MouseEvent } from 'react'; +import { ThemeContext, themeCssVariables } from '@ui/theme-constants'; +import { type MouseEvent, useContext } from 'react'; export type LightButtonAccent = 'secondary' | 'tertiary'; @@ -89,6 +89,8 @@ export const LightButton = ({ type = 'button', onClick, }: LightButtonProps) => { + const { theme } = useContext(ThemeContext); + return ( - {!!Icon && } + {!!Icon && } {title} ); diff --git a/packages/twenty-ui/src/input/button/components/LightIconButton.tsx b/packages/twenty-ui/src/input/button/components/LightIconButton.tsx index dfd9f340f5..a73d9588cb 100644 --- a/packages/twenty-ui/src/input/button/components/LightIconButton.tsx +++ b/packages/twenty-ui/src/input/button/components/LightIconButton.tsx @@ -1,7 +1,7 @@ import { styled } from '@linaria/react'; import { type IconComponent } from '@ui/display'; -import { ICON_SIZES, themeCssVariables } from '@ui/theme-constants'; -import { type ComponentProps, type MouseEvent } from 'react'; +import { ThemeContext, themeCssVariables } from '@ui/theme-constants'; +import { type ComponentProps, type MouseEvent, useContext } from 'react'; export type LightIconButtonAccent = 'secondary' | 'tertiary'; export type LightIconButtonSize = 'small' | 'medium'; @@ -105,6 +105,8 @@ export const LightIconButton = ({ onClick, title, }: LightIconButtonProps) => { + const { theme } = useContext(ThemeContext); + return ( {Icon && ( - + )} ); diff --git a/packages/twenty-ui/src/input/button/components/MainButton.tsx b/packages/twenty-ui/src/input/button/components/MainButton.tsx index 8c09bc1448..9d278d34b2 100644 --- a/packages/twenty-ui/src/input/button/components/MainButton.tsx +++ b/packages/twenty-ui/src/input/button/components/MainButton.tsx @@ -1,7 +1,6 @@ import { styled } from '@linaria/react'; import { type IconComponent } from '@ui/display'; -import { ThemeContext } from '@ui/theme'; -import { themeCssVariables } from '@ui/theme-constants'; +import { ThemeContext, themeCssVariables } from '@ui/theme-constants'; import React, { type FunctionComponent, useContext } from 'react'; export type MainButtonVariant = 'primary' | 'secondary'; @@ -106,6 +105,7 @@ export const MainButton = ({ className, }: MainButtonProps) => { const { theme } = useContext(ThemeContext); + return ( { const { theme } = useContext(ThemeContext); + const iconColor = active ? theme.font.color.primary : disabled diff --git a/packages/twenty-ui/src/input/code-editor/components/CodeEditor.tsx b/packages/twenty-ui/src/input/code-editor/components/CodeEditor.tsx index a63fc992cf..16df34e685 100644 --- a/packages/twenty-ui/src/input/code-editor/components/CodeEditor.tsx +++ b/packages/twenty-ui/src/input/code-editor/components/CodeEditor.tsx @@ -5,8 +5,7 @@ import { ResizeHandle } from '@ui/layout/resize-handle/components/ResizeHandle'; import { BASE_CODE_EDITOR_THEME_ID } from '@ui/input/code-editor/constants/BaseCodeEditorThemeId'; import { useResizeHandle } from '@ui/layout/resize-handle/hooks/useResizeHandle'; import { getBaseCodeEditorTheme } from '@ui/input/code-editor/theme/utils/getBaseCodeEditorTheme'; -import { ThemeContext } from '@ui/theme'; -import { themeCssVariables } from '@ui/theme-constants'; +import { ThemeContext, themeCssVariables } from '@ui/theme-constants'; import { type editor } from 'monaco-editor'; import { type KeyboardEvent, useContext, useState } from 'react'; import { isDefined } from 'twenty-shared/utils'; @@ -189,9 +188,7 @@ export const CodeEditor = ({ monaco.editor.defineTheme( BASE_CODE_EDITOR_THEME_ID, - getBaseCodeEditorTheme({ - theme, - }), + getBaseCodeEditorTheme(theme), ); monaco.editor.setTheme(BASE_CODE_EDITOR_THEME_ID); diff --git a/packages/twenty-ui/src/input/code-editor/theme/utils/getBaseCodeEditorTheme.ts b/packages/twenty-ui/src/input/code-editor/theme/utils/getBaseCodeEditorTheme.ts index 6e571e6b05..26fc71322e 100644 --- a/packages/twenty-ui/src/input/code-editor/theme/utils/getBaseCodeEditorTheme.ts +++ b/packages/twenty-ui/src/input/code-editor/theme/utils/getBaseCodeEditorTheme.ts @@ -1,4 +1,4 @@ -import { type ThemeType } from '@ui/theme'; +import { type ThemeType } from '@ui/theme-constants'; import { type editor } from 'monaco-editor'; import { isDefined } from 'twenty-shared/utils'; @@ -31,11 +31,9 @@ const convertColorToHex = (color: string): string => { return color; }; -export const getBaseCodeEditorTheme = ({ - theme, -}: { - theme: ThemeType; -}): editor.IStandaloneThemeData => { +export const getBaseCodeEditorTheme = ( + theme: ThemeType, +): editor.IStandaloneThemeData => { return { base: 'vs', inherit: true, @@ -45,12 +43,18 @@ export const getBaseCodeEditorTheme = ({ foreground: convertColorToHex(theme.code.text.gray), fontStyle: 'bold', }, - { token: 'keyword', foreground: convertColorToHex(theme.code.text.sky) }, + { + token: 'keyword', + foreground: convertColorToHex(theme.code.text.sky), + }, { token: 'delimiter', foreground: convertColorToHex(theme.code.text.gray), }, - { token: 'string', foreground: convertColorToHex(theme.code.text.pink) }, + { + token: 'string', + foreground: convertColorToHex(theme.code.text.pink), + }, { token: 'comment', foreground: convertColorToHex(theme.code.text.orange), diff --git a/packages/twenty-ui/src/input/color-scheme/components/ColorSchemeCard.tsx b/packages/twenty-ui/src/input/color-scheme/components/ColorSchemeCard.tsx index 0ac79f1f74..a4f2f72723 100644 --- a/packages/twenty-ui/src/input/color-scheme/components/ColorSchemeCard.tsx +++ b/packages/twenty-ui/src/input/color-scheme/components/ColorSchemeCard.tsx @@ -1,8 +1,6 @@ import { styled } from '@linaria/react'; import { Checkmark } from '@ui/display/checkmark/components/Checkmark'; import { type ColorScheme } from '@ui/input/types/ColorScheme'; -import { GRAY_SCALE_DARK, GRAY_SCALE_LIGHT } from '@ui/theme'; -import { themeCssVariables } from '@ui/theme-constants'; import { AnimatePresence, type AnimationControls, @@ -10,6 +8,9 @@ import { useAnimation, } from 'framer-motion'; import React from 'react'; +import { GRAY_SCALE_DARK } from '@ui/theme/constants/GrayScaleDark'; +import { GRAY_SCALE_LIGHT } from '@ui/theme/constants/GrayScaleLight'; +import { themeCssVariables } from '@ui/theme-constants'; const StyledColorSchemeBackground = styled.div< Pick diff --git a/packages/twenty-ui/src/input/color-scheme/components/__stories__/ColorSchemeCard.stories.tsx b/packages/twenty-ui/src/input/color-scheme/components/__stories__/ColorSchemeCard.stories.tsx index 70aa1264ab..59c1c7b531 100644 --- a/packages/twenty-ui/src/input/color-scheme/components/__stories__/ColorSchemeCard.stories.tsx +++ b/packages/twenty-ui/src/input/color-scheme/components/__stories__/ColorSchemeCard.stories.tsx @@ -1,16 +1,15 @@ import { styled } from '@linaria/react'; import { type Meta, type StoryObj } from '@storybook/react-vite'; import { ComponentDecorator } from '@ui/testing'; -import { useContext } from 'react'; -import { ThemeContext, type ThemeType } from '@ui/theme'; +import { themeCssVariables } from '@ui/theme-constants'; import { ColorSchemeCard } from '../ColorSchemeCard'; -const StyledContainer = styled.div<{ theme: ThemeType }>` +const StyledContainer = styled.div` display: flex; flex-direction: row; > * + * { - margin-left: ${({ theme }) => theme.spacing(4)}; + margin-left: ${themeCssVariables.spacing['4']}; } `; @@ -19,10 +18,8 @@ const meta: Meta = { component: ColorSchemeCard, decorators: [ (Story) => { - const { theme } = useContext(ThemeContext); - return ( - + ); diff --git a/packages/twenty-ui/src/input/components/SearchInput.tsx b/packages/twenty-ui/src/input/components/SearchInput.tsx index 52aa0e0f55..daa162f8bd 100644 --- a/packages/twenty-ui/src/input/components/SearchInput.tsx +++ b/packages/twenty-ui/src/input/components/SearchInput.tsx @@ -1,8 +1,7 @@ import { styled } from '@linaria/react'; import { IconFilter, IconSearch } from '@ui/display'; import { IconButton } from '@ui/input/button/components/IconButton'; -import { ThemeContext } from '@ui/theme'; -import { themeCssVariables } from '@ui/theme-constants'; +import { ThemeContext, themeCssVariables } from '@ui/theme-constants'; import { type ChangeEvent, type ReactNode, useContext, useState } from 'react'; export type SearchInputProps = { diff --git a/packages/twenty-ui/src/input/components/__stories__/Toggle.stories.tsx b/packages/twenty-ui/src/input/components/__stories__/Toggle.stories.tsx index 3d01003629..ca4989b476 100644 --- a/packages/twenty-ui/src/input/components/__stories__/Toggle.stories.tsx +++ b/packages/twenty-ui/src/input/components/__stories__/Toggle.stories.tsx @@ -4,7 +4,7 @@ import { type CatalogStory, ComponentDecorator, } from '@ui/testing'; -import { MAIN_COLORS_LIGHT } from '@ui/theme'; +import { themeCssVariables } from '@ui/theme-constants'; import { useState } from 'react'; import { Toggle, type ToggleSize } from '../Toggle'; @@ -88,7 +88,7 @@ export const Catalog: CatalogStory = { if (color === 'default') { return {}; } - return { color: MAIN_COLORS_LIGHT.yellow }; + return { color: themeCssVariables.color.yellow }; }, }, ], diff --git a/packages/twenty-ui/src/json-visualizer/components/internal/JsonArrow.tsx b/packages/twenty-ui/src/json-visualizer/components/internal/JsonArrow.tsx index 8cd0bf4bbc..de647d78f1 100644 --- a/packages/twenty-ui/src/json-visualizer/components/internal/JsonArrow.tsx +++ b/packages/twenty-ui/src/json-visualizer/components/internal/JsonArrow.tsx @@ -2,7 +2,8 @@ import { styled } from '@linaria/react'; import { VisibilityHidden } from '@ui/accessibility'; import { IconChevronDown } from '@ui/display'; import { useJsonTreeContextOrThrow } from '@ui/json-visualizer/hooks/useJsonTreeContextOrThrow'; -import { ICON_SIZES, themeCssVariables } from '@ui/theme-constants'; +import { ThemeContext, themeCssVariables } from '@ui/theme-constants'; +import { useContext } from 'react'; import { motion } from 'framer-motion'; const StyledButton = styled.button<{ @@ -38,6 +39,7 @@ export const JsonArrow = ({ onClick: () => void; variant?: 'blue' | 'red'; }) => { + const { theme } = useContext(ThemeContext); const { arrowButtonCollapsedLabel, arrowButtonExpandedLabel } = useJsonTreeContextOrThrow(); @@ -59,7 +61,7 @@ export const JsonArrow = ({ animate={{ rotate: isOpen ? 0 : -90 }} transition={{ duration: 0.3 }} > - + ); diff --git a/packages/twenty-ui/src/json-visualizer/components/internal/JsonNodeLabel.tsx b/packages/twenty-ui/src/json-visualizer/components/internal/JsonNodeLabel.tsx index 4899c7ded6..05e8c52e19 100644 --- a/packages/twenty-ui/src/json-visualizer/components/internal/JsonNodeLabel.tsx +++ b/packages/twenty-ui/src/json-visualizer/components/internal/JsonNodeLabel.tsx @@ -1,8 +1,7 @@ import { styled } from '@linaria/react'; import { type IconComponent } from '@ui/display'; import { type JsonNodeHighlighting } from '@ui/json-visualizer/types/JsonNodeHighlighting'; -import { ThemeContext } from '@ui/theme'; -import { themeCssVariables } from '@ui/theme-constants'; +import { ThemeContext, themeCssVariables } from '@ui/theme-constants'; import { useContext } from 'react'; const StyledLabelContainer = styled.span<{ diff --git a/packages/twenty-ui/src/layout/animated-expandable-container/__stories__/AnimatedExpandableContainer.stories.tsx b/packages/twenty-ui/src/layout/animated-expandable-container/__stories__/AnimatedExpandableContainer.stories.tsx index 1ec8acca4d..64fb8db13e 100644 --- a/packages/twenty-ui/src/layout/animated-expandable-container/__stories__/AnimatedExpandableContainer.stories.tsx +++ b/packages/twenty-ui/src/layout/animated-expandable-container/__stories__/AnimatedExpandableContainer.stories.tsx @@ -1,21 +1,21 @@ import { styled } from '@linaria/react'; import { type Meta, type StoryObj } from '@storybook/react-vite'; import { ComponentDecorator } from '@ui/testing'; -import { useContext, useState } from 'react'; -import { ThemeContext, type ThemeType } from '@ui/theme'; +import { useState } from 'react'; +import { themeCssVariables } from '@ui/theme-constants'; import { AnimatedExpandableContainer } from '../components/AnimatedExpandableContainer'; -const StyledButton = styled.button<{ theme: ThemeType }>` - padding: ${({ theme }) => theme.spacing(2)} ${({ theme }) => theme.spacing(4)}; - background-color: ${({ theme }) => theme.color.blue10}; - color: ${({ theme }) => theme.font.color.primary}; +const StyledButton = styled.button` + padding: ${themeCssVariables.spacing['2']} ${themeCssVariables.spacing['4']}; + background-color: ${themeCssVariables.color.blue10}; + color: ${themeCssVariables.font.color.primary}; border: none; - border-radius: ${({ theme }) => theme.spacing(1)}; + border-radius: ${themeCssVariables.spacing['1']}; cursor: pointer; - margin-bottom: ${({ theme }) => theme.spacing(3)}; + margin-bottom: ${themeCssVariables.spacing['3']}; &:hover { - background-color: ${({ theme }) => theme.color.blue8}; + background-color: ${themeCssVariables.color.blue8}; } `; @@ -24,8 +24,8 @@ const StyledButtonWrapper = styled.div<{ dimension: 'width' | 'height' }>` width: ${({ dimension }) => (dimension === 'height' ? '600px' : 'auto')}; `; -const StyledExpandableWrapper = styled.div<{ theme: ThemeType }>` - background-color: ${({ theme }) => theme.background.primary}; +const StyledExpandableWrapper = styled.div` + background-color: ${themeCssVariables.background.primary}; height: 100%; width: 100%; `; @@ -33,17 +33,16 @@ const StyledExpandableWrapper = styled.div<{ theme: ThemeType }>` const StyledContent = styled.div<{ dimension: 'width' | 'height'; mode: 'scroll-height' | 'fit-content'; - theme: ThemeType; }>` - padding: ${({ theme }) => theme.spacing(3)}; + padding: ${themeCssVariables.spacing['3']}; height: ${({ dimension, mode }) => dimension === 'height' && mode === 'scroll-height' ? '200px' : 'auto'}; width: ${({ dimension }) => (dimension === 'width' ? '400px' : 'auto')}; p { - color: ${({ theme }) => theme.font.color.primary}; - margin-bottom: ${({ theme }) => theme.spacing(2)}; - font-size: ${({ theme }) => theme.font.size.md}; + color: ${themeCssVariables.font.color.primary}; + margin-bottom: ${themeCssVariables.spacing['2']}; + font-size: ${themeCssVariables.font.size.md}; } `; @@ -63,12 +62,11 @@ const AnimatedExpandableContainerWithButton = ({ isExpanded: initialIsExpanded, ...args }: AnimatedExpandableContainerWithButtonProps) => { - const { theme } = useContext(ThemeContext); const [isExpanded, setIsExpanded] = useState(initialIsExpanded); return ( - setIsExpanded(!isExpanded)}> + setIsExpanded(!isExpanded)}> {isExpanded ? 'Collapse' : 'Expand'} - - + +

This is some content inside the AnimatedExpandableContainer. It will animate smoothly when expanding or collapsing. diff --git a/packages/twenty-ui/src/layout/animated-expandable-container/components/AnimatedExpandableContainer.tsx b/packages/twenty-ui/src/layout/animated-expandable-container/components/AnimatedExpandableContainer.tsx index 4cfedde570..ae8ad0b08b 100644 --- a/packages/twenty-ui/src/layout/animated-expandable-container/components/AnimatedExpandableContainer.tsx +++ b/packages/twenty-ui/src/layout/animated-expandable-container/components/AnimatedExpandableContainer.tsx @@ -4,7 +4,7 @@ import { type AnimationDurations } from '@ui/layout/animated-expandable-containe import { type AnimationMode } from '@ui/layout/animated-expandable-container/types/AnimationMode'; import { type AnimationSize } from '@ui/layout/animated-expandable-container/types/AnimationSize'; import { getExpandableAnimationConfig } from '@ui/layout/animated-expandable-container/utils/getExpandableAnimationConfig'; -import { ThemeContext } from '@ui/theme'; +import { ThemeContext } from '@ui/theme-constants'; import { AnimatePresence, motion } from 'framer-motion'; import { type ReactNode, useContext, useRef, useState } from 'react'; import { isDefined } from 'twenty-shared/utils'; @@ -32,11 +32,13 @@ export const AnimatedExpandableContainer = ({ const contentRef = useRef(null); const [size, setSize] = useState(0); + const normalDuration = theme.animation.duration.normal; + const actualDurations: AnimationDurationObject = animationDurations === 'default' ? { - opacity: theme.animation.duration.normal, - size: theme.animation.duration.normal, + opacity: normalDuration, + size: normalDuration, } : animationDurations; diff --git a/packages/twenty-ui/src/layout/animated-placeholder/components/AnimatedPlaceholder.tsx b/packages/twenty-ui/src/layout/animated-placeholder/components/AnimatedPlaceholder.tsx index 48b4c05aeb..7d3836523e 100644 --- a/packages/twenty-ui/src/layout/animated-placeholder/components/AnimatedPlaceholder.tsx +++ b/packages/twenty-ui/src/layout/animated-placeholder/components/AnimatedPlaceholder.tsx @@ -3,7 +3,7 @@ import { BACKGROUND } from '@ui/layout/animated-placeholder/constants/Background import { DARK_BACKGROUND } from '@ui/layout/animated-placeholder/constants/DarkBackground'; import { DARK_MOVING_IMAGE } from '@ui/layout/animated-placeholder/constants/DarkMovingImage'; import { MOVING_IMAGE } from '@ui/layout/animated-placeholder/constants/MovingImage'; -import { ThemeContext } from '@ui/theme'; +import { ThemeContext } from '@ui/theme-constants'; import { animate, motion, useMotionValue, useTransform } from 'framer-motion'; import { useContext, useEffect } from 'react'; @@ -38,7 +38,7 @@ interface AnimatedPlaceholderProps { } export const AnimatedPlaceholder = ({ type }: AnimatedPlaceholderProps) => { - const { theme } = useContext(ThemeContext); + const { colorScheme } = useContext(ThemeContext); const x = useMotionValue(window.innerWidth / 2); const y = useMotionValue(window.innerHeight / 2); @@ -84,13 +84,13 @@ export const AnimatedPlaceholder = ({ type }: AnimatedPlaceholderProps) => { return ( { + const { theme } = useContext(ThemeContext); const internalRef = useRef(null); const resolvedRef = externalRef ?? internalRef; - const { theme } = useContext(ThemeContext); const handleBackdropMouseDown = (e: React.MouseEvent) => { e.stopPropagation(); @@ -158,7 +157,9 @@ export const Modal = ({ layout overlay={overlay} variants={modalAnimation} - transition={{ duration: theme.animation.duration.normal }} + transition={{ + duration: theme.animation.duration.normal, + }} isMobile={isMobile} gap={gap} smallBorderRadius={smallBorderRadius} diff --git a/packages/twenty-ui/src/navigation/link/components/AdvancedSettingsToggle.tsx b/packages/twenty-ui/src/navigation/link/components/AdvancedSettingsToggle.tsx index 70477372b2..c9a7958bfb 100644 --- a/packages/twenty-ui/src/navigation/link/components/AdvancedSettingsToggle.tsx +++ b/packages/twenty-ui/src/navigation/link/components/AdvancedSettingsToggle.tsx @@ -1,8 +1,7 @@ import { styled } from '@linaria/react'; import { IconPoint } from '@ui/display'; import { Toggle } from '@ui/input'; -import { ThemeContext } from '@ui/theme'; -import { themeCssVariables } from '@ui/theme-constants'; +import { ThemeContext, themeCssVariables } from '@ui/theme-constants'; import { useContext, useId } from 'react'; const StyledContainer = styled.div` @@ -46,21 +45,19 @@ export const AdvancedSettingsToggle = ({ setIsAdvancedModeEnabled, label = 'Advanced:', }: AdvancedSettingsToggleProps) => { + const { theme } = useContext(ThemeContext); + const onChange = (newValue: boolean) => { setIsAdvancedModeEnabled(newValue); }; const instanceId = useId(); - const { theme } = useContext(ThemeContext); + const yellowColor = theme.color.yellow; return ( - + {label} @@ -68,7 +65,7 @@ export const AdvancedSettingsToggle = ({ diff --git a/packages/twenty-ui/src/navigation/link/components/GithubVersionLink.tsx b/packages/twenty-ui/src/navigation/link/components/GithubVersionLink.tsx index a0888a869a..d045e5bf12 100644 --- a/packages/twenty-ui/src/navigation/link/components/GithubVersionLink.tsx +++ b/packages/twenty-ui/src/navigation/link/components/GithubVersionLink.tsx @@ -1,8 +1,8 @@ -import { useContext } from 'react'; import { IconBrandGithub } from '@ui/display'; -import { ThemeContext } from '@ui/theme'; import { ClickToActionLink } from '@ui/navigation/link/components/ClickToActionLink'; import { GITHUB_LINK } from '../constants/GithubLink'; +import { ThemeContext } from '@ui/theme-constants'; +import { useContext } from 'react'; interface GithubVersionLinkProps { version: string; diff --git a/packages/twenty-ui/src/navigation/menu/components/MenuPicker.tsx b/packages/twenty-ui/src/navigation/menu/components/MenuPicker.tsx index 60cde938df..d49b2d5e3f 100644 --- a/packages/twenty-ui/src/navigation/menu/components/MenuPicker.tsx +++ b/packages/twenty-ui/src/navigation/menu/components/MenuPicker.tsx @@ -6,11 +6,8 @@ import { TooltipPosition, type IconComponent, } from '@ui/display'; -import { - ICON_SIZES, - ICON_STROKES, - themeCssVariables, -} from '@ui/theme-constants'; +import { ThemeContext, themeCssVariables } from '@ui/theme-constants'; +import { useContext } from 'react'; import { isDefined } from 'twenty-shared/utils'; const StyledMenuPicker = styled.button<{ @@ -137,6 +134,8 @@ export const MenuPicker = ({ tooltipDelay = TooltipDelay.noDelay, tooltipOffset = 5, }: MenuPickerProps) => { + const { theme } = useContext(ThemeContext); + return ( <> - + {isDefined(label) && showLabel && ( diff --git a/packages/twenty-ui/src/navigation/menu/components/__stories__/MenuPicker.stories.tsx b/packages/twenty-ui/src/navigation/menu/components/__stories__/MenuPicker.stories.tsx index f7188214dd..f971478da6 100644 --- a/packages/twenty-ui/src/navigation/menu/components/__stories__/MenuPicker.stories.tsx +++ b/packages/twenty-ui/src/navigation/menu/components/__stories__/MenuPicker.stories.tsx @@ -3,8 +3,8 @@ import { type Meta, type StoryObj } from '@storybook/react-vite'; import { IconChartPie, TooltipDelay } from '@ui/display'; import { MenuPicker } from '@ui/navigation/menu/components/MenuPicker'; import { ComponentDecorator } from '@ui/testing'; -import { type ReactNode, useContext } from 'react'; -import { ThemeContext, type ThemeType } from '@ui/theme'; +import { type ReactNode } from 'react'; +import { themeCssVariables } from '@ui/theme-constants'; const meta: Meta = { title: 'UI/Navigation/Menu/MenuPicker', @@ -50,16 +50,15 @@ export const WithoutLabel: Story = { }, }; -const StyledTitle = styled.h4<{ theme: ThemeType }>` +const StyledTitle = styled.h4` align-items: center; - color: ${({ theme }) => theme.font.color.tertiary}; + color: ${themeCssVariables.font.color.tertiary}; font-size: 12px; margin-bottom: 8px; `; const SectionTitle = ({ children }: { children?: ReactNode }) => { - const { theme } = useContext(ThemeContext); - return {children}; + return {children}; }; export const AllStates: Story = { diff --git a/packages/twenty-ui/src/navigation/menu/menu-item/components/MenuItem.tsx b/packages/twenty-ui/src/navigation/menu/menu-item/components/MenuItem.tsx index 3ff01db3e8..927dfbc2c8 100644 --- a/packages/twenty-ui/src/navigation/menu/menu-item/components/MenuItem.tsx +++ b/packages/twenty-ui/src/navigation/menu/menu-item/components/MenuItem.tsx @@ -11,7 +11,7 @@ import { import { styled } from '@linaria/react'; import { MenuItemHotKeys } from '@ui/navigation/menu/menu-item/components/MenuItemHotKeys'; -import { ThemeContext } from '@ui/theme'; +import { ThemeContext } from '@ui/theme-constants'; import { motion } from 'framer-motion'; import { MenuItemLeftContent } from '../internals/components/MenuItemLeftContent'; import { @@ -134,7 +134,9 @@ export const MenuItem = ({ {hasSubMenu && !disabled && ( { const { theme } = useContext(ThemeContext); + return ( = { diff --git a/packages/twenty-ui/src/navigation/menu/menu-item/internals/components/MenuItemIcon.tsx b/packages/twenty-ui/src/navigation/menu/menu-item/internals/components/MenuItemIcon.tsx index cfa519276d..087b432c84 100644 --- a/packages/twenty-ui/src/navigation/menu/menu-item/internals/components/MenuItemIcon.tsx +++ b/packages/twenty-ui/src/navigation/menu/menu-item/internals/components/MenuItemIcon.tsx @@ -1,8 +1,7 @@ -import { useContext } from 'react'; - import { type IconComponent } from '@ui/display'; +import { useContext } from 'react'; +import { ThemeContext } from '@ui/theme-constants'; import { MenuItemIconBoxContainer } from './MenuItemIconBoxContainer'; -import { ThemeContext } from '@ui/theme'; export type MenuItemIconProps = { Icon: IconComponent | null | undefined; diff --git a/packages/twenty-ui/src/navigation/menu/menu-item/internals/components/MenuItemIconWithGripSwap.tsx b/packages/twenty-ui/src/navigation/menu/menu-item/internals/components/MenuItemIconWithGripSwap.tsx index 825a7dd9ca..df8d051217 100644 --- a/packages/twenty-ui/src/navigation/menu/menu-item/internals/components/MenuItemIconWithGripSwap.tsx +++ b/packages/twenty-ui/src/navigation/menu/menu-item/internals/components/MenuItemIconWithGripSwap.tsx @@ -1,10 +1,7 @@ import { styled } from '@linaria/react'; import { type IconComponent, IconGripVertical } from '@ui/display'; -import { - ICON_SIZES, - ICON_STROKES, - themeCssVariables, -} from '@ui/theme-constants'; +import { ThemeContext, themeCssVariables } from '@ui/theme-constants'; +import { useContext } from 'react'; import { MenuItemIconBoxContainer } from './MenuItemIconBoxContainer'; const StyledIconSwapContainer = styled.div` @@ -39,6 +36,8 @@ export const MenuItemIconWithGripSwap = ({ withIconContainer = false, gripIconColor, }: MenuItemIconWithGripSwapProps) => { + const { theme } = useContext(ThemeContext); + if (!LeftIcon) { return null; } @@ -46,12 +45,12 @@ export const MenuItemIconWithGripSwap = ({ const iconContent = ( - + diff --git a/packages/twenty-ui/src/navigation/menu/menu-item/internals/components/MenuItemLeftContent.tsx b/packages/twenty-ui/src/navigation/menu/menu-item/internals/components/MenuItemLeftContent.tsx index d5d8063449..f500ab581f 100644 --- a/packages/twenty-ui/src/navigation/menu/menu-item/internals/components/MenuItemLeftContent.tsx +++ b/packages/twenty-ui/src/navigation/menu/menu-item/internals/components/MenuItemLeftContent.tsx @@ -1,5 +1,5 @@ import { isNonEmptyString, isString } from '@sniptt/guards'; -import { type ReactNode } from 'react'; +import { type ReactNode, useContext } from 'react'; import { styled } from '@linaria/react'; import { @@ -7,11 +7,7 @@ import { IconGripVertical, OverflowingTextWithTooltip, } from '@ui/display'; -import { - ICON_SIZES, - ICON_STROKES, - themeCssVariables, -} from '@ui/theme-constants'; +import { ThemeContext, themeCssVariables } from '@ui/theme-constants'; import { type MenuItemDraggableGripMode } from '../../types/MenuItemDraggableGripMode'; import { MenuItemIcon } from './MenuItemIcon'; import { MenuItemIconBoxContainer } from './MenuItemIconBoxContainer'; @@ -59,6 +55,8 @@ export const MenuItemLeftContent = ({ gripMode = 'never', disabled = false, }: MenuItemLeftContentProps) => { + const { theme } = useContext(ThemeContext); + const gripIconColor = withIconContainer ? themeCssVariables.font.color.tertiary : disabled @@ -72,8 +70,8 @@ export const MenuItemLeftContent = ({ @@ -81,8 +79,8 @@ export const MenuItemLeftContent = ({ ) : ( diff --git a/packages/twenty-ui/src/navigation/navigation-bar/components/NavigationBarItem.tsx b/packages/twenty-ui/src/navigation/navigation-bar/components/NavigationBarItem.tsx index f6489d94e3..f897c670e4 100644 --- a/packages/twenty-ui/src/navigation/navigation-bar/components/NavigationBarItem.tsx +++ b/packages/twenty-ui/src/navigation/navigation-bar/components/NavigationBarItem.tsx @@ -1,6 +1,7 @@ import { styled } from '@linaria/react'; import { type IconComponent } from '@ui/display/icon/types/IconComponent'; -import { ICON_SIZES, themeCssVariables } from '@ui/theme-constants'; +import { ThemeContext, themeCssVariables } from '@ui/theme-constants'; +import { useContext } from 'react'; const StyledIconButton = styled.div<{ isActive?: boolean }>` align-items: center; @@ -30,8 +31,15 @@ export const NavigationBarItem = ({ Icon, isActive, onClick, -}: NavigationBarItemProps) => ( - - - -); +}: NavigationBarItemProps) => { + const { theme } = useContext(ThemeContext); + + return ( + + + + ); +}; diff --git a/packages/twenty-ui/src/testing/ComponentStorybookLayout.tsx b/packages/twenty-ui/src/testing/ComponentStorybookLayout.tsx index 9592f182e5..006e28c4ce 100644 --- a/packages/twenty-ui/src/testing/ComponentStorybookLayout.tsx +++ b/packages/twenty-ui/src/testing/ComponentStorybookLayout.tsx @@ -1,17 +1,15 @@ import { styled } from '@linaria/react'; -import { useContext } from 'react'; import { isDefined } from 'twenty-shared/utils'; -import { ThemeContext, type ThemeType } from '@ui/theme'; +import { themeCssVariables } from '@ui/theme-constants'; const StyledLayout = styled.div<{ width?: number; backgroundColor?: string | undefined; height: number | 'fit-content'; - theme: ThemeType; }>` - background: ${({ theme, backgroundColor }) => - backgroundColor ?? theme.background.primary}; - border: 1px solid ${({ theme }) => theme.border.color.light}; + background: ${({ backgroundColor }) => + backgroundColor ?? themeCssVariables.background.primary}; + border: 1px solid ${themeCssVariables.border.color.light}; border-radius: 5px; display: flex; @@ -42,14 +40,11 @@ export const ComponentStorybookLayout = ({ height, children, }: ComponentStorybookLayoutProps) => { - const { theme } = useContext(ThemeContext); - return ( {children} diff --git a/packages/twenty-ui/src/testing/decorators/CatalogDecorator.tsx b/packages/twenty-ui/src/testing/decorators/CatalogDecorator.tsx index 34b045411c..548caaf848 100644 --- a/packages/twenty-ui/src/testing/decorators/CatalogDecorator.tsx +++ b/packages/twenty-ui/src/testing/decorators/CatalogDecorator.tsx @@ -1,36 +1,36 @@ import { styled } from '@linaria/react'; import { isNumber, isString } from '@sniptt/guards'; import { type Decorator } from '@storybook/react-vite'; -import { type ComponentProps, type JSX, useContext } from 'react'; -import { ThemeContext, type ThemeType } from '@ui/theme'; +import { type ComponentProps, type JSX } from 'react'; +import { themeCssVariables } from '@ui/theme-constants'; -const StyledColumnTitle = styled.h1<{ theme: ThemeType }>` - font-size: ${({ theme }) => theme.font.size.lg}; - font-weight: ${({ theme }) => theme.font.weight.semiBold}; - margin: ${({ theme }) => theme.spacing(2)}; +const StyledColumnTitle = styled.h1` + font-size: ${themeCssVariables.font.size.lg}; + font-weight: ${themeCssVariables.font.weight.semiBold}; + margin: ${themeCssVariables.spacing[2]}; `; -const StyledRowsTitle = styled.h2<{ theme: ThemeType }>` - color: ${({ theme }) => theme.font.color.secondary}; - font-size: ${({ theme }) => theme.font.size.md}; - font-weight: ${({ theme }) => theme.font.weight.semiBold}; - margin: ${({ theme }) => theme.spacing(2)}; +const StyledRowsTitle = styled.h2` + color: ${themeCssVariables.font.color.secondary}; + font-size: ${themeCssVariables.font.size.md}; + font-weight: ${themeCssVariables.font.weight.semiBold}; + margin: ${themeCssVariables.spacing[2]}; width: 100px; `; -const StyledRowTitle = styled.h3<{ theme: ThemeType }>` - color: ${({ theme }) => theme.font.color.tertiary}; - font-size: ${({ theme }) => theme.font.size.md}; - font-weight: ${({ theme }) => theme.font.weight.semiBold}; - margin: ${({ theme }) => theme.spacing(2)}; +const StyledRowTitle = styled.h3` + color: ${themeCssVariables.font.color.tertiary}; + font-size: ${themeCssVariables.font.size.md}; + font-weight: ${themeCssVariables.font.weight.semiBold}; + margin: ${themeCssVariables.spacing[2]}; width: 100px; `; -const StyledElementTitle = styled.span<{ theme: ThemeType }>` - color: ${({ theme }) => theme.font.color.light}; - font-size: ${({ theme }) => theme.font.size.xs}; - font-weight: ${({ theme }) => theme.font.weight.semiBold}; - margin-bottom: ${({ theme }) => theme.spacing(1)}; +const StyledElementTitle = styled.span` + color: ${themeCssVariables.font.color.light}; + font-size: ${themeCssVariables.font.size.xs}; + font-weight: ${themeCssVariables.font.weight.semiBold}; + margin-bottom: ${themeCssVariables.spacing[1]}; text-align: center; text-transform: uppercase; `; @@ -40,23 +40,23 @@ const StyledContainer = styled.div` flex-direction: row; `; -const StyledColumnContainer = styled.div<{ theme: ThemeType }>` +const StyledColumnContainer = styled.div` display: flex; flex-direction: column; - padding: ${({ theme }) => theme.spacing(2)}; + padding: ${themeCssVariables.spacing[2]}; `; -const StyledRowsContainer = styled.div<{ theme: ThemeType }>` +const StyledRowsContainer = styled.div` display: flex; flex-direction: column; - gap: ${({ theme }) => theme.spacing(2)}; + gap: ${themeCssVariables.spacing[2]}; `; -const StyledRowContainer = styled.div<{ theme: ThemeType }>` +const StyledRowContainer = styled.div` display: flex; flex: 1; flex-direction: row; - gap: ${({ theme }) => theme.spacing(2)}; + gap: ${themeCssVariables.spacing[2]}; `; const StyledElementContainer = styled.div<{ width: number }>` @@ -64,11 +64,11 @@ const StyledElementContainer = styled.div<{ width: number }>` min-width: ${({ width }) => (width ? `${width}px` : 'auto')}; `; -const StyledCellContainer = styled.div<{ theme: ThemeType }>` +const StyledCellContainer = styled.div` align-items: center; display: flex; flex-direction: column; - padding: ${({ theme }) => theme.spacing(2)}; + padding: ${themeCssVariables.spacing[2]}; `; const emptyDimension = { @@ -98,8 +98,6 @@ export type CatalogOptions = { }; export const CatalogDecorator: Decorator = (Story, context) => { - const { theme } = useContext(ThemeContext); - const { catalog: { dimensions = [], options = {} } = { dimensions: [], @@ -121,31 +119,27 @@ export const CatalogDecorator: Decorator = (Story, context) => { return ( {dimension4.values.map((value4: any, index4: number) => ( - - + + {dimension4.labels?.(value4) ?? (isStringOrNumber(value4) ? value4 : '')} {dimension3.values.map((value3: any, index3: number) => ( - - + + {dimension3.labels?.(value3) ?? (isStringOrNumber(value3) ? value3 : '')} {dimension2.values.map((value2: any, index2: number) => ( - - + + {dimension2.labels?.(value2) ?? (isStringOrNumber(value2) ? value2 : '')} {dimension1.values.map((value1: any, index1: number) => { return ( - - + + {dimension1.labels?.(value1) ?? (isStringOrNumber(value1) ? value1 : '')} diff --git a/packages/twenty-ui/src/testing/decorators/ComponentDecorator.tsx b/packages/twenty-ui/src/testing/decorators/ComponentDecorator.tsx index 3aae39ebb1..966f74cb11 100644 --- a/packages/twenty-ui/src/testing/decorators/ComponentDecorator.tsx +++ b/packages/twenty-ui/src/testing/decorators/ComponentDecorator.tsx @@ -1,6 +1,6 @@ import { type Decorator } from '@storybook/react-vite'; -import { GRAY_SCALE_LIGHT, MAIN_COLORS_LIGHT } from '@ui/theme'; +import { themeCssVariables } from '@ui/theme-constants'; import { ComponentStorybookLayout } from '../ComponentStorybookLayout'; @@ -9,11 +9,11 @@ const getBackgroundColor = (inverted: boolean, accent: string) => { switch (accent) { case 'default': - return GRAY_SCALE_LIGHT.gray11; + return themeCssVariables.grayScale.gray11; case 'danger': - return MAIN_COLORS_LIGHT.red; + return themeCssVariables.color.red; case 'blue': - return MAIN_COLORS_LIGHT.blue; + return themeCssVariables.color.blue; default: return undefined; } diff --git a/packages/twenty-ui/src/theme-constants/ThemeProvider.tsx b/packages/twenty-ui/src/theme-constants/ThemeProvider.tsx new file mode 100644 index 0000000000..05d96ec475 --- /dev/null +++ b/packages/twenty-ui/src/theme-constants/ThemeProvider.tsx @@ -0,0 +1,119 @@ +import { createContext, useLayoutEffect, useState } from 'react'; + +import { themeCssVariables } from './themeCssVariables'; + +type StringLeaves = { + [K in keyof T]: T[K] extends string ? string : StringLeaves; +}; + +type DeepMerge = { + [K in keyof T]: K extends keyof U + ? U[K] extends Record + ? T[K] extends Record + ? DeepMerge + : U[K] + : U[K] + : T[K]; +}; + +// CSS variables that resolve to pure numbers at runtime +type NumericOverrides = { + icon: { + size: { sm: number; md: number; lg: number; xl: number }; + stroke: { sm: number; md: number; lg: number }; + }; + animation: { + duration: { instant: number; fast: number; normal: number; slow: number }; + }; + text: { + lineHeight: { lg: number; md: number }; + iconSizeMedium: number; + iconSizeSmall: number; + iconStrikeLight: number; + iconStrikeMedium: number; + iconStrikeBold: number; + }; + spacingMultiplicator: number; + lastLayerZIndex: number; +}; + +export type ThemeType = DeepMerge< + StringLeaves, + NumericOverrides +>; + +export type ThemeContextType = { + theme: ThemeType; + colorScheme: 'light' | 'dark'; +}; + +const computeThemeFromCss = (): ThemeType => { + const root = document?.documentElement; + + if (!root) { + return themeCssVariables as unknown as ThemeType; + } + + const computedStyle = getComputedStyle(root); + + const resolve = (obj: Record): Record => { + const result: Record = {}; + + for (const key of Object.keys(obj)) { + const value = obj[key]; + + if (typeof value === 'string' && value.startsWith('var(')) { + const varName = value.slice(4, -1); + const raw = computedStyle.getPropertyValue(varName).trim(); + const num = Number(raw); + result[key] = raw !== '' && !isNaN(num) ? num : raw; + } else if (typeof value === 'object' && value !== null) { + result[key] = resolve(value as Record); + } else { + result[key] = value; + } + } + + return result; + }; + + return resolve( + themeCssVariables as unknown as Record, + ) as unknown as ThemeType; +}; + +const applyColorSchemeClass = (colorScheme: 'light' | 'dark') => { + const root = document?.documentElement; + if (!root?.classList) return; + root.classList.toggle('dark', colorScheme === 'dark'); + root.classList.toggle('light', colorScheme === 'light'); +}; + +export const ThemeContext = createContext({ + theme: themeCssVariables as unknown as ThemeType, + colorScheme: 'light', +}); + +export const ThemeProvider = ({ + children, + colorScheme, +}: { + children: React.ReactNode; + colorScheme: 'light' | 'dark'; +}) => { + const [theme, setTheme] = useState(() => { + applyColorSchemeClass(colorScheme); + return computeThemeFromCss(); + }); + + useLayoutEffect(() => { + applyColorSchemeClass(colorScheme); + setTheme(computeThemeFromCss()); + }, [colorScheme]); + + return ( + + {children} + + ); +}; diff --git a/packages/twenty-ui/src/theme/utils/__tests__/getNextThemeColor.test.ts b/packages/twenty-ui/src/theme-constants/__tests__/getNextThemeColor.test.ts similarity index 75% rename from packages/twenty-ui/src/theme/utils/__tests__/getNextThemeColor.test.ts rename to packages/twenty-ui/src/theme-constants/__tests__/getNextThemeColor.test.ts index e4dfa0e2a1..b8b126433b 100644 --- a/packages/twenty-ui/src/theme/utils/__tests__/getNextThemeColor.test.ts +++ b/packages/twenty-ui/src/theme-constants/__tests__/getNextThemeColor.test.ts @@ -10,7 +10,7 @@ describe('getNextThemeColor', () => { const currentColor: ThemeColor = MAIN_COLOR_NAMES[0]; const nextColor: ThemeColor = MAIN_COLOR_NAMES[1]; - expect(getNextThemeColor(currentColor)).toBe(nextColor); + expect(getNextThemeColor(MAIN_COLOR_NAMES, currentColor)).toBe(nextColor); }); it('returns the first color when reaching the end', () => { @@ -18,11 +18,11 @@ describe('getNextThemeColor', () => { MAIN_COLOR_NAMES[MAIN_COLOR_NAMES.length - 1]; const nextColor: ThemeColor = MAIN_COLOR_NAMES[0]; - expect(getNextThemeColor(currentColor)).toBe(nextColor); + expect(getNextThemeColor(MAIN_COLOR_NAMES, currentColor)).toBe(nextColor); }); it('returns the first color when currentColorIsUndefined', () => { const firstColor: ThemeColor = MAIN_COLOR_NAMES[0]; - expect(getNextThemeColor(undefined)).toBe(firstColor); + expect(getNextThemeColor(MAIN_COLOR_NAMES, undefined)).toBe(firstColor); }); }); diff --git a/packages/twenty-ui/src/theme-constants/constants.ts b/packages/twenty-ui/src/theme-constants/constants.ts index 12145f7308..25092372ed 100644 --- a/packages/twenty-ui/src/theme-constants/constants.ts +++ b/packages/twenty-ui/src/theme-constants/constants.ts @@ -1,18 +1,3 @@ // CSS custom properties don't work in media queries, so MOBILE_VIEWPORT // must be a static number rather than a var(--...) reference. export const MOBILE_VIEWPORT = 768; - -// Numeric icon size/stroke constants for components that require pixel values -// (e.g. icon size props) rather than CSS variable strings. -export const ICON_SIZES = { - sm: 14, - md: 16, - lg: 20, - xl: 24, -} as const; - -export const ICON_STROKES = { - sm: 1.6, - md: 2, - lg: 2.5, -} as const; diff --git a/packages/twenty-ui/src/theme-constants/getNextThemeColor.ts b/packages/twenty-ui/src/theme-constants/getNextThemeColor.ts new file mode 100644 index 0000000000..7cdcc7ba9a --- /dev/null +++ b/packages/twenty-ui/src/theme-constants/getNextThemeColor.ts @@ -0,0 +1,15 @@ +import { type ThemeColor } from '@ui/theme/constants/MainColorNames'; + +export const getNextThemeColor = ( + colorNames: ThemeColor[], + currentColor?: ThemeColor, +): ThemeColor => { + if (currentColor === null || currentColor === undefined) { + return colorNames[0]; + } + const currentColorIndex = colorNames.findIndex( + (color) => color === currentColor, + ); + const nextColorIndex = (currentColorIndex + 1) % colorNames.length; + return colorNames[nextColorIndex]; +}; diff --git a/packages/twenty-ui/src/theme-constants/index.ts b/packages/twenty-ui/src/theme-constants/index.ts index 6347808cb7..7e804abded 100644 --- a/packages/twenty-ui/src/theme-constants/index.ts +++ b/packages/twenty-ui/src/theme-constants/index.ts @@ -7,5 +7,8 @@ * |___/ */ -export { MOBILE_VIEWPORT, ICON_SIZES, ICON_STROKES } from './constants'; +export { MOBILE_VIEWPORT } from './constants'; +export { getNextThemeColor } from './getNextThemeColor'; export { themeCssVariables } from './themeCssVariables'; +export type { ThemeType, ThemeContextType } from './ThemeProvider'; +export { ThemeContext, ThemeProvider } from './ThemeProvider'; diff --git a/packages/twenty-ui/src/theme/constants/ThemeDark.ts b/packages/twenty-ui/src/theme/constants/ThemeDark.ts index 15342aaa66..94cf05ea05 100644 --- a/packages/twenty-ui/src/theme/constants/ThemeDark.ts +++ b/packages/twenty-ui/src/theme/constants/ThemeDark.ts @@ -3,7 +3,6 @@ import { ILLUSTRATION_ICON_DARK } from '@ui/theme/constants/IllustrationIconDark import { COLOR_DARK } from './ColorsDark'; import { GRAY_SCALE_DARK } from './GrayScaleDark'; import { SNACK_BAR_DARK } from './SnackBarDark'; -import type { ThemeType } from '../types/ThemeType'; import { ACCENT_DARK } from './AccentDark'; import { BACKGROUND_DARK } from './BackgroundDark'; import { BORDER_DARK } from './BorderDark'; @@ -12,8 +11,9 @@ import { CODE_DARK } from './CodeDark'; import { FONT_DARK } from './FontDark'; import { TAG_DARK } from './TagDark'; import { THEME_COMMON } from './ThemeCommon'; +import type { THEME_LIGHT } from './ThemeLight'; -export const THEME_DARK: ThemeType = { +export const THEME_DARK: typeof THEME_LIGHT = { ...THEME_COMMON, ...{ accent: ACCENT_DARK, diff --git a/packages/twenty-ui/src/theme/index.ts b/packages/twenty-ui/src/theme/index.ts index 93719dad5b..f004e40070 100644 --- a/packages/twenty-ui/src/theme/index.ts +++ b/packages/twenty-ui/src/theme/index.ts @@ -52,11 +52,3 @@ export { THEME_DARK } from './constants/ThemeDark'; export { THEME_LIGHT } from './constants/ThemeLight'; export { TRANSPARENT_COLORS_DARK } from './constants/TransparentColorsDark'; export { TRANSPARENT_COLORS_LIGHT } from './constants/TransparentColorsLight'; -export type { ThemeContextType } from './provider/ThemeContextProvider'; -export { - ThemeContext, - ThemeContextProvider, -} from './provider/ThemeContextProvider'; -export { ThemeProvider } from './provider/ThemeProvider'; -export type { ThemeType } from './types/ThemeType'; -export { getNextThemeColor } from './utils/getNextThemeColor'; diff --git a/packages/twenty-ui/src/theme/provider/ThemeContextProvider.tsx b/packages/twenty-ui/src/theme/provider/ThemeContextProvider.tsx deleted file mode 100644 index 1a5abbb2e3..0000000000 --- a/packages/twenty-ui/src/theme/provider/ThemeContextProvider.tsx +++ /dev/null @@ -1,30 +0,0 @@ -import { createContext, useLayoutEffect } from 'react'; - -import { type ThemeType } from '@ui/theme/types/ThemeType'; - -export type ThemeContextType = { - theme: ThemeType; -}; - -export const ThemeContext = createContext( - {} as ThemeContextType, -); - -export const ThemeContextProvider = ({ - children, - theme, -}: { - children: React.ReactNode; - theme: ThemeType; -}) => { - useLayoutEffect(() => { - const root = document.documentElement; - const isDark = theme.name === 'dark'; - root.classList.toggle('dark', isDark); - root.classList.toggle('light', !isDark); - }, [theme.name]); - - return ( - {children} - ); -}; diff --git a/packages/twenty-ui/src/theme/provider/ThemeProvider.tsx b/packages/twenty-ui/src/theme/provider/ThemeProvider.tsx deleted file mode 100644 index 612853fdc1..0000000000 --- a/packages/twenty-ui/src/theme/provider/ThemeProvider.tsx +++ /dev/null @@ -1,14 +0,0 @@ -import { type ReactNode } from 'react'; - -import { ThemeContextProvider } from '@ui/theme/provider/ThemeContextProvider'; - -import { type ThemeType } from '..'; - -type ThemeProviderProps = { - theme: ThemeType; - children: ReactNode; -}; - -export const ThemeProvider = ({ theme, children }: ThemeProviderProps) => { - return {children}; -}; diff --git a/packages/twenty-ui/src/theme/types/ThemeType.ts b/packages/twenty-ui/src/theme/types/ThemeType.ts deleted file mode 100644 index 02d902c03e..0000000000 --- a/packages/twenty-ui/src/theme/types/ThemeType.ts +++ /dev/null @@ -1,3 +0,0 @@ -import { type THEME_LIGHT } from '../constants/ThemeLight'; - -export type ThemeType = typeof THEME_LIGHT; diff --git a/packages/twenty-ui/src/theme/utils/getNextThemeColor.ts b/packages/twenty-ui/src/theme/utils/getNextThemeColor.ts deleted file mode 100644 index 6feb92d381..0000000000 --- a/packages/twenty-ui/src/theme/utils/getNextThemeColor.ts +++ /dev/null @@ -1,13 +0,0 @@ -import { MAIN_COLOR_NAMES, type ThemeColor } from '@ui/theme'; -import { isDefined } from 'twenty-shared/utils'; - -export const getNextThemeColor = (currentColor?: ThemeColor): ThemeColor => { - if (!isDefined(currentColor)) { - return MAIN_COLOR_NAMES[0]; - } - const currentColorIndex = MAIN_COLOR_NAMES.findIndex( - (color) => color === currentColor, - ); - const nextColorIndex = (currentColorIndex + 1) % MAIN_COLOR_NAMES.length; - return MAIN_COLOR_NAMES[nextColorIndex]; -}; diff --git a/packages/twenty-ui/src/utilities/animation/components/AnimatedCircleLoading.tsx b/packages/twenty-ui/src/utilities/animation/components/AnimatedCircleLoading.tsx index 61e03d09be..342fd2973d 100644 --- a/packages/twenty-ui/src/utilities/animation/components/AnimatedCircleLoading.tsx +++ b/packages/twenty-ui/src/utilities/animation/components/AnimatedCircleLoading.tsx @@ -2,7 +2,7 @@ import React, { useContext } from 'react'; import { motion } from 'framer-motion'; import { styled } from '@linaria/react'; -import { ThemeContext } from '@ui/theme'; +import { ThemeContext } from '@ui/theme-constants'; const StyledAnimatedContainer = styled(motion.div)` align-items: center; @@ -16,6 +16,7 @@ export const AnimatedCircleLoading = ({ children: React.ReactNode; }) => { const { theme } = useContext(ThemeContext); + return ( , @@ -14,6 +15,7 @@ export const AnimatedEaseIn = ({ duration = 'normal', }: AnimatedEaseInProps) => { const { theme } = useContext(ThemeContext); + const initial = { opacity: 0 }; const animate = { opacity: 1 }; const transition = { diff --git a/packages/twenty-ui/src/utilities/animation/components/AnimatedEaseInOut.tsx b/packages/twenty-ui/src/utilities/animation/components/AnimatedEaseInOut.tsx index 6b3683ef7c..9754b0d1d2 100644 --- a/packages/twenty-ui/src/utilities/animation/components/AnimatedEaseInOut.tsx +++ b/packages/twenty-ui/src/utilities/animation/components/AnimatedEaseInOut.tsx @@ -1,6 +1,7 @@ -import { useContext } from 'react'; -import { type AnimationDuration, ThemeContext } from '@ui/theme'; import { AnimatePresence, motion } from 'framer-motion'; +import { useContext } from 'react'; +import { type AnimationDuration } from '@ui/theme'; +import { ThemeContext } from '@ui/theme-constants'; type AnimatedEaseInOutProps = { isOpen: boolean; diff --git a/packages/twenty-ui/src/utilities/animation/components/AnimatedFadeOut.tsx b/packages/twenty-ui/src/utilities/animation/components/AnimatedFadeOut.tsx index fcd2937d46..d3e3ffb35d 100644 --- a/packages/twenty-ui/src/utilities/animation/components/AnimatedFadeOut.tsx +++ b/packages/twenty-ui/src/utilities/animation/components/AnimatedFadeOut.tsx @@ -1,6 +1,7 @@ -import { useContext } from 'react'; -import { type AnimationDuration, ThemeContext } from '@ui/theme'; import { AnimatePresence, motion } from 'framer-motion'; +import { useContext } from 'react'; +import { type AnimationDuration } from '@ui/theme'; +import { ThemeContext } from '@ui/theme-constants'; type AnimatedFadeOutProps = { isOpen: boolean; @@ -18,6 +19,7 @@ export const AnimatedFadeOut = ({ marginTop, }: AnimatedFadeOutProps) => { const { theme } = useContext(ThemeContext); + return ( {isOpen && ( diff --git a/packages/twenty-ui/src/utilities/animation/components/AnimatedRotate.tsx b/packages/twenty-ui/src/utilities/animation/components/AnimatedRotate.tsx index 8a4dbed3ab..545890f801 100644 --- a/packages/twenty-ui/src/utilities/animation/components/AnimatedRotate.tsx +++ b/packages/twenty-ui/src/utilities/animation/components/AnimatedRotate.tsx @@ -1,8 +1,8 @@ -import { useContext } from 'react'; - import { styled } from '@linaria/react'; -import { ThemeContext, type AnimationDuration } from '@ui/theme'; import { type HTMLMotionProps, motion } from 'framer-motion'; +import { type AnimationDuration } from '@ui/theme'; +import { ThemeContext } from '@ui/theme-constants'; +import { useContext } from 'react'; type AnimatedRotateProps = Omit< HTMLMotionProps<'div'>, @@ -24,6 +24,7 @@ export const AnimatedRotate = ({ animateOnHover, }: AnimatedRotateProps): JSX.Element => { const { theme } = useContext(ThemeContext); + const initial = { opacity: 0, rotate: -90 }; const animate = { opacity: 1, rotate: 0 }; const exit = { opacity: 0, rotate: 90 }; diff --git a/packages/twenty-ui/src/utilities/animation/components/AnimatedTranslation.tsx b/packages/twenty-ui/src/utilities/animation/components/AnimatedTranslation.tsx index e782399860..03e226f643 100644 --- a/packages/twenty-ui/src/utilities/animation/components/AnimatedTranslation.tsx +++ b/packages/twenty-ui/src/utilities/animation/components/AnimatedTranslation.tsx @@ -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'; type AnimatedTranslationProps = { children: React.ReactNode; @@ -22,7 +22,7 @@ export const AnimatedTranslation = ({ children }: AnimatedTranslationProps) => { opacity: 1, y: 0, transition: { - duration: theme.animation.duration.normal, // Replace this with your theme's duration + duration: theme.animation.duration.normal, ease: 'easeInOut', }, }, diff --git a/packages/twenty-ui/src/utilities/color/utils/__tests__/stringToThemeColorP3String.test.ts b/packages/twenty-ui/src/utilities/color/utils/__tests__/stringToThemeColorP3String.test.ts index efddd31614..c7f3ba9ca0 100644 --- a/packages/twenty-ui/src/utilities/color/utils/__tests__/stringToThemeColorP3String.test.ts +++ b/packages/twenty-ui/src/utilities/color/utils/__tests__/stringToThemeColorP3String.test.ts @@ -1,4 +1,3 @@ -import { THEME_LIGHT } from '@ui/theme'; import { stringToThemeColor } from '@ui/utilities'; import { stringToThemeColorP3String } from '@ui/utilities/color/utils/stringToThemeColorP3String'; @@ -19,14 +18,19 @@ describe('stringToThemeColor', () => { }); describe('stringToThemeColorP3String', () => { - it('should return a theme color based on a string', () => { + it('should return a resolved CSS variable value for a color', () => { + const mockTheme = { + color: new Proxy({} as Record, { + get: (_, prop) => `mock-${String(prop)}`, + }), + } as any; + const color = stringToThemeColorP3String({ string: 'test', - theme: THEME_LIGHT, variant: 9, + theme: mockTheme, }); expect(typeof color).toBe('string'); - expect(Object.values(THEME_LIGHT.color)).toContain(color); }); }); diff --git a/packages/twenty-ui/src/utilities/color/utils/stringToThemeColorP3String.ts b/packages/twenty-ui/src/utilities/color/utils/stringToThemeColorP3String.ts index ab83a86463..c01a5e12c6 100644 --- a/packages/twenty-ui/src/utilities/color/utils/stringToThemeColorP3String.ts +++ b/packages/twenty-ui/src/utilities/color/utils/stringToThemeColorP3String.ts @@ -1,4 +1,5 @@ -import { MAIN_COLOR_NAMES, type ThemeColor, type ThemeType } from '@ui/theme'; +import { type ThemeType, type themeCssVariables } from '@ui/theme-constants'; +import { type ThemeColor, MAIN_COLOR_NAMES } from '@ui/theme'; export const stringToThemeColor = (string: string): ThemeColor => { let hash = 0; @@ -12,12 +13,12 @@ export const stringToThemeColor = (string: string): ThemeColor => { export const stringToThemeColorP3String = ({ string, - theme, variant = 9, + theme, }: { string: string; - theme: ThemeType; variant: number; + theme: ThemeType; }): string => { if (variant < 1 || variant > 12) { throw new Error('Variant must be between 1 and 12'); @@ -25,7 +26,9 @@ export const stringToThemeColorP3String = ({ const colorName = stringToThemeColor(string); const colorNameWithVariant = - `${colorName}${variant}` as keyof typeof theme.color; + `${colorName}${variant}` as keyof typeof themeCssVariables.color; - return theme.color[colorNameWithVariant] as string; + return theme.color[ + colorNameWithVariant as keyof typeof theme.color + ] as string; }; diff --git a/packages/twenty-ui/src/utilities/color/utils/themeColorSchema.ts b/packages/twenty-ui/src/utilities/color/utils/themeColorSchema.ts index 3f1c73f1f2..8b2bde570c 100644 --- a/packages/twenty-ui/src/utilities/color/utils/themeColorSchema.ts +++ b/packages/twenty-ui/src/utilities/color/utils/themeColorSchema.ts @@ -1,6 +1,6 @@ import { z } from 'zod'; -import { MAIN_COLOR_NAMES, type ThemeColor } from '@ui/theme'; +import { type ThemeColor, MAIN_COLOR_NAMES } from '@ui/theme'; export const themeColorSchema = z.enum( MAIN_COLOR_NAMES as [ThemeColor, ...ThemeColor[]],