@backstage/theme 0.6.8 → 0.6.9-next.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @backstage/theme
 
+## 0.6.9-next.0
+
+### Patch Changes
+
+- d5cbdba: The `UnifiedThemeProvider` now coordinates theme attributes on the document `body` in case multiple theme providers are rendered.
+
 ## 0.6.8
 
 ### Patch Changes

package/dist/unified/UnifiedThemeProvider.esm.js

@@ -1,9 +1,9 @@
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-import { useEffect } from 'react';
 import CssBaseline from '@material-ui/core/CssBaseline';
 import { createGenerateClassName, StylesProvider, ThemeProvider } from '@material-ui/core/styles';
 import { StyledEngineProvider, ThemeProvider as ThemeProvider$1 } from '@mui/material/styles';
 import { unstable_ClassNameGenerator } from '@mui/material/className';
+import { useApplyThemeAttributes } from './useApplyThemeAttributes.esm.js';
 
 unstable_ClassNameGenerator.configure((componentName) => {
   return `v5-${componentName}`;
@@ -15,16 +15,10 @@ function UnifiedThemeProvider(props) {
   const { children, theme, noCssBaseline = false } = props;
   const v4Theme = theme.getTheme("v4");
   const v5Theme = theme.getTheme("v5");
-  const themeMode = v4Theme ? v4Theme.palette.type : v5Theme?.palette.mode;
-  const themeName = "backstage";
-  useEffect(() => {
-    document.body.setAttribute("data-theme-mode", themeMode);
-    document.body.setAttribute("data-theme-name", themeName);
-    return () => {
-      document.body.removeAttribute("data-theme-mode");
-      document.body.removeAttribute("data-theme-name");
-    };
-  }, [themeMode, themeName]);
+  useApplyThemeAttributes(
+    v4Theme ? v4Theme.palette.type : v5Theme?.palette.mode,
+    "backstage"
+  );
   let cssBaseline = void 0;
   if (!noCssBaseline) {
     cssBaseline = /* @__PURE__ */ jsx(CssBaseline, {});

package/dist/unified/UnifiedThemeProvider.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"UnifiedThemeProvider.esm.js","sources":["../../src/unified/UnifiedThemeProvider.tsx"],"sourcesContent":["/*\n * Copyright 2022 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { ReactNode, useEffect } from 'react';\nimport CssBaseline from '@material-ui/core/CssBaseline';\nimport {\n  ThemeProvider,\n  StylesProvider,\n  createGenerateClassName,\n  Theme as Mui4Theme,\n} from '@material-ui/core/styles';\nimport {\n  StyledEngineProvider,\n  ThemeProvider as Mui5Provider,\n  Theme as Mui5Theme,\n} from '@mui/material/styles';\nimport { UnifiedTheme } from './types';\nimport { unstable_ClassNameGenerator as ClassNameGenerator } from '@mui/material/className';\n\n/**\n * Props for {@link UnifiedThemeProvider}.\n *\n * @public\n */\nexport interface UnifiedThemeProviderProps {\n  children: ReactNode;\n  theme: UnifiedTheme;\n  noCssBaseline?: boolean;\n}\n\n/**\n * This API is introduced in @mui/material (v5.0.5) as a replacement of deprecated createGenerateClassName & only affects v5 Material UI components from `@mui/*`.\n *\n * This call needs to be in the same module as the `UnifiedThemeProvider` to ensure that it doesn't get removed by tree shaking\n */\nClassNameGenerator.configure(componentName => {\n  return `v5-${componentName}`;\n});\n\n// Background at https://mui.com/x/migration/migration-data-grid-v4/#using-mui-core-v4-with-v5\n// Rather than disabling globals and custom seed, we instead only set a production prefix that\n// won't collide with Material UI 5 styles. We've already got the separate class name generator\n// for v5 set up in just above, so only the production JSS needs deduplication.\nconst generateV4ClassName = createGenerateClassName({\n  productionPrefix: 'jss4-',\n});\n\n/**\n * Provides themes for all Material UI versions supported by the provided unified theme.\n *\n * @public\n */\nexport function UnifiedThemeProvider(\n  props: UnifiedThemeProviderProps,\n): JSX.Element {\n  const { children, theme, noCssBaseline = false } = props;\n\n  const v4Theme = theme.getTheme('v4') as Mui4Theme;\n  const v5Theme = theme.getTheme('v5') as Mui5Theme;\n  const themeMode = v4Theme ? v4Theme.palette.type : v5Theme?.palette.mode;\n  const themeName = 'backstage';\n\n  useEffect(() => {\n    document.body.setAttribute('data-theme-mode', themeMode);\n    document.body.setAttribute('data-theme-name', themeName);\n\n    return () => {\n      document.body.removeAttribute('data-theme-mode');\n      document.body.removeAttribute('data-theme-name');\n    };\n  }, [themeMode, themeName]);\n\n  let cssBaseline: JSX.Element | undefined = undefined;\n  if (!noCssBaseline) {\n    cssBaseline = <CssBaseline />;\n  }\n\n  let result = (\n    <>\n      {cssBaseline}\n      {children}\n    </>\n  );\n\n  if (v4Theme) {\n    result = (\n      <StylesProvider generateClassName={generateV4ClassName}>\n        <ThemeProvider theme={v4Theme}>{result}</ThemeProvider>\n      </StylesProvider>\n    );\n  }\n\n  if (v5Theme) {\n    result = (\n      <StyledEngineProvider injectFirst>\n        <Mui5Provider theme={v5Theme}>{result}</Mui5Provider>\n      </StyledEngineProvider>\n    );\n  }\n\n  return result;\n}\n"],"names":["ClassNameGenerator","Mui5Provider"],"mappings":";;;;;;;AAgDAA,2BAAA,CAAmB,UAAU,CAAA,aAAA,KAAiB;AAC5C,EAAA,OAAO,MAAM,aAAa,CAAA,CAAA;AAC5B,CAAC,CAAA;AAMD,MAAM,sBAAsB,uBAAA,CAAwB;AAAA,EAClD,gBAAA,EAAkB;AACpB,CAAC,CAAA;AAOM,SAAS,qBACd,KAAA,EACa;AACb,EAAA,MAAM,EAAE,QAAA,EAAU,KAAA,EAAO,aAAA,GAAgB,OAAM,GAAI,KAAA;AAEnD,EAAA,MAAM,OAAA,GAAU,KAAA,CAAM,QAAA,CAAS,IAAI,CAAA;AACnC,EAAA,MAAM,OAAA,GAAU,KAAA,CAAM,QAAA,CAAS,IAAI,CAAA;AACnC,EAAA,MAAM,YAAY,OAAA,GAAU,OAAA,CAAQ,OAAA,CAAQ,IAAA,GAAO,SAAS,OAAA,CAAQ,IAAA;AACpE,EAAA,MAAM,SAAA,GAAY,WAAA;AAElB,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,QAAA,CAAS,IAAA,CAAK,YAAA,CAAa,iBAAA,EAAmB,SAAS,CAAA;AACvD,IAAA,QAAA,CAAS,IAAA,CAAK,YAAA,CAAa,iBAAA,EAAmB,SAAS,CAAA;AAEvD,IAAA,OAAO,MAAM;AACX,MAAA,QAAA,CAAS,IAAA,CAAK,gBAAgB,iBAAiB,CAAA;AAC/C,MAAA,QAAA,CAAS,IAAA,CAAK,gBAAgB,iBAAiB,CAAA;AAAA,IACjD,CAAA;AAAA,EACF,CAAA,EAAG,CAAC,SAAA,EAAW,SAAS,CAAC,CAAA;AAEzB,EAAA,IAAI,WAAA,GAAuC,MAAA;AAC3C,EAAA,IAAI,CAAC,aAAA,EAAe;AAClB,IAAA,WAAA,uBAAe,WAAA,EAAA,EAAY,CAAA;AAAA,EAC7B;AAEA,EAAA,IAAI,yBACF,IAAA,CAAA,QAAA,EAAA,EACG,QAAA,EAAA;AAAA,IAAA,WAAA;AAAA,IACA;AAAA,GAAA,EACH,CAAA;AAGF,EAAA,IAAI,OAAA,EAAS;AACX,IAAA,MAAA,mBACE,GAAA,CAAC,kBAAe,iBAAA,EAAmB,mBAAA,EACjC,8BAAC,aAAA,EAAA,EAAc,KAAA,EAAO,OAAA,EAAU,QAAA,EAAA,MAAA,EAAO,CAAA,EACzC,CAAA;AAAA,EAEJ;AAEA,EAAA,IAAI,OAAA,EAAS;AACX,IAAA,MAAA,mBACE,GAAA,CAAC,wBAAqB,WAAA,EAAW,IAAA,EAC/B,8BAACC,eAAA,EAAA,EAAa,KAAA,EAAO,OAAA,EAAU,QAAA,EAAA,MAAA,EAAO,CAAA,EACxC,CAAA;AAAA,EAEJ;AAEA,EAAA,OAAO,MAAA;AACT;;;;"}
+{"version":3,"file":"UnifiedThemeProvider.esm.js","sources":["../../src/unified/UnifiedThemeProvider.tsx"],"sourcesContent":["/*\n * Copyright 2022 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { ReactNode } from 'react';\nimport CssBaseline from '@material-ui/core/CssBaseline';\nimport {\n  ThemeProvider,\n  StylesProvider,\n  createGenerateClassName,\n  Theme as Mui4Theme,\n} from '@material-ui/core/styles';\nimport {\n  StyledEngineProvider,\n  ThemeProvider as Mui5Provider,\n  Theme as Mui5Theme,\n} from '@mui/material/styles';\nimport { UnifiedTheme } from './types';\nimport { unstable_ClassNameGenerator as ClassNameGenerator } from '@mui/material/className';\n\n/**\n * Props for {@link UnifiedThemeProvider}.\n *\n * @public\n */\nexport interface UnifiedThemeProviderProps {\n  children: ReactNode;\n  theme: UnifiedTheme;\n  noCssBaseline?: boolean;\n}\n\n/**\n * This API is introduced in @mui/material (v5.0.5) as a replacement of deprecated createGenerateClassName & only affects v5 Material UI components from `@mui/*`.\n *\n * This call needs to be in the same module as the `UnifiedThemeProvider` to ensure that it doesn't get removed by tree shaking\n */\nClassNameGenerator.configure(componentName => {\n  return `v5-${componentName}`;\n});\n\n// Background at https://mui.com/x/migration/migration-data-grid-v4/#using-mui-core-v4-with-v5\n// Rather than disabling globals and custom seed, we instead only set a production prefix that\n// won't collide with Material UI 5 styles. We've already got the separate class name generator\n// for v5 set up in just above, so only the production JSS needs deduplication.\nconst generateV4ClassName = createGenerateClassName({\n  productionPrefix: 'jss4-',\n});\n\nimport { useApplyThemeAttributes } from './useApplyThemeAttributes';\n\n/**\n * Provides themes for all Material UI versions supported by the provided unified theme.\n *\n * @public\n */\nexport function UnifiedThemeProvider(\n  props: UnifiedThemeProviderProps,\n): JSX.Element {\n  const { children, theme, noCssBaseline = false } = props;\n\n  const v4Theme = theme.getTheme('v4') as Mui4Theme;\n  const v5Theme = theme.getTheme('v5') as Mui5Theme;\n\n  useApplyThemeAttributes(\n    v4Theme ? v4Theme.palette.type : v5Theme?.palette.mode,\n    'backstage',\n  );\n\n  let cssBaseline: JSX.Element | undefined = undefined;\n  if (!noCssBaseline) {\n    cssBaseline = <CssBaseline />;\n  }\n\n  let result = (\n    <>\n      {cssBaseline}\n      {children}\n    </>\n  );\n\n  if (v4Theme) {\n    result = (\n      <StylesProvider generateClassName={generateV4ClassName}>\n        <ThemeProvider theme={v4Theme}>{result}</ThemeProvider>\n      </StylesProvider>\n    );\n  }\n\n  if (v5Theme) {\n    result = (\n      <StyledEngineProvider injectFirst>\n        <Mui5Provider theme={v5Theme}>{result}</Mui5Provider>\n      </StyledEngineProvider>\n    );\n  }\n\n  return result;\n}\n"],"names":["ClassNameGenerator","Mui5Provider"],"mappings":";;;;;;;AAgDAA,2BAAA,CAAmB,UAAU,CAAA,aAAA,KAAiB;AAC5C,EAAA,OAAO,MAAM,aAAa,CAAA,CAAA;AAC5B,CAAC,CAAA;AAMD,MAAM,sBAAsB,uBAAA,CAAwB;AAAA,EAClD,gBAAA,EAAkB;AACpB,CAAC,CAAA;AASM,SAAS,qBACd,KAAA,EACa;AACb,EAAA,MAAM,EAAE,QAAA,EAAU,KAAA,EAAO,aAAA,GAAgB,OAAM,GAAI,KAAA;AAEnD,EAAA,MAAM,OAAA,GAAU,KAAA,CAAM,QAAA,CAAS,IAAI,CAAA;AACnC,EAAA,MAAM,OAAA,GAAU,KAAA,CAAM,QAAA,CAAS,IAAI,CAAA;AAEnC,EAAA,uBAAA;AAAA,IACE,OAAA,GAAU,OAAA,CAAQ,OAAA,CAAQ,IAAA,GAAO,SAAS,OAAA,CAAQ,IAAA;AAAA,IAClD;AAAA,GACF;AAEA,EAAA,IAAI,WAAA,GAAuC,MAAA;AAC3C,EAAA,IAAI,CAAC,aAAA,EAAe;AAClB,IAAA,WAAA,uBAAe,WAAA,EAAA,EAAY,CAAA;AAAA,EAC7B;AAEA,EAAA,IAAI,yBACF,IAAA,CAAA,QAAA,EAAA,EACG,QAAA,EAAA;AAAA,IAAA,WAAA;AAAA,IACA;AAAA,GAAA,EACH,CAAA;AAGF,EAAA,IAAI,OAAA,EAAS;AACX,IAAA,MAAA,mBACE,GAAA,CAAC,kBAAe,iBAAA,EAAmB,mBAAA,EACjC,8BAAC,aAAA,EAAA,EAAc,KAAA,EAAO,OAAA,EAAU,QAAA,EAAA,MAAA,EAAO,CAAA,EACzC,CAAA;AAAA,EAEJ;AAEA,EAAA,IAAI,OAAA,EAAS;AACX,IAAA,MAAA,mBACE,GAAA,CAAC,wBAAqB,WAAA,EAAW,IAAA,EAC/B,8BAACC,eAAA,EAAA,EAAa,KAAA,EAAO,OAAA,EAAU,QAAA,EAAA,MAAA,EAAO,CAAA,EACxC,CAAA;AAAA,EAEJ;AAEA,EAAA,OAAO,MAAA;AACT;;;;"}

package/dist/unified/useApplyThemeAttributes.esm.js

@@ -0,0 +1,51 @@
+import { useEffect } from 'react';
+
+const STACK_ATTR = "data-unified-theme-stack";
+const MODE_ATTR = "data-theme-mode";
+const NAME_ATTR = "data-theme-name";
+function mutateAttrStack(mutator) {
+  const stack = (() => {
+    const raw = document.body.getAttribute(STACK_ATTR);
+    if (!raw) {
+      return [];
+    }
+    try {
+      const parsed = JSON.parse(raw);
+      return Array.isArray(parsed) ? parsed : [];
+    } catch {
+      return [];
+    }
+  })();
+  mutator(stack);
+  if (stack.length === 0) {
+    document.body.removeAttribute(STACK_ATTR);
+  } else {
+    document.body.setAttribute(STACK_ATTR, JSON.stringify(stack));
+  }
+  const top = stack[stack.length - 1];
+  if (top?.mode) {
+    document.body.setAttribute(MODE_ATTR, String(top.mode));
+  } else {
+    document.body.removeAttribute(MODE_ATTR);
+  }
+  if (top?.name) {
+    document.body.setAttribute(NAME_ATTR, String(top.name));
+  } else {
+    document.body.removeAttribute(NAME_ATTR);
+  }
+}
+function useApplyThemeAttributes(themeMode, themeName) {
+  useEffect(() => {
+    mutateAttrStack((stack) => {
+      stack.push({ mode: themeMode, name: themeName });
+    });
+    return () => {
+      mutateAttrStack((stack) => {
+        stack.pop();
+      });
+    };
+  }, [themeMode, themeName]);
+}
+
+export { useApplyThemeAttributes };
+//# sourceMappingURL=useApplyThemeAttributes.esm.js.map

package/dist/unified/useApplyThemeAttributes.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useApplyThemeAttributes.esm.js","sources":["../../src/unified/useApplyThemeAttributes.ts"],"sourcesContent":["/*\n * Copyright 2025 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { useEffect } from 'react';\n\ntype ThemeFrame = { mode?: string; name?: string };\n\nconst STACK_ATTR = 'data-unified-theme-stack';\nconst MODE_ATTR = 'data-theme-mode';\nconst NAME_ATTR = 'data-theme-name';\n\nfunction mutateAttrStack(mutator: (stack: ThemeFrame[]) => void) {\n  const stack = (() => {\n    const raw = document.body.getAttribute(STACK_ATTR);\n    if (!raw) {\n      return [] as ThemeFrame[];\n    }\n    try {\n      const parsed = JSON.parse(raw);\n      return Array.isArray(parsed) ? (parsed as ThemeFrame[]) : [];\n    } catch {\n      return [] as ThemeFrame[];\n    }\n  })();\n\n  mutator(stack);\n\n  if (stack.length === 0) {\n    document.body.removeAttribute(STACK_ATTR);\n  } else {\n    document.body.setAttribute(STACK_ATTR, JSON.stringify(stack));\n  }\n\n  const top = stack[stack.length - 1];\n  if (top?.mode) {\n    document.body.setAttribute(MODE_ATTR, String(top.mode));\n  } else {\n    document.body.removeAttribute(MODE_ATTR);\n  }\n  if (top?.name) {\n    document.body.setAttribute(NAME_ATTR, String(top.name));\n  } else {\n    document.body.removeAttribute(NAME_ATTR);\n  }\n}\n\nexport function useApplyThemeAttributes(themeMode: string, themeName: string) {\n  useEffect(() => {\n    mutateAttrStack(stack => {\n      stack.push({ mode: themeMode, name: themeName });\n    });\n\n    return () => {\n      mutateAttrStack(stack => {\n        stack.pop();\n      });\n    };\n  }, [themeMode, themeName]);\n}\n"],"names":[],"mappings":";;AAoBA,MAAM,UAAA,GAAa,0BAAA;AACnB,MAAM,SAAA,GAAY,iBAAA;AAClB,MAAM,SAAA,GAAY,iBAAA;AAElB,SAAS,gBAAgB,OAAA,EAAwC;AAC/D,EAAA,MAAM,SAAS,MAAM;AACnB,IAAA,MAAM,GAAA,GAAM,QAAA,CAAS,IAAA,CAAK,YAAA,CAAa,UAAU,CAAA;AACjD,IAAA,IAAI,CAAC,GAAA,EAAK;AACR,MAAA,OAAO,EAAC;AAAA,IACV;AACA,IAAA,IAAI;AACF,MAAA,MAAM,MAAA,GAAS,IAAA,CAAK,KAAA,CAAM,GAAG,CAAA;AAC7B,MAAA,OAAO,KAAA,CAAM,OAAA,CAAQ,MAAM,CAAA,GAAK,SAA0B,EAAC;AAAA,IAC7D,CAAA,CAAA,MAAQ;AACN,MAAA,OAAO,EAAC;AAAA,IACV;AAAA,EACF,CAAA,GAAG;AAEH,EAAA,OAAA,CAAQ,KAAK,CAAA;AAEb,EAAA,IAAI,KAAA,CAAM,WAAW,CAAA,EAAG;AACtB,IAAA,QAAA,CAAS,IAAA,CAAK,gBAAgB,UAAU,CAAA;AAAA,EAC1C,CAAA,MAAO;AACL,IAAA,QAAA,CAAS,KAAK,YAAA,CAAa,UAAA,EAAY,IAAA,CAAK,SAAA,CAAU,KAAK,CAAC,CAAA;AAAA,EAC9D;AAEA,EAAA,MAAM,GAAA,GAAM,KAAA,CAAM,KAAA,CAAM,MAAA,GAAS,CAAC,CAAA;AAClC,EAAA,IAAI,KAAK,IAAA,EAAM;AACb,IAAA,QAAA,CAAS,KAAK,YAAA,CAAa,SAAA,EAAW,MAAA,CAAO,GAAA,CAAI,IAAI,CAAC,CAAA;AAAA,EACxD,CAAA,MAAO;AACL,IAAA,QAAA,CAAS,IAAA,CAAK,gBAAgB,SAAS,CAAA;AAAA,EACzC;AACA,EAAA,IAAI,KAAK,IAAA,EAAM;AACb,IAAA,QAAA,CAAS,KAAK,YAAA,CAAa,SAAA,EAAW,MAAA,CAAO,GAAA,CAAI,IAAI,CAAC,CAAA;AAAA,EACxD,CAAA,MAAO;AACL,IAAA,QAAA,CAAS,IAAA,CAAK,gBAAgB,SAAS,CAAA;AAAA,EACzC;AACF;AAEO,SAAS,uBAAA,CAAwB,WAAmB,SAAA,EAAmB;AAC5E,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,eAAA,CAAgB,CAAA,KAAA,KAAS;AACvB,MAAA,KAAA,CAAM,KAAK,EAAE,IAAA,EAAM,SAAA,EAAW,IAAA,EAAM,WAAW,CAAA;AAAA,IACjD,CAAC,CAAA;AAED,IAAA,OAAO,MAAM;AACX,MAAA,eAAA,CAAgB,CAAA,KAAA,KAAS;AACvB,QAAA,KAAA,CAAM,GAAA,EAAI;AAAA,MACZ,CAAC,CAAA;AAAA,IACH,CAAA;AAAA,EACF,CAAA,EAAG,CAAC,SAAA,EAAW,SAAS,CAAC,CAAA;AAC3B;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@backstage/theme",
-  "version": "0.6.8",
+  "version": "0.6.9-next.0",
   "description": "material-ui theme for use with Backstage.",
   "backstage": {
     "role": "web-library"
@@ -41,7 +41,7 @@
     "@mui/material": "^5.12.2"
   },
   "devDependencies": {
-    "@backstage/cli": "^0.34.0",
+    "@backstage/cli": "0.34.4-next.2",
     "@mui/styles": "^5.14.18",
     "@testing-library/jest-dom": "^6.0.0",
     "@testing-library/react": "^16.0.0",