@codecademy/gamut-styles

Index: package/dist/themes/admin.d.ts
===================================================================
--- package/dist/themes/admin.d.ts
+++ package/dist/themes/admin.d.ts
@@ -33,15 +33,21 @@
     sm: string;
     md: string;
     lg: string;
     xl: string;
-}> & import("@codecademy/variance/dist/createTheme/types").Merge<Record<"elements", Record<"elements", import("@codecademy/variance").KeyAsVariable<{
-    readonly headerHeight: {
-        readonly base: "4rem";
-        readonly md: "5rem";
-    };
-    readonly headerZ: 15;
-}, "elements">>> & import("@codecademy/variance/dist/createTheme/types").Merge<import("@codecademy/variance/dist/createTheme/types").MergeTheme<import("@codecademy/variance/dist/createTheme/types").MergeTheme<Record<"breakpoints", {
+}> & import("@codecademy/variance/dist/createTheme/types").Merge<Record<"zIndices", Record<"zIndices", import("@codecademy/variance").KeyAsVariable<{
+    readonly underlay: -100;
+    readonly base: 0;
+    readonly foreground: 100;
+    readonly portal: 200;
+    readonly widget: 300;
+    readonly appBar: 400;
+    readonly flyout: 500;
+    readonly modal: 600;
+    readonly popover: 700;
+    readonly toaster: 800;
+    readonly tooltip: 900;
+}, "zIndices">>> & import("@codecademy/variance/dist/createTheme/types").Merge<import("@codecademy/variance/dist/createTheme/types").MergeTheme<import("@codecademy/variance/dist/createTheme/types").MergeTheme<import("@codecademy/variance/dist/createTheme/types").MergeTheme<Record<"breakpoints", {
     c_base: string;
     c_xs: string;
     c_sm: string;
     c_md: string;
@@ -119,10 +125,23 @@
         readonly headerHeight: {
             readonly base: "4rem";
             readonly md: "5rem";
         };
-        readonly headerZ: 15;
+        readonly headerZ: 400;
     };
+    zIndices: {
+        readonly underlay: -100;
+        readonly base: 0;
+        readonly foreground: 100;
+        readonly portal: 200;
+        readonly widget: 300;
+        readonly appBar: 400;
+        readonly flyout: 500;
+        readonly modal: 600;
+        readonly popover: 700;
+        readonly toaster: 800;
+        readonly tooltip: 900;
+    };
 } & import("@codecademy/variance/dist/createTheme/types").PrivateThemeKeys, Record<"colors", import("@codecademy/variance").KeyAsVariable<import("@codecademy/variance").LiteralPaths<{
     readonly beige: "#FFF0E5";
     readonly blue: "#1557FF";
     readonly green: "#008A27";
@@ -543,9 +562,15 @@
     }, "-">) => string;
 }>, Record<"borders", import("@codecademy/variance").LiteralPaths<{
     1: string;
     2: string;
-}, "-">>>, import("@codecademy/variance/dist/createTheme/types").PrivateThemeKeys> & import("@codecademy/variance/dist/createTheme/types").PrivateThemeKeys, Record<"name", string>> & import("@codecademy/variance/dist/createTheme/types").PrivateThemeKeys, {
+}, "-">>>, import("@codecademy/variance/dist/createTheme/types").PrivateThemeKeys, Record<"elements", Record<"elements", import("@codecademy/variance").KeyAsVariable<{
+    readonly headerHeight: {
+        readonly base: "4rem";
+        readonly md: "5rem";
+    };
+    readonly headerZ: 400;
+}, "elements">>>>, import("@codecademy/variance/dist/createTheme/types").PrivateThemeKeys> & import("@codecademy/variance/dist/createTheme/types").PrivateThemeKeys, Record<"name", string>> & import("@codecademy/variance/dist/createTheme/types").PrivateThemeKeys, {
     colors: import("@codecademy/variance").KeyAsVariable<import("@codecademy/variance").LiteralPaths<{
         primary: {
             _: "blue-500";
             hover: "blue-400";