How to use the color function in color

} else {
      node.style.width = '100%';
      node.style.height = `${percentage}%`;
      node.style.top = `${offset}%`;
      node.style.left = `0`;
    }
    offset += percentage;
    if (child.totalFiles === 1) {
      node.classList.add('leaf');
      const [filename, file] = child.files.entries().next().value;
      node.title = `${filename}: ${(file.coveredStatements / file.totalStatements * 100).toFixed(0)}%`;
      node.style.backgroundColor = NO_COVERAGE.mix(FULL_COVERAGE, file.coveredStatements / file.totalStatements).hex();
      // Not having a border looks weird, but using a constant colour causes tiny boxes
      // to consist entirely of that colour. By using a border colour based on the
      // box colour, we still show some information.
      node.style.borderColor = Color(node.style.backgroundColor).darken(0.3).hex();
    } else {
      renderChildren(node, child, !horizontal);
    }
  }
}

const PublicTransportLine = ({ mode, info }) => {
  // @TODO: translate
  // @TODO: use network-specific iconography where possible
  let type = 'ligne';
  if (mode.startsWith('BUS')) {
    type = `bus ${info.network}`;
  } else if (mode.startsWith('SUBWAY')) {
    type = 'métro';
  } else if (mode.startsWith('TRAM')) {
    type = 'tram';
  } else if (info.network === 'RER') {
    type = 'RER';
  } else if (mode.indexOf('TRAIN') !== -1) {
    type = `train ${info.network}`;
  }
  const lineColor = info.lineColor ? Color('#' + info.lineColor) : Color('white');
  return <span style="{{">
    {type} {info.num}
  </span>;
};

.string();

  @def
  lightAccentColor = Color(this.accentColor)
    .lighten(0.3)
    .string();

  @def
  altBackgroundColor = Color(this.backgroundColor)
    .darken(0.03)
    .string();

  @def altBodyColor = this.altBackgroundColor; // DEPRECATED

  @def
  altBorderColor = Color(this.borderColor)
    .opaquer(0.3)
    .string();

  @def
  altInverseBorderColor = Color(this.inverseBorderColor)
    .opaquer(1)
    .string();

  @def baseTextColor = '#000';

  @def
  textColor = Color(this.baseTextColor)
    .alpha(0.87)
    .string();

  @def primaryTextColor = this.textColor; // DEPRECATED

function getHoverColor(theme, props) {
  if (
    props.isOutlined &&
    props.color !== "primary" &&
    props.color !== "secondary"
  ) {
    return Color(props.color)
      .lighten(0.55)
      .string();
  } else if (
    !props.isOutlined &&
    props.color !== "primary" &&
    props.color !== "secondary"
  ) {
    return Color(props.color)
      .darken(0.1)
      .string();
  } else if (props.isOutlined) {
    return Color(theme.colors[props.color])
      .lighten(0.55)
      .string();
  } else {
    return Color(theme.colors[props.color])
      .darken(0.1)
      .string();
  }
}

import Color from 'color';

export const black = Color('rgb(30, 30, 30)');
export const lblack = black.lighten(0.2);
export const white = Color('rgb(212, 212, 212)');
export const red = Color('rgb(244, 67, 54)');
export const purple = Color('rgb(197, 134, 192)');
export const vsblue = Color('rgb(0, 122, 204)');
export const blue = Color('rgb(86, 156, 214)');
export const lblue = Color('rgb(156, 220, 254)');
export const yellow = Color('rgb(220, 220, 170)');

${props =>
      Color(props.color)
        .darken(0.2)
        .hsl()
        .string()},
    ${props =>

styles = {
		section: {
			width: '275px',
			margin: '0 10px',
			padding: '10px 10px 5px 10px',
			backgroundColor: 'white',
			boxSizing: 'border-box'
		},
		active: {
			boxShadow: '0 0 10px 6px #2d7188',
			fontWeight: 'bold',
			animation: 'x .7s ease-out',
			animationName: Radium.keyframes({
				'0%': {boxShadow: 'none'},
				'40%': {boxShadow: '0 0 14px 9px ' + color('#2d7188').lighten(0.5).hexString()},
				'100%': {boxShadow: '0 0 10px 6px #2d7188'}
			})
		},
		inactive: {
			fontWeight: 'normal',
			boxShadow: 'none'
		},
		methodName: {
			display: 'flex',
			alignItems: 'center',
			flex: '1',
			position: 'relative',
			fontWeight: 'bold',
			wordBreak: 'break-word'
		},
		overriddenName: {

const all = COLORS.map((hex): Color =>
    Color(hex).rotate(amount)
  );

export function darken(color, value) {
  return Color(color)
    .darken(value)
    .string();
}