color-elements 0.0.1 → 0.0.3

package/src/color-chart/README.md

@@ -0,0 +1,129 @@
+# `<color-chart>`
+
+Display lists of colors as a scatterplot or line chart.
+
+## Features
+
+- Plot any coordinate, in any color space
+
+## Examples
+
+### Basic usage
+
+Plotting a single color scale:
+
+```html
+<color-chart y="oklch.l">
+	<color-scale colors="#e3f2fd, #bbdefb, #90caf9, #64b5f6, #42a5f5, #2196f3, #1e88e5, #1976d2, #1565c0, #0d47a1"></color-scale>
+</color-chart>
+```
+
+By default, the other coordinate would be the index of the color in the list, but you can specify it explicitly:
+
+```html
+<color-chart y="oklch.l">
+	<color-scale colors="50: #e3f2fd, 100: #bbdefb, 200: #90caf9, 300: #64b5f6, 400: #42a5f5, 500: #2196f3, 600: #1e88e5, 700: #1976d2, 800: #1565c0, 900: #0d47a1"></color-scale>
+</color-chart>
+```
+
+You can also specify a whole label, and if it contains a number, the number will become the X coordinate:
+
+```html
+<color-chart y="oklch.c">
+	<color-scale colors="Red 50: #fef2f2, Red 100: #fee2e2, Red 200: #fecaca, Red 300: #fca5a5, Red 400: #f87171, Red 500: #ef4444, Red 600: #dc2626, Red 700: #b91c1c, Red 800: #991b1b, Red 900: #7f1d1d, Red 950: #450a0a"></color-scale>
+	<color-scale colors="Orange 50: #fff7ed, Orange 100: #ffedd5, Orange 200: #fed7aa, Orange 300: #fdba74, Orange 400: #fb923c, Orange 500: #f97316, Orange 600: #ea580c, Orange 700: #c2410c, Orange 800: #9a3412, Orange 900: #7c2d12, Orange 950: #431407"></color-scale>
+	<color-scale colors="Yellow 50: #fefce8, Yellow 100: #fef9c3, Yellow 200: #fef08a, Yellow 300: #fde047, Yellow 400: #facc15, Yellow 500: #eab308, Yellow 600: #ca8a04, Yellow 700: #a16207, Yellow 800: #854d0e, Yellow 900: #713f12, Yellow 950: #422006"></color-scale>
+</color-chart>
+```
+
+_(Colors courtesy of Tailwind)_
+
+### Plotting hues { #hues}
+
+Hues will be shifted as needed to produce a better result:
+
+```html
+<color-chart y="hsl.h">
+	<color-scale colors="hsl(5 50% 50%), hsl(355 50% 50%), hsl(10 50% 50%), hsl(-10 50% 50%)"></color-scale>
+</color-chart>
+```
+
+```html
+<color-chart y="oklch.h">
+	<color-scale colors="05: #2c0110, 10: #41031a, 20: #67082e, 30: #890e3f, 40: #ac1450, 50: #e01d6b, 60: #f2638c, 70: #fb8ea8, 80: #ffb4c5, 90: #ffdce3, 95: #ffeef1"></color-scale>
+	<color-scale colors="05 (WA) / 05: #26050c, 10 (WA) / 10: #3e0817, 20 (WA) / 20: #630d29, 30 (WA) / 30: #88123b, 40 (WA) / 40: #ab174e, 50 (WA) / 50: #de1d6a, 60 (WA) / 60: #ee669b, 70 (WA) / 70: #f391b9, 80 (WA) / 80: #f7b8d3, 90 (WA) / 90: #fbdeeb, 95 (WA) / 95: #fdeef5"></color-scale>
+</color-chart>
+```
+
+### The `info` attribute
+
+You can use the `info` attribute to show information about the color scale points. Currently, the only type of information supported is color coords (in any color space), but more will be added in the future.
+
+The format of this attribute is analogous to the one of [`<color-swatch>`](../color-swatch/#the-info-attribute).
+
+```html
+<color-chart y="oklch.c" info="L: oklch.l, C: oklch.c, H: oklch.h">
+	<color-scale colors="50: #eff6ff, 100: #dbeafe, 200: #bfdbfe, 300: #93c5fd, 400: #60a5fa, 500: #3b82f6, 600: #2563eb, 700: #1d4ed8, 800: #1e40af, 900: #1e3a8a, 950: #172554"></color-scale>
+	<color-scale colors="50: #ecfeff, 100: #cffafe, 200: #a5f3fc, 300: #67e8f9, 400: #22d3ee, 500: #06b6d4, 600: #0891b2, 700: #0e7490, 800: #155e75, 900: #164e63, 950: #083344"></color-scale>
+	<color-scale colors="50: #f0fdfa, 100: #ccfbf1, 200: #99f6e4, 300: #5eead4, 400: #2dd4bf, 500: #14b8a6, 600: #0d9488, 700: #0f766e, 800: #115e59, 900: #134e4a, 950: #042f2e"></color-scale>
+</color-chart>
+```
+
+Reactively changing the Y coordinate:
+
+```html
+<button onclick="this.nextElementSibling.y = 'hwb.w'">
+	Switch to “HWB Whiteness”
+</button>
+<color-chart y="oklch.l">
+	<color-scale colors="Red 50: #fef2f2, Red 100: #fee2e2, Red 200: #fecaca, Red 300: #fca5a5, Red 400: #f87171, Red 500: #ef4444, Red 600: #dc2626, Red 700: #b91c1c, Red 800: #991b1b, Red 900: #7f1d1d, Red 950: #450a0a"></color-scale>
+	<color-scale colors="Orange 50: #fff7ed, Orange 100: #ffedd5, Orange 200: #fed7aa, Orange 300: #fdba74, Orange 400: #fb923c, Orange 500: #f97316, Orange 600: #ea580c, Orange 700: #c2410c, Orange 800: #9a3412, Orange 900: #7c2d12, Orange 950: #431407"></color-scale>
+	<color-scale colors="Yellow 50: #fefce8, Yellow 100: #fef9c3, Yellow 200: #fef08a, Yellow 300: #fde047, Yellow 400: #facc15, Yellow 500: #eab308, Yellow 600: #ca8a04, Yellow 700: #a16207, Yellow 800: #854d0e, Yellow 900: #713f12, Yellow 950: #422006"></color-scale>
+</color-chart>
+```
+
+Reactively setting/changing the colors:
+```html
+<label>Colors:
+	<select onchange="this.parentNode.nextElementSibling.firstElementChild.colors = this.value">
+		<option selected value="">None</option>
+		<option value="Yellow 50: #fefce8, Yellow 100: #fef9c3, Yellow 200: #fef08a, Yellow 300: #fde047, Yellow 400: #facc15, Yellow 500: #eab308, Yellow 600: #ca8a04, Yellow 700: #a16207, Yellow 800: #854d0e, Yellow 900: #713f12, Yellow 950: #422006">Yellow</option>
+		<option value="Orange 50: #fff7ed, Orange 100: #ffedd5, Orange 200: #fed7aa, Orange 300: #fdba74, Orange 400: #fb923c, Orange 500: #f97316, Orange 600: #ea580c, Orange 700: #c2410c, Orange 800: #9a3412, Orange 900: #7c2d12, Orange 950: #431407">Orange</option>
+		<option value="Red 50: #fef2f2, Red 100: #fee2e2, Red 200: #fecaca, Red 300: #fca5a5, Red 400: #f87171, Red 500: #ef4444, Red 600: #dc2626, Red 700: #b91c1c, Red 800: #991b1b, Red 900: #7f1d1d, Red 950: #450a0a">Red</option>
+	</select>
+</label>
+<color-chart y="oklch.l">
+	<color-scale></color-scale>
+</color-chart>
+```
+
+## Reference
+
+### Attributes & Properties
+
+| Attribute | Property | Property type | Default value | Description |
+|-----------|----------|---------------|---------------|-------------|
+| `x` | `x` | `string` | `null` | The coord to plot on the X axis, if any |
+| `y` | `y` | `string` | `"oklch.l"` | The coord to plot on the Y axis, if any |
+| `info` | `info` | `string` | - | Comma-separated list of coords of the color point to be shown. |
+
+### Events
+
+| Name | Description |
+|------|-------------|
+
+### CSS variables
+
+| Name | Type | Description |
+|------|------|-------------|
+| `--color-scale-type` | `discrete` or `normal` | Whether to draw lines between consecutive points. Works on individual color swatches (to prevent drawing a line to the *next* point), entire color scales, or the entire chart. |
+
+### Parts
+
+| Name | Description |
+|------|-------------|
+| `color-channel` | The default [`<channel-picker>`](../channel-picker/) element, used if the `color-channel` slot has no slotted elements. |
+| `axis` | The axis line |
+| `ticks` | The container of ticks |
+| `tick` | A tick mark |
+| `label` | A label on the axis |

package/src/color-chart/color-chart-global.css

@@ -0,0 +1,97 @@
+@property --chart-width {
+	syntax: '<length-percentage>';
+	initial-value: 100%;
+	inherits: true;
+}
+
+@property --width {
+	syntax: "<length>";
+	initial-value: 0px;
+	inherits: true;
+}
+
+@property --height {
+	syntax: "<length>";
+	initial-value: 0px;
+	inherits: true;
+}
+
+@property --angle {
+	syntax: "<angle>";
+	initial-value: 0deg;
+	inherits: true;
+}
+
+color-chart > color-scale {
+	--extent-x: calc(var(--max-x) - var(--min-x));
+	--extent-y: calc(var(--max-y) - var(--min-y));
+
+	&::part(color-swatch) {
+		--_point-size: var(--point-size, .6em);
+		--_line-width: var(--line-width, .2em);
+
+		position: absolute;
+		top:  calc((1 - (var(--y) - var(--min-y)) / (var(--max-y) - var(--min-y))) * 100cqh);
+		left: calc( (var(--x) - var(--min-x)) / (var(--max-x) - var(--min-x)) * 100%);
+		width: var(--_point-size);
+		aspect-ratio: 1;
+		border-radius: 50%;
+		background: yellow;
+		min-block-size: 0;
+		translate: -50% -50%;
+		transition: 300ms;
+		transition-property: width;
+	}
+
+	&::part(color-swatch):hover {
+		/* Cannot use CSS transforms here because that also affects the line */
+		--_point-size: calc(var(--point-size, .6em) * 1.5);
+		z-index: 1;
+	}
+
+	/* Lines */
+	@container not style(--color-scale-type: discrete) {
+		&::part(color-swatch)::before {
+			--delta-x: calc(var(--next-x) - var(--x));
+			--delta-y: calc(var(--next-y) - var(--y));
+			--delta-y-abs: max(var(--delta-y), -1 * var(--delta-y));
+			--delta-y-sign: calc(var(--delta-y) / var(--delta-y-abs));
+
+			--width: calc( var(--chart-width) * var(--delta-x) / var(--extent-x));
+			--height: calc( var(--chart-height) * var(--delta-y-abs) / var(--extent-y));
+			--angle: atan2(var(--height), var(--width));
+
+			content: "";
+			position: absolute;
+			z-index: 1;
+			left: calc(50% - var(--_line-width) / 2);
+			top: calc(50% - var(--_line-width) / 2);
+			width: calc((var(--width) + var(--_line-width)) / cos(var(--angle)));
+			height: var(--_line-width);
+			transform-origin: calc(var(--_line-width) / 2) calc(var(--_line-width) / 2);
+			/* if delta y is negative, this needs to rotate the other way */
+			rotate: calc(-1 * var(--delta-y-sign) * var(--angle));
+			background: linear-gradient(to right, var(--color), var(--next-color));
+
+			/* Don't show points tooltips on hovering the line */
+			pointer-events: none;
+		}
+	}
+
+	&::part(info) {}
+
+	&::part(swatch) {
+		min-block-size: 0;
+		padding: .2em;
+	}
+
+	&::part(gamut) {
+		font-size: 40%;
+	}
+}
+
+color-chart:has(> color-scale:hover) {
+	> color-scale:not(:hover) {
+		opacity: .4;
+	}
+}

package/src/color-chart/color-chart.css

@@ -0,0 +1,112 @@
+:host {
+	display: grid;
+	grid-template-columns: auto 1fr;
+	grid-template-rows: auto 1fr auto;
+	height: clamp(0em, 20em, 100vh);
+	contain: size;
+	container-name: chart;
+	container-type: size;
+}
+
+.axis {
+	display: flex;
+
+	.ticks {
+		flex: 1;
+		display: grid;
+
+		> * {
+			font-size: 60%;
+			line-height: 1;
+		}
+	}
+
+	.label {
+		text-align: center;
+	}
+}
+
+[part="color-channel"],
+slot[name="color-channel"]::slotted(*) {
+	/* <channel-picker>, or anything acting like one, should occupy the whole row above the chart so as not to mess up with the rest of the layout */
+	grid-column: 1 / -1;
+	justify-self: start;
+
+	margin-block: .5em .7em;
+	font-size: 130%;
+}
+
+#x_axis {
+	grid-column: 2;
+	grid-row: 3;
+
+	.ticks {
+		grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
+
+		> * {
+			padding-block-start: .5em;
+			margin-inline-end: auto;
+			translate: -50% 0;
+		}
+	}
+}
+
+#y_axis {
+	grid-column: 1;
+	grid-row: 2;
+
+	.ticks {
+		align-items: end;
+
+		> * {
+			padding-inline-end: .5em;
+			translate: 0 .5lh;
+		}
+	}
+
+	.label {
+		writing-mode: vertical-lr;
+		rotate: .5turn;
+		margin-right: .5em;
+	}
+}
+
+@property --chart-width {
+	syntax: '<length-percentage>';
+	initial-value: 100%;
+	inherits: true;
+}
+
+#chart-container {
+	container-name: chart;
+	container-type: size;
+}
+
+#chart {
+	overflow: hidden;
+
+	position: relative;
+	border: 1px solid gray;
+	min-height: 100%;
+	background: linear-gradient(to bottom, hsl(220 10% 50% / 40%) 0 1px, transparent 0) 0 -1px / 100% calc(100% / var(--steps-y, 10)),
+	            linear-gradient(to right, hsl(220 10% 50% / 30%) 0 1px, transparent 0) -1px 0 / calc(100% / var(--steps-x, 10)) 100%;
+
+	--chart-width: 100cqw;
+	--chart-height: 100cqh;
+	--extent-x: calc(var(--max-x) - var(--min-x));
+	--extent-y: calc(var(--max-y) - var(--min-y));
+}
+
+::slotted(color-scale) {
+	--details-style: compact;
+
+	/*
+	  We want color scales to be easy to style: one can hide them, lower their opacity, etc.
+	  At the same time, we don't want their containers to mess up with other chart parts.
+	  For example, we don't want color scales to get the hover styles when one moves the cursor to the top left part of the chart,
+	  where all the color scale containers reside. So, we need to shrink them.
+	*/
+	display: block;
+	width: 0;
+	height: 0;
+}