color-elements 0.0.1 → 0.0.2

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

@@ -0,0 +1,164 @@
+import "../channel-slider/channel-slider.js";
+import "../color-swatch/color-swatch.js";
+import NudeElement from "../../node_modules/nude-element/src/Element.js";
+import * as dom from "../common/dom.js";
+import Color from "../common/color.js";
+
+const Self = class ColorPicker extends NudeElement {
+	static tagName = "color-picker";
+
+	constructor () {
+		super();
+
+		this.attachShadow({mode: "open"});
+		let styleURL = new URL(`./${Self.tagName}.css`, import.meta.url);
+		this.shadowRoot.innerHTML = `
+			<style>@import url("${ styleURL }")</style>
+			<div id=sliders></div>
+			<slot name="swatch">
+				<color-swatch size="large" id="swatch">
+					<slot slot="swatch-content"></slot>
+					<input value="oklch(70% 0.25 138)" id="color" />
+				</color-swatch>
+			</slot>
+		`;
+
+		this._el = dom.named(this);
+	}
+
+	connectedCallback() {
+		super.connectedCallback?.();
+		this._el.sliders.addEventListener("input", this);
+		this._el.swatch.addEventListener("input", this);
+
+		this.render();
+	}
+
+	disconnectedCallback() {
+		this._el.sliders.removeEventListener("input", this);
+		this._el.swatch.removeEventListener("input", this);
+	}
+
+	handleEvent(event) {
+		this.render(event.target);
+
+		this.dispatchEvent(new event.constructor(event.type, {...event}));
+	}
+
+	render (source) {
+		if (!source || this._el.sliders.contains(source)) {
+			// From sliders
+			let coords = [...this._el.sliders.children].map(el => el.value);
+			this.color = new Color(this.space, coords);
+			this._el.swatch.value = this.color;
+		}
+		else if (!source || this._el.swatch.contains(source)) {
+			// From swatch
+			if (!this._el.swatch.color) {
+				// Invalid color, or still typing
+				return;
+			}
+			this.color = this._el.swatch.color;
+		}
+
+		for (let slider of this._el.sliders.children) {
+			slider.defaultColor = this.color;
+		}
+	}
+
+	propChangedCallback ({name, prop, detail: change}) {
+		if (name === "space") {
+			let i = 0;
+			for (let channel in this.space.coords) {
+				let slider = this._el.sliders.children[i++];
+
+				if (slider) {
+					slider.space = this.space;
+					slider.channel = channel;
+				}
+				else {
+					this._el.sliders.insertAdjacentHTML("beforeend", `<channel-slider space="${ this.space.id }" channel="${ channel }"></channel-slider>`);
+				}
+			}
+		}
+
+		if (name === "color") {
+			for (let slider of this._el.sliders.children) {
+				slider.color = this.color;
+			}
+
+			if (this.color && (!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 = {
+		space: {
+			default: "oklch",
+			parse (value) {
+				if (value instanceof Color.Space || value === null || value === undefined) {
+					return value;
+				}
+
+				value += "";
+
+				return Color.Space.get(value);
+			},
+			stringify (value) {
+				return value?.id;
+			},
+		},
+
+		defaultColor: {
+			type: 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 Color(this.space, coords);
+			},
+			reflect: {
+				from: "color",
+			},
+		},
+
+		color: {
+			type: Color,
+			set (value) {
+				this.defaultColor = new Color(value).to(this.space);
+			},
+		},
+	};
+
+	static events = {
+		change: {
+			from () {
+				return [this._el.sliders, this._el.swatch];
+			}
+		},
+		input: {
+			from () {
+				return [this._el.sliders, this._el.swatch];
+			}
+		},
+		valuechange: {
+			propchange: "value",
+		},
+		colorchange: {
+			propchange: "color",
+		},
+	};
+}
+
+customElements.define(Self.tagName, Self);
+
+export default Self;

package/src/color-slider/README.md

@@ -0,0 +1,193 @@
+# `<color-slider>`
+
+Creates a slider with a gradient background, primarily intended for color picking.
+
+## 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](#css-only) and a few classes and CSS variables to style regular HTML sliders.
+
+The actual component does a lot more:
+- It provides a `color` property with the actual color value
+- It takes care of even displaying colors in unsupported color spaces
+- Editable tooltip showing the current value or progress _(optional)_
+- Convenient events like `colorchange` and `valuechange` that fire even when the value changes programmatically
+
+Basic example:
+
+```html
+<color-slider space="hsl"
+              stops="oklch(90% 50% 100), darkcyan, indigo"></color-slider>
+```
+
+You can listen to the `colorchange` event and grab the `color` property to get the current color value:
+
+```html
+<color-slider space="hsl"
+              stops="red, yellow, lime, aqua, blue, magenta, red"
+              oncolorchange="this.nextElementSibling.textContent = this.color"></color-slider>
+<output></output>
+```
+
+In fact, you can combine it with a [`<color-inline>`](../color-inline/) or [`<color-swatch>`](../color-swatch/) element to display the color in a more visual way:
+
+```html
+<color-slider space="oklch"
+              stops="oklch(80% 50% 70), oklch(65% 50% 180)"
+              oncolorchange="this.nextElementSibling.textContent = this.color"></color-slider>
+<color-inline></color-inline>
+```
+
+Colors and color spaces not supported by the browser also work:
+
+```html
+<color-slider space="okhsl" stops="gold, color(--okhsl 180 100% 50%)"></color-slider>
+```
+
+You can set the `value` attribute to specify an initial color other than the midpoint:
+
+```html
+<color-slider space="oklch"
+              stops="oklch(85% 50% 80), oklch(65% 50% 180)"
+			  value="0.1"
+              oncolorchange="this.nextElementSibling.textContent = this.color"></color-slider>
+<color-inline></color-inline>
+```
+
+You can use a different min and max value and it’s just linearly mapped to the stops:
+
+```html
+<color-slider space="oklch"
+              stops="oklch(85% 50% 80), oklch(65% 50% 180)"
+			  min="-50" max="50" value="20"
+              oncolorchange="this.nextElementSibling.textContent = this.color"></color-slider>
+<color-inline></color-inline>
+```
+
+You can add an editable tooltip by simply using the `tooltip` attribute:
+
+```html
+<color-slider space="oklch"
+              stops="oklch(85% 50% 80), oklch(65% 50% 180)"
+			  min="-50" max="50" value="20"
+              tooltip
+              oncolorchange="this.nextElementSibling.textContent = this.color"></color-slider>
+<color-inline></color-inline>
+```
+
+By default, the tooltip will show the slider value as a number.
+If you want to show the progress instead, you can specify `"progress"` as the attribute value:
+
+```html
+<color-slider space="oklch"
+              stops="oklch(85% 50% 80), oklch(65% 50% 180)"
+			  min="-50" max="50" value="20"
+              tooltip="progress"
+              oncolorchange="this.nextElementSibling.textContent = this.color"></color-slider>
+<color-inline></color-inline>
+```
+
+All properties are reactive and can be set programmatically:
+
+```html
+<button onclick="this.nextElementSibling.value = Math.random()">Random color</button>
+<color-slider space="oklch"
+              stops="gold, darkcyan, indigo"
+              oncolorchange="this.nextElementSibling.textContent = this.color"></color-slider>
+<color-swatch></color-swatch>
+```
+
+You can style it to look quite different:
+
+```html
+<style>
+.lr-slider {
+    --slider-height: .3em;
+    --slider-thumb-width: 1em;
+    --slider-thumb-height: 1em;
+    --slider-thumb-radius: 1em;
+    --slider-thumb-border: 3px solid oklab(50% 0 0);
+}
+</style>
+<color-slider class="lr-slider" space="oklch"
+              stops="yellowgreen, gold, red"></color-slider>
+```
+
+
+### CSS-only usage
+
+If you just want the styling of `<color-slider>` and not any of the API (or are fine dealing with the lower level details on your own),
+you *can* just use the CSS file:
+
+```css
+@import url("https://elements.colorjs.io/src/color-slider/color-slider.css");
+```
+
+This is perfect for when the gradient is more of a visual aid than a functional part of your UI,
+e.g. when picking a temperature:
+
+```html
+<style>
+    @import url("color-slider.css");
+</style>
+<label>
+    Temperature:
+    <input type="range" class="color-slider" min="-20" max="50" value="15"
+           style="--slider-color-stops: oklch(65% 0.1 250), yellowgreen, gold, orange, red, darkred" />
+</label>
+```
+
+Then use a `color-slider` class on your slider element, and use [CSS variables](#css-variables) to set the gradient (either directly via `--slider-gradient` or generated via `--slider-color-stops` + `--color-space`).
+
+## Reference
+
+### Attributes & Properties
+
+| Attribute | Property | Property type | Default value | Description |
+|-----------|----------|---------------|---------------|-------------|
+| `space` | `space` | `ColorSpace` &#124; `string` | `oklch` | The color space to use for interpolation. |
+| `color` | `color` | `Color` &#124; `string` | `oklch(50 50% 180)` | The current color value. |
+| `stops` | `stops` | `String` &#124; `Array<Color>` | - | Comma-separated list of color stops |
+| `min` | `min` | `number` | 0 | The minimum value for the slider. |
+| `max` | `max` | `number` | 1 | The maximum value for the slider. |
+| `step` | `step` | `number` | Computed automatically based on `this.min` and `this.max`. | The granularity that the slider's current value must adhere to. |
+| `value` | `value` | `number` | `(this.min + this.max) / 2` | The current value of the slider. |
+
+### CSS variables
+
+If you’re using the component, these are mostly set automatically.
+If you’re only using the CSS file, you should set these yourself.
+
+| Variable | Type | Description |
+|----------|---------------|-------------|
+| `--slider-color-stops` | `<color>#` | Comma-separated list of color stops. |
+| `--color-space` | `<ident>` | The color space to use for interpolation. |
+| `--hue-interpolation` | `[shorter` &#124; `longer` &#124; `increasing` &#124; `decreasing] hue` | The color space to use for interpolation. |
+| `--slider-gradient` | `<image>` | The gradient to use as the background. |
+| `--slider-height` | `<length>` | Height of the slider track. |
+| `--slider-thumb-width` | `<length>` | Width of the slider thumb. |
+| `--slider-thumb-height` | `<length>` | Height of the slider thumb. |
+| `--slider-thumb-height-offset` | `<length>` | Offset the thumb height from the track height. |
+| `--slider-thumb-radius` | `<length>` | Radius of the slider thumb. |
+| `--slider-thumb-background` | `<color>` | Background color of the slider thumb. |
+| `--slider-thumb-border` | `<line-width>` &#124;&#124; `<line-style>` &#124;&#124; `<color>` | Border of the slider thumb. |
+| `--slider-thumb-border-active` | `<line-width>` &#124;&#124; `<line-style>` &#124;&#124; `<color>` | Border of the slider thumb in active state. |
+| `--slider-thumb-scale-active` | `<number>` | Scale transform applied to the slider thumb in active state. |
+| `--tooltip-background` | `<color>` | Background color of the tooltip. |
+| `--tooltip-border-radius` | `<length>` | Border radius of the tooltip. |
+| `--tooltip-pointer-height` | `<length>` | Height of the tooltip pointer triangle. |
+| `--tooltip-pointer-angle` | `<angle>` | Angle of the tooltip pointer triangle. |
+
+### Events
+
+| Name | Description |
+|------|-------------|
+| `input` | Fired when the color changes due to user action. |
+| `change` | Fired when the color changes due to user action. |
+| `valuechange` | Fired when the value changes for any reason, and once during initialization. |
+| `colorchange` | Fired when the color changes for any reason, and once during initialization. |
+
+## Planned features
+
+- Discrete scales & steps

package/src/color-slider/color-slider.css

@@ -0,0 +1,164 @@
+:host {
+	display: flex;
+	position: relative;
+}
+
+.color-slider,
+.slider-tooltip {
+	--transparency: repeating-conic-gradient(transparent 0 25%, rgb(0 0 0 / .05) 0 50%) 0 0 / 1.5em 1.5em content-box border-box;
+
+	--_slider-color-stops: var(--slider-color-stops, transparent 0% 100%);
+	--_slider-gradient: var(--slider-gradient, linear-gradient(to right var(--in-space, ), var(--_slider-color-stops)));
+	--_slider-height: var(--slider-height, 2.2em);
+
+	--_slider-thumb-width: var(--slider-thumb-width, 1em);
+	--_slider-thumb-height-offset: var(--slider-thumb-height-offset, 2px);
+	--_slider-thumb-height: var(--slider-thumb-height, calc(var(--_slider-height) + var(--_slider-thumb-height-offset)));
+	--_slider-thumb-radius: var(--slider-thumb-radius, .16em);
+	--_slider-thumb-background: var(--slider-thumb-background, var(--color, transparent));
+	--_slider-thumb-border: var(--slider-thumb-border, 1px solid oklab(.2 0 0));
+	--_slider-thumb-border-active: var(--slider-thumb-border-active, 2px solid oklab(.4 0 0));
+	--_slider-thumb-scale-active: var(--slider-thumb-scale-active, 1.1);
+
+	--_tooltip-background: var(--tooltip-background, hsl(0 0 0 / 80%));
+	--_tooltip-border-radius: var(--tooltip-border-radius, .3em);
+	--_tooltip-pointer-height: var(--tooltip-pointer-height, .3em);
+	--_tooltip-pointer-angle: var(--tooltip-pointer-angle, 90deg);
+}
+
+.color-slider {
+	@supports (background: linear-gradient(in oklab, red, tan)) {
+		--in-space: in var(--color-space, oklab) var(--hue-interpolation, );
+	}
+
+	display: block;
+	margin: 0;
+	width: 100%;
+	-moz-appearance: none;
+	-webkit-appearance: none;
+	background: var(--_slider-gradient), var(--transparency);
+	background-origin: border-box;
+	background-clip: border-box;
+	height: var(--_slider-height);
+	border-radius: .3em;
+	border: 1px solid rgb(0 0 0 / 8%);
+
+	&::-webkit-slider-thumb {
+		-webkit-appearance: none;
+		box-sizing: content-box;
+		width: var(--_slider-thumb-width);
+		height: var(--_slider-thumb-height);
+		border-radius: var(--_slider-thumb-radius);
+		border: var(--_slider-thumb-border);
+		box-shadow: 0 0 0 1px white;
+		background: var(--color, transparent);
+		transition: 200ms, 0s background;
+	}
+
+	&::-moz-range-thumb {
+		box-sizing: content-box;
+		width: var(--_slider-thumb-width);
+		height: var(--_slider-thumb-height);
+		border-radius: var(--_slider-thumb-radius);
+		border: var(--_slider-thumb-border);
+		box-shadow: 0 0 0 1px white;
+		background: var(--color, transparent);
+		transition: 200ms, 0s background;
+	}
+
+		&::-webkit-slider-thumb:active {
+			border: var(--_slider-thumb-border-active);
+			scale: var(--_slider-thumb-scale-active);
+		}
+
+		&::-moz-range-thumb:active {
+			border: var(--_slider-thumb-border-active);
+			scale: var(--_slider-thumb-scale-active);
+		}
+
+	&::-moz-range-track {
+		background: none;
+	}
+}
+
+.slider-tooltip {
+	position: absolute;
+	left: clamp(-20%,
+			100% * var(--progress)
+			- (var(--progress) - 0.5) * var(--_slider-thumb-width) / 2 /* center on slider thumb */
+		, 100%);
+	bottom: calc(100% + 3px);
+	translate: -50%;
+	transform-origin: bottom;
+	display: flex;
+	padding-block: .3em;
+	padding-inline: .4em;
+	border: var(--_tooltip-pointer-height) solid transparent;
+	border-radius: calc(var(--_tooltip-border-radius) + var(--_tooltip-pointer-height));
+	text-align: center;
+	color: white;
+	background:
+		conic-gradient(from calc(-1 * var(--_tooltip-pointer-angle) / 2) at bottom, var(--_tooltip-background) var(--_tooltip-pointer-angle), transparent 0) border-box bottom / 100% var(--_tooltip-pointer-height) no-repeat,
+		var(--_tooltip-background) padding-box;
+	color-scheme: dark;
+	transition:
+		visibility 0s 200ms,
+		opacity 200ms,
+		scale 200ms,
+		width 100ms,
+		left 200ms cubic-bezier(.17,.67,.49,1.48);
+
+	&::after {
+		content: var(--tooltip-suffix);
+	}
+
+	input {
+		all: unset;
+
+		&:where([type=number]) {
+			--content-width: calc(var(--value-length) * 1ch);
+			width: calc(var(--content-width, 2ch) + 1.2em);
+			min-width: calc(2ch + 1.2em);
+			box-sizing: content-box;
+
+			&::-webkit-textfield-decoration-container {
+				gap: .2em;
+			}
+
+			@container style(--tooltip-suffix) {
+				&::-webkit-textfield-decoration-container {
+					flex-flow: row-reverse;
+				}
+			}
+
+			/* Don’t auto hide the spin buttons */
+			&::-webkit-inner-spin-button {
+				opacity: 1;
+			}
+		}
+
+		@supports (field-sizing: content) {
+			field-sizing: content;
+			width: auto;
+		}
+
+		/* Prevent input from moving all over the place as we type */
+		&:focus {
+			transition-delay: .5s;
+		}
+	}
+
+	&:not(:is(:focus-within, :hover) > *, .color-slider:is(:focus, :hover) + *, :focus, :hover) {
+		visibility: hidden;
+		opacity: 0;
+		scale: .5;
+	}
+}
+
+:host(:not([tooltip])) .slider-tooltip {
+	display: none;
+}
+
+:host([tooltip="progress"]) .slider-tooltip {
+	--tooltip-suffix: "%";
+}