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

packages/netlify-cms-ui-default/src/Dropdown.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { css } from '@emotion/core';
 import styled from '@emotion/styled';
 import { Wrapper, Button as DropdownButton, Menu, MenuItem } from 'react-aria-menubutton';
-import { buttons, components } from './styles';
+import { buttons, components, zIndex } from './styles';
 import Icon from './Icon';
 
 const StyledWrapper = styled(Wrapper)`
@@ -37,7 +37,7 @@ const DropdownList = styled.ul`
   top: 0;
   left: 0;
   min-width: 100%;
-  z-index: 2;
+  z-index: ${zIndex.zIndex2};
 
   ${props => css`
     width: ${props.width};

packages/netlify-cms-ui-default/src/Loader.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import styled from '@emotion/styled';
 import { css, keyframes } from '@emotion/core';
 import CSSTransition from 'react-transition-group/CSSTransition';
-import { colors } from './styles';
+import { colors, zIndex } from './styles';
 
 const styles = {
   disabled: css`
@@ -122,7 +122,7 @@ const StyledLoader = styled(Loader)`
   left: 50%;
   margin: 0px;
   text-align: center;
-  z-index: 1000;
+  z-index: ${zIndex.zIndex1000};
   transform: translateX(-50%) translateY(-50%);
 
   &:before,

packages/netlify-cms-ui-default/src/index.js

@@ -21,6 +21,7 @@ import {
   borders,
   transitions,
   effects,
+  zIndex,
   reactSelectStyles,
   GlobalStyles,
 } from './styles';
@@ -53,6 +54,7 @@ export const NetlifyCmsUiDefault = {
   borders,
   transitions,
   effects,
+  zIndex,
   reactSelectStyles,
   GlobalStyles,
 };
@@ -84,6 +86,7 @@ export {
   borders,
   transitions,
   effects,
+  zIndex,
   reactSelectStyles,
   GlobalStyles,
   GoBackButton,

packages/netlify-cms-ui-default/src/styles.js

@@ -380,6 +380,20 @@ const reactSelectStyles = {
   }),
 };
 
+const zIndex = {
+  zIndex0: 0,
+  zIndex1: 1,
+  zIndex2: 2,
+  zIndex10: 10,
+  zIndex100: 100,
+  zIndex200: 200,
+  zIndex299: 299,
+  zIndex300: 300,
+  zIndex1000: 1000,
+  zIndex10000: 10000,
+  zIndex99999: 99999,
+};
+
 const GlobalStyles = () => (
   <Global
     styles={css`
@@ -480,6 +494,7 @@ export {
   borders,
   transitions,
   effects,
+  zIndex,
   reactSelectStyles,
   GlobalStyles,
 };