refactor(ui): use variables for z-index values (#3453)

packages/netlify-cms-widget-markdown/src/MarkdownControl/VisualEditor.js

@@ -7,7 +7,7 @@ import { css as coreCss, ClassNames } from '@emotion/core';
 import { get, isEmpty, debounce } from 'lodash';
 import { Value, Document, Block, Text } from 'slate';
 import { Editor as Slate } from 'slate-react';
-import { lengths, fonts } from 'netlify-cms-ui-default';
+import { lengths, fonts, zIndex } from 'netlify-cms-ui-default';
 import { editorStyleVars, EditorControlBar } from '../styles';
 import { slateToMarkdown, markdownToSlate } from '../serializers';
 import Toolbar from '../MarkdownControl/Toolbar';
@@ -28,7 +28,7 @@ const visualEditorStyles = ({ minimal }) => `
   padding: 0;
   display: flex;
   flex-direction: column;
-  z-index: 100;
+  z-index: ${zIndex.zIndex100};
 `;
 
 const InsertionPoint = styled.div`

packages/netlify-cms-widget-markdown/src/MarkdownControl/components/VoidBlock.js

@@ -1,6 +1,7 @@
 /* eslint-disable react/prop-types */
 import React from 'react';
 import { css } from '@emotion/core';
+import { zIndex } from 'netlify-cms-ui-default';
 
 const InsertionPoint = props => (
   <div
@@ -8,7 +9,7 @@ const InsertionPoint = props => (
       height: 32px;
       cursor: text;
       position: relative;
-      z-index: 1;
+      z-index: ${zIndex.zIndex1};
       margin-top: -16px;
     `}
     {...props}

packages/netlify-cms-widget-markdown/src/styles.js

@@ -1,11 +1,12 @@
 import styled from '@emotion/styled';
+import { zIndex } from 'netlify-cms-ui-default';
 
 export const editorStyleVars = {
   stickyDistanceBottom: '100px',
 };
 
 export const EditorControlBar = styled.div`
-  z-index: 200;
+  z-index: ${zIndex.zIndex200};
   position: sticky;
   top: 0;
   margin-bottom: ${editorStyleVars.stickyDistanceBottom};