fnx_web/svelte/src/filesystem/edit_window/Branding.ts

import parse from "pure-color/parse";
import rgb2hsl from "pure-color/convert/rgb2hsl";
import hsl2rgb from "pure-color/convert/hsl2rgb";
import rgb2hex from "pure-color/convert/rgb2hex";
import type { FSNode, FSNodeProperties } from "lib/FilesystemAPI.svelte";

const text_contrast = 80
const body_alpha = 0.9

type Style = {
	input_background?: string,
	input_hover_background?: string,
	input_text?: string,
	highlight_color?: string,
	highlight_background?: string,
	highlight_text_color?: string,
	link_color?: string,
	danger_color?: string,
	danger_text_color?: string,
	background_color?: string,
	background?: string,
	background_text_color?: string,
	background_pattern_color?: string,
	body_color?: string,
	body_background?: string,
	body_text_color?: string,
	shaded_background?: string,
	separator?: string,
	shadow_color?: string,
	card_color?: string,
	background_image?: string,
	background_image_size?: string,
	background_image_position?: string,
	background_image_repeat?: string,
}

// Generate a branding style from a file's properties map
export const branding_from_path = (path: Array<FSNode>) => {
	const style = {}
	for (const node of path) {
		add_styles(style, node.properties)
	}
	last_generated_style = style
	return style
}

// The last style which was generated is cached, when we don't have a complete
// path to generate the style with we will use the cached style as a basis
let last_generated_style: Style = {}
export const branding_from_props = (props: FSNodeProperties) => {
	add_styles(last_generated_style, props)
	return gen_css(last_generated_style)
}

export const css_from_path = (path: Array<FSNode>) => {
	return gen_css(branding_from_path(path))
}

const gen_css = (style: Style) => {
	return Object.entries(style).map(([key, value]) => `--${key}:${value}`).join(';');
}

// add_styles adds the styles configured in the properties struct to the
// existing style which is passed as the first argument. When navigating to a
// path this function is executed on every member of the path so all the styles
// get combined
const add_styles = (style: Style, properties: FSNodeProperties) => {
	if (!properties || !properties.branding_enabled || properties.branding_enabled !== "true") {
		return
	}

	if (properties.brand_input_color) {
		style.input_background = properties.brand_input_color
		style.input_hover_background = properties.brand_input_color
		style.input_text = add_contrast(properties.brand_input_color, text_contrast)
	}
	if (properties.brand_highlight_color) {
		style.highlight_color = properties.brand_highlight_color
		style.highlight_background = properties.brand_highlight_color
		style.highlight_text_color = add_contrast(properties.brand_highlight_color, text_contrast)

		// If we have a body colour to compare it to we use the highlight colour
		// to generate the link colour
		if (properties.brand_body_color) {
			style.link_color = generate_link_color(properties.brand_highlight_color, properties.brand_body_color)
		}
	}
	if (properties.brand_danger_color) {
		style.danger_color = properties.brand_danger_color
		style.danger_text_color = add_contrast(properties.brand_danger_color, text_contrast)
	}
	if (properties.brand_background_color) {
		style.background_color = properties.brand_background_color
		style.background = properties.brand_background_color
		style.background_text_color = add_contrast(properties.brand_background_color, text_contrast)
		style.background_pattern_color = properties.brand_background_color
	}
	if (properties.brand_body_color) {
		style.body_color = properties.brand_body_color
		style.body_background = set_alpha(properties.brand_body_color, body_alpha)
		style.body_text_color = add_contrast(properties.brand_body_color, text_contrast)
		style.shaded_background = set_alpha(properties.brand_body_color, body_alpha)
		style.separator = add_contrast(properties.brand_body_color, 15)
		style.shadow_color = darken(properties.brand_body_color, 0.8)
	}
	if (properties.brand_card_color) {
		style.card_color = properties.brand_card_color
	}
	if (properties.brand_background_image) {
		style.background_image = "url('/api/filesystem/" + properties.brand_background_image + "')"
		style.background_image_size = "cover"
		style.background_image_position = "center"
		style.background_image_repeat = "no-repeat"
	}
}

const add_contrast = (color: string, amt: number) => {
	let hsl = rgb2hsl(parse(color)) // Convert hex to hsl
	// If the lightness is less than 40 it is considered a dark colour. This
	// threshold is 40 instead of 50 because overall dark text is more legible
	if (hsl[2] < 40) {
		hsl[2] = hsl[2] + amt // Dark color, add lightness
	} else {
		hsl[2] = hsl[2] - amt // Light color, remove lightness
	}
	return rgb2hex(hsl2rgb(hsl)) // Convert back to hex
}

// Darken and desaturate. Only used for shadows
const darken = (color: string, percent: number) => {
	let hsl = rgb2hsl(parse(color)) // Convert hex to hsl
	hsl[1] = hsl[1] * percent
	hsl[2] = hsl[2] * percent
	return rgb2hex(hsl2rgb(hsl)) // Convert back to hex
}

const set_alpha = (color: string, amt: number) => {
	let rgb = parse(color)
	rgb.push(amt)
	return "rgba(" + rgb.join(", ") + ")"
}

const generate_link_color = (link_color: string, body_color: string) => {
	let link = rgb2hsl(parse(link_color))
	let body = rgb2hsl(parse(body_color))

	// If the body and link colours are both dark we lighten the link, and the
	// other way around too
	if (body[2] < 50 && link[2] < 50) {
		link[2] = link[2] + 40 // Dark color, add lightness
	} else if (body[2] > 50 && link[2] > 50) {
		link[2] = link[2] - 40 // Light color, remove lightness
	}
	return rgb2hex(hsl2rgb(link)) // Convert back to hex
}