Inherit core theme in React plugins (#60256) (#60405)

(cherry picked from commit 3e57f1e)

Author: pierrejeambrun

airflow-core/src/airflow/ui/src/theme.ts

@@ -399,6 +399,9 @@ export const customConfig = defineConfig({
 
 export const system = createSystem(defaultConfig, customConfig);
 
+// Once the system is created, make it globally available to dynamically imported React plugins.
+Reflect.set(globalThis, "ChakraUISystem", system);
+
 // Utility function to resolve CSS variables to their computed values
 // See: https://github.com/chakra-ui/panda/discussions/2200
 export const getComputedCSSVariableValue = (variable: string): string =>

dev/react-plugin-tools/react_plugin_template/README.md

@@ -72,6 +72,8 @@ For development and testing, use `pnpm dev` which will:
 - Start a development server on port 5173
 - Load the component using `src/dev.tsx` entry point
 - Enable hot module replacement
+- Chakra Theme provided for local development is the default one, but in production when the plugin is loaded into the Airflow Core UI,
+  it will inherit the main application theme for a consistent look and feel.
 
 ### Library Configuration
 

dev/react-plugin-tools/react_plugin_template/src/global.d.ts

@@ -0,0 +1,24 @@
+/*!
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you 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.
+ */
+
+export interface global {}
+
+declare global {
+  var ChakraUISystem: SystemContext | undefined
+}

dev/react-plugin-tools/react_plugin_template/src/main.tsx

@@ -23,7 +23,7 @@ import { FC } from "react";
 import { ColorModeProvider } from "src/context/colorMode";
 import { HomePage } from "src/pages/HomePage";
 
-import { system } from "./theme";
+import { localSystem } from "./theme";
 
 export interface PluginComponentProps {
   // Add any props your plugin component needs
@@ -33,6 +33,12 @@ export interface PluginComponentProps {
  * Main plugin component
  */
 const PluginComponent: FC<PluginComponentProps> = (props) => {
+
+  // Use the globalChakraUISystem provided by the Airflow Core UI,
+  // so the plugin has a consistent theming with the host Airflow UI,
+  // fallback to localSystem for local development.
+  const system = (globalThis.ChakraUISystem)  ?? localSystem;
+
   return (
     <ChakraProvider value={system}>
       <ColorModeProvider>