frontend-*-api: add support for theme extensions

Co-authored-by: Camila Belo <camilaibs@gmail.com>
Co-authored-by: Vincenzo Scamporlino <vincenzos@spotify.com>
Co-authored-by: Philipp Hugenroth <philipph@spotify.com>
Signed-off-by: Patrik Oldsberg <poldsberg@gmail.com>

packages/frontend-plugin-api/src/extensions/createThemeExtension.ts

@@ -0,0 +1,32 @@
+/*
+ * Copyright 2023 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 { createExtension, coreExtensionData } from '../wiring';
+import { AppTheme } from '@backstage/core-plugin-api';
+
+/** @public */
+export function createThemeExtension(theme: AppTheme) {
+  return createExtension({
+    id: `themes.${theme.id}`,
+    at: 'core/themes',
+    output: {
+      theme: coreExtensionData.theme,
+    },
+    factory({ bind }) {
+      bind({ theme });
+    },
+  });
+}

packages/frontend-plugin-api/src/extensions/index.ts

@@ -17,3 +17,4 @@
 export { createApiExtension } from './createApiExtension';
 export { createPageExtension } from './createPageExtension';
 export { createNavItemExtension } from './createNavItemExtension';
+export { createThemeExtension } from './createThemeExtension';

packages/frontend-plugin-api/src/wiring/coreExtensionData.ts

@@ -17,6 +17,7 @@
 import { JSX } from 'react';
 import {
   AnyApiFactory,
+  AppTheme,
   IconComponent,
   RouteRef,
 } from '@backstage/core-plugin-api';
@@ -36,4 +37,5 @@ export const coreExtensionData = {
   apiFactory: createExtensionDataRef<AnyApiFactory>('core.api.factory'),
   routeRef: createExtensionDataRef<RouteRef>('core.routing.ref'),
   navTarget: createExtensionDataRef<NavTarget>('core.nav.target'),
+  theme: createExtensionDataRef<AppTheme>('core.theme'),
 };