antd-color-editor/es/Accessibility/index.js

An open-source color editor for designing color system

var _templateObject;
function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
import { memo } from 'react';
import styled from 'styled-components';
import AccessBlock from "./AccessBlock";

/******************************************************
 *********************** Style *************************
 ******************************************************/
import { jsx as _jsx } from "react/jsx-runtime";
import { jsxs as _jsxs } from "react/jsx-runtime";
var View = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n"])));

/******************************************************
 ************************* Dom *************************
 ******************************************************/

var Accessibility = /*#__PURE__*/memo(function (_ref) {
  var color1 = _ref.color1,
    color2 = _ref.color2;
  return /*#__PURE__*/_jsxs(View, {
    children: [/*#__PURE__*/_jsx(AccessBlock, {
      color1: color1,
      color2: color2,
      children: [color1, 'on', color2].join(' ')
    }), /*#__PURE__*/_jsx(AccessBlock, {
      color1: color2,
      color2: color1,
      children: [color2, 'on', color1].join(' ')
    }), /*#__PURE__*/_jsx(AccessBlock, {
      color1: '#fff',
      color2: color1,
      children: ['White text on', color2].join(' ')
    }), /*#__PURE__*/_jsx(AccessBlock, {
      color1: '#000',
      color2: color1,
      children: ['Black text on', color2].join(' ')
    })]
  });
});
export default Accessibility;
export { readable } from "./readable";