@veracity/vui/dist/notification/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/notification/theme.ts
/** Token references per semantic intent. */
const intentTokens = {
	info: {
		feedbackSubtle: "var(--vui-feedback-info-subtle)",
		feedbackSolid: "var(--vui-feedback-info-solid)",
		dismissColor: "var(--vui-feedback-info-solid)"
	},
	danger: {
		feedbackSubtle: "var(--vui-feedback-danger-subtle)",
		feedbackSolid: "var(--vui-feedback-danger-solid)",
		dismissColor: "var(--vui-feedback-danger-solid)"
	},
	warning: {
		feedbackSubtle: "var(--vui-feedback-warning-subtle)",
		feedbackSolid: "var(--vui-feedback-warning-solid)",
		dismissColor: "var(--vui-feedback-warning-solid)"
	},
	success: {
		feedbackSubtle: "var(--vui-feedback-success-subtle)",
		feedbackSolid: "var(--vui-feedback-success-solid)",
		dismissColor: "var(--vui-feedback-success-solid)"
	}
};
/** Variant styles per visual hierarchy, composed from intent tokens. */
const hierarchyRules = {
	inline: (t) => ({ container: {
		bg: t.feedbackSubtle,
		borderColor: t.feedbackSolid,
		color: t.feedbackSolid,
		"--vui-dismiss-fg": t.dismissColor
	} }),
	banner: (t) => ({ container: {
		bg: t.feedbackSubtle,
		borderColor: t.feedbackSolid,
		color: t.feedbackSolid,
		"--vui-dismiss-fg": t.dismissColor,
		"--vui-notification-border-width": "0"
	} })
};
const baseStyle = {
	container: {
		borderRadius: "var(--vui-notification-border-radius, 0)",
		borderWidth: "var(--vui-notification-border-width, 1px)",
		bg: "var(--vui-feedback-neutral-subtle)",
		borderColor: "var(--vui-feedback-neutral-solid)",
		color: "var(--vui-feedback-neutral-solid)",
		px: "var(--vui-notification-padding-x, 16px)",
		py: "var(--vui-notification-padding-y, 8px)",
		gap: "var(--vui-notification-gap, 16px)"
	},
	content: { py: "var(--vui-notification-content-padding-y, 8px)" },
	button: {},
	icon: { py: "var(--vui-notification-content-padding-y, 8px)" },
	text: {
		flex: "1",
		fontSize: "16px",
		lineHeight: "150%",
		fontWeight: 400,
		minW: 0
	},
	title: { mb: "4px" },
	actionBox: { mt: "var(--vui-notification-action-margin-top, 12px)" }
};
const parts = [
	"container",
	"content",
	"button",
	"icon",
	"text",
	"title",
	"actionBox"
];
const sizes = {};
const generatedVariants = Object.fromEntries(Object.entries(intentTokens).flatMap(([intentKey, tokens]) => Object.entries(hierarchyRules).map(([hierarchyKey, buildVariant]) => [`${hierarchyKey}${intentKey.charAt(0).toUpperCase()}${intentKey.slice(1)}`, buildVariant(tokens)])));
const variants = {
	...generatedVariants,
	subtleBlue: generatedVariants.inlineInfo,
	subtleRed: generatedVariants.inlineDanger,
	subtleYellow: generatedVariants.inlineWarning,
	subtleGreen: generatedVariants.inlineSuccess,
	bannerBlue: generatedVariants.bannerInfo,
	bannerRed: generatedVariants.bannerDanger,
	bannerYellow: generatedVariants.bannerWarning,
	bannerGreen: generatedVariants.bannerSuccess
};
var theme_default = {
	baseStyle,
	parts,
	sizes,
	variants
};

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