update favorite toggle icons

Signed-off-by: Stephen Glass <stephen@stephen.glass>

.changeset/happy-bags-invite.md

@@ -2,13 +2,8 @@
 '@backstage/core-components': patch
 '@backstage/app-defaults': patch
 '@backstage/plugin-catalog-react': patch
-'@backstage/plugin-techdocs': patch
-'@backstage/plugin-catalog': patch
-'@backstage/theme': patch
-'@backstage/plugin-home': patch
 '@backstage/core-app-api': patch
 '@backstage/test-utils': patch
 ---
 
-- Allow custom star icons to be provided via the `star` and `unstarred` icon overides. See how to override existing icons in the [Backstage documentation](https://backstage.io/docs/getting-started/app-custom-theme/#custom-icons).
-- Add `entityStarButton.color` theme option to allow custom themes to specify color for filled star icons.
+Allow custom star icons to be provided via the `star` and `unstarred` icon overides. See how to override existing icons in the [Backstage documentation](https://backstage.io/docs/getting-started/app-custom-theme/#custom-icons).

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

@@ -16,9 +16,9 @@
 import React, { ComponentProps } from 'react';
 import IconButton from '@material-ui/core/IconButton';
 import Tooltip from '@material-ui/core/Tooltip';
+import Typography from '@material-ui/core/Typography';
 import { Theme, makeStyles } from '@material-ui/core/styles';
-import Star from '@material-ui/icons/Star';
-import StarBorder from '@material-ui/icons/StarBorder';
+import { StarIcon, UnstarredIcon } from '../../icons';
 
 const useStyles = makeStyles<Theme>(
   theme => ({
@@ -50,10 +50,13 @@ export function FavoriteToggleIcon(props: { isFavorite: boolean }) {
   const { isFavorite } = props;
   const classes = useStyles();
 
-  return isFavorite ? (
-    <Star className={classes.icon} />
-  ) : (
-    <StarBorder className={classes.iconBorder} />
+  return (
+    <Typography
+      component="span"
+      className={isFavorite ? classes.icon : classes.iconBorder}
+    >
+      {isFavorite ? <StarIcon /> : <UnstarredIcon />}
+    </Typography>
   );
 }
 

packages/theme/api-report.md

@@ -81,9 +81,6 @@ export type BackstagePaletteAdditions = {
     closeButtonColor?: string;
     warning?: string;
   };
-  entityStarButton: {
-    color: string;
-  };
 };
 
 // @public @deprecated
@@ -313,9 +310,6 @@ export const palettes: {
     tabbar: {
       indicator: string;
     };
-    entityStarButton: {
-      color: string;
-    };
   };
   dark: {
     type: 'dark';
@@ -390,9 +384,6 @@ export const palettes: {
     tabbar: {
       indicator: string;
     };
-    entityStarButton: {
-      color: string;
-    };
   };
 };
 

packages/theme/src/base/palettes.ts

@@ -89,9 +89,6 @@ export const palettes = {
     tabbar: {
       indicator: '#9BF0E1',
     },
-    entityStarButton: {
-      color: '#F3BA37',
-    },
   },
   dark: {
     type: 'dark' as const,
@@ -166,8 +163,5 @@ export const palettes = {
     tabbar: {
       indicator: '#9BF0E1',
     },
-    entityStarButton: {
-      color: '#F3BA37',
-    },
   },
 };

packages/theme/src/base/types.ts

@@ -82,9 +82,6 @@ export type BackstagePaletteAdditions = {
     closeButtonColor?: string;
     warning?: string;
   };
-  entityStarButton: {
-    color: string;
-  };
 };
 
 /**

plugins/catalog/src/components/CatalogTable/CatalogTable.tsx

@@ -23,8 +23,6 @@ import {
 } from '@backstage/catalog-model';
 import {
   CodeSnippet,
-  StarIcon,
-  UnstarredIcon,
   Table,
   TableColumn,
   TableProps,