Addressing feedback

.github/CODEOWNERS

@@ -1303,6 +1303,9 @@ x-pack/plugins/translations/translations
 # Profiling api integration testing
 x-pack/test/profiling_api_integration @elastic/profiling-ui
 
+# Shared UX
+packages/react @elastic/appex-sharedux
+
 ####
 ## These rules are always last so they take ultimate priority over everything else
 ####

packages/react/kibana_context/render/index.ts

@@ -9,4 +9,4 @@
 export {
   KibanaRenderContextProvider,
   type KibanaRenderContextProviderProps,
-} from './render_context';
+} from './render_provider';

packages/react/kibana_context/root/README.mdx

@@ -18,7 +18,7 @@ import React, { useEffect } from 'react';
 import { BehaviorSubject } from 'rxjs';
 
 import { I18nProvider } from '@kbn/i18n-react';
-import { KibanaRenderContextProvider } from '@kbn/react-kibana-context-render';
+import { KibanaRootContextProvider } from '@kbn/react-kibana-context-root';
 
 import type { DecoratorFn } from '@storybook/react';
 import type { CoreTheme } from '@kbn/core-theme-browser';
@@ -38,9 +38,9 @@ export const KibanaContextDecorator: DecoratorFn = (storyFn, { globals }) => {
   }, [colorMode]);
 
   return (
-    <KibanaRenderContextProvider {...{ theme: { theme$ }, i18n }}>
+    <KibanaRootContextProvider {...{ theme: { theme$ }, i18n }}>
       {storyFn()}
-    </KibanaRenderContextProvider>
+    </KibanaRootContextProvider>
   );
 };
 ```

packages/react/kibana_context/root/root_provider.tsx

@@ -18,9 +18,18 @@ export interface KibanaRootContextProviderProps extends KibanaEuiProviderProps {
 }
 
 /**
- * The `KibanaRootContextProvider` provides the necessary context for Kibana's React components, including
- * the theme and i18n context.  This context should only be used _once_, and at the _very top_ of the
- * application root.
+ * The `KibanaRootContextProvider` provides the necessary context at the root of Kibana, including
+ * initialization and the theme and i18n contexts.  This context should only be used _once_, and
+ * at the _very top_ of the application root, rendered by the `RenderingService`.
+ *
+ * While this context is exposed for edge cases and tooling, (e.g. Storybook, Jest, etc.), it should
+ * _not_ be used in applications.  Instead, applications should choose the context that makes the
+ * most sense for the problem they are trying to solve:
+ *
+ * - Consider `KibanaRenderContextProvider` for rendering components outside the current tree, (e.g.
+ * with `ReactDOM.render`).
+ * - Consider `KibanaThemeContextProvider` for altering the theme of a component or tree of components.
+ *
  */
 export const KibanaRootContextProvider: FC<KibanaRootContextProviderProps> = ({
   children,

packages/react/kibana_context/theme/README.mdx

@@ -17,3 +17,50 @@ side effects.  In addition, _nesting_ of `EuiThemeProvider` has led to additiona
 This context allows us to have a single source of truth for the theme in Kibana, and ensures that the theme is applied correctly.  It also abstracts away any updates or changes
 made to the `EuiThemeProvider` in the future.
 
+```ts
+
+// Make a component always display in dark mode.
+import { BehaviorSubject } from 'rxjs';
+import { KibanaThemeContextProvider, type KibanaTheme } from '@kbn/react-kibana-context-theme';
+
+import { MyComponent } from './my_component';
+
+export const AlwaysDarkMode = () => {
+  // We've purposefully excluded `colorMode` from the props of the provider
+  // to enforce the use of the `theme$` observable.  This prevents consumers
+  // from confusing which takes precedence, (or what needs to be set in most
+  // cases).
+  const theme$ = new BehaviorSubject<KibanaTheme>({ darkMode: true }));
+
+  return (
+    <KibanaThemeContextProvider theme={{ theme$ }}>
+      <MyComponent />
+    </KibanaThemeContextProvider>
+  );
+};
+
+
+import { EuiThemeShape, RecursivePartial } from '@elastic/eui';
+
+// Change the EUI theme colors in dark and light mode.
+export const ChangeEuiTheme = ({ theme }: CoreStart) => {
+  const modify: RecursivePartial<EuiThemeShape> = {
+    colors: {
+      DARK: {
+        text: '#abc',
+        accent: '#123',
+      },
+      LIGHT: {
+        text: '#123',
+        accent: '#abc',
+      },
+    },
+  };
+
+  return (
+    <KibanaThemeProvider {...{ theme, modify }}>
+      <MyComponent />
+    </KibanaThemeProvider>
+  );
+};
+```

packages/react/kibana_context/theme/index.ts

@@ -8,3 +8,6 @@
 
 export { KibanaThemeProvider, type KibanaThemeProviderProps } from './theme_provider';
 export { wrapWithTheme } from './with_theme';
+
+// Re-exporting from @kbn/react-kibana-context-common for convenience to consumers.
+export { defaultTheme, type KibanaTheme } from '@kbn/react-kibana-context-common';