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 | 548x 2905x 51363x 2905x 51363x 2905x 51363x 2905x 51363x 2905x 51363x | import { TooltipProps } from "@mui/material";
import { ThemeMode } from "../types";
import { getJsonValue, isSecondVersion } from "../utils";
import { ThemeVersions } from "@theme/v2/types";
declare module "@mui/material/Tooltip" {
interface TooltipProps {
version?: ThemeVersions;
}
interface TooltipPropsColorOverrides {
default: true;
success: true;
warning: true;
light: true;
}
}
export const getCustomTooltipStyles = (mode: ThemeMode) => {
return {
styleOverrides: {
tooltip: {
variants: [
{
props: (props: any) => isSecondVersion(props?.version),
style: {
borderRadius: "8px",
maxWidth: "320px",
padding: "8px 16px",
},
},
...getDefaultTooltipStyles(mode),
...getSuccessTooltipStyles(mode),
...getWarningTooltipStyles(mode),
...getLightTooltipStyles(),
],
},
},
};
};
export const getDefaultTooltipStyles = (mode: ThemeMode) => [
{
props: (props: TooltipProps) => props.color === "default",
style: {
backgroundColor: getJsonValue(`tokens.${mode}.colour.surface.invert`),
color: getJsonValue(`tokens.${mode}.colour.text.primary`),
"& .MuiTooltip-arrow": {
color: getJsonValue(`tokens.${mode}.colour.text.primary`),
},
},
},
];
export const getSuccessTooltipStyles = (mode: ThemeMode) => [
{
props: (props: TooltipProps) => props.color === "success",
style: {
backgroundColor: getJsonValue(`tokens.${mode}.primitive.success.25`),
border: `1px solid ${getJsonValue(
`tokens.${mode}.primitive.success.50`,
)}`,
"& .MuiTooltip-arrow": {
color: getJsonValue(`tokens.${mode}.primitive.success.100`),
},
},
},
];
export const getWarningTooltipStyles = (mode: ThemeMode) => [
{
props: (props: TooltipProps) => props.color === "warning",
style: {
backgroundColor: getJsonValue(`tokens.${mode}.primitive.warning.10`),
border: `1px solid ${getJsonValue(
`tokens.${mode}.primitive.warning.50`,
)}`,
"& .MuiTooltip-arrow": {
color: getJsonValue(`tokens.${mode}.primitive.warning.100`),
},
},
},
];
export const getLightTooltipStyles = () => [
{
props: (props: TooltipProps) => props.color === "light",
style: {
backgroundColor: getJsonValue(`tokens.dark.colour.surface.invert`),
color: getJsonValue(`tokens.dark.colour.text.primary`),
"& .MuiTooltip-arrow": {
color: getJsonValue(`tokens.dark.colour.text.primary`),
},
boxShadow: "0px 4px 16px rgba(0, 0, 0, 0.25)",
},
},
];
|