@hipay/hipay-material-ui 1.0.0-beta.1

package/es/styles/createHiMuiTheme.js

@@ -0,0 +1,296 @@
+import _extends from 'babel-runtime/helpers/extends';
+import _objectWithoutProperties from 'babel-runtime/helpers/objectWithoutProperties';
+import deepmerge from 'deepmerge'; // < 1kb payload overhead when lodash/merge is > 3kb.
+import { createMuiTheme } from 'material-ui/styles';
+import createBreakpoints from './createBreakpoints';
+import createMixins from './createMixins';
+import spacing from './spacing';
+import { grey, blue, yellow } from '../colors';
+
+/**
+ * Specify Hipay business colors (to be overriden by white labels)
+ */
+const defaultHipayPalette = {
+    primary: {
+        light: '#5bc8ef',
+        normal: '#00ade9',
+        dark: '#007ca9',
+        contrast: '#ffffff'
+    },
+    secondary: {
+        light: 'rgba(255, 207, 33, 0.08)',
+        normal: '#ffcf21',
+        dark: '#E9BE30',
+        contrast: '#ffffff'
+    }
+};
+
+const light = {
+    global: {
+        background1: '#FFFFFF',
+        background2: '#F8F9FB',
+        background3: '#FFFFFF'
+    },
+    local: {
+        background1: '#F8F9FB',
+        background2: '#F5F5F5',
+        background3: '#FFFFFF'
+    },
+    chipBackground: '#ECEFF0',
+    hover: '#F5F5F5',
+    selected: '#F8F9FB',
+    placeholder: '#999999',
+    disable: '#E0E0E0',
+    positive: {
+        light: '#66CF66',
+        normal: '#00AF00',
+        dark: '#008300',
+        contrast: '#FFFFFF'
+    },
+    negative: {
+        light: '#E66666',
+        normal: '#D50000',
+        dark: '#A00000',
+        contrast: '#FFFFFF'
+    },
+    middle: {
+        light: '#F4A647',
+        normal: '#F99408',
+        dark: '#F78700',
+        contrast: '#FFFFFF'
+    },
+    neutral: {
+        light: '#838383',
+        normal: '#737373',
+        dark: '#20272B',
+        contrast: '#FFFFFF'
+    },
+    text: {
+        primary: 'rgba(0, 0, 0, 0.87)',
+        secondary: 'rgba(0, 0, 0, 0.54)',
+        disabled: 'rgba(0, 0, 0, 0.26)',
+        hint: 'rgba(0, 0, 0, 0.38)',
+        icon: '#737373',
+        divider: 'rgba(0, 0, 0, 0.12)',
+        lightDivider: 'rgba(0, 0, 0, 0.075)'
+    },
+    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'
+    },
+    line: {
+        stepper: '#E4E7E8'
+    },
+    // from material-ui theme
+    background: {
+        appBar: '#fff',
+        paper: '#fff',
+        default: grey[50]
+    }
+};
+
+const dark = {
+    global: {
+        background1: '#303030',
+        background2: '#212121',
+        background3: '#303030'
+    },
+    local: {
+        background1: '#3E3E3E',
+        background2: '#303030',
+        background3: '#303030'
+    },
+    chipBackground: '#ECEFF0',
+    hover: '#4A4A4A',
+    selected: '#303030',
+    placeholder: '#999999',
+    disable: '#E0E0E0',
+    positive: {
+        light: '#66CF66',
+        normal: '#00AF00',
+        dark: '#008300',
+        contrast: '#FFFFFF'
+    },
+    negative: {
+        light: '#E66666',
+        normal: '#D50000',
+        dark: '#A00000',
+        contrast: '#FFFFFF'
+    },
+    middle: {
+        light: '#F4A647',
+        normal: '#F99408',
+        dark: '#F78700',
+        contrast: '#FFFFFF'
+    },
+    neutral: {
+        light: '#CBCBCB',
+        normal: '#8B8B8B',
+        dark: '#3E3E3E',
+        contrast: '#FFFFFF'
+    },
+    text: {
+        primary: 'rgba(255, 255, 255, 1)',
+        secondary: 'rgba(255, 255, 255, 0.7)',
+        disabled: 'rgba(255, 255, 255, 0.5)',
+        hint: 'rgba(255, 255, 255, 0.5)',
+        icon: 'rgba(255, 255, 255, 0.5)',
+        divider: 'rgba(255, 255, 255, 0.12)',
+        lightDivider: 'rgba(255, 255, 255, 0.075)'
+    },
+    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)'
+    },
+    line: {
+        stepper: '#E4E7E8'
+    },
+    // from material-ui theme
+    background: {
+        appBar: '#fff',
+        paper: '#fff',
+        default: grey[50]
+    }
+};
+
+const statusPalette = {
+    101: '#00ADE1',
+    103: '#FFBA01',
+    104: '#FFBA01',
+    105: '#FFBA01',
+    106: '#FFBA01',
+    107: '#FFBA01',
+    108: '#FFBA01',
+    109: '#EF6C01',
+    110: '#D50001',
+    111: '#D50001',
+    112: '#FF8F01',
+    '112b': '#EF6C01',
+    113: '#A20001',
+    114: '#A20001',
+    115: '#A20001',
+    116: '#00AF01',
+    118: '#008301',
+    120: '#008301',
+    125: '#737373',
+    129: '#550000',
+    140: '#FFBA01',
+    141: '#FFBA01',
+    143: '#00AF01',
+    150: '#8BC34A',
+    151: '#A20001',
+    161: '#00AF01',
+    166: '#551A1A',
+    172: '#8BC34A',
+    174: '#8BC34A',
+    175: '#00AF01'
+};
+
+const fontFamily = '"Roboto", "Helvetica", "Arial", sans-serif';
+
+const typography = {
+    fontFamily,
+    fontSize: 14, // px
+    fontWeightThin: 100,
+    fontWeightLight: 300,
+    fontWeightRegular: 400,
+    fontWeightMedium: 500,
+    fontWeightBold: 700,
+    fontWeightBlack: 900,
+    h1: {
+        fontSize: 24,
+        fontFamily
+    },
+    h2: {
+        fontSize: 20,
+        fontFamily
+    },
+    h3: {
+        fontSize: 18,
+        fontFamily
+    },
+    h4: {
+        fontSize: 16,
+        fontFamily
+    },
+    h5: {
+        fontSize: 14,
+        fontFamily
+    },
+    body1: {
+        fontSize: 15,
+        fontFamily
+    },
+    body2: {
+        fontSize: 14,
+        fontFamily
+    },
+    body3: {
+        fontSize: 13,
+        fontFamily
+    },
+    body4: {
+        fontSize: 12,
+        fontFamily
+    }
+};
+
+function createHiMuiTheme(options = {}) {
+    const shades = { dark, light };
+
+    const {
+        palette: paletteInput = {}
+    } = options,
+          other = _objectWithoutProperties(options, ['palette']);
+
+    const { type = 'light', context = 'local' } = paletteInput,
+          other2 = _objectWithoutProperties(paletteInput, ['type', 'context']);
+
+    const overridenPaletteInput = deepmerge(_extends({
+        business: defaultHipayPalette,
+        local: shades[type].local,
+        global: shades[type].global,
+        chipBackground: shades[type].chipBackground
+    }, shades[type][context], {
+        hover: shades[type].hover,
+        selected: shades[type].selected,
+        positive: shades[type].positive,
+        negative: shades[type].negative,
+        middle: shades[type].middle,
+        neutral: shades[type].neutral,
+        text: shades[type].text,
+        input: shades[type].input,
+        line: shades[type].line,
+        inputLine: shades[type].inputLine,
+        inputDisabled: shades[type].inputDisabled,
+        tableLine: shades[type].tableLine,
+        background: shades[type].background,
+        status: statusPalette,
+        primary: blue,
+        secondary: yellow
+    }), paletteInput);
+
+    const breakpoints = createBreakpoints({});
+
+    return createMuiTheme(_extends({
+        palette: overridenPaletteInput,
+        typography,
+        mixins: createMixins(breakpoints, spacing, {}),
+        overrides: {
+            MuiMenuItem: {
+                root: _extends({}, typography.body1, {
+                    height: 20,
+                    padding: 10
+                })
+            }
+        }
+    }, other));
+}
+
+export default createHiMuiTheme;

package/es/styles/createMixins.js

@@ -0,0 +1,25 @@
+import _extends from 'babel-runtime/helpers/extends';
+export default function createMixins(breakpoints, spacing, mixins) {
+  return _extends({
+    gutters: (styles = {}) => {
+      return _extends({
+        paddingLeft: spacing.unit * 2,
+        paddingRight: spacing.unit * 2
+      }, styles, {
+        [breakpoints.up('sm')]: _extends({
+          paddingLeft: spacing.unit * 3,
+          paddingRight: spacing.unit * 3
+        }, styles[breakpoints.up('sm')])
+      });
+    },
+    toolbar: {
+      minHeight: 56,
+      [`${breakpoints.up('xs')} and (orientation: landscape)`]: {
+        minHeight: 48
+      },
+      [breakpoints.up('sm')]: {
+        minHeight: 64
+      }
+    }
+  }, mixins);
+}

package/es/styles/createMuiTheme.js

@@ -0,0 +1,45 @@
+import _extends from 'babel-runtime/helpers/extends';
+import _objectWithoutProperties from 'babel-runtime/helpers/objectWithoutProperties';
+import deepmerge from 'deepmerge'; // < 1kb payload overhead when lodash/merge is > 3kb.
+import warning from 'warning';
+import createTypography from './createTypography';
+import createBreakpoints from './createBreakpoints';
+import createPalette from './createPalette';
+import createMixins from './createMixins';
+import shadows from './shadows';
+import transitions from './transitions';
+import zIndex from './zIndex';
+import spacing from './spacing';
+
+function createMuiTheme(options = {}) {
+  const {
+    palette: paletteInput = {},
+    breakpoints: breakpointsInput = {},
+    mixins: mixinsInput = {},
+    typography: typographyInput = {},
+    shadows: shadowsInput
+  } = options,
+        other = _objectWithoutProperties(options, ['palette', 'breakpoints', 'mixins', 'typography', 'shadows']);
+
+  const palette = createPalette(paletteInput);
+  const breakpoints = createBreakpoints(breakpointsInput);
+
+  const muiTheme = _extends({
+    direction: 'ltr',
+    palette,
+    typography: createTypography(palette, typographyInput),
+    mixins: createMixins(breakpoints, spacing, mixinsInput),
+    breakpoints,
+    shadows: shadowsInput || shadows
+  }, deepmerge({
+    transitions,
+    spacing,
+    zIndex
+  }, other));
+
+  process.env.NODE_ENV !== "production" ? warning(muiTheme.shadows.length === 25, 'Material-UI: the shadows array provided to createMuiTheme should support 25 elevations.') : void 0;
+
+  return muiTheme;
+}
+
+export default createMuiTheme;

package/es/styles/createPalette.js

@@ -0,0 +1,164 @@
+import _extends from 'babel-runtime/helpers/extends';
+import _objectWithoutProperties from 'babel-runtime/helpers/objectWithoutProperties';
+import warning from 'warning';
+import deepmerge from 'deepmerge'; // < 1kb payload overhead when lodash/merge is > 3kb.
+import indigo from '../colors/indigo';
+import pink from '../colors/pink';
+import grey from '../colors/grey';
+import red from '../colors/red';
+import common from '../colors/common';
+import { getContrastRatio, darken, lighten } from './colorManipulator';
+
+export const light = {
+  // The colors used to style the text.
+  text: {
+    // The most important text.
+    primary: 'rgba(0, 0, 0, 0.87)',
+    // Secondary text.
+    secondary: 'rgba(0, 0, 0, 0.54)',
+    // Disabled text have even lower visual prominence.
+    disabled: 'rgba(0, 0, 0, 0.38)',
+    // Text hints.
+    hint: 'rgba(0, 0, 0, 0.38)'
+  },
+  // The color used to divide different elements.
+  divider: 'rgba(0, 0, 0, 0.12)',
+  // The background colors used to style the surfaces.
+  // Consistency between these values is important.
+  background: {
+    paper: common.white,
+    default: grey[50]
+  },
+  // The colors used to style the action elements.
+  action: {
+    // The color of an active action like an icon button.
+    active: 'rgba(0, 0, 0, 0.54)',
+    // The color of an hovered action.
+    hover: 'rgba(0, 0, 0, 0.08)',
+    // The color of a selected action.
+    selected: 'rgba(0, 0, 0, 0.14)',
+    // 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)'
+  }
+};
+
+export const dark = {
+  text: {
+    primary: common.white,
+    secondary: 'rgba(255, 255, 255, 0.7)',
+    disabled: 'rgba(255, 255, 255, 0.5)',
+    hint: 'rgba(255, 255, 255, 0.5)',
+    icon: 'rgba(255, 255, 255, 0.5)'
+  },
+  divider: 'rgba(255, 255, 255, 0.12)',
+  background: {
+    paper: grey[800],
+    default: '#303030'
+  },
+  action: {
+    active: common.white,
+    hover: 'rgba(255, 255, 255, 0.1)',
+    selected: 'rgba(255, 255, 255, 0.2)',
+    disabled: 'rgba(255, 255, 255, 0.3)',
+    disabledBackground: 'rgba(255, 255, 255, 0.12)'
+  }
+};
+
+function addLightOrDark(intent, direction, shade, tonalOffset) {
+  if (!intent[direction]) {
+    if (intent.hasOwnProperty(shade)) {
+      intent[direction] = intent[shade];
+    } else if (direction === 'light') {
+      intent.light = lighten(intent.main, tonalOffset);
+    } else if (direction === 'dark') {
+      intent.dark = darken(intent.main, tonalOffset * 1.5);
+    }
+  }
+}
+
+export default function createPalette(palette) {
+  const {
+    primary = {
+      light: indigo[300],
+      main: indigo[500],
+      dark: indigo[700]
+    },
+    secondary = {
+      light: pink.A200,
+      main: pink.A400,
+      dark: pink.A700
+    },
+    error = {
+      light: red[300],
+      main: red[500],
+      dark: red[700]
+    },
+    type = 'light',
+    contrastThreshold = 3,
+    tonalOffset = 0.2
+  } = palette,
+        other = _objectWithoutProperties(palette, ['primary', 'secondary', 'error', 'type', 'contrastThreshold', 'tonalOffset']);
+
+  function getContrastText(background) {
+    // Use 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
+    const contrastText = getContrastRatio(background, dark.text.primary) >= contrastThreshold ? dark.text.primary : light.text.primary;
+
+    if (process.env.NODE_ENV !== 'production') {
+      const contrast = getContrastRatio(background, contrastText);
+      process.env.NODE_ENV !== "production" ? warning(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;
+    }
+
+    return contrastText;
+  }
+
+  function augmentColor(color, mainShade, lightShade, darkShade) {
+    if (!color.main && color[mainShade]) {
+      color.main = color[mainShade];
+    }
+    addLightOrDark(color, 'light', lightShade, tonalOffset);
+    addLightOrDark(color, 'dark', darkShade, tonalOffset);
+    if (!color.contrastText) {
+      color.contrastText = getContrastText(color.main);
+    }
+  }
+
+  augmentColor(primary, 500, 300, 700);
+  augmentColor(secondary, 'A400', 'A200', 'A700');
+  augmentColor(error, 500, 300, 700);
+
+  const types = { dark, light };
+
+  process.env.NODE_ENV !== "production" ? warning(types[type], `Material-UI: the palette type \`${type}\` is not supported.`) : void 0;
+
+  const paletteOutput = deepmerge(_extends({
+    // A collection of common colors.
+    common,
+    // The palette type, can be light or dark.
+    type,
+    // The colors used to represent primary interface elements for a user.
+    primary,
+    // The colors used to represent secondary interface elements for a user.
+    secondary,
+    // The colors used to represent interface elements that the user should be made aware of.
+    error,
+    // The grey colors.
+    grey,
+    // Used by `getContrastText()` to maximize the contrast between the background and
+    // the text.
+    contrastThreshold,
+    // Take a background color and return the color of the text to maximize the contrast.
+    getContrastText,
+    // 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
+  }, types[type]), other, {
+    clone: false // No need to clone deep
+  });
+
+  return paletteOutput;
+}

package/es/styles/createTypography.js

@@ -0,0 +1,116 @@
+import _objectWithoutProperties from 'babel-runtime/helpers/objectWithoutProperties';
+import deepmerge from 'deepmerge'; // < 1kb payload overhead when lodash/merge is > 3kb.
+
+function round(value) {
+  return Math.round(value * 1e5) / 1e5;
+}
+
+export default function createTypography(palette, typography) {
+  const _ref = typeof typography === 'function' ? typography(palette) : typography,
+        {
+    fontFamily = '"Roboto", "Helvetica", "Arial", sans-serif',
+    fontSize = 14, // px
+    fontWeightLight = 300,
+    fontWeightRegular = 400,
+    fontWeightMedium = 500,
+    htmlFontSize = 16 } = _ref,
+        other = _objectWithoutProperties(_ref, ['fontFamily', 'fontSize', 'fontWeightLight', 'fontWeightRegular', 'fontWeightMedium', 'htmlFontSize']);
+
+  function pxToRem(value) {
+    return `${value / htmlFontSize}rem`;
+  }
+
+  return deepmerge({
+    pxToRem,
+    round,
+    fontFamily,
+    fontSize,
+    fontWeightLight,
+    fontWeightRegular,
+    fontWeightMedium,
+    display4: {
+      fontSize: pxToRem(112),
+      fontWeight: fontWeightLight,
+      fontFamily,
+      letterSpacing: '-.04em',
+      lineHeight: `${round(128 / 112)}em`,
+      marginLeft: '-.06em',
+      color: palette.text.secondary
+    },
+    display3: {
+      fontSize: pxToRem(56),
+      fontWeight: fontWeightRegular,
+      fontFamily,
+      letterSpacing: '-.02em',
+      lineHeight: `${round(73 / 56)}em`,
+      marginLeft: '-.04em',
+      color: palette.text.secondary
+    },
+    display2: {
+      fontSize: pxToRem(45),
+      fontWeight: fontWeightRegular,
+      fontFamily,
+      lineHeight: `${round(48 / 45)}em`,
+      marginLeft: '-.04em',
+      color: palette.text.secondary
+    },
+    display1: {
+      fontSize: pxToRem(34),
+      fontWeight: fontWeightRegular,
+      fontFamily,
+      lineHeight: `${round(41 / 34)}em`,
+      marginLeft: '-.04em',
+      color: palette.text.secondary
+    },
+    headline: {
+      fontSize: pxToRem(24),
+      fontWeight: fontWeightRegular,
+      fontFamily,
+      lineHeight: `${round(32.5 / 24)}em`,
+      color: palette.text.primary
+    },
+    title: {
+      fontSize: pxToRem(21),
+      fontWeight: fontWeightMedium,
+      fontFamily,
+      lineHeight: `${round(24.5 / 21)}em`,
+      color: palette.text.primary
+    },
+    subheading: {
+      fontSize: pxToRem(16),
+      fontWeight: fontWeightRegular,
+      fontFamily,
+      lineHeight: `${round(24 / 16)}em`,
+      color: palette.text.primary
+    },
+    body2: {
+      fontSize: pxToRem(14),
+      fontWeight: fontWeightMedium,
+      fontFamily,
+      lineHeight: `${round(24 / 14)}em`,
+      color: palette.text.primary
+    },
+    body1: {
+      fontSize: pxToRem(14),
+      fontWeight: fontWeightRegular,
+      fontFamily,
+      lineHeight: `${round(20.5 / 14)}em`,
+      color: palette.text.primary
+    },
+    caption: {
+      fontSize: pxToRem(12),
+      fontWeight: fontWeightRegular,
+      fontFamily,
+      lineHeight: `${round(16.5 / 12)}em`,
+      color: palette.text.secondary
+    },
+    button: {
+      fontSize: pxToRem(fontSize),
+      textTransform: 'uppercase',
+      fontWeight: fontWeightMedium,
+      fontFamily
+    }
+  }, other, {
+    clone: false // No need to clone deep
+  });
+}

package/es/styles/getStylesCreator.js

@@ -0,0 +1,34 @@
+import _Object$keys from 'babel-runtime/core-js/object/keys';
+import _extends from 'babel-runtime/helpers/extends';
+import warning from 'warning';
+import deepmerge from 'deepmerge'; // < 1kb payload overhead when lodash/merge is > 3kb.
+
+function getStylesCreator(stylesOrCreator) {
+  const themingEnabled = typeof stylesOrCreator === 'function';
+
+  function create(theme, name) {
+    const styles = themingEnabled ? stylesOrCreator(theme) : stylesOrCreator;
+
+    if (!theme.overrides || !name || !theme.overrides[name]) {
+      return styles;
+    }
+
+    const overrides = theme.overrides[name];
+    const stylesWithOverrides = _extends({}, styles);
+
+    _Object$keys(overrides).forEach(key => {
+      process.env.NODE_ENV !== "production" ? warning(stylesWithOverrides[key], ['Material-UI: you are trying to override a style that does not exist.', `Fix the \`${key}\` key of \`theme.overrides.${name}\`.`].join('\n')) : void 0;
+      stylesWithOverrides[key] = deepmerge(stylesWithOverrides[key], overrides[key]);
+    });
+
+    return stylesWithOverrides;
+  }
+
+  return {
+    create,
+    options: {},
+    themingEnabled
+  };
+}
+
+export default getStylesCreator;

package/es/styles/index.js

@@ -0,0 +1,7 @@
+export { default as createGenerateClassName } from './createGenerateClassName';
+export { default as createMuiTheme } from './createMuiTheme';
+export { default as jssPreset } from './jssPreset';
+export { default as MuiThemeProvider } from './MuiThemeProvider';
+export { default as withStyles } from './withStyles';
+export { default as withTheme } from './withTheme';
+export { default as createHiMuiTheme } from './createHiMuiTheme';