color-elements 0.0.1 → 0.0.3

package/src/color-scale/color-scale.js

@@ -0,0 +1,164 @@
+import ColorElement from "../common/color-element.js";
+import "../color-swatch/color-swatch.js";
+
+const Self = class ColorScale extends ColorElement {
+	static tagName = "color-scale";
+	static url = import.meta.url;
+	static dependencies = new Set(["color-swatch"]);
+	static shadowStyle = true;
+	static shadowTemplate = `
+		<div id=swatches></div>
+		<slot></slot>`;
+
+	constructor () {
+		super();
+
+		this._el = {
+			slot: this.shadowRoot.querySelector("slot"),
+			swatches: this.shadowRoot.getElementById("swatches"),
+		};
+	}
+
+	connectedCallback () {
+		super.connectedCallback?.();
+		this._el.swatches.addEventListener("colorchange", this, {capture: true});
+	}
+
+	disconnectedCallback () {
+		this.#swatches = [];
+		this._el.swatches.removeEventListener("colorchange", this, {capture: true});
+	}
+
+	handleEvent (event) {
+		this.dispatchEvent(new event.constructor(event.type, {...event}));
+	}
+
+	propChangedCallback ({name, prop, detail: change}) {
+		if (name === "computedColors") {
+			// Re-render swatches
+			this.render();
+		}
+	}
+
+	#swatches = [];
+
+	render () {
+		let colors = this.computedColors;
+
+		if (!colors) {
+			return;
+		}
+
+		let colorCount = colors.length;
+
+		let i = 0;
+		let newSwatches = [];
+		for (let {name, color} of colors) {
+			let swatch = this.#swatches[i] = this._el.swatches.children[i];
+
+			if (!swatch) {
+				this.#swatches[i] = swatch = document.createElement("color-swatch");
+				swatch.setAttribute("size", "large");
+				swatch.setAttribute("part", "color-swatch");
+				swatch.setAttribute("exportparts", "swatch, info, gamut");
+				newSwatches.push(swatch);
+			}
+
+			swatch.color = color;
+			swatch.label = name;
+			if (this.info) {
+				swatch.info = this.info;
+			}
+			i++;
+		}
+
+		if (newSwatches.length > 0) {
+			this._el.swatches.append(...newSwatches);
+		}
+		else if (colorCount < this._el.swatches.children.length) {
+			// Remove but keep them around in this.#swatches
+			[...this._el.swatches.children].slice(colorCount).forEach(child => child.remove());
+		}
+	}
+
+	static props = {
+		colors: {
+			type: {
+				is: Object,
+				// Support overriding the Color object
+				get values () {
+					return ColorScale.Color;
+				},
+				defaultKey: (v, i) => v,
+			},
+		},
+		space: {
+			default: "oklch",
+			parse (value) {
+				let ColorSpace = ColorScale.Color.Space;
+				if (value instanceof ColorSpace || value === null || value === undefined) {
+					return value;
+				}
+
+				value += "";
+
+				return ColorSpace.get(value);
+			},
+			stringify (value) {
+				return value?.id;
+			},
+		},
+		steps: {
+			type: Number,
+			default: 0,
+		},
+		computedColors: {
+			get () {
+				if (!this.colors) {
+					return null;
+				}
+
+				let colors = Object.entries(this.colors).map(([name, color]) => ({name, color}));
+
+				if (this.steps > 0) {
+					// Insert intermediate steps
+					let tessellated = [];
+
+					for (let i = 1; i < colors.length; i++) {
+						let start = colors[i - 1];
+						let end = colors[i];
+						let steps = ColorScale.Color.steps(start.color, end.color, { space: this.space, steps: this.steps + 2 });
+
+						steps.shift();
+						steps.pop();
+						steps = steps.map(color => ({name: color + "", color}));
+
+						tessellated.push(start, ...steps);
+
+						if (i === colors.length - 1) {
+							// Only add the last color at the end
+							// In all other iterations, it’s the same as the start of the next pair
+							tessellated.push(end);
+						}
+					}
+
+					colors = tessellated;
+				}
+
+				return colors;
+			},
+			additionalDependencies: ["info"],
+		},
+		info: {},
+	};
+
+	static events = {
+		colorschange: {
+			propchange: "computedColors",
+		},
+	};
+};
+
+Self.define();
+
+export default Self;

package/src/color-slider/README.md

@@ -0,0 +1,220 @@
+# `<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-usage) 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
+
+### Slots
+
+| Name | Description |
+|------|-------------|
+| _(default)_ | Content placed after the color slider. |
+| `tooltip` | An element used as a tooltip. |
+
+### 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 hue interpolation method to use. |
+| `--transparency-grid` | `<image>` | Gradient used as a background for transparent parts of the slider. |
+| `--transparency-cell-size` | `<length>` | The size of the cells of the transparency gradient. |
+| `--transparcency-background` | `<color>` | The background color of the transparency gradient. |
+| `--transparency-darkness` | `<percentage>` | The opacity of the black color used for dark parts of the transparency gradient. |
+| `--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. |
+
+### Getters
+
+These properties are read-only.
+
+| Property | Type | Description |
+|----------|------|-------------|
+| `progress` | `number` | The slider value converted to a 0-1 number with `0` corresponding to the min of the range and `1` to the max. |
+
+
+### 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. |
+
+### Parts
+
+| Name | Description |
+|------|-------------|
+| `slider` | The internal `<input type="range">` element. |
+| `spinner` | The default `tooltip` slot content (an `<input type="number">` element). Please note that if an element is slotted in the `tooltip` slot, this will not match anyhing. |
+
+## Planned features
+
+- Discrete scales & steps

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

@@ -0,0 +1,174 @@
+:host {
+	display: flex;
+	position: relative;
+}
+
+.color-slider,
+.slider-tooltip {
+	--transparency-cell-size: 1.5em;
+	--_transparency-cell-size: var(--transparency-cell-size, .5em);
+	--_transparency-background: var(--transparency-background, transparent);
+	--_transparency-darkness: var(--transparency-darkness, 5%);
+	--_transparency-grid: var(--transparency-grid,
+		repeating-conic-gradient(transparent 0 25%, rgb(0 0 0 / var(--_transparency-darkness)) 0 50%)
+		0 0 / calc(2 * var(--_transparency-cell-size)) calc(2 * var(--_transparency-cell-size))
+		content-box border-box var(--_transparency-background)
+	);
+
+	--_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-grid);
+	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;
+	}
+
+		&::-moz-range-thumb:active {
+			border: var(--_slider-thumb-border-active);
+			scale: var(--_slider-thumb-scale-active);
+		}
+
+	&::-moz-range-track {
+		background: none;
+	}
+}
+
+/* For some reason, the &::-webkit-slider-thumb:active rule (previously used inside the above rule) doesn't work 🤷‍♂️ */
+/* DO NOT MOVE IT BACK! :) */
+.color-slider::-webkit-slider-thumb:active {
+	border: var(--_slider-thumb-border-active);
+	scale: var(--_slider-thumb-scale-active);
+}
+
+.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: "%";
+}