From 2db8a42f2622022a1e5f1d56748c821004a77b53 Mon Sep 17 00:00:00 2001
From: celine <celine@hyperlink.academy>
Date: Thu, 17 Jul 2025 15:56:55 -0400
Subject: [PATCH] fixes to accent contrast

---
 .../dashboard/PublicationDashboard.tsx        |  2 +-
 components/ActionBar/ActionButton.tsx         |  2 +-
 components/ThemeManager/PubThemeSetter.tsx    |  6 +++-
 .../ThemeManager/PublicationThemeProvider.tsx | 30 ++++++++++++++-----
 4 files changed, 29 insertions(+), 11 deletions(-)

diff --git a/app/lish/[did]/[publication]/dashboard/PublicationDashboard.tsx b/app/lish/[did]/[publication]/dashboard/PublicationDashboard.tsx
index a370791c..53b99799 100644
--- a/app/lish/[did]/[publication]/dashboard/PublicationDashboard.tsx
+++ b/app/lish/[did]/[publication]/dashboard/PublicationDashboard.tsx
@@ -72,7 +72,7 @@ function Tab(props: {
 }) {
   return (
     <div
-      className={`pubTabs border  border-b-0 px-2 pt-1 pb-0.5 rounded-t-md border-border hover:cursor-pointer ${props.selected ? "text-accent-1 font-bold -mb-[1px]" : ""} ${props.showPageBackground ? "bg-[rgba(var(--bg-page),var(--bg-page-alpha))]" : ""}`}
+      className={`pubTabs border  border-b-0 px-2 pt-1 pb-0.5 rounded-t-md border-border hover:cursor-pointer ${props.selected ? "text-accent-contrast font-bold -mb-[1px]" : ""} ${props.showPageBackground ? "bg-[rgba(var(--bg-page),var(--bg-page-alpha))]" : ""}`}
       onClick={() => props.onSelect()}
     >
       {props.name}
diff --git a/components/ActionBar/ActionButton.tsx b/components/ActionBar/ActionButton.tsx
index cbe42617..2a50bac2 100644
--- a/components/ActionBar/ActionButton.tsx
+++ b/components/ActionBar/ActionButton.tsx
@@ -42,7 +42,7 @@ export const ActionButton = forwardRef<
           ? "w-full bg-accent-1 border-accent-1 text-accent-2 transparent-outline sm:hover:outline-accent-contrast focus:outline-accent-1 outline-offset-1 mx-1 first:ml-0"
           : props.secondary
             ? "sm:w-full w-max bg-bg-page border-accent-contrast text-accent-contrast transparent-outline focus:outline-accent-contrast sm:hover:outline-accent-contrast outline-offset-1 mx-1 first:ml-0"
-            : "sm:w-full w-max border-transparent text-accent-1 sm:hover:border-accent-1"
+            : "sm:w-full w-max border-transparent text-accent-contrast sm:hover:border-accent-contrast"
       }
       `}
     >
diff --git a/components/ThemeManager/PubThemeSetter.tsx b/components/ThemeManager/PubThemeSetter.tsx
index a0b0cb7d..bf21b2c7 100644
--- a/components/ThemeManager/PubThemeSetter.tsx
+++ b/components/ThemeManager/PubThemeSetter.tsx
@@ -32,7 +32,11 @@ export const PubThemeSetter = () => {
   let [showPageBackground, setShowPageBackground] = useState(
     !!record?.theme?.showPageBackground,
   );
-  let { theme: localPubTheme, setTheme, changes } = useLocalPubTheme(record);
+  let {
+    theme: localPubTheme,
+    setTheme,
+    changes,
+  } = useLocalPubTheme(record, showPageBackground);
   let [image, setImage] = useState<ImageState | null>(
     PubLeafletThemeBackgroundImage.isMain(record?.theme?.backgroundImage)
       ? {
diff --git a/components/ThemeManager/PublicationThemeProvider.tsx b/components/ThemeManager/PublicationThemeProvider.tsx
index a0faaa89..fd94139b 100644
--- a/components/ThemeManager/PublicationThemeProvider.tsx
+++ b/components/ThemeManager/PublicationThemeProvider.tsx
@@ -111,6 +111,8 @@ export const usePubTheme = (record?: PubLeafletPublication.Record | null) => {
   let bgLeaflet = useColor(record, "backgroundColor");
   let bgPage = useColor(record, "pageBackground");
   bgPage = record?.theme?.pageBackground ? bgPage : bgLeaflet;
+  let showPageBackground = record?.theme?.showPageBackground;
+
   let primary = useColor(record, "primary");
 
   let accent1 = useColor(record, "accentBackground");
@@ -125,9 +127,12 @@ export const usePubTheme = (record?: PubLeafletPublication.Record | null) => {
     return (
       getColorContrast(
         colorToString(b, "rgb"),
-        colorToString(bgLeaflet, "rgb"),
+        colorToString(showPageBackground ? bgPage : bgLeaflet, "rgb"),
       ) -
-      getColorContrast(colorToString(a, "rgb"), colorToString(bgLeaflet, "rgb"))
+      getColorContrast(
+        colorToString(a, "rgb"),
+        colorToString(showPageBackground ? bgPage : bgLeaflet, "rgb"),
+      )
     );
   })[0];
   return {
@@ -140,11 +145,13 @@ export const usePubTheme = (record?: PubLeafletPublication.Record | null) => {
     highlight2,
     highlight3,
     accentContrast,
+    showPageBackground,
   };
 };
 
 export const useLocalPubTheme = (
   record: PubLeafletPublication.Record | undefined,
+  showPageBackground?: boolean,
 ) => {
   const pubTheme = usePubTheme(record);
   const [localOverrides, setTheme] = useState<Partial<typeof pubTheme>>({});
@@ -153,24 +160,31 @@ export const useLocalPubTheme = (
     let newTheme = {
       ...pubTheme,
       ...localOverrides,
+      showPageBackground,
     };
-    let accentContrast = [newTheme.accent1, newTheme.accent2].sort((a, b) => {
+    let sortedAccents = [newTheme.accent1, newTheme.accent2].sort((a, b) => {
       return (
         getColorContrast(
           colorToString(b, "rgb"),
-          colorToString(newTheme.bgLeaflet, "rgb"),
+          colorToString(
+            showPageBackground ? newTheme.bgPage : newTheme.bgLeaflet,
+            "rgb",
+          ),
         ) -
         getColorContrast(
           colorToString(a, "rgb"),
-          colorToString(newTheme.bgLeaflet, "rgb"),
+          colorToString(
+            showPageBackground ? newTheme.bgPage : newTheme.bgLeaflet,
+            "rgb",
+          ),
         )
       );
-    })[0];
+    });
     return {
       ...newTheme,
-      accentContrast,
+      accentContrast: sortedAccents[0],
     };
-  }, [pubTheme, localOverrides]);
+  }, [pubTheme, localOverrides, showPageBackground]);
   return {
     theme: mergedTheme,
     setTheme,
-- 
2.54.0