Unify brand palette across site emails previews and sign defaults

This commit is contained in:
2026-09-10 13:18:56 -04:00
parent a2acd1d08b
commit 9d50aeaeab
11 changed files with 107 additions and 63 deletions
+5 -4
View File
@@ -1,4 +1,5 @@
import { SIGN_PAPERS, type SavedSign } from "@album/contracts";
import { brandPalette } from "@album/contracts";
export { SIGN_PAPERS };
export type SignPaper = keyof typeof SIGN_PAPERS | "custom";
export type SignDesign = SavedSign & {
@@ -49,16 +50,16 @@ export function signLines(value: string, limit: number) {
export function guestSignSvg(design: SignDesign, guestUrl: string, qr: SignQr) {
const paper = signPaper(design);
const color = (value: string | undefined, fallback: string) => /^#[\da-f]{6}$/i.test(value ?? "") ? value! : fallback;
const ink = color(design.accent, design.ink === "black" ? "#171717" : "#4055b5");
const ink = color(design.accent, design.ink === "black" ? brandPalette.ink : brandPalette.primary);
const luminance = (hex: string) => {
const channels = [1, 3, 5].map(index => parseInt(hex.slice(index, index + 2), 16) / 255).map(c => c <= .04045 ? c / 12.92 : ((c + .055) / 1.055) ** 2.4);
return channels[0]! * .2126 + channels[1]! * .7152 + channels[2]! * .0722;
};
const background = color(design.background, "#eeece5");
const background = color(design.background, brandPalette.background);
const raster = (value?: string) => /^data:image\/(png|jpeg|webp);base64,[A-Za-z0-9+/=]+$/.test(value ?? "") ? value : undefined;
const photo = raster(design.backgroundImage), logo = raster(design.logoImage);
const surfaceLuminance = luminance(background);
const bodyInk = photo || surfaceLuminance < .18 ? "#ffffff" : "#171717";
const bodyInk = photo || surfaceLuminance < .18 ? "#ffffff" : brandPalette.ink;
const accentContrast = (Math.max(luminance(ink), surfaceLuminance) + .05) / (Math.min(luminance(ink), surfaceLuminance) + .05);
const headingInk = !photo && accentContrast >= 4.5 ? ink : bodyInk;
const landscape = paper.viewHeight < 850;
@@ -75,7 +76,7 @@ export function guestSignSvg(design: SignDesign, guestUrl: string, qr: SignQr) {
if (design.layout) {
const compact = design.layout === "compact";
const photoLed = design.layout === "photo";
const foreground = surfaceLuminance < .18 ? "#ffffff" : "#171717";
const foreground = surfaceLuminance < .18 ? "#ffffff" : brandPalette.ink;
const headingColor = accentContrast >= 4.5 ? ink : foreground;
const left = landscape && photoLed ? 650 : 70;
const top = photoLed ? (landscape ? 80 : 600) : 85;