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 | 548x 2905x 7345x 2905x 2905x 7345x 2905x 7345x | import { getJsonValue, isSecondVersion } from "../utils";
import { ThemeMode, ThemeVersions } from "@theme/v2/types";
declare module "@mui/material/Checkbox" {
interface CheckboxProps {
version?: ThemeVersions;
}
}
export const getCheckboxCustomStyle = (mode: ThemeMode) => {
return {
styleOverrides: {
root: {
variants: [
{
props: (props: any) => isSecondVersion(props?.version),
style: getCustomBaseCheckboxRootStyles(mode),
},
...getLargeCheckboxStyle(),
...getSmallCheckboxStyle(),
],
},
},
};
};
export const getCustomBaseCheckboxRootStyles = (mode: ThemeMode) => ({
borderRadius: "4px",
padding: "0px",
backgroundColor: getJsonValue(`tokens.${mode}.colour.surface.primary`),
border: `1.5px solid ${getJsonValue(
`tokens.${mode}.colour.border.tertiary`,
)}`,
transition: "all 0.3s ease",
"&:hover": {
border: `1.5px solid ${getJsonValue(
`tokens.${mode}.colour.text.secondary`,
)}`,
},
svg: {
fill: "transparent",
},
rect: {
stroke: "transparent",
},
"&.Mui-checked, &.MuiCheckbox-indeterminate": {
backgroundColor: getJsonValue(`tokens.${mode}.colour.buttons.default`),
border: "none",
svg: {
fill: getJsonValue(`tokens.${mode}.primitive.neutral.0`),
},
"&:hover": {
backgroundColor: getJsonValue(
`tokens.${mode}.colour.buttons.default-hover`,
),
svg: {
fill: getJsonValue(`tokens.${mode}.primitive.neutral.0`),
opacity: 0.7,
},
},
"&.Mui-disabled": {
opacity: 0.3,
backgroundColor: getJsonValue(`tokens.${mode}.colour.buttons.default`),
border: "none",
svg: {
fill: getJsonValue(`tokens.${mode}.primitive.neutral.0`),
},
},
},
"&.Mui-disabled": {
backgroundColor: getJsonValue(`tokens.${mode}.colour.surface.secondary`),
border: `1.5px solid ${getJsonValue(
`tokens.${mode}.colour.border.secondary`,
)}`,
svg: {
fill: getJsonValue(`tokens.${mode}.colour.surface.secondary`),
},
},
});
export const getLargeCheckboxStyle = () => [
{
props: (props: any) =>
isSecondVersion(props?.version) && props.size === "medium",
style: {
width: "20px",
height: "20px",
"& .MuiSvgIcon-root": {
width: "20px",
height: "20px",
},
},
},
];
export const getSmallCheckboxStyle = () => [
{
props: (props: any) =>
isSecondVersion(props?.version) && props.size === "small",
style: {
width: "16px",
height: "16px",
"& .MuiSvgIcon-root": {
width: "16px",
height: "16px",
},
},
},
];
|