mirror of
https://github.com/jakejarvis/sofa.git
synced 2026-08-29 01:35:39 -04:00
jakeandClaude Opus 4.6
2ee20a6aff
Override CSS custom properties (--primary, --ring, --primary-foreground, --status-watching) on the title detail page wrapper using the vibrant color from the poster's node-vibrant palette. All Tailwind classes referencing these variables automatically pick up the new color. Also await lazy color extraction in getTitleWithChildren() so palettes are available on first visit to never-before-opened titles. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
31 lines
992 B
TypeScript
31 lines
992 B
TypeScript
import type { ColorPalette } from "@/lib/types/title";
|
|
|
|
function hexToRelativeLuminance(hex: string): number {
|
|
const r = Number.parseInt(hex.slice(1, 3), 16) / 255;
|
|
const g = Number.parseInt(hex.slice(3, 5), 16) / 255;
|
|
const b = Number.parseInt(hex.slice(5, 7), 16) / 255;
|
|
const toLinear = (c: number) =>
|
|
c <= 0.03928 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4;
|
|
return 0.2126 * toLinear(r) + 0.7152 * toLinear(g) + 0.0722 * toLinear(b);
|
|
}
|
|
|
|
export function getTitleThemeStyle(
|
|
palette: ColorPalette | null,
|
|
): React.CSSProperties {
|
|
const color = palette?.vibrant;
|
|
if (!color) return {};
|
|
|
|
const luminance = hexToRelativeLuminance(color);
|
|
const foreground =
|
|
luminance > 0.3
|
|
? "oklch(0.13 0.006 55)" // dark (current --primary-foreground)
|
|
: "oklch(0.93 0.015 80)"; // light (current --foreground)
|
|
|
|
return {
|
|
"--primary": color,
|
|
"--ring": color,
|
|
"--primary-foreground": foreground,
|
|
"--status-watching": color,
|
|
} as React.CSSProperties;
|
|
}
|