kitchen-color-studio
Version:
an open-source color editor for designing color system
44 lines (41 loc) • 1.54 kB
JavaScript
import { memo } from 'react';
import styled from 'styled-components';
import AccessBlock from "./AccessBlock";
import { readable } from "./readable";
/******************************************************
*********************** Style *************************
******************************************************/
import { jsx as _jsx } from "react/jsx-runtime";
import { jsxs as _jsxs } from "react/jsx-runtime";
var View = styled.div.withConfig({
displayName: "View",
componentId: "kitchen-color-studio__sc-54piqg-0"
})(["position:relative;display:flex;flex-direction:column;width:100%;"]);
/******************************************************
************************* 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 };