@wordpress/block-editor/build-module/components/contrast-checker/index.js

Generic block editor.

import { createElement } from "@wordpress/element";

/**
 * External dependencies
 */
import tinycolor from 'tinycolor2';
/**
 * WordPress dependencies
 */

import { speak } from '@wordpress/a11y';
import { __ } from '@wordpress/i18n';
import { Notice } from '@wordpress/components';
import { useEffect } from '@wordpress/element';

function ContrastCheckerMessage({
  tinyBackgroundColor,
  tinyTextColor,
  backgroundColor,
  textColor
}) {
  const msg = tinyBackgroundColor.getBrightness() < tinyTextColor.getBrightness() ? __('This color combination may be hard for people to read. Try using a darker background color and/or a brighter text color.') : __('This color combination may be hard for people to read. Try using a brighter background color and/or a darker text color.'); // Note: The `Notice` component can speak messages via its `spokenMessage`
  // prop, but the contrast checker requires granular control over when the
  // announcements are made. Notably, the message will be re-announced if a
  // new color combination is selected and the contrast is still insufficient.

  useEffect(() => {
    speak(__('This color combination may be hard for people to read.'));
  }, [backgroundColor, textColor]);
  return createElement("div", {
    className: "block-editor-contrast-checker"
  }, createElement(Notice, {
    spokenMessage: null,
    status: "warning",
    isDismissible: false
  }, msg));
}

function ContrastChecker({
  backgroundColor,
  fallbackBackgroundColor,
  fallbackTextColor,
  fontSize,
  // font size value in pixels
  isLargeText,
  textColor
}) {
  if (!(backgroundColor || fallbackBackgroundColor) || !(textColor || fallbackTextColor)) {
    return null;
  }

  const tinyBackgroundColor = tinycolor(backgroundColor || fallbackBackgroundColor);
  const tinyTextColor = tinycolor(textColor || fallbackTextColor);
  const hasTransparency = tinyBackgroundColor.getAlpha() !== 1 || tinyTextColor.getAlpha() !== 1;

  if (hasTransparency || tinycolor.isReadable(tinyBackgroundColor, tinyTextColor, {
    level: 'AA',
    size: isLargeText || isLargeText !== false && fontSize >= 24 ? 'large' : 'small'
  })) {
    return null;
  }

  return createElement(ContrastCheckerMessage, {
    backgroundColor: backgroundColor,
    textColor: textColor,
    tinyBackgroundColor: tinyBackgroundColor,
    tinyTextColor: tinyTextColor
  });
}

export default ContrastChecker;
//# sourceMappingURL=index.js.map