@trafilea/afrodita-components 3.0.8-beta.0 → 4.0.1-beta.2

package/build/theme/shapermint.theme.js

@@ -0,0 +1,566 @@
+'use strict';
+
+/*! *****************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+
+var __assign = function() {
+    __assign = Object.assign || function __assign(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+
+/* istanbul ignore next */
+function color(color, contrast, softColor, softContrast) {
+    return {
+        color: color,
+        contrast: contrast,
+        soft: {
+            color: softColor,
+            contrast: softContrast,
+        },
+    };
+}
+/* istanbul ignore next */
+function basic(color, contrast) {
+    return {
+        color: color,
+        contrast: contrast,
+    };
+}
+
+var shapermint = {
+    name: 'Shapermint',
+    fontSizes: [10, 12, 14, 16, 18, 20, 24, 30, 36, 42, 52, 60, 68, 72, 76],
+    fontWeights: [400, 600, 500, 700, 800],
+    lineHeights: [14, 16, 18, 20, 22, 24, 28, 32, 38, 44, 52, 68, 76, 84, 88, 92],
+    mediaQueries: {
+        mobile: 0,
+        desktop: 1200,
+    },
+    colors: {
+        pallete: {
+            primary: __assign(__assign({}, color('#f7a08b', '--colors-shades-700-color', '#fcd9d1', '--colors-shades-700-color')), { 20: color('fdece8', '--colors-shades-700-color', '#fef7f6', '--colors-shades-700-color'), 40: color('#fcd9d1', '--colors-shades-700-color', '#fef0ed', '--colors-shades-700-color'), 60: color('#fac6b9', '--colors-shades-700-color', '#fde8e3', '--colors-shades-700-color'), 80: color('#f9b3a2', '--colors-shades-700-color', '#fde1da', '--colors-shades-700-color') }),
+            secondary: __assign(__assign({}, color('#292929', '--colors-shades-white-color', '#bbbbbb', '--colors-shades-700-color')), { 20: color('#d4d4d4', '--colors-shades-700-color', '#f1f1f1', '--colors-shades-700-color'), 40: color('#a9a9a9', '--colors-shades-700-color', '#e4e4e4', '--colors-shades-700-color'), 60: color('#7f7f7f', '--colors-shades-white-color', '#d6d6d6', '--colors-shades-700-color'), 80: color('#545454', '--colors-shades-white-color', '#c9c9c9', '--colors-shades-700-color') }),
+            // prettier-ignore
+            ocean: color('#2B526D', '--colors-shades-white-color', '#BFCBD3', '--colors-shades-700-color'),
+        },
+        shades: {
+            black: basic('#000', '--colors-shades-white-color'),
+            white: basic('#fff', '--colors-shades-700-color'),
+            5: basic('#fafafa', '--colors-shades-700-color'),
+            10: basic('#f7f7f7', '--colors-shades-700-color'),
+            50: basic('#efefef', '--colors-shades-700-color'),
+            100: basic('#e5e5e5', '--colors-shades-700-color'),
+            150: basic('#d1d1d1', '--colors-shades-700-color'),
+            200: basic('#bbbbbb', '--colors-shades-700-color'),
+            250: basic('#a6a6a6', '--colors-shades-700-color'),
+            300: basic('#9e9e9e', '--colors-shades-700-color'),
+            350: basic('#949494', '--colors-shades-700-color'),
+            400: basic('#808080', '--colors-shades-700-color'),
+            450: basic('#767676', '--colors-shades-700-color'),
+            500: basic('#5a5a5a', '--colors-shades-white-color'),
+            550: basic('#3a3a3a', '--colors-shades-white-color'),
+            600: basic('#343434', '--colors-shades-white-color'),
+            650: basic('#2d2d2d', '--colors-shades-white-color'),
+            700: basic('#292929', '--colors-shades-white-color'),
+            750: basic('#232323', '--colors-shades-white-color'),
+            800: basic('#202020', '--colors-shades-white-color'),
+            850: basic('#1b1b1b', '--colors-shades-white-color'),
+            900: basic('#191919', '--colors-shades-white-color'),
+            950: basic('#141414', '--colors-shades-white-color'),
+            990: basic('#0b0b0b', '--colors-shades-white-color'),
+        },
+        semantic: {
+            positive: basic('#2f806a', '--colors-shades-white-color'),
+            urgent: basic('#c64844', '--colors-shades-white-color'),
+            attention: basic('#f2d96f', '--colors-shades-700-color'),
+            informative: basic('#0a609b', '--colors-shades-700-color'),
+        },
+        border: {
+            color: '',
+            disabled: '--colors-shades-200-color',
+            highlight: '--colors-shades-700-color',
+        },
+        background: {
+            color: '--colors-shades-white-color',
+            disabled: '--colors-shades-50-color',
+        },
+        text: {
+            color: '--colors-shades-700-color',
+            disabled: '--colors-shades-250-color',
+        },
+    },
+    component: {
+        button: {
+            border: 'none',
+            borderRadius: '0.5rem',
+            fontWeight: 600,
+            size: {
+                small: {
+                    fontSize: '1rem',
+                    padding: '0.875rem 2rem',
+                },
+                medium: {
+                    fontSize: '0.875rem',
+                    padding: '0.688rem 2rem',
+                },
+                large: {
+                    fontSize: '0.75rem',
+                    padding: '0.625rem 2rem',
+                },
+            },
+            primary: {
+                active: {
+                    backgroundColor: '--colors-pallete-primary-color',
+                    color: '--colors-pallete-primary-contrast',
+                },
+                hover: {
+                    backgroundColor: '--colors-pallete-primary-soft-color',
+                    color: '--colors-pallete-primary-soft-contrast',
+                },
+            },
+            secondary: {
+                active: {
+                    backgroundColor: '--colors-pallete-secondary-color',
+                    color: '--colors-pallete-secondary-contrast',
+                },
+                hover: {
+                    backgroundColor: '--colors-pallete-secondary-80-color',
+                    color: '--colors-pallete-secondary-contrast',
+                },
+            },
+        },
+        input: {
+            background: '--colors-shades-white-color',
+            color: '--colors-shades-700-color',
+            placeholderColor: '--colors-shades-250-color',
+            borderRadius: '0.5rem',
+            fontSize: '1rem',
+            fontWeight: 400,
+            padding: '0.75rem 1rem',
+            lineHeight: '1.5rem',
+            border: '0.063rem solid var(--colors-shades-200-color)',
+            boxShadow: 'none',
+        },
+        inputCustom: {
+            button: {
+                borderRadius: '0 0.5rem 0.5rem 0',
+            },
+            input: {
+                borderRadius: '0.5rem 1rem 1rem 0.5rem',
+            },
+        },
+        selector: {
+            size: {
+                small: {
+                    padding: '0.625rem 1.25rem',
+                    borderRadius: '0.5rem',
+                },
+                medium: {
+                    padding: '0.25rem 1rem',
+                    borderRadius: '0.375rem',
+                },
+            },
+            default: {
+                fontWeight: 600,
+                border: '0.063rem solid var(--colors-shades-250-color)',
+                background: '--colors-shades-white-color',
+                color: '--colors-shades-700-color',
+            },
+            hover: {
+                fontWeight: 600,
+                background: '--colors-shades-700-color',
+                border: 'none',
+                color: '--colors-shades-white-color',
+            },
+            disabled: {
+                border: 'none',
+            },
+            fontSize: '0.75rem',
+        },
+        rating: {
+            fontWeight: 400,
+            size: {
+                xsmall: {
+                    fontSize: '0.625rem',
+                    lineHeight: '0.875rem',
+                },
+                small: {
+                    fontSize: '0.875rem',
+                    lineHeight: '1.375rem',
+                },
+                medium: {
+                    fontSize: '1rem',
+                    lineHeight: '1.5rem',
+                },
+                large: {
+                    fontSize: '1.125rem',
+                    lineHeight: '1.75rem',
+                },
+            },
+        },
+        card: {
+            borderRadius: '0.5rem',
+        },
+        radio: {
+            borderColor: '--colors-shades-700-color',
+            background: '--colors-shades-white-color',
+            size: {
+                large: {
+                    borderWidth: '0.094rem',
+                    margin: '0.5rem',
+                    height: '2.25rem',
+                    active: {
+                        borderWidth: '0.875rem',
+                    },
+                },
+                medium: {
+                    borderWidth: '0.094rem',
+                    margin: '0.375rem',
+                    height: '1.375rem',
+                    active: {
+                        borderWidth: '0.5rem',
+                    },
+                },
+                small: {
+                    borderWidth: '0.063rem',
+                    margin: '0.375rem',
+                    height: '0.875rem',
+                    active: {
+                        borderWidth: '0.313rem',
+                    },
+                },
+            },
+        },
+        label: {
+            fontSize: {
+                small: '0.75rem',
+                medium: '0.75rem',
+                large: '0.875rem',
+            },
+            lineHeight: {
+                small: '1rem',
+                medium: '1rem',
+                large: '1.125rem',
+            },
+        },
+        checkbox: {
+            background: '--colors-shades-white-color',
+            borderColor: '--colors-shades-700-color',
+            active: {
+                background: '--colors-shades-700-color',
+            },
+            size: {
+                large: {
+                    width: '1.8rem',
+                    height: '1.8rem',
+                    borderRadius: '0.25rem',
+                    borderWidth: '0.094rem',
+                    margin: '0.6rem',
+                    icon: {
+                        width: '1.1rem',
+                        height: '0.8rem',
+                    },
+                },
+                medium: {
+                    width: '1.375rem',
+                    height: '1.375rem',
+                    borderRadius: '0.25rem',
+                    borderWidth: '0.094rem',
+                    margin: '0.438rem',
+                    icon: {
+                        width: '0.875rem',
+                        height: '0.625rem',
+                    },
+                },
+                small: {
+                    width: '0.875rem',
+                    height: '0.875rem',
+                    borderRadius: '0.125rem',
+                    borderWidth: '0.063rem',
+                    margin: '0.563rem',
+                    icon: {
+                        width: '0.5rem',
+                        height: '0.375rem',
+                    },
+                },
+            },
+        },
+        accordion: {
+            variant: {
+                box: {
+                    container: {
+                        border: '0.063rem solid',
+                        borderColor: '--colors-shades-100-color',
+                        borderRadius: '0.25rem',
+                        padding: '1.25rem 2rem',
+                    },
+                    summary: {
+                        fontWeight: 600,
+                        fontSize: '20px',
+                        lineHeight: '28px',
+                        color: '--colors-shades-700-color',
+                    },
+                    details: {
+                        margin: '10px 0px 0px 0px',
+                    },
+                    icon: {
+                        width: 1.5,
+                        height: 1.5,
+                        color: '--colors-shades-700-color',
+                    },
+                },
+                simple: {
+                    container: {
+                        borderTop: '1px solid',
+                        borderColor: '--colors-shades-100-color',
+                        borderBottom: 'none',
+                        borderRadius: 'none',
+                        padding: '10px 0px',
+                    },
+                    summary: {
+                        fontWeight: 400,
+                        fontSize: '20px',
+                        lineHeight: '28px',
+                        color: '--colors-shades-700-color',
+                    },
+                    details: {
+                        margin: '10px 0px 0px 0px',
+                    },
+                    icon: {
+                        width: 1,
+                        height: 1,
+                        color: '--colors-shades-700-color',
+                    },
+                },
+            },
+        },
+        dropdown: {
+            borderRadius: '0.5rem',
+            fontSize: '0.875rem',
+            fontWeight: 600,
+            lineHeight: '1.125rem',
+            padding: '0.5rem 0.75rem 0.5rem 1rem',
+            color: '--colors-shades-700-color',
+            fill: '--colors-shades-700-color',
+            options: {
+                borderColor: '--colors-shades-700-color',
+                color: '--colors-shades-700-color',
+            },
+        },
+    },
+    typography: {
+        config: {
+            weight: {
+                heavy: 900,
+                bold: 700,
+                demi: 600,
+                regular: 400,
+            },
+        },
+        variants: {
+            hero1: {
+                fontSize: 76,
+                lineHeight: '92px',
+            },
+            hero2: {
+                fontSize: 72,
+                lineHeight: '88px',
+            },
+            hero3: {
+                fontSize: 68,
+                lineHeight: '84px',
+            },
+            display1: {
+                fontSize: 60,
+                lineHeight: '76px',
+            },
+            display2: {
+                fontSize: 52,
+                lineHeight: '68px',
+            },
+            heading1: {
+                fontSize: 42,
+                lineHeight: '52px',
+            },
+            heading2: {
+                fontSize: 36,
+                lineHeight: '44px',
+            },
+            heading3: {
+                fontSize: 30,
+                lineHeight: '38px',
+            },
+            heading4: {
+                fontSize: 24,
+                lineHeight: '32px',
+            },
+            heading5: {
+                fontSize: 20,
+                lineHeight: '28px',
+            },
+            heading6: {
+                fontSize: 18,
+                lineHeight: '28px',
+            },
+            'body-regular': {
+                fontSize: 16,
+                lineHeight: '24px',
+            },
+            'body-small': {
+                fontSize: 14,
+                lineHeight: '22px',
+            },
+            'link-regular': {
+                fontSize: 16,
+                lineHeight: '24px',
+            },
+            'link-small': {
+                fontSize: 14,
+                lineHeight: '22px',
+            },
+            'pricing-large': {
+                fontSize: 24,
+                lineHeight: '32px',
+            },
+            'pricing-medium': {
+                fontSize: 18,
+                lineHeight: '24px',
+            },
+            'pricing-regular': {
+                fontSize: 16,
+                lineHeight: '32px',
+            },
+            'pricing-small': {
+                fontSize: 14,
+                lineHeight: '20px',
+            },
+            button: {
+                textTransform: 'uppercase',
+            },
+            'button-large': {
+                fontSize: 16,
+                lineHeight: '20px',
+            },
+            'button-regular': {
+                fontSize: 14,
+                lineHeight: '18px',
+            },
+            'button-small': {
+                fontSize: 12,
+                lineHeight: '16px',
+            },
+            'label-regular': {
+                fontSize: 14,
+                lineHeight: '18px',
+            },
+            'label-small': {
+                fontSize: 12,
+                lineHeight: '16px',
+            },
+        },
+    },
+    fonts: {
+        url: 'https://cdn.jsdelivr.net/gh/igor-ribeiro/storefront-static@main/fonts/shapermint',
+        config: [
+            {
+                family: 'AvenirNextLTPro',
+                src: 'AvenirNextLTPro-Regular.otf',
+                weight: 'normal',
+            },
+            {
+                family: 'AvenirNextLTPro',
+                src: 'AvenirNextLTPro-Demi.otf',
+                weight: 'bold',
+            },
+            {
+                family: 'AvenirNextLTPro',
+                src: 'AvenirNextLTPro-Bold.otf',
+                weight: '800 900',
+            },
+            {
+                family: 'AvenirNextLTPro',
+                src: 'AvenirNextLTPro-DemiCn.otf',
+                weight: 'bold',
+                stretch: 'condensed',
+            },
+            {
+                family: 'AvenirNextLTPro',
+                src: 'AvenirNextLTPro-DemiCnIt.otf',
+                weight: 'bold',
+                stretch: 'condensed',
+                style: 'italic',
+            },
+            {
+                family: 'AvenirNextLTPro',
+                src: 'AvenirNextLTPro-DemiIt.otf',
+                weight: 'bold',
+                style: 'italic',
+            },
+            {
+                family: 'AvenirNextLTPro',
+                src: 'AvenirNextLTPro-MediumCn.otf',
+                weight: 500,
+                stretch: 'condensed',
+            },
+            {
+                family: 'AvenirNextLTPro',
+                src: 'AvenirNextLTPro-MediumCnIt.otf',
+                weight: 500,
+                style: 'italic',
+                stretch: 'condensed',
+            },
+            {
+                family: 'AvenirNextLTPro',
+                src: 'AvenirNextLTPro-UltLtCn.otf',
+                weight: 200,
+                stretch: 'condensed',
+            },
+            {
+                family: 'AvenirNextLTPro',
+                src: 'AvenirNextLTPro-UltLtCnIt.otf',
+                weight: 200,
+                style: 'italic',
+                stretch: 'condensed',
+            },
+            {
+                family: 'AvenirNextLTPro',
+                src: 'AvenirNextLTPro-HeavyCn.otf',
+                weight: 900,
+                stretch: 'condensed',
+            },
+            {
+                family: 'AvenirNextLTPro',
+                src: 'AvenirNextLTPro-HeavyCnIt.otf',
+                weight: 900,
+                style: 'italic',
+                stretch: 'condensed',
+            },
+        ],
+    },
+    assets: {
+        images: {
+            favicon: 'https://cdn.shopify.com/s/files/1/2679/8624/files/shapermint_favicon-128x128.png',
+            logo: 'https://cdn.jsdelivr.net/gh/igor-ribeiro/storefront-static@main/images/shapermint/shapermint_logo_black.svg',
+        },
+    },
+};
+
+module.exports = shapermint;