From 1eec03fcea6b38871eb0bd2f8634757d0c5739e6 Mon Sep 17 00:00:00 2001
From: Yaroslav Kuznietsov <kuznetsov.yaroslav.yk@gmail.com>
Date: Thu, 25 Nov 2021 17:33:06 +0200
Subject: [PATCH 01/11] Added KibanaThemeProvider to canvas application.

---
 x-pack/plugins/canvas/public/application.tsx | 13 +++++++++----
 1 file changed, 9 insertions(+), 4 deletions(-)

diff --git a/x-pack/plugins/canvas/public/application.tsx b/x-pack/plugins/canvas/public/application.tsx
index a286bca547bfa..ef8a9b8ff7b81 100644
--- a/x-pack/plugins/canvas/public/application.tsx
+++ b/x-pack/plugins/canvas/public/application.tsx
@@ -17,7 +17,10 @@ import { includes, remove } from 'lodash';
 
 import { AppMountParameters, CoreStart, CoreSetup, AppUpdater } from 'kibana/public';
 
-import { KibanaContextProvider } from '../../../../src/plugins/kibana_react/public';
+import {
+  KibanaContextProvider,
+  KibanaThemeProvider,
+} from '../../../../src/plugins/kibana_react/public';
 import { PluginServices } from '../../../../src/plugins/presentation_util/public';
 
 import { CanvasStartDeps, CanvasSetupDeps } from './plugin';
@@ -77,9 +80,11 @@ export const renderApp = ({
         <LegacyServicesProvider providers={services}>
           <presentationUtil.ContextProvider>
             <I18nProvider>
-              <Provider store={canvasStore}>
-                <App history={params.history} />
-              </Provider>
+              <KibanaThemeProvider theme$={coreStart.theme.theme$}>
+                <Provider store={canvasStore}>
+                  <App history={params.history} />
+                </Provider>
+              </KibanaThemeProvider>
             </I18nProvider>
           </presentationUtil.ContextProvider>
         </LegacyServicesProvider>

From 93e83981266167a5871b45b27bcbba88757c3121 Mon Sep 17 00:00:00 2001
From: Yaroslav Kuznietsov <kuznetsov.yaroslav.yk@gmail.com>
Date: Thu, 25 Nov 2021 17:37:05 +0200
Subject: [PATCH 02/11] Added KibanaThemeProvider to embeddable.

---
 .../renderers/embeddable/embeddable.tsx               | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/x-pack/plugins/canvas/canvas_plugin_src/renderers/embeddable/embeddable.tsx b/x-pack/plugins/canvas/canvas_plugin_src/renderers/embeddable/embeddable.tsx
index 0b1adb9559e55..4c001828a6b23 100644
--- a/x-pack/plugins/canvas/canvas_plugin_src/renderers/embeddable/embeddable.tsx
+++ b/x-pack/plugins/canvas/canvas_plugin_src/renderers/embeddable/embeddable.tsx
@@ -9,6 +9,7 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import { CoreStart } from '../../../../../../src/core/public';
 import { StartDeps } from '../../plugin';
+import { KibanaThemeProvider } from '../../../../../../src/plugins/kibana_react/public';
 import {
   IEmbeddable,
   EmbeddableFactory,
@@ -43,10 +44,12 @@ const renderEmbeddableFactory = (core: CoreStart, plugins: StartDeps) => {
         style={{ width: '100%', height: '100%', cursor: 'auto' }}
       >
         <I18nContext>
-          <plugins.embeddable.EmbeddablePanel
-            embeddable={embeddableObject}
-            containerContext={embeddableContainerContext}
-          />
+          <KibanaThemeProvider theme$={core.theme.theme$}>
+            <plugins.embeddable.EmbeddablePanel
+              embeddable={embeddableObject}
+              containerContext={embeddableContainerContext}
+            />
+          </KibanaThemeProvider>
         </I18nContext>
       </div>
     );

From c4fab44f30fdaec484cdd04f91a089557da4b4b1 Mon Sep 17 00:00:00 2001
From: Yaroslav Kuznietsov <kuznetsov.yaroslav.yk@gmail.com>
Date: Thu, 25 Nov 2021 17:49:09 +0200
Subject: [PATCH 03/11] Added KibanaThemeProvider to filters.

---
 .../filters/advanced_filter/index.tsx         |  40 +++---
 .../filters/dropdown_filter/index.tsx         | 119 +++++++++---------
 .../renderers/filters/index.ts                |  12 +-
 .../renderers/filters/time_filter/index.tsx   |  17 +--
 4 files changed, 104 insertions(+), 84 deletions(-)

diff --git a/x-pack/plugins/canvas/canvas_plugin_src/renderers/filters/advanced_filter/index.tsx b/x-pack/plugins/canvas/canvas_plugin_src/renderers/filters/advanced_filter/index.tsx
index e22f5b032eff2..eb0fccf3d74ee 100644
--- a/x-pack/plugins/canvas/canvas_plugin_src/renderers/filters/advanced_filter/index.tsx
+++ b/x-pack/plugins/canvas/canvas_plugin_src/renderers/filters/advanced_filter/index.tsx
@@ -7,27 +7,33 @@
 
 import React from 'react';
 import ReactDOM from 'react-dom';
+import { KibanaThemeProvider } from '../../../../../../../src/plugins/kibana_react/public';
 import { RendererFactory } from '../../../../types';
 import { AdvancedFilter } from './component';
 import { RendererStrings } from '../../../../i18n';
 
 const { advancedFilter: strings } = RendererStrings;
 
-export const advancedFilter: RendererFactory<{}> = () => ({
-  name: 'advanced_filter',
-  displayName: strings.getDisplayName(),
-  help: strings.getHelpDescription(),
-  reuseDomNode: true,
-  height: 50,
-  render(domNode, _, handlers) {
-    ReactDOM.render(
-      <AdvancedFilter commit={handlers.setFilter} value={handlers.getFilter()} />,
-      domNode,
-      () => handlers.done()
-    );
+export const advancedFilterFactory: StartInitializer<RendererFactory<{}>> = (core, plugins) => {
+  const { theme } = core;
+  return () => ({
+    name: 'advanced_filter',
+    displayName: strings.getDisplayName(),
+    help: strings.getHelpDescription(),
+    reuseDomNode: true,
+    height: 50,
+    render(domNode, _, handlers) {
+      ReactDOM.render(
+        <KibanaThemeProvider theme$={theme.theme$}>
+          <AdvancedFilter commit={handlers.setFilter} value={handlers.getFilter()} />
+        </KibanaThemeProvider>,
+        domNode,
+        () => handlers.done()
+      );
 
-    handlers.onDestroy(() => {
-      ReactDOM.unmountComponentAtNode(domNode);
-    });
-  },
-});
+      handlers.onDestroy(() => {
+        ReactDOM.unmountComponentAtNode(domNode);
+      });
+    },
+  });
+};
diff --git a/x-pack/plugins/canvas/canvas_plugin_src/renderers/filters/dropdown_filter/index.tsx b/x-pack/plugins/canvas/canvas_plugin_src/renderers/filters/dropdown_filter/index.tsx
index 001f2dc7652d2..3266f9b00681f 100644
--- a/x-pack/plugins/canvas/canvas_plugin_src/renderers/filters/dropdown_filter/index.tsx
+++ b/x-pack/plugins/canvas/canvas_plugin_src/renderers/filters/dropdown_filter/index.tsx
@@ -9,8 +9,10 @@ import { fromExpression, toExpression, Ast } from '@kbn/interpreter/common';
 import { get } from 'lodash';
 import React from 'react';
 import ReactDOM from 'react-dom';
+import { KibanaThemeProvider } from '../../../../../../../src/plugins/kibana_react/public';
 import { syncFilterExpression } from '../../../../public/lib/sync_filter_expression';
 import { RendererFactory } from '../../../../types';
+import { StartInitializer } from '../../../plugin';
 import { DropdownFilter } from './component';
 import { RendererStrings } from '../../../../i18n';
 
@@ -38,67 +40,72 @@ const getFilterValue = (filterExpression: string) => {
   return get(filterAST, 'chain[0].arguments.value[0]', MATCH_ALL) as string;
 };
 
-export const dropdownFilter: RendererFactory<Config> = () => ({
-  name: 'dropdown_filter',
-  displayName: strings.getDisplayName(),
-  help: strings.getHelpDescription(),
-  reuseDomNode: true,
-  height: 50,
-  render(domNode, config, handlers) {
-    let filterExpression = handlers.getFilter();
+export const dropdownFilterFactory: StartInitializer<RendererFactory<Config>> = (core, plugins) => {
+  const { theme } = core;
+  return () => ({
+    name: 'dropdown_filter',
+    displayName: strings.getDisplayName(),
+    help: strings.getHelpDescription(),
+    reuseDomNode: true,
+    height: 50,
+    render(domNode, config, handlers) {
+      let filterExpression = handlers.getFilter();
 
-    if (
-      filterExpression !== '' &&
-      (filterExpression === undefined || !filterExpression.includes('exactly'))
-    ) {
-      filterExpression = '';
-      handlers.setFilter(filterExpression);
-    } else if (filterExpression !== '') {
-      // NOTE: setFilter() will cause a data refresh, avoid calling unless required
-      // compare expression and filter, update filter if needed
-      const { changed, newAst } = syncFilterExpression(config, filterExpression, ['filterGroup']);
+      if (
+        filterExpression !== '' &&
+        (filterExpression === undefined || !filterExpression.includes('exactly'))
+      ) {
+        filterExpression = '';
+        handlers.setFilter(filterExpression);
+      } else if (filterExpression !== '') {
+        // NOTE: setFilter() will cause a data refresh, avoid calling unless required
+        // compare expression and filter, update filter if needed
+        const { changed, newAst } = syncFilterExpression(config, filterExpression, ['filterGroup']);
 
-      if (changed) {
-        handlers.setFilter(toExpression(newAst));
+        if (changed) {
+          handlers.setFilter(toExpression(newAst));
+        }
       }
-    }
 
-    const commit = (commitValue: string) => {
-      if (commitValue === '%%CANVAS_MATCH_ALL%%') {
-        handlers.setFilter('');
-      } else {
-        const newFilterAST: Ast = {
-          type: 'expression',
-          chain: [
-            {
-              type: 'function',
-              function: 'exactly',
-              arguments: {
-                value: [commitValue],
-                column: [config.column],
-                filterGroup: [config.filterGroup],
+      const commit = (commitValue: string) => {
+        if (commitValue === '%%CANVAS_MATCH_ALL%%') {
+          handlers.setFilter('');
+        } else {
+          const newFilterAST: Ast = {
+            type: 'expression',
+            chain: [
+              {
+                type: 'function',
+                function: 'exactly',
+                arguments: {
+                  value: [commitValue],
+                  column: [config.column],
+                  filterGroup: [config.filterGroup],
+                },
               },
-            },
-          ],
-        };
+            ],
+          };
 
-        const newFilter = toExpression(newFilterAST);
-        handlers.setFilter(newFilter);
-      }
-    };
+          const newFilter = toExpression(newFilterAST);
+          handlers.setFilter(newFilter);
+        }
+      };
 
-    ReactDOM.render(
-      <DropdownFilter
-        commit={commit}
-        choices={config.choices || []}
-        initialValue={getFilterValue(filterExpression)}
-      />,
-      domNode,
-      () => handlers.done()
-    );
+      ReactDOM.render(
+        <KibanaThemeProvider theme$={theme.theme$}>
+          <DropdownFilter
+            commit={commit}
+            choices={config.choices || []}
+            initialValue={getFilterValue(filterExpression)}
+          />
+        </KibanaThemeProvider>,
+        domNode,
+        () => handlers.done()
+      );
 
-    handlers.onDestroy(() => {
-      ReactDOM.unmountComponentAtNode(domNode);
-    });
-  },
-});
+      handlers.onDestroy(() => {
+        ReactDOM.unmountComponentAtNode(domNode);
+      });
+    },
+  });
+};
diff --git a/x-pack/plugins/canvas/canvas_plugin_src/renderers/filters/index.ts b/x-pack/plugins/canvas/canvas_plugin_src/renderers/filters/index.ts
index 87c7d70230770..c6dc6504e3ba8 100644
--- a/x-pack/plugins/canvas/canvas_plugin_src/renderers/filters/index.ts
+++ b/x-pack/plugins/canvas/canvas_plugin_src/renderers/filters/index.ts
@@ -5,9 +5,13 @@
  * 2.0.
  */
 
-import { advancedFilter } from './advanced_filter';
-import { dropdownFilter } from './dropdown_filter';
+import { advancedFilterFactory } from './advanced_filter';
+import { dropdownFilterFactory } from './dropdown_filter';
 import { timeFilterFactory } from './time_filter';
 
-export const renderFunctions = [advancedFilter, dropdownFilter];
-export const renderFunctionFactories = [timeFilterFactory];
+export const renderFunctions = [];
+export const renderFunctionFactories = [
+  timeFilterFactory,
+  dropdownFilterFactory,
+  advancedFilterFactory,
+];
diff --git a/x-pack/plugins/canvas/canvas_plugin_src/renderers/filters/time_filter/index.tsx b/x-pack/plugins/canvas/canvas_plugin_src/renderers/filters/time_filter/index.tsx
index 02a36b80fa364..884f960e85558 100644
--- a/x-pack/plugins/canvas/canvas_plugin_src/renderers/filters/time_filter/index.tsx
+++ b/x-pack/plugins/canvas/canvas_plugin_src/renderers/filters/time_filter/index.tsx
@@ -9,6 +9,7 @@ import ReactDOM from 'react-dom';
 import React from 'react';
 import { toExpression } from '@kbn/interpreter/common';
 import { UI_SETTINGS } from '../../../../../../../src/plugins/data/public';
+import { KibanaThemeProvider } from '../../../../../../../src/plugins/kibana_react/public';
 import { syncFilterExpression } from '../../../../public/lib/sync_filter_expression';
 import { RendererStrings } from '../../../../i18n';
 import { TimeFilter } from './components';
@@ -22,7 +23,7 @@ const { timeFilter: strings } = RendererStrings;
 const defaultTimeFilterExpression = 'timefilter column=@timestamp from=now-24h to=now';
 
 export const timeFilterFactory: StartInitializer<RendererFactory<Arguments>> = (core, plugins) => {
-  const { uiSettings } = core;
+  const { uiSettings, theme } = core;
 
   const customQuickRanges = (uiSettings.get(UI_SETTINGS.TIMEPICKER_QUICK_RANGES) || []).map(
     ({ from, to, display }: { from: string; to: string; display: string }) => ({
@@ -59,12 +60,14 @@ export const timeFilterFactory: StartInitializer<RendererFactory<Arguments>> = (
       }
 
       ReactDOM.render(
-        <TimeFilter
-          commit={handlers.setFilter}
-          filter={filterExpression}
-          commonlyUsedRanges={customQuickRanges}
-          dateFormat={customDateFormat}
-        />,
+        <KibanaThemeProvider theme$={theme.theme$}>
+          <TimeFilter
+            commit={handlers.setFilter}
+            filter={filterExpression}
+            commonlyUsedRanges={customQuickRanges}
+            dateFormat={customDateFormat}
+          />
+        </KibanaThemeProvider>,
         domNode,
         () => handlers.done()
       );

From 509209659a1e7294bd365c94740a972c6f942cee Mon Sep 17 00:00:00 2001
From: Yaroslav Kuznietsov <kuznetsov.yaroslav.yk@gmail.com>
Date: Thu, 25 Nov 2021 18:05:08 +0200
Subject: [PATCH 04/11] Added ThemeProvider to all other places of Canvas.

---
 .../canvas_plugin_src/renderers/core.ts       | 10 ++--
 .../filters/advanced_filter/index.tsx         |  1 +
 .../renderers/markdown/index.tsx              | 47 +++++++++--------
 .../canvas_plugin_src/renderers/table.tsx     | 51 +++++++++++--------
 .../canvas_plugin_src/renderers/text.tsx      | 31 +++++++----
 x-pack/plugins/canvas/public/application.tsx  | 10 ++--
 6 files changed, 89 insertions(+), 61 deletions(-)

diff --git a/x-pack/plugins/canvas/canvas_plugin_src/renderers/core.ts b/x-pack/plugins/canvas/canvas_plugin_src/renderers/core.ts
index d7bde45f90d77..2dec5fac1ef8c 100644
--- a/x-pack/plugins/canvas/canvas_plugin_src/renderers/core.ts
+++ b/x-pack/plugins/canvas/canvas_plugin_src/renderers/core.ts
@@ -5,12 +5,12 @@
  * 2.0.
  */
 
-import { markdown } from './markdown';
+import { markdownFactory } from './markdown';
 import { pie } from './pie';
 import { plot } from './plot';
-import { text } from './text';
-import { table } from './table';
+import { textFactory } from './text';
+import { tableFactory } from './table';
 
-export const renderFunctions = [markdown, pie, plot, table, text];
+export const renderFunctions = [pie, plot];
 
-export const renderFunctionFactories = [];
+export const renderFunctionFactories = [markdownFactory, tableFactory, textFactory];
diff --git a/x-pack/plugins/canvas/canvas_plugin_src/renderers/filters/advanced_filter/index.tsx b/x-pack/plugins/canvas/canvas_plugin_src/renderers/filters/advanced_filter/index.tsx
index eb0fccf3d74ee..9eabb98516d2c 100644
--- a/x-pack/plugins/canvas/canvas_plugin_src/renderers/filters/advanced_filter/index.tsx
+++ b/x-pack/plugins/canvas/canvas_plugin_src/renderers/filters/advanced_filter/index.tsx
@@ -8,6 +8,7 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { KibanaThemeProvider } from '../../../../../../../src/plugins/kibana_react/public';
+import { StartInitializer } from '../../../plugin';
 import { RendererFactory } from '../../../../types';
 import { AdvancedFilter } from './component';
 import { RendererStrings } from '../../../../i18n';
diff --git a/x-pack/plugins/canvas/canvas_plugin_src/renderers/markdown/index.tsx b/x-pack/plugins/canvas/canvas_plugin_src/renderers/markdown/index.tsx
index 2695326c35ebc..2a2a893926799 100644
--- a/x-pack/plugins/canvas/canvas_plugin_src/renderers/markdown/index.tsx
+++ b/x-pack/plugins/canvas/canvas_plugin_src/renderers/markdown/index.tsx
@@ -7,6 +7,8 @@
 
 import React, { CSSProperties } from 'react';
 import ReactDOM from 'react-dom';
+import { KibanaThemeProvider } from '../../../../../../src/plugins/kibana_react/public';
+import { StartInitializer } from '../../plugin';
 import { RendererStrings } from '../../../i18n';
 import { Return as Config } from '../../functions/browser/markdown';
 import { Markdown } from '../../../../../../src/plugins/kibana_react/public';
@@ -14,25 +16,30 @@ import { RendererFactory } from '../../../types';
 
 const { markdown: strings } = RendererStrings;
 
-export const markdown: RendererFactory<Config> = () => ({
-  name: 'markdown',
-  displayName: strings.getDisplayName(),
-  help: strings.getHelpDescription(),
-  reuseDomNode: true,
-  render(domNode, config, handlers) {
-    const fontStyle = config.font ? config.font.spec : {};
+export const markdownFactory: StartInitializer<RendererFactory<Config>> = (core, plugins) => {
+  const { theme } = core;
+  return () => ({
+    name: 'markdown',
+    displayName: strings.getDisplayName(),
+    help: strings.getHelpDescription(),
+    reuseDomNode: true,
+    render(domNode, config, handlers) {
+      const fontStyle = config.font ? config.font.spec : {};
 
-    ReactDOM.render(
-      <Markdown
-        className="canvasMarkdown"
-        style={fontStyle as CSSProperties}
-        markdown={config.content}
-        openLinksInNewTab={config.openLinksInNewTab}
-      />,
-      domNode,
-      () => handlers.done()
-    );
+      ReactDOM.render(
+        <KibanaThemeProvider theme$={theme.theme$}>
+          <Markdown
+            className="canvasMarkdown"
+            style={fontStyle as CSSProperties}
+            markdown={config.content}
+            openLinksInNewTab={config.openLinksInNewTab}
+          />
+        </KibanaThemeProvider>,
+        domNode,
+        () => handlers.done()
+      );
 
-    handlers.onDestroy(() => ReactDOM.unmountComponentAtNode(domNode));
-  },
-});
+      handlers.onDestroy(() => ReactDOM.unmountComponentAtNode(domNode));
+    },
+  });
+};
diff --git a/x-pack/plugins/canvas/canvas_plugin_src/renderers/table.tsx b/x-pack/plugins/canvas/canvas_plugin_src/renderers/table.tsx
index 5981f2a464558..42864eeb5b63b 100644
--- a/x-pack/plugins/canvas/canvas_plugin_src/renderers/table.tsx
+++ b/x-pack/plugins/canvas/canvas_plugin_src/renderers/table.tsx
@@ -7,6 +7,8 @@
 
 import ReactDOM from 'react-dom';
 import React from 'react';
+import { KibanaThemeProvider } from '../../../../../src/plugins/kibana_react/public';
+import { StartInitializer } from '../plugin';
 import { Datatable as DatatableComponent } from '../../public/components/datatable';
 import { RendererStrings } from '../../i18n';
 import { RendererFactory, Style, Datatable } from '../../types';
@@ -21,26 +23,31 @@ export interface TableArguments {
   datatable: Datatable;
 }
 
-export const table: RendererFactory<TableArguments> = () => ({
-  name: 'table',
-  displayName: strings.getDisplayName(),
-  help: strings.getHelpDescription(),
-  reuseDomNode: true,
-  render(domNode, config, handlers) {
-    const { datatable, paginate, perPage, font = { spec: {} }, showHeader } = config;
-    ReactDOM.render(
-      <div style={{ ...(font.spec as React.CSSProperties), height: '100%' }}>
-        <DatatableComponent
-          datatable={datatable}
-          perPage={perPage}
-          paginate={paginate}
-          showHeader={showHeader}
-        />
-      </div>,
-      domNode,
-      () => handlers.done()
-    );
+export const tableFactory: StartInitializer<RendererFactory<TableArguments>> = (core, plugins) => {
+  const { theme } = core;
+  return () => ({
+    name: 'table',
+    displayName: strings.getDisplayName(),
+    help: strings.getHelpDescription(),
+    reuseDomNode: true,
+    render(domNode, config, handlers) {
+      const { datatable, paginate, perPage, font = { spec: {} }, showHeader } = config;
+      ReactDOM.render(
+        <KibanaThemeProvider theme$={theme.theme$}>
+          <div style={{ ...(font.spec as React.CSSProperties), height: '100%' }}>
+            <DatatableComponent
+              datatable={datatable}
+              perPage={perPage}
+              paginate={paginate}
+              showHeader={showHeader}
+            />
+          </div>
+        </KibanaThemeProvider>,
+        domNode,
+        () => handlers.done()
+      );
 
-    handlers.onDestroy(() => ReactDOM.unmountComponentAtNode(domNode));
-  },
-});
+      handlers.onDestroy(() => ReactDOM.unmountComponentAtNode(domNode));
+    },
+  });
+};
diff --git a/x-pack/plugins/canvas/canvas_plugin_src/renderers/text.tsx b/x-pack/plugins/canvas/canvas_plugin_src/renderers/text.tsx
index 9099387fe89a6..8c169b1fc45ad 100644
--- a/x-pack/plugins/canvas/canvas_plugin_src/renderers/text.tsx
+++ b/x-pack/plugins/canvas/canvas_plugin_src/renderers/text.tsx
@@ -7,18 +7,29 @@
 
 import ReactDOM from 'react-dom';
 import React from 'react';
+import { KibanaThemeProvider } from '../../../../../src/plugins/kibana_react/public';
+import { StartInitializer } from '../plugin';
 import { RendererStrings } from '../../i18n';
 import { RendererFactory } from '../../types';
 
 const { text: strings } = RendererStrings;
 
-export const text: RendererFactory<{ text: string }> = () => ({
-  name: 'text',
-  displayName: strings.getDisplayName(),
-  help: strings.getHelpDescription(),
-  reuseDomNode: true,
-  render(domNode, { text: textString }, handlers) {
-    ReactDOM.render(<div>{textString}</div>, domNode, () => handlers.done());
-    handlers.onDestroy(() => ReactDOM.unmountComponentAtNode(domNode));
-  },
-});
+export const textFactory: StartInitializer<RendererFactory<{ text: string }>> = (core, plugins) => {
+  const { theme } = core;
+  return () => ({
+    name: 'text',
+    displayName: strings.getDisplayName(),
+    help: strings.getHelpDescription(),
+    reuseDomNode: true,
+    render(domNode, { text: textString }, handlers) {
+      ReactDOM.render(
+        <KibanaThemeProvider theme$={theme.theme$}>
+          <div>{textString}</div>
+        </KibanaThemeProvider>,
+        domNode,
+        () => handlers.done()
+      );
+      handlers.onDestroy(() => ReactDOM.unmountComponentAtNode(domNode));
+    },
+  });
+};
diff --git a/x-pack/plugins/canvas/public/application.tsx b/x-pack/plugins/canvas/public/application.tsx
index ef8a9b8ff7b81..3410065399286 100644
--- a/x-pack/plugins/canvas/public/application.tsx
+++ b/x-pack/plugins/canvas/public/application.tsx
@@ -158,10 +158,12 @@ export const initializeCanvas = async (
     ],
     content: (domNode) => {
       ReactDOM.render(
-        <HelpMenu
-          functionRegistry={expressions.getFunctions()}
-          notifyService={canvasServices.getServices().notify}
-        />,
+        <KibanaThemeProvider theme$={coreStart.theme.theme$}>
+          <HelpMenu
+            functionRegistry={expressions.getFunctions()}
+            notifyService={canvasServices.getServices().notify}
+          />
+        </KibanaThemeProvider>,
         domNode
       );
       return () => ReactDOM.unmountComponentAtNode(domNode);

From 38095b591138e599e1753550143ba8c2133cb468 Mon Sep 17 00:00:00 2001
From: Yaroslav Kuznietsov <kuznetsov.yaroslav.yk@gmail.com>
Date: Fri, 26 Nov 2021 11:26:47 +0200
Subject: [PATCH 05/11] Fixed shareable.

---
 .../shareable_runtime/supported_renderers.js     | 16 +++++++++-------
 1 file changed, 9 insertions(+), 7 deletions(-)

diff --git a/x-pack/plugins/canvas/shareable_runtime/supported_renderers.js b/x-pack/plugins/canvas/shareable_runtime/supported_renderers.js
index e9cf74f1fba44..4d5378aa2d294 100644
--- a/x-pack/plugins/canvas/shareable_runtime/supported_renderers.js
+++ b/x-pack/plugins/canvas/shareable_runtime/supported_renderers.js
@@ -5,11 +5,11 @@
  * 2.0.
  */
 
-import { markdown } from '../canvas_plugin_src/renderers/markdown';
+import { markdownFactory } from '../canvas_plugin_src/renderers/markdown';
 import { pie } from '../canvas_plugin_src/renderers/pie';
 import { plot } from '../canvas_plugin_src/renderers/plot';
-import { table } from '../canvas_plugin_src/renderers/table';
-import { text } from '../canvas_plugin_src/renderers/text';
+import { tableFactory } from '../canvas_plugin_src/renderers/table';
+import { textFactory } from '../canvas_plugin_src/renderers/text';
 import { imageRenderer as image } from '../../../../src/plugins/expression_image/public';
 import {
   errorRenderer as error,
@@ -23,6 +23,10 @@ import {
 } from '../../../../src/plugins/expression_shape/public';
 import { metricRenderer as metric } from '../../../../src/plugins/expression_metric/public';
 
+const unboxFactory = (factory) => factory({ theme: {} });
+
+const renderFunctionsFactories = [markdownFactory, textFactory, tableFactory];
+
 /**
  * This is a collection of renderers which are bundled with the runtime.  If
  * a renderer is not listed here, but is used by the Shared Workpad, it will
@@ -34,14 +38,12 @@ export const renderFunctions = [
   image,
   repeatImage,
   revealImage,
-  markdown,
   metric,
   pie,
   plot,
   progress,
   shape,
-  table,
-  text,
+  ...renderFunctionsFactories.map(unboxFactory),
 ];
 
-export const renderFunctionNames = renderFunctions.map((fn) => fn.name);
+export const renderFunctionNames = [...renderFunctions.map((fn) => fn().name)];

From 84a055d0685950ac146f600c0a9f05fa9e50a2a7 Mon Sep 17 00:00:00 2001
From: Yaroslav Kuznietsov <kuznetsov.yaroslav.yk@gmail.com>
Date: Fri, 26 Nov 2021 17:41:39 +0200
Subject: [PATCH 06/11] Added coreStartMock to canvas.

---
 .../canvas/__fixtures__/core_dependencies.ts  | 24 +++++++++++++++++++
 .../renderers/__stories__/table.stories.tsx   |  9 ++++---
 .../filters/advanced_filter/index.tsx         |  8 +++----
 .../filters/dropdown_filter/index.tsx         |  8 +++----
 .../markdown/__stories__/markdown.stories.tsx |  5 +++-
 .../renderers/markdown/index.tsx              |  8 +++----
 .../canvas_plugin_src/renderers/table.tsx     |  9 +++----
 .../canvas_plugin_src/renderers/text.tsx      |  8 +++----
 .../shareable_runtime/supported_renderers.js  |  3 ++-
 9 files changed, 51 insertions(+), 31 deletions(-)
 create mode 100644 x-pack/plugins/canvas/__fixtures__/core_dependencies.ts

diff --git a/x-pack/plugins/canvas/__fixtures__/core_dependencies.ts b/x-pack/plugins/canvas/__fixtures__/core_dependencies.ts
new file mode 100644
index 0000000000000..fbaaef61a9c54
--- /dev/null
+++ b/x-pack/plugins/canvas/__fixtures__/core_dependencies.ts
@@ -0,0 +1,24 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { CoreStart } from '../public/plugin';
+
+export const coreStartMock = {
+  application: {},
+  chrome: {},
+  docLinks: {},
+  http: {},
+  i18n: {},
+  notifications: {},
+  overlays: {},
+  uiSettings: {},
+  savedObjects: {},
+  deprecations: {},
+  theme: {},
+  injectedMetadata: { getInjectedVar: {} },
+  fatalErrors: {},
+} as CoreStart;
diff --git a/x-pack/plugins/canvas/canvas_plugin_src/renderers/__stories__/table.stories.tsx b/x-pack/plugins/canvas/canvas_plugin_src/renderers/__stories__/table.stories.tsx
index 80c1238f4fe4a..5bbe57857965d 100644
--- a/x-pack/plugins/canvas/canvas_plugin_src/renderers/__stories__/table.stories.tsx
+++ b/x-pack/plugins/canvas/canvas_plugin_src/renderers/__stories__/table.stories.tsx
@@ -7,8 +7,10 @@
 
 import React from 'react';
 import { storiesOf } from '@storybook/react';
-import { table } from '../table';
+import { tableFactory } from '../table';
 import { Render } from './render';
+import { StartDeps } from '../../plugin';
+import { coreStartMock } from '../../../__fixtures__/core_dependencies';
 
 storiesOf('renderers/table', module).add('default', () => {
   const config = {
@@ -42,6 +44,7 @@ storiesOf('renderers/table', module).add('default', () => {
       ],
     },
   };
-
-  return <Render renderer={table} config={config} width="400px" />;
+  return (
+    <Render renderer={tableFactory(coreStartMock, {} as StartDeps)} config={config} width="400px" />
+  );
 });
diff --git a/x-pack/plugins/canvas/canvas_plugin_src/renderers/filters/advanced_filter/index.tsx b/x-pack/plugins/canvas/canvas_plugin_src/renderers/filters/advanced_filter/index.tsx
index 9eabb98516d2c..b831c9aa70e49 100644
--- a/x-pack/plugins/canvas/canvas_plugin_src/renderers/filters/advanced_filter/index.tsx
+++ b/x-pack/plugins/canvas/canvas_plugin_src/renderers/filters/advanced_filter/index.tsx
@@ -15,9 +15,8 @@ import { RendererStrings } from '../../../../i18n';
 
 const { advancedFilter: strings } = RendererStrings;
 
-export const advancedFilterFactory: StartInitializer<RendererFactory<{}>> = (core, plugins) => {
-  const { theme } = core;
-  return () => ({
+export const advancedFilterFactory: StartInitializer<RendererFactory<{}>> =
+  (core, plugins) => () => ({
     name: 'advanced_filter',
     displayName: strings.getDisplayName(),
     help: strings.getHelpDescription(),
@@ -25,7 +24,7 @@ export const advancedFilterFactory: StartInitializer<RendererFactory<{}>> = (cor
     height: 50,
     render(domNode, _, handlers) {
       ReactDOM.render(
-        <KibanaThemeProvider theme$={theme.theme$}>
+        <KibanaThemeProvider theme$={core.theme.theme$}>
           <AdvancedFilter commit={handlers.setFilter} value={handlers.getFilter()} />
         </KibanaThemeProvider>,
         domNode,
@@ -37,4 +36,3 @@ export const advancedFilterFactory: StartInitializer<RendererFactory<{}>> = (cor
       });
     },
   });
-};
diff --git a/x-pack/plugins/canvas/canvas_plugin_src/renderers/filters/dropdown_filter/index.tsx b/x-pack/plugins/canvas/canvas_plugin_src/renderers/filters/dropdown_filter/index.tsx
index 3266f9b00681f..ef470c6e6e236 100644
--- a/x-pack/plugins/canvas/canvas_plugin_src/renderers/filters/dropdown_filter/index.tsx
+++ b/x-pack/plugins/canvas/canvas_plugin_src/renderers/filters/dropdown_filter/index.tsx
@@ -40,9 +40,8 @@ const getFilterValue = (filterExpression: string) => {
   return get(filterAST, 'chain[0].arguments.value[0]', MATCH_ALL) as string;
 };
 
-export const dropdownFilterFactory: StartInitializer<RendererFactory<Config>> = (core, plugins) => {
-  const { theme } = core;
-  return () => ({
+export const dropdownFilterFactory: StartInitializer<RendererFactory<Config>> =
+  (core, plugins) => () => ({
     name: 'dropdown_filter',
     displayName: strings.getDisplayName(),
     help: strings.getHelpDescription(),
@@ -92,7 +91,7 @@ export const dropdownFilterFactory: StartInitializer<RendererFactory<Config>> =
       };
 
       ReactDOM.render(
-        <KibanaThemeProvider theme$={theme.theme$}>
+        <KibanaThemeProvider theme$={core.theme.theme$}>
           <DropdownFilter
             commit={commit}
             choices={config.choices || []}
@@ -108,4 +107,3 @@ export const dropdownFilterFactory: StartInitializer<RendererFactory<Config>> =
       });
     },
   });
-};
diff --git a/x-pack/plugins/canvas/canvas_plugin_src/renderers/markdown/__stories__/markdown.stories.tsx b/x-pack/plugins/canvas/canvas_plugin_src/renderers/markdown/__stories__/markdown.stories.tsx
index 26df880fe610d..c45a9278246da 100644
--- a/x-pack/plugins/canvas/canvas_plugin_src/renderers/markdown/__stories__/markdown.stories.tsx
+++ b/x-pack/plugins/canvas/canvas_plugin_src/renderers/markdown/__stories__/markdown.stories.tsx
@@ -7,9 +7,12 @@
 
 import React from 'react';
 import { storiesOf } from '@storybook/react';
-import { markdown } from '../';
+import { markdownFactory } from '../';
 import { Render } from '../../__stories__/render';
+import { StartDeps } from '../../../plugin';
+import { coreStartMock } from '../../../../__fixtures__/core_dependencies';
 
+const markdown = markdownFactory(coreStartMock, {} as StartDeps);
 storiesOf('renderers/markdown', module)
   .add('default', () => {
     const config = {
diff --git a/x-pack/plugins/canvas/canvas_plugin_src/renderers/markdown/index.tsx b/x-pack/plugins/canvas/canvas_plugin_src/renderers/markdown/index.tsx
index 2a2a893926799..3ec48bd03b1ad 100644
--- a/x-pack/plugins/canvas/canvas_plugin_src/renderers/markdown/index.tsx
+++ b/x-pack/plugins/canvas/canvas_plugin_src/renderers/markdown/index.tsx
@@ -16,9 +16,8 @@ import { RendererFactory } from '../../../types';
 
 const { markdown: strings } = RendererStrings;
 
-export const markdownFactory: StartInitializer<RendererFactory<Config>> = (core, plugins) => {
-  const { theme } = core;
-  return () => ({
+export const markdownFactory: StartInitializer<RendererFactory<Config>> =
+  (core, plugins) => () => ({
     name: 'markdown',
     displayName: strings.getDisplayName(),
     help: strings.getHelpDescription(),
@@ -27,7 +26,7 @@ export const markdownFactory: StartInitializer<RendererFactory<Config>> = (core,
       const fontStyle = config.font ? config.font.spec : {};
 
       ReactDOM.render(
-        <KibanaThemeProvider theme$={theme.theme$}>
+        <KibanaThemeProvider theme$={core.theme.theme$}>
           <Markdown
             className="canvasMarkdown"
             style={fontStyle as CSSProperties}
@@ -42,4 +41,3 @@ export const markdownFactory: StartInitializer<RendererFactory<Config>> = (core,
       handlers.onDestroy(() => ReactDOM.unmountComponentAtNode(domNode));
     },
   });
-};
diff --git a/x-pack/plugins/canvas/canvas_plugin_src/renderers/table.tsx b/x-pack/plugins/canvas/canvas_plugin_src/renderers/table.tsx
index 42864eeb5b63b..d8ead3fed7a27 100644
--- a/x-pack/plugins/canvas/canvas_plugin_src/renderers/table.tsx
+++ b/x-pack/plugins/canvas/canvas_plugin_src/renderers/table.tsx
@@ -14,7 +14,6 @@ import { RendererStrings } from '../../i18n';
 import { RendererFactory, Style, Datatable } from '../../types';
 
 const { dropdownFilter: strings } = RendererStrings;
-
 export interface TableArguments {
   font?: Style;
   paginate: boolean;
@@ -23,9 +22,8 @@ export interface TableArguments {
   datatable: Datatable;
 }
 
-export const tableFactory: StartInitializer<RendererFactory<TableArguments>> = (core, plugins) => {
-  const { theme } = core;
-  return () => ({
+export const tableFactory: StartInitializer<RendererFactory<TableArguments>> =
+  (core, plugins) => () => ({
     name: 'table',
     displayName: strings.getDisplayName(),
     help: strings.getHelpDescription(),
@@ -33,7 +31,7 @@ export const tableFactory: StartInitializer<RendererFactory<TableArguments>> = (
     render(domNode, config, handlers) {
       const { datatable, paginate, perPage, font = { spec: {} }, showHeader } = config;
       ReactDOM.render(
-        <KibanaThemeProvider theme$={theme.theme$}>
+        <KibanaThemeProvider theme$={core.theme.theme$}>
           <div style={{ ...(font.spec as React.CSSProperties), height: '100%' }}>
             <DatatableComponent
               datatable={datatable}
@@ -50,4 +48,3 @@ export const tableFactory: StartInitializer<RendererFactory<TableArguments>> = (
       handlers.onDestroy(() => ReactDOM.unmountComponentAtNode(domNode));
     },
   });
-};
diff --git a/x-pack/plugins/canvas/canvas_plugin_src/renderers/text.tsx b/x-pack/plugins/canvas/canvas_plugin_src/renderers/text.tsx
index 8c169b1fc45ad..33f1c7c8cfad2 100644
--- a/x-pack/plugins/canvas/canvas_plugin_src/renderers/text.tsx
+++ b/x-pack/plugins/canvas/canvas_plugin_src/renderers/text.tsx
@@ -14,16 +14,15 @@ import { RendererFactory } from '../../types';
 
 const { text: strings } = RendererStrings;
 
-export const textFactory: StartInitializer<RendererFactory<{ text: string }>> = (core, plugins) => {
-  const { theme } = core;
-  return () => ({
+export const textFactory: StartInitializer<RendererFactory<{ text: string }>> =
+  (core, plugins) => () => ({
     name: 'text',
     displayName: strings.getDisplayName(),
     help: strings.getHelpDescription(),
     reuseDomNode: true,
     render(domNode, { text: textString }, handlers) {
       ReactDOM.render(
-        <KibanaThemeProvider theme$={theme.theme$}>
+        <KibanaThemeProvider theme$={core.theme.theme$}>
           <div>{textString}</div>
         </KibanaThemeProvider>,
         domNode,
@@ -32,4 +31,3 @@ export const textFactory: StartInitializer<RendererFactory<{ text: string }>> =
       handlers.onDestroy(() => ReactDOM.unmountComponentAtNode(domNode));
     },
   });
-};
diff --git a/x-pack/plugins/canvas/shareable_runtime/supported_renderers.js b/x-pack/plugins/canvas/shareable_runtime/supported_renderers.js
index 4d5378aa2d294..8ec0fc86c0057 100644
--- a/x-pack/plugins/canvas/shareable_runtime/supported_renderers.js
+++ b/x-pack/plugins/canvas/shareable_runtime/supported_renderers.js
@@ -22,8 +22,9 @@ import {
   progressRenderer as progress,
 } from '../../../../src/plugins/expression_shape/public';
 import { metricRenderer as metric } from '../../../../src/plugins/expression_metric/public';
+import { coreStartMock } from '../__fixtures__/core_dependencies';
 
-const unboxFactory = (factory) => factory({ theme: {} });
+const unboxFactory = (factory) => factory(coreStartMock, {});
 
 const renderFunctionsFactories = [markdownFactory, textFactory, tableFactory];
 

From e65f51ac9f00d15b23a8860a85303f8209fc096e Mon Sep 17 00:00:00 2001
From: Yaroslav Kuznietsov <kuznetsov.yaroslav.yk@gmail.com>
Date: Fri, 26 Nov 2021 18:20:33 +0200
Subject: [PATCH 07/11] Refactored supported_renderers to handle renderers,
 which requires themes.

---
 .../canvas/__fixtures__/core_dependencies.ts  | 24 -------------------
 .../renderers/__stories__/table.stories.tsx   |  8 ++-----
 .../markdown/__stories__/markdown.stories.tsx |  6 ++---
 .../renderers/markdown/index.tsx              | 13 +++++++---
 .../canvas_plugin_src/renderers/table.tsx     | 14 +++++++----
 .../canvas_plugin_src/renderers/text.tsx      | 13 +++++++---
 .../canvas/public/lib/default_theme.ts        | 12 ++++++++++
 .../shareable_runtime/supported_renderers.js  | 11 ++++-----
 8 files changed, 51 insertions(+), 50 deletions(-)
 delete mode 100644 x-pack/plugins/canvas/__fixtures__/core_dependencies.ts
 create mode 100644 x-pack/plugins/canvas/public/lib/default_theme.ts

diff --git a/x-pack/plugins/canvas/__fixtures__/core_dependencies.ts b/x-pack/plugins/canvas/__fixtures__/core_dependencies.ts
deleted file mode 100644
index fbaaef61a9c54..0000000000000
--- a/x-pack/plugins/canvas/__fixtures__/core_dependencies.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the Elastic License
- * 2.0; you may not use this file except in compliance with the Elastic License
- * 2.0.
- */
-
-import { CoreStart } from '../public/plugin';
-
-export const coreStartMock = {
-  application: {},
-  chrome: {},
-  docLinks: {},
-  http: {},
-  i18n: {},
-  notifications: {},
-  overlays: {},
-  uiSettings: {},
-  savedObjects: {},
-  deprecations: {},
-  theme: {},
-  injectedMetadata: { getInjectedVar: {} },
-  fatalErrors: {},
-} as CoreStart;
diff --git a/x-pack/plugins/canvas/canvas_plugin_src/renderers/__stories__/table.stories.tsx b/x-pack/plugins/canvas/canvas_plugin_src/renderers/__stories__/table.stories.tsx
index 5bbe57857965d..ee680e45037f7 100644
--- a/x-pack/plugins/canvas/canvas_plugin_src/renderers/__stories__/table.stories.tsx
+++ b/x-pack/plugins/canvas/canvas_plugin_src/renderers/__stories__/table.stories.tsx
@@ -7,10 +7,8 @@
 
 import React from 'react';
 import { storiesOf } from '@storybook/react';
-import { tableFactory } from '../table';
+import { getTableFn } from '../table';
 import { Render } from './render';
-import { StartDeps } from '../../plugin';
-import { coreStartMock } from '../../../__fixtures__/core_dependencies';
 
 storiesOf('renderers/table', module).add('default', () => {
   const config = {
@@ -44,7 +42,5 @@ storiesOf('renderers/table', module).add('default', () => {
       ],
     },
   };
-  return (
-    <Render renderer={tableFactory(coreStartMock, {} as StartDeps)} config={config} width="400px" />
-  );
+  return <Render renderer={getTableFn()} config={config} width="400px" />;
 });
diff --git a/x-pack/plugins/canvas/canvas_plugin_src/renderers/markdown/__stories__/markdown.stories.tsx b/x-pack/plugins/canvas/canvas_plugin_src/renderers/markdown/__stories__/markdown.stories.tsx
index c45a9278246da..dc2045d5f88a2 100644
--- a/x-pack/plugins/canvas/canvas_plugin_src/renderers/markdown/__stories__/markdown.stories.tsx
+++ b/x-pack/plugins/canvas/canvas_plugin_src/renderers/markdown/__stories__/markdown.stories.tsx
@@ -7,12 +7,10 @@
 
 import React from 'react';
 import { storiesOf } from '@storybook/react';
-import { markdownFactory } from '../';
+import { getMarkdownFn } from '../';
 import { Render } from '../../__stories__/render';
-import { StartDeps } from '../../../plugin';
-import { coreStartMock } from '../../../../__fixtures__/core_dependencies';
 
-const markdown = markdownFactory(coreStartMock, {} as StartDeps);
+const markdown = getMarkdownFn();
 storiesOf('renderers/markdown', module)
   .add('default', () => {
     const config = {
diff --git a/x-pack/plugins/canvas/canvas_plugin_src/renderers/markdown/index.tsx b/x-pack/plugins/canvas/canvas_plugin_src/renderers/markdown/index.tsx
index 3ec48bd03b1ad..ceb84de66bca4 100644
--- a/x-pack/plugins/canvas/canvas_plugin_src/renderers/markdown/index.tsx
+++ b/x-pack/plugins/canvas/canvas_plugin_src/renderers/markdown/index.tsx
@@ -7,17 +7,21 @@
 
 import React, { CSSProperties } from 'react';
 import ReactDOM from 'react-dom';
+import { CoreTheme } from 'kibana/public';
+import { Observable } from 'rxjs';
 import { KibanaThemeProvider } from '../../../../../../src/plugins/kibana_react/public';
 import { StartInitializer } from '../../plugin';
 import { RendererStrings } from '../../../i18n';
 import { Return as Config } from '../../functions/browser/markdown';
 import { Markdown } from '../../../../../../src/plugins/kibana_react/public';
 import { RendererFactory } from '../../../types';
+import { defaultTheme$ } from '../../../public/lib/default_theme';
 
 const { markdown: strings } = RendererStrings;
 
-export const markdownFactory: StartInitializer<RendererFactory<Config>> =
-  (core, plugins) => () => ({
+export const getMarkdownFn =
+  (theme$: Observable<CoreTheme> = defaultTheme$): RendererFactory<Config> =>
+  () => ({
     name: 'markdown',
     displayName: strings.getDisplayName(),
     help: strings.getHelpDescription(),
@@ -26,7 +30,7 @@ export const markdownFactory: StartInitializer<RendererFactory<Config>> =
       const fontStyle = config.font ? config.font.spec : {};
 
       ReactDOM.render(
-        <KibanaThemeProvider theme$={core.theme.theme$}>
+        <KibanaThemeProvider theme$={theme$}>
           <Markdown
             className="canvasMarkdown"
             style={fontStyle as CSSProperties}
@@ -41,3 +45,6 @@ export const markdownFactory: StartInitializer<RendererFactory<Config>> =
       handlers.onDestroy(() => ReactDOM.unmountComponentAtNode(domNode));
     },
   });
+
+export const markdownFactory: StartInitializer<RendererFactory<Config>> = (core, plugins) =>
+  getMarkdownFn(core.theme.theme$);
diff --git a/x-pack/plugins/canvas/canvas_plugin_src/renderers/table.tsx b/x-pack/plugins/canvas/canvas_plugin_src/renderers/table.tsx
index d8ead3fed7a27..bd40f69f9b19b 100644
--- a/x-pack/plugins/canvas/canvas_plugin_src/renderers/table.tsx
+++ b/x-pack/plugins/canvas/canvas_plugin_src/renderers/table.tsx
@@ -7,11 +7,14 @@
 
 import ReactDOM from 'react-dom';
 import React from 'react';
+import { CoreTheme } from 'kibana/public';
+import { Observable } from 'rxjs';
 import { KibanaThemeProvider } from '../../../../../src/plugins/kibana_react/public';
 import { StartInitializer } from '../plugin';
 import { Datatable as DatatableComponent } from '../../public/components/datatable';
 import { RendererStrings } from '../../i18n';
 import { RendererFactory, Style, Datatable } from '../../types';
+import { defaultTheme$ } from '../../public/lib/default_theme';
 
 const { dropdownFilter: strings } = RendererStrings;
 export interface TableArguments {
@@ -22,8 +25,9 @@ export interface TableArguments {
   datatable: Datatable;
 }
 
-export const tableFactory: StartInitializer<RendererFactory<TableArguments>> =
-  (core, plugins) => () => ({
+export const getTableFn =
+  (theme$: Observable<CoreTheme> = defaultTheme$): RendererFactory<TableArguments> =>
+  () => ({
     name: 'table',
     displayName: strings.getDisplayName(),
     help: strings.getHelpDescription(),
@@ -31,7 +35,7 @@ export const tableFactory: StartInitializer<RendererFactory<TableArguments>> =
     render(domNode, config, handlers) {
       const { datatable, paginate, perPage, font = { spec: {} }, showHeader } = config;
       ReactDOM.render(
-        <KibanaThemeProvider theme$={core.theme.theme$}>
+        <KibanaThemeProvider theme$={theme$}>
           <div style={{ ...(font.spec as React.CSSProperties), height: '100%' }}>
             <DatatableComponent
               datatable={datatable}
@@ -44,7 +48,9 @@ export const tableFactory: StartInitializer<RendererFactory<TableArguments>> =
         domNode,
         () => handlers.done()
       );
-
       handlers.onDestroy(() => ReactDOM.unmountComponentAtNode(domNode));
     },
   });
+
+export const tableFactory: StartInitializer<RendererFactory<TableArguments>> = (core, plugins) =>
+  getTableFn(core.theme.theme$);
diff --git a/x-pack/plugins/canvas/canvas_plugin_src/renderers/text.tsx b/x-pack/plugins/canvas/canvas_plugin_src/renderers/text.tsx
index 33f1c7c8cfad2..f7cb0794ba890 100644
--- a/x-pack/plugins/canvas/canvas_plugin_src/renderers/text.tsx
+++ b/x-pack/plugins/canvas/canvas_plugin_src/renderers/text.tsx
@@ -7,22 +7,26 @@
 
 import ReactDOM from 'react-dom';
 import React from 'react';
+import { CoreTheme } from 'kibana/public';
+import { Observable } from 'rxjs';
 import { KibanaThemeProvider } from '../../../../../src/plugins/kibana_react/public';
 import { StartInitializer } from '../plugin';
 import { RendererStrings } from '../../i18n';
 import { RendererFactory } from '../../types';
+import { defaultTheme$ } from '../../public/lib/default_theme';
 
 const { text: strings } = RendererStrings;
 
-export const textFactory: StartInitializer<RendererFactory<{ text: string }>> =
-  (core, plugins) => () => ({
+export const getTextFn =
+  (theme$: Observable<CoreTheme> = defaultTheme$): RendererFactory<{ text: string }> =>
+  () => ({
     name: 'text',
     displayName: strings.getDisplayName(),
     help: strings.getHelpDescription(),
     reuseDomNode: true,
     render(domNode, { text: textString }, handlers) {
       ReactDOM.render(
-        <KibanaThemeProvider theme$={core.theme.theme$}>
+        <KibanaThemeProvider theme$={theme$}>
           <div>{textString}</div>
         </KibanaThemeProvider>,
         domNode,
@@ -31,3 +35,6 @@ export const textFactory: StartInitializer<RendererFactory<{ text: string }>> =
       handlers.onDestroy(() => ReactDOM.unmountComponentAtNode(domNode));
     },
   });
+
+export const textFactory: StartInitializer<RendererFactory<{ text: string }>> = (core, plugins) =>
+  getTextFn(core.theme.theme$);
diff --git a/x-pack/plugins/canvas/public/lib/default_theme.ts b/x-pack/plugins/canvas/public/lib/default_theme.ts
new file mode 100644
index 0000000000000..5256ba81c9b8a
--- /dev/null
+++ b/x-pack/plugins/canvas/public/lib/default_theme.ts
@@ -0,0 +1,12 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+import { CoreTheme } from 'kibana/public';
+import { Observable } from 'rxjs';
+
+export const defaultTheme$: Observable<CoreTheme> = new Observable((subscriber) =>
+  subscriber.next({ darkMode: false })
+);
diff --git a/x-pack/plugins/canvas/shareable_runtime/supported_renderers.js b/x-pack/plugins/canvas/shareable_runtime/supported_renderers.js
index 8ec0fc86c0057..8e26a717143d7 100644
--- a/x-pack/plugins/canvas/shareable_runtime/supported_renderers.js
+++ b/x-pack/plugins/canvas/shareable_runtime/supported_renderers.js
@@ -5,11 +5,11 @@
  * 2.0.
  */
 
-import { markdownFactory } from '../canvas_plugin_src/renderers/markdown';
+import { getMarkdownFn } from '../canvas_plugin_src/renderers/markdown';
 import { pie } from '../canvas_plugin_src/renderers/pie';
 import { plot } from '../canvas_plugin_src/renderers/plot';
-import { tableFactory } from '../canvas_plugin_src/renderers/table';
-import { textFactory } from '../canvas_plugin_src/renderers/text';
+import { getTableFn } from '../canvas_plugin_src/renderers/table';
+import { getTextFn } from '../canvas_plugin_src/renderers/text';
 import { imageRenderer as image } from '../../../../src/plugins/expression_image/public';
 import {
   errorRenderer as error,
@@ -22,11 +22,10 @@ import {
   progressRenderer as progress,
 } from '../../../../src/plugins/expression_shape/public';
 import { metricRenderer as metric } from '../../../../src/plugins/expression_metric/public';
-import { coreStartMock } from '../__fixtures__/core_dependencies';
 
-const unboxFactory = (factory) => factory(coreStartMock, {});
+const unboxFactory = (factory) => factory();
 
-const renderFunctionsFactories = [markdownFactory, textFactory, tableFactory];
+const renderFunctionsFactories = [getMarkdownFn, getTextFn, getTableFn];
 
 /**
  * This is a collection of renderers which are bundled with the runtime.  If

From d2ebf50ef24dd27be695b2be376c6f5fdc660311 Mon Sep 17 00:00:00 2001
From: Yaroslav Kuznietsov <kuznetsov.yaroslav.yk@gmail.com>
Date: Wed, 1 Dec 2021 09:45:34 +0200
Subject: [PATCH 08/11] Renamed get_FN to get_Renderer.

---
 .../renderers/__stories__/table.stories.tsx               | 4 ++--
 .../renderers/markdown/__stories__/markdown.stories.tsx   | 4 ++--
 .../canvas/canvas_plugin_src/renderers/markdown/index.tsx | 4 ++--
 .../plugins/canvas/canvas_plugin_src/renderers/table.tsx  | 4 ++--
 .../plugins/canvas/canvas_plugin_src/renderers/text.tsx   | 4 ++--
 .../canvas/shareable_runtime/supported_renderers.js       | 8 ++++----
 6 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/x-pack/plugins/canvas/canvas_plugin_src/renderers/__stories__/table.stories.tsx b/x-pack/plugins/canvas/canvas_plugin_src/renderers/__stories__/table.stories.tsx
index ee680e45037f7..6d7539fec5b39 100644
--- a/x-pack/plugins/canvas/canvas_plugin_src/renderers/__stories__/table.stories.tsx
+++ b/x-pack/plugins/canvas/canvas_plugin_src/renderers/__stories__/table.stories.tsx
@@ -7,7 +7,7 @@
 
 import React from 'react';
 import { storiesOf } from '@storybook/react';
-import { getTableFn } from '../table';
+import { getTableRenderer } from '../table';
 import { Render } from './render';
 
 storiesOf('renderers/table', module).add('default', () => {
@@ -42,5 +42,5 @@ storiesOf('renderers/table', module).add('default', () => {
       ],
     },
   };
-  return <Render renderer={getTableFn()} config={config} width="400px" />;
+  return <Render renderer={getTableRenderer()} config={config} width="400px" />;
 });
diff --git a/x-pack/plugins/canvas/canvas_plugin_src/renderers/markdown/__stories__/markdown.stories.tsx b/x-pack/plugins/canvas/canvas_plugin_src/renderers/markdown/__stories__/markdown.stories.tsx
index dc2045d5f88a2..c41cdce77b1ed 100644
--- a/x-pack/plugins/canvas/canvas_plugin_src/renderers/markdown/__stories__/markdown.stories.tsx
+++ b/x-pack/plugins/canvas/canvas_plugin_src/renderers/markdown/__stories__/markdown.stories.tsx
@@ -7,10 +7,10 @@
 
 import React from 'react';
 import { storiesOf } from '@storybook/react';
-import { getMarkdownFn } from '../';
+import { getMarkdownRenderer } from '../';
 import { Render } from '../../__stories__/render';
 
-const markdown = getMarkdownFn();
+const markdown = getMarkdownRenderer();
 storiesOf('renderers/markdown', module)
   .add('default', () => {
     const config = {
diff --git a/x-pack/plugins/canvas/canvas_plugin_src/renderers/markdown/index.tsx b/x-pack/plugins/canvas/canvas_plugin_src/renderers/markdown/index.tsx
index ceb84de66bca4..bc9748fa8f6ab 100644
--- a/x-pack/plugins/canvas/canvas_plugin_src/renderers/markdown/index.tsx
+++ b/x-pack/plugins/canvas/canvas_plugin_src/renderers/markdown/index.tsx
@@ -19,7 +19,7 @@ import { defaultTheme$ } from '../../../public/lib/default_theme';
 
 const { markdown: strings } = RendererStrings;
 
-export const getMarkdownFn =
+export const getMarkdownRenderer =
   (theme$: Observable<CoreTheme> = defaultTheme$): RendererFactory<Config> =>
   () => ({
     name: 'markdown',
@@ -47,4 +47,4 @@ export const getMarkdownFn =
   });
 
 export const markdownFactory: StartInitializer<RendererFactory<Config>> = (core, plugins) =>
-  getMarkdownFn(core.theme.theme$);
+  getMarkdownRenderer(core.theme.theme$);
diff --git a/x-pack/plugins/canvas/canvas_plugin_src/renderers/table.tsx b/x-pack/plugins/canvas/canvas_plugin_src/renderers/table.tsx
index bd40f69f9b19b..3af0fe00f2465 100644
--- a/x-pack/plugins/canvas/canvas_plugin_src/renderers/table.tsx
+++ b/x-pack/plugins/canvas/canvas_plugin_src/renderers/table.tsx
@@ -25,7 +25,7 @@ export interface TableArguments {
   datatable: Datatable;
 }
 
-export const getTableFn =
+export const getTableRenderer =
   (theme$: Observable<CoreTheme> = defaultTheme$): RendererFactory<TableArguments> =>
   () => ({
     name: 'table',
@@ -53,4 +53,4 @@ export const getTableFn =
   });
 
 export const tableFactory: StartInitializer<RendererFactory<TableArguments>> = (core, plugins) =>
-  getTableFn(core.theme.theme$);
+  getTableRenderer(core.theme.theme$);
diff --git a/x-pack/plugins/canvas/canvas_plugin_src/renderers/text.tsx b/x-pack/plugins/canvas/canvas_plugin_src/renderers/text.tsx
index f7cb0794ba890..3bc62d888e02f 100644
--- a/x-pack/plugins/canvas/canvas_plugin_src/renderers/text.tsx
+++ b/x-pack/plugins/canvas/canvas_plugin_src/renderers/text.tsx
@@ -17,7 +17,7 @@ import { defaultTheme$ } from '../../public/lib/default_theme';
 
 const { text: strings } = RendererStrings;
 
-export const getTextFn =
+export const getTextRenderer =
   (theme$: Observable<CoreTheme> = defaultTheme$): RendererFactory<{ text: string }> =>
   () => ({
     name: 'text',
@@ -37,4 +37,4 @@ export const getTextFn =
   });
 
 export const textFactory: StartInitializer<RendererFactory<{ text: string }>> = (core, plugins) =>
-  getTextFn(core.theme.theme$);
+  getTextRenderer(core.theme.theme$);
diff --git a/x-pack/plugins/canvas/shareable_runtime/supported_renderers.js b/x-pack/plugins/canvas/shareable_runtime/supported_renderers.js
index 8e26a717143d7..db61cfaf86c51 100644
--- a/x-pack/plugins/canvas/shareable_runtime/supported_renderers.js
+++ b/x-pack/plugins/canvas/shareable_runtime/supported_renderers.js
@@ -5,11 +5,11 @@
  * 2.0.
  */
 
-import { getMarkdownFn } from '../canvas_plugin_src/renderers/markdown';
+import { getMarkdownRenderer } from '../canvas_plugin_src/renderers/markdown';
 import { pie } from '../canvas_plugin_src/renderers/pie';
 import { plot } from '../canvas_plugin_src/renderers/plot';
-import { getTableFn } from '../canvas_plugin_src/renderers/table';
-import { getTextFn } from '../canvas_plugin_src/renderers/text';
+import { getTableRenderer } from '../canvas_plugin_src/renderers/table';
+import { getTextRenderer } from '../canvas_plugin_src/renderers/text';
 import { imageRenderer as image } from '../../../../src/plugins/expression_image/public';
 import {
   errorRenderer as error,
@@ -25,7 +25,7 @@ import { metricRenderer as metric } from '../../../../src/plugins/expression_met
 
 const unboxFactory = (factory) => factory();
 
-const renderFunctionsFactories = [getMarkdownFn, getTextFn, getTableFn];
+const renderFunctionsFactories = [getMarkdownRenderer, getTextRenderer, getTableRenderer];
 
 /**
  * This is a collection of renderers which are bundled with the runtime.  If

From 062a6b071d92b764f7fe9db1889c75ac83a640e5 Mon Sep 17 00:00:00 2001
From: Yaroslav Kuznietsov <kuznetsov.yaroslav.yk@gmail.com>
Date: Wed, 1 Dec 2021 11:34:48 +0200
Subject: [PATCH 09/11] Wrapped up debug and error with KibanaThemeProvider.

1. Replaced renderer with getRenderer function and factory.
2. Updated storybook.
3. Moved defaultTheme$ to presentain_util.
---
 .../__stories__/error_renderer.stories.tsx    |  4 +-
 .../expression_renderers/debug_renderer.tsx   | 35 ++++++++----
 .../expression_renderers/error_renderer.tsx   | 55 +++++++++++--------
 .../public/expression_renderers/index.ts      |  9 +--
 src/plugins/expression_error/public/plugin.ts |  6 +-
 .../common/lib/utils}/default_theme.ts        |  6 +-
 .../common/lib/utils/index.ts                 |  1 +
 .../canvas_plugin_src/renderers/external.ts   |  9 +--
 .../renderers/markdown/index.tsx              |  2 +-
 .../canvas_plugin_src/renderers/table.tsx     |  2 +-
 .../canvas_plugin_src/renderers/text.tsx      |  2 +-
 .../shareable_runtime/supported_renderers.js  | 14 +++--
 12 files changed, 89 insertions(+), 56 deletions(-)
 rename {x-pack/plugins/canvas/public/lib => src/plugins/presentation_util/common/lib/utils}/default_theme.ts (66%)

diff --git a/src/plugins/expression_error/public/expression_renderers/__stories__/error_renderer.stories.tsx b/src/plugins/expression_error/public/expression_renderers/__stories__/error_renderer.stories.tsx
index 9081a8512c11a..378e22f834e1d 100644
--- a/src/plugins/expression_error/public/expression_renderers/__stories__/error_renderer.stories.tsx
+++ b/src/plugins/expression_error/public/expression_renderers/__stories__/error_renderer.stories.tsx
@@ -8,7 +8,7 @@
 
 import React from 'react';
 import { storiesOf } from '@storybook/react';
-import { errorRenderer } from '../error_renderer';
+import { getErrorRenderer } from '../error_renderer';
 import { Render } from '../../../../presentation_util/public/__stories__';
 
 storiesOf('renderers/error', module).add('default', () => {
@@ -16,5 +16,5 @@ storiesOf('renderers/error', module).add('default', () => {
   const config = {
     error: thrownError,
   };
-  return <Render renderer={errorRenderer} config={config} />;
+  return <Render renderer={getErrorRenderer()} config={config} />;
 });
diff --git a/src/plugins/expression_error/public/expression_renderers/debug_renderer.tsx b/src/plugins/expression_error/public/expression_renderers/debug_renderer.tsx
index e3cf86b67148f..d4c74a9c646e7 100644
--- a/src/plugins/expression_error/public/expression_renderers/debug_renderer.tsx
+++ b/src/plugins/expression_error/public/expression_renderers/debug_renderer.tsx
@@ -8,9 +8,13 @@
 
 import { render, unmountComponentAtNode } from 'react-dom';
 import React from 'react';
+import { Observable } from 'rxjs';
+import { CoreTheme } from 'kibana/public';
 import { ExpressionRenderDefinition } from 'src/plugins/expressions/common';
 import { i18n } from '@kbn/i18n';
-import { withSuspense } from '../../../../../src/plugins/presentation_util/public';
+import { CoreSetup } from '../../../../core/public';
+import { KibanaThemeProvider } from '../../../kibana_react/public';
+import { withSuspense, defaultTheme$ } from '../../../../../src/plugins/presentation_util/public';
 import { LazyDebugRenderComponent } from '../components';
 import { JSON } from '../../common';
 
@@ -30,13 +34,22 @@ const strings = {
     }),
 };
 
-export const debugRenderer = (): ExpressionRenderDefinition<any> => ({
-  name: 'debug',
-  displayName: strings.getDisplayName(),
-  help: strings.getHelpDescription(),
-  reuseDomNode: true,
-  render(domNode, config, handlers) {
-    handlers.onDestroy(() => unmountComponentAtNode(domNode));
-    render(<Debug parentNode={domNode} payload={config} onLoaded={handlers.done} />, domNode);
-  },
-});
+export const getDebugRenderer =
+  (theme$: Observable<CoreTheme> = defaultTheme$) =>
+  (): ExpressionRenderDefinition<any> => ({
+    name: 'debug',
+    displayName: strings.getDisplayName(),
+    help: strings.getHelpDescription(),
+    reuseDomNode: true,
+    render(domNode, config, handlers) {
+      handlers.onDestroy(() => unmountComponentAtNode(domNode));
+      render(
+        <KibanaThemeProvider theme$={theme$}>
+          <Debug parentNode={domNode} payload={config} onLoaded={handlers.done} />
+        </KibanaThemeProvider>,
+        domNode
+      );
+    },
+  });
+
+export const debugRendererFactory = (core: CoreSetup) => getDebugRenderer(core.theme.theme$);
diff --git a/src/plugins/expression_error/public/expression_renderers/error_renderer.tsx b/src/plugins/expression_error/public/expression_renderers/error_renderer.tsx
index f0fbed22f38a0..65847a18d4e0a 100644
--- a/src/plugins/expression_error/public/expression_renderers/error_renderer.tsx
+++ b/src/plugins/expression_error/public/expression_renderers/error_renderer.tsx
@@ -5,12 +5,17 @@
  * in compliance with, at your election, the Elastic License 2.0 or the Server
  * Side Public License, v 1.
  */
+
 import React from 'react';
 import { render, unmountComponentAtNode } from 'react-dom';
+import { Observable } from 'rxjs';
+import { CoreTheme } from 'kibana/public';
 import { I18nProvider } from '@kbn/i18n-react';
 import { i18n } from '@kbn/i18n';
 import { ExpressionRenderDefinition, IInterpreterRenderHandlers } from 'src/plugins/expressions';
-import { withSuspense } from '../../../presentation_util/public';
+import { CoreSetup } from '../../../../core/public';
+import { KibanaThemeProvider } from '../../../kibana_react/public';
+import { withSuspense, defaultTheme$ } from '../../../presentation_util/public';
 import { ErrorRendererConfig } from '../../common/types';
 import { LazyErrorRenderComponent } from '../components';
 
@@ -27,25 +32,31 @@ const errorStrings = {
 
 const ErrorComponent = withSuspense(LazyErrorRenderComponent);
 
-export const errorRenderer = (): ExpressionRenderDefinition<ErrorRendererConfig> => ({
-  name: 'error',
-  displayName: errorStrings.getDisplayName(),
-  help: errorStrings.getHelpDescription(),
-  reuseDomNode: true,
-  render: async (
-    domNode: HTMLElement,
-    config: ErrorRendererConfig,
-    handlers: IInterpreterRenderHandlers
-  ) => {
-    handlers.onDestroy(() => {
-      unmountComponentAtNode(domNode);
-    });
+export const getErrorRenderer =
+  (theme$: Observable<CoreTheme> = defaultTheme$) =>
+  (): ExpressionRenderDefinition<ErrorRendererConfig> => ({
+    name: 'error',
+    displayName: errorStrings.getDisplayName(),
+    help: errorStrings.getHelpDescription(),
+    reuseDomNode: true,
+    render: async (
+      domNode: HTMLElement,
+      config: ErrorRendererConfig,
+      handlers: IInterpreterRenderHandlers
+    ) => {
+      handlers.onDestroy(() => {
+        unmountComponentAtNode(domNode);
+      });
+
+      render(
+        <KibanaThemeProvider theme$={theme$}>
+          <I18nProvider>
+            <ErrorComponent onLoaded={handlers.done} {...config} parentNode={domNode} />
+          </I18nProvider>
+        </KibanaThemeProvider>,
+        domNode
+      );
+    },
+  });
 
-    render(
-      <I18nProvider>
-        <ErrorComponent onLoaded={handlers.done} {...config} parentNode={domNode} />
-      </I18nProvider>,
-      domNode
-    );
-  },
-});
+export const errorRendererFactory = (core: CoreSetup) => getErrorRenderer(core.theme.theme$);
diff --git a/src/plugins/expression_error/public/expression_renderers/index.ts b/src/plugins/expression_error/public/expression_renderers/index.ts
index 237ee5644cdc0..659c74291da31 100644
--- a/src/plugins/expression_error/public/expression_renderers/index.ts
+++ b/src/plugins/expression_error/public/expression_renderers/index.ts
@@ -6,9 +6,10 @@
  * Side Public License, v 1.
  */
 
-import { errorRenderer } from './error_renderer';
-import { debugRenderer } from './debug_renderer';
+import { getErrorRenderer, errorRendererFactory } from './error_renderer';
+import { getDebugRenderer, debugRendererFactory } from './debug_renderer';
 
-export const renderers = [errorRenderer, debugRenderer];
+export const renderers = [getErrorRenderer, getDebugRenderer];
+export const rendererFactories = [errorRendererFactory, debugRendererFactory];
 
-export { errorRenderer, debugRenderer };
+export { errorRendererFactory, getErrorRenderer, debugRendererFactory, getDebugRenderer };
diff --git a/src/plugins/expression_error/public/plugin.ts b/src/plugins/expression_error/public/plugin.ts
index 0b82ccf5d2dba..de3793b6a30ae 100755
--- a/src/plugins/expression_error/public/plugin.ts
+++ b/src/plugins/expression_error/public/plugin.ts
@@ -8,7 +8,7 @@
 
 import { CoreSetup, CoreStart, Plugin } from '../../../core/public';
 import { ExpressionsStart, ExpressionsSetup } from '../../expressions/public';
-import { errorRenderer, debugRenderer } from './expression_renderers';
+import { debugRendererFactory, errorRendererFactory } from './expression_renderers';
 
 interface SetupDeps {
   expressions: ExpressionsSetup;
@@ -25,8 +25,8 @@ export class ExpressionErrorPlugin
   implements Plugin<ExpressionErrorPluginSetup, ExpressionErrorPluginStart, SetupDeps, StartDeps>
 {
   public setup(core: CoreSetup, { expressions }: SetupDeps): ExpressionErrorPluginSetup {
-    expressions.registerRenderer(errorRenderer);
-    expressions.registerRenderer(debugRenderer);
+    expressions.registerRenderer(errorRendererFactory(core));
+    expressions.registerRenderer(debugRendererFactory(core));
   }
 
   public start(core: CoreStart): ExpressionErrorPluginStart {}
diff --git a/x-pack/plugins/canvas/public/lib/default_theme.ts b/src/plugins/presentation_util/common/lib/utils/default_theme.ts
similarity index 66%
rename from x-pack/plugins/canvas/public/lib/default_theme.ts
rename to src/plugins/presentation_util/common/lib/utils/default_theme.ts
index 5256ba81c9b8a..c403937016ec8 100644
--- a/x-pack/plugins/canvas/public/lib/default_theme.ts
+++ b/src/plugins/presentation_util/common/lib/utils/default_theme.ts
@@ -1,9 +1,11 @@
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
- * 2.0; you may not use this file except in compliance with the Elastic License
- * 2.0.
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
  */
+
 import { CoreTheme } from 'kibana/public';
 import { Observable } from 'rxjs';
 
diff --git a/src/plugins/presentation_util/common/lib/utils/index.ts b/src/plugins/presentation_util/common/lib/utils/index.ts
index 232ec09cf8b06..5fc7e31fdf9f5 100644
--- a/src/plugins/presentation_util/common/lib/utils/index.ts
+++ b/src/plugins/presentation_util/common/lib/utils/index.ts
@@ -10,6 +10,7 @@ export * from './dataurl';
 export * from './httpurl';
 export * from './resolve_dataurl';
 export * from './url';
+export { defaultTheme$ } from './default_theme';
 
 export async function getElasticLogo() {
   return await import('./elastic_logo');
diff --git a/x-pack/plugins/canvas/canvas_plugin_src/renderers/external.ts b/x-pack/plugins/canvas/canvas_plugin_src/renderers/external.ts
index 94aadf6598b5a..572771537ec72 100644
--- a/x-pack/plugins/canvas/canvas_plugin_src/renderers/external.ts
+++ b/x-pack/plugins/canvas/canvas_plugin_src/renderers/external.ts
@@ -7,7 +7,10 @@
 
 import { imageRenderer } from '../../../../../src/plugins/expression_image/public';
 import { metricRenderer } from '../../../../../src/plugins/expression_metric/public';
-import { errorRenderer, debugRenderer } from '../../../../../src/plugins/expression_error/public';
+import {
+  errorRendererFactory,
+  debugRendererFactory,
+} from '../../../../../src/plugins/expression_error/public';
 import { repeatImageRenderer } from '../../../../../src/plugins/expression_repeat_image/public';
 import { revealImageRenderer } from '../../../../../src/plugins/expression_reveal_image/public';
 import {
@@ -16,8 +19,6 @@ import {
 } from '../../../../../src/plugins/expression_shape/public';
 
 export const renderFunctions = [
-  debugRenderer,
-  errorRenderer,
   imageRenderer,
   metricRenderer,
   revealImageRenderer,
@@ -26,4 +27,4 @@ export const renderFunctions = [
   progressRenderer,
 ];
 
-export const renderFunctionFactories = [];
+export const renderFunctionFactories = [debugRendererFactory, errorRendererFactory];
diff --git a/x-pack/plugins/canvas/canvas_plugin_src/renderers/markdown/index.tsx b/x-pack/plugins/canvas/canvas_plugin_src/renderers/markdown/index.tsx
index bc9748fa8f6ab..498e09e14b7e0 100644
--- a/x-pack/plugins/canvas/canvas_plugin_src/renderers/markdown/index.tsx
+++ b/x-pack/plugins/canvas/canvas_plugin_src/renderers/markdown/index.tsx
@@ -10,12 +10,12 @@ import ReactDOM from 'react-dom';
 import { CoreTheme } from 'kibana/public';
 import { Observable } from 'rxjs';
 import { KibanaThemeProvider } from '../../../../../../src/plugins/kibana_react/public';
+import { defaultTheme$ } from '../../../../../../src/plugins/presentation_util/common/lib';
 import { StartInitializer } from '../../plugin';
 import { RendererStrings } from '../../../i18n';
 import { Return as Config } from '../../functions/browser/markdown';
 import { Markdown } from '../../../../../../src/plugins/kibana_react/public';
 import { RendererFactory } from '../../../types';
-import { defaultTheme$ } from '../../../public/lib/default_theme';
 
 const { markdown: strings } = RendererStrings;
 
diff --git a/x-pack/plugins/canvas/canvas_plugin_src/renderers/table.tsx b/x-pack/plugins/canvas/canvas_plugin_src/renderers/table.tsx
index 3af0fe00f2465..ec918f89321ad 100644
--- a/x-pack/plugins/canvas/canvas_plugin_src/renderers/table.tsx
+++ b/x-pack/plugins/canvas/canvas_plugin_src/renderers/table.tsx
@@ -10,11 +10,11 @@ import React from 'react';
 import { CoreTheme } from 'kibana/public';
 import { Observable } from 'rxjs';
 import { KibanaThemeProvider } from '../../../../../src/plugins/kibana_react/public';
+import { defaultTheme$ } from '../../../../../src/plugins/presentation_util/common/lib';
 import { StartInitializer } from '../plugin';
 import { Datatable as DatatableComponent } from '../../public/components/datatable';
 import { RendererStrings } from '../../i18n';
 import { RendererFactory, Style, Datatable } from '../../types';
-import { defaultTheme$ } from '../../public/lib/default_theme';
 
 const { dropdownFilter: strings } = RendererStrings;
 export interface TableArguments {
diff --git a/x-pack/plugins/canvas/canvas_plugin_src/renderers/text.tsx b/x-pack/plugins/canvas/canvas_plugin_src/renderers/text.tsx
index 3bc62d888e02f..a89c56c66ce27 100644
--- a/x-pack/plugins/canvas/canvas_plugin_src/renderers/text.tsx
+++ b/x-pack/plugins/canvas/canvas_plugin_src/renderers/text.tsx
@@ -10,10 +10,10 @@ import React from 'react';
 import { CoreTheme } from 'kibana/public';
 import { Observable } from 'rxjs';
 import { KibanaThemeProvider } from '../../../../../src/plugins/kibana_react/public';
+import { defaultTheme$ } from '../../../../../src/plugins/presentation_util/common/lib';
 import { StartInitializer } from '../plugin';
 import { RendererStrings } from '../../i18n';
 import { RendererFactory } from '../../types';
-import { defaultTheme$ } from '../../public/lib/default_theme';
 
 const { text: strings } = RendererStrings;
 
diff --git a/x-pack/plugins/canvas/shareable_runtime/supported_renderers.js b/x-pack/plugins/canvas/shareable_runtime/supported_renderers.js
index db61cfaf86c51..1d2326b77dd26 100644
--- a/x-pack/plugins/canvas/shareable_runtime/supported_renderers.js
+++ b/x-pack/plugins/canvas/shareable_runtime/supported_renderers.js
@@ -12,8 +12,8 @@ import { getTableRenderer } from '../canvas_plugin_src/renderers/table';
 import { getTextRenderer } from '../canvas_plugin_src/renderers/text';
 import { imageRenderer as image } from '../../../../src/plugins/expression_image/public';
 import {
-  errorRenderer as error,
-  debugRenderer as debug,
+  getErrorRenderer,
+  getDebugRenderer,
 } from '../../../../src/plugins/expression_error/public';
 import { repeatImageRenderer as repeatImage } from '../../../../src/plugins/expression_repeat_image/public';
 import { revealImageRenderer as revealImage } from '../../../../src/plugins/expression_reveal_image/public';
@@ -25,7 +25,13 @@ import { metricRenderer as metric } from '../../../../src/plugins/expression_met
 
 const unboxFactory = (factory) => factory();
 
-const renderFunctionsFactories = [getMarkdownRenderer, getTextRenderer, getTableRenderer];
+const renderFunctionsFactories = [
+  getMarkdownRenderer,
+  getTextRenderer,
+  getTableRenderer,
+  getErrorRenderer,
+  getDebugRenderer,
+];
 
 /**
  * This is a collection of renderers which are bundled with the runtime.  If
@@ -33,8 +39,6 @@ const renderFunctionsFactories = [getMarkdownRenderer, getTextRenderer, getTable
  * not render.  This includes any plugins.
  */
 export const renderFunctions = [
-  debug,
-  error,
   image,
   repeatImage,
   revealImage,

From 3d1dc4c3c96d75a6d561db2aa07b793ae32e783b Mon Sep 17 00:00:00 2001
From: Yaroslav Kuznietsov <kuznetsov.yaroslav.yk@gmail.com>
Date: Wed, 1 Dec 2021 12:46:07 +0200
Subject: [PATCH 10/11] Fixed exports.

---
 .../public/expression_renderers/index.ts              |  9 ++-------
 src/plugins/expression_error/public/index.ts          | 11 +++++++----
 2 files changed, 9 insertions(+), 11 deletions(-)

diff --git a/src/plugins/expression_error/public/expression_renderers/index.ts b/src/plugins/expression_error/public/expression_renderers/index.ts
index 659c74291da31..295e30fc1bffd 100644
--- a/src/plugins/expression_error/public/expression_renderers/index.ts
+++ b/src/plugins/expression_error/public/expression_renderers/index.ts
@@ -6,10 +6,5 @@
  * Side Public License, v 1.
  */
 
-import { getErrorRenderer, errorRendererFactory } from './error_renderer';
-import { getDebugRenderer, debugRendererFactory } from './debug_renderer';
-
-export const renderers = [getErrorRenderer, getDebugRenderer];
-export const rendererFactories = [errorRendererFactory, debugRendererFactory];
-
-export { errorRendererFactory, getErrorRenderer, debugRendererFactory, getDebugRenderer };
+export { getErrorRenderer, errorRendererFactory } from './error_renderer';
+export { getDebugRenderer, debugRendererFactory } from './debug_renderer';
diff --git a/src/plugins/expression_error/public/index.ts b/src/plugins/expression_error/public/index.ts
index be34980045395..acc5133f5b7d1 100755
--- a/src/plugins/expression_error/public/index.ts
+++ b/src/plugins/expression_error/public/index.ts
@@ -6,9 +6,6 @@
  * Side Public License, v 1.
  */
 
-// TODO: https://github.com/elastic/kibana/issues/110893
-/* eslint-disable @kbn/eslint/no_export_all */
-
 import { ExpressionErrorPlugin } from './plugin';
 
 export type { ExpressionErrorPluginSetup, ExpressionErrorPluginStart } from './plugin';
@@ -17,5 +14,11 @@ export function plugin() {
   return new ExpressionErrorPlugin();
 }
 
-export * from './expression_renderers';
+export {
+  getErrorRenderer,
+  getDebugRenderer,
+  errorRendererFactory,
+  debugRendererFactory,
+} from './expression_renderers';
+
 export { LazyDebugComponent, LazyErrorComponent } from './components';

From ea5199d32fdff67c931a6151aba7ea7b71f8f191 Mon Sep 17 00:00:00 2001
From: Yaroslav Kuznietsov <kuznetsov.yaroslav.yk@gmail.com>
Date: Wed, 1 Dec 2021 16:19:36 +0200
Subject: [PATCH 11/11] Added kibanaThemeProvider to expression_image

---
 src/plugins/expression_image/kibana.json      |  3 +-
 .../__stories__/image_renderer.stories.tsx    |  4 +-
 .../expression_renderers/image_renderer.tsx   | 66 +++++++++++--------
 .../public/expression_renderers/index.ts      |  6 +-
 src/plugins/expression_image/public/index.ts  |  5 +-
 src/plugins/expression_image/public/plugin.ts |  4 +-
 .../canvas_plugin_src/renderers/external.ts   |  9 ++-
 .../shareable_runtime/supported_renderers.js  |  4 +-
 8 files changed, 56 insertions(+), 45 deletions(-)

diff --git a/src/plugins/expression_image/kibana.json b/src/plugins/expression_image/kibana.json
index 4f4b736d82d1a..7391b17bce779 100755
--- a/src/plugins/expression_image/kibana.json
+++ b/src/plugins/expression_image/kibana.json
@@ -10,5 +10,6 @@
   "server": true,
   "ui": true,
   "requiredPlugins": ["expressions", "presentationUtil"],
-  "optionalPlugins": []
+  "optionalPlugins": [],
+  "requiredBundles": ["kibanaReact"]
 }
diff --git a/src/plugins/expression_image/public/expression_renderers/__stories__/image_renderer.stories.tsx b/src/plugins/expression_image/public/expression_renderers/__stories__/image_renderer.stories.tsx
index d75aa1a4263eb..dc54194d5d83f 100644
--- a/src/plugins/expression_image/public/expression_renderers/__stories__/image_renderer.stories.tsx
+++ b/src/plugins/expression_image/public/expression_renderers/__stories__/image_renderer.stories.tsx
@@ -9,7 +9,7 @@
 import React from 'react';
 import { storiesOf } from '@storybook/react';
 import { Render, waitFor } from '../../../../presentation_util/public/__stories__';
-import { imageRenderer } from '../image_renderer';
+import { getImageRenderer } from '../image_renderer';
 import { getElasticLogo } from '../../../../../../src/plugins/presentation_util/common/lib';
 import { ImageMode } from '../../../common';
 
@@ -19,7 +19,7 @@ const Renderer = ({ elasticLogo }: { elasticLogo: string }) => {
     mode: ImageMode.COVER,
   };
 
-  return <Render renderer={imageRenderer} config={config} width="500px" height="500px" />;
+  return <Render renderer={getImageRenderer()} config={config} width="500px" height="500px" />;
 };
 
 storiesOf('renderers/image', module).add(
diff --git a/src/plugins/expression_image/public/expression_renderers/image_renderer.tsx b/src/plugins/expression_image/public/expression_renderers/image_renderer.tsx
index 3d542a9978a83..a38649f13fb32 100644
--- a/src/plugins/expression_image/public/expression_renderers/image_renderer.tsx
+++ b/src/plugins/expression_image/public/expression_renderers/image_renderer.tsx
@@ -9,7 +9,11 @@ import React from 'react';
 import { render, unmountComponentAtNode } from 'react-dom';
 import { ExpressionRenderDefinition, IInterpreterRenderHandlers } from 'src/plugins/expressions';
 import { i18n } from '@kbn/i18n';
-import { getElasticLogo, isValidUrl } from '../../../presentation_util/public';
+import { Observable } from 'rxjs';
+import { CoreTheme } from 'kibana/public';
+import { CoreSetup } from '../../../../core/public';
+import { KibanaThemeProvider } from '../../../kibana_react/public';
+import { getElasticLogo, isValidUrl, defaultTheme$ } from '../../../presentation_util/public';
 import { ImageRendererConfig } from '../../common/types';
 
 const strings = {
@@ -23,31 +27,41 @@ const strings = {
     }),
 };
 
-export const imageRenderer = (): ExpressionRenderDefinition<ImageRendererConfig> => ({
-  name: 'image',
-  displayName: strings.getDisplayName(),
-  help: strings.getHelpDescription(),
-  reuseDomNode: true,
-  render: async (
-    domNode: HTMLElement,
-    config: ImageRendererConfig,
-    handlers: IInterpreterRenderHandlers
-  ) => {
-    const { elasticLogo } = await getElasticLogo();
-    const dataurl = isValidUrl(config.dataurl ?? '') ? config.dataurl : elasticLogo;
+export const getImageRenderer =
+  (theme$: Observable<CoreTheme> = defaultTheme$) =>
+  (): ExpressionRenderDefinition<ImageRendererConfig> => ({
+    name: 'image',
+    displayName: strings.getDisplayName(),
+    help: strings.getHelpDescription(),
+    reuseDomNode: true,
+    render: async (
+      domNode: HTMLElement,
+      config: ImageRendererConfig,
+      handlers: IInterpreterRenderHandlers
+    ) => {
+      const { elasticLogo } = await getElasticLogo();
+      const dataurl = isValidUrl(config.dataurl ?? '') ? config.dataurl : elasticLogo;
 
-    const style = {
-      height: '100%',
-      backgroundImage: `url(${dataurl})`,
-      backgroundRepeat: 'no-repeat',
-      backgroundPosition: 'center center',
-      backgroundSize: config.mode as string,
-    };
+      const style = {
+        height: '100%',
+        backgroundImage: `url(${dataurl})`,
+        backgroundRepeat: 'no-repeat',
+        backgroundPosition: 'center center',
+        backgroundSize: config.mode as string,
+      };
 
-    handlers.onDestroy(() => {
-      unmountComponentAtNode(domNode);
-    });
+      handlers.onDestroy(() => {
+        unmountComponentAtNode(domNode);
+      });
 
-    render(<div style={style} />, domNode, () => handlers.done());
-  },
-});
+      render(
+        <KibanaThemeProvider theme$={theme$}>
+          <div style={style} />
+        </KibanaThemeProvider>,
+        domNode,
+        () => handlers.done()
+      );
+    },
+  });
+
+export const imageRendererFactory = (core: CoreSetup) => getImageRenderer(core.theme.theme$);
diff --git a/src/plugins/expression_image/public/expression_renderers/index.ts b/src/plugins/expression_image/public/expression_renderers/index.ts
index 96c274f05a7a9..6b4c4b03f7922 100644
--- a/src/plugins/expression_image/public/expression_renderers/index.ts
+++ b/src/plugins/expression_image/public/expression_renderers/index.ts
@@ -6,8 +6,4 @@
  * Side Public License, v 1.
  */
 
-import { imageRenderer } from './image_renderer';
-
-export const renderers = [imageRenderer];
-
-export { imageRenderer };
+export { imageRendererFactory, getImageRenderer } from './image_renderer';
diff --git a/src/plugins/expression_image/public/index.ts b/src/plugins/expression_image/public/index.ts
index 661a12e7cf028..c379dd05dc221 100755
--- a/src/plugins/expression_image/public/index.ts
+++ b/src/plugins/expression_image/public/index.ts
@@ -6,9 +6,6 @@
  * Side Public License, v 1.
  */
 
-// TODO: https://github.com/elastic/kibana/issues/110893
-/* eslint-disable @kbn/eslint/no_export_all */
-
 import { ExpressionImagePlugin } from './plugin';
 
 export type { ExpressionImagePluginSetup, ExpressionImagePluginStart } from './plugin';
@@ -17,4 +14,4 @@ export function plugin() {
   return new ExpressionImagePlugin();
 }
 
-export * from './expression_renderers';
+export { imageRendererFactory, getImageRenderer } from './expression_renderers';
diff --git a/src/plugins/expression_image/public/plugin.ts b/src/plugins/expression_image/public/plugin.ts
index 6e6c02248642f..ba7e2baded8d8 100755
--- a/src/plugins/expression_image/public/plugin.ts
+++ b/src/plugins/expression_image/public/plugin.ts
@@ -8,7 +8,7 @@
 
 import { CoreSetup, CoreStart, Plugin } from '../../../core/public';
 import { ExpressionsStart, ExpressionsSetup } from '../../expressions/public';
-import { imageRenderer } from './expression_renderers';
+import { imageRendererFactory } from './expression_renderers';
 import { imageFunction } from '../common/expression_functions';
 
 interface SetupDeps {
@@ -27,7 +27,7 @@ export class ExpressionImagePlugin
 {
   public setup(core: CoreSetup, { expressions }: SetupDeps): ExpressionImagePluginSetup {
     expressions.registerFunction(imageFunction);
-    expressions.registerRenderer(imageRenderer);
+    expressions.registerRenderer(imageRendererFactory(core));
   }
 
   public start(core: CoreStart): ExpressionImagePluginStart {}
diff --git a/x-pack/plugins/canvas/canvas_plugin_src/renderers/external.ts b/x-pack/plugins/canvas/canvas_plugin_src/renderers/external.ts
index 572771537ec72..ebf6b9889df94 100644
--- a/x-pack/plugins/canvas/canvas_plugin_src/renderers/external.ts
+++ b/x-pack/plugins/canvas/canvas_plugin_src/renderers/external.ts
@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import { imageRenderer } from '../../../../../src/plugins/expression_image/public';
+import { imageRendererFactory } from '../../../../../src/plugins/expression_image/public';
 import { metricRenderer } from '../../../../../src/plugins/expression_metric/public';
 import {
   errorRendererFactory,
@@ -19,7 +19,6 @@ import {
 } from '../../../../../src/plugins/expression_shape/public';
 
 export const renderFunctions = [
-  imageRenderer,
   metricRenderer,
   revealImageRenderer,
   shapeRenderer,
@@ -27,4 +26,8 @@ export const renderFunctions = [
   progressRenderer,
 ];
 
-export const renderFunctionFactories = [debugRendererFactory, errorRendererFactory];
+export const renderFunctionFactories = [
+  debugRendererFactory,
+  errorRendererFactory,
+  imageRendererFactory,
+];
diff --git a/x-pack/plugins/canvas/shareable_runtime/supported_renderers.js b/x-pack/plugins/canvas/shareable_runtime/supported_renderers.js
index 1d2326b77dd26..837cc2992c8a6 100644
--- a/x-pack/plugins/canvas/shareable_runtime/supported_renderers.js
+++ b/x-pack/plugins/canvas/shareable_runtime/supported_renderers.js
@@ -10,7 +10,7 @@ import { pie } from '../canvas_plugin_src/renderers/pie';
 import { plot } from '../canvas_plugin_src/renderers/plot';
 import { getTableRenderer } from '../canvas_plugin_src/renderers/table';
 import { getTextRenderer } from '../canvas_plugin_src/renderers/text';
-import { imageRenderer as image } from '../../../../src/plugins/expression_image/public';
+import { getImageRenderer } from '../../../../src/plugins/expression_image/public';
 import {
   getErrorRenderer,
   getDebugRenderer,
@@ -31,6 +31,7 @@ const renderFunctionsFactories = [
   getTableRenderer,
   getErrorRenderer,
   getDebugRenderer,
+  getImageRenderer,
 ];
 
 /**
@@ -39,7 +40,6 @@ const renderFunctionsFactories = [
  * not render.  This includes any plugins.
  */
 export const renderFunctions = [
-  image,
   repeatImage,
   revealImage,
   metric,