How to use the polished.darken function in polished

color: ${(props: any) =>
        props.palette === 'default'
          ? // @ts-ignore
            darken(0.5, palette('text', 0, defaultPalette.text)(props))
          : darken(0.5, palette()(props))};
      fill: ${(props: any) =>

a {
    color: #000;
    word-break: break-word;
    box-shadow: ${colors.blue} 0 -1px 0 inset;
  }

  a:hover {
    color: ${colors.blue};
    text-decoration: none;
  }

  strong,
  em {
    /* color: color(var(--darkgrey) l(-5%)); */
    color: ${darken('0.05', colors.darkgrey)};
  }

  small {
    display: inline-block;
    line-height: 1.6em;
  }

  li:first-child {
    margin-top: 0;
  }

  .gatsby-resp-image-link {
    box-shadow: none;
  }

  img,

mentionBg: '#F9FCFC',
    mentionBorder: primaryColor,
    mentionActiveBg: darken(0.1, '#F9FCFC'),
    mentionShadow: '0px 2px 10px 1px rgba(235, 235, 235, 1)',
  },
  editor: {
    title: '#7ea9ad',
    content: '#a6bebf',
    placeholder: '#B3CFD0',
    headerBg: '#F9FCFC',
    contentBg: '#F9FCFC',
    border: '#F9FCFC',
    borderActive: descText,
    borderNormal: '#e2eaea',
    footer: '#a6bebf',
    footerHover: darken(0.05, '#a6bebf'),
  },
  pagination: {
    activeNum: 'white',
    itemBg: '#cbe7ea',
    itemBorderColor: '#cbe7ea',
    disableText: '#BCD9DC',
    text: '#6d7f7b',
    inactiveNum: 'white',
  },

  heatmap: {
    activityLow: '#D6ECB2',
    activityHight: '#4F966E',
    borderHover: '#51abb2',
    empty: '#E4EEED',
    monthLabel: '#c6dbde',

const generateColor = color => ({
  base: color,
  light: lighten(accent, color),
  dark: darken(accent, color)
});
const generateBackground = color => ({

      color: ${({ theme }) => darken(0.05, theme.brandPrimary)};
      border-color: ${({ theme }) => darken(0.15, theme.brandPrimary)};

keyword: lighten(0.15, colors.red),
    string: lighten(0.3, colors.green),
    variable1: colors.lighterGrey,
    variable2: colors.lighterGrey,
    def: darken(0.05, colors.lightGrey),
    tag: lighten(0.07, colors.red),
    operator: lighten(0.15, colors.green),
    number: lighten(0.2, colors.green),
    function: colors.green,
    scrollbar: rgba(colors.white, 0.15),
  },
  light: {
    background: colors.lighterGrey,
    matchingBracket: colors.green,
    emphasisBackground: darken(0.08, colors.lighterGrey),
    matchingBackground: darken(0.04, colors.lighterGrey),
    text: colors.black,
    comment: colors.darkGrey,
    propAttr: lighten(0.15, colors.lightBlack),
    keyword: darken(0.05, colors.green),
    string: darken(0.1, colors.purple),
    variable1: darken(0.1, colors.red),
    variable2: darken(0.1, colors.green),
    def: lighten(0.15, colors.lightBlack),
    tag: darken(0.1, colors.green),
    operator: darken(0.25, colors.react),
    number: darken(0.3, colors.react),
    function: colors.green,
    scrollbar: rgba(colors.darkerGrey, 0.15),
  },
}

${({isActive}) =>
    isActive &&
    `
    background-color: #3c93f7;
    background-image: linear-gradient(to bottom, ${lighten(
      0.05,
      '#3c93f7',
    )} 0, #3c93f7 100%);
    background-image: none;
    border-color: #0b78f5 #0b78f5 ${darken(0.05, '#0b78f5')};
    color: white;

    &:active {
      background-color: ${darken(0.05, '#3c93f7')};
      color: white;
    }
  `};
`

taskDone: '#528416',
    taskPeding: lighten(0.1, contentBoxBg),
    br: '#d8e6d5',
  },
  code: {
    bg: lighten(0.03, contentBoxBg),
  },
  shell: {
    link: lighten(0.2, contentBg),
    searchInput: '#99B09B',
    searchIcon: '#99B09B',
    barBg: darken(0.01, contentBg),
    border: darken(0.04, '#D3DFD1'),
    title: '#718E7A',
    desc: '#849F88',
    activeBg: darken(0.05, contentBg),
  },
  button: {
    primary: primaryColor,
    fg: lighten(0.4, primaryColor),
    hoverBg: lighten(0.1, primaryColor),
    activeBg: darken(0.01, primaryColor),
    clicked: primaryColor,
  },
  navigator: {
    activeBottom: primaryColor,
    borderRight: darken(0.05, bannerBg),
    hoverBg: lighten(0.05, bannerBg),
  },
  popover: {
    bg: contentBoxBg,
    borderColor: primaryColor,

},
  modal: {
    bg: '#e1e8d9',
    border: primaryColor,
    innerSelectBg: '#333040',
  },
  form: {
    inputBg: lighten(0.03, contentBoxBg),
    text: descText,
    label: bannerTitle,
    border: descText,
    shadow: 'rgba(184, 198, 192, 0.3)',
  },
  a: {
    hover: primaryColor,
    active: darken(0.1, primaryColor),
  },
  toast: {
    bg: contentBoxBg,
    border: descText,
    message: descText,
    title: primaryColor,
    infoBar: primaryColor,
    errorBar: '#f59381',
    successBar: '#9dd035',
    warnBar: '#f5a30e',
  },
  table: {
    headerBg: '#D2DFD1',
    headTitle: '#80A086',
    text: '#8FAA94',
    border: '#C3D3C2',

greenLLt: lighten(0.055, "#2ca25e"),
  greenM: "#2ca25e",
  greenHD: darken(0.055, "#2ca25e"),
  greenD: darken(0.11, "#2ca25e"),
  greenLD: darken(0.165, "#2ca25e"),
  greenBlk: darken(0.22, "#2ca25e"),

  blueWt: lighten(0.22, "#495bbd"),
  blueHL: lighten(0.165, "#495bbd"),
  blueLt: lighten(0.11, "#495bbd"),
  blueLLt: lighten(0.055, "#495bbd"),
  blueM: "#495bbd",
  blueHD: darken(0.055, "#495bbd"),
  blueD: darken(0.11, "#495bbd"),
  blueLD: darken(0.165, "#495bbd"),
  blueBlk: darken(0.22, "#495bbd"),

  greyWt: lighten(0.22, "#bfbfbf"),
  greyHL: lighten(0.165, "#bfbfbf"),
  greyLt: lighten(0.11, "#bfbfbf"),
  greyLLt: lighten(0.055, "#bfbfbf"),
  greyM: "#bfbfbf",
  greyHD: darken(0.055, "#bfbfbf"),
  greyD: darken(0.11, "#bfbfbf"),
  greyLD: darken(0.165, "#bfbfbf"),
  greyBlk: darken(0.22, "#bfbfbf"),

  flareWt: "rgba(255,255,255,.07)",
  flareHL: "rgba(255,255,255,.17375)",
  flareLt: "rgba(255,255,255,.2775)",
  flareLLt: "rgba(255,255,255,.38125)",
  flareM: "rgba(255,255,255,.485)",