@hitachivantara/uikit-react-core/dist/Button/Button.styles.js

UI Kit Core React components.

import { outlineStyles } from "../utils/focusUtils.js";
import { theme } from "@hitachivantara/uikit-styles";
import { createClasses } from "@hitachivantara/uikit-react-utils";
//#region src/Button/Button.styles.ts
var { staticClasses, useClasses } = createClasses("HvButton", {
	/** applied to the root element */
	root: {
		display: "inline-flex",
		alignItems: "center",
		justifyContent: "center",
		textTransform: "none",
		cursor: "pointer",
		whiteSpace: "nowrap",
		":where(:not($disabled))": { ":hover, :focus-visible": { backgroundColor: theme.colors.bgHover } },
		":focus-visible": { ...outlineStyles },
		fontFamily: theme.fontFamily.body,
		...theme.typography.label,
		color: "var(--color, currentcolor)",
		backgroundColor: "transparent",
		height: "var(--HvButton-height, fit-content)",
		border: "1px solid transparent",
		borderRadius: `var(--radius, ${theme.radii.base})`,
		padding: theme.spacing(0, "sm"),
		"--icsize": "auto",
		"& $startIcon, & $endIcon": {
			flexShrink: 0,
			lineHeight: 0,
			minWidth: 16
		}
	},
	/** applied to the _left_ icon container */
	startIcon: { marginRight: 8 },
	/** applied to the _right_ icon container */
	endIcon: { marginLeft: 8 },
	focusVisible: {},
	/** applied to the root element when disabled */
	disabled: {
		cursor: "not-allowed",
		color: theme.colors.textDisabled,
		backgroundColor: "transparent",
		borderColor: "transparent",
		":hover, :focus-visible": {
			backgroundColor: "transparent",
			borderColor: "transparent"
		}
	},
	/** applied to the root element when is icon-only */
	icon: {
		margin: 0,
		padding: 0,
		flexShrink: 0,
		width: "var(--HvButton-height, fit-content)"
	},
	/** applied to the root element when using the `contained` variant */
	contained: {
		color: theme.colors.textDimmed,
		backgroundColor: "var(--color)",
		":where(:not($disabled))": {
			":hover, :focus-visible": { backgroundColor: theme.mix("var(--color)", .8, "black") },
			":active": { backgroundColor: theme.mix("var(--color)", .7, "black") }
		}
	},
	/** applied to the root element when using the `subtle` variant */
	subtle: { borderColor: "currentcolor" },
	/** applied to the root element when using the `ghost` variant */
	ghost: {},
	/** applied to the root element when using the `semantic` variant */
	semantic: {
		color: theme.colors.textDark,
		backgroundColor: "transparent",
		borderColor: "transparent",
		"&:hover, &:focus-visible": { backgroundColor: theme.alpha("textLight", .3) },
		"&:active": { backgroundColor: theme.alpha("textLight", .5) },
		"&$disabled": { backgroundColor: theme.alpha("textLight", .1) }
	}
});
var sizes = {
	xs: {
		height: "24px",
		fontSize: "sm"
	},
	sm: {
		height: "24px",
		fontSize: "sm"
	},
	md: { height: "32px" },
	lg: {
		height: "48px",
		space: "md"
	},
	xl: {
		height: "48px",
		space: "md"
	}
};
var getSizeStyles = (size) => {
	const { height, space = "sm", fontSize } = sizes[size];
	return {
		height,
		padding: theme.spacing(0, space),
		fontSize: fontSize && theme.fontSizes[fontSize]
	};
};
var getIconSizeStyles = (size) => {
	const { height } = sizes[size];
	return {
		height,
		width: height
	};
};
//#endregion
export { getIconSizeStyles, getSizeStyles, staticClasses, useClasses };