@shopgate/engage 7.32.0-beta.7 → 7.32.0-beta.9

package/styles/theme/createTheme/createThemeFromColorScheme.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"createThemeFromColorScheme.d.ts","sourceRoot":"","sources":["../../../../styles/theme/createTheme/createThemeFromColorScheme.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,kBAAkB,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAcpE;;;;;GAKG;AACH,eAAO,MAAM,KAAK,GAChB,OAAO,MAAM,EACb,aAAa,MAAM,GAAG,MAAM,KAC3B,MAAkH,CAAC;AAEtH;;;;;GAKG;AACH,eAAO,MAAM,OAAO,GAClB,OAAO,MAAM,EACb,cAAa,MAAM,GAAG,MAAY,KACjC,MAAuF,CAAC;AAE3F;;;;;GAKG;AACH,eAAO,MAAM,MAAM,GACjB,OAAO,MAAM,EACb,cAAa,MAAM,GAAG,MAAY,KACjC,MAAuF,CAAC;AAE3F;;;;;GAKG;AACH,eAAO,MAAM,aAAa,GACxB,OAAO,MAAM,KACZ,MAA4D,CAAC;AAEhE;;;;GAIG;AACH,QAAA,MAAM,0BAA0B,GAAI,aAAa,kBAAkB,KAAG,gBA4BrE,CAAC;AAEF,eAAe,0BAA0B,CAAC"}
+{"version":3,"file":"createThemeFromColorScheme.d.ts","sourceRoot":"","sources":["../../../../styles/theme/createTheme/createThemeFromColorScheme.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,kBAAkB,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAcpE;;;;;GAKG;AACH,eAAO,MAAM,KAAK,GAChB,OAAO,MAAM,EACb,aAAa,MAAM,GAAG,MAAM,KAC3B,MAAkH,CAAC;AAEtH;;;;;GAKG;AACH,eAAO,MAAM,OAAO,GAClB,OAAO,MAAM,EACb,cAAa,MAAM,GAAG,MAAY,KACjC,MAAuF,CAAC;AAE3F;;;;;GAKG;AACH,eAAO,MAAM,MAAM,GACjB,OAAO,MAAM,EACb,cAAa,MAAM,GAAG,MAAY,KACjC,MAAuF,CAAC;AAE3F;;;;;GAKG;AACH,eAAO,MAAM,aAAa,GACxB,OAAO,MAAM,KACZ,MAA4D,CAAC;AAEhE;;;;;;GAMG;AACH,QAAA,MAAM,0BAA0B,GAC9B,aAAa,kBAAkB,EAC/B,eAAe,MAAM,KACpB,gBA4BF,CAAC;AAEF,eAAe,0BAA0B,CAAC"}

package/styles/theme/createTheme/createThemeFromColorScheme.js

@@ -50,9 +50,11 @@ export const contrastColor = color => `oklch(from ${color} var(--__l) 0 h / var(
 /**
  * Creates a theme object for a given color scheme (light or dark).
  * @param colorScheme The color scheme options.
+ * @param cssVarPrefix The theme's css variable prefix. Typography references some of the properties
+ * that are generated from it later, so it has to compose the same names.
  * @returns A theme object for the given color scheme.
  */
-const createThemeFromColorScheme = colorScheme => {
+const createThemeFromColorScheme = (colorScheme, cssVarPrefix) => {
   const {
     palette: paletteInput = {},
     typography: typographyInput = {},
@@ -60,7 +62,7 @@ const createThemeFromColorScheme = colorScheme => {
     shape: shapeInput = {}
   } = colorScheme;
   const palette = createPalette(paletteInput);
-  const typography = createTypography(palette, typographyInput);
+  const typography = createTypography(palette, typographyInput, cssVarPrefix);
   const components = createComponents(componentsInput);
   const shape = createShape(shapeInput);
   const theme = {

package/styles/theme/createTheme/createTypography.d.ts

@@ -51,5 +51,6 @@ export interface TypographyOptions
 
 export default function createTypography(
   palette: Palette,
-  typography: TypographyOptions | ((palette: Palette) => TypographyOptions)
+  typography: TypographyOptions | ((palette: Palette) => TypographyOptions),
+  cssVarPrefix?: string
 ): Typography;

package/styles/theme/createTheme/createTypography.js

@@ -1,19 +1,41 @@
 import _merge from "lodash/merge";
-import { isDev } from '@shopgate/engage/core/helpers';
+// Imported from the defining modules rather than a barrel: this module runs at import time in
+// every spec that touches the theme, and specs that replace a barrel with a partial mock would
+// leave these undefined.
+import { isDev } from '@shopgate/pwa-common/helpers/environment';
+import { themeConfig } from '@shopgate/pwa-common/helpers/config';
+const {
+  fontWeight: buttonFontWeight = 600,
+  textTransform: buttonTextTransform
+} = themeConfig?.variables?.buttonBase ?? {};
 const caseAllCaps = {
   textTransform: 'uppercase'
 };
+const caseButton = {
+  textTransform: buttonTextTransform === 'uppercase' ? 'uppercase' : 'none'
+};
 const defaultFontFamily = '"Roboto", "Helvetica", "Arial", sans-serif';
 
+/**
+ * Builds the prefix of the custom properties that cssVarsParser derives from the `typography` keys.
+ * Mirrors how the parser composes a name, so a theme configured with a different `cssVarPrefix`
+ * references the properties it actually emits.
+ * @param {string} cssVarPrefix The theme's css variable prefix.
+ * @returns {string} The prefix, e.g. `--sg-typography`.
+ */
+const typographyVarPrefix = cssVarPrefix => `--${cssVarPrefix ? `${cssVarPrefix}-` : ''}typography`;
+
 /**
  * Creates the typography object for the theme.
  * @param {Object} palette The theme palette.
  * @param {Object|Function} typography The typography options or a function that returns them.
+ * @param {string} [cssVarPrefix] The theme's css variable prefix, matching the one cssVarsParser
+ * generates the properties with. Defaults to the `sg` default of createTheme.
  * @returns {Object} The typography object.
  * @see @link{https://material.io/design/typography/the-type-system.html}
  * @see @link{https://material.io/design/typography/understanding-typography.html}
  */
-export default function createTypography(palette, typography) {
+export default function createTypography(palette, typography, cssVarPrefix = 'sg') {
   const {
     fontFamily = defaultFontFamily,
     // The default font size of the Material Specification.
@@ -37,6 +59,23 @@ export default function createTypography(palette, typography) {
     }
   }
   const coef = fontSize / 14;
+  const fontWeights = {
+    fontWeightLight,
+    fontWeightRegular,
+    fontWeightMedium,
+    fontWeightBold
+  };
+
+  /**
+   * Builds a reference to one of the shared font weight custom properties. The property itself is
+   * emitted by cssVarsParser from `typography.fontWeight*`, so overriding it on `:root` (admin css,
+   * live preview, an extension) cascades into every variant that uses that token. The resolved
+   * weight stays as the fallback, so the variant still renders when the property is absent.
+   * @param {string} token One of `fontWeightLight`, `fontWeightRegular`, `fontWeightMedium`,
+   * `fontWeightBold`.
+   * @returns {string} The css var reference.
+   */
+  const fontWeightVar = token => `var(${typographyVarPrefix(cssVarPrefix)}-${token}, ${fontWeights[token]})`;
 
   /**
    * Calculates a rem value for a passed pixel value.
@@ -47,34 +86,35 @@ export default function createTypography(palette, typography) {
 
   /**
    * Creates a typography variant object.
-   * @param {number} fontWeight The font weight to use for the variant.
+   * @param {string} fontWeightToken The name of the shared font weight token to use, e.g.
+   * `fontWeightBold`. The variant references it as a custom property instead of inlining its value.
    * @param {number} size Font size in pixels.
    * @param {number} lineHeight Line height as a unitless number.
    * @param {Object} casing Casing styles to apply, e.g. textTransform.
    * @returns {Object} The typography variant object.
    */
-  const buildVariant = (fontWeight, size, lineHeight, casing) => ({
+  const buildVariant = (fontWeightToken, size, lineHeight, casing) => ({
     fontFamily,
-    fontWeight,
+    fontWeight: fontWeightVar(fontWeightToken),
     fontSize: pxToRem(size),
     lineHeight,
     ...casing,
     ...allVariants
   });
   const variants = {
-    h1: buildVariant(fontWeightBold, 34, 1.15),
-    h2: buildVariant(fontWeightBold, 22, 1.3),
-    h3: buildVariant(fontWeightMedium, 20, 1.35),
-    h4: buildVariant(fontWeightMedium, 18, 1.4),
-    h5: buildVariant(fontWeightMedium, 16, 1.5),
-    h6: buildVariant(fontWeightMedium, 14, 1.5),
-    subtitle1: buildVariant(fontWeightRegular, 16, 1.75),
-    subtitle2: buildVariant(fontWeightMedium, 14, 1.57),
-    body1: buildVariant(fontWeightRegular, 16, 1.5),
-    body2: buildVariant(fontWeightRegular, 14, 1.43),
-    button: buildVariant(fontWeightMedium, 14, 1.75, caseAllCaps),
-    caption: buildVariant(fontWeightRegular, 12, 1.66),
-    overline: buildVariant(fontWeightRegular, 12, 2.66, caseAllCaps)
+    h1: buildVariant('fontWeightBold', 34, 1.15),
+    h2: buildVariant('fontWeightBold', 22, 1.3),
+    h3: buildVariant('fontWeightMedium', 20, 1.35),
+    h4: buildVariant('fontWeightMedium', 18, 1.4),
+    h5: buildVariant('fontWeightMedium', 16, 1.5),
+    h6: buildVariant('fontWeightMedium', 14, 1.5),
+    subtitle1: buildVariant('fontWeightRegular', 16, 1.75),
+    subtitle2: buildVariant('fontWeightMedium', 14, 1.57),
+    body1: buildVariant('fontWeightRegular', 16, 1.5),
+    body2: buildVariant('fontWeightRegular', 14, 1.43),
+    button: buildVariant(buttonFontWeight > fontWeightMedium ? 'fontWeightBold' : 'fontWeightMedium', 16, 1.75, caseButton),
+    caption: buildVariant('fontWeightRegular', 12, 1.66),
+    overline: buildVariant('fontWeightRegular', 12, 2.66, caseAllCaps)
   };
   return _merge({
     pxToRem,

package/styles/theme/createTheme/index.d.ts

@@ -1,6 +1,6 @@
 import { type ThemeOptions, type ThemeInternal } from './types';
-export type { Theme, BaseTheme, ThemeInternal, ThemeOptions, Breakpoint, ColorSchemeName, ColorSchemeSelectorType, PaletteColorsWithMain, } from './types';
-export { COLOR_SCHEME_NAMES } from './types';
+export type { Theme, BaseTheme, ThemeInternal, ThemeOptions, Breakpoint, ColorSchemeName, ColorSchemeMode, ColorSchemeSelectorType, PaletteColorsWithMain, } from './types';
+export { COLOR_SCHEME_NAMES, COLOR_SCHEME_SYSTEM } from './types';
 /**
  * Creates a theme object for the ThemeProvider.
  * @param options The theme options.

package/styles/theme/createTheme/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../styles/theme/createTheme/index.ts"],"names":[],"mappings":"AAUA,OAAO,EACL,KAAK,YAAY,EAGjB,KAAK,aAAa,EACnB,MAAM,SAAS,CAAC;AAEjB,YAAY,EACV,KAAK,EACL,SAAS,EACT,aAAa,EACb,YAAY,EACZ,UAAU,EACV,eAAe,EACf,uBAAuB,EACvB,qBAAqB,GACtB,MAAM,SAAS,CAAC;AAEjB,OAAO,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAE7C;;;;GAIG;AACH,eAAO,MAAM,WAAW,GAAI,UAAS,YAAiB,KAAG,aAkExD,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../styles/theme/createTheme/index.ts"],"names":[],"mappings":"AAUA,OAAO,EACL,KAAK,YAAY,EAGjB,KAAK,aAAa,EACnB,MAAM,SAAS,CAAC;AAEjB,YAAY,EACV,KAAK,EACL,SAAS,EACT,aAAa,EACb,YAAY,EACZ,UAAU,EACV,eAAe,EACf,eAAe,EACf,uBAAuB,EACvB,qBAAqB,GACtB,MAAM,SAAS,CAAC;AAEjB,OAAO,EAAE,kBAAkB,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAC;AAElE;;;;GAIG;AACH,eAAO,MAAM,WAAW,GAAI,UAAS,YAAiB,KAAG,aAkExD,CAAC"}

package/styles/theme/createTheme/index.js

@@ -9,7 +9,7 @@ import createThemeFromColorScheme from "./createThemeFromColorScheme";
 import createCssVarsForColorSchemeThemes from "./createCssVarsForColorSchemeThemes";
 import applyStyles from "./applyStyles";
 import { createGetColorSchemeSelector, createSetActiveColorScheme } from "./helpers";
-export { COLOR_SCHEME_NAMES } from "./types";
+export { COLOR_SCHEME_NAMES, COLOR_SCHEME_SYSTEM } from "./types";
 
 /**
  * Creates a theme object for the ThemeProvider.
@@ -38,7 +38,7 @@ export const createTheme = (options = {}) => {
       palette: {
         mode: type
       }
-    }, defaultScheme, scheme));
+    }, defaultScheme, scheme), cssVarPrefix);
     return acc;
   }, {});
   const getColorSchemeSelector = createGetColorSchemeSelector(colorSchemeSelector);

package/styles/theme/createTheme/types.d.ts

@@ -15,6 +15,11 @@ export type { Breakpoint } from './createBreakpoints';
 export type { PaletteColorsWithMain } from './createPalette';
 export declare const COLOR_SCHEME_NAMES: readonly ["light", "dark"];
 export type ColorSchemeName = (typeof COLOR_SCHEME_NAMES)[number];
+export declare const COLOR_SCHEME_SYSTEM = "system";
+/**
+ * A selectable color scheme: one the theme provides, or `system` to follow the operating system.
+ */
+export type ColorSchemeMode = ColorSchemeName | typeof COLOR_SCHEME_SYSTEM;
 declare const selectorTypes: readonly ["data", "class"];
 export type ColorSchemeSelectorType = (typeof selectorTypes)[number];
 type DeepPartial<T> = T extends object ? {
@@ -28,7 +33,8 @@ type DeepPartial<T> = T extends object ? {
 export type ColorSchemeOptions = Pick<ThemeOptions, 'palette' | 'typography' | 'components' | 'shape'>;
 export interface ThemeOptions {
     /**
-     * The default color scheme to use when the user has not specified a preference.
+     * The color scheme to fall back to when the configured mode resolves to a scheme this theme does
+     * not style. The scheme the app starts in comes from the app settings.
      * @default 'light'
      */
     defaultColorScheme?: ColorSchemeName;
@@ -129,7 +135,8 @@ export interface BaseTheme {
 }
 export interface Theme extends BaseTheme {
     /**
-     * The default color scheme to use when the user has not specified a preference.
+     * The color scheme to fall back to when the configured mode resolves to a scheme this theme does
+     * not style. The scheme the app starts in comes from the app settings.
      */
     defaultColorScheme?: ColorSchemeName;
     /**

package/styles/theme/createTheme/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../styles/theme/createTheme/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAC;AAC/D,OAAO,KAAK,EAAE,UAAU,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AACxE,OAAO,KAAK,EAAE,iBAAiB,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AACvF,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AACvD,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAC;AAC/C,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AACjD,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AACvC,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AACvC,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AACjD,OAAO,KAAK,EAAE,sBAAsB,EAAE,yBAAyB,EAAE,MAAM,WAAW,CAAC;AACnF,OAAO,KAAK,EAAE,4CAA4C,EAAE,MAAM,qCAAqC,CAAC;AACxG,OAAO,KAAK,EAAE,KAAK,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AACzD,OAAO,KAAK,EAAE,OAAO,EAAE,UAAU,EAAE,MAAM,WAAW,CAAC;AAErD,YAAY,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AACtD,YAAY,EAAE,qBAAqB,EAAE,MAAM,iBAAiB,CAAC;AAE7D,eAAO,MAAM,kBAAkB,4BAA6B,CAAC;AAE7D,MAAM,MAAM,eAAe,GAAG,CAAC,OAAO,kBAAkB,CAAC,CAAC,MAAM,CAAC,CAAC;AAElE,QAAA,MAAM,aAAa,4BAA6B,CAAC;AAEjD,MAAM,MAAM,uBAAuB,GAAG,CAAC,OAAO,aAAa,CAAC,CAAC,MAAM,CAAC,CAAC;AAErE,KAAK,WAAW,CAAC,CAAC,IAChB,CAAC,SAAS,MAAM,GACZ;KAAG,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,EAAE,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;CAAE,GACtC,CAAC,CAAC;AAER;;;;GAIG;AACH,MAAM,MAAM,kBAAkB,GAAG,IAAI,CAAC,YAAY,EAAE,SAAS,GAAG,YAAY,GAAG,YAAY,GAAG,OAAO,CAAC,CAAC;AAEvG,MAAM,WAAW,YAAY;IAC3B;;;OAGG;IACH,kBAAkB,CAAC,EAAE,eAAe,CAAC;IACrC;;;;;OAKG;IACH,mBAAmB,CAAC,EAAE,uBAAuB,CAAC;IAC9C;;;;OAIG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;OAEG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC,cAAc,CAAC,CAAC;IACtC;;OAEG;IACH,UAAU,CAAC,EAAE,iBAAiB,GAAG,CAAC,CAAC,OAAO,EAAE,OAAO,KAAK,iBAAiB,CAAC,CAAC;IAC3E,KAAK,CAAC,EAAE,YAAY,CAAC;IACrB;;;;;;;;;;;;;;;OAeG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC,eAAe,EAAE,WAAW,CAAC,kBAAkB,CAAC,CAAC,CAAC;IACxE;;OAEG;IACH,UAAU,CAAC,EAAE,iBAAiB,CAAC;CAChC;AAED,MAAM,WAAW,SAAS;IACxB;;OAEG;IACH,OAAO,EAAE,OAAO,CAAC;IACjB;;OAEG;IACH,UAAU,EAAE,UAAU,CAAC;IACvB;;OAEG;IACH,UAAU,EAAE,aAAa,CAAC;IAC1B,KAAK,EAAE,KAAK,CAAC;IACb;;OAEG;IACH,OAAO,EAAE,OAAO,CAAC;IACjB;;OAEG;IACH,WAAW,EAAE,MAAM,CAAC,UAAU,EAAE,MAAM,CAAC,CAAC;IACxC;;;;;OAKG;IACH,KAAK,CAAC,KAAK,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,GAAG,MAAM,GAAG,MAAM,CAAC;IAC3D;;;;;OAKG;IACH,OAAO,CAAC,KAAK,EAAE,MAAM,EAAE,WAAW,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,MAAM,CAAC;IAC9D;;;;;;OAMG;IACH,MAAM,CAAC,KAAK,EAAE,MAAM,EAAE,WAAW,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,MAAM,CAAC;IAC7D;;;;OAIG;IACH,aAAa,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;CACtC;AAED,MAAM,WAAW,KAAM,SAAQ,SAAS;IACtC;;OAEG;IACH,kBAAkB,CAAC,EAAE,eAAe,CAAC;IACrC;;OAEG;IACH,WAAW,EAAE,WAAW,CAAC;IACzB;;OAEG;IACH,OAAO,EAAE,OAAO,CAAC;IACjB;;OAEG;IACH,WAAW,EAAE,WAAW,CAAC;IACzB;;OAEG;IACH,MAAM,EAAE,MAAM,CAAC;IACf;;;;OAIG;IACH,MAAM,EAAE,MAAM,CAAC;IACf;;;;OAIG;IACH,IAAI,EAAE,IAAI,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG;QAAE,UAAU,EAAE,aAAa,CAAA;KAAC,CAAC;IACnE;;;OAGG;IACH,YAAY,EAAE,MAAM,CAAC,eAAe,EAAE,WAAW,CAAC,kBAAkB,CAAC,CAAC,CAAC;IACvE;;;;;;;;;;;;OAYG;IACH,WAAW,EAAE,WAAW,CAAC,eAAe,CAAC,CAAC;CAC3C;AAED;;;;;GAKG;AACH,MAAM,MAAM,gBAAgB,GAAG,IAAI,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG;IAAE,UAAU,EAAE,UAAU,CAAA;CAAE,CAAC;AAE1F;;;GAGG;AACH,MAAM,MAAM,iBAAiB,GAAG,MAAM,CAAC,eAAe,EAAE,gBAAgB,CAAC,CAAA;AAEzE,MAAM,MAAM,aAAa,GAAG,IAAI,CAAC,KAAK,EAAE,cAAc,CAAC,GAAG;IACxD;;OAEG;IACH,YAAY,EAAE,iBAAiB,CAAC;CACjC,GAAG,IAAI,CAAC,4CAA4C,EAAE,qBAAqB,CAAC,GAAG;IAC9E;;OAEG;IACH,sBAAsB,EAAE,sBAAsB,CAAC;IAC/C;;OAEG;IACH,oBAAoB,EAAE,yBAAyB,CAAC;CACjD,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../styles/theme/createTheme/types.ts"],"names":[],"mappings":"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"}

package/styles/theme/createTheme/types.js

@@ -1,4 +1,10 @@
 export const COLOR_SCHEME_NAMES = ['light', 'dark'];
+export const COLOR_SCHEME_SYSTEM = 'system';
+
+/**
+ * A selectable color scheme: one the theme provides, or `system` to follow the operating system.
+ */
+
 const selectorTypes = ['data', 'class'];
 
 /**

package/styles/theme/hooks/useColorScheme.d.ts

@@ -1,8 +1,8 @@
 /**
  * Provides access to the color scheme context.
  * @returns The color scheme context value, containing the current `mode`, a `setMode` function to
- * update it, and the list of `modes` the active theme actually provides.
+ * update it, and the `modes` that can be set.
  */
-declare const useColorScheme: () => import("../providers/ColorSchemeContext").ColorSchemeContextValue;
+declare const useColorScheme: () => import("..").ColorSchemeContextValue;
 export default useColorScheme;
 //# sourceMappingURL=useColorScheme.d.ts.map

package/styles/theme/hooks/useColorScheme.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useColorScheme.d.ts","sourceRoot":"","sources":["../../../../styles/theme/hooks/useColorScheme.ts"],"names":[],"mappings":"AAGA;;;;GAIG;AACH,QAAA,MAAM,cAAc,yEAAuC,CAAC;AAE5D,eAAe,cAAc,CAAC"}
+{"version":3,"file":"useColorScheme.d.ts","sourceRoot":"","sources":["../../../../styles/theme/hooks/useColorScheme.ts"],"names":[],"mappings":"AAGA;;;;GAIG;AACH,QAAA,MAAM,cAAc,4CAAuC,CAAC;AAE5D,eAAe,cAAc,CAAC"}

package/styles/theme/hooks/useColorScheme.js

@@ -4,7 +4,7 @@ import { ColorSchemeContext } from "../providers/ColorSchemeContext";
 /**
  * Provides access to the color scheme context.
  * @returns The color scheme context value, containing the current `mode`, a `setMode` function to
- * update it, and the list of `modes` the active theme actually provides.
+ * update it, and the `modes` that can be set.
  */
 const useColorScheme = () => useContext(ColorSchemeContext);
 export default useColorScheme;

package/styles/theme/hooks/useMediaQuery.d.ts

@@ -1,4 +1,11 @@
 import { type Theme } from '..';
+/**
+ * React hook to check if a media query matches the current viewport. Independent of the theme
+ * context, so it can be used by the provider that establishes it.
+ * @param query A media query string, e.g. '(min-width: 600px)'
+ * @returns Returns true if the media query matches, false otherwise.
+ */
+export declare const useMatchMedia: (query: string) => boolean;
 /**
  * @callback ThemeFn
  * @param {Theme} theme The current theme object.

package/styles/theme/hooks/useMediaQuery.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useMediaQuery.d.ts","sourceRoot":"","sources":["../../../../styles/theme/hooks/useMediaQuery.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,KAAK,EAAE,MAAM,IAAI,CAAC;AA8BhC;;;GAGG;AAEH;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,QAAA,MAAM,aAAa,GAAI,YAAY,MAAM,GAAG,CAAC,CAAC,KAAK,EAAE,KAAK,KAAK,MAAM,CAAC,KAAG,OASxE,CAAC;AAEF,eAAe,aAAa,CAAC"}
+{"version":3,"file":"useMediaQuery.d.ts","sourceRoot":"","sources":["../../../../styles/theme/hooks/useMediaQuery.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,KAAK,EAAE,MAAM,IAAI,CAAC;AAEhC;;;;;GAKG;AACH,eAAO,MAAM,aAAa,GAAI,OAAO,MAAM,KAAG,OAoB7C,CAAC;AAEF;;;GAGG;AAEH;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,QAAA,MAAM,aAAa,GAAI,YAAY,MAAM,GAAG,CAAC,CAAC,KAAK,EAAE,KAAK,KAAK,MAAM,CAAC,KAAG,OASxE,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/styles/theme/hooks/useMediaQuery.js

@@ -2,12 +2,12 @@ import "core-js/modules/es.string.replace.js";
 import { useState, useEffect } from 'react';
 import useTheme from "./useTheme";
 /**
- * React hook to check if a media query matches the current viewport.
- * Doesn't accept media query strings that start with '@media'.
+ * React hook to check if a media query matches the current viewport. Independent of the theme
+ * context, so it can be used by the provider that establishes it.
  * @param query A media query string, e.g. '(min-width: 600px)'
  * @returns Returns true if the media query matches, false otherwise.
  */
-const useMediaQueryInternal = query => {
+export const useMatchMedia = query => {
   const [match, setMatch] = useState(() => window.matchMedia(query).matches);
   useEffect(() => {
     const queryList = window.matchMedia(query);
@@ -60,9 +60,9 @@ const useMediaQueryInternal = query => {
 const useMediaQuery = queryInput => {
   const theme = useTheme();
   let query = typeof queryInput === 'function' ? queryInput(theme) : queryInput;
-  // Remove the '@media' prefix if it exists, as useMediaQueryInternal expects a plain media query.
+  // Remove the '@media' prefix if it exists, as useMatchMedia expects a plain media query.
   query = query.replace(/^@media( ?)/m, '');
-  const match = useMediaQueryInternal(query);
+  const match = useMatchMedia(query);
   return match;
 };
 export default useMediaQuery;

package/styles/theme/hooks/useTheme.js

@@ -1,5 +1,5 @@
 import { useContext } from 'react';
-import { ThemeContext } from "../providers/ThemeProvider";
+import { ThemeContext } from "../providers/ThemeContext";
 
 /**
  * Returns the theme object.

package/styles/theme/index.d.ts

@@ -1,7 +1,9 @@
 export { default as ThemeProvider } from './providers/ThemeProvider';
 export { createTheme } from './createTheme';
 export { type ShadowSize } from './createTheme/shadows';
-export type { Theme, Breakpoint, PaletteColorsWithMain, ColorSchemeName, } from './createTheme';
+export type { Variant as TypographyVariant } from './createTheme/createTypography';
+export type { Theme, Breakpoint, PaletteColorsWithMain, ColorSchemeName, ColorSchemeMode, } from './createTheme';
 export { useActiveBreakpoint, useMediaQuery, useResponsiveValue, useTheme, useColorScheme, } from './hooks';
 export { withTheme, type WithThemeProps } from './hocs';
+export type { ColorSchemeContextValue } from './providers/ColorSchemeContext';
 //# sourceMappingURL=index.d.ts.map

package/styles/theme/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../styles/theme/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,2BAA2B,CAAC;AACrE,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,uBAAuB,CAAC;AACxD,YAAY,EACV,KAAK,EAAE,UAAU,EAAE,qBAAqB,EAAE,eAAe,GAC1D,MAAM,eAAe,CAAC;AACvB,OAAO,EACL,mBAAmB,EACnB,aAAa,EACb,kBAAkB,EAClB,QAAQ,EACR,cAAc,GACf,MAAM,SAAS,CAAC;AACjB,OAAO,EAAE,SAAS,EAAE,KAAK,cAAc,EAAE,MAAM,QAAQ,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../styles/theme/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,2BAA2B,CAAC;AACrE,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,uBAAuB,CAAC;AACxD,YAAY,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,gCAAgC,CAAC;AACnF,YAAY,EACV,KAAK,EAAE,UAAU,EAAE,qBAAqB,EAAE,eAAe,EAAE,eAAe,GAC3E,MAAM,eAAe,CAAC;AACvB,OAAO,EACL,mBAAmB,EACnB,aAAa,EACb,kBAAkB,EAClB,QAAQ,EACR,cAAc,GACf,MAAM,SAAS,CAAC;AACjB,OAAO,EAAE,SAAS,EAAE,KAAK,cAAc,EAAE,MAAM,QAAQ,CAAC;AACxD,YAAY,EAAE,uBAAuB,EAAE,MAAM,gCAAgC,CAAC"}

package/styles/theme/providers/ColorSchemeContext.d.ts

@@ -1,19 +1,40 @@
-import { type Dispatch, type SetStateAction } from 'react';
-import { type ColorSchemeName } from '../createTheme';
+import { type ColorSchemeMode, type ColorSchemeName } from '../createTheme';
+/**
+ * A new mode, or an updater that receives the effective one. Null clears the visitor's pick.
+ */
+export type SetColorSchemeMode = ColorSchemeMode | null | ((current: ColorSchemeMode) => ColorSchemeMode | null);
 export interface ColorSchemeContextValue {
     /**
-     * The current color scheme (e.g., 'light' or 'dark')
+     * The mode in effect: the one the visitor picked, or the configured default while they picked
+     * none.
      */
-    mode: ColorSchemeName | null;
+    mode: ColorSchemeMode;
     /**
-     * Function to update the color scheme
+     * The mode that applies while the visitor picked none, as configured within the app settings.
      */
-    setMode: Dispatch<SetStateAction<ColorSchemeName | null>>;
+    defaultMode: ColorSchemeMode;
     /**
-     * The modes the active theme actually provides. Only these can be set - passing anything else
-     * to setMode has no effect.
+     * The color scheme that is applied - the mode resolved against the operating system and the
+     * configured default. Components style against this one.
      */
-    modes: ColorSchemeName[];
+    activeColorScheme: ColorSchemeName | null;
+    /**
+     * Whether visitors may pick a color scheme themselves. False while the app settings configure a
+     * binding color scheme, in which case a stored pick is ignored. Always true in development
+     * builds, which have no app settings to configure. A picker should render only where this is
+     * true.
+     */
+    canSelectColorScheme: boolean;
+    /**
+     * Updates the color scheme. Setting null clears the visitor's pick, so the configured default
+     * applies again. Takes effect only while `canSelectColorScheme` is true.
+     */
+    setMode: (value: SetColorSchemeMode) => void;
+    /**
+     * Everything that can be set: the color schemes the active theme styles, plus 'system'. Passing
+     * anything else to setMode has no effect.
+     */
+    modes: ColorSchemeMode[];
 }
 export declare const ColorSchemeContext: import("react").Context<ColorSchemeContextValue>;
 //# sourceMappingURL=ColorSchemeContext.d.ts.map

package/styles/theme/providers/ColorSchemeContext.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ColorSchemeContext.d.ts","sourceRoot":"","sources":["../../../../styles/theme/providers/ColorSchemeContext.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,KAAK,QAAQ,EAAE,KAAK,cAAc,EAAE,MAAM,OAAO,CAAC;AAC1E,OAAO,EAAE,KAAK,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAEtD,MAAM,WAAW,uBAAuB;IACtC;;OAEG;IACH,IAAI,EAAE,eAAe,GAAG,IAAI,CAAC;IAC7B;;OAEG;IACH,OAAO,EAAE,QAAQ,CAAC,cAAc,CAAC,eAAe,GAAG,IAAI,CAAC,CAAC,CAAC;IAC1D;;;OAGG;IACH,KAAK,EAAE,eAAe,EAAE,CAAC;CAC1B;AAED,eAAO,MAAM,kBAAkB,kDAI7B,CAAC"}
+{"version":3,"file":"ColorSchemeContext.d.ts","sourceRoot":"","sources":["../../../../styles/theme/providers/ColorSchemeContext.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,eAAe,EAAE,KAAK,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAE5E;;GAEG;AACH,MAAM,MAAM,kBAAkB,GAC1B,eAAe,GACf,IAAI,GACJ,CAAC,CAAC,OAAO,EAAE,eAAe,KAAK,eAAe,GAAG,IAAI,CAAC,CAAC;AAE3D,MAAM,WAAW,uBAAuB;IACtC;;;OAGG;IACH,IAAI,EAAE,eAAe,CAAC;IACtB;;OAEG;IACH,WAAW,EAAE,eAAe,CAAC;IAC7B;;;OAGG;IACH,iBAAiB,EAAE,eAAe,GAAG,IAAI,CAAC;IAC1C;;;;;OAKG;IACH,oBAAoB,EAAE,OAAO,CAAC;IAC9B;;;OAGG;IACH,OAAO,EAAE,CAAC,KAAK,EAAE,kBAAkB,KAAK,IAAI,CAAC;IAC7C;;;OAGG;IACH,KAAK,EAAE,eAAe,EAAE,CAAC;CAC1B;AAED,eAAO,MAAM,kBAAkB,kDAO7B,CAAC"}

package/styles/theme/providers/ColorSchemeContext.js

@@ -1,6 +1,14 @@
 import { createContext } from 'react';
+
+/**
+ * A new mode, or an updater that receives the effective one. Null clears the visitor's pick.
+ */
+
 export const ColorSchemeContext = /*#__PURE__*/createContext({
   mode: 'light',
+  defaultMode: 'light',
+  activeColorScheme: 'light',
+  canSelectColorScheme: false,
   setMode: () => undefined,
   modes: ['light']
 });

package/styles/theme/providers/ThemeContext.d.ts

@@ -0,0 +1,3 @@
+import { type Theme } from '../createTheme';
+export declare const ThemeContext: import("react").Context<Theme>;
+//# sourceMappingURL=ThemeContext.d.ts.map

package/styles/theme/providers/ThemeContext.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThemeContext.d.ts","sourceRoot":"","sources":["../../../../styles/theme/providers/ThemeContext.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,KAAK,EAAE,MAAM,gBAAgB,CAAC;AAE5C,eAAO,MAAM,YAAY,gCAAqC,CAAC"}

package/styles/theme/providers/ThemeContext.js

@@ -0,0 +1,2 @@
+import { createContext } from 'react';
+export const ThemeContext = /*#__PURE__*/createContext({});

package/styles/theme/providers/ThemeProvider.d.ts

@@ -1,6 +1,6 @@
-import { type Theme, type ThemeInternal } from '../createTheme';
+import { type ThemeInternal } from '../createTheme';
 export { ColorSchemeContext, type ColorSchemeContextValue } from './ColorSchemeContext';
-export declare const ThemeContext: import("react").Context<Theme>;
+export { ThemeContext } from './ThemeContext';
 type ThemeProviderProps = {
     /**
      * The theme object to provide to the context.

package/styles/theme/providers/ThemeProvider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ThemeProvider.d.ts","sourceRoot":"","sources":["../../../../styles/theme/providers/ThemeProvider.tsx"],"names":[],"mappings":"AAUA,OAAO,EACL,KAAK,KAAK,EAAE,KAAK,aAAa,EAC/B,MAAM,gBAAgB,CAAC;AAExB,OAAO,EAAE,kBAAkB,EAAE,KAAK,uBAAuB,EAAE,MAAM,sBAAsB,CAAC;AAExF,eAAO,MAAM,YAAY,gCAAqC,CAAC;AAwE/D,KAAK,kBAAkB,GAAG;IACxB;;OAEG;IACH,KAAK,EAAE,aAAa,CAAC;IACrB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,CAAA;mFAtEE,kBAAkB;AAwErB,wBAAmC"}
+{"version":3,"file":"ThemeProvider.d.ts","sourceRoot":"","sources":["../../../../styles/theme/providers/ThemeProvider.tsx"],"names":[],"mappings":"AAgBA,OAAO,EACgB,KAAK,aAAa,EACxC,MAAM,gBAAgB,CAAC;AAExB,OAAO,EAAE,kBAAkB,EAAE,KAAK,uBAAuB,EAAE,MAAM,sBAAsB,CAAC;AACxF,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAuH9C,KAAK,kBAAkB,GAAG;IACxB;;OAEG;IACH,KAAK,EAAE,aAAa,CAAC;IACrB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,CAAA;mFArHE,kBAAkB;AAuHrB,wBAAmC"}

package/styles/theme/providers/ThemeProvider.js

@@ -1,15 +1,22 @@
 import "core-js/modules/es.array.includes.js";
-import { createContext, memo, useCallback, useMemo, useLayoutEffect } from 'react';
+import { memo, useCallback, useEffect, useMemo, useLayoutEffect } from 'react';
+import { useSelector } from 'react-redux';
 import useLocalStorage from '@shopgate/engage/core/hooks/useLocalStorage';
 import { logger } from '@shopgate/engage/core/helpers';
 import { GlobalStyles } from '@shopgate/engage/styles';
 import { isFrontendSettingsAdminPreviewActive } from '@shopgate/engage/admin-preview/helpers';
 import { FrontendSettingsPreviewBridge } from '@shopgate/engage/admin-preview/components';
+// Imported via its module path rather than a settings barrel, to keep this module out of an import
+// cycle - the settings types reach back into the "styles/theme" barrel, which exports this file.
+import { getCanSelectColorScheme, getDefaultColorSchemeMode } from '@shopgate/engage/settings/selectors/appSettings';
 import ActiveBreakpointProvider from "./ActiveBreakpointProvider";
 import { ColorSchemeContext } from "./ColorSchemeContext";
+import { ThemeContext } from "./ThemeContext";
+import { useMatchMedia } from "../hooks/useMediaQuery";
+import { COLOR_SCHEME_SYSTEM } from "../createTheme";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export { ColorSchemeContext } from "./ColorSchemeContext";
-export const ThemeContext = /*#__PURE__*/createContext({});
+export { ThemeContext } from "./ThemeContext";
 
 /**
  * The ThemeProvider component provides the theme context to its children.
@@ -19,36 +26,71 @@ const ThemeProvider = ({
   theme
 }) => {
   // The color schemes the active theme actually provides. createTheme() can be configured with only
-  // a subset of the possible schemes (it defaults to just `light`), so `modes` and the validation
+  // a subset of the possible schemes (it defaults to just `light`), so this list and the validation
   // below are derived from the resolved theme rather than the full COLOR_SCHEME_NAMES tuple.
   // Otherwise the provider could expose and accept a scheme (e.g. `dark`) the theme doesn't style,
   // and setActiveColorScheme would flip the root selector to an unstyled scheme.
-  const modes = useMemo(() => Object.keys(theme.colorSchemes), [theme]);
-  const [activeColorScheme, setActiveColorScheme] = useLocalStorage('persistedColorScheme', {
-    initialValue: theme.defaultColorScheme,
+  const colorSchemes = useMemo(() => Object.keys(theme.colorSchemes), [theme]);
+  const defaultMode = useSelector(getDefaultColorSchemeMode);
+  const isColorSchemeSelectable = useSelector(getCanSelectColorScheme);
+
+  // Whether the merchant lets visitors choose. A binding `light` or `dark` rules a pick out, so one
+  // left over from when selecting still was allowed does not keep overriding it. Development builds
+  // have no app settings to configure at all, so both schemes stay reachable there.
+  const canSelectColorScheme = isColorSchemeSelectable || process.env.NODE_ENV === 'development';
+  const prefersDarkColorScheme = useMatchMedia('(prefers-color-scheme: dark)');
+  const systemColorScheme = prefersDarkColorScheme ? 'dark' : 'light';
+  const [pickedMode, setPersistedMode] = useLocalStorage('persistedColorScheme', {
     // The frontend settings preview runs the app in an iframe on the shop origin. Persisting the
     // color scheme there would write the admin's preview choice into the visitor's own storage and
     // outlive the preview, so the scheme is kept in memory only while previewing.
     persist: !isFrontendSettingsAdminPreviewActive()
   });
 
+  // The preview forces a scheme through the same setter to show the admin either appearance, which
+  // has to work regardless of what the previewed settings configure. It stays out of
+  // `canSelectColorScheme`, so the previewed shop offers a picker exactly where visitors get one.
+  const isPickApplied = canSelectColorScheme || isFrontendSettingsAdminPreviewActive();
+
+  // The mode the visitor picked wins where it applies, otherwise the configured one does. Resolving
+  // that on every render rather than seeding the storage with it keeps `system` following the
+  // operating system and lets the preview apply the merchant's edits live.
+  const mode = isPickApplied && pickedMode || defaultMode;
+  const resolvedColorScheme = useMemo(() => mode === COLOR_SCHEME_SYSTEM ? systemColorScheme : mode, [mode, systemColorScheme]);
+  const isSupportedColorScheme = colorSchemes.includes(resolvedColorScheme);
+  const activeColorScheme = isSupportedColorScheme ? resolvedColorScheme : theme.defaultColorScheme ?? null;
+  useEffect(() => {
+    if (isSupportedColorScheme) return;
+    logger.warn(`ThemeProvider: "${resolvedColorScheme}" is not a supported color scheme.`);
+  }, [isSupportedColorScheme, resolvedColorScheme]);
+
+  // What a picker can offer and what setMode accepts. 'system' is not a scheme the theme styles -
+  // it resolves to one above - so it is added here rather than derived from the theme.
+  const modes = useMemo(() => [].concat(colorSchemes, [COLOR_SCHEME_SYSTEM]), [colorSchemes]);
+
   // Wraps the raw storage setter, so an unsupported mode is rejected before it is persisted.
-  // Setting null is allowed and clears the stored preference.
+  // Setting null is allowed and clears the stored preference, which returns to the configured one.
   const setMode = useCallback(value => {
-    setActiveColorScheme(currentColorScheme => {
-      const nextColorScheme = typeof value === 'function' ? value(currentColorScheme) : value;
-      if (nextColorScheme !== null && !modes.includes(nextColorScheme)) {
-        logger.warn(`ThemeProvider: "${nextColorScheme}" is not a supported color scheme.`);
-        return currentColorScheme;
+    setPersistedMode(currentMode => {
+      // An updater is resolved the same way `mode` is, so it sees what the context exposes rather
+      // than the storage behind it - which holds no value yet, or one that is currently ignored.
+      const effectiveMode = isPickApplied && currentMode || defaultMode;
+      const nextMode = typeof value === 'function' ? value(effectiveMode) : value;
+      if (nextMode !== null && !modes.includes(nextMode)) {
+        logger.warn(`ThemeProvider: "${nextMode}" is not a supported color scheme.`);
+        return currentMode;
       }
-      return nextColorScheme;
+      return nextMode;
     });
-  }, [modes, setActiveColorScheme]);
+  }, [defaultMode, isPickApplied, modes, setPersistedMode]);
   const colorSchemeContextValue = useMemo(() => ({
-    mode: activeColorScheme,
+    mode,
+    defaultMode,
+    activeColorScheme,
+    canSelectColorScheme,
     setMode,
     modes
-  }), [activeColorScheme, modes, setMode]);
+  }), [mode, defaultMode, activeColorScheme, canSelectColorScheme, modes, setMode]);
   useLayoutEffect(() => {
     if (!activeColorScheme) return;
     theme.setActiveColorScheme(activeColorScheme);