@graphcommerce/docs 10.0.0-canary.66 → 10.0.0-canary.68

package/CHANGELOG.md

@@ -1,5 +1,9 @@
 # Change Log
 
+## 10.0.0-canary.68
+
+## 10.0.0-canary.67
+
 ## 10.0.0-canary.66
 
 ## 10.0.0-canary.65

package/framework/config.md

@@ -18,7 +18,7 @@ The configuration file is a javascript file that exports a `GraphCommerceConfig`
 
 ## Using configuration
 
-Configuration can be accessed in your project with the `import.meta.graphCommerce` object.
+Configuration can be accessed in your project by importing the config from `@graphcommerce/next-config/config`.
 
 ```tsx
 import { storefrontAll, storefrontConfig, storefrontConfigDefault, useStorefrontConfig } from '@graphcommerce/next-ui'
@@ -296,7 +296,7 @@ Project settings -> API Access -> Permanent Auth Tokens
   - Delete public content views
   - Can see schema view
 
-```
+```bash
 GC_HYGRAPH_WRITE_ACCESS_TOKEN="AccessTokenFromHygraph"
 yarn graphcommerce hygraph-migrate
 ```
@@ -407,6 +407,10 @@ The sha256 certificate fingerprint of the Android app.
 
 Permissions input
 
+#### billingAddress: EDITABLE | READONLY
+
+Allows customers to change their billing address or locks it down.
+
 #### cart: CUSTOMER_ONLY | DISABLED | ENABLED
 
 Changes the availability of the add to cart buttons and the cart page to either customer only or completely disables it.

package/framework/icons.md

@@ -44,7 +44,7 @@ const createOverrides = (theme: Theme): Components => ({
       {
         props: {},
         style: ({ theme }) => ({
-          color: theme.palette.primary.main,
+          color: theme.vars.palette.primary.main,
         }),
       },
     ],

package/framework/theming.md

@@ -37,7 +37,7 @@ updated in real-time:
 
 You can search through your codebase to discover which components will be
 affected by your changes. For example, search for occurrences of
-`theme.palette.primary.main`.
+`theme.vars.palette.primary.main`.
 
 ### Best practices
 
@@ -84,7 +84,7 @@ property:
 ```tsx
 sx={{
   borderRadius: 2,
-  backgroundColor: (theme) => theme.palette.primary.main,
+  backgroundColor: (theme) => theme.vars.palette.primary.main,
 }}
 ```
 
@@ -92,8 +92,8 @@ To use the theme object for multiple property's:
 
 ```tsx
 sx={(theme) => ({
-  borderRadius: `1px solid ${theme.palette.divider}`,
-  backgroundColor: theme.palette.primary.main,
+  borderRadius: `1px solid ${theme.vars.palette.divider}`,
+  backgroundColor: theme.vars.palette.primary.main,
 })}
 ```
 
@@ -110,10 +110,10 @@ const AnimatedButton = styled(Button, { name: 'animatedButton' })(
   ({ theme }) => ({
     '@keyframes pulse': {
       '0%': {
-        boxShadow: `0 0 0 0 ${theme.palette.primary.main}`,
+        boxShadow: `0 0 0 0 ${theme.vars.palette.primary.main}`,
       },
       '100%': {
-        boxShadow: `0 0 0 15px ${theme.palette.background.default}`,
+        boxShadow: `0 0 0 15px ${theme.vars.palette.background.default}`,
       },
     },
     animation: 'pulse 1.5s infinite',

package/framework/typography.md

@@ -63,7 +63,7 @@ component:
   gutterBottom
   sx={{
     h3: (theme) => ({
-      color: theme.palette.primary.main,
+      color: theme.vars.palette.primary.main,
     }),
   }}
 >

package/getting-started/graphcms-component.md

@@ -198,7 +198,7 @@ export function Banner(props: BannerFragment) {
             textAlign: 'center' as const,
           },
           'heading-one': (theme) => ({
-            color: theme.palette.primary.main,
+            color: theme.vars.palette.primary.main,
           }),
         }}
       />

package/getting-started/readme.md

@@ -103,7 +103,7 @@ sx={{ '& .MuiBox-root': { background: 'blue' }}}
 Pass the theme object to use global values
 
 ```tsx
-sx={(theme)=>({ margin: theme.spacings.lg, color: theme.palette.text.secondary })}
+sx={(theme)=>({ margin: theme.spacings.lg, color: theme.vars.palette.text.secondary })}
 ```
 
 ## Customization

package/package.json

@@ -2,10 +2,10 @@
   "name": "@graphcommerce/docs",
   "homepage": "https://www.graphcommerce.org/docs",
   "repository": "github:graphcommerce-org/graphcommerce/docs",
-  "version": "10.0.0-canary.66",
+  "version": "10.0.0-canary.68",
   "sideEffects": true,
   "peerDependencies": {
-    "@graphcommerce/prettier-config-pwa": "^10.0.0-canary.66"
+    "@graphcommerce/prettier-config-pwa": "^10.0.0-canary.68"
   },
   "prettier": "@graphcommerce/prettier-config-pwa"
 }

package/upgrading/graphcommerce-9-to-10.md

@@ -3,6 +3,30 @@
 Depending on the amounts of customisations you've made, there are some manual
 steps.
 
+## Theme: Replace theme.palette with theme.vars.palette
+
+To support CSS variables properly, replace `theme.palette` with
+`theme.vars.palette` in your theme customizations:
+
+```diff
+- color: theme.palette.primary.main,
++ color: theme.vars.palette.primary.main,
+```
+
+## Theme: Replace dark mode checks with theme.applyStyles
+
+Replace conditional dark mode checks with `theme.applyStyles('dark', ...)`:
+
+```diff
+- background: theme.palette.mode === 'dark'
+-   ? lighten(theme.palette.background.default, 0.15)
+-   : theme.palette.background.default,
++ background: theme.vars.palette.background.default,
++ ...theme.applyStyles('dark', {
++   background: theme.lighten(theme.vars.palette.background.default, 0.15),
++ }),
+```
+
 ## Trans and t import replacements
 
 ```tsx

package/upgrading/readme.md

@@ -106,6 +106,7 @@ After resolving the diff issues, manually process upgrade instructions:
 
 - [Upgrading to GraphCommerce 5 to 6](../upgrading/graphcommerce-5-to-6.md)
 - [Upgrading to GraphCommerce 6 to 7](../upgrading/graphcommerce-6-to-7.md)
+- [Upgrading to GraphCommerce 9 to 10](../upgrading/graphcommerce-9-to-10.md)
 
 Run and validate your local environment: