fix(back-to-top): change background color on hover and focus

bennypowers · bennypowers · commit d7ea9eb589d5 · 2026-04-15T15:44:52.000+03:00
Apply hover/focus colors directly rather than through CSS custom property overrides that don't cascade into shadow DOM. Closes #2743 Assisted-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
diff --git a/.changeset/fix-back-to-top-hover.md b/.changeset/fix-back-to-top-hover.md
@@ -0,0 +1,5 @@
+---
+"@patternfly/elements": patch
+---
+
+`pf-back-to-top`: background color now changes on hover and focus.
diff --git a/elements/pf-back-to-top/pf-back-to-top.css b/elements/pf-back-to-top/pf-back-to-top.css
@@ -41,14 +41,16 @@ a {
   gap: var(--pf-c-button__icon--m-end--MarginLeft, var(--pf-global--spacer--xs, 0.25rem));
 }
 
-a:hover {
-  --pf-c-button--m-primary--Color: var(--pf-c-button--m-primary--hover--Color, var(--pf-global--Color--light-100, #fff));
-  --pf-c-button--m-primary--BackgroundColor: var(--pf-c-button--m-primary--hover--BackgroundColor, var(--pf-global--primary-color--200, #004080));
+a:hover,
+a:focus {
+  color: var(--pf-c-button--m-primary--hover--Color, var(--pf-global--Color--light-100, #fff));
+  background-color: var(--pf-c-button--m-primary--hover--BackgroundColor, var(--pf-global--primary-color--200, #004080));
 }
 
-a:focus {
-  --pf-c-button--m-primary--Color: var(--pf-c-button--m-primary--hover--Color, var(--pf-global--Color--light-100,#fff));
+[part="trigger"]:is(pf-button):hover,
+[part="trigger"]:is(pf-button):focus-within {
   --pf-c-button--m-primary--BackgroundColor: var(--pf-c-button--m-primary--hover--BackgroundColor, var(--pf-global--primary-color--200, #004080));
+  --pf-c-button--m-primary--Color: var(--pf-c-button--m-primary--hover--Color, var(--pf-global--Color--light-100, #fff));
 }
 
 [part="trigger"][hidden] {

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +"@patternfly/elements": patch
 +---
++
 +`pf-back-to-top`: background color now changes on hover and focus.
Original file line number	Diff line number	Diff line change
`@@ -41,14 +41,16 @@ a {`
`41`	`41`	`gap: var(--pf-c-button__icon--m-end--MarginLeft, var(--pf-global--spacer--xs, 0.25rem));`
`42`	`42`	`}`
`43`	`43`
`44`		`-a:hover {`
`45`		`- --pf-c-button--m-primary--Color: var(--pf-c-button--m-primary--hover--Color, var(--pf-global--Color--light-100, #fff));`
`46`		`- --pf-c-button--m-primary--BackgroundColor: var(--pf-c-button--m-primary--hover--BackgroundColor, var(--pf-global--primary-color--200, #004080));`
	`44`	`+a:hover,`
	`45`	`+a:focus {`
	`46`	`+ color: var(--pf-c-button--m-primary--hover--Color, var(--pf-global--Color--light-100, #fff));`
	`47`	`+ background-color: var(--pf-c-button--m-primary--hover--BackgroundColor, var(--pf-global--primary-color--200, #004080));`
`47`	`48`	`}`
`48`	`49`
`49`		`-a:focus {`
`50`		`- --pf-c-button--m-primary--Color: var(--pf-c-button--m-primary--hover--Color, var(--pf-global--Color--light-100,#fff));`
	`50`	`+[part="trigger"]:is(pf-button):hover,`
	`51`	`+[part="trigger"]:is(pf-button):focus-within {`
`51`	`52`	`--pf-c-button--m-primary--BackgroundColor: var(--pf-c-button--m-primary--hover--BackgroundColor, var(--pf-global--primary-color--200, #004080));`
	`53`	`+ --pf-c-button--m-primary--Color: var(--pf-c-button--m-primary--hover--Color, var(--pf-global--Color--light-100, #fff));`
`52`	`54`	`}`
`53`	`55`
`54`	`56`	`[part="trigger"][hidden] {`