From be1503c71989cb3455d63dd9ee4d3eaa77f08682 Mon Sep 17 00:00:00 2001 From: Lucas Bordeau Date: Sun, 30 Jun 2024 21:54:11 +0200 Subject: [PATCH] Remove CSS modules (#6017) CSS modules were used as a first test for performance optimization. We later found out that Linaria was a better tradeoff. This PR removes what was implemented in CSS modules and also the CSS theme file that was created that was overlapping with the TS theme files. --- .../RecordTableCellContainer.module.css | 32 ------- .../components/RecordTableCellContainer.tsx | 67 +++++++++---- ...RecordTableCellDisplayContainer.module.css | 21 ---- .../RecordTableCellDisplayContainer.tsx | 34 +++++-- packages/twenty-front/vite.config.ts | 3 + .../avatar/components/Avatar.module.css | 23 ----- .../src/display/avatar/components/Avatar.tsx | 96 ++++++++++--------- .../__stories__/AvatarGroup.stories.tsx | 9 +- .../constants/AvatarPropertiesBySize.ts | 22 +++++ .../src/display/avatar/types/AvatarSize.ts | 1 + .../src/display/avatar/types/AvatarType.ts | 1 + .../display/chip/components/EntityChip.tsx | 3 +- packages/twenty-ui/src/display/index.ts | 3 + .../OverflowingTextWithTooltip.module.css | 20 ---- .../src/theme/constants/BorderCommon.ts | 2 +- .../src/theme/constants/FontCommon.ts | 2 +- .../src/theme/provider/ThemeProvider.tsx | 9 +- .../twenty-ui/src/theme/provider/theme.css | 93 ------------------ packages/twenty-ui/vite.config.ts | 1 + 19 files changed, 164 insertions(+), 278 deletions(-) delete mode 100644 packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellContainer.module.css delete mode 100644 packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellDisplayContainer.module.css delete mode 100644 packages/twenty-ui/src/display/avatar/components/Avatar.module.css create mode 100644 packages/twenty-ui/src/display/avatar/constants/AvatarPropertiesBySize.ts create mode 100644 packages/twenty-ui/src/display/avatar/types/AvatarSize.ts create mode 100644 packages/twenty-ui/src/display/avatar/types/AvatarType.ts delete mode 100644 packages/twenty-ui/src/display/tooltip/OverflowingTextWithTooltip.module.css delete mode 100644 packages/twenty-ui/src/theme/provider/theme.css diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellContainer.module.css b/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellContainer.module.css deleted file mode 100644 index ed8e38023..000000000 --- a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellContainer.module.css +++ /dev/null @@ -1,32 +0,0 @@ -.td-in-edit-mode { - z-index: 4 !important; -} - -.td-not-in-edit-mode { - z-index: 3; -} - -.td-is-selected { - background: var(--twentycrm-accent-quaternary); -} - -.td-is-not-selected { - background: var(--twentycrm-background-primary); -} - -.cell-base-container { - align-items: center; - box-sizing: border-box; - cursor: pointer; - display: flex; - height: 32px; - position: relative; - user-select: none; -} - -.cell-base-container-soft-focus { - background: var(--twentycrm-background-transparent-secondary); - border-radius: var(--twentycrm-border-radius-sm); - border: 1px solid var(--twentycrm-font-color-extra-light); -} - diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellContainer.tsx b/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellContainer.tsx index a1a3540da..a120b9ebb 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellContainer.tsx +++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellContainer.tsx @@ -1,6 +1,7 @@ import React, { ReactElement, useContext } from 'react'; -import { clsx } from 'clsx'; +import { styled } from '@linaria/react'; import { useRecoilValue } from 'recoil'; +import { BORDER_COMMON, ThemeContext } from 'twenty-ui'; import { useFieldFocus } from '@/object-record/record-field/hooks/useFieldFocus'; import { RecordTableContext } from '@/object-record/record-table/contexts/RecordTableContext'; @@ -22,7 +23,38 @@ import { TableHotkeyScope } from '../../types/TableHotkeyScope'; import { RecordTableCellDisplayMode } from './RecordTableCellDisplayMode'; import { RecordTableCellEditMode } from './RecordTableCellEditMode'; -import styles from './RecordTableCellContainer.module.css'; +const StyledTd = styled.td<{ + isInEditMode: boolean; + backgroundColor: string; +}>` + background: ${({ backgroundColor }) => backgroundColor}; + z-index: ${({ isInEditMode }) => (isInEditMode ? '4 !important' : 3)}; +`; + +const borderRadiusSm = BORDER_COMMON.radius.sm; + +const StyledBaseContainer = styled.div<{ + hasSoftFocus: boolean; + fontColorExtraLight: string; + backgroundColorTransparentSecondary: string; +}>` + align-items: center; + box-sizing: border-box; + cursor: pointer; + display: flex; + height: 32px; + position: relative; + user-select: none; + + background: ${({ hasSoftFocus, backgroundColorTransparentSecondary }) => + hasSoftFocus ? backgroundColorTransparentSecondary : 'none'}; + + border-radius: ${({ hasSoftFocus }) => + hasSoftFocus ? borderRadiusSm : 'none'}; + + border: ${({ hasSoftFocus, fontColorExtraLight }) => + hasSoftFocus ? `1px solid ${fontColorExtraLight}` : 'none'}; +`; export type RecordTableCellContainerProps = { editModeContent: ReactElement; @@ -43,6 +75,8 @@ export const RecordTableCellContainer = ({ nonEditModeContent, editHotkeyScope, }: RecordTableCellContainerProps) => { + const { theme } = useContext(ThemeContext); + const { setIsFocused } = useFieldFocus(); const { openTableCell } = useOpenRecordTableCellFromCell(); @@ -100,27 +134,28 @@ export const RecordTableCellContainer = ({ } }; + const tdBackgroundColor = isSelected + ? theme.accent.quaternary + : theme.background.primary; + return ( - -
{isInEditMode ? ( {editModeContent} @@ -134,8 +169,8 @@ export const RecordTableCellContainer = ({ {nonEditModeContent} )} -
+ - + ); }; diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellDisplayContainer.module.css b/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellDisplayContainer.module.css deleted file mode 100644 index 381efe436..000000000 --- a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellDisplayContainer.module.css +++ /dev/null @@ -1,21 +0,0 @@ -.cell-display-outer-container { - align-items: center; - display: flex; - height: 100%; - overflow: hidden; - padding-left: 6px; - width: 100%; -} - -.cell-display-with-soft-focus { - margin: -1px; -} - -.cell-display-inner-container { - align-items: center; - display: flex; - height: 100%; - overflow: hidden; - width: 100%; -} - diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellDisplayContainer.tsx b/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellDisplayContainer.tsx index e47277cc1..695689ec6 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellDisplayContainer.tsx +++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellDisplayContainer.tsx @@ -1,7 +1,26 @@ import { Ref } from 'react'; -import clsx from 'clsx'; +import { styled } from '@linaria/react'; -import styles from './RecordTableCellDisplayContainer.module.css'; +const StyledOuterContainer = styled.div<{ + hasSoftFocus?: boolean; +}>` + align-items: center; + display: flex; + height: 100%; + overflow: hidden; + padding-left: 6px; + width: 100%; + + margin: ${({ hasSoftFocus }) => (hasSoftFocus === true ? '-1px' : 'none')}; +`; + +const StyledInnerContainer = styled.div` + align-items: center; + display: flex; + height: 100%; + overflow: hidden; + width: 100%; +`; export type EditableCellDisplayContainerProps = { softFocus?: boolean; @@ -16,17 +35,14 @@ export const RecordTableCellDisplayContainer = ({ onClick, scrollRef, }: React.PropsWithChildren) => ( -
-
{children}
-
+ {children} + ); diff --git a/packages/twenty-front/vite.config.ts b/packages/twenty-front/vite.config.ts index 3ed3cdcdb..08534bf0a 100644 --- a/packages/twenty-front/vite.config.ts +++ b/packages/twenty-front/vite.config.ts @@ -64,6 +64,9 @@ export default defineConfig(({ command, mode }) => { '**/Tag.tsx', '**/MultiSelectFieldDisplay.tsx', '**/RatingInput.tsx', + '**/RecordTableCellContainer.tsx', + '**/RecordTableCellDisplayContainer.tsx', + '**/Avatar.tsx', ], babelOptions: { presets: ['@babel/preset-typescript', '@babel/preset-react'], diff --git a/packages/twenty-ui/src/display/avatar/components/Avatar.module.css b/packages/twenty-ui/src/display/avatar/components/Avatar.module.css deleted file mode 100644 index ed560dead..000000000 --- a/packages/twenty-ui/src/display/avatar/components/Avatar.module.css +++ /dev/null @@ -1,23 +0,0 @@ -.avatar { - align-items: center; - border-radius: 2px; - display: flex; - flex-shrink: 0; - justify-content: center; - overflow: hidden; - user-select: none; -} - -.rounded { - border-radius: 50%; -} - -.avatar-on-click:hover { - box-shadow: 0 0 0 4px var(--twentycrm-background-transparent-light); -} - -.avatar-image { - object-fit: cover; - width: 100%; - height: 100%; -} \ No newline at end of file diff --git a/packages/twenty-ui/src/display/avatar/components/Avatar.tsx b/packages/twenty-ui/src/display/avatar/components/Avatar.tsx index 1e480c799..a191549d4 100644 --- a/packages/twenty-ui/src/display/avatar/components/Avatar.tsx +++ b/packages/twenty-ui/src/display/avatar/components/Avatar.tsx @@ -1,15 +1,49 @@ +import { useContext } from 'react'; +import { styled } from '@linaria/react'; import { isNonEmptyString, isUndefined } from '@sniptt/guards'; -import clsx from 'clsx'; import { useRecoilState } from 'recoil'; import { invalidAvatarUrlsState } from '@ui/display/avatar/components/states/isInvalidAvatarUrlState'; +import { AVATAR_PROPERTIES_BY_SIZE } from '@ui/display/avatar/constants/AvatarPropertiesBySize'; +import { AvatarSize } from '@ui/display/avatar/types/AvatarSize'; +import { AvatarType } from '@ui/display/avatar/types/AvatarType'; +import { ThemeContext } from '@ui/theme'; import { Nullable, stringToHslColor } from '@ui/utilities'; -import styles from './Avatar.module.css'; +const StyledAvatar = styled.div<{ + size: AvatarSize; + rounded?: boolean; + clickable?: boolean; + color: string; + backgroundColor: string; + backgroundTransparentLight: string; +}>` + align-items: center; + flex-shrink: 0; + overflow: hidden; + user-select: none; -export type AvatarType = 'squared' | 'rounded'; + border-radius: ${({ rounded }) => (rounded ? '50%' : '2px')}; + display: flex; + font-size: ${({ size }) => AVATAR_PROPERTIES_BY_SIZE[size].fontSize}; + height: ${({ size }) => AVATAR_PROPERTIES_BY_SIZE[size].width}; + justify-content: center; -export type AvatarSize = 'xl' | 'lg' | 'md' | 'sm' | 'xs'; + width: ${({ size }) => AVATAR_PROPERTIES_BY_SIZE[size].width}; + + color: ${({ color }) => color}; + background: ${({ backgroundColor }) => backgroundColor}; + + &:hover { + box-shadow: ${({ clickable, backgroundTransparentLight }) => + clickable ? `0 0 0 4px ${backgroundTransparentLight}` : 'none'}; + } +`; +const StyledImage = styled.img` + height: 100%; + object-fit: cover; + width: 100%; +`; export type AvatarProps = { avatarUrl?: string | null; @@ -23,29 +57,7 @@ export type AvatarProps = { onClick?: () => void; }; -const propertiesBySize = { - xl: { - fontSize: '16px', - width: '40px', - }, - lg: { - fontSize: '13px', - width: '24px', - }, - md: { - fontSize: '12px', - width: '16px', - }, - sm: { - fontSize: '10px', - width: '14px', - }, - xs: { - fontSize: '8px', - width: '12px', - }, -}; - +// TODO: Remove recoil because we don't want it into twenty-ui and find a solution for invalid avatar urls export const Avatar = ({ avatarUrl, size = 'md', @@ -56,6 +68,7 @@ export const Avatar = ({ color, backgroundColor, }: AvatarProps) => { + const { theme } = useContext(ThemeContext); const [invalidAvatarUrls, setInvalidAvatarUrls] = useRecoilState( invalidAvatarUrlsState, ); @@ -79,31 +92,20 @@ export const Avatar = ({ const showBackgroundColor = showPlaceholder; return ( -
{showPlaceholder ? ( placeholderChar ) : ( - + )} -
+ ); }; diff --git a/packages/twenty-ui/src/display/avatar/components/__stories__/AvatarGroup.stories.tsx b/packages/twenty-ui/src/display/avatar/components/__stories__/AvatarGroup.stories.tsx index 18ad3c3d4..710837644 100644 --- a/packages/twenty-ui/src/display/avatar/components/__stories__/AvatarGroup.stories.tsx +++ b/packages/twenty-ui/src/display/avatar/components/__stories__/AvatarGroup.stories.tsx @@ -1,11 +1,8 @@ import { Meta, StoryObj } from '@storybook/react'; -import { - Avatar, - AvatarProps, - AvatarSize, - AvatarType, -} from '@ui/display/avatar/components/Avatar'; +import { Avatar, AvatarProps } from '@ui/display/avatar/components/Avatar'; +import { AvatarSize } from '@ui/display/avatar/types/AvatarSize'; +import { AvatarType } from '@ui/display/avatar/types/AvatarType'; import { AVATAR_URL_MOCK, CatalogDecorator, diff --git a/packages/twenty-ui/src/display/avatar/constants/AvatarPropertiesBySize.ts b/packages/twenty-ui/src/display/avatar/constants/AvatarPropertiesBySize.ts new file mode 100644 index 000000000..e44c170cc --- /dev/null +++ b/packages/twenty-ui/src/display/avatar/constants/AvatarPropertiesBySize.ts @@ -0,0 +1,22 @@ +export const AVATAR_PROPERTIES_BY_SIZE = { + xl: { + fontSize: '16px', + width: '40px', + }, + lg: { + fontSize: '13px', + width: '24px', + }, + md: { + fontSize: '12px', + width: '16px', + }, + sm: { + fontSize: '10px', + width: '14px', + }, + xs: { + fontSize: '8px', + width: '12px', + }, +}; diff --git a/packages/twenty-ui/src/display/avatar/types/AvatarSize.ts b/packages/twenty-ui/src/display/avatar/types/AvatarSize.ts new file mode 100644 index 000000000..db1915e17 --- /dev/null +++ b/packages/twenty-ui/src/display/avatar/types/AvatarSize.ts @@ -0,0 +1 @@ +export type AvatarSize = 'xl' | 'lg' | 'md' | 'sm' | 'xs'; diff --git a/packages/twenty-ui/src/display/avatar/types/AvatarType.ts b/packages/twenty-ui/src/display/avatar/types/AvatarType.ts new file mode 100644 index 000000000..9e9b7dc95 --- /dev/null +++ b/packages/twenty-ui/src/display/avatar/types/AvatarType.ts @@ -0,0 +1 @@ +export type AvatarType = 'squared' | 'rounded'; diff --git a/packages/twenty-ui/src/display/chip/components/EntityChip.tsx b/packages/twenty-ui/src/display/chip/components/EntityChip.tsx index f17ee4108..13f95297c 100644 --- a/packages/twenty-ui/src/display/chip/components/EntityChip.tsx +++ b/packages/twenty-ui/src/display/chip/components/EntityChip.tsx @@ -3,7 +3,8 @@ import { useNavigate } from 'react-router-dom'; import { useTheme } from '@emotion/react'; import { isNonEmptyString } from '@sniptt/guards'; -import { Avatar, AvatarType } from '@ui/display/avatar/components/Avatar'; +import { Avatar } from '@ui/display/avatar/components/Avatar'; +import { AvatarType } from '@ui/display/avatar/types/AvatarType'; import { Chip, ChipVariant } from '@ui/display/chip/components/Chip'; import { IconComponent } from '@ui/display/icon/types/IconComponent'; import { Nullable } from '@ui/utilities/types/Nullable'; diff --git a/packages/twenty-ui/src/display/index.ts b/packages/twenty-ui/src/display/index.ts index d00a241a8..e0329a5bb 100644 --- a/packages/twenty-ui/src/display/index.ts +++ b/packages/twenty-ui/src/display/index.ts @@ -1,6 +1,9 @@ export * from './avatar/components/Avatar'; export * from './avatar/components/AvatarGroup'; export * from './avatar/components/states/isInvalidAvatarUrlState'; +export * from './avatar/constants/AvatarPropertiesBySize'; +export * from './avatar/types/AvatarSize'; +export * from './avatar/types/AvatarType'; export * from './checkmark/components/AnimatedCheckmark'; export * from './checkmark/components/Checkmark'; export * from './chip/components/Chip'; diff --git a/packages/twenty-ui/src/display/tooltip/OverflowingTextWithTooltip.module.css b/packages/twenty-ui/src/display/tooltip/OverflowingTextWithTooltip.module.css deleted file mode 100644 index 2df2dca40..000000000 --- a/packages/twenty-ui/src/display/tooltip/OverflowingTextWithTooltip.module.css +++ /dev/null @@ -1,20 +0,0 @@ -.main { - font-family: inherit; - font-size: inherit; - - font-weight: inherit; - max-width: 100%; - overflow: hidden; - text-decoration: inherit; - - text-overflow: ellipsis; - white-space: nowrap; -} - -.cursor { - cursor: pointer; -} - -.large { - height: calc(var(--twentycrm-spacing-multiplicator) * 4px); -} \ No newline at end of file diff --git a/packages/twenty-ui/src/theme/constants/BorderCommon.ts b/packages/twenty-ui/src/theme/constants/BorderCommon.ts index ca10ce0ba..a68f017bc 100644 --- a/packages/twenty-ui/src/theme/constants/BorderCommon.ts +++ b/packages/twenty-ui/src/theme/constants/BorderCommon.ts @@ -1,7 +1,7 @@ export const BORDER_COMMON = { radius: { xs: '2px', - sm: 'var(--twentycrm-border-radius-sm)', + sm: '4px', md: '8px', xl: '20px', pill: '999px', diff --git a/packages/twenty-ui/src/theme/constants/FontCommon.ts b/packages/twenty-ui/src/theme/constants/FontCommon.ts index 6d14f8d18..65556c018 100644 --- a/packages/twenty-ui/src/theme/constants/FontCommon.ts +++ b/packages/twenty-ui/src/theme/constants/FontCommon.ts @@ -10,7 +10,7 @@ export const FONT_COMMON = { }, weight: { regular: 400, - medium: 'var(--twentycrm-font-weight-medium)', + medium: 500, semiBold: 600, }, family: 'Inter, sans-serif', diff --git a/packages/twenty-ui/src/theme/provider/ThemeProvider.tsx b/packages/twenty-ui/src/theme/provider/ThemeProvider.tsx index 1282213f8..3b513f34e 100644 --- a/packages/twenty-ui/src/theme/provider/ThemeProvider.tsx +++ b/packages/twenty-ui/src/theme/provider/ThemeProvider.tsx @@ -1,23 +1,16 @@ -import { ReactNode, useEffect } from 'react'; +import { ReactNode } from 'react'; import { ThemeProvider as EmotionThemeProvider } from '@emotion/react'; import { ThemeContextProvider } from '@ui/theme/provider/ThemeContextProvider'; import { ThemeType } from '..'; -import './theme.css'; - type ThemeProviderProps = { theme: ThemeType; children: ReactNode; }; const ThemeProvider = ({ theme, children }: ThemeProviderProps) => { - useEffect(() => { - document.documentElement.className = - theme.name === 'dark' ? 'dark' : 'light'; - }, [theme]); - return ( {children} diff --git a/packages/twenty-ui/src/theme/provider/theme.css b/packages/twenty-ui/src/theme/provider/theme.css deleted file mode 100644 index 8ef007905..000000000 --- a/packages/twenty-ui/src/theme/provider/theme.css +++ /dev/null @@ -1,93 +0,0 @@ -/* - -!! DEPRECATED !! - -Please do not use those variables anymore. They are deprecated and will be removed soon. - -*/ - -:root { - --twentycrm-spacing-multiplicator: 4; - --twentycrm-border-radius-sm: 4px; - --twentycrm-font-weight-medium: 500; - - /* Grays */ - --twentycrm-gray-100: #000000; - --twentycrm-gray-100-4: #0000000A; - --twentycrm-gray-100-10: #00000019; - --twentycrm-gray-100-16: #00000029; - --twentycrm-gray-90: #141414; - --twentycrm-gray-85: #171717; - --twentycrm-gray-85-80: #171717CC; - --twentycrm-gray-80: #1b1b1b; - --twentycrm-gray-80-80: #1b1b1bCC; - --twentycrm-gray-75: #1d1d1d; - --twentycrm-gray-70: #222222; - --twentycrm-gray-65: #292929; - --twentycrm-gray-60: #333333; - --twentycrm-gray-55: #4c4c4c; - --twentycrm-gray-50: #666666; - --twentycrm-gray-45: #818181; - --twentycrm-gray-40: #999999; - --twentycrm-gray-35: #b3b3b3; - --twentycrm-gray-30: #cccccc; - --twentycrm-gray-25: #d6d6d6; - --twentycrm-gray-20: #ebebeb; - --twentycrm-gray-15: #f1f1f1; - --twentycrm-gray-10: #fcfcfc; - --twentycrm-gray-10-80: #fcfcfcCC; - --twentycrm-gray-0: #ffffff; - --twentycrm-gray-0-6: #ffffff0f; - --twentycrm-gray-0-10: #ffffff19; - --twentycrm-gray-0-14: #ffffff23; - - /* Blues */ - --twentycrm-blue-accent-90: #141a25; - --twentycrm-blue-accent-10: #f5f9fd; -} - -:root.dark { - /* Accent color */ - --twentycrm-accent-quaternary: var(--twentycrm-blue-accent-90); - - /* Font color */ - --twentycrm-font-color-secondary: var(--twentycrm-gray-35); - --twentycrm-font-color-primary: var(--twentycrm-gray-20); - --twentycrm-font-color-light: var(--twentycrm-gray-50); - --twentycrm-font-color-extra-light: var(--twentycrm-gray-55); - - /* Background color */ - --twentycrm-background-primary: var(--twentycrm-gray-85); - - /* Background transparent color */ - --twentycrm-background-transparent-secondary: var(--twentycrm-gray-80-80); - --twentycrm-background-transparent-light: var(--twentycrm-gray-0-6); - --twentycrm-background-transparent-medium: var(--twentycrm-gray-0-10); - --twentycrm-background-transparent-strong: var(--twentycrm-gray-0-14); - - /* Border color */ - --twentycrm-border-color-medium: var(--twentycrm-gray-65); -} - -:root.light { - /* Accent color */ - --twentycrm-accent-quaternary: var(--twentycrm-blue-accent-10); - - /* Colors */ - --twentycrm-font-color-primary: var(--twentycrm-gray-60); - --twentycrm-font-color-secondary: var(--twentycrm-gray-50); - --twentycrm-font-color-light: var(--twentycrm-gray-35); - --twentycrm-font-color-extra-light: var(--twentycrm-gray-30); - - /* Background color */ - --twentycrm-background-primary: var(--twentycrm-gray-0); - - /* Background transparent color */ - --twentycrm-background-transparent-secondary: var(--twentycrm-gray-10-80); - --twentycrm-background-transparent-light: var(--twentycrm-gray-100-4); - --twentycrm-background-transparent-medium: var(--twentycrm-gray-100-10); - --twentycrm-background-transparent-strong: var(--twentycrm-gray-100-16); - - /* Border color */ - --twentycrm-border-color-medium: var(--twentycrm-gray-20); -} diff --git a/packages/twenty-ui/vite.config.ts b/packages/twenty-ui/vite.config.ts index bac435e19..46804e3be 100644 --- a/packages/twenty-ui/vite.config.ts +++ b/packages/twenty-ui/vite.config.ts @@ -33,6 +33,7 @@ export default defineConfig({ '**/OverflowingTextWithTooltip.tsx', '**/Chip.tsx', '**/Tag.tsx', + '**/Avatar.tsx', ], babelOptions: { presets: ['@babel/preset-typescript', '@babel/preset-react'],