synapse-react-client
Version:
[](https://badge.fury.io/js/synapse-react-client) [](https://github.com/prettier/prettie
425 lines (424 loc) • 12.9 kB
JavaScript
import { jsx as l } from "react/jsx-runtime";
import c from "../assets/icons/Checkbox/Checked.js";
import u from "../assets/icons/Checkbox/Indeterminate.js";
import g from "../assets/icons/Checkbox/Unchecked.js";
import { ErrorTwoTone as x, CheckCircleTwoTone as f, InfoTwoTone as m, HighlightOffTwoTone as h } from "@mui/icons-material";
import { Fade as M, inputBaseClasses as b, alpha as p, lighten as n } from "@mui/material";
import { palette as y } from "./palette/Palettes.js";
import v from "./typography/Link.js";
import { typographyOptions as k } from "./typography/Typography.js";
const a = "2px", d = M, D = {
typography: k,
palette: y,
components: {
MuiAlert: {
defaultProps: {
square: !0,
iconMapping: {
error: /* @__PURE__ */ l(h, {}),
info: /* @__PURE__ */ l(m, {}),
success: /* @__PURE__ */ l(f, {}),
warning: /* @__PURE__ */ l(x, {})
}
},
styleOverrides: {
root: ({ ownerState: o, theme: e }) => ({
alignItems: "center",
fontSize: "14px",
borderLeft: `10px solid ${// The default severity is 'success'.
e.palette[o.severity || "success"].main}`,
color: e.palette.text.primary
}),
icon: ({ theme: o }) => ({
marginRight: o.spacing(3)
}),
action: ({ ownerState: o, theme: e }) => ({
paddingRight: e.spacing(2),
...o.onClose && !o.action && { color: e.palette.grey[700] }
}),
standardSuccess: ({ theme: o }) => ({
backgroundColor: n(o.palette.success.light, 0.8)
}),
standardError: ({ theme: o }) => ({
backgroundColor: n(o.palette.error.light, 0.8)
}),
standardWarning: ({ theme: o }) => ({
backgroundColor: n(o.palette.warning.light, 0.8)
}),
standardInfo: ({ theme: o }) => ({
backgroundColor: n(o.palette.info.light, 0.8)
})
}
},
MuiAlertTitle: {
styleOverrides: {
root: ({ theme: o }) => ({
color: o.palette.text.primary,
fontSize: "14px",
fontWeight: 700
})
}
},
MuiLink: v,
MuiButtonBase: {
defaultProps: {
disableRipple: !0
}
},
MuiButton: {
styleOverrides: {
root: ({ ownerState: o }) => {
let e = "6px 12px";
return o.size === "small" ? e = "6px 8px" : o.size === "large" && (e = "8px 16px"), {
fontWeight: 900,
padding: e,
borderRadius: "3px",
textTransform: "var(--synapse-button-text-transform)",
"&:hover": {
transition: "0.2s"
}
};
},
contained: ({ theme: o, ownerState: e }) => ({
"&:hover, &:visited": {
// Overrides a base style in bootstrap 3 and in SWC
color: e.color === "inherit" ? e.color : o.palette[e.color || "primary"].contrastText
}
}),
outlined: ({ theme: o, ownerState: e }) => ({
"&:hover, &:visited": {
// Overrides a base style in Bootstrap 3 and in SWC
color: e.color === "inherit" ? e.color : o.palette[e.color || "primary"].dark
}
}),
text: ({ theme: o, ownerState: e }) => ({
"&:hover": {
textDecoration: "underline",
textUnderlineOffset: "4px",
textDecorationColor: e.color === "inherit" ? e.color : o.palette[e.color || "primary"].main,
textDecorationThickness: "2px"
},
"&:hover, &:visited": {
// Overrides a base style in Bootstrap 3 and in SWC
color: e.color === "inherit" ? e.color : o.palette[e.color || "primary"].main
}
})
}
},
MuiCard: {
styleOverrides: {
root: {
border: "1px solid rgba(0, 0, 0, 0.05)",
boxShadow: "0px 16px 16px rgba(0, 0, 0, 0.05), 0px 4px 4px rgba(0, 0, 0, 0.05), 0px 1px 1px rgba(0, 0, 0, 0.05)"
}
},
defaultProps: {
square: !0
}
},
MuiFormControlLabel: {
styleOverrides: {
root: ({ theme: o }) => ({
// Remove negative margin
marginLeft: "0px",
// When rendering a checkbox/radio, add margin between the control and the label
"& .MuiCheckbox-root, & .MuiRadio-root": {
marginRight: o.spacing(1)
}
})
}
},
MuiCheckbox: {
defaultProps: {
color: "secondary",
icon: /* @__PURE__ */ l(g, {}),
checkedIcon: /* @__PURE__ */ l(c, {}),
indeterminateIcon: /* @__PURE__ */ l(u, {}),
size: "small"
},
styleOverrides: {
root: ({ theme: o, ownerState: { color: e = "primary" } }) => {
const r = e === "default" ? o.palette.primary : o.palette[e], i = 100 in r ? r[100] : r.light, t = 600 in r ? r[600] : r.dark;
return {
padding: "0px",
borderRadius: "0px",
"&:not(.Mui-checked):not(.MuiCheckbox-indeterminate)": {
color: o.palette.grey[600],
"&:not(.Mui-disabled):hover": {
boxShadow: `0px 0px 2px 2px ${i}`
},
"&.Mui-focusVisible": {
color: r.main
}
},
"&:hover.Mui-checked, &.Mui-focusVisible.Mui-checked, &.Mui-focusVisible.MuiCheckbox-indeterminate, &:hover.MuiCheckbox-indeterminate": {
"svg > rect": {
stroke: i
},
"svg > path": {
transform: "scale(0.95)",
transformOrigin: "center"
}
},
"&:hover:active.Mui-checked, &:hover:active.MuiCheckbox-indeterminate": {
"svg > rect": {
fill: t
}
},
"&.Mui-disabled": {
color: o.palette.grey[400]
}
};
}
}
},
MuiRadio: {
defaultProps: {
color: "secondary",
size: "small"
},
styleOverrides: {
root: ({ theme: o, ownerState: { color: e = "primary" } }) => {
const r = e === "default" ? o.palette.primary : o.palette[e], i = o.palette.grey[400], t = 100 in r ? r[100] : r.light, s = 600 in r ? r[600] : r.dark;
return {
padding: "0px",
":hover, &.Mui-focusVisible": {
outline: "2px solid",
outlineOffset: "-1px"
},
"&:not(.Mui-checked)": {
color: o.palette.grey[600],
"&:not(.Mui-disabled):hover": {
outlineColor: i
},
"&.Mui-focusVisible": {
color: r.main,
outlineColor: t
}
},
"&:hover.Mui-checked, &.Mui-focusVisible.Mui-checked": {
outlineColor: t,
color: s
},
"&:hover:active.Mui-checked": {
outlineColor: t
},
"&.Mui-disabled": {
color: o.palette.grey[400]
}
};
}
}
},
MuiDialog: {
styleOverrides: {
root: ({ theme: o }) => ({
".MuiDialog-container > .MuiPaper-root": {
borderRadius: "0px",
padding: o.spacing(5.5),
alignSelf: "flex-start"
}
})
}
},
MuiDialogTitle: {
styleOverrides: {
root: ({ theme: o }) => ({
fontSize: "24px",
fontWeight: 700,
paddingLeft: "0px",
paddingRight: "0px",
paddingBottom: o.spacing(3)
})
}
},
MuiDialogContent: {
defaultProps: {
dividers: !0
},
styleOverrides: {
root: ({ ownerState: o, theme: e }) => ({
color: e.palette.text.secondary,
paddingTop: o.dividers ? e.spacing(3) : 0,
paddingBottom: o.dividers ? e.spacing(3) : 0,
// Hack - set add a small padding and offset with a negative margin so box-shadow effects on full width elements (like input fields) are shown
paddingLeft: a,
paddingRight: a,
marginLeft: `-${a}`,
marginRight: `-${a}`,
// Add a filter on the `dividers` borders so that the borders are transparent on the edges based on the DIALOG_INNER_PADDING length
borderImage: o.dividers ? `linear-gradient(to right, transparent 0px, transparent ${a}, ${e.palette.grey[400]} ${a}, ${e.palette.grey[400]} calc(100% - ${a}), transparent calc(100% - ${a})) 1` : void 0
})
}
},
MuiDialogActions: {
styleOverrides: {
root: ({ theme: o }) => ({
paddingLeft: "0px",
paddingRight: "0px",
paddingTop: o.spacing(3),
"& .MuiButton-root": {
height: "36px",
padding: "0px 16px"
}
})
}
},
MuiFormHelperText: {
styleOverrides: {
root: ({ theme: o }) => ({
marginLeft: "0",
"&.Mui-error": {
color: o.palette.error.main
}
})
}
},
MuiInputBase: {
styleOverrides: {
root: ({ theme: o, ownerState: e }) => {
const r = e.error || e.focused;
let i = "none";
r && (e.error ? i = `1px solid ${o.palette.error.main}` : e.color && (i = `1px solid ${o.palette[e.color].main}`));
let t = o.palette.grey[200];
e.error && (t = p(o.palette.error.main, 0.1));
const s = e.color === "warning" ? o.palette[e.color].main : void 0;
return {
borderRadius: "3px",
fontSize: "14px",
position: "relative",
backgroundColor: t,
outline: i,
"&+.MuiFormHelperText-root": {
color: s
},
"&.Mui-disabled": {
backgroundColor: o.palette.grey[100]
},
"&.Mui-focused": {
boxShadow: `${p(
o.palette.primary.main,
0.25
)} 0 0 0 0.1rem`
},
"& fieldset": {
border: "none"
}
};
},
input: ({ theme: o }) => ({
padding: "14px 12px"
}),
multiline: {
padding: "0px"
}
}
},
MuiInputLabel: {
defaultProps: {
shrink: !0
},
styleOverrides: {
root: ({ theme: o }) => ({
fontWeight: 700,
mb: "4px",
fontSize: "14px",
transform: "none",
".MuiInputLabel-asterisk": {
color: o.palette.secondary.main
}
})
}
},
MuiTextField: {
styleOverrides: {
root: ({ theme: o, ownerState: e }) => ({
[`& .${b.root}`]: {
marginTop: e.label && o.spacing(3)
}
})
}
},
MuiMenu: {
defaultProps: {
slots: {
transition: d
}
}
},
MuiMenuItem: {
styleOverrides: {
root: {
height: "38px",
paddingLeft: "12px",
paddingRight: "12px"
}
}
},
MuiTab: {
styleOverrides: {
root: {
fontWeight: 900,
textTransform: "capitalize"
}
}
},
MuiToggleButton: {
styleOverrides: {
root: {
textTransform: "var(--synapse-button-text-transform)"
}
}
},
MuiTooltip: {
defaultProps: {
arrow: !0,
slots: {
transition: d
}
},
styleOverrides: {
arrow: ({ theme: o }) => ({
color: o.palette.common.black
}),
tooltip: ({ theme: o }) => ({
fontSize: "14px",
borderRadius: "2px",
backgroundColor: o.palette.common.black,
"& .MuiLink-root": {
color: "#fff"
}
})
}
},
MuiTypography: {
defaultProps: {
variantMapping: {
headline1: "h1",
headline2: "h2",
headline3: "h3",
body1: "p",
body1Italic: "p",
body2: "p",
breadcrumb1: "span",
breadcrumb2: "span",
smallText1: "p",
smallText2: "p",
smallLink: "span",
label: "span",
buttonLink: "span",
hintText: "p",
sectionTitle: "p",
subsectionHeader: "p",
dataFieldKey: "p"
}
}
}
},
styledBackground: "url('https://s3.amazonaws.com/static.synapse.org/images/SynapseLoginPageBackground.svg')"
};
export {
D as default,
D as defaultMuiThemeOptions
};
//# sourceMappingURL=DefaultTheme.js.map