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

package/styles/helpers/index.d.ts

@@ -5,6 +5,7 @@ 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

@@ -7,6 +7,7 @@ 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.map

@@ -1 +1 @@
-{"version":3,"file":"loadThemeCss.d.ts","sourceRoot":"","sources":["../../../styles/helpers/loadThemeCss.ts"],"names":[],"mappings":"AAgCA;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,YAAY,QAAO,OAAO,CAAC,IAAI,CAgF1C,CAAC"}
+{"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

@@ -1,9 +1,16 @@
 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
@@ -36,6 +43,10 @@ const insertLinkTag = linkTag => {
  * @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;

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

@@ -205,6 +205,7 @@ export declare const componentsSchema: {
     };
     readonly cards: {
         readonly vars: {
+            readonly borderRadius: "";
             readonly backgroundColor: "";
             readonly borderWidth: "";
             readonly borderColor: "";
@@ -221,13 +222,22 @@ export declare const componentsSchema: {
     };
     readonly tiles: {
         readonly vars: {
+            readonly borderRadius: "";
             readonly backgroundColor: "";
+            readonly borderWidth: "";
+            readonly borderColor: "";
+            readonly border: "";
             readonly padding: "";
             readonly textPadding: "";
             readonly textPaddingTop: "";
             readonly imagePadding: "";
         };
     };
+    readonly productImage: {
+        readonly vars: {
+            readonly borderRadius: "";
+        };
+    };
 };
 /**
  * Default component tokens.
@@ -238,6 +248,11 @@ export declare const componentsSchema: {
  * - functions get proper `Theme` typing
  */
 export declare const componentsDefaults: {
+    button: {
+        vars: {
+            borderRadius: string;
+        };
+    };
     border: {
         vars: {
             light: string;
@@ -340,6 +355,7 @@ export declare const componentsDefaults: {
     };
     cards: {
         vars: {
+            borderRadius: string;
             backgroundColor: (t: Theme) => string;
             borderWidth: number;
             borderColor: string;
@@ -356,13 +372,22 @@ export declare const componentsDefaults: {
     };
     tiles: {
         vars: {
+            borderRadius: string;
             backgroundColor: string;
+            borderWidth: number;
+            borderColor: string;
+            border: string;
             padding: number;
             textPadding: number;
             textPaddingTop: string;
             imagePadding: number;
         };
     };
+    productImage: {
+        vars: {
+            borderRadius: string;
+        };
+    };
 };
 /** Internal defaults type (must cover full schema). */
 export type ComponentsDefaults = ComponentsOverrideFromSchema<typeof componentsSchema, Theme>;

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

@@ -1 +1 @@
-{"version":3,"file":"createComponents.types.d.ts","sourceRoot":"","sources":["../../../../styles/theme/createTheme/createComponents.types.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"createComponents.types.d.ts","sourceRoot":"","sources":["../../../../styles/theme/createTheme/createComponents.types.ts"],"names":[],"mappings":"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"}

package/styles/theme/createTheme/createComponents.types.js

@@ -193,6 +193,7 @@ export const componentsSchema = {
   },
   cards: {
     vars: {
+      borderRadius: '',
       backgroundColor: '',
       borderWidth: '',
       borderColor: '',
@@ -209,12 +210,21 @@ export const componentsSchema = {
   },
   tiles: {
     vars: {
+      borderRadius: '',
       backgroundColor: '',
+      borderWidth: '',
+      borderColor: '',
+      border: '',
       padding: '',
       textPadding: '',
       textPaddingTop: '',
       imagePadding: ''
     }
+  },
+  productImage: {
+    vars: {
+      borderRadius: ''
+    }
   }
 };
 
@@ -227,6 +237,11 @@ export const componentsSchema = {
  * - functions get proper `Theme` typing
  */
 export const componentsDefaults = {
+  button: {
+    vars: {
+      borderRadius: 'var(--sg-shape-borderRadius, 4px)'
+    }
+  },
   border: {
     vars: {
       light: '#F2F2F2',
@@ -329,6 +344,7 @@ export const componentsDefaults = {
   },
   cards: {
     vars: {
+      borderRadius: 'var(--sg-shape-borderRadius)',
       backgroundColor: t => t.palette.background.surface,
       borderWidth: 0,
       borderColor: 'transparent',
@@ -345,12 +361,21 @@ export const componentsDefaults = {
   },
   tiles: {
     vars: {
+      borderRadius: 'var(--sg-shape-borderRadius)',
       backgroundColor: 'transparent',
+      borderWidth: 0,
+      borderColor: 'transparent',
+      border: 'var(--sg-components-tiles-borderWidth) solid var(--sg-components-tiles-borderColor)',
       padding: 0,
       textPadding: 8,
       textPaddingTop: 'max(var(--sg-components-tiles-textPadding), 16px)',
       imagePadding: 0
     }
+  },
+  productImage: {
+    vars: {
+      borderRadius: 'var(--sg-shape-borderRadius)'
+    }
   }
 };
 

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

@@ -1,9 +1,8 @@
 export interface Shape {
-    borderRadius: number | string;
     /**
-     * Corner radius of cards (product cards, content cards).
+     * The app wide corner style. Every rounded surface derives from it.
      */
-    cardsBorderRadius: number | string;
+    borderRadius: number | string;
 }
 export type ShapeOptions = Partial<Shape>;
 /**

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

@@ -1 +1 @@
-{"version":3,"file":"createShape.d.ts","sourceRoot":"","sources":["../../../../styles/theme/createTheme/createShape.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,KAAK;IACpB,YAAY,EAAE,MAAM,GAAG,MAAM,CAAC;IAC9B;;OAEG;IACH,iBAAiB,EAAE,MAAM,GAAG,MAAM,CAAC;CACpC;AAED,MAAM,MAAM,YAAY,GAAG,OAAO,CAAC,KAAK,CAAC,CAAC;AAO1C;;;;GAIG;AACH,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,OAAO,GAAE,YAAiB,GAAG,KAAK,CAKrE"}
+{"version":3,"file":"createShape.d.ts","sourceRoot":"","sources":["../../../../styles/theme/createTheme/createShape.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,KAAK;IACpB;;OAEG;IACH,YAAY,EAAE,MAAM,GAAG,MAAM,CAAC;CAC/B;AAED,MAAM,MAAM,YAAY,GAAG,OAAO,CAAC,KAAK,CAAC,CAAC;AAM1C;;;;GAIG;AACH,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,OAAO,GAAE,YAAiB,GAAG,KAAK,CAKrE"}

package/styles/theme/createTheme/createShape.js

@@ -1,6 +1,5 @@
 const shape = {
-  borderRadius: 4,
-  cardsBorderRadius: 10
+  borderRadius: 4
 };
 
 /**

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

@@ -30,8 +30,10 @@ export declare const contrastColor: (color: string) => string;
 /**
  * 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.
  */
-declare const createThemeFromColorScheme: (colorScheme: ColorSchemeOptions) => ColorSchemeTheme;
+declare const createThemeFromColorScheme: (colorScheme: ColorSchemeOptions, cssVarPrefix?: string) => ColorSchemeTheme;
 export default createThemeFromColorScheme;
 //# sourceMappingURL=createThemeFromColorScheme.d.ts.map

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.js

@@ -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/index.d.ts

@@ -1,6 +1,7 @@
 export { default as ThemeProvider } from './providers/ThemeProvider';
 export { createTheme } from './createTheme';
 export { type ShadowSize } from './createTheme/shadows';
+export type { Variant as TypographyVariant } from './createTheme/createTypography';
 export type { Theme, Breakpoint, PaletteColorsWithMain, ColorSchemeName, } from './createTheme';
 export { useActiveBreakpoint, useMediaQuery, useResponsiveValue, useTheme, useColorScheme, } from './hooks';
 export { withTheme, type WithThemeProps } from './hocs';

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,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"}

package/tracking/components/CookieConsentModal/index.js

@@ -2,7 +2,8 @@ import React, { useMemo, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import throttle from 'lodash/throttle';
 import { makeStyles } from '@shopgate/engage/styles';
-import { Grid, I18n, Button, Modal, Link, ConditionalWrapper, Typography } from '@shopgate/engage/components';
+import { Grid, I18n, Modal, Link, ConditionalWrapper, Typography } from '@shopgate/engage/components';
+import { Button } from '@shopgate/engage/components/v2';
 import { appConfig } from '@shopgate/engage';
 import connect from "./connector";
 import cookieImage from "./tracking-opt-in.svg";
@@ -164,21 +165,19 @@ const CookieConsentModal = ({
           className: classes.buttonWrapper,
           children: [/*#__PURE__*/_jsx(Button, {
             onClick: handleAcceptAllCookies,
-            type: "primary",
+            color: "secondary",
             className: cx(classes.button, 'cookie-consent-modal__button-accept-all'),
             children: /*#__PURE__*/_jsx(I18n.Text, {
               string: modalButtonAcceptAll || 'cookieConsentModal.buttonAcceptAll'
             })
           }), showRequiredCookiesButton ? /*#__PURE__*/_jsx(Button, {
             onClick: handleAcceptRequiredCookies,
-            type: "simple",
             className: cx(classes.button, 'cookie-consent-modal__button-accept-required'),
             children: /*#__PURE__*/_jsx(I18n.Text, {
               string: modalButtonOnlyRequired || 'cookieConsentModal.modalButtonOnlyRequired'
             })
           }) : null, /*#__PURE__*/_jsx(Button, {
             onClick: handleOpenPrivacySettings,
-            type: "simple",
             className: cx(classes.button, 'cookie-consent-modal__button-open-settings'),
             children: /*#__PURE__*/_jsx(I18n.Text, {
               string: modalButtonConfigureSettings || 'cookieConsentModal.buttonConfigure'