@m4l/styles 0.0.2 → 0.0.4

package/theme/typography.d.ts

@@ -1,10 +1,54 @@
+export interface TypographyVariants {
+    subtitle: {
+        fontSize: string;
+        fontWeight: number;
+        lineHeight: string;
+        letterSpacing: string;
+    };
+    subtitleDens: {
+        fontSize: string;
+        fontWeight: number;
+        lineHeight: string;
+        letterSpacing: string;
+    };
+    paragraph: {
+        fontSize: string;
+        fontWeight: number;
+        lineHeight: string;
+        letterSpacing: string;
+    };
+    paragraphDens: {
+        fontSize: string;
+        fontWeight: number;
+        lineHeight: string;
+        letterSpacing: string;
+    };
+    body: {
+        fontSize: string;
+        fontWeight: number;
+        lineHeight: string;
+        letterSpacing: string;
+    };
+    bodyDens: {
+        fontSize: string;
+        fontWeight: number;
+        lineHeight: string;
+        letterSpacing: string;
+    };
+    action: {
+        fontSize: string;
+        fontWeight: number;
+        lineHeight: string;
+        letterSpacing: string;
+    };
+}
 export declare const typography: {
-    readonly fontFamily: "Public Sans, sans-serif";
+    readonly fontFamily: "Poppins, sans-serif";
     readonly fontWeightRegular: 400;
     readonly fontWeightMedium: 600;
     readonly fontWeightBold: 700;
     readonly h1: {
-        readonly '@media (min-width:600px)': {
+        readonly '@media (min-width:0px)': {
             fontSize: string;
         };
         readonly '@media (min-width:900px)': {
@@ -14,12 +58,10 @@ export declare const typography: {
             fontSize: string;
         };
         readonly fontWeight: 700;
-        readonly lineHeight: number;
-        readonly fontSize: string;
-        readonly letterSpacing: 2;
+        readonly lineHeight: 1.5;
     };
     readonly h2: {
-        readonly '@media (min-width:600px)': {
+        readonly '@media (min-width:0px)': {
             fontSize: string;
         };
         readonly '@media (min-width:900px)': {
@@ -29,11 +71,10 @@ export declare const typography: {
             fontSize: string;
         };
         readonly fontWeight: 700;
-        readonly lineHeight: number;
-        readonly fontSize: string;
+        readonly lineHeight: 1;
     };
     readonly h3: {
-        readonly '@media (min-width:600px)': {
+        readonly '@media (min-width:0px)': {
             fontSize: string;
         };
         readonly '@media (min-width:900px)': {
@@ -42,12 +83,11 @@ export declare const typography: {
         readonly '@media (min-width:1200px)': {
             fontSize: string;
         };
-        readonly fontWeight: 700;
+        readonly fontWeight: 600;
         readonly lineHeight: 1.5;
-        readonly fontSize: string;
     };
     readonly h4: {
-        readonly '@media (min-width:600px)': {
+        readonly '@media (min-width:0px)': {
             fontSize: string;
         };
         readonly '@media (min-width:900px)': {
@@ -58,10 +98,9 @@ export declare const typography: {
         };
         readonly fontWeight: 700;
         readonly lineHeight: 1.5;
-        readonly fontSize: string;
     };
     readonly h5: {
-        readonly '@media (min-width:600px)': {
+        readonly '@media (min-width:0px)': {
             fontSize: string;
         };
         readonly '@media (min-width:900px)': {
@@ -70,12 +109,11 @@ export declare const typography: {
         readonly '@media (min-width:1200px)': {
             fontSize: string;
         };
-        readonly fontWeight: 700;
+        readonly fontWeight: 600;
         readonly lineHeight: 1.5;
-        readonly fontSize: string;
     };
     readonly h6: {
-        readonly '@media (min-width:600px)': {
+        readonly '@media (min-width:0px)': {
             fontSize: string;
         };
         readonly '@media (min-width:900px)': {
@@ -86,7 +124,58 @@ export declare const typography: {
         };
         readonly fontWeight: 700;
         readonly lineHeight: number;
-        readonly fontSize: string;
+    };
+    readonly subtitle: {
+        readonly '@media (min-width:0px)': {
+            fontSize: string;
+        };
+        readonly '@media (min-width:900px)': {
+            fontSize: string;
+        };
+        readonly '@media (min-width:1200px)': {
+            fontSize: string;
+        };
+        readonly fontWeight: 400;
+        readonly lineHeight: 1.5;
+    };
+    readonly subtitleDens: {
+        readonly '@media (min-width:0px)': {
+            fontSize: string;
+        };
+        readonly '@media (min-width:900px)': {
+            fontSize: string;
+        };
+        readonly '@media (min-width:1200px)': {
+            fontSize: string;
+        };
+        readonly fontWeight: 700;
+        readonly lineHeight: 1.5;
+    };
+    readonly paragraph: {
+        readonly '@media (min-width:0px)': {
+            fontSize: string;
+        };
+        readonly '@media (min-width:900px)': {
+            fontSize: string;
+        };
+        readonly '@media (min-width:1200px)': {
+            fontSize: string;
+        };
+        readonly fontWeight: 400;
+        readonly lineHeight: 1.429;
+    };
+    readonly paragraphDens: {
+        readonly '@media (min-width:0px)': {
+            fontSize: string;
+        };
+        readonly '@media (min-width:900px)': {
+            fontSize: string;
+        };
+        readonly '@media (min-width:1200px)': {
+            fontSize: string;
+        };
+        readonly fontWeight: 600;
+        readonly lineHeight: 1.429;
     };
     readonly subtitle1: {
         readonly fontWeight: 600;
@@ -98,6 +187,32 @@ export declare const typography: {
         readonly lineHeight: 1.5;
         readonly fontSize: string;
     };
+    readonly body: {
+        readonly '@media (min-width:0px)': {
+            fontSize: string;
+        };
+        readonly '@media (min-width:900px)': {
+            fontSize: string;
+        };
+        readonly '@media (min-width:1200px)': {
+            fontSize: string;
+        };
+        readonly fontWeight: 400;
+        readonly lineHeight: 1.143;
+    };
+    readonly bodyDens: {
+        readonly '@media (min-width:0px)': {
+            fontSize: string;
+        };
+        readonly '@media (min-width:900px)': {
+            fontSize: string;
+        };
+        readonly '@media (min-width:1200px)': {
+            fontSize: string;
+        };
+        readonly fontWeight: 700;
+        readonly lineHeight: 1.143;
+    };
     readonly body0: {
         readonly lineHeight: 1.5;
         readonly fontWeight: 400;
@@ -129,4 +244,17 @@ export declare const typography: {
         readonly fontSize: string;
         readonly textTransform: "capitalize";
     };
+    readonly action: {
+        readonly '@media (min-width:0px)': {
+            fontSize: string;
+        };
+        readonly '@media (min-width:900px)': {
+            fontSize: string;
+        };
+        readonly '@media (min-width:1200px)': {
+            fontSize: string;
+        };
+        readonly fontWeight: 500;
+        readonly lineHeight: 1.667;
+    };
 };

package/types/types.d.ts

@@ -1,8 +1,11 @@
+import { Patronus, PatronusConstantColors } from '../theme/palette';
 import {CustomShadowOptions } from '../theme'
+import { ColorStateOptions } from '../utils/getColorState';
+import { TypographyVariants } from '../theme/typography';
 
 export {};
 
-export declare type ThemeColorPresets = 'default' | 'purple' | 'cyan' | 'blue' | 'orange' | 'red';
+export declare type ThemeColorPresets = 'patronus' | 'turqui' | 'grass' | 'candy' | 'blaze';
 
 declare module '@mui/material/styles' {
     interface Theme {
@@ -14,8 +17,46 @@ declare module '@mui/material/styles' {
         stretch?: boolean;
         customShadows?: CustomShadowOptions;
     }
+
+    interface TypographyVariants {
+        subtitle: Record<any>;
+        subtitleDens: Record<any>;
+        paragraph:  Record<any>;
+        paragraphDens: Record<any>;
+        body: Record<any>;
+        bodyDens: Record<any>;
+        action: Record<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;
+    }
+  }
+
 export interface GridPaletteOptions {
     sectionHeader: string;
     rowHover: string;
@@ -38,6 +79,10 @@ export interface GradientsPaletteOptions {
     error: string;
 }
 
+/* interface AgumentationInfoOptions extends Pick<PaletteColor, 'lighter' | 'light' | 'main' | 'dark' | 'darker' >{
+    opacity: string
+}
+ */
 declare module '@mui/material/styles/createPalette' {
     interface TypeBackground {
         neutral: string;
@@ -59,11 +104,15 @@ declare module '@mui/material/styles/createPalette' {
         LightSelectedHover?: string;
         DarkSelected?: string;
         DarkSelectedHover?: string;
+        opacity?: string;
     }
     interface Palette {
         gradients?: GradientsPaletteOptions;
         chart: ChartPaletteOptions;
         grid?: GridPaletteOptions;
+        patronus?: PatronusConstantColors;
+        state: ColorStateOptions;
+        /* info: AgumentationInfoOptions; */ /* Organizar cada caso con los valores específicos. */
     }
     interface PaletteOptions {
         gradients?: GradientsPaletteOptions;
@@ -72,6 +121,12 @@ declare module '@mui/material/styles/createPalette' {
     }
 }
 
+/* declare module '@material-ui/core/styles/createTypography' {
+    interface TypographyOptions extends TypographyVariants {}
+  }
+ */
+
+
 declare module '@mui/material' {
     interface Color {
         0: string;
@@ -85,3 +140,12 @@ declare module '@mui/material' {
         500_80: string;
     }
 }
+
+
+/* import { TypographyProps } from '@material-ui/core/Typography'; */
+
+declare module '@material-ui/core/Typography' {
+  interface TypographyProps {
+    variant?: 'subtitle';
+  }
+}

package/utils/getColorPresets.d.ts

@@ -1,17 +1,5 @@
 import { ThemeColorPresets } from '../types';
-export declare const colorPresets: ({
-    LightSelected: string;
-    LightSelectedHover: string;
-    DarkSelected: string;
-    DarkSelectedHover: string;
-    contrastText: string;
-    lighter: string;
-    light: string;
-    main: string;
-    dark: string;
-    darker: string;
-    name: string;
-} | {
+export declare type ColorVariants = {
     name: string;
     lighter: string;
     light: string;
@@ -19,20 +7,8 @@ export declare const colorPresets: ({
     dark: string;
     darker: string;
     contrastText: string;
-})[];
-export declare const defaultPreset: {
-    LightSelected: string;
-    LightSelectedHover: string;
-    DarkSelected: string;
-    DarkSelectedHover: string;
-    contrastText: string;
-    lighter: string;
-    light: string;
-    main: string;
-    dark: string;
-    darker: string;
-    name: string;
-} | {
+};
+export declare const colorPresets: {
     name: string;
     lighter: string;
     light: string;
@@ -40,20 +16,8 @@ export declare const defaultPreset: {
     dark: string;
     darker: string;
     contrastText: string;
-};
-export declare const purplePreset: {
-    LightSelected: string;
-    LightSelectedHover: string;
-    DarkSelected: string;
-    DarkSelectedHover: string;
-    contrastText: string;
-    lighter: string;
-    light: string;
-    main: string;
-    dark: string;
-    darker: string;
-    name: string;
-} | {
+}[];
+export declare const defaultPreset: {
     name: string;
     lighter: string;
     light: string;
@@ -62,19 +26,7 @@ export declare const purplePreset: {
     darker: string;
     contrastText: string;
 };
-export declare const cyanPreset: {
-    LightSelected: string;
-    LightSelectedHover: string;
-    DarkSelected: string;
-    DarkSelectedHover: string;
-    contrastText: string;
-    lighter: string;
-    light: string;
-    main: string;
-    dark: string;
-    darker: string;
-    name: string;
-} | {
+export declare const turqui: {
     name: string;
     lighter: string;
     light: string;
@@ -83,19 +35,7 @@ export declare const cyanPreset: {
     darker: string;
     contrastText: string;
 };
-export declare const bluePreset: {
-    LightSelected: string;
-    LightSelectedHover: string;
-    DarkSelected: string;
-    DarkSelectedHover: string;
-    contrastText: string;
-    lighter: string;
-    light: string;
-    main: string;
-    dark: string;
-    darker: string;
-    name: string;
-} | {
+export declare const grass: {
     name: string;
     lighter: string;
     light: string;
@@ -104,19 +44,7 @@ export declare const bluePreset: {
     darker: string;
     contrastText: string;
 };
-export declare const orangePreset: {
-    LightSelected: string;
-    LightSelectedHover: string;
-    DarkSelected: string;
-    DarkSelectedHover: string;
-    contrastText: string;
-    lighter: string;
-    light: string;
-    main: string;
-    dark: string;
-    darker: string;
-    name: string;
-} | {
+export declare const candy: {
     name: string;
     lighter: string;
     light: string;
@@ -125,19 +53,7 @@ export declare const orangePreset: {
     darker: string;
     contrastText: string;
 };
-export declare const redPreset: {
-    LightSelected: string;
-    LightSelectedHover: string;
-    DarkSelected: string;
-    DarkSelectedHover: string;
-    contrastText: string;
-    lighter: string;
-    light: string;
-    main: string;
-    dark: string;
-    darker: string;
-    name: string;
-} | {
+export declare const blaze: {
     name: string;
     lighter: string;
     light: string;
@@ -147,18 +63,6 @@ export declare const redPreset: {
     contrastText: string;
 };
 export declare function getColorPresets(presetsKey: ThemeColorPresets): {
-    LightSelected: string;
-    LightSelectedHover: string;
-    DarkSelected: string;
-    DarkSelectedHover: string;
-    contrastText: string;
-    lighter: string;
-    light: string;
-    main: string;
-    dark: string;
-    darker: string;
-    name: string;
-} | {
     name: string;
     lighter: string;
     light: string;

package/utils/getColorState.d.ts

@@ -0,0 +1,15 @@
+import { StateDefault, StateSkeleton } from "../theme";
+import { ThemeColorPresets } from "../types";
+export interface ColorStateOptions {
+    active12: string;
+    active: string;
+    focus: string;
+    hover: string;
+    default: string;
+    info: StateDefault;
+    success: StateDefault;
+    warning: StateDefault;
+    error: StateDefault;
+    skeleton: StateSkeleton;
+}
+export declare const getColorState: (presetsKey: ThemeColorPresets, mode: 'light' | 'dark') => ColorStateOptions;

package/utils/getFontValue.d.ts

@@ -6,7 +6,7 @@ export declare function responsiveFontSizes({ sm, md, lg }: {
     md: number;
     lg: number;
 }): {
-    '@media (min-width:600px)': {
+    '@media (min-width:0px)': {
         fontSize: string;
     };
     '@media (min-width:900px)': {

package/utils/index.d.ts

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