@redux-devtools/rtk-query-monitor/lib/esm/styles/themes.js

rtk-query monitor for Redux DevTools

import { base16Themes, getBase16Theme, invertBase16Theme } from 'react-base16-styling';
import rgba from 'hex-rgba';
import { createContext } from 'react';
export function resolveBase16Theme(theme) {
  return getBase16Theme(theme, base16Themes) ?? base16Themes.nicinabox;
}

/**
 * @internal
 */

export const colorMap = theme => ({
  TEXT_COLOR: theme.base06,
  TEXT_PLACEHOLDER_COLOR: rgba(theme.base06, 60),
  BACKGROUND_COLOR: theme.base00,
  SELECTED_BACKGROUND_COLOR: rgba(theme.base03, 20),
  SKIPPED_BACKGROUND_COLOR: rgba(theme.base03, 10),
  HEADER_BACKGROUND_COLOR: rgba(theme.base03, 30),
  HEADER_BORDER_COLOR: rgba(theme.base03, 20),
  BORDER_COLOR: rgba(theme.base03, 50),
  LIST_BORDER_COLOR: rgba(theme.base03, 50),
  ACTION_TIME_BACK_COLOR: rgba(theme.base03, 20),
  ACTION_TIME_COLOR: theme.base04,
  PIN_COLOR: theme.base04,
  ITEM_HINT_COLOR: rgba(theme.base0F, 90),
  TAB_BACK_SELECTED_COLOR: rgba(theme.base03, 20),
  TAB_BACK_COLOR: rgba(theme.base00, 70),
  TAB_BACK_HOVER_COLOR: rgba(theme.base03, 40),
  TAB_BORDER_COLOR: rgba(theme.base03, 50),
  DIFF_ADD_COLOR: rgba(theme.base0B, 40),
  DIFF_REMOVE_COLOR: rgba(theme.base08, 40),
  DIFF_ARROW_COLOR: theme.base0E,
  LINK_COLOR: rgba(theme.base0E, 90),
  LINK_HOVER_COLOR: theme.base0E,
  ERROR_COLOR: theme.base08,
  ULIST_DISC_COLOR: theme.base0D,
  ULIST_COLOR: rgba(theme.base06, 60),
  ULIST_STRONG_COLOR: theme.base0B,
  TAB_CONTENT_COLOR: rgba(theme.base06, 60),
  TOGGLE_BUTTON_BACKGROUND: rgba(theme.base00, 70),
  TOGGLE_BUTTON_SELECTED_BACKGROUND: theme.base04,
  TOGGLE_BUTTON_ERROR: rgba(theme.base08, 40)
});
export function createRtkQueryMonitorThemeFromBase16Theme(base16Theme, invertTheme) {
  const finalBase16Theme = invertTheme ? invertBase16Theme(base16Theme) : base16Theme;
  return colorMap(finalBase16Theme);
}
export const StyleUtilsContext = /*#__PURE__*/createContext({
  base16Theme: base16Themes.nicinabox,
  invertTheme: false
});
export function getJsonTreeTheme(base16Theme) {
  return {
    extend: base16Theme,
    nestedNode: (_ref, keyPath, nodeType, expanded) => {
      let {
        style
      } = _ref;
      return {
        style: {
          ...style,
          whiteSpace: expanded ? 'inherit' : 'nowrap'
        }
      };
    },
    nestedNodeItemString: (_ref2, keyPath, nodeType, expanded) => {
      let {
        style
      } = _ref2;
      return {
        style: {
          ...style,
          display: expanded ? 'none' : 'inline'
        }
      };
    }
  };
}