theme: add type for component overrides

Signed-off-by: Patrik Oldsberg <poldsberg@gmail.com>

.changeset/perfect-apes-sing.md

@@ -0,0 +1,7 @@
+---
+'@backstage/core-components': patch
+'@backstage/plugin-catalog-react': patch
+'@backstage/plugin-catalog': patch
+---
+
+Register component overrides in the global `OverrideComponentNameToClassKeys` provided by `@backstage/theme`. This will in turn will provide component style override types for `createUnifiedTheme`.

.changeset/violet-zebras-thank.md

@@ -0,0 +1,5 @@
+---
+'@backstage/theme': minor
+---
+
+Added a global `OverrideComponentNameToClassKeys` for other plugins and packages to populate using module augmentation. This will in turn will provide component style override types for `createUnifiedTheme`.

packages/core-components/src/overridableComponents.ts

@@ -173,3 +173,8 @@ export type BackstageOverrides = Overrides & {
     StyleRules<BackstageComponentsNameToClassKey[Name]>
   >;
 };
+
+declare module '@backstage/theme' {
+  interface OverrideComponentNameToClassKeys
+    extends BackstageComponentsNameToClassKey {}
+}

packages/theme/api-report.md

@@ -15,6 +15,7 @@ import { Theme as Theme_3 } from '@material-ui/core';
 import { ThemeOptions } from '@mui/material/styles';
 import { ThemeOptions as ThemeOptions_2 } from '@material-ui/core/styles';
 import type { ThemeOptions as ThemeOptions_3 } from '@material-ui/core';
+import { UnifiedTheme as UnifiedTheme_2 } from '@backstage/theme';
 
 // @public @deprecated
 export type BackstagePalette = Palette & BackstagePaletteAdditions;
@@ -216,6 +217,9 @@ export function genPageTheme(props: {
 // @public @deprecated
 export const lightTheme: Theme_3;
 
+// @public
+export interface OverrideComponentNameToClassKeys {}
+
 // @public
 export type PageTheme = {
   colors: string[];
@@ -401,8 +405,8 @@ export type SupportedVersions = 'v4' | 'v5';
 
 // @public
 export const themes: {
-  light: UnifiedTheme;
-  dark: UnifiedTheme;
+  light: UnifiedTheme_2;
+  dark: UnifiedTheme_2;
 };
 
 // @public

packages/theme/src/v5/types.ts

@@ -19,6 +19,8 @@ import {
   BackstagePaletteAdditions,
   BackstageThemeAdditions,
 } from '../base/types';
+// eslint-disable-next-line no-restricted-imports
+import { OverridesStyleRules } from '@mui/material/styles/overrides';
 
 declare module '@mui/material/styles' {
   interface Palette extends BackstagePaletteAdditions {}
@@ -35,3 +37,30 @@ declare module '@mui/material/styles' {
 declare module '@mui/private-theming/defaultTheme' {
   interface DefaultTheme extends Theme {}
 }
+
+/**
+ * Merge interface declarations into this type to register overrides for your components.
+ *
+ * @public
+ * @example
+ * ```ts
+ * declare module '@backstage/theme' {
+ *   interface OverrideComponentNameToClassKeys {
+ *     MyComponent: 'root' | 'header';
+ *   }
+ * }
+ * ```
+ */
+export interface OverrideComponentNameToClassKeys {}
+
+type BackstageComponentOverrides = {
+  [TName in keyof OverrideComponentNameToClassKeys]?: {
+    styleOverrides?: Partial<
+      OverridesStyleRules<OverrideComponentNameToClassKeys[TName], TName, Theme>
+    >;
+  };
+};
+
+declare module '@mui/material/styles' {
+  interface Components extends BackstageComponentOverrides {}
+}

plugins/catalog-react/src/overridableComponents.ts

@@ -44,3 +44,8 @@ export type BackstageOverrides = Overrides & {
     StyleRules<CatalogReactComponentsNameToClassKey[Name]>
   >;
 };
+
+declare module '@backstage/theme' {
+  interface OverrideComponentNameToClassKeys
+    extends CatalogReactComponentsNameToClassKey {}
+}

plugins/catalog/src/overridableComponents.ts

@@ -33,3 +33,8 @@ export type BackstageOverrides = Overrides & {
     StyleRules<PluginCatalogComponentsNameToClassKey[Name]>
   >;
 };
+
+declare module '@backstage/theme' {
+  interface OverrideComponentNameToClassKeys
+    extends PluginCatalogComponentsNameToClassKey {}
+}