@astral/ui 0.1.0 → 0.1.1

package/esm/src/theme/baseTheme.d.ts

@@ -0,0 +1,27 @@
+import { Palette as MuiPalette, Theme as MuiTheme, PaletteColor, ThemeOptions } from '@mui/material/styles';
+import { TypographyThemeOptions } from './typography';
+import { Color } from './palette';
+import { FontsUrls } from './components';
+import { Brand } from './constants';
+import { Elevation } from './elevation';
+import { Shape } from './shape';
+export declare type Palette = Omit<MuiPalette, 'grey'> & {
+    red: Color;
+    green: Color;
+    yellow: Color;
+    grey: Color;
+    primary: PaletteColor & Color;
+};
+export declare type Theme = Omit<MuiTheme, 'shadows' | 'palette' | 'shape' | 'typography'> & {
+    elevation: Elevation;
+    palette: Palette;
+    shape: Shape;
+    typography: TypographyThemeOptions;
+};
+declare type CreateThemeParams = {
+    brand: Brand;
+    options?: ThemeOptions;
+    fontsUrls: FontsUrls;
+};
+export declare const createTheme: ({ brand, options, fontsUrls, }: CreateThemeParams) => Theme;
+export {};

package/esm/src/theme/baseTheme.js

@@ -0,0 +1,19 @@
+import { createTheme as createMuiTheme, responsiveFontSizes, } from '@mui/material/styles';
+import { merge } from 'lodash-es';
+import { typography } from './typography';
+import { getPalette } from './palette';
+import { getComponents } from './components';
+import { SPACING } from './constants';
+import { elevation } from './elevation';
+import { shape } from './shape';
+export var createTheme = function (_a) {
+    var brand = _a.brand, options = _a.options, fontsUrls = _a.fontsUrls;
+    var themeOptions = {
+        typography: typography,
+        spacing: SPACING,
+        palette: getPalette(brand),
+        components: getComponents(fontsUrls),
+    };
+    var muiTheme = responsiveFontSizes(createMuiTheme(merge({}, themeOptions, options)));
+    return merge(muiTheme, { elevation: elevation, shape: shape });
+};

package/esm/src/theme/components.d.ts

@@ -0,0 +1,20 @@
+import { Components } from '@mui/material';
+export declare type FontsUrls = {
+    bold: {
+        woff: string;
+        woff2: string;
+    };
+    light: {
+        woff: string;
+        woff2: string;
+    };
+    medium: {
+        woff: string;
+        woff2: string;
+    };
+    regular: {
+        woff: string;
+        woff2: string;
+    };
+};
+export declare const getComponents: (fontUrls: FontsUrls) => Components;

package/esm/src/theme/components.js

@@ -0,0 +1,24 @@
+var getMuiCssBaseline = function (fontUrls) { return ({
+    styleOverrides: "\n    @font-face {\n      font-family: 'Ubuntu';\n      font-style: 'normal';\n      font-weight: 300;\n      font-display: swap;\n      src: url(" + fontUrls.light.woff2 + ") format('woff2'), url(" + fontUrls.light.woff + ") format('woff');\n    }\n    @font-face {\n      font-family: 'Ubuntu';\n      font-style: 'normal';\n      font-weight: 400;\n      font-display: swap;\n      src: url(" + fontUrls.regular.woff2 + ") format('woff2'), url(" + fontUrls.regular.woff + ") format('woff');\n    }\n    @font-face {\n      font-family: 'Ubuntu';\n      font-style: 'normal';\n      font-weight: 500;\n      font-display: swap;\n      src: url(" + fontUrls.medium.woff2 + ") format('woff2'), url(" + fontUrls.medium.woff + ") format('woff');\n    }\n    @font-face {\n      font-family: 'Ubuntu';\n      font-style: 'normal';\n      font-weight: 700;\n      font-display: swap;\n      src: url(" + fontUrls.bold.woff2 + ") format('woff2'), url(" + fontUrls.bold.woff + ") format('woff');\n    }\n  ",
+}); };
+var getMuiTypography = function () { return ({
+    variants: [
+        {
+            props: { variant: 'button' },
+            style: {
+                textTransform: 'capitalize',
+            },
+        },
+    ],
+    defaultProps: {
+        // TODO: необходимо кастомизировать типы Components['MuiTypography']
+        variantMapping: {
+            link: 'a',
+            code: 'code',
+        },
+    },
+}); };
+export var getComponents = function (fontUrls) { return ({
+    MuiCssBaseline: getMuiCssBaseline(fontUrls),
+    MuiTypography: getMuiTypography(),
+}); };

package/esm/src/theme/constants.d.ts

@@ -0,0 +1,9 @@
+export declare enum Brand {
+    DEFAULT = "DEFAULT",
+    EDO = "EDO",
+    AO5 = "AO5",
+    OFD = "OFD",
+    SIGN = "SIGN",
+    LKP = "LKP"
+}
+export declare const SPACING = 4;

package/esm/src/theme/constants.js

@@ -0,0 +1,10 @@
+export var Brand;
+(function (Brand) {
+    Brand["DEFAULT"] = "DEFAULT";
+    Brand["EDO"] = "EDO";
+    Brand["AO5"] = "AO5";
+    Brand["OFD"] = "OFD";
+    Brand["SIGN"] = "SIGN";
+    Brand["LKP"] = "LKP";
+})(Brand || (Brand = {}));
+export var SPACING = 4;

package/esm/src/theme/elevation.d.ts

@@ -0,0 +1,8 @@
+export declare type Elevation = {
+    100: string;
+    200: string;
+    300: string;
+    400: string;
+    500: string;
+};
+export declare const elevation: Elevation;

package/esm/src/theme/elevation.js

@@ -0,0 +1,7 @@
+export var elevation = {
+    100: 'box-shadow: 0px 0px 1px 0px #072D574F; box-shadow: 0px 1px 1px 0px #072D5740;',
+    200: 'box-shadow: 0px 0px 1px 0px #072D574F; box-shadow: 0px 3px 5px 0px #072D5733;',
+    300: 'box-shadow: 0px 0px 1px 0px #072D574F; box-shadow: 0px 8px 12px 0px #072D5726;',
+    400: 'box-shadow: 0px 0px 1px 0px #072D574F; box-shadow: 0px 10px 18px 0px #072D5726;',
+    500: 'box-shadow: 0px 0px 1px 0px #072D574F; box-shadow: 0px 18px 28px 0px #072D5726;',
+};

package/esm/src/theme/index.d.ts

@@ -0,0 +1,5 @@
+export * from './baseTheme';
+export * from './palette';
+export * from './constants';
+export * from './elevation';
+export * from './shape';

package/esm/src/theme/index.js

@@ -0,0 +1,5 @@
+export * from './baseTheme';
+export * from './palette';
+export * from './constants';
+export * from './elevation';
+export * from './shape';

package/esm/src/theme/palette/brandPalette.d.ts

@@ -0,0 +1,15 @@
+import { Brand } from '../constants';
+declare type BrandColors = {
+    secondary: string;
+    900: string;
+    800: string;
+    700: string;
+    600: string;
+    500: string;
+    400: string;
+    300: string;
+    200: string;
+    100: string;
+};
+export declare const brandPalette: Record<Brand, BrandColors>;
+export {};

package/esm/src/theme/palette/brandPalette.js

@@ -0,0 +1,82 @@
+var _a;
+import { Brand } from '../constants';
+var defaultBrandPalette = {
+    secondary: '#55B8F0',
+    900: '#0F52B8',
+    800: '#2165CC',
+    700: '#1874FF',
+    600: '#2684FF',
+    500: '#4C9AFF',
+    400: '#70AEFF',
+    300: '#94C2FF',
+    200: '#C5DCFF',
+    100: '#E1EDFF',
+};
+var edoPalette = {
+    secondary: '#5653FF',
+    900: '#5D3FD4',
+    800: '#6746EB',
+    700: '#8566FF',
+    600: '#9D85FF',
+    500: '#9D85FF',
+    400: '#B29EFF',
+    300: '#C2B2FF',
+    200: '#E0D9FF',
+    100: '#EFEBFF',
+};
+var ao5Palette = {
+    secondary: '#14A5D3',
+    900: '#0068B2',
+    800: '#0074C6',
+    700: '#0989E3',
+    600: '#2195E6',
+    500: '#3AA1E9',
+    400: '#52ACEB',
+    300: '#84C4F1',
+    200: '#C1E2F8',
+    100: '#DFF0FB',
+};
+var ofdPalette = {
+    secondary: '#22BDEE',
+    900: '#1F78D6',
+    800: '#2285EE',
+    700: '#46A0FF',
+    600: '#58A9FF',
+    500: '#6BB3FF',
+    400: '#7DBCFF',
+    300: '#A2CFFF',
+    200: '#D1E7FF',
+    100: '#E7F3FF',
+};
+var signPalette = {
+    secondary: '#4099AC',
+    900: '#325D89',
+    800: '#376798',
+    700: '#4D86BF',
+    600: '#5E92C5',
+    500: '#719ECC',
+    400: '#82AAD2',
+    300: '#A6C2DF',
+    200: '#D3E1EF',
+    100: '#E8EFF7',
+};
+var lkpPalette = {
+    secondary: '#00BDB2',
+    900: '#009E71',
+    800: '#00B07E',
+    700: '#2CC89B',
+    600: '#41CDA5',
+    500: '#56D3AF',
+    400: '#6BD8B9',
+    300: '#95E3CD',
+    200: '#CAF1E6',
+    100: '#E3F8F2',
+};
+export var brandPalette = (_a = {},
+    _a[Brand.DEFAULT] = defaultBrandPalette,
+    _a[Brand.AO5] = ao5Palette,
+    _a[Brand.EDO] = edoPalette,
+    _a[Brand.OFD] = ofdPalette,
+    _a[Brand.SIGN] = signPalette,
+    _a[Brand.LKP] = lkpPalette,
+    _a);

package/esm/src/theme/palette/index.d.ts

@@ -0,0 +1,2 @@
+export * from './brandPalette';
+export * from './palette';

package/esm/src/theme/palette/index.js

@@ -0,0 +1,2 @@
+export * from './brandPalette';
+export * from './palette';

package/esm/src/theme/palette/palette.d.ts

@@ -0,0 +1,29 @@
+import { PaletteOptions as MuiPaletteOptions, PaletteColorOptions } from '@mui/material';
+import { TypeBackground } from '@mui/material/styles/createPalette';
+import { Brand } from '../constants';
+export declare type Color = {
+    900: string;
+    800: string;
+    700: string;
+    600: string;
+    500: string;
+    400: string;
+    300: string;
+    200: string;
+    100: string;
+};
+export declare type PrimaryColorOptions = PaletteColorOptions & Color;
+declare type Background = TypeBackground & {
+    element: string;
+    elementHover: string;
+};
+declare type PaletteOptions = MuiPaletteOptions & {
+    red: Color;
+    green: Color;
+    yellow: Color;
+    grey: Color;
+    primary: PrimaryColorOptions;
+    background: Background;
+};
+export declare const getPalette: (brand?: Brand) => PaletteOptions;
+export {};

package/esm/src/theme/palette/palette.js

@@ -0,0 +1,104 @@
+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);
+};
+import { Brand } from '../constants';
+import { brandPalette } from './brandPalette';
+export var getPalette = function (brand) {
+    if (brand === void 0) { brand = Brand.DEFAULT; }
+    var brandColors = brandPalette[brand];
+    return {
+        red: {
+            900: '#E64343',
+            800: '#F24646',
+            700: '#F35959',
+            600: '#F67E7E',
+            500: '#F79090',
+            400: '#F8A3A3',
+            300: '#FAB5B5',
+            200: '#FCDADA',
+            100: '#FEEDED',
+        },
+        green: {
+            900: '#008055',
+            800: '#00875A',
+            700: '#19936A',
+            600: '#4DAB8C',
+            500: '#66B79C',
+            400: '#80C3AC',
+            300: '#99CFBD',
+            200: '#CCE7DE',
+            100: '#E6F3EF',
+        },
+        yellow: {
+            900: '#ED8000',
+            800: '#F98700',
+            700: '#FA961F',
+            600: '#FBAB4D',
+            500: '#FBB766',
+            400: '#FDCF99',
+            300: '#FDDBB2',
+            200: '#FBE6CC',
+            100: '#FEF3E6',
+        },
+        primary: __assign({ main: brandColors[800], dark: brandColors[900], contrastText: '#FFF' }, brandColors),
+        secondary: {
+            main: brandColors.secondary,
+            dark: brandColors[900],
+            contrastText: '#FFF',
+        },
+        get success() {
+            return {
+                light: this.green[100],
+                main: this.green[600],
+                dark: this.green[800],
+                contrastText: '#FFF',
+            };
+        },
+        get warning() {
+            return {
+                light: this.yellow[100],
+                main: this.yellow[600],
+                dark: this.yellow[800],
+                contrastText: '#FFF',
+            };
+        },
+        get error() {
+            return {
+                light: this.red[100],
+                main: this.red[600],
+                dark: this.red[800],
+                contrastText: '#FFF',
+            };
+        },
+        text: {
+            primary: '#072D57',
+            secondary: '#072D57',
+            disabled: '#99A9BA',
+        },
+        grey: {
+            900: '#072D57',
+            800: '#1D3F66',
+            700: '#557192',
+            600: '#778DA8',
+            500: '#99A9BA',
+            400: '#B7C2CE',
+            300: '#DDE2E8',
+            200: '#EBEEF1',
+            100: '#F0F4F7',
+        },
+        background: {
+            default: '#FFF',
+            paper: '#FFF',
+            element: '#FAFBFC',
+            elementHover: '#EBECF0',
+        },
+    };
+};

package/esm/src/theme/shape.d.ts

@@ -0,0 +1,6 @@
+export declare type Shape = {
+    small: string;
+    medium: string;
+    large: string;
+};
+export declare const shape: Shape;

package/esm/src/theme/shape.js

@@ -0,0 +1,5 @@
+export var shape = {
+    small: '3px',
+    medium: '6px',
+    large: '9px',
+};

package/esm/src/theme/typography.d.ts

@@ -0,0 +1,19 @@
+import { Typography } from '@mui/material/styles/createTypography';
+import { CSSProperties } from 'react';
+declare type CustomTypographyVariantStyle = {
+    fontSize: CSSProperties['fontSize'];
+    fontWeight: CSSProperties['fontWeight'];
+};
+export declare type TypographyThemeOptions = Typography & {
+    h7: CustomTypographyVariantStyle;
+    h8: CustomTypographyVariantStyle;
+    h9: CustomTypographyVariantStyle;
+    ui: CustomTypographyVariantStyle;
+    link: CustomTypographyVariantStyle;
+    pointer: CustomTypographyVariantStyle;
+    small: CustomTypographyVariantStyle;
+    code: CustomTypographyVariantStyle;
+};
+export declare const pxToRem: (fontSize: number, htmlFontSize?: number) => string;
+export declare const typography: Partial<TypographyThemeOptions>;
+export {};

package/esm/src/theme/typography.js

@@ -0,0 +1,108 @@
+var HTML_FONT_SIZE = 14;
+// Т.к. нет досутпа к теме, написал функцию для конвертации px в rem
+export var pxToRem = function (fontSize, htmlFontSize) {
+    if (htmlFontSize === void 0) { htmlFontSize = HTML_FONT_SIZE; }
+    return fontSize / htmlFontSize + "rem";
+};
+export var typography = {
+    fontSize: 14,
+    htmlFontSize: 14,
+    fontWeightLight: 300,
+    fontWeightRegular: 400,
+    fontWeightMedium: 500,
+    fontWeightBold: 700,
+    fontFamily: ['Ubuntu', 'sans-serif'].join(','),
+    get h1() {
+        return {
+            fontSize: pxToRem(35, this.htmlFontSize),
+            fontWeight: this.fontWeightMedium,
+        };
+    },
+    get h2() {
+        return {
+            fontSize: pxToRem(29, this.htmlFontSize),
+            fontWeight: this.fontWeightMedium,
+        };
+    },
+    get h3() {
+        return {
+            fontSize: pxToRem(24, this.htmlFontSize),
+            fontWeight: this.fontWeightMedium,
+        };
+    },
+    get h4() {
+        return {
+            fontSize: pxToRem(20, this.htmlFontSize),
+            fontWeight: this.fontWeightMedium,
+        };
+    },
+    get h5() {
+        return {
+            fontSize: pxToRem(16, this.htmlFontSize),
+            fontWeight: this.fontWeightMedium,
+        };
+    },
+    get h6() {
+        return {
+            fontSize: pxToRem(14, this.htmlFontSize),
+            fontWeight: this.fontWeightMedium,
+        };
+    },
+    get h7() {
+        return {
+            fontSize: pxToRem(12, this.htmlFontSize),
+            fontWeight: this.fontWeightMedium,
+        };
+    },
+    get h8() {
+        return {
+            fontSize: pxToRem(12, this.htmlFontSize),
+            fontWeight: this.fontWeightMedium,
+        };
+    },
+    get h9() {
+        return {
+            fontSize: pxToRem(11, this.htmlFontSize),
+            fontWeight: this.fontWeightBold,
+        };
+    },
+    get button() {
+        return {
+            fontSize: pxToRem(14, this.htmlFontSize),
+            fontWeight: this.fontWeightMedium,
+        };
+    },
+    get ui() {
+        return {
+            fontSize: pxToRem(14, this.htmlFontSize),
+            fontWeight: this.fontWeightRegular,
+        };
+    },
+    get link() {
+        return {
+            fontSize: pxToRem(14, this.htmlFontSize),
+            fontWeight: this.fontWeightRegular,
+        };
+    },
+    get pointer() {
+        return {
+            fontSize: pxToRem(12, this.htmlFontSize),
+            fontWeight: this.fontWeightMedium,
+        };
+    },
+    get small() {
+        return {
+            fontSize: pxToRem(12, this.htmlFontSize),
+            fontWeight: this.fontWeightRegular,
+        };
+    },
+    get code() {
+        return {
+            fontSize: pxToRem(12, this.htmlFontSize),
+            fontWeight: this.fontWeightLight,
+        };
+    },
+    body1: {
+        fontSize: '1rem',
+    },
+};

package/package.json

@@ -1,23 +1,13 @@
 {
   "name": "@astral/ui",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "type": "module",
-  "main": "./dist/esm/index.js",
   "source": "./src/index.ts",
-  "module": "./dist/esm/index.js",
-  "types": "./dist/esm/index.d.ts",
-  "exports": {
-    "require": "./dist/cjs/index.js",
-    "default": "./dist/esm/index.js"
-  },
   "jest": {
     "moduleNameMapper": {
       "^lodash-es$": "lodash"
     }
   },
-  "files": [
-    "dist"
-  ],
   "dependencies": {
     "@emotion/react": "11.5.0",
     "@emotion/styled": "11.3.0",
@@ -38,5 +28,9 @@
   "bugs": {
     "url": "https://github.com/kaluga-astral/frontend/issues"
   },
-  "keywords": []
+  "keywords": [],
+  "sideEffects": false,
+  "main": "./cjs/index.js",
+  "types": "./esm/index.d.ts",
+  "module": "./esm/index.js"
 }