Merge pull request #31365 from backstage/css-baseline

Remove MUICssBaseline

.changeset/salty-baths-buy.md

@@ -0,0 +1,5 @@
+---
+'@backstage/ui': patch
+---
+
+Added a background color default on the body

.changeset/warm-dancers-call.md

@@ -0,0 +1,11 @@
+---
+'@backstage/theme': minor
+---
+
+**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.

packages/theme/report.api.md

@@ -459,8 +459,6 @@ export interface UnifiedThemeProviderProps {
   // (undocumented)
   children: ReactNode;
   // (undocumented)
-  noCssBaseline?: boolean;
-  // (undocumented)
   theme: UnifiedTheme;
 }
 ```

packages/theme/src/unified/UnifiedThemeProvider.tsx

@@ -15,7 +15,6 @@
  */
 
 import { ReactNode } from 'react';
-import CssBaseline from '@material-ui/core/CssBaseline';
 import {
   ThemeProvider,
   StylesProvider,
@@ -38,7 +37,6 @@ import { unstable_ClassNameGenerator as ClassNameGenerator } from '@mui/material
 export interface UnifiedThemeProviderProps {
   children: ReactNode;
   theme: UnifiedTheme;
-  noCssBaseline?: boolean;
 }
 
 /**
@@ -68,7 +66,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 +76,7 @@ export function UnifiedThemeProvider(
     'backstage',
   );
 
-  let cssBaseline: JSX.Element | undefined = undefined;
-  if (!noCssBaseline) {
-    cssBaseline = <CssBaseline />;
-  }
-
-  let result = (
-    <>
-      {cssBaseline}
-      {children}
-    </>
-  );
+  let result = children as JSX.Element;
 
   if (v4Theme) {
     result = (

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;

packages/ui/src/css/core.css

@@ -30,6 +30,10 @@
   }
 }
 
+body {
+  background-color: var(--bui-bg);
+}
+
 /* Light theme tokens */
 :root {
   /* Font families */