@veracity/vui/dist/sidemenuV2/theme.js

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

//#region src/sidemenuV2/theme.ts
const baseStyle = {
	container: {
		display: "flex",
		flexDirection: "column",
		overflow: "hidden",
		transition: "width 0.2s ease-in-out"
	},
	content: {
		flex: 1,
		overflowY: "auto",
		overflowX: "hidden"
	},
	bottom: {
		flexShrink: 0,
		borderTop: `1px solid transparent`,
		display: "flex",
		alignItems: "center"
	},
	item: {
		display: "flex",
		alignItems: "center",
		justifyContent: "flex-start",
		flexDirection: "row",
		w: "100%",
		border: "none",
		cursor: "pointer",
		transition: "all 0.2s cubic-bezier(0.4, 0, 0.2, 1)",
		textDecoration: "none",
		outline: "none",
		px: 0,
		borderLeft: "3px solid transparent"
	},
	sidemenuTop: {
		display: "flex",
		alignItems: "center",
		justifyContent: "space-between",
		padding: "12px 16px",
		minHeight: "64px"
	},
	toggleButton: {
		baseHeight: 52,
		basePadding: 2,
		expandedPaddingMultiplier: 5,
		collapsedWidth: "100%",
		expandedWidth: "52px",
		transition: "padding 0.2s ease-in-out, width 0.2s ease-in-out"
	}
};
const defaultProps = {
	size: "md",
	variant: "light"
};
const parts = [
	"container",
	"content",
	"bottom",
	"toggleButton",
	"item",
	"sidemenuTop",
	"button"
];
const sizes = {
	sm: { toggleButton: {
		baseHeight: 44,
		basePadding: 1.5
	} },
	md: { toggleButton: {
		baseHeight: 52,
		basePadding: 2
	} },
	lg: { toggleButton: {
		baseHeight: 60,
		basePadding: 2.5
	} }
};
const variants = {
	light: {
		container: { bg: "white" },
		toggleButton: {
			variant: "tertiaryBrand",
			hoverBg: "sandstone.95"
		},
		item: { color: "darkBlue.main" },
		button: {
			bg: "#ffffff",
			hoverBg: "#D3EEF8",
			activeBg: "#E9F7FC",
			disabledBg: "#F8F7F7",
			borderColor: "transparent",
			hoverBorderColor: "#003591",
			activeBorderColor: "#003591",
			color: "#1A1A19",
			hoverColor: "#1A1A19",
			activeColor: "#003591",
			disabledColor: "#908D89",
			disabledBorderColor: "transparent",
			disabledOpacity: "1"
		}
	},
	dark: {
		container: {
			bg: "darkBlue.main",
			color: "white",
			boxShadow: "2px 0 4px rgba(0, 0, 0, 0.3)"
		},
		bottom: { borderTopColor: "rgba(255, 255, 255, 0.1)" },
		sidemenuTop: {
			borderBottom: "1px solid rgba(255, 255, 255, 0.1)",
			bg: "darkBlue.main"
		},
		toggleButton: { variant: "tertiaryLight" },
		item: { color: "white" },
		button: {
			bg: "#0F204B",
			hoverBg: "#003591",
			activeBg: "#0041B2",
			disabledBg: "#0F204B",
			borderColor: "transparent",
			hoverBorderColor: "#91FFB4",
			activeBorderColor: "#91FFB4",
			color: "#FFFFFF",
			hoverColor: "#FFFFFF",
			activeColor: "#91FFBA",
			disabledColor: "#FFFFFF",
			disabledBorderColor: "transparent",
			disabledOpacity: "1"
		}
	}
};
var theme_default = {
	baseStyle,
	defaultProps,
	parts,
	sizes,
	variants
};

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