Start conversion

packages/redux-devtools-inspector-monitor/src/DevtoolsInspector.tsx

@@ -2,6 +2,7 @@ import React, { PureComponent } from 'react';
 import { Base16Theme } from 'redux-devtools-themes';
 import {
   getBase16Theme,
+  invertBase16Theme,
   invertTheme,
   StylingFunction,
 } from 'react-base16-styling';
@@ -15,6 +16,8 @@ import { Delta, DiffContext } from 'jsondiffpatch';
 import {
   createStylingFromTheme,
   base16Themes,
+  inspectorCss,
+  inspectorWideCss,
 } from './utils/createStylingFromTheme';
 import ActionList from './ActionList';
 import ActionPreview, { Tab } from './ActionPreview';
@@ -26,6 +29,7 @@ import {
   reducer,
   updateMonitorState,
 } from './redux';
+import { ThemeProvider } from '@emotion/react';
 
 const {
   // eslint-disable-next-line @typescript-eslint/unbound-method
@@ -296,14 +300,14 @@ class DevtoolsInspector<S, A extends Action<string>> extends PureComponent<
     const { base16Theme, styling } = themeState;
 
     return (
+      <ThemeProvider
+        theme={invertTheme ? invertBase16Theme(base16Theme) : base16Theme}
+      >
         <div
           key="inspector"
           data-testid="inspector"
           ref={this.inspectorCreateRef}
-        {...styling(
+          css={[inspectorCss, isWideLayout && inspectorWideCss]}
-          ['inspector', isWideLayout && 'inspectorWide'],
-          isWideLayout,
-        )}
         >
           <ActionList
             {...{
@@ -358,6 +362,7 @@ class DevtoolsInspector<S, A extends Action<string>> extends PureComponent<
             onSelectTab={this.handleSelectTab}
           />
         </div>
+      </ThemeProvider>
     );
   }
 

packages/redux-devtools-inspector-monitor/src/utils/createStylingFromTheme.ts

@@ -1,6 +1,12 @@
 import jss, { StyleSheet } from 'jss';
 import preset from 'jss-preset-default';
-import { createStyling, StylingFunction, Theme } from 'react-base16-styling';
+import { css } from '@emotion/react';
+import type { Interpolation, Theme } from '@emotion/react';
+import {
+  createStyling,
+  StylingFunction,
+  Theme as Base16StylingTheme,
+} from 'react-base16-styling';
 import rgba from 'hex-rgba';
 import { Base16Theme } from 'redux-devtools-themes';
 import type { CurriedFunction1 } from 'lodash';
@@ -8,6 +14,11 @@ import inspector from '../themes/inspector';
 import * as reduxThemes from 'redux-devtools-themes';
 import * as inspectorThemes from '../themes';
 
+declare module '@emotion/react' {
+  // eslint-disable-next-line @typescript-eslint/no-empty-interface
+  export interface Theme extends Base16Theme {}
+}
+
 jss.setup(preset());
 
 const colorMap = (theme: Base16Theme) => ({
@@ -41,25 +52,23 @@ type ColorMap = {
   [color in Color]: string;
 };
 
-const getSheetFromColorMap = (map: ColorMap) => ({
+export const inspectorCss: Interpolation<Theme> = (theme) => ({
-  inspector: {
   display: 'flex',
-    'flex-direction': 'column',
+  flexDirection: 'column',
   width: '100%',
   height: '100%',
-    'font-family': 'monaco, Consolas, "Lucida Console", monospace',
+  fontFamily: 'monaco, Consolas, "Lucida Console", monospace',
-    'font-size': '12px',
+  fontSize: '12px',
-    'font-smoothing': 'antialiased',
+  WebkitFontSmoothing: 'antialiased',
-    'line-height': '1.5em',
+  lineHeight: '1.5em',
 
-    'background-color': map.BACKGROUND_COLOR,
+  backgroundColor: colorMap(theme).BACKGROUND_COLOR,
-    color: map.TEXT_COLOR,
+  color: colorMap(theme).TEXT_COLOR,
-  },
+});
 
-  inspectorWide: {
+export const inspectorWideCss = css({ flexDirection: 'column' });
-    'flex-direction': 'row',
-  },
 
+const getSheetFromColorMap = (map: ColorMap) => ({
   actionList: {
     'flex-basis': '40%',
     'flex-shrink': 0,
@@ -386,7 +395,7 @@ const getDefaultThemeStyling = (theme: Base16Theme) => {
 export const base16Themes = { ...reduxThemes, ...inspectorThemes };
 
 export const createStylingFromTheme: CurriedFunction1<
-  Theme | undefined,
+  Base16StylingTheme | undefined,
   StylingFunction
 > = createStyling(getDefaultThemeStyling, {
   defaultBase16: inspector,