How to use the polished.parseToHsl function in polished

function getReadableCustom(custom: string | undefined, background: 'light' | 'dark') {
	if (!custom) {
		return undefined;
	}

	const initialRgb = parseToRgb('#' + custom);
	const initialRgbArr = rgbToTuple(initialRgb);
	const initialHsl = parseToHsl('#' + custom);
	const labColor = rgb2lab(initialRgbArr);
	const labLitNorm = labColor[0] / 100; // Lab lightness normalized to 0 to 1 range.

	if (background === 'light') {
		// Note: We can use the raw MaxLitBase value for the IF and the clamp, because we don't need
		// any hue dependant modifications.

		// If color's lightness is higher than our preferred ceiling value.
		if (labLitNorm > MaxLitBase) {
			// Force lightness down to preferred ceiling value.
			// Due to the preceding IF, this is essentially a ceiling clamp.
			labColor[0] = MaxLitBase * 100;
			const convertedRgb = lab2rgb(labColor);

			return rgb(rgbFromTuple(convertedRgb)).substr(1);
		}

const RELATIONS = {
	what: {
		background: '#2e92ff',
		color: 0.5 < parseToHsl( '#2e92ff' ).lightness ? '#fff' : '#000'
	},
	who: {
		background: '#bd10e0',
		color: 0.5 < parseToHsl( '#bd10e0' ).lightness ? '#fff' : '#000'
	},
	where: {
		background: '#7ed321',
		color: 0.5 < parseToHsl( '#7ed321' ).lightness ? '#fff' : '#000'
	},
	when: {
		background: '#f7941d',
		color: 0.5 < parseToHsl( '#f7941d' ).lightness ? '#fff' : '#000'
	},
};

/**
 * @inheritDoc
 */
const Wrapper = styled.div`
    margin: 0;
    width: 100%;
    display: block;
    box-sizing: border-box;
    
    // Positioning the text.
    line-height: 24px;
    padding: 0 8px;

get processedSvg() {
		if (GJ_IS_SSR) {
			return this.src;
		}

		let svgData = this.rawSvg;

		if (this.theme) {
			let highlight = '#' + this.theme.highlight;
			let backlight = '#' + this.theme.backlight;
			let notice = '#' + this.theme.notice;

			if (this.theme.custom) {
				const highlight_ = '#' + this.theme.highlight_;
				const hsl = parseToHsl(highlight_);
				if (hsl.lightness < 0.4) {
					highlight = lighten(0.3, highlight_);
					backlight = highlight_;
				} else {
					highlight = highlight_;
					backlight = darken(0.3, highlight_);
				}
				notice = highlight;
			}

			svgData = svgData
				.replace(/\#ccff00/gi, highlight)
				.replace(/\#cf0/gi, highlight)
				.replace(/\#2f7f6f/gi, backlight)
				.replace(/\#ff3fac/gi, notice)
				.replace(/\#31d6ff/gi, backlight);

function rgb2hsl(color: RgbColor) {
	const str = toColorString(color);
	return parseToHsl(str);
}

export const invertLuminance = base => {
  const luminance = getLuminance(base)
  const { hue, saturation } = parseToHsl(base)
  return hsl(hue, saturation, 1 - luminance)
}

export function getLightVariant(color: string) {
  const { hue, saturation } = parseToHsl(color);

  return toColorString({
    hue,
    saturation: saturation * 0.45,
    lightness: 0.95 - getLuminance(color) * 0.05,
  });
}