diff --git a/packages/twenty-front/src/modules/activities/components/CustomResolverFetchMoreLoader.tsx b/packages/twenty-front/src/modules/activities/components/CustomResolverFetchMoreLoader.tsx index 5bc3c1eb1..7bd31dc70 100644 --- a/packages/twenty-front/src/modules/activities/components/CustomResolverFetchMoreLoader.tsx +++ b/packages/twenty-front/src/modules/activities/components/CustomResolverFetchMoreLoader.tsx @@ -1,7 +1,6 @@ import { useInView } from 'react-intersection-observer'; import styled from '@emotion/styled'; - -import { GRAY_SCALE } from '@/ui/theme/constants/GrayScale'; +import { GRAY_SCALE } from 'twenty-ui'; type FetchMoreLoaderProps = { loading: boolean; 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 a40b840c7..845648006 100644 --- a/packages/twenty-front/src/modules/activities/emails/components/EmailThreadPreview.tsx +++ b/packages/twenty-front/src/modules/activities/emails/components/EmailThreadPreview.tsx @@ -1,14 +1,13 @@ import { useRef } from 'react'; import styled from '@emotion/styled'; import { useRecoilCallback } from 'recoil'; -import { Avatar } from 'twenty-ui'; +import { Avatar, GRAY_SCALE } from 'twenty-ui'; import { EmailThreadNotShared } from '@/activities/emails/components/EmailThreadNotShared'; import { useEmailThread } from '@/activities/emails/hooks/useEmailThread'; import { emailThreadIdWhenEmailThreadWasClosedState } from '@/activities/emails/states/lastViewableEmailThreadIdState'; import { CardContent } from '@/ui/layout/card/components/CardContent'; import { useRightDrawer } from '@/ui/layout/right-drawer/hooks/useRightDrawer'; -import { GRAY_SCALE } from '@/ui/theme/constants/GrayScale'; import { TimelineThread } from '~/generated/graphql'; import { formatToHumanReadableDate } from '~/utils'; import { getImageAbsoluteURIOrBase64 } from '~/utils/image/getImageAbsoluteURIOrBase64'; diff --git a/packages/twenty-front/src/modules/object-metadata/types/FieldMetadataItem.ts b/packages/twenty-front/src/modules/object-metadata/types/FieldMetadataItem.ts index aa62f6ae7..91b1fdd7d 100644 --- a/packages/twenty-front/src/modules/object-metadata/types/FieldMetadataItem.ts +++ b/packages/twenty-front/src/modules/object-metadata/types/FieldMetadataItem.ts @@ -1,4 +1,5 @@ -import { ThemeColor } from '@/ui/theme/constants/MainColorNames'; +import { ThemeColor } from 'twenty-ui'; + import { Field, Object as MetadataObject, diff --git a/packages/twenty-front/src/modules/object-metadata/validation-schemas/fieldMetadataItemSchema.ts b/packages/twenty-front/src/modules/object-metadata/validation-schemas/fieldMetadataItemSchema.ts index 0e82578ac..635d00146 100644 --- a/packages/twenty-front/src/modules/object-metadata/validation-schemas/fieldMetadataItemSchema.ts +++ b/packages/twenty-front/src/modules/object-metadata/validation-schemas/fieldMetadataItemSchema.ts @@ -1,8 +1,8 @@ +import { themeColorSchema } from 'twenty-ui'; import { z } from 'zod'; import { FieldMetadataItem } from '@/object-metadata/types/FieldMetadataItem'; import { metadataLabelSchema } from '@/object-metadata/validation-schemas/metadataLabelSchema'; -import { themeColorSchema } from '@/ui/theme/utils/themeColorSchema'; import { FieldMetadataType, RelationDefinitionType, diff --git a/packages/twenty-front/src/modules/object-metadata/validation-schemas/selectOptionsSchema.ts b/packages/twenty-front/src/modules/object-metadata/validation-schemas/selectOptionsSchema.ts index 814892da9..ff767cdd5 100644 --- a/packages/twenty-front/src/modules/object-metadata/validation-schemas/selectOptionsSchema.ts +++ b/packages/twenty-front/src/modules/object-metadata/validation-schemas/selectOptionsSchema.ts @@ -1,8 +1,8 @@ +import { themeColorSchema } from 'twenty-ui'; import { z } from 'zod'; import { FieldMetadataItemOption } from '@/object-metadata/types/FieldMetadataItem'; import { getOptionValueFromLabel } from '@/settings/data-model/fields/forms/select/utils/getOptionValueFromLabel'; -import { themeColorSchema } from '@/ui/theme/utils/themeColorSchema'; import { computeOptionValueFromLabelOrThrow } from '~/pages/settings/data-model/utils/compute-option-value-from-label.utils'; const selectOptionSchema = z diff --git a/packages/twenty-front/src/modules/object-record/record-board/record-board-column/components/RecordBoardColumnFetchMoreLoader.tsx b/packages/twenty-front/src/modules/object-record/record-board/record-board-column/components/RecordBoardColumnFetchMoreLoader.tsx index 98dc26d7a..7dd71ba08 100644 --- a/packages/twenty-front/src/modules/object-record/record-board/record-board-column/components/RecordBoardColumnFetchMoreLoader.tsx +++ b/packages/twenty-front/src/modules/object-record/record-board/record-board-column/components/RecordBoardColumnFetchMoreLoader.tsx @@ -2,10 +2,10 @@ import { useContext, useEffect } from 'react'; import { useInView } from 'react-intersection-observer'; import styled from '@emotion/styled'; import { useRecoilValue, useSetRecoilState } from 'recoil'; +import { GRAY_SCALE } from 'twenty-ui'; import { useRecordBoardStates } from '@/object-record/record-board/hooks/internal/useRecordBoardStates'; import { RecordBoardColumnContext } from '@/object-record/record-board/record-board-column/contexts/RecordBoardColumnContext'; -import { GRAY_SCALE } from '@/ui/theme/constants/GrayScale'; const StyledText = styled.div` align-items: center; diff --git a/packages/twenty-front/src/modules/object-record/record-board/types/RecordBoardColumnDefinition.ts b/packages/twenty-front/src/modules/object-record/record-board/types/RecordBoardColumnDefinition.ts index 288090c38..5a9197dff 100644 --- a/packages/twenty-front/src/modules/object-record/record-board/types/RecordBoardColumnDefinition.ts +++ b/packages/twenty-front/src/modules/object-record/record-board/types/RecordBoardColumnDefinition.ts @@ -1,5 +1,6 @@ +import { ThemeColor } from 'twenty-ui'; + import { RecordBoardColumnAction } from '@/object-record/record-board/types/RecordBoardColumnAction'; -import { ThemeColor } from '@/ui/theme/constants/MainColorNames'; export type RecordBoardColumnDefinition = { id: string; diff --git a/packages/twenty-front/src/modules/object-record/record-field/types/FieldMetadata.ts b/packages/twenty-front/src/modules/object-record/record-field/types/FieldMetadata.ts index 03ef2f2a9..8a287bd6a 100644 --- a/packages/twenty-front/src/modules/object-record/record-field/types/FieldMetadata.ts +++ b/packages/twenty-front/src/modules/object-record/record-field/types/FieldMetadata.ts @@ -1,6 +1,7 @@ +import { ThemeColor } from 'twenty-ui'; + import { RATING_VALUES } from '@/object-record/record-field/meta-types/constants/RatingValues'; import { EntityForSelect } from '@/object-record/relation-picker/types/EntityForSelect'; -import { ThemeColor } from '@/ui/theme/constants/MainColorNames'; import { CurrencyCode } from './CurrencyCode'; diff --git a/packages/twenty-front/src/modules/object-record/record-table/components/ColumnHead.tsx b/packages/twenty-front/src/modules/object-record/record-table/components/ColumnHead.tsx index f9150703d..89caf5a48 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/components/ColumnHead.tsx +++ b/packages/twenty-front/src/modules/object-record/record-table/components/ColumnHead.tsx @@ -1,10 +1,9 @@ import { css, useTheme } from '@emotion/react'; import styled from '@emotion/styled'; import { useRecoilValue } from 'recoil'; -import { useIcons } from 'twenty-ui'; +import { MOBILE_VIEWPORT, useIcons } from 'twenty-ui'; import { FieldMetadata } from '@/object-record/record-field/types/FieldMetadata'; -import { MOBILE_VIEWPORT } from '@/ui/theme/constants/MobileViewport'; import { scrollLeftState } from '@/ui/utilities/scroll/states/scrollLeftState'; import { ColumnDefinition } from '../types/ColumnDefinition'; diff --git a/packages/twenty-front/src/modules/object-record/record-table/components/RecordTable.tsx b/packages/twenty-front/src/modules/object-record/record-table/components/RecordTable.tsx index dca70d638..92280dfd1 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/components/RecordTable.tsx +++ b/packages/twenty-front/src/modules/object-record/record-table/components/RecordTable.tsx @@ -1,6 +1,7 @@ import { css } from '@emotion/react'; import styled from '@emotion/styled'; import { useRecoilValue } from 'recoil'; +import { MOBILE_VIEWPORT, RGBA } from 'twenty-ui'; import { useObjectMetadataItem } from '@/object-metadata/hooks/useObjectMetadataItem'; import { RecordTableBody } from '@/object-record/record-table/components/RecordTableBody'; @@ -21,8 +22,6 @@ import { useUpsertRecordV2 } from '@/object-record/record-table/record-table-cel import { RecordTableScope } from '@/object-record/record-table/scopes/RecordTableScope'; import { MoveFocusDirection } from '@/object-record/record-table/types/MoveFocusDirection'; import { TableCellPosition } from '@/object-record/record-table/types/TableCellPosition'; -import { MOBILE_VIEWPORT } from '@/ui/theme/constants/MobileViewport'; -import { RGBA } from '@/ui/theme/constants/Rgba'; const StyledTable = styled.table<{ freezeFirstColumns?: boolean; diff --git a/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableBodyFetchMoreLoader.tsx b/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableBodyFetchMoreLoader.tsx index 33173a925..17b06e8bd 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableBodyFetchMoreLoader.tsx +++ b/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableBodyFetchMoreLoader.tsx @@ -2,11 +2,11 @@ import { useContext } from 'react'; import { useInView } from 'react-intersection-observer'; import styled from '@emotion/styled'; import { useRecoilCallback, useRecoilValue } from 'recoil'; +import { GRAY_SCALE } from 'twenty-ui'; import { useLoadRecordIndexTable } from '@/object-record/record-index/hooks/useLoadRecordIndexTable'; import { useRecordTable } from '@/object-record/record-table/hooks/useRecordTable'; import { isFetchingMoreRecordsFamilyState } from '@/object-record/states/isFetchingMoreRecordsFamilyState'; -import { GRAY_SCALE } from '@/ui/theme/constants/GrayScale'; import { ScrollWrapperContext } from '@/ui/utilities/scroll/components/ScrollWrapper'; type RecordTableBodyFetchMoreLoaderProps = { diff --git a/packages/twenty-front/src/modules/settings/data-model/fields/forms/select/components/SettingsDataModelFieldSelectFormOptionRow.tsx b/packages/twenty-front/src/modules/settings/data-model/fields/forms/select/components/SettingsDataModelFieldSelectFormOptionRow.tsx index bc438a681..fdc99c137 100644 --- a/packages/twenty-front/src/modules/settings/data-model/fields/forms/select/components/SettingsDataModelFieldSelectFormOptionRow.tsx +++ b/packages/twenty-front/src/modules/settings/data-model/fields/forms/select/components/SettingsDataModelFieldSelectFormOptionRow.tsx @@ -8,6 +8,7 @@ import { IconGripVertical, IconTrash, IconX, + MAIN_COLOR_NAMES, } from 'twenty-ui'; import { v4 } from 'uuid'; @@ -21,7 +22,6 @@ import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/Drop import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown'; import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem'; import { MenuItemSelectColor } from '@/ui/navigation/menu-item/components/MenuItemSelectColor'; -import { MAIN_COLOR_NAMES } from '@/ui/theme/constants/MainColorNames'; type SettingsDataModelFieldSelectFormOptionRowProps = { className?: string; diff --git a/packages/twenty-front/src/modules/spreadsheet-import/components/ModalWrapper.tsx b/packages/twenty-front/src/modules/spreadsheet-import/components/ModalWrapper.tsx index 66dc08423..d9de117e2 100644 --- a/packages/twenty-front/src/modules/spreadsheet-import/components/ModalWrapper.tsx +++ b/packages/twenty-front/src/modules/spreadsheet-import/components/ModalWrapper.tsx @@ -1,8 +1,8 @@ import styled from '@emotion/styled'; +import { MOBILE_VIEWPORT } from 'twenty-ui'; import { useSpreadsheetImportInternal } from '@/spreadsheet-import/hooks/useSpreadsheetImportInternal'; import { Modal } from '@/ui/layout/modal/components/Modal'; -import { MOBILE_VIEWPORT } from '@/ui/theme/constants/MobileViewport'; import { ModalCloseButton } from './ModalCloseButton'; diff --git a/packages/twenty-front/src/modules/spreadsheet-import/components/Table.tsx b/packages/twenty-front/src/modules/spreadsheet-import/components/Table.tsx index 3ee211eb1..ea953e057 100644 --- a/packages/twenty-front/src/modules/spreadsheet-import/components/Table.tsx +++ b/packages/twenty-front/src/modules/spreadsheet-import/components/Table.tsx @@ -1,9 +1,9 @@ // @ts-expect-error // Todo: remove usage of react-data-grid import DataGrid, { DataGridProps } from 'react-data-grid'; import styled from '@emotion/styled'; +import { RGBA } from 'twenty-ui'; import { useSpreadsheetImportInternal } from '@/spreadsheet-import/hooks/useSpreadsheetImportInternal'; -import { RGBA } from '@/ui/theme/constants/Rgba'; const StyledDataGrid = styled(DataGrid)` --rdg-background-color: ${({ theme }) => theme.background.primary}; diff --git a/packages/twenty-front/src/modules/spreadsheet-import/steps/components/Steps.tsx b/packages/twenty-front/src/modules/spreadsheet-import/steps/components/Steps.tsx index cd87cc572..612c82d0d 100644 --- a/packages/twenty-front/src/modules/spreadsheet-import/steps/components/Steps.tsx +++ b/packages/twenty-front/src/modules/spreadsheet-import/steps/components/Steps.tsx @@ -1,11 +1,11 @@ import styled from '@emotion/styled'; +import { MOBILE_VIEWPORT } from 'twenty-ui'; import { useSpreadsheetImportInitialStep } from '@/spreadsheet-import/hooks/useSpreadsheetImportInitialStep'; import { useSpreadsheetImportInternal } from '@/spreadsheet-import/hooks/useSpreadsheetImportInternal'; import { Modal } from '@/ui/layout/modal/components/Modal'; import { StepBar } from '@/ui/navigation/step-bar/components/StepBar'; import { useStepBar } from '@/ui/navigation/step-bar/hooks/useStepBar'; -import { MOBILE_VIEWPORT } from '@/ui/theme/constants/MobileViewport'; import { UploadFlow } from './UploadFlow'; diff --git a/packages/twenty-front/src/modules/ui/display/status/components/Status.tsx b/packages/twenty-front/src/modules/ui/display/status/components/Status.tsx index 36fe7d6db..7c52e0eaa 100644 --- a/packages/twenty-front/src/modules/ui/display/status/components/Status.tsx +++ b/packages/twenty-front/src/modules/ui/display/status/components/Status.tsx @@ -1,8 +1,7 @@ import styled from '@emotion/styled'; +import { ThemeColor, themeColorSchema } from 'twenty-ui'; import { Loader } from '@/ui/feedback/loader/components/Loader'; -import { ThemeColor } from '@/ui/theme/constants/MainColorNames'; -import { themeColorSchema } from '@/ui/theme/utils/themeColorSchema'; const StyledStatus = styled.h3<{ color: ThemeColor; diff --git a/packages/twenty-front/src/modules/ui/display/status/components/__stories__/Status.stories.tsx b/packages/twenty-front/src/modules/ui/display/status/components/__stories__/Status.stories.tsx index 1afa5aa12..7db5637d0 100644 --- a/packages/twenty-front/src/modules/ui/display/status/components/__stories__/Status.stories.tsx +++ b/packages/twenty-front/src/modules/ui/display/status/components/__stories__/Status.stories.tsx @@ -1,11 +1,12 @@ import { Meta, StoryObj } from '@storybook/react'; import { expect, fn, userEvent, within } from '@storybook/test'; -import { CatalogDecorator, CatalogStory, ComponentDecorator } from 'twenty-ui'; - import { + CatalogDecorator, + CatalogStory, + ComponentDecorator, MAIN_COLOR_NAMES, ThemeColor, -} from '@/ui/theme/constants/MainColorNames'; +} from 'twenty-ui'; import { Status } from '../Status'; diff --git a/packages/twenty-front/src/modules/ui/feedback/loader/components/Loader.tsx b/packages/twenty-front/src/modules/ui/feedback/loader/components/Loader.tsx index f76c2d155..1df850e0c 100644 --- a/packages/twenty-front/src/modules/ui/feedback/loader/components/Loader.tsx +++ b/packages/twenty-front/src/modules/ui/feedback/loader/components/Loader.tsx @@ -1,7 +1,6 @@ import styled from '@emotion/styled'; import { motion } from 'framer-motion'; - -import { ThemeColor } from '@/ui/theme/constants/MainColorNames'; +import { ThemeColor } from 'twenty-ui'; const StyledLoaderContainer = styled.div<{ color?: ThemeColor; 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 b0e60d8a9..ced18f9c5 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 @@ -2,12 +2,11 @@ import { useEffect, useMemo, useRef, useState } from 'react'; import { IMaskInput, IMaskInputProps } from 'react-imask'; import { useTheme } from '@emotion/react'; import styled from '@emotion/styled'; -import { IconComponent } from 'twenty-ui'; +import { IconComponent, TEXT_INPUT_STYLE } from 'twenty-ui'; import { useRegisterInputEvents } from '@/object-record/record-field/meta-types/input/hooks/useRegisterInputEvents'; import { SETTINGS_FIELD_CURRENCY_CODES } from '@/settings/data-model/constants/SettingsFieldCurrencyCodes'; import { CurrencyPickerDropdownButton } from '@/ui/input/components/internal/currency/components/CurrencyPickerDropdownButton'; -import { TEXT_INPUT_STYLE } from '@/ui/theme/constants/TextInputStyle'; type StyledInputProps = React.ComponentProps<'input'> & IMaskInputProps; diff --git a/packages/twenty-front/src/modules/ui/field/input/components/FieldInputOverlay.tsx b/packages/twenty-front/src/modules/ui/field/input/components/FieldInputOverlay.tsx index e6fa09f17..40c4b3e68 100644 --- a/packages/twenty-front/src/modules/ui/field/input/components/FieldInputOverlay.tsx +++ b/packages/twenty-front/src/modules/ui/field/input/components/FieldInputOverlay.tsx @@ -1,6 +1,5 @@ import styled from '@emotion/styled'; - -import { OVERLAY_BACKGROUND } from '@/ui/theme/constants/OverlayBackground'; +import { OVERLAY_BACKGROUND } from 'twenty-ui'; const StyledFieldInputOverlay = styled.div` align-items: center; diff --git a/packages/twenty-front/src/modules/ui/field/input/components/TextAreaInput.tsx b/packages/twenty-front/src/modules/ui/field/input/components/TextAreaInput.tsx index 27c5791c4..9cbddeb3d 100644 --- a/packages/twenty-front/src/modules/ui/field/input/components/TextAreaInput.tsx +++ b/packages/twenty-front/src/modules/ui/field/input/components/TextAreaInput.tsx @@ -1,10 +1,10 @@ import { ChangeEvent, useEffect, useRef, useState } from 'react'; import TextareaAutosize from 'react-textarea-autosize'; import styled from '@emotion/styled'; +import { TEXT_INPUT_STYLE } from 'twenty-ui'; import { LightCopyIconButton } from '@/object-record/record-field/components/LightCopyIconButton'; import { useRegisterInputEvents } from '@/object-record/record-field/meta-types/input/hooks/useRegisterInputEvents'; -import { TEXT_INPUT_STYLE } from '@/ui/theme/constants/TextInputStyle'; import { isDefined } from '~/utils/isDefined'; export type TextAreaInputProps = { diff --git a/packages/twenty-front/src/modules/ui/field/input/components/TextInput.tsx b/packages/twenty-front/src/modules/ui/field/input/components/TextInput.tsx index 26ab63bb3..1490e1f7d 100644 --- a/packages/twenty-front/src/modules/ui/field/input/components/TextInput.tsx +++ b/packages/twenty-front/src/modules/ui/field/input/components/TextInput.tsx @@ -1,9 +1,9 @@ import { ChangeEvent, useEffect, useRef, useState } from 'react'; import styled from '@emotion/styled'; +import { TEXT_INPUT_STYLE } from 'twenty-ui'; import { LightCopyIconButton } from '@/object-record/record-field/components/LightCopyIconButton'; import { useRegisterInputEvents } from '@/object-record/record-field/meta-types/input/hooks/useRegisterInputEvents'; -import { TEXT_INPUT_STYLE } from '@/ui/theme/constants/TextInputStyle'; export const StyledTextInput = styled.input` margin: 0; diff --git a/packages/twenty-front/src/modules/ui/input/components/Radio.tsx b/packages/twenty-front/src/modules/ui/input/components/Radio.tsx index a5f2b57bb..1626e1321 100644 --- a/packages/twenty-front/src/modules/ui/input/components/Radio.tsx +++ b/packages/twenty-front/src/modules/ui/input/components/Radio.tsx @@ -1,8 +1,7 @@ import * as React from 'react'; import styled from '@emotion/styled'; import { motion } from 'framer-motion'; - -import { RGBA } from '@/ui/theme/constants/Rgba'; +import { RGBA } from 'twenty-ui'; import { RadioGroup } from './RadioGroup'; diff --git a/packages/twenty-front/src/modules/ui/input/components/internal/date/components/InternalDatePicker.tsx b/packages/twenty-front/src/modules/ui/input/components/internal/date/components/InternalDatePicker.tsx index 6f96eaee0..a45855074 100644 --- a/packages/twenty-front/src/modules/ui/input/components/internal/date/components/InternalDatePicker.tsx +++ b/packages/twenty-front/src/modules/ui/input/components/internal/date/components/InternalDatePicker.tsx @@ -2,7 +2,12 @@ import ReactDatePicker from 'react-datepicker'; import styled from '@emotion/styled'; import { DateTime } from 'luxon'; import { Key } from 'ts-key-enum'; -import { IconCalendarX, IconChevronLeft, IconChevronRight } from 'twenty-ui'; +import { + IconCalendarX, + IconChevronLeft, + IconChevronRight, + OVERLAY_BACKGROUND, +} from 'twenty-ui'; import { LightIconButton } from '@/ui/input/button/components/LightIconButton'; import { DateTimeInput } from '@/ui/input/components/internal/date/components/DateTimeInput'; @@ -10,7 +15,6 @@ import { Select } from '@/ui/input/components/Select'; import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown'; import { MenuItemLeftContent } from '@/ui/navigation/menu-item/internals/components/MenuItemLeftContent'; import { StyledHoverableMenuItemBase } from '@/ui/navigation/menu-item/internals/components/StyledMenuItemBase'; -import { OVERLAY_BACKGROUND } from '@/ui/theme/constants/OverlayBackground'; import { isDefined } from '~/utils/isDefined'; import 'react-datepicker/dist/react-datepicker.css'; diff --git a/packages/twenty-front/src/modules/ui/layout/dropdown/components/DropdownMenuInput.tsx b/packages/twenty-front/src/modules/ui/layout/dropdown/components/DropdownMenuInput.tsx index 13c6a9048..5022ffecb 100644 --- a/packages/twenty-front/src/modules/ui/layout/dropdown/components/DropdownMenuInput.tsx +++ b/packages/twenty-front/src/modules/ui/layout/dropdown/components/DropdownMenuInput.tsx @@ -1,10 +1,9 @@ import { forwardRef, InputHTMLAttributes, ReactNode, useRef } from 'react'; import { css } from '@emotion/react'; import styled from '@emotion/styled'; +import { RGBA, TEXT_INPUT_STYLE } from 'twenty-ui'; import { useRegisterInputEvents } from '@/object-record/record-field/meta-types/input/hooks/useRegisterInputEvents'; -import { RGBA } from '@/ui/theme/constants/Rgba'; -import { TEXT_INPUT_STYLE } from '@/ui/theme/constants/TextInputStyle'; import { useCombinedRefs } from '~/hooks/useCombinedRefs'; const StyledInput = styled.input<{ withRightComponent?: boolean }>` diff --git a/packages/twenty-front/src/modules/ui/layout/dropdown/components/DropdownMenuSearchInput.tsx b/packages/twenty-front/src/modules/ui/layout/dropdown/components/DropdownMenuSearchInput.tsx index c5e3ffa84..1c6b06c91 100644 --- a/packages/twenty-front/src/modules/ui/layout/dropdown/components/DropdownMenuSearchInput.tsx +++ b/packages/twenty-front/src/modules/ui/layout/dropdown/components/DropdownMenuSearchInput.tsx @@ -1,7 +1,6 @@ import { forwardRef, InputHTMLAttributes } from 'react'; import styled from '@emotion/styled'; - -import { TEXT_INPUT_STYLE } from '@/ui/theme/constants/TextInputStyle'; +import { TEXT_INPUT_STYLE } from 'twenty-ui'; const StyledDropdownMenuSearchInputContainer = styled.div` --vertical-padding: ${({ theme }) => theme.spacing(1)}; 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 fbbd5d593..1cb295ca7 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 @@ -2,10 +2,9 @@ import styled from '@emotion/styled'; import { expect } from '@storybook/jest'; import { Meta, StoryObj } from '@storybook/react'; import { userEvent, within } from '@storybook/test'; -import { ComponentDecorator, Tag } from 'twenty-ui'; +import { ComponentDecorator, MAIN_COLOR_NAMES, Tag } from 'twenty-ui'; import { ExpandableList } from '@/ui/layout/expandable-list/components/ExpandableList'; -import { MAIN_COLOR_NAMES } from '@/ui/theme/constants/MainColorNames'; const StyledContainer = styled.div` padding: ${({ theme }) => theme.spacing(1)}; diff --git a/packages/twenty-front/src/modules/ui/layout/page/PageHeader.tsx b/packages/twenty-front/src/modules/ui/layout/page/PageHeader.tsx index 71ba45978..7cbc7e4a1 100644 --- a/packages/twenty-front/src/modules/ui/layout/page/PageHeader.tsx +++ b/packages/twenty-front/src/modules/ui/layout/page/PageHeader.tsx @@ -7,13 +7,13 @@ import { useRecoilValue } from 'recoil'; import { IconChevronLeft, IconComponent, + MOBILE_VIEWPORT, OverflowingTextWithTooltip, } from 'twenty-ui'; import { IconButton } from '@/ui/input/button/components/IconButton'; import { NavigationDrawerCollapseButton } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerCollapseButton'; import { isNavigationDrawerOpenState } from '@/ui/navigation/states/isNavigationDrawerOpenState'; -import { MOBILE_VIEWPORT } from '@/ui/theme/constants/MobileViewport'; import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile'; export const PAGE_BAR_MIN_HEIGHT = 40; diff --git a/packages/twenty-front/src/modules/ui/layout/page/RightDrawerContainer.tsx b/packages/twenty-front/src/modules/ui/layout/page/RightDrawerContainer.tsx index 5ee7cae45..5d4c0efb7 100644 --- a/packages/twenty-front/src/modules/ui/layout/page/RightDrawerContainer.tsx +++ b/packages/twenty-front/src/modules/ui/layout/page/RightDrawerContainer.tsx @@ -1,8 +1,8 @@ import { ReactNode } from 'react'; import styled from '@emotion/styled'; +import { MOBILE_VIEWPORT } from 'twenty-ui'; import { RightDrawer } from '@/ui/layout/right-drawer/components/RightDrawer'; -import { MOBILE_VIEWPORT } from '@/ui/theme/constants/MobileViewport'; import { PagePanel } from './PagePanel'; diff --git a/packages/twenty-front/src/modules/ui/navigation/menu-item/components/MenuItemMultiSelect.tsx b/packages/twenty-front/src/modules/ui/navigation/menu-item/components/MenuItemMultiSelect.tsx index e2b1b00d9..dafaeae1d 100644 --- a/packages/twenty-front/src/modules/ui/navigation/menu-item/components/MenuItemMultiSelect.tsx +++ b/packages/twenty-front/src/modules/ui/navigation/menu-item/components/MenuItemMultiSelect.tsx @@ -1,9 +1,8 @@ import styled from '@emotion/styled'; -import { IconComponent, Tag } from 'twenty-ui'; +import { IconComponent, Tag, ThemeColor } from 'twenty-ui'; import { Checkbox } from '@/ui/input/components/Checkbox'; import { MenuItemLeftContent } from '@/ui/navigation/menu-item/internals/components/MenuItemLeftContent'; -import { ThemeColor } from '@/ui/theme/constants/MainColorNames'; import { StyledMenuItemBase } from '../internals/components/StyledMenuItemBase'; diff --git a/packages/twenty-front/src/modules/ui/navigation/menu-item/components/MenuItemMultiSelectTag.tsx b/packages/twenty-front/src/modules/ui/navigation/menu-item/components/MenuItemMultiSelectTag.tsx index bd6a9b5ef..e1c941c45 100644 --- a/packages/twenty-front/src/modules/ui/navigation/menu-item/components/MenuItemMultiSelectTag.tsx +++ b/packages/twenty-front/src/modules/ui/navigation/menu-item/components/MenuItemMultiSelectTag.tsx @@ -1,11 +1,10 @@ -import { Tag } from 'twenty-ui'; +import { Tag, ThemeColor } from 'twenty-ui'; import { Checkbox, CheckboxShape, CheckboxSize, } from '@/ui/input/components/Checkbox'; -import { ThemeColor } from '@/ui/theme/constants/MainColorNames'; import { StyledMenuItemBase, diff --git a/packages/twenty-front/src/modules/ui/navigation/menu-item/components/MenuItemSelectColor.tsx b/packages/twenty-front/src/modules/ui/navigation/menu-item/components/MenuItemSelectColor.tsx index 3f4f3426f..6dabbded2 100644 --- a/packages/twenty-front/src/modules/ui/navigation/menu-item/components/MenuItemSelectColor.tsx +++ b/packages/twenty-front/src/modules/ui/navigation/menu-item/components/MenuItemSelectColor.tsx @@ -1,7 +1,10 @@ import { useTheme } from '@emotion/react'; -import { ColorSample, ColorSampleVariant, IconCheck } from 'twenty-ui'; - -import { ThemeColor } from '@/ui/theme/constants/MainColorNames'; +import { + ColorSample, + ColorSampleVariant, + IconCheck, + ThemeColor, +} from 'twenty-ui'; import { StyledMenuItemLabel, diff --git a/packages/twenty-front/src/modules/ui/navigation/menu-item/components/MenuItemSelectTag.tsx b/packages/twenty-front/src/modules/ui/navigation/menu-item/components/MenuItemSelectTag.tsx index 889465823..ce429c8cf 100644 --- a/packages/twenty-front/src/modules/ui/navigation/menu-item/components/MenuItemSelectTag.tsx +++ b/packages/twenty-front/src/modules/ui/navigation/menu-item/components/MenuItemSelectTag.tsx @@ -1,7 +1,5 @@ import { useTheme } from '@emotion/react'; -import { IconCheck, Tag } from 'twenty-ui'; - -import { ThemeColor } from '@/ui/theme/constants/MainColorNames'; +import { IconCheck, Tag, ThemeColor } from 'twenty-ui'; import { StyledMenuItemLeftContent } from '../internals/components/StyledMenuItemBase'; diff --git a/packages/twenty-front/src/modules/ui/navigation/menu-item/components/MenuItemSuggestion.tsx b/packages/twenty-front/src/modules/ui/navigation/menu-item/components/MenuItemSuggestion.tsx index 1876d1e1f..7017864d3 100644 --- a/packages/twenty-front/src/modules/ui/navigation/menu-item/components/MenuItemSuggestion.tsx +++ b/packages/twenty-front/src/modules/ui/navigation/menu-item/components/MenuItemSuggestion.tsx @@ -1,8 +1,6 @@ import { MouseEvent } from 'react'; import styled from '@emotion/styled'; -import { IconComponent } from 'twenty-ui'; - -import { HOVER_BACKGROUND } from '@/ui/theme/constants/HoverBackground'; +import { HOVER_BACKGROUND, IconComponent } from 'twenty-ui'; import { MenuItemLeftContent } from '../internals/components/MenuItemLeftContent'; import { StyledMenuItemLeftContent } from '../internals/components/StyledMenuItemBase'; diff --git a/packages/twenty-front/src/modules/ui/navigation/menu-item/components/__stories__/MenuItemSelectColor.stories.tsx b/packages/twenty-front/src/modules/ui/navigation/menu-item/components/__stories__/MenuItemSelectColor.stories.tsx index be234750b..6f95af499 100644 --- a/packages/twenty-front/src/modules/ui/navigation/menu-item/components/__stories__/MenuItemSelectColor.stories.tsx +++ b/packages/twenty-front/src/modules/ui/navigation/menu-item/components/__stories__/MenuItemSelectColor.stories.tsx @@ -6,12 +6,9 @@ import { CatalogStory, ColorSampleVariant, ComponentDecorator, -} from 'twenty-ui'; - -import { MAIN_COLOR_NAMES, ThemeColor, -} from '@/ui/theme/constants/MainColorNames'; +} from 'twenty-ui'; import { MenuItemSelectColor } from '../MenuItemSelectColor'; diff --git a/packages/twenty-front/src/modules/ui/navigation/menu-item/internals/components/StyledMenuItemBase.tsx b/packages/twenty-front/src/modules/ui/navigation/menu-item/internals/components/StyledMenuItemBase.tsx index b2cd5f9c8..71cd27eae 100644 --- a/packages/twenty-front/src/modules/ui/navigation/menu-item/internals/components/StyledMenuItemBase.tsx +++ b/packages/twenty-front/src/modules/ui/navigation/menu-item/internals/components/StyledMenuItemBase.tsx @@ -1,7 +1,6 @@ import { css } from '@emotion/react'; import styled from '@emotion/styled'; - -import { HOVER_BACKGROUND } from '@/ui/theme/constants/HoverBackground'; +import { HOVER_BACKGROUND } from 'twenty-ui'; import { MenuItemAccent } from '../../types/MenuItemAccent'; diff --git a/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawer.tsx b/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawer.tsx index 88cf5f9b4..2b9863915 100644 --- a/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawer.tsx +++ b/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawer.tsx @@ -3,9 +3,9 @@ import { css, useTheme } from '@emotion/react'; import styled from '@emotion/styled'; import { motion } from 'framer-motion'; import { useRecoilValue } from 'recoil'; +import { MOBILE_VIEWPORT } from 'twenty-ui'; import { isNavigationDrawerOpenState } from '@/ui/navigation/states/isNavigationDrawerOpenState'; -import { MOBILE_VIEWPORT } from '@/ui/theme/constants/MobileViewport'; import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile'; import { DESKTOP_NAV_DRAWER_WIDTHS } from '../constants/DesktopNavDrawerWidths'; 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 7d09a6d77..8f0dd6ed2 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 @@ -4,10 +4,9 @@ import { useTheme } from '@emotion/react'; import styled from '@emotion/styled'; import { isNonEmptyString } from '@sniptt/guards'; import { useSetRecoilState } from 'recoil'; -import { IconComponent, Pill } from 'twenty-ui'; +import { IconComponent, MOBILE_VIEWPORT, Pill } from 'twenty-ui'; import { isNavigationDrawerOpenState } from '@/ui/navigation/states/isNavigationDrawerOpenState'; -import { MOBILE_VIEWPORT } from '@/ui/theme/constants/MobileViewport'; import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile'; import { isDefined } from '~/utils/isDefined'; diff --git a/packages/twenty-front/src/modules/ui/navigation/states/isNavigationDrawerOpenState.ts b/packages/twenty-front/src/modules/ui/navigation/states/isNavigationDrawerOpenState.ts index 33c9c37ee..b5496b4a5 100644 --- a/packages/twenty-front/src/modules/ui/navigation/states/isNavigationDrawerOpenState.ts +++ b/packages/twenty-front/src/modules/ui/navigation/states/isNavigationDrawerOpenState.ts @@ -1,6 +1,5 @@ import { atom } from 'recoil'; - -import { MOBILE_VIEWPORT } from '@/ui/theme/constants/MobileViewport'; +import { MOBILE_VIEWPORT } from 'twenty-ui'; const isMobile = window.innerWidth <= MOBILE_VIEWPORT; 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 ebb5d3251..01a93c9ac 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,9 +1,8 @@ import { useTheme } from '@emotion/react'; import styled from '@emotion/styled'; import { motion } from 'framer-motion'; -import { AnimatedCheckmark } from 'twenty-ui'; +import { AnimatedCheckmark, MOBILE_VIEWPORT } from 'twenty-ui'; -import { MOBILE_VIEWPORT } from '@/ui/theme/constants/MobileViewport'; import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile'; const StyledContainer = styled.div<{ isLast: boolean }>` diff --git a/packages/twenty-front/src/modules/ui/navigation/step-bar/components/StepBar.tsx b/packages/twenty-front/src/modules/ui/navigation/step-bar/components/StepBar.tsx index 1f7ca533e..cfa7d50f9 100644 --- a/packages/twenty-front/src/modules/ui/navigation/step-bar/components/StepBar.tsx +++ b/packages/twenty-front/src/modules/ui/navigation/step-bar/components/StepBar.tsx @@ -1,7 +1,7 @@ import React from 'react'; import styled from '@emotion/styled'; +import { MOBILE_VIEWPORT } from 'twenty-ui'; -import { MOBILE_VIEWPORT } from '@/ui/theme/constants/MobileViewport'; import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile'; import { Step, StepProps } from './Step'; diff --git a/packages/twenty-front/src/modules/ui/theme/assets/dark-noise.jpg b/packages/twenty-front/src/modules/ui/theme/assets/dark-noise.jpg deleted file mode 100644 index 6fc95715e..000000000 Binary files a/packages/twenty-front/src/modules/ui/theme/assets/dark-noise.jpg and /dev/null differ diff --git a/packages/twenty-front/src/modules/ui/theme/assets/light-noise.png b/packages/twenty-front/src/modules/ui/theme/assets/light-noise.png deleted file mode 100644 index d7b3bc2c0..000000000 Binary files a/packages/twenty-front/src/modules/ui/theme/assets/light-noise.png and /dev/null differ diff --git a/packages/twenty-front/src/modules/ui/theme/constants/AccentDark.ts b/packages/twenty-front/src/modules/ui/theme/constants/AccentDark.ts deleted file mode 100644 index 35918883d..000000000 --- a/packages/twenty-front/src/modules/ui/theme/constants/AccentDark.ts +++ /dev/null @@ -1,10 +0,0 @@ -import { COLOR } from './Colors'; - -export const ACCENT_DARK = { - primary: COLOR.blueAccent75, - secondary: COLOR.blueAccent80, - tertiary: COLOR.blueAccent85, - quaternary: COLOR.blueAccent90, - accent3570: COLOR.blueAccent70, - accent4060: COLOR.blueAccent60, -}; diff --git a/packages/twenty-front/src/modules/ui/theme/constants/AccentLight.ts b/packages/twenty-front/src/modules/ui/theme/constants/AccentLight.ts deleted file mode 100644 index 7c8989697..000000000 --- a/packages/twenty-front/src/modules/ui/theme/constants/AccentLight.ts +++ /dev/null @@ -1,10 +0,0 @@ -import { COLOR } from './Colors'; - -export const ACCENT_LIGHT = { - primary: COLOR.blueAccent25, - secondary: COLOR.blueAccent20, - tertiary: COLOR.blueAccent15, - quaternary: COLOR.blueAccent10, - accent3570: COLOR.blueAccent35, - accent4060: COLOR.blueAccent40, -}; diff --git a/packages/twenty-front/src/modules/ui/theme/constants/Animation.ts b/packages/twenty-front/src/modules/ui/theme/constants/Animation.ts deleted file mode 100644 index 865d43b2b..000000000 --- a/packages/twenty-front/src/modules/ui/theme/constants/Animation.ts +++ /dev/null @@ -1,9 +0,0 @@ -export const ANIMATION = { - duration: { - instant: 0.075, - fast: 0.15, - normal: 0.3, - }, -}; - -export type AnimationDuration = 'instant' | 'fast' | 'normal'; diff --git a/packages/twenty-front/src/modules/ui/theme/constants/BackgroundDark.ts b/packages/twenty-front/src/modules/ui/theme/constants/BackgroundDark.ts deleted file mode 100644 index 24017aa41..000000000 --- a/packages/twenty-front/src/modules/ui/theme/constants/BackgroundDark.ts +++ /dev/null @@ -1,29 +0,0 @@ -/* eslint-disable @nx/workspace-no-hardcoded-colors */ -import { COLOR } from '@/ui/theme/constants/Colors'; -import { GRAY_SCALE } from '@/ui/theme/constants/GrayScale'; -import { RGBA } from '@/ui/theme/constants/Rgba'; - -import DarkNoise from '../assets/dark-noise.jpg'; - -export const BACKGROUND_DARK = { - noisy: `url(${DarkNoise.toString()});`, - primary: GRAY_SCALE.gray85, - secondary: GRAY_SCALE.gray80, - tertiary: GRAY_SCALE.gray75, - quaternary: GRAY_SCALE.gray70, - danger: COLOR.red80, - transparent: { - primary: RGBA(GRAY_SCALE.gray85, 0.5), - secondary: RGBA(GRAY_SCALE.gray80, 0.5), - strong: RGBA(GRAY_SCALE.gray0, 0.14), - medium: RGBA(GRAY_SCALE.gray0, 0.1), - light: RGBA(GRAY_SCALE.gray0, 0.06), - lighter: RGBA(GRAY_SCALE.gray0, 0.03), - danger: RGBA(COLOR.red, 0.08), - }, - overlay: RGBA(GRAY_SCALE.gray80, 0.8), - radialGradient: `radial-gradient(50% 62.62% at 50% 0%, #505050 0%, ${GRAY_SCALE.gray60} 100%)`, - radialGradientHover: `radial-gradient(76.32% 95.59% at 50% 0%, #505050 0%, ${GRAY_SCALE.gray60} 100%)`, - primaryInverted: GRAY_SCALE.gray20, - primaryInvertedHover: GRAY_SCALE.gray15, -}; diff --git a/packages/twenty-front/src/modules/ui/theme/constants/BackgroundLight.ts b/packages/twenty-front/src/modules/ui/theme/constants/BackgroundLight.ts deleted file mode 100644 index ff92a0706..000000000 --- a/packages/twenty-front/src/modules/ui/theme/constants/BackgroundLight.ts +++ /dev/null @@ -1,29 +0,0 @@ -/* eslint-disable @nx/workspace-no-hardcoded-colors */ -import { COLOR } from '@/ui/theme/constants/Colors'; -import { GRAY_SCALE } from '@/ui/theme/constants/GrayScale'; -import { RGBA } from '@/ui/theme/constants/Rgba'; - -import LightNoise from '../assets/light-noise.png'; - -export const BACKGROUND_LIGHT = { - noisy: `url(${LightNoise.toString()});`, - primary: GRAY_SCALE.gray0, - secondary: GRAY_SCALE.gray10, - tertiary: GRAY_SCALE.gray15, - quaternary: GRAY_SCALE.gray20, - danger: COLOR.red10, - transparent: { - primary: RGBA(GRAY_SCALE.gray0, 0.5), - secondary: RGBA(GRAY_SCALE.gray10, 0.5), - strong: RGBA(GRAY_SCALE.gray100, 0.16), - medium: RGBA(GRAY_SCALE.gray100, 0.08), - light: RGBA(GRAY_SCALE.gray100, 0.04), - lighter: RGBA(GRAY_SCALE.gray100, 0.02), - danger: RGBA(COLOR.red, 0.08), - }, - overlay: RGBA(GRAY_SCALE.gray80, 0.8), - radialGradient: `radial-gradient(50% 62.62% at 50% 0%, #505050 0%, ${GRAY_SCALE.gray60} 100%)`, - radialGradientHover: `radial-gradient(76.32% 95.59% at 50% 0%, #505050 0%, ${GRAY_SCALE.gray60} 100%)`, - primaryInverted: GRAY_SCALE.gray60, - primaryInvertedHover: GRAY_SCALE.gray55, -}; diff --git a/packages/twenty-front/src/modules/ui/theme/constants/Blur.ts b/packages/twenty-front/src/modules/ui/theme/constants/Blur.ts deleted file mode 100644 index 01f265147..000000000 --- a/packages/twenty-front/src/modules/ui/theme/constants/Blur.ts +++ /dev/null @@ -1,4 +0,0 @@ -export const BLUR = { - light: 'blur(6px)', - strong: 'blur(20px)', -}; diff --git a/packages/twenty-front/src/modules/ui/theme/constants/BorderCommon.ts b/packages/twenty-front/src/modules/ui/theme/constants/BorderCommon.ts deleted file mode 100644 index a68f017bc..000000000 --- a/packages/twenty-front/src/modules/ui/theme/constants/BorderCommon.ts +++ /dev/null @@ -1,10 +0,0 @@ -export const BORDER_COMMON = { - radius: { - xs: '2px', - sm: '4px', - md: '8px', - xl: '20px', - pill: '999px', - rounded: '100%', - }, -}; diff --git a/packages/twenty-front/src/modules/ui/theme/constants/BorderDark.ts b/packages/twenty-front/src/modules/ui/theme/constants/BorderDark.ts deleted file mode 100644 index 98d7cb80b..000000000 --- a/packages/twenty-front/src/modules/ui/theme/constants/BorderDark.ts +++ /dev/null @@ -1,15 +0,0 @@ -import { BORDER_COMMON } from '@/ui/theme/constants/BorderCommon'; -import { COLOR } from '@/ui/theme/constants/Colors'; -import { GRAY_SCALE } from '@/ui/theme/constants/GrayScale'; - -export const BORDER_DARK = { - color: { - strong: GRAY_SCALE.gray55, - medium: GRAY_SCALE.gray65, - light: GRAY_SCALE.gray70, - secondaryInverted: GRAY_SCALE.gray35, - inverted: GRAY_SCALE.gray20, - danger: COLOR.red70, - }, - ...BORDER_COMMON, -}; diff --git a/packages/twenty-front/src/modules/ui/theme/constants/BorderLight.ts b/packages/twenty-front/src/modules/ui/theme/constants/BorderLight.ts deleted file mode 100644 index fbc43b130..000000000 --- a/packages/twenty-front/src/modules/ui/theme/constants/BorderLight.ts +++ /dev/null @@ -1,15 +0,0 @@ -import { BORDER_COMMON } from '@/ui/theme/constants/BorderCommon'; -import { COLOR } from '@/ui/theme/constants/Colors'; -import { GRAY_SCALE } from '@/ui/theme/constants/GrayScale'; - -export const BORDER_LIGHT = { - color: { - strong: GRAY_SCALE.gray25, - medium: GRAY_SCALE.gray20, - light: GRAY_SCALE.gray15, - secondaryInverted: GRAY_SCALE.gray50, - inverted: GRAY_SCALE.gray60, - danger: COLOR.red20, - }, - ...BORDER_COMMON, -}; diff --git a/packages/twenty-front/src/modules/ui/theme/constants/BoxShadowDark.ts b/packages/twenty-front/src/modules/ui/theme/constants/BoxShadowDark.ts deleted file mode 100644 index 3c0ae9c33..000000000 --- a/packages/twenty-front/src/modules/ui/theme/constants/BoxShadowDark.ts +++ /dev/null @@ -1,18 +0,0 @@ -import { GRAY_SCALE } from '@/ui/theme/constants/GrayScale'; -import { RGBA } from '@/ui/theme/constants/Rgba'; - -export const BOX_SHADOW_DARK = { - light: `0px 2px 4px 0px ${RGBA( - GRAY_SCALE.gray100, - 0.04, - )}, 0px 0px 4px 0px ${RGBA(GRAY_SCALE.gray100, 0.08)}`, - strong: `2px 4px 16px 0px ${RGBA( - GRAY_SCALE.gray100, - 0.16, - )}, 0px 2px 4px 0px ${RGBA(GRAY_SCALE.gray100, 0.08)}`, - underline: `0px 1px 0px 0px ${RGBA(GRAY_SCALE.gray100, 0.32)}`, - superHeavy: `2px 4px 16px 0px ${RGBA( - GRAY_SCALE.gray100, - 0.12, - )}, 0px 2px 4px 0px ${RGBA(GRAY_SCALE.gray100, 0.04)}`, -}; diff --git a/packages/twenty-front/src/modules/ui/theme/constants/BoxShadowLight.ts b/packages/twenty-front/src/modules/ui/theme/constants/BoxShadowLight.ts deleted file mode 100644 index 9ed6fd123..000000000 --- a/packages/twenty-front/src/modules/ui/theme/constants/BoxShadowLight.ts +++ /dev/null @@ -1,21 +0,0 @@ -import { GRAY_SCALE } from '@/ui/theme/constants/GrayScale'; -import { RGBA } from '@/ui/theme/constants/Rgba'; - -export const BOX_SHADOW_LIGHT = { - light: `0px 2px 4px 0px ${RGBA( - GRAY_SCALE.gray100, - 0.04, - )}, 0px 0px 4px 0px ${RGBA(GRAY_SCALE.gray100, 0.08)}`, - strong: `2px 4px 16px 0px ${RGBA( - GRAY_SCALE.gray100, - 0.12, - )}, 0px 2px 4px 0px ${RGBA(GRAY_SCALE.gray100, 0.04)}`, - underline: `0px 1px 0px 0px ${RGBA(GRAY_SCALE.gray100, 0.32)}`, - superHeavy: `0px 0px 8px 0px ${RGBA( - GRAY_SCALE.gray100, - 0.16, - )}, 0px 8px 64px -16px ${RGBA( - GRAY_SCALE.gray100, - 0.48, - )}, 0px 24px 56px -16px ${RGBA(GRAY_SCALE.gray100, 0.08)}`, -}; diff --git a/packages/twenty-front/src/modules/ui/theme/constants/Colors.ts b/packages/twenty-front/src/modules/ui/theme/constants/Colors.ts deleted file mode 100644 index c8580a51e..000000000 --- a/packages/twenty-front/src/modules/ui/theme/constants/Colors.ts +++ /dev/null @@ -1,8 +0,0 @@ -import { MAIN_COLORS } from 'twenty-ui'; - -import { SECONDARY_COLORS } from '@/ui/theme/constants/SecondaryColors'; - -export const COLOR = { - ...MAIN_COLORS, - ...SECONDARY_COLORS, -}; diff --git a/packages/twenty-front/src/modules/ui/theme/constants/FontCommon.ts b/packages/twenty-front/src/modules/ui/theme/constants/FontCommon.ts deleted file mode 100644 index 65556c018..000000000 --- a/packages/twenty-front/src/modules/ui/theme/constants/FontCommon.ts +++ /dev/null @@ -1,17 +0,0 @@ -export const FONT_COMMON = { - size: { - xxs: '0.625rem', - xs: '0.85rem', - sm: '0.92rem', - md: '1rem', - lg: '1.23rem', - xl: '1.54rem', - xxl: '1.85rem', - }, - weight: { - regular: 400, - medium: 500, - semiBold: 600, - }, - family: 'Inter, sans-serif', -}; diff --git a/packages/twenty-front/src/modules/ui/theme/constants/FontDark.ts b/packages/twenty-front/src/modules/ui/theme/constants/FontDark.ts deleted file mode 100644 index 07aac6f97..000000000 --- a/packages/twenty-front/src/modules/ui/theme/constants/FontDark.ts +++ /dev/null @@ -1,16 +0,0 @@ -import { COLOR } from '@/ui/theme/constants/Colors'; -import { FONT_COMMON } from '@/ui/theme/constants/FontCommon'; -import { GRAY_SCALE } from '@/ui/theme/constants/GrayScale'; - -export const FONT_DARK = { - color: { - primary: GRAY_SCALE.gray20, - secondary: GRAY_SCALE.gray35, - tertiary: GRAY_SCALE.gray45, - light: GRAY_SCALE.gray50, - extraLight: GRAY_SCALE.gray55, - inverted: GRAY_SCALE.gray100, - danger: COLOR.red, - }, - ...FONT_COMMON, -}; diff --git a/packages/twenty-front/src/modules/ui/theme/constants/FontLight.ts b/packages/twenty-front/src/modules/ui/theme/constants/FontLight.ts deleted file mode 100644 index 9681a6502..000000000 --- a/packages/twenty-front/src/modules/ui/theme/constants/FontLight.ts +++ /dev/null @@ -1,16 +0,0 @@ -import { COLOR } from '@/ui/theme/constants/Colors'; -import { FONT_COMMON } from '@/ui/theme/constants/FontCommon'; -import { GRAY_SCALE } from '@/ui/theme/constants/GrayScale'; - -export const FONT_LIGHT = { - color: { - primary: GRAY_SCALE.gray60, - secondary: GRAY_SCALE.gray50, - tertiary: GRAY_SCALE.gray40, - light: GRAY_SCALE.gray35, - extraLight: GRAY_SCALE.gray30, - inverted: GRAY_SCALE.gray0, - danger: COLOR.red, - }, - ...FONT_COMMON, -}; diff --git a/packages/twenty-front/src/modules/ui/theme/constants/GrayScale.ts b/packages/twenty-front/src/modules/ui/theme/constants/GrayScale.ts deleted file mode 100644 index 90c194d92..000000000 --- a/packages/twenty-front/src/modules/ui/theme/constants/GrayScale.ts +++ /dev/null @@ -1,22 +0,0 @@ -/* eslint-disable @nx/workspace-no-hardcoded-colors */ -export const GRAY_SCALE = { - gray100: '#000000', - gray90: '#141414', - gray85: '#171717', - gray80: '#1b1b1b', - gray75: '#1d1d1d', - gray70: '#222222', - gray65: '#292929', - gray60: '#333333', - gray55: '#4c4c4c', - gray50: '#666666', - gray45: '#818181', - gray40: '#999999', - gray35: '#b3b3b3', - gray30: '#cccccc', - gray25: '#d6d6d6', - gray20: '#ebebeb', - gray15: '#f1f1f1', - gray10: '#fcfcfc', - gray0: '#ffffff', -}; diff --git a/packages/twenty-front/src/modules/ui/theme/constants/HoverBackground.ts b/packages/twenty-front/src/modules/ui/theme/constants/HoverBackground.ts deleted file mode 100644 index cbd9b9e0e..000000000 --- a/packages/twenty-front/src/modules/ui/theme/constants/HoverBackground.ts +++ /dev/null @@ -1,8 +0,0 @@ -import { css } from '@emotion/react'; - -export const HOVER_BACKGROUND = (props: any) => css` - transition: background 0.1s ease; - &:hover { - background: ${props.theme.background.transparent.light}; - } -`; diff --git a/packages/twenty-front/src/modules/ui/theme/constants/Icon.ts b/packages/twenty-front/src/modules/ui/theme/constants/Icon.ts deleted file mode 100644 index e103c0b8e..000000000 --- a/packages/twenty-front/src/modules/ui/theme/constants/Icon.ts +++ /dev/null @@ -1,13 +0,0 @@ -export const ICON = { - size: { - sm: 14, - md: 16, - lg: 20, - xl: 40, - }, - stroke: { - sm: 1.6, - md: 2, - lg: 2.5, - }, -}; diff --git a/packages/twenty-front/src/modules/ui/theme/constants/MainColorNames.ts b/packages/twenty-front/src/modules/ui/theme/constants/MainColorNames.ts deleted file mode 100644 index 626de706a..000000000 --- a/packages/twenty-front/src/modules/ui/theme/constants/MainColorNames.ts +++ /dev/null @@ -1,5 +0,0 @@ -import { MAIN_COLORS } from 'twenty-ui'; - -export const MAIN_COLOR_NAMES = Object.keys(MAIN_COLORS) as ThemeColor[]; - -export type ThemeColor = keyof typeof MAIN_COLORS; diff --git a/packages/twenty-front/src/modules/ui/theme/constants/MobileViewport.ts b/packages/twenty-front/src/modules/ui/theme/constants/MobileViewport.ts deleted file mode 100644 index 485d2dacd..000000000 --- a/packages/twenty-front/src/modules/ui/theme/constants/MobileViewport.ts +++ /dev/null @@ -1 +0,0 @@ -export const MOBILE_VIEWPORT = 768; diff --git a/packages/twenty-front/src/modules/ui/theme/constants/Modal.ts b/packages/twenty-front/src/modules/ui/theme/constants/Modal.ts deleted file mode 100644 index 2a53265cc..000000000 --- a/packages/twenty-front/src/modules/ui/theme/constants/Modal.ts +++ /dev/null @@ -1,7 +0,0 @@ -export const MODAL = { - size: { - sm: '300px', - md: '400px', - lg: '53%', - }, -}; diff --git a/packages/twenty-front/src/modules/ui/theme/constants/OverlayBackground.ts b/packages/twenty-front/src/modules/ui/theme/constants/OverlayBackground.ts deleted file mode 100644 index e7f7de01c..000000000 --- a/packages/twenty-front/src/modules/ui/theme/constants/OverlayBackground.ts +++ /dev/null @@ -1,8 +0,0 @@ -import { css } from '@emotion/react'; -import { ThemeType } from 'twenty-ui'; - -export const OVERLAY_BACKGROUND = (props: { theme: ThemeType }) => css` - backdrop-filter: blur(12px) saturate(200%) contrast(50%) brightness(130%); - background: ${props.theme.background.transparent.secondary}; - box-shadow: ${props.theme.boxShadow.strong}; -`; diff --git a/packages/twenty-front/src/modules/ui/theme/constants/Rgba.ts b/packages/twenty-front/src/modules/ui/theme/constants/Rgba.ts deleted file mode 100644 index 6b06f2a64..000000000 --- a/packages/twenty-front/src/modules/ui/theme/constants/Rgba.ts +++ /dev/null @@ -1,8 +0,0 @@ -/* eslint-disable @nx/workspace-no-hardcoded-colors */ -import hexRgb from 'hex-rgb'; - -export const RGBA = (hex: string, alpha: number) => { - return `rgba(${hexRgb(hex, { format: 'array' }) - .slice(0, -1) - .join(',')},${alpha})`; -}; diff --git a/packages/twenty-front/src/modules/ui/theme/constants/SecondaryColors.ts b/packages/twenty-front/src/modules/ui/theme/constants/SecondaryColors.ts deleted file mode 100644 index 2eb3be248..000000000 --- a/packages/twenty-front/src/modules/ui/theme/constants/SecondaryColors.ts +++ /dev/null @@ -1,106 +0,0 @@ -/* eslint-disable @nx/workspace-no-hardcoded-colors */ -import { GRAY_SCALE } from '@/ui/theme/constants/GrayScale'; - -export const SECONDARY_COLORS = { - yellow80: '#2e2a1a', - yellow70: '#453d1e', - yellow60: '#746224', - yellow50: '#b99b2e', - yellow40: '#ffe074', - yellow30: '#ffedaf', - yellow20: '#fff6d7', - yellow10: '#fffbeb', - - green80: '#1d2d1b', - green70: '#23421e', - green60: '#2a5822', - green50: '#42ae31', - green40: '#88f477', - green30: '#ccfac5', - green20: '#ddfcd8', - green10: '#eefdec', - - turquoise80: '#172b23', - turquoise70: '#173f2f', - turquoise60: '#166747', - turquoise50: '#16a26b', - turquoise40: '#5be8b1', - turquoise30: '#a1f2d2', - turquoise20: '#d0f8e9', - turquoise10: '#e8fcf4', - - sky80: '#152b2e', - sky70: '#123f45', - sky60: '#0e6874', - sky50: '#07a4b9', - sky40: '#4de9ff', - sky30: '#99f3ff', - sky20: '#ccf9ff', - sky10: '#e5fcff', - - blue80: '#171e2c', - blue70: '#172642', - blue60: '#18356d', - blue50: '#184bad', - blue40: '#5e90f2', - blue30: '#a3c0f8', - blue20: '#d1dffb', - blue10: '#e8effd', - - purple80: '#231e2e', - purple70: '#2f2545', - purple60: '#483473', - purple50: '#6c49b8', - purple40: '#b28ffe', - purple30: '#d3bffe', - purple20: '#e9dfff', - purple10: '#f4efff', - - pink80: '#2d1c29', - pink70: '#43213c', - pink60: '#702c61', - pink50: '#b23b98', - pink40: '#f881de', - pink30: '#fbb7ec', - pink20: '#fddbf6', - pink10: '#feedfa', - - red80: '#2d1b1b', - red70: '#441f1f', - red60: '#712727', - red50: '#b43232', - red40: '#fa7878', - red30: '#fcb2b2', - red20: '#fed8d8', - red10: '#feecec', - - orange80: '#2e2018', - orange70: '#452919', - orange60: '#743b1b', - orange50: '#b9571f', - orange40: '#ff9c64', - orange30: '#ffc7a7', - orange20: '#ffe3d3', - orange10: '#fff1e9', - - gray80: GRAY_SCALE.gray70, - gray70: GRAY_SCALE.gray65, - gray60: GRAY_SCALE.gray55, - gray50: GRAY_SCALE.gray40, - gray40: GRAY_SCALE.gray25, - gray30: GRAY_SCALE.gray20, - gray20: GRAY_SCALE.gray15, - gray10: GRAY_SCALE.gray10, - blueAccent90: '#141a25', - blueAccent85: '#151d2e', - blueAccent80: '#152037', - blueAccent75: '#16233f', - blueAccent70: '#17294a', - blueAccent60: '#18356d', - blueAccent40: '#a3c0f8', - blueAccent35: '#c8d9fb', - blueAccent25: '#dae6fc', - blueAccent20: '#e2ecfd', - blueAccent15: '#edf2fe', - blueAccent10: '#f5f9fd', -}; diff --git a/packages/twenty-front/src/modules/ui/theme/constants/TagDark.ts b/packages/twenty-front/src/modules/ui/theme/constants/TagDark.ts deleted file mode 100644 index f146d694b..000000000 --- a/packages/twenty-front/src/modules/ui/theme/constants/TagDark.ts +++ /dev/null @@ -1,28 +0,0 @@ -import { COLOR } from '@/ui/theme/constants/Colors'; - -export const TAG_DARK = { - text: { - green: COLOR.green10, - turquoise: COLOR.turquoise10, - sky: COLOR.sky10, - blue: COLOR.blue10, - purple: COLOR.purple10, - pink: COLOR.pink10, - red: COLOR.red10, - orange: COLOR.orange10, - yellow: COLOR.yellow10, - gray: COLOR.gray10, - }, - background: { - green: COLOR.green60, - turquoise: COLOR.turquoise60, - sky: COLOR.sky60, - blue: COLOR.blue60, - purple: COLOR.purple60, - pink: COLOR.pink60, - red: COLOR.red60, - orange: COLOR.orange60, - yellow: COLOR.yellow60, - gray: COLOR.gray60, - }, -}; diff --git a/packages/twenty-front/src/modules/ui/theme/constants/TagLight.ts b/packages/twenty-front/src/modules/ui/theme/constants/TagLight.ts deleted file mode 100644 index 29bdee8be..000000000 --- a/packages/twenty-front/src/modules/ui/theme/constants/TagLight.ts +++ /dev/null @@ -1,28 +0,0 @@ -import { COLOR } from './Colors'; - -export const TAG_LIGHT = { - text: { - green: COLOR.green60, - turquoise: COLOR.turquoise60, - sky: COLOR.sky60, - blue: COLOR.blue60, - purple: COLOR.purple60, - pink: COLOR.pink60, - red: COLOR.red60, - orange: COLOR.orange60, - yellow: COLOR.yellow60, - gray: COLOR.gray60, - }, - background: { - green: COLOR.green20, - turquoise: COLOR.turquoise20, - sky: COLOR.sky20, - blue: COLOR.blue20, - purple: COLOR.purple20, - pink: COLOR.pink20, - red: COLOR.red20, - orange: COLOR.orange20, - yellow: COLOR.yellow20, - gray: COLOR.gray20, - }, -}; diff --git a/packages/twenty-front/src/modules/ui/theme/constants/Text.ts b/packages/twenty-front/src/modules/ui/theme/constants/Text.ts deleted file mode 100644 index db9a0786b..000000000 --- a/packages/twenty-front/src/modules/ui/theme/constants/Text.ts +++ /dev/null @@ -1,13 +0,0 @@ -export const TEXT = { - lineHeight: { - lg: 1.5, - md: 1.2, - }, - - iconSizeMedium: 16, - iconSizeSmall: 14, - - iconStrikeLight: 1.6, - iconStrikeMedium: 2, - iconStrikeBold: 2.5, -}; diff --git a/packages/twenty-front/src/modules/ui/theme/constants/TextInputStyle.ts b/packages/twenty-front/src/modules/ui/theme/constants/TextInputStyle.ts deleted file mode 100644 index 640b28a08..000000000 --- a/packages/twenty-front/src/modules/ui/theme/constants/TextInputStyle.ts +++ /dev/null @@ -1,20 +0,0 @@ -import { css } from '@emotion/react'; -import { ThemeType } from 'twenty-ui'; - -export const TEXT_INPUT_STYLE = (props: { theme: ThemeType }) => css` - background-color: transparent; - border: none; - color: ${props.theme.font.color.primary}; - font-family: ${props.theme.font.family}; - font-size: inherit; - font-weight: inherit; - outline: none; - padding: ${props.theme.spacing(0)} ${props.theme.spacing(2)}; - - &::placeholder, - &::-webkit-input-placeholder { - color: ${props.theme.font.color.light}; - font-family: ${props.theme.font.family}; - font-weight: ${props.theme.font.weight.medium}; - } -`; diff --git a/packages/twenty-front/src/modules/ui/theme/constants/ThemeCommon.ts b/packages/twenty-front/src/modules/ui/theme/constants/ThemeCommon.ts deleted file mode 100644 index 1480582a2..000000000 --- a/packages/twenty-front/src/modules/ui/theme/constants/ThemeCommon.ts +++ /dev/null @@ -1,44 +0,0 @@ -/* eslint-disable @nx/workspace-no-hardcoded-colors */ -import { ANIMATION } from '@/ui/theme/constants/Animation'; -import { BLUR } from '@/ui/theme/constants/Blur'; -import { COLOR } from '@/ui/theme/constants/Colors'; -import { GRAY_SCALE } from '@/ui/theme/constants/GrayScale'; -import { ICON } from '@/ui/theme/constants/Icon'; -import { MODAL } from '@/ui/theme/constants/Modal'; -import { TEXT } from '@/ui/theme/constants/Text'; - -export const THEME_COMMON = { - color: COLOR, - grayScale: GRAY_SCALE, - icon: ICON, - modal: MODAL, - text: TEXT, - blur: BLUR, - animation: ANIMATION, - snackBar: { - success: { - background: '#16A26B', - color: '#D0F8E9', - }, - error: { - background: '#B43232', - color: '#FED8D8', - }, - info: { - background: COLOR.gray80, - color: GRAY_SCALE.gray0, - }, - }, - spacingMultiplicator: 4, - spacing: (...args: number[]) => - args.map((multiplicator) => `${multiplicator * 4}px`).join(' '), - betweenSiblingsGap: `2px`, - table: { - horizontalCellMargin: '8px', - checkboxColumnWidth: '32px', - horizontalCellPadding: '8px', - }, - rightDrawerWidth: '500px', - clickableElementBackgroundTransition: 'background 0.1s ease', - lastLayerZIndex: 2147483647, -}; diff --git a/packages/twenty-front/src/modules/ui/theme/utils/themeColorSchema.ts b/packages/twenty-front/src/modules/ui/theme/utils/themeColorSchema.ts deleted file mode 100644 index 2e0159e58..000000000 --- a/packages/twenty-front/src/modules/ui/theme/utils/themeColorSchema.ts +++ /dev/null @@ -1,10 +0,0 @@ -import { z } from 'zod'; - -import { - MAIN_COLOR_NAMES, - ThemeColor, -} from '@/ui/theme/constants/MainColorNames'; - -export const themeColorSchema = z.enum( - MAIN_COLOR_NAMES as [ThemeColor, ...ThemeColor[]], -); diff --git a/packages/twenty-front/src/modules/ui/utilities/animation/components/AnimatedEaseIn.tsx b/packages/twenty-front/src/modules/ui/utilities/animation/components/AnimatedEaseIn.tsx index 00bccbbd7..e3a25bf60 100644 --- a/packages/twenty-front/src/modules/ui/utilities/animation/components/AnimatedEaseIn.tsx +++ b/packages/twenty-front/src/modules/ui/utilities/animation/components/AnimatedEaseIn.tsx @@ -1,7 +1,6 @@ import { useTheme } from '@emotion/react'; import { motion } from 'framer-motion'; - -import { AnimationDuration } from '@/ui/theme/constants/Animation'; +import { AnimationDuration } from 'twenty-ui'; type AnimatedEaseInProps = Omit< React.ComponentProps, diff --git a/packages/twenty-front/src/modules/ui/utilities/animation/components/AnimatedEaseInOut.tsx b/packages/twenty-front/src/modules/ui/utilities/animation/components/AnimatedEaseInOut.tsx index a52c69e4b..8411a4fb3 100644 --- a/packages/twenty-front/src/modules/ui/utilities/animation/components/AnimatedEaseInOut.tsx +++ b/packages/twenty-front/src/modules/ui/utilities/animation/components/AnimatedEaseInOut.tsx @@ -1,7 +1,6 @@ import { useTheme } from '@emotion/react'; import { AnimatePresence, motion } from 'framer-motion'; - -import { AnimationDuration } from '@/ui/theme/constants/Animation'; +import { AnimationDuration } from 'twenty-ui'; type AnimatedEaseInOutProps = { isOpen: boolean; diff --git a/packages/twenty-front/src/modules/ui/utilities/animation/components/AnimatedFadeOut.tsx b/packages/twenty-front/src/modules/ui/utilities/animation/components/AnimatedFadeOut.tsx index d3e227084..7dd5f4a4b 100644 --- a/packages/twenty-front/src/modules/ui/utilities/animation/components/AnimatedFadeOut.tsx +++ b/packages/twenty-front/src/modules/ui/utilities/animation/components/AnimatedFadeOut.tsx @@ -1,7 +1,6 @@ import { useTheme } from '@emotion/react'; import { AnimatePresence, motion } from 'framer-motion'; - -import { AnimationDuration } from '@/ui/theme/constants/Animation'; +import { AnimationDuration } from 'twenty-ui'; type AnimatedFadeOutProps = { isOpen: boolean; diff --git a/packages/twenty-front/src/modules/ui/utilities/drag-select/components/DragSelect.tsx b/packages/twenty-front/src/modules/ui/utilities/drag-select/components/DragSelect.tsx index ab4c8a304..a9dca6c5e 100644 --- a/packages/twenty-front/src/modules/ui/utilities/drag-select/components/DragSelect.tsx +++ b/packages/twenty-front/src/modules/ui/utilities/drag-select/components/DragSelect.tsx @@ -4,8 +4,7 @@ import { useSelectionContainer, } from '@air/react-drag-to-select'; import { useTheme } from '@emotion/react'; - -import { RGBA } from '@/ui/theme/constants/Rgba'; +import { RGBA } from 'twenty-ui'; import { useDragSelect } from '../hooks/useDragSelect'; diff --git a/packages/twenty-front/src/modules/ui/utilities/responsive/hooks/useIsMobile.ts b/packages/twenty-front/src/modules/ui/utilities/responsive/hooks/useIsMobile.ts index 0479488cf..6bed73a89 100644 --- a/packages/twenty-front/src/modules/ui/utilities/responsive/hooks/useIsMobile.ts +++ b/packages/twenty-front/src/modules/ui/utilities/responsive/hooks/useIsMobile.ts @@ -1,6 +1,5 @@ import { useMediaQuery } from 'react-responsive'; - -import { MOBILE_VIEWPORT } from '@/ui/theme/constants/MobileViewport'; +import { MOBILE_VIEWPORT } from 'twenty-ui'; export const useIsMobile = () => useMediaQuery({ query: `(max-width: ${MOBILE_VIEWPORT}px)` }); 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 60818e493..a3461683a 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,12 +1,16 @@ import { useTheme } from '@emotion/react'; import styled from '@emotion/styled'; import { useRecoilValue } from 'recoil'; -import { IconChevronDown, IconList, useIcons } from 'twenty-ui'; +import { + IconChevronDown, + IconList, + MOBILE_VIEWPORT, + useIcons, +} from 'twenty-ui'; import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown'; import { StyledDropdownButtonContainer } from '@/ui/layout/dropdown/components/StyledDropdownButtonContainer'; import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown'; -import { MOBILE_VIEWPORT } from '@/ui/theme/constants/MobileViewport'; import { useGetCurrentView } from '@/views/hooks/useGetCurrentView'; import { ViewsHotkeyScope } from '@/views/types/ViewsHotkeyScope'; import { ViewPickerCreateOrEditContent } from '@/views/view-picker/components/ViewPickerCreateOrEditContent'; diff --git a/packages/twenty-front/src/pages/auth/PaymentSuccess.tsx b/packages/twenty-front/src/pages/auth/PaymentSuccess.tsx index 6be845d67..028166bd3 100644 --- a/packages/twenty-front/src/pages/auth/PaymentSuccess.tsx +++ b/packages/twenty-front/src/pages/auth/PaymentSuccess.tsx @@ -2,13 +2,12 @@ import React from 'react'; import { useNavigate } from 'react-router-dom'; import { useTheme } from '@emotion/react'; import styled from '@emotion/styled'; -import { IconCheck } from 'twenty-ui'; +import { IconCheck, RGBA } from 'twenty-ui'; import { SubTitle } from '@/auth/components/SubTitle'; import { Title } from '@/auth/components/Title'; import { AppPath } from '@/types/AppPath'; import { MainButton } from '@/ui/input/button/components/MainButton'; -import { RGBA } from '@/ui/theme/constants/Rgba'; import { AnimatedEaseIn } from '@/ui/utilities/animation/components/AnimatedEaseIn'; const StyledCheckContainer = styled.div` diff --git a/packages/twenty-ui/src/theme/constants/ThemeCommon.ts b/packages/twenty-ui/src/theme/constants/ThemeCommon.ts index 9ba6fadef..8c450fb87 100644 --- a/packages/twenty-ui/src/theme/constants/ThemeCommon.ts +++ b/packages/twenty-ui/src/theme/constants/ThemeCommon.ts @@ -1,3 +1,4 @@ +/* eslint-disable @nx/workspace-no-hardcoded-colors */ import { ANIMATION } from './Animation'; import { BLUR } from './Blur'; import { COLOR } from './Colors'; @@ -14,6 +15,20 @@ export const THEME_COMMON = { text: TEXT, blur: BLUR, animation: ANIMATION, + snackBar: { + success: { + background: '#16A26B', + color: '#D0F8E9', + }, + error: { + background: '#B43232', + color: '#FED8D8', + }, + info: { + background: COLOR.gray80, + color: GRAY_SCALE.gray0, + }, + }, spacingMultiplicator: 4, spacing: (...args: number[]) => args.map((multiplicator) => `${multiplicator * 4}px`).join(' '),