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

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;
 
 /**
@@ -66,6 +67,11 @@ export const createDefaultThemeOptions = () => ({
             background: getCSSCustomProp('--color-button-cta') || getCSSCustomProp('--color-primary')
           }
         },
+        badge: {
+          vars: {
+            background: getCSSCustomProp('--color-secondary')
+          }
+        },
         snackbar: {
           vars: {
             background: '#323232'
@@ -88,6 +94,16 @@ export const createDefaultThemeOptions = () => ({
             badgeLeft: 'var(--tab-bar-item-badge-left, calc(50% + 20px))'
           }
         },
+        appBar: {
+          vars: {
+            background: settings?.['@shopgate/engage/components/AppBar']?.background || '#FFF'
+          }
+        },
+        discountBadge: {
+          vars: {
+            background: 'var(--sg-palette-primary-main)'
+          }
+        },
         ratingStars: {
           vars: {
             filled: `var(--rating-stars-filled, ${getCSSCustomProp('--color-primary')})`,
@@ -107,12 +123,104 @@ 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',
+          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'
+          }
         }
       }
     }

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

@@ -1,4 +1,4 @@
-import type { ComponentsOptions, ComponentVars, ComponentsFromSchema } from './createComponents.types';
+import type { ComponentsOptions, Components, ComponentsFromSchema } from './createComponents.types';
 export type { ComponentsOptions, Components, ComponentVars } from './createComponents.types';
 /**
  * Deeply resolves a components object:
@@ -30,6 +30,6 @@ export declare function flattenComponentVars<T extends AnyObject>(input: T): { [
  * @param inputComponents The input components options
  * @returns The components object
  */
-declare const createComponents: (inputComponents: ComponentsOptions) => ComponentVars;
+declare const createComponents: (inputComponents: ComponentsOptions) => Components;
 export default createComponents;
 //# sourceMappingURL=createComponents.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"createComponents.d.ts","sourceRoot":"","sources":["../../../../styles/theme/createTheme/createComponents.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EACV,iBAAiB,EAEjB,aAAa,EACb,oBAAoB,EACrB,MAAM,0BAA0B,CAAC;AAGlC,YAAY,EAAE,iBAAiB,EAAE,UAAU,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AAE7F;;;;;;;;GAQG;AACH,wBAAgB,uBAAuB,CAAC,MAAM,EAAE,MAAM,EACpD,KAAK,EAAE,MAAM,EACb,KAAK,EAAE,MAAM,GACZ,oBAAoB,CAAC,MAAM,CAAC,CAmB9B;AAGD,KAAK,SAAS,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;AAErC;;;;;;;;;;GAUG;AACH,wBAAgB,oBAAoB,CAAC,CAAC,SAAS,SAAS,EAAE,KAAK,EAAE,CAAC,GAa/C,GACd,CAAC,IAAI,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,SAAS;IAAE,IAAI,EAAE,MAAM,CAAC,CAAA;CAAE,GAAG,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,GAC1D,CACF;AAED;;;;GAIG;AACH,QAAA,MAAM,gBAAgB,GAAI,iBAAiB,iBAAiB,KAAG,aAS9D,CAAC;AAEF,eAAe,gBAAgB,CAAC"}
+{"version":3,"file":"createComponents.d.ts","sourceRoot":"","sources":["../../../../styles/theme/createTheme/createComponents.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EACV,iBAAiB,EACjB,UAAU,EACV,oBAAoB,EACrB,MAAM,0BAA0B,CAAC;AAGlC,YAAY,EAAE,iBAAiB,EAAE,UAAU,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AAE7F;;;;;;;;GAQG;AACH,wBAAgB,uBAAuB,CAAC,MAAM,EAAE,MAAM,EACpD,KAAK,EAAE,MAAM,EACb,KAAK,EAAE,MAAM,GACZ,oBAAoB,CAAC,MAAM,CAAC,CAmB9B;AAGD,KAAK,SAAS,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;AAErC;;;;;;;;;;GAUG;AACH,wBAAgB,oBAAoB,CAAC,CAAC,SAAS,SAAS,EAAE,KAAK,EAAE,CAAC,GAa/C,GACd,CAAC,IAAI,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,SAAS;IAAE,IAAI,EAAE,MAAM,CAAC,CAAA;CAAE,GAAG,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,GAC1D,CACF;AAED;;;;GAIG;AACH,QAAA,MAAM,gBAAgB,GAAI,iBAAiB,iBAAiB,KAAG,UAQ9D,CAAC;AAEF,eAAe,gBAAgB,CAAC"}

package/styles/theme/createTheme/createComponents.js

@@ -62,7 +62,6 @@ export function flattenComponentVars(input) {
  */
 const createComponents = inputComponents => {
   const mergedComponents = merge({}, componentsSchema, componentsDefaults, inputComponents);
-  // @ts-expect-error - We are sure about the type here
   return mergedComponents;
 };
 export default createComponents;

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

@@ -131,6 +131,17 @@ export declare const componentsSchema: {
             readonly color: "";
         };
     };
+    readonly appBar: {
+        readonly vars: {
+            readonly background: "";
+            readonly color: "";
+        };
+    };
+    readonly badge: {
+        readonly vars: {
+            readonly background: "";
+        };
+    };
     readonly discountBadge: {
         readonly vars: {
             readonly background: "";
@@ -182,6 +193,51 @@ export declare const componentsSchema: {
             readonly paginationProgressbarActiveColor: "";
         };
     };
+    readonly navigator: {
+        readonly vars: {
+            readonly height: "";
+        };
+    };
+    readonly filterBar: {
+        readonly vars: {
+            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.
@@ -192,6 +248,11 @@ export declare const componentsSchema: {
  * - functions get proper `Theme` typing
  */
 export declare const componentsDefaults: {
+    button: {
+        vars: {
+            borderRadius: string;
+        };
+    };
     border: {
         vars: {
             light: string;
@@ -221,6 +282,17 @@ export declare const componentsDefaults: {
             color: (t: Theme) => string;
         };
     };
+    appBar: {
+        vars: {
+            background: string;
+            color: (t: Theme) => string;
+        };
+    };
+    badge: {
+        vars: {
+            background: (t: Theme) => string;
+        };
+    };
     discountBadge: {
         vars: {
             background: string;
@@ -271,6 +343,51 @@ export declare const componentsDefaults: {
             paginationProgressbarActiveColor: (t: Theme) => string;
         };
     };
+    navigator: {
+        vars: {
+            height: number;
+        };
+    };
+    filterBar: {
+        vars: {
+            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

@@ -119,6 +119,17 @@ export const componentsSchema = {
       color: ''
     }
   },
+  appBar: {
+    vars: {
+      background: '',
+      color: ''
+    }
+  },
+  badge: {
+    vars: {
+      background: ''
+    }
+  },
   discountBadge: {
     vars: {
       background: ''
@@ -169,6 +180,51 @@ export const componentsSchema = {
       paginationProgressbarBackground: '',
       paginationProgressbarActiveColor: ''
     }
+  },
+  navigator: {
+    vars: {
+      height: ''
+    }
+  },
+  filterBar: {
+    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: ''
+    }
   }
 };
 
@@ -181,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',
@@ -207,12 +268,23 @@ export const componentsDefaults = {
   ctaButton: {
     vars: {
       background: t => t.palette.primary.main,
-      color: t => t.palette.primary.contrastText
+      color: t => t.contrastColor('var(--sg-components-ctaButton-background)')
+    }
+  },
+  appBar: {
+    vars: {
+      background: '#FFFFFF',
+      color: t => t.contrastColor('var(--sg-components-appBar-background)')
+    }
+  },
+  badge: {
+    vars: {
+      background: t => t.palette.secondary.main
     }
   },
   discountBadge: {
     vars: {
-      background: '#857500'
+      background: '#FF0000'
     }
   },
   icon: {
@@ -259,6 +331,51 @@ export const componentsDefaults = {
       paginationProgressbarBackground: t => t.palette.grey.light,
       paginationProgressbarActiveColor: t => t.palette.common.black
     }
+  },
+  navigator: {
+    vars: {
+      height: 44
+    }
+  },
+  filterBar: {
+    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: 0,
+      textPaddingTop: 'max(var(--sg-components-tiles-textPadding), 12px)',
+      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,CA0G9C"}
+{"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,CAmH9C"}

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,12 +36,18 @@ 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);
 
     // Resolve component token values to actual CSS variable references
-    const resolvedComponents = flattenComponentVars(resolveComponentsValues(componentsInput, vars));
+    const resolvedComponents = flattenComponentVars(resolveComponentsValues(componentsInput, {
+      ...rest,
+      ...vars
+    }));
     const {
       css: componentsCss,
       vars: componentsVars,
@@ -67,9 +74,12 @@ export default function createCssVarsForColorSchemeThemes(colorSchemes, options)
         }
       });
 
-      // Create a style sheet selector for the color scheme with the generated CSS variables
+      // Create a style sheet selector for the color scheme with the generated CSS variables.
+      // `only` opts the page out of the browser applying a color scheme of its own on top of the
+      // active one - forced dark repaints the palette's own colors and inverts light surfaces.
       styleSheets.push({
         [`${schemeName === 'light' ? ':root, ' : ''}${getColorSchemeSelector(schemeName)}`]: {
+          colorScheme: `only ${schemeName}`,
           ...colorSchemeMap[schemeName].css
         }
       });

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

@@ -150,7 +150,12 @@ export declare const paletteSchema: {
     readonly action: {
         readonly disabled: "#808080";
         readonly disabledBackground: "#CCCCCC";
+        readonly pressed: "#F2F2F2";
     };
+    /**
+     * 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":"AAAA,KAAK,gBAAgB,GACjB,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GACxD,MAAM,GAAG,MAAM,GAAG,MAAM,GAAG,MAAM,CAAC;AAEtC,MAAM,MAAM,YAAY,GAAG,MAAM,CAAC,gBAAgB,EAAE,MAAM,CAAC,CAAC;AAE5D;;;GAGG;AACH,MAAM,MAAM,qBAAqB,GAAG;IAClC;;OAEG;IACH,IAAI,EAAE,MAAM,CAAC;IACb;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB,CAAC;AAEF;;;GAGG;AACH,KAAK,6BAA6B,GAAG,QAAQ,CAAC,qBAAqB,CAAC,CAAA;AAEpE,KAAK,IAAI,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,IAAI,GAAG,SAAS,CAAC;AAEzD;;;;;;;;;;;;GAYG;AACH,KAAK,iBAAiB,CAAC,CAAC,IACtB,CAAC,SAAS,IAAI,GAAG,MAAM,GACrB,CAAC,SAAS,SAAS,CAAC,MAAM,CAAC,CAAC,EAAE,GAAG,SAAS,iBAAiB,CAAC,CAAC,CAAC,EAAE,GAChE,CAAC,SAAS,MAAM,GAChB,CAAC,MAAM,SAAS,MAAM,CAAC,GACrB,6BAA6B,GAC7B;KAAG,CAAC,IAAI,MAAM,CAAC,GAAG,iBAAiB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;CAAE,CAAC,GAC9C,MAAM,CAAC;AAEX;;;;;;;;;;GAUG;AACH,KAAK,sBAAsB,CAAC,CAAC,IAC3B,CAAC,SAAS,IAAI,GAAG,MAAM,GACrB,CAAC,SAAS,SAAS,CAAC,MAAM,CAAC,CAAC,EAAE,GAAG,SAAS,sBAAsB,CAAC,CAAC,CAAC,EAAE,GACrE,CAAC,SAAS,MAAM,GAChB,CAAC,MAAM,SAAS,MAAM,CAAC,GACrB;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,IAAI,CAAC,EAAE,MAAM,CAAC;IAAC,YAAY,CAAC,EAAE,MAAM,CAAA;CAAE,GACtE;KAAG,CAAC,IAAI,MAAM,CAAC,GAAG,sBAAsB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;CAAE,CAAC,GACnD,MAAM,CAAC;AAEX,KAAK,mBAAmB,CAAC,CAAC,IAAI;KAC3B,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,SAAS;QAAE,IAAI,EAAE,OAAO,CAAA;KAAE,GAAG,CAAC,GAAG,KAAK;CAC7D,CAAC,MAAM,CAAC,CAAC,CAAC;AAGX,MAAM,MAAM,qBAAqB,GAAG,mBAAmB,CAAC,iBAAiB,CAAC,OAAO,aAAa,CAAC,CAAC,CAAC;AAkBjG;;;;;GAKG;AACH,eAAO,MAAM,aAAa;;;;;IAKxB;;OAEG;;;;IAEH;;OAEG;;;;IAEH;;OAEG;;;;IAEH;;OAEG;;;;IAEH;;OAEG;;;;IAEH;;OAEG;;;;;;IAMH;;OAEG;;;;;IAKH;;;OAGG;;;;;;;;;;;;;;;;IAEH;;OAEG;;;;;;IAMH;;OAEG;;CAEK,CAAC;AAEX;;GAEG;AACH,UAAU,wBAAwB;IAChC;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B;AAGD,MAAM,MAAM,cAAc,GAAG,sBAAsB,CAAC,OAAO,aAAa,CAAC,GACrE,wBAAwB,CAAC;AAG7B,MAAM,MAAM,OAAO,GAAG,iBAAiB,CAAC,OAAO,aAAa,CAAC,CAAA"}

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

@@ -118,8 +118,13 @@ export const paletteSchema = {
    */
   action: {
     disabled: '#808080',
-    disabledBackground: '#CCCCCC'
-  }
+    disabledBackground: '#CCCCCC',
+    pressed: '#F2F2F2'
+  },
+  /**
+   * 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/createSpacing.js

@@ -1,4 +1,7 @@
-import { isDev } from '@shopgate/engage/core/helpers';
+// Import `isDev` from the leaf environment module rather than the `@shopgate/engage/core/helpers`
+// barrel: the barrel pulls in providers -> toast -> the theme, creating an import cycle back into
+// createTheme (which uses this module) and breaking theme creation during module init.
+import { isDev } from '@shopgate/pwa-common/helpers/environment';
 const spacingUnit = 8;
 
 /**

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

@@ -1,4 +1,4 @@
-import type { ColorSchemeOptions, BaseTheme } from './types';
+import type { ColorSchemeOptions, ColorSchemeTheme } from './types';
 /**
  * Helper function to add an alpha value to a color.
  * @param color The color to modify.
@@ -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) => BaseTheme;
+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,SAAS,EAAE,MAAM,SAAS,CAAC;AAc7D;;;;;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,SA2BrE,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,