diff --git a/docs/guides/upgrade-guide.md b/docs/guides/upgrade-guide.md
index 5519666d9d..fb77dc66d8 100644
--- a/docs/guides/upgrade-guide.md
+++ b/docs/guides/upgrade-guide.md
@@ -135,9 +135,10 @@ type: example
   <TextInput renderLabel="Name" placeholder="Doe, John Doe"/>
 </InstUISettingsProvider>
 ```
+
 ### Breadcrumb
 
-#### New tokens 
+#### New tokens
 
 - gapSm - Gap spacing for small size breadcrumbs
 - gapMd - Gap spacing for medium size breadcrumbs
@@ -173,6 +174,48 @@ type: example
 
 - theme variable `lineHeight` is now removed.
 
+### Flex
+
+The following theme variables have been removed. Gap styling now uses `sharedTokens.legacySpacing`:
+
+- `gapButtons`
+- `gapCheckboxes`
+- `gapDataPoints`
+- `gapInputFields`
+- `gapLarge`
+- `gapMedium`
+- `gapMediumSmall`
+- `gapModalElements`
+- `gapModuleElements`
+- `gapPaddingCardLarge`
+- `gapPaddingCardMedium`
+- `gapPaddingCardSmall`
+- `gapRadios`
+- `gapSectionElements`
+- `gapSections`
+- `gapSelects`
+- `gapSmall`
+- `gapSpace0`
+- `gapSpace12`
+- `gapSpace16`
+- `gapSpace2`
+- `gapSpace24`
+- `gapSpace36`
+- `gapSpace4`
+- `gapSpace48`
+- `gapSpace60`
+- `gapSpace8`
+- `gapStatusIndicators`
+- `gapTags`
+- `gapTextareas`
+- `gapToggles`
+- `gapTrayElements`
+- `gapXLarge`
+- `gapXSmall`
+- `gapXxLarge`
+- `gapXxSmall`
+- `gapXxxSmall`
+
 ### FormFieldGroup
 
 - theme variable `errorBorderColor` is now removed
diff --git a/packages/ui-flex/src/Flex/index.tsx b/packages/ui-flex/src/Flex/index.tsx
index 12cbdfb086..57a9da252d 100644
--- a/packages/ui-flex/src/Flex/index.tsx
+++ b/packages/ui-flex/src/Flex/index.tsx
@@ -31,13 +31,12 @@ import {
   callRenderProp
 } from '@instructure/ui-react-utils'
 import { View } from '@instructure/ui-view'
-import { withStyleRework as withStyle } from '@instructure/emotion'
+import { withStyle } from '@instructure/emotion'
 
 import { Item } from './Item'
 import type { FlexItemProps } from './Item/props'
 
 import generateStyle from './styles'
-import generateComponentTheme from './theme'
 
 import { allowedProps } from './props'
 import type { FlexProps } from './props'
@@ -48,7 +47,7 @@ category: components
 ---
 @module Flex
 **/
-@withStyle(generateStyle, generateComponentTheme)
+@withStyle(generateStyle)
 class Flex extends Component<FlexProps> {
   static readonly componentId = 'Flex'
 
diff --git a/packages/ui-flex/src/Flex/styles.ts b/packages/ui-flex/src/Flex/styles.ts
index 6bda2dffd2..b020fe5003 100644
--- a/packages/ui-flex/src/Flex/styles.ts
+++ b/packages/ui-flex/src/Flex/styles.ts
@@ -22,8 +22,8 @@
  * SOFTWARE.
  */
 
-import { getShorthandPropValue } from '@instructure/emotion'
-import type { FlexTheme } from '@instructure/shared-types'
+import { getShorthandPropValue, makeThemeVars } from '@instructure/emotion'
+import type { NewComponentTypes, SharedTokens } from '@instructure/ui-themes'
 import type { FlexProps, FlexStyle } from './props'
 
 /**
@@ -42,8 +42,9 @@ import type { FlexProps, FlexStyle } from './props'
  */
 
 const generateStyle = (
-  componentTheme: FlexTheme,
-  props: FlexProps
+  componentTheme: NewComponentTypes['Flex'],
+  props: FlexProps,
+  SharedTokens: SharedTokens
 ): FlexStyle => {
   const { justifyItems, wrap, direction, gap } = props
 
@@ -87,8 +88,9 @@ const generateStyle = (
   }
 
   // gap css prop
-  const getGapValue = (gap: FlexProps['gap'], theme: FlexTheme) =>
-    getShorthandPropValue('Flex', theme, gap, 'gap')
+  const gapValues = makeThemeVars('gap', SharedTokens.legacySpacing)
+  const getGapValue = (gap: FlexProps['gap'], values: Record<string, string>) =>
+    getShorthandPropValue('Flex', values, gap, 'gap')
 
   return {
     flex: {
@@ -99,7 +101,7 @@ const generateStyle = (
       justifyContent: justifyItemsValues[justifyItems!],
       flexWrap: wrapValues[wrap!],
       flexDirection: flexDirectionValues[direction!],
-      gap: getGapValue(gap!, componentTheme)
+      gap: getGapValue(gap!, gapValues)
     }
   }
 }
diff --git a/packages/ui-flex/src/Flex/theme.ts b/packages/ui-flex/src/Flex/theme.ts
deleted file mode 100644
index a8b55c7c91..0000000000
--- a/packages/ui-flex/src/Flex/theme.ts
+++ /dev/null
@@ -1,47 +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 { makeThemeVars } from '@instructure/emotion'
-import type { Theme } from '@instructure/ui-themes'
-import { FlexTheme } 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): FlexTheme => {
-  const { typography, spacing } = theme
-
-  const componentVariables: FlexTheme = {
-    fontFamily: typography?.fontFamily,
-    ...makeThemeVars('gap', spacing)
-  }
-
-  return {
-    ...componentVariables
-  }
-}
-
-export default generateComponentTheme