[TSVB/SCSS] Migrate _vis_types.scss file

src/platform/plugins/shared/vis_types/timeseries/public/application/components/vis_types/_vis_types.ts

@@ -0,0 +1,43 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the "Elastic License
+ * 2.0", the "GNU Affero General Public License v3.0 only", and the "Server Side
+ * Public License v 1"; you may not use this file except in compliance with, at
+ * your election, the "Elastic License 2.0", the "GNU Affero General Public
+ * License v3.0 only", or the "Server Side Public License, v 1".
+ */
+
+import { css } from '@emotion/react';
+
+export const visStyles = css`
+  display: flex;
+  flex-direction: column;
+  flex: 1 1 100%;
+  position: relative;
+
+  .tvbVisTimeSeries {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+  }
+
+  .tvbVisTimeSeriesDark {
+    .echReactiveChart_unavailable {
+      color: #dfe5ef;
+    }
+    .echLegendItem {
+      color: #dfe5ef;
+    }
+  }
+
+  .tvbVisTimeSeriesLight {
+    .echReactiveChart_unavailable {
+      color: #343741;
+    }
+    .echLegendItem {
+      color: #343741;
+    }
+  }
+`;

src/platform/plugins/shared/vis_types/timeseries/public/application/components/vis_types/gauge/vis.js

@@ -18,6 +18,7 @@ import { Gauge } from '../../../visualizations/views/gauge';
 import { getLastValue } from '../../../../../common/last_value_utils';
 import { DATA_FORMATTERS } from '../../../../../common/enums';
 import { getOperator, shouldOperate } from '../../../../../common/operators_utils';
+import { visStyles } from '../_vis_types';
 
 function getColors(props) {
   const { model, visData } = props;
@@ -84,7 +85,7 @@ function GaugeVisualization(props) {
   if (model.gauge_max != null) params.max = model.gauge_max;
 
   return (
-    <div className="tvbVis" style={style}>
+    <div className="tvbVis" css={visStyles} style={style}>
       <Gauge {...params} />
     </div>
   );

src/platform/plugins/shared/vis_types/timeseries/public/application/components/vis_types/index.ts

@@ -17,8 +17,6 @@ import { TimeseriesVisParams } from '../../../types';
 import type { TimeseriesVisData, PanelData } from '../../../../common/types';
 import { FetchedIndexPattern } from '../../../../common/types';
 
-import './_vis_types.scss';
-
 /**
  * Lazy load each visualization type, since the only one is presented on the screen at the same time.
  * Disable typescript errors since the components are not typed yet.

src/platform/plugins/shared/vis_types/timeseries/public/application/components/vis_types/markdown/vis.js

@@ -18,6 +18,7 @@ import { ErrorComponent } from '../../error';
 import { replaceVars } from '../../lib/replace_vars';
 import { convertSeriesToVars } from '../../lib/convert_series_to_vars';
 import { isBackgroundInverted } from '../../../lib/set_is_reversed';
+import { visStyles } from '../_vis_types';
 
 import './_markdown.scss';
 
@@ -93,7 +94,7 @@ function MarkdownVisualization(props) {
     );
   }
   return (
-    <div className="tvbVis" style={style}>
+    <div className="tvbVis" css={visStyles} style={style}>
       {markdown}
     </div>
   );

src/platform/plugins/shared/vis_types/timeseries/public/application/components/vis_types/metric/vis.js

@@ -19,6 +19,7 @@ import { DATA_FORMATTERS } from '../../../../../common/enums';
 import { getLastValue } from '../../../../../common/last_value_utils';
 import { isBackgroundInverted } from '../../../lib/set_is_reversed';
 import { getOperator, shouldOperate } from '../../../../../common/operators_utils';
+import { visStyles } from '../_vis_types';
 
 function getColors(props) {
   const { model, visData } = props;
@@ -76,7 +77,7 @@ function MetricVisualization(props) {
   }
 
   return (
-    <div className="tvbVis" style={style}>
+    <div className="tvbVis" css={visStyles} style={style}>
       <Metric {...params} initialRender={props.initialRender} />
     </div>
   );

src/platform/plugins/shared/vis_types/timeseries/public/application/components/vis_types/table/vis.js

@@ -23,6 +23,7 @@ import { FormattedMessage } from '@kbn/i18n-react';
 import { getFieldFormats, getCoreStart } from '../../../../services';
 import { DATA_FORMATTERS } from '../../../../../common/enums';
 import { FIELD_FORMAT_IDS } from '@kbn/field-formats-plugin/common';
+import { visStyles } from '../_vis_types';
 
 import {
   createCachedFieldValueFormatter,
@@ -274,7 +275,7 @@ class TableVis extends Component {
     return (
       <RenderCounter initialRender={initialRender}>
         <RedirectAppLinks coreStart={getCoreStart()} className="tvbVis" data-test-subj="tableView">
-          <div className="tvbVis" data-test-subj="tableView">
+          <div className="tvbVis" css={visStyles} data-test-subj="tableView">
             <table className="table">
               <thead>{header}</thead>
               <tbody>{rows}</tbody>

src/platform/plugins/shared/vis_types/timeseries/public/application/components/vis_types/timeseries/vis.js

@@ -27,6 +27,7 @@ import { createIntervalBasedFormatter } from '../../lib/create_interval_based_fo
 import { STACKED_OPTIONS } from '../../../visualizations/constants';
 import { getCoreStart } from '../../../../services';
 import { DATA_FORMATTERS } from '../../../../../common/enums';
+import { visStyles } from '../_vis_types';
 
 class TimeseriesVisualization extends Component {
   static propTypes = {
@@ -258,7 +259,7 @@ class TimeseriesVisualization extends Component {
     });
 
     return (
-      <div className="tvbVis">
+      <div className="tvbVis" css={visStyles}>
         <div className="tvbVisTimeSeries">
           <TimeSeries
             series={series}

src/platform/plugins/shared/vis_types/timeseries/public/application/components/vis_types/top_n/vis.js

@@ -22,6 +22,7 @@ import { DATA_FORMATTERS } from '../../../../../common/enums';
 import { getOperator, shouldOperate } from '../../../../../common/operators_utils';
 import { ExternalUrlErrorModal } from '../../lib/external_url_error_modal';
 import { SERIES_SEPARATOR } from '../../../../../common/constants';
+import { visStyles } from '../_vis_types';
 
 function sortByDirection(data, direction, fn) {
   if (direction === 'desc') {
@@ -101,7 +102,7 @@ function TopNVisualization(props) {
   const closeExternalUrlErrorModal = useCallback(() => setAccessDeniedDrilldownUrl(null), []);
 
   return (
-    <div className="tvbVis" style={style}>
+    <div className="tvbVis" style={style} css={visStyles}>
       <TopN {...params} initialRender={props.initialRender} />
       {accessDeniedDrilldownUrl && (
         <ExternalUrlErrorModal