This commit is contained in:
sadan 2024-11-25 19:50:06 -05:00
parent 53273b83ba
commit fc30e05414
No known key found for this signature in database
2 changed files with 9 additions and 21 deletions

View file

@ -9,9 +9,8 @@ const clamp = (min: number, max: number) => (num: number) =>
const clampContrast = clamp(1, 21); const clampContrast = clamp(1, 21);
const snap = (mult: number, num: number) => const snap = (mult: number, num: number) =>
Math.floor((num % mult) / (mult / 2)) * mult + (num - (num % mult)); Math.floor((num % mult) / (mult / 2)) * mult + (num - (num % mult));
/**
* 0-1 // NOTE: All color values are 0-1 and multiplied when stringified
*/
interface sRGB { interface sRGB {
type: "srgb"; type: "srgb";
r: number; r: number;
@ -27,13 +26,7 @@ interface lRGB {
interface HSL { interface HSL {
type: "hsl"; type: "hsl";
h: number; h: number;
/**
* 0-1
*/
s: number; s: number;
/**
* 0-1
*/
l: number; l: number;
} }
interface OKLAB { interface OKLAB {
@ -42,8 +35,9 @@ interface OKLAB {
a: number; a: number;
b: number; b: number;
} }
type AnyColor = sRGB | lRGB | HSL | OKLAB;
const RGB_REGEX = /rgb\((?:(\d+(?:\.\d+)?),? ?)(?:(\d+(?:\.\d+)?),? ?)(?:(\d+(?:\.\d+)?),? ?)\)/; const RGB_REGEX = /rgb\((?:(\d+(?:\.\d+)?),? ?)(?:(\d+(?:\.\d+)?),? ?)(?:(\d+(?:\.\d+)?),? ?)\)/;
export class Color { export class Color {
private sRGB: sRGB; private sRGB: sRGB;
private get lRGB(): lRGB { private get lRGB(): lRGB {
@ -122,10 +116,6 @@ export class Color {
return `rgb(${this.sRGB.r * 255}, ${this.sRGB.g * 255}, ${this.sRGB.b * 255})`; return `rgb(${this.sRGB.r * 255}, ${this.sRGB.g * 255}, ${this.sRGB.b * 255})`;
} }
public get hslString(): string {
return `hsl(${this.HSL.h}, ${(this.HSL.s * 100).toFixed(1)}%, ${(this.HSL.l * 100).toFixed(1)}%)`;
}
public get lightness(): number { public get lightness(): number {
return this.HSL.l; return this.HSL.l;
} }
@ -173,10 +163,6 @@ export class Color {
return (fg.lumin + 0.05) / (bg.lumin + 0.05); return (fg.lumin + 0.05) / (bg.lumin + 0.05);
} }
public static mixokl(c1: string, c2: string, pc1: number): Color {
return Color.parse(c1).mix("oklab", pc1 / 100, Color.parse(c2));
}
public mix(colorspace: "oklab", thisPercent: number, other: Color, otherPercent = 1 - thisPercent): Color { public mix(colorspace: "oklab", thisPercent: number, other: Color, otherPercent = 1 - thisPercent): Color {
switch (colorspace) { switch (colorspace) {
case "oklab": { case "oklab": {

View file

@ -265,10 +265,12 @@ export default definePlugin({
throw new Error("No background color found"); throw new Error("No background color found");
} }
const bg = new Contrast(Color.parse(bgOverlayChat || backgroundPrimary)); const bg = new Contrast(Color.parse(bgOverlayChat || backgroundPrimary));
const rc = Color.parse(author.colorString);
const mkColor = c => bg.calculateMinContrastColor(rc.mix("oklab", messageSaturation / 100, Color.parse(c)), contrast);
return { return {
color: bg.calculateMinContrastColor(Color.mixokl(author.colorString, textNormal, messageSaturation), contrast), color: mkColor(textNormal),
"--header-primary": bg.calculateMinContrastColor(Color.mixokl(author.colorString, headerPrimary, messageSaturation), contrast), "--header-primary": mkColor(headerPrimary),
"--text-muted": bg.calculateMinContrastColor(Color.mixokl(author.colorString, textMuted, messageSaturation), contrast) "--text-muted": mkColor(textMuted)
}; };
} }
} catch (e) { } catch (e) {