How to use the polished.transparentize function in polished

function getButtonShadow(state) {
  const isFocused = state === 'focused';
  return [
    state === 'active'
      ? `inset 0 2px 2px 0 ${transparentize(0.88, colors.shadow)}`
      : `0 1px 4px 0 ${transparentize(0.92, colors.shadow)}`,
    `inset 0 -1px 0 0 ${transparentize(0.95, colors.shadow)}`,
    isFocused && `0 0 0 2px ${colors.highlight2}`,
    `inset 0 0 0 1px ${
      isFocused ? colors.highlight : transparentize(0.8, colors.shadow)
    }`
  ]
    .filter(Boolean)
    .toString();
}

activeGradient: `linear-gradient(90deg, ${colors.activeSecondary} 0%, ${colors.active} 100%)`,
  secondaryActiveColor: '#fff',
  shadow: transparentize(0.5, colors.primary),
}

const card = {
  background: 'linear-gradient(180deg, #FFFFFF 51.56%, #F7FCFF 100%), #FFFFFF',
  shadow: '0 10px 20px rgba(148, 188, 224, 0.16), 0 30px 50px rgba(152, 210, 251, 0.2)',
  borderRadius: '10px',
  borderColor: '#FFFFFF',
}

const dataCard = {
  secondaryBackground: colors.primary,
  axis: '#9A9DAD',
  secondaryAxis: transparentize(0.3, colors.activeText),
  lines: mix(0.5, colors.active, colors.activeSecondary),
  linesSecondary: mix(0.5, '#2FF6F5', '#0470FE'),
  svgLines: 'url(#lightLine)',
  svgLinesSecondary: 'url(#lightLineSecondary)',
  lineFilter: 'url(#lightLineShadow)',
  secondaryLines: colors.activeText,
  tooltipBackground: '#FFFFFF',
  secondaryTooltipBackground: '#0E0B20',
  cartesianGrid: '#EDF0F2',
  areaColor: mix(0.5, '#2FF6F5', '#0470FE'),
  areaTrend: mix(0.5, colors.active, colors.activeSecondary),
  svgAreaColor: 'url(#lightAreaChart)',
  svgAreaTrend: 'url(#lightLine)',
}

const input = {

const borderColorMixin = ({ color, fade }) => {
  const dividerColor = COLORS[color] || color;
  return fade ? `
    border-image: linear-gradient(
      90deg,
      ${transparentize(1, dividerColor)},
      ${transparentize(0, dividerColor)} 50%,
      ${transparentize(1, dividerColor)} 100%
    ) 0 0 100%;
  ` : `
    border-color: ${dividerColor};
  `;
};

${({ isSubmitting }) => isSubmitting && css`
    svg {
      animation: ${spin} 1s linear infinite;
    }
  `}
`;

export const SearchInput = styled.input`
  ${resetInput}
  width: 0;
  height: ${componentHeight}px;
  line-height: ${componentHeight}px;
  border-radius: ${componentHeight}px;
  padding: 0;
  border: 1px solid ${transparentize(0.1, blueLight)};
  border-width: 0;
  font-size: 1.5em;
  transition: all 0.4s ease-in-out;

  &:focus{
    outline-width: 0;
  }

  ${({ isExpanded }) => isExpanded && css`
    border-top-width: 1px;
    border-bottom-width: 1px;
    border-left-width: 1px;
    width: 300px;
    padding: 5px 20px;
    border-radius: ${componentHeight}px 0 0 ${componentHeight}px;
  `}

const SubNavigationLink = styled.a`
  display: inline-block;
  box-sizing: border-box;
  width: 100%;
  padding: 0.25em 0.5em;
  color: #000;
  text-decoration: none;

  &:visited {
    color: #000;
  }

  &:active,
  &:focus,
  &:hover {
    background: ${transparentize(0.75, '#428bca')};
  }

  &:focus {
    outline: 2px solid #428bca;
  }
`.withComponent(Link)

const ItemDescription = styled.div`
  margin-top: 0.125em;
  margin-left: 5px;
  font-size: 0.8em;
  opacity: 0.6;
`

class NavigationMenu extends Component {
  static propTypes = {

import styled from "styled-components";
import { transparentize } from "polished";

import { white, grey } from "common/styles/colors";
import { delta } from "common/styles/typography";

export const Heading = styled.h3`
  ${delta} margin: 0 0 1.25em;
  color: ${transparentize(0.1, grey[5])};
  font-weight: 400;
  line-height: 1.15;
  border-bottom: 2px solid ${transparentize(0.75, grey[5])};
`;

export const Text = styled.span`
  display: inline-block;
  position: relative;
  top: 0.5em;
  margin-left: 0.5em;
  padding: 0 0.25em;
  background-color: ${({ bgColor }) => bgColor};
`;

export const Count = styled.strong`
  font-size: 0.9em;

      background-color: ${({ theme }) => transparentize(0.5, `${theme.palette.black}`)};
    }

font-weight: 400;
  line-height: 1.625;
  text-align: center;
`;

const Success = styled(Text)`
  color: ${transparentize(0.4, colors.green)};
`;

const ErrorText = styled(Text)`
  color: ${transparentize(0.4, colors.red)};
`;

const Sender = styled(Text)`
  margin: 0 0 12px;
  color: ${transparentize(0.4, colors.text)};
`;

const StyledSpinner = styled(Spinner)`
  margin: 17px 0 29px;
`;

const LinkButton = styled(Button)`
  position: absolute;
  bottom: 30px;
  left: 50%;
  color: ${colors.blue};
  font-size: 15px;
  font-weight: 400;
  line-height: 1.8;
  transform: translate(-50%, 0);

border-color: ${props =>
    props.theme.darkMode
      ? transparentize(0.7, darken(0.2, props.theme.eui.euiColorHighlight))
      : darken(0.2, props.theme.eui.euiColorHighlight)};
  color: ${props => props.theme.eui.euiColorFullShade};

`;

const StyledVerificationCodeField = styled(VerificationCodeField)`
  margin: 0 0 28px;
`;

const Text = styled.p`
  margin: 0 0 12px;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.625;
  text-align: center;
`;

const Success = styled(Text)`
  color: ${transparentize(0.4, colors.green)};
`;

const ErrorText = styled(Text)`
  color: ${transparentize(0.4, colors.red)};
`;

const Sender = styled(Text)`
  margin: 0 0 12px;
  color: ${transparentize(0.4, colors.text)};
`;

const StyledSpinner = styled(Spinner)`
  margin: 17px 0 29px;
`;

const LinkButton = styled(Button)`