How to use the polished.shade function in polished

export function getProgressionColor(scale: number) {
  const baseColor = euiLightVars.euiColorPrimary;
  const adjustedScale = 0.75 * scale + 0.05; // prevents pure black & white as min/max colors.
  if (adjustedScale < 0.5) {
    return tint(adjustedScale * 2, baseColor);
  }
  if (adjustedScale > 0.5) {
    return shade(1 - (adjustedScale - 0.5) * 2, baseColor);
  }
  return baseColor;
}

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: {
    base: baseColors.red,
    text: readableColor(baseColors.red),
    light: [null, tint(0.9, baseColors.red)],
    dark: [null, shade(0.4, baseColors.red)],
  },
};

const blurple = colors.blurple;
const blue = colors.blue;
const green = colors.green;
const yellow = colors.yellow;
const red = colors.red;

// theme.js
export default {
  fontSizes: [12, 14, 16, 20, 24, 32, 48, 64],
  fontWeights: [0, 300, 400, 600, 700],
  letterSpacings: [0, 1, 2, 4, 8],
  lineHeights: {
    solid: 1,

}: {
  color: string;
  paletteKey: string;
  paletteOverrides?: ({ color }: { color: string }) => {};
}) => {
  return {
    [`${paletteKey}100`]: tint(0.7, color),
    [`${paletteKey}200`]: tint(0.5, color),
    [`${paletteKey}300`]: tint(0.3, color),
    [`${paletteKey}400`]: tint(0.1, color),
    [paletteKey]: color,
    [`${paletteKey}500`]: color,
    [`${paletteKey}600`]: shade(0.1, color),
    [`${paletteKey}700`]: shade(0.3, color),
    [`${paletteKey}800`]: shade(0.5, color),
    [`${paletteKey}900`]: shade(0.7, color),
    [`${paletteKey}Tint`]: tint(0.9, color),
    [`${paletteKey}Inverted`]: readableColor(color),
    [`${paletteKey}TintInverted`]: shade(0.5, color),
    ...(paletteOverrides ? paletteOverrides({ color }) : {})
  };
};

export const generateTextVariants = (textColor: string) => ({
  text100: lighten(0.2, textColor),
  text200: lighten(0.15, textColor),
  text300: lighten(0.1, textColor),
  text400: lighten(0.05, textColor),
  text: textColor,
  textTint: tint(0.8, textColor),
  textInverted: readableColor(textColor),
  textTintInverted: shade(0.3, textColor)
});

            background: ${p => shade(0.85, p.color)};
          }

function shadeFromProps(
  amount: number,
  props: { buttonType: buttonTypeEnum; theme: ThemeInterface }
) {
  switch (props.buttonType) {
    case buttonTypeEnum.neutral:
      return shade(
        1 - amount,
        opacify(0.1, determineBackgroundFromProps(props))
      )
    default:
      return shade(amount, determineBackgroundFromProps(props))
  }
}

export const tintOrShade = (
  textColor: string,
  color: string,
  tintFraction: number,
  shadeFraction: number
) => {
  if (parseToHsl(textColor).lightness > 0.5) {
    return shade(1 - shadeFraction, color);
  } else {
    return tint(1 - tintFraction, color);
  }
};

],
  },
  zIndices: [0, 9, 99, 999, 9999],
  messageStyle: {
    base: {
      color: shade(0.4, '#AAA'),
      backgroundColor: tint(0.9, '#AAA'),
      borderColor: '#AAA',
    },
    success: {
      color: shade(0.4, success),
      backgroundColor: tint(0.9, success),
      borderColor: success,
    },
    warning: {
      color: shade(0.4, warning),
      backgroundColor: tint(0.9, warning),
      borderColor: warning,
    },
    danger: {
      color: shade(0.4, danger),
      backgroundColor: tint(0.9, danger),
      borderColor: danger,
    },
    info: {
      color: shade(0.4, info),
      backgroundColor: tint(0.9, info),
      borderColor: info,
    },
  },
};

color: shade(0.4, success),
      backgroundColor: tint(0.9, success),
      borderColor: success,
    },
    warning: {
      color: shade(0.4, warning),
      backgroundColor: tint(0.9, warning),
      borderColor: warning,
    },
    danger: {
      color: shade(0.4, danger),
      backgroundColor: tint(0.9, danger),
      borderColor: danger,
    },
    info: {
      color: shade(0.4, info),
      backgroundColor: tint(0.9, info),
      borderColor: info,
    },
  },
};

get headingDark() {
    return shade(0.1, this.heading);
  },
};