diff --git a/.changeset/plain-deer-sneeze.md b/.changeset/plain-deer-sneeze.md index bb544740ee..f492746f0a 100644 --- a/.changeset/plain-deer-sneeze.md +++ b/.changeset/plain-deer-sneeze.md @@ -2,10 +2,12 @@ '@backstage/ui': minor --- -**BREAKING:** Renamed and removed CSS tokens. +**BREAKING:** Renamed, added, and removed CSS tokens. - Renamed `--bui-bg-neutral-0` to `--bui-bg-app`. - Renamed `--bui-border` to `--bui-border-2`. +- Added `--bui-border-1` for subtle, low-contrast borders. +- Added `--bui-bg-popover` for the background color of popovers, tooltips, menus, and dialogs. - Removed `--bui-border-hover`, `--bui-border-pressed`, and `--bui-border-disabled`. **Migration:** diff --git a/docs-ui/src/app/tokens/page.mdx b/docs-ui/src/app/tokens/page.mdx index bc6e17a27c..f359c10525 100644 --- a/docs-ui/src/app/tokens/page.mdx +++ b/docs-ui/src/app/tokens/page.mdx @@ -474,25 +474,25 @@ low contrast to help as a separator with the different background colors. - --bui-border-2-danger + --bui-border-danger It should be used on top of `--bui-bg-danger`. - --bui-border-2-warning + --bui-border-warning It should be used on top of `--bui-bg-warning`. - --bui-border-2-success + --bui-border-success It should be used on top of `--bui-bg-success`. - --bui-border-2-info + --bui-border-info It should be used on top of `--bui-bg-info`. diff --git a/docs/conf/user-interface/index.md b/docs/conf/user-interface/index.md index 19f5251021..cb53ebe81c 100644 --- a/docs/conf/user-interface/index.md +++ b/docs/conf/user-interface/index.md @@ -156,6 +156,7 @@ 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. | @@ -221,6 +222,7 @@ These border colors are mostly meant to be used as borders on top of any compone | `--bui-border-danger` | It should be used on top of `--bui-bg-danger`. | | `--bui-border-warning` | It should be used on top of `--bui-bg-warning`. | | `--bui-border-success` | It should be used on top of `--bui-bg-success`. | +| `--bui-border-info` | It should be used on top of `--bui-bg-info`. | #### Special colors