Redesigns the BUI color token system in `@backstage/ui`:
- Adds a gray scale (`--bui-gray-1` through `--bui-gray-11`)
- Adds new foreground tokens with explicit hex values (primary, secondary, disabled, positive, negative, warning, announcement)
- Introduces five new semantic color families — Accent, Announcement, Warning, Negative, Positive — each with bg-base, bg-subdued, border, fg-on-base, and fg-on-subdued variants, for both light and dark themes
- Moves all legacy tokens (`--bui-bg-solid-*`, `--bui-bg-neutral-*`, `--bui-bg-danger/warning/success/info`, `--bui-fg-solid`, `--bui-fg-danger/success/info`, `--bui-border-*`, `--bui-shadow`) into a clearly marked `/* Deprecated tokens */` section in both light and dark themes
- Updates the Spotify theme overrides to use the new accent tokens and mark legacy overrides as deprecated
- Rewrites the `Colors` Storybook story to display all token families as a live, theme-aware reference grid
- Adds a new `@backstage/no-deprecated-bui-tokens` ESLint rule to `@backstage/eslint-plugin` that warns when any deprecated BUI token is referenced in JS/TS string literals; the rule is included in the `recommended` config so it applies to all plugin authors automatically
Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>
Align PluginHeader spacing across tabbed and non-tabbed variants so the component owns the surrounding page spacing more consistently.
Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>
- Always render headerTop wrapper for consistent spacing
- Reduce default content padding-top from space-6 to space-3
- Add PluginHeaderAndHeader story and update Spotify theme
Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>
- Add data-has-tags attribute to reduce header padding-top when tags are present
- Rename beforeSticky/afterSticky classes to headerTop/headerBottom
- Always render headerBottom for consistent bottom margin
- Inline JSX sections into a single return statement
Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>
- Add `packages/ui/src/guidelines/CardsWithTable.stories.tsx` as the
first guideline story, showing three data-driven metric cards in a
3-column grid above a paginated table of catalog services.
- Update Storybook `storySort` order so the new `Guidelines` group
appears at the top of the `Backstage UI` section.
- Wrap story content in a `Box bg="neutral-1"` when the Spotify theme
is active, preserving `layout: centered` centering and always
applying `borderRadius`.
- Import `Box` from the UI package into the Storybook preview.
- Remove `transition` from `Container` CSS to avoid animation on resize.
- Set `padding-inline: 0` on `.bui-Container` inside the Spotify theme
so containers render flush within the themed wrapper.
Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>
Co-authored-by: Cursor <cursoragent@cursor.com>
Charles de Dreuille