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

useToolbarStyles = makeStyles((theme: Theme) =>
  createStyles({
    root: {
      paddingLeft: theme.spacing(8),
      paddingRight: theme.spacing(4),
    },
    highlight:
      theme.palette.type === "light"
        ? {
            color: theme.palette.secondary.main,
            backgroundColor: lighten(theme.palette.secondary.light, 0.85),
          }
        : {
            color: theme.palette.text.primary,
            backgroundColor: theme.palette.secondary.dark,
          },
    title: {
      flex: "1 1 100%",
    },
  })
)

useStyles = makeStyles((theme: BackstageTheme) => {
  const commonCardRating: CSSProperties = {
    height: theme.spacing(3),
    width: theme.spacing(3),
    color: theme.palette.common.white,
  };

  return {
    ratingDefault: {
      ...commonCardRating,
      background: theme.palette.status.aborted,
    },
    ratingA: {
      ...commonCardRating,
      background: theme.palette.status.ok,
    },
    ratingB: {
      ...commonCardRating,
      background: lighten(theme.palette.status.ok, 0.5),
    },
    ratingC: {
      ...commonCardRating,
      background: theme.palette.status.pending,
    },
    ratingD: {
      ...commonCardRating,
      background: theme.palette.status.warning,
    },
    ratingE: {
      ...commonCardRating,
      background: theme.palette.error.main,
    },
  };
})

renderVotingButtons() {
    const upvoted: boolean = this.props.vote === Client.VoteOption.Upvote;
    const downvoted: boolean = this.props.vote === Client.VoteOption.Downvote;

    const upvote = (
      <MyButton
        buttonVariant='post'
        Icon={UpvoteIcon}
        color={this.props.theme.palette.primary.main}
        colorHide={!upvoted}
        onClick={this.props.onUpvote}
      >
        {this.props.onDownvote === undefined ? this.props.voteValue || 0 : undefined}
      </MyButton>
    );

    if (this.props.onDownvote === undefined) {
      return upvote;
    }

    return (
      <>
        {upvote}
        <span className={this.props.classes.voteValueStandalone}>
          {this.props.voteValue || 0}
        </span>
        <MyButton
          buttonVariant='post'
          Icon={DownvoteIcon}
          color={this.props.theme.palette.type === 'dark'
            ? lighten(this.props.theme.palette.error.dark, 0.3)
            : darken(this.props.theme.palette.error.dark, 0.3)}
          colorHide={!downvoted}
          onClick={this.props.onDownvote}
        />
      </>
    );
  }

renderIWantThis() {
    const upvoted: boolean = this.props.vote === Client.VoteOption.Upvote;
    const downvoted: boolean = this.props.vote === Client.VoteOption.Downvote;

    const upvote = (
      <MyButton
        buttonVariant='post'
        color={this.props.theme.palette.primary.main}
        colorHide={!upvoted}
        Icon={upvoted ? PositiveSelectedIcon : PositiveIcon}
        onClick={this.props.onUpvote}
      >
        {this.props.t(this.props.iWantThis?.positiveLabel as any || 'want')}
      </MyButton>
    );

    if (this.props.onDownvote === undefined) {
      return upvote;
    }

    return (
      <>
        {upvote}
        <MyButton
          buttonVariant='post'
          color={this.props.theme.palette.type === 'dark'
            ? lighten(this.props.theme.palette.error.dark, 0.3)
            : darken(this.props.theme.palette.error.dark, 0.3)}
          colorHide={!downvoted}
          Icon={downvoted ? NegativeSelectedIcon : NegativeIcon}
          onClick={this.props.onDownvote}
        >
          {this.props.t(this.props.iWantThis?.negativeLabel as any || 'hate')}
        </MyButton>
      </>
    );
  }

buttonHover = (theme: Theme): Record<string, string | CSSProperties> => {
  return {
    transition: theme.transitions.create(['background-color']),
    backgroundSize: '30px 30px',
    backgroundPositionY: 'center',
    '&:hover': {
      background: `linear-gradient(to right, ${lighten(theme.palette.primary.main, 0.7)} 2px, transparent 2px) 0 0`,
      backgroundRepeat: 'no-repeat',
      backgroundSize: '30px 30px',
      backgroundPositionY: 'center',
    },
  };
}

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' },
}))

useCommandStatusStyles = makeStyles(theme => ({
    root: {
        maxWidth: 64,
        padding: theme.spacing(0.25, 1),
        borderRadius: theme.shape.borderRadius,
        textAlign: 'center',
    },
    ordered: {
        backgroundColor: lighten(blue[300], 0.3),
        color: theme.palette.getContrastText(lighten(blue[300], 0.3)),
    },
    delivered: {
        backgroundColor: lighten(theme.palette.success.main, 0.3),
        color: theme.palette.getContrastText(
            lighten(theme.palette.success.main, 0.3)
        ),
    },
    cancelled: {
        backgroundColor: lighten(theme.palette.error.main, 0.3),
        color: theme.palette.getContrastText(
            lighten(theme.palette.error.main, 0.3)
        ),
    },
    status: {
        color: 'inherit',
        textTransform: 'capitalize',
    },
}))

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: 'row',
    },
    formControl: {
        minWidth: 60,
    },
    toggleButton: {
        minWidth: 40,
    },
    dialogContent: {
        display: 'flex',
        flexDirection: 'column',
        justifyContent: 'stretch',
    },
    formatAndTitle: {
        display: 'flex',
        flexWrap: 'wrap',
        justifyContent: 'space-between',
    },
    rightBlock: {
        display: 'flex',
        flexDirection: 'column',
    },
    titleFormControl: {
        minWidth: 170,
        marginTop: 4,
        [belowDesktop(theme)]: {
            width: 114,
            minWidth: 0,
        },
    },
    spacer: {
        display: 'flex',
        flex: '1 1 auto',
    },
    showTracksOrderBtn: {
        marginLeft: theme.spacing(1),
    },
    tracksOrderAccordion: {
        '&:before': {
            opacity: 0,
        },
    },
    tracksOrderAccordionDetail: {
        maxHeight: '40vh',
        overflow: 'auto',
    },
    toolbarHighlight:
        theme.palette.type === 'light'
            ? {
                  color: theme.palette.secondary.main,
                  backgroundColor: lighten(theme.palette.secondary.light, 0.85),
              }
            : {
                  color: theme.palette.text.primary,
                  backgroundColor: theme.palette.secondary.dark,
              },
    trackList: {
        flex: '1 1 auto',
    },
    backdrop: {
        zIndex: theme.zIndex.drawer + 1,
        color: '#fff',
    },
}))

useStyles = makeStyles(theme => ({
    add: {
        position: 'absolute',
        bottom: theme.spacing(3),
        right: theme.spacing(3),
        [belowDesktop(theme)]: {
            bottom: theme.spacing(2),
        },
    },
    main: {
        overflowY: 'auto',
        flex: '1 1 auto',
        marginBottom: theme.spacing(3),
        outline: 'none',
        marginLeft: theme.spacing(-1),
        marginRight: theme.spacing(-1),
        [forAnyDesktop(theme)]: {
            marginLeft: theme.spacing(-2),
            marginRight: theme.spacing(-2),
        },
    },
    toolbar: {
        marginTop: theme.spacing(3),
        marginLeft: theme.spacing(-2),
        marginRight: theme.spacing(-2),
        [theme.breakpoints.up(600 + theme.spacing(2) * 2)]: {
            marginLeft: theme.spacing(-3),
            marginRight: theme.spacing(-3),
        },
    },
    toolbarLabel: {
        flex: '1 1 100%',
    },
    toolbarHighlight:
        theme.palette.type === 'light'
            ? {
                  color: theme.palette.secondary.main,
                  backgroundColor: lighten(theme.palette.secondary.light, 0.85),
              }
            : {
                  color: theme.palette.text.primary,
                  backgroundColor: theme.palette.secondary.dark,
              },
    headBox: {
        display: 'flex',
        justifyContent: 'space-between',
    },
    spacing: {
        marginTop: theme.spacing(1),
    },
    indexCell: {
        whiteSpace: 'nowrap',
        paddingRight: 0,
        width: theme.spacing(4),
    },
    backdrop: {
        zIndex: theme.zIndex.drawer + 1,
        color: '#fff',
    },
    remainingTimeTooltip: {
        textDecoration: 'underline',
        textDecorationStyle: 'dotted',
    },
    hoveringOverGroup: {
        backgroundColor: `${alpha(theme.palette.secondary.dark, 0.4)}`,
    },
    dragHandleEmpty: {
        width: 20,
        padding: `${theme.spacing(0.5)}px 0 0 0`,
    },
}))

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%',
        },
    },
}))

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',
  },
}))