diff --git a/src/platform/plugins/shared/vis_types/timeseries/public/application/components/_markdown_editor.scss b/src/platform/plugins/shared/vis_types/timeseries/public/application/components/_markdown_editor.scss
deleted file mode 100644
index 57ffb26cf55ca..0000000000000
--- a/src/platform/plugins/shared/vis_types/timeseries/public/application/components/_markdown_editor.scss
+++ /dev/null
@@ -1,28 +0,0 @@
-.tvbMarkdownEditor {
-  display: flex;
-  background-color: $euiColorEmptyShade;
-  height: 500px;
-}
-
-.tvbMarkdownEditor__editor,
-.tvbMarkdownEditor__variables {
-  width: 50%;
-  flex: 1 0 auto;
-}
-
-.tvbMarkdownEditor__editor {
-  border-right: 2px solid $euiColorLightestShade;
-}
-
-.tvbMarkdownEditor__variables {
-  padding: $euiSizeS;
-  overflow: auto;
-}
-
-.tvbMarkdownEditor__noVariables {
-  display: block;
-  padding-bottom: $euiSizeXXL;
-  padding-top: $euiSizeXXL - $euiSizeL;
-  text-align: center;
-  border-bottom: $euiBorderThin;
-}
diff --git a/src/platform/plugins/shared/vis_types/timeseries/public/application/components/markdown_editor.js b/src/platform/plugins/shared/vis_types/timeseries/public/application/components/markdown_editor.js
index 1060ea8135f51..a1d718b839df1 100644
--- a/src/platform/plugins/shared/vis_types/timeseries/public/application/components/markdown_editor.js
+++ b/src/platform/plugins/shared/vis_types/timeseries/public/application/components/markdown_editor.js
@@ -13,6 +13,7 @@
 import PropTypes from 'prop-types';
 
 import React, { Component } from 'react';
+import { css } from '@emotion/react';
 import { createTickFormatter } from './lib/tick_formatter';
 import { convertSeriesToVars } from './lib/convert_series_to_vars';
 import _ from 'lodash';
@@ -25,7 +26,33 @@ import { FormattedMessage } from '@kbn/i18n-react';
 import { getDataViewsStart } from '../../services';
 import { fetchIndexPattern } from '../../../common/index_patterns_utils';
 
-import './_markdown_editor.scss';
+const editorStyle = ({ euiTheme }) => css`
+  display: flex;
+  background-color: ${euiTheme.colors.emptyShade};
+  height: 500px;
+`;
+
+const panelStyle = css`
+  width: 50%;
+  flex: 1 0 auto;
+`;
+
+const editorPanelStyle = ({ euiTheme }) => css`
+  border-right: 2px solid ${euiTheme.colors.lightestShade};
+`;
+
+const variablesPanelStyle = ({ euiTheme }) => css`
+  padding: ${euiTheme.size.s};
+  overflow: auto;
+`;
+
+const noVariablesStyle = ({ euiTheme }) => css`
+  display: block;
+  padding-bottom: ${euiTheme.size.xxl};
+  padding-top: calc(${euiTheme.size.xxl} - ${euiTheme.size.l});
+  text-align: center;
+  border-bottom: ${euiTheme.border.thin};
+`;
 
 export class MarkdownEditor extends Component {
   constructor(props) {
@@ -122,8 +149,8 @@ export class MarkdownEditor extends Component {
     walk(variables);
 
     return (
-      <div className="tvbMarkdownEditor">
-        <div className="tvbMarkdownEditor__editor">
+      <div className="tvbMarkdownEditor" css={editorStyle}>
+        <div className="tvbMarkdownEditor__editor" css={[panelStyle, editorPanelStyle]}>
           <CodeEditor
             editorDidMount={this.handleOnLoad}
             languageId={MARKDOWN_LANG_ID}
@@ -135,7 +162,7 @@ export class MarkdownEditor extends Component {
             onChange={this.handleChange}
           />
         </div>
-        <div className="tvbMarkdownEditor__variables">
+        <div className="tvbMarkdownEditor__variables" css={[panelStyle, variablesPanelStyle]}>
           <EuiText>
             <p>
               <FormattedMessage
@@ -184,6 +211,7 @@ export class MarkdownEditor extends Component {
               size="xxs"
               className="tsvbMarkdownVariablesTable__noVariables"
               data-test-subj="tvbMarkdownEditor__noVariables"
+              css={noVariablesStyle}
             >
               <span>
                 <FormattedMessage