@mx-cartographer/experiences 9.4.9 → 9.4.10-alpha.al0

package/CHANGELOG.md

@@ -1,3 +1,7 @@
+## [9.4.10] - 09-01-2026
+
+- **FIXED** - `background_color`/`paper_color` are treated as light-mode colors under `mode: browser`, preventing white-on-white text in dark mode (MEW-3445)
+
 ## [9.4.9] - 09-01-2026
 
 - **ADDED** - New theming properties on `ClientStyleProfile` and `StyleConfig`, and a `getClientCustomizations` util mapping them to MXUI `Customizations` (MEW-3445)

package/dist/common/utils/Theme.d.ts

@@ -2,7 +2,7 @@ import { PaletteColor, PaletteMode, Theme } from '@mui/material';
 import { Customizations } from '@mxenabled/mxui';
 import { ClientStyleProfile } from '../../core';
 import { ClientConfig, StyleConfig } from '../../core/types/AppData';
-export declare const getClientCustomizations: (clientStyleProfile: ClientStyleProfile, mode: PaletteMode, styleConfig?: StyleConfig) => Customizations;
+export declare const getClientCustomizations: (clientStyleProfile: ClientStyleProfile, mode: PaletteMode, styleConfig?: StyleConfig, requestedMode?: ClientStyleProfile["mode"]) => Customizations;
 export declare const getClientComponentOverrides: (theme: Theme, clientStyleProfile: ClientStyleProfile, clientConfig?: ClientConfig) => {
     components: {
         MuiCard?: {

package/dist/common/utils/Theme.es.js

@@ -1,5 +1,5 @@
-import { alpha as y, darken as m, lighten as g } from "@mui/material";
-var R = [
+import { alpha as h, darken as y, lighten as b } from "@mui/material";
+var x = [
   "fontFamily",
   "h1",
   "h2",
@@ -11,7 +11,7 @@ var R = [
   "subtitle1",
   "subtitle2",
   "tiny"
-], b = [
+], v = [
   {
     key: "primary",
     override: "primary_color",
@@ -48,54 +48,54 @@ var R = [
     light: "success_color",
     dark: "success_color_dark"
   }
-], h = [...b, {
+], O = [...v, {
   key: "grey",
   override: "neutral_color",
   light: "neutral_color",
   dark: "neutral_color_dark"
-}], C = (r, s, t) => {
-  const i = s === "dark", n = {};
-  for (const { key: u, override: l, light: v, dark: O } of h) {
-    const k = t?.[l] ?? r?.[i ? O : v];
-    k && (n[u] = k);
+}], T = (r, t, a, i) => {
+  const d = t === "dark", s = i ?? r?.mode ?? t, e = {};
+  for (const { key: k, override: R, light: C, dark: f } of O) {
+    const g = a?.[R] ?? r?.[d ? f : C];
+    g && (e[k] = g);
   }
-  const a = (u) => i ? { dark: u } : { light: u }, e = t?.background_color ?? r?.background_color, c = t?.paper_color ?? r?.paper_color;
-  (e || c) && (n.background = {
-    ...e && { default: a(e) },
-    ...c && { paper: a(c) }
+  const p = d && s !== "browser", _ = (k) => p ? { dark: k } : { light: k }, n = a?.background_color ?? r?.background_color, c = a?.paper_color ?? r?.paper_color;
+  (n || c) && (e.background = {
+    ...n && { default: _(n) },
+    ...c && { paper: _(c) }
   });
-  const _ = t?.font_name || r?.body_font_name || r?.system_font, d = t?.header_font_name || r?.header_font_name, p = t?.use_glass ?? r?.use_glass, o = t?.corner_radius ?? r?.card_corner_radius;
+  const o = a?.font_name || r?.body_font_name || r?.system_font, u = a?.header_font_name || r?.header_font_name, l = a?.use_glass ?? r?.use_glass, m = a?.corner_radius ?? r?.card_corner_radius;
   return {
-    ...Object.keys(n).length > 0 && { paletteOptions: n },
-    ...(_ || d) && { typographyOptions: {
-      ..._ && { fontFamily: _ },
-      ...d && { headerFontFamily: d }
+    ...Object.keys(e).length > 0 && { paletteOptions: e },
+    ...(o || u) && { typographyOptions: {
+      ...o && { fontFamily: o },
+      ...u && { headerFontFamily: u }
     } },
-    ...p !== void 0 && { styleOptions: { useGlass: p } },
-    ...o !== void 0 && { shapeOptions: { borderRadius: o } }
+    ...l !== void 0 && { styleOptions: { useGlass: l } },
+    ...m !== void 0 && { shapeOptions: { borderRadius: m } }
   };
-}, x = (r, s, t) => {
-  const i = t?.master?.style, n = {
+}, $ = (r, t, a) => {
+  const i = a?.master?.style, d = {
     MuiTabs: { styleOverrides: { indicator: { backgroundColor: r.palette.primary.light } } },
     MuiPickersCalendarHeader: { styleOverrides: { switchViewButton: {
       color: r.palette.primary.lighter,
-      "&:hover": { backgroundColor: y(r.palette.primary.light, 0.1) }
+      "&:hover": { backgroundColor: h(r.palette.primary.light, 0.1) }
     } } }
-  }, a = s?.button_corner_radius, e = i?.corner_radius ?? s?.card_corner_radius;
+  }, s = t?.button_corner_radius, e = i?.corner_radius ?? t?.card_corner_radius;
   return { components: {
-    ...n,
-    ...a !== void 0 && {
+    ...d,
+    ...s !== void 0 && {
       MuiButton: { styleOverrides: { root: {
-        borderRadius: `${a}px`,
+        borderRadius: `${s}px`,
         textTransform: "none"
       } } },
       MuiIconButton: { styleOverrides: { root: {
-        borderRadius: `${a}px`,
-        minWidth: a,
-        minHeight: a
+        borderRadius: `${s}px`,
+        minWidth: s,
+        minHeight: s
       } } },
       MuiToggleButton: { styleOverrides: { root: {
-        borderRadius: `${a}px`,
+        borderRadius: `${s}px`,
         textTransform: "none"
       } } }
     },
@@ -104,57 +104,57 @@ var R = [
       MuiPaper: { styleOverrides: { rounded: { borderRadius: `${e}px` } } }
     }
   } };
-}, M = (r, s) => {
-  const t = s === "dark", i = {};
-  for (const { key: n, light: a, dark: e } of h) {
-    const c = r?.[t ? e : a];
-    c && (i[n] = c);
+}, w = (r, t) => {
+  const a = t === "dark", i = {};
+  for (const { key: d, light: s, dark: e } of O) {
+    const p = r?.[a ? e : s];
+    p && (i[d] = p);
   }
   return i;
-}, T = (r, s, t) => {
-  const i = r.palette.mode === "dark", n = (t?.master?.style?.font_name || s?.body_font_name || s?.system_font) ?? r.typography.fontFamily, a = (o, u) => o ? {
-    lighter: g(o, 0.5),
-    light: g(o, 0.25),
+}, F = (r, t, a) => {
+  const i = r.palette.mode === "dark", d = (a?.master?.style?.font_name || t?.body_font_name || t?.system_font) ?? r.typography.fontFamily, s = (o, u) => o ? {
+    lighter: b(o, 0.5),
+    light: b(o, 0.25),
     main: o,
-    dark: m(o, 0.25),
-    darker: m(o, 0.5)
-  } : u, e = Object.fromEntries(b.map(({ key: o, light: u, dark: l }) => [o, a(s?.[i ? l : u], r.palette[o])])), c = Object.fromEntries(R.map((o) => [o, o === "fontFamily" ? n : { fontFamily: n }])), _ = {
+    dark: y(o, 0.25),
+    darker: y(o, 0.5)
+  } : u, e = Object.fromEntries(v.map(({ key: o, light: u, dark: l }) => [o, s(t?.[i ? l : u], r.palette[o])])), p = Object.fromEntries(x.map((o) => [o, o === "fontFamily" ? d : { fontFamily: d }])), _ = {
     MuiTabs: { styleOverrides: { indicator: { backgroundColor: e.primary.light } } },
     MuiPickersCalendarHeader: { styleOverrides: { switchViewButton: {
       color: e.primary.lighter,
-      "&:hover": { backgroundColor: y(e.primary.light, 0.1) }
+      "&:hover": { backgroundColor: h(e.primary.light, 0.1) }
     } } }
-  }, d = s?.button_corner_radius, p = s?.card_corner_radius;
+  }, n = t?.button_corner_radius, c = t?.card_corner_radius;
   return {
-    typography: c,
+    typography: p,
     palette: e,
     components: {
       ..._,
-      ...d && {
+      ...n && {
         MuiButton: { styleOverrides: { root: {
-          borderRadius: `${d}px`,
+          borderRadius: `${n}px`,
           textTransform: "none"
         } } },
         MuiIconButton: { styleOverrides: { root: {
-          borderRadius: `${d}px`,
-          minWidth: d,
-          minHeight: d
+          borderRadius: `${n}px`,
+          minWidth: n,
+          minHeight: n
         } } },
         MuiToggleButton: { styleOverrides: { root: {
-          borderRadius: `${d}px`,
+          borderRadius: `${n}px`,
           textTransform: "none"
         } } }
       },
-      ...p && { MuiCard: { styleOverrides: { root: { borderRadius: `${p}px` } } } },
-      ...p && { MuiPaper: { styleOverrides: { rounded: { borderRadius: `${p}px` } } } }
+      ...c && { MuiCard: { styleOverrides: { root: { borderRadius: `${c}px` } } } },
+      ...c && { MuiPaper: { styleOverrides: { rounded: { borderRadius: `${c}px` } } } }
     }
   };
 };
 export {
-  x as getClientComponentOverrides,
-  C as getClientCustomizations,
-  M as getClientPaletteOptions,
-  T as getClientTheme
+  $ as getClientComponentOverrides,
+  T as getClientCustomizations,
+  w as getClientPaletteOptions,
+  F as getClientTheme
 };
 
 //# sourceMappingURL=Theme.es.js.map

package/dist/common/utils/Theme.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"Theme.es.js","names":[],"sources":["../../../src/common/utils/Theme.ts"],"sourcesContent":["import { alpha, darken, lighten, PaletteColor, PaletteMode, Theme } from '@mui/material'\nimport type { Customizations } from '@mxenabled/mxui'\n\nimport type { ClientStyleProfile } from '../../core'\nimport { ClientConfig, StyleConfig } from '../../core/types/AppData'\n\ntype PaletteOptions = NonNullable<Customizations['paletteOptions']>\ntype ModeColorOptions = Partial<NonNullable<NonNullable<PaletteOptions['background']>['default']>>\n\nconst TYPOGRAPHY_VARIANTS = [\n  'fontFamily',\n  'h1',\n  'h2',\n  'h3',\n  'body1',\n  'body2',\n  'button',\n  'caption',\n  'subtitle1',\n  'subtitle2',\n  'tiny',\n] as const\n\nconst PALETTE_CONFIG = [\n  { key: 'primary', override: 'primary_color', light: 'primary_color', dark: 'primary_color_dark' },\n  {\n    key: 'secondary',\n    override: 'secondary_color',\n    light: 'secondary_color',\n    dark: 'secondary_color_dark',\n  },\n  { key: 'error', override: 'error_color', light: 'error_color', dark: 'error_color_dark' },\n  { key: 'warning', override: 'warning_color', light: 'warning_color', dark: 'warning_color_dark' },\n  { key: 'info', override: 'info_color', light: 'info_color', dark: 'info_color_dark' },\n  { key: 'success', override: 'success_color', light: 'success_color', dark: 'success_color_dark' },\n] as const\n\nconst SEED_CONFIG = [\n  ...PALETTE_CONFIG,\n  { key: 'grey', override: 'neutral_color', light: 'neutral_color', dark: 'neutral_color_dark' },\n] as const\n\nexport const getClientCustomizations = (\n  clientStyleProfile: ClientStyleProfile,\n  mode: PaletteMode,\n  styleConfig?: StyleConfig,\n): Customizations => {\n  const isDark = mode === 'dark'\n\n  const paletteOptions: PaletteOptions = {}\n  for (const { key, override, light, dark } of SEED_CONFIG) {\n    const color = styleConfig?.[override] ?? clientStyleProfile?.[isDark ? dark : light]\n    if (color) paletteOptions[key] = color\n  }\n\n  const asModeColor = (color: string): ModeColorOptions =>\n    isDark ? { dark: color } : { light: color }\n  const backgroundColor = styleConfig?.background_color ?? clientStyleProfile?.background_color\n  const paperColor = styleConfig?.paper_color ?? clientStyleProfile?.paper_color\n  if (backgroundColor || paperColor) {\n    paletteOptions.background = {\n      ...(backgroundColor && { default: asModeColor(backgroundColor) }),\n      ...(paperColor && { paper: asModeColor(paperColor) }),\n    } as PaletteOptions['background']\n  }\n\n  const fontFamily =\n    styleConfig?.font_name || clientStyleProfile?.body_font_name || clientStyleProfile?.system_font\n  const headerFontFamily = styleConfig?.header_font_name || clientStyleProfile?.header_font_name\n\n  const useGlass = styleConfig?.use_glass ?? clientStyleProfile?.use_glass\n  const borderRadius = styleConfig?.corner_radius ?? clientStyleProfile?.card_corner_radius\n\n  return {\n    ...(Object.keys(paletteOptions).length > 0 && { paletteOptions }),\n    ...((fontFamily || headerFontFamily) && {\n      typographyOptions: {\n        ...(fontFamily && { fontFamily }),\n        ...(headerFontFamily && { headerFontFamily }),\n      },\n    }),\n    ...(useGlass !== undefined && { styleOptions: { useGlass } }),\n    ...(borderRadius !== undefined && { shapeOptions: { borderRadius } }),\n  }\n}\n\nexport const getClientComponentOverrides = (\n  theme: Theme,\n  clientStyleProfile: ClientStyleProfile,\n  clientConfig?: ClientConfig,\n) => {\n  const styleConfig = clientConfig?.master?.style\n\n  const baseComponents = {\n    MuiTabs: {\n      styleOverrides: {\n        indicator: { backgroundColor: theme.palette.primary.light },\n      },\n    },\n    MuiPickersCalendarHeader: {\n      styleOverrides: {\n        switchViewButton: {\n          color: theme.palette.primary.lighter,\n          '&:hover': { backgroundColor: alpha(theme.palette.primary.light, 0.1) },\n        },\n      },\n    },\n  }\n\n  const buttonRadius = clientStyleProfile?.button_corner_radius\n  const cardRadius = styleConfig?.corner_radius ?? clientStyleProfile?.card_corner_radius\n\n  const components = {\n    ...baseComponents,\n    ...(buttonRadius !== undefined && {\n      MuiButton: {\n        styleOverrides: {\n          root: { borderRadius: `${buttonRadius}px`, textTransform: 'none' },\n        },\n      },\n      MuiIconButton: {\n        styleOverrides: {\n          root: {\n            borderRadius: `${buttonRadius}px`,\n            minWidth: buttonRadius,\n            minHeight: buttonRadius,\n          },\n        },\n      },\n      MuiToggleButton: {\n        styleOverrides: {\n          root: { borderRadius: `${buttonRadius}px`, textTransform: 'none' },\n        },\n      },\n    }),\n    ...(cardRadius !== undefined && {\n      MuiCard: {\n        styleOverrides: { root: { borderRadius: `${cardRadius}px` } },\n      },\n      MuiPaper: {\n        styleOverrides: {\n          rounded: { borderRadius: `${cardRadius}px` },\n        },\n      },\n    }),\n  }\n\n  return { components }\n}\n\n/** @deprecated Use `getClientCustomizations` and pass the result to `createMXTheme` */\nexport const getClientPaletteOptions = (\n  clientStyleProfile: ClientStyleProfile,\n  mode: PaletteMode,\n): Record<string, string> => {\n  const isDark = mode === 'dark'\n  const options: Record<string, string> = {}\n\n  for (const { key, light, dark } of SEED_CONFIG) {\n    const color = clientStyleProfile?.[isDark ? dark : light] as string | undefined\n    if (color) options[key] = color\n  }\n\n  return options\n}\n\n/** @deprecated Build the theme with `getClientCustomizations` + `createMXTheme` and merge `getClientComponentOverrides` on top */\nexport const getClientTheme = (\n  theme: Theme,\n  clientStyleProfile: ClientStyleProfile,\n  clientConfig?: ClientConfig,\n) => {\n  const isDark = theme.palette.mode === 'dark'\n  const font =\n    (clientConfig?.master?.style?.font_name ||\n      clientStyleProfile?.body_font_name ||\n      clientStyleProfile?.system_font) ??\n    theme.typography.fontFamily\n\n  const generatePalette = (color: string | undefined, defaultColor: PaletteColor) =>\n    color\n      ? {\n          lighter: lighten(color, 0.5),\n          light: lighten(color, 0.25),\n          main: color,\n          dark: darken(color, 0.25),\n          darker: darken(color, 0.5),\n        }\n      : defaultColor\n\n  const palette = Object.fromEntries(\n    PALETTE_CONFIG.map(({ key, light, dark }) => [\n      key,\n      generatePalette(\n        clientStyleProfile?.[isDark ? dark : light] as string | undefined,\n        theme.palette[key],\n      ),\n    ]),\n  )\n\n  const typography = Object.fromEntries(\n    TYPOGRAPHY_VARIANTS.map((variant) => [\n      variant,\n      variant === 'fontFamily' ? font : { fontFamily: font },\n    ]),\n  )\n\n  const baseComponents = {\n    MuiTabs: {\n      styleOverrides: {\n        indicator: { backgroundColor: palette.primary.light },\n      },\n    },\n    MuiPickersCalendarHeader: {\n      styleOverrides: {\n        switchViewButton: {\n          color: palette.primary.lighter,\n          '&:hover': { backgroundColor: alpha(palette.primary.light, 0.1) },\n        },\n      },\n    },\n  }\n\n  const buttonRadius = clientStyleProfile?.button_corner_radius\n  const cardRadius = clientStyleProfile?.card_corner_radius\n\n  const components = {\n    ...baseComponents,\n    ...(buttonRadius && {\n      MuiButton: {\n        styleOverrides: {\n          root: { borderRadius: `${buttonRadius}px`, textTransform: 'none' },\n        },\n      },\n      MuiIconButton: {\n        styleOverrides: {\n          root: {\n            borderRadius: `${buttonRadius}px`,\n            minWidth: buttonRadius,\n            minHeight: buttonRadius,\n          },\n        },\n      },\n      MuiToggleButton: {\n        styleOverrides: {\n          root: { borderRadius: `${buttonRadius}px`, textTransform: 'none' },\n        },\n      },\n    }),\n    ...(cardRadius && {\n      MuiCard: {\n        styleOverrides: { root: { borderRadius: `${cardRadius}px` } },\n      },\n    }),\n    ...(cardRadius && {\n      MuiPaper: {\n        styleOverrides: {\n          rounded: { borderRadius: `${cardRadius}px` },\n        },\n      },\n    }),\n  }\n\n  return { typography, palette, components }\n}\n"],"mappings":"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"}
+{"version":3,"file":"Theme.es.js","names":[],"sources":["../../../src/common/utils/Theme.ts"],"sourcesContent":["import { alpha, darken, lighten, PaletteColor, PaletteMode, Theme } from '@mui/material'\nimport type { Customizations } from '@mxenabled/mxui'\n\nimport type { ClientStyleProfile } from '../../core'\nimport { ClientConfig, StyleConfig } from '../../core/types/AppData'\n\ntype PaletteOptions = NonNullable<Customizations['paletteOptions']>\ntype ModeColorOptions = Partial<NonNullable<NonNullable<PaletteOptions['background']>['default']>>\n\nconst TYPOGRAPHY_VARIANTS = [\n  'fontFamily',\n  'h1',\n  'h2',\n  'h3',\n  'body1',\n  'body2',\n  'button',\n  'caption',\n  'subtitle1',\n  'subtitle2',\n  'tiny',\n] as const\n\nconst PALETTE_CONFIG = [\n  { key: 'primary', override: 'primary_color', light: 'primary_color', dark: 'primary_color_dark' },\n  {\n    key: 'secondary',\n    override: 'secondary_color',\n    light: 'secondary_color',\n    dark: 'secondary_color_dark',\n  },\n  { key: 'error', override: 'error_color', light: 'error_color', dark: 'error_color_dark' },\n  { key: 'warning', override: 'warning_color', light: 'warning_color', dark: 'warning_color_dark' },\n  { key: 'info', override: 'info_color', light: 'info_color', dark: 'info_color_dark' },\n  { key: 'success', override: 'success_color', light: 'success_color', dark: 'success_color_dark' },\n] as const\n\nconst SEED_CONFIG = [\n  ...PALETTE_CONFIG,\n  { key: 'grey', override: 'neutral_color', light: 'neutral_color', dark: 'neutral_color_dark' },\n] as const\n\nexport const getClientCustomizations = (\n  clientStyleProfile: ClientStyleProfile,\n  mode: PaletteMode,\n  styleConfig?: StyleConfig,\n  requestedMode?: ClientStyleProfile['mode'],\n): Customizations => {\n  const isDark = mode === 'dark'\n  const requested = requestedMode ?? clientStyleProfile?.mode ?? mode\n\n  const paletteOptions: PaletteOptions = {}\n  for (const { key, override, light, dark } of SEED_CONFIG) {\n    const color = styleConfig?.[override] ?? clientStyleProfile?.[isDark ? dark : light]\n    if (color) paletteOptions[key] = color\n  }\n\n  const useDarkSlot = isDark && requested !== 'browser'\n  const asModeColor = (color: string): ModeColorOptions =>\n    useDarkSlot ? { dark: color } : { light: color }\n  const backgroundColor = styleConfig?.background_color ?? clientStyleProfile?.background_color\n  const paperColor = styleConfig?.paper_color ?? clientStyleProfile?.paper_color\n  if (backgroundColor || paperColor) {\n    paletteOptions.background = {\n      ...(backgroundColor && { default: asModeColor(backgroundColor) }),\n      ...(paperColor && { paper: asModeColor(paperColor) }),\n    } as PaletteOptions['background']\n  }\n\n  const fontFamily =\n    styleConfig?.font_name || clientStyleProfile?.body_font_name || clientStyleProfile?.system_font\n  const headerFontFamily = styleConfig?.header_font_name || clientStyleProfile?.header_font_name\n\n  const useGlass = styleConfig?.use_glass ?? clientStyleProfile?.use_glass\n  const borderRadius = styleConfig?.corner_radius ?? clientStyleProfile?.card_corner_radius\n\n  return {\n    ...(Object.keys(paletteOptions).length > 0 && { paletteOptions }),\n    ...((fontFamily || headerFontFamily) && {\n      typographyOptions: {\n        ...(fontFamily && { fontFamily }),\n        ...(headerFontFamily && { headerFontFamily }),\n      },\n    }),\n    ...(useGlass !== undefined && { styleOptions: { useGlass } }),\n    ...(borderRadius !== undefined && { shapeOptions: { borderRadius } }),\n  }\n}\n\nexport const getClientComponentOverrides = (\n  theme: Theme,\n  clientStyleProfile: ClientStyleProfile,\n  clientConfig?: ClientConfig,\n) => {\n  const styleConfig = clientConfig?.master?.style\n\n  const baseComponents = {\n    MuiTabs: {\n      styleOverrides: {\n        indicator: { backgroundColor: theme.palette.primary.light },\n      },\n    },\n    MuiPickersCalendarHeader: {\n      styleOverrides: {\n        switchViewButton: {\n          color: theme.palette.primary.lighter,\n          '&:hover': { backgroundColor: alpha(theme.palette.primary.light, 0.1) },\n        },\n      },\n    },\n  }\n\n  const buttonRadius = clientStyleProfile?.button_corner_radius\n  const cardRadius = styleConfig?.corner_radius ?? clientStyleProfile?.card_corner_radius\n\n  const components = {\n    ...baseComponents,\n    ...(buttonRadius !== undefined && {\n      MuiButton: {\n        styleOverrides: {\n          root: { borderRadius: `${buttonRadius}px`, textTransform: 'none' },\n        },\n      },\n      MuiIconButton: {\n        styleOverrides: {\n          root: {\n            borderRadius: `${buttonRadius}px`,\n            minWidth: buttonRadius,\n            minHeight: buttonRadius,\n          },\n        },\n      },\n      MuiToggleButton: {\n        styleOverrides: {\n          root: { borderRadius: `${buttonRadius}px`, textTransform: 'none' },\n        },\n      },\n    }),\n    ...(cardRadius !== undefined && {\n      MuiCard: {\n        styleOverrides: { root: { borderRadius: `${cardRadius}px` } },\n      },\n      MuiPaper: {\n        styleOverrides: {\n          rounded: { borderRadius: `${cardRadius}px` },\n        },\n      },\n    }),\n  }\n\n  return { components }\n}\n\n/** @deprecated Use `getClientCustomizations` and pass the result to `createMXTheme` */\nexport const getClientPaletteOptions = (\n  clientStyleProfile: ClientStyleProfile,\n  mode: PaletteMode,\n): Record<string, string> => {\n  const isDark = mode === 'dark'\n  const options: Record<string, string> = {}\n\n  for (const { key, light, dark } of SEED_CONFIG) {\n    const color = clientStyleProfile?.[isDark ? dark : light] as string | undefined\n    if (color) options[key] = color\n  }\n\n  return options\n}\n\n/** @deprecated Build the theme with `getClientCustomizations` + `createMXTheme` and merge `getClientComponentOverrides` on top */\nexport const getClientTheme = (\n  theme: Theme,\n  clientStyleProfile: ClientStyleProfile,\n  clientConfig?: ClientConfig,\n) => {\n  const isDark = theme.palette.mode === 'dark'\n  const font =\n    (clientConfig?.master?.style?.font_name ||\n      clientStyleProfile?.body_font_name ||\n      clientStyleProfile?.system_font) ??\n    theme.typography.fontFamily\n\n  const generatePalette = (color: string | undefined, defaultColor: PaletteColor) =>\n    color\n      ? {\n          lighter: lighten(color, 0.5),\n          light: lighten(color, 0.25),\n          main: color,\n          dark: darken(color, 0.25),\n          darker: darken(color, 0.5),\n        }\n      : defaultColor\n\n  const palette = Object.fromEntries(\n    PALETTE_CONFIG.map(({ key, light, dark }) => [\n      key,\n      generatePalette(\n        clientStyleProfile?.[isDark ? dark : light] as string | undefined,\n        theme.palette[key],\n      ),\n    ]),\n  )\n\n  const typography = Object.fromEntries(\n    TYPOGRAPHY_VARIANTS.map((variant) => [\n      variant,\n      variant === 'fontFamily' ? font : { fontFamily: font },\n    ]),\n  )\n\n  const baseComponents = {\n    MuiTabs: {\n      styleOverrides: {\n        indicator: { backgroundColor: palette.primary.light },\n      },\n    },\n    MuiPickersCalendarHeader: {\n      styleOverrides: {\n        switchViewButton: {\n          color: palette.primary.lighter,\n          '&:hover': { backgroundColor: alpha(palette.primary.light, 0.1) },\n        },\n      },\n    },\n  }\n\n  const buttonRadius = clientStyleProfile?.button_corner_radius\n  const cardRadius = clientStyleProfile?.card_corner_radius\n\n  const components = {\n    ...baseComponents,\n    ...(buttonRadius && {\n      MuiButton: {\n        styleOverrides: {\n          root: { borderRadius: `${buttonRadius}px`, textTransform: 'none' },\n        },\n      },\n      MuiIconButton: {\n        styleOverrides: {\n          root: {\n            borderRadius: `${buttonRadius}px`,\n            minWidth: buttonRadius,\n            minHeight: buttonRadius,\n          },\n        },\n      },\n      MuiToggleButton: {\n        styleOverrides: {\n          root: { borderRadius: `${buttonRadius}px`, textTransform: 'none' },\n        },\n      },\n    }),\n    ...(cardRadius && {\n      MuiCard: {\n        styleOverrides: { root: { borderRadius: `${cardRadius}px` } },\n      },\n    }),\n    ...(cardRadius && {\n      MuiPaper: {\n        styleOverrides: {\n          rounded: { borderRadius: `${cardRadius}px` },\n        },\n      },\n    }),\n  }\n\n  return { typography, palette, components }\n}\n"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mx-cartographer/experiences",
-  "version": "9.4.9",
+  "version": "9.4.10-alpha.al0",
   "description": "Library containing experience widgets",
   "author": "MX",
   "license": "MIT",