Merge branch 'color-js:main' into main

Author: sidewayss

Diff for: README.md

@@ -29,12 +29,12 @@ all with sensible defaults
 </header>
 
 <section>
-	
+
 ## Impact
 
 - Has been used to create demos for several W3C specifications
 - Has been used by browsers to test their CSS Color 4/5 implementations
-- Over [3 million total npm downloads](https://limonte.dev/total-npm-downloads/?package=colorjs.io)!
+- Over [10 million total npm downloads](https://limonte.dev/total-npm-downloads/?package=colorjs.io)!
 - Used by several [high impact projects](https://www.npmjs.com/browse/depended/colorjs.io), including [Sass](https://sass-lang.com/), [Open Props](https://open-props.style/), [axe](https://www.deque.com/axe/) accessibility testing engine, and [OddContrast](https://www.oddcontrast.com/) and [CSS HD Gradients](https://gradient.style/) color tools
 - Parts of Color.js’s API are used as a testing ground for the design of a [native `Color` object for the Web platform](https://github.com/wicg/color-api).
 
@@ -72,8 +72,8 @@ import deltaE200 from "https://colorjs.io/src/deltaE/deltaE2000.js";
 
 Warning: To use `import` statements in a browser, your `<script>` needs `type="module"`
 
-Are you old school and prefer to simply have a global `Color` variable? 
-We’ve got you covered! 
+Are you old school and prefer to simply have a global `Color` variable?
+We’ve got you covered!
 Just include the following script in your HTML:
 
 ```html
@@ -255,3 +255,26 @@ Color.mix("color(display-p3 0 1 0)", "red", .5);
 <p class="read-more"><a href="https://colorjs.io/docs/interpolation.html">Read more about interpolation</a></p>
 
 </section>
+
+<section>
+
+## Other Color.js Initiatives
+
+These are all very experimental and not as polished as Color.js itself, but we are excited about their potential.
+
+### [Color Elements](https://elements.colorjs.io)
+
+This is a set of (currently 10) web components for building color-related apps (the first library of its kind to our knowledge).
+It includes things like color pickers, color charts, interactive color scales, and more.
+
+### [Color Apps](https://apps.colorjs.io)
+
+A set of color-related apps, such as color pickers, converters, and more.
+
+### [Color Palettes](https://palettes.colorjs.io)
+
+A research project which aims to analyze designer-created color palettes in a variety of color spaces,
+both to document patterns (e.g. what hue names are most popular?)
+and to understand what makes aesthetically pleasing color scales.
+
+</section>

Diff for: _build/eleventy.js

@@ -1,4 +1,5 @@
 import { createRequire } from "module";
+import { EleventyRenderPlugin } from "@11ty/eleventy";
 const require = createRequire(import.meta.url);
 import * as filters from "./filters.js";
 
@@ -24,10 +25,13 @@ export default config => {
 		config.addFilter(f, filters[f]);
 	}
 
+	config.addPlugin(EleventyRenderPlugin);
+
 	return {
 		markdownTemplateEngine: "njk",
 		templateFormats: ["md", "njk"],
 		dir: {
+			data: "data",
 			output: ".",
 		},
 	};

Diff for: _build/filters.js

@@ -12,5 +12,13 @@ export function unslugify (slug) {
 }
 
 export function number (value, options) {
-	return value.toLocaleString("en", options);
+	return value?.toLocaleString("en", options);
+}
+
+export function randomNumber (max, min, step) {
+	step ??= (max - min) / 100;
+	// Round to nearest power of 10
+	step = Math.pow(10, Math.floor(Math.log10(step)));
+
+	return Math.floor(Math.random() * (max - min + step) / step) * step + min;
 }

Diff for: _build/rollup.config.js

@@ -27,6 +27,11 @@ const fnBundles = [
 		"sourcemap": true,
 		"exports": "named",
 	},
+	{
+		"file": "dist/color-fn.js",
+		"format": "esm",
+		"sourcemap": true,
+	},
 ];
 
 // Add minified versions of every bundle

Diff for: assets/css/docs.css

@@ -11,15 +11,19 @@ main {
 	}
 
 	@media (min-width: 1480px) {
-		position: fixed;
-		top: 11rem;
-		right: calc(var(--page-width) + var(--page-margin) + 1em);
-		width: fit-content;
-		max-width: calc(var(--page-margin) - 1em);
-		margin-left: 1em;
-
-		@supports (top: max(1em, 1px)) {
-			top: max(0em, 11rem - var(--scrolltop) * 1px);
+		--_gap: 1rem;
+		box-sizing: border-box;
+		/* Stretch out #toc in the margin, so it can be a container for the sticky list. */
+		position: absolute;
+		right: 100%;
+		height: 100%;
+		padding-inline: var(--_gap);
+		max-width: calc(var(--page-margin) - 2 * var(--_gap));
+		width: max-content;
+
+		& > ul {
+			position: sticky;
+			top: var(--_gap);
 		}
 	}
 
@@ -50,70 +54,92 @@ main {
 	}
 }
 
-[mv-app="colorSpaces"] {
-	& [mv-list-item][property="space"] {
-		display: grid;
-		grid-template-columns: 1fr auto;
-		grid-gap: 0 1em;
-		margin: 1em 0;
+#space-tree {
+	width: 100%;
 
-		& .alias-of {
-			font-style: italic;
-		}
+	svg {
+		width: 100%;
+		overflow: visible;
+	}
 
-		& > * {
-			grid-column: 1;
-		}
 
-		& > header {
-			grid-column: 1 / span 2;
-			display: flex;
-			align-items: center;
 
-			& h2 {
-				margin: 0 auto 0 0;
+	.node text {
+		font-weight: 500;
+		font-size: 44px !important;
+	}
 
-				& code {
-					font-family: var(--font-monospace);
-					font-weight: bold;
-					font-size: 70%;
+	.root text {
+		font-weight: bold;
+		font-size: 66px !important;
+		translate: 0 -10px;
+	}
+}
 
-					&::before {
-						content: "#";
-					}
-				}
-			}
+.color-space {
+	display: grid;
+	grid-template-columns: 1fr auto;
+	grid-gap: 0 1em;
+	margin: 1em 0;
+
+	.alias-of {
+		font-style: italic;
+	}
+
+	> * {
+		grid-column: 1;
+	}
+
+	> header {
+		grid-column: 1 / span 2;
+		display: flex;
+		align-items: center;
+
+		h2 {
+			margin: 0 auto 0 0;
+
+			code {
+				font-family: var(--font-monospace);
+				font-weight: bold;
+				font-size: 70%;
 
-			& .file {
-				font-style: italic;
-				opacity: .6;
-				filter: saturate(.1);
+				&::before {
+					content: "#";
+				}
 			}
 		}
 
-		& [property="description"] {
-			margin: .5em 0;
+		& .file {
+			font-style: italic;
+			opacity: .6;
+			filter: saturate(.1);
 		}
+	}
 
-		& dl {
-			min-width: 10em;
-			margin: 0;
-			grid-row: 2 / span 3;
-			grid-column: 2;
-			background: hsl(var(--gray) 95%);
-			border-radius: .2em;
-			padding: 1em;
-
-			& dt {
-				margin-top: .5em;
-				font-size: 80%;
-			}
+	.description {
+		margin: .5em 0;
+	}
 
-			& dd {
-				grid-column: 1;
-			}
+	dl {
+		align-self: start;
+		min-width: 10em;
+		margin: 0;
+		grid-row: 2 / span 3;
+		grid-column: 2;
+		background: hsl(var(--gray) 95%);
+		border-radius: .2em;
+		padding: 1em;
+
+		> div:not(:first-child) {
+			margin-block-start: 1em;
 		}
-	}
 
+		dt {
+			font-size: 80%;
+		}
 
+		dd {
+			grid-column: 1;
+		}
+	}
 }

Diff for: assets/js/docs.js

@@ -82,71 +82,3 @@ function makePageToc (pageToc) {
 		});
 	});
 }
-
-if (location.pathname.indexOf("/spaces") > -1) {
-	await Mavo.all.colorSpaceData.dataLoaded;
-
-	let docsSpaces = Object.fromEntries(Mavo.all.colorSpaceData.root.data.space.map(space => [space.id, space]));
-
-	let spaces = Object.entries(Color.Space.registry).map(([id, space]) => {
-		let docsSpace = docsSpaces[id];
-
-		return Object.assign(docsSpace || {
-			description: "",
-			url: "",
-		}, {
-			id,
-			isAlias: space.id != id,
-			aliasOf: space.id,
-			aliasOfName: Color.Space.registry[space.id].name,
-			base: space.base?.id,
-			baseName: space.base?.name,
-			name: space.name,
-			coord: Object.entries(space.coords).map(([id, meta]) => {
-				let range = meta.range || meta.refRange;
-				return {
-					id,
-					name: meta.name,
-					min: range?.[0],
-					max: range?.[1],
-				};
-			}),
-			whitePoint: Object.entries(Color.WHITES).find(([name, white]) => white === space.white)?.[0],
-			cssId: space.cssId || space.id,
-		});
-	});
-
-	Mavo.all.colorSpaces.load({
-		data: {space: spaces},
-	});
-
-	Mavo.hooks.add("getdata-end", function (env) {
-		if (this.id !== "colorSpaces") {
-			return;
-		}
-
-		// Do not try to store things we are getting on runtime from ColorSpace.registry
-		for (let space of env.data.space) {
-			delete space.coord;
-			delete space.whitePoint;
-		}
-	});
-
-	Mavo.all.colorSpaces.dataLoaded.then(() => {
-		return Mavo.defer(500);
-	}).then(() => {
-		$$("pre:not([class])").forEach(pre => {
-			// Add class now to avoid race conditions where Prism highlights before expressions resolve
-			pre.classList.add("language-javascript");
-			Prism.highlightElement(pre);
-
-			Notebook.create(pre);
-		});
-	});
-
-	// if (Mavo.all.colorSpaces && Mavo.all.colorSpaces.root.children.space.children.length > 1) {
-	// 	// Data has already rendered, re-render
-	// 	Mavo.all.colorSpaces.render(Mavo.all.colorSpaces.getData());
-
-	// }
-}

Diff for: assets/js/index.js

@@ -9,10 +9,5 @@ if (location.pathname.indexOf("/docs/") > -1 && window.toc) {
 	import("./docs.js");
 }
 
-let root = document.documentElement;
-
 styleCallouts();
 
-document.addEventListener("scroll", evt => {
-	root.style.setProperty("--scrolltop", root.scrollTop);
-}, {passive: true});