From 5b042e8f521de4dc9a19b0d61e8715836021105c Mon Sep 17 00:00:00 2001
From: Cory Dransfeldt <cdransfeldt@adobe.com>
Date: Fri, 24 Jan 2025 16:58:06 -0800
Subject: [PATCH] chore(colorwheel): wip inset borders

---
 components/colorwheel/dist/metadata.json |  2 ++
 components/colorwheel/index.css          | 28 ++++++++++++++++++++++++
 2 files changed, 30 insertions(+)

diff --git a/components/colorwheel/dist/metadata.json b/components/colorwheel/dist/metadata.json
index efe7de502d..68fbb8bc37 100644
--- a/components/colorwheel/dist/metadata.json
+++ b/components/colorwheel/dist/metadata.json
@@ -9,12 +9,14 @@
     ".spectrum-ColorWheel-colorarea-container",
     ".spectrum-ColorWheel-handle",
     ".spectrum-ColorWheel-inner",
+    ".spectrum-ColorWheel-inner:before",
     ".spectrum-ColorWheel-slider",
     ".spectrum-ColorWheel-wheel",
     ".spectrum-ColorWheel-wheel.is-disabled",
     ".spectrum-ColorWheel.is-disabled",
     ".spectrum-ColorWheel.is-dragged",
     ".spectrum-ColorWheel.is-focused",
+    ".spectrum-ColorWheel:before",
     "[dir=\"rtl\"] .spectrum-ColorWheel-ColorArea-handle"
   ],
   "modifiers": [
diff --git a/components/colorwheel/index.css b/components/colorwheel/index.css
index 7dd251f1ac..64915b312d 100644
--- a/components/colorwheel/index.css
+++ b/components/colorwheel/index.css
@@ -43,6 +43,20 @@
 	user-select: none;
 	cursor: default;
 
+	&::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: " ";
+		position: absolute;
+		border-width: var(--spectrum-colorwheel-border-width);
+		border-style: solid;
+		border-color: var(--mod-colorwheel-border-color, var(--spectrum-colorwheel-border-color));
+		border-radius: 100%;
+		z-index: 1;
+	}
+
 	&.is-focused {
 		z-index: 2;
 	}
@@ -67,6 +81,20 @@
 	inline-size: var(--mod-colorwheel-colorarea-container-size, var(--spectrum-colorwheel-colorarea-container-size));
 	block-size: var(--mod-colorwheel-colorarea-container-size, var(--spectrum-colorwheel-colorarea-container-size));
 	margin: auto;
+
+	&::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: " ";
+		position: absolute;
+		border-width: var(--spectrum-colorwheel-border-width);
+		border-style: solid;
+		border-color: var(--mod-colorwheel-border-color, var(--spectrum-colorwheel-border-color));
+		border-radius: 100%;
+		z-index: 1;
+	}
 }
 
 .spectrum-ColorWheel-colorarea-container {