@material-ui/core/styles#darken TypeScript Examples

useStyles = makeStyles((theme: Theme) =>
  createStyles({
    card: {
      padding: theme.spacing(2),
      position: "relative",
    },
    actionButtons: {
      position: "absolute",
      top: "0",
      right: "0",
    },
    section: {
      marginTop: theme.spacing(2),
    },
    dropArea: {
      textAlign: "center",
      padding: "24px",
      border: "4px dotted #c7c7c7",
      backgroundColor: darken(theme.palette.background.paper, 0.01),
      cursor: "pointer",
      "&:hover": {
        backgroundColor: darken(theme.palette.background.paper, 0.2),
      },
    },
    disabled: {
      cursor: "not-allowed",
    },
  })
)

useStyles = makeStyles((theme: Theme) =>
  createStyles({
    card: {
      padding: theme.spacing(2),
      position: "relative",
    },
    actionButtons: {
      position: "absolute",
      top: "0",
      right: "0",
    },
    section: {
      marginTop: theme.spacing(2),
    },
    dropArea: {
      textAlign: "center",
      padding: "24px",
      border: "4px dotted #c7c7c7",
      backgroundColor: darken(theme.palette.background.paper, 0.01),
      cursor: "pointer",
      "&:hover": {
        backgroundColor: darken(theme.palette.background.paper, 0.2),
      },
    },
    canvasWrapper: {
      marginTop: theme.spacing(2),
      // height: 0,
      // paddingTop: "56.25%" // 16:9
    },
    canvas: {
      maxWidth: "100%",
    },
    disabled: {
      cursor: "not-allowed",
    },
  })
)

useStyles = makeStyles(theme => ({
    root: {
        width: 600,
        margin: 'auto',
        borderStyle: 'solid',
        borderWidth: 1,
        borderColor:
            theme.palette.type === 'light'
                ? lighten(fade(theme.palette.divider, 1), 0.88)
                : darken(fade(theme.palette.divider, 1), 0.68),
    },
    spacer: { height: 20 },
    invoices: { margin: '10px 0' },
}))

getWarningTextColor = (
  severity: NonNullable<WarningProps['severity']>,
  theme: BackstageTheme,
) => {
  const getColor = theme.palette.type === 'light' ? darken : lighten;
  return getColor(theme.palette[severity].light, 0.6);
}

getWarningBackgroundColor = (
  severity: NonNullable<WarningProps['severity']>,
  theme: BackstageTheme,
) => {
  const getBackgroundColor = theme.palette.type === 'light' ? lighten : darken;
  return getBackgroundColor(theme.palette[severity].light, 0.9);
}

useStyles = makeStyles(theme => ({
    container: {
        display: 'flex',
        flexDirection: 'column',
        padding: '0 20px',
        width: 350,
        '& > p': {
            fontSize: 12,
            color: theme.palette.text.primary,
            textAlign: 'right',
        },
        // Temporary until darkmode is correctly implemented in ra-markdown
        '& .tui-editor-contents p': {
            color:
                theme.palette.type === 'light'
                    ? lighten(theme.palette.text.primary, 0.38)
                    : darken(theme.palette.text.primary, 0.38),
        },
    },
    info: {
        padding: theme.spacing(2, 3),
        '& h1': {
            fontSize: 18,
            color: theme.palette.text.primary,
            fontWeight: 'normal',
        },
        '& h2': {
            fontSize: 14,
            color:
                theme.palette.type === 'light'
                    ? lighten(theme.palette.text.primary, 0.38)
                    : darken(theme.palette.text.primary, 0.38),
            fontWeight: 'normal',
        },
        '& .MuiFormControl-root': {
            margin: 0,
            '& > div': {
                padding: 0,
            },
        },
    },
    details: {
        display: 'flex',
        flexDirection: 'column',
    },
    preview: {
        padding: theme.spacing(2),
    },
    frame: {
        position: 'relative',
        width: '100%',
        paddingBottom: '82.5%',
        background: theme.palette.common.black,
        boxShadow: '0 10px 7px -5px rgba(0, 0, 0, 0.3)',
    },
    mat: {
        position: 'absolute',
        background: theme.palette.background.paper,
        top: '3.0303%',
        bottom: '3.0303%',
        left: '2.5%',
        right: '2.5%',
        boxShadow: '0px 0px 20px 0px rgba(0,0,0,0.5) inset',
    },
    art: {
        position: 'absolute',
        top: '16.129%',
        bottom: '16.129%',
        left: '13.158%',
        right: '13.158%',
        '& img': {
            width: '100%',
        },
    },
}))

useStyles = makeStyles((theme: BackstageTheme) => ({
  root: {
    fontFamily: 'inherit',
    '& .bg-white': {
      background: 'none',
    },
    '& .text-4xl': {
      ...theme.typography.h3,
    },
    ' & h2': {
      ...theme.typography.h4,
    },
    '& .border': {
      borderColor: alpha(theme.palette.border, 0.1),
    },
    '& .min-w-min': {
      minWidth: 'fit-content',
    },
    '& .examples': {
      padding: '1rem',
    },
    '& .bg-teal-500': {
      backgroundColor: theme.palette.status.ok,
    },
    '& .bg-blue-500': {
      backgroundColor: theme.palette.info.main,
    },
    '& .bg-blue-400': {
      backgroundColor: theme.palette.info.light,
    },
    '& .bg-indigo-400': {
      backgroundColor: theme.palette.warning.main,
    },
    '& .text-teal-50': {
      color: theme.palette.status.ok,
    },
    '& .text-red-600': {
      color: theme.palette.error.main,
    },
    '& .text-orange-600': {
      color: theme.palette.warning.main,
    },
    '& .text-teal-500': {
      color: theme.palette.status.ok,
    },
    '& .text-blue-500': {
      color: theme.palette.info.main,
    },
    '& .-rotate-90': {
      '--tw-rotate': '0deg',
    },
    '& button': {
      ...theme.typography.button,
      borderRadius: theme.shape.borderRadius,
      color: theme.palette.primary.main,
    },
    '& a': {
      color: theme.palette.link,
    },
    '& a.no-underline': {
      ...theme.typography.button,
      background: 'none',
      boxSizing: 'border-box',
      minWidth: 64,
      borderRadius: theme.shape.borderRadius,
      transition: theme.transitions.create(
        ['background-color', 'box-shadow', 'border'],
        {
          duration: theme.transitions.duration.short,
        },
      ),
      padding: '5px 15px',
      color: theme.palette.primary.main,
      border: `1px solid ${alpha(theme.palette.primary.main, 0.5)}`,
      '&:hover': {
        textDecoration: 'none',
        border: `1px solid ${theme.palette.primary.main}`,
        backgroundColor: alpha(
          theme.palette.primary.main,
          theme.palette.action.hoverOpacity,
        ),
      },
    },
    '& li.no-underline': {
      '& a': {
        textDecoration: 'none',
        color: theme.palette.getContrastText(theme.palette.primary.main),
      },
    },
  },
  dark: {
    '& svg': {
      fill: theme.palette.text.primary,
    },
    '& .prose': {
      color: theme.palette.text.secondary,
      '& h3': {
        color: theme.palette.text.primary,
      },
    },
    '& .bg-gray-100, .bg-gray-200': {
      backgroundColor: theme.palette.background.default,
    },
    '& .text-gray-600': {
      color: theme.palette.grey['50'],
    },
    '& .text-gray-700': {
      color: theme.palette.grey['100'],
    },
    '& .panel--right': {
      background: darken(theme.palette.navigation.background, 0.1),
    },
    '& .examples': {
      backgroundColor: darken(theme.palette.navigation.background, 0.1),
      '& pre': {
        backgroundColor: darken(theme.palette.background.default, 0.2),
      },
    },
  },
}))

render() {
    const userName = DisplayUserName(this.props.user);
    const size = this.props.size || 25;
    var avatar;
    switch (this.props.user?.pic ? 'image' : this.props.type) {
      default:
      case 'beam':
        avatar = (
          <BoringAvatar
            name={userName.replace(/ /g, '')}
            variant='beam'
            size={size}
            colors={[
              darken(this.props.theme.palette.primary.main, 0.6),
              darken(this.props.theme.palette.primary.main, 0.3),
              this.props.theme.palette.primary.main,
              lighten(this.props.theme.palette.primary.main, 0.3),
              lighten(this.props.theme.palette.primary.main, 0.6),
            ]}
          />
        );
        break;
      case 'bauhaus':
        avatar = (
          <BoringAvatar
            name={userName.replace(/ /g, '')}
            variant='bauhaus'
            size={size}
            colors={[
              this.props.theme.palette.primary.dark,
              this.props.theme.palette.primary.light,
              lighten(this.props.theme.palette.primary.main, 0.6),
              lighten(this.props.theme.palette.primary.main, 0.8),
            ]}
          />
        );
        break;
      case 'image':
      case 'initials':
        var backgroundColor;
        if (!this.props.user?.pic) {
          backgroundColor = DeterministicColorFromUser(this.props.user);
          backgroundColor = !backgroundColor ? undefined
            : (this.props.theme.palette.type === 'dark'
              ? darken(backgroundColor, 0.5)
              : lighten(backgroundColor, 0.5));
        }
        avatar = (
          <MuiAvatar
            variant='circle'
            className={classNames(this.props.classes.muiAvatar)}
            style={{
              width: size,
              height: size,
              backgroundColor: backgroundColor,
            }}
            alt={userName}
            src={this.props.user?.pic}
          >{Initial(this.props.user)}</MuiAvatar>
        );
        break;
    }
    if (this.props.user?.isMod) {
      const modSize = size * 0.5;
      const starSize = size * 0.6;
      avatar = (
        <Badge
          classes={{
            root: this.props.classes.backgroundColor,
            badge: classNames(this.props.classes.badge, this.props.classes.backgroundColor),
          }}
          overlap='circle'
          anchorOrigin={{
            vertical: 'bottom',
            horizontal: 'right',
          }}
          badgeContent={(
            <MuiAvatar alt='Moderator' className={classNames(this.props.classes.backgroundColor)} style={{
              width: modSize,
              height: modSize,
              fontSize: starSize,
            }}>
              <StarIcon className={this.props.classes.modAvatar} fontSize='inherit' color='primary' />
            </MuiAvatar>
          )}
        >
          {avatar}
        </Badge>
      );
    }
    return avatar;
  }

useStyles = makeStyles((theme: Theme) => createStyles({
  pageContainer: {
    display: 'flex',
    '& h2': {
      margin: theme.spacing(12, 0, 2),
    },
    '& h3': {
      margin: theme.spacing(8, 0, 1),
    },
    '& h4': {
      margin: theme.spacing(4, 0, 0),
    },
    '& p': {
      marginTop: 7,
    },
  },
  appBarSpacer: theme.mixins.toolbar,
  heroBrandList: {
    display: 'flex',
    justifyContent: 'flex-end',
    flexWrap: 'wrap',
    margin: theme.spacing(2, 0),
  },
  heroBrandListBreak: {
    width: '100%',
  },
  heroBrandImg: {
    maxWidth: 14,
    width: 14,
    maxHeight: 14,
    margin: theme.spacing(1),
  },
  stickyOuterContainer: {
    marginTop: theme.spacing(20),
    minHeight: '100%',
  },
  stickyContainerLeft: {
    marginRight: theme.spacing(6),
  },
  stickyContainerRight: {
    marginLeft: theme.spacing(6),
  },
  stickyContainer: {
    position: 'sticky',
    top: 0,
    maxHeight: vh(100),
    display: 'flex',
    flexDirection: 'column',
  },
  stickyScroll: {
    display: 'flex',
    flexDirection: 'column',
    ...contentScrollApplyStyles({ theme, orientation: Orientation.Vertical }),
  },
  competitorSelectReset: {
    alignSelf: 'flex-end',
    margin: theme.spacing(3),
  },
  competitorSelectHeading: {
    margin: theme.spacing(2, 1, 2, 6),
  },
  competitorSelectRow: {
    display: 'flex',
    alignItems: 'center',
  },
  pageContent: {
    minWidth: 0,
    marginBottom: theme.spacing(6),
  },
  emphasize: {
    fontWeight: 'bolder',
  },
  tableHeading: {
    verticalAlign: 'bottom',
    textAlign: 'center',
    [theme.breakpoints.down(dontHoverBelow)]: {
      verticalAlign: 'baseline', // Align the filter icons
    },
  },
  tableDivider: {
    verticalAlign: 'bottom',
    padding: theme.spacing(0, 1),
    '& div': {
      height: theme.spacing(5),
      borderLeft: `1px solid ${
        // From TableCell.js root
        theme.palette.type === 'light'
          ? lighten(fade(theme.palette.divider, 1), 0.88)
          : darken(fade(theme.palette.divider, 1), 0.68)
        }`,
    }
  },
  tableGrouping: {
    textAlign: 'center',
    color: theme.palette.text.hint,
  },
  check: {
    margin: 'auto',
    display: 'block',
    color: theme.palette.primary.main,
  },
  table: {
    maxWidth: '100%',
    width: 'min-content',
    ...contentScrollApplyStyles({ theme, orientation: Orientation.Horizontal }),
  },
  hiddenPlatform: {
    filter: 'grayscale(100%)',
    opacity: 0.4,
  },
  sliderValueHorizontal: {
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'baseline',
  },
  sliderFloatingInfo: {
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'center',
    textAlign: 'center',
    position: 'relative',
    transition: theme.transitions.create(['bottom'], {
      duration: theme.transitions.duration.shortest,
      easing: theme.transitions.easing.easeOut,
    }),
    transform: 'translateY(50%)',
    flex: '1',
    overflow: 'visible',
  },
  sliderOuterContainer: {
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'center',
    height: 400,
    width: 250,
  },
  sliderDisclaimer: {
    marginTop: theme.spacing(1),
    display: 'flex',
    alignItems: 'baseline',
  },
  sliderContainer: {
    flex: '1',
    height: '100%',
    width: '100%',
    position: 'relative',
    display: 'flex',
    alignItems: 'flex-end',
    justifyContent: 'center',
    padding: theme.spacing(4, 0),
  },
  filterButtonAlert: {
    width: 'max-content',
  },
  tocHeading: {
    alignSelf: 'flex-end',
    margin: theme.spacing(2, 3, 2, 2),
  },
  tocIndicator: {
  },
  tocItem: {
    height: 'auto',
    minHeight: 40,
  },
  tocItemRead: {
    opacity: 0.4,
  },
  tocItemIcon: {
    margin: theme.spacing(0, 0, 0, 1),
  },
  tocItemWrapper: {
    alignItems: 'flex-end',
    flexDirection: 'row-reverse',
    justifyContent: 'flex-start',
  },
  brandListSelected: {
    '& $brandName': {
      fontWeight: 'bold',
    },
  },
  brandListSmall: {
    margin: theme.spacing(1, 0, 0),
    '& $brandCheckbox': {
      padding: theme.spacing(0.5),
      marginRight: theme.spacing(1),
    },
    '& $brandImg': {
      width: 11,
    },
    '& div': {
      fontSize: '0.8em',
    },
    '& svg': {
      fontSize: 16,
    },
  },
  brandListOther: {
    padding: theme.spacing(0.5, 0, 0, 6),
  },
  brandListContainer: {
    margin: theme.spacing(1, 0, 1, 2),
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'flex-start',
  },
  transparentTransition: {
    opacity: 1,
    transition: theme.transitions.create('opacity'),
  },
  transparent: {
    opacity: '0!important',
    transition: theme.transitions.create('opacity'),
  },
  brandContainer: {
    display: 'inline-flex',
    alignItems: 'center',
  },
  brandImg: {
    width: 14,
    marginRight: theme.spacing(1),
  },
  brandCheckbox: {
    [theme.breakpoints.down(dontHoverBelow)]: {
      opacity: 0.3,
    },
  },
  brandName: {
    // Used as a ref, don't delete
  },
  platformOther: {
    textAlign: 'center',
    minHeight: 38,
  },
  pricingContainer: {
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'space-evenly',
    flexWrap: 'wrap',
  },
  platformOpenButton: {
    fontSize: '0.9em',
    color: theme.palette.text.hint,
  },
  pricingCell: {
    border: 'none',
  },
  pricingPriceCell: {
    display: 'flex',
    justifyContent: 'flex-end',
  },
  priceContainer: {
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'baseline',
  },
  designContainer: {
    width: '100%',
    maxWidth: 570,
    margin: 'auto',
    display: 'flex',
    flexWrap: 'wrap',
    alignItems: 'flex-start',
    justifyContent: 'flex-end'
  },
  designBrandAndSwitcher: {
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'space-between',
  },
}))

theme: CustomTheme = {
  ...responsiveFontSizes(
    createMuiTheme({
      palette: {
        primary: {
          main: primary
        },
        secondary: {
          main: "#FF007B"
        },
        error: {
          main: red.A400
        },
        background: {
          default: "#fff"
        }
      },
      typography: {
        fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif',
        h1: {
          fontFamily: titleFontFamily
        },
        h2: {
          fontFamily: titleFontFamily
        },
        h3: {
          fontFamily: titleFontFamily,
          lineHeight: 1.1
        },
        h4: {
          fontFamily: titleFontFamily
        },
        h5: {
          fontFamily: titleFontFamily
        },
        h6: {
          fontFamily: titleFontFamily
        }
      },
      props: {
        MuiLink: {
          underline: "none"
        }
      },
      overrides: {
        MuiCssBaseline: {
          "@global": {
            html: {
              maxWidth: "100%"
            },
            body: {
              padding: "0 !important", // for storybook
              maxWidth: "100%"
            },
            blockquote: {
              margin: 0,
              padding: "0 1em",
              borderLeft: "0.25em solid #F8F8F8",
              color: "#9e9e9e"
            }
          }
        },
        MuiLink: {
          root: {
            "&:hover": {
              color: darken(primary, 0.3)
            }
          }
        }
      },
      breakpoints: {
        values: {
          xs: 0,
          sm: 900,
          md: 1060,
          lg: 1280,
          xl: 1920
        }
      }
    })
  ),
  custom: {
    layout: {
      centerColBasis: 750 + 4 * 8,
      centerColPadding: 4 * 8,
      rightColBasis: 180
    }
  }
}