@m4l/styles 3.2.3 → 6.1.0

package/theme/overrides/MUIComponents/{index-XoLdmZP6.js → index-DrBJTI1s.js}

@@ -1,11 +1,11 @@
-import { alpha as t } from "@mui/material";
+import { alpha as i } from "@mui/material";
 import { alpha as a } from "@mui/material/styles";
 function d(r) {
   return {
     MuiAvatar: {
       styleOverrides: {
         borderTop: "1.5px",
-        borderColor: r.vars.palette.border.default,
+        borderColor: r.vars.palette?.border.default,
         colorDefault: {
           color: r.vars.palette.text.secondary,
           backgroundColor: r.vars.palette.grey[400]
@@ -20,7 +20,7 @@ function d(r) {
           "&:first-of-type": {
             fontSize: 14,
             color: r.vars.palette.primary.main,
-            backgroundColor: r.vars.palette.primary.lighter
+            backgroundColor: r.vars.palette.primary.light
           }
         }
       }
@@ -75,7 +75,7 @@ function l(r) {
         // outlined
         outlinedInherit: {
           borderRadius: "4px",
-          border: `1px solid ${r.vars.palette.border.line}`,
+          border: `1px solid ${r.vars.palette?.border.default}`,
           "&:hover": {
             backgroundColor: r.vars.palette.action.hover,
             borderRadius: "4px"
@@ -277,7 +277,7 @@ function y(r) {
         },
         head: {
           color: r.vars.palette.text.secondary,
-          backgroundColor: r.vars.palette.background.main,
+          backgroundColor: r.vars.palette.background.surface,
           "&:first-of-type": {
             paddingLeft: r.spacing(3),
             borderTopLeftRadius: r.shape.borderRadius,
@@ -293,7 +293,7 @@ function y(r) {
         },
         stickyHeader: {
           backgroundColor: r.vars.palette.background.paper,
-          backgroundImage: `linear-gradient(to bottom, ${r.vars.palette.background.main} 0%, ${r.vars.palette.background.main} 100%)`
+          backgroundImage: `linear-gradient(to bottom, ${r.vars.palette.background.surface} 0%, ${r.vars.palette.background.surface} 100%)`
         },
         body: {
           "&:first-of-type": {
@@ -342,7 +342,7 @@ function y(r) {
     }
   };
 }
-function M(r) {
+function f(r) {
   return {
     MuiBadge: {
       styleOverrides: {
@@ -357,7 +357,7 @@ function M(r) {
     }
   };
 }
-function f(r) {
+function M(r) {
   return {
     MuiPaper: {
       defaultProps: {
@@ -366,7 +366,7 @@ function f(r) {
       variants: [
         {
           props: { variant: "outlined" },
-          style: { borderColor: r.vars.palette.border.line }
+          style: { borderColor: r.vars.palette?.border.default }
         }
       ],
       styleOverrides: {
@@ -384,18 +384,18 @@ function f(r) {
           "& .MuiStack-root .MuiMenuItem-root:hover": {
             color: r.vars.palette.primary?.hover,
             transition: "all .5s",
-            backgroundColor: r.vars.palette.primary?.activeOpacity
+            backgroundColor: r.vars.palette.primary.opacity
           },
           "& .MuiStack-root .MuiMenuItem-root.Mui-selected": {
-            color: r.vars.palette.primary?.active,
+            color: r.vars.palette.primary.focusActive,
             transition: "all .5s",
-            backgroundColor: r.vars.palette.primary?.activeOpacity
+            backgroundColor: r.vars.palette.primary.opacity
           },
           "& .MuiStack-root .MuiMenuItem-root:focus": {
-            color: r.vars.palette.primary?.focus,
+            color: r.vars.palette.primary.focusActive,
             transition: "all .5s",
             backgroundColor: r.vars.palette.background.default,
-            boxShadow: `0 0 0 1px ${r.vars.palette.primary?.focus}`
+            boxShadow: `0 0 0 1px ${r.vars.palette.primary.focusActive}`
           },
           /* Autocomplete Listbox */
           "& .MuiAutocomplete-listbox .MuiAutocomplete-option": {
@@ -407,18 +407,18 @@ function f(r) {
           "& .MuiAutocomplete-listbox .MuiAutocomplete-option:hover": {
             color: r.vars.palette.primary?.hover,
             transition: "all .5s",
-            backgroundColor: r.vars.palette.primary?.activeOpacity
+            backgroundColor: r.vars.palette.primary.opacity
           },
           "& .MuiAutocomplete-listbox .MuiAutocomplete-option.Mui-selected": {
-            color: r.vars.palette.primary?.active,
+            color: r.vars.palette.primary.focusActive,
             transition: "all .5s",
-            backgroundColor: r.vars.palette.primary?.activeOpacity
+            backgroundColor: r.vars.palette.primary.opacity
           },
           "& .MuiAutocomplete-listbox .MuiAutocomplete-option:active": {
-            color: r.vars.palette.primary?.focus,
+            color: r.vars.palette.primary.focusActive,
             transition: "all .5s",
             backgroundColor: r.vars.palette.background.default,
-            boxShadow: `0 0 0 1px ${r.vars.palette.primary?.focus}`
+            boxShadow: `0 0 0 1px ${r.vars.palette.primary.focusActive}`
           }
         }
       }
@@ -442,7 +442,7 @@ function h(r) {
       styleOverrides: {
         root: {
           height: "auto",
-          backgroundColor: r.vars.palette.background.default,
+          backgroundColor: r.vars.palette.background?.default,
           ...r.colorSchemes.finalTheme.typography.body2,
           borderRadius: "2px",
           padding: "4px",
@@ -465,7 +465,7 @@ function h(r) {
       styleOverrides: {
         underline: {
           "&:before": {
-            borderBottomColor: r.vars.palette.border.line
+            borderBottomColor: r.vars.palette?.border?.default
           }
         }
       }
@@ -473,9 +473,9 @@ function h(r) {
     MuiFilledInput: {
       styleOverrides: {
         root: {
-          backgroundColor: r.vars.palette.border.line,
+          backgroundColor: r.vars.palette?.border?.default,
           "&:hover": {
-            backgroundColor: r.vars.palette.border.line
+            backgroundColor: r.vars.palette?.border?.default
           },
           "&.Mui-focused": {
             backgroundColor: r.vars.palette.action.focus
@@ -486,7 +486,7 @@ function h(r) {
         },
         underline: {
           "&:before": {
-            borderBottomColor: r.vars.palette.border.line
+            borderBottomColor: r.vars.palette?.border?.default
           }
         }
       }
@@ -501,7 +501,7 @@ function h(r) {
             padding: r.spacing(1.5, 1.5)
           },
           "& .MuiOutlinedInput-notchedOutline": {
-            borderColor: r.vars.palette.border.line,
+            borderColor: r.vars.palette?.border?.default,
             fontSize: "0.875rem",
             height: "auto",
             minHeight: "24px",
@@ -553,7 +553,7 @@ function k(r) {
     }
   };
 }
-function m(r) {
+function S(r) {
   const o = r.colorSchemes.finalTheme.palette.mode === "light";
   return {
     MuiDrawer: {
@@ -562,13 +562,13 @@ function m(r) {
           "&.M4LSideBar-drawer": {
             test: "root",
             "& .MuiPaper-root": {
-              background: r.vars.palette.background.main,
+              background: r.vars.palette.background.surface,
               display: "flex",
               flexDirection: "row"
             }
             /*  "& .MuiPaper-root": {
                  borderRadius: "4px",
-                 backgroundColor: theme.vars.palette.primary.activeOpacity,
+                 backgroundColor: theme.vars.palette.primary.primaryOpacity,
                  padding: "8px",
              }, */
           }
@@ -576,13 +576,13 @@ function m(r) {
         modal: {
           '&[role="presentation"]': {
             "& .MuiDrawer-paperAnchorLeft": {
-              boxShadow: `8px 24px 24px 12px ${t(
+              boxShadow: `8px 24px 24px 12px ${i(
                 r.colorSchemes.finalTheme.palette.grey[900],
                 o ? 0.16 : 0.48
               )}`
             },
             "& .MuiDrawer-paperAnchorRight": {
-              boxShadow: `-8px 24px 24px 12px ${t(
+              boxShadow: `-8px 24px 24px 12px ${i(
                 r.colorSchemes.finalTheme.palette.grey[900],
                 o ? 0.16 : 0.48
               )}`
@@ -593,7 +593,7 @@ function m(r) {
     }
   };
 }
-function S(r) {
+function m(r) {
   const o = r.colorSchemes.finalTheme.palette.mode === "light";
   return {
     MuiSlider: {
@@ -666,7 +666,7 @@ function w(r) {
     }
   };
 }
-function O(r) {
+function T(r) {
   const o = r.colorSchemes.finalTheme.palette.mode === "light";
   return {
     MuiTooltip: {
@@ -681,7 +681,7 @@ function O(r) {
     }
   };
 }
-function T(r) {
+function O(r) {
   return {
     MuiPopover: {
       styleOverrides: {
@@ -713,7 +713,7 @@ function B(r) {
           },
           "& .MuiDataGrid-toolbarContainer": {
             padding: r.spacing(2),
-            backgroundColor: r.vars.palette.background.main,
+            backgroundColor: r.vars.palette.background.surface,
             "& .MuiButton-root": {
               marginRight: r.spacing(1.5),
               color: r.vars.palette.text.primary,
@@ -763,7 +763,7 @@ function B(r) {
               ...r.colorSchemes.finalTheme.typography.body,
               padding: r.spacing(0.75, 1),
               borderRadius: r.shape.borderRadius,
-              backgroundColor: r.vars.palette.background.main
+              backgroundColor: r.vars.palette.background.surface
             },
             "& .MuiSvgIcon-root": {
               right: 4
@@ -813,16 +813,16 @@ function I(r) {
   };
 }
 function L(r) {
-  const o = a(r.colorSchemes.finalTheme.palette.grey[900], 0.48), i = a(r.colorSchemes.finalTheme.palette.grey[900], 1);
+  const o = a(r.colorSchemes.finalTheme.palette.grey[900], 0.48), t = a(r.colorSchemes.finalTheme.palette.grey[900], 1);
   return {
     MuiBackdrop: {
       styleOverrides: {
         root: {
           background: [
             "rgb(22,28,36)",
-            `-moz-linear-gradient(75deg, ${o} 0%, ${i} 100%)`,
-            `-webkit-linear-gradient(75deg, ${o} 0%, ${i} 100%)`,
-            `linear-gradient(75deg, ${o} 0%, ${i} 100%)`
+            `-moz-linear-gradient(75deg, ${o} 0%, ${t} 100%)`,
+            `-webkit-linear-gradient(75deg, ${o} 0%, ${t} 100%)`,
+            `linear-gradient(75deg, ${o} 0%, ${t} 100%)`
           ],
           "&.MuiBackdrop-invisible": {
             background: "transparent"
@@ -832,7 +832,7 @@ function L(r) {
     }
   };
 }
-function P(r) {
+function A(r) {
   const o = r.colorSchemes.finalTheme.palette.mode === "light";
   return {
     MuiLinearProgress: {
@@ -845,7 +845,7 @@ function P(r) {
           borderRadius: 4
         },
         colorPrimary: {
-          backgroundColor: r.vars.palette.primary[o ? "lighter" : "darker"]
+          backgroundColor: r.vars.palette.primary[o ? "light" : "dark"]
         },
         buffer: {
           backgroundColor: "transparent"
@@ -854,7 +854,7 @@ function P(r) {
     }
   };
 }
-function z(r) {
+function P(r) {
   return {
     MuiTimelineDot: {
       styleOverrides: {
@@ -872,7 +872,7 @@ function z(r) {
     }
   };
 }
-function A(r) {
+function z(r) {
   return {
     MuiCheckbox: {
       // defaultProps: {
@@ -952,7 +952,7 @@ function $(r) {
           borderRadius: r.spacing(0.5),
           height: r.spacing(4.5),
           minHeight: r.spacing(4.5),
-          backgroundColor: r.vars.palette.background.header,
+          backgroundColor: r.vars.palette.primary.opacity,
           paddingLeft: r.spacing(2),
           paddingRight: r.spacing(2),
           marginBottom: "0px",
@@ -1035,7 +1035,7 @@ function G(r) {
           }
         },
         outlined: {
-          border: `1px solid ${r.vars.palette.border.line}`
+          border: `1px solid ${r.vars.palette?.border.default}`
         },
         outlinedPrimary: {
           "&.Mui-selected": {
@@ -1060,8 +1060,8 @@ function H(r) {
   };
 }
 function F(r) {
-  const o = (i) => ({
-    props: { variant: "contained", color: i },
+  const o = (t) => ({
+    props: { variant: "contained", color: t },
     style: { boxShadow: r.customShadows?.primary }
   });
   return {
@@ -1207,7 +1207,6 @@ function j(r) {
           }
         },
         e(r, "primary"),
-        e(r, "secondary"),
         e(r, "info"),
         e(r, "success"),
         e(r, "warning"),
@@ -1219,7 +1218,7 @@ function j(r) {
         root: {
           borderRadius: r.shape.borderRadius,
           backgroundColor: r.vars.palette.background.paper,
-          border: `solid 1px ${r.vars.palette.border.line}`,
+          border: `solid 1px ${r.vars.palette?.border.default}`,
           "& .MuiToggleButton-root": {
             margin: 4,
             borderColor: "transparent !important",
@@ -1286,32 +1285,32 @@ const q = (r) => ({
 });
 export {
   d as A,
-  M as B,
+  f as B,
   c as C,
-  m as D,
+  S as D,
   u as F,
-  h as I,
+  x as I,
   b as L,
   g as M,
-  f as P,
+  M as P,
   k as R,
   C as S,
   y as T,
-  x as a,
-  v as b,
-  l as c,
+  v as a,
+  l as b,
+  h as c,
   p as d,
-  S as e,
+  m as e,
   R as f,
-  O as g,
-  T as h,
+  T as g,
+  O as h,
   w as i,
-  A as j,
+  z as j,
   B as k,
   I as l,
-  z as m,
+  P as m,
   L as n,
-  P as o,
+  A as o,
   $ as p,
   D as q,
   G as r,

package/theme/overrides/{index-B9xZa27y.js → index-DLjfQaz-.js}

@@ -1,6 +1,6 @@
-import { F as s, C as o, M as r, L, I as M, a as n, R as i, B as p, b as l, T as c, P as d, S as u, c as g, d as B, A as F, e as P, D as A, f as T, g as b, h as C, i as S, j as y, k as I, l as R, m as v, n as H, o as k, p as D, q as f, r as x, s as w, t as G, u as V, v as j, w as E, x as N, y as O, z as q } from "./MUIComponents/index-XoLdmZP6.js";
-import { M as z, a as U, b as J, c as K, d as Q, e as W, f as X, g as Y, h as Z } from "./M4LRHFComponents/index-BRZVeOM5.js";
-import { M as _, a as $, b as t, c as m, d as e, e as h, f as aa, g as sa, h as oa, i as ra, j as La, k as Ma, l as na, m as ia, n as pa, o as la, p as ca, q as da, r as ua, s as ga, t as Ba, u as Fa, v as Pa, w as Aa, x as Ta, y as ba, z as Ca, A as Sa, B as ya, C as Ia, D as Ra, E as va, F as Ha, G as ka, H as Da, I as fa, J as xa, K as wa, L as Ga, N as Va, O as ja, P as Ea, Q as Na, R as Oa, S as qa, T as za, U as Ua, V as Ja, W as Ka, X as Qa, Y as Wa, Z as Xa, _ as Ya } from "./M4LExtendedComponents/index-C4PXddLa.js";
+import { F as s, C as o, M as r, L, c as M, I as i, R as n, B as p, a as l, T as c, P as d, S as u, b as g, d as B, A as F, e as P, D as A, f as T, g as b, h as C, i as S, j as y, k as R, l as v, m as H, n as I, o as k, p as D, q as f, r as x, s as w, t as G, u as V, v as j, w as E, x as N, y as O, z as q } from "./MUIComponents/index-DrBJTI1s.js";
+import { M as z, a as U, b as J, c as K, d as Q, e as W, f as X, g as Y, h as Z } from "./M4LRHFComponents/index-Dv4h8DSV.js";
+import { M as _, a as $, b as t, c as m, d as e, e as h, f as aa, g as sa, h as oa, i as ra, j as La, k as Ma, l as ia, m as na, n as pa, o as la, p as ca, q as da, r as ua, s as ga, t as Ba, u as Fa, v as Pa, w as Aa, x as Ta, y as ba, z as Ca, A as Sa, B as ya, C as Ra, D as va, E as Ha, F as Ia, G as ka, H as Da, I as fa, J as xa, K as wa, L as Ga, N as Va, O as ja, P as Ea, Q as Na, R as Oa, S as qa, T as za, U as Ua, V as Ja, W as Ka, X as Qa, Y as Wa, Z as Xa, _ as Ya } from "./M4LExtendedComponents/index-BO_x8lkT.js";
 function ta(a) {
   return Object.assign(
     s(a),
@@ -9,8 +9,8 @@ function ta(a) {
     r(a),
     L(a),
     M(a),
-    n(),
-    i(a),
+    i(),
+    n(a),
     p(),
     l(a),
     c(a),
@@ -29,11 +29,11 @@ function ta(a) {
     C(),
     S(),
     y(a),
-    I(a),
     R(a),
     v(a),
-    // TreeView(theme),
     H(a),
+    // TreeView(theme),
+    I(a),
     k(a),
     D(a),
     f(a),
@@ -67,8 +67,8 @@ function ta(a) {
     Y(a),
     La(a),
     Ma(a),
-    na(a),
     ia(a),
+    na(a),
     pa(a),
     la(a),
     ca(a),
@@ -84,10 +84,10 @@ function ta(a) {
     Ca(a),
     Sa(a),
     ya(a),
-    Ia(a),
     Ra(a),
     va(a),
     Ha(a),
+    Ia(a),
     ka(a),
     Da(),
     fa(a),

package/theme/palette/baseOpacityColors.d.ts

@@ -1,2 +1,5 @@
 import type { BaseOpacityPalettes, OpacityColors } from '../../types';
+/**
+ * Paleta de colores con opacidad
+*/
 export declare const BASE_OPACITY_COLORS: Record<BaseOpacityPalettes, OpacityColors>;

package/theme/palette/defaultColors.d.ts

@@ -0,0 +1,14 @@
+import { PaletteColor } from "@mui/material/styles";
+import { DefaultPresetColor } from "../../types";
+/**
+ * Opción de paleta default, se usa para construir la opcion de variable semántica default
+*/
+export declare const PRESET_DEFAULT: DefaultPresetColor;
+/**
+ * Opción de paleta default en modo light, se usa para colorear componentes con la variante semántica de tipo default
+*/
+export declare const DEFAULT_COLOR_LIGHT: Omit<PaletteColor, 'focusVisible' | 'contrastText'>;
+/**
+ * Opción de paleta default en modo dark, se usa para colorear componentes con la variante semántica de tipo default
+*/
+export declare const DEFAULT_COLOR_DARK: Omit<PaletteColor, 'focusVisible' | 'contrastText'>;

package/theme/palette/index.d.ts

@@ -3,4 +3,3 @@ export { BASE_OPACITY_COLORS } from './baseOpacityColors';
 export { COMMON_COLORS } from './commonColors';
 export { GREY_PALETTE } from './greyPalette';
 export { presetsOptions } from './presetColors';
-export * from './palette';

package/theme/palette/presetColors.d.ts

@@ -1,5 +1,19 @@
-import { PresetActionsPalettes, PresetPalettes, PresetsOptions } from '../../types';
-export declare const PRESET_COLORS: PresetPalettes;
-export declare const PRESET_ACTION_COLORS_LIGHT: PresetActionsPalettes;
-export declare const PRESET_ACTION_COLORS_DARK: PresetActionsPalettes;
+import { ThemePaletteColors, ThemePaletteColors as OursColorPalette, ThemePresetColors, PresetsOptions } from '../../types';
+/**
+ * Conjunto de paletas de colores usados para construir el tema seleccionado por el usario en la aplación.
+ * Sus opciones pueden ser patronus, turqui, grass, brown y blaze.
+*/
+export declare const PRESET_COLORS: ThemePresetColors;
+/**
+ * Colección de temas de color en modo light, se usan para aportar el color en los componentes de la apliación web.
+ * Se tiene en cuanta cuando la variable semántica aplicada al componente es de tipo primary.
+ * Sus opciones pueden ser patronus, turqui, grass, brown y blaze.
+*/
+export declare const PRIMARY_COLORS_LIGHT: ThemePaletteColors;
+/**
+ * Colección de temas de color en modo dark, se usan para aportar el color en los componentes de la apliación web.
+ * Se tiene en cuanta cuando la variable semántica aplicada al componente es de tipo primary.
+ * Sus opciones pueden ser patronus, turqui, grass, brown y blaze.
+*/
+export declare const PRIMARY_COLORS_DARK: OursColorPalette;
 export declare const presetsOptions: PresetsOptions;

package/theme/palette/semanticColors.d.ts

@@ -0,0 +1,16 @@
+import type { SemanticPresetColors, SemanticsPaletteColors } from '../../types';
+/**
+ * Paleta semántica predefinida, se usa para construir las opciones de variable semántica.
+ * Puden ser de tipo success, error, warning, info
+*/
+export declare const PRESET_SEMANTICS_COLORS: SemanticPresetColors;
+/**
+ * Opciones de paleta semántica en modo light, se usan para aportar el color en los componentes de la apliación web.
+ * Se tiene en cuanta cuando la variable semántica aplicada al componente es de tipo warning, error, success o info.
+*/
+export declare const SEMANTIC_COLORS_LIGHT: SemanticsPaletteColors;
+/**
+ * Opciones de paleta semántica en modo dark, se usan para aportar el color en los componentes de la apliación web.
+ * Se tiene en cuanta cuando la variable semántica aplicada al componente es de tipo warning, error, success o info.
+*/
+export declare const SEMANTIC_COLORS_DARK: SemanticsPaletteColors;