Increase the specificity of Header breadcrumb styles so that Link defaults do not override contextual typography when stylesheets are loaded in a different order.
Add a patch changeset for @backstage/ui.
Signed-off-by: Johan Persson <johanopersson@gmail.com>
Replace --bui-surface-1..5 with --bui-bg-neutral-1..5 for both light
and dark themes. --bui-bg-neutral-1 replaces the deprecated --bui-bg-app,
and --bui-bg-neutral-2..5 extend the scale. The old bare --bui-bg-neutral-1..4
entries are removed from the deprecated section since their names are now
reused; the hover/pressed/disabled variants remain deprecated.
Updates colors.stories.tsx, the ESLint rule and tests, and all migration
documentation and the PR description accordingly.
Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>
- Add patch changeset for @backstage/ui (new semantic color token families)
- Add patch changeset for @backstage/eslint-plugin (no-deprecated-bui-tokens rule)
- Remove redundant wrapper div in the Colors story and drop minHeight
that was preventing scroll in the Storybook canvas
Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>
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>
Add container layout to Header sections so the title, actions, tags, metadata, and tabs align with surrounding page content.
Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>
* feat(ui): add DatePicker component
Add a single-date picker built on React Aria's DatePicker, mirroring the
existing DateRangePicker implementation. Includes the date field with
segmented input, calendar popover, BUI design tokens, bg consumer
pattern, and full keyboard/screen reader accessibility.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Signed-off-by: Erik Hughes <erikh@spotify.com>
* fix(ui): address DatePicker PR feedback
- Remove unused dataAttributes spread from DatePickerGroup
- Mark DatePickerGroupDefinition and DatePickerCalendarDefinition as
public so CSS class name changes appear in API reports
- Add Affected components line to changeset
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Signed-off-by: Erik Hughes <erikh@spotify.com>
* fix(ui): restore dataAttributes spread in DatePickerGroup
The bg: 'consumer' config on DatePickerGroupDefinition emits
data-on-bg attributes via useDefinition. Without spreading
dataAttributes onto <Group>, the CSS [data-on-bg] selectors
never match and background auto-increment doesn't work.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Signed-off-by: Erik Hughes <erikh@spotify.com>
---------
Signed-off-by: Erik Hughes <erikh@spotify.com>
Co-authored-by: Erik Hughes <erikh@spotify.com>
Co-authored-by: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Add `position: relative` to `.bui-Table` so it becomes the containing
block for react-aria's absolutely positioned hidden checkbox inputs.
Without this, the inputs position themselves relative to a distant
ancestor, extending its scrollable area and creating phantom scroll
height.
Signed-off-by: Johan Persson <johanopersson@gmail.com>
Introduces a Combobox component to Backstage UI for times when you want to allow users to choose from a list of values but also specify their own in some cases.
---------
Signed-off-by: James Brooks <jamesbrooks@spotify.com>
Style the bui-Link itself when keyboard-focused using the ring token,
matching the established pattern from ButtonLink. Also tweak the
changeset wording to reflect the new behavior.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Signed-off-by: Emma Indal <emma.indahl@gmail.com>
Card's focus-ring CSS keys off data-focus-visible on the
bui-CardTrigger, but Link (the trigger when href is set) wasn't
emitting it because useLink does not track focus-visible state.
Compose useFocusRing in Link so keyboard focus is now properly
indicated on Card href=... and any other Link styled via
[data-focus-visible].
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Signed-off-by: Emma Indal <emma.indahl@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>
Updates the Select component to accept a set of sections with options as opposed to just a flat list of options.
---------
Signed-off-by: James Brooks <jamesbrooks@spotify.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>
Johan Persson