From 6947c245c6c2fd5d63e5e627e54b1b107dd4eccc Mon Sep 17 00:00:00 2001 From: kumaradityaraj Date: Wed, 15 Apr 2026 14:22:12 +0530 Subject: [PATCH 01/11] system default dark mode Signed-off-by: kumaradityaraj --- .../src/react-flow/diagram/Diagram.css | 4 ---- .../src/react-flow/diagram/Diagram.tsx | 2 ++ 2 files changed, 2 insertions(+), 4 deletions(-) diff --git a/packages/serverless-workflow-diagram-editor/src/react-flow/diagram/Diagram.css b/packages/serverless-workflow-diagram-editor/src/react-flow/diagram/Diagram.css index 15dfc99..fd2b1e8 100644 --- a/packages/serverless-workflow-diagram-editor/src/react-flow/diagram/Diagram.css +++ b/packages/serverless-workflow-diagram-editor/src/react-flow/diagram/Diagram.css @@ -19,7 +19,3 @@ position: relative; } -.diagram-background { - --xy-background-pattern-color: #ccc; - background-color: #E5E4E2; -} diff --git a/packages/serverless-workflow-diagram-editor/src/react-flow/diagram/Diagram.tsx b/packages/serverless-workflow-diagram-editor/src/react-flow/diagram/Diagram.tsx index dee9349..01e8e14 100644 --- a/packages/serverless-workflow-diagram-editor/src/react-flow/diagram/Diagram.tsx +++ b/packages/serverless-workflow-diagram-editor/src/react-flow/diagram/Diagram.tsx @@ -54,6 +54,7 @@ export const Diagram = ({ divRef, ref }: DiagramProps) => { const [minimapVisible, setMinimapVisible] = React.useState(false); const [nodes, setNodes] = React.useState(initialNodes); const [edges, setEdges] = React.useState(initialEdges); + const [colorMode] = React.useState("system"); const onNodesChange = React.useCallback( (changes) => setNodes((nodesSnapshot) => RF.applyNodeChanges(changes, nodesSnapshot)), @@ -89,6 +90,7 @@ export const Diagram = ({ divRef, ref }: DiagramProps) => { preventScrolling={true} selectionOnDrag={true} fitView + colorMode={colorMode} > {minimapVisible && } From 56791129ee653ab1de94dc9a7aad08b6bb2d0375 Mon Sep 17 00:00:00 2001 From: kumaradityaraj Date: Wed, 15 Apr 2026 18:34:15 +0530 Subject: [PATCH 02/11] Adding user preference button Signed-off-by: kumaradityaraj --- .../src/react-flow/diagram/Diagram.tsx | 12 +++++++++++- .../test-results/.last-run.json | 4 ++++ 2 files changed, 15 insertions(+), 1 deletion(-) create mode 100644 packages/serverless-workflow-diagram-editor/test-results/.last-run.json diff --git a/packages/serverless-workflow-diagram-editor/src/react-flow/diagram/Diagram.tsx b/packages/serverless-workflow-diagram-editor/src/react-flow/diagram/Diagram.tsx index 01e8e14..bafbb8a 100644 --- a/packages/serverless-workflow-diagram-editor/src/react-flow/diagram/Diagram.tsx +++ b/packages/serverless-workflow-diagram-editor/src/react-flow/diagram/Diagram.tsx @@ -54,7 +54,7 @@ export const Diagram = ({ divRef, ref }: DiagramProps) => { const [minimapVisible, setMinimapVisible] = React.useState(false); const [nodes, setNodes] = React.useState(initialNodes); const [edges, setEdges] = React.useState(initialEdges); - const [colorMode] = React.useState("system"); + const [colorMode, setColorMode] = React.useState("system"); const onNodesChange = React.useCallback( (changes) => setNodes((nodesSnapshot) => RF.applyNodeChanges(changes, nodesSnapshot)), @@ -64,6 +64,9 @@ export const Diagram = ({ divRef, ref }: DiagramProps) => { (changes) => setEdges((edgesSnapshot) => RF.applyEdgeChanges(changes, edgesSnapshot)), [], ); + const onChange: React.ChangeEventHandler = (evt) => { + setColorMode(evt.target.value as RF.ColorMode); + }; React.useImperativeHandle( ref, @@ -92,6 +95,13 @@ export const Diagram = ({ divRef, ref }: DiagramProps) => { fitView colorMode={colorMode} > + + + {minimapVisible && } Date: Tue, 21 Apr 2026 12:56:21 +0530 Subject: [PATCH 03/11] Making dark mode simple and modifying content Signed-off-by: kumaradityaraj --- .../src/diagram-editor/DiagramEditor.css | 16 ++++++++++++++++ .../src/diagram-editor/DiagramEditor.tsx | 5 ++++- .../src/react-flow/diagram/Diagram.tsx | 14 ++------------ 3 files changed, 22 insertions(+), 13 deletions(-) create mode 100644 packages/serverless-workflow-diagram-editor/src/diagram-editor/DiagramEditor.css diff --git a/packages/serverless-workflow-diagram-editor/src/diagram-editor/DiagramEditor.css b/packages/serverless-workflow-diagram-editor/src/diagram-editor/DiagramEditor.css new file mode 100644 index 0000000..45b5f48 --- /dev/null +++ b/packages/serverless-workflow-diagram-editor/src/diagram-editor/DiagramEditor.css @@ -0,0 +1,16 @@ +/* Content wrapper */ +.content { + color: #000000; + margin: 0; + padding: 1%; +} + +/* Dark mode */ +@media (prefers-color-scheme: dark) { + .content { + color: #F8F8F8; + background-color: #141414; + margin: 0; + padding: 1%; + } +} diff --git a/packages/serverless-workflow-diagram-editor/src/diagram-editor/DiagramEditor.tsx b/packages/serverless-workflow-diagram-editor/src/diagram-editor/DiagramEditor.tsx index 7cfcf81..aaf3b60 100644 --- a/packages/serverless-workflow-diagram-editor/src/diagram-editor/DiagramEditor.tsx +++ b/packages/serverless-workflow-diagram-editor/src/diagram-editor/DiagramEditor.tsx @@ -19,6 +19,7 @@ import { Diagram, DiagramRef } from "../react-flow/diagram/Diagram"; import { DiagramEditorContextProvider } from "../store/DiagramEditorContextProvider"; import { I18nProvider, useI18n, detectLocale } from "@serverlessworkflow/i18n"; import { dictionaries } from "../i18n/locales"; +import "./DiagramEditor.css"; /** * DiagramEditor component API */ @@ -70,7 +71,9 @@ export const DiagramEditor = (props: DiagramEditorProps) => { locale={locale} > - +
+ +
diff --git a/packages/serverless-workflow-diagram-editor/src/react-flow/diagram/Diagram.tsx b/packages/serverless-workflow-diagram-editor/src/react-flow/diagram/Diagram.tsx index bafbb8a..7f66ae3 100644 --- a/packages/serverless-workflow-diagram-editor/src/react-flow/diagram/Diagram.tsx +++ b/packages/serverless-workflow-diagram-editor/src/react-flow/diagram/Diagram.tsx @@ -54,7 +54,7 @@ export const Diagram = ({ divRef, ref }: DiagramProps) => { const [minimapVisible, setMinimapVisible] = React.useState(false); const [nodes, setNodes] = React.useState(initialNodes); const [edges, setEdges] = React.useState(initialEdges); - const [colorMode, setColorMode] = React.useState("system"); + const [colorMode] = React.useState("system"); const onNodesChange = React.useCallback( (changes) => setNodes((nodesSnapshot) => RF.applyNodeChanges(changes, nodesSnapshot)), @@ -64,9 +64,6 @@ export const Diagram = ({ divRef, ref }: DiagramProps) => { (changes) => setEdges((edgesSnapshot) => RF.applyEdgeChanges(changes, edgesSnapshot)), [], ); - const onChange: React.ChangeEventHandler = (evt) => { - setColorMode(evt.target.value as RF.ColorMode); - }; React.useImperativeHandle( ref, @@ -95,13 +92,6 @@ export const Diagram = ({ divRef, ref }: DiagramProps) => { fitView colorMode={colorMode} > - - - {minimapVisible && } { > setMinimapVisible(!minimapVisible)}>M - + ); From 3a2fbacfd2667a516226e7fc454c4e93cc93ad85 Mon Sep 17 00:00:00 2001 From: kumaradityaraj Date: Tue, 21 Apr 2026 12:57:49 +0530 Subject: [PATCH 04/11] adding liscense Signed-off-by: kumaradityaraj --- .../src/diagram-editor/DiagramEditor.css | 18 ++++++++++++++++-- 1 file changed, 16 insertions(+), 2 deletions(-) diff --git a/packages/serverless-workflow-diagram-editor/src/diagram-editor/DiagramEditor.css b/packages/serverless-workflow-diagram-editor/src/diagram-editor/DiagramEditor.css index 45b5f48..da9f233 100644 --- a/packages/serverless-workflow-diagram-editor/src/diagram-editor/DiagramEditor.css +++ b/packages/serverless-workflow-diagram-editor/src/diagram-editor/DiagramEditor.css @@ -1,11 +1,25 @@ -/* Content wrapper */ +/* + * Copyright 2021-Present The Serverless Workflow Specification Authors + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + .content { color: #000000; margin: 0; padding: 1%; } -/* Dark mode */ @media (prefers-color-scheme: dark) { .content { color: #F8F8F8; From 156b110e83541f9783790aeecc924c735bfad508 Mon Sep 17 00:00:00 2001 From: kumaradityaraj Date: Tue, 21 Apr 2026 13:12:53 +0530 Subject: [PATCH 05/11] Copilot suggestions Signed-off-by: kumaradityaraj --- .../src/diagram-editor/DiagramEditor.css | 4 ++-- .../src/diagram-editor/DiagramEditor.tsx | 2 +- .../src/react-flow/diagram/Diagram.tsx | 4 ++-- .../test-results/.last-run.json | 4 ---- 4 files changed, 5 insertions(+), 9 deletions(-) delete mode 100644 packages/serverless-workflow-diagram-editor/test-results/.last-run.json diff --git a/packages/serverless-workflow-diagram-editor/src/diagram-editor/DiagramEditor.css b/packages/serverless-workflow-diagram-editor/src/diagram-editor/DiagramEditor.css index da9f233..97e351b 100644 --- a/packages/serverless-workflow-diagram-editor/src/diagram-editor/DiagramEditor.css +++ b/packages/serverless-workflow-diagram-editor/src/diagram-editor/DiagramEditor.css @@ -14,14 +14,14 @@ * limitations under the License. */ -.content { +.headingContent { color: #000000; margin: 0; padding: 1%; } @media (prefers-color-scheme: dark) { - .content { + .headingContent { color: #F8F8F8; background-color: #141414; margin: 0; diff --git a/packages/serverless-workflow-diagram-editor/src/diagram-editor/DiagramEditor.tsx b/packages/serverless-workflow-diagram-editor/src/diagram-editor/DiagramEditor.tsx index aaf3b60..28afa95 100644 --- a/packages/serverless-workflow-diagram-editor/src/diagram-editor/DiagramEditor.tsx +++ b/packages/serverless-workflow-diagram-editor/src/diagram-editor/DiagramEditor.tsx @@ -71,7 +71,7 @@ export const DiagramEditor = (props: DiagramEditorProps) => { locale={locale} > -
+
diff --git a/packages/serverless-workflow-diagram-editor/src/react-flow/diagram/Diagram.tsx b/packages/serverless-workflow-diagram-editor/src/react-flow/diagram/Diagram.tsx index 7f66ae3..180d221 100644 --- a/packages/serverless-workflow-diagram-editor/src/react-flow/diagram/Diagram.tsx +++ b/packages/serverless-workflow-diagram-editor/src/react-flow/diagram/Diagram.tsx @@ -48,13 +48,13 @@ export type DiagramRef = { export type DiagramProps = { divRef?: React.RefObject; ref?: React.Ref; + colorMode?: RF.ColorMode; }; -export const Diagram = ({ divRef, ref }: DiagramProps) => { +export const Diagram = ({ divRef, ref, colorMode = "system" }: DiagramProps) => { const [minimapVisible, setMinimapVisible] = React.useState(false); const [nodes, setNodes] = React.useState(initialNodes); const [edges, setEdges] = React.useState(initialEdges); - const [colorMode] = React.useState("system"); const onNodesChange = React.useCallback( (changes) => setNodes((nodesSnapshot) => RF.applyNodeChanges(changes, nodesSnapshot)), diff --git a/packages/serverless-workflow-diagram-editor/test-results/.last-run.json b/packages/serverless-workflow-diagram-editor/test-results/.last-run.json deleted file mode 100644 index f740f7c..0000000 --- a/packages/serverless-workflow-diagram-editor/test-results/.last-run.json +++ /dev/null @@ -1,4 +0,0 @@ -{ - "status": "passed", - "failedTests": [] -} From 9bffee2fcede6ff1a1e5f20f0402bb6feacfc41c Mon Sep 17 00:00:00 2001 From: fantonangeli Date: Tue, 21 Apr 2026 11:47:13 +0200 Subject: [PATCH 06/11] Use sand flow background Signed-off-by: fantonangeli --- .../src/react-flow/diagram/Diagram.css | 11 +++++++++++ .../src/react-flow/diagram/Diagram.tsx | 2 +- 2 files changed, 12 insertions(+), 1 deletion(-) diff --git a/packages/serverless-workflow-diagram-editor/src/react-flow/diagram/Diagram.css b/packages/serverless-workflow-diagram-editor/src/react-flow/diagram/Diagram.css index fd2b1e8..60fecba 100644 --- a/packages/serverless-workflow-diagram-editor/src/react-flow/diagram/Diagram.css +++ b/packages/serverless-workflow-diagram-editor/src/react-flow/diagram/Diagram.css @@ -19,3 +19,14 @@ position: relative; } +.diagram-background { + --xy-background-pattern-color: #ccc; + background-color: #E5E4E2; +} + +@media (prefers-color-scheme: dark) { + .diagram-background{ + --xy-background-pattern-color: inherit; + background-color: inherit; + } +} diff --git a/packages/serverless-workflow-diagram-editor/src/react-flow/diagram/Diagram.tsx b/packages/serverless-workflow-diagram-editor/src/react-flow/diagram/Diagram.tsx index 180d221..96ceaa3 100644 --- a/packages/serverless-workflow-diagram-editor/src/react-flow/diagram/Diagram.tsx +++ b/packages/serverless-workflow-diagram-editor/src/react-flow/diagram/Diagram.tsx @@ -101,7 +101,7 @@ export const Diagram = ({ divRef, ref, colorMode = "system" }: DiagramProps) => > setMinimapVisible(!minimapVisible)}>M - +
); From 634f26627e1727e136a236fa268540036e7dbbcc Mon Sep 17 00:00:00 2001 From: kumaradityaraj Date: Tue, 21 Apr 2026 18:10:16 +0530 Subject: [PATCH 07/11] Adding attribute Signed-off-by: kumaradityaraj --- .../src/diagram-editor/DiagramEditor.css | 1 + .../src/diagram-editor/DiagramEditor.tsx | 6 +++++- .../src/react-flow/diagram/Diagram.tsx | 9 +++++++-- .../src/types/colorMode.ts | 17 +++++++++++++++++ .../stories/DiagramEditor.stories.ts | 1 + .../stories/DiagramEditor.tsx | 7 ++++++- 6 files changed, 37 insertions(+), 4 deletions(-) create mode 100644 packages/serverless-workflow-diagram-editor/src/types/colorMode.ts diff --git a/packages/serverless-workflow-diagram-editor/src/diagram-editor/DiagramEditor.css b/packages/serverless-workflow-diagram-editor/src/diagram-editor/DiagramEditor.css index 97e351b..fcf1ca7 100644 --- a/packages/serverless-workflow-diagram-editor/src/diagram-editor/DiagramEditor.css +++ b/packages/serverless-workflow-diagram-editor/src/diagram-editor/DiagramEditor.css @@ -16,6 +16,7 @@ .headingContent { color: #000000; + background-color: #F8F8F8; margin: 0; padding: 1%; } diff --git a/packages/serverless-workflow-diagram-editor/src/diagram-editor/DiagramEditor.tsx b/packages/serverless-workflow-diagram-editor/src/diagram-editor/DiagramEditor.tsx index 28afa95..867ff1e 100644 --- a/packages/serverless-workflow-diagram-editor/src/diagram-editor/DiagramEditor.tsx +++ b/packages/serverless-workflow-diagram-editor/src/diagram-editor/DiagramEditor.tsx @@ -20,6 +20,8 @@ import { DiagramEditorContextProvider } from "../store/DiagramEditorContextProvi import { I18nProvider, useI18n, detectLocale } from "@serverlessworkflow/i18n"; import { dictionaries } from "../i18n/locales"; import "./DiagramEditor.css"; +import { ColorMode } from "../types/colorMode"; + /** * DiagramEditor component API */ @@ -32,6 +34,7 @@ export type DiagramEditorProps = { isReadOnly: boolean; locale: string; ref?: React.Ref; + colorMode?: ColorMode; }; const Content = () => { @@ -51,6 +54,7 @@ export const DiagramEditor = (props: DiagramEditorProps) => { const supportedLocales = Object.keys(dictionaries); return props.locale ?? detectLocale(supportedLocales); }, [props.locale]); + const colorMode = props.colorMode ?? "system"; // Allow imperatively controlling the Editor React.useImperativeHandle( @@ -74,7 +78,7 @@ export const DiagramEditor = (props: DiagramEditorProps) => {
- + diff --git a/packages/serverless-workflow-diagram-editor/src/react-flow/diagram/Diagram.tsx b/packages/serverless-workflow-diagram-editor/src/react-flow/diagram/Diagram.tsx index 96ceaa3..8a5c065 100644 --- a/packages/serverless-workflow-diagram-editor/src/react-flow/diagram/Diagram.tsx +++ b/packages/serverless-workflow-diagram-editor/src/react-flow/diagram/Diagram.tsx @@ -18,8 +18,13 @@ import * as React from "react"; import * as RF from "@xyflow/react"; import "@xyflow/react/dist/style.css"; import "./Diagram.css"; +import { ColorMode } from "../../types/colorMode"; -const FIT_VIEW_OPTIONS: RF.FitViewOptions = { maxZoom: 1, minZoom: 0.1, duration: 400 }; +const FIT_VIEW_OPTIONS: RF.FitViewOptions = { + maxZoom: 1, + minZoom: 0.1, + duration: 400, +}; // TODO: Nodes and Edges are hardcoded for now to generate a renderable basic workflow // It shall be replaced by the actual implementation based on graph structure @@ -48,7 +53,7 @@ export type DiagramRef = { export type DiagramProps = { divRef?: React.RefObject; ref?: React.Ref; - colorMode?: RF.ColorMode; + colorMode?: ColorMode; }; export const Diagram = ({ divRef, ref, colorMode = "system" }: DiagramProps) => { diff --git a/packages/serverless-workflow-diagram-editor/src/types/colorMode.ts b/packages/serverless-workflow-diagram-editor/src/types/colorMode.ts new file mode 100644 index 0000000..b69f8a9 --- /dev/null +++ b/packages/serverless-workflow-diagram-editor/src/types/colorMode.ts @@ -0,0 +1,17 @@ +/* + * Copyright 2021-Present The Serverless Workflow Specification Authors + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +export type ColorMode = "light" | "dark" | "system"; diff --git a/packages/serverless-workflow-diagram-editor/stories/DiagramEditor.stories.ts b/packages/serverless-workflow-diagram-editor/stories/DiagramEditor.stories.ts index 3642254..951e149 100644 --- a/packages/serverless-workflow-diagram-editor/stories/DiagramEditor.stories.ts +++ b/packages/serverless-workflow-diagram-editor/stories/DiagramEditor.stories.ts @@ -38,5 +38,6 @@ export const Component: Story = { isReadOnly: true, locale: "en", content: "", // TODO: Replace with a sample workflow YAML once diagram renders from model + colorMode: "system", }, }; diff --git a/packages/serverless-workflow-diagram-editor/stories/DiagramEditor.tsx b/packages/serverless-workflow-diagram-editor/stories/DiagramEditor.tsx index 8c66eca..dfc3cb3 100644 --- a/packages/serverless-workflow-diagram-editor/stories/DiagramEditor.tsx +++ b/packages/serverless-workflow-diagram-editor/stories/DiagramEditor.tsx @@ -23,7 +23,12 @@ import { export const DiagramEditor = ({ ...props }: DiagramEditorProps) => { return (
- +
); }; From da2d653a6c18c9f00119431a2a6eed6be882d8d0 Mon Sep 17 00:00:00 2001 From: kumaradityaraj Date: Wed, 22 Apr 2026 14:21:52 +0530 Subject: [PATCH 08/11] Adding dark mode types Signed-off-by: kumaradityaraj --- packages/serverless-workflow-diagram-editor/src/index.ts | 1 + .../src/react-flow/diagram/Diagram.css | 8 ++++---- 2 files changed, 5 insertions(+), 4 deletions(-) diff --git a/packages/serverless-workflow-diagram-editor/src/index.ts b/packages/serverless-workflow-diagram-editor/src/index.ts index 44a3d2d..b8d5bf0 100644 --- a/packages/serverless-workflow-diagram-editor/src/index.ts +++ b/packages/serverless-workflow-diagram-editor/src/index.ts @@ -15,3 +15,4 @@ */ export * from "./diagram-editor"; +export * from "./types/colorMode"; diff --git a/packages/serverless-workflow-diagram-editor/src/react-flow/diagram/Diagram.css b/packages/serverless-workflow-diagram-editor/src/react-flow/diagram/Diagram.css index 60fecba..b2b7087 100644 --- a/packages/serverless-workflow-diagram-editor/src/react-flow/diagram/Diagram.css +++ b/packages/serverless-workflow-diagram-editor/src/react-flow/diagram/Diagram.css @@ -15,13 +15,13 @@ */ .diagram-container { - height: 100%; - position: relative; + height: 100%; + position: relative; } .diagram-background { - --xy-background-pattern-color: #ccc; - background-color: #E5E4E2; + --xy-background-pattern-color: #ccc; + background-color: #e5e4e2; } @media (prefers-color-scheme: dark) { From ed452a2e88e7abf3e1a419dbbad51914d9305ff1 Mon Sep 17 00:00:00 2001 From: fantonangeli Date: Wed, 22 Apr 2026 13:02:44 +0200 Subject: [PATCH 09/11] Implement colorMode css classes Signed-off-by: fantonangeli --- .../src/diagram-editor/DiagramEditor.css | 13 ++++++++----- .../src/diagram-editor/DiagramEditor.tsx | 8 ++++---- .../src/react-flow/diagram/Diagram.css | 9 +++++++-- .../src/react-flow/diagram/Diagram.tsx | 2 +- 4 files changed, 20 insertions(+), 12 deletions(-) diff --git a/packages/serverless-workflow-diagram-editor/src/diagram-editor/DiagramEditor.css b/packages/serverless-workflow-diagram-editor/src/diagram-editor/DiagramEditor.css index fcf1ca7..293564a 100644 --- a/packages/serverless-workflow-diagram-editor/src/diagram-editor/DiagramEditor.css +++ b/packages/serverless-workflow-diagram-editor/src/diagram-editor/DiagramEditor.css @@ -21,11 +21,14 @@ padding: 1%; } -@media (prefers-color-scheme: dark) { - .headingContent { +.headingContent.colorMode-dark { color: #F8F8F8; background-color: #141414; - margin: 0; - padding: 1%; - } +} + +@media (prefers-color-scheme: dark) { + .headingContent.colorMode-system { + color: #F8F8F8; + background-color: #141414; + } } diff --git a/packages/serverless-workflow-diagram-editor/src/diagram-editor/DiagramEditor.tsx b/packages/serverless-workflow-diagram-editor/src/diagram-editor/DiagramEditor.tsx index 867ff1e..cb58a33 100644 --- a/packages/serverless-workflow-diagram-editor/src/diagram-editor/DiagramEditor.tsx +++ b/packages/serverless-workflow-diagram-editor/src/diagram-editor/DiagramEditor.tsx @@ -75,10 +75,10 @@ export const DiagramEditor = (props: DiagramEditorProps) => { locale={locale} > -
- -
- +
+ +
+ diff --git a/packages/serverless-workflow-diagram-editor/src/react-flow/diagram/Diagram.css b/packages/serverless-workflow-diagram-editor/src/react-flow/diagram/Diagram.css index b2b7087..4344539 100644 --- a/packages/serverless-workflow-diagram-editor/src/react-flow/diagram/Diagram.css +++ b/packages/serverless-workflow-diagram-editor/src/react-flow/diagram/Diagram.css @@ -19,13 +19,18 @@ position: relative; } -.diagram-background { +.diagram-container .diagram-background { --xy-background-pattern-color: #ccc; background-color: #e5e4e2; } +.diagram-container.colorMode-dark .diagram-background{ + --xy-background-pattern-color: inherit; + background-color: inherit; +} + @media (prefers-color-scheme: dark) { - .diagram-background{ + .diagram-container.colorMode-system .diagram-background{ --xy-background-pattern-color: inherit; background-color: inherit; } diff --git a/packages/serverless-workflow-diagram-editor/src/react-flow/diagram/Diagram.tsx b/packages/serverless-workflow-diagram-editor/src/react-flow/diagram/Diagram.tsx index 8a5c065..aedd0bd 100644 --- a/packages/serverless-workflow-diagram-editor/src/react-flow/diagram/Diagram.tsx +++ b/packages/serverless-workflow-diagram-editor/src/react-flow/diagram/Diagram.tsx @@ -81,7 +81,7 @@ export const Diagram = ({ divRef, ref, colorMode = "system" }: DiagramProps) => ); return ( -
+
Date: Wed, 22 Apr 2026 18:18:45 +0530 Subject: [PATCH 10/11] Test cases added Signed-off-by: kumaradityaraj --- .../DiagramEditor.story.test.tsx | 57 ++++++++++++++++++- .../diagram-editor/DiagramEditor.test.tsx | 57 ++++++++++++++++++- 2 files changed, 108 insertions(+), 6 deletions(-) diff --git a/packages/serverless-workflow-diagram-editor/tests/diagram-editor/DiagramEditor.story.test.tsx b/packages/serverless-workflow-diagram-editor/tests/diagram-editor/DiagramEditor.story.test.tsx index 63709c0..b33623b 100644 --- a/packages/serverless-workflow-diagram-editor/tests/diagram-editor/DiagramEditor.story.test.tsx +++ b/packages/serverless-workflow-diagram-editor/tests/diagram-editor/DiagramEditor.story.test.tsx @@ -28,10 +28,10 @@ describe("Story - DiagramEditor component", () => { vi.restoreAllMocks(); }); - test("Renders react flow Diagram component", async () => { - const locale = "en"; - const isReadOnly = true; + const locale = "en"; + const isReadOnly = true; + test("Renders react flow Diagram component", async () => { render( , ); @@ -40,4 +40,55 @@ describe("Story - DiagramEditor component", () => { expect(reactFlowContainer).toBeInTheDocument(); }); + + test("applies light mode class", () => { + render( + , + ); + + const reactFlowContainer = screen.getByTestId("diagram-container"); + expect(reactFlowContainer).toHaveClass("colorMode-light"); + }); + + test("applies dark mode class", () => { + render( + , + ); + + const reactFlowContainer = screen.getByTestId("diagram-container"); + expect(reactFlowContainer).toHaveClass("colorMode-dark"); + }); + + test("applies system mode class", () => { + render( + , + ); + + const reactFlowContainer = screen.getByTestId("diagram-container"); + expect(reactFlowContainer).toHaveClass("colorMode-system"); + }); + + test("defaults to system mode when no colorMode is provided", () => { + render( + , + ); + + const reactFlowContainer = screen.getByTestId("diagram-container"); + expect(reactFlowContainer).toHaveClass("colorMode-system"); + }); }); diff --git a/packages/serverless-workflow-diagram-editor/tests/diagram-editor/DiagramEditor.test.tsx b/packages/serverless-workflow-diagram-editor/tests/diagram-editor/DiagramEditor.test.tsx index 74c84be..ba749e7 100644 --- a/packages/serverless-workflow-diagram-editor/tests/diagram-editor/DiagramEditor.test.tsx +++ b/packages/serverless-workflow-diagram-editor/tests/diagram-editor/DiagramEditor.test.tsx @@ -24,10 +24,10 @@ describe("DiagramEditor Component", () => { vi.restoreAllMocks(); }); - test("Renders react flow Diagram component", async () => { - const locale = "en"; - const isReadOnly = true; + const locale = "en"; + const isReadOnly = true; + test("Renders react flow Diagram component", async () => { render( , ); @@ -36,4 +36,55 @@ describe("DiagramEditor Component", () => { expect(reactFlowContainer).toBeInTheDocument(); }); + + test("applies light mode class", () => { + render( + , + ); + + const reactFlowContainer = screen.getByTestId("diagram-container"); + expect(reactFlowContainer).toHaveClass("colorMode-light"); + }); + + test("applies dark mode class", () => { + render( + , + ); + + const reactFlowContainer = screen.getByTestId("diagram-container"); + expect(reactFlowContainer).toHaveClass("colorMode-dark"); + }); + + test("applies system mode class", () => { + render( + , + ); + + const reactFlowContainer = screen.getByTestId("diagram-container"); + expect(reactFlowContainer).toHaveClass("colorMode-system"); + }); + + test("defaults to system mode when no colorMode is provided", () => { + render( + , + ); + + const reactFlowContainer = screen.getByTestId("diagram-container"); + expect(reactFlowContainer).toHaveClass("colorMode-system"); + }); }); From f932d00203ad6fdf608164394b534723cd1914eb Mon Sep 17 00:00:00 2001 From: kumaradityaraj Date: Wed, 22 Apr 2026 19:11:37 +0530 Subject: [PATCH 11/11] Copilot suggestion Signed-off-by: kumaradityaraj --- .../tests/diagram-editor/DiagramEditor.story.test.tsx | 2 +- .../tests/diagram-editor/DiagramEditor.test.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/serverless-workflow-diagram-editor/tests/diagram-editor/DiagramEditor.story.test.tsx b/packages/serverless-workflow-diagram-editor/tests/diagram-editor/DiagramEditor.story.test.tsx index b33623b..941d0d9 100644 --- a/packages/serverless-workflow-diagram-editor/tests/diagram-editor/DiagramEditor.story.test.tsx +++ b/packages/serverless-workflow-diagram-editor/tests/diagram-editor/DiagramEditor.story.test.tsx @@ -31,7 +31,7 @@ describe("Story - DiagramEditor component", () => { const locale = "en"; const isReadOnly = true; - test("Renders react flow Diagram component", async () => { + test("Renders react flow Diagram component", () => { render( , ); diff --git a/packages/serverless-workflow-diagram-editor/tests/diagram-editor/DiagramEditor.test.tsx b/packages/serverless-workflow-diagram-editor/tests/diagram-editor/DiagramEditor.test.tsx index ba749e7..99aac0a 100644 --- a/packages/serverless-workflow-diagram-editor/tests/diagram-editor/DiagramEditor.test.tsx +++ b/packages/serverless-workflow-diagram-editor/tests/diagram-editor/DiagramEditor.test.tsx @@ -27,7 +27,7 @@ describe("DiagramEditor Component", () => { const locale = "en"; const isReadOnly = true; - test("Renders react flow Diagram component", async () => { + test("Renders react flow Diagram component", () => { render( , );