How to use the polished.readableColor function in polished

red: '#DC2C10',
  blurple: '#4E3FCE',
  consensysblue: '#3259D6',
};

// rimble palette
const colors = {
  blurple: {
    base: baseColors.blurple,
    text: readableColor(baseColors.blurple),
    light: [null, tint(0.2, baseColors.blurple)],
    dark: [null, shade(0.2, baseColors.blurple)],
  },
  blue: {
    base: baseColors.blue,
    text: readableColor(baseColors.blue),
    light: [null, tint(0.9, baseColors.blue)],
    dark: [null, shade(0.4, baseColors.blue)],
  },
  green: {
    base: baseColors.green,
    text: baseColors.white,
    light: [null, tint(0.9, baseColors.green)],
    dark: [null, shade(0.4, baseColors.green)],
  },
  yellow: {
    base: baseColors.yellow,
    text: readableColor(baseColors.yellow),
    light: [null, tint(0.9, baseColors.yellow)],
    dark: [null, shade(0.4, baseColors.yellow)],
  },
  red: {

const background = (props, alpha = 0.4) => {
  if (props.theme.backgroundDropdown !== undefined) {
    return rgba(readableColor(props.theme.backgroundDropdown), alpha)
  }
}

  background: ${props => readableColor(props.theme.backgroundContent)};
  opacity: 0.1;

const background = props => {
  if (props.theme.backgroundDropdown !== undefined) {
    return rgba(readableColor(props.theme.backgroundDropdown), 0.1)
  }
}

  color: ${props => readableColor(props.color)};
`;

get noticeFg_() {
		return readableColor('#' + this.notice_).substr(1);
	}

const textColor = (c: string) => transparentize(0.6, readableColor(c))

},
  }) => `
    align-items: center;
    background-color: ${isSelected ? primaryPallete[0] : 'inherit'};
    color: ${
      isSelected ? readableColor(primaryPallete[0], darkGray, white) : 'inherit'
    };
    cursor: pointer;
    display: flex;
    height: 40px;
    padding: 0 16px;
    transition: 200ms all ease-out;

    &:hover {
      background-color: ${primaryPallete[1]};
      color: ${readableColor(primaryPallete[1], darkGray, white)};
    }
  `}
`;

${props =>
      transparentize(0.9, readableColor(props.theme.backgroundNavigation))};

{name}
                
                {settings.listItemHeight >= 32 &&
                  details && (
                    
                      {details}
                    
                  )}
              
            
            {hasChildren && (
              <div display="flex"></div>