Merge pull request #16713 from Pike/theming-scaffolder

Use page theme fontColor consistently in scaffolder headers and cards.

.changeset/cool-feet-speak.md

@@ -0,0 +1,6 @@
+---
+'@backstage/plugin-scaffolder-react': patch
+'@backstage/plugin-scaffolder': patch
+---
+
+Make scaffolder adhere to page themes by using page `fontColor` consistently. If your theme overwrites template list or card headers, review those styles.

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

@@ -21,17 +21,22 @@ import { BackstageTheme } from '@backstage/theme';
 import { TemplateEntityV1beta3 } from '@backstage/plugin-scaffolder-common';
 import { FavoriteEntity } from '@backstage/plugin-catalog-react';
 
-const useStyles = makeStyles<BackstageTheme, { cardBackgroundImage: string }>(
-  () => ({
-    header: {
-      backgroundImage: ({ cardBackgroundImage }) => cardBackgroundImage,
-    },
-    subtitleWrapper: {
-      display: 'flex',
-      justifyContent: 'space-between',
-    },
-  }),
-);
+const useStyles = makeStyles<
+  BackstageTheme,
+  {
+    cardFontColor: string;
+    cardBackgroundImage: string;
+  }
+>(() => ({
+  header: {
+    backgroundImage: ({ cardBackgroundImage }) => cardBackgroundImage,
+    color: ({ cardFontColor }) => cardFontColor,
+  },
+  subtitleWrapper: {
+    display: 'flex',
+    justifyContent: 'space-between',
+  },
+}));
 
 /**
  * Props for the CardHeader component
@@ -54,6 +59,7 @@ export const CardHeader = (props: CardHeaderProps) => {
   const themeForType = getPageTheme({ themeId: type });
 
   const styles = useStyles({
+    cardFontColor: themeForType.fontColor,
     cardBackgroundImage: themeForType.backgroundImage,
   });
 

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

@@ -15,6 +15,7 @@
  */
 
 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';
@@ -34,9 +35,9 @@ import {
   scaffolderListTaskRouteRef,
 } from '../../routes';
 
-const useStyles = makeStyles(theme => ({
+const useStyles = makeStyles<BackstageTheme>(theme => ({
   button: {
-    color: theme.palette.common.white,
+    color: theme.page.fontColor,
   },
 }));
 

plugins/scaffolder/src/components/TemplateCard/TemplateCard.tsx

@@ -64,12 +64,16 @@ import WarningIcon from '@material-ui/icons/Warning';
 import React from 'react';
 import { selectedTemplateRouteRef, viewTechDocRouteRef } from '../../routes';
 
-const useStyles = makeStyles(theme => ({
+const useStyles = makeStyles<
+  BackstageTheme,
+  { fontColor: string; backgroundImage: string }
+>(theme => ({
   cardHeader: {
     position: 'relative',
   },
   title: {
-    backgroundImage: ({ backgroundImage }: any) => backgroundImage,
+    backgroundImage: ({ backgroundImage }) => backgroundImage,
+    color: ({ fontColor }) => fontColor,
   },
   box: {
     overflow: 'hidden',
@@ -186,7 +190,10 @@ export const TemplateCard = ({ template, deprecated }: TemplateCardProps) => {
     ? templateProps.type
     : 'other';
   const theme = backstageTheme.getPageTheme({ themeId });
-  const classes = useStyles({ backgroundImage: theme.backgroundImage });
+  const classes = useStyles({
+    fontColor: theme.fontColor,
+    backgroundImage: theme.backgroundImage,
+  });
   const { name, namespace } = parseEntityRef(stringifyEntityRef(template));
   const href = templateRoute({ templateName: name, namespace });
 

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

@@ -15,6 +15,7 @@
  */
 
 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';
@@ -34,9 +35,9 @@ import {
   nextScaffolderListTaskRouteRef,
 } from '../routes';
 
-const useStyles = makeStyles(theme => ({
+const useStyles = makeStyles((theme: BackstageTheme) => ({
   button: {
-    color: theme.palette.common.white,
+    color: theme.page.fontColor,
   },
 }));