@backstage/theme 0.7.0 → 0.7.1-next.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @backstage/theme
 
+## 0.7.1-next.0
+
+### Patch Changes
+
+- fa06f6b: Added a `themeName` prop to `UnifiedThemeProvider`, enabling Backstage UI `data-theme-name` CSS attribute to be set based on active theme.
+
 ## 0.7.0
 
 ### Minor Changes

package/dist/index.d.ts

@@ -236,6 +236,8 @@ declare const themes: {
 interface UnifiedThemeProviderProps {
     children: ReactNode;
     theme: UnifiedTheme;
+    /** Optional override for the value written to the `data-theme-name` attribute. */
+    themeName?: string;
 }
 /**
  * Provides themes for all Material UI versions supported by the provided unified theme.

package/dist/unified/UnifiedThemeProvider.esm.js

@@ -11,13 +11,11 @@ const generateV4ClassName = createGenerateClassName({
   productionPrefix: "jss4-"
 });
 function UnifiedThemeProvider(props) {
-  const { children, theme } = props;
+  const { children, theme, themeName } = props;
   const v4Theme = theme.getTheme("v4");
   const v5Theme = theme.getTheme("v5");
-  useApplyThemeAttributes(
-    v4Theme ? v4Theme.palette.type : v5Theme?.palette.mode,
-    "backstage"
-  );
+  const themeMode = v4Theme ? v4Theme.palette.type : v5Theme?.palette.mode;
+  useApplyThemeAttributes(themeMode, themeName ?? "backstage");
   let result = children;
   if (v4Theme) {
     result = /* @__PURE__ */ jsx(StylesProvider, { generateClassName: generateV4ClassName, children: /* @__PURE__ */ jsx(ThemeProvider, { theme: v4Theme, children: result }) });

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 } from 'react';\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}\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 } = 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 result = children as JSX.Element;\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":";;;;;;AA8CAA,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,EAAM,GAAI,KAAA;AAE5B,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,MAAA,GAAS,QAAA;AAEb,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 {\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  /** Optional override for the value written to the `data-theme-name` attribute. */\n  themeName?: string;\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, themeName } = props;\n\n  const v4Theme = theme.getTheme('v4') as Mui4Theme;\n  const v5Theme = theme.getTheme('v5') as Mui5Theme;\n\n  const themeMode = v4Theme ? v4Theme.palette.type : v5Theme?.palette.mode;\n\n  useApplyThemeAttributes(themeMode, themeName ?? 'backstage');\n\n  let result = children as JSX.Element;\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,SAAA,EAAU,GAAI,KAAA;AAEvC,EAAA,MAAM,OAAA,GAAU,KAAA,CAAM,QAAA,CAAS,IAAI,CAAA;AACnC,EAAA,MAAM,OAAA,GAAU,KAAA,CAAM,QAAA,CAAS,IAAI,CAAA;AAEnC,EAAA,MAAM,YAAY,OAAA,GAAU,OAAA,CAAQ,OAAA,CAAQ,IAAA,GAAO,SAAS,OAAA,CAAQ,IAAA;AAEpE,EAAA,uBAAA,CAAwB,SAAA,EAAW,aAAa,WAAW,CAAA;AAE3D,EAAA,IAAI,MAAA,GAAS,QAAA;AAEb,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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@backstage/theme",
-  "version": "0.7.0",
+  "version": "0.7.1-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.4",
+    "@backstage/cli": "0.34.6-next.0",
     "@mui/styles": "^5.14.18",
     "@testing-library/jest-dom": "^6.0.0",
     "@testing-library/react": "^16.0.0",