@m4l/styles 6.5.1 → 7.0.0

package/index.js

@@ -1,39 +1,39 @@
 import { D as r, g as s, m as t } from "./config.js";
-import { O as p } from "./theme/ourTheme.js";
-import { c as f, s as x } from "./theme/shadows.js";
-import { t as E } from "./theme/typography.js";
-import { f as S } from "./theme/overrides/index.js";
-import { B as R } from "./theme/palette/baseColors.js";
-import { B as i } from "./theme/palette/baseOpacityColors.js";
-import { C as n } from "./theme/palette/commonColors.js";
-import { G as _ } from "./theme/palette/greyPalette.js";
-import { p as A } from "./theme/palette/presetColors.js";
-import { u as L } from "./utils/useResponsive.js";
-import { D, d as h, g as v } from "./utils/getColorPresets.js";
-import { p as F, r as M, a as U } from "./utils/getFontValue.js";
-import { g as w } from "./utils/getColorState.js";
-import { g as G } from "./utils/getPaletteByPreset.js";
+import { c as p, s as m } from "./theme/shadows.js";
+import { t as x } from "./theme/typography.js";
+import { f as O } from "./theme/overrides/index.js";
+import { B as S } from "./theme/palette/baseColors.js";
+import { B as n } from "./theme/palette/baseOpacityColors.js";
+import { C as l } from "./theme/palette/commonColors.js";
+import { G as P } from "./theme/palette/greyPalette.js";
+import { p as _ } from "./theme/palette/presetColors.js";
+import { u as A } from "./utils/useResponsive.js";
+import { D as L, d, g as h } from "./utils/getColorPresets.js";
+import { p as v, r as y, a as F } from "./utils/getFontValue.js";
+import { g as U } from "./utils/getColorState.js";
+import { g as w } from "./utils/getPaletteByPreset.js";
+import { g as G } from "./utils/getUserThemeOptions.js";
 export {
-  R as BASE_COLORS,
-  i as BASE_OPACITY_COLORS,
-  n as COMMON_COLORS,
-  D as DEFAULT_PRESET,
+  S as BASE_COLORS,
+  n as BASE_OPACITY_COLORS,
+  l as COMMON_COLORS,
+  L as DEFAULT_PRESET,
   r as DEFAULT_SIZE,
-  _ as GREY_PALETTE,
-  p as OUR_THEME,
-  f as createCustomShadows,
-  h as defaultPresetColors,
-  S as fnComponentsOverrides,
-  v as getColorPresets,
-  w as getColorState,
-  G as getPaletteByPreset,
+  P as GREY_PALETTE,
+  p as createCustomShadows,
+  d as defaultPresetColors,
+  O as fnComponentsOverrides,
+  h as getColorPresets,
+  U as getColorState,
+  w as getPaletteByPreset,
+  G as getUserThemeOptions,
   s as globalRemSize,
   t as muiBreakpointsValues,
-  A as presetsOptions,
-  F as pxToRem,
-  M as remToPx,
-  U as responsiveFontSizes,
-  x as shadows,
-  E as typography,
-  L as useResponsive
+  _ as presetsOptionsMainColor,
+  v as pxToRem,
+  y as remToPx,
+  F as responsiveFontSizes,
+  m as shadows,
+  x as typography,
+  A as useResponsive
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@m4l/styles",
-  "version": "6.5.1",
+  "version": "7.0.0",
   "license": "UNLICENSED",
   "author": "m4l team",
   "publishConfig": {

package/theme/index.d.ts

@@ -1,5 +1,4 @@
 export type { CustomShadowOptions } from './shadows';
-export { OUR_THEME } from './ourTheme';
 export { shadows, createCustomShadows } from './shadows';
 export * from './palette';
 export { typography } from './typography';

package/theme/palette/index.d.ts

@@ -2,4 +2,4 @@ export { BASE_COLORS } from './baseColors';
 export { BASE_OPACITY_COLORS } from './baseOpacityColors';
 export { COMMON_COLORS } from './commonColors';
 export { GREY_PALETTE } from './greyPalette';
-export { presetsOptions } from './presetColors';
+export { presetsOptionsMainColor } from './presetColors';

package/theme/palette/presetColors.d.ts

@@ -1,19 +1,22 @@
-import { ThemePaletteColors, ThemePaletteColors as OursColorPalette, ThemePresetColors, PresetsOptions } from '../../types';
+import { ThemePaletteColors, ThemePaletteColors as OursColorPalette, ThemePresetColors, PresetsOptionsColorMain } from '../../types';
 /**
  * Conjunto de paletas de colores usados para construir el tema seleccionado por el usario en la aplación.
  * Sus opciones pueden ser patronus, turqui, grass, brown y blaze.
+ * @createdAt 2024-10-08 13:31:22 - automatic
  */
 export declare const PRESET_COLORS: ThemePresetColors;
 /**
  * Colección de temas de color en modo light, se usan para aportar el color en los componentes de la apliación web.
  * Se tiene en cuanta cuando la variable semántica aplicada al componente es de tipo primary.
  * Sus opciones pueden ser patronus, turqui, grass, brown y blaze.
+ * @createdAt 2024-10-08 13:31:22 - automatic
  */
 export declare const PRIMARY_COLORS_LIGHT: ThemePaletteColors;
 /**
  * Colección de temas de color en modo dark, se usan para aportar el color en los componentes de la apliación web.
  * Se tiene en cuanta cuando la variable semántica aplicada al componente es de tipo primary.
  * Sus opciones pueden ser patronus, turqui, grass, brown y blaze.
+ * @createdAt 2024-10-08 13:31:22 - automatic
  */
 export declare const PRIMARY_COLORS_DARK: OursColorPalette;
-export declare const presetsOptions: PresetsOptions;
+export declare const presetsOptionsMainColor: PresetsOptionsColorMain;

package/theme/sizes/size.d.ts

@@ -1,2 +1,6 @@
 import { Size } from './types';
+/**
+ * Tamaño de los elementos de la aplicación
+ * utilizado para tokenizar las medidas con el sistema de diseño
+ */
 export declare const SIZE: Size;

package/types/augmentations.d.ts

@@ -92,7 +92,10 @@ declare module '@mui/material/styles' {
   interface Theme extends CssVarsTheme {
     stretch: boolean;
     customShadows: CustomShadowOptions;
-    breakpoints: Breakpoints;
+    /**
+     *
+     */
+    // breakpoints: Breakpoints;
     /**
      * Colección de tamaños y espaciados base en el sistema de diseño
      */

package/types/types.d.ts

@@ -1,8 +1,12 @@
-import { PaletteColor, Theme } from '@mui/material/styles';
+import { PaletteColor } from '@mui/material/styles';
+/**
+ * Modo de color seleccionable por un usuario con el que se puede pintar la aplicación.
+ */
+export type ThemeUserMode = 'light' | 'dark';
 /**
  * Opciones de color seleccionables por un usuario con los que se puede pintar la aplicación.
  */
-export type ThemeColorOptionsType = 'patronus' | 'turqui' | 'grass' | 'brown' | 'blaze';
+export type ThemeUserColor = 'patronus' | 'turqui' | 'grass' | 'brown' | 'blaze';
 /**
  * Lista de colores semánticos disponibles en la aplicación.
  */
@@ -67,7 +71,7 @@ export type BaseConstantColors = Record<BasePalettes, Colors>;
 /**
  * Son los colores de las las ocpiones del tema, en formato PresetColor (Mas amplio que el PaletteColor)
  */
-export type ThemePresetColors = Record<ThemeColorOptionsType, PresetColor>;
+export type ThemePresetColors = Record<ThemeUserColor, PresetColor>;
 /**
  * Son los colores semanticos en formato PresetColor
  */
@@ -75,7 +79,7 @@ export type SemanticPresetColors = Record<SemanticColorOptionsType, PresetColor>
 /**
  * Son los colores de las ocpiones del tema, en formato PalletColor
  */
-export type ThemePaletteColors = Record<ThemeColorOptionsType, PaletteColor>;
+export type ThemePaletteColors = Record<ThemeUserColor, PaletteColor>;
 /**
  * Son las opcines de paleta de colores semánticos en formato PaletteColor
  */
@@ -87,9 +91,8 @@ export type DefaultPresetColor = Omit<PresetColor, 'borderMainDark' | 'borderMai
     mainLight: string;
     mainDark: string;
 };
-export type PresetsOptions = Array<{
+export type PresetsOptionsColorMain = Array<{
     name: string | undefined;
     value: string;
 }>;
 export type ColorState = 'warning' | 'delete' | 'info' | 'success';
-export type OurTheme = Pick<Theme, 'palette' | 'typography' | 'customShadows' | 'stretch' | 'size' | 'typography'>;

package/utils/getColorPresets.d.ts

@@ -1,12 +1,12 @@
-import { PresetColor, ThemeColorOptionsType } from '../types';
-export declare const DEFAULT_PRESET: ThemeColorOptionsType;
+import { PresetColor, ThemeUserColor } from '../types';
+export declare const DEFAULT_PRESET: ThemeUserColor;
 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
+ * @updatedAt 2024-10-08 13:31:22 - automatic
  * @updatedUser Juan Escobar - automatic
  */
-export declare function getColorPresets(presetsKey: ThemeColorOptionsType): PresetColor;
+export declare function getColorPresets(presetsKey: ThemeUserColor): PresetColor;
 export default getColorPresets;

package/utils/getPaletteByPreset.d.ts

@@ -1,12 +1,12 @@
-import { ThemeColorOptionsType } from '../types';
+import { ThemeUserColor } 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
+ * @updatedAt 2024-10-08 13:31:22 - automatic
  * @updatedUser Juan Escobar - automatic
  */
-export declare const getPaletteByPreset: (presetColor: ThemeColorOptionsType) => {
+export declare const getPaletteByPreset: (themeUserColor: ThemeUserColor) => {
     readonly light: {
         readonly mode: "light";
         readonly common: import('@mui/material').CommonColors;
@@ -26,8 +26,8 @@ export declare const getPaletteByPreset: (presetColor: ThemeColorOptionsType) =>
             readonly focusVisible: string;
             readonly contrastText: string;
             readonly light: string;
-            readonly main: string;
             readonly dark: string;
+            readonly main: string;
             readonly focusActive: string;
             readonly hover: string;
             readonly hoverOpacity: string;
@@ -45,7 +45,7 @@ export declare const getPaletteByPreset: (presetColor: ThemeColorOptionsType) =>
             readonly neutral: string;
             readonly surface: string;
             readonly hover: string;
-            readonly paper: "";
+            readonly paper: "#00000000";
         };
         readonly border: {
             readonly main: string;
@@ -67,8 +67,8 @@ export declare const getPaletteByPreset: (presetColor: ThemeColorOptionsType) =>
         readonly info: {
             readonly focusVisible: string;
             readonly light: string;
-            readonly main: string;
             readonly dark: string;
+            readonly main: string;
             readonly contrastText: string;
             readonly focusActive: string;
             readonly hover: string;
@@ -79,8 +79,8 @@ export declare const getPaletteByPreset: (presetColor: ThemeColorOptionsType) =>
         readonly success: {
             readonly focusVisible: string;
             readonly light: string;
-            readonly main: string;
             readonly dark: string;
+            readonly main: string;
             readonly contrastText: string;
             readonly focusActive: string;
             readonly hover: string;
@@ -91,8 +91,8 @@ export declare const getPaletteByPreset: (presetColor: ThemeColorOptionsType) =>
         readonly warning: {
             readonly focusVisible: string;
             readonly light: string;
-            readonly main: string;
             readonly dark: string;
+            readonly main: string;
             readonly contrastText: string;
             readonly focusActive: string;
             readonly hover: string;
@@ -103,8 +103,8 @@ export declare const getPaletteByPreset: (presetColor: ThemeColorOptionsType) =>
         readonly error: {
             readonly focusVisible: string;
             readonly light: string;
-            readonly main: string;
             readonly dark: string;
+            readonly main: string;
             readonly contrastText: string;
             readonly focusActive: string;
             readonly hover: string;
@@ -132,8 +132,8 @@ export declare const getPaletteByPreset: (presetColor: ThemeColorOptionsType) =>
             readonly focusVisible: string;
             readonly contrastText: string;
             readonly light: string;
-            readonly main: string;
             readonly dark: string;
+            readonly main: string;
             readonly focusActive: string;
             readonly hover: string;
             readonly hoverOpacity: string;
@@ -151,7 +151,7 @@ export declare const getPaletteByPreset: (presetColor: ThemeColorOptionsType) =>
             readonly neutral: string;
             readonly surface: string;
             readonly hover: string;
-            readonly paper: "";
+            readonly paper: "#00000000";
         };
         readonly border: {
             readonly main: string;
@@ -173,8 +173,8 @@ export declare const getPaletteByPreset: (presetColor: ThemeColorOptionsType) =>
         readonly info: {
             readonly focusVisible: string;
             readonly light: string;
-            readonly main: string;
             readonly dark: string;
+            readonly main: string;
             readonly contrastText: string;
             readonly focusActive: string;
             readonly hover: string;
@@ -185,8 +185,8 @@ export declare const getPaletteByPreset: (presetColor: ThemeColorOptionsType) =>
         readonly success: {
             readonly focusVisible: string;
             readonly light: string;
-            readonly main: string;
             readonly dark: string;
+            readonly main: string;
             readonly contrastText: string;
             readonly focusActive: string;
             readonly hover: string;
@@ -197,8 +197,8 @@ export declare const getPaletteByPreset: (presetColor: ThemeColorOptionsType) =>
         readonly warning: {
             readonly focusVisible: string;
             readonly light: string;
-            readonly main: string;
             readonly dark: string;
+            readonly main: string;
             readonly contrastText: string;
             readonly focusActive: string;
             readonly hover: string;
@@ -209,8 +209,8 @@ export declare const getPaletteByPreset: (presetColor: ThemeColorOptionsType) =>
         readonly error: {
             readonly focusVisible: string;
             readonly light: string;
-            readonly main: string;
             readonly dark: string;
+            readonly main: string;
             readonly contrastText: string;
             readonly focusActive: string;
             readonly hover: string;

package/utils/getPaletteByPreset.js

@@ -40,7 +40,7 @@ const t = {
         surface: r.marbleLight[50],
         hover: f.hover,
         //por compatibilidad de mui
-        paper: ""
+        paper: "#00000000"
       },
       border: {
         main: c[l]?.borderMainLight,
@@ -99,7 +99,7 @@ const t = {
         surface: r.marbleLight[60],
         hover: m.hover,
         //por compatibilidad de mui
-        paper: ""
+        paper: "#00000000"
       },
       border: {
         main: c[l]?.borderMainDark,

package/utils/getUserThemeOptions.d.ts

@@ -0,0 +1,10 @@
+import { Theme } from '@mui/material/styles';
+import { ThemeUserColor, ThemeUserMode } from '../types/types';
+/**
+ * Obtiene el tema de la aplicación basado en el color y modo seleccionado por el usuario.
+ * @author Juan Escobar - automatic
+ * @createdAt 2024-10-08 13:31:22 - automatic
+ * @updatedAt 2024-10-08 13:31:22 - automatic
+ * @updatedUser Juan Escobar - automatic
+ */
+export declare function getUserThemeOptions(themeUserMode: ThemeUserMode, themeUserColor: ThemeUserColor): Theme;

package/utils/getUserThemeOptions.js

@@ -0,0 +1,25 @@
+import { createTheme as s, alpha as e } from "@mui/material/styles";
+import { t as a } from "../theme/typography.js";
+import { s as m, c as p } from "../theme/shadows.js";
+import { S as i } from "../theme/sizes/size.js";
+import { g as c } from "./getColorPresets.js";
+import { g as f } from "./getPaletteByPreset.js";
+const o = s();
+function S(t, r) {
+  return {
+    ...o,
+    ...a,
+    ...m[t],
+    customShadows: {
+      primary: `0 8px 16px 0 ${e(c(r).main, 0.2)}`,
+      ...p(t)
+    },
+    stretch: !0,
+    palette: { ...o.palette, ...f(r)[t] },
+    typography: a,
+    size: i
+  };
+}
+export {
+  S as g
+};

package/utils/index.d.ts

@@ -3,3 +3,4 @@ export * from './getColorPresets';
 export * from './getFontValue';
 export * from './getColorState';
 export * from './getPaletteByPreset';
+export * from './getUserThemeOptions';

package/theme/ourTheme.d.ts

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

package/theme/ourTheme.js

@@ -1,25 +0,0 @@
-import { createTheme as o, alpha as s } from "@mui/material/styles";
-import { t } from "./typography.js";
-import { s as a, c as r } from "./shadows.js";
-import { S as m } from "./sizes/size.js";
-import { g as p } from "../utils/getPaletteByPreset.js";
-import { g as i } from "../utils/getColorPresets.js";
-const h = o(), e = p("patronus"), P = {
-  ...t,
-  ...a.light,
-  ...e,
-  customShadows: {
-    primary: `0 8px 16px 0 ${s(i("patronus").main, 0.2)}`,
-    ...r("light")
-  },
-  stretch: !0,
-  palette: {
-    ...h.palette,
-    ...e.light
-  },
-  typography: t,
-  size: m
-};
-export {
-  P as O
-};