@pagopa/mui-italia
Version:
[Material-UI](https://mui.com/core/) theme inspired by [Bootstrap Italia](https://italia.github.io/bootstrap-italia/).
930 lines (929 loc) • 37.6 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.darkTheme = exports.theme = exports.breakpointsChromaticValues = exports.focusOffset = exports.focusBorderRadius = exports.focusWidth = exports.ringWidth = void 0;
const tslib_1 = require("tslib");
const styles_1 = require("@mui/material/styles");
/* Design Tokens */
const _tokens_1 = require("../tokens/index");
const muiSwitch_1 = tslib_1.__importDefault(require("./muiSwitch"));
const utility_1 = require("./utility");
const foundation_1 = tslib_1.__importDefault(require("./foundation"));
const fonts_1 = require("./fonts");
const colors_1 = require("./colors");
/* Basic Configuration */
const responsiveBreakpoint = 'sm';
exports.ringWidth = '4px';
const marginLinkSize = '4px';
const paddingLinkSize = '1px';
exports.focusWidth = '2px';
exports.focusBorderRadius = '8px';
exports.focusOffset = '4px';
const focusButtonOffset = '2px';
const alertBorderWidth = '4px';
/*
Used to generate different snapshots per component
More info: https://www.chromatic.com/docs/viewports
*/
exports.breakpointsChromaticValues = [375, 640, 900, 1200, 1600];
exports.theme = (0, styles_1.createTheme)(foundation_1.default, {
typography: {
/* H1 Large */
headline: {
fontSize: (0, utility_1.pxToRem)(58),
fontFamily: fonts_1.mainTypeface,
color: colors_1.colorTextPrimary,
lineHeight: 1.1 /* ~64px */,
fontWeight: foundation_1.default.typography.fontWeightBold,
},
h1: {
fontSize: (0, utility_1.pxToRem)(42),
lineHeight: 1.1 /* 46px */,
fontWeight: foundation_1.default.typography.fontWeightBold,
[foundation_1.default.breakpoints.up(responsiveBreakpoint)]: {
fontSize: (0, utility_1.pxToRem)(50),
lineHeight: 1.08 /* 54px */,
},
},
h2: {
fontSize: (0, utility_1.pxToRem)(36),
lineHeight: 1.1 /* ~40px */,
fontWeight: foundation_1.default.typography.fontWeightBold,
[foundation_1.default.breakpoints.up(responsiveBreakpoint)]: {
fontSize: (0, utility_1.pxToRem)(44),
lineHeight: 1.09 /* ~48px */,
},
},
h3: {
fontSize: (0, utility_1.pxToRem)(32),
lineHeight: 1.125 /* 36px */,
fontWeight: foundation_1.default.typography.fontWeightBold,
[foundation_1.default.breakpoints.up(responsiveBreakpoint)]: {
fontSize: (0, utility_1.pxToRem)(38),
lineHeight: 1.1 /* ~42px */,
},
},
h4: {
fontSize: (0, utility_1.pxToRem)(28),
lineHeight: 1.15 /* ~32px */,
fontWeight: foundation_1.default.typography.fontWeightBold,
[foundation_1.default.breakpoints.up(responsiveBreakpoint)]: {
fontSize: (0, utility_1.pxToRem)(32),
lineHeight: 1.125 /* 36px */,
},
},
h5: {
fontSize: (0, utility_1.pxToRem)(24),
lineHeight: 1.15 /* ~28px */,
fontWeight: foundation_1.default.typography.fontWeightMedium,
[foundation_1.default.breakpoints.up(responsiveBreakpoint)]: {
fontSize: (0, utility_1.pxToRem)(28),
lineHeight: 1.5 /* 42px */,
},
},
h6: {
fontSize: (0, utility_1.pxToRem)(22),
lineHeight: 1.18 /* ~26px */,
fontWeight: foundation_1.default.typography.fontWeightMedium,
[foundation_1.default.breakpoints.up(responsiveBreakpoint)]: {
fontSize: (0, utility_1.pxToRem)(24),
lineHeight: 1.15 /* ~28px */,
},
},
sidenav: {
fontFamily: fonts_1.mainTypeface,
fontSize: (0, utility_1.pxToRem)(18),
lineHeight: 1.35 /* ~24px */,
color: colors_1.colorTextPrimary,
fontWeight: foundation_1.default.typography.fontWeightMedium,
},
body1: {
fontSize: (0, utility_1.pxToRem)(18),
lineHeight: 1.5 /* ~28px */,
fontWeight: foundation_1.default.typography.fontWeightRegular,
letterSpacing: 0,
/* a: {
color: italia[500],
textDecoration: "underline",
}, */
},
body2: {
fontSize: (0, utility_1.pxToRem)(16),
lineHeight: 1.4 /* ~20px */,
fontWeight: foundation_1.default.typography.fontWeightRegular,
letterSpacing: 0.15,
/* a: {
color: italia[500],
textDecoration: "underline",
}, */
},
button: {
lineHeight: 1.2,
textTransform: 'none',
letterSpacing: 0,
},
caption: {
fontSize: (0, utility_1.pxToRem)(14),
lineHeight: 1.4 /* ~20px */,
fontWeight: foundation_1.default.typography.fontWeightRegular,
},
'caption-semibold': {
fontFamily: fonts_1.mainTypeface,
fontSize: (0, utility_1.pxToRem)(14),
lineHeight: 1.4 /* ~20px */,
color: colors_1.colorTextPrimary,
fontWeight: foundation_1.default.typography.fontWeightMedium,
},
monospaced: {
fontFamily: fonts_1.monospacedTypeface,
fontSize: (0, utility_1.pxToRem)(16),
lineHeight: 1.4 /* ~22px */,
color: colors_1.colorTextPrimary,
letterSpacing: '0.15px',
fontWeight: foundation_1.default.typography.fontWeightRegular,
},
overline: {
fontSize: (0, utility_1.pxToRem)(14),
lineHeight: 1.15 /* ~16px */,
fontWeight: foundation_1.default.typography.fontWeightBold,
letterSpacing: 1,
},
/* Start: To be revised */
subtitle1: {
a: {
color: _tokens_1.italia[500],
textDecoration: 'underline',
},
fontWeight: foundation_1.default.typography.fontWeightMedium,
},
subtitle2: {
fontSize: (0, utility_1.pxToRem)(14),
fontWeight: foundation_1.default.typography.fontWeightMedium,
},
/* End: To be revised */
},
components: {
MuiButton: {
defaultProps: {
disableElevation: true,
disableFocusRipple: true,
},
styleOverrides: {
root: {
padding: '0 20px',
'&.Mui-focusVisible': {
borderRadius: `${exports.focusBorderRadius}`,
outline: `solid ${exports.focusWidth} ${foundation_1.default.palette.primary.main}`,
outlineOffset: `${focusButtonOffset}`,
boxShadow: 'none',
},
minHeight: (0, utility_1.pxToRem)(24),
minWidth: (0, utility_1.pxToRem)(24),
'&.MuiButton-text': {
'&:hover': {
backgroundColor: 'transparent',
color: '#0055AA',
},
},
'&.MuiButton-contained': {
'&:hover': {
backgroundColor: '#0055AA',
},
},
},
sizeSmall: {
height: '40px',
padding: '0 20px',
fontSize: (0, utility_1.pxToRem)(14),
lineHeight: 1.25 /* ~18px */,
},
sizeMedium: {
height: '48px',
padding: '0 24px',
fontSize: (0, utility_1.pxToRem)(16),
lineHeight: 1.25 /* 20px */,
},
sizeLarge: {
height: '56px',
padding: '0 24px',
fontSize: (0, utility_1.pxToRem)(18),
lineHeight: 1.2 /* ~22px */,
},
outlined: {
borderWidth: '2px',
'&:hover': {
borderWidth: '2px',
},
'&:disabled': {
borderWidth: '2px',
},
},
outlinedPrimary: {
borderColor: foundation_1.default.palette.primary.main,
'&:hover': {
color: foundation_1.default.palette.primary.dark,
borderColor: 'currentColor',
},
},
outlinedError: {
borderColor: foundation_1.default.palette.error.main,
'&:hover': {
color: foundation_1.default.palette.error.dark,
borderColor: 'currentColor',
},
'&.Mui-focusVisible': {
borderRadius: `${exports.focusBorderRadius}`,
outline: `solid ${exports.focusWidth} ${foundation_1.default.palette.error.main}`,
outlineOffset: `${exports.focusOffset}`,
boxShadow: 'none',
},
},
},
variants: [
{
props: { variant: 'naked' },
style: {
color: foundation_1.default.palette.text.primary,
padding: 0,
height: 'auto',
minWidth: 'auto',
'&:hover': {
color: (0, styles_1.alpha)(foundation_1.default.palette.text.primary, 0.8),
backgroundColor: 'transparent',
},
'&.Mui-focusVisible': {
borderRadius: `${exports.focusBorderRadius}`,
outline: `solid ${exports.focusWidth} ${foundation_1.default.palette.text.primary}`,
outlineOffset: `${exports.focusOffset}`,
boxShadow: 'none',
},
},
},
{
props: { variant: 'naked', color: 'primary' },
style: {
color: foundation_1.default.palette.primary.main,
'&:hover': {
color: colors_1.colorPrimaryContainedHover,
},
'&.Mui-focusVisible': {
borderRadius: `${exports.focusBorderRadius}`,
outline: `solid ${exports.focusWidth} ${foundation_1.default.palette.primary.main}`,
outlineOffset: `${focusButtonOffset}`,
boxShadow: 'none',
},
},
},
{
props: { variant: 'naked', color: 'error' },
style: {
color: foundation_1.default.palette.error.main,
'&:hover': {
color: foundation_1.default.palette.error.light,
},
'&.Mui-focusVisible': {
borderRadius: `${exports.focusBorderRadius}`,
outline: `solid ${exports.focusWidth} ${foundation_1.default.palette.error.main}`,
outlineOffset: `${focusButtonOffset}`,
boxShadow: 'none',
},
},
},
],
},
MuiIconButton: {
defaultProps: {
disableRipple: true,
},
styleOverrides: {
root: {
color: foundation_1.default.palette.primary.main,
backgroundColor: foundation_1.default.palette.background.paper,
'&:hover': {
backgroundColor: (0, styles_1.alpha)(foundation_1.default.palette.primary.main, 0.08),
},
'&:active': {
backgroundColor: (0, styles_1.alpha)(foundation_1.default.palette.primary.main, 0.2),
},
'&.Mui-focusVisible': {
backgroundColor: (0, styles_1.alpha)(foundation_1.default.palette.primary.main, 0.2),
outline: `solid ${exports.focusWidth} ${foundation_1.default.palette.primary.main}`,
outlineOffset: `${focusButtonOffset}`,
boxShadow: 'none',
},
},
colorPrimary: {
color: foundation_1.default.palette.primary.contrastText,
backgroundColor: foundation_1.default.palette.primary.main,
'&:hover': {
backgroundColor: (0, styles_1.alpha)(foundation_1.default.palette.primary.main, 0.08),
color: foundation_1.default.palette.primary.main,
},
},
minHeight: (0, utility_1.pxToRem)(24),
minWidth: (0, utility_1.pxToRem)(24),
},
},
MuiTooltip: {
styleOverrides: {
tooltip: {
fontSize: (0, utility_1.pxToRem)(14),
backgroundColor: '#455B71',
fontWeight: foundation_1.default.typography.fontWeightMedium,
textAlign: 'center',
boxShadow: foundation_1.default.shadows[16],
},
arrow: {
color: '#455B71',
},
},
},
MuiBreadcrumbs: {
styleOverrides: {
root: {
fontSize: (0, utility_1.pxToRem)(16),
color: foundation_1.default.palette.text.primary,
},
li: {
'a:hover': {
textDecoration: 'none',
},
p: {
fontSize: `${(0, utility_1.pxToRem)(16)} !important`,
},
svg: {
fontSize: (0, utility_1.pxToRem)(20),
marginRight: foundation_1.default.spacing(1.5),
},
},
separator: {
color: foundation_1.default.palette.text.secondary,
},
},
},
/* START Stepper */
MuiStepLabel: {
styleOverrides: {
label: {
fontSize: (0, utility_1.pxToRem)(14),
[foundation_1.default.breakpoints.up(responsiveBreakpoint)]: {
fontSize: (0, utility_1.pxToRem)(14),
},
'&.Mui-completed': {
fontWeight: foundation_1.default.typography.fontWeightMedium,
},
'&.Mui-active': {
fontWeight: foundation_1.default.typography.fontWeightMedium,
},
},
},
},
/* END Stepper */
/* START Alert */
MuiAlert: {
styleOverrides: {
root: {
borderLeft: `${alertBorderWidth} solid`,
padding: foundation_1.default.spacing(1),
color: colors_1.colorTextPrimary,
alignItems: 'center',
[foundation_1.default.breakpoints.up(responsiveBreakpoint)]: {
padding: foundation_1.default.spacing(2),
},
},
icon: {
opacity: 1,
padding: 0,
alignItems: 'center',
marginRight: foundation_1.default.spacing(1),
[foundation_1.default.breakpoints.up(responsiveBreakpoint)]: {
marginRight: foundation_1.default.spacing(2),
},
},
message: {
padding: 0,
overflow: 'inherit', // Fix overflow: auto bug introduced by MUI
},
action: {
marginRight: 0,
paddingTop: 0,
},
outlined: {
backgroundColor: foundation_1.default.palette.common.white,
boxShadow: foundation_1.default.shadows[4],
borderWidth: `0 0 0 ${alertBorderWidth}`,
},
standard: {
'& .MuiAlert-icon': {
color: colors_1.colorTextPrimary,
},
},
standardSuccess: {
borderColor: foundation_1.default.palette.success.main,
},
outlinedSuccess: {
borderColor: foundation_1.default.palette.success.main,
'& .MuiAlert-icon': {
color: foundation_1.default.palette.success.main,
},
},
standardError: {
borderColor: foundation_1.default.palette.error.main,
},
outlinedError: {
borderColor: foundation_1.default.palette.error.main,
'& .MuiAlert-icon': {
color: foundation_1.default.palette.error.main,
},
},
standardInfo: {
borderColor: foundation_1.default.palette.info.main,
},
outlinedInfo: {
borderColor: foundation_1.default.palette.info.main,
'& .MuiAlert-icon': {
color: foundation_1.default.palette.info.main,
},
},
standardWarning: {
borderColor: foundation_1.default.palette.warning.main,
},
outlinedWarning: {
borderColor: foundation_1.default.palette.warning.main,
'& .MuiAlert-icon': {
color: foundation_1.default.palette.warning.main,
},
},
},
},
MuiAlertTitle: {
styleOverrides: {
root: {
fontSize: (0, utility_1.pxToRem)(16),
fontWeight: foundation_1.default.typography.fontWeightMedium,
letterSpacing: 0.15,
margin: 0,
/* It inherits from `body1`, so I have to reset -_- */
[foundation_1.default.breakpoints.up(responsiveBreakpoint)]: {
fontSize: (0, utility_1.pxToRem)(16),
},
},
},
},
/* END Alert */
/* START Card */
MuiCard: {
styleOverrides: {
root: {
borderRadius: foundation_1.default.spacing(1),
},
},
},
MuiCardContent: {
styleOverrides: {
root: {
padding: foundation_1.default.spacing(3),
},
},
},
MuiCardActions: {
styleOverrides: {
root: {
padding: foundation_1.default.spacing(3),
paddingTop: 0,
},
},
},
/* END Card */
/* START Snackbar */
MuiSnackbarContent: {
styleOverrides: {
root: {
padding: foundation_1.default.spacing(2),
color: foundation_1.default.palette.text.primary,
backgroundColor: foundation_1.default.palette.common.white,
boxShadow: foundation_1.default.shadows[4],
},
action: {
marginRight: 0,
},
message: {
padding: 0,
fontSize: (0, utility_1.pxToRem)(16),
},
},
},
/* END Snackbar */
MuiBadge: {
styleOverrides: {
badge: {
fontSize: (0, utility_1.pxToRem)(14),
fontWeight: foundation_1.default.typography.fontWeightMedium,
letterSpacing: 0.15,
'&.MuiBadge-sidenav': {
fontSize: (0, utility_1.pxToRem)(12),
position: 'relative',
transform: 'translate(0,0)',
boxShadow: `0 0 0 2px ${(0, styles_1.alpha)(foundation_1.default.palette.common.white, 0.5)}`,
},
},
},
},
MuiChip: {
styleOverrides: {
root: {
height: 'auto',
borderRadius: foundation_1.default.spacing(5),
},
label: {
fontSize: (0, utility_1.pxToRem)(14),
fontWeight: foundation_1.default.typography.fontWeightMedium,
lineHeight: 1.3 /* ~18px */,
letterSpacing: 0.5,
textAlign: 'center',
overflowWrap: 'break-word',
whiteSpace: 'normal',
textOverflow: 'clip',
padding: `${foundation_1.default.spacing(1)} ${foundation_1.default.spacing(1.5)}` /* 8px 12px */,
},
labelSmall: {
padding: `${foundation_1.default.spacing(0.5)} ${foundation_1.default.spacing(1)}` /* 4px 8px */,
},
deleteIcon: {
color: 'currentColor',
opacity: '0.7',
'&:hover': {
color: 'currentColor',
opacity: 1,
},
},
avatar: {
fontWeight: foundation_1.default.typography.fontWeightRegular,
},
outlined: {
borderRadius: foundation_1.default.spacing(5),
'&.MuiChip-outlinedDefault': {
color: colors_1.colorTextPrimary,
borderColor: '#0000003B',
'& .MuiChip-avatar': {
backgroundColor: foundation_1.default.palette.grey[400],
color: '#17324D',
},
},
'&.MuiChip-outlinedPrimary': {
color: colors_1.colorTextPrimary,
borderColor: colors_1.colorTextPrimary,
},
},
filled: {
'&.MuiChip-colorDefault': {
backgroundColor: foundation_1.default.palette.grey[200],
color: foundation_1.default.palette.text.primary,
},
'&.MuiChip-colorPrimary': {
backgroundColor: foundation_1.default.palette.primary[100],
color: colors_1.colorTextPrimary,
},
'&.MuiChip-colorSecondary': {
backgroundColor: (0, styles_1.alpha)(foundation_1.default.palette.secondary.main, 0.5),
color: foundation_1.default.palette.text.primary,
},
'&.MuiChip-colorInfo': {
backgroundColor: foundation_1.default.palette.info[100],
color: foundation_1.default.palette.info[850],
},
'&.MuiChip-colorError': {
backgroundColor: foundation_1.default.palette.error[100],
color: foundation_1.default.palette.error[850],
},
'&.MuiChip-colorSuccess': {
backgroundColor: foundation_1.default.palette.success[100],
color: foundation_1.default.palette.success[850],
},
'&.MuiChip-colorWarning': {
backgroundColor: foundation_1.default.palette.warning[100],
color: foundation_1.default.palette.warning[850],
},
},
colorDefault: {
'& .MuiChip-avatar': {
backgroundColor: foundation_1.default.palette.grey[400],
color: foundation_1.default.palette.grey[700],
},
'& .MuiChip-deleteIcon': {
color: (0, styles_1.alpha)(foundation_1.default.palette.text.primary, 0.23),
},
},
colorPrimary: {
'& .MuiChip-avatar': {
backgroundColor: foundation_1.default.palette.primary.light,
color: foundation_1.default.palette.primary.contrastText,
},
'& .MuiChip-deleteIcon': {
color: colors_1.colorTextPrimary,
},
},
colorSecondary: {
'& .MuiChip-deleteIcon': {
color: colors_1.colorTextPrimary,
},
},
colorInfo: {
'& .MuiChip-avatar': {
backgroundColor: foundation_1.default.palette.info.light,
color: foundation_1.default.palette.info[850],
},
'& .MuiChip-deleteIcon': {
color: foundation_1.default.palette.info[850],
},
},
colorError: {
'& .MuiChip-avatar': {
backgroundColor: foundation_1.default.palette.error.light,
color: foundation_1.default.palette.error[850],
},
'& .MuiChip-deleteIcon': {
color: foundation_1.default.palette.error[850],
},
},
colorSuccess: {
'& .MuiChip-avatar': {
backgroundColor: foundation_1.default.palette.success.light,
color: foundation_1.default.palette.success[850],
},
'& .MuiChip-deleteIcon': {
color: foundation_1.default.palette.success[850],
},
},
colorWarning: {
'& .MuiChip-avatar': {
backgroundColor: foundation_1.default.palette.warning.light,
color: foundation_1.default.palette.warning[850],
},
'& .MuiChip-deleteIcon': {
color: foundation_1.default.palette.warning[850],
},
},
},
},
/** Start TEXT FIELD */
MuiInput: {
styleOverrides: {
root: {
fontWeight: foundation_1.default.typography.fontWeightMedium,
},
},
},
MuiOutlinedInput: {
styleOverrides: {
root: {
fontWeight: foundation_1.default.typography.fontWeightMedium,
'& .MuiOutlinedInput-notchedOutline': {},
'&.Mui-error .MuiOutlinedInput-notchedOutline': {
borderColor: foundation_1.default.palette.error.dark,
},
},
},
},
MuiInputLabel: {
styleOverrides: {
root: {
color: foundation_1.default.palette.text.secondary,
fontWeight: foundation_1.default.typography.fontWeightMedium,
'&.Mui-error': {
color: foundation_1.default.palette.error.dark,
},
},
},
},
MuiInputAdornment: {
styleOverrides: {
root: {
'& .MuiSvgIcon-colorError': {
color: `${foundation_1.default.palette.error.dark}`,
},
},
},
},
MuiFormHelperText: {
styleOverrides: {
root: {
fontSize: (0, utility_1.pxToRem)(12),
lineHeight: 1.25 /* 15px */,
color: foundation_1.default.palette.text.secondary,
fontWeight: foundation_1.default.typography.fontWeightMedium,
letterSpacing: 0.5,
'&.Mui-error': {
color: foundation_1.default.palette.error.dark,
},
},
},
},
/** End TEXT FIELD */
MuiBackdrop: {
styleOverrides: {
root: {
backgroundColor: (0, styles_1.alpha)(colors_1.backdropBackground, 0.7),
},
invisible: {
backgroundColor: 'transparent',
},
},
},
MuiTimelineDot: {
styleOverrides: {
root: {
boxShadow: 'none',
},
},
},
MuiSwitch: muiSwitch_1.default,
/** Start LIST ITEM (used in Sidenav) */
MuiListItemButton: {
defaultProps: {
disableRipple: true,
},
styleOverrides: {
root: {
transitionProperty: 'background-color, border-color',
transitionDuration: foundation_1.default.transitions.duration.standard,
paddingTop: foundation_1.default.spacing(2),
paddingBottom: foundation_1.default.spacing(2),
/* Selected State */
'&.Mui-selected': {
borderRight: `2px solid ${foundation_1.default.palette.primary.dark}`,
},
'&.Mui-selected .MuiListItemText-root': {
color: foundation_1.default.palette.primary.dark,
},
'&.Mui-selected .MuiListItemIcon-root': {
color: foundation_1.default.palette.primary.dark,
},
},
},
},
MuiListItemText: {
styleOverrides: {
root: {
transition: `${foundation_1.default.transitions.duration.standard}ms ${foundation_1.default.transitions.easing.easeInOut}`,
transitionProperty: 'color',
color: foundation_1.default.palette.text.primary,
margin: 0,
},
primary: {
fontWeight: foundation_1.default.typography.fontWeightMedium,
color: 'currentColor',
},
},
},
MuiListItemIcon: {
styleOverrides: {
root: {
/* Default Icon Size = 24px */
fontSize: (0, utility_1.pxToRem)(24),
transition: `${foundation_1.default.transitions.duration.standard}ms ${foundation_1.default.transitions.easing.easeInOut}`,
transitionProperty: 'color',
minWidth: 'auto',
color: foundation_1.default.palette.text.primary,
'& + .MuiListItemText-root': {
marginLeft: foundation_1.default.spacing(2),
},
},
},
},
/** End LIST ITEM */
/** Start POPOVER */
MuiPopover: {
styleOverrides: {
paper: {
boxShadow: foundation_1.default.shadows[16],
},
},
},
/** End POPOVER */
MuiSelect: {
styleOverrides: {
root: {
'& .MuiListItemIcon-root + .MuiListItemText-root': {
marginLeft: foundation_1.default.spacing(1),
},
},
select: {
display: 'flex',
alignItems: 'center',
'& .MuiListItemText-root': {
whiteSpace: 'nowrap',
overflow: 'hidden',
textOverflow: 'ellipsis',
},
},
},
},
MuiMenuItem: {
defaultProps: {
disableRipple: true,
},
styleOverrides: {
root: {
fontSize: (0, utility_1.pxToRem)(16),
fontWeight: foundation_1.default.typography.fontWeightMedium,
whiteSpace: 'normal',
'& .MuiListItemIcon-root': {
color: foundation_1.default.palette.action.active,
fontSize: (0, utility_1.pxToRem)(20),
minWidth: 'auto',
},
'& .MuiListItemIcon-root + .MuiListItemText-root': {
marginLeft: foundation_1.default.spacing(1),
},
/* I know that the CSS overwrite under this block don't look very nice ¯\_(ツ)_/¯
But it seems the only way to style these elements without building
everything from the ground using Unstyled components */
'& .MuiListItemText-root .MuiListItemText-primary': {
fontSize: (0, utility_1.pxToRem)(16),
},
'&.Mui-selected': {
color: foundation_1.default.palette.primary.main,
'.MuiListItemText-root': {
color: foundation_1.default.palette.primary.main,
},
'.MuiListItemIcon-root': {
color: foundation_1.default.palette.primary.main,
},
},
'&:hover': {
backgroundColor: (0, styles_1.alpha)(colors_1.menuItemBackground, 0.04),
},
},
},
},
MuiPaginationItem: {
defaultProps: {
disableRipple: true,
},
styleOverrides: {
root: {
'&.Mui-focusVisible': {
outline: `solid ${exports.focusWidth} `,
outlineOffset: `${exports.focusOffset}`,
boxShadow: 'none',
},
},
},
},
/** End SELECT */
MuiTableHead: {
styleOverrides: {
root: {
fontWeight: foundation_1.default.typography.fontWeightMedium,
},
},
},
MuiLink: {
styleOverrides: {
root: {
'&.MuiTypography-root': {
marginTop: `${marginLinkSize}`,
marginBottom: `${marginLinkSize}`,
paddingTop: `${paddingLinkSize}`,
paddingBottom: `${paddingLinkSize}`,
},
'&.Mui-focusVisible': {
borderRadius: `${exports.focusBorderRadius}`,
outline: `solid ${exports.focusWidth} `,
outlineOffset: `${exports.focusOffset}`,
boxShadow: 'none',
},
},
},
},
MuiInputBase: {
styleOverrides: {
formControl: {
'& .MuiInputAdornment-positionEnd': {
paddingRight: (0, utility_1.pxToRem)(14),
},
},
},
},
MuiPickersCalendarHeader: {
styleOverrides: {
labelContainer: {
padding: (0, utility_1.pxToRem)(14),
paddingLeft: 0,
},
},
},
},
});
exports.darkTheme = (0, styles_1.createTheme)(exports.theme, {
palette: {
mode: 'dark',
primary: {
main: '#3DA2FF',
contrastText: '#FFFFFF',
},
background: {
paper: '#252525',
},
},
});