antd-color-editor
Version:
An open-source color editor for designing color system
46 lines (43 loc) • 2.25 kB
JavaScript
var _templateObject, _templateObject2;
function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
import { tinycolor } from '@ctrl/tinycolor';
import { memo } from 'react';
import styled from 'styled-components';
import { W3cShield } from "./..";
/******************************************************
*********************** Style *************************
******************************************************/
import { jsx as _jsx } from "react/jsx-runtime";
import { jsxs as _jsxs } from "react/jsx-runtime";
var Block = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n overflow: hidden;\n display: flex;\n flex: 1;\n align-items: center;\n justify-content: flex-start;\n\n width: 100%;\n min-width: 236px;\n padding: 6px 12px 6px 6px;\n\n font-family: var(--leva-fonts-mono);\n font-size: 12px;\n color: ", ";\n\n background: ", ";\n border: 1px solid ", ";\n border-radius: 4px;\n\n & + & {\n margin-top: 4px;\n }\n"])), function (_ref) {
var color1 = _ref.color1;
return color1;
}, function (_ref2) {
var color2 = _ref2.color2;
return color2;
}, function (_ref3) {
var theme = _ref3.theme;
return theme.colorBorderSecondary;
});
var ShieldBlock = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n display: flex;\n align-items: center;\n width: 80px;\n"])));
/******************************************************
************************* Dom *************************
******************************************************/
var AccessBlock = /*#__PURE__*/memo(function (_ref4) {
var color1 = _ref4.color1,
color2 = _ref4.color2,
children = _ref4.children;
return /*#__PURE__*/_jsxs(Block, {
color1: color1,
color2: color2,
children: [/*#__PURE__*/_jsx(ShieldBlock, {
children: /*#__PURE__*/_jsx(W3cShield, {
color1: color1,
color2: color2
})
}), /*#__PURE__*/_jsx("div", {
children: children ? children : "".concat(tinycolor(color1).toHexString(false), " on ").concat(tinycolor(color2).toHexString(false))
})]
});
});
export default AccessBlock;