From afe52da92da896d8fe6b8bfda30ac2225a2c899b Mon Sep 17 00:00:00 2001
From: abizek <91976421+abizek@users.noreply.github.com>
Date: Mon, 1 Apr 2024 19:31:28 +0530
Subject: [PATCH] fix(artboard): apply custom text and background color

---
 apps/artboard/src/components/page.tsx |  2 +-
 apps/artboard/src/pages/artboard.tsx  |  2 +-
 apps/artboard/src/styles/main.css     |  2 +-
 apps/artboard/src/templates/ditto.tsx |  2 +-
 apps/artboard/tailwind.config.js      | 24 +++++++++++++++++++++++-
 5 files changed, 27 insertions(+), 5 deletions(-)

diff --git a/apps/artboard/src/components/page.tsx b/apps/artboard/src/components/page.tsx
index 56719787..aef5fa32 100644
--- a/apps/artboard/src/components/page.tsx
+++ b/apps/artboard/src/components/page.tsx
@@ -20,7 +20,7 @@ export const Page = ({ mode = "preview", pageNumber, children }: Props) => {
   return (
     <div
       data-page={pageNumber}
-      className={cn("relative bg-white", mode === "builder" && "shadow-2xl")}
+      className={cn("relative bg-background text-foreground", mode === "builder" && "shadow-2xl")}
       style={{
         fontFamily,
         width: `${pageSizeMap[page.format].width * MM_TO_PX}px`,
diff --git a/apps/artboard/src/pages/artboard.tsx b/apps/artboard/src/pages/artboard.tsx
index 58a79bbb..ced81fa6 100644
--- a/apps/artboard/src/pages/artboard.tsx
+++ b/apps/artboard/src/pages/artboard.tsx
@@ -39,7 +39,7 @@ export const ArtboardPage = () => {
       `${metadata.typography.lineHeight}`,
     );
 
-    document.documentElement.style.setProperty("--color-text", `${metadata.theme.text}`);
+    document.documentElement.style.setProperty("--color-foreground", `${metadata.theme.text}`);
     document.documentElement.style.setProperty("--color-primary", `${metadata.theme.primary}`);
     document.documentElement.style.setProperty(
       "--color-background",
diff --git a/apps/artboard/src/styles/main.css b/apps/artboard/src/styles/main.css
index 804e4ba5..fe01468d 100644
--- a/apps/artboard/src/styles/main.css
+++ b/apps/artboard/src/styles/main.css
@@ -21,5 +21,5 @@
 }
 
 .wysiwyg {
-  @apply prose max-w-none text-current prose-headings:mt-0 prose-headings:mb-2 prose-p:mt-0 prose-p:mb-2 prose-ul:mt-0 prose-ul:mb-2 prose-li:mt-0 prose-li:mb-2 prose-ol:mt-0 prose-ol:mb-2 prose-img:mt-0 prose-img:mb-2 prose-hr:mt-0 prose-hr:mb-2 prose-p:leading-normal prose-li:leading-normal prose-a:break-all;
+  @apply prose max-w-none prose-foreground prose-headings:mt-0 prose-headings:mb-2 prose-p:mt-0 prose-p:mb-2 prose-ul:mt-0 prose-ul:mb-2 prose-li:mt-0 prose-li:mb-2 prose-ol:mt-0 prose-ol:mb-2 prose-img:mt-0 prose-img:mb-2 prose-hr:mt-0 prose-hr:mb-2 prose-p:leading-normal prose-li:leading-normal prose-a:break-all;
 }
diff --git a/apps/artboard/src/templates/ditto.tsx b/apps/artboard/src/templates/ditto.tsx
index 252f6642..51f15bff 100644
--- a/apps/artboard/src/templates/ditto.tsx
+++ b/apps/artboard/src/templates/ditto.tsx
@@ -38,7 +38,7 @@ const Header = () => {
           <p>{basics.headline}</p>
         </div>
 
-        <div className="text-text col-span-2 col-start-2 mt-10">
+        <div className="col-span-2 col-start-2 mt-10 text-foreground">
           <div className="flex flex-wrap items-center gap-x-2 gap-y-0.5 text-sm">
             {basics.location && (
               <>
diff --git a/apps/artboard/tailwind.config.js b/apps/artboard/tailwind.config.js
index 3d34246b..24108cd9 100644
--- a/apps/artboard/tailwind.config.js
+++ b/apps/artboard/tailwind.config.js
@@ -11,7 +11,7 @@ module.exports = {
   theme: {
     extend: {
       colors: {
-        text: "var(--color-text)",
+        foreground: "var(--color-foreground)",
         primary: "var(--color-primary)",
         background: "var(--color-background)",
       },
@@ -23,6 +23,28 @@ module.exports = {
         loose: "calc(var(--line-height) + 0.5)",
       },
       spacing: { custom: "var(--margin)" },
+      typography: () => ({
+        foreground: {
+          css: {
+            "--tw-prose-body": "var(--color-foreground)",
+            "--tw-prose-headings": "var(--color-foreground)",
+            "--tw-prose-lead": "var(--color-foreground)",
+            "--tw-prose-links": "var(--color-foreground)",
+            "--tw-prose-bold": "var(--color-foreground)",
+            "--tw-prose-counters": "var(--color-foreground)",
+            "--tw-prose-bullets": "var(--color-foreground)",
+            "--tw-prose-hr": "var(--color-foreground)",
+            "--tw-prose-quotes": "var(--color-foreground)",
+            "--tw-prose-quote-borders": "var(--color-foreground)",
+            "--tw-prose-captions": "var(--color-foreground)",
+            "--tw-prose-code": "var(--color-foreground)",
+            "--tw-prose-pre-code": "var(--color-foreground)",
+            "--tw-prose-pre-bg": "var(--color-background)",
+            "--tw-prose-th-borders": "var(--color-foreground)",
+            "--tw-prose-td-borders": "var(--color-foreground)",
+          },
+        },
+      }),
     },
   },
   plugins: [require("@tailwindcss/typography")],