remove unnecessary usage of deprecated BackstageTheme

Signed-off-by: Fredrik Adelöw <freben@gmail.com>

.changeset/six-books-arrive.md

@@ -0,0 +1,23 @@
+---
+'@backstage/plugin-techdocs-module-addons-contrib': patch
+'@backstage/plugin-microsoft-calendar': patch
+'@backstage/plugin-scaffolder-react': patch
+'@backstage/plugin-catalog-graph': patch
+'@backstage/plugin-cost-insights': patch
+'@backstage/plugin-tech-insights': patch
+'@backstage/plugin-code-climate': patch
+'@backstage/plugin-scaffolder': patch
+'@backstage/plugin-gcalendar': patch
+'@backstage/plugin-org-react': patch
+'@backstage/plugin-sonarqube': patch
+'@backstage/plugin-xcmetrics': patch
+'@backstage/plugin-api-docs': patch
+'@backstage/plugin-playlist': patch
+'@backstage/plugin-catalog': patch
+'@backstage/plugin-explore': patch
+'@backstage/plugin-bazaar': patch
+'@backstage/plugin-search': patch
+'@backstage/plugin-org': patch
+---
+
+Internal theme type updates

plugins/api-docs/src/components/AsyncApiDefinitionWidget/AsyncApiDefinition.tsx

@@ -17,11 +17,10 @@
 import AsyncApi from '@asyncapi/react-component';
 import '@asyncapi/react-component/styles/default.css';
 import { makeStyles, alpha, darken } from '@material-ui/core/styles';
-import { BackstageTheme } from '@backstage/theme';
 import React from 'react';
 import { useTheme } from '@material-ui/core';
 
-const useStyles = makeStyles((theme: BackstageTheme) => ({
+const useStyles = makeStyles(theme => ({
   root: {
     fontFamily: 'inherit',
     '& .bg-white': {

plugins/bazaar/src/components/ProjectCard/ProjectCard.tsx

@@ -29,7 +29,6 @@ import { BazaarProject } from '../../types';
 import { DateTime } from 'luxon';
 import { HomePageBazaarInfoCard } from '../HomePageBazaarInfoCard';
 import { Entity } from '@backstage/catalog-model';
-import { BackstageTheme } from '@backstage/theme';
 
 type Props = {
   project: BazaarProject;
@@ -42,7 +41,7 @@ type StyleProps = {
   height: 'large' | 'small';
 };
 
-const useStyles = makeStyles((theme: BackstageTheme) => ({
+const useStyles = makeStyles(theme => ({
   description: (props: StyleProps) => ({
     height: props.height === 'large' ? '10rem' : '4rem',
     WebkitBackgroundClip: 'text',

plugins/catalog-graph/src/components/EntityRelationsGraph/CustomLabel.tsx

@@ -14,14 +14,13 @@
  * limitations under the License.
  */
 import { DependencyGraphTypes } from '@backstage/core-components';
-import { BackstageTheme } from '@backstage/theme';
 import makeStyles from '@material-ui/core/styles/makeStyles';
 import React from 'react';
 import { EntityEdgeData } from './types';
 import classNames from 'classnames';
 
 const useStyles = makeStyles(
-  (theme: BackstageTheme) => ({
+  theme => ({
     text: {
       fill: theme.palette.textContrast,
     },

plugins/catalog-graph/src/components/EntityRelationsGraph/CustomNode.tsx

@@ -15,7 +15,6 @@
  */
 import { DependencyGraphTypes } from '@backstage/core-components';
 import { humanizeEntityRef } from '@backstage/plugin-catalog-react';
-import { BackstageTheme } from '@backstage/theme';
 import { makeStyles } from '@material-ui/core/styles';
 import classNames from 'classnames';
 import React, { useLayoutEffect, useRef, useState } from 'react';
@@ -23,7 +22,7 @@ import { EntityKindIcon } from './EntityKindIcon';
 import { EntityNodeData } from './types';
 
 const useStyles = makeStyles(
-  (theme: BackstageTheme) => ({
+  theme => ({
     node: {
       fill: theme.palette.grey[300],
       stroke: theme.palette.grey[300],

plugins/catalog/src/components/EntityContextMenu/EntityContextMenu.tsx

@@ -24,7 +24,7 @@ import {
   Popover,
   Tooltip,
 } from '@material-ui/core';
-import { makeStyles } from '@material-ui/core/styles';
+import { Theme, makeStyles } from '@material-ui/core/styles';
 import BugReportIcon from '@material-ui/icons/BugReport';
 import MoreVert from '@material-ui/icons/MoreVert';
 import FileCopyTwoToneIcon from '@material-ui/icons/FileCopyTwoTone';
@@ -32,7 +32,6 @@ import React, { useCallback, useState } from 'react';
 import { IconComponent } from '@backstage/core-plugin-api';
 import { useEntityPermission } from '@backstage/plugin-catalog-react/alpha';
 import { catalogEntityDeletePermission } from '@backstage/plugin-catalog-common/alpha';
-import { BackstageTheme } from '@backstage/theme';
 import { UnregisterEntity, UnregisterEntityOptions } from './UnregisterEntity';
 import { useApi, alertApiRef } from '@backstage/core-plugin-api';
 
@@ -40,7 +39,7 @@ import { useApi, alertApiRef } from '@backstage/core-plugin-api';
 export type EntityContextMenuClassKey = 'button';
 
 const useStyles = makeStyles(
-  (theme: BackstageTheme) => {
+  (theme: Theme) => {
     return {
       button: {
         color: theme.page.fontColor,

plugins/catalog/src/components/SystemDiagramCard/SystemDiagramCard.tsx

@@ -33,7 +33,6 @@ import { Box, makeStyles, Typography, useTheme } from '@material-ui/core';
 import ZoomOutMap from '@material-ui/icons/ZoomOutMap';
 import React from 'react';
 import useAsync from 'react-use/lib/useAsync';
-import { BackstageTheme } from '@backstage/theme';
 
 import {
   DependencyGraph,
@@ -55,7 +54,7 @@ export type SystemDiagramCardClassKey =
   | 'resourceNode';
 
 const useStyles = makeStyles(
-  (theme: BackstageTheme) => ({
+  theme => ({
     domainNode: {
       fill: theme.palette.primary.main,
       stroke: theme.palette.border,

plugins/code-climate/src/components/CodeClimateTable/CodeClimateTable.tsx

@@ -17,10 +17,9 @@
 import React from 'react';
 import { CodeClimateData } from '../../api';
 import { Link } from '@backstage/core-components';
-import { Box, makeStyles, Typography } from '@material-ui/core';
-import { BackstageTheme } from '@backstage/theme';
+import { Box, makeStyles, Theme, Typography } from '@material-ui/core';
 
-const letterStyle = (theme: BackstageTheme) => ({
+const letterStyle = (theme: Theme) => ({
   color: theme.palette.common.white,
   border: 0,
   borderRadius: '3px',
@@ -32,7 +31,7 @@ const fontSize = {
   fontSize: '25px',
 };
 
-const letterColor = (letter: string, theme: BackstageTheme) => {
+const letterColor = (letter: string, theme: Theme) => {
   if (letter === 'A') {
     return theme.palette.success.main || '#45d298';
   } else if (letter === 'B') {
@@ -49,7 +48,7 @@ const letterColor = (letter: string, theme: BackstageTheme) => {
 };
 
 const useStyles = makeStyles<
-  BackstageTheme,
+  Theme,
   {
     maintainabilityLetter: string;
     testCoverageLetter: string;

plugins/cost-insights/src/components/CostInsightsPage/CostInsightsThemeProvider.tsx

@@ -17,9 +17,9 @@
 import React, { PropsWithChildren } from 'react';
 import {
   createTheme as createMuiTheme,
+  Theme,
   ThemeProvider,
 } from '@material-ui/core';
-import { BackstageTheme } from '@backstage/theme';
 import {
   costInsightsDarkTheme,
   costInsightsLightTheme,
@@ -31,7 +31,7 @@ export const CostInsightsThemeProvider = ({
 }: PropsWithChildren<{}>) => {
   return (
     <ThemeProvider
-      theme={(theme: BackstageTheme) =>
+      theme={(theme: Theme) =>
         createMuiTheme({
           ...theme,
           palette: {

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

@@ -13,6 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+
 import {
   createStyles,
   emphasize,
@@ -21,8 +22,8 @@ import {
   lighten,
   makeStyles,
 } from '@material-ui/core';
-import { BackstageTheme } from '@backstage/theme';
 import { CostInsightsTheme, CostInsightsThemeOptions } from '../types';
+import { BackstageTheme } from '@backstage/theme';
 
 export const costInsightsLightTheme = {
   palette: {
@@ -155,7 +156,7 @@ export const useBarChartStyles = (theme: CostInsightsTheme) => ({
   },
 });
 
-export const useBarChartLayoutStyles = makeStyles<BackstageTheme>(theme =>
+export const useBarChartLayoutStyles = makeStyles(theme =>
   createStyles({
     wrapper: {
       display: 'flex',
@@ -197,7 +198,7 @@ export const useBarChartStepperButtonStyles = makeStyles<CostInsightsTheme>(
     }),
 );
 
-export const useBarChartLabelStyles = makeStyles<BackstageTheme>(theme =>
+export const useBarChartLabelStyles = makeStyles(theme =>
   createStyles({
     foreignObject: {
       textAlign: 'center',
@@ -222,7 +223,7 @@ export const useBarChartLabelStyles = makeStyles<BackstageTheme>(theme =>
   }),
 );
 
-export const useCostInsightsStyles = makeStyles<BackstageTheme>(theme => ({
+export const useCostInsightsStyles = makeStyles(theme => ({
   h6Subtle: {
     ...theme.typography.h6,
     fontWeight: 'normal',
@@ -230,84 +231,80 @@ export const useCostInsightsStyles = makeStyles<BackstageTheme>(theme => ({
   },
 }));
 
-export const useCostInsightsTabsStyles = makeStyles<BackstageTheme>(
-  (theme: BackstageTheme) => ({
-    tabs: {
-      borderBottom: `1px solid ${theme.palette.textVerySubtle}`,
-      backgroundColor: brighten(theme.palette.background.default),
-      padding: theme.spacing(0, 4),
+export const useCostInsightsTabsStyles = makeStyles<BackstageTheme>(theme => ({
+  tabs: {
+    borderBottom: `1px solid ${theme.palette.textVerySubtle}`,
+    backgroundColor: brighten(theme.palette.background.default),
+    padding: theme.spacing(0, 4),
+  },
+  tab: {
+    minHeight: 68,
+    minWidth: 180,
+    padding: theme.spacing(1, 4),
+    '&:hover': {
+      color: 'inherit',
+      backgroundColor: 'inherit',
     },
-    tab: {
-      minHeight: 68,
-      minWidth: 180,
-      padding: theme.spacing(1, 4),
-      '&:hover': {
-        color: 'inherit',
-        backgroundColor: 'inherit',
-      },
+  },
+  indicator: {
+    backgroundColor: theme.palette.navigation.indicator,
+    height: 4,
+  },
+  tabLabel: {
+    display: 'flex',
+    alignItems: 'center',
+  },
+  tabLabelText: {
+    fontSize: theme.typography.fontSize,
+    fontWeight: theme.typography.fontWeightBold,
+  },
+  menuItem: {
+    display: 'flex',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    minWidth: 180,
+    padding: theme.spacing(2, 2),
+  },
+  menuItemSelected: {
+    backgroundColor: lighten(theme.palette.background.default, 0.3),
+  },
+}));
+
+export const useAlertCardActionHeaderStyles = makeStyles(theme =>
+  createStyles({
+    root: {
+      paddingBottom: theme.spacing(2),
+      borderRadius: 'unset',
     },
-    indicator: {
-      backgroundColor: theme.palette.navigation.indicator,
-      height: 4,
-    },
-    tabLabel: {
-      display: 'flex',
-      alignItems: 'center',
-    },
-    tabLabelText: {
+    title: {
       fontSize: theme.typography.fontSize,
       fontWeight: theme.typography.fontWeightBold,
+      lineHeight: 1.5,
     },
-    menuItem: {
-      display: 'flex',
-      justifyContent: 'space-between',
-      alignItems: 'center',
-      minWidth: 180,
-      padding: theme.spacing(2, 2),
-    },
-    menuItemSelected: {
-      backgroundColor: lighten(theme.palette.background.default, 0.3),
+    action: {
+      margin: 0,
     },
   }),
 );
 
-export const useAlertCardActionHeaderStyles = makeStyles<BackstageTheme>(
-  (theme: BackstageTheme) =>
-    createStyles({
-      root: {
-        paddingBottom: theme.spacing(2),
-        borderRadius: 'unset',
-      },
-      title: {
-        fontSize: theme.typography.fontSize,
-        fontWeight: theme.typography.fontWeightBold,
-        lineHeight: 1.5,
-      },
-      action: {
-        margin: 0,
-      },
-    }),
+export const useCostGrowthStyles = makeStyles(theme =>
+  createStyles({
+    excess: {
+      color: theme.palette.status.error,
+    },
+    savings: {
+      color: theme.palette.status.ok,
+    },
+    indicator: {
+      display: 'flex',
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'flex-end',
+    },
+  }),
 );
 
-export const useCostGrowthStyles = makeStyles<BackstageTheme>(
-  (theme: BackstageTheme) =>
-    createStyles({
-      excess: {
-        color: theme.palette.status.error,
-      },
-      savings: {
-        color: theme.palette.status.ok,
-      },
-      indicator: {
-        display: 'flex',
-        flexDirection: 'row',
-        alignItems: 'center',
-        justifyContent: 'flex-end',
-      },
-    }),
-);
-
-export const useCostGrowthLegendStyles = makeStyles<BackstageTheme>(theme => ({
+export const useCostGrowthLegendStyles = makeStyles(theme => ({
   h5: {
     ...theme.typography.h5,
     fontWeight: 500,
@@ -339,44 +336,43 @@ export const useCostGrowthLegendStyles = makeStyles<BackstageTheme>(theme => ({
   },
 }));
 
-export const useBarChartStepperStyles = makeStyles<BackstageTheme>(
-  (theme: BackstageTheme) =>
-    createStyles({
-      paper: {
-        display: 'flex',
-        flexDirection: 'row',
-        justifyContent: 'space-around',
-        alignItems: 'center',
-        background: 'transparent',
-        padding: 8,
-      },
-      step: {
-        backgroundColor: theme.palette.action.disabled,
-        borderRadius: '50%',
-        width: 9,
-        height: 9,
-        margin: '0 2px',
-      },
-      stepActive: {
-        backgroundColor: theme.palette.primary.main,
-      },
-      steps: {
-        display: 'flex',
-        flexDirection: 'row',
-      },
-      backButton: {
-        position: 'absolute',
-        left: 0,
-        top: 'calc(50% - 60px)',
-        zIndex: 100,
-      },
-      nextButton: {
-        position: 'absolute',
-        right: 0,
-        top: 'calc(50% - 60px)',
-        zIndex: 100,
-      },
-    }),
+export const useBarChartStepperStyles = makeStyles(theme =>
+  createStyles({
+    paper: {
+      display: 'flex',
+      flexDirection: 'row',
+      justifyContent: 'space-around',
+      alignItems: 'center',
+      background: 'transparent',
+      padding: 8,
+    },
+    step: {
+      backgroundColor: theme.palette.action.disabled,
+      borderRadius: '50%',
+      width: 9,
+      height: 9,
+      margin: '0 2px',
+    },
+    stepActive: {
+      backgroundColor: theme.palette.primary.main,
+    },
+    steps: {
+      display: 'flex',
+      flexDirection: 'row',
+    },
+    backButton: {
+      position: 'absolute',
+      left: 0,
+      top: 'calc(50% - 60px)',
+      zIndex: 100,
+    },
+    nextButton: {
+      position: 'absolute',
+      right: 0,
+      top: 'calc(50% - 60px)',
+      zIndex: 100,
+    },
+  }),
 );
 
 export const useNavigationStyles = makeStyles<CostInsightsTheme>(
@@ -451,32 +447,30 @@ export const useTooltipStyles = makeStyles<CostInsightsTheme>(
     }),
 );
 
-export const useAlertInsightsSectionStyles = makeStyles<BackstageTheme>(
-  (theme: BackstageTheme) =>
-    createStyles({
-      button: {
-        backgroundColor: theme.palette.textVerySubtle,
-        color: theme.palette.text.primary,
-      },
-    }),
+export const useAlertInsightsSectionStyles = makeStyles(theme =>
+  createStyles({
+    button: {
+      backgroundColor: theme.palette.textVerySubtle,
+      color: theme.palette.text.primary,
+    },
+  }),
 );
 
-export const useSelectStyles = makeStyles<BackstageTheme>(
-  (theme: BackstageTheme) =>
-    createStyles({
-      select: {
-        minWidth: 200,
-        textAlign: 'start',
-        backgroundColor: theme.palette.background.paper,
+export const useSelectStyles = makeStyles(theme =>
+  createStyles({
+    select: {
+      minWidth: 200,
+      textAlign: 'start',
+      backgroundColor: theme.palette.background.paper,
+    },
+    menuItem: {
+      minWidth: 200,
+      padding: theme.spacing(2),
+      '&.compact': {
+        padding: theme.spacing(1, 2),
       },
-      menuItem: {
-        minWidth: 200,
-        padding: theme.spacing(2),
-        '&.compact': {
-          padding: theme.spacing(1, 2),
-        },
-      },
-    }),
+    },
+  }),
 );
 
 export const useActionItemCardStyles = makeStyles<CostInsightsTheme>(
@@ -513,52 +507,48 @@ export const useActionItemCardStyles = makeStyles<CostInsightsTheme>(
     }),
 );
 
-export const useProductInsightsCardStyles = makeStyles<BackstageTheme>(
-  (theme: BackstageTheme) =>
-    createStyles({
-      root: {
-        padding: theme.spacing(2, 2, 2, 2.5), // restore backstage default padding
-      },
-      action: {
-        margin: 0, // unset negative margins
-      },
-    }),
+export const useProductInsightsCardStyles = makeStyles(theme =>
+  createStyles({
+    root: {
+      padding: theme.spacing(2, 2, 2, 2.5), // restore backstage default padding
+    },
+    action: {
+      margin: 0, // unset negative margins
+    },
+  }),
 );
 
-export const useProductInsightsChartStyles = makeStyles<BackstageTheme>(
-  (theme: BackstageTheme) =>
-    createStyles({
-      indicator: {
-        fontWeight: theme.typography.fontWeightBold,
-        fontSize: '1.25rem',
-      },
-      actions: {
-        display: 'flex',
-        justifyContent: 'space-between',
-        alignItems: 'center',
-      },
-    }),
+export const useProductInsightsChartStyles = makeStyles(theme =>
+  createStyles({
+    indicator: {
+      fontWeight: theme.typography.fontWeightBold,
+      fontSize: '1.25rem',
+    },
+    actions: {
+      display: 'flex',
+      justifyContent: 'space-between',
+      alignItems: 'center',
+    },
+  }),
 );
 
-export const useBackdropStyles = makeStyles<BackstageTheme>(
-  (theme: BackstageTheme) =>
-    createStyles({
-      root: {
-        zIndex: theme.zIndex.modal,
-      },
-    }),
+export const useBackdropStyles = makeStyles(theme =>
+  createStyles({
+    root: {
+      zIndex: theme.zIndex.modal,
+    },
+  }),
 );
 
-export const useSubtleTypographyStyles = makeStyles<BackstageTheme>(
-  (theme: BackstageTheme) =>
-    createStyles({
-      root: {
-        color: theme.palette.textSubtle,
-      },
-    }),
+export const useSubtleTypographyStyles = makeStyles(theme =>
+  createStyles({
+    root: {
+      color: theme.palette.textSubtle,
+    },
+  }),
 );
 
-export const useEntityDialogStyles = makeStyles<BackstageTheme>(theme =>
+export const useEntityDialogStyles = makeStyles(theme =>
   createStyles({
     dialogContent: {
       padding: 0,
@@ -597,7 +587,7 @@ export const useEntityDialogStyles = makeStyles<BackstageTheme>(theme =>
   }),
 );
 
-export const useAlertDialogStyles = makeStyles((theme: BackstageTheme) =>
+export const useAlertDialogStyles = makeStyles(theme =>
   createStyles({
     content: {
       padding: theme.spacing(0, 5, 2, 5),

plugins/explore/src/components/GroupsExplorerContent/GroupsDiagram.tsx

@@ -34,7 +34,6 @@ import {
   humanizeEntityRef,
   getEntityRelations,
 } from '@backstage/plugin-catalog-react';
-import { BackstageTheme } from '@backstage/theme';
 import { makeStyles, Typography, useTheme } from '@material-ui/core';
 import ZoomOutMap from '@material-ui/icons/ZoomOutMap';
 import classNames from 'classnames';
@@ -42,7 +41,7 @@ import React from 'react';
 import useAsync from 'react-use/lib/useAsync';
 
 const useStyles = makeStyles(
-  (theme: BackstageTheme) => ({
+  theme => ({
     graph: {
       minHeight: '100%',
       flex: 1,

plugins/gcalendar/src/components/CalendarCard/AttendeeChip.tsx

@@ -13,17 +13,14 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+
 import React from 'react';
-
-import { BackstageTheme } from '@backstage/theme';
-
 import { Badge, Chip, makeStyles } from '@material-ui/core';
 import CancelIcon from '@material-ui/icons/Cancel';
 import CheckIcon from '@material-ui/icons/CheckCircle';
-
 import { EventAttendee, ResponseStatus } from '../../api';
 
-const useStyles = makeStyles((theme: BackstageTheme) => {
+const useStyles = makeStyles(theme => {
   const getIconColor = (responseStatus?: string) => {
     if (!responseStatus) return theme.palette.primary.light;
 

plugins/microsoft-calendar/src/components/AttendeeChip.tsx

@@ -13,17 +13,14 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+
 import React from 'react';
-
-import { BackstageTheme } from '@backstage/theme';
-
 import { Badge, Chip, makeStyles } from '@material-ui/core';
 import CancelIcon from '@material-ui/icons/Cancel';
 import CheckIcon from '@material-ui/icons/CheckCircle';
-
 import { Attendee, ResponseStatusMap } from '../api';
 
-const useStyles = makeStyles((theme: BackstageTheme) => {
+const useStyles = makeStyles(theme => {
   const getIconColor = (responseStatus?: string) => {
     if (!responseStatus) return theme.palette.primary.light;
 

plugins/org-react/src/components/GroupListPicker/GroupListPickerButton.tsx

@@ -15,12 +15,11 @@
  */
 
 import React from 'react';
-import { BackstageTheme } from '@backstage/theme';
 import { makeStyles, Typography, Button } from '@material-ui/core';
 import KeyboardArrowDownIcon from '@material-ui/icons/KeyboardArrowDown';
 import PeopleIcon from '@material-ui/icons/People';
 
-const useStyles = makeStyles((theme: BackstageTheme) => ({
+const useStyles = makeStyles(theme => ({
   btn: {
     padding: '10px',
     width: '100%',

plugins/org/src/components/Cards/OwnershipCard/ComponentsGrid.tsx

@@ -22,7 +22,6 @@ import {
   ResponseErrorPanel,
 } from '@backstage/core-components';
 import { useRouteRef } from '@backstage/core-plugin-api';
-import { BackstageTheme } from '@backstage/theme';
 import {
   Box,
   createStyles,
@@ -36,7 +35,7 @@ import { catalogIndexRouteRef } from '../../../routes';
 import { useGetEntities } from './useGetEntities';
 import { EntityRelationAggregation } from './types';
 
-const useStyles = makeStyles((theme: BackstageTheme) =>
+const useStyles = makeStyles(theme =>
   createStyles({
     card: {
       border: `1px solid ${theme.palette.divider}`,

plugins/playlist/src/components/PlaylistCard/PlaylistCard.tsx

@@ -22,7 +22,6 @@ import {
 import { useRouteRef } from '@backstage/core-plugin-api';
 import { EntityRefLinks } from '@backstage/plugin-catalog-react';
 import { Playlist } from '@backstage/plugin-playlist-common';
-import { BackstageTheme } from '@backstage/theme';
 import {
   Box,
   Card,
@@ -36,10 +35,9 @@ import {
 } from '@material-ui/core';
 import LockIcon from '@material-ui/icons/Lock';
 import React from 'react';
-
 import { playlistRouteRef } from '../../routes';
 
-const useStyles = makeStyles((theme: BackstageTheme) => ({
+const useStyles = makeStyles(theme => ({
   cardHeader: {
     position: 'relative',
   },

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

@@ -14,7 +14,6 @@
  * limitations under the License.
  */
 
-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';
@@ -28,7 +27,7 @@ import List from '@material-ui/icons/List';
 import MoreVert from '@material-ui/icons/MoreVert';
 import React, { useState } from 'react';
 
-const useStyles = makeStyles((theme: BackstageTheme) => ({
+const useStyles = makeStyles(theme => ({
   button: {
     color: theme.page.fontColor,
   },

plugins/scaffolder-react/src/next/components/TaskSteps/StepIcon.tsx

@@ -13,9 +13,8 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import React from 'react';
 
-import { BackstageTheme } from '@backstage/theme';
+import React from 'react';
 import { CircularProgress, makeStyles, StepIconProps } from '@material-ui/core';
 import RemoveCircleOutline from '@material-ui/icons/RemoveCircleOutline';
 import PanoramaFishEyeIcon from '@material-ui/icons/PanoramaFishEye';
@@ -23,7 +22,7 @@ import classNames from 'classnames';
 import CheckCircleOutline from '@material-ui/icons/CheckCircleOutline';
 import ErrorOutline from '@material-ui/icons/ErrorOutline';
 
-const useStepIconStyles = makeStyles((theme: BackstageTheme) => ({
+const useStepIconStyles = makeStyles(theme => ({
   root: {
     color: theme.palette.text.disabled,
   },

plugins/scaffolder-react/src/next/components/TaskSteps/TaskBorder.tsx

@@ -13,11 +13,11 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+
 import React from 'react';
 import { LinearProgress, makeStyles } from '@material-ui/core';
-import { BackstageTheme } from '@backstage/theme';
 
-const useStyles = makeStyles((theme: BackstageTheme) => ({
+const useStyles = makeStyles(theme => ({
   failed: {
     backgroundColor: theme.palette.error.main,
   },

plugins/scaffolder/src/legacy/TaskPage/TaskPage.tsx

@@ -28,7 +28,6 @@ import {
   useRouteRef,
   useRouteRefParams,
 } from '@backstage/core-plugin-api';
-import { BackstageTheme } from '@backstage/theme';
 import {
   Button,
   CircularProgress,
@@ -125,7 +124,7 @@ const StepTimeTicker = ({ step }: { step: TaskStep }) => {
   return <Typography variant="caption">{time}</Typography>;
 };
 
-const useStepIconStyles = makeStyles((theme: BackstageTheme) =>
+const useStepIconStyles = makeStyles(theme =>
   createStyles({
     root: {
       color: theme.palette.text.disabled,

plugins/scaffolder/src/next/TemplateEditorPage/DryRunResults/DryRunResults.tsx

@@ -14,7 +14,6 @@
  * limitations under the License.
  */
 
-import { BackstageTheme } from '@backstage/theme';
 import Accordion from '@material-ui/core/Accordion';
 import AccordionDetails from '@material-ui/core/AccordionDetails';
 import AccordionSummary from '@material-ui/core/AccordionSummary';
@@ -28,7 +27,7 @@ import { useDryRun } from '../DryRunContext';
 import { DryRunResultsList } from './DryRunResultsList';
 import { DryRunResultsView } from './DryRunResultsView';
 
-const useStyles = makeStyles((theme: BackstageTheme) => ({
+const useStyles = makeStyles(theme => ({
   header: {
     height: 48,
     minHeight: 0,

plugins/scaffolder/src/next/TemplateEditorPage/DryRunResults/DryRunResultsList.tsx

@@ -14,7 +14,6 @@
  * limitations under the License.
  */
 
-import { BackstageTheme } from '@backstage/theme';
 import IconButton from '@material-ui/core/IconButton';
 import List from '@material-ui/core/List';
 import ListItem from '@material-ui/core/ListItem';
@@ -30,7 +29,7 @@ import React from 'react';
 import { useDryRun } from '../DryRunContext';
 import { downloadBlob } from '../../../lib/download';
 
-const useStyles = makeStyles((theme: BackstageTheme) => ({
+const useStyles = makeStyles(theme => ({
   root: {
     overflowY: 'auto',
     background: theme.palette.background.default,

plugins/search/src/components/SearchType/SearchType.Tabs.tsx

@@ -16,10 +16,9 @@
 
 import React, { useEffect } from 'react';
 import { useSearch } from '@backstage/plugin-search-react';
-import { BackstageTheme } from '@backstage/theme';
 import { makeStyles, Tab, Tabs } from '@material-ui/core';
 
-const useStyles = makeStyles((theme: BackstageTheme) => ({
+const useStyles = makeStyles(theme => ({
   tabs: {
     borderBottom: `1px solid ${theme.palette.textVerySubtle}`,
   },

plugins/sonarqube/src/components/SonarQubeCard/Percentage.tsx

@@ -14,13 +14,12 @@
  * limitations under the License.
  */
 
-import { BackstageTheme } from '@backstage/theme';
 import { makeStyles } from '@material-ui/core/styles';
 import { useTheme } from '@material-ui/core';
 import { Circle } from 'rc-progress';
 import React from 'react';
 
-const useStyles = makeStyles((theme: BackstageTheme) => ({
+const useStyles = makeStyles(theme => ({
   root: {
     height: theme.spacing(3),
     width: theme.spacing(3),
@@ -29,7 +28,7 @@ const useStyles = makeStyles((theme: BackstageTheme) => ({
 
 export const Percentage = ({ value }: { value?: string }) => {
   const classes = useStyles();
-  const theme = useTheme<BackstageTheme>();
+  const theme = useTheme();
 
   return (
     <Circle

plugins/sonarqube/src/components/SonarQubeCard/Rating.tsx

@@ -14,13 +14,12 @@
  * limitations under the License.
  */
 
-import { BackstageTheme } from '@backstage/theme';
 import { Avatar } from '@material-ui/core';
 import { lighten, makeStyles } from '@material-ui/core/styles';
 import { CSSProperties } from '@material-ui/styles';
 import React, { useMemo } from 'react';
 
-const useStyles = makeStyles((theme: BackstageTheme) => {
+const useStyles = makeStyles(theme => {
   const commonCardRating: CSSProperties = {
     height: theme.spacing(3),
     width: theme.spacing(3),

plugins/sonarqube/src/components/SonarQubeCard/Value.tsx

@@ -14,12 +14,11 @@
  * limitations under the License.
  */
 
-import { BackstageTheme } from '@backstage/theme';
 import { makeStyles } from '@material-ui/core/styles';
 import Typography from '@material-ui/core/Typography';
 import React from 'react';
 
-const useStyles = makeStyles((theme: BackstageTheme) => {
+const useStyles = makeStyles(theme => {
   return {
     value: {
       fontSize: '1.5rem',

plugins/tech-insights/src/components/ScorecardsInfo/ScorecardInfo.tsx

@@ -18,11 +18,10 @@ import React from 'react';
 import { makeStyles, Grid, Typography } from '@material-ui/core';
 import { InfoCard } from '@backstage/core-components';
 import { CheckResult } from '@backstage/plugin-tech-insights-common';
-import { BackstageTheme } from '@backstage/theme';
 import { Alert } from '@material-ui/lab';
 import { ScorecardsList } from '../ScorecardsList';
 
-const useStyles = makeStyles((theme: BackstageTheme) => ({
+const useStyles = makeStyles(theme => ({
   subheader: {
     fontWeight: 'bold',
     paddingLeft: theme.spacing(0.5),

plugins/tech-insights/src/components/ScorecardsList/ScorecardsList.tsx

@@ -19,11 +19,10 @@ import { useApi } from '@backstage/core-plugin-api';
 import { makeStyles, List, ListItem, ListItemText } from '@material-ui/core';
 import { techInsightsApiRef } from '../../api';
 import { CheckResult } from '@backstage/plugin-tech-insights-common';
-import { BackstageTheme } from '@backstage/theme';
 import { Alert } from '@material-ui/lab';
 import { MarkdownContent } from '@backstage/core-components';
 
-const useStyles = makeStyles((theme: BackstageTheme) => ({
+const useStyles = makeStyles(theme => ({
   listItemText: {
     paddingRight: theme.spacing(0.5),
   },

plugins/techdocs-module-addons-contrib/src/TextSize/TextSize.tsx

@@ -33,11 +33,11 @@ import {
   Slider,
   IconButton,
   Typography,
+  Theme,
 } from '@material-ui/core';
 import AddIcon from '@material-ui/icons/Add';
 import RemoveIcon from '@material-ui/icons/Remove';
 
-import { BackstageTheme } from '@backstage/theme';
 import { useShadowRootElements } from '@backstage/plugin-techdocs-react';
 
 const boxShadow =
@@ -116,7 +116,7 @@ const marks = [
   },
 ];
 
-const useStyles = makeStyles((theme: BackstageTheme) => ({
+const useStyles = makeStyles(theme => ({
   container: {
     color: theme.palette.textSubtle,
     display: 'flex',
@@ -139,7 +139,7 @@ const useStyles = makeStyles((theme: BackstageTheme) => ({
 
 export const TextSizeAddon = () => {
   const classes = useStyles();
-  const theme = useTheme<BackstageTheme>();
+  const theme = useTheme();
   const [body] = useShadowRootElements(['body']);
 
   const [value, setValue] = useState<number>(() => {
@@ -182,7 +182,7 @@ export const TextSizeAddon = () => {
     if (!body) return;
     const htmlFontSize =
       (
-        theme.typography as BackstageTheme['typography'] & {
+        theme.typography as Theme['typography'] & {
           htmlFontSize?: number;
         }
       )?.htmlFontSize ?? 16;

plugins/xcmetrics/src/components/Accordion/Accordion.tsx

@@ -13,6 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+
 import {
   Accordion as MuiAccordion,
   AccordionSummary as MuiAccordionSummary,
@@ -23,9 +24,8 @@ import {
 } from '@material-ui/core';
 import React, { PropsWithChildren } from 'react';
 import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
-import { BackstageTheme } from '@backstage/theme';
 
-const useStyles = makeStyles((theme: BackstageTheme) =>
+const useStyles = makeStyles(theme =>
   createStyles({
     heading: {
       flexBasis: '33.33%',

plugins/xcmetrics/src/components/BuildDetails/BuildDetails.tsx

@@ -13,6 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+
 import { createStyles, Divider, Grid, makeStyles } from '@material-ui/core';
 import React from 'react';
 import { BuildResponse, xcmetricsApiRef } from '../../api';
@@ -22,12 +23,11 @@ import useAsync from 'react-use/lib/useAsync';
 import { useApi } from '@backstage/core-plugin-api';
 import { formatDuration, formatStatus, formatTime } from '../../utils';
 import { StatusIcon } from '../StatusIcon';
-import { BackstageTheme } from '@backstage/theme';
 import { Accordion } from '../Accordion';
 import { BuildTimeline } from '../BuildTimeline';
 import { PreformattedText } from '../PreformattedText';
 
-const useStyles = makeStyles((theme: BackstageTheme) =>
+const useStyles = makeStyles(theme =>
   createStyles({
     divider: {
       marginTop: theme.spacing(2),

plugins/xcmetrics/src/components/BuildList/BuildList.tsx

@@ -13,6 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+
 import React, { useRef, useState } from 'react';
 import { Table } from '@backstage/core-components';
 import { useApi } from '@backstage/core-plugin-api';
@@ -22,9 +23,8 @@ import { BuildListFilter as Filters } from '../BuildListFilter';
 import { DateTime } from 'luxon';
 import { buildPageColumns } from '../BuildTableColumns';
 import { BuildDetails, withRequest } from '../BuildDetails';
-import { BackstageTheme } from '@backstage/theme';
 
-const useStyles = makeStyles((theme: BackstageTheme) =>
+const useStyles = makeStyles(theme =>
   createStyles({
     detailPanel: {
       padding: theme.spacing(2),

plugins/xcmetrics/src/components/BuildTimeline/BuildTimeline.tsx

@@ -27,13 +27,12 @@ import {
   XAxis,
   YAxis,
 } from 'recharts';
-import { BackstageTheme } from '@backstage/theme';
 import { Target } from '../../api';
 import { formatSecondsInterval, formatPercentage } from '../../utils';
 
 const EMPTY_HEIGHT = 100;
 
-const useStyles = makeStyles((theme: BackstageTheme) =>
+const useStyles = makeStyles(theme =>
   createStyles({
     toolTip: {
       backgroundColor: theme.palette.background.paper,

plugins/xcmetrics/src/components/PreformattedText/PreformattedText.tsx

@@ -26,10 +26,9 @@ import {
 } from '@material-ui/core';
 import CloseIcon from '@material-ui/icons/Close';
 import React, { useState } from 'react';
-import { BackstageTheme } from '@backstage/theme';
 import { cn } from '../../utils';
 
-const useStyles = makeStyles((theme: BackstageTheme) =>
+const useStyles = makeStyles(theme =>
   createStyles({
     pre: {
       whiteSpace: 'pre-line',