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

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

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

@@ -1,4 +1,4 @@
 export * from './helpers';
-export { ThemeProvider, createTheme, useActiveBreakpoint, useMediaQuery, useResponsiveValue, useTheme, useColorScheme, withTheme, type Theme, type ShadowSize, type ColorSchemeName, type PaletteColorsWithMain, type WithThemeProps, } 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,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"}
+{"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/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,YAuH3C,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,YAkN3C,CAAC"}

package/styles/theme/createDefaultThemeOptions/index.js

@@ -118,12 +118,103 @@ export const createDefaultThemeOptions = () => ({
     },
     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'
+        }
+      },
+      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'
+          }
         }
       }
     }

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',
@@ -269,7 +284,7 @@ export const componentsDefaults = {
   },
   discountBadge: {
     vars: {
-      background: '#857500'
+      background: '#FF0000'
     }
   },
   icon: {
@@ -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)',
+      textPadding: 0,
+      textPaddingTop: 'max(var(--sg-components-tiles-textPadding), 12px)',
       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