@m4l/styles 3.2.2 → 6.0.0

package/theme/{shadows.67c0a60a.js → shadows-Cek_1mpN.js}

@@ -1,5 +1,5 @@
 import { alpha as a } from "@mui/material/styles";
-import { G as n, B as s, C as e } from "./palette.fc293d0e.js";
+import { G as n, B as s, C as e } from "./palette-voCQl3kP.js";
 const o = n[500], c = "#000000", t = (r) => {
   const p = a(r, 0.2), x = a(r, 0.14), $ = a(r, 0.12);
   return [
@@ -36,6 +36,7 @@ const o = n[500], c = "#000000", t = (r) => {
     success: `0px 2px 8px 0px ${a(s.acidGreen[50], 0.2)}`,
     warning: `0px 2px 8px 0px ${a(s.middleYellow[50], 0.2)}`,
     error: `0px 2px 8px 0px ${a(s.flameRed[50], 0.2)}`,
+    //
     card: `0 0 2px 0 ${a(n[500], 0.2)}, 0 12px 24px -4px ${a(
       n[500],
       0.12

package/theme/{typography.616cfe0c.js → typography-BsOO459U.js}

@@ -1,11 +1,12 @@
 import { createTheme as i } from "@mui/material";
-import { r as e, p as t } from "../utils/getFontValue.88831637.js";
+import { r as e, p as t } from "../utils/getFontValue-BEO-XID9.js";
 const n = "Segoe UI, Poppins, sans-serif", g = i(), l = {
   ...g.typography,
   fontFamily: n,
   fontWeightRegular: 400,
   fontWeightMedium: 600,
   fontWeightBold: 700,
+  /* Definindo en Patronus */
   h1: {
     fontWeight: 600,
     lineHeight: 1.5,
@@ -16,6 +17,7 @@ const n = "Segoe UI, Poppins, sans-serif", g = i(), l = {
     lineHeight: 1,
     ...e({ sm: 40, md: 40, lg: 40 })
   },
+  /* Definindo en Patronus */
   h3: {
     fontWeight: 600,
     lineHeight: 1.5,
@@ -26,6 +28,7 @@ const n = "Segoe UI, Poppins, sans-serif", g = i(), l = {
     lineHeight: 1.5,
     ...e({ sm: 20, md: 20, lg: 20 })
   },
+  /* Definindo en Patronus */
   h5: {
     fontWeight: 500,
     lineHeight: "28px",
@@ -38,24 +41,28 @@ const n = "Segoe UI, Poppins, sans-serif", g = i(), l = {
     letterSpacing: "-0.08em",
     ...e({ sm: 18, md: 18, lg: 18 })
   },
+  /* Definindo en Patronus */
   subtitle: {
     fontWeight: 400,
     lineHeight: "20px",
     letterSpacing: "-0.006em",
     ...e({ sm: 15, md: 15, lg: 15 })
   },
+  /* Definindo en Patronus */
   subtitleDens: {
     fontWeight: 600,
     lineHeight: "24px",
     letterSpacing: "-0.006em",
     ...e({ sm: 15, md: 15, lg: 15 })
   },
+  /* Definindo en Patronus */
   paragraph: {
     fontWeight: 400,
     lineHeight: "16px",
     letterSpacing: "-0.003em",
     ...e({ sm: 13, md: 13, lg: 13 })
   },
+  /* Definindo en Patronus */
   paragraphDens: {
     fontWeight: 600,
     lineHeight: "20px",
@@ -72,11 +79,13 @@ const n = "Segoe UI, Poppins, sans-serif", g = i(), l = {
     lineHeight: 1.5,
     fontSize: t(12)
   },
+  /* Definindo en Patronus */
   body: {
     fontWeight: 400,
     lineHeight: "16px",
     ...e({ sm: 11, md: 11, lg: 11 })
   },
+  /* Definindo en Patronus */
   bodyDens: {
     fontWeight: 600,
     lineHeight: "16px",
@@ -113,6 +122,7 @@ const n = "Segoe UI, Poppins, sans-serif", g = i(), l = {
     fontSize: t(14),
     textTransform: "capitalize"
   },
+  /* Definindo en Patronus */
   action: {
     fontWeight: 600,
     lineHeight: "16px",

package/types/augmentations.d.ts

@@ -1,155 +1,160 @@
-import { Breakpoints } from '@mui/material';
-
-import type { CustomShadowOptions } from '../theme';
-
-declare module '@mui/material' {
-  interface Color {
-    0: string;
-    500_8: string;
-    500_12: string;
-    500_16: string;
-    500_24: string;
-    500_32: string;
-    500_48: string;
-    500_56: string;
-    500_80: string;
-  }
-}
-
-declare module '@mui/material/styles' {
-  interface PaletteColor {
-    lighter?: string;
-    darker?: string;
-    active: string;
-    activeOpacity: string;
-    hover: string;
-    focus: string;
-    selected: string;
-    toneOpacity: string;
-  }
-
-  interface SimplePaletteColorOptions {
-    lighter?: string;
-    darker?: string;
-    active: string;
-    activeOpacity: string;
-    hover: string;
-    focus: string;
-    selected: string;
-    toneOpacity: string;
-  }
-
-  interface Palette {
-    mode: 'light' | 'dark';
-    secondary: never;
-    skeleton: { default: string; transition: string };
-    border: {
-      active: string;
-      selected: string;
-      default: string;
-      primary: string;
-      secondary: string;
-      disabled: string;
-      dense: string;
-      line: string;
-    };
-    general: {
-      scrollBar: string;
-      gridHover: string;
-    };
-  }
-
-  interface PaletteOptions {
-    mode: 'light' | 'dark';
-    secondary: never;
-    skeleton: { default: string; transition: string };
-    border: {
-      active: string;
-      selected: string;
-      default: string;
-      primary: string;
-      secondary: string;
-      disabled: string;
-      dense: string;
-      line: string;
-    };
-    general: {
-      scrollBar: string;
-      gridHover: string;
-    };
-  }
-
-  interface ColorSchemeOverrides {
-    finalTheme?: true;
-  }
-
-  interface CssVarsTheme {
-    generalSettings: {
-      isMobile: boolean;
-    };
-  }
-
-  interface Theme extends CssVarsTheme {
-    stretch: boolean;
-    customShadows: CustomShadowOptions;
-    breakpoints: Breakpoints;
-  }
-
-  interface CssVarsThemeOptions {
-    generalSettings: {
-      isMobile: boolean;
-    };
-  }
-
-  interface ThemeVars {
-    customShadows: CustomShadowOptions;
-  }
-
-  interface ColorSystem {
-    typography: TypographyVariants;
-  }
-
-  interface TypeBackground {
-    default: string;
-    hover: string;
-    surface: string;
-    subtle: string;
-    main: string;
-    bold: string;
-    backdrop: string;
-    reverse: string;
-    header: string;
-  }
-
-  interface TypographyVariants {
-    subtitle: Record<string, any>;
-    subtitleDens: Record<string, any>;
-    paragraph: Record<string, any>;
-    paragraphDens: Record<string, any>;
-    body: Record<string, any>;
-    bodyDens: Record<string, any>;
-    action: Record<string, any>;
-  }
-
-  interface TypographyVariantsOptions {
-    subtitle: React.CSSProperties;
-    subtitleDens: React.CSSProperties;
-    paragraph: React.CSSProperties;
-    paragraphDens: React.CSSProperties;
-    body: React.CSSProperties;
-    bodyDens: React.CSSProperties;
-    action: React.CSSProperties;
-  }
-}
-
-declare module '@mui/material/Typography' {
-  interface TypographyPropsVariantOverrides {
-    subtitle: true;
-    subtitleDens: true;
-    paragraph: true;
-    paragraphDens: true;
-    body: true;
-    bodyDens: true;
-    action: true;
-  }
-}
+import { Breakpoints } from '@mui/material';
+
+import type { CustomShadowOptions } from '../theme';
+
+declare module '@mui/material' {
+  interface Color {
+    0: string;
+    500_8: string;
+    500_12: string;
+    500_16: string;
+    500_24: string;
+    500_32: string;
+    500_48: string;
+    500_56: string;
+    500_80: string;
+  }
+}
+
+declare module '@mui/material/styles' {
+  interface PaletteColor {
+    //TODO: Documentar los colores segun figma
+    // light: string; *** Por compatibilidad con MUI
+    // main: string; ***
+    // dark: string; ***  Por compatibilidad con MUI
+    // contrastText: string; ***
+
+    focusActive: string;
+    focusVisible: string;
+    hover: string;
+    hoverOpacity: string;
+    opacity: string;
+    toneOpacity: string;
+  }
+
+  export interface TypeBackground {
+    neutral: string;
+  }
+
+  /* interface SimplePaletteColorOptions {
+    lighter?: string;
+    darker?: string;
+    active: string;
+    primary: string;
+    activeOpacity: string;
+    hover: string;
+    focusVisible: string;
+    toneOpacity: string;
+  } */
+
+  interface Palette {
+    mode: 'light' | 'dark';
+    secondary: never;
+    skeleton: { default: string; transition: string };
+    default: PaletteColor;
+    border: {
+      main: string;
+      default: string;
+      secondary: string;
+      dens: string;
+      disabled: string;
+      error: string;
+    };
+    general: {
+      scrollBar: string;
+      gridHover: string;
+    };
+  }
+
+  /**
+   * Interfaz de colores de material-ui, define las opciones de personalización de la paleta de colores que se
+   * pueden usar al crear un tema con la función `createTheme`.
+  */
+  interface PaletteOptions {
+    mode: 'light' | 'dark';
+    secondary: never;
+    skeleton: { default: string; transition: string };
+    border: {
+      main: string;
+      default: string;
+      secondary: string;
+      dens: string;
+      disabled: string;
+      error: string;
+    };
+    default: PaletteColorOptions; 
+    general: {
+      scrollBar: string;
+      gridHover: string;
+    };
+  }
+
+  interface ColorSchemeOverrides {
+    finalTheme?: true;
+  }
+
+  interface CssVarsTheme {
+    generalSettings: {
+      isMobile: boolean;
+    };
+  }
+
+  interface Theme extends CssVarsTheme {
+    stretch: boolean;
+    customShadows: CustomShadowOptions;
+    breakpoints: Breakpoints;
+  }
+
+  interface CssVarsThemeOptions {
+    generalSettings: {
+      isMobile: boolean;
+    };
+  }
+
+  interface ThemeVars {
+    customShadows: CustomShadowOptions;
+  }
+
+  interface ColorSystem {
+    typography: TypographyVariants;
+  }
+
+  interface TypeBackground {
+    default: string,
+    neutral: string,
+    surface: string,
+    hover: string,
+  }
+
+  interface TypographyVariants {
+    subtitle: Record<string, any>;
+    subtitleDens: Record<string, any>;
+    paragraph: Record<string, any>;
+    paragraphDens: Record<string, any>;
+    body: Record<string, any>;
+    bodyDens: Record<string, any>;
+    action: Record<string, any>;
+  }
+
+  interface TypographyVariantsOptions {
+    subtitle: React.CSSProperties;
+    subtitleDens: React.CSSProperties;
+    paragraph: React.CSSProperties;
+    paragraphDens: React.CSSProperties;
+    body: React.CSSProperties;
+    bodyDens: React.CSSProperties;
+    action: React.CSSProperties;
+  }
+}
+
+declare module '@mui/material/Typography' {
+  interface TypographyPropsVariantOverrides {
+    subtitle: true;
+    subtitleDens: true;
+    paragraph: true;
+    paragraphDens: true;
+    body: true;
+    bodyDens: true;
+    action: true;
+  }
+}

package/types/types.d.ts

@@ -1,16 +1,29 @@
-import { PaletteColor } from '@mui/material/styles';
+import { PaletteColor, Theme } from '@mui/material/styles';
 /**
  * type usado para tipar las props sizes de los componentes o sus derivaciones
  */
 export declare type Sizes = 'small' | 'medium' | 'large';
-export declare type ThemeColorPresets = 'patronus' | 'turqui' | 'grass' | 'brown' | 'blaze';
-export declare type StateColorSchema = 'info' | 'success' | 'warning' | 'error';
-export declare type ColorSchema = 'primary' | 'secondary' | StateColorSchema;
-export declare type ColorSchemeComponent = ColorSchema | string;
+/**
+ * Opciones de color seleccionables por un usuario con los que se puede pintar la aplicación.
+ */
+export declare type ThemeColorOptionsType = 'patronus' | 'turqui' | 'grass' | 'brown' | 'blaze';
+/**
+ * Lista de colores semánticos disponibles en la aplicación.
+*/
+export declare type SemanticColorOptionsType = 'info' | 'success' | 'warning' | 'error';
+/**
+ * Son los conjuntos de colores que se pueden usar en los componentes y corresponde al tipo PaletteColor
+*/
+export declare type ComponentPalletColor = 'primary' | 'default' | SemanticColorOptionsType;
 export declare type BasePalettes = 'patronusBlue' | 'crayonBlue' | 'middleYellow' | 'acidGreen' | 'grassGreen' | 'desertBeige' | 'turquiBlue' | 'blazeOrange' | 'flameRed' | 'coolGrey' | 'brown' | 'marbleLight' | 'onyx' | 'mint' | 'oxford';
-export declare type BaseOpacityPalettes = 'patronus' | 'turqui' | 'grass' | 'brown' | 'beige' | 'orange' | 'cool' | 'marble' | 'mint' | 'oxford';
+export declare type BaseOpacityPalettes = 'patronus' | 'turqui' | 'grass' | 'brown' | 'beige' | 'blaze' | 'cool' | 'marble' | 'mint' | 'oxford' | 'middle' | 'acid' | 'flame' | 'crayon';
 export interface Colors {
-    '00': string;
+    /**
+     * ToneOpacity se usa para colorear el fondo de los celdas en el compksonente grid.
+     * Requiere un todo de 100 en alpha pero basado en el color de opacidad con fondo ligth o dark.
+    */
+    'toneOpacity10': string;
+    'toneOpacity20': string;
     10: string;
     20: string;
     30: string;
@@ -23,36 +36,64 @@ export interface Colors {
     100: string;
 }
 export interface OpacityColors {
-    4: string;
-    6: string;
-    8: string;
     10: string;
-    12: string;
-    14: string;
-    16: string;
-    18: string;
-    28: string;
-    31: string;
-    32: string;
-    48: string;
-    60?: string;
-    72?: string;
+    20: string;
+    30: string;
+    40: string;
+    50: string;
+    60: string;
+    70: string;
 }
-export interface ActionsPaletteColors {
-    active: string;
-    activeOpacity: string;
-    hover: string;
-    focus: string;
-    selected: string;
-    toneOpacity: string;
+export interface PresetColor {
+    main: string;
+    contrastText: string;
+    light: string;
+    lighter: string;
+    toneOpacityLight: string;
+    /**
+     * Permite definir fondos de componentes en estados hover y focus dependiendo de la necesidad.
+    */
+    opacityLight: string;
+    opacityDark: string;
+    dark: string;
+    darker: string;
+    toneOpacityDark: string;
+    /**
+     * Permite mantener consitencia en el color de tema para los borders en caso de estar en un estado de usuario focus.
+    */
+    borderMainDark: string;
+    borderMainLight: string;
 }
+/**
+ * Lista de colores base en formato Colors
+*/
 export declare type BaseConstantColors = Record<BasePalettes, Colors>;
-export declare type BasePresetColors = Record<keyof PaletteColor, string>;
-export declare type PresetPalettes = Record<ThemeColorPresets, BasePresetColors>;
-export declare type StatePalettes = Record<StateColorSchema, BasePresetColors>;
-export declare type PresetActionsPalettes = Record<ThemeColorPresets, ActionsPaletteColors>;
+/**
+ * Son los colores de las las ocpiones del tema, en formato PresetColor (Mas amplio que el PaletteColor)
+ */
+export declare type ThemePresetColors = Record<ThemeColorOptionsType, PresetColor>;
+/**
+ * Son los colores semanticos en formato PresetColor
+ */
+export declare type SemanticPresetColors = Record<SemanticColorOptionsType, PresetColor>;
+/**
+ * Son los colores de las ocpiones del tema, en formato PalletColor
+*/
+export declare type ThemePaletteColors = Record<ThemeColorOptionsType, PaletteColor>;
+/**
+ * Son las opcines de paleta de colores semánticos en formato PaletteColor
+*/
+export declare type SemanticsPaletteColors = Record<SemanticColorOptionsType, PaletteColor>;
+/**
+ * Es la configuración de color que se usa fabricar la paleta "default", se encuentra en formato PaletteColor.
+*/
+export declare type DefaultPresetColor = Omit<PresetColor, 'borderMainDark' | 'borderMainLight' | 'main' | 'contrastText'> & {
+    mainLight: string;
+    mainDark: string;
+};
 export declare type PresetsOptions = Array<{
     name: string | undefined;
     value: string;
 }>;
 export declare type ColorState = 'warning' | 'delete' | 'info' | 'success';
+export declare type OurTheme = Pick<Theme, 'palette' | 'typography' | 'customShadows' | 'stretch'>;

package/utils/{getColorPresets.38329841.js → getColorPresets-DgmrCj5l.js}

@@ -1,4 +1,4 @@
-import { P as r } from "../theme/palette.fc293d0e.js";
+import { P as r } from "../theme/palette-voCQl3kP.js";
 const o = "patronus", s = r[o];
 function n(t) {
   try {

package/utils/getColorPresets.d.ts

@@ -1,5 +1,5 @@
-import { BasePresetColors, ThemeColorPresets } from '../types';
-export declare const DEFAULT_PRESET: ThemeColorPresets;
-export declare const defaultPresetColors: BasePresetColors;
-export declare function getColorPresets(presetsKey: ThemeColorPresets): BasePresetColors;
+import { PresetColor, ThemeColorOptionsType } from '../types';
+export declare const DEFAULT_PRESET: ThemeColorOptionsType;
+export declare const defaultPresetColors: PresetColor;
+export declare function getColorPresets(presetsKey: ThemeColorOptionsType): PresetColor;
 export default getColorPresets;

package/utils/getColorState.d.ts

@@ -1,3 +1,3 @@
-import { ColorSchemeComponent } from '../types/types';
+import { ComponentPalletColor } from '../types/types';
 import { Theme } from '@mui/material';
-export declare const getColorState: (color: ColorSchemeComponent, palette: Theme['palette'] | Theme['vars']['palette']) => string;
+export declare const getColorState: (color: ComponentPalletColor, palette: Theme['palette'] | Theme['vars']['palette']) => string;

package/utils/{getFontValue.88831637.js → getFontValue-BEO-XID9.js}

@@ -1,5 +1,5 @@
 import { useTheme as h } from "@mui/material/styles";
-import { u as m } from "./useResponsive.2c45e8e0.js";
+import { u as m } from "./useResponsive-DaeQVwlH.js";
 function f(e) {
   return Math.round(parseFloat(e) * 16);
 }
@@ -20,10 +20,13 @@ function l({ sm: e, md: t, lg: o }) {
   };
 }
 function g() {
-  return [...h().breakpoints.keys].reverse().reduce((o, n) => {
-    const s = m("up", n);
-    return !o && s ? n : o;
-  }, null) || "xs";
+  return (
+    // @ts-ignore not sure what is this
+    [...h().breakpoints.keys].reverse().reduce((o, n) => {
+      const s = m("up", n);
+      return !o && s ? n : o;
+    }, null) || "xs"
+  );
 }
 function S(e) {
   const t = h(), o = g(), n = t.breakpoints.up(o === "xl" ? "lg" : o), i = (e === "h1" || e === "h2" || e === "h3" || e === "h4" || e === "h5" || e === "h6") && t.typography[e][n] ? t.typography[e][n] : t.typography[e], p = f(i.fontSize), r = Number(t.typography[e].lineHeight) * p, { fontWeight: u, letterSpacing: c } = t.typography[e];