@m4l/styles 3.2.3 → 6.0.0

package/theme/{shadows-GTYqExFA.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-DM0gXxA2.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 [

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-CXZaM9oS.js → getColorPresets-DgmrCj5l.js}

@@ -1,4 +1,4 @@
-import { P as r } from "../theme/palette-DM0gXxA2.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/getPaletteByPreset.d.ts

@@ -0,0 +1,127 @@
+import type { ThemeColorOptionsType } from '../types';
+export declare const getPaletteByPreset: (presetColor: ThemeColorOptionsType) => {
+    readonly light: {
+        readonly info: import("@mui/material").PaletteColor;
+        readonly success: import("@mui/material").PaletteColor;
+        readonly warning: import("@mui/material").PaletteColor;
+        readonly error: import("@mui/material").PaletteColor;
+        readonly mode: "light";
+        readonly common: import("@mui/material").CommonColors;
+        readonly primary: {
+            readonly light: string;
+            readonly main: string;
+            readonly dark: string;
+            readonly contrastText: string;
+            readonly focusActive: string;
+            readonly focusVisible: string;
+            readonly hover: string;
+            readonly hoverOpacity: string;
+            readonly opacity: string;
+            readonly toneOpacity: string;
+        };
+        readonly default: {
+            readonly focusVisible: string;
+            readonly contrastText: string;
+            readonly light: string;
+            readonly main: string;
+            readonly dark: string;
+            readonly focusActive: string;
+            readonly hover: string;
+            readonly hoverOpacity: string;
+            readonly opacity: string;
+            readonly toneOpacity: string;
+        };
+        readonly divider: string;
+        readonly text: {
+            readonly primary: string;
+            readonly secondary: string;
+            readonly disabled: string;
+        };
+        readonly background: {
+            readonly default: string;
+            readonly neutral: string;
+            readonly surface: string;
+            readonly hover: string;
+            readonly paper: "";
+        };
+        readonly border: {
+            readonly main: string;
+            readonly default: string;
+            readonly secondary: string;
+            readonly dens: string;
+            readonly disabled: string;
+            readonly error: string;
+        };
+        readonly general: {
+            readonly scrollBar: string;
+            readonly gridHover: string;
+        };
+        readonly grey: import("@mui/material").Color;
+        readonly skeleton: {
+            readonly default: string;
+            readonly transition: string;
+        };
+    };
+    readonly dark: {
+        readonly info: import("@mui/material").PaletteColor;
+        readonly success: import("@mui/material").PaletteColor;
+        readonly warning: import("@mui/material").PaletteColor;
+        readonly error: import("@mui/material").PaletteColor;
+        readonly mode: "dark";
+        readonly common: import("@mui/material").CommonColors;
+        readonly primary: {
+            readonly light: string;
+            readonly main: string;
+            readonly dark: string;
+            readonly contrastText: string;
+            readonly focusActive: string;
+            readonly focusVisible: string;
+            readonly hover: string;
+            readonly hoverOpacity: string;
+            readonly opacity: string;
+            readonly toneOpacity: string;
+        };
+        readonly default: {
+            readonly focusVisible: string;
+            readonly contrastText: string;
+            readonly light: string;
+            readonly main: string;
+            readonly dark: string;
+            readonly focusActive: string;
+            readonly hover: string;
+            readonly hoverOpacity: string;
+            readonly opacity: string;
+            readonly toneOpacity: string;
+        };
+        readonly text: {
+            readonly primary: string;
+            readonly secondary: string;
+            readonly disabled: string;
+        };
+        readonly divider: string;
+        readonly background: {
+            readonly default: string;
+            readonly neutral: string;
+            readonly surface: string;
+            readonly hover: string;
+            readonly paper: "";
+        };
+        readonly border: {
+            readonly main: string;
+            readonly default: string;
+            readonly secondary: string;
+            readonly dens: string;
+            readonly disabled: string;
+            readonly error: string;
+        };
+        readonly general: {
+            readonly scrollBar: string;
+            readonly gridHover: string;
+        };
+        readonly grey: import("@mui/material").Color;
+        readonly skeleton: {
+            readonly default: string;
+            readonly transition: string;
+        };
+    };
+};

package/utils/index.d.ts

@@ -2,3 +2,4 @@ export { useResponsive } from './useResponsive';
 export * from './getColorPresets';
 export * from './getFontValue';
 export * from './getColorState';
+export * from './getPaletteByPreset';

package/vite-env.d.ts

@@ -1,3 +1,3 @@
-/// <reference types="vite/client" />
-/// <reference types="vitest" />
-/// <reference types="vitest/importMeta" />
+/// <reference types="vite/client" />
+/// <reference types="vitest" />
+/// <reference types="vitest/importMeta" />

package/theme/defaultThemeOptions-BlJvKCE6.js

@@ -1,24 +0,0 @@
-import { createTheme as a, alpha as s } from "@mui/material/styles";
-import { t as o } from "./typography-BsOO459U.js";
-import { s as r, c as m } from "./shadows-GTYqExFA.js";
-import { g as p } from "./palette-DM0gXxA2.js";
-import { g as h, D as t } from "../utils/getColorPresets-CXZaM9oS.js";
-const e = a(), f = {
-  ...e,
-  typography: o,
-  palette: {
-    ...e.palette,
-    ...p(t).light,
-    mode: "light"
-  },
-  shape: { borderRadius: 8 },
-  shadows: r.dark,
-  customShadows: {
-    primary: `0 8px 16px 0 ${s(h(t).main, 0.2)}`,
-    ...m("dark")
-  },
-  stretch: !0
-};
-export {
-  f as d
-};

package/theme/palette/palette.d.ts

@@ -1,6 +0,0 @@
-import { Palette } from '@mui/material/styles';
-import type { ThemeColorPresets } from '../../types';
-export declare const getPaletteByPreset: (presetColor: ThemeColorPresets) => {
-    readonly light: Palette;
-    readonly dark: Palette;
-};

package/theme/palette/stateColors.d.ts

@@ -1,2 +0,0 @@
-import type { StatePalettes } from '../../types';
-export declare const STATE_COLORS: StatePalettes;