Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 | 10x 112x 36x 76x 76x 76x 91x 91x 74x 74x 74x 74x 444x 74x 91x 74x | import { alpha } from "@mui/material/styles";
import { chipClasses } from "@mui/material/Chip";
// ----------------------------------------------------------------------
const COLORS = ["primary", "secondary", "info", "success", "warning", "error"];
/** Hero UI–style soft chip surface: tinted fill, no border, readable label color. */
function softSurface(theme, color, lightMode) {
if (color === "default") {
return {
color: lightMode ? theme.palette.text.primary : theme.palette.grey[100],
backgroundColor: alpha(theme.palette.grey[500], lightMode ? 0.12 : 0.22),
border: "none",
boxShadow: "none",
"&:hover": {
backgroundColor: alpha(theme.palette.grey[500], lightMode ? 0.18 : 0.3),
},
};
}
const paletteColor = theme.palette[color];
Iif (!paletteColor) {
return {};
}
return {
color: paletteColor[lightMode ? "dark" : "light"],
backgroundColor: alpha(paletteColor.main, lightMode ? 0.12 : 0.22),
border: "none",
boxShadow: "none",
[`& .${chipClasses.icon}`]: {
color: "currentColor",
},
"&:hover": {
backgroundColor: alpha(paletteColor.main, lightMode ? 0.18 : 0.32),
},
};
}
// ----------------------------------------------------------------------
export function chip(theme) {
const lightMode = theme.palette.mode === "light";
const rootStyles = (ownerState) => {
const colorKey = ownerState.color || "default";
const useSoftStyle =
ownerState.variant === "soft" ||
ownerState.variant === "filled" ||
ownerState.variant === "outlined";
const softStyle = useSoftStyle ? softSurface(theme, colorKey, lightMode) : {};
const colorStyles = COLORS.flatMap((color) =>
ownerState.color === color && useSoftStyle
? [softSurface(theme, color, lightMode)]
: []
);
return [
{
fontWeight: 600,
fontFamily: theme.typography.fontFamily,
borderRadius: 9999,
...(ownerState.size === "small"
? {
height: 24,
fontSize: theme.typography.pxToRem(12),
[`& .${chipClasses.label}`]: {
px: 1,
py: 0,
},
}
: {
height: 28,
fontSize: theme.typography.pxToRem(13),
[`& .${chipClasses.label}`]: {
px: 1.25,
py: 0,
},
}),
[`& .${chipClasses.deleteIcon}`]: {
opacity: 0.56,
color: "currentColor",
fontSize: 16,
"&:hover": {
opacity: 1,
color: "currentColor",
},
},
...(useSoftStyle && ownerState.variant === "outlined" ? { border: "none" } : {}),
...softStyle,
},
...colorStyles,
{
[`&.${chipClasses.disabled}`]: {
opacity: 1,
color: theme.palette.action.disabled,
backgroundColor: alpha(theme.palette.action.disabledBackground, lightMode ? 0.65 : 1),
border: "none",
[`& .${chipClasses.icon}`]: {
color: theme.palette.action.disabled,
},
},
},
];
};
return {
MuiChip: {
defaultProps: {
variant: "soft",
},
variants: [
{
props: { variant: "soft" },
style: {},
},
],
styleOverrides: {
root: ({ ownerState }) => rootStyles(ownerState),
},
},
};
}
|