From 7245e744ab1883b7162a3ee6c157b903cec1def1 Mon Sep 17 00:00:00 2001 From: Tim Hansen Date: Tue, 14 Mar 2023 11:46:16 -0600 Subject: [PATCH] Fix colors in HeaderLabel not following page theme Signed-off-by: Tim Hansen --- .changeset/thirty-crabs-tell.md | 5 +++++ .../src/layout/HeaderLabel/HeaderLabel.tsx | 9 +++++---- 2 files changed, 10 insertions(+), 4 deletions(-) create mode 100644 .changeset/thirty-crabs-tell.md diff --git a/.changeset/thirty-crabs-tell.md b/.changeset/thirty-crabs-tell.md new file mode 100644 index 0000000000..2ca5e8cd34 --- /dev/null +++ b/.changeset/thirty-crabs-tell.md @@ -0,0 +1,5 @@ +--- +'@backstage/core-components': patch +--- + +Fixed the font color on `BackstageHeaderLabel` to respect the active page theme. diff --git a/packages/core-components/src/layout/HeaderLabel/HeaderLabel.tsx b/packages/core-components/src/layout/HeaderLabel/HeaderLabel.tsx index e3b6299f85..757aca688a 100644 --- a/packages/core-components/src/layout/HeaderLabel/HeaderLabel.tsx +++ b/packages/core-components/src/layout/HeaderLabel/HeaderLabel.tsx @@ -14,8 +14,9 @@ * limitations under the License. */ +import { BackstageTheme } from '@backstage/theme'; import Grid from '@material-ui/core/Grid'; -import { makeStyles } from '@material-ui/core/styles'; +import { alpha, makeStyles } from '@material-ui/core/styles'; import Typography from '@material-ui/core/Typography'; import React from 'react'; import { Link } from '../../components/Link'; @@ -23,13 +24,13 @@ import { Link } from '../../components/Link'; /** @public */ export type HeaderLabelClassKey = 'root' | 'label' | 'value'; -const useStyles = makeStyles( +const useStyles = makeStyles( theme => ({ root: { textAlign: 'left', }, label: { - color: theme.palette.common.white, + color: theme.page.fontColor, fontWeight: theme.typography.fontWeightBold, letterSpacing: 0, fontSize: theme.typography.fontSize, @@ -37,7 +38,7 @@ const useStyles = makeStyles( lineHeight: 1, }, value: { - color: 'rgba(255, 255, 255, 0.8)', + color: alpha(theme.page.fontColor, 0.8), fontSize: theme.typography.fontSize, lineHeight: 1, },