From 1f709a386b8ce0ab9a994f64634fde4ead00f78e Mon Sep 17 00:00:00 2001 From: Johan Persson Date: Mon, 1 Jun 2026 10:40:40 +0200 Subject: [PATCH] fix(ui): preserve Header breadcrumb typography Increase the specificity of Header breadcrumb styles so that Link defaults do not override contextual typography when stylesheets are loaded in a different order. Add a patch changeset for @backstage/ui. Signed-off-by: Johan Persson --- .changeset/ui-header-breadcrumb-specificity.md | 7 +++++++ .../ui/src/components/Header/Header.module.css | 14 ++++++++++---- 2 files changed, 17 insertions(+), 4 deletions(-) create mode 100644 .changeset/ui-header-breadcrumb-specificity.md diff --git a/.changeset/ui-header-breadcrumb-specificity.md b/.changeset/ui-header-breadcrumb-specificity.md new file mode 100644 index 0000000000..8078a8e459 --- /dev/null +++ b/.changeset/ui-header-breadcrumb-specificity.md @@ -0,0 +1,7 @@ +--- +'@backstage/ui': patch +--- + +Fixed Header breadcrumb typography so it remains consistent when component styles are loaded in different orders. + +**Affected components:** Header diff --git a/packages/ui/src/components/Header/Header.module.css b/packages/ui/src/components/Header/Header.module.css index bd41f0e7ec..003f58cf7b 100644 --- a/packages/ui/src/components/Header/Header.module.css +++ b/packages/ui/src/components/Header/Header.module.css @@ -128,8 +128,13 @@ gap: var(--bui-space-1); } - .bui-HeaderBreadcrumbs .bui-HeaderBreadcrumbLink, - .bui-HeaderBreadcrumbsSmall .bui-HeaderBreadcrumbLinkSmall { + /* + * Link variant defaults have the same specificity as these contextual styles. + * Repeat the slot class so the Header styles win regardless of stylesheet order. + */ + .bui-HeaderBreadcrumbs .bui-HeaderBreadcrumbLink.bui-HeaderBreadcrumbLink, + .bui-HeaderBreadcrumbsSmall + .bui-HeaderBreadcrumbLinkSmall.bui-HeaderBreadcrumbLinkSmall { max-width: 240px; overflow: hidden; font-family: var(--bui-font-regular); @@ -139,11 +144,12 @@ white-space: nowrap; } - .bui-HeaderBreadcrumbs .bui-HeaderBreadcrumbLink { + .bui-HeaderBreadcrumbs .bui-HeaderBreadcrumbLink.bui-HeaderBreadcrumbLink { font-size: inherit; } - .bui-HeaderBreadcrumbsSmall .bui-HeaderBreadcrumbLinkSmall { + .bui-HeaderBreadcrumbsSmall + .bui-HeaderBreadcrumbLinkSmall.bui-HeaderBreadcrumbLinkSmall { font-size: var(--bui-font-size-4); }