@sinco/react 1.0.4-rc.7 → 1.0.4-rc.8

package/index.js

@@ -7982,15 +7982,44 @@ const components = {
     }
   },
   MuiChip: {
-    defaultProps: {
-      size: 'small'
-    },
     styleOverrides: {
+      sizeSmall: {
+        paddingBlock: 4
+      },
+      sizeMedium: {
+        paddingBlock: 7
+      },
       root: {
+        height: "inherit",
         borderRadius: 4
+        // '&.MuiChip-colorPrimary': {
+        //     color: '#101840DE',
+        //     backgroundColor: '#E4ECF4',
+        //     ".MuiChip-deleteIcon": {
+        //         height: 12,
+        //         width: 12,
+        //     },
+        // },
+        // '&.MuiChip-colorPrimary.MuiChip-outlined': {
+        //     border: '1px solid #90B1D0',
+        //     backgroundColor: "#fff",
+        //     ".MuiChip-avatar": {
+        //         marginBlock: 2
+        //     },
+        //     "&.MuiChip-colorPrimary.MuiChip-outlined:hover": {
+        //         backgroundColor: "#E4ECF4"
+        //     },
+        //     ".MuiChip-deleteIcon": {
+        //         color: "#90B1D0",
+        //         "&:hover": {
+        //             color: "#6392BD !important"
+        //         }
+        //     },
+        // },
       }
     }
   },
+
   MuiAlert: {
     defaultProps: {
       iconMapping: {
@@ -8010,25 +8039,39 @@ const components = {
     }
   },
   MuiButton: {
-    defaultProps: {
-      size: 'medium'
-    },
     styleOverrides: {
-      fullWidth: {
-        width: '100%'
+      endIcon: {
+        marginLeft: 2
+      },
+      iconSizeSmall: {
+        height: 14,
+        width: 14
+      },
+      iconSizeMedium: {
+        height: 15,
+        width: 18
+      },
+      iconSizeLarge: {
+        height: 17,
+        width: 22
       },
       sizeSmall: {
-        padding: '4px 10px'
+        padding: '6px 5px'
       },
       sizeMedium: {
-        padding: '7.5px 15px'
+        padding: '8.5px 8px',
+        ".MuiSvgIcon-fontSizeMedium": {
+          height: 18,
+          width: 18
+        }
       },
       sizeLarge: {
-        padding: '10.5px 22px',
-        fontSize: 14
-      },
-      root: {
-        width: "fit-content"
+        padding: '10.5px 11px',
+        fontSize: 14,
+        ".MuiSvgIcon-fontSizeLarge": {
+          height: 20,
+          width: 20
+        }
       }
     }
   },
@@ -8283,44 +8326,105 @@ const components = {
 
 const palette = {
   primary: {
-    main: "#1e62a1",
-    light: "#5a8fd3",
-    dark: "#003972",
+    50: "#E4ECF4",
+    100: "#BCD0E3",
+    200: "#8FB1D0",
+    300: "#6392BD",
+    light: "417AAE",
+    main: "#2063A0",
+    600: "#1C5B98",
+    700: "#18518E",
+    800: "#134784",
+    dark: "#0B3573",
+    A100: "#A5C5FF",
+    A200: "#72A4FF",
+    A400: "#3F83FF",
+    A700: "#2572FF",
     contrastText: "#ffffff"
   },
   secondary: {
-    main: "#0CBBE2",
-    light: "#67eeff",
-    dark: "#008bb0",
+    50: "#E0F7FA",
+    100: "#B3EBF2",
+    200: "#80DEEA",
+    300: "#4DD0E1",
+    light: "#26C6DA",
+    main: "#00BCD4",
+    600: "#00B6CF",
+    700: "#00ADC9",
+    800: "#00A5C3",
+    dark: "#0097B9",
+    A100: "#E2F9FF",
+    A200: "#AFEEFF",
+    A400: "#7CE3FF",
+    A700: "#63DDFF",
     contrastText: "#ffffff"
   },
-  text: {
-    primary: "#101840de",
-    secondary: "#10184099",
-    disabled: "#10184061"
-  },
   error: {
+    50: "#F9E8E8",
+    100: "#F1C7C7",
+    200: "#E8A1A1",
+    300: "#DF7B7B",
+    light: "#D85F5F",
     main: "#D14343",
-    light: "#d85f5f",
-    dark: "#b51e1e",
+    600: "#CC3D3D",
+    700: "#C63434",
+    800: "#C02C2C",
+    dark: "#B51E1E",
+    A100: "#FFECEC",
+    A200: "#FFB9B9",
+    A400: "#FF8686",
+    A700: "#FF6D6D",
     contrastText: "#ffffff"
   },
   warning: {
-    main: "#fb8500",
-    light: "#fc9726",
-    dark: "#f85500",
+    50: "#FFF0E0",
+    100: "#FEDAB3",
+    200: "#FDC280",
+    300: "#FCAA4D",
+    light: "#FC9726",
+    main: "#FB8500",
+    600: "#FA7D00",
+    700: "#FA7200",
+    800: "#F96800",
+    dark: "#F85500",
+    A100: "#FFFFFF",
+    A200: "#FFF1EB",
+    A400: "#FFCCB8",
+    A700: "#FFBA9F",
     contrastText: "#ffffff"
   },
   info: {
-    main: "#2d9fc5",
-    light: "#4dadce",
-    dark: "#1172a3",
+    50: "#E6F3F8",
+    100: "#C0E2EE",
+    200: "#96CFE2",
+    300: "#6CBCD6",
+    light: "#4DADCE",
+    main: "#2D9FC5",
+    600: "#2897BF",
+    700: "#228DB8",
+    800: "#1C83B0",
+    dark: "#1172A3",
+    A100: "#D4EFFF",
+    A200: "#A1DCFF",
+    A400: "#6ECAFF",
+    A700: "#54C1FF",
     contrastText: "#ffffff"
   },
   success: {
-    main: "#8fc93a",
-    dark: "#60a918",
-    light: "#a0d158",
+    50: "#F2F9E7",
+    100: "#DDEFC4",
+    200: "#C7E49D",
+    300: "#B1D975",
+    light: "#A0D158",
+    main: "#8FC93A",
+    600: "#87C334",
+    700: "#7CBC2C",
+    800: "#72B525",
+    dark: "#60A918",
+    A100: "#EDFFDE",
+    A200: "#D2FFAB",
+    A400: "#B6FF78",
+    A700: "#A9FF5E",
     contrastText: "#ffffff"
   },
   grey: {
@@ -8339,6 +8443,11 @@ const palette = {
     A400: "#696F8C",
     A700: "#101840"
   },
+  text: {
+    primary: "#101840de",
+    secondary: "#10184099",
+    disabled: "#10184061"
+  },
   action: {
     active: "rgba(16, 24, 64, 0.54)",
     hover: "rgba(16, 24, 64, 0.04)",
@@ -8379,8 +8488,18 @@ const mixins = {
 
 const typography = {
   fontSize: 13,
+  body3: {
+    fontFamily: 'Roboto',
+    fontWeight: 310,
+    fontSize: 12,
+    letterSpacing: 0.17,
+    lineHeight: 1.2,
+    [breakpoints.down('md')]: {
+      fontSize: 11
+    }
+  },
   body1: {
-    fontFamily: "Roboto",
+    fontFamily: 'Roboto',
     fontSize: 14,
     fontWeight: 400,
     letterSpacing: 0.15,
@@ -8390,7 +8509,7 @@ const typography = {
     }
   },
   body2: {
-    fontFamily: "Roboto",
+    fontFamily: 'Roboto',
     fontSize: 13,
     fontWeight: 400,
     letterSpacing: 0.17,
@@ -8400,7 +8519,7 @@ const typography = {
     }
   },
   subtitle1: {
-    fontFamily: "Roboto",
+    fontFamily: 'Roboto',
     fontSize: 14,
     fontWeight: 500,
     letterSpacing: 0.15,
@@ -8410,7 +8529,7 @@ const typography = {
     }
   },
   subtitle2: {
-    fontFamily: "Roboto",
+    fontFamily: 'Roboto',
     fontSize: 13,
     fontWeight: 500,
     letterSpacing: 0.1,
@@ -8420,7 +8539,7 @@ const typography = {
     }
   },
   caption: {
-    fontFamily: "Roboto",
+    fontFamily: 'Roboto',
     fontSize: 11,
     fontWeight: 400,
     letterSpacing: 0.4,
@@ -8430,7 +8549,7 @@ const typography = {
     }
   },
   overline: {
-    fontFamily: "Roboto",
+    fontFamily: 'Roboto',
     fontSize: 11,
     fontWeight: 400,
     letterSpacing: 1,
@@ -8440,7 +8559,7 @@ const typography = {
     }
   },
   h6: {
-    fontFamily: "Nunito",
+    fontFamily: 'Nunito',
     fontSize: 16,
     fontWeight: 600,
     lineHeight: 1.6,
@@ -8449,44 +8568,44 @@ const typography = {
     }
   },
   h5: {
-    fontFamily: "Nunito",
+    fontFamily: 'Nunito',
     fontSize: 18,
     fontWeight: 600,
     lineHeight: 1.8
   },
   h4: {
-    fontFamily: "Nunito",
+    fontFamily: 'Nunito',
     fontSize: 20,
     fontWeight: 600,
     letterSpacing: 0.25,
     lineHeight: 1
   },
   h3: {
-    fontFamily: "Nunito",
+    fontFamily: 'Nunito',
     fontSize: 28,
     fontWeight: 500,
     lineHeight: 1.2
   },
   h2: {
-    fontFamily: "Nunito",
+    fontFamily: 'Nunito',
     fontSize: 32,
     fontWeight: 400,
     letterSpacing: -0.5,
     lineHeight: 1.2
   },
   h1: {
-    fontFamily: "Nunito",
+    fontFamily: 'Nunito',
     fontSize: 40,
     fontWeight: 300,
     letterSpacing: -1.5,
     lineHeight: 1.4
   },
   button: {
-    fontFamily: "Roboto",
-    textTransform: "unset",
+    fontFamily: 'Roboto',
+    textTransform: 'unset',
     fontWeightLight: 300,
     fontSize: 13,
-    lineHeight: "normal",
+    lineHeight: 'normal',
     '@media(max-width: 885px)': {
       fontSize: 14
     }
@@ -8502,20 +8621,7 @@ const themeOptions = {
   breakpoints
 };
 
-const SincoTheme = createTheme(Object.assign({}, themeOptions, {
-  typography: {
-    body3: {
-      fontFamily: "Roboto",
-      fontWeight: 310,
-      fontSize: 12,
-      letterSpacing: 0.17,
-      lineHeight: 1.2,
-      [breakpoints.down("md")]: {
-        fontSize: 11
-      }
-    }
-  }
-}));
+const SincoTheme = createTheme(Object.assign({}, themeOptions));
 
 var wellKnownSymbol$2 = wellKnownSymbol$4;
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sinco/react",
-  "version": "1.0.4-rc.7",
+  "version": "1.0.4-rc.8",
   "description": "package for the configuration of mui react sinco",
   "private": false,
   "license": "MIT",

package/src/lib/Theme/index.d.ts

@@ -1,15 +1 @@
-/// <reference types="react" />
-declare module "@mui/material/styles" {
-    interface TypographyVariants {
-        body3: React.CSSProperties;
-    }
-    interface TypographyVariantsOptions {
-        body3?: React.CSSProperties;
-    }
-}
-declare module "@mui/material/Typography" {
-    interface TypographyPropsVariantOverrides {
-        body3: true;
-    }
-}
 export declare const SincoTheme: import("@mui/material/styles").Theme;

package/src/lib/Theme/typography.d.ts

@@ -1,3 +1,17 @@
+/// <reference types="react" />
 import { TypographyOptions } from '@mui/material/styles/createTypography';
+declare module '@mui/material/styles' {
+    interface TypographyVariants {
+        body3: React.CSSProperties;
+    }
+    interface TypographyVariantsOptions {
+        body3?: React.CSSProperties;
+    }
+}
+declare module '@mui/material/Typography' {
+    interface TypographyPropsVariantOverrides {
+        body3: true;
+    }
+}
 declare const typography: TypographyOptions;
 export default typography;