@hipay/hipay-material-ui 1.0.0-beta.8 → 2.0.0-beta.35

package/styles/createMuiTheme.js

@@ -1,91 +1,77 @@
-'use strict';
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.default = void 0;
 
-var _extends2 = require('babel-runtime/helpers/extends');
-
-var _extends3 = _interopRequireDefault(_extends2);
-
-var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties');
-
-var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2);
-
-var _deepmerge = require('deepmerge');
-
-var _deepmerge2 = _interopRequireDefault(_deepmerge);
-
-var _warning = require('warning');
-
-var _warning2 = _interopRequireDefault(_warning);
-
-var _createTypography = require('./createTypography');
-
-var _createTypography2 = _interopRequireDefault(_createTypography);
-
-var _createBreakpoints = require('./createBreakpoints');
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
-var _createBreakpoints2 = _interopRequireDefault(_createBreakpoints);
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 
-var _createPalette = require('./createPalette');
+var _deepmerge = _interopRequireDefault(require("deepmerge"));
 
-var _createPalette2 = _interopRequireDefault(_createPalette);
+var _isPlainObject = _interopRequireDefault(require("is-plain-object"));
 
-var _createMixins = require('./createMixins');
+var _warning = _interopRequireDefault(require("warning"));
 
-var _createMixins2 = _interopRequireDefault(_createMixins);
+var _createBreakpoints = _interopRequireDefault(require("./createBreakpoints"));
 
-var _shadows = require('./shadows');
+var _createMixins = _interopRequireDefault(require("./createMixins"));
 
-var _shadows2 = _interopRequireDefault(_shadows);
+var _createPalette = _interopRequireDefault(require("./createPalette"));
 
-var _transitions = require('./transitions');
+var _createTypography = _interopRequireDefault(require("./createTypography"));
 
-var _transitions2 = _interopRequireDefault(_transitions);
+var _shadows = _interopRequireDefault(require("./shadows"));
 
-var _zIndex = require('./zIndex');
+var _shape = _interopRequireDefault(require("./shape"));
 
-var _zIndex2 = _interopRequireDefault(_zIndex);
+var _spacing = _interopRequireDefault(require("./spacing"));
 
-var _spacing = require('./spacing');
+var _transitions = _interopRequireDefault(require("./transitions"));
 
-var _spacing2 = _interopRequireDefault(_spacing);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var _zIndex = _interopRequireDefault(require("./zIndex"));
 
+// < 1kb payload overhead when lodash/merge is > 3kb.
 function createMuiTheme() {
   var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  var _options$palette = options.palette,
-      paletteInput = _options$palette === undefined ? {} : _options$palette,
-      _options$breakpoints = options.breakpoints,
-      breakpointsInput = _options$breakpoints === undefined ? {} : _options$breakpoints,
+  var _options$breakpoints = options.breakpoints,
+      breakpointsInput = _options$breakpoints === void 0 ? {} : _options$breakpoints,
       _options$mixins = options.mixins,
-      mixinsInput = _options$mixins === undefined ? {} : _options$mixins,
-      _options$typography = options.typography,
-      typographyInput = _options$typography === undefined ? {} : _options$typography,
+      mixinsInput = _options$mixins === void 0 ? {} : _options$mixins,
+      _options$palette = options.palette,
+      paletteInput = _options$palette === void 0 ? {} : _options$palette,
       shadowsInput = options.shadows,
-      other = (0, _objectWithoutProperties3.default)(options, ['palette', 'breakpoints', 'mixins', 'typography', 'shadows']);
-
-
-  var palette = (0, _createPalette2.default)(paletteInput);
-  var breakpoints = (0, _createBreakpoints2.default)(breakpointsInput);
-
-  var muiTheme = (0, _extends3.default)({
+      _options$typography = options.typography,
+      typographyInput = _options$typography === void 0 ? {} : _options$typography,
+      other = (0, _objectWithoutProperties2.default)(options, ["breakpoints", "mixins", "palette", "shadows", "typography"]);
+  var palette = (0, _createPalette.default)(paletteInput);
+  var breakpoints = (0, _createBreakpoints.default)(breakpointsInput);
+  var muiTheme = (0, _extends2.default)({
+    breakpoints: breakpoints,
     direction: 'ltr',
+    mixins: (0, _createMixins.default)(breakpoints, _spacing.default, mixinsInput),
+    overrides: {},
+    // Inject custom styles
     palette: palette,
-    typography: (0, _createTypography2.default)(palette, typographyInput),
-    mixins: (0, _createMixins2.default)(breakpoints, _spacing2.default, mixinsInput),
-    breakpoints: breakpoints,
-    shadows: shadowsInput || _shadows2.default
-  }, (0, _deepmerge2.default)({
-    transitions: _transitions2.default,
-    spacing: _spacing2.default,
-    zIndex: _zIndex2.default
-  }, other));
-
-  process.env.NODE_ENV !== "production" ? (0, _warning2.default)(muiTheme.shadows.length === 25, 'Material-UI: the shadows array provided to createMuiTheme should support 25 elevations.') : void 0;
-
+    props: {},
+    // Inject custom properties
+    shadows: shadowsInput || _shadows.default,
+    typography: (0, _createTypography.default)(palette, typographyInput)
+  }, (0, _deepmerge.default)({
+    shape: _shape.default,
+    spacing: _spacing.default,
+    transitions: _transitions.default,
+    zIndex: _zIndex.default
+  }, other, {
+    isMergeableObject: _isPlainObject.default
+  }));
+  process.env.NODE_ENV !== "production" ? (0, _warning.default)(muiTheme.shadows.length === 25, 'Material-UI: the shadows array provided to createMuiTheme should support 25 elevations.') : void 0;
   return muiTheme;
-} // < 1kb payload overhead when lodash/merge is > 3kb.
-exports.default = createMuiTheme;
+}
+
+var _default = createMuiTheme;
+exports.default = _default;

package/styles/createPalette.js

@@ -1,54 +1,41 @@
-'use strict';
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.dark = exports.light = undefined;
-
-var _extends2 = require('babel-runtime/helpers/extends');
-
-var _extends3 = _interopRequireDefault(_extends2);
-
-var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties');
-
-var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2);
-
 exports.default = createPalette;
+exports.dark = exports.light = void 0;
 
-var _warning = require('warning');
-
-var _warning2 = _interopRequireDefault(_warning);
-
-var _deepmerge = require('deepmerge');
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
-var _deepmerge2 = _interopRequireDefault(_deepmerge);
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 
-var _indigo = require('../colors/indigo');
+var _warning = _interopRequireDefault(require("warning"));
 
-var _indigo2 = _interopRequireDefault(_indigo);
+var _deepmerge = _interopRequireDefault(require("deepmerge"));
 
-var _pink = require('../colors/pink');
+var _grey = _interopRequireDefault(require("@material-ui/core/colors/grey"));
 
-var _pink2 = _interopRequireDefault(_pink);
+var _red = _interopRequireDefault(require("@material-ui/core/colors/red"));
 
-var _grey = require('../colors/grey');
+var _common = _interopRequireDefault(require("@material-ui/core/colors/common"));
 
-var _grey2 = _interopRequireDefault(_grey);
-
-var _red = require('../colors/red');
-
-var _red2 = _interopRequireDefault(_red);
-
-var _common = require('../colors/common');
-
-var _common2 = _interopRequireDefault(_common);
-
-var _colorManipulator = require('./colorManipulator');
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var _colorManipulator = require("./colorManipulator");
 
 // < 1kb payload overhead when lodash/merge is > 3kb.
-var light = exports.light = {
+var light = {
+  global: {
+    background1: '#FFFFFF',
+    background2: '#F8F9FB',
+    background3: '#FFFFFF'
+  },
+  local: {
+    background1: '#F8F9FB',
+    background2: '#F5F5F5',
+    background3: '#FFFFFF'
+  },
   // The colors used to style the text.
   text: {
     // The most important text.
@@ -65,8 +52,8 @@ var light = exports.light = {
   // The background colors used to style the surfaces.
   // Consistency between these values is important.
   background: {
-    paper: _common2.default.white,
-    default: _grey2.default[50]
+    paper: _common.default.white,
+    default: _grey.default[50]
   },
   // The colors used to style the action elements.
   action: {
@@ -74,18 +61,36 @@ var light = exports.light = {
     active: 'rgba(0, 0, 0, 0.54)',
     // The color of an hovered action.
     hover: 'rgba(0, 0, 0, 0.08)',
+    hoverOpacity: 0.08,
     // The color of a selected action.
-    selected: 'rgba(0, 0, 0, 0.14)',
+    selected: 'rgba(0, 0, 0, 0.04)',
     // The color of a disabled action.
     disabled: 'rgba(0, 0, 0, 0.26)',
     // The background color of a disabled action.
     disabledBackground: 'rgba(0, 0, 0, 0.12)'
+  },
+  input: {
+    bottomLine: '#E0E0E0',
+    helperText: 'rgba(0, 0, 0, 0.54)',
+    labelText: 'rgba(0, 0, 0, 0.54)',
+    inputText: 'rgba(0, 0, 0, 0.87)',
+    disabled: '#FAFAFA'
   }
 };
-
-var dark = exports.dark = {
+exports.light = light;
+var dark = {
+  global: {
+    background1: '#303030',
+    background2: '#212121',
+    background3: '#303030'
+  },
+  local: {
+    background1: '#3E3E3E',
+    background2: '#303030',
+    background3: '#303030'
+  },
   text: {
-    primary: _common2.default.white,
+    primary: _common.default.white,
     secondary: 'rgba(255, 255, 255, 0.7)',
     disabled: 'rgba(255, 255, 255, 0.5)',
     hint: 'rgba(255, 255, 255, 0.5)',
@@ -93,17 +98,26 @@ var dark = exports.dark = {
   },
   divider: 'rgba(255, 255, 255, 0.12)',
   background: {
-    paper: _grey2.default[800],
+    paper: _grey.default[800],
     default: '#303030'
   },
   action: {
-    active: _common2.default.white,
+    active: _common.default.white,
     hover: 'rgba(255, 255, 255, 0.1)',
+    hoverOpacity: 0.1,
     selected: 'rgba(255, 255, 255, 0.2)',
-    disabled: 'rgba(255, 255, 255, 0.3)',
+    disabled: '#999999',
     disabledBackground: 'rgba(255, 255, 255, 0.12)'
+  },
+  input: {
+    bottomLine: 'rgba(255, 255, 255, 0.7)',
+    helperText: 'rgba(255, 255, 255, 0.7)',
+    labelText: 'rgba(255, 255, 255, 0.7)',
+    inputText: 'rgba(255, 255, 255, 1)',
+    disabled: 'rgba(255, 255, 255, 0.5)'
   }
 };
+exports.dark = dark;
 
 function addLightOrDark(intent, direction, shade, tonalOffset) {
   if (!intent[direction]) {
@@ -119,31 +133,62 @@ function addLightOrDark(intent, direction, shade, tonalOffset) {
 
 function createPalette(palette) {
   var _palette$primary = palette.primary,
-      primary = _palette$primary === undefined ? {
-    light: _indigo2.default[300],
-    main: _indigo2.default[500],
-    dark: _indigo2.default[700]
+      primary = _palette$primary === void 0 ? {
+    light: '#5bc8ef',
+    main: '#00ade9',
+    dark: '#007ca9',
+    contrastText: '#FFFFFF'
   } : _palette$primary,
       _palette$secondary = palette.secondary,
-      secondary = _palette$secondary === undefined ? {
-    light: _pink2.default.A200,
-    main: _pink2.default.A400,
-    dark: _pink2.default.A700
+      secondary = _palette$secondary === void 0 ? {
+    light: '#ffcf21',
+    main: '#ffcf21',
+    dark: '#E9BE30',
+    contrastText: '#FFFFFF'
   } : _palette$secondary,
+      _palette$positive = palette.positive,
+      positive = _palette$positive === void 0 ? {
+    light: '#66CF66',
+    main: '#00AF00',
+    dark: '#008300',
+    contrastText: '#FFFFFF'
+  } : _palette$positive,
+      _palette$negative = palette.negative,
+      negative = _palette$negative === void 0 ? {
+    light: '#E66666',
+    main: '#D50000',
+    dark: '#A00000',
+    contrastText: '#FFFFFF'
+  } : _palette$negative,
+      _palette$middle = palette.middle,
+      middle = _palette$middle === void 0 ? {
+    light: '#F4A647',
+    main: '#F99408',
+    dark: '#F78700',
+    contrastText: '#FFFFFF'
+  } : _palette$middle,
+      _palette$neutral = palette.neutral,
+      neutral = _palette$neutral === void 0 ? {
+    light: '#838383',
+    main: '#737373',
+    dark: '#20272B',
+    contrastText: '#FFFFFF'
+  } : _palette$neutral,
       _palette$error = palette.error,
-      error = _palette$error === undefined ? {
-    light: _red2.default[300],
-    main: _red2.default[500],
-    dark: _red2.default[700]
+      error = _palette$error === void 0 ? {
+    light: _red.default[300],
+    main: _red.default[500],
+    dark: _red.default[700]
   } : _palette$error,
       _palette$type = palette.type,
-      type = _palette$type === undefined ? 'light' : _palette$type,
+      type = _palette$type === void 0 ? 'light' : _palette$type,
       _palette$contrastThre = palette.contrastThreshold,
-      contrastThreshold = _palette$contrastThre === undefined ? 3 : _palette$contrastThre,
+      contrastThreshold = _palette$contrastThre === void 0 ? 4 : _palette$contrastThre,
       _palette$tonalOffset = palette.tonalOffset,
-      tonalOffset = _palette$tonalOffset === undefined ? 0.2 : _palette$tonalOffset,
-      other = (0, _objectWithoutProperties3.default)(palette, ['primary', 'secondary', 'error', 'type', 'contrastThreshold', 'tonalOffset']);
-
+      tonalOffset = _palette$tonalOffset === void 0 ? 0.2 : _palette$tonalOffset,
+      _palette$context = palette.context,
+      context = _palette$context === void 0 ? 'local' : _palette$context,
+      other = (0, _objectWithoutProperties2.default)(palette, ["primary", "secondary", "positive", "negative", "middle", "neutral", "error", "type", "contrastThreshold", "tonalOffset", "context"]);
 
   function getContrastText(background) {
     // Use the same logic as
@@ -153,56 +198,81 @@ function createPalette(palette) {
 
     if (process.env.NODE_ENV !== 'production') {
       var contrast = (0, _colorManipulator.getContrastRatio)(background, contrastText);
-      process.env.NODE_ENV !== "production" ? (0, _warning2.default)(contrast >= 3, ['Material-UI: the contrast ratio of ' + contrast + ':1 for ' + contrastText + ' on ' + background, 'falls below the WACG recommended absolute minimum contrast ratio of 3:1.', 'https://www.w3.org/TR/2008/REC-WCAG20-20081211/#visual-audio-contrast-contrast'].join('\n')) : void 0;
+      process.env.NODE_ENV !== "production" ? (0, _warning.default)(contrast >= 3, ["Material-UI: the contrast ratio of ".concat(contrast, ":1 for ").concat(contrastText, " on ").concat(background), 'falls below the WACG recommended absolute minimum contrast ratio of 3:1.', 'https://www.w3.org/TR/2008/REC-WCAG20-20081211/#visual-audio-contrast-contrast'].join('\n')) : void 0;
     }
 
     return contrastText;
   }
 
-  function augmentColor(color, mainShade, lightShade, darkShade) {
+  function augmentColor(color) {
+    var mainShade = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 500;
+    var lightShade = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 300;
+    var darkShade = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 700;
+
     if (!color.main && color[mainShade]) {
       color.main = color[mainShade];
     }
+
+    if (process.env.NODE_ENV !== 'production' && !color.main) {
+      throw new Error(['Material-UI: the color provided to augmentColor(color) is invalid.', "The color object needs to have a `main` property or a `".concat(mainShade, "` property.")].join('\n'));
+    }
+
     addLightOrDark(color, 'light', lightShade, tonalOffset);
     addLightOrDark(color, 'dark', darkShade, tonalOffset);
+
     if (!color.contrastText) {
       color.contrastText = getContrastText(color.main);
     }
   }
 
-  augmentColor(primary, 500, 300, 700);
+  augmentColor(primary);
   augmentColor(secondary, 'A400', 'A200', 'A700');
-  augmentColor(error, 500, 300, 700);
-
-  var types = { dark: dark, light: light };
-
-  process.env.NODE_ENV !== "production" ? (0, _warning2.default)(types[type], 'Material-UI: the palette type `' + type + '` is not supported.') : void 0;
-
-  var paletteOutput = (0, _deepmerge2.default)((0, _extends3.default)({
+  augmentColor(error);
+  var types = {
+    dark: dark,
+    light: light
+  };
+  process.env.NODE_ENV !== "production" ? (0, _warning.default)(types[type], "Material-UI: the palette type `".concat(type, "` is not supported.")) : void 0;
+  var contexts = {
+    local: types[type] ? types[type].local : {},
+    global: types[type] ? types[type].global : {}
+  };
+  process.env.NODE_ENV !== "production" ? (0, _warning.default)(contexts[context], "Material-UI: the context `".concat(context, "` is not supported.")) : void 0;
+  var paletteOutput = (0, _deepmerge.default)((0, _extends2.default)({
     // A collection of common colors.
-    common: _common2.default,
+    common: _common.default,
     // The palette type, can be light or dark.
     type: type,
     // The colors used to represent primary interface elements for a user.
     primary: primary,
     // The colors used to represent secondary interface elements for a user.
     secondary: secondary,
+    // The colors used to represent positive interface elements for a user.
+    positive: positive,
+    // The colors used to represent negative interface elements for a user.
+    negative: negative,
+    // The colors used to represent middle interface elements for a user.
+    middle: middle,
+    // The colors used to represent neutral interface elements for a user.
+    neutral: neutral,
     // The colors used to represent interface elements that the user should be made aware of.
     error: error,
     // The grey colors.
-    grey: _grey2.default,
+    grey: _grey.default,
     // Used by `getContrastText()` to maximize the contrast between the background and
     // the text.
     contrastThreshold: contrastThreshold,
     // Take a background color and return the color of the text to maximize the contrast.
     getContrastText: getContrastText,
+    // Generate a rich color object.
+    augmentColor: augmentColor,
     // Used by the functions below to shift a color's luminance by approximately
     // two indexes within its tonal palette.
     // E.g., shift from Red 500 to Red 300 or Red 700.
     tonalOffset: tonalOffset
-  }, types[type]), other, {
+  }, types[type], contexts[context]), other, {
     clone: false // No need to clone deep
-  });
 
+  });
   return paletteOutput;
 }

package/styles/createStyles.js

@@ -0,0 +1,10 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = createStyles;
+
+function createStyles(styles) {
+  return styles;
+}