@m4l/styles 7.1.14 → 7.1.15

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@m4l/styles",
-  "version": "7.1.14",
+  "version": "7.1.15",
   "license": "UNLICENSED",
   "author": "m4l team",
   "publishConfig": {
@@ -34,7 +34,6 @@
     "*"
   ],
   "source": "./index.js",
-  "main": "./index.js",
   "module": "./index.js",
   "types": "./index.d.ts",
   "type": "module",
@@ -43,5 +42,10 @@
     "node": ">=12.0.0"
   },
   "packageManager": "yarn@4.5.0",
-  "private": false
+  "private": false,
+  "exports": {
+    ".": {
+      "import": "./index.js"
+    }
+  }
 }

package/theme/shadows.d.ts

@@ -15,7 +15,6 @@ export interface CustomShadowOptions {
     dropdown: string;
     innerShadowContainer: string;
     innerShadowOutlinedText: string;
-    innerShadowText: string;
 }
 /**
  * Create custom shadows for the theme

package/theme/shadows.js

@@ -1,9 +1,8 @@
 import { alpha as x } from "@mui/material/styles";
 import { G as r } from "./palette/greyPalette.js";
-import { B as o } from "./palette/baseColors.js";
-import { C as s } from "./palette/commonColors.js";
-import { B as e } from "./palette/baseOpacityColors.js";
-const i = r[500], d = "#000000", a = (t) => {
+import { B as e } from "./palette/baseColors.js";
+import { C as o } from "./palette/commonColors.js";
+const s = r[500], i = "#000000", a = (t) => {
   const p = x(t, 0.2), $ = x(t, 0.14), n = x(t, 0.12);
   return [
     "none",
@@ -32,19 +31,19 @@ const i = r[500], d = "#000000", a = (t) => {
     `0px 11px 14px -7px ${p},0px 23px 36px 3px ${$},0px 9px 44px 8px ${n}`,
     `0px 11px 15px -7px ${p},0px 24px 38px 3px ${$},0px 9px 46px 8px ${n}`
   ];
-}, h = (t) => {
+}, O = (t) => {
   const p = {
-    info: `0px 2px 8px 0px ${x(o.patronusBlue[50], 0.2)}`,
-    secondary: `0px 2px 8px 0px ${x(o.patronusBlue[50], 0.24)}`,
-    success: `0px 2px 8px 0px ${x(o.acidGreen[50], 0.2)}`,
-    warning: `0px 2px 8px 0px ${x(o.middleYellow[50], 0.2)}`,
-    error: `0px 2px 8px 0px ${x(o.flameRed[50], 0.2)}`,
+    info: `0px 2px 8px 0px ${x(e.patronusBlue[50], 0.2)}`,
+    secondary: `0px 2px 8px 0px ${x(e.patronusBlue[50], 0.24)}`,
+    success: `0px 2px 8px 0px ${x(e.acidGreen[50], 0.2)}`,
+    warning: `0px 2px 8px 0px ${x(e.middleYellow[50], 0.2)}`,
+    error: `0px 2px 8px 0px ${x(e.flameRed[50], 0.2)}`,
     //
     card: `0 0 2px 0 ${x(r[500], 0.2)}, 0 12px 24px -4px ${x(
       r[500],
       0.12
     )}`,
-    dialog: `-40px 40px 80px -8px ${x(s.black, 0.24)}`,
+    dialog: `-40px 40px 80px -8px ${x(o.black, 0.24)}`,
     dropdown: `0 0 2px 0 ${x(r[500], 0.24)}, -20px 20px 40px -4px ${x(
       r[500],
       0.24
@@ -59,9 +58,8 @@ const i = r[500], d = "#000000", a = (t) => {
     // todo: solicitar a diseño crear token en base porque está quemado
     z4: `0px 12px 32px 4px  ${x("#243B46", 0.12)}`,
     // todo: solicitar a diseño crear token en base porque está quemado
-    innerShadowContainer: `2px 2px 4px 1px ${x(e.onyx[80] || "#1C2121", 0.6)} inset`,
-    innerShadowOutlinedText: `2px 2px 6px 2px ${x(e.onyx[80] || "#1C2121", 0.48)} inset`,
-    innerShadowText: `2px 2px 4px 2px ${x(e.onyx[80] || "#1C2121", 0.16)} inset`,
+    innerShadowContainer: `2px 2px 4px 1px ${x("#1C2121", 0.7)} inset`,
+    innerShadowOutlinedText: `2px 2px 4px 1px ${x("#1C2121", 0.4)} inset`,
     ...p
   } : {
     z1: `0px 2px 2px 2px  ${x("#000000", 0.16)}`,
@@ -72,16 +70,15 @@ const i = r[500], d = "#000000", a = (t) => {
     // todo: solicitar a diseño crear token en base porque está quemado
     z4: `0px 12px 32px 4px  ${x("#09090A", 0.35)}`,
     // todo: solicitar a diseño crear token en base porque está quemado
-    innerShadowContainer: `3px 3px 4px 1px ${x(e.onyx[80] || "#1C2121", 0.72)} inset`,
-    innerShadowOutlinedText: `3px 3px 6px 2px ${x(e.onyx[80] || "#1C2121", 0.72)} inset`,
-    innerShadowText: `2px 2px 4px 2px ${x(e.onyx[80] || "#1C2121", 0.72)} inset`,
+    innerShadowContainer: `2px 2px 4px 1px ${x("#1C2121", 0.9)} inset`,
+    innerShadowOutlinedText: `2px 2px 4px 1px ${x("#1C2121", 0.4)} inset`,
     ...p
   };
-}, l = {
-  light: a(i),
-  dark: a(d)
+}, m = {
+  light: a(s),
+  dark: a(i)
 };
 export {
-  h as c,
-  l as s
+  O as c,
+  m as s
 };

package/theme/typography.d.ts

@@ -238,8 +238,4 @@ export declare const typography: {
         readonly fontWeight: 600;
         readonly lineHeight: "16px";
     };
-    readonly fontSize: number;
-    readonly fontWeightLight: React.CSSProperties["fontWeight"];
-    readonly htmlFontSize: number;
-    readonly pxToRem: (px: number) => string;
 };

package/theme/typography.js

@@ -1,8 +1,7 @@
-import { createTheme as i } from "@mui/material";
 import { a as e, p as t } from "../utils/getFontValue.js";
-const n = "Inter, Segoe UI, Poppins, sans-serif", g = i(), l = {
-  ...g.typography,
-  fontFamily: n,
+const i = "Inter, Segoe UI, Poppins, sans-serif", g = {
+  // ...baseTheme.typography,
+  fontFamily: i,
   fontWeightRegular: 400,
   fontWeightMedium: 600,
   fontWeightBold: 700,
@@ -130,5 +129,5 @@ const n = "Inter, Segoe UI, Poppins, sans-serif", g = i(), l = {
   }
 };
 export {
-  l as t
+  g as t
 };

package/types/augmentations.d.ts

@@ -1,6 +1,6 @@
 import type { CustomShadowOptions } from '../theme';
 import type { Size } from '../theme/sizes/types';
-import { BaseChipColors } from './types';
+import type { BaseChipColors } from './types';
 
 declare module '@mui/material' {
   interface Color {

package/utils/getUserThemeOptions.d.ts

@@ -1,4 +1,4 @@
-import { Theme } from '@mui/material/styles';
+import { Theme } from '@mui/material';
 import { ThemeUserColor, ThemeUserMode } from '../types/types';
 /**
  * Obtiene el tema de la aplicación basado en el color y modo seleccionado por el usuario.

package/utils/getUserThemeOptions.js

@@ -1,22 +1,23 @@
-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 { createTheme as p, alpha as s } from "@mui/material";
+import { t as o } from "../theme/typography.js";
+import { s as e, c as m } 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) {
+import { g } from "./getColorPresets.js";
+import { g as y } from "./getPaletteByPreset.js";
+function S(r, a) {
+  const t = p();
   return {
+    ...t,
+    ...t.typography,
     ...o,
-    ...a,
-    ...m[t],
+    ...e[r],
     customShadows: {
-      primary: `0 8px 16px 0 ${e(c(r).main, 0.2)}`,
-      ...p(t)
+      primary: `0 8px 16px 0 ${s(g(a).main, 0.2)}`,
+      ...m(r)
     },
     stretch: !0,
-    palette: { ...o.palette, ...f(r)[t] },
-    typography: a,
+    palette: { ...t.palette, ...y(a)[r] },
+    typography: { ...t.typography, ...o },
     size: i
   };
 }