Start transition

packages/redux-devtools-rtk-query-monitor/demo/tsconfig.json

@@ -3,5 +3,5 @@
   "compilerOptions": {
     "resolveJsonModule": true
   },
-  "include": ["../src", "src"]
+  "include": ["src"]
 }

packages/redux-devtools-rtk-query-monitor/src/containers/RtkQueryInspector.tsx

@@ -131,7 +131,24 @@ class RtkQueryInspector<S, A extends Action<string>> extends PureComponent<
       <div
         ref={this.inspectorRef}
         data-wide-layout={+this.state.isWideLayout}
-        {...styling('inspector')}
+        css={(theme) => ({
+          display: 'flex',
+          flexFlow: 'column nowrap',
+          overflow: 'hidden',
+          width: '100%',
+          height: '100%',
+          fontFamily: 'monaco, Consolas, "Lucida Console", monospace',
+          fontSize: '12px',
+          WebkitFontSmoothing: 'antialiased',
+          lineHeight: '1.5em',
+
+          backgroundColor: theme.BACKGROUND_COLOR,
+          color: theme.TEXT_COLOR,
+
+          '&[data-wide-layout="1"]': {
+            flexFlow: 'row nowrap',
+          },
+        })}
       >
         <div
           {...styling('querySectionWrapper')}

packages/redux-devtools-rtk-query-monitor/src/containers/RtkQueryMonitor.tsx

@@ -9,9 +9,17 @@ import {
   StyleUtils,
 } from '../types';
 import {
+  colorMap,
   createThemeState,
   StyleUtilsContext,
 } from '../styles/createStylingFromTheme';
+import { ThemeProvider } from '@emotion/react';
+import {
+  getBase16Theme,
+  invertBase16Theme,
+  invertTheme,
+} from 'react-base16-styling';
+import * as reduxThemes from 'redux-devtools-themes';
 
 interface DefaultProps {
   theme: string;
@@ -50,16 +58,26 @@ class RtkQueryMonitor<S, A extends Action<string>> extends Component<
       actionsById,
     } = this.props;
 
+    // TODO Cleanup
+    const base16Theme =
+      getBase16Theme(this.props.theme, { ...reduxThemes }) ??
+      reduxThemes.nicinabox;
+    const theme = this.props.invertTheme
+      ? invertBase16Theme(base16Theme)
+      : base16Theme;
+
     return (
       <StyleUtilsContext.Provider value={this.state.styleUtils}>
-        <RtkQueryInspector<S, AnyAction>
+        <ThemeProvider theme={colorMap(theme)}>
-          computedStates={computedStates}
+          <RtkQueryInspector<S, AnyAction>
-          currentStateIndex={currentStateIndex}
+            computedStates={computedStates}
-          monitorState={monitorState}
+            currentStateIndex={currentStateIndex}
-          dispatch={dispatch}
+            monitorState={monitorState}
-          styleUtils={this.state.styleUtils}
+            dispatch={dispatch}
-          actionsById={actionsById}
+            styleUtils={this.state.styleUtils}
-        />
+            actionsById={actionsById}
+          />
+        </ThemeProvider>
       </StyleUtilsContext.Provider>
     );
   }

packages/redux-devtools-rtk-query-monitor/src/styles/createStylingFromTheme.ts

@@ -17,6 +17,41 @@ import { RtkQueryMonitorProps, StyleUtils } from '../types';
 
 jss.setup(preset());
 
+declare module '@emotion/react' {
+  export interface Theme {
+    TEXT_COLOR: string;
+    TEXT_PLACEHOLDER_COLOR: string;
+    BACKGROUND_COLOR: string;
+    SELECTED_BACKGROUND_COLOR: string;
+    SKIPPED_BACKGROUND_COLOR: string;
+    HEADER_BACKGROUND_COLOR: string;
+    HEADER_BORDER_COLOR: string;
+    BORDER_COLOR: string;
+    LIST_BORDER_COLOR: string;
+    ACTION_TIME_BACK_COLOR: string;
+    ACTION_TIME_COLOR: string;
+    PIN_COLOR: string;
+    ITEM_HINT_COLOR: string;
+    TAB_BACK_SELECTED_COLOR: string;
+    TAB_BACK_COLOR: string;
+    TAB_BACK_HOVER_COLOR: string;
+    TAB_BORDER_COLOR: string;
+    DIFF_ADD_COLOR: string;
+    DIFF_REMOVE_COLOR: string;
+    DIFF_ARROW_COLOR: string;
+    LINK_COLOR: string;
+    LINK_HOVER_COLOR: string;
+    ERROR_COLOR: string;
+    ULIST_DISC_COLOR: string;
+    ULIST_COLOR: string;
+    ULIST_STRONG_COLOR: string;
+    TAB_CONTENT_COLOR: string;
+    TOGGLE_BUTTON_BACKGROUND: string;
+    TOGGLE_BUTTON_SELECTED_BACKGROUND: string;
+    TOGGLE_BUTTON_ERROR: string;
+  }
+}
+
 export const colorMap = (theme: reduxThemes.Base16Theme) =>
   ({
     TEXT_COLOR: theme.base06,
@@ -62,25 +97,6 @@ const getSheetFromColorMap = (map: ColorMap) => {
   };
 
   return {
-    inspector: {
-      display: 'flex',
-      flexFlow: 'column nowrap',
-      overflow: 'hidden',
-      width: '100%',
-      height: '100%',
-      'font-family': 'monaco, Consolas, "Lucida Console", monospace',
-      'font-size': '12px',
-      'font-smoothing': 'antialiased',
-      'line-height': '1.5em',
-
-      'background-color': map.BACKGROUND_COLOR,
-      color: map.TEXT_COLOR,
-
-      '&[data-wide-layout="1"]': {
-        flexFlow: 'row nowrap',
-      },
-    },
-
     querySectionWrapper: {
       display: 'flex',
       flex: '0 0 auto',

pnpm-lock.yaml

@@ -2517,6 +2517,9 @@ importers:
       '@babel/preset-typescript':
         specifier: ^7.23.3
         version: 7.23.3(@babel/core@7.23.5)
+      '@emotion/babel-preset-css-prop':
+        specifier: ^11.11.0
+        version: 11.11.0(@babel/core@7.23.5)
       '@emotion/react':
         specifier: ^11.11.1
         version: 11.11.1(@types/react@18.2.43)(react@18.2.0)