;
+}
+
+export function BuiThemePreview({ mode, styleObject }: IsolatedPreviewProps) {
+ return (
+
+
+
+ Button Variants
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Form Inputs
+
+
+
+
+
+
+ Option 1
+ Option 2
+ Option 3
+
+
+
+
+
+
+ Tag Variants
+
+
+
+ Default
+
+ Danger
+
+
+ Warning
+
+
+ Success
+
+
+
+
+
+
+
+ Text Variants
+
+
+ Title X Small
+ Body X Small
+ Title Small
+ Body Small
+ Title Medium
+ Body Medium
+ Title Large
+ Body Large
+
+
+
+
+
+ );
+}
diff --git a/plugins/bui-themer/src/components/BuiThemerPage/BuiThemerPage.test.tsx b/plugins/bui-themer/src/components/BuiThemerPage/BuiThemerPage.test.tsx
new file mode 100644
index 0000000000..ad6d750c9e
--- /dev/null
+++ b/plugins/bui-themer/src/components/BuiThemerPage/BuiThemerPage.test.tsx
@@ -0,0 +1,67 @@
+/*
+ * Copyright 2025 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { BuiThemerPage } from './BuiThemerPage';
+import { appThemeApiRef } from '@backstage/core-plugin-api';
+import { renderInTestApp, TestApiProvider } from '@backstage/test-utils';
+import { ThemeProvider, createTheme } from '@mui/material/styles';
+
+function makeAppTheme(id: string, title: string, variant: 'light' | 'dark') {
+ return {
+ id,
+ title,
+ variant,
+ Provider: ({ children }: { children: React.ReactNode }) => (
+ {children}
+ ),
+ };
+}
+
+describe('BuiThemerPage', () => {
+ it('renders empty state when no themes installed', async () => {
+ const apis = [[appThemeApiRef, { getInstalledThemes: () => [] }]] as const;
+ await renderInTestApp(
+
+
+ ,
+ );
+
+ expect(
+ screen.getByText(/No themes found. Please install some themes/i),
+ ).toBeInTheDocument();
+ });
+
+ it('renders ThemeContent for each installed theme', async () => {
+ const themes = [
+ makeAppTheme('light', 'Light', 'light'),
+ makeAppTheme('dark', 'Dark', 'dark'),
+ ];
+ const apis = [
+ [appThemeApiRef, { getInstalledThemes: () => themes }],
+ ] as const;
+
+ await renderInTestApp(
+
+
+ ,
+ );
+
+ expect(screen.getByText('Light')).toBeInTheDocument();
+ expect(screen.getByText('Dark')).toBeInTheDocument();
+ });
+});
diff --git a/plugins/bui-themer/src/components/BuiThemerPage/BuiThemerPage.tsx b/plugins/bui-themer/src/components/BuiThemerPage/BuiThemerPage.tsx
new file mode 100644
index 0000000000..7f0e9f32fc
--- /dev/null
+++ b/plugins/bui-themer/src/components/BuiThemerPage/BuiThemerPage.tsx
@@ -0,0 +1,68 @@
+/*
+ * Copyright 2025 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { useApi } from '@backstage/core-plugin-api';
+import { appThemeApiRef } from '@backstage/core-plugin-api';
+import { Box, Card, Container, Flex, HeaderPage, Text } from '@backstage/ui';
+import { ThemeContent } from './ThemeContent';
+import { MuiThemeExtractor } from './MuiThemeExtractor';
+
+export const BuiThemerPage = () => {
+ const appThemeApi = useApi(appThemeApiRef);
+ const installedThemes = appThemeApi.getInstalledThemes();
+
+ return (
+
+
+
+
+ Convert your MUI v5 theme into BUI CSS variables. Pick a theme to view
+ and export the generated BUI CSS variable definitions for use in your
+ project.
+
+
+
+
+ {installedThemes.length === 0 ? (
+
+
+
+ No themes found. Please install some themes in your Backstage
+ app.
+
+
+
+ ) : (
+
+ {installedThemes.map(theme => (
+
+ {muiTheme => (
+
+ )}
+
+ ))}
+
+ )}
+
+
+ );
+};
diff --git a/plugins/bui-themer/src/components/BuiThemerPage/MuiThemeExtractor.test.tsx b/plugins/bui-themer/src/components/BuiThemerPage/MuiThemeExtractor.test.tsx
new file mode 100644
index 0000000000..ea71f2ba33
--- /dev/null
+++ b/plugins/bui-themer/src/components/BuiThemerPage/MuiThemeExtractor.test.tsx
@@ -0,0 +1,41 @@
+/*
+ * Copyright 2025 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { MuiThemeExtractor } from './MuiThemeExtractor';
+import { ThemeProvider, createTheme } from '@mui/material/styles';
+
+const mockAppTheme = {
+ id: 'mock',
+ title: 'Mock',
+ variant: 'light' as const,
+ Provider: ({ children }: { children: React.ReactNode }) => (
+ {children}
+ ),
+};
+
+describe('MuiThemeExtractor', () => {
+ it('invokes render prop with extracted theme', async () => {
+ render(
+
+ {theme => theme-palette-mode-{theme.palette.mode}
}
+ ,
+ );
+
+ expect(screen.getByText('theme-palette-mode-light')).toBeInTheDocument();
+ });
+});
diff --git a/plugins/bui-themer/src/components/BuiThemerPage/MuiThemeExtractor.tsx b/plugins/bui-themer/src/components/BuiThemerPage/MuiThemeExtractor.tsx
new file mode 100644
index 0000000000..cf7d9acefa
--- /dev/null
+++ b/plugins/bui-themer/src/components/BuiThemerPage/MuiThemeExtractor.tsx
@@ -0,0 +1,49 @@
+/*
+ * Copyright 2025 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { useEffect, useState, JSX } from 'react';
+import { AppTheme } from '@backstage/core-plugin-api';
+import { Theme, useTheme } from '@mui/material/styles';
+
+export function MuiThemeExtractor(props: {
+ appTheme: AppTheme;
+ children: (theme: Theme) => JSX.Element;
+}): JSX.Element {
+ const { appTheme, children } = props;
+ const [theme, setTheme] = useState(null);
+ const { Provider } = appTheme;
+ if (theme) {
+ return children(theme);
+ }
+
+ return (
+
+
+
+ );
+}
+
+function MuiThemeExtractorInner({
+ setTheme,
+}: {
+ setTheme: (theme: Theme) => void;
+}) {
+ const theme = useTheme();
+ useEffect(() => {
+ setTheme(theme);
+ }, [theme, setTheme]);
+ return null;
+}
diff --git a/plugins/bui-themer/src/components/BuiThemerPage/ThemeContent.test.tsx b/plugins/bui-themer/src/components/BuiThemerPage/ThemeContent.test.tsx
new file mode 100644
index 0000000000..3a075b80d3
--- /dev/null
+++ b/plugins/bui-themer/src/components/BuiThemerPage/ThemeContent.test.tsx
@@ -0,0 +1,83 @@
+/*
+ * Copyright 2025 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { screen, fireEvent } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { ThemeContent } from './ThemeContent';
+import { createTheme } from '@mui/material/styles';
+import { renderInTestApp } from '@backstage/test-utils';
+
+jest.mock('./convertMuiToBuiTheme', () => ({
+ convertMuiToBuiTheme: () => ({
+ css: ':root { --bui-color: #000; }',
+ styleObject: { '--bui-color': '#000' },
+ }),
+}));
+
+describe('ThemeContent', () => {
+ const muiTheme = createTheme();
+
+ it('renders title, variant and tabs', async () => {
+ await renderInTestApp(
+ ,
+ );
+
+ expect(screen.getByText('Light Theme')).toBeInTheDocument();
+ expect(screen.getByText('light theme')).toBeInTheDocument();
+ expect(screen.getByText('Generated CSS')).toBeInTheDocument();
+ expect(screen.getByText('Live Preview')).toBeInTheDocument();
+ expect(
+ screen.getByText(':root { --bui-color: #000; }'),
+ ).toBeInTheDocument();
+ });
+
+ it('handles Copy CSS click', async () => {
+ const writeText = jest.fn();
+ Object.assign(window.navigator, { clipboard: { writeText } });
+
+ await renderInTestApp(
+ ,
+ );
+
+ fireEvent.click(screen.getByRole('button', { name: 'Copy CSS' }));
+ expect(writeText).toHaveBeenCalledWith(':root { --bui-color: #000; }');
+ });
+
+ it('switches to Live Preview tab', async () => {
+ await renderInTestApp(
+ ,
+ );
+
+ fireEvent.click(screen.getByText('Live Preview'));
+ // The preview renders content from BuiThemePreview; basic smoke check:
+ expect(await screen.findByText('Button Variants')).toBeInTheDocument();
+ });
+});
diff --git a/plugins/bui-themer/src/components/BuiThemerPage/ThemeContent.tsx b/plugins/bui-themer/src/components/BuiThemerPage/ThemeContent.tsx
new file mode 100644
index 0000000000..0974b8f15d
--- /dev/null
+++ b/plugins/bui-themer/src/components/BuiThemerPage/ThemeContent.tsx
@@ -0,0 +1,127 @@
+/*
+ * Copyright 2025 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { useMemo, useState, useCallback } from 'react';
+import { Theme } from '@mui/material/styles';
+import {
+ Box,
+ Button,
+ Card,
+ Flex,
+ Text,
+ Tabs,
+ TabList,
+ Tab,
+ TabPanel,
+} from '@backstage/ui';
+import { convertMuiToBuiTheme } from './convertMuiToBuiTheme';
+import { BuiThemePreview } from './BuiThemePreview';
+
+interface ThemeContentProps {
+ themeId: string;
+ themeTitle: string;
+ variant: 'light' | 'dark';
+ muiTheme: Theme;
+}
+
+export function ThemeContent({
+ themeId,
+ themeTitle,
+ variant,
+ muiTheme,
+}: ThemeContentProps) {
+ const [activeTab, setActiveTab] = useState('css');
+
+ const { css, styleObject } = useMemo(() => {
+ return convertMuiToBuiTheme(muiTheme);
+ }, [muiTheme]);
+
+ const handleCopy = useCallback(() => {
+ window.navigator.clipboard.writeText(css);
+ }, [css]);
+
+ const handleDownload = useCallback(() => {
+ const blob = new Blob([css], { type: 'text/css' });
+ const url = URL.createObjectURL(blob);
+ const a = document.createElement('a');
+ a.href = url;
+ a.download = `bui-theme-${themeId}.css`;
+ document.body.appendChild(a);
+ a.click();
+ document.body.removeChild(a);
+ URL.revokeObjectURL(url);
+ }, [css, themeId]);
+
+ return (
+
+
+
+
+ {themeTitle}
+
+ {variant} theme
+
+
+
+
+
+
+
+
+ setActiveTab(key as string)}
+ >
+
+ Generated CSS
+ Live Preview
+
+
+
+
+ {css}
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/plugins/bui-themer/src/components/BuiThemerPage/convertMuiToBuiTheme.test.ts b/plugins/bui-themer/src/components/BuiThemerPage/convertMuiToBuiTheme.test.ts
new file mode 100644
index 0000000000..74f4bfa777
--- /dev/null
+++ b/plugins/bui-themer/src/components/BuiThemerPage/convertMuiToBuiTheme.test.ts
@@ -0,0 +1,227 @@
+/*
+ * Copyright 2025 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { createTheme } from '@mui/material/styles';
+import { convertMuiToBuiTheme } from './convertMuiToBuiTheme';
+
+describe('convertMuiToBuiTheme', () => {
+ it('should generate CSS for light theme', () => {
+ const theme = createTheme({
+ palette: {
+ mode: 'light',
+ primary: {
+ main: '#1976d2',
+ dark: '#115293',
+ },
+ background: {
+ default: '#f5f5f5',
+ paper: '#ffffff',
+ },
+ text: {
+ primary: '#000000',
+ secondary: '#666666',
+ },
+ },
+ typography: {
+ fontFamily: 'Roboto, sans-serif',
+ h1: {
+ fontSize: '2.5rem',
+ },
+ body1: {
+ fontSize: '1rem',
+ },
+ },
+ spacing: 8,
+ shape: {
+ borderRadius: 4,
+ },
+ });
+
+ const result = convertMuiToBuiTheme(theme);
+
+ expect(result.css).toContain(':root {');
+ expect(result.css).toContain('--bui-font-regular: Roboto, sans-serif;');
+ // Spacing is skipped for default 8px
+ expect(result.css).not.toContain('--bui-space:');
+ // 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-surface-2: #f5f5f5;');
+ expect(result.css).toContain('--bui-bg-surface-1: #ffffff;');
+ expect(result.css).toContain('--bui-fg-primary: #000000;');
+ // Secondary may not be present without Backstage additions, so don't assert it
+ expect(result.css).toContain('--bui-bg-solid: #1976d2;');
+
+ // Test style object
+ expect(result.styleObject).toHaveProperty(
+ '--bui-font-regular',
+ 'Roboto, sans-serif',
+ );
+ expect(result.styleObject).toHaveProperty('--bui-bg-solid', '#1976d2');
+ expect(result.styleObject).toHaveProperty('--bui-fg-primary', '#000000');
+ });
+
+ it('should generate CSS for dark theme', () => {
+ const theme = createTheme({
+ palette: {
+ mode: 'dark',
+ primary: {
+ main: '#90caf9',
+ dark: '#42a5f5',
+ },
+ background: {
+ default: '#121212',
+ paper: '#1e1e1e',
+ },
+ text: {
+ primary: '#ffffff',
+ secondary: '#b3b3b3',
+ },
+ },
+ });
+
+ const result = convertMuiToBuiTheme(theme);
+
+ 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-surface-2: #121212;');
+ expect(result.css).toContain('--bui-bg-surface-1: #1e1e1e;');
+ expect(result.css).toContain('--bui-fg-primary: #ffffff;');
+
+ // Test style object
+ expect(result.styleObject).toHaveProperty('--bui-bg-surface-1', '#1e1e1e');
+ expect(result.styleObject).toHaveProperty('--bui-fg-primary', '#ffffff');
+ });
+
+ it('should handle missing theme properties gracefully', () => {
+ const theme = createTheme({});
+
+ const result = convertMuiToBuiTheme(theme);
+
+ expect(result.css).toContain(':root {');
+ expect(result.css).toContain('--bui-font-weight-regular: 400;');
+ expect(result.css).toContain('--bui-font-weight-bold: 700;');
+ // Should have default values even when theme properties are missing
+ expect(result.css).toContain('--bui-black: #000;');
+ expect(result.css).toContain('--bui-white: #fff;');
+ });
+
+ it('should generate surface colors correctly', () => {
+ const theme = createTheme({
+ palette: {
+ mode: 'light',
+ primary: {
+ main: '#1976d2',
+ dark: '#115293',
+ },
+ error: {
+ main: '#f44336',
+ light: '#ffcdd2',
+ },
+ warning: {
+ main: '#ff9800',
+ light: '#ffe0b2',
+ },
+ success: {
+ main: '#4caf50',
+ light: '#c8e6c9',
+ },
+ },
+ });
+
+ const result = convertMuiToBuiTheme(theme);
+
+ expect(result.css).toContain('--bui-bg-solid: #1976d2;');
+ expect(result.css).toContain('--bui-bg-solid-hover: rgb(21, 100, 179);');
+ expect(result.css).toContain('--bui-bg-danger: #ffcdd2;');
+ expect(result.css).toContain('--bui-bg-warning: #ffe0b2;');
+ expect(result.css).toContain('--bui-bg-success: #c8e6c9;');
+ });
+
+ it('should generate foreground colors correctly', () => {
+ const theme = createTheme({
+ palette: {
+ mode: 'light',
+ primary: {
+ main: '#1976d2',
+ dark: '#115293',
+ },
+ error: {
+ main: '#f44336',
+ },
+ warning: {
+ main: '#ff9800',
+ },
+ success: {
+ main: '#4caf50',
+ },
+ text: {
+ disabled: '#cccccc',
+ },
+ },
+ });
+
+ const result = convertMuiToBuiTheme(theme);
+
+ expect(result.css).toContain('--bui-fg-link: #1976d2;');
+ expect(result.css).toContain('--bui-fg-link-hover: #115293;');
+ expect(result.css).toContain('--bui-fg-disabled: #cccccc;');
+ // Foreground danger/warning/success may be hex or rgb depending on theme
+ expect(result.css).toMatch(
+ /--bui-fg-danger:\s*(#[0-9a-f]{6}|rgb\([^)]*\));/i,
+ );
+ expect(result.css).toMatch(
+ /--bui-fg-warning:\s*(#[0-9a-f]{6}|rgb\([^)]*\));/i,
+ );
+ expect(result.css).toMatch(
+ /--bui-fg-success:\s*(#[0-9a-f]{6}|rgb\([^)]*\));/i,
+ );
+ });
+
+ it('should generate border colors correctly', () => {
+ const theme = createTheme({
+ palette: {
+ mode: 'light',
+ error: {
+ main: '#f44336',
+ },
+ warning: {
+ main: '#ff9800',
+ },
+ success: {
+ main: '#4caf50',
+ },
+ },
+ });
+
+ const result = convertMuiToBuiTheme(theme);
+
+ // Base border colors are included when border/divider exist; specific statuses always present
+ expect(result.css).toContain('--bui-border-danger: #f44336;');
+ expect(result.css).toContain('--bui-border-warning: #ff9800;');
+ expect(result.css).toContain('--bui-border-success: #4caf50;');
+ });
+
+ it('should handle function-based spacing', () => {
+ const theme = createTheme({
+ spacing: (factor: number) => `${factor * 4}px`,
+ });
+
+ const result = convertMuiToBuiTheme(theme);
+
+ expect(result.css).toContain('--bui-space: calc(4px * 0.5);');
+ });
+});
diff --git a/plugins/bui-themer/src/components/BuiThemerPage/convertMuiToBuiTheme.ts b/plugins/bui-themer/src/components/BuiThemerPage/convertMuiToBuiTheme.ts
new file mode 100644
index 0000000000..11877bb564
--- /dev/null
+++ b/plugins/bui-themer/src/components/BuiThemerPage/convertMuiToBuiTheme.ts
@@ -0,0 +1,150 @@
+/*
+ * Copyright 2025 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { Theme as Mui5Theme } from '@mui/material/styles';
+import { BackstagePaletteAdditions } from '@backstage/theme';
+import { blend, alpha } from '@mui/system/colorManipulator';
+
+export interface ConvertMuiToBuiThemeResult {
+ css: string;
+ styleObject: Record;
+}
+
+/**
+ * Converts a MUI v5 Theme to BUI CSS variables
+ * @param theme - The MUI v5 theme to convert
+ * @returns Object containing CSS string and style object with BUI variables
+ */
+export function convertMuiToBuiTheme(
+ theme: Mui5Theme,
+): ConvertMuiToBuiThemeResult {
+ const styleObject = generateBuiVariables(theme);
+
+ const selector =
+ theme.palette.mode === 'dark' ? "[data-theme-mode='dark']" : ':root';
+
+ const css = `${selector} {\n${Object.entries(styleObject)
+ .map(([key, value]) => ` ${key}: ${value};`)
+ .join('\n')}\n}`;
+
+ return { css, styleObject };
+}
+
+/**
+ * Generates BUI CSS variables from MUI theme
+ */
+function generateBuiVariables(theme: Mui5Theme): Record {
+ const styleObject: Record = {};
+
+ // Font families
+ if (theme.typography.fontFamily) {
+ styleObject['--bui-font-regular'] = theme.typography.fontFamily;
+ }
+
+ // Font weights
+ if (theme.typography.fontWeightRegular) {
+ styleObject['--bui-font-weight-regular'] = String(
+ theme.typography.fontWeightRegular,
+ );
+ }
+ if (theme.typography.fontWeightBold) {
+ styleObject['--bui-font-weight-bold'] = String(
+ theme.typography.fontWeightBold,
+ );
+ }
+
+ const spacing = theme.spacing(1);
+ // Skip spacing if the theme is using the default
+ if (spacing !== '8px') {
+ styleObject['--bui-space'] = `calc(${spacing} * 0.5)`;
+ }
+
+ // Border radius, only translate a 0 radius
+ if (theme.shape.borderRadius === 0) {
+ styleObject['--bui-radius-1'] = '0';
+ styleObject['--bui-radius-2'] = '0';
+ styleObject['--bui-radius-3'] = '0';
+ styleObject['--bui-radius-4'] = '0';
+ styleObject['--bui-radius-5'] = '0';
+ styleObject['--bui-radius-6'] = '0';
+ }
+
+ // Colors - map MUI palette to BUI color tokens
+ const palette = theme.palette as typeof theme.palette &
+ Partial;
+
+ // Base colors
+ styleObject['--bui-black'] = palette.common.black;
+ styleObject['--bui-white'] = palette.common.white;
+
+ // Generate foreground colors
+ Object.entries({
+ primary: palette.text.primary,
+ secondary: palette.textSubtle,
+ link: palette.link ?? palette.primary.main,
+ 'link-hover': palette.linkHover ?? palette.primary.dark,
+ disabled: palette.text.disabled,
+ solid: palette.primary.contrastText,
+ 'solid-disabled': palette.text.disabled,
+ tint: palette.textSubtle,
+ 'tint-disabled': palette.textVerySubtle,
+ danger: palette.error.dark,
+ warning: palette.warning.dark,
+ success: palette.success.dark,
+ }).forEach(([key, value]) => {
+ styleObject[`--bui-fg-${key}`] = value;
+ });
+
+ // Generate surface colors
+ Object.entries({
+ '': palette.background.default,
+ 'surface-1': palette.background.paper,
+ 'surface-2': palette.background.default,
+ solid: palette.primary.main,
+ 'solid-hover': blend(palette.primary.main, palette.primary.dark, 0.5),
+ 'solid-pressed': palette.primary.dark,
+ 'solid-disabled': palette.action.disabledBackground,
+ tint: 'transparent',
+ 'tint-hover': alpha(palette.primary.main, 0.4),
+ 'tint-pressed': alpha(palette.primary.main, 0.6),
+ 'tint-disabled': palette.action.disabledBackground,
+ danger: palette.error.light,
+ warning: palette.warning.light,
+ success: palette.success.light,
+ }).forEach(([key, value]) => {
+ styleObject[`--bui-bg-${key}`] = value;
+ });
+
+ // Border colors
+ Object.entries({
+ danger: palette.error.main,
+ warning: palette.warning.main,
+ success: palette.success.main,
+ }).forEach(([key, value]) => {
+ styleObject[`--bui-border${key ? `-${key}` : ''}`] = value;
+ });
+
+ // Base border color if available
+ styleObject['--bui-border'] = palette.border || palette.divider;
+ styleObject['--bui-border-danger'] = palette.error.main;
+ styleObject['--bui-border-warning'] = palette.warning.main;
+ styleObject['--bui-border-success'] = palette.success.main;
+
+ // Special colors
+ styleObject['--bui-ring'] = palette.highlight || palette.primary.main;
+
+ return styleObject;
+}
diff --git a/plugins/bui-themer/src/components/BuiThemerPage/index.ts b/plugins/bui-themer/src/components/BuiThemerPage/index.ts
new file mode 100644
index 0000000000..3d32f11259
--- /dev/null
+++ b/plugins/bui-themer/src/components/BuiThemerPage/index.ts
@@ -0,0 +1,17 @@
+/*
+ * Copyright 2025 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export { BuiThemerPage } from './BuiThemerPage';
diff --git a/plugins/bui-themer/src/index.ts b/plugins/bui-themer/src/index.ts
new file mode 100644
index 0000000000..84c9894a26
--- /dev/null
+++ b/plugins/bui-themer/src/index.ts
@@ -0,0 +1,17 @@
+/*
+ * Copyright 2025 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export { default, buiThemerPlugin, BuiThemerPage } from './plugin';
diff --git a/plugins/bui-themer/src/plugin.test.ts b/plugins/bui-themer/src/plugin.test.ts
new file mode 100644
index 0000000000..0d742fa02a
--- /dev/null
+++ b/plugins/bui-themer/src/plugin.test.ts
@@ -0,0 +1,22 @@
+/*
+ * Copyright 2025 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { buiThemerPlugin } from './plugin';
+
+describe('mui-to-bui', () => {
+ it('should export plugin', () => {
+ expect(buiThemerPlugin).toBeDefined();
+ });
+});
diff --git a/plugins/bui-themer/src/plugin.tsx b/plugins/bui-themer/src/plugin.tsx
new file mode 100644
index 0000000000..aca19c9978
--- /dev/null
+++ b/plugins/bui-themer/src/plugin.tsx
@@ -0,0 +1,67 @@
+/*
+ * Copyright 2025 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import {
+ convertLegacyRouteRef,
+ convertLegacyRouteRefs,
+} from '@backstage/core-compat-api';
+import {
+ createPlugin,
+ createRoutableExtension,
+} from '@backstage/core-plugin-api';
+import {
+ createFrontendPlugin,
+ PageBlueprint,
+} from '@backstage/frontend-plugin-api';
+import { rootRouteRef } from './routes';
+
+// Old system
+/** @public */
+export const buiThemerPlugin = createPlugin({
+ id: 'mui-to-bui',
+ routes: {
+ root: rootRouteRef,
+ },
+});
+
+/** @public */
+export const BuiThemerPage = buiThemerPlugin.provide(
+ createRoutableExtension({
+ name: 'BuiThemerPage',
+ component: () =>
+ import('./components/BuiThemerPage').then(m => m.BuiThemerPage),
+ mountPoint: rootRouteRef,
+ }),
+);
+
+// New system
+/** @public */
+export default createFrontendPlugin({
+ pluginId: 'mui-to-bui',
+ extensions: [
+ PageBlueprint.make({
+ params: {
+ path: '/mui-to-bui',
+ loader: () =>
+ import('./components/BuiThemerPage').then(m => ),
+ routeRef: convertLegacyRouteRef(rootRouteRef),
+ },
+ }),
+ ],
+ routes: convertLegacyRouteRefs({
+ root: rootRouteRef,
+ }),
+});
diff --git a/plugins/bui-themer/src/routes.ts b/plugins/bui-themer/src/routes.ts
new file mode 100644
index 0000000000..ea7c6784f7
--- /dev/null
+++ b/plugins/bui-themer/src/routes.ts
@@ -0,0 +1,20 @@
+/*
+ * Copyright 2025 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { createRouteRef } from '@backstage/core-plugin-api';
+
+export const rootRouteRef = createRouteRef({
+ id: 'mui-to-bui',
+});
diff --git a/yarn.lock b/yarn.lock
index fcf73ef736..dcba3ac6ae 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5708,6 +5708,37 @@ __metadata:
languageName: unknown
linkType: soft
+"@backstage/plugin-mui-to-bui@workspace:^, @backstage/plugin-mui-to-bui@workspace:plugins/bui-themer":
+ version: 0.0.0-use.local
+ resolution: "@backstage/plugin-mui-to-bui@workspace:plugins/bui-themer"
+ dependencies:
+ "@backstage/cli": "workspace:^"
+ "@backstage/core-compat-api": "workspace:^"
+ "@backstage/core-plugin-api": "workspace:^"
+ "@backstage/dev-utils": "workspace:^"
+ "@backstage/frontend-plugin-api": "workspace:^"
+ "@backstage/test-utils": "workspace:^"
+ "@backstage/theme": "workspace:^"
+ "@backstage/ui": "workspace:^"
+ "@mui/material": "npm:^5.12.2"
+ "@mui/system": "npm:^5.16.14"
+ "@testing-library/jest-dom": "npm:^6.0.0"
+ "@testing-library/react": "npm:^16.0.0"
+ "@types/react": "npm:^18.0.0"
+ react: "npm:^18.0.2"
+ react-dom: "npm:^18.0.2"
+ react-router-dom: "npm:^6.3.0"
+ peerDependencies:
+ "@types/react": ^17.0.0 || ^18.0.0
+ react: ^17.0.0 || ^18.0.0
+ react-dom: ^17.0.0 || ^18.0.0
+ react-router-dom: ^6.3.0
+ peerDependenciesMeta:
+ "@types/react":
+ optional: true
+ languageName: unknown
+ linkType: soft
+
"@backstage/plugin-notifications-backend-module-email@workspace:plugins/notifications-backend-module-email":
version: 0.0.0-use.local
resolution: "@backstage/plugin-notifications-backend-module-email@workspace:plugins/notifications-backend-module-email"
@@ -29673,6 +29704,7 @@ __metadata:
"@backstage/plugin-home": "workspace:^"
"@backstage/plugin-kubernetes": "workspace:^"
"@backstage/plugin-kubernetes-cluster": "workspace:^"
+ "@backstage/plugin-mui-to-bui": "workspace:^"
"@backstage/plugin-notifications": "workspace:^"
"@backstage/plugin-org": "workspace:^"
"@backstage/plugin-permission-react": "workspace:^"