index.css

/*!
 * Copyright 2025 Adobe. All rights reserved.
 *
 * This file is licensed to you under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License. You may obtain a copy
 * of the License at <http://www.apache.org/licenses/LICENSE-2.0>
 *
 * Unless required by applicable law or agreed to in writing, software distributed under
 * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
 * OF ANY KIND, either express or implied. See the License for the specific language
 * governing permissions and limitations under the License.
 */

.spectrum-ColorWheel {
	/* @TODO: leveraging the rgb token in this case to achieve the desired border color implementation as rgb + opacity are required by the `rgba` function. */
	--spectrum-colorwheel-border-color-rgb: var(--spectrum-gray-1000-rgb);

	--spectrum-colorwheel-border-opacity: var(--spectrum-color-wheel-border-opacity);
	--spectrum-colorwheel-border-color: rgb(var(--spectrum-colorwheel-border-color-rgb), var(--spectrum-colorwheel-border-opacity));

	/* stylelint-disable-next-line spectrum-tools/no-unused-custom-properties -- used with JS in calculating the clip-path paths and colorarea-container-size */
	--_track-width: var(--mod-colorwheel-track-width, var(--spectrum-color-control-track-width));
	/* stylelint-disable-next-line spectrum-tools/no-unused-custom-properties -- used with JS in calculating the clip-path paths and colorarea-container-size */
	--_border-width: var(--spectrum-border-width-100);

	position: relative;
	display: block;
	min-inline-size: var(--spectrum-color-wheel-minimum-width);
	inline-size: var(--spectrum-color-wheel-width);
	block-size: var(--spectrum-color-wheel-width);
	touch-action: none; /* Disable touch scrolling on touch devices to allow for color picking */
	user-select: none;
	cursor: default;

	/**
	 * Color wheel exterior border
	 * - Calcs for `inline-size` and `block-size` subtract 4 times the component's border width
	 * (to account for the inset width of the exterior border) from the component's width.
	 */
	&::before {
		inline-size: calc(var(--spectrum-color-wheel-width) - calc(4 * var(--spectrum-border-width-100)));
		block-size: calc(var(--spectrum-color-wheel-width) - calc(4 * var(--spectrum-border-width-100)));
		inset: var(--spectrum-border-width-100);
		content: "";
		position: absolute;
		border-width: var(--spectrum-border-width-100);
		border-style: solid;
		border-color: var(--spectrum-colorwheel-border-color);
		border-radius: 100%;
		z-index: 1;
	}

	/**
	 * Color wheel interior border
	 * - Calcs for `inset` 2 times the component's border width from the
	 * track width (to account for the inset width of the interior border)
	 */
	&::after {
		inset: calc(var(--spectrum-color-control-track-width) - (calc(2 * var(--spectrum-border-width-100))));
		content: "";
		position: absolute;
		border-width: var(--spectrum-border-width-100);
		border-style: solid;
		border-color: var(--spectrum-colorwheel-border-color);
		border-radius: 100%;
		z-index: 1;
	}

	&.is-focused {
		z-index: 2;
	}

	&.is-disabled {
		pointer-events: none;

		&::before,
		&::after,
		.spectrum-ColorWheel-inner::before {
			border-color: transparent;
		}
	}

	&.is-dragged {
		/* Be on top when dragging so loupe can overlap */
		z-index: 2;
	}
}

.spectrum-ColorWheel-inner {
	display: flex;
	position: absolute;
	inset-inline-start: 0;
	inset-inline-end: 0;
	inset-block-start: 0;
	inset-block-end: 0;
	inline-size: var(--spectrum-colorwheel-colorarea-container-size);
	block-size: var(--spectrum-colorwheel-colorarea-container-size);
	margin: auto;
}

.spectrum-ColorWheel-colorarea-container {
	block-size: auto;
	inline-size: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.spectrum-ColorWheel-slider {
	opacity: 0;
	position: absolute;
	inset-block-start: 0;
	inset-inline-start: 0;
	inline-size: 100%;
	block-size: 100%;
	z-index: 0;
	margin: 0;
	pointer-events: none;
}

.spectrum-ColorWheel-handle {
	transform: translate(calc(var(--spectrum-color-wheel-width) / 2 - var(--spectrum-color-control-track-width) / 2), 0);
	inset-block-start: 50%;
	inset-inline: 50%;
}

.spectrum-ColorWheel-ColorArea-handle {
	inset-block-start: 0;
	inset-inline-end: 0;

	&:dir(rtl) {
		inset-inline-start: 0;
	}
}

.spectrum-ColorWheel-wheel {
	position: absolute;
	background: conic-gradient(from 90deg, red, rgb(255 128 0), rgb(255 255 0), rgb(128 255 0), rgb(0 255 0), rgb(0 255 128), rgb(0 255 255), rgb(0 128 255), rgb(0 0 255), rgb(128 0 255), rgb(255 0 255), rgb(255 0 128), red);
	inset-block: var(--spectrum-border-width-100);
	inset-inline: var(--spectrum-border-width-100);
	clip-path: path(evenodd, var(--spectrum-colorwheel-path));

	&.is-disabled {
		pointer-events: none;
		background: var(--spectrum-disabled-background-color);
	}
}

/* Windows High Contrast Mode */
@media (forced-colors: active) {
	.spectrum-ColorWheel-wheel {
		forced-color-adjust: none;

		&.is-disabled {
			background: Canvas;
		}
	}
}