From 728b00750516d896970b2f7b48053f151e65a28e Mon Sep 17 00:00:00 2001
From: Patrik Oldsberg <poldsberg@gmail.com>
Date: Sat, 13 Sep 2025 17:26:05 +0200
Subject: [PATCH] bui-themer: remove the theme id inclusion switch

Signed-off-by: Patrik Oldsberg <poldsberg@gmail.com>
---
 .../BuiThemerPage/BuiThemerPage.tsx           | 17 ++---------
 .../convertMuiToBuiTheme.test.ts              | 18 ------------
 .../BuiThemerPage/convertMuiToBuiTheme.ts     | 28 ++-----------------
 3 files changed, 5 insertions(+), 58 deletions(-)

diff --git a/plugins/bui-themer/src/components/BuiThemerPage/BuiThemerPage.tsx b/plugins/bui-themer/src/components/BuiThemerPage/BuiThemerPage.tsx
index a65c35d665..bb07eae892 100644
--- a/plugins/bui-themer/src/components/BuiThemerPage/BuiThemerPage.tsx
+++ b/plugins/bui-themer/src/components/BuiThemerPage/BuiThemerPage.tsx
@@ -26,7 +26,6 @@ import {
   Flex,
   HeaderPage,
   Text,
-  Switch,
   Tabs,
   TabList,
   Tab,
@@ -177,15 +176,11 @@ function ThemeContent({
   muiTheme,
 }: ThemeContentProps) {
   const [generatedCss, setGeneratedCss] = useState<string>('');
-  const [includeThemeId, setIncludeThemeId] = useState(false);
   const [activeTab, setActiveTab] = useState<string>('css');
 
   const css = useMemo(() => {
-    return convertMuiToBuiTheme(muiTheme, {
-      themeId,
-      includeThemeId,
-    });
-  }, [muiTheme, themeId, includeThemeId]);
+    return convertMuiToBuiTheme(muiTheme);
+  }, [muiTheme]);
 
   useEffect(() => {
     setGeneratedCss(css);
@@ -218,14 +213,6 @@ function ThemeContent({
             </Text>
           </Flex>
 
-          <Flex gap="3" align="center">
-            <Switch
-              isSelected={includeThemeId}
-              onChange={setIncludeThemeId}
-              label="Include theme ID scoping"
-            />
-          </Flex>
-
           <Flex gap="3">
             <Button onClick={handleCopy} variant="secondary">
               Copy CSS
diff --git a/plugins/bui-themer/src/components/BuiThemerPage/convertMuiToBuiTheme.test.ts b/plugins/bui-themer/src/components/BuiThemerPage/convertMuiToBuiTheme.test.ts
index 7c11dd7d25..da87642e8f 100644
--- a/plugins/bui-themer/src/components/BuiThemerPage/convertMuiToBuiTheme.test.ts
+++ b/plugins/bui-themer/src/components/BuiThemerPage/convertMuiToBuiTheme.test.ts
@@ -92,24 +92,6 @@ describe('convertMuiToBuiTheme', () => {
     expect(result).toContain('--bui-fg-secondary: #b3b3b3;');
   });
 
-  it('should include theme ID scoping when requested', () => {
-    const theme = createTheme({
-      palette: {
-        mode: 'light',
-        primary: {
-          main: '#1976d2',
-        },
-      },
-    });
-
-    const result = convertMuiToBuiTheme(theme, {
-      themeId: 'my-theme',
-      includeThemeId: true,
-    });
-
-    expect(result).toContain("[data-app-theme='my-theme'] :root {");
-  });
-
   it('should handle missing theme properties gracefully', () => {
     const theme = createTheme({});
 
diff --git a/plugins/bui-themer/src/components/BuiThemerPage/convertMuiToBuiTheme.ts b/plugins/bui-themer/src/components/BuiThemerPage/convertMuiToBuiTheme.ts
index 1d6e581b57..36a9322289 100644
--- a/plugins/bui-themer/src/components/BuiThemerPage/convertMuiToBuiTheme.ts
+++ b/plugins/bui-themer/src/components/BuiThemerPage/convertMuiToBuiTheme.ts
@@ -17,38 +17,16 @@
 import { Theme as Mui5Theme } from '@mui/material/styles';
 import { blend, alpha } from '@mui/system/colorManipulator';
 
-export interface ConvertMuiToBuiThemeOptions {
-  /**
-   * Theme ID to use for scoping CSS variables
-   */
-  themeId?: string;
-  /**
-   * Whether to include theme ID scoping in the CSS
-   */
-  includeThemeId?: boolean;
-}
-
 /**
  * Converts a MUI v5 Theme to BUI CSS variables
  * @param theme - The MUI v5 theme to convert
- * @param options - Conversion options
  * @returns CSS string with BUI variables
  */
-export function convertMuiToBuiTheme(
-  theme: Mui5Theme,
-  options: ConvertMuiToBuiThemeOptions = {},
-): string {
-  const { themeId, includeThemeId = false } = options;
-  const isDark = theme.palette.mode === 'dark';
-
-  // Generate CSS variables based on theme
+export function convertMuiToBuiTheme(theme: Mui5Theme): string {
   const variables = generateBuiVariables(theme);
 
-  // Create CSS selector based on theme mode and ID
-  let selector = isDark ? "[data-theme-mode='dark']" : ':root';
-  if (includeThemeId && themeId) {
-    selector = `[data-app-theme='${themeId}'] ${selector}`;
-  }
+  const selector =
+    theme.palette.mode === 'dark' ? "[data-theme-mode='dark']" : ':root';
 
   return `${selector} {\n${variables}\n}`;
 }