sendou.ink/app/utils/oklch-gamut.ts

import type { z } from "zod";
import type { CustomTheme } from "~/db/tables";
import type { themeInputSchema } from "~/utils/zod";

export type ThemeInput = z.infer<typeof themeInputSchema>;

interface Lab {
	L: number;
	a: number;
	b: number;
}

interface RGB {
	r: number;
	g: number;
	b: number;
}

interface LC {
	L: number;
	C: number;
}

function oklab_to_linear_srgb(c: Lab): RGB {
	const l_ = c.L + 0.3963377774 * c.a + 0.2158037573 * c.b;
	const m_ = c.L - 0.1055613458 * c.a - 0.0638541728 * c.b;
	const s_ = c.L - 0.0894841775 * c.a - 1.291485548 * c.b;

	const l = l_ * l_ * l_;
	const m = m_ * m_ * m_;
	const s = s_ * s_ * s_;

	return {
		r: +4.0767416621 * l - 3.3077115913 * m + 0.2309699292 * s,
		g: -1.2684380046 * l + 2.6097574011 * m - 0.3413193965 * s,
		b: -0.0041960863 * l - 0.7034186147 * m + 1.707614701 * s,
	};
}

function compute_max_saturation(a: number, b: number): number {
	let k0: number;
	let k1: number;
	let k2: number;
	let k3: number;
	let k4: number;
	let wl: number;
	let wm: number;
	let ws: number;

	if (-1.88170328 * a - 0.80936493 * b > 1) {
		k0 = +1.19086277;
		k1 = +1.76576728;
		k2 = +0.59662641;
		k3 = +0.75515197;
		k4 = +0.56771245;
		wl = +4.0767416621;
		wm = -3.3077115913;
		ws = +0.2309699292;
	} else if (1.81444104 * a - 1.19445276 * b > 1) {
		k0 = +0.73956515;
		k1 = -0.45954404;
		k2 = +0.08285427;
		k3 = +0.1254107;
		k4 = +0.14503204;
		wl = -1.2684380046;
		wm = +2.6097574011;
		ws = -0.3413193965;
	} else {
		k0 = +1.35733652;
		k1 = -0.00915799;
		k2 = -1.1513021;
		k3 = -0.50559606;
		k4 = +0.00692167;
		wl = -0.0041960863;
		wm = -0.7034186147;
		ws = +1.707614701;
	}

	let S = k0 + k1 * a + k2 * b + k3 * a * a + k4 * a * b;

	const k_l = +0.3963377774 * a + 0.2158037573 * b;
	const k_m = -0.1055613458 * a - 0.0638541728 * b;
	const k_s = -0.0894841775 * a - 1.291485548 * b;

	{
		const l_ = 1 + S * k_l;
		const m_ = 1 + S * k_m;
		const s_ = 1 + S * k_s;

		const l = l_ * l_ * l_;
		const m = m_ * m_ * m_;
		const s = s_ * s_ * s_;

		const l_dS = 3 * k_l * l_ * l_;
		const m_dS = 3 * k_m * m_ * m_;
		const s_dS = 3 * k_s * s_ * s_;

		const l_dS2 = 6 * k_l * k_l * l_;
		const m_dS2 = 6 * k_m * k_m * m_;
		const s_dS2 = 6 * k_s * k_s * s_;

		const f = wl * l + wm * m + ws * s;
		const f1 = wl * l_dS + wm * m_dS + ws * s_dS;
		const f2 = wl * l_dS2 + wm * m_dS2 + ws * s_dS2;

		S = S - (f * f1) / (f1 * f1 - 0.5 * f * f2);
	}

	return S;
}

function find_cusp(a: number, b: number): LC {
	const S_cusp = compute_max_saturation(a, b);

	const rgb_at_max = oklab_to_linear_srgb({
		L: 1,
		a: S_cusp * a,
		b: S_cusp * b,
	});
	const L_cusp = Math.cbrt(
		1 / Math.max(rgb_at_max.r, rgb_at_max.g, rgb_at_max.b),
	);
	const C_cusp = L_cusp * S_cusp;

	return { L: L_cusp, C: C_cusp };
}

function find_gamut_intersection(
	a: number,
	b: number,
	L1: number,
	C1: number,
	L0: number,
): number {
	const cusp = find_cusp(a, b);

	let t: number;
	if ((L1 - L0) * cusp.C - (cusp.L - L0) * C1 <= 0) {
		t = (cusp.C * L0) / (C1 * cusp.L + cusp.C * (L0 - L1));
	} else {
		t = (cusp.C * (L0 - 1)) / (C1 * (cusp.L - 1) + cusp.C * (L0 - L1));

		{
			const dL = L1 - L0;
			const dC = C1;

			const k_l = +0.3963377774 * a + 0.2158037573 * b;
			const k_m = -0.1055613458 * a - 0.0638541728 * b;
			const k_s = -0.0894841775 * a - 1.291485548 * b;

			const l_dt = dL + dC * k_l;
			const m_dt = dL + dC * k_m;
			const s_dt = dL + dC * k_s;
			{
				const L = L0 * (1 - t) + t * L1;
				const C = t * C1;

				const l_ = L + C * k_l;
				const m_ = L + C * k_m;
				const s_ = L + C * k_s;

				const l = l_ * l_ * l_;
				const m = m_ * m_ * m_;
				const s = s_ * s_ * s_;

				const ldt = 3 * l_dt * l_ * l_;
				const mdt = 3 * m_dt * m_ * m_;
				const sdt = 3 * s_dt * s_ * s_;

				const ldt2 = 6 * l_dt * l_dt * l_;
				const mdt2 = 6 * m_dt * m_dt * m_;
				const sdt2 = 6 * s_dt * s_dt * s_;

				const r = 4.0767416621 * l - 3.3077115913 * m + 0.2309699292 * s - 1;
				const r1 = 4.0767416621 * ldt - 3.3077115913 * mdt + 0.2309699292 * sdt;
				const r2 =
					4.0767416621 * ldt2 - 3.3077115913 * mdt2 + 0.2309699292 * sdt2;

				const u_r = r1 / (r1 * r1 - 0.5 * r * r2);
				let t_r = -r * u_r;

				const g = -1.2684380046 * l + 2.6097574011 * m - 0.3413193965 * s - 1;
				const g1 =
					-1.2684380046 * ldt + 2.6097574011 * mdt - 0.3413193965 * sdt;
				const g2 =
					-1.2684380046 * ldt2 + 2.6097574011 * mdt2 - 0.3413193965 * sdt2;

				const u_g = g1 / (g1 * g1 - 0.5 * g * g2);
				let t_g = -g * u_g;

				const b = -0.0041960863 * l - 0.7034186147 * m + 1.707614701 * s - 1;
				const b1 = -0.0041960863 * ldt - 0.7034186147 * mdt + 1.707614701 * sdt;
				const b2 =
					-0.0041960863 * ldt2 - 0.7034186147 * mdt2 + 1.707614701 * sdt2;

				const u_b = b1 / (b1 * b1 - 0.5 * b * b2);
				let t_b = -b * u_b;

				t_r = u_r >= 0 ? t_r : Number.MAX_VALUE;
				t_g = u_g >= 0 ? t_g : Number.MAX_VALUE;
				t_b = u_b >= 0 ? t_b : Number.MAX_VALUE;

				t += Math.min(t_r, Math.min(t_g, t_b));
			}
		}
	}

	return t;
}

function clamp(x: number, min: number, max: number): number {
	return x < min ? min : x > max ? max : x;
}

function maximum_chroma_for_lh(L: number, h: number): number {
	const a = Math.cos(h);
	const b = Math.sin(h);

	const L0 = clamp(L, 0, 1);

	const t = find_gamut_intersection(a, b, L, 1, L0);

	return t;
}

// These are the lightness values used in vars.css
// Any changes here NEED to be reflected in vars.css as well.

const BASE_LIGHTNESS_VALUES = [
	1.0, // --base-c-0
	0.95, // --base-c-1
	0.9, // --base-c-2
	0.64, // --base-c-3
	0.46, // --base-c-4
	0.32, // --base-c-5
	0.25, // --base-c-6
	0.17, // --base-c-7
] as const;

const ACCENT_LIGHTNESS_VALUES = [
	0.26, // --acc-c-0: dark mode low
	0.52, // --acc-c-1: dark mode mid
	0.83, // --acc-c-2: dark mode high
	0.88, // --acc-c-3: light mode low
	0.53, // --acc-c-4: light mode mid
	0.32, // --acc-c-5: light mode high
] as const;

export const BASE_CHROMA_MULTIPLIERS = [
	0.01, // --base-c-0
	0.49, // --base-c-1
	0.62, // --base-c-2
	1.4, // --base-c-3
	1.29, // --base-c-4
	1.36, // --base-c-5
	1.29, // --base-c-6
	0.67, // --base-c-7
] as const;

export const ACCENT_CHROMA_MULTIPLIERS = [
	0.38, // --acc-c-0
	1.11, // --acc-c-1
	0.34, // --acc-c-2
	0.25, // --acc-c-3
	1.09, // --acc-c-4
	0.56, // --acc-c-5
] as const;

function clampChromaForColor(
	lightness: number,
	desiredChroma: number,
	hueRadians: number,
): number {
	const maxChroma = maximum_chroma_for_lh(lightness, hueRadians);
	return Math.min(desiredChroma, maxChroma);
}

export function clampThemeToGamut(input: ThemeInput): CustomTheme {
	const baseHueRadians = input.baseHue * (Math.PI / 180);
	const accentHueRadians = input.accentHue * (Math.PI / 180);

	const clampedBaseChromas = BASE_LIGHTNESS_VALUES.map((lightness, index) => {
		const desiredChroma = input.baseChroma * BASE_CHROMA_MULTIPLIERS[index];
		return clampChromaForColor(lightness, desiredChroma, baseHueRadians);
	});

	const clampedAccentChromas = ACCENT_LIGHTNESS_VALUES.map(
		(lightness, index) => {
			const desiredChroma =
				input.accentChroma * ACCENT_CHROMA_MULTIPLIERS[index];
			return clampChromaForColor(lightness, desiredChroma, accentHueRadians);
		},
	);

	const secondaryHue = (input.accentHue + 180) % 360;
	const secondaryHueRadians = secondaryHue * (Math.PI / 180);

	const clampedSecondaryChromas = ACCENT_LIGHTNESS_VALUES.map(
		(lightness, index) => {
			const desiredChroma =
				input.accentChroma * ACCENT_CHROMA_MULTIPLIERS[index];
			return clampChromaForColor(lightness, desiredChroma, secondaryHueRadians);
		},
	);

	return {
		"--_base-h": input.baseHue,
		"--_base-c-0": clampedBaseChromas[0],
		"--_base-c-1": clampedBaseChromas[1],
		"--_base-c-2": clampedBaseChromas[2],
		"--_base-c-3": clampedBaseChromas[3],
		"--_base-c-4": clampedBaseChromas[4],
		"--_base-c-5": clampedBaseChromas[5],
		"--_base-c-6": clampedBaseChromas[6],
		"--_base-c-7": clampedBaseChromas[7],
		"--_acc-h": input.accentHue,
		"--_acc-c-0": clampedAccentChromas[0],
		"--_acc-c-1": clampedAccentChromas[1],
		"--_acc-c-2": clampedAccentChromas[2],
		"--_acc-c-3": clampedAccentChromas[3],
		"--_acc-c-4": clampedAccentChromas[4],
		"--_acc-c-5": clampedAccentChromas[5],
		"--_second-h": secondaryHue,
		"--_second-c-0": clampedSecondaryChromas[0],
		"--_second-c-1": clampedSecondaryChromas[1],
		"--_second-c-2": clampedSecondaryChromas[2],
		"--_second-c-3": clampedSecondaryChromas[3],
		"--_second-c-4": clampedSecondaryChromas[4],
		"--_second-c-5": clampedSecondaryChromas[5],
		"--_chat-h": input.chatHue,
		"--_radius-box": input.radiusBox,
		"--_radius-field": input.radiusField,
		"--_radius-selector": input.radiusSelector,
		"--_border-width": input.borderWidth,
		"--_size-field": input.sizeField,
		"--_size-selector": input.sizeSelector,
		"--_size-spacing": input.sizeSpacing,
	};
}