Graham Murdoch sandgraham

Themes

A theme is the static configuration of a theme-able system. This requires a way to express the configuration and a theme-able system that is responsible for using the configuration to apply the expected styling.

I would argue that a good theme system has two key properties:

Interface

The interface consists of high level semantic variables that can be reused. This is where you assign values to variables such as primary, accent, etc. This is a convenient abstraction over specific assignments of values to style properties. It makes it easy to quickly customize a system with a different set of tokens.

	// Hash any string into an integer value
	// Then we'll use the int and convert to hex.
	function hashCode(str) {
	var hash = 0;
	for (var i = 0; i < str.length; i++) {
	hash = str.charCodeAt(i) + ((hash << 5) - hash);
	}
	return hash;
	}

	// Algorithm adapted from an amazing StackOverflow answer:
	// https://stackoverflow.com/questions/38923376/return-a-new-string-that-sorts-between-two-given-strings/38927158#38927158

	const A = 97;
	const B = 98;
	const Z = 122;
	const START = A - 1;
	const END = Z + 1;

	function findLexicalMiddleString(prev: string, next: string) {

	const iso2FlagEmoji = iso => String.fromCodePoint(...[...iso.toUpperCase()].map(char => char.charCodeAt(0) + 127397));

	iso2FlagEmoji("US"); // "🇺🇸"