@shopgate/engage 7.31.3 → 7.32.0-beta.1

package/page/widgets/NestedCategoryFilter/NestedCategoryFilter.js

@@ -3,19 +3,14 @@ import { I18n, ButtonLink } from '@shopgate/engage/components';
 import { bin2hex } from '@shopgate/engage/core/helpers';
 import { CATEGORY_PATH } from '@shopgate/engage/category';
 import { makeStyles } from '@shopgate/engage/styles';
-import { themeConfig } from '@shopgate/engage';
 import { useRoute, usePrevious, useLocalStorage } from '@shopgate/engage/core/hooks';
 import { router } from '@virtuous/conductor';
 import CategoryPicker from "./components/Picker";
 import { useNestedCategoryFilterWidget } from "./hooks";
 import WidgetHeadline from "../../components/WidgetHeadline";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-const {
-  colors
-} = themeConfig;
 const useStyles = makeStyles()(theme => ({
   container: {
-    background: colors.light,
     display: 'flex',
     flexDirection: 'column',
     paddingBottom: theme.spacing(2)

package/page/widgets/NestedCategoryFilter/components/Picker/components/SheetItem/index.js

@@ -11,8 +11,8 @@ const useStyles = makeStyles()(theme => ({
     color: theme.palette.text.primary
   },
   buttonSelected: {
-    background: 'var(--color-background-accent)',
-    boxShadow: `${theme.spacing(-2.5)}px 0px 0px var(--color-background-accent), ${theme.spacing(2.5)}px 0px 0px var(--color-background-accent)`,
+    background: theme.palette.background.emphasized,
+    boxShadow: `${theme.spacing(-2.5)}px 0px 0px ${theme.palette.background.emphasized}, ${theme.spacing(2.5)}px 0px 0px ${theme.palette.background.emphasized}`,
     margin: '-1px 0',
     paddingTop: 17,
     paddingBottom: 17

package/page/widgets/NestedCategoryFilter/components/Picker/index.js

@@ -2,18 +2,15 @@ import React, { useCallback, useState, useEffect, useMemo } from 'react';
 import PropTypes from 'prop-types';
 import { useSelector, useDispatch } from 'react-redux';
 import { fetchCategoryOrRootCategories } from '@shopgate/engage/category';
+import { Typography } from '@shopgate/engage/components';
 import { makeStyles } from '@shopgate/engage/styles';
-import { themeConfig } from '@shopgate/engage';
 import { i18n } from '@shopgate/engage/core/helpers';
 import Sheet from "./components/Sheet";
 import { getCategoriesById } from "../../../CategoryList/selectors";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-const {
-  colors
-} = themeConfig;
 const useStyles = makeStyles()(theme => ({
   button: {
-    background: 'var(--color-background-accent)',
+    background: theme.palette.background.emphasized,
     color: theme.palette.text.primary,
     display: 'flex',
     flexDirection: 'column',
@@ -26,16 +23,15 @@ const useStyles = makeStyles()(theme => ({
     cursor: 'pointer'
   },
   buttonDisabled: {
-    color: colors.shade4,
+    color: theme.palette.grey.medium,
     cursor: 'not-allowed'
   },
   label: {
-    fontSize: 12,
     marginTop: -2,
     marginBottom: 4
   },
   selection: {
-    fontWeight: 500,
+    fontWeight: theme.typography.fontWeightMedium,
     lineHeight: 1.125
   }
 }));
@@ -99,7 +95,9 @@ const CategoryPicker = ({
       className: cx(classes.button, {
         [classes.buttonDisabled]: disabled
       }, 'widget__nested-category-filter__category-picker'),
-      children: [label && /*#__PURE__*/_jsx("div", {
+      children: [label && /*#__PURE__*/_jsx(Typography, {
+        variant: "caption",
+        component: "div",
         className: classes.label,
         children: label
       }), /*#__PURE__*/_jsx("div", {

package/page/widgets/Placeholder/Placeholder.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import { makeStyles } from '@shopgate/engage/styles';
+import { Typography } from '@shopgate/engage/components';
 import { usePlaceholderWidget } from "./hooks";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useStyles = makeStyles()(theme => ({
@@ -7,14 +8,11 @@ const useStyles = makeStyles()(theme => ({
     padding: theme.spacing(2),
     minHeight: 200
   },
-  name: {
-    fontSize: 14
-  },
   pre: {
-    background: '#f7f9fc',
-    border: '1px solid #dbdde2',
+    background: theme.palette.background.emphasized,
+    border: `1px solid ${theme.components.border.light}`,
     borderRadius: 8,
-    color: '#000',
+    color: theme.contrastColor(theme.palette.background.emphasized),
     fontSize: 10,
     overflowY: 'auto',
     padding: theme.spacing(1)
@@ -39,8 +37,9 @@ const PlaceholderWidget = () => {
   } = usePlaceholderWidget();
   return /*#__PURE__*/_jsxs("div", {
     className: classes.root,
-    children: [/*#__PURE__*/_jsx("div", {
-      className: classes.name,
+    children: [/*#__PURE__*/_jsx(Typography, {
+      variant: "body2",
+      component: "div",
       children: name
     }), /*#__PURE__*/_jsx("pre", {
       className: classes.pre,

package/product/components/Availability/Availability.js

@@ -13,9 +13,6 @@ const useStyles = makeStyles()({
     width: '70%',
     marginTop: 5,
     marginBottom: 2
-  },
-  availability: {
-    fontSize: '0.875rem'
   }
 });
 
@@ -48,7 +45,6 @@ function Availability({
       className: placeholderClasses,
       ready: availability !== null,
       children: availability && /*#__PURE__*/_jsx(AvailableText, {
-        className: classes.availability,
         showWhenAvailable: true,
         text: availability.text || '',
         state: availability.state

package/product/components/Characteristics/Characteristic/components/SheetItem/index.js

@@ -2,12 +2,8 @@ import React, { useCallback, memo } from 'react';
 import PropTypes from 'prop-types';
 import { withForwardedRef } from '@shopgate/engage/core/hocs';
 import { makeStyles, responsiveMediaQuery } from '@shopgate/engage/styles';
-import { themeConfig } from '@shopgate/pwa-common/helpers/config';
 import { CharacteristicsButton } from '@shopgate/engage/back-in-stock/components';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const {
-  colors
-} = themeConfig;
 const useStyles = makeStyles()(theme => {
   const buttonBase = {
     outline: 0,
@@ -26,7 +22,7 @@ const useStyles = makeStyles()(theme => {
     },
     buttonDisabled: {
       ...buttonBase,
-      color: colors.shade4
+      color: theme.palette.action.disabled
     },
     root: {
       padding: '16px 0',
@@ -38,12 +34,12 @@ const useStyles = makeStyles()(theme => {
     },
     rootSelected: {
       ...buttonBase,
-      background: 'var(--color-background-accent)',
-      boxShadow: '-16px 0 0 var(--color-background-accent), 16px 0 0 var(--color-background-accent)',
+      background: theme.palette.background.emphasized,
+      boxShadow: `-16px 0 0 ${theme.palette.background.emphasized}, 16px 0 0 ${theme.palette.background.emphasized}`,
       margin: '-1px 0',
       paddingTop: 17,
       paddingBottom: 17,
-      fontWeight: 500,
+      fontWeight: theme.typography.fontWeightMedium,
       [responsiveMediaQuery('>xs', {
         webOnly: true
       })]: {

package/product/components/Characteristics/Characteristic/index.js

@@ -2,19 +2,15 @@ import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
 import React, { PureComponent, Fragment } from 'react';
 import PropTypes from 'prop-types';
 import Transition from 'react-transition-group/Transition';
-import { ResponsiveContainer, ArrowDropIcon } from '@shopgate/engage/components';
+import { ResponsiveContainer, ArrowDropIcon, Typography } from '@shopgate/engage/components';
 import { withStyles, cx } from '@shopgate/engage/styles';
-import { themeConfig } from '@shopgate/engage';
 import Sheet from "./components/Sheet";
 import transition from "../transition";
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-const {
-  colors: themeColors
-} = themeConfig;
 
 /**
  * A single characteristic.
  */
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 let Characteristic = /*#__PURE__*/function (_PureComponent) {
   /**
    * @param {Object} props The component props
@@ -103,7 +99,9 @@ let Characteristic = /*#__PURE__*/function (_PureComponent) {
         ref: charRef,
         style: transition[state],
         "data-test-id": label,
-        children: [selected && /*#__PURE__*/_jsx("div", {
+        children: [selected && /*#__PURE__*/_jsx(Typography, {
+          variant: "caption",
+          component: "div",
           className: `${classes.label} theme__product__characteristic__label`,
           children: label
         }), /*#__PURE__*/_jsx("div", {
@@ -183,7 +181,7 @@ Characteristic.defaultProps = {
 };
 export default withStyles(Characteristic, theme => ({
   button: {
-    background: 'var(--color-background-accent)',
+    background: theme.palette.background.emphasized,
     color: theme.palette.text.primary,
     position: 'relative',
     cursor: 'pointer',
@@ -197,20 +195,19 @@ export default withStyles(Characteristic, theme => ({
     transition: 'background 250ms ease-in, color 250ms ease-in'
   },
   buttonDisabled: {
-    color: `${themeColors.shade4} !important`
+    color: `${theme.palette.grey.medium} !important`
   },
   label: {
-    fontSize: 12,
     marginTop: -2,
     marginBottom: 4
   },
   selection: {
-    fontWeight: 500,
+    fontWeight: theme.typography.fontWeightMedium,
     lineHeight: 1.125
   },
   arrow: {
     position: 'absolute',
     right: 32,
-    fontSize: 20
+    fontSize: theme.components.icon.small
   }
 }));

package/product/components/Characteristics/Swatch/index.js

@@ -3,13 +3,9 @@ import PropTypes from 'prop-types';
 import Transition from 'react-transition-group/Transition';
 import { VariantSwatch } from '@shopgate/engage/product/components';
 import { makeStyles } from '@shopgate/engage/styles';
-import { themeConfig } from '@shopgate/pwa-common/helpers/config';
 import transition from "../transition";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-const {
-  colors
-} = themeConfig;
-const useStyles = makeStyles()(() => ({
+const useStyles = makeStyles()(theme => ({
   label: {
     display: 'flex',
     flexDirection: 'column',
@@ -18,11 +14,11 @@ const useStyles = makeStyles()(() => ({
     outline: 0,
     padding: '12px 16px',
     transition: 'background 250ms ease-in, color 250ms ease-in',
-    fontWeight: 500,
+    fontWeight: theme.typography.fontWeightMedium,
     lineHeight: 1.125
   },
   labelDisabled: {
-    color: colors.shade4
+    color: theme.palette.action.disabled
   },
   items: {
     padding: '0 16px',

package/product/components/Characteristics/transition.js

@@ -1,10 +1,10 @@
 export default {
   entering: {
-    background: 'var(--color-primary)',
-    color: 'var(--color-primary-contrast)'
+    background: 'var(--sg-palette-primary-main)',
+    color: 'var(--sg-palette-primary-contrastText)'
   },
   entered: {
-    background: 'var(--color-primary)',
-    color: 'var(--color-primary-contrast)'
+    background: 'var(--sg-palette-primary-main)',
+    color: 'var(--sg-palette-primary-contrastText)'
   }
 };

package/product/components/Description/index.js

@@ -1,20 +1,16 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { SurroundPortals, PlaceholderParagraph, HtmlSanitizer, I18n } from '@shopgate/engage/components';
+import { SurroundPortals, PlaceholderParagraph, HtmlSanitizer, I18n, Typography } from '@shopgate/engage/components';
 import { PRODUCT_DESCRIPTION } from '@shopgate/engage/product';
 import { makeStyles } from '@shopgate/engage/styles';
 import connect from "./connector";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useStyles = makeStyles()(theme => ({
   container: {
-    fontSize: '0.875rem',
     padding: '0.8125rem 1rem 1rem'
   },
   title: {
-    fontSize: '1rem',
-    fontWeight: 500,
-    marginBottom: '0.5rem',
-    color: theme.palette.text.primary
+    marginBottom: '0.5rem'
   },
   content: {
     lineHeight: 1.7,
@@ -69,8 +65,11 @@ function Description({
     },
     children: html !== '' && /*#__PURE__*/_jsxs("div", {
       className: cx(classes.container, 'engage__product__description'),
-      children: [/*#__PURE__*/_jsx("div", {
+      children: [/*#__PURE__*/_jsx(Typography, {
+        variant: "h5",
+        component: "div",
         className: cx(classes.title, 'theme__description_heading'),
+        color: "textPrimary",
         children: /*#__PURE__*/_jsx(I18n.Text, {
           string: "product.description_heading"
         })

package/product/components/EffectivityDates/index.js

@@ -1,8 +1,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { isBeta, useWidgetSettings, useWidgetStyles } from '@shopgate/engage/core';
+import { i18n } from '@shopgate/engage/core/helpers';
 import { makeStyles } from '@shopgate/engage/styles';
-import { I18n, TimeBoundary, SurroundPortals } from '@shopgate/engage/components';
+import { TimeBoundary, SurroundPortals, Typography } from '@shopgate/engage/components';
 import { PRODUCT_EFFECTIVITY_DATES } from '@shopgate/pwa-common-commerce/product/constants/Portals';
 import { showExpiringLabel, showScheduledLabel } from "./helpers";
 import connect from "./connector";
@@ -12,12 +13,10 @@ const useStyles = makeStyles()((theme, {
 }) => ({
   hint: {
     color: theme.palette.success.main,
-    fontSize: '0.75rem',
     ...(hintStyle || {})
   },
   notAvailable: {
-    color: theme.palette.error.main,
-    fontSize: '0.75rem'
+    color: theme.palette.error.main
   }
 }));
 
@@ -60,30 +59,37 @@ const EffectivityDates = ({
         after
       }) => {
         if (before) {
-          return showScheduledLabel(startDate, settings) ? /*#__PURE__*/_jsx(I18n.Text, {
-            string: "product.available.at",
-            params: {
+          return showScheduledLabel(startDate, settings) ? /*#__PURE__*/_jsx(Typography, {
+            variant: "caption",
+            component: "span",
+            color: "success",
+            className: classes.hint,
+            children: i18n.text('product.available.at', {
               startDate
-            },
-            className: classes.hint
+            })
           }) : children;
         }
         if (between) {
           return /*#__PURE__*/_jsxs(_Fragment, {
-            children: [children, showExpiringLabel(endDate, settings) && /*#__PURE__*/_jsx(I18n.Text, {
-              string: "product.available.until",
-              params: {
+            children: [children, showExpiringLabel(endDate, settings) && /*#__PURE__*/_jsx(Typography, {
+              variant: "caption",
+              component: "span",
+              color: "success",
+              className: classes.hint,
+              children: i18n.text('product.available.until', {
                 endDate
-              },
-              className: classes.hint
+              })
             })]
           });
         }
         if (after) {
           productNotAvailable();
-          return showExpiringLabel(endDate, settings) ? /*#__PURE__*/_jsx(I18n.Text, {
-            string: "product.available.not",
-            className: cx(classes.hint, classes.notAvailable)
+          return showExpiringLabel(endDate, settings) ? /*#__PURE__*/_jsx(Typography, {
+            variant: "caption",
+            component: "span",
+            color: "error",
+            className: cx(classes.hint, classes.notAvailable),
+            children: i18n.text('product.available.not')
           }) : children;
         }
         return children;

package/product/components/FilterBar/components/Content/components/FilterButton/index.js

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { makeStyles } from '@shopgate/engage/styles';
 import { themeConfig } from '@shopgate/pwa-common/helpers/config';
-import { Grid, I18n, Ripple, FilterIcon } from '@shopgate/engage/components';
+import { Grid, I18n, Ripple, FilterIcon, Typography } from '@shopgate/engage/components';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const {
   variables
@@ -10,8 +10,7 @@ const {
 const useStyles = makeStyles()(theme => ({
   button: {
     color: 'inherit',
-    fontSize: '1.5rem',
-    lineHeight: 1,
+    fontSize: theme.components.icon.medium,
     outline: 0,
     padding: 0,
     minWidth: variables.navigator.height,
@@ -25,9 +24,6 @@ const useStyles = makeStyles()(theme => ({
   },
   filterButtonLabel: {
     alignSelf: 'center',
-    fontSize: '0.875rem',
-    fontWeight: '500',
-    lineHeight: 1,
     paddingRight: theme.spacing(1)
   },
   filterButtonRipple: {
@@ -66,7 +62,9 @@ function FilterButton({
         children: [/*#__PURE__*/_jsx(Grid.Item, {
           className: classes.filterButton,
           component: "div",
-          children: /*#__PURE__*/_jsx("span", {
+          children: /*#__PURE__*/_jsx(Typography, {
+            variant: "subtitle2",
+            component: "span",
             className: classes.filterButtonLabel,
             children: /*#__PURE__*/_jsx(I18n.Text, {
               string: "titles.filter"

package/product/components/FilterBar/components/Content/components/Sort/index.js

@@ -6,7 +6,6 @@ import { themeConfig } from '@shopgate/pwa-common/helpers/config';
 import Item from "./components/Item";
 import { jsx as _jsx } from "react/jsx-runtime";
 const {
-  shadows,
   variables
 } = themeConfig;
 const useStyles = makeStyles()(theme => ({
@@ -22,14 +21,13 @@ const useStyles = makeStyles()(theme => ({
     whiteSpace: 'nowrap'
   },
   selection: {
-    fontSize: '0.875rem',
-    fontWeight: '500',
-    lineHeight: 1,
+    fontSize: theme.typography.body2.fontSize,
+    fontWeight: theme.typography.fontWeightMedium,
     paddingTop: 1,
     alignSelf: 'center'
   },
   icon: {
-    fontSize: '1.5rem'
+    fontSize: theme.components.icon.medium
   },
   iconOpen: {
     transform: 'rotate(180deg)'
@@ -40,8 +38,8 @@ const useStyles = makeStyles()(theme => ({
     zIndex: 2,
     top: '100%',
     left: 0,
-    background: 'var(--color-background-accent)',
-    boxShadow: shadows.filter.sort,
+    background: theme.palette.background.emphasized,
+    boxShadow: 'rgba(0, 0, 0, 0.16) 0 2px 2px',
     [responsiveMediaQuery('>xs', {
       webOnly: true
     })]: {
@@ -63,7 +61,7 @@ const useStyles = makeStyles()(theme => ({
     }
   },
   selectItemSelected: {
-    fontWeight: 500
+    fontWeight: theme.typography.fontWeightMedium
   },
   selectBox: {
     flexGrow: 2

package/product/components/FilterBar/components/FilterModal/FilterModalContent.js

@@ -1,18 +1,14 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { themeConfig } from '@shopgate/engage';
 import { makeStyles, responsiveMediaQuery } from '@shopgate/engage/styles';
 import { useFilterPage } from '@shopgate/engage/filter/hooks';
 import FilterPageContent from '@shopgate/engage/filter/components/FilterPageContent';
 import Title from "./FilterModalTitle";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const {
-  colors
-} = themeConfig;
-const useStyles = makeStyles()({
+const useStyles = makeStyles()(theme => ({
   root: {
     zIndex: 1,
-    background: colors.light,
+    background: theme.palette.background.surface,
     borderRadius: 4,
     minWidth: 300,
     [responsiveMediaQuery('>=md')]: {
@@ -29,7 +25,7 @@ const useStyles = makeStyles()({
     overflow: 'auto',
     flex: 1
   }
-});
+}));
 
 /**
  * Filter modal content component

package/product/components/FilterBar/components/FilterModal/FilterModalTitle.js

@@ -1,10 +1,10 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { i18n } from '@shopgate/engage/core/helpers';
-import { Ripple, CrossIcon } from '@shopgate/engage/components';
+import { Ripple, CrossIcon, Typography } from '@shopgate/engage/components';
 import { makeStyles } from '@shopgate/engage/styles';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const useStyles = makeStyles()({
+const useStyles = makeStyles()(theme => ({
   root: {
     display: 'flex',
     flexDirection: 'row',
@@ -15,30 +15,29 @@ const useStyles = makeStyles()({
     paddingBottom: 16
   },
   title: {
-    flex: 1,
-    fontSize: '1.25rem'
+    flex: 1
   },
   closeButton: {
-    fontSize: 21,
+    fontSize: theme.components.icon.small,
     marginRight: 12,
     cursor: 'pointer',
-    color: 'var(--color-primary)'
+    color: theme.palette.primary.main
   },
   actionButton: {
     cursor: 'pointer',
     marginLeft: 16,
-    color: 'var(--color-primary)',
-    fontWeight: '600',
+    color: theme.palette.primary.main,
+    fontWeight: theme.typography.fontWeightBold,
     padding: 8
   },
   actionButtonSecondary: {
     cursor: 'pointer',
     marginLeft: 16,
-    color: 'var(--color-primary)',
-    fontWeight: '500',
+    color: theme.palette.primary.main,
+    fontWeight: theme.typography.fontWeightMedium,
     padding: 8
   }
-});
+}));
 
 /**
  * Filter Modal Title
@@ -59,7 +58,9 @@ const FilterModalTitle = ({
       onClick: close,
       className: classes.closeButton,
       children: /*#__PURE__*/_jsx(CrossIcon, {})
-    }), /*#__PURE__*/_jsx("span", {
+    }), /*#__PURE__*/_jsx(Typography, {
+      variant: "h3",
+      component: "span",
       className: classes.title,
       children: i18n.text('titles.filter')
     }), /*#__PURE__*/_jsx(Ripple, {

package/product/components/FilterBar/index.js

@@ -2,16 +2,12 @@ import React, { useState, useMemo, memo, useCallback } from 'react';
 import PropTypes from 'prop-types';
 import { ResponsiveContainer } from '@shopgate/engage/components';
 import { hasNewServices } from '@shopgate/engage/core/helpers';
-import { themeConfig } from '@shopgate/engage';
 import { SortProvider, SORT_SCOPE_CATEGORY, SORT_SCOPE_SEARCH } from '@shopgate/engage/filter';
 import { makeStyles, useTheme } from '@shopgate/engage/styles';
 import Provider from "./FilterBarProvider";
 import Content from "./components/Content";
 import Modal from "./components/FilterModal";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const {
-  colors
-} = themeConfig;
 const useStyles = makeStyles()({
   root: {
     transition: 'transform 200ms cubic-bezier(0.25, 0.1, 0.25, 1)'
@@ -37,11 +33,11 @@ const FilterBar = ({
     setActive(count > 0);
   }, []);
   const style = useMemo(() => hasNewServices() ? {
-    background: active ? 'var(--color-background-accent)' : 'var(--color-background-accent)',
-    color: active ? 'var(--color-primary)' : theme.palette.text.primary
+    background: theme.palette.background.emphasized,
+    color: active ? theme.palette.primary.main : theme.palette.text.primary
   } : {
-    background: active ? 'var(--color-secondary)' : colors.background,
-    color: active ? 'var(--color-secondary-contrast)' : colors.dark
+    background: active ? theme.palette.secondary.main : theme.palette.background.emphasized,
+    color: active ? theme.palette.secondary.contrastText : theme.palette.text.primary
   }, [active, theme]);
   const sortScope = useMemo(() => categoryId ? SORT_SCOPE_CATEGORY : SORT_SCOPE_SEARCH, [categoryId]);
   return /*#__PURE__*/_jsx("div", {

package/product/components/Header/PriceStriked/index.js

@@ -5,12 +5,8 @@ import { PRODUCT_PRICE_STRIKED, PRODUCT_PRICE_STRIKED_AFTER, PRODUCT_PRICE_STRIK
 import { withPriceCalculation } from '@shopgate/engage/product/hocs';
 import { useWidgetSettings } from '@shopgate/engage/core/hooks';
 import { makeStyles } from '@shopgate/engage/styles';
-import { themeConfig } from '@shopgate/pwa-common/helpers/config';
 import connect from "./connector";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-const {
-  colors
-} = themeConfig;
 const useStyles = makeStyles()(theme => ({
   placeholder: {
     height: 16,
@@ -19,13 +15,13 @@ const useStyles = makeStyles()(theme => ({
     marginBottom: 2
   },
   msrp: {
-    color: colors.shade11,
-    fontSize: '0.875rem',
-    marginRight: theme.spacing(0.5)
+    color: theme.palette.grey.dark,
+    marginRight: theme.spacing(0.5),
+    fontSize: theme.typography.body2.fontSize
   },
   msrpStriked: {
     display: 'inline',
-    fontSize: '0.875rem'
+    fontSize: theme.typography.body2.fontSize
   }
 }));