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

packages/netlify-cms-core/src/components/App/Header.js

@@ -14,6 +14,7 @@ import {
   lengths,
   shadows,
   buttons,
+  zIndex,
 } from 'netlify-cms-ui-default';
 import SettingsDropdown from 'UI/SettingsDropdown';
 
@@ -31,7 +32,7 @@ const AppHeader = props => (
       width: 100%;
       top: 0;
       background-color: ${colors.foreground};
-      z-index: 300;
+      z-index: ${zIndex.zIndex300};
       height: ${lengths.topBarHeight};
     `}
     {...props}

packages/netlify-cms-core/src/components/Collection/Entries/EntryCard.js

@@ -3,7 +3,7 @@ import styled from '@emotion/styled';
 import { connect } from 'react-redux';
 import { boundGetAsset } from 'Actions/media';
 import { Link } from 'react-router-dom';
-import { colors, colorsRaw, components, lengths } from 'netlify-cms-ui-default';
+import { colors, colorsRaw, components, lengths, zIndex } from 'netlify-cms-ui-default';
 import { VIEW_STYLE_LIST, VIEW_STYLE_GRID } from 'Constants/collectionViews';
 import { summaryFormatter } from 'Lib/formatters';
 import { keyToPathArray } from 'Lib/stringTemplate';
@@ -68,7 +68,7 @@ const CardBody = styled.div`
     content: '';
     position: absolute;
     display: block;
-    z-index: 1;
+    z-index: ${zIndex.zIndex1};
     bottom: 0;
     left: -20%;
     height: 140%;

packages/netlify-cms-core/src/components/Collection/Sidebar.js

@@ -5,7 +5,7 @@ import styled from '@emotion/styled';
 import { css } from '@emotion/core';
 import { translate } from 'react-polyglot';
 import { NavLink } from 'react-router-dom';
-import { Icon, components, colors, colorsRaw, lengths } from 'netlify-cms-ui-default';
+import { Icon, components, colors, colorsRaw, lengths, zIndex } from 'netlify-cms-ui-default';
 import { searchCollections } from 'Actions/collections';
 
 const styles = {
@@ -43,7 +43,7 @@ const SearchContainer = styled.div`
     position: absolute;
     top: 0;
     left: 6px;
-    z-index: 2;
+    z-index: ${zIndex.zIndex2};
     height: 100%;
     display: flex;
     align-items: center;
@@ -58,7 +58,7 @@ const SearchInput = styled.input`
   padding: 10px 6px 10px 32px;
   width: 100%;
   position: relative;
-  z-index: 1;
+  z-index: ${zIndex.zIndex1};
 
   &:focus {
     outline: none;

packages/netlify-cms-core/src/components/Editor/EditorInterface.js

@@ -4,7 +4,14 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
 import { css, Global } from '@emotion/core';
 import styled from '@emotion/styled';
 import SplitPane from 'react-split-pane';
-import { colors, colorsRaw, components, transitions, IconButton } from 'netlify-cms-ui-default';
+import {
+  colors,
+  colorsRaw,
+  components,
+  transitions,
+  IconButton,
+  zIndex,
+} from 'netlify-cms-ui-default';
 import { ScrollSync, ScrollSyncPane } from 'react-scroll-sync';
 import EditorControlPane from './EditorControlPane/EditorControlPane';
 import EditorPreviewPane from './EditorPreviewPane/EditorPreviewPane';
@@ -107,7 +114,7 @@ const ViewControls = styled.div`
   position: absolute;
   top: 10px;
   right: 10px;
-  z-index: 299;
+  z-index: ${zIndex.zIndex299};
 `;
 
 class EditorInterface extends Component {

packages/netlify-cms-core/src/components/Editor/EditorToolbar.js

@@ -15,6 +15,7 @@ import {
   colors,
   components,
   buttons,
+  zIndex,
 } from 'netlify-cms-ui-default';
 import { status } from 'Constants/publishModes';
 import SettingsDropdown from 'UI/SettingsDropdown';
@@ -55,7 +56,7 @@ const ToolbarContainer = styled.div`
   left: 0;
   width: 100%;
   min-width: 800px;
-  z-index: 300;
+  z-index: ${zIndex.zIndex300};
   background-color: #fff;
   height: 66px;
   display: flex;

packages/netlify-cms-core/src/components/MediaLibrary/MediaLibraryActions.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { css } from '@emotion/core';
 import styled from '@emotion/styled';
 import { FileUploadButton } from 'UI';
-import { buttons, shadows } from 'netlify-cms-ui-default';
+import { buttons, shadows, zIndex } from 'netlify-cms-ui-default';
 
 const styles = {
   button: css`
@@ -46,7 +46,7 @@ const StyledUploadButton = styled(FileUploadButton)`
     opacity: 0;
     overflow: hidden;
     position: absolute;
-    z-index: 0;
+    z-index: ${zIndex.zIndex0};
     outline: none;
   }
 `;

packages/netlify-cms-core/src/components/MediaLibrary/MediaLibrarySearch.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import styled from '@emotion/styled';
-import { Icon, lengths, colors } from 'netlify-cms-ui-default';
+import { Icon, lengths, colors, zIndex } from 'netlify-cms-ui-default';
 
 const SearchContainer = styled.div`
   height: 37px;
@@ -19,7 +19,7 @@ const SearchInput = styled.input`
   padding: 10px 6px 10px 32px;
   width: 100%;
   position: relative;
-  z-index: 1;
+  z-index: ${zIndex.zIndex1};
 
   &:focus {
     outline: none;
@@ -31,7 +31,7 @@ const SearchIcon = styled(Icon)`
   position: absolute;
   top: 50%;
   left: 6px;
-  z-index: 2;
+  z-index: ${zIndex.zIndex2};
   transform: translate(0, -50%);
 `;
 

packages/netlify-cms-core/src/components/UI/Modal.js

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { css, Global, ClassNames } from '@emotion/core';
 import ReactModal from 'react-modal';
-import { transitions, shadows, lengths } from 'netlify-cms-ui-default';
+import { transitions, shadows, lengths, zIndex } from 'netlify-cms-ui-default';
 
 const ReactModalGlobalStyles = () => (
   <Global
@@ -29,7 +29,7 @@ const styleStrings = {
     }
   `,
   overlay: `
-    z-index: 99999;
+    z-index: ${zIndex.zIndex99999};
     position: fixed;
     top: 0;
     left: 0;

packages/netlify-cms-core/src/components/UI/Toast.js

@@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
 import { css, Global } from '@emotion/core';
 import { translate } from 'react-polyglot';
 import reduxNotificationsStyles from 'redux-notifications/lib/styles.css';
-import { shadows, colors, lengths } from 'netlify-cms-ui-default';
+import { shadows, colors, lengths, zIndex } from 'netlify-cms-ui-default';
 
 const ReduxNotificationsGlobalStyles = () => (
   <Global
@@ -12,7 +12,7 @@ const ReduxNotificationsGlobalStyles = () => (
       ${reduxNotificationsStyles};
 
       .notif__container {
-        z-index: 10000;
+        z-index: ${zIndex.zIndex10000};
         white-space: pre-wrap;
       }
     `}