@zesty-io/material 0.7.0 → 0.10.0

package/es/theme/palette.d.ts

@@ -1,6 +1,6 @@
-import { Color } from '@mui/material';
-import { PaletteOptions } from '@mui/material/styles';
-declare module '@mui/material/styles' {
+import { Color } from "@mui/material";
+import { PaletteOptions } from "@mui/material/styles";
+declare module "@mui/material/styles" {
     interface Palette {
         red: Color;
         deepPurple: Color;
@@ -23,5 +23,42 @@ declare module '@mui/material/styles' {
         border?: string;
     }
 }
-declare const palette: PaletteOptions;
-export default palette;
+declare const lightThemePalette: PaletteOptions;
+declare const darkThemePalette: {
+    text: {
+        primary: string;
+        secondary: string;
+        disabled: string;
+    };
+    action: {
+        active: string;
+        hover: string;
+        selectedOpacity: number;
+    };
+    border: string;
+    background: {
+        paper: string;
+    };
+    primary?: import("@mui/material").PaletteColorOptions | undefined;
+    secondary?: import("@mui/material").PaletteColorOptions | undefined;
+    error?: import("@mui/material").PaletteColorOptions | undefined;
+    warning?: import("@mui/material").PaletteColorOptions | undefined;
+    info?: import("@mui/material").PaletteColorOptions | undefined;
+    success?: import("@mui/material").PaletteColorOptions | undefined;
+    mode?: import("@mui/material").PaletteMode | undefined;
+    tonalOffset?: import("@mui/material/styles/createPalette").PaletteTonalOffset | undefined;
+    contrastThreshold?: number | undefined;
+    common?: Partial<import("@mui/material").CommonColors> | undefined;
+    grey?: Partial<Color> | undefined;
+    divider?: string | undefined;
+    getContrastText?: ((background: string) => string) | undefined;
+    red?: Partial<Color> | undefined;
+    deepPurple?: Partial<Color> | undefined;
+    deepOrange?: Partial<Color> | undefined;
+    pink?: Partial<Color> | undefined;
+    blue?: Partial<Color> | undefined;
+    green?: Partial<Color> | undefined;
+    purple?: Partial<Color> | undefined;
+    yellow?: Partial<Color> | undefined;
+};
+export { lightThemePalette, darkThemePalette };

package/es/theme/palette.js

@@ -1,5 +1,5 @@
-import { alpha } from '@mui/material/styles';
-const palette = {
+import { alpha } from "@mui/material/styles";
+const lightThemePalette = {
     primary: {
         main: "#FF5D0A",
         dark: "#EC4A0A",
@@ -43,16 +43,16 @@ const palette = {
         900: "#101828",
     },
     deepPurple: {
-        50: '#F8F9FC',
-        100: '#EAECF5',
-        200: '#C8CCE5',
-        300: '#9EA5D1',
+        50: "#F8F9FC",
+        100: "#EAECF5",
+        200: "#C8CCE5",
+        300: "#9EA5D1",
         400: "#4E5BA6",
-        500: '#4E5BA6',
-        600: '#3E4784',
-        700: '#363F72',
-        800: '#293056',
-        900: '#101323'
+        500: "#4E5BA6",
+        600: "#3E4784",
+        700: "#363F72",
+        800: "#293056",
+        900: "#101323",
     },
     deepOrange: {
         50: "#FFF6ED",
@@ -67,76 +67,76 @@ const palette = {
         900: "#7E2410",
     },
     red: {
-        50: '#FEF3F2',
-        100: '#FEE4E2',
-        200: '#FECDCA',
-        300: '#FDA29B',
-        400: '#F97066',
-        500: '#F04438',
-        600: '#D92D20',
-        700: '#B42318',
-        800: '#912018',
-        900: '#7A271A',
+        50: "#FEF3F2",
+        100: "#FEE4E2",
+        200: "#FECDCA",
+        300: "#FDA29B",
+        400: "#F97066",
+        500: "#F04438",
+        600: "#D92D20",
+        700: "#B42318",
+        800: "#912018",
+        900: "#7A271A",
     },
     pink: {
-        50: '#FDF2FA',
-        100: '#FCE7F6',
-        200: '#FCCEEE',
-        300: '#FAA7E0',
+        50: "#FDF2FA",
+        100: "#FCE7F6",
+        200: "#FCCEEE",
+        300: "#FAA7E0",
         400: "#F670C7",
-        500: '#EE46BC',
-        600: '#DD2590',
-        700: '#C11574',
-        800: '#9E165F',
-        900: '#851651',
+        500: "#EE46BC",
+        600: "#DD2590",
+        700: "#C11574",
+        800: "#9E165F",
+        900: "#851651",
     },
     blue: {
-        50: '#F0F9FF',
+        50: "#F0F9FF",
         100: "#E0F2FE",
-        200: '#B9E6FE',
-        300: '#7CD4FD',
+        200: "#B9E6FE",
+        300: "#7CD4FD",
         400: "#36BFFA",
-        500: '#0BA5EC',
-        600: '#0086C9',
-        700: '#026AA2',
-        800: '#065986',
-        900: '#0B4A6F',
+        500: "#0BA5EC",
+        600: "#0086C9",
+        700: "#026AA2",
+        800: "#065986",
+        900: "#0B4A6F",
     },
     green: {
-        50: '#ECFDF3',
+        50: "#ECFDF3",
         100: "#D1FADF",
-        200: '#A6F4C5',
-        300: '#6CE9A6',
+        200: "#A6F4C5",
+        300: "#6CE9A6",
         400: "#32D583",
-        500: '#12B76A',
-        600: '#039855',
-        700: '#027A48',
-        800: '#05603A',
-        900: '#054F31',
+        500: "#12B76A",
+        600: "#039855",
+        700: "#027A48",
+        800: "#05603A",
+        900: "#054F31",
     },
     purple: {
-        50: '#F4F3FF',
-        100: '#EBE9FE',
-        200: '#D9D6FE',
-        300: '#BDB4FE',
-        400: '#9B8AFB',
-        500: '#7A5AF8',
-        600: '#6938EF',
-        700: '#5925DC',
-        800: '#4A1FB8',
-        900: '#3E1C96',
+        50: "#F4F3FF",
+        100: "#EBE9FE",
+        200: "#D9D6FE",
+        300: "#BDB4FE",
+        400: "#9B8AFB",
+        500: "#7A5AF8",
+        600: "#6938EF",
+        700: "#5925DC",
+        800: "#4A1FB8",
+        900: "#3E1C96",
     },
     yellow: {
-        50: '#FFFCF5',
-        100: '#FEF0C7',
-        200: '#FEDF89',
-        300: '#FEC84B',
-        400: '#FDB022',
-        500: '#F79009',
-        600: '#DC6803',
-        700: '#B54708',
-        800: '#93370D',
-        900: '#7A2E0E',
+        50: "#FFFCF5",
+        100: "#FEF0C7",
+        200: "#FEDF89",
+        300: "#FEC84B",
+        400: "#FDB022",
+        500: "#F79009",
+        600: "#DC6803",
+        700: "#B54708",
+        800: "#93370D",
+        900: "#7A2E0E",
     },
     border: "#F2F4F7",
     action: {
@@ -146,6 +146,23 @@ const palette = {
         disabled: "rgba(16, 24, 40, 0.26)",
         disabledBackground: "rgba(16, 24, 40, 0.12)",
         focus: "rgba(16, 24, 40, 0.12)",
-    }
+    },
+};
+const darkThemePalette = {
+    ...lightThemePalette,
+    text: {
+        primary: "#ffffff",
+        secondary: "#98A2B3",
+        disabled: "#D0D5DD",
+    },
+    action: {
+        active: "#98A2B3",
+        hover: alpha("#FF5D0A", 0.08),
+        selectedOpacity: 0.08,
+    },
+    border: "#1D2939",
+    background: {
+        paper: "#101828",
+    },
 };
-export default palette;
+export { lightThemePalette, darkThemePalette };

package/es/theme/typography.js

@@ -3,22 +3,27 @@ const typography = {
     h1: {
         fontSize: "36px",
         lineHeight: "44px",
+        letterSpacing: "-0.56px",
     },
     h2: {
         fontSize: "32px",
         lineHeight: "40px",
+        letterSpacing: "-0.56px",
     },
     h3: {
         fontSize: "28px",
         lineHeight: "36px",
+        letterSpacing: "-0.56px",
     },
     h4: {
         fontSize: "24px",
         lineHeight: "32px",
+        letterSpacing: "-0.56px",
     },
     h5: {
         fontSize: "20px",
         lineHeight: "28px",
+        letterSpacing: "-0.56px",
     },
     h6: {
         fontSize: "16px",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zesty-io/material",
-  "version": "0.7.0",
+  "version": "0.10.0",
   "description": "Contains custom components which are in addition to the @mui design-system",
   "author": "Zesty.io",
   "license": "MIT",
@@ -29,8 +29,8 @@
   "dependencies": {
     "@emotion/react": "^11.9.0",
     "@emotion/styled": "^11.8.1",
-    "@mui/icons-material": "^5.6.2",
-    "@mui/material": "^5.6.4",
+    "@mui/icons-material": "^5.14.3",
+    "@mui/material": "^5.14.5",
     "@mui/x-date-pickers": "^5.0.0-alpha.5",
     "date-fns": "^2.28.0",
     "react-window": "^1.8.7"