@nexusui/theme
Version:
This is a simple MUI theme drop in for your React application, which aims to be the source of truth for the NexusUI Design system.
1,465 lines (1,416 loc) • 76.4 kB
JavaScript
import { createTheme, alpha } from '@mui/material/styles';
import { jsx } from 'react/jsx-runtime';
import CheckCircleOutline from '@mui/icons-material/CheckCircleOutline';
import { enUS, deDE, itIT, frFR, esES, ptPT, ptBR, plPL, svSE, nlNL, trTR, csCZ, huHU, ruRU, zhCN, zhTW, koKR, jaJP, bgBG, daDK, roRO, skSK, thTH } from '@mui/material/locale';
import { useMemo } from 'react';
const toRem = (px) => `${px / 16}rem`;
const nexusFontFamily = ['Open Sans', 'Helvetica Neue', 'Arial', 'sans-serif'].join(', ');
const themeTypography = createTheme({ cssVariables: true });
themeTypography.typography = {
...themeTypography.typography,
fontFamily: nexusFontFamily,
h1: {
fontSize: toRem(80),
lineHeight: toRem(96),
fontWeight: 400,
letterSpacing: '-0.02em',
// Mobile style
[themeTypography.breakpoints.down('sm')]: {
fontSize: toRem(48),
lineHeight: toRem(64),
},
},
h2: {
fontSize: toRem(48),
lineHeight: toRem(60),
fontWeight: 400,
letterSpacing: '-0.02em',
// Mobile style
[themeTypography.breakpoints.down('sm')]: {
fontSize: toRem(42),
lineHeight: toRem(58),
},
},
h3: {
fontSize: toRem(38),
lineHeight: toRem(54),
fontWeight: 400,
letterSpacing: '-0.02em',
// Mobile style
[themeTypography.breakpoints.down('sm')]: {
fontSize: toRem(32),
lineHeight: toRem(40),
},
},
h4: {
fontSize: toRem(24),
lineHeight: toRem(32),
fontWeight: 700,
letterSpacing: '-0.02em',
// Mobile style
[themeTypography.breakpoints.down('sm')]: {
fontSize: toRem(20),
lineHeight: toRem(32),
letterSpacing: 'unset',
},
},
h5: {
fontSize: toRem(24),
lineHeight: toRem(32),
fontWeight: 600,
// Mobile style
[themeTypography.breakpoints.down('sm')]: {
fontSize: toRem(20),
lineHeight: toRem(32),
},
},
h6: {
fontSize: toRem(20),
lineHeight: toRem(32),
fontWeight: 600,
// Mobile style
[themeTypography.breakpoints.down('sm')]: {
fontSize: toRem(18),
lineHeight: toRem(24),
},
},
subtitle1: {
fontSize: toRem(18),
lineHeight: toRem(24),
fontWeight: 600,
// Mobile style
[themeTypography.breakpoints.down('sm')]: {
fontSize: toRem(16),
lineHeight: toRem(24),
},
},
subtitle2: {
fontSize: toRem(16),
lineHeight: toRem(24),
fontWeight: 600,
// Mobile style
[themeTypography.breakpoints.down('sm')]: {
fontSize: toRem(14),
lineHeight: toRem(24),
},
},
body1: {
// alias for body
fontSize: toRem(16),
lineHeight: toRem(24),
fontWeight: 400,
// Mobile style
[themeTypography.breakpoints.down('sm')]: {
fontSize: toRem(14),
lineHeight: toRem(24),
},
},
body2: {
// alias for bodyS
fontSize: toRem(14),
lineHeight: toRem(24),
fontWeight: 400,
// Mobile style - no change
},
button: {
fontSize: toRem(15),
lineHeight: toRem(24),
fontWeight: 700,
// Mobile style - no change
},
caption: {
fontSize: toRem(12),
lineHeight: toRem(16),
fontWeight: 400,
// Mobile style - no change
},
overline: {
fontSize: toRem(12),
lineHeight: toRem(16),
letterSpacing: '0.1em',
fontWeight: 400,
textTransform: 'uppercase',
// Mobile style - no change
},
};
// Generated palettes created using this tool: http://mcg.mbitson.com/
// Primary
const darkBlue = {
50: '#C6E8EF',
100: '#9DD7E4',
200: '#4AB5CE',
300: '#0097BA',
400: '#0086A8',
500: '#007496',
600: '#006284',
700: '#005072',
800: '#003C5C',
900: '#002846',
};
// Secondary / Success
const green = {
50: '#E2F2CE',
100: '#CEE9AC',
200: '#B9E189',
300: '#A5D867',
400: '#90CA59',
500: '#7BBB4B',
600: '#65AD3D',
700: '#509E2F',
800: '#348718',
900: '#186F00',
};
// Info
const blue = {
50: '#E1F7FF',
100: '#B5EAFD',
200: '#84DEFA',
300: '#53D0F5',
400: '#2EC6F0',
500: '#1DBCEA',
600: '#14ACD5',
700: '#0097BA',
800: '#0084A1',
900: '#00698A',
};
// Warning
const orange = {
50: '#FDF2E0',
100: '#FADFB2',
200: '#F7CA7F',
300: '#F4B54D',
400: '#F2A527',
500: '#F19602',
600: '#ED8A00',
700: '#E77B00',
800: '#E16C00',
900: '#D85300',
};
// Error
const red = {
50: '#FFEBEE',
100: '#FFCDD2',
200: '#EF9A9A',
300: '#E57373',
400: '#EF5350',
500: '#F44336',
600: '#E53935',
700: '#D32F2F',
800: '#C62828',
900: '#B71C1C',
};
const white = {
50: '#ffffff',
100: '#ffffff',
200: '#ffffff',
300: '#ffffff',
400: '#ffffff',
500: '#ffffff',
600: '#ffffff',
700: '#ffffff',
800: '#ffffff',
900: '#ffffff',
};
const grey = {
50: '#F3F3F3',
100: '#E6E6E6',
200: '#DCDDDD',
300: '#D1D3D4',
400: '#949494',
500: '#747577',
600: '#545559',
700: '#333436',
800: '#121212',
900: '#000000',
};
const black = {
50: '#e3e3e3',
100: '#b8b8b8',
200: '#898989',
300: '#595959',
400: '#363636',
500: '#121212',
600: '#101010',
700: '#0d0d0d',
800: '#0a0a0a',
900: '#050505',
};
const highlight = {
mint: '#009F62',
turquoise: '#48DBCF',
bluejay: '#547CDE',
cerulean: '#58A8E8',
radiantYellow: '#FC9F19',
sunshine: '#F7C50C',
blueberry: '#A144EA',
candy: '#F569E2',
};
var MuiAutocomplete = {
styleOverrides: {
listbox: ({ theme }) => ({
backgroundColor: theme.vars.palette.background.paper,
'& .MuiAutocomplete-option': {
'&.Mui-selected': {
backgroundColor: `rgba(${theme.vars.palette.primary.mainChannel} / 0.04)`,
},
'&.Mui-focused, &:hover, &:focus': {
backgroundColor: alpha(theme.palette.primary[300], 0.04),
},
},
}),
root: ({ theme }) => ({
/**
* This is a special style overwrite for the autocomplete,just for the search style, not for the normal autocomplete. it is used as below:
* <Autocomplete className={'NexusSearch'} {...otherProps />
**/
'&.NexusSearch': {
'&.Mui-focused .MuiAutocomplete-inputRoot:hover': {
backgroundColor: alpha(theme.palette.grey[800], 0.04),
...theme.applyStyles('dark', {
backgroundColor: alpha(theme.palette.common.white, 0.04),
}),
},
'& .MuiAutocomplete-inputRoot': {
backgroundColor: alpha(theme.palette.grey[800], 0.04),
'&:hover': {
backgroundColor: alpha(theme.palette.grey[800], 0.12),
},
focused: {
backgroundColor: alpha(theme.palette.grey[800], 0.04),
},
'&:not(.Mui-focused):not(.Mui-disabled):not(.Mui-error) .MuiOutlinedInput-notchedOutline': {
borderColor: 'transparent',
},
'&:hover:not(.Mui-focused):not(.Mui-disabled):not(.Mui-error) .MuiOutlinedInput-notchedOutline': {
borderColor: 'transparent',
},
...theme.applyStyles('dark', {
'&.Mui-focused .MuiOutlinedInput-notchedOutline': {
borderColor: theme.vars.palette.primary.light,
},
}),
...theme.applyStyles('dark', {
backgroundColor: alpha(theme.palette.common.white, 0.04),
'&:hover': {
backgroundColor: alpha(theme.palette.common.white, 0.12),
},
focused: {
backgroundColor: alpha(theme.palette.common.white, 0.04),
},
}),
},
},
}),
},
};
var MuiButton = {
styleOverrides: {
root: ({ ownerState, theme }) => ({
textTransform: 'none',
fontSize: ownerState.size === 'large' ? 16 : ownerState.size === 'small' ? 14 : 15,
lineHeight: ownerState.size === 'large' ? 1.5 : ownerState.size === 'small' ? 1.7 : 1.6,
fontWeight: 700,
borderRadius: Number(theme.shape.borderRadius) * 2,
}),
outlined: ({ ownerState, theme }) => ({
borderColor: ownerState?.color === 'inherit' ? 'inherit' : theme.vars.palette[ownerState?.color || 'primary'].main,
'&.Mui-disabled': {
borderColor: theme.vars.palette.action.disabled,
},
}),
iconSizeLarge: {
'& > *:nth-of-type(1)': {
fontSize: 24,
},
},
},
};
var MuiButtonGroup = {
styleOverrides: {
root: ({ theme }) => ({
'& > .MuiButtonGroup-grouped': {
'&:first-of-type': {
borderTopLeftRadius: theme.shape.borderRadius,
borderBottomLeftRadius: theme.shape.borderRadius,
},
'&:last-of-type': {
borderTopRightRadius: theme.shape.borderRadius,
borderBottomRightRadius: theme.shape.borderRadius,
},
},
}),
},
};
const getBaseColors$1 = ({ color, theme }) => ({
baseColor: color && color !== 'default' ? theme.vars.palette[color].main : theme.vars.palette.text.primary,
hoverColor: `rgba(${color && color !== 'default' ? theme.vars.palette[color].mainChannel : theme.vars.palette.text.primaryChannel} / 0.04)`,
focusColor: `rgba(${color && color !== 'default' ? theme.vars.palette[color].mainChannel : theme.vars.palette.text.primaryChannel} / 0.12)`,
});
var MuiCheckbox = {
styleOverrides: {
root: ({ ownerState, theme }) => {
const { baseColor, hoverColor, focusColor } = getBaseColors$1({
color: ownerState.color,
theme,
});
return {
color: baseColor,
'&:hover': {
backgroundColor: hoverColor,
},
'&.Mui-focusVisible': {
backgroundColor: focusColor,
'& .MuiTouchRipple-root': {
color: focusColor,
},
},
};
},
},
};
var MuiFab = {
styleOverrides: {
root: ({ ownerState }) => ({
textTransform: 'none',
fontSize: ownerState.size === 'large' ? 16 : ownerState.size === 'small' ? 14 : 15,
lineHeight: ownerState.size === 'large' ? 1.5 : ownerState.size === 'small' ? 1.7 : 1.6,
}),
},
};
var MuiFilledInput = {
styleOverrides: {
root: ({ theme }) => ({
'&.Mui-disabled': {
backgroundColor: alpha(theme.palette.common.black, 0.06),
},
'&:not(.Mui-error)': {
'&:before': {
borderBottom: `1px solid ${alpha(theme.palette.common.black, 0.42)}`,
...theme.applyStyles('dark', {
borderBottom: `1px solid ${alpha(theme.palette.common.white, 0.42)}`,
}),
},
'&.Mui-disabled:before': {
borderBottomStyle: 'dotted',
},
},
'&:not(.Mui-disabled):hover': {
backgroundColor: theme.vars.palette.action.focus,
},
'&:not(.Mui-disabled):hover:before': {
borderBottom: `2px solid ${theme.vars.palette.action.active}`,
},
'&.Mui-disabled.Mui-error:after': {
borderBottomColor: theme.vars.palette.error.light,
},
...theme.applyStyles('dark', {
backgroundColor: alpha(theme.palette.common.white, 0.04),
'&:hover': {
backgroundColor: theme.vars.palette.action.focus,
},
'&.Mui-focused': {
backgroundColor: alpha(theme.palette.common.white, 0.04),
},
'&.Mui-disabled': {
backgroundColor: theme.vars.palette.action.disabledBackground,
},
}),
}),
},
};
var MuiFormControlLabel = {
styleOverrides: {
label: {
color: 'inherit',
'&.Mui-disabled': {
color: 'inherit',
opacity: 0.5,
},
},
},
};
var MuiFormHelperText = {
styleOverrides: {
root: ({ theme }) => ({
'&.Mui-disabled.Mui-error': {
color: theme.vars.palette.error.light,
},
}),
},
};
var MuiInputBase = {
styleOverrides: {
root: ({ theme }) => ({
[theme.breakpoints.down('sm')]: {
lineHeight: '1.4375rem',
},
'&.MuiInput-root': {
'&:not(.Mui-disabled)': {
':before': {
borderBottom: `1px solid ${alpha(theme.palette.common.black, 0.42)}`,
...theme.applyStyles('dark', {
borderBottom: `1px solid ${alpha(theme.palette.common.white, 0.42)}`,
}),
},
'&.Mui-error:before': {
borderBottomColor: theme.vars.palette.error.main,
},
},
'&.Mui-disabled:before': {
borderBottom: `1px dotted ${alpha(theme.palette.common.black, 0.38)}`,
...theme.applyStyles('dark', {
borderBottom: `1px dotted ${alpha(theme.palette.common.white, 0.38)}`,
}),
},
'&:not(.Mui-disabled):hover:before': {
borderBottom: `2px solid ${theme.vars.palette.action.active}`,
},
'&.Mui-disabled.Mui-error:before': {
borderBottomColor: theme.vars.palette.error.main,
},
},
// '&.MuiFilledInput-root': {
// '&:before': {
// borderBottom: `1px solid ${alpha(theme.palette.common.black, 0.42)}`,
// ...theme.applyStyles("dark", {
// borderBottom: `1px solid ${alpha(theme.palette.common.white, 0.42)}`,
// }),
// },
// '&:hover:not(.Mui-disabled)': {
// backgroundColor: theme.vars.palette.action.focus,
// },
// '&:hover:not(.Mui-disabled):before': {
// borderBottom: `2px solid ${theme.vars.palette.action.active}`,
// },
// '&.Mui-disabled.Mui-error:after': {
// borderBottomColor: theme.vars.palette.error.light,
// },
// },
}),
input: {
'&:focus:not(:hover)': {
background: 'none',
},
// https://github.com/mui/material-ui/blob/HEAD/packages/mui-material/src/InputBase/InputBase.js#L171
// 23px, change unit from `em` to `rem`, so height will not be affected by small screen fontSize
height: '1.4375rem',
},
adornedStart: ({ theme }) => ({
'&.Mui-disabled .MuiInputAdornment-root': {
color: theme.vars.palette.action.disabled,
'& .MuiTypography-root': {
color: theme.vars.palette.text.disabled,
},
},
}),
adornedEnd: ({ theme }) => ({
'&.Mui-disabled .MuiInputAdornment-root': {
color: theme.vars.palette.action.disabled,
'& .MuiTypography-root': {
color: theme.vars.palette.text.disabled,
},
},
}),
inputAdornedStart: ({ theme }) => ({
'&.Mui-disabled .MuiInputAdornment-root': {
color: theme.vars.palette.action.disabled,
'& .MuiTypography-root': {
color: theme.vars.palette.text.disabled,
},
},
}),
inputAdornedEnd: ({ theme }) => ({
'&.Mui-disabled .MuiInputAdornment-root': {
color: theme.vars.palette.action.disabled,
'& .MuiTypography-root': {
color: theme.vars.palette.text.disabled,
},
},
}),
},
};
var MuiOutlinedInput = {
styleOverrides: {
root: ({ theme }) => ({
'&.Mui-disabled': {
'& .MuiOutlinedInput-notchedOutline': {
borderStyle: 'dashed',
},
},
'&:not(.Mui-focused):not(.Mui-disabled):not(.Mui-error) .MuiOutlinedInput-notchedOutline': {
borderColor: theme.vars.palette.grey[200],
...theme.applyStyles('dark', {
borderColor: alpha(theme.palette.common.white, 0.42),
}),
},
'&:hover:not(.Mui-focused):not(.Mui-disabled):not(.Mui-error) .MuiOutlinedInput-notchedOutline': {
borderColor: theme.vars.palette.grey[700],
...theme.applyStyles('dark', {
borderColor: theme.vars.palette.grey[200],
}),
},
}),
},
};
const getBaseColors = ({ color, theme }) => ({
baseColor: color && color !== 'default' ? theme.vars.palette[color].main : theme.vars.palette.text.primary,
hoverColor: `rgba(
${color && color !== 'default' ? theme.vars.palette[color].mainChannel : theme.vars.palette.text.primaryChannel} / 0.04)`,
focusColor: `rgba(
${color && color !== 'default' ? theme.vars.palette[color].mainChannel : theme.vars.palette.text.primaryChannel} / 0.12)`,
});
var MuiRadio = {
styleOverrides: {
root: ({ ownerState, theme }) => {
const { baseColor, hoverColor, focusColor } = getBaseColors({
color: ownerState.color,
theme,
});
return {
color: baseColor,
'&:hover': {
backgroundColor: hoverColor,
},
'&.Mui-focusVisible': {
backgroundColor: focusColor,
'& .MuiTouchRipple-root': {
color: focusColor,
},
},
};
},
},
};
var MuiRating = {
styleOverrides: {
root: ({ theme }) => ({
'&.Mui-disabled .MuiRating-icon': {
color: theme.vars.palette.action.disabled,
},
}),
icon: ({ theme }) => ({
color: theme.vars.palette.secondary.main,
}),
iconEmpty: ({ theme }) => ({
color: theme.vars.palette.grey[400],
...theme.applyStyles('dark', {
color: theme.vars.palette.grey[600],
}),
}),
},
};
var MuiSlider = {
styleOverrides: {
root: ({ ownerState, theme }) => ({
color: theme.vars.palette[ownerState.color || 'primary'].main,
'&.Mui-disabled': {
color: theme.vars.palette.grey[300],
...theme.applyStyles('dark', {
color: theme.vars.palette.grey[500],
}),
'& .MuiSlider-rail': {
opacity: 1,
backgroundColor: theme.vars.palette.grey[100],
...theme.applyStyles('dark', {
backgroundColor: theme.vars.palette.grey[700],
}),
},
'& .MuiSlider-valueLabel': {
backgroundColor: theme.vars.palette.grey[300],
color: `color-mix(in srgb, ${theme.vars.palette.text.disabled}, transparent 35%)`,
...theme.applyStyles('dark', {
backgroundColor: theme.vars.palette.grey[700],
}),
},
'& .MuiSlider-markLabel': {
...theme.applyStyles('dark', {
color: theme.vars.palette.text.disabled,
}),
},
},
'& .MuiSlider-rail': {
backgroundColor: theme.vars.palette[ownerState.color || 'primary'].main,
opacity: 0.38,
},
}),
valueLabel: ({ theme }) => ({
backgroundColor: theme.vars.palette.grey[500],
color: theme.vars.palette.common.white,
borderRadius: Number(theme.shape.borderRadius) * 2,
top: `-${theme.spacing(3)}`,
lineHeight: '24px',
fontWeight: 'bold',
...theme.applyStyles('dark', {
backgroundColor: theme.vars.palette.grey[700],
}),
}),
},
};
var MuiSwitch = {
styleOverrides: {
switchBase: ({ theme }) => ({
'&.Mui-disabled': {
color: theme.vars.palette.grey[50],
...theme.applyStyles('dark', {
color: theme.vars.palette.common.white,
}),
'&.Mui-checked': {
color: theme.vars.palette.grey[50],
...theme.applyStyles('dark', {
color: theme.vars.palette.common.white,
}),
},
'+ .MuiSwitch-track': {
backgroundColor: theme.vars.palette.action.disabledBackground,
opacity: 1,
},
},
}),
thumb: {
// Special
boxShadow: '0px 1px 1px rgba(0, 0, 0, 0.14), 0px 2px 1px rgba(0, 0, 0, 0.12), 0px 1px 3px rgba(0, 0, 0, 0.2)',
},
},
};
var MuiInputLabel = {
styleOverrides: {
root: ({ theme }) => ({
'&.Mui-error': {
color: theme.vars.palette.text.secondary,
'&.Mui-disabled': {
color: theme.vars.palette.text.disabled,
},
},
...theme.applyStyles('dark', {
'&.Mui-error': {
color: theme.vars.palette.error.main,
'&.Mui-disabled': {
color: theme.vars.palette.error.light,
},
},
}),
}),
shrink: ({ theme }) => ({
...theme.applyStyles('light', {
'&.Mui-error': {
color: theme.vars.palette.error.main,
'&.Mui-disabled': {
color: theme.vars.palette.error.light,
},
},
}),
}),
asterisk: ({ theme }) => ({
color: theme.vars.palette.error.main,
}),
},
};
const getBaseColorsLight = ({ color, theme }) => ({
baseColor: color && color !== 'standard' ? theme.vars.palette[color].main : theme.vars.palette.text.primary,
hoverColor: color && color !== 'standard'
? `color-mix(in srgb, ${theme.vars.palette[color]['300']}, transparent 96%)`
: `color-mix(in srgb, ${theme.vars.palette.text.primary}, transparent 96%)`,
checkedColor: color && color !== 'standard'
? `rgba(${theme.vars.palette[color].mainChannel} / 0.08)`
: theme.vars.palette.action.selected,
focusColor: color && color !== 'standard' ? theme.vars.palette[color].dark : theme.vars.palette.text.primary,
disabledColor: `color-mix(in srgb, ${theme.vars.palette.grey[200]}, transparent ${(1 - theme.palette.action.disabledOpacity) * 100}%)`,
});
const getBaseColorsDark = ({ color, theme }) => ({
baseColor: color && color !== 'standard' ? theme.vars.palette[color].main : theme.vars.palette.text.primary,
hoverColor: `rgba(${color && color !== 'standard' ? theme.vars.palette[color].mainChannel : theme.vars.palette.text.primaryChannel} / 0.12)`,
checkedColor: color && color !== 'standard'
? `rgba(${theme.vars.palette[color].mainChannel} / 0.3)`
: theme.vars.palette.action.selected,
focusColor: color && color !== 'standard' ? theme.vars.palette[color].dark : theme.vars.palette.text.primary,
disabledColor: theme.vars.palette.action.disabledBackground,
});
var MuiToggleButton = {
styleOverrides: {
root: ({ ownerState, theme }) => {
const darkBase = getBaseColorsDark({
color: ownerState.color,
theme,
});
const lightBase = getBaseColorsLight({
color: ownerState.color,
theme,
});
return {
borderColor: lightBase.baseColor,
'& .MuiSvgIcon-root': {
color: lightBase.baseColor,
},
'&:hover': {
backgroundColor: lightBase.hoverColor,
'&.Mui-selected': {
backgroundColor: lightBase.checkedColor,
},
},
'& .MuiTouchRipple-root': {
color: lightBase.focusColor,
},
'&.Mui-selected': {
backgroundColor: lightBase.checkedColor,
},
'&.Mui-disabled': {
'& .MuiSvgIcon-root': {
color: theme.vars.palette.action.disabled,
},
'&.Mui-selected': {
backgroundColor: lightBase.disabledColor,
},
},
...theme.applyStyles('dark', {
'&:not(.Mui-disabled)': {
borderColor: darkBase.baseColor,
},
'& .MuiSvgIcon-root': {
// color: 'inherit'
color: darkBase.baseColor,
},
'& .MuiTypography-root': {
color: theme.vars.palette.text.primary,
},
'&:hover': {
backgroundColor: darkBase.hoverColor,
'&.Mui-selected': {
backgroundColor: darkBase.checkedColor,
},
},
'& .MuiTouchRipple-root': {
color: darkBase.focusColor,
},
'&.Mui-selected': {
backgroundColor: darkBase.checkedColor,
},
'&.Mui-disabled': {
'& .MuiSvgIcon-root': {
color: theme.vars.palette.action.disabled,
},
'&.Mui-selected': {
backgroundColor: darkBase.disabledColor,
},
'& .MuiTypography-root': {
color: theme.vars.palette.text.disabled,
},
},
}),
};
},
},
};
var MuiAvatar = {
styleOverrides: {
root: ({ theme }) => ({
height: 32,
width: 32,
backgroundColor: theme.vars.palette.grey[400],
...theme.applyStyles('dark', {
backgroundColor: theme.vars.palette.grey[600],
}),
color: theme.vars.palette.common.white,
fontWeight: 700,
fontSize: 12,
lineHeight: '16px',
}),
},
};
var MuiAvatarGroup = {
styleOverrides: {
root: ({ theme }) => ({
avatar: {
width: 32,
height: 32,
border: `2px solid ${theme.vars.palette.background.default}`,
},
}),
},
};
var MuiBadge = {
styleOverrides: {
badge: ({ ownerState, theme }) => ({
fontWeight: 600,
color: ownerState.color !== 'primary' && theme.vars.palette.text.primary,
...theme.applyStyles('dark', {
color: ownerState.color !== 'default' ? theme.vars.palette.grey[900] : undefined,
}),
}),
},
};
var MuiChip = {
styleOverrides: {
outlined: ({ ownerState, theme }) => {
const hoverColor = ownerState.color && ownerState.color !== 'default'
? `rgba(${theme.vars.palette[ownerState.color].mainChannel} / 0.04)`
: alpha(theme.palette.grey[500], 0.04);
return {
'&.MuiChip-clickable:hover': {
backgroundColor: hoverColor,
},
};
},
filled: ({ ownerState, theme }) => ({
'&.MuiChip-clickable:hover': {
backgroundColor: ownerState.color && ownerState.color !== 'default'
? theme.vars.palette[ownerState.color][600]
: theme.vars.palette.grey[200],
},
...theme.applyStyles('dark', {
backgroundColor: ownerState.color === 'default' ? theme.vars.palette.grey[500] : undefined,
'&.MuiChip-clickable:hover': {
backgroundColor: ownerState.color && ownerState.color !== 'default'
? theme.vars.palette[ownerState.color].dark
: theme.vars.palette.grey[600],
},
}),
}),
label: {
fontSize: '0.875rem',
lineHeight: '1.5rem',
},
avatar: ({ ownerState, theme }) => ({
backgroundColor: ownerState.color && ownerState.color !== 'default'
? theme.vars.palette[ownerState.color][600]
: theme.vars.palette.grey[400],
color: ownerState.color === 'default' && theme.vars.palette.common.white,
...theme.applyStyles('dark', {
backgroundColor: ownerState.color && ownerState.color !== 'default'
? theme.vars.palette[ownerState.color][600]
: theme.vars.palette.grey[600],
color: theme.vars.palette.common.white,
}),
}),
deleteIcon: ({ ownerState, theme }) => ({
...theme.applyStyles('dark', {
...(ownerState.variant === 'filled' && {
color: `rgba(${theme.vars.palette.text.primaryChannel} / 0.7)`,
'&:hover': {
color: theme.vars.palette.text.primary,
},
}),
}),
}),
},
};
var MuiListItem = {
styleOverrides: {
root: ({ theme }) => ({
'&.Mui-selected': {
backgroundColor: `rgba(${theme.vars.palette.primary.mainChannel} / 0.08)`,
},
'& .MuiListItemButton-root:hover': {
backgroundColor: theme.vars.palette.action.hover,
},
'& .MuiListItemAvatar-root .MuiAvatar-root': {
height: 40,
width: 40,
},
}),
},
};
var MuiListItemButton = {
styleOverrides: {
root: ({ theme }) => ({
'&.Mui-selected': {
backgroundColor: `rgba(${theme.vars.palette.primary.mainChannel} / 0.08)`,
},
'& .MuiListItemButton-root:hover': {
backgroundColor: theme.vars.palette.action.hover,
},
'& .MuiListItemAvatar-root .MuiAvatar-root': {
height: 40,
width: 40,
},
}),
},
};
var MuiListSubheader = {
styleOverrides: {
root: {
backgroundColor: 'transparent',
},
},
};
var MuiTableCell = {
styleOverrides: {
root: ({ theme }) => ({
borderBottomColor: alpha(theme.palette.common.black, 0.08),
...theme.applyStyles('dark', {
borderBottomColor: alpha(theme.palette.common.white, 0.08),
}),
}),
},
};
var MuiTableHead = {
styleOverrides: {
root: {
'& .MuiTableCell-root': {
fontWeight: 700,
},
'& .MuiTableRow-root.MuiTableRow-hover:hover': {
backgroundColor: 'unset',
},
},
},
};
var MuiTablePagination = {
styleOverrides: {
root: {
fontSize: '0.75rem',
},
selectLabel: {
fontSize: '0.75rem',
lineHeight: '1rem',
},
displayedRows: {
fontSize: '0.75rem',
lineHeight: '1rem',
},
},
};
var MuiTableRow = {
defaultProps: {
hover: true,
},
styleOverrides: {
root: ({ theme }) => ({
...theme.applyStyles('dark', {
'&.MuiTableRow-hover:hover': {
backgroundColor: theme.vars.palette.action.hover,
'&.Mui-selected': {
backgroundColor: `rgba(${theme.vars.palette.primary.mainChannel} / 0.08)`,
},
},
}),
...theme.applyStyles('light', {
'&.MuiTableRow-hover:hover': {
backgroundColor: alpha(theme.palette.grey[600], 0.04),
},
'&.Mui-selected': {
backgroundColor: alpha(theme.palette.primary[300], 0.04),
},
}),
}),
},
};
var MuiTooltip = {
styleOverrides: {
tooltip: ({ theme }) => ({
// FIGMA calls for theme.vars.palette.action.active, which has an opacity — this does not play well when the tooltip
// appears above content (rather than empty space). I've approximated the shade of grey created by the opacity
// with a direct shade from the grey palette.
backgroundColor: theme.vars.palette.grey[500],
...theme.applyStyles('dark', {
backgroundColor: theme.vars.palette.grey[400],
}),
color: theme.vars.palette.common.white,
fontSize: '0.625rem',
lineHeight: '0.875rem',
fontWeight: 'regular',
}),
arrow: ({ theme }) => ({
color: theme.vars.palette.grey[500],
...theme.applyStyles('dark', {
color: theme.vars.palette.grey[400],
}),
}),
},
};
var MuiTypography = {
defaultProps: {
variant: 'body1',
variantMapping: {
h1: 'h1',
h2: 'h2',
h3: 'h3',
h4: 'h4',
h5: 'h5',
h6: 'h6',
subtitle1: 'h6',
subtitle2: 'h6',
inherit: 'p',
},
},
};
var MuiAlert = {
defaultProps: {
iconMapping: {
success: jsx(CheckCircleOutline, { fontSize: "inherit" }),
},
},
styleOverrides: {
root: {
fontWeight: 400,
padding: '8px 16px',
'& .MuiAlert-icon': { padding: '9px 0' },
'& .MuiAlertTitle-root': {
fontWeight: 700,
marginTop: 0,
marginBottom: '4px',
},
'& .MuiAlert-action': {
paddingTop: 0,
height: '40px',
alignItems: 'center',
},
},
filled: ({ theme, ownerState }) => ({
// Per FIGMA, the text on these is 'white'
// But 'white' on our status colors does not pass WCAG AA accessibility threshhold
// We can change our default contrast ratio (currently 3) to 4.5 to handle this
// automatically, but it will have additional consequences for status-able components
// like buttons.
color: theme.vars.palette.common.white,
...theme.applyStyles('dark', {
color: theme.vars.palette.grey[900],
backgroundColor: ownerState.color
? theme.vars.palette[ownerState.color].main
: ownerState.severity
? theme.vars.palette[ownerState.severity].main
: theme.vars.palette.info.main,
}),
}),
outlined: ({ ownerState, theme }) => ({
padding: '7px 16px',
color: `color-mix(in srgb, ${theme.vars.palette[ownerState.severity || 'info'].dark} 40%, black 60%)`,
...theme.applyStyles('dark', {
color: theme.vars.palette.text.primary,
borderColor: ownerState.color
? theme.vars.palette[ownerState.color].main
: ownerState.severity
? theme.vars.palette[ownerState.severity].main
: theme.vars.palette.info.main,
}),
}),
standard: ({ ownerState, theme }) => ({
padding: '7px 16px',
...theme.applyStyles('dark', {
color: theme.vars.palette.text.primary,
backgroundColor: `color-mix(in srgb, ${ownerState.color
? theme.vars.palette[ownerState.color].main
: ownerState.severity
? theme.vars.palette[ownerState.severity].main
: theme.vars.palette.info.main} 20%, black)`,
}),
}),
},
};
var MuiCircularProgress = {
defaultProps: {
thickness: 4,
},
styleOverrides: {},
};
var MuiDialog = {
styleOverrides: {
paper: ({ theme }) => ({
backgroundImage: 'unset',
...theme.applyStyles('dark', {
/* The Figma files have the dialogs using the same background as paper, but this causes an issue when a dialog appears
on top of an item (like a card) that uses a paper background. Leaving the background image intact gives it a slight
brightening which makes it stand out instead of blending into the background.
*/
borderWidth: 1,
borderStyle: 'solid',
borderColor: theme.vars.palette.background.default,
}),
}),
},
};
var MuiLinearProgress = {
styleOverrides: {
root: ({ ownerState, theme }) => ownerState.variant === 'buffer'
? {}
: {
backgroundColor: ownerState.color
? ownerState.color !== 'inherit'
? theme.vars.palette[ownerState.color][100]
: 'none'
: theme.vars.palette.primary[50],
...theme.applyStyles('dark', {
backgroundColor: ownerState.color
? ownerState.color !== 'inherit'
? ownerState.color !== 'primary'
? theme.vars.palette[ownerState.color][50]
: theme.vars.palette[ownerState.color][100]
: 'none'
: theme.vars.palette.primary[100],
}),
},
bar2Buffer: ({ ownerState, theme }) => ({
backgroundColor: ownerState.color
? ownerState.color !== 'inherit'
? theme.vars.palette[ownerState.color][100]
: 'none'
: theme.vars.palette.primary[50],
...theme.applyStyles('dark', {
backgroundColor: ownerState.color
? ownerState.color !== 'inherit'
? ownerState.color !== 'primary'
? theme.vars.palette[ownerState.color][50]
: theme.vars.palette[ownerState.color][100]
: theme.vars.palette.grey[500]
: theme.vars.palette.primary[100],
opacity: 1,
}),
}),
dashed: ({ ownerState, theme }) => {
const lightBase = ownerState.color
? ownerState.color !== 'inherit'
? `rgba(${theme.vars.palette[ownerState.color].mainChannel} / 0.6)`
: alpha(theme.palette.common.black, 0.6)
: `rgba(${theme.vars.palette.primary.mainChannel} / 0.6)`;
const darkBase = ownerState.color === 'inherit'
? alpha(theme.palette.common.white, 0.6)
: `color-mix(in srgb, ${ownerState.color ? theme.vars.palette[ownerState.color].main : theme.vars.palette.primary.main}, white 60%)`;
return {
backgroundImage: `radial-gradient(${lightBase} 0%, ${lightBase} 16%, transparent 42%);`,
...theme.applyStyles('dark', {
backgroundImage: `radial-gradient(${darkBase} 0%, ${darkBase} 16%, transparent 42%);`,
}),
};
},
},
};
var MuiSnackbarContent = {
styleOverrides: {
root: ({ theme }) => ({
backgroundColor: theme.vars.palette.primary.main,
flexGrow: 'initial',
'& .MuiSnackbarContent-action> .MuiButton-text': {
fontSize: 14,
color: 'inherit',
},
'& .MuiSnackbarContent-action> .MuiIconButton-root': {
color: 'inherit',
},
'& .MuiSvgIcon-root': {
width: 16,
height: 16,
},
}),
},
};
var MuiSnackbar = {
defaultProps: {
anchorOrigin: { vertical: 'bottom', horizontal: 'center' },
},
styleOverrides: {
root: ({ theme }) => ({
'& .MuiPaper-root': {
borderRadius: Number(theme.shape.borderRadius) * 2,
padding: theme.spacing(1, 4),
flexGrow: 'initial',
'& .MuiAlert-action> .MuiButton-text': {
fontSize: 14,
color: 'inherit',
},
'& .MuiAlert-action> .MuiIconButton-root': {
color: 'inherit',
},
'& .MuiSvgIcon-root': {
width: 16,
height: 16,
},
},
'& .MuiAlert-root': {
minWidth: 288,
width: 'fit-content',
[theme.breakpoints.down('sm')]: {
minWidth: 0,
},
},
'& .MuiAlert-outlinedError': {
backgroundColor: theme.vars.palette.background.paper,
color: theme.vars.palette.error.main,
border: '1px solid',
},
}),
},
};
var MuiAccordionDetails = {
styleOverrides: {
root: ({ theme }) => ({
paddingLeft: theme.spacing(4),
paddingRight: theme.spacing(4),
}),
},
};
var MuiAccordionSummary = {
styleOverrides: {
root: ({ theme }) => ({
paddingLeft: theme.spacing(4),
paddingRight: theme.spacing(4),
}),
},
};
var MuiAppBar = {
defaultProps: {
elevation: 0,
},
styleOverrides: {
root: ({ theme, ownerState }) => ({
...((ownerState.color === undefined || ownerState.color === 'inherit') && {
borderBottom: `1px solid ${theme.vars.palette.divider}`,
}),
borderRadius: 0,
}),
},
};
var MuiCard = {
styleOverrides: {
root: ({ theme }) => ({
borderRadius: Number(theme.shape.borderRadius) * 2,
backgroundImage: 'unset',
}),
},
};
var MuiToolbar = {
styleOverrides: {
gutters: ({ theme }) => ({
paddingLeft: '0.75rem',
paddingRight: '0.75rem',
[theme.breakpoints.up('sm')]: {
paddingLeft: '1.5rem',
paddingRight: '1.5rem',
},
}),
},
};
var MuiBottomNavigationAction = {
styleOverrides: {
root: ({ theme }) => ({
color: theme.vars.palette.grey[600],
'&.Mui-disabled': {
color: theme.vars.palette.action.disabled,
},
}),
label: {
fontSize: '0.75rem',
'&.Mui-selected': {
fontSize: '0.75rem',
},
},
},
};
var MuiBreadcrumbs = {
styleOverrides: {
root: ({ theme }) => ({
color: theme.vars.palette.text.secondary,
...theme.applyStyles('dark', {
color: theme.vars.palette.text.primary,
}),
'& .MuiLink-root:hover': {
color: theme.vars.palette.primary.main,
},
}),
li: ({ theme }) => ({
'&:last-of-type': {
color: theme.vars.palette.primary.main,
fontWeight: 700,
},
}),
separator: ({ theme }) => ({
color: theme.vars.palette.grey[300],
marginLeft: 10,
marginRight: 10,
}),
},
};
var MuiDrawer = {
styleOverrides: {
root: ({ theme }) => ({
'& .MuiPaper-root': {
borderRadius: 0,
},
...theme.applyStyles('light', {
/**
* This is a little bit of a hack:
* The MUI Drawer doesn't have a color prop or any other props that we can tap into to easily integrate
* this dark version of the Drawer from Figma. The MUI Drawer is basically just a wrapper that does
* the drawer behavior and all of the contents are just built using MUI ListItem elements. Rather than put
* all of this styling responsibility on the user to implement, I've defined the rules here and made them
* available to the user by adding the 'NexusDark' class onto their MUI Drawer
*
* <Drawer className={'NexusDark'}>{...contents}</Drawer>
*
* It's probably worthwhile at some point to make our own Drawer component to help alleviate some of the
* layout/style responsibilities currently facing the user.
**/
'&.NexusDark': {
'& .MuiPaper-root': {
background: `linear-gradient(0deg, ${theme.vars.palette.primary.dark} 0%, ${theme.vars.palette.primary.main} 100%)`,
color: theme.vars.palette.primary[50],
'& .MuiListItemButton-root': {
'&.Mui-selected': {
backgroundColor: alpha(theme.palette.common.white, 0.12),
},
'&:hover': {
backgroundColor: alpha(theme.palette.common.white, 0.08),
},
},
'& .MuiSvgIcon-root': { color: theme.vars.palette.primary[50] },
'& .MuiListSubheader-root': {
color: theme.vars.palette.primary[50],
},
'& .MuiDivider-root': {
borderColor: theme.vars.palette.primary[50],
},
},
},
}),
}),
},
};
var MuiLink = {
styleOverrides: {
root: {
cursor: 'pointer',
},
},
};
var MuiMenuItem = {
styleOverrides: {
root: ({ theme }) => ({
'&.Mui-selected': {
backgroundColor: `rgba(${theme.vars.palette.primary.mainChannel} / 0.04)`,
},
'&:hover': {
backgroundColor: alpha(theme.palette.primary[300], 0.04),
},
...theme.applyStyles('dark', {
'&.Mui-selected': {
backgroundColor: `rgba(${theme.vars.palette.primary.mainChannel} / 0.08)`,
},
'&:hover': {
backgroundColor: `rgba(${theme.vars.palette.primary.mainChannel} / 0.04)`,
},
}),
}),
},
};
var MuiMobileStepper = {
styleOverrides: {
root: {
backgroundColor: 'transparent',
},
},
};
var MuiPaginationItem = {
defaultProps: {
color: 'primary',
},
styleOverrides: {
root: ({ ownerState, theme }) => ({
color: theme.vars.palette.text.primary,
'&.Mui-selected': {
'&:not(.Mui-disabled)': {
...theme.applyStyles('dark', {
color: ownerState.color !== 'standard' ? theme.vars.palette.grey[900] : theme.vars.palette.text.primary,
}),
},
'&.Mui-disabled': {
backgroundColor: alpha(theme.palette.grey[600], 0.04),
...theme.applyStyles('dark', {
backgroundColor: theme.vars.palet