diff --git a/static/app/styles/space.tsx b/static/app/styles/space.tsx
index ea25318504574c..8723e6f80d42a3 100644
--- a/static/app/styles/space.tsx
+++ b/static/app/styles/space.tsx
@@ -11,8 +11,13 @@ const SPACES = {
 
 export type ValidSize = keyof typeof SPACES;
 
-function space<S extends ValidSize>(size: S): (typeof SPACES)[S] {
+/**
+ * @deprecated You can now access space directly inside styled template literals via p => p.theme.space(value) or inside your component body via const {space} = useTheme();
+ */
+export function space<S extends ValidSize>(size: S): (typeof SPACES)[S] {
   return SPACES[size];
 }
 
-export {space};
+export function themeSpace<S extends ValidSize>(size: S): (typeof SPACES)[S] {
+  return SPACES[size];
+}
diff --git a/static/app/utils/theme.tsx b/static/app/utils/theme.tsx
index fbe53a4db0506c..1101e3cf810bfe 100644
--- a/static/app/utils/theme.tsx
+++ b/static/app/utils/theme.tsx
@@ -3,6 +3,7 @@ import color from 'color';
 
 import {DATA_CATEGORY_INFO} from 'sentry/constants';
 import {CHART_PALETTE} from 'sentry/constants/chartPalette';
+import {themeSpace} from 'sentry/styles/space';
 import {Outcome} from 'sentry/types/core';
 
 const lightColors = {
@@ -958,6 +959,7 @@ export const lightTheme = {
     ...darkColors,
     ...darkAliases,
   },
+  space: themeSpace,
   ...generateUtils(lightColors, lightAliases),
   alert: generateAlertTheme(lightColors, lightAliases),
   badge: generateBadgeTheme(lightColors),
@@ -986,6 +988,7 @@ export const darkTheme: Theme = {
     ...lightColors,
     ...lightAliases,
   },
+  space: themeSpace,
   ...generateUtils(darkColors, lightAliases),
   alert: generateAlertTheme(darkColors, darkAliases),
   badge: generateBadgeTheme(darkColors),