Workflow dark mode improvements (#9412)

## Dark mode Old vs New ![CleanShot 2025-01-06 at 17 49 19@2x](https://github.com/user-attachments/assets/4fda3da0-3a84-43b5-a60b-ee2f3356e540) ![CleanShot 2025-01-06 at 17 49 32@2x](https://github.com/user-attachments/assets/e2aa498a-fa4d-41d3-af20-fa3ab605bbab) ## Light mode Old vs New ![CleanShot 2025-01-06 at 17 49 11@2x](https://github.com/user-attachments/assets/0587d18f-4f1d-42bd-94a5-9e06be685bb3) ![CleanShot 2025-01-06 at 17 49 01@2x](https://github.com/user-attachments/assets/aacbc40c-c477-4ece-bed2-12cdf18ab705)
twentyhq · Jan 6, 2025 · c61831c · c61831c
1 parent a9b95bc
commit c61831c
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 4 deletions.
diff --git a/...ty-front/src/modules/workflow/workflow-diagram/components/WorkflowDiagramBaseStepNode.tsx b/...ty-front/src/modules/workflow/workflow-diagram/components/WorkflowDiagramBaseStepNode.tsx
@@ -20,7 +20,7 @@ const StyledStepNodeType = styled.div`
   border-radius: ${({ theme }) => theme.border.radius.sm}
     ${({ theme }) => theme.border.radius.sm} 0 0;
 
-  color: ${({ theme }) => theme.color.gray50};
+  color: ${({ theme }) => theme.font.color.light};
   font-size: ${({ theme }) => theme.font.size.md};
   font-weight: ${({ theme }) => theme.font.weight.semiBold};
 
@@ -53,7 +53,7 @@ const StyledStepNodeInnerContainer = styled.div<{ variant?: Variant }>`
   .selectable.selected &,
   .selectable:focus &,
   .selectable:focus-visible & {
-    background-color: ${({ theme }) => theme.color.blue10};
+    background-color: ${({ theme }) => theme.accent.quaternary};
     border-color: ${({ theme }) => theme.color.blue};
   }
 `;

diff --git a/...enty-front/src/modules/workflow/workflow-diagram/components/WorkflowDiagramCanvasBase.tsx b/...enty-front/src/modules/workflow/workflow-diagram/components/WorkflowDiagramCanvasBase.tsx
@@ -13,6 +13,7 @@ import {
   WorkflowDiagramNodeType,
 } from '@/workflow/workflow-diagram/types/WorkflowDiagram';
 import { getOrganizedDiagram } from '@/workflow/workflow-diagram/utils/getOrganizedDiagram';
+import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 import {
   applyEdgeChanges,
@@ -29,7 +30,7 @@ import {
 import '@xyflow/react/dist/style.css';
 import React, { useEffect, useMemo, useRef } from 'react';
 import { useRecoilValue, useSetRecoilState } from 'recoil';
-import { GRAY_SCALE, isDefined, THEME_COMMON } from 'twenty-ui';
+import { isDefined, THEME_COMMON } from 'twenty-ui';
 
 const StyledResetReactflowStyles = styled.div`
   height: 100%;
@@ -87,6 +88,8 @@ export const WorkflowDiagramCanvasBase = ({
   >;
   children?: React.ReactNode;
 }) => {
+  const theme = useTheme();
+
   const reactflow = useReactFlow();
   const setWorkflowReactFlowRefState = useSetRecoilState(
     workflowReactFlowRefState,
@@ -219,7 +222,7 @@ export const WorkflowDiagramCanvasBase = ({
         nodesDraggable={false}
         paneClickDistance={10} // Fix small unwanted user dragging does not select node
       >
-        <Background color={GRAY_SCALE.gray25} size={2} />
+        <Background color={theme.border.color.medium} size={2} />
 
         {children}
       </ReactFlow>