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>
apache · Apr 7, 2022 · e5bab00 · e5bab00
1 parent 0d331f5
commit e5bab00
Showing 1 changed file with 16 additions and 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
@@ -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};
+    }
+  `}
 `;