@mapcss/preset-typography/script/preset_tw/identifier/bg.js

Typography preset for MapCSS

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.bg = void 0;
const _utils_js_1 = require("./_utils.js");
const resolve_js_1 = require("../../core/resolve.js");
const deps_js_1 = require("../../deps.js");
const regexp_js_1 = require("../../core/utils/regexp.js");
const monad_js_1 = require("../../core/utils/monad.js");
const format_js_1 = require("../../core/utils/format.js");
function toBackgroundColor(color) {
    return { "background-color": color };
}
function varFnGradientStops(variablePrefix) {
    const [, varFn] = (0, _utils_js_1.customPropertySet)("gradient-stops", variablePrefix);
    return varFn;
}
exports.bg = [
    ["fixed", { "background-attachment": "fixed" }],
    ["local", { "background-attachment": "local" }],
    ["scroll", { "background-attachment": "scroll" }],
    ["clip", {
            border: { "background-clip": "border-box" },
            padding: { "background-clip": "padding-box" },
            content: { "background-clip": "content-box" },
            text: { "background-clip": "text" },
        }],
    ["origin", {
            border: { "background-origin": "border-box" },
            padding: { "background-origin": "padding-box" },
            content: { "background-origin": "content-box" },
        }],
    ["top", { "background-position": "top" }],
    ["bottom", { "background-position": "bottom" }],
    ["center", { "background-position": "center" }],
    ["left", {
            DEFAULT: { "background-position": "left" },
            top: { "background-position": "left top" },
            bottom: { "background-position": "left bottom" },
        }],
    ["right", {
            DEFAULT: { "background-position": "right" },
            top: { "background-position": "right top" },
            bottom: { "background-position": "right bottom" },
        }],
    ["repeat", {
            DEFAULT: { "background-repeat": "repeat" },
            x: { "background-repeat": "repeat-x" },
            y: { "background-repeat": "repeat-y" },
            round: { "background-repeat": "round" },
            space: { "background-repeat": "space" },
        }],
    ["no", {
            repeat: { "background-repeat": "no-repeat" },
        }],
    ["auto", { "background-size": "auto" }],
    ["cover", { "background-size": "cover" }],
    ["contain", { "background-size": "contain" }],
    ["none", { "background-image": "none" }],
    ["blend", {
            normal: { "background-blend-mode": "normal" },
            multiply: { "background-blend-mode": "multiply" },
            screen: { "background-blend-mode": "screen" },
            overlay: { "background-blend-mode": "overlay" },
            darken: { "background-blend-mode": "darken" },
            lighten: { "background-blend-mode": "lighten" },
            difference: { "background-blend-mode": "difference" },
            exclusion: { "background-blend-mode": "exclusion" },
            hue: { "background-blend-mode": "hue" },
            saturation: { "background-blend-mode": "saturation" },
            luminosity: { "background-blend-mode": "luminosity" },
            color: {
                DEFAULT: { "background-blend-mode": "color" },
                dodge: { "background-blend-mode": "color-dodge" },
                burn: { "background-blend-mode": "color-burn" },
            },
            hard: {
                light: { "background-blend-mode": "hard-light" },
            },
            soft: {
                light: { "background-blend-mode": "soft-light" },
            },
        }],
    ["gradient", {
            to: {
                t: (_, { variablePrefix }) => ({
                    "background-image": `linear-gradient(to top, ${varFnGradientStops(variablePrefix)})`,
                }),
                tr: (_, { variablePrefix }) => ({
                    "background-image": `linear-gradient(to top right, ${varFnGradientStops(variablePrefix)})`,
                }),
                r: (_, { variablePrefix }) => ({
                    "background-image": `linear-gradient(to right, ${varFnGradientStops(variablePrefix)})`,
                }),
                br: (_, { variablePrefix }) => ({
                    "background-image": `linear-gradient(to bottom right, ${varFnGradientStops(variablePrefix)})`,
                }),
                b: (_, { variablePrefix }) => ({
                    "background-image": `linear-gradient(to bottom, ${varFnGradientStops(variablePrefix)})`,
                }),
                bl: (_, { variablePrefix }) => ({
                    "background-image": `linear-gradient(to bottom left, ${varFnGradientStops(variablePrefix)})`,
                }),
                l: (_, { variablePrefix }) => ({
                    "background-image": `linear-gradient(to left, ${varFnGradientStops(variablePrefix)})`,
                }),
                tl: (_, { variablePrefix }) => ({
                    "background-image": `linear-gradient(to top left, ${varFnGradientStops(variablePrefix)})`,
                }),
            },
        }],
    [regexp_js_1.re$AllPer$PositiveNumber, ([, body, numeric], context) => {
            const color = (0, resolve_js_1.resolveTheme)(body, "color", context);
            if ((0, deps_js_1.isUndefined)(color))
                return;
            return (0, monad_js_1.parseNumeric)(numeric).match({
                some: (number) => (0, monad_js_1.parseColor)(color).map((0, format_js_1.completionRGBA)((0, format_js_1.ratio)(number))).map(format_js_1.rgbFn).match({
                    some: toBackgroundColor,
                    none: undefined,
                }),
                none: undefined,
            });
        }],
    [regexp_js_1.re$AllPerBracket_$, ([, body, alpha], context) => {
            const color = (0, resolve_js_1.resolveTheme)(body, "color", context);
            if ((0, deps_js_1.isUndefined)(color))
                return;
            return (0, monad_js_1.parseColor)(color).map(({ r, g, b }) => ({ r, g, b, a: alpha })).map(format_js_1.rgbFn).match({
                some: toBackgroundColor,
                none: undefined,
            });
        }],
    [
        regexp_js_1.re$All,
        ([body], context) => {
            const color = (0, resolve_js_1.resolveTheme)(body, "color", context);
            if ((0, deps_js_1.isUndefined)(color))
                return;
            return (0, monad_js_1.parseColor)(color).map((0, format_js_1.completionRGBA)(1, true))
                .map(format_js_1.rgbFn)
                .match({
                some: toBackgroundColor,
                none: () => ({ "background-color": color }),
            });
        },
    ],
];