cherrypick/src/client/app/common/scripts/theme.ts

export default function(theme: { [key: string]: string }) {
	const props = compile(theme);

	Object.entries(props).forEach(([k, v]) => {
		if (k == 'meta') return;
		document.documentElement.style.setProperty(`--${k}`, v.toString());
	});
}

function compile(theme: { [key: string]: string }): { [key: string]: string } {
	function getRgba(code: string): number[] {
		// ref
		if (code[0] == '@') {
			return getRgba(theme[code.substr(1)]);
		}

		let m;

		//#region #RGB
		m = code.match(/^#([0-9a-f]{3})$/i)[1];
		if (m) {
			return [
				parseInt(m.charAt(0), 16) * 0x11,
				parseInt(m.charAt(1), 16) * 0x11,
				parseInt(m.charAt(2), 16) * 0x11,
				255
			];
		}
		//#endregion

		//#region #RRGGBB
		m = code.match(/^#([0-9a-f]{6})$/i)[1];
		if (m) {
			return [
				parseInt(m.substr(0, 2), 16),
				parseInt(m.substr(2, 2), 16),
				parseInt(m.substr(4, 2), 16),
				255
			];
		}
		//#endregion

		return [0, 0, 0, 255];
	}

	const props = {};

	Object.entries(theme).forEach(([k, v]) => {
		if (k == 'meta') return;
		const [r, g, b, a] = getRgba(v);
		props[k] = genValue(r, g, b, a);
		props[`${k}-r`] = r;
		props[`${k}-g`] = g;
		props[`${k}-b`] = b;
		props[`${k}-a`] = a;
	});

	return props;
}

function genValue(r: number, g: number, b: number, a: number): string {
	return a != 255 ? `rgba(${r}, ${g}, ${b}, ${a})` : `#${r.toString(16)}${g.toString(16)}${b.toString(16)}`;
}