Commit ba84b347ff9 for woocommerce

commit ba84b347ff97acf09ce511d5a33146de888559da
Author: Ann <annchichi@users.noreply.github.com>
Date:   Thu May 7 02:02:42 2026 +0800

    Use --wp-admin-border-width-focus for focus ring widths (#64249)

    * Use --wp-admin-border-width-focus for focus ring widths

    * Add changelog entry for focus ring width density responsiveness

    * Migrate remaining FormToggle focus-ring widths to focus-width var

    Lines 1001 and 1005 still hardcoded 2px; line 970 was already migrated.
    Completes the density-responsive width migration across all FormToggle
    focus-ring declarations, matching the pattern used elsewhere in helper.scss.

diff --git a/plugins/woocommerce/changelog/tweak-focus-ring-width-density-responsive b/plugins/woocommerce/changelog/tweak-focus-ring-width-density-responsive
new file mode 100644
index 00000000000..960c73e8346
--- /dev/null
+++ b/plugins/woocommerce/changelog/tweak-focus-ring-width-density-responsive
@@ -0,0 +1,4 @@
+Significance: patch
+Type: tweak
+
+Defer focus ring widths to WordPress's --wp-admin-border-width-focus variable so Woo's keyboard focus indicators adopt the density-responsive behavior (2px default, 1.5px retina) that WP core ships.
diff --git a/plugins/woocommerce/client/admin/client/marketplace/components/product-card/product-card.scss b/plugins/woocommerce/client/admin/client/marketplace/components/product-card/product-card.scss
index 0beb5082bf2..e3b88d4c746 100644
--- a/plugins/woocommerce/client/admin/client/marketplace/components/product-card/product-card.scss
+++ b/plugins/woocommerce/client/admin/client/marketplace/components/product-card/product-card.scss
@@ -156,7 +156,7 @@
 			}

 			&:focus-visible {
-				box-shadow: 0 0 0 2px var(--wp-admin-theme-color, #2271b1);
+				box-shadow: 0 0 0 var(--wp-admin-border-width-focus, 2px) var(--wp-admin-theme-color, #2271b1);
 			}

 			/* Use the ::after trick to make the whole card clickable: */
diff --git a/plugins/woocommerce/client/legacy/css/helper.scss b/plugins/woocommerce/client/legacy/css/helper.scss
index 97020438427..835786e6eb3 100644
--- a/plugins/woocommerce/client/legacy/css/helper.scss
+++ b/plugins/woocommerce/client/legacy/css/helper.scss
@@ -967,7 +967,7 @@ $admin-theme-color: var(--wp-admin-theme-color);
 	}

 	.accessible-focus &:focus {
-		box-shadow: 0 0 0 2px $admin-theme-color;
+		box-shadow: 0 0 0 var(--wp-admin-border-width-focus, 2px) $admin-theme-color;
 	}


@@ -998,11 +998,11 @@ $admin-theme-color: var(--wp-admin-theme-color);
 	.accessible-focus &:focus {

 		+ .form-toggle__label .form-toggle__switch {
-			box-shadow: 0 0 0 2px $admin-theme-color;
+			box-shadow: 0 0 0 var(--wp-admin-border-width-focus, 2px) $admin-theme-color;
 		}

 		&:checked + .form-toggle__label .form-toggle__switch {
-			box-shadow: 0 0 0 2px $admin-theme-color;
+			box-shadow: 0 0 0 var(--wp-admin-border-width-focus, 2px) $admin-theme-color;
 		}
 	}