Added xh-bg-intent-xxx classNames (#3486)

xh · Dec 12, 2023 · a9502a7 · a9502a7
1 parent 0b1ef6a
commit a9502a7
Show file tree

Hide file tree

Showing 13 changed files with 45 additions and 95 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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); }