react-cm-ui/core/styles/createPalette.js

React UI for Healthy Church

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = createPalette;
exports.dark = exports.light = void 0;

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

var _colors = require("../colors");

function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }

function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

var light = {
  background: {
    "default": _colors.common.white,
    contrastPrimary: _colors.grey[600],
    light: _colors.grey[100],
    paper: _colors.common.white,
    primary: _colors.common.white,
    secondary: _colors.grey[200]
  },
  divider: _colors.grey[300],
  text: {
    active: _colors.cyan[500],
    contrastText: _colors.common.white,
    disable: _colors.grey[300],
    inverseDisable: _colors.grey[500],
    link: _colors.cyan[500],
    primary: _colors.grey[600],
    secondary: _colors.grey[400]
  },
  action: {
    disabled: _colors.grey[300],
    disabledBackground: _colors.grey[300]
  }
};
/**
 * TODO: One day being able to switch to a dark theme for user's eyes and batteries would be
 * an amazing nice to have. For now `dark` is the exact same palette as light.
 */

exports.light = light;
var dark = {
  text: {
    disable: light.text.disable,
    primary: _colors.common.white,
    secondary: light.text.secondary
  }
};
exports.dark = dark;

function hexToRGBA(hex, a) {
  var r = 0;
  var g = 0;
  var b = 0;

  if (hex.length === 4) {
    // 3 digits
    r = "0x".concat(hex[1] + hex[1]);
    g = "0x".concat(hex[2] + hex[2]);
    b = "0x".concat(hex[3] + hex[3]);
  } else if (hex.length === 7) {
    // 6 digits
    r = "0x".concat(hex[1] + hex[2]);
    g = "0x".concat(hex[3] + hex[4]);
    b = "0x".concat(hex[5] + hex[6]);
  }

  return "rgba(".concat(+r, ", ").concat(+g, ", ").concat(+b, ", ").concat(+a, ")");
}

function createPalette() {
  var palette = {
    active: {
      dark: _colors.cyan[600],
      main: _colors.cyan[500],
      primary: _colors.cyan[500] // Delete one day.

    },
    border: {
      contrastPrimary: _colors.common.white,
      primary: _colors.grey[300],
      secondary: _colors.grey[200]
    },
    contrastThreshold: 3,
    error: {
      main: _colors.red[500],
      dark: _colors.red[600]
    },
    primary: {
      contrastText: _colors.common.white,
      light: _colors.cyan[500],
      main: _colors.cyan[600] // Changed from grey[600]

    },
    secondary: {
      contrastText: _colors.common.white,
      light: _colors.grey[500],
      // Changed from blue[500]
      main: _colors.grey[600] // Changed from blue[500]

    },
    "static": {
      main: _colors.grey[300]
    },
    success: {
      main: _colors.green[500],
      dark: _colors.green[600]
    },
    warning: {
      main: _colors.orange[500],
      dark: _colors.orange[600]
    }
  };
  /**
   * Uses the same logic as
   * Bootstrap: https://github.com/twbs/bootstrap/blob/1d6e3710dd447de1a200f29e8fa521f8a0908f70/scss/_functions.scss#L59
   * and material-components-web https://github.com/material-components/material-components-web/blob/ac46b8863c4dab9fc22c4c662dc6bd1b65dd652f/packages/mdc-theme/_functions.scss#L54
   */

  var getContrastText = function getContrastText(background) {
    var contrastText = (0, _colorManipulator.getContrastRatio)(background, dark.text.primary) >= palette.contrastThreshold ? dark.text.primary : light.text.primary;

    if (process.env.NODE_ENV !== 'production') {
      var contrast = (0, _colorManipulator.getContrastRatio)(background, contrastText);

      if (contrast < 3) {
        // eslint-disable-next-line no-console
        console.error(["Material-UI: The contrast ratio of ".concat(contrast, ":1 for ").concat(contrastText, " on ").concat(background), 'falls below the WCAG recommended absolute minimum contrast ratio of 3:1.', 'https://www.w3.org/TR/2008/REC-WCAG20-20081211/#visual-audio-contrast-contrast'].join('\n'));
      }
    }

    return contrastText;
  };

  var type = 'light';
  var types = {
    dark: dark,
    light: light
  };
  return _objectSpread(_objectSpread(_objectSpread({
    common: _colors.common
  }, palette), types[type]), {}, {
    blue: _colors.blue,
    cyan: _colors.cyan,
    getContrastText: getContrastText,
    green: _colors.green,
    grey: _objectSpread(_objectSpread({
      50: _colors.grey[100]
    }, _colors.grey), {}, {
      700: _colors.grey[500],
      // DO NOT USE
      800: _colors.grey[500],
      // DO NOT USE
      900: _colors.grey[500] // DO NOT USE

    }),
    hexToRGBA: hexToRGBA,
    type: type,
    orange: _colors.orange,
    pink: _colors.pink,
    purple: _colors.purple,
    red: _colors.red,
    redOrange: _colors.redOrange,
    sky: _colors.sky,
    teal: _colors.teal
  });
}