@m4l/styles 0.0.3 → 0.0.4

package/types/types.d.ts

@@ -0,0 +1,151 @@
+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 = 'patronus' | 'turqui' | 'grass' | 'candy' | 'blaze';
+
+declare module '@mui/material/styles' {
+    interface Theme {
+        stretch?: boolean;
+        customShadows: CustomShadowOptions;
+    }
+
+    interface ThemeOptions {
+        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;
+    divider: string;
+}
+
+export interface ChartPaletteOptions {
+    violet: string[];
+    blue: string[];
+    green: string[];
+    yellow: string[];
+    red: string[];
+}
+
+export interface GradientsPaletteOptions {
+    primary: string;
+    info: string;
+    success: string;
+    warning: string;
+    error: string;
+}
+
+/* interface AgumentationInfoOptions extends Pick<PaletteColor, 'lighter' | 'light' | 'main' | 'dark' | 'darker' >{
+    opacity: 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;
+        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;
+        chart?: ChartPaletteOptions;
+        grid?: GridPaletteOptions;
+    }
+}
+
+/* declare module '@material-ui/core/styles/createTypography' {
+    interface TypographyOptions extends TypographyVariants {}
+  }
+ */
+
+
+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;
+    }
+}
+
+
+/* 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';