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

package/settings/reducers/appSettings.js

@@ -1,6 +1,10 @@
 import _merge from "lodash/merge";
-import { produce } from 'immer';
 import { RECEIVE_APP_SETTINGS } from "../constants/appSettings";
+import { DEFAULT_IMAGE_FILL_COLOR, DEFAULT_IMAGE_FILL_TRANSPARENT, DEFAULT_IMAGE_QUALITY, DEFAULT_SHOW_INNER_SHADOW } from "../constants/imageSettings";
+// Deliberately not exported from the "helpers" barrel - they normalize values on their way into
+// the slice, which is nothing a consumer of the settings needs.
+import { toImageQuality } from "../helpers/toImageQuality";
+import { toThumborColor } from "../helpers/toThumborColor";
 const isReceiveAppSettingsAction = action => action.type === RECEIVE_APP_SETTINGS && 'settings' in action;
 
 /**
@@ -17,16 +21,58 @@ export const DEFAULT_APP_SETTINGS = {
       transition: 'fade',
       fixed: {
         borderEnabled: true
+      },
+      favorites: {
+        showCounter: true
       }
     }
   },
-  productList: {
+  product: {
     grid: {
       columns: {
-        xs: 2,
-        md: 4
+        small: 2,
+        large: 4
+      }
+    },
+    slider: {
+      slidesPerView: {
+        small: 2.3,
+        medium: 3.3,
+        large: 4.3
+      }
+    },
+    rating: {
+      showEmptyStars: false
+    },
+    card: {
+      productName: {
+        maxLines: 3
+      }
+    },
+    tile: {
+      productName: {
+        maxLines: 3
       }
     }
+  },
+  cards: {
+    style: 'shadow',
+    shadow: {
+      size: 'medium'
+    }
+  },
+  images: {
+    quality: DEFAULT_IMAGE_QUALITY,
+    // Already in the image service's format, so the unhydrated path needs no conversion.
+    fillColor: DEFAULT_IMAGE_FILL_COLOR,
+    fillTransparent: DEFAULT_IMAGE_FILL_TRANSPARENT,
+    product: {
+      ratio: {
+        width: 1,
+        height: 1
+      },
+      showInnerShadow: DEFAULT_SHOW_INNER_SHADOW
+    }
   }
 };
 
@@ -38,13 +84,35 @@ export const DEFAULT_APP_SETTINGS = {
  */
 const appSettings = (state, action = {
   type: ''
-}) => produce(state ?? DEFAULT_APP_SETTINGS, draft => {
+}) => {
   if (isReceiveAppSettingsAction(action)) {
-    // Deep merge so a partial payload (e.g. only some navigation.tabBar fields)
-    // keeps the built-in defaults for anything the source omits, rather than
-    // shallow-replacing whole branches and leaving consumers with undefined.
-    _merge(draft, action.settings);
-    draft.isHydrated = true;
+    const {
+      images
+    } = action.settings ?? {};
+
+    // Merged over the defaults rather than over the current state, so a field an incoming payload
+    // omits falls back to its default instead of keeping the value of an earlier one. The admin
+    // preview needs that: it stops sending a shadow size once the card style isn't `shadow`, and it
+    // clears a whole branch by sending a null.
+    const nextState = _merge({}, DEFAULT_APP_SETTINGS, {
+      ...action.settings,
+      // A cleared branch is mapped to undefined, which merge skips, so the defaults it started from
+      // stay in place. A null would be written into the slice like any other value.
+      images: images === null ? undefined : {
+        ...images,
+        product: images?.product ?? undefined
+      }
+    }, {
+      isHydrated: true
+    });
+
+    // Converted on the way in, so the slice holds wire ready values and every image url does not
+    // pay for it. Unconditional, because an empty string or a null reaches here like any other
+    // value - both converters are idempotent.
+    nextState.images.fillColor = toThumborColor(nextState.images.fillColor);
+    nextState.images.quality = toImageQuality(nextState.images.quality);
+    return nextState;
   }
-});
+  return state ?? DEFAULT_APP_SETTINGS;
+};
 export default appSettings;

package/settings/reducers/index.d.ts

@@ -3,10 +3,10 @@ export declare const settings: import("redux").Reducer<{
     shopSettings: Object;
     merchantSettings: Object;
     appSettings: import("../types/appSettings").AppSettingsSlice;
-}, (import("redux").UnknownAction | {
+}, ({
     type: string;
-    settings: import("../types/appSettings").AppSettings;
-}) | import("redux").Action<string>, Partial<{
+    settings: import("../types/appSettings").DeepPartial<import("../types/appSettings").AppSettings>;
+} | import("redux").UnknownAction) | import("redux").Action<string>, Partial<{
     config: Object | undefined;
     shopSettings: Object | undefined;
     merchantSettings: Object | undefined;

package/settings/selectors/appSettings.d.ts

@@ -28,6 +28,9 @@ export declare const getTabBarSettings: ((state: AppSettingsState) => {
     fixed: {
         borderEnabled: boolean;
     };
+    favorites: {
+        showCounter: boolean;
+    };
 }) & import("reselect").OutputSelectorFields<(args_0: AppSettingsSlice) => {
     variant: "fixed" | "floating";
     transition: "fade" | "slide";
@@ -36,6 +39,9 @@ export declare const getTabBarSettings: ((state: AppSettingsState) => {
     fixed: {
         borderEnabled: boolean;
     };
+    favorites: {
+        showCounter: boolean;
+    };
 }, {
     clearCache: () => void;
 }> & {
@@ -44,7 +50,71 @@ export declare const getTabBarSettings: ((state: AppSettingsState) => {
 /**
  * Selects the ProductGrid columns setting (keyed by breakpoint).
  */
-export declare const getProductGridColumns: ((state: AppSettingsState) => Partial<Record<import("../../styles/theme").Breakpoint, number>>) & import("reselect").OutputSelectorFields<(args_0: AppSettingsSlice) => Partial<Record<import("../../styles/theme").Breakpoint, number>>, {
+export declare const getProductGridColumns: ((state: AppSettingsState) => Partial<Record<import("../types/appSettings").ScreenSize, number>>) & import("reselect").OutputSelectorFields<(args_0: AppSettingsSlice) => Partial<Record<import("../types/appSettings").ScreenSize, number>>, {
+    clearCache: () => void;
+}> & {
+    clearCache: () => void;
+};
+/**
+ * Selects the ProductSlider slidesPerView setting (keyed by breakpoint).
+ */
+export declare const getProductSliderSlidesPerView: ((state: AppSettingsState) => Partial<Record<import("../types/appSettings").ScreenSize, number>>) & import("reselect").OutputSelectorFields<(args_0: AppSettingsSlice) => Partial<Record<import("../types/appSettings").ScreenSize, number>>, {
+    clearCache: () => void;
+}> & {
+    clearCache: () => void;
+};
+/**
+ * Selects whether the favorites tab bar icon shows the number of favorites within its badge.
+ */
+export declare const getShowFavoritesCounter: ((state: AppSettingsState) => boolean) & import("reselect").OutputSelectorFields<(args_0: AppSettingsSlice) => boolean, {
+    clearCache: () => void;
+}> & {
+    clearCache: () => void;
+};
+/**
+ * Selects whether rating stars are also shown for products without a rating.
+ */
+export declare const getShowEmptyRatingStars: ((state: AppSettingsState) => boolean) & import("reselect").OutputSelectorFields<(args_0: AppSettingsSlice) => boolean, {
+    clearCache: () => void;
+}> & {
+    clearCache: () => void;
+};
+/**
+ * Selects the image settings.
+ */
+export declare const getImageSettings: ((state: AppSettingsState) => import("../types/appSettings").ImageSettings) & import("reselect").OutputSelectorFields<(args_0: AppSettingsSlice) => import("../types/appSettings").ImageSettings, {
+    clearCache: () => void;
+}> & {
+    clearCache: () => void;
+};
+/**
+ * Selects the max number of lines a product card name is clamped to.
+ */
+export declare const getProductCardNameMaxLines: ((state: AppSettingsState) => number) & import("reselect").OutputSelectorFields<(args_0: AppSettingsSlice) => number, {
+    clearCache: () => void;
+}> & {
+    clearCache: () => void;
+};
+/**
+ * Selects the max number of lines a product tile name is clamped to.
+ */
+export declare const getProductTileNameMaxLines: ((state: AppSettingsState) => number) & import("reselect").OutputSelectorFields<(args_0: AppSettingsSlice) => number, {
+    clearCache: () => void;
+}> & {
+    clearCache: () => void;
+};
+/**
+ * Selects the themed card settings (style and shadow size).
+ */
+export declare const getCardSettings: ((state: AppSettingsState) => import("../types/appSettings").CardSettings) & import("reselect").OutputSelectorFields<(args_0: AppSettingsSlice) => import("../types/appSettings").CardSettings, {
+    clearCache: () => void;
+}> & {
+    clearCache: () => void;
+};
+/**
+ * Selects the effective card shadow size. `none` unless the shadow style is selected.
+ */
+export declare const getCardShadowSize: ((state: AppSettingsState) => import("../../styles").ShadowSize) & import("reselect").OutputSelectorFields<(args_0: import("../types/appSettings").CardSettings) => import("../../styles").ShadowSize, {
     clearCache: () => void;
 }> & {
     clearCache: () => void;

package/settings/selectors/appSettings.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"appSettings.d.ts","sourceRoot":"","sources":["../../../settings/selectors/appSettings.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AAG/E;;;;;GAKG;AACH,eAAO,MAAM,mBAAmB,GAAI,OAAO,gBAAgB,KAAG,gBACR,CAAC;AAEvD;;;;;GAKG;AACH,eAAO,MAAM,yBAAyB;;;;CAGrC,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;;;CAG7B,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,qBAAqB;;;;CAGjC,CAAC"}
+{"version":3,"file":"appSettings.d.ts","sourceRoot":"","sources":["../../../settings/selectors/appSettings.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AAG/E;;;;;GAKG;AACH,eAAO,MAAM,mBAAmB,GAAI,OAAO,gBAAgB,KAAG,gBACR,CAAC;AAEvD;;;;;GAKG;AACH,eAAO,MAAM,yBAAyB;;;;CAGrC,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;CAG7B,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,qBAAqB;;;;CAGjC,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,6BAA6B;;;;CAGzC,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,uBAAuB;;;;CAGnC,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,uBAAuB;;;;CAGnC,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,gBAAgB;;;;CAG5B,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,0BAA0B;;;;CAGtC,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,0BAA0B;;;;CAGtC,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,eAAe;;;;CAG3B,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,iBAAiB;;;;CAG7B,CAAC"}

package/settings/selectors/appSettings.js

@@ -25,4 +25,44 @@ export const getTabBarSettings = createSelector(getAppSettingsState, appSettings
 /**
  * Selects the ProductGrid columns setting (keyed by breakpoint).
  */
-export const getProductGridColumns = createSelector(getAppSettingsState, appSettings => appSettings.productList.grid.columns);
+export const getProductGridColumns = createSelector(getAppSettingsState, appSettings => appSettings.product.grid.columns);
+
+/**
+ * Selects the ProductSlider slidesPerView setting (keyed by breakpoint).
+ */
+export const getProductSliderSlidesPerView = createSelector(getAppSettingsState, appSettings => appSettings.product.slider.slidesPerView);
+
+/**
+ * Selects whether the favorites tab bar icon shows the number of favorites within its badge.
+ */
+export const getShowFavoritesCounter = createSelector(getAppSettingsState, appSettings => appSettings.navigation.tabBar.favorites.showCounter);
+
+/**
+ * Selects whether rating stars are also shown for products without a rating.
+ */
+export const getShowEmptyRatingStars = createSelector(getAppSettingsState, appSettings => appSettings.product.rating.showEmptyStars);
+
+/**
+ * Selects the image settings.
+ */
+export const getImageSettings = createSelector(getAppSettingsState, appSettings => appSettings.images);
+
+/**
+ * Selects the max number of lines a product card name is clamped to.
+ */
+export const getProductCardNameMaxLines = createSelector(getAppSettingsState, appSettings => appSettings.product.card.productName.maxLines);
+
+/**
+ * Selects the max number of lines a product tile name is clamped to.
+ */
+export const getProductTileNameMaxLines = createSelector(getAppSettingsState, appSettings => appSettings.product.tile.productName.maxLines);
+
+/**
+ * Selects the themed card settings (style and shadow size).
+ */
+export const getCardSettings = createSelector(getAppSettingsState, appSettings => appSettings.cards);
+
+/**
+ * Selects the effective card shadow size. `none` unless the shadow style is selected.
+ */
+export const getCardShadowSize = createSelector(getCardSettings, cards => cards.style === 'shadow' ? cards.shadow.size : 'none');

package/settings/types/appSettings.d.ts

@@ -1,15 +1,31 @@
-import type { Breakpoint } from '@shopgate/engage/styles/theme';
+import type { ShadowSize } from '@shopgate/engage/styles/theme';
+export type { ShadowSize };
+/**
+ * Recursively optional variant of `T`. The settings sources send only what a merchant configured,
+ * and the admin preview additionally prunes the fields its visibility conditions hide.
+ */
+export type DeepPartial<T> = {
+    [K in keyof T]?: T[K] extends object ? DeepPartial<T[K]> : T[K];
+};
 export interface AppSettingsState {
     settings: {
         appSettings: AppSettingsSlice;
     };
 }
 /**
- * Number of product columns to render, keyed by breakpoint. Partial: any unset
- * breakpoint cascades down to the next smaller defined value (see
- * useResponsiveValue).
+ * The merchant-facing screen sizes for the product list types. Each maps to a theme
+ * breakpoint inside the consuming hook (small → xs, medium → sm, large → md).
+ */
+export type ScreenSize = 'small' | 'medium' | 'large';
+/**
+ * A value keyed by screen size. Partial: any unset size cascades down to the next smaller
+ * defined value (see useResponsiveValue).
+ */
+export type PerScreenSize = Partial<Record<ScreenSize, number>>;
+/**
+ * Number of product columns to render, keyed by screen size.
  */
-export type ProductColumns = Partial<Record<Breakpoint, number>>;
+export type ProductColumns = PerScreenSize;
 /**
  * Settings for the ProductGrid list type.
  */
@@ -17,11 +33,162 @@ export interface ProductGridSettings {
     columns: ProductColumns;
 }
 /**
- * Settings for the various product-list types. Add a key and its own settings
- * interface per future type (e.g. slider).
+ * Name-clamping shared by the card and tile product surfaces.
+ */
+export interface ProductNameSettings {
+    /** Max number of lines the product name is clamped to before an ellipsis. */
+    maxLines: number;
+}
+/**
+ * Drop shadow of the card surface.
+ */
+export interface ShadowSettings {
+    /** Which preset elevation to draw. `none` renders no shadow at all. */
+    size: ShadowSize;
+}
+/**
+ * Number of slides to render side by side, keyed by screen size. Fractional values are allowed.
+ */
+export type SlidesPerView = PerScreenSize;
+/**
+ * Settings for the ProductSlider list type.
+ */
+export interface ProductSliderSettings {
+    slidesPerView: SlidesPerView;
+}
+/**
+ * Settings for the product rating stars.
+ */
+export interface ProductRatingSettings {
+    /**
+     * Whether rating stars are also rendered for products that have no rating yet.
+     */
+    showEmptyStars: boolean;
+}
+/**
+ * Settings for product presentation across the app.
  */
-export interface ProductListSettings {
+export interface ProductSettings {
     grid: ProductGridSettings;
+    slider: ProductSliderSettings;
+    rating: ProductRatingSettings;
+    /** Product cards (sliders, relations, live shopping). */
+    card: {
+        productName: ProductNameSettings;
+    };
+    /** Product grid tiles. */
+    tile: {
+        productName: ProductNameSettings;
+    };
+}
+/**
+ * The visual style of the card surface.
+ */
+export type CardStyle = 'shadow' | 'border' | 'flat';
+/**
+ * Settings for the themed card surface (checkout sections, address cards, sliders).
+ */
+export interface CardSettings {
+    style: CardStyle;
+    shadow: ShadowSettings;
+}
+/**
+ * An aspect ratio expressed as width and height parts. Only the proportion matters -
+ * { width: 4, height: 5 } and { width: 8, height: 10 } are equivalent.
+ */
+export interface AspectRatio {
+    /**
+     * The width part of the proportion.
+     */
+    width: number;
+    /**
+     * The height part of the proportion.
+     */
+    height: number;
+}
+/**
+ * A single image resolution requested from the image service.
+ */
+export interface ImageResolution {
+    /**
+     * Width in pixels.
+     */
+    width: number;
+    /**
+     * Height in pixels, derived from the configured aspect ratio.
+     */
+    height: number;
+}
+/**
+ * The product image contexts. pdp drives the product detail page, gallery the fullscreen gallery,
+ * and list every grid, slider, list and row tile.
+ */
+export type ProductImageContext = 'pdp' | 'gallery' | 'list';
+/**
+ * Settings for a single product image context. The pixel dimensions are not configurable - they
+ * are derived from the built-in base widths for the context (see PRODUCT_IMAGE_BASE_WIDTHS) so
+ * that image weight stays under the theme's control.
+ */
+export interface ProductImageContextSettings {
+    /**
+     * The aspect ratio images in this context are rendered at.
+     */
+    ratio: AspectRatio;
+}
+/**
+ * Settings for the product image contexts.
+ */
+export interface ProductImageSettings {
+    /**
+     * The aspect ratio applied to every context that does not override it.
+     */
+    ratio: AspectRatio;
+    /**
+     * Whether product images get an inset shadow. Applies to the image and to the placeholder that
+     * stands in for it, so both keep the same silhouette.
+     */
+    showInnerShadow: boolean;
+    /**
+     * Overrides for the product detail page.
+     */
+    pdp?: ProductImageContextSettings;
+    /**
+     * Overrides for the fullscreen gallery.
+     */
+    gallery?: ProductImageContextSettings;
+    /**
+     * Overrides for grid, slider, list and row tiles.
+     */
+    list?: ProductImageContextSettings;
+}
+/**
+ * Settings for images that are served through the image service.
+ *
+ * quality, fillColor and fillTransparent sit here rather than under product because they are not
+ * product specific - getFullImageSource applies them to every image that goes through the image
+ * service, including category images, carrier logos and page builder widget images.
+ */
+export interface ImageSettings {
+    /**
+     * Compression quality passed to the image service, 1 to 100.
+     */
+    quality: number;
+    /**
+     * The color the image service fills letterboxed areas with. A source may send any CSS color -
+     * named, hex 3/6/8, rgb(), rgba(), hsl() - or one of Thumbor's own keywords: 'auto', 'blur',
+     * 'transparent'. The value reaches the store untouched and the reducer converts it into a
+     * Thumbor color token, so everything reading this field gets a wire-ready value.
+     */
+    fillColor: string;
+    /**
+     * Thumbor's fill_transparent argument - whether transparent areas of the source image are
+     * filled too. True is what the legacy 'FFFFFF,1' config expressed.
+     */
+    fillTransparent: boolean;
+    /**
+     * Aspect ratios for the product image contexts.
+     */
+    product: ProductImageSettings;
 }
 export interface AppSettings {
     navigation: {
@@ -33,10 +200,26 @@ export interface AppSettings {
             fixed: {
                 borderEnabled: boolean;
             };
+            favorites: {
+                /**
+                 * Whether the favorites tab bar icon renders the number of favorites within its badge.
+                 */
+                showCounter: boolean;
+            };
         };
     };
-    productList: ProductListSettings;
+    product: ProductSettings;
+    /**
+     * Settings for images that are served through the image service.
+     */
+    images: ImageSettings;
+    cards: CardSettings;
 }
+/**
+ * What a settings source actually sends. Every field is optional, so the reducer fills the gaps
+ * from its defaults instead of leaving consumers with undefined.
+ */
+export type AppSettingsPayload = DeepPartial<AppSettings>;
 /**
  * The stored app settings slice. Extends the raw {@link AppSettings} values
  * with metadata that is derived by the reducer rather than supplied by a

package/settings/types/appSettings.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"appSettings.d.ts","sourceRoot":"","sources":["../../../settings/types/appSettings.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,+BAA+B,CAAC;AAEhE,MAAM,WAAW,gBAAgB;IAC/B,QAAQ,EAAE;QACR,WAAW,EAAE,gBAAgB,CAAC;KAC/B,CAAC;CACH;AAED;;;;GAIG;AACH,MAAM,MAAM,cAAc,GAAG,OAAO,CAAC,MAAM,CAAC,UAAU,EAAE,MAAM,CAAC,CAAC,CAAC;AAEjE;;GAEG;AACH,MAAM,WAAW,mBAAmB;IAClC,OAAO,EAAE,cAAc,CAAC;CACzB;AAED;;;GAGG;AACH,MAAM,WAAW,mBAAmB;IAClC,IAAI,EAAE,mBAAmB,CAAC;CAC3B;AAED,MAAM,WAAW,WAAW;IAC1B,UAAU,EAAE;QACV,MAAM,EAAE;YACN,OAAO,EAAE,OAAO,GAAG,UAAU,CAAA;YAC7B,UAAU,EAAE,MAAM,GAAG,OAAO,CAAC;YAC7B,UAAU,EAAE,OAAO,CAAC;YACpB,YAAY,EAAE,OAAO,CAAC;YACtB,KAAK,EAAE;gBACL,aAAa,EAAE,OAAO,CAAC;aACxB,CAAA;SACF,CAAA;KACF,CAAA;IACD,WAAW,EAAE,mBAAmB,CAAC;CAClC;AAED;;;;GAIG;AACH,MAAM,WAAW,gBAAiB,SAAQ,WAAW;IACnD;;;;OAIG;IACH,UAAU,EAAE,OAAO,CAAC;CACrB"}
+{"version":3,"file":"appSettings.d.ts","sourceRoot":"","sources":["../../../settings/types/appSettings.ts"],"names":[],"mappings":"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"}

package/styles/index.d.ts

@@ -1,4 +1,4 @@
 export * from './helpers';
-export { ThemeProvider, createTheme, useActiveBreakpoint, useMediaQuery, useResponsiveValue, useTheme, useColorScheme, withTheme, type Theme, type ColorSchemeName, type PaletteColorsWithMain, type WithThemeProps, } from './theme';
+export { ThemeProvider, createTheme, useActiveBreakpoint, useMediaQuery, useResponsiveValue, useTheme, useColorScheme, withTheme, type Theme, type ShadowSize, type ColorSchemeName, type PaletteColorsWithMain, type WithThemeProps, } from './theme';
 export { makeStyles, withStyles, useStyles, css, cx, tss, GlobalStyles, injectGlobal, keyframes, } from './tss';
 //# sourceMappingURL=index.d.ts.map

package/styles/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../styles/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAC;AAC1B,OAAO,EACL,aAAa,EACb,WAAW,EACX,mBAAmB,EACnB,aAAa,EACb,kBAAkB,EAClB,QAAQ,EACR,cAAc,EACd,SAAS,EACT,KAAK,KAAK,EACV,KAAK,eAAe,EACpB,KAAK,qBAAqB,EAC1B,KAAK,cAAc,GACpB,MAAM,SAAS,CAAC;AACjB,OAAO,EACL,UAAU,EACV,UAAU,EACV,SAAS,EACT,GAAG,EACH,EAAE,EACF,GAAG,EACH,YAAY,EACZ,YAAY,EACZ,SAAS,GACV,MAAM,OAAO,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../styles/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAC;AAC1B,OAAO,EACL,aAAa,EACb,WAAW,EACX,mBAAmB,EACnB,aAAa,EACb,kBAAkB,EAClB,QAAQ,EACR,cAAc,EACd,SAAS,EACT,KAAK,KAAK,EACV,KAAK,UAAU,EACf,KAAK,eAAe,EACpB,KAAK,qBAAqB,EAC1B,KAAK,cAAc,GACpB,MAAM,SAAS,CAAC;AACjB,OAAO,EACL,UAAU,EACV,UAAU,EACV,SAAS,EACT,GAAG,EACH,EAAE,EACF,GAAG,EACH,YAAY,EACZ,YAAY,EACZ,SAAS,GACV,MAAM,OAAO,CAAC"}

package/styles/reset/root.js

@@ -1,11 +1,18 @@
 import "core-js/modules/es.array.includes.js";
 import { applyScrollContainer, hasWebBridge, isIOSTheme } from '@shopgate/engage/core/helpers';
+import { configuration } from '@shopgate/engage/core/collections';
+import { CONFIGURATION_COLLECTION_KEY_HAS_ROOT_TYPOGRAPHY } from '@shopgate/engage/core/constants';
 import { themeConfig } from '@shopgate/engage';
 import { injectGlobal } from '..';
+import { CSS_ROOT_FONT_FAMILY, CSS_ROOT_FONT_SIZE } from "./typographyCustomProps";
 const {
   typography
 } = themeConfig;
 const iosThemeActive = isIOSTheme();
+
+// Flag (for feature-detecting extensions) that base typography uses the `--sg-root-*` custom
+// properties and the `body1` variant.
+configuration.set(CONFIGURATION_COLLECTION_KEY_HAS_ROOT_TYPOGRAPHY, true);
 injectGlobal({
   '*, *:before, *:after': {
     boxSizing: 'border-box'
@@ -23,6 +30,14 @@ injectGlobal({
     backgroundColor: 'var(--page-background-color)'
   },
   html: {
+    // Publish the shared font family (used by every variant) and the rem anchor here. The base body
+    // text itself is the `body1` variant, applied to `<body>` below. A higher-specificity `:root`
+    // override (admin css / live preview / extension) wins. The family default is the property
+    // value, not a `var()` fallback (a comma list can't be a fallback). Roboto is an iOS fallback.
+    [CSS_ROOT_FONT_FAMILY]: `${typography.family}${iosThemeActive && !(typography.family || '').includes('Roboto') ? ', Roboto' : ''}`,
+    [CSS_ROOT_FONT_SIZE]: `${typography.rootSize}px`,
+    fontSize: `var(${CSS_ROOT_FONT_SIZE})`,
+    color: 'var(--sg-palette-text-primary, var(--color-text-high-emphasis))',
     overflow: applyScrollContainer() ? 'hidden' : 'inherit',
     MozOsxFontSmoothing: 'grayscale',
     WebkitFontSmoothing: 'antialiased',
@@ -31,14 +46,18 @@ injectGlobal({
     minHeight: '100%'
   },
   body: {
-    // Include Roboto font as a fallback to the iOS theme when other fonts are not available
-    font: `${typography.rootSize}px/${typography.lineHeight} ${typography.family}${iosThemeActive && !(typography.family || '').includes('Roboto') ? ', Roboto' : ''}`,
+    // Base body text = the `body1` variant. Family is the shared root var; weight/size/line-height
+    // come from the theme's `body1` css vars, with fallbacks so there is no flash before the theme
+    // injects them. Configuring `body1` drives both this base text and the variant.
+    fontFamily: `var(${CSS_ROOT_FONT_FAMILY})`,
+    fontWeight: 'var(--sg-typography-body1-fontWeight, 400)',
+    fontSize: 'var(--sg-typography-body1-fontSize, 1rem)',
+    lineHeight: 'var(--sg-typography-body1-lineHeight, 1.5)',
     overflow: 'auto',
     margin: 0,
     WebkitOverflowScrolling: 'touch',
     WebkitUserSelect: hasWebBridge() ? 'inherit' : 'none',
-    userSelect: hasWebBridge() ? 'inherit' : 'none',
-    color: 'var(--sg-palette-text-primary, var(--color-text-high-emphasis))'
+    userSelect: hasWebBridge() ? 'inherit' : 'none'
   },
   '[data-pattern]': {
     height: '100% !important'

package/styles/reset/typographyCustomProps.d.ts

@@ -0,0 +1,12 @@
+/**
+ * CSS custom property names for the shared base typography. Internal to the styles layer: the css
+ * reset publishes them on `<html>` — `--sg-root-font-family` is the shared family used by every
+ * typography variant, `--sg-root-font-size` is the rem anchor. They're an optional override layer: a
+ * higher-specificity `:root` rule (admin css file / live preview / an extension) overrides the
+ * shipped default. The base body text itself is the `body1` variant, applied to `<body>` by the reset.
+ *
+ * Not re-exported from the styles barrel - import from this module directly where needed.
+ */
+export declare const CSS_ROOT_FONT_FAMILY = "--sg-root-font-family";
+export declare const CSS_ROOT_FONT_SIZE = "--sg-root-font-size";
+//# sourceMappingURL=typographyCustomProps.d.ts.map

package/styles/reset/typographyCustomProps.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"typographyCustomProps.d.ts","sourceRoot":"","sources":["../../../styles/reset/typographyCustomProps.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AACH,eAAO,MAAM,oBAAoB,0BAA0B,CAAC;AAC5D,eAAO,MAAM,kBAAkB,wBAAwB,CAAC"}

package/styles/reset/typographyCustomProps.js

@@ -0,0 +1,11 @@
+/**
+ * CSS custom property names for the shared base typography. Internal to the styles layer: the css
+ * reset publishes them on `<html>` — `--sg-root-font-family` is the shared family used by every
+ * typography variant, `--sg-root-font-size` is the rem anchor. They're an optional override layer: a
+ * higher-specificity `:root` rule (admin css file / live preview / an extension) overrides the
+ * shipped default. The base body text itself is the `body1` variant, applied to `<body>` by the reset.
+ *
+ * Not re-exported from the styles barrel - import from this module directly where needed.
+ */
+export const CSS_ROOT_FONT_FAMILY = '--sg-root-font-family';
+export const CSS_ROOT_FONT_SIZE = '--sg-root-font-size';