@veracity/vui/dist/avatar/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/avatar/theme.ts
const baseStyle = {};
const defaultProps = {
	size: "md",
	variant: "subtleGrey",
	fontWeight: "medium"
};
const sizes = {
	sm: {
		fontSize: "xs",
		h: 24,
		iconSize: "xs"
	},
	md: {
		fontSize: "sm",
		h: 32,
		iconSize: "sm"
	},
	lg: {
		fontSize: "md",
		h: 40,
		iconSize: "md"
	},
	xl: {
		fontSize: "lg",
		h: 48,
		iconSize: "xl"
	},
	xxl: {
		fontSize: "lg",
		h: 56,
		iconSize: "xxl"
	}
};
const variants = {
	subtleGrey: {
		bg: "sandstone.90",
		hoverBg: "sandstone.85",
		borderColor: "sandstone.90",
		color: "sandstone.20",
		activeBg: "sandstone.79"
	},
	subtleBlue: {
		bg: "skyBlue.95",
		hoverBg: "skyBlue.hover",
		activeBg: "skyBlue.85",
		borderColor: "skyBlue.95",
		color: "seaBlue.main"
	},
	subtleRed: {
		bg: "energyRed.95",
		borderColor: "energyRed.95",
		hoverBg: "energyRed.90",
		activeBg: "energyRed.85",
		color: "energyRed.45"
	},
	subtleYellow: {
		bg: "sunflower.85",
		hoverBg: "sunflower.70",
		activeBg: "sunflower.65",
		borderColor: "sunflower.85",
		color: "sunflower.20"
	},
	subtleGreen: {
		bg: "landGreen.95",
		hoverBg: "landGreen.90",
		borderColor: "landGreen.95",
		color: "landGreen.30",
		activeBg: "landGreen.85"
	},
	subtleLavender: {
		bg: "hsl(232, 58%, 90%)",
		hoverBg: "hsl(232, 58%, 85%)",
		borderColor: "hsl(232, 58%, 90%)",
		color: "hsl(232, 58%, 50%)",
		activeBg: "hsl(232, 58%, 80%)"
	},
	subtleEucalyptus: {
		bg: "hsl(178, 80%, 85%)",
		hoverBg: "hsl(178, 80%, 80%)",
		borderColor: "hsl(178, 80%, 85%)",
		color: "hsl(178, 80%, 20%)",
		activeBg: "hsl(178, 80%, 75%)"
	},
	subtleTerracotta: {
		bg: "hsl(34, 100%, 85%)",
		hoverBg: "hsl(34, 100%, 80%)",
		borderColor: "hsl(34, 100%, 85%)",
		color: "hsl(34, 100%, 20%)",
		activeBg: "hsl(34, 100%, 75%)"
	},
	/** solids next */
	solidBlue: {
		bg: "seaBlue.main",
		hoverBg: "seaBlue.35",
		activeBg: "seaBlue.40",
		borderColor: "seaBlue.main",
		color: "white"
	},
	solidDarkBlue: {
		bg: "darkBlue.18",
		hoverBg: "darkBlue.25",
		activeBg: "darkBlue.35",
		borderColor: "darkBlue.18",
		color: "white"
	},
	solidRed: {
		bg: "energyRed.45",
		hoverBg: "energyRed.54",
		activeBg: "energyRed.60",
		borderColor: "energyRed.45",
		color: "white"
	},
	solidYellow: {
		bg: "sunflower.50",
		hoverBg: "sunflower.80",
		activeBg: "sunflower.85",
		borderColor: "sunflower.50",
		color: "sunflower.15"
	},
	solidGreen: {
		bg: "landGreen.35",
		hoverBg: "landGreen.41",
		activeBg: "landGreen.45",
		borderColor: "landGreen.35",
		color: "white"
	},
	solidLavender: {
		bg: "hsl(232, 58%, 60%)",
		hoverBg: "hsl(232, 58%, 65%)",
		borderColor: "hsl(232, 58%, 60%)",
		color: "white",
		activeBg: "hsl(232, 58%, 70%)"
	},
	solidEucalyptus: {
		bg: "hsl(178, 80%, 25%)",
		hoverBg: "hsl(178, 80%, 35%)",
		borderColor: "hsl(178, 80%, 25%)",
		color: "white",
		activeBg: "hsl(178, 80%, 42%)"
	},
	solidTerracotta: {
		bg: "hsl(34, 100%, 30%)",
		hoverBg: "hsl(34, 100%, 40%)",
		borderColor: "hsl(34, 100%, 35%)",
		color: "white",
		activeBg: "hsl(34, 100%, 45%)"
	},
	/** internal, used in *header* next */
	primaryLight: {
		bg: "buttonTypePrimaryDefaultBackgroundColorLight",
		borderColor: "buttonTypePrimaryDefaultBorderColorLight",
		color: "buttonTypePrimaryDefaultTextColorLight",
		hoverBg: "buttonTypePrimaryHoverBackgroundColorLight",
		hoverBorderColor: "buttonTypePrimaryHoverBorderColorLight",
		hoverColor: "buttonTypePrimaryHoverTextColorLight",
		activeBg: "buttonTypePrimaryActiveBackgroundColorLight",
		activeBorderColor: "buttonTypePrimaryActiveBorderColorLight",
		activeColor: "buttonTypePrimaryActiveTextColorLight"
	}
};
var theme_default = {
	baseStyle,
	defaultProps,
	sizes,
	variants
};

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