fix(#5931): TextField/TextArea: fix outline thickness with forced-colors: active (#5932)

Michael Jordan · web-flow · commit 1697a7fef351 · 2024-03-18T11:12:10.000+11:00
diff --git a/packages/@adobe/spectrum-css-temp/components/commons/focus-ring.css b/packages/@adobe/spectrum-css-temp/components/commons/focus-ring.css
@@ -45,3 +45,14 @@
     }
   }
 }
+
+@media (forced-colors: active) {
+  .spectrum-FocusRing,
+  .spectrum-FocusRing-ring,
+  .spectrum-FocusRing--quiet {
+    --spectrum-high-contrast-focus-ring-color: xvar(--spectrum-high-contrast-focus-ring-color, Highlight);
+    &:after {
+      forced-color-adjust: none;
+    }
+  }
+}
diff --git a/packages/@adobe/spectrum-css-temp/components/textfield/skin.css b/packages/@adobe/spectrum-css-temp/components/textfield/skin.css
@@ -180,9 +180,10 @@ governing permissions and limitations under the License.
     --spectrum-textfield-border-color-key-focus: Highlight;
     --spectrum-textfield-placeholder-text-color: GrayText;
     --spectrum-textfield-placeholder-text-color-hover: GrayText;
+    --spectrum-high-contrast-focus-ring-color: Highlight;
     &.focus-ring,
     &:focus-visible {
-      outline: 2px solid Highlight;
+      outline: 2px solid var(--spectrum-high-contrast-focus-ring-color);
     }
     .spectrum-Textfield--quiet & {
       &.focus-ring,

Original file line number	Diff line number	Diff line change
`@@ -45,3 +45,14 @@`
`45`	`45`	`}`
`46`	`46`	`}`
`47`	`47`	`}`
	`48`	`+`
	`49`	`+@media (forced-colors: active) {`
	`50`	`+ .spectrum-FocusRing,`
	`51`	`+ .spectrum-FocusRing-ring,`
	`52`	`+ .spectrum-FocusRing--quiet {`
	`53`	`+ --spectrum-high-contrast-focus-ring-color: xvar(--spectrum-high-contrast-focus-ring-color, Highlight);`
	`54`	`+ &:after {`
	`55`	`+ forced-color-adjust: none;`
	`56`	`+ }`
	`57`	`+ }`
	`58`	`+}`