bluelib/src/components/Color/index.js

import React, {Fragment} from "react"
import useBluelibClassNames from "../../hooks/useBluelibClassNames"
import PropTypes from "prop-types"
import classNames from "classnames"
import color from "color"


export default function Color({children, builtin, custom}) {
    const potentialClassName = useBluelibClassNames(`color-${builtin}`)

    if (builtin && custom) {
        throw new Error("<Color> tags may only have one prop between `builtin` and `custom`.")
    }

    let extraClassName = ""
    let extraStyle = {}

    if (builtin !== undefined) {
        extraClassName = potentialClassName

    }
    if (custom !== undefined) {
        let c = color(custom)
        extraStyle["--bluelib-color-r"] = c.red()
        extraStyle["--bluelib-color-g"] = c.green()
        extraStyle["--bluelib-color-b"] = c.blue()
    }

    children = React.Children.map(children, child => {
        if (!child.props) {
            return child
        }
        return React.cloneElement(child, {
            className: classNames(child.props.className, extraClassName),
            style: {...child.props.style, ...extraStyle},
        })
    })

    return (
        <Fragment>
            {children}
        </Fragment>
    )
}


Color.propTypes = {
    children: PropTypes.node,
    builtin: PropTypes.oneOf(["red", "orange", "yellow", "lime", "cyan", "blue", "magenta", "gray"]),
    custom: PropTypes.string,
}