packages/theme: make BackstageTheme a type and update usages

packages/core/src/components/CircleProgress.tsx

@@ -19,7 +19,7 @@ import { BackstageTheme } from '@backstage/theme';
 import { Circle } from 'rc-progress';
 import React, { FC } from 'react';
 
-const useStyles = makeStyles<typeof BackstageTheme>(theme => ({
+const useStyles = makeStyles<BackstageTheme>(theme => ({
   root: {
     position: 'relative',
     lineHeight: 0,

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

@@ -19,7 +19,7 @@ import { BackstageTheme } from '@backstage/theme';
 import classNames from 'classnames';
 import React, { FC } from 'react';
 
-const useStyles = makeStyles<typeof BackstageTheme>(theme => ({
+const useStyles = makeStyles<BackstageTheme>(theme => ({
   status: {
     width: 12,
     height: 12,

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

@@ -27,7 +27,7 @@ const errorOutlineStyles = theme => ({
 });
 const ErrorOutlineStyled = withStyles(errorOutlineStyles)(ErrorOutline);
 
-const useStyles = makeStyles<typeof BackstageTheme>(theme => ({
+const useStyles = makeStyles<BackstageTheme>(theme => ({
   message: {
     display: 'flex',
     flexDirection: 'column',

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

@@ -23,7 +23,7 @@ import { Theme } from 'layout/Page/Page';
 // import { Link } from 'shared/components';
 import Waves from './Waves';
 
-const useStyles = makeStyles<typeof BackstageTheme>(theme => ({
+const useStyles = makeStyles<BackstageTheme>(theme => ({
   header: {
     gridArea: 'pageHeader',
     padding: theme.spacing(3),

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

@@ -20,7 +20,7 @@ import React, { FC, useRef, useState } from 'react';
 import { sidebarConfig, SidebarContext } from './config';
 import { BackstageTheme } from '@backstage/theme';
 
-const useStyles = makeStyles<typeof BackstageTheme>(theme => ({
+const useStyles = makeStyles<BackstageTheme>(theme => ({
   root: {
     zIndex: 1000,
     position: 'relative',

packages/theme/src/index.ts

@@ -14,9 +14,6 @@
  * limitations under the License.
  */
 
-// TODO: backwards compatibility, remove
-import { lightTheme } from './themes';
-export { lightTheme as BackstageTheme };
-
 export * from './themes';
 export * from './baseTheme';
+export * from './types';

plugins/lighthouse/src/components/CategoryTrendline/index.tsx

@@ -18,10 +18,7 @@ import { Sparklines, SparklinesLine, SparklinesProps } from 'react-sparklines';
 import { useTheme } from '@material-ui/core';
 import { BackstageTheme } from '@backstage/theme';
 
-function color(
-  data: number[],
-  theme: typeof BackstageTheme,
-): string | undefined {
+function color(data: number[], theme: BackstageTheme): string | undefined {
   const lastNum = data[data.length - 1];
   if (!lastNum) return undefined;
   if (lastNum >= 0.9) return theme.palette.status.ok;
@@ -30,7 +27,7 @@ function color(
 }
 
 const CategoryTrendline: FC<SparklinesProps & { title?: string }> = props => {
-  const theme = useTheme<typeof BackstageTheme>();
+  const theme = useTheme<BackstageTheme>();
 
   if (!props.data) return null;
   return (