From d351700d04d4f02be69a27dedecc6fba2bc2fec1 Mon Sep 17 00:00:00 2001
From: witt <unix.bio@gmail.com>
Date: Mon, 15 Mar 2021 01:14:34 +0800
Subject: [PATCH] docs(breakpoints): upgrade documentatino to match the new
 theme system (#478)

---
 pages/en-us/components/grid.mdx            | 18 ++++++++++++------
 pages/en-us/components/use-media-query.mdx | 18 ++++++++++++------
 pages/zh-cn/components/grid.mdx            | 18 ++++++++++++------
 pages/zh-cn/components/use-media-query.mdx | 18 ++++++++++++------
 4 files changed, 48 insertions(+), 24 deletions(-)

diff --git a/pages/en-us/components/grid.mdx b/pages/en-us/components/grid.mdx
index 161064b..35842ff 100644
--- a/pages/en-us/components/grid.mdx
+++ b/pages/en-us/components/grid.mdx
@@ -144,12 +144,18 @@ const breakpoints: GeistUIThemesBreakpoints = {
   xl: { min: '1920px', max: '10000px' },
 }
 
-const App = () => (
-  <GeistProvider theme={{ breakpoints: breakpoints }}>
-    <CssBaseline />
-    <AppComponent />
-  </GeistProvider>
-)
+const App = () => {
+  const myTheme = Themes.createFromLight({
+    type: 'myTheme',
+    breakpoints,
+  })
+  return (
+    <GeistProvider themes={[myTheme]} themeType="myTheme">
+      <CssBaseline />
+      <AppComponent />
+    </GeistProvider>
+  )
+}
 ```
 
 <Attributes edit="/pages/en-us/components/grid.mdx">
diff --git a/pages/en-us/components/use-media-query.mdx b/pages/en-us/components/use-media-query.mdx
index 630de2a..41007f5 100644
--- a/pages/en-us/components/use-media-query.mdx
+++ b/pages/en-us/components/use-media-query.mdx
@@ -63,12 +63,18 @@ const breakpoints: GeistUIThemesBreakpoints = {
   xl: { min: '1920px', max: '10000px' },
 }
 
-const App = () => (
-  <GeistProvider theme={{ breakpoints: breakpoints }}>
-    <CssBaseline />
-    <AppComponent />
-  </GeistProvider>
-)
+const App = () => {
+  const myTheme = Themes.createFromLight({
+    type: 'myTheme',
+    breakpoints,
+  })
+  return (
+    <GeistProvider themes={[myTheme]} themeType="myTheme">
+      <CssBaseline />
+      <AppComponent />
+    </GeistProvider>
+  )
+}
 ```
 
 <Attributes edit="/pages/en-us/components/use-media-query.mdx">
diff --git a/pages/zh-cn/components/grid.mdx b/pages/zh-cn/components/grid.mdx
index 65d2be6..bc9262c 100644
--- a/pages/zh-cn/components/grid.mdx
+++ b/pages/zh-cn/components/grid.mdx
@@ -144,12 +144,18 @@ const breakpoints: GeistUIThemesBreakpoints = {
   xl: { min: '1920px', max: '10000px' },
 }
 
-const App = () => (
-  <GeistProvider theme={{ breakpoints: breakpoints }}>
-    <CssBaseline />
-    <AppComponent />
-  </GeistProvider>
-)
+const App = () => {
+  const myTheme = Themes.createFromLight({
+    type: 'myTheme',
+    breakpoints,
+  })
+  return (
+    <GeistProvider themes={[myTheme]} themeType="myTheme">
+      <CssBaseline />
+      <AppComponent />
+    </GeistProvider>
+  )
+}
 ```
 
 <Attributes edit="/pages/zh-cn/components/grid.mdx">
diff --git a/pages/zh-cn/components/use-media-query.mdx b/pages/zh-cn/components/use-media-query.mdx
index 8b4cacb..a9cf2de 100644
--- a/pages/zh-cn/components/use-media-query.mdx
+++ b/pages/zh-cn/components/use-media-query.mdx
@@ -63,12 +63,18 @@ const breakpoints: GeistUIThemesBreakpoints = {
   xl: { min: '1920px', max: '10000px' },
 }
 
-const App = () => (
-  <GeistProvider theme={{ breakpoints: breakpoints }}>
-    <CssBaseline />
-    <AppComponent />
-  </GeistProvider>
-)
+const App = () => {
+  const myTheme = Themes.createFromLight({
+    type: 'myTheme',
+    breakpoints,
+  })
+  return (
+    <GeistProvider themes={[myTheme]} themeType="myTheme">
+      <CssBaseline />
+      <AppComponent />
+    </GeistProvider>
+  )
+}
 ```
 
 <Attributes edit="/pages/zh-cn/components/use-media-query.mdx">