diff --git a/docs-ui/src/utils/changelog.ts b/docs-ui/src/utils/changelog.ts
index a99c0e8335..21ffa93651 100644
--- a/docs-ui/src/utils/changelog.ts
+++ b/docs-ui/src/utils/changelog.ts
@@ -1,4 +1,6 @@
export * from './types';
+import { changelog_0_13_0 } from './changelogs/v0.13.0';
+import { changelog_0_12_0 } from './changelogs/v0.12.0';
import { changelog_0_11_0 } from './changelogs/v0.11.0';
import { changelog_0_10_0 } from './changelogs/v0.10.0';
import { changelog_0_9_1 } from './changelogs/v0.9.1';
@@ -18,6 +20,8 @@ import { changelog_0_2_0 } from './changelogs/v0.2.0';
import { changelog_0_1_0 } from './changelogs/v0.1.0';
export const changelog = [
+ ...changelog_0_13_0,
+ ...changelog_0_12_0,
...changelog_0_11_0,
...changelog_0_10_0,
...changelog_0_9_1,
diff --git a/docs-ui/src/utils/changelogs/v0.12.0.ts b/docs-ui/src/utils/changelogs/v0.12.0.ts
new file mode 100644
index 0000000000..f83920c36f
--- /dev/null
+++ b/docs-ui/src/utils/changelogs/v0.12.0.ts
@@ -0,0 +1,526 @@
+import type { ChangelogProps } from '../types';
+
+export const changelog_0_12_0: ChangelogProps[] = [
+ {
+ components: ['alert'],
+ version: '0.12.0',
+ prs: ['32711'],
+ description: `**BREAKING**: Alert no longer accepts a \`surface\` prop
+
+ The Alert component's background is now driven entirely by its \`status\` prop. The \`surface\` prop has been removed.
+
+ \`\`\`diff
+ -
+ +
+ \`\`\``,
+ breaking: true,
+ commitSha: '46a9adc',
+ },
+ {
+ components: [],
+ version: '0.12.0',
+ prs: ['32723'],
+ description: `**BREAKING**: Removed gray scale tokens and renamed background surface tokens to neutral tokens
+
+ The \`--bui-gray-1\` through \`--bui-gray-8\` tokens have been removed. The \`--bui-bg-surface-*\` and \`--bui-bg-neutral-on-surface-*\` tokens have been replaced by a unified \`--bui-bg-neutral-*\` scale.`,
+ migration: `Replace surface tokens directly:
+
+\`\`\`diff
+- background: var(--bui-bg-surface-0);
++ background: var(--bui-bg-neutral-0);
+\`\`\`
+
+Replace on-surface tokens shifted by +1:
+
+\`\`\`diff
+- background: var(--bui-bg-neutral-on-surface-0);
++ background: var(--bui-bg-neutral-1);
+\`\`\`
+
+Replace gray tokens 1-4 with neutral equivalents (\`--bui-gray-5\` through \`--bui-gray-8\` have no direct replacement):
+
+\`\`\`diff
+- background: var(--bui-gray-1);
++ background: var(--bui-bg-neutral-1);
+\`\`\``,
+ breaking: true,
+ commitSha: 'b63c25b',
+ },
+ {
+ components: [
+ 'box',
+ 'button',
+ 'button-icon',
+ 'button-link',
+ 'toggle-button',
+ 'card',
+ 'flex',
+ 'grid',
+ ],
+ version: '0.12.0',
+ prs: ['32711'],
+ description: `**BREAKING**: Replaced \`Surface\` / \`onSurface\` system with new provider/consumer background system
+
+ The old \`Surface\` type (\`'0'\`–\`'3'\`, \`'auto'\`) and its associated props (\`surface\`, \`onSurface\`) have been replaced by a provider/consumer \`bg\` architecture.
+
+ **Types:**
+
+ - \`ContainerBg\` — \`'neutral-1'\` | \`'neutral-2'\` | \`'neutral-3'\` | \`'danger'\` | \`'warning'\` | \`'success'\`
+ - \`ProviderBg\` — \`ContainerBg | 'neutral-auto'\`
+
+ Consumer components (e.g. Button) inherit the parent's \`bg\` via \`data-on-bg\`, and CSS handles the visual step-up. See "Neutral level capping" below for details on how levels are bounded.
+
+ **Hooks:**
+
+ - \`useBgProvider(bg?)\` — for provider components. Returns \`{ bg: undefined }\` when no \`bg\` is given (transparent). Supports \`'neutral-auto'\` to auto-increment from the parent context.
+ - \`useBgConsumer()\` — for consumer components. Returns the parent container's \`bg\` unchanged.
+
+ **Component roles:**
+
+ - **Provider-only** (Box, Flex, Grid): set \`data-bg\`, wrap children in \`BgProvider\`. **Transparent by default** — they do _not_ auto-increment; pass \`bg="neutral-auto"\` explicitly if you want automatic neutral stepping.
+ - **Consumer-only** (Button, ButtonIcon, ButtonLink): set \`data-on-bg\`, inherit the parent container's \`bg\` unchanged.
+ - **Provider + Consumer** (Card): sets both \`data-bg\` and \`data-on-bg\`, wraps children. Card passes \`bg="neutral-auto"\` to its inner Box, so it auto-increments from the parent context.
+
+ **Neutral level capping:**
+
+ Provider components cap at \`neutral-3\`. There is no \`neutral-4\` prop value. The \`neutral-4\` level exists only in consumer component CSS — for example, a Button sitting on a \`neutral-3\` surface uses \`neutral-4\` tokens internally via \`data-on-bg\`.`,
+ migration: `Rename the \`surface\` prop to \`bg\` on provider components and update values:
+
+\`\`\`diff
+-
++
+
+-
++
+
+-
++
+
+-
++
+\`\`\`
+
+Remove \`onSurface\` from consumer components — they now always inherit from the parent container:
+
+\`\`\`diff
+-