@mapcss/preset-typography
Version:
Typography preset for MapCSS
138 lines (137 loc) • 5.82 kB
JavaScript
import { customPropertySet } from "./_utils.js";
import { parseNumeric } from "../../core/utils/monad.js";
import { ratio, shortDecimal, unit } from "../../core/utils/format.js";
import { re$PositiveNumber } from "../../core/utils/regexp.js";
import { customProperty } from "../../core/utils/format.js";
const BACKDROP_BLUR = "backdrop-blur";
function backdropFilterValue(varPrefix) {
const [, varFnBackdropBlur] = customPropertySet("backdrop-blur", varPrefix);
const [, varFnBackdropBrightness] = customPropertySet("backdrop-brightness", varPrefix);
const [, varFnBackdropContrast] = customPropertySet("backdrop-contrast", varPrefix);
const [, varFnBackdropGrayscale] = customPropertySet("backdrop-grayscale", varPrefix);
const [, varFnBackdropHueRotate] = customPropertySet("backdrop-hue-rotate", varPrefix);
const [, varFnBackdropInvert] = customPropertySet("backdrop-invert", varPrefix);
const [, varFnBackdropOpacity] = customPropertySet("backdrop-opacity", varPrefix);
const [, varFnBackdropSaturate] = customPropertySet("backdrop-saturate", varPrefix);
const [, varFnBackdropSepia] = customPropertySet("backdrop-sepia", varPrefix);
return `${varFnBackdropBlur} ${varFnBackdropBrightness} ${varFnBackdropContrast} ${varFnBackdropGrayscale} ${varFnBackdropHueRotate} ${varFnBackdropInvert} ${varFnBackdropOpacity} ${varFnBackdropSaturate} ${varFnBackdropSepia}`;
}
function handleFilter(property, value, varPrefix) {
return {
[customProperty(property, varPrefix)]: value,
"backdrop-filter": backdropFilterValue(varPrefix),
};
}
export const backdrop = [
["blur", [
[
"DEFAULT",
(_, { variablePrefix }) => handleFilter(BACKDROP_BLUR, "blur(8px)", variablePrefix),
],
[
"none",
(_, { variablePrefix }) => handleFilter(BACKDROP_BLUR, "blur(0)", variablePrefix),
],
[
"sm",
(_, { variablePrefix }) => handleFilter(BACKDROP_BLUR, "blur(4px)", variablePrefix),
],
[
"md",
(_, { variablePrefix }) => handleFilter(BACKDROP_BLUR, "blur(12px)", variablePrefix),
],
[
"lg",
(_, { variablePrefix }) => handleFilter(BACKDROP_BLUR, "blur(16px)", variablePrefix),
],
[
"xl",
(_, { variablePrefix }) => handleFilter(BACKDROP_BLUR, "blur(24px)", variablePrefix),
],
[
"2xl",
(_, { variablePrefix }) => handleFilter(BACKDROP_BLUR, "blur(40px)", variablePrefix),
],
[
"3xl",
(_, { variablePrefix }) => handleFilter(BACKDROP_BLUR, "blur(64px)", variablePrefix),
],
]],
["brightness", [
[
re$PositiveNumber,
([, pNumber], { variablePrefix }) => parseNumeric(pNumber).map(ratio).map(shortDecimal).match({
some: (v) => handleFilter("backdrop-brightness", `brightness(${v})`, variablePrefix),
none: undefined,
}),
],
]],
["contrast", [
[
re$PositiveNumber,
([, pNumber], { variablePrefix }) => parseNumeric(pNumber).map(ratio).map(shortDecimal).match({
some: (v) => handleFilter("backdrop-contrast", `contrast(${v})`, variablePrefix),
none: undefined,
}),
],
]],
["grayscale", [
[
"DEFAULT",
(_, { variablePrefix }) => handleFilter("backdrop-grayscale", "grayscale(100%)", variablePrefix),
],
[
0,
(_, { variablePrefix }) => handleFilter("backdrop-grayscale", "grayscale(0)", variablePrefix),
],
]],
["hue", {
rotate: [
[
re$PositiveNumber,
([, pNumber], { variablePrefix }) => parseNumeric(pNumber).map(unit("deg")).match({
some: (deg) => handleFilter("backdrop-hue-rotate", `hue-rotate(${deg})`, variablePrefix),
none: undefined,
}),
],
],
}],
["invert", [
[
"DEFAULT",
(_, { variablePrefix }) => handleFilter("backdrop-invert", "invert(100%)", variablePrefix),
],
[
0,
(_, { variablePrefix }) => handleFilter("backdrop-invert", "invert(0)", variablePrefix),
],
]],
["opacity", [
[
re$PositiveNumber,
([, pNumber], { variablePrefix }) => parseNumeric(pNumber).map(ratio).map(shortDecimal).match({
some: (v) => handleFilter("backdrop-opacity", `opacity(${v})`, variablePrefix),
none: undefined,
}),
],
]],
["saturate", [
[
re$PositiveNumber,
([, pNumber], { variablePrefix }) => parseNumeric(pNumber).map(ratio).map(shortDecimal).match({
some: (v) => handleFilter("backdrop-saturate", `saturate(${v})`, variablePrefix),
none: undefined,
}),
],
]],
["sepia", [
[
"DEFAULT",
(_, { variablePrefix }) => handleFilter("backdrop-sepia", "sepia(100%)", variablePrefix),
],
[
0,
(_, { variablePrefix }) => handleFilter("backdrop-sepia", "sepia(0)", variablePrefix),
],
]],
];