@shopgate/engage 7.31.6 → 7.32.0-beta.10

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/helpers/setPageBackgroundColor.js

@@ -1,6 +1,6 @@
 import { themeConfig } from '@shopgate/pwa-common/helpers/config';
 import { hasWebBridge } from '@shopgate/engage/core/helpers';
-import { IS_PAGE_PREVIEW_ACTIVE } from '@shopgate/engage/page/constants';
+import { isAdminPreviewActive } from '@shopgate/engage/admin-preview/helpers';
 import { setCSSCustomProp } from "./cssCustomProperties";
 const {
   colors: {
@@ -14,7 +14,7 @@ const {
  */
 export const setPageBackgroundColor = (color = defaultBackgroundColor) => {
   // Curbside website changes never its background color
-  if (!hasWebBridge() || IS_PAGE_PREVIEW_ACTIVE) {
+  if (!hasWebBridge() || isAdminPreviewActive()) {
     setCSSCustomProp('--page-background-color', color);
   }
 };

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,YAwC3C,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,YAmN3C,CAAC"}

package/styles/theme/createDefaultThemeOptions/index.js

@@ -1,7 +1,8 @@
 import { getCSSCustomProp } from '@shopgate/engage/styles';
 import { themeConfig } from '@shopgate/engage';
 const {
-  colors
+  colors,
+  settings
 } = themeConfig;
 
 /**
@@ -28,22 +29,193 @@ export const createDefaultThemeOptions = () => ({
           main: getCSSCustomProp('--color-state-ok')
         },
         background: {
-          default: colors.background
+          default: colors.light,
+          surface: colors.light,
+          emphasized: colors.placeholder || '#F2F2F2'
         },
         text: {
-          primary: getCSSCustomProp('--color-text-high-emphasis'),
-          secondary: getCSSCustomProp('--color-text-low-emphasis')
+          primary: getCSSCustomProp('--color-text-high-emphasis') || '#1A1A1A',
+          secondary: getCSSCustomProp('--color-text-medium-emphasis') || '#808080'
+        }
+      },
+      components: {
+        border: {
+          vars: {
+            light: '#F2F2F2',
+            medium: '#b5b5b5',
+            dark: '#747474'
+          }
+        },
+        price: {
+          vars: {
+            color: getCSSCustomProp('--color-primary')
+          }
+        },
+        input: {
+          vars: {
+            background: '#F2F2F2',
+            border: '#CCCCCC'
+          }
+        },
+        separatorLine: {
+          vars: {
+            borderColor: '#EBEBEF'
+          }
+        },
+        ctaButton: {
+          vars: {
+            background: getCSSCustomProp('--color-button-cta') || getCSSCustomProp('--color-primary')
+          }
+        },
+        badge: {
+          vars: {
+            background: getCSSCustomProp('--color-secondary')
+          }
+        },
+        snackbar: {
+          vars: {
+            background: '#323232'
+          }
+        },
+        tabBar: {
+          vars: {
+            background: 'var(--tab-bar-background, #FFFFFF)',
+            minHeight: 'var(--tab-bar-min-height, 0px)',
+            border: '#E6E6E6',
+            inactive: 'var(--tab-bar-item-default-color, #747474)',
+            active: `var(--tab-bar-item-highlighted-color, ${getCSSCustomProp('--color-secondary')})`,
+            floatingBorderRadius: 'var(--tab-bar-floating-border-radius, 16px)',
+            floatingBoxShadow: 'var(--tab-bar-floating-box-shadow, 0 0 12px rgba(0, 0, 0, 0.24))',
+            floatingMinHeight: 'var(--tab-bar-floating-min-height, 59px)',
+            badgeColor: 'var(--tab-bar-item-badge-color, #FFFFFF)',
+            badgeBackground: `var(--tab-bar-item-badge-background, ${getCSSCustomProp('--color-secondary')})`,
+            badgeBorderRadius: 'var(--tab-bar-item-badge-border-radius, 8px)',
+            badgeTop: 'var(--tab-bar-item-badge-top, -8px)',
+            badgeLeft: 'var(--tab-bar-item-badge-left, calc(50% + 20px))'
+          }
+        },
+        appBar: {
+          vars: {
+            background: settings?.['@shopgate/engage/components/AppBar']?.background || '#FFF'
+          }
+        },
+        ratingStars: {
+          vars: {
+            filled: `var(--rating-stars-filled, ${getCSSCustomProp('--color-primary')})`,
+            empty: 'var(--rating-stars-empty, #CCCCCC)'
+          }
+        },
+        swiper: {
+          vars: {
+            paginationBulletColor: '#b5b5b5',
+            paginationBulletActiveColor: '#747474',
+            paginationFractionBackground: '#F2F2F2',
+            paginationProgressbarBackground: '#F2F2F2',
+            paginationProgressbarActiveColor: '#000000'
+          }
         }
       }
     },
     dark: {
       palette: {
+        // No primary or secondary here on purpose. Both inherit from the light scheme, so a
+        // merchant's brand colors carry over instead of being replaced by a hard coded pair.
+        error: {
+          main: '#FF6B6B'
+        },
+        warning: {
+          main: '#FFA726'
+        },
+        success: {
+          main: '#5DD954'
+        },
         background: {
-          default: '#000'
+          default: '#000000',
+          surface: '#1C1C1E',
+          emphasized: '#2C2C2E'
         },
         text: {
-          primary: '#fff',
-          secondary: '#808080'
+          primary: '#F2F2F7',
+          secondary: '#AEAEB2'
+        },
+        grey: {
+          light: '#2C2C2E',
+          medium: '#48484A',
+          dark: '#8E8E93'
+        },
+        action: {
+          disabled: '#8E8E93',
+          disabledBackground: '#48484A',
+          pressed: '#2C2C2E'
+        }
+      },
+      components: {
+        border: {
+          vars: {
+            light: '#38383A',
+            medium: '#48484A',
+            dark: '#8E8E93'
+          }
+        },
+        input: {
+          vars: {
+            background: '#2C2C2E',
+            border: '#48484A'
+          }
+        },
+        separatorLine: {
+          vars: {
+            borderColor: '#38383A'
+          }
+        },
+        snackbar: {
+          vars: {
+            background: '#2C2C2E'
+          }
+        },
+        tabBar: {
+          vars: {
+            background: '#1C1C1E',
+            border: '#374151',
+            inactive: '#9CA3AF',
+            floatingBoxShadow: '0 0 12px rgba(0, 0, 0, 0.6)'
+          }
+        },
+        appBar: {
+          vars: {
+            background: '#1C1C1E'
+          }
+        },
+        discountBadge: {
+          vars: {
+            background: '#FF0000'
+          }
+        },
+        ratingStars: {
+          vars: {
+            empty: '#48484A'
+          }
+        },
+        cards: {
+          vars: {
+            backgroundColor: '#1C1C1E',
+            borderColor: '#38383A'
+          }
+        },
+        tiles: {
+          vars: {
+            backgroundColor: '#1C1C1E',
+            borderColor: '#38383A'
+          }
+        },
+        swiper: {
+          vars: {
+            paginationBulletColor: '#AEAEB2',
+            paginationBulletActiveColor: '#F2F2F7',
+            paginationFractionBackground: '#2C2C2E',
+            paginationProgressbarBackground: '#48484A',
+            paginationProgressbarActiveColor: '#FFFFFF'
+          }
         }
       }
     }