From 3c5b17e61120d38d28cdfe1fc71cc4af4f0f5859 Mon Sep 17 00:00:00 2001
From: "Michael S. Molina" <michael.s.molina@gmail.com>
Date: Fri, 1 Apr 2022 14:52:46 -0300
Subject: [PATCH 1/2] chore: Removes hard-coded colors from
 legacy-plugin-chart-sankey

---
 .../src/ReactSankey.jsx                       | 64 ++++++++++---------
 1 file changed, 33 insertions(+), 31 deletions(-)

diff --git a/superset-frontend/plugins/legacy-plugin-chart-sankey/src/ReactSankey.jsx b/superset-frontend/plugins/legacy-plugin-chart-sankey/src/ReactSankey.jsx
index 75c1ed557ce5..13ffdbc9481a 100644
--- a/superset-frontend/plugins/legacy-plugin-chart-sankey/src/ReactSankey.jsx
+++ b/superset-frontend/plugins/legacy-plugin-chart-sankey/src/ReactSankey.jsx
@@ -34,40 +34,42 @@ SankeyComponent.propTypes = {
 };
 
 export default styled(SankeyComponent)`
-  .superset-legacy-chart-sankey {
-    .node {
-      rect {
-        cursor: move;
-        fill-opacity: 0.9;
-        shape-rendering: crispEdges;
+  ${({ theme }) => `
+    .superset-legacy-chart-sankey {
+      .node {
+        rect {
+          cursor: move;
+          fill-opacity: 0.9;
+          shape-rendering: crispEdges;
+        }
+        text {
+          pointer-events: none;
+          text-shadow: 0 1px 0 ${theme.colors.grayscale.light5};
+          font-size: ${theme.typography.sizes.s}px;
+        }
       }
-      text {
-        pointer-events: none;
-        text-shadow: 0 1px 0 #fff;
-        font-size: ${({ fontSize }) => fontSize}em;
+      .link {
+        fill: none;
+        stroke: ${theme.colors.grayscale.dark2};
+        stroke-opacity: 0.2;
+        &:hover {
+          stroke-opacity: 0.5;
+        }
       }
-    }
-    .link {
-      fill: none;
-      stroke: #000;
-      stroke-opacity: 0.2;
-      &:hover {
-        stroke-opacity: 0.5;
+      .opacity-0 {
+        opacity: 0;
       }
     }
-    .opacity-0 {
-      opacity: 0;
+    .sankey-tooltip {
+      position: absolute;
+      width: auto;
+      background: ${theme.colors.grayscale.light2};
+      padding: ${theme.gridUnit * 3}px;
+      font-size: ${theme.typography.sizes.s}px;
+      color: ${theme.colors.grayscale.dark2};
+      border: 1px solid ${theme.colors.grayscale.light5};
+      text-align: center;
+      pointer-events: none;
     }
-  }
-  .sankey-tooltip {
-    position: absolute;
-    width: auto;
-    background: #ddd;
-    padding: 10px;
-    font-size: ${({ fontSize }) => fontSize}em;
-    color: #000;
-    border: 1px solid #fff;
-    text-align: center;
-    pointer-events: none;
-  }
+  `}
 `;

From 60852fc39eb443f9a1fff22902866b09f8838d27 Mon Sep 17 00:00:00 2001
From: "Michael S. Molina" <michael.s.molina@gmail.com>
Date: Mon, 4 Apr 2022 13:46:03 -0300
Subject: [PATCH 2/2] Gets opacity from the theme

---
 .../plugins/legacy-plugin-chart-sankey/src/ReactSankey.jsx  | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/superset-frontend/plugins/legacy-plugin-chart-sankey/src/ReactSankey.jsx b/superset-frontend/plugins/legacy-plugin-chart-sankey/src/ReactSankey.jsx
index 13ffdbc9481a..fe5c5bdea662 100644
--- a/superset-frontend/plugins/legacy-plugin-chart-sankey/src/ReactSankey.jsx
+++ b/superset-frontend/plugins/legacy-plugin-chart-sankey/src/ReactSankey.jsx
@@ -39,7 +39,7 @@ export default styled(SankeyComponent)`
       .node {
         rect {
           cursor: move;
-          fill-opacity: 0.9;
+          fill-opacity: ${theme.opacity.heavy};
           shape-rendering: crispEdges;
         }
         text {
@@ -51,9 +51,9 @@ export default styled(SankeyComponent)`
       .link {
         fill: none;
         stroke: ${theme.colors.grayscale.dark2};
-        stroke-opacity: 0.2;
+        stroke-opacity: ${theme.opacity.light};
         &:hover {
-          stroke-opacity: 0.5;
+          stroke-opacity: ${theme.opacity.mediumLight};
         }
       }
       .opacity-0 {