@shopgate/engage 7.32.0-beta.6 → 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/index.d.ts

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

package/styles/index.d.ts.map

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

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

@@ -203,6 +203,41 @@ export declare const componentsSchema: {
             readonly height: "";
         };
     };
+    readonly cards: {
+        readonly vars: {
+            readonly borderRadius: "";
+            readonly backgroundColor: "";
+            readonly borderWidth: "";
+            readonly borderColor: "";
+            readonly border: "";
+            readonly shadowColor: "";
+        };
+    };
+    readonly productCard: {
+        readonly vars: {
+            readonly padding: "";
+            readonly textPadding: "";
+            readonly imagePadding: "";
+        };
+    };
+    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.
@@ -213,6 +248,11 @@ export declare const componentsSchema: {
  * - functions get proper `Theme` typing
  */
 export declare const componentsDefaults: {
+    button: {
+        vars: {
+            borderRadius: string;
+        };
+    };
     border: {
         vars: {
             light: string;
@@ -313,6 +353,41 @@ export declare const componentsDefaults: {
             height: number;
         };
     };
+    cards: {
+        vars: {
+            borderRadius: string;
+            backgroundColor: (t: Theme) => string;
+            borderWidth: number;
+            borderColor: string;
+            border: string;
+            shadowColor: (t: Theme) => string;
+        };
+    };
+    productCard: {
+        vars: {
+            padding: number;
+            textPadding: number;
+            imagePadding: number;
+        };
+    };
+    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

@@ -190,6 +190,41 @@ export const componentsSchema = {
     vars: {
       height: ''
     }
+  },
+  cards: {
+    vars: {
+      borderRadius: '',
+      backgroundColor: '',
+      borderWidth: '',
+      borderColor: '',
+      border: '',
+      shadowColor: ''
+    }
+  },
+  productCard: {
+    vars: {
+      padding: '',
+      textPadding: '',
+      imagePadding: ''
+    }
+  },
+  tiles: {
+    vars: {
+      borderRadius: '',
+      backgroundColor: '',
+      borderWidth: '',
+      borderColor: '',
+      border: '',
+      padding: '',
+      textPadding: '',
+      textPaddingTop: '',
+      imagePadding: ''
+    }
+  },
+  productImage: {
+    vars: {
+      borderRadius: ''
+    }
   }
 };
 
@@ -202,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',
@@ -301,6 +341,41 @@ export const componentsDefaults = {
     vars: {
       height: 48
     }
+  },
+  cards: {
+    vars: {
+      borderRadius: 'var(--sg-shape-borderRadius)',
+      backgroundColor: t => t.palette.background.surface,
+      borderWidth: 0,
+      borderColor: 'transparent',
+      border: 'var(--sg-components-cards-borderWidth) solid var(--sg-components-cards-borderColor)',
+      shadowColor: t => t.palette.shadow
+    }
+  },
+  productCard: {
+    vars: {
+      padding: 0,
+      textPadding: 16,
+      imagePadding: 0
+    }
+  },
+  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/createCssVarsForColorSchemeThemes.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"createCssVarsForColorSchemeThemes.d.ts","sourceRoot":"","sources":["../../../../styles/theme/createTheme/createCssVarsForColorSchemeThemes.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,WAAW,CAAC;AAElD,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,WAAW,CAAC;AAExD,OAAO,KAAK,EACV,iBAAiB,EAAE,SAAS,EAAmB,YAAY,EAC5D,MAAM,SAAS,CAAC;AAEjB,KAAK,wCAAwC,GAAG;IAC9C,sBAAsB,EAAE,sBAAsB,CAAC;CAChD,GAAG,IAAI,CAAC,YAAY,EAAE,cAAc,CAAC,CAAC;AAEvC,MAAM,MAAM,4CAA4C,GAAG;IACzD;;;OAGG;IACH,YAAY,EAAE,SAAS,GAAG;QAAE,IAAI,EAAE,SAAS,CAAA;KAAE,CAAC;IAC9C;;;;OAIG;IACH,mBAAmB,EAAE,MAAM,gBAAgB,CAAC;CAC7C,CAAA;AAED;;;;;;GAMG;AACH,MAAM,CAAC,OAAO,UAAU,iCAAiC,CACvD,YAAY,EAAE,iBAAiB,EAC/B,OAAO,EAAE,wCAAwC,GAChD,4CAA4C,CA6G9C"}
+{"version":3,"file":"createCssVarsForColorSchemeThemes.d.ts","sourceRoot":"","sources":["../../../../styles/theme/createTheme/createCssVarsForColorSchemeThemes.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,WAAW,CAAC;AAElD,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,WAAW,CAAC;AAExD,OAAO,KAAK,EACV,iBAAiB,EAAE,SAAS,EAAmB,YAAY,EAC5D,MAAM,SAAS,CAAC;AAEjB,KAAK,wCAAwC,GAAG;IAC9C,sBAAsB,EAAE,sBAAsB,CAAC;CAChD,GAAG,IAAI,CAAC,YAAY,EAAE,cAAc,CAAC,CAAC;AAEvC,MAAM,MAAM,4CAA4C,GAAG;IACzD;;;OAGG;IACH,YAAY,EAAE,SAAS,GAAG;QAAE,IAAI,EAAE,SAAS,CAAA;KAAE,CAAC;IAC9C;;;;OAIG;IACH,mBAAmB,EAAE,MAAM,gBAAgB,CAAC;CAC7C,CAAA;AAED;;;;;;GAMG;AACH,MAAM,CAAC,OAAO,UAAU,iCAAiC,CACvD,YAAY,EAAE,iBAAiB,EAC/B,OAAO,EAAE,wCAAwC,GAChD,4CAA4C,CAgH9C"}

package/styles/theme/createTheme/createCssVarsForColorSchemeThemes.js

@@ -1,3 +1,4 @@
+import "core-js/modules/es.array.includes.js";
 import "core-js/modules/es.array.reduce.js";
 import merge from 'lodash/merge';
 import omit from 'lodash/omit';
@@ -35,7 +36,10 @@ export default function createCssVarsForColorSchemeThemes(colorSchemes, options)
       varsWithDefaults,
       varNames
     } = cssVarsColorAugmentation(cssVarsParser(rest, {
-      prefix: cssVarPrefix
+      prefix: cssVarPrefix,
+      // Keep as literal strings, not `:root` vars, so their inline `var(--sg-palette-shadow)`
+      // resolves on the element using the shadow (recolorable) instead of freezing against `:root`.
+      shouldSkipGeneratingVar: keys => ['shadows', 'shadowSizes'].includes(keys[0])
       // @ts-expect-error - We are sure about the type here
     }), rest, cssVarPrefix);
 

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

@@ -151,6 +151,10 @@ export declare const paletteSchema: {
         readonly disabled: "#808080";
         readonly disabledBackground: "#CCCCCC";
     };
+    /**
+     * Color for the box-shadow.
+     */
+    readonly shadow: "#000000";
 };
 /**
  * Additional settings for the palette

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

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

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

@@ -119,7 +119,11 @@ export const paletteSchema = {
   action: {
     disabled: '#808080',
     disabledBackground: '#CCCCCC'
-  }
+  },
+  /**
+   * Color for the box-shadow.
+   */
+  shadow: '#000000'
 };
 
 /**

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

@@ -1,4 +1,7 @@
 export interface Shape {
+    /**
+     * The app wide corner style. Every rounded surface derives from it.
+     */
     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;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"}
+{"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/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,gBA2BrE,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

@@ -2,7 +2,7 @@ import createPalette from "./createPalette";
 import createTypography from "./createTypography";
 import createComponents from "./createComponents";
 import createShape from "./createShape";
-import shadows from "./shadows";
+import shadows, { shadowSizes } from "./shadows";
 /**
  * Calculates the percentage value for a given coefficient, which can be a number or a string representing a CSS calculation.
  * @param coefficient The coefficient to convert, either a number or a string.
@@ -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 = {
@@ -69,6 +71,7 @@ const createThemeFromColorScheme = colorScheme => {
     components,
     shape,
     shadows,
+    shadowSizes,
     alpha,
     lighten,
     darken,

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;