@m4l/styles 0.0.48 → 1.0.0

package/theme/palette.d.ts

@@ -1,3 +1,4 @@
+import { Color } from '@mui/material';
 export declare type ColorSchema = 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error';
 export declare type PatronusColors = 'patronusBlue' | 'crayonBlue' | 'middleYellow' | 'acidGreen' | 'grassGreen' | 'desertBeige' | 'turquiBlue' | 'blazeOrange' | 'flameRed' | 'coolGrey' | 'brown' | 'marbleLight' | 'onyx' | 'mint' | 'oxford';
 export declare type PatronusOpacityColors = 'patronus' | 'turqui' | 'grass' | 'brown' | 'beige' | 'orange' | 'cool' | 'marbel' | 'mint' | 'oxford';
@@ -24,26 +25,54 @@ export interface PatronusOpacityOptions {
 export declare type PatronusConstantColors = Record<PatronusColors, PatronusColorOptions>;
 export declare const PATRONUSCOLORS: PatronusConstantColors;
 export declare const OPACITYCOLORS: Record<PatronusOpacityColors, PatronusOpacityOptions>;
-export declare const GREY: {
-    0: string;
-    100: string;
-    200: string;
-    300: string;
-    400: string;
-    500: string;
-    600: string;
-    700: string;
-    800: string;
-    900: string;
-    5008: string;
-    50012: string;
-    50016: string;
-    50024: string;
-    50032: string;
-    50048: string;
-    50056: string;
-    50080: string;
+export declare const PRIMARY: {
+    lighter: string;
+    light: string;
+    main: string;
+    dark: string;
+    darker: string;
+    contrastText: string;
 };
+export declare const SECONDARY: {
+    lighter: string;
+    light: string;
+    main: string;
+    dark: string;
+    darker: string;
+};
+export declare const INFO: {
+    lighter: string;
+    light: string;
+    main: string;
+    dark: string;
+    darker: string;
+    opacity: string;
+};
+export declare const SUCCESS: {
+    lighter: string;
+    light: string;
+    main: string;
+    dark: string;
+    darker: string;
+    opacity: string;
+};
+export declare const WARNING: {
+    lighter: string;
+    light: string;
+    main: string;
+    dark: string;
+    darker: string;
+    opacity: string;
+};
+export declare const ERROR: {
+    lighter: string;
+    light: string;
+    main: string;
+    dark: string;
+    darker: string;
+    opacity: string;
+};
+export declare const GREY: Color;
 export interface StateDefault {
     normal: string;
     hover: string;
@@ -74,340 +103,129 @@ export declare const STATEDEFAULT: {
         transition: string;
     };
 };
-export declare const palette: {
-    readonly light: {
-        readonly mode: "light";
-        readonly text: {
-            readonly primary: string;
-            readonly secondary: string;
-            readonly disabled: string;
-            readonly bgPrimary: string;
-        };
-        readonly background: {
-            readonly paper: "#fff0";
-            readonly default: string;
-            readonly neutral: string;
-            readonly background: string;
-            readonly header: string;
-        };
-        readonly divider: string;
-        readonly grid: {
-            readonly sectionHeader: "#F6F7F9";
-            readonly divider: "#EDEFF2";
-            readonly rowHover: "#FAFBFC";
-        };
-        readonly common: {
-            black: string;
-            white: string;
-        };
-        readonly primary: {
-            lighter: string;
-            light: string;
-            main: string;
-            dark: string;
-            darker: string;
-            contrastText: string;
-        };
-        readonly state: {
-            info: {
-                normal: string;
-                hover: string;
-            };
-            success: {
-                normal: string;
-                hover: string;
-            };
-            error: {
-                normal: string;
-                hover: string;
-            };
-            warning: {
-                normal: string;
-                hover: string;
-            };
-            skeleton: {
-                default: string;
-                transition: string;
-            };
-        };
-        readonly patronus: {
-            patronusBlue: PatronusColorOptions;
-            crayonBlue: PatronusColorOptions;
-            middleYellow: PatronusColorOptions;
-            acidGreen: PatronusColorOptions;
-            grassGreen: PatronusColorOptions;
-            desertBeige: PatronusColorOptions;
-            turquiBlue: PatronusColorOptions;
-            blazeOrange: PatronusColorOptions;
-            flameRed: PatronusColorOptions;
-            coolGrey: PatronusColorOptions;
-            brown: PatronusColorOptions;
-            marbleLight: PatronusColorOptions;
-            onyx: PatronusColorOptions;
-            mint: PatronusColorOptions;
-            oxford: PatronusColorOptions;
-        };
-        readonly opacity: {
-            brown: PatronusOpacityOptions;
-            mint: PatronusOpacityOptions;
-            oxford: PatronusOpacityOptions;
-            patronus: PatronusOpacityOptions;
-            turqui: PatronusOpacityOptions;
-            grass: PatronusOpacityOptions;
-            beige: PatronusOpacityOptions;
-            orange: PatronusOpacityOptions;
-            cool: PatronusOpacityOptions;
-            marbel: PatronusOpacityOptions;
-        };
-        readonly secondary: {
-            contrastText: string;
-            lighter: string;
-            light: string;
-            main: string;
-            dark: string;
-            darker: string;
-        };
-        readonly info: {
-            contrastText: string;
-            lighter: string;
-            light: string;
-            main: string;
-            dark: string;
-            darker: string;
-            opacity: string;
-        };
-        readonly success: {
-            contrastText: string;
-            lighter: string;
-            light: string;
-            main: string;
-            dark: string;
-            darker: string;
-            opacity: string;
-        };
-        readonly warning: {
-            contrastText: string;
-            lighter: string;
-            light: string;
-            main: string;
-            dark: string;
-            darker: string;
-            opacity: string;
-        };
-        readonly error: {
-            contrastText: string;
-            lighter: string;
-            light: string;
-            main: string;
-            dark: string;
-            darker: string;
-            opacity: string;
-        };
-        readonly grey: {
-            0: string;
-            100: string;
-            200: string;
-            300: string;
-            400: string;
-            500: string;
-            600: string;
-            700: string;
-            800: string;
-            900: string;
-            5008: string;
-            50012: string;
-            50016: string;
-            50024: string;
-            50032: string;
-            50048: string;
-            50056: string;
-            50080: string;
-        };
-        readonly gradients: {
-            primary: string;
-            info: string;
-            success: string;
-            warning: string;
-            error: string;
-        };
-        readonly chart: {
-            violet: string[];
-            blue: string[];
-            green: string[];
-            yellow: string[];
-            red: string[];
-        };
-        readonly action: {
-            hoverOpacity: number;
-            disabledOpacity: number;
-        };
+export declare const COMMON: {
+    common: {
+        black: string;
+        white: string;
     };
-    readonly dark: {
-        readonly mode: "dark";
-        readonly text: {
-            readonly primary: string;
-            readonly secondary: string;
-            readonly disabled: string;
-            readonly bgPrimary: string;
-        };
-        readonly background: {
-            readonly paper: "#fff0";
-            readonly default: string;
-            readonly neutral: string;
-            readonly background: string;
-            readonly header: string;
-        };
-        readonly divider: string;
-        readonly grid: {
-            readonly sectionHeader: "#29313A";
-            readonly divider: "#3E464F";
-            readonly rowHover: "#1F262F";
-        };
-        readonly common: {
-            black: string;
-            white: string;
-        };
-        readonly primary: {
-            lighter: string;
-            light: string;
-            main: string;
-            dark: string;
-            darker: string;
-            contrastText: string;
-        };
-        readonly state: {
-            info: {
-                normal: string;
-                hover: string;
-            };
-            success: {
-                normal: string;
-                hover: string;
-            };
-            error: {
-                normal: string;
-                hover: string;
-            };
-            warning: {
-                normal: string;
-                hover: string;
-            };
-            skeleton: {
-                default: string;
-                transition: string;
-            };
-        };
-        readonly patronus: {
-            patronusBlue: PatronusColorOptions;
-            crayonBlue: PatronusColorOptions;
-            middleYellow: PatronusColorOptions;
-            acidGreen: PatronusColorOptions;
-            grassGreen: PatronusColorOptions;
-            desertBeige: PatronusColorOptions;
-            turquiBlue: PatronusColorOptions;
-            blazeOrange: PatronusColorOptions;
-            flameRed: PatronusColorOptions;
-            coolGrey: PatronusColorOptions;
-            brown: PatronusColorOptions;
-            marbleLight: PatronusColorOptions;
-            onyx: PatronusColorOptions;
-            mint: PatronusColorOptions;
-            oxford: PatronusColorOptions;
-        };
-        readonly opacity: {
-            brown: PatronusOpacityOptions;
-            mint: PatronusOpacityOptions;
-            oxford: PatronusOpacityOptions;
-            patronus: PatronusOpacityOptions;
-            turqui: PatronusOpacityOptions;
-            grass: PatronusOpacityOptions;
-            beige: PatronusOpacityOptions;
-            orange: PatronusOpacityOptions;
-            cool: PatronusOpacityOptions;
-            marbel: PatronusOpacityOptions;
-        };
-        readonly secondary: {
-            contrastText: string;
-            lighter: string;
-            light: string;
-            main: string;
-            dark: string;
-            darker: string;
-        };
-        readonly info: {
-            contrastText: string;
-            lighter: string;
-            light: string;
-            main: string;
-            dark: string;
-            darker: string;
-            opacity: string;
-        };
-        readonly success: {
-            contrastText: string;
-            lighter: string;
-            light: string;
-            main: string;
-            dark: string;
-            darker: string;
-            opacity: string;
-        };
-        readonly warning: {
-            contrastText: string;
-            lighter: string;
-            light: string;
-            main: string;
-            dark: string;
-            darker: string;
-            opacity: string;
-        };
-        readonly error: {
-            contrastText: string;
-            lighter: string;
-            light: string;
-            main: string;
-            dark: string;
-            darker: string;
-            opacity: string;
+    primary: {
+        lighter: string;
+        light: string;
+        main: string;
+        dark: string;
+        darker: string;
+        contrastText: string;
+    };
+    state: {
+        info: {
+            normal: string;
+            hover: string;
         };
-        readonly grey: {
-            0: string;
-            100: string;
-            200: string;
-            300: string;
-            400: string;
-            500: string;
-            600: string;
-            700: string;
-            800: string;
-            900: string;
-            5008: string;
-            50012: string;
-            50016: string;
-            50024: string;
-            50032: string;
-            50048: string;
-            50056: string;
-            50080: string;
+        success: {
+            normal: string;
+            hover: string;
         };
-        readonly gradients: {
-            primary: string;
-            info: string;
-            success: string;
-            warning: string;
-            error: string;
+        error: {
+            normal: string;
+            hover: string;
         };
-        readonly chart: {
-            violet: string[];
-            blue: string[];
-            green: string[];
-            yellow: string[];
-            red: string[];
+        warning: {
+            normal: string;
+            hover: string;
         };
-        readonly action: {
-            hoverOpacity: number;
-            disabledOpacity: number;
+        skeleton: {
+            default: string;
+            transition: string;
         };
     };
+    patronus: {
+        brown: PatronusColorOptions;
+        patronusBlue: PatronusColorOptions;
+        crayonBlue: PatronusColorOptions;
+        middleYellow: PatronusColorOptions;
+        acidGreen: PatronusColorOptions;
+        grassGreen: PatronusColorOptions;
+        desertBeige: PatronusColorOptions;
+        turquiBlue: PatronusColorOptions;
+        blazeOrange: PatronusColorOptions;
+        flameRed: PatronusColorOptions;
+        coolGrey: PatronusColorOptions;
+        marbleLight: PatronusColorOptions;
+        onyx: PatronusColorOptions;
+        mint: PatronusColorOptions;
+        oxford: PatronusColorOptions;
+    };
+    opacity: {
+        patronus: PatronusOpacityOptions;
+        turqui: PatronusOpacityOptions;
+        grass: PatronusOpacityOptions;
+        brown: PatronusOpacityOptions;
+        mint: PatronusOpacityOptions;
+        oxford: PatronusOpacityOptions;
+        beige: PatronusOpacityOptions;
+        orange: PatronusOpacityOptions;
+        cool: PatronusOpacityOptions;
+        marbel: PatronusOpacityOptions;
+    };
+    secondary: {
+        contrastText: string;
+        lighter: string;
+        light: string;
+        main: string;
+        dark: string;
+        darker: string;
+    };
+    info: {
+        contrastText: string;
+        lighter: string;
+        light: string;
+        main: string;
+        dark: string;
+        darker: string;
+        opacity: string;
+    };
+    success: {
+        contrastText: string;
+        lighter: string;
+        light: string;
+        main: string;
+        dark: string;
+        darker: string;
+        opacity: string;
+    };
+    warning: {
+        contrastText: string;
+        lighter: string;
+        light: string;
+        main: string;
+        dark: string;
+        darker: string;
+        opacity: string;
+    };
+    error: {
+        contrastText: string;
+        lighter: string;
+        light: string;
+        main: string;
+        dark: string;
+        darker: string;
+        opacity: string;
+    };
+    grey: Color;
+    gradients: {
+        primary: string;
+        info: string;
+        success: string;
+        warning: string;
+        error: string;
+    };
+    chart: {
+        violet: string[];
+        blue: string[];
+        green: string[];
+        yellow: string[];
+        red: string[];
+    };
 };
+export declare const palette: any;
 export default palette;

package/theme/{shadows.86540b18.js → shadows.e0c009ff.js}

@@ -1,5 +1,5 @@
 import { alpha as r } from "@mui/material/styles";
-import { p as a, P as e } from "./palette.0590e8a6.js";
+import { p as a, P as e } from "./palette.287635f2.js";
 const s = a.light.grey[500], o = "#000000", n = (t) => {
   const p = r(t, 0.2), x = r(t, 0.14), $ = r(t, 0.12);
   return [

package/theme/{typography.8878fde5.js → typography.2a9a38a6.js}

@@ -1,122 +1,131 @@
-import { r as e, p as t } from "../utils/getFontValue.88831637.js";
-const i = "Segoe UI, Poppins, sans-serif", g = {
-  fontFamily: i,
+import { createTheme as i } from "@mui/material";
+import "@mui/material/styles";
+import "@mui/material/useMediaQuery";
+import "../utils/getColorPresets.a96a4046.js";
+import "@mui/system";
+import "./defaultThemeOptions.0976e58a.js";
+import "./shadows.e0c009ff.js";
+import "./palette.287635f2.js";
+import { r as t, p as e } from "../utils/getFontValue.88831637.js";
+const n = "Segoe UI, Poppins, sans-serif", g = i(), W = {
+  ...g.typography,
+  fontFamily: n,
   fontWeightRegular: 400,
   fontWeightMedium: 600,
   fontWeightBold: 700,
   h1: {
     fontWeight: 600,
     lineHeight: 1.5,
-    ...e({ sm: 38, md: 40, lg: 40 })
+    ...t({ sm: 38, md: 40, lg: 40 })
   },
   h2: {
     fontWeight: 600,
     lineHeight: 1,
-    ...e({ sm: 40, md: 44, lg: 48 })
+    ...t({ sm: 40, md: 44, lg: 48 })
   },
   h3: {
     fontWeight: 600,
     lineHeight: 1.5,
-    ...e({ sm: 30, md: 32, lg: 32 })
+    ...t({ sm: 30, md: 32, lg: 32 })
   },
   h4: {
     fontWeight: 600,
     lineHeight: 1.5,
-    ...e({ sm: 20, md: 24, lg: 24 })
+    ...t({ sm: 20, md: 24, lg: 24 })
   },
   h5: {
     fontWeight: 500,
     lineHeight: "28px",
     letterSpacing: "-0.01em",
-    ...e({ sm: 22, md: 24, lg: 24 })
+    ...t({ sm: 22, md: 24, lg: 24 })
   },
   h6: {
     fontWeight: 500,
     lineHeight: "24px",
     letterSpacing: "-0.08em",
-    ...e({ sm: 18, md: 18, lg: 18 })
+    ...t({ sm: 18, md: 18, lg: 18 })
   },
   subtitle: {
     fontWeight: 400,
     lineHeight: "20px",
     letterSpacing: "-0.006em",
-    ...e({ sm: 18, md: 15, lg: 15 })
+    ...t({ sm: 18, md: 15, lg: 15 })
   },
   subtitleDens: {
     fontWeight: 600,
     lineHeight: "24px",
     letterSpacing: "-0.006em",
-    ...e({ sm: 18, md: 15, lg: 15 })
+    ...t({ sm: 18, md: 15, lg: 15 })
   },
   paragraph: {
     fontWeight: 400,
     lineHeight: "16px",
     letterSpacing: "-0.003em",
-    ...e({ sm: 16, md: 13, lg: 13 })
+    ...t({ sm: 16, md: 13, lg: 13 })
   },
   paragraphDens: {
     fontWeight: 600,
     lineHeight: "20px",
     letterSpacing: "-0.003em",
-    ...e({ sm: 16, md: 13, lg: 13 })
+    ...t({ sm: 16, md: 13, lg: 13 })
   },
   subtitle1: {
     fontWeight: 600,
     lineHeight: 1.5,
-    fontSize: t(14)
+    fontSize: e(14)
   },
   subtitle2: {
     fontWeight: 600,
     lineHeight: 1.5,
-    fontSize: t(12)
+    fontSize: e(12)
   },
   body: {
     fontWeight: 400,
     lineHeight: "16px",
-    ...e({ sm: 11, md: 11, lg: 11 })
+    ...t({ sm: 11, md: 11, lg: 11 })
   },
   bodyDens: {
     fontWeight: 600,
     lineHeight: "16px",
-    ...e({ sm: 14, md: 11, lg: 11 })
+    ...t({ sm: 14, md: 11, lg: 11 })
   },
   body0: {
     lineHeight: 1.5,
     fontWeight: 400,
-    fontSize: t(16)
+    fontSize: e(16)
   },
   body1: {
     lineHeight: 1.5,
     fontWeight: 400,
-    fontSize: t(14)
+    fontSize: e(14)
   },
   body2: {
     lineHeight: 1.5,
     fontWeight: 400,
-    fontSize: t(12)
+    fontSize: e(12)
   },
   caption: {
     lineHeight: 1.5,
-    fontSize: t(11)
+    fontSize: e(11)
   },
   overline: {
     fontWeight: 700,
     lineHeight: 1.5,
-    fontSize: t(12),
+    fontSize: e(12),
     textTransform: "uppercase"
   },
   button: {
     fontWeight: 700,
     lineHeight: 24 / 14,
-    fontSize: t(14),
+    fontSize: e(14),
     textTransform: "capitalize"
   },
   action: {
     fontWeight: 600,
     lineHeight: "16px",
-    ...e({ sm: 14, md: 12, lg: 12 })
+    ...t({ sm: 14, md: 12, lg: 12 })
   }
 };
 export {
-  g as t
+  W as t
 };

package/theme/typography.d.ts

@@ -235,4 +235,8 @@ export declare const typography: {
         readonly fontWeight: 600;
         readonly lineHeight: "16px";
     };
+    readonly fontSize: number;
+    readonly fontWeightLight: import("csstype").Property.FontWeight | undefined;
+    readonly htmlFontSize: number;
+    readonly pxToRem: (px: number) => string;
 };