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

package/build/theme/truekind.theme.js

@@ -0,0 +1,608 @@
+'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 truekind = {
+    name: 'Truekind',
+    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('#cc4125', '--colors-shades-white-color', '', '')), { 20: color('#f5d9d3', '--colors-shades-700-color', '', ''), 40: color('#ebb3a8', '--colors-shades-700-color', '', ''), 60: color('#e08d7c', '--colors-shades-700-color', '', ''), 80: color('#d66751', '--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') }),
+            cloud: 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('#2579C8', '--colors-shades-white-color'),
+            urgent: basic('#D82A2D', '--colors-shades-white-color'),
+            attention: basic('#FFA877', '--colors-shades-700-color'),
+            informative: basic('#686872', '--colors-shades-white-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',
+        },
+    },
+    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: 50,
+                lineHeight: '64px',
+            },
+            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',
+            },
+        },
+    },
+    component: {
+        button: {
+            border: 'none',
+            borderRadius: '1.5rem',
+            fontWeight: 700,
+            size: {
+                small: {
+                    fontSize: '1rem',
+                    padding: '0.75rem 3rem',
+                },
+                medium: {
+                    fontSize: '0.875rem',
+                    padding: '0.5rem 2.5rem',
+                },
+                large: {
+                    fontSize: '0.75rem',
+                    padding: '0.25rem 2rem',
+                },
+            },
+            primary: {
+                active: {
+                    backgroundColor: '#CC4125',
+                    color: '#FFFFFF',
+                },
+                hover: {
+                    backgroundColor: '#910F23',
+                    color: '#FFFFFF',
+                },
+            },
+            secondary: {
+                active: {
+                    backgroundColor: '#292929',
+                    color: '#FFFFFF',
+                },
+                hover: {
+                    backgroundColor: '#686872',
+                    color: '#FFFFFF',
+                },
+            },
+        },
+        input: {
+            background: '#FFFFFF',
+            color: '#292929',
+            placeholderColor: '#A6A6A6',
+            borderRadius: '1.5rem',
+            fontSize: '1rem',
+            fontWeight: 400,
+            padding: '0.75rem 1.5rem',
+            lineHeight: '1.5rem',
+            border: '0.063rem solid #BBBBBB',
+            boxShadow: '0 0 0 0.25rem #D9EEFF',
+        },
+        inputCustom: {
+            button: {
+                borderRadius: '1.5rem',
+            },
+            input: {
+                borderRadius: '1.5rem',
+            },
+        },
+        selector: {
+            size: {
+                small: {
+                    padding: '0.5rem 1.5rem',
+                    borderRadius: '0.375rem',
+                },
+                medium: {
+                    padding: '0.5rem 1.5',
+                    borderRadius: '0.375rem',
+                },
+            },
+            default: {
+                fontWeight: 700,
+                border: '0.063rem solid #BBBBBB',
+                background: '#FFFFFF',
+                color: '#000000',
+            },
+            hover: {
+                fontWeight: 700,
+                background: '#292929',
+                border: 'none',
+                color: '#FFFFFF',
+            },
+            disabled: {
+                border: '0.063rem solid #E5E5E5',
+            },
+            fontSize: '0.875rem',
+        },
+        rating: {
+            fontWeight: 700,
+            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: '1.5rem',
+        },
+        radio: {
+            borderColor: '#686872',
+            background: '#FFFFFF',
+            size: {
+                large: {
+                    borderWidth: '0.094rem',
+                    margin: '0.375rem',
+                    height: '1.375rem',
+                    active: {
+                        borderWidth: '0.5rem',
+                    },
+                },
+                medium: {
+                    borderWidth: '0.094rem',
+                    margin: '0.375rem',
+                    height: '1.375rem',
+                    active: {
+                        borderWidth: '0.5rem',
+                    },
+                },
+                small: {
+                    borderWidth: '0.094rem',
+                    margin: '0.375rem',
+                    height: '1.375rem',
+                    active: {
+                        borderWidth: '0.5rem',
+                    },
+                },
+            },
+        },
+        label: {
+            fontSize: {
+                small: '0.625rem',
+                medium: '0.75rem',
+                large: '0.875rem',
+            },
+            lineHeight: {
+                small: '0.875rem',
+                medium: '1rem',
+                large: '1.25rem',
+            },
+        },
+        checkbox: {
+            background: '#FFFFFF',
+            borderColor: '#686872',
+            active: {
+                background: '#686872',
+            },
+            size: {
+                large: {
+                    width: '1.5rem',
+                    height: '1.5rem',
+                    borderRadius: '0.25rem',
+                    borderWidth: '0.094rem',
+                    margin: '0.375rem',
+                    icon: {
+                        width: '0.875rem',
+                        height: '0.625rem',
+                    },
+                },
+                medium: {
+                    width: '1.5rem',
+                    height: '1.5rem',
+                    borderRadius: '0.25rem',
+                    borderWidth: '0.094rem',
+                    margin: '0.375rem',
+                    icon: {
+                        width: '0.875rem',
+                        height: '0.625rem',
+                    },
+                },
+                small: {
+                    width: '1.5rem',
+                    height: '1.5rem',
+                    borderRadius: '0.25rem',
+                    borderWidth: '0.094rem',
+                    margin: '0.375rem',
+                    icon: {
+                        width: '0.875rem',
+                        height: '0.625rem',
+                    },
+                },
+            },
+        },
+        accordion: {
+            variant: {
+                box: {
+                    container: {
+                        border: '1px solid',
+                        borderColor: '#BBBBBB',
+                        borderRadius: '20px',
+                        padding: '20px 32px',
+                    },
+                    summary: {
+                        fontWeight: 400,
+                        fontSize: '20px',
+                        lineHeight: '28px',
+                        color: '#292929',
+                    },
+                    details: {
+                        margin: '10px 0px 0px 0px',
+                    },
+                    icon: {
+                        width: 1.5,
+                        height: 1.5,
+                        color: '#292929',
+                    },
+                },
+                simple: {
+                    container: {
+                        borderTop: 'none',
+                        borderBottom: '1px solid',
+                        borderColor: '#E5E5E5',
+                        borderRadius: 'none',
+                        padding: '2px 0px 12px',
+                    },
+                    summary: {
+                        fontWeight: 700,
+                        fontSize: '16px',
+                        lineHeight: '24px',
+                        color: '#292929',
+                    },
+                    details: {
+                        margin: '14px 0px 0px 0px',
+                    },
+                    icon: {
+                        width: 1,
+                        height: 1,
+                        color: '#292929',
+                    },
+                },
+            },
+        },
+        dropdown: {
+            borderRadius: '1.5rem',
+            fontSize: '1rem',
+            fontWeight: 600,
+            lineHeight: '1.125rem',
+            padding: '0.5rem 0.75rem 0.5rem 1rem',
+            color: '#292929',
+            fill: '#292929',
+            options: {
+                borderColor: '#8BBEEA',
+                color: '#292929',
+            },
+        },
+    },
+    fonts: {
+        url: 'https://cdn.jsdelivr.net/gh/igor-ribeiro/storefront-static@main/fonts/truekind',
+        config: [
+            {
+                family: 'CircularXX',
+                src: 'CircularXX-Regular.otf',
+                weight: 'normal',
+            },
+            {
+                family: 'CircularXX',
+                src: 'CircularXX-RegularItalic.otf',
+                weight: 'normal',
+                style: 'italic',
+            },
+            {
+                family: 'CircularXX',
+                src: 'CircularXX-Bold.otf',
+                weight: 'bold',
+            },
+            {
+                family: 'CircularXX',
+                src: 'CircularXX-BoldItalic.otf',
+                weight: 'bold',
+                style: 'italic',
+            },
+            {
+                family: 'CircularXX',
+                src: 'CircularXX-Thin.otf',
+                weight: 100,
+            },
+            {
+                family: 'CircularXX',
+                src: 'CircularXX-ThinItalic.otf',
+                weight: 100,
+                style: 'italic',
+            },
+            {
+                family: 'CircularXX',
+                src: 'CircularXX-Light.otf',
+                weight: 200,
+            },
+            {
+                family: 'CircularXX',
+                src: 'CircularXX-LightItalic.otf',
+                weight: 200,
+                style: 'italic',
+            },
+            {
+                family: 'CircularXX',
+                src: 'CircularXX-Regular.otf',
+                weight: 300,
+            },
+            {
+                family: 'CircularXX',
+                src: 'CircularXX-RegularItalic.otf',
+                weight: 300,
+                style: 'italic',
+            },
+            {
+                family: 'CircularXX',
+                src: 'CircularXX-Book.otf',
+                weight: 400,
+            },
+            {
+                family: 'CircularXX',
+                src: 'CircularXX-BookItalic.otf',
+                weight: 400,
+                style: 'italic',
+            },
+            {
+                family: 'CircularXX',
+                src: 'CircularXX-Medium.otf',
+                weight: 500,
+            },
+            {
+                family: 'CircularXX',
+                src: 'CircularXX-MediumItalic.otf',
+                weight: 500,
+                style: 'italic',
+            },
+            {
+                family: 'CircularXX',
+                src: 'CircularXX-Bold.otf',
+                weight: 700,
+                stretch: 'condensed',
+            },
+            {
+                family: 'CircularXX',
+                src: 'CircularXX-BoldItalic.otf',
+                weight: 700,
+                stretch: 'condensed',
+                style: 'italic',
+            },
+            {
+                family: 'CircularXX',
+                src: 'CircularXX-BlackItalic.otf',
+                weight: 800,
+                stretch: 'condensed',
+                style: 'italic',
+            },
+            {
+                family: 'CircularXX',
+                src: 'CircularXX-Black.otf',
+                weight: 800,
+                stretch: 'condensed',
+            },
+            {
+                family: 'CircularXX',
+                src: 'CircularXX-ExtraBlack.otf',
+                weight: 900,
+                stretch: 'condensed',
+            },
+            {
+                family: 'CircularXX',
+                src: 'CircularXX-ExtraBlackItalic.otf',
+                weight: 900,
+                stretch: 'condensed',
+                style: 'italic',
+            },
+        ],
+    },
+    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 = truekind;

package/package.json

@@ -3,7 +3,7 @@
   "description": "Trafilea's Design System",
   "author": "Trafilea",
   "repository": "https://github.com/trafilea/afrodita-components",
-  "version": "3.0.8-beta.0",
+  "version": "4.0.1-beta.2",
   "private": false,
   "main": "build/index.js",
   "style": "build/index.css",
@@ -23,13 +23,15 @@
   "scripts": {
     "build": "rollup -c",
     "test": "react-scripts test --watchAll=false --coverage",
+    "test:dev": "react-scripts test --watch",
     "eject": "react-scripts eject",
     "test:coverage": "react-scripts test --silent --ci --watchAll=false --coverage --json --outputFile=./report.json",
     "prepare": "husky install",
-    "storybook": "start-storybook -p 6006 -s public",
+    "storybook": "start-storybook -p 6006",
     "build-storybook": "build-storybook",
     "chromatic": "npx chromatic --storybook-build-dir .\\\\storybook-static\\",
-    "version:beta": "npm version prepatch --preid=beta"
+    "version:beta": "npm version prerelease --preid=beta",
+    "ts-check": "tsc -p ."
   },
   "eslintConfig": {
     "extends": [
@@ -60,15 +62,18 @@
     ]
   },
   "devDependencies": {
-    "@react-theming/storybook-addon": "1.1.1",
+    "@react-theming/storybook-addon": "1.1.5",
     "@rollup/plugin-commonjs": "^20.0.0",
     "@rollup/plugin-node-resolve": "^13.0.4",
-    "@storybook/addon-actions": "6.3.12",
-    "@storybook/addon-essentials": "6.3.12",
-    "@storybook/addon-links": "6.3.12",
-    "@storybook/node-logger": "6.3.12",
-    "@storybook/preset-create-react-app": "^3.2.0",
-    "@storybook/react": "6.3.12",
+    "@storybook/addon-actions": "^6.0.0",
+    "@storybook/addon-essentials": "^6.0.0",
+    "@storybook/addon-links": "^6.0.0",
+    "@storybook/builder-webpack5": "^6.0.0",
+    "@storybook/manager-webpack5": "^6.0.0",
+    "@storybook/node-logger": "^6.0.0",
+    "@storybook/preset-create-react-app": "^4.0.0",
+    "@storybook/react": "^6.0.0",
+    "@testing-library/dom": "^8.11.3",
     "@testing-library/jest-dom": "^5.14.1",
     "@testing-library/react": "^11.2.7",
     "@testing-library/user-event": "^12.8.3",
@@ -90,14 +95,15 @@
     "prettier": "^2.3.2",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "react-scripts": "4.0.3",
+    "react-scripts": "^5.0.0",
     "rollup": "^2.55.1",
     "rollup-plugin-delete": "^2.0.0",
     "rollup-plugin-dts": "^3.0.2",
     "rollup-plugin-import-css": "^3.0.2",
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "rollup-plugin-typescript2": "^0.30.0",
-    "tslib": "^2.2.0"
+    "tslib": "^2.2.0",
+    "webpack": "^5.68.0"
   },
   "peerDependencies": {
     "react": "^17.0.2",
@@ -122,8 +128,8 @@
     ],
     "coveragePathIgnorePatterns": [
       "./src/components/icons/*",
-      "./src/components/theme/*",
-      ".stories.tsx"
+      ".stories.tsx",
+      ".theme.ts"
     ]
   },
   "optionalDependencies": {