@actinc/dls
Version:
Design Language System (DLS) for ACT & Encoura front-end projects.
1,377 lines (1,376 loc) • 60.7 kB
JavaScript
/**
* Copyright (c) ACT, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
var __assign = (this && this.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
var _a, _b, _c;
import E4ECustomDimensions from './E4ECustomDimensions';
import palette from './palette';
import shadows from './shadows';
import spacing from './spacing';
import typography, { INPUT_FONT_SIZE, primaryFontFamily, secondaryFontFamily, } from './typography';
export var LARGE_RADIUS = '8px';
export var NO_RADIUS = {
borderBottomLeftRadius: 0,
borderBottomRightRadius: 0,
borderRadius: 0,
borderTopLeftRadius: 0,
borderTopRightRadius: 0,
};
export var components = {
MuiAccordion: {
styleOverrides: {
root: function (_a) {
var _b;
var ownerState = _a.ownerState;
var disabledOverrides = (ownerState === null || ownerState === void 0 ? void 0 : ownerState.disabled)
? {
'&.Mui-disabled': {
backgroundColor: palette.branding.surface[200],
color: palette.text.overLight.disabled,
fontWeight: 600,
},
}
: {};
var expandedOverrides = (ownerState === null || ownerState === void 0 ? void 0 : ownerState.expanded)
? {
'*:has(.MuiAccordion-root.Mui-expanded) > *': {
margin: 0,
},
}
: {};
return __assign(__assign({ '&:before': {
height: 0,
}, ':first-of-type': {
borderTopLeftRadius: 8,
borderTopRightRadius: 8,
}, ':last-of-type': {
borderBottomLeftRadius: 8,
borderBottomRightRadius: 8,
}, backgroundColor: (_b = palette.common) === null || _b === void 0 ? void 0 : _b.white }, disabledOverrides), expandedOverrides);
},
},
},
MuiAccordionDetails: {
styleOverrides: {
root: {
borderBottomLeftRadius: 8,
borderBottomRightRadius: 8,
},
},
},
MuiAccordionSummary: {
styleOverrides: {
expandIconWrapper: {
color: palette.branding.sapphire[500],
margin: 12,
},
root: {
'&.Mui-disabled': {
'&>.MuiAccordionSummary-expandIconWrapper': {
color: palette.branding.surface[600],
},
opacity: 1,
},
height: 68,
},
},
},
MuiAlert: {
styleOverrides: {
action: {
button: {
padding: 0,
},
marginLeft: '24px',
marginRight: '0px',
padding: 0,
svg: {
fill: "".concat(palette.branding.sapphire[500], " !important"),
height: '16px',
width: '16px',
},
},
icon: {
'& > svg': {
height: '22px',
width: '22px',
},
marginRight: '8px',
padding: 0,
},
message: {
flexGrow: 1,
padding: 0,
},
outlinedError: {
background: palette.utility.error[50],
borderColor: palette.utility.error[500],
color: palette.utility.error[700],
svg: {
fill: palette.utility.error[700],
},
},
outlinedInfo: {
background: palette.utility.info[50],
borderColor: palette.branding.sapphire[600],
color: palette.utility.info[700],
svg: {
fill: palette.utility.info[700],
},
},
outlinedSuccess: {
background: palette.utility.success[50],
borderColor: palette.utility.success[500],
color: palette.utility.success[700],
svg: {
fill: palette.utility.success[700],
},
},
outlinedWarning: {
background: palette.utility.warning[50],
borderColor: palette.utility.warning[600],
color: palette.utility.warning[800],
svg: {
fill: palette.utility.warning[600],
},
},
root: {
alignItems: 'center',
border: '1px solid',
borderRadius: '4px',
boxShadow: shadows[2],
display: 'flex',
padding: "".concat(spacing(1), " ").concat(spacing(2)),
},
standard: {
background: palette.branding.surface[100],
borderColor: palette.branding.surface[500],
color: palette.text.overLight.high,
},
standardInfo: {
'.MuiAlert-icon': {
display: 'none',
},
},
},
},
MuiAutocomplete: {
styleOverrides: {
endAdornment: {
button: {
'&.Mui-disabled': {
svg: {
fill: palette.branding.surface[500],
},
},
'&:hover': {
background: 'unset',
},
},
},
inputRoot: function (_a) {
var ownerState = _a.ownerState;
var autocompleteSize = ownerState === null || ownerState === void 0 ? void 0 : ownerState.size;
var readOnlyOverrides = (ownerState === null || ownerState === void 0 ? void 0 : ownerState.readOnly)
? {
'&>.MuiAutocomplete-input': {
padding: 0,
zIndex: 1,
},
}
: {};
return __assign({ '&.MuiInputBase-root.MuiOutlinedInput-root>div.MuiAutocomplete-endAdornment': {
right: '12px',
}, '&.MuiInputBase-root.MuiOutlinedInput-root>input.MuiAutocomplete-input.MuiInputBase-input.MuiOutlinedInput-input': __assign({ borderRadius: 0, padding: 0 }, (autocompleteSize === 'large' && {
marginTop: '0px !important',
})), '&>.MuiAutocomplete-input.Mui-disabled': {
color: palette.text.overLight.high,
WebkitTextFillColor: palette.text.overLight.high,
}, height: autocompleteSize === 'large' ? '48px !important' : '40px', padding: '12px 44px 12px 12px' }, readOnlyOverrides);
},
listbox: {
'&>.MuiAutocomplete-option': {
padding: '8px 16px 8px 16px',
},
'&>.MuiAutocomplete-option.Mui-focused': {
backgroundColor: palette.branding.surface[100],
},
'&>.MuiAutocomplete-option[aria-disabled="true"]': {
color: palette.text.overLight.medium,
fontSize: 14,
fontWeight: 400,
lineHeight: '20px',
opacity: 1,
},
'&>.MuiAutocomplete-option[aria-selected="true"]': {
backgroundColor: "".concat(palette.branding.surface[100], " !important"),
},
},
noOptions: {
color: palette.text.overLight.medium,
fontSize: 14,
fontWeight: 400,
lineHeight: '20px',
margin: '8px 0',
padding: '8px 16px 8px 16px',
},
paper: {
backgroundColor: (_a = palette.common) === null || _a === void 0 ? void 0 : _a.white,
boxShadow: '0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)',
},
popper: {
margin: '2px 0 !important',
},
root: function (_a) {
var _b;
var ownerState = _a.ownerState;
var autocompleteSize = ownerState === null || ownerState === void 0 ? void 0 : ownerState.size;
var isReadOnly = ownerState === null || ownerState === void 0 ? void 0 : ownerState.readOnly;
var readOnlyOverrides = (ownerState === null || ownerState === void 0 ? void 0 : ownerState.readOnly)
? {
'&:hover>div>div.MuiOutlinedInput-root>fieldset': {
backgroundColor: palette.branding.mist[100],
borderColor: palette.branding.surface[500],
},
'&>div>div.MuiOutlinedInput-root.Mui-disabled>fieldset': {},
'&>div>div.MuiOutlinedInput-root>div.MuiAutocomplete-endAdornment': {
zIndex: 1,
},
'&>div>div.MuiOutlinedInput-root>fieldset': {
backgroundColor: palette.branding.mist[100],
borderColor: palette.branding.surface[500],
pointerEvents: 'none',
},
}
: {};
return __assign((_b = {}, _b['&.MuiAutocomplete-root>div.MuiTextField-root.MuiFormControl-root label[data-shrink="true"]' +
'+ div.MuiInputBase-root div.MuiAutocomplete-endAdornment>button'] = {
padding: '2px',
}, _b['&>div>div.MuiOutlinedInput-root.Mui-disabled>div.MuiAutocomplete-endAdornment>button.Mui-disabled'] = {
backgroundColor: 'rgba(0, 0, 0, 0)',
color: palette.text.overLight.medium,
}, _b['&>div>div.MuiOutlinedInput-root.Mui-disabled>fieldset'] = {
borderColor: palette.branding.surface[500],
}, _b['&>div>label.Mui-disabled'] = {
color: palette.text.overLight.disabled,
}, _b.label = {
'&:not(.MuiInputLabel-shrink)': {
color: isReadOnly ? palette.text.overLight.medium : null,
marginTop: autocompleteSize === 'large' ? '0' : '-4.5px',
maxWidth: '70%',
overflow: 'hidden',
textOverflow: 'ellipsis',
whiteSpace: 'nowrap',
},
}, _b.pointerEvents = isReadOnly ? 'none' : 'unset', _b.width = (ownerState === null || ownerState === void 0 ? void 0 : ownerState.fullWidth) ? 'unset' : '220px', _b), readOnlyOverrides);
},
},
},
MuiAvatar: {
styleOverrides: {
root: {
'& .MuiSvgIcon-root': {
'&.MuiSvgIcon-fontSizeSmall': {
height: '24px',
width: '24px',
},
},
},
},
},
MuiBadge: {
styleOverrides: {
colorPrimary: {
background: palette.branding.sapphire[500],
},
colorSecondary: {
background: palette.branding.teal[500],
},
},
},
MuiButton: {
defaultProps: {
disableTouchRipple: true,
},
styleOverrides: {
contained: {
'&:hover': {
boxShadow: '0px 4px 8px rgba(79, 94, 113, 0.1), 0px 2px 4px rgba(79, 94, 113, 0.11), 0px 0px 2px rgba(79, 94, 113, 0.12)',
},
backgroundColor: palette.branding.sapphire[500],
boxShadow: 'none',
},
containedPrimary: {
'&:hover': {
backgroundColor: palette.branding.sapphire[700],
},
},
containedSecondary: {
'&:hover': {
backgroundColor: palette.branding.teal[700],
},
},
iconOutlined: {
'&.MuiButton-sizeLarge': {
border: "2px solid ".concat(palette.branding.sapphire[400]),
},
'&.MuiButton-sizeMedium': {
borderColor: palette.branding.sapphire[400],
},
'&.MuiButton-sizeSmall': {
borderColor: palette.branding.sapphire[400],
},
'&:hover': {
backgroundColor: palette.branding.sapphire[50],
borderColor: palette.branding.sapphire[200],
boxShadow: '0px 4px 8px rgba(79, 94, 113, 0.1), 0px 2px 4px rgba(79, 94, 113, 0.11), 0px 0px 2px rgba(79, 94, 113, 0.12)',
},
backgroundColor: 'unset',
border: "1px solid ".concat(palette.branding.sapphire[400]),
color: palette.branding.sapphire[500],
},
outlined: {
'&.MuiButton-sizeLarge': {
border: "2px solid ".concat(palette.branding.sapphire[400]),
},
'&.MuiButton-sizeMedium': {
borderColor: palette.branding.sapphire[400],
},
'&.MuiButton-sizeSmall': {
borderColor: palette.branding.sapphire[400],
},
'&:hover': {
backgroundColor: palette.branding.sapphire[50],
borderColor: palette.branding.sapphire[200],
boxShadow: '0px 4px 8px rgba(79, 94, 113, 0.1), 0px 2px 4px rgba(79, 94, 113, 0.11), 0px 0px 2px rgba(79, 94, 113, 0.12)',
},
backgroundColor: 'unset',
color: palette.branding.sapphire[500],
},
root: {
'&.Mui-disabled.MuiButton-contained': {
backgroundColor: palette.branding.surface[200],
},
'&.Mui-disabled.MuiButton-outlined': {
borderColor: palette.branding.surface[400],
},
'.MuiButton-endIcon': {
margin: 0,
},
'.MuiButton-startIcon': {
margin: 0,
},
borderRadius: 8,
fontFamily: primaryFontFamily,
gap: 4,
textTransform: 'capitalize',
},
sizeLarge: __assign(__assign({ '& > svg': {
height: 20,
width: 20,
} }, typography.buttonLarge), { height: '48px', padding: "14px 32px" }),
sizeMedium: __assign(__assign({ '& > svg': {
height: 16,
width: 16,
} }, typography.buttonMedium), { height: '40px', padding: "10px 24px" }),
sizeSmall: __assign(__assign({ '& > svg': {
height: 16,
width: 16,
} }, typography.buttonSmall), { height: 24, padding: "2px 16px" }),
text: {
'&.MuiButton-sizeLarge': {
padding: '14px 16px',
},
'&.MuiButton-sizeMedium': {
padding: '10px 8px',
},
'&.MuiButton-sizeSmall': {
padding: '2px 8px',
},
'&:hover': {
backgroundColor: palette.branding.sapphire[50],
},
backgroundColor: 'unset',
color: palette.branding.sapphire[500],
fontWeight: 500,
},
textSecondary: {
'&:hover': {
backgroundColor: palette.branding.teal[50],
},
color: palette.branding.teal[500],
},
textSizeLarge: {
fontWeight: 600,
},
},
},
MuiButtonBase: {
defaultProps: {
disableTouchRipple: true,
},
styleOverrides: {
root: __assign(__assign({}, INPUT_FONT_SIZE), { '&.MuiCheckbox-root.Mui-disabled': {
color: palette.branding.surface[400],
}, borderRadius: '8px' }),
},
},
MuiCard: {
styleOverrides: {
root: {
border: "1px solid ".concat(palette.branding.surface[300]),
},
},
},
MuiCheckbox: {
styleOverrides: {
root: function (_a) {
var ownerState = _a.ownerState;
var sizeSmallOverrides = (ownerState === null || ownerState === void 0 ? void 0 : ownerState.size) === 'small'
? {
'& > svg': {
height: 20,
width: 20,
},
height: 32,
padding: 8.5,
width: 32,
}
: {};
return __assign({ '& > svg': {
height: 24,
width: 24,
}, '&.Mui-checked': {
'&:hover': {
backgroundColor: palette.branding.teal[50],
},
color: palette.branding.teal[500],
}, '&.Mui-disabled': {
color: palette.branding.surface[400],
}, '&.Mui-disabled.Mui-checked': {
color: palette.branding.surface[400],
}, '&:hover': {
backgroundColor: palette.branding.surface[200],
}, color: palette.text.overLight.medium, height: 40, marginRight: 1, padding: 11, width: 40 }, sizeSmallOverrides);
},
},
},
MuiChip: {
styleOverrides: {
avatar: {
fill: palette.text.overLight.high,
},
avatarMedium: {
height: 24,
width: 24,
},
avatarSmall: {
height: 16,
width: 16,
},
deleteIcon: {
margin: 0,
},
deleteIconMedium: {
'&>svg': {
height: 24,
width: 24,
},
},
filled: {
'&.Mui-disabled': {
'&>.MuiChip-deleteIcon': {
color: palette.branding.mist[600],
},
backgroundColor: "".concat(palette.branding.mist[100], " !important"),
},
},
labelMedium: {
padding: '0px 6px',
},
labelSmall: {
padding: '0px 6px',
},
outlined: {
'&.Mui-disabled': {
border: "1px solid ".concat(palette.branding.mist[400], " !important"),
},
},
root: {
'&.Mui-disabled': {
'&>.MuiChip-deleteIcon': {
color: palette.branding.mist[600],
},
'.MuiChip-avatar': {
fill: palette.text.overLight.disabled,
},
color: palette.text.overLight.disabled,
},
':has(.MuiChip-avatar)': {
gap: '2px',
},
borderRadius: 32,
color: palette.text.overLight.high,
fontFamily: secondaryFontFamily,
fontSize: 14,
fontWeight: 400,
lineHeight: 20 / 14,
maxWidth: 'fit-content',
minWidth: spacing(7),
opacity: 1,
},
sizeMedium: {
'&>svg': {
height: 24,
opacity: 0.7,
width: 24,
},
height: 32,
padding: "3px ".concat(spacing(1)),
},
sizeSmall: {
'&>svg': {
height: 16,
opacity: 0.7,
width: 16,
},
height: 24,
padding: "".concat(spacing(0.25), " ").concat(spacing(1)),
},
},
variants: [
{
props: { variant: 'gradYear' },
style: {
fontSize: '18px',
fontWeight: 600,
justifySelf: 'end',
lineHeight: '24px',
},
},
],
},
MuiDateCalendar: {
styleOverrides: {
root: {
'.MuiYearCalendar-root': {
maxWidth: 'fit-content',
overflowY: 'scroll',
padding: '0px 12px 12px 12px',
scrollbarWidth: 'none',
},
'.MuiYearPicker-root': {
width: '304px',
},
overflow: 'hidden',
width: 277,
},
viewTransitionContainer: {
padding: '0 12px',
},
},
},
MuiDayCalendar: {
styleOverrides: {
weekContainer: {
'&:first-of-type': {
marginTop: 15,
},
'&:last-of-type': {
marginBottom: 12,
},
'&:not(:last-of-type)': {
marginBottom: 14,
},
margin: 0,
},
weekDayLabel: {
height: 32,
width: 32,
},
},
},
MuiDialog: {
styleOverrides: {
container: {
alignItems: 'flex-start',
marginTop: "".concat(E4ECustomDimensions.heights.header, "px"),
},
paper: {
color: palette.text.overLight.high,
},
root: {
backgroundColor: palette.background.scrim,
padding: spacing(0),
},
},
},
MuiDialogActions: {
styleOverrides: {
root: {
margin: spacing(2),
},
},
},
MuiDivider: {
styleOverrides: {
fullWidth: {
width: '100%',
},
root: function (_a) {
var ownerState = _a.ownerState;
var orientation = ownerState === null || ownerState === void 0 ? void 0 : ownerState.orientation;
var variant = ownerState === null || ownerState === void 0 ? void 0 : ownerState.variant;
var dividerSize;
if (variant === 'small') {
dividerSize = '24px';
}
if (variant === 'medium') {
dividerSize = '40px';
}
if (variant === 'large') {
dividerSize = '80px';
}
if (variant === 'fill') {
dividerSize = '100%';
}
return {
border: "2px solid ".concat(palette.branding.surface[700]),
borderRadius: 2,
borderWidth: 1,
height: orientation === 'vertical' ? dividerSize : 0,
width: orientation === 'vertical' ? 0 : dividerSize,
};
},
},
},
MuiFilledInput: {
styleOverrides: {
hiddenLabel: {
paddingBottom: spacing(1.5),
paddingTop: spacing(1.5),
},
input: {
'&:-webkit-autofill': {
borderTopLeftRadius: 0,
borderTopRightRadius: 0,
},
},
root: {
borderRadius: 32,
borderTopLeftRadius: 32,
borderTopRightRadius: 32,
},
},
},
MuiFormControl: {
styleOverrides: {
root: {
'&:has(.Mui-focused.MuiInputBase-formControl.MuiInputBase-readOnly)': {
'&>label': {
color: palette.text.overLight.medium,
},
},
margin: 0,
},
},
},
MuiFormControlLabel: {
styleOverrides: {
label: {
'&.Mui-disabled': {
color: palette.text.overLight.disabled,
},
},
root: {
marginLeft: 0,
},
},
},
MuiFormHelperText: {
styleOverrides: {
root: {
'&.Mui-error': {
color: palette.utility.error[500],
},
color: palette.text.overLight.medium,
marginLeft: 0,
marginTop: 4,
},
},
},
MuiFormLabel: {
styleOverrides: {
root: {
'&.MuiInputLabel-root.Mui-focused': {
color: palette.branding.sapphire[500],
},
},
},
},
MuiIconButton: {
styleOverrides: {
colorPrimary: {
'&:hover': {
backgroundColor: palette.branding.sapphire[700],
},
backgroundColor: palette.branding.sapphire[500],
color: palette.utility.white,
},
colorSecondary: {
'&:hover': {
backgroundColor: palette.branding.sapphire[100],
},
backgroundColor: palette.branding.sapphire[50],
color: palette.branding.sapphire[500],
},
colorTerciary: {
'&:hover': {
backgroundColor: palette.branding.sapphire[50],
},
backgroundColor: 'unset',
color: palette.branding.sapphire[500],
},
root: {
'&.Mui-disabled': {
backgroundColor: palette.branding.surface[100],
color: palette.branding.surface[600],
},
'&.MuiPickersArrowSwitcher-button': {
height: 40,
width: 40,
},
borderRadius: 48,
color: palette.text.overLight.medium,
label: {
'&.Mui-disabled': {
color: palette.text.overLight.disabled,
},
},
},
sizeLarge: {
'& > svg': {
height: 32,
width: 32,
},
},
sizeMedium: {
'& > svg': {
height: 24,
width: 24,
},
},
sizeSmall: {
'& > svg': {
height: 16,
width: 16,
},
},
},
},
MuiInputAdornment: {
styleOverrides: {
positionEnd: {
'& > svg': {
color: palette.text.overLight.medium,
},
},
positionStart: {
'&>.MuiTypography-root': {
color: palette.branding.surface[700],
},
},
},
},
MuiInputBase: {
styleOverrides: {
root: {
'&.MuiInputBase-readOnly': {
'&.MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline': {
backgroundColor: palette.branding.mist[100],
borderColor: palette.branding.surface[500],
},
},
'&.MuiSelect-root. MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline': {
borderColor: palette.branding.sapphire[500],
},
height: 48,
},
sizeSmall: {
height: 40,
},
},
},
MuiInputLabel: {
styleOverrides: {
asterisk: {
'&.Mui-error': {
color: palette.text.overLight.medium,
},
},
root: {
'&.Mui-disabled': {
color: palette.text.overLight.disabled,
},
'&.Mui-error': {
color: palette.utility.error[500],
},
'&.MuiInputLabel-shrink': {
'&.Mui-error': {
'&>.MuiInputLabel-asterisk': {
color: palette.utility.error[500],
},
color: palette.utility.error[500],
},
transform: 'translate(14px, -8px) scale(0.625)',
},
'&.MuiInputLabel-sizeSmall': {
'&.MuiInputLabel-shrink': {
transform: 'translate(14px, -8px) scale(0.625)',
},
transform: 'translate(12px, 9px) scale(1)',
},
color: palette.text.overLight.medium,
transform: 'translate(12px, 12px) scale(1)',
},
},
},
MuiLinearProgress: {
styleOverrides: {
bar: {
backgroundColor: palette.branding.teal[500],
},
bar1Determinate: {
borderRadius: 8,
},
root: {
background: palette.branding.surface[300],
borderRadius: 8,
height: 12,
},
},
},
MuiLink: {
styleOverrides: {
root: {
'&:hover': {
color: palette.branding.sapphire[700],
textDecorationColor: palette.branding.sapphire[700],
},
color: palette.branding.sapphire[500],
textDecorationColor: palette.branding.sapphire[500],
},
},
},
MuiListItemIcon: {
styleOverrides: {
root: {
color: palette.text.overLight.medium,
marginRight: spacing(0.25),
minWidth: 'auto',
},
},
},
MuiMenu: {
styleOverrides: {
root: function (_a) {
var _b, _c;
var ownerState = _a.ownerState;
return {
'.MuiMenu-paper': {
boxShadow: '0px 5px 5px -3px rgba(0, 0, 0, 0.2),' +
'0px 8px 10px 1px rgba(0, 0, 0, 0.14),' +
'0px 3px 14px 2px rgba(0, 0, 0, 0.12)',
maxHeight: '348px',
minWidth: (_c = (_b = ownerState === null || ownerState === void 0 ? void 0 : ownerState.anchorEl) === null || _b === void 0 ? void 0 : _b.offsetWidth) !== null && _c !== void 0 ? _c : 'inherit',
},
};
},
},
},
MuiMenuItem: {
styleOverrides: {
root: {
'&.Mui-disabled': {
'&:first-of-type': {
color: palette.text.overLight.medium,
fontSize: '14px',
lineHeight: '20px',
opacity: 'unset',
},
color: palette.text.overLight.disabled,
opacity: 'inherit',
span: {
color: palette.text.overLight.disabled,
},
},
'&:hover': {
background: palette.branding.surface[100],
borderRadius: 0,
},
'&:not(&.Mui-disabled)': {
span: {
'&:nth-last-of-type(even)': {
color: palette.text.overLight.medium,
},
},
},
justifyContent: 'space-between',
minWidth: '100%',
padding: '8px 16px',
},
},
},
MuiOutlinedInput: {
styleOverrides: {
root: {
'& > fieldset': {
'& > legend': {
fontSize: 10,
},
borderColor: palette.branding.surface[700],
borderRadius: 8,
borderWidth: 1,
},
'& > input': {
color: palette.text.overLight.high,
padding: 12,
},
'&.Mui-disabled': {
'& > .MuiInputAdornment-positionStart > .MuiTypography-root': {
color: palette.text.overLight.disabled,
},
'& > .MuiOutlinedInput-notchedOutline': {
borderColor: palette.branding.surface[500],
},
'& > input': {
color: palette.branding.surface[500],
WebkitTextFillColor: palette.branding.surface[500],
},
},
// Error should overwrite focus for the border color
// eslint-disable-next-line sort-keys
'&.Mui-error': {
'& > .MuiOutlinedInput-notchedOutline': {
borderColor: palette.utility.error[500],
},
},
'&.Mui-focused': {
'& > .MuiOutlinedInput-notchedOutline': {
borderColor: palette.branding.sapphire[500],
},
},
'&.MuiInputBase-readOnly': {
'& > .MuiInputAdornment-positionEnd': {
zIndex: 1,
},
'& > .MuiInputAdornment-positionEnd > .MuiSvgIcon-root': {
zIndex: 1,
},
'& > .MuiInputAdornment-positionStart > .MuiTypography-root': {
color: palette.branding.surface[500],
zIndex: 1,
},
'& > fieldset': {
backgroundColor: palette.branding.mist[100],
borderColor: palette.branding.surface[500],
},
'& > input': {
zIndex: 1,
},
},
},
},
},
MuiPaper: {
styleOverrides: {
root: {
'&.MuiAccordion-root.Mui-expanded': {
margin: 0,
},
'&.MuiPickersPopper-paper': {
margin: '2px 0px',
},
},
rounded: {
borderRadius: '8px',
},
},
},
MuiPickerPopper: {
styleOverrides: {
paper: {
'& > .MuiDialogActions-root.MuiDialogActions-spacing': {
margin: 0,
},
},
},
},
MuiPickersArrowSwitcher: {
styleOverrides: {
spacer: {
width: 12,
},
},
},
MuiPickersCalendarHeader: {
styleOverrides: {
label: __assign(__assign({}, typography.buttonSmall), { color: palette.branding.sapphire[500] }),
labelContainer: {
margin: 0,
},
root: {
'&>.MuiPickersArrowSwitcher-root': {
'&>.MuiPickersArrowSwitcher-button': {
'&.Mui-disabled': {
backgroundColor: 'unset',
color: palette.text.overLight.disabled,
},
'&:hover': {
backgroundColor: palette.branding.sapphire[50],
},
backgroundColor: 'unset',
color: palette.branding.sapphire[500],
margin: 0,
padding: 0,
},
'&>.MuiPickersArrowSwitcher-spacer': {
width: 0,
},
},
justifyContent: 'space-between',
margin: '2px 0px 2px 16px',
minHeight: 44,
padding: 0,
},
switchViewButton: {
'&:hover': {
backgroundColor: palette.branding.sapphire[50],
},
height: 24,
width: 24,
},
switchViewIcon: {
color: palette.branding.sapphire[500],
},
},
},
MuiPickersDay: {
styleOverrides: {
today: {
'&:not(&.Mui-selected)': {
border: "1px solid ".concat(palette.branding.sapphire[500]),
color: palette.branding.sapphire[500],
},
},
},
},
MuiPickersLayout: {
styleOverrides: {
root: {
// This is necessary because MuiCalendarOrClockPicker injects a div without class or name to tag it
'& > div': {
borderRadius: '8px',
boxShadow: '0px 16px 32px rgba(79, 94, 113, 0.08), 0px 8px 16px rgba(79, 94, 113, 0.09),' +
'0px 4px 8px rgba(79, 94, 113, 0.1), 0px 2px 4px rgba(79, 94, 113, 0.11), 0px 0px 2px rgba(79, 94, 113, 0.12);',
width: 'auto',
},
},
},
},
/**
* Change this class is necessary in the sense we need to make the monthContainer flexible. The container has a space below saved for months
* with 6 rows of weeks that happens when the 1st start on a Saturday and the day has 31 days but the container should adapt it's size according
* with the number of weeks as designed by UX.
*/
MuiPickersSlideTransition: {
styleOverrides: {
root: {
'> .MuiDayPicker-monthContainer': {
position: 'unset',
},
},
},
},
MuiRadio: {
styleOverrides: {
root: function (_a) {
var ownerState = _a.ownerState;
var sizeSmallOverrides = (ownerState === null || ownerState === void 0 ? void 0 : ownerState.size) === 'small'
? {
'& > span': {
height: 20,
width: 20,
},
'& > span.MuiTouchRipple-root': {
height: 38,
width: 38,
},
height: 38,
padding: 10.67,
width: 38,
}
: {};
return __assign({ '& > span > svg.MuiSvgIcon-fontSizeMedium': {
height: 24,
width: 24,
}, '& > span > svg.MuiSvgIcon-fontSizeSmall': {
height: 20,
width: 20,
}, '&.Mui-checked': {
'&:hover': {
backgroundColor: palette.branding.teal[50],
},
color: palette.branding.teal[500],
}, '&.Mui-disabled': {
color: palette.branding.surface[400],
}, '&:hover': {
backgroundColor: palette.branding.surface[200],
}, color: palette.branding.surface[900], height: 42, marginRight: 1, padding: 11, width: 42 }, sizeSmallOverrides);
},
},
},
MuiSelect: {
styleOverrides: {
icon: {
fill: palette.text.overLight.medium,
top: 'unset',
},
select: {
'&.MuiInputBase-input.MuiOutlinedInput-input.Mui-disabled': {
WebkitTextFillColor: 'currentColor',
},
padding: '12px',
},
},
},
MuiSkeleton: {
styleOverrides: {
circular: {
borderRadius: '48px',
},
root: {
backgroundColor: palette.branding.surface[100],
borderRadius: '8px',
transform: 'none',
},
},
},
MuiSvgIcon: {
styleOverrides: {
fontSizeLarge: {
height: '32px',
width: '32px',
},
fontSizeMedium: {
height: '24px',
width: '24px',
},
fontSizeSmall: {
height: '16px',
width: '16px',
},
},
},
MuiSwitch: {
styleOverrides: {
root: {
borderRadius: 14,
padding: 0,
},
sizeMedium: {
'& > .MuiSwitch-track': {
backgroundColor: palette.branding.surface[600],
border: 0,
height: 20,
width: 36,
},
'& > span > .MuiSwitch-thumb': {
boxShadow: '0px 16px 32px rgba(79, 94, 113, 0.09), ' +
'0px 4px 8px rgba(79, 94, 113, 0.1), ' +
'0px 2px 4px rgba(79, 94, 113, 0.11), ' +
'0px 0px 2px rgba(79, 94, 113, 0.12)',
color: (_b = palette.common) === null || _b === void 0 ? void 0 : _b.white,
height: 16,
width: 16,
},
height: 20,
width: 36,
},
sizeSmall: {
'& > .MuiSwitch-switchBase': {
'&.Mui-checked': {
transform: 'translateX(11px)',
},
padding: 2,
},
'& > .MuiSwitch-track': {
backgroundColor: palette.branding.surface[600],
height: 16,
width: 27,
},
'& > span > .MuiSwitch-thumb': {
boxShadow: '0px 16px 32px rgba(79, 94, 113, 0.09), ' +
'0px 4px 8px rgba(79, 94, 113, 0.1), ' +
'0px 2px 4px rgba(79, 94, 113, 0.11), ' +
'0px 0px 2px rgba(79, 94, 113, 0.12)',
color: (_c = palette.common) === null || _c === void 0 ? void 0 : _c.white,
height: 12,
width: 12,
},
height: 16,
width: 27,
},
switchBase: {
'&.Mui-checked': {
transform: 'translateX(16px)',
},
'&.Mui-checked + .MuiSwitch-track': {
backgroundColor: palette.branding.teal[100],
borderRadius: 14,
opacity: 1,
},
'&.Mui-checked > .MuiSwitch-thumb': {
backgroundColor: palette.branding.teal[600],
boxShadow: '0px 16px 32px rgba(79, 94, 113, 0.09), ' +
'0px 4px 8px rgba(79, 94, 113, 0.1), ' +
'0px 2px 4px rgba(79, 94, 113, 0.11), ' +
'0px 0px 2px rgba(79, 94, 113, 0.12)',
},
'&.Mui-disabled + .MuiSwitch-track': {
backgroundColor: palette.branding.surface[200],
opacity: 1,
},
'&.Mui-disabled > .MuiSwitch-thumb': {
boxShadow: 'none',
color: palette.utility.white,
},
padding: 2,
},
track: {
backgroundColor: palette.branding.surface[600],
opacity: 1,
},
},
},
MuiTab: {
styleOverrides: {
root: {
'&.Mui-disabled': {
color: palette.text.overLight.disabled,
},
'&.Mui-selected': {
color: palette.branding.teal[700],
},
borderRadius: 5,
color: palette.text.overLight.high,
fontFamily: primaryFontFamily,
fontSize: 14,
fontWeight: 500,
height: '48px',
lineHeight: '20px',
padding: '14px 16px',
textTransform: 'none',
},
},
},
MuiTableContainer: {
styleOverrides: {
root: {
'&.MuiPaper-root': {
border: 'unset',
},
borderRadius: 0,
},
},
},
MuiTablePagination: {
styleOverrides: {
selectLabel: {
color: palette.text.overLight.medium,
fontSize: 14,
fontWeight: 400,
letterSpacing: 0,
lineHeight: 20 / 14,
},
},
},
MuiTableSortLabel: {
styleOverrides: {
icon: {
'&:hover': {
fill: palette.text.overLight.medium,
},
fill: palette.text.overLight.medium,
height: 20,
width: 20,
},
},
},
MuiTabs: {
styleOverrides: {
indicator: {
backgroundColor: palette.branding.teal[500],
},
root: {
button: {
minWidth: 0,
},
},
},
},
MuiTextField: {
styleOverrides: {
root: function (_a) {
var _b;
var ownerState = _a.ownerState;
var readOnlyOverrides = ((_b = ownerState === null || ownerState === void 0 ? void 0 : ownerState.InputProps) === null || _b === void 0 ? void 0 : _b.readOnly)
? {
'& div.MuiInputBase-readOnly': {
'& input.MuiInputBase-input': {
color: palette.text.overLight.high,
lineHeight: '24px',
WebkitTextFillColor: palette.text.overLight.high,
},
},
'& label.MuiFormLabel-root': {
color: palette.text.overLight.medium,
},
'&:hover': {
'& fieldset': {
borderColor: palette.branding.surface[500],
},
},
}
: {};
var disabledOverrides = (ownerState === null || ownerState === void 0 ? void 0 : ownerState.disabled)
? {
'& div.MuiInputBase-root': {
'& input.MuiInputBase-input': {
color: palette.text.overLight.disabled,
lineHeight: '24px',
paddingRight: 0,
WebkitTextFillColor: palette.text.overLight.disabled,
},
},
'& div.MuiInputBase-root.Mui-disabled': {
'& fieldset.MuiOutlinedInput-notchedOutline': {
'& legend span': {
marginRight: '-1px',
padding: '0px 4px',
},
},
'&:hover': {