@m4l/styles 6.4.0 → 6.5.1

package/types/augmentations.d.ts

@@ -1,160 +1,158 @@
-import { Breakpoints } from '@mui/material';
-
-import type { CustomShadowOptions } from '../theme';
-import type { BaseBorderRadius, Size } from '../theme/sizes/types';
-import type { Typography } from '../theme/typography/types';
-
-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 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: PaletteColor;
-    general: {
-      scrollBar: string;
-      gridHover: string;
-    };
-  }
-
-  interface ColorSchemeOverrides {
-    finalTheme?: true;
-  }
-
-  interface CssVarsTheme {
-    generalSettings: {
-      isMobile: boolean;
-    }
-
-  }
-
-  interface Theme extends CssVarsTheme {
-    stretch: boolean;
-    customShadows: CustomShadowOptions;
-    breakpoints: Breakpoints;
-    /**
-     * Colección de tamaños y espaciados base en el sistema de diseño
-    */
-    size: Size;
-  }
-
-  interface CssVarsThemeOptions {
-    generalSettings: {
-      isMobile: boolean;
-    };
-  }
-
-  interface ThemeVars {
-    customShadows: CustomShadowOptions;
-    /**
-     * Colección de tamaños y espaciados base en el sistema de diseño
-    */
-    size: Size;
-  }
-
-  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;
-  }
-}
+import { Breakpoints } from '@mui/material';
+
+import type { CustomShadowOptions } from '../theme';
+import type { Size } from '../theme/sizes/types';
+
+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 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: PaletteColor;
+    general: {
+      scrollBar: string;
+      gridHover: string;
+    };
+  }
+
+  interface ColorSchemeOverrides {
+    finalTheme?: true;
+  }
+
+  interface CssVarsTheme {
+    generalSettings: {
+      isMobile: boolean;
+    };
+  }
+
+  interface Theme extends CssVarsTheme {
+    stretch: boolean;
+    customShadows: CustomShadowOptions;
+    breakpoints: Breakpoints;
+    /**
+     * Colección de tamaños y espaciados base en el sistema de diseño
+     */
+    size: Size;
+  }
+
+  interface CssVarsThemeOptions {
+    generalSettings: {
+      isMobile: boolean;
+    };
+  }
+
+  interface ThemeVars {
+    customShadows: CustomShadowOptions;
+    /**
+     * Colección de tamaños y espaciados base en el sistema de diseño
+     */
+    size: Size;
+  }
+
+  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/index.js

@@ -0,0 +1 @@
+

package/types/types.d.ts

@@ -2,24 +2,24 @@ import { PaletteColor, Theme } from '@mui/material/styles';
 /**
  * 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';
+export 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';
+ */
+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 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' | 'blaze' | 'cool' | 'marble' | 'mint' | 'oxford' | 'middle' | 'acid' | 'flame' | 'crayon';
+ */
+export type ComponentPalletColor = 'primary' | 'default' | SemanticColorOptionsType;
+export type BasePalettes = 'patronusBlue' | 'crayonBlue' | 'middleYellow' | 'acidGreen' | 'grassGreen' | 'desertBeige' | 'turquiBlue' | 'blazeOrange' | 'flameRed' | 'coolGrey' | 'brown' | 'marbleLight' | 'onyx' | 'mint' | 'oxford';
+export type BaseOpacityPalettes = 'patronus' | 'turqui' | 'grass' | 'brown' | 'beige' | 'blaze' | 'cool' | 'marble' | 'mint' | 'oxford' | 'middle' | 'acid' | 'flame' | 'crayon';
 export interface Colors {
     /**
      * 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;
+     */
+    toneOpacity10: string;
+    toneOpacity20: string;
     10: string;
     20: string;
     30: string;
@@ -48,7 +48,7 @@ export interface PresetColor {
     toneOpacityLight: string;
     /**
      * Permite definir fondos de componentes en estados hover y focus dependiendo de la necesidad.
-    */
+     */
     opacityLight: string;
     opacityDark: string;
     dark: string;
@@ -56,40 +56,40 @@ export interface PresetColor {
     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 type BaseConstantColors = Record<BasePalettes, Colors>;
 /**
  * Son los colores de las las ocpiones del tema, en formato PresetColor (Mas amplio que el PaletteColor)
  */
-export declare type ThemePresetColors = Record<ThemeColorOptionsType, PresetColor>;
+export type ThemePresetColors = Record<ThemeColorOptionsType, PresetColor>;
 /**
  * Son los colores semanticos en formato PresetColor
  */
-export declare type SemanticPresetColors = Record<SemanticColorOptionsType, PresetColor>;
+export type SemanticPresetColors = Record<SemanticColorOptionsType, PresetColor>;
 /**
  * Son los colores de las ocpiones del tema, en formato PalletColor
-*/
-export declare type ThemePaletteColors = Record<ThemeColorOptionsType, PaletteColor>;
+ */
+export type ThemePaletteColors = Record<ThemeColorOptionsType, PaletteColor>;
 /**
  * Son las opcines de paleta de colores semánticos en formato PaletteColor
-*/
-export declare type SemanticsPaletteColors = Record<SemanticColorOptionsType, Omit<PaletteColor, 'focusVisible'>>;
+ */
+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 declare type DefaultPresetColor = Omit<PresetColor, 'borderMainDark' | 'borderMainLight' | 'main' | 'contrastText'> & {
+ */
+export type DefaultPresetColor = Omit<PresetColor, 'borderMainDark' | 'borderMainLight' | 'main' | 'contrastText'> & {
     mainLight: string;
     mainDark: string;
 };
-export declare type PresetsOptions = Array<{
+export 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' | 'size' | 'typography'>;
+export type ColorState = 'warning' | 'delete' | 'info' | 'success';
+export type OurTheme = Pick<Theme, 'palette' | 'typography' | 'customShadows' | 'stretch' | 'size' | 'typography'>;

package/types/types.js

@@ -0,0 +1 @@
+

package/utils/getColorPresets.d.ts

@@ -1,5 +1,12 @@
 import { PresetColor, ThemeColorOptionsType } from '../types';
 export declare const DEFAULT_PRESET: ThemeColorOptionsType;
 export declare const defaultPresetColors: PresetColor;
+/**
+ * Función que retorna los colores de un preset
+ * @author Juan Escobar - automatic
+ * @createdAt 2024-10-06 13:47:24 - automatic
+ * @updatedAt 2024-10-06 13:47:25 - automatic
+ * @updatedUser Juan Escobar - automatic
+ */
 export declare function getColorPresets(presetsKey: ThemeColorOptionsType): PresetColor;
 export default getColorPresets;

package/utils/getColorPresets.js

@@ -0,0 +1,14 @@
+import { P as t } from "../theme/palette/presetColors.js";
+const o = "patronus", s = t[o];
+function n(r) {
+  try {
+    return t?.[r];
+  } catch {
+  }
+  return s;
+}
+export {
+  o as D,
+  s as d,
+  n as g
+};

package/utils/getColorState.d.ts

@@ -1,3 +1,10 @@
 import { ComponentPalletColor } from '../types/types';
 import { Theme } from '@mui/material';
-export declare const getColorState: (color: ComponentPalletColor, palette: Theme['palette'] | Theme['vars']['palette']) => string;
+/**
+ * Get color state
+ * @author Juan Escobar - automatic
+ * @createdAt 2024-10-06 13:47:24 - automatic
+ * @updatedAt 2024-10-06 13:47:25 - automatic
+ * @updatedUser Juan Escobar - automatic
+ */
+export declare const getColorState: (color: ComponentPalletColor, palette: Theme["palette"] | Theme["vars"]["palette"]) => string;

package/utils/getFontValue.d.ts

@@ -1,6 +1,12 @@
-import type { Variant } from '@mui/material/styles/createTypography';
 export declare function remToPx(value: string): number;
 export declare function pxToRem(value: number): string;
+/**
+ * Convert px to rem
+ * @author Juan Escobar - automatic
+ * @createdAt 2024-10-06 13:47:24 - automatic
+ * @updatedAt 2024-10-06 13:47:25 - automatic
+ * @updatedUser Juan Escobar - automatic
+ */
 export declare function responsiveFontSizes({ sm, md, lg }: {
     sm: number;
     md: number;
@@ -16,9 +22,3 @@ export declare function responsiveFontSizes({ sm, md, lg }: {
         fontSize: string;
     };
 };
-export declare function getFontValue(variant: Variant): {
-    fontSize: number;
-    lineHeight: number;
-    fontWeight: import("csstype").Property.FontWeight | undefined;
-    letterSpacing: import("csstype").Property.LetterSpacing<string | number> | undefined;
-};

package/utils/getFontValue.js

@@ -0,0 +1,24 @@
+function t(n) {
+  return Math.round(parseFloat(n) * 16);
+}
+function o(n) {
+  return `${n / 16}rem`;
+}
+function r({ sm: n, md: e, lg: i }) {
+  return {
+    "@media (min-width:0px)": {
+      fontSize: `${n}px`
+    },
+    "@media (min-width:900px)": {
+      fontSize: `${e}px`
+    },
+    "@media (min-width:1200px)": {
+      fontSize: `${i}px`
+    }
+  };
+}
+export {
+  r as a,
+  o as p,
+  t as r
+};

package/utils/getPaletteByPreset.d.ts

@@ -1,8 +1,15 @@
-import type { ThemeColorOptionsType } from '../types';
+import { ThemeColorOptionsType } from '../types';
+/**
+ * Función que retorna la paleta de colores según el preset seleccionado
+ * @author Juan Escobar - automatic
+ * @createdAt 2024-10-06 13:47:24 - automatic
+ * @updatedAt 2024-10-06 13:47:26 - automatic
+ * @updatedUser Juan Escobar - automatic
+ */
 export declare const getPaletteByPreset: (presetColor: ThemeColorOptionsType) => {
     readonly light: {
         readonly mode: "light";
-        readonly common: import("@mui/material").CommonColors;
+        readonly common: import('@mui/material').CommonColors;
         readonly primary: {
             readonly light: string;
             readonly main: string;
@@ -52,7 +59,7 @@ export declare const getPaletteByPreset: (presetColor: ThemeColorOptionsType) =>
             readonly scrollBar: string;
             readonly gridHover: string;
         };
-        readonly grey: import("@mui/material").Color;
+        readonly grey: import('@mui/material').Color;
         readonly skeleton: {
             readonly default: string;
             readonly transition: string;
@@ -60,9 +67,9 @@ export declare const getPaletteByPreset: (presetColor: ThemeColorOptionsType) =>
         readonly info: {
             readonly focusVisible: string;
             readonly light: string;
-            readonly contrastText: string;
             readonly main: string;
             readonly dark: string;
+            readonly contrastText: string;
             readonly focusActive: string;
             readonly hover: string;
             readonly hoverOpacity: string;
@@ -72,9 +79,9 @@ export declare const getPaletteByPreset: (presetColor: ThemeColorOptionsType) =>
         readonly success: {
             readonly focusVisible: string;
             readonly light: string;
-            readonly contrastText: string;
             readonly main: string;
             readonly dark: string;
+            readonly contrastText: string;
             readonly focusActive: string;
             readonly hover: string;
             readonly hoverOpacity: string;
@@ -84,9 +91,9 @@ export declare const getPaletteByPreset: (presetColor: ThemeColorOptionsType) =>
         readonly warning: {
             readonly focusVisible: string;
             readonly light: string;
-            readonly contrastText: string;
             readonly main: string;
             readonly dark: string;
+            readonly contrastText: string;
             readonly focusActive: string;
             readonly hover: string;
             readonly hoverOpacity: string;
@@ -96,9 +103,9 @@ export declare const getPaletteByPreset: (presetColor: ThemeColorOptionsType) =>
         readonly error: {
             readonly focusVisible: string;
             readonly light: string;
-            readonly contrastText: string;
             readonly main: string;
             readonly dark: string;
+            readonly contrastText: string;
             readonly focusActive: string;
             readonly hover: string;
             readonly hoverOpacity: string;
@@ -108,7 +115,7 @@ export declare const getPaletteByPreset: (presetColor: ThemeColorOptionsType) =>
     };
     readonly dark: {
         readonly mode: "dark";
-        readonly common: import("@mui/material").CommonColors;
+        readonly common: import('@mui/material').CommonColors;
         readonly primary: {
             readonly light: string;
             readonly main: string;
@@ -158,7 +165,7 @@ export declare const getPaletteByPreset: (presetColor: ThemeColorOptionsType) =>
             readonly scrollBar: string;
             readonly gridHover: string;
         };
-        readonly grey: import("@mui/material").Color;
+        readonly grey: import('@mui/material').Color;
         readonly skeleton: {
             readonly default: string;
             readonly transition: string;
@@ -166,9 +173,9 @@ export declare const getPaletteByPreset: (presetColor: ThemeColorOptionsType) =>
         readonly info: {
             readonly focusVisible: string;
             readonly light: string;
-            readonly contrastText: string;
             readonly main: string;
             readonly dark: string;
+            readonly contrastText: string;
             readonly focusActive: string;
             readonly hover: string;
             readonly hoverOpacity: string;
@@ -178,9 +185,9 @@ export declare const getPaletteByPreset: (presetColor: ThemeColorOptionsType) =>
         readonly success: {
             readonly focusVisible: string;
             readonly light: string;
-            readonly contrastText: string;
             readonly main: string;
             readonly dark: string;
+            readonly contrastText: string;
             readonly focusActive: string;
             readonly hover: string;
             readonly hoverOpacity: string;
@@ -190,9 +197,9 @@ export declare const getPaletteByPreset: (presetColor: ThemeColorOptionsType) =>
         readonly warning: {
             readonly focusVisible: string;
             readonly light: string;
-            readonly contrastText: string;
             readonly main: string;
             readonly dark: string;
+            readonly contrastText: string;
             readonly focusActive: string;
             readonly hover: string;
             readonly hoverOpacity: string;
@@ -202,9 +209,9 @@ export declare const getPaletteByPreset: (presetColor: ThemeColorOptionsType) =>
         readonly error: {
             readonly focusVisible: string;
             readonly light: string;
-            readonly contrastText: string;
             readonly main: string;
             readonly dark: string;
+            readonly contrastText: string;
             readonly focusActive: string;
             readonly hover: string;
             readonly hoverOpacity: string;