chore(colorwheel): wip inset borders

adobe · Jan 28, 2025 · c01a26b · c01a26b
1 parent a363353
commit c01a26b
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 0 deletions.
diff --git 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
@@ -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 {