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

To help you get started, we’ve selected a few @material-ui/core examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github sensu / sensu-go / dashboard / src / lib / colors / slateBlue.js View on Github external
import { darken, lighten } from "@material-ui/core/styles/colorManipulator";

// TODO: Don't use lighten / darken
const slateBlueColor = "#717CE5";
const slateBlue = {
  50: lighten(slateBlueColor, 0.125),
  100: lighten(slateBlueColor, 0.1),
  200: lighten(slateBlueColor, 0.075),
  300: lighten(slateBlueColor, 0.05),
  400: lighten(slateBlueColor, 0.025),
  500: slateBlueColor,
  600: darken(slateBlueColor, 0.025),
  700: darken(slateBlueColor, 0.05),
  800: darken(slateBlueColor, 0.075),
  900: darken(slateBlueColor, 0.1),
  A100: slateBlueColor,
  A200: slateBlueColor,
  A400: slateBlueColor,
  A700: slateBlueColor,
  contrastDefaultColor: "light",
};

export default slateBlue;
github mui-org / material-ui / docs / src / pages / guides / interoperability / EmotionTheme.js View on Github external
    background-color: ${props => darken(props.theme.palette.primary.main, 0.2)};
    border-color: ${props => darken(props.theme.palette.primary.main, 0.3)};
github alltogethernow / web / src / components / ChannelMenu / style.js View on Github external
export default theme => {
  const dark = theme.palette.type === 'dark'
  const highlight = theme.palette.primary.main
  const background = darken(theme.palette.background.default, dark ? 0.5 : 0.1)

  return {
    drawer: {
      width: theme.together.drawerWidth,
      flexShrink: 0,
    },
    drawerPaper: {
      width: theme.together.drawerWidth,
    },
    shortcuts: {
      display: 'flex',
      flexDirection: 'column',
      flexGrow: 1,
      outline: 'none',
      '&:focus, &.is-focused': {
        boxShadow: `0 0 4px inset ${highlight}`,
github rvpanoz / luna / app / styles / theme.js View on Github external
},
  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',
      dark: darken('#88ffdd', 0.1)
    },
    success: {
      light: lighten('#4caf50', 0.1),
      main: '#4caf50',
      dark: darken('#4caf50', 0.1)
    }
github ioBroker / ioBroker.material / src / src / Dialogs / SmartDialogSlider.js View on Github external
getSliderColor() {
        if (this.props.type === SmartDialogSlider.types.blinds) {
            return undefined;
        } else if (this.props.type === SmartDialogSlider.types.dimmer) {
            const val = this.state.value;
            return darken(Theme.palette.lampOn, 1 - (val / 70 + 0.3));
        } else {
            return Theme.slider.background;
        }
    }
github mirumee / saleor-dashboard / src / theme.ts View on Github external
backgroundColor: fade(colors.primary, 0.12)
          },
          "&:active": {
            boxShadow: null
          },
          "&:hover": {
            boxShadow: null
          },
          boxShadow: null
        },
        containedPrimary: {
          "&:active": {
            backgroundColor: darken(colors.primary, 0.4)
          },
          "&:hover": {
            backgroundColor: darken(colors.primary, 0.1)
          }
        },
        label: {
          color: colors.font.button,
          fontWeight: 600
        },
        root: {
          "& svg": {
            marginLeft: 8
          },
          borderRadius: 4
        },
        text: {
          "& span": {
            color: colors.font.default
          }
github rvpanoz / luna / app / components / views / package / styles / packageInfo.js View on Github external
...defaultFont,
    fontSize: 20,
    color: grayColor
  },
  labelMini: {
    ...defaultFont,
    fontSize: 16,
    color: grayColor
  },
  link: {
    ...defaultFont,
    fontSize: 16,
    color: grayColor,
    textDecoration: 'none',
    '&:hover': {
      color: darken(grayColor, 0.4)
    }
  }
});
github itzg / react-mui-login-register / src / components / ProviderButtons.js View on Github external
const styles = theme => ({
    leftIcon: {
      marginRight: theme.spacing.unit
    },
    root: {
      backgroundColor: baseColor,
      '&:hover': {
        backgroundColor: darken(baseColor, 0.2),
      }
    }
  });
github rvpanoz / luna / app / containers / styles / doctor.js View on Github external
...flexContainer,
    paddingTop: theme.spacing(2),
    flexDirection: 'column',
    alignItems: 'center'
  },
  textHolder: {
    ...defaultFont,
    paddingBottom: theme.spacing(1),
    color: grayColor
  },
  table: {
    width: '100%'
  },
  tableHead: {
    ...defaultFont,
    color: darken(grayColor, 0.25),
    fontSize: 20
  },
  avatar: {
    backgroundColor: theme.palette.common.white
  },
  helperText: {
    ...defaultFont,
    color: lighten(grayColor, 0.1),
    fontSize: 16
  },
  noData: {
    ...defaultFont
  },
  withPadding: {
    padding: theme.spacing(1) + 4
  },