From e5bab00cb93d921a37605027cfffad3037c2a74c Mon Sep 17 00:00:00 2001
From: Geido <60598000+geido@users.noreply.github.com>
Date: Thu, 7 Apr 2022 15:17:40 +0300
Subject: [PATCH] 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-molina@users.noreply.github.com>

Co-authored-by: Michael S. Molina <70410625+michael-s-molina@users.noreply.github.com>
---
 .../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 945f81428fa9..64c749d61ca3 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};
+    }
+  `}
 `;