@hipay/hipay-material-ui 3.11.1 → 3.12.0

package/src/styles/createPalette.js

@@ -0,0 +1,274 @@
+import warning from 'warning';
+import deepmerge from 'deepmerge'; // < 1kb payload overhead when lodash/merge is > 3kb.
+import grey from '@mui/material/colors/grey';
+import red from '@mui/material/colors/red';
+import common from '@mui/material/colors/common';
+
+import { getContrastRatio, darken, lighten } from './colorManipulator';
+
+export const 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.
+        primary: '#20272B',
+        // Secondary text.
+        secondary: 'rgba(0, 0, 0, 0.54)',
+        // Disabled text have even lower visual prominence.
+        disabled: '#999999',
+        // Text hints.
+        hint: 'rgba(0, 0, 0, 0.38)',
+    },
+    // The color used to divide different elements.
+    divider: '#D9D9DB',
+    // 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)',
+        hoverOpacity: 0.08,
+        // The color of a selected action.
+        selected: '#F8F9FB',
+        // The color of a disabled action.
+        disabled: 'rgba(0, 0, 0, 0.24)',
+        // 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',
+    },
+};
+
+export const dark = {
+    global: {
+        background1: '#303030',
+        background2: '#212121',
+        background3: '#303030',
+    },
+    local: {
+        background1: '#3E3E3E',
+        background2: '#303030',
+        background3: '#303030',
+    },
+    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)',
+        hoverOpacity: 0.1,
+        selected: 'rgba(255, 255, 255, 0.2)',
+        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)',
+    },
+};
+
+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: '#5bc8ef',
+            main: '#00ade9',
+            dark: '#007ca9',
+            contrastText: '#FFFFFF',
+        },
+        secondary = {
+            light: '#ffd94f',
+            main: '#ffcf21',
+            dark: '#E9BE30',
+            contrastText: '#FFFFFF',
+        },
+        positive = {
+            light: '#66CF66',
+            main: '#00AF00',
+            dark: '#008300',
+            contrastText: '#FFFFFF',
+        },
+        negative = {
+            ultraLight: '#EA9494',
+            light: '#E66666',
+            main: '#D50000',
+            dark: '#A00000',
+            contrastText: '#FFFFFF',
+        },
+        middle = {
+            light: '#F4A647',
+            main: '#F99408',
+            dark: '#F78700',
+            contrastText: '#FFFFFF',
+        },
+        neutral = {
+            ultraLight: '#8B8B8B',
+            light: '#838383',
+            main: '#737373',
+            dark: '#20272B',
+            contrastText: '#FFFFFF',
+        },
+        error = {
+            light: red[300],
+            main: red[500],
+            dark: red[700],
+        },
+        lookup = {
+            light: '#FFFF8D',
+            main: '#EDED14',
+        },
+        type = 'light',
+        contrastThreshold = 3, // max light contrast
+        tonalOffset = 0.2,
+        context = 'local',
+        ...other
+    } = palette;
+
+    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);
+            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'),
+            );
+        }
+
+        return contrastText;
+    }
+
+    function augmentColor(color, mainShade = 500, lightShade = 300, darkShade = 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 \`${mainShade}\` property.`,
+                ].join('\n'),
+            );
+        }
+
+        addLightOrDark(color, 'light', lightShade, tonalOffset);
+        addLightOrDark(color, 'dark', darkShade, tonalOffset);
+        if (!color.contrastText) {
+            color.contrastText = getContrastText(color.main);
+        }
+    }
+
+    augmentColor(primary);
+    augmentColor(secondary, 'A400', 'A200', 'A700');
+    augmentColor(error);
+
+    const types = { dark, light };
+    warning(types[type], `Material-UI: the palette type \`${type}\` is not supported.`);
+
+    const contexts = {
+        local: types[type] ? types[type].local : {},
+        global: types[type] ? types[type].global : {},
+    };
+    warning(contexts[context], `Material-UI: the context \`${context}\` is not supported.`);
+
+    const paletteOutput = deepmerge(
+        {
+            // 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 positive interface elements for a user.
+            positive,
+            // The colors used to represent negative interface elements for a user.
+            negative,
+            // The colors used to represent middle interface elements for a user.
+            middle,
+            // The colors used to represent neutral interface elements for a user.
+            neutral,
+            // The colors used to represent interface elements that the user should be made aware of.
+            error,
+            // The colors used to represent form elements that have lookup state.
+            lookup,
+            // 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,
+            // Generate a rich color object.
+            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,
+            // The light and dark type object.
+            ...types[type],
+            ...contexts[context],
+        },
+        other,
+        {
+            clone: false, // No need to clone deep
+        },
+    );
+
+    return paletteOutput;
+}

package/src/styles/createPalette.test.js

@@ -0,0 +1,375 @@
+import { assert } from 'chai';
+import consoleErrorMock from 'test/utils/consoleErrorMock';
+import { pink, deepOrange, green, red } from '@mui/material/colors';
+import { lighten, darken } from './colorManipulator';
+import createPalette, { dark, light } from './createPalette';
+
+describe('createPalette()', () => {
+    before(() => {
+        consoleErrorMock.spy();
+    });
+
+    after(() => {
+        consoleErrorMock.reset();
+    });
+
+    it('should create a material design palette according to spec', () => {
+        const palette = createPalette({});
+        assert.strictEqual(
+            palette.primary.main,
+            '#00ade9',
+            'should use blue hipay as the default primary main color',
+        );
+        assert.strictEqual(
+            palette.primary.light,
+            '#5bc8ef',
+            'should use light blue hipay as the default primary light color',
+        );
+        assert.strictEqual(
+            palette.primary.dark,
+            '#007ca9',
+            'should use dark blue hipay as the default primary dark color',
+        );
+        assert.strictEqual(
+            palette.primary.contrastText,
+            '#FFFFFF',
+            'should use white as the default primary contrastText color',
+        );
+        assert.strictEqual(
+            palette.secondary.main,
+            '#ffcf21',
+            'should use yellow hipay as the default secondary main color',
+        );
+        assert.strictEqual(
+            palette.secondary.light,
+            '#ffd94f',
+            'should use light yellow hipay as the default secondary light color',
+        );
+        assert.strictEqual(
+            palette.secondary.dark,
+            '#E9BE30',
+            'should use dark yellow hipay as the default secondary dark color',
+        );
+        assert.strictEqual(
+            palette.secondary.contrastText,
+            '#FFFFFF',
+            'should use white as the default secondary contrastText color',
+        );
+        assert.strictEqual(
+            palette.error.main,
+            red[500],
+            'should use red[500] as the default error main color',
+        );
+        assert.strictEqual(
+            palette.error.light,
+            red[300],
+            'should use red[300] as the default error light color',
+        );
+        assert.strictEqual(
+            palette.error.dark,
+            red[700],
+            'should use red[700] as the default error dark color',
+        );
+        assert.strictEqual(
+            palette.text,
+            light.text,
+            'should use light theme text for a light theme by default',
+        );
+    });
+
+    it('should create a palette with Material colors', () => {
+        const palette = createPalette({
+            primary: deepOrange,
+            secondary: green,
+            error: pink,
+        });
+        assert.strictEqual(
+            palette.primary.main,
+            deepOrange[500],
+            'should use deepOrange[500] as the primary main color',
+        );
+        assert.strictEqual(
+            palette.primary.light,
+            deepOrange[300],
+            'should use deepOrange[300] as the primary light color',
+        );
+        assert.strictEqual(
+            palette.primary.dark,
+            deepOrange[700],
+            'should use deepOrange[700] as the primary dark color',
+        );
+        assert.strictEqual(
+            palette.secondary.main,
+            green.A400,
+            'should use green.A400 as the secondary main color',
+        );
+        assert.strictEqual(
+            palette.secondary.light,
+            green.A200,
+            'should use green.A200 as the secondary light color',
+        );
+        assert.strictEqual(
+            palette.secondary.dark,
+            green.A700,
+            'should use green.A700 as the secondary dark color',
+        );
+        assert.strictEqual(
+            palette.error.main,
+            pink[500],
+            'should use pink[500] as the error main color',
+        );
+        assert.strictEqual(
+            palette.error.light,
+            pink[300],
+            'should use pink[300] as the error light color',
+        );
+        assert.strictEqual(
+            palette.error.dark,
+            pink[700],
+            'should use pink[700] as the error dark color',
+        );
+        assert.strictEqual(palette.text, light.text, 'should use light theme text');
+    });
+
+    it('should create a palette with custom colors', () => {
+        const palette = createPalette({
+            primary: {
+                main: deepOrange[500],
+                light: deepOrange[300],
+                dark: deepOrange[700],
+                contrastText: '#ffffff',
+            },
+            secondary: {
+                main: green.A400,
+                light: green.A200,
+                dark: green.A700,
+                contrastText: '#000000',
+            },
+            error: {
+                main: pink[500],
+                light: pink[300],
+                dark: pink[700],
+                contrastText: '#00ff00',
+            },
+        });
+        assert.strictEqual(
+            palette.primary.main,
+            deepOrange[500],
+            'should use deepOrange[500] as the primary main color',
+        );
+        assert.strictEqual(
+            palette.primary.light,
+            deepOrange[300],
+            'should use deepOrange[300] as the primary light color',
+        );
+        assert.strictEqual(
+            palette.primary.dark,
+            deepOrange[700],
+            'should use deepOrange[700] as the primary dark color',
+        );
+        assert.strictEqual(
+            palette.primary.contrastText,
+            '#ffffff',
+            'should use #ffffff as the secondary contrastText color',
+        );
+        assert.strictEqual(
+            palette.secondary.main,
+            green.A400,
+            'should use green.A400 as the secondary main color',
+        );
+        assert.strictEqual(
+            palette.secondary.light,
+            green.A200,
+            'should use green.A200 as the secondary light color',
+        );
+        assert.strictEqual(
+            palette.secondary.dark,
+            green.A700,
+            'should use green.A700 as the secondary dark color',
+        );
+        assert.strictEqual(
+            palette.secondary.contrastText,
+            '#000000',
+            'should use #000000 as the secondary contrastText color',
+        );
+        assert.strictEqual(
+            palette.error.main,
+            pink[500],
+            'should use pink[500] as the error main color',
+        );
+        assert.strictEqual(
+            palette.error.light,
+            pink[300],
+            'should use pink[300] as the error light color',
+        );
+        assert.strictEqual(
+            palette.error.dark,
+            pink[700],
+            'should use pink[700] as the error dark color',
+        );
+        assert.strictEqual(
+            palette.error.contrastText,
+            '#00ff00',
+            'should use #00ff00 as the error contrastText color',
+        );
+        assert.strictEqual(palette.text, light.text, 'should use light theme text');
+    });
+
+    it('should calculate light and dark colors if not provided', () => {
+        const palette = createPalette({
+            primary: { main: deepOrange[500] },
+            secondary: { main: green.A400 },
+            error: { main: pink[500] },
+        });
+        assert.strictEqual(
+            palette.primary.main,
+            deepOrange[500],
+            'should use deepOrange[500] as the primary main color',
+        );
+        assert.strictEqual(
+            palette.primary.light,
+            lighten(deepOrange[500], 0.2),
+            'should use lighten(deepOrange[500], 0.2) as the primary light color',
+        );
+        assert.strictEqual(
+            palette.primary.dark,
+            darken(deepOrange[500], 0.3),
+            'should use darken(deepOrange[500], 0.3) as the primary dark color',
+        );
+        assert.strictEqual(
+            palette.secondary.main,
+            green.A400,
+            'should use green.A400 as the secondary main color',
+        );
+        assert.strictEqual(
+            palette.secondary.light,
+            lighten(green.A400, 0.2),
+            'should use lighten(green.A400, 0.2) as the secondary light color',
+        );
+        assert.strictEqual(
+            palette.secondary.dark,
+            darken(green.A400, 0.3),
+            'should use darken(green.A400, 0.3) as the secondary dark color',
+        );
+        assert.strictEqual(
+            palette.error.main,
+            pink[500],
+            'should use pink[500] as the error main color',
+        );
+        assert.strictEqual(
+            palette.error.light,
+            lighten(pink[500], 0.2),
+            'should use lighten(pink[500], 0.2) as the error light color',
+        );
+        assert.strictEqual(
+            palette.error.dark,
+            darken(pink[500], 0.3),
+            'should use darken(pink[500], 0.3) as the error dark color',
+        );
+    });
+
+    it('should calculate light and dark colors using the provided tonalOffset', () => {
+        const palette = createPalette({
+            primary: { main: deepOrange[500] },
+            secondary: { main: green.A400 },
+            error: { main: red[500] },
+            tonalOffset: 0.1,
+        });
+        // primary
+        assert.strictEqual(
+            palette.primary.main,
+            deepOrange[500],
+            'should use deepOrange[500] as the primary main color',
+        );
+        assert.strictEqual(
+            palette.primary.light,
+            lighten(deepOrange[500], 0.1),
+            'should use lighten(deepOrange[500], 0.1) as the primary light color',
+        );
+        assert.strictEqual(
+            palette.primary.dark,
+            darken(deepOrange[500], 0.15),
+            'should use darken(deepOrange[500], 0.1) as the primary dark color',
+        );
+        // secondary
+        assert.strictEqual(
+            palette.secondary.main,
+            green.A400,
+            'should use green.A400 as the secondary main color',
+        );
+        assert.strictEqual(
+            palette.secondary.light,
+            lighten(green.A400, 0.1),
+            'should use lighten(green.A400, 0.1) as the secondary light color',
+        );
+        assert.strictEqual(
+            palette.secondary.dark,
+            darken(green.A400, 0.15),
+            'should use darken(green.A400, 0.1) as the secondary dark color',
+        );
+        // error
+        assert.strictEqual(
+            palette.error.main,
+            red[500],
+            'should use red[500] as the error main color',
+        );
+        assert.strictEqual(
+            palette.error.light,
+            lighten(red[500], 0.1),
+            'should use lighten(red[500], 0.1) as the error light color',
+        );
+        assert.strictEqual(
+            palette.error.dark,
+            darken(red[500], 0.15),
+            'should use darken(red[500], 0.1) as the error dark color',
+        );
+    });
+
+    it('should calculate contrastText using the provided contrastThreshold', () => {
+        const palette = createPalette({ contrastThreshold: 7 });
+        assert.strictEqual(
+            palette.primary.contrastText,
+            '#FFFFFF',
+            'should use white as the default primary contrastText color',
+        );
+        assert.strictEqual(
+            palette.secondary.contrastText,
+            '#FFFFFF',
+            'should use white as the default secondary contrastText color',
+        );
+    });
+
+    it('should create a dark palette', () => {
+        const palette = createPalette({ type: 'dark' });
+        assert.strictEqual(
+            palette.primary.main,
+            '#00ade9',
+            'should use indigo as the default primary color',
+        );
+        assert.strictEqual(
+            palette.secondary.main,
+            '#ffcf21',
+            'should use pink as the default secondary color',
+        );
+        assert.strictEqual(palette.text, dark.text, 'should use dark theme text');
+        assert.strictEqual(consoleErrorMock.callCount(), 0);
+    });
+
+    it('should throw an exception when an invalid type is specified', () => {
+        createPalette({ type: 'foo' });
+        assert.strictEqual(consoleErrorMock.callCount(), 1);
+        assert.match(
+            consoleErrorMock.args()[0][0],
+            /Material-UI: the palette type `foo` is not supported/,
+        );
+    });
+
+    describe('augmentColor', () => {
+        it('should throw when the input is invalid', () => {
+            const palette = createPalette({});
+            assert.throws(() => {
+                palette.augmentColor({});
+            }, /The color object needs to have a/);
+        });
+    });
+});

package/src/styles/createStyles.js

@@ -0,0 +1,3 @@
+export default function createStyles(styles) {
+    return styles;
+}

package/src/styles/createStyles.test.js

@@ -0,0 +1,9 @@
+import { assert } from 'chai';
+import { createStyles } from '.';
+
+describe('createStyles', () => {
+    it('is the identity function', () => {
+        const styles = {};
+        assert.strictEqual(createStyles(styles), styles);
+    });
+});