How to use the chroma-js.blend function in chroma-js

export const buttonColor = (props) => {
  const value = themeGet(`colors.${props.color}`, props.theme.colors.gray.base)(props);

  return `
    color: ${value};
    border-color: ${chroma.blend(value, '#bbb', 'screen')};
  `;
};

export const blendColors = (theme, color, accent) => {
	const alteredAccent = chroma(accent).set('hsv.s', 0.03).set('hsv.v', 1).hex();
	const blendMode = theme === 'dark' ? 'burn' : 'multiply';

	return chroma.blend(color, alteredAccent, blendMode).hex();
};

${props => {
    const color =
      theme.colors.channel[props.visibility] ||
      themeGet(`colors.${props.color}`, props.theme.colors.gray.base)(props)

    return `
      color: ${color};
      border-color: ${
        props.mode === 'hover'
          ? `border-color: ${color};`
          : blend(color, '#bbb', 'screen')
      };

      &:hover {
        border-color: ${color};
      }
    `
  }}
`

return (background: Color, foreground: Color, value: number): Chroma => {
        const adjustment: Chroma = Chroma.blend(background, foreground, name);
        return Chroma.mix(foreground, adjustment, value, "rgb");
    };
}

${(props) => {
    const color = theme.colors.channel[props.visibility] ||
      themeGet(`colors.${props.color}`, props.theme.colors.gray.base)(props);

    return `
      color: ${color};
      border-color: ${props.mode === 'hover' ? `border-color: ${color};` : blend(color, '#bbb', 'screen')};

      &:hover {
        border-color: ${color};
      }
    `;
  }}
`;

export const buttonColor = props => {
  const value = themeGet(`colors.${props.color}`, props.theme.colors.gray.base)(
    props
  )

  return `
    color: ${value};
    border-color: ${chroma.blend(value, '#bbb', 'screen')};
  `
}