Merge pull request #21425 from backstage/freben/themeee

remove even more BackstageTheme usages

packages/core-components/api-report.md

@@ -8,7 +8,6 @@
 import { ApiRef } from '@backstage/core-plugin-api';
 import { BackstageIdentityApi } from '@backstage/core-plugin-api';
 import { BackstagePalette } from '@backstage/theme';
-import { BackstageTheme } from '@backstage/theme';
 import { BackstageUserIdentity } from '@backstage/core-plugin-api';
 import { BottomNavigationActionProps } from '@material-ui/core/BottomNavigationAction';
 import { ButtonProps as ButtonProps_2 } from '@material-ui/core/Button';

packages/core-components/src/components/CodeSnippet/CodeSnippet.tsx

@@ -13,7 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { BackstageTheme } from '@backstage/theme';
+
 import Box from '@material-ui/core/Box';
 import { useTheme } from '@material-ui/core/styles';
 import React from 'react';
@@ -83,7 +83,7 @@ export function CodeSnippet(props: CodeSnippetProps) {
     customStyle,
     showCopyCodeButton = false,
   } = props;
-  const theme = useTheme<BackstageTheme>();
+  const theme = useTheme();
   const mode = theme.palette.type === 'dark' ? dark : docco;
   const highlightColor = theme.palette.type === 'dark' ? '#256bf3' : '#e6ffed';
 

packages/core-components/src/components/CreateButton/CreateButton.tsx

@@ -14,13 +14,13 @@
  * limitations under the License.
  */
 
-import { BackstageTheme } from '@backstage/theme';
 import Button from '@material-ui/core/Button';
 import IconButton from '@material-ui/core/IconButton';
 import useMediaQuery from '@material-ui/core/useMediaQuery';
 import React from 'react';
 import { Link as RouterLink, LinkProps } from 'react-router-dom';
 import AddCircleOutline from '@material-ui/icons/AddCircleOutline';
+import { Theme } from '@material-ui/core/styles';
 
 /**
  * Properties for {@link CreateButton}
@@ -38,7 +38,7 @@ export type CreateButtonProps = {
  */
 export function CreateButton(props: CreateButtonProps) {
   const { title, to } = props;
-  const isXSScreen = useMediaQuery<BackstageTheme>(theme =>
+  const isXSScreen = useMediaQuery<Theme>(theme =>
     theme.breakpoints.down('xs'),
   );
 

packages/core-components/src/components/DependencyGraph/DefaultLabel.tsx

@@ -16,14 +16,13 @@
 
 import React from 'react';
 import makeStyles from '@material-ui/core/styles/makeStyles';
-import { BackstageTheme } from '@backstage/theme';
 import { DependencyGraphTypes as Types } from './types';
 
 /** @public */
 export type DependencyGraphDefaultLabelClassKey = 'text';
 
 const useStyles = makeStyles(
-  (theme: BackstageTheme) => ({
+  theme => ({
     text: {
       fill: theme.palette.textContrast,
     },

packages/core-components/src/components/DependencyGraph/DefaultNode.tsx

@@ -16,14 +16,13 @@
 
 import React from 'react';
 import { makeStyles } from '@material-ui/core/styles';
-import { BackstageTheme } from '@backstage/theme';
 import { DependencyGraphTypes as Types } from './types';
 
 /** @public */
 export type DependencyGraphDefaultNodeClassKey = 'node' | 'text';
 
 const useStyles = makeStyles(
-  (theme: BackstageTheme) => ({
+  theme => ({
     node: {
       fill: theme.palette.primary.light,
       stroke: theme.palette.primary.light,

packages/core-components/src/components/DependencyGraph/DependencyGraph.tsx

@@ -20,7 +20,6 @@ import * as d3Selection from 'd3-selection';
 import useTheme from '@material-ui/core/styles/useTheme';
 import dagre from 'dagre';
 import debounce from 'lodash/debounce';
-import { BackstageTheme } from '@backstage/theme';
 import { DependencyGraphTypes as Types } from './types';
 import { Node } from './Node';
 import { Edge, GraphEdge } from './Edge';
@@ -205,7 +204,7 @@ export function DependencyGraph<NodeData, EdgeData>(
     fit = 'grow',
     ...svgProps
   } = props;
-  const theme: BackstageTheme = useTheme();
+  const theme = useTheme();
   const [containerWidth, setContainerWidth] = React.useState<number>(100);
   const [containerHeight, setContainerHeight] = React.useState<number>(100);
 

packages/core-components/src/components/DependencyGraph/Edge.tsx

@@ -18,7 +18,6 @@ import React from 'react';
 import * as d3Shape from 'd3-shape';
 import isFinite from 'lodash/isFinite';
 import makeStyles from '@material-ui/core/styles/makeStyles';
-import { BackstageTheme } from '@backstage/theme';
 import { DependencyGraphTypes as Types } from './types';
 import { EDGE_TEST_ID, LABEL_TEST_ID } from './constants';
 import { DefaultLabel } from './DefaultLabel';
@@ -42,7 +41,7 @@ export type GraphEdge<T> = Types.DependencyEdge<T> &
 export type DependencyGraphEdgeClassKey = 'path' | 'label';
 
 const useStyles = makeStyles(
-  (theme: BackstageTheme) => ({
+  theme => ({
     path: {
       strokeWidth: 1,
       stroke: theme.palette.textSubtle,

packages/core-components/src/components/DismissableBanner/DismissableBanner.tsx

@@ -19,7 +19,6 @@ import { useApi, storageApiRef } from '@backstage/core-plugin-api';
 import useObservable from 'react-use/lib/useObservable';
 import classNames from 'classnames';
 import { makeStyles } from '@material-ui/core/styles';
-import { BackstageTheme } from '@backstage/theme';
 import Snackbar from '@material-ui/core/Snackbar';
 import SnackbarContent from '@material-ui/core/SnackbarContent';
 import IconButton from '@material-ui/core/IconButton';
@@ -42,7 +41,7 @@ export type DismissableBannerClassKey =
 export type DismissbleBannerClassKey = DismissableBannerClassKey;
 
 const useStyles = makeStyles(
-  (theme: BackstageTheme) => ({
+  theme => ({
     root: {
       padding: theme.spacing(0),
       marginBottom: theme.spacing(0),

packages/core-components/src/components/EmptyState/MissingAnnotationEmptyState.tsx

@@ -14,7 +14,6 @@
  * limitations under the License.
  */
 
-import { BackstageTheme } from '@backstage/theme';
 import Box from '@material-ui/core/Box';
 import Button from '@material-ui/core/Button';
 import { makeStyles } from '@material-ui/core/styles';
@@ -54,7 +53,7 @@ type Props = {
  */
 export type MissingAnnotationEmptyStateClassKey = 'code';
 
-const useStyles = makeStyles<BackstageTheme>(
+const useStyles = makeStyles(
   theme => ({
     code: {
       borderRadius: 6,

packages/core-components/src/components/HorizontalScrollGrid/HorizontalScrollGrid.tsx

@@ -16,7 +16,7 @@
 import Box from '@material-ui/core/Box';
 import Grid from '@material-ui/core/Grid';
 import IconButton from '@material-ui/core/IconButton';
-import { makeStyles, Theme } from '@material-ui/core/styles';
+import { makeStyles } from '@material-ui/core/styles';
 import ChevronLeftIcon from '@material-ui/icons/ChevronLeft';
 import ChevronRightIcon from '@material-ui/icons/ChevronRight';
 import classNames from 'classnames';
@@ -68,7 +68,7 @@ export type HorizontalScrollGridClassKey =
   | 'buttonLeft'
   | 'buttonRight';
 
-const useStyles = makeStyles<Theme>(
+const useStyles = makeStyles(
   theme => ({
     root: {
       position: 'relative',

packages/core-components/src/components/MarkdownContent/MarkdownContent.tsx

@@ -18,13 +18,12 @@ import { makeStyles } from '@material-ui/core/styles';
 import ReactMarkdown, { Options } from 'react-markdown';
 import gfm from 'remark-gfm';
 import React from 'react';
-import { BackstageTheme } from '@backstage/theme';
 import { CodeSnippet } from '../CodeSnippet';
 import { HeadingProps } from 'react-markdown/lib/ast-to-react';
 
 export type MarkdownContentClassKey = 'markdown';
 
-const useStyles = makeStyles<BackstageTheme>(
+const useStyles = makeStyles(
   theme => ({
     markdown: {
       '& table': {

packages/core-components/src/components/OAuthRequestDialog/LoginRequestListItem.tsx

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { makeStyles, Theme } from '@material-ui/core/styles';
+import { makeStyles } from '@material-ui/core/styles';
 import ListItem from '@material-ui/core/ListItem';
 import ListItemAvatar from '@material-ui/core/ListItemAvatar';
 import ListItemText from '@material-ui/core/ListItemText';
@@ -26,7 +26,7 @@ import { PendingOAuthRequest } from '@backstage/core-plugin-api';
 
 export type LoginRequestListItemClassKey = 'root';
 
-const useItemStyles = makeStyles<Theme>(
+const useItemStyles = makeStyles(
   theme => ({
     root: {
       paddingLeft: theme.spacing(3),

packages/core-components/src/components/OAuthRequestDialog/OAuthRequestDialog.tsx

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { makeStyles, Theme } from '@material-ui/core/styles';
+import { makeStyles } from '@material-ui/core/styles';
 import Dialog from '@material-ui/core/Dialog';
 import DialogActions from '@material-ui/core/DialogActions';
 import DialogContent from '@material-ui/core/DialogContent';
@@ -37,7 +37,7 @@ export type OAuthRequestDialogClassKey =
   | 'contentList'
   | 'actionButtons';
 
-const useStyles = makeStyles<Theme>(
+const useStyles = makeStyles(
   theme => ({
     dialog: {
       paddingTop: theme.spacing(1),

packages/core-components/src/components/Progress/Progress.tsx

@@ -13,7 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { BackstageTheme } from '@backstage/theme';
+
 import Box from '@material-ui/core/Box';
 import LinearProgress, {
   LinearProgressProps,
@@ -22,7 +22,7 @@ import { useTheme } from '@material-ui/core/styles';
 import React, { PropsWithChildren, useEffect, useState } from 'react';
 
 export function Progress(props: PropsWithChildren<LinearProgressProps>) {
-  const theme = useTheme<BackstageTheme>();
+  const theme = useTheme();
   const [isVisible, setIsVisible] = useState(false);
 
   useEffect(() => {

packages/core-components/src/components/ProgressBars/Gauge.tsx

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { BackstagePalette, BackstageTheme } from '@backstage/theme';
+import { BackstagePalette } from '@backstage/theme';
 import { makeStyles, useTheme } from '@material-ui/core/styles';
 import { Circle } from 'rc-progress';
 import React, { ReactNode, useEffect, useState } from 'react';
@@ -28,7 +28,7 @@ export type GaugeClassKey =
   | 'circle'
   | 'colorUnknown';
 
-const useStyles = makeStyles<BackstageTheme>(
+const useStyles = makeStyles(
   theme => ({
     root: {
       position: 'relative',
@@ -123,7 +123,7 @@ export function Gauge(props: GaugeProps) {
   const [hoverRef, setHoverRef] = useState<HTMLDivElement | null>(null);
   const { getColor = getProgressColor } = props;
   const classes = useStyles(props);
-  const { palette } = useTheme<BackstageTheme>();
+  const { palette } = useTheme();
   const { value, fractional, inverse, unit, max, description } = {
     ...defaultGaugeProps,
     ...props,

packages/core-components/src/components/ProgressBars/LinearGauge.tsx

@@ -13,7 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { BackstageTheme } from '@backstage/theme';
+
 import { useTheme } from '@material-ui/core/styles';
 import Tooltip from '@material-ui/core/Tooltip';
 import Typography from '@material-ui/core/Typography';
@@ -33,7 +33,7 @@ type Props = {
 
 export function LinearGauge(props: Props) {
   const { value, getColor = getProgressColor, width = 'thick' } = props;
-  const { palette } = useTheme<BackstageTheme>();
+  const { palette } = useTheme();
   if (isNaN(value)) {
     return null;
   }

packages/core-components/src/components/Status/Status.tsx

@@ -13,7 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { BackstageTheme } from '@backstage/theme';
+
 import { makeStyles } from '@material-ui/core/styles';
 import Typography from '@material-ui/core/Typography';
 import classNames from 'classnames';
@@ -28,7 +28,7 @@ export type StatusClassKey =
   | 'running'
   | 'aborted';
 
-const useStyles = makeStyles<BackstageTheme>(
+const useStyles = makeStyles(
   theme => ({
     status: {
       fontWeight: theme.typography.fontWeightMedium,

packages/core-components/src/components/SupportButton/SupportButton.tsx

@@ -13,8 +13,8 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+
 import { useApp } from '@backstage/core-plugin-api';
-import { BackstageTheme } from '@backstage/theme';
 import Box from '@material-ui/core/Box';
 import Button from '@material-ui/core/Button';
 import DialogActions from '@material-ui/core/DialogActions';
@@ -24,7 +24,7 @@ import ListItemText from '@material-ui/core/ListItemText';
 import MenuItem from '@material-ui/core/MenuItem';
 import MenuList from '@material-ui/core/MenuList';
 import Popover from '@material-ui/core/Popover';
-import { makeStyles } from '@material-ui/core/styles';
+import { Theme, makeStyles } from '@material-ui/core/styles';
 import Typography from '@material-ui/core/Typography';
 import useMediaQuery from '@material-ui/core/useMediaQuery';
 import React, { MouseEventHandler, useState } from 'react';
@@ -91,7 +91,7 @@ export function SupportButton(props: SupportButtonProps) {
   const [popoverOpen, setPopoverOpen] = useState(false);
   const [anchorEl, setAnchorEl] = useState<Element | null>(null);
   const classes = useStyles();
-  const isSmallScreen = useMediaQuery<BackstageTheme>(theme =>
+  const isSmallScreen = useMediaQuery<Theme>(theme =>
     theme.breakpoints.down('sm'),
   );
 

packages/core-components/src/components/Table/Filters.tsx

@@ -13,7 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { BackstageTheme } from '@backstage/theme';
+
 import Box from '@material-ui/core/Box';
 import Button from '@material-ui/core/Button';
 import { makeStyles } from '@material-ui/core/styles';
@@ -24,7 +24,7 @@ import { SelectProps } from '../Select/Select';
 
 export type TableFiltersClassKey = 'root' | 'value' | 'heder' | 'filters';
 
-const useFilterStyles = makeStyles<BackstageTheme>(
+const useFilterStyles = makeStyles(
   theme => ({
     root: {
       height: '100%',

packages/core-components/src/components/Table/SubvalueCell.tsx

@@ -13,14 +13,14 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { BackstageTheme } from '@backstage/theme';
+
 import Box from '@material-ui/core/Box';
 import { makeStyles } from '@material-ui/core/styles';
 import React from 'react';
 
 export type SubvalueCellClassKey = 'value' | 'subvalue';
 
-const useSubvalueCellStyles = makeStyles<BackstageTheme>(
+const useSubvalueCellStyles = makeStyles(
   theme => ({
     value: {
       marginBottom: theme.spacing(0.75),

packages/core-components/src/components/Table/Table.tsx

@@ -13,7 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { BackstageTheme } from '@backstage/theme';
+
 import MTable, {
   Column,
   Icons,
@@ -25,7 +25,12 @@ import MTable, {
 } from '@material-table/core';
 import Box from '@material-ui/core/Box';
 import IconButton from '@material-ui/core/IconButton';
-import { makeStyles, useTheme, withStyles } from '@material-ui/core/styles';
+import {
+  makeStyles,
+  Theme,
+  useTheme,
+  withStyles,
+} from '@material-ui/core/styles';
 import Typography from '@material-ui/core/Typography';
 import AddBox from '@material-ui/icons/AddBox';
 import ArrowUpward from '@material-ui/icons/ArrowUpward';
@@ -136,7 +141,7 @@ const StyledMTableToolbar = withStyles(
 /** @public */
 export type FiltersContainerClassKey = 'root' | 'title';
 
-const useFilterStyles = makeStyles<BackstageTheme>(
+const useFilterStyles = makeStyles(
   theme => ({
     root: {
       display: 'flex',
@@ -154,7 +159,7 @@ const useFilterStyles = makeStyles<BackstageTheme>(
 
 export type TableClassKey = 'root';
 
-const useTableStyles = makeStyles<BackstageTheme>(
+const useTableStyles = makeStyles(
   () => ({
     root: {
       display: 'flex',
@@ -166,7 +171,7 @@ const useTableStyles = makeStyles<BackstageTheme>(
 
 function convertColumns<T extends object>(
   columns: TableColumn<T>[],
-  theme: BackstageTheme,
+  theme: Theme,
 ): TableColumn<T>[] {
   return columns.map(column => {
     const headerStyle: React.CSSProperties = column.headerStyle ?? {};
@@ -316,7 +321,7 @@ export function Table<T extends object = {}>(props: TableProps<T>) {
   } = props;
   const tableClasses = useTableStyles();
 
-  const theme = useTheme<BackstageTheme>();
+  const theme = useTheme();
 
   const calculatedInitialState = { ...defaultInitialState, ...initialState };
 

packages/core-components/src/components/TrendLine/TrendLine.tsx

@@ -21,10 +21,9 @@ import {
   SparklinesLineProps,
   SparklinesProps,
 } from 'react-sparklines';
-import { useTheme } from '@material-ui/core/styles';
-import { BackstageTheme } from '@backstage/theme';
+import { Theme, useTheme } from '@material-ui/core/styles';
 
-function color(data: number[], theme: BackstageTheme): string | undefined {
+function color(data: number[], theme: Theme): string | undefined {
   const lastNum = data[data.length - 1];
   if (!lastNum) return undefined;
   if (lastNum >= 0.9) return theme.palette.status.ok;
@@ -36,7 +35,7 @@ export function TrendLine(
   props: SparklinesProps &
     Pick<SparklinesLineProps, 'color'> & { title?: string },
 ) {
-  const theme = useTheme<BackstageTheme>();
+  const theme = useTheme();
 
   if (!props.data) return null;
   return (

packages/core-components/src/components/WarningPanel/WarningPanel.tsx

@@ -13,8 +13,8 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { BackstageTheme } from '@backstage/theme';
-import { makeStyles, darken, lighten } from '@material-ui/core/styles';
+
+import { makeStyles, darken, lighten, Theme } from '@material-ui/core/styles';
 import Accordion from '@material-ui/core/Accordion';
 import AccordionSummary from '@material-ui/core/AccordionSummary';
 import AccordionDetails from '@material-ui/core/AccordionDetails';
@@ -27,7 +27,7 @@ import { MarkdownContent } from '../MarkdownContent';
 
 const getWarningTextColor = (
   severity: NonNullable<WarningProps['severity']>,
-  theme: BackstageTheme,
+  theme: Theme,
 ) => {
   const getColor = theme.palette.type === 'light' ? darken : lighten;
   return getColor(theme.palette[severity].light, 0.6);
@@ -35,13 +35,13 @@ const getWarningTextColor = (
 
 const getWarningBackgroundColor = (
   severity: NonNullable<WarningProps['severity']>,
-  theme: BackstageTheme,
+  theme: Theme,
 ) => {
   const getBackgroundColor = theme.palette.type === 'light' ? lighten : darken;
   return getBackgroundColor(theme.palette[severity].light, 0.9);
 };
 
-const useErrorOutlineStyles = makeStyles<BackstageTheme>(theme => ({
+const useErrorOutlineStyles = makeStyles(theme => ({
   root: {
     marginRight: theme.spacing(1),
     fill: ({ severity }: WarningProps) =>
@@ -68,7 +68,7 @@ export type WarningPanelClassKey =
   | 'message'
   | 'details';
 
-const useStyles = makeStyles<BackstageTheme>(
+const useStyles = makeStyles(
   theme => ({
     panel: {
       backgroundColor: ({ severity }: WarningProps) =>

packages/core-components/src/layout/BottomLink/BottomLink.tsx

@@ -14,7 +14,6 @@
  * limitations under the License.
  */
 
-import { BackstageTheme } from '@backstage/theme';
 import Box from '@material-ui/core/Box';
 import Divider from '@material-ui/core/Divider';
 import { makeStyles } from '@material-ui/core/styles';
@@ -26,7 +25,7 @@ import { Link } from '../../components/Link';
 /** @public */
 export type BottomLinkClassKey = 'root' | 'boxTitle' | 'arrow';
 
-const useStyles = makeStyles<BackstageTheme>(
+const useStyles = makeStyles(
   theme => ({
     root: {
       maxWidth: 'fit-content',

packages/core-components/src/layout/ErrorPage/ErrorPage.tsx

@@ -14,7 +14,6 @@
  * limitations under the License.
  */
 
-import { BackstageTheme } from '@backstage/theme';
 import Grid from '@material-ui/core/Grid';
 import { makeStyles } from '@material-ui/core/styles';
 import Typography from '@material-ui/core/Typography';
@@ -34,7 +33,7 @@ interface IErrorPageProps {
 /** @public */
 export type ErrorPageClassKey = 'container' | 'title' | 'subtitle';
 
-const useStyles = makeStyles<BackstageTheme>(
+const useStyles = makeStyles(
   theme => ({
     container: {
       padding: theme.spacing(8),

packages/core-components/src/layout/Header/Header.tsx

@@ -15,7 +15,6 @@
  */
 
 import { configApiRef, useApi } from '@backstage/core-plugin-api';
-import { BackstageTheme } from '@backstage/theme';
 import Box from '@material-ui/core/Box';
 import Grid from '@material-ui/core/Grid';
 import { makeStyles } from '@material-ui/core/styles';
@@ -39,7 +38,7 @@ export type HeaderClassKey =
   | 'breadcrumbType'
   | 'breadcrumbTitle';
 
-const useStyles = makeStyles<BackstageTheme>(
+const useStyles = makeStyles(
   theme => ({
     header: {
       gridArea: 'pageHeader',

packages/core-components/src/layout/HeaderLabel/HeaderLabel.tsx

@@ -14,7 +14,6 @@
  * limitations under the License.
  */
 
-import { BackstageTheme } from '@backstage/theme';
 import Grid from '@material-ui/core/Grid';
 import { alpha, makeStyles } from '@material-ui/core/styles';
 import Typography from '@material-ui/core/Typography';
@@ -24,7 +23,7 @@ import { Link } from '../../components/Link';
 /** @public */
 export type HeaderLabelClassKey = 'root' | 'label' | 'value';
 
-const useStyles = makeStyles<BackstageTheme>(
+const useStyles = makeStyles(
   theme => ({
     root: {
       textAlign: 'left',

packages/core-components/src/layout/ItemCard/ItemCardHeader.tsx

@@ -13,16 +13,21 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { BackstageTheme } from '@backstage/theme';
+
 import Box from '@material-ui/core/Box';
-import { createStyles, makeStyles, WithStyles } from '@material-ui/core/styles';
+import {
+  createStyles,
+  makeStyles,
+  Theme,
+  WithStyles,
+} from '@material-ui/core/styles';
 import Typography from '@material-ui/core/Typography';
 import React from 'react';
 
 /** @public */
 export type ItemCardHeaderClassKey = 'root';
 
-const styles = (theme: BackstageTheme) =>
+const styles = (theme: Theme) =>
   createStyles({
     root: {
       color: theme.palette.common.white,

packages/core-components/src/layout/Page/Page.tsx

@@ -15,12 +15,11 @@
  */
 
 import React from 'react';
-import { BackstageTheme } from '@backstage/theme';
-import { makeStyles, ThemeProvider } from '@material-ui/core/styles';
+import { makeStyles, Theme, ThemeProvider } from '@material-ui/core/styles';
 
 export type PageClassKey = 'root';
 
-const useStyles = makeStyles<BackstageTheme>(
+const useStyles = makeStyles(
   theme => ({
     root: {
       display: 'grid',
@@ -53,7 +52,7 @@ export function Page(props: Props) {
   const classes = useStyles();
   return (
     <ThemeProvider
-      theme={(baseTheme: BackstageTheme) => ({
+      theme={(baseTheme: Theme) => ({
         ...baseTheme,
         page: baseTheme.getPageTheme({ themeId }),
       })}

packages/core-components/src/layout/Sidebar/Bar.tsx

@@ -14,10 +14,9 @@
  * limitations under the License.
  */
 
-import { BackstageTheme } from '@backstage/theme';
 import Box from '@material-ui/core/Box';
 import Button from '@material-ui/core/Button';
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles, Theme } from '@material-ui/core/styles';
 import useMediaQuery from '@material-ui/core/useMediaQuery';
 import classnames from 'classnames';
 import React, { useContext, useRef, useState } from 'react';
@@ -38,7 +37,7 @@ import { useSidebarPinState } from './SidebarPinStateContext';
 
 /** @public */
 export type SidebarClassKey = 'drawer' | 'drawerOpen';
-const useStyles = makeStyles<BackstageTheme, { sidebarConfig: SidebarConfig }>(
+const useStyles = makeStyles<Theme, { sidebarConfig: SidebarConfig }>(
   theme => ({
     drawer: {
       display: 'flex',
@@ -133,7 +132,7 @@ const DesktopSidebar = (props: DesktopSidebarProps) => {
   } = props;
 
   const classes = useStyles({ sidebarConfig });
-  const isSmallScreen = useMediaQuery<BackstageTheme>(
+  const isSmallScreen = useMediaQuery<Theme>(
     theme => theme.breakpoints.down('md'),
     { noSsr: true },
   );

packages/core-components/src/layout/Sidebar/Intro.tsx

@@ -13,11 +13,11 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { BackstageTheme } from '@backstage/theme';
+
 import Box from '@material-ui/core/Box';
 import Collapse from '@material-ui/core/Collapse';
 import IconButton from '@material-ui/core/IconButton';
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles, Theme } from '@material-ui/core/styles';
 import Typography from '@material-ui/core/Typography';
 import CloseIcon from '@material-ui/icons/Close';
 import { useLocalStorageValue } from '@react-hookz/web';
@@ -39,7 +39,7 @@ export type SidebarIntroClassKey =
   | 'introDismissText'
   | 'introDismissIcon';
 
-const useStyles = makeStyles<BackstageTheme, { sidebarConfig: SidebarConfig }>(
+const useStyles = makeStyles<Theme, { sidebarConfig: SidebarConfig }>(
   theme => ({
     introCard: props => ({
       color: '#b5b5b5',

packages/core-components/src/layout/Sidebar/Items.tsx

@@ -13,12 +13,12 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+
 import {
   IconComponent,
   useAnalytics,
   useElementFilter,
 } from '@backstage/core-plugin-api';
-import { BackstageTheme } from '@backstage/theme';
 import Badge from '@material-ui/core/Badge';
 import Box from '@material-ui/core/Box';
 import { makeStyles, styled, Theme } from '@material-ui/core/styles';
@@ -90,7 +90,7 @@ export type SidebarItemClassKey =
   | 'selected';
 
 const makeSidebarStyles = (sidebarConfig: SidebarConfig) =>
-  makeStyles<BackstageTheme>(
+  makeStyles(
     theme => ({
       root: {
         color: theme.palette.navigation.color,
@@ -501,7 +501,7 @@ const SidebarItemWithSubmenu = ({
   const [isHoveredOn, setIsHoveredOn] = useState(false);
   const location = useLocation();
   const isActive = useLocationMatch(children, location);
-  const isSmallScreen = useMediaQuery<BackstageTheme>((theme: BackstageTheme) =>
+  const isSmallScreen = useMediaQuery((theme: Theme) =>
     theme.breakpoints.down('sm'),
   );
 
@@ -726,7 +726,7 @@ export const SidebarExpandButton = () => {
   const { sidebarConfig } = useContext(SidebarConfigContext);
   const classes = useMemoStyles(sidebarConfig);
   const { isOpen, setOpen } = useSidebarOpenState();
-  const isSmallScreen = useMediaQuery<BackstageTheme>(
+  const isSmallScreen = useMediaQuery<Theme>(
     theme => theme.breakpoints.down('md'),
     { noSsr: true },
   );

packages/core-components/src/layout/Sidebar/MobileSidebar.tsx

@@ -15,11 +15,10 @@
  */
 
 import { useElementFilter } from '@backstage/core-plugin-api';
-import { BackstageTheme } from '@backstage/theme';
 import BottomNavigation from '@material-ui/core/BottomNavigation';
 import Box from '@material-ui/core/Box';
 import IconButton from '@material-ui/core/IconButton';
-import { makeStyles } from '@material-ui/core/styles';
+import { Theme, makeStyles } from '@material-ui/core/styles';
 import Drawer from '@material-ui/core/Drawer';
 import Typography from '@material-ui/core/Typography';
 import CloseIcon from '@material-ui/icons/Close';
@@ -51,7 +50,7 @@ type OverlayMenuProps = {
   children?: React.ReactNode;
 };
 
-const useStyles = makeStyles<BackstageTheme, { sidebarConfig: SidebarConfig }>(
+const useStyles = makeStyles<Theme, { sidebarConfig: SidebarConfig }>(
   theme => ({
     root: {
       position: 'fixed',

packages/core-components/src/layout/Sidebar/Page.tsx

@@ -13,9 +13,9 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { BackstageTheme } from '@backstage/theme';
+
 import Box from '@material-ui/core/Box';
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles, Theme } from '@material-ui/core/styles';
 import useMediaQuery from '@material-ui/core/useMediaQuery';
 import React, {
   createContext,
@@ -34,7 +34,7 @@ import { SidebarPinStateProvider } from './SidebarPinStateContext';
 export type SidebarPageClassKey = 'root';
 
 const useStyles = makeStyles<
-  BackstageTheme,
+  Theme,
   { sidebarConfig: SidebarConfig; isPinned: boolean }
 >(
   theme => ({
@@ -107,10 +107,9 @@ export function SidebarPage(props: SidebarPageProps) {
     LocalStorage.setSidebarPinState(isPinned);
   }, [isPinned]);
 
-  const isMobile = useMediaQuery<BackstageTheme>(
-    theme => theme.breakpoints.down('xs'),
-    { noSsr: true },
-  );
+  const isMobile = useMediaQuery<Theme>(theme => theme.breakpoints.down('xs'), {
+    noSsr: true,
+  });
 
   const toggleSidebarPinState = () => setIsPinned(!isPinned);
 

packages/core-components/src/layout/Sidebar/SidebarGroup.tsx

@@ -15,11 +15,10 @@
  * limitations under the License.
  */
 
-import { BackstageTheme } from '@backstage/theme';
 import BottomNavigationAction, {
   BottomNavigationActionProps,
 } from '@material-ui/core/BottomNavigationAction';
-import { makeStyles } from '@material-ui/core/styles';
+import { Theme, makeStyles } from '@material-ui/core/styles';
 import React, { useContext } from 'react';
 import { useLocation } from 'react-router-dom';
 import { Link } from '../../components/Link/Link';
@@ -48,7 +47,7 @@ export interface SidebarGroupProps extends BottomNavigationActionProps {
   children?: React.ReactNode;
 }
 
-const useStyles = makeStyles<BackstageTheme, { sidebarConfig: SidebarConfig }>(
+const useStyles = makeStyles<Theme, { sidebarConfig: SidebarConfig }>(
   theme => ({
     root: {
       flexGrow: 0,

packages/core-components/src/layout/Sidebar/SidebarSubmenu.tsx

@@ -13,9 +13,9 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { BackstageTheme } from '@backstage/theme';
+
 import Box from '@material-ui/core/Box';
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles, Theme } from '@material-ui/core/styles';
 import Typography from '@material-ui/core/Typography';
 import classnames from 'classnames';
 import React, { ReactNode, useContext, useEffect, useState } from 'react';
@@ -28,7 +28,7 @@ import {
 import { useSidebarOpenState } from './SidebarOpenStateContext';
 
 const useStyles = makeStyles<
-  BackstageTheme,
+  Theme,
   { submenuConfig: SubmenuConfig; left: number }
 >(
   theme => ({

packages/core-components/src/layout/Sidebar/SidebarSubmenuItem.tsx

@@ -13,6 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+
 import React, { useContext, useState } from 'react';
 import { resolvePath, useLocation, useResolvedPath } from 'react-router-dom';
 import { makeStyles } from '@material-ui/core/styles';
@@ -21,7 +22,6 @@ import Typography from '@material-ui/core/Typography';
 import { Link } from '../../components/Link';
 import { IconComponent } from '@backstage/core-plugin-api';
 import classnames from 'classnames';
-import { BackstageTheme } from '@backstage/theme';
 import ArrowDropDownIcon from '@material-ui/icons/ArrowDropDown';
 import ArrowDropUpIcon from '@material-ui/icons/ArrowDropUp';
 import { SidebarItemWithSubmenuContext } from './config';
@@ -29,7 +29,7 @@ import { isLocationMatch } from './utils';
 import Box from '@material-ui/core/Box';
 import Button from '@material-ui/core/Button';
 
-const useStyles = makeStyles<BackstageTheme>(
+const useStyles = makeStyles(
   theme => ({
     item: {
       height: 48,

packages/dev-utils/src/components/EntityGridItem/EntityGridItem.tsx

@@ -16,11 +16,10 @@
 
 import { Entity } from '@backstage/catalog-model';
 import { EntityProvider } from '@backstage/plugin-catalog-react';
-import { BackstageTheme } from '@backstage/theme';
-import { Grid, GridProps, makeStyles } from '@material-ui/core';
+import { Grid, GridProps, Theme, makeStyles } from '@material-ui/core';
 import React from 'react';
 
-const useStyles = makeStyles<BackstageTheme, { entity: Entity }>(theme => ({
+const useStyles = makeStyles<Theme, { entity: Entity }>(theme => ({
   root: ({ entity }) => ({
     position: 'relative',
 

plugins/airbrake/src/components/EntityAirbrakeWidget/EntityAirbrakeWidget.tsx

@@ -22,7 +22,6 @@ import {
   Progress,
 } from '@backstage/core-components';
 import { useApi } from '@backstage/core-plugin-api';
-import { BackstageTheme } from '@backstage/theme';
 import { Grid, Typography } from '@material-ui/core';
 import { makeStyles } from '@material-ui/core/styles';
 import React from 'react';
@@ -31,11 +30,11 @@ import { airbrakeApiRef } from '../../api';
 import { MissingAnnotationEmptyState } from '@backstage/plugin-catalog-react';
 import { AIRBRAKE_PROJECT_ID_ANNOTATION, useProjectId } from '../useProjectId';
 
-const useStyles = makeStyles<BackstageTheme>(() => ({
+const useStyles = makeStyles({
   multilineText: {
     whiteSpace: 'pre-wrap',
   },
-}));
+});
 
 export const EntityAirbrakeWidget = ({ entity }: { entity: Entity }) => {
   const classes = useStyles();

plugins/api-docs/src/components/ApiDefinitionDialog/ApiDefinitionDialog.tsx

@@ -16,7 +16,6 @@
 
 import { ApiEntity } from '@backstage/catalog-model';
 import { useApi } from '@backstage/core-plugin-api';
-import { BackstageTheme } from '@backstage/theme';
 import {
   Box,
   Button,
@@ -33,7 +32,7 @@ import React, { useEffect } from 'react';
 import { apiDocsConfigRef } from '../../config';
 import { PlainApiDefinitionWidget } from '../PlainApiDefinitionWidget';
 
-const useStyles = makeStyles<BackstageTheme>(theme => ({
+const useStyles = makeStyles(theme => ({
   fullHeightDialog: {
     height: 'calc(100% - 64px)',
   },

plugins/api-docs/src/components/GraphQlDefinitionWidget/GraphQlDefinition.tsx

@@ -14,7 +14,6 @@
  * limitations under the License.
  */
 
-import { BackstageTheme } from '@backstage/theme';
 import { makeStyles } from '@material-ui/core/styles';
 import {
   DocExplorer,
@@ -26,7 +25,7 @@ import 'graphiql/graphiql.css';
 import { buildSchema } from 'graphql';
 import React from 'react';
 
-const useStyles = makeStyles<BackstageTheme>(() => ({
+const useStyles = makeStyles({
   root: {
     height: '100%',
     display: 'flex',
@@ -46,7 +45,7 @@ const useStyles = makeStyles<BackstageTheme>(() => ({
       },
     },
   },
-}));
+});
 
 type Props = {
   definition: string;

plugins/api-docs/src/components/GrpcApiDefinitionWidget/GrpcApiDefinitionWidget.tsx

@@ -17,7 +17,6 @@
 import React from 'react';
 import { CodeSnippet } from '@backstage/core-components';
 import { useTheme } from '@material-ui/core/styles';
-import { BackstageTheme } from '@backstage/theme';
 
 /** @public */
 export type GrpcApiDefinitionWidgetProps = {
@@ -28,7 +27,7 @@ export type GrpcApiDefinitionWidgetProps = {
 export const GrpcApiDefinitionWidget = (
   props: GrpcApiDefinitionWidgetProps,
 ) => {
-  const theme = useTheme<BackstageTheme>();
+  const theme = useTheme();
   return (
     <CodeSnippet
       customStyle={{ backgroundColor: theme.palette.background.default }}

plugins/api-docs/src/components/TrpcDefinitionWidget/TrpcApiDefinitionWidget.tsx

@@ -16,7 +16,6 @@
 import React from 'react';
 import { CodeSnippet } from '@backstage/core-components';
 import { useTheme } from '@material-ui/core/styles';
-import { BackstageTheme } from '@backstage/theme';
 
 /** @public */
 export type TrpcApiDefinitionWidgetProps = {
@@ -28,7 +27,7 @@ export const TrpcApiDefinitionWidget = (
   props: TrpcApiDefinitionWidgetProps,
 ) => {
   const { definition } = props;
-  const theme = useTheme<BackstageTheme>();
+  const theme = useTheme();
   return (
     <CodeSnippet
       customStyle={{ backgroundColor: theme.palette.background.default }}

plugins/apollo-explorer/src/components/ApolloExplorerBrowser/ApolloExplorerBrowser.tsx

@@ -13,14 +13,14 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+
 import React, { useState } from 'react';
 import { Divider, makeStyles, Tab, Tabs } from '@material-ui/core';
-import { BackstageTheme } from '@backstage/theme';
 import { JSONObject } from '@apollo/explorer/src/helpers/types';
 import { ApolloExplorer } from '@apollo/explorer/react';
 import { Content } from '@backstage/core-components';
 
-const useStyles = makeStyles<BackstageTheme>(theme => ({
+const useStyles = makeStyles(theme => ({
   tabs: {
     background: theme.palette.background.paper,
   },

plugins/azure-sites/src/components/AzureSitesOverviewTableComponent/AzureSitesOverviewTable.tsx

@@ -39,7 +39,6 @@ import OpenInNewIcon from '@material-ui/icons/OpenInNew';
 import { DateTime } from 'luxon';
 import { useApi } from '@backstage/core-plugin-api';
 import { azureSiteApiRef } from '../../api';
-import { BackstageTheme } from '@backstage/theme';
 
 type States = 'Waiting' | 'Running' | 'Paused' | 'Failed' | 'Stopped';
 type Kinds = 'app' | 'functionapp';
@@ -50,7 +49,7 @@ const State = ({ value }: { value: States }) => {
       common: { black },
       status: { ok, error },
     },
-  } = useTheme<BackstageTheme>();
+  } = useTheme();
 
   const colorMap = {
     Waiting: '#dcbc21',

plugins/catalog-graph/README.md

@@ -90,7 +90,7 @@ To use the catalog graph plugin, you have to add some things to your Backstage a
 Copy the default implementation `DefaultRenderNode.tsx` and add more classes to the styles:
 
 ```typescript
-const useStyles = makeStyles<Theme>(
+const useStyles = makeStyles(
     theme => ({
         node: {
             …

plugins/catalog-react/src/components/CatalogFilterLayout/CatalogFilterLayout.tsx

@@ -20,12 +20,12 @@ import {
   Button,
   Drawer,
   Grid,
+  Theme,
   Typography,
   useMediaQuery,
   useTheme,
 } from '@material-ui/core';
 import FilterListIcon from '@material-ui/icons/FilterList';
-import { BackstageTheme } from '@backstage/theme';
 
 /** @public */
 export const Filters = (props: {
@@ -35,10 +35,10 @@ export const Filters = (props: {
     drawerAnchor?: 'left' | 'right' | 'top' | 'bottom';
   };
 }) => {
-  const isScreenSmallerThanBreakpoint = useMediaQuery<BackstageTheme>(theme =>
+  const isScreenSmallerThanBreakpoint = useMediaQuery((theme: Theme) =>
     theme.breakpoints.down(props.options?.drawerBreakpoint ?? 'md'),
   );
-  const theme = useTheme<BackstageTheme>();
+  const theme = useTheme();
   const [filterDrawerOpen, setFilterDrawerOpen] = useState<boolean>(false);
 
   return isScreenSmallerThanBreakpoint ? (

plugins/catalog-react/src/components/MissingAnnotationEmptyState/MissingAnnotationEmptyState.tsx

@@ -14,7 +14,6 @@
  * limitations under the License.
  */
 
-import { BackstageTheme } from '@backstage/theme';
 import Box from '@material-ui/core/Box';
 import Button from '@material-ui/core/Button';
 import { makeStyles } from '@material-ui/core/styles';
@@ -27,7 +26,7 @@ import { useEntity } from '../../hooks';
 /** @public */
 export type MissingAnnotationEmptyStateClassKey = 'code';
 
-const useStyles = makeStyles<BackstageTheme>(
+const useStyles = makeStyles(
   theme => ({
     code: {
       borderRadius: 6,

plugins/catalog-react/src/components/UserListPicker/UserListPicker.tsx

@@ -27,7 +27,6 @@ import {
   ListItemText,
   makeStyles,
   MenuItem,
-  Theme,
   Typography,
 } from '@material-ui/core';
 import SettingsIcon from '@material-ui/icons/Settings';
@@ -48,7 +47,7 @@ export type CatalogReactUserListPickerClassKey =
   | 'menuItem'
   | 'groupWrapper';
 
-const useStyles = makeStyles<Theme>(
+const useStyles = makeStyles(
   theme => ({
     root: {
       backgroundColor: 'rgba(0, 0, 0, .11)',

plugins/catalog/src/components/EntityLabelsCard/EntityLabelsEmptyState.tsx

@@ -14,7 +14,6 @@
  * limitations under the License.
  */
 
-import { BackstageTheme } from '@backstage/theme';
 import { Button, makeStyles, Typography } from '@material-ui/core';
 import React from 'react';
 import { CodeSnippet } from '@backstage/core-components';
@@ -24,7 +23,7 @@ const ENTITY_YAML = `metadata:
   labels:
     javaVersion: 1.2.3`;
 
-const useStyles = makeStyles<BackstageTheme>(
+const useStyles = makeStyles(
   theme => ({
     code: {
       borderRadius: 6,

plugins/catalog/src/components/EntityLinksCard/EntityLinksEmptyState.tsx

@@ -14,7 +14,6 @@
  * limitations under the License.
  */
 
-import { BackstageTheme } from '@backstage/theme';
 import { Button, makeStyles, Typography } from '@material-ui/core';
 import React from 'react';
 import { CodeSnippet } from '@backstage/core-components';
@@ -29,7 +28,7 @@ const ENTITY_YAML = `metadata:
 /** @public */
 export type EntityLinksEmptyStateClassKey = 'code';
 
-const useStyles = makeStyles<BackstageTheme>(
+const useStyles = makeStyles(
   theme => ({
     code: {
       borderRadius: 6,

plugins/catalog/src/components/EntityNotFound/EntityNotFound.tsx

@@ -17,10 +17,9 @@
 import React from 'react';
 import { Grid, Button, Typography } from '@material-ui/core';
 import { makeStyles } from '@material-ui/core/styles';
-import { BackstageTheme } from '@backstage/theme';
 import { Illo } from './Illo';
 
-const useStyles = makeStyles<BackstageTheme>(theme => ({
+const useStyles = makeStyles(theme => ({
   container: {
     paddingTop: theme.spacing(24),
     paddingLeft: theme.spacing(8),

plugins/cicd-statistics/src/components/chart-filters.tsx

@@ -27,7 +27,6 @@ import {
   Switch,
   Tooltip,
   Typography,
-  Theme,
   makeStyles,
 } from '@material-ui/core';
 import ShowChartIcon from '@material-ui/icons/ShowChart';
@@ -54,7 +53,7 @@ import { Toggle } from './toggle';
 import { DurationSlider } from './duration-slider';
 import { Label } from './label';
 
-export const useStyles = makeStyles<Theme>(
+export const useStyles = makeStyles(
   theme => ({
     rootCard: {
       padding: theme.spacing(0, 0, 0, 0),

plugins/cicd-statistics/src/components/label.tsx

@@ -15,9 +15,9 @@
  */
 
 import React, { PropsWithChildren } from 'react';
-import { Typography, Theme, makeStyles } from '@material-ui/core';
+import { Typography, makeStyles } from '@material-ui/core';
 
-export const useStyles = makeStyles<Theme>(
+export const useStyles = makeStyles(
   theme => ({
     label: {
       fontWeight: 'normal',

plugins/cicd-statistics/src/entity-page.tsx

@@ -15,7 +15,7 @@
  */
 
 import React, { useCallback, useState, useMemo, useEffect } from 'react';
-import { Grid, makeStyles, Theme } from '@material-ui/core';
+import { Grid, makeStyles } from '@material-ui/core';
 import { Alert } from '@material-ui/lab';
 import { useEntity } from '@backstage/plugin-catalog-react';
 import { useApi, errorApiRef } from '@backstage/core-plugin-api';
@@ -57,7 +57,7 @@ export function EntityPageCicdCharts() {
   ));
 }
 
-const useStyles = makeStyles<Theme>(
+const useStyles = makeStyles(
   theme => ({
     pane: {
       padding: theme.spacing(1, 1, 1, 1),

plugins/cloudbuild/src/components/Cards/Cards.tsx

@@ -19,7 +19,7 @@ import { useWorkflowRuns, WorkflowRun } from '../useWorkflowRuns';
 import { WorkflowRunsTable } from '../WorkflowRunsTable';
 import { useEntity } from '@backstage/plugin-catalog-react';
 import { WorkflowRunStatus } from '../WorkflowRunStatus';
-import { Theme, makeStyles, LinearProgress } from '@material-ui/core';
+import { makeStyles, LinearProgress } from '@material-ui/core';
 import ExternalLinkIcon from '@material-ui/icons/Launch';
 import { CLOUDBUILD_ANNOTATION } from '../useProjectName';
 
@@ -31,7 +31,7 @@ import {
 } from '@backstage/core-components';
 import { errorApiRef, useApi } from '@backstage/core-plugin-api';
 
-const useStyles = makeStyles<Theme>({
+const useStyles = makeStyles({
   externalLinkIcon: {
     fontSize: 'inherit',
     verticalAlign: 'bottom',

plugins/cloudbuild/src/components/WorkflowRunDetails/WorkflowRunDetails.tsx

@@ -25,7 +25,6 @@ import {
   TableCell,
   TableContainer,
   TableRow,
-  Theme,
   Typography,
 } from '@material-ui/core';
 import ExternalLinkIcon from '@material-ui/icons/Launch';
@@ -36,7 +35,7 @@ import { WorkflowRunStatus } from '../WorkflowRunStatus';
 import { useWorkflowRunsDetails } from './useWorkflowRunsDetails';
 import { Breadcrumbs, Link, WarningPanel } from '@backstage/core-components';
 
-const useStyles = makeStyles<Theme>(theme => ({
+const useStyles = makeStyles(theme => ({
   root: {
     maxWidth: 720,
     margin: theme.spacing(2),

plugins/code-coverage/src/components/CoverageHistoryChart/CoverageHistoryChart.tsx

@@ -15,7 +15,6 @@
  */
 
 import { useEntity } from '@backstage/plugin-catalog-react';
-import { BackstageTheme } from '@backstage/theme';
 import {
   Box,
   Card,
@@ -50,7 +49,7 @@ import { DateTime } from 'luxon';
 
 type Coverage = 'line' | 'branch';
 
-const useStyles = makeStyles<BackstageTheme>(theme => ({
+const useStyles = makeStyles(theme => ({
   trendDown: {
     color: theme.palette.status.warning,
   },

plugins/codescene/src/components/Gauge/Gauge.tsx

@@ -13,13 +13,14 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { BackstagePalette, BackstageTheme } from '@backstage/theme';
+
 import { makeStyles, useTheme } from '@material-ui/core/styles';
+import { Palette } from '@material-ui/core/styles/createPalette';
 import Tooltip from '@material-ui/core/Tooltip';
 import { Circle } from 'rc-progress';
 import React, { useEffect, useState } from 'react';
 
-const useStyles = makeStyles<BackstageTheme>(
+const useStyles = makeStyles(
   theme => ({
     root: {
       position: 'relative',
@@ -51,7 +52,7 @@ export type GaugeProps = {
 };
 
 export type GaugePropsGetColorOptions = {
-  palette: BackstagePalette;
+  palette: Palette;
   value: number;
   max: number;
 };
@@ -78,11 +79,10 @@ export const getProgressColor: GaugePropsGetColor = ({
 
 /**
  * Circular Progress Bar
- *
  */
 export function Gauge(props: GaugeProps) {
   const classes = useStyles(props);
-  const { palette } = useTheme<BackstageTheme>();
+  const { palette } = useTheme();
   const [hoverRef, setHoverRef] = useState<HTMLDivElement | null>(null);
   const [open, setOpen] = useState(false);
   const { value, max, tooltipDelay, tooltipText } = {

plugins/cost-insights/src/utils/styles.ts

@@ -21,9 +21,9 @@ import {
   getLuminance,
   lighten,
   makeStyles,
+  Theme,
 } from '@material-ui/core';
 import { CostInsightsTheme, CostInsightsThemeOptions } from '../types';
-import { BackstageTheme } from '@backstage/theme';
 
 export const costInsightsLightTheme = {
   palette: {
@@ -231,7 +231,7 @@ export const useCostInsightsStyles = makeStyles(theme => ({
   },
 }));
 
-export const useCostInsightsTabsStyles = makeStyles<BackstageTheme>(theme => ({
+export const useCostInsightsTabsStyles = makeStyles<Theme>(theme => ({
   tabs: {
     borderBottom: `1px solid ${theme.palette.textVerySubtle}`,
     backgroundColor: brighten(theme.palette.background.default),

plugins/entity-feedback/src/components/FeedbackResponseTable/FeedbackResponseTable.tsx

@@ -18,7 +18,6 @@ import { ErrorPanel, Table } from '@backstage/core-components';
 import { useApi } from '@backstage/core-plugin-api';
 import { EntityRefLink } from '@backstage/plugin-catalog-react';
 import { FeedbackResponse } from '@backstage/plugin-entity-feedback-common';
-import { BackstageTheme } from '@backstage/theme';
 import { Chip, makeStyles } from '@material-ui/core';
 import CheckIcon from '@material-ui/icons/Check';
 import React from 'react';
@@ -28,7 +27,7 @@ import { entityFeedbackApiRef } from '../../api';
 
 type ResponseRow = Omit<FeedbackResponse, 'entityRef'>;
 
-const useStyles = makeStyles<BackstageTheme>(theme => ({
+const useStyles = makeStyles(theme => ({
   consentCheck: {
     color: theme.palette.status.ok,
   },

plugins/explore/src/components/ToolCard/ToolCard.tsx

@@ -15,7 +15,6 @@
  */
 
 import { ExploreTool } from '@backstage/plugin-explore-react';
-import { BackstageTheme } from '@backstage/theme';
 import {
   Box,
   Card,
@@ -24,6 +23,7 @@ import {
   CardMedia,
   Chip,
   makeStyles,
+  Theme,
   Typography,
 } from '@material-ui/core';
 import { LinkButton } from '@backstage/core-components';
@@ -32,7 +32,7 @@ import React from 'react';
 
 // TODO: Align styling between Domain and ToolCard
 
-const useStyles = makeStyles<BackstageTheme>(
+const useStyles = makeStyles<Theme>(
   theme => ({
     media: {
       height: 128,

plugins/gcp-projects/src/components/ProjectDetailsPage/ProjectDetailsPage.tsx

@@ -23,7 +23,6 @@ import {
   TableBody,
   TableCell,
   TableRow,
-  Theme,
   Typography,
 } from '@material-ui/core';
 import React from 'react';
@@ -43,7 +42,7 @@ import {
 import { useApi, useRouteRef } from '@backstage/core-plugin-api';
 import { rootRouteRef } from '../../routes';
 
-const useStyles = makeStyles<Theme>(theme => ({
+const useStyles = makeStyles(theme => ({
   root: {
     maxWidth: 720,
     margin: theme.spacing(2),

plugins/github-actions/src/components/Cards/Cards.tsx

@@ -15,12 +15,7 @@
  */
 
 import { useEntity } from '@backstage/plugin-catalog-react';
-import {
-  LinearProgress,
-  makeStyles,
-  Theme,
-  Typography,
-} from '@material-ui/core';
+import { LinearProgress, makeStyles, Typography } from '@material-ui/core';
 import ExternalLinkIcon from '@material-ui/icons/Launch';
 import React, { useEffect } from 'react';
 import { GITHUB_ACTIONS_ANNOTATION } from '../getProjectNameFromEntity';
@@ -36,7 +31,7 @@ import {
 } from '@backstage/core-components';
 import { getHostnameFromEntity } from '../getHostnameFromEntity';
 
-const useStyles = makeStyles<Theme>({
+const useStyles = makeStyles({
   externalLinkIcon: {
     fontSize: 'inherit',
     verticalAlign: 'bottom',

plugins/github-actions/src/components/WorkflowRunLogs/WorkflowRunLogs.tsx

@@ -23,7 +23,6 @@ import {
   Fade,
   makeStyles,
   Modal,
-  Theme,
   Tooltip,
   Typography,
   Zoom,
@@ -35,7 +34,7 @@ import { getProjectNameFromEntity } from '../getProjectNameFromEntity';
 import { useDownloadWorkflowRunLogs } from './useDownloadWorkflowRunLogs';
 import { getHostnameFromEntity } from '../getHostnameFromEntity';
 
-const useStyles = makeStyles<Theme>(theme => ({
+const useStyles = makeStyles(theme => ({
   button: {
     order: -1,
     marginRight: 0,

plugins/graphiql/src/components/GraphiQLBrowser/GraphiQLBrowser.tsx

@@ -19,14 +19,13 @@ import { Tabs, Tab, makeStyles, Typography, Divider } from '@material-ui/core';
 import 'graphiql/graphiql.css';
 import { StorageBucket } from '../../lib/storage';
 import { GraphQLEndpoint } from '../../lib/api';
-import { BackstageTheme } from '@backstage/theme';
 import { Progress } from '@backstage/core-components';
 
 const GraphiQL = React.lazy(() =>
   import('graphiql').then(m => ({ default: m.GraphiQL })),
 );
 
-const useStyles = makeStyles<BackstageTheme>(theme => ({
+const useStyles = makeStyles(theme => ({
   root: {
     height: '100%',
     display: 'flex',

plugins/graphql-voyager/src/components/GraphQLVoyagerBrowser/GraphQLVoyagerBrowser.tsx

@@ -13,6 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+
 import {
   GraphQLVoyagerEndpoint,
   introspectionQuery,
@@ -20,18 +21,17 @@ import {
 import { useState } from 'react';
 import { makeStyles, Tab, Tabs, Typography } from '@material-ui/core';
 import React, { Suspense } from 'react';
-import { BackstageTheme } from '@backstage/theme';
 import { Content, ErrorPanel, Progress } from '@backstage/core-components';
 import { Voyager } from 'graphql-voyager';
 import useAsync from 'react-use/lib/useAsync';
 
-const useStyles = makeStyles<BackstageTheme>(() => ({
+const useStyles = makeStyles({
   root: {
     height: '100%',
     display: 'flex',
     flexFlow: 'column nowrap',
   },
-}));
+});
 
 type GraphQLVoyagerBrowserProps = {
   endpoints: GraphQLVoyagerEndpoint[];

plugins/home/src/homePageComponents/FeaturedDocsCard/Content.tsx

@@ -27,7 +27,7 @@ import { catalogApiRef, CatalogApi } from '@backstage/plugin-catalog-react';
 import { useApi } from '@backstage/core-plugin-api';
 import { EntityFilterQuery } from '@backstage/catalog-client';
 
-import { makeStyles, Theme, Typography } from '@material-ui/core';
+import { makeStyles, Typography } from '@material-ui/core';
 
 /**
  * Props customizing the <FeaturedDocsCard/> component.
@@ -47,7 +47,7 @@ export type FeaturedDocsCardProps = {
   subLinkText?: string;
 };
 
-const useStyles = makeStyles<Theme>(
+const useStyles = makeStyles(
   theme => ({
     docDescription: {
       fontSize: theme.typography.body1.fontSize,

plugins/ilert/src/components/ILertCard/ILertCardEmptyState.tsx

@@ -14,7 +14,6 @@
  * limitations under the License.
  */
 
-import { BackstageTheme } from '@backstage/theme';
 import Card from '@material-ui/core/Card';
 import CardContent from '@material-ui/core/CardContent';
 import CardHeader from '@material-ui/core/CardHeader';
@@ -37,7 +36,7 @@ spec:
   lifecycle: production
   owner: guest`;
 
-const useStyles = makeStyles<BackstageTheme>(theme => ({
+const useStyles = makeStyles(theme => ({
   code: {
     borderRadius: 6,
     margin: theme.spacing(2, 0),

plugins/jenkins/src/components/Cards/Cards.tsx

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { LinearProgress, makeStyles, Theme } from '@material-ui/core';
+import { LinearProgress, makeStyles } from '@material-ui/core';
 import ExternalLinkIcon from '@material-ui/icons/Launch';
 import { DateTime, Duration } from 'luxon';
 import React from 'react';
@@ -29,7 +29,7 @@ import {
 } from '@backstage/core-components';
 import { Project } from '../../api/JenkinsApi';
 
-const useStyles = makeStyles<Theme>({
+const useStyles = makeStyles({
   externalLinkIcon: {
     fontSize: 'inherit',
     verticalAlign: 'bottom',

plugins/pagerduty/src/components/ChangeEvents/ChangeEventListItem.tsx

@@ -28,9 +28,8 @@ import {
 import { DateTime, Duration } from 'luxon';
 import { PagerDutyChangeEvent } from '../types';
 import OpenInBrowserIcon from '@material-ui/icons/OpenInBrowser';
-import { BackstageTheme } from '@backstage/theme';
 
-const useStyles = makeStyles<BackstageTheme>({
+const useStyles = makeStyles({
   denseListIcon: {
     marginRight: 0,
     display: 'flex',

plugins/pagerduty/src/components/Incident/IncidentListItem.tsx

@@ -30,10 +30,9 @@ import Warning from '@material-ui/icons/Warning';
 import { DateTime, Duration } from 'luxon';
 import { PagerDutyIncident } from '../types';
 import OpenInBrowserIcon from '@material-ui/icons/OpenInBrowser';
-import { BackstageTheme } from '@backstage/theme';
 import { Link } from '@backstage/core-components';
 
-const useStyles = makeStyles<BackstageTheme>(theme => ({
+const useStyles = makeStyles(theme => ({
   denseListIcon: {
     marginRight: 0,
     display: 'flex',

plugins/pagerduty/src/components/TriggerButton/index.tsx

@@ -13,14 +13,13 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+
 import React, { useCallback, ReactNode, useState } from 'react';
 import { makeStyles, Button } from '@material-ui/core';
-import { BackstageTheme } from '@backstage/theme';
-
 import { usePagerdutyEntity } from '../../hooks';
 import { TriggerDialog } from '../TriggerDialog';
 
-const useStyles = makeStyles<BackstageTheme>(theme => ({
+const useStyles = makeStyles(theme => ({
   buttonStyle: {
     backgroundColor: theme.palette.error.main,
     color: theme.palette.error.contrastText,

plugins/playlist/src/components/CreatePlaylistButton/CreatePlaylistButton.tsx

@@ -20,13 +20,12 @@ import {
   useRouteRef,
   alertApiRef,
 } from '@backstage/core-plugin-api';
-import { BackstageTheme } from '@backstage/theme';
 import { usePermission } from '@backstage/plugin-permission-react';
 import {
   permissions,
   PlaylistMetadata,
 } from '@backstage/plugin-playlist-common';
-import { Button, IconButton, useMediaQuery } from '@material-ui/core';
+import { Button, IconButton, Theme, useMediaQuery } from '@material-ui/core';
 import AddCircleOutline from '@material-ui/icons/AddCircleOutline';
 import React, { useCallback, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
@@ -49,7 +48,7 @@ export const CreatePlaylistButton = () => {
   const { allowed } = usePermission({
     permission: permissions.playlistListCreate,
   });
-  const isXSScreen = useMediaQuery<BackstageTheme>(theme =>
+  const isXSScreen = useMediaQuery<Theme>(theme =>
     theme.breakpoints.down('xs'),
   );
 

plugins/playlist/src/components/PersonalListPicker/PersonalListPicker.tsx

@@ -29,7 +29,6 @@ import {
   ListItemText,
   makeStyles,
   MenuItem,
-  Theme,
   Typography,
 } from '@material-ui/core';
 import PlaylistPlayIcon from '@material-ui/icons/PlaylistPlay';
@@ -75,7 +74,7 @@ export class PersonalListFilter implements PlaylistFilter {
   }
 }
 
-const useStyles = makeStyles<Theme>(theme => ({
+const useStyles = makeStyles(theme => ({
   root: {
     backgroundColor: 'rgba(0, 0, 0, .11)',
     boxShadow: 'none',

plugins/puppetdb/src/components/ReportDetailsPage/ReportDetailsLogsTable.tsx

@@ -13,6 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+
 import Typography from '@material-ui/core/Typography';
 import React from 'react';
 import { puppetDbApiRef, PuppetDbReportLog } from '../../api';
@@ -24,13 +25,12 @@ import {
 import useAsync from 'react-use/lib/useAsync';
 import { useApi } from '@backstage/core-plugin-api';
 import { makeStyles } from '@material-ui/core/styles';
-import { BackstageTheme } from '@backstage/theme';
 
 type ReportLogsTableProps = {
   hash: string;
 };
 
-const useStyles = makeStyles<BackstageTheme>(theme => ({
+const useStyles = makeStyles(theme => ({
   empty: {
     padding: theme.spacing(2),
     display: 'flex',

plugins/puppetdb/src/components/ReportDetailsPage/ReportDetailsPage.tsx

@@ -13,6 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+
 import { Link as RouterLink, useParams } from 'react-router-dom';
 import { Breadcrumbs, Link } from '@backstage/core-components';
 import { makeStyles } from '@material-ui/core/styles';
@@ -27,11 +28,10 @@ import {
   Typography,
   Tabs,
 } from '@material-ui/core';
-import { BackstageTheme } from '@backstage/theme';
 import { ReportDetailsEventsTable } from './ReportDetailsEventsTable';
 import { ReportDetailsLogsTable } from './ReportDetailsLogsTable';
 
-const useStyles = makeStyles<BackstageTheme>(theme => ({
+const useStyles = makeStyles(theme => ({
   cards: {
     marginTop: theme.spacing(2),
   },

plugins/scaffolder-react/src/next/components/TemplateCard/CardHeader.tsx

@@ -15,14 +15,13 @@
  */
 
 import React from 'react';
-import { makeStyles, useTheme } from '@material-ui/core';
+import { Theme, makeStyles, useTheme } from '@material-ui/core';
 import { ItemCardHeader } from '@backstage/core-components';
-import { BackstageTheme } from '@backstage/theme';
 import { TemplateEntityV1beta3 } from '@backstage/plugin-scaffolder-common';
 import { FavoriteEntity } from '@backstage/plugin-catalog-react';
 
 const useStyles = makeStyles<
-  BackstageTheme,
+  Theme,
   {
     cardFontColor: string;
     cardBackgroundImage: string;
@@ -55,7 +54,7 @@ export const CardHeader = (props: CardHeaderProps) => {
       spec: { type },
     },
   } = props;
-  const { getPageTheme } = useTheme<BackstageTheme>();
+  const { getPageTheme } = useTheme();
   const themeForType = getPageTheme({ themeId: type });
 
   const styles = useStyles({

plugins/scaffolder-react/src/next/components/TemplateCard/CardLink.tsx

@@ -13,8 +13,8 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+
 import { IconComponent } from '@backstage/core-plugin-api';
-import { BackstageTheme } from '@backstage/theme';
 import { Link } from '@backstage/core-components';
 import { makeStyles } from '@material-ui/core';
 import React from 'react';
@@ -25,7 +25,7 @@ interface CardLinkProps {
   url: string;
 }
 
-const useStyles = makeStyles<BackstageTheme>(() => ({
+const useStyles = makeStyles(() => ({
   linkText: {
     display: 'inline-flex',
     alignItems: 'center',

plugins/scaffolder-react/src/next/components/TemplateCard/TemplateCard.tsx

@@ -13,6 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+
 import { RELATION_OWNED_BY } from '@backstage/catalog-model';
 import { MarkdownContent, UserIcon } from '@backstage/core-components';
 import { IconComponent, useApp } from '@backstage/core-plugin-api';
@@ -21,7 +22,6 @@ import {
   getEntityRelations,
 } from '@backstage/plugin-catalog-react';
 import { TemplateEntityV1beta3 } from '@backstage/plugin-scaffolder-common';
-import { BackstageTheme } from '@backstage/theme';
 import {
   Box,
   Card,
@@ -32,13 +32,14 @@ import {
   Button,
   Grid,
   makeStyles,
+  Theme,
 } from '@material-ui/core';
 import LanguageIcon from '@material-ui/icons/Language';
 import React from 'react';
 import { CardHeader } from './CardHeader';
 import { CardLink } from './CardLink';
 
-const useStyles = makeStyles<BackstageTheme>(theme => ({
+const useStyles = makeStyles<Theme>(theme => ({
   box: {
     overflow: 'hidden',
     textOverflow: 'ellipsis',

plugins/scaffolder-react/src/next/components/Workflow/Workflow.tsx

@@ -13,6 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+
 import React, { useEffect } from 'react';
 import {
   Content,
@@ -22,16 +23,14 @@ import {
 } from '@backstage/core-components';
 import { stringifyEntityRef } from '@backstage/catalog-model';
 import { makeStyles } from '@material-ui/core';
-import { BackstageTheme } from '@backstage/theme';
 import { errorApiRef, useApi } from '@backstage/core-plugin-api';
 import { useTemplateParameterSchema } from '../../hooks/useTemplateParameterSchema';
 import { Stepper, type StepperProps } from '../Stepper/Stepper';
 import { SecretsContextProvider } from '../../../secrets/SecretsContext';
-
 import { useFilteredSchemaProperties } from '../../hooks/useFilteredSchemaProperties';
 import { ReviewStepProps } from '@backstage/plugin-scaffolder-react';
 
-const useStyles = makeStyles<BackstageTheme>(() => ({
+const useStyles = makeStyles({
   markdown: {
     /** to make the styles for React Markdown not leak into the description */
     '& :first-child': {
@@ -41,7 +40,7 @@ const useStyles = makeStyles<BackstageTheme>(() => ({
       marginBottom: 0,
     },
   },
-}));
+});
 
 /**
  * @alpha

plugins/scaffolder/src/components/ListTasksPage/OwnerListPicker.tsx

@@ -21,7 +21,6 @@ import {
   ListItemText,
   makeStyles,
   MenuItem,
-  Theme,
   Typography,
 } from '@material-ui/core';
 import SettingsIcon from '@material-ui/icons/Settings';
@@ -29,7 +28,7 @@ import React, { Fragment } from 'react';
 
 import AllIcon from '@material-ui/icons/FontDownload';
 
-const useStyles = makeStyles<Theme>(
+const useStyles = makeStyles(
   theme => ({
     root: {
       backgroundColor: 'rgba(0, 0, 0, .11)',

plugins/scaffolder/src/components/OngoingTask/ContextMenu.tsx

@@ -13,7 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { BackstageTheme } from '@backstage/theme';
+
 import {
   IconButton,
   ListItemIcon,
@@ -22,6 +22,7 @@ import {
   MenuItem,
   MenuList,
   Popover,
+  Theme,
   useTheme,
 } from '@material-ui/core';
 import { useAsync } from '@react-hookz/web';
@@ -44,7 +45,7 @@ type ContextMenuProps = {
   taskId?: string;
 };
 
-const useStyles = makeStyles<BackstageTheme, { fontColor: string }>(() => ({
+const useStyles = makeStyles<Theme, { fontColor: string }>(() => ({
   button: {
     color: ({ fontColor }) => fontColor,
   },
@@ -60,7 +61,7 @@ export const ContextMenu = (props: ContextMenuProps) => {
     onToggleButtonBar,
     taskId,
   } = props;
-  const { getPageTheme } = useTheme<BackstageTheme>();
+  const { getPageTheme } = useTheme();
   const pageTheme = getPageTheme({ themeId: 'website' });
   const classes = useStyles({ fontColor: pageTheme.fontColor });
   const scaffolderApi = useApi(scaffolderApiRef);

plugins/scaffolder/src/legacy/ScaffolderPage/ScaffolderPageContextMenu.tsx

@@ -15,7 +15,6 @@
  */
 
 import { useRouteRef } from '@backstage/core-plugin-api';
-import { BackstageTheme } from '@backstage/theme';
 import IconButton from '@material-ui/core/IconButton';
 import ListItemIcon from '@material-ui/core/ListItemIcon';
 import ListItemText from '@material-ui/core/ListItemText';
@@ -35,7 +34,7 @@ import {
   scaffolderListTaskRouteRef,
 } from '../../routes';
 
-const useStyles = makeStyles<BackstageTheme>(theme => ({
+const useStyles = makeStyles(theme => ({
   button: {
     color: theme.page.fontColor,
   },

plugins/scaffolder/src/legacy/TemplateCard/TemplateCard.tsx

@@ -45,7 +45,6 @@ import {
   getEntitySourceLocation,
 } from '@backstage/plugin-catalog-react';
 import { TemplateEntityV1beta3 } from '@backstage/plugin-scaffolder-common';
-import { BackstageTheme } from '@backstage/theme';
 import {
   Box,
   Card,
@@ -55,6 +54,7 @@ import {
   Chip,
   IconButton,
   makeStyles,
+  Theme,
   Tooltip,
   Typography,
   useTheme,
@@ -65,7 +65,7 @@ import React from 'react';
 import { selectedTemplateRouteRef, viewTechDocRouteRef } from '../../routes';
 
 const useStyles = makeStyles<
-  BackstageTheme,
+  Theme,
   { fontColor: string; backgroundImage: string }
 >(theme => ({
   cardHeader: {
@@ -179,7 +179,7 @@ const DeprecationWarning = () => {
 
 export const TemplateCard = ({ template, deprecated }: TemplateCardProps) => {
   const app = useApp();
-  const backstageTheme = useTheme<BackstageTheme>();
+  const backstageTheme = useTheme();
   const templateRoute = useRouteRef(selectedTemplateRouteRef);
   const templateProps = getTemplateCardProps(template);
   const ownedByRelations = getEntityRelations(

plugins/scaffolder/src/next/TemplateListPage/RegisterExistingButton.tsx

@@ -14,7 +14,6 @@
  * limitations under the License.
  */
 
-import { BackstageTheme } from '@backstage/theme';
 import Button from '@material-ui/core/Button';
 import IconButton from '@material-ui/core/IconButton';
 import useMediaQuery from '@material-ui/core/useMediaQuery';
@@ -23,6 +22,7 @@ import { Link as RouterLink, LinkProps } from 'react-router-dom';
 import AddCircleOutline from '@material-ui/icons/AddCircleOutline';
 import { catalogEntityCreatePermission } from '@backstage/plugin-catalog-common/alpha';
 import { usePermission } from '@backstage/plugin-permission-react';
+import { Theme } from '@material-ui/core';
 
 /**
  * Properties for {@link RegisterExistingButton}
@@ -42,7 +42,7 @@ export const RegisterExistingButton = (props: RegisterExistingButtonProps) => {
   const { allowed } = usePermission({
     permission: catalogEntityCreatePermission,
   });
-  const isXSScreen = useMediaQuery<BackstageTheme>(theme =>
+  const isXSScreen = useMediaQuery<Theme>(theme =>
     theme.breakpoints.down('xs'),
   );
 

plugins/sentry/src/components/ErrorCell/ErrorCell.tsx

@@ -18,13 +18,13 @@ import React from 'react';
 import { SentryIssue } from '../../api';
 import { Typography } from '@material-ui/core';
 import { makeStyles } from '@material-ui/core/styles';
-import { BackstageTheme } from '@backstage/theme';
 import { Link } from '@backstage/core-components';
 
 function stripText(text: string, maxLength: number) {
   return text.length > maxLength ? `${text.slice(0, maxLength)}...` : text;
 }
-const useStyles = makeStyles<BackstageTheme>(theme => ({
+
+const useStyles = makeStyles(theme => ({
   root: {
     minWidth: 260,
     position: 'relative',

plugins/tech-radar/src/components/RadarBubble/RadarBubble.tsx

@@ -15,7 +15,7 @@
  */
 
 import React, { useRef, useLayoutEffect } from 'react';
-import { makeStyles, Theme } from '@material-ui/core';
+import { makeStyles } from '@material-ui/core';
 
 export type Props = {
   visible: boolean;
@@ -24,7 +24,7 @@ export type Props = {
   y: number;
 };
 
-const useStyles = makeStyles<Theme>(theme => ({
+const useStyles = makeStyles(theme => ({
   bubble: {
     pointerEvents: 'none',
     userSelect: 'none',

plugins/tech-radar/src/components/RadarEntry/RadarEntry.tsx

@@ -15,7 +15,7 @@
  */
 
 import React from 'react';
-import { makeStyles, Theme } from '@material-ui/core';
+import { makeStyles } from '@material-ui/core';
 import { WithLink } from '../../utils/components';
 import { RadarDescription } from '../RadarDescription';
 import type { EntrySnapshot } from '../../utils/types';
@@ -37,7 +37,7 @@ export type Props = {
   onClick?: (event: React.MouseEvent<SVGGElement, MouseEvent>) => void;
 };
 
-const useStyles = makeStyles<Theme>(theme => ({
+const useStyles = makeStyles(theme => ({
   text: {
     pointerEvents: 'none',
     userSelect: 'none',

plugins/tech-radar/src/components/RadarGrid/RadarGrid.tsx

@@ -15,7 +15,7 @@
  */
 
 import React from 'react';
-import { makeStyles, Theme } from '@material-ui/core';
+import { makeStyles } from '@material-ui/core';
 import type { Ring } from '../../utils/types';
 
 export type Props = {
@@ -23,7 +23,7 @@ export type Props = {
   rings: Ring[];
 };
 
-const useStyles = makeStyles<Theme>(
+const useStyles = makeStyles(
   theme => ({
     ring: {
       fill: 'none',

plugins/tech-radar/src/components/RadarLegend/RadarLegend.tsx

@@ -13,13 +13,14 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { makeStyles, Theme } from '@material-ui/core';
+
+import { makeStyles } from '@material-ui/core';
 import React from 'react';
 import { RadarLegendQuadrant } from './RadarLegendQuadrant';
 import { RadarLegendProps } from './types';
 import { setupSegments } from './utils';
 
-const useStyles = makeStyles<Theme>(theme => ({
+const useStyles = makeStyles(theme => ({
   quadrant: {
     height: '100%',
     width: '100%',

plugins/techdocs/src/reader/components/TechDocsReaderPageContent/dom.tsx

@@ -18,7 +18,6 @@ import { useCallback, useEffect, useState } from 'react';
 
 import { useTheme, useMediaQuery } from '@material-ui/core';
 
-import { BackstageTheme } from '@backstage/theme';
 import { CompoundEntityRef } from '@backstage/catalog-model';
 import { useAnalytics, useApi } from '@backstage/core-plugin-api';
 import { scmIntegrationsApiRef } from '@backstage/integration-react';
@@ -58,7 +57,7 @@ export const useTechDocsReaderDom = (
   entityRef: CompoundEntityRef,
 ): Element | null => {
   const navigate = useNavigateUrl();
-  const theme = useTheme<BackstageTheme>();
+  const theme = useTheme();
   const isMobileMedia = useMediaQuery(MOBILE_MEDIA_QUERY);
   const sanitizerTransformer = useSanitizerTransformer();
   const stylesTransformer = useStylesTransformer();

plugins/techdocs/src/reader/transformers/styles/rules/types.ts

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { BackstageTheme } from '@backstage/theme';
+import { Theme } from '@material-ui/core';
 
 /**
  * A Backstage sidebar object that contains properties such as its pin state.
@@ -31,7 +31,7 @@ export type RuleOptions = {
   /**
    * A Backstage theme object that contains the application's design tokens.
    */
-  theme: BackstageTheme;
+  theme: Theme;
   /**
    * A Backstage sidebar, see {@link BackstageSidebar} for more details.
    */

plugins/techdocs/src/reader/transformers/styles/transformer.ts

@@ -15,12 +15,8 @@
  */
 
 import { useCallback, useMemo } from 'react';
-
 import { useTheme } from '@material-ui/core';
-
 import { useSidebarPinState } from '@backstage/core-components';
-import { BackstageTheme } from '@backstage/theme';
-
 import { Transformer } from '../transformer';
 import { rules } from './rules';
 
@@ -35,7 +31,7 @@ const useSidebar = () => useSidebarPinState();
  */
 const useRuleStyles = () => {
   const sidebar = useSidebar();
-  const theme = useTheme<BackstageTheme>();
+  const theme = useTheme();
 
   return useMemo(() => {
     const options = { theme, sidebar };

plugins/user-settings/src/components/AuthProviders/ProviderSettingsAvatar.tsx

@@ -15,11 +15,10 @@
  */
 
 import React from 'react';
-import { BackstageTheme } from '@backstage/theme';
-import { makeStyles, Avatar } from '@material-ui/core';
+import { makeStyles, Avatar, Theme } from '@material-ui/core';
 import { sidebarConfig } from '@backstage/core-components';
 
-const useStyles = makeStyles<BackstageTheme, { size: number }>(theme => ({
+const useStyles = makeStyles<Theme, { size: number }>(theme => ({
   avatar: {
     width: ({ size }) => size,
     height: ({ size }) => size,

plugins/user-settings/src/components/General/UserSettingsSignInAvatar.tsx

@@ -15,12 +15,11 @@
  */
 
 import React from 'react';
-import { BackstageTheme } from '@backstage/theme';
-import { makeStyles, Avatar } from '@material-ui/core';
+import { makeStyles, Avatar, Theme } from '@material-ui/core';
 import { useUserProfile } from '../useUserProfileInfo';
 import { sidebarConfig } from '@backstage/core-components';
 
-const useStyles = makeStyles<BackstageTheme, { size: number }>(theme => ({
+const useStyles = makeStyles<Theme, { size: number }>(theme => ({
   avatar: {
     width: ({ size }) => size,
     height: ({ size }) => size,

plugins/xcmetrics/src/components/BuildListFilter/BuildListFilter.tsx

@@ -18,7 +18,6 @@ import React, { useEffect, useState } from 'react';
 import { makeStyles, IconButton, Grid, Button } from '@material-ui/core';
 import FilterList from '@material-ui/icons/FilterList';
 import { InfoCard, Select } from '@backstage/core-components';
-import { BackstageTheme } from '@backstage/theme';
 import { useApi } from '@backstage/core-plugin-api';
 import useAsync from 'react-use/lib/useAsync';
 import { BuildFilters, BuildStatus, xcmetricsApiRef } from '../../api';
@@ -28,7 +27,7 @@ const toSelectItems = (strings: string[]) => {
   return strings.map(str => ({ label: str, value: str }));
 };
 
-const useStyles = makeStyles<BackstageTheme>(theme => ({
+const useStyles = makeStyles(theme => ({
   filtersContent: {
     padding: theme.spacing(2, 2, 2, 2.5),
   },

plugins/xcmetrics/src/components/OverviewTrends/OverviewTrends.tsx

@@ -13,6 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+
 import { Grid, makeStyles, useTheme } from '@material-ui/core';
 import React, { useState } from 'react';
 import { Progress, Select } from '@backstage/core-components';
@@ -30,7 +31,6 @@ import {
   getValues,
   sumField,
 } from '../../utils';
-import { BackstageTheme } from '@backstage/theme';
 
 const useStyles = makeStyles({
   spacingTop: {
@@ -51,7 +51,7 @@ const DAYS_SELECT_ITEMS = [
 
 export const OverviewTrends = () => {
   const [days, setDays] = useState(14);
-  const theme = useTheme<BackstageTheme>();
+  const theme = useTheme();
   const classes = useStyles();
   const client = useApi(xcmetricsApiRef);
   const buildCountsResult = useAsync(

plugins/xcmetrics/src/components/StatusCell/StatusCell.tsx

@@ -13,9 +13,9 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { makeStyles, Tooltip } from '@material-ui/core';
+
+import { makeStyles, Theme, Tooltip } from '@material-ui/core';
 import React from 'react';
-import { BackstageTheme } from '@backstage/theme';
 import { BuildStatus, BuildStatusResult, xcmetricsApiRef } from '../../api';
 import { cn, formatDuration, formatStatus } from '../../utils';
 import useAsync from 'react-use/lib/useAsync';
@@ -71,7 +71,7 @@ type StatusStyle = {
   [key in BuildStatus]: any;
 };
 
-const useStyles = makeStyles<BackstageTheme, StatusCellProps>(theme => ({
+const useStyles = makeStyles<Theme, StatusCellProps>(theme => ({
   root: {
     width: ({ size }) => size,
     height: ({ size }) => size,

plugins/xcmetrics/src/components/StatusMatrix/StatusMatrix.tsx

@@ -13,9 +13,9 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+
 import React from 'react';
 import { makeStyles } from '@material-ui/core';
-import { BackstageTheme } from '@backstage/theme';
 import { xcmetricsApiRef } from '../../api';
 import useAsync from 'react-use/lib/useAsync';
 import useMeasure from 'react-use/lib/useMeasure';
@@ -28,7 +28,7 @@ const CELL_SIZE = 12;
 const CELL_MARGIN = 4;
 const MAX_ROWS = 4;
 
-const useStyles = makeStyles<BackstageTheme>(theme => ({
+const useStyles = makeStyles(theme => ({
   root: {
     marginTop: 8,
     display: 'flex',