From de1c22c90394a04f216c69ec4179dc2f248629e8 Mon Sep 17 00:00:00 2001
From: celine <celine@hyperlink.academy>
Date: Tue, 7 Apr 2026 18:07:53 -0400
Subject: [PATCH] add a theme presetter

---
 .../dashboard/settings/SettingsContent.tsx    |   3 +-
 .../PubPickers/PubPresetPicker.tsx            | 149 ++++++++++++++++++
 components/ThemeManager/PubThemeSetter.tsx    |  86 +---------
 components/ToggleGroup.tsx                    |   6 +-
 4 files changed, 155 insertions(+), 89 deletions(-)
 create mode 100644 components/ThemeManager/PubPickers/PubPresetPicker.tsx

diff --git a/app/lish/[did]/[publication]/dashboard/settings/SettingsContent.tsx b/app/lish/[did]/[publication]/dashboard/settings/SettingsContent.tsx
index c248e4dc..f6755931 100644
--- a/app/lish/[did]/[publication]/dashboard/settings/SettingsContent.tsx
+++ b/app/lish/[did]/[publication]/dashboard/settings/SettingsContent.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import { useState, useEffect } from "react";
-import { ButtonPrimary, ButtonSecondary } from "components/Buttons";
+import { ButtonSecondary } from "components/Buttons";
 import { DotLoader } from "components/utils/DotLoader";
 import { useToaster } from "components/Toast";
 import { mutate } from "swr";
@@ -11,7 +11,6 @@ import {
 } from "../PublicationSWRProvider";
 import { updatePublication } from "app/lish/createPub/updatePublication";
 import { PubDomainSettings } from "./PubDomainSettings";
-import { PubThemeSetter } from "components/ThemeManager/PubThemeSetter";
 import { GeneralSettings } from "./GeneralSettings";
 import { PostSettings } from "./PostSettings";
 import { ThemeSettings } from "./ThemeSettings";
diff --git a/components/ThemeManager/PubPickers/PubPresetPicker.tsx b/components/ThemeManager/PubPickers/PubPresetPicker.tsx
new file mode 100644
index 00000000..95a8bf05
--- /dev/null
+++ b/components/ThemeManager/PubPickers/PubPresetPicker.tsx
@@ -0,0 +1,149 @@
+import { useCallback } from "react";
+import { parseColor } from "react-aria-components";
+import { PubThemeEditorState } from "../PubThemeSetter";
+
+type PresetTheme = {
+  name: string;
+  bgLeaflet: string;
+  bgPage: string;
+  showPageBackground: boolean;
+  primary: string;
+  accent1: string;
+  accent2: string;
+  headingFont: string | undefined;
+  bodyFont: string | undefined;
+  pageWidth: number;
+};
+
+const presetThemes: PresetTheme[] = [
+  {
+    name: "Default",
+    bgLeaflet: "#FDFCFA",
+    bgPage: "#FDFCFA",
+    showPageBackground: false,
+    primary: "#272727",
+    accent1: "#57822B",
+    accent2: "#FFFFFF",
+    headingFont: undefined,
+    bodyFont: undefined,
+    pageWidth: 624,
+  },
+  {
+    name: "Minimal",
+    bgLeaflet: "#F0F2F2",
+    bgPage: "#F0F2F2",
+    showPageBackground: false,
+    primary: "#292929",
+    accent1: "#292929",
+    accent2: "#F0F2F2",
+    headingFont: undefined,
+    bodyFont: "source-sans",
+    pageWidth: 768,
+  },
+  {
+    name: "Bookish",
+    bgLeaflet: "#FFFBEB",
+    bgPage: "#FFFBEB",
+    showPageBackground: false,
+    primary: "#3B3131",
+    accent1: "#B50000",
+    accent2: "#F0F2F2",
+    headingFont: "lora",
+    bodyFont: "lora",
+    pageWidth: 768,
+  },
+  {
+    name: "Dark",
+    bgLeaflet: "#1A1917",
+    bgPage: "#1A1917",
+    showPageBackground: false,
+    primary: "#FFFFFF",
+    accent1: "#234D26",
+    accent2: "#C3D6BC",
+    headingFont: undefined,
+    bodyFont: undefined,
+    pageWidth: 768,
+  },
+  {
+    name: "Colorful",
+    bgLeaflet: "#2665C9",
+    bgPage: "rgba(247, 223, 124, 1)",
+    showPageBackground: true,
+    primary: "#363131",
+    accent1: "#ED3700",
+    accent2: "#FFFFFF",
+    headingFont: undefined,
+    bodyFont: undefined,
+    pageWidth: 768,
+  },
+  {
+    name: "Rose",
+    bgLeaflet: "#FAD2D7",
+    bgPage: "rgba(252, 246, 245, 0.68)",
+    showPageBackground: true,
+    primary: "#613E3E",
+    accent1: "#74C200",
+    accent2: "#FFFFFF",
+    headingFont: "montserrat",
+    bodyFont: undefined,
+    pageWidth: 768,
+  },
+];
+
+export function PresetThemePicker(props: { state: PubThemeEditorState }) {
+  let {
+    setTheme,
+    setImage,
+    setPageWidth,
+    setHeadingFont,
+    setBodyFont,
+    setShowPageBackground,
+  } = props.state;
+
+  let applyPreset = useCallback(
+    (preset: PresetTheme) => {
+      setTheme(() => ({
+        bgLeaflet: parseColor(preset.bgLeaflet),
+        bgPage: parseColor(preset.bgPage),
+        primary: parseColor(preset.primary),
+        accent1: parseColor(preset.accent1),
+        accent2: parseColor(preset.accent2),
+      }));
+      setShowPageBackground(preset.showPageBackground);
+      setPageWidth(preset.pageWidth);
+      setHeadingFont(preset.headingFont);
+      setBodyFont(preset.bodyFont);
+      setImage(null);
+    },
+    [
+      setTheme,
+      setShowPageBackground,
+      setPageWidth,
+      setHeadingFont,
+      setBodyFont,
+      setImage,
+    ],
+  );
+
+  return (
+    <div className="pubPresetPicker flex flex-col pb-2">
+      <div className="text-sm  text-[#969696] -mb-0.5">PRESETS</div>
+      <div className="flex gap-2   items-center px-2 py-2 border border-[#CCCCCC] rounded-md bg-white mb-1">
+        {presetThemes.map((preset) => (
+          <button
+            key={preset.name}
+            type="button"
+            title={preset.name}
+            onClick={() => applyPreset(preset)}
+            className="w-8 h-8 rounded-full border border-[#CCCCCC] shrink-0 overflow-hidden outline-offset-1 outline-transparent hover:outline-[#CCCCCC] outline-2"
+            style={{
+              background: `linear-gradient(135deg, ${preset.bgLeaflet} 50%, ${preset.accent1} 50%)`,
+            }}
+          >
+            <span className="sr-only">{preset.name}</span>
+          </button>
+        ))}
+      </div>
+    </div>
+  );
+}
diff --git a/components/ThemeManager/PubThemeSetter.tsx b/components/ThemeManager/PubThemeSetter.tsx
index f97d98b3..53e8153a 100644
--- a/components/ThemeManager/PubThemeSetter.tsx
+++ b/components/ThemeManager/PubThemeSetter.tsx
@@ -4,7 +4,6 @@ import {
 } from "app/lish/[did]/[publication]/dashboard/PublicationSWRProvider";
 import { useState } from "react";
 import { pickers, SectionArrow } from "./ThemeSetter";
-import { Color } from "react-aria-components";
 import { PubLeafletThemeBackgroundImage } from "lexicons/api";
 import { AtUri } from "@atproto/syntax";
 import { useLocalPubTheme } from "./PublicationThemeProvider";
@@ -23,6 +22,7 @@ import { PubPageWidthSetter } from "./PubPickers/PubPageWidthSetter";
 import { FontPicker } from "./Pickers/TextPickers";
 import { GoToArrow } from "components/Icons/GoToArrow";
 import { ButtonPrimary } from "components/Buttons";
+import { PresetThemePicker } from "./PubPickers/PubPresetPicker";
 
 export type ImageState = {
   src: string;
@@ -173,6 +173,7 @@ export function PubThemePickerPanel(props: { state: PubThemeEditorState }) {
         <div
           className={`themeBgPicker flex flex-col gap-0 -mb-[6px] z-10 w-full `}
         >
+          <PresetThemePicker state={props.state} />
           <div className="bgPickerBody w-full flex flex-col gap-2 p-2  border border-[#CCCCCC] rounded-md text-[#595959] bg-white">
             <PubPageWidthSetter
               pageWidth={pageWidth}
@@ -418,86 +419,3 @@ const SamplePub = (props: {
     </div>
   );
 };
-
-const SamplePost = (props: {
-  pubBGImage: string | null;
-  pubBGRepeat: number | null;
-  showPageBackground: boolean;
-}) => {
-  let { data } = usePublicationData();
-  let { publication } = data || {};
-  let record = useNormalizedPublicationRecord();
-  return (
-    <div
-      style={{
-        backgroundImage: props.pubBGImage
-          ? `url(${props.pubBGImage})`
-          : undefined,
-        backgroundRepeat: props.pubBGRepeat ? "repeat" : "no-repeat",
-        backgroundPosition: "center",
-        backgroundSize: !props.pubBGRepeat
-          ? "cover"
-          : `calc(${props.pubBGRepeat}px / 2 )`,
-      }}
-      className={`bg-bg-leaflet p-3 max-w-full flex flex-col gap-3 rounded-t-md  border border-border border-b-0 pb-0 h-[148px] overflow-hidden`}
-    >
-      <div
-        className="pubWrapper sampleContent rounded-t-md border-border pb-0 px-[6px] flex flex-col w-[250px] mx-auto"
-        style={{
-          background: props.showPageBackground
-            ? "rgba(var(--bg-page), var(--bg-page-alpha))"
-            : undefined,
-        }}
-      >
-        <div className="flex flex-col ">
-          <div
-            className="text-[6px] font-bold pt-[6px] text-accent-contrast"
-            style={{
-              fontFamily:
-                "var(--theme-heading-font, var(--theme-font, var(--font-quattro)))",
-            }}
-          >
-            {record?.name}
-          </div>
-          <div
-            className="text-[11px] font-bold text-primary"
-            style={{
-              fontFamily:
-                "var(--theme-heading-font, var(--theme-font, var(--font-quattro)))",
-            }}
-          >
-            A Sample Post
-          </div>
-          <div className="text-[7px] font-normal text-secondary italic">
-            A short sample description about the sample post
-          </div>
-          <div className="text-tertiary  text-[5px] pt-[2px]">Jan 1, 20XX </div>
-        </div>
-        <div className="text-[6px] pt-[8px] flex flex-col gap-[6px]">
-          <div>
-            Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque
-            faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi
-            pretium tellus duis convallis. Tempus leo eu aenean sed diam urna
-            tempor.
-          </div>
-
-          <div>
-            Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis
-            massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit
-            semper vel class aptent taciti sociosqu. Ad litora torquent per
-            conubia nostra inceptos himenaeos.
-          </div>
-          <div>
-            Sed et nisi semper, egestas purus a, egestas nulla. Nulla ultricies,
-            purus non dapibus tincidunt, nunc sem rhoncus sem, vel malesuada
-            tellus enim sit amet magna. Donec ac justo a ipsum fermentum
-            vulputate. Etiam sit amet viverra leo. Aenean accumsan consectetur
-            velit. Vivamus at justo a nisl imperdiet dictum. Donec scelerisque
-            ex eget turpis scelerisque tincidunt. Proin non convallis nibh, eget
-            aliquet ex. Curabitur ornare a ipsum in ultrices.
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-};
diff --git a/components/ToggleGroup.tsx b/components/ToggleGroup.tsx
index 74c07f51..ebf786ae 100644
--- a/components/ToggleGroup.tsx
+++ b/components/ToggleGroup.tsx
@@ -9,7 +9,7 @@ export function ToggleGroup<T extends string>(props: {
 }) {
   return (
     <div
-      className={`flex gap-1 p-1 bg-accent-contrast rounded-lg text-sm ${props.className || ""}`}
+      className={`flex gap-1 p-1 bg-accent-1 rounded-lg text-sm ${props.className || ""}`}
     >
       {props.options.map((option) => (
         <button
@@ -17,8 +17,8 @@ export function ToggleGroup<T extends string>(props: {
           type="button"
           className={`px-1 rounded-md ${
             props.value === option.value
-              ? "bg-accent-2 font-bold text-accent-contrast"
-              : "bg-transparent text-bg-page"
+              ? "bg-accent-2 font-bold text-accent-1"
+              : "bg-transparent text-accent-2"
           }
           ${props.optionClassName}
             `}
-- 
2.51.2