How to use the @material-ui/core/styles/colorManipulator.lighten function in @material-ui/core

import { darken, lighten } from "@material-ui/core/styles/colorManipulator";

// TODO: Don't use lighten / darken
const salmonColor = "#FA8072";
const salmon = {
  50: lighten(salmonColor, 0.25),
  100: lighten(salmonColor, 0.2),
  200: lighten(salmonColor, 0.15),
  300: lighten(salmonColor, 0.1),
  400: lighten(salmonColor, 0.05),
  500: salmonColor,
  600: darken(salmonColor, 0.05),
  700: darken(salmonColor, 0.1),
  800: darken(salmonColor, 0.15),
  900: darken(salmonColor, 0.2),
  A100: salmonColor,
  A200: salmonColor,
  A400: salmonColor,
  A700: salmonColor,
  contrastDefaultColor: "light",
};

import { darken, lighten } from "@material-ui/core/styles/colorManipulator";

const appleGreenColor = "#82C023";
const appleGreen = {
  50: lighten(appleGreenColor, 0.25),
  100: lighten(appleGreenColor, 0.2),
  200: lighten(appleGreenColor, 0.15),
  300: lighten(appleGreenColor, 0.1),
  400: lighten(appleGreenColor, 0.05),
  500: appleGreenColor,
  600: darken(appleGreenColor, 0.05),
  700: darken(appleGreenColor, 0.1),
  800: darken(appleGreenColor, 0.15),
  900: darken(appleGreenColor, 0.2),
  A100: appleGreenColor, // TODO
  A200: appleGreenColor, // TODO
  A400: appleGreenColor, // TODO
  A700: appleGreenColor, // TODO
  contrastDefaultColor: "light",
};

export default appleGreen;

import { darken, lighten } from "@material-ui/core/styles/colorManipulator";

const appleGreenColor = "#82C023";
const appleGreen = {
  50: lighten(appleGreenColor, 0.25),
  100: lighten(appleGreenColor, 0.2),
  200: lighten(appleGreenColor, 0.15),
  300: lighten(appleGreenColor, 0.1),
  400: lighten(appleGreenColor, 0.05),
  500: appleGreenColor,
  600: darken(appleGreenColor, 0.05),
  700: darken(appleGreenColor, 0.1),
  800: darken(appleGreenColor, 0.15),
  900: darken(appleGreenColor, 0.2),
  A100: appleGreenColor, // TODO
  A200: appleGreenColor, // TODO
  A400: appleGreenColor, // TODO
  A700: appleGreenColor, // TODO
  contrastDefaultColor: "light",
};

export default appleGreen;

},
  info: {
    contrastText: white,
    light: lighten('#88ffdd', 0.1),
    main: '#88ffdd',
    dark: darken('#88ffdd', 0.1)
  },
  warning: {
    contrastText: white,
    light: lighten('#ffae42', 0.1),
    main: '#ffae42',
    dark: darken('#ffae42', 0.1)
  },
  error: {
    contrastText: white,
    light: lighten('#d8000c', 0.1),
    main: '#d8000c',
    dark: darken('#d8000c', 0.1)
  },
  text: {
    primary: '#12161b',
    secondary: '#66788a',
    disabled: '#a6B1bb'
  },
  background: {
    default: white,
    dark: '#172b4d',
    paper: white
  },
  border: '#dfe3e8',
  divider: '#ccc'
};

const toolbarStyles = theme => ({
  root: {
    paddingRight: theme.spacing.unit,
  },
  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,
        },
  spacer: {
    flex: '1 1 100%',
  },
  actions: {
    color: theme.palette.text.secondary,
  },
  title: {
    flex: '0 0 auto',
  },
});

const toolbarStyles = theme => ({
    root: {
        paddingRight: theme.spacing.unit,
    },
    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,
            },
    spacer: {
        flex: '1 1 100%',
    },
    actions: {
        color: theme.palette.text.secondary,
    },
    title: {
        flex: '0 0 auto',
    },
    deleteProgress: {
        color: 'green',

...defaultFont,
    useNextVariants: true,
    h5: {
      fontWeight: 500,
      fontSize: 26,
      letterSpacing: 0.5
    }
  },
  palette: {
    primary: {
      light: '#63ccff',
      main: '#009be5',
      dark: '#006db3'
    },
    secondary: {
      light: lighten('#e51a90', 0.1),
      main: '#e51a90',
      dark: darken('#e51a90', 0.1)
    },
    error: {
      light: lighten('#D8000C', 0.1),
      main: '#D8000C',
      dark: darken('#D8000C', 0.1)
    },
    warning: {
      light: lighten('#ffae42', 0.1),
      main: '#ffae42',
      dark: darken('#ffae42', 0.1)
    },
    info: {
      light: lighten('#88ffdd', 0.1),
      main: '#88ffdd',

fontSize: 12,
    color: darken(grayColor, 0.5)
  },
  tab: {
    width: '100%',
    minHeight: 150
  },
  listItem: {
    margin: 0,
    padding: theme.spacing(1) / 2
  },
  loader: {
    paddingTop: theme.spacing(1)
  },
  updateIcon: {
    color: lighten(theme.palette.primary.main, 0.2),
    marginRight: theme.spacing(1) / 2
  },
  primaryColor: {
    color: theme.palette.primary.main
  },
  secondaryColor: {
    color: theme.palette.secondary.main
  },
  warningColor: {
    color: theme.palette.error.light
  },
  errorColor: {
    color: theme.palette.error.light
  }
});

const styles = theme => ({
  root: {
    width: '100%'
  },
  appBar: {
    zIndex: 0,
    padding: theme.spacing(2)
  },
  menuButton: {
    marginLeft: -theme.spacing(1)
  },
  link: {
    textDecoration: 'none',
    color: theme.palette.common.white,
    '&:hover': {
      color: lighten(grayColor, 0.7),
      cursor: 'pointer'
    }
  },
  button: {
    borderColor: lightColor
  },
  leftIcon: {
    marginRight: theme.spacing(1)
  },
  dialogTitle: {
    padding: theme.spacing(2)
  },
  settings: {
    margin: theme.spacing(2)
  },
  tabLabel: {

const styles = theme => ({
  divider: {
    margin: theme.spacing(1)
  },
  header: {
    ...defaultFont,
    backgroundColor: lighten(theme.palette.secondary.light, 0.9),
    fontSize: 20,
    fontWeight: 400,
    padding: theme.spacing(1)
  },
  paper: {
    width: '100%'
  },
  listItem: {
    padding: theme.spacing(1),
    margin: 0
  },
  wrapper: {
    width: '100%'
  },
  withPadding: {
    padding: theme.spacing(1)