From b94fee93a7b5787bb49422940449e5c3b05012f6 Mon Sep 17 00:00:00 2001
From: Andrey Goder <andy.goder@gmail.com>
Date: Fri, 10 Jul 2026 14:24:13 -0700
Subject: [PATCH] Match color swatch focus ring to swatch

---
 src/components/ColorSwatchPicker/ColorSwatchPicker.recipe.ts | 4 ++--
 src/components/ColorSwatchPicker/ColorSwatchPicker.test.tsx  | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/ColorSwatchPicker/ColorSwatchPicker.recipe.ts b/src/components/ColorSwatchPicker/ColorSwatchPicker.recipe.ts
index 853a036..bd3ba12 100644
--- a/src/components/ColorSwatchPicker/ColorSwatchPicker.recipe.ts
+++ b/src/components/ColorSwatchPicker/ColorSwatchPicker.recipe.ts
@@ -13,7 +13,7 @@ export const colorSwatchPickerRecipe = cva({
  * The button reserves `spacing.1` of padding around the circle so the selected
  * ring and the focus ring both draw inside the button's own box, never over a
  * neighboring swatch. Both rings occupy the same 2px–4px band outside the
- * circle, so a focused swatch shows the primary outline in place of its
+ * circle, so a focused swatch shows its color-matched outline in place of its
  * selected ring; the check icon still marks which swatch is selected.
  */
 export const colorSwatchRecipe = sva({
@@ -54,7 +54,7 @@ export const colorSwatchRecipe = sva({
       '[role="radio"]:focus-visible &': {
         outlineWidth: 'focus',
         outlineStyle: 'solid',
-        outlineColor: 'primary',
+        outlineColor: 'var(--swatch-ring, token(colors.border.emphasized))',
         outlineOffset: 'focusOffset',
       },
     },
diff --git a/src/components/ColorSwatchPicker/ColorSwatchPicker.test.tsx b/src/components/ColorSwatchPicker/ColorSwatchPicker.test.tsx
index ced110b..8094870 100644
--- a/src/components/ColorSwatchPicker/ColorSwatchPicker.test.tsx
+++ b/src/components/ColorSwatchPicker/ColorSwatchPicker.test.tsx
@@ -511,14 +511,14 @@ describe('colorSwatchRecipe', () => {
     );
   });
 
-  it('draws the focus ring around the circle rather than the padded button', () => {
+  it('draws the focus ring around the circle in its own color', () => {
     const {button, fill} = swatch();
 
     expect(classesOf(fill)).toContain(
       '[[role="radio"]:focus-visible_&]:silver-ring-o_focusOffset',
     );
     expect(classesOf(fill)).toContain(
-      '[[role="radio"]:focus-visible_&]:silver-ring-c_primary',
+      '[[role="radio"]:focus-visible_&]:silver-ring-c_var(--swatch-ring,_token(colors.border.emphasized))',
     );
     expect(hasUtility(button, 'silver-ring-o_')).toBe(false);
   });