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

Generic block editor.

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _reactNative = require("react-native");
var _colord = require("colord");
var _names = _interopRequireDefault(require("colord/plugins/names"));
var _a11y = _interopRequireDefault(require("colord/plugins/a11y"));
var _a11y2 = require("@wordpress/a11y");
var _i18n = require("@wordpress/i18n");
var _element = require("@wordpress/element");
var _compose = require("@wordpress/compose");
var _icons = require("@wordpress/icons");
var _style = _interopRequireDefault(require("./style.scss"));
var _jsxRuntime = require("react/jsx-runtime");
/**
 * External dependencies
 */

/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */

(0, _colord.extend)([_names.default, _a11y.default]);
function ContrastCheckerMessage({
  colordBackgroundColor,
  colordTextColor,
  backgroundColor,
  textColor,
  msgStyle
}) {
  const msg = colordBackgroundColor.brightness() < colordTextColor.brightness() ? (0, _i18n.__)('This color combination may be hard for people to read. Try using a darker background color and/or a brighter text color.') : (0, _i18n.__)('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.
  (0, _element.useEffect)(() => {
    (0, _a11y2.speak)((0, _i18n.__)('This color combination may be hard for people to read.'));
  }, [backgroundColor, textColor]);
  const iconStyle = (0, _compose.usePreferredColorSchemeStyle)(_style.default['block-editor-contrast-checker__icon'], _style.default['block-editor-contrast-checker__icon-dark']);
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
    style: _style.default['block-editor-contrast-checker'],
    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.Icon, {
      style: iconStyle,
      icon: _icons.cautionFilled
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
      style: msgStyle,
      children: msg
    })]
  });
}
function ContrastChecker({
  backgroundColor,
  fallbackBackgroundColor,
  fallbackTextColor,
  fontSize,
  // font size value in pixels
  isLargeText,
  textColor
}) {
  const msgStyle = (0, _compose.usePreferredColorSchemeStyle)(_style.default['block-editor-contrast-checker__notice'], _style.default['block-editor-contrast-checker__notice-dark']);
  if (!(backgroundColor || fallbackBackgroundColor) || !(textColor || fallbackTextColor)) {
    return null;
  }
  const colordBackgroundColor = (0, _colord.colord)(backgroundColor || fallbackBackgroundColor);
  const colordTextColor = (0, _colord.colord)(textColor || fallbackTextColor);
  const hasTransparency = colordBackgroundColor.alpha() !== 1 || colordTextColor.alpha() !== 1;
  if (hasTransparency || colordTextColor.isReadable(colordBackgroundColor, {
    level: 'AA',
    size: isLargeText || isLargeText !== false && fontSize >= 24 ? 'large' : 'small'
  })) {
    return null;
  }
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(ContrastCheckerMessage, {
    backgroundColor: backgroundColor,
    textColor: textColor,
    colordBackgroundColor: colordBackgroundColor,
    colordTextColor: colordTextColor,
    msgStyle: msgStyle
  });
}
var _default = exports.default = ContrastChecker;
//# sourceMappingURL=index.native.js.map