color-elements 0.0.1

package/color-slider/style.css

@@ -0,0 +1,65 @@
+.color-slider {
+	display: block;
+	margin: 0 1em auto 0;
+	width: 100%;
+	-moz-appearance: none;
+	-webkit-appearance: none;
+	background: linear-gradient(to right, var(--stops)), var(--transparency);
+	height: 2.2em;
+	border-radius: .3em;
+	box-shadow: 0 0 1px rgba(0, 0, 0, 0.5);
+
+
+&::-webkit-slider-thumb {
+	width: 1em;
+	height: 2.3em;
+	-webkit-appearance: none;
+	border-radius: .15em;
+	border: 1px solid black;
+	box-shadow: 0 0 0 1px white;
+}
+
+&::-moz-range-thumb {
+	width: 1em;
+	height: 2.3em;
+	border-radius: .15em;
+	border: 1px solid black;
+	box-shadow: 0 0 0 1px white;
+	background: transparent;
+}
+
+&::-moz-range-track {
+	background: none;
+}
+
+& + input[type=number] {
+	position: absolute;
+	margin-top: -4em;
+	left: calc(100% * var(--percentage));
+	transform: translateX(-50%);
+	padding: .2em .5em;
+	width: 3em;
+	border: 0;
+	border-radius: .3em;
+	text-align: center;
+	color: white;
+	background: rgba(0,0,0,.8);
+	font: inherit;
+	font-size: 120%;
+	transition: .3s left cubic-bezier(.17,.67,.49,1.48) ;
+}
+
+	/* Prevent input from moving all over the place as we type */
+	& + input[type=number]:focus {
+		transition-delay: .5s;
+	}
+
+	label:not(:focus-within):not(:hover) > .color-slider + input[type=number] {
+		display: none;
+	}
+
+}
+
+.color-slider-label {
+	position: relative;
+}

package/color-swatch/color-swatch.css

@@ -0,0 +1,41 @@
+[part="swatch-wrapper"] {
+	display: inline-flex;
+	align-items: baseline;
+	gap: .2em;
+	margin-inline: .1em;
+}
+
+#swatch {
+	--color-image: linear-gradient(var(--color), var(--color));
+	--transparency-tile-size: clamp(6px, .5em, 30px);
+	--transparency-grid: repeating-conic-gradient(hsl(0 0% 85%) 0 25%, hsl(0 0% 98%) 0 50%) 0 0 / var(--transparency-tile-size) var(--transparency-tile-size);
+	--border-width: clamp(2px, .15em, 16px);
+	--box-shadow-blur: clamp(2px, .1em, 5px);
+	--box-shadow-color: rgb(0 0 0 / .3);
+
+	position: relative;
+	bottom: calc(-1 * var(--border-width) - .1em);
+	width: 1.2em;
+	height: 1.2em;
+	border: var(--border-width) solid white;
+	box-sizing: border-box;
+	background: var(--color-image, 0), var(--transparency-grid, canvas);
+	box-shadow: calc(var(--box-shadow-blur) * .2) calc(var(--box-shadow-blur) * .2) var(--box-shadow-blur) var(--box-shadow-color);
+	border-radius: clamp(1px, .1em, 10px);
+}
+
+#swatch:hover {
+	transform: scale(1.5);
+	transition: .4s;
+}
+
+#swatch.invalid {
+	--color-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><text y=".9em" font-size="90">⚠️</text></svg>');
+	--transparency-grid: initial;
+}
+
+@media (prefers-color-scheme: dark) {
+	#swatch {
+		--box-shadow-color: rgb(0 0 0 / .8);
+	}
+}

package/color-swatch/color-swatch.js

@@ -0,0 +1,79 @@
+import Color from "../../src/index.js";
+
+let styleURL = new URL("./color-swatch.css", import.meta.url);
+
+export default class ColorSwatch extends HTMLElement {
+	#swatch;
+
+	constructor () {
+		super();
+		this.attachShadow({mode: "open"});
+		this.shadowRoot.innerHTML = `<style>@import url("${ styleURL }");</style>
+		<div part="swatch-wrapper">
+			<div id="swatch" part="swatch"></div>
+			<slot></slot>
+		</div>`;
+		this.#swatch = this.shadowRoot.querySelector("#swatch");
+		this.attributeChangedCallback();
+	}
+
+	connectedCallback () {
+		this.#render();
+		ColorSwatch.#mo.observe(this, {childList: true, subtree: true, characterData: true});
+	}
+
+	#value;
+	get value () {
+		return this.#value;
+	}
+	set value (value) {
+		this.#value = value;
+		this.#render();
+	}
+
+	#color;
+	get color () {
+		return this.#color;
+	}
+
+	#render () {
+		let colorText = this.value || this.textContent;
+
+		try {
+			this.#color = new Color(colorText);
+			this.#swatch.style.cssText = `--color: ${this.#color.display()}`;
+			this.#swatch.classList.remove("invalid");
+		}
+		catch (e) {
+			this.#color = null;
+			this.#swatch.classList.add("invalid");
+		}
+	}
+
+	static get observedAttributes () {
+		return ["value"];
+	}
+
+	attributeChangedCallback (name, newValue) {
+		if (!name && this.hasAttribute("value") || name === "value") {
+			this.value = this.getAttribute("value");
+		}
+	}
+
+	static #mo = new MutationObserver(mutations => {
+		for (let mutation of mutations) {
+			let target = mutation.target;
+
+			while (target && !(target instanceof ColorSwatch)) {
+				target = target.parentNode;
+			}
+
+			if (target) {
+				target.#render();
+			}
+		}
+	});
+}
+
+
+customElements.define("color-swatch", ColorSwatch);

package/color-swatch/index.njk

@@ -0,0 +1,40 @@
+---
+title: <color-swatch>
+---
+
+
+<script src="color-swatch.js" type="module"></script>
+<style>
+	html {
+		color-scheme: light dark;
+	}
+
+	@media (prefers-color-scheme: dark) {
+		html {
+			background: hsl(220 5% 20%);
+		}
+	}
+
+	color-swatch {
+		display: block;
+		margin: 1em 0;
+	}
+</style>
+
+
+<h1>&lt;color-swatch></h1>
+
+<section>
+	<h2>Different font sizes</h2>
+	<color-swatch style="font-size: 70%" contentEditable>lch(50% 40 30)</color-swatch>
+	<color-swatch contentEditable>lch(50% 40 30)</color-swatch>
+	<color-swatch style="font-size: 200%" contentEditable>lch(50% 40 30)</color-swatch>
+	<color-swatch style="font-size: 400%" contentEditable>lch(50% 40 30)</color-swatch>
+	<color-swatch style="font-size: 800%" contentEditable>lch(50% 40 30)</color-swatch>
+</section>
+
+<p>Semi-transparent color</p>
+<color-swatch>hsl(340 90% 50% / .25)</color-swatch>
+
+<p>Invalid color</p>
+<color-swatch>foobar</color-swatch>

package/common/attributes.js

@@ -0,0 +1,68 @@
+export default function (Class, attributes = Class.attributes) {
+	Object.defineProperty(Class.prototype, "_props", {
+		get () {
+			let value = {};
+			Object.defineProperty(this, "_props", {
+				value,
+				writable: true,
+				configurable: true,
+				enumerable: false,
+			});
+			return value;
+		},
+		writable: true,
+		configurable: true,
+	});
+
+	// Define getters and setters for each attribute
+	for (let name in attributes) {
+		let spec = Class.attributes[name] ?? {};
+		let {type, default: defaultValue} = spec;
+
+		Object.defineProperty(Class.prototype, name, {
+			get () {
+				let value = this._props[name];
+
+				if (value === undefined && defaultValue !== undefined) {
+					return defaultValue;
+				}
+
+				return value;
+			},
+			set (value) {
+				let oldValue = this._props[name];
+				let oldAttributeValue = this.getAttribute(name);
+				let originalValue = value;
+				let originalClass = value.constructor;
+				let originalType = typeof value;
+
+				if (type && type !== String) {
+					if (type === Number) {
+						value = Number(value);
+					}
+					else if (type === Boolean) {
+						value = value !== null;
+					}
+					else {
+						// Assume it's a class
+						value = new type(value);
+					}
+				}
+
+				this._props[name] = value;
+
+				if (value !== oldValue && oldAttributeValue !== originalValue) {
+					if (type === Boolean) {
+						this.toggleAttribute(name, value);
+					}
+					else {
+						this.setAttribute(name, value);
+					}
+				}
+			},
+			enumerable: true,
+		});
+	}
+
+	// Class.prototype._initializeProps = function () {};
+}

package/common/color.js

@@ -0,0 +1,10 @@
+let specifier;
+
+if (import.meta.resolve("colorjs.io")) {
+	specifier = "colorjs.io";
+}
+else {
+	specifier = "../node_modules/colorjs.io/dist/color.js";
+}
+
+export default await import(specifier);

package/css-color/css-color.js

@@ -0,0 +1,256 @@
+import Color from "../common/color.js";
+import "../color-gamut/color-gamut.js";
+// const styles = await fetch("./style.css").then(r => r.text());
+
+const gamuts = ["srgb", "p3", "rec2020"];
+
+let styleURL = new URL("./style.css", import.meta.url);
+let importIncrementable = import("https://incrementable.verou.me/incrementable.mjs").then(m => m.default);
+
+export default class CSSColor extends HTMLElement {
+	#dom = {};
+
+	constructor () {
+		super();
+		this.attachShadow({mode: "open"});
+		this.shadowRoot.innerHTML = `
+			<style>@import url("${ styleURL }")</style>
+			<slot name="swatch">
+				<div id="swatch" part="swatch"></div>
+			</slot>
+			<div id="wrapper">
+				<slot name="before"></slot>
+				<div part="color-wrapper">
+					<slot></slot>
+				</div>
+				<slot name="after"></slot>
+			</div>
+		`;
+	}
+
+	#initialized;
+
+	connectedCallback () {
+		if (!this.#initialized) {
+			this.#initialize();
+		}
+
+		// This should eventually be a custom state
+		this.#dom.wrapper.classList.toggle("static", !this.#dom.input);
+
+		if (this.#dom.input) {
+			if (!this.#dom.input.incrementable) {
+				// Increment numbers by keyboard arrow keys
+				importIncrementable.then(Incrementable => new Incrementable(this.#dom.input));
+			}
+		}
+
+		this.#render();
+	}
+
+	#errorTimeout;
+	#cs;
+	#scopeRoot;
+
+	// Gets called when the element is connected for the first time
+	#initialize ({force} = {}) {
+		if (!force && this.#initialized) {
+			return;
+		}
+
+		this.#initialized = true;
+
+		this.#dom.wrapper = this.shadowRoot.querySelector("#wrapper");
+		this.#dom.colorWrapper = this.shadowRoot.querySelector("[part=color-wrapper]");
+		this.#dom.input = this.querySelector("input");
+
+		if (this.#dom.input) {
+			this.#dom.input.addEventListener("input", evt => {
+				this.#render(evt);
+			});
+		}
+
+		this.verbatim = this.hasAttribute("verbatim");
+
+		if (this.verbatim) {
+			// Cannot display gamut info without parsing the color
+			this.setAttribute("gamuts", "none");
+		}
+
+		this.gamuts = null;
+		if (!this.matches('[gamuts="none"]')) {
+			this.gamuts = this.getAttribute("gamuts") ?? "srgb, p3, rec2020: P3+, prophoto: PP";
+			this.#dom.gamutIndicator = document.createElement("color-gamut");
+
+			Object.assign(this.#dom.gamutIndicator, {
+				gamuts: this.gamuts,
+				id: "gamut",
+				part: "gamut",
+				exportparts: "label: gamutlabel",
+			});
+
+			this.#dom.colorWrapper.appendChild(this.#dom.gamutIndicator);
+
+			this.#dom.gamutIndicator.addEventListener("gamutchange", evt => {
+				this.setAttribute("gamut", evt.detail.gamut);
+				this.dispatchEvent(new CustomEvent("gamutchange", {
+					detail: evt.detail,
+				}));
+			});
+		}
+
+		if (this.hasAttribute("property")) {
+			this.property = this.getAttribute("property");
+			this.scope = this.getAttribute("scope") ?? ":root";
+			this.#dom.style = document.createElement("style");
+			document.head.appendChild(this.#dom.style);
+
+			let varRef = `var(${this.property})`;
+			if (this.verbatim) {
+				this.style.setProperty("--color", varRef);
+				this.value ||= varRef;
+			}
+			else {
+				let scopeRoot = this.closest(this.scope);
+
+				// Is contained within scope root
+				if (scopeRoot) {
+					this.style.setProperty("--color", varRef);
+				}
+
+				scopeRoot ??= document.querySelector(this.scope);
+
+				if (scopeRoot) {
+					let cs = getComputedStyle(scopeRoot);
+					this.value = cs.getPropertyValue(this.property);
+				}
+			}
+		}
+	}
+
+	#render (evt) {
+		if (!this.#initialized) {
+			return;
+		}
+
+		clearTimeout(this.#errorTimeout);
+
+		if (!this.isConnected) {
+			return;
+		}
+
+		let value = this.value;
+		this.#color = null;
+
+		if (value) {
+			try {
+				this.#color = new Color(value);
+			}
+			catch (e) {
+				// Why a timeout? We don't want to produce errors for intermediate states while typing,
+				// but if this is a genuine error, we do want to communicate it.
+				this.#errorTimeout = setTimeout(_ => this.#dom.input?.setCustomValidity(e.message), 500);
+			}
+
+			if (this.#color) {
+				this.#setColor(this.#color);
+				this.#dom.input?.setCustomValidity("");
+			}
+
+			this.dispatchEvent(new CustomEvent("colorchange", {
+				detail: {
+					color: this.#color,
+				},
+			}));
+		}
+	}
+
+	get gamut () {
+		return this.#dom.gamutIndicator.gamut;
+	}
+
+	get value () {
+		return this.#dom.input?.value ?? this.textContent.trim();
+	}
+
+	set value (value) {
+		let oldValue = this.value;
+		if (value === oldValue) {
+			return;
+		}
+
+		this.#setValue(value);
+		this.#render();
+	}
+
+	#setValue (value) {
+		if (!this.#initialized) {
+			this.#initialize();
+		}
+
+		if (this.#dom.input) {
+			this.#dom.input.value = value;
+		}
+		else {
+			this.textContent = value;
+		}
+	}
+
+	#color;
+	get color () {
+		return this.#color;
+	}
+
+	set color (color) {
+		if (typeof color === "string") {
+			color = new Color(color);
+		}
+
+		this.#setColor(color);
+
+		let colorString;
+		if (this.verbatim && this.property) {
+			colorString = `var(${this.property})`;
+		}
+		else {
+			colorString = color.toString({ precision: 2, inGamut: false });
+		}
+		this.#setValue(colorString);
+	}
+
+	#setColor (color) {
+		this.#color = color;
+		let colorString;
+
+		if (this.verbatim && this.property) {
+			colorString = `var(${this.property})`;
+		}
+		else {
+			try {
+				colorString = this.#color.display({inGamut: false});
+
+			}
+			catch (e) {
+				colorString = this.value;
+			}
+		}
+
+		if (this.value === colorString) {
+			return;
+		}
+
+		this.style.setProperty("--color", colorString);
+
+		if (this.property) {
+			this.#dom.style.textContent = `${this.scope} { ${this.property}: ${colorString}; }`;
+		}
+
+		if (this.#dom.gamutIndicator) {
+			this.#dom.gamutIndicator.color = this.#color;
+		}
+	}
+
+	static observedAttributes = ["for", "property"];
+}
+
+customElements.define("css-color", CSSColor);

package/css-color/index.njk

@@ -0,0 +1,43 @@
+<h1>&lt;css-color></h1>
+
+<script src="./css-color.js" type="module"></script>
+<h2>Static</h2>
+<css-color>oklch(70% 0.25 138)</css-color>
+<css-color swatch="large">oklch(70% 0.25 138)</css-color>
+
+<h2>Editable</h2>
+<css-color>
+	<input value="oklch(70% 0.25 138)" />
+</css-color>
+<css-color swatch="large">
+	<input value="oklch(70% 0.25 138)" />
+</css-color>
+
+<h2>With name</h2>
+<css-color>
+	<label slot="before" for=c1>Accent color:</label>
+	<input value="oklch(70% 0.25 138)" id=c1 />
+</css-color>
+<css-color swatch="large">
+	<label slot="before" id=c2>Accent color:</label>
+	<input value="oklch(70% 0.25 138)" id=c2 />
+</css-color>
+
+<h2>Bound to CSS property</h2>
+<css-color swatch="large" property="--color-red">
+	<input />
+</css-color>
+
+<h2>Update via JS</h2>
+<h3>Static</h3>
+<css-color id="dynamic_static">oklch(70% 0.25 138)</css-color>
+<script type="module">
+	dynamic_static.color = "oklch(60% 0.15 0)"
+</script>
+<h3>Editable</h3>
+<css-color id="dynamic_editable">
+	<input value="oklch(70% 0.25 138)" />
+</css-color>
+<script type="module">
+	dynamic_editable.color = "oklch(60% 0.15 0)"
+</script>

package/css-color/style.css

@@ -0,0 +1,67 @@
+:host {
+	display: inline-flex;
+	gap: .3em;
+	width: min-content;
+	white-space: nowrap;
+	--background-checkerboard: repeating-conic-gradient(rgb(0 0 0 / .12) 0 25%, transparent 0 50%) 0 0 / 1em 1em;
+}
+
+#gamut {
+	font-size: 80%;
+}
+
+#wrapper {
+	display: flex;
+	flex-flow: inherit;
+
+	&.static {
+		gap: .4em;
+	}
+}
+
+[part="color-wrapper"] {
+	position: relative;
+	display: flex;
+	gap: .2em;
+
+	&:not(.static *) {
+		#gamut {
+			position: absolute;
+			inset: .3em;
+			inset-inline-start: auto;
+		}
+	}
+
+	::slotted(input) {
+		padding-inline-end: 2em;
+	}
+}
+
+:host(:not([for])) #swatch {
+	display: block;
+	inline-size: 2em;
+	border-radius: .2em;
+	background: linear-gradient(var(--color, transparent) 0 100%), var(--background-checkerboard);
+}
+
+:host([swatch="none"]) #swatch {
+	display: none;
+}
+
+:host(:not([for])):host([swatch="large"]) {
+	flex-flow: column;
+
+	#wrapper {
+		flex-flow: column;
+	}
+}
+
+:host(:not([for])):host([swatch="large"]) #swatch {
+	inline-size: auto;
+	block-size: 5em;
+}
+
+:host(:not([for])):host([swatch="large"]) #wrapper.static slot {
+	display: flex;
+	flex: 1;
+}

package/elements.11tydata.json

@@ -0,0 +1,5 @@
+{
+	"layout": "page",
+	"permalink": "{{ page.filePathStem | replace('README', '') | replace('index', '') }}/index.html",
+	"body_classes": "cn-ignore"
+}

package/index.js

@@ -0,0 +1,4 @@
+export { default as ColorSlider } from './color-slider/color-slider.js';
+export { default as ColorSwatch } from './color-swatch/color-swatch.js';
+export { default as CSSColor } from './css-color/css-color.js';
+export { default as ColorGamut } from './color-gamut/color-gamut.js';

package/lib/README.md

@@ -0,0 +1,4 @@
+# `lib`
+
+Dependencies from `node_modules` are automatically copied here.
+This directory is included in the `.gitignore` file.