@m4l/styles 7.1.3 → 7.1.5

package/index.js

@@ -1,12 +1,12 @@
 import { D as r, g as s, m as t } from "./config.js";
 import { c as p, s as m } from "./theme/shadows.js";
-import { t as x } from "./theme/typography.js";
-import { f as O } from "./theme/overrides/index.js";
-import { B as S } from "./theme/palette/baseColors.js";
-import { B as n } from "./theme/palette/baseOpacityColors.js";
-import { C as l } from "./theme/palette/commonColors.js";
-import { G as P } from "./theme/palette/greyPalette.js";
-import { p as _ } from "./theme/palette/presetColors.js";
+import { f as x } from "./theme/overrides/index.js";
+import { B as O } from "./theme/palette/baseColors.js";
+import { B as S } from "./theme/palette/baseOpacityColors.js";
+import { C as n } from "./theme/palette/commonColors.js";
+import { G as l } from "./theme/palette/greyPalette.js";
+import { p as P } from "./theme/palette/presetColors.js";
+import { t as _ } from "./theme/typography.js";
 import { u as A } from "./utils/useResponsive.js";
 import { D as L, d, g as h } from "./utils/getColorPresets.js";
 import { p as v, r as y, a as F } from "./utils/getFontValue.js";
@@ -14,26 +14,26 @@ import { g as U } from "./utils/getColorState.js";
 import { g as w } from "./utils/getPaletteByPreset.js";
 import { g as G } from "./utils/getUserThemeOptions.js";
 export {
-  S as BASE_COLORS,
-  n as BASE_OPACITY_COLORS,
-  l as COMMON_COLORS,
+  O as BASE_COLORS,
+  S as BASE_OPACITY_COLORS,
+  n as COMMON_COLORS,
   L as DEFAULT_PRESET,
   r as DEFAULT_SIZE,
-  P as GREY_PALETTE,
+  l as GREY_PALETTE,
   p as createCustomShadows,
   d as defaultPresetColors,
-  O as fnComponentsOverrides,
+  x as fnComponentsOverrides,
   h as getColorPresets,
   U as getColorState,
   w as getPaletteByPreset,
   G as getUserThemeOptions,
   s as globalRemSize,
   t as muiBreakpointsValues,
-  _ as presetsOptionsMainColor,
+  P as presetsOptionsMainColor,
   v as pxToRem,
   y as remToPx,
   F as responsiveFontSizes,
   m as shadows,
-  x as typography,
+  _ as typography,
   A as useResponsive
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@m4l/styles",
-  "version": "7.1.3",
+  "version": "7.1.5",
   "license": "UNLICENSED",
   "author": "m4l team",
   "publishConfig": {

package/theme/index.d.ts

@@ -1,7 +1,7 @@
 export type { CustomShadowOptions } from './shadows';
 export { shadows, createCustomShadows } from './shadows';
 export * from './palette';
-export { typography } from './typography';
+export * from './typography';
 export type { M4LTypographyVariants } from './typography';
 export * from './sizes';
 export { fnComponentsOverrides } from './overrides';

package/theme/overrides/M4LExtendedComponents/M4LAreasAdmin.js

@@ -309,7 +309,7 @@ const r = (o) => ({
                   boxShadow: "none"
                 },
                 "&.M4LAreasAdmin-selected": {
-                  background: o.vars.palette.primary.focusActive,
+                  background: o.vars.palette.primary.active,
                   ...o.colorSchemes.finalTheme.typography.body,
                   color: o.vars.palette.text.primary,
                   height: "22px",
@@ -347,7 +347,7 @@ const r = (o) => ({
                   },
                   "& .M4LIconButton-root": {
                     "&:hover": {
-                      background: o.vars.palette.primary.focusActive
+                      background: o.vars.palette.primary.active
                     },
                     [o.breakpoints.down("sm")]: {
                       color: o.vars.palette.text.primary
@@ -385,7 +385,7 @@ const r = (o) => ({
                     color: o.vars.palette.text.primary
                   },
                   "&.M4LIconButton-variantPrimary": {
-                    background: o.vars.palette.primary.focusActive,
+                    background: o.vars.palette.primary.active,
                     [o.breakpoints.down("sm")]: {
                       color: o.vars.palette.text.primary
                     }

package/theme/overrides/M4LExtendedComponents/M4LAreasViewer.js

@@ -154,7 +154,7 @@ const o = (r) => ({
                 alignItems: "center",
                 padding: "0 16px",
                 "& .MuiLinearProgress-root": {
-                  background: `rgba(${r.colorSchemes.finalTheme.palette.primary.focusActive} / 0.3)`
+                  background: `rgba(${r.colorSchemes.finalTheme.palette.primary.active} / 0.3)`
                 }
               }
             },
@@ -331,7 +331,7 @@ const o = (r) => ({
               "& .M4LAreasViewer-windowRootContainer": {
                 boxShadow: r.customShadows?.z2,
                 border: "1.5px solid",
-                borderColor: `rgba(${r.colorSchemes.finalTheme.palette.primary.focusActive} / 0.5)`,
+                borderColor: `rgba(${r.colorSchemes.finalTheme.palette.primary.active} / 0.5)`,
                 "& .M4LAreasViewer-windowHeader": {
                   background: r.vars.palette.primary.opacity,
                   borderTopLeftRadius: "4px",

package/theme/overrides/M4LExtendedComponents/M4LButton.js

@@ -75,7 +75,7 @@ const r = (o) => ({
               }
             },
             "&:active": {
-              backgroundColor: o.vars.palette.primary.focusActive,
+              backgroundColor: o.vars.palette.primary.active,
               color: o.vars.palette.text.primary,
               "& .M4LIcon-icon": {
                 backgroundColor: o.vars.palette.text.disabled,
@@ -118,7 +118,7 @@ const r = (o) => ({
         },
         /* Variant contained */
         "&.M4LButton-variantContained": {
-          backgroundColor: o.vars.palette.primary.focusActive,
+          backgroundColor: o.vars.palette.primary.active,
           color: o.vars.palette.common?.white,
           boxShadow: o.customShadows?.z1,
           position: "relative",
@@ -140,7 +140,7 @@ const r = (o) => ({
           //     },
           // },
           "&.Mui-focusVisible": {
-            backgroundColor: o.vars.palette.primary.focusActive,
+            backgroundColor: o.vars.palette.primary.active,
             color: o.vars.palette.common?.white,
             "& .M4LIcon-icon": {
               backgroundColor: o.vars.palette.common?.white
@@ -168,19 +168,19 @@ const r = (o) => ({
               }
             },
             "&:active": {
-              borderColor: o.vars.palette.primary.focusActive,
-              color: o.vars.palette.primary.focusActive,
+              borderColor: o.vars.palette.primary.active,
+              color: o.vars.palette.primary.active,
               backgroundColor: "transparent",
               "& .M4LIcon-icon": {
-                backgroundColor: o.vars.palette.primary.focusActive
+                backgroundColor: o.vars.palette.primary.active
               }
             },
             "&.Mui-focusVisible": {
-              borderColor: o.vars.palette.primary.focusActive,
-              color: o.vars.palette.primary.focusActive,
+              borderColor: o.vars.palette.primary.active,
+              color: o.vars.palette.primary.active,
               backgroundColor: "transparent",
               "& .M4LIcon-icon": {
-                backgroundColor: o.vars.palette.primary.focusActive
+                backgroundColor: o.vars.palette.primary.active
               },
               "&::before": {
                 content: "''"
@@ -204,16 +204,16 @@ const r = (o) => ({
             },
             "&:active": {
               backgroundColor: "transparent",
-              color: o.vars.palette.primary.focusActive,
+              color: o.vars.palette.primary.active,
               "& .M4LIcon-icon": {
-                backgroundColor: o.vars.palette.primary.focusActive
+                backgroundColor: o.vars.palette.primary.active
               }
             },
             "&.Mui-focusVisible": {
               backgroundColor: "transparent",
-              color: o.vars.palette.primary.focusActive,
+              color: o.vars.palette.primary.active,
               "& .M4LIcon-icon": {
-                backgroundColor: o.vars.palette.primary.focusActive
+                backgroundColor: o.vars.palette.primary.active
               },
               "&:before": {
                 content: "''"

package/theme/overrides/M4LExtendedComponents/M4LCheckBox.js

@@ -55,7 +55,7 @@ const t = (o) => ({
         },
         "& .Mui-focusVisible": {
           border: "1px solid",
-          borderColor: o.vars.palette.primary.focusActive
+          borderColor: o.vars.palette.primary.active
         },
         "& .MuiButtonBase-root:hover .MuiSvgIcon-root": {
           fill: o.vars.palette.primary?.hover

package/theme/overrides/M4LExtendedComponents/M4LFormatter.js

@@ -8,7 +8,7 @@ const o = (r) => ({
           },
           "&.M4LFormatter-booleanFormatterCheck": {
             "& .M4LIcon-icon": {
-              backgroundColor: r.vars.palette.primary.focusActive
+              backgroundColor: r.vars.palette.primary.active
             }
           }
         }

package/theme/overrides/M4LExtendedComponents/M4LIconButton.js

@@ -19,7 +19,7 @@ const r = (o) => ({
         "&::before": {
           boxSizing: "content-box",
           border: "1px solid",
-          borderColor: o.vars.palette.primary.focusActive,
+          borderColor: o.vars.palette.primary.active,
           borderRadius: "4px",
           position: "absolute",
           transition: "all .3s ease"
@@ -59,14 +59,14 @@ const r = (o) => ({
             }
           },
           "&:active": {
-            backgroundColor: o.vars.palette.primary.focusActive,
+            backgroundColor: o.vars.palette.primary.active,
             transition: "background-color .5s ease",
             "& .M4LIcon-icon": {
               backgroundColor: o.vars.palette.common?.white
             }
           },
           "&.M4LIconButton-isFocus": {
-            backgroundColor: o.vars.palette.primary.focusActive,
+            backgroundColor: o.vars.palette.primary.active,
             "& .M4LIcon-icon": {
               backgroundColor: o.vars.palette.common?.white
             },
@@ -83,23 +83,23 @@ const r = (o) => ({
           },
           "&:hover": {
             border: "1px solid",
-            borderColor: o.vars.palette.primary.focusActive,
+            borderColor: o.vars.palette.primary.active,
             "& .M4LIcon-icon": {
-              backgroundColor: o.vars.palette.primary.focusActive
+              backgroundColor: o.vars.palette.primary.active
             }
           },
           "&:active": {
             border: "1px solid",
-            borderColor: o.vars.palette.primary.focusActive,
+            borderColor: o.vars.palette.primary.active,
             "& .M4LIcon-icon": {
-              backgroundColor: o.vars.palette.primary.focusActive
+              backgroundColor: o.vars.palette.primary.active
             }
           },
           "&.M4LIconButton-isFocus": {
             border: "1px solid",
-            borderColor: o.vars.palette.primary.focusActive,
+            borderColor: o.vars.palette.primary.active,
             "& .M4LIcon-icon": {
-              backgroundColor: o.vars.palette.primary.focusActive
+              backgroundColor: o.vars.palette.primary.active
             },
             "&::before": {
               content: "''"
@@ -111,21 +111,21 @@ const r = (o) => ({
           "&:hover": {
             backgroundColor: o.vars.palette.primary.opacity,
             "& .M4LIcon-icon": {
-              backgroundColor: o.vars.palette.primary.focusActive
+              backgroundColor: o.vars.palette.primary.active
             }
           },
           "&:active": {
             backgroundColor: "transparent",
             "& .M4LIcon-icon": {
-              backgroundColor: o.vars.palette.primary.focusActive
+              backgroundColor: o.vars.palette.primary.active
             }
           },
           "&.M4LIconButton-isFocus": {
             backgroundColor: "transparent",
             border: "1px solid",
-            borderColor: o.vars.palette.primary.focusActive,
+            borderColor: o.vars.palette.primary.active,
             "& .M4LIcon-icon": {
-              backgroundColor: o.vars.palette.primary.focusActive
+              backgroundColor: o.vars.palette.primary.active
             }
           }
         },

package/theme/overrides/M4LExtendedComponents/M4LImageButton.js

@@ -39,7 +39,7 @@ const e = (t) => ({
         ".MuiButtonBase-root:focus": {
           backgroundColor: t.vars.palette.primary.opacity,
           border: "1px solid",
-          borderColor: t.vars.palette.primary.focusActive
+          borderColor: t.vars.palette.primary.active
         },
         [t.breakpoints.down("md")]: {
           ".MuiButtonBase-root": {

package/theme/overrides/M4LExtendedComponents/M4LNavLink.js

@@ -3,7 +3,7 @@ const o = (r) => ({
     styleOverrides: {
       "&.M4LNavLink-root": {
         "& .M4LTypography-root": {
-          color: r.vars.palette.primary.focusActive
+          color: r.vars.palette.primary.active
         },
         "&: hover": {
           "& .M4LTypography-root": {

package/theme/overrides/M4LExtendedComponents/M4LPeriod.js

@@ -42,7 +42,7 @@ const r = (o) => ({
           borderColor: o.vars.palette.primary.hover
         },
         "&.M4LPeriod-isFocus": {
-          borderColor: o.vars.palette.primary.focusActive
+          borderColor: o.vars.palette.primary.active
         },
         "& .MuiAutocomplete-root": {
           width: "100%",

package/theme/overrides/M4LExtendedComponents/M4LPopover.js

@@ -53,7 +53,7 @@ const t = (o) => ({
           "& .MuiButtonBase-root.Mui-selected": {
             backgroundColor: o.vars.palette.primary.opacity,
             "& .M4LanguagePopover-labelItem": {
-              color: o.vars.palette.primary.focusActive
+              color: o.vars.palette.primary.active
             }
           }
         },

package/theme/overrides/M4LExtendedComponents/M4LSideBar.js

@@ -253,7 +253,7 @@ const t = (o) => ({
                     boxShadow: o.shadows[1],
                     "&:hover": {
                       background: r(
-                        o.colorSchemes.finalTheme.palette.primary.focusActive || "#fff",
+                        o.colorSchemes.finalTheme.palette.primary.active || "#fff",
                         0.24
                       ),
                       // Validar implementación desde la creación del tema.
@@ -555,7 +555,7 @@ const t = (o) => ({
                     background: o.vars.palette.primary.opacity,
                     "&:hover": {
                       background: r(
-                        o.colorSchemes.finalTheme.palette.primary.focusActive || "#fff",
+                        o.colorSchemes.finalTheme.palette.primary.active || "#fff",
                         0.24
                       ),
                       // Validar implementación desde la creación del tema.
@@ -995,10 +995,10 @@ const t = (o) => ({
                     border: "1px solid",
                     borderColor: o.vars.palette.primary.opacity,
                     "& .M4LSideBar-navItemMainRoot": {
-                      background: o.vars.palette.primary.focusActive,
+                      background: o.vars.palette.primary.active,
                       "&:hover": {
                         background: r(
-                          o.colorSchemes.finalTheme.palette.primary.focusActive || "#fff",
+                          o.colorSchemes.finalTheme.palette.primary.active || "#fff",
                           0.24
                         ),
                         // Validar implementación desde la creación del tema.
@@ -1281,7 +1281,7 @@ const t = (o) => ({
                       background: o.vars.palette.primary.opacity,
                       "&:hover": {
                         background: r(
-                          o.colorSchemes.finalTheme.palette.primary.focusActive || "#fff",
+                          o.colorSchemes.finalTheme.palette.primary.active || "#fff",
                           0.24
                         ),
                         // Validar implementación desde la creación del tema.
@@ -1540,7 +1540,7 @@ const t = (o) => ({
                                   background: o.vars.palette.primary.opacity,
                                   "&:hover": {
                                     background: r(
-                                      o.colorSchemes.finalTheme.palette.primary.focusActive || "#fff",
+                                      o.colorSchemes.finalTheme.palette.primary.active || "#fff",
                                       0.24
                                     ),
                                     // Validar implementación desde la creación del tema.

package/theme/overrides/M4LExtendedComponents/M4LSplitLayout.js

@@ -70,7 +70,7 @@ const o = (t) => ({
           width: "4px",
           top: "calc(50% - 22.5px)",
           position: "absolute",
-          background: t.vars.palette.primary.focusActive,
+          background: t.vars.palette.primary.active,
           borderRadius: "1px",
           margin: "1px 0px"
         },
@@ -99,7 +99,7 @@ const o = (t) => ({
           height: "4px !important",
           left: "calc(50% - 22.5px)",
           top: "unset",
-          background: t.vars.palette.primary.focusActive,
+          background: t.vars.palette.primary.active,
           borderRadius: "2px",
           zIndex: "1"
         },

package/theme/overrides/M4LExtendedComponents/M4LTab.js

@@ -55,7 +55,7 @@ const r = (o) => ({
             height: "2px",
             left: "1.5px",
             top: "0px",
-            backgroundColor: o.vars.palette.primary.focusActive,
+            backgroundColor: o.vars.palette.primary.active,
             borderRadius: "2px 2px 0px 0px",
             position: "absolute"
           }

package/theme/overrides/M4LExtendedComponents/M4LTabs.js

@@ -20,7 +20,7 @@ const o = (r) => ({
         },
         "& .MuiButtonBase-root:hover": {
           "& .MuiSvgIcon-root": {
-            color: r.vars.palette.primary.focusActive
+            color: r.vars.palette.primary.active
           }
         },
         "& .MuiTabs-scroller": {

package/theme/overrides/M4LExtendedComponents/M4LoadingButton.js

@@ -42,7 +42,7 @@ const r = (o) => ({
           "&::before": {
             inset: "0",
             border: "1px solid",
-            borderColor: o.vars.palette.primary.focusActive,
+            borderColor: o.vars.palette.primary.active,
             borderRadius: "4px",
             transform: "scale(1.07, 1.36)",
             position: "absolute",
@@ -123,7 +123,7 @@ const r = (o) => ({
             }
           },
           "& .MuiButtonBase-root": {
-            backgroundColor: o.vars.palette.primary.focusActive,
+            backgroundColor: o.vars.palette.primary.active,
             color: o.vars.palette.common?.white,
             boxShadow: o.customShadows?.primary,
             position: "relative",
@@ -145,14 +145,14 @@ const r = (o) => ({
               }
             },
             "&:active": {
-              backgroundColor: o.vars.palette.primary.focusActive,
+              backgroundColor: o.vars.palette.primary.active,
               color: o.vars.palette.common?.white,
               "& .M4LIcon-icon": {
                 backgroundColor: o.vars.palette.common?.white
               }
             },
             "&.Mui-focusVisible": {
-              backgroundColor: o.vars.palette.primary.focusActive,
+              backgroundColor: o.vars.palette.primary.active,
               color: o.vars.palette.common?.white,
               "& .M4LIcon-icon": {
                 backgroundColor: o.vars.palette.common?.white
@@ -181,19 +181,19 @@ const r = (o) => ({
               }
             },
             "&:active": {
-              borderColor: o.vars.palette.primary.focusActive,
-              color: o.vars.palette.primary.focusActive,
+              borderColor: o.vars.palette.primary.active,
+              color: o.vars.palette.primary.active,
               backgroundColor: "transparent",
               "& .M4LIcon-icon": {
-                backgroundColor: o.vars.palette.primary.focusActive
+                backgroundColor: o.vars.palette.primary.active
               }
             },
             "&.Mui-focusVisible": {
-              borderColor: o.vars.palette.primary.focusActive,
-              color: o.vars.palette.primary.focusActive,
+              borderColor: o.vars.palette.primary.active,
+              color: o.vars.palette.primary.active,
               backgroundColor: "transparent",
               "& .M4LIcon-icon": {
-                backgroundColor: o.vars.palette.primary.focusActive
+                backgroundColor: o.vars.palette.primary.active
               },
               "&::before": {
                 content: "''"
@@ -217,16 +217,16 @@ const r = (o) => ({
             },
             "&:active": {
               backgroundColor: "transparent",
-              color: o.vars.palette.primary.focusActive,
+              color: o.vars.palette.primary.active,
               "& .M4LIcon-icon": {
-                backgroundColor: o.vars.palette.primary.focusActive
+                backgroundColor: o.vars.palette.primary.active
               }
             },
             "&.Mui-focusVisible": {
               backgroundColor: "transparent",
-              color: o.vars.palette.primary.focusActive,
+              color: o.vars.palette.primary.active,
               "& .M4LIcon-icon": {
-                backgroundColor: o.vars.palette.primary.focusActive
+                backgroundColor: o.vars.palette.primary.active
               },
               "&:before": {
                 content: "''"

package/theme/overrides/M4LRHFComponents/M4LRHFAutocomplete.js

@@ -152,13 +152,13 @@ const i = (o) => ({
         /* State focus and active */
         "&.M4LRHFAutocomplete-isFocus": {
           "& .M4LRHFAutocomplete-label": {
-            color: o.vars.palette.primary.focusActive
+            color: o.vars.palette.primary.active
           },
           "& .MuiInputBase-root .MuiOutlinedInput-notchedOutline": {
             transition: "all .1s ease",
             background: o.vars.palette.primary.opacity,
             border: "2px solid",
-            borderColor: o.vars.palette.primary.focusActive,
+            borderColor: o.vars.palette.primary.active,
             boxShadow: `0px 1px 8px ${t(
               o.colorSchemes.finalTheme.palette.primary.main,
               0.32
@@ -168,7 +168,7 @@ const i = (o) => ({
             color: o.vars.palette.text.primary
           },
           "& .M4LIcon-icon": {
-            backgroundColor: o.vars.palette.primary.focusActive
+            backgroundColor: o.vars.palette.primary.active
           }
         },
         /* State error */

package/theme/overrides/M4LRHFComponents/M4LRHFCheckbox.js

@@ -55,7 +55,7 @@ const i = (o) => ({
         },
         ".Mui-focusVisible": {
           border: "1px solid",
-          borderColor: o.vars.palette.primary.focusActive
+          borderColor: o.vars.palette.primary.active
         },
         ".MuiButtonBase-root:hover .MuiSvgIcon-root": {
           fill: o.vars.palette.primary?.hover

package/theme/overrides/M4LRHFComponents/M4LRHFDateTime.js

@@ -117,18 +117,18 @@ const t = (o) => ({
         /* State focus and active */
         "&.M4LRHFDateTime-isFocus": {
           "& .M4LTypography-root": {
-            color: o.vars.palette.primary.focusActive
+            color: o.vars.palette.primary.active
           },
           "& .MuiInputBase-root .MuiOutlinedInput-notchedOutline": {
             transition: "all .1s ease",
             border: "2px solid",
-            borderColor: o.vars.palette.primary.focusActive
+            borderColor: o.vars.palette.primary.active
           },
           "& .MuiInputBase-input": {
             color: o.vars.palette.text.primary
           },
           "& .M4LIcon-icon": {
-            backgroundColor: o.vars.palette.primary.focusActive
+            backgroundColor: o.vars.palette.primary.active
           }
         },
         /* State error */

package/theme/overrides/M4LRHFComponents/M4LRHFTextField.js

@@ -85,12 +85,12 @@ const r = (t) => ({
         /* State focus and active */
         "&.M4LRHFTextField-isFocus": {
           "& .M4LRHFTextField-label": {
-            color: t.vars.palette.primary.focusActive
+            color: t.vars.palette.primary.active
           },
           "& .MuiInputBase-root .MuiOutlinedInput-notchedOutline": {
             transition: "all .1s ease",
             border: "2px solid",
-            borderColor: t.vars.palette.primary.focusActive,
+            borderColor: t.vars.palette.primary.active,
             boxShadow: `0px 1px 8px ${e(
               t.colorSchemes.finalTheme.palette.primary.main,
               0.32
@@ -101,7 +101,7 @@ const r = (t) => ({
             color: t.vars.palette.text.primary
           },
           "& .M4LIcon-icon": {
-            backgroundColor: t.vars.palette.primary.focusActive
+            backgroundColor: t.vars.palette.primary.active
           }
         },
         /* State error */

package/theme/overrides/MUIComponents/Paper.js

@@ -28,15 +28,15 @@ function r(o) {
             backgroundColor: o.vars.palette.primary.opacity
           },
           "& .MuiStack-root .MuiMenuItem-root.Mui-selected": {
-            color: o.vars.palette.primary.focusActive,
+            color: o.vars.palette.primary.active,
             transition: "all .5s",
             backgroundColor: o.vars.palette.primary.opacity
           },
           "& .MuiStack-root .MuiMenuItem-root:focus": {
-            color: o.vars.palette.primary.focusActive,
+            color: o.vars.palette.primary.active,
             transition: "all .5s",
             backgroundColor: o.vars.palette.background.default,
-            boxShadow: `0 0 0 1px ${o.vars.palette.primary.focusActive}`
+            boxShadow: `0 0 0 1px ${o.vars.palette.primary.active}`
           },
           /* Autocomplete Listbox */
           "& .MuiAutocomplete-listbox .MuiAutocomplete-option": {
@@ -51,15 +51,15 @@ function r(o) {
             backgroundColor: o.vars.palette.primary.opacity
           },
           "& .MuiAutocomplete-listbox .MuiAutocomplete-option.Mui-selected": {
-            color: o.vars.palette.primary.focusActive,
+            color: o.vars.palette.primary.active,
             transition: "all .5s",
             backgroundColor: o.vars.palette.primary.opacity
           },
           "& .MuiAutocomplete-listbox .MuiAutocomplete-option:active": {
-            color: o.vars.palette.primary.focusActive,
+            color: o.vars.palette.primary.active,
             transition: "all .5s",
             backgroundColor: o.vars.palette.background.default,
-            boxShadow: `0 0 0 1px ${o.vars.palette.primary.focusActive}`
+            boxShadow: `0 0 0 1px ${o.vars.palette.primary.active}`
           }
         }
       }

package/theme/palette/baseOpacityColors.js

@@ -66,8 +66,8 @@ const a = {
   },
   marble: {
     10: e(r.marbleLight[10], 0.08),
-    20: e(r.marbleLight[10], 0.16),
-    30: e(r.marbleLight[10], 0.12),
+    20: e(r.marbleLight[10], 0.12),
+    30: e(r.marbleLight[10], 0.16),
     40: e(r.marbleLight[10], 0.32),
     50: e(r.marbleLight[10], 0.48),
     60: e(r.marbleLight[10], 0.6),