--- a/browser/themes/linux/browser.css
+++ b/browser/themes/linux/browser.css
@@ -26,22 +26,22 @@
 
   --toolbarbutton-hover-background: rgba(255,255,255,.5) linear-gradient(rgba(255,255,255,.5), transparent);
   --toolbarbutton-hover-bordercolor: rgba(0,0,0,.25);
   --toolbarbutton-hover-boxshadow: none;
 
   --toolbarbutton-active-background: rgba(154,154,154,.5) linear-gradient(rgba(255,255,255,.7), rgba(255,255,255,.4));
   --toolbarbutton-active-bordercolor: rgba(0,0,0,.3);
   --toolbarbutton-active-boxshadow: 0 1px 1px rgba(0,0,0,.1) inset, 0 0 1px rgba(0,0,0,.3) inset;
+
+  --toolbarbutton-checkedhover-backgroundcolor: rgba(200,200,200,.5);
 %endif
 
   --toolbarbutton-vertical-text-padding: calc(var(--toolbarbutton-inner-padding) - 1px);
 
-  --toolbarbutton-checkedhover-backgroundcolor: rgba(200,200,200,.5);
-
   --panel-separator-color: ThreeDShadow;
   --arrowpanel-dimmed: hsla(0,0%,80%,.3);
   --arrowpanel-dimmed-further: hsla(0,0%,80%,.45);
   --arrowpanel-dimmed-even-further: hsla(0,0%,80%,.8);
 
   --urlbar-separator-color: ThreeDShadow;
 }
 

--- a/browser/themes/osx/browser.css
+++ b/browser/themes/osx/browser.css
@@ -35,19 +35,19 @@
   --toolbarbutton-hover-bordercolor: hsla(0,0%,0%,.2);
   --toolbarbutton-hover-boxshadow: 0 1px 0 hsla(0,0%,100%,.5),
                                    0 1px 0 hsla(0,0%,100%,.5) inset;
 
   --toolbarbutton-active-bordercolor: hsla(0,0%,0%,.3);
   --toolbarbutton-active-boxshadow: 0 1px 0 hsla(0,0%,100%,.5),
                                     0 1px 0 hsla(0,0%,0%,.05) inset,
                                     0 1px 1px hsla(0,0%,0%,.2) inset;
-%endif
 
   --toolbarbutton-checkedhover-backgroundcolor: hsla(0,0%,0%,.09);
+%endif
 
   --urlbar-dropmarker-url: url("chrome://browser/skin/urlbar-history-dropmarker.png");
   --urlbar-dropmarker-region: rect(0, 11px, 14px, 0);
   --urlbar-dropmarker-active-region: rect(0, 22px, 14px, 11px);
   --urlbar-dropmarker-2x-url: url("chrome://browser/skin/urlbar-history-dropmarker@2x.png");
   --urlbar-dropmarker-2x-region: rect(0, 22px, 28px, 0);
   --urlbar-dropmarker-active-2x-region: rect(0, 44px, 28px, 22px);
 

--- a/browser/themes/shared/compacttheme.inc.css
+++ b/browser/themes/shared/compacttheme.inc.css
@@ -48,29 +48,29 @@
   --urlbar-dropmarker-hover-region: rect(0, 22px, 14px, 11px);
   --urlbar-dropmarker-active-region: rect(0px, 33px, 14px, 22px);
   --urlbar-dropmarker-2x-url: url("chrome://browser/skin/compacttheme/urlbar-history-dropmarker.svg");
   --urlbar-dropmarker-2x-region: rect(0px, 11px, 14px, 0px);
   --urlbar-dropmarker-hover-2x-region: rect(0, 22px, 14px, 11px);
   --urlbar-dropmarker-active-2x-region: rect(0px, 33px, 14px, 22px);
 }
 
+%ifndef MOZ_PHOTON_THEME
 /* Override the lwtheme-specific styling for toolbar buttons */
 :root:-moz-lwtheme-brighttext,
 toolbar:-moz-lwtheme-brighttext  {
   --toolbarbutton-hover-background: rgba(25,33, 38,.6) linear-gradient(rgba(25,33,38,.6), rgba(25,33,38,.6)) padding-box;
   --toolbarbutton-hover-boxshadow: none;
   --toolbarbutton-hover-bordercolor: rgba(25,33,38,.6);
   --toolbarbutton-active-background: rgba(25,33,38,1) linear-gradient(rgba(25,33,38,1), rgba(25,33,38,1)) border-box;
   --toolbarbutton-active-boxshadow: none;
   --toolbarbutton-active-bordercolor: rgba(25,33,38,.8);
   --toolbarbutton-checkedhover-backgroundcolor: #3C5283;
-
 }
-
+%endif
 :root:-moz-lwtheme-darktext {
   --url-and-searchbar-background-color: #fff;
 
   --chrome-background-color: #E3E4E6;
   --chrome-color: #18191a;
   --chrome-secondary-background-color: #f5f6f7;
   --chrome-navigator-toolbox-separator-color: #cccccc;
   --chrome-nav-bar-separator-color: #B6B6B8;
@@ -83,29 +83,29 @@ toolbar:-moz-lwtheme-brighttext  {
   --tab-background-color: #E3E4E6;
   --tab-hover-background-color: #D7D8DA;
   --tab-selection-color: #f5f7fa;
   --tab-selection-background-color: #4c9ed9;
   --tab-selection-box-shadow: none;
   --pinned-tab-glow: radial-gradient(22px at center calc(100% - 2px), rgba(76,158,217,0.9) 13%, transparent 16%);
 }
 
+%ifndef MOZ_PHOTON_THEME
 /* Override the lwtheme-specific styling for toolbar buttons */
 :root:-moz-lwtheme-darktext,
 toolbar:-moz-lwtheme-darktext {
   --toolbarbutton-hover-background: #eaeaea;
   --toolbarbutton-hover-boxshadow: none;
   --toolbarbutton-hover-bordercolor: rgba(0,0,0,0.1);
   --toolbarbutton-active-background: #d7d7d8 border-box;
   --toolbarbutton-active-boxshadow: none;
   --toolbarbutton-active-bordercolor: rgba(0,0,0,0.15);
   --toolbarbutton-checkedhover-backgroundcolor: #d7d7d8;
 }
 
-%ifndef MOZ_PHOTON_THEME
 /* Give some space to drag the window around while customizing
    (normal space to left and right of tabs doesn't work in this case) */
 #main-window[tabsintitlebar][customizing] {
   --space-above-tabbar: 9px;
 }
 %endif
 /* Override @tabCurveHalfWidth@ and @tabCurveWidth@.  XXX: Switch to a CSS variable once the perf is sorted out - bug 1088771 */
 .tab-background-middle {

--- a/browser/themes/shared/toolbarbuttons.inc.css
+++ b/browser/themes/shared/toolbarbuttons.inc.css
@@ -12,16 +12,18 @@
 :root {
 %ifdef MOZ_PHOTON_THEME
   --toolbarbutton-hover-background: hsla(240,5%,5%,.1);
   --toolbarbutton-active-background: hsla(240,5%,5%,.15);
 
   --toolbarbutton-inner-padding: 6px;
 
   --backbutton-background: hsla(0,100%,100%,.8);
+  --backbutton-hover-background: var(--backbutton-background);
+  --backbutton-active-background: var(--toolbarbutton-active-background);
 
   --backbutton-border-color: hsla(240,5%,5%,.3);
 %else
   --backbutton-urlbar-overlap: 6px;
 
   /* icon width + border + horizontal padding (without the overlap from backbutton-urlbar-overlap) */
   --forwardbutton-width: 25px;
 
@@ -29,32 +31,36 @@
 %endif
 }
 
 /* Larger buttons in touch mode */
 :root[uidensity=touch] {
   --toolbarbutton-inner-padding: 9px;
 }
 
+%ifndef MOZ_PHOTON_THEME
 toolbar:-moz-lwtheme {
-%ifndef MOZ_PHOTON_THEME
   --toolbarbutton-hover-background: rgba(255,255,255,.25);
   --toolbarbutton-active-background: rgba(70%,70%,70%,.25);
 
   --toolbarbutton-hover-bordercolor: rgba(0,0,0,.2);
 
   --toolbarbutton-active-bordercolor: rgba(0,0,0,.3);
   --toolbarbutton-active-boxshadow: 0 0 2px rgba(0,0,0,.6) inset;
-%endif
+
   --toolbarbutton-checkedhover-backgroundcolor: rgba(85%,85%,85%,.25);
 }
+%else
+toolbar[brighttext] {
+  --toolbarbutton-hover-background: hsla(0,0%,100%,.2);
+  --toolbarbutton-active-background: hsla(0,0%,100%,.3);
 
-%ifdef MOZ_PHOTON_THEME
-toolbar[brighttext] {
-  --backbutton-background: hsla(240,5%,5%,.1);
+  --backbutton-background: var(--toolbarbutton-hover-background);
+  --backbutton-hover-background: var(--toolbarbutton-active-background);
+  --backbutton-active-background: hsla(0,0%,100%,.4);
 }
 %endif
 
 /* ::::: primary toolbar buttons ::::: */
 
 .tabbrowser-arrowscrollbox > .scrollbutton-up[disabled=true],
 .tabbrowser-arrowscrollbox > .scrollbutton-down[disabled=true],
 /* specialcase the overflow and the hamburger button so they show up disabled in customize mode. */
@@ -284,43 +290,51 @@ toolbarbutton.bookmark-item:not(.subview
 #nav-bar .toolbarbutton-1:not([disabled=true]):-moz-any(:hover,[open]) > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon,
 #nav-bar .toolbarbutton-1:not([disabled=true]):not([checked]):not([open]):not(:active):hover > .toolbarbutton-icon,
 #nav-bar .toolbarbutton-1:not([disabled=true]):not([checked]):not([open]):not(:active):hover > .toolbarbutton-text,
 #nav-bar .toolbarbutton-1:not([disabled=true]):not([checked]):not([open]):not(:active):hover > .toolbarbutton-badge-stack,
 %ifndef MOZ_PHOTON_THEME
 @conditionalForwardWithUrlbar@ > #forward-button:not([open]):not(:active):not([disabled]):hover > .toolbarbutton-icon,
 %endif
 #nav-bar .toolbarbutton-1:not([buttonover]):not([open]):not(:active):hover > .toolbarbutton-menubutton-dropmarker:not([disabled]) > .dropmarker-icon {
+%ifdef MOZ_PHOTON_THEME
+  background-color: var(--toolbarbutton-hover-background);
+%else
   background: var(--toolbarbutton-hover-background);
-%ifndef MOZ_PHOTON_THEME
   border-color: var(--toolbarbutton-hover-bordercolor);
   box-shadow: var(--toolbarbutton-hover-boxshadow);
 %endif
   color: inherit;
 }
 
 .findbar-button:not([disabled=true]):-moz-any([checked="true"],:hover:active) > .toolbarbutton-text,
 toolbarbutton.bookmark-item:not(.subviewbutton):hover:active:not([disabled="true"]),
 toolbarbutton.bookmark-item[open="true"],
 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button:not([disabled=true]):-moz-any(:hover:active, [open]) > .toolbarbutton-icon,
 #nav-bar .toolbarbutton-1[open] > .toolbarbutton-menubutton-dropmarker:not([disabled=true]) > .dropmarker-icon,
 #nav-bar .toolbarbutton-1:not([disabled=true]):-moz-any([open],[checked],:hover:active) > .toolbarbutton-icon,
 #nav-bar .toolbarbutton-1:not([disabled=true]):-moz-any([open],[checked],:hover:active) > .toolbarbutton-text,
 #nav-bar .toolbarbutton-1:not([disabled=true]):-moz-any([open],[checked],:hover:active) > .toolbarbutton-badge-stack {
+%ifdef MOZ_PHOTON_THEME
+  background-color: var(--toolbarbutton-active-background);
+%else
   background: var(--toolbarbutton-active-background);
-%ifndef MOZ_PHOTON_THEME
   border-color: var(--toolbarbutton-active-bordercolor);
   box-shadow: var(--toolbarbutton-active-boxshadow);
 %endif
   transition-duration: 10ms;
   color: inherit;
 }
 
 #nav-bar .toolbarbutton-1[checked]:not(:active):hover > .toolbarbutton-icon {
+%ifdef MOZ_PHOTON_THEME
+  background-color: var(--toolbarbutton-hover-background);
+%else
   background-color: var(--toolbarbutton-checkedhover-backgroundcolor);
+%endif
   transition: background-color .4s;
 }
 
 %ifndef MOZ_PHOTON_THEME
 /* unified back/forward button */
 
 :-moz-any(#back-button, #forward-button) > .toolbarbutton-icon {
   border-color: var(--backbutton-border-color) !important;
@@ -378,20 +392,20 @@ toolbarbutton.bookmark-item[open="true"]
 }
 
 #back-button > menupopup {
   margin-top: -1px !important;
 }
 
 :root:not([uidensity=compact]) #back-button > .toolbarbutton-icon {
 %ifdef MOZ_PHOTON_THEME
-  background: var(--backbutton-background);
-  border: 1px solid var(--backbutton-border-color);
+  background-color: var(--backbutton-background);
   background-origin: padding-box;
   background-clip: padding-box;
+  border: 1px solid var(--backbutton-border-color);
 %endif
   border-radius: 10000px;
   max-width: 32px;
   padding: 7px;
 }
 
 :root[uidensity=touch] #back-button {
   padding-top: 1px;
@@ -400,24 +414,24 @@ toolbarbutton.bookmark-item[open="true"]
 
 :root[uidensity=touch] #back-button > .toolbarbutton-icon {
   max-width: 38px;
   padding: 10px;
 }
 
 %ifdef MOZ_PHOTON_THEME
 :root:not([uidensity=compact]) #back-button:not([disabled]):not([open]):hover > .toolbarbutton-icon {
-  background: var(--backbutton-background) !important;
+  background-color: var(--backbutton-hover-background) !important;
   box-shadow: 0 1px 6px hsla(0,0%,0%,.1);
   border-color: hsla(240,5%,5%,.35);
 }
 
 :root:not([uidensity=compact]) #back-button[open] > .toolbarbutton-icon,
 :root:not([uidensity=compact]) #back-button:not([disabled]):hover:active > .toolbarbutton-icon {
-  background: var(--toolbarbutton-active-background) !important;
+  background-color: var(--backbutton-active-background) !important;
   border-color: hsla(240,5%,5%,.40);
 }
 %endif
 
 /* bookmarks menu-button */
 
 #bookmarks-menu-button[cui-areatype="toolbar"] > .toolbarbutton-menubutton-dropmarker {
   -moz-appearance: none !important;

--- a/browser/themes/windows/browser.css
+++ b/browser/themes/windows/browser.css
@@ -32,19 +32,19 @@
   --backbutton-border-color: var(--urlbar-border-color-hover);
   --backbutton-background: rgba(255,255,255,.15);
 
   --toolbarbutton-hover-bordercolor: rgba(0,0,0,.2);
   --toolbarbutton-hover-boxshadow: none;
 
   --toolbarbutton-active-bordercolor: rgba(0,0,0,.3);
   --toolbarbutton-active-boxshadow: 0 0 0 1px rgba(0,0,0,.15) inset;
-%endif
 
   --toolbarbutton-checkedhover-backgroundcolor: rgba(0,0,0,.1);
+%endif
 
   --urlbar-dropmarker-url: url("chrome://browser/skin/urlbar-history-dropmarker.png");
   --urlbar-dropmarker-region: rect(0px, 11px, 14px, 0px);
   --urlbar-dropmarker-hover-region: rect(0px, 22px, 14px, 11px);
   --urlbar-dropmarker-active-region: rect(0px, 33px, 14px, 22px);
   --urlbar-dropmarker-2x-url: url("chrome://browser/skin/urlbar-history-dropmarker@2x.png");
   --urlbar-dropmarker-2x-region: rect(0, 22px, 28px, 0);
   --urlbar-dropmarker-hover-2x-region: rect(0, 44px, 28px, 22px);
@@ -59,27 +59,28 @@
 }
 
 @media (-moz-windows-default-theme) {
   :root {
     --panel-separator-color: hsla(210,4%,10%,.14);
   }
 }
 
+%ifndef MOZ_PHOTON_THEME
 toolbar[brighttext] {
   --toolbarbutton-hover-background: rgba(255,255,255,.25);
   --toolbarbutton-hover-bordercolor: rgba(255,255,255,.5);
 
   --toolbarbutton-active-background: rgba(255,255,255,.4);
   --toolbarbutton-active-bordercolor: rgba(255,255,255,.7);
   --toolbarbutton-active-boxshadow: 0 0 0 1px rgba(255,255,255,.4) inset;
 
   --toolbarbutton-checkedhover-backgroundcolor: rgba(255,255,255,.3);
 }
-
+%endif
 #menubar-items {
   -moz-box-orient: vertical; /* for flex hack */
 }
 
 #main-menubar {
   -moz-box-flex: 1; /* make menu items expand to fill toolbar height */
 }