@m4l/styles 7.1.3 → 7.1.5

package/theme/palette/semanticColors.js

@@ -1,154 +1,198 @@
-import { B as a } from "./baseColors.js";
-import { B as i } from "./baseOpacityColors.js";
-const t = {
+import { B as t } from "./baseColors.js";
+import { B as a } from "./baseOpacityColors.js";
+const i = {
   info: {
-    main: a.crayonBlue[50],
-    lighter: a.crayonBlue[70],
-    light: a.crayonBlue[60],
-    dark: a.crayonBlue[40],
-    darker: a.crayonBlue[20],
-    contrastText: a.marbleLight[30],
-    toneOpacityLight: a.crayonBlue.toneOpacity10,
-    toneOpacityDark: a.crayonBlue.toneOpacity20,
-    opacityLight: i.crayon[10],
-    opacityDark: i.crayon[20]
+    main: t.crayonBlue[50],
+    lighter: t.crayonBlue[70],
+    light: t.crayonBlue[60],
+    dark: t.crayonBlue[40],
+    darker: t.crayonBlue[20],
+    contrastText: t.marbleLight[30],
+    // Tone colors
+    toneOpacityLight: t.crayonBlue.toneOpacity10,
+    toneOpacityDark: t.crayonBlue.toneOpacity20,
+    // opacity backgrounds light
+    opacityHoverLight: a.crayon[10],
+    opacityFocusLight: a.crayon[20],
+    opacityActiveLight: a.crayon[30],
+    // opacity backgrounds Dark
+    opacityHoverDark: a.crayon[20],
+    opacityFocusDark: a.crayon[30],
+    opacityActiveDark: a.crayon[40]
   },
   warning: {
-    main: a.middleYellow[50],
-    lighter: a.middleYellow[90],
-    light: a.middleYellow[70],
-    dark: a.middleYellow[30],
-    darker: a.middleYellow[20],
-    contrastText: a.onyx[20],
-    toneOpacityLight: a.middleYellow.toneOpacity10,
-    toneOpacityDark: a.middleYellow.toneOpacity20,
-    opacityLight: i.middle[10],
-    opacityDark: i.middle[20]
+    main: t.middleYellow[50],
+    lighter: t.middleYellow[90],
+    light: t.middleYellow[70],
+    dark: t.middleYellow[30],
+    darker: t.middleYellow[20],
+    contrastText: t.onyx[20],
+    // Tone colors
+    toneOpacityLight: t.middleYellow.toneOpacity10,
+    toneOpacityDark: t.middleYellow.toneOpacity20,
+    // opacity backgrounds light
+    opacityHoverLight: a.middle[10],
+    opacityFocusLight: a.middle[20],
+    opacityActiveLight: a.middle[30],
+    // opacity backgrounds Dark
+    opacityHoverDark: a.middle[20],
+    opacityFocusDark: a.middle[30],
+    opacityActiveDark: a.middle[40]
   },
   error: {
-    main: a.flameRed[50],
-    lighter: a.flameRed[70],
-    light: a.flameRed[60],
-    dark: a.flameRed[40],
-    darker: a.flameRed[20],
-    contrastText: a.marbleLight[30],
-    toneOpacityLight: a.flameRed.toneOpacity10,
-    toneOpacityDark: a.flameRed.toneOpacity20,
-    opacityLight: i.flame[10],
-    opacityDark: i.flame[20]
+    main: t.flameRed[50],
+    lighter: t.flameRed[70],
+    light: t.flameRed[60],
+    dark: t.flameRed[40],
+    darker: t.flameRed[20],
+    contrastText: t.marbleLight[30],
+    // Tone colors
+    toneOpacityLight: t.flameRed.toneOpacity10,
+    toneOpacityDark: t.flameRed.toneOpacity20,
+    // opacity backgrounds light
+    opacityHoverLight: a.flame[10],
+    opacityFocusLight: a.flame[20],
+    opacityActiveLight: a.flame[30],
+    // opacity backgrounds Dark
+    opacityHoverDark: a.flame[20],
+    opacityFocusDark: a.flame[30],
+    opacityActiveDark: a.flame[40]
   },
   success: {
-    main: a.acidGreen[50],
-    lighter: a.acidGreen[70],
-    light: a.acidGreen[60],
-    dark: a.acidGreen[30],
-    darker: a.acidGreen[20],
-    contrastText: a.marbleLight[20],
-    toneOpacityLight: a.acidGreen.toneOpacity10,
-    toneOpacityDark: a.acidGreen.toneOpacity20,
-    opacityLight: i.acid[10],
-    opacityDark: i.acid[20]
+    main: t.acidGreen[50],
+    lighter: t.acidGreen[70],
+    light: t.acidGreen[60],
+    dark: t.acidGreen[30],
+    darker: t.acidGreen[20],
+    contrastText: t.marbleLight[20],
+    // Tone colors
+    toneOpacityLight: t.acidGreen.toneOpacity10,
+    toneOpacityDark: t.acidGreen.toneOpacity20,
+    // opacity backgrounds light
+    opacityHoverLight: a.acid[10],
+    opacityFocusLight: a.acid[20],
+    opacityActiveLight: a.acid[30],
+    // opacity backgrounds Dark
+    opacityHoverDark: a.acid[20],
+    opacityFocusDark: a.acid[30],
+    opacityActiveDark: a.acid[40]
   }
 }, o = {
   info: {
-    main: t.info.main,
-    focusActive: t.info.lighter,
-    hover: t.info.light,
-    opacity: t.info.opacityLight,
-    toneOpacity: t.info.toneOpacityLight,
-    contrastText: t.info.contrastText,
-    hoverOpacity: t.info.opacityLight,
+    main: i.info.main,
+    active: i.info.lighter,
+    hover: i.info.light,
+    opacity: i.info.opacityHoverLight,
+    toneOpacity: i.info.toneOpacityLight,
+    contrastText: i.info.contrastText,
+    hoverOpacity: i.info.opacityHoverLight,
+    focusOpacity: i.info.opacityFocusLight,
+    activeOpacity: i.info.opacityActiveLight,
     //Por compatibilidad con MUI
-    light: t.info.light,
-    dark: t.info.dark
+    light: i.info.light,
+    dark: i.info.dark
   },
   success: {
-    main: t.success.main,
-    focusActive: t.success.lighter,
-    hover: t.success.light,
-    opacity: t.success.opacityLight,
-    toneOpacity: t.success.toneOpacityLight,
-    contrastText: t.success.contrastText,
-    hoverOpacity: t.success.opacityLight,
+    main: i.success.main,
+    active: i.success.lighter,
+    hover: i.success.light,
+    opacity: i.success.opacityHoverLight,
+    toneOpacity: i.success.toneOpacityLight,
+    contrastText: i.success.contrastText,
+    hoverOpacity: i.success.opacityHoverLight,
+    focusOpacity: i.success.opacityFocusLight,
+    activeOpacity: i.success.opacityActiveLight,
     //Por compatibilidad con MUI
-    light: t.success.light,
-    dark: t.success.dark
+    light: i.success.light,
+    dark: i.success.dark
   },
   warning: {
-    main: t.warning.main,
-    focusActive: t.warning.lighter,
-    hover: t.warning.light,
-    opacity: t.warning.opacityLight,
-    toneOpacity: t.warning.toneOpacityLight,
-    contrastText: t.warning.contrastText,
-    hoverOpacity: t.warning.opacityLight,
+    main: i.warning.main,
+    active: i.warning.lighter,
+    hover: i.warning.light,
+    opacity: i.warning.opacityHoverLight,
+    toneOpacity: i.warning.toneOpacityLight,
+    contrastText: i.warning.contrastText,
+    hoverOpacity: i.warning.opacityHoverLight,
+    focusOpacity: i.warning.opacityFocusLight,
+    activeOpacity: i.warning.opacityActiveLight,
     //Por compatibilidad con MUI
-    light: t.warning.light,
-    dark: t.warning.dark
+    light: i.warning.light,
+    dark: i.warning.dark
   },
   error: {
-    main: t.error.main,
-    focusActive: t.error.lighter,
-    hover: t.error.light,
-    opacity: t.error.opacityLight,
-    toneOpacity: t.error.toneOpacityLight,
-    contrastText: t.error.contrastText,
-    hoverOpacity: t.error.opacityLight,
+    main: i.error.main,
+    active: i.error.lighter,
+    hover: i.error.light,
+    opacity: i.error.opacityHoverLight,
+    toneOpacity: i.error.toneOpacityLight,
+    contrastText: i.error.contrastText,
+    hoverOpacity: i.error.opacityHoverLight,
+    focusOpacity: i.error.opacityFocusLight,
+    activeOpacity: i.error.opacityActiveLight,
     //Por compatibilidad con MUI
-    light: t.error.light,
-    dark: t.error.dark
+    light: i.error.light,
+    dark: i.error.dark
   }
-}, c = {
+}, e = {
   info: {
-    main: t.info.main,
-    focusActive: t.info.darker,
-    hover: t.info.dark,
-    opacity: t.info.opacityDark,
-    toneOpacity: t.info.toneOpacityDark,
-    contrastText: t.info.contrastText,
-    hoverOpacity: t.info.opacityDark,
+    main: i.info.main,
+    active: i.info.darker,
+    hover: i.info.dark,
+    opacity: i.info.opacityHoverDark,
+    toneOpacity: i.info.toneOpacityDark,
+    contrastText: i.info.contrastText,
+    hoverOpacity: i.info.opacityHoverDark,
+    focusOpacity: i.info.opacityFocusDark,
+    activeOpacity: i.info.opacityActiveDark,
     //Por compatibilidad con MUI
-    light: t.info.light,
-    dark: t.info.dark
+    light: i.info.light,
+    dark: i.info.dark
   },
   success: {
-    main: t.success.main,
-    focusActive: t.success.darker,
-    hover: t.success.dark,
-    opacity: t.success.opacityDark,
-    toneOpacity: t.success.toneOpacityDark,
-    contrastText: t.success.contrastText,
-    hoverOpacity: t.success.opacityDark,
+    main: i.success.main,
+    active: i.success.darker,
+    hover: i.success.dark,
+    opacity: i.success.opacityHoverDark,
+    toneOpacity: i.success.toneOpacityDark,
+    contrastText: i.success.contrastText,
+    hoverOpacity: i.success.opacityHoverDark,
+    focusOpacity: i.success.opacityFocusDark,
+    activeOpacity: i.success.opacityActiveDark,
     //Por compatibilidad con MUI
-    light: t.success.light,
-    dark: t.success.dark
+    light: i.success.light,
+    dark: i.success.dark
   },
   warning: {
-    main: t.warning.main,
-    focusActive: t.warning.darker,
-    hover: t.warning.dark,
-    opacity: t.warning.opacityDark,
-    toneOpacity: t.warning.toneOpacityDark,
-    contrastText: t.warning.contrastText,
-    hoverOpacity: t.warning.opacityDark,
+    main: i.warning.main,
+    active: i.warning.darker,
+    hover: i.warning.dark,
+    opacity: i.warning.opacityHoverDark,
+    toneOpacity: i.warning.toneOpacityDark,
+    contrastText: i.warning.contrastText,
+    hoverOpacity: i.warning.opacityHoverDark,
+    focusOpacity: i.warning.opacityFocusDark,
+    activeOpacity: i.warning.opacityActiveDark,
     //Por compatibilidad con MUI
-    light: t.warning.light,
-    dark: t.warning.dark
+    light: i.warning.light,
+    dark: i.warning.dark
   },
   error: {
-    main: t.error.main,
-    focusActive: t.error.darker,
-    hover: t.error.dark,
-    opacity: t.error.opacityDark,
-    toneOpacity: t.error.toneOpacityDark,
-    contrastText: t.error.contrastText,
-    hoverOpacity: t.error.opacityDark,
+    main: i.error.main,
+    active: i.error.darker,
+    hover: i.error.dark,
+    opacity: i.error.opacityHoverDark,
+    toneOpacity: i.error.toneOpacityDark,
+    contrastText: i.error.contrastText,
+    hoverOpacity: i.error.opacityHoverDark,
+    focusOpacity: i.error.opacityFocusDark,
+    activeOpacity: i.error.opacityActiveDark,
     //Por compatibilidad con MUI
-    light: t.error.light,
-    dark: t.error.dark
+    light: i.error.light,
+    dark: i.error.dark
   }
 };
 export {
   o as S,
-  c as a
+  e as a
 };

package/theme/palette/tagsPalette.d.ts

@@ -0,0 +1,13 @@
+export interface TagColor {
+    contrastText: string;
+    backgroundColor: string;
+}
+export type TagColorOptions = 'default' | 'warning' | 'warningOpacity' | 'error' | 'errorOpacity' | 'success' | 'successOpacity' | 'info' | 'infoOpacity';
+/**
+ * Lista de colores definidos para pintar los tags en modo light
+ */
+export declare const BASE_TAG_OBJECT_COLORS_LIGHT: Record<TagColorOptions, TagColor>;
+/**
+ * Lista de colores definidos para pintar los tags en modo light
+ */
+export declare const BASE_TAG_OBJECT_COLORS_DARK: Record<TagColorOptions, TagColor>;

package/theme/sizes/pointerQr.js

@@ -1,5 +1,5 @@
-import { P as a } from "./presetSizes.js";
-const n = {
+import { P as a, a as e } from "./presetSizes.js";
+const i = {
   small: {
     base: a.base.small,
     action: a.action.small,
@@ -15,24 +15,24 @@ const n = {
     action: a.action.large,
     container: a.container.large
   }
-}, i = {
+}, o = {
   small: {
-    base: a.base.small,
-    action: a.action.small,
-    container: a.container.small
+    base: e.base.small,
+    action: e.action.small,
+    container: e.container.small
   },
   medium: {
-    base: a.base.medium,
-    action: a.action.medium,
-    container: a.container.medium
+    base: e.base.medium,
+    action: e.action.medium,
+    container: e.container.medium
   },
   large: {
-    base: a.base.large,
-    action: a.action.large,
-    container: a.container.large
+    base: e.base.large,
+    action: e.action.large,
+    container: e.container.large
   }
 };
 export {
-  n as P,
-  i as a
+  i as P,
+  o as a
 };

package/theme/sizes/presetSizes.js

@@ -1,5 +1,21 @@
 import { B as s } from "./baseSizes.js";
 const m = {
+  base: {
+    small: s.sp5,
+    medium: s.sp6,
+    large: s.sp7
+  },
+  action: {
+    small: s.sp7,
+    medium: s.sp8,
+    large: s.sp9
+  },
+  container: {
+    small: s.sp9,
+    medium: s.sp10,
+    large: s.sp11
+  }
+}, p = {
   base: {
     small: s["sp3-5"],
     medium: s.sp4,
@@ -17,5 +33,6 @@ const m = {
   }
 };
 export {
-  m as P
+  p as P,
+  m as a
 };

package/theme/typography.d.ts

@@ -4,7 +4,10 @@ export type FontProps = {
     lineHeight: string;
     letterSpacing: string;
 };
-export type M4LTypographyVariants = 'h1' | 'h3' | 'h5' | 'subtitle' | 'subtitleDens' | 'paragraph' | 'paragraphDens' | 'body' | 'bodyDens' | 'action';
+/**
+ * Listas de variantes de tipografía disponibles para la aplicación web.
+ */
+export type M4LTypographyVariants = 'h1' | 'h2' | 'h3' | 'h5' | 'subtitle' | 'subtitleDens' | 'paragraph' | 'paragraphDens' | 'body' | 'bodyDens';
 export interface TypographyVariants {
     subtitle: FontProps;
     subtitleDens: FontProps;
@@ -15,7 +18,7 @@ export interface TypographyVariants {
     action: FontProps;
 }
 export declare const typography: {
-    readonly fontFamily: "Segoe UI, Poppins, sans-serif";
+    readonly fontFamily: "Inter, Segoe UI, Poppins, sans-serif";
     readonly fontWeightRegular: 400;
     readonly fontWeightMedium: 600;
     readonly fontWeightBold: 700;

package/theme/typography.js

@@ -1,6 +1,6 @@
 import { createTheme as i } from "@mui/material";
 import { a as e, p as t } from "../utils/getFontValue.js";
-const n = "Segoe UI, Poppins, sans-serif", g = i(), l = {
+const n = "Inter, Segoe UI, Poppins, sans-serif", g = i(), l = {
   ...g.typography,
   fontFamily: n,
   fontWeightRegular: 400,

package/types/augmentations.d.ts

@@ -23,10 +23,12 @@ declare module '@mui/material/styles' {
     // dark: string; ***  Por compatibilidad con MUI
     // contrastText: string; ***
 
-    focusActive: string;
+    active: string;
     focusVisible: string;
     hover: string;
     hoverOpacity: string;
+    activeOpacity: string;
+    focusOpacity: string;
     opacity: string;
     toneOpacity: string;
   }

package/types/types.d.ts

@@ -51,10 +51,20 @@ export interface PresetColor {
     lighter: string;
     toneOpacityLight: string;
     /**
-     * Permite definir fondos de componentes en estados hover y focus dependiendo de la necesidad.
+     * Permite definir fondos de componentes en estados hover dependiendo del modo de la aplicación web.
      */
-    opacityLight: string;
-    opacityDark: string;
+    opacityHoverLight: string;
+    opacityHoverDark: string;
+    /**
+     * Permite definir fondos de componentes en estados focus dependiendo del modo de la aplicación web.
+     */
+    opacityFocusLight: string;
+    opacityFocusDark: string;
+    /**
+     * Permite definir fondos de componentes en estados active dependiendo del modo de la aplicación web.
+     */
+    opacityActiveLight: string;
+    opacityActiveDark: string;
     dark: string;
     darker: string;
     toneOpacityDark: string;

package/utils/getPaletteByPreset.d.ts

@@ -15,10 +15,12 @@ export declare const getPaletteByPreset: (themeUserColor: ThemeUserColor) => {
             readonly main: string;
             readonly dark: string;
             readonly contrastText: string;
-            readonly focusActive: string;
+            readonly active: string;
             readonly focusVisible: string;
             readonly hover: string;
             readonly hoverOpacity: string;
+            readonly activeOpacity: string;
+            readonly focusOpacity: string;
             readonly opacity: string;
             readonly toneOpacity: string;
         };
@@ -28,9 +30,11 @@ export declare const getPaletteByPreset: (themeUserColor: ThemeUserColor) => {
             readonly light: string;
             readonly dark: string;
             readonly main: string;
-            readonly focusActive: string;
+            readonly active: string;
             readonly hover: string;
             readonly hoverOpacity: string;
+            readonly activeOpacity: string;
+            readonly focusOpacity: string;
             readonly opacity: string;
             readonly toneOpacity: string;
         };
@@ -70,9 +74,11 @@ export declare const getPaletteByPreset: (themeUserColor: ThemeUserColor) => {
             readonly dark: string;
             readonly main: string;
             readonly contrastText: string;
-            readonly focusActive: string;
+            readonly active: string;
             readonly hover: string;
             readonly hoverOpacity: string;
+            readonly activeOpacity: string;
+            readonly focusOpacity: string;
             readonly opacity: string;
             readonly toneOpacity: string;
         };
@@ -82,9 +88,11 @@ export declare const getPaletteByPreset: (themeUserColor: ThemeUserColor) => {
             readonly dark: string;
             readonly main: string;
             readonly contrastText: string;
-            readonly focusActive: string;
+            readonly active: string;
             readonly hover: string;
             readonly hoverOpacity: string;
+            readonly activeOpacity: string;
+            readonly focusOpacity: string;
             readonly opacity: string;
             readonly toneOpacity: string;
         };
@@ -94,9 +102,11 @@ export declare const getPaletteByPreset: (themeUserColor: ThemeUserColor) => {
             readonly dark: string;
             readonly main: string;
             readonly contrastText: string;
-            readonly focusActive: string;
+            readonly active: string;
             readonly hover: string;
             readonly hoverOpacity: string;
+            readonly activeOpacity: string;
+            readonly focusOpacity: string;
             readonly opacity: string;
             readonly toneOpacity: string;
         };
@@ -106,9 +116,11 @@ export declare const getPaletteByPreset: (themeUserColor: ThemeUserColor) => {
             readonly dark: string;
             readonly main: string;
             readonly contrastText: string;
-            readonly focusActive: string;
+            readonly active: string;
             readonly hover: string;
             readonly hoverOpacity: string;
+            readonly activeOpacity: string;
+            readonly focusOpacity: string;
             readonly opacity: string;
             readonly toneOpacity: string;
         };
@@ -121,10 +133,12 @@ export declare const getPaletteByPreset: (themeUserColor: ThemeUserColor) => {
             readonly main: string;
             readonly dark: string;
             readonly contrastText: string;
-            readonly focusActive: string;
+            readonly active: string;
             readonly focusVisible: string;
             readonly hover: string;
             readonly hoverOpacity: string;
+            readonly activeOpacity: string;
+            readonly focusOpacity: string;
             readonly opacity: string;
             readonly toneOpacity: string;
         };
@@ -134,9 +148,11 @@ export declare const getPaletteByPreset: (themeUserColor: ThemeUserColor) => {
             readonly light: string;
             readonly dark: string;
             readonly main: string;
-            readonly focusActive: string;
+            readonly active: string;
             readonly hover: string;
             readonly hoverOpacity: string;
+            readonly activeOpacity: string;
+            readonly focusOpacity: string;
             readonly opacity: string;
             readonly toneOpacity: string;
         };
@@ -176,9 +192,11 @@ export declare const getPaletteByPreset: (themeUserColor: ThemeUserColor) => {
             readonly dark: string;
             readonly main: string;
             readonly contrastText: string;
-            readonly focusActive: string;
+            readonly active: string;
             readonly hover: string;
             readonly hoverOpacity: string;
+            readonly activeOpacity: string;
+            readonly focusOpacity: string;
             readonly opacity: string;
             readonly toneOpacity: string;
         };
@@ -188,9 +206,11 @@ export declare const getPaletteByPreset: (themeUserColor: ThemeUserColor) => {
             readonly dark: string;
             readonly main: string;
             readonly contrastText: string;
-            readonly focusActive: string;
+            readonly active: string;
             readonly hover: string;
             readonly hoverOpacity: string;
+            readonly activeOpacity: string;
+            readonly focusOpacity: string;
             readonly opacity: string;
             readonly toneOpacity: string;
         };
@@ -200,9 +220,11 @@ export declare const getPaletteByPreset: (themeUserColor: ThemeUserColor) => {
             readonly dark: string;
             readonly main: string;
             readonly contrastText: string;
-            readonly focusActive: string;
+            readonly active: string;
             readonly hover: string;
             readonly hoverOpacity: string;
+            readonly activeOpacity: string;
+            readonly focusOpacity: string;
             readonly opacity: string;
             readonly toneOpacity: string;
         };
@@ -212,9 +234,11 @@ export declare const getPaletteByPreset: (themeUserColor: ThemeUserColor) => {
             readonly dark: string;
             readonly main: string;
             readonly contrastText: string;
-            readonly focusActive: string;
+            readonly active: string;
             readonly hover: string;
             readonly hoverOpacity: string;
+            readonly activeOpacity: string;
+            readonly focusOpacity: string;
             readonly opacity: string;
             readonly toneOpacity: string;
         };

package/utils/getPaletteByPreset.js

@@ -4,7 +4,7 @@ import { C as c } from "../theme/palette/commonColors.js";
 import { G as d } from "../theme/palette/greyPalette.js";
 import { S as s, a } from "../theme/palette/semanticColors.js";
 import { B as o } from "../theme/palette/baseOpacityColors.js";
-import { D as f, a as u } from "../theme/palette/defaultColors.js";
+import { B as f, a as u } from "../theme/palette/defaultColors.js";
 const t = {
   light: {
     scrollBar: "#5663763D",
@@ -14,7 +14,7 @@ const t = {
     scrollBar: "#5663765D",
     gridHover: "#282E2E"
   }
-}, C = (l) => {
+}, p = (l) => {
   const i = m?.[l], e = b?.[l];
   return {
     light: {
@@ -141,5 +141,5 @@ const t = {
   };
 };
 export {
-  C as g
+  p as g
 };