@airplane/views
Version:
A React library for building Airplane views. Views components are optimized in style and functionality to produce internal apps that are easy to build and maintain.
52 lines (51 loc) • 1.25 kB
JavaScript
import { createStyles } from "@mantine/core";
const useStyles = createStyles((theme, params) => {
const focusRingColor = params.color;
let bg = {};
if (params.variant === "subtle") {
bg = {
"&:disabled": {
backgroundColor: "transparent"
}
};
}
const focusRingRGB = theme.fn.variant({
variant: "filled",
color: focusRingColor
}).background;
let borderColor = {};
if (params.variant === "outline" && (params.color === "secondary" || params.color === "gray")) {
borderColor = {
borderColor: theme.colors.gray[3]
};
}
return {
leftAlign: {
justifyContent: "start"
},
disableFocusRing: {
"&:focus": {
...theme.focusRingStyles.resetStyles(theme)
},
"&:focus:not(:focus-visible)": {
...theme.focusRingStyles.resetStyles(theme)
}
},
recolorRoot: {
"&:focus": {
...theme.fn.focusStyles()["&:focus"],
outline: `2px solid ${focusRingRGB}`
},
"&:focus:not(:focus-visible)": {
...theme.fn.focusStyles()["&:focus"],
outline: `2px solid ${focusRingRGB}`
},
...bg,
...borderColor
}
};
});
export {
useStyles
};
//# sourceMappingURL=Button.styles.js.map