@graphcommerce/graphcms-ui 2.104.15 → 2.104.19

package/CHANGELOG.md

@@ -3,6 +3,28 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [2.104.18](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/graphcms-ui@2.104.17...@graphcommerce/graphcms-ui@2.104.18) (2021-11-04)
+
+
+### Bug Fixes
+
+* remove hardcoded fontSize ([e4e09e1](https://github.com/ho-nl/m2-pwa/commit/e4e09e11baeb8edeff634550b8cdb88571d96911))
+
+
+
+
+
+## [2.104.16](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/graphcms-ui@2.104.15...@graphcommerce/graphcms-ui@2.104.16) (2021-11-03)
+
+
+### Bug Fixes
+
+* various accessibility improvements ([47481a9](https://github.com/ho-nl/m2-pwa/commit/47481a9a882ba87968de6dd797557b0b275d75fb))
+
+
+
+
+
 ## [2.104.9](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/graphcms-ui@2.104.8...@graphcommerce/graphcms-ui@2.104.9) (2021-11-02)
 
 

package/RichText/RichTextHeadingStrongStroked.tsx

@@ -1,21 +1,18 @@
-import { responsiveVal } from '@graphcommerce/next-ui'
 import { Theme, withStyles } from '@material-ui/core'
 import RichText from '.'
 
 const RichTextHeadingStrongStroked = withStyles((theme: Theme) => ({
   h2: {
+    ...theme.typography.h1,
+    fontSize: `calc(${theme.typography.h1.fontSize}*1.3)`,
     textTransform: 'uppercase',
     color: theme.palette.text.primary,
     WebkitTextStroke: `0.9px ${theme.palette.text.primary}`,
-    fontSize: responsiveVal(18, 50),
-    marginTop: responsiveVal(8, 20),
-    marginBottom: responsiveVal(18, 20),
     '& strong': {
       color: 'transparent',
       WebkitTextStroke: `0.9px ${theme.palette.text.primary}`,
     },
     [theme.breakpoints.up('md')]: {
-      fontSize: responsiveVal(18, 60),
       WebkitTextStroke: `1.2x ${theme.palette.text.primary}`,
     },
   },

package/RichText/RichTextHero.tsx

@@ -1,17 +1,16 @@
-import { responsiveVal } from '@graphcommerce/next-ui'
 import { Theme, withStyles } from '@material-ui/core'
 import RichText from '.'
 
 const RichTextHero = withStyles((theme: Theme) => ({
   h1: {
+    ...theme.typography.h1,
+    fontSize: `calc(${theme.typography.h1.fontSize}*1.5)`,
     textTransform: 'uppercase',
     maxWidth: '70%',
     textAlign: 'center',
-    fontSize: responsiveVal(42, 50),
     marginBottom: theme.spacings.md,
     [theme.breakpoints.up('md')]: {
       textAlign: 'left',
-      fontSize: responsiveVal(18, 90),
       maxWidth: '100%',
     },
     '& strong': {

package/RichText/RichTextParagraphStrongStroked.tsx

@@ -4,14 +4,15 @@ import RichText from '.'
 
 const RichTextParagraphStrongStroked = withStyles((theme: Theme) => ({
   paragraph: {
+    ...theme.typography.body2,
     textTransform: 'uppercase',
     maxWidth: '100%',
     fontWeight: 600,
     textAlign: 'left',
-    fontSize: responsiveVal(11, 20),
     [theme.breakpoints.up('md')]: {
+      ...theme.typography.h3,
+      fontWeight: 600,
       maxWidth: '100%',
-      fontSize: responsiveVal(16, 34),
     },
     '& strong': {
       color: 'transparent',

package/RichText/RichTextQuote.tsx

@@ -1,15 +1,14 @@
-import { responsiveVal } from '@graphcommerce/next-ui'
 import { Theme, withStyles } from '@material-ui/core'
 import RichText from '.'
 
 const RichTextQuote = withStyles((theme: Theme) => ({
   paragraph: {
+    ...theme.typography.h4,
     fontWeight: 600,
     textTransform: 'uppercase',
     maxWidth: '60%',
     textAlign: 'center',
     margin: '0 auto',
-    fontSize: responsiveVal(14, 26),
     [theme.breakpoints.up('lg')]: {
       maxWidth: '80%',
     },

package/RichText/useRichTextStyles.tsx

@@ -32,8 +32,6 @@ const useRichTextStyles = makeStyles(
     h6: { '&:first-of-type': { marginTop: 0 } },
     asset: { width: '100%', height: 'auto' },
     blockQuote: {
-      color: '#777',
-      borderLeft: '4px solid #999',
       paddingLeft: spacings.sm,
       margin: `${spacings.md} 0`,
     },
@@ -47,7 +45,6 @@ const useRichTextStyles = makeStyles(
       maxWidth: '100%',
       background: '#d8d8d8',
       padding: 5,
-      fontSize: 17,
       overflow: 'scroll',
     },
     aspectContainer: {
@@ -102,7 +99,7 @@ const useRichTextStyles = makeStyles(
             minWidth: '150px',
           },
 
-          '& p': { fontSize: responsiveVal(12, 15) },
+          '& p': {},
         },
       },
     },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@graphcommerce/graphcms-ui",
-  "version": "2.104.15",
+  "version": "2.104.19",
   "sideEffects": false,
   "prettier": "@graphcommerce/prettier-config-pwa",
   "browserslist": [
@@ -22,7 +22,7 @@
   "dependencies": {
     "@apollo/client": "^3.4.16",
     "@graphcommerce/image": "^2.105.2",
-    "@graphcommerce/next-ui": "^3.13.1",
+    "@graphcommerce/next-ui": "^3.14.2",
     "@graphql-typed-document-node/core": "^3.1.0",
     "@material-ui/core": "^4.12.3",
     "@material-ui/lab": "^4.0.0-alpha.60",
@@ -31,5 +31,5 @@
     "react-dom": "^17.0.2",
     "type-fest": "^2.5.1"
   },
-  "gitHead": "c9eac9065491268d26c187d9fe864f7e9232c0fb"
+  "gitHead": "4ea4a44e313b7474597ca86982ddceb10423af73"
 }