Create a running variant for workflow diagram nodes (#10857)

- Add all the missing adaptive colors
- Create a running variant for the workflow diagram nodes
- Make the `<Loader />` be precisely `24px` large

## Demo



https://github.com/user-attachments/assets/cc9ef259-30dd-445d-b167-af35b4f9c4cc



Closes https://github.com/twentyhq/core-team-issues/issues/430

packages/twenty-front/src/modules/workflow/workflow-diagram/components/WorkflowDiagramStepNodeBase.tsx

@@ -10,7 +10,7 @@ import styled from '@emotion/styled';
 import { Handle, Position } from '@xyflow/react';
 import React from 'react';
 import { capitalize, isDefined } from 'twenty-shared';
-import { Label, OverflowingTextWithTooltip } from 'twenty-ui';
+import { Label, Loader, OverflowingTextWithTooltip } from 'twenty-ui';
 
 const StyledStepNodeContainer = styled.div`
   display: flex;
@@ -24,6 +24,12 @@ const StyledStepNodeType = styled.div<{
 }>`
   ${({ nodeVariant, theme }) => {
     switch (nodeVariant) {
+      case 'running': {
+        return css`
+          background-color: ${theme.tag.background.yellow};
+          color: ${theme.tag.text.yellow};
+        `;
+      }
       case 'success': {
         return css`
           background-color: ${theme.tag.background.turquoise};
@@ -102,6 +108,12 @@ const StyledStepNodeInnerContainer = styled.div<{
     & {
     ${({ theme, variant }) => {
       switch (variant) {
+        case 'running': {
+          return css`
+            background: ${theme.adaptiveColors.yellow1};
+            border-color: ${theme.adaptiveColors.yellow4};
+          `;
+        }
         case 'success': {
           return css`
             background: ${theme.adaptiveColors.turquoise1};
@@ -128,6 +140,7 @@ const StyledStepNodeInnerContainer = styled.div<{
 const StyledStepNodeLabel = styled.div<{
   variant: WorkflowDiagramNodeVariant;
 }>`
+  box-sizing: border-box;
   align-items: center;
   display: flex;
   font-size: 13px;
@@ -143,6 +156,7 @@ const StyledStepNodeLabel = styled.div<{
     }
   }};
   max-width: 200px;
+  height: 24px;
 
   .selectable:is(.selected, :focus, :focus-visible) & {
     color: ${({ theme }) => theme.font.color.primary};
@@ -201,7 +215,7 @@ export const WorkflowDiagramStepNodeBase = ({
 
       <StyledStepNodeInnerContainer variant={variant}>
         <StyledStepNodeLabel variant={variant}>
-          {Icon}
+          {variant === 'running' ? <Loader /> : Icon}
 
           <OverflowingTextWithTooltip text={name} />
         </StyledStepNodeLabel>

packages/twenty-front/src/modules/workflow/workflow-diagram/components/WorkflowDiagramStepNodeReadonly.tsx

@@ -4,17 +4,18 @@ import {
   WorkflowDiagramRunStatus,
   WorkflowDiagramStepNodeData,
 } from '@/workflow/workflow-diagram/types/WorkflowDiagram';
+import { WorkflowDiagramNodeVariant } from '@/workflow/workflow-diagram/types/WorkflowDiagramNodeVariant';
 
 const getNodeVariantFromRunStatus = (
   runStatus: WorkflowDiagramRunStatus | undefined,
-) => {
+): WorkflowDiagramNodeVariant => {
   switch (runStatus) {
     case 'success':
       return 'success';
     case 'failure':
       return 'failure';
     case 'running':
-      return 'default';
+      return 'running';
     case 'not-executed':
       return 'not-executed';
     default:

packages/twenty-front/src/modules/workflow/workflow-diagram/components/__stories__/WorkflowDiagramStepNodeEditableContent.stories.tsx

@@ -101,6 +101,7 @@ export const Catalog: CatalogStory<Story, typeof Wrapper> = {
           values: [
             'empty',
             'default',
+            'running',
             'success',
             'failure',
             'not-executed',

packages/twenty-front/src/modules/workflow/workflow-diagram/types/WorkflowDiagramNodeVariant.ts

@@ -2,5 +2,6 @@ export type WorkflowDiagramNodeVariant =
   | 'default'
   | 'success'
   | 'failure'
+  | 'running'
   | 'empty'
   | 'not-executed';

packages/twenty-ui/src/feedback/loader/components/Loader.tsx

@@ -5,6 +5,7 @@ import { motion } from 'framer-motion';
 const StyledLoaderContainer = styled.div<{
   color?: ThemeColor;
 }>`
+  box-sizing: border-box;
   justify-content: center;
   align-items: center;
   display: flex;

packages/twenty-ui/src/theme/constants/AdaptiveColorsDark.ts

@@ -1,12 +1,44 @@
 import { THEME_COMMON } from '@ui/theme/constants/ThemeCommon';
 
 export const ADAPTIVE_COLORS_DARK = {
+  green1: THEME_COMMON.color.green80,
+  green2: THEME_COMMON.color.green70,
+  green3: THEME_COMMON.color.green60,
+  green4: THEME_COMMON.color.green50,
   turquoise1: THEME_COMMON.color.turquoise80,
   turquoise2: THEME_COMMON.color.turquoise70,
   turquoise3: THEME_COMMON.color.turquoise60,
   turquoise4: THEME_COMMON.color.turquoise50,
+  sky1: THEME_COMMON.color.sky80,
+  sky2: THEME_COMMON.color.sky70,
+  sky3: THEME_COMMON.color.sky60,
+  sky4: THEME_COMMON.color.sky50,
   blue1: THEME_COMMON.color.blue80,
   blue2: THEME_COMMON.color.blue70,
   blue3: THEME_COMMON.color.blue60,
   blue4: THEME_COMMON.color.blue50,
+  red1: THEME_COMMON.color.red80,
+  red2: THEME_COMMON.color.red70,
+  red3: THEME_COMMON.color.red60,
+  red4: THEME_COMMON.color.red50,
+  orange1: THEME_COMMON.color.orange80,
+  orange2: THEME_COMMON.color.orange70,
+  orange3: THEME_COMMON.color.orange60,
+  orange4: THEME_COMMON.color.orange50,
+  yellow1: THEME_COMMON.color.yellow80,
+  yellow2: THEME_COMMON.color.yellow70,
+  yellow3: THEME_COMMON.color.yellow60,
+  yellow4: THEME_COMMON.color.yellow50,
+  pink1: THEME_COMMON.color.pink80,
+  pink2: THEME_COMMON.color.pink70,
+  pink3: THEME_COMMON.color.pink60,
+  pink4: THEME_COMMON.color.pink50,
+  purple1: THEME_COMMON.color.purple80,
+  purple2: THEME_COMMON.color.purple70,
+  purple3: THEME_COMMON.color.purple60,
+  purple4: THEME_COMMON.color.purple50,
+  gray1: THEME_COMMON.color.gray80,
+  gray2: THEME_COMMON.color.gray70,
+  gray3: THEME_COMMON.color.gray60,
+  gray4: THEME_COMMON.color.gray50,
 };

packages/twenty-ui/src/theme/constants/AdaptiveColorsLight.ts

@@ -1,12 +1,44 @@
 import { THEME_COMMON } from '@ui/theme/constants/ThemeCommon';
 
 export const ADAPTIVE_COLORS_LIGHT = {
+  green1: THEME_COMMON.color.green10,
+  green2: THEME_COMMON.color.green20,
+  green3: THEME_COMMON.color.green30,
+  green4: THEME_COMMON.color.green40,
   turquoise1: THEME_COMMON.color.turquoise10,
   turquoise2: THEME_COMMON.color.turquoise20,
   turquoise3: THEME_COMMON.color.turquoise30,
   turquoise4: THEME_COMMON.color.turquoise40,
+  sky1: THEME_COMMON.color.sky10,
+  sky2: THEME_COMMON.color.sky20,
+  sky3: THEME_COMMON.color.sky30,
+  sky4: THEME_COMMON.color.sky40,
   blue1: THEME_COMMON.color.blue10,
   blue2: THEME_COMMON.color.blue20,
   blue3: THEME_COMMON.color.blue30,
   blue4: THEME_COMMON.color.blue40,
+  red1: THEME_COMMON.color.red10,
+  red2: THEME_COMMON.color.red20,
+  red3: THEME_COMMON.color.red30,
+  red4: THEME_COMMON.color.red40,
+  orange1: THEME_COMMON.color.orange10,
+  orange2: THEME_COMMON.color.orange20,
+  orange3: THEME_COMMON.color.orange30,
+  orange4: THEME_COMMON.color.orange40,
+  yellow1: THEME_COMMON.color.yellow10,
+  yellow2: THEME_COMMON.color.yellow20,
+  yellow3: THEME_COMMON.color.yellow30,
+  yellow4: THEME_COMMON.color.yellow40,
+  pink1: THEME_COMMON.color.pink10,
+  pink2: THEME_COMMON.color.pink20,
+  pink3: THEME_COMMON.color.pink30,
+  pink4: THEME_COMMON.color.pink40,
+  purple1: THEME_COMMON.color.purple10,
+  purple2: THEME_COMMON.color.purple20,
+  purple3: THEME_COMMON.color.purple30,
+  purple4: THEME_COMMON.color.purple40,
+  gray1: THEME_COMMON.color.gray10,
+  gray2: THEME_COMMON.color.gray20,
+  gray3: THEME_COMMON.color.gray30,
+  gray4: THEME_COMMON.color.gray40,
 };