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.body1,
30    padding: '1px 6px 0.5px',
31    fontSize: '0.9em',
32    fontWeight: '500',
33    margin: '0.05em 1px calc(-1.5px + 0.05em)',
34    borderRadius: '3px',
35    display: 'inline-block',
36    borderBottom: 'solid 1.5px',
37    verticalAlign: 'bottom',
38  },
39}));
40
41function Label({ label }) {
42  const classes = useStyles();
43  return (
44    <span className={classes.label} style={createStyle(label.color)}>
45      {label.name}
46    </span>
47  );
48}
49
50export default Label;