release-2021-11-18 packages/core-plugin-api/src/apis/definitions/AppThemeApi.ts:45

Signed-off-by: Colton Padden <colton.padden@fastmail.com>

packages/app-defaults/src/defaults/themes.tsx

@@ -28,7 +28,6 @@ export const themes: AppTheme[] = [
     title: 'Light Theme',
     variant: 'light',
     icon: <LightIcon />,
-    theme: lightTheme,
     Provider: ({ children }) => (
       <ThemeProvider theme={lightTheme}>
         <CssBaseline>{children}</CssBaseline>
@@ -40,7 +39,6 @@ export const themes: AppTheme[] = [
     title: 'Dark Theme',
     variant: 'dark',
     icon: <DarkIcon />,
-    theme: darkTheme,
     Provider: ({ children }) => (
       <ThemeProvider theme={darkTheme}>
         <CssBaseline>{children}</CssBaseline>

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 <appTheme.Provider children={children} />;
+  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 (
-    <ThemeProvider theme={appTheme.theme}>
-      <CssBaseline>{children}</CssBaseline>
-    </ThemeProvider>
-  );
+  return <appTheme.Provider children={children} />;
 }

packages/core-plugin-api/api-report.md

@@ -6,7 +6,6 @@
 /// <reference types="react" />
 
 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;
 };

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.
    */

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,
       },
     ]);
   });

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 }) => (
+    <ThemeProvider theme={lightTheme}>
+      <CssBaseline>{children}</CssBaseline>
+    </ThemeProvider>
+  ),
 };
 
 const apiRegistry = TestApiRegistry.from([