@m4l/graphics 7.1.2-beta.1 → 7.1.3

package/contexts/ThemeSettingsContext/store.js

@@ -1,45 +1,45 @@
 import { createStore as S } from "zustand";
-import { devtools as c } from "zustand/middleware";
-import { immer as p } from "zustand/middleware/immer";
-import { getPaletteByPreset as a, typographyOld as d, shadows as h, getColorPresets as u, createCustomShadows as f } from "@m4l/styles";
-import { alpha as U } from "@mui/system";
-import { d as s } from "./constants.js";
-function g(r, o = "m4l") {
-  const m = document.querySelector('[data-mui-color-scheme="light"]');
-  m && Object.keys(r).forEach((t) => {
+import { devtools as a } from "zustand/middleware";
+import { immer as d } from "zustand/middleware/immer";
+import { getPaletteByPreset as u, createCustomShadows as x, shadows as p, typographyOld as y, getColorPresets as m } from "@m4l/styles";
+import { alpha as s } from "@mui/system";
+import { d as g } from "./constants.js";
+function l(r, o = "m4l") {
+  const n = document.querySelector('[data-mui-color-scheme="light"]');
+  n && Object.keys(r).forEach((t) => {
     const e = r[t];
     if (typeof e == "string" || typeof e == "number") {
-      const l = `--${o}-${t}`;
-      m.style.setProperty(l, e.toString());
-    } else typeof e == "object" && e !== null && g(e, `${o}-${t}`);
+      const c = `--${o}-${t}`;
+      n.style.setProperty(c, e.toString());
+    } else typeof e == "object" && e !== null && l(e, `${o}-${t}`);
   });
 }
-const n = (r) => {
-  const o = r.themeUserSettings || s, m = o.themeMode === "light", t = a(o.themeColor), e = m ? t.light : t.dark;
+const h = (r) => {
+  const o = r.themeUserSettings || g, n = o.themeMode === "light", t = u(o.themeColor), e = n ? t.light : t.dark;
   r.themeOptions = {
     ...r.themeOptions,
-    ...d,
+    ...y,
     palette: {
       ...r.themeOptions?.palette ?? {},
       ...e
     },
     shape: { borderRadius: 8 },
     direction: o.themeDirection,
-    shadows: m ? h.light : h.dark,
+    shadows: n ? p.light : p.dark,
     customShadows: {
-      primary: `0 8px 16px 0 ${U(
-        u(o.themeColor)?.main || "#fff",
-        0.2
-      )}`,
-      ...f(o.themeMode)
+      primary: n ? `0 4px 8px -4px ${s(m(o.themeColor)?.enabledLight, 0.12)},
+       0 2px 27px 2px ${s(m(o.themeColor)?.enabledLight, 0.02)}` : `0 4px 8px -4px ${s(m(o.themeColor)?.enabledDark, 0.12)},
+       0 2px 27px 2px ${s(m(o.themeColor)?.enabledDark, 0.02)}`,
+      ...x(o.themeMode),
+      primary2: n ? `0px 2px 3px 0px ${s(m(o.themeColor)?.hoverOpacityLight, 0.2)}` : `0px 2px 3px 0px ${s(m(o.themeColor)?.hoverOpacityDark, 0.2)}`
     },
     stretch: o.themeStretch
-  }, g(r.themeOptions);
+  }, l(r.themeOptions);
 }, i = (r) => {
   r.themeSettingsPersistFn && r.themeSettingsPersistFn(r.themeUserSettings);
-}, P = (r) => S(
-  c(
-    p((o, m) => ({
+}, T = (r) => S(
+  a(
+    d((o, n) => ({
       ...r,
       settingsActions: {
         /**
@@ -51,7 +51,7 @@ const n = (r) => {
          */
         init: () => {
           o((t) => {
-            n(t);
+            h(t);
           });
         },
         /**
@@ -63,7 +63,7 @@ const n = (r) => {
          */
         setThemeSettings: (t) => {
           o((e) => {
-            e.themeUserSettings = { ...e.themeUserSettings, ...t }, i(e), n(e);
+            e.themeUserSettings = { ...e.themeUserSettings, ...t }, i(e), h(e);
           });
         },
         /**
@@ -78,7 +78,7 @@ const n = (r) => {
             e.themeUserSettings = {
               ...e.themeUserSettings,
               themeMode: t.target.value
-            }, i(e), n(e);
+            }, i(e), h(e);
           });
         },
         /**
@@ -105,7 +105,7 @@ const n = (r) => {
             e.themeUserSettings = {
               ...e.themeUserSettings,
               themeDirection: t.target.value
-            }, i(e), n(e);
+            }, i(e), h(e);
           });
         },
         /**
@@ -120,7 +120,7 @@ const n = (r) => {
             e.themeUserSettings = {
               ...e.themeUserSettings,
               themeColor: t.target.value
-            }, i(e), n(e);
+            }, i(e), h(e);
           });
         },
         /**
@@ -135,7 +135,7 @@ const n = (r) => {
             e.themeUserSettings = {
               ...e.themeUserSettings,
               themeLayout: t.target.value
-            }, i(e), n(e);
+            }, i(e), h(e);
           });
         },
         /**
@@ -150,7 +150,7 @@ const n = (r) => {
             t.themeUserSettings = {
               ...t.themeUserSettings,
               themeStretch: !t.themeUserSettings.themeStretch
-            }, i(t), n(t);
+            }, i(t), h(t);
           });
         },
         /**
@@ -163,8 +163,8 @@ const n = (r) => {
         onResetSetting: () => {
           o((t) => {
             t.themeUserSettings = {
-              ...s
-            }, i(t), n(t);
+              ...g
+            }, i(t), h(t);
           });
         }
       }
@@ -173,5 +173,5 @@ const n = (r) => {
   )
 );
 export {
-  P as c
+  T as c
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@m4l/graphics",
-  "version": "7.1.2-beta.1",
+  "version": "7.1.3",
   "license": "UNLICENSED",
   "author": "M4L Team*",
   "type": "module",
@@ -17,7 +17,7 @@
   },
   "peerDependencies": {
     "@m4l/core": "^2.0.0",
-    "@m4l/styles": "7.1.29-beta.1",
+    "@m4l/styles": "^7.0.0",
     "@mui/material": "5.16.7",
     "@mui/x-date-pickers": "6.20.2",
     "@types/react": "^18.0.0",