@m4l/styles 2.0.3 → 3.0.0

package/theme/{typography.947dc33f.js → typography-BsOO459U.js}

@@ -1,131 +1,134 @@
 import { createTheme as i } from "@mui/material";
-import "@mui/material/styles";
-import "@mui/material/useMediaQuery";
-import "../utils/getColorPresets.a96a4046.js";
-import "@mui/system";
-import "./defaultThemeOptions.d580f3ec.js";
-import "./shadows.e0c009ff.js";
-import "./palette.287635f2.js";
-import { r as t, p as e } from "../utils/getFontValue.88831637.js";
-const n = "Segoe UI, Poppins, sans-serif", g = i(), W = {
+import { r as e, p as t } from "../utils/getFontValue-BEO-XID9.js";
+const n = "Segoe UI, Poppins, sans-serif", g = i(), l = {
   ...g.typography,
   fontFamily: n,
   fontWeightRegular: 400,
   fontWeightMedium: 600,
   fontWeightBold: 700,
+  /* Definindo en Patronus */
   h1: {
     fontWeight: 600,
     lineHeight: 1.5,
-    ...t({ sm: 38, md: 38, lg: 38 })
+    ...e({ sm: 38, md: 38, lg: 38 })
   },
   h2: {
     fontWeight: 600,
     lineHeight: 1,
-    ...t({ sm: 40, md: 40, lg: 40 })
+    ...e({ sm: 40, md: 40, lg: 40 })
   },
+  /* Definindo en Patronus */
   h3: {
     fontWeight: 600,
     lineHeight: 1.5,
-    ...t({ sm: 30, md: 30, lg: 30 })
+    ...e({ sm: 30, md: 30, lg: 30 })
   },
   h4: {
     fontWeight: 600,
     lineHeight: 1.5,
-    ...t({ sm: 20, md: 20, lg: 20 })
+    ...e({ sm: 20, md: 20, lg: 20 })
   },
+  /* Definindo en Patronus */
   h5: {
     fontWeight: 500,
     lineHeight: "28px",
     letterSpacing: "-0.01em",
-    ...t({ sm: 22, md: 22, lg: 22 })
+    ...e({ sm: 22, md: 22, lg: 22 })
   },
   h6: {
     fontWeight: 500,
     lineHeight: "24px",
     letterSpacing: "-0.08em",
-    ...t({ sm: 18, md: 18, lg: 18 })
+    ...e({ sm: 18, md: 18, lg: 18 })
   },
+  /* Definindo en Patronus */
   subtitle: {
     fontWeight: 400,
     lineHeight: "20px",
     letterSpacing: "-0.006em",
-    ...t({ sm: 15, md: 15, lg: 15 })
+    ...e({ sm: 15, md: 15, lg: 15 })
   },
+  /* Definindo en Patronus */
   subtitleDens: {
     fontWeight: 600,
     lineHeight: "24px",
     letterSpacing: "-0.006em",
-    ...t({ sm: 15, md: 15, lg: 15 })
+    ...e({ sm: 15, md: 15, lg: 15 })
   },
+  /* Definindo en Patronus */
   paragraph: {
     fontWeight: 400,
     lineHeight: "16px",
     letterSpacing: "-0.003em",
-    ...t({ sm: 13, md: 13, lg: 13 })
+    ...e({ sm: 13, md: 13, lg: 13 })
   },
+  /* Definindo en Patronus */
   paragraphDens: {
     fontWeight: 600,
     lineHeight: "20px",
     letterSpacing: "-0.003em",
-    ...t({ sm: 13, md: 13, lg: 13 })
+    ...e({ sm: 13, md: 13, lg: 13 })
   },
   subtitle1: {
     fontWeight: 600,
     lineHeight: 1.5,
-    fontSize: e(14)
+    fontSize: t(14)
   },
   subtitle2: {
     fontWeight: 600,
     lineHeight: 1.5,
-    fontSize: e(12)
+    fontSize: t(12)
   },
+  /* Definindo en Patronus */
   body: {
     fontWeight: 400,
     lineHeight: "16px",
-    ...t({ sm: 11, md: 11, lg: 11 })
+    ...e({ sm: 11, md: 11, lg: 11 })
   },
+  /* Definindo en Patronus */
   bodyDens: {
     fontWeight: 600,
     lineHeight: "16px",
-    ...t({ sm: 11, md: 11, lg: 11 })
+    ...e({ sm: 11, md: 11, lg: 11 })
   },
   body0: {
     lineHeight: 1.5,
     fontWeight: 400,
-    fontSize: e(16)
+    fontSize: t(16)
   },
   body1: {
     lineHeight: 1.5,
     fontWeight: 400,
-    fontSize: e(14)
+    fontSize: t(14)
   },
   body2: {
     lineHeight: 1.5,
     fontWeight: 400,
-    fontSize: e(12)
+    fontSize: t(12)
   },
   caption: {
     lineHeight: 1.5,
-    fontSize: e(11)
+    fontSize: t(11)
   },
   overline: {
     fontWeight: 700,
     lineHeight: 1.5,
-    fontSize: e(12),
+    fontSize: t(12),
     textTransform: "uppercase"
   },
   button: {
     fontWeight: 700,
     lineHeight: 24 / 14,
-    fontSize: e(14),
+    fontSize: t(14),
     textTransform: "capitalize"
   },
+  /* Definindo en Patronus */
   action: {
     fontWeight: 600,
     lineHeight: "16px",
-    ...t({ sm: 12, md: 12, lg: 12 })
+    ...e({ sm: 12, md: 12, lg: 12 })
   }
 };
 export {
-  W as t
+  l as t
 };

package/types/augmentations.d.ts

@@ -1,137 +1,144 @@
-import {
-  PatronusConstantColors,
-  PatronusOpacityColors,
-  PatronusOpacityOptions,
-} from '../theme/palette';
-import { ColorStateOptions, CustomShadowOptions } from '../theme';
-import { ChartPaletteOptions, GradientsPaletteOptions, GridPaletteOptions } from './types';
-import { Breakpoints } from '@mui/material';
-import { CssVarsTheme } from '@mui/material/styles';
-
-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/createPalette' {}
-
-// declare module '@mui/core/Typography' {
-//     interface TypographyProps {
-//       variant?: 'subtitle';
-//     }
-// }
-
-declare module '@mui/material/styles' {
-  interface SimplePaletteColorOptions {
-    lighter?: string;
-    darker?: string;
-    LightSelected?: string;
-    LightSelectedHover?: string;
-    DarkSelected?: string;
-    DarkSelectedHover?: string;
-  }
-  interface PaletteColor {
-    lighter?: string;
-    darker?: string;
-    LightSelected?: string;
-    LightSelectedHover?: string;
-    DarkSelected?: string;
-    DarkSelectedHover?: string;
-    opacity?: string;
-    name?: string;
-  }
-  interface Palette {
-    gradients?: GradientsPaletteOptions;
-    chart: ChartPaletteOptions;
-    grid?: GridPaletteOptions;
-    patronus?: PatronusConstantColors;
-    opacity: Record<PatronusOpacityColors, PatronusOpacityOptions>;
-    state: ColorStateOptions /* Organizar cada caso con los valores específicos. */;
-    representative: string;
-    mode: 'light' | 'dark';
-    /* info: AgumentationInfoOptions; */
-  }
-
-  interface TypeText {
-    bgPrimary: string;
-  }
-  interface PaletteOptions {
-    gradients?: GradientsPaletteOptions;
-    chart?: ChartPaletteOptions;
-    grid?: GridPaletteOptions;
-    patronus?: PatronusConstantColors;
-    opacity: Record<PatronusOpacityColors, PatronusOpacityOptions>;
-    state: ColorStateOptions /* Organizar cada caso con los valores específicos. */;
-    representative: string;
-    mode: 'light' | 'dark';
-  }
-
-  interface ColorSchemeOverrides {
-    finalTheme?: true;
-  }
-
-  interface Theme extends CssVarsTheme {
-    stretch: boolean;
-    customShadows: CustomShadowOptions;
-    breakpoints: Breakpoints;
-  }
-
-  interface ThemeVars {
-    customShadows: CustomShadowOptions;
-  }
-
-  interface ColorSystem {
-    typography: TypographyVariants;
-  }
-
-  interface TypeBackground {
-    neutral: string;
-    autofill: string;
-    header: string;
-    background: string;
-  }
-}
-
-declare module '@mui/material/styles' {
-  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>;
-  }
-
-  // allow configuration using `createTheme`
-  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 { CssVarsTheme } from '@mui/material/styles';
+
+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 Theme extends CssVarsTheme {
+    stretch: boolean;
+    customShadows: CustomShadowOptions;
+    breakpoints: Breakpoints;
+  }
+
+  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;
+  }
+}

package/types/types.d.ts

@@ -1,29 +1,52 @@
+import { PaletteColor } from '@mui/material/styles';
 export declare type ThemeColorPresets = 'patronus' | 'turqui' | 'grass' | 'brown' | 'blaze';
-export interface GridPaletteOptions {
-    sectionHeader: string;
-    rowHover: string;
-    divider: string;
+export declare type StateColorSchema = 'info' | 'success' | 'warning' | 'error';
+export declare type ColorSchema = 'primary' | 'secondary' | StateColorSchema;
+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 interface Colors {
+    '00': string;
+    10: string;
+    20: string;
+    30: string;
+    40: string;
+    50: string;
+    60: string;
+    70: string;
+    80: string;
+    90: string;
+    100: string;
 }
-export interface ChartPaletteOptions {
-    violet: string[];
-    blue: string[];
-    green: string[];
-    yellow: string[];
-    red: 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;
 }
-export interface GradientsPaletteOptions {
-    primary: string;
-    info: string;
-    success: string;
-    warning: string;
-    error: string;
+export interface ActionsPaletteColors {
+    active: string;
+    activeOpacity: string;
+    hover: string;
+    focus: string;
+    selected: string;
+    toneOpacity: string;
 }
-export declare type ColorVariants = {
-    name: string;
-    lighter: string;
-    light: string;
-    main: string;
-    dark: string;
-    darker: string;
-    contrastText: string;
-};
+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>;
+export declare type PresetsOptions = Array<{
+    name: string | undefined;
+    value: string;
+}>;

package/utils/getColorPresets-CXZaM9oS.js

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

package/utils/getColorPresets.d.ts

@@ -1,10 +1,5 @@
-import { ThemeColorPresets } from '../types';
-import { PaletteColor } from '@mui/material';
-export declare const colorPresets: Array<PaletteColor>;
-export declare const defaultPreset: PaletteColor;
-export declare const turqui: PaletteColor;
-export declare const grass: PaletteColor;
-export declare const brown: PaletteColor;
-export declare const blaze: PaletteColor;
-export declare function getColorPresets(presetsKey: ThemeColorPresets): any;
+import { BasePresetColors, ThemeColorPresets } from '../types';
+export declare const DEFAULT_PRESET: ThemeColorPresets;
+export declare const defaultPresetColors: BasePresetColors;
+export declare function getColorPresets(presetsKey: ThemeColorPresets): BasePresetColors;
 export default getColorPresets;

package/utils/{getFontValue.88831637.js → getFontValue-BEO-XID9.js}

@@ -1,5 +1,5 @@
 import { useTheme as h } from "@mui/material/styles";
-import { u as m } from "./useResponsive.2c45e8e0.js";
+import { u as m } from "./useResponsive-DaeQVwlH.js";
 function f(e) {
   return Math.round(parseFloat(e) * 16);
 }
@@ -20,10 +20,13 @@ function l({ sm: e, md: t, lg: o }) {
   };
 }
 function g() {
-  return [...h().breakpoints.keys].reverse().reduce((o, n) => {
-    const s = m("up", n);
-    return !o && s ? n : o;
-  }, null) || "xs";
+  return (
+    // @ts-ignore not sure what is this
+    [...h().breakpoints.keys].reverse().reduce((o, n) => {
+      const s = m("up", n);
+      return !o && s ? n : o;
+    }, null) || "xs"
+  );
 }
 function S(e) {
   const t = h(), o = g(), n = t.breakpoints.up(o === "xl" ? "lg" : o), i = (e === "h1" || e === "h2" || e === "h3" || e === "h4" || e === "h5" || e === "h6") && t.typography[e][n] ? t.typography[e][n] : t.typography[e], p = f(i.fontSize), r = Number(t.typography[e].lineHeight) * p, { fontWeight: u, letterSpacing: c } = t.typography[e];

package/utils/index.d.ts

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

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.d580f3ec.js

@@ -1,34 +0,0 @@
-import "@mui/material/styles";
-import "@mui/material/useMediaQuery";
-import { g as t } from "../utils/getColorPresets.a96a4046.js";
-import "@mui/system";
-import { t as a } from "./typography.947dc33f.js";
-import { p as e } from "./palette.287635f2.js";
-import { createTheme as o, alpha as s } from "@mui/material";
-import { s as p, c as m } from "./shadows.e0c009ff.js";
-import { g as i } from "../utils/getColorState.18b61422.js";
-const r = o(), k = {
-  ...r,
-  typography: a,
-  palette: {
-    ...r.palette,
-    ...e.dark,
-    primary: {
-      ...r.palette.primary,
-      ...t("patronus")
-    },
-    state: i("patronus", "light"),
-    representative: t("patronus").darker,
-    mode: "light"
-  },
-  shape: { borderRadius: 8 },
-  shadows: p.dark,
-  customShadows: {
-    primary: `0 8px 16px 0 ${s(t("patronus").main, 0.2)}`,
-    ...m("dark")
-  },
-  stretch: !0
-};
-export {
-  k as d
-};

package/theme/index.16e25179.js

@@ -1,7 +0,0 @@
-import "./defaultThemeOptions.d580f3ec.js";
-import "./shadows.e0c009ff.js";
-import "./palette.287635f2.js";
-import "./typography.947dc33f.js";
-import "@mui/material";
-import "@mui/material/styles";
-import "@mui/system";