paulononato/backstage
1
0
Fork 0
Code Issues Pull Requests Actions 41 Packages Projects Releases Wiki Activity

feat(ui): introduce semantic color token families and deprecate legacy tokens

Browse Source 
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>
This commit is contained in:
Charles de Dreuille
2026-05-26 15:08:53 +02:00
parent e223e89103
commit d38977c7b4
6 changed files with 603 additions and 249 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.storybook/themes/spotify.css
+17 -18
View File
@@ -193,49 +193,48 @@
}
[data-theme-mode='light'][data-theme-name='spotify'] {
--bui-ring: rgba(0, 0, 0, 0.2);
--bui-accent-bg: #1ed760;
--bui-accent-bg-hover: #3be477;
--bui-accent-bg-disabled: #0f6c30;
--bui-accent-fg: var(--bui-black);
--bui-accent-fg-disabled: #62ab7c;
/* Deprecated tokens */
--bui-bg-solid: #1ed760;
--bui-bg-solid-hover: #3be477;
--bui-bg-solid-pressed: #1abc54;
--bui-bg-solid-disabled: #0f6c30;
--bui-fg-primary: var(--bui-black);
--bui-fg-secondary: #757575;
--bui-fg-solid: var(--bui-black);
--bui-fg-solid-disabled: #62ab7c;
--bui-border-2: #d9d9d9;
--bui-border-danger: #f87a7a;
--bui-border-warning: #e36d05;
--bui-border-success: #53db83;
--bui-ring: rgba(0, 0, 0, 0.2);
}
[data-theme-mode='dark'][data-theme-name='spotify'] {
--bui-bg-app: var(--bui-black);
--bui-ring: rgba(255, 255, 255, 0.2);
--bui-accent-bg: #1ed760;
--bui-accent-bg-hover: #3be477;
--bui-accent-bg-disabled: #0f6c30;
--bui-accent-fg: var(--bui-black);
--bui-accent-fg-disabled: #62ab7c;
/* Deprecated tokens */
--bui-bg-app: var(--bui-black);
--bui-bg-solid: #1ed760;
--bui-bg-solid-hover: #3be477;
--bui-bg-solid-pressed: #1abc54;
--bui-bg-solid-disabled: #0f6c30;
--bui-bg-danger: #3b1219;
--bui-bg-warning: #302008;
--bui-bg-success: #132d21;
--bui-fg-primary: var(--bui-white);
--bui-fg-secondary: #9e9e9e;
--bui-fg-disabled: #575757;
--bui-fg-solid: var(--bui-black);
--bui-fg-solid-disabled: #072f15;
--bui-fg-danger: #e22b2b;
--bui-fg-warning: #e36d05;
--bui-fg-success: #1db954;
--bui-border-2: #373737;
--bui-fg-warning: #e36d05;
--bui-border-danger: #f87a7a;
--bui-border-warning: #e36d05;
--bui-border-success: #53db83;
--bui-ring: rgba(255, 255, 255, 0.2);
}