How to use the polished.rgba function in polished

export function adjustLightness(amount, color) {
  const { red, green, blue, alpha = 1 } = parseToRgb(color)
  let rgb
  if (amount === 0) {
    rgb = rgba(0, 0, 0, alpha)
  } else if (amount === 1) {
    rgb = rgba(255, 255, 255, alpha)
  } else {
    let maxIteration = 20
    const test = (color1, color2) => {
      const mixed = mix(0.5, color1, color2)
      const mixedlightness = getLightness(mixed)
      if (Math.abs(amount - mixedlightness) < EPS || !maxIteration--) {
        return mixed
      }
      if (mixedlightness > amount) {
        return test(color1, mixed)
      }
      return test(mixed, color2)
    }
    rgb = getLightness(color) > amount

    background: ${props => rgba(props.theme.brand03, 0.16)};
  }

top: 50%;
        left: 50%;
        margin: -9px 0 0 -9px;
        ${showLoaderCss};
      }
    `
        : ''
    }

    ${
      props.ghost
        ? `
       ${!props.disabled &&
         `
         &:hover {
           background: ${rgba(textColor, 0.09)};
         }
         &:active {
           background: ${rgba(textColor, 0.17)};
         }
         &:focus {
           box-shadow: 0 0 3px 3px ${rgba(textColor, 0.25)};
         }
     `}`
        : props.disabled
          ? `
        background: ${tint(
          props.tone === 'light' ? 0.5 : 0.25,
          backgroundColor
        )};
        color: ${tint(0.4, textColor)};
      `

}
}

const Line = styled.div`white-space: nowrap;`

const RefreshButton = styled.div`
  display: inline-block;
  margin-top: 4px;
  color: ${colors.ultraBlue};
  cursor: pointer;
  padding: 4px 5px;
  user-select: none;
  border-radius: 3px;

  &:hover {
    background-color: ${rgba(colors.ultraBlue, 0.06)};
  }
`

const Loader = styled.div`text-align: center;`

const Container = styled.div`
  width: ${variables.containerWidth};
  margin: auto;
`

const Separator = styled.span`
  font-size: 13px;
  color: ${colors.gray};
`

const CategoryContent = styled.div`

h6 {
        font-size: 1rem;
    }

    a {
        color: ${COLOR_ACCENT};
        transition: color 200ms ease;

        &:hover,
        &:focus {
            color: ${rgba(COLOR_ACCENT, 0.75)};
        }
    }

    code {
        background: ${rgba(COLOR_ACCENT, 0.05)};
        display: inline-block;
        padding: 0 2px;
    }

    pre code {
        background: transparent;
        border: 0;
        display: block;
        padding: 1em;
    }

    main {
        display: flex;
        flex-direction: column;
        padding: 3rem 1.5rem 0;
        margin: 0;

export const transparentize = (amount: number, color: string): string => {
  if (color === 'transparent') {
    return color;
  }

  const parsedColor = parseToRgb(color);
  const alpha: number =
    'alpha' in parsedColor && typeof parsedColor.alpha === 'number' ? parsedColor.alpha : 1;
  const colorWithAlpha = {
    ...parsedColor,
    alpha: clampValue((alpha * 100 - amount * 100) / 100, 0, 1),
  };

  return rgba(colorWithAlpha);
};

color: ${color.dark};
      background: transparent;

      ${!props.isLoading &&
        `
          &:hover {
            box-shadow: ${color.mediumdark} 0 0 0 1px inset;
          }

          &:active {
            background: ${color.medium};
            box-shadow: ${color.medium} 0 0 0 1px inset;
            color: ${color.darkest};
          }
          &:focus {
            box-shadow: ${color.medium} 0 0 0 1px inset, ${rgba(
          color.secondary,
          0.4
        )} 0 1px 9px 2px;
          }
          &:focus:hover {
            box-shadow: ${color.medium} 0 0 0 1px inset, ${rgba(
          color.secondary,
          0.2
        )} 0 8px 18px 0px;
          }
        `};
    `};

borderColor: props =>
        rgba(theme.color[props.layer].dark, theme.alpha / 2),
      borderWidth: '0 0 1px',

[MODE_DARK_NIGHT_FROST]: colors.background.sectioning.tertiary[MODE_DARK_NIGHT_FROST]
});

const decorationBaseStyles = css`
  position: absolute;
  z-index: ${zIndexFor(Z_INDEX_ELEMENTS.DECORATIONS)};
  transition: fill ${motion.speed.duration.transition.base.themeModeSwitch}ms ease-in-out;
`;

const decorationSectionColorPaletteModularityFillColor = themedMode({
  [MODE_BRIGHT_SNOW_FLURRY]: colors.nord5,
  [MODE_DARK_NIGHT_FROST]: colors.nord1
});

const decorationSectionHeroFillColor = themedMode({
  [MODE_BRIGHT_SNOW_FLURRY]: rgba(colors.nord6, 0.4),
  [MODE_DARK_NIGHT_FROST]: colors.nord1
});

const decorationSectionColorSwatchFillColor = themedMode({
  [MODE_BRIGHT_SNOW_FLURRY]: colors.nord6,
  [MODE_DARK_NIGHT_FROST]: colors.nord2
});

export {
  darkenedThemeModeBackgroundbackgroundColor,
  decorationBaseStyles,
  decorationSectionColorPaletteModularityFillColor,
  decorationSectionColorSwatchFillColor,
  decorationSectionHeroFillColor
};