@m4l/styles 6.4.0 → 6.4.1

package/theme/overrides/M4LExtendedComponents/M4LButton.js

@@ -0,0 +1,257 @@
+const r = (o) => ({
+  M4LButton: {
+    styleOverrides: {
+      "&.M4LButton-root": {
+        /* Propiedades generales */
+        transition: "all 0.2s",
+        width: "fit-content",
+        display: "flex",
+        justifyContent: "center",
+        ...o.colorSchemes.finalTheme.typography.action,
+        //height: '24px',
+        minHeight: "24px",
+        borderRadius: "4px",
+        [o.breakpoints.down("md")]: {
+          height: "36px",
+          minHeight: "36px"
+        },
+        /* General properties */
+        "& .M4LButton-skeleton": {
+          height: "100% !important",
+          borderRadius: "4px"
+        },
+        // Anulamos los estilos de color para el botón de mui
+        "& .MuiButtonBase-root": {
+          display: "flex",
+          textTransform: "none",
+          gap: "8px",
+          transition: "all .5s ease",
+          borderRadius: "4px",
+          border: "1px solid transparent",
+          ...o.colorSchemes.finalTheme.typography.action,
+          backgroundColor: "#fff0",
+          height: "100% !important",
+          "&:hover, &:focus": {
+            backgroundColor: "transparent",
+            transition: "all 0.2s"
+          },
+          "& .M4LIcon-icon": {
+            transition: "all .5s ease"
+          },
+          "& .MuiButton-startIcon, & .MuiButton-endIcon": {
+            margin: "0px"
+          },
+          "&::before": {
+            inset: "0",
+            border: "1px solid",
+            borderColor: o.vars.palette.primary.focusVisible,
+            borderRadius: "4px",
+            transform: "scale(1.07, 1.36)",
+            position: "absolute",
+            boxSizing: "border-box"
+          }
+        },
+        "&.M4LButton-isDisabled": {
+          "& .MuiButtonBase-root": {
+            color: `${o.vars.palette.text.disabled}!important`,
+            "& .M4LIcon-icon": {
+              backgroundColor: `${o.vars.palette.text.disabled}!important`
+            }
+          },
+          "&.M4LButton-variantContained": {
+            color: o.vars.palette.text.disabled,
+            backgroundColor: o.vars.palette.background.default,
+            border: "1px solid",
+            borderColor: o.vars.palette?.border.disabled,
+            "& .M4LIcon-icon": {
+              backgroundColor: o.vars.palette.text.disabled
+            },
+            "&:hover": {
+              backgroundColor: o.vars.palette.background?.default,
+              color: o.vars.palette.text.disabled,
+              "& .M4LIcon-icon": {
+                backgroundColor: o.vars.palette.text.disabled,
+                color: o.vars.palette.text.disabled
+              }
+            },
+            "&:active": {
+              backgroundColor: o.vars.palette.primary.focusActive,
+              color: o.vars.palette.text.primary,
+              "& .M4LIcon-icon": {
+                backgroundColor: o.vars.palette.text.disabled,
+                color: o.vars.palette.text.disabled
+              }
+            },
+            "&.Mui-focusVisible": {
+              backgroundColor: o.vars.palette.background?.default,
+              color: o.vars.palette.text.disabled,
+              "& .M4LIcon-icon": {
+                backgroundColor: o.vars.palette.text.disabled,
+                color: o.vars.palette.text.disabled
+              },
+              "&::before": {
+                content: "none"
+              }
+            }
+          }
+        },
+        /* Sizes */
+        "&.M4LButton-sizeSmall": {
+          "& .MuiButtonBase-root": {
+            padding: "4px 12px",
+            height: "24px",
+            minHeight: "24px"
+          },
+          "&.M4LButton-skeleton": {
+            height: "24px"
+          }
+        },
+        "&.M4LButton-sizeMedium": {
+          "& .MuiButtonBase-root": {
+            padding: "8px 12px",
+            height: "36px",
+            minHeight: "36px"
+          },
+          "&.M4LButton-skeleton": {
+            height: "36px"
+          }
+        },
+        /* Variant contained */
+        "&.M4LButton-variantContained": {
+          backgroundColor: o.vars.palette.primary.focusActive,
+          color: o.vars.palette.common?.white,
+          boxShadow: o.customShadows?.z1,
+          position: "relative",
+          "& .M4LIcon-icon": {
+            backgroundColor: o.vars.palette.common?.white
+          },
+          "&:hover": {
+            backgroundColor: o.vars.palette.primary?.hover,
+            color: o.vars.palette.common?.white,
+            "& .M4LIcon-icon": {
+              backgroundColor: o.vars.palette.common?.white
+            }
+          },
+          // '& .active': {
+          //     backgroundColor: theme.vars.palette.primary?.active,
+          //     color: theme.vars.palette.common?.white,
+          //     '& .M4LIcon-icon': {
+          //         backgroundColor: theme.vars.palette.common?.white,
+          //     },
+          // },
+          "&.Mui-focusVisible": {
+            backgroundColor: o.vars.palette.primary.focusActive,
+            color: o.vars.palette.common?.white,
+            "& .M4LIcon-icon": {
+              backgroundColor: o.vars.palette.common?.white
+            },
+            "&::before": {
+              content: "''"
+            }
+          }
+        },
+        /* Variant outlined */
+        "&.M4LButton-variantOutlined": {
+          "& .MuiButtonBase-root": {
+            border: "1px solid",
+            borderColor: o.vars.palette?.border.disabled,
+            color: o.vars.palette.text.primary,
+            "& .M4LIcon-icon": {
+              backgroundColor: o.vars.palette.text.primary
+            },
+            "&:hover": {
+              borderColor: o.vars.palette.primary?.hover,
+              color: o.vars.palette.primary?.hover,
+              backgroundColor: o.vars.palette.primary.opacity,
+              "& .M4LIcon-icon": {
+                backgroundColor: o.vars.palette.primary?.hover
+              }
+            },
+            "&:active": {
+              borderColor: o.vars.palette.primary.focusActive,
+              color: o.vars.palette.primary.focusActive,
+              backgroundColor: "transparent",
+              "& .M4LIcon-icon": {
+                backgroundColor: o.vars.palette.primary.focusActive
+              }
+            },
+            "&.Mui-focusVisible": {
+              borderColor: o.vars.palette.primary.focusActive,
+              color: o.vars.palette.primary.focusActive,
+              backgroundColor: "transparent",
+              "& .M4LIcon-icon": {
+                backgroundColor: o.vars.palette.primary.focusActive
+              },
+              "&::before": {
+                content: "''"
+              }
+            }
+          }
+        },
+        /* Variant text */
+        "&.M4LButton-variantText": {
+          "& .MuiButtonBase-root": {
+            color: o.vars.palette.text.primary,
+            "& .M4LIcon-icon": {
+              backgroundColor: o.vars.palette.text.primary
+            },
+            "&:hover": {
+              backgroundColor: o.vars.palette.primary.opacity,
+              color: o.vars.palette.primary?.hover,
+              "& .M4LIcon-icon": {
+                backgroundColor: o.vars.palette.primary?.hover
+              }
+            },
+            "&:active": {
+              backgroundColor: "transparent",
+              color: o.vars.palette.primary.focusActive,
+              "& .M4LIcon-icon": {
+                backgroundColor: o.vars.palette.primary.focusActive
+              }
+            },
+            "&.Mui-focusVisible": {
+              backgroundColor: "transparent",
+              color: o.vars.palette.primary.focusActive,
+              "& .M4LIcon-icon": {
+                backgroundColor: o.vars.palette.primary.focusActive
+              },
+              "&:before": {
+                content: "''"
+              }
+            }
+          }
+        },
+        // Condiciones semánticas
+        // Error
+        "&.M4LButton-colorError": {
+          backgroundColor: `${o.vars.palette.error.main}`,
+          "&:hover": {
+            backgroundColor: `${o.vars.palette.error.hover}`
+          }
+        },
+        // Warning
+        "&.M4LButton-colorWarning": {
+          backgroundColor: `${o.vars.palette.warning.main}`,
+          "&:hover": {
+            backgroundColor: `${o.vars.palette.warning.hover}`
+          }
+        },
+        // Success
+        "&.M4LButton-colorSuccess": {
+          backgroundColor: `${o.vars.palette.success.main}`,
+          "&:hover": {
+            backgroundColor: `${o.vars.palette.success.hover}`
+          }
+        },
+        //TODO: Para cambiar
+        "&.M4LButton-togglePressed .MuiButtonBase-root": {
+          backgroundColor: "red!important",
+          prop1: 1
+        }
+      }
+    }
+  }
+});
+export {
+  r as M
+};

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

@@ -1,5 +1,5 @@
 import { Theme, CssVarsTheme } from '@mui/material/styles';
-export declare const M4LCheckBox: (theme: Omit<Theme, 'palette' | 'applyStyles'> & CssVarsTheme) => {
+export declare const M4LCheckBox: (theme: Omit<Theme, "palette" | "applyStyles"> & CssVarsTheme) => {
     M4LCheckBox: {
         styleOverrides: {
             '&.M4LCheckBox-root': {

package/theme/overrides/M4LExtendedComponents/M4LCheckBox.js

@@ -0,0 +1,83 @@
+const t = (o) => ({
+  M4LCheckBox: {
+    styleOverrides: {
+      "&.M4LCheckBox-root": {
+        display: "flex",
+        gap: "8px",
+        width: "100%",
+        "& .M4LCheckBox-skeleton": {
+          display: "flex",
+          justifyContent: "center",
+          alignItems: "center",
+          width: "36px",
+          height: "36px"
+        },
+        "& .MuiTypography-root": {
+          color: o.vars.palette.text.primary,
+          ...o.colorSchemes.finalTheme.typography.body
+        },
+        /* caso small */
+        "&.M4LCheckBox-small ": {
+          "& .MuiButtonBase-root": {
+            width: "24px",
+            height: "24px"
+          }
+        },
+        "& .MuiCheckbox-root .MuiSvgIcon-fontSizeSmall": {
+          width: "16px",
+          height: "16px"
+        },
+        /* caso medium */
+        "&.M4LCheckBox-medium": {
+          "& .MuiButtonBase-root": {
+            width: "24px",
+            height: "24px"
+          },
+          "& .M4LCheckBox-skeleton": {
+            width: "24px",
+            height: "24px"
+          }
+        },
+        "& .MuiCheckbox-root .MuiSvgIcon-fontSizeMedium": {
+          width: "20px",
+          height: "20px"
+        },
+        // Caso general
+        "& .MuiButtonBase-root": {
+          borderRadius: "4px",
+          "& .MuiSvgIcon-root": {
+            fill: o.vars.palette.text.secondary
+          }
+        },
+        "& .MuiButtonBase-root:hover": {
+          backgroundColor: o.vars.palette.primary.opacity,
+          borderRadius: "4px"
+        },
+        "& .Mui-focusVisible": {
+          border: "1px solid",
+          borderColor: o.vars.palette.primary.focusActive
+        },
+        "& .MuiButtonBase-root:hover .MuiSvgIcon-root": {
+          fill: o.vars.palette.primary?.hover
+        },
+        /* caso general */
+        "& .M4LCheckBox-checkTypography .MuiTypography-root": {
+          ...o.colorSchemes.finalTheme.typography.body
+        },
+        "& .M4LCheckBox-stateDisabled .MuiSvgIcon-root": {
+          fill: o.vars.palette.background?.default
+        },
+        "& .M4LCheckBox-stateDisabled .MuiTypography-root": {
+          color: o.vars.palette.text.disabled
+        },
+        /* selector del caso focus por tab */
+        "& .MuiButtonBase-root .Mui-focusVisible:focus-visible": {
+          outline: "#fff00"
+        }
+      }
+    }
+  }
+});
+export {
+  t as M
+};

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

@@ -1,5 +1,5 @@
 import { Theme, CssVarsTheme } from '@mui/material/styles';
-export declare const M4LCommonActions: (_theme: Omit<Theme, 'palette' | 'applyStyles'> & CssVarsTheme) => {
+export declare const M4LCommonActions: (_theme: Omit<Theme, "palette" | "applyStyles"> & CssVarsTheme) => {
     M4LCommonActions: {
         styleOverrides: {
             '&.M4LCommonActions-root': {

package/theme/overrides/M4LExtendedComponents/M4LCommonActions.js

@@ -0,0 +1,17 @@
+const e = (o) => ({
+  M4LCommonActions: {
+    styleOverrides: {
+      "&.M4LCommonActions-root": {
+        padding: "16px 0px 0px 0px",
+        display: "flex",
+        gap: "16px",
+        justifyContent: "flex-end",
+        width: "100%",
+        overflow: "visible"
+      }
+    }
+  }
+});
+export {
+  e as M
+};

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

@@ -1,5 +1,5 @@
 import { Theme, CssVarsTheme } from '@mui/material/styles';
-export declare const M4LDataGrid: (theme: Omit<Theme, 'palette' | 'applyStyles'> & CssVarsTheme) => {
+export declare const M4LDataGrid: (theme: Omit<Theme, "palette" | "applyStyles"> & CssVarsTheme) => {
     M4LDataGrid: {
         styleOverrides: {
             '&.M4LDataGrid-root': {