Theme customizer now uses HSL values

scripts/Actions/Theme.ts

@@ -1,4 +1,5 @@
 import AnimeNotifier from "../AnimeNotifier"
+import { hexToHSL } from "scripts/Utils"
 
 let currentThemeName = "light"
 let previewTimeoutID: number = 0
@@ -11,7 +12,6 @@ const themes = {
 		"link-color-h": "45",
 		"link-color-s": "100%",
 		"link-color-l": "66%",
-		"link-hover-color-l": "76%",
 
 		"text-color-l": "90%",
 		"bg-color-l": "18%",
@@ -54,7 +54,6 @@ const themes = {
 	// 	"base-theme": "dark",
 	// 	"link-color-h": "0",
 	// 	"link-color-l": "78%",
-	// 	"link-hover-color-l": "88%",
 	// 	"bg-color-s": "70%"
 	// },
 	// "sakura": {
@@ -62,7 +61,6 @@ const themes = {
 	// 	"link-color-h": "348",
 	// 	"link-color-s": "100%",
 	// 	"link-color-l": "53%",
-	// 	"link-hover-color-l": "58%",
 	// 	"bg-color-h": "348",
 	// 	"bg-color-s": "100%",
 	// 	"bg-color-l": "86%",
@@ -169,12 +167,19 @@ export function applyTheme(themeName: string) {
 export function pickColor(_: AnimeNotifier, element: HTMLElement) {
 	let rootStyle = document.documentElement.style
 	let variableName = `--${element.dataset.variable}`
-
 	let input = document.createElement("input")
 	input.type = "color"
 
 	input.oninput = () => {
-		rootStyle.setProperty(variableName, input.value)
+		let color = hexToHSL(input.value)
+
+		if(!color) {
+			return
+		}
+
+		rootStyle.setProperty(variableName+"-h", (color.h * 360).toString())
+		rootStyle.setProperty(variableName+"-s", (color.s * 100).toString() + "%")
+		rootStyle.setProperty(variableName+"-l", (color.l * 100).toString() + "%")
 	}
 
 	input.click()

scripts/Utils/hexToHSL.ts

@@ -0,0 +1,45 @@
+export function hexToHSL(hex: string) {
+	let result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex)
+
+	if(!result) {
+		return null
+	}
+
+	let r = parseInt(result[1], 16)
+	let g = parseInt(result[2], 16)
+	let b = parseInt(result[3], 16)
+
+	r /= 255
+	g /= 255
+	b /= 255
+
+	let max = Math.max(r, g, b)
+	let min = Math.min(r, g, b)
+
+	let h = 0
+	let s = 0
+	let l = (max + min) / 2
+
+	if(max == min) {
+		h = s = 0
+	} else {
+		let d = max - min
+		s = l > 0.5 ? d / (2 - max - min) : d / (max + min)
+
+		switch(max) {
+			case r:
+				h = (g - b) / d + (g < b ? 6 : 0)
+				break
+			case g:
+				h = (b - r) / d + 2
+				break
+			case b:
+				h = (r - g) / d + 4
+				break
+		}
+
+		h /= 6
+	}
+
+	return {h, s, l}
+}

scripts/Utils/index.ts

@@ -1,6 +1,7 @@
 export * from "./supportsWebP"
 export * from "./delay"
 export * from "./findAll"
+export * from "./hexToHSL"
 export * from "./plural"
 export * from "./requestIdleCallback"
 export * from "./swapElements"

styles/config.scarlet

@@ -4,19 +4,22 @@ text-color-s = 0%
 text-color-l = 23.5%
 text-color = hsl(text-color-h, text-color-s, text-color-l)
 
-bg-color-h = 0
-bg-color-s = 0%
-bg-color-l = 96%
-bg-color = hsl(bg-color-h, bg-color-s, bg-color-l)
-
 link-color-h = 7
 link-color-s = 87%
 link-color-l = 45%
 link-color = hsl(link-color-h, link-color-s, link-color-l)
 
-link-hover-color-l = calc(link-color-l + 8%)
+bg-color-h = 0
-link-hover-color = hsl(link-color-h, link-color-s, link-hover-color-l)
+bg-color-s = 0%
+bg-color-l = 96%
+bg-color = hsl(bg-color-h, bg-color-s, bg-color-l)
 
+ui-background-h = bg-color-h
+ui-background-s = bg-color-s
+ui-background-l = 99.5%
+ui-background = hsl(ui-background-h, ui-background-s, ui-background-l)
+
+link-hover-color = hsl(link-color-h, link-color-s, calc(link-color-l + 8%))
 link-active-color = link-hover-color
 pro-color = hsla(0, 100%, 73%, 0.87)
 anime-alternative-title-color = hsla(0, 0%, 0%, 0.5)
@@ -35,9 +38,6 @@ ui-border = 1px solid ui-border-color
 ui-hover-border-color = rgba(0, 0, 0, 0.15)
 ui-hover-border = 1px solid ui-hover-border-color
 
-ui-background-l = 99.5%
-ui-background = hsl(bg-color-h, bg-color-s, ui-background-l)
-
 // ui-hover-background = rgb(254, 254, 254)
 // ui-background = linear-gradient(to bottom, rgba(0, 0, 0, 0.02) 0%, rgba(0, 0, 0, 0.037) 100%)
 // ui-hover-background = linear-gradient(to bottom, rgba(0, 0, 0, 0.01) 0%, rgba(0, 0, 0, 0.027) 100%)