refactor(ui-modal,shared-types): remove unused theme variable, add docs on how to change Modal's z-index

the theme variable was not used anywhere

Fixes INSTUI-4536

Author: matyasf

packages/shared-types/src/ComponentThemeVariables.ts

@@ -834,7 +834,6 @@ export type ModalTheme = {
   mediumMaxWidth: Breakpoints['medium']
   largeMaxWidth: Breakpoints['large']
   boxShadow: Shadows['depth3']
-  zIndex: Stacking['topmost']
 }
 
 export type TransitionTheme = {

packages/ui-modal/src/Modal/README.md

@@ -1145,6 +1145,29 @@ const WrappedModalBody = withLogger(Modal.Body)
 render(<Example />)
 ```
 
+### Changing the Modal's z-index
+
+You can do this with the `insertAt` prop or a theme override:
+
+```jsx
+---
+  type: code
+---
+<InstUISettingsProvider
+      theme={{
+        themeOverrides: {
+            componentOverrides: {
+              Mask: {
+                zIndex: 555,
+              }
+            }
+          }
+      }}
+    >
+  <Modal />
+</InstUISettingsProvider>
+```
+
 ### Guidelines
 
 ```js

packages/ui-modal/src/Modal/theme.ts

@@ -31,7 +31,7 @@ import { ModalTheme } from '@instructure/shared-types'
  * @return {Object} The final theme object with the overrides and component variables
  */
 const generateComponentTheme = (theme: Theme): ModalTheme => {
-  const { colors, typography, borders, breakpoints, shadows, stacking } = theme
+  const { colors, typography, borders, breakpoints, shadows } = theme
 
   const componentVariables: ModalTheme = {
     fontFamily: typography?.fontFamily,
@@ -48,9 +48,7 @@ const generateComponentTheme = (theme: Theme): ModalTheme => {
     mediumMaxWidth: breakpoints?.medium,
     largeMaxWidth: breakpoints?.large,
 
-    boxShadow: shadows?.depth3,
-
-    zIndex: stacking?.topmost
+    boxShadow: shadows?.depth3
   }
 
   return {