1import React from 'react';
 2import { makeStyles } from '@material-ui/styles';
 3import {
 4  getContrastRatio,
 5  darken,
 6} from '@material-ui/core/styles/colorManipulator';
 7import { common } from '@material-ui/core/colors';
 8
 9// Minimum contrast between the background and the text color
10const contrastThreshold = 2.5;
11
12// Guess the text color based on the background color
13const getTextColor = background =>
14  getContrastRatio(background, common.white) >= contrastThreshold
15    ? common.white // White on dark backgrounds
16    : common.black; // And black on light ones
17
18const _rgb = color => 'rgb(' + color.R + ',' + color.G + ',' + color.B + ')';
19
20// Create a style object from the label RGB colors
21const createStyle = color => ({
22  backgroundColor: _rgb(color),
23  color: getTextColor(_rgb(color)),
24  borderBottomColor: darken(_rgb(color), 0.2),
25});
26
27const useStyles = makeStyles(theme => ({
28  label: {
29    ...theme.typography.body2,
30    padding: '0 6px',
31    fontSize: '0.9em',
32    margin: '0 1px',
33    borderRadius: '3px',
34    display: 'inline-block',
35    borderBottom: 'solid 1.5px',
36    verticalAlign: 'bottom',
37  },
38}));
39
40function Label({ label }) {
41  const classes = useStyles();
42  return (
43    <span className={classes.label} style={createStyle(label.color)}>
44      {label.name}
45    </span>
46  );
47}
48
49export default Label;