ref(styles) deprecate space export and add space to theme

getsentry · Aug 9, 2024 · 1cd5337 · 1cd5337
1 parent 67339b2
commit 1cd5337
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 2 deletions.
diff --git 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 useTheme().space
+ */
+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
@@ -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';
 
 const lightColors = {
@@ -951,6 +952,7 @@ export const lightTheme = {
     ...darkColors,
     ...darkAliases,
   },
+  space: themeSpace,
   ...generateUtils(lightColors, lightAliases),
   alert: generateAlertTheme(lightColors, lightAliases),
   badge: generateBadgeTheme(lightColors),
@@ -979,6 +981,7 @@ export const darkTheme: Theme = {
     ...lightColors,
     ...lightAliases,
   },
+  space: themeSpace,
   ...generateUtils(darkColors, lightAliases),
   alert: generateAlertTheme(darkColors, darkAliases),
   badge: generateBadgeTheme(darkColors),