color-elements 0.0.1 → 0.0.3

package/color-slider/style.css

@@ -1,65 +0,0 @@
-.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.js

@@ -1,79 +0,0 @@
-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

@@ -1,40 +0,0 @@
----
-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

@@ -1,68 +0,0 @@
-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

@@ -1,10 +0,0 @@
-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

@@ -1,256 +0,0 @@
-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

@@ -1,43 +0,0 @@
-<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

@@ -1,67 +0,0 @@
-: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/lib/README.md

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

package/lib/colorjs.io/LICENSE

@@ -1,21 +0,0 @@
-MIT License
-
-Copyright (c) 2021 Lea Verou, Chris Lilley
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.

package/lib/colorjs.io/README.json

@@ -1,3 +0,0 @@
-{
-	"layout": "home"
-}