@m4l/styles 0.0.3 → 0.0.4

package/theme/palette.d.ts

@@ -1,69 +1,29 @@
 export declare type ColorSchema = 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error';
-export interface GradientsPaletteOptions {
-    primary: string;
-    info: string;
-    success: string;
-    warning: string;
-    error: string;
+declare type PatronusColors = "patronusBlue" | "crayonBlue" | "middleYellow" | "acidGreen" | "grassGreen" | "candyRed" | "turquiBlue" | "blazeOrange" | "flameRed" | "coolGrey" | "marbleLight" | "ashBlak";
+declare type PatronusOpacityColors = "patronus" | "turqui" | "grass" | "candy" | "blaze" | "cool" | "marbel";
+interface PatronusColorOptions {
+    10: string;
+    20: string;
+    30: string;
+    40: string;
+    50: string;
+    60: string;
+    70: string;
+    80: string;
+    90: string;
 }
-export interface ChartPaletteOptions {
-    violet: string[];
-    blue: string[];
-    green: string[];
-    yellow: string[];
-    red: string[];
-}
-export interface GridPaletteOptions {
-    sectionHeader: string;
-    rowHover: string;
-    divider: string;
-}
-declare module '@mui/material/styles/createPalette' {
-    interface TypeBackground {
-        neutral: string;
-        autofill: string;
-        header: string;
-    }
-    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;
-    }
-    interface Palette {
-        gradients?: GradientsPaletteOptions;
-        chart: ChartPaletteOptions;
-        grid?: GridPaletteOptions;
-    }
-    interface PaletteOptions {
-        gradients?: GradientsPaletteOptions;
-        chart?: ChartPaletteOptions;
-        grid?: GridPaletteOptions;
-    }
-}
-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;
-    }
+interface PatronusOpacityOptions {
+    4: string;
+    12: string;
+    24: string;
+    36: string;
+    48: string;
+    60: string;
+    72: string;
 }
+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;
@@ -84,6 +44,36 @@ export declare const GREY: {
     50056: string;
     50080: string;
 };
+export interface StateDefault {
+    normal: string;
+    hover: string;
+}
+export interface StateSkeleton {
+    default: string;
+    transition: string;
+}
+export declare const STATEDEFAULT: {
+    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;
+    };
+};
 export declare const palette: {
     readonly light: {
         readonly mode: "light";
@@ -93,21 +83,10 @@ export declare const palette: {
             readonly disabled: string;
         };
         readonly background: {
-            readonly paper: "#fff";
-            readonly default: "#fff";
+            readonly paper: "#fff0";
+            readonly default: string;
             readonly neutral: string;
-            readonly autocomplete: string;
-            readonly header: "#F6F7F9";
-        };
-        readonly action: {
-            readonly hover: string;
-            readonly selected: string;
-            readonly disabled: string;
-            readonly disabledBackground: string;
-            readonly focus: string;
-            readonly hoverOpacity: number;
-            readonly disabledOpacity: number;
-            readonly active: string;
+            readonly background: string;
         };
         readonly grid: {
             readonly sectionHeader: "#F6F7F9";
@@ -119,12 +98,57 @@ export declare const palette: {
             white: string;
         };
         readonly primary: {
-            contrastText: string;
             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;
+            candyRed: PatronusColorOptions;
+            turquiBlue: PatronusColorOptions;
+            blazeOrange: PatronusColorOptions;
+            flameRed: PatronusColorOptions;
+            coolGrey: PatronusColorOptions;
+            marbleLight: PatronusColorOptions;
+            ashBlak: PatronusColorOptions;
+        };
+        readonly opacity: {
+            patronus: PatronusOpacityOptions;
+            turqui: PatronusOpacityOptions;
+            grass: PatronusOpacityOptions;
+            candy: PatronusOpacityOptions;
+            blaze: PatronusOpacityOptions;
+            cool: PatronusOpacityOptions;
+            marbel: PatronusOpacityOptions;
         };
         readonly secondary: {
             contrastText: string;
@@ -141,6 +165,7 @@ export declare const palette: {
             main: string;
             dark: string;
             darker: string;
+            opacity: string;
         };
         readonly success: {
             contrastText: string;
@@ -149,6 +174,7 @@ export declare const palette: {
             main: string;
             dark: string;
             darker: string;
+            opacity: string;
         };
         readonly warning: {
             contrastText: string;
@@ -157,6 +183,7 @@ export declare const palette: {
             main: string;
             dark: string;
             darker: string;
+            opacity: string;
         };
         readonly error: {
             contrastText: string;
@@ -165,6 +192,7 @@ export declare const palette: {
             main: string;
             dark: string;
             darker: string;
+            opacity: string;
         };
         readonly grey: {
             0: string;
@@ -201,30 +229,23 @@ export declare const palette: {
             red: string[];
         };
         readonly divider: string;
+        readonly action: {
+            hoverOpacity: number;
+            disabledOpacity: number;
+        };
     };
     readonly dark: {
         readonly mode: "dark";
         readonly text: {
-            readonly primary: "#fff";
+            readonly primary: string;
             readonly secondary: string;
             readonly disabled: string;
         };
         readonly background: {
-            readonly paper: string;
+            readonly paper: "#fff0";
             readonly default: string;
             readonly neutral: string;
-            readonly autocomplete: string;
-            readonly header: "#29313A";
-        };
-        readonly action: {
-            readonly hover: string;
-            readonly selected: string;
-            readonly disabled: string;
-            readonly disabledBackground: string;
-            readonly focus: string;
-            readonly hoverOpacity: number;
-            readonly disabledOpacity: number;
-            readonly active: string;
+            readonly background: string;
         };
         readonly grid: {
             readonly sectionHeader: "#29313A";
@@ -236,12 +257,57 @@ export declare const palette: {
             white: string;
         };
         readonly primary: {
-            contrastText: string;
             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;
+            candyRed: PatronusColorOptions;
+            turquiBlue: PatronusColorOptions;
+            blazeOrange: PatronusColorOptions;
+            flameRed: PatronusColorOptions;
+            coolGrey: PatronusColorOptions;
+            marbleLight: PatronusColorOptions;
+            ashBlak: PatronusColorOptions;
+        };
+        readonly opacity: {
+            patronus: PatronusOpacityOptions;
+            turqui: PatronusOpacityOptions;
+            grass: PatronusOpacityOptions;
+            candy: PatronusOpacityOptions;
+            blaze: PatronusOpacityOptions;
+            cool: PatronusOpacityOptions;
+            marbel: PatronusOpacityOptions;
         };
         readonly secondary: {
             contrastText: string;
@@ -258,6 +324,7 @@ export declare const palette: {
             main: string;
             dark: string;
             darker: string;
+            opacity: string;
         };
         readonly success: {
             contrastText: string;
@@ -266,6 +333,7 @@ export declare const palette: {
             main: string;
             dark: string;
             darker: string;
+            opacity: string;
         };
         readonly warning: {
             contrastText: string;
@@ -274,6 +342,7 @@ export declare const palette: {
             main: string;
             dark: string;
             darker: string;
+            opacity: string;
         };
         readonly error: {
             contrastText: string;
@@ -282,6 +351,7 @@ export declare const palette: {
             main: string;
             dark: string;
             darker: string;
+            opacity: string;
         };
         readonly grey: {
             0: string;
@@ -318,6 +388,10 @@ export declare const palette: {
             red: string[];
         };
         readonly divider: string;
+        readonly action: {
+            hoverOpacity: number;
+            disabledOpacity: number;
+        };
     };
 };
 export default palette;

package/theme/shadows.d.ts

@@ -1,12 +1,10 @@
 import { Shadows } from '@mui/material/styles/shadows';
 export interface CustomShadowOptions {
     z1: string;
-    z8: string;
-    z12: string;
-    z16: string;
-    z20: string;
-    z24: string;
-    primary: string;
+    z2: string;
+    z3: string;
+    z4: string;
+    primary?: string;
     secondary: string;
     info: string;
     success: string;
@@ -16,50 +14,7 @@ export interface CustomShadowOptions {
     dialog: string;
     dropdown: string;
 }
-declare module '@mui/material/styles' {
-    interface Theme {
-        customShadows: CustomShadowOptions;
-    }
-    interface ThemeOptions {
-        customShadows?: CustomShadowOptions;
-    }
-}
-export declare const customShadows: {
-    light: {
-        z1: string;
-        z8: string;
-        z12: string;
-        z16: string;
-        z20: string;
-        z24: string;
-        primary: string;
-        info: string;
-        secondary: string;
-        success: string;
-        warning: string;
-        error: string;
-        card: string;
-        dialog: string;
-        dropdown: string;
-    };
-    dark: {
-        z1: string;
-        z8: string;
-        z12: string;
-        z16: string;
-        z20: string;
-        z24: string;
-        primary: string;
-        info: string;
-        secondary: string;
-        success: string;
-        warning: string;
-        error: string;
-        card: string;
-        dialog: string;
-        dropdown: string;
-    };
-};
+export declare const createCustomShadows: (mode: 'light' | 'dark') => CustomShadowOptions;
 export declare const shadows: {
     light: Shadows;
     dark: Shadows;

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/index.d.ts

@@ -1 +1 @@
-export declare type ThemeColorPresets = 'default' | 'purple' | 'cyan' | 'blue' | 'orange' | 'red';
+export * from './types.d';