@multei/themes/dist/index.esm.js

Themes for Multei!

import { colorBackgroundCode, colorBackgroundMark, colorFontMark, colorBackgroundDefault, colorBaseBlack, colorBaseWhite, colorBackgroundError, colorFontError, colorBackgroundInfo, colorFontInfo, colorBrandPrimary, colorFontPrimary, colorBrandSecondary, colorFontSecondary, colorBackgroundSuccess, colorFontSuccess, colorBackgroundWarning, colorFontWarning, fontFamilyBase, colorBackgroundPaperDark, colorBackgroundPaperLight } from '@multei/tokens';

const base = ({
  palette: {
    background: { paper },
    type,
  },
}) => ({
  overrides: {
    MuiCssBaseline: {
      "@global": {
        code: {
          backgroundColor: colorBackgroundCode,
        },
        mark: {
          backgroundColor: colorBackgroundMark,
          color: colorFontMark,
        },
      },
    },
  },
  palette: {
    background: {
      default: colorBackgroundDefault,
      paper,
    },
    common: {
      black: colorBaseBlack,
      white: colorBaseWhite,
    },
    error: {
      main: colorBackgroundError,
      contrastText: colorFontError,
    },
    info: {
      main: colorBackgroundInfo,
      contrastText: colorFontInfo,
    },
    primary: {
      main: colorBrandPrimary,
      contrastText: colorFontPrimary,
    },
    secondary: {
      main: colorBrandSecondary,
      contrastText: colorFontSecondary,
    },
    success: {
      main: colorBackgroundSuccess,
      contrastText: colorFontSuccess,
    },
    type,
    warning: {
      main: colorBackgroundWarning,
      contrastText: colorFontWarning,
    },
  },
  typography: {
    fontFamily: fontFamilyBase,
  },
});

const dark = base({
  palette: {
    background: {
      paper: colorBackgroundPaperDark,
    },
    type: "dark",
  },
});

const light = base({
  palette: {
    background: {
      paper: colorBackgroundPaperLight,
    },
    type: "light",
  },
});

var index = { dark, light };

export default index;