@shopgate/engage 7.32.0-beta.1 → 7.32.0-beta.11

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

@@ -1 +1 @@
-{"version":3,"file":"appSettings.d.ts","sourceRoot":"","sources":["../../../settings/types/appSettings.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,gBAAgB;IAC/B,QAAQ,EAAE;QACR,WAAW,EAAE,gBAAgB,CAAC;KAC/B,CAAC;CACH;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;CACF;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/settings/types/appSettings.js

@@ -1 +1,124 @@
-export {};
+// Re-exported so consumers of these settings do not have to reach into the styles layer, which
+// owns the type because it owns the elevation scale the sizes map to. `TypographyVariant` and the
+// color scheme types are reused for the same reason - the theme owns the variant and scheme lists.
+
+export const COLOR_SCHEME_SELECTABLE = 'selectable';
+
+/**
+ * What the app settings can configure: a color scheme that is binding, or `selectable` to let
+ * visitors pick one themselves. Distinct from the theme's `ColorSchemeMode`, which is what a
+ * visitor can pick - `selectable` is a permission rather than an appearance, and maps to the
+ * theme's `system` mode.
+ */
+
+/**
+ * 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.
+ */
+
+/**
+ * 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).
+ */
+
+/**
+ * A value keyed by screen size. Partial: any unset size cascades down to the next smaller
+ * defined value (see useResponsiveValue).
+ */
+
+/**
+ * Number of product columns to render, keyed by screen size.
+ */
+
+/**
+ * Settings for the ProductGrid list type.
+ */
+
+/**
+ * Name-clamping shared by the card and tile product surfaces.
+ */
+
+/**
+ * Drop shadow of the card surface.
+ */
+
+/**
+ * Number of slides to render side by side, keyed by screen size. Fractional values are allowed.
+ */
+
+/**
+ * Settings for the ProductSlider list type.
+ */
+
+/**
+ * Settings for the product rating stars.
+ */
+
+/**
+ * Settings for product presentation across the app.
+ */
+
+/**
+ * The visual style of the card surface.
+ */
+
+/**
+ * Settings for the themed card surface (checkout sections, address cards, sliders).
+ */
+
+/**
+ * An aspect ratio expressed as width and height parts. Only the proportion matters -
+ * { width: 4, height: 5 } and { width: 8, height: 10 } are equivalent.
+ */
+
+/**
+ * A single image resolution requested from the image service.
+ */
+
+/**
+ * The product image contexts. pdp drives the product detail page, gallery the fullscreen gallery,
+ * and list every grid, slider, list and row tile.
+ */
+
+/**
+ * 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.
+ */
+
+/**
+ * Settings for the product image contexts.
+ */
+
+/**
+ * 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.
+ */
+
+/**
+ * Settings for the app's overall appearance.
+ */
+
+/**
+ * A font stylesheet to load. The file carries the `@font-face` rules and points its target at the
+ * new family itself, e.g. `:root { --sg-typography-h1-fontFamily: 'Recoleta'; }`.
+ */
+
+/**
+ * Typography settings. The top level file applies to everything, a variant entry only to that
+ * variant. Variant files are loaded after the global one, so they win at equal specificity.
+ */
+
+/**
+ * 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.
+ */
+
+/**
+ * The stored app settings slice. Extends the raw {@link AppSettings} values
+ * with metadata that is derived by the reducer rather than supplied by a
+ * source (admin sync / jsonp).
+ */

package/styles/helpers/index.d.ts

@@ -4,6 +4,8 @@ export { setPageContentWidth } from "./setPageContentWidth";
 export { setViewportHeight } from "./setViewportHeight";
 export { toggleBodyScroll } from "./toggleBodyScroll";
 export { loadCustomStyles } from "./loadCustomStyles";
+export { loadThemeCss } from "./loadThemeCss";
+export { loadFontCss } from "./loadFontCss";
 export * from "./color";
 export { responsiveMediaQuery } from "../../components/ResponsiveContainer/mediaQuery";
 export { responsiveCondition } from "../../components/ResponsiveContainer/condition";

package/styles/helpers/index.js

@@ -6,6 +6,8 @@ export { setViewportHeight } from "./setViewportHeight";
 export { toggleBodyScroll } from "./toggleBodyScroll";
 export { initCSSCustomProps, initCSSCustomPropsFallback } from "./initCSSCustomProperties";
 export { loadCustomStyles } from "./loadCustomStyles";
+export { loadThemeCss } from "./loadThemeCss";
+export { loadFontCss } from "./loadFontCss";
 export * from "./color";
 export { responsiveMediaQuery } from "../../components/ResponsiveContainer/mediaQuery";
 export { responsiveCondition } from "../../components/ResponsiveContainer/condition";

package/styles/helpers/loadFontCss.d.ts

@@ -0,0 +1,22 @@
+/**
+ * Syncs the font css links in the document with the passed urls. Tags for urls that are no longer
+ * configured are removed, and the remaining ones end up in the dom in the order they were passed -
+ * so the global file, passed first, stays above the per variant ones however they were ordered
+ * before.
+ *
+ * Idempotent by design: the admin preview re-sends the app settings while a merchant edits them, so
+ * this runs again on every settings update. A tag that is already in place is left untouched, and a
+ * tag for a url that is still configured is moved rather than recreated, which would re-request the
+ * file.
+ *
+ * A url is only ever loaded once. Configuring the same file globally and for a variant is normal,
+ * and a second link tag for it would apply the same `@font-face` rules twice.
+ *
+ * Resolves once every newly added file settled, and never rejects - a font file is not guaranteed
+ * to exist and must not be able to block app start.
+ * @param urls The font css urls to load, in cascade order. Duplicates are dropped, keeping the
+ * first occurrence so the cascade order is preserved.
+ * @returns A promise that resolves once the new files settled.
+ */
+export declare const loadFontCss: (urls?: string[]) => Promise<void>;
+//# sourceMappingURL=loadFontCss.d.ts.map

package/styles/helpers/loadFontCss.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"loadFontCss.d.ts","sourceRoot":"","sources":["../../../styles/helpers/loadFontCss.ts"],"names":[],"mappings":"AAmGA;;;;;;;;;;;;;;;;;;;GAmBG;AACH,eAAO,MAAM,WAAW,GAAU,OAAM,MAAM,EAAO,KAAG,OAAO,CAAC,IAAI,CAqCnE,CAAC"}

package/styles/helpers/loadFontCss.js

@@ -0,0 +1,138 @@
+import { withScope, captureMessage, Severity as SentrySeverity } from '@sentry/browser';
+const REQUEST_TIMEOUT = 3000;
+const LINK_TAG_CLASS = 'font-css';
+const URL_ATTRIBUTE = 'data-font-css-url';
+const INSERTION_POINT_SELECTOR = 'meta[name="font-css-insertion-point"]';
+
+/**
+ * Reads the font css links that are currently in the document, in document order.
+ * @returns The link tags.
+ */
+const getExistingTags = () => Array.from(document.querySelectorAll(`link.${LINK_TAG_CLASS}`));
+
+/**
+ * Inserts a tag after the passed sibling, or appends it when there is none.
+ * @param tag The tag to insert.
+ * @param sibling The node to insert after.
+ */
+const insertAfter = (tag, sibling) => {
+  if (!sibling) {
+    document.head.appendChild(tag);
+    return;
+  }
+  sibling.parentNode?.insertBefore(tag, sibling.nextSibling);
+};
+
+/**
+ * Loads a single font css file and inserts its link after the passed sibling. The font css
+ * insertion point sits between the emotion one and the theme css one, so these files override the
+ * custom properties that theme initialization generates while the theme css file still overrides
+ * them in turn. Falls back to appending when the meta is absent.
+ *
+ * A link applies at its position in the dom rather than at the time it finished loading, so the
+ * timeout below only decides how long app start waits - never which styles win. The tag is left in
+ * place when it hits, so the file still applies once it eventually loads.
+ * @param href The url to load.
+ * @param sibling The node to insert after.
+ * @returns The inserted link tag and a promise that settles on load, error or timeout.
+ */
+const loadOne = (href, sibling) => {
+  const linkTag = document.createElement('link');
+  linkTag.rel = 'stylesheet';
+  linkTag.type = 'text/css';
+  linkTag.href = href;
+  linkTag.className = LINK_TAG_CLASS;
+  linkTag.setAttribute(URL_ATTRIBUTE, href);
+  const settled = new Promise(resolve => {
+    let done = false;
+    let timeout;
+
+    /**
+     * Resolves the promise once, whichever of load / error / timeout comes first.
+     */
+    const settle = () => {
+      if (done) {
+        return;
+      }
+      done = true;
+      clearTimeout(timeout);
+      resolve();
+    };
+    linkTag.onload = settle;
+    linkTag.onerror = () => {
+      withScope(scope => {
+        scope.setLevel(SentrySeverity.Error);
+        scope.setExtra('fontCssUrl', href);
+        captureMessage('Fetching font css failed');
+      });
+      settle();
+    };
+    timeout = setTimeout(() => {
+      withScope(scope => {
+        scope.setLevel(SentrySeverity.Warning);
+        scope.setExtra('fontCssUrl', href);
+        scope.setExtra('timeout', REQUEST_TIMEOUT);
+        captureMessage('Fetching font css took too long');
+      });
+      settle();
+    }, REQUEST_TIMEOUT);
+  });
+  insertAfter(linkTag, sibling);
+  return {
+    linkTag,
+    settled
+  };
+};
+
+/**
+ * Syncs the font css links in the document with the passed urls. Tags for urls that are no longer
+ * configured are removed, and the remaining ones end up in the dom in the order they were passed -
+ * so the global file, passed first, stays above the per variant ones however they were ordered
+ * before.
+ *
+ * Idempotent by design: the admin preview re-sends the app settings while a merchant edits them, so
+ * this runs again on every settings update. A tag that is already in place is left untouched, and a
+ * tag for a url that is still configured is moved rather than recreated, which would re-request the
+ * file.
+ *
+ * A url is only ever loaded once. Configuring the same file globally and for a variant is normal,
+ * and a second link tag for it would apply the same `@font-face` rules twice.
+ *
+ * Resolves once every newly added file settled, and never rejects - a font file is not guaranteed
+ * to exist and must not be able to block app start.
+ * @param urls The font css urls to load, in cascade order. Duplicates are dropped, keeping the
+ * first occurrence so the cascade order is preserved.
+ * @returns A promise that resolves once the new files settled.
+ */
+export const loadFontCss = async (urls = []) => {
+  const wanted = Array.from(new Set(urls));
+  const wantedUrls = new Set(wanted);
+  const kept = new Map();
+  getExistingTags().forEach(tag => {
+    const url = tag.getAttribute(URL_ATTRIBUTE) || '';
+    if (wantedUrls.has(url) && !kept.has(url)) {
+      kept.set(url, tag);
+      return;
+    }
+    tag.remove();
+  });
+  let sibling = document.querySelector(INSERTION_POINT_SELECTOR);
+  const pending = [];
+  wanted.forEach(url => {
+    const existing = kept.get(url);
+    if (existing) {
+      if (existing.previousElementSibling !== sibling) {
+        insertAfter(existing, sibling);
+      }
+      sibling = existing;
+      return;
+    }
+    const {
+      linkTag,
+      settled
+    } = loadOne(url, sibling);
+    sibling = linkTag;
+    pending.push(settled);
+  });
+  await Promise.all(pending);
+};

package/styles/helpers/loadThemeCss.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Loads the theme css file. It overrides the css custom properties that are generated during
+ * theme initialization, so it has to win the cascade against them - see `insertLinkTag` for how
+ * that order is established.
+ *
+ * A link applies at its position in the dom rather than at the time it finished loading, so the
+ * timeout below only decides how long app start waits - never which styles win.
+ *
+ * Resolves when the file loaded, when it failed, or when REQUEST_TIMEOUT elapsed - it never
+ * rejects, since the file is not guaranteed to exist and must not be able to block app start.
+ * @returns A promise that resolves once the file settled.
+ */
+export declare const loadThemeCss: () => Promise<void>;
+//# sourceMappingURL=loadThemeCss.d.ts.map

package/styles/helpers/loadThemeCss.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"loadThemeCss.d.ts","sourceRoot":"","sources":["../../../styles/helpers/loadThemeCss.ts"],"names":[],"mappings":"AAuCA;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,YAAY,QAAO,OAAO,CAAC,IAAI,CAqF1C,CAAC"}

package/styles/helpers/loadThemeCss.js

@@ -0,0 +1,123 @@
+import { withScope, captureMessage, Severity as SentrySeverity } from '@sentry/browser';
+import { appConfig } from '@shopgate/engage';
+import { isFrontendSettingsAdminPreviewActive } from '@shopgate/engage/admin-preview/helpers';
+const REQUEST_TIMEOUT = 3000;
+const LINK_TAG_ID = 'theme-css';
+const INSERTION_POINT_SELECTOR = 'meta[name="theme-css-insertion-point"]';
+
+/**
+ * Temporary switch. Set to false to load the theme css file in the frontend settings preview
+ * again, or remove it together with the guard in loadThemeCss and the import above.
+ */
+const SKIP_IN_FRONTEND_SETTINGS_PREVIEW = true;
+
+/**
+ * Inserts the link at the theme css insertion point, which the html template declares between the
+ * emotion insertion point and the preview one. That position is what makes the cascade order
+ * structural rather than incidental: every tss style is pinned above it, and the admin preview
+ * pins its style tag to the anchor below it.
+ *
+ * Falls back to appending when the meta is absent - a head without the anchor still yields the
+ * desired order for anything that was already inserted, it just no longer guarantees it.
+ * @param linkTag The link tag to insert.
+ */
+const insertLinkTag = linkTag => {
+  const insertionPoint = document.querySelector(INSERTION_POINT_SELECTOR);
+  if (!insertionPoint) {
+    document.head.appendChild(linkTag);
+    return;
+  }
+  insertionPoint.parentNode?.insertBefore(linkTag, insertionPoint.nextSibling);
+};
+
+/**
+ * Loads the theme css file. It overrides the css custom properties that are generated during
+ * theme initialization, so it has to win the cascade against them - see `insertLinkTag` for how
+ * that order is established.
+ *
+ * A link applies at its position in the dom rather than at the time it finished loading, so the
+ * timeout below only decides how long app start waits - never which styles win.
+ *
+ * Resolves when the file loaded, when it failed, or when REQUEST_TIMEOUT elapsed - it never
+ * rejects, since the file is not guaranteed to exist and must not be able to block app start.
+ * @returns A promise that resolves once the file settled.
+ */
+export const loadThemeCss = () => new Promise(resolve => {
+  if (SKIP_IN_FRONTEND_SETTINGS_PREVIEW && isFrontendSettingsAdminPreviewActive()) {
+    resolve();
+    return;
+  }
+  const {
+    themeCssUrl: href
+  } = appConfig;
+  if (!href) {
+    resolve();
+    return;
+  }
+  let settled = false;
+  let timeout;
+
+  /**
+   * Resolves the promise once, whichever of load / error / timeout comes first.
+   */
+  const settle = () => {
+    if (settled) {
+      return;
+    }
+    settled = true;
+    clearTimeout(timeout);
+    resolve();
+  };
+
+  /**
+   * Starts the fallback that keeps app start from waiting on a stalled request. The link is
+   * deliberately left in place when the timeout hits: it still applies once it eventually loads,
+   * it just no longer holds up app start.
+   */
+  const startTimeoutFallback = () => {
+    timeout = setTimeout(() => {
+      withScope(scope => {
+        scope.setLevel(SentrySeverity.Warning);
+        scope.setExtra('themeCssUrl', href);
+        scope.setExtra('timeout', REQUEST_TIMEOUT);
+        captureMessage('Fetching theme css took too long');
+      });
+      settle();
+    }, REQUEST_TIMEOUT);
+  };
+  const existingTag = document.querySelector(`#${LINK_TAG_ID}`);
+  if (existingTag) {
+    // Already loaded
+    if (existingTag.sheet) {
+      resolve();
+      return;
+    }
+
+    // Still loading - a stalled request must not leave the promise pending, so arm the timeout
+    // here too rather than relying on the load / error events alone.
+    existingTag.addEventListener('load', settle, {
+      once: true
+    });
+    existingTag.addEventListener('error', settle, {
+      once: true
+    });
+    startTimeoutFallback();
+    return;
+  }
+  const linkTag = document.createElement('link');
+  linkTag.rel = 'stylesheet';
+  linkTag.type = 'text/css';
+  linkTag.href = href;
+  linkTag.id = LINK_TAG_ID;
+  linkTag.onload = settle;
+  linkTag.onerror = () => {
+    withScope(scope => {
+      scope.setLevel(SentrySeverity.Error);
+      scope.setExtra('themeCssUrl', href);
+      captureMessage('Fetching theme css failed');
+    });
+    settle();
+  };
+  insertLinkTag(linkTag);
+  startTimeoutFallback();
+});

package/styles/index.d.ts

@@ -1,4 +1,4 @@
 export * from './helpers';
-export { ThemeProvider, createTheme, useActiveBreakpoint, useMediaQuery, useResponsiveValue, useTheme, useColorScheme, type Theme, type PaletteColorsWithMain, } from './theme';
+export { ThemeProvider, createTheme, useActiveBreakpoint, useMediaQuery, useResponsiveValue, useTheme, useColorScheme, withTheme, type Theme, type ShadowSize, type ColorSchemeName, type ColorSchemeMode, type ColorSchemeContextValue, 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,KAAK,KAAK,EACV,KAAK,qBAAqB,GAC3B,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,eAAe,EACpB,KAAK,uBAAuB,EAC5B,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/index.js

@@ -1,3 +1,3 @@
 export * from "./helpers";
-export { ThemeProvider, createTheme, useActiveBreakpoint, useMediaQuery, useResponsiveValue, useTheme, useColorScheme } from "./theme";
+export { ThemeProvider, createTheme, useActiveBreakpoint, useMediaQuery, useResponsiveValue, useTheme, useColorScheme, withTheme } from "./theme";
 export { makeStyles, withStyles, useStyles, css, cx, tss, GlobalStyles, injectGlobal, keyframes } from "./tss";

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(--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';

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../styles/theme/createDefaultThemeOptions/index.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAInD;;;GAGG;AACH,eAAO,MAAM,yBAAyB,QAAO,YA6G3C,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../styles/theme/createDefaultThemeOptions/index.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAInD;;;GAGG;AACH,eAAO,MAAM,yBAAyB,QAAO,YAwN3C,CAAC"}