@gechiui/block-editor/build-module/components/editor-styles/index.js

Generic block editor.

import { createElement, Fragment } from "@gechiui/element";

/**
 * External dependencies
 */
import { colord, extend } from 'colord';
import namesPlugin from 'colord/plugins/names';
import a11yPlugin from 'colord/plugins/a11y';
/**
 * GeChiUI dependencies
 */

import { useCallback, useMemo } from '@gechiui/element';
/**
 * Internal dependencies
 */

import transformStyles from '../../utils/transform-styles';
const EDITOR_STYLES_SELECTOR = '.editor-styles-wrapper';
extend([namesPlugin, a11yPlugin]);

function useDarkThemeBodyClassName(styles) {
  return useCallback(node => {
    if (!node) {
      return;
    }

    const {
      ownerDocument
    } = node;
    const {
      defaultView,
      body
    } = ownerDocument;
    const canvas = ownerDocument.querySelector(EDITOR_STYLES_SELECTOR);
    let backgroundColor;

    if (!canvas) {
      // The real .editor-styles-wrapper element might not exist in the
      // DOM, so calculate the background color by creating a fake
      // wrapper.
      const tempCanvas = ownerDocument.createElement('div');
      tempCanvas.classList.add('editor-styles-wrapper');
      body.appendChild(tempCanvas);
      backgroundColor = defaultView.getComputedStyle(tempCanvas, null).getPropertyValue('background-color');
      body.removeChild(tempCanvas);
    } else {
      backgroundColor = defaultView.getComputedStyle(canvas, null).getPropertyValue('background-color');
    }

    const colordBackgroundColor = colord(backgroundColor); // If background is transparent, it should be treated as light color.

    if (colordBackgroundColor.luminance() > 0.5 || colordBackgroundColor.alpha() === 0) {
      body.classList.remove('is-dark-theme');
    } else {
      body.classList.add('is-dark-theme');
    }
  }, [styles]);
}

export default function EditorStyles(_ref) {
  let {
    styles
  } = _ref;
  const transformedStyles = useMemo(() => transformStyles(styles, EDITOR_STYLES_SELECTOR), [styles]);
  return createElement(Fragment, null, createElement("style", {
    ref: useDarkThemeBodyClassName(styles)
  }), transformedStyles.map((css, index) => createElement("style", {
    key: index
  }, css)));
}
//# sourceMappingURL=index.js.map