[superset] branch master updated: chore: Removes hard-coded colors from legacy-plugin-chart-sankey (#19493)

[mi...@apache.org]

This is an automated email from the ASF dual-hosted git repository.

michaelsmolina pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/superset.git


The following commit(s) were added to refs/heads/master by this push:
     new 06dee825a4 chore: Removes hard-coded colors from legacy-plugin-chart-sankey (#19493)
06dee825a4 is described below

commit 06dee825a419656099a6fcf473d168f24be01f75
Author: Michael S. Molina <70...@users.noreply.github.com>
AuthorDate: Thu Apr 7 11:50:31 2022 -0300

    chore: Removes hard-coded colors from legacy-plugin-chart-sankey (#19493)
    
    * chore: Removes hard-coded colors from legacy-plugin-chart-sankey
    
    * Gets opacity from the theme
---
 .../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 75c1ed557c..fe5c5bdea6 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: ${theme.opacity.heavy};
+          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: ${theme.opacity.light};
+        &:hover {
+          stroke-opacity: ${theme.opacity.mediumLight};
+        }
       }
-    }
-    .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;
-  }
+  `}
 `;