How to use the polished.tint function in polished

green: {
    base: baseColors.green,
    text: baseColors.white,
    light: [null, tint(0.9, baseColors.green)],
    dark: [null, shade(0.4, baseColors.green)],
  },
  yellow: {
    base: baseColors.yellow,
    text: readableColor(baseColors.yellow),
    light: [null, tint(0.9, baseColors.yellow)],
    dark: [null, shade(0.4, baseColors.yellow)],
  },
  red: {
    base: baseColors.red,
    text: readableColor(baseColors.red),
    light: [null, tint(0.9, baseColors.red)],
    dark: [null, shade(0.4, baseColors.red)],
  },
};

const blurple = colors.blurple;
const blue = colors.blue;
const green = colors.green;
const yellow = colors.yellow;
const red = colors.red;

// theme.js
export default {
  fontSizes: [12, 14, 16, 20, 24, 32, 48, 64],
  fontWeights: [0, 300, 400, 600, 700],
  letterSpacings: [0, 1, 2, 4, 8],
  lineHeights: {

backgroundColor: tint(0.9, green.base),
      borderColor: green.base,
    },
    warning: {
      color: shade(0.4, yellow.base),
      backgroundColor: tint(0.9, yellow.base),
      borderColor: yellow.base,
    },
    danger: {
      color: shade(0.4, red.base),
      backgroundColor: tint(0.9, red.base),
      borderColor: red.base,
    },
    info: {
      color: shade(0.4, blue.base),
      backgroundColor: tint(0.9, blue.base),
      borderColor: blue.base,
    },
  },
  buttons: {
    primary: {
      color: blurple.text,
      backgroundColor: blurple.base,
      // use css custom props
      '--main-color': blurple.base,
      '--contrast-color': blurple.text,
    },
    success: {
      '--main-color': green.base,
      '--contrast-color': green.text,
    },
    danger: {

backgroundColor: tint(0.9, '#AAA'),
      borderColor: '#AAA',
    },
    success: {
      color: shade(0.4, green.base),
      backgroundColor: tint(0.9, green.base),
      borderColor: green.base,
    },
    warning: {
      color: shade(0.4, yellow.base),
      backgroundColor: tint(0.9, yellow.base),
      borderColor: yellow.base,
    },
    danger: {
      color: shade(0.4, red.base),
      backgroundColor: tint(0.9, red.base),
      borderColor: red.base,
    },
    info: {
      color: shade(0.4, blue.base),
      backgroundColor: tint(0.9, blue.base),
      borderColor: blue.base,
    },
  },
  buttons: {
    primary: {
      color: blurple.text,
      backgroundColor: blurple.base,
      // use css custom props
      '--main-color': blurple.base,
      '--contrast-color': blurple.text,
    },

export const generateColorVariants = ({
  color,
  paletteKey,
  paletteOverrides
}: {
  color: string;
  paletteKey: string;
  paletteOverrides?: ({ color }: { color: string }) => {};
}) => {
  return {
    [`${paletteKey}100`]: tint(0.7, color),
    [`${paletteKey}200`]: tint(0.5, color),
    [`${paletteKey}300`]: tint(0.3, color),
    [`${paletteKey}400`]: tint(0.1, color),
    [paletteKey]: color,
    [`${paletteKey}500`]: color,
    [`${paletteKey}600`]: shade(0.1, color),
    [`${paletteKey}700`]: shade(0.3, color),
    [`${paletteKey}800`]: shade(0.5, color),
    [`${paletteKey}900`]: shade(0.7, color),
    [`${paletteKey}Tint`]: tint(0.9, color),
    [`${paletteKey}Inverted`]: readableColor(color),
    [`${paletteKey}TintInverted`]: shade(0.5, color),
    ...(paletteOverrides ? paletteOverrides({ color }) : {})
  };
};

const generateTextVariants = (textColor: string) => ({
    text100: lighten(0.2, textColor),
    text200: lighten(0.15, textColor),
    text300: lighten(0.1, textColor),
    text400: lighten(0.05, textColor),
    text: textColor,
    textTint: tint(0.8, textColor),
    textInverted: readableColor(textColor),
    textTintInverted: shade(0.3, textColor)
  });

background-color: ${props => {
    return tint(0.1, getEuiIconColor(props.theme, props.suggestionType));
  }};
  color: ${props => {

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import styled from 'styled-components';
import { isEmpty } from 'lodash';
import Suggestion from './Suggestion';
import { units, px, unit } from '../../../../style/variables';
import { tint } from 'polished';
import theme from '@elastic/eui/dist/eui_theme_light.json';

const List = styled.ul`
  width: 100%;
  border: 1px solid ${theme.euiColorLightShade};
  border-radius: ${px(units.quarter)};
  box-shadow: 0px ${px(units.quarter)} ${px(units.double)}
    ${tint(0.1, theme.euiColorFullShade)};
  position: absolute;
  background: #fff;
  z-index: 10;
  left: 0;
  max-height: ${px(unit * 20)};
  overflow: scroll;
`;

class Suggestions extends Component {
  childNodes = [];

  scrollIntoView = () => {
    const parent = this.parentNode;
    const child = this.childNodes[this.props.index];

    if (this.props.index == null || !parent || !child) {

background: ${props =>
    props.tone === 'primary'
      ? tint(0.07, props.theme.primaryColor)
      : props.theme.componentBackground};
`;

  background-color: ${props => tint(0.15, props.theme.primaryColor)};
  display: flex;

    border-color: ${(props: any) => tint(0.5, palette(props.palette || 'primary', 0, defaultPalette.primary)(props))};
  `,