color-elements 0.0.1

package/README.md

@@ -0,0 +1,33 @@
+# Color.js Web Components
+
+These are some highly experimental color-related web components.
+Use at your own risk, the API can change at any point.
+
+## Usage
+
+To include all components at once:
+
+```html
+<script src="https://colorjs.io/elements/index.js"></script>
+```
+
+To cherry-pick individual components, follow the instructions within the component’s page, but it generally looks like this:
+
+```html
+<script src="https://colorjs.io/elements/COMPONENT_NAME/COMPONENT_NAME.js"></script>
+```
+
+or if using a bundler:
+
+```js
+import "color-elements";
+```
+
+Then just start using it!
+
+## Components
+
+- [`<css-color>`](./css-color/)
+- [`<color-swatch>`](./color-swatch/)
+- [`<color-gamut>`](./color-gamut/)
+- [`<color-slider>`](./color-slider/)

package/_build/copy-config.js

@@ -0,0 +1,90 @@
+import { exec } from 'child_process';
+import { writeFileSync, readFileSync } from "fs";
+import config from "./copy-config.json" with { type: "json" };
+
+const TEMP_REPO = "_build/.colorjs.io";
+
+// Cleanup past attempts
+exec(`rm -rf ${ TEMP_REPO }`);
+
+// Copy files from source repo
+let commands = [
+	`git clone ${ config.source } ${ TEMP_REPO }`,
+	...config.paths.map(path => {
+		let [current_path, new_path] = Array.isArray(path) ? path : [path, path];
+
+		return `rm -rf ./${new_path} && cp -r ${TEMP_REPO}/${ current_path } ./${ new_path }`;
+	}),
+];
+
+await new Promise(resolve => {
+	exec(commands.join(" && "), (err, stdout, stderr) => {
+		// Cleanup
+		exec(`rm -rf ${ TEMP_REPO }`);
+
+		if (err) {
+			console.error(err);
+			process.exit(1);
+		}
+		else {
+			console.log(stdout);
+			resolve();
+		}
+	});
+});
+
+// Make sure copied paths are in .gitignore
+let gitignore = readFileSync(".gitignore", "utf8").split("\n");
+let paths_added_to_gitignore = [];
+let index;
+
+for (let path of config.paths) {
+	let [current_path, new_path] = Array.isArray(path) ? path : [path, path];
+	let i = gitignore.indexOf(new_path);
+	if (i > -1) {
+		index = i;
+	}
+	else { // not found
+		gitignore.push(new_path);
+		paths_added_to_gitignore.push(new_path);
+	}
+}
+
+if (paths_added_to_gitignore.length > 0) {
+	writeFileSync(".gitignore", gitignore.join("\n"));
+	console.log("Added paths to .gitignore: " + paths_added_to_gitignore.join(", "));
+}
+
+let source_package_json = JSON.parse(readFileSync(`${ TEMP_REPO }/package.json`, "utf8"));
+let package_json = JSON.parse(readFileSync(`package.json`, "utf8"));
+
+// Copy npm scripts
+let scripts_copied = [];
+
+for (let script of config.scripts) {
+	if (source_package_json.scripts[script] && package_json.scripts[script] !== source_package_json.scripts[script]) {
+		package_json.scripts[script] = source_package_json.scripts[script];
+		scripts_copied.push(script);
+	}
+}
+
+if (scripts_copied.length > 0) {
+	console.warn("Copying npm scripts: " + scripts_copied.join(", "));
+	writeFileSync("package.json", JSON.stringify(package_json, null, 2));
+}
+
+// Install missing packages
+if (source_package_json.devDependencies) {
+	let missing_packages = [];
+
+	for (let name of config.packages) {
+		if (source_package_json.devDependencies[name] && !package_json.devDependencies?.[name]) {
+			missing_packages.push(name);
+		}
+	}
+
+	if (missing_packages.length) {
+		console.warn(`Installing packages: ${ missing_packages.join(", ") }`);
+		exec(`npm install -D ${ missing_packages.join(" ") }`);
+	}
+}

package/_build/copy-config.json

@@ -0,0 +1,18 @@
+{
+	"source": "https://github.com/color-js/color.js",
+	"paths": [
+		"_includes/partials",
+		"_includes/page.njk",
+		"_includes/plain.njk",
+		"_data/eleventyComputed.js",
+		["_build/eleventy.js", "_build/eleventy-original.js"],
+		"_build/filters.js"
+	],
+	"scripts": [
+		"build:html",
+		"watch:html"
+	],
+	"packages": [
+		"@11ty/eleventy"
+	]
+}

package/_build/eleventy.js

@@ -0,0 +1,16 @@
+import configOriginal from "./eleventy-original.js";
+
+let data = {
+	"permalink": "{{ page.filePathStem | replace('README', '') | replace('index', '') }}/index.html",
+	"body_classes": "cn-ignore"
+};
+
+export default config => {
+	let ret = configOriginal(config);
+
+	for (let prop in data) {
+		config.addGlobalData(prop, data[prop]);
+	}
+
+	return ret;
+};

package/_data/eleventyComputed.11tydata.js

@@ -0,0 +1,29 @@
+export default {
+	// Extract default title from content
+	foo (data) {
+		// if (data.title) {
+		// 	return data.title;
+		// }
+
+		// let ext = data.page.inputPath.split(".").pop();
+
+		// // Title must appear in first 1000 chars
+		// let content = data.page.rawInput.slice(0, 1000);
+		// let ret;
+
+		// if (ext === "md") {
+		// 	// First heading
+		// 	ret = content.match(/^#+\s+(.*)/m)?.[1];
+		// }
+		// else if (ext === "njk") {
+		// 	// First level 1 heading
+		// 	ret = content.match(/<h1>(.*)<\/h1>/)?.[1];
+		// }
+
+		// if (ret) {
+		// 	ret = ret.replace(/&lt;/g, "<").replace(/&gt;/g, ">");
+		// }
+
+		// return ret;
+	},
+};

package/_headers

@@ -0,0 +1,2 @@
+/*
+	Access-Control-Allow-Origin: *

package/_redirects

@@ -0,0 +1,2 @@
+node_modules/* lib/:splat 200
+assets/* https://colorjs.io/assets/:splat 200

package/assets/css/style.css

@@ -0,0 +1 @@
+@import url("https://colorjs.io/assets/css/style.css");

package/assets/js/index.js

@@ -0,0 +1,15 @@
+import "https://colorjs.io/assets/js/index.js";
+
+import "https://colorjs.io/assets/js//prism.js";
+// import "https://blissfuljs.com/bliss.shy.js";
+// import "https://live.prismjs.com/src/prism-live.mjs?load=javascript";
+// import "https://colorjs.io/notebook/color-notebook.js";
+import "https://colorjs.io/assets/js/colors.js";
+import { styleCallouts } from "https://colorjs.io/assets/js/enhance.js";
+
+styleCallouts();
+
+let root = document.documentElement;
+document.addEventListener("scroll", evt => {
+	root.style.setProperty("--scrolltop", root.scrollTop);
+}, {passive: true});

package/color-gamut/README.md

@@ -0,0 +1,75 @@
+<script src="color-gamut.js" type="module"></script>
+# &lt;color-gamut>
+
+Gamut indicator. Used internally by `<css-color>`
+
+## Usage
+
+Static (only read once):
+```html
+<color-gamut>red</color-gamut>
+```
+
+Produces <color-gamut>red</color-gamut>
+
+Dynamic:
+```js
+colorGamutElement.color = colorValue;
+```
+
+## Demo
+<style>
+	#params {
+		background: linear-gradient(to right, var(--start-color), var(--end-color)) no-repeat top / 100% 1em;
+		padding-top: 1.5em;
+	}
+
+	#colors_container_h {
+		display: flex;
+		height: 1em;
+		margin-bottom: 1em;
+
+		color-gamut {
+			flex: 1;
+			border-radius: 0;
+
+			&::part(label) {
+				display: none;
+			}
+		}
+	}
+</style>
+<form id=params>
+<code>oklch(<input type=number id=l value=50>% <input type=number id=min_c value=30>&ndash;<input type=number id=max_c value=40>% <input type=number id=h value=50>)</code>
+<p><label>Chroma increments: <input type=number id=c_step value="0.2" min="0">%</label>
+</form>
+
+<script type=module>
+params.addEventListener("input", e => {
+	let c_range = {min: Number(min_c.value), max: Number(max_c.value)};
+	let step = Number(c_step.value);
+	let colors = [];
+	let start = `oklch(${l.value}% ${c_range.min.toLocaleString("en")}% ${h.value})`;
+	let end = `oklch(${l.value}% ${c_range.max.toLocaleString("en")}% ${h.value})`;
+
+	params.style.setProperty("--start-color", start);
+	params.style.setProperty("--end-color", end);
+
+	for (let c = c_range.min; c<= c_range.max; c+=step) {
+		colors.push(`oklch(${l.value}% ${c.toLocaleString("en")}% ${h.value})`);
+	}
+
+	let html = colors.map(color => `
+		<color-gamut title="${color}">${color}</color-gamut>`).join("\n");
+	colors_container_h.innerHTML = html;
+	colors_container.innerHTML = html;
+});
+params.dispatchEvent(new Event("input"));
+</script>
+
+No label:
+
+<div id=colors_container_h></div>
+
+Default display:
+<div id=colors_container></div>

package/color-gamut/color-gamut.js

@@ -0,0 +1,172 @@
+import Color from "../common/color.js";
+
+let styleURL = new URL("./style.css", import.meta.url);
+
+export default class ColorGamut extends HTMLElement {
+	#label;
+
+	constructor () {
+		super();
+		this.attachShadow({mode: "open"});
+		this.shadowRoot.innerHTML = `
+			<style>@import url("${ styleURL }")</style>
+			<span id="label" part="label"></span>
+		`;
+
+		this.gamuts = this.gamuts ?? this.getAttribute("gamuts") ?? this.constructor.defaultGamuts;
+	}
+
+	connectedCallback () {
+		this.#initialize();
+		this.#render();
+	}
+
+	#initialized;
+	#initialize () {
+		if (this.#initialized) {
+			return;
+		}
+
+		this.#initialized = true;
+
+		let textContent = this.textContent;
+
+		if (textContent) {
+			this.color ??= this.textContent;
+		}
+	}
+
+	#render () {
+		if (!this.isConnected) {
+			return;
+		}
+
+		if (!this.#label) {
+			this.#label = this.shadowRoot.querySelector("#label");
+		}
+
+		this.#updateGamut();
+	}
+
+	#gamut;
+	get gamut () {
+		return this.#gamut?.id;
+	}
+
+	get gamutLabel () {
+		return this.#gamut?.label ?? "";
+	}
+
+	#gamuts;
+	get gamuts () {
+		return this.#gamuts;
+	}
+
+	set gamuts (gamuts) {
+
+		this.#gamuts = this.constructor.parseGamuts(gamuts);
+	}
+
+	#updateGamut () {
+		if (!this.#color) {
+			this.#setGamut();
+			return;
+		}
+
+		let gamut = this.gamuts.find(gamut => gamut.id === "none" || this.#color.inGamut(gamut.id));
+		this.#setGamut(gamut);
+	}
+
+	#setGamut (gamut) {
+		let oldGamut = this.#gamut;
+
+		if (gamut === oldGamut) {
+			return;
+		}
+
+		this.#gamut = gamut;
+		this.#label.textContent = this.#gamut?.label ?? "";
+
+		if (!gamut) {
+			this.removeAttribute("gamut");
+			this.removeAttribute("level");
+			this.style.removeProperty("--gamut-level");
+
+			return;
+		}
+
+		this.setAttribute("gamut", gamut.id);
+		this.setAttribute("level", gamut.level);
+		this.style.setProperty("--gamut-level", gamut.level);
+
+		this.dispatchEvent(new CustomEvent("gamutchange", {
+			detail: {oldGamut, gamut},
+			bubbles: true,
+		}));
+	}
+
+	#color;
+	get color () {
+		return this.#color;
+	}
+
+	set color (color) {
+		this.#color = Color.get(color);
+		this.#render();
+	}
+
+	static observedAttributes = ["gamuts"];
+
+	attributeChangedCallback (name, oldValue, newValue) {
+		if (!name && this.hasAttribute("gamuts") || name === "gamuts") {
+			newValue ??= this.getAttribute("gamuts");
+
+			if (oldValue !== newValue) {
+				this.gamuts = this.constructor.parseGamuts(newValue ?? this.constructor.defaultGamuts);
+				this.#render();
+			}
+		}
+	}
+
+	static defaultGamuts = ["srgb", "p3", "rec2020", "prophoto"];
+
+	static parseGamuts (gamuts) {
+		if (!gamuts) {
+			return [];
+		}
+
+		if (typeof gamuts === "string") {
+			gamuts = gamuts.trim().split(/\s*,\s*/);
+		}
+		else if (!Array.isArray(gamuts) && typeof gamuts === "object") {
+			// Object
+			return Object.entries(gamuts).map(([id, label]) => {id, label});
+		}
+
+		let ret = gamuts.map((gamut, level) => {
+			if (gamut?.id && "label" in gamut) {
+				// Already in the correct format
+				return gamut;
+			}
+
+			gamut = gamut.trim().split(/\s*:\s*/);
+			let id = gamut[0];
+			let label = gamut[1] ?? Color.spaces[gamut]?.name ?? id;
+			return {id, label, level};
+		});
+
+		if (!ret.find(gamut => gamut.id === "none")) {
+			ret.push({
+				id: "none",
+				get label () {
+					return ret[this.level - 1].label + "+";
+				},
+				level: ret.length,
+			});
+		}
+
+		return ret;
+	}
+}
+
+customElements.define("color-gamut", ColorGamut);

package/color-gamut/style.css

@@ -0,0 +1,32 @@
+:host {
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	border-radius: .2em;
+	color: white;
+	background: var(--gamut-color, var(--color-neutral-60, hsl(220 10% 60%)));
+	font-weight: bold;
+	padding-inline: .4em;
+	line-height: 1.4;
+}
+
+:host([level="0"]) {
+	--gamut-color: var(--color-green, yellowgreen);
+}
+
+:host([level="1"]) {
+	color: black;
+	--gamut-color: var(--color-yellow, gold);
+}
+
+:host([level="2"]) {
+	--gamut-color: var(--color-orange, orange);
+}
+
+:host([level="3"]) {
+	--gamut-color: var(--color-red, red);
+}
+
+:host([gamut="none"]) {
+	--gamut-color: var(--color-red-dark, #b00);
+}

package/color-slider/README.md

@@ -0,0 +1,84 @@
+# `<color-slider>`
+<script src="color-slider.js" type="module"></script>
+
+Creates a slider with a gradient background, primarily intended for color picking.
+
+## Installation
+
+The quick and dirty way is straight from the CDN (kindly provided by [Netlify](https://www.netlify.com/)):
+
+```html
+<script src="https://colorjs.io/elements/color-slider/color-slider.js" type="module"></script>
+```
+
+You can also install it via npm.
+There is no separate package currently, you just install the whole `colorjs.io` package:
+
+```bash
+npm install colorjs.io
+```
+
+Then, you use the `colorjs.io/elements` import:
+
+```js
+import {ColorSlider} from "colorjs.io/elements";
+```
+
+## Usage
+
+There are many ways to use this component, depending on what you need.
+E.g. if all you need is styling sliders with arbitrary gradients you don’t even need a component,
+you can just use the CSS file and a few classes and CSS variables.
+
+The actual component does a lot more:
+- It takes care of applying the right `min` and `max` values to the slider
+- It automatically generates the start and end colors,
+- It provides a `color` property with the actual color value.
+- It can provide an editable tooltip as a tooltip that both shows and edits the current value
+
+<script src="./color-slider.js" type="module"></script>
+<style>@import url("style.css");</style>
+
+### Zero hassle, little control
+
+You get the most value out of this component when using it to control a single component:
+
+```html
+<color-slider space="oklch" component="h" colorvalue="oklch(50 50% 180)"></color-slider>
+```
+
+This will automatically use the whole reference range of that component in the specified color space,
+and use the current value of the component as the starting value (unless `value` is also specified).
+If you don’t want to show the whole range you can also specify `min` and `max` attributes.
+
+```html
+<color-slider space="oklch" component="l" colorvalue="red" min=".3" max=".95"></color-slider>
+```
+
+### Minimal hassle, more control
+
+If your use case does not involve interpolating across a single component, or you already have the colors you want to plot from and to, you can also do that:
+
+```html
+<color-slider space="oklch" colormin="gold" colormax="oklch(65% 0.15 210)"></color-slider>
+```
+
+### Styling-only usage
+
+If you just want the styling and are fine dealing with the lower level details on your own, you *can* just use the CSS file:
+
+```css
+@import url("https://colorjs.io/elements/color-slider/style.css");
+```
+
+Then use a `color-slider` class on your slider element, and the following CSS variables:
+
+- `--start-color`: the start color of the gradient
+- `--end-color`: the end color of the gradient
+- `--color-space`: the color space of the gradient (default: `oklch`)
+- `--intermediate-colors`: _(optional)_ any intermediate colors.
+
+OR:
+- `--gradient` if you want to override the whole gradient.
+
+

package/color-slider/color-slider.js

@@ -0,0 +1,79 @@
+/*
+<label v-for="(meta, i) in coord_meta" class="color-slider-label">
+	{{ meta.name }} ({{ meta.min }}-{{ meta.max }})
+	<input class="color-slider" type="range" v-model.number="coords[i]" :style="`--stops: ${ slider_steps[i] }`" :min="meta.min" :max="meta.max" :step="meta.step" />
+	<input type="number" v-model.number="coords[i]" class="autosize" :style="`--percentage: ${coords[i] / (meta.max - meta.min) }`" :min="meta.min" :max="meta.max" :step="meta.step" />
+</label>
+
+<label class="color-slider-label">Alpha (0-100)
+	<input class="color-slider" type="range" v-model.number="alpha"
+	:style="`--stops: ${ slider_steps[coord_meta.length] }`" />
+	<input type="number" class="autosize" v-model.number="alpha" :style="`--percentage: ${alpha / 100}`" max="100" />
+</label>*/
+import defineAttributes from "../common/attributes.js";
+import Color from "../common/color.js";
+
+export default class ColorSlider extends HTMLElement {
+	_props = {};
+
+	constructor () {
+		super();
+		this.attachShadow({mode: "open"});
+		this.shadowRoot.innerHTML = `
+			<style>@import url("${ styleURL }")</style>
+			<label v-for="(meta, i) in coord_meta" class="color-slider-label">
+				{{ meta.name }} ({{ meta.min }}-{{ meta.max }})
+				<input class="color-slider" type="range" v-model.number="coords[i]" :style="`--stops: ${ slider_steps[i] }`" :min="meta.min" :max="meta.max" :step="meta.step" />
+				<input type="number" :style="`--percentage: ${coords[i] / (meta.max - meta.min) }`" :min="meta.min" :max="meta.max" :step="meta.step" />
+			</label>
+		`;
+	}
+
+
+
+	attributeChangedCallback (name, value, oldValue) {
+		if (name in this.constructor.attributes) {
+			this[name] = value;
+		}
+	}
+
+	static get observedAttributes() {
+		return Object.keys(this.attributes);
+	}
+
+	static attributes = {
+		space: {
+			type: String,
+			default: "oklch",
+		},
+		component: {
+			type: String,
+			default: "h",
+		},
+		value: {
+			type: Number,
+			default: "oklch(0.5 0 180)",
+		},
+		min: {
+			type: Number,
+		},
+		max: {
+			type: Number,
+		},
+		step: {
+			type: Number,
+		},
+		colorvalue: {
+			type: Color,
+		},
+		colormin: {
+			type: Color,
+		},
+		colormax: {
+			type: Color,
+		},
+	}
+}
+
+defineAttributes(ColorSlider);
+customElements.define("color-slider", ColorSlider);