@m4l/styles 3.2.3 → 6.1.0

package/theme/overrides/M4LRHFComponents/{index-BRZVeOM5.js → index-Dv4h8DSV.js}

@@ -62,7 +62,7 @@ const a = (o) => ({
           "& .MuiOutlinedInput-notchedOutline": {
             border: "1.3px solid",
             padding: "4px",
-            borderColor: o.vars.palette.border.primary,
+            borderColor: o.vars.palette?.border.default,
             borderRadius: "4px",
             inset: "0px",
             transition: "all .3s ease",
@@ -82,7 +82,7 @@ const a = (o) => ({
               o.colorSchemes.finalTheme.palette.primary.main,
               0.32
             )}`,
-            background: o.vars.palette.primary.activeOpacity
+            background: o.vars.palette.primary.opacity
           },
           "& .MuiInputBase-input": {
             color: o.vars.palette.text.primary
@@ -94,23 +94,23 @@ const a = (o) => ({
         /* State focus and active */
         "&.M4LRHFTextField-isFocus": {
           "& .M4LRHFTextField-label": {
-            color: o.vars.palette.primary?.active
+            color: o.vars.palette.primary.focusActive
           },
           "& .MuiInputBase-root .MuiOutlinedInput-notchedOutline": {
             transition: "all .1s ease",
             border: "2px solid",
-            borderColor: o.vars.palette.primary?.active,
+            borderColor: o.vars.palette.primary.focusActive,
             boxShadow: `0px 1px 8px ${t(
               o.colorSchemes.finalTheme.palette.primary.main,
               0.32
             )}`,
-            background: o.vars.palette.primary?.activeOpacity
+            background: o.vars.palette.primary.opacity
           },
           "& .MuiInputBase-input": {
             color: o.vars.palette.text.primary
           },
           "& .M4LIcon-icon": {
-            backgroundColor: o.vars.palette.primary?.active
+            backgroundColor: o.vars.palette.primary.focusActive
           }
         },
         /* State error */
@@ -121,7 +121,7 @@ const a = (o) => ({
           "& .MuiInputBase-root .MuiOutlinedInput-notchedOutline": {
             border: "1px solid",
             borderColor: o.vars.palette.error.main,
-            background: o.vars.palette.error.activeOpacity
+            background: o.vars.palette.error.opacity
           },
           "& .MuiInputBase-input": {
             color: o.vars.palette.text.primary
@@ -147,7 +147,7 @@ const a = (o) => ({
           },
           "& .MuiInputBase-root .MuiOutlinedInput-notchedOutline": {
             border: "1px solid",
-            borderColor: o.vars.palette.border.secondary,
+            borderColor: o.vars.palette?.border.secondary,
             backgroundColor: o.vars.palette.background?.default,
             boxShadow: "none"
           },
@@ -231,11 +231,11 @@ const a = (o) => ({
           borderRadius: "4px"
         },
         ".MuiButtonBase-root:hover": {
-          backgroundColor: o.vars.palette.primary?.activeOpacity
+          backgroundColor: o.vars.palette.primary.opacity
         },
         ".Mui-focusVisible": {
           border: "1px solid",
-          borderColor: o.vars.palette.primary?.focus
+          borderColor: o.vars.palette.primary.focusActive
         },
         ".MuiButtonBase-root:hover .MuiSvgIcon-root": {
           fill: o.vars.palette.primary?.hover
@@ -294,7 +294,7 @@ const a = (o) => ({
           "& .MuiFormControl-root": {
             height: "100%",
             "& .MuiInputBase-root": {
-              borderColor: o.vars.palette.border.primary,
+              borderColor: o.vars.palette?.border.default,
               position: "relative",
               height: "100%",
               "& .MuiInputBase-input": {
@@ -317,7 +317,7 @@ const a = (o) => ({
                 
                                                      '& .MuiOutlinedInput-notchedOutline': {
                                                          border: '1px solid',
-                                                         borderColor: theme.vars.palette.border.primary,
+                                                         borderColor: theme.vars.palette?.border.default,
                                                          borderRadius: '4px',
                                                          inset: '0px',
                                                          transition: 'all .3s ease',
@@ -333,7 +333,7 @@ const a = (o) => ({
                 width: "auto",
                 "& .M4LRHFAutocomplete-iconLeft": {
                   borderLeft: "1px solid",
-                  borderColor: o.vars.palette.border.primary
+                  borderColor: o.vars.palette?.border.default
                 }
               },
               "& .M4LRHFAutocomplete-iconDown": {},
@@ -407,13 +407,13 @@ const a = (o) => ({
         /* State focus and active */
         "&.M4LRHFAutocomplete-isFocus": {
           "& .M4LRHFAutocomplete-label": {
-            color: o.vars.palette.primary?.active
+            color: o.vars.palette.primary.focusActive
           },
           "& .MuiInputBase-root .MuiOutlinedInput-notchedOutline": {
             transition: "all .1s ease",
-            background: o.vars.palette.primary.activeOpacity,
+            background: o.vars.palette.primary.opacity,
             border: "2px solid",
-            borderColor: o.vars.palette.primary?.active,
+            borderColor: o.vars.palette.primary.focusActive,
             boxShadow: `0px 1px 8px ${e(
               o.colorSchemes.finalTheme.palette.primary.main,
               0.32
@@ -423,7 +423,7 @@ const a = (o) => ({
             color: o.vars.palette.text.primary
           },
           "& .M4LIcon-icon": {
-            backgroundColor: o.vars.palette.primary?.active
+            backgroundColor: o.vars.palette.primary.focusActive
           }
         },
         /* State error */
@@ -459,7 +459,7 @@ const a = (o) => ({
           },
           "& .MuiInputBase-root .MuiOutlinedInput-notchedOutline": {
             border: "1px solid",
-            borderColor: o.vars.palette.border.disabled,
+            borderColor: o.vars.palette?.border.disabled,
             backgroundColor: o.vars.palette.background?.default,
             boxShadow: "none"
           },
@@ -537,7 +537,7 @@ const a = (o) => ({
           // Estados por evento de usuario
           "&:hover": {
             color: o.vars.palette.text.primary,
-            backgroundColor: o.vars.palette.primary.activeOpacity
+            backgroundColor: o.vars.palette.primary.opacity
           },
           "& .M4LImage-root": {
             width: "auto",
@@ -601,7 +601,7 @@ const a = (o) => ({
           boxShadow: o.customShadows?.z2,
           "& .MuiAutocomplete-listbox .MuiAutocomplete-option:hover": {
             color: o.vars.palette.text.primary,
-            backgroundColor: o.vars.palette.primary.activeOpacity
+            backgroundColor: o.vars.palette.primary.opacity
           }
         }
       }
@@ -633,7 +633,7 @@ const a = (o) => ({
       }
     }
   }
-}), d = (o) => ({
+}), u = (o) => ({
   M4LRHFAutocompleteAsync: {
     styleOverrides: {
       "&.M4LRHFAutocompleteAsync-root": {
@@ -642,7 +642,7 @@ const a = (o) => ({
       }
     }
   }
-}), u = (o) => ({
+}), d = (o) => ({
   M4LRHFDateTime: {
     styleOverrides: {
       "&.M4LRHFDateTime-root": {
@@ -761,18 +761,18 @@ const a = (o) => ({
         /* State focus and active */
         "&.M4LRHFDateTime-isFocus": {
           "& .M4LTypography-root": {
-            color: o.vars.palette.primary.active
+            color: o.vars.palette.primary.focusActive
           },
           "& .MuiInputBase-root .MuiOutlinedInput-notchedOutline": {
             transition: "all .1s ease",
             border: "2px solid",
-            borderColor: o.vars.palette.primary?.active
+            borderColor: o.vars.palette.primary.focusActive
           },
           "& .MuiInputBase-input": {
             color: o.vars.palette.text.primary
           },
           "& .M4LIcon-icon": {
-            backgroundColor: o.vars.palette.primary?.active
+            backgroundColor: o.vars.palette.primary.focusActive
           }
         },
         /* State error */
@@ -851,15 +851,15 @@ const a = (o) => ({
             inset: "0",
             alignItems: "center",
             justifyContent: "center",
-            background: o.vars.palette.background.main,
+            background: o.vars.palette.background.surface,
             "& > *": {
               width: "100%",
               height: "100%"
             },
             "&:hover": {
-              background: o.vars.palette.primary.activeOpacity,
+              background: o.vars.palette.primary.opacity,
               border: "1px solid",
-              borderColor: o.vars.palette.primary.activeOpacity,
+              borderColor: o.vars.palette.primary.opacity,
               cursor: "pointer",
               "& .placeholder": {
                 zIndex: 9
@@ -1049,7 +1049,7 @@ const a = (o) => ({
           gap: "4px",
           padding: "2px",
           border: "1.5px solid",
-          borderColor: o.vars.palette.border.primary,
+          borderColor: o.vars.palette?.border.default,
           borderRadius: "4px",
           width: "fit-content",
           "& .M4LRHFColorPicker-boxColor": {
@@ -1075,7 +1075,7 @@ const a = (o) => ({
           background: o.vars.palette.background.default,
           padding: "8px",
           border: "1px solid",
-          borderColor: o.vars.palette.border.secondary,
+          borderColor: o.vars.palette?.border.secondary,
           borderRadius: "4px",
           boxShadow: o.vars.customShadows.z4,
           test: "root",
@@ -1094,7 +1094,7 @@ const a = (o) => ({
               flexDirection: "column",
               gap: "8px",
               border: "1px solid",
-              borderColor: o.vars.palette.border.secondary,
+              borderColor: o.vars.palette?.border.secondary,
               borderRadius: "4px",
               backgroundColor: o.vars.palette.background.default,
               "& :nth-of-type(-n + 1)": {
@@ -1115,7 +1115,7 @@ const a = (o) => ({
                       display: "flex",
                       textAlign: "center !important",
                       border: "1px solid",
-                      borderColor: o.vars.palette.border.primary,
+                      borderColor: o.vars.palette?.border.default,
                       borderRadius: "2px",
                       background: "transparent",
                       minHeight: "24px",
@@ -1148,8 +1148,8 @@ export {
   l as M,
   a,
   p as b,
-  d as c,
-  u as d,
+  u as c,
+  d,
   s as e,
   c as f,
   n as g,

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

@@ -18,7 +18,7 @@ export default function Avatar(theme: Omit<Theme, 'palette' | 'applyStyles'> & C
                 '&:first-of-type': {
                     fontSize: number;
                     color: string;
-                    backgroundColor: string | undefined;
+                    backgroundColor: string;
                 };
             };
         };

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

@@ -1,5 +1,5 @@
 import { Theme, CssVarsTheme } from '@mui/material/styles';
-export default function Input(theme: Omit<Theme, 'palette' | 'applyStyles'> & CssVarsTheme): {
+export default function c(theme: Omit<Theme, 'palette' | 'applyStyles'> & CssVarsTheme): {
     MuiFormControl: {
         styleOverrides: {
             root: {

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

@@ -10,7 +10,7 @@ export default function Progress(theme: Omit<Theme, "palette" | "applyStyles"> &
                 borderRadius: number;
             };
             colorPrimary: {
-                backgroundColor: string | undefined;
+                backgroundColor: string;
             };
             buffer: {
                 backgroundColor: string;

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

@@ -1,10 +1,10 @@
 import { Theme, CssVarsTheme } from '@mui/material/styles';
-import { ColorSchema } from '../../../types';
+import { ComponentPalletColor } from '../../../types';
 export default function ToggleButton(theme: Omit<Theme, 'palette' | 'applyStyles'> & CssVarsTheme): {
     MuiToggleButton: {
         variants: ({
             props: {
-                color: ColorSchema;
+                color: ComponentPalletColor;
             };
             style: {
                 '&:hover': {