@m4l/styles 7.1.30 → 7.1.31

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@m4l/styles",
-  "version": "7.1.30",
+  "version": "7.1.31",
   "license": "UNLICENSED",
   "author": "m4l team",
   "publishConfig": {

package/theme/palette/presetColors.js

@@ -23,9 +23,9 @@ const a = {
     // comprobado,
     focusDark: t.patronusBlue[60],
     // comprobado,
-    enabledOpacityLight: e.patronus[30],
+    enabledOpacityLight: e.patronus[10],
     // comprobado
-    enabledOpacityDark: e.patronus[30],
+    enabledOpacityDark: e.patronus[10],
     // comprobado,
     hoverOpacityLight: e.patronus[20],
     // comprobado,
@@ -67,9 +67,9 @@ const a = {
     // comprobado,,
     contrastText: t.marbleLight[30],
     // comprobado,
-    semanticTextLight: t.patronusBlue[70],
+    semanticTextLight: t.patronusBlue[60],
     // comprobado,
-    semanticTextDark: t.patronusBlue[30],
+    semanticTextDark: t.patronusBlue[40],
     // comprobado,
     // Tone colors
     toneOpacityLight: t.patronusBlue[5],
@@ -147,9 +147,9 @@ const a = {
     // comprobado,,
     contrastText: t.marbleLight[30],
     // comprobado,
-    semanticTextLight: t.grassGreen[60],
+    semanticTextLight: t.grassGreen[50],
     // comprobado,
-    semanticTextDark: t.grassGreen[30],
+    semanticTextDark: t.grassGreen[40],
     // comprobado,
     // Tone colors
     toneOpacityLight: t.grassGreen[5],
@@ -227,9 +227,9 @@ const a = {
     // comprobado,,
     contrastText: t.marbleLight[30],
     // comprobado,
-    semanticTextLight: t.turquiBlue[50],
+    semanticTextLight: t.turquiBlue[40],
     // comprobado,
-    semanticTextDark: t.turquiBlue[20],
+    semanticTextDark: t.turquiBlue[30],
     // comprobado,
     // Tone colors
     toneOpacityLight: t.turquiBlue[5],
@@ -307,9 +307,9 @@ const a = {
     // comprobado,,
     contrastText: t.marbleLight[30],
     // comprobado,
-    semanticTextLight: t.brown[50],
+    semanticTextLight: t.brown[40],
     // comprobado,
-    semanticTextDark: t.brown[10],
+    semanticTextDark: t.brown[30],
     // comprobado,
     // Tone colors
     toneOpacityLight: t.brown[5],

package/theme/shadows.d.ts

@@ -5,6 +5,7 @@ export interface CustomShadowOptions {
     z3: string;
     z4: string;
     primary?: string;
+    primary2?: string;
     secondary: string;
     info: string;
     success: string;

package/theme/sizes/baseSizes.js

@@ -7,9 +7,13 @@ const p = {
   sp3: "12px",
   "sp3-5": "14px",
   sp4: "16px",
+  "sp4-5": "18px",
   sp5: "20px",
+  "sp5-5": "22px",
   sp6: "24px",
+  "sp6-5": "26px",
   sp7: "28px",
+  "sp7-5": "30px",
   sp8: "32px",
   sp9: "36px",
   sp10: "40px",

package/theme/sizes/pointerQr.js

@@ -1,38 +1,50 @@
 import { P as a, a as e } from "./presetSizes.js";
-const i = {
+const o = {
   small: {
     base: a.base.small,
     action: a.action.small,
-    container: a.container.small
+    container: a.container.small,
+    box: a.box.small,
+    case: a.case.small
   },
   medium: {
     base: a.base.medium,
     action: a.action.medium,
-    container: a.container.medium
+    container: a.container.medium,
+    box: a.box.medium,
+    case: a.case.medium
   },
   large: {
     base: a.base.large,
     action: a.action.large,
-    container: a.container.large
+    container: a.container.large,
+    box: a.box.large,
+    case: a.case.large
   }
-}, o = {
+}, c = {
   small: {
     base: e.base.small,
     action: e.action.small,
-    container: e.container.small
+    container: e.container.small,
+    box: e.box.small,
+    case: e.case.small
   },
   medium: {
     base: e.base.medium,
     action: e.action.medium,
-    container: e.container.medium
+    container: e.container.medium,
+    box: e.box.medium,
+    case: e.case.medium
   },
   large: {
     base: e.base.large,
     action: e.action.large,
-    container: e.container.large
+    container: e.container.large,
+    box: e.box.large,
+    case: e.case.large
   }
 };
 export {
-  i as P,
-  o as a
+  o as P,
+  c as a
 };

package/theme/sizes/presetSizes.js

@@ -14,6 +14,16 @@ const m = {
     small: s.sp9,
     medium: s.sp10,
     large: s.sp11
+  },
+  box: {
+    small: s.sp7,
+    medium: s["sp7-5"],
+    large: s.sp8
+  },
+  case: {
+    small: s["sp5-5"],
+    medium: s.sp4,
+    large: s.sp6
   }
 }, p = {
   base: {
@@ -30,6 +40,16 @@ const m = {
     small: s.sp7,
     medium: s.sp8,
     large: s.sp9
+  },
+  box: {
+    small: s["sp6-5"],
+    medium: s.sp7,
+    large: s.sp8
+  },
+  case: {
+    small: s["sp4-5"],
+    medium: s.sp5,
+    large: s.sp6
   }
 };
 export {

package/theme/sizes/types.d.ts

@@ -20,9 +20,13 @@ export interface BaseSpacings {
     sp3: string;
     'sp3-5': string;
     sp4: string;
+    'sp4-5': string;
     sp5: string;
+    'sp5-5': string;
     sp6: string;
+    'sp6-5': string;
     sp7: string;
+    'sp7-5': string;
     sp8: string;
     sp9: string;
     sp10: string;
@@ -48,7 +52,7 @@ export type SizesValues = Record<Sizes, Record<SizesComponentsTypes, string>>;
  * action: Es la clasificación de altura para componentes de tipo acción, los cuales son MenuItems, HeaderPopover, IconButton, Button, etc.
  * container: Es la clasificación de altura para componentes de tipo contenedor, los cuales son DinamicFilter, DinamicSort, HeaderModule, Tabs, etc.
  */
-export type SizesComponentsTypes = 'base' | 'action' | 'container';
+export type SizesComponentsTypes = 'base' | 'action' | 'container' | 'box' | 'case';
 /**
  * Representa el conjunto de tamaños separados en categorías de componentes para la aplicación web.
  * Se dividen en los siguientes tipos; base, action y container. Cada opción de categoría define

package/utils/getPaletteByPreset.js

@@ -11,7 +11,7 @@ const l = {
     scrollBar: "#5663763D",
     gridHover: "#FCFCFC"
   }
-}, A = (n) => {
+}, x = (n) => {
   const r = f?.[n], e = g?.[n];
   return {
     light: {
@@ -64,7 +64,7 @@ const l = {
             // Comprobado
           },
           contained: {
-            color: o.marbleLight[30],
+            color: r.semanticText,
             // Comprobado
             backgroundColor: r.enabledOpacity,
             // Comprobado
@@ -171,7 +171,7 @@ const l = {
             // Comprobado
           },
           contained: {
-            color: o.marbleLight[30],
+            color: e.semanticText,
             // Comprobado
             backgroundColor: e.enabledOpacity,
             // Comprobado
@@ -232,5 +232,5 @@ const l = {
   };
 };
 export {
-  A as g
+  x as g
 };

package/utils/getUserThemeOptions.js

@@ -1,26 +1,27 @@
-import { createTheme as e, alpha as r } from "@mui/material";
-import { t as s } from "../theme/typographyOld.js";
-import { c as i, s as g } from "../theme/shadows.js";
-import { S as x } from "../theme/sizes/size.js";
+import { createTheme as g, alpha as a } from "@mui/material";
+import { t as i } from "../theme/typographyOld.js";
+import { c as o, s } from "../theme/shadows.js";
+import { S as y } from "../theme/sizes/size.js";
 import { g as m } from "./getPaletteByPreset.js";
-import { g as o } from "./getColorPresets.js";
-function u(t, p) {
-  const a = e();
+import { g as t } from "./getColorPresets.js";
+function u(x, p) {
+  const r = g();
   return {
-    ...a,
-    ...a.typography,
-    ...s,
-    ...g[t],
+    ...r,
+    ...r.typography,
+    ...i,
+    ...s[x],
     customShadows: {
-      primary: t === "light" ? `0 4px 8px -4px ${r(o(p)?.enabledLight, 0.12)},
-       0 2px 27px 2px ${r(o(p)?.enabledLight, 0.02)}` : `0 4px 8px -4px ${r(o(p)?.enabledDark, 0.12)},
-       0 2px 27px 2px ${r(o(p)?.enabledDark, 0.02)}`,
-      ...i(t)
+      primary: x === "light" ? `0 4px 8px -4px ${a(t(p)?.enabledLight, 0.12)},
+       0 2px 27px 2px ${a(t(p)?.enabledLight, 0.02)}` : `0 4px 8px -4px ${a(t(p)?.enabledDark, 0.12)},
+       0 2px 27px 2px ${a(t(p)?.enabledDark, 0.02)}`,
+      primary2: x === "light" ? `0px 2px 3px 0px ${a(t(p)?.hoverOpacityLight, 0.2)}` : `0px 2px 3px 0px ${a(t(p)?.hoverOpacityDark, 0.2)}`,
+      ...o(x)
     },
     stretch: !0,
-    palette: { ...a.palette, ...m(p)[t] },
-    typography: { ...a.typography, ...s },
-    size: x
+    palette: { ...r.palette, ...m(p)[x] },
+    typography: { ...r.typography, ...i },
+    size: y
   };
 }
 export {