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

Bring back correct neutral tokens

Browse Source 
Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>
This commit is contained in:
Charles de Dreuille
2026-05-29 15:59:39 +02:00
parent 64c8108166
commit a4f2c56110
6 changed files with 30 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.changeset/ui-semantic-color-tokens.md
+3 -11
View File
@@ -1,8 +1,8 @@
---
'@backstage/ui': minor
'@backstage/ui': patch
---
**BREAKING**: Introduces a new set of semantic color token families — Accent, Announcement, Warning, Negative, and Positive — each providing a consistent set of background, foreground, and border tokens for both light and dark themes. A gray scale (`--bui-gray-1` through `--bui-gray-11`) and updated foreground tokens are also included.
Introduces a new set of semantic color token families — Accent, Announcement, Warning, Negative, and Positive — each providing a consistent set of background, foreground, and border tokens for both light and dark themes. A gray scale (`--bui-gray-1` through `--bui-gray-11`) and updated foreground tokens are also included.
The previous tokens remain in place for backward compatibility but are now deprecated and will be removed in a future release.
@@ -10,15 +10,7 @@ The previous tokens remain in place for backward compatibility but are now depre
**Neutral backgrounds**
The neutral background scale has been renamed and extended. `--bui-bg-app` is replaced by the new `--bui-bg-neutral-1`, and the old overlay-based `--bui-bg-neutral-1..4` shift up by one to become `--bui-bg-neutral-2..5`:
| Deprecated | Replacement |
| ---------------------------------- | -------------------- |
| `--bui-bg-app` | `--bui-bg-neutral-1` |
| `--bui-bg-neutral-1` (old overlay) | `--bui-bg-neutral-2` |
| `--bui-bg-neutral-2` (old overlay) | `--bui-bg-neutral-3` |
| `--bui-bg-neutral-3` (old overlay) | `--bui-bg-neutral-4` |
| `--bui-bg-neutral-4` (old overlay) | `--bui-bg-neutral-5` |
The neutral background tokens keep their existing names (`--bui-bg-app`, `--bui-bg-neutral-1` through `--bui-bg-neutral-4`) but are updated with new solid-color values for both light and dark themes. No token renaming is required. The `-hover`, `-pressed`, and `-disabled` interaction variants of these tokens are deprecated and should be removed.
**Foreground**
packages/eslint-plugin/docs/rules/no-deprecated-bui-tokens.md
+15 -10
View File
@@ -40,17 +40,22 @@ Replace deprecated tokens with their equivalents from the new semantic families.
### Neutral backgrounds
The neutral background scale has been renamed and extended. `--bui-bg-app` is replaced by the new `--bui-bg-neutral-1`, and the old overlay-based `--bui-bg-neutral-1..4` shift up by one to become `--bui-bg-neutral-2..5`:
The neutral background tokens (`--bui-bg-app`, `--bui-bg-neutral-1..4`) are now the active semantic tokens with updated solid-color values. The `-hover`, `-pressed`, and `-disabled` interaction variants remain deprecated:
| Deprecated | Replacement |
| ---------------------------------- | -------------------- |
| `--bui-bg-app` | `--bui-bg-neutral-1` |
| `--bui-bg-neutral-1` (old overlay) | `--bui-bg-neutral-2` |
| `--bui-bg-neutral-2` (old overlay) | `--bui-bg-neutral-3` |
| `--bui-bg-neutral-3` (old overlay) | `--bui-bg-neutral-4` |
| `--bui-bg-neutral-4` (old overlay) | `--bui-bg-neutral-5` |
> Note: the old `--bui-bg-neutral-1..4` names are now reused for the new solid-color tokens, so this rule does not warn on them directly. The `-hover`, `-pressed`, and `-disabled` variants of those tokens remain deprecated.
| Deprecated | Replacement |
| ----------------------------- | --------------------- |
| `--bui-bg-neutral-1-hover` | _(remove or restyle)_ |
| `--bui-bg-neutral-1-pressed` | _(remove or restyle)_ |
| `--bui-bg-neutral-1-disabled` | _(remove or restyle)_ |
| `--bui-bg-neutral-2-hover` | _(remove or restyle)_ |
| `--bui-bg-neutral-2-pressed` | _(remove or restyle)_ |
| `--bui-bg-neutral-2-disabled` | _(remove or restyle)_ |
| `--bui-bg-neutral-3-hover` | _(remove or restyle)_ |
| `--bui-bg-neutral-3-pressed` | _(remove or restyle)_ |
| `--bui-bg-neutral-3-disabled` | _(remove or restyle)_ |
| `--bui-bg-neutral-4-hover` | _(remove or restyle)_ |
| `--bui-bg-neutral-4-pressed` | _(remove or restyle)_ |
| `--bui-bg-neutral-4-disabled` | _(remove or restyle)_ |
### Foreground
packages/eslint-plugin/rules/no-deprecated-bui-tokens.js
-1
View File
@@ -22,7 +22,6 @@ const DEPRECATED_TOKENS = [
'--bui-bg-solid-hover',
'--bui-bg-solid-pressed',
'--bui-bg-solid-disabled',
'--bui-bg-app',
'--bui-bg-neutral-1-hover',
'--bui-bg-neutral-1-pressed',
'--bui-bg-neutral-1-disabled',
packages/eslint-plugin/src/no-deprecated-bui-tokens.test.ts
+1 -5
View File
@@ -46,11 +46,11 @@ ruleTester.run('no-deprecated-bui-tokens', rule, {
{ code: `const s = 'var(--bui-warning-bg)'` },
{ code: `const s = 'var(--bui-announcement-bg)'` },
{ code: `const s = 'var(--bui-gray-1)'` },
{ code: `const s = 'var(--bui-bg-app)'` },
{ code: `const s = 'var(--bui-bg-neutral-1)'` },
{ code: `const s = 'var(--bui-bg-neutral-2)'` },
{ code: `const s = 'var(--bui-bg-neutral-3)'` },
{ code: `const s = 'var(--bui-bg-neutral-4)'` },
{ code: `const s = 'var(--bui-bg-neutral-5)'` },
// Unrelated strings — should not warn
{ code: `const s = 'some-other-string'` },
{ code: `const n = 42` },
@@ -83,10 +83,6 @@ ruleTester.run('no-deprecated-bui-tokens', rule, {
},
],
},
{
code: `const s = 'var(--bui-bg-app)'`,
errors: [{ messageId: 'deprecated', data: { token: '--bui-bg-app' } }],
},
{
code: `const s = 'var(--bui-bg-neutral-2-hover)'`,
errors: [
packages/ui/src/css/colors.stories.tsx
+1 -1
View File
@@ -124,11 +124,11 @@ export const All = meta.story({
<Section
title="Neutral Backgrounds"
tokens={[
{ label: 'App', token: '--bui-bg-app' },
{ label: 'Neutral 1', token: '--bui-bg-neutral-1' },
{ label: 'Neutral 2', token: '--bui-bg-neutral-2' },
{ label: 'Neutral 3', token: '--bui-bg-neutral-3' },
{ label: 'Neutral 4', token: '--bui-bg-neutral-4' },
{ label: 'Neutral 5', token: '--bui-bg-neutral-5' },
]}
/>
packages/ui/src/css/tokens.css
+10 -12
View File
@@ -91,11 +91,11 @@
--bui-gray-11: #0a0a0a;
/* Neutral background colors */
--bui-bg-neutral-1: #f5f5f5;
--bui-bg-neutral-2: var(--bui-white);
--bui-bg-neutral-3: #f7f7f7;
--bui-bg-neutral-4: var(--bui-white);
--bui-bg-neutral-5: #f7f7f7;
--bui-bg-app: #f5f5f5;
--bui-bg-neutral-1: var(--bui-white);
--bui-bg-neutral-2: #f7f7f7;
--bui-bg-neutral-3: var(--bui-white);
--bui-bg-neutral-4: #f7f7f7;
/* Foreground colors */
--bui-fg-primary: var(--bui-black);
@@ -174,7 +174,6 @@
--bui-bg-solid-hover: #163a66;
--bui-bg-solid-pressed: #0f2b4e;
--bui-bg-solid-disabled: #163a66;
--bui-bg-app: #f8f8f8;
--bui-bg-neutral-1-hover: oklch(0% 0 0 / 6%);
--bui-bg-neutral-1-pressed: oklch(0% 0 0 / 12%);
--bui-bg-neutral-1-disabled: oklch(0% 0 0 / 6%);
@@ -216,11 +215,11 @@
--bui-scrollbar-thumb: #575757;
/* Neutral background colors */
--bui-bg-neutral-1: #333333;
--bui-bg-neutral-2: #1a1a1a;
--bui-bg-neutral-3: #282828;
--bui-bg-neutral-4: #393939;
--bui-bg-neutral-5: #474747;
--bui-bg-app: #333333;
--bui-bg-neutral-1: #1a1a1a;
--bui-bg-neutral-2: #282828;
--bui-bg-neutral-3: #393939;
--bui-bg-neutral-4: #474747;
/* Foreground colors */
--bui-fg-primary: var(--bui-white);
@@ -299,7 +298,6 @@
--bui-bg-solid-hover: #83b9fd;
--bui-bg-solid-pressed: #83b9fd;
--bui-bg-solid-disabled: #1b3d68;
--bui-bg-app: #333333;
--bui-bg-neutral-1-hover: oklch(100% 0 0 / 14%);
--bui-bg-neutral-1-pressed: oklch(100% 0 0 / 20%);
--bui-bg-neutral-1-disabled: oklch(100% 0 0 / 10%);