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

A set of web components for working with color. A Color.js project.

@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 {
	--_point-size: var(--point-size, .6em);
	--_line-width: var(--line-width, .2em);
	--color-swatch-width: var(--color-swatch-width, var(--_point-size));
	--color-swatch-radius: var(--color-swatch-radius, 50%);
}

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) {
		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 .01ms;
		transition-property: width, opacity;
	}

	&::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;
	}
}