@m4l/styles 7.1.26 → 7.1.28

package/theme/typography/types.d.ts

@@ -58,12 +58,13 @@ export interface BaseFontSize {
 /**
  * Lista de variantes semánticas en tipografía que se pueden utilizar en la aplicación web.
  */
-export type TypographyVariants = 'h1' | 'h2' | 'h3' | 'h5' | 'subtitle' | 'subtitleDens' | 'paragraph' | 'paragraphDens' | 'body' | 'bodyDens';
+export type TypographyVariants = 'h1' | 'h2' | 'h3' | 'h5' | 'subtitle' | 'subtitleDens' | 'paragraph' | 'paragraphDens' | 'caption' | 'captionDens' | 'body' | 'bodyDens';
 /**
  *  Representa los valores predefinidos para los espaciados entre caracteres en la aplicación web.
  */
 export interface BaseLetterSpacing {
-    '0.5': '0.5px';
+    normal: string;
+    dens: string;
 }
 /**
  * Lista de atributos css que se pueden aplicar a los textos en la aplicación web.
@@ -101,6 +102,7 @@ export interface BaseWeight {
     regular: number;
     dens: number;
     number: number;
+    medium: number;
 }
 /**
  * Representa el conjunto con el que los desarrolladores seleccionan el tamaño de los direntes textos en la aplicación web.

package/theme/typography/typography.js

@@ -1,14 +1,14 @@
 import { B as o } from "./baseLetterSpacing.js";
 import { B as E } from "./baseLineHeight.js";
-import { B as t } from "./baseWeight.js";
-import { T as r, a as S } from "./typographySizes.js";
-const a = {
-  mobile: r,
-  desktop: S,
+import { B as r } from "./baseWeight.js";
+import { T as t, a as m } from "./typographySizes.js";
+const _ = {
+  mobile: t,
+  desktop: m,
   lineHeight: E,
-  weight: t,
-  letterSpacing: o["0.5"]
+  weight: r,
+  letterSpacing: o.normal
 };
 export {
-  a as T
+  _ as T
 };

package/theme/typography/typographySizes.js

@@ -2,67 +2,79 @@ import { B as e } from "./baseFontSize.js";
 import { B as t } from "./baseLetterSpacing.js";
 import { B as n } from "./baseLineHeight.js";
 import { B as i } from "./baseWeight.js";
-const a = {
+const g = {
   small: {
     h1: {
       fontSize: e.pt42,
       fontWeight: i.dens,
       lineHeight: n.normal,
-      letterSpacing: t["0.5"]
+      letterSpacing: t.normal
     },
     h2: {
       fontSize: e.pt32,
       fontWeight: i.dens,
       lineHeight: n.normal,
-      letterSpacing: t["0.5"]
+      letterSpacing: t.normal
     },
     h3: {
       fontSize: e.pt26,
       fontWeight: i.dens,
       lineHeight: n.normal,
-      letterSpacing: t["0.5"]
+      letterSpacing: t.normal
     },
     h5: {
       fontSize: e.pt20,
       fontWeight: i.dens,
       lineHeight: n.normal,
-      letterSpacing: t["0.5"]
+      letterSpacing: t.normal
     },
     subtitle: {
       fontSize: e.pt17,
       fontWeight: i.regular,
       lineHeight: n.normal,
-      letterSpacing: t["0.5"]
+      letterSpacing: t.normal
     },
     subtitleDens: {
       fontSize: e.pt17,
       fontWeight: i.dens,
       lineHeight: n.normal,
-      letterSpacing: t["0.5"]
+      letterSpacing: t.dens
     },
     paragraph: {
-      fontSize: e.pt15,
+      fontSize: e.pt14,
       fontWeight: i.regular,
       lineHeight: n.normal,
-      letterSpacing: t["0.5"]
+      letterSpacing: t.normal
     },
     paragraphDens: {
-      fontSize: e.pt15,
+      fontSize: e.pt14,
       fontWeight: i.dens,
       lineHeight: n.normal,
-      letterSpacing: t["0.5"]
+      letterSpacing: t.dens
     },
     body: {
-      fontSize: e.pt13,
+      fontSize: e.pt12,
       fontWeight: i.regular,
-      lineHeight: n.lh3,
-      letterSpacing: t["0.5"]
+      lineHeight: n.normal,
+      letterSpacing: t.normal
     },
     bodyDens: {
-      fontSize: e.pt13,
+      fontSize: e.pt12,
       fontWeight: i.dens,
-      lineHeight: n.lh3,
-      letterSpacing: t["0.5"]
+      lineHeight: n.normal,
+      letterSpacing: t.dens
+    },
+    caption: {
+      fontSize: e.pt14,
+      fontWeight: i.regular,
+      lineHeight: n.normal,
+      letterSpacing: t.normal
+    },
+    captionDens: {
+      fontSize: e.pt14,
+      fontWeight: i.dens,
+      lineHeight: n.normal,
+      letterSpacing: t.dens
     }
   },
   medium: {
@@ -70,124 +82,148 @@ const a = {
       fontSize: e.pt44,
       fontWeight: i.dens,
       lineHeight: n.normal,
-      letterSpacing: t["0.5"]
+      letterSpacing: t.normal
     },
     h2: {
       fontSize: e.pt32,
       fontWeight: i.dens,
       lineHeight: n.normal,
-      letterSpacing: t["0.5"]
+      letterSpacing: t.normal
     },
     h3: {
       fontSize: e.pt28,
       fontWeight: i.dens,
       lineHeight: n.normal,
-      letterSpacing: t["0.5"]
+      letterSpacing: t.normal
     },
     h5: {
       fontSize: e.pt20,
       fontWeight: i.dens,
       lineHeight: n.normal,
-      letterSpacing: t["0.5"]
+      letterSpacing: t.normal
     },
     subtitle: {
-      fontSize: e.pt18,
+      fontSize: e.pt16,
       fontWeight: i.regular,
       lineHeight: n.normal,
-      letterSpacing: t["0.5"]
+      letterSpacing: t.normal
     },
     subtitleDens: {
-      fontSize: e.pt18,
+      fontSize: e.pt16,
       fontWeight: i.dens,
       lineHeight: n.normal,
-      letterSpacing: t["0.5"]
+      letterSpacing: t.dens
     },
     paragraph: {
-      fontSize: e.pt15,
+      fontSize: e.pt14,
       fontWeight: i.regular,
       lineHeight: n.normal,
-      letterSpacing: t["0.5"]
+      letterSpacing: t.normal
     },
     paragraphDens: {
-      fontSize: e.pt15,
+      fontSize: e.pt14,
       fontWeight: i.dens,
       lineHeight: n.normal,
-      letterSpacing: t["0.5"]
+      letterSpacing: t.dens
     },
     body: {
-      fontSize: e.pt14,
+      fontSize: e.pt12,
       fontWeight: i.regular,
       lineHeight: n.normal,
-      letterSpacing: t["0.5"]
+      letterSpacing: t.normal
     },
     bodyDens: {
+      fontSize: e.pt12,
+      fontWeight: i.dens,
+      lineHeight: n.normal,
+      letterSpacing: t.dens
+    },
+    caption: {
+      fontSize: e.pt14,
+      fontWeight: i.regular,
+      lineHeight: n.normal,
+      letterSpacing: t.normal
+    },
+    captionDens: {
       fontSize: e.pt14,
       fontWeight: i.dens,
       lineHeight: n.normal,
-      letterSpacing: t["0.5"]
+      letterSpacing: t.dens
     }
   }
-}, h = {
+}, p = {
   small: {
     h1: {
       fontSize: e.pt54,
       fontWeight: i.dens,
       lineHeight: n.normal,
-      letterSpacing: t["0.5"]
+      letterSpacing: t.normal
     },
     h2: {
       fontSize: e.pt42,
       fontWeight: i.dens,
       lineHeight: n.normal,
-      letterSpacing: t["0.5"]
+      letterSpacing: t.normal
     },
     h3: {
       fontSize: e.pt30,
       fontWeight: i.dens,
       lineHeight: n.normal,
-      letterSpacing: t["0.5"]
+      letterSpacing: t.normal
     },
     h5: {
       fontSize: e.pt26,
       fontWeight: i.dens,
       lineHeight: n.normal,
-      letterSpacing: t["0.5"]
+      letterSpacing: t.normal
     },
     subtitle: {
       fontSize: e.pt14,
       fontWeight: i.regular,
       lineHeight: n.normal,
-      letterSpacing: t["0.5"]
+      letterSpacing: t.normal
     },
     subtitleDens: {
       fontSize: e.pt14,
       fontWeight: i.dens,
       lineHeight: n.normal,
-      letterSpacing: t["0.5"]
+      letterSpacing: t.dens
     },
     paragraph: {
       fontSize: e.pt12,
       fontWeight: i.regular,
       lineHeight: n.normal,
-      letterSpacing: t["0.5"]
+      letterSpacing: t.normal
     },
     paragraphDens: {
       fontSize: e.pt12,
       fontWeight: i.dens,
       lineHeight: n.normal,
-      letterSpacing: t["0.5"]
+      letterSpacing: t.dens
     },
     body: {
       fontSize: e.pt10,
       fontWeight: i.regular,
-      lineHeight: n.lh1,
-      letterSpacing: t["0.5"]
+      lineHeight: n.normal,
+      letterSpacing: t.normal
     },
     bodyDens: {
       fontSize: e.pt10,
       fontWeight: i.dens,
-      lineHeight: n.lh1,
-      letterSpacing: t["0.5"]
+      lineHeight: n.normal,
+      letterSpacing: t.dens
+    },
+    caption: {
+      fontSize: e.pt12,
+      fontWeight: i.regular,
+      lineHeight: n.normal,
+      letterSpacing: t.normal
+    },
+    captionDens: {
+      fontSize: e.pt12,
+      fontWeight: i.dens,
+      lineHeight: n.normal,
+      letterSpacing: t.dens
     }
   },
   medium: {
@@ -195,65 +231,77 @@ const a = {
       fontSize: e.pt56,
       fontWeight: i.dens,
       lineHeight: n.normal,
-      letterSpacing: t["0.5"]
+      letterSpacing: t.normal
     },
     h2: {
       fontSize: e.pt44,
       fontWeight: i.dens,
       lineHeight: n.normal,
-      letterSpacing: t["0.5"]
+      letterSpacing: t.normal
     },
     h3: {
       fontSize: e.pt32,
       fontWeight: i.dens,
       lineHeight: n.normal,
-      letterSpacing: t["0.5"]
+      letterSpacing: t.normal
     },
     h5: {
       fontSize: e.pt28,
       fontWeight: i.dens,
       lineHeight: n.normal,
-      letterSpacing: t["0.5"]
+      letterSpacing: t.normal
     },
     subtitle: {
       fontSize: e.pt15,
       fontWeight: i.regular,
       lineHeight: n.normal,
-      letterSpacing: t["0.5"]
+      letterSpacing: t.normal
     },
     subtitleDens: {
       fontSize: e.pt15,
       fontWeight: i.dens,
       lineHeight: n.normal,
-      letterSpacing: t["0.5"]
+      letterSpacing: t.dens
     },
     paragraph: {
       fontSize: e.pt13,
       fontWeight: i.regular,
       lineHeight: n.normal,
-      letterSpacing: t["0.5"]
+      letterSpacing: t.normal
     },
     paragraphDens: {
       fontSize: e.pt13,
       fontWeight: i.dens,
       lineHeight: n.normal,
-      letterSpacing: t["0.5"]
+      letterSpacing: t.dens
     },
     body: {
       fontSize: e.pt11,
       fontWeight: i.regular,
       lineHeight: n.normal,
-      letterSpacing: t["0.5"]
+      letterSpacing: t.normal
     },
     bodyDens: {
       fontSize: e.pt11,
       fontWeight: i.dens,
       lineHeight: n.normal,
-      letterSpacing: t["0.5"]
+      letterSpacing: t.dens
+    },
+    caption: {
+      fontSize: e.pt12,
+      fontWeight: i.regular,
+      lineHeight: n.normal,
+      letterSpacing: t.normal
+    },
+    captionDens: {
+      fontSize: e.pt12,
+      fontWeight: i.dens,
+      lineHeight: n.normal,
+      letterSpacing: t.dens
     }
   }
 };
 export {
-  a as T,
-  h as a
+  g as T,
+  p as a
 };

package/types/augmentations.d.ts

@@ -107,6 +107,8 @@ declare module '@mui/material/styles' {
     surface: string;
     hover: string;
     backdrop: string;
+    base: string;
+    blur: string;
   }
   interface TypographyVariants {
     subtitle: Record<string, any>;
@@ -116,6 +118,8 @@ declare module '@mui/material/styles' {
     body: Record<string, any>;
     bodyDens: Record<string, any>;
     action: Record<string, any>;
+    caption: Record<string, any>;
+    captionDens: Record<string, any>;
   }
   interface TypographyVariantsOptions {
     subtitle: React.CSSProperties;
@@ -125,6 +129,8 @@ declare module '@mui/material/styles' {
     body: React.CSSProperties;
     bodyDens: React.CSSProperties;
     action: React.CSSProperties;
+    caption: React.CSSProperties;
+    captionDens: React.CSSProperties;
   }
 }
 declare module '@mui/material/Typography' {
@@ -136,5 +142,7 @@ declare module '@mui/material/Typography' {
     body: true;
     bodyDens: true;
     action: true;
+    caption: true;
+    captionDens: true;
   }
 }

package/types/types.d.ts

@@ -15,8 +15,8 @@ export type SemanticColorOptionsType = 'info' | 'success' | 'warning' | 'error';
  * Son los conjuntos de colores que se pueden usar en los componentes y corresponde al tipo PaletteColor
  */
 export type ComponentPalletColor = 'primary' | 'default' | SemanticColorOptionsType;
-export type BasePalettes = 'patronusBlue' | 'crayonBlue' | 'middleYellow' | 'acidGreen' | 'grassGreen' | 'forest' | 'desertBeige' | 'turquiBlue' | 'blazeOrange' | 'flameRed' | 'coolGrey' | 'brown' | 'marbleLight' | 'onyx' | 'mint' | 'oxford';
-export type BaseOpacityPalettes = 'patronus' | 'turqui' | 'grass' | 'brown' | 'beige' | 'blaze' | 'cool' | 'marble' | 'mint' | 'onyx' | 'oxford' | 'middle' | 'acid' | 'forest' | 'flame' | 'crayon';
+export type BasePalettes = 'patronusBlue' | 'crayonBlue' | 'middleYellow' | 'acidGreen' | 'grassGreen' | 'forest' | 'desertBeige' | 'turquiBlue' | 'blazeOrange' | 'flameRed' | 'coolGrey' | 'brown' | 'marbleLight' | 'onyx' | 'mint' | 'oxford' | 'pink' | 'orange' | 'candy' | 'persianGreen' | 'aqua';
+export type BaseOpacityPalettes = 'patronus' | 'turqui' | 'grass' | 'brown' | 'beige' | 'blaze' | 'cool' | 'marble' | 'mint' | 'onyx' | 'oxford' | 'middle' | 'acid' | 'forest' | 'flame' | 'crayon' | 'pink' | 'orange' | 'candy' | 'persianGreen' | 'aqua';
 export interface Colors {
     /**
      * ToneOpacity se usa para colorear el fondo de los celdas en el compksonente grid.
@@ -35,7 +35,7 @@ export interface Colors {
     95: string;
 }
 export interface OpacityColors {
-    5?: string;
+    5: string;
     10: string;
     15?: string;
     20: string;
@@ -116,11 +116,11 @@ export type ThemePaletteColors = Record<ThemeUserColor, PaletteColor>;
 /**
  * Son las opcines de paleta de colores semánticos en formato PaletteColor
  */
-export type SemanticsPaletteColors = Record<SemanticColorOptionsType, Omit<PaletteColor, 'focusVisible' | 'selected' | 'selectedOpacity'>>;
+export type SemanticsPaletteColors = Record<SemanticColorOptionsType, Omit<PaletteColor, 'focusVisible'>>;
 /**
  * Es la configuración de color que se usa fabricar la paleta "default", se encuentra en formato PaletteColor.
  */
-export type DefaultPresetColor = Omit<PresetColor, 'borderMainDark' | 'borderMainLight' | 'main' | 'contrastText'> & {
+export type DefaultPresetColor = Omit<PresetColor, 'borderMainDark' | 'borderMainLight' | 'main' | 'semanticTextLight' | 'semanticTextDark' | 'opacityLight' | 'opacityDark'> & {
     mainLight: string;
     mainDark: string;
 };
@@ -146,7 +146,7 @@ export interface ChipColor {
 /**
  * Lista de opciones de colores para pintar los chips
  */
-export type ChipColorOptions = 'default' | 'disabled' | 'warning' | 'error' | 'success' | 'forest' | 'info' | 'primary';
+export type ChipColorOptions = 'default' | 'disabled' | 'warning' | 'error' | 'success' | 'forest' | 'info' | 'primary' | 'pink' | 'orange' | 'candy' | 'persianGreen' | 'aqua';
 /**
  * Representa la definición de la lista de colores para usarse en los chips. Son los colores con los que se van a pintar el componente chip.
  */