From 60c03f69a7553aa5537aec0440b7b079e8cc8612 Mon Sep 17 00:00:00 2001
From: Oliver Sand <oliver.sand@sda-se.com>
Date: Wed, 8 Sep 2021 14:15:04 +0200
Subject: [PATCH] Change the styling of the `<DependencyGraph>` to have more
 contrast in light mode

Signed-off-by: Oliver Sand <oliver.sand@sda-se.com>
---
 .changeset/brave-eggs-rush.md                               | 6 ++++++
 .../src/components/DependencyGraph/DefaultNode.tsx          | 6 +++---
 2 files changed, 9 insertions(+), 3 deletions(-)
 create mode 100644 .changeset/brave-eggs-rush.md

diff --git a/.changeset/brave-eggs-rush.md b/.changeset/brave-eggs-rush.md
new file mode 100644
index 0000000000..8e1a7ca86d
--- /dev/null
+++ b/.changeset/brave-eggs-rush.md
@@ -0,0 +1,6 @@
+---
+'@backstage/core-components': patch
+---
+
+Change the styling of the `<DependencyGraph>` to have more contrast in light
+mode. Nodes now have a design similar to material UI buttons.
diff --git a/packages/core-components/src/components/DependencyGraph/DefaultNode.tsx b/packages/core-components/src/components/DependencyGraph/DefaultNode.tsx
index 69269d687d..8feca43e9a 100644
--- a/packages/core-components/src/components/DependencyGraph/DefaultNode.tsx
+++ b/packages/core-components/src/components/DependencyGraph/DefaultNode.tsx
@@ -21,11 +21,11 @@ import { RenderNodeProps } from './types';
 
 const useStyles = makeStyles((theme: BackstageTheme) => ({
   node: {
-    fill: theme.palette.background.paper,
-    stroke: theme.palette.border,
+    fill: theme.palette.primary.light,
+    stroke: theme.palette.primary.light,
   },
   text: {
-    fill: theme.palette.textContrast,
+    fill: theme.palette.primary.contrastText,
   },
 }));