Unify brand palette across site emails previews and sign defaults
This commit is contained in:
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user