Change the styling of the <DependencyGraph> to have more contrast i…

…n light mode Signed-off-by: Oliver Sand <oliver.sand@sda-se.com>
backstage · Sep 8, 2021 · 60c03f6 · 60c03f6
1 parent 5d79be7
commit 60c03f6
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 3 deletions.
diff --git a/.changeset/brave-eggs-rush.md 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
@@ -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,
   },
 }));