@shopgate/pwa-ui-material 7.31.3 → 7.32.0-beta.1

package/Accordion/index.js

@@ -8,7 +8,7 @@ import { makeStyles, responsiveMediaQuery } from '@shopgate/engage/styles';
 import AccordionContent from "./components/AccordionContent";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { createElement as _createElement } from "react";
-const useStyles = makeStyles()({
+const useStyles = makeStyles()(theme => ({
   toggle: {
     padding: '12px 16px',
     position: 'relative',
@@ -27,7 +27,7 @@ const useStyles = makeStyles()({
   chevronContainer: {
     display: 'flex',
     flexShrink: 0,
-    fontSize: '1.5rem',
+    fontSize: theme.components.icon.medium,
     [responsiveMediaQuery('>sm', {
       webOnly: true
     })]: {
@@ -54,7 +54,7 @@ const useStyles = makeStyles()({
     transition: 'transform 250ms cubic-bezier(0.25, 0.1, 0.25, 1)',
     transform: 'rotateZ(90deg)'
   }
-});
+}));
 
 /**
  * Accordion component

package/AppBar/components/Icon/index.js

@@ -2,12 +2,12 @@ import React from 'react';
 import PropTypes from 'prop-types';
 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: {
     color: 'inherit',
     display: 'flex',
     flexShrink: 0,
-    fontSize: 24,
+    fontSize: theme.components.icon.medium,
     height: 56,
     justifyContent: 'center',
     alignItems: 'center',
@@ -16,7 +16,7 @@ const useStyles = makeStyles()({
     position: 'relative',
     width: 56
   }
-});
+}));
 
 /**
  * The AppBarIcon component.

package/AppBar/components/Title/index.js

@@ -1,17 +1,14 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import { Typography } from '@shopgate/engage/components';
 import { makeStyles } from '@shopgate/engage/styles';
 import { jsx as _jsx } from "react/jsx-runtime";
 const useStyles = makeStyles()({
   root: {
-    fontSize: 20,
-    fontWeight: 500,
     flexGrow: 1,
-    lineHeight: '56px',
-    overflow: 'hidden',
     padding: '0 16px',
-    textOverflow: 'ellipsis',
-    whiteSpace: 'nowrap'
+    display: 'flex',
+    alignItems: 'center'
   }
 });
 
@@ -31,7 +28,10 @@ const AppBarTitle = ({
   if (!title) {
     return null;
   }
-  return /*#__PURE__*/_jsx("div", {
+  return /*#__PURE__*/_jsx(Typography, {
+    variant: "h3",
+    component: "div",
+    noWrap: true,
     className: cx(classes.root, 'theme__app-bar__title'),
     role: "heading",
     "aria-labelledby": "titleLabel",

package/AppBar/index.js

@@ -1,7 +1,6 @@
 import React, { useMemo, useRef, useLayoutEffect } from 'react';
 import PropTypes from 'prop-types';
 import { getAbsoluteHeight } from '@shopgate/pwa-common/helpers/dom';
-import { themeShadows, themeColors } from '@shopgate/pwa-common/helpers/config';
 import { makeStyles, setCSSCustomProp } from '@shopgate/engage/styles';
 import { SurroundPortals } from '@shopgate/engage/components';
 import { APP_BAR_CONTENT } from '@shopgate/engage/core/constants';
@@ -26,6 +25,7 @@ const useStyles = makeStyles()({
   inner: {
     background: 'inherit',
     display: 'flex',
+    alignItems: 'center',
     justifyContent: 'space-between',
     position: 'relative',
     zIndex: 14
@@ -65,7 +65,7 @@ const AppBar = ({
   const style = useMemo(() => ({
     background: backgroundColor,
     color: textColor,
-    boxShadow: !shadow ? 'none' : themeShadows.material
+    boxShadow: !shadow ? 'none' : '0 1px 6px rgba(0, 0, 0, .117647), 0 1px 4px rgba(0, 0, 0, .117647)'
   }), [backgroundColor, shadow, textColor]);
   const observer = useMemo(() => new MutationObserver(() => {
     updateAppBarHeight(contentRef);
@@ -103,13 +103,13 @@ const AppBar = ({
   });
 };
 AppBar.defaultProps = {
-  backgroundColor: themeColors.light,
+  backgroundColor: 'var(--sg-palette-common-white)',
   below: null,
   center: null,
   left: null,
   right: null,
   shadow: true,
-  textColor: themeColors.dark
+  textColor: 'var(--sg-palette-common-black)'
 };
 AppBar.Field = Field;
 AppBar.Icon = Icon;

package/BaseDialog/components/Content/index.js

@@ -1,15 +1,14 @@
 import React, { memo } from 'react';
 import PropTypes from 'prop-types';
-import { themeConfig } from '@shopgate/pwa-common/helpers/config';
 import { makeStyles } from '@shopgate/engage/styles';
 import { jsx as _jsx } from "react/jsx-runtime";
-const useStyles = makeStyles()({
+const useStyles = makeStyles()(theme => ({
   body: {
-    color: themeConfig.colors.shade6,
+    color: theme.palette.grey.dark,
     flexGrow: 1,
     overflow: 'auto'
   }
-});
+}));
 
 /**
  * @param {Object} props The component props.

package/BaseDialog/components/Title/index.js

@@ -1,14 +1,12 @@
 import React, { memo } from 'react';
 import PropTypes from 'prop-types';
-import { I18n, Ellipsis } from '@shopgate/engage/components';
+import { I18n, Ellipsis, Typography } from '@shopgate/engage/components';
 import { themeConfig } from '@shopgate/engage';
 import { makeStyles } from '@shopgate/engage/styles';
 import { jsx as _jsx } from "react/jsx-runtime";
 const useStyles = makeStyles()(theme => ({
   title: {
-    fontSize: '1.25em',
     lineHeight: themeConfig.typography.lineHeight,
-    fontWeight: 500,
     paddingBottom: theme.spacing(1),
     marginTop: '-.25em'
   }
@@ -27,7 +25,9 @@ const Title = ({
   if (!title) {
     return null;
   }
-  return /*#__PURE__*/_jsx("div", {
+  return /*#__PURE__*/_jsx(Typography, {
+    variant: "h3",
+    component: "div",
     className: classes.title,
     id: "basicDialogTitle",
     role: "heading",

package/BaseDialog/index.js

@@ -1,7 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { FocusTrap } from '@shopgate/engage/a11y/components';
-import { themeConfig } from '@shopgate/pwa-common/helpers/config';
 import { makeStyles, responsiveMediaQuery } from '@shopgate/engage/styles';
 import Title from "./components/Title";
 import Content from "./components/Content";
@@ -16,8 +15,8 @@ const useStyles = makeStyles()(theme => ({
     width: `calc(100vw - ${outerGap * 2}px)`,
     maxHeight: `calc(100vh - ${outerGap * 2}px)`,
     borderRadius: 2,
-    boxShadow: themeConfig.shadows.dialog,
-    background: themeConfig.colors.light,
+    boxShadow: '0 0.75em 3em 0 rgba(0, 0, 0, 0.5)',
+    background: theme.palette.background.surface,
     [responsiveMediaQuery('>xs', {
       webOnly: true
     })]: {

package/FloatingActionButton/index.js

@@ -1,6 +1,5 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { themeConfig } from '@shopgate/pwa-common/helpers/config';
 import { makeStyles } from '@shopgate/engage/styles';
 import { jsx as _jsx } from "react/jsx-runtime";
 const SIZE_BIG = 'big';
@@ -26,7 +25,7 @@ const useStyles = makeStyles()({
     width: 56
   },
   buttonShadow: {
-    boxShadow: themeConfig.shadows.buttons.elevated
+    boxShadow: '0 8px 13px rgba(0, 0, 0, 0.25)'
   }
 });
 

package/NavDrawer/components/Divider/index.js

@@ -1,19 +1,18 @@
 import React from 'react';
-import { themeColors } from '@shopgate/pwa-common/helpers/config';
 import { makeStyles } from '@shopgate/engage/styles';
 import { jsx as _jsx } from "react/jsx-runtime";
-const useStyles = makeStyles()({
+const useStyles = makeStyles()(theme => ({
   root: {
     // prevent two consecutive dividers
     '& + hr': {
       display: 'none'
     },
-    background: themeColors.darkGray,
+    background: theme.components.separatorLine,
     border: 0,
     height: 1,
     margin: '16px 0'
   }
-});
+}));
 
 /**
  * @returns {JSX}

package/NavDrawer/components/Item/index.js

@@ -3,10 +3,9 @@ import PropTypes from 'prop-types';
 import { UIEvents } from '@shopgate/pwa-core';
 import { withForwardedRef } from '@shopgate/engage/core';
 import { I18n } from '@shopgate/engage/components';
-import { themeColors } from '@shopgate/pwa-common/helpers/config';
 import { makeStyles } from '@shopgate/engage/styles';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const useStyles = makeStyles()({
+const useStyles = makeStyles()(theme => ({
   srOnly: {
     clip: 'rect(1px, 1px, 1px, 1px)',
     height: '1px',
@@ -25,7 +24,7 @@ const useStyles = makeStyles()({
     alignItems: 'flex-start',
     color: 'inherit',
     display: 'flex',
-    fontWeight: 500,
+    fontWeight: theme.typography.fontWeightMedium,
     outline: 0,
     padding: '16px 8px 16px 0',
     position: 'relative',
@@ -44,10 +43,10 @@ const useStyles = makeStyles()({
   },
   icon: {
     boxSizing: 'content-box',
-    color: themeColors.gray,
+    color: theme.palette.grey.dark,
     padding: '0 32px 0 16px'
   }
-});
+}));
 
 /**
  * The NavDrawerItem component.

package/NavDrawer/components/Title/index.js

@@ -1,17 +1,14 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { I18n } from '@shopgate/engage/components';
-import { themeColors } from '@shopgate/pwa-common/helpers/config';
+import { I18n, Typography } from '@shopgate/engage/components';
 import { makeStyles } from '@shopgate/engage/styles';
 import { jsx as _jsx } from "react/jsx-runtime";
-const useStyles = makeStyles()({
+const useStyles = makeStyles()(theme => ({
   root: {
-    color: themeColors.shade11,
-    fontSize: '0.875rem',
-    fontWeight: 500,
+    color: theme.palette.grey.dark,
     margin: '16px 0 0 16px'
   }
-});
+}));
 
 /**
  * @param {Object} props The component props.
@@ -26,7 +23,9 @@ const NavDrawerTitle = ({
   if (!text.length) {
     return null;
   }
-  return /*#__PURE__*/_jsx("div", {
+  return /*#__PURE__*/_jsx(Typography, {
+    variant: "subtitle2",
+    component: "div",
     className: classes.root,
     children: /*#__PURE__*/_jsx(I18n.Text, {
       string: text

package/NavDrawer/index.js

@@ -5,7 +5,6 @@ import Transition from 'react-transition-group/Transition';
 import { Backdrop } from '@shopgate/engage/components';
 import { ModalStateTracker } from '@shopgate/engage/a11y/components';
 import { UIEvents } from '@shopgate/pwa-core';
-import { themeShadows, themeColors } from '@shopgate/pwa-common/helpers/config';
 import { makeStyles } from '@shopgate/engage/styles';
 import Divider from "./components/Divider";
 import Item from "./components/Item";
@@ -15,18 +14,18 @@ import transition from "./transition";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 const OPEN = 'navdrawer_open';
 const CLOSE = 'navdrawer_close';
-const useStyles = makeStyles()({
+const useStyles = makeStyles()(theme => ({
   content: {
-    fontSize: 14,
+    fontSize: theme.typography.body2.fontSize,
     height: '100%',
     overflowY: 'scroll',
     paddingBottom: 'var(--safe-area-inset-bottom)',
     WebkitOverflowScrolling: 'touch'
   },
   drawer: {
-    background: themeColors.light,
-    boxShadow: themeShadows.navDrawer,
-    color: themeColors.dark,
+    background: theme.palette.background.surface,
+    boxShadow: '0 0 15px rgba(0, 0, 0, .24)',
+    color: theme.palette.text.primary,
     height: '100vh',
     left: 0,
     maxWidth: '300px',
@@ -40,7 +39,7 @@ const useStyles = makeStyles()({
       maxWidth: '67vw'
     }
   }
-});
+}));
 
 /**
  * Material navigation drawer; opens/closes via `NavDrawer.open()` / `NavDrawer.close()` (UIEvents).

package/SnackBar/index.js

@@ -1,19 +1,13 @@
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import PropTypes from 'prop-types';
-import Color from 'color';
 import { config } from 'react-spring';
 import { Spring } from 'react-spring/renderprops.cjs';
 import Ellipsis from '@shopgate/pwa-common/components/Ellipsis';
 import { i18n } from '@shopgate/engage/core/helpers';
-import { themeColors, themeShadows } from '@shopgate/pwa-common/helpers/config';
 import { makeStyles } from '@shopgate/engage/styles';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const defaultToast = {};
-const backgroundColor = themeColors.lightDark;
-const buttonColor = themeColors.accent;
-const buttonColorContrast = Color(buttonColor).contrast(Color(backgroundColor));
-const safeButtonColor = buttonColorContrast > 4 ? buttonColor : themeColors.light;
-const useStyles = makeStyles()({
+const useStyles = makeStyles()(theme => ({
   container: {
     position: 'fixed',
     height: 'var(--snack-bar-height, 80px)',
@@ -34,12 +28,12 @@ const useStyles = makeStyles()({
   },
   box: {
     alignItems: 'center',
-    background: backgroundColor,
+    background: theme.components.snackbar.background,
     borderRadius: 3,
-    boxShadow: themeShadows.toast,
-    color: themeColors.light,
+    boxShadow: '0 3px 1px -2px rgba(0, 0, 0, .2), 0 2px 2px 0 rgba(0, 0, 0, .14), 0 1px 5px 0 rgba(0, 0, 0, .12)',
+    color: theme.contrastColor(theme.components.snackbar.background),
     display: 'flex',
-    fontSize: '0.875rem',
+    fontSize: theme.typography.body2.fontSize,
     justifyContent: 'space-between',
     letterSpacing: 0.5,
     margin: 16,
@@ -54,8 +48,8 @@ const useStyles = makeStyles()({
     overflow: 'hidden'
   },
   actionButton: {
-    color: safeButtonColor,
-    fontWeight: 500,
+    color: theme.palette.secondary.main,
+    fontWeight: theme.typography.fontWeightMedium,
     height: 36,
     letterSpacing: 'inherit',
     margin: '0 -8px 0 8px',
@@ -63,7 +57,7 @@ const useStyles = makeStyles()({
     padding: '0 8px',
     textTransform: 'uppercase'
   }
-});
+}));
 
 /**
  * Calculates the required amount of rows for the snack bar.

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@shopgate/pwa-ui-material",
-  "version": "7.31.3",
+  "version": "7.32.0-beta.1",
   "description": "Shopgate's material design UI components.",
   "main": "index.js",
   "license": "Apache-2.0",
   "devDependencies": {
-    "@shopgate/pwa-common": "7.31.3",
+    "@shopgate/pwa-common": "7.32.0-beta.1",
     "@types/color": "^4.2.0",
     "@types/react-transition-group": "^4.4.12",
     "react": "^17.0.2",