instructure · git-nandor · Feb 11, 2026 · Feb 19, 2026
diff --git a/docs/guides/upgrade-guide.md b/docs/guides/upgrade-guide.md
@@ -389,6 +389,80 @@ type: embed
   ]}
 />
 
+```
+### Modal
+
+#### Modal
+
+```js
+---
+type: embed
+---
+<V12ChangelogTable
+  added={[
+    {name:"borderWidth",note:""},
+    {name:"inverseBorderColor",note:""},
+  ]}
+  changed={[
+    {oldName:"background",newName:"backgroundColor",note:""},
+    {oldName:"inverseBackground",newName:"inverseBackgroundColor",note:""},
+  ]}
+/>
+
+```
+
+#### Modal Body
+
+```js
+---
+type: embed
+---
+<V12ChangelogTable
+  added={[
+    {name:"padding",note:""},
+    {name:"paddingCompact",note:""},
+  ]}
+  changed={[
+    {oldName:"inverseBackground",newName:"inverseBackgroundColor",note:""},
+  ]}
+/>
+
+```
+
+#### Modal Footer
+
+```js
+---
+type: embed
+---
+<V12ChangelogTable
+  added={[
+    {name:"paddingCompact",note:""},
+  ]}
+  changed={[
+    {oldName:"background",newName:"backgroundColor",note:""},
+    {oldName:"inverseBackground",newName:"inverseBackgroundColor",note:""},
+  ]}
+/>
+
+```
+
+#### Modal Header
+
+```js
+---
+type: embed
+---
+<V12ChangelogTable
+  added={[
+    {name:"borderWith",note:""},
+  ]}
+  changed={[
+    {oldName:"background",newName:"backgroundColor",note:""},
+    {oldName:"inverseBackground",newName:"inverseBackgroundColor",note:""},
+  ]}
+/>
+
 ```
 
 ### NumberInput

diff --git a/packages/ui-modal/src/Modal/ModalBody/__tests__/ModalBody.test.tsx b/packages/ui-modal/src/Modal/ModalBody/__tests__/ModalBody.test.tsx
@@ -32,7 +32,6 @@ import { View } from '@instructure/ui-view'
 import type { ViewOwnProps } from '@instructure/ui-view'
 
 import { ModalBody } from '../index'
-import generateComponentTheme from '../theme'
 
 const BODY_TEXT = 'Modal-body-text'
 
@@ -45,7 +44,7 @@ describe('<ModalBody />', () => {
   })
 
   it('should set inverse styles', async () => {
-    const themeVariables = generateComponentTheme(canvas)
+    const themeVariables = canvas.newTheme.components.ModalBody
     const { findByText } = render(
       <ModalBody variant="inverse">{BODY_TEXT}</ModalBody>
     )
@@ -56,7 +55,7 @@ describe('<ModalBody />', () => {
     )
 
     expect(modalBody).toBeInTheDocument()
-    expect(bodyBackground).toBe(themeVariables.inverseBackground)
+    expect(bodyBackground).toBe(themeVariables.inverseBackgroundColor)
   })
 
   it('should set the same width and height as the parent when overflow is set to fit', async () => {

diff --git a/packages/ui-modal/src/Modal/ModalBody/index.tsx b/packages/ui-modal/src/Modal/ModalBody/index.tsx
@@ -28,9 +28,8 @@ import { View } from '@instructure/ui-view'
 import { omitProps } from '@instructure/ui-react-utils'
 import { getCSSStyleDeclaration } from '@instructure/ui-dom-utils'
 
-import { withStyleRework as withStyle } from '@instructure/emotion'
+import { withStyle } from '@instructure/emotion'
 import generateStyle from './styles'
-import generateComponentTheme from './theme'
 
 import { allowedProps } from './props'
 import type { ModalBodyProps } from './props'
@@ -42,7 +41,7 @@ parent: Modal
 id: Modal.Body
 ---
 **/
-@withStyle(generateStyle, generateComponentTheme)
+@withStyle(generateStyle, 'ModalBody')
 class ModalBody extends Component<ModalBodyProps> {
   static readonly componentId = 'Modal.Body'
 
@@ -105,8 +104,16 @@ class ModalBody extends Component<ModalBodyProps> {
   }
 
   render() {
-    const { as, elementRef, overflow, variant, padding, children, ...rest } =
-      this.props
+    const {
+      as,
+      elementRef,
+      overflow,
+      variant,
+      padding,
+      spacing,
+      children,
+      ...rest
+    } = this.props
 
     const passthroughProps = View.omitViewProps(
       omitProps(rest, ModalBody.allowedProps),
@@ -128,7 +135,7 @@ class ModalBody extends Component<ModalBodyProps> {
         elementRef={this.handleRef}
         as={as}
         css={this.props.styles?.modalBody}
-        padding={padding}
+        padding={spacing ? undefined : padding}
         // check if there is a scrollbar, if so, the element has to be tabbable to be able to scroll with keyboard only
         // epsilon tolerance is used to avoid scrollbar for rounding errors
         {...(finalRef &&

diff --git a/packages/ui-modal/src/Modal/ModalBody/props.ts b/packages/ui-modal/src/Modal/ModalBody/props.ts
@@ -42,6 +42,7 @@ type ModalBodyOwnProps = {
   as?: AsElementType
   variant?: 'default' | 'inverse'
   overflow?: 'scroll' | 'fit'
+  spacing?: 'default' | 'compact'
 }
 
 type PropKeys = keyof ModalBodyOwnProps
@@ -63,7 +64,8 @@ const allowedProps: AllowedPropKeys = [
   'elementRef',
   'as',
   'variant',
-  'overflow'
+  'overflow',
+  'spacing'
 ]
 
 export type { ModalBodyProps, ModalBodyState, ModalBodyStyle }

diff --git a/packages/ui-modal/src/Modal/ModalBody/styles.ts b/packages/ui-modal/src/Modal/ModalBody/styles.ts
@@ -22,7 +22,7 @@
  * SOFTWARE.
  */
 
-import type { ModalBodyTheme } from '@instructure/shared-types'
+import type { NewComponentTypes } from '@instructure/ui-themes'
 import type { ModalBodyProps, ModalBodyStyle } from './props'
 
 /**
@@ -32,19 +32,25 @@ import type { ModalBodyProps, ModalBodyStyle } from './props'
  * Generates the style object from the theme and provided additional information
  * @param  {Object} componentTheme The theme variable object.
  * @param  {Object} props the props of the component, the style is applied to
+ * @param  {Object} sharedTokens Shared theme token object
  * @param  {Object} state the state of the component, the style is applied to
  * @return {Object} The final style object, which will be used in the component
  */
 const generateStyle = (
-  componentTheme: ModalBodyTheme,
+  componentTheme: NewComponentTypes['ModalBody'],
   props: ModalBodyProps
 ): ModalBodyStyle => {
-  const { variant } = props
+  const { variant, spacing } = props
+
+  const sizeVariants = {
+    default: { padding: componentTheme.padding },
+    compact: { padding: componentTheme.paddingCompact }
+  }
 
   const backgroundStyle =
     variant === 'inverse'
       ? {
-          background: componentTheme.inverseBackground
+          background: componentTheme.inverseBackgroundColor
         }
       : {}
 
@@ -60,6 +66,7 @@ const generateStyle = (
       '@media (min-height: 20rem)': {
         overflowY: 'auto'
       },
+      ...(spacing ? sizeVariants[spacing] : {}),
       ...backgroundStyle
     }
   }

diff --git a/packages/ui-modal/src/Modal/ModalBody/theme.ts b/packages/ui-modal/src/Modal/ModalBody/theme.ts
diff --git a/packages/ui-modal/src/Modal/ModalFooter/__tests__/ModalFooter.test.tsx b/packages/ui-modal/src/Modal/ModalFooter/__tests__/ModalFooter.test.tsx
@@ -29,7 +29,6 @@ import canvas from '@instructure/ui-themes'
 import { color2hex } from '@instructure/ui-color-utils'
 
 import { ModalFooter } from '../index'
-import generateComponentTheme from '../theme'
 
 const FOOTER_TEXT = 'Modal-footer-text'
 
@@ -42,7 +41,7 @@ describe('<ModalFooter />', () => {
   })
 
   it('should set inverse styles', async () => {
-    const themeVariables = generateComponentTheme(canvas)
+    const themeVariables = canvas.newTheme.components.ModalFooter
     const { findByText } = render(
       <ModalFooter variant="inverse">{FOOTER_TEXT}</ModalFooter>
     )
@@ -57,7 +56,7 @@ describe('<ModalFooter />', () => {
     )
 
     expect(modalFooter).toBeInTheDocument()
-    expect(footerBackground).toBe(themeVariables.inverseBackground)
+    expect(footerBackground).toBe(themeVariables.inverseBackgroundColor)
     expect(footerBorderColor).toBe(themeVariables.inverseBorderColor)
   })
 })
diff --git a/packages/ui-modal/src/Modal/ModalFooter/index.tsx b/packages/ui-modal/src/Modal/ModalFooter/index.tsx
@@ -25,9 +25,8 @@
 import { Component } from 'react'
 
 import { passthroughProps } from '@instructure/ui-react-utils'
-import { withStyleRework as withStyle } from '@instructure/emotion'
+import { withStyle } from '@instructure/emotion'
 import generateStyle from './styles'
-import generateComponentTheme from './theme'
 
 import { allowedProps } from './props'
 import type { ModalFooterProps } from './props'
@@ -38,7 +37,7 @@ parent: Modal
 id: Modal.Footer
 ---
 **/
-@withStyle(generateStyle, generateComponentTheme)
+@withStyle(generateStyle, 'ModalFooter')
 class ModalFooter extends Component<ModalFooterProps> {
   static readonly componentId = 'Modal.Footer'
 

diff --git a/packages/ui-modal/src/Modal/ModalFooter/props.ts b/packages/ui-modal/src/Modal/ModalFooter/props.ts
@@ -32,6 +32,7 @@ import type { WithStyleProps, ComponentStyle } from '@instructure/emotion'
 type ModalFooterOwnProps = {
   children?: React.ReactNode
   variant?: 'default' | 'inverse'
+  spacing?: 'default' | 'compact'
 }
 
 type PropKeys = keyof ModalFooterOwnProps
@@ -43,7 +44,7 @@ type ModalFooterProps = ModalFooterOwnProps &
   OtherHTMLAttributes<ModalFooterOwnProps>
 
 type ModalFooterStyle = ComponentStyle<'modalFooter'>
-const allowedProps: AllowedPropKeys = ['children', 'variant']
+const allowedProps: AllowedPropKeys = ['children', 'variant', 'spacing']
 
 export type { ModalFooterProps, ModalFooterStyle }
 export { allowedProps }
diff --git a/packages/ui-modal/src/Modal/ModalFooter/styles.ts b/packages/ui-modal/src/Modal/ModalFooter/styles.ts
@@ -22,7 +22,7 @@
  * SOFTWARE.
  */
 
-import type { ModalFooterTheme } from '@instructure/shared-types'
+import type { NewComponentTypes } from '@instructure/ui-themes'
 import type { ModalFooterProps, ModalFooterStyle } from './props'
 
 /**
@@ -32,23 +32,24 @@ import type { ModalFooterProps, ModalFooterStyle } from './props'
  * Generates the style object from the theme and provided additional information
  * @param  {Object} componentTheme The theme variable object.
  * @param  {Object} props the props of the component, the style is applied to
+ * @param  {Object} sharedTokens Shared theme token object
  * @param  {Object} state the state of the component, the style is applied to
  * @return {Object} The final style object, which will be used in the component
  */
 const generateStyle = (
-  componentTheme: ModalFooterTheme,
+  componentTheme: NewComponentTypes['ModalFooter'],
   props: ModalFooterProps
 ): ModalFooterStyle => {
-  const { variant } = props
+  const { variant, spacing } = props
 
   const backgroundStyle =
     variant === 'inverse'
       ? {
-          background: componentTheme.inverseBackground,
+          background: componentTheme.inverseBackgroundColor,
           borderTop: `${componentTheme.borderWidth} solid ${componentTheme.inverseBorderColor}`
         }
       : {
-          background: componentTheme.background,
+          background: componentTheme.backgroundColor,
           borderTop: `${componentTheme.borderWidth} solid ${componentTheme.borderColor}`
         }
 
@@ -57,7 +58,10 @@ const generateStyle = (
       label: 'modalFooter',
       flex: '0 0 auto',
       boxSizing: 'border-box',
-      padding: componentTheme.padding,
+      padding:
+        spacing === 'compact'
+          ? componentTheme.paddingCompact
+          : componentTheme.padding,
       borderBottomRightRadius: componentTheme.borderRadius,
       borderBottomLeftRadius: componentTheme.borderRadius,
       display: 'flex',