houseassassin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
## Summary

- **Eliminate `ICON_SIZES` / `ICON_STROKES` constants**: all icon
dimensions are now resolved at runtime via
`resolveThemeVariableAsNumber(themeCssVariables.icon.size.X)`, ensuring
values always come from computed CSS variables
- **No more consumer imports from `twenty-ui/theme`**: moved
`ColorSchemeContext`, `ColorSchemeProvider`, `ThemeColor`,
`MAIN_COLOR_NAMES`, `getNextThemeColor`, `AnimationDuration` to
`twenty-ui/theme-constants`
- **Remove `ThemeContext` / `ThemeContextProvider` / `ThemeProvider` /
`ThemeType`**: replaced across ~300 files with `themeCssVariables` (for
CSS contexts) or `resolveThemeVariable` / `resolveThemeVariableAsNumber`
(for JS runtime values)
- **Simplify provider chain**: only `ColorSchemeProvider` remains — it
toggles `light`/`dark` class on `document.documentElement` and provides
`colorScheme` via React context
- **Fix pre-existing test failures**: `useIcons.test.ts`
(non-configurable ES module spy) and
`turnRecordFilterGroupIntoGqlOperationFilter.test.ts`
(`Omit<RecordFilter, 'id'>` type mismatch)

### Theme access pattern (before → after)

| Context | Before | After |
|---------|--------|-------|
| CSS (Linaria) | `${({ theme }) => theme.font.color.primary}` |
`${themeCssVariables.font.color.primary}` |
| JS runtime (icon size, animation) | `theme.icon.size.md` /
`ICON_SIZES.md` |
`resolveThemeVariableAsNumber(themeCssVariables.icon.size.md)` |
| Color scheme check | `theme.name === 'dark'` |
`useContext(ColorSchemeContext).colorScheme === 'dark'` |
This commit is contained in:
Charles Bochet
2026-03-05 14:39:01 +01:00
committed by GitHub
parent 7293d4c1f8
commit 647c32ff3e
432 changed files with 1243 additions and 1433 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/twenty-front/src/modules/settings/data-model/components/SettingsDataModelNewFieldBreadcrumbDropDown.tsx
+3 -4
View File
@@ -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');
packages/twenty-front/src/modules/settings/data-model/fields/forms/components/SettingsDataModelFieldIconLabelForm.tsx
+2 -4
View File
@@ -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<SettingsDataModelFieldIconLabelFormValues>();
const { theme } = useContext(ThemeContext);
const label = watch('label');
const { t } = useLingui();
packages/twenty-front/src/modules/settings/data-model/fields/forms/components/SettingsObjectNewFieldSelector.tsx
+1 -2
View File
@@ -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';
packages/twenty-front/src/modules/settings/data-model/fields/forms/select/components/SettingsDataModelFieldSelectForm.tsx
+2 -4
View File
@@ -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 (
<>
<Controller
packages/twenty-front/src/modules/settings/data-model/fields/forms/select/components/SettingsDataModelFieldSelectFormOptionRow.tsx
+6 -4
View File
@@ -6,8 +6,8 @@ import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
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 { useContext } from 'react';
import { styled } from '@linaria/react';
import { useContext } from 'react';
import { t } from '@lingui/core/macro';
import {
ColorSample,
@@ -23,9 +23,9 @@ import {
MenuItem,
MenuItemSelectColor,
} from 'twenty-ui/navigation';
import { MAIN_COLOR_NAMES, ThemeContext } from 'twenty-ui/theme';
import { themeCssVariables } from 'twenty-ui/theme-constants';
import { computeOptionValueFromLabel } from '~/pages/settings/data-model/utils/computeOptionValueFromLabel';
import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants';
import { MAIN_COLOR_NAMES } from 'twenty-ui/theme';
const useColorLabels = (): ColorLabels => ({
gray: t`Gray`,
@@ -130,7 +130,9 @@ export const SettingsDataModelFieldSelectFormOptionRow = ({
return (
<StyledRow className={className}>
<StyledIconGripVertical
style={{ minWidth: theme.icon.size.md }}
style={{
minWidth: theme.icon.size.md,
}}
size={theme.icon.size.md}
stroke={theme.icon.stroke.sm}
color={theme.font.color.extraLight}
packages/twenty-front/src/modules/settings/data-model/fields/forms/select/utils/generateNewSelectOption.ts
+6 -2
View File
@@ -2,7 +2,8 @@ import { v4 } from 'uuid';
import { type FieldMetadataItemOption } from '@/object-metadata/types/FieldMetadataItem';
import { generateNewSelectOptionLabel } from '@/settings/data-model/fields/forms/select/utils/generateNewSelectOptionLabel';
import { getNextThemeColor } from 'twenty-ui/theme';
import { MAIN_COLOR_NAMES } from 'twenty-ui/theme';
import { getNextThemeColor } from 'twenty-ui/theme-constants';
import { computeOptionValueFromLabel } from '~/pages/settings/data-model/utils/computeOptionValueFromLabel';
export const generateNewSelectOption = (
@@ -11,7 +12,10 @@ export const generateNewSelectOption = (
): FieldMetadataItemOption => {
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,
packages/twenty-front/src/modules/settings/data-model/fields/preview/components/SettingsDataModelFieldPreview.tsx
+7 -6
View File
@@ -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 = ({
<StyledFieldPreview shrink={shrink}>
{!!withFieldLabel && (
<StyledFieldLabel>
<FieldIcon size={ICON_SIZES.md} stroke={ICON_STROKES.sm} />
<FieldIcon
size={theme.icon.size.md}
stroke={theme.icon.stroke.sm}
/>
{fieldMetadataItem.label}:
</StyledFieldLabel>
)}
packages/twenty-front/src/modules/settings/data-model/fields/preview/components/SettingsDataModelRelationFieldPreview.tsx
+2 -5
View File
@@ -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);
packages/twenty-front/src/modules/settings/data-model/graph-overview/components/SettingsDataModelOverviewEffect.tsx
+4 -5
View File
@@ -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 <></>;
};
packages/twenty-front/src/modules/settings/data-model/graph-overview/components/SettingsDataModelOverviewField.tsx
+3 -4
View File
@@ -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;
packages/twenty-front/src/modules/settings/data-model/graph-overview/components/SettingsDataModelOverviewFieldWithoutRelation.tsx
+3 -4
View File
@@ -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);
packages/twenty-front/src/modules/settings/data-model/graph-overview/components/SettingsDataModelOverviewObject.tsx
+1 -2
View File
@@ -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<ObjectMetadataItem, 'object'>;
type SettingsDataModelOverviewObjectProps =
packages/twenty-front/src/modules/settings/data-model/graph-overview/components/SettingsDataModelOverviewRelationMarkers.tsx
+2 -2
View File
@@ -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 (
<svg style={{ position: 'absolute', top: 0, left: 0 }}>
<defs>
packages/twenty-front/src/modules/settings/data-model/new-object/components/SettingsAvailableStandardObjectItemTableRow.tsx
+2 -4
View File
@@ -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);
packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectFieldDataType.tsx
+2 -4
View File
@@ -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;
packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectFieldItemTableRow.tsx
+5 -4
View File
@@ -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 = ({
<StyledNameTableCell>
{!!Icon && (
<Icon
style={{ minWidth: theme.icon.size.md }}
style={{
minWidth: theme.icon.size.md,
}}
size={theme.icon.size.md}
stroke={theme.icon.stroke.sm}
/>
packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectItemTableRow.tsx
+6 -5
View File
@@ -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 = ({
<StyledNameTableCell>
{!!Icon && (
<Icon
style={{ minWidth: theme.icon.size.md }}
style={{
minWidth: theme.icon.size.md,
}}
size={theme.icon.size.md}
stroke={theme.icon.stroke.sm}
/>
packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectRelationItemTableRow.tsx
+5 -4
View File
@@ -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 = ({
<StyledNameTableCell>
{!!Icon && (
<Icon
style={{ minWidth: theme.icon.size.md }}
style={{
minWidth: theme.icon.size.md,
}}
size={theme.icon.size.md}
stroke={theme.icon.stroke.sm}
/>
packages/twenty-front/src/modules/settings/data-model/objects/components/SettingsDataModelObjectSummary.tsx
+3 -3
View File
@@ -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 (
<>
<StyledSeparator />
packages/twenty-front/src/modules/settings/data-model/objects/components/SettingsObjectCoverImage.tsx
+4 -5
View File
@@ -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 (
<StyledCoverImageContainer
style={{
backgroundImage:
theme.name === 'light'
colorScheme === 'light'
? `url('${LightCoverImage.toString()}')`
: `url('${DarkCoverImage.toString()}')`,
}}
packages/twenty-front/src/modules/settings/data-model/objects/forms/components/SettingsDataModelObjectAboutForm.tsx
+3 -4
View File
@@ -6,8 +6,8 @@ import { type SettingsDataModelObjectAboutFormValues } from '@/settings/data-mod
import { IconPicker } from '@/ui/input/components/IconPicker';
import { SettingsTextInput } from '@/ui/input/components/SettingsTextInput';
import { TextArea } from '@/ui/input/components/TextArea';
import { useContext } from 'react';
import { styled } from '@linaria/react';
import { useContext } from 'react';
import { useLingui } from '@lingui/react/macro';
import { plural } from 'pluralize';
import { Controller, useFormContext } from 'react-hook-form';
@@ -22,8 +22,7 @@ import {
} from 'twenty-ui/display';
import { Button } from 'twenty-ui/input';
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 { type StringKeyOf } from 'type-fest';
import { useNavigateSettings } from '~/hooks/useNavigateSettings';
import { computeMetadataNameFromLabel } from '~/pages/settings/data-model/utils/computeMetadataNameFromLabel';
@@ -115,10 +114,10 @@ export const SettingsDataModelObjectAboutForm = ({
objectMetadataItem,
conflictingObjectMetadataItem,
}: SettingsDataModelObjectAboutFormProps) => {
const { theme } = useContext(ThemeContext);
const { control, watch, setValue } =
useFormContext<SettingsDataModelObjectAboutFormValues>();
const { t } = useLingui();
const { theme } = useContext(ThemeContext);
const navigateSettings = useNavigateSettings();
const isLabelSyncedWithName = watch('isLabelSyncedWithName');