refactor: Removes the CSS files from the Parallel Coordinates plugin (#19539)

* refactor: Removes the CSS files from the Parallel Coordinates plugin

* Adds test

* Fixes indentation

superset-frontend/plugins/legacy-plugin-chart-parallel-coordinates/src/ReactParallelCoordinates.jsx

@@ -17,7 +17,7 @@
  * under the License.
  */
 import React from 'react';
-import { styled, reactify } from '@superset-ui/core';
+import { styled, reactify, addAlpha } from '@superset-ui/core';
 import PropTypes from 'prop-types';
 import Component from './ParallelCoordinates';
 
@@ -34,14 +34,93 @@ ParallelCoordianes.propTypes = {
 };
 
 export default styled(ParallelCoordianes)`
-  .superset-legacy-chart-parallel-coordinates {
-    div.grid {
-      overflow: auto;
-      div.row {
-        &:hover {
-          background-color: ${({ theme }) => theme.colors.grayscale.light2};
+  ${({ theme }) => `
+    .superset-legacy-chart-parallel-coordinates {
+      div.grid {
+        overflow: auto;
+        div.row {
+          &:hover {
+            background-color: ${theme.colors.grayscale.light2};
+          }
         }
       }
     }
-  }
+    .parcoords svg,
+    .parcoords canvas {
+      font-size: ${theme.typography.sizes.s}px;
+      position: absolute;
+    }
+    .parcoords > canvas {
+      pointer-events: none;
+    }
+
+    .parcoords text.label {
+      font: 100%;
+      font-size: ${theme.typography.sizes.s}px;
+      cursor: drag;
+    }
+    .parcoords rect.background {
+      fill: transparent;
+    }
+    .parcoords rect.background:hover {
+      fill: ${addAlpha(theme.colors.grayscale.base, 0.2)};
+    }
+    .parcoords .resize rect {
+      fill: ${addAlpha(theme.colors.grayscale.dark2, 0.1)};
+    }
+    .parcoords rect.extent {
+      fill: ${addAlpha(theme.colors.grayscale.light5, 0.25)};
+      stroke: ${addAlpha(theme.colors.grayscale.dark2, 0.6)};
+    }
+    .parcoords .axis line,
+    .parcoords .axis path {
+      fill: none;
+      stroke: ${theme.colors.grayscale.dark1};
+      shape-rendering: crispEdges;
+    }
+    .parcoords canvas {
+      opacity: 1;
+      -moz-transition: opacity 0.3s;
+      -webkit-transition: opacity 0.3s;
+      -o-transition: opacity 0.3s;
+    }
+    .parcoords canvas.faded {
+      opacity: ${theme.opacity.mediumLight};
+    }
+    .parcoords {
+      -webkit-touch-callout: none;
+      -webkit-user-select: none;
+      -khtml-user-select: none;
+      -moz-user-select: none;
+      -ms-user-select: none;
+      user-select: none;
+      background-color: ${theme.colors.grayscale.light5};
+    }
+
+    /* data table styles */
+    .parcoords .row,
+    .parcoords .header {
+      clear: left;
+      font-size: ${theme.typography.sizes.s}px;
+      line-height: 18px;
+      height: 18px;
+      margin: 0px;
+    }
+    .parcoords .row:nth-child(odd) {
+      background: ${addAlpha(theme.colors.grayscale.dark2, 0.05)};
+    }
+    .parcoords .header {
+      font-weight: ${theme.typography.weights.bold};
+    }
+    .parcoords .cell {
+      float: left;
+      overflow: hidden;
+      white-space: nowrap;
+      width: 100px;
+      height: 18px;
+    }
+    .parcoords .col-0 {
+      width: 180px;
+    }
+  `}
 `;