feat(ui): replace --bui-bg-popover with layered bg approach

Remove the --bui-bg-popover token and adopt a two-layer background
pattern across overlay components: outer shell uses --bui-bg-app,
inner content uses Box bg="neutral-1".

Components updated: Popover, Tooltip, Menu, Dialog.

Each component gets a local border-radius CSS variable, a Box
content wrapper with neutral-1 background, and updated arrow
fills where applicable.

Story "is open" variants for each component now use a dot-grid
background pattern to detect background transparency issues in
Chromatic snapshots.

Signed-off-by: Johan Persson <johanopersson@gmail.com>
This commit is contained in:
Johan Persson
2026-02-24 12:58:10 +01:00
parent ba3e15fefb
commit b42fcdca2e
19 changed files with 300 additions and 121 deletions
-1
View File
@@ -156,7 +156,6 @@ These colors form a layered neutral scale for your application backgrounds. `--b
| Token Name | Description |
| ----------------------------- | ------------------------------------------------------------ |
| `--bui-bg-app` | The base background color of your Backstage instance. |
| `--bui-bg-popover` | The background color used for popovers, tooltips, and menus. |
| `--bui-bg-neutral-1` | First elevated layer. Use for cards, dialogs, and panels. |
| `--bui-bg-neutral-1-hover` | Hover state for elements on neutral-1. |
| `--bui-bg-neutral-1-pressed` | Pressed state for elements on neutral-1. |