custom theme options for star icon

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

.changeset/happy-bags-invite.md

@@ -0,0 +1,12 @@
+---
+'@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
+---
+
+- 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.

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

@@ -36,6 +36,8 @@ import MuiPersonIcon from '@material-ui/icons/Person';
 import MuiWarningIcon from '@material-ui/icons/Warning';
 import MuiStorageIcon from '@material-ui/icons/Storage';
 import MuiFeaturedPlayListIcon from '@material-ui/icons/FeaturedPlayList';
+import Star from '@material-ui/icons/Star';
+import StarBorder from '@material-ui/icons/StarBorder';
 
 export const icons = {
   brokenImage: MuiBrokenImageIcon as IconComponent,
@@ -62,4 +64,6 @@ export const icons = {
   'kind:template': MuiFeaturedPlayListIcon as IconComponent,
   user: MuiPersonIcon as IconComponent,
   warning: MuiWarningIcon as IconComponent,
+  star: Star as IconComponent,
+  unstarred: StarBorder as IconComponent,
 };

packages/core-components/api-report.md

@@ -1186,6 +1186,9 @@ export function SimpleStepperStep(
 // @public (undocumented)
 export type SimpleStepperStepClassKey = 'end';
 
+// @public (undocumented)
+export function StarIcon(props: IconComponentProps): React_2.JSX.Element;
+
 // Warning: (ae-missing-release-tag) "StatusAborted" is part of the package's API, but it is missing a release tag (@alpha, @beta, @public, or @internal)
 //
 // @public (undocumented)
@@ -1455,6 +1458,9 @@ export function TrendLine(
     },
 ): React_2.JSX.Element | null;
 
+// @public (undocumented)
+export function UnstarredIcon(props: IconComponentProps): React_2.JSX.Element;
+
 // @public
 export function useContent(): {
   focusContent: () => void;

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

@@ -95,3 +95,11 @@ export function UserIcon(props: IconComponentProps) {
 export function WarningIcon(props: IconComponentProps) {
   return <AppIcon id="warning" {...props} />;
 }
+/** @public */
+export function StarIcon(props: IconComponentProps) {
+  return <AppIcon id="star" {...props} />;
+}
+/** @public */
+export function UnstarredIcon(props: IconComponentProps) {
+  return <AppIcon id="unstarred" {...props} />;
+}

packages/theme/api-report.md

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

packages/theme/src/base/palettes.ts

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

packages/theme/src/base/types.ts

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

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

@@ -18,8 +18,7 @@ import { Entity, stringifyEntityRef } from '@backstage/catalog-model';
 import IconButton from '@material-ui/core/IconButton';
 import Tooltip from '@material-ui/core/Tooltip';
 import { withStyles } from '@material-ui/core/styles';
-import Star from '@material-ui/icons/Star';
-import StarBorder from '@material-ui/icons/StarBorder';
+import { StarIcon, UnstarredIcon } from '@backstage/core-components';
 import React, { ComponentProps } from 'react';
 import { useStarredEntity } from '../../hooks/useStarredEntity';
 import { catalogReactTranslationRef } from '../../translation';
@@ -30,12 +29,11 @@ export type FavoriteEntityProps = ComponentProps<typeof IconButton> & {
   entity: Entity;
 };
 
-const YellowStar = withStyles({
+const FilledStar = withStyles(theme => ({
   root: {
-    color: '#f3ba37',
+    color: theme.palette.entityStarButton.color,
   },
-})(Star);
-
+}))(StarIcon);
 /**
  * IconButton for showing if a current entity is starred and adding/removing it from the favorite entities
  * @param props - MaterialUI IconButton props extended by required `entity` prop
@@ -64,7 +62,7 @@ export const FavoriteEntity = (props: FavoriteEntityProps) => {
       onClick={() => toggleStarredEntity()}
     >
       <Tooltip id={id} title={title}>
-        {isStarredEntity ? <YellowStar /> : <StarBorder />}
+        {isStarredEntity ? <FilledStar /> : <UnstarredIcon />}
       </Tooltip>
     </IconButton>
   );

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

@@ -28,7 +28,7 @@ import MenuItem from '@material-ui/core/MenuItem';
 import Typography from '@material-ui/core/Typography';
 import { makeStyles } from '@material-ui/core/styles';
 import SettingsIcon from '@material-ui/icons/Settings';
-import StarIcon from '@material-ui/icons/Star';
+import { StarIcon } from '@backstage/core-components';
 import React, { Fragment, useEffect, useMemo, useState } from 'react';
 import { EntityUserFilter } from '../../filters';
 import { useEntityList } from '../../hooks';

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

@@ -23,6 +23,8 @@ import {
 } from '@backstage/catalog-model';
 import {
   CodeSnippet,
+  StarIcon,
+  UnstarredIcon,
   Table,
   TableColumn,
   TableProps,
@@ -39,8 +41,6 @@ import { withStyles } from '@material-ui/core/styles';
 import { visuallyHidden } from '@mui/utils';
 import Edit from '@material-ui/icons/Edit';
 import OpenInNew from '@material-ui/icons/OpenInNew';
-import Star from '@material-ui/icons/Star';
-import StarBorder from '@material-ui/icons/StarBorder';
 import { capitalize } from 'lodash';
 import pluralize from 'pluralize';
 import React, { ReactNode, useMemo } from 'react';
@@ -64,11 +64,11 @@ export interface CatalogTableProps {
   subtitle?: string;
 }
 
-const YellowStar = withStyles({
+const FilledStar = withStyles(theme => ({
   root: {
-    color: '#f3ba37',
+    color: theme.palette.entityStarButton.color,
   },
-})(Star);
+}))(StarIcon);
 
 const refCompare = (a: Entity, b: Entity) => {
   const toRef = (entity: Entity) =>
@@ -163,7 +163,7 @@ export const CatalogTable = (props: CatalogTableProps) => {
         icon: () => (
           <>
             <Typography style={visuallyHidden}>{title}</Typography>
-            {isStarred ? <YellowStar /> : <StarBorder />}
+            {isStarred ? <FilledStar /> : <UnstarredIcon />}
           </>
         ),
         tooltip: title,

plugins/home/src/components/StarredEntityListItem/StarredEntityListItem.tsx

@@ -24,7 +24,8 @@ import React from 'react';
 import { Link } from 'react-router-dom';
 import { entityRouteRef } from '@backstage/plugin-catalog-react';
 import { useRouteRef } from '@backstage/core-plugin-api';
-import StarIcon from '@material-ui/icons/Star';
+import { StarIcon } from '@backstage/core-components';
+import { withStyles } from '@material-ui/core/styles';
 
 type EntityListItemProps = {
   entity: Entity;
@@ -37,6 +38,12 @@ export const StarredEntityListItem = ({
 }: EntityListItemProps) => {
   const catalogEntityRoute = useRouteRef(entityRouteRef);
 
+  const FilledStar = withStyles(theme => ({
+    root: {
+      color: theme.palette.entityStarButton.color,
+    },
+  }))(StarIcon);
+
   return (
     <ListItem key={stringifyEntityRef(entity)}>
       <ListItemIcon>
@@ -46,7 +53,7 @@ export const StarredEntityListItem = ({
             aria-label="unstar"
             onClick={() => onToggleStarredEntity(entity)}
           >
-            <StarIcon style={{ color: '#f3ba37' }} />
+            <FilledStar />
           </IconButton>
         </Tooltip>
       </ListItemIcon>

plugins/techdocs/src/home/components/Tables/actions.tsx

@@ -18,14 +18,13 @@ import React from 'react';
 import ShareIcon from '@material-ui/icons/Share';
 import { DocsTableRow } from './types';
 import { withStyles } from '@material-ui/core/styles';
-import Star from '@material-ui/icons/Star';
-import StarBorder from '@material-ui/icons/StarBorder';
+import { StarIcon, UnstarredIcon } from '@backstage/core-components';
 
-const YellowStar = withStyles({
+const FilledStar = withStyles(theme => ({
   root: {
-    color: '#f3ba37',
+    color: theme.palette.entityStarButton.color,
   },
-})(Star);
+}))(StarIcon);
 
 /**
  * Not directly exported, but through DocsTable.actions and EntityListDocsTable.actions
@@ -52,7 +51,7 @@ export const actionFactories = {
       const isStarred = isStarredEntity(entity);
       return {
         cellStyle: { paddingLeft: '1em' },
-        icon: () => (isStarred ? <YellowStar /> : <StarBorder />),
+        icon: () => (isStarred ? <FilledStar /> : <UnstarredIcon />),
         tooltip: isStarred ? 'Remove from favorites' : 'Add to favorites',
         onClick: () => toggleStarredEntity(entity),
       };