From d493126c98cfae9b8daff5605b7af301bcc8dfd2 Mon Sep 17 00:00:00 2001 From: James Brooks <52410024+jabrks@users.noreply.github.com> Date: Fri, 19 Sep 2025 16:09:27 +0100 Subject: [PATCH] Fix light mode colour token in ItemCardHeader (#31203) The text colour in the ItemCardHeader component is always white, which makes the content unreadable that when you're rendering on a white background in light mode. This switches to a semantic token instead that will dynamically adjust to whichever theme is currently set. Signed-off-by: James Brooks --- .changeset/fast-queens-guess.md | 5 +++++ .../core-components/src/layout/ItemCard/ItemCardHeader.tsx | 2 +- 2 files changed, 6 insertions(+), 1 deletion(-) create mode 100644 .changeset/fast-queens-guess.md diff --git a/.changeset/fast-queens-guess.md b/.changeset/fast-queens-guess.md new file mode 100644 index 0000000000..b2e5086e9e --- /dev/null +++ b/.changeset/fast-queens-guess.md @@ -0,0 +1,5 @@ +--- +'@backstage/core-components': patch +--- + +Swap base token for semantic token in ItemCardHeader to ensure readability in light mode. diff --git a/packages/core-components/src/layout/ItemCard/ItemCardHeader.tsx b/packages/core-components/src/layout/ItemCard/ItemCardHeader.tsx index b21ac53cf6..115c9e89e1 100644 --- a/packages/core-components/src/layout/ItemCard/ItemCardHeader.tsx +++ b/packages/core-components/src/layout/ItemCard/ItemCardHeader.tsx @@ -30,7 +30,7 @@ export type ItemCardHeaderClassKey = 'root'; const styles = (theme: Theme) => createStyles({ root: { - color: theme.palette.common.white, + color: theme.palette.text.primary, padding: theme.spacing(2, 2, 3), backgroundImage: theme.getPageTheme({ themeId: 'card' }).backgroundImage, backgroundPosition: 0,