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

// @flow
import { css } from 'emotion'
import facepaint from 'facepaint'
import { util, constants } from 'styled-system'
import darken from 'polished/lib/color/darken'
import lighten from 'polished/lib/color/lighten'

export const colors = {
  pink: '#D26AC2',
  blue: '#46C9E5',
  yellow: '#FFCA2A',
  dark: '#1D2029',
  darken,
  lighten,
  darken1: darken(0.1),
  darken2: darken(0.15),
  darken3: darken(0.2),
  reallyLightPink: '#f9e9fb'
}

export const animatedUnderline = css`
  &::after {
    content: '';
    display: block;
    width: 100%;
    margin-top: 4px;
    height: 4px;
    transition: transform 250ms ease;
    transform: scaleX(0);
    background-color: hotpink;
  }
  &.active::after,

const adjust = (color: string, expected: number, actual: number) => {
  if (expected !== actual) {
    // Adjust darkness/lightness if color is not the expected shade.
    const amount = (Math.abs(expected - actual) / 100) * 0.05;

    return expected > actual ? darken(amount, color) : lighten(amount, color);
  }

  return color;
};

export const paginationDisabledColor = gray600;
export const paginationDisabledBg = white;
export const paginationDisabledBorderColor = '#ddd';

// Form states and alerts
//
// Define colors for form feedback states and, by default, alerts.

export const stateSuccessText = '#3c763d';
export const stateSuccessBg = '#dff0d8';
export const stateSuccessBorderColor = darken(0.05, stateSuccessBg);

export const stateInfoText = '#31708f';
export const stateInfoBg = '#d9edf7';
export const stateInfoBorderColor = darken(0.07, stateInfoBg);

export const stateWarningText = '#8a6d3b';
export const stateWarningBg = '#fcf8e3';
export const markBg = stateWarningBg;
export const stateWarningBorderColor = darken(0.05, stateWarningBg);

export const stateDangerText = '#a94442';
export const stateDangerBg = '#f2dede';
export const stateDangerBorderColor = darken(0.05, stateDangerBg);

// Badges

export const badgeDefaultBg = gray600;
export const badgePrimaryBg = themeColors.primary;
export const badgeSuccessBg = themeColors.success;
export const badgeInfoBg = themeColors.info;

let styles = {
    color: theme.color_theme,
    fontSize: '1.5em',
    margin: `${theme.baseline_2} auto`,
    width: 'min-content'
  };

  if (fancy) {
    styles = {
      ...styles,
      animation: `${loading} 2s`,
      animationIterationCount: 'infinite',
      background: `linear-gradient(90deg,
        ${lighten(0.1, theme.color_theme)},
        ${darken(0.2, theme.color_theme)},
        ${lighten(0.1, theme.color_theme)},
        ${darken(0.2, theme.color_theme)}
      )`,
      backgroundPosition: '0 0',
      backgroundSize: '300% 100%',
      color: 'white',
      WebkitBackgroundClip: 'text',
      WebkitTextFillColor: 'transparent'
    };
  }

  return styles;
});

color_theme: mineralTheme.color_success,

    SiteLink_borderColor_focus: mineralTheme.color_success,
    SiteLink_color: mineralTheme.color_success,
    SiteLink_color_active: mineralTheme.color_success,
    SiteLink_color_hover: mineralTheme.color_success,
    SiteLink_color_focus: mineralTheme.color_success
  },
  dont: {
    borderColor: mineralTheme.borderColor_danger,
    color_theme: darken(0.1, mineralTheme.color_danger),

    SiteLink_borderColor_focus: darken(0.1, mineralTheme.color_danger),
    SiteLink_color: darken(0.1, mineralTheme.color_danger),
    SiteLink_color_active: darken(0.1, mineralTheme.color_danger),
    SiteLink_color_hover: darken(0.1, mineralTheme.color_danger),
    SiteLink_color_focus: darken(0.1, mineralTheme.color_danger)
  }
};

const styles = {
  root: ({ theme }) => ({
    [theme.bp_interior_bestPracticesMultiColumn]: {
      display: 'flex',
      alignItems: 'stretch',
      justifyContent: 'space-between'
    }
  }),
  example: ({ backgroundColor, theme }) => ({
    backgroundColor,
    border: `1px solid ${rgba(theme.borderColor, 0.3)}`,
    padding: theme.space_inset_md,

display: ['block', 'block', 'none'],
        position: 'fixed',
        bottom: '0',
        right: '0',
        borderRadius: '50%',
        backgroundColor: colors.hightlight,
        padding: '16px',
        margin: '32px',
        animation: `0.25s ease-in ${scaleAnimation}`,
        transition: '150ms ease-in-out background-color',
        border: '0',
        '&:hover,&:focus': {
          backgroundColor: darken(0.15)(colors.hightlight)
        },
        '&:active': {
          backgroundColor: darken(0.25)(colors.hightlight)
        }
      })}
      onClick={() => setSidebarOpen(true)}
      {...rest}
    />
  )
}

import lighten from 'polished/lib/color/lighten';
import darken from 'polished/lib/color/darken';
import shade from 'polished/lib/color/shade';

export const paleGrey = '#efefef';
export const lightGrey = 'rgba(20, 20, 20, 0.1)';
export const darkGrey = darken(0.05, '#282a36');
export const grey = '#282a36';

export const red = '#ff5555';
export const violetRed = 'rgb(219, 112, 147)';
export const darkVioletRed = darken(0.1, 'rgb(219, 112, 147)');
export const lightVioletRed = lighten(0.31, 'rgb(219, 112, 147)');

export const gold = shade(0.9, 'rgb(243, 182, 97)');

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

  background: ${p => darken(0.01, preBg(p))};
  box-sizing: content-box;

font-weight: 600;
  border-radius: ${rem(5)};
  background: ${specialRed};
  color: white;
  cursor: pointer;
  user-select: none;
  text-decoration: none;
  transition:
    background 100ms ease-out,
    color 100ms ease-out,
    transform 100ms ease-out;

  &:hover,
  &:focus {
    background: ${darken(0.15, specialRed)};
    color: ${darken(0.07, 'white')};
  }

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

  &:active {
    transform: scale(0.95);
  }

  ${p => p.disabled ? css`
    background: ${disabledBg};
    color: ${disabledColor};
    cursor: default;

    &:hover {