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
@@ -264,6 +264,42 @@ pressed, and disabled variants for interactive states.
  </Table.Body>
 </Table.Root>

+## Inherited background
+
+`--bui-bg-inherit` resolves to the bg color of the nearest enclosing element with a
+`data-bg` attribute (set by `Box`, `Flex`, `Grid`, `Card`, `Accordion`, or any
+element that explicitly sets `data-bg`). When no such ancestor exists it falls
+back to `--bui-bg-app`. Use it from CSS when a sticky, fixed, or otherwise
+overlapping element needs to match its surrounding bg without hardcoding a level.
+
+<CodeBlock
+  code={`.searchBarContainer {
+  position: sticky;
+  top: 0;
+  background-color: var(--bui-bg-inherit);
+}`}
+/>
+
+<Table.Root>
+  <Table.Header>
+    <Table.HeaderRow>
+      <Table.HeaderCell>Prop</Table.HeaderCell>
+      <Table.HeaderCell>Description</Table.HeaderCell>
+    </Table.HeaderRow>
+  </Table.Header>
+  <Table.Body>
+    <Table.Row>
+      <Table.Cell>
+        <Chip head>--bui-bg-inherit</Chip>
+      </Table.Cell>
+      <Table.Cell>
+        Resolves to the bg color of the nearest enclosing `data-bg` ancestor,
+        falling back to `--bui-bg-app`.
+      </Table.Cell>
+    </Table.Row>
+  </Table.Body>
+</Table.Root>
+
 ## Solid background colors

 <Table.Root>