diff --git a/packages/app-defaults/src/defaults/themes.tsx b/packages/app-defaults/src/defaults/themes.tsx index 90a4a0f47f..397c160168 100644 --- a/packages/app-defaults/src/defaults/themes.tsx +++ b/packages/app-defaults/src/defaults/themes.tsx @@ -28,7 +28,6 @@ export const themes: AppTheme[] = [ title: 'Light Theme', variant: 'light', icon: , - theme: lightTheme, Provider: ({ children }) => ( {children} @@ -40,7 +39,6 @@ export const themes: AppTheme[] = [ title: 'Dark Theme', variant: 'dark', icon: , - theme: darkTheme, Provider: ({ children }) => ( {children} diff --git a/packages/core-app-api/src/app/AppThemeProvider.tsx b/packages/core-app-api/src/app/AppThemeProvider.tsx index 2e145025d5..797e2bce87 100644 --- a/packages/core-app-api/src/app/AppThemeProvider.tsx +++ b/packages/core-app-api/src/app/AppThemeProvider.tsx @@ -15,8 +15,6 @@ */ import React, { useMemo, useEffect, useState, PropsWithChildren } from 'react'; -import { ThemeProvider } from '@material-ui/core/styles'; -import CssBaseline from '@material-ui/core/CssBaseline'; import { useApi, appThemeApiRef, AppTheme } from '@backstage/core-plugin-api'; import { useObservable } from 'react-use'; @@ -90,20 +88,9 @@ export function AppThemeProvider({ children }: PropsWithChildren<{}>) { throw new Error('App has no themes'); } - if (appTheme.Provider) { - return ; + if (!appTheme.Provider) { + throw new Error('App has no theme provider'); } - // eslint-disable-next-line no-console - console.warn( - "DEPRECATION WARNING: A provided app theme is using the deprecated 'theme' property " + - 'and should be migrated to use a Provider instead. ' + - 'See https://backstage.io/docs/api/deprecations#app-theme for more info.', - ); - - return ( - - {children} - - ); + return ; } diff --git a/packages/core-plugin-api/api-report.md b/packages/core-plugin-api/api-report.md index 709e56c22d..b31722f29d 100644 --- a/packages/core-plugin-api/api-report.md +++ b/packages/core-plugin-api/api-report.md @@ -6,7 +6,6 @@ /// import { BackstagePlugin as BackstagePlugin_2 } from '@backstage/core-plugin-api'; -import { BackstageTheme } from '@backstage/theme'; import { ComponentType } from 'react'; import { Config } from '@backstage/config'; import { IconComponent as IconComponent_2 } from '@backstage/core-plugin-api'; @@ -164,7 +163,6 @@ export type AppTheme = { id: string; title: string; variant: 'light' | 'dark'; - theme: BackstageTheme; icon?: React.ReactElement; Provider?(props: { children: ReactNode }): JSX.Element | null; }; diff --git a/packages/core-plugin-api/src/apis/definitions/AppThemeApi.ts b/packages/core-plugin-api/src/apis/definitions/AppThemeApi.ts index 8053c449a1..7f8aed9573 100644 --- a/packages/core-plugin-api/src/apis/definitions/AppThemeApi.ts +++ b/packages/core-plugin-api/src/apis/definitions/AppThemeApi.ts @@ -16,7 +16,6 @@ import { ReactNode } from 'react'; import { ApiRef, createApiRef } from '../system'; -import { BackstageTheme } from '@backstage/theme'; import { Observable } from '@backstage/types'; /** @@ -40,12 +39,6 @@ export type AppTheme = { */ variant: 'light' | 'dark'; - /** - * The specialized MaterialUI theme instance. - * @deprecated use Provider instead, see https://backstage.io/docs/api/deprecations#app-theme - */ - theme: BackstageTheme; - /** * An Icon for the theme mode setting. */ diff --git a/packages/dev-utils/src/devApp/SidebarThemeSwitcher.test.tsx b/packages/dev-utils/src/devApp/SidebarThemeSwitcher.test.tsx index 43eaa6218c..bc44b69dbb 100644 --- a/packages/dev-utils/src/devApp/SidebarThemeSwitcher.test.tsx +++ b/packages/dev-utils/src/devApp/SidebarThemeSwitcher.test.tsx @@ -16,7 +16,6 @@ import { AppThemeApi, appThemeApiRef } from '@backstage/core-plugin-api'; import { renderInTestApp, TestApiProvider } from '@backstage/test-utils'; -import { BackstageTheme } from '@backstage/theme'; import userEvent from '@testing-library/user-event'; import React from 'react'; import ObservableImpl from 'zen-observable'; @@ -41,13 +40,11 @@ describe('SidebarThemeSwitcher', () => { id: 'dark', title: 'Dark Theme', variant: 'dark', - theme: {} as unknown as BackstageTheme, }, { id: 'light', title: 'Light Theme', variant: 'light', - theme: {} as unknown as BackstageTheme, }, ]); }); diff --git a/plugins/user-settings/src/components/General/UserSettingsThemeToggle.test.tsx b/plugins/user-settings/src/components/General/UserSettingsThemeToggle.test.tsx index 83d9e23f83..09b27cb559 100644 --- a/plugins/user-settings/src/components/General/UserSettingsThemeToggle.test.tsx +++ b/plugins/user-settings/src/components/General/UserSettingsThemeToggle.test.tsx @@ -21,6 +21,8 @@ import { wrapInTestApp, } from '@backstage/test-utils'; import { lightTheme } from '@backstage/theme'; +import { ThemeProvider } from '@material-ui/core/styles'; +import CssBaseline from '@material-ui/core/CssBaseline'; import { fireEvent } from '@testing-library/react'; import React from 'react'; import { UserSettingsThemeToggle } from './UserSettingsThemeToggle'; @@ -30,7 +32,11 @@ const mockTheme: AppTheme = { id: 'light-theme', title: 'Mock Theme', variant: 'light', - theme: lightTheme, + Provider: ({ children }) => ( + + {children} + + ), }; const apiRegistry = TestApiRegistry.from([