[superset] branch master updated: chore: Enhance ReactChord style with theme vars (#19517)

[diegopucci]

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

diegopucci 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 e5bab00cb9 chore: Enhance ReactChord style with theme vars (#19517)
e5bab00cb9 is described below

commit e5bab00cb93d921a37605027cfffad3037c2a74c
Author: Geido <60598000+ge...@users.noreply.github.com>
AuthorDate: Thu Apr 7 15:17:40 2022 +0300

    chore: Enhance ReactChord style with theme vars (#19517)
    
    * Enhance style with theme vars
    
    * Update 
superset-frontend/plugins/legacy-plugin-chart-chord/src/ReactChord.jsx
    
    Co-authored-by: Michael S. Molina 
<70410625+michael-s-mol...@users.noreply.github.com>
    
    Co-authored-by: Michael S. Molina 
<70410625+michael-s-mol...@users.noreply.github.com>
---
 .../legacy-plugin-chart-chord/src/ReactChord.jsx   | 30 ++++++++++++----------
 1 file changed, 16 insertions(+), 14 deletions(-)

diff --git 
a/superset-frontend/plugins/legacy-plugin-chart-chord/src/ReactChord.jsx 
b/superset-frontend/plugins/legacy-plugin-chart-chord/src/ReactChord.jsx
index 945f81428f..64c749d61c 100644
--- a/superset-frontend/plugins/legacy-plugin-chart-chord/src/ReactChord.jsx
+++ b/superset-frontend/plugins/legacy-plugin-chart-chord/src/ReactChord.jsx
@@ -39,18 +39,20 @@ Chord.propTypes = {
 };
 
 export default styled(Chord)`
-  .superset-legacy-chart-chord svg #circle circle {
-    fill: none;
-    pointer-events: all;
-  }
-  .superset-legacy-chart-chord svg .group path {
-    fill-opacity: 0.6;
-  }
-  .superset-legacy-chart-chord svg path.chord {
-    stroke: #000;
-    stroke-width: 0.25px;
-  }
-  .superset-legacy-chart-chord svg #circle:hover path.fade {
-    opacity: 0.2;
-  }
+  ${({ theme }) => `
+    .superset-legacy-chart-chord svg #circle circle {
+      fill: none;
+      pointer-events: all;
+    }
+    .superset-legacy-chart-chord svg .group path {
+      fill-opacity: ${theme.opacity.mediumHeavy};
+    }
+    .superset-legacy-chart-chord svg path.chord {
+      stroke: ${theme.colors.grayscale.dark2};
+      stroke-width: 0.25px;
+    }
+    .superset-legacy-chart-chord svg #circle:hover path.fade {
+      opacity:  ${theme.opacity.light};
+    }
+  `}
 `;