feat(ui-modal): add margin to fullscreen modal

docs/upgrading/upgrade-guide.md

@@ -961,6 +961,7 @@ type: embed
   added={[
     {name:"borderWidth",note:""},
     {name:"inverseBorderColor",note:""},
+    {name:"fullScreenMargin",note:""},
   ]}
   changed={[
     {oldName:"background",newName:"backgroundColor",note:""},

package.json

@@ -97,6 +97,7 @@
     "jsdom": "^26.1.0",
     "lerna": "9.0.7",
     "lint-staged": "^16.4.0",
+    "prettier": "2.8.8",
     "react": "18.3.1",
     "typescript": "6.0.3",
     "typescript-eslint": "^8.59.1",

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

@@ -148,8 +148,8 @@ const Example = () => {
         background="primary-inverse"
         margin="medium auto none"
         display="block"
-        width="25rem"
-        height="25rem"
+        width="30rem"
+        height="30rem"
         borderWidth="large"
         id="constrainExample"
       ></View>
@@ -464,6 +464,9 @@ const Example = () => {
       <Modal
         open={open}
         size={smallViewport ? 'fullscreen' : 'small'}
+        // Simulate real small-screen behavior by themeOverride.
+        // On actual small screens this happens automatically, so no theme override is needed.
+        themeOverride={smallViewport ? { fullScreenMargin: '0', borderRadius: '0' } : undefined}
         onDismiss={(event) => {
           if (event.target.id !== 'toggleViewportButton') {
             setOpen(false)

packages/ui-modal/src/Modal/v2/styles.ts

@@ -23,7 +23,7 @@
  */
 
 import { boxShadowObjectsToCSSString } from '@instructure/ui-themes'
-import type { NewComponentTypes } from '@instructure/ui-themes'
+import type { NewComponentTypes, SharedTokens } from '@instructure/ui-themes'
 import type { ModalProps, ModalStyle } from './props'
 
 /**
@@ -39,7 +39,8 @@ import type { ModalProps, ModalStyle } from './props'
  */
 const generateStyle = (
   componentTheme: ReturnType<NewComponentTypes['Modal']>,
-  props: ModalProps
+  props: ModalProps,
+  sharedTokens: SharedTokens
 ): ModalStyle => {
   const { size, variant, overflow } = props
 
@@ -75,7 +76,17 @@ const generateStyle = (
       height: '100%',
       boxShadow: 'none',
       border: 'none',
-      borderRadius: 0
+      borderRadius: 0,
+      // On larger screens, inset the fullscreen modal from the viewport edge
+      // for a11y: the Mask flex-centers it, so `flex: 1` + `alignSelf: stretch`
+      // (auto height) gap it evenly via the margin; corners/shadow restored too.
+      [`@media screen and (min-width: ${sharedTokens.breakpoints.md})`]: {
+        margin: componentTheme.fullScreenMargin,
+        height: 'auto',
+        alignSelf: 'stretch',
+        borderRadius: componentTheme.borderRadius,
+        boxShadow: boxShadowObjectsToCSSString(componentTheme.boxShadow)
+      }
     }
   }
   const backgroundStyles =