From 3c96e77b51395b937aab7398580efc738e03275e Mon Sep 17 00:00:00 2001
From: Axel Hecht <axel@pike.org>
Date: Mon, 6 Mar 2023 14:14:41 +0100
Subject: [PATCH] Use page theme fontColor consistently in scaffolder headers
 and cards.

This fixes problems with themes with white header background, which
end up with white-on-white text for card heads and context menus.

Signed-off-by: Axel Hecht <axel@pike.org>
---
 .changeset/cool-feet-speak.md                 |  6 ++++
 .../components/TemplateCard/CardHeader.tsx    | 28 +++++++++++--------
 .../ScaffolderPageContextMenu.tsx             |  5 ++--
 .../components/TemplateCard/TemplateCard.tsx  | 13 +++++++--
 .../src/next/TemplateListPage/ContextMenu.tsx |  5 ++--
 5 files changed, 39 insertions(+), 18 deletions(-)
 create mode 100644 .changeset/cool-feet-speak.md

diff --git a/.changeset/cool-feet-speak.md b/.changeset/cool-feet-speak.md
new file mode 100644
index 0000000000..8cf3df759a
--- /dev/null
+++ b/.changeset/cool-feet-speak.md
@@ -0,0 +1,6 @@
+---
+'@backstage/plugin-scaffolder-react': minor
+'@backstage/plugin-scaffolder': minor
+---
+
+Make scaffolder adhere to page themes by using page fontColor consistently. If your theme overwrites template list or card headers, review those stylings.
diff --git a/plugins/scaffolder-react/src/next/components/TemplateCard/CardHeader.tsx b/plugins/scaffolder-react/src/next/components/TemplateCard/CardHeader.tsx
index 3a5785a4f6..608af1a0bf 100644
--- a/plugins/scaffolder-react/src/next/components/TemplateCard/CardHeader.tsx
+++ b/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,
   });
 
diff --git a/plugins/scaffolder/src/components/ScaffolderPage/ScaffolderPageContextMenu.tsx b/plugins/scaffolder/src/components/ScaffolderPage/ScaffolderPageContextMenu.tsx
index ca7648546e..ef79eda406 100644
--- a/plugins/scaffolder/src/components/ScaffolderPage/ScaffolderPageContextMenu.tsx
+++ b/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,
   },
 }));
 
diff --git a/plugins/scaffolder/src/components/TemplateCard/TemplateCard.tsx b/plugins/scaffolder/src/components/TemplateCard/TemplateCard.tsx
index 80aba04060..825317ef73 100644
--- a/plugins/scaffolder/src/components/TemplateCard/TemplateCard.tsx
+++ b/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 });
 
diff --git a/plugins/scaffolder/src/next/TemplateListPage/ContextMenu.tsx b/plugins/scaffolder/src/next/TemplateListPage/ContextMenu.tsx
index 6165d40e7c..d78b8a62c4 100644
--- a/plugins/scaffolder/src/next/TemplateListPage/ContextMenu.tsx
+++ b/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,
   },
 }));