Documentation fixes

assets/js/docs.js

@@ -92,15 +92,17 @@ if (location.pathname.indexOf("/spaces") > -1) {
 				continue;
 			}
 
-			space.coord = Object.entries(spaceMeta.coords).map(entry => {
+			space.coord = Object.entries(spaceMeta.coords).map(([id, meta]) => {
+				let range = meta.range || meta.refRange;
 				return {
-					name: entry[0],
-					min: entry[1][0],
-					max: entry[1][1]
+					id,
+					name: meta.name,
+					min: range?.[0],
+					max: range?.[1]
 				};
 			});
 
-			space.whitePoint = spaceMeta.white === Color.WHITES.D50? "D50" : "D65";
+			space.whitePoint = Object.entries(Color.WHITES).find(([name, white]) => white === spaceMeta.white)?.[0];
 			space.cssId = spaceMeta.cssId || spaceMeta.id;
 		}
 	});

docs/output.md

@@ -71,7 +71,7 @@ if (!CSS.supports("color", cssColor))
 	cssColor = green.to("srgb").toString();
 cssColor;
 ```
-As of June 2020, `cssColor` will be sRGB in Chrome and Firefox, and P3 in Safari, providing access to 50% more colors than sRGB!
+As of June 2022, `cssColor` will be sRGB in Chrome and Firefox, and P3 in Safari, providing access to 50% more colors than sRGB!
 
 So, this works, but the process is a little tedious. Thankfully, Color.js has got your back!
 Simply use the `fallback` parameter.

docs/spaces.njk

@@ -25,18 +25,20 @@ body_classes: cn-ignore
 				<table>
 					<thead>
 						<tr>
+							<th>Id</th>
 							<th>Name</th>
 							<th>Ref. range</th>
 						</tr>
 					</thead>
 					<tbody>
 						<tr mv-multiple property="coord">
+							<th property="id"></th>
 							<th property="name"></th>
 							<td>
 								<span property="min"></span>
 								&ndash;
 								<span property="max"></span>
-								<meta property="codeExample" content="color.[space.id].[name] = [random(min, max)];">
+								<meta property="codeExample" content="color.[space.id].[id] = [random(min, max)];">
 								<meta property="randomCoord" content="[random(min, max)]">
 							</td>
 

docs/the-color-object.md

@@ -50,6 +50,11 @@ let red2 = new Color({spaceId: "lab", coords: [50, 50, 50]});
 let redClone = new Color(red1);
 ```
 
+Everything in Color.js that accepts a color space id, also accepts a color space object.
+You can find these objects on `Color.spaces` (object, includes aliases) or `Color.Space.all` (array, no aliases).
+They include a lot of metadata about the color space which can be useful to handle color generically
+(e.g. like [this demo](../apps/convert/))
+
 ## Color object properties
 
 The three basic properties of a color object are its color space, its coordinates, and its alpha:
@@ -88,29 +93,14 @@ Named coordinates are also available:
 
 ```js
 let color = new Color("deeppink");
-color.srgb.green;
-color.srgb.green = .5;
-color;
-```
-
-Note that unless we explicitly change a color's color space, it remains in the same color space it was when it was created.
-Manipulating coordinates of other color spaces do not change a color's space, it is just internally converted to another space and then back to its own.
-To convert a color to a different color space, you need to change its `space` or `spaceId` properties.
-Both accept either a color space object, or an id:
-
-
-```js
-let color = new Color("srgb", [0, 1, 0]);
-color.space = "p3";
-color;
-color.space = Color.spaces.prophoto;
+color.srgb.g;
+color.srgb.g = .5;
 color;
 ```
 
-Often, we want to keep our color intact,
-but also convert it to another color space,
-creating a new Color object.
-This is exactly what `color.to()` is for:
+Note that a color's color space is immutable once the `Color` object is created.
+Manipulating coordinates of other color spaces does not change a color's space, the coordinates are converted to the other color space and then back to the color's color space after the manipulation.
+To convert a color to a different color space, you need to call `color.to()`, which will return a new `Color` object.
 
 ```js
 let color = new Color("srgb", [0, 1, 0]);

index.njk

@@ -93,6 +93,12 @@ includes: '<link rel="stylesheet" href="./assets/css/home.css">'
 	<section>
 		<h2>Converting between color spaces & stringifying</h2>
 
+		<p>Convert to any color space:</p>
+		<pre><code>
+			let color = new Color("slategray");
+			color.to("lch") // Convert to LCH
+		</code></pre>
+
 		<p>Output in any color space</p>
 		<pre><code>
 			let color = new Color("slategray");
@@ -103,17 +109,8 @@ includes: '<link rel="stylesheet" href="./assets/css/home.css">'
 		<p>Clip to gamut or don't</p>
 		<pre><code>
 			let color = new Color("p3", [0, 1, 0]);
-			color.to("srgb").toString({inGamut: false})
-		</code></pre>
-
-		<p>Change color space:</p>
-		<pre><code>
-			let color = new Color("slategray");
-			color.space = "srgb"; // Convert to sRGB
-			color.spaceId = "srgb"; // Same
-			color.space = "sRGB"; // Capitalization doesn't matter
-			color.space = Color.spaces.srgb; // Same
-			color.spaceId = Color.spaces.srgb; // Same
+			color.to("srgb") + ""; // Default toString()
+			color.to("srgb").toString({inGamut: false});
 		</code></pre>
 	</section>
 

test.html

@@ -11,15 +11,18 @@
 <body>
 <script type="module">
 	import Color from "./src/main.js";
-	import ColorSpace from "./src/space.js";
-	import * as util from "./src/util.js";
+	import Color2 from "https://colorjs.io/src/main.js";
+	// import ColorSpace from "./src/space.js";
+	// import * as util from "./src/util.js";
 
-	window.ColorSpace = ColorSpace;
+	// window.ColorSpace = ColorSpace;
 	window.Color = Color;
-	window.util = util;
+	// window.util = util;
 
-	let color = new Color("rgb(0 127.5 300 / .5)");
-	console.log(color.coords, color + "");
+	let color = new Color("deeppink");
+	console.log(color.coords);
+	color.srgb.green = .5;
+	console.log(color.coords);
 </script>
 </body>
 </html>