Function shadesOfColor

packages/colors/src/transformations.ts:109–150

(hex: string, halfShades = false)

 * @returns {{[key: number]: string}}
 */
export function shadesOfColor(hex: string, halfShades = false) {
    const baseColor = hex;

    const shades = [
        50,
        100,
        200,
        300,
        400,
        500,
        600,
        700,
        800,
        900,
        ...(halfShades ? [150, 250, 350, 450, 550, 650, 750, 850] : []),
    ].sort();

    const result: ColorShades = {};

    for (const shade of shades) {
        const key = shade.toString();

        if (shade === 500) {
            result[key] = hex;
            continue;
        }

        let shadeIndex = shade;
        const isDarkShade = shadeIndex > 500;
        if (isDarkShade) {
            shadeIndex -= 500;
        }

        const percentage = shadeIndex / 500;
        const startColor = isDarkShade ? DARK_BASE : baseColor;
        const endColor = isDarkShade ? baseColor : LIGHT_BASE;

        result[key] = getColor(percentage, hexToRgbArray(startColor), hexToRgbArray(endColor));
    }

    return result;
}

export type ColorScaleOptions = {
    /** If set to `true`, inverts the scale (so 1 is black instead of white) and uses `colorMixMapping.dark` with different mix ratios per step. */