d2-ui/lib/data-table/data-value/Color.component.js

d2-ui

import React from 'react';
import { hcl } from 'd3-color';

export default function Color(props) {
    var styles = {
        color: {
            backgroundColor: props.value,
            color: hcl(props.value).l < 70 ? '#fff' : '#000',
            textAlign: 'center',
            position: 'relative',
            width: 90,
            height: 36,
            lineHeight: 2.5,
            boxShadow: '0 1px 6px rgba(0,0,0,0.12),0 1px 4px rgba(0,0,0,0.12)'
        }
    };

    return React.createElement(
        'div',
        { style: styles.color },
        props.value
    );
};