diff --git a/superset-frontend/plugins/legacy-plugin-chart-sunburst/package.json b/superset-frontend/plugins/legacy-plugin-chart-sunburst/package.json
index 39f4a1f0c731..cdba4664f47e 100644
--- a/superset-frontend/plugins/legacy-plugin-chart-sunburst/package.json
+++ b/superset-frontend/plugins/legacy-plugin-chart-sunburst/package.json
@@ -15,9 +15,6 @@
},
"license": "Apache-2.0",
"author": "Superset",
- "sideEffects": [
- "*.css"
- ],
"main": "lib/index.js",
"module": "esm/index.js",
"files": [
@@ -30,7 +27,8 @@
},
"peerDependencies": {
"@superset-ui/chart-controls": "*",
- "@superset-ui/core": "*"
+ "@superset-ui/core": "*",
+ "react": "^16.13.1"
},
"publishConfig": {
"access": "public"
diff --git a/superset-frontend/plugins/legacy-plugin-chart-sunburst/src/ReactSunburst.js b/superset-frontend/plugins/legacy-plugin-chart-sunburst/src/ReactSunburst.js
deleted file mode 100644
index 15303c9eafb6..000000000000
--- a/superset-frontend/plugins/legacy-plugin-chart-sunburst/src/ReactSunburst.js
+++ /dev/null
@@ -1,22 +0,0 @@
-/**
- * Licensed to the Apache Software Foundation (ASF) under one
- * or more contributor license agreements. See the NOTICE file
- * distributed with this work for additional information
- * regarding copyright ownership. The ASF licenses this file
- * to you under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance
- * with the License. You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied. See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-import { reactify } from '@superset-ui/core';
-import Component from './Sunburst';
-
-export default reactify(Component);
diff --git a/superset-frontend/plugins/legacy-plugin-chart-sunburst/src/ReactSunburst.jsx b/superset-frontend/plugins/legacy-plugin-chart-sunburst/src/ReactSunburst.jsx
new file mode 100644
index 000000000000..10e959285bb4
--- /dev/null
+++ b/superset-frontend/plugins/legacy-plugin-chart-sunburst/src/ReactSunburst.jsx
@@ -0,0 +1,66 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements. See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership. The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import React from 'react';
+import { reactify, styled } from '@superset-ui/core';
+import Component from './Sunburst';
+
+const ReactComponent = reactify(Component);
+
+const Sunburst = ({ className, ...otherProps }) => (
+
+
+
+);
+
+export default styled(Sunburst)`
+ ${({ theme }) => `
+ .superset-legacy-chart-sunburst text {
+ text-rendering: optimizeLegibility;
+ }
+ .superset-legacy-chart-sunburst path {
+ stroke: ${theme.colors.grayscale.light2};
+ stroke-width: 0.5px;
+ }
+ .superset-legacy-chart-sunburst .center-label {
+ text-anchor: middle;
+ fill: ${theme.colors.grayscale.dark1};
+ pointer-events: none;
+ }
+ .superset-legacy-chart-sunburst .path-abs-percent {
+ font-size: ${theme.typography.sizes.m}px;
+ font-weight: ${theme.typography.weights.bold};
+ }
+ .superset-legacy-chart-sunburst .path-cond-percent {
+ font-size: ${theme.typography.sizes.s}px;
+ }
+ .superset-legacy-chart-sunburst .path-metrics {
+ color: ${theme.colors.grayscale.base};
+ }
+ .superset-legacy-chart-sunburst .path-ratio {
+ color: ${theme.colors.grayscale.base};
+ }
+
+ .superset-legacy-chart-sunburst .breadcrumbs text {
+ font-weight: ${theme.typography.weights.bold};
+ font-size: ${theme.typography.sizes.m}px;
+ text-anchor: middle;
+ fill: ${theme.colors.grayscale.dark1};
+ }
+ `}
+`;
diff --git a/superset-frontend/plugins/legacy-plugin-chart-sunburst/src/Sunburst.css b/superset-frontend/plugins/legacy-plugin-chart-sunburst/src/Sunburst.css
deleted file mode 100644
index 0afe0a87951c..000000000000
--- a/superset-frontend/plugins/legacy-plugin-chart-sunburst/src/Sunburst.css
+++ /dev/null
@@ -1,70 +0,0 @@
-/**
- * Licensed to the Apache Software Foundation (ASF) under one
- * or more contributor license agreements. See the NOTICE file
- * distributed with this work for additional information
- * regarding copyright ownership. The ASF licenses this file
- * to you under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance
- * with the License. You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied. See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-.superset-legacy-chart-sunburst text {
- text-rendering: optimizeLegibility;
-}
-.superset-legacy-chart-sunburst path {
- stroke: #ddd;
- stroke-width: 0.5px;
-}
-.superset-legacy-chart-sunburst .center-label {
- text-anchor: middle;
- fill: #333;
- pointer-events: none;
-}
-.superset-legacy-chart-sunburst .path-abs-percent {
- font-size: 3em;
- font-weight: 700;
-}
-.superset-legacy-chart-sunburst .path-cond-percent {
- font-size: 2em;
-}
-.superset-legacy-chart-sunburst .path-metrics {
- color: #777;
-}
-.superset-legacy-chart-sunburst .path-ratio {
- color: #777;
-}
-
-.superset-legacy-chart-sunburst .breadcrumbs text {
- font-weight: 600;
- font-size: 1.2em;
- text-anchor: middle;
- fill: #333;
-}
-
-/* dashboard specific */
-.dashboard-chart.sunburst {
- overflow: visible;
-}
-.superset-legacy-chart-sunburst svg {
- overflow: visible;
-}
-.superset-legacy-chart-sunburst.m text {
- font-size: 0.55em;
-}
-.superset-legacy-chart-sunburst.s text {
- font-size: 0.45em;
-}
-.superset-legacy-chart-sunburst.l text {
- font-size: 0.75em;
-}
-.superset-legacy-chart-sunburst .path-abs-percent {
- font-weight: 700;
-}
diff --git a/superset-frontend/plugins/legacy-plugin-chart-sunburst/src/Sunburst.js b/superset-frontend/plugins/legacy-plugin-chart-sunburst/src/Sunburst.js
index 2a9cc56f51fc..4418f68bbd15 100644
--- a/superset-frontend/plugins/legacy-plugin-chart-sunburst/src/Sunburst.js
+++ b/superset-frontend/plugins/legacy-plugin-chart-sunburst/src/Sunburst.js
@@ -26,7 +26,6 @@ import {
getSequentialSchemeRegistry,
} from '@superset-ui/core';
import wrapSvgText from './utils/wrapSvgText';
-import './Sunburst.css';
const propTypes = {
// Each row is an array of [hierarchy-lvl1, hierarchy-lvl2, metric1, metric2]