@m4l/styles 0.0.49 → 1.0.0

package/theme/palette.d.ts

@@ -1,3 +1,4 @@
+import { Color } from '@mui/material';
 export declare type ColorSchema = 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error';
 export declare type PatronusColors = 'patronusBlue' | 'crayonBlue' | 'middleYellow' | 'acidGreen' | 'grassGreen' | 'desertBeige' | 'turquiBlue' | 'blazeOrange' | 'flameRed' | 'coolGrey' | 'brown' | 'marbleLight' | 'onyx' | 'mint' | 'oxford';
 export declare type PatronusOpacityColors = 'patronus' | 'turqui' | 'grass' | 'brown' | 'beige' | 'orange' | 'cool' | 'marbel' | 'mint' | 'oxford';
@@ -24,26 +25,54 @@ export interface PatronusOpacityOptions {
 export declare type PatronusConstantColors = Record<PatronusColors, PatronusColorOptions>;
 export declare const PATRONUSCOLORS: PatronusConstantColors;
 export declare const OPACITYCOLORS: Record<PatronusOpacityColors, PatronusOpacityOptions>;
-export declare const GREY: {
-    0: string;
-    100: string;
-    200: string;
-    300: string;
-    400: string;
-    500: string;
-    600: string;
-    700: string;
-    800: string;
-    900: string;
-    5008: string;
-    50012: string;
-    50016: string;
-    50024: string;
-    50032: string;
-    50048: string;
-    50056: string;
-    50080: string;
+export declare const PRIMARY: {
+    lighter: string;
+    light: string;
+    main: string;
+    dark: string;
+    darker: string;
+    contrastText: string;
 };
+export declare const SECONDARY: {
+    lighter: string;
+    light: string;
+    main: string;
+    dark: string;
+    darker: string;
+};
+export declare const INFO: {
+    lighter: string;
+    light: string;
+    main: string;
+    dark: string;
+    darker: string;
+    opacity: string;
+};
+export declare const SUCCESS: {
+    lighter: string;
+    light: string;
+    main: string;
+    dark: string;
+    darker: string;
+    opacity: string;
+};
+export declare const WARNING: {
+    lighter: string;
+    light: string;
+    main: string;
+    dark: string;
+    darker: string;
+    opacity: string;
+};
+export declare const ERROR: {
+    lighter: string;
+    light: string;
+    main: string;
+    dark: string;
+    darker: string;
+    opacity: string;
+};
+export declare const GREY: Color;
 export interface StateDefault {
     normal: string;
     hover: string;
@@ -74,340 +103,129 @@ export declare const STATEDEFAULT: {
         transition: string;
     };
 };
-export declare const palette: {
-    readonly light: {
-        readonly mode: "light";
-        readonly text: {
-            readonly primary: string;
-            readonly secondary: string;
-            readonly disabled: string;
-            readonly bgPrimary: string;
-        };
-        readonly background: {
-            readonly paper: "#fff0";
-            readonly default: string;
-            readonly neutral: string;
-            readonly background: string;
-            readonly header: string;
-        };
-        readonly divider: string;
-        readonly grid: {
-            readonly sectionHeader: "#F6F7F9";
-            readonly divider: "#EDEFF2";
-            readonly rowHover: "#FAFBFC";
-        };
-        readonly common: {
-            black: string;
-            white: string;
-        };
-        readonly primary: {
-            lighter: string;
-            light: string;
-            main: string;
-            dark: string;
-            darker: string;
-            contrastText: string;
-        };
-        readonly state: {
-            info: {
-                normal: string;
-                hover: string;
-            };
-            success: {
-                normal: string;
-                hover: string;
-            };
-            error: {
-                normal: string;
-                hover: string;
-            };
-            warning: {
-                normal: string;
-                hover: string;
-            };
-            skeleton: {
-                default: string;
-                transition: string;
-            };
-        };
-        readonly patronus: {
-            patronusBlue: PatronusColorOptions;
-            crayonBlue: PatronusColorOptions;
-            middleYellow: PatronusColorOptions;
-            acidGreen: PatronusColorOptions;
-            grassGreen: PatronusColorOptions;
-            desertBeige: PatronusColorOptions;
-            turquiBlue: PatronusColorOptions;
-            blazeOrange: PatronusColorOptions;
-            flameRed: PatronusColorOptions;
-            coolGrey: PatronusColorOptions;
-            brown: PatronusColorOptions;
-            marbleLight: PatronusColorOptions;
-            onyx: PatronusColorOptions;
-            mint: PatronusColorOptions;
-            oxford: PatronusColorOptions;
-        };
-        readonly opacity: {
-            brown: PatronusOpacityOptions;
-            mint: PatronusOpacityOptions;
-            oxford: PatronusOpacityOptions;
-            patronus: PatronusOpacityOptions;
-            turqui: PatronusOpacityOptions;
-            grass: PatronusOpacityOptions;
-            beige: PatronusOpacityOptions;
-            orange: PatronusOpacityOptions;
-            cool: PatronusOpacityOptions;
-            marbel: PatronusOpacityOptions;
-        };
-        readonly secondary: {
-            contrastText: string;
-            lighter: string;
-            light: string;
-            main: string;
-            dark: string;
-            darker: string;
-        };
-        readonly info: {
-            contrastText: string;
-            lighter: string;
-            light: string;
-            main: string;
-            dark: string;
-            darker: string;
-            opacity: string;
-        };
-        readonly success: {
-            contrastText: string;
-            lighter: string;
-            light: string;
-            main: string;
-            dark: string;
-            darker: string;
-            opacity: string;
-        };
-        readonly warning: {
-            contrastText: string;
-            lighter: string;
-            light: string;
-            main: string;
-            dark: string;
-            darker: string;
-            opacity: string;
-        };
-        readonly error: {
-            contrastText: string;
-            lighter: string;
-            light: string;
-            main: string;
-            dark: string;
-            darker: string;
-            opacity: string;
-        };
-        readonly grey: {
-            0: string;
-            100: string;
-            200: string;
-            300: string;
-            400: string;
-            500: string;
-            600: string;
-            700: string;
-            800: string;
-            900: string;
-            5008: string;
-            50012: string;
-            50016: string;
-            50024: string;
-            50032: string;
-            50048: string;
-            50056: string;
-            50080: string;
-        };
-        readonly gradients: {
-            primary: string;
-            info: string;
-            success: string;
-            warning: string;
-            error: string;
-        };
-        readonly chart: {
-            violet: string[];
-            blue: string[];
-            green: string[];
-            yellow: string[];
-            red: string[];
-        };
-        readonly action: {
-            hoverOpacity: number;
-            disabledOpacity: number;
-        };
+export declare const COMMON: {
+    common: {
+        black: string;
+        white: string;
     };
-    readonly dark: {
-        readonly mode: "dark";
-        readonly text: {
-            readonly primary: string;
-            readonly secondary: string;
-            readonly disabled: string;
-            readonly bgPrimary: string;
-        };
-        readonly background: {
-            readonly paper: "#fff0";
-            readonly default: string;
-            readonly neutral: string;
-            readonly background: string;
-            readonly header: string;
-        };
-        readonly divider: string;
-        readonly grid: {
-            readonly sectionHeader: "#29313A";
-            readonly divider: "#3E464F";
-            readonly rowHover: "#1F262F";
-        };
-        readonly common: {
-            black: string;
-            white: string;
-        };
-        readonly primary: {
-            lighter: string;
-            light: string;
-            main: string;
-            dark: string;
-            darker: string;
-            contrastText: string;
-        };
-        readonly state: {
-            info: {
-                normal: string;
-                hover: string;
-            };
-            success: {
-                normal: string;
-                hover: string;
-            };
-            error: {
-                normal: string;
-                hover: string;
-            };
-            warning: {
-                normal: string;
-                hover: string;
-            };
-            skeleton: {
-                default: string;
-                transition: string;
-            };
-        };
-        readonly patronus: {
-            patronusBlue: PatronusColorOptions;
-            crayonBlue: PatronusColorOptions;
-            middleYellow: PatronusColorOptions;
-            acidGreen: PatronusColorOptions;
-            grassGreen: PatronusColorOptions;
-            desertBeige: PatronusColorOptions;
-            turquiBlue: PatronusColorOptions;
-            blazeOrange: PatronusColorOptions;
-            flameRed: PatronusColorOptions;
-            coolGrey: PatronusColorOptions;
-            brown: PatronusColorOptions;
-            marbleLight: PatronusColorOptions;
-            onyx: PatronusColorOptions;
-            mint: PatronusColorOptions;
-            oxford: PatronusColorOptions;
-        };
-        readonly opacity: {
-            brown: PatronusOpacityOptions;
-            mint: PatronusOpacityOptions;
-            oxford: PatronusOpacityOptions;
-            patronus: PatronusOpacityOptions;
-            turqui: PatronusOpacityOptions;
-            grass: PatronusOpacityOptions;
-            beige: PatronusOpacityOptions;
-            orange: PatronusOpacityOptions;
-            cool: PatronusOpacityOptions;
-            marbel: PatronusOpacityOptions;
-        };
-        readonly secondary: {
-            contrastText: string;
-            lighter: string;
-            light: string;
-            main: string;
-            dark: string;
-            darker: string;
-        };
-        readonly info: {
-            contrastText: string;
-            lighter: string;
-            light: string;
-            main: string;
-            dark: string;
-            darker: string;
-            opacity: string;
-        };
-        readonly success: {
-            contrastText: string;
-            lighter: string;
-            light: string;
-            main: string;
-            dark: string;
-            darker: string;
-            opacity: string;
-        };
-        readonly warning: {
-            contrastText: string;
-            lighter: string;
-            light: string;
-            main: string;
-            dark: string;
-            darker: string;
-            opacity: string;
-        };
-        readonly error: {
-            contrastText: string;
-            lighter: string;
-            light: string;
-            main: string;
-            dark: string;
-            darker: string;
-            opacity: string;
+    primary: {
+        lighter: string;
+        light: string;
+        main: string;
+        dark: string;
+        darker: string;
+        contrastText: string;
+    };
+    state: {
+        info: {
+            normal: string;
+            hover: string;
         };
-        readonly grey: {
-            0: string;
-            100: string;
-            200: string;
-            300: string;
-            400: string;
-            500: string;
-            600: string;
-            700: string;
-            800: string;
-            900: string;
-            5008: string;
-            50012: string;
-            50016: string;
-            50024: string;
-            50032: string;
-            50048: string;
-            50056: string;
-            50080: string;
+        success: {
+            normal: string;
+            hover: string;
         };
-        readonly gradients: {
-            primary: string;
-            info: string;
-            success: string;
-            warning: string;
-            error: string;
+        error: {
+            normal: string;
+            hover: string;
         };
-        readonly chart: {
-            violet: string[];
-            blue: string[];
-            green: string[];
-            yellow: string[];
-            red: string[];
+        warning: {
+            normal: string;
+            hover: string;
         };
-        readonly action: {
-            hoverOpacity: number;
-            disabledOpacity: number;
+        skeleton: {
+            default: string;
+            transition: string;
         };
     };
+    patronus: {
+        brown: PatronusColorOptions;
+        patronusBlue: PatronusColorOptions;
+        crayonBlue: PatronusColorOptions;
+        middleYellow: PatronusColorOptions;
+        acidGreen: PatronusColorOptions;
+        grassGreen: PatronusColorOptions;
+        desertBeige: PatronusColorOptions;
+        turquiBlue: PatronusColorOptions;
+        blazeOrange: PatronusColorOptions;
+        flameRed: PatronusColorOptions;
+        coolGrey: PatronusColorOptions;
+        marbleLight: PatronusColorOptions;
+        onyx: PatronusColorOptions;
+        mint: PatronusColorOptions;
+        oxford: PatronusColorOptions;
+    };
+    opacity: {
+        patronus: PatronusOpacityOptions;
+        turqui: PatronusOpacityOptions;
+        grass: PatronusOpacityOptions;
+        brown: PatronusOpacityOptions;
+        mint: PatronusOpacityOptions;
+        oxford: PatronusOpacityOptions;
+        beige: PatronusOpacityOptions;
+        orange: PatronusOpacityOptions;
+        cool: PatronusOpacityOptions;
+        marbel: PatronusOpacityOptions;
+    };
+    secondary: {
+        contrastText: string;
+        lighter: string;
+        light: string;
+        main: string;
+        dark: string;
+        darker: string;
+    };
+    info: {
+        contrastText: string;
+        lighter: string;
+        light: string;
+        main: string;
+        dark: string;
+        darker: string;
+        opacity: string;
+    };
+    success: {
+        contrastText: string;
+        lighter: string;
+        light: string;
+        main: string;
+        dark: string;
+        darker: string;
+        opacity: string;
+    };
+    warning: {
+        contrastText: string;
+        lighter: string;
+        light: string;
+        main: string;
+        dark: string;
+        darker: string;
+        opacity: string;
+    };
+    error: {
+        contrastText: string;
+        lighter: string;
+        light: string;
+        main: string;
+        dark: string;
+        darker: string;
+        opacity: string;
+    };
+    grey: Color;
+    gradients: {
+        primary: string;
+        info: string;
+        success: string;
+        warning: string;
+        error: string;
+    };
+    chart: {
+        violet: string[];
+        blue: string[];
+        green: string[];
+        yellow: string[];
+        red: string[];
+    };
 };
+export declare const palette: any;
 export default palette;

package/theme/{shadows.86540b18.js → shadows.e0c009ff.js}

@@ -1,5 +1,5 @@
 import { alpha as r } from "@mui/material/styles";
-import { p as a, P as e } from "./palette.0590e8a6.js";
+import { p as a, P as e } from "./palette.287635f2.js";
 const s = a.light.grey[500], o = "#000000", n = (t) => {
   const p = r(t, 0.2), x = r(t, 0.14), $ = r(t, 0.12);
   return [

package/theme/{typography.ed54f014.js → typography.2a9a38a6.js}

@@ -1,14 +1,15 @@
+import { createTheme as i } from "@mui/material";
 import "@mui/material/styles";
 import "@mui/material/useMediaQuery";
-import "../utils/getColorPresets.2a91ffaf.js";
+import "../utils/getColorPresets.a96a4046.js";
 import "@mui/system";
-import "./defaultThemeOptions.656b9eff.js";
-import "./shadows.86540b18.js";
-import "./palette.0590e8a6.js";
-import "@mui/material";
+import "./defaultThemeOptions.0976e58a.js";
+import "./shadows.e0c009ff.js";
+import "./palette.287635f2.js";
 import { r as t, p as e } from "../utils/getFontValue.88831637.js";
-const i = "Segoe UI, Poppins, sans-serif", r = {
-  fontFamily: i,
+const n = "Segoe UI, Poppins, sans-serif", g = i(), W = {
+  ...g.typography,
+  fontFamily: n,
   fontWeightRegular: 400,
   fontWeightMedium: 600,
   fontWeightBold: 700,
@@ -126,5 +127,5 @@ const i = "Segoe UI, Poppins, sans-serif", r = {
   }
 };
 export {
-  r as t
+  W as t
 };

package/theme/typography.d.ts

@@ -235,4 +235,8 @@ export declare const typography: {
         readonly fontWeight: 600;
         readonly lineHeight: "16px";
     };
+    readonly fontSize: number;
+    readonly fontWeightLight: import("csstype").Property.FontWeight | undefined;
+    readonly htmlFontSize: number;
+    readonly pxToRem: (px: number) => string;
 };

package/types/augmentations.d.ts

@@ -1,7 +1,8 @@
 import { PatronusConstantColors, PatronusOpacityColors, PatronusOpacityOptions } from '../theme/palette';
 import { ColorStateOptions, CustomShadowOptions } from '../theme';
 import { ChartPaletteOptions, GradientsPaletteOptions, GridPaletteOptions } from './types';
-
+import { Breakpoints, ColorSystemOptions } from '@mui/material';
+import { CssVarsTheme } from '@mui/material/styles';
 
 declare module '@mui/material' {
     interface Color {
@@ -19,6 +20,17 @@ declare module '@mui/material' {
 
 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;
@@ -35,6 +47,7 @@ declare module '@mui/material/styles/createPalette' {
         DarkSelected?: string;
         DarkSelectedHover?: string;
         opacity?: string;
+        name?: string;
     }
     interface Palette {
         gradients?: GradientsPaletteOptions;
@@ -44,6 +57,7 @@ declare module '@mui/material/styles/createPalette' {
         opacity: Record<PatronusOpacityColors, PatronusOpacityOptions>;
         state: ColorStateOptions /* Organizar cada caso con los valores específicos. */;
         representative: string;
+        mode: 'light' | 'dark';
         /* info: AgumentationInfoOptions; */
     }
 
@@ -58,26 +72,40 @@ declare module '@mui/material/styles/createPalette' {
         opacity: Record<PatronusOpacityColors, PatronusOpacityOptions>;
         state: ColorStateOptions /* Organizar cada caso con los valores específicos. */;
         representative: string;
+        mode: 'light' | 'dark';
     }
-}
 
-// declare module '@mui/core/Typography' {
-//     interface TypographyProps {
-//       variant?: 'subtitle';
-//     }
-// }
+    interface ColorSchemeOverrides {
+        finalTheme?: true;
+    }
 
-declare module '@mui/material/styles' {
-    interface Theme {
-        stretch?: boolean;
+    interface Theme extends CssVarsTheme {
+        stretch: boolean;
         customShadows: CustomShadowOptions;
+        breakpoints: Breakpoints;
     }
 
-    interface ThemeOptions {
-        stretch?: boolean;
-        customShadows?: CustomShadowOptions;
+    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>;
@@ -99,12 +127,7 @@ declare module '@mui/material/styles' {
         action: React.CSSProperties;
     }
 
-    interface TypeBackground { 
-        neutral: string;
-        autofill: string;
-        header: string;
-        background: string;
-    }
+
 
 }