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

Generic block editor.

"use strict";

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

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

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

var _colord = require("colord");

var _names = _interopRequireDefault(require("colord/plugins/names"));

var _a11y = _interopRequireDefault(require("colord/plugins/a11y"));

var _a11y2 = require("@gechiui/a11y");

var _i18n = require("@gechiui/i18n");

var _components = require("@gechiui/components");

/**
 * External dependencies
 */

/**
 * GeChiUI dependencies
 */
(0, _colord.extend)([_names.default, _a11y.default]);

function ContrastCheckerMessage(_ref) {
  let {
    colordBackgroundColor,
    colordTextColor,
    backgroundColor,
    textColor
  } = _ref;
  const msg = colordBackgroundColor.brightness() < colordTextColor.brightness() ? (0, _i18n.__)('此颜色组合可能不便阅读，请改用较深的背景颜色搭配较浅的文本颜色。') : (0, _i18n.__)('此颜色组合可能不便阅读，请改用较浅的背景颜色搭配较深的文本颜色。'); // 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.__)('此颜色组合可能不便阅读。'));
  }, [backgroundColor, textColor]);
  return (0, _element.createElement)("div", {
    className: "block-editor-contrast-checker"
  }, (0, _element.createElement)(_components.Notice, {
    spokenMessage: null,
    status: "warning",
    isDismissible: false
  }, msg));
}

function ContrastChecker(_ref2) {
  let {
    backgroundColor,
    fallbackBackgroundColor,
    fallbackTextColor,
    fontSize,
    // font size value in pixels
    isLargeText,
    textColor
  } = _ref2;

  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 (0, _element.createElement)(ContrastCheckerMessage, {
    backgroundColor: backgroundColor,
    textColor: textColor,
    colordBackgroundColor: colordBackgroundColor,
    colordTextColor: colordTextColor
  });
}

var _default = ContrastChecker;
exports.default = _default;
//# sourceMappingURL=index.js.map