@m4l/styles 6.1.1 → 6.2.1

package/theme/typography-BSiavZtl.js

@@ -0,0 +1,260 @@
+import { createTheme as i } from "@mui/material";
+import { r as p, p as e } from "../utils/getFontValue-BEO-XID9.js";
+const h = "Segoe UI, Poppins, sans-serif", n = i(), m = {
+  ...n.typography,
+  fontFamily: h,
+  fontWeightRegular: 400,
+  fontWeightMedium: 600,
+  fontWeightBold: 700,
+  /* Definindo en Patronus */
+  h1: {
+    fontWeight: 600,
+    lineHeight: 1.5,
+    ...p({ sm: 38, md: 38, lg: 38 })
+  },
+  h2: {
+    fontWeight: 600,
+    lineHeight: 1,
+    ...p({ sm: 40, md: 40, lg: 40 })
+  },
+  /* Definindo en Patronus */
+  h3: {
+    fontWeight: 600,
+    lineHeight: 1.5,
+    ...p({ sm: 30, md: 30, lg: 30 })
+  },
+  h4: {
+    fontWeight: 600,
+    lineHeight: 1.5,
+    ...p({ sm: 20, md: 20, lg: 20 })
+  },
+  /* Definindo en Patronus */
+  h5: {
+    fontWeight: 500,
+    lineHeight: "28px",
+    letterSpacing: "-0.01em",
+    ...p({ sm: 22, md: 22, lg: 22 })
+  },
+  h6: {
+    fontWeight: 500,
+    lineHeight: "24px",
+    letterSpacing: "-0.08em",
+    ...p({ sm: 18, md: 18, lg: 18 })
+  },
+  /* Definindo en Patronus */
+  subtitle: {
+    fontWeight: 400,
+    lineHeight: "20px",
+    letterSpacing: "-0.006em",
+    ...p({ sm: 15, md: 15, lg: 15 })
+  },
+  /* Definindo en Patronus */
+  subtitleDens: {
+    fontWeight: 600,
+    lineHeight: "24px",
+    letterSpacing: "-0.006em",
+    ...p({ sm: 15, md: 15, lg: 15 })
+  },
+  /* Definindo en Patronus */
+  paragraph: {
+    fontWeight: 400,
+    lineHeight: "16px",
+    letterSpacing: "-0.003em",
+    ...p({ sm: 13, md: 13, lg: 13 })
+  },
+  /* Definindo en Patronus */
+  paragraphDens: {
+    fontWeight: 600,
+    lineHeight: "20px",
+    letterSpacing: "-0.003em",
+    ...p({ sm: 13, md: 13, lg: 13 })
+  },
+  subtitle1: {
+    fontWeight: 600,
+    lineHeight: 1.5,
+    fontSize: e(14)
+  },
+  subtitle2: {
+    fontWeight: 600,
+    lineHeight: 1.5,
+    fontSize: e(12)
+  },
+  /* Definindo en Patronus */
+  body: {
+    fontWeight: 400,
+    lineHeight: "16px",
+    ...p({ sm: 11, md: 11, lg: 11 })
+  },
+  /* Definindo en Patronus */
+  bodyDens: {
+    fontWeight: 600,
+    lineHeight: "16px",
+    ...p({ sm: 11, md: 11, lg: 11 })
+  },
+  body0: {
+    lineHeight: 1.5,
+    fontWeight: 400,
+    fontSize: e(16)
+  },
+  body1: {
+    lineHeight: 1.5,
+    fontWeight: 400,
+    fontSize: e(14)
+  },
+  body2: {
+    lineHeight: 1.5,
+    fontWeight: 400,
+    fontSize: e(12)
+  },
+  caption: {
+    lineHeight: 1.5,
+    fontSize: e(11)
+  },
+  overline: {
+    fontWeight: 700,
+    lineHeight: 1.5,
+    fontSize: e(12),
+    textTransform: "uppercase"
+  },
+  button: {
+    fontWeight: 700,
+    lineHeight: 24 / 14,
+    fontSize: e(14),
+    textTransform: "capitalize"
+  },
+  /* Definindo en Patronus */
+  action: {
+    fontWeight: 600,
+    lineHeight: "16px",
+    ...p({ sm: 12, md: 12, lg: 12 })
+  }
+}, g = {
+  lh1: "14px",
+  lh2: "16px",
+  lh3: "20px",
+  lh4: "24px",
+  lh5: "28px",
+  lh6: "32px"
+}, o = {
+  regular: 500,
+  dens: 700,
+  number: 0
+}, t = {
+  pt10: "10px",
+  pt11: "11px",
+  pt12: "12px",
+  pt13: "13px",
+  pt14: "14px",
+  pt15: "15px",
+  pt16: "16px",
+  pt17: "17px",
+  pt18: "18px",
+  pt19: "19px",
+  pt20: "20px",
+  pt21: "21px",
+  pt22: "22px",
+  pt23: "23px",
+  pt24: "24px",
+  pt25: "25px",
+  pt26: "26px",
+  pt27: "27px",
+  pt28: "28px",
+  pt29: "29px",
+  pt30: "30px",
+  pt31: "31px",
+  pt32: "32px",
+  pt33: "33px",
+  pt34: "34px",
+  pt35: "35px",
+  pt36: "36px",
+  pt37: "37px",
+  pt38: "38px",
+  pt39: "39px",
+  pt40: "40px",
+  pt41: "41px",
+  pt42: "42px",
+  pt43: "43px",
+  pt44: "44px",
+  pt45: "45px",
+  pt46: "46px",
+  pt47: "47px",
+  pt48: "48px",
+  pt49: "49px",
+  pt50: "50px",
+  pt51: "51px",
+  pt52: "52px",
+  pt53: "53px",
+  pt54: "54px",
+  pt55: "55px",
+  pt56: "56px",
+  pt57: "57px",
+  pt58: "58px",
+  pt59: "59px",
+  pt60: "60px"
+}, l = {
+  small: {
+    h1: t.pt42,
+    h2: t.pt32,
+    h3: t.pt26,
+    h5: t.pt20,
+    subtitle: t.pt17,
+    paragraph: t.pt15,
+    body: t.pt13
+  },
+  medium: {
+    h1: t.pt44,
+    h2: t.pt32,
+    h3: t.pt28,
+    h5: t.pt20,
+    subtitle: t.pt18,
+    paragraph: t.pt15,
+    body: t.pt14
+  },
+  large: {
+    h1: t.pt45,
+    h2: t.pt33,
+    h3: t.pt29,
+    h5: t.pt21,
+    subtitle: t.pt19,
+    paragraph: t.pt16,
+    body: t.pt14
+  }
+}, x = {
+  small: {
+    h1: t.pt54,
+    h2: t.pt42,
+    h3: t.pt30,
+    h5: t.pt26,
+    subtitle: t.pt14,
+    paragraph: t.pt12,
+    body: t.pt10
+  },
+  medium: {
+    h1: t.pt56,
+    h2: t.pt44,
+    h3: t.pt32,
+    h5: t.pt28,
+    subtitle: t.pt15,
+    paragraph: t.pt13,
+    body: t.pt11
+  },
+  large: {
+    h1: t.pt57,
+    h2: t.pt45,
+    h3: t.pt33,
+    h5: t.pt29,
+    subtitle: t.pt16,
+    paragraph: t.pt14,
+    body: t.pt12
+  }
+}, r = {
+  mobile: l,
+  desktop: x,
+  lineHeight: g,
+  weight: o,
+  letterSpacing: 0.5
+};
+export {
+  r as T,
+  m as t
+};

package/types/augmentations.d.ts

@@ -2,6 +2,7 @@ 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 {
@@ -72,7 +73,7 @@ declare module '@mui/material/styles' {
       disabled: string;
       error: string;
     };
-    default: PaletteColor; 
+    default: PaletteColor;
     general: {
       scrollBar: string;
       gridHover: string;

package/types/types.d.ts

@@ -79,7 +79,7 @@ export declare type ThemePaletteColors = Record<ThemeColorOptionsType, PaletteCo
 /**
  * Son las opcines de paleta de colores semánticos en formato PaletteColor
 */
-export declare type SemanticsPaletteColors = Record<SemanticColorOptionsType, PaletteColor>;
+export declare 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.
 */
@@ -92,4 +92,4 @@ export declare type PresetsOptions = Array<{
     value: string;
 }>;
 export declare type ColorState = 'warning' | 'delete' | 'info' | 'success';
-export declare type OurTheme = Pick<Theme, 'palette' | 'typography' | 'customShadows' | 'stretch' | 'size'>;
+export declare type OurTheme = Pick<Theme, 'palette' | 'typography' | 'customShadows' | 'stretch' | 'size' | 'typography'>;

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

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

package/utils/getPaletteByPreset.d.ts

@@ -1,10 +1,6 @@
 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: {
@@ -61,12 +57,56 @@ export declare const getPaletteByPreset: (presetColor: ThemeColorOptionsType) =>
             readonly default: string;
             readonly transition: string;
         };
+        readonly info: {
+            readonly focusVisible: string;
+            readonly light: string;
+            readonly contrastText: string;
+            readonly main: string;
+            readonly dark: string;
+            readonly focusActive: string;
+            readonly hover: string;
+            readonly hoverOpacity: string;
+            readonly opacity: string;
+            readonly toneOpacity: string;
+        };
+        readonly success: {
+            readonly focusVisible: string;
+            readonly light: string;
+            readonly contrastText: string;
+            readonly main: string;
+            readonly dark: string;
+            readonly focusActive: string;
+            readonly hover: string;
+            readonly hoverOpacity: string;
+            readonly opacity: string;
+            readonly toneOpacity: string;
+        };
+        readonly warning: {
+            readonly focusVisible: string;
+            readonly light: string;
+            readonly contrastText: string;
+            readonly main: string;
+            readonly dark: string;
+            readonly focusActive: string;
+            readonly hover: string;
+            readonly hoverOpacity: string;
+            readonly opacity: string;
+            readonly toneOpacity: string;
+        };
+        readonly error: {
+            readonly focusVisible: string;
+            readonly light: string;
+            readonly contrastText: string;
+            readonly main: string;
+            readonly dark: string;
+            readonly focusActive: string;
+            readonly hover: string;
+            readonly hoverOpacity: string;
+            readonly opacity: string;
+            readonly toneOpacity: 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: {
@@ -123,5 +163,53 @@ export declare const getPaletteByPreset: (presetColor: ThemeColorOptionsType) =>
             readonly default: string;
             readonly transition: string;
         };
+        readonly info: {
+            readonly focusVisible: string;
+            readonly light: string;
+            readonly contrastText: string;
+            readonly main: string;
+            readonly dark: string;
+            readonly focusActive: string;
+            readonly hover: string;
+            readonly hoverOpacity: string;
+            readonly opacity: string;
+            readonly toneOpacity: string;
+        };
+        readonly success: {
+            readonly focusVisible: string;
+            readonly light: string;
+            readonly contrastText: string;
+            readonly main: string;
+            readonly dark: string;
+            readonly focusActive: string;
+            readonly hover: string;
+            readonly hoverOpacity: string;
+            readonly opacity: string;
+            readonly toneOpacity: string;
+        };
+        readonly warning: {
+            readonly focusVisible: string;
+            readonly light: string;
+            readonly contrastText: string;
+            readonly main: string;
+            readonly dark: string;
+            readonly focusActive: string;
+            readonly hover: string;
+            readonly hoverOpacity: string;
+            readonly opacity: string;
+            readonly toneOpacity: string;
+        };
+        readonly error: {
+            readonly focusVisible: string;
+            readonly light: string;
+            readonly contrastText: string;
+            readonly main: string;
+            readonly dark: string;
+            readonly focusActive: string;
+            readonly hover: string;
+            readonly hoverOpacity: string;
+            readonly opacity: string;
+            readonly toneOpacity: string;
+        };
     };
 };

package/theme/index-Y2nvv8zQ.js

@@ -1,196 +0,0 @@
-import { createTheme as h, alpha as O } from "@mui/material/styles";
-import { t as p } from "./typography-BsOO459U.js";
-import { s as R, c as _ } from "./shadows-Cek_1mpN.js";
-import { C as i, D as l, B as s, P as m, a as e, S as d, G as n, b as c, c as x, d as b, e as f } from "./palette-voCQl3kP.js";
-import { g as S } from "../utils/getColorPresets-DgmrCj5l.js";
-const o = {
-  light: {
-    scrollBar: "#5663763D",
-    gridHover: "#FCFCFC"
-  },
-  dark: {
-    scrollBar: "#5663765D",
-    gridHover: "#282E2E"
-  }
-}, L = (a) => {
-  const t = b?.[a], u = f?.[a];
-  return {
-    light: {
-      mode: "light",
-      common: i,
-      primary: {
-        ...t
-      },
-      default: {
-        ...l,
-        focusVisible: t.focusVisible,
-        contrastText: s.onyx[20]
-      },
-      divider: s.coolGrey[20],
-      text: {
-        primary: s.onyx[20],
-        secondary: s.coolGrey[50],
-        disabled: s.oxford[30]
-      },
-      background: {
-        default: s.marbleLight[10],
-        neutral: s.marbleLight[30],
-        surface: s.marbleLight[50],
-        hover: l.hover,
-        //por compatibilidad de mui
-        paper: ""
-      },
-      border: {
-        main: m[a]?.borderMainLight,
-        default: e.oxford[40],
-        secondary: e.oxford[30],
-        dens: e.oxford[60],
-        disabled: e.oxford[10],
-        error: d.error.main
-      },
-      general: {
-        scrollBar: o.light.scrollBar,
-        gridHover: o.light.gridHover
-      },
-      grey: n,
-      skeleton: {
-        default: e.oxford[10],
-        transition: e.oxford[20]
-      },
-      ...d
-    },
-    dark: {
-      mode: "dark",
-      common: i,
-      primary: {
-        ...t
-      },
-      default: {
-        ...c,
-        focusVisible: u?.focusVisible,
-        contrastText: s.marbleLight[30]
-      },
-      text: {
-        primary: s.marbleLight[30],
-        secondary: s.coolGrey[20],
-        disabled: s.coolGrey[50]
-      },
-      divider: s.coolGrey[80],
-      background: {
-        default: s.onyx[40],
-        neutral: s.marbleLight[50],
-        surface: s.marbleLight[60],
-        hover: c.hover,
-        //por compatibilidad de mui
-        paper: ""
-      },
-      border: {
-        main: m[a]?.borderMainDark,
-        default: e.mint[50],
-        secondary: e.mint[40],
-        dens: e.mint[60],
-        disabled: e.mint[20],
-        error: x.error.main
-      },
-      general: {
-        scrollBar: o.light.scrollBar,
-        gridHover: o.light.gridHover
-      },
-      grey: n,
-      skeleton: {
-        default: e.mint[20],
-        transition: e.mint[40]
-      },
-      ...x
-    }
-  };
-}, E = {
-  r0: "0px",
-  "r0.5": "2px",
-  r1: "4px",
-  "r1.5": "6px",
-  r2: "8px",
-  r3: "12px",
-  r4: "16px"
-}, r = {
-  sp0: "0px",
-  "sp0.5": "2px",
-  sp1: "4px",
-  sp2: "8px",
-  sp3: "12px",
-  "sp3.5": "14px",
-  sp4: "16px",
-  sp5: "20px",
-  sp6: "24px",
-  sp7: "28px",
-  sp8: "32px",
-  sp9: "36px",
-  sp10: "40px",
-  "sp10.5": "42px",
-  sp11: "44px",
-  sp12: "48px",
-  sp13: "52px",
-  sp14: "56px",
-  "sp14.5": "58px"
-}, y = {
-  base: {
-    small: r["sp3.5"],
-    medium: r.sp4,
-    large: r.sp5
-  },
-  action: {
-    small: r.sp5,
-    medium: r.sp6,
-    large: r.sp8
-  },
-  container: {
-    small: r.sp7,
-    medium: r.sp8,
-    large: r.sp9
-  }
-}, C = {
-  base: {
-    small: r.sp5,
-    medium: r.sp6,
-    large: r.sp7
-  },
-  action: {
-    small: r.sp7,
-    medium: r.sp8,
-    large: r.sp9
-  },
-  container: {
-    small: r.sp9,
-    medium: r.sp10,
-    large: r.sp11
-  }
-}, T = {
-  desktop: {
-    ...y
-  },
-  mobile: {
-    ...C
-  },
-  borderRadius: {
-    ...E
-  }
-}, A = h(), g = L("patronus"), G = {
-  ...p,
-  ...R.light,
-  ...g,
-  customShadows: {
-    primary: `0 8px 16px 0 ${O(S("patronus").main, 0.2)}`,
-    ..._("light")
-  },
-  stretch: !0,
-  palette: {
-    ...A.palette,
-    ...g.light
-  },
-  typography: p,
-  size: T
-};
-export {
-  G as O,
-  L as g
-};