From 8acdc961ff4aeff1e037c206ab0942bf9501b373 Mon Sep 17 00:00:00 2001
From: Laura Griffee <laura@mailzone.com>
Date: Tue, 1 Nov 2022 16:23:26 -0600
Subject: [PATCH 1/3] Rename z-index tokens

---
 polaris-migrator/README.md                    | 10 ++++----
 .../replace-sass-z-index.ts                   | 24 +++++++++----------
 .../tests/replace-sass-z-index.output.scss    | 12 +++++-----
 .../tests/with-namespace.output.scss          | 12 +++++-----
 .../src/components/Backdrop/Backdrop.scss     |  4 ++--
 .../src/components/DataTable/DataTable.scss   |  2 +-
 .../src/components/Filters/Filters.scss       |  2 +-
 polaris-react/src/components/Frame/Frame.scss | 14 +++++------
 .../components/ToastManager/ToastManager.scss |  2 +-
 .../src/components/MediaCard/MediaCard.scss   |  2 +-
 .../Modal/components/Dialog/Dialog.scss       |  2 +-
 .../PositionedOverlay/PositionedOverlay.scss  |  2 +-
 polaris-react/src/components/Sheet/Sheet.scss |  2 +-
 .../src/components/Sheet/Sheet.stories.tsx    |  2 +-
 .../src/components/TopBar/TopBar.scss         |  2 +-
 .../TopBar/components/Search/Search.scss      |  2 +-
 .../SearchDismissOverlay.scss                 |  2 +-
 .../components/SearchField/SearchField.scss   |  2 +-
 polaris-tokens/src/token-groups/zIndex.ts     | 24 +++++++++----------
 .../sheet-with-searchable-listbox.tsx         |  2 +-
 20 files changed, 63 insertions(+), 63 deletions(-)

diff --git a/polaris-migrator/README.md b/polaris-migrator/README.md
index 04364403d7d..505b64c84bf 100644
--- a/polaris-migrator/README.md
+++ b/polaris-migrator/README.md
@@ -185,9 +185,9 @@ npx @shopify/polaris-migrator replace-border-declarations <path>
 
 ### `replace-sass-z-index`
 
-Replace the legacy Sass `z-index()` function with the supported CSS custom property token equivalent (ex: `var(--p-z-1)`).
+Replace the legacy Sass `z-index()` function with the supported CSS custom property token equivalent (ex: `var(--p-z-index-1)`).
 
-Any invocations of `z-index()` that correspond to a z-index design-token i.e. `--p-z-1` will be replaced with a css variable declaration.
+Any invocations of `z-index()` that correspond to a z-index design-token i.e. `--p-z-index-1` will be replaced with a css variable declaration.
 This includes invocations to the `$fixed-element-stacking-order` sass map i.e. `z-index(modal, $fixed-element-stacking-order)`.
 
 ```diff
@@ -198,10 +198,10 @@ This includes invocations to the `$fixed-element-stacking-order` sass map i.e. `
 -   z-index: z-index(modal, $fixed-element-stacking-order)
 - }
 + decl-1 {
-+   z-index: var(--p-z-1);
++   z-index: var(--p-z-index-1);
 + }
 + .decl-2 {
-+   z-index: var(--p-z-11)
++   z-index: var(--p-z-index-11)
 + }
 ```
 
@@ -211,7 +211,7 @@ Generally in these instances you'll want to wrap the suggested code change in a
 ```diff
 .decl-3 {
 +  /* polaris-migrator: Unable to migrate the following expression. Please upgrade manually. */
-+  /* z-index: var(--p-z-1) + 1 */
++  /* z-index: var(--p-z-index-1) + 1 */
   z-index: z-index(content) + 1
 }
 ```
diff --git a/polaris-migrator/src/migrations/replace-sass-z-index/replace-sass-z-index.ts b/polaris-migrator/src/migrations/replace-sass-z-index/replace-sass-z-index.ts
index c4e6b46ca24..e31583697d3 100644
--- a/polaris-migrator/src/migrations/replace-sass-z-index/replace-sass-z-index.ts
+++ b/polaris-migrator/src/migrations/replace-sass-z-index/replace-sass-z-index.ts
@@ -16,21 +16,21 @@ interface PluginOptions extends Options, NamespaceOptions {}
 const processed = Symbol('processed');
 
 const zIndexMap = {
-  content: '--p-z-1',
-  overlay: '--p-z-2',
+  content: '--p-z-index-1',
+  overlay: '--p-z-index-2',
 };
 
 const fixedElementStackingOrder = {
-  'global-ribbon': '--p-z-3',
-  'top-bar': '--p-z-4',
-  'context-bar': '--p-z-5',
-  'small-screen-loading-bar': '--p-z-6',
-  'nav-backdrop': '--p-z-7',
-  nav: '--p-z-8',
-  'skip-to-content': '--p-z-9',
-  backdrop: '--p-z-10',
-  modal: '--p-z-11',
-  toast: '--p-z-12',
+  'global-ribbon': '--p-z-index-3',
+  'top-bar': '--p-z-index-4',
+  'context-bar': '--p-z-index-5',
+  'small-screen-loading-bar': '--p-z-index-6',
+  'nav-backdrop': '--p-z-index-7',
+  nav: '--p-z-index-8',
+  'skip-to-content': '--p-z-index-9',
+  backdrop: '--p-z-index-10',
+  modal: '--p-z-index-11',
+  toast: '--p-z-index-12',
 };
 
 function isValidElement<
diff --git a/polaris-migrator/src/migrations/replace-sass-z-index/tests/replace-sass-z-index.output.scss b/polaris-migrator/src/migrations/replace-sass-z-index/tests/replace-sass-z-index.output.scss
index 99ee81813a5..40bf70ba00a 100644
--- a/polaris-migrator/src/migrations/replace-sass-z-index/tests/replace-sass-z-index.output.scss
+++ b/polaris-migrator/src/migrations/replace-sass-z-index/tests/replace-sass-z-index.output.scss
@@ -4,25 +4,25 @@ $someElement: (
 
 .scenario-1 {
   /* polaris-migrator: Unable to migrate the following expression. Please upgrade manually. */
-  /* z-index: var(--p-z-1) + 1; */
+  /* z-index: var(--p-z-index-1) + 1; */
   z-index: z-index(content) + 1;
   background-color: var(--p-background);
 }
 
 .scenario-2 {
   /* polaris-migrator: Unable to migrate the following expression. Please upgrade manually. */
-  /* z-index: var(--p-z-2) + 1; */
+  /* z-index: var(--p-z-index-2) + 1; */
   z-index: z-index(overlay) + 1;
   background-color: var(--p-background);
 }
 
 .scenario-3 {
-  z-index: var(--p-z-1);
+  z-index: var(--p-z-index-1);
   background-color: var(--p-background);
 }
 
 .scenario-4 {
-  z-index: var(--p-z-2);
+  z-index: var(--p-z-index-2);
   background-color: var(--p-background);
 }
 
@@ -35,7 +35,7 @@ $someElement: (
 
 .scenario-6 {
   /* polaris-migrator: Unable to migrate the following expression. Please upgrade manually. */
-  /* z-index: calc(var(--p-z-2) + var(--p-z-1)); */
+  /* z-index: calc(var(--p-z-index-2) + var(--p-z-index-1)); */
   z-index: calc(z-index(overlay) + z-index(content));
 }
 
@@ -44,5 +44,5 @@ $someElement: (
 }
 
 .scenario-8 {
-  z-index: var(--p-z-11);
+  z-index: var(--p-z-index-11);
 }
diff --git a/polaris-migrator/src/migrations/replace-sass-z-index/tests/with-namespace.output.scss b/polaris-migrator/src/migrations/replace-sass-z-index/tests/with-namespace.output.scss
index a8bc3374fdb..d6b54dffbf6 100644
--- a/polaris-migrator/src/migrations/replace-sass-z-index/tests/with-namespace.output.scss
+++ b/polaris-migrator/src/migrations/replace-sass-z-index/tests/with-namespace.output.scss
@@ -5,25 +5,25 @@ $someElement: (
 
 .scenario-1 {
   /* polaris-migrator: Unable to migrate the following expression. Please upgrade manually. */
-  /* z-index: var(--p-z-1) + 1; */
+  /* z-index: var(--p-z-index-1) + 1; */
   z-index: legacy-polaris-v8.z-index(content) + 1;
   background-color: var(--p-background);
 }
 
 .scenario-2 {
   /* polaris-migrator: Unable to migrate the following expression. Please upgrade manually. */
-  /* z-index: var(--p-z-2) + 1; */
+  /* z-index: var(--p-z-index-2) + 1; */
   z-index: legacy-polaris-v8.z-index(overlay) + 1;
   background-color: var(--p-background);
 }
 
 .scenario-3 {
-  z-index: var(--p-z-1);
+  z-index: var(--p-z-index-1);
   background-color: var(--p-background);
 }
 
 .scenario-4 {
-  z-index: var(--p-z-2);
+  z-index: var(--p-z-index-2);
   background-color: var(--p-background);
 }
 
@@ -37,7 +37,7 @@ $someElement: (
 .scenario-6 {
   /* polaris-migrator: Unable to migrate the following expression. Please upgrade manually. */
   /* z-index: calc(
-    var(--p-z-2) + var(--p-z-1)
+    var(--p-z-index-2) + var(--p-z-index-1)
   ); */
   z-index: calc(
     legacy-polaris-v8.z-index(overlay) + legacy-polaris-v8.z-index(content)
@@ -51,5 +51,5 @@ $someElement: (
 }
 
 .scenario-8 {
-  z-index: var(--p-z-11);
+  z-index: var(--p-z-index-11);
 }
diff --git a/polaris-react/src/components/Backdrop/Backdrop.scss b/polaris-react/src/components/Backdrop/Backdrop.scss
index 7d278c9f097..0b9e69508be 100644
--- a/polaris-react/src/components/Backdrop/Backdrop.scss
+++ b/polaris-react/src/components/Backdrop/Backdrop.scss
@@ -1,6 +1,6 @@
 .Backdrop {
   position: fixed;
-  z-index: var(--p-z-10);
+  z-index: var(--p-z-index-10);
   top: 0;
   right: 0;
   bottom: 0;
@@ -17,5 +17,5 @@
 }
 
 .belowNavigation {
-  z-index: var(--p-z-7);
+  z-index: var(--p-z-index-7);
 }
diff --git a/polaris-react/src/components/DataTable/DataTable.scss b/polaris-react/src/components/DataTable/DataTable.scss
index 0d203be85d5..fed6859bc0b 100644
--- a/polaris-react/src/components/DataTable/DataTable.scss
+++ b/polaris-react/src/components/DataTable/DataTable.scss
@@ -303,7 +303,7 @@
     left: 0;
     right: 0;
     visibility: hidden;
-    z-index: var(--p-z-1);
+    z-index: var(--p-z-index-1);
   }
 
   .StickyHeaderInner {
diff --git a/polaris-react/src/components/Filters/Filters.scss b/polaris-react/src/components/Filters/Filters.scss
index fedda07c144..6f9f05515cd 100644
--- a/polaris-react/src/components/Filters/Filters.scss
+++ b/polaris-react/src/components/Filters/Filters.scss
@@ -199,7 +199,7 @@ $list-filters-footer-height: 70px;
 
 .Backdrop {
   position: fixed;
-  z-index: var(--p-z-10);
+  z-index: var(--p-z-index-10);
   top: 0;
   right: 0;
   bottom: 0;
diff --git a/polaris-react/src/components/Frame/Frame.scss b/polaris-react/src/components/Frame/Frame.scss
index a4f3fb63224..5e88e65f5be 100644
--- a/polaris-react/src/components/Frame/Frame.scss
+++ b/polaris-react/src/components/Frame/Frame.scss
@@ -19,7 +19,7 @@
 
 .Navigation {
   position: fixed;
-  z-index: var(--p-z-8);
+  z-index: var(--p-z-index-8);
   top: 0;
   left: 0;
   display: none;
@@ -126,7 +126,7 @@
 
 .TopBar {
   position: fixed;
-  z-index: var(--p-z-4);
+  z-index: var(--p-z-index-4);
   top: 0;
   left: 0;
   width: 100%;
@@ -145,7 +145,7 @@
 
 .ContextualSaveBar {
   position: fixed;
-  z-index: var(--p-z-5);
+  z-index: var(--p-z-index-5);
   top: 0;
   left: 0;
   width: 100%;
@@ -194,7 +194,7 @@
 
 .GlobalRibbonContainer {
   position: fixed;
-  z-index: var(--p-z-3);
+  z-index: var(--p-z-index-3);
   bottom: 0;
   width: 100%;
 
@@ -215,7 +215,7 @@
 
 .LoadingBar {
   position: fixed;
-  z-index: var(--p-z-6);
+  z-index: var(--p-z-index-6);
   top: 0;
   right: 0;
   left: 0;
@@ -231,7 +231,7 @@
     }
 
     .hasTopBar & {
-      z-index: var(--p-z-6);
+      z-index: var(--p-z-index-6);
     }
   }
 }
@@ -239,7 +239,7 @@
 .Skip {
   --pc-frame-skip-vertical-offset: 10px;
   position: fixed;
-  z-index: var(--p-z-9);
+  z-index: var(--p-z-index-9);
   top: var(--pc-frame-skip-vertical-offset);
   left: calc(var(--p-space-2) + var(--pc-frame-offset));
   opacity: 0;
diff --git a/polaris-react/src/components/Frame/components/ToastManager/ToastManager.scss b/polaris-react/src/components/Frame/components/ToastManager/ToastManager.scss
index 568fbdfc912..09bf9b4082a 100644
--- a/polaris-react/src/components/Frame/components/ToastManager/ToastManager.scss
+++ b/polaris-react/src/components/Frame/components/ToastManager/ToastManager.scss
@@ -10,7 +10,7 @@
 
 .ToastManager {
   position: fixed;
-  z-index: var(--p-z-12);
+  z-index: var(--p-z-index-12);
   right: 0;
   left: 0;
   text-align: center;
diff --git a/polaris-react/src/components/MediaCard/MediaCard.scss b/polaris-react/src/components/MediaCard/MediaCard.scss
index e3a835f40b2..94509c0b575 100644
--- a/polaris-react/src/components/MediaCard/MediaCard.scss
+++ b/polaris-react/src/components/MediaCard/MediaCard.scss
@@ -52,7 +52,7 @@
 
 .Popover {
   position: absolute;
-  z-index: var(--p-z-2);
+  z-index: var(--p-z-index-2);
   top: var(--p-space-4);
   right: var(--p-space-4);
 }
diff --git a/polaris-react/src/components/Modal/components/Dialog/Dialog.scss b/polaris-react/src/components/Modal/components/Dialog/Dialog.scss
index 7598d3ef0cf..55ad0b19dfc 100644
--- a/polaris-react/src/components/Modal/components/Dialog/Dialog.scss
+++ b/polaris-react/src/components/Modal/components/Dialog/Dialog.scss
@@ -11,7 +11,7 @@ $breakpoints-height-limit-up: '(min-height: #{breakpoint($height-limit + $vertic
 
 .Container {
   position: fixed;
-  z-index: var(--p-z-11);
+  z-index: var(--p-z-index-11);
   top: 0;
   right: 0;
   bottom: 0;
diff --git a/polaris-react/src/components/PositionedOverlay/PositionedOverlay.scss b/polaris-react/src/components/PositionedOverlay/PositionedOverlay.scss
index bebe3b03f53..4d0d3abaf4b 100644
--- a/polaris-react/src/components/PositionedOverlay/PositionedOverlay.scss
+++ b/polaris-react/src/components/PositionedOverlay/PositionedOverlay.scss
@@ -1,6 +1,6 @@
 .PositionedOverlay {
   position: absolute;
-  z-index: var(--p-z-2);
+  z-index: var(--p-z-index-2);
 }
 
 .fixed {
diff --git a/polaris-react/src/components/Sheet/Sheet.scss b/polaris-react/src/components/Sheet/Sheet.scss
index 0a6442a478c..8dfd072e99e 100644
--- a/polaris-react/src/components/Sheet/Sheet.scss
+++ b/polaris-react/src/components/Sheet/Sheet.scss
@@ -26,7 +26,7 @@ $sheet-desktop-width: 380px;
 
 .Container {
   position: fixed;
-  z-index: var(--p-z-11);
+  z-index: var(--p-z-index-11);
   top: 0;
   right: 0;
   bottom: 0;
diff --git a/polaris-react/src/components/Sheet/Sheet.stories.tsx b/polaris-react/src/components/Sheet/Sheet.stories.tsx
index 3b2559be066..bb9fd4b8b5f 100644
--- a/polaris-react/src/components/Sheet/Sheet.stories.tsx
+++ b/polaris-react/src/components/Sheet/Sheet.stories.tsx
@@ -345,7 +345,7 @@ export function WithSearchableListbox() {
       style={{
         padding: 'var(--p-space-4) var(--p-space-2)',
         position: 'sticky',
-        zIndex: 'var(--p-z-12)',
+        zIndex: 'var(--p-z-index-12)',
         width: '100%',
         background: 'var(--p-surface)',
       }}
diff --git a/polaris-react/src/components/TopBar/TopBar.scss b/polaris-react/src/components/TopBar/TopBar.scss
index 0612ab8f547..d3cfa98e7b8 100644
--- a/polaris-react/src/components/TopBar/TopBar.scss
+++ b/polaris-react/src/components/TopBar/TopBar.scss
@@ -106,7 +106,7 @@ $icon-size: 20px;
 }
 
 .Contents {
-  z-index: var(--p-z-1);
+  z-index: var(--p-z-index-1);
   display: flex;
   flex: 1 1 auto;
   align-items: center;
diff --git a/polaris-react/src/components/TopBar/components/Search/Search.scss b/polaris-react/src/components/TopBar/components/Search/Search.scss
index 138cc2891b7..67c8a8a13c9 100644
--- a/polaris-react/src/components/TopBar/components/Search/Search.scss
+++ b/polaris-react/src/components/TopBar/components/Search/Search.scss
@@ -4,7 +4,7 @@
 .Search {
   position: fixed;
   visibility: hidden;
-  z-index: var(--p-z-8);
+  z-index: var(--p-z-index-8);
   pointer-events: none;
   top: $top-bar-height;
   left: 0;
diff --git a/polaris-react/src/components/TopBar/components/SearchDismissOverlay/SearchDismissOverlay.scss b/polaris-react/src/components/TopBar/components/SearchDismissOverlay/SearchDismissOverlay.scss
index 422dd099ae8..46a33059327 100644
--- a/polaris-react/src/components/TopBar/components/SearchDismissOverlay/SearchDismissOverlay.scss
+++ b/polaris-react/src/components/TopBar/components/SearchDismissOverlay/SearchDismissOverlay.scss
@@ -6,7 +6,7 @@
   top: 0;
   left: 0;
   right: 0;
-  z-index: var(--p-z-7);
+  z-index: var(--p-z-index-7);
   height: 100%;
 }
 
diff --git a/polaris-react/src/components/TopBar/components/SearchField/SearchField.scss b/polaris-react/src/components/TopBar/components/SearchField/SearchField.scss
index 64ed9b9029b..65107aa3754 100644
--- a/polaris-react/src/components/TopBar/components/SearchField/SearchField.scss
+++ b/polaris-react/src/components/TopBar/components/SearchField/SearchField.scss
@@ -11,7 +11,7 @@ $search-icon-width: calc(#{$icon-size} + var(--p-space-4));
   --pc-search-field-input: 2;
   --pc-search-field-icon: 3;
   --pc-search-field-action: 3;
-  z-index: var(--p-z-11);
+  z-index: var(--p-z-index-11);
   position: relative;
   display: flex;
   flex: 1 1 auto;
diff --git a/polaris-tokens/src/token-groups/zIndex.ts b/polaris-tokens/src/token-groups/zIndex.ts
index ad41fdedc0a..a42d462127e 100644
--- a/polaris-tokens/src/token-groups/zIndex.ts
+++ b/polaris-tokens/src/token-groups/zIndex.ts
@@ -1,40 +1,40 @@
 import type {TokenGroup} from '../types';
 
 export const zIndex = {
-  'z-1': {
+  'z-index-1': {
     value: '100',
   },
-  'z-2': {
+  'z-index-2': {
     value: '400',
   },
-  'z-3': {
+  'z-index-3': {
     value: '510',
   },
-  'z-4': {
+  'z-index-4': {
     value: '512',
   },
-  'z-5': {
+  'z-index-5': {
     value: '513',
   },
-  'z-6': {
+  'z-index-6': {
     value: '514',
   },
-  'z-7': {
+  'z-index-7': {
     value: '515',
   },
-  'z-8': {
+  'z-index-8': {
     value: '516',
   },
-  'z-9': {
+  'z-index-9': {
     value: '517',
   },
-  'z-10': {
+  'z-index-10': {
     value: '518',
   },
-  'z-11': {
+  'z-index-11': {
     value: '519',
   },
-  'z-12': {
+  'z-index-12': {
     value: '520',
   },
 };
diff --git a/polaris.shopify.com/pages/examples/sheet-with-searchable-listbox.tsx b/polaris.shopify.com/pages/examples/sheet-with-searchable-listbox.tsx
index 507f56d4e21..1223aeab93a 100644
--- a/polaris.shopify.com/pages/examples/sheet-with-searchable-listbox.tsx
+++ b/polaris.shopify.com/pages/examples/sheet-with-searchable-listbox.tsx
@@ -196,7 +196,7 @@ function SheetWithSearchableListboxExample() {
       style={{
         padding: 'var(--p-space-4) var(--p-space-2)',
         position: 'sticky',
-        zIndex: 'var(--p-z-12)',
+        zIndex: 'var(--p-z-index-12)',
         width: '100%',
         background: 'var(--p-surface)',
       }}

From a7038dcfb5e644f060e46989b36a071fdb2442a3 Mon Sep 17 00:00:00 2001
From: Laura Griffee <laura@mailzone.com>
Date: Tue, 1 Nov 2022 16:39:50 -0600
Subject: [PATCH 2/3] Add migration guidance

---
 .../guides/migrating-from-v10-to-v11.md       | 19 +++++++++++++++++++
 1 file changed, 19 insertions(+)

diff --git a/documentation/guides/migrating-from-v10-to-v11.md b/documentation/guides/migrating-from-v10-to-v11.md
index d5dc182c192..8dedcf00435 100644
--- a/documentation/guides/migrating-from-v10-to-v11.md
+++ b/documentation/guides/migrating-from-v10-to-v11.md
@@ -22,3 +22,22 @@ We've removed the following deprecated prop from the Collapsible component:
 ??
 
 ## Tokens
+
+### Renamed z-index tokens
+
+We've changed the naming of our `z-index` tokens from `--p-z-*` to `--p-z-index-*` to improve clarity.
+
+| Before     | After            |
+| ---------- | ---------------- |
+| `--p-z-1`  | `--p-z-index-1`  |
+| `--p-z-2`  | `--p-z-index-2`  |
+| `--p-z-3`  | `--p-z-index-3`  |
+| `--p-z-4`  | `--p-z-index-4`  |
+| `--p-z-5`  | `--p-z-index-5`  |
+| `--p-z-6`  | `--p-z-index-6`  |
+| `--p-z-7`  | `--p-z-index-7`  |
+| `--p-z-8`  | `--p-z-index-8`  |
+| `--p-z-9`  | `--p-z-index-9`  |
+| `--p-z-10` | `--p-z-index-10` |
+| `--p-z-11` | `--p-z-index-11` |
+| `--p-z-12` | `--p-z-index-12` |

From f8be5ca479123037a13bfaaec10487efce88bb98 Mon Sep 17 00:00:00 2001
From: Alex Page <hi@alexpage.dev>
Date: Mon, 30 Jan 2023 13:08:04 +1100
Subject: [PATCH 3/3] Add migration documentation for v11

---
 .../content/tools/polaris-migrator.md         | 24 +++++++++++++++++++
 1 file changed, 24 insertions(+)

diff --git a/polaris.shopify.com/content/tools/polaris-migrator.md b/polaris.shopify.com/content/tools/polaris-migrator.md
index 5e535883a1a..653c2db3f7b 100644
--- a/polaris.shopify.com/content/tools/polaris-migrator.md
+++ b/polaris.shopify.com/content/tools/polaris-migrator.md
@@ -25,6 +25,30 @@ npx @shopify/polaris-migrator <migration> <path>
 
 ## Migrations
 
+### v11
+
+### `scss-replace-z-index`
+
+Replace the legacy SCSS `z-index()` function with the supported CSS custom property token equivalent (ex: `var(--p-z-index-1)`).
+
+Any invocations of `z-index()` that correspond to a z-index design-token i.e. `--p-z-index-1` will be replaced with a css variable declaration.
+This includes invocations to the `$fixed-element-stacking-order` sass map i.e. `z-index(modal, $fixed-element-stacking-order)`.
+
+```diff
+- .decl-1 {
+-   z-index: z-index(content);
+- }
+- .decl-2 {
+-   z-index: z-index(modal, $fixed-element-stacking-order)
+- }
++ decl-1 {
++   z-index: var(--p-z-index-1);
++ }
++ .decl-2 {
++   z-index: var(--p-z-index-11)
++ }
+```
+
 ### v10
 
 #### `styles-insert-stylelint-disable`