From 28ee81c7178f0b62c132ce8034001e81f51edd0e Mon Sep 17 00:00:00 2001
From: Gabriel Dugny <gabriel.dugny@believe.com>
Date: Sat, 4 Oct 2025 12:24:38 +0200
Subject: [PATCH] fix: Invalid MUI to BUI conversion for --bui-bg

Signed-off-by: Gabriel Dugny <gabriel.dugny@believe.com>
---
 .changeset/legal-hounds-think.md                             | 5 +++++
 .../components/BuiThemerPage/convertMuiToBuiTheme.test.ts    | 2 ++
 .../src/components/BuiThemerPage/convertMuiToBuiTheme.ts     | 4 ++--
 3 files changed, 9 insertions(+), 2 deletions(-)
 create mode 100644 .changeset/legal-hounds-think.md

diff --git a/.changeset/legal-hounds-think.md b/.changeset/legal-hounds-think.md
new file mode 100644
index 0000000000..c7c9e87948
--- /dev/null
+++ b/.changeset/legal-hounds-think.md
@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-mui-to-bui': patch
+---
+
+Fix invalid conversion for `--bui-bg` variable
diff --git a/plugins/mui-to-bui/src/components/BuiThemerPage/convertMuiToBuiTheme.test.ts b/plugins/mui-to-bui/src/components/BuiThemerPage/convertMuiToBuiTheme.test.ts
index 74f4bfa777..6ba3f7d2d9 100644
--- a/plugins/mui-to-bui/src/components/BuiThemerPage/convertMuiToBuiTheme.test.ts
+++ b/plugins/mui-to-bui/src/components/BuiThemerPage/convertMuiToBuiTheme.test.ts
@@ -59,6 +59,7 @@ describe('convertMuiToBuiTheme', () => {
     // Border radius tokens are only generated when radius is 0
     expect(result.css).not.toContain('--bui-radius-3:');
     // Background default maps to surface-2
+    expect(result.css).toContain('--bui-bg: #f5f5f5;');
     expect(result.css).toContain('--bui-bg-surface-2: #f5f5f5;');
     expect(result.css).toContain('--bui-bg-surface-1: #ffffff;');
     expect(result.css).toContain('--bui-fg-primary: #000000;');
@@ -97,6 +98,7 @@ describe('convertMuiToBuiTheme', () => {
 
     expect(result.css).toContain("[data-theme-mode='dark'] {");
     // Background default maps to surface-2 in dark mode as well
+    expect(result.css).toContain('--bui-bg: #121212;');
     expect(result.css).toContain('--bui-bg-surface-2: #121212;');
     expect(result.css).toContain('--bui-bg-surface-1: #1e1e1e;');
     expect(result.css).toContain('--bui-fg-primary: #ffffff;');
diff --git a/plugins/mui-to-bui/src/components/BuiThemerPage/convertMuiToBuiTheme.ts b/plugins/mui-to-bui/src/components/BuiThemerPage/convertMuiToBuiTheme.ts
index 11877bb564..1b8528922b 100644
--- a/plugins/mui-to-bui/src/components/BuiThemerPage/convertMuiToBuiTheme.ts
+++ b/plugins/mui-to-bui/src/components/BuiThemerPage/convertMuiToBuiTheme.ts
@@ -125,7 +125,7 @@ function generateBuiVariables(theme: Mui5Theme): Record<string, string> {
     warning: palette.warning.light,
     success: palette.success.light,
   }).forEach(([key, value]) => {
-    styleObject[`--bui-bg-${key}`] = value;
+    styleObject[`--bui-bg${key ? `-${key}` : ''}`] = value;
   });
 
   // Border colors
@@ -134,7 +134,7 @@ function generateBuiVariables(theme: Mui5Theme): Record<string, string> {
     warning: palette.warning.main,
     success: palette.success.main,
   }).forEach(([key, value]) => {
-    styleObject[`--bui-border${key ? `-${key}` : ''}`] = value;
+    styleObject[`--bui-border-${key}`] = value;
   });
 
   // Base border color if available