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

## 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'` |
2026-03-05 14:39:01 +01:00
parent 7293d4c1f8
commit 647c32ff3e
432 changed files with 1243 additions and 1433 deletions
@@ -8,10 +8,8 @@ import {
 } from 'twenty-ui/display';
 import { CodeEditor, CoreEditorHeader } from 'twenty-ui/input';
 import { AnimatedCircleLoading } from 'twenty-ui/utilities';
-import { themeCssVariables } from 'twenty-ui/theme-constants';
+import { themeCssVariables, ThemeContext } from 'twenty-ui/theme-constants';
 import { useContext } from 'react';
-import { ThemeContext } from 'twenty-ui/theme';
-
 const StyledContainer = styled.div`
  display: flex;
  flex-direction: column;
@@ -63,9 +63,7 @@ import { useAtomStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomState
 import { isDefined } from 'twenty-shared/utils';
 import { Tag, type TagColor } from 'twenty-ui/components';
 import { useStore } from 'jotai';
-import { themeCssVariables } from 'twenty-ui/theme-constants';
-import { ThemeContext } from 'twenty-ui/theme';
-
+import { themeCssVariables, ThemeContext } from 'twenty-ui/theme-constants';
 const StyledResetReactflowStyles = styled.div`
  height: 100%;
  width: 100%;
@@ -166,9 +164,8 @@ export const WorkflowDiagramCanvasBase = ({
    event: MouseEvent | React.MouseEvent<Element, MouseEvent>;
  }) => void;
 }) => {
-  const store = useStore();
  const { theme } = useContext(ThemeContext);
-
+  const store = useStore();
  const reactflow = useReactFlow();

  const workflowDiagram = useAtomComponentStateValue(
@@ -1,9 +1,7 @@
+import { ThemeContext } from 'twenty-ui/theme-constants';
 import { useContext } from 'react';
-import { ThemeContext } from 'twenty-ui/theme';
-
 export const WorkflowDiagramConnector = () => {
  const { theme } = useContext(ThemeContext);
-
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
@@ -9,9 +9,7 @@ import { WorkflowVisualizerComponentInstanceContext } from '@/workflow/workflow-
 import { styled } from '@linaria/react';
 import { Suspense, useContext, useId } from 'react';
 import Skeleton, { SkeletonTheme } from 'react-loading-skeleton';
-import { themeCssVariables } from 'twenty-ui/theme-constants';
-import { ThemeContext } from 'twenty-ui/theme';
-
+import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants';
 const StyledLoadingSkeletonContainer = styled.div`
  display: flex;
  flex-direction: column;
@@ -23,7 +21,6 @@ const StyledLoadingSkeletonContainer = styled.div`

 const LoadingSkeleton = () => {
  const { theme } = useContext(ThemeContext);
-
  return (
    <StyledLoadingSkeletonContainer>
      <SkeletonTheme
@@ -7,9 +7,7 @@ import { WorkflowVisualizerComponentInstanceContext } from '@/workflow/workflow-
 import { styled } from '@linaria/react';
 import { Suspense, useContext } from 'react';
 import Skeleton, { SkeletonTheme } from 'react-loading-skeleton';
-import { themeCssVariables } from 'twenty-ui/theme-constants';
-import { ThemeContext } from 'twenty-ui/theme';
-
+import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants';
 const StyledLoadingSkeletonContainer = styled.div`
  display: flex;
  flex-direction: column;
@@ -21,7 +19,6 @@ const StyledLoadingSkeletonContainer = styled.div`

 const LoadingSkeleton = () => {
  const { theme } = useContext(ThemeContext);
-
  return (
    <StyledLoadingSkeletonContainer>
      <SkeletonTheme
@@ -1,8 +1,9 @@
 import { useReactFlow } from '@xyflow/react';
+import { useContext } from 'react';
 import { isDefined } from 'twenty-shared/utils';
-import { THEME_COMMON } from 'twenty-ui/theme';
-
+import { ThemeContext } from 'twenty-ui/theme-constants';
 export const useWorkflowDiagramScreenToFlowPosition = () => {
+  const { theme } = useContext(ThemeContext);
  const { screenToFlowPosition } = useReactFlow();

  const workflowDiagramScreenToFlowPosition = (position?: {
@@ -14,7 +15,7 @@ export const useWorkflowDiagramScreenToFlowPosition = () => {
    }

    const visibleRightDrawerWidth = Number(
-      THEME_COMMON.rightDrawerWidth.replace('px', ''),
+      theme.rightDrawerWidth.replace('px', ''),
    );

    const flowPosition = screenToFlowPosition(position);
@@ -1,8 +1,8 @@
 import { useEdgeState } from '@/workflow/workflow-diagram/workflow-edges/hooks/useEdgeState';
 import { type WorkflowDiagramEdgeComponentProps } from '@/workflow/workflow-diagram/workflow-edges/types/WorkflowDiagramEdgeComponentProps';
 import { BaseEdge } from '@xyflow/react';
+import { ThemeContext } from 'twenty-ui/theme-constants';
 import { useContext } from 'react';
-import { ThemeContext } from 'twenty-ui/theme';

 type WorkflowDiagramBaseEdgeProps = Pick<
  WorkflowDiagramEdgeComponentProps,
@@ -26,7 +26,6 @@ export const WorkflowDiagramBaseEdge = ({
  path,
 }: WorkflowDiagramBaseEdgeProps) => {
  const { theme } = useContext(ThemeContext);
-
  const { isEdgeSelected, isEdgeHovered } = useEdgeState();

  const selected = isEdgeSelected({
@@ -1,8 +1,8 @@
 import { type WorkflowDiagramEdge } from '@/workflow/workflow-diagram/types/WorkflowDiagram';
 import { getEdgePath } from '@/workflow/workflow-diagram/workflow-edges/utils/getEdgePath';
 import { BaseEdge, type EdgeProps } from '@xyflow/react';
+import { ThemeContext } from 'twenty-ui/theme-constants';
 import { useContext } from 'react';
-import { ThemeContext } from 'twenty-ui/theme';

 type WorkflowDiagramBlankEdgeProps = EdgeProps<WorkflowDiagramEdge>;

@@ -17,7 +17,6 @@ export const WorkflowDiagramBlankEdge = ({
  targetPosition,
 }: WorkflowDiagramBlankEdgeProps) => {
  const { theme } = useContext(ThemeContext);
-
  const { segments } = getEdgePath({
    sourceX,
    sourceY,
@@ -37,7 +36,9 @@ export const WorkflowDiagramBlankEdge = ({
          markerStart={segment.markerStart}
          markerEnd={segment.markerEnd}
          path={segment.path}
-          style={{ stroke: theme.border.color.strong }}
+          style={{
+            stroke: theme.border.color.strong,
+          }}
        />
      ))}
    </>
@@ -3,8 +3,8 @@ import {
  getBezierPath,
 } from '@xyflow/react';
 import { EDGE_BRANCH_ARROW_MARKER } from '@/workflow/workflow-diagram/workflow-edges/constants/EdgeBranchArrowMarker';
+import { ThemeContext } from 'twenty-ui/theme-constants';
 import { useContext } from 'react';
-import { ThemeContext } from 'twenty-ui/theme';

 type WorkflowDiagramConnectionProps = ConnectionLineComponentProps;

@@ -15,7 +15,6 @@ export const WorkflowDiagramConnection = ({
  toY,
 }: WorkflowDiagramConnectionProps) => {
  const { theme } = useContext(ThemeContext);
-
  const [path] = getBezierPath({
    sourceX: fromX,
    sourceY: fromY + 4,
@@ -1,10 +1,9 @@
-import { useContext } from 'react';
 import { EDGE_BRANCH_ARROW_MARKER } from '@/workflow/workflow-diagram/workflow-edges/constants/EdgeBranchArrowMarker';
-import { ThemeContext } from 'twenty-ui/theme';
+import { ThemeContext } from 'twenty-ui/theme-constants';
+import { useContext } from 'react';

 export const WorkflowDiagramCustomMarkers = () => {
  const { theme } = useContext(ThemeContext);
-
  return (
    <svg style={{ position: 'absolute', top: 0, left: 0 }}>
      <defs>
@@ -5,8 +5,8 @@ import { getEdgePath } from '@/workflow/workflow-diagram/workflow-edges/utils/ge
 import { i18n } from '@lingui/core';
 import { BaseEdge, EdgeLabelRenderer } from '@xyflow/react';
 import { isDefined } from 'twenty-shared/utils';
+import { ThemeContext } from 'twenty-ui/theme-constants';
 import { useContext } from 'react';
-import { ThemeContext } from 'twenty-ui/theme';

 type WorkflowDiagramDefaultEdgeReadonlyProps =
  WorkflowDiagramEdgeComponentProps;
@@ -23,7 +23,6 @@ export const WorkflowDiagramDefaultEdgeReadonly = ({
  data,
 }: WorkflowDiagramDefaultEdgeReadonlyProps) => {
  const { theme } = useContext(ThemeContext);
-
  const {
    segments,
    overlayPosition: [labelX, labelY],
@@ -47,7 +46,9 @@ export const WorkflowDiagramDefaultEdgeReadonly = ({
          markerStart={segment.markerStart}
          markerEnd={segment.markerEnd}
          path={segment.path}
-          style={{ stroke: theme.border.color.strong }}
+          style={{
+            stroke: theme.border.color.strong,
+          }}
        />
      ))}

@@ -2,8 +2,8 @@ import { type WorkflowDiagramStepNodeData } from '@/workflow/workflow-diagram/ty
 import { getWorkflowNodeIconKey } from '@/workflow/workflow-diagram/utils/getWorkflowNodeIconKey';
 import { assertUnreachable } from 'twenty-shared/utils';
 import { useIcons } from 'twenty-ui/display';
+import { ThemeContext } from 'twenty-ui/theme-constants';
 import { useContext } from 'react';
-import { ThemeContext } from 'twenty-ui/theme';

 export const WorkflowDiagramStepNodeIcon = ({
  data,
@@ -8,9 +8,8 @@ import {
  StyledRowLeftContent,
  StyledText,
 } from './WorkflowAiAgentPermissionsStyles';
+import { ThemeContext } from 'twenty-ui/theme-constants';
 import { useContext } from 'react';
-import { ThemeContext } from 'twenty-ui/theme';
-
 type WorkflowAiAgentPermissionsFlagRowProps = {
  permission: SettingsRolePermissionsSettingPermission;
  isEnabled: boolean;
@@ -6,9 +6,8 @@ import {
  StyledRowLeftContent,
  StyledText,
 } from './WorkflowAiAgentPermissionsStyles';
+import { ThemeContext } from 'twenty-ui/theme-constants';
 import { useContext } from 'react';
-import { ThemeContext } from 'twenty-ui/theme';
-
 type WorkflowAiAgentPermissionsObjectRowProps = {
  objectMetadata: {
    id: string;
@@ -9,10 +9,8 @@ import { IconPlus, IconTrash } from 'twenty-ui/display';
 import { LightIconButton } from 'twenty-ui/input';
 import { v4 } from 'uuid';
 import { WorkflowOutputFieldTypeSelector } from './WorkflowOutputFieldTypeSelector';
-import { themeCssVariables } from 'twenty-ui/theme-constants';
+import { themeCssVariables, ThemeContext } from 'twenty-ui/theme-constants';
 import { useContext } from 'react';
-import { ThemeContext } from 'twenty-ui/theme';
-
 type WorkflowOutputSchemaBuilderProps = {
  fields: OutputSchemaField[];
  onChange: (fields: OutputSchemaField[]) => void;
@@ -18,7 +18,7 @@ import { styled } from '@linaria/react';
 import { type OnDragEndResponder } from '@hello-pangea/dnd';
 import { useLingui } from '@lingui/react/macro';
 import { isNonEmptyString } from '@sniptt/guards';
-import { useEffect, useState } from 'react';
+import { useContext, useEffect, useState } from 'react';
 import { FieldMetadataType } from 'twenty-shared/types';
 import { isDefined } from 'twenty-shared/utils';
 import {
@@ -32,7 +32,7 @@ import {
 import { LightIconButton } from 'twenty-ui/input';
 import { useDebouncedCallback } from 'use-debounce';
 import { v4 } from 'uuid';
-import { ICON_SIZES, themeCssVariables } from 'twenty-ui/theme-constants';
+import { themeCssVariables, ThemeContext } from 'twenty-ui/theme-constants';

 export type WorkflowEditActionFormBuilderProps = {
  triggerType: WorkflowTriggerType | undefined;
@@ -149,6 +149,7 @@ export const WorkflowEditActionFormBuilder = ({
  actionOptions,
 }: WorkflowEditActionFormBuilderProps) => {
  const { t } = useLingui();
+  const { theme } = useContext(ThemeContext);

  const [formData, setFormData] = useState<FormData>(action.settings.input);

@@ -328,7 +329,7 @@ export const WorkflowEditActionFormBuilder = ({
                                </StyledPlaceholderContainer>
                                {field.type === 'RECORD' && (
                                  <IconChevronDown
-                                    size={ICON_SIZES.md}
+                                    size={theme.icon.size.md}
                                    color={
                                      themeCssVariables.font.color.tertiary
                                    }
@@ -418,7 +419,7 @@ export const WorkflowEditActionFormBuilder = ({
                >
                  <StyledFieldContainer>
                    <StyledAddFieldButtonContentContainer>
-                      <IconPlus size={ICON_SIZES.sm} />
+                      <IconPlus size={theme.icon.size.sm} />
                      {t`Add Field`}
                    </StyledAddFieldButtonContentContainer>
                  </StyledFieldContainer>
@@ -10,10 +10,8 @@ import { styled } from '@linaria/react';
 import { t } from '@lingui/core/macro';
 import { IconSettingsAutomation, IconX } from 'twenty-ui/display';
 import { LightIconButton } from 'twenty-ui/input';
-import { themeCssVariables } from 'twenty-ui/theme-constants';
+import { themeCssVariables, ThemeContext } from 'twenty-ui/theme-constants';
 import { useContext } from 'react';
-import { ThemeContext } from 'twenty-ui/theme';
-
 type WorkflowEditActionFormFieldSettingsProps = {
  field: WorkflowFormActionField;
  onChange: (field: WorkflowFormActionField) => void;
@@ -30,9 +30,7 @@ import { BodyInput } from './BodyInput';
 import { HttpRequestExecutionResult } from './HttpRequestExecutionResult';
 import { HttpRequestTestVariableInput } from './HttpRequestTestVariableInput';
 import { KeyValuePairInput } from './KeyValuePairInput';
-import { themeCssVariables } from 'twenty-ui/theme-constants';
-import { ThemeContext } from 'twenty-ui/theme';
-
+import { themeCssVariables, ThemeContext } from 'twenty-ui/theme-constants';
 type WorkflowEditActionHttpRequestProps = {
  action: WorkflowHttpRequestAction;
  actionOptions: {
@@ -153,7 +151,9 @@ export const WorkflowEditActionHttpRequest = ({
              value={formData.method}
              onChange={(value) => handleFieldChange('method', value)}
              disabled={actionOptions.readonly}
-              dropdownOffset={{ y: parseInt(theme.spacing(1), 10) }}
+              dropdownOffset={{
+                y: parseInt(theme.spacing[1], 10),
+              }}
              dropdownWidth={GenericDropdownContentWidth.ExtraLarge}
            />

@@ -24,7 +24,7 @@ import { IconCopy } from 'twenty-ui/display';
 import { useDebouncedCallback } from 'use-debounce';
 import { REACT_APP_SERVER_BASE_URL } from '~/config';
 import { useCopyToClipboard } from '~/hooks/useCopyToClipboard';
-import { ThemeContext } from 'twenty-ui/theme';
+import { ThemeContext } from 'twenty-ui/theme-constants';

 type WorkflowEditTriggerWebhookFormProps = {
  trigger: WorkflowWebhookTrigger;
@@ -14,9 +14,7 @@ import { styled } from '@linaria/react';
 import { useContext, useState } from 'react';
 import { isDefined } from 'twenty-shared/utils';
 import { IconVariablePlus } from 'twenty-ui/display';
-import { themeCssVariables } from 'twenty-ui/theme-constants';
-import { ThemeContext } from 'twenty-ui/theme';
-
+import { themeCssVariables, ThemeContext } from 'twenty-ui/theme-constants';
 const StyledDropdownVariableButtonContainer = styled(
  StyledDropdownButtonContainer,
 )<{ transparentBackground?: boolean; disabled?: boolean }>`
@@ -52,7 +50,6 @@ export const WorkflowVariablesDropdown = ({
  clickableComponent?: React.ReactNode;
 }) => {
  const { theme } = useContext(ThemeContext);
-
  const dropdownId = `${SEARCH_VARIABLES_DROPDOWN_ID}-${instanceId}`;
  const isDropdownOpen = useAtomComponentStateValue(
    isDropdownOpenComponentState,
@@ -140,7 +137,7 @@ export const WorkflowVariablesDropdown = ({
      dropdownPlacement="bottom-end"
      dropdownOffset={{
        x: 2,
-        y: parseInt(theme.spacing(multiline ? 11 : 1), 10),
+        y: parseInt(theme.spacing[multiline ? 11 : 1], 10),
      }}
    />
  );