@hitachivantara/uikit-react-core
Version:
Core React components for the NEXT Design System.
138 lines (137 loc) • 4.21 kB
JavaScript
"use strict";
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
const uikitStyles = require("@hitachivantara/uikit-styles");
const focusUtils = require("../utils/focusUtils.cjs");
const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvButton", {
/** applied to the root element */
root: {
display: "inline-flex",
alignItems: "center",
justifyContent: "center",
textTransform: "none",
cursor: "pointer",
whiteSpace: "nowrap",
// Background color common for almost all variants
":where(:not($disabled))": {
":hover, :focus-visible": {
backgroundColor: uikitStyles.theme.colors.bgHover
}
},
":focus-visible": {
...focusUtils.outlineStyles
},
// Default button - no size specified
fontFamily: uikitStyles.theme.fontFamily.body,
...uikitStyles.theme.typography.label,
color: "var(--color, currentcolor)",
backgroundColor: "transparent",
height: "var(--HvButton-height, fit-content)",
border: "1px solid transparent",
borderRadius: `var(--radius, ${uikitStyles.theme.radii.base})`,
padding: uikitStyles.theme.spacing(0, "sm"),
// remove icon container spacing
"--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: uikitStyles.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: uikitStyles.theme.colors.textDimmed,
// `color-contrast(var(--color) vs ${colors.textDimmed}, ${colors.textLight}, ${colors.textDark})`,
backgroundColor: "var(--color)",
":where(:not($disabled))": {
":hover, :focus-visible": {
backgroundColor: uikitStyles.theme.mix("var(--color)", 0.8, "black")
},
":active": {
backgroundColor: uikitStyles.theme.mix("var(--color)", 0.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: uikitStyles.theme.colors.textDark,
backgroundColor: "transparent",
borderColor: "transparent",
"&:hover, &:focus-visible": {
backgroundColor: uikitStyles.theme.alpha("textLight", 0.3)
},
"&:active": {
backgroundColor: uikitStyles.theme.alpha("textLight", 0.5)
},
"&$disabled": {
backgroundColor: uikitStyles.theme.alpha("textLight", 0.1)
}
},
// TODO - remove in v6
primary: {},
primarySubtle: {},
primaryGhost: {},
secondarySubtle: {},
secondaryGhost: {},
// Deprecated (DS3)
secondary: {}
});
const sizes = {
xs: { height: "24px", fontSize: "sm" },
sm: { height: "24px", fontSize: "sm" },
md: { height: "32px" },
lg: { height: "48px", space: "md" },
xl: { height: "48px", space: "md" }
};
const getSizeStyles = (size) => {
const { height, space = "sm", fontSize } = sizes[size];
return {
height,
padding: uikitStyles.theme.spacing(0, space),
fontSize: fontSize && uikitStyles.theme.fontSizes[fontSize]
};
};
const getIconSizeStyles = (size) => {
const { height } = sizes[size];
return {
height,
width: height
};
};
exports.getIconSizeStyles = getIconSizeStyles;
exports.getSizeStyles = getSizeStyles;
exports.staticClasses = staticClasses;
exports.useClasses = useClasses;