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

ThemeProvider = ({ children }: { children: ReactNode }) => {
  const currentThemeMap = useAppSelector(selectCurrentThemeMap) || blankTheme;
  const theme = currentThemeMap.primary
    ? createTheme({
        palette: {
          action: {
            active: currentThemeMap.onSurface,
            disabled: alpha(currentThemeMap.onSurface, 0.3),
            disabledBackground: alpha(currentThemeMap.onSurface, 0.12),
            hover: alpha(currentThemeMap.onSurface, 0.08),
            selected: alpha(currentThemeMap.onSurface, 0.16),
          },
          background: {
            default: currentThemeMap.background,
            paper: currentThemeMap.surface,
          },
          divider: alpha(currentThemeMap.onSurface, 0.12),
          error: {
            contrastText: currentThemeMap.onError,
            main: currentThemeMap.error,
          },
          primary: {
            contrastText: currentThemeMap.onPrimary,
            main: currentThemeMap.primary,
          },
          secondary: {
            contrastText: currentThemeMap.onSecondary,
            main: currentThemeMap.secondary,
          },
          text: {
            disabled: alpha(currentThemeMap.onSurface, 0.38),
            primary: alpha(currentThemeMap.onSurface, 0.87),
            secondary: alpha(currentThemeMap.onSurface, 0.6),
          },
          type: currentThemeMap.dark ? "dark" : "light",
        },
      })
    : createTheme();
  return <MuiThemeProvider theme={theme}>{children}</MuiThemeProvider>;
}

useStyles = makeStyles(
  theme => ({
    root: {
      background: theme.palette.background.paper,
    },
    header: {
      height: HEADER_SIZE,
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'flex-end',
    },
    log: {
      fontFamily: '"Monaco", monospace',
      fontSize: theme.typography.pxToRem(12),
    },
    line: {
      position: 'relative',
      whiteSpace: 'pre',

      '&:hover': {
        background: theme.palette.action.hover,
      },
    },
    lineSelected: {
      background: theme.palette.action.selected,

      '&:hover': {
        background: theme.palette.action.selected,
      },
    },
    lineCopyButton: {
      position: 'absolute',
      paddingTop: 0,
      paddingBottom: 0,
    },
    lineNumber: {
      display: 'inline-block',
      textAlign: 'end',
      width: 60,
      marginRight: theme.spacing(1),
      cursor: 'pointer',
    },
    textHighlight: {
      background: alpha(theme.palette.info.main, 0.15),
    },
    textSelectedHighlight: {
      background: alpha(theme.palette.info.main, 0.4),
    },
    modifierBold: {
      fontWeight: theme.typography.fontWeightBold,
    },
    modifierItalic: {
      fontStyle: 'italic',
    },
    modifierUnderline: {
      textDecoration: 'underline',
    },
    modifierForegroundBlack: {
      color: colors.common.black,
    },
    modifierForegroundRed: {
      color: colors.red[500],
    },
    modifierForegroundGreen: {
      color: colors.green[500],
    },
    modifierForegroundYellow: {
      color: colors.yellow[500],
    },
    modifierForegroundBlue: {
      color: colors.blue[500],
    },
    modifierForegroundMagenta: {
      color: colors.purple[500],
    },
    modifierForegroundCyan: {
      color: colors.cyan[500],
    },
    modifierForegroundWhite: {
      color: colors.common.white,
    },
    modifierForegroundGrey: {
      color: colors.grey[500],
    },
    modifierBackgroundBlack: {
      background: colors.common.black,
    },
    modifierBackgroundRed: {
      background: colors.red[500],
    },
    modifierBackgroundGreen: {
      background: colors.green[500],
    },
    modifierBackgroundYellow: {
      background: colors.yellow[500],
    },
    modifierBackgroundBlue: {
      background: colors.blue[500],
    },
    modifierBackgroundMagenta: {
      background: colors.purple[500],
    },
    modifierBackgroundCyan: {
      background: colors.cyan[500],
    },
    modifierBackgroundWhite: {
      background: colors.common.white,
    },
    modifierBackgroundGrey: {
      background: colors.grey[500],
    },
  }),
  { name: 'BackstageLogViewer' },
)

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