From 69729c759fe20291f135b754e42612889292ba3a Mon Sep 17 00:00:00 2001 From: Charles de Dreuille Date: Wed, 8 Oct 2025 17:16:06 +0100 Subject: [PATCH 1/5] Remove CSS baseline from UnifiedThemeProvider Signed-off-by: Charles de Dreuille --- .../theme/src/unified/UnifiedThemeProvider.tsx | 15 ++------------- 1 file changed, 2 insertions(+), 13 deletions(-) diff --git a/packages/theme/src/unified/UnifiedThemeProvider.tsx b/packages/theme/src/unified/UnifiedThemeProvider.tsx index 64694aff37..45358c13da 100644 --- a/packages/theme/src/unified/UnifiedThemeProvider.tsx +++ b/packages/theme/src/unified/UnifiedThemeProvider.tsx @@ -15,7 +15,6 @@ */ import { ReactNode } from 'react'; -import CssBaseline from '@material-ui/core/CssBaseline'; import { ThemeProvider, StylesProvider, @@ -68,7 +67,7 @@ import { useApplyThemeAttributes } from './useApplyThemeAttributes'; export function UnifiedThemeProvider( props: UnifiedThemeProviderProps, ): JSX.Element { - const { children, theme, noCssBaseline = false } = props; + const { children, theme } = props; const v4Theme = theme.getTheme('v4') as Mui4Theme; const v5Theme = theme.getTheme('v5') as Mui5Theme; @@ -78,17 +77,7 @@ export function UnifiedThemeProvider( 'backstage', ); - let cssBaseline: JSX.Element | undefined = undefined; - if (!noCssBaseline) { - cssBaseline = ; - } - - let result = ( - <> - {cssBaseline} - {children} - - ); + let result = children as JSX.Element; if (v4Theme) { result = ( From c396392c5c2d70c3fe8f571b4a87e72bb5aea12f Mon Sep 17 00:00:00 2001 From: Charles de Dreuille Date: Wed, 8 Oct 2025 17:22:17 +0100 Subject: [PATCH 2/5] Fix body background Signed-off-by: Charles de Dreuille --- packages/ui/css/styles.css | 4 ++++ packages/ui/src/css/core.css | 4 ++++ 2 files changed, 8 insertions(+) diff --git a/packages/ui/css/styles.css b/packages/ui/css/styles.css index d93ba87829..61051fdf07 100644 --- a/packages/ui/css/styles.css +++ b/packages/ui/css/styles.css @@ -9098,6 +9098,10 @@ } } +body { + background-color: var(--bui-bg); +} + :root { --bui-font-regular: system-ui; --bui-font-monospace: ui-monospace, "Menlo", "Monaco", "Consolas", "Liberation Mono", "Courier New", monospace; diff --git a/packages/ui/src/css/core.css b/packages/ui/src/css/core.css index 088d4d6f2b..a8ab7cfc6b 100644 --- a/packages/ui/src/css/core.css +++ b/packages/ui/src/css/core.css @@ -30,6 +30,10 @@ } } +body { + background-color: var(--bui-bg); +} + /* Light theme tokens */ :root { /* Font families */ From 865bce8ac9bae088fcd9769cabab1c6009153b98 Mon Sep 17 00:00:00 2001 From: Charles de Dreuille Date: Wed, 8 Oct 2025 17:35:45 +0100 Subject: [PATCH 3/5] Remove noCssBaseline Signed-off-by: Charles de Dreuille --- .changeset/salty-baths-buy.md | 5 +++++ .changeset/warm-dancers-call.md | 5 +++++ packages/theme/report.api.md | 2 -- packages/theme/src/unified/UnifiedThemeProvider.tsx | 1 - 4 files changed, 10 insertions(+), 3 deletions(-) create mode 100644 .changeset/salty-baths-buy.md create mode 100644 .changeset/warm-dancers-call.md diff --git a/.changeset/salty-baths-buy.md b/.changeset/salty-baths-buy.md new file mode 100644 index 0000000000..c3b72189eb --- /dev/null +++ b/.changeset/salty-baths-buy.md @@ -0,0 +1,5 @@ +--- +'@backstage/ui': patch +--- + +Added a background color default on the body diff --git a/.changeset/warm-dancers-call.md b/.changeset/warm-dancers-call.md new file mode 100644 index 0000000000..62cdfb9baf --- /dev/null +++ b/.changeset/warm-dancers-call.md @@ -0,0 +1,5 @@ +--- +'@backstage/theme': minor +--- + +**BREAKING**: Removed noCssBaseline prop in UnifiedThemeProvider. diff --git a/packages/theme/report.api.md b/packages/theme/report.api.md index ebdae12a05..18ac96ecec 100644 --- a/packages/theme/report.api.md +++ b/packages/theme/report.api.md @@ -459,8 +459,6 @@ export interface UnifiedThemeProviderProps { // (undocumented) children: ReactNode; // (undocumented) - noCssBaseline?: boolean; - // (undocumented) theme: UnifiedTheme; } ``` diff --git a/packages/theme/src/unified/UnifiedThemeProvider.tsx b/packages/theme/src/unified/UnifiedThemeProvider.tsx index 45358c13da..d0886cd146 100644 --- a/packages/theme/src/unified/UnifiedThemeProvider.tsx +++ b/packages/theme/src/unified/UnifiedThemeProvider.tsx @@ -37,7 +37,6 @@ import { unstable_ClassNameGenerator as ClassNameGenerator } from '@mui/material export interface UnifiedThemeProviderProps { children: ReactNode; theme: UnifiedTheme; - noCssBaseline?: boolean; } /** From e979fe207683c52cb359646d56eddbf1ba7e723e Mon Sep 17 00:00:00 2001 From: Charles de Dreuille Date: Thu, 9 Oct 2025 10:36:38 +0100 Subject: [PATCH 4/5] Update warm-dancers-call.md Signed-off-by: Charles de Dreuille --- .changeset/warm-dancers-call.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.changeset/warm-dancers-call.md b/.changeset/warm-dancers-call.md index 62cdfb9baf..aa69005663 100644 --- a/.changeset/warm-dancers-call.md +++ b/.changeset/warm-dancers-call.md @@ -2,4 +2,4 @@ '@backstage/theme': minor --- -**BREAKING**: Removed noCssBaseline prop in UnifiedThemeProvider. +**BREAKING**: Removed noCssBaseline prop in UnifiedThemeProvider. If your Backstage instance looks broken after this update, there's a high chance that you forgot to add our new Backstage UI global CSS. To do that, please add @backstage/ui/css/styles.css at the root of your application. From 66eb76aea3a896629f11eb43317d92e889d9427d Mon Sep 17 00:00:00 2001 From: Charles de Dreuille Date: Thu, 9 Oct 2025 10:57:48 +0100 Subject: [PATCH 5/5] Update warm-dancers-call.md Signed-off-by: Charles de Dreuille --- .changeset/warm-dancers-call.md | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/.changeset/warm-dancers-call.md b/.changeset/warm-dancers-call.md index aa69005663..404fa16a68 100644 --- a/.changeset/warm-dancers-call.md +++ b/.changeset/warm-dancers-call.md @@ -2,4 +2,10 @@ '@backstage/theme': minor --- -**BREAKING**: Removed noCssBaseline prop in UnifiedThemeProvider. If your Backstage instance looks broken after this update, there's a high chance that you forgot to add our new Backstage UI global CSS. To do that, please add @backstage/ui/css/styles.css at the root of your application. +**BREAKING**: Removed the built-in `CssBaseline` from `UnifiedThemeProvider`. If your Backstage instance looks broken after this update, you likely forgot to add our new Backstage UI global CSS. To do that, please import `@backstage/ui/css/styles.css` in `packages/app/src/index.tsx`: + +```tsx +import '@backstage/ui/css/styles.css'; +``` + +This change also removes the `noCssBaseline` prop, which became redundant.