"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

var _react = _interopRequireDefault(require("react"));

var _core = require("@material-ui/core");

var _Typography = require("./Typography");

var _styles = require("@material-ui/core/styles");

var useStyles = (0, _styles.makeStyles)(function (theme) {
  return {
    root: {
      flexGrow: 1
    },
    paper: {
      width: '200px',
      padding: theme.spacing(3),
      margin: theme.spacing(2),
      textAlign: 'center',
      whiteSpace: 'nowrap',
      overflow: 'hidden'
    },
    label: {
      paddingTop: theme.spacing(3),
      paddingBottom: theme.spacing(1)
    }
  };
});

var getColorStyle = function getColorStyle(clr, theme) {
  return {
    background: clr,
    color: theme.palette.getContrastText(clr)
  };
};

var Colors = function Colors(props) {
  var classes = useStyles();
  var theme = (0, _styles.useTheme)();
  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Typography.Typography, {
    variant: "h4",
    className: classes.label
  }, "Main Colors"), /*#__PURE__*/_react.default.createElement(_core.Grid, {
    className: classes.root,
    container: true,
    spacing: 3
  }, /*#__PURE__*/_react.default.createElement(_core.Paper, {
    className: classes.paper,
    style: getColorStyle(theme.palette.primary.main, theme)
  }, "Primary: ", theme.palette.primary.main, /*#__PURE__*/_react.default.createElement("br", null), "theme.palette.primary.main"), /*#__PURE__*/_react.default.createElement(_core.Paper, {
    className: classes.paper,
    style: getColorStyle(theme.palette.secondary.main, theme)
  }, "Secondary: ", theme.palette.secondary.main, /*#__PURE__*/_react.default.createElement("br", null), "theme.palette.secondary.main"), /*#__PURE__*/_react.default.createElement(_core.Paper, {
    className: classes.paper,
    style: getColorStyle(theme.palette.success.main, theme)
  }, "Success: ", theme.palette.success.main, /*#__PURE__*/_react.default.createElement("br", null), "theme.palette.success.main"), /*#__PURE__*/_react.default.createElement(_core.Paper, {
    className: classes.paper,
    style: getColorStyle(theme.palette.successLight.main, theme)
  }, "Success Light: ", theme.palette.successLight.main, /*#__PURE__*/_react.default.createElement("br", null), "theme.palette.successLight.main"), /*#__PURE__*/_react.default.createElement(_core.Paper, {
    className: classes.paper,
    style: getColorStyle(theme.palette.error.main, theme)
  }, "Error: ", theme.palette.error.main, /*#__PURE__*/_react.default.createElement("br", null), "theme.palette.error.main"), /*#__PURE__*/_react.default.createElement(_core.Paper, {
    className: classes.paper,
    style: getColorStyle(theme.palette.errorLight.main, theme)
  }, "Error Light: ", theme.palette.errorLight.main, /*#__PURE__*/_react.default.createElement("br", null), "theme.palette.errorLight.main"), /*#__PURE__*/_react.default.createElement(_core.Paper, {
    className: classes.paper,
    style: getColorStyle(theme.palette.warning.main, theme)
  }, "Warning: ", theme.palette.warning.main, /*#__PURE__*/_react.default.createElement("br", null), "theme.palette.warning.main"), /*#__PURE__*/_react.default.createElement(_core.Paper, {
    className: classes.paper,
    style: getColorStyle(theme.palette.info.main, theme)
  }, "Info: ", theme.palette.info.main, /*#__PURE__*/_react.default.createElement("br", null), "theme.palette.info.main")), /*#__PURE__*/_react.default.createElement(_Typography.Typography, {
    variant: "h4",
    className: classes.label
  }, "Layout"), /*#__PURE__*/_react.default.createElement(_core.Grid, {
    className: classes.root,
    container: true,
    spacing: 3
  }, /*#__PURE__*/_react.default.createElement(_core.Paper, {
    className: classes.paper,
    style: getColorStyle(theme.palette.background.default, theme)
  }, "Background: ", theme.palette.background.default, /*#__PURE__*/_react.default.createElement("br", null), "theme.palette.background.default"), /*#__PURE__*/_react.default.createElement(_core.Paper, {
    className: classes.paper,
    style: getColorStyle(theme.palette.background.paper, theme)
  }, "Background Paper: ", theme.palette.background.paper, /*#__PURE__*/_react.default.createElement("br", null), "theme.palette.background.paper")), /*#__PURE__*/_react.default.createElement(_Typography.Typography, {
    variant: "h4",
    className: classes.label
  }, "Text"), /*#__PURE__*/_react.default.createElement(_core.Grid, {
    className: classes.root,
    container: true,
    spacing: 3
  }, /*#__PURE__*/_react.default.createElement(_core.Paper, {
    className: classes.paper,
    style: {
      background: theme.palette.common.white,
      color: theme.palette.text.primary
    }
  }, "Primary: ", theme.palette.text.primary, /*#__PURE__*/_react.default.createElement("br", null), "theme.palette.text.primary"), /*#__PURE__*/_react.default.createElement(_core.Paper, {
    className: classes.paper,
    style: {
      background: theme.palette.common.white,
      color: theme.palette.text.secondary
    }
  }, "Secondary: ", theme.palette.text.secondary, /*#__PURE__*/_react.default.createElement("br", null), "theme.palette.text.secondary"), /*#__PURE__*/_react.default.createElement(_core.Paper, {
    className: classes.paper,
    style: {
      background: theme.palette.common.white,
      color: theme.palette.text.disabled
    }
  }, "Disabled: ", theme.palette.text.disabled, /*#__PURE__*/_react.default.createElement("br", null), "theme.palette.text.disabled"), /*#__PURE__*/_react.default.createElement(_core.Paper, {
    className: classes.paper,
    style: {
      background: theme.palette.common.white,
      color: theme.palette.text.hint
    }
  }, "Hint: ", theme.palette.text.hint, /*#__PURE__*/_react.default.createElement("br", null), "theme.palette.text.hint")), /*#__PURE__*/_react.default.createElement(_Typography.Typography, {
    variant: "h4",
    className: classes.label
  }, "Common"), /*#__PURE__*/_react.default.createElement(_core.Grid, {
    className: classes.root,
    container: true,
    spacing: 3
  }, /*#__PURE__*/_react.default.createElement(_core.Paper, {
    className: classes.paper,
    style: getColorStyle(theme.palette.common.black, theme)
  }, "Black: ", theme.palette.common.black, /*#__PURE__*/_react.default.createElement("br", null), "theme.palette.common.black"), /*#__PURE__*/_react.default.createElement(_core.Paper, {
    className: classes.paper,
    style: getColorStyle(theme.palette.common.white, theme)
  }, "White: ", theme.palette.common.white, /*#__PURE__*/_react.default.createElement("br", null), "theme.palette.common.white")), /*#__PURE__*/_react.default.createElement(_Typography.Typography, {
    variant: "h4",
    className: classes.label
  }, "Alternative"), /*#__PURE__*/_react.default.createElement(_Typography.Typography, {
    variant: "body1",
    className: classes.label
  }, "These don't have contrastText and they will be a problem while theming. Don't use them unless absolutely necessary!"), /*#__PURE__*/_react.default.createElement(_core.Grid, {
    className: classes.root,
    container: true,
    spacing: 3
  }, /*#__PURE__*/_react.default.createElement(_core.Paper, {
    className: classes.paper,
    style: getColorStyle(theme.palette.alternative.blue, theme)
  }, "Blue: ", theme.palette.alternative.blue, /*#__PURE__*/_react.default.createElement("br", null), "theme.palette.alternative.blue"), /*#__PURE__*/_react.default.createElement(_core.Paper, {
    className: classes.paper,
    style: getColorStyle(theme.palette.alternative.blueLight, theme)
  }, "Blue Light: ", theme.palette.alternative.blueLight, /*#__PURE__*/_react.default.createElement("br", null), "theme.palette.alternative.blueLight"), /*#__PURE__*/_react.default.createElement(_core.Paper, {
    className: classes.paper,
    style: getColorStyle(theme.palette.alternative.green, theme)
  }, "Green: ", theme.palette.alternative.green, /*#__PURE__*/_react.default.createElement("br", null), "theme.palette.alternative.green"), /*#__PURE__*/_react.default.createElement(_core.Paper, {
    className: classes.paper,
    style: getColorStyle(theme.palette.alternative.greenLight, theme)
  }, "Green Light: ", theme.palette.alternative.greenLight, /*#__PURE__*/_react.default.createElement("br", null), "theme.palette.alternative.greenLight"), /*#__PURE__*/_react.default.createElement(_core.Paper, {
    className: classes.paper,
    style: getColorStyle(theme.palette.alternative.purple, theme)
  }, "Purple: ", theme.palette.alternative.purple, /*#__PURE__*/_react.default.createElement("br", null), "theme.palette.alternative.purple"), /*#__PURE__*/_react.default.createElement(_core.Paper, {
    className: classes.paper,
    style: getColorStyle(theme.palette.alternative.purpleLight, theme)
  }, "Purple Light: ", theme.palette.alternative.purpleLight, /*#__PURE__*/_react.default.createElement("br", null), "theme.palette.alternative.purpleLight"), /*#__PURE__*/_react.default.createElement(_core.Paper, {
    className: classes.paper,
    style: getColorStyle(theme.palette.alternative.red, theme)
  }, "Red: ", theme.palette.alternative.red, /*#__PURE__*/_react.default.createElement("br", null), "theme.palette.alternative.red"), /*#__PURE__*/_react.default.createElement(_core.Paper, {
    className: classes.paper,
    style: getColorStyle(theme.palette.alternative.redLight, theme)
  }, "Red Light: ", theme.palette.alternative.redLight, /*#__PURE__*/_react.default.createElement("br", null), "theme.palette.alternative.redLight"), /*#__PURE__*/_react.default.createElement(_core.Paper, {
    className: classes.paper,
    style: getColorStyle(theme.palette.alternative.yellow, theme)
  }, "Yellow: ", theme.palette.alternative.yellow, /*#__PURE__*/_react.default.createElement("br", null), "theme.palette.alternative.yellow"), /*#__PURE__*/_react.default.createElement(_core.Paper, {
    className: classes.paper,
    style: getColorStyle(theme.palette.alternative.yellowLight, theme)
  }, "Yellow Light: ", theme.palette.alternative.yellowLight, /*#__PURE__*/_react.default.createElement("br", null), "theme.palette.alternative.yellowLight"), /*#__PURE__*/_react.default.createElement(_core.Paper, {
    className: classes.paper,
    style: getColorStyle(theme.palette.alternative.grey, theme)
  }, "Grey: ", theme.palette.alternative.grey, /*#__PURE__*/_react.default.createElement("br", null), "theme.palette.alternative.grey"), /*#__PURE__*/_react.default.createElement(_core.Paper, {
    className: classes.paper,
    style: getColorStyle(theme.palette.alternative.greyLight, theme)
  }, "Grey Light: ", theme.palette.alternative.greyLight, /*#__PURE__*/_react.default.createElement("br", null), "theme.palette.alternative.greyLight")));
};

var _default = Colors;
exports.default = _default;