From 6ce0be67ab7df0a8bd02bc634f4bbab98e25d103 Mon Sep 17 00:00:00 2001
From: eddielu <edward.lu95@gmail.com>
Date: Thu, 6 Mar 2025 14:11:32 -0800
Subject: [PATCH] =?UTF-8?q?docs:=20Update=20documentation=20to=20match=20r?=
 =?UTF-8?q?eality.=20colorPrimary,=20colorBackground,=E2=80=A6=20(#1666)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Update documentation to match reality. colorPrimary, colorBackground,
and borderRadius do not exist according to the schema:
https://github.com/documenso/embeds/blob/280251cfddb56a6aeeb0d767098915ae7058c376/packages/react/src/css-vars.ts
---
 apps/documentation/pages/developers/embedding/index.mdx  | 6 +++---
 apps/documentation/pages/developers/embedding/preact.mdx | 6 +++---
 apps/documentation/pages/developers/embedding/react.mdx  | 6 +++---
 apps/documentation/pages/developers/embedding/solid.mdx  | 6 +++---
 apps/documentation/pages/developers/embedding/svelte.mdx | 6 +++---
 apps/documentation/pages/developers/embedding/vue.mdx    | 6 +++---
 6 files changed, 18 insertions(+), 18 deletions(-)

diff --git a/apps/documentation/pages/developers/embedding/index.mdx b/apps/documentation/pages/developers/embedding/index.mdx
index 2e93941ae..6714c65ee 100644
--- a/apps/documentation/pages/developers/embedding/index.mdx
+++ b/apps/documentation/pages/developers/embedding/index.mdx
@@ -52,9 +52,9 @@ Platform customers have access to advanced styling options to customize the embe
 <EmbedDirectTemplate
   token={token}
   cssVars={{
-    colorPrimary: '#0000FF',
-    colorBackground: '#F5F5F5',
-    borderRadius: '8px',
+    primary: '#0000FF',
+    background: '#F5F5F5',
+    radius: '8px',
   }}
 />
 ```
diff --git a/apps/documentation/pages/developers/embedding/preact.mdx b/apps/documentation/pages/developers/embedding/preact.mdx
index 91176723f..3f6f579f5 100644
--- a/apps/documentation/pages/developers/embedding/preact.mdx
+++ b/apps/documentation/pages/developers/embedding/preact.mdx
@@ -95,9 +95,9 @@ const MyEmbeddingComponent = () => {
     }
   `;
   const cssVars = {
-    colorPrimary: '#0000FF',
-    colorBackground: '#F5F5F5',
-    borderRadius: '8px',
+    primary: '#0000FF',
+    background: '#F5F5F5',
+    radius: '8px',
   };
 
   return (
diff --git a/apps/documentation/pages/developers/embedding/react.mdx b/apps/documentation/pages/developers/embedding/react.mdx
index 05dc3a8aa..2c259ddb8 100644
--- a/apps/documentation/pages/developers/embedding/react.mdx
+++ b/apps/documentation/pages/developers/embedding/react.mdx
@@ -99,9 +99,9 @@ const MyEmbeddingComponent = () => {
       `}
       // CSS Variables
       cssVars={{
-        colorPrimary: '#0000FF',
-        colorBackground: '#F5F5F5',
-        borderRadius: '8px',
+        primary: '#0000FF',
+        background: '#F5F5F5',
+        radius: '8px',
       }}
       // Dark Mode Control
       darkModeDisabled={true}
diff --git a/apps/documentation/pages/developers/embedding/solid.mdx b/apps/documentation/pages/developers/embedding/solid.mdx
index e19007a43..135e93ff6 100644
--- a/apps/documentation/pages/developers/embedding/solid.mdx
+++ b/apps/documentation/pages/developers/embedding/solid.mdx
@@ -95,9 +95,9 @@ const MyEmbeddingComponent = () => {
     }
   `;
   const cssVars = {
-    colorPrimary: '#0000FF',
-    colorBackground: '#F5F5F5',
-    borderRadius: '8px',
+    primary: '#0000FF',
+    background: '#F5F5F5',
+    radius: '8px',
   };
 
   return (
diff --git a/apps/documentation/pages/developers/embedding/svelte.mdx b/apps/documentation/pages/developers/embedding/svelte.mdx
index 46ec69c63..126b43e10 100644
--- a/apps/documentation/pages/developers/embedding/svelte.mdx
+++ b/apps/documentation/pages/developers/embedding/svelte.mdx
@@ -97,9 +97,9 @@ Platform customers have access to advanced styling options:
     }
   `;
   const cssVars = {
-    colorPrimary: '#0000FF',
-    colorBackground: '#F5F5F5',
-    borderRadius: '8px',
+    primary: '#0000FF',
+    background: '#F5F5F5',
+    radius: '8px',
   };
 </script>
 
diff --git a/apps/documentation/pages/developers/embedding/vue.mdx b/apps/documentation/pages/developers/embedding/vue.mdx
index 8051dbe35..dc68f979d 100644
--- a/apps/documentation/pages/developers/embedding/vue.mdx
+++ b/apps/documentation/pages/developers/embedding/vue.mdx
@@ -97,9 +97,9 @@ Platform customers have access to advanced styling options:
   }
 `;
   const cssVars = {
-    colorPrimary: '#0000FF',
-    colorBackground: '#F5F5F5',
-    borderRadius: '8px',
+    primary: '#0000FF',
+    background: '#F5F5F5',
+    radius: '8px',
   };
 </script>