@graphcommerce/graphcms-ui 2.105.4 → 2.106.3

package/CHANGELOG.md

@@ -3,6 +3,26 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [2.106.0](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/graphcms-ui@2.105.4...@graphcommerce/graphcms-ui@2.106.0) (2021-12-01)
+
+
+### Bug Fixes
+
+* build ([72d9353](https://github.com/ho-nl/m2-pwa/commit/72d935376a1967cc976c20b984ef15a862e5d0f4))
+* fontWeights ([7172527](https://github.com/ho-nl/m2-pwa/commit/71725272fe9f0b854d918ae357a668f641bfe8e5))
+* hero text spacing ([79dd6aa](https://github.com/ho-nl/m2-pwa/commit/79dd6aa2fe576104ebbbdd092f6b415d319dec48))
+* render bug stroke variable fonts ([582de18](https://github.com/ho-nl/m2-pwa/commit/582de187800ee9c53718bf43a39ca77398d21b91)), closes [/github.com/rsms/inter/issues/292#issuecomment-674993644](https://github.com//github.com/rsms/inter/issues/292/issues/issuecomment-674993644)
+
+
+### Features
+
+* breakpointVal ([0294503](https://github.com/ho-nl/m2-pwa/commit/029450343051cf6995babad9f9b42c7e6ad1094e))
+* responsiveTyp ([6108b61](https://github.com/ho-nl/m2-pwa/commit/6108b6148e76ddbbe2db1614f10aaf88423db5ca))
+
+
+
+
+
 # [2.105.0](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/graphcms-ui@2.104.29...@graphcommerce/graphcms-ui@2.105.0) (2021-11-12)
 
 

package/RichText/RichTextHeadingStrongStroked.tsx

@@ -1,23 +1,21 @@
+import { breakpointVal } 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.1)`,
     textTransform: 'uppercase',
     color: theme.palette.text.primary,
     [theme.breakpoints.up('sm')]: {
-      fontSize: `calc(${theme.typography.h1.fontSize}*1.3)`,
+      ...breakpointVal('fontSize', 36, 82, theme.breakpoints.values),
     },
-    WebkitTextStroke: `0.9px ${theme.palette.text.primary}`,
     '& strong': {
-      color: 'transparent',
-      WebkitTextStroke: `0.9px ${theme.palette.text.primary}`,
-    },
-    [theme.breakpoints.up('md')]: {
-      WebkitTextStroke: `1.2x ${theme.palette.text.primary}`,
+      // https://github.com/rsms/inter/issues/292#issuecomment-674993644
+      color: theme.palette.background.default,
+      textShadow: `1.2px 0 0 ${theme.palette.text.primary},0 1.2px 0 ${theme.palette.text.primary},-1.2px 0 0 ${theme.palette.text.primary},0 -1.2px 0 ${theme.palette.text.primary}`,
     },
+    [theme.breakpoints.up('md')]: {},
   },
 }))(RichText)
 

package/RichText/RichTextHero.tsx

@@ -1,16 +1,17 @@
+import { breakpointVal } 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.1)`,
     textTransform: 'uppercase',
     maxWidth: '70%',
     textAlign: 'center',
+    margin: 0,
     marginBottom: theme.spacings.md,
     [theme.breakpoints.up('sm')]: {
-      fontSize: `calc(${theme.typography.h1.fontSize}*1.4)`,
+      ...breakpointVal('fontSize', 36, 82, theme.breakpoints.values),
     },
     [theme.breakpoints.up('md')]: {
       textAlign: 'left',

package/RichText/RichTextParagraphStrongStroked.tsx

@@ -1,4 +1,3 @@
-import { responsiveVal } from '@graphcommerce/next-ui'
 import { Theme, withStyles } from '@material-ui/core'
 import RichText from '.'
 

package/RichText/RichTextQuote.tsx

@@ -5,6 +5,9 @@ const RichTextQuote = withStyles((theme: Theme) => ({
   paragraph: {
     ...theme.typography.h4,
     fontWeight: 600,
+    '@supports (font-variation-settings: normal)': {
+      fontVariationSettings: "'wght' 620",
+    },
     textTransform: 'uppercase',
     maxWidth: '60%',
     textAlign: 'center',

package/RichText/useRichTextStyles.tsx

@@ -2,9 +2,19 @@ import { UseStyles, responsiveVal } from '@graphcommerce/next-ui'
 import { makeStyles, Theme } from '@material-ui/core'
 
 const useRichTextStyles = makeStyles(
-  ({ spacings, breakpoints, palette, typography }: Theme) => ({
-    root: { '&:empty': { display: 'none' }, '&:last-child': { marginBottom: 0 } },
-    paragraph: { marginBottom: '1em', wordBreak: 'break-word' },
+  (theme: Theme) => ({
+    root: {
+      '&:empty': {
+        display: 'none',
+      },
+      '&:last-child': {
+        marginBottom: 0,
+      },
+    },
+    paragraph: {
+      marginBottom: '1em',
+      wordBreak: 'break-word',
+    },
     h1: {
       marginTop: '0.5em',
       marginBottom: '0.5em',
@@ -29,56 +39,53 @@ const useRichTextStyles = makeStyles(
       marginBottom: responsiveVal(7, 20),
       '&:first-child': { marginTop: 0 },
     },
-    h6: { '&:first-of-type': { marginTop: 0 } },
-    asset: { width: '100%', height: 'auto' },
+    h6: {
+      '&:first-of-type': {
+        marginTop: 0,
+      },
+    },
+    asset: {
+      width: '100%',
+      height: 'auto',
+    },
     blockQuote: {
-      paddingLeft: spacings.sm,
-      margin: `${spacings.md} 0`,
+      paddingLeft: theme.spacings.sm,
+      margin: `${theme.spacings.md} 0`,
+    },
+    ol: {
+      marginBottom: '1em',
+    },
+    ul: {
+      marginBottom: '1em',
     },
-    ol: { marginBottom: '1em' },
-    ul: { marginBottom: '1em' },
     strong: {},
     italic: {},
     underlined: {},
     code: {
       width: 'fit-content',
       maxWidth: '100%',
-      background: '#d8d8d8',
       padding: 5,
       overflow: 'scroll',
     },
-    aspectContainer: {
-      position: 'relative',
-      paddingTop: 'calc(100% / 16 * 9)',
-      marginBottom: spacings.md,
-      '& > *': {
-        width: '100%',
-        height: '100%',
-        position: 'absolute',
-        top: 0,
-        left: 0,
-      },
-    },
     iframe: {},
+    aspectContainer: {},
     table: {
       display: 'table',
       width: '100%',
       borderSpacing: '2px',
       borderCollapse: 'collapse',
-      marginTop: spacings.md,
-      marginBottom: spacings.sm,
-
+      marginTop: theme.spacings.md,
+      marginBottom: theme.spacings.sm,
       '& thead, tbody': {
         '& td': {
           padding: '10px 20px',
         },
       },
-
       '& thead': {
         '& tr': {
           '& td': {
             '& p': {
-              fontWeight: typography.fontWeightBold,
+              fontWeight: theme.typography.fontWeightBold,
             },
           },
         },
@@ -87,23 +94,22 @@ const useRichTextStyles = makeStyles(
         display: 'table-row-group',
         verticalAlign: 'center',
         borderColor: 'inherit',
-
         '& tr': {
           '&:nth-child(odd)': {
-            background: palette.background.paper,
+            background: theme.palette.background.paper,
           },
         },
-
         '& td': {
-          [breakpoints.up('sm')]: {
+          [theme.breakpoints.up('sm')]: {
             minWidth: '150px',
           },
-
           '& p': {},
         },
       },
     },
-    link: { wordBreak: 'break-word' },
+    link: {
+      wordBreak: 'break-word',
+    },
   }),
   { name: 'RichText' },
 )

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@graphcommerce/graphcms-ui",
-  "version": "2.105.4",
+  "version": "2.106.3",
   "sideEffects": false,
   "prettier": "@graphcommerce/prettier-config-pwa",
   "browserslist": [
@@ -14,15 +14,15 @@
   },
   "devDependencies": {
     "@graphcommerce/browserslist-config-pwa": "^3.0.2",
-    "@graphcommerce/eslint-config-pwa": "^3.1.5",
+    "@graphcommerce/eslint-config-pwa": "^3.1.6",
     "@graphcommerce/prettier-config-pwa": "^3.0.4",
     "@graphcommerce/typescript-config-pwa": "^3.1.1",
     "@playwright/test": "^1.16.2"
   },
   "dependencies": {
     "@apollo/client": "^3.4.16",
-    "@graphcommerce/image": "^2.105.4",
-    "@graphcommerce/next-ui": "^3.18.2",
+    "@graphcommerce/image": "^2.105.5",
+    "@graphcommerce/next-ui": "^3.20.1",
     "@material-ui/core": "^4.12.3",
     "@material-ui/lab": "^4.0.0-alpha.60",
     "next": "^12.0.3",
@@ -30,5 +30,5 @@
     "react-dom": "^17.0.2",
     "type-fest": "^2.5.1"
   },
-  "gitHead": "4d36627aeb43cba320c249b9a876384627064f18"
+  "gitHead": "b4bdc1cd365ebdd0bad8e1ed6afd374123bb2908"
 }