@veracity/vui/dist/tag/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/tag/theme.ts
/** Token references per semantic color. Tag-only; kept local per design decision. */
const colorTokens = {
	blue: {
		solid: "var(--vui-action-brand-solid)",
		solidHover: "var(--vui-action-brand-solid-hover)",
		solidPressed: "var(--vui-action-brand-solid-pressed)",
		solidInverse: "var(--vui-action-brand-solid-inverse)",
		subtle: "var(--vui-action-brand-subtle)",
		subtleHover: "var(--vui-action-brand-subtle-hover)",
		subtlePressed: "var(--vui-action-brand-subtle-pressed)",
		subtleInverse: "var(--vui-action-brand-subtle-inverse)"
	},
	green: {
		solid: "var(--vui-action-success-solid)",
		solidHover: "var(--vui-action-success-solid-hover)",
		solidPressed: "var(--vui-action-success-solid-pressed)",
		solidInverse: "var(--vui-action-success-solid-inverse)",
		subtle: "var(--vui-action-success-subtle)",
		subtleHover: "var(--vui-action-success-subtle-hover)",
		subtlePressed: "var(--vui-action-success-subtle-pressed)",
		subtleInverse: "var(--vui-action-success-subtle-inverse)"
	},
	red: {
		solid: "var(--vui-action-danger-solid)",
		solidHover: "var(--vui-action-danger-solid-hover)",
		solidPressed: "var(--vui-action-danger-solid-pressed)",
		solidInverse: "var(--vui-action-danger-solid-inverse)",
		subtle: "var(--vui-action-danger-subtle)",
		subtleHover: "var(--vui-action-danger-subtle-hover)",
		subtlePressed: "var(--vui-action-danger-subtle-pressed)",
		subtleInverse: "var(--vui-action-danger-subtle-inverse)"
	},
	lavender: {
		solid: "var(--vui-action-lavender-solid)",
		solidHover: "var(--vui-action-lavender-solid-hover)",
		solidPressed: "var(--vui-action-lavender-solid-pressed)",
		solidInverse: "var(--vui-action-lavender-solid-inverse)",
		subtle: "var(--vui-action-lavender-subtle)",
		subtleHover: "var(--vui-action-lavender-subtle-hover)",
		subtlePressed: "var(--vui-action-lavender-subtle-pressed)",
		subtleInverse: "var(--vui-action-lavender-subtle-inverse)"
	},
	eucalyptus: {
		solid: "var(--vui-action-eucalyptus-solid)",
		solidHover: "var(--vui-action-eucalyptus-solid-hover)",
		solidPressed: "var(--vui-action-eucalyptus-solid-pressed)",
		solidInverse: "var(--vui-action-eucalyptus-solid-inverse)",
		subtle: "var(--vui-action-eucalyptus-subtle)",
		subtleHover: "var(--vui-action-eucalyptus-subtle-hover)",
		subtlePressed: "var(--vui-action-eucalyptus-subtle-pressed)",
		subtleInverse: "var(--vui-action-eucalyptus-subtle-inverse)"
	},
	terracotta: {
		solid: "var(--vui-action-terracotta-solid)",
		solidHover: "var(--vui-action-terracotta-solid-hover)",
		solidPressed: "var(--vui-action-terracotta-solid-pressed)",
		solidInverse: "var(--vui-action-terracotta-solid-inverse)",
		subtle: "var(--vui-action-terracotta-subtle)",
		subtleHover: "var(--vui-action-terracotta-subtle-hover)",
		subtlePressed: "var(--vui-action-terracotta-subtle-pressed)",
		subtleInverse: "var(--vui-action-terracotta-subtle-inverse)"
	},
	grey: {
		solid: "var(--vui-action-grey-solid)",
		solidHover: "var(--vui-action-grey-solid-hover)",
		solidPressed: "var(--vui-action-grey-solid-pressed)",
		solidInverse: "var(--vui-action-grey-solid-inverse)",
		subtle: "var(--vui-action-grey-subtle)",
		subtleHover: "var(--vui-action-grey-subtle-hover)",
		subtlePressed: "var(--vui-action-grey-subtle-pressed)",
		subtleInverse: "var(--vui-action-grey-subtle-inverse)"
	},
	yellow: {
		solid: "var(--vui-action-yellow-solid)",
		solidHover: "var(--vui-action-yellow-solid-hover)",
		solidPressed: "var(--vui-action-yellow-solid-pressed)",
		solidInverse: "var(--vui-action-yellow-solid-inverse)",
		subtle: "var(--vui-action-yellow-subtle)",
		subtleHover: "var(--vui-action-yellow-subtle-hover)",
		subtlePressed: "var(--vui-action-yellow-subtle-pressed)",
		subtleInverse: "var(--vui-action-yellow-subtle-inverse)"
	}
};
/** Container styles per visual hierarchy, composed from color tokens. */
const hierarchyRules = {
	subtle: (t) => ({
		bg: t.subtle,
		color: t.subtleInverse,
		bgHover: t.subtleHover,
		bgPressed: t.subtlePressed
	}),
	solid: (t) => ({
		bg: t.solid,
		color: t.solidInverse,
		bgHover: t.solidHover,
		bgPressed: t.solidPressed
	})
};
const baseStyle = {};
const defaultProps = {
	size: "md",
	variant: "subtleBrand",
	fontWeight: "medium"
};
const parts = [
	"container",
	"icon",
	"dismiss"
];
const sizes = {
	xs: {
		container: {
			fontSize: "sm",
			h: 20,
			paddingX: 4,
			paddingY: 2,
			gapX: 4,
			borderRadius: 6
		},
		icon: { fontSize: "12px" },
		dismiss: { size: "xs" }
	},
	sm: {
		container: {
			fontSize: "sm",
			h: 24,
			paddingX: 6,
			paddingY: 4,
			gapX: 6,
			borderRadius: 6
		},
		icon: { fontSize: "16px" },
		dismiss: { size: "sm" }
	},
	md: {
		container: {
			fontSize: "sm",
			h: 32,
			paddingX: 8,
			paddingY: 6,
			gapX: 8,
			borderRadius: 6
		},
		icon: { fontSize: "16px" },
		dismiss: { size: "sm" }
	},
	lg: {
		container: {
			fontSize: "md",
			h: 40,
			paddingX: 12,
			paddingY: 8,
			gapX: 10,
			borderRadius: 6
		},
		icon: { fontSize: "18px" },
		dismiss: { size: "sm" }
	}
};
const capitalize = (s) => s.charAt(0).toUpperCase() + s.slice(1);
/** 16 canonical variants: `${hierarchy}${Color}` (e.g. `subtleBrand`, `solidGrey`). */
const variants = Object.fromEntries(Object.entries(colorTokens).flatMap(([colorKey, tokens]) => Object.entries(hierarchyRules).map(([hierarchyKey, buildContainer]) => [`${hierarchyKey}${capitalize(colorKey)}`, { container: buildContainer(tokens) }])));
var theme_default = {
	baseStyle,
	defaultProps,
	parts,
	sizes,
	variants
};

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