@m4l/styles 0.0.7 → 0.0.9

package/index.js

@@ -1,8 +1,7 @@
-import { alpha as t, useTheme as m } from "@mui/material/styles";
-import { StyledEngineProvider as yr, Theme as fr, ThemeOptions as hr, ThemeProvider as Mr, createTheme as vr, styled as Br } from "@mui/material/styles";
+import { alpha as t, useTheme as R } from "@mui/material/styles";
 import { alpha as n } from "@mui/system";
 import { alpha as F } from "@mui/material";
-import { useResponsive as w } from "@m4l/graphics";
+import { useResponsive as $ } from "@m4l/graphics";
 function c(o, e) {
   return `linear-gradient(to bottom, ${o}, ${e})`;
 }
@@ -139,7 +138,7 @@ const r = {
     80: "#fff0",
     90: "#fff0"
   }
-}, $ = {
+}, A = {
   patronus: {
     4: t(r.patronusBlue[50], 0.04),
     12: t(r.patronusBlue[50], 0.12),
@@ -210,7 +209,7 @@ const r = {
   dark: r.patronusBlue[40],
   darker: r.patronusBlue[20],
   contrastText: r.marbleLight[10]
-}, A = {
+}, T = {
   lighter: "#fff0",
   light: "#fff0",
   main: "#fff0",
@@ -263,39 +262,39 @@ const r = {
   50048: t("#919EAB", 0.48),
   50056: t("#919EAB", 0.56),
   50080: t("#919EAB", 0.8)
-}, T = {
+}, D = {
   primary: c(b.light, b.main),
   info: c(y.light, y.main),
   success: c(f.light, f.main),
   warning: c(h.light, h.main),
   error: c(M.light, M.main)
-}, D = {
+}, I = {
   violet: ["#826AF9", "#9E86FF", "#D0AEFF", "#F7D2FF"],
   blue: ["#2D99FF", "#83CFFF", "#A5F3FF", "#CCFAFF"],
   green: ["#2CD9C5", "#60F1C8", "#A4F7CC", "#C0F2DC"],
   yellow: ["#FFE700", "#FFEF5A", "#FFF7AE", "#FFF3D6"],
   red: ["#FF6C40", "#FF8F6D", "#FFBD98", "#FFF2D4"]
-}, I = {
+}, z = {
   normal: r.crayonBlue[50],
   hover: r.crayonBlue[70]
-}, z = {
+}, G = {
   normal: r.acidGreen[60],
   hover: r.acidGreen[70]
-}, G = {
+}, E = {
   normal: r.flameRed[40],
   hover: r.flameRed[60]
-}, E = {
+}, H = {
   normal: r.flameRed[60],
   hover: r.flameRed[70]
-}, H = {
+}, P = {
   default: t(r.coolGrey[50], 0.24),
   transition: t(r.coolGrey[50], 0.08)
 }, l = {
-  info: { ...I },
-  success: { ...z },
-  error: { ...G },
-  warning: { ...E },
-  skeleton: { ...H }
+  info: { ...z },
+  success: { ...G },
+  error: { ...E },
+  warning: { ...H },
+  skeleton: { ...P }
 }, k = {
   common: { black: "#000", white: "#fff" },
   primary: { ...b },
@@ -303,15 +302,15 @@ const r = {
     ...l
   },
   patronus: { ...r },
-  opacity: { ...$ },
-  secondary: { ...A, contrastText: "#fff" },
+  opacity: { ...A },
+  secondary: { ...T, contrastText: "#fff" },
   info: { ...y, contrastText: "#fff" },
   success: { ...f, contrastText: x[800] },
   warning: { ...h, contrastText: x[800] },
   error: { ...M, contrastText: "#fff" },
   grey: x,
-  gradients: T,
-  chart: D,
+  gradients: D,
+  chart: I,
   divider: x[50024],
   action: {
     hoverOpacity: 0.08,
@@ -321,7 +320,11 @@ const r = {
   light: {
     ...k,
     mode: "light",
-    text: { primary: r.ashBlak[10], secondary: r.coolGrey[40], disabled: r.coolGrey[10] },
+    text: {
+      primary: r.ashBlak[10],
+      secondary: r.coolGrey[40],
+      disabled: r.coolGrey[10]
+    },
     background: {
       paper: "#fff0",
       default: r.marbleLight[10],
@@ -333,7 +336,11 @@ const r = {
   dark: {
     ...k,
     mode: "dark",
-    text: { primary: r.marbleLight[30], secondary: r.coolGrey[20], disabled: r.coolGrey[50] },
+    text: {
+      primary: r.marbleLight[30],
+      secondary: r.coolGrey[20],
+      disabled: r.coolGrey[50]
+    },
     background: {
       paper: "#fff0",
       default: r.ashBlak[10],
@@ -388,15 +395,19 @@ const r = {
     darker: r.blazeOrange[20],
     contrastText: r.marbleLight[10]
   }
-], P = g[0], W = g[1], _ = g[2], q = g[3], N = g[4];
+], C = g[0], W = g[1], _ = g[2], q = g[3], N = g[4];
 function ir(o) {
-  return {
-    patronus: P,
-    turqui: W,
-    grass: _,
-    candy: q,
-    blaze: N
-  }[o];
+  try {
+    return {
+      patronus: C,
+      turqui: W,
+      grass: _,
+      candy: q,
+      blaze: N
+    }[o];
+  } catch {
+  }
+  return C;
 }
 const nr = (o, e) => {
   let a = {};
@@ -544,14 +555,14 @@ function p({ sm: o, md: e, lg: a }) {
   };
 }
 function j() {
-  return [...m().breakpoints.keys].reverse().reduce((a, i) => {
-    const v = w("up", i);
+  return [...R().breakpoints.keys].reverse().reduce((a, i) => {
+    const v = $("up", i);
     return !a && v ? i : a;
   }, null) || "xs";
 }
 function pr(o) {
-  const e = m(), a = j(), i = e.breakpoints.up(a === "xl" ? "lg" : a), R = (o === "h1" || o === "h2" || o === "h3" || o === "h4" || o === "h5" || o === "h6") && e.typography[o][i] ? e.typography[o][i] : e.typography[o], B = Y(R.fontSize), S = Number(e.typography[o].lineHeight) * B, { fontWeight: L, letterSpacing: O } = e.typography[o];
-  return { fontSize: B, lineHeight: S, fontWeight: L, letterSpacing: O };
+  const e = R(), a = j(), i = e.breakpoints.up(a === "xl" ? "lg" : a), S = (o === "h1" || o === "h2" || o === "h3" || o === "h4" || o === "h5" || o === "h6") && e.typography[o][i] ? e.typography[o][i] : e.typography[o], B = Y(S.fontSize), L = Number(e.typography[o].lineHeight) * B, { fontWeight: O, letterSpacing: w } = e.typography[o];
+  return { fontSize: B, lineHeight: L, fontWeight: O, letterSpacing: w };
 }
 const V = "Poppins, sans-serif", U = {
   fontFamily: V,
@@ -666,7 +677,7 @@ const V = "Poppins, sans-serif", U = {
   }
 }, lr = {
   typography: U
-}, K = d.light.grey[500], J = "#000000", C = (o) => {
+}, K = d.light.grey[500], J = "#000000", m = (o) => {
   const e = t(o, 0.2), a = t(o, 0.14), i = t(o, 0.12);
   return [
     "none",
@@ -702,9 +713,15 @@ const V = "Poppins, sans-serif", U = {
     success: `0px 2px 8px 0px ${t(r.acidGreen[50], 0.2)}`,
     warning: `0px 2px 8px 0px ${t(r.middleYellow[50], 0.2)}`,
     error: `0px 2px 8px 0px ${t(r.flameRed[50], 0.2)}`,
-    card: `0 0 2px 0 ${t(d.light.grey[500], 0.2)}, 0 12px 24px -4px ${t(d.light.grey[500], 0.12)}`,
+    card: `0 0 2px 0 ${t(d.light.grey[500], 0.2)}, 0 12px 24px -4px ${t(
+      d.light.grey[500],
+      0.12
+    )}`,
     dialog: `-40px 40px 80px -8px ${t(d.light.common.black, 0.24)}`,
-    dropdown: `0 0 2px 0 ${t(d.light.grey[500], 0.24)}, -20px 20px 40px -4px ${t(d.light.grey[500], 0.24)}`
+    dropdown: `0 0 2px 0 ${t(d.light.grey[500], 0.24)}, -20px 20px 40px -4px ${t(
+      d.light.grey[500],
+      0.24
+    )}`
   };
   return o === "light" ? {
     z1: `0px 1px 2px ${t(r.coolGrey[70], 0.12)}`,
@@ -720,8 +737,8 @@ const V = "Poppins, sans-serif", U = {
     ...e
   };
 }, dr = {
-  light: C(K),
-  dark: C(J)
+  light: m(K),
+  dark: m(J)
 };
 function Q(o) {
   return {
@@ -2323,16 +2340,11 @@ const cr = {
 };
 export {
   r as PATRONUSCOLORS,
-  yr as StyledEngineProvider,
-  fr as Theme,
-  hr as ThemeOptions,
-  Mr as ThemeProvider,
   N as blaze,
   q as candy,
   g as colorPresets,
   sr as createCustomShadows,
-  vr as createTheme,
-  P as defaultPreset,
+  C as defaultPreset,
   lr as defaultThemeOptions,
   ur as fnComponentsOverrides,
   ir as getColorPresets,
@@ -2346,7 +2358,6 @@ export {
   Y as remToPx,
   p as responsiveFontSizes,
   dr as shadows,
-  Br as styled,
   W as turqui,
   U as typography
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@m4l/styles",
-  "version": "0.0.7",
+  "version": "0.0.9",
   "license": "UNLICENSED",
   "dependencies": {
     "@m4l/graphics": "*",

package/theme/index.d.ts

@@ -2,6 +2,8 @@ export type { CustomShadowOptions } from './shadows';
 export { defaultThemeOptions } from './defaultThemeOptions';
 export { shadows, createCustomShadows } from './shadows';
 export { palette, PATRONUSCOLORS } from './palette';
+export type { PatronusConstantColors } from './palette';
 export type { ColorSchema, StateDefault, StateSkeleton } from './palette';
+export type { ColorStateOptions } from '../utils/getColorState';
 export { typography } from './typography';
 export { fnComponentsOverrides } from './overrides';

package/theme/overrides/M4LExtendedComponents/M4LImageButton.d.ts

@@ -31,12 +31,12 @@ export declare const M4LImageButton: (theme: Theme) => {
                     borderRadius: string;
                 };
                 '.MuiButtonBase-root:hover': {
-                    backgroundColor: string;
+                    backgroundColor: any;
                 };
                 '.MuiButtonBase-root:focus': {
-                    backgroundColor: string;
+                    backgroundColor: any;
                     border: string;
-                    borderColor: string;
+                    borderColor: any;
                 };
             };
         };

package/theme/overrides/M4LRHFComponents/M4LRHFCheckbox.d.ts

@@ -34,20 +34,20 @@ export declare const M4LRHFCheckbox: (theme: Theme) => {
                     borderRadius: string;
                 };
                 '.MuiButtonBase-root:hover': {
-                    backgroundColor: string;
+                    backgroundColor: any;
                 };
                 '.Mui-focusVisible': {
                     border: string;
-                    borderColor: string;
+                    borderColor: any;
                 };
                 '.MuiButtonBase-root:hover .MuiSvgIcon-root': {
-                    fill: string;
+                    fill: any;
                 };
                 '.M4LRHFCheckbox-checkTypography .MuiTypography-root': {
                     [x: string]: any;
                 };
                 '.M4LRHFCheckbox-stateDisabled .MuiSvgIcon-root': {
-                    fill: string;
+                    fill: any;
                 };
                 '.M4LRHFCheckbox-stateDisabled .MuiTypography-root': {
                     color: string;

package/theme/overrides/MUIComponents/Paper.d.ts

@@ -23,17 +23,17 @@ export default function Paper(theme: Theme): {
                     borderRadius: string;
                 };
                 '& .MuiStack-root .MuiMenuItem-root:hover': {
-                    color: string;
+                    color: any;
                     transition: string;
-                    backgroundColor: string;
+                    backgroundColor: any;
                 };
                 '& .MuiStack-root .MuiMenuItem-root.Mui-selected': {
-                    color: string;
+                    color: any;
                     transition: string;
-                    backgroundColor: string;
+                    backgroundColor: any;
                 };
                 '& .MuiStack-root .MuiMenuItem-root:focus': {
-                    color: string;
+                    color: any;
                     transition: string;
                     backgroundColor: string;
                     boxShadow: string;
@@ -44,17 +44,17 @@ export default function Paper(theme: Theme): {
                     borderRadius: string;
                 };
                 '& .MuiAutocomplete-listbox .MuiAutocomplete-option:hover': {
-                    color: string;
+                    color: any;
                     transition: string;
-                    backgroundColor: string;
+                    backgroundColor: any;
                 };
                 '& .MuiAutocomplete-listbox .MuiAutocomplete-option.Mui-selected': {
-                    color: string;
+                    color: any;
                     transition: string;
-                    backgroundColor: string;
+                    backgroundColor: any;
                 };
                 '& .MuiAutocomplete-listbox .MuiAutocomplete-option:active': {
-                    color: string;
+                    color: any;
                     transition: string;
                     backgroundColor: string;
                     boxShadow: string;

package/theme/palette.d.ts

@@ -1,6 +1,6 @@
 export declare type ColorSchema = 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error';
-declare type PatronusColors = "patronusBlue" | "crayonBlue" | "middleYellow" | "acidGreen" | "grassGreen" | "candyRed" | "turquiBlue" | "blazeOrange" | "flameRed" | "coolGrey" | "marbleLight" | "ashBlak";
-declare type PatronusOpacityColors = "patronus" | "turqui" | "grass" | "candy" | "blaze" | "cool" | "marbel";
+declare type PatronusColors = 'patronusBlue' | 'crayonBlue' | 'middleYellow' | 'acidGreen' | 'grassGreen' | 'candyRed' | 'turquiBlue' | 'blazeOrange' | 'flameRed' | 'coolGrey' | 'marbleLight' | 'ashBlak';
+declare type PatronusOpacityColors = 'patronus' | 'turqui' | 'grass' | 'candy' | 'blaze' | 'cool' | 'marbel';
 interface PatronusColorOptions {
     10: string;
     20: string;

package/types/augmentations.d.ts

@@ -1,15 +1,7 @@
 import { PatronusConstantColors } from '../theme/palette';
 import { CustomShadowOptions } from '../theme';
 import { ChartPaletteOptions, GradientsPaletteOptions, GridPaletteOptions } from './types';
-import { ColorStateOptions } from '../utils/getColorState';
-export {
-    styled,
-    Theme,
-    ThemeOptions,
-    createTheme,
-    ThemeProvider,
-    StyledEngineProvider,
-} from '@mui/material/styles';
+import { ColorStateOptions } from '../../utils/getColorState';
 
 declare module '@mui/material' {
     interface Color {

package/utils/getColorState.d.ts

@@ -1,5 +1,5 @@
-import { StateDefault, StateSkeleton } from "../theme";
-import { ThemeColorPresets } from "../types";
+import { StateDefault, StateSkeleton } from '../theme';
+import { ThemeColorPresets } from '../types';
 export interface ColorStateOptions {
     active12: string;
     active: string;