mirror of
https://github.com/ente-io/ente.git
synced 2025-06-09 10:29:35 +00:00
78 lines
2.4 KiB
TypeScript
78 lines
2.4 KiB
TypeScript
import { Switch, styled, type SwitchProps } from "@mui/material";
|
|
import React from "react";
|
|
|
|
/**
|
|
* A custom variant of the MUI {@link Switch}, styled per our designs.
|
|
*/
|
|
export const EnteSwitch: React.FC<SwitchProps> = styled((props) => (
|
|
<Switch disableRipple {...props} />
|
|
))(({ theme }) => ({
|
|
width: 40,
|
|
height: 24,
|
|
padding: 0,
|
|
"& .MuiSwitch-switchBase": {
|
|
padding: 0,
|
|
margin: 2,
|
|
transitionDuration: "300ms",
|
|
"&.Mui-checked": {
|
|
transform: "translateX(16px)",
|
|
color: theme.vars.palette.fixed.white,
|
|
"& + .MuiSwitch-track": {
|
|
opacity: 1,
|
|
border: 0,
|
|
// TODO(LM):
|
|
// backgroundColor: "#65C466",
|
|
// ...theme.applyStyles("dark", {
|
|
// backgroundColor: "#2ECA45",
|
|
// }),
|
|
backgroundColor: theme.vars.palette.fixed.switchOn,
|
|
},
|
|
"&.Mui-disabled + .MuiSwitch-track": {
|
|
opacity: 0.5,
|
|
},
|
|
},
|
|
"&.Mui-disabled .MuiSwitch-thumb": {
|
|
color: theme.palette.grey[600],
|
|
// TODO(LM):
|
|
// ...theme.applyStyles("light", {
|
|
// color: theme.palette.grey[100],
|
|
// }),
|
|
},
|
|
"&.Mui-disabled + .MuiSwitch-track": {
|
|
opacity: 0.3,
|
|
// TODO(LM):
|
|
// ...theme.applyStyles("light", {
|
|
// opacity: 0.7,
|
|
// }),
|
|
},
|
|
},
|
|
"& .MuiSwitch-thumb": {
|
|
boxSizing: "border-box",
|
|
width: 20,
|
|
height: 20,
|
|
},
|
|
"& .MuiSwitch-track": {
|
|
borderRadius: 22 / 2,
|
|
backgroundColor: theme.vars.palette.fill.muted,
|
|
opacity: 1,
|
|
transition: theme.transitions.create(["background-color"], {
|
|
duration: 500,
|
|
}),
|
|
// TODO(LM):
|
|
// ...theme.applyStyles("light", {
|
|
// backgroundColor: "#E9E9EA",
|
|
// }),
|
|
},
|
|
// Use an alternative affordance to indicate focusVisible as the ripple
|
|
// effect is disabled.
|
|
".MuiSwitch-switchBase.Mui-focusVisible + .MuiSwitch-track": {
|
|
outline: `1px solid ${theme.vars.palette.fixed.white}`,
|
|
outlineOffset: "-1px",
|
|
},
|
|
// Same for when the switch is actived.
|
|
".MuiSwitch-switchBase:active + .MuiSwitch-track": {
|
|
outline: `1px solid ${theme.vars.palette.stroke.faint}`,
|
|
outlineOffset: "-1px",
|
|
},
|
|
}));
|