dumi-plugin-color-chunk/es/component/index.js

Dumi Plugin - Beautify inline color blocks

import * as React from 'react';
import Color from "../core/Color";
import { jsx as _jsx } from "react/jsx-runtime";
import { jsxs as _jsxs } from "react/jsx-runtime";
function ColorChunk(props) {
  var children = props.children,
    value = props.value;
  var dotStyle = React.useMemo(function () {
    return {
      display: 'inline-block',
      backgroundColor: value,
      width: '6px',
      height: '6px',
      borderRadius: '50%',
      marginInlineStart: '4px',
      border: "1px solid ".concat(new Color(value).darken(10).toHex8String(true))
    };
  }, [value]);
  return /*#__PURE__*/_jsxs("code", {
    "aria-label": "Color: ".concat(value),
    children: [children || value, /*#__PURE__*/_jsx("span", {
      style: dotStyle
    })]
  });
}

// ====== Export ======
export { Color };
export default /*#__PURE__*/React.memo(ColorChunk);