diff --git a/components/colorwheel/index.css b/components/colorwheel/index.css
index 4a78e11b15..3a6047543d 100644
--- a/components/colorwheel/index.css
+++ b/components/colorwheel/index.css
@@ -11,46 +11,45 @@
  * governing permissions and limitations under the License.
  */
 
-/* Windows High Contrast Mode */
-@media (forced-colors: active) {
-	.spectrum-ColorWheel {
-		--highcontrast-colorwheel-border-color-disabled: GrayText;
-		--highcontrast-colorwheel-fill-color-disabled: Canvas;
+.spectrum-ColorWheel {
+	--spectrum-colorwheel-width: var(--spectrum-color-wheel-width);
+	--spectrum-colorwheel-height: var(--spectrum-color-wheel-width);
 
-		forced-color-adjust: none;
-	}
-}
+	/* @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 {
-	--spectrum-colorwheel-border-color: var(--spectrum-transparent-black-300);
+	--spectrum-colorwheel-border-opacity: var(--spectrum-color-wheel-border-opacity);
+	--spectrum-colorwheel-border-color: rgba(var(--spectrum-colorwheel-border-color-rgb), var(--spectrum-colorwheel-border-opacity));
+
+	--spectrum-colorwheel-border-width: var(--spectrum-border-width-100);
+	--spectrum-colorwheel-track-width: var(--spectrum-color-control-track-width);
+
+	--spectrum-colorwheel-min-inline-size: var(--spectrum-color-wheel-minimum-width);
 
-	--spectrum-colorwheel-width: var(--mod-colorwheel-width, var(--spectrum-color-wheel-width));
-	--spectrum-colorwheel-height: var(--mod-colorwheel-height, var(--spectrum-color-wheel-width));
-	--spectrum-colorwheel-fill-color-disabled: var(--mod-colorwheel-fill-color-disabled, var(--spectrum-disabled-background-color));
-	--spectrum-colorwheel-border-color: var(--spectrum-transparent-black-300);
+	--spectrum-colorwheel-colorarea-margin: var(--spectrum-color-wheel-color-area-margin);
 
-	--spectrum-colorwheel-border-width: var(--mod-colorwheel-border-width, var(--spectrum-border-width-100));
-	--spectrum-colorwheel-track-width: var(--mod-colorwheel-track-width, var(--spectrum-color-control-track-width));
+	--spectrum-colorwheel-fill-color-disabled: var(--spectrum-disabled-background-color);
 
 	/* 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(--spectrum-colorwheel-track-width);
+	--_track-width: var(--mod-colorwheel-track-width, var(--spectrum-colorwheel-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-colorwheel-border-width);
+	--_border-width: var(--mod-colorwheel-border-width, var(--spectrum-colorwheel-border-width));
 
 	position: relative;
 	display: block;
-	min-inline-size: var(--mod-colorwheel-min-width, var(--spectrum-color-wheel-minimum-width));
+	min-inline-size: var(--mod-colorwheel-min-inline-size, var(--spectrum-colorwheel-min-inline-size));
 	inline-size: var(--spectrum-colorwheel-width);
 	block-size: var(--spectrum-colorwheel-height);
 	user-select: none;
 	cursor: default;
 
+	/* calcs wrapping --spectrum-colorwheel-border-width are used to properly position the border drawn using this ::before pseudo element over the exterior edge of the colorwheel. The size is reduced and positioning adjusted to create the border effect. */
 	&::before {
-		inline-size: calc(var(--spectrum-colorwheel-width) - 4px);
-		block-size: calc(var(--spectrum-colorwheel-width) - 4px);
-		inset-block-start: 1px;
-		inset-inline-start: 1px;
-		content: " ";
+		inline-size: calc(var(--spectrum-colorwheel-width) - calc(4 * var(--spectrum-colorwheel-border-width)));
+		block-size: calc(var(--spectrum-colorwheel-width) - calc(4 * var(--spectrum-colorwheel-border-width)));
+		inset-block-start: var(--spectrum-colorwheel-border-width);
+		inset-inline-start: var(--spectrum-colorwheel-border-width);
+		content: "";
 		position: absolute;
 		border-width: var(--spectrum-colorwheel-border-width);
 		border-style: solid;
@@ -68,7 +67,7 @@
 
 		&::before,
 		.spectrum-ColorWheel-inner::before {
-			border-color: transparent;
+			border-color: var(--highcontrast-colorwheel-border-color-disabled, transparent);
 		}
 	}
 
@@ -89,12 +88,13 @@
 	block-size: var(--mod-colorwheel-colorarea-container-size, var(--spectrum-colorwheel-colorarea-container-size));
 	margin: auto;
 
+	/* calcs wrapping --spectrum-colorwheel-border-width are used to properly position the border drawn using this ::before pseudo element over the interior edge of the colorwheel. The size is increased and positioning adjusted to create the border effect. */
 	&::before {
-		inline-size: calc(var(--mod-colorwheel-colorarea-container-size, var(--spectrum-colorwheel-colorarea-container-size)) + 2px);
-		block-size: calc(var(--mod-colorwheel-colorarea-container-size, var(--spectrum-colorwheel-colorarea-container-size)) + 2px);
-		inset-block-start: -2px;
-		inset-inline-start: -2px;
-		content: " ";
+		inline-size: calc(var(--mod-colorwheel-colorarea-container-size, var(--spectrum-colorwheel-colorarea-container-size)) + calc(2 * var(--spectrum-colorwheel-border-width)));
+		block-size: calc(var(--mod-colorwheel-colorarea-container-size, var(--spectrum-colorwheel-colorarea-container-size)) + calc(2 * var(--spectrum-colorwheel-border-width)));
+		inset-block-start: calc(-2 * var(--spectrum-colorwheel-border-width));
+		inset-inline-start: calc(-2 * var(--spectrum-colorwheel-border-width));
+		content: "";
 		position: absolute;
 		border-width: var(--spectrum-colorwheel-border-width);
 		border-style: solid;
@@ -110,7 +110,7 @@
 	display: flex;
 	align-items: center;
 	justify-content: center;
-	margin: var(--mod-colorwheel-colorarea-margin, var(--spectrum-color-wheel-color-area-margin));
+	margin: var(--mod-colorwheel-colorarea-margin, var(--spectrum-colorwheel-colorarea-margin));
 }
 
 .spectrum-ColorWheel-slider {
@@ -126,7 +126,7 @@
 }
 
 .spectrum-ColorWheel-handle {
-	transform: translate(calc(var(--spectrum-colorwheel-width) / 2 - var(--spectrum-colorwheel-track-width) / 2), 0);
+	transform: translate(calc(var(--spectrum-colorwheel-width) / 2 - var(--mod-colorwheel-track-width, var(--spectrum-colorwheel-track-width)) / 2), 0);
 	inset-block-start: 50%;
 	inset-inline: 50%;
 }
@@ -140,19 +140,6 @@
 	}
 }
 
-/* a clip-path set border-width wider than than spectrum-colorwheel-wheel to create the appreance of a border */
-.spectrum-ColorWheel-border {
-	position: relative;
-	background-color: var(--mod-colorwheel-border-color, var(--spectrum-colorwheel-border-color));
-	inline-size: var(--spectrum-colorwheel-width);
-	block-size: var(--spectrum-colorwheel-height);
-	clip-path: path(evenodd, var(--mod-colorwheel-path-borders, var(--spectrum-colorwheel-path-borders)));
-
-	&.is-disabled {
-		background-color: var(--highcontrast-colorwheel-border-color-disabled, var(--spectrum-colorwheel-fill-color-disabled));
-	}
-}
-
 .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);
@@ -162,6 +149,16 @@
 
 	&.is-disabled {
 		pointer-events: none;
-		background: var(--highcontrast-colorwheel-fill-color-disabled, var(--spectrum-colorwheel-fill-color-disabled));
+		background: var(--highcontrast-colorwheel-fill-color-disabled, var(--mod-colorwheel-fill-color-disabled, var(--spectrum-colorwheel-fill-color-disabled)));
+	}
+}
+
+/* Windows High Contrast Mode */
+@media (forced-colors: active) {
+	.spectrum-ColorWheel {
+		--highcontrast-colorwheel-border-color-disabled: GrayText;
+		--highcontrast-colorwheel-fill-color-disabled: Canvas;
+
+		forced-color-adjust: none;
 	}
 }