diff --git a/CHANGELOG.md b/CHANGELOG.md
index 7b2f0eab97..fea7587ee9 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,11 @@
 # Changelog
 
+## 60.0.0-SNAPSHOT
+
+### ✨ Styles
+
+* Added `xh-bg-intent-xxx` CSS classes, for intent-coloring the `background-color` of elements.
+
 ## 59.5.0 - 2023-12-11
 
 ### 🎁 New Features
diff --git a/admin/tabs/general/alertBanner/AlertBannerPanel.scss b/admin/tabs/general/alertBanner/AlertBannerPanel.scss
index adabd4a87f..ef12b9f006 100644
--- a/admin/tabs/general/alertBanner/AlertBannerPanel.scss
+++ b/admin/tabs/general/alertBanner/AlertBannerPanel.scss
@@ -56,4 +56,20 @@
       background-color: var(--xh-bg-alt);
     }
   }
+
+  .xh-button--intent-primary.xh-button--active:not(:hover) {
+    background-color: var(--xh-intent-primary) !important;
+  }
+
+  .xh-button--intent-success.xh-button--active:not(:hover) {
+    background-color: var(--xh-intent-success) !important;
+  }
+
+  .xh-button--intent-warning.xh-button--active:not(:hover) {
+    background-color: var(--xh-intent-warning) !important;
+  }
+
+  .xh-button--intent-danger.xh-button--active:not(:hover) {
+    background-color: var(--xh-intent-danger) !important;
+  }
 }
diff --git a/cmp/badge/Badge.scss b/cmp/badge/Badge.scss
index e2a93dba6f..4c87336f0a 100644
--- a/cmp/badge/Badge.scss
+++ b/cmp/badge/Badge.scss
@@ -17,20 +17,4 @@
   &--compact {
     font-size: 0.5em;
   }
-
-  &--intent-primary {
-    background-color: var(--xh-intent-primary);
-  }
-
-  &--intent-success {
-    background-color: var(--xh-intent-success);
-  }
-
-  &--intent-warning {
-    background-color: var(--xh-intent-warning);
-  }
-
-  &--intent-danger {
-    background-color: var(--xh-intent-danger);
-  }
 }
diff --git a/cmp/badge/Badge.ts b/cmp/badge/Badge.ts
index 7f586d0c64..a765f6ce74 100644
--- a/cmp/badge/Badge.ts
+++ b/cmp/badge/Badge.ts
@@ -35,7 +35,7 @@ export const [Badge, badge] = hoistCmp.withFactory<BadgeProps>({
                 splitLayoutProps(props);
 
         if (intent) {
-            classes.push(`xh-badge--intent-${intent}`);
+            classes.push(`xh-bg-intent-${intent}`);
         }
 
         if (compact) {
diff --git a/desktop/appcontainer/Banner.scss b/desktop/appcontainer/Banner.scss
index 637d8a3ebd..e81f19fa38 100644
--- a/desktop/appcontainer/Banner.scss
+++ b/desktop/appcontainer/Banner.scss
@@ -57,27 +57,7 @@ body.xh-app .xh-banner {
     }
   }
 
-  &.xh-intent-primary {
-    color: white;
-    background-color: var(--xh-intent-primary);
-  }
-
-  &.xh-intent-danger {
-    color: white;
-    background-color: var(--xh-intent-danger);
-  }
-
-  &.xh-intent-success {
-    color: white;
-    background-color: var(--xh-intent-success);
-  }
-
-  &.xh-intent-warning {
-    color: white;
-    background-color: var(--xh-intent-warning);
-  }
-
-  &.xh-intent-none {
+  &.xh-bg-intent-none {
     .xh-banner__action-button,
     .xh-banner__dismiss-button {
       border-color: unset !important;
diff --git a/desktop/appcontainer/Banner.ts b/desktop/appcontainer/Banner.ts
index 0d48baee89..f4a6e3c76e 100644
--- a/desktop/appcontainer/Banner.ts
+++ b/desktop/appcontainer/Banner.ts
@@ -32,7 +32,7 @@ export const banner = hoistCmp.factory({
             className: classNames(
                 'xh-banner',
                 className,
-                intent ? `xh-intent-${intent}` : `xh-intent-none`
+                intent ? `xh-bg-intent-${intent}` : `xh-bg-intent-none`
             ),
             items: [
                 hframe({
diff --git a/desktop/appcontainer/Toast.scss b/desktop/appcontainer/Toast.scss
index 5d628146fa..3370d065f1 100644
--- a/desktop/appcontainer/Toast.scss
+++ b/desktop/appcontainer/Toast.scss
@@ -29,22 +29,6 @@
       margin: 0 0 0 var(--xh-pad-half-px);
     }
 
-    &--primary {
-      background-color: var(--xh-intent-primary);
-    }
-
-    &--warning {
-      background-color: var(--xh-intent-warning);
-    }
-
-    &--danger {
-      background-color: var(--xh-intent-danger);
-    }
-
-    &--success {
-      background-color: var(--xh-intent-success);
-    }
-
     .bp4-toast-message {
       word-break: break-word;
     }
diff --git a/desktop/appcontainer/ToastSource.ts b/desktop/appcontainer/ToastSource.ts
index b76239d5eb..748da11fb8 100644
--- a/desktop/appcontainer/ToastSource.ts
+++ b/desktop/appcontainer/ToastSource.ts
@@ -70,7 +70,7 @@ class ToastSourceLocalModel extends HoistModel {
             let toaster = await this.getToasterAsync(position as ToasterPosition, containerRef);
             if (!bpId) {
                 model['bpId'] = toaster.show({
-                    className: classNames('xh-toast', `xh-toast--${intent}`),
+                    className: classNames('xh-toast', `xh-bg-intent-${intent}`),
                     icon: div({className: 'xh-toast__icon', item: icon}),
                     action: actionButtonProps,
                     onDismiss: () => wait(0).then(() => model.dismiss()),
diff --git a/mobile/appcontainer/Banner.scss b/mobile/appcontainer/Banner.scss
index 4ba33a6ecb..9df8deb0ef 100644
--- a/mobile/appcontainer/Banner.scss
+++ b/mobile/appcontainer/Banner.scss
@@ -58,27 +58,7 @@ body.xh-app .xh-banner {
     color: white !important;
   }
 
-  &.xh-intent-primary {
-    color: white;
-    background-color: var(--xh-intent-primary);
-  }
-
-  &.xh-intent-danger {
-    color: white;
-    background-color: var(--xh-intent-danger);
-  }
-
-  &.xh-intent-success {
-    color: white;
-    background-color: var(--xh-intent-success);
-  }
-
-  &.xh-intent-warning {
-    color: white;
-    background-color: var(--xh-intent-warning);
-  }
-
-  &.xh-intent-none {
+  &.xh-bg-intent-none {
     .xh-banner__action-button,
     .xh-banner__dismiss-button {
       border-color: unset !important;
diff --git a/mobile/appcontainer/Banner.ts b/mobile/appcontainer/Banner.ts
index 26587d2a80..75964f99e5 100644
--- a/mobile/appcontainer/Banner.ts
+++ b/mobile/appcontainer/Banner.ts
@@ -30,7 +30,7 @@ export const banner = hoistCmp.factory({
             className: classNames(
                 'xh-banner',
                 className,
-                intent ? `xh-intent-${intent}` : `xh-intent-none`
+                intent ? `xh-bg-intent-${intent}` : `xh-bg-intent-none`
             ),
             items: [
                 hframe({
diff --git a/mobile/appcontainer/Toast.scss b/mobile/appcontainer/Toast.scss
index b598acf1d1..abd698b23b 100644
--- a/mobile/appcontainer/Toast.scss
+++ b/mobile/appcontainer/Toast.scss
@@ -13,22 +13,6 @@
     box-shadow: 0 2px 20px rgba(0, 0, 0, 0.5);
   }
 
-  &.xh-intent-primary .toast {
-    background-color: var(--xh-intent-primary);
-  }
-
-  &.xh-intent-danger .toast {
-    background-color: var(--xh-intent-danger);
-  }
-
-  &.xh-intent-success .toast {
-    background-color: var(--xh-intent-success);
-  }
-
-  &.xh-intent-warning .toast {
-    background-color: var(--xh-intent-warning);
-  }
-
   .toast__message {
     margin: 0;
     display: flex;
diff --git a/mobile/appcontainer/Toast.ts b/mobile/appcontainer/Toast.ts
index 1b741c06e9..b8b0381e5a 100644
--- a/mobile/appcontainer/Toast.ts
+++ b/mobile/appcontainer/Toast.ts
@@ -21,7 +21,7 @@ export const toast = hoistCmp.factory({
 
     render({model}) {
         const {icon, message, intent, actionButtonProps} = model,
-            cls = `xh-toast xh-intent-${intent}`;
+            cls = `xh-toast xh-bg-intent-${intent}`;
 
         return onsenToast({
             visible: true,
diff --git a/styles/XH.scss b/styles/XH.scss
index a2f16289ae..3fd88aff1f 100644
--- a/styles/XH.scss
+++ b/styles/XH.scss
@@ -104,6 +104,22 @@ body.xh-app {
   .xh-intent-danger { color: var(--xh-intent-danger); }
   .xh-intent-success { color: var(--xh-intent-success); }
   .xh-intent-warning { color: var(--xh-intent-warning); }
+  .xh-bg-intent-primary {
+    background-color: var(--xh-intent-primary);
+    color: white;
+  }
+  .xh-bg-intent-danger {
+    background-color: var(--xh-intent-danger);
+    color: white;
+  }
+  .xh-bg-intent-success {
+    background-color: var(--xh-intent-success);
+    color: white;
+  }
+  .xh-bg-intent-warning {
+    background-color: var(--xh-intent-warning);
+    color: white;
+  }
 
   // Colors - pos/neg (red/green) vals
   .xh-pos-val { color: var(--xh-pos-val-color); }