kitchen-color-studio
Version:
an open-source color editor for designing color system
69 lines (66 loc) • 2.44 kB
JavaScript
import { Tooltip } from 'antd';
import { memo } from 'react';
import styled from 'styled-components';
import { readable } from "./..";
/******************************************************
*********************** Style *************************
******************************************************/
import { jsx as _jsx } from "react/jsx-runtime";
import { jsxs as _jsxs } from "react/jsx-runtime";
var Tag = styled.div.withConfig({
displayName: "Tag",
componentId: "kitchen-color-studio__sc-97ru05-0"
})(["display:inline-block;margin-left:4px;padding:2px 4px;font-size:10px;line-height:1;background:", ";border-radius:4px;"], function (_ref) {
var theme = _ref.theme;
return theme.colorPrimary;
});
/******************************************************
************************* Dom *************************
******************************************************/
var W3cShield = /*#__PURE__*/memo(function (_ref2) {
var color1 = _ref2.color1,
color2 = _ref2.color2;
var readableData = readable(color1, color2);
var url = readableData.shield;
var resultText = function resultText(result) {
return /*#__PURE__*/_jsx("span", {
style: {
color: result ? '#52c41a' : 'gray'
},
children: result ? 'pass' : 'fail'
});
};
var text = /*#__PURE__*/_jsxs("div", {
children: [/*#__PURE__*/_jsxs("div", {
children: ["CTS \u21E2 ", readableData.cts]
}), /*#__PURE__*/_jsxs("div", {
children: ["AA", /*#__PURE__*/_jsx(Tag, {
children: "large"
}), " \u21E2 ", resultText(readableData.aaLarge)]
}), /*#__PURE__*/_jsxs("div", {
children: ["AA", /*#__PURE__*/_jsx(Tag, {
children: "small"
}), " \u21E2 ", resultText(readableData.aaaSmall)]
}), /*#__PURE__*/_jsxs("div", {
children: ["AAA", /*#__PURE__*/_jsx(Tag, {
children: "large"
}), " \u21E2 ", resultText(readableData.aaaLarge)]
}), /*#__PURE__*/_jsxs("div", {
children: ["AAA", /*#__PURE__*/_jsx(Tag, {
children: "small"
}), " \u21E2 ", resultText(readableData.aaaSmall)]
})]
});
return /*#__PURE__*/_jsx(Tooltip, {
title: text,
children: /*#__PURE__*/_jsx("a", {
href: "https://www.w3.org/TR/2008/REC-WCAG20-20081211/#contrast-ratiodef",
rel: "noreferrer",
target: "_blank",
children: /*#__PURE__*/_jsx("img", {
src: url
})
})
});
});
export default W3cShield;