From 41c5aa0ab589cb62457b8070523a8c1cb83c0203 Mon Sep 17 00:00:00 2001 From: Philipp Hugenroth Date: Fri, 14 Jul 2023 14:29:04 +0200 Subject: [PATCH] Replace theme spacing only on overrides Co-authored-by: Patrik Oldsberg Signed-off-by: Philipp Hugenroth --- .changeset/metal-dots-suffer.md | 5 +++++ packages/theme/src/unified/overrides.ts | 15 ++++++++------- packages/theme/src/v5/defaultComponentThemes.ts | 4 ++-- 3 files changed, 15 insertions(+), 9 deletions(-) create mode 100644 .changeset/metal-dots-suffer.md diff --git a/.changeset/metal-dots-suffer.md b/.changeset/metal-dots-suffer.md new file mode 100644 index 0000000000..6152925061 --- /dev/null +++ b/.changeset/metal-dots-suffer.md @@ -0,0 +1,5 @@ +--- +'@backstage/theme': patch +--- + +Applying the modified `theme.spacing` method only to overrides instead of replacing it in the whole theme. diff --git a/packages/theme/src/unified/overrides.ts b/packages/theme/src/unified/overrides.ts index 2d2ae966d9..3075b88e70 100644 --- a/packages/theme/src/unified/overrides.ts +++ b/packages/theme/src/unified/overrides.ts @@ -77,16 +77,17 @@ function adaptV5Override( return undefined; } if (typeof overrides === 'object') { + const _theme = { ...theme }; + const defaultSpacing = theme.spacing(1); + if (typeof defaultSpacing === 'number') { + // Override potential v4 spacing method: https://mui.com/material-ui/migration/v5-style-changes/#%E2%9C%85-remove-px-suffix + // `adaptV4Theme as reference: https://github.com/mui/material-ui/blob/v5.x/packages/mui-material/src/styles/adaptV4Theme.js#L54C41-L54C41 + _theme.spacing = __v5Spacing(defaultSpacing); + } return Object.fromEntries( Object.entries(overrides).map(([className, style]) => { if (typeof style === 'function') { - const defaultSpacing = theme.spacing(1); - if (typeof defaultSpacing === 'number') { - // Override potential v4 spacing method: https://mui.com/material-ui/migration/v5-style-changes/#%E2%9C%85-remove-px-suffix - // `adaptV4Theme as reference: https://github.com/mui/material-ui/blob/v5.x/packages/mui-material/src/styles/adaptV4Theme.js#L54C41-L54C41 - theme.spacing = __v5Spacing(defaultSpacing); - } - return [className, style({ theme })]; + return [className, style({ theme: _theme })]; } return [className, style]; }), diff --git a/packages/theme/src/v5/defaultComponentThemes.ts b/packages/theme/src/v5/defaultComponentThemes.ts index e312ef9017..08f54b8509 100644 --- a/packages/theme/src/v5/defaultComponentThemes.ts +++ b/packages/theme/src/v5/defaultComponentThemes.ts @@ -189,12 +189,12 @@ export const defaultComponentThemes: ThemeOptions['components'] = { color: theme.palette.grey[500], width: theme.spacing(3), height: theme.spacing(3), - margin: `0 ${theme.spacing(0.75)} 0 -${theme.spacing(0.75)}`, + margin: theme.spacing(0, 0.75, 0, -0.75), }), deleteIconSmall: ({ theme }) => ({ width: theme.spacing(2), height: theme.spacing(2), - margin: `0 ${theme.spacing(0.5)} 0 -${theme.spacing(0.5)}`, + margin: theme.spacing(0, 0.5, 0, -0.5), }), }, },