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

},

      '& code': {
        wordBreak: 'break-all'
      }
    },

    '& pre': {
      ...getCodeBlockStyles(theme),
      // to baseline
      margin: `${getNormalizedValue(pxToEm(31), theme.fontSize_ui)} 0
        ${getNormalizedValue(pxToEm(42), theme.fontSize_ui)}`
    },

    '& :not(pre) > code': {
      backgroundColor: rgba(theme.color_theme, 0.15),
      color: darken(0.1, theme.color_theme),
      direction: 'ltr',
      fontFamily: theme.fontFamily_monospace,
      fontSize: '0.8em',
      fontWeight: '500',
      hyphens: 'none',
      padding: `${parseFloat(theme.space_inset_sm) / 2}em`,
      wordBreak: 'normal',
      wordSpacing: 'normal',
      wordWrap: 'normal'
    },

    '& > p > img': {
      maxWidth: '100%'
    }
  })

},
      '&:focus': {
        color: linkColors.focus,
        outline: `1px solid ${darken(0.1, theme.SiteLink_borderColor_focus)}`,
        outlineOffset: '2px'
      },
      // `:active` must be last, to follow LVHFA order:
      // https://developer.mozilla.org/en-US/docs/Web/CSS/:active
      '&:active': {
        color: linkColors.active,
        textDecoration: 'none'
      },

      '&[href^="http"]': {
        '&:link::after': {
          borderBottom: `1px solid ${rgba(theme.color_theme, 0.5)}`,
          backgroundImage: getIcon(linkColors.idle),
          backgroundPosition: 'top right',
          backgroundRepeat: 'no-repeat',
          boxSizing: 'content-box',
          content: '""',
          display: 'inline-block',
          height: '1em',
          paddingLeft: theme.space_inline_xs,
          position: 'relative',
          top: 2,
          width: '1em'
        },

        '&:visited::after': {
          backgroundImage: getIcon(linkColors.visited)
        },

if (!retVal) {
      const _shade = Object.keys(_hue)
        .map(hueKey => parseInt(hueKey, 10))
        .reduce((previous, current) => {
          // Find the closest available shade within the given hue.
          return Math.abs(current - shade) < Math.abs(previous - shade) ? current : previous;
        });

      retVal = adjust(_hue[_shade], shade, _shade);
    }
  } else {
    retVal = adjust(_hue, shade, DEFAULT_SHADE);
  }

  if (transparency) {
    retVal = rgba(retVal, transparency);
  }

  return retVal;
}

  background-color: ${props => (props.dark ? rgba(zdColorWhite, 0.2) : rgba(zdColorGrey800, 0.1))};
  width: ${props => props.customWidth};

header: ({ theme }) => ({
    backgroundColor: rgba(theme.borderColor, 0.1),
    borderTop: `3px solid ${rgba(theme.borderColor, 0.6)}`,
    padding: `${theme.baseline_1} ${theme.baseline_2}`,

    [theme.bp_interior_bestPracticesMultiColumn]: {
      borderLeft: `3px solid ${rgba(theme.borderColor, 0.6)}`,
      borderTop: 0,
      width: `${(5 / 12) * 100}%`
    },

    ...clearFix(),

    '& ::selection': {
      backgroundColor: rgba(theme.color_theme, 0.2)
    },

    '& > [role="img"]': {
      backgroundColor: rgba(theme.borderColor, 0.2),

    background-color: ${props => rgba(props.theme.palette.white as string, 0.03)};
  }

    color: ${p => rgba(textColor(p), 0.4)};
  }

${p =>
    placeholder({
      color: rgba(sidebarText(p), 0.5),
    })};
`

import React from 'react';
import PropTypes from 'prop-types';
import styled from 'styled-components';
import rgba from 'polished/lib/color/rgba';
import { appColor, headerHeight } from 'modules/theme';

import { logOut } from 'actions/index';

import { Container, utils } from 'styled-minimal';
import Icon from 'components/Icon';
import Logo from 'components/Logo';

const { responsive, spacer } = utils;

const HeaderWrapper = styled.header`
  background-color: ${rgba(appColor, 0.9)};
  height: ${headerHeight}px;
  left: 0;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 200;

  &:before {
    background-color: ${appColor};
    bottom: 0;
    content: '';
    height: 0.2rem;
    left: 0;
    position: absolute;
    right: 0;
  }