@mui/material/styles#darken TypeScript Examples

The following examples show how to use @mui/material/styles#darken. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: theme.ts    From frontend with MIT License 6 votes vote down vote up 
colors = {
  blue: {
    light: '#F3FDFF',
    main: '#32A9FE',
    mainDark: darken('#32A9FE', 0.2),
    dark: '#294E85',
  },
  yellow: {
    main: '#FFCB57',
    dark: '#F6992B',
  },
  gray: {
    main: '#F5F5F5',
    background: '#FAFAFA',
  },
  white: {
    main: '#ffffff',
  },
}
Example #2
Source File: SearchBar.tsx    From firecms with MIT License 5 votes vote down vote up 
useStyles = makeStyles((theme: Theme) =>
    createStyles({
        search: {
            position: "relative",
            display: "flex",
            alignItems: "center",
            height: 40,
            borderRadius: theme.shape.borderRadius,
            backgroundColor: theme.palette.mode === "light" ? alpha(theme.palette.common.black, 0.05) : darken(theme.palette.background.default, 0.2),
            "&:hover": {
                backgroundColor: theme.palette.mode === "light" ? alpha(theme.palette.common.black, 0.10) : darken(theme.palette.background.default, 0.3)
            },
            marginLeft: theme.spacing(1),
            [theme.breakpoints.up("sm")]: {
                marginLeft: theme.spacing(1),
                width: "auto"
            }
        },
        searchIcon: {
            padding: theme.spacing(0, 2),
            height: "100%",
            position: "absolute",
            pointerEvents: "none",
            display: "flex",
            alignItems: "center",
            justifyContent: "center"
        },
        inputRoot: {
            color: "inherit",
            minHeight: "inherit"
        },
        inputInput: {
            padding: theme.spacing(1, 1, 1, 0),
            // vertical padding + font size from searchIcon
            paddingLeft: `calc(1em + ${theme.spacing(4)})`,
            transition: theme.transitions.create("width"),
            width: "100%",
            [theme.breakpoints.up("sm")]: {
                width: "12ch"
            }
        },
        inputActive: {
            [theme.breakpoints.up("sm")]: {
                width: "20ch"
            }
        }
    })
)
Example #3
Source File: theme.ts    From frontend with MIT License 4 votes vote down vote up 
themeOptions: ThemeOptions = {
  palette: {
    mode: 'light',
    primary: {
      light: colors.blue.light,
      main: colors.blue.main,
      dark: colors.blue.dark,
    },
    secondary: {
      main: colors.yellow.main,
      light: colors.gray.main,
    },
    background: {
      default: colors.white.main,
    },
    info: {
      main: colors.blue.dark,
      light: colors.blue.mainDark,
      dark: darken(colors.blue.dark, 0.2),
    },
  },
  shape: {
    borderRadius: 3,
  },
  components: {
    MuiLink: {
      defaultProps: {
        underline: 'none',
      },
    },
    MuiButton: {
      defaultProps: {
        disableElevation: true,
      },
      styleOverrides: {
        root: {
          lineHeight: 2,
          borderRadius: '25px',
          borderWidth: 2,
          '&:hover': {
            borderWidth: 2,
          },
        },
        textPrimary: {
          color: colors.blue.dark,
          '&:hover': {
            color: colors.blue.mainDark,
          },
        },
        outlined: {
          backgroundColor: colors.white.main,
        },
        outlinedPrimary: {
          color: colors.blue.dark,
          '&:hover': {
            backgroundColor: lighten(colors.blue.main, 0.85),
          },
        },
        outlinedSecondary: {
          color: darken(colors.yellow.dark, 0.4),
          borderColor: colors.yellow.main,
          '&:hover': {
            backgroundColor: lighten(colors.yellow.main, 0.85),
            borderColor: darken(colors.yellow.main, 0.15),
          },
        },
        containedPrimary: {
          backgroundColor: colors.blue.main,
          '&:hover': {
            backgroundColor: darken(colors.blue.main, 0.15),
          },
        },
        containedSecondary: {
          backgroundColor: colors.yellow.main,
          '&:hover': {
            backgroundColor: darken(colors.yellow.main, 0.15),
          },
        },
      },
    },
    MuiButtonBase: {
      defaultProps: {
        disableRipple: true,
      },
    },
    MuiInputBase: {
      styleOverrides: {
        root: {
          fontSize: '1rem',
          borderRadius: borders.round,
        },
        multiline: {
          borderRadius: borders.semiRound,
        },
      },
    },
    MuiFilledInput: {
      styleOverrides: {
        root: {
          borderRadius: borders.round,
        },
        multiline: {
          borderRadius: borders.semiRound,
        },
      },
    },
    MuiOutlinedInput: {
      styleOverrides: {
        root: {
          borderRadius: borders.round,
        },
        multiline: {
          borderRadius: borders.semiRound,
        },
      },
    },
    MuiInputLabel: {
      styleOverrides: {
        root: {
          fontSize: '1rem',
        },
      },
    },
    MuiAppBar: {
      styleOverrides: {
        root: {
          paddingLeft: 15,
          paddingRight: 15,
        },
      },
    },

    MuiMenuItem: {
      defaultProps: {
        sx: { py: 1.5 },
      },
    },
  },

  typography: {
    h1: { fontFamily },
    h2: { fontFamily },
    h3: { fontFamily, color: colors.blue.dark },
    h4: { fontFamily },
    h5: { fontFamily },
    h6: { fontFamily },
    subtitle1: { fontFamily },
    subtitle2: { fontFamily },
    body1: {
      fontSize: '0.875rem',
      lineHeight: '1.43',
      letterSpacing: '0.01071em',
      fontFamily,
    },
    body2: { fontFamily },
    button: { fontFamily, textTransform: 'initial' },
  },
}