How to use the polished.lighten function in polished

@media all and (max-width: 500px) {
        max-width: none;
    }

    @media all and (max-width: 1023px) {
        h1,
        h2 {
            display: block;
            margin-bottom: 1.5rem;
        }
    }
`;

const LearnMore = styled.p`
    color: ${lighten(0.2, COLOR_BODY)};
`;

const sharedCss = css`
    flex: 0 0 50%;
    padding: 1em;
`;

const Demo = styled.section`
    display: flex;
    flex-grow: 1;
    margin-left: -1.5rem;
    margin-right: -1.5rem;

    @media all and (min-width: 1024px) {
        margin-left: 0;
        margin-right: 0;

},
  footer: {
    text: lighten(0.1, descText),
    hover: descText,
    title: '#77706B',
    bottomBg: '#252325',
  },
  sidebar: {
    bg: sidebarBg,
    activeBar: 'yellowgreen',
    holder: lighten(0.15, sidebarBg),
    logoText: primaryColor,
    menuHover: lighten(0.1, sidebarBg),
    pinActive: 'yellowgreen',
    menuLink: '#A6BBAF',
    borderColor: lighten(0.05, sidebarBg),
    topShadow: '-2px 2px 2px 0px rgb(39, 53, 45)',
    topShadowBorderBottom: '1px solid #576957',
    searchInputBottom: '#606f64',
    searchInputBottomActive: '#92C446',
    searchInputHolder: '#607765',
  },
  preview: {
    title: bannerTitle,
    desc: lighten(0.05, descText),
    font: descText,
    bg: contentBg,
    shadow: '-5px 0px 14px 0px rgba(41, 18, 18, 0.19)',
    closerShadow: '-5px 0px 14px 0px rgba(41, 18, 18, 0.19)',
    markdownHelperBg: lighten(0.04, contentBg),
    accountBg: contentBoxBg,
    articleBg: contentBoxBg,

palette: {
      ...generateTextVariants(_get(overrides, 'palette.text') || defaultPalette.text),

      black: 'black',
      black500: 'black',

      white: 'white',
      white500: 'white',
      white600: darken(0.03, 'white'),
      white700: darken(0.05, 'white'),
      white800: darken(0.1, 'white'),
      white900: darken(0.15, 'white'),

      gray100: lighten(0.2, 'gray'),
      gray200: lighten(0.15, 'gray'),
      gray300: lighten(0.1, 'gray'),
      gray400: lighten(0.05, 'gray'),
      gray: 'gray',
      gray500: 'gray',
      gray600: darken(0.05, 'gray'),
      gray700: darken(0.1, 'gray'),
      gray800: darken(0.15, 'gray'),
      gray900: darken(0.2, 'gray'),

      default: darken(0.01, 'white'),
      defaultInverted: '#435a6f',

      ...generateColorVariants({
        paletteKey: 'primary'
      }),
      ...generateColorVariants({
        paletteKey: 'info'

}
		}
	}

	+ label {
		position: relative;
		user-select: none;
		display: flex;
		width: 100%;
		height: 100%;
		align-items: center;
		cursor: pointer;

		&::before {
			background-color: #fff;
			border: 1px solid ${theme.colors.borderColor || lighten(0.1, theme.colors.textColor)};
			box-sizing: content-box;
			content: '';
			color: ${theme.colors.primaryColor};
			margin-right: calc(${item.width} * 0.5);
			top: 50%;
			left: 0;
			width: ${item.width};
			height: ${item.height};
			display: inline-block;
			vertical-align: middle;
		}

		&::after {
			box-sizing: content-box;
			content: '';
			background-color: ${theme.colors.primaryColor};

export const primaryPaletteGenerator = (color: string) => ({
  primary100: lighten(0.4, color),
  primary200: lighten(0.3, color),
  primary300: lighten(0.2, color),
  primary400: lighten(0.1, color),
  primary500: color,
  primary600: darken(0.1, color),
  primary700: darken(0.2, color),
  primary800: darken(0.3, color),
  primary900: darken(0.4, color),
  primary: color,
});

font: fontColor,
    bg: contentBoxBg,
    shadow: '-5px 0px 14px 0px rgba(41, 18, 18, 0.19)',
    closerShadow: '-5px 0px 14px 0px rgba(41, 18, 18, 0.19)',
    markdownHelperBg: lighten(0.04, contentBg),
    accountBg: lighten(0.04, contentBg),
    articleBg: lighten(0.04, contentBg),
    helper: lighten(0.2, contentBg),
    helperHover: lighten(0.3, contentBg),
    topLine: '#c387e8',
    icon: '#845145',
    divider: darken(0.07, descText),
  },
  article: {
    link: primaryMate,
    linkHover: lighten(0.05, primaryMate),
    reactionTitle: primaryColor,
    reactionHoverBg: lighten(0.04, contentBg),
  },
  comment: {
    icon: primaryColor,
    didIcon: primaryMate,
    title: primaryColor,
    username: primaryColor,
    number: primaryMate,
    floor: primaryMate,
    reply: primaryColor,
    replyBg: '#3d3644',
    placeholder: descText,
    filter: descText,
    filterActive: primaryColor,
    action: primaryColor,

import { darken, lighten } from "polished";

export const colors = {
  black: "#1C1C1C",
  white: "#fff",

  redWt: lighten(0.22, "#c54747"),
  redHL: lighten(0.165, "#c54747"),
  redLt: lighten(0.11, "#c54747"),
  redLLt: lighten(0.055, "#c54747"),
  redM: "#c54747",
  redHD: darken(0.055, "#c54747"),
  redD: darken(0.11, "#c54747"),
  redLD: darken(0.165, "#c54747"),
  redBlk: darken(0.22, "#c54747"),

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

box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 2px;
    border: 1px solid ${darken(0.1, props.theme.buttonNeutralBackground)};

    svg {
      fill: ${props.theme.buttonNeutralText};
    }

    &:hover {
      background: ${darken(0.05, props.theme.buttonNeutralBackground)};
      border: 1px solid ${darken(0.15, props.theme.buttonNeutralBackground)};
    }

    &:focus {
      transition-duration: 0.05s;
      border: 1px solid ${lighten(0.4, props.theme.buttonBackground)};
      box-shadow: ${lighten(0.4, props.theme.buttonBackground)} 0px 0px
        0px 2px;
    }

    &:disabled {
      color: ${props.theme.textTertiary};
    }
  `} ${props =>
      props.danger &&

border: lighten(0.05, contentBg),
    title: lighten(0.3, contentBg),
    desc: lighten(0.2, contentBg),
    activeBg: lighten(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: bannerBg,
    borderColor: primaryColor,
    boxShadoe: '0 1px 4px rgba(0, 0, 0, 0.15)',
  },
  tags: {
    dotOpacity: 0.5,
    text: '#196677',
  },
  tagger: {
    text: '#a7bfbf',
    bg: '#004C61',
    border: '#004C61',
    closeBtn: '#a7bfbf',
  },

backgroundColor: props =>
        props.noBackground
          ? 'transparent'
          : props.active
            ? rgba(lighten(theme.accent, getBg(theme, props)), theme.alpha)
            : rgba(getBg(theme, props), theme.alpha)
    },