@veracity/vui/dist/button/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/button/theme.ts
/** Token references per semantic intent. */
const intentTokens = {
	brand: {
		solid: "var(--vui-action-brand-solid)",
		solidInverse: "var(--vui-action-brand-solid-inverse)",
		solidHover: "var(--vui-action-brand-solid-hover)",
		solidPressed: "var(--vui-action-brand-solid-pressed)",
		subtleHover: "var(--vui-action-brand-subtle-hover)",
		subtlePressed: "var(--vui-action-brand-subtle-pressed)"
	},
	contrast: {
		solid: "var(--vui-action-contrast-solid)",
		solidInverse: "var(--vui-action-contrast-solid-inverse)",
		solidHover: "var(--vui-action-contrast-solid-hover)",
		solidPressed: "var(--vui-action-contrast-solid-pressed)",
		subtleHover: "var(--vui-action-contrast-subtle-hover)",
		subtlePressed: "var(--vui-action-contrast-subtle-pressed)"
	},
	success: {
		solid: "var(--vui-action-success-solid)",
		solidInverse: "var(--vui-action-success-solid-inverse)",
		solidHover: "var(--vui-action-success-solid-hover)",
		solidPressed: "var(--vui-action-success-solid-pressed)",
		subtleHover: "var(--vui-action-success-subtle-hover)",
		subtlePressed: "var(--vui-action-success-subtle-pressed)"
	},
	danger: {
		solid: "var(--vui-action-danger-solid)",
		solidInverse: "var(--vui-action-danger-solid-inverse)",
		solidHover: "var(--vui-action-danger-solid-hover)",
		solidPressed: "var(--vui-action-danger-solid-pressed)",
		subtleHover: "var(--vui-action-danger-subtle-hover)",
		subtlePressed: "var(--vui-action-danger-subtle-pressed)"
	},
	warning: {
		solid: "var(--vui-action-yellow-solid)",
		solidInverse: "var(--vui-action-yellow-solid-inverse)",
		solidHover: "var(--vui-action-yellow-solid-hover)",
		solidPressed: "var(--vui-action-yellow-solid-pressed)",
		subtleHover: "var(--vui-action-yellow-subtle-hover)",
		subtlePressed: "var(--vui-action-yellow-subtle-pressed)"
	}
};
const TRANSPARENT = "var(--vui-color-opacity-none)";
const DISABLED_BG = "var(--vui-action-disabled-background)";
const DISABLED_FG = "var(--vui-action-disabled-foreground)";
/** Container styles per visual hierarchy, composed from intent tokens. */
const hierarchyRules = {
	primary: (t) => ({
		bg: t.solid,
		borderColor: t.solid,
		color: t.solidInverse,
		hoverBg: t.solidHover,
		hoverBorderColor: t.solidHover,
		activeBg: t.solidPressed,
		activeBorderColor: t.solidPressed,
		disabledBg: DISABLED_BG,
		disabledBorderColor: DISABLED_BG,
		disabledColor: DISABLED_FG
	}),
	secondary: (t) => ({
		bg: TRANSPARENT,
		borderColor: t.solid,
		color: t.solid,
		hoverBg: t.subtleHover,
		activeBg: t.subtlePressed,
		disabledBg: TRANSPARENT,
		disabledBorderColor: DISABLED_BG,
		disabledColor: DISABLED_FG
	}),
	tertiary: (t) => ({
		bg: TRANSPARENT,
		borderColor: TRANSPARENT,
		color: t.solid,
		hoverBg: t.subtleHover,
		activeBg: t.subtlePressed,
		disabledBg: TRANSPARENT,
		disabledBorderColor: TRANSPARENT,
		disabledColor: DISABLED_FG
	})
};
const baseStyle = {};
const defaultProps = {
	size: "lg",
	variant: "primaryBrand",
	fontWeight: "medium"
};
const parts = [
	"container",
	"icon",
	"text"
];
const sizes = {
	sm: {
		container: {
			fontSize: "xs",
			h: 24,
			paddingX: 12,
			paddingXIcon: 8,
			paddingY: 5,
			gapX: 8
		},
		icon: { fontSize: "12px" }
	},
	md: {
		container: {
			fontSize: "sm",
			h: 32,
			paddingX: 16,
			paddingXIcon: 12,
			paddingY: 8,
			gapX: 8
		},
		icon: { fontSize: "16px" }
	},
	lg: {
		container: {
			fontSize: "md",
			h: 40,
			paddingX: 16,
			paddingXIcon: 16,
			paddingY: 10,
			gapX: 8
		},
		icon: { fontSize: "16px" }
	},
	xl: {
		container: {
			fontSize: "lg",
			h: 48,
			paddingX: 16,
			paddingXIcon: 16,
			paddingY: 13,
			gapX: 8
		},
		icon: { fontSize: "18px" }
	}
};
const variants = Object.fromEntries(Object.entries(intentTokens).flatMap(([intentKey, tokens]) => Object.entries(hierarchyRules).map(([hierarchyKey, buildContainer]) => [`${hierarchyKey}${intentKey.charAt(0).toUpperCase()}${intentKey.slice(1)}`, { container: buildContainer(tokens) }])));
variants.primaryDark = variants.primaryBrand;
variants.secondaryDark = variants.secondaryBrand;
variants.tertiaryDark = variants.tertiaryBrand;
variants.primaryLight = variants.primaryContrast;
variants.secondaryLight = variants.secondaryContrast;
variants.tertiaryLight = variants.tertiaryContrast;
variants.solidGreen = variants.primarySuccess;
variants.solidRed = variants.primaryDanger;
variants.solidDarkBlue = variants.tertiaryBrand;
variants.solidYellow = variants.tertiaryWarning;
variants.solidBlue = variants.primaryBrand;
variants.blueOutlined = variants.secondaryBrand;
variants.blueText = variants.tertiaryBrand;
variants.subtleBlue = variants.secondaryBrand;
variants.subtleRed = variants.secondaryDanger;
variants.subtleGreen = variants.secondarySuccess;
variants.subtleYellow = variants.secondaryWarning;
variants.subtleGrey = variants.tertiaryBrand;
variants.menuLight = variants.tertiaryBrand;
variants.menuDark = variants.tertiaryBrand;
variants.buttonGroupDefault = { container: {
	bg: "var(--vui-color-opacity-none)",
	borderColor: "var(--vui-control-placeholder)",
	color: "var(--vui-action-brand-solid)",
	hoverBg: "var(--vui-action-brand-subtle-hover)",
	activeBg: "var(--vui-action-brand-subtle-pressed)"
} };
variants.buttonGroupRounded = { container: {
	bg: "var(--vui-background-default)",
	borderColor: "var(--vui-utility-border-subtle)",
	color: "var(--vui-foreground-default)",
	hoverBg: "var(--vui-action-brand-subtle-hover)",
	hoverBorderColor: "var(--vui-action-brand-subtle-hover)",
	hoverColor: "var(--vui-action-brand-subtle-inverse)",
	activeBg: "var(--vui-action-brand-solid-pressed)",
	activeBorderColor: "var(--vui-action-brand-solid-pressed)",
	activeColor: "var(--vui-action-brand-solid-inverse)",
	borderRadius: "1000",
	marginRight: "var(--vui-button-group-rounded-spacing, 22px)"
} };
var theme_default = {
	baseStyle,
	defaultProps,
	parts,
	sizes,
	variants
};

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