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>
This commit is contained in:
Geido 2022-04-07 15:17:40 +03:00 committed by GitHub
parent 0d331f5bd8
commit e5bab00cb9
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -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};
}
`}
`;