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 | 2905x 1002x 2905x 1002x | import { getJsonValue, isSecondVersion } from "../utils";
import { ThemeVersions } from "@theme/v2/types";
declare module "@mui/material/Radio" {
interface RadioProps {
version?: ThemeVersions;
}
}
export const getCustomBaseRadioRootStyles = (mode: "light" | "dark") => ({
styleOverrides: {
root: {
variants: [
{
props: (props: any) => isSecondVersion(props?.version),
style: {
padding: 0,
backgroundColor: "transparent",
"& > input:hover:checked ~ .RadioIcon": {
backgroundColor: getJsonValue(
`tokens.${mode}.colour.buttons.default-hover`,
),
"&:before": {
backgroundColor: getJsonValue(
`tokens.${mode}.colour.surface.primary`,
),
opacity: 0.7,
},
},
".RadioIcon": {
border: `1.5px solid ${getJsonValue(
`tokens.${mode}.colour.surface.tertiary`,
)}`,
"&:before": {
backgroundColor: getJsonValue(
`tokens.${mode}.colour.surface.primary`,
),
},
},
"& > input:checked ~ .RadioIcon": {
backgroundColor: getJsonValue(
`tokens.${mode}.colour.buttons.default`,
),
border: "none",
},
"& > input:checked:disabled ~ .RadioIcon": {
backgroundColor: getJsonValue(
`tokens.${mode}.colour.buttons.default-hover`,
),
border: "none",
"&:before": {
backgroundColor: getJsonValue(
`tokens.${mode}.colour.surface.primary`,
),
opacity: 0.7,
},
},
},
},
...getSmallRadioStyle(),
],
},
},
});
export const getSmallRadioStyle = () => [
{
props: (props: any) =>
isSecondVersion(props?.version) && props.size === "small",
style: {
".RadioIcon": {
width: "20px",
height: "20px",
"&:before": {
width: "8px",
height: "8px",
},
},
},
},
];
|