@exness-ui/default-theme 0.0.10

package/README.md

@@ -0,0 +1,32 @@
+# @exness-ui/default-theme
+
+Exness theme React components
+
+## Features
+
+- ES6 syntax, managed with Prettier + Eslint and Stylelint
+- Unit testing via Jest
+- React v16.8 - 17
+- ESM
+
+## Install
+
+```sh
+yarn add @exness-ui/default-theme
+// or
+npm i @exness-ui/default-theme
+```
+
+### Usage
+
+```js
+import { getDefaultThemeOptions, ThemeProvider } from '@exness-ui/default-theme';
+
+const MyApp = () => {
+  return (
+    <ThemeProvider theme={getDefaultThemeOptions({ primaryColor: 'red' })}>
+      <App/>
+    </ThemeProvider>
+  );
+}
+```

package/lib/components/SelectIcon.js

@@ -0,0 +1,36 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(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);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var const_1 = require("../const");
+var SelectIcon = function (_a) {
+    var _b = _a.fill, fill = _b === void 0 ? const_1.COLORS.greyText : _b, _c = _a.width, width = _c === void 0 ? 12 : _c, _d = _a.height, height = _d === void 0 ? 7 : _d, props = __rest(_a, ["fill", "width", "height"]);
+    return (react_1.default.createElement("span", __assign({}, props),
+        react_1.default.createElement("svg", { width: width, height: height, viewBox: "0 0 12 7", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+            react_1.default.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M0 1.07692L6 7L12 1.00129L11 0L6 5L1 0L0 1.07692Z", fill: fill }))));
+};
+exports.default = SelectIcon;

package/lib/const.js

@@ -0,0 +1,40 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TYPOGRAPHY = exports.COLORS = void 0;
+exports.COLORS = {
+    yellowCorporate: '#FFCF01',
+    yellowHover: '#FFDA33',
+    yellowLight: '#FFF5CC',
+    headerDropdown: '#2C3033',
+    almostBlack: '#37434E',
+    almostBlackAlpha10: '#37434E0A',
+    greyText: '#7D8184',
+    greyBorderButtons: '#B8BABA',
+    greyBorderPanels: '#DFDFDF',
+    greyBackground: '#F3F3F3',
+    white: '#FFF',
+    black: '#000',
+    green: '#23B14A',
+    greenLight: '#CFF5DA',
+    red: '#D84027',
+    redLight: '#FFE9E6',
+    blue: '#0376BC',
+    blueLight: '#E6F5FF',
+};
+exports.TYPOGRAPHY = {
+    bodySmall: {
+        fontWeight: 400,
+        fontSize: 12,
+        lineHeight: '16px',
+    },
+    bodyRegular: {
+        fontWeight: 400,
+        fontSize: 14,
+        lineHeight: '20px',
+    },
+    bodyLarge: {
+        fontWeight: 400,
+        fontSize: 16,
+        lineHeight: '24px',
+    },
+};

package/lib/index.js

@@ -0,0 +1,436 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(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);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.exnessRtlTheme = exports.defaultThemeOptions = exports.getDefaultThemeOptions = void 0;
+var styles_1 = require("@mui/material/styles");
+var const_1 = require("./const");
+var SelectIcon_1 = __importDefault(require("./components/SelectIcon"));
+var spacing = (0, styles_1.createTheme)().spacing;
+var getDefaultThemeOptions = function (colors, typography) {
+    if (colors === void 0) { colors = const_1.COLORS; }
+    if (typography === void 0) { typography = const_1.TYPOGRAPHY; }
+    return ({
+        palette: {
+            primary: {
+                main: colors.almostBlack,
+            },
+            secondary: {
+                main: colors.yellowCorporate,
+                dark: colors.yellowHover,
+            },
+            error: {
+                main: colors.red,
+                light: colors.redLight,
+            },
+            success: {
+                main: colors.green,
+                light: colors.greenLight,
+            },
+            info: {
+                main: colors.blue,
+                light: colors.blueLight,
+            },
+            background: {
+                default: colors.white,
+            },
+            text: {
+                primary: colors.almostBlack,
+                secondary: colors.greyText,
+                disabled: colors.greyBorderButtons,
+            },
+        },
+        breakpoints: {
+            values: {
+                xs: 0,
+                sm: 576,
+                md: 768,
+                lg: 992,
+                xl: 1200,
+            },
+        },
+        shape: {
+            borderRadius: 2,
+        },
+        typography: {
+            fontFamily: "San Francisco, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', Roboto, Droid Sans, Segoe UI, Helvetica Neue, Helvetica, Arial, sans-serif",
+            h1: {
+                fontSize: 'clamp(2rem, 1.5rem + 2.5vw, 4.5rem)',
+                lineHeight: 1.22222222222,
+                fontWeight: 700,
+            },
+            h2: {
+                fontSize: 'clamp(1.5rem, 1.2rem + 1.5vw, 3rem)',
+                lineHeight: 1.16666666667,
+                fontWeight: 700,
+            },
+            h3: {
+                fontSize: 'clamp(1.125rem, 0.95rem + 0.875vw, 2rem)',
+                lineHeight: 1.25,
+                fontWeight: 700,
+            },
+            h4: {
+                fontSize: 'clamp(0.875rem, 0.75rem + 0.625vw, 1.5rem)',
+                lineHeight: 1.33333333333,
+                fontWeight: 700,
+            },
+            h5: {
+                fontSize: 'clamp(0.875rem, 0.825rem + 0.25vw, 1.125rem)',
+                lineHeight: 1.33333333333,
+                fontWeight: 700,
+            },
+            h6: {
+                fontSize: 'clamp(0.75rem, 0.725rem + 0.125vw, 0.875rem)',
+                lineHeight: 1.42857142857,
+                fontWeight: 700,
+            },
+            subtitle1: {
+                fontSize: 'clamp(1.125rem, 1rem + 0.625vw, 1.75rem)',
+                lineHeight: 1.28571428571,
+                fontWeight: 400,
+            },
+            subtitle2: {
+                fontSize: 'clamp(0.875rem, 0.75rem + 0.625vw, 1.5rem)',
+                lineHeight: 1.33333333333,
+                fontWeight: 400,
+            },
+            button: __assign({}, typography.bodyRegular),
+            body1: __assign(__assign({}, typography.bodyRegular), { color: colors.almostBlack }),
+            body2: __assign(__assign({}, typography.bodySmall), { color: colors.almostBlack }),
+            caption: __assign({}, typography.bodySmall),
+        },
+        components: {
+            MuiLoadingButton: {
+                defaultProps: {
+                    variant: 'contained',
+                    loadingPosition: 'start',
+                },
+                styleOverrides: {
+                    // fix indicator position for not fullWidth loading button
+                    loadingIndicator: {
+                        position: 'relative',
+                    },
+                    loadingIndicatorStart: {
+                        left: -10,
+                    },
+                    loadingIndicatorEnd: {
+                        right: -10,
+                    },
+                },
+            },
+            MuiButton: {
+                defaultProps: {
+                    disableElevation: true,
+                    variant: 'contained',
+                },
+                styleOverrides: {
+                    root: {
+                        textTransform: 'none',
+                        '&[disabled]': {
+                            backgroundColor: colors.greyBackground,
+                            borderColor: colors.greyBackground,
+                            color: colors.greyBorderButtons,
+                        },
+                    },
+                    sizeSmall: __assign({}, typography.bodySmall),
+                    sizeLarge: __assign({}, typography.bodyLarge),
+                    contained: {
+                        padding: '10px 25px',
+                    },
+                    containedPrimary: {
+                        backgroundColor: colors.yellowCorporate,
+                        color: colors.black,
+                        '&:hover': {
+                            backgroundColor: colors.yellowHover,
+                        },
+                    },
+                    outlined: {
+                        padding: '9px 24px',
+                    },
+                    outlinedPrimary: {
+                        background: 'none',
+                        color: colors.almostBlack,
+                        borderColor: colors.greyBorderButtons,
+                        '&:hover': {
+                            background: 'none',
+                            borderColor: colors.almostBlack,
+                        },
+                    },
+                    text: {
+                        padding: 0,
+                        color: colors.blue,
+                        minWidth: 0,
+                        borderRadius: 0,
+                        '&:hover': {
+                            background: 'none',
+                            marginBottom: -1,
+                            borderBottomWidth: 1,
+                            borderBottomStyle: 'solid',
+                            borderBottomColor: colors.blue,
+                        },
+                        '&[disabled]': {
+                            background: 'none',
+                            color: colors.almostBlack,
+                        },
+                    },
+                },
+            },
+            MuiTextField: {
+                defaultProps: {
+                    variant: 'standard',
+                    fullWidth: true,
+                },
+                styleOverrides: {
+                    root: {
+                        paddingBottom: spacing(2),
+                    },
+                },
+            },
+            MuiInputLabel: {
+                styleOverrides: {
+                    root: {
+                        color: colors.greyBorderButtons,
+                        '&.MuiInputLabel-standard': __assign(__assign({}, typography.bodyRegular), { transform: 'translate(0, 25px) scale(1)' }),
+                        '&.Mui-focused': {
+                            color: colors.greyText,
+                        },
+                        '&.Mui-error': {
+                            color: colors.greyBorderButtons,
+                        },
+                    },
+                    shrink: {
+                        color: colors.greyText,
+                        '&.MuiInputLabel-standard': {
+                            transform: 'translate(0, 0) scale(0.85)',
+                        },
+                        '&.Mui-error': {
+                            color: colors.greyText,
+                        },
+                    },
+                },
+            },
+            MuiInput: {
+                styleOverrides: {
+                    root: __assign(__assign({}, typography.bodyRegular), { '&.Mui-error:not(.Mui-focused):after': {
+                            borderWidth: 1,
+                        } }),
+                    underline: {
+                        '&:before': {
+                            borderColor: colors.greyText,
+                        },
+                        '&.Mui-disabled:before': {
+                            borderBottomStyle: 'solid',
+                        },
+                        '&:hover:not(.Mui-disabled):before': {
+                            borderWidth: 1,
+                        },
+                    },
+                    input: {
+                        padding: '5px 0 4px',
+                    },
+                },
+            },
+            MuiFormHelperText: {
+                defaultProps: {
+                    variant: 'standard',
+                },
+                styleOverrides: {
+                    root: {
+                        minHeight: typography.bodySmall.lineHeight,
+                    },
+                },
+            },
+            MuiRadio: {
+                styleOverrides: {
+                    root: {
+                        color: colors.greyText,
+                        '&.Mui-disabled': {
+                            color: colors.greyBorderPanels,
+                        },
+                    },
+                },
+            },
+            MuiFormControlLabel: {
+                styleOverrides: {
+                    root: {
+                        '&:not(.Mui-disabled):hover .MuiRadio-root, :not(.Mui-disabled):hover .MuiCheckbox-root': {
+                            backgroundColor: colors.almostBlackAlpha10,
+                        },
+                    },
+                },
+            },
+            MuiCheckbox: {
+                styleOverrides: {
+                    root: {
+                        color: colors.greyText,
+                        '&.Mui-disabled': {
+                            color: colors.greyBorderPanels,
+                        },
+                    },
+                },
+            },
+            MuiFormControl: {
+                defaultProps: {
+                    variant: 'standard',
+                    fullWidth: true,
+                },
+                styleOverrides: {
+                    root: {
+                        paddingTop: spacing(0.5),
+                    },
+                },
+            },
+            MuiSelect: {
+                defaultProps: {
+                    variant: 'standard',
+                    fullWidth: true,
+                    IconComponent: SelectIcon_1.default,
+                    MenuProps: { sx: { marginTop: 1 } },
+                },
+                styleOverrides: {
+                    icon: {
+                        fill: colors.greyText,
+                        lineHeight: 1,
+                    },
+                    select: {
+                        background: 'none',
+                    },
+                },
+            },
+            MuiMenu: {
+                styleOverrides: {
+                    paper: {
+                        borderColor: colors.greyBorderButtons,
+                        borderWidth: 1,
+                        borderStyle: 'solid',
+                        '&.MuiPaper-elevation': {
+                            boxShadow: '0px 10px 20px rgba(0, 0, 0, 0.1)',
+                        },
+                    },
+                    list: {
+                        padding: spacing(2, 0),
+                    },
+                },
+            },
+            MuiMenuItem: {
+                styleOverrides: {
+                    root: {
+                        padding: spacing(1, 3),
+                        '&.Mui-selected': {
+                            background: 'none',
+                            fontWeight: 700,
+                        },
+                        '&:hover, &.Mui-selected:hover, &.Mui-focusVisible': {
+                            backgroundColor: colors.yellowLight,
+                        },
+                    },
+                },
+            },
+            MuiCssBaseline: {
+                styleOverrides: {
+                    '@global': {
+                        '*:focus': {
+                            outline: 'none',
+                        },
+                        body: {
+                            fallbacks: [{ minHeight: '100%' }],
+                            minHeight: 'fill-available',
+                            // Safari fontSize clamp fix
+                            minWidth: '1vw',
+                        },
+                        html: {
+                            WebkitFontSmoothing: 'auto',
+                            fallbacks: [{ height: '100%' }],
+                            height: 'fill-available',
+                        },
+                        '#gatsby-focus-wrapper,#___gatsby': {
+                            height: '100%',
+                        },
+                    },
+                },
+            },
+            MuiAccordion: {
+                styleOverrides: {
+                    root: {
+                        boxShadow: 'none',
+                        '&$expanded': {
+                            margin: 0,
+                        },
+                        '&:before': {
+                            display: 'none',
+                        },
+                    },
+                },
+            },
+            MuiAccordionSummary: {
+                styleOverrides: {
+                    root: {
+                        minHeight: 0,
+                        margin: 0,
+                        '&$expanded': {
+                            margin: 0,
+                            minHeight: 0,
+                        },
+                    },
+                    content: {
+                        margin: 0,
+                        '&$expanded': {
+                            margin: 0,
+                        },
+                    },
+                },
+            },
+            MuiAccordionDetails: {
+                styleOverrides: {
+                    root: {
+                        display: 'block',
+                    },
+                },
+            },
+            MuiTouchRipple: {
+                styleOverrides: {
+                    root: {
+                        backgroundColor: '#1122ff',
+                    },
+                    child: {
+                        width: '120%',
+                        margin: '-10%',
+                        borderRadius: '2px',
+                    },
+                    childPulsate: {
+                        width: '120%',
+                        margin: '-10%',
+                        borderRadius: '2px',
+                    },
+                    ripple: {
+                        borderRadius: '40px',
+                        opacity: 0.3,
+                        animation: 'none',
+                    },
+                    rippleVisible: {
+                        borderRadius: '40px',
+                        opacity: 0.3,
+                        animation: 'none',
+                    },
+                },
+            },
+        },
+    });
+};
+exports.getDefaultThemeOptions = getDefaultThemeOptions;
+exports.defaultThemeOptions = (0, exports.getDefaultThemeOptions)();
+var exnessTheme = (0, styles_1.createTheme)(exports.defaultThemeOptions);
+exports.exnessRtlTheme = (0, styles_1.createTheme)(__assign(__assign({}, exports.defaultThemeOptions), { direction: 'rtl' }));
+exports.default = exnessTheme;

package/package.json

@@ -0,0 +1,21 @@
+{
+  "name": "@exness-ui/default-theme",
+  "version": "0.0.10",
+  "description": "Exness theme React components",
+  "private": false,
+  "author": {
+    "name": "hxnsui"
+  },
+  "main": "lib/index.js",
+  "typings": "types/index.d.ts",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "dependencies": {
+    "@mui/material": "^5.9.1",
+    "react": "16.8 - 17"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}