1import { Chip } from '@material-ui/core';
 2import { common } from '@material-ui/core/colors';
 3import {
 4  darken,
 5  getContrastRatio,
 6} from '@material-ui/core/styles/colorManipulator';
 7
 8import { Color } from '../gqlTypes';
 9import { LabelFragment } from '../graphql/fragments.generated';
10
11const _rgb = (color: Color) =>
12  'rgb(' + color.R + ',' + color.G + ',' + color.B + ')';
13
14// Minimum contrast between the background and the text color
15const contrastThreshold = 2.5;
16// Guess the text color based on the background color
17const getTextColor = (background: string) =>
18  getContrastRatio(background, common.white) >= contrastThreshold
19    ? common.white // White on dark backgrounds
20    : common.black; // And black on light ones
21
22// Create a style object from the label RGB colors
23const createStyle = (color: Color, maxWidth?: string) => ({
24  backgroundColor: _rgb(color),
25  color: getTextColor(_rgb(color)),
26  borderBottomColor: darken(_rgb(color), 0.2),
27  maxWidth: maxWidth,
28});
29
30type Props = {
31  label: LabelFragment;
32  maxWidth?: string;
33  className?: string;
34};
35function Label({ label, maxWidth, className }: Props) {
36  return (
37    <Chip
38      size={'small'}
39      label={label.name}
40      className={className}
41      style={createStyle(label.color, maxWidth)}
42    />
43  );
44}
45export default Label;