@wordpress/block-editor
Version:
82 lines (80 loc) • 3.18 kB
JavaScript
/**
* External dependencies
*/
import { Text, View } from 'react-native';
import { colord, extend } from 'colord';
import namesPlugin from 'colord/plugins/names';
import a11yPlugin from 'colord/plugins/a11y';
/**
* WordPress dependencies
*/
import { speak } from '@wordpress/a11y';
import { __ } from '@wordpress/i18n';
import { useEffect } from '@wordpress/element';
import { usePreferredColorSchemeStyle } from '@wordpress/compose';
import { Icon, cautionFilled } from '@wordpress/icons';
/**
* Internal dependencies
*/
import styles from './style.scss';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
extend([namesPlugin, a11yPlugin]);
function ContrastCheckerMessage({
colordBackgroundColor,
colordTextColor,
backgroundColor,
textColor,
msgStyle
}) {
const msg = colordBackgroundColor.brightness() < colordTextColor.brightness() ? __('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]);
const iconStyle = usePreferredColorSchemeStyle(styles['block-editor-contrast-checker__icon'], styles['block-editor-contrast-checker__icon-dark']);
return /*#__PURE__*/_jsxs(View, {
style: styles['block-editor-contrast-checker'],
children: [/*#__PURE__*/_jsx(Icon, {
style: iconStyle,
icon: cautionFilled
}), /*#__PURE__*/_jsx(Text, {
style: msgStyle,
children: msg
})]
});
}
function ContrastChecker({
backgroundColor,
fallbackBackgroundColor,
fallbackTextColor,
fontSize,
// font size value in pixels
isLargeText,
textColor
}) {
const msgStyle = usePreferredColorSchemeStyle(styles['block-editor-contrast-checker__notice'], styles['block-editor-contrast-checker__notice-dark']);
if (!(backgroundColor || fallbackBackgroundColor) || !(textColor || fallbackTextColor)) {
return null;
}
const colordBackgroundColor = colord(backgroundColor || fallbackBackgroundColor);
const colordTextColor = 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__*/_jsx(ContrastCheckerMessage, {
backgroundColor: backgroundColor,
textColor: textColor,
colordBackgroundColor: colordBackgroundColor,
colordTextColor: colordTextColor,
msgStyle: msgStyle
});
}
export default ContrastChecker;
//# sourceMappingURL=index.native.js.map