@cap3/capitano-theme/lib/colorTools.js

Extensible and flexible theme system

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const tinycolor_1 = require("@ctrl/tinycolor");
const easing_1 = require("./easing");
const index_1 = require("./index");
exports.calcColor = (base, modification) => {
    return index_1.isColorEffect(modification)
        ? base[modification.effect](modification.factor)
        : base.mix(modification.second, modification.factor);
};
exports.multiply = (rgb1, rgb2) => {
    const r = Math.floor((rgb1.r * rgb2.r) / 255);
    const g = Math.floor((rgb1.g * rgb2.g) / 255);
    const b = Math.floor((rgb1.b * rgb2.b) / 255);
    return new tinycolor_1.TinyColor(`rgb(${r}, ${g}, ${b})`);
};
exports.getColorObject = (color, name) => {
    return {
        name,
        hex: color.toHexString(),
        darkContrast: color.isLight(),
        luminance: color.getLuminance(),
    };
};
exports.monochromeThemeSwatch = (base) => {
    const rawSwatch = exports.monochromeColorSwatch(new tinycolor_1.TinyColor(base));
    // tslint:disable-next-line:no-object-literal-type-assertion
    const result = {};
    return rawSwatch.reduce((swatch, color) => {
        swatch[color.name] = color.hex;
        return swatch;
    }, result);
    return result;
};
exports.materialThemeSwatch = (base) => {
    const rawSwatch = exports.calcMaterialSwatch(new tinycolor_1.TinyColor(base));
    // tslint:disable-next-line:no-object-literal-type-assertion
    const result = {};
    return rawSwatch.reduce((swatch, color) => {
        swatch[color.name] = color.hex;
        return swatch;
    }, result);
    return result;
};
exports.monochromeColorSwatch = (base) => {
    const lightStep = (base.isDark() ? 1 - base.toHsl().l : base.toHsl().l * -1) * 10;
    const easeFunction = easing_1.EasingFunctions.easeOutQuint;
    if (base.isDark()) {
        return [
            exports.getColorObject(base.lighten(10 * lightStep * easeFunction(1)), "M0"),
            exports.getColorObject(base.lighten(9.6 * lightStep * easeFunction(0.96)), "M10"),
            exports.getColorObject(base.lighten(9.2 * lightStep * easeFunction(0.92)), "M20"),
            exports.getColorObject(base.lighten(8.4 * lightStep * easeFunction(0.84)), "M30"),
            exports.getColorObject(base.lighten(7.5 * lightStep * easeFunction(0.75)), "M40"),
            exports.getColorObject(base.lighten(6.6 * lightStep * easeFunction(0.66)), "M50"),
            exports.getColorObject(base.lighten(5.6 * lightStep * easeFunction(0.56)), "M60"),
            exports.getColorObject(base.lighten(4.6 * lightStep * easeFunction(0.46)), "M70"),
            exports.getColorObject(base.lighten(3.5 * lightStep * easeFunction(0.35)), "M80"),
            exports.getColorObject(base.lighten(2 * lightStep * easeFunction(0.2)), "M90"),
            exports.getColorObject(base, "base"),
        ];
    }
    else {
        return [
            exports.getColorObject(base.lighten(10 * lightStep * easeFunction(1)), "M0"),
            exports.getColorObject(base.lighten(8 * lightStep * easeFunction(0.8)), "M10"),
            exports.getColorObject(base.lighten(6.5 * lightStep * easeFunction(0.65)), "M20"),
            exports.getColorObject(base.lighten(5.4 * lightStep * easeFunction(0.54)), "M30"),
            exports.getColorObject(base.lighten(4.4 * lightStep * easeFunction(0.44)), "M40"),
            exports.getColorObject(base.lighten(3.4 * lightStep * easeFunction(0.34)), "M50"),
            exports.getColorObject(base.lighten(2.5 * lightStep * easeFunction(0.25)), "M60"),
            exports.getColorObject(base.lighten(1.6 * lightStep * easeFunction(0.16)), "M70"),
            exports.getColorObject(base.lighten(0.8 * lightStep * easeFunction(0.08)), "M80"),
            exports.getColorObject(base.lighten(0.4 * lightStep * easeFunction(0.04)), "M90"),
            exports.getColorObject(base, "base"),
        ];
    }
};
exports.calcMaterialSwatch = (hex) => {
    const baseLight = new tinycolor_1.TinyColor("#ffffff");
    const baseDark = exports.multiply(hex, hex);
    const baseTriad = hex.tetrad();
    return [
        exports.getColorObject(baseLight.mix(hex, 12), "50"),
        exports.getColorObject(baseLight.mix(hex, 30), "100"),
        exports.getColorObject(baseLight.mix(hex, 50), "200"),
        exports.getColorObject(baseLight.mix(hex, 70), "300"),
        exports.getColorObject(baseLight.mix(hex, 85), "400"),
        exports.getColorObject(baseLight.mix(hex, 100), "500"),
        exports.getColorObject(baseDark.mix(hex, 87), "600"),
        exports.getColorObject(baseDark.mix(hex, 70), "700"),
        exports.getColorObject(baseDark.mix(hex, 54), "800"),
        exports.getColorObject(baseDark.mix(hex, 25), "900"),
        exports.getColorObject(baseDark
            .mix(baseTriad[4], 15)
            .saturate(80)
            .lighten(65), "A100"),
        exports.getColorObject(baseDark
            .mix(baseTriad[4], 15)
            .saturate(80)
            .lighten(55), "A200"),
        exports.getColorObject(baseDark
            .mix(baseTriad[4], 15)
            .saturate(100)
            .lighten(45), "A400"),
        exports.getColorObject(baseDark
            .mix(baseTriad[4], 15)
            .saturate(100)
            .lighten(40), "A700"),
    ];
};
//# sourceMappingURL=colorTools.js.map