diff --git a/.changeset/ui-semantic-color-tokens.md b/.changeset/ui-semantic-color-tokens.md index 44426e2b33..3db985db55 100644 --- a/.changeset/ui-semantic-color-tokens.md +++ b/.changeset/ui-semantic-color-tokens.md @@ -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** diff --git a/packages/eslint-plugin/docs/rules/no-deprecated-bui-tokens.md b/packages/eslint-plugin/docs/rules/no-deprecated-bui-tokens.md index ab2b3e9578..8f211e39c6 100644 --- a/packages/eslint-plugin/docs/rules/no-deprecated-bui-tokens.md +++ b/packages/eslint-plugin/docs/rules/no-deprecated-bui-tokens.md @@ -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 diff --git a/packages/eslint-plugin/rules/no-deprecated-bui-tokens.js b/packages/eslint-plugin/rules/no-deprecated-bui-tokens.js index eb38707c5c..7b42d2419b 100644 --- a/packages/eslint-plugin/rules/no-deprecated-bui-tokens.js +++ b/packages/eslint-plugin/rules/no-deprecated-bui-tokens.js @@ -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', diff --git a/packages/eslint-plugin/src/no-deprecated-bui-tokens.test.ts b/packages/eslint-plugin/src/no-deprecated-bui-tokens.test.ts index 5e7dbe57ea..0cc305b723 100644 --- a/packages/eslint-plugin/src/no-deprecated-bui-tokens.test.ts +++ b/packages/eslint-plugin/src/no-deprecated-bui-tokens.test.ts @@ -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: [ diff --git a/packages/ui/src/css/colors.stories.tsx b/packages/ui/src/css/colors.stories.tsx index 7f46d922a6..44a1e4342b 100644 --- a/packages/ui/src/css/colors.stories.tsx +++ b/packages/ui/src/css/colors.stories.tsx @@ -124,11 +124,11 @@ export const All = meta.story({
diff --git a/packages/ui/src/css/tokens.css b/packages/ui/src/css/tokens.css index d149523ecd..cd333428ee 100644 --- a/packages/ui/src/css/tokens.css +++ b/packages/ui/src/css/tokens.css @@ -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%);