styles: Apply Codex z-index tokens

Applying central Codex design tokens in new architecture.
This replaces all existing MN `z-index` tokens and comments on
replacement choice.

Bug: T285592
Change-Id: I23d794566898946a500c10713802d8dfaad993d1

includes/Skins/ToggleList/ToggleList.less

@@ -4,7 +4,7 @@
 	// Always occlude the checkbox. The checkbox display cannot be none since its focus state is used
 	// for other selectors.
 	position: absolute;
-	z-index: @z-indexOccluded;
+	z-index: @z-index-bottom;
 	opacity: 0;
 }
 
@@ -17,7 +17,7 @@
 	overflow-y: auto;
 	//
 	// The menu floats over content but below overlays.
-	z-index: @z-indexDrawer;
+	z-index: @z-index-dropdown;
 	//
 	box-shadow: 0 5px 17px 0 rgba( 0, 0, 0, 0.24 ), 0 0 1px #a2a9b1;
 	//

minerva.less/minerva.variables.less

@@ -100,14 +100,6 @@
 // Wiki specific variables
 @infoboxWidth: 320px;
 
-// z-index:
-@z-indexOccluded: -1;
-@z-indexBase: 0;
-@z-indexAboveContent: 1;
-@z-indexDrawer: 2;
-@z-indexOverlay: 3;
-@z-indexOverOverlay: 4;
-
 // Animations & Transitions
 // Transitions > Timing Functions
 @transition-timing-function-menu: ease-in-out;

resources/skins.minerva.base.styles/common.less

@@ -41,5 +41,5 @@
 	// triggers a browser bug which affects the edit cards in Visual Editor:
 	// https://bugs.chromium.org/p/chromium/issues/detail?id=20574
 	position: relative;
-	z-index: @z-indexBase;
+	z-index: @z-index-base;
 }

resources/skins.minerva.base.styles/content/templates/ambox.less

@@ -112,14 +112,14 @@ table.ambox {
 		position: absolute;
 		right: @amboxPadding;
 		bottom: @amboxPadding;
-		z-index: @z-indexBase;
+		z-index: @z-index-base;
 		line-height: @line-height-content; // sets height for fade & aligns "learn more" to ambox text.
 
 		/* creates a fade under the "learn more" button to avoid overlapping text. */
 		&::before {
 			content: '';
 			position: absolute;
-			z-index: @z-indexOccluded;
+			z-index: @z-index-bottom;
 			bottom: 0;
 			right: 0;
 			width: 100%; // width & height defined by length of "learn more".

resources/skins.minerva.base.styles/content/toc.less

@@ -57,7 +57,7 @@
 	top: 0;
 	right: 0;
 	height: @toc-large-icon;
-	z-index: @z-indexAboveContent;
+	z-index: @z-index-stacking-1;
 }
 
 // Do stuff we only need to do with JS

resources/skins.minerva.mainMenu.styles/MainMenu.less

@@ -17,7 +17,7 @@
 	}
 	// It should always be possible to dismiss the menu by tapping outside of it.
 	max-width: 80%;
-	z-index: @z-indexDrawer;
+	z-index: @z-index-off-canvas;
 	// Add vertical scrollbar as needed.
 	overflow-y: auto;
 	background-color: @background-color-light;
@@ -37,7 +37,7 @@
 	opacity: 0;
 	bottom: 0;
 	background: @semiTransparent;
-	z-index: @z-indexAboveContent;
+	z-index: @z-index-off-canvas-backdrop;
 	// don't use display: none because it's not animatable
 	visibility: hidden;
 }

resources/skins.minerva.scripts/styles.less

@@ -10,7 +10,7 @@
 	opacity: 0;
 	bottom: 0;
 	background: @semiTransparent;
-	z-index: @z-indexAboveContent;
+	z-index: @z-index-overlay-backdrop;
 	// don't use display: none because it's not animatable
 	visibility: hidden;
 	transition: opacity @transition-duration-base ease-in-out;

skinStyles/mediawiki.action.history.styles.less

@@ -26,7 +26,7 @@
 		background: @background-color-base;
 		.position-sticky();
 		top: 0;
-		z-index: @z-indexAboveContent;
+		z-index: @z-index-sticky;
 
 		// "Compare selected revisions" button
 		.mw-history-compareselectedversions-button {

skinStyles/mediawiki.searchSuggest/index.less

@@ -29,7 +29,7 @@
 				left: 30px;
 				top: 10px;
 				right: 0;
-				z-index: @z-indexDrawer;
+				z-index: @z-index-fixed;
 			}
 		}
 	}

skinStyles/mobile.startup/drawers.less

@@ -29,7 +29,7 @@
 	// don't allow notifications to cover the entire screen
 	max-height: 50%;
 	// needs to be higher than for overlays to show on top of overlays
-	z-index: @z-indexOverOverlay;
+	z-index: @z-index-toast-notification;
 }
 
 .mw-notification,

skinStyles/mobile.startup/toast.less

@@ -41,9 +41,9 @@
 }
 
 .mw-notification-area {
-	z-index: @z-indexOverOverlay;
 	position: fixed;
 	bottom: 0;
+	z-index: @z-index-toast-notification;
 	width: 100%;
 }