From 4677923ae0047d4341bd8cdd163c1fbcf0f7230e Mon Sep 17 00:00:00 2001
From: Ryan Dowling <ryan@ryandowling.me>
Date: Thu, 20 Feb 2020 10:56:49 +1100
Subject: [PATCH] fix(styled-system__css): zIndex not being handled from theme
 as a string (#42326)

---
 types/styled-system__css/index.d.ts               | 15 ++++++++++++++-
 .../styled-system__css-tests.ts                   |  8 ++++++++
 2 files changed, 22 insertions(+), 1 deletion(-)

diff --git a/types/styled-system__css/index.d.ts b/types/styled-system__css/index.d.ts
index 1278375b40..77895561db 100644
--- a/types/styled-system__css/index.d.ts
+++ b/types/styled-system__css/index.d.ts
@@ -2,6 +2,7 @@
 // Project: https://github.com/styled-system/styled-system
 // Definitions by: Sebastian Sebald <https://github.com/sebald>
 //                 Bartosz Szewczyk <https://github.com/sztobar>
+//                 Ryan Dowling <https://github.com/RyanTheAllmighty>
 // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
 // TypeScript Version: 3.1
 
@@ -332,6 +333,18 @@ interface OverwriteCSSProperties {
      * @see https://developer.mozilla.org/docs/Web/CSS/font-weight
      */
     fontWeight?: CSS.FontWeightProperty | string;
+    /**
+     * The **`z-index`** CSS property sets the z-order of a positioned element and its descendants or flex items. Overlapping elements with a larger z-index cover those with a smaller one.
+     *
+     * **Initial value**: `auto`
+     *
+     * | Chrome | Firefox | Safari |  Edge  |  IE   |
+     * | :----: | :-----: | :----: | :----: | :---: |
+     * | **1**  |  **1**  | **1**  | **12** | **4** |
+     *
+     * @see https://developer.mozilla.org/docs/Web/CSS/z-index
+     */
+    zIndex?: CSS.ZIndexProperty | string;
 }
 
 /**
@@ -340,7 +353,7 @@ interface OverwriteCSSProperties {
  * theme function or nested) in `SystemCssProperties`.
  */
 interface AllSystemCSSProperties
-    extends Omit<CSSProperties, 'boxShadow' | 'fontWeight'>,
+    extends Omit<CSSProperties, 'boxShadow' | 'fontWeight' | 'zIndex'>,
         AliasesCSSProperties,
         OverwriteCSSProperties {}
 
diff --git a/types/styled-system__css/styled-system__css-tests.ts b/types/styled-system__css/styled-system__css-tests.ts
index 30dee88ae1..91f1532f72 100644
--- a/types/styled-system__css/styled-system__css-tests.ts
+++ b/types/styled-system__css/styled-system__css-tests.ts
@@ -15,6 +15,9 @@ const theme = {
     fontWeights: {
         bold: 600,
     },
+    zIndicies: {
+        base: 100,
+    }
 };
 
 export const themeWithVariants: Theme = {
@@ -238,3 +241,8 @@ css({
 })({
     breakpoints: ['32em', '40em'],
 });
+
+// handles theme string values for zIndex
+css({
+    zIndex: 'base',
+})(theme);