@veracity/vui/dist/theme/foundations/shadows.js

Veracity UI is a React component library crafted for use within Veracity applications and pages. Based on Styled Components and @xstyled.

import { grey } from "./colors.js";
import { hexToRGBA } from "../../utils/styles.js";

//#region src/theme/foundations/shadows.ts
const greyLight = hexToRGBA(grey[80], .4);
const greyDark = hexToRGBA(grey[80], .6);
const black20percent = hexToRGBA("#000000", .2);
const black15percent = hexToRGBA("#000000", .15);
const black05percent = hexToRGBA("#000000", .05);
const shadowsVariants = {
	xs: `0 0 4px 0 ${black15percent}, 0 0 1px 0 ${black05percent}`,
	sm: `0 2px 6px 0 ${black15percent}, 0 0 1px 0 ${black05percent}`,
	md: `0 10px 20px 0 ${black15percent}, 0 0 1px 0 ${black05percent}`,
	lg: `0 20px 48px 0 ${black20percent}, 0 1px 1px 0 ${black05percent}`,
	inner: `0 2px 20px 0 ${black15percent} inset`
};
var shadows_default = {
	none: "none",
	...shadowsVariants,
	"0": `0 0 0 0 #fff`,
	"1": `0 2px 5px 0 ${greyLight}`,
	"2": `0 4px 12px 0 ${greyLight}`,
	"3": `0 7px 20px 0 ${greyDark}`,
	"4": `0 12px 30px 0 ${greyDark}`,
	t1: `0 -2px 5px 0 ${greyLight}`,
	t2: `0 -4px 12px 0 ${greyLight}`,
	t3: `0 -7px 20px 0 ${greyDark}`,
	t4: `0 -12px 30px 0 ${greyDark}`,
	r1: `2px 0 5px 0 ${greyLight}`,
	r2: `4px 0 12px 0 ${greyLight}`,
	r3: `7px 0 20px 0 ${greyDark}`,
	r4: `12px 0 30px 0 ${greyDark}`,
	l1: `-2px 0 5px 0 ${greyLight}`,
	l2: `-4px 0 12px 0 ${greyLight}`,
	l3: `-7px 0 20px 0 ${greyDark}`,
	l4: `-12px 0 30px 0 ${greyDark}`,
	modal: `0 12px 30px 0 ${black15percent}`
};

//#endregion
export { shadows_default as default };
globalThis.__vuiVersion__ = "5.3.1"
//# sourceMappingURL=shadows.js.map