paulononato/backstage
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(ui): preserve Header breadcrumb typography

Browse Source 
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 <johanopersson@gmail.com>
This commit is contained in:
Johan Persson
2026-06-01 10:40:40 +02:00
parent 0d8d90b351
commit 1f709a386b
2 changed files with 17 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.changeset/ui-header-breadcrumb-specificity.md
+7
View File
@@ -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
packages/ui/src/components/Header/Header.module.css
+10 -4
View File
@@ -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);
}