feat(ui): add --bui-bg-inherit CSS variable (#34124)

* feat(ui): add --bui-bg-inherit CSS variable in core.css Signed-off-by: Johan Persson <johanopersson@gmail.com> * refactor(ui): remove duplicated data-bg painting from Box.module.css Signed-off-by: Johan Persson <johanopersson@gmail.com> * refactor(ui): remove duplicated data-bg painting from Flex.module.css Signed-off-by: Johan Persson <johanopersson@gmail.com> * refactor(ui): remove duplicated data-bg painting from Grid.module.css Signed-off-by: Johan Persson <johanopersson@gmail.com> * refactor(ui): centralize Accordion data-bg painting, preserve no-intent behavior Signed-off-by: Johan Persson <johanopersson@gmail.com> * refactor(ui): use --bui-bg-inherit for Card scroll-shadow gradients Signed-off-by: Johan Persson <johanopersson@gmail.com> * docs(ui): document --bui-bg-inherit token Signed-off-by: Johan Persson <johanopersson@gmail.com> * chore: changeset for --bui-bg-inherit Signed-off-by: Johan Persson <johanopersson@gmail.com> * docs(ui): add Storybook story for --bui-bg-inherit Signed-off-by: Johan Persson <johanopersson@gmail.com> * docs(ui): fold --bui-bg-inherit story into colors stories Signed-off-by: Johan Persson <johanopersson@gmail.com> * changeset: Reword for clarity. Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com> Signed-off-by: Johan Persson <johanopersson@gmail.com> --------- Signed-off-by: Johan Persson <johanopersson@gmail.com> Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>
2026-05-05 16:00:47 +02:00
parent c8813abee0
commit 37535b2a60
9 changed files with 155 additions and 105 deletions
@@ -0,0 +1,24 @@
+---
+'@backstage/ui': patch
+---
+
+Added a public `--bui-bg-inherit` CSS variable that resolves to the background
+color of the nearest enclosing bg provider (`Box`, `Flex`, `Grid`, `Card`,
+`Accordion`, or any element with a `data-bg` attribute), falling back to
+`--bui-bg-app`. Use it from CSS for sticky or fixed elements that need to match
+their surrounding surface without hardcoding a specific level.
+
+```css
+.searchBarContainer {
+  position: sticky;
+  top: 0;
+  background-color: var(--bui-bg-inherit);
+}
+```
+
+As part of this change, the `data-bg` painting rules previously duplicated in
+`Box`, `Flex`, `Grid`, `Accordion`, and `Card` have been centralized into a
+single source in `core.css`. Painting and component behavior are unchanged for
+all existing usages, with one minor expansion: any element with a `data-bg`
+attribute (including provider elements and any element that sets it directly)
+is now painted, not only `Box`/`Flex`/`Grid`/`Card`/`Accordion` elements.