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 | 2905x 15508x | import { getJsonValue, isSecondVersion } from "../utils";
import { ThemeVersions } from "@theme/v2/types";
declare module "@mui/material/Switch" {
interface SwitchProps {
version?: ThemeVersions;
}
}
export const getCustomBaseSwitchRootStyles = (mode: "light" | "dark") => ({
styleOverrides: {
root: {
variants: [
{
props: (props: any) => isSecondVersion(props?.version),
style: {
width: 40,
height: 20,
padding: 0,
overflow: "visible",
"& .MuiSwitch-thumb": {
boxSizing: "border-box",
borderRadius: 30,
width: 20,
height: 16,
margin: 2,
boxShadow: "none",
},
"& .MuiSwitch-track": {
borderRadius: 20 / 2,
backgroundColor: getJsonValue(
`tokens.${mode}.primitive.transparent.darken-10`,
),
width: 40,
height: 20,
opacity: 1,
},
"& .MuiSwitch-switchBase": {
boxShadow: "none",
padding: 0,
transitionDuration: "300ms",
"&.Mui-checked": {
color: getJsonValue(`tokens.${mode}.colour.text.remain-white`),
transform: "translateX(calc(40px - 20px - 5px))",
"& + .MuiSwitch-track": {
backgroundColor: getJsonValue(
`tokens.${mode}.primitive.success.50`,
),
opacity: 1,
border: 0,
"&::after": {
backgroundColor: getJsonValue(
`tokens.${mode}.primitive.success.50`,
),
},
},
"&:hover + .MuiSwitch-track": {
backgroundColor: getJsonValue(
`tokens.${mode}.primitive.success.100`,
),
},
"&.Mui-disabled .MuiSwitch-thumb": {
boxShadow: "none",
backgroundColor: getJsonValue(
`tokens.${mode}.colour.text.remain-white`,
),
opacity: 0.6,
},
"&.Mui-disabled + .MuiSwitch-track": {
boxShadow: "none",
backgroundColor: getJsonValue(
`tokens.${mode}.primitive.success.50`,
),
opacity: 1,
"&::after": {
backgroundColor: getJsonValue(
`tokens.${mode}.primitive.success.50`,
),
},
},
},
"&.Mui-disabled .MuiSwitch-thumb": {
boxShadow: "none",
opacity: 0.6,
backgroundColor: getJsonValue(
`tokens.${mode}.colour.text.remain-white`,
),
},
"&.Mui-disabled + .MuiSwitch-track": {
boxShadow: "none",
backgroundColor: getJsonValue(
`tokens.${mode}.primitive.transparent.darken-5`,
),
opacity: 1,
},
"&:hover + .MuiSwitch-track": {
backgroundColor: getJsonValue(
`tokens.${mode}.primitive.transparent.darken-25`,
),
},
},
},
},
],
},
},
});
|