kitchen-color-studio
Version:
an open-source color editor for designing color system
50 lines (47 loc) • 1.97 kB
JavaScript
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.withConfig({
displayName: "Block",
componentId: "kitchen-color-studio__sc-bkfini-0"
})(["overflow:hidden;display:flex;flex:1;align-items:center;justify-content:flex-start;width:100%;min-width:236px;padding:6px 12px 6px 6px;font-family:var(--leva-fonts-mono);font-size:12px;color:", ";background:", ";border:1px solid ", ";border-radius:4px;& + &{margin-top:4px;}"], 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.withConfig({
displayName: "ShieldBlock",
componentId: "kitchen-color-studio__sc-bkfini-1"
})(["display:flex;align-items:center;width:80px;"]);
/******************************************************
************************* 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;