diff --git a/docs/guides/upgrade-guide.md b/docs/guides/upgrade-guide.md
index 87d94e1751..da8600df2c 100644
--- a/docs/guides/upgrade-guide.md
+++ b/docs/guides/upgrade-guide.md
@@ -215,6 +215,54 @@ type: embed
 
 ```
 
+### Grid
+
+```js
+---
+type: embed
+---
+<V12ChangelogTable
+  changed={[
+    {oldName:"mediumMin",newName:"mediumMin",note:"now only provides the value, not the full media query (e.g., '768px' instead of 'min-width: 768px'). The component now adds the `min-width:` prefix automatically in the generated styles."},
+    {oldName:"largeMin",newName:"largeMin",note:"now only provides the value, not the full media query (e.g., '1024px' instead of 'min-width: 1024px'). The component now adds the `min-width:` prefix automatically in the generated styles."},
+    {oldName:"xLargeMin",newName:"xLargeMin",note:"now only provides the value, not the full media query (e.g., '1440px' instead of 'min-width: 1440px'). The component now adds the `min-width:` prefix automatically in the generated styles."}
+  ]}
+/>
+
+```
+
+### Grid.Row
+
+```js
+---
+type: embed
+---
+<V12ChangelogTable
+  changed={[
+    {oldName:"mediumMin",newName:"mediumMin",note:"now only provides the value, not the full media query (e.g., '768px' instead of 'min-width: 768px'). The component now adds the `min-width:` prefix automatically in the generated styles."},
+    {oldName:"largeMin",newName:"largeMin",note:"now only provides the value, not the full media query (e.g., '1024px' instead of 'min-width: 1024px'). The component now adds the `min-width:` prefix automatically in the generated styles."},
+    {oldName:"xLargeMin",newName:"xLargeMin",note:"now only provides the value, not the full media query (e.g., '1440px' instead of 'min-width: 1440px'). The component now adds the `min-width:` prefix automatically in the generated styles."}
+  ]}
+/>
+
+```
+
+### Grid.Col
+
+```js
+---
+type: embed
+---
+<V12ChangelogTable
+  changed={[
+    {oldName:"mediumMin",newName:"mediumMin",note:"now only provides the value, not the full media query (e.g., '768px' instead of 'min-width: 768px'). The component now adds the `min-width:` prefix automatically in the generated styles."},
+    {oldName:"largeMin",newName:"largeMin",note:"now only provides the value, not the full media query (e.g., '1024px' instead of 'min-width: 1024px'). The component now adds the `min-width:` prefix automatically in the generated styles."},
+    {oldName:"xLargeMin",newName:"xLargeMin",note:"now only provides the value, not the full media query (e.g., '1440px' instead of 'min-width: 1440px'). The component now adds the `min-width:` prefix automatically in the generated styles."}
+  ]}
+/>
+
+```
+
 ### Link
 
 #### New `size` prop
@@ -367,6 +415,7 @@ type: embed
 />
 
 ```
+
 ### RadioInput
 
 - Setting `readonly` does not set the low level `<input>` to disabled, but to `readonly`. This also means that the input is still focusable when `readonly`
@@ -604,6 +653,7 @@ type: embed
 />
 
 ```
+
 ### RangeInput
 
 ```js
diff --git a/packages/ui-grid/src/Grid/index.tsx b/packages/ui-grid/src/Grid/index.tsx
index 94246e103c..09c5c58add 100644
--- a/packages/ui-grid/src/Grid/index.tsx
+++ b/packages/ui-grid/src/Grid/index.tsx
@@ -35,10 +35,9 @@ import { GridRow } from '../GridRow'
 import type { GridRowProps } from '../GridRow/props'
 import { GridCol } from '../GridCol'
 
-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 { GridProps } from './props'
@@ -48,7 +47,7 @@ import type { GridProps } from './props'
 category: components
 ---
 **/
-@withStyle(generateStyle, generateComponentTheme)
+@withStyle(generateStyle)
 class Grid extends Component<GridProps> {
   static readonly componentId = 'Grid'
 
diff --git a/packages/ui-grid/src/Grid/styles.ts b/packages/ui-grid/src/Grid/styles.ts
index 72a1225749..a0a971e7d0 100644
--- a/packages/ui-grid/src/Grid/styles.ts
+++ b/packages/ui-grid/src/Grid/styles.ts
@@ -22,7 +22,7 @@
  * SOFTWARE.
  */
 
-import type { GridTheme } from '@instructure/shared-types'
+import type { NewComponentTypes } from '@instructure/ui-themes'
 import type { GridBreakpoints } from '../GridTypes'
 import type { GridProps, GridStyle } from './props'
 
@@ -37,7 +37,7 @@ import type { GridProps, GridStyle } from './props'
  * @return {Object} The final style object, which will be used in the component
  */
 const generateStyle = (
-  componentTheme: GridTheme,
+  componentTheme: NewComponentTypes['Grid'],
   props: GridProps
 ): GridStyle => {
   const { startAt, visualDebug } = props
@@ -52,13 +52,13 @@ const generateStyle = (
 
       ...getStartAtVariants('small'),
 
-      [`@media screen and (${componentTheme.mediumMin})`]: {
+      [`@media screen and (min-width: ${componentTheme.mediumMin})`]: {
         ...getStartAtVariants('medium')
       },
-      [`@media screen and (${componentTheme.largeMin})`]: {
+      [`@media screen and (min-width: ${componentTheme.largeMin})`]: {
         ...getStartAtVariants('large')
       },
-      [`@media screen and (${componentTheme.xLargeMin})`]: {
+      [`@media screen and (min-width: ${componentTheme.xLargeMin})`]: {
         ...getStartAtVariants('x-large')
       },
 
diff --git a/packages/ui-grid/src/Grid/theme.ts b/packages/ui-grid/src/Grid/theme.ts
deleted file mode 100644
index 4917cf98bb..0000000000
--- a/packages/ui-grid/src/Grid/theme.ts
+++ /dev/null
@@ -1,49 +0,0 @@
-/*
- * The MIT License (MIT)
- *
- * Copyright (c) 2015 - present Instructure, Inc.
- *
- * Permission is hereby granted, free of charge, to any person obtaining a copy
- * of this software and associated documentation files (the "Software"), to deal
- * in the Software without restriction, including without limitation the rights
- * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
- * copies of the Software, and to permit persons to whom the Software is
- * furnished to do so, subject to the following conditions:
- *
- * The above copyright notice and this permission notice shall be included in all
- * copies or substantial portions of the Software.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
- * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
- * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
- * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
- * SOFTWARE.
- */
-
-import type { Theme } from '@instructure/ui-themes'
-import { GridTheme } from '@instructure/shared-types'
-
-/**
- * Generates the theme object for the component from the theme and provided additional information
- * @param  {Object} theme The actual theme object.
- * @return {Object} The final theme object with the overrides and component variables
- */
-const generateComponentTheme = (theme: Theme): GridTheme => {
-  const { spacing, media } = theme
-
-  const componentVariables: GridTheme = {
-    spacingSmall: spacing?.small,
-    spacingMedium: spacing?.medium,
-    spacingLarge: spacing?.large,
-
-    ...media
-  }
-
-  return {
-    ...componentVariables
-  }
-}
-
-export default generateComponentTheme
diff --git a/packages/ui-grid/src/GridCol/index.tsx b/packages/ui-grid/src/GridCol/index.tsx
index be57a804b6..48a0458838 100644
--- a/packages/ui-grid/src/GridCol/index.tsx
+++ b/packages/ui-grid/src/GridCol/index.tsx
@@ -26,11 +26,10 @@ import { Component } from 'react'
 
 import { omitProps } from '@instructure/ui-react-utils'
 
-import { withStyleRework as withStyle } from '@instructure/emotion'
+import { withStyle } from '@instructure/emotion'
 import { logWarn as warn } from '@instructure/console'
 
 import generateStyle from './styles'
-import generateComponentTheme from './theme'
 
 import { allowedProps } from './props'
 import type { GridColProps } from './props'
@@ -41,7 +40,7 @@ parent: Grid
 id: Grid.Col
 ---
 **/
-@withStyle(generateStyle, generateComponentTheme)
+@withStyle(generateStyle)
 class GridCol extends Component<GridColProps> {
   static readonly componentId = 'Grid.Col'
 
diff --git a/packages/ui-grid/src/GridCol/styles.ts b/packages/ui-grid/src/GridCol/styles.ts
index 59210a0b3e..49b663e683 100644
--- a/packages/ui-grid/src/GridCol/styles.ts
+++ b/packages/ui-grid/src/GridCol/styles.ts
@@ -22,7 +22,7 @@
  * SOFTWARE.
  */
 
-import type { GridTheme } from '@instructure/shared-types'
+import type { NewComponentTypes } from '@instructure/ui-themes'
 import type { GridBreakpoints } from '../GridTypes'
 import type { GridColProps, GridColStyle } from './props'
 
@@ -39,7 +39,7 @@ type BreakPoints = NonNullable<GridBreakpoints>
  * @return {Object} The final style object, which will be used in the component
  */
 const generateStyle = (
-  componentTheme: GridTheme,
+  componentTheme: NewComponentTypes['GridCol'],
   props: GridColProps
 ): GridColStyle => {
   const {
@@ -203,13 +203,13 @@ const generateStyle = (
 
       ...getBreakpointStyles('small'),
 
-      [`@media screen and (${componentTheme.mediumMin})`]: {
+      [`@media screen and (min-width: ${componentTheme.mediumMin})`]: {
         ...getBreakpointStyles('medium')
       },
-      [`@media screen and (${componentTheme.largeMin})`]: {
+      [`@media screen and (min-width: ${componentTheme.largeMin})`]: {
         ...getBreakpointStyles('large')
       },
-      [`@media screen and (${componentTheme.xLargeMin})`]: {
+      [`@media screen and (min-width: ${componentTheme.xLargeMin})`]: {
         ...getBreakpointStyles('x-large')
       },
 
diff --git a/packages/ui-grid/src/GridCol/theme.ts b/packages/ui-grid/src/GridCol/theme.ts
deleted file mode 100644
index 4917cf98bb..0000000000
--- a/packages/ui-grid/src/GridCol/theme.ts
+++ /dev/null
@@ -1,49 +0,0 @@
-/*
- * The MIT License (MIT)
- *
- * Copyright (c) 2015 - present Instructure, Inc.
- *
- * Permission is hereby granted, free of charge, to any person obtaining a copy
- * of this software and associated documentation files (the "Software"), to deal
- * in the Software without restriction, including without limitation the rights
- * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
- * copies of the Software, and to permit persons to whom the Software is
- * furnished to do so, subject to the following conditions:
- *
- * The above copyright notice and this permission notice shall be included in all
- * copies or substantial portions of the Software.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
- * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
- * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
- * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
- * SOFTWARE.
- */
-
-import type { Theme } from '@instructure/ui-themes'
-import { GridTheme } from '@instructure/shared-types'
-
-/**
- * Generates the theme object for the component from the theme and provided additional information
- * @param  {Object} theme The actual theme object.
- * @return {Object} The final theme object with the overrides and component variables
- */
-const generateComponentTheme = (theme: Theme): GridTheme => {
-  const { spacing, media } = theme
-
-  const componentVariables: GridTheme = {
-    spacingSmall: spacing?.small,
-    spacingMedium: spacing?.medium,
-    spacingLarge: spacing?.large,
-
-    ...media
-  }
-
-  return {
-    ...componentVariables
-  }
-}
-
-export default generateComponentTheme
diff --git a/packages/ui-grid/src/GridRow/index.tsx b/packages/ui-grid/src/GridRow/index.tsx
index 2ed422ce15..126861addc 100644
--- a/packages/ui-grid/src/GridRow/index.tsx
+++ b/packages/ui-grid/src/GridRow/index.tsx
@@ -34,10 +34,9 @@ import {
 import { GridCol } from '../GridCol'
 import type { GridColProps } from '../GridCol/props'
 
-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 { GridRowProps } from './props'
@@ -48,7 +47,7 @@ parent: Grid
 id: Grid.Row
 ---
 **/
-@withStyle(generateStyle, generateComponentTheme)
+@withStyle(generateStyle)
 class GridRow extends Component<GridRowProps> {
   static readonly componentId = 'Grid.Row'
 
diff --git a/packages/ui-grid/src/GridRow/styles.ts b/packages/ui-grid/src/GridRow/styles.ts
index fd0f02fccc..7c596beac0 100644
--- a/packages/ui-grid/src/GridRow/styles.ts
+++ b/packages/ui-grid/src/GridRow/styles.ts
@@ -22,7 +22,7 @@
  * SOFTWARE.
  */
 
-import type { GridTheme } from '@instructure/shared-types'
+import type { NewComponentTypes } from '@instructure/ui-themes'
 import type { GridBreakpoints } from '../GridTypes'
 import type { GridRowProps, GridRowStyle } from './props'
 
@@ -37,7 +37,7 @@ import type { GridRowProps, GridRowStyle } from './props'
  * @return {Object} The final style object, which will be used in the component
  */
 const generateStyle = (
-  componentTheme: GridTheme,
+  componentTheme: NewComponentTypes['GridRow'],
   props: GridRowProps
 ): GridRowStyle => {
   const {
@@ -102,13 +102,13 @@ const generateStyle = (
 
       ...getStartAtVariants('small'),
 
-      [`@media screen and (${componentTheme.mediumMin})`]: {
+      [`@media screen and (min-width: ${componentTheme.mediumMin})`]: {
         ...getStartAtVariants('medium')
       },
-      [`@media screen and (${componentTheme.largeMin})`]: {
+      [`@media screen and (min-width: ${componentTheme.largeMin})`]: {
         ...getStartAtVariants('large')
       },
-      [`@media screen and (${componentTheme.xLargeMin})`]: {
+      [`@media screen and (min-width: ${componentTheme.xLargeMin})`]: {
         ...getStartAtVariants('x-large')
       },
 
diff --git a/packages/ui-grid/src/GridRow/theme.ts b/packages/ui-grid/src/GridRow/theme.ts
deleted file mode 100644
index 4917cf98bb..0000000000
--- a/packages/ui-grid/src/GridRow/theme.ts
+++ /dev/null
@@ -1,49 +0,0 @@
-/*
- * The MIT License (MIT)
- *
- * Copyright (c) 2015 - present Instructure, Inc.
- *
- * Permission is hereby granted, free of charge, to any person obtaining a copy
- * of this software and associated documentation files (the "Software"), to deal
- * in the Software without restriction, including without limitation the rights
- * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
- * copies of the Software, and to permit persons to whom the Software is
- * furnished to do so, subject to the following conditions:
- *
- * The above copyright notice and this permission notice shall be included in all
- * copies or substantial portions of the Software.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
- * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
- * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
- * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
- * SOFTWARE.
- */
-
-import type { Theme } from '@instructure/ui-themes'
-import { GridTheme } from '@instructure/shared-types'
-
-/**
- * Generates the theme object for the component from the theme and provided additional information
- * @param  {Object} theme The actual theme object.
- * @return {Object} The final theme object with the overrides and component variables
- */
-const generateComponentTheme = (theme: Theme): GridTheme => {
-  const { spacing, media } = theme
-
-  const componentVariables: GridTheme = {
-    spacingSmall: spacing?.small,
-    spacingMedium: spacing?.medium,
-    spacingLarge: spacing?.large,
-
-    ...media
-  }
-
-  return {
-    ...componentVariables
-  }
-}
-
-export default generateComponentTheme