color-elements 0.0.1 → 0.0.3

package/src/color-picker/README.md

@@ -0,0 +1,150 @@
+# `<color-picker>`
+
+## Usage
+
+### Basic usage
+
+```html
+<color-picker space="oklch" color="oklch(60% 30% 180)"></color-picker>
+```
+
+Color spaces not supported by the browser also work:
+
+```html
+<color-picker space="okhsl" color="color(--okhsl 180 50% 50%)"></color-picker>
+```
+
+If no color space or color is provided, the default ones will be used: `oklch` for the space and `oklch(50% 50% 180)` for the color.
+
+```html
+<color-picker></color-picker>
+```
+
+### The `alpha` attribute
+
+Colors with the alpha channel are also supported. Add the `alpha` boolean attribute to show the alpha channel:
+
+```html
+<color-picker space="oklch" color="oklch(60% 30% 180 / 0.6)" alpha></color-picker>
+```
+
+### Slots
+
+```html
+<color-picker space="oklch" color="oklch(50% 50% 180)">
+	Element content goes into the swatch
+</color-picker>
+```
+
+You can use your component instead of the default color swatch:
+
+```html
+<color-picker space="oklch" color="oklch(50% 50% 180)"
+              oncolorchange="this.firstElementChild.textContent = this.color">
+	<color-inline slot="swatch" style="place-self: center; min-inline-size: fit-content"></color-inline>
+</color-picker>
+```
+
+or your own form element instead of the default space picker:
+
+```html
+<color-picker space="oklab" color="oklab(60% -0.12 0)">
+	<select slot="color-space" size="4">
+		<optgroup label="Rectangular Spaces">
+			<option value="lab">Lab</option>
+			<option value="oklab" selected>Oklab</option>
+			<option value="prophoto">ProPhoto</option>
+		</optgroup>
+	</select>
+</color-picker>
+```
+
+### Events
+
+As with other components, you can listen to the `colorchange` event:
+
+```html
+<color-picker space="oklch" color="oklch(50% 50% 180)"
+              oncolorchange="this.firstElementChild.textContent = this.color.oklch.join(' ')">
+	<div class="coords"></div>
+</color-picker>
+```
+
+### Dynamic
+
+All attributes are reactive:
+
+```html
+<color-picker space="oklch" color="oklch(60% 30% 180)" id="dynamic_picker">
+	<fieldset slot="color-space">
+		<legend>Polar Spaces</legend>
+
+		<label>
+			<input type="radio" name="space" value="oklch" checked /> OKLCh
+		</label>
+		<label>
+			<input type="radio" name="space" value="hwb" /> HWB
+		</label>
+		<label>
+			<input type="radio" name="space" value="hsl" /> HSL
+		</label>
+	</fieldset>
+</color-picker>
+
+<script>
+	let radios = dynamic_picker.querySelectorAll("input[name=space]");
+	radios.forEach(radio => radio.addEventListener("change", evt => dynamic_picker.spaceId = evt.target.value));
+</script>
+
+<style>
+	label + label {
+		margin-inline-start: .3em;
+	}
+</style>
+```
+
+```html
+<label>
+	<input type="checkbox" onchange="this.parentElement.nextElementSibling.alpha = this.checked" /> Alpha channel
+</label>
+<color-picker></color-picker>
+```
+
+## Reference
+
+### Slots
+
+| Name | Description |
+|------|-------------|
+| (default) | The color picker's main content. Goes into the swatch. |
+| `color-space` | An element to display (and if writable, also set) the current color space. If not provided, a [`<space-picker>`](../space-picker/) is used. |
+| `swatch` | An element used to provide a visual preview of the current color. |
+
+### Attributes & Properties
+
+| Attribute | Property | Property type | Default value | Description |
+|-----------|----------|---------------|---------------|-------------|
+| `space` | `spaceId` | `string` | `oklch` | The color space to use for interpolation. |
+| – | `space` | `ColorSpace` | `OKLCh` | Color space object corresponding to the `space` attribute. |
+| `color` | `color` | `Color` &#124; `string` | `oklch(50% 50% 180)` | The current color value. |
+| `alpha` | `alpha` | `boolean` &#124; `undefined` | `undefined` | Whether to show the alpha channel slider or not. |
+
+### Events
+
+| Name | Description |
+|------|-------------|
+| `input` | Fired when the color changes due to user action, such as adjusting the sliders, entering a color in the swatch's text field, or choosing a different color space. |
+| `change` | Fired when the color changes due to user action, such as adjusting the sliders, entering a color in the swatch's text field, or choosing a different color space. |
+| `colorchange` | Fired when the color changes for any reason, and once during initialization. |
+
+### CSS variables
+
+The styling of `<color-picker>` is fully customizable via CSS variables provided by the [`<color-slider>`](../color-slider/#css-variables) and [`<color-swatch>`](../color-swatch/#css-variables).
+
+### Parts
+
+| Name | Description |
+|------|-------------|
+| `color-space` | The default [`<space-picker>`](../space-picker/) element, used if the `color-space` slot has no slotted elements. |
+| `color-space-base` | The internal `<select>` element of the default [`<space-picker>`](../space-picker/) element. |
+| `swatch` | The default [`<color-swatch>`](../color-swatch/) element, used if the `swatch` slot has no slotted elements. |

package/src/color-picker/color-picker.css

@@ -0,0 +1,35 @@
+:host {
+	display: grid;
+	grid-template-columns: 3fr 1fr;
+	gap: 1em;
+}
+
+#space_picker {
+	margin-inline-start: -.7em; /* align with the channel names */
+	font-size: 150%;
+	transition: border-color .2s;
+
+	&:not(:hover) {
+		border-color: transparent;
+	}
+}
+
+[part="color-space"],
+slot[name="color-space"]::slotted(*) {
+	grid-column: 1 / -1;
+	justify-self: start;
+}
+
+#sliders {
+	display: flex;
+	flex-flow: column;
+	justify-content: space-between;
+	gap: .3em;
+	min-inline-size: 10em;
+}
+
+[part="swatch"],
+slot[name="swatch"]::slotted(*) {
+	width: auto;
+	margin: 0;
+}

package/src/color-picker/color-picker.js

@@ -0,0 +1,251 @@
+import ColorElement from "../common/color-element.js";
+import "../channel-slider/channel-slider.js";
+import "../color-swatch/color-swatch.js";
+import "../space-picker/space-picker.js";
+import * as dom from "../common/dom.js";
+
+const Self = class ColorPicker extends ColorElement {
+	static tagName = "color-picker";
+	static url = import.meta.url;
+	static dependencies = new Set(["channel-slider"]);
+	static shadowStyle = true;
+	static shadowTemplate = `
+		<slot name="color-space">
+			<space-picker id="space_picker" part="color-space" exportparts="base: color-space-base"></space-picker>
+		</slot>
+		<div id="sliders" part="sliders"></div>
+		<slot name="swatch">
+			<color-swatch size="large" id="swatch" part="swatch" exportparts="swatch: swatch-base, gamut, details, info, color-wrapper">
+				<slot slot="swatch-content"></slot>
+				<input value="oklch(70% 0.25 138)" id="color" />
+			</color-swatch>
+		</slot>`;
+
+	constructor () {
+		super();
+
+		this._el = dom.named(this);
+		this._slots = {
+			color_space: this.shadowRoot.querySelector("slot[name=color-space]"),
+		};
+	}
+
+	connectedCallback () {
+		super.connectedCallback?.();
+		this._el.sliders.addEventListener("input", this);
+		this._el.swatch.addEventListener("input", this);
+		this._slots.color_space.addEventListener("input", this);
+	}
+
+	disconnectedCallback () {
+		this._el.sliders.removeEventListener("input", this);
+		this._el.swatch.removeEventListener("input", this);
+		this._slots.color_space.removeEventListener("input", this);
+	}
+
+	handleEvent (event) {
+		let source = event.target;
+
+		if (this._el.sliders.contains(source)) {
+			// From sliders
+			let coords = [...this._el.sliders.children].map(el => el.value);
+			let alpha = this.color.alpha;
+			if (coords.length > 3) {
+				alpha = coords.pop() / 100;
+			}
+			this.color = new Self.Color(this.space, coords, alpha);
+		}
+		else if (this._el.swatch.contains(source)) {
+			// From swatch
+			if (!this._el.swatch.color) {
+				// Invalid color, or still typing
+				return;
+			}
+			this.color = this._el.swatch.color;
+		}
+		else if (this._el.space_picker.contains(source) || this._slots.color_space.assignedElements().includes(source)) {
+			this.spaceId = event.target.value;
+		}
+
+		this.dispatchEvent(new event.constructor(event.type, {...event}));
+	}
+
+	propChangedCallback ({name, prop, detail: change}) {
+		if (name === "space" || name === "alpha") {
+			let space = this.space;
+
+			if (this.color.space !== space) {
+				this.color = this.color.to(space);
+			}
+
+			let i = 0;
+			let channels = [...Object.keys(this.space.coords)];
+			if (this.alpha) {
+				channels.push("alpha");
+			}
+			for (let channel of channels) {
+				let slider = this._el.sliders.children[i++];
+
+				if (slider) {
+					slider.space = space;
+					slider.channel = channel;
+				}
+				else {
+					this._el.sliders.insertAdjacentHTML("beforeend", `<channel-slider space="${ space.id }" channel="${ channel }" part="channel-slider"></channel-slider>`);
+				}
+			}
+
+			if (this._el.sliders.children.length > channels.length) {
+				// Remove the slider for alpha
+				this._el.sliders.children[channels.length].remove();
+			}
+
+			for (let slider of this._el.sliders.children) {
+				slider.color = this.color;
+			}
+		}
+
+		if (name === "color") {
+			for (let slider of this._el.sliders.children) {
+				slider.color = this.color;
+			}
+
+			if (!this._el.swatch.color || !this.color.equals(this._el.swatch.color)) {
+				// Avoid typing e.g. "red" and having it replaced with "rgb(100% 0% 0%)" under your caret
+				prop.applyChange(this._el.swatch, change);
+			}
+		}
+	}
+
+	static props = {
+		spaceId: {
+			default: "oklch",
+			convert (value) {
+				if (value === null || value === undefined) {
+					return value;
+				}
+				else if (value instanceof Self.Color.Space) {
+					return value.id;
+				}
+
+				return value + "";
+			},
+			changed ({parsedValue, source, ...change}) {
+				if (!parsedValue && source !== "default") {
+					// Something went wrong. We should always have a value. Falling back to the current space
+					this.spaceId = this.space.id;
+					return;
+				}
+
+				if (this.props.space && this.props.space.id !== parsedValue) {
+					// The space object we have in the cache is outdated. We need to delete it so that the space getter returns the updated one
+					delete this.props.space;
+				}
+			},
+			reflect: {
+				from: "space",
+			},
+		},
+
+		space: {
+			get () {
+				return this._el.space_picker.selectedSpace;
+			},
+			set: true,
+			changed ({parsedValue, ...change}) {
+				if (parsedValue === undefined) {
+					// this.spaceId changed
+					if (this._el.space_picker.value !== this.spaceId) {
+						this._el.space_picker.value = this.spaceId;
+					}
+
+					return;
+				}
+				else if (!parsedValue) {
+					// Something went wrong. We should always have a value. Falling back to the current space
+					this.space = this._el.space_picker.selectedSpace;
+					return;
+				}
+
+				parsedValue = parsedValue instanceof Self.Color.Space ? parsedValue.id : parsedValue;
+				if (this.spaceId !== parsedValue) {
+					this._el.space_picker.value = parsedValue;
+					this.spaceId = parsedValue;
+				}
+			},
+			dependencies: ["spaceId"],
+			defaultProp: "spaceId",
+			reflect: false,
+		},
+
+		defaultColor: {
+			get type () {
+				return Self.Color;
+			},
+			convert (color) {
+				return color.to(this.space);
+			},
+			default () {
+				let coords = [];
+				for (let channel in this.space.coords) {
+					let spec = this.space.coords[channel];
+					let range = spec.refRange ?? spec.range;
+					coords.push((range[0] + range[1]) / 2);
+				}
+
+				return new Self.Color(this.space, coords);
+			},
+			reflect: {
+				from: "color",
+			},
+		},
+
+		color: {
+			get type () {
+				return Self.Color;
+			},
+			defaultProp: "defaultColor",
+			reflect: false,
+		},
+
+		alpha: {
+			parse (value) {
+				if (value === undefined || value === null) {
+					return;
+				}
+
+				if (value === false || value === "false") {
+					return false;
+				}
+
+				if (value === "" || value === "alpha" || value === true || value === "true") {
+					// Boolean attribute
+					return true;
+				}
+			},
+			reflect: {
+				from: true,
+			},
+		},
+	};
+
+	static events = {
+		change: {
+			from () {
+				return [this._el.space_picker, this._el.sliders, this._el.swatch];
+			},
+		},
+		input: {
+			from () {
+				return [this._el.space_picker, this._el.sliders, this._el.swatch];
+			},
+		},
+		colorchange: {
+			propchange: "color",
+		},
+	};
+};
+
+Self.define();
+
+export default Self;

package/src/color-scale/README.md

@@ -0,0 +1,75 @@
+# `<color-scale>`
+
+Display a list of colors.
+
+## Features
+
+- Specify colors directly, via interpolation in any color space, or a mix of both
+- Display color coordinates, in any color space (or multiple!)
+- Coming soon: display deltas between consecutive colors
+
+## Examples
+
+### Basic usage
+
+Colors via attribute:
+
+```html
+<color-scale space="oklch" colors="#e3fafc, #c5f6fa, #99e9f2, #66d9e8, #3bc9db"></color-scale>
+```
+
+You can also give them optional names:
+
+```html
+<color-scale space="oklch" colors="
+	Gray 50: #f9fafb,
+	Gray 100: #f3f4f6,
+	Gray 200: #e5e7eb,
+	Gray 300: #d1d5db,
+	Gray 400: #9ca3af,
+	Gray 500: #6b7280,
+	Gray 600: #4b5563,
+	Gray 700: #374151,
+	Gray 800: #1f2937,
+	Gray 900: #111827,
+	Gray 850: #1a202c
+"></color-scale>
+```
+
+
+You can only specify your core colors, and insert steps via interpolation:
+
+```html
+<color-scale colors="#e3fafc, #0b7285" steps="4" space="oklch"></color-scale>
+```
+
+If you have more than 2 colors listed, this will insert steps between each pair.
+
+### Customizing the color swatches
+
+Under the hood, `<color-scale>` generates and uses a series of [`<color-swatch>`](../color-swatch/) elements.
+
+You can specify the `info` attribute to show additional information about the colors, and it will be passed to the generated `<color-swatch`> instances:
+
+```html
+<color-scale space="oklch" info="L: oklch.l, C: oklch.c, H: oklch.h"
+             colors="#e3fafc, #c5f6fa, #99e9f2, #66d9e8, #3bc9db"></color-scale>
+```
+
+You can also create compact color scales, by simply setting `--details-style: compact`:
+
+
+```html
+<color-scale space="oklch" info="L: oklch.l, C: oklch.c, H: oklch.h"
+             style="--details-style: compact"
+             colors="#e3fafc, #c5f6fa, #99e9f2, #66d9e8, #3bc9db"></color-scale>
+```
+
+Issue: How to make them focusable??
+
+<!--
+If you want to insert interpolated colors only in specific places, you can use empty values:
+
+```html
+<color-scale space="oklch" colors="#e3fafc, , , , , , , , , #0b7285"></color-scale>
+``` -->

package/src/color-scale/color-scale.css

@@ -0,0 +1,40 @@
+:host {
+	gap: .3em;
+}
+
+#swatches {
+	display: flex;
+	gap: inherit;
+}
+
+color-swatch {
+	margin: 0;
+	flex: 1;
+}
+
+@supports (grid-template-columns: subgrid) {
+	/* Avoid uneven swatch heights */
+	#swatches {
+		display: grid;
+		grid-auto-flow: row;
+		grid-template-rows: auto auto;
+		grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
+	}
+
+	color-swatch {
+		width: 100%;
+		grid-row: 1 / span 2;
+		display: grid;
+		grid-template-rows: subgrid;
+		/*
+		  Container queries don't play well together with subgrid in Chrome 129.
+		  See https://issues.chromium.org/issues/369331413
+		  This is a workaround to avoid the issue until the new Chrome version is released.
+		*/
+		contain: inline-size layout;
+
+		&::part(swatch) {
+			grid-row: 1;
+		}
+	}
+}