From 1e3fa03984baba8d96a4a3b22bd081edde815ba1 Mon Sep 17 00:00:00 2001
From: vi <github@victoriahchang.com>
Date: Fri, 13 Sep 2024 17:48:49 -0400
Subject: [PATCH 1/3] change text color to black

---
 docs/customization/variables.mdx | 30 +++++++++++++++---------------
 1 file changed, 15 insertions(+), 15 deletions(-)

diff --git a/docs/customization/variables.mdx b/docs/customization/variables.mdx
index 5f798ba2f9..8fd181030f 100644
--- a/docs/customization/variables.mdx
+++ b/docs/customization/variables.mdx
@@ -157,7 +157,7 @@ In the following example, the primary color is set to red and the text color is
             appearance={{
               variables: {
                 colorPrimary: 'purple',
-                colorText: 'white',
+                colorText: 'black',
               },
             }}
           >
@@ -179,7 +179,7 @@ In the following example, the primary color is set to red and the text color is
             appearance={{
               variables: {
                 colorPrimary: 'purple',
-                colorText: 'white',
+                colorText: 'black',
               },
             }}
           >
@@ -210,7 +210,7 @@ In the following example, the primary color is set to red and the text color is
           appearance={{
             variables: {
               colorPrimary: 'purple',
-              colorText: 'white',
+              colorText: 'black',
             },
           }}
           publishableKey={clerkPubKey}
@@ -263,7 +263,7 @@ In the following example, the primary color is set to red and the text color is
       appearance: {
         variables: {
           colorPrimary: 'red',
-          colorText: 'white',
+          colorText: 'black',
         },
       },
     })
@@ -280,7 +280,7 @@ In the following example, the primary color is set to red and the text color is
           appearance: {
             variables: {
               colorPrimary: 'red',
-              colorText: 'white',
+              colorText: 'black',
             },
           },
         }),
@@ -309,7 +309,7 @@ In the following example, the primary color is set to red and the text color is
               signIn: {
                 variables: {
                   colorPrimary: 'purple',
-                  colorText: 'white',
+                  colorText: 'black',
                 },
               },
             }}
@@ -333,7 +333,7 @@ In the following example, the primary color is set to red and the text color is
               signIn: {
                 variables: {
                   colorPrimary: 'purple',
-                  colorText: 'white',
+                  colorText: 'black',
                 },
               },
             }}
@@ -366,7 +366,7 @@ In the following example, the primary color is set to red and the text color is
             signIn: {
               variables: {
                 colorPrimary: 'purple',
-                colorText: 'white',
+                colorText: 'black',
               },
             },
           }}
@@ -421,7 +421,7 @@ In the following example, the primary color is set to red and the text color is
         signIn: {
           variables: {
             colorPrimary: 'red',
-            colorText: 'white',
+            colorText: 'black',
           },
         },
       },
@@ -440,7 +440,7 @@ In the following example, the primary color is set to red and the text color is
             signIn: {
               variables: {
                 colorPrimary: 'red',
-                colorText: 'white',
+                colorText: 'black',
               },
             },
           },
@@ -469,7 +469,7 @@ The following example shows how to customize the [`<SignIn />`](/docs/components
             appearance={{
               variables: {
                 colorPrimary: 'purple',
-                colorText: 'white',
+                colorText: 'black',
               },
             }}
           />
@@ -485,7 +485,7 @@ The following example shows how to customize the [`<SignIn />`](/docs/components
           appearance={{
             variables: {
               colorPrimary: 'purple',
-              colorText: 'white',
+              colorText: 'black',
             },
           }}
         />
@@ -505,7 +505,7 @@ The following example shows how to customize the [`<SignIn />`](/docs/components
         appearance={{
           variables: {
             colorPrimary: 'purple',
-            colorText: 'white',
+            colorText: 'black',
           },
         }}
         path="/sign-in"
@@ -528,7 +528,7 @@ The following example shows how to customize the [`<SignIn />`](/docs/components
             appearance={{
               variables: {
                 colorPrimary: 'purple',
-                colorText: 'white',
+                colorText: 'black',
               },
             }}
           />
@@ -548,7 +548,7 @@ The following example shows how to customize the [`<SignIn />`](/docs/components
       path="/sign-in"
       appearance={{
         colorPrimary: 'purple',
-        colorText: 'white',
+        colorText: 'black',
       }}
     />
     ```

From 44c2e9b4f595251bcc1736d8b1a2af18d547159b Mon Sep 17 00:00:00 2001
From: vi <github@victoriahchang.com>
Date: Mon, 16 Sep 2024 15:00:05 -0400
Subject: [PATCH 2/3] replace purple and red with blue

---
 docs/customization/themes.mdx    | 10 +++++-----
 docs/customization/variables.mdx | 30 +++++++++++++++---------------
 2 files changed, 20 insertions(+), 20 deletions(-)

diff --git a/docs/customization/themes.mdx b/docs/customization/themes.mdx
index d65c45b61b..448ff7f380 100644
--- a/docs/customization/themes.mdx
+++ b/docs/customization/themes.mdx
@@ -604,7 +604,7 @@ In the following example, the primary color of the themes are customized.
           <ClerkProvider
             appearance={{
               baseTheme: [dark, neobrutalism],
-              variables: { colorPrimary: 'red' },
+              variables: { colorPrimary: 'blue' },
               signIn: {
                 baseTheme: [shadesOfPurple],
                 variables: { colorPrimary: 'blue' },
@@ -629,7 +629,7 @@ In the following example, the primary color of the themes are customized.
           <ClerkProvider
             appearance={{
               baseTheme: [dark, neobrutalism],
-              variables: { colorPrimary: 'red' },
+              variables: { colorPrimary: 'blue' },
               signIn: {
                 baseTheme: [shadesOfPurple],
                 variables: { colorPrimary: 'blue' },
@@ -663,7 +663,7 @@ In the following example, the primary color of the themes are customized.
         <ClerkProvider
           appearance={{
             baseTheme: [dark, neobrutalism],
-            variables: { colorPrimary: 'red' },
+            variables: { colorPrimary: 'blue' },
             signIn: {
               baseTheme: [shadesOfPurple],
               variables: { colorPrimary: 'blue' },
@@ -719,7 +719,7 @@ In the following example, the primary color of the themes are customized.
     export default ClerkApp(App, {
       appearance: {
         baseTheme: [dark, neobrutalism],
-        variables: { colorPrimary: 'red' },
+        variables: { colorPrimary: 'blue' },
         signIn: {
           baseTheme: [shadesOfPurple],
           variables: { colorPrimary: 'blue' },
@@ -739,7 +739,7 @@ In the following example, the primary color of the themes are customized.
         clerk({
           appearance: {
             baseTheme: [dark, neobrutalism],
-            variables: { colorPrimary: 'red' },
+            variables: { colorPrimary: 'blue' },
             signIn: {
               baseTheme: [shadesOfPurple],
               variables: { colorPrimary: 'blue' },
diff --git a/docs/customization/variables.mdx b/docs/customization/variables.mdx
index 8fd181030f..a1616d461a 100644
--- a/docs/customization/variables.mdx
+++ b/docs/customization/variables.mdx
@@ -156,7 +156,7 @@ In the following example, the primary color is set to red and the text color is
           <ClerkProvider
             appearance={{
               variables: {
-                colorPrimary: 'purple',
+                colorPrimary: 'blue',
                 colorText: 'black',
               },
             }}
@@ -178,7 +178,7 @@ In the following example, the primary color is set to red and the text color is
           <ClerkProvider
             appearance={{
               variables: {
-                colorPrimary: 'purple',
+                colorPrimary: 'blue',
                 colorText: 'black',
               },
             }}
@@ -209,7 +209,7 @@ In the following example, the primary color is set to red and the text color is
         <ClerkProvider
           appearance={{
             variables: {
-              colorPrimary: 'purple',
+              colorPrimary: 'blue',
               colorText: 'black',
             },
           }}
@@ -262,7 +262,7 @@ In the following example, the primary color is set to red and the text color is
     export default ClerkApp(App, {
       appearance: {
         variables: {
-          colorPrimary: 'red',
+          colorPrimary: 'blue',
           colorText: 'black',
         },
       },
@@ -279,7 +279,7 @@ In the following example, the primary color is set to red and the text color is
         clerk({
           appearance: {
             variables: {
-              colorPrimary: 'red',
+              colorPrimary: 'blue',
               colorText: 'black',
             },
           },
@@ -308,7 +308,7 @@ In the following example, the primary color is set to red and the text color is
             appearance={{
               signIn: {
                 variables: {
-                  colorPrimary: 'purple',
+                  colorPrimary: 'blue',
                   colorText: 'black',
                 },
               },
@@ -332,7 +332,7 @@ In the following example, the primary color is set to red and the text color is
             appearance={{
               signIn: {
                 variables: {
-                  colorPrimary: 'purple',
+                  colorPrimary: 'blue',
                   colorText: 'black',
                 },
               },
@@ -365,7 +365,7 @@ In the following example, the primary color is set to red and the text color is
           appearance={{
             signIn: {
               variables: {
-                colorPrimary: 'purple',
+                colorPrimary: 'blue',
                 colorText: 'black',
               },
             },
@@ -420,7 +420,7 @@ In the following example, the primary color is set to red and the text color is
       appearance: {
         signIn: {
           variables: {
-            colorPrimary: 'red',
+            colorPrimary: 'blue',
             colorText: 'black',
           },
         },
@@ -439,7 +439,7 @@ In the following example, the primary color is set to red and the text color is
           appearance: {
             signIn: {
               variables: {
-                colorPrimary: 'red',
+                colorPrimary: 'blue',
                 colorText: 'black',
               },
             },
@@ -468,7 +468,7 @@ The following example shows how to customize the [`<SignIn />`](/docs/components
           <SignIn
             appearance={{
               variables: {
-                colorPrimary: 'purple',
+                colorPrimary: 'blue',
                 colorText: 'black',
               },
             }}
@@ -484,7 +484,7 @@ The following example shows how to customize the [`<SignIn />`](/docs/components
         <SignIn
           appearance={{
             variables: {
-              colorPrimary: 'purple',
+              colorPrimary: 'blue',
               colorText: 'black',
             },
           }}
@@ -504,7 +504,7 @@ The following example shows how to customize the [`<SignIn />`](/docs/components
       <SignIn
         appearance={{
           variables: {
-            colorPrimary: 'purple',
+            colorPrimary: 'blue',
             colorText: 'black',
           },
         }}
@@ -527,7 +527,7 @@ The following example shows how to customize the [`<SignIn />`](/docs/components
           <SignIn
             appearance={{
               variables: {
-                colorPrimary: 'purple',
+                colorPrimary: 'blue',
                 colorText: 'black',
               },
             }}
@@ -547,7 +547,7 @@ The following example shows how to customize the [`<SignIn />`](/docs/components
     <SignIn
       path="/sign-in"
       appearance={{
-        colorPrimary: 'purple',
+        colorPrimary: 'blue',
         colorText: 'black',
       }}
     />

From bbe18f942469749ea69397a0a2b7e2cf155a2a71 Mon Sep 17 00:00:00 2001
From: victoria <github@victoriahchang.com>
Date: Mon, 16 Sep 2024 16:33:13 -0400
Subject: [PATCH 3/3] Update docs/customization/themes.mdx

---
 docs/customization/themes.mdx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/customization/themes.mdx b/docs/customization/themes.mdx
index 448ff7f380..3e306518c0 100644
--- a/docs/customization/themes.mdx
+++ b/docs/customization/themes.mdx
@@ -607,7 +607,7 @@ In the following example, the primary color of the themes are customized.
               variables: { colorPrimary: 'blue' },
               signIn: {
                 baseTheme: [shadesOfPurple],
-                variables: { colorPrimary: 'blue' },
+                variables: { colorPrimary: 'green' },
               },
             }}
           >