@wordpress/block-editor/build/components/editor-styles/index.js

Generic block editor.

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = EditorStyles;

var _element = require("@wordpress/element");

var _tinycolor = _interopRequireDefault(require("tinycolor2"));

var _transformStyles = _interopRequireDefault(require("../../utils/transform-styles"));

/**
 * External dependencies
 */

/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */
const EDITOR_STYLES_SELECTOR = '.editor-styles-wrapper';

function useDarkThemeBodyClassName(styles) {
  return (0, _element.useCallback)(node => {
    if (!node) {
      return;
    }

    const {
      ownerDocument
    } = node;
    const {
      defaultView,
      body
    } = ownerDocument;
    const canvas = ownerDocument.querySelector(EDITOR_STYLES_SELECTOR);
    const backgroundColor = defaultView.getComputedStyle(canvas, null).getPropertyValue('background-color');

    if ((0, _tinycolor.default)(backgroundColor).getLuminance() > 0.5) {
      body.classList.remove('is-dark-theme');
    } else {
      body.classList.add('is-dark-theme');
    }
  }, [styles]);
}

function EditorStyles({
  styles
}) {
  return (0, _element.createElement)(_element.Fragment, null, (0, _element.createElement)("style", {
    ref: useDarkThemeBodyClassName(styles)
  }), (0, _transformStyles.default)(styles, EDITOR_STYLES_SELECTOR).map((css, index) => (0, _element.createElement)("style", {
    key: index
  }, css)));
}
//# sourceMappingURL=index.js.map