@shopgate/pwa-ui-shared 7.31.4-beta.1 → 7.32.0-beta.1

package/TextField/components/Hint/index.js

@@ -1,7 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { I18n } from '@shopgate/engage/components';
-import { themeConfig } from '@shopgate/pwa-common/helpers/config';
 import { makeStyles } from '@shopgate/engage/styles';
 import { jsx as _jsx } from "react/jsx-runtime";
 const easing = '450ms cubic-bezier(0.23, 1, 0.32, 1)';
@@ -11,12 +10,12 @@ const ellipsisLine = {
   whiteSpace: 'nowrap',
   textOverflow: 'ellipsis'
 };
-const useStyles = makeStyles()({
+const useStyles = makeStyles()(theme => ({
   hint: {
     position: 'absolute',
     pointerEvents: 'none',
     bottom: 12,
-    color: themeConfig.colors.shade4,
+    color: theme.palette.grey.medium,
     willChange: 'transform',
     transition: `opacity ${easing}`,
     ...ellipsisLine
@@ -24,7 +23,7 @@ const useStyles = makeStyles()({
   hintInactive: {
     opacity: 0
   }
-});
+}));
 
 /**
  * The form element hint component.

package/TextField/components/Label/index.js

@@ -18,7 +18,7 @@ const useStyles = makeStyles()(theme => ({
     lineHeight: '19px',
     pointerEvents: 'none',
     userSelect: 'none',
-    color: 'var(--color-text-medium-emphasis)',
+    color: theme.palette.text.secondary,
     transformOrigin: 'left top 0px',
     willChange: 'transform, color',
     transition: `transform ${easing}, color ${easing}`,
@@ -28,7 +28,7 @@ const useStyles = makeStyles()(theme => ({
     transform: 'translate3d(0, -22px, 0) scale3d(0.75, 0.75, 0.75)'
   },
   labelRegular: {
-    color: 'var(--color-text-medium-emphasis)'
+    color: theme.palette.text.secondary
   },
   labelError: {
     color: theme.palette.error.main

package/TextField/components/Underline/index.js

@@ -1,18 +1,13 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import color from 'color';
-import { getCSSCustomProp, makeStyles, useTheme } from '@shopgate/engage/styles';
-import { themeConfig } from '@shopgate/pwa-common/helpers/config';
+import { makeStyles, useTheme } from '@shopgate/engage/styles';
 import { jsx as _jsx } from "react/jsx-runtime";
-const {
-  colors
-} = themeConfig;
 const easing = '450ms cubic-bezier(0.23, 1, 0.32, 1)';
-const useStyles = makeStyles()({
+const useStyles = makeStyles()(theme => ({
   underlineWrapper: {
     position: 'relative',
     width: '100%',
-    borderBottom: `1px solid ${colors.shade12}`,
+    borderBottom: `1px solid ${theme.components.border.dark}`,
     marginTop: 2,
     marginBottom: 7
   },
@@ -25,23 +20,20 @@ const useStyles = makeStyles()({
     willChange: 'transform',
     transition: `transform ${easing}`
   }
-});
+}));
 
 /**
  * Returns the underline inline style.
+ * @param {Object} theme The theme object.
  * @param {boolean} focused Is focused set or not.
  * @param {boolean} hasError Has error set or not.
  * @param {string} errorColor Theme error main color.
  * @return {Object} style
  */
-const getUnderlineStyle = (focused, hasError, errorColor) => {
-  const primaryColor = getCSSCustomProp('--color-primary') || colors.primary;
-  let focusColor = '--color-primary';
-  if (color(primaryColor).luminosity() >= 0.8) {
-    focusColor = '--color-secondary';
-  }
+const getUnderlineStyle = (theme, focused, hasError, errorColor) => {
+  const focusColor = theme.palette.primary.main;
   return {
-    borderBottomColor: hasError ? errorColor : `var(${focusColor}, ${colors.focus})`,
+    borderBottomColor: hasError ? errorColor : focusColor,
     ...(!focused && !hasError && {
       transform: 'scale3d(0,1,1)'
     })
@@ -64,7 +56,7 @@ const Underline = props => {
     "aria-hidden": true,
     children: /*#__PURE__*/_jsx("div", {
       className: classes.underline,
-      style: getUnderlineStyle(props.isFocused, props.hasErrorMessage, theme.palette.error.main)
+      style: getUnderlineStyle(theme, props.isFocused, props.hasErrorMessage, theme.palette.error.main)
     })
   });
 };

package/package.json

@@ -1,16 +1,16 @@
 {
   "name": "@shopgate/pwa-ui-shared",
-  "version": "7.31.4-beta.1",
+  "version": "7.32.0-beta.1",
   "description": "Shopgate's shared UI components.",
   "main": "index.js",
   "license": "Apache-2.0",
   "dependencies": {
-    "@shopgate/pwa-ui-ios": "7.31.4-beta.1",
-    "@shopgate/pwa-ui-material": "7.31.4-beta.1"
+    "@shopgate/pwa-ui-ios": "7.32.0-beta.1",
+    "@shopgate/pwa-ui-material": "7.32.0-beta.1"
   },
   "devDependencies": {
-    "@shopgate/pwa-common": "7.31.4-beta.1",
-    "@shopgate/pwa-common-commerce": "7.31.4-beta.1",
+    "@shopgate/pwa-common": "7.32.0-beta.1",
+    "@shopgate/pwa-common-commerce": "7.32.0-beta.1",
     "classnames": "2.5.1",
     "react": "^17.0.2"
   },