Merge pull request #1842 from abizek/fix/custom-text-and-background-c…

…olor Fix(artboard): Text and background color
AmruthPillai · May 20, 2024 · 9728673 · 9728673
2 parents a74a8ed + f30a762
commit 9728673
Show file tree

Hide file tree

Showing 5 changed files with 27 additions and 5 deletions.
diff --git 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
@@ -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", metadata.theme.background);
  }, [metadata]);

diff --git 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
@@ -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
@@ -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")],