How to use the polished/lib/color/lighten function in polished

const inputOnly = (): ?string => {
    let body;

    if (!isDefined(multiple)) {
      try {
        body = css`
          ${placeholder(`color: ${lighten(0.5, currentColor)};`)};

          &:read-only {
            background-color: ${darken(0.02, currentBgColor)};
            color: ${lighten(0.3, currentColor)};
          }
        `;
      } catch (error) {
        // what to do?
      }
    }

    return body;
  };
  const disabled = (): ?string => {

padding: 0;
    background-color: #ffffff;
    font-family: "proxima-nova", sans-serif;
    font-size: 18px;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  *, *:before, *:after {
    box-sizing: border-box;
  }

  a {
    color: ${lighten(0.2, specialRed)};
  }
`

export default class MyDocument extends Document {
  static getInitialProps({ renderPage }) {
    const sheet = new ServerStyleSheet()
    const page = renderPage(App => props =>
      sheet.collectStyles(),
    )
    const styleTags = sheet.getStyleElement()
    return { ...page, styleTags }
  }

  render() {
    return (

const getActionsBg = (p: ActionsProps) =>
  p.theme.docz.mode === 'light'
    ? lighten(0.13, borderColor(p))
    : darken(0.04, borderColor(p))

background: ${p =>
    p.theme.mode === 'light'
      ? lighten(0.1, p.theme.colors.border)
      : darken(0.1, p.theme.colors.border)};

  border: 1px solid ${p => lighten(0.03, borderColor(p))};
  border-radius: ${whenHorizontal('0 4px 4px 0', '0 0 4px 4px')};

yellow_hover: colors.yellow_40,

  cranberry: '#d1454a',
  cranberry_active: darken(0.05, '#d1454a'),
  cranberry_focus: '#d1454a',
  cranberry_hover: lighten(0.05, '#d1454a'),

  slateDarker: '#597a90',
  slateDarker_active: darken(0.05, '#597a90'),
  slateDarker_focus: '#597a90',
  slateDarker_hover: lighten(0.05, '#597a90'),

  grape: '#9a5fad',
  grape_active: darken(0.05, '#9a5fad'),
  grape_focus: '#9a5fad',
  grape_hover: lighten(0.05, '#9a5fad'),

  jade: '#09866e',
  jade_active: darken(0.05, '#09866e'),
  jade_focus: '#09866e',
  jade_hover: lighten(0.05, '#09866e'),

  orangePunch: '#d44511',
  orangePunch_active: darken(0.05, '#d44511'),
  orangePunch_focus: '#d44511',
  orangePunch_hover: lighten(0.05, '#d44511')
};

  border: 1px solid ${p => lighten(0.03, borderColor(p))};
  border-radius: ${whenHorizontal('0 4px 4px 0', '0 0 4px 4px')};

cranberry_hover: lighten(0.05, '#d1454a'),

  slateDarker: '#597a90',
  slateDarker_active: darken(0.05, '#597a90'),
  slateDarker_focus: '#597a90',
  slateDarker_hover: lighten(0.05, '#597a90'),

  grape: '#9a5fad',
  grape_active: darken(0.05, '#9a5fad'),
  grape_focus: '#9a5fad',
  grape_hover: lighten(0.05, '#9a5fad'),

  jade: '#09866e',
  jade_active: darken(0.05, '#09866e'),
  jade_focus: '#09866e',
  jade_hover: lighten(0.05, '#09866e'),

  orangePunch: '#d44511',
  orangePunch_active: darken(0.05, '#d44511'),
  orangePunch_focus: '#d44511',
  orangePunch_hover: lighten(0.05, '#d44511')
};

display: flex;
  align-items: center;
  justify-content: center;

  svg {
    display: block;
  }

  &:hover,
  &:focus {
    background: ${bgLightGrey};
  }

  &:focus {
    box-shadow: inset 0 0 0 3px ${lighten(0.3, specialRed)};
  }

  ${p => p.active ? css`
    background: ${specialRed};

    path {
      fill: #f2f2f2;
    }

    &:hover,
    &:focus {
      background: ${specialRed};
    }
  ` : ''}
`

background: ${p =>
    themeGet('mode')(p) === 'light'
      ? lighten(0.13, borderColor(p))
      : darken(0.04, borderColor(p))};
  border-left: 1px solid ${themeGet('colors.border')};